/* Staffball shared styles */

:root{--bg:#fff;--bg2:#ecefe8;--bg3:#dde1d8;--text:#1a1f2e;--text2:#4a5060;--text3:#8b9aaf;--border:#e4e6e1;--border2:#d0d3cc;--amber:#F59E0B;--amber-dk:#D97706;--amber-lt:#fef3c7;--amber-glow:rgba(245,158,11,0.08);--green:#16a34a;--green-lt:#dcfce7;--red:#dc2626;--red-lt:#fee2e2;--blue:#2563eb;--blue-lt:#dbeafe;--white:#fff;--navy:#1a1f2e;--navy2:#242a3a;--fd:'Space Grotesk',sans-serif;--fb:'DM Sans',sans-serif;--sw:240px;--r:10px;--rs:6px;}

/* ============================================================
 * PREMIUM POLISH TOKENS — added Apr 2026
 * Linear-inspired: clean, geometric, snappy
 * Radius generous (12-14px), shadows visible but not heavy
 * ============================================================ */
:root{
  /* Radius scale */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  
  /* Shadow scale — visible, premium */
  --sh-xs: 0 1px 2px rgba(15,23,42,.05);
  --sh-sm: 0 2px 6px rgba(15,23,42,.07), 0 1px 2px rgba(15,23,42,.04);
  --sh-md: 0 8px 24px rgba(15,23,42,.10), 0 3px 6px rgba(15,23,42,.05);
  --sh-lg: 0 16px 40px rgba(15,23,42,.12), 0 6px 12px rgba(15,23,42,.06);
  --sh-amber: 0 4px 16px rgba(245,158,11,.18), 0 2px 4px rgba(245,158,11,.08);
  
  /* Transitions — snappy */
  --t-fast: 120ms cubic-bezier(.4,0,.2,1);
  --t-base: 160ms cubic-bezier(.4,0,.2,1);
  --t-slow: 240ms cubic-bezier(.4,0,.2,1);
  
  /* Premium accent surfaces */
  --surface: #ffffff;
  --surface-muted: #fafbfa;
  --surface-hover: #f4f6f3;
  
  /* Status accents — refined */
  --status-open: #10b981;
  --status-open-bg: #ecfdf5;
  --status-listening: #f59e0b;
  --status-listening-bg: #fef3c7;
  --status-unavailable: #94a3b8;
  --status-unavailable-bg: #f1f5f9;
}

/* ============================================================
 * PREMIUM CARDS — used by ps-card-v2 and friends
 * ============================================================ */
.ps-card-v2{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 20px;
  margin-bottom:12px;
  display:flex;
  align-items:center;
  gap:18px;
  cursor:pointer;
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  box-shadow:var(--sh-sm);
}
.ps-card-v2::before{
  content:'';
  position:absolute;
  left:0;top:14px;bottom:14px;
  width:3px;
  background:var(--amber);
  border-radius:0 3px 3px 0;
  opacity:0;
  transition:opacity var(--t-base);
}
.ps-card-v2:hover{
  transform:translateY(-2px);
  border-color:var(--border2);
  box-shadow:var(--sh-md);
}
.ps-card-v2:hover::before{opacity:1;}
.ps-card-v2:active{transform:translateY(0);transition-duration:80ms;}

/* Avatar with gradient — premium */
.ps-av-v2{
  width:52px;height:52px;
  border-radius:var(--r-md);
  display:flex;align-items:center;justify-content:center;
  font:700 15px var(--fd);
  color:#fff;
  flex-shrink:0;
  letter-spacing:.3px;
  position:relative;
  overflow:hidden;
}
.ps-av-v2 img{width:100%;height:100%;object-fit:cover;}
.ps-av-v2.ghost{background:linear-gradient(135deg,#94a3b8 0%,#64748b 100%);color:#fff;}

/* Match score circular badge */
.ps-match-v2{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  flex-shrink:0;
  min-width:78px;
  padding-left:8px;
  border-left:1px solid var(--border);
  position:relative;
}
.ps-match-v2 .score-ring{
  position:relative;
  width:54px;height:54px;
}
.ps-match-v2 .score-ring svg{
  width:100%;height:100%;
  transform:rotate(-90deg);
}
.ps-match-v2 .score-ring .ring-bg{
  fill:none;
  stroke:var(--bg3);
  stroke-width:4;
}
.ps-match-v2 .score-ring .ring-fg{
  fill:none;
  stroke-width:4;
  stroke-linecap:round;
  transition:stroke-dashoffset var(--t-slow);
}
.ps-match-v2 .score-ring .ring-fg.s-high{stroke:var(--status-open);}
.ps-match-v2 .score-ring .ring-fg.s-mid{stroke:var(--amber);}
.ps-match-v2 .score-ring .ring-fg.s-low{stroke:var(--text3);}
.ps-match-v2 .score-num{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  font:700 14px var(--fd);
  color:var(--text);
  letter-spacing:-.3px;
}
.ps-match-v2 .match-lbl{
  font:600 9px var(--fd);
  color:var(--text3);
  letter-spacing:.6px;
  margin-top:6px;
  text-transform:uppercase;
}
.ps-match-v2 .match-ctx{
  font:500 9px var(--fb);
  color:var(--text3);
  margin-top:3px;
  max-width:90px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
}

/* Pills — availability, area, level */
.ps-pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;
  border-radius:var(--r-pill);
  font:600 10.5px var(--fd);
  letter-spacing:.2px;
  white-space:nowrap;
}
.ps-pill .dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.ps-pill.av-open{background:var(--status-open-bg);color:var(--status-open);}
.ps-pill.av-open .dot{background:var(--status-open);}
.ps-pill.av-listening{background:var(--status-listening-bg);color:var(--amber-dk);}
.ps-pill.av-listening .dot{background:var(--amber);}
.ps-pill.av-unavailable{background:var(--status-unavailable-bg);color:var(--status-unavailable);}
.ps-pill.av-unavailable .dot{background:var(--status-unavailable);}
.ps-pill.meta{background:var(--bg2);color:var(--text2);font-weight:500;}
.ps-pill.loc{background:transparent;color:var(--text3);padding-left:0;font-weight:500;}
.ps-pill.match-tag{background:var(--amber-glow);color:var(--amber-dk);font-weight:600;}

/* Caret */
.ps-caret-v2{
  width:24px;height:24px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--text3);
  flex-shrink:0;
  transition:transform var(--t-base), color var(--t-base);
}
.ps-card-v2:hover .ps-caret-v2{
  color:var(--amber);
  transform:translateX(3px);
}

/* Body — name, role, meta line */
.ps-body-v2{flex:1;min-width:0;}
.ps-body-v2 .name{
  font:700 15px var(--fd);
  color:var(--text);
  letter-spacing:-.2px;
  margin-bottom:2px;
  display:flex;align-items:center;gap:8px;
}
.ps-body-v2 .role{
  font:500 13px var(--fb);
  color:var(--text2);
  margin-bottom:8px;
}
.ps-body-v2 .meta-row{
  display:flex;flex-wrap:wrap;gap:6px;
  margin-bottom:8px;
}
.ps-body-v2 .bio{
  font:400 12px var(--fb);
  color:var(--text3);
  line-height:1.55;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}


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

body{font-family:var(--fb);background:var(--bg2);color:var(--text);-webkit-font-smoothing:antialiased;}

.login-hero{background:var(--navy);padding:32px 32px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;max-height:100vh;}

.login-hero::before{content:'';position:absolute;inset:0;opacity:.03;background:repeating-linear-gradient(45deg,#fff 0px,#fff 1px,transparent 1px,transparent 12px);}

.login-hero *{position:relative;z-index:1;}

.hero-title{font-size:28px;font-weight:700;color:#fff;line-height:1.2;margin:24px 0 12px;letter-spacing:-.5px;}

.hero-title em{color:var(--amber);font-style:normal;}

.hero-sub{font-size:14px;color:var(--text3);line-height:1.6;max-width:340px;}

.hero-stats{display:flex;gap:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);}

.hero-stat-val{font-size:22px;font-weight:700;color:var(--amber);}

.hero-stat-label{font-size:10px;color:var(--text3);letter-spacing:.5px;}

.login-form{background:var(--white);padding:32px 32px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto;}

.field{margin-bottom:14px;}

.field input,.field select{width:100%;padding:10px 14px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-family:var(--fb);font-size:13px;outline:none;}

.field input:focus,.field select:focus{border-color:var(--amber);}

.lbtn{width:100%;padding:12px;background:var(--amber);color:var(--white);border:none;border-radius:8px;font-family:var(--fd);font-size:14px;font-weight:600;cursor:pointer;margin-top:8px;}

.lbtn:hover{background:var(--amber-dk);}

.ldemo{text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border);font-size:11px;color:var(--text3);}

.ldemo a{color:var(--amber);cursor:pointer;text-decoration:none;font-weight:500;}

.switch-link{text-align:center;margin-top:12px;font-size:11px;color:var(--text3);}

.switch-link a{color:var(--amber-dk);font-weight:500;text-decoration:none;}

.app.on{display:flex;}

.sb-logo{padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.06);}

.sb-logo span{font-family:var(--fd);font-size:17px;font-weight:700;}

.sb-logo .a{color:var(--text3);}

.sb-logo .b{color:#fff;}

.sb-logo .c{color:var(--amber);}

.sb-user{padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:10px;}

.sb-info{flex:1;min-width:0;}

.sb-name{font-family:var(--fd);font-size:12px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.sb-role{font-size:10px;color:var(--text3);}

.sb-tier{font-family:var(--fd);font-size:8px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--amber);background:rgba(245,158,11,.12);padding:2px 6px;border-radius:4px;flex-shrink:0;}

.sb-nav{flex:1;padding:8px 0;overflow-y:auto;}

.sb-sec{padding:0 20px;font-family:var(--fd);font-size:9px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:#4a5060;margin:18px 0 6px;}

.sb-sec:first-child{margin-top:8px;}

.sb-lk{display:flex;align-items:center;gap:10px;padding:9px 20px;font-family:var(--fd);font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;transition:all .12s;border-left:3px solid transparent;}

.sb-lk:hover{background:rgba(255,255,255,.04);color:#fff;}

.sb-lk.on{color:var(--amber);border-left-color:var(--amber);background:rgba(245,158,11,.06);font-weight:600;}

.sb-lk svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}

.sb-lk .badge{margin-left:auto;background:var(--amber);color:var(--white);font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;}

.sb-lk .lock{margin-left:auto;font-size:9px;color:#4a5060;}

.sb-bot{padding:12px 20px;border-top:1px solid rgba(255,255,255,.06);}

.sb-out{font-family:var(--fd);font-size:11px;color:#4a5060;cursor:pointer;}

.sb-out:hover{color:var(--red);}

.mn-hd{padding:18px 32px;background:var(--white);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}

.mn-t{font-family:var(--fd);font-size:18px;font-weight:700;}

.mn-st{font-size:12px;color:var(--text3);margin-top:2px;}

.mn-c{padding:24px 32px;}

.pg{display:none;}

.pg.on{display:block;}

.card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}

.card-t{font-family:var(--fd);font-size:14px;font-weight:600;}

.sr{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}

.sc{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:16px 18px;}

.sv{font-family:var(--fd);font-size:24px;font-weight:700;letter-spacing:-.5px;}

.sv .ac{color:var(--amber);}

.sl{font-size:11px;color:var(--text3);margin-top:2px;}

.sch{font-size:10px;margin-top:4px;}

.sch.up{color:var(--green);}

.dt{width:100%;border-collapse:collapse;}

.dt th{font-family:var(--fd);font-size:10px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);text-align:left;padding:10px 14px;border-bottom:1px solid var(--border);}

.dt td{font-size:12px;color:var(--text2);padding:11px 14px;border-bottom:1px solid var(--bg3);}

.dt tr:hover td{background:var(--bg2);}

.dt .nm{color:var(--text);font-weight:500;}

.tg{display:inline-block;font-family:var(--fd);font-size:9px;font-weight:500;padding:3px 8px;border-radius:4px;letter-spacing:.3px;}

.tg.am{background:var(--amber-lt);color:var(--amber-dk);}

.tg.st{background:var(--bg3);color:var(--text2);}

.tg.gr{background:var(--green-lt);color:var(--green);}

.tg.rd{background:var(--red-lt);color:var(--red);}

.tg.bl{background:var(--blue-lt);color:var(--blue);}

.sd{width:6px;height:6px;border-radius:50%;display:inline-block;margin-right:5px;}

.sd.ac{background:var(--green);}

.btn{font-family:var(--fd);font-size:12px;font-weight:600;padding:8px 16px;border-radius:var(--rs);border:none;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}

.btn-a{background:var(--amber);color:var(--white);}

.btn-a:hover{background:var(--amber-dk);}

.btn-o{background:var(--white);color:var(--text2);border:1px solid var(--border);}

.btn-o:hover{border-color:var(--text3);color:var(--text);}

.btn-s{font-size:10px;padding:5px 10px;}

.lc:hover{border-color:var(--amber);box-shadow:0 2px 8px rgba(245,158,11,.08);}

.lt{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;}

.ltit{font-family:var(--fd);font-size:14px;font-weight:600;}

.lcl{font-size:11px;color:var(--text3);margin-top:2px;display:flex;align-items:center;gap:6px;}

.lm{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;}

.fs{padding:8px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);color:var(--text2);font-family:var(--fd);font-size:11px;outline:none;cursor:pointer;}

.si{padding:8px 12px;background:var(--white);border:1px solid var(--border);border-radius:var(--rs);color:var(--text);font-family:var(--fb);font-size:12px;outline:none;width:240px;}

.si::placeholder{color:var(--text3);}

.cc{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}

.chip{font-family:var(--fd);font-size:11px;font-weight:500;padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--white);color:var(--text2);cursor:pointer;transition:all .15s;}

.chip:hover{border-color:var(--amber);color:var(--amber-dk);}

.chip.on{background:var(--amber);color:var(--white);border-color:var(--amber);}

.ins-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .15s;}

