@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@500;600&display=swap");

:root {
  --bg: #080b12;
  --surface: #0e131e;
  --surface-2: #141b28;
  --line: rgba(255, 255, 255, .08);
  --text: #f5f7fb;
  --muted: #8893a7;
  --blue: #5478ff;
  --cyan: #62e4ff;
  --green: #55e6a5;
  --red: #ff6b78;
  --font: "Inter", system-ui, sans-serif;
  --display: "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); font-family: var(--font); }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 80% -10%, rgba(84, 120, 255, .14), transparent 30%), var(--bg); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.04em; }
h1 { font-size: clamp(2rem, 4vw, 3.5rem); margin-bottom: .5rem; }
h2 { font-size: 1.25rem; }
.muted { color: var(--muted); line-height: 1.7; }
.eyebrow { color: var(--cyan); font-size: .72rem; font-weight: 600; letter-spacing: .16em; margin-bottom: .75rem; text-transform: uppercase; }
.brand { align-items: center; display: flex; font-family: var(--display); font-weight: 600; gap: .75rem; letter-spacing: -.03em; }
.brand small { color: var(--muted); display: block; font-family: var(--font); font-size: .58rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark { align-items: center; background: linear-gradient(145deg, var(--cyan), var(--blue)); border-radius: 12px; box-shadow: 0 12px 30px rgba(84, 120, 255, .25); color: #07101b; display: inline-flex; font-weight: 600; height: 38px; justify-content: center; width: 38px; }
.brand-large { font-size: 1.15rem; margin-bottom: 3.5rem; }
.brand-large .brand-mark { height: 46px; width: 46px; }
.brand-center { justify-content: center; margin-bottom: 3rem; }
.button { align-items: center; border: 1px solid var(--line); border-radius: 12px; display: inline-flex; justify-content: center; min-height: 44px; padding: 0 1rem; }
.button-primary { background: linear-gradient(135deg, var(--blue), #7454ff); border: 0; box-shadow: 0 14px 34px rgba(84, 120, 255, .25); color: white; font-weight: 600; }
.button-ghost { background: rgba(255, 255, 255, .035); color: var(--muted); width: 100%; }
.alert { border-radius: 12px; margin: 1rem 0; padding: .9rem 1rem; }
.alert-error { background: rgba(255, 107, 120, .1); border: 1px solid rgba(255, 107, 120, .2); color: #ffadb5; }
.status-dot, .pulse { background: var(--green); border-radius: 50%; box-shadow: 0 0 16px rgba(85, 230, 165, .7); display: inline-block; height: 7px; width: 7px; }

.login-shell, .connect-shell { align-items: center; display: flex; justify-content: center; min-height: 100vh; padding: 24px; }
.login-panel { background: linear-gradient(150deg, rgba(20, 27, 40, .97), rgba(9, 13, 21, .98)); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 35px 90px rgba(0, 0, 0, .38); max-width: 480px; padding: 42px; position: relative; width: 100%; }
.login-panel::before { background: linear-gradient(90deg, var(--cyan), var(--blue), transparent); content: ""; height: 1px; left: 40px; position: absolute; right: 40px; top: 0; }
.form-stack { display: grid; gap: 1rem; margin-top: 2rem; }
.form-stack label span { color: var(--muted); display: block; font-size: .78rem; margin-bottom: .5rem; }
.form-stack input { background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 12px; color: white; outline: 0; padding: .9rem 1rem; transition: .2s; width: 100%; }
.form-stack input:focus { border-color: rgba(98, 228, 255, .5); box-shadow: 0 0 0 3px rgba(98, 228, 255, .07); }
.security-note { color: var(--muted); font-size: .72rem; margin-top: 1.5rem; text-align: center; }
.security-note .status-dot { margin-right: .4rem; }

.app-shell { display: grid; grid-template-columns: 245px 1fr; min-height: 100vh; }
.sidebar { background: rgba(9, 13, 21, .88); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 26px 20px; position: sticky; height: 100vh; top: 0; }
.sidebar nav { display: grid; gap: .35rem; margin-top: 3rem; }
.nav-link { align-items: center; border-radius: 11px; color: var(--muted); display: flex; font-size: .86rem; justify-content: space-between; padding: .8rem .85rem; }
.nav-link:hover, .nav-link.active { background: rgba(84, 120, 255, .1); color: white; }
.nav-link kbd { background: transparent; color: #4f5b70; font: 500 .65rem var(--font); }
.sidebar-foot { margin-top: auto; }
.system-state { align-items: center; color: var(--muted); display: flex; font-size: .68rem; gap: .55rem; margin: 0 0 1rem .4rem; }
.main { min-width: 0; padding: 38px 42px; }
.topbar { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 2rem; }
.topbar h1 { font-size: 2rem; }
.live-pill { align-items: center; background: rgba(85, 230, 165, .07); border: 1px solid rgba(85, 230, 165, .15); border-radius: 99px; color: #a1f5cf; display: flex; font-size: .68rem; gap: .5rem; padding: .5rem .8rem; text-transform: uppercase; }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(85, 230, 165, 0); } }
.metric-grid { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
.metric-grid-six { grid-template-columns: repeat(6, 1fr); }
.metric-card { background: linear-gradient(145deg, rgba(20, 27, 40, .92), rgba(13, 18, 28, .92)); border: 1px solid var(--line); border-radius: 18px; min-height: 154px; overflow: hidden; padding: 22px; position: relative; }
.metric-card.accent::after { background: var(--blue); border-radius: 50%; box-shadow: 0 0 60px 25px rgba(84, 120, 255, .2); content: ""; height: 6px; position: absolute; right: 22px; top: 24px; width: 6px; }
.metric-card.metric-good strong { color: var(--green); }
.metric-card.metric-bad strong { color: var(--red); }
.metric-card span, .metric-card small { color: var(--muted); display: block; font-size: .72rem; }
.metric-card strong { display: block; font-family: var(--display); font-size: 2.3rem; letter-spacing: -.06em; margin: 1.35rem 0 .35rem; }
.content-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr); margin-top: 14px; }
.panel { background: rgba(14, 19, 30, .92); border: 1px solid var(--line); border-radius: 18px; min-width: 0; padding: 22px; }
.panel-head { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 1.25rem; }
.panel-head h2 { margin-bottom: 0; }
.panel-head a { color: var(--cyan); font-size: .72rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; }
th { color: #5f6a7c; font-size: .65rem; font-weight: 500; letter-spacing: .08em; padding: .7rem; text-align: left; text-transform: uppercase; }
td { border-top: 1px solid var(--line); color: #c8cfda; font-size: .75rem; padding: .85rem .7rem; }
.identity { align-items: center; display: flex; gap: .65rem; }
.identity small { color: var(--muted); display: block; margin-top: .2rem; }
.avatar { align-items: center; background: linear-gradient(135deg, rgba(98, 228, 255, .18), rgba(84, 120, 255, .18)); border: 1px solid rgba(98, 228, 255, .15); border-radius: 10px; color: var(--cyan); display: inline-flex; flex: 0 0 auto; height: 32px; justify-content: center; width: 32px; }
.avatar-large { border-radius: 14px; font-size: 1.2rem; height: 48px; width: 48px; }
.badge { border: 1px solid var(--line); border-radius: 99px; color: var(--muted); display: inline-flex; font-size: .61rem; padding: .3rem .5rem; text-transform: uppercase; }
.badge-active { background: rgba(85, 230, 165, .08); border-color: rgba(85, 230, 165, .13); color: #8bf0c0; }
.badge-pending { color: #ffd887; }
.badge-disabled, .badge-revoked, .badge-expired { background: rgba(255, 107, 120, .08); color: #ff9aa4; }
.table-action { background: transparent; border: 0; color: #ff939d; font-size: .68rem; }
.table-action-good { color: var(--cyan); }
.health-healthy { background: rgba(85, 230, 165, .08); color: #8bf0c0; }
.health-empty, .health-unreachable, .health-degraded { background: rgba(255, 107, 120, .08); color: #ff9aa4; }
.health-unknown { color: #ffd887; }
.health-detail { color: var(--muted); display: block; font-size: .6rem; margin-top: .3rem; }
.empty { color: var(--muted); padding: 2rem; text-align: center; }
.timeline { display: grid; gap: 1rem; }
.timeline-item { display: grid; gap: .7rem; grid-template-columns: 8px 1fr; }
.timeline-dot { background: var(--blue); border-radius: 50%; box-shadow: 0 0 14px rgba(84, 120, 255, .55); height: 7px; margin-top: .35rem; width: 7px; }
.timeline-item b { display: block; font-size: .72rem; }
.timeline-item small { color: var(--muted); display: block; font-size: .63rem; margin-top: .25rem; }
.user-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.user-card { background: rgba(14, 19, 30, .92); border: 1px solid var(--line); border-radius: 18px; padding: 20px; }
.user-card-head { align-items: center; display: grid; gap: .8rem; grid-template-columns: auto 1fr auto; }
.user-card-head h3 { font-size: .95rem; margin: 0; }
.user-card-head p { color: var(--muted); font-size: .7rem; margin: .2rem 0 0; }
.user-meta { border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); display: grid; gap: .6rem; grid-template-columns: repeat(3, 1fr); margin: 1rem 0; padding: 1rem 0; }
.user-meta span { color: var(--muted); font-size: .62rem; }
.user-meta b { color: var(--text); display: block; font-size: .7rem; margin-top: .25rem; }
.sub-row { align-items: center; display: flex; font-size: .7rem; justify-content: space-between; padding-top: .6rem; }
.empty-state { border: 1px dashed var(--line); border-radius: 18px; color: var(--muted); grid-column: 1 / -1; padding: 5rem; text-align: center; }

.connect-shell { background: radial-gradient(circle at 50% 0%, rgba(84, 120, 255, .18), transparent 34%); }
.connect-card { background: linear-gradient(155deg, rgba(20, 27, 40, .98), rgba(8, 12, 20, .99)); border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 40px 100px rgba(0, 0, 0, .5); max-width: 560px; overflow: hidden; padding: 38px; text-align: center; width: 100%; }
.connection-orb { height: 116px; margin: 0 auto 2.2rem; position: relative; width: 116px; }
.orb-ring { animation: orbit 10s linear infinite; border: 1px solid rgba(98, 228, 255, .28); border-radius: 50%; inset: 0; position: absolute; }
.orb-ring::before { background: var(--cyan); border-radius: 50%; box-shadow: 0 0 16px var(--cyan); content: ""; height: 7px; left: 18px; position: absolute; top: 8px; width: 7px; }
.orb-core { background: radial-gradient(circle at 35% 30%, var(--cyan), var(--blue) 55%, #2b1f7e); border-radius: 50%; box-shadow: 0 0 45px rgba(84, 120, 255, .4); inset: 17px; position: absolute; }
.orb-core::after { color: white; content: "H"; font: 600 1.8rem var(--display); left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.orb-off { filter: grayscale(1); opacity: .5; }
@keyframes orbit { to { transform: rotate(360deg); } }
.connect-card h1 { font-size: 2rem; }
.app-buttons { display: grid; gap: .8rem; margin: 2rem 0 1rem; }
.app-button { align-items: center; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); border-radius: 15px; display: flex; gap: .9rem; padding: .9rem; text-align: left; transition: .2s; }
.app-button:hover { border-color: rgba(98, 228, 255, .3); transform: translateY(-1px); }
.app-button.primary { background: linear-gradient(100deg, rgba(84, 120, 255, .22), rgba(98, 228, 255, .06)); border-color: rgba(98, 228, 255, .25); }
.app-glyph { align-items: center; background: linear-gradient(145deg, var(--cyan), var(--blue)); border-radius: 12px; color: #07101b; display: inline-flex; flex: 0 0 auto; font-weight: 600; height: 42px; justify-content: center; width: 42px; }
.app-glyph-happ { background: linear-gradient(145deg, #a78bfa, #7c3aed); color: #fff; }
.app-glyph-streisand { background: linear-gradient(145deg, #fb923c, #ea580c); color: #fff; }
.app-button b, .app-button small { display: block; }
.app-button b { font-size: .82rem; }
.app-button small { color: var(--muted); font-size: .63rem; margin-top: .3rem; }
.manual { border: 1px solid var(--line); border-radius: 14px; margin: .8rem 0 1.4rem; padding: .9rem; }
.manual summary { color: var(--muted); cursor: pointer; font-size: .72rem; }
.qr { background: white; border-radius: 14px; margin: 1.2rem auto; max-width: 180px; padding: 8px; width: 100%; }
.copy-field { display: flex; gap: .5rem; }
.copy-field input { background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); min-width: 0; padding: .7rem; width: 100%; }
.copy-field button { background: var(--blue); border: 0; border-radius: 9px; color: white; font-size: .65rem; padding: 0 .8rem; }
.access-stats { border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.4rem; padding-top: 1.4rem; }
.access-stats span { border-right: 1px solid var(--line); }
.access-stats span:last-child { border: 0; }
.access-stats small, .access-stats b { display: block; }
.access-stats small { color: var(--muted); font-size: .58rem; margin-bottom: .35rem; }
.access-stats b { font-size: .72rem; }
.support-link { color: var(--cyan); display: inline-block; font-size: .68rem; margin-top: 1.5rem; }

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: 25px; }
  .metric-grid, .metric-grid-six { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .metric-grid, .user-grid { grid-template-columns: 1fr; }
  .main { padding: 20px 14px; }
  .login-panel, .connect-card { border-radius: 22px; padding: 26px 20px; }
  .access-stats { gap: .7rem; grid-template-columns: 1fr; }
  .access-stats span { border-bottom: 1px solid var(--line); border-right: 0; padding-bottom: .7rem; }
  .access-stats span:last-child { border-bottom: 0; }
}

/* ═══════════════════════════════════════════════
   CONNECT V2 — World-Class Two-Step Design
   ═══════════════════════════════════════════════ */

.cv2-shell {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(84,120,255,.22), transparent),
    radial-gradient(ellipse 50% 60% at 90% 80%, rgba(168,85,247,.10), transparent),
    #07090f;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 48px;
}

.cv2-header {
  width: 100%;
  max-width: 540px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 40px;
}

.cv2-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.02em;
}

.cv2-logo-mark {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #62e4ff, #5478ff);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #07101b; font-size: .9rem;
  box-shadow: 0 8px 24px rgba(84,120,255,.3);
}

.cv2-status-pill {
  display: flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 600;
  padding: 6px 12px; border-radius: 99px; letter-spacing: .02em;
}
.pill-green { background: rgba(85,230,165,.1); border: 1px solid rgba(85,230,165,.2); color: #6fefb5; }
.pill-yellow { background: rgba(251,191,36,.1); border: 1px solid rgba(251,191,36,.2); color: #fcd34d; }
.pill-blue { background: rgba(84,120,255,.1); border: 1px solid rgba(84,120,255,.2); color: #93aaff; }
.pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: pulse 2s infinite; }

.cv2-hero { text-align: center; margin-bottom: 36px; max-width: 540px; width: 100%; }
.cv2-title { font-family: var(--display); font-size: clamp(2rem,5vw,2.8rem); font-weight: 800; letter-spacing: -.04em; margin: 0 0 10px; line-height: 1.1; }
.cv2-title-accent { background: linear-gradient(135deg, #62e4ff, #5478ff, #a855f7); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.cv2-subtitle { color: var(--muted); font-size: .95rem; margin: 0; }
.cv2-warning { background: rgba(245, 158, 11, .1); border: 1px solid rgba(245, 158, 11, .22); border-radius: 14px; color: #ffd48a; font-size: .78rem; line-height: 1.55; margin: 16px auto 0; max-width: 460px; padding: 12px 14px; text-align: left; }

.cv2-steps { width: 100%; max-width: 540px; display: flex; flex-direction: column; }

.cv2-step {
  background: linear-gradient(160deg, rgba(20,27,40,.95), rgba(10,13,22,.97));
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 24px; padding: 28px; position: relative; overflow: hidden;
}
.cv2-step::before { content: ''; position: absolute; top: 0; left: 32px; right: 32px; height: 1px; background: linear-gradient(90deg, transparent, rgba(98,228,255,.25), transparent); }

.cv2-step-header { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.cv2-step-num { width: 36px; height: 36px; min-width: 36px; background: linear-gradient(135deg, rgba(84,120,255,.3), rgba(168,85,247,.2)); border: 1px solid rgba(84,120,255,.35); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 800; font-size: 1rem; color: #93aaff; }
.cv2-step-title { font-family: var(--display); font-size: 1.15rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.02em; }
.cv2-step-desc { color: var(--muted); font-size: .8rem; margin: 0; }

.cv2-apps { display: flex; flex-direction: column; gap: 8px; }
.cv2-app { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,.06); border-radius: 14px; background: rgba(255,255,255,.025); transition: all .2s; color: var(--text); text-decoration: none; }
.cv2-app:hover { border-color: rgba(98,228,255,.25); background: rgba(98,228,255,.05); transform: translateY(-1px); }
.cv2-app:hover .cv2-app-arrow { opacity: 1; transform: translateX(2px); }
.cv2-app-icon { width: 44px; height: 44px; min-width: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.3); }
.cv2-app-info { flex: 1; min-width: 0; }
.cv2-app-info b { display: block; font-size: .88rem; font-weight: 600; }
.cv2-app-info small { color: var(--muted); font-size: .68rem; display: block; margin-top: 2px; }
.cv2-app-badge { font-size: .6rem; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: rgba(85,230,165,.12); border: 1px solid rgba(85,230,165,.2); color: #6fefb5; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.cv2-app-arrow { color: var(--muted); opacity: .4; transition: all .2s; flex-shrink: 0; }

.cv2-step-divider { display: flex; align-items: center; padding: 16px 28px; gap: 12px; }
.cv2-divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
.cv2-divider-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #62e4ff, #5478ff); box-shadow: 0 0 12px rgba(84,120,255,.5); }

.cv2-connect-buttons { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.cv2-connect-btn { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.07); border-radius: 14px; background: rgba(255,255,255,.03); transition: all .2s; color: var(--text); text-decoration: none; }
.cv2-connect-btn:hover { border-color: rgba(84,120,255,.35); background: rgba(84,120,255,.08); transform: translateY(-1px); box-shadow: 0 8px 24px rgba(84,120,255,.12); }
.cv2-connect-btn:hover svg { opacity: 1; transform: translateX(3px); }
.cv2-connect-btn svg { color: var(--muted); opacity: .4; transition: all .2s; flex-shrink: 0; }
.cv2-connect-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95rem; color: white; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.cv2-connect-info { flex: 1; min-width: 0; }
.cv2-connect-info b { display: block; font-size: .88rem; font-weight: 600; }
.cv2-connect-info small { color: var(--muted); font-size: .67rem; display: block; margin-top: 2px; }

.cv2-manual { border: 1px solid rgba(255,255,255,.05); border-radius: 12px; overflow: hidden; }
.cv2-manual-toggle { display: flex; align-items: center; gap: 7px; padding: 12px 14px; color: var(--muted); font-size: .75rem; cursor: pointer; list-style: none; transition: color .2s; }
.cv2-manual-toggle:hover { color: var(--text); }
.cv2-manual-toggle::-webkit-details-marker { display: none; }
.cv2-manual-body { padding: 0 14px 14px; }
.cv2-qr-wrap { text-align: center; margin-bottom: 14px; }
.cv2-qr { background: white; border-radius: 12px; padding: 8px; max-width: 160px; width: 100%; }
.cv2-qr-hint { color: var(--muted); font-size: .68rem; margin: 8px 0 0; }
.cv2-copy-row { display: flex; gap: 8px; }
.cv2-copy-input { flex: 1; min-width: 0; background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.08); border-radius: 9px; color: var(--muted); padding: 9px 12px; font-size: .72rem; outline: none; }
.cv2-copy-btn { display: flex; align-items: center; gap: 6px; background: linear-gradient(135deg, #5478ff, #7c3aed); border: none; border-radius: 9px; color: white; font-size: .72rem; font-weight: 600; padding: 0 14px; cursor: pointer; white-space: nowrap; transition: opacity .2s; }
.cv2-copy-btn:hover { opacity: .9; }

.cv2-info-bar { width: 100%; max-width: 540px; display: flex; align-items: center; justify-content: center; margin-top: 20px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 16px; padding: 16px 24px; }
.cv2-info-item { flex: 1; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.cv2-info-label { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.cv2-info-value { font-family: var(--display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.02em; }
.cv2-info-sep { width: 1px; height: 36px; background: rgba(255,255,255,.07); }

.cv2-footer { margin-top: 28px; text-align: center; }
.cv2-support { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: .75rem; text-decoration: none; transition: color .2s; }
.cv2-support:hover { color: var(--cyan); }

.cv2-expired { text-align: center; max-width: 380px; padding: 48px 24px; }
.cv2-expired-icon { font-size: 3rem; margin-bottom: 20px; }
.cv2-expired h1 { font-size: 1.8rem; margin-bottom: 12px; }
.cv2-expired p { color: var(--muted); margin-bottom: 28px; line-height: 1.6; }
.cv2-btn-primary { display: inline-flex; align-items: center; background: linear-gradient(135deg, #5478ff, #7c3aed); border-radius: 12px; color: white; font-weight: 600; padding: 12px 24px; text-decoration: none; transition: opacity .2s; }
.cv2-btn-primary:hover { opacity: .9; }

@media (max-width: 560px) {
  .cv2-header { margin-bottom: 28px; }
  .cv2-step { padding: 20px 16px; }
  .cv2-title { font-size: 1.8rem; }
  .cv2-info-bar { padding: 12px 16px; }
}