/* =========================================================
   Prompt Bank — Design System
   Aesthetic: Bold, playful, Gen-Z.
   Display: Bricolage Grotesque (variable, expressive)
   Body:    Space Grotesk
   Mono:    JetBrains Mono
   Default palette ("Blue sea"):
     bg     #ffffff  (white)
     ink    #0A2540  (dark blue)
     pop    #1E5EFF  (deep blue)
     hot    #4A90E2  (lighter blue)
     mute   #7b8793  (muted gray)
   ========================================================= */

:root{
  --bg:        #ffffff; /* white (used for elements / text on dark backgrounds) */
  --bg-alt:    #F7F9FC; /* very light page background */
  --ink:       #0A2540; /* headings / dark blue */
  --ink-soft:  #4F5B67; /* body text medium gray */
  --mute:      #7b8793; /* muted gray for labels */
  --line:      #E6ECF2; /* light border for cards */
  --pop:       #1E5EFF; /* primary deep blue */
  --hot:       #4A90E2; /* secondary lighter blue */
  --cool:      #6a5cff;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --font-display: "Bricolage Grotesque", "Space Grotesk", system-ui, sans-serif;
  --font-body:    "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
button{ font: inherit; color: inherit; }
input,textarea{ font: inherit; color: inherit; }

.app-shell{
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background: var(--ink);
  color: var(--bg);
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  border-right: 1px solid var(--ink);
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.brand-mark{
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--pop);
  display:grid; place-items:center;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  transform: rotate(-6deg);
}
.nav-section-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,236,226,0.45);
  margin: 0 0 10px;
}
.nav-list{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  appearance:none; border:0; background:transparent;
  color: rgba(239,236,226,0.7);
  text-align:left;
  padding: 10px 12px;
  border-radius: 12px;
  cursor: default;
  display: flex; align-items:center; gap:12px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 500;
  transition: background .15s, color .15s, transform .15s;
}
.nav-item:hover{ background: rgba(255,255,255,0.04); color: var(--bg); }
.nav-item.active{
  background: var(--pop);
  color: var(--ink);
  font-weight: 600;
}
.nav-item .num{
  font-family: var(--font-mono);
  font-size: 11px;
  opacity: 0.55;
  width: 18px;
}
.nav-item.active .num{ opacity: 0.6; }
.nav-item .check{
  margin-left:auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pop);
  opacity: 0;
  transition: opacity .15s;
}
.nav-item.done .check{ opacity: 0.9; }
.nav-item.done{ color: rgba(239,236,226,0.45); }
.nav-item.done .num{ text-decoration: line-through; }

.sidebar .student-card{
  margin-top: auto;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px;
  font-size: 13px;
}
.student-card .row{ display:flex; align-items:center; gap:10px; }
.student-card .avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pop), var(--hot));
  color: var(--ink);
  display:grid; place-items:center;
  font-family: var(--font-display);
  font-weight: 700;
}
.student-card .name{ font-weight:600; color: var(--bg); }
.student-card .meta{ color: rgba(239,236,226,0.55); font-size: 11.5px; font-family: var(--font-mono); }
.streak-dots{ display:flex; gap:4px; margin-top:10px; }
.streak-dots span{
  width: 10px; height: 10px; border-radius: 3px;
  background: rgba(255,255,255,0.12);
}
.streak-dots span.on{ background: var(--pop); }
.streak-dots span.today{ background: var(--pop); box-shadow: 0 0 0 3px rgba(30,94,255,0.18); }

/* ---------- Main ---------- */
.main{
  padding: 36px 56px 80px;
  position: relative;
  min-height: 100vh;
}

