/* =====================================================================
   FreeJobAlert - auth + app styling.
   Mobile-first, card-style, light/dark aware. Cool neutrals + indigo accent,
   with an ambient gradient ground so the page reads as designed at a glance.
   ===================================================================== */
:root{
  --ground:#eaecf5; --ground-2:#f4f5fb;
  --card:#ffffff; --ink:#141824; --ink-soft:#3d4453;
  --muted:#6b7280; --faint:#98a0af; --border:#e6e9f2; --border-strong:#d3d8e6;
  --accent:#4f46e5; --accent-2:#7c6cf0; --accent-ink:#3730b0; --accent-soft:#eef0fe;
  --chip:#eef0fe; --chip-ink:#3538cd; --chip-on:#4f46e5;
  --err:#b42318; --err-bg:#fdeceb; --ok:#0f7a52; --ok-bg:#e3f4ec;
  --tag-bg:#f1f3fb; --tag-ink:#3d4453;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow:0 1px 2px rgba(16,24,40,.05),0 12px 34px -8px rgba(43,42,120,.18);
  --shadow-sm:0 1px 2px rgba(16,24,40,.05),0 6px 18px -6px rgba(43,42,120,.14);
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#0a0c12; --ground-2:#10131c;
    --card:#161a24; --ink:#eceef5; --ink-soft:#c4c9d6;
    --muted:#98a0b0; --faint:#697182; --border:#242a38; --border-strong:#323a4b;
    --accent:#8b93f8; --accent-2:#a99bf9; --accent-ink:#c3c8fb; --accent-soft:#1d2140;
    --chip:#1d2140; --chip-ink:#c3c8fb; --chip-on:#6a72e6;
    --err:#f0776a; --err-bg:#331816; --ok:#4fc38a; --ok-bg:#112a20;
    --tag-bg:#1c212d; --tag-ink:#c4c9d6;
    --shadow:0 1px 2px rgba(0,0,0,.5),0 18px 44px -10px rgba(0,0,0,.6);
    --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 8px 22px -8px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* ---- ambient ground shared by auth + app ---- */
body.auth,body.app{
  margin:0;min-height:100dvh;color:var(--ink-soft);
  font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(60% 55% at 12% 0%, color-mix(in srgb,var(--accent) 22%,transparent) 0%, transparent 60%),
    radial-gradient(50% 45% at 100% 8%, color-mix(in srgb,var(--accent-2) 20%,transparent) 0%, transparent 55%),
    linear-gradient(180deg,var(--ground) 0%, var(--ground-2) 100%);
  background-attachment:fixed;
}
body.auth{display:flex;align-items:flex-start;justify-content:center;
  padding:max(24px,env(safe-area-inset-top)) 16px 48px;}

/* ---- card ---- */
.card{
  position:relative;width:100%;max-width:468px;background:var(--card);
  border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);
  padding:30px 28px 26px;margin-top:28px;overflow:hidden;
}
.card--sm{max-width:412px}
.card::before{ /* accent hairline along the top edge */
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
}
.card.center{text-align:center}

/* ---- brand ---- */
.brand{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15px;
  letter-spacing:-.01em;color:var(--accent);margin:0 0 18px;
}
.brand::before{
  content:"";width:22px;height:22px;border-radius:7px;flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 45%,transparent);
}

/* ---- logo wordmark ----
   "Alert" sits in a notification chip - the badge language every user already
   reads as an alert, so the mark says what the product does without an icon.
   Flat fill, no gradient, so it reproduces in one colour (favicon, print,
   email). The chip is em-based off the single font-size below, so the whole
   lockup scales from one number and holds together at any size. */
.logo{
  display:inline-block;margin:0 0 18px;
  font-size:25px;line-height:1;
  font-weight:800;letter-spacing:-.035em;
  color:var(--ink);white-space:nowrap;
}
/* Image wordmark. The file carries its own cream background, so a small radius
   makes it read as an intentional logo tile on the dark card instead of a hard
   pasted rectangle. Height-locked; width scales to keep the 165:40 ratio. */
.logo-img{display:block;height:64px;width:auto;margin:0 0 18px;border-radius:6px}
/* Red call-out appended to the register subtitle. */
.join-now{color:var(--err);font-weight:700;white-space:nowrap}
/* --card as the foreground keeps the chip legible in both themes: white on
   indigo in light, dark surface on light indigo in dark. */
.logo-badge{
  display:inline-block;margin-left:.14em;padding:.08em .26em .12em;
  border-radius:.26em;background:var(--accent);color:var(--card);
}

