/* ======================================================================
   DASHBOARD LANDING PARITY
   Final visual ownership for the product shell and home workspace.
   ====================================================================== */

/* One palette for every legacy dashboard component and every new surface. */
:root {
  --dashboard-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --dashboard-font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --dashboard-font-ui: "Inter Tight", Inter, ui-sans-serif, system-ui, sans-serif;
  --dashboard-font-meta: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --bg: #030304;
  --bg-deep: #08080b;
  --bg2: #15151d;
  --surface: rgba(247,242,232,.045);
  --surface-2: rgba(247,242,232,.07);
  --panel: rgba(18,18,25,.9);
  --border: rgba(247,242,232,.12);
  --border-2: rgba(247,242,232,.19);
  --border-gold: rgba(196,181,253,.32);
  --gold: #C4B5FD;
  --gold2: #4338CA;
  --gold3: #FBCFE8;
  --gold4: #4338CA;
  --gold-dim: rgba(196,181,253,.09);
  --text: #f7f2e8;
  --t2: rgba(232,224,210,.76);
  --t3: rgba(232,224,210,.5);
  --t4: rgba(232,224,210,.3);
  --red: #e38b81;
  --green: #C4B5FD;
  --green-400: #C4B5FD;
  --app-success: #C4B5FD;
  --blue: #86aee8;
  --app-background: #030304;
  --app-card: #15151d;
  --app-card-strong: #23232f;
  --app-muted: rgba(232,224,210,.66);
  --app-muted-surface: rgba(247,242,232,.045);
  --app-primary: #C4B5FD;
  --app-primary-foreground: #171208;
  --app-border: rgba(247,242,232,.12);
}

#dashboard {
  --landing-bg: #030304;
  --landing-abyss: #08080b;
  --landing-graphite: #15151d;
  --landing-steel: #23232f;
  --landing-ivory: #f7f2e8;
  --landing-muted: rgba(232,224,210,.66);
  --landing-line: rgba(247,242,232,.12);
  --landing-line-soft: rgba(247,242,232,.075);
  --landing-gold: #C4B5FD;
  --landing-gold-pale: #FBCFE8;
  --h: var(--dashboard-font-ui);
  --b: var(--dashboard-font-body);
  color: var(--landing-ivory);
  font-family: var(--dashboard-font-body);
}

