/* ═══════════════════════════════════════════════════════════════════════════
   Entrancify web-app shared stylesheet.
   Design tokens + core components are copied verbatim from index.html so the
   app pages look identical to the marketing site. New app-only components
   (page head, card grid, form fields, tables, skeletons, states) live below.

   Canonical page shell every feature page should use:

   <header class="nav"><div class="wrap nav-in">
     <a class="logo" href="/"><span class="logo-mark"><img src="/assets/logos/icon-96.png" alt="Entrancify" width="46" height="46"></span> Entrancify</a>
     <nav class="nav-links">
       <a href="/colleges/">Colleges</a><a href="/cutoffs/">Cutoffs</a>
       <a href="/predictor/">Predictor</a><a href="/expert/">Expert call</a>
       <a href="/pricing/">Pricing</a>
     </nav>
     <div class="nav-cta"><span id="auth-nav"></span></div>
   </div></header>
   ... <main class="page"><div class="wrap"> ... </div></main>
   <footer> (copy from index.html) </footer>
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#FFFFFF;--bg-alt:#F5F8FD;--bg-warm:#FFFBF3;--surface:#FFFFFF;
  --navy:#0F172A;--navy-2:#1B2740;
  --blue:#2563EB;--blue-hover:#1D4ED8;--blue-50:#EEF4FF;--blue-100:#DBE7FE;--blue-400:#60A5FA;
  --text:#101828;--text-2:#48566B;--text-3:#94A3B8;
  --border:#E7EAF0;--border-2:#D5DBE7;
  --success:#16A34A;--success-50:#F0FBF3;--gold:#F59E0B;--gold-50:#FFF7E8;--danger:#DC2626;--danger-50:#FEF2F2;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Geist","Instrument Sans",system-ui,-apple-system,sans-serif;
  --r-btn:999px;--r-card:26px;--r-lg:32px;--r-input:16px;--r-sm:14px;
  --sh-card:0 6px 26px rgba(16,24,40,.05);
  --sh-card-h:0 18px 44px rgba(16,24,40,.10);
  --sh-blue:0 10px 28px rgba(37,99,235,.20);
  --sh-blue-h:0 16px 38px rgba(37,99,235,.28);
  --sh-float:0 40px 90px -34px rgba(15,23,42,.32);
  --ease:cubic-bezier(.2,.8,.2,1);--dur:.25s;
  --wrap:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{max-width:100%}
h1,h2,h3,h4{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;letter-spacing:-.02em;line-height:1.08;color:var(--text)}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px;position:relative}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);background:var(--blue-50);border:1px solid var(--blue-100);border-radius:999px;padding:8px 16px}
.muted{color:var(--text-2)}.t3{color:var(--text-3)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:8px}

/* ── nav ── */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);backdrop-filter:saturate(150%) blur(12px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
@media(min-width:900px){.nav-in{height:86px}}
.logo{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:500;font-size:22px;letter-spacing:-.02em}
.logo-mark{width:46px;height:46px;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--border);box-shadow:var(--sh-card);flex:none}
.logo-mark img{width:100%;height:100%;display:block;object-fit:cover}
.nav-links{display:none;gap:30px;font-size:15.5px;font-weight:500;color:var(--text-2)}
.nav-links a{position:relative;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--blue);border-radius:2px;transition:width .2s var(--ease)}
.nav-links a:hover{color:var(--text)}.nav-links a:hover::after{width:100%}
.nav-links a.act{color:var(--blue)}.nav-links a.act::after{width:100%}
@media(min-width:920px){.nav-links{display:flex}}
.nav-cta{display:flex;gap:10px;align-items:center}

/* ── buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:56px;padding:0 28px;font-weight:600;font-size:15.5px;border-radius:var(--r-btn);border:1.5px solid transparent;white-space:nowrap;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),background var(--dur),color var(--dur),border-color var(--dur)}
.btn-primary{background:var(--blue);color:#fff;box-shadow:var(--sh-blue)}
.btn-primary:hover{background:var(--blue-hover);transform:translateY(-2px);box-shadow:var(--sh-blue-h)}
.btn-primary:active{transform:translateY(0)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--border-2)}
.btn-secondary:hover{background:var(--bg-alt);transform:translateY(-2px)}
.btn-sm{height:46px;padding:0 20px;font-size:14.5px}
.btn[disabled]{opacity:.55;pointer-events:none}
.btn .ar{transition:transform var(--dur) var(--ease)}.btn:hover .ar{transform:translateX(4px)}

/* ── page shell ── */
.page{padding:44px 0 90px;min-height:60vh}
@media(min-width:760px){.page{padding:60px 0 110px}}
.page-head{max-width:64ch;margin-bottom:34px}
.page-head h1{font-size:clamp(30px,5vw,46px)}
.page-head p{color:var(--text-2);margin-top:14px;font-size:17px}