/* ---- linked logo + wordmark lockup (logo image beside FreeJobAlert.Com text) ---- */
.logo-lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;margin:0 0 18px}
.logo-lockup .logo-img{margin:0}
.logo-lockup-txt{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.logo-lockup-name{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.logo-lockup-tag{font-size:12.5px;font-weight:600;color:var(--ink-soft);margin-top:3px}
/* sidebar rail (236px) variant: tighter so the wordmark fits beside the logo */
.dash-side-head .logo-lockup{gap:10px;margin:0}
.dash-side-head .logo-lockup .dash-side-logo{margin:0}
.dash-side-head .logo-lockup-name{font-size:15px}
.dash-side-head .logo-lockup-tag{font-size:10px;margin-top:2px}

h1.h{font-size:24px;line-height:1.18;letter-spacing:-.022em;color:var(--ink);font-weight:760;margin:0 0 5px;text-wrap:balance}
.sub{color:var(--muted);font-size:14.5px;margin:0 0 22px}
.card.center .brand{justify-content:center}

/* ---- required-field asterisk ---- */
.req{color:var(--err);font-weight:700;margin-left:1px}
.hint-inline{color:var(--faint);font-weight:500;font-size:12.5px}

/* ---- two fields side by side (collapses on narrow screens) ---- */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row > .field{margin-bottom:16px}
@media (max-width:420px){.field-row{grid-template-columns:1fr;gap:0}}

/* ---- input with a leading addon (e.g. +91 mobile prefix) ---- */
.input-group{display:flex;align-items:stretch}
.input-group .input-addon{
  display:flex;align-items:center;padding:0 12px;font-size:15px;font-weight:650;color:var(--muted);
  background:var(--tag-bg);border:1.5px solid var(--border-strong);border-right:none;
  border-radius:12px 0 0 12px;
}
.input-group .input{border-radius:0 12px 12px 0}

/* ---- password field with a show/hide eye ---- */
.pw-wrap{position:relative;display:block}
.pw-wrap .input{padding-right:44px}
.pw-eye{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:34px;height:34px;padding:0;border:0;border-radius:9px;
  background:none;cursor:pointer;color:var(--faint);
  display:flex;align-items:center;justify-content:center;
}
.pw-eye:hover{color:var(--muted)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* eye drawn in CSS: an outline "lid" + pupil, with a slash when revealed */
.pw-eye::before{
  content:"";width:19px;height:12px;border:1.7px solid currentColor;
  border-radius:80% 0 80% 0/60% 0 60% 0;transform:rotate(45deg);
}
.pw-eye::after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:currentColor;
}
.pw-eye.is-on{color:var(--accent)}
.pw-eye.is-on::after{
  width:22px;height:1.7px;border-radius:2px;transform:rotate(-45deg);
}

/* ---- segmented role control ---- */
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.seg.seg--2{grid-template-columns:repeat(2,1fr)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{
  display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;
  padding:8px 6px;border:1.5px solid var(--border-strong);border-radius:12px;
  font-weight:650;font-size:14.5px;color:var(--ink-soft);cursor:pointer;background:var(--card);
  transition:border-color .16s,background .16s,color .16s,box-shadow .16s;
}
.seg label:hover{border-color:var(--accent)}
.seg input:checked + label{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-ink);
  box-shadow:0 2px 10px -3px color-mix(in srgb,var(--accent) 40%,transparent)}
.seg input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

/* ---- fields ---- */
.field{margin-bottom:16px}
.field > label{display:block;font-size:13px;font-weight:650;color:var(--ink-soft);margin:0 0 6px}
.input{
  width:100%;min-height:48px;padding:12px 14px;font-size:15.5px;color:var(--ink);
  background:var(--card);border:1.5px solid var(--border-strong);border-radius:12px;font-family:inherit;
  transition:border-color .16s,box-shadow .16s;
}
.input::placeholder{color:var(--faint)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3.5px var(--accent-soft)}
.input.is-invalid{border-color:var(--err)}
.input:disabled{opacity:.65;cursor:not-allowed;background:var(--tag-bg)}
.input.is-invalid:focus{box-shadow:0 0 0 3.5px var(--err-bg)}
select.input{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;padding-right:38px;cursor:pointer}

.divider{height:1px;background:var(--border);margin:22px -28px;position:relative}

/* ---- chips (multi-select) ---- */
.chips-label{font-size:13px;font-weight:650;color:var(--ink-soft);margin:0 0 9px}
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{
  display:inline-flex;align-items:center;min-height:38px;padding:7px 15px;border-radius:999px;
  background:var(--chip);color:var(--chip-ink);font-size:13.5px;font-weight:650;cursor:pointer;
  border:1.5px solid transparent;transition:background .16s,color .16s,box-shadow .16s;user-select:none;
}
.chips label:hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%,transparent) inset}
.chips input:checked + label{background:var(--chip-on);color:#fff;
  box-shadow:0 2px 10px -3px color-mix(in srgb,var(--accent) 55%,transparent)}
