/* ============================================================
   HERO CAREERS — DESIGN SYSTEM
   Derived from the approved Trump Card template.
   Navy/black base, gold trim, red accent, Playfair + Inter.
============================================================ */

:root{
  --navy-deep:#0a0d16;
  --navy:#1a1a2e;
  --navy-panel:#0f0f1a;
  --navy-mid:#2a2a3e;
  --gold:#d4a853;
  --gold-light:#f6dfa0;
  --gold-dark:#9c7427;
  --red:#c52035;
  --red-dark:#8f1726;
  --text:#ffffff;
  --text-muted:#aaaaaa;
  --text-dim:#888888;
  --border-gold:rgba(212,168,83,0.25);
  --radius:10px;
  --logo-hero:#e9e6df;
  --logo-glow:rgba(233,230,223,0.45);
  --tag-color:#cdb888;
  --track-bg:rgba(255,255,255,0.08);
  --hero-mid:#0d1220;
  --hero-glow:rgba(197,32,53,0.14);
}

/* ============================================================
   LIGHT MODE — site chrome only (nav, hero, buttons, forms,
   dashboard, footer). The Hero Card / Trump Card component is
   intentionally left dark+gold in every theme, since it's a
   fixed-look printed/exported card, not part of the page chrome.
============================================================ */
body[data-theme="light"]{
  --navy-deep:#ffffff;
  --navy:#f7f6f2;
  --navy-panel:#ffffff;
  --navy-mid:#ece9e2;
  --gold:#8c6a28;            /* darkened from #d4a853 — the bright gold fails contrast as text on light backgrounds (2.2:1); this passes AA (~5:1) */
  --gold-light:#9c7427;      /* darker gold so heading text stays readable on white */
  --text:#1a1a1a;
  --text-muted:#5a5a5a;
  --text-dim:#7a7a7a;
  --border-gold:rgba(156,116,39,0.28);
  --logo-hero:#2b2a27;
  --logo-glow:rgba(43,42,39,0.35);
  --tag-color:#9c7427;
  --track-bg:rgba(0,0,0,0.08);
  --hero-mid:#f7f2e6;
  --hero-glow:rgba(197,32,53,0.07);
}

html{scroll-behavior:smooth;scrollbar-color:var(--gold) transparent;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
::selection{background:rgba(212,168,83,0.35);color:var(--text);}
::-webkit-scrollbar{width:10px;height:10px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--gold);border-radius:8px;border:2px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-thumb:hover{background:var(--gold-light);background-clip:padding-box;}

body{transition:background .3s ease, color .3s ease;}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  font-family:'Inter',sans-serif;
  background:var(--navy);
  color:var(--text);
  min-height:100vh;
}

a{color:inherit;text-decoration:none;}

/* ===================== NAV ===================== */
.site-nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;
  background:var(--navy-panel);
  border-bottom:1px solid var(--border-gold);
  position:sticky;top:0;z-index:50;
  box-shadow:0 0 0 rgba(0,0,0,0);
  transition:box-shadow .25s ease;
}
.site-nav.scrolled{box-shadow:0 6px 20px rgba(0,0,0,0.18);}
.logo-text{
  font-weight:800;font-size:22px;letter-spacing:0.5px;font-family:'Inter',sans-serif;
  position:relative;display:inline-block;cursor:pointer;padding:2px 0;
}
.logo-text::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.5),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.logo-text:hover::after{animation:logoSweep 0.9s ease;}
@keyframes logoSweep{to{left:130%;}}
.logo-text .h{color:var(--logo-hero);transition:color .3s ease, filter .3s ease;}
.logo-text:hover .h{filter:drop-shadow(0 0 8px var(--logo-glow));}
.logo-text .c{
  background:linear-gradient(180deg,#f6dfa0 0%,#d4a853 45%,#9c7427 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transition:filter .3s ease;
}
.logo-text:hover .c{filter:drop-shadow(0 0 8px rgba(212,168,83,0.7));}
.logo-tag{font-size:9px;letter-spacing:1.2px;color:var(--tag-color);text-transform:uppercase;margin-top:1px;transition:color .3s ease;}
.nav-links{display:flex;align-items:center;gap:22px;}
.nav-links a{font-size:13px;font-weight:600;color:var(--text-muted);letter-spacing:0.3px;transition:color .2s;position:relative;}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;background:var(--gold);transition:right .25s ease;}
.nav-links a:not(.btn):hover::after{right:0;}
.nav-links a:hover{color:var(--gold);}
.nav-links .btn-gold,.nav-links .btn-gold:hover{color:#fff;}
.nav-links .btn-primary,.nav-links .btn-primary:hover{color:#fff;}
.nav-links .btn{padding:8px 16px;}

/* ---- hamburger toggle (mobile nav) ---- */
.nav-hamburger{
  display:none;width:38px;height:38px;border-radius:8px;
  border:1px solid var(--border-gold);background:transparent;cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:4px;
}
.nav-hamburger span{display:block;width:18px;height:2px;background:var(--gold);border-radius:2px;transition:transform .2s ease,opacity .2s ease;}
.nav-hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.nav-hamburger.open span:nth-child(2){opacity:0;}
.nav-hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

@media (max-width:760px){
  .site-nav{padding:12px 14px;flex-wrap:wrap;position:relative;}
  .logo-text{font-size:17px;}
  .logo-tag{font-size:7.5px;}
  .nav-hamburger{display:inline-flex;}
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--navy-panel);border-bottom:1px solid var(--border-gold);
    padding:10px 16px 16px;box-shadow:0 12px 20px rgba(0,0,0,0.25);z-index:60;
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 4px;border-bottom:1px solid rgba(212,168,83,0.12);width:100%;}
  .nav-links a:last-of-type{border-bottom:none;}
  .nav-links .btn{width:100%;text-align:center;margin-top:10px;padding:12px 16px;}
  .nav-links .theme-toggle{align-self:flex-end;margin-top:8px;}
}

