/*
  Dashboard refinement layer
  Keeps the original dark-and-gold visual system intact while making the
  individual tools feel like one considered product.
*/

:root {
  --tool-field-bg: linear-gradient(145deg, rgba(22, 31, 48, .92), rgba(7, 14, 27, .9));
  --tool-field-hover: linear-gradient(145deg, rgba(30, 40, 58, .96), rgba(9, 17, 31, .94));
  --tool-field-border: rgba(196, 181, 253, .17);
  --tool-field-highlight: rgba(255, 255, 255, .075);
  --tool-focus: rgba(67, 56, 202, .18);
}

/* Sign-in carries the same considered material system as the dashboard tools. */
#login-screen {
  min-height: 100svh;
  padding: 2rem;
  background:
    radial-gradient(circle at 50% 12%, rgba(67, 56, 202, .12), transparent 28rem),
    radial-gradient(circle at 6% 88%, rgba(44, 68, 107, .2), transparent 32rem),
    linear-gradient(145deg, #080f1c, #0c1728 58%, #090f1b);
}

#login-screen::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(196, 181, 253, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(196, 181, 253, .025) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at 50% 45%, black, transparent 72%);
}

.login-box {
  position: relative;
  z-index: 1;
  width: min(440px, 100%);
  padding: 2.15rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(67, 56, 202, .15), transparent 13rem),
    linear-gradient(145deg, rgba(25, 34, 50, .96), rgba(8, 15, 28, .97));
  border: 1px solid rgba(196, 181, 253, .22);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -1px 0 rgba(0, 0, 0, .32), 0 32px 90px rgba(0, 0, 0, .48), 0 0 56px rgba(67, 56, 202, .06);
}

.login-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 1.75rem;
  left: 1.75rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold3), transparent);
  opacity: .7;
}

.login-brand-lockup {
  display: flex;
  align-items: center;
  gap: .72rem;
  margin-bottom: 1.65rem;
}

.login-monogram {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: #101827;
  background: linear-gradient(145deg, var(--gold3), var(--gold));
  border: 1px solid rgba(196, 181, 253, .75);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 7px 18px rgba(0, 0, 0, .25);
  font-family: var(--h);
  font-size: 1.05rem;
  font-weight: 750;
}

.login-logo {
  margin: 0;
  color: var(--gold3);
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -.035em;
}

.login-kicker {
  margin-top: .1rem;
  color: rgba(240, 235, 224, .58);
  font-family: var(--h);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.login-sub {
  width: fit-content;
  margin: 0 0 .75rem;
  padding: .28rem .52rem;
  color: var(--gold2);
  background: rgba(67, 56, 202, .085);
  border: 1px solid rgba(67, 56, 202, .18);
  border-radius: 999px;
  font-size: .75rem;
  letter-spacing: .12em;
}

.login-title {
  margin: 0;
  color: var(--text);
  font-family: var(--h);
  font-size: clamp(1.75rem, 4vw, 2.15rem);
  font-weight: 650;
  letter-spacing: -.055em;
  line-height: 1;
}

.login-intro {
  max-width: 31ch;
  margin: .7rem 0 1.55rem;
  color: var(--t2);
  font-size: .84rem;
  line-height: 1.65;
}

.login-box form {
  display: grid;
  gap: .5rem;
}

.login-box .llabel {
  margin-top: .55rem;
  color: rgba(240, 235, 224, .78);
  font-family: var(--h);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.login-box .linput {
  min-height: 48px;
  padding: .78rem .9rem;
  color: var(--text);
  background: linear-gradient(145deg, rgba(5, 13, 26, .9), rgba(15, 24, 39, .86));
  border: 1px solid rgba(196, 181, 253, .17);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), inset 0 -1px 0 rgba(0, 0, 0, .28);
}

.login-box .linput:hover {
  border-color: rgba(67, 56, 202, .4);
  background: linear-gradient(145deg, rgba(8, 16, 29, .95), rgba(18, 28, 43, .92));
}

.login-box .linput:focus {
  border-color: var(--gold2);
  background: linear-gradient(145deg, rgba(14, 20, 31, .98), rgba(23, 30, 42, .96));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 0 0 3px rgba(67, 56, 202, .16), 0 12px 26px rgba(0, 0, 0, .2);
}

.login-box .linput::placeholder { color: rgba(240, 235, 224, .33); }

.login-pw-toggle {
  right: .48rem;
  top: .48rem;
  min-height: 32px;
  color: var(--gold2);
  background: rgba(67, 56, 202, .08);
  border: 1px solid rgba(67, 56, 202, .15);
  border-radius: 7px;
}

.login-pw-toggle:hover,
.login-pw-toggle:focus-visible {
  color: var(--gold3);
  background: rgba(67, 56, 202, .16);
  border-color: rgba(67, 56, 202, .42);
  outline: 0;
}

.login-btn {
  position: relative;
  min-height: 49px;
  margin-top: .8rem;
  overflow: hidden;
  color: #101827;
  background: linear-gradient(135deg, #94702e, var(--gold), var(--gold3));
  border: 1px solid rgba(196, 181, 253, .85);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 26px rgba(67, 56, 202, .23);
}

.login-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 24%, rgba(255, 255, 255, .38) 50%, transparent 72%);
  transform: translateX(-115%);
  transition: transform .55s var(--ease);
}

.login-btn:not(:disabled):hover::before { transform: translateX(115%); }
.login-btn:not(:disabled):hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 18px 32px rgba(67, 56, 202, .32); }
.login-btn:focus-visible { outline: 2px solid var(--gold3); outline-offset: 3px; }

.login-err {
  min-height: 1.25rem;
  margin: .45rem 0 0;
  padding: 0 .2rem;
  color: #ffaaa3;
  font-size: .75rem;
  line-height: 1.45;
}

.login-foot {
  gap: .58rem;
  margin-top: 1.35rem;
  padding-top: 1.1rem;
  border-top-color: rgba(196, 181, 253, .12);
}

.login-foot a {
  color: var(--gold2);
  text-decoration: none;
  text-underline-offset: .2em;
}

.login-foot a:hover { color: var(--gold3); text-decoration: underline; }

.login-security {
  margin-top: 1.2rem;
  color: rgba(240, 235, 224, .58);
  font-family: var(--h);
  font-size: .75rem;
  font-weight: 650;
  letter-spacing: .13em;
  text-align: center;
  text-transform: uppercase;
}

.login-security::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 .45rem .08rem 0;
  background: var(--gold);
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(67, 56, 202, .65);
}

.tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger) {
  max-width: 100%;
  min-height: 44px;
  color: var(--text);
  background: var(--tool-field-bg);
  border: 1px solid var(--tool-field-border);
  border-radius: 11px;
  caret-color: var(--gold2);
  box-shadow: inset 0 1px 0 var(--tool-field-highlight), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 8px 20px rgba(0, 0, 0, .1);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}

.tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select)::placeholder {
  color: var(--t3);
  font-style: normal;
  opacity: .78;
}

.tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger):hover {
  background: var(--tool-field-hover);
  border-color: rgba(67, 56, 202, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 12px 28px rgba(0, 0, 0, .16);
}

.tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus,
.tab-panel .ap-select-trigger:focus-visible,
.tab-panel .ap-select-trigger.open {
  outline: 0;
  background: linear-gradient(145deg, rgba(40, 42, 51, .96), rgba(17, 22, 33, .96));
  border-color: var(--gold2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 3px var(--tool-focus), 0 16px 34px rgba(0, 0, 0, .24), 0 0 28px rgba(67, 56, 202, .08);
}

.tab-panel textarea {
  min-height: 120px;
  padding: 1rem 1.05rem;
  line-height: 1.6;
  resize: vertical;
}

/* Larger prompts retain their editorial feel, with the same material quality. */
.tab-panel .hero-input {
  min-height: 58px;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--tool-field-border);
  border-radius: 11px;
  font-size: clamp(1rem, 1.8vw, 1.15rem);
}

.tab-panel .luxury-textarea {
  min-height: 150px;
  padding: 1.1rem 1.15rem;
  border-left: 1px solid var(--tool-field-border);
  border-radius: 11px;
  font-weight: 400;
  line-height: 1.75;
}

.tab-panel :is(.finput, .fselect, .dl-select) {
  padding: .78rem 1rem;
  font-size: .88rem;
  line-height: 1.35;
}

.tab-panel .dl-select {
  padding-right: 2.6rem;
  background-image: var(--tool-field-bg), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e4c97a' stroke-opacity='.72' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: center, right .95rem center;
  background-repeat: no-repeat;
  background-size: auto, 14px;
}

.tab-panel .dl-select:hover {
  background-image: var(--tool-field-hover), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d99a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: center, right .95rem center;
  background-repeat: no-repeat;
  background-size: auto, 14px;
}

.tab-panel .dl-select:focus {
  background-image: linear-gradient(145deg, rgba(40, 42, 51, .96), rgba(17, 22, 33, .96)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f0d99a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-position: center, right .95rem center;
  background-repeat: no-repeat;
  background-size: auto, 14px;
}

.tab-panel input[type="date"] {
  color-scheme: dark;
}

.tab-panel input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: sepia(.45) saturate(1.1);
}

/* Native and upgraded select menus should read as the same control. */
.tab-panel .ap-select-wrap { z-index: 2; }
.tab-panel .ap-select-trigger {
  width: 100%;
  padding: .78rem 1rem;
  font-family: var(--b);
  font-size: .86rem;
  text-align: left;
}

.tab-panel .ap-select-dropdown {
  margin-top: .4rem;
  padding: .35rem;
  background: #0b1525;
  border: 1px solid rgba(67, 56, 202, .32);
  border-radius: 10px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .42);
}

.tab-panel .ap-select-option {
  min-height: 40px;
  border-radius: 7px;
  color: var(--t2);
}

.tab-panel .ap-select-option:hover,
.tab-panel .ap-select-option.selected {
  color: var(--text);
  background: rgba(67, 56, 202, .12);
}

.tab-panel .fg,
.tab-panel .field-group {
  min-width: 0;
}

.tab-panel :is(.fg, .field-group):focus-within .flabel,
.tab-panel :is(.fg, .field-group):focus-within .field-label {
  color: var(--gold2);
}

.tab-panel .flabel,
.tab-panel .field-label {
  margin-bottom: .45rem;
  color: rgba(240, 235, 224, .73);
  font-size: .66rem;
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .2s ease;
}

/* The chat composer is intentionally one composed surface, not a box inside a box. */
.tab-panel .chat-input-wrap {
  padding: .68rem .75rem .68rem 1rem;
  background: var(--tool-field-bg);
  border: 1px solid var(--tool-field-border);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 var(--tool-field-highlight), inset 0 -1px 0 rgba(0, 0, 0, .2), 0 8px 20px rgba(0, 0, 0, .1);
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.tab-panel .chat-input-wrap:focus-within {
  background: linear-gradient(145deg, rgba(40, 42, 51, .96), rgba(17, 22, 33, .96));
  border-color: var(--gold2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 0 3px var(--tool-focus), 0 16px 34px rgba(0, 0, 0, .24);
}

.tab-panel .chat-input {
  min-height: 26px;
  padding: .25rem 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tab-panel .chat-input:hover,
.tab-panel .chat-input:focus {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.tab-panel .luxury-slider {
  width: 100%;
  height: 5px;
  accent-color: var(--gold);
  cursor: pointer;
}

.tab-panel .luxury-slider:focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 5px;
}

.tab-panel .luxury-slider::-webkit-slider-thumb {
  width: 17px;
  height: 17px;
  background: var(--gold2);
  border: 3px solid #182136;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(67, 56, 202, .22), 0 4px 10px rgba(0, 0, 0, .35);
}

.tab-panel .luxury-slider::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--gold2);
  border: 3px solid #182136;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(67, 56, 202, .22), 0 4px 10px rgba(0, 0, 0, .35);
}

/* Concierge prompts are the repeated form pattern used by every AI tool. */
.tab-panel .concierge-block {
  position: relative;
  isolation: isolate;
  overflow: visible;
  margin-bottom: 1.15rem;
  padding: 1.05rem 1.1rem 1.1rem 1.25rem;
  background:
    radial-gradient(circle at 0 0, rgba(67, 56, 202, .085), transparent 34%),
    linear-gradient(135deg, rgba(25, 32, 46, .78), rgba(10, 17, 30, .82));
  border: 1px solid rgba(196, 181, 253, .13);
  border-radius: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 30px rgba(0, 0, 0, .12);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.tab-panel .concierge-block::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 1rem;
  bottom: 1rem;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold2) 18%, var(--gold) 82%, transparent);
  opacity: .6;
}