body:has(#dashboard) {
  background:
    radial-gradient(760px 460px at 92% -12%, rgba(196,181,253,.12), transparent 66%),
    radial-gradient(680px 440px at -8% 96%, rgba(35,35,47,.6), transparent 67%),
    #030304;
}
body:has(#dashboard) .a1 { background: rgba(196,181,253,.08); }
body:has(#dashboard) .a2 { background: rgba(35,35,47,.48); }
body:has(#dashboard) #aurora-canvas { display: none; }

/* The rail is not an expanding dock. Geometry is identical at rest, hover,
   focus, and programmatic states so the pointer can never trigger a reflow. */
@media (min-width: 961px) {
  #dashboard .sidebar {
    width: 278px !important;
    min-width: 278px !important;
    max-width: 278px !important;
    flex: 0 0 278px !important;
    transform: none !important;
    transition: background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  }
  #dashboard .content { margin-left: 306px !important; }
}

#dashboard .topbar {
  border: 1px solid var(--landing-line);
  background: linear-gradient(180deg, rgba(35,35,47,.74), rgba(8,8,11,.62));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 22px 60px -38px rgba(0,0,0,.96);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
}

#dashboard .tlogo { gap: 9px; color: var(--landing-ivory); font-size: 14px; font-weight: 500; }
#dashboard .tlogo::before { width: 27px; height: 27px; background: linear-gradient(145deg, var(--landing-gold-pale), var(--landing-gold) 56%, #4338CA); }
#dashboard .applicans-logo-mark,
#login-screen .applicans-logo-mark,
#profile-screen .applicans-logo-mark,
.app-modal .applicans-logo-mark { display: block; flex: none; color: var(--gold-300, #4338CA); }
#dashboard .applicans-logo-mark :is(path, circle),
#login-screen .applicans-logo-mark :is(path, circle),
#profile-screen .applicans-logo-mark :is(path, circle),
.app-modal .applicans-logo-mark :is(path, circle) { fill: currentColor; }
#login-screen .login-logo-mark { width: 38px; height: 38px; filter: drop-shadow(0 8px 16px rgba(196,181,253,.2)); }
#profile-screen .profile-logo-mark { width: 30px; height: 30px; padding: 0; color: var(--gold-300, #4338CA); background: none; border: 0; border-radius: 0; box-shadow: none; }
.app-modal .plan-insignia { width: 38px; height: 38px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
#dashboard .t-plan { color: #171208 !important; border-color: rgba(196,181,253,.32); background: linear-gradient(145deg,#FBCFE8,#C4B5FD); }
#dashboard .t-user { color: var(--landing-muted); }
#dashboard .t-user strong { color: var(--landing-ivory); }
#dashboard .logout-btn { color: var(--landing-muted); border-color: var(--landing-line); background: rgba(255,255,255,.025); }

#dashboard .sidebar {
  border: 1px solid var(--landing-line);
  background: linear-gradient(180deg, rgba(35,35,47,.74), rgba(8,8,11,.76));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.11), 0 28px 70px -42px rgba(0,0,0,.98);
  backdrop-filter: blur(30px) saturate(1.5);
  -webkit-backdrop-filter: blur(30px) saturate(1.5);
}
#dashboard .sidebar-intro { margin: 0 15px 10px; padding: 7px 4px 18px; border-bottom-color: var(--landing-line-soft); }
#dashboard .sidebar-intro span, #dashboard .snav-label { color: rgba(232,224,210,.44); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 9px; font-weight: 500; letter-spacing: .12em; }
#dashboard .sidebar-intro strong { color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-size: 16px; font-weight: 400; letter-spacing: -.02em; }
#dashboard .snav-label { margin: 18px 0 5px; padding-inline: 19px; }
#dashboard .nav-item {
  min-height: 42px;
  margin: 2px 9px;
  width: calc(100% - 18px);
  padding: 9px 11px;
  color: var(--landing-muted);
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  font-size: 13px;
  font-weight: 450;
  transform: none !important;
  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease !important;
}
#dashboard .nav-item:hover { color: var(--landing-ivory); border-color: rgba(247,242,232,.09); background: rgba(255,255,255,.055); }
#dashboard .nav-item.active { color: var(--landing-ivory); border-color: rgba(196,181,253,.2); background: linear-gradient(90deg, rgba(196,181,253,.15), rgba(196,181,253,.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
#dashboard .nav-item.active svg { color: var(--landing-gold-pale); }
#dashboard .sidebar-ai-state { border-color: var(--landing-line); background: rgba(255,255,255,.025); }

#dashboard .content { background: transparent; }
#dashboard .app-head { padding: 18px 2px 24px; margin-bottom: 30px; border-bottom: 1px solid var(--landing-line-soft); }
#dashboard .app-head-meta { font-family: "Roboto Mono", ui-monospace, monospace; }
#dashboard .app-eyebrow, #dashboard .section-kicker { color: var(--landing-gold-pale); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .11em; }
#dashboard .welcome { max-width: 15ch; color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.7rem, 5vw, 4.7rem); font-weight: 400; line-height: .98; letter-spacing: -.05em; }
#dashboard .welcome .g { color: var(--landing-gold-pale); background: none; -webkit-text-fill-color: currentColor; }
#dashboard .wsub { max-width: 55ch; color: var(--landing-muted); font-size: 15px; }
#dashboard .ctrl-btn.primary { color: #171208 !important; border-color: rgba(255,255,255,.25) !important; background: linear-gradient(175deg, var(--landing-gold-pale), var(--landing-gold) 52%, #4338CA) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 12px 30px -16px rgba(196,181,253,.82) !important; }

#dashboard .home-status { overflow: hidden; border: 1px solid var(--landing-line); border-radius: 22px; background: linear-gradient(145deg, rgba(35,35,47,.68), rgba(8,8,11,.62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 54px -38px rgba(0,0,0,.88); }
#dashboard .hs-identity, #dashboard .hs-progress { background: transparent; }
#dashboard .hs-context { color: rgba(232,224,210,.58); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .06em; }
#dashboard .pb-name { color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-size: 20px; font-weight: 400; }
#dashboard .pb-detail { color: var(--landing-muted); }
#dashboard .pb-avatar { background: linear-gradient(145deg, var(--landing-gold-pale), var(--landing-gold)); color: #171208; box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
#dashboard .pb-edit { color: var(--landing-gold-pale); border-color: rgba(196,181,253,.3); background: rgba(196,181,253,.08); }

#dashboard .panel-head { margin-bottom: 18px; }
#dashboard .panel-title { color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.8rem, 3vw, 2.35rem); font-weight: 400; letter-spacing: -.045em; }
#dashboard .panel-meta { color: rgba(232,224,210,.5); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .08em; }
#dashboard .hcard { min-height: 216px; border-color: var(--landing-line); border-radius: 18px; background: linear-gradient(145deg, rgba(35,35,47,.57), rgba(8,8,11,.58)); box-shadow: inset 0 1px 0 rgba(255,255,255,.055); transform: none !important; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease !important; }
#dashboard .hcard:hover { border-color: rgba(196,181,253,.35); background: linear-gradient(145deg, rgba(42,42,56,.72), rgba(13,13,18,.72)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 48px -34px rgba(0,0,0,.9) !important; transform: none !important; }
#dashboard .hcard-title { color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-size: 18px; font-weight: 400; }
#dashboard .hcard-description { color: var(--landing-muted); }
#dashboard .ci { border-color: rgba(196,181,253,.28); background: rgba(196,181,253,.09); }

#dashboard .saved-grid > * { border-color: var(--landing-line); border-radius: 18px; background: linear-gradient(145deg, rgba(35,35,47,.48), rgba(8,8,11,.5)); box-shadow: inset 0 1px 0 rgba(255,255,255,.045); }

/* Shared tool composition: every workspace opens from the same material and
   typographic system as Home instead of falling back to a separate UI theme. */
#dashboard .svc-breadcrumb { color: rgba(232,224,210,.54); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 10px; letter-spacing: .07em; }
#dashboard .svc-hero { overflow: hidden; border: 1px solid var(--landing-line); border-radius: 22px; background: linear-gradient(145deg, rgba(35,35,47,.68), rgba(8,8,11,.62)); box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 22px 54px -40px rgba(0,0,0,.88); }
#dashboard .svc-label { color: var(--landing-gold-pale); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 10px; font-weight: 500; letter-spacing: .12em; }
#dashboard .svc-title { color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: -.05em; }
#dashboard .svc-desc { color: var(--landing-muted); }
#dashboard :is(.concierge-block, .svc-out-shell, .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox) { border-color: var(--landing-line) !important; background: linear-gradient(145deg, rgba(35,35,47,.5), rgba(8,8,11,.53)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045); }
#dashboard :is(.finput, .fselect, .ftextarea, .hero-input, .luxury-textarea, .ap-select-trigger) { color: var(--landing-ivory) !important; border-color: var(--landing-line) !important; background: rgba(3,3,4,.58) !important; }
#dashboard :is(.finput, .fselect, .ftextarea, .hero-input, .luxury-textarea, .ap-select-trigger):focus { border-color: rgba(196,181,253,.48) !important; box-shadow: 0 0 0 3px rgba(196,181,253,.1) !important; }

/* Profile setup and account controls are part of the same landing-derived
   product world instead of looking like a separate dashboard utility. */
#profile-screen {
  min-height: 100svh;
  background:
    radial-gradient(650px 400px at 15% -8%, rgba(196,181,253,.11), transparent 70%),
    radial-gradient(560px 380px at 92% 94%, rgba(35,35,47,.54), transparent 70%),
    #030304;
}
#profile-screen .profile-top { padding-top: 18px; }
#profile-screen .profile-logo { color: var(--gold-300, #4338CA); font-family: "Playfair Display", Georgia, serif; font-size: 22px; font-weight: 400; }
#profile-screen .profile-title { color: #f7f2e8; font-family: "Playfair Display", Georgia, serif; font-weight: 400; }
#profile-screen .profile-card,
#profile-screen .step-panel.active,
#profile-screen .steps-indicator {
  border-color: rgba(247,242,232,.12);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(35,35,47,.62), rgba(8,8,11,.58));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 22px 50px -38px rgba(0,0,0,.9);
}

