
:root{--bg:#07101c;--sidebar:#0a1422;--panel:#0d1929;--panel-deep:#081522;--border:#203047;--border-light:#2a3d57;--text:#f8fafc;--text-soft:#cbd5e1;--muted:#8191a7;--primary:#6d5dfc;--primary-hover:#7c6cff;--primary-soft:rgba(109,93,252,.14);--green:#22c55e;--yellow:#facc15;--red:#ef4444;--sidebar-width:238px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at top right,rgba(109,93,252,.08),transparent 28%),var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{transition:.15s ease}button:active:not(:disabled){transform:translateY(1px)}a{color:inherit}
.loading-screen{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;background:var(--bg)}.loading-inner{text-align:center}.spinner{width:38px;height:38px;margin:0 auto 14px;border-radius:50%;border:3px solid #1b2a3e;border-top-color:var(--primary);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--muted);font-size:13px}
.sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;max-height:100vh;width:var(--sidebar-width);display:flex;flex-direction:column;padding:18px 16px 18px;background:rgba(10,20,34,.96);border-right:1px solid var(--border);backdrop-filter:blur(16px);z-index:50;overflow:hidden}.sidebar>div:first-child{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:2px;padding-bottom:8px;scrollbar-width:thin;scrollbar-color:#26364b transparent}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:5px 6px 26px}.brand-logo{width:36px;height:36px;flex:0 0 36px;display:block;overflow:hidden;border-radius:10px;background:transparent;box-shadow:none;font-size:0}.brand-logo img{display:block!important;width:36px!important;height:36px!important;max-width:36px!important;max-height:36px!important;object-fit:cover;border-radius:10px}.brand-name{font-size:15px;font-weight:800}.brand-caption{margin-top:2px;color:var(--muted);font-size:10px}.sidebar-section-label{padding:0 10px;margin:10px 0 7px;color:#64748b;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase}.sidebar-nav{display:flex;flex-direction:column;gap:4px}.nav-link{position:relative;display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:10px;text-decoration:none;color:#8fa0b6;font-size:13px;font-weight:550}.nav-link:hover{background:#111f31;color:#e8edf5}.nav-link.active{background:var(--primary-soft);color:#fff}.nav-link.active:before{content:"";position:absolute;left:-16px;width:3px;height:22px;border-radius:0 5px 5px 0;background:var(--primary)}.nav-icon{width:18px;display:inline-flex;justify-content:center}.career-pending-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(109,93,252,.42);border-radius:999px;background:rgba(109,93,252,.16);color:#ddd9ff;font-size:9px;font-weight:850;line-height:1}.career-pending-badge[hidden]{display:none!important}.nav-disabled{opacity:.4;pointer-events:none}.sidebar-footer{margin-top:8px;flex:0 0 auto;padding-top:8px;padding-bottom:2px}.user-card{padding:12px;margin-bottom:8px;border:1px solid var(--border);border-radius:12px;background:#091525}.user-avatar-row{display:flex;align-items:center;gap:9px}.user-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--primary-soft);color:#bcb4ff;font-weight:800;font-size:12px}.user-name{font-size:12px;font-weight:700}.user-email{margin-top:2px;color:var(--muted);font-size:10px;max-width:135px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.logout-button{width:100%;min-height:40px;padding:9px 11px;border:1px solid rgba(248,113,113,.24);border-radius:10px;background:rgba(127,29,29,.10);color:#fca5a5;cursor:pointer;font-size:12px;font-weight:750}.logout-button:hover{border-color:rgba(248,113,113,.46);background:rgba(127,29,29,.18);color:#fee2e2}
.main{margin-left:var(--sidebar-width);min-height:100vh}.topbar{position:sticky;top:0;z-index:40;height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;background:rgba(7,16,28,.9);border-bottom:1px solid rgba(32,48,71,.78);backdrop-filter:blur(18px)}.topbar-left{display:flex;align-items:center;gap:12px}.page-title{font-size:17px;font-weight:750}.page-badge{padding:4px 8px;border-radius:999px;background:rgba(109,93,252,.1);border:1px solid rgba(109,93,252,.2);color:#bcb5ff;font-size:9px;font-weight:800;text-transform:uppercase}.topbar-action{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:#091525;color:var(--text-soft);text-decoration:none;font-size:11px;font-weight:700}.page-content{max-width:1340px;margin:0 auto;padding:26px 28px 80px}.hero{display:flex;justify-content:space-between;gap:24px;margin-bottom:20px}.hero h1{margin:0;font-size:26px;letter-spacing:-.7px}.hero p{margin:7px 0 0;color:var(--muted);font-size:13px;line-height:1.55;max-width:780px}
.panel{background:linear-gradient(145deg,rgba(15,29,47,.98),rgba(12,24,40,.98));border:1px solid var(--border);border-radius:20px;box-shadow:0 12px 36px rgba(0,0,0,.1);overflow:hidden}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding:19px 20px;border-bottom:1px solid var(--border)}.panel-title{font-size:14px;font-weight:750}.panel-subtitle{margin-top:4px;color:var(--muted);font-size:11px;line-height:1.5}.panel-body{padding:20px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.stat-card{padding:16px;border:1px solid var(--border);border-radius:14px;background:#081522}.stat-label{color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.6px}.stat-value{margin-top:7px;font-size:24px;font-weight:850}.stat-sub{margin-top:4px;color:var(--muted);font-size:10px}
.card-list{display:flex;flex-direction:column;gap:10px}.list-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px;border:1px solid var(--border);border-radius:14px;background:#081522;text-decoration:none;cursor:pointer}.list-card:hover{border-color:var(--border-light);background:#0b1928}.list-main{min-width:0}.list-title{font-size:13px;font-weight:750}.list-meta{margin-top:5px;color:var(--muted);font-size:10px;line-height:1.45}.list-right{text-align:right;flex:0 0 auto}.score{font-size:18px;font-weight:850}.score small{font-size:9px;color:var(--muted);font-weight:650}.pill{display:inline-flex;align-items:center;padding:4px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);background:#0a1726;font-size:8px;font-weight:800;text-transform:uppercase}.pill.purple{border-color:rgba(109,93,252,.28);background:var(--primary-soft);color:#bcb5ff}.empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:12px}
.field{margin-bottom:14px}.field:last-child{margin-bottom:0}.field-label{display:block;margin-bottom:6px;color:#b8c4d4;font-size:11px;font-weight:700}input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;outline:none;background:#081522;color:#edf2f7;font-size:12px}input:focus,select:focus,textarea:focus{border-color:rgba(109,93,252,.7);box-shadow:0 0 0 3px rgba(109,93,252,.1)}textarea{min-height:110px;resize:vertical;line-height:1.5}.button-row{display:flex;gap:8px;flex-wrap:wrap}.button{padding:9px 13px;border:1px solid var(--border);border-radius:10px;background:#0a1726;color:var(--text-soft);cursor:pointer;font-size:11px;font-weight:750;text-decoration:none}.button.primary{border-color:var(--primary);background:var(--primary);color:#fff}
.section-stack{display:flex;flex-direction:column;gap:16px}.error-message,.success-message{display:none;margin-bottom:16px;padding:11px 13px;border-radius:11px;font-size:11px;line-height:1.5}.error-message{border:1px solid rgba(239,68,68,.35);background:rgba(127,29,29,.24);color:#fecaca}.success-message{border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.06);color:#bbf7d0}.error-message.visible,.success-message.visible{display:block}
.score-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.score-item{padding:12px;border:1px solid var(--border);border-radius:11px;background:#081522}.score-item-label{color:var(--muted);font-size:8px;font-weight:800;text-transform:uppercase}.score-item-value{margin-top:5px;font-size:18px;font-weight:850}.review-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.review-box{padding:14px;border:1px solid var(--border);border-radius:12px;background:#081522}.review-box-title{margin-bottom:8px;color:var(--muted);font-size:9px;font-weight:800;text-transform:uppercase}.review-box-content{color:var(--text-soft);font-size:11px;line-height:1.6}.transcript-turn{padding:15px;border:1px solid var(--border);border-radius:14px;background:#081522}.turn-number{color:#bcb5ff;font-size:9px;font-weight:800;text-transform:uppercase}.turn-question{margin-top:7px;font-size:13px;font-weight:750;line-height:1.5}.turn-answer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);color:var(--text-soft);font-size:11px;line-height:1.65}.turn-help{margin-top:10px;color:var(--muted);font-size:10px}
.brain-section{display:flex;flex-direction:column;gap:10px}.brain-card{padding:14px;border:1px solid var(--border);border-radius:12px;background:#081522}.brain-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.brain-card-title{font-size:11px;font-weight:750}.array-item{position:relative;margin-bottom:8px}.array-item textarea{padding-right:42px}.remove-item{position:absolute;top:8px;right:8px;width:26px;height:26px;border:1px solid var(--border);border-radius:8px;background:#0b1728;color:#94a3b8;cursor:pointer}.add-item{width:100%;padding:9px;border:1px dashed var(--border-light);border-radius:10px;background:transparent;color:#94a3b8;cursor:pointer;font-size:10px;font-weight:700}
@media(max-width:1000px){.grid-2,.grid-3,.review-columns{grid-template-columns:1fr}.score-grid{grid-template-columns:1fr 1fr}}@media(max-width:760px){:root{--sidebar-width:0px}.sidebar{display:none}.main{margin-left:0}.topbar{height:58px;padding:0 16px}.page-content{padding:20px 14px 70px}.score-grid{grid-template-columns:1fr}.list-card{align-items:flex-start;flex-direction:column}.list-right{text-align:left}}


/* =============================================================
   INTERVIEW WIZARD · PREMIUM POLISH · PASS 01
   Presentation only. No product logic or application state.
   ============================================================= */
:root {
  --iw-ease-out: cubic-bezier(.22, 1, .36, 1);
  --iw-motion-quick: 180ms;
  --iw-motion-medium: 300ms;
  --iw-focus-ring: rgba(149, 139, 255, .85);
}

/* A consistent keyboard focus that is visible against dark cards. */
:where(a, button, [role="button"], input, textarea, select):focus-visible {
  outline: 2px solid var(--iw-focus-ring);
  outline-offset: 3px;
}
:where(a, button, [role="button"]):focus-visible {
  border-radius: 10px;
}

/* Slightly more legible secondary text: no structural layout changes. */
.panel-subtitle, .stat-sub, .list-meta { font-size: 11px; }
.stat-label { font-size: 10px; }
.topbar-action, .button { font-size: 12px; }

/* Small entrance movement communicates that navigation has completed. */
.page-content {
  animation: iw-content-enter 340ms var(--iw-ease-out) both;
}
@keyframes iw-content-enter {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* No always-moving panels: hover is a deliberate user interaction. */
.nav-link, .topbar-action, .button, .list-card,
.stat-card, .panel-link, .add-item, .logout-button {
  transition:
    background-color var(--iw-motion-quick) ease,
    border-color var(--iw-motion-quick) ease,
    color var(--iw-motion-quick) ease,
    box-shadow var(--iw-motion-medium) var(--iw-ease-out),
    transform var(--iw-motion-medium) var(--iw-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav-link:not(.active):hover { transform: translateX(2px); }
  .topbar-action:hover, .button:hover:not(:disabled) {
    border-color: rgba(139, 126, 255, .60);
    box-shadow: 0 4px 16px rgba(0,0,0,.16);
  }
  .button.primary:hover:not(:disabled) {
    background: var(--primary-hover);
    box-shadow: 0 7px 22px rgba(109,93,252,.22);
  }
  .list-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
  .stat-card:hover { border-color: rgba(103, 113, 157, .42); }
  .panel-link:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* Honor the system accessibility setting and avoid forced smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .page-content { animation: none !important; }
  .nav-link, .topbar-action, .button, .list-card, .stat-card,
  .panel-link, .add-item, .logout-button { transition: none !important; }
  .spinner { animation-duration: 1.8s; }
}