.tab-panel .concierge-block:focus-within {
  background:
    radial-gradient(circle at 0 0, rgba(67, 56, 202, .12), transparent 36%),
    linear-gradient(135deg, rgba(30, 36, 48, .9), rgba(12, 18, 30, .92));
  border-color: rgba(67, 56, 202, .43);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(67, 56, 202, .08), 0 18px 42px rgba(0, 0, 0, .2);
}

.tab-panel .concierge-q {
  align-items: center;
  gap: .58rem;
  margin-bottom: .75rem;
  font-size: .91rem;
  font-weight: 650;
  letter-spacing: -.018em;
}

.tab-panel .concierge-q .q-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.65rem;
  height: 1.2rem;
  padding: 0 .36rem;
  color: var(--gold2);
  background: rgba(67, 56, 202, .09);
  border: 1px solid rgba(67, 56, 202, .18);
  border-radius: 999px;
  font-size: .56rem;
  letter-spacing: .08em;
}

.tab-panel .hero-input-wrap {
  position: relative;
}

.tab-panel .hero-input-wrap::after {
  content: '';
  position: absolute;
  right: 1rem;
  bottom: 0;
  left: 1rem;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(67, 56, 202, .5), transparent);
  opacity: .58;
  transition: opacity .2s ease;
}

.tab-panel .hero-input-wrap:focus-within::after { opacity: 1; }

.tab-panel .hero-input {
  background:
    linear-gradient(90deg, rgba(67, 56, 202, .06), transparent 24%),
    linear-gradient(145deg, rgba(8, 15, 27, .96), rgba(14, 23, 38, .92));
  border-color: rgba(196, 181, 253, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), inset 0 -1px 0 rgba(0, 0, 0, .34), 0 10px 22px rgba(0, 0, 0, .17);
}

.tab-panel .hero-input:hover {
  background:
    linear-gradient(90deg, rgba(67, 56, 202, .1), transparent 28%),
    linear-gradient(145deg, rgba(12, 20, 33, .98), rgba(18, 28, 43, .94));
}

.tab-panel .hero-input:focus {
  background:
    linear-gradient(90deg, rgba(67, 56, 202, .14), transparent 30%),
    linear-gradient(145deg, rgba(15, 22, 34, .98), rgba(23, 30, 43, .96));
  border-color: var(--gold2);
}

.tab-panel .hero-input-hint {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  margin-top: .55rem;
  padding: .18rem .5rem;
  color: rgba(240, 235, 224, .46);
  background: rgba(255, 255, 255, .028);
  border-radius: 5px;
  font-size: .67rem;
  letter-spacing: .02em;
}

.tab-panel .luxury-textarea {
  background:
    linear-gradient(90deg, rgba(67, 56, 202, .065), transparent 18%),
    linear-gradient(145deg, rgba(8, 15, 27, .96), rgba(14, 23, 38, .92));
  border-color: rgba(196, 181, 253, .22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .065), inset 0 -1px 0 rgba(0, 0, 0, .34), 0 10px 22px rgba(0, 0, 0, .17);
}

.tab-panel .option-row { gap: .5rem; }

