/* ═══════════════════════════════════════════════════════
   CSS SECTION 1: DESIGN TOKENS (CSS Custom Properties)
   All colors, shadows, and spacing live here. Edit these
   values to retheme the entire app at once.
   ═══════════════════════════════════════════════════════ */
:root {
  --bg: #f5f0e8;
  --card: #fffdf7;
  --green: #2d6a4f;
  --green-light: #52b788;
  --green-pale: #d8f3dc;
  --amber: #e76f00;
  --amber-pale: #fff1e0;
  --red: #c0392b;
  --red-pale: #fde8e8;
  --blue: #1a5276;
  --blue-pale: #dbeafe;
  --purple: #6d28d9;
  --purple-pale: #ede9fe;
  --text: #1c1c1c;
  --muted: #4b5563;
  --border: #e2ddd4;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{overflow-x:hidden;max-width:100vw;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 2: MOBILE BOTTOM TAB BAR
   Fixed at the bottom on screens ≤768px. Hidden on desktop.
   Each role (teen/parent/employer) gets its own tab set —
   see syncMobileNav() and gotoPage() in the JS section.
   ═══════════════════════════════════════════════════════ */

/* MOBILE NAV — bottom tab bar */
.mobile-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:200;background:var(--green);border-top:2px solid rgba(255,255,255,0.15);padding:4px 0 env(safe-area-inset-bottom,4px);}
.mobile-nav-inner{display:flex;justify-content:space-around;}
.mobile-nav-btn{background:none;border:none;color:rgba(255,255,255,0.65);display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:0.6rem;font-weight:600;transition:all .2s;min-width:52px;position:relative;}
.mobile-nav-btn .mnb-icon{font-size:1.3rem;line-height:1;}
.mobile-nav-btn.active{color:#fff;}

/* Messages mobile nav button — distinct pill style */
.mobile-nav-btn.mnb-messages {
  background: rgba(255,255,255,0.13);
  border-radius: 20px;
  border: 1.5px solid rgba(255,255,255,0.25);
  margin: 0 2px;
}
.mobile-nav-btn.mnb-messages:active {
  background: rgba(255,255,255,0.25);
}

.mobile-nav-btn .mnb-badge{position:absolute;top:4px;right:8px;background:#e74c3c;color:#fff;border-radius:8px;font-size:.55rem;font-weight:700;padding:1px 4px;}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 3: PAGE VISIBILITY SYSTEM
   All pages are hidden by default. gotoPage(id) in JS adds
   the "active" class to show one page at a time (SPA routing).
   ═══════════════════════════════════════════════════════ */
.page{display:none;}
.page.active{display:block;}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 4: RESPONSIVE OVERRIDES
   Two breakpoints: 768px (tablet/phone) and 480px (small phone).
   These override desktop layouts with mobile-friendly stacking.
   ═══════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════
   CALENDAR STYLES
   ═══════════════════════════════════════════════════════ */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;}
.cal-day-header{text-align:center;font-size:.68rem;font-weight:700;color:var(--muted);padding:4px 0;text-transform:uppercase;}
.cal-cell{min-height:52px;border-radius:8px;padding:4px;background:var(--card);border:1.5px solid var(--border);cursor:pointer;transition:border-color .15s,background .15s;position:relative;}
.cal-cell:hover{border-color:var(--green-light);background:var(--green-pale);}
.cal-cell.today{border-color:var(--green);background:var(--green-pale);}
.cal-cell.other-month{opacity:.38;}
.cal-cell.has-shift{background:#e8f8ef;border-color:var(--green-light);}
.cal-date-num{font-size:.72rem;font-weight:700;color:var(--muted);line-height:1;}
.cal-cell.today .cal-date-num{color:var(--green);font-size:.8rem;}
.cal-dot-row{display:flex;flex-wrap:wrap;gap:2px;margin-top:3px;}
.cal-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;}
.cal-dot.cal-dot-amber{background:var(--amber);}
.cal-shift-pill{font-size:.58rem;font-weight:700;color:var(--green);background:rgba(45,106,79,.1);border-radius:4px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;display:block;margin-top:2px;line-height:1.4;}
.cal-upcoming-item{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 0;border-bottom:1px solid var(--border);}
.cal-upcoming-item:last-child{border-bottom:none;}
.cal-upcoming-date{text-align:center;min-width:44px;background:var(--green-pale);border-radius:8px;padding:6px 4px;}
.cal-upcoming-date .cud-month{font-size:.62rem;font-weight:700;color:var(--green);text-transform:uppercase;}
.cal-upcoming-date .cud-day{font-size:1.3rem;font-weight:900;color:var(--green);line-height:1;}
.cal-upcoming-info{flex:1;}
.cal-upcoming-info strong{display:block;font-size:.9rem;font-weight:700;}
.cal-upcoming-info .cui-time{font-size:.78rem;color:var(--muted);margin-top:1px;}
.cal-upcoming-info .cui-pay{font-size:.75rem;color:var(--amber);font-weight:600;margin-top:2px;}
.cal-upcoming-info .cui-notes{font-size:.73rem;color:var(--muted);margin-top:2px;font-style:italic;}
.cal-del-btn{background:none;border:none;font-size:1rem;cursor:pointer;color:var(--muted);padding:2px 4px;border-radius:6px;transition:color .15s;}
.cal-del-btn:hover{color:var(--red);}

/* Calendar notice banner */
.cal-notice{display:flex;align-items:flex-start;gap:10px;background:#fff8e1;border:1.5px solid #f6c90e;border-radius:12px;padding:.9rem 1rem;margin:.6rem 0;animation:slideDown .3s ease;}
.cal-notice-icon{font-size:1.4rem;line-height:1;flex-shrink:0;}
.cal-notice-body{flex:1;}
.cal-notice-body strong{display:block;font-size:.88rem;font-weight:700;color:#7a5800;}
.cal-notice-body p{font-size:.8rem;color:#7a5800;margin-top:2px;line-height:1.45;}
.cal-notice-actions{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap;}
.cal-notice-btn{background:#f6c90e;color:#3d2c00;border:none;border-radius:8px;padding:6px 14px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;}
.cal-notice-btn.secondary{background:none;border:1.5px solid #f6c90e;color:#7a5800;}
.cal-notice-dismiss{background:none;border:none;color:#b8860b;font-size:1.1rem;cursor:pointer;padding:0 0 0 6px;margin-left:auto;align-self:flex-start;line-height:1;}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ═══ NEW FEATURE TABS CSS ═══ */
.tracker-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:9px 11px;font-size:.8rem;cursor:default;}
.tracker-card:hover{border-color:var(--green-light);}
#tracker-kanban{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media(max-width:768px){
  #tracker-kanban{grid-template-columns:repeat(2,minmax(150px,1fr));}
  #portfolio-grid{grid-template-columns:1fr;}
}
@media(max-width:480px){
  #tracker-kanban{grid-template-columns:1fr;}
}

/* ══ MOBILE RESPONSIVE ══ */
@media(max-width:768px){
  body{padding-bottom:72px;}
  .mobile-nav{display:block;}
  .landing{padding:1rem .8rem 2rem;}
  .landing-hero{grid-template-columns:1fr;}
  .landing-inner,.landing-showcase,.landing-section,.landing-final{padding:1.2rem;}
  .landing-cta,.landing-demo-row{flex-direction:column;align-items:stretch;}
  .landing-cta .btn-primary,.landing-cta .btn-secondary,.landing-demo-row .btn-secondary{width:100%;text-align:center;}
  .landing-trust,.landing-metrics,.landing-feature-grid,.landing-steps,.landing-audience-grid,.landing-split,.landing-quote-grid,.landing-story-strip,.showcase-stack{grid-template-columns:1fr;}
  .auth-card{padding:1.5rem 1.2rem;border-radius:14px;}
  .dashboard{padding:1rem .8rem;}
  .dash-header{flex-direction:column;gap:.5rem;}
  .dash-header button{width:100%;}
  .stats-row{grid-template-columns:1fr 1fr;}
  .section-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .type-selector{grid-template-columns:1fr 1fr 1fr;}
  .filters-bar{gap:6px;padding:.7rem .8rem;flex-wrap:wrap;overflow-x:hidden;}
  .filters-bar input,.filters-bar select{font-size:.82rem;min-width:0;max-width:100%;}
  .toggle-row{flex-wrap:wrap;}
  .tw-ver-row{grid-template-columns:1fr;}
  .dash-header h1{font-size:1.3rem;}
  .stats-row{gap:8px;}
  .stat-card{min-width:0;}
  .msg-modal-overlay{padding:0;}
  .msg-modal{flex-direction:column;height:100vh;height:100dvh;border-radius:0;max-width:100%;width:100%;}
  .msg-sidebar{width:100%;height:auto;max-height:200px;border-right:none;border-bottom:1px solid var(--border);flex-shrink:0;}
  .msg-contacts{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;}
  .msg-contact{flex-direction:row;text-align:left;gap:10px;min-width:0;padding:9px 12px;align-items:center;}
  .msg-contact-info{display:block;flex:1;min-width:0;}
  .msg-contact-avatar{width:34px;height:34px;flex-shrink:0;}
  .msg-contact-name{display:block;font-size:.82rem;font-weight:600;}
  .msg-contact-preview{display:block;font-size:.71rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .msg-main{min-height:0;flex:1;}
  .msg-body{flex:1;min-height:0;overflow-y:auto;}
  .msg-input-bar{padding:.5rem .75rem;flex-shrink:0;position:sticky;bottom:0;z-index:10;}
  .msg-blocked{font-size:.75rem;padding:8px 10px;margin:.4rem 0;}
  .msg-safety-notice{flex-shrink:0;}
  .browse-card{padding:.9rem;}
  .panel{border-radius:12px;}
  .panel-head{padding:.8rem 1rem;}
  .panel-body{padding:.8rem 1rem;}
  .modal{margin:1rem;padding:1.2rem;max-height:90vh;border-radius:14px;width:calc(100% - 2rem);}
  .lesson-card{padding:.9rem;}
  .tw-ver-wrap{padding:1rem .8rem 2rem;}
  .tw-ver-tiers{gap:0;}
  .tw-ver-tier-step{min-width:52px;}
  .tw-ver-tier-name{font-size:.62rem;}
  .tw-ver-row{flex-direction:column;gap:0;}
  .email-sent-card{padding:2rem 1.2rem;}
  .stat-card{padding:.9rem 1rem;}
  .stat-value{font-size:1.6rem;}
  .btn-primary,.btn-secondary{padding:12px 20px;font-size:.95rem;}
  .job-actions{gap:5px;flex-wrap:wrap;}
  .btn-sm{font-size:.75rem;padding:4px 10px;}
  .section-grid{gap:1rem;}
  .resume-card{padding:1rem;}
  .applicant-card{padding:.9rem 1rem;}
  .landing-hero h1{font-size:1.6rem !important;}
  .landing-lead{font-size:.9rem !important;}
}
@media(max-width:480px){
  .landing-hero h1{font-size:1.4rem !important;}
}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 5: LANDING PAGE
   The public-facing marketing page. Uses CSS Grid for the
   hero layout and decorative gradient orbs for depth.
   ═══════════════════════════════════════════════════════ */
/* LANDING */
.landing{
  position:relative;
  min-height:calc(100vh - 118px);
  padding:1.4rem 1rem 3rem;
  overflow:hidden;
  background:
    radial-gradient(circle at top left, rgba(82,183,136,0.22), transparent 30%),
    radial-gradient(circle at top right, rgba(231,111,0,0.14), transparent 28%),
    linear-gradient(180deg, #f7f3ec 0%, #f3ecdf 45%, #efe7d9 100%);
}
.landing-shell{position:relative;max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:1.2rem;}
.landing-orb{position:absolute;border-radius:999px;filter:blur(18px);opacity:.55;pointer-events:none;}
.landing-orb-a{width:180px;height:180px;background:rgba(82,183,136,0.22);top:48px;left:-36px;}
.landing-orb-b{width:220px;height:220px;background:rgba(231,111,0,0.13);top:110px;right:-40px;}
.landing-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1.2rem;align-items:stretch;}
.landing-inner,
.landing-showcase,
.landing-section,
.landing-final{
  background:rgba(255,253,247,0.82);
  border:1px solid rgba(226,221,212,0.9);
  border-radius:24px;
  box-shadow:var(--shadow-lg);
  backdrop-filter:blur(10px);
}
.landing-inner{padding:2.2rem 2rem;text-align:left;}
.landing-showcase{padding:1.2rem;display:grid;gap:1rem;align-content:start;}
.landing-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--green-pale);
  color:var(--green);
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:7px 14px;
  border-radius:999px;
  margin-bottom:1rem;
}
.landing-badge::before{
  content:'';
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 5px rgba(45,106,79,0.12);
}
.landing h1{
  font-family:'Fraunces',serif;
  font-size:clamp(2.8rem,5vw,4.6rem);
  font-weight:900;
  line-height:0.98;
  color:var(--green);
  margin-bottom:1rem;
  max-width:10ch;
}
.landing h1 em{font-style:normal;color:var(--amber);}
.landing-lead{
  font-size:1.03rem;
  color:var(--muted);
  line-height:1.7;
  max-width:58ch;
  margin-bottom:1.25rem;
}
.landing-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:1rem;}
.landing-demo-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:1.4rem;}
.landing-demo-row .btn-secondary{padding:10px 18px;font-size:.92rem;}
.landing-trust{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin-bottom:1.35rem;
}
.trust-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:.8rem .9rem;
  font-size:.81rem;
  color:var(--muted);
  line-height:1.45;
}
.trust-item strong{display:block;color:var(--text);font-size:.9rem;margin-bottom:2px;}
.landing-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.landing-metric{
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:1rem;
}
.landing-metric-value{
  font-family:'Fraunces',serif;
  font-size:2rem;
  line-height:1;
  color:var(--green);
  margin-bottom:6px;
}
.landing-metric-label{font-size:.8rem;font-weight:700;color:var(--text);margin-bottom:4px;}
.landing-metric p{font-size:.8rem;color:var(--muted);line-height:1.5;}
.showcase-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.1rem 1.1rem 1rem;
  box-shadow:var(--shadow);
}
.showcase-card-main{
  background:linear-gradient(180deg,#fffef9 0%,#eef8f1 100%);
  border-color:rgba(82,183,136,0.35);
}
.showcase-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:.8rem;
}
.showcase-kicker span{
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--muted);
  font-weight:700;
}
.showcase-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 10px;
  background:var(--green-pale);
  color:var(--green);
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
}
.showcase-card h3{
  font-family:'Fraunces',serif;
  font-size:1.35rem;
  color:var(--text);
  margin-bottom:.45rem;
}
.showcase-card p{font-size:.86rem;color:var(--muted);line-height:1.6;}
.showcase-list{display:grid;gap:8px;margin-top:1rem;}
.showcase-list-item{
  background:rgba(255,255,255,0.75);
  border:1px solid var(--border);
  border-radius:14px;
  padding:.75rem .8rem;
  display:flex;
  justify-content:space-between;
  gap:14px;
  font-size:.82rem;
}
.showcase-list-item strong{display:block;color:var(--text);margin-bottom:2px;}
.showcase-list-item span{color:var(--muted);}
.showcase-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;}
.showcase-mini h4{
  font-family:'Fraunces',serif;
  font-size:1rem;
  color:var(--green);
  margin-bottom:.35rem;
}
.showcase-mini ul{list-style:none;display:grid;gap:8px;margin-top:.8rem;}
.showcase-mini li{
  font-size:.8rem;
  color:var(--muted);
  line-height:1.45;
  padding:.6rem .7rem;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--border);
}
.landing-section{padding:1.6rem;}
.landing-section-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:end;
  margin-bottom:1rem;
}
.landing-section-head h2{
  font-family:'Fraunces',serif;
  font-size:1.8rem;
  color:var(--green);
}
.landing-section-head p{font-size:.92rem;color:var(--muted);max-width:56ch;line-height:1.6;}
.landing-feature-grid,
.landing-steps,
.landing-audience-grid,
.landing-quote-grid{display:grid;gap:12px;}
.landing-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.landing-feature-card,
.landing-step,
.landing-audience-card,
.landing-quote{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.15rem;
}
.landing-feature-card{
  min-height:180px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.landing-feature-eyebrow,
.landing-step-number,
.landing-audience-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}
.landing-feature-eyebrow{background:var(--amber-pale);color:var(--amber);}
.landing-step-number{background:var(--green-pale);color:var(--green);}
.landing-audience-tag{background:var(--blue-pale);color:var(--blue);}
.landing-feature-card h3,
.landing-step h3,
.landing-audience-card h3,
.landing-safety-panel h3,
.landing-story-panel h3,
.landing-final h2,
.landing-quote h3{
  font-family:'Fraunces',serif;
  color:var(--text);
  margin:.85rem 0 .45rem;
}
.landing-feature-card p,
.landing-step p,
.landing-audience-card p,
.landing-safety-panel p,
.landing-story-panel p,
.landing-final p,
.landing-quote p{
  color:var(--muted);
  line-height:1.6;
  font-size:.88rem;
}
.landing-steps{grid-template-columns:repeat(4,minmax(0,1fr));}
.landing-step{position:relative;overflow:hidden;}
.landing-step::after{
  content:'';
  position:absolute;
  inset:auto -20px -20px auto;
  width:90px;
  height:90px;
  border-radius:50%;
  background:rgba(82,183,136,0.09);
}
.landing-split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:12px;}
.landing-safety-panel,
.landing-story-panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  padding:1.25rem;
}
.landing-checklist{list-style:none;display:grid;gap:10px;margin-top:1rem;}
.landing-checklist li{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:14px;
  padding:.8rem .9rem;
  font-size:.85rem;
  color:var(--muted);
  line-height:1.55;
}
.landing-checklist strong{display:block;color:var(--text);margin-bottom:3px;}
.landing-story-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:1rem;
}
.landing-story-stat{
  background:var(--green-pale);
  border-radius:16px;
  padding:.95rem .85rem;
}
.landing-story-stat strong{
  display:block;
  font-family:'Fraunces',serif;
  font-size:1.5rem;
  color:var(--green);
  margin-bottom:4px;
}
.landing-story-stat span{font-size:.78rem;color:var(--green);}
.landing-audience-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.landing-audience-card ul{list-style:none;display:grid;gap:8px;margin-top:1rem;}
.landing-audience-card li{
  font-size:.82rem;
  color:var(--muted);
  padding:.65rem .7rem;
  border-radius:12px;
  background:var(--bg);
  border:1px solid var(--border);
}
.landing-quote-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.landing-quote{background:linear-gradient(180deg,#fff 0%,#f8f4eb 100%);}
.landing-quote h3{font-size:1.05rem;margin-top:0;}
.landing-quote-name{margin-top:1rem;font-size:.78rem;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.8px;}
.landing-final{
  padding:1.8rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  flex-wrap:wrap;
}
.landing-final-copy{max-width:640px;}
.landing-footer{
  width:100%;
  text-align:center;
  padding:1.2rem;
  font-size:0.82rem;
  color:var(--muted);
}
@media(max-width:980px){
  .landing-hero{grid-template-columns:1fr;}
  .landing-feature-grid,
  .landing-steps,
  .landing-audience-grid,
  .landing-quote-grid,
  .landing-split{
    grid-template-columns:1fr 1fr;
  }
  .landing-trust,
  .landing-metrics,
  .landing-story-strip,
  .showcase-stack{grid-template-columns:1fr 1fr;}
}

/* BUTTONS */
.btn-primary{background:var(--green);color:#fff;border:none;padding:14px 32px;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 16px rgba(45,106,79,0.3);}
.btn-primary:hover{background:#235c40;transform:translateY(-1px);box-shadow:0 6px 20px rgba(45,106,79,0.4);}
.btn-primary:disabled{background:#aaa;box-shadow:none;transform:none;cursor:not-allowed;}
.btn-secondary{background:transparent;color:var(--green);border:2px solid var(--green);padding:12px 24px;border-radius:10px;font-family:'DM Sans',sans-serif;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;}
.btn-secondary:hover{background:var(--green-pale);}
.terms-link{background:none;border:none;color:var(--green);font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;font-size:inherit;text-decoration:underline;padding:0;}

/* AUTH */
.auth-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.auth-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:2.5rem;width:100%;max-width:500px;box-shadow:var(--shadow-lg);}
.auth-card h2{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--green);margin-bottom:.3rem;}
.auth-card .sub{color:var(--muted);font-size:.9rem;margin-bottom:1.8rem;}
.type-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:1.5rem;}
.type-btn{border:2px solid var(--border);background:var(--card);border-radius:10px;padding:12px 8px;cursor:pointer;text-align:center;transition:all .2s;}
.type-btn:hover{border-color:var(--green-light);background:var(--green-pale);}
.type-btn.selected{border-color:var(--green);background:var(--green-pale);}
.type-btn .t-icon{font-size:1.5rem;margin-bottom:4px;}
.type-btn .t-label{font-size:0.8rem;font-weight:600;color:var(--text);}
.type-btn.selected .t-label{color:var(--green);}
.form-group{margin-bottom:1rem;}
.form-group label{display:block;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px;}
.form-group input,.form-group select{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.95rem;background:#fff;color:var(--text);transition:border-color .2s;outline:none;}
.form-group input:focus,.form-group select:focus{border-color:var(--green);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.extra-fields{display:none;}
.extra-fields.show{display:block;}
.form-submit{width:100%;margin-top:.5rem;}
.auth-switch{text-align:center;margin-top:1rem;font-size:.88rem;color:var(--muted);}
.auth-switch a{color:var(--green);font-weight:600;cursor:pointer;text-decoration:none;}
.auth-switch a:hover{text-decoration:underline;}
.terms-check{display:flex;align-items:flex-start;gap:10px;margin-top:.8rem;margin-bottom:.5rem;font-size:.84rem;color:var(--muted);line-height:1.5;}
.terms-check input[type=checkbox]{margin-top:2px;width:16px;height:16px;accent-color:var(--green);flex-shrink:0;}

/* PARENT VERIFY */
.verify-section{background:var(--amber-pale);border:1.5px solid #f0b66a;border-radius:12px;padding:1.2rem;margin-bottom:1rem;}
.verify-section h4{font-size:.9rem;font-weight:700;color:var(--amber);margin-bottom:.5rem;}
.verify-section p{font-size:.82rem;color:#7a4700;line-height:1.5;margin-bottom:.8rem;}
.verify-questions{display:flex;flex-direction:column;gap:8px;}
.verify-q{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #f0b66a;border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .2s;font-size:.85rem;line-height:1.4;color:var(--text);}
.verify-q:hover{background:#fff8ee;}
.verify-q.correct{background:var(--green-pale);border-color:var(--green);}
.verify-q.wrong{background:var(--red-pale);border-color:var(--red);}
.verify-q .vq-icon{font-size:1rem;flex-shrink:0;margin-top:1px;}

/* ALERTS */
.alert{padding:10px 14px;border-radius:8px;font-size:.85rem;margin-bottom:1rem;display:none;}
.alert.show{display:block;}
.alert-error{background:var(--red-pale);color:var(--red);border:1px solid #f5b7b1;}
.alert-success{background:var(--green-pale);color:var(--green);border:1px solid #95d5a8;}
.alert-info{background:var(--blue-pale);color:var(--blue);border:1px solid #93c5fd;}

/* EMAIL SENT */
.email-sent-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;}
.email-sent-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:3rem 2.5rem;width:100%;max-width:460px;text-align:center;box-shadow:var(--shadow-lg);}
.email-sent-icon{font-size:4rem;margin-bottom:1rem;}
.email-sent-card h2{font-family:'Fraunces',serif;font-size:1.7rem;color:var(--green);margin-bottom:.6rem;}
.email-sent-card p{color:var(--muted);font-size:.92rem;line-height:1.6;margin-bottom:1.5rem;}
.email-highlight{background:var(--green-pale);color:var(--green);font-weight:700;padding:3px 8px;border-radius:6px;}

/* VERIFY BANNER */
.verify-banner{background:var(--amber-pale);border-bottom:2px solid #f0b66a;padding:14px 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.verify-banner p{font-size:.88rem;color:#7a4700;}
.btn-resend{background:var(--amber);color:#fff;border:none;padding:7px 16px;border-radius:7px;font-family:'DM Sans',sans-serif;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;}

/* DASHBOARD */
.dashboard{max-width:1200px;margin:0 auto;padding:2rem 1.5rem;}
.dash-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:2rem;flex-wrap:wrap;gap:1rem;}
.dash-header h1{font-family:'Fraunces',serif;font-size:1.9rem;font-weight:700;color:var(--green);}
.dash-header p{color:var(--muted);font-size:.92rem;margin-top:2px;}

.tab-panel{display:none;}
.tab-panel.active{display:block;}
/* Labor law topic chips */
/* Dispute type chips */
.dispute-chip{background:var(--red-pale);color:var(--red);border:1.5px solid #f5b7b1;border-radius:20px;padding:5px 13px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .18s;}
.dispute-chip:hover{background:var(--red);color:#fff;border-color:var(--red);}
.dispute-chip.active{background:var(--red);color:#fff;border-color:var(--red);}
/* Labor law topic chips */
.law-chip{background:var(--amber-pale);color:#7a4700;border:1.5px solid #f0c070;border-radius:20px;padding:5px 13px;font-family:'DM Sans',sans-serif;font-size:.78rem;font-weight:700;cursor:pointer;transition:all .18s;}
.law-chip:hover{background:var(--amber);color:#fff;border-color:var(--amber);}
.law-chip.active{background:var(--amber);color:#fff;border-color:var(--amber);}
/* Parent desktop tab strip */
.pdtab{background:none;border:none;border-bottom:3px solid transparent;padding:8px 14px;font-family:"DM Sans",sans-serif;font-size:.85rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .18s;margin-bottom:-2px;border-radius:6px 6px 0 0;}
.pdtab:hover{color:var(--green);background:var(--green-pale);}
.pdtab.active{color:var(--green);border-bottom-color:var(--green);background:var(--green-pale);}
@media(max-width:768px){#parent-desktop-tabs,#teen-desktop-tabs,#employer-desktop-tabs{display:none!important;}}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:2rem;}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:1.2rem 1.4rem;box-shadow:var(--shadow);}
.stat-label{font-size:.76rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px;}
.stat-value{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:var(--green);line-height:1;}
.stat-sub{font-size:.78rem;color:var(--muted);margin-top:4px;}
.stat-card.amber .stat-value{color:var(--amber);}
.stat-card.blue .stat-value{color:var(--blue);}
.stat-card.purple .stat-value{color:var(--purple);}

/* SECTION */
.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem;}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.panel-head{padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.panel-head h2{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--text);}
.panel-head .badge{font-size:.73rem;font-weight:600;padding:3px 10px;border-radius:20px;}
.badge-green{background:var(--green-pale);color:var(--green);}
.badge-amber{background:var(--amber-pale);color:var(--amber);}
.badge-red{background:var(--red-pale);color:var(--red);}
.badge-blue{background:var(--blue-pale);color:var(--blue);}
.badge-purple{background:var(--purple-pale);color:var(--purple);}
.panel-body{padding:1.2rem 1.4rem;}

/* TOGGLE — kept for availability schedule in teen profile */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);}
.toggle-row:last-child{border-bottom:none;}
.toggle-info h4{font-size:.9rem;font-weight:600;margin-bottom:2px;}
.toggle-info p{font-size:.78rem;color:var(--muted);}
.toggle{position:relative;width:44px;height:24px;flex-shrink:0;}
.toggle input{opacity:0;width:0;height:0;}
.slider{position:absolute;inset:0;background:#ccc;border-radius:24px;cursor:pointer;transition:.3s;}
.slider:before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s;}
input:checked+.slider{background:var(--green);}
input:checked+.slider:before{transform:translateX(20px);}

/* PARENT CONTROL CARDS */
.ctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;}
@media(max-width:600px){.ctrl-grid{grid-template-columns:1fr;}}
.ctrl-card{position:relative;background:#fff;border:2px solid var(--border);border-radius:14px;padding:.9rem 1rem .9rem 1rem;cursor:pointer;transition:all .2s;user-select:none;display:flex;align-items:flex-start;gap:12px;}
.ctrl-card:hover{border-color:var(--green-light);box-shadow:0 2px 10px rgba(45,106,79,0.1);}
.ctrl-card.ctrl-on{border-color:var(--green);background:linear-gradient(135deg,#f6fcf9 0%,#eef8f3 100%);}
.ctrl-card.ctrl-danger.ctrl-on{border-color:var(--red);background:linear-gradient(135deg,#fff5f5 0%,#fde8e8 100%);}
.ctrl-card.ctrl-disabled{opacity:.65;cursor:not-allowed;pointer-events:none;}
.ctrl-checkbox{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:all .2s;font-size:.75rem;color:#fff;}
.ctrl-card.ctrl-on .ctrl-checkbox{background:var(--green);border-color:var(--green);}
.ctrl-card.ctrl-danger.ctrl-on .ctrl-checkbox{background:var(--red);border-color:var(--red);}
.ctrl-body{flex:1;min-width:0;}
.ctrl-title{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.3;}
.ctrl-card.ctrl-on .ctrl-title{color:var(--green);}
.ctrl-card.ctrl-danger.ctrl-on .ctrl-title{color:var(--red);}
.ctrl-desc{font-size:.75rem;color:var(--muted);line-height:1.45;}
.ctrl-pill{display:inline-flex;align-items:center;font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:20px;margin-top:5px;letter-spacing:.3px;}
.ctrl-pill-on{background:var(--green-pale);color:var(--green);}
.ctrl-pill-off{background:var(--bg);color:var(--muted);border:1px solid var(--border);}
.ctrl-pill-danger{background:var(--red-pale);color:var(--red);}
.ctrl-section-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin:14px 0 8px;}

/* JOB CARDS */
.job-card{border:1px solid var(--border);border-radius:12px;padding:1rem 1.1rem;margin-bottom:10px;background:#fff;transition:box-shadow .2s;}
.job-card:hover{box-shadow:var(--shadow);}
.job-card:last-child{margin-bottom:0;}
.job-card-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.job-title{font-weight:600;font-size:.95rem;}
.job-employer{font-size:.8rem;color:var(--muted);margin-top:2px;}
.job-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
.tag{font-size:.73rem;font-weight:500;padding:3px 9px;border-radius:6px;background:var(--bg);color:var(--muted);border:1px solid var(--border);}
.tag.pay{background:var(--green-pale);color:var(--green);border-color:transparent;}
.tag.status-pending{background:var(--amber-pale);color:var(--amber);border-color:transparent;}
.tag.status-accepted{background:var(--green-pale);color:var(--green);border-color:transparent;}
.tag.status-rejected{background:var(--red-pale);color:var(--red);border-color:transparent;}
.tag.status-applied{background:var(--blue-pale);color:var(--blue);border-color:transparent;}
.job-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.btn-sm{padding:5px 13px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .15s;}
.btn-approve{background:var(--green);color:#fff;}
.btn-approve:hover{background:#235c40;}
.btn-deny{background:var(--red-pale);color:var(--red);}
.btn-deny:hover{background:#f5b7b1;}
.btn-ai{background:var(--blue-pale);color:var(--blue);}
.btn-ai:hover{background:#bcd4f0;}
.btn-apply{background:var(--green);color:#fff;}
.btn-apply:hover{background:#235c40;}
.btn-amber{background:var(--amber-pale);color:var(--amber);}
.btn-purple{background:var(--purple-pale);color:var(--purple);}

.btn-calendar{background:#4285f4;color:#fff;border:none;padding:5px 13px;border-radius:7px;font-size:.8rem;font-weight:600;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all .15s;display:inline-flex;align-items:center;gap:5px;}
.btn-calendar:hover{background:#2b6dd1;}
.cal-sync-row{display:flex;align-items:center;gap:8px;margin-top:8px;flex-wrap:wrap;}
.cal-synced-badge{background:#e8f4fd;color:#4285f4;font-size:.75rem;font-weight:600;padding:3px 9px;border-radius:20px;border:1px solid #b3d4f5;}
/* City Scroller */
.city-scroller-wrap{position:relative;}
.city-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--green);border-radius:8px;z-index:200;max-height:200px;overflow-y:auto;box-shadow:0 4px 16px rgba(0,0,0,.12);}
.city-dropdown-item{padding:8px 12px;font-size:.88rem;cursor:pointer;transition:background .15s;border-bottom:1px solid var(--border);}
.city-dropdown-item:last-child{border-bottom:none;}
.city-dropdown-item:hover,.city-dropdown-item.highlighted{background:var(--green-pale);color:var(--green);}
.addr-result{padding:9px 12px;line-height:1.3;}
/* State rules banner */
.state-rules-banner{background:#dbeafe;border:1.5px solid #93c5fd;border-radius:10px;padding:10px 14px;font-size:.8rem;color:#1a5276;margin:0 1.4rem 10px;display:none;}
.state-rules-banner.show{display:block;}
.state-rules-banner strong{display:block;margin-bottom:3px;}

/* Work Permit Banner */
.permit-required-banner{background:#fff1e0;border:1.5px solid var(--amber);border-radius:10px;padding:10px 14px;font-size:.8rem;color:#7a4700;margin:0 1.4rem 10px;display:none;}
.permit-required-banner.show{display:block;}
.permit-required-banner strong{display:block;margin-bottom:3px;font-size:.85rem;}
.permit-required-banner a{color:var(--amber);font-weight:700;}
/* Weekly Hours Tracker */
.hours-tracker-card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:1rem 1.4rem;margin-bottom:1rem;box-shadow:var(--shadow);}
.hours-tracker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.hours-tracker-title{font-family:'Fraunces',serif;font-size:.95rem;font-weight:700;color:var(--text);}
.hours-bar-wrap{background:#e9e9e9;border-radius:20px;height:10px;overflow:hidden;margin-bottom:6px;}
.hours-bar-fill{height:100%;border-radius:20px;background:var(--green);transition:width .4s;}
.hours-bar-fill.warn{background:var(--amber);}
.hours-bar-fill.over{background:var(--red);}
.hours-tracker-meta{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);}
.hours-remaining-label{font-size:.82rem;font-weight:600;color:var(--green);}
.hours-remaining-label.warn{color:var(--amber);}
.hours-remaining-label.over{color:var(--red);}

.job-age-blocked{opacity:.45;pointer-events:none;position:relative;}
.job-age-blocked::after{content:'Age requirement not met';position:absolute;top:8px;right:8px;background:var(--red-pale);color:var(--red);font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:6px;}
.job-hours-warn{border-left:3px solid var(--amber);}
.hours-warn-tag{font-size:.73rem;color:var(--amber);font-weight:600;margin-top:4px;display:block;}
/* FILTERS */
.filters-bar{display:flex;gap:10px;flex-wrap:wrap;padding:1rem 1.4rem;background:var(--bg);border-bottom:1px solid var(--border);}
.filters-bar input,.filters-bar select{padding:7px 12px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.83rem;background:#fff;color:var(--text);outline:none;transition:border-color .2s;}
.filters-bar input:focus,.filters-bar select:focus{border-color:var(--green);}
.filter-label{font-size:.78rem;font-weight:600;color:var(--muted);align-self:center;}

/* RATINGS */
.rating-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:.88rem;}
.rating-row:last-child{border-bottom:none;}
.stars{color:#f59e0b;letter-spacing:1px;}
.rating-comment{font-size:.82rem;color:var(--text);margin-top:4px;font-style:italic;}

/* NOTIFICATIONS */
.notif{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);font-size:.88rem;}
.notif:last-child{border-bottom:none;}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:5px;}
.notif-dot.read{background:var(--border);}
.notif-text{line-height:1.4;}
.notif-time{font-size:.74rem;color:var(--muted);margin-top:2px;}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 8: MESSAGING MODAL
   Full chat UI inside a modal: sidebar contacts list,
   chat bubble area, and input bar. Adapts to full-screen
   on mobile (see @media 768px overrides above).
   ═══════════════════════════════════════════════════════ */
/* ══ MESSAGING ══ */
.msg-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;display:none;align-items:center;justify-content:center;padding:1rem;}
.msg-modal-overlay.open{display:flex;}
.msg-modal{background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);width:100%;max-width:780px;height:min(90vh,620px);display:flex;overflow:hidden;}
.msg-sidebar{width:240px;flex-shrink:0;border-right:1px solid var(--border);display:flex;flex-direction:column;background:#faf8f3;}
.msg-sidebar-head{padding:1rem 1rem .8rem;border-bottom:1px solid var(--border);}
.msg-sidebar-head h3{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--green);margin-bottom:.4rem;}
.msg-search{width:100%;padding:6px 10px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.8rem;background:#fff;outline:none;}
.msg-search:focus{border-color:var(--green);}
.msg-contacts{flex:1;overflow-y:auto;}
.msg-contact{display:flex;align-items:center;gap:10px;padding:10px 1rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background .15s;}
.msg-contact:hover{background:var(--green-pale);}
.msg-contact.active{background:var(--green-pale);border-left:3px solid var(--green);}
.msg-contact-avatar{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.msg-contact-avatar.employer{background:var(--blue);}
.msg-contact-avatar.parent{background:var(--amber);}
.msg-contact-info{flex:1;min-width:0;}
.msg-contact-name{font-size:.83rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.msg-contact-preview{font-size:.73rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.msg-contact-badge{background:var(--green);color:#fff;border-radius:10px;font-size:.65rem;font-weight:700;padding:1px 6px;flex-shrink:0;}
.msg-main{flex:1;display:flex;flex-direction:column;min-width:0;}
.msg-header{padding:.85rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;background:#fff;}
.msg-header-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;}
.msg-header-info h4{font-weight:700;font-size:.9rem;color:var(--text);}
.msg-header-info p{font-size:.76rem;color:var(--muted);}
.msg-header-close{margin-left:auto;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--muted);padding:4px;}
.msg-header-close:hover{color:var(--text);}
.msg-body{flex:1;overflow-y:auto;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.msg-bubble-row{display:flex;align-items:flex-end;gap:8px;margin-bottom:2px;}
.msg-bubble-row.me{flex-direction:row-reverse;}
.msg-bubble{max-width:72%;padding:10px 14px;border-radius:18px;font-size:.85rem;line-height:1.55;word-break:break-word;position:relative;box-shadow:0 1px 2px rgba(0,0,0,0.06);}
.msg-bubble.them{background:#fff;border:1px solid var(--border);color:var(--text);border-bottom-left-radius:4px;}
.msg-bubble.me{background:#0b93f6;color:#fff;border-bottom-right-radius:4px;}
.msg-bubble-time{font-size:.66rem;color:var(--muted);white-space:nowrap;margin-bottom:3px;padding:0 4px;}
.msg-bubble-row.me .msg-bubble-time{text-align:right;color:rgba(11,147,246,0.55);}
.msg-blocked{background:var(--red-pale);border:1px solid #f5b7b1;border-radius:10px;padding:10px 14px;font-size:.78rem;color:var(--red);display:flex;align-items:flex-start;gap:8px;margin:.5rem 0;line-height:1.5;max-width:100%;word-break:break-word;}
.msg-blocked-icon{font-size:1.1rem;flex-shrink:0;line-height:1;}
.msg-blocked-label{font-weight:700;display:block;margin-bottom:2px;font-size:.8rem;}
.msg-blocked-detail{font-size:.74rem;color:#943232;}
.msg-input-bar{padding:.75rem 1rem;border-top:1px solid var(--border);background:#fff;display:flex;gap:8px;align-items:flex-end;}
.msg-input{flex:1;padding:8px 12px;border:1.5px solid var(--border);border-radius:10px;font-family:'DM Sans',sans-serif;font-size:.88rem;resize:none;min-height:38px;max-height:90px;outline:none;transition:border-color .2s;}
.msg-input:focus{border-color:var(--green);}
.msg-send-btn{background:var(--green);color:#fff;border:none;border-radius:10px;padding:8px 16px;font-family:'DM Sans',sans-serif;font-size:.85rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;flex-shrink:0;}
.msg-send-btn:hover{background:#235c40;}
.msg-safety-notice{background:var(--amber-pale);border-top:1px solid #f0b66a;padding:5px 1rem;font-size:.72rem;color:#7a4700;display:flex;align-items:center;gap:5px;}
.msg-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--muted);gap:8px;}
.msg-empty-state .icon{font-size:2.5rem;}
.msg-empty-state p{font-size:.88rem;text-align:center;}
/* msg nav badge */
.nav-msg-badge{background:#e74c3c;color:#fff;border-radius:10px;font-size:.62rem;font-weight:700;padding:1px 5px;margin-left:4px;vertical-align:middle;}
/* inline msg button in job cards */
.btn-msg{background:var(--green-pale);color:var(--green);border:1px solid var(--green-light);}
.btn-msg:hover{background:#b7e4c7;}

/* TEEN PROFILE */
.teen-profile-card{background:linear-gradient(135deg,var(--green) 0%,#1a4f38 100%);border-radius:16px;padding:1.5rem;color:#fff;margin-bottom:1rem;}
.teen-avatar{width:52px;height:52px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:10px;}
.teen-name{font-family:'Fraunces',serif;font-size:1.2rem;font-weight:700;}
.teen-info{font-size:.82rem;opacity:.8;margin-top:4px;}
.teen-rating{font-size:1rem;margin-top:8px;}

/* JOB BROWSE GRID */
.jobs-grid{display:grid;gap:12px;}
.browse-card{background:#fff;border:1px solid var(--border);border-radius:14px;padding:1.2rem;transition:all .2s;cursor:default;}
.browse-card:hover{box-shadow:var(--shadow);border-color:var(--green-light);}
.browse-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px;}
.browse-title{font-weight:700;font-size:1rem;color:var(--text);}
.browse-employer{font-size:.82rem;color:var(--muted);margin-top:2px;}
.browse-desc{font-size:.83rem;color:var(--muted);line-height:1.5;margin-bottom:10px;}
.browse-actions{display:flex;gap:8px;flex-wrap:wrap;}

/* EMPLOYER */
.post-form{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1.5rem;}
.post-form h3{font-family:'Fraunces',serif;font-size:1.2rem;color:var(--green);margin-bottom:1rem;}
.applicant-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1rem;margin-bottom:10px;}
.applicant-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;}
.applicant-name{font-weight:700;font-size:.95rem;}
.applicant-info{font-size:.8rem;color:var(--muted);margin-top:2px;}
.applicant-skills{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;}

/* AI CHAT */
.ai-chat-box{background:var(--green-pale);border:1px solid var(--green-light);border-radius:12px;padding:1rem;margin-bottom:1rem;}
.ai-chat-box p{font-size:.85rem;line-height:1.6;color:var(--text);white-space:pre-wrap;}
.ai-input-row{display:flex;gap:8px;}
.ai-input-row input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.9rem;outline:none;}
.ai-input-row input:focus{border-color:var(--green);}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--card);border-radius:20px;padding:2rem;max-width:560px;width:90%;box-shadow:var(--shadow-lg);animation:slideUp .25s ease;max-height:85vh;overflow-y:auto;}
.modal h3{font-family:'Fraunces',serif;font-size:1.3rem;color:var(--green);margin-bottom:.5rem;}
.modal .ai-response{background:var(--green-pale);border-radius:10px;padding:1rem;font-size:.88rem;line-height:1.6;color:var(--text);margin:1rem 0;min-height:80px;white-space:pre-wrap;}
.modal-close{background:var(--border);border:none;padding:8px 20px;border-radius:8px;cursor:pointer;font-family:'DM Sans',sans-serif;font-weight:600;font-size:.88rem;}
.terms-modal-inner h4{font-size:.95rem;font-weight:700;color:var(--text);margin:1.2rem 0 .4rem;}
.terms-modal-inner p{font-size:.85rem;color:var(--muted);line-height:1.7;margin-bottom:.5rem;}
.terms-modal-inner ul{padding-left:1.2rem;font-size:.85rem;color:var(--muted);line-height:1.8;}
@keyframes slideUp{from{transform:translateY(20px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.loading-dots::after{content:'...';animation:dots 1.2s infinite;}
@keyframes dots{0%,20%{content:'.';}40%,60%{content:'..';}80%,100%{content:'...'}}

/* RESUME */
.resume-card{background:linear-gradient(135deg,#1a5276,#2980b9);color:#fff;border-radius:16px;padding:1.5rem;margin-bottom:1rem;}
.resume-card h3{font-family:'Fraunces',serif;font-size:1.1rem;margin-bottom:.5rem;}
.resume-card p{font-size:.82rem;opacity:.85;line-height:1.5;}
.skill-pill{display:inline-block;background:rgba(255,255,255,.2);border-radius:20px;padding:3px 10px;font-size:.75rem;margin:3px;}

/* RESPONSIVE */
@media(max-width:768px){
  .stats-row{grid-template-columns:repeat(2,1fr);}
  .section-grid{grid-template-columns:1fr;}
  .landing-cards{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 6: VERIFICATION MODULE
   Styles for the multi-step teen identity verification flow:
   Tier 1 (identity) → Tier 2 (parent consent) →
   Tier 3 (work permit) → Tier 4 (optional background check).
   ═══════════════════════════════════════════════════════ */
/* ══ VERIFY MODULE STYLES ══ */
#page-verify .tw-ver-wrap{max-width:780px;margin:0 auto;padding:2rem 1.5rem;}
.tw-ver-page-title{font-family:'Fraunces',serif;font-size:1.8rem;font-weight:700;color:var(--green);margin-bottom:.3rem;}
.tw-ver-page-sub{color:var(--muted);font-size:.9rem;margin-bottom:2rem;}
.tw-ver-tier-bar{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.4rem 1.8rem;margin-bottom:1.8rem;box-shadow:var(--shadow);}
.tw-ver-tier-label{font-size:.76rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:10px;}
.tw-ver-tiers{display:flex;align-items:center;gap:0;position:relative;}
.tw-ver-tier-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative;z-index:1;}
.tw-ver-tier-circle{width:36px;height:36px;border-radius:50%;border:2px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:1rem;transition:all .3s;}
.tw-ver-tier-circle.done{background:var(--green);border-color:var(--green);color:#fff;}
.tw-ver-tier-circle.active{background:var(--amber);border-color:var(--amber);color:#fff;}
.tw-ver-tier-circle.paid{background:#7c3aed;border-color:#7c3aed;color:#fff;}
.tw-ver-tier-name{font-size:.72rem;font-weight:600;color:var(--muted);margin-top:6px;text-align:center;white-space:nowrap;}
.tw-ver-tier-line{flex:1;height:3px;background:var(--border);margin-top:-18px;z-index:0;transition:background .3s;}
.tw-ver-tier-line.done{background:var(--green);}
.tw-ver-steps{display:flex;flex-direction:column;gap:14px;margin-bottom:1.8rem;}
.tw-ver-step{background:var(--card);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;transition:border-color .2s;}
.tw-ver-step.done{border-color:var(--green-light);}
.tw-ver-step.active{border-color:var(--amber);box-shadow:0 0 0 3px rgba(231,111,0,.08);}
.tw-ver-step.locked{opacity:.55;}
.tw-ver-step.premium{border-color:#a78bfa;}
.tw-ver-step-head{display:flex;align-items:center;gap:14px;padding:1.1rem 1.4rem;cursor:pointer;user-select:none;}
.tw-ver-step-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.tw-ver-step-icon.green{background:var(--green-pale);}
.tw-ver-step-icon.amber{background:var(--amber-pale);}
.tw-ver-step-icon.blue{background:var(--blue-pale);}
.tw-ver-step-icon.purple{background:#ede9fe;}
.tw-ver-step-icon.red{background:var(--red-pale);}
.tw-ver-step-info{flex:1;}
.tw-ver-step-title{font-weight:700;font-size:.93rem;color:var(--text);margin-bottom:2px;}
.tw-ver-step-desc{font-size:.79rem;color:var(--muted);}
.tw-ver-step-status{font-size:.72rem;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap;flex-shrink:0;}
.tw-ver-step-status.done{background:var(--green-pale);color:var(--green);}
.tw-ver-step-status.active{background:var(--amber-pale);color:var(--amber);}
.tw-ver-step-status.locked{background:var(--bg);color:var(--muted);border:1px solid var(--border);}
.tw-ver-step-status.premium{background:#ede9fe;color:#6d28d9;}
.tw-ver-step-body{display:none;padding:0 1.4rem 1.3rem;border-top:1px solid var(--border);}
.tw-ver-step-body.open{display:block;}
.tw-ver-field{margin-bottom:.9rem;margin-top:.9rem;}
.tw-ver-field label{display:block;font-size:.79rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--text);margin-bottom:5px;}
.tw-ver-field input,.tw-ver-field select,.tw-ver-field textarea{width:100%;padding:9px 13px;border:1.5px solid var(--border);border-radius:8px;font-family:'DM Sans',sans-serif;font-size:.9rem;background:#fff;color:var(--text);outline:none;transition:border-color .2s;}
.tw-ver-field input:focus,.tw-ver-field select:focus,.tw-ver-field textarea:focus{border-color:var(--green);}
.tw-ver-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.tw-ver-upload{border:2px dashed var(--border);border-radius:10px;padding:1.2rem;text-align:center;cursor:pointer;transition:all .2s;background:var(--bg);font-size:.84rem;color:var(--muted);}
.tw-ver-upload:hover,.tw-ver-upload.has-file{border-color:var(--green);color:var(--green);background:var(--green-pale);}
.tw-ver-consent{display:flex;flex-direction:column;gap:8px;margin:.8rem 0;}
.tw-ver-consent-item{display:flex;align-items:flex-start;gap:10px;font-size:.83rem;color:var(--text);line-height:1.5;}
.tw-ver-consent-item input[type=checkbox]{margin-top:2px;width:15px;height:15px;accent-color:var(--green);flex-shrink:0;}
.tw-ver-law-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:.8rem;}
.tw-ver-law-pill{border-radius:10px;padding:10px 13px;font-size:.8rem;border:1px solid var(--border);background:#fff;}
.tw-ver-law-pill .tw-ver-pill-label{font-weight:700;margin-bottom:2px;}
.tw-ver-law-pill .tw-ver-pill-val{color:var(--muted);font-size:.76rem;}
.tw-ver-law-pill.ok{border-color:var(--green-light);background:var(--green-pale);}
.tw-ver-law-pill.warn{border-color:#f0b66a;background:var(--amber-pale);}
.tw-ver-bgc-price{display:flex;align-items:center;justify-content:space-between;background:#f5f3ff;border:1.5px solid #a78bfa;border-radius:12px;padding:1rem 1.2rem;margin:.8rem 0;}
.tw-ver-bgc-price-label{font-size:.85rem;color:#4c1d95;font-weight:600;}
.tw-ver-bgc-price-amount{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:#6d28d9;}
.tw-ver-bgc-features{display:flex;flex-direction:column;gap:5px;margin-bottom:1rem;}
.tw-ver-bgc-feature{font-size:.81rem;color:#4c1d95;}
.tw-ver-bgc-feature::before{content:'✓ ';font-weight:700;}
.tw-ver-ai-box{background:var(--green-pale);border-radius:10px;padding:.9rem 1rem;font-size:.84rem;line-height:1.6;color:var(--text);margin-top:.8rem;min-height:60px;white-space:pre-wrap;display:none;}
.tw-ver-ai-box.show{display:block;}
.tw-ver-btn{padding:9px 22px;border-radius:9px;font-size:.86rem;font-weight:700;cursor:pointer;border:none;font-family:'DM Sans',sans-serif;transition:all .2s;}
.tw-ver-btn.primary{background:var(--green);color:#fff;}
.tw-ver-btn.primary:hover{background:#235c40;}
.tw-ver-btn.amber{background:var(--amber);color:#fff;}
.tw-ver-btn.purple{background:#7c3aed;color:#fff;}
.tw-ver-btn.purple:hover{background:#5b21b6;}
.tw-ver-btn.ghost{background:var(--bg);color:var(--muted);border:1.5px solid var(--border);}
.tw-ver-btn.ghost:hover{border-color:var(--green);color:var(--green);}
.tw-ver-badge-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:.8rem;}
.tw-ver-badge{display:flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:.77rem;font-weight:700;white-space:nowrap;}
.tw-ver-badge.identity{background:var(--green-pale);color:var(--green);}
.tw-ver-badge.parent{background:var(--blue-pale);color:var(--blue);}
.tw-ver-badge.permit{background:var(--amber-pale);color:var(--amber);}
.tw-ver-badge.bgc{background:#ede9fe;color:#6d28d9;}
.tw-ver-badge.locked{background:var(--bg);color:var(--muted);border:1px solid var(--border);filter:grayscale(1);}
.tw-ver-employer-score{display:flex;align-items:center;gap:1rem;background:#fce7f3;border-radius:12px;padding:1rem 1.2rem;margin-top:.8rem;}
.tw-ver-employer-score-ring{font-family:'Fraunces',serif;font-size:2rem;font-weight:700;color:#9d174d;min-width:52px;text-align:center;line-height:1;}
.tw-ver-employer-score-label{font-size:.82rem;color:#9d174d;font-weight:600;}
.tw-ver-employer-score-sub{font-size:.76rem;color:#be185d;margin-top:2px;}
@media(max-width:600px){.tw-ver-row{grid-template-columns:1fr;}.tw-ver-law-grid{grid-template-columns:1fr;}}

/* ═══════════════════════════════════════════════════════
   CSS SECTION 7: LESSONS MODULE
   Cards + modal overlay for the in-app workplace training
   lessons. Includes quiz answer styles (correct/wrong states).
   ═══════════════════════════════════════════════════════ */
/* ══ LESSONS MODULE ══ */
.lessons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:1.5rem;}
.lesson-card{background:var(--card);border:1.5px solid var(--border);border-radius:14px;overflow:hidden;cursor:pointer;transition:all .2s;}
.lesson-card:hover{box-shadow:var(--shadow);border-color:var(--green-light);transform:translateY(-2px);}
.lesson-card.done{border-color:var(--green);background:#f0fdf4;}
.lesson-card-top{padding:1.2rem 1.2rem .8rem;display:flex;align-items:flex-start;gap:12px;}
.lesson-icon{font-size:2rem;flex-shrink:0;}
.lesson-title{font-family:'Fraunces',serif;font-size:1rem;font-weight:700;color:var(--text);margin-bottom:3px;}
.lesson-meta{font-size:.76rem;color:var(--muted);}
.lesson-card-bottom{padding:.6rem 1.2rem .9rem;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--border);}
.lesson-progress{font-size:.76rem;font-weight:600;}
.lesson-btn{font-size:.76rem;font-weight:700;padding:4px 12px;border-radius:6px;border:none;cursor:pointer;font-family:'DM Sans',sans-serif;}
.lesson-btn.start{background:var(--green);color:#fff;}
.lesson-btn.done{background:var(--green-pale);color:var(--green);}
.lesson-btn.resume{background:var(--amber-pale);color:var(--amber);}
.lesson-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;align-items:center;justify-content:center;}
.lesson-modal-overlay.open{display:flex;}
.lesson-modal{background:var(--card);border-radius:20px;width:90%;max-width:620px;max-height:88vh;overflow-y:auto;box-shadow:var(--shadow-lg);animation:slideUp .25s ease;}
.lesson-modal-head{background:var(--green);padding:1.5rem 1.8rem;color:#fff;}
.lesson-modal-head h2{font-family:'Fraunces',serif;font-size:1.4rem;font-weight:700;margin-bottom:.3rem;}
.lesson-modal-head p{font-size:.85rem;opacity:.85;}
.lesson-modal-body{padding:1.5rem 1.8rem;}
.lesson-step{display:none;}
.lesson-step.active{display:block;}
.lesson-step-num{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);margin-bottom:.6rem;}
.lesson-step h3{font-family:'Fraunces',serif;font-size:1.15rem;color:var(--green);margin-bottom:.8rem;}
.lesson-step p{font-size:.9rem;color:var(--text);line-height:1.7;margin-bottom:.9rem;}
.lesson-tip{background:var(--green-pale);border-left:4px solid var(--green);border-radius:0 8px 8px 0;padding:.8rem 1rem;font-size:.85rem;color:var(--text);margin:.8rem 0;line-height:1.6;}
.lesson-tip strong{color:var(--green);}
.lesson-warning{background:var(--amber-pale);border-left:4px solid var(--amber);border-radius:0 8px 8px 0;padding:.8rem 1rem;font-size:.85rem;color:#7a4700;margin:.8rem 0;line-height:1.6;}
.lesson-quiz{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:1.1rem;margin:1rem 0;}
.lesson-quiz p{font-weight:600;margin-bottom:.8rem;}
.lesson-quiz-opts{display:flex;flex-direction:column;gap:8px;}
.lesson-quiz-opt{background:#fff;border:1.5px solid var(--border);border-radius:8px;padding:.7rem 1rem;cursor:pointer;font-size:.88rem;transition:all .2s;}
.lesson-quiz-opt:hover{border-color:var(--green-light);background:var(--green-pale);}
.lesson-quiz-opt.correct{background:var(--green-pale);border-color:var(--green);color:var(--green);font-weight:600;}
.lesson-quiz-opt.wrong{background:var(--red-pale);border-color:var(--red);color:var(--red);}
.lesson-nav{display:flex;justify-content:space-between;align-items:center;margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--border);}
.lesson-progress-bar{height:4px;background:var(--border);border-radius:2px;margin:1rem 1.8rem 0;}
.lesson-progress-fill{height:100%;background:var(--green);border-radius:2px;transition:width .4s;}
.lessons-progress-row{display:flex;gap:10px;align-items:center;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.9rem 1.2rem;margin-bottom:1.5rem;}
.lessons-progress-row .stat-value{font-family:'Fraunces',serif;font-size:1.6rem;font-weight:700;color:var(--green);}
.lessons-progress-row p{font-size:.8rem;color:var(--muted);}

/* ══ RATING NOTES & SUGGESTIONS ══ */
.rating-note-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:.6rem .9rem;margin-top:6px;font-size:.8rem;color:var(--text);line-height:1.5;}
.rating-note-box strong{color:var(--green);}
.rating-suggestions{background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:1.5rem;}
.rating-suggestions .panel-head{padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.rating-suggestions .panel-head h2{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:700;color:var(--text);}
.sug-list{padding:1rem 1.4rem;display:flex;flex-direction:column;gap:10px;}
.sug-item{display:flex;gap:12px;align-items:flex-start;padding:.85rem 1rem;background:var(--bg);border-radius:10px;border:1px solid var(--border);}
.sug-icon{font-size:1.3rem;flex-shrink:0;margin-top:1px;}
.sug-text h4{font-size:.88rem;font-weight:700;color:var(--text);margin-bottom:2px;}
.sug-text p{font-size:.79rem;color:var(--muted);line-height:1.4;}
.sug-item.green{border-color:var(--green-light);background:var(--green-pale);}
.sug-item.amber{border-color:#f0b66a;background:var(--amber-pale);}
.controls-status-badge{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--green-pale);color:var(--green);}
.controls-status-badge.off{background:var(--red-pale);color:var(--red);}
/* ═══════════════════════════════════════════════════════
   CSS SECTION 9: CONTROLS, RATINGS & MISC
   Notification preference badges, rating rows, gamification
   suggestion items, and status indicators.
   ═══════════════════════════════════════════════════════ */