.chips input:focus-visible + label{outline:2px solid var(--accent);outline-offset:2px}

/* ---- consent + buttons ---- */
.consent{display:flex;gap:11px;align-items:flex-start;margin:20px 0 18px;font-size:13.5px;color:var(--muted)}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--accent);flex:none}
.consent a{color:var(--accent);text-decoration:none;font-weight:650}
.consent--inline{margin:0}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 20px}
.mini-link{color:var(--accent);text-decoration:none;font-weight:650;font-size:13.5px}
.mini-link:hover{text-decoration:underline}

.btn{
  width:100%;min-height:54px;border:none;border-radius:14px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  font-size:16px;font-weight:750;letter-spacing:.01em;cursor:pointer;font-family:inherit;
  box-shadow:0 8px 22px -8px color-mix(in srgb,var(--accent) 70%,transparent);
  transition:transform .07s,box-shadow .16s,filter .16s;
}
.btn:hover{filter:brightness(1.05);box-shadow:0 12px 26px -8px color-mix(in srgb,var(--accent) 75%,transparent)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.btn.accent{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn--link{display:flex;align-items:center;justify-content:center;text-decoration:none;margin-top:8px}

/* ---- helper text / errors / alerts ---- */
.err{color:var(--err);font-size:12.5px;margin:6px 0 0}
.hint{color:var(--faint);font-size:12.5px;margin:6px 0 0}
.alert{border-radius:12px;padding:12px 15px;font-size:14px;margin:0 0 18px;line-height:1.4}
.alert.error{background:var(--err-bg);color:var(--err)}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.foot-link{text-align:center;font-size:14px;color:var(--muted);margin:20px 0 0}
.foot-link a{color:var(--accent);text-decoration:none;font-weight:650}
.foot-link a:hover{text-decoration:underline}

/* status icon (verify / reset result pages) */
.status-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:700;margin:4px auto 16px}
.status-icon.ok{background:var(--ok-bg);color:var(--ok)}
.status-icon.bad{background:var(--err-bg);color:var(--err)}

/* reactive role sections toggled by register.js */
[data-role-block]{display:none}
[data-role-block].show{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* =====================================================================
   APP / DASHBOARD
   ===================================================================== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;max-width:960px;margin:0 auto;width:100%;
}
.page{max-width:960px;margin:0 auto;padding:8px 20px 60px;width:100%}
.inline-form{margin:0}
.btn-ghost{
  background:var(--card);border:1.5px solid var(--border-strong);color:var(--ink-soft);
  border-radius:10px;padding:9px 15px;font-size:13.5px;font-weight:650;cursor:pointer;font-family:inherit;
  transition:border-color .16s,color .16s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

.banner{
  display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--border);border-left:4px solid var(--accent);
  border-radius:14px;padding:15px 18px;margin:6px 0 22px;font-size:14px;box-shadow:var(--shadow-sm);
}
.banner strong{color:var(--ink)}

.greeting{font-size:27px;letter-spacing:-.022em;color:var(--ink);font-weight:770;margin:14px 0 4px}
.page > .sub{margin-bottom:24px}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:var(--shadow-sm)}
.tile-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:0 0 14px}

.taglist{display:flex;flex-wrap:wrap;gap:8px}
.tag{display:inline-flex;align-items:center;min-height:32px;padding:5px 13px;border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;font-size:13px;font-weight:650}
.tag.alt{background:var(--tag-bg);color:var(--tag-ink)}