.tab-panel .opt-pill {
  min-height: 36px;
  padding: .48rem .7rem;
  border-color: rgba(196, 181, 253, .14);
  background: rgba(5, 13, 26, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.tab-panel .opt-pill:hover {
  border-color: rgba(67, 56, 202, .38);
  color: var(--text);
  background: rgba(67, 56, 202, .075);
}

.tab-panel .opt-pill.active {
  color: var(--gold3);
  background: linear-gradient(135deg, rgba(67, 56, 202, .2), rgba(67, 56, 202, .07));
  border-color: rgba(67, 56, 202, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .12);
}

/* Remaining tool forms use the same composed material, without changing their layout. */
.tab-panel :is(.tutor-input-card, .resume-section, .dl-select-field) {
  background:
    radial-gradient(circle at 0 0, rgba(67, 56, 202, .06), transparent 34%),
    linear-gradient(145deg, rgba(23, 30, 44, .74), rgba(9, 16, 29, .76));
  border: 1px solid rgba(196, 181, 253, .13);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 12px 28px rgba(0, 0, 0, .12);
}

.tab-panel .dl-select-field {
  padding: .9rem;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.tab-panel .dl-select-field:focus-within {
  border-color: rgba(67, 56, 202, .42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(67, 56, 202, .08), 0 14px 30px rgba(0, 0, 0, .16);
}

.tab-panel .dl-select-label {
  margin-bottom: .55rem;
  color: var(--gold2);
  font-weight: 700;
}

.tab-panel .tutor-input-card {
  border-radius: 15px;
}

.tab-panel .tutor-input-card::before {
  right: 1.25rem;
  left: 1.25rem;
  background: linear-gradient(90deg, transparent, rgba(67, 56, 202, .55), transparent);
}

.tab-panel .resume-section {
  padding: 1.25rem;
  margin-bottom: .9rem;
}

.tab-panel .resume-section-title {
  padding-bottom: .72rem;
  border-bottom: 1px solid rgba(196, 181, 253, .1);
  color: var(--gold3);
}

.tab-panel .exp-entry {
  background: linear-gradient(145deg, rgba(5, 13, 26, .54), rgba(16, 24, 38, .58)) !important;
  border-color: rgba(196, 181, 253, .14) !important;
  border-radius: 11px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.tab-panel :is(.subject-btn, .choice-btn, .tutor-sel-card, .resume-tmpl-card) {
  border-color: rgba(196, 181, 253, .14);
  background:
    radial-gradient(circle at 0 0, rgba(67, 56, 202, .045), transparent 40%),
    linear-gradient(145deg, rgba(23, 30, 44, .72), rgba(9, 16, 29, .76));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 20px rgba(0, 0, 0, .1);
}

.tab-panel :is(.subject-btn, .choice-btn, .tutor-sel-card, .resume-tmpl-card):not(.correct):not(.incorrect):not(.reveal-correct):hover {
  border-color: rgba(67, 56, 202, .42);
  background:
    radial-gradient(circle at 0 0, rgba(67, 56, 202, .11), transparent 42%),
    linear-gradient(145deg, rgba(28, 36, 51, .86), rgba(12, 19, 32, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .075), 0 16px 34px rgba(0, 0, 0, .18);
}

.tab-panel .subject-btn.active,
.tab-panel .resume-tmpl-card.active {
  border-color: rgba(67, 56, 202, .52);
  background:
    radial-gradient(circle at 0 0, rgba(67, 56, 202, .17), transparent 45%),
    linear-gradient(145deg, rgba(41, 38, 37, .86), rgba(23, 24, 31, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 12px 28px rgba(0, 0, 0, .18);
}

.tab-panel :is(.tag, .chat-suggest) {
  min-height: 34px;
  padding: .42rem .72rem;
  color: var(--t2);
  border-color: rgba(196, 181, 253, .14);
  background: rgba(5, 13, 26, .48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

.tab-panel :is(.tag, .chat-suggest):hover,
.tab-panel .tag.sel {
  color: var(--gold3);
  border-color: rgba(67, 56, 202, .43);
  background: rgba(67, 56, 202, .1);
}

.tab-panel .luxury-toggle-row {
  padding: .95rem 0;
  border-bottom-color: rgba(196, 181, 253, .1);
}

.tab-panel .luxury-toggle {
  width: 42px;
  height: 24px;
  padding: 3px;
  background: rgba(5, 13, 26, .7);
  border-color: rgba(196, 181, 253, .2);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .38), 0 4px 10px rgba(0, 0, 0, .14);
}

.tab-panel .luxury-toggle-thumb {
  width: 16px;
  height: 16px;
  background: rgba(240, 235, 224, .7);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
}

.tab-panel .luxury-toggle.on {
  background: linear-gradient(135deg, rgba(67, 56, 202, .44), rgba(67, 56, 202, .42));
  border-color: rgba(67, 56, 202, .62);
}

.tab-panel .luxury-toggle.on .luxury-toggle-thumb {
  transform: translateX(18px);
  background: var(--gold3);
}

.tab-panel .chat-suggestions { gap: .5rem; }

/* Preserve component shapes, but give interactive surfaces a reliable state system. */
.tab-panel :is(.ctrl-btn, .svc-cta, .ps-submit, .btn-next, .submit-btn, .chat-send) {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 8px;
}

.tab-panel :is(.ctrl-btn, .svc-cta, .ps-submit, .btn-next, .submit-btn, .chat-send):focus-visible,
.tab-panel :is(.subject-btn, .choice-btn, .ap-select-option):focus-visible {
  outline: 2px solid var(--gold2);
  outline-offset: 3px;
}

.tab-panel :is(.ctrl-btn, .svc-cta, .ps-submit, .btn-next, .submit-btn, .chat-send):not(:disabled):hover {
  filter: saturate(1.04);
}

.tab-panel :is(.ctrl-btn, .svc-cta, .ps-submit, .btn-next, .submit-btn, .chat-send):disabled {
  cursor: not-allowed;
  opacity: .48;
}

.tab-panel :is(.subject-btn, .choice-btn) {
  border-color: var(--tool-field-border);
}

.tab-panel :is(.subject-btn, .choice-btn):not(.correct):not(.incorrect):not(.reveal-correct):hover {
  border-color: rgba(67, 56, 202, .48);
  background: rgba(67, 56, 202, .07);
}

/* Generated results and quiet states have a deliberate, readable resting state. */
.tab-panel :is(.svc-out-shell, .out-box, .tutor-empty-state) {
  border-color: rgba(67, 56, 202, .24);
}

.tab-panel .svc-out-body {
  line-height: 1.65;
}

.tab-panel :is(.interview-placeholder, .tutor-empty-inline) {
  border: 1px dashed rgba(67, 56, 202, .22);
  border-radius: 9px;
  background: rgba(67, 56, 202, .035);
  color: var(--t3);
}

.tab-panel .interview-placeholder { padding: 1.1rem 1.2rem; }
.tab-panel .tutor-empty-inline { padding: .9rem 1rem; }

.tab-panel .resume-preview-shell {
  border: 1px solid rgba(67, 56, 202, .2);
  background: rgba(0, 0, 0, .16);
}

.tab-panel :is(.svc-cta-note, .hero-input-hint) {
  line-height: 1.5;
}

/* ── Account hub and subscription manager ── */
.app-modal {
  padding: clamp(.8rem, 3vw, 1.5rem);
  background: rgba(3, 8, 17, .8);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
}

.app-modal-box {
  width: min(700px, 100%);
  max-height: min(88vh, 860px);
  border-color: rgba(67, 56, 202, .28);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(27, 40, 63, .98), rgba(9, 16, 29, .99));
  box-shadow: 0 36px 100px rgba(0, 0, 0, .55), 0 0 50px rgba(67, 56, 202, .06), inset 0 1px 0 rgba(255, 255, 255, .055);
  scrollbar-color: rgba(67, 56, 202, .45) transparent;
  outline: none;
}

.settings-modal-box { width: min(760px, 100%); }
.subscription-confirm-box { width: min(430px, 100%); padding: 1.65rem; text-align: center; }

.app-modal-head {
  padding: 1.35rem 1.5rem 1.15rem;
  background: linear-gradient(180deg, rgba(33, 48, 74, .98), rgba(22, 34, 54, .94));
  border-bottom-color: rgba(67, 56, 202, .16);
}

.app-modal-title { color: var(--text); font-size: clamp(1.35rem, 3vw, 1.65rem); }
.app-modal-subtitle { max-width: 52ch; margin: .35rem 0 0; color: var(--t3); font-size: .78rem; line-height: 1.55; }
.app-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border-color: rgba(67, 56, 202, .28);
  background: rgba(6, 13, 25, .72);
  color: rgba(223, 193, 103, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}
.app-modal-close:hover {
  color: var(--gold3);
  border-color: rgba(67, 56, 202, .58);
  background: rgba(67, 56, 202, .12);
  transform: rotate(90deg);
}
.app-modal-close:focus-visible {
  outline: 2px solid rgba(223, 193, 103, .9);
  outline-offset: 3px;
}
.app-modal-body { padding: 1.2rem 1.5rem 1.5rem; gap: .9rem; }

.account-summary,
.plan-overview {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(67, 56, 202, .28);
  border-radius: 14px;
  background: radial-gradient(circle at 88% 0, rgba(67, 56, 202, .13), transparent 36%), linear-gradient(145deg, rgba(67, 56, 202, .08), rgba(255, 255, 255, .025));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

.account-summary { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; }
.account-avatar,
.plan-insignia {
  display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #C4B5FD, #4338CA);
  color: #101724; font-family: var(--h); font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
}
.account-avatar { width: 40px; height: 40px; border-radius: 12px; font-size: 1.05rem; }
.account-summary-copy { display: grid; min-width: 0; gap: .1rem; }
.account-summary-copy span { color: var(--text); font-family: var(--h); font-size: .92rem; font-weight: 700; overflow-wrap: anywhere; }
.account-summary-copy small { color: var(--t3); font-size: .71rem; overflow-wrap: anywhere; }
.account-plan-chip,
.plan-status {
  display: inline-flex; align-items: center; gap: .38rem; width: fit-content;
  border: 1px solid rgba(67, 56, 202, .32); border-radius: 999px;
  color: var(--gold3); background: rgba(67, 56, 202, .09);
  font-size: .61rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.account-plan-chip { margin-left: auto; padding: .36rem .58rem; white-space: nowrap; }
.account-plan-chip i,
.plan-status span { width: 6px; height: 6px; border-radius: 50%; background: #73cfa4; box-shadow: 0 0 0 3px rgba(115, 207, 164, .12); }

.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
.settings-group {
  border-color: rgba(67, 56, 202, .18); border-radius: 14px; padding: 1rem 1.05rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, .035), rgba(67, 56, 202, .018));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025);
}
.settings-group:hover { border-color: rgba(67, 56, 202, .3); }
.settings-section-head { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; }
.settings-section-icon { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border: 1px solid rgba(67, 56, 202, .28); border-radius: 9px; color: var(--gold3); background: rgba(67, 56, 202, .075); }
.settings-section-icon svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.settings-group-title { margin: 0; font-size: .94rem; }
.settings-group-note { margin: .18rem 0 0; line-height: 1.55; }
.settings-group .flabel { margin-top: .72rem; color: var(--t2); }
.settings-group .finput { min-height: 42px; border-radius: 9px; border-color: rgba(67, 56, 202, .22); background: rgba(5, 12, 23, .58); }
.settings-group .finput:focus { border-color: rgba(67, 56, 202, .68); box-shadow: 0 0 0 3px rgba(67, 56, 202, .1); }
.settings-row { gap: .55rem; margin-top: .8rem; }
.settings-row .ctrl-btn,
.modal-action-row .ctrl-btn { min-height: 40px; border-radius: 9px; }
.settings-msg { flex: 1 1 10rem; line-height: 1.4; }
.settings-msg:empty { display: none; }
.settings-divider { background: linear-gradient(90deg, rgba(67, 56, 202, .28), transparent); }

.plan-overview { padding: 1.1rem; }
.plan-overview-main { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.plan-insignia { width: 44px; height: 44px; border-radius: 13px; font-size: 1.2rem; }
.plan-overview-label { color: var(--t4); font-size: .59rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.plan-overview-name { margin: .12rem 0 .34rem; color: var(--text); font-family: var(--h); font-size: 1.08rem; font-weight: 700; overflow-wrap: anywhere; }
.plan-status { padding: .28rem .5rem; }
.plan-price-wrap { position: absolute; top: 1.1rem; right: 1.1rem; display: grid; justify-items: end; }
.plan-amount { font-size: 1.55rem; color: var(--gold3); }
.plan-price-note { color: var(--t4); font-size: .64rem; }
.plan-overview-copy { max-width: 60ch; margin: 1rem 0 .95rem; color: var(--t2); font-size: .8rem; line-height: 1.65; }
.plan-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(67, 56, 202, .18); padding-top: .8rem; }
.plan-metrics > div { display: grid; gap: .14rem; padding: 0 .75rem; border-right: 1px solid rgba(67, 56, 202, .13); }
.plan-metrics > div:first-child { padding-left: 0; }
.plan-metrics > div:last-child { border: 0; }
.plan-metrics strong { color: var(--gold3); font-family: var(--h); font-size: 1rem; }
.plan-metrics span { color: var(--t3); font-size: .65rem; overflow-wrap: anywhere; }
.settings-group--benefits { padding: 1.1rem; }
.settings-group--benefits .settings-section-head { margin-bottom: 1rem; }
.settings-group--benefits .settings-group-note { max-width: 48ch; }
.plan-tools { gap: .55rem .85rem; }
.plan-tools li { color: var(--t2); line-height: 1.4; }
.plan-tools svg { stroke: var(--gold3); }
.subscription-assurance { display: flex; gap: .55rem; align-items: flex-start; padding: .85rem .95rem; border: 1px solid rgba(115, 207, 164, .2); border-radius: 11px; background: rgba(115, 207, 164, .045); color: var(--t2); font-size: .75rem; line-height: 1.55; }
.subscription-assurance svg { width: 15px; height: 15px; flex: none; stroke: #73cfa4; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: .05rem; }
.modal-action-row { display: flex; align-items: center; justify-content: space-between; gap: .65rem; flex-wrap: wrap; }
.subscription-confirm-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto .8rem; border: 1px solid rgba(231, 154, 147, .32); border-radius: 15px; color: #f2b7b1; background: rgba(216, 105, 95, .09); }
.subscription-confirm-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.subscription-confirm-copy { margin: .65rem auto 1.15rem; max-width: 39ch; color: var(--t2); font-size: .8rem; line-height: 1.65; }
.modal-action-row--stack { justify-content: center; flex-direction: column; }
.modal-action-row--stack .ctrl-btn { width: 100%; }

@media (max-width: 620px) {
  .app-modal { align-items: end; padding: .6rem; }
  .app-modal-box { max-height: calc(100dvh - 1.2rem); border-radius: 16px; }
  .app-modal-head { padding: 1.1rem 1.05rem .95rem; }
  .app-modal-body { padding: .9rem 1.05rem 1.1rem; }
  .settings-grid { grid-template-columns: 1fr; }
  .account-summary { align-items: flex-start; flex-wrap: wrap; }
  .account-plan-chip { margin-left: 48px; }
  .plan-price-wrap { position: static; justify-items: start; margin: .8rem 0 -.15rem 3.75rem; }
  .plan-metrics > div { padding: 0 .45rem; }
  .plan-metrics span { font-size: .6rem; }
  .settings-row .ctrl-btn { flex: 1 1 100%; justify-content: center; }
  .modal-action-row .ctrl-btn { flex: 1 1 100%; justify-content: center; }
}

/* ── Result cards: one composed material system across every tool ── */
.tab-panel :is(.match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .essay-score-shell, .note-card, .dl-summary, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox, .eval-row) {
  min-width: 0;
  border-color: rgba(67, 56, 202, .22);
  background: linear-gradient(145deg, rgba(29, 42, 65, .78), rgba(8, 15, 27, .94));
  box-shadow: 0 16px 42px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.tab-panel :is(.match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .essay-score-shell, .note-card, .dl-summary) {
  border-radius: 16px;
}

.tab-panel :is(.match-card:hover, .sc-card:hover, .an-card:hover, .aid-card:hover, .cost-result-card:hover, .essay-score-shell:hover, .note-card:hover, .deadline-item:hover, .path-step:hover, .sch-card:hover, .tutor-note-card:hover, .tutor-test-card:hover) {
  border-color: rgba(67, 56, 202, .4);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .3), 0 0 28px rgba(67, 56, 202, .045), inset 0 1px 0 rgba(255, 255, 255, .045);
}

.tab-panel :is(.an-card.open, .aid-card.open) {
  border-color: rgba(67, 56, 202, .48);
  background: linear-gradient(145deg, rgba(34, 49, 75, .88), rgba(8, 15, 27, .97));
}

.tab-panel :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header, .cost-result-header) {
  min-width: 0;
  gap: .8rem;
}

.tab-panel :is(.mc-name, .sc-name, .an-name, .aid-school-name, .cost-result-school, .note-card-title, .ps-title, .dl-title, .sch-name, .tutor-note-card-title, .tutor-test-name, .term-box-name, .qbox-text, .eval-text, .essay-insight-text, .aid-leverage-text, .aid-appeal-text, .an-detail-value, .an-section-copy, .svc-out-body, .out-inner) {
  min-width: 0;
  overflow-wrap: anywhere;
}

.tab-panel :is(.an-detail-box, .aid-stat-box, .mc-detail-box, .cost-grant-row, .term-box, .qbox) {
  min-width: 0;
  border-color: rgba(67, 56, 202, .18);
  background: linear-gradient(145deg, rgba(255, 255, 255, .045), rgba(67, 56, 202, .025));
}

.tab-panel :is(.an-body-inner, .aid-body-inner, .svc-out-body, .out-inner) {
  line-height: 1.68;
}

/* Keep unusually detailed AI responses available instead of clipping them mid-thought. */
.tab-panel .svc-out.visible,
.tab-panel .out-box.visible { max-height: 12000px; }
.tab-panel .an-card.open .an-card-body,
.tab-panel .aid-card.open .aid-card-body { max-height: 5000px; }

/* Match cards: calm hierarchy for dense, generated result data. */
.tab-panel .match-card.open .mc-body { max-height: 5000px; }
.tab-panel .mc-header > div[style] { min-width: 0; }
.tab-panel .mc-header { align-items: center; }
.tab-panel .mc-name { min-width: 0; line-height: 1.16; overflow-wrap: anywhere; }
.tab-panel .mc-expand-hint { min-width: 0; line-height: 1.45; overflow-wrap: anywhere; }
.tab-panel .mc-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.35rem; }
.tab-panel .mc-detail-box { min-width: 0; min-height: 72px; padding: .85rem .95rem; }
.tab-panel :is(.mc-detail-label, .mc-detail-value, .mc-fit-name, .mc-verdict-text, .mc-tag, .mc-stat-lbl, .mc-stat-val) { overflow-wrap: anywhere; }
.tab-panel .mc-detail-value { line-height: 1.5; }
.tab-panel .mc-section-label { margin: 1.15rem 0 .7rem; }
.tab-panel .mc-fit-bars { gap: .62rem; margin-bottom: 1.35rem; }
.tab-panel .mc-fit-row { display: grid; grid-template-columns: minmax(106px, .85fr) minmax(0, 1.6fr) auto; align-items: center; gap: .65rem; }
.tab-panel .mc-fit-name { min-width: 0; line-height: 1.35; }
.tab-panel .mc-fit-track { min-width: 0; height: 5px; }
.tab-panel .mc-fit-score { min-width: 34px; }
.tab-panel .mc-verdict { margin: 1.15rem 0; }
.tab-panel .mc-tags { gap: .45rem; margin-bottom: 1.15rem; }
.tab-panel .mc-tag { line-height: 1.4; }
.tab-panel .mc-action-row { gap: .55rem; margin: 1.15rem 0 .95rem; }
.tab-panel .mc-action { min-height: 40px; line-height: 1.25; }
.tab-panel .mc-stats-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .75rem; padding-top: .95rem; }
.tab-panel .mc-stats-strip > div { min-width: 0; }

@media (max-width: 700px) {
  .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger) {
    min-height: 48px;
    font-size: 16px;
  }

  .tab-panel .hero-input { min-height: 54px; }

  .tab-panel .concierge-block {
    padding: .95rem 1rem 1rem 1.12rem;
    border-radius: 13px;
  }

  .tab-panel textarea { min-height: 128px; }

  .tab-panel :is(.ctrl-btn, .svc-cta, .ps-submit, .btn-next, .submit-btn, .chat-send) {
    min-height: 48px;
  }

  .tab-panel .svc-out-body { padding: 1.2rem; }
}

@media (max-width: 768px) {
  .topbar-right { gap: .35rem; min-width: 0; }
  .topbar .profile-btn { min-height: 36px; }
  .topbar .logout-btn { min-height: 36px; white-space: nowrap; }

  .tab-panel { min-width: 0; }
  .tab-panel :is(.svc-title, .svc-desc, .concierge-q, .hero-input-hint, .tutor-sub-title, .tutor-sub-meta, .resume-section-title, .chat-bubble, .svc-out-body, .out-inner, .interview-placeholder, .tutor-empty-desc) { overflow-wrap: anywhere; }
  .tab-panel .svc-title { font-size: clamp(1.85rem, 9vw, 2.35rem); line-height: 1.04; }
  .tab-panel .svc-desc { font-size: .88rem; line-height: 1.65; }
  .tab-panel .svc-breadcrumb { flex-wrap: wrap; row-gap: .35rem; }

  .tab-panel .app-head { gap: 1rem; }
  .tab-panel .app-head-actions { width: 100%; }
  .tab-panel .app-head-actions .ctrl-btn { flex: 1 1 145px; min-height: 44px; white-space: normal; }

  .tab-panel .concierge-q { align-items: flex-start; flex-wrap: wrap; }
  .tab-panel .option-row { gap: .45rem; }
  .tab-panel .opt-pill { min-width: 0; max-width: 100%; white-space: normal; text-align: left; }
  .tab-panel .hero-input-hint { max-width: 100%; white-space: normal; }

  .tab-panel .dl-selects-grid { grid-template-columns: 1fr; gap: .75rem; }
  .tab-panel .dl-select-field { padding: .8rem; }

  .tab-panel :is(.cost-result-header, .avs-body, .cost-two-col, .essay-score-top) { min-width: 0; }
  .tab-panel .cost-result-header { flex-direction: column; }
  .tab-panel .cost-result-net { text-align: left; }
  .tab-panel .cost-metric-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-panel .cost-metric-box { min-width: 0; padding: .9rem .65rem; }
  .tab-panel .cost-two-col { grid-template-columns: 1fr; }
  .tab-panel .cost-two-col > div { padding: 1rem 1.1rem; }
  .tab-panel .cost-two-col > div:first-child { border-right: 0; border-bottom: 1px solid var(--border); }
  .tab-panel :is(.cost-tip-box, .cost-appeal-box, .cost-disclaimer, .cost-math-note) { margin-right: 1rem; margin-left: 1rem; }
  .tab-panel .cost-save-btn { width: calc(100% - 2rem); margin-right: 1rem; margin-left: 1rem; }

  .tab-panel .resume-preview-pane { position: static; }
  .tab-panel .resume-preview-shell { max-height: 560px; }
  .tab-panel .resume-tmpl-row { margin-right: -.1rem; padding-right: .1rem; }
  .tab-panel .tutor-sub-main { padding: 1.25rem 1.1rem 6rem; }
  .tab-panel .tutor-input-card { padding: 1.1rem; }
  .tab-panel .chat-suggest { flex: 1 1 100%; justify-content: flex-start; text-align: left; }

  /* Result headers and compact data layouts stay readable on phones. */
  .tab-panel :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header, .cost-result-header) {
    align-items: flex-start;
    padding: 1rem;
  }
  .tab-panel .an-card-header,
  .tab-panel .aid-card-header { flex-wrap: wrap; }
  .tab-panel .an-name { flex: 1 1 calc(100% - 4rem); }
  .tab-panel .an-odds-wrap { flex: 1 1 100%; min-width: 0; }
  .tab-panel .an-odds-track { min-width: 0; flex: 1 1 auto; }
  .tab-panel .aid-card-header > div[style] { flex: 1 1 min(100%, 15rem) !important; }
  .tab-panel .aid-net-wrap { margin-left: auto; min-width: 0; }
  .tab-panel .an-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .tab-panel .aid-summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-panel .aid-summary-strip > :last-child { grid-column: 1 / -1; }
  .tab-panel .aid-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .38rem .65rem; }
  .tab-panel .aid-bar-label { grid-column: 1 / -1; min-width: 0; }
  .tab-panel .aid-bar-track { min-width: 0; }
  .tab-panel .aid-bar-amount { min-width: 0; font-size: .75rem; }

  .tab-panel .essay-insight-row { margin-right: .85rem; margin-left: .85rem; padding: .9rem; }
  .tab-panel :is(.essay-college-section, .essay-red-flags-section) { margin-right: .85rem; margin-left: .85rem; padding: .95rem; }
  .tab-panel .essay-dim-row { grid-template-columns: minmax(64px, .78fr) minmax(0, 1fr) 42px; column-gap: .45rem; }
  .tab-panel .essay-dim-label { white-space: normal; text-align: left; }

  .tab-panel :is(.deadline-item, .dl-item, .tutor-test-card) { flex-wrap: wrap; gap: .65rem; }
  .tab-panel :is(.dl-content, .tutor-test-content) { min-width: 0; flex: 1 1 12rem; }
  .tab-panel .dl-tag { max-width: 100%; white-space: normal; }
  .tab-panel .path-step { padding: 1rem 1rem 1rem 3.1rem; }
  .tab-panel .eval-row { flex-direction: column; gap: .35rem; padding: .9rem 1rem; }
  .tab-panel .eval-label { min-width: 0; padding-top: 0; }
  .tab-panel :is(.qbox, .term-box) { padding: .9rem; gap: .65rem; }

  .tab-panel .mc-header { display: grid; grid-template-columns: 31px minmax(0, 1fr) auto; align-items: start; gap: .6rem .75rem; }
  .tab-panel .mc-rank { grid-column: 1; grid-row: 1; margin-top: .1rem; }
  .tab-panel .mc-header > div[style] { grid-column: 2; grid-row: 1; }
  .tab-panel .mc-header .badge { grid-column: 2; grid-row: 2; justify-self: start; max-width: 100%; white-space: normal; }
  .tab-panel .mc-chevron { grid-column: 3; grid-row: 1; margin-top: .42rem; }
  .tab-panel .mc-score-wrap { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; gap: .65rem; padding: .15rem 0 0; }
  .tab-panel .mc-score-bar { width: auto; min-width: 0; }
  .tab-panel .mc-detail-grid { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .tab-panel .mc-detail-box { min-height: 0; }
  .tab-panel .mc-fit-row { grid-template-columns: minmax(86px, .9fr) minmax(0, 1.55fr) 34px; gap: .5rem; }
  .tab-panel .mc-fit-name { font-size: .69rem; }
  .tab-panel .mc-verdict { padding: .9rem; gap: .6rem; }
  .tab-panel .mc-stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .tab-panel *, .tab-panel *::before, .tab-panel *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ==========================================================================
   SKILL-DRIVEN PRODUCT SYSTEM
   Apple: immediate response, restrained material, clear hierarchy, agency.
   Shadcn composition translated to this static app: semantic tokens, complete
   field/card/dialog anatomy, variants, and accessible states.
   ========================================================================== */
:root {
  --app-background: #0b1120;
  --app-foreground: #f0ebe0;
  --app-card: #121c2d;
  --app-card-strong: #172337;
  --app-muted: rgba(240, 235, 224, .62);
  --app-muted-surface: rgba(240, 235, 224, .045);
  --app-primary: #4338CA;
  --app-primary-foreground: #0a101c;
  --app-border: rgba(240, 235, 224, .1);
  --app-input: rgba(196, 181, 253, .18);
  --app-ring: rgba(67, 56, 202, .9);
  --app-success: #6db68a;
  --app-destructive: #df756c;
  --app-sidebar-width: 248px;
  --app-content-max: 1240px;
}

html { color-scheme: dark; }

body {
  background:
    radial-gradient(circle at 72% -12%, rgba(67, 56, 202, .075), transparent 30rem),
    var(--app-background);
}

#dashboard,
#dashboard * { box-sizing: border-box; }

#dashboard .topbar {
  background: rgba(8, 14, 26, .84);
  border-bottom-color: var(--app-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .025), 0 10px 28px rgba(0, 0, 0, .12);
}

#dashboard .content {
  width: 100%;
  padding: clamp(1.35rem, 2.8vw, 2.6rem) clamp(1rem, 3.1vw, 3.1rem) 6rem;
}

#dashboard .tab-panel {
  width: min(100%, var(--app-content-max));
  margin-inline: auto;
}

#dashboard .nav-item {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 10px;
  line-height: 1.25;
  touch-action: manipulation;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .1s ease;
}

#dashboard .nav-item:hover {
  border-color: rgba(240, 235, 224, .065);
  background: rgba(240, 235, 224, .045);
}

#dashboard .nav-item.active,
#dashboard .nav-item[aria-current="page"] {
  color: var(--gold3);
  border-color: rgba(67, 56, 202, .24);
  background: linear-gradient(90deg, rgba(67, 56, 202, .14), rgba(67, 56, 202, .055));
}