.app-modal {
  background: rgba(3,3,4,.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.app-modal .app-modal-box {
  border: 1px solid rgba(247,242,232,.14) !important;
  background: linear-gradient(145deg, rgba(35,35,47,.9), rgba(8,8,11,.94)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 32px 90px -45px rgba(0,0,0,.98) !important;
}
.app-modal .app-modal-head {
  border-bottom-color: rgba(247,242,232,.1);
  background: rgba(8,8,11,.7) !important;
}
.app-modal :is(.app-modal-title, .plan-overview-name, .settings-section-title) { color: #f7f2e8; font-family: "Playfair Display", Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
.app-modal :is(.account-summary, .plan-overview, .settings-group) { border-color: rgba(247,242,232,.1) !important; background: rgba(3,3,4,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.045) !important; }

/* Reusable data surfaces keep the visual hierarchy consistent on every tool. */
#dashboard :is(.out-box, .chat-window, .resume-preview, .interview-room, .mc-card, .eval-row, .cost-card, .school-list-section, .essay-history-section, .saved-item) {
  border-color: var(--landing-line) !important;
  background: linear-gradient(145deg, rgba(35,35,47,.5), rgba(8,8,11,.53)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.045);
}
#dashboard :is(
  .panel, .progress-section, .match-card, .mc-card, .sc-card, .an-card,
  .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card,
  .tutor-note-card, .tutor-test-card, .term-box, .qbox, .eval-row,
  .chat-window, .resume-preview, .cost-ticker, .cost-card, .interview-room,
  .interview-placeholder, .settings-group, .plan-current, .plan-feature-card,
  .school-list-section, .essay-history-section, .saved-item, .sl-item,
  .ev-item, .rd-facet, .rd-section, .essay-insight-row, .aid-summary-strip,
  .cost-metric-box, .mc-detail-box, .sc-detail-box, .an-detail-box
) {
  border-color: rgba(247,242,232,.12) !important;
  background: linear-gradient(150deg, rgba(35,35,47,.72), rgba(8,8,11,.9)) !important;
  background-image: linear-gradient(150deg, rgba(35,35,47,.72), rgba(8,8,11,.9)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 20px 48px -38px rgba(0,0,0,.94) !important;
}
#dashboard :is(.svc-out-header, .mc-header, .sc-card-header, .an-card-header, .aid-card-header) { border-bottom-color: var(--landing-line) !important; background: rgba(255,255,255,.018); }
#dashboard :is(.section-kicker, .svc-label, .app-eyebrow, .plan-overview-label, .settings-label) { color: var(--landing-gold-pale) !important; }
#dashboard :is(.sl-title, .mc-school-name, .sc-name, .an-name, .aid-name, .deadline-title, .dl-title, .path-title) { color: var(--landing-ivory); font-family: "Playfair Display", Georgia, serif; font-weight: 400; }

/* Readiness is a page section, not a card.  The individual action, queue,
   and checklist surfaces keep their hierarchy without a large backdrop below
   the whole experience. */
#dashboard .rd-section {
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Typography only: the same three roles used by the landing page give dense
   dashboard information a calmer, more deliberate hierarchy. */
#dashboard :is(.welcome, .panel-title, .svc-title, .hcard-title, .pb-name) {
  font-family: var(--dashboard-font-display);
}
#dashboard .rd-next h3 {
  font-family: var(--dashboard-font-display);
  font-weight: 400;
}
#dashboard :is(.app-eyebrow, .section-kicker, .panel-meta, .app-head-meta, .svc-breadcrumb, .svc-label, .hs-context, .sidebar-intro span, .snav-label, .rd-kicker, .rd-meta, .rd-gates-head) {
  font-family: var(--dashboard-font-meta);
}
#dashboard :is(.nav-item, .ctrl-btn, .svc-cta, .submit-btn, .btn-next, .btn-back, .pb-edit, .mc-action, .ps-submit, .ps-next, .chat-send, .rd-body strong, .rd-summary-copy strong) {
  font-family: var(--dashboard-font-ui);
}