.main-top{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: 18px;
}
.crumb{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute);
}
.crumb b{ color: var(--ink); font-weight: 600; }
.top-actions{ display:flex; gap:10px; }
.chip-mini{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  display: inline-flex; align-items:center; gap:6px;
}
.chip-mini .live-dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--hot);
  box-shadow: 0 0 0 0 var(--hot);
  animation: pulse 1.6s infinite;
}
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(30,94,255,0.6);}
  70%{ box-shadow: 0 0 0 8px rgba(30,94,255,0);} 
  100%{ box-shadow: 0 0 0 0 rgba(30,94,255,0);} 
}

/* shared big display H1 */
.huge{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 6.4vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  margin: 0;
}
.huge .ital{
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-weight: 400;
}
.huge .pop{ color: var(--ink); background: var(--pop); padding: 0 .15em; border-radius: 12px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

.eyebrow{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}

/* buttons */
.btn{
  appearance:none; border:0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: default;
  display: inline-flex; align-items:center; gap:10px;
  transition: transform .15s ease, background .15s ease, color .15s;
}
.btn-primary{ background: var(--pop); color: var(--bg); }
.btn-primary:hover{ background: #154de6; color: var(--bg); transform: translateY(-1px); }
.btn-pop{ background: var(--pop); color: var(--ink); }
.btn-pop:hover{ background: var(--ink); color: var(--pop); transform: translateY(-1px); }
.btn-ghost{ background: transparent; border:1px solid var(--line); color: var(--ink); }
.btn-ghost:hover{ background: var(--bg-alt); }
.btn .arrow{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  display:grid; place-items:center;
  font-size: 13px;
}
.btn-pop .arrow,.btn-ghost .arrow{ background: rgba(0,0,0,0.06); }

/* card primitives */
.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px;
}
.card-soft{
  background: var(--bg-alt);
  border-radius: var(--r-md);
  padding: 22px;
  border: 1px solid transparent;
}
.card-ink{
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--r-md);
  padding: 22px;
}

/* tag */
.tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--bg-alt);
  color: var(--ink-soft);
  display: inline-flex; align-items:center; gap:6px;
}
.tag-pop{ background: var(--pop); color: var(--ink); }
.tag-hot{ background: var(--hot); color: #fff; }
.tag-ink{ background: var(--ink); color: var(--bg); }

/* ============= ONBOARDING ============= */
.onboard{
  max-width: 1180px;
  margin: 0 auto;
  padding-top: 30px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
  min-height: 80vh;
}
.onboard-left .stamp{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--pop);
  padding: 7px 12px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.onboard-left p.lead{
  margin: 22px 0 28px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 38ch;
}
.school-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.school-card{
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 18px;
  padding: 16px;
  cursor: default;
  transition: transform .18s, border-color .18s, background .18s;
  position: relative;
}
.school-card:hover{ transform: translateY(-2px); border-color: var(--ink); }
.school-card.selected{
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.school-card .crest{
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--bg-alt);
  display:grid; place-items:center;
  font-family: var(--font-display);
  font-weight: 800;
  margin-bottom: 12px;
}
.school-card.selected .crest{ background: var(--pop); color: var(--ink); }
.school-card .name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
}
.school-card .field{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-top: 2px;
}
.school-card.selected .field{ color: rgba(239,236,226,0.55); }
.school-card .accept{
  font-family: var(--font-mono);
  font-size: 11px;
  margin-top: 10px;
  color: var(--mute);
}
.school-card.selected .accept{ color: rgba(239,236,226,0.55); }
.school-card .check{
  position:absolute; top: 14px; right: 14px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pop);
  display:grid; place-items:center;
  color: var(--ink);
  font-size: 13px;
  opacity: 0; transform: scale(.7);
  transition: opacity .18s, transform .18s;
}
.school-card.selected .check{ opacity:1; transform: scale(1); }