#dashboard .nav-item:active,
#dashboard :is(.ctrl-btn, .svc-cta, .submit-btn, .btn-next, .ps-submit, .chat-send, .opt-pill, .tag, .subject-btn, .tutor-sel-card, .resume-tmpl-card, .hcard):active {
  transform: scale(.985);
}

#dashboard .svc-breadcrumb {
  margin-bottom: 1.65rem;
}

#dashboard .svc-back-btn {
  min-height: 40px;
  padding: .5rem .72rem;
  border: 1px solid transparent;
  border-radius: 9px;
}

#dashboard .svc-back-btn:hover {
  border-color: var(--app-border);
  background: var(--app-muted-surface);
}

#dashboard .svc-hero {
  position: relative;
  max-width: 860px;
  margin-bottom: clamp(1.8rem, 4vw, 3rem);
  padding-left: clamp(1rem, 2vw, 1.45rem);
}

#dashboard .svc-hero::before {
  content: '';
  position: absolute;
  inset: .15rem auto .2rem 0;
  width: 1px;
  background: linear-gradient(180deg, var(--gold2), rgba(67, 56, 202, .08));
}

#dashboard .svc-title {
  max-width: 17ch;
  margin: .6rem 0 .8rem;
  font-size: clamp(2.15rem, 5.1vw, 4.25rem);
  font-weight: 580;
  line-height: .98;
  letter-spacing: -.058em;
  text-wrap: balance;
}

#dashboard .svc-desc {
  max-width: 65ch;
  margin: 0;
  color: var(--t2);
  font-size: clamp(.9rem, 1.35vw, 1rem);
  line-height: 1.72;
  text-wrap: pretty;
}

#dashboard .svc-profile-pill {
  min-height: 32px;
  margin-top: 1rem;
  padding: .38rem .72rem;
  border-color: rgba(67, 56, 202, .24);
  background: rgba(67, 56, 202, .075);
}

/* Field composition: group -> label/question -> control/help text. */
#dashboard .tab-panel :is(.concierge-block, .tutor-input-card, .resume-section, .dl-select-field) {
  border: 1px solid var(--app-border);
  background: linear-gradient(180deg, rgba(23, 35, 55, .72), rgba(14, 23, 39, .78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 32px rgba(0, 0, 0, .1);
}

#dashboard .tab-panel .concierge-block {
  margin-bottom: .9rem;
  padding: 1rem 1.05rem 1.08rem;
  border-radius: 14px;
}

#dashboard .tab-panel .concierge-block::before { display: none; }

#dashboard .tab-panel .concierge-block:focus-within {
  border-color: rgba(67, 56, 202, .38);
  background: linear-gradient(180deg, rgba(27, 40, 62, .9), rgba(15, 25, 42, .92));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 3px rgba(67, 56, 202, .075), 0 18px 38px rgba(0, 0, 0, .14);
}

#dashboard .tab-panel .concierge-q,
#dashboard .tab-panel .flabel {
  color: var(--app-foreground);
  font-family: var(--h);
  font-weight: 590;
  letter-spacing: -.015em;
  text-transform: none;
}