/* Tool layouts keep their own internal hierarchy.  Only named outer data
   surfaces above receive the shared material treatment; broad substring
   selectors here would also restyle controls and layout primitives. */
#dashboard .tab-panel { color: var(--landing-ivory); background: transparent; }
#dashboard :is(.content, .sidebar, .chat-messages, .chat-window, .resume-preview, .interview-room, .svc-out-shell) {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

html:has(#dashboard.has-momentum-scroll) {
  scroll-behavior: auto;
}

/* Reference direction: quiet black canvas, a permanent icon rail, soft
   charcoal modules, and one warm-gold accent language. */
body:has(#dashboard) {
  background: #080808;
}
#dashboard :is(.welcome, .panel-title, .svc-title, .hcard-title, .pb-name) {
  font-family: var(--dashboard-font-ui);
  font-weight: 600;
  letter-spacing: -.045em;
}
#dashboard :is(.home-status, .hcard, .school-list-section, .rd-facet, .rd-next, .rd-queue button, .rd-gates, .svc-hero) {
  border-color: #292929 !important;
  background: #171717 !important;
  background-image: none !important;
  box-shadow: none !important;
}
#dashboard :is(
  .concierge-block, .svc-out-shell, .match-card, .sc-card, .an-card,
  .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card,
  .tutor-note-card, .tutor-test-card, .term-box, .qbox, .out-box,
  .chat-window, .resume-preview, .interview-room, .mc-card, .eval-row,
  .cost-card, .essay-history-section, .saved-item, .progress-section,
  .cost-ticker, .interview-placeholder, .settings-group, .plan-current,
  .plan-feature-card, .sl-item, .ev-item, .essay-insight-row,
  .aid-summary-strip, .cost-metric-box, .mc-detail-box, .sc-detail-box,
  .an-detail-box
) {
  border-color: #292929 !important;
  background: #171717 !important;
  background-image: none !important;
  box-shadow: none !important;
}
#dashboard :is(.home-status, .svc-hero) { border-radius: 30px; }
#dashboard :is(.hcard, .school-list-section, .rd-facet, .rd-next, .rd-queue button, .rd-gates) { border-radius: 24px; }
#dashboard .hcard:hover {
  border-color: rgba(196,181,253,.48) !important;
  background: #1b1b1b !important;
  box-shadow: 0 14px 32px -26px rgba(0,0,0,.94) !important;
}
#dashboard :is(.t-plan, .app-head-signal, .hs-context strong, .rd-gates li[data-met="true"] .rd-mark, .rd-ladder li[data-state="passed"] i, .rd-ladder li[data-state="current"] i) {
  color: #FBCFE8;
}
#dashboard :is(.rd-gates li[data-met="true"] .rd-mark, .rd-ladder li[data-state="passed"] i, .rd-ladder li[data-state="current"] i) {
  background: #C4B5FD;
}
#dashboard :is(.sl-status-btn.active-green, .aid-stat-val.green) {
  color: #4338CA;
  border-color: rgba(196,181,253,.38);
  background-color: rgba(196,181,253,.1);
}