.meter{height:10px;border-radius:999px;background:var(--tag-bg);overflow:hidden;margin-bottom:10px}
.meter span{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.meter-label{font-size:13px;color:var(--muted);margin:0}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media (max-width:520px){
  .card{padding:26px 20px 22px;border-radius:18px}
  .divider{margin:22px -20px}
}

/* =====================================================================
   Job-seeker dashboard - full-width app shell (sidebar + topbar + grid).
   All rules scoped to .dash* so nothing here touches the auth pages.
   ===================================================================== */
body.dash{margin:0;min-height:100dvh;background:var(--ground-2);color:var(--ink-soft);
  font-family:"Inter",var(--sans);font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  letter-spacing:-.006em}
.dash-shell{min-height:100dvh}

/* sidebar (fixed; slides out when collapsed) */
.dash-side{position:fixed;top:0;left:0;height:100dvh;width:236px;z-index:40;
  background:color-mix(in srgb,var(--accent) 5%,var(--card));border-right:1px solid var(--border);
  display:flex;flex-direction:column;transform:translateX(0);transition:transform .22s ease}
.dash-shell.collapsed .dash-side{transform:translateX(-100%)}
.dash-side-head{display:flex;align-items:center;padding:15px 18px;border-bottom:1px solid var(--border);flex:none}
.dash-side-logo{height:40px;width:auto;border-radius:5px}
.dash-nav{padding:12px 12px 24px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px}
.dash-nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
  color:var(--ink-soft);text-decoration:none;font-weight:600;font-size:13.5px;white-space:nowrap}
.dash-nav a:hover{background:var(--accent-soft);color:var(--accent-ink)}
.dash-nav a.active{background:var(--accent);color:#fff}
.dash-nav a.active .nav-ico{color:#fff}
.nav-ico{width:18px;height:18px;flex:none;color:var(--muted)}
.nav-ico svg{width:100%;height:100%;display:block}
.dash-nav-label{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--faint);padding:16px 14px 6px}
.nav-badge{margin-left:auto;background:var(--err);color:#fff;font-size:10.5px;font-weight:700;
  border-radius:10px;padding:1px 7px;line-height:1.5}

/* main column */
.dash-main{margin-left:236px;min-height:100dvh;display:flex;flex-direction:column;transition:margin-left .22s ease}
.dash-shell.collapsed .dash-main{margin-left:0}
.dash-top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:11px 22px;background:var(--card);border-bottom:1px solid var(--border)}
.dash-burger{border:0;background:none;cursor:pointer;padding:7px;border-radius:8px;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center}
.dash-burger:hover{background:var(--accent-soft);color:var(--accent-ink)}
.dash-brand{height:26px;width:auto;border-radius:4px}
.dash-top-sp{flex:1}
.dash-top-right{display:flex;align-items:center;gap:18px}
.dash-bell{position:relative;color:var(--muted);display:flex;background:none;border:0;cursor:pointer}
.dash-bell .nav-badge{position:absolute;top:-7px;right:-9px;margin:0}
.dash-user{position:relative}
.dash-user-btn{display:flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
  padding:4px 6px;border-radius:10px;text-align:left}
.dash-user-btn:hover{background:var(--accent-soft)}
.dash-ava{width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex:none}
.dash-user-meta{line-height:1.18}
.dash-user-name{font-weight:700;font-size:13.5px;color:var(--ink)}
.dash-user-sub{font-size:11.5px;color:var(--muted)}
.dash-caret{display:flex;color:var(--muted);transition:transform .18s ease}
.dash-caret svg{width:16px;height:16px}
.dash-user-btn[aria-expanded="true"] .dash-caret{transform:rotate(180deg)}
.dash-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:172px;z-index:40;
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:0 12px 30px rgba(16,24,40,.14)}
.dash-menu[hidden]{display:none}
.dash-menu form{margin:0}
.dash-menu-item{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;cursor:pointer;
  padding:9px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink);text-align:left;text-decoration:none}
.dash-menu-item:hover{background:var(--accent-soft);color:var(--accent-ink)}
.dash-menu-ico{display:flex;color:var(--muted)}
.dash-menu-ico svg{width:17px;height:17px}
.dash-menu-item:hover .dash-menu-ico{color:var(--accent-ink)}

/* body + greeting */
.dash-body{padding:22px 24px 52px;width:100%;max-width:1200px}
.dash-hi{font-size:22px;font-weight:800;color:var(--ink);margin:0 0 2px}
.dash-hi-sub{color:var(--muted);margin:0 0 20px;font-size:14px}

/* stat cards */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:15px 16px;
  box-shadow:var(--shadow-sm);min-width:0}
.stat-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.stat-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;
  color:#fff;flex:none}