#dashboard .tab-panel .concierge-q {
  min-height: 24px;
  margin-bottom: .72rem;
  font-size: .93rem;
  line-height: 1.45;
}

#dashboard .tab-panel .flabel {
  font-size: .73rem;
  line-height: 1.4;
}

#dashboard .tab-panel .concierge-q .q-num {
  min-width: 1.85rem;
  height: 1.35rem;
  border: 0;
  border-radius: 0;
  color: var(--gold2);
  background: transparent;
  font-variant-numeric: tabular-nums;
}

#dashboard .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger, .hero-input, .luxury-textarea, .chat-input-wrap) {
  color: var(--app-foreground);
  background: rgba(6, 13, 25, .7);
  border-color: var(--app-input);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035), 0 7px 18px rgba(0, 0, 0, .08);
}

#dashboard .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger):hover {
  border-color: rgba(67, 56, 202, .36);
  background: rgba(9, 17, 31, .82);
}

#dashboard .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus,
#dashboard .tab-panel .ap-select-trigger:focus-visible,
#dashboard .tab-panel .chat-input-wrap:focus-within {
  outline: 0;
  border-color: var(--app-ring);
  background: rgba(10, 19, 34, .94);
  box-shadow: 0 0 0 3px rgba(67, 56, 202, .14), inset 0 1px 0 rgba(255, 255, 255, .05);
}

#dashboard .tab-panel :is(.hero-input, .luxury-textarea) {
  background: rgba(6, 13, 25, .7);
  border: 1px solid var(--app-input);
}

#dashboard .tab-panel .hero-input-wrap::after { display: none; }

#dashboard .tab-panel :is(input, textarea)::placeholder {
  color: rgba(240, 235, 224, .43);
  opacity: 1;
}

#dashboard .tab-panel .hero-input-hint {
  margin-top: .48rem;
  padding: 0;
  color: var(--t4);
  background: transparent;
}

/* Toggle-group equivalent for the static implementation. */
#dashboard .tab-panel :is(.option-row, .tag-row) {
  display: flex;
  gap: .42rem;
  align-items: stretch;
}

#dashboard .tab-panel :is(.opt-pill, .tag) {
  appearance: none;
  min-height: 42px;
  padding: .55rem .78rem;
  align-items: center;
  border: 1px solid var(--app-border);
  border-radius: 9px;
  color: var(--t2);
  background: rgba(5, 12, 23, .48);
  box-shadow: none;
  line-height: 1.3;
  touch-action: manipulation;
}

#dashboard .tab-panel :is(.opt-pill, .tag):hover {
  color: var(--app-foreground);
  border-color: rgba(67, 56, 202, .32);
  background: rgba(67, 56, 202, .065);
}

#dashboard .tab-panel .opt-pill.active,
#dashboard .tab-panel .tag.sel,
#dashboard .tab-panel :is(.opt-pill, .tag)[aria-checked="true"] {
  color: var(--gold3);
  border-color: rgba(67, 56, 202, .5);
  background: rgba(67, 56, 202, .13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045);
}

#dashboard .tab-panel .pip {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 999px;
  background: currentColor;
  opacity: .42;
}

#dashboard .tab-panel .opt-pill[aria-checked="true"] .pip { opacity: 1; }

/* Button variants mirror a composed component instead of ad-hoc colors. */
#dashboard :is(.ctrl-btn, .svc-cta, .submit-btn, .btn-next, .btn-back, .ps-submit, .chat-send, .chat-suggest, .pb-edit) {
  min-height: 44px;
  border-radius: 10px;
  font-family: var(--h);
  font-weight: 570;
  letter-spacing: -.005em;
  text-transform: none;
  touch-action: manipulation;
  transition: transform .1s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease, color .16s ease;
}

#dashboard :is(.svc-cta, .submit-btn, .btn-next, .ctrl-btn.primary, .ps-submit, .chat-send) {
  color: var(--app-primary-foreground);
  background: linear-gradient(160deg, var(--gold3), var(--app-primary) 58%, #aa7d29);
  border: 1px solid rgba(196, 181, 253, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(0, 0, 0, .14);
}

#dashboard :is(.svc-cta, .submit-btn, .btn-next, .ctrl-btn.primary, .ps-submit, .chat-send):hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 12px 28px rgba(0, 0, 0, .2), 0 0 24px rgba(67, 56, 202, .1);
}

#dashboard :is(.ctrl-btn, .btn-back, .chat-suggest, .pb-edit):not(.primary) {
  color: var(--t2);
  background: rgba(240, 235, 224, .035);
  border: 1px solid var(--app-border);
}

#dashboard :is(.ctrl-btn, .btn-back, .chat-suggest, .pb-edit):not(.primary):hover {
  color: var(--app-foreground);
  border-color: rgba(67, 56, 202, .32);
  background: rgba(67, 56, 202, .065);
}

#dashboard :is(button, [role="button"], [role="radio"], [role="checkbox"], [role="switch"]):focus-visible,
.app-modal :is(button, a, input, textarea, select):focus-visible {
  outline: 2px solid var(--app-ring);
  outline-offset: 3px;
}

/* Complete card anatomy for every generated output. */
#dashboard .tab-panel :is(.svc-out-shell, .out-box, .match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .practice-header, .ps-question-card, .tutor-note-card, .tutor-test-card) {
  border: 1px solid var(--app-border);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(23, 35, 55, .78), rgba(11, 19, 33, .86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 16px 38px rgba(0, 0, 0, .11);
}

#dashboard .tab-panel :is(.svc-out, .out-box).visible {
  max-height: none;
  overflow: visible;
}

#dashboard .tab-panel :is(.svc-out-header, .out-header) {
  min-height: 52px;
  padding: .9rem 1.05rem;
  border-bottom: 1px solid var(--app-border);
  background: rgba(240, 235, 224, .02);
}

#dashboard .tab-panel :is(.svc-out-body, .out-inner, .mc-body-inner, .an-body-inner, .aid-body-inner) {
  min-width: 0;
  padding: clamp(1rem, 2.2vw, 1.35rem);
}

#dashboard .tab-panel :is(.mc-header, .an-card-header, .aid-card-header) {
  min-height: 78px;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease;
}

#dashboard .tab-panel :is(.mc-header, .an-card-header, .aid-card-header):hover {
  background: rgba(67, 56, 202, .045);
}

#dashboard .tab-panel :is(.match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .ps-question-card, .tutor-note-card, .tutor-test-card) + :is(.match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .ps-question-card, .tutor-note-card, .tutor-test-card) {
  margin-top: .75rem;
}

#dashboard .tab-panel :is(.mc-name, .an-name, .aid-school-name, .sc-name, .cost-result-school, .ps-q-text, .tutor-note-card-title, .tutor-test-title) {
  min-width: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

#dashboard .tab-panel :is(.stream-text, .svc-out-body, .out-inner, .chat-bubble, td, th, .mc-detail-value, .aid-body-inner, .an-body-inner) {
  overflow-wrap: anywhere;
  word-break: normal;
}

#dashboard .tab-panel table {
  width: 100%;
  border-collapse: collapse;
}

#dashboard .tab-panel :is(.svc-out-body, .out-inner, .mc-body-inner, .an-body-inner, .aid-body-inner) > :is(table, .table-wrap) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Chat composition: scroller, message bubble, composer, quick actions. */
#dashboard .chat-window {
  height: clamp(390px, 58vh, 620px);
  border: 1px solid var(--app-border);
  border-radius: 16px;
  background: rgba(6, 13, 25, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
}

#dashboard .chat-messages {
  padding: clamp(.9rem, 2.5vw, 1.35rem);
  gap: 1rem;
  scroll-padding-block: 1rem;
}

#dashboard .chat-bubble {
  max-width: min(82%, 680px);
  padding: .82rem 1rem;
  font-size: .88rem;
  line-height: 1.68;
}

#dashboard .chat-msg.assistant .chat-bubble {
  color: var(--t2);
  background: var(--app-card-strong);
  border-color: var(--app-border);
  border-radius: 5px 14px 14px 14px;
}

#dashboard .chat-msg.user .chat-bubble {
  color: var(--app-primary-foreground);
  background: linear-gradient(160deg, var(--gold2), var(--gold));
  border-radius: 14px 14px 5px 14px;
}

#dashboard .chat-input-wrap {
  min-height: 58px;
  margin-top: .75rem;
  padding: .55rem .62rem .55rem .9rem;
  align-items: flex-end;
}

#dashboard .chat-input {
  min-height: 38px;
  padding: .48rem 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#dashboard .chat-send {
  width: 44px;
  height: 44px;
  min-height: 44px;
  flex: none;
}

#dashboard .chat-suggestions { margin-top: .65rem; }

/* Dialog/sheet composition and symmetric motion. */
.app-modal {
  opacity: 1;
  animation: app-dialog-backdrop-in .2s ease both;
}

.app-modal .app-modal-box {
  animation: app-dialog-content-in .28s cubic-bezier(.16, 1, .3, 1) both;
}

.app-modal.is-closing {
  animation: app-dialog-backdrop-out .2s ease both;
}

.app-modal.is-closing .app-modal-box {
  animation: app-dialog-content-out .2s ease both;
}

@keyframes app-dialog-backdrop-in { from { opacity: 0; } }
@keyframes app-dialog-backdrop-out { to { opacity: 0; } }
@keyframes app-dialog-content-in { from { opacity: 0; transform: translateY(10px) scale(.985); } }
@keyframes app-dialog-content-out { to { opacity: 0; transform: translateY(8px) scale(.99); } }

.app-modal .app-modal-close {
  width: 40px;
  height: 40px;
  color: var(--gold2);
  border-color: rgba(67, 56, 202, .26);
  background: rgba(6, 13, 25, .72);
  transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .1s ease;
}

.app-modal .app-modal-close:hover {
  color: var(--gold3);
  border-color: rgba(67, 56, 202, .5);
  background: rgba(67, 56, 202, .1);
  transform: none;
}

.app-modal .app-modal-close:active { transform: scale(.96); }

#dashboard .luxury-toggle {
  position: relative;
  width: 48px;
  height: 28px;
  flex: none;
}

#dashboard .luxury-toggle::after {
  content: '';
  position: absolute;
  inset: -8px -2px;
}

#dashboard .luxury-toggle.on .luxury-toggle-thumb { transform: translateX(22px); }

#dashboard .tutor-suggestion-chip {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding-block: .5rem;
}

@media (min-width: 1025px) {
  #dashboard .sidebar {
    width: var(--app-sidebar-width);
    padding: 1rem .7rem 1.4rem;
    transform: none !important;
  }

  #dashboard .sidebar .nav-item-label {
    opacity: 1;
    transform: none;
  }

  #dashboard .sidebar .snav-label {
    height: auto;
    margin: 1.15rem .15rem .35rem;
    opacity: 1;
  }

  #dashboard .sidebar .nav-item[data-label]::after { display: none; }

  #dashboard .content {
    width: calc(100% - var(--app-sidebar-width));
    margin-left: var(--app-sidebar-width);
  }

  #dashboard .ham { display: none !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --app-sidebar-width: 216px; }

  #dashboard .sidebar {
    width: var(--app-sidebar-width);
    padding: .85rem .55rem 1.2rem;
    transform: none !important;
  }

  #dashboard .sidebar .nav-item-label { opacity: 1; transform: none; }
  #dashboard .sidebar .snav-label { height: auto; margin: 1rem .1rem .3rem; opacity: 1; }
  #dashboard .sidebar .nav-item[data-label]::after { display: none; }
  #dashboard .content { width: calc(100% - var(--app-sidebar-width)); margin-left: var(--app-sidebar-width) !important; }
  #dashboard .ham { display: none !important; }
}

