/* =========================================================
   KioskProof Design System
   Palette: deep trust-navy, verified-teal, secure-gold accents
   Fonts: Sora (display/headings) + Inter (body/UI)
   ========================================================= */

:root{
  --cg-navy-950:#050e1f;
  --cg-navy-900:#0a1a33;
  --cg-navy-800:#0f2547;
  --cg-navy-700:#163564;
  --cg-navy-600:#1d4585;
  --cg-blue-500:#2e63b8;
  --cg-blue-400:#4f83d9;
  --cg-teal-500:#1a9d4c;
  --cg-teal-400:#2ec765;
  --cg-gold-500:#c9a349;
  --cg-gold-400:#e0c26f;
  --cg-red-500:#d64545;
  --cg-amber-500:#e0a326;

  --cg-bg:#ffffff;
  --cg-bg-panel:#ffffff;
  --cg-bg-sunken:#f5f8fb;
  --cg-border:#dde5f0;
  --cg-border-strong:#c3d0e3;

  --cg-text-900:#0c1930;
  --cg-text-700:#33415c;
  --cg-text-500:#5c6b85;
  --cg-text-muted:#8695ac;
  --cg-text-on-dark:#eaf1fb;
  --cg-text-on-dark-muted:#9db1cf;

  --cg-shadow-xs: 0 1px 1px rgba(10,26,51,0.05);
  --cg-shadow-sm: 0 1px 2px rgba(10,26,51,0.06), 0 1px 1px rgba(10,26,51,0.04);
  --cg-shadow-md: 0 6px 16px rgba(10,26,51,0.10), 0 2px 6px rgba(10,26,51,0.06);
  --cg-shadow-lg: 0 20px 45px rgba(6,16,36,0.18), 0 6px 18px rgba(6,16,36,0.10);
  --cg-shadow-xl: 0 32px 70px rgba(5,14,31,0.28), 0 10px 24px rgba(5,14,31,0.14);
  --cg-accent-gradient: linear-gradient(135deg, var(--cg-blue-500), var(--cg-teal-500) 130%);

  --cg-radius-sm:8px;
  --cg-radius-md:12px;
  --cg-radius-lg:18px;
  --cg-radius-pill:999px;

  --cg-font-display:'Sora', 'Segoe UI', sans-serif;
  --cg-font-body:'Inter', 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--cg-font-body);
  color:var(--cg-text-900);
  background:var(--cg-bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{
  font-family:var(--cg-font-display);
  color:var(--cg-navy-900);
  margin:0 0 .5em;
  line-height:1.15;
}
p{ margin:0 0 1em; color:var(--cg-text-700); line-height:1.6; }
a{ color:var(--cg-blue-500); text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }

.container{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--cg-radius-sm);
  font-weight:600; font-size:15px; cursor:pointer; border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-primary{ background:var(--cg-teal-500); color:#fff; box-shadow:var(--cg-shadow-sm); }
.btn-primary:hover{ background:var(--cg-teal-400); box-shadow:var(--cg-shadow-md); }
.btn-navy{ background:var(--cg-navy-800); color:#fff; }
.btn-navy:hover{ background:var(--cg-navy-700); }
.btn-outline{ background:transparent; border-color:var(--cg-border-strong); color:var(--cg-navy-800); }
.btn-outline:hover{ border-color:var(--cg-blue-500); color:var(--cg-blue-500); }
.btn-outline-light{ background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.35); color:#fff; }
.btn-outline-light:hover{ background:rgba(255,255,255,0.14); }
.btn-danger{ background:var(--cg-red-500); color:#fff; }
.btn-danger:hover{ filter:brightness(1.08); }
.btn-ghost{ background:transparent; color:var(--cg-text-700); }
.btn-ghost:hover{ background:var(--cg-bg-sunken); }
.btn-sm{ padding:8px 14px; font-size:13px; border-radius:7px; }
.btn-block{ width:100%; }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

/* ---------- Badges / Trust seals ---------- */
.seal{
  display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--cg-radius-pill);
  background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.18);
  color:var(--cg-text-on-dark); font-size:13px; font-weight:600; letter-spacing:.2px;
}
.seal .seal-ico{ font-size:16px; }
.seal-light{
  background:#fff; border:1px solid var(--cg-border); color:var(--cg-navy-800);
  box-shadow:var(--cg-shadow-sm);
}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:var(--cg-radius-pill);
  font-size:12px; font-weight:700; letter-spacing:.3px; text-transform:uppercase;
}
.badge-teal{ background:rgba(15,174,127,0.12); color:#0b7c5b; }
.badge-gold{ background:rgba(201,163,73,0.16); color:#8a6d1f; }
.badge-blue{ background:rgba(46,99,184,0.12); color:#1d4585; }
.badge-red{ background:rgba(214,69,69,0.12); color:#a92f2f; }
.badge-gray{ background:var(--cg-bg-sunken); color:var(--cg-text-500); }

/* ---------- Cards / Panels ---------- */
.panel{
  background:var(--cg-bg-panel); border:1px solid var(--cg-border);
  border-radius:var(--cg-radius-lg); box-shadow:var(--cg-shadow-sm);
}
.panel-pad{ padding:22px; }

/* ---------- Forms ---------- */
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--cg-text-700); margin-bottom:6px; }
.field .hint{ font-size:12px; color:var(--cg-text-muted); margin-top:5px; }
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=datetime-local],input[type=number],select,textarea{
  width:100%; padding:11px 13px; border-radius:8px; border:1.5px solid var(--cg-border-strong);
  background:#fff; font-size:14.5px; color:var(--cg-text-900); font-family:inherit;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--cg-blue-500); box-shadow:0 0 0 3px rgba(46,99,184,0.14);
}
textarea{ resize:vertical; min-height:80px; }
.input-with-icon{ position:relative; }
.input-with-icon input{ padding-right:44px; }
.icon-btn{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:6px; border:none; background:transparent;
  color:var(--cg-text-500); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px;
}
.icon-btn:hover{ background:var(--cg-bg-sunken); color:var(--cg-navy-800); }

/* Masked value pill (post-save reveal) */
.mask-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; background:var(--cg-bg-sunken); border-radius:8px; border:1px solid var(--cg-border);
}
.mask-row .mask-label{ font-size:12px; color:var(--cg-text-500); font-weight:600; }
.mask-row .mask-value{ font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:14px; letter-spacing:1px; color:var(--cg-text-900); }
.mask-toggle{
  border:1px solid var(--cg-border-strong); background:#fff; border-radius:6px;
  width:30px; height:30px; cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--cg-text-700);
}
.mask-toggle:hover{ border-color:var(--cg-blue-500); color:var(--cg-blue-500); }