@media (min-width: 961px) {
  #dashboard .topbar {
    top: 22px;
    left: 128px;
    right: 34px;
    width: auto;
    height: 56px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  #dashboard .topbar-left { display: none; }
  #dashboard .topbar-right { margin-left: auto; gap: 10px; }
  #dashboard .t-user { color: rgba(247,242,232,.58); font-size: 13px; }
  #dashboard .t-plan,
  #dashboard .logout-btn {
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #2d2d2d;
    border-radius: 999px;
    background: #171717;
    box-shadow: none;
    font-family: var(--dashboard-font-ui);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
  }
  #dashboard .t-plan { color: #171208; border-color: rgba(255,255,255,.28); background: linear-gradient(145deg,#FBCFE8,#C4B5FD); }

  #dashboard .sidebar {
    top: 18px;
    bottom: 18px;
    left: 18px;
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    height: auto;
    padding: 70px 10px 12px;
    border: 1px solid #2a2a2a;
    border-radius: 34px;
    background: #171717;
    box-shadow: none;
    overflow: hidden;
  }
  #dashboard .sidebar::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 50%;
    width: 34px;
    height: 34px;
    translate: -50% 0;
    background: #FBCFE8;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 10L44 44H38L34.5 35H21.5L18 44H12L28 10Z M23.5 31H32.5L28 21Z'/%3E%3Ccircle cx='28' cy='7' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56'%3E%3Cpath d='M28 10L44 44H38L34.5 35H21.5L18 44H12L28 10Z M23.5 31H32.5L28 21Z'/%3E%3Ccircle cx='28' cy='7' r='2.4'/%3E%3C/svg%3E") center/contain no-repeat;
  }
  #dashboard :is(.sidebar-intro, .snav-label, .sidebar-ai-state) { display: none; }
  #dashboard .sidebar-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid #292929; }
  #dashboard .nav-item {
    display: grid;
    place-items: center;
    width: 50px;
    min-height: 50px;
    margin: 4px auto;
    padding: 0;
    color: transparent;
    border-radius: 17px;
    font-size: 0;
    background: transparent !important;
    isolation: isolate;
  }
  #dashboard .nav-item::after {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: background-color 150ms ease, border-color 150ms ease;
  }
  #dashboard .nav-item svg { position: relative; z-index: 1; width: 21px; height: 21px; color: rgba(247,242,232,.52); }
  #dashboard .nav-item:hover { border-color: transparent; }
  #dashboard .nav-item:hover::after { border-color: #303030; background: #202020; }
  #dashboard .nav-item:hover svg { color: #f7f2e8; }
  #dashboard .nav-item.active { border-color: transparent; }
  #dashboard .nav-item.active::after { border-color: rgba(196,181,253,.3); background: rgba(196,181,253,.13); }
  #dashboard .nav-item.active svg { color: #FBCFE8; }

  #dashboard .content {
    max-width: 1560px;
    margin-left: 112px !important;
    padding: 122px 34px 72px;
  }
  #dashboard .app-head { margin-bottom: 42px; padding: 0 8px; border: 0; }
  #dashboard .welcome { font-size: clamp(2.5rem,4vw,4rem); line-height: 1; }
  #dashboard .wsub { margin-top: 10px; font-size: 16px; }
  #dashboard .app-head-actions .ctrl-btn { min-height: 44px; border-radius: 999px; }
  #dashboard .home-status { margin-bottom: 44px; }
  #dashboard .hgrid { gap: 16px; }
  #dashboard .hcard { min-height: 188px; padding: 22px; }
  #dashboard .saved-grid { gap: 16px; margin-top: 44px; }
}