@media (max-width: 768px) {
  #dashboard .content {
    width: 100%;
    margin-left: 0 !important;
    padding: 1.15rem .9rem 6.8rem;
  }

  #dashboard .topbar { padding-inline: .75rem; }
  #dashboard .topbar .profile-btn { display: none; }

  #dashboard .sidebar {
    width: min(86vw, 304px);
    padding: 1rem .65rem 2rem;
  }

  #dashboard .svc-breadcrumb { margin-bottom: 1.15rem; }

  #dashboard .svc-hero {
    margin-bottom: 1.55rem;
    padding-left: .9rem;
  }

  #dashboard .svc-title {
    max-width: 18ch;
    font-size: clamp(2rem, 10.5vw, 3rem);
    line-height: 1;
  }

  #dashboard .svc-title br { display: none; }

  #dashboard .tab-panel .concierge-block {
    padding: .9rem;
    border-radius: 12px;
  }

  #dashboard .tab-panel :is(.option-row, .tag-row) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dashboard .tab-panel :is(.opt-pill, .tag) {
    width: 100%;
    min-width: 0;
    justify-content: flex-start;
    white-space: normal;
  }

  #dashboard .tab-panel :is(.svc-cta-wrap, .modal-action-row, .settings-row) {
    align-items: stretch;
  }

  #dashboard .tab-panel .svc-cta { width: 100%; }

  #dashboard .chat-window { height: min(54vh, 500px); min-height: 340px; }
  #dashboard .chat-bubble { max-width: 90%; }

  #dashboard .tab-panel :is(.mc-header, .an-card-header, .aid-card-header) { min-height: 0; }

  .app-modal { align-items: end; }
  .app-modal .app-modal-box { max-height: calc(100dvh - 1rem); border-radius: 18px 18px 12px 12px; }
}

@media (max-width: 440px) {
  #dashboard .tab-panel :is(.option-row, .tag-row) { grid-template-columns: minmax(0, 1fr); }
  #dashboard .topbar .logout-btn { padding-inline: .62rem; }
  #dashboard .svc-profile-pill { align-items: flex-start; border-radius: 10px; line-height: 1.4; }
  #dashboard .cost-metric-strip,
  #dashboard .aid-summary-strip { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-transparency: reduce) {
  #dashboard .topbar,
  #dashboard .sidebar,
  .app-modal,
  .app-modal .app-modal-box {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  #dashboard .topbar { background: #0a1221; }
  #dashboard .sidebar { background: #09111f; }
  .app-modal { background: rgba(3, 8, 17, .96); }
}

@media (prefers-contrast: more) {
  :root {
    --app-border: rgba(240, 235, 224, .24);
    --app-input: rgba(196, 181, 253, .38);
    --t2: rgba(240, 235, 224, .9);
    --t3: rgba(240, 235, 224, .78);
    --t4: rgba(240, 235, 224, .68);
  }
  #dashboard :is(.nav-item, .concierge-block, .svc-out-shell, .out-box, .match-card, .sc-card, .an-card, .aid-card) { box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  #dashboard *, #dashboard *::before, #dashboard *::after,
  .app-modal, .app-modal * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   BETTER-INTERFACE PASS
   One semantic system for layout, type, color, controls, and generated cards.
   ========================================================================== */
:root {
  /* Primitives stay here; components consume the role tokens below. */
  --neutral-950: #07101e;
  --neutral-925: #0b1120;
  --neutral-900: #101a2b;
  --neutral-850: #142036;
  --neutral-800: #19263d;
  --ivory-100: #f0ebe0;
  --gold-300: #C4B5FD;
  --gold-400: #93C5FD;
  --gold-500: #4338CA;
  --gold-600: #aa7d29;

  /* Semantic tier: the only palette consumed by this refinement layer. */
  --color-bg-page: var(--neutral-925);
  --color-bg-surface: var(--neutral-900);
  --color-bg-raised: var(--neutral-850);
  --color-bg-sunken: var(--neutral-950);
  --color-bg-overlay: rgba(3, 8, 17, .78);
  --color-text-primary: var(--ivory-100);
  --color-text-secondary: rgba(240, 235, 224, .78);
  --color-text-tertiary: rgba(240, 235, 224, .64);
  --color-text-disabled: rgba(240, 235, 224, .58);
  --color-text-inverse: #09111e;
  --color-text-on-accent: #09111e;
  --color-border-subtle: rgba(240, 235, 224, .075);
  --color-border-default: rgba(240, 235, 224, .11);
  --color-border-strong: rgba(240, 235, 224, .18);
  --color-border-focus: var(--gold-300);
  --color-border-separator: rgba(240, 235, 224, .085);
  --color-accent-bg-subtle: rgba(67, 56, 202, .105);
  --color-accent-border: rgba(67, 56, 202, .34);
  --color-accent-solid: var(--gold-500);
  --color-accent-solid-hover: var(--gold-400);
  --color-accent-text: var(--gold-400);
  --color-success-bg-subtle: rgba(109, 182, 138, .1);
  --color-success-border: rgba(109, 182, 138, .28);
  --color-success-text: #91d0aa;
  --color-danger-bg-subtle: rgba(223, 117, 108, .1);
  --color-danger-border: rgba(223, 117, 108, .28);
  --color-danger-text: #f0a19a;

  --type-display: clamp(2.15rem, 5.1vw, 4.25rem);
  --type-title: clamp(1.55rem, 2.7vw, 2.2rem);
  --type-heading: 1.125rem;
  --type-body: .9375rem;
  --type-body-sm: .875rem;
  --type-caption: .8125rem;
  --type-label: .75rem;

  --radius-control: 10px;
  --radius-card: 18px;
  --radius-panel: 22px;
  --shadow-surface:
    0 0 0 1px rgba(240, 235, 224, .085),
    0 1px 2px rgba(0, 0, 0, .22),
    0 12px 32px -22px rgba(0, 0, 0, .76);
  --shadow-surface-hover:
    0 0 0 1px rgba(67, 56, 202, .26),
    0 1px 2px rgba(0, 0, 0, .24),
    0 18px 42px -24px rgba(0, 0, 0, .82);
  --shadow-raised:
    0 0 0 1px rgba(240, 235, 224, .105),
    0 28px 70px -30px rgba(0, 0, 0, .88);

  /* Keep legacy selectors aligned with the semantic system. */
  --bg: var(--color-bg-page);
  --bg-deep: var(--color-bg-sunken);
  --bg2: var(--color-bg-raised);
  --text: var(--color-text-primary);
  --t2: var(--color-text-secondary);
  --t3: var(--color-text-tertiary);
  --t4: var(--color-text-disabled);
  --border: var(--color-border-default);
  --border-2: var(--color-border-strong);
  --border-gold: var(--color-accent-border);
  --gold: var(--color-accent-solid);
  --gold2: var(--color-accent-text);
  --gold3: var(--gold-300);
  --red: var(--color-danger-text);
  --green: var(--color-success-text);
  --blue: var(--color-accent-solid);
}

html {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  font-family: var(--b);
  font-size: var(--type-body);
  line-height: 1.6;
}

#dashboard :is(h1, h2, h3, h4, .welcome, .svc-title, .app-modal-title) {
  font-family: var(--h);
  font-optical-sizing: auto;
  text-wrap: balance;
}

#dashboard :is(.svc-desc, .pdesc, .wsub, .settings-group-note, .app-modal-subtitle, .stream-text, .chat-bubble) {
  text-wrap: pretty;
}

#dashboard :is(.progress-pct, .mc-score-num, .mc-fit-score, .mc-stat-val, .an-odds-num, .aid-net-price, .aid-stat-val, .cost-result-net-val, .dl-summary-stat strong, .dl-item-day, .slider-val, .priority-val) {
  font-variant-numeric: tabular-nums;
}

.dashboard-skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: 1rem;
  z-index: 10000;
  min-height: 44px;
  padding: .7rem 1rem;
  color: var(--color-text-on-accent);
  background: var(--gold-300);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-raised);
  font-family: var(--h);
  font-size: var(--type-caption);
  font-weight: 650;
  text-decoration: none;
  transform: translateY(calc(-100% - 2rem));
}

.dashboard-skip-link:focus { transform: none; }

#dashboard .tlogo,
#dashboard .t-plan,
#dashboard .nav-item {
  appearance: none;
  color: inherit;
  font: inherit;
  text-align: start;
}

#dashboard .tlogo {
  min-height: 40px;
  padding: .35rem .45rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}

#dashboard .t-plan {
  min-height: 40px;
  cursor: pointer;
}

#dashboard :is(.ham, .profile-btn, .logout-btn) { min-height: 40px; }

#dashboard .content {
  min-width: 0;
  max-width: none;
  padding-block-start: clamp(1.5rem, 3vw, 2.75rem);
}

#dashboard .sidebar {
  right: auto;
  left: auto;
  inset-inline-start: 0;
  border-right: 0;
  border-inline-end: 1px solid var(--color-border-default);
}

#dashboard .nav-item.active::before {
  right: auto;
  left: auto;
  inset-inline-start: -.1rem;
  animation: none;
}

#dashboard .tab-panel {
  max-width: 78rem;
  animation: none;
}

#dashboard .svc-hero {
  max-width: 62rem;
  margin-block-end: clamp(2rem, 4.5vw, 3.5rem);
}

#dashboard .svc-title {
  font-size: var(--type-display);
  font-weight: 620;
  line-height: 1;
  letter-spacing: -.055em;
}

#dashboard .svc-desc {
  max-width: 68ch;
  color: var(--color-text-secondary);
  font-size: var(--type-body);
  line-height: 1.65;
}

/* Related controls stay close; complete question groups breathe apart. */
#dashboard .tab-panel :is(.fl, .settings-modal-body) { gap: 1.5rem; }
#dashboard .tab-panel :is(.fg, .field-group) { gap: .5rem; }
#dashboard .tab-panel :is(.concierge-block, .tutor-input-card, .resume-section, .dl-select-field) + :is(.concierge-block, .tutor-input-card, .resume-section, .dl-select-field) {
  margin-block-start: 1rem;
}

#dashboard .tab-panel .concierge-block {
  padding: 1.1rem 1.15rem 1.2rem;
  border: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(25, 38, 61, .72), rgba(13, 22, 37, .86));
  box-shadow: var(--shadow-surface);
}

#dashboard .tab-panel .concierge-block:focus-within {
  border-color: transparent;
  box-shadow:
    0 0 0 1px rgba(67, 56, 202, .34),
    0 0 0 4px rgba(67, 56, 202, .09),
    0 18px 42px -26px rgba(0, 0, 0, .82);
}

#dashboard .tab-panel :is(.concierge-q, .flabel, .field-label) {
  color: var(--color-text-primary);
  font-family: var(--h);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.4;
  text-transform: none;
}

#dashboard .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger, .hero-input, .luxury-textarea, .chat-input-wrap) {
  min-width: 0;
  min-height: 48px;
  color: var(--color-text-primary);
  background: rgba(7, 16, 30, .82);
  border: 1px solid var(--color-accent-border);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035);
  font-size: var(--type-body-sm);
  line-height: 1.5;
  transition-property: background-color, border-color, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

#dashboard .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus,
#dashboard .tab-panel .ap-select-trigger:focus-visible,
#dashboard .tab-panel .chat-input-wrap:focus-within {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-color: transparent;
  background: rgba(10, 20, 37, .98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 12px 28px -22px rgba(0, 0, 0, .9);
}

#dashboard .tab-panel :is(input, textarea)::placeholder {
  color: rgba(240, 235, 224, .52);
}

#dashboard .tab-panel :is(.option-row, .tag-row) { gap: .75rem; }

#dashboard :is(.luxury-toggle, .toggle) {
  appearance: none;
  padding: 0;
  font: inherit;
}

#dashboard .tab-panel :is(.opt-pill, .tag) {
  min-height: 44px;
  padding: .62rem .82rem;
  color: var(--color-text-secondary);
  background: rgba(7, 16, 30, .58);
  border: 0;
  border-radius: var(--radius-control);
  box-shadow: 0 0 0 1px var(--color-border-default);
  font-size: var(--type-caption);
  line-height: 1.35;
  transition-property: color, background-color, box-shadow, scale;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}

