/* Selandia Job Bridge — maritime ledger palette
   Deep harbour navy, chart-paper white, brass accent. System type, set with intent. */
:root{ --navy:#0c2218; --ink:#1d2a33; --paper:#f7f8f6; --line:#d8ded9;
  --brass:#b08a3c; --brass-dark:#8f6e2c; --ok:#1f7a4d; --err:#a93226; --muted:#5c6b72; }

*{box-sizing:border-box}
body{margin:0;font:16px/1.55 -apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;color:#e6d0d4;
  background:
    radial-gradient(ellipse 80% 50% at 15% 0%, rgba(180,40,70,.25), transparent 60%),
    radial-gradient(ellipse 70% 50% at 85% 100%, rgba(120,20,40,.3), transparent 60%),
    linear-gradient(160deg, #7a1525 0%, #4f0d18 30%, #6b1220 60%, #7a1525 100%);
  background-attachment:fixed;
  background-size:100% 100%, 100% 100%, 200% 200%;
  animation:bodyShine 30s ease-in-out infinite;
  position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;
  background:
    linear-gradient(125deg, transparent 40%, rgba(180,40,70,.15) 50%, transparent 60%);
  background-size:200% 200%;
  animation:bodyShimmer 14s ease-in-out infinite}
body > *{position:relative;z-index:1}
@keyframes bodyShine{
  0%,100%{background-position:15% 0%, 85% 100%, 0% 50%}
  50%{background-position:15% 0%, 85% 100%, 100% 50%}
}
@keyframes bodyShimmer{
  0%,100%{background-position:-50% -50%}
  50%{background-position:150% 150%}
}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
a{color:var(--brass-dark)}
h1,h2,h3,h4{line-height:1.2;color:var(--navy);letter-spacing:-.01em}
h1{font-size:1.9rem;margin:1.2rem 0 .6rem}
h2{font-size:1.3rem;margin:1.6rem 0 .6rem}
h3{font-size:1.1rem;margin:.2rem 0}
.muted{color:var(--muted)}

/* Top bar */
.topbar{background:var(--navy);border-bottom:3px solid var(--brass)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:700;letter-spacing:.18em;font-size:1.05rem}
.brand span{display:block;font-weight:400;letter-spacing:.32em;font-size:.62rem;color:var(--brass);text-transform:uppercase}
.topbar nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar nav a{color:#e9eef2;text-decoration:none;font-size:.95rem;padding:4px 0;border-bottom:2px solid transparent}
.topbar nav a:hover{border-bottom-color:var(--brass)}
.nav-cta{border:1px solid var(--brass);border-radius:4px;padding:6px 14px !important}
.nav-logout{margin:0}
.nav-logout button{background:none;border:1px solid #4a5e6e;color:#cfd9df;border-radius:4px;padding:6px 12px;cursor:pointer;font-size:.9rem}
.nav-logout button:hover{border-color:var(--brass);color:#fff}

/* Hero */
.hero{padding:70px 0 40px;max-width:720px}
.eyebrow{text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--brass-dark);margin:0 0 14px}
.hero h1{font-size:clamp(2rem,5vw,3rem);margin:0 0 18px}
.lede{font-size:1.12rem;color:var(--muted);max-width:56ch}
.hero-actions{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.threecol{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:30px 0 50px}
.card{background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);padding:18px 20px}
.card h3{margin-top:0}

/* Panels, tables, facts */
.panel{background:rgba(255,255,255,.82);backdrop-filter:saturate(1.1) blur(2px);-webkit-backdrop-filter:saturate(1.1) blur(2px);
  border:1px solid var(--line);padding:20px 22px;margin:0 0 18px;box-shadow:0 2px 10px rgba(10,67,44,.04)}
.panel.narrow{max-width:640px}
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-head h1,.panel-head h2,.panel-head h3{margin:0;margin-right:auto}
table{width:100%;border-collapse:collapse;font-size:.95rem}
th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);border-bottom:2px solid var(--navy);padding:8px 10px}
td{border-bottom:1px solid var(--line);padding:10px;vertical-align:top}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px 24px;margin:14px 0}
.facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.facts dd{margin:2px 0 0;overflow-wrap:anywhere}
.note{background:#fbf6ea;border-left:3px solid var(--brass);padding:10px 14px}
.offer{border-top:1px dashed var(--line);padding-top:12px;margin-top:12px}
.offer-meta{color:var(--muted);font-size:.9rem;margin:.2rem 0 .6rem}

/* Tags, stats, flash */
.tag{display:inline-block;background:#eef1ee;border:1px solid var(--line);border-radius:3px;padding:2px 9px;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.tag-ok{background:#e7f3ec;border-color:#a4d2b6;color:var(--ok)}
.tag-off{background:#f8e9e7;border-color:#e3bcb6;color:var(--err)}
.statrow{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.stat{background:#fff;border:1px solid var(--line);border-left:4px solid var(--navy);padding:14px 18px;min-width:160px}
.stat strong{display:block;font-size:1.7rem;color:var(--navy)}
.stat span{color:var(--muted);font-size:.85rem}
.stat a{font-size:.85rem}
.stat-warn{border-left-color:var(--brass)}
.flash{padding:12px 16px;margin:14px 0;border:1px solid;font-size:.95rem}
.flash-ok{background:#e7f3ec;border-color:#a4d2b6;color:var(--ok)}
.flash-err{background:#f8e9e7;border-color:#e3bcb6;color:var(--err)}

/* Forms */
form label{display:block;margin:0 0 14px;font-weight:600;font-size:.92rem;color:var(--navy)}
form label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],
input[type=number],input[type=date],input[type=search],select,textarea{
  display:block;width:100%;margin-top:5px;padding:9px 11px;font:inherit;font-weight:400;
  border:1px solid var(--line);border-radius:3px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--brass);outline-offset:1px}
input[type=file]{margin-top:6px;font-weight:400}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px}
.rolepick{border:1px solid var(--line);padding:10px 14px;margin:0 0 16px}
.rolepick legend{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:0 6px}
.rolepick label{display:inline-flex;align-items:center;gap:6px;margin:4px 18px 4px 0;font-weight:500}
.filterbar{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.filterbar input,.filterbar select{width:auto;margin:0;min-width:200px}
.inline-actions{display:flex;gap:8px;margin:8px 0 0;flex-wrap:wrap}
.inline-actions label{margin:0}

/* Buttons */
.btn{display:inline-block;border:1px solid transparent;border-radius:3px;padding:10px 20px;
  font:inherit;font-weight:600;cursor:pointer;text-decoration:none;letter-spacing:.02em}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:#0a1c2a}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--navy)}
.btn-ghost:hover{border-color:var(--brass);color:var(--brass-dark)}
.btn-danger{background:#fff;color:var(--err);border-color:var(--err)}
.btn-danger:hover{background:var(--err);color:#fff}
.btn-sm{padding:5px 12px;font-size:.85rem}

.foot{padding:34px 20px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);margin-top:50px}

@media (prefers-reduced-motion:no-preference){
  .panel,.card{transition:border-color .15s ease}
}
@media (max-width:600px){
  .hero{padding:44px 0 24px}
  .bar{justify-content:center}
}

/* ---------- Landing page ---------- */
.hero-signin{align-self:center;font-size:.95rem}
.statstrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);margin:10px 0 46px}
.statstrip div{background:var(--navy);color:#fff;padding:20px 18px;text-align:center}
.statstrip strong{display:block;font-size:1.8rem;color:var(--brass);letter-spacing:-.02em}
.statstrip span{font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#bfcbd4}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:0 0 56px}
.card-cta{padding:26px 28px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.card-cta h2{margin:.2rem 0 .4rem;font-size:1.45rem}
.card-cta .btn{margin-top:auto}
.cardtag{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.25em;color:var(--brass-dark)}
.ticks{list-style:none;margin:0 0 18px;padding:0}
.ticks li{padding:5px 0 5px 26px;position:relative;color:var(--muted)}
.ticks li::before{content:"";position:absolute;left:2px;top:13px;width:12px;height:7px;
  border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}

.about{background:var(--navy);margin:0 -20px 0;padding:56px 20px}
.about-inner{max-width:680px;margin:0 auto}
.about h2{color:#fff;font-size:1.7rem}
.about p{color:#cfd9df}
.about .eyebrow{color:var(--brass)}
.about .btn-ghost{background:transparent;color:#fff;border-color:#5b7186}
.about .btn-ghost:hover{border-color:var(--brass);color:var(--brass)}

/* Applied positions */
.poslist{list-style:none;margin:0 0 18px;padding:0}
.poslist li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid var(--line);border-left:3px solid var(--brass);background:#fbfaf7;
  padding:8px 12px;margin:0 0 8px}
.poslist .inline-actions{margin:0}
.addpos{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.addpos label{flex:1;min-width:220px;margin:0}
.addpos .btn{margin-bottom:1px}

/* Payments */
.paybar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:1.2rem 0 .4rem}
.paybar h1{margin:0}
.paybar form{margin:0}
.btn-pay{background:#1f7a4d;color:#fff;border-color:#1f7a4d}
.btn-pay:hover{background:#16613c}
.btn-activated{cursor:default;pointer-events:none}

/* Admin overview match boxes */
.matchgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin:18px 0 8px}
.matchbox{margin:0}
.bigcount{background:var(--navy);color:var(--brass);font-weight:700;font-size:1.2rem;
  padding:4px 14px;border-radius:4px;min-width:44px;text-align:center}
.countlist{list-style:none;margin:8px 0 0;padding:0;max-height:340px;overflow-y:auto}
.countlist li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 2px;border-bottom:1px solid var(--line)}
.countlist li:last-child{border-bottom:none}
.countlist strong{background:#eef1ee;border:1px solid var(--line);border-radius:3px;
  padding:1px 10px;color:var(--navy);min-width:36px;text-align:center}

/* ============================================================
   LANDING v4 — Crimson Velvet · Multi-spectrum · Dynamic
   Base: #6b1220 deep crimson · Accents: gold, violet, cyan, coral
   ============================================================ */
:root{
  --crimson:#6b1220;
  --crimson-deep:#4f0d18;
  --crimson-mid:#7a1525;
  --gold:#d4a017;
  --gold-bright:#f5d06a;
  --gold-glow:#ffe080;
  --violet:#9b5de5;
  --violet-light:#c77dff;
  --cyan:#00c9c9;
  --cyan-light:#80ffff;
  --coral:#ff6b6b;
  --coral-light:#ffa8a8;
  --emerald:#00b894;
  --amber:#ffb347;
}

/* ── Keyframes ────────────────────────────────────────────── */
@keyframes auroraShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes goldGlide{0%{background-position:-100% 0}100%{background-position:200% 0}}
@keyframes goldShimmer{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@keyframes fireflyFloat{0%,100%{transform:translate(0,0)}25%{transform:translate(22px,-18px)}50%{transform:translate(-18px,12px)}75%{transform:translate(12px,24px)}}
@keyframes fireflyPulse{0%,100%{opacity:.9}50%{opacity:.2}}
@keyframes spectrumBorder{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@keyframes floatUp{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-8px) scale(1.04)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(212,160,23,.4)}50%{box-shadow:0 0 0 12px rgba(212,160,23,0)}}
@keyframes rotateSlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-50px,25px) scale(.9)}66%{transform:translate(30px,-20px) scale(1.1)}}
@keyframes orb3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(25px,30px) scale(1.05)}}
@keyframes stepReveal{from{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes borderDance{0%,100%{border-color:rgba(212,160,23,.5)}25%{border-color:rgba(155,93,229,.5)}50%{border-color:rgba(0,201,201,.5)}75%{border-color:rgba(255,107,107,.5)}}
@keyframes numPop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes gradientText{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── Hero ─────────────────────────────────────────────────── */
.hero2{
  position:relative;margin:0 -20px;padding:0 20px;color:#fff;text-align:center;overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 10% 10%, rgba(155,93,229,.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 90%, rgba(0,201,201,.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(212,160,23,.12), transparent 60%),
    linear-gradient(145deg, #3a0810 0%, #6b1220 35%, #4f0d18 70%, #7a1525 100%);
  background-size:200% 200%;
  animation:auroraShift 20s ease-in-out infinite}

/* Floating orbs — ambient light blobs */
.hero2::before{
  content:"";position:absolute;width:500px;height:500px;border-radius:50%;
  background:radial-gradient(circle, rgba(155,93,229,.2) 0%, transparent 70%);
  top:-150px;left:-100px;animation:orb1 18s ease-in-out infinite;pointer-events:none}
.hero2::after{
  content:"";position:absolute;width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,201,201,.15) 0%, transparent 70%);
  bottom:-100px;right:-80px;animation:orb2 22s ease-in-out infinite;pointer-events:none}

/* gold scan lines top & bottom */
.hero2 .firefly::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;
  background:linear-gradient(90deg,transparent 0%,var(--gold-bright) 50%,transparent 100%);
  background-size:200% 100%;animation:goldGlide 5s linear infinite;opacity:.7}

/* Particle fireflies */
.hero2 .firefly{position:absolute;top:0;left:0;width:3px;height:3px;border-radius:50%;
  background:var(--gold-bright);pointer-events:none;opacity:.9;
  box-shadow:
    130px 70px var(--gold-bright), 290px 200px var(--violet-light),
    430px 55px var(--cyan-light), 590px 310px var(--gold),
    750px 130px var(--coral-light), 910px 250px var(--gold-bright),
    230px 370px var(--violet-light), 670px 410px var(--cyan-light),
    390px 470px var(--gold-bright), 830px 75px var(--coral-light),
    95px 230px var(--gold), 1030px 370px var(--violet-light),
    170px 140px var(--cyan-light), 530px 180px var(--gold-bright),
    860px 340px var(--coral-light);
  animation:fireflyFloat 16s ease-in-out infinite, fireflyPulse 3.5s ease-in-out infinite}
.hero2 .firefly.f2{
  animation-duration:21s,4.5s;animation-delay:-6s,-1.5s;opacity:.5;
  transform:translate(50px,70px) scale(.65);
  box-shadow:
    200px 100px var(--violet-light), 400px 280px var(--gold-bright),
    600px 80px var(--cyan-light), 100px 300px var(--coral-light),
    750px 200px var(--gold), 300px 450px var(--violet-light)}

.hero2-inner{position:relative;z-index:2;max-width:800px;margin:0 auto;padding:100px 0 120px}

.eyebrow2{
  text-transform:uppercase;letter-spacing:.35em;font-size:.72rem;margin:0 0 18px;
  background:linear-gradient(90deg,var(--gold-bright),var(--violet-light),var(--cyan-light),var(--gold-bright));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:fadeUp .9s ease both, gradientText 5s linear infinite}
.eyebrow2.center{text-align:center}

.hero2 h1{
  color:#fff;font-size:clamp(2.2rem,5.8vw,3.6rem);margin:0 0 22px;
  letter-spacing:-.025em;line-height:1.1;animation:fadeUp .9s .1s ease both}
.hero2 h1 em{
  font-style:normal;
  background:linear-gradient(90deg,var(--gold-bright),var(--amber),var(--gold),var(--gold-glow),var(--gold-bright));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradientText 4s linear infinite}

.lede2{
  font-size:1.13rem;line-height:1.75;color:rgba(255,220,225,.85);
  max-width:62ch;margin:0 auto 34px;animation:fadeUp .9s .2s ease both}

.hero2 .hero-actions{justify-content:center;animation:fadeUp .9s .3s ease both}
.hero2-signin{margin:26px 0 0;color:rgba(255,200,210,.7);font-size:.95rem;animation:fadeUp .9s .4s ease both}
.hero2-signin a{color:var(--gold-bright)}

.wavecut{position:absolute;left:0;right:0;bottom:-1px;height:56px;z-index:1;
  background:var(--crimson-deep);clip-path:ellipse(62% 100% at 50% 100%)}

/* ── Buttons ─────────────────────────────────────────────── */
.btn-gold{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--gold-glow) 0%,var(--gold) 40%,var(--amber) 70%,var(--gold-bright) 100%);
  background-size:200% auto;
  color:#1a0808;font-weight:700;border:none;
  box-shadow:0 4px 20px rgba(212,160,23,.5),0 0 0 1px rgba(255,255,255,.15) inset;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
  animation:gradientText 5s linear infinite}
.btn-gold::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 20%,rgba(255,255,255,.25) 50%,transparent 80%);
  background-size:200% 100%;animation:goldGlide 3s linear infinite}
.btn-gold:hover{transform:translateY(-3px) scale(1.02);filter:brightness(1.1);
  box-shadow:0 10px 30px rgba(212,160,23,.65),0 0 20px rgba(255,224,128,.3)}
.btn-light{background:rgba(255,255,255,.07);color:#fff;border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px);transition:all .2s ease}
.btn-light:hover{background:rgba(155,93,229,.2);border-color:var(--violet-light);color:var(--violet-light);
  box-shadow:0 0 20px rgba(155,93,229,.3)}

/* ── Trust row ───────────────────────────────────────────── */
.trustrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;margin:44px 0 58px}
.trust{
  display:flex;gap:12px;align-items:flex-start;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:18px 16px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
  opacity:0;animation:fadeUp .7s ease forwards}
.trust:nth-child(1){animation-delay:.05s;--tc:var(--gold)}
.trust:nth-child(2){animation-delay:.18s;--tc:var(--violet-light)}
.trust:nth-child(3){animation-delay:.31s;--tc:var(--cyan)}
.trust:nth-child(4){animation-delay:.44s;--tc:var(--coral-light)}
.trust:hover{
  transform:translateY(-6px);
  border-color:var(--tc, var(--gold));
  box-shadow:0 12px 32px rgba(0,0,0,.35),0 0 20px rgba(212,160,23,.15)}
.trust:hover .trusticon{animation:wiggle .55s ease}
.trusticon{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;height:46px;
  border-radius:50%;font-size:1.2rem;
  background:linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  border:1px solid var(--tc, var(--gold));
  color:var(--tc, var(--gold));
  box-shadow:0 0 10px rgba(212,160,23,.2)}
.trust strong{display:block;color:#fff;font-size:.95rem}
.trust span:not(.trusticon){color:rgba(255,200,210,.65);font-size:.85rem}

/* ── CTA split cards ─────────────────────────────────────── */
.split{margin:0 0 58px}
.card-lift{
  position:relative;border-radius:16px;overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  padding:30px;
  box-shadow:0 8px 32px rgba(0,0,0,.4);
  transition:transform .25s ease,box-shadow .25s ease}
.card-lift::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--violet),var(--gold-bright),var(--cyan),var(--coral),var(--gold-bright),var(--violet));
  background-size:300% 100%;animation:spectrumBorder 5s linear infinite}