.ins-card:hover{border-color:var(--amber);box-shadow:0 2px 8px rgba(245,158,11,.08);}

.ins-body{padding:16px;}

.ins-author{font-weight:500;color:var(--text2);}

.ins-featured{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;}

.ins-featured .ins-body{padding:24px;display:flex;flex-direction:column;justify-content:center;}

.ins-featured .ins-desc{font-size:12px;}

.lang-btn{font-family:var(--fd);font-size:9px;font-weight:500;padding:3px 7px;border-radius:4px;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--text3);cursor:pointer;transition:all .15s;}

.lang-btn:hover{border-color:var(--amber);color:var(--amber);}

.lang-btn.on{background:var(--amber);color:var(--white);border-color:var(--amber);}

.panel-dim.on{display:block;}

/* Onboarding */
.onboard{display:none;min-height:100vh;background:var(--bg2);align-items:center;justify-content:center;padding:24px;}

.onboard.on{display:flex;}

.ob-card{width:560px;background:var(--white);border:1px solid var(--border);border-radius:16px;padding:40px;box-shadow:0 4px 24px rgba(0,0,0,.06);}

.ob-logo{text-align:center;margin-bottom:8px;}

.ob-logo span{font-family:var(--fd);font-size:22px;font-weight:700;}

.ob-title{font-family:var(--fd);font-size:20px;font-weight:700;text-align:center;margin-bottom:4px;}