#dashboard .tab-panel .opt-pill.active,
#dashboard .tab-panel .tag.sel,
#dashboard .tab-panel :is(.opt-pill, .tag)[aria-checked="true"] {
  color: var(--gold-300);
  background: var(--color-accent-bg-subtle);
  border-color: transparent;
  box-shadow: 0 0 0 1px rgba(67, 56, 202, .48), inset 0 1px 0 rgba(255, 255, 255, .045);
}

/* Button hierarchy: one gold primary action, quiet neutral peers. */
#dashboard :is(.ctrl-btn, .svc-cta, .submit-btn, .btn-next, .btn-back, .ps-submit, .chat-send, .chat-suggest, .pb-edit, .mc-action, .tutor-test-start) {
  min-height: 44px;
  border-radius: var(--radius-control);
  font-family: var(--h);
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  touch-action: manipulation;
  transition-property: color, background-color, border-color, box-shadow, scale, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

#dashboard :is(.ctrl-btn, .svc-cta, .submit-btn, .btn-next, .btn-back, .ps-submit, .chat-send, .chat-suggest, .pb-edit, .mc-action, .tutor-test-start):active:not(:disabled) {
  transform: none;
  scale: .96;
}

#dashboard :is(.svc-cta, .submit-btn, .btn-next, .ctrl-btn.primary, .ps-submit, .chat-send, .mc-action.primary) {
  color: var(--color-text-on-accent);
  background: linear-gradient(155deg, var(--gold-300), var(--gold-500) 62%, var(--gold-600));
  border: 1px solid rgba(196, 181, 253, .64);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 10px 24px -18px rgba(67, 56, 202, .75);
}

#dashboard :is(.svc-cta, .submit-btn, .btn-next, .ctrl-btn.primary, .ps-submit, .chat-send, .mc-action.primary):hover {
  transform: none;
}

/* Home and tool-entry cards use the same quiet material as tool outputs. */
#dashboard :is(.progress-section, .school-list-section, .tools-section, .profile-banner) {
  min-width: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(20, 32, 52, .82), rgba(12, 21, 36, .9));
  box-shadow: var(--shadow-surface);
}

#dashboard .hgrid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: .75rem;
}

#dashboard .hcard {
  min-width: 0;
  min-height: 9.25rem;
  padding: 1.05rem;
  border: 0 !important;
  border-radius: 14px;
  background: rgba(7, 16, 30, .52) !important;
  box-shadow: 0 0 0 1px var(--color-border-default) !important;
  transition-property: color, background-color, box-shadow, scale !important;
  transition-duration: 150ms !important;
  transition-timing-function: ease-out !important;
}

#dashboard .hcard:hover {
  transform: none !important;
  background: rgba(67, 56, 202, .055) !important;
  box-shadow: var(--shadow-surface-hover) !important;
}

#dashboard .hcard:active { transform: none !important; scale: .96; }
/*
  Tool-card type.
  The title was 16px at weight 550 — an off-scale size, and a weight the loaded
  Inter Tight (400/500/600/700) cannot render, so the browser was synthesising
  it. It now sits on --type-body at a real 600, which also puts it back below
  the section heading that contains it instead of overpowering it.
  The description ran weight 300 at 13px; light weights disappear at text sizes,
  so it moves to 400. Tracking tightens with size rather than being one value:
  negative on the title, neutral on the description.
*/
#dashboard .hcard h3 {
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.011em;
  text-wrap: balance;
}

#dashboard .hcard p {
  color: var(--color-text-tertiary);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-wrap: pretty;
}

/* The section heading has to outrank the cards beneath it. */
#dashboard .panel-title {
  font-size: var(--type-heading);
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: 1.25;
}

/* Top-level result surfaces. */
#dashboard .tab-panel :is(.svc-out-shell, .out-box, .match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .essay-score-shell, .note-card, .dl-summary, .practice-header) {
  position: relative;
  min-width: 0;
  border: 0;
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, rgba(22, 35, 57, .88), rgba(10, 18, 32, .94));
  box-shadow: var(--shadow-raised);
}

#dashboard .tab-panel :is(.svc-out-shell, .out-box, .match-card, .sc-card, .an-card, .aid-card, .cost-result-card, .essay-score-shell, .note-card, .dl-summary, .practice-header)::before {
  content: '';
  position: absolute;
  inset-block-start: 0;
  inset-inline: 1.25rem;
  z-index: 1;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(196, 181, 253, .62), transparent);
}

#dashboard .tab-panel :is(.match-card, .sc-card, .an-card, .aid-card) {
  cursor: default;
  transition-property: box-shadow, background-color;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

#dashboard .tab-panel :is(.match-card, .sc-card, .an-card, .aid-card):focus-within {
  box-shadow: var(--shadow-surface-hover), 0 0 0 3px rgba(67, 56, 202, .09);
}

#dashboard .tab-panel :is(.match-card.open, .sc-card.open, .an-card.open, .aid-card.open) {
  background: linear-gradient(180deg, rgba(26, 40, 64, .94), rgba(10, 18, 32, .98));
  box-shadow: var(--shadow-surface-hover), 0 22px 54px -34px rgba(67, 56, 202, .44);
}

/* Expandable-card headers are real buttons after progressive enhancement. */
#dashboard .tab-panel :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header) {
  appearance: none;
  width: 100%;
  min-width: 0;
  min-height: 78px;
  padding: 1.15rem 1.25rem;
  color: inherit;
  background: rgba(240, 235, 224, .012);
  border: 0;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: inset 0 -1px 0 var(--color-border-separator);
  font: inherit;
  text-align: start;
  cursor: pointer;
  touch-action: manipulation;
  transition-property: background-color, color;
  transition-duration: 120ms;
  transition-timing-function: ease-out;
}

#dashboard .tab-panel :is(.match-card:not(.open), .sc-card:not(.open), .an-card:not(.open), .aid-card:not(.open)) > :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header) {
  border-radius: var(--radius-card);
  box-shadow: none;
}

#dashboard .tab-panel :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header):active {
  background: rgba(67, 56, 202, .09);
}

#dashboard .tab-panel :is(.mc-body-inner, .sc-body, .an-body-inner, .aid-body-inner, .svc-out-body, .out-inner) {
  min-width: 0;
  padding: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--color-text-secondary);
  font-size: var(--type-body-sm);
  line-height: 1.65;
}

#dashboard .tab-panel :is(.mc-name, .sc-name, .an-name, .aid-school-name, .cost-result-school, .note-card-title, .dl-summary-title) {
  color: var(--color-text-primary);
  font-family: var(--h);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 620;
  letter-spacing: -.025em;
  line-height: 1.25;
  overflow-wrap: break-word;
  text-wrap: balance;
}

#dashboard .tab-panel :is(.mc-detail-grid, .an-detail-grid, .aid-summary-strip, .cost-metric-strip) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr));
  gap: .75rem;
}

#dashboard .tab-panel :is(.mc-detail-box, .an-detail-box, .aid-stat-box, .cost-metric-box, .term-box, .qbox, .eval-row) {
  min-width: 0;
  border: 0;
  border-radius: 12px;
  background: rgba(7, 16, 30, .58);
  box-shadow: 0 0 0 1px var(--color-border-subtle), inset 0 1px 0 rgba(255, 255, 255, .025);
}

#dashboard .tab-panel :is(.mc-detail-box, .an-detail-box, .aid-stat-box, .cost-metric-box) {
  min-height: 5.25rem;
  padding: .9rem 1rem;
}

#dashboard .tab-panel :is(.mc-detail-label, .an-detail-label, .aid-stat-key, .cost-metric-label, .mc-section-label, .an-section-label, .aid-section-label, .sc-section-title) {
  color: var(--color-text-disabled);
  font-family: var(--h);
  font-size: var(--type-label);
  font-weight: 650;
  letter-spacing: .055em;
  line-height: 1.35;
  text-transform: uppercase;
}

#dashboard .tab-panel :is(.mc-detail-value, .an-detail-value, .aid-stat-val, .cost-metric-value) {
  margin-block-start: .35rem;
  color: var(--color-text-primary);
  font-size: var(--type-body-sm);
  font-weight: 520;
  line-height: 1.5;
}

#dashboard .tab-panel :is(.badge, .sc-cat, .sc-effort, .sc-renewable, .an-badge, .dl-item-tag, .mc-tag) {
  max-width: 100%;
  line-height: 1.35;
  overflow-wrap: break-word;
  white-space: normal;
}

#dashboard .tab-panel :is(.mc-score-bar, .mc-fit-track, .an-odds-track, .aid-bar-track, .progress-bar-track) {
  overflow: hidden;
  background: rgba(240, 235, 224, .08);
  border-radius: 999px;
}

/* Secondary result rows never pretend to be draggable or elevated. */
#dashboard .tab-panel :is(.deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox, .eval-row) {
  min-width: 0;
  border: 0;
  border-radius: 14px;
  background: rgba(12, 22, 38, .76);
  box-shadow: 0 0 0 1px var(--color-border-subtle);
  transition-property: background-color, box-shadow, color, scale;
  transition-duration: 140ms;
  transition-timing-function: ease-out;
}

#dashboard .tab-panel :is(.deadline-item, .dl-item, .path-step, .sch-card, .tutor-test-card, .term-box, .qbox, .eval-row):hover {
  transform: none;
  border-color: transparent;
  background: rgba(14, 25, 43, .84);
  box-shadow: 0 0 0 1px var(--color-border-default);
}

#dashboard .tab-panel .tutor-note-card {
  min-height: 52px;
  padding: .9rem 1rem;
  text-align: start;
}

#dashboard .tab-panel .tutor-note-card:hover {
  transform: none;
  background: var(--color-accent-bg-subtle);
  box-shadow: 0 0 0 1px var(--color-accent-border);
}

#dashboard .tab-panel .tutor-note-card:active { scale: .96; }

#dashboard :is(.subject-btn, .choice-btn, .ps-choice, .ps-dot, .calc-btn, .cost-save-btn, .tmpl-btn, .sl-status-btn, .ev-item, .dl-check, .tutor-btn-ghost, .tutor-sel-card, .tutor-binder-tab, .tutor-binder-add, .tutor-suggestion-chip, .recent-q, .resume-tmpl-card, .school-card, .upgrade-btn) {
  transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}

#dashboard :is(.subject-btn, .choice-btn, .ps-choice, .ps-dot, .calc-btn, .cost-save-btn, .tmpl-btn, .sl-status-btn, .ev-item, .dl-check, .tutor-btn-ghost, .tutor-sel-card, .tutor-binder-tab, .tutor-binder-add, .tutor-suggestion-chip, .recent-q, .resume-tmpl-card, .upgrade-btn):active:not(:disabled) {
  transform: none;
  scale: .96;
}

#dashboard :is(.school-card, .ev-item, .tutor-sel-card):hover {
  transform: none;
}

#dashboard :is(.progress-bar-inner, .wc-fill, .mc-score-fill, .mc-fit-fill, .an-odds-fill, .aid-bar-fill) {
  transition-property: width, background-color;
  transition-duration: 400ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

#dashboard .tab-panel :is(.mc-action-row, .settings-row, .modal-action-row, .tutor-modal-actions) {
  gap: .75rem;
}

#dashboard .tab-panel .mc-action-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
}

/* Modal state remains visually tied to the trigger and keeps controls reachable. */
.app-modal {
  padding: clamp(.75rem, 3vw, 1.5rem);
  opacity: 0;
  background: var(--color-bg-overlay);
  overscroll-behavior: contain;
  animation: none;
  transition-property: opacity;
  transition-duration: 180ms;
  transition-timing-function: ease-out;
}