/* Motion follows the Apple pattern: a short ease-out entrance, material
   feedback on hover, and immediate tactile response on press. No animation
   changes sidebar geometry. */
@media (prefers-reduced-motion: no-preference) {
  #dashboard .topbar { animation: dashboard-float-in 560ms cubic-bezier(.22,1,.36,1) both; }
  #dashboard .sidebar { animation: dashboard-float-in 620ms 55ms cubic-bezier(.22,1,.36,1) both; }
  #dashboard .tab-panel.is-entering { animation: dashboard-content-in 380ms cubic-bezier(.22,1,.36,1) both; }
  #dashboard .tab-panel.is-entering .hcard,
  #dashboard .tab-panel.is-entering .saved-grid > *,
  #dashboard .tab-panel.is-entering :is(.concierge-block, .svc-out-shell, .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox) {
    animation: dashboard-card-in 500ms cubic-bezier(.22,1,.36,1) both;
  }
  #dashboard .tab-panel.is-entering .hcard:nth-child(2),
  #dashboard .tab-panel.is-entering .saved-grid > :nth-child(2) { animation-delay: 45ms; }
  #dashboard .tab-panel.is-entering .hcard:nth-child(3),
  #dashboard .tab-panel.is-entering .saved-grid > :nth-child(3) { animation-delay: 90ms; }
  #dashboard .tab-panel.is-entering .hcard:nth-child(4) { animation-delay: 135ms; }
  #dashboard .tab-panel.is-entering .hcard:nth-child(n+5) { animation-delay: 170ms; }

  #dashboard .nav-item,
  #dashboard :is(.ctrl-btn, .pb-edit, .logout-btn, .t-plan, .svc-back-btn, .opt-pill, .subject-btn, .tag, .hcard, .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox) {
    transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
  }
  #dashboard :is(.ctrl-btn, .pb-edit, .logout-btn, .t-plan, .svc-back-btn, .opt-pill, .subject-btn, .tag):not(:disabled):hover { transform: translateY(-1px); }
  #dashboard :is(.ctrl-btn, .pb-edit, .logout-btn, .t-plan, .svc-back-btn, .opt-pill, .subject-btn, .tag, .nav-item, .hcard, .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox):active { transform: scale(.985) !important; transition-duration: 80ms !important; }
  #dashboard .nav-item:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
  #dashboard :is(.hcard, .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox):hover { border-color: rgba(196,181,253,.34) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 42px -34px rgba(0,0,0,.94) !important; }
}

@keyframes dashboard-float-in {
  from { opacity: 0; transform: translateY(10px); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes dashboard-content-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dashboard-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #dashboard *, #dashboard *::before, #dashboard *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 960px) {
  #dashboard .topbar { border-radius: 18px; }
  #dashboard .sidebar { width: min(310px, calc(100vw - 20px)); min-width: 0; max-width: none; transition: transform 280ms cubic-bezier(.32,.72,0,1) !important; }
  #dashboard .app-head { padding-top: 8px; }
}

@media (max-width: 680px) {
  #dashboard .welcome { font-size: clamp(2.45rem, 12vw, 3.45rem); }
  #dashboard .app-head { gap: 18px; }
  #dashboard .hcard { min-height: 130px; }
}

/* Final dashboard surface audit. These named card types cover every tool's
   remaining result, form, and study surface with the same graphite material. */
#dashboard :is(
  .aid-stat-box, .an-suggestion-card, .calc-shell, .cost-appeal-box,
  .cost-result-card, .cost-section, .cost-tip-box, .dl-status-card,
  .essay-card, .essay-college-section, .essay-red-flags-section,
  .essay-score-shell, .essay-section, .explanation-box, .note-card,
  .note-section, .priority-item, .ps-card, .ps-question-card, .ps-score-box,
  .question-card, .resume-preview-shell, .resume-section, .resume-tmpl-card,
  .saved-calc-item, .slider-item, .step-panel, .svc-section,
  .tutor-info-card, .tutor-input-card, .tutor-sel-card, .tutor-test-card
) {
  border-color: #292929 !important;
  background: #171717 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Gold replaces legacy blue/green tool states. Red stays reserved for errors
   and destructive actions, preserving a clear status hierarchy. */
#dashboard {
  --blue: #C4B5FD;
  --green: #C4B5FD;
  --green-400: #C4B5FD;
  --app-success: #C4B5FD;
  --tool-focus: rgba(247,242,232,.08);
  --app-ring: rgba(247,242,232,.55);
  --color-border-focus: rgba(247,242,232,.55);
}
#dashboard :is(.finput, .fselect, .ftextarea, .hero-input, .luxury-textarea, .ap-select-trigger, .tutor-modal-input, .chat-input) {
  border-color: #303030 !important;
  background: #101010 !important;
}