.onboard-right{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 520px;
  margin-left: auto;
  overflow: hidden;
  border-radius: 24px;
}
.collage{
  position: relative;
  width: 100%;
  height: 100%;
}
.collage .blob{
  position:absolute;
  inset: 5% 5% 5% 5%;
  background: var(--pop);
  border-radius: 46% 54% 60% 40% / 50% 60% 40% 50%;
  filter: blur(0.5px);
}
.collage .ring{
  position:absolute;
  inset: 12% 12% 12% 12%;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.collage .stamp1{
  position:absolute; left: 8%; top: 10%;
  background: var(--ink); color: var(--bg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 7px 12px;
  border-radius: 999px;
  transform: rotate(-8deg);
}
.collage .stamp2{
  position:absolute; right: 6%; top: 28%;
  background: var(--hot); color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 999px;
  transform: rotate(6deg);
}
.collage .quote{
  position:absolute; left: 10%; bottom: 14%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 13px;
  line-height: 1.4;
  max-width: 72%;
  transform: rotate(-2deg);
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
.collage .quote .who{
  display:block; margin-top: 6px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.collage .badge{
  position:absolute; right: 10%; bottom: 6%;
  width: 92px; height: 92px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--pop);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  display:grid; place-items:center; text-align:center;
  line-height: 1;
  transform: rotate(8deg);
  padding: 10px;
}

/* ============= PROMPT SCREEN ============= */
.prompt-wrap{
  max-width: 920px;
  margin: 0 auto;
  padding-top: 10px;
}
.prompt-meta{
  display:flex; align-items:center; gap:10px;
  margin-bottom: 18px;
}
.prompt-q{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 28px;
  text-wrap: balance;
}
.prompt-q .underline{
  background-image: linear-gradient(transparent 60%, var(--pop) 60%);
  padding: 0 4px;
}
.prompt-input-wrap{
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 24px;
  padding: 22px 22px 16px;
  position: relative;
  transition: border-color .18s;
}
.prompt-input-wrap:focus-within{ border-color: var(--ink); }
.prompt-input{
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.55;
  resize: none;
  min-height: 180px;
  color: var(--ink);
}
.prompt-input::placeholder{ color: var(--mute); }
.prompt-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top: 14px;
}
.prompt-tools{ display:flex; gap:8px; }
.tool-btn{
  appearance:none; background: var(--bg-alt); border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 34px; height: 34px;
  border-radius: 10px;
  display:grid; place-items:center;
  cursor: default; font-size: 14px;
}
.tool-btn:hover{ background: var(--pop); color: var(--ink); border-color: transparent; }
.word-count{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--mute);
  margin-right: 14px;
}

.starter-chips{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 22px;
}
.starter-chip{
  appearance:none; border: 1px solid var(--line); background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 13.5px;
  color: var(--ink-soft);
  cursor: default;
  transition: all .15s;
}
.starter-chip:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }

.prompt-side{
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ============= ANALYZING ============= */
.analyze{
  max-width: 760px;
  margin: 60px auto 0;
  text-align: center;
}
.analyze h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(36px, 4.4vw, 56px);
  letter-spacing: -0.025em;
  margin: 22px 0 8px;
}
.analyze p{
  color: var(--ink-soft);
  font-size: 17px;
  margin: 0 auto 32px;
  max-width: 50ch;
}
.analyze-orb{
  width: 220px; height: 220px;
  border-radius: 50%;
  margin: 0 auto;
  background:
    radial-gradient(circle at 30% 30%, var(--pop), transparent 60%),
    radial-gradient(circle at 70% 70%, var(--hot), transparent 60%),
    var(--ink);
  position: relative;
  animation: orb-spin 8s linear infinite;
  box-shadow: 0 30px 80px rgba(0,0,0,0.18);
}
.analyze-orb::after{
  content:""; position: absolute; inset: 8px;
  border-radius: 50%;
  background: var(--bg);
  mix-blend-mode: lighten;
  opacity: 0.0;
}
@keyframes orb-spin{ to{ transform: rotate(360deg);} }
.analyze-steps{
  margin-top: 30px;
  display: grid;
  gap: 10px;
  max-width: 460px;
  margin-inline: auto;
}
.an-step{
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  font-size: 14.5px;
  text-align:left;
  opacity: 0.4;
  transition: opacity .25s, background .25s, transform .25s;
}
.an-step.active{ opacity: 1; background: var(--ink); color: var(--bg); border-color: var(--ink); transform: translateX(2px); }
.an-step.done{ opacity: 0.9; }
.an-step .ico{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--bg-alt);
  display:grid; place-items:center;
  font-family: var(--font-mono);
  font-size: 11px;
  flex-shrink: 0;
}
.an-step.active .ico{ background: var(--pop); color: var(--ink); }
.an-step.done .ico{ background: var(--pop); color: var(--ink); }