.app-modal .app-modal-box {
  opacity: 0;
  border: 0;
  border-radius: var(--radius-panel);
  background: linear-gradient(180deg, rgba(24, 37, 60, .98), rgba(9, 17, 31, .99));
  box-shadow: 0 0 0 1px var(--color-border-strong), 0 48px 120px rgba(0, 0, 0, .58);
  transform: translateY(10px) scale(.985);
  animation: none;
  transition-property: opacity, transform;
  transition-duration: 240ms;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.app-modal.is-open { opacity: 1; }
.app-modal.is-open .app-modal-box { opacity: 1; transform: none; }
.app-modal.is-closing { opacity: 0; }
.app-modal.is-closing .app-modal-box { opacity: 0; transform: translateY(8px) scale(.99); }

.app-modal .app-modal-close {
  width: 44px;
  height: 44px;
  color: var(--color-accent-text);
  background: var(--color-bg-sunken);
  border: 0;
  box-shadow: 0 0 0 1px var(--color-accent-border);
}

.app-modal .app-modal-close:active { scale: .96; }

.settings-msg[role="status"] {
  min-height: 1.25rem;
  color: var(--color-text-tertiary);
  font-size: var(--type-caption);
  line-height: 1.45;
}

@media (hover: hover) {
  #dashboard .tab-panel :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header):hover {
    background: rgba(67, 56, 202, .055);
  }

  #dashboard :is(.svc-cta, .submit-btn, .btn-next, .ctrl-btn.primary, .ps-submit, .chat-send, .mc-action.primary):hover {
    background: linear-gradient(155deg, #f4dda0, var(--color-accent-solid-hover) 62%, var(--gold-500));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 14px 30px -20px rgba(67, 56, 202, .82);
  }
}

@media (hover: none) {
  #dashboard :is(.hcard, .match-card, .sc-card, .an-card, .aid-card, .deadline-item, .dl-item, .path-step, .sch-card, .tutor-note-card, .tutor-test-card, .term-box, .qbox, .eval-row):hover {
    transform: none !important;
  }
}

@media (max-width: 64rem) {
  #dashboard .content {
    padding-inline: clamp(1rem, 3vw, 1.65rem);
  }
}

@media (min-width: 64.0625rem) {
  #dashboard .content {
    margin-left: 0;
    margin-inline-start: var(--app-sidebar-width);
  }
}

@media (min-width: 48.0625rem) and (max-width: 64rem) {
  #dashboard .content {
    margin-left: 0 !important;
    margin-inline-start: var(--app-sidebar-width) !important;
  }
}

@media (max-width: 48rem) {
  #dashboard .content {
    margin-inline-start: 0 !important;
    padding-inline: max(.9rem, env(safe-area-inset-left)) max(.9rem, env(safe-area-inset-right));
  }

  #dashboard .mobile-nav {
    padding-block-end: max(.45rem, env(safe-area-inset-bottom));
    background: rgba(8, 14, 26, .92);
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
  }

  #dashboard :is(.ham, .tlogo, .t-plan, .profile-btn, .logout-btn) { min-height: 44px; }
  #dashboard .mn-item { min-width: 44px; min-height: 48px; }
  #dashboard .tab-panel :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select, .ap-select-trigger) { font-size: 16px; }
  #dashboard .tab-panel :is(.mc-header, .sc-card-header, .an-card-header, .aid-card-header) { padding: 1rem; }
  #dashboard .tab-panel :is(.mc-body-inner, .sc-body, .an-body-inner, .aid-body-inner, .svc-out-body, .out-inner) { padding: 1rem; }
  #dashboard .tab-panel :is(.mc-action-row, .settings-row, .modal-action-row, .tutor-modal-actions) { grid-template-columns: minmax(0, 1fr); }
  #dashboard .tab-panel :is(.mc-action, .settings-row .ctrl-btn, .modal-action-row .ctrl-btn) { width: 100%; }

  [dir="rtl"] #dashboard .sidebar { transform: translateX(100%); }
  [dir="rtl"] #dashboard .sidebar.open,
  [dir="rtl"] #dashboard .sidebar.mobile-open { transform: translateX(0); }
}

[dir="rtl"] #dashboard .svc-back-btn svg,
[dir="rtl"] #dashboard .icon-directional { scale: -1 1; }

@media (max-width: 30rem) {
  #dashboard .topbar .t-user { display: none; }
  #dashboard .topbar-right { margin-inline-start: auto; }
  #dashboard .svc-title { max-width: 16ch; font-size: clamp(2rem, 11vw, 2.85rem); }
  #dashboard .tab-panel :is(.mc-detail-grid, .an-detail-grid, .aid-summary-strip, .cost-metric-strip) { grid-template-columns: minmax(0, 1fr); }
  #dashboard .tab-panel :is(.option-row, .tag-row) { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-contrast: more) {
  :root {
    --color-border-subtle: rgba(240, 235, 224, .2);
    --color-border-default: rgba(240, 235, 224, .28);
    --color-border-strong: rgba(240, 235, 224, .4);
    --color-text-secondary: rgba(240, 235, 224, .94);
    --color-text-tertiary: rgba(240, 235, 224, .86);
    --color-text-disabled: rgba(240, 235, 224, .74);
  }
}

@media (forced-colors: active) {
  .dashboard-skip-link,
  #dashboard :is(button, [role="button"], [role="radio"], [role="checkbox"], [role="switch"], input, textarea, select):focus-visible,
  .app-modal :is(button, a, input, textarea, select):focus-visible {
    outline-color: Highlight;
  }
}

/*
  Touch devices synthesize :hover on tap and leave it applied until the next
  tap elsewhere, so a lift or slide meant as pointer feedback stays stuck to
  whatever the user last touched. Color and border feedback is kept — it reads
  as selection — while the motion half is reverted where there is no pointer.
*/
@media (hover: none) {
  #dashboard .hcard:hover,
  .btn-next:hover,
  .chat-send:hover,
  .eval-row:hover,
  .login-btn:hover,
  .login-btn:not(:disabled):hover,
  .match-card:hover,
  .path-step:hover,
  .primary:hover,
  .ps-submit:hover,
  .sc-card:hover,
  .sch-card:hover,
  .school-card:hover,
  .subject-btn:hover,
  .submit-btn:hover,
  .tutor-binder-add:hover,
  .tutor-btn-primary:hover,
  .tutor-info-card:hover,
  .tutor-note-card:hover,
  .tutor-sel-card:hover,
  .tutor-suggestion-chip:hover,
  .tutor-test-card:hover,
  .tutor-test-start:hover,
  .upgrade-btn:hover {
    transform: none !important;
  }

  .login-btn:not(:disabled):hover::before {
    transform: translateX(-100%);
  }

  .tutor-binder-tab:hover {
    width: 43px;
  }
}

/*
  iOS Safari zooms the whole page when a focused input renders below 16px, which
  throws the layout off-centre mid-form. The designed sizes are kept on pointer
  viewports and only the phone breakpoint is raised to the threshold.
*/
@media (max-width: 640px) {
  .login-box .linput,
  #dashboard :is(.finput, .fselect, .ftextarea, .ps-fr-area, .chat-input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select) {
    font-size: 16px;
  }
}

/*
  Type floor.
  Thirty-four label classes had hard-coded sizes between 8.96px and 11.9px,
  well under the 12px the scale already defines as --type-label. They are
  raised to that token here rather than in each origin rule, because the cause
  is one missing convention rather than thirty-four independent decisions.
  Miniature document previews are excluded: text inside .rtc-preview simulates
  a page at thumbnail scale, so it is decorative rather than read.
*/
#dashboard :is(
  .q-num, .svc-out-label, .ih-label, .cost-ticker-label, .interview-room-label,
  .dl-select-label, .ps-score-label, .svc-breadcrumb-sep, .svc-breadcrumb-cur,
  .resume-tmpl-active-label, .pc-label, .app-eyebrow, .svc-label, .stitle,
  .pc-stat-label, .ctrl-btn, .wc-strip-num, .sl-count, .tutor-example-label,
  .hero-input-hint, .panel-meta, .ltl-sub, .tutor-side-title, .svc-cta-note,
  .svc-cta, .pt-step, .svc-profile-pill, .priority-name, .practice-session-meta,
  .flabel, .svc-back-btn, .rtc-name
):not(.rtc-preview *) {
  font-size: var(--type-label);
}

/*
  The four panel-header actions previously carried inline font-size/padding to
  read as secondary. The size is now the shared label token — a control label
  is not the place to go below the floor — and only the padding stays compact,
  so the density that made them secondary survives without shrinking the text.
*/
#dashboard .ctrl-btn--compact {
  padding: .34rem .78rem;
}

/*
  The sidebar and mobile nav rows are <button> elements for keyboard support,
  but neither reset the user-agent button face, so all twenty rendered on an
  opaque grey (#6b6b6b in Chrome's dark scheme) against the navy chrome and
  dropped cream label text to 4.48:1. The active gradient is left untouched.
*/
#dashboard .nav-item,
#dashboard .mn-item {
  background: none;
  border: 0;
  font-family: inherit;
}

#dashboard .nav-item {
  border-left: 2px solid transparent;
  width: 100%;
  text-align: left;
}

/*
  Tool cards align to one edge.
  The icon, title and description all start at the same inline edge instead of
  the icon hanging left while the text centres itself. Centred text in a card
  this narrow gives every line two ragged edges, which is what made the grid
  read as unsettled: thirteen cards, no shared axis to scan down.
*/
#dashboard .hcard,
#dashboard .hcard h3,
#dashboard .hcard p {
  text-align: start;
}

#dashboard .hcard .ci {
  margin-inline-start: 0;
}

/* ==========================================================================
   HOME — one elevated status surface, everything else grouped by space
   The screen previously carried seven near-identical bordered rectangles,
   including a bordered panel wrapped around thirteen bordered cards. Borders
   were doing the grouping that space should do, which is what made it read as
   a template. Now exactly one surface is raised (the status card, because it
   is the most important thing on the screen) and the rest are separated by
   whitespace and headings.
   ========================================================================== */

#dashboard .home-status {
  display: grid;
  gap: 1.15rem;
  margin-bottom: 2.25rem;
  padding: 1.25rem 1.35rem 1.35rem;
  border: 0;
  border-radius: var(--radius-card);
  background: rgba(7, 16, 30, .55);
  /* Elevation from layered shadow rather than a 1px outline. */
  box-shadow:
    0 0 0 1px rgba(240, 235, 224, .06),
    0 1px 2px rgba(0, 0, 0, .3),
    0 8px 24px -12px rgba(0, 0, 0, .45);
}

#dashboard .hs-identity {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding-bottom: 1.15rem;
  /* The one line that stays: it separates two distinct kinds of information
     inside a single surface, which is structural rather than decorative. */
  border-bottom: 1px solid var(--color-border-subtle, rgba(240, 235, 224, .07));
}

#dashboard .hs-who { min-width: 0; flex: 1; }
#dashboard .hs-identity .pb-edit { flex: none; }

#dashboard .hs-progress { display: grid; gap: .6rem; }
#dashboard .hs-progress .progress-top { margin: 0; }
#dashboard .hs-progress .progress-title { margin: 0; }

/* Remaining work only. Ten chips where nine say "done" is a wall, not a status;
   the count already lives in .progress-label directly above. */
#dashboard .pt-steps { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .15rem; }
#dashboard .pt-step.pt-done { display: none; }

#dashboard .pt-steps::before {
  content: 'Next up';
  flex: 0 0 100%;
  font-family: var(--h);
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-disabled);
}
/* Nothing left to do — say so instead of rendering an empty labelled row. */
#dashboard .pt-steps:not(:has(.pt-step:not(.pt-done)))::before {
  content: 'All steps complete';
  color: var(--color-success-text, #91d0aa);
}

/* Tools: heading plus grid, no container. */
#dashboard .tools-section {
  margin-bottom: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#dashboard .tools-section .panel-head { margin-bottom: .9rem; }

/* Saved lists: grouped by their heading and the gap, not by a box each. */
#dashboard .saved-grid { gap: 1.75rem 1.5rem; }
#dashboard .saved-grid > .school-list-section {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#dashboard .sl-header {
  padding-bottom: .6rem;
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--color-border-subtle, rgba(240, 235, 224, .07));
}
#dashboard .sl-empty {
  margin: 0;
  padding: .75rem 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--type-caption);
  font-weight: 400;
  line-height: 1.55;
  text-wrap: pretty;
}

/* Narrow widths: let the identity row wrap rather than squeezing the name and
   the button into the same line as the avatar. */
@media (max-width: 560px) {
  #dashboard .hs-identity { flex-wrap: wrap; }
  #dashboard .hs-who { flex: 1 1 100%; order: 2; }
  #dashboard .hs-identity .pb-edit { order: 3; }
}