.stat-ico svg{width:23px;height:23px}
.stat-n{font-size:26px;font-weight:800;color:var(--ink);line-height:1;flex:none}
.stat-txt{min-width:0}
.stat-t{font-weight:700;font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-s{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-link{font-size:12px;font-weight:700;text-decoration:none;display:inline-block;color:var(--accent)}
.stat-link:hover{text-decoration:underline}
.s-blue .stat-ico{background:#4f6bff}   .s-blue .stat-link{color:#4f6bff}
.s-green .stat-ico{background:#12a150}  .s-green .stat-link{color:#12a150}
.s-purple .stat-ico{background:#8b5cf6} .s-purple .stat-link{color:#8b5cf6}
.s-orange .stat-ico{background:#f59e0b} .s-orange .stat-link{color:#e08600}

/* content columns + panels */
.dash-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start;margin-bottom:16px}
.dash-cols>*{min-width:0}
.panel{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 15px;box-shadow:var(--shadow-sm)}
.panel-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px}
.panel-h h2{font-size:13.5px;font-weight:800;color:var(--ink);margin:0;display:flex;align-items:center;gap:9px;min-width:0}
.panel-h h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-ico{width:27px;height:27px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.ph-ico svg{width:15px;height:15px}
.i-blue{background:#eef1ff;color:#4f6bff}
.i-green{background:var(--ok-bg);color:var(--ok)}
.i-purple{background:#f3edfe;color:#8b5cf6}
.i-orange{background:#fff4e0;color:#e08600}
.view-all{font-size:11.5px;color:var(--accent);text-decoration:none;font-weight:700;flex:none;white-space:nowrap}
.view-all:hover{text-decoration:underline}

/* scroll box: ~6 rows tall, then scroll inside the panel */
.panel-list{max-height:372px;overflow-y:auto;margin:0 -4px;padding:0 4px}
.panel-list::-webkit-scrollbar{width:7px}
.panel-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:20px}
.panel-list::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.panel-list{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* standard job/notification row: title (+pill) on line 1, meta + last date on line 2 */
.row{display:flex;flex-direction:column;gap:3px;
  padding:10px 6px;border-top:1px solid var(--border);text-decoration:none}
.row:first-of-type{border-top:0}
.row:hover{background:var(--accent-soft);border-radius:9px}
.row-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.row-bot{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.row-t{font-weight:700;font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row:hover .row-t{color:var(--accent-ink)}
.row-elig{flex:none}
.row-m{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.row-due{flex:none;font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.row-due.u-red{color:#e5484d;font-weight:700}

/* Last Date Alert row: date badge + title + vacancy + days-left */
.alert{display:flex;align-items:center;gap:11px;padding:9px 4px;border-top:1px solid var(--border);text-decoration:none}
.alert:first-of-type{border-top:0}
.alert:hover{background:var(--accent-soft);border-radius:9px}
.badge{width:48px;height:48px;border-radius:11px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex:none;background:var(--ground)}
.badge-d{font-size:17px;font-weight:800;line-height:1}
.badge-m{font-size:9.5px;font-weight:700;letter-spacing:.03em;margin-top:2px;color:var(--muted)}
.alert-main{flex:1;min-width:0}
.alert:hover .row-t{color:var(--accent-ink)}
.alert-side{flex:none;display:flex;align-items:center;gap:8px}
/* days-left: two-line colored text (matches reference) */
.dl{text-align:center;line-height:1;flex:none}
.dl-n{display:block;font-size:16px;font-weight:800}
.dl-l{display:block;font-size:8.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
.u-red .badge-d,.u-red .dl-n,.u-red .dl-l{color:#e5484d}
.u-amber .badge-d,.u-amber .dl-n,.u-amber .dl-l{color:#e08600}
.u-green .badge-d,.u-green .dl-n,.u-green .dl-l{color:var(--ok)}
.u-grey .badge-d,.u-grey .dl-n,.u-grey .dl-l{color:var(--muted)}
.chev{width:15px;height:15px;color:var(--faint);display:flex;flex:none}
.chev svg{width:100%;height:100%}

/* pills */
.pill{font-size:10px;font-weight:700;border-radius:20px;padding:3px 9px;white-space:nowrap;letter-spacing:.02em}
.pill-red{background:#fdecec;color:#e5484d}
.pill-amber{background:#fff4e0;color:#c77700}
.pill-green{background:var(--ok-bg);color:var(--ok)}
.pill-blue{background:var(--accent-soft);color:var(--accent-ink)}

/* tabs (Matched To Your Profile) */
.tab-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px}
.tab{font-size:11px;font-weight:700;border:1px solid var(--border-strong);background:var(--card);
  color:var(--ink-soft);border-radius:20px;padding:4px 11px;cursor:pointer;white-space:nowrap}
.tab:hover{border-color:var(--accent);color:var(--accent-ink)}
.tab.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab-pane.hidden{display:none}

.empty{color:var(--muted);font-size:12.5px;padding:16px 4px;text-align:center}

.dash-backdrop{display:none}

/* responsive */
@media (max-width:1100px){.stat-row{grid-template-columns:repeat(2,1fr)}.dash-cols{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .dash-main{margin-left:0}
  .dash-shell:not(.collapsed) .dash-backdrop{display:block;position:fixed;inset:0;background:rgba(8,10,18,.44);z-index:35}
}
@media (max-width:680px){.stat-row{grid-template-columns:1fr 1fr}.dash-cols{grid-template-columns:1fr}.dash-body{padding:18px 15px 44px}}

/* ---- student dashboard additions ---- */
.stat-row-5{grid-template-columns:repeat(5,1fr)}
.pill-purple{background:#f3edfe;color:#8b5cf6}
.row-tent{color:var(--faint);font-style:italic}
.trk-ico{flex:none}

/* recommended / saved college rows */
.clg{display:flex;align-items:center;gap:10px;padding:9px 4px;border-top:1px solid var(--border);text-decoration:none}
.clg:first-child{border-top:0}
.clg:hover .row-t{color:var(--accent-ink)}
.clg-link{display:flex;align-items:center;gap:10px;flex:1;min-width:0;text-decoration:none}
.clg-logo{width:38px;height:38px;border-radius:10px;background:var(--accent-soft);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none}
.clg-main{display:flex;flex-direction:column;min-width:0;overflow:hidden}
.clg-main .row-t,.clg-main .row-m{display:block}
.clg-link:hover .row-t{color:var(--accent-ink)}
.clg-side{display:flex;align-items:center;gap:8px;flex:none}
.clg-chip{font-size:9.5px;font-weight:700;letter-spacing:.02em;padding:3px 7px;border-radius:6px;
  background:var(--accent-soft);color:var(--accent-ink);white-space:nowrap}
.clg-rate{font-size:11px;font-weight:700;color:#e08600;white-space:nowrap}
.save-form{display:flex;margin:0}
.save-btn{width:30px;height:30px;border:1px solid var(--border-strong);background:var(--card);border-radius:8px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--muted);padding:0}
.save-btn svg{width:16px;height:16px;fill:none}
.save-btn:hover{border-color:#e5484d;color:#e5484d}
.save-btn.on{color:#e5484d;border-color:#f4b8ba}
.save-btn.on svg{fill:currentColor}

@media (max-width:1100px){.stat-row-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:680px){.stat-row-5{grid-template-columns:repeat(2,1fr)}}

/* =====================================================================
   Cloudflare Turnstile widget (register / login / forgot-password).
   Appended last and fully scoped to .ts-wrap, so nothing above is affected.
   ===================================================================== */
.ts-wrap{margin:2px 0 16px}
.ts-wrap .cf-turnstile{display:block;min-height:65px}
/* Status line under the widget ("running a quick security check…"). */
.ts-msg{margin:8px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.ts-msg.is-error{color:var(--err)}
/* Turnstile's "flexible" widget will not render narrower than 300px, but the
   card's content box is ~288px on a 360px phone and .card is overflow:hidden -
   so scale it down to fit instead of letting it clip. */
@media (max-width:379px){
  .ts-wrap{overflow:hidden}
  .ts-wrap .cf-turnstile{transform:scale(.92);transform-origin:top left;min-height:60px}
}
@media (max-width:339px){
  .ts-wrap .cf-turnstile{transform:scale(.82);min-height:54px}
}

/* Contact Us — the one sidebar item rendered outside the $mainNav loop.
   Amber marks it as a support link, distinct from the indigo hover/active
   states. Scoped to .nav-contact, so no other nav item is affected. */
.dash-nav a.nav-contact,
.dash-nav a.nav-contact .nav-ico{color:#e08600}
.dash-nav a.nav-contact:hover{background:rgba(224,134,0,.10);color:#b36a00}
.dash-nav a.nav-contact:hover .nav-ico{color:#b36a00}
@media (prefers-color-scheme:dark){
  .dash-nav a.nav-contact,
  .dash-nav a.nav-contact .nav-ico{color:#f0a83a}
  .dash-nav a.nav-contact:hover{background:rgba(240,168,58,.14);color:#ffc266}
  .dash-nav a.nav-contact:hover .nav-ico{color:#ffc266}
}