.ob-sub{font-size:13px;color:var(--text3);text-align:center;margin-bottom:24px;}

.ob-steps{display:flex;gap:4px;margin-bottom:24px;}

.ob-step{flex:1;height:4px;border-radius:2px;background:var(--bg3);transition:background .2s;}

.ob-step.done{background:var(--amber);}

.ob-step.active{background:var(--amber);}

.ob-section{display:none;}

.ob-section.on{display:block;}

.ob-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

.ob-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}

.ob-chip{font-family:var(--fd);font-size:11px;font-weight:500;padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--white);color:var(--text2);cursor:pointer;transition:all .15s;}

.ob-chip.on{background:var(--amber);color:var(--white);border-color:var(--amber);}

.ob-chip:hover{border-color:var(--amber);}

.ob-nav{display:flex;justify-content:space-between;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);}

/* Article reader */
.art-panel{display:none;position:fixed;top:0;right:0;bottom:0;width:620px;background:var(--white);z-index:210;box-shadow:-8px 0 30px rgba(0,0,0,.1);animation:jdIn .25s ease;overflow-y:auto;}

.art-panel.on{display:block;}

.art-hd{padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1;}

.art-body{padding:32px;}

.art-tag{font-family:var(--fd);font-size:9px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--amber-dk);margin-bottom:8px;}