/* Apple-style material response: every dashboard control and named card gets
   one restrained, interruption-safe transition and tactile press feedback. */
@media (prefers-reduced-motion: no-preference) {
  #dashboard :is(button, [role="button"], input, textarea, select) {
    transition-timing-function: cubic-bezier(.2,.8,.2,1) !important;
    transition-duration: 180ms !important;
  }
  #dashboard :is(
    .home-status, .hcard, .school-list-section, .rd-facet, .rd-next,
    .rd-queue button, .rd-gates, .svc-hero, .concierge-block, .svc-out-shell,
    .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item,
    .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card,
    .term-box, .qbox, .out-box, .chat-window, .resume-preview,
    .interview-room, .mc-card, .eval-row, .cost-card, .essay-history-section,
    .saved-item, .progress-section, .cost-ticker, .interview-placeholder,
    .sl-item, .ev-item, .essay-insight-row, .aid-summary-strip,
    .cost-metric-box, .mc-detail-box, .sc-detail-box, .an-detail-box,
    .aid-stat-box, .an-suggestion-card, .calc-shell, .cost-appeal-box,
    .cost-result-card, .cost-section, .cost-tip-box, .dl-status-card,
    .essay-card, .essay-college-section, .essay-red-flags-section,
    .essay-score-shell, .essay-section, .explanation-box, .note-card,
    .note-section, .priority-item, .ps-card, .ps-question-card, .ps-score-box,
    .question-card, .resume-preview-shell, .resume-section, .resume-tmpl-card,
    .saved-calc-item, .slider-item, .step-panel, .svc-section,
    .tutor-info-card, .tutor-input-card, .tutor-sel-card
  ) {
    transition: transform 220ms cubic-bezier(.2,.8,.2,1), border-color 220ms ease,
      background-color 220ms ease, box-shadow 220ms ease !important;
  }
  #dashboard .tab-panel.is-entering :is(
    .aid-stat-box, .an-suggestion-card, .calc-shell, .cost-appeal-box,
    .cost-result-card, .cost-section, .cost-tip-box, .dl-status-card,
    .essay-card, .essay-college-section, .essay-red-flags-section,
    .essay-score-shell, .essay-section, .explanation-box, .note-card,
    .note-section, .priority-item, .ps-card, .ps-question-card, .ps-score-box,
    .question-card, .resume-preview-shell, .resume-section, .resume-tmpl-card,
    .saved-calc-item, .slider-item, .step-panel, .svc-section,
    .tutor-info-card, .tutor-input-card, .tutor-sel-card
  ) { animation: dashboard-card-in 420ms cubic-bezier(.22,1,.36,1) both; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #dashboard :is(
    .hcard, .match-card, .sc-card, .an-card, .aid-card, .school-card,
    .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card,
    .tutor-test-card, .term-box, .qbox, .mc-card, .eval-row, .cost-card,
    .essay-history-section, .saved-item, .aid-stat-box, .an-suggestion-card,
    .cost-result-card, .cost-tip-box, .dl-status-card, .essay-card,
    .essay-college-section, .explanation-box, .note-card, .priority-item,
    .ps-card, .ps-question-card, .question-card, .resume-tmpl-card,
    .saved-calc-item, .tutor-info-card, .tutor-sel-card
  ):hover {
    transform: translateY(-2px) !important;
    border-color: #3b3b3b !important;
    box-shadow: 0 18px 34px -28px rgba(0,0,0,.94) !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  #dashboard :is(button, [role="button"], .hcard, .match-card, .sc-card, .an-card, .aid-card, .school-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox, .mc-card, .eval-row, .cost-card, .essay-history-section, .saved-item):active {
    transition-duration: 80ms !important;
  }
}