/* ---- mobile bottom tab bar (Card / Jobs / Network / Updates) ---- */
.mobile-tabbar{display:none;}
@media (max-width:760px){
  .mobile-tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    background:var(--navy-panel);border-top:1px solid var(--border-gold);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -8px 20px rgba(0,0,0,0.25);
  }
  body.has-mobile-tabbar{padding-bottom:64px;}
  .mtb-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;padding:6px 2px;color:var(--text-muted);text-decoration:none;
    border-radius:8px;transition:color .2s ease,background .2s ease;
  }
  .mtb-item:hover,.mtb-item:active{background:rgba(212,168,83,0.08);}
  .mtb-icon{font-size:18px;line-height:1;}
  .mtb-label{font-size:10px;font-weight:600;letter-spacing:0.2px;}
  .mtb-item.active{color:var(--gold);}
  .mtb-item.active .mtb-icon{transform:translateY(-1px);}

  /* keep floating chat bubbles (Ask Hero / Aura) clear of the tab bar */
  body.has-mobile-tabbar #hcChatBtn,
  body.has-mobile-tabbar #hcChatPanel{bottom:78px!important;}
  body.has-mobile-tabbar #auraRoot,
  body.has-mobile-tabbar .aura-panel{bottom:78px!important;}
}

/* ---- employer nav: logo + Contact Recruitment Team + 3-dot menu, always visible ---- */
.nav-left-group{display:flex;align-items:center;gap:16px;min-width:0;}
.nav-logo-link{display:block;flex-shrink:0;}
.nav-contact-link{
  position:relative;font-size:12.5px;font-weight:600;color:var(--gold);
  border:1px solid var(--border-gold);border-radius:999px;padding:6px 12px;
  white-space:nowrap;transition:background .2s ease;text-decoration:none;
}
.nav-contact-link:hover{background:rgba(212,168,83,0.1);}
.nav-dots-wrap{position:relative;flex-shrink:0;}
.nav-dots-btn{
  width:30px;height:30px;border-radius:50%;border:1px solid var(--border-gold);
  background:transparent;color:var(--gold);font-size:16px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .2s ease;
}
.nav-dots-btn:hover{background:rgba(212,168,83,0.1);}
.nav-dots-menu{
  display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:170px;
  background:var(--navy-panel);border:1px solid var(--border-gold);border-radius:10px;
  box-shadow:0 12px 28px rgba(0,0,0,0.3);padding:6px;z-index:65;
}
.nav-dots-menu.open{display:block;}
.nav-dots-item{
  display:block;width:100%;text-align:left;background:none;border:none;color:var(--text-muted);
  font-size:12.5px;font-weight:600;padding:9px 10px;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease;
}
.nav-dots-item:hover{background:rgba(212,168,83,0.1);color:var(--gold);}
@media (max-width:760px){
  .nav-left-group{gap:10px;}
  .nav-contact-link{font-size:11.5px;padding:5px 9px;}
}

/* ---- employer dashboard: quick-action button row below header ---- */
.hc-quick-actions{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px;
}
.hc-qa-btn{
  display:flex;align-items:center;gap:8px;
  background:rgba(212,168,83,0.06);border:1px solid var(--border-gold);
  border-radius:10px;padding:10px 16px;color:var(--gold-light);
  font-size:12.5px;font-weight:700;letter-spacing:0.2px;cursor:pointer;
  transition:background .2s ease,transform .15s ease;
}
.hc-qa-btn:hover{background:rgba(212,168,83,0.14);transform:translateY(-1px);}
.hc-qa-btn:active{transform:translateY(0);}
.hc-qa-btn.active{background:rgba(212,168,83,0.2);border-color:var(--gold);color:var(--gold);box-shadow:0 0 0 1px rgba(212,168,83,0.25) inset;}
.hc-qa-icon{font-size:15px;line-height:1;}
@media (max-width:600px){
  .hc-quick-actions{gap:8px;}
  .hc-qa-btn{flex:1 1 calc(50% - 8px);justify-content:center;padding:11px 10px;font-size:11.5px;}
}

/* ---- theme toggle button (sun/moon) ---- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--border-gold);background:transparent;cursor:pointer;
  font-size:15px;line-height:1;color:var(--gold);transition:background .2s ease,transform .2s ease;
}
.theme-toggle:hover{background:rgba(212,168,83,0.1);transform:translateY(-1px);}
.theme-toggle:active{transform:translateY(0) scale(0.88);}
.theme-toggle .icon{display:inline-block;transition:transform .35s ease,opacity .2s ease;}
.theme-toggle .icon.swap{transform:rotate(180deg) scale(0.5);opacity:0;}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-block;padding:12px 22px;border-radius:8px;
  font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;
  border:1px solid var(--gold);
  transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease,background .2s ease,color .2s ease;
  text-align:center;position:relative;overflow:hidden;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(212,168,83,0.35);}
.btn:active{transform:translateY(0) scale(0.97);box-shadow:0 2px 6px rgba(212,168,83,0.25);}
.btn::after{
  content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,0.4),transparent);
  transform:skewX(-20deg);pointer-events:none;
}
.btn:hover::after{animation:logoSweep 0.7s ease;}
.btn-primary{background:linear-gradient(135deg,#c52035,#8f1726);color:#fff;}
.btn-primary:hover{box-shadow:0 6px 18px rgba(197,32,53,0.4);}
.btn-gold{background:linear-gradient(135deg,#b8892a,#7c5c18);color:#fff;}
.btn-ghost{background:transparent;color:var(--gold);}
.btn-ghost:hover{background:rgba(212,168,83,0.14);}
body[data-theme="light"] .btn-ghost{background:#ffffff;border-color:var(--gold-dark);color:var(--gold-dark);box-shadow:0 4px 14px rgba(43,42,39,0.08);}
body[data-theme="light"] .btn-ghost:hover{background:rgba(156,116,39,0.08);box-shadow:0 6px 18px rgba(43,42,39,0.12);}
body[data-theme="light"] .btn-primary{border-color:transparent;box-shadow:0 10px 24px rgba(143,23,38,0.22);}
body[data-theme="light"] .btn-primary:hover{box-shadow:0 14px 30px rgba(143,23,38,0.32);}
.btn-block{width:100%;}
.btn[disabled]{opacity:0.5;cursor:not-allowed;transform:none;box-shadow:none;}
.btn[disabled]:hover::after{animation:none;}

/* ===================== HERO / LANDING ===================== */
.hero{
  padding:90px 24px 70px;text-align:center;
  background:
    radial-gradient(circle at 50% 0%,var(--hero-glow),transparent 45%),
    linear-gradient(155deg,var(--navy-deep) 0%,var(--hero-mid) 35%,var(--navy-deep) 100%);
  border-bottom:1px solid var(--border-gold);
}
.hero .stars{font-size:16px;color:var(--gold);letter-spacing:8px;margin-bottom:10px;animation:heroFadeUp .6s ease both;}
.hero h1{
  font-family:'Playfair Display',serif;font-weight:900;
  font-size:56px;line-height:1.05;letter-spacing:1px;
  background:linear-gradient(180deg,#f8e6b0 0%,#d4a853 40%,#8c6a28 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:14px;
  animation:heroFadeUp .6s ease .12s both;
}
.hero p.sub{font-size:16px;color:var(--text-muted);max-width:520px;margin:0 auto 34px;line-height:1.6;animation:heroFadeUp .6s ease .24s both;}
.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:heroFadeUp .6s ease .36s both;}
.hero-ctas .btn{min-width:220px;padding:16px 26px;font-size:14px;}
@keyframes heroFadeUp{0%{opacity:0;transform:translateY(14px);}100%{opacity:1;transform:translateY(0);}}