/* ---------- Utility ---------- */
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; } .gap-24{ gap:24px; }
.mt-8{margin-top:8px;} .mt-12{margin-top:12px;} .mt-16{margin-top:16px;} .mt-24{margin-top:24px;} .mt-32{margin-top:32px;}
.mb-8{margin-bottom:8px;} .mb-12{margin-bottom:12px;} .mb-16{margin-bottom:16px;} .mb-24{margin-bottom:24px;}
.text-center{ text-align:center; }
.text-muted{ color:var(--cg-text-muted); }
.text-sm{ font-size:13px; }
.w-100{ width:100%; }

/* ---------- Toast ---------- */
#toast-stack{ position:fixed; top:20px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:10px; }
.toast{
  min-width:260px; max-width:360px; padding:14px 16px; border-radius:10px; color:#fff;
  background:var(--cg-navy-800); box-shadow:var(--cg-shadow-lg); font-size:14px; font-weight:500;
  animation:toast-in .25s ease;
}
.toast.success{ background:#0b7c5b; }
.toast.error{ background:var(--cg-red-500); }
.toast.warn{ background:var(--cg-amber-500); color:#3a2a02; }
@keyframes toast-in{ from{ opacity:0; transform:translateY(-8px);} to{opacity:1; transform:translateY(0);} }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(6,14,30,0.55); backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.modal{
  background:#fff; border-radius:var(--cg-radius-lg); box-shadow:var(--cg-shadow-lg);
  width:100%; max-width:480px; padding:26px; max-height:88vh; overflow-y:auto;
  animation:modal-pop .18s cubic-bezier(.2,.9,.32,1.2);
}
.modal-wide{ max-width:640px; }
.modal-header{ display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; }
.modal-close{ border:none; background:transparent; font-size:20px; cursor:pointer; color:var(--cg-text-muted); line-height:1; }
.modal-close:hover{ color:var(--cg-text-900); }
@keyframes modal-pop{ from{ opacity:0; transform:scale(.96) translateY(6px);} to{ opacity:1; transform:scale(1) translateY(0);} }

/* =========================================================
   UI PRIMITIVES — accordion groups, dropdown menus, motion utilities.
   Shared by admin.html and the employee portal so every collapsible
   section / contextual menu / entrance animation in the design uses one
   system instead of a bespoke pattern per feature.
   ========================================================= */
.acc-group{ border:1px solid var(--cg-border); border-radius:var(--cg-radius-md); background:#fff; overflow:hidden; margin-bottom:10px; }
.acc-header{
  display:flex; align-items:center; gap:10px; padding:12px 14px; cursor:pointer;
  font-weight:700; font-size:13.5px; color:var(--cg-navy-900); user-select:none;
}
.acc-header:hover{ background:var(--cg-bg-sunken); }
.acc-header .acc-ico{ font-size:15px; flex:none; }
.acc-header .acc-chev{ margin-left:auto; color:var(--cg-text-muted); font-size:12px; transition:transform .2s ease; flex:none; }
.acc-group.open .acc-header .acc-chev{ transform:rotate(90deg); }
.acc-group.open .acc-header{ border-bottom:1px solid var(--cg-border); }
.acc-body{ max-height:0; overflow:hidden; transition:max-height .28s ease; }
.acc-group.open .acc-body{ max-height:4000px; }
.acc-body-inner{ padding:14px; }
.acc-group.acc-flush{ border:none; border-radius:0; box-shadow:none; margin-bottom:0; }
.acc-group.acc-flush .acc-body-inner{ padding:6px 0 2px; }

/* Kebab / dropdown menu */
.menu{ position:relative; display:inline-block; }
.menu-trigger{
  width:30px; height:30px; border-radius:7px; border:1px solid var(--cg-border-strong); background:#fff;
  color:var(--cg-text-500); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; font-size:15px;
}
.menu-trigger:hover{ border-color:var(--cg-blue-500); color:var(--cg-blue-500); }
.menu-list{
  position:absolute; right:0; top:calc(100% + 6px); min-width:180px; background:#fff; border:1px solid var(--cg-border);
  border-radius:10px; box-shadow:var(--cg-shadow-lg); padding:6px; z-index:60; display:none;
  animation:modal-pop .15s ease;
}
.menu.open .menu-list{ display:block; }
.menu-item{
  display:flex; align-items:center; gap:8px; width:100%; padding:8px 10px; border-radius:6px; border:none;
  background:transparent; font-size:13px; font-weight:600; color:var(--cg-text-700); cursor:pointer; text-align:left;
  white-space:nowrap;
}
.menu-item:hover{ background:var(--cg-bg-sunken); }
.menu-item.danger{ color:var(--cg-red-500); }
.menu-item:disabled{ opacity:.5; cursor:not-allowed; }

/* Float / hover-lift */
.card-float{ transition:transform .18s ease, box-shadow .18s ease; }
.card-float:hover{ transform:translateY(-3px); box-shadow:var(--cg-shadow-md); }

/* Stream-in staggered entrance (set --i per item for the stagger) */
@keyframes stream-in{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.stream-in{ animation:stream-in .32s ease both; animation-delay:calc(var(--i, 0) * 45ms); }

/* =========================================================
   MARKETING SITE (index.html)
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--cg-border);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--cg-font-display); font-weight:700; font-size:20px; color:var(--cg-navy-900); }
.brand .brand-mark{
  width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--cg-shadow-sm); flex:none;
}
.brand .brand-mark svg{ width:100%; height:100%; display:block; }
.nav-links{ display:flex; align-items:center; gap:30px; }
.nav-links a{ color:var(--cg-text-500); font-weight:600; font-size:14.5px; }
.nav-links a:hover{ color:var(--cg-navy-900); }
.nav-toggle{
  display:none; width:40px; height:40px; border-radius:8px; border:1px solid var(--cg-border-strong);
  background:#fff; align-items:center; justify-content:center; font-size:19px; cursor:pointer; flex:none;
}
.nav-links-mobile-only{ display:none; }

.hero{
  position:relative; overflow:hidden;
  background:radial-gradient(1200px 600px at 15% -10%, #163564 0%, var(--cg-navy-900) 55%, var(--cg-navy-950) 100%);
  padding:88px 0 70px; color:#fff;
}
.hero-floaters{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.hero .container.hero-grid{ position:relative; z-index:1; }
.floating-icon{
  position:absolute; font-size:30px; opacity:0.16; filter:drop-shadow(0 6px 12px rgba(0,0,0,0.35));
  animation:cg-float 7s ease-in-out infinite;
}
@keyframes cg-float{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-18px) rotate(8deg); }
}
.word-rotate{ position:relative; display:inline-block; vertical-align:bottom; }
.word-rotate .wr-item{
  display:none; white-space:nowrap;
  color:var(--cg-teal-400); font-weight:800;
}
.word-rotate .wr-item.active{ display:inline-block; animation:cg-flash 1.6s ease, cg-word-in .4s ease; }
@keyframes cg-word-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }
@keyframes cg-flash{
  0%{ text-shadow:0 0 0 rgba(46,199,101,0); }
  18%{ text-shadow:0 0 20px rgba(46,199,101,0.85); }
  100%{ text-shadow:0 0 0 rgba(46,199,101,0); }
}
.hero-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:var(--cg-radius-pill);
  background:rgba(28,207,154,0.12); border:1px solid rgba(28,207,154,0.35); color:var(--cg-teal-400);
  font-size:13px; font-weight:700; letter-spacing:.4px; margin-bottom:22px;
}
.hero h1{ color:#fff; font-size:44px; line-height:1.12; letter-spacing:-.5px; margin-bottom:20px; }
.hero h1 .accent{ color:var(--cg-teal-400); }
.hero p.lead{ color:var(--cg-text-on-dark-muted); font-size:17px; max-width:520px; margin-bottom:30px; }
.hero-cta{ display:flex; gap:14px; margin-bottom:38px; }
.hero-seals{ display:flex; flex-wrap:wrap; gap:10px; }

.hero-visual{
  background:linear-gradient(160deg, rgba(255,255,255,0.07), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.14); border-radius:var(--cg-radius-lg); padding:26px;
  box-shadow:var(--cg-shadow-lg);
}
.scan-card{ background:rgba(6,16,36,0.55); border:1px solid rgba(255,255,255,0.1); border-radius:14px; padding:18px; margin-bottom:12px; }
.scan-card:last-child{ margin-bottom:0; }
.scan-row{ display:flex; align-items:center; justify-content:space-between; }
.scan-row .label{ font-size:13px; color:var(--cg-text-on-dark-muted); font-weight:600; }
.scan-status{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:13.5px; }
.dot{ width:9px; height:9px; border-radius:50%; }
.dot-green{ background:var(--cg-teal-400); box-shadow:0 0 0 4px rgba(28,207,154,0.18); }
.dot-amber{ background:var(--cg-amber-500); box-shadow:0 0 0 4px rgba(224,163,38,0.18); }

.section{ padding:80px 0; }
.section-head{ max-width:640px; margin:0 auto 48px; text-align:center; }
.section-head .kicker{ color:var(--cg-blue-500); font-weight:700; font-size:13px; letter-spacing:.6px; text-transform:uppercase; margin-bottom:10px; display:block; }
.section-alt{ background:var(--cg-bg-sunken); }

.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }

.service-card{
  background:#fff; border:1px solid var(--cg-border); border-radius:var(--cg-radius-lg);
  padding:26px; box-shadow:var(--cg-shadow-sm); transition:transform .15s ease, box-shadow .15s ease;
}
.service-card:hover{ transform:translateY(-3px); box-shadow:var(--cg-shadow-md); }
.service-icon{
  width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  font-size:23px; margin-bottom:16px; background:linear-gradient(135deg,rgba(46,99,184,0.14),rgba(15,174,127,0.14));
}
.service-card h3{ font-size:18px; margin-bottom:8px; }
.service-card p{ font-size:14.5px; margin-bottom:0; }

.step-row{ display:flex; gap:22px; align-items:flex-start; }
.step-num{
  flex:none; width:40px; height:40px; border-radius:50%; background:var(--cg-navy-800); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family:var(--cg-font-display);
}
.step-row h4{ margin-bottom:4px; font-size:16px; }
.step-row p{ font-size:14px; margin-bottom:0; }

.trust-strip{ background:var(--cg-navy-950); padding:36px 0; }
.trust-strip .container{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }

.cta-band{
  background:linear-gradient(120deg, var(--cg-navy-800), var(--cg-navy-700));
  border-radius:var(--cg-radius-lg); padding:56px; text-align:center; color:#fff; margin:0 24px;
  box-shadow:var(--cg-shadow-lg);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:var(--cg-text-on-dark-muted); }

.site-footer{ background:var(--cg-navy-950); color:var(--cg-text-on-dark-muted); padding:50px 0 26px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px; margin-bottom:36px; }
.footer-grid h5{ color:#fff; font-size:13px; letter-spacing:.4px; text-transform:uppercase; margin-bottom:14px; }
.footer-grid a{ color:var(--cg-text-on-dark-muted); font-size:14px; }
.footer-grid li{ margin-bottom:9px; }
.footer-grid a:hover{ color:#fff; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,0.08); padding-top:22px; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; flex-wrap:wrap; gap:10px; }

/* =========================================================
   AUTH (login.html)
   ========================================================= */
.auth-shell{ min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.auth-brand-side{
  background:radial-gradient(900px 500px at 20% 0%, #1d4585 0%, var(--cg-navy-900) 60%, var(--cg-navy-950) 100%);
  color:#fff; padding:56px; display:flex; flex-direction:column; justify-content:space-between;
}
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px; background:var(--cg-bg); }
.auth-card{ width:100%; max-width:420px; }
.auth-tabs{ display:flex; gap:6px; background:var(--cg-bg-sunken); padding:5px; border-radius:10px; margin-bottom:26px; }
.auth-tab{
  flex:1; text-align:center; padding:10px; border-radius:7px; font-weight:600; font-size:14px; cursor:pointer;
  color:var(--cg-text-500); border:none; background:transparent;
}
.auth-tab.active{ background:#fff; color:var(--cg-navy-800); box-shadow:var(--cg-shadow-sm); }
.sq-row{ display:grid; grid-template-columns:1fr; gap:10px; }
.divider-text{ display:flex; align-items:center; gap:12px; color:var(--cg-text-muted); font-size:12px; margin:18px 0; }
.divider-text::before,.divider-text::after{ content:""; flex:1; height:1px; background:var(--cg-border); }
.brand-feature{ display:flex; gap:12px; margin-bottom:16px; align-items:flex-start; }
.brand-feature .fi{ font-size:19px; }
.brand-feature b{ display:block; font-size:14px; margin-bottom:2px; }
.brand-feature span{ font-size:13px; color:var(--cg-text-on-dark-muted); }

/* =========================================================
   APP SHELL (dashboard.html / admin.html)
   ========================================================= */
.app-shell{ min-height:100vh; display:flex; flex-direction:column; }
.app-topbar{
  height:68px; background:var(--cg-navy-900); color:#fff; display:flex; align-items:center;
  justify-content:space-between; padding:0 24px; position:sticky; top:0; z-index:50; box-shadow:0 2px 10px rgba(0,0,0,0.15);
}
.app-topbar .brand{ font-size:17px; color:#fff; }
.topbar-left{ display:flex; align-items:center; gap:12px; min-width:0; }
.topbar-right{ display:flex; align-items:center; gap:18px; }
.sidebar-toggle{
  display:none; width:38px; height:38px; border-radius:8px; border:1px solid rgba(255,255,255,0.25);
  background:rgba(255,255,255,0.08); color:#fff; align-items:center; justify-content:center; font-size:18px; cursor:pointer; flex:none;
}
.sidebar-backdrop{ display:none; }
.hello-txt{ font-size:14.5px; color:var(--cg-text-on-dark-muted); }
.hello-txt b{ color:#fff; }
.pay-pill{
  display:flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
  padding:6px 12px; border-radius:var(--cg-radius-pill); font-size:13px;
}
.pay-pill b{ color:var(--cg-teal-400); }
.clock-widget{ display:flex; align-items:center; gap:10px; }
.clock-time{ font-family:'SFMono-Regular',Menlo,Consolas,monospace; font-size:13px; color:var(--cg-text-on-dark-muted); min-width:64px; text-align:right; }

.app-body{ flex:1; display:flex; }
.app-sidebar{
  width:270px; flex:none; background:#fff; border-right:1px solid var(--cg-border); padding:20px 14px;
  min-height:calc(100vh - 68px);
}
.side-nav-item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:8px; font-size:14px; font-weight:600;
  color:var(--cg-text-700); cursor:pointer; margin-bottom:4px;
}
.side-nav-item:hover{ background:var(--cg-bg-sunken); }
.side-nav-item.active{ background:rgba(46,99,184,0.1); color:var(--cg-blue-500); }
.side-divider{ height:1px; background:var(--cg-border); margin:14px 0; }
.side-label{ font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--cg-text-muted); padding:0 12px; margin-bottom:8px; }

/* Sidebar nav groups (collapsible sections of side-nav-items) + desktop icon-collapse mode */
.side-group{ margin-bottom:6px; }
.side-group-head{
  display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; border:none; background:transparent;
  border-radius:8px; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
  color:var(--cg-text-muted); text-align:left;
}
.side-group-head:hover{ background:var(--cg-bg-sunken); color:var(--cg-text-700); }
.side-group-head .sg-chev{ margin-left:auto; font-size:11px; transition:transform .18s ease; }
.side-group.open .side-group-head .sg-chev{ transform:rotate(90deg); }
.side-group-body{ max-height:0; overflow:hidden; transition:max-height .25s ease; }
.side-group.open .side-group-body{ max-height:600px; }
.app-sidebar.collapsed{ width:72px; padding:20px 10px; }
.app-sidebar.collapsed .side-group-head span:not(.sg-chev),
.app-sidebar.collapsed .side-group-head .sg-chev,
.app-sidebar.collapsed .side-nav-item .snt,
.app-sidebar.collapsed .side-divider{ display:none; }
.app-sidebar.collapsed .side-group-body{ max-height:none !important; }
.app-sidebar.collapsed .side-nav-item{ justify-content:center; padding:11px; }
.app-sidebar.collapsed .side-group-head{ justify-content:center; padding:9px; }
.sidebar-collapse-toggle{
  display:none; width:100%; align-items:center; justify-content:center; gap:6px; padding:9px; margin-top:10px;
  border:1px dashed var(--cg-border-strong); border-radius:8px; background:transparent; color:var(--cg-text-muted);
  cursor:pointer; font-size:12px; font-weight:600;
}
.sidebar-collapse-toggle:hover{ color:var(--cg-blue-500); border-color:var(--cg-blue-500); }
@media (min-width:769px){ .sidebar-collapse-toggle{ display:flex; } }

.onboard-btn{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:13px 14px; border-radius:10px; border:1.5px solid var(--cg-amber-500);
  background:rgba(224,163,38,0.09); color:#7a5c0e; font-weight:700; font-size:14px; cursor:pointer; margin-bottom:6px;
}
.onboard-btn .chev{ transition:transform .18s ease; }
.onboard-btn.open .chev{ transform:rotate(90deg); }
.onboard-btn.complete{ border-color:var(--cg-teal-500); background:rgba(15,174,127,0.09); color:#0b7c5b; }
.onboard-progress{ height:6px; border-radius:4px; background:var(--cg-bg-sunken); overflow:hidden; margin:8px 2px 14px; }
.onboard-progress-fill{ height:100%; background:var(--cg-teal-500); transition:width .3s ease; }
.doc-list{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; max-height:0; overflow:hidden; transition:max-height .25s ease; }
.doc-list.open{ max-height:2000px; }
.doc-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 10px; border-radius:8px; font-size:13px; cursor:pointer; border:1px solid transparent;
}
.doc-item:hover{ background:var(--cg-bg-sunken); }
.doc-item .doc-name{ display:flex; align-items:center; gap:8px; color:var(--cg-text-700); font-weight:500; }
.doc-check{ width:18px; height:18px; border-radius:5px; border:1.5px solid var(--cg-border-strong); display:flex; align-items:center; justify-content:center; font-size:11px; flex:none; }
.doc-check.done{ background:var(--cg-teal-500); border-color:var(--cg-teal-500); color:#fff; }

.app-main{ flex:1; padding:28px 30px; max-width:1100px; }
.page-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; }
.page-title p{ margin:2px 0 0; }

.loc-grid{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.loc-row{ background:#fff; border:1px solid var(--cg-border); border-radius:var(--cg-radius-md); overflow:hidden; box-shadow:var(--cg-shadow-sm); transition:transform .16s ease, box-shadow .16s ease; }
.loc-row:hover{ transform:translateY(-2px); box-shadow:var(--cg-shadow-md); }
.loc-row-head{ display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; }
.loc-row-chevron{ color:var(--cg-text-500); font-size:13px; transition:transform .15s ease; flex:none; }
.loc-row.open .loc-row-chevron{ transform:rotate(90deg); }
.loc-row-info{ flex:1; min-width:0; }
.loc-row-biz{ font-weight:700; font-size:14.5px; }
.loc-row-addr{ font-size:12.5px; color:var(--cg-text-500); }
.loc-row.completed .loc-row-biz{ text-decoration:line-through; color:var(--cg-text-500); }
.loc-row-map{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.loc-row-map.open{ max-height:220px; border-top:1px solid var(--cg-border); }
.loc-row-map iframe{ width:100%; height:180px; border:none; display:block; background:var(--cg-bg-sunken); filter:saturate(0.85); }

.orientation-date-grid,.orientation-time-grid{ display:flex; flex-wrap:wrap; gap:8px; }
.orientation-date-btn{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 14px; border:1.5px solid var(--cg-border-strong); border-radius:10px; background:#fff; cursor:pointer; font-family:inherit; transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.orientation-date-btn:hover{ transform:translateY(-2px); box-shadow:var(--cg-shadow-sm); border-color:var(--cg-blue-500); }
.orientation-date-btn .odb-dow{ font-size:11px; color:var(--cg-text-500); text-transform:uppercase; letter-spacing:.03em; }
.orientation-date-btn .odb-date{ font-weight:700; font-size:14px; color:var(--cg-text-900); }
.orientation-date-btn.selected{ border-color:var(--cg-teal-500); background:rgba(26,157,76,0.08); }
.orientation-time-btn{ padding:10px 14px; border:1.5px solid var(--cg-border-strong); border-radius:8px; background:#fff; cursor:pointer; font-family:inherit; font-weight:600; font-size:13.5px; color:var(--cg-text-900); transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.orientation-time-btn:hover{ border-color:var(--cg-blue-500); transform:translateY(-2px); box-shadow:var(--cg-shadow-sm); }

/* Admin job-location pool management (distinct from the employee dashboard collapsed list above) */
.admin-loc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-bottom:20px; }
.loc-card{ background:#fff; border:1px solid var(--cg-border); border-radius:var(--cg-radius-md); overflow:hidden; box-shadow:var(--cg-shadow-sm); transition:transform .16s ease, box-shadow .16s ease; }
.loc-card:hover{ transform:translateY(-2px); box-shadow:var(--cg-shadow-md); }
.loc-map{ height:120px; width:100%; border:none; display:block; background:var(--cg-bg-sunken); filter:saturate(0.85); }
.loc-body{ padding:14px 16px; }
.loc-body .biz{ font-weight:700; font-size:15px; margin-bottom:2px; }
.loc-body .addr{ font-size:13px; color:var(--cg-text-500); margin-bottom:10px; }
.loc-meta{ display:flex; align-items:center; justify-content:space-between; }
@media (max-width:720px){
  .admin-loc-grid{ grid-template-columns:1fr; }
}

.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:24px; }
.stat-card{ background:#fff; border:1px solid var(--cg-border); border-radius:var(--cg-radius-md); padding:18px; box-shadow:var(--cg-shadow-sm); transition:transform .16s ease, box-shadow .16s ease; }
.stat-card:hover{ transform:translateY(-2px); box-shadow:var(--cg-shadow-md); }
.stat-card .stat-label{ font-size:12px; color:var(--cg-text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:6px; }
.stat-card .stat-value{ font-family:var(--cg-font-display); font-size:26px; color:var(--cg-navy-900); font-weight:700; }

table{ width:100%; border-collapse:collapse; font-size:14px; }
th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--cg-text-muted); padding:10px 12px; border-bottom:1.5px solid var(--cg-border); }
td{ padding:12px; border-bottom:1px solid var(--cg-border); color:var(--cg-text-700); vertical-align:middle; }
tr:last-child td{ border-bottom:none; }
.table-wrap{ overflow-x:auto; }
.pay-input{ width:110px !important; padding:7px 9px !important; }

.tabbar{ display:flex; gap:4px; background:var(--cg-bg-sunken); padding:4px; border-radius:10px; margin-bottom:22px; width:fit-content; }
.tabbar button{ border:none; background:transparent; padding:9px 16px; border-radius:7px; font-weight:600; font-size:13.5px; color:var(--cg-text-500); cursor:pointer; }
.tabbar button.active{ background:#fff; color:var(--cg-navy-800); box-shadow:var(--cg-shadow-sm); }

.empty-state{ text-align:center; padding:50px 20px; color:var(--cg-text-muted); }
.empty-state .ico{ font-size:34px; margin-bottom:10px; }

/* ---------------- Top stat boxes (earnings / locked deposit) ---------------- */
.hero-stat-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:24px; }
.hero-stat-box{
  border-radius:var(--cg-radius-lg); padding:22px 24px; color:#fff; position:relative; overflow:hidden;
  box-shadow:var(--cg-shadow-md); transition:transform .18s ease, box-shadow .18s ease;
}
.hero-stat-box:hover{ transform:translateY(-3px); box-shadow:var(--cg-shadow-xl); }
.hero-stat-box.earnings{ background:linear-gradient(135deg,#124a2b,#1a9d4c 70%); }
.hero-stat-box.deposit{ background:linear-gradient(135deg,#16305c,#1d4585 75%); }
.hero-stat-box .hs-label{ font-size:12.5px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; opacity:.85; margin-bottom:8px; }
.hero-stat-box .hs-value{ font-family:var(--cg-font-display); font-size:32px; font-weight:700; margin-bottom:4px; }
.hero-stat-box .hs-sub{ font-size:13px; opacity:.85; }
.hero-stat-box .hs-icon{ position:absolute; right:16px; top:16px; font-size:26px; opacity:.35; }

/* ---------------- Lockable admin fields ---------------- */
.lock-field{ border:1px solid var(--cg-border); border-radius:10px; padding:14px 16px; margin-bottom:12px; background:#fbfcfe; }
.lock-field.is-locked{ background:#f3f6fa; }
.lock-field .lock-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:10px; }
.lock-field .lock-head b{ font-size:13.5px; }
.lock-status{ font-size:11.5px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:999px; }
.lock-status.on{ color:#0b7c5b; background:rgba(26,157,76,0.12); }
.lock-status.off{ color:#a92f2f; background:rgba(214,69,69,0.12); }
.lock-field fieldset{ border:none; padding:0; margin:0; display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.lock-field fieldset[disabled]{ opacity:.6; }
.lock-field .lf-actions{ display:flex; gap:8px; margin-top:10px; }

/* ---------------- Employee accordion (admin) ---------------- */
.emp-card{ border:1px solid var(--cg-border); border-radius:var(--cg-radius-md); background:#fff; margin-bottom:14px; box-shadow:var(--cg-shadow-sm); overflow:hidden; transition:box-shadow .16s ease; }
.emp-card:hover{ box-shadow:var(--cg-shadow-md); }
.emp-card-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; cursor:pointer; gap:12px; flex-wrap:wrap; }
.emp-card-head .emp-id b{ font-size:15px; }
.emp-card-head .emp-id span{ display:block; font-size:12.5px; color:var(--cg-text-muted); }
.emp-card-body{ display:none; padding:0 18px 18px; border-top:1px solid var(--cg-border); }
.emp-card-body.open{ display:block; padding-top:16px; }
.clock-access-btn{ border:1.5px solid; border-radius:999px; padding:6px 14px; font-size:12.5px; font-weight:700; cursor:pointer; background:#fff; }
.clock-access-btn.locked{ color:#a92f2f; border-color:#e3b3b3; background:rgba(214,69,69,0.06); }
.clock-access-btn.unlocked{ color:#0b7c5b; border-color:#a9dcc5; background:rgba(26,157,76,0.06); }

/* ---------------- Applications & Journeys (dense/professional layout) ---------------- */
.stat-row-sm{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin-bottom:14px; }
.stat-card-sm{ background:#fff; border:1px solid var(--cg-border); border-radius:8px; padding:10px 12px; box-shadow:var(--cg-shadow-sm); transition:transform .14s ease, box-shadow .14s ease; }
.stat-card-sm:hover{ transform:translateY(-2px); box-shadow:var(--cg-shadow-md); }
.stat-card-sm .stat-label{ font-size:10px; color:var(--cg-text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.3px; margin-bottom:3px; }
.stat-card-sm .stat-value{ font-family:var(--cg-font-display); font-size:19px; color:var(--cg-navy-900); font-weight:700; }

.apps-subhead{ font-size:12px; font-weight:700; color:var(--cg-navy-900); margin:0 0 8px; text-transform:uppercase; letter-spacing:.3px; }
.apps-panel-row{ display:grid; grid-template-columns:1.1fr 1fr; gap:16px; margin-bottom:10px; align-items:start; }
.apps-notif-list{ max-height:200px; overflow-y:auto; }
.apps-notif-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px; border:1px solid var(--cg-border); border-radius:7px; margin-bottom:6px; font-size:12px; background:#fff; }

.apps-toolbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin:12px 0 10px; }

.table-compact{ font-size:12px; width:100%; border-collapse:collapse; }
.table-compact th{ font-size:10px; text-transform:uppercase; letter-spacing:.3px; color:var(--cg-text-muted); padding:6px 8px; text-align:left; border-bottom:1px solid var(--cg-border); white-space:nowrap; }
.table-compact td{ padding:6px 8px; border-bottom:1px solid var(--cg-border); vertical-align:middle; }

.apps-table tr.apps-row{ cursor:pointer; background:#fff; }
.apps-table tr.apps-row:hover{ background:var(--cg-bg-sunken); }
.apps-table tr.apps-row.archived-row{ opacity:.55; }
.apps-name b{ font-size:12px; }
.apps-name span{ display:block; font-size:10.5px; color:var(--cg-text-muted); }

.j-pill{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:19px; padding:0 5px; border-radius:5px; font-size:10px; font-weight:700; }
.j-pill.sent{ background:rgba(15,174,127,0.14); color:#0b7c5b; }
.j-pill.scheduled{ background:var(--cg-bg-sunken); color:var(--cg-text-500); }
.j-pill.none{ background:transparent; color:var(--cg-border-strong); }

.apps-detail-cell{ background:var(--cg-bg-sunken); padding:10px 14px !important; }
.apps-journey-row{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:6px 0; border-bottom:1px dashed var(--cg-border); font-size:11.5px; flex-wrap:wrap; }
.apps-journey-row:last-child{ border-bottom:none; }

.badge-sm{ font-size:9.5px; padding:2px 6px; }
.btn-xs{ padding:4px 9px; font-size:11px; border-radius:6px; }
.panel-pad-sm{ padding:10px 14px; }
.input-sm{ font-size:12px; padding:5px 8px; border-radius:6px; }

@media (max-width:900px){ .apps-panel-row{ grid-template-columns:1fr; } }

/* ---------------- Job info bullet lists (application landing view) ---------------- */
.job-info-list{ list-style:none; padding:0; margin:0 0 8px; }
.job-info-list li{ position:relative; padding:5px 0 5px 26px; font-size:14.5px; color:var(--cg-text-700); line-height:1.5; }
.job-info-list li::before{ content:"✓"; position:absolute; left:0; top:5px; color:var(--cg-teal-500); font-weight:700; }

/* ---------------- Notification badges ---------------- */
.nav-badge{
  margin-left:auto; background:var(--cg-red-500); color:#fff; font-size:11px; font-weight:700;
  padding:1px 7px; border-radius:999px; line-height:1.5;
}
.mail-badge{ position:relative; display:inline-flex; }
.mail-badge .dot-badge{
  position:absolute; top:-3px; right:-3px; width:10px; height:10px; border-radius:50%;
  background:var(--cg-red-500); border:2px solid #fff;
}

/* ---------------- Bubbly walkthrough intro ---------------- */
.bubble-shell{ max-width:560px; margin:0 auto; }
.bubble-intro{
  text-align:center; padding:46px 34px; border-radius:24px;
  background:linear-gradient(160deg,#eafaf1,#eef4fd); border:1px solid var(--cg-border);
}
.bubble-illustration{ font-size:58px; margin-bottom:18px; animation:cg-bob 3s ease-in-out infinite; display:inline-block; }
@keyframes cg-bob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.bubble-intro h2{ margin-bottom:10px; }
.bubble-intro p{ max-width:400px; margin:0 auto 6px; }
.bubble-dots{ display:flex; gap:8px; justify-content:center; margin-top:26px; }
.bubble-dot{ width:9px; height:9px; border-radius:50%; background:var(--cg-border-strong); transition:all .25s ease; }
.bubble-dot.active{ background:var(--cg-teal-500); width:24px; border-radius:5px; }
.bubble-actions{ display:flex; justify-content:center; gap:12px; margin-top:26px; }

/* ---------------- Schedule builder ---------------- */
.sched-status-banner{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border-radius:12px; margin-bottom:20px; border:1px solid var(--cg-border);
}
.sched-status-banner.draft{ background:var(--cg-bg-sunken); }
.sched-status-banner.submitted{ background:rgba(224,163,38,0.08); border-color:rgba(224,163,38,0.35); }
.sched-status-banner.approved{ background:rgba(26,157,76,0.08); border-color:rgba(26,157,76,0.3); }
.sched-status-banner.rejected{ background:rgba(214,69,69,0.08); border-color:rgba(214,69,69,0.3); }
.sched-day-row{
  display:flex; align-items:center; gap:14px; padding:12px 14px; border:1.5px solid var(--cg-border);
  border-radius:10px; margin-bottom:8px; background:#fff; flex-wrap:wrap;
  transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.sched-day-row:hover{ transform:translateY(-1px); box-shadow:var(--cg-shadow-sm); }
.sched-day-row.working{ border-color:var(--cg-teal-500); background:rgba(26,157,76,0.04); }
.sched-day-date{ width:120px; font-weight:700; font-size:13.5px; flex:none; }
.sched-day-date span{ display:block; font-weight:500; font-size:12px; color:var(--cg-text-muted); }
.sched-day-toggle{ display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--cg-text-700); flex:none; }
.sched-time-inputs{ display:flex; align-items:center; gap:8px; flex:1; min-width:220px; }
.sched-time-inputs input{ max-width:130px; }
.sched-time-inputs span{ color:var(--cg-text-muted); font-size:13px; }
.notes-panel{ border-radius:12px; padding:16px 18px; background:var(--cg-bg-sunken); border:1px solid var(--cg-border); margin-bottom:20px; }
.notes-panel .np-head{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--cg-text-muted); margin-bottom:6px; }

/* ---------------- Support / messages ---------------- */
.msg-bubble{ background:#fff; border:1px solid var(--cg-border); border-radius:12px; padding:14px 16px; margin-bottom:12px; transition:box-shadow .16s ease, border-color .16s ease; }
.msg-bubble:hover{ box-shadow:var(--cg-shadow-sm); border-color:var(--cg-border-strong); }
.msg-bubble .msg-meta{ font-size:12px; color:var(--cg-text-muted); margin-bottom:6px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.msg-bubble .msg-body{ font-size:14.5px; color:var(--cg-text-900); white-space:pre-wrap; }
.msg-bubble .msg-body a{ color:var(--cg-teal-500); text-decoration:underline; word-break:break-word; }
.msg-reply{ margin-top:12px; padding-top:12px; border-top:1px dashed var(--cg-border-strong); }
.msg-reply .mr-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; color:var(--cg-teal-500); margin-bottom:5px; }
.msg-admin-reply-box textarea{ margin-bottom:8px; }

/* ---------------- Clock lock banner ---------------- */
.clock-lock-banner{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 16px; border-radius:10px; margin-bottom:20px;
  background:rgba(214,69,69,0.08); border:1px solid rgba(214,69,69,0.3); color:#a92f2f; font-size:13.5px; font-weight:600;
}
.clock-lock-banner.info{ background:rgba(46,99,184,0.08); border-color:rgba(46,99,184,0.3); color:#1d4585; }

/* ---------------- Careers / job cards ---------------- */
.job-card{
  background:#fff; border:1.5px solid var(--cg-border); border-radius:var(--cg-radius-lg);
  padding:26px; box-shadow:var(--cg-shadow-sm); position:relative;
}
.job-card.open{ border-color:var(--cg-teal-500); box-shadow:0 0 0 3px rgba(26,157,76,0.1), var(--cg-shadow-md); }
.job-card.disabled{ background:var(--cg-bg-sunken); filter:grayscale(0.6); opacity:0.72; }
.job-card.disabled h3, .job-card.disabled p{ color:var(--cg-text-muted); }
.job-card .job-badge{ position:absolute; top:22px; right:22px; }
.job-card-title{ margin-bottom:10px; padding-right:90px; }
.conviction-notice{
  display:flex; gap:12px; align-items:flex-start; padding:16px 18px; border-radius:12px;
  background:rgba(224,163,38,0.09); border:1px solid rgba(224,163,38,0.35); margin:26px 0;
}
.conviction-notice .cn-ico{ font-size:22px; flex:none; }
.conviction-notice p{ margin:0; font-size:14px; color:#7a5c0e; }

/* ---------------- Application-style pages (candidate-facing) ---------------- */
.app-page-shell{ min-height:100vh; background:var(--cg-bg-sunken); padding:40px 20px 60px; }
.app-page-card{ max-width:720px; margin:0 auto; background:#fff; border-radius:var(--cg-radius-lg); box-shadow:var(--cg-shadow-md); padding:38px 42px; }
.app-page-header{ text-align:center; margin-bottom:28px; }
.app-page-header .brand-mark{ margin:0 auto 14px; width:52px; height:52px; }
.form-section-title{ font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--cg-blue-500); margin:26px 0 14px; padding-top:18px; border-top:1px solid var(--cg-border); }
.form-section-title:first-of-type{ border-top:none; padding-top:0; margin-top:0; }

.form-progress{ position:sticky; top:74px; z-index:20; background:#fff; border-bottom:1px solid var(--cg-border); padding:12px 0; }
.form-progress-label{ font-size:12.5px; font-weight:700; color:var(--cg-text-muted); margin-bottom:8px; }
.form-progress-track{ height:6px; border-radius:999px; background:var(--cg-bg-sunken); overflow:hidden; }
.form-progress-fill{ height:100%; border-radius:999px; background:var(--cg-teal-500); transition:width .25s ease; }
.field-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.radio-pill-group{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{ display:flex; align-items:center; gap:7px; border:1.5px solid var(--cg-border-strong); border-radius:999px; padding:9px 16px; font-size:13.5px; font-weight:600; cursor:pointer; color:var(--cg-text-700); }
.radio-pill input{ accent-color:var(--cg-teal-500); }
.radio-pill.checked{ border-color:var(--cg-teal-500); background:rgba(26,157,76,0.07); color:#0b7c5b; }
.radio-pill.disabled{ opacity:0.45; cursor:not-allowed; }
.upload-drop{ border:2px dashed var(--cg-border-strong); border-radius:12px; padding:22px; text-align:center; color:var(--cg-text-muted); font-size:13.5px; cursor:pointer; }
.upload-drop.has-file{ border-color:var(--cg-teal-500); background:rgba(26,157,76,0.05); color:#0b7c5b; font-weight:600; }
.confirm-box{ text-align:center; padding:50px 30px; }
.confirm-box .ci{ font-size:52px; margin-bottom:16px; }

@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .grid-4{ grid-template-columns:repeat(2,1fr); }
  .grid-3{ grid-template-columns:1fr; }
  .grid-2{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .auth-shell{ grid-template-columns:1fr; }
  .auth-brand-side{ display:none; }
  .loc-row-head{ flex-wrap:wrap; }
  .app-sidebar{ width:220px; }
  .hero-stat-row{ grid-template-columns:1fr; }
  .field-row-2{ grid-template-columns:1fr; }
  .app-page-card{ padding:28px 22px; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
}

/* =========================================================
   MOBILE (phones + small tablets)
   ========================================================= */
@media (max-width: 768px){
  .container{ padding:0 18px; }

  /* Marketing site nav collapses into a dropdown panel */
  .site-header .container{ position:relative; }
  .nav-toggle{ display:flex; }
  .header-login-btn{ display:none; }
  .nav-links-mobile-only{ display:block; }
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--cg-border); box-shadow:var(--cg-shadow-md);
    padding:8px 18px 14px; z-index:99;
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 2px; border-bottom:1px solid var(--cg-border); }
  .nav-links a:last-child{ border-bottom:none; }

  /* App shell: sidebar becomes an off-canvas drawer */
  .sidebar-toggle{ display:flex; }
  .app-body{ position:relative; }
  .app-sidebar{
    position:fixed; top:60px; bottom:0; left:0; z-index:70;
    width:82vw; max-width:300px; overflow-y:auto;
    transform:translateX(-100%); transition:transform .25s ease;
    box-shadow:var(--cg-shadow-lg);
  }
  .app-sidebar.open{ transform:translateX(0); }
  .sidebar-backdrop.open{
    display:block; position:fixed; top:60px; left:0; right:0; bottom:0;
    background:rgba(6,14,30,0.45); z-index:65;
  }
  .app-main{ padding:20px 16px; max-width:100%; }

  /* Topbar: fixed 68px height is too tall/cramped on phones — shrink and drop low-priority items */
  .app-topbar{ height:60px; padding:0 14px; gap:8px; }
  .app-topbar .brand{ font-size:15px; }
  .hello-txt{ display:none; }
  .pay-pill{ display:none; }
  .topbar-right{ gap:8px; }

  .page-title{ flex-wrap:wrap; gap:10px; }
  .page-title > div:first-child{ min-width:0; }

  table{ font-size:13px; }
  th,td{ padding:9px 10px; }

  .modal{ padding:20px; }
  .modal-backdrop{ padding:14px; }

  .cta-band{ padding:36px 22px; margin:0 16px; }
  .hero{ padding:56px 0 46px; }
  .hero h1{ font-size:32px; }
  .section{ padding:52px 0; }

  /* Employee portal: dense rows need to wrap cleanly on tablets/phones */
  .loc-row-head{ flex-wrap:wrap; padding:12px 14px; }
  .loc-row-head .btn{ margin-left:auto; }
  .hero-stat-box .hs-value{ font-size:27px; }
  .msg-bubble{ padding:12px 14px; }
  .bubble-intro{ padding:34px 22px; }
  .emp-card-head{ gap:8px; }
}

@media (max-width: 480px){
  .app-topbar{ flex-wrap:wrap; height:auto; min-height:56px; padding:8px 14px; row-gap:6px; }
  .topbar-right{ flex-wrap:wrap; justify-content:flex-end; gap:6px; }
  .topbar-left{ gap:8px; }

  .hero h1{ font-size:27px; }
  .hero p.lead{ font-size:15px; }
  .hero-eyebrow{ font-size:12px; padding:5px 12px; }
  .hero-cta{ flex-direction:column; gap:10px; }
  .hero-cta .btn{ width:100%; }
  .hero-floaters{ display:none; }
  .hero-seals{ gap:8px; }

  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:8px; }

  .job-card{ padding:20px; }
  .job-card-title{ padding-right:0; }
  .job-card .job-badge{ position:static; display:inline-flex; margin-bottom:10px; }

  .app-page-shell{ padding:22px 10px 40px; }
  .app-page-card{ padding:20px 14px; }
  .auth-form-side{ padding:22px; }
  .conviction-notice{ flex-direction:column; }

  .modal{ padding:16px; max-width:100%; }
  .modal-backdrop{ padding:8px; }

  .stat-row{ grid-template-columns:1fr; }

  .sched-day-row{ flex-direction:column; align-items:stretch; gap:8px; }
  .sched-day-date{ width:auto; }
  .sched-time-inputs{ width:100%; min-width:0; }

  table{ font-size:12.5px; }
  th,td{ padding:8px; }

  /* Employee portal on small phones */
  .hero-stat-box{ padding:16px 18px; }
  .hero-stat-box .hs-value{ font-size:23px; }
  .hero-stat-box .hs-icon{ font-size:20px; }
  .loc-row-head{ padding:10px 12px; gap:8px; }
  .loc-row-head .btn{ width:100%; order:3; margin-left:0; margin-top:2px; }
  .bubble-intro{ padding:26px 16px; border-radius:18px; }
  .bubble-illustration{ font-size:44px; }
  .msg-bubble .msg-meta{ font-size:11px; }
  .acc-header{ padding:11px 12px; font-size:13px; }
  .side-group-head{ padding:9px 10px; }
}