/* ============= MIRROR ============= */
.mirror{
  max-width: 1180px;
  margin: 0 auto;
}
.mirror-top{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-bottom: 36px;
}
.archetype-card{
  background: var(--ink);
  color: var(--bg);
  border-radius: 28px;
  padding: 32px;
  position: relative;
  overflow: hidden;
}
.archetype-card .you-are{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(239,236,226,0.55);
}
.archetype-card .name{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(54px, 6.6vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 14px 0 8px;
}
.archetype-card .name .accent{ color: var(--pop); }
.archetype-card .tagline{
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  line-height: 1.3;
  color: rgba(239,236,226,0.85);
  max-width: 32ch;
  margin: 0 0 22px;
}
.trait-pills{ display:flex; flex-wrap: wrap; gap: 8px; }
.trait-pills .tag{ background: rgba(255,255,255,0.1); color: var(--bg); }
.trait-pills .tag.lead{ background: var(--pop); color: var(--ink); }
.archetype-card .stamp-num{
  position: absolute;
  right: -10px; bottom: -30px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 240px;
  line-height: 1;
  color: rgba(255,255,255,0.04);
  letter-spacing: -0.05em;
}

.radar-card{
  background: #fff;
  border-radius: 28px;
  border: 1px solid var(--line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radar-head{
  display:flex; align-items:baseline; justify-content:space-between;
}
.radar-head h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.02em;
}
.radar-key{ display:flex; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.radar-key .dot{ display:inline-block; width:8px; height:8px; border-radius: 50%; vertical-align: middle; margin-right: 5px; }
.radar-key .dot.you{ background: var(--ink); }
.radar-key .dot.school{ background: var(--hot); }

.mirror-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.insight-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
  display:flex; flex-direction:column; gap: 10px;
  min-height: 220px;
}
.insight-card h4{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin: 0;
  letter-spacing: -0.02em;
}
.insight-card p{
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.insight-card.gap{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.insight-card.gap h4{ color: var(--hot); }
.insight-card.gap p{ color: rgba(239,236,226,0.8); }
.insight-card.win h4 .em{ background: var(--pop); padding: 0 4px; }

.fit-bar{
  display:flex; flex-direction: column; gap:6px;
  margin-top: auto;
}
.fit-bar .label{
  display:flex; justify-content:space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.fit-bar .bar{
  height: 8px; background: var(--bg-alt);
  border-radius: 999px; overflow:hidden; position:relative;
}
.fit-bar .fill{
  position:absolute; left:0; top:0; bottom:0;
  background: var(--ink);
  border-radius: 999px;
}
.insight-card.gap .bar{ background: rgba(255,255,255,0.1); }
.insight-card.gap .fill{ background: var(--hot); }

/* ============= AUTOFILL ============= */
.autofill{
  max-width: 1280px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 28px;
}
.application-doc{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  position: relative;
  min-height: 720px;
}
.doc-head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 22px;
}
.doc-head .doc-title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.doc-head .doc-sub{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mute);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc-section{ margin-bottom: 24px; }
.doc-section .field-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 6px;
  display:flex; align-items:center; gap: 8px;
}
.doc-section .field-label .ai{
  background: var(--pop);
  color: var(--ink);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
}
.doc-section .field-value{
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--ink);
  position: relative;
}
.doc-section.typing .field-value::after{
  content:"|";
  display: inline-block;
  margin-left: 1px;
  animation: blink 0.9s step-end infinite;
  color: var(--ink);
}
@keyframes blink{ 50%{ opacity: 0; } }

.field-value .hl{
  background: var(--pop);
  padding: 0 2px;
  border-radius: 3px;
}
.field-value .hl-soft{
  background: rgba(30,94,255,0.35);
  padding: 0 2px;
  border-radius: 3px;
}

.angle-card{
  background: var(--ink);
  color: var(--bg);
  border-radius: 22px;
  padding: 24px;
  position: sticky;
  top: 30px;
  align-self: start;
}
.angle-card .eyebrow{
  color: var(--pop);
}
.angle-card h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  margin: 8px 0 4px;
  letter-spacing: -0.025em;
}
.angle-card .angle-name{
  font-family: "Instrument Serif", serif;
  font-style: italic;
  font-size: 22px;
  margin: 0 0 18px;
  color: var(--pop);
}
.angle-card p{
  color: rgba(239,236,226,0.85);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 18px;
}
.angle-list{ display: flex; flex-direction: column; gap: 8px; }
.angle-item{
  background: rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px 14px;
  display:flex; gap: 12px; align-items: flex-start;
  font-size: 13.5px;
  line-height: 1.5;
}
.angle-item .num{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pop);
  flex-shrink: 0;
}
.angle-progress{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; justify-content:space-between;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(239,236,226,0.6);
}
.angle-progress b{ color: var(--pop); font-weight: 500; }