.card-lift::after{
  content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%, rgba(212,160,23,.08) 0%, transparent 60%)}
.card-lift:hover{transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px rgba(212,160,23,.15)}
.card-lift h2{color:#fff;margin:.3rem 0 14px}
.cardicon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;border-radius:14px;font-size:1.5rem;
  background:linear-gradient(135deg,rgba(212,160,23,.3),rgba(155,93,229,.3));
  border:1px solid rgba(212,160,23,.4);
  color:var(--gold-bright);margin-bottom:8px;
  box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 12px rgba(212,160,23,.2)}
.cardtag{margin:0;font-size:.7rem;text-transform:uppercase;letter-spacing:.3em;color:var(--gold)}
.ticks{list-style:none;padding:0;margin:0 0 20px}
.ticks li{padding:6px 0 6px 22px;position:relative;color:rgba(255,220,225,.8);font-size:.95rem;
  border-bottom:1px solid rgba(255,255,255,.06)}
.ticks li:last-child{border-bottom:none}
.ticks li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-45deg);
  width:7px;height:4px;border-left:2px solid var(--emerald);border-bottom:2px solid var(--emerald)}
.card-lift .btn-primary{
  background:linear-gradient(135deg,var(--crimson-mid),var(--crimson));
  border:1px solid rgba(212,160,23,.4);color:var(--gold-bright)}
.card-lift .btn-primary:hover{filter:brightness(1.15);border-color:var(--gold);
  box-shadow:0 0 18px rgba(212,160,23,.3)}
.card-lift .btn-ghost{
  background:transparent;color:var(--cyan-light);border:1px solid rgba(0,201,201,.4)}
.card-lift .btn-ghost:hover{background:rgba(0,201,201,.1);border-color:var(--cyan);
  box-shadow:0 0 18px rgba(0,201,201,.25)}

/* ── Steps / How section ─────────────────────────────────── */
.how{
  position:relative;margin:0 -20px 0;padding:70px 20px 76px;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 50%, rgba(155,93,229,.18), transparent 55%),
    radial-gradient(ellipse 70% 60% at 80% 50%, rgba(0,201,201,.15), transparent 55%),
    radial-gradient(ellipse 50% 40% at 50% 100%, rgba(212,160,23,.15), transparent 55%),
    linear-gradient(160deg, #2a0610 0%, #4f0d18 40%, #3a0810 100%)}
.how::before,.how::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),var(--violet-light),var(--cyan),transparent);
  background-size:300% 100%;animation:spectrumBorder 6s linear infinite}
.how::before{top:0}
.how::after{bottom:0;animation-direction:reverse}

/* Ambient orb inside how section */
.how .eyebrow2{
  text-align:center;display:block;
  background:linear-gradient(90deg,var(--gold-bright),var(--coral-light),var(--violet-light),var(--gold-bright));
  background-size:300% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradientText 5s linear infinite;letter-spacing:.4em}