/* ---- scroll reveal (see js/scroll-reveal.js) ---- */
.reveal-up{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.reveal-up.in-view{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion:reduce){
  .reveal-up{opacity:1;transform:none;transition:none;}
  .hero .stars,.hero h1,.hero p.sub,.hero-ctas{animation:none;}
  .card-reveal .stat-box,.card-reveal .sec{animation:none;opacity:1;}
}

.section{max-width:960px;margin:0 auto;padding:60px 24px;}
.section h2{font-family:'Playfair Display',serif;font-size:28px;color:var(--gold-light);margin-bottom:10px;}
.section p{color:var(--text-muted);line-height:1.7;font-size:14px;max-width:640px;}

@media (max-width:600px){
  .hero{padding:56px 18px 46px;}
  .hero h1{font-size:34px;}
  .hero p.sub{font-size:14.5px;margin-bottom:26px;}
  .hero-ctas{gap:12px;}
  .hero-ctas .btn{min-width:0;width:100%;}
  .section{padding:40px 18px;}
  .section h2{font-size:22px;}
  .recruiter-block{flex-direction:column;text-align:center;}
  .recruiter-block .rlinks{margin-left:0;justify-content:center;}
}
.pill-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px;}
.pill{
  border:1px solid var(--border-gold);background:rgba(212,168,83,0.06);
  border-radius:999px;padding:8px 16px;font-size:12px;color:var(--gold-light);
}
.site-footer{
  text-align:center;padding:26px;color:var(--text-dim);font-size:12px;
  border-top:1px solid var(--border-gold);background:var(--navy-panel);
}