/* ============= DASHBOARD ============= */
.dash{
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
}
.greet{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 4.4vw, 60px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.greet .ital{ font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; }
.dash-sub{ color: var(--mute); margin: 0 0 24px; font-size: 16px; }

.dash-hero{
  background: var(--ink);
  color: var(--bg);
  border-radius: 28px;
  padding: 30px 32px;
  margin-bottom: 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.dash-hero::before{
  content:""; position:absolute;
  right:-50px; top:-50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: var(--pop);
  filter: blur(40px);
  opacity: 0.45;
}
.dash-hero .label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pop);
  margin-bottom: 8px;
}
.dash-hero h2{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  max-width: 22ch;
  line-height: 1.05;
}
.dash-hero p{
  color: rgba(239,236,226,0.75);
  margin: 0;
  font-size: 15px;
  max-width: 40ch;
}
.dash-hero .cta{
  position: relative;
  z-index: 1;
}

.metrics{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
.metric{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 18px;
}
.metric .lbl{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-transform: uppercase;
}
.metric .val{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-top: 4px;
}
.metric .delta{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  margin-top: 6px;
}
.metric .delta.up{ color: var(--pop); }

.dash-list{
  background: #fff;
  border-radius: 22px;
  border: 1px solid var(--line);
  padding: 22px 22px 8px;
}
.dash-list h3{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 16px;
  letter-spacing: -0.02em;
  display:flex; justify-content: space-between; align-items: baseline;
}
.dash-list h3 .more{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mute);
  text-transform: uppercase;
  font-weight: 500;
  cursor: default;
}
.ec-row{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}
.ec-row:first-of-type{ border-top: 0; }
.ec-row .ico{
  width: 56px; height: 56px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  background: var(--bg-alt);
}
.ec-row.high .ico{ background: var(--pop); }
.ec-row.med .ico{ background: var(--ink); color: var(--pop); }
.ec-row.low .ico{ background: var(--bg-alt); color: var(--ink-soft); }
.ec-row .name{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.015em;
}
.ec-row .meta{
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.ec-row .meta .lift{
  color: var(--pop);
  font-family: var(--font-mono);
  font-weight: 500;
}
.ec-row .add{
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: default;
  font-size: 18px;
  font-family: var(--font-mono);
  display:grid; place-items: center;
  color: var(--ink);
}
.ec-row .add:hover{ background: var(--ink); color: var(--bg); border-color: var(--ink); }
.ec-row .add.added{ background: var(--pop); color: var(--ink); border-color: transparent; }

.dash-side{ display:flex; flex-direction:column; gap: 16px; }

.school-progress{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 22px;
}
.school-progress .hd{
  display:flex; align-items:center; gap: 12px;
  margin-bottom: 18px;
}
.school-progress .crest{
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  color: var(--pop);
  display:grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
}
.school-progress .who{ font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing:-0.015em; }
.school-progress .where{ font-family: var(--font-mono); font-size: 11px; color: var(--mute); }
.progress-rings{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ring-item{
  display:flex; align-items:center; gap:10px;
}
.ring-item .label{
  font-size: 13px;
  line-height: 1.2;
}
.ring-item .label b{ display:block; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.ring-item .label .sub{ font-family: var(--font-mono); font-size: 10px; color: var(--mute); letter-spacing: 0.08em; }

.fit-overall{
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display:flex; align-items:baseline; justify-content:space-between;
}
.fit-overall .lbl{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform:uppercase; color: var(--mute); }
.fit-overall .num{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  letter-spacing: -0.025em;
}
.fit-overall .num small{ font-size: 18px; color: var(--mute); font-weight: 500; }

.streak-card{
  background: var(--pop);
  color: var(--ink);
  border-radius: 22px;
  padding: 22px;
}
.streak-card .lbl{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.streak-card .num{
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 80px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  margin: 6px 0 0;
}
.streak-card .num small{ font-size: 16px; font-weight: 500; color: var(--ink-soft); }
.streak-week{
  display:grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  margin-top: 16px;
}
.streak-week .day{
  aspect-ratio: 1;
  border-radius: 8px;
  background: rgba(0,0,0,0.08);
  display:grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(0,0,0,0.55);
}
.streak-week .day.on{ background: var(--ink); color: var(--pop); }
.streak-week .day.today{
  background: var(--ink); color: var(--pop);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ============= MOBILE FRAME ============= */
.device-shell{
  display:flex; align-items:center; justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
  background:
    radial-gradient(1200px 600px at 70% 20%, rgba(30,94,255,0.08), transparent),
    radial-gradient(1000px 700px at 10% 80%, rgba(30,94,255,0.18), transparent),
    var(--bg);
}
.iphone{
  position: relative;
  width: 390px;
  height: 844px;
  background: var(--ink);
  border-radius: 56px;
  padding: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25), 0 0 0 1.5px #2a2722;
}
.iphone-screen{
  width: 100%; height: 100%;
  border-radius: 44px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}
.iphone-notch{
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 32px;
  background: var(--ink);
  border-radius: 999px;
  z-index: 5;
}
.iphone-status{
  position: absolute; top: 14px; left: 0; right: 0;
  display:flex; justify-content: space-between;
  padding: 0 28px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  z-index: 6;
  color: var(--ink);
}
.iphone-status .right{ display:flex; gap:5px; align-items:center; }
.iphone-content{
  position: absolute;
  top: 56px; left: 0; right: 0; bottom: 0;
  overflow-y: auto;
  padding: 0 22px 22px;
}
.mobile-toggle{
  position: fixed;
  left: 24px; bottom: 24px;
  z-index: 100;
}

/* mobile-specific compact styles */
.m .greet{ font-size: 38px; }
.m .huge{ font-size: 50px; }
.m .prompt-q{ font-size: 30px; }
.m .archetype-card .name{ font-size: 60px; }
.m .dash-hero h2{ font-size: 22px; }
.m .dash{ grid-template-columns: 1fr; }
.m .metrics{ grid-template-columns: repeat(2, 1fr); }
.m .mirror-top{ grid-template-columns: 1fr; }
.m .mirror-grid{ grid-template-columns: 1fr; }
.m .autofill{ grid-template-columns: 1fr; }
.m .application-doc{ padding: 22px; min-height: auto; }
.m .school-grid{ grid-template-columns: 1fr; }
.m .onboard{ grid-template-columns: 1fr; gap: 30px; padding-top: 6px; min-height: 0; }
.m .onboard-right{ display: none; }
.m .main{ padding: 20px 18px 60px; }
.m .crumb{ font-size: 10px; }
.m .btn{ font-size: 15px; padding: 12px 18px; }
.m .ec-row{ grid-template-columns: 44px 1fr auto; gap:10px; }
.m .ec-row .ico{ width:44px; height:44px; font-size: 18px; }

/* ============= UTIL ============= */
.row{ display:flex; align-items:center; gap: 12px; }
.col{ display:flex; flex-direction: column; gap: 12px; }
.sp{ flex: 1; }
.divider{ height: 1px; background: var(--line); margin: 18px 0; }

.fade-in{ animation: fade-in .35s ease; }
@keyframes fade-in{ from{ opacity:0; transform: translateY(6px); } to{ opacity:1; transform: none; } }

/* responsive (desktop view) */
.app-shell > *{ min-width: 0; }
.onboard, .dash, .mirror-top, .autofill, .mirror-grid, .school-grid, .metrics{ min-width: 0; }
.onboard > *, .dash > *, .mirror-top > *, .autofill > *{ min-width: 0; }

@media (max-width: 1280px){
  .app-shell{ grid-template-columns: 240px 1fr; }
  .main{ padding: 30px 40px 60px; }
  .mirror-grid{ grid-template-columns: 1fr 1fr; }
  .autofill{ grid-template-columns: 1fr; }
  .angle-card{ position: static; }
}
@media (max-width: 1100px){
  .app-shell{ grid-template-columns: 200px 1fr; }
  .main{ padding: 24px 28px 60px; }
  .onboard{ grid-template-columns: 1fr; gap: 28px; min-height: 0; padding-top: 8px; }
  .onboard-right{ display: none; }
  .dash{ grid-template-columns: 1fr; }
  .mirror-top{ grid-template-columns: 1fr; }
  .mirror-grid{ grid-template-columns: 1fr; }
  .top-actions{ flex-wrap: wrap; }
  .huge{ font-size: clamp(40px, 7vw, 72px); }
  .archetype-card .name{ font-size: clamp(46px, 8vw, 74px); }
  .greet{ font-size: clamp(34px, 5.5vw, 50px); }
  .prompt-q{ font-size: clamp(28px, 5vw, 44px); }
}
@media (max-width: 880px){
  .app-shell{ grid-template-columns: 1fr; }
  .sidebar{ display: none; }
  .school-grid{ grid-template-columns: 1fr 1fr; }
  .metrics{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .school-grid{ grid-template-columns: 1fr; }
  .metrics{ grid-template-columns: 1fr; }
  .main{ padding: 20px 18px 60px; }
}

/* ============= AUTH SCREEN ============= */
.auth-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
}
.auth-card{
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-lg);
  padding: 40px 44px;
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.auth-toggle{
  display: flex;
  background: var(--bg-alt);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.auth-tab{
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 16px;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--mute);
  cursor: default;
  transition: background .18s, color .18s;
}
.auth-tab.active{
  background: var(--ink);
  color: var(--bg);
}
.auth-fields{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.auth-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}
.auth-input{
  appearance: none;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  background: #fff;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}
.auth-input:focus{ border-color: var(--ink); }
.auth-input::placeholder{ color: var(--mute); }
.auth-error{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--hot);
  padding: 10px 14px;
  background: rgba(74,144,226,0.08);
  border-radius: 10px;
}
.m .auth-card{ padding: 28px 22px; }