/* Focus is visually inert for pointer use. The component's own chosen state
   remains the only feedback; keyboard users retain a neutral focus outline. */
#dashboard .tab-panel :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select, .ap-select-trigger, .chat-input-wrap, .dl-select-field,
  .concierge-block, .hero-input-wrap
):is(:focus, :focus-visible, :focus-within),
#dashboard .tab-panel .ap-select-trigger.open {
  outline: none !important;
  border-color: #303030 !important;
  background: #101010 !important;
  box-shadow: none !important;
}
#dashboard .tab-panel :is(.match-card, .sc-card, .an-card, .aid-card):focus-within,
#dashboard .tab-panel .concierge-block:focus-within {
  border-color: #292929 !important;
  background: #171717 !important;
  box-shadow: none !important;
}
#dashboard .tab-panel :is(.fg, .field-group):focus-within :is(.flabel, .field-label) {
  color: var(--t3) !important;
}
#dashboard .tab-panel :is(.chat-input-wrap, .hero-input-wrap),
#dashboard .tab-panel :is(.chat-input-wrap, .hero-input-wrap):focus-within {
  background: transparent !important;
  box-shadow: none !important;
}
#dashboard .tab-panel :is(.dl-select-field, .concierge-block),
#dashboard .tab-panel :is(.dl-select-field, .concierge-block):focus-within {
  border-color: #292929 !important;
  background: #171717 !important;
  box-shadow: none !important;
}
#dashboard :is(button, [role="button"], [role="radio"], [role="checkbox"], [role="switch"], input, textarea, select):focus-visible {
  outline: 2px solid rgba(247,242,232,.55) !important;
  outline-offset: 3px;
}

/* Match and interview priority sliders are direct manipulators, not cards:
   clicking a rating only moves its dot—there is no glow, lift, or state wash. */
#dashboard .priority-item,
#dashboard .priority-item:hover,
#dashboard .priority-item:focus-within {
  border-color: #292929 !important;
  background: #171717 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}
#dashboard .tab-panel .luxury-slider,
#dashboard .tab-panel .luxury-slider:hover,
#dashboard .tab-panel .luxury-slider:focus,
#dashboard .tab-panel .luxury-slider:focus-visible {
  accent-color: #C4B5FD;
  outline: none !important;
  box-shadow: none !important;
}
#dashboard .tab-panel .luxury-slider::-webkit-slider-thumb,
#dashboard .tab-panel .luxury-slider:hover::-webkit-slider-thumb,
#dashboard .tab-panel .luxury-slider:active::-webkit-slider-thumb {
  background: #C4B5FD;
  border: 2px solid #171717;
  box-shadow: none !important;
  transform: none !important;
}
#dashboard .tab-panel .luxury-slider::-moz-range-thumb {
  background: #C4B5FD;
  border: 2px solid #171717;
  box-shadow: none !important;
  transform: none !important;
}

/* The saved workspace modules are one equal row on desktop, rather than a
   three-plus-one wrap. Their shared height keeps the section calm and tidy. */
@media (min-width: 1161px) {
  #dashboard .saved-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
  }
  #dashboard .saved-grid > .school-list-section {
    min-height: 164px;
    height: 100%;
    margin: 0 !important;
    padding: 18px;
  }
  #dashboard .saved-grid > :last-child { grid-column: auto; }
}

/* Profile selects use the same graphite field material as the dashboard.
   Native menus opt into the dark color scheme so their options never flash a
   mismatched light or blue system surface. */
#profile-screen .fselect {
  color: #f7f2e8 !important;
  border-color: #303030 !important;
  background-color: #101010 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d9b762' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right .9rem center !important;
  background-size: 14px !important;
  color-scheme: dark;
  transition: border-color 180ms cubic-bezier(.2,.8,.2,1), background-color 180ms cubic-bezier(.2,.8,.2,1), transform 120ms cubic-bezier(.2,.8,.2,1) !important;
}
#profile-screen .fselect:hover {
  border-color: #424242 !important;
  background-color: #151515 !important;
}
#profile-screen .fselect:focus {
  border-color: rgba(247,242,232,.5) !important;
  background-color: #101010 !important;
  box-shadow: none !important;
}
#profile-screen .fselect:active { transform: scale(.99); }
#profile-screen .fselect option,
#profile-screen .fselect optgroup {
  color: #f7f2e8;
  background: #171717;
}