/* ── cards + grid ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:24px}
.grid{display:grid;gap:18px}
.grid.cols-2{grid-template-columns:1fr}
.grid.cols-3{grid-template-columns:1fr}
@media(min-width:640px){.grid.cols-2,.grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.ccard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);box-shadow:var(--sh-card);padding:22px;display:flex;flex-direction:column;gap:8px;transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease),border-color var(--dur)}
.ccard:hover{transform:translateY(-3px);box-shadow:var(--sh-card-h);border-color:var(--border-2)}
.ccard h3{font-size:19px}
.ccard .meta{font-size:14px;color:var(--text-3)}
.ccard .row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px;font-size:14.5px}
.ccard .row b{font-weight:600}

/* ── form fields ── */
.fld{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.fld label{font-size:14px;font-weight:600;color:var(--text-2)}
.fld input,.fld select{height:54px;border:1.5px solid var(--border-2);border-radius:var(--r-input);background:var(--surface);padding:0 16px;font-size:16px;color:var(--text);transition:border-color .2s,box-shadow .2s;width:100%}
.fld textarea{border:1.5px solid var(--border-2);border-radius:var(--r-input);background:var(--surface);padding:12px 16px;font-size:16px;color:var(--text);width:100%;font-family:inherit}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-50)}
.fld .hint{font-size:12.5px;color:var(--text-3)}
.fld.err input,.fld.err select{border-color:var(--danger)}
.form-row{display:grid;gap:0 18px}
@media(min-width:600px){.form-row.two{grid-template-columns:1fr 1fr}}

/* ── badges / pills ── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;letter-spacing:.02em}
.badge.blue{color:var(--blue);background:var(--blue-50);border:1px solid var(--blue-100)}
.badge.green{color:var(--success);background:var(--success-50);border:1px solid #cdeed6}
.badge.gold{color:#b45309;background:var(--gold-50);border:1px solid #f5e2b8}
.badge.gray{color:var(--text-2);background:var(--bg-alt);border:1px solid var(--border)}

/* ── table ── */
.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
.tbl th,.tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--border)}
.tbl th{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600}
.tbl tr:last-child td{border-bottom:none}
.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-card)}

/* ── skeletons + states ── */
.skel{position:relative;overflow:hidden;background:var(--bg-alt);border-radius:12px}
.skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shim 1.4s infinite}
@keyframes shim{100%{transform:translateX(100%)}}
.skel-card{height:150px;border-radius:var(--r-card)}
.state{text-align:center;padding:56px 20px;color:var(--text-2)}
.state h3{font-size:20px;margin-bottom:8px}
.state.err{color:var(--danger)}
.notice{border-radius:var(--r-input);padding:12px 16px;font-size:14.5px}
.notice.err{background:var(--danger-50);color:var(--danger);border:1px solid #f6cccc}
.notice.ok{background:var(--success-50);color:var(--success);border:1px solid #cdeeD6}
.hide{display:none!important}
.spinner{width:18px;height:18px;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
.spinner.dark{border-color:var(--blue-100);border-top-color:var(--blue)}
@keyframes spin{100%{transform:rotate(360deg)}}

/* ── footer (from index.html) ── */
footer{padding:72px 0 46px;background:var(--bg);border-top:1px solid var(--border)}
.f-grid{display:grid;gap:42px}
@media(min-width:780px){.f-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.f-about p{font-size:14.5px;color:var(--text-2);max-width:32ch;margin-top:16px;line-height:1.6}
.f-about .socials{display:flex;gap:11px;margin-top:20px}
.f-about .socials a{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);display:grid;place-items:center;color:var(--text-2);transition:.2s var(--ease)}
.f-about .socials a:hover{color:var(--blue);border-color:var(--blue);transform:translateY(-2px)}
footer h4{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:18px}
.f-col a{display:block;font-size:15px;color:var(--text-2);padding:7px 0;transition:color .2s}
.f-col a:hover{color:var(--blue)}
.f-bottom{margin-top:52px;padding-top:26px;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;font-size:13px;color:var(--text-3)}
.f-bottom .disc{max-width:60ch}