/* Certified Trainer Pro skin over the shared app styles (app.css). Dark athletic look; tokens in tokens.css. */
:root {
  --ink: var(--c-white);
  --ink-2: #D3DAE1;
  --ink-3: var(--c-steel);
  --mist: var(--c-base);
  --line: var(--c-line);
  --line-2: #212930;
  --paper: var(--c-raised);
  --signal: var(--c-hot);
  --ok: var(--c-ok);
  --warn: var(--c-hot);
  --bad: var(--c-bad);
  --accent: var(--c-volt);
  --accent-ink: var(--c-volt);
  --tint: color-mix(in srgb, var(--c-volt) 9%, var(--c-raised));
  --tint-2: color-mix(in srgb, var(--c-volt) 16%, var(--c-raised));
  --display: var(--f-head);
  --text: var(--f-body);
  --r: 10px;
  --r-lg: 16px;
  --pink: var(--c-volt); --pink-press: var(--c-volt-press); --violet: var(--c-volt);
}
html, body { background: var(--c-base); color: var(--c-white); }
body { font-family: var(--f-body); }
h1, h2, h3, .page-title { font-family: var(--f-head); text-transform: uppercase; font-weight: 800; letter-spacing: .02em; }
h1 { font-size: 34px; } h2 { font-size: 26px; } h3 { font-size: 20px; }
a { color: var(--c-volt); }
input, select, textarea { background: var(--c-raised-2); color: var(--c-white); border: 1px solid var(--c-line); border-radius: 8px; }
input::placeholder, textarea::placeholder { color: #7D8894; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-volt); outline-offset: 1px; border-color: var(--c-volt); }
select option { background: var(--c-raised-2); color: var(--c-white); }
.btn { font-weight: 800; border-radius: 10px; text-transform: uppercase; letter-spacing: .04em; font-size: 13.5px; background: var(--c-raised-2); color: var(--c-white); border: 1px solid var(--c-line); }
.btn:hover { border-color: var(--c-volt); }
.btn-primary { background: var(--c-volt); color: var(--c-on-volt); border-color: var(--c-volt); box-shadow: none; }
.btn-primary:hover { background: var(--c-volt-press); border-color: var(--c-volt-press); }
.btn-ghost { background: transparent; color: var(--c-white); }
.btn-dark { background: var(--c-raised-2); color: var(--c-white); }
.btn-danger { background: transparent; color: var(--c-bad); border-color: #5a2a2a; }
.btn-danger:hover { background: #2a1517; }
.btn-power, .power-up-loud { background: var(--c-hot); border-color: var(--c-hot); color: var(--c-on-hot); box-shadow: none; }
.power-up-loud svg { color: var(--c-on-hot); }
.side { background: #07080A; border-right: 1px solid var(--c-line); color: #D3DAE1; }
.side .brand { color: var(--c-white); }
.brand { font-family: var(--f-head); font-weight: 800; font-size: 22px; text-transform: uppercase; letter-spacing: .03em; }
.brand b { color: var(--c-volt); font-weight: 800; }
.nav-item { color: #C3CBD3; }
.nav-item:hover { background: var(--c-raised-2); color: var(--c-white); }
.nav-item.active { background: var(--c-raised-2); color: var(--c-white); box-shadow: inset 3px 0 0 var(--c-volt); }
.nav-item.active .nav-ico { color: var(--c-volt); }
.nav-label { color: var(--c-steel); }
.side-foot { border-top-color: var(--c-line); }
.nav-power { color: var(--c-hot) !important; }
.nav-power .nav-ico { color: var(--c-hot); }
.power-hero { background: radial-gradient(120% 140% at 50% -20%, #2a3300 0%, #14181D 60%, #0B0D0F 100%); color: var(--c-white); }
.power-hero p { color: #D3DAE1; }
.power-hero-bolt { background: var(--c-volt); color: var(--c-on-volt); }
.tier-hot { border-color: var(--c-volt); box-shadow: 0 0 0 3px rgba(198,255,0,.15); }
.tier-biz { background: var(--c-raised-2); }
.tier-flag { background: var(--c-volt); color: var(--c-on-volt); }
.panel, .card, .stat, .tier { background: var(--c-raised); border-color: var(--c-line); color: var(--c-white); }
.table th { background: var(--c-raised-2); color: var(--c-steel); }
.table td { border-color: var(--c-line); }
.table tbody tr:hover { background: #181e24; }
.flash-ok { background: #0f2a1a; color: #86efac; border-color: #1f5a37; }
.flash-err { background: #2a1517; color: #ffb4b4; border-color: #5a2a2a; }
.notice, .note-upgrade { background: #2a1d10; border-color: #5a3a1c; color: #ffd2b8; }
.pill { background: var(--c-raised-2); color: var(--c-white); border: 1px solid var(--c-line); }
.pill-ok { background: #0f2a1a; color: #86efac; border-color: #1f5a37; }
.pill-warn { background: #2a1d10; color: #ffb48a; border-color: #5a3a1c; }
.pill-bad { background: #2a1517; color: #ffb4b4; border-color: #5a2a2a; }
.pill-accent { background: color-mix(in srgb, var(--c-volt) 14%, var(--c-raised)); color: var(--c-volt); }
.btn-google { background: var(--c-white); color: #0B0D0F; }
.auth-wrap { background: var(--c-base); }
.auth-card { border-radius: 16px; box-shadow: 0 18px 50px -30px #000; }
.auth-product { background: color-mix(in srgb, var(--c-volt) 14%, var(--c-raised)); color: var(--c-volt); }
.period-switch { background: var(--c-raised); border-color: var(--c-line); }
.period-switch button { color: var(--c-white); }
.period-switch button[aria-pressed="true"] { background: var(--c-volt); color: var(--c-on-volt); }
.seg button { color: var(--c-white); }
.seg button.active { background: var(--c-raised-2); color: var(--c-white); box-shadow: none; }
.rows > li { border-top-color: var(--c-line); }
code { background: var(--c-raised-2); color: var(--c-white); }
.muted { color: var(--c-steel); }
.preview-pane img, .logo-preview { background: #fff; }
[hidden] { display: none !important; }
.stat-value { font-family: var(--f-head); font-weight: 800; }
.volt { color: var(--c-volt); } .hot { color: var(--c-hot); }
.bar-track { background: var(--c-raised-2); } 
.back-arrow { color: var(--c-white); }
/* layer 4: progress, habits, chat */
.pg-scale{display:flex;gap:8px}.pg-scale label{flex:1}.pg-scale input{position:absolute;opacity:0}.pg-scale span{display:block;text-align:center;padding:12px 0;border:1px solid #2A323B;border-radius:10px;background:#14181D;color:#F5F7FA;font-weight:700;min-height:44px}.pg-scale input:checked+span{background:#C6FF00;color:#0B0D0F;border-color:#C6FF00}.pg-scale input:focus-visible+span{outline:2px solid #F5F7FA;outline-offset:2px}
.pg-habit{display:flex;gap:12px;align-items:center;margin:0 0 10px}.pg-tick{flex:0 0 44px;width:44px;height:44px;border-radius:12px;border:2px solid #9AA6B2;background:transparent;color:#0B0D0F;font-size:22px;font-weight:900;cursor:pointer}.pg-tick[aria-pressed=true]{background:#C6FF00;border-color:#C6FF00}
.pg-meas{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.pg-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.pg-photos a{display:block;color:inherit;text-decoration:none}.pg-photos img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;background:#1C2229;display:block}.pg-photos span{display:block;font-size:12px;color:#9AA6B2;margin-top:2px}
.pg-macros{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}.pg-macros div{text-align:center;background:#1C2229;border-radius:10px;padding:10px 4px}.pg-macros b{display:block;font-size:18px}
.pg-thread{display:flex;flex-direction:column;gap:10px;margin:12px 0}.pg-msg{max-width:88%;padding:10px 14px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere}.pg-msg span{display:block;font-size:11px;margin-top:4px;opacity:.75}.pg-msg.me{align-self:flex-end;background:#C6FF00;color:#0B0D0F}.pg-msg.them{align-self:flex-start;background:#1C2229;color:#F5F7FA}
.pg-bars{display:inline-flex;align-items:flex-end;gap:3px;height:28px;vertical-align:middle;margin:0 12px 0 6px}.pg-bars i{display:block;width:8px;background:#C6FF00;border-radius:2px}.pg-trend{margin-bottom:10px}