.how h2.center{
  font-size:clamp(1.6rem,4vw,2.2rem);margin:.3rem 0 40px;
  background:linear-gradient(90deg,#f5d06a,#ffe080,#c8860a,#f5d06a);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:gradientText 4s linear infinite;text-align:center}

.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px}

/* Each step card gets a unique accent color */
.step-lift{
  position:relative;border-radius:18px;padding:26px 22px;overflow:hidden;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .28s ease;
  opacity:0;animation:stepReveal .7s ease forwards}
.step-lift:nth-child(1){animation-delay:.1s;--sc:#d4a017;--sg:rgba(212,160,23,.35)}
.step-lift:nth-child(2){animation-delay:.22s;--sc:#9b5de5;--sg:rgba(155,93,229,.35)}
.step-lift:nth-child(3){animation-delay:.34s;--sc:#00c9c9;--sg:rgba(0,201,201,.35)}
.step-lift:nth-child(4){animation-delay:.46s;--sc:#ff6b6b;--sg:rgba(255,107,107,.35)}

/* Glowing top accent bar per step */
.step-lift::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:18px 18px 0 0;
  background:linear-gradient(90deg,transparent,var(--sc),transparent);
  box-shadow:0 0 12px var(--sc)}
/* Ambient glow blob inside card */
.step-lift::after{
  content:"";position:absolute;top:-30px;right:-30px;width:100px;height:100px;border-radius:50%;
  background:radial-gradient(circle,var(--sg) 0%,transparent 70%);pointer-events:none}

.step-lift:hover{
  transform:translateY(-10px) scale(1.02);
  border-color:var(--sc);
  box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 30px var(--sg)}
.step-lift:hover .stepnum{animation:numPop .4s ease,pulseGlow .4s ease}

.stepnum{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;
  background:linear-gradient(135deg,var(--sc),rgba(0,0,0,.3));
  color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:12px;
  border:2px solid var(--sc);
  box-shadow:0 0 16px var(--sg),0 4px 12px rgba(0,0,0,.4);
  transition:box-shadow .25s ease}

.step-lift h3{color:#fff;margin:.2rem 0 8px;font-size:1.05rem}
.step-lift p{margin:0;color:rgba(255,200,210,.7);font-size:.9rem;line-height:1.6}

/* ── About band ──────────────────────────────────────────── */
.about2{
  position:relative;border-radius:20px;margin:0 0 8px;padding:60px 32px;overflow:hidden;
  background:
    radial-gradient(circle at 15% 85%, rgba(212,160,23,.25), transparent 50%),
    radial-gradient(circle at 85% 15%, rgba(155,93,229,.3), transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(0,201,201,.1), transparent 60%),
    linear-gradient(145deg,#3a0810 0%,#6b1220 50%,#4f0d18 100%);
  background-size:200% 200%;animation:auroraShift 24s ease-in-out infinite;
  border:1px solid rgba(212,160,23,.2)}
.about2::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-bright),var(--violet-light),var(--cyan),transparent);
  background-size:300% 100%;animation:spectrumBorder 7s linear infinite}
.about2::after{
  content:"";position:absolute;bottom:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--coral-light),var(--gold-bright),transparent);
  background-size:300% 100%;animation:spectrumBorder 7s linear infinite reverse}
.about2 .eyebrow2{-webkit-text-fill-color:var(--gold-bright);background:none;color:var(--gold-bright)}
.about2 h2{color:#fff}
.about2 p{color:rgba(255,210,220,.8)}
.about2 .btn-light{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.3)}
.about2 .btn-light:hover{border-color:var(--gold);color:var(--gold-bright);
  background:rgba(212,160,23,.1);box-shadow:0 0 20px rgba(212,160,23,.25)}

@media (max-width:600px){
  .hero2-inner{padding:64px 0 88px}
  .how{padding:50px 20px 56px}
  .about2{padding:44px 20px}
}
@media (prefers-reduced-motion:reduce){
  body,body::before,.hero2,.hero2::before,.hero2::after,.firefly,
  .eyebrow2,.hero2 h1,.hero2 h1 em,.lede2,.hero2 .hero-actions,.hero2-signin,
  .trust,.card-lift::before,.step-lift,.how::before,.how::after,
  .about2,.about2::before,.about2::after,.btn-gold,.btn-gold::after{
    animation:none !important;background-size:auto !important;
    opacity:1 !important;transform:none !important}
}

/* ── Visit stats ─────────────────────────────────────────── */
.visit-statrow{margin-bottom:40px}
.visit-stat{position:relative;overflow:hidden}
.visit-stat strong{font-size:2.2rem !important;line-height:1}
.visit-stat span{margin-top:4px}
.visit-guests{
  display:block;font-size:.75rem;font-style:normal;
  color:var(--gold,#d4a017);margin-top:6px;font-weight:600}
/* colour-coded left border per period */
.vs-today {border-left-color:#f5d06a !important}
.vs-7     {border-left-color:#9b5de5 !important}
.vs-30    {border-left-color:#00c9c9 !important}
.vs-year  {border-left-color:#ff6b6b !important}
/* subtle glow pulse on today card */
.vs-today::after{
  content:"";position:absolute;top:0;right:0;width:60px;height:60px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,208,106,.18) 0%,transparent 70%);
  animation:pulseGlow 2.5s ease-in-out infinite}

/* OTP input */
input[inputmode="numeric"]{font-size:1.7rem;letter-spacing:.6em;text-align:center;font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}

/* ===========================================================
   ADMIN PANEL — deep indigo + gold premium theme
   Activates only inside admin/* pages via the body modifier
   (we apply class via PHP page_top wrapper modification)
   =========================================================== */

body.admin .topbar{
  background:linear-gradient(135deg, var(--forest-deep, #0a4f2c), var(--forest, #143b27) 70%, var(--forest-mid, #1e5638));
  border-bottom:3px solid var(--gold, #d4a942);
  position:relative;overflow:hidden}
body.admin .topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-bright,#f3cc6a),transparent);
  background-size:200% 100%;animation:goldGlide 6s linear infinite;pointer-events:none}
body.admin .brand{color:#fff}
body.admin .brand span{color:var(--gold-bright,#f3cc6a)}
body.admin .topbar nav a:hover,
body.admin .topbar nav a.active{border-bottom-color:var(--gold-bright,#f3cc6a);color:#fff}

/* Section label strip above each major area */
.admin-section{margin:24px 0 8px}
.admin-section .eyebrow2{color:var(--gold-deep,#8a6921);margin:0}
.admin-section h1,.admin-section h2{margin:.2rem 0 0;color:var(--forest,#143b27)}

/* Stat cards — admin overview */
body.admin .statrow{gap:14px}
body.admin .stat{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-left:5px solid var(--forest,#143b27);
  border-radius:12px;padding:18px 22px;min-width:170px;
  box-shadow:0 4px 14px rgba(10,67,44,.07);
  position:relative;overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease}
body.admin .stat::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--forest,#143b27), var(--gold,#d4a942), var(--forest,#143b27));
  background-size:200% 100%;animation:goldGlide 6s linear infinite;opacity:.7}
body.admin .stat:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,67,44,.14)}
body.admin .stat strong{color:var(--forest,#143b27);font-size:1.9rem;line-height:1.1;font-weight:700}
body.admin .stat span{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
body.admin .stat a{color:var(--gold-deep,#8a6921);font-weight:600;font-size:.82rem}
body.admin .stat.stat-warn{border-left-color:var(--gold,#d4a942)}

/* Panels — soft glass cards */
body.admin .panel{
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  box-shadow:0 4px 18px rgba(10,67,44,.06);
  position:relative;overflow:hidden;
  transition:box-shadow .22s ease}
body.admin .panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, var(--forest,#143b27), var(--gold,#d4a942));
  background-size:200% 100%;opacity:.85}
body.admin .panel:hover{box-shadow:0 8px 24px rgba(10,67,44,.10)}
body.admin .panel-head h1,
body.admin .panel-head h2,
body.admin .panel-head h3{color:var(--forest,#143b27)}

/* Match boxes (Vacant vs Applied) */
body.admin .matchbox{padding:24px}
body.admin .matchbox .bigcount{
  background:linear-gradient(135deg, var(--forest,#143b27), var(--forest-mid,#1e5638));
  color:var(--gold-bright,#f3cc6a);
  font-size:1.25rem;font-weight:700;
  padding:6px 16px;border-radius:8px;
  box-shadow:0 3px 10px rgba(10,67,44,.25),inset 0 1px 0 rgba(255,255,255,.08)}
body.admin .countlist li{padding:9px 4px}
body.admin .countlist li:hover{background:rgba(212,169,66,.06)}
body.admin .countlist strong{
  background:linear-gradient(135deg,#fbf8ef,#f4ede0);
  border:1px solid #e9dfb6;color:var(--forest,#143b27);
  border-radius:6px;padding:2px 12px;font-weight:700}

/* Tables */
body.admin .panel table{margin-top:6px}
body.admin th{
  color:var(--forest,#143b27);border-bottom:2px solid var(--forest,#143b27);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;
  padding:10px 12px}
body.admin td{border-bottom:1px solid var(--line);padding:12px;vertical-align:top}
body.admin tbody tr{transition:background .15s ease}
body.admin tbody tr:hover{background:rgba(212,169,66,.05)}

/* Tags within admin */
body.admin .tag{border-radius:20px;padding:3px 12px;font-weight:600;font-size:.72rem}
body.admin .tag-ok{background:#e7f3ec;border-color:#a4d2b6;color:var(--forest,#143b27)}
body.admin .tag-off{background:#f8e9e7;border-color:#e3bcb6;color:var(--err)}

/* Buttons — admin tone */
body.admin .btn-primary{
  background:linear-gradient(135deg, var(--forest,#143b27), var(--forest-mid,#1e5638));
  border:none;box-shadow:0 3px 10px rgba(10,67,44,.18)}
body.admin .btn-primary:hover{
  filter:brightness(1.08);box-shadow:0 5px 14px rgba(10,67,44,.28)}
body.admin .btn-ghost{color:var(--forest,#143b27);border-color:var(--forest,#143b27)}
body.admin .btn-ghost:hover{color:var(--gold-deep,#8a6921);border-color:var(--gold,#d4a942)}
body.admin .btn-pay{
  background:linear-gradient(135deg, var(--gold-bright,#f3cc6a), var(--gold,#d4a942) 60%, var(--gold-deep,#8a6921));
  color:#1d2a33;border:none;font-weight:700;
  box-shadow:0 3px 12px rgba(212,169,66,.45),inset 0 1px 0 rgba(255,255,255,.4)}
body.admin .btn-pay:hover{filter:brightness(1.07);box-shadow:0 5px 16px rgba(212,169,66,.6)}

/* Form filter bar */
body.admin .filterbar input,
body.admin .filterbar select{
  background:#fff;border:1px solid #d8ded9;border-radius:8px}
body.admin .filterbar input:focus,
body.admin .filterbar select:focus{border-color:var(--gold,#d4a942);outline:2px solid rgba(212,169,66,.25);outline-offset:1px}

/* Section heading helper */
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:30px 0 12px;flex-wrap:wrap}
.section-head .eyebrow2{color:var(--gold-deep,#8a6921);margin:0;flex-shrink:0}
.section-head h2{margin:0;color:var(--forest,#143b27);font-size:1.35rem}
.section-head .helper{color:var(--muted);font-size:.9rem;margin:0;width:100%}

/* ===========================================================
   EMPLOYEE & EMPLOYER PANELS — same forest+gold premium theme
   Activates via body.role-employee / body.role-employer
   =========================================================== */

body.role-employee .topbar,
body.role-employer .topbar{
  background:linear-gradient(135deg, var(--forest-deep,#0a4f2c), var(--forest,#143b27) 70%, var(--forest-mid,#1e5638));
  border-bottom:3px solid var(--gold,#d4a942);
  position:relative;overflow:hidden}
body.role-employee .topbar::after,
body.role-employer .topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,transparent,var(--gold-bright,#f3cc6a),transparent);
  background-size:200% 100%;animation:goldGlide 6s linear infinite;pointer-events:none}
body.role-employee .brand,
body.role-employer .brand{color:#fff}
body.role-employee .brand span,
body.role-employer .brand span{color:var(--gold-bright,#f3cc6a)}
body.role-employee .topbar nav a:hover,
body.role-employer .topbar nav a:hover{border-bottom-color:var(--gold-bright,#f3cc6a);color:#fff}

/* Panels — soft glass with animated top edge */
body.role-employee .panel,
body.role-employer .panel{
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  box-shadow:0 4px 18px rgba(10,67,44,.06);
  position:relative;overflow:hidden;
  transition:box-shadow .22s ease,transform .18s ease}
body.role-employee .panel::before,
body.role-employer .panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--forest,#143b27),var(--gold,#d4a942),var(--forest,#143b27));
  background-size:200% 100%;opacity:.85}
body.role-employee .panel:hover,
body.role-employer .panel:hover{box-shadow:0 8px 24px rgba(10,67,44,.10)}
body.role-employee .panel-head h1,body.role-employee .panel-head h2,body.role-employee .panel-head h3,
body.role-employer .panel-head h1,body.role-employer .panel-head h2,body.role-employer .panel-head h3{color:var(--forest,#143b27)}

/* Stat row (employer dashboard) */
body.role-employer .stat,body.role-employee .stat{
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);border-left:5px solid var(--forest,#143b27);
  border-radius:12px;padding:18px 22px;min-width:170px;
  box-shadow:0 4px 14px rgba(10,67,44,.07);transition:transform .2s ease, box-shadow .2s ease}
body.role-employer .stat:hover,body.role-employee .stat:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(10,67,44,.14)}
body.role-employer .stat strong,body.role-employee .stat strong{color:var(--forest,#143b27);font-size:1.9rem;font-weight:700}
body.role-employer .stat span,body.role-employee .stat span{color:var(--muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}

/* Tables */
body.role-employee th,body.role-employer th{
  color:var(--forest,#143b27);border-bottom:2px solid var(--forest,#143b27);
  font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;padding:10px 12px}
body.role-employee td,body.role-employer td{padding:12px;vertical-align:top}
body.role-employee tbody tr,body.role-employer tbody tr{transition:background .15s ease}
body.role-employee tbody tr:hover,body.role-employer tbody tr:hover{background:rgba(212,169,66,.05)}

/* Tags */
body.role-employee .tag,body.role-employer .tag{border-radius:20px;padding:3px 12px;font-weight:600;font-size:.72rem}
body.role-employee .tag-ok,body.role-employer .tag-ok{background:#e7f3ec;border-color:#a4d2b6;color:var(--forest,#143b27)}
body.role-employee .tag-off,body.role-employer .tag-off{background:#f8e9e7;border-color:#e3bcb6;color:var(--err)}

/* Buttons */
body.role-employee .btn-primary,body.role-employer .btn-primary{
  background:linear-gradient(135deg,var(--forest,#143b27),var(--forest-mid,#1e5638));
  border:none;box-shadow:0 3px 10px rgba(10,67,44,.18)}
body.role-employee .btn-primary:hover,body.role-employer .btn-primary:hover{
  filter:brightness(1.08);box-shadow:0 5px 14px rgba(10,67,44,.28)}
body.role-employee .btn-ghost,body.role-employer .btn-ghost{color:var(--forest,#143b27);border-color:var(--forest,#143b27)}
body.role-employee .btn-ghost:hover,body.role-employer .btn-ghost:hover{color:var(--gold-deep,#8a6921);border-color:var(--gold,#d4a942)}

/* Form focus rings */
body.role-employee input:focus,body.role-employee select:focus,body.role-employee textarea:focus,
body.role-employer input:focus,body.role-employer select:focus,body.role-employer textarea:focus{
  border-color:var(--gold,#d4a942);outline:2px solid rgba(212,169,66,.25);outline-offset:1px}

/* Fact cards (assigned profile/company) */
body.role-employee .facts dt,body.role-employer .facts dt{
  color:var(--gold-deep,#8a6921);font-weight:700}
body.role-employee .facts dd,body.role-employer .facts dd{color:var(--ink)}

/* Offer cards (employee dashboard) */
body.role-employee .offer{
  background:linear-gradient(135deg,#fbf8ef,#f4ede0);
  border:1px solid #e9dfb6;border-radius:10px;padding:14px 16px;margin-top:12px}
body.role-employee .offer h4{color:var(--forest,#143b27);margin:.1rem 0 .4rem}
body.role-employee .offer-meta{color:var(--muted);font-size:.88rem}

/* Note ribbon (Selandia notes on assignment) */
body.role-employee .note,body.role-employer .note{
  background:linear-gradient(135deg,#fbf8ef,#f4ede0);
  border:1px solid #e9dfb6;border-left:4px solid var(--gold,#d4a942);
  border-radius:8px;padding:12px 16px;color:var(--ink)}

/* Positions list (employee profile) */
body.role-employee .poslist li{
  background:linear-gradient(135deg,#fbf8ef,#f4ede0);
  border:1px solid #e9dfb6;border-left:4px solid var(--gold,#d4a942);
  border-radius:8px;padding:10px 14px}

/* Pay bar — green button stays distinct, but card around it premiumised */
.paybar{
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);border-radius:14px;
  padding:18px 22px;margin:24px 0 12px;
  box-shadow:0 4px 14px rgba(10,67,44,.06);
  position:relative;overflow:hidden}
.paybar::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--forest,#143b27),var(--gold,#d4a942),var(--forest,#143b27));
  background-size:200% 100%;opacity:.85}
.paybar h1{color:var(--forest,#143b27);margin:0}

/* Reuse the .section-head we made for admin (no extra rules needed — it's role-agnostic) */

/* ===========================================================
   COLORFUL OVERRIDE — yellow, blue, black, deep indigo
   Applies on top of role themes. Activates inside admin/employee/employer.
   =========================================================== */
:root{
  --c-yellow:#f7c948;       /* sunflower yellow */
  --c-yellow-bright:#ffd966;
  --c-yellow-deep:#b8841f;
  --c-blue:#1e4ed8;         /* royal blue */
  --c-blue-bright:#3b82f6;
  --c-blue-deep:#0b2a8a;
  --c-black:#0a0d12;        /* near-black */
  --c-ink:#0c2218;
  --c-forest:#117a45;       /* vivid forest */
  --c-forest-deep:#0a4f2c;
  --c-forest-bright:#1fa365;
}

/* Top bar — black to blue gradient, yellow underline */
body.admin .topbar,
body.role-employee .topbar,
body.role-employer .topbar{
  background:
    radial-gradient(circle at 90% 0%, rgba(247,201,72,.20), transparent 50%),
    linear-gradient(135deg, var(--c-black) 0%, #0e1530 35%, var(--c-blue) 100%);
  border-bottom:4px solid var(--c-yellow)}
body.admin .topbar::after,
body.role-employee .topbar::after,
body.role-employer .topbar::after{
  background:linear-gradient(90deg,transparent,var(--c-yellow-bright),transparent)}
body.admin .brand,
body.role-employee .brand,
body.role-employer .brand{color:#fff}
body.admin .brand span,
body.role-employee .brand span,
body.role-employer .brand span{color:var(--c-yellow-bright);letter-spacing:.32em}
body.admin .topbar nav a,
body.role-employee .topbar nav a,
body.role-employer .topbar nav a{color:#f0f4ff}
body.admin .topbar nav a:hover,
body.role-employee .topbar nav a:hover,
body.role-employer .topbar nav a:hover{border-bottom-color:var(--c-yellow);color:var(--c-yellow-bright)}

/* Section headers — eyebrow blue, heading black */
body.admin .section-head .eyebrow2,
body.role-employee .section-head .eyebrow2,
body.role-employer .section-head .eyebrow2{color:var(--c-blue)}
body.admin .section-head h2,
body.role-employee .section-head h2,
body.role-employer .section-head h2{color:var(--c-black)}

/* Panels — animated multicolor top edge */
body.admin .panel::before,
body.role-employee .panel::before,
body.role-employer .panel::before{
  height:4px;opacity:1;
  background:linear-gradient(90deg, var(--c-blue), var(--c-yellow), var(--c-forest), var(--c-blue));
  background-size:300% 100%;
  animation:rainbowGlide 9s linear infinite}
body.admin .panel,
body.role-employee .panel,
body.role-employer .panel{background:rgba(255,255,255,.95)}
body.admin .panel-head h1,body.admin .panel-head h2,body.admin .panel-head h3,
body.role-employee .panel-head h1,body.role-employee .panel-head h2,body.role-employee .panel-head h3,
body.role-employer .panel-head h1,body.role-employer .panel-head h2,body.role-employer .panel-head h3{color:var(--c-black)}

/* Stat cards — each one a different color */
body.admin .stat,
body.role-employer .stat,
body.role-employee .stat{
  background:#fff;border:none;border-radius:14px;
  box-shadow:0 6px 18px rgba(10,13,18,.10),inset 0 0 0 1px rgba(0,0,0,.04);
  position:relative;overflow:hidden;padding:20px 22px}
body.admin .stat::before,
body.role-employer .stat::before,
body.role-employee .stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c-blue)}
body.admin .statrow .stat:nth-child(1)::before,
body.role-employer .statrow .stat:nth-child(1)::before{background:var(--c-blue)}
body.admin .statrow .stat:nth-child(2)::before,
body.role-employer .statrow .stat:nth-child(2)::before{background:var(--c-forest)}
body.admin .statrow .stat:nth-child(3)::before{background:var(--c-yellow-deep)}
body.admin .statrow .stat:nth-child(4)::before{background:var(--c-black)}
body.admin .statrow .stat:nth-child(5)::before{background:var(--c-yellow)}
body.admin .stat strong,body.role-employer .stat strong,body.role-employee .stat strong{
  color:var(--c-black);font-size:2rem;font-weight:800;letter-spacing:-.02em}
body.admin .stat span,body.role-employer .stat span,body.role-employee .stat span{
  color:#475569;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600}

/* Match-grid bigcount badge — golden yellow on black */
body.admin .matchbox .bigcount{
  background:linear-gradient(135deg, var(--c-black), #1a2440);
  color:var(--c-yellow-bright);
  box-shadow:0 4px 14px rgba(10,13,18,.35),inset 0 0 0 1px var(--c-yellow)}

/* Count lists — yellow numeric chips */
body.admin .countlist strong{
  background:linear-gradient(135deg, var(--c-yellow-bright), var(--c-yellow));
  border:1px solid var(--c-yellow-deep);color:var(--c-black);font-weight:800}
body.admin .countlist li:hover{background:rgba(247,201,72,.10)}

/* Tables — blue heading, alternating subtle */
body.admin th,body.role-employer th,body.role-employee th{
  color:#fff;background:var(--c-blue);border:none;border-radius:0;
  padding:11px 12px;letter-spacing:.08em}
body.admin th:first-child,body.role-employer th:first-child,body.role-employee th:first-child{border-top-left-radius:8px}
body.admin th:last-child,body.role-employer th:last-child,body.role-employee th:last-child{border-top-right-radius:8px}
body.admin td,body.role-employer td,body.role-employee td{border-bottom:1px solid #e6edf5}
body.admin tbody tr:nth-child(even),body.role-employer tbody tr:nth-child(even),body.role-employee tbody tr:nth-child(even){background:#fafcff}
body.admin tbody tr:hover,body.role-employer tbody tr:hover,body.role-employee tbody tr:hover{background:rgba(247,201,72,.10)}

/* Tags */
body.admin .tag,body.role-employer .tag,body.role-employee .tag{
  border-radius:20px;padding:3px 12px;font-weight:700;font-size:.7rem;letter-spacing:.04em;border:none}
body.admin .tag-ok,body.role-employer .tag-ok,body.role-employee .tag-ok{
  background:linear-gradient(135deg,#a7e6c2,#1fa365);color:var(--c-forest-deep)}
body.admin .tag-off,body.role-employer .tag-off,body.role-employee .tag-off{
  background:linear-gradient(135deg,#fbb,#f88);color:#7a1d1d}
body.admin .tag:not(.tag-ok):not(.tag-off),
body.role-employer .tag:not(.tag-ok):not(.tag-off),
body.role-employee .tag:not(.tag-ok):not(.tag-off){
  background:linear-gradient(135deg,#dbe6ff,var(--c-blue-bright));color:#fff}

/* Buttons */
body.admin .btn-primary,body.role-employer .btn-primary,body.role-employee .btn-primary{
  background:linear-gradient(135deg, var(--c-blue), var(--c-blue-deep));
  color:#fff;border:none;font-weight:700;letter-spacing:.02em;
  box-shadow:0 4px 14px rgba(30,78,216,.35),inset 0 1px 0 rgba(255,255,255,.18)}
body.admin .btn-primary:hover,body.role-employer .btn-primary:hover,body.role-employee .btn-primary:hover{
  filter:brightness(1.1);box-shadow:0 6px 18px rgba(30,78,216,.5)}
body.admin .btn-ghost,body.role-employer .btn-ghost,body.role-employee .btn-ghost{
  color:var(--c-blue);border-color:var(--c-blue);background:#fff;font-weight:700}
body.admin .btn-ghost:hover,body.role-employer .btn-ghost:hover,body.role-employee .btn-ghost:hover{
  color:var(--c-black);border-color:var(--c-yellow-deep);background:var(--c-yellow-bright)}
body.admin .btn-danger,body.role-employer .btn-danger,body.role-employee .btn-danger{
  color:#fff;background:linear-gradient(135deg,#c81d3a,#8a1224);border:none;font-weight:700}
body.admin .btn-danger:hover,body.role-employer .btn-danger:hover,body.role-employee .btn-danger:hover{
  filter:brightness(1.08);box-shadow:0 4px 12px rgba(200,29,58,.35)}

/* Pay button — keep the punchy yellow */
body.admin .btn-pay,body.role-employer .btn-pay,body.role-employee .btn-pay{
  background:linear-gradient(135deg, var(--c-yellow-bright), var(--c-yellow));
  color:var(--c-black);border:none;font-weight:800;
  box-shadow:0 4px 16px rgba(247,201,72,.5),inset 0 1px 0 rgba(255,255,255,.5)}
body.admin .btn-pay:hover,body.role-employer .btn-pay:hover,body.role-employee .btn-pay:hover{
  filter:brightness(1.05);box-shadow:0 6px 20px rgba(247,201,72,.7)}

/* Facts panels (assigned profile & company) */
body.role-employee .facts dt,body.role-employer .facts dt,body.admin .facts dt{
  color:var(--c-blue);font-weight:700;letter-spacing:.06em}
body.role-employee .facts dd,body.role-employer .facts dd,body.admin .facts dd{color:var(--c-ink)}

/* Offer card — black-blue with yellow border accent */
body.role-employee .offer{
  background:linear-gradient(135deg, #fdfbf3, #fff8dc);
  border:1px solid var(--c-yellow);border-left:4px solid var(--c-blue);
  border-radius:10px}
body.role-employee .offer h4{color:var(--c-blue-deep)}
body.role-employee .offer-meta{color:#475569}

/* Notes from Selandia */
body.role-employee .note,body.role-employer .note,body.admin .note{
  background:linear-gradient(135deg, #fff8dc, #ffefb0);
  border:1px solid var(--c-yellow-deep);border-left:5px solid var(--c-yellow);
  color:var(--c-black)}

/* Positions list (employee profile) */
body.role-employee .poslist li{
  background:linear-gradient(135deg, #f0f6ff, #dbe7ff);
  border:1px solid #b5cbff;border-left:5px solid var(--c-blue);
  color:var(--c-black)}

/* Filter bar focus */
body.admin .filterbar input:focus,body.admin .filterbar select:focus,
body.role-employer .filterbar input:focus,body.role-employer .filterbar select:focus,
body.role-employee .filterbar input:focus,body.role-employee .filterbar select:focus{
  border-color:var(--c-blue);outline:2px solid rgba(30,78,216,.25)}

/* Inputs */
body.admin input:focus,body.admin select:focus,body.admin textarea:focus,
body.role-employer input:focus,body.role-employer select:focus,body.role-employer textarea:focus,
body.role-employee input:focus,body.role-employee select:focus,body.role-employee textarea:focus{
  border-color:var(--c-blue);outline:2px solid rgba(30,78,216,.25);outline-offset:1px}

/* Paybar */
.paybar{
  background:linear-gradient(135deg, var(--c-black) 0%, #14224a 60%, var(--c-blue) 100%);
  border:none;border-radius:14px;padding:22px 26px;
  box-shadow:0 8px 24px rgba(10,13,18,.25),inset 0 1px 0 rgba(255,255,255,.06);
  position:relative;overflow:hidden}
.paybar::before{
  height:4px;opacity:1;
  background:linear-gradient(90deg, var(--c-yellow), var(--c-forest-bright), var(--c-yellow));
  background-size:300% 100%;animation:rainbowGlide 7s linear infinite}
.paybar h1{color:#fff}

/* Flash boxes */
body.admin .flash-ok,body.role-employer .flash-ok,body.role-employee .flash-ok{
  background:linear-gradient(135deg,#dcfce7,#a7f3c3);
  border:1px solid var(--c-forest);color:var(--c-forest-deep);border-radius:10px}
body.admin .flash-err,body.role-employer .flash-err,body.role-employee .flash-err{
  background:linear-gradient(135deg,#fee2e2,#fca5a5);
  border:1px solid #dc2626;color:#7f1d1d;border-radius:10px}

/* Headings inside panels — black */
body.admin h1,body.role-employer h1,body.role-employee h1{color:var(--c-black)}
body.admin h2,body.role-employer h2,body.role-employee h2{color:var(--c-blue-deep)}
body.admin h3,body.role-employer h3,body.role-employee h3{color:var(--c-forest)}

/* Animations */
@keyframes rainbowGlide{
  0%{background-position:0% 0}
  100%{background-position:300% 0}
}

@media (prefers-reduced-motion:reduce){
  body.admin .panel::before,body.role-employee .panel::before,body.role-employer .panel::before,
  .paybar::before,body.admin .topbar::after,body.role-employee .topbar::after,body.role-employer .topbar::after{
    animation:none !important}
}

/* ===========================================================
   Top action cards (employer dashboard onboarding shortcuts)
   =========================================================== */
.actioncards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin:14px 0 18px}
.actcard{
  display:flex;align-items:stretch;gap:14px;
  background:#fff;border:none;border-radius:14px;padding:18px 20px;
  text-decoration:none;color:inherit;
  box-shadow:0 6px 18px rgba(10,13,18,.08);
  position:relative;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease}
.actcard::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--c-blue,#1e4ed8),var(--c-yellow,#f7c948),var(--c-forest,#143b27),var(--c-blue,#1e4ed8));
  background-size:300% 100%;animation:rainbowGlide 9s linear infinite}
.actcard:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(10,13,18,.16)}
.actcard-badge{
  flex:0 0 46px;height:46px;align-self:center;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;font-weight:800;font-size:1.3rem;color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.18)}
.actcard-todo .actcard-badge{background:linear-gradient(135deg,#f7c948,#b8841f);color:#0a0d12;
  animation:nudge 1.6s ease-in-out infinite}
.actcard-done .actcard-badge{background:linear-gradient(135deg,#1fa365,#143b27)}
.actcard-body{flex:1;min-width:0}
.actcard-eyebrow{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  color:var(--c-blue,#1e4ed8)}
.actcard h3{margin:.2rem 0 .35rem;font-size:1.05rem;color:var(--c-black,#0a0d12);font-weight:700}
.actcard-sub{margin:0;color:#475569;font-size:.88rem;line-height:1.5}
.actcard-arrow{align-self:center;font-size:1.4rem;color:var(--c-blue,#1e4ed8);
  transition:transform .18s ease}
.actcard:hover .actcard-arrow{transform:translateX(4px)}
.actcard-todo{
  background:linear-gradient(135deg,#fffdf2,#fff5cc);
  outline:2px solid #f7c948;outline-offset:-2px}
.actcard-done{background:linear-gradient(135deg,#f3fbf6,#dcf5e6)}

@keyframes nudge{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .actcard-todo .actcard-badge{animation:none}
  .actcard::before{animation:none}
}

/* ===========================================================
   LANDING — replace white cards with rich colored cards
   (hero, gold lines, champagne background untouched)
   =========================================================== */

/* Trust row: deep forest glass cards, gold icons, light text */
.trustrow .trust{
  background:linear-gradient(145deg,#0a4f2c 0%,#143b27 60%,#1e5638 100%);
  border:1px solid rgba(212,169,66,.35);
  box-shadow:0 6px 18px rgba(10,67,44,.25)}
.trustrow .trust:hover{border-color:var(--gold,#d4a942);
  box-shadow:0 12px 28px rgba(10,67,44,.35)}
.trustrow .trusticon{
  background:linear-gradient(135deg,var(--gold-bright,#f3cc6a),var(--gold,#d4a942));
  color:#143b27;box-shadow:0 3px 10px rgba(212,169,66,.4)}
.trustrow .trust strong{color:#fff}
.trustrow .trust span:not(.trusticon){color:#bcd6c5}

/* CTA cards: deep indigo gradient, gold tags, light text */
.split .card-lift{
  background:
    radial-gradient(circle at 85% 10%, rgba(212,169,66,.16), transparent 50%),
    linear-gradient(150deg,#0a0d12 0%,#0e1f33 45%,#143b27 100%);
  border:1px solid rgba(212,169,66,.3)}
.split .card-lift:hover{border-color:var(--gold,#d4a942)}
.split .card-lift h2{color:#fff}
.split .card-lift .cardtag{color:var(--gold-bright,#f3cc6a)}
.split .card-lift .ticks li{color:#c6d6cd}
.split .card-lift .ticks li::before{
  border-left-color:var(--gold,#d4a942);border-bottom-color:var(--gold,#d4a942)}
.split .card-lift .cardicon{
  background:linear-gradient(135deg,var(--gold-bright,#f3cc6a),var(--gold,#d4a942));
  color:#143b27;box-shadow:0 4px 12px rgba(212,169,66,.4)}
.split .card-lift .btn-primary{
  background:linear-gradient(135deg,var(--gold-bright,#f3cc6a),var(--gold,#d4a942));
  color:#1a1a1a;border:none;font-weight:700;
  box-shadow:0 4px 14px rgba(212,169,66,.45)}
.split .card-lift .btn-primary:hover{filter:brightness(1.07)}
.split .card-lift .btn-ghost{
  background:transparent;color:var(--gold-bright,#f3cc6a);
  border-color:var(--gold,#d4a942)}
.split .card-lift .btn-ghost:hover{
  background:rgba(212,169,66,.12);color:#fff;border-color:var(--gold-bright,#f3cc6a)}

/* Steps: emerald-to-blue gradient tiles, gold numbers, light text */
.steps .step-lift{
  background:linear-gradient(150deg,#143b27 0%,#0c2218 55%,#0e2a4d 100%);
  border:1px solid rgba(212,169,66,.3);
  box-shadow:0 6px 16px rgba(10,67,44,.25)}
.steps .step-lift:hover{border-color:var(--gold,#d4a942);
  box-shadow:0 12px 26px rgba(10,67,44,.35)}
.steps .step-lift h3{color:#fff}
.steps .step-lift p{color:#c2d4c9}
.steps .step-lift .stepnum{
  background:linear-gradient(135deg,var(--gold-bright,#f3cc6a),var(--gold,#d4a942));
  color:#143b27;box-shadow:0 4px 10px rgba(212,169,66,.45)}

/* ===========================================================
   Dark body → readable interior panels
   Keep card text dark; lift backgrounds higher; brighten hero wave seam
   =========================================================== */

/* Wave cut between hero and body — match new dark background */
.wavecut{background:#0a4f2c}

/* App-side panels (admin, employee, employer) used a translucent white.
   With a dark page now showing through, force fully opaque white. */
body.admin .panel,
body.role-employee .panel,
body.role-employer .panel,
body.admin .stat,
body.role-employee .stat,
body.role-employer .stat,
body.admin .matchbox,
.paybar:not(body.role-employee .paybar):not(body.role-employer .paybar):not(body.admin .paybar){background:#fff}
.actioncards .actcard{background:#fff}
.actcard-done{background:linear-gradient(135deg,#f3fbf6,#dcf5e6)}
.actcard-todo{background:linear-gradient(135deg,#fffdf2,#fff5cc)}

/* Standalone forms not in any role (login, register, verify) need a card too */
body:not(.admin):not(.role-employee):not(.role-employer) .panel{
  background:rgba(255,255,255,.95);color:var(--ink);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 8px 28px rgba(0,0,0,.25)}
body:not(.admin):not(.role-employee):not(.role-employer) .panel h1,
body:not(.admin):not(.role-employee):not(.role-employer) .panel h2{color:var(--forest,#143b27)}

/* Footer text was ink-on-paper; flip to gold-on-dark */
.foot{color:#9fb3c0;border-top:1px solid rgba(212,169,66,.18)}
.foot a{color:var(--gold-bright,#f3cc6a)}

/* Inside dashboards/admin, table cell text needs to stay dark */
body.admin td,body.role-employee td,body.role-employer td,
body.admin th,body.role-employee th,body.role-employer th,
body.admin .panel,body.role-employee .panel,body.role-employer .panel{color:var(--ink)}
body.admin .panel a:not(.btn),
body.role-employee .panel a:not(.btn),
body.role-employer .panel a:not(.btn){color:var(--c-blue,#1e4ed8)}

/* Terms & conditions page */
.terms-body{max-height:520px;overflow-y:auto;padding:18px 22px;margin:14px 0 18px;
  background:#fafcff;border:1px solid #d8e0eb;border-radius:10px;
  font-size:.95rem;line-height:1.65}
.terms-body h3{margin:14px 0 6px;font-size:1rem;color:var(--c-blue-deep,#0b2a8a)}
.terms-body p{margin:0 0 10px;color:#1d2a33}
.terms-body p strong{color:var(--c-black,#0a0d12)}
.terms-accept .agree{
  display:flex;align-items:flex-start;gap:12px;background:#fff5cc;
  border:1px solid #f7c948;border-left:5px solid var(--c-yellow-deep,#b8841f);
  border-radius:10px;padding:14px 16px;margin:0 0 14px;font-weight:500;color:#1d2a33;cursor:pointer}
.terms-accept .agree input{flex:0 0 auto;width:20px;height:20px;margin-top:2px;accent-color:#1e4ed8}
.terms-accept .agree span{flex:1}

/* Staff theme — reuse the admin colorful look */
body.staff .topbar,
body.role-staff .topbar{
  background:
    radial-gradient(circle at 90% 0%, rgba(247,201,72,.20), transparent 50%),
    linear-gradient(135deg, var(--c-black) 0%, #0e1530 35%, var(--c-blue) 100%);
  border-bottom:4px solid var(--c-yellow);position:relative;overflow:hidden}
body.staff .topbar::after,body.role-staff .topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background:linear-gradient(90deg,transparent,var(--c-yellow-bright),transparent);
  background-size:200% 100%;animation:goldGlide 6s linear infinite;pointer-events:none}
body.staff .brand,body.role-staff .brand{color:#fff}
body.staff .brand span,body.role-staff .brand span{color:var(--c-yellow-bright)}
body.staff .topbar nav a,body.role-staff .topbar nav a{color:#f0f4ff}
body.staff .topbar nav a:hover,body.role-staff .topbar nav a:hover{border-bottom-color:var(--c-yellow);color:var(--c-yellow-bright)}
body.staff .panel,body.role-staff .panel{background:#fff;border-radius:14px;
  box-shadow:0 4px 18px rgba(10,67,44,.08);position:relative;overflow:hidden}
body.staff .panel::before,body.role-staff .panel::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--c-blue),var(--c-yellow),var(--c-forest),var(--c-blue));
  background-size:300% 100%;animation:rainbowGlide 9s linear infinite;opacity:1}
body.staff .stat,body.role-staff .stat{background:#fff;border:none;border-radius:14px;
  box-shadow:0 6px 18px rgba(10,13,18,.10);position:relative;overflow:hidden;padding:20px 22px}
body.staff .stat::before,body.role-staff .stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c-blue)}
body.staff .stat:nth-child(2)::before,body.role-staff .stat:nth-child(2)::before{background:var(--c-forest)}
body.staff .stat strong,body.role-staff .stat strong{color:var(--c-black);font-size:2rem;font-weight:800}
body.staff .stat span,body.role-staff .stat span{color:#475569;text-transform:uppercase;letter-spacing:.1em;font-size:.78rem;font-weight:600}
body.staff th,body.role-staff th{color:#fff;background:var(--c-blue);border:none;padding:11px 12px}
body.staff th:first-child,body.role-staff th:first-child{border-top-left-radius:8px}
body.staff th:last-child,body.role-staff th:last-child{border-top-right-radius:8px}
body.staff tbody tr:nth-child(even),body.role-staff tbody tr:nth-child(even){background:#fafcff}
body.staff tbody tr:hover,body.role-staff tbody tr:hover{background:rgba(247,201,72,.10)}
body.staff td,body.role-staff td{border-bottom:1px solid #e6edf5;padding:12px;color:var(--ink)}
body.staff .btn-primary,body.role-staff .btn-primary{background:linear-gradient(135deg,var(--c-blue),var(--c-blue-deep));color:#fff;border:none;box-shadow:0 4px 14px rgba(30,78,216,.35)}
body.staff .btn-ghost,body.role-staff .btn-ghost{color:var(--c-blue);border-color:var(--c-blue);background:#fff;font-weight:700}
body.staff .btn-ghost:hover,body.role-staff .btn-ghost:hover{background:var(--c-yellow-bright);color:var(--c-black);border-color:var(--c-yellow-deep)}
body.staff .tag,body.role-staff .tag{border-radius:20px;padding:3px 12px;font-weight:700;font-size:.7rem;border:none}
body.staff .tag-ok,body.role-staff .tag-ok{background:linear-gradient(135deg,#a7e6c2,#1fa365);color:var(--c-forest-deep)}
body.staff .tag-off,body.role-staff .tag-off{background:linear-gradient(135deg,#fbb,#f88);color:#7a1d1d}
body.staff .tag:not(.tag-ok):not(.tag-off),body.role-staff .tag:not(.tag-ok):not(.tag-off){background:linear-gradient(135deg,#dbe6ff,var(--c-blue-bright));color:#fff}
body.staff .facts dt,body.role-staff .facts dt{color:var(--c-blue);font-weight:700}
body.staff .note,body.role-staff .note{background:linear-gradient(135deg,#fff8dc,#ffefb0);border:1px solid var(--c-yellow-deep);border-left:5px solid var(--c-yellow);border-radius:8px;padding:12px 16px}

/* Attendance punch cards */
.punchgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.punchcard{
  background:linear-gradient(135deg,#fffdf2,#fff5cc);
  border:2px solid #f7c948;border-radius:14px;padding:22px;
  box-shadow:0 6px 18px rgba(247,201,72,.18);position:relative;overflow:hidden}
.punchcard-done{background:linear-gradient(135deg,#f3fbf6,#dcf5e6);border-color:#1fa365;
  box-shadow:0 6px 18px rgba(93,214,147,.2)}
.punchcard-locked{background:#f4f6f9;border-color:#cbd3dc;opacity:.7}
.punch-eyebrow{margin:0;font-size:.72rem;text-transform:uppercase;letter-spacing:.16em;color:var(--c-blue,#1e4ed8);font-weight:700}
.punch-time{margin:.4rem 0 .6rem;font-size:2.6rem;font-weight:800;color:var(--c-black,#0a0d12);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.punch-meta{margin:.4rem 0 0;color:#143b27;font-weight:600}
.punch-meta-small{margin:.2rem 0 0;color:#475569;font-size:.85rem}
.punch-form{margin:.6rem 0 0;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.punch-status{margin:.5rem 0 0;color:#7a1d1d;font-size:.9rem;min-height:1.2em}
.loclink{font-size:.85rem;color:var(--c-blue,#1e4ed8);font-weight:600}

/* First-login welcome ribbon */
.ribbon-nudge{
  position:relative;
  background:linear-gradient(135deg,#fff5cc,#ffe49a);
  border:2px solid #f7c948;border-left:6px solid var(--c-yellow-deep,#b8841f);
  border-radius:12px;padding:18px 22px;margin:18px 0 22px;
  color:#1a1a1a;line-height:1.6;font-size:1rem;
  box-shadow:0 6px 18px rgba(247,201,72,.25)}
.ribbon-nudge::before{
  content:"\2605";position:absolute;top:14px;right:18px;font-size:1.3rem;color:var(--c-yellow-deep,#b8841f);opacity:.4}
.ribbon-nudge strong{display:block;margin-bottom:4px;font-size:1.1rem;color:var(--c-black,#0a0d12)}

/* ===========================================================
   DASHBOARDS v4 — modern, dynamic, colourful for all four roles
   Layered on top of existing role themes.
   =========================================================== */

:root{
  --d-violet:#7c3aed;
  --d-violet-deep:#5b21b6;
  --d-pink:#ec4899;
  --d-orange:#f97316;
  --d-cyan:#06b6d4;
  --d-mint:#10b981;
  --d-rose:#fb7185;
}

/* ---- Welcome hero block at the top of each dashboard ------- */
.dash-hero{
  position:relative;overflow:hidden;border-radius:18px;
  padding:30px 32px;margin:18px 0 22px;color:#fff;
  background:
    radial-gradient(circle at 80% 0%, rgba(247,201,72,.25), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(124,58,237,.35), transparent 55%),
    linear-gradient(135deg, #0a0d12 0%, #14224a 45%, #1e4ed8 100%);
  box-shadow:0 14px 40px rgba(10,13,18,.30)}
body.role-employee .dash-hero{
  background:
    radial-gradient(circle at 90% 10%, rgba(247,201,72,.20), transparent 50%),
    radial-gradient(circle at 5% 95%, rgba(16,185,129,.30), transparent 55%),
    linear-gradient(135deg, #0a4f2c 0%, #0c2218 45%, #143b27 100%)}
body.role-employer .dash-hero{
  background:
    radial-gradient(circle at 90% 10%, rgba(247,201,72,.22), transparent 50%),
    radial-gradient(circle at 0% 100%, rgba(249,115,22,.28), transparent 55%),
    linear-gradient(135deg, #14213d 0%, #1d4ed8 45%, #f97316 130%)}
body.staff .dash-hero,body.role-staff .dash-hero{
  background:
    radial-gradient(circle at 90% 10%, rgba(247,201,72,.20), transparent 50%),
    radial-gradient(circle at 5% 95%, rgba(236,72,153,.30), transparent 55%),
    linear-gradient(135deg, #0a0d12 0%, #5b21b6 50%, #ec4899 130%)}
.dash-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(125deg, transparent 35%, rgba(255,255,255,.08) 50%, transparent 65%);
  background-size:200% 200%;
  animation:dashShine 12s ease-in-out infinite}
.dash-hero h1{background:linear-gradient(90deg,#f5d06a,#ffe080,#d4a017,#f5d06a);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:gradientText 5s linear infinite;margin:0 0 6px;font-size:2rem;letter-spacing:-.02em;position:relative}
.dash-hero p{margin:0;color:rgba(255,255,255,.85);font-size:1.05rem;line-height:1.55;position:relative;max-width:60ch}
.dash-hero .hero-meta{margin-top:14px;display:flex;gap:18px;flex-wrap:wrap;position:relative}
.dash-hero .hero-meta span{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.14);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.25);border-radius:30px;
  padding:6px 14px;font-size:.85rem;color:#fff;font-weight:600}
.dash-hero .hero-meta strong{color:var(--c-yellow-bright,#f3cc6a);font-weight:800;letter-spacing:.04em}

/* ---- Colorful stat cards (override the role-specific neutral ones) ---- */
body.admin .statrow,body.staff .statrow,body.role-staff .statrow,
body.role-employee .statrow,body.role-employer .statrow{gap:16px;margin:0 0 22px}

body.admin .stat,body.staff .stat,body.role-staff .stat,
body.role-employee .stat,body.role-employer .stat{
  background:#fff;border:none;border-radius:16px;
  padding:22px 22px 22px 24px;min-width:180px;
  box-shadow:0 6px 18px rgba(10,13,18,.08);
  position:relative;overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease}
body.admin .stat::before,body.staff .stat::before,body.role-staff .stat::before,
body.role-employee .stat::before,body.role-employer .stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(180deg,var(--c-blue,#1e4ed8),var(--c-blue-deep,#0b2a8a))}
body.admin .stat::after,body.staff .stat::after,body.role-staff .stat::after,
body.role-employee .stat::after,body.role-employer .stat::after{
  content:"";position:absolute;top:-20px;right:-20px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(circle, rgba(30,78,216,.10), transparent 70%);pointer-events:none}
body.admin .stat:hover,body.staff .stat:hover,body.role-staff .stat:hover,
body.role-employee .stat:hover,body.role-employer .stat:hover{
  transform:translateY(-5px);box-shadow:0 14px 30px rgba(10,13,18,.16)}
body.admin .stat strong,body.staff .stat strong,body.role-staff .stat strong,
body.role-employee .stat strong,body.role-employer .stat strong{
  color:var(--c-black,#0a0d12);font-size:2.2rem;font-weight:800;letter-spacing:-.03em;line-height:1}
body.admin .stat span,body.staff .stat span,body.role-staff .stat span,
body.role-employee .stat span,body.role-employer .stat span{
  display:block;margin-top:6px;color:#64748b;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem;font-weight:700}

/* Rotate stat-card accents per position so each card pops a different colour */
body.admin .statrow .stat:nth-child(1)::before,body.staff .statrow .stat:nth-child(1)::before,body.role-staff .statrow .stat:nth-child(1)::before,body.role-employee .statrow .stat:nth-child(1)::before,body.role-employer .statrow .stat:nth-child(1)::before{
  background:linear-gradient(180deg,var(--c-blue,#1e4ed8),var(--c-blue-deep,#0b2a8a))}
body.admin .statrow .stat:nth-child(1)::after,body.staff .statrow .stat:nth-child(1)::after,body.role-staff .statrow .stat:nth-child(1)::after,body.role-employee .statrow .stat:nth-child(1)::after,body.role-employer .statrow .stat:nth-child(1)::after{
  background:radial-gradient(circle, rgba(30,78,216,.14), transparent 70%)}

body.admin .statrow .stat:nth-child(2)::before,body.staff .statrow .stat:nth-child(2)::before,body.role-staff .statrow .stat:nth-child(2)::before,body.role-employee .statrow .stat:nth-child(2)::before,body.role-employer .statrow .stat:nth-child(2)::before{
  background:linear-gradient(180deg,var(--d-mint,#10b981),#047857)}
body.admin .statrow .stat:nth-child(2)::after,body.staff .statrow .stat:nth-child(2)::after,body.role-staff .statrow .stat:nth-child(2)::after,body.role-employee .statrow .stat:nth-child(2)::after,body.role-employer .statrow .stat:nth-child(2)::after{
  background:radial-gradient(circle, rgba(16,185,129,.14), transparent 70%)}

body.admin .statrow .stat:nth-child(3)::before{
  background:linear-gradient(180deg,var(--d-violet,#7c3aed),var(--d-violet-deep,#5b21b6))}
body.admin .statrow .stat:nth-child(3)::after{
  background:radial-gradient(circle, rgba(124,58,237,.14), transparent 70%)}

body.admin .statrow .stat:nth-child(4)::before{
  background:linear-gradient(180deg,var(--d-orange,#f97316),#c2410c)}
body.admin .statrow .stat:nth-child(4)::after{
  background:radial-gradient(circle, rgba(249,115,22,.14), transparent 70%)}

body.admin .statrow .stat:nth-child(5)::before{
  background:linear-gradient(180deg,var(--d-pink,#ec4899),#9d174d)}
body.admin .statrow .stat:nth-child(5)::after{
  background:radial-gradient(circle, rgba(236,72,153,.14), transparent 70%)}

/* Stat with mini icon at top-left of label */
body.admin .stat strong::before,body.staff .stat strong::before,body.role-staff .stat strong::before,
body.role-employee .stat strong::before,body.role-employer .stat strong::before{
  content:"";display:inline-block;width:0}

/* ---- Match grid bigcount badge — colourful ---- */
body.admin .matchbox .bigcount{
  background:linear-gradient(135deg, var(--c-black,#0a0d12), var(--d-violet,#7c3aed) 130%);
  color:var(--c-yellow-bright,#f3cc6a);
  font-size:1.35rem;font-weight:800;padding:8px 18px;border-radius:10px;
  box-shadow:0 6px 18px rgba(124,58,237,.35),inset 0 0 0 1px rgba(247,201,72,.4)}

/* ---- Panels with colourful animated ribbons ---- */
body.admin .panel::before,body.staff .panel::before,body.role-staff .panel::before,
body.role-employee .panel::before,body.role-employer .panel::before{
  height:5px;background-size:300% 100%;animation:rainbowGlide 8s linear infinite;
  background-image:linear-gradient(90deg,var(--c-blue,#1e4ed8),var(--d-mint,#10b981),var(--c-yellow,#f7c948),var(--d-pink,#ec4899),var(--c-blue,#1e4ed8))}

/* ---- Section heads with coloured accent bar ---- */
body.admin .section-head,body.staff .section-head,body.role-staff .section-head,
body.role-employee .section-head,body.role-employer .section-head{
  position:relative;padding-left:18px}
body.admin .section-head::before,body.staff .section-head::before,body.role-staff .section-head::before,
body.role-employee .section-head::before,body.role-employer .section-head::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:5px;border-radius:3px;
  background:linear-gradient(180deg,var(--c-blue,#1e4ed8),var(--d-mint,#10b981),var(--c-yellow,#f7c948));
  background-size:100% 300%;animation:rainbowGlideV 8s linear infinite}
body.admin .section-head h2,body.staff .section-head h2,body.role-staff .section-head h2,
body.role-employee .section-head h2,body.role-employer .section-head h2{
  font-size:1.5rem;color:var(--c-black,#0a0d12);font-weight:800;letter-spacing:-.01em}
body.admin .section-head .eyebrow2,body.staff .section-head .eyebrow2,body.role-staff .section-head .eyebrow2,
body.role-employee .section-head .eyebrow2,body.role-employer .section-head .eyebrow2{
  color:var(--d-violet,#7c3aed)}

/* ---- Tag pills — gradient ---- */
body.admin .tag,body.staff .tag,body.role-staff .tag,
body.role-employee .tag,body.role-employer .tag{
  font-weight:700;letter-spacing:.04em;padding:4px 14px;border-radius:30px;border:none;
  box-shadow:0 2px 6px rgba(10,13,18,.08)}
body.admin .tag-ok,body.staff .tag-ok,body.role-staff .tag-ok,
body.role-employee .tag-ok,body.role-employer .tag-ok{
  background:linear-gradient(135deg,#34d399,var(--d-mint,#10b981));color:#fff}
body.admin .tag-off,body.staff .tag-off,body.role-staff .tag-off,
body.role-employee .tag-off,body.role-employer .tag-off{
  background:linear-gradient(135deg,var(--d-rose,#fb7185),#e11d48);color:#fff}
body.admin .tag:not(.tag-ok):not(.tag-off),body.staff .tag:not(.tag-ok):not(.tag-off),body.role-staff .tag:not(.tag-ok):not(.tag-off),
body.role-employee .tag:not(.tag-ok):not(.tag-off),body.role-employer .tag:not(.tag-ok):not(.tag-off){
  background:linear-gradient(135deg,var(--c-blue-bright,#3b82f6),var(--c-blue,#1e4ed8));color:#fff}

/* ---- Buttons brighter ---- */
body.admin .btn-primary,body.staff .btn-primary,body.role-staff .btn-primary,
body.role-employee .btn-primary,body.role-employer .btn-primary{
  background:linear-gradient(135deg,var(--c-blue-bright,#3b82f6),var(--c-blue,#1e4ed8) 60%,var(--c-blue-deep,#0b2a8a));
  box-shadow:0 6px 20px rgba(30,78,216,.4),inset 0 1px 0 rgba(255,255,255,.25);font-weight:700}
body.admin .btn-primary:hover,body.staff .btn-primary:hover,body.role-staff .btn-primary:hover,
body.role-employee .btn-primary:hover,body.role-employer .btn-primary:hover{
  transform:translateY(-1px);box-shadow:0 10px 26px rgba(30,78,216,.55)}

/* ---- Tables: sticky-feel headers, hover row colour ---- */
body.admin th,body.staff th,body.role-staff th,
body.role-employee th,body.role-employer th{
  background:linear-gradient(135deg,var(--c-blue,#1e4ed8),var(--c-blue-deep,#0b2a8a));
  color:#fff;letter-spacing:.06em;font-size:.7rem;padding:13px 12px}
body.admin tbody tr:hover,body.staff tbody tr:hover,body.role-staff tbody tr:hover,
body.role-employee tbody tr:hover,body.role-employer tbody tr:hover{
  background:linear-gradient(90deg,rgba(247,201,72,.10),rgba(124,58,237,.05))}

/* ---- Animations ---- */
@keyframes dashShine{
  0%,100%{background-position:0% 50%}
  50%{background-position:100% 50%}
}
@keyframes rainbowGlideV{
  0%{background-position:0% 0%}
  100%{background-position:0% 300%}
}

@media (prefers-reduced-motion:reduce){
  .dash-hero::after,
  body.admin .panel::before,body.staff .panel::before,body.role-staff .panel::before,
  body.role-employee .panel::before,body.role-employer .panel::before,
  body.admin .section-head::before,body.staff .section-head::before,body.role-staff .section-head::before,
  body.role-employee .section-head::before,body.role-employer .section-head::before{animation:none !important}
}

@media (max-width:600px){
  .dash-hero{padding:24px 22px}
  .dash-hero h1{font-size:1.55rem}
  .dash-hero p{font-size:.98rem}
}

/* ===========================================================
   PALETTE v5 — deep indigo everywhere dark, warm cream for cards
   Layered last so it overrides earlier blue/black accents.
   =========================================================== */

:root{
  --v5-forest-deep:#0a4f2c;
  --v5-forest:#117a45;
  --v5-forest-light:#1fa365;
  --v5-cream:#fefcf6;
  --v5-cream-2:#f8efd9;
  --v5-cream-3:#f4e6c2;
  --v5-ink:#0c2218;
}

/* ===== TOP BAR — was black/blue, now deep forest ===== */
body.admin .topbar,body.staff .topbar,body.role-staff .topbar,
body.role-employee .topbar,body.role-employer .topbar{
  background:
    radial-gradient(circle at 90% 0%, rgba(247,201,72,.20), transparent 50%),
    linear-gradient(135deg, var(--v5-forest-deep) 0%, #0a4f2c 35%, var(--v5-forest) 100%) !important;
  border-bottom:4px solid var(--c-yellow,#f7c948)}

/* ===== PAY BAR — was midnight black/blue, now forest ===== */
.paybar{
  background:linear-gradient(135deg, var(--v5-forest-deep) 0%, #0a4f2c 50%, var(--v5-forest) 100%) !important}

/* ===== DASHBOARD HEROES — all roles to forest with their accent kept ===== */
.dash-hero{
  background:
    radial-gradient(circle at 80% 0%, rgba(247,201,72,.25), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(31,163,101,.45), transparent 55%),
    linear-gradient(135deg, var(--v5-forest-deep) 0%, var(--v5-forest) 60%, var(--v5-forest-light) 100%) !important;
  box-shadow:0 14px 40px rgba(10,67,44,.30)}
body.role-employee .dash-hero,
body.role-employer .dash-hero,
body.staff .dash-hero,body.role-staff .dash-hero,
body.admin .dash-hero{
  background:
    radial-gradient(circle at 90% 10%, rgba(247,201,72,.22), transparent 50%),
    radial-gradient(circle at 5% 95%, rgba(31,163,101,.35), transparent 55%),
    linear-gradient(135deg, var(--v5-forest-deep) 0%, var(--v5-forest) 55%, var(--v5-forest-light) 130%) !important}

/* ===== ABOUT BAND on landing ===== */
.about,.about2{
  background:
    radial-gradient(circle at 12% 88%, rgba(212,169,66,.22), transparent 50%),
    radial-gradient(circle at 88% 12%, rgba(31,163,101,.35), transparent 50%),
    linear-gradient(150deg,var(--v5-forest-deep) 0%, var(--v5-forest) 60%, var(--v5-forest-deep) 100%) !important}

/* ===== LANDING CARDS — were near-black, now forest with gold ===== */
.split .card-lift{
  background:
    radial-gradient(circle at 85% 10%, rgba(212,169,66,.16), transparent 50%),
    linear-gradient(150deg,var(--v5-forest-deep) 0%,var(--v5-forest) 60%,#0a4f2c 100%) !important}
.steps .step-lift{
  background:linear-gradient(150deg,var(--v5-forest) 0%,#0c2218 55%,var(--v5-forest-deep) 100%) !important}
.trustrow .trust{
  background:linear-gradient(145deg,var(--v5-forest-deep) 0%,var(--v5-forest) 60%,var(--v5-forest-light) 100%) !important}

/* ===== PANELS — white → warm cream ===== */
body.admin .panel,body.staff .panel,body.role-staff .panel,
body.role-employee .panel,body.role-employer .panel{
  background:linear-gradient(145deg, var(--v5-cream) 0%, var(--v5-cream-2) 100%) !important;
  border:1px solid rgba(117,84,32,.15)}

/* Login / register / verify / terms — pages with no role class */
body:not(.admin):not(.staff):not(.role-staff):not(.role-employee):not(.role-employer) .panel{
  background:linear-gradient(145deg, var(--v5-cream) 0%, var(--v5-cream-2) 100%) !important;
  border:1px solid rgba(117,84,32,.15);
  box-shadow:0 8px 28px rgba(10,67,44,.28)}

/* ===== STAT CARDS — white → cream ===== */
body.admin .stat,body.staff .stat,body.role-staff .stat,
body.role-employee .stat,body.role-employer .stat{
  background:linear-gradient(145deg, var(--v5-cream) 0%, var(--v5-cream-2) 100%) !important}

/* ===== ACTION CARDS (employer onboarding shortcuts) ===== */
.actcard{
  background:linear-gradient(145deg, var(--v5-cream) 0%, var(--v5-cream-2) 100%) !important}
.actcard-todo{
  background:linear-gradient(135deg,#fffaeb,#ffefb8) !important;
  outline:2px solid var(--c-yellow,#f7c948);outline-offset:-2px}
.actcard-done{
  background:linear-gradient(135deg,#e7f3ec,#cfe9d8) !important}

/* ===== ATTENDANCE PUNCH CARDS ===== */
.punchcard{background:linear-gradient(135deg,#fffaeb,#ffefb8) !important;border-color:var(--c-yellow,#f7c948)}
.punchcard-done{background:linear-gradient(135deg,#e7f3ec,#cfe9d8) !important;border-color:#1fa365}
.punchcard-locked{background:linear-gradient(145deg,#f0e9d6,#e7dec3) !important;border-color:#c8bf9e}

/* ===== TABLE HEAD — was royal blue, now forest gradient ===== */
body.admin th,body.staff th,body.role-staff th,
body.role-employee th,body.role-employer th{
  background:linear-gradient(135deg,var(--v5-forest) 0%,var(--v5-forest-deep) 100%) !important}
body.admin tbody tr:nth-child(even),body.staff tbody tr:nth-child(even),body.role-staff tbody tr:nth-child(even),
body.role-employee tbody tr:nth-child(even),body.role-employer tbody tr:nth-child(even){
  background:rgba(244,230,194,.30)}
body.admin tbody tr:hover,body.staff tbody tr:hover,body.role-staff tbody tr:hover,
body.role-employee tbody tr:hover,body.role-employer tbody tr:hover{
  background:linear-gradient(90deg,rgba(247,201,72,.18),rgba(31,163,101,.10)) !important}

/* ===== BUTTONS — primary becomes forest gradient ===== */
body.admin .btn-primary,body.staff .btn-primary,body.role-staff .btn-primary,
body.role-employee .btn-primary,body.role-employer .btn-primary{
  background:linear-gradient(135deg,var(--v5-forest-light) 0%,var(--v5-forest) 60%,var(--v5-forest-deep) 100%) !important;
  box-shadow:0 6px 20px rgba(17,122,69,.45),inset 0 1px 0 rgba(255,255,255,.25)}
body.admin .btn-primary:hover,body.staff .btn-primary:hover,body.role-staff .btn-primary:hover,
body.role-employee .btn-primary:hover,body.role-employer .btn-primary:hover{
  filter:brightness(1.08);box-shadow:0 10px 26px rgba(17,122,69,.6)}
body.admin .btn-ghost,body.staff .btn-ghost,body.role-staff .btn-ghost,
body.role-employee .btn-ghost,body.role-employer .btn-ghost{
  color:var(--v5-forest-deep) !important;border-color:var(--v5-forest-deep) !important;background:var(--v5-cream)}
body.admin .btn-ghost:hover,body.staff .btn-ghost:hover,body.role-staff .btn-ghost:hover,
body.role-employee .btn-ghost:hover,body.role-employer .btn-ghost:hover{
  background:var(--c-yellow,#f7c948) !important;color:#1a1a1a !important;border-color:var(--c-yellow-deep,#b8841f) !important}

/* ===== SECTION HEAD accent bar — forest+gold+forest ===== */
body.admin .section-head::before,body.staff .section-head::before,body.role-staff .section-head::before,
body.role-employee .section-head::before,body.role-employer .section-head::before{
  background:linear-gradient(180deg,var(--v5-forest) 0%,var(--c-yellow,#f7c948) 50%,var(--v5-forest-deep) 100%) !important}

/* ===== Section eyebrow + headings ===== */
body.admin .section-head h2,body.staff .section-head h2,body.role-staff .section-head h2,
body.role-employee .section-head h2,body.role-employer .section-head h2{color:var(--c-yellow-bright,#f3cc6a) !important}
body.admin .section-head .eyebrow2,body.staff .section-head .eyebrow2,body.role-staff .section-head .eyebrow2,
body.role-employee .section-head .eyebrow2,body.role-employer .section-head .eyebrow2{color:var(--c-yellow,#f7c948) !important}
body.admin .section-head .helper,body.staff .section-head .helper,body.role-staff .section-head .helper,
body.role-employee .section-head .helper,body.role-employer .section-head .helper{color:rgba(254,252,246,.85) !important}

/* ===== TAGS — tag-ok forest gradient, others forest blue-ish ===== */
body.admin .tag-ok,body.staff .tag-ok,body.role-staff .tag-ok,
body.role-employee .tag-ok,body.role-employer .tag-ok{
  background:linear-gradient(135deg,var(--v5-forest-light),var(--v5-forest)) !important;color:#fff}
body.admin .tag:not(.tag-ok):not(.tag-off),body.staff .tag:not(.tag-ok):not(.tag-off),body.role-staff .tag:not(.tag-ok):not(.tag-off),
body.role-employee .tag:not(.tag-ok):not(.tag-off),body.role-employer .tag:not(.tag-ok):not(.tag-off){
  background:linear-gradient(135deg,var(--v5-forest-light),var(--v5-forest-deep)) !important;color:#fff}

/* ===== STAT card accent bars — rotate forest hues so they still differ ===== */
body.admin .statrow .stat:nth-child(1)::before,body.staff .statrow .stat:nth-child(1)::before,body.role-staff .statrow .stat:nth-child(1)::before,body.role-employee .statrow .stat:nth-child(1)::before,body.role-employer .statrow .stat:nth-child(1)::before{
  background:linear-gradient(180deg,var(--v5-forest),var(--v5-forest-deep)) !important}
body.admin .statrow .stat:nth-child(2)::before,body.staff .statrow .stat:nth-child(2)::before,body.role-staff .statrow .stat:nth-child(2)::before,body.role-employee .statrow .stat:nth-child(2)::before,body.role-employer .statrow .stat:nth-child(2)::before{
  background:linear-gradient(180deg,var(--v5-forest-light),var(--v5-forest)) !important}
body.admin .statrow .stat:nth-child(3)::before{
  background:linear-gradient(180deg,var(--c-yellow,#f7c948),var(--c-yellow-deep,#b8841f)) !important}
body.admin .statrow .stat:nth-child(4)::before{
  background:linear-gradient(180deg,var(--v5-forest-deep),#08051a) !important}
body.admin .statrow .stat:nth-child(5)::before{
  background:linear-gradient(180deg,var(--c-yellow-bright,#f3cc6a),var(--c-yellow-deep,#b8841f)) !important}

/* Stat card accents — soft forest glow at corner */
body.admin .stat::after,body.staff .stat::after,body.role-staff .stat::after,
body.role-employee .stat::after,body.role-employer .stat::after{
  background:radial-gradient(circle, rgba(17,122,69,.16), transparent 70%) !important}

/* ===== Numbers in stats — keep dark for legibility on cream ===== */
body.admin .stat strong,body.staff .stat strong,body.role-staff .stat strong,
body.role-employee .stat strong,body.role-employer .stat strong{color:var(--v5-forest-deep) !important}

/* ===== PANEL ribbons — forest + gold rainbow ===== */
body.admin .panel::before,body.staff .panel::before,body.role-staff .panel::before,
body.role-employee .panel::before,body.role-employer .panel::before,
.actcard::before,.paybar::before{
  background-image:linear-gradient(90deg,var(--v5-forest),var(--c-yellow,#f7c948),var(--v5-forest-light),var(--c-yellow-bright,#f3cc6a),var(--v5-forest)) !important}

/* ===== MATCH-BOX big count badge ===== */
body.admin .matchbox .bigcount{
  background:linear-gradient(135deg, var(--v5-forest-deep), var(--v5-forest)) !important;
  color:var(--c-yellow-bright,#f3cc6a) !important;
  box-shadow:0 6px 18px rgba(10,67,44,.4),inset 0 0 0 1px rgba(247,201,72,.4)}

/* ===== Count list numeric chips ===== */
body.admin .countlist strong{
  background:linear-gradient(135deg,var(--c-yellow-bright,#f3cc6a),var(--c-yellow,#f7c948)) !important;
  color:var(--v5-forest-deep) !important;border-color:var(--c-yellow-deep,#b8841f)}

/* ===== HEADINGS inside admin/role panels ===== */
body.admin h1,body.staff h1,body.role-staff h1,body.role-employee h1,body.role-employer h1{color:var(--v5-forest-deep) !important}
body.admin h2,body.staff h2,body.role-staff h2,body.role-employee h2,body.role-employer h2{color:var(--v5-forest-deep) !important}
body.admin h3,body.staff h3,body.role-staff h3,body.role-employee h3,body.role-employer h3{color:var(--v5-forest) !important}

/* ===== Facts dt labels — gold instead of blue ===== */
body.admin .facts dt,body.staff .facts dt,body.role-staff .facts dt,
body.role-employee .facts dt,body.role-employer .facts dt{color:var(--c-yellow-deep,#b8841f) !important}

/* ===== Filter bar focus rings — forest ===== */
body.admin input:focus,body.admin select:focus,body.admin textarea:focus,
body.staff input:focus,body.staff select:focus,body.staff textarea:focus,
body.role-staff input:focus,body.role-staff select:focus,body.role-staff textarea:focus,
body.role-employee input:focus,body.role-employee select:focus,body.role-employee textarea:focus,
body.role-employer input:focus,body.role-employer select:focus,body.role-employer textarea:focus{
  border-color:var(--v5-forest) !important;outline-color:rgba(17,122,69,.3) !important}

/* ===== Welcome ribbon (employee profile / employer offers) ===== */
.ribbon-nudge{
  background:linear-gradient(135deg,#fffaeb,#ffefb8) !important;
  border-color:var(--c-yellow,#f7c948) !important;
  border-left-color:var(--c-yellow-deep,#b8841f) !important}

/* ===== Notes/offer cards on dashboards — warm tones ===== */
body.role-employee .note,body.role-employer .note,body.admin .note,body.staff .note,body.role-staff .note{
  background:linear-gradient(135deg,#fffaeb,#ffefb8) !important;
  border-color:var(--c-yellow-deep,#b8841f) !important}
body.role-employee .offer{
  background:linear-gradient(135deg,#fffaeb,#fff5cc) !important;
  border-color:var(--c-yellow,#f7c948) !important;border-left-color:var(--v5-forest) !important}
body.role-employee .poslist li{
  background:linear-gradient(135deg,#e7f3ec,#cfe9d8) !important;
  border-color:#a4d2b6 !important;border-left-color:var(--v5-forest) !important;
  color:var(--v5-ink) !important}

/* ===== Body text on cards — keep dark for readability ===== */
body.admin .panel,body.staff .panel,body.role-staff .panel,
body.role-employee .panel,body.role-employer .panel,
body.admin td,body.staff td,body.role-staff td,
body.role-employee td,body.role-employer td{color:var(--v5-ink) !important}

/* Activation code badge — make it big, copyable looking */
.codebadge{
  display:inline-block;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1.7rem;font-weight:800;letter-spacing:.32em;
  background:linear-gradient(135deg,#fffaeb,#ffe49a);
  border:2px dashed var(--c-yellow-deep,#b8841f);border-radius:10px;
  color:var(--v5-forest-deep,#0a4f2c);padding:8px 16px 8px 22px;
  user-select:all;cursor:copy}
.actcode-form input{font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:1.3rem;letter-spacing:.32em;text-transform:uppercase;text-align:center;font-weight:700}

/* Follow-up overdue ribbon + nav badge */
.ribbon-overdue{
  background:linear-gradient(135deg,#fee2e2,#fca5a5);
  border:2px solid #dc2626;border-left:6px solid #991b1b;
  border-radius:12px;padding:16px 20px;margin:14px 0 22px;
  color:#7f1d1d;font-weight:600;
  box-shadow:0 8px 22px rgba(220,38,38,.28);
  animation:overduePulse 2.4s ease-in-out infinite}
.ribbon-overdue strong{display:block;margin-bottom:4px;color:#991b1b;font-size:1.08rem}
@keyframes overduePulse{
  0%,100%{box-shadow:0 8px 22px rgba(220,38,38,.28)}
  50%{box-shadow:0 8px 30px rgba(220,38,38,.45)}
}
.fu-due{color:var(--v5-forest-deep,#0a4f2c)}
.fu-overdue{color:#dc2626;font-weight:600}
.row-overdue{background:rgba(254,226,226,.5) !important}

.navbadge{
  display:inline-block;background:#dc2626;color:#fff;
  font-size:.7rem;font-weight:800;line-height:1;
  padding:3px 7px;border-radius:10px;margin-left:6px;
  box-shadow:0 2px 6px rgba(220,38,38,.45);
  animation:overduePulse 2.4s ease-in-out infinite}

@media (prefers-reduced-motion:reduce){
  .ribbon-overdue,.navbadge{animation:none !important}
}

/* Match count chip in detail header */
.matchchip{
  display:inline-block;margin-left:10px;
  background:linear-gradient(135deg,var(--c-yellow-bright,#f3cc6a),var(--c-yellow,#f7c948));
  color:var(--v5-forest-deep,#0a4f2c);
  font-size:.78rem;font-weight:800;letter-spacing:.04em;
  padding:4px 12px;border-radius:30px;vertical-align:middle;
  box-shadow:0 3px 10px rgba(212,169,66,.35),inset 0 1px 0 rgba(255,255,255,.4)}

/* ============================================================
   ACCEPT / REJECTION SYSTEM
   ============================================================ */

/* Panel state borders */
.ar-panel--accepted{border-left:4px solid #22c55e}
.ar-panel--rejected{border-left:4px solid #ef4444}
.ar-panel--pending {border-left:4px solid #f5d06a}

/* Status badge (header right) */
.ar-badge{
  display:inline-block;padding:5px 14px;border-radius:20px;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.ar-badge--accepted{background:rgba(34,197,94,.18);color:#22c55e;border:1px solid rgba(34,197,94,.35)}
.ar-badge--rejected{background:rgba(239,68,68,.18);color:#ef4444;border:1px solid rgba(239,68,68,.35)}
.ar-badge--pending {background:rgba(245,208,106,.18);color:#f5d06a;border:1px solid rgba(245,208,106,.35)}

/* Response result block */
.ar-result{
  margin:12px 0;padding:10px 16px;border-radius:8px;
  font-size:.93rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ar-result--accepted{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e}
.ar-result--rejected{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#ef4444}
.ar-result--other{opacity:.85}
.ar-ts{font-size:.78rem;opacity:.7;margin-left:auto}
.ar-change{font-size:.82rem;margin:4px 0 10px;opacity:.6}

/* Form */
.ar-form{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}
.ar-reason-label{display:block;margin-bottom:12px}
.ar-reason-label textarea{
  width:100%;min-height:80px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.2);border-radius:8px;
  color:inherit;padding:10px 14px;font:inherit;resize:vertical;
  transition:border-color .2s}
.ar-reason-label textarea:focus{border-color:var(--gold,#d4a017);outline:none}

.ar-actions{display:flex;gap:12px;flex-wrap:wrap}
.ar-btn-accept{min-width:160px}
.ar-btn-reject{min-width:160px}
.ar-btn-reject:disabled{opacity:.45;cursor:not-allowed}

/* Window notices */
.ar-window-open {border-radius:8px;padding:10px 16px;margin:10px 0;font-size:.9rem}
.ar-window-expired{border-radius:8px;padding:10px 16px;margin:10px 0;font-size:.9rem}

/* Admin table */
.ar-table{width:100%;border-collapse:collapse;font-size:.9rem}
.ar-table th{text-align:left;padding:10px 12px;white-space:nowrap}
.ar-table td{padding:10px 12px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.07)}
.ar-table td small{display:block;opacity:.6;font-size:.78rem;margin-top:2px}
.ar-row-conflict td{background:rgba(239,68,68,.07)}
.ar-row-conflict:hover td{background:rgba(239,68,68,.12) !important}

/* Admin filter bar */
.ar-filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 18px}
.ar-filter-tab{
  padding:6px 16px;border-radius:20px;font-size:.85rem;font-weight:600;
  text-decoration:none;border:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.7);transition:all .18s ease}
.ar-filter-tab:hover{border-color:var(--gold,#d4a017);color:var(--gold,#d4a017)}
.ar-filter-tab--active{
  background:var(--gold,#d4a017);color:#1a0808;border-color:var(--gold,#d4a017)}

/* Admin status tags */
.ar-tag-accepted{background:rgba(34,197,94,.2);color:#22c55e;border-color:rgba(34,197,94,.3)}
.ar-tag-rejected{background:rgba(239,68,68,.2);color:#ef4444;border-color:rgba(239,68,68,.3)}
.ar-tag-pending {background:rgba(245,208,106,.2);color:#f5d06a;border-color:rgba(245,208,106,.3)}
.ar-tag-window-open  {background:rgba(34,197,94,.15);color:#22c55e;border-color:rgba(34,197,94,.25)}
.ar-tag-window-closed{background:rgba(148,148,148,.15);color:#888;border-color:rgba(148,148,148,.2)}

.ar-reason-detail{margin-top:6px;font-size:.82rem;opacity:.8}
.ar-reason-detail summary{cursor:pointer;color:var(--gold,#d4a017)}
.ar-reason-detail p{margin:6px 0 0;padding:6px 10px;background:rgba(0,0,0,.2);border-radius:6px}

.ar-statrow{margin-bottom:20px}

/* ============================================================
   INTERVIEW / PROFILE LOCK / POST-INTERVIEW MODAL
   ============================================================ */

/* Locked panel overlay effect */
.panel-locked{
  position:relative;pointer-events:none;user-select:none}
.panel-locked::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(107,18,32,.45);backdrop-filter:blur(2px);
  z-index:10;pointer-events:none}
.lock-msg{pointer-events:auto!important;position:relative;z-index:11}

/* Full-page modal overlay */
.pit-overlay{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.75);backdrop-filter:blur(6px);
  display:none;align-items:center;justify-content:center;padding:20px}

/* Modal box */
.pit-box{
  background:linear-gradient(145deg,#143b27 0%,#0c2218 60%,#1e5638 100%);
  border:1px solid rgba(212,160,23,.35);border-radius:20px;
  box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 40px rgba(212,160,23,.15);
  max-width:640px;width:100%;max-height:90vh;
  display:flex;flex-direction:column;overflow:hidden;
  animation:fadeUp .3s ease}

.pit-header{
  padding:28px 28px 0;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:18px;flex-shrink:0}
.pit-header h2{
  margin:0 0 6px;font-size:1.35rem;
  background:linear-gradient(90deg,var(--gold-bright,#f5d06a),var(--gold,#d4a017));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pit-header p{margin:0;color:rgba(255,210,220,.7);font-size:.92rem}

.pit-terms-body{
  padding:20px 28px;overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:rgba(212,160,23,.3) transparent}
.pit-terms-body h3{color:#f5d06a;margin:0 0 12px;font-size:1rem;letter-spacing:.04em;text-transform:uppercase}
.pit-terms-body h4{color:#fff;margin:14px 0 4px;font-size:.95rem}
.pit-terms-body p{color:rgba(255,210,220,.8);font-size:.9rem;line-height:1.65;margin:0 0 8px}

.pit-agree{
  display:flex;gap:12px;align-items:flex-start;
  padding:18px 28px;border-top:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.2);flex-shrink:0}
.pit-agree input[type=checkbox]{
  width:20px;height:20px;flex-shrink:0;margin-top:2px;
  accent-color:var(--gold,#d4a017);cursor:pointer}
.pit-agree span{color:rgba(255,220,225,.85);font-size:.88rem;line-height:1.5}

.pit-actions{
  display:flex;gap:12px;padding:16px 28px 24px;flex-shrink:0;flex-wrap:wrap}
.pit-actions .btn{flex:1;min-width:160px;justify-content:center}

/* Thank-you modal variant */
.pit-thankyou{text-align:center;padding:48px 36px}
.pit-thankyou-icon{font-size:4rem;margin-bottom:16px;animation:wiggle 1s ease}
.pit-thankyou h2{
  background:linear-gradient(90deg,var(--gold-bright,#f5d06a),var(--gold,#d4a017));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  margin:0 0 14px;font-size:1.6rem}
.pit-thankyou p{color:rgba(255,210,220,.8);margin:0 0 10px;line-height:1.65}

/* Interview date form */
.interview-date-form label{font-weight:600;color:rgba(255,220,225,.9)}
.interview-date-form input[type=datetime-local]{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);
  border-radius:8px;color:#fff;padding:8px 12px;font:inherit;
  transition:border-color .2s}
.interview-date-form input:focus{border-color:var(--gold,#d4a017);outline:none}

@media(max-width:600px){
  .pit-box{border-radius:14px}
  .pit-header,.pit-terms-body,.pit-agree,.pit-actions{padding-left:18px;padding-right:18px}
  .pit-thankyou{padding:32px 20px}
}

/* ============================================================
   AUTO-MATCH CARDS  (admin/assignments.php)
   ============================================================ */
.am-filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.am-ftab{
  padding:7px 18px;border-radius:20px;font-size:.85rem;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.7);transition:all .18s ease}
.am-ftab:hover{border-color:var(--gold,#d4a017);color:var(--gold,#d4a017)}
.am-ftab--active{background:var(--gold,#d4a017);color:#1a0808;border-color:var(--gold,#d4a017)}

.am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(440px,1fr));gap:18px;margin-bottom:10px}

.am-card{
  position:relative;border-radius:16px;padding:20px 22px 18px;overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.am-card:hover{transform:translateY(-4px)}

/* Exact match — gold tint */
.am-score-2{
  background:linear-gradient(145deg,rgba(212,160,23,.12) 0%,rgba(255,255,255,.04) 100%);
  border-color:rgba(212,160,23,.35)}
.am-score-2:hover{border-color:rgba(212,160,23,.7);
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 24px rgba(212,160,23,.2)}

/* Partial match — violet tint */
.am-score-1{
  background:linear-gradient(145deg,rgba(155,93,229,.1) 0%,rgba(255,255,255,.03) 100%);
  border-color:rgba(155,93,229,.3)}
.am-score-1:hover{border-color:rgba(155,93,229,.65);
  box-shadow:0 12px 32px rgba(0,0,0,.4),0 0 24px rgba(155,93,229,.18)}

/* Score badge */
.am-score-badge{
  display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  padding:3px 12px;border-radius:12px;margin-bottom:14px}
.am-score-badge--2{background:rgba(212,160,23,.22);color:#f5d06a;border:1px solid rgba(212,160,23,.4)}
.am-score-badge--1{background:rgba(155,93,229,.2);color:#c77dff;border:1px solid rgba(155,93,229,.35)}

/* Pair layout */
.am-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:16px}

.am-side{padding:12px 14px;border-radius:10px;background:rgba(0,0,0,.2)}
.am-side-label{margin:0 0 2px;font-size:.7rem;text-transform:uppercase;letter-spacing:.2em;
  opacity:.55;font-weight:600}
.am-side h3{margin:0 0 4px;font-size:1rem;color:#fff;line-height:1.2}
.am-side .am-meta{margin:0 0 8px;font-size:.8rem;color:rgba(255,200,210,.6);line-height:1.4}

.am-side--emp{border-left:3px solid rgba(0,201,201,.5)}
.am-side--er {border-left:3px solid rgba(212,160,23,.5)}

.am-title-tag{
  display:inline-block;font-size:.78rem;font-weight:700;padding:3px 10px;
  border-radius:20px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

.am-arrow{
  font-size:1.6rem;color:rgba(255,255,255,.3);text-align:center;
  line-height:1;flex-shrink:0}

/* Connect form */
.am-connect-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-top:14px;border-top:1px solid rgba(255,255,255,.08)}
.am-note-input{
  flex:1;min-width:160px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);border-radius:8px;
  color:#fff;padding:8px 12px;font:inherit;font-size:.88rem;
  transition:border-color .18s}
.am-note-input:focus{border-color:var(--gold,#d4a017);outline:none}
.am-note-input::placeholder{color:rgba(255,200,210,.35)}
.am-connect-btn{white-space:nowrap;flex-shrink:0}

@media(max-width:640px){
  .am-grid{grid-template-columns:1fr}
  .am-pair{grid-template-columns:1fr;gap:6px}
  .am-arrow{transform:rotate(90deg);justify-self:center}
}

/* ============================================================
   BOX CALENDAR — shared across admin/staff/employee/employer
   ============================================================ */
.cal-wrap{max-width:1100px;margin:0 auto}

/* Header */
.cal-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.cal-nav{display:flex;align-items:center;gap:10px}
.cal-nav a{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.15);color:rgba(255,220,225,.8);text-decoration:none;font-size:1.1rem;transition:all .18s}
.cal-nav a:hover{background:rgba(212,160,23,.2);border-color:#d4a017;color:#f5d06a}
.cal-month{font-size:1.5rem;font-weight:800;background:linear-gradient(90deg,#f5d06a,#d4a017);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cal-today-btn{margin-left:auto;padding:6px 18px;border-radius:20px;font-size:.82rem;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);color:rgba(255,220,225,.8);text-decoration:none;transition:all .18s}
.cal-today-btn:hover{background:rgba(212,160,23,.15);border-color:#d4a017;color:#f5d06a}

/* Stats strip */
.cal-stats{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap}
.cal-stat{display:flex;align-items:center;gap:8px;padding:7px 15px;border-radius:20px;font-size:.82rem;font-weight:600;border:1px solid}
.cs-total   {background:rgba(212,160,23,.12);border-color:rgba(212,160,23,.3);color:#f5d06a}
.cs-upcoming{background:rgba(0,201,201,.1);border-color:rgba(0,201,201,.25);color:#00c9c9}
.cs-done    {background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.25);color:#22c55e}
.cs-rejected{background:rgba(239,68,68,.1);border-color:rgba(239,68,68,.25);color:#ef4444}
.cal-stat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:currentColor}

/* ── Box calendar grid ──────────────────────────────────── */
.cal-grid{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  border:2px solid rgba(255,255,255,.2);
  border-radius:16px;
  overflow:hidden;
  background:rgba(0,0,0,.15);
  box-shadow:0 8px 32px rgba(0,0,0,.4)}

/* Day-of-week header row */
.cal-dow{
  text-align:center;
  padding:12px 4px;
  font-size:.72rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.14em;
  color:rgba(255,200,210,.6);
  background:rgba(255,255,255,.07);
  border-right:1px solid rgba(255,255,255,.1);
  border-bottom:2px solid rgba(255,255,255,.14)}
.cal-dow:last-child{border-right:none}

/* Day cells */
.cal-cell{
  min-height:110px;
  padding:8px 8px 6px;
  background:rgba(255,255,255,.025);
  border-right:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  cursor:default;
  transition:background .15s;
  position:relative;
  overflow:hidden;
  vertical-align:top}

/* Remove right border on every 7th cell (last col) */
.cal-cell.last-col{border-right:none!important}

/* hover */
.cal-cell.has-events{cursor:pointer}
.cal-cell.has-events:hover{background:rgba(255,255,255,.06)}

/* Today highlight */
.cal-cell.today{
  background:rgba(212,160,23,.08)!important;
  box-shadow:inset 0 0 0 2px rgba(212,160,23,.4)}

/* Empty filler cells (before/after month) */
.cal-cell.empty{
  background:rgba(0,0,0,.2);
  cursor:default}

/* Date number */
.cal-dn{
  font-size:.82rem;font-weight:700;
  color:rgba(255,200,210,.45);
  display:block;margin-bottom:5px;line-height:1}
.cal-cell.today .cal-dn{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  background:#d4a017;color:#1a0808;
  font-size:.76rem;font-weight:900}
.cal-cell.has-events .cal-dn{color:rgba(255,220,225,.75)}

/* Event chips */
.cal-chips{display:flex;flex-direction:column;gap:3px}
.cal-chip{
  display:block;font-size:.67rem;font-weight:600;
  padding:3px 7px;border-radius:5px;line-height:1.35;
  border:1px solid transparent;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  cursor:pointer;transition:filter .15s}
.cal-chip:hover{filter:brightness(1.25)}
.chip-upcoming{background:rgba(0,201,201,.2);border-color:rgba(0,201,201,.35);color:#80ffff}
.chip-done    {background:rgba(34,197,94,.2);border-color:rgba(34,197,94,.35);color:#86efac}
.chip-rejected{background:rgba(239,68,68,.2);border-color:rgba(239,68,68,.35);color:#fca5a5}
.chip-past    {background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,200,210,.45)}
.cal-fu-chip  {background:rgba(155,93,229,.2);border-color:rgba(155,93,229,.35);color:#c77dff}

/* +N more */
.cal-more{font-size:.65rem;color:rgba(255,200,210,.4);padding:2px 6px;cursor:pointer;font-weight:600}
.cal-more:hover{color:#f5d06a}

/* ── Popup / Modal ─────────────────────────────────────── */
.cal-popup-overlay{position:fixed;inset:0;z-index:9100;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}
.cal-popup{background:linear-gradient(145deg,#0c2218 0%,#143b27 60%,#0a4f2c 100%);border:1px solid rgba(212,160,23,.3);border-radius:20px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 40px rgba(155,93,229,.15);width:100%;max-width:560px;max-height:85vh;display:flex;flex-direction:column;overflow:hidden;animation:fadeUp .25s ease}
.cal-popup-head{padding:20px 24px 16px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.cal-popup-head h2{margin:0;font-size:1.15rem;background:linear-gradient(90deg,#f5d06a,#d4a017);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.cal-popup-close{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);color:rgba(255,200,210,.7);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.cal-popup-close:hover{background:rgba(239,68,68,.2);border-color:#ef4444;color:#fca5a5}
.cal-popup-body{padding:16px 24px 22px;overflow-y:auto;flex:1}

/* Interview detail cards inside popup */
.iv-card{border-radius:12px;padding:14px 16px;margin-bottom:12px;border:1px solid;position:relative;overflow:hidden}
.iv-card:last-child{margin-bottom:0}
.iv-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.iv-upcoming::before{background:#00c9c9}
.iv-done::before{background:#22c55e}
.iv-rejected::before{background:#ef4444}
.iv-past::before{background:rgba(255,255,255,.2)}
.iv-upcoming{background:rgba(0,201,201,.06);border-color:rgba(0,201,201,.2)}
.iv-done    {background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.2)}
.iv-rejected{background:rgba(239,68,68,.08);border-color:rgba(239,68,68,.25)}
.iv-past    {background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1)}
.iv-fu-card{border-radius:12px;padding:12px 14px;margin-bottom:10px;border:1px solid rgba(155,93,229,.25);background:rgba(155,93,229,.07);position:relative;overflow:hidden}
.iv-fu-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#9b5de5}
.iv-time{font-size:.75rem;font-weight:700;color:rgba(200,190,255,.55);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}
.iv-pair{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center}
.iv-side{padding:8px 10px;border-radius:8px;background:rgba(0,0,0,.2)}
.iv-side-label{font-size:.62rem;text-transform:uppercase;letter-spacing:.15em;color:rgba(255,200,210,.4);margin-bottom:2px}
.iv-side-name{font-size:.88rem;font-weight:700;color:#fff;line-height:1.2}
.iv-side-sub{font-size:.72rem;color:rgba(255,200,210,.5);margin-top:2px}
.iv-arrow{text-align:center;color:rgba(255,255,255,.2);font-size:1.2rem}
.iv-status-row{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.iv-badge{font-size:.68rem;font-weight:700;padding:3px 10px;border-radius:10px;border:1px solid}
.iv-badge-upcoming{background:rgba(0,201,201,.15);border-color:rgba(0,201,201,.3);color:#00c9c9}
.iv-badge-done    {background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.3);color:#22c55e}
.iv-badge-rejected{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.3);color:#ef4444}
.iv-badge-past    {background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15);color:rgba(255,200,210,.5)}
.iv-resp{display:flex;gap:6px;margin-left:auto}
.iv-resp-tag{font-size:.65rem;padding:2px 8px;border-radius:8px;font-weight:600}
.iv-resp-accepted{background:rgba(34,197,94,.15);color:#22c55e}
.iv-resp-rejected{background:rgba(239,68,68,.15);color:#ef4444}
.iv-resp-pending {background:rgba(255,255,255,.07);color:rgba(255,200,210,.4)}
.iv-actions{margin-top:10px;display:flex;gap:8px}
.iv-actions a{font-size:.75rem}

/* Mobile */
@media(max-width:700px){
  .cal-cell{min-height:70px;padding:5px 4px}
  .cal-chip{font-size:.6rem;padding:2px 5px}
  .cal-dow{font-size:.6rem;padding:8px 2px;letter-spacing:.06em}
  .iv-pair{grid-template-columns:1fr;gap:4px}
  .iv-arrow{display:none}
}
/* Quick Pay nav button — blinks red/green until registration payment is completed */
.nav-quickpay {
  display: inline-block;
  margin: 0;
}
.quick-pay-btn {
  display: inline-block;
  padding: .4em 1em;
  margin-right: .5em;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 1em;
  font-family: inherit;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
  animation: quickPayBlink 1.1s infinite;
}
.quick-pay-btn:hover,
.quick-pay-btn:focus {
  animation-play-state: paused;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@keyframes quickPayBlink {
  0%, 100% { background-color: #dc2626; box-shadow: 0 0 6px rgba(220, 38, 38, .7); }
  50%      { background-color: #16a34a; box-shadow: 0 0 6px rgba(22, 163, 74, .7); }
}
@media (prefers-reduced-motion: reduce) {
  .quick-pay-btn { animation: none; background-color: #dc2626; }
}