/* ===================== AUTH FORM ===================== */
.auth-wrap{
  max-width:420px;margin:60px auto;padding:0 20px;
}
.auth-card{
  background:var(--navy-panel);border:1px solid var(--border-gold);
  border-radius:16px;padding:32px 28px;
}
.auth-card h1{font-family:'Playfair Display',serif;font-size:24px;color:var(--gold-light);margin-bottom:6px;}
.auth-card p.sub{font-size:12.5px;color:var(--text-dim);margin-bottom:24px;}
.tab-row{display:flex;border:1px solid var(--border-gold);border-radius:8px;overflow:hidden;margin-bottom:22px;}
.tab-btn{flex:1;padding:10px;background:transparent;border:none;color:var(--text-muted);font-size:12.5px;font-weight:700;letter-spacing:1px;cursor:pointer;}
.tab-btn.active{background:rgba(212,168,83,0.12);color:var(--gold);}
.form-msg{font-size:12.5px;padding:10px 12px;border-radius:6px;margin-bottom:14px;display:none;}
.form-msg.error{display:block;background:rgba(197,32,53,0.15);color:#ff8f8f;border:1px solid rgba(197,32,53,0.4);}
.form-msg.success{display:block;background:rgba(80,180,120,0.12);color:#7fe0ab;border:1px solid rgba(80,180,120,0.35);}
.forgot-link{display:block;text-align:right;font-size:12px;color:var(--gold);margin:-10px 0 16px;cursor:pointer;text-decoration:none;}
.forgot-link:hover{color:var(--gold-light);text-decoration:underline;}

/* ===================== FORM ELEMENTS (shared) ===================== */
.section-label{
  font-size:10.5px;letter-spacing:1.5px;color:var(--gold);font-weight:700;
  text-transform:uppercase;margin:22px 0 12px;padding-bottom:5px;
  border-bottom:1px solid var(--border-gold);
}
.section-label:first-child{margin-top:0;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:11.5px;color:var(--text-muted);margin-bottom:5px;font-weight:600;letter-spacing:0.4px;}
.field input,.field textarea,.field select{
  width:100%;background:var(--navy-deep);border:1px solid var(--border-gold);
  border-radius:6px;padding:10px 12px;color:var(--text);font-size:13.5px;
  font-family:'Inter',sans-serif;outline:none;transition:border .2s,box-shadow .2s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,168,83,0.18);}
.field textarea{resize:vertical;min-height:70px;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.hint{font-size:11px;color:var(--text-dim);margin-top:4px;}

/* AI-suggested badge chips (selectable, in the autofill review panel) */
.badge-chip{
  display:inline-block;padding:6px 14px;margin:3px 4px 3px 0;
  border-radius:20px;border:1px solid var(--gold);font-size:12px;font-weight:700;
  letter-spacing:0.3px;cursor:pointer;background:transparent;color:var(--gold);
  transition:background .15s ease,color .15s ease;
}
.badge-chip.selected{background:var(--gold);color:#1a1206;}

/* Badges as shown on the finished Hero Card */
.card-badge{
  display:inline-block;padding:4px 12px;margin:3px 4px 3px 0;
  border-radius:20px;background:rgba(212,168,83,0.15);border:1px solid #d4a853;
  font-size:11px;font-weight:700;letter-spacing:0.3px;color:#f6dfa0;
}

.photo-upload{
  border:2px dashed var(--border-gold);border-radius:8px;padding:16px;
  text-align:center;cursor:pointer;transition:border .2s;margin-bottom:6px;
}
.photo-upload:hover{border-color:var(--gold);}
.photo-upload input{display:none;}
.photo-upload p{font-size:12px;color:var(--text-dim);margin-top:6px;}
.photo-upload .icon{font-size:30px;}
#photo-preview{width:90px;height:100px;object-fit:cover;border-radius:4px;border:1px solid var(--gold);margin:8px auto;display:none;}

.file-upload{
  border:1px solid var(--border-gold);border-radius:8px;padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;cursor:pointer;
  background:rgba(212,168,83,0.04);
}
.file-upload input{display:none;}
.file-upload .fname{font-size:12.5px;color:var(--text-muted);}

.exp-block,.edu-block{
  background:rgba(212,168,83,0.05);border:1px solid rgba(212,168,83,0.15);
  border-radius:8px;padding:14px;margin-bottom:12px;position:relative;
}
.exp-block .remove,.edu-block .remove{
  position:absolute;top:10px;right:10px;background:rgba(200,50,50,0.2);
  border:none;color:#ff6666;border-radius:4px;padding:3px 8px;cursor:pointer;font-size:12px;
}
.add-btn{
  width:100%;padding:10px;background:rgba(212,168,83,0.1);
  border:1px dashed rgba(212,168,83,0.4);border-radius:6px;color:var(--gold);
  font-size:12.5px;font-weight:700;cursor:pointer;letter-spacing:1px;transition:background .2s;
}
.add-btn:hover{background:rgba(212,168,83,0.2);}

.form-page{max-width:640px;margin:0 auto;padding:32px 20px 80px;}
.form-page-head{margin-bottom:24px;}
.form-page-head h1{font-family:'Playfair Display',serif;font-size:26px;color:var(--gold-light);}
.form-page-head p{font-size:12.5px;color:var(--text-dim);margin-top:4px;}
.form-panel-box{background:var(--navy-panel);border:1px solid var(--border-gold);border-radius:14px;padding:24px 22px;}

/* ===================== DASHBOARD ===================== */
.dash-wrap{max-width:840px;margin:0 auto;padding:36px 20px 90px;}
.dash-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px;}
.dash-actions .btn{flex:1;min-width:160px;}
.empty-state{
  text-align:center;padding:60px 24px;background:var(--navy-panel);
  border:1px solid var(--border-gold);border-radius:16px;
}
.empty-state h2{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:22px;margin-bottom:10px;}
.empty-state p{color:var(--text-dim);font-size:13.5px;margin-bottom:22px;}

/* ===================== TRUMP CARD (exact template look) ===================== */
.card-wrap{width:760px;max-width:100%;margin:0 auto;}
.card{
  width:100%;
  background:radial-gradient(circle at 50% 0%,rgba(197,32,53,0.10),transparent 45%),
             linear-gradient(155deg,#0a0d16 0%,#0d1220 35%,#0a0d16 100%);
  border-radius:22px;padding:22px;position:relative;overflow:hidden;
  border:2px solid #b9893a;
  box-shadow:0 0 0 1px rgba(212,168,83,0.25),0 25px 60px rgba(0,0,0,0.6);
  color:#fff;font-family:'Inter',sans-serif;
}
.card-reveal{animation:cardPopIn .65s cubic-bezier(.34,1.56,.64,1) both;}
@keyframes cardPopIn{
  0%{opacity:0;transform:scale(.85) translateY(24px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
@keyframes cardInnerFadeUp{0%{opacity:0;transform:translateY(10px);}100%{opacity:1;transform:translateY(0);}}
.card-reveal .stat-box{animation:cardInnerFadeUp .45s ease both;animation-delay:calc(.45s + (var(--stat-i, 0) * 60ms));}
.card-reveal .stat-box:nth-child(1){--stat-i:1;}
.card-reveal .stat-box:nth-child(2){--stat-i:2;}
.card-reveal .stat-box:nth-child(3){--stat-i:3;}
.card-reveal .stat-box:nth-child(4){--stat-i:4;}
.card-reveal .stat-box:nth-child(5){--stat-i:5;}
.card-reveal .sec{animation:cardInnerFadeUp .45s ease both;animation-delay:calc(.75s + (var(--sec-i, 0) * 80ms));}
.card-reveal .sec:nth-of-type(1){--sec-i:1;}
.card-reveal .sec:nth-of-type(2){--sec-i:2;}
.card-reveal .sec:nth-of-type(3){--sec-i:3;}
.card-reveal .sec:nth-of-type(4){--sec-i:4;}
.card-reveal .sec:nth-of-type(5){--sec-i:5;}
.card-reveal .sec:nth-of-type(6){--sec-i:6;}
.card-shine::after{
  content:"";position:absolute;top:-60%;left:-60%;width:35%;height:220%;
  background:linear-gradient(75deg,transparent,rgba(255,255,255,0.55),rgba(212,168,83,0.65),transparent);
  transform:rotate(10deg);pointer-events:none;
  animation:cardShineSweep 1.15s ease-in-out .55s 1;
}
@keyframes cardShineSweep{
  0%{left:-60%;}
  100%{left:140%;}
}
.inner{border:1px solid rgba(212,168,83,0.4);border-radius:14px;padding:24px;}
.card-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;border-bottom:1px solid rgba(212,168,83,0.3);margin-bottom:18px;}
.cid-label{font-size:10px;letter-spacing:1.5px;color:#d4a853;font-weight:700;text-align:right;}
.cid-val{font-family:'Playfair Display',serif;font-size:19px;font-weight:700;text-align:right;margin-top:2px;}
.crest{text-align:center;margin:4px 0 18px;}
.crest .stars{font-size:18px;color:#d4a853;letter-spacing:8px;}
.crest h1{font-family:'Playfair Display',serif;font-size:46px;font-weight:900;background:linear-gradient(180deg,#f8e6b0 0%,#d4a853 40%,#8c6a28 100%);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:2px;line-height:1;}
.crest .banner{display:inline-block;margin-top:8px;padding:7px 28px;background:linear-gradient(135deg,#c52035,#8f1726);border:1px solid #d4a853;border-radius:4px;font-size:14px;font-weight:700;letter-spacing:4px;}
.main-row{display:flex;gap:22px;margin-bottom:20px;}
.photo-frame{width:230px;height:280px;flex-shrink:0;border:3px solid #d4a853;border-radius:6px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(212,168,83,0.25),0 0 18px rgba(212,168,83,0.22);
  background:
    linear-gradient(#f6dfa0,#f6dfa0) top left/20px 3px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) top left/3px 20px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) top right/20px 3px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) top right/3px 20px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) bottom left/20px 3px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) bottom left/3px 20px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) bottom right/20px 3px no-repeat,
    linear-gradient(#f6dfa0,#f6dfa0) bottom right/3px 20px no-repeat,
    linear-gradient(160deg,#1a1a1a,#000);
}
.photo-frame img{width:100%;height:100%;object-fit:cover;}
.photo-frame .ph{color:#665533;font-size:12px;letter-spacing:1px;text-align:center;padding:10px;}
.info-col{flex:1;min-width:0;}
.cand-name{font-family:'Playfair Display',serif;font-size:26px;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.15;}
.name-rule{height:1px;background:linear-gradient(90deg,rgba(212,168,83,0.7),transparent);margin-bottom:14px;}
.loc-label{font-size:10px;letter-spacing:1.2px;color:#d4a853;font-weight:700;margin-bottom:3px;}
.loc-val{font-size:15px;font-weight:600;margin-bottom:12px;}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;}
.stat-box{border:1px solid rgba(212,168,83,0.5);background:rgba(212,168,83,0.06);border-radius:8px;padding:10px 14px;}
.stat-box .sl{font-size:10px;letter-spacing:1px;color:#d4a853;font-weight:700;margin-bottom:4px;}
.stat-box .sv{font-size:17px;font-weight:800;color:#fff;}
.sec{margin-bottom:14px;}
.sec-head{background:linear-gradient(90deg,#16213a,#0e1626);border-left:4px solid #d4a853;padding:9px 14px;font-size:13px;font-weight:800;letter-spacing:1px;color:#f6dfa0;border-radius:4px;margin-bottom:10px;text-transform:uppercase;}
.sec-body{font-size:13px;color:#d8d8d8;line-height:1.55;padding:0 4px;}
.item{margin-bottom:10px;padding-left:16px;position:relative;}
.item::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:#d4a853;}
.item .ititle{font-weight:700;font-size:14px;color:#fff;}
.item .idates{float:right;font-size:12px;color:#d4a853;font-weight:600;}
.item .isub{font-size:12px;color:#b8b8b8;clear:both;}
.card-footer{margin-top:18px;background:linear-gradient(135deg,#14060a,#1a0d12);border:1px solid rgba(212,168,83,0.5);border-radius:10px;padding:14px 18px;}
.card-footer-v2{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;}
.footer-col{display:flex;align-items:center;gap:10px;}
.footer-col.footer-site{justify-content:flex-end;text-align:right;}
.footer-icon{font-size:20px;flex-shrink:0;filter:drop-shadow(0 0 4px rgba(212,168,83,0.5));}
.footer-title{font-size:10.5px;letter-spacing:0.8px;font-weight:800;color:#d4a853;text-transform:uppercase;margin-bottom:2px;}
.footer-sub{font-size:11px;color:#e8c8a0;line-height:1.35;}
.footer-brand{display:flex;flex-direction:column;align-items:center;padding:0 14px;border-left:1px solid rgba(212,168,83,0.3);border-right:1px solid rgba(212,168,83,0.3);}
.footer-brand .logo-text{font-size:15px;}
.footer-brand .logo-tag{font-size:8px;}
.privacy{font-size:11.5px;color:#e8c8a0;font-style:italic;margin-bottom:7px;}
.rec-name{font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:#fff;margin-bottom:3px;}
.rec-contact{font-size:12.5px;color:#d4a853;margin-bottom:6px;}
.rec-site{font-size:11px;color:#888;}
@media (max-width:520px){
  .card-footer-v2{grid-template-columns:1fr;text-align:center;}
  .footer-col{flex-direction:column;text-align:center;}
  .footer-col.footer-site{justify-content:center;text-align:center;}
  .footer-brand{border-left:none;border-right:none;border-top:1px solid rgba(212,168,83,0.3);border-bottom:1px solid rgba(212,168,83,0.3);padding:10px 0;}
  .card-header{flex-wrap:wrap;gap:8px;}
  .card-header>div:last-child{text-align:left;}
  .cid-label,.cid-val{text-align:left;}
  .dev-card{flex-wrap:wrap;}
}

/* Recruiter name & phone are only ever meant for the exported Talent
   Book PDF — hidden on the live web card/preview, shown only when the
   candidate (or hotel) downloads it via the print dialog. */
.print-only{display:none;}

@media print{
  .site-nav,.dash-actions,.site-footer{display:none!important;}
  body{background:#fff;}
  .dash-wrap{padding:0;}
  .card{box-shadow:none;}
  .print-only{display:block!important;}
}

@media (max-width:820px){
  .card-wrap{width:100%;}
  .card{padding:14px;}
  .inner{padding:16px;}
  .main-row{flex-direction:column;}
  .photo-frame{width:100%;height:220px;}
  .hero h1{font-size:38px;}
  .row2{grid-template-columns:1fr;}
}

/* A 5th stat box (Height, role-specific) spans both columns so it never
   leaves a lonely gap next to it. */
.stat-grid .stat-box:nth-child(5){grid-column:1/-1;}

/* ===================== FULL CARD MODAL (hotel-dashboard.html "View Full
   Card") — the card is shown in a deliberately compact ~480px-wide box
   regardless of screen size. The card's default proportions (26px name,
   230x280 photo, 46px crest) are sized for the full 760px card and
   overflow/clip inside a fixed 480px box on a wide desktop screen, where
   the @media(max-width:820px) rules above never fire since they key off
   viewport width, not this box's own fixed width. Scale everything down
   to fit — but only above 820px, since below that the existing mobile
   breakpoint already stacks the layout (full-width photo, single column)
   which fits a ~480px box fine on its own; scaling on top of that would
   fight it and look cramped. */
@media (min-width:821px){
  .modal-card-shell .card{padding:16px;}
  .modal-card-shell .inner{padding:18px;}
  .modal-card-shell .crest h1{font-size:32px;}
  .modal-card-shell .crest .stars{font-size:13px;letter-spacing:6px;}
  .modal-card-shell .crest .banner{padding:6px 20px;font-size:11px;letter-spacing:3px;margin-top:6px;}
  .modal-card-shell .cid-val{font-size:15px;}
  .modal-card-shell .main-row{gap:14px;margin-bottom:14px;}
  .modal-card-shell .photo-frame{width:120px;height:150px;}
  .modal-card-shell .cand-name{font-size:18px;margin-bottom:5px;}
  .modal-card-shell .loc-label{font-size:9px;}
  .modal-card-shell .loc-val{font-size:12.5px;margin-bottom:8px;}
  .modal-card-shell .stat-grid{gap:7px;margin-top:8px;}
  .modal-card-shell .stat-box{padding:6px 9px;}
  .modal-card-shell .stat-box .sl{font-size:8.5px;}
  .modal-card-shell .stat-box .sv{font-size:13px;}
  .modal-card-shell .sec-head{font-size:11.5px;padding:7px 11px;margin-bottom:8px;}
  .modal-card-shell .sec-body{font-size:12.5px;}
  .modal-card-shell .item .ititle{font-size:13px;}
  .modal-card-shell .item .idates,.modal-card-shell .item .isub{font-size:11.5px;}
}

/* Very narrow phones: the modal's own 20px outer padding + the close
   button's -14px offset can push things past the viewport edge. Pull
   both in so the card never gets clipped by the screen itself. */
@media (max-width:420px){
  #fullCardModal{padding:10px;}
  .modal-card-shell{max-width:100%;}
  .modal-close-btn{top:-10px!important;right:0!important;width:30px!important;height:30px!important;}
}

/* ============================================================
   BUILDER LAYOUT — split form + live preview
   ============================================================ */
.builder-grid{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,460px);
  gap:28px;max-width:1220px;margin:0 auto;align-items:start;
}
.builder-form-col{min-width:0;}
.builder-preview-col{min-width:0;position:sticky;top:88px;}
.preview-shell{background:var(--navy-panel);border:1px solid var(--border-gold);border-radius:16px;padding:18px 16px 22px;}
.preview-shell-head{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:14px;}
.preview-shell-head .dot{width:7px;height:7px;border-radius:50%;background:#5fd48a;box-shadow:0 0 8px #5fd48a;animation:hcPulseDot 1.6s ease-in-out infinite;}
@keyframes hcPulseDot{0%,100%{opacity:1;}50%{opacity:0.35;}}
.preview-shell-head .lbl{font-size:11px;letter-spacing:2px;color:var(--text-dim);text-transform:uppercase;font-weight:700;}
.preview-shell .card-wrap{width:100%;}
.preview-shell .card{padding:16px;}
.preview-shell .inner{padding:16px;}
.preview-shell .crest h1{font-size:34px;}
.preview-shell .photo-frame{width:140px;height:170px;}
.preview-shell .cand-name{font-size:19px;}
.preview-shell .main-row{gap:14px;}
.preview-shell .stat-box{padding:7px 10px;}
.preview-shell .stat-box .sv{font-size:14px;}

@media (max-width:1040px){
  .builder-grid{grid-template-columns:1fr;}
  .builder-preview-col{position:static;}
  .preview-shell .card{padding:22px;}
  .preview-shell .inner{padding:24px;}
  .preview-shell .crest h1{font-size:46px;}
  .preview-shell .photo-frame{width:230px;height:280px;}
  .preview-shell .cand-name{font-size:26px;}
  .preview-shell .stat-box .sv{font-size:17px;}
}

/* ---- ≤760px: card preview becomes a hidden side drawer, form shows first ---- */
.card-peek-tab,.card-drawer-backdrop{display:none;}
@media (max-width:760px){
  .builder-preview-col{
    position:fixed;top:0;right:0;order:0;z-index:95;
    width:90vw;max-width:400px;height:100vh;height:100dvh;
    background:var(--navy-deep);
    padding:18px 14px 24px;overflow-y:auto;
    box-shadow:-10px 0 30px rgba(0,0,0,0.45);
    transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1);
  }
  .builder-preview-col.open{transform:translateX(0);}
  .preview-shell{padding:16px 10px 20px;}
  .preview-shell .card{padding:16px;}
  .preview-shell .inner{padding:16px;}
  .preview-shell .crest h1{font-size:32px;}
  .preview-shell .photo-frame{width:130px;height:158px;}
  .preview-shell .cand-name{font-size:18px;}

  .card-drawer-backdrop{
    display:block;position:fixed;inset:0;z-index:94;
    background:rgba(0,0,0,0.55);opacity:0;pointer-events:none;
    transition:opacity .28s ease;
  }
  .card-drawer-backdrop.open{opacity:1;pointer-events:auto;}

  .card-peek-tab{
    display:flex;align-items:center;gap:6px;
    position:fixed;top:50%;right:0;transform:translateY(-50%);z-index:96;
    background:linear-gradient(135deg,#b8892a,#7c5c18);color:#fff;border:none;
    border-radius:10px 0 0 10px;padding:12px 8px 12px 10px;cursor:pointer;
    box-shadow:-4px 0 14px rgba(0,0,0,0.35);
    writing-mode:vertical-rl;text-orientation:mixed;
    font-size:11px;font-weight:700;letter-spacing:0.5px;
  }
  .card-peek-tab .cpt-icon{writing-mode:horizontal-tb;font-size:14px;}
  .card-peek-tab.pulse{animation:cptPulse 1.1s ease;}
  @keyframes cptPulse{
    0%{box-shadow:-4px 0 14px rgba(0,0,0,0.35),0 0 0 0 rgba(212,168,83,0.6);}
    70%{box-shadow:-4px 0 14px rgba(0,0,0,0.35),0 0 0 10px rgba(212,168,83,0);}
    100%{box-shadow:-4px 0 14px rgba(0,0,0,0.35),0 0 0 0 rgba(212,168,83,0);}
  }
  body.has-mobile-tabbar .card-peek-tab{top:44%;}
}

/* ============================================================
   UPLOAD STEPS — photo & CV clearly separated, each its own numbered step
   ============================================================ */
.upload-step{border:1px solid var(--border-gold);border-radius:12px;padding:16px;margin-bottom:16px;background:rgba(212,168,83,0.03);}
.upload-step + .upload-step{margin-top:16px;}
.upload-step-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.upload-step-num{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#b8892a,#7c5c18);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.upload-step-title{font-size:13px;font-weight:700;color:var(--gold-light);letter-spacing:0.3px;}
.upload-step-sub{font-size:11px;color:var(--text-dim);margin:-4px 0 10px 32px;}

.photo-upload-row{display:flex;gap:14px;align-items:center;}
.photo-upload-row .photo-upload{flex:1;margin-bottom:0;}
.photo-preview-wrap{position:relative;flex-shrink:0;width:90px;}
.photo-remove-btn{
  position:absolute;top:-8px;right:-8px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#c52035,#8f1726);border:1px solid #fff;color:#fff;
  font-size:12px;line-height:1;cursor:pointer;display:none;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.4);transition:transform .15s ease;
}
.photo-remove-btn:hover{transform:scale(1.12);}
.photo-preview-wrap.has-photo .photo-remove-btn{display:flex;}

/* ============================================================
   BADGE SUGGESTIONS — role/experience-derived, click to toggle
   ============================================================ */
.suggested-badge-row{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px;}
.suggested-badge{
  display:inline-flex;align-items:center;gap:4px;padding:5px 12px;border-radius:16px;
  border:1px dashed rgba(212,168,83,0.55);background:rgba(212,168,83,0.06);color:var(--gold-light);
  font-size:11px;font-weight:700;letter-spacing:0.2px;cursor:pointer;transition:all .15s ease;
}
.suggested-badge:hover{background:rgba(212,168,83,0.16);transform:translateY(-1px);}
.suggested-badge.added{background:var(--gold);color:#1a1206;border-style:solid;}
.suggested-badge .plus{font-weight:900;}

/* ============================================================
   FOIL / TILT CARD EFFECT — Trump-card / trading-card shine
   ============================================================ */
.hc-tilt-wrap{perspective:1100px;}
.hc-foil{
  --rx:0deg;--ry:0deg;--glare-x:50%;--glare-y:50%;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .12s ease-out;
  will-change:transform;
}
.hc-foil::before{
  content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;z-index:5;
  background:radial-gradient(circle at var(--glare-x) var(--glare-y),
    rgba(255,255,255,0.30) 0%, rgba(212,168,83,0.22) 22%, transparent 55%);
  opacity:0;transition:opacity .25s ease;mix-blend-mode:overlay;
}
.hc-tilt-wrap:hover .hc-foil::before{opacity:1;}
.hc-foil::after{
  content:"";position:absolute;top:-60%;left:-60%;width:35%;height:220%;
  background:linear-gradient(75deg,transparent,rgba(255,255,255,0.5),rgba(212,168,83,0.6),transparent);
  transform:rotate(10deg);pointer-events:none;z-index:5;opacity:0;
}
.hc-foil.hc-ambient-shine::after{
  opacity:1;animation:cardShineSweep 1.35s ease-in-out;
}

/* ============================================================
   BUTTON RIPPLE
   ============================================================ */
.btn,.add-btn{position:relative;overflow:hidden;}
.hc-ripple{
  position:absolute;width:10px;height:10px;border-radius:50%;
  background:rgba(255,255,255,0.55);transform:translate(-50%,-50%) scale(0);
  animation:hcRippleAnim .6s ease-out forwards;pointer-events:none;
}
@keyframes hcRippleAnim{
  to{transform:translate(-50%,-50%) scale(22);opacity:0;}
}

/* ============================================================
   MILESTONE POPUP — "your visibility has increased" moment
   ============================================================ */
.hc-milestone-overlay{
  position:fixed;inset:0;background:rgba(5,6,12,0.72);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;z-index:9998;
  opacity:0;pointer-events:none;transition:opacity .25s ease;
}
.hc-milestone-overlay.show{opacity:1;pointer-events:auto;}
.hc-milestone-card{
  width:340px;max-width:92vw;background:linear-gradient(155deg,#0a0d16 0%,#0d1220 40%,#0a0d16 100%);
  border:2px solid var(--gold);border-radius:18px;padding:26px 24px 22px;text-align:center;
  box-shadow:0 0 0 1px rgba(212,168,83,0.3),0 30px 70px rgba(0,0,0,0.65);
  transform:scale(.8) translateY(20px);opacity:0;transition:transform .35s cubic-bezier(.34,1.56,.64,1),opacity .3s ease;
}
.hc-milestone-overlay.show .hc-milestone-card{transform:scale(1) translateY(0);opacity:1;}
.hc-milestone-icon{font-size:38px;margin-bottom:10px;filter:drop-shadow(0 0 10px rgba(212,168,83,0.6));}
.hc-milestone-title{font-family:'Playfair Display',serif;font-size:20px;color:var(--gold-light);margin-bottom:8px;}
.hc-milestone-body{font-size:12.5px;color:var(--text-muted);line-height:1.6;margin-bottom:18px;}
.hc-milestone-close{
  display:inline-block;padding:10px 26px;border-radius:8px;background:linear-gradient(135deg,#c52035,#8f1726);
  border:1px solid var(--gold);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:1px;cursor:pointer;
}

/* ---- 13.7: "Meet your recruiter" + LinkedIn follow block ---- */
.recruiter-block{display:flex;align-items:center;gap:14px;padding:16px 0;border-top:1px solid var(--border-gold);margin-top:24px;flex-wrap:wrap;}
.recruiter-block .rname{font-weight:700;color:var(--gold-light);font-size:14px;}
.recruiter-block .rrole{font-size:12px;color:var(--text-dim);}
.recruiter-block .rlinks{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;}
.recruiter-block a.follow-badge{font-size:12px;font-weight:600;color:var(--gold-light);border:1px solid var(--border-gold);border-radius:20px;padding:7px 14px;text-decoration:none;white-space:nowrap;transition:border-color .2s;}
.recruiter-block a.follow-badge:hover{border-color:var(--gold);}

/* ---- 13.9: Direct messaging (admin Messages tab thread bubbles) ---- */
.thread-bubble{font-size:13px;line-height:1.5;padding:9px 12px;border-radius:10px;max-width:80%;white-space:pre-wrap;}
.thread-bubble.candidate{background:rgba(212,168,83,0.10);color:#eadfc4;align-self:flex-start;border:1px solid var(--border-gold);}
.thread-bubble.admin{background:rgba(111,168,220,0.14);color:#e3edf7;align-self:flex-end;border:1px solid rgba(111,168,220,0.3);}
.thread-time{font-size:10px;color:var(--text-dim);margin-top:3px;}

/* ===================== HOMEPAGE: feature highlights ===================== */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-top:24px;}
.feature-card{background:var(--navy-panel);border:1px solid var(--border-gold);border-radius:14px;padding:22px 20px;transition:border-color .2s,transform .2s;}
.feature-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.feature-card .fc-icon{font-size:24px;margin-bottom:10px;}
.feature-card h3{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:16px;margin:0 0 6px;}
.feature-card p{font-size:13px;color:var(--text-muted);line-height:1.6;margin:0;}

/* ===================== HOMEPAGE: latest roles teaser carousel ===================== */
.teaser-carousel{position:relative;display:flex;align-items:center;gap:10px;margin-top:22px;}
.tc-track-wrap{overflow:hidden;flex:1;min-width:0;}
.tc-track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:4px 4px 10px;-ms-overflow-style:none;scrollbar-width:none;}
.tc-track::-webkit-scrollbar{display:none;}
.tc-card{flex:0 0 250px;scroll-snap-align:start;background:linear-gradient(180deg,rgba(212,168,83,0.05),transparent 40%),var(--navy-panel);
  border:1px solid var(--border-gold);border-radius:14px;padding:18px;transition:border-color .2s,transform .2s;text-decoration:none;display:block;}
.tc-card:hover{border-color:var(--gold);transform:translateY(-3px);}
.tc-card .tc-badge{font-size:10px;letter-spacing:0.6px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:6px;display:inline-block;}
.tc-card h4{font-family:'Playfair Display',serif;color:var(--gold-light);font-size:16px;margin:0 0 10px;line-height:1.3;}
.tc-card .tc-meta{font-size:11.5px;color:var(--text-dim);margin-bottom:12px;}
.tc-card .tc-cta{font-size:11.5px;font-weight:700;color:var(--gold);letter-spacing:0.3px;}
.tc-empty,.tc-fallback{flex:1;text-align:center;padding:30px 20px;color:var(--text-muted);font-size:13.5px;}
.tc-fallback .btn{margin-top:14px;}
.tc-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-gold);background:transparent;
  color:var(--gold);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;}
.tc-arrow:hover{background:rgba(212,168,83,0.12);border-color:var(--gold);}
.tc-dots{display:flex;justify-content:center;gap:6px;margin-top:14px;}
.tc-dot{width:7px;height:7px;border-radius:50%;background:var(--border-gold);cursor:pointer;transition:background .2s,transform .2s;border:none;padding:0;}
.tc-dot.active{background:var(--gold);transform:scale(1.35);}

/* ===================== T&C consent (auth pages) ===================== */
.tc-check{display:flex;align-items:flex-start;gap:8px;font-size:12px;color:var(--text-muted);line-height:1.5;margin:4px 0 16px;cursor:pointer;}
.tc-check input[type="checkbox"]{margin-top:2px;accent-color:var(--gold);width:15px;height:15px;flex-shrink:0;cursor:pointer;}
.tc-check a{color:var(--gold);text-decoration:underline;}

/* ===================== Request rows (job requests, interview requests) ===================== */
.jr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:var(--navy-panel);border:1px solid var(--border-gold);border-radius:10px;padding:12px 16px;margin-bottom:10px;}
.jr-row-main{color:var(--text-muted);font-size:13px;}
.jr-row-main b{color:var(--text);}
.jr-status{font-size:10.5px;font-weight:800;letter-spacing:0.4px;text-transform:uppercase;padding:4px 10px;border-radius:999px;white-space:nowrap;}
.jr-status.pending{color:#f0c674;background:rgba(212,168,83,0.15);border:1px solid rgba(212,168,83,0.4);}
.jr-status.fulfilled,.jr-status.accepted{color:#7fe0ab;background:rgba(80,180,120,0.15);border:1px solid rgba(80,180,120,0.4);}
.jr-status.closed,.jr-status.declined{color:#e08f8f;background:rgba(197,32,53,0.1);border:1px solid rgba(197,32,53,0.35);}

/* ===================== AI auto-fill loading feedback — spinner +
   indeterminate progress bar so the 5-10s Gemini call never looks frozen
   ===================== */
.hc-spinner{
  display:inline-block;width:14px;height:14px;margin-right:2px;vertical-align:-2px;
  border:2px solid rgba(0,0,0,0.25);border-top-color:currentColor;border-radius:50%;
  animation:hcSpin .7s linear infinite;
}
@keyframes hcSpin{to{transform:rotate(360deg);}}
.hc-ai-progress{
  height:4px;border-radius:999px;background:rgba(212,168,83,0.15);overflow:hidden;
  margin-top:8px;display:none;
}
.hc-ai-progress .bar{
  height:100%;width:40%;border-radius:999px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light));
  animation:hcAiProgressSlide 1.1s ease-in-out infinite;
}
@keyframes hcAiProgressSlide{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(350%);}
}
@media (prefers-reduced-motion:reduce){
  .hc-spinner{animation:none;border-top-color:rgba(0,0,0,0.25);}
  .hc-ai-progress .bar{animation:none;width:100%;transform:none;}
}
@media (max-width:480px){
  .dev-card{flex-wrap:wrap;}
  .dev-card .email{word-break:break-all;}
  .dev-card .btn{width:100%;}
}

/* ===================== .tabs pill-bar (hotel/institute dashboards) —
   on mobile, wrap into rows once was tall/messy with several tabs, so
   scroll horizontally as one row instead ===================== */
@media (max-width:600px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;margin-left:-4px;margin-right:-4px;padding-left:4px;padding-right:4px;}
  .tabs::-webkit-scrollbar{display:none;}
  .tab-pill{flex-shrink:0;white-space:nowrap;}
}