.art-title{font-family:var(--fd);font-size:22px;font-weight:700;line-height:1.3;margin-bottom:8px;}

.art-meta{font-size:11px;color:var(--text3);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--bg3);}

.art-content{font-size:14px;color:var(--text2);line-height:1.8;}

.art-content p{margin-bottom:16px;}

.art-content h3{font-family:var(--fd);font-size:16px;font-weight:700;color:var(--text);margin:24px 0 8px;}

.art-content ul{margin:8px 0 16px 20px;}

.art-content li{margin-bottom:6px;}

.art-content .highlight{background:var(--amber-lt);border-left:3px solid var(--amber);padding:12px 16px;border-radius:0 8px 8px 0;margin:16px 0;font-size:13px;color:var(--amber-dk);}

.art-content .stat-row{display:flex;gap:12px;margin:16px 0;}

.art-content .stat-box{flex:1;background:var(--bg2);border-radius:8px;padding:12px;text-align:center;}

.art-content .stat-val{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--amber);}

.art-content .stat-label{font-size:10px;color:var(--text3);margin-top:2px;}

/* ============================================================
   Staffball animated login hero (sb-hero-*)
   All selectors prefixed to avoid collision with existing CSS.
   ============================================================ */
.sb-hero{background:var(--navy);position:relative;overflow:hidden;height:100%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:32px;}
.sb-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:40px 40px;animation:sb-hero-grid 20s linear infinite;mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,rgba(0,0,0,.9) 0%,transparent 70%);}
@keyframes sb-hero-grid{0%{background-position:0 0;}100%{background-position:40px 40px;}}
.sb-hero-orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.3;pointer-events:none;}
.sb-hero-orb-1{width:300px;height:300px;background:var(--amber);top:-60px;left:-60px;animation:sb-hero-float1 18s ease-in-out infinite;}
.sb-hero-orb-2{width:400px;height:400px;background:#3b82f6;bottom:-120px;right:-120px;animation:sb-hero-float2 22s ease-in-out infinite;}
@keyframes sb-hero-float1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(40px,60px) scale(1.15);}}
@keyframes sb-hero-float2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,-40px) scale(1.1);}}
.sb-hero-sound{position:absolute;top:20px;right:20px;z-index:10;background:rgba(255,255,255,.08);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.7);width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:background .2s,color .2s;}
.sb-hero-sound:hover{background:rgba(255,255,255,.14);color:#fff;}
.sb-hero-sound.on{color:var(--amber);border-color:rgba(245,158,11,.4);}
.sb-hero-logo{position:absolute;top:24px;left:32px;z-index:5;font:700 22px var(--fd);letter-spacing:-.5px;}
.sb-hero-logo .a{color:rgba(255,255,255,.45);}
.sb-hero-logo .b{color:#fff;}
.sb-hero-logo .c{color:var(--amber);}
.sb-hero-stage{position:relative;width:100%;flex:1;display:flex;align-items:center;justify-content:center;z-index:2;margin:40px 0;}
.sb-hero-scene{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s ease;pointer-events:none;}
.sb-hero-scene.on{opacity:1;transform:translateY(0);pointer-events:auto;}
.sb-hero-scene.flash{animation:sb-hero-flash .4s ease;}
@keyframes sb-hero-flash{0%{filter:brightness(1);}20%{filter:brightness(2.5);}100%{filter:brightness(1);}}
.sb-hero-hook{font:700 clamp(24px,3.4vw,42px)/1.15 var(--fd);color:#fff;letter-spacing:-1px;max-width:90%;}
.sb-hero-hook em{font-style:normal;color:var(--amber);}
.sb-hero-hook-sub{margin-top:20px;font:400 14px/1.6 var(--fb);color:rgba(255,255,255,.5);max-width:80%;}
.sb-hero-pain-label,.sb-hero-mock-label,.sb-hero-plans-label{font:600 10px/1 var(--fd);letter-spacing:2px;color:rgba(255,255,255,.4);margin-bottom:16px;text-transform:uppercase;}
.sb-hero-pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;}
.sb-hero-pain{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:14px 16px;position:relative;overflow:hidden;animation:sb-hero-pain-shake 4s ease-in-out infinite;}
.sb-hero-pain:nth-child(2){animation-delay:.2s;}
.sb-hero-pain:nth-child(3){animation-delay:.4s;}
.sb-hero-pain:nth-child(4){animation-delay:.6s;}
@keyframes sb-hero-pain-shake{0%,90%,100%{transform:translateX(0);}92%{transform:translateX(-2px);}94%{transform:translateX(2px);}96%{transform:translateX(-1px);}98%{transform:translateX(0);}}
.sb-hero-pain-icon{font-size:18px;margin-bottom:6px;display:block;}
.sb-hero-pain-text{font:600 12px/1.4 var(--fd);color:rgba(255,255,255,.9);}
.sb-hero-mock{width:100%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:16px;}
.sb-hero-mock-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.sb-hero-mock-title{font:600 12px var(--fd);color:#fff;}
.sb-hero-mock-dot{width:6px;height:6px;background:var(--amber);border-radius:50%;display:inline-block;margin-right:4px;animation:sb-hero-pulse 1.6s ease-in-out infinite;}
@keyframes sb-hero-pulse{0%,100%{opacity:.4;}50%{opacity:1;}}
.sb-hero-mock-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid rgba(255,255,255,.05);opacity:0;animation:sb-hero-row-in .5s ease forwards;}
.sb-hero-mock-row:nth-child(2){animation-delay:.2s;}
.sb-hero-mock-row:nth-child(3){animation-delay:.4s;}
.sb-hero-mock-row:nth-child(4){animation-delay:.6s;}
.sb-hero-mock-row:nth-child(5){animation-delay:.8s;}
@keyframes sb-hero-row-in{from{opacity:0;transform:translateX(-8px);}to{opacity:1;transform:translateX(0);}}
.sb-hero-mock-av{width:24px;height:24px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:50%;flex-shrink:0;}
.sb-hero-mock-name{font:500 11px var(--fd);color:rgba(255,255,255,.85);flex:1;}
.sb-hero-mock-tag{font:500 9px var(--fd);color:var(--amber);background:rgba(245,158,11,.12);padding:2px 6px;border-radius:4px;letter-spacing:.5px;}
.sb-hero-mock-score{font:700 11px var(--fd);color:#fff;}
.sb-hero-plans{display:flex;gap:10px;width:100%;}
.sb-hero-plan{flex:1;background:rgba(255,255,255,.05);border-radius:10px;padding:14px 12px;border:1px solid rgba(255,255,255,.06);transition:transform .3s,border-color .3s;}
.sb-hero-plan.featured{background:rgba(245,158,11,.15);border-color:rgba(245,158,11,.35);transform:translateY(-4px);}
.sb-hero-plan-name{font:600 11px var(--fd);color:#fff;}
.sb-hero-plan.featured .sb-hero-plan-name{color:var(--amber);}
.sb-hero-plan-price{font:700 18px var(--fd);color:#fff;margin:6px 0 4px;}
.sb-hero-plan-price small{font:400 9px var(--fb);color:rgba(255,255,255,.5);}
.sb-hero-plan-desc{font:400 9px/1.5 var(--fb);color:rgba(255,255,255,.5);}
.sb-hero-plans-vat{font:400 8px var(--fb);color:rgba(255,255,255,.3);margin-top:8px;}
.sb-hero-reveal{width:100%;text-align:left;}
.sb-hero-reveal-logo{font:700 clamp(40px,6vw,80px)/1 var(--fd);letter-spacing:-2px;margin-bottom:18px;}
.sb-hero-reveal-logo .a{color:rgba(255,255,255,.45);}
.sb-hero-reveal-logo .b{color:#fff;}
.sb-hero-reveal-logo .c{color:var(--amber);animation:sb-hero-dot-pop 1.2s ease-out .2s backwards;}
@keyframes sb-hero-dot-pop{0%{opacity:0;transform:scale(.3);}60%{opacity:1;transform:scale(1.4);}100%{opacity:1;transform:scale(1);}}
.sb-hero-reveal-line{height:1px;width:0;background:var(--amber);animation:sb-hero-line-grow 1s ease .4s forwards;margin-bottom:20px;}
@keyframes sb-hero-line-grow{to{width:120px;}}
.sb-hero-reveal-tag{font:400 clamp(14px,1.3vw,18px)/1.5 var(--fb);color:rgba(255,255,255,.7);max-width:90%;opacity:0;animation:sb-hero-tag-in .8s ease .6s forwards;}
@keyframes sb-hero-tag-in{to{opacity:1;}}
.sb-hero-reveal-tag em{font-style:normal;color:#fff;font-weight:500;}
.sb-hero-dots{position:absolute;bottom:24px;left:32px;right:32px;display:flex;gap:6px;z-index:3;}
.sb-hero-dot{flex:1;height:2px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden;position:relative;cursor:pointer;}
.sb-hero-dot-fill{position:absolute;left:0;top:0;bottom:0;background:var(--amber);width:0;transition:width .3s linear;}
.sb-hero-dot.done .sb-hero-dot-fill{width:100%;}
.sb-hero-dot.active .sb-hero-dot-fill{animation:sb-hero-fill linear forwards;}
@keyframes sb-hero-fill{from{width:0;}to{width:100%;}}
@media (prefers-reduced-motion: reduce){.sb-hero::before,.sb-hero-orb-1,.sb-hero-orb-2,.sb-hero-pain,.sb-hero-mock-dot,.sb-hero-mock-row{animation:none !important;}}

/* ============================================================
 * Skeletons & loaders — premium loading states
 * Added by performance audit Phase 0 — Apr 2026.
 * Use case: while Promise.all loads the dashboard, each section
 * shows a skeleton instead of a static "Loading..." string.
 * ============================================================ */

/* Base loader (spinner) — used via showLoading(id).
   Centralised here; previously duplicated in clubes.css/profissionais.css. */
.sb-loader{display:flex;align-items:center;justify-content:center;padding:40px;color:var(--text3);font-size:13px;gap:8px;}
.sb-loader::before{content:'';width:18px;height:18px;border:2px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .6s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Skeleton primitives */
.sk{
  background:var(--bg3);
  border-radius:var(--rs);
  position:relative;
  overflow:hidden;
  display:block;
}
.sk::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  animation:sb-shimmer 1.4s ease-in-out infinite;
  transform:translateX(-100%);
}
@keyframes sb-shimmer{
  0%{transform:translateX(-100%);}
  100%{transform:translateX(100%);}
}

/* Sizing helpers — height variants */
.sk-h-sm{height:10px;}
.sk-h-md{height:14px;}
.sk-h-lg{height:20px;}
.sk-h-xl{height:32px;}

/* Width helpers — width variants (% of parent) */
.sk-w-25{width:25%;}
.sk-w-40{width:40%;}
.sk-w-50{width:50%;}
.sk-w-60{width:60%;}
.sk-w-75{width:75%;}
.sk-w-90{width:90%;}
.sk-w-full{width:100%;}

/* Common composite shapes */
.sk-circle{border-radius:50%;width:48px;height:48px;}
.sk-circle-sm{border-radius:50%;width:32px;height:32px;}
.sk-circle-lg{border-radius:50%;width:72px;height:72px;}

/* Skeleton container — vertical stack with consistent gap */
.sk-stack{display:flex;flex-direction:column;gap:8px;padding:16px 18px;}
.sk-stack-tight{display:flex;flex-direction:column;gap:6px;}

/* Skeleton card — mimics .ps-card / .lc structure */
.sk-card{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:10px;
}
.sk-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}

/* Skeleton row for tables — used inside <tr> cells */
.sk-row{display:flex;align-items:center;gap:10px;padding:10px 0;}

/* Stat card skeleton — mimics dashboard tiles */
.sk-stat{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:96px;
}

/* Reduced motion — accessibility */
@media (prefers-reduced-motion: reduce){
  .sk::after{animation:none;background:none;}
  .sb-loader::before{animation:none;border-top-color:var(--text3);}
}