/* Layout: dark-first "game day" workspace. Sticky striped top bar, slanted tabs, fire-gradient highlights; cards stack to one column on phones */
:root{
  --bg:#0A0C1F; --surface:#13173A; --raise:#1B2050; --sunk:#070918; --line:#2A3068;
  --fg:#F4F5FF; --muted:#A0A6D6;
  --accent:#FF2D55; --accent2:#FFB300; --accent-fg:#FFFFFF; --accent-soft:#3A1430;
  --fire:linear-gradient(100deg,#FF2D55 0%,#FF5A2B 55%,#FFB300 100%);
  --ok:#3BE39A; --ok-soft:#0F3A2C; --warn:#FFC53D; --warn-soft:#3A2F0E; --bad:#FF6B7F; --bad-soft:#3E1422; --info:#6FB7FF; --info-soft:#132C4E;
  --wa:#3BE38A;
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --r:12px;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]){
  --bg:#F2F2FA; --surface:#FFFFFF; --raise:#F7F7FD; --sunk:#E6E7F3; --line:#D6D8EA; --fg:#0B0D24; --muted:#5A5F86;
  --accent:#E3123E; --accent2:#E07800; --accent-fg:#FFFFFF; --accent-soft:#FFE1E8;
  --fire:linear-gradient(100deg,#E3123E 0%,#F2481B 55%,#F59E0B 100%);
  --ok:#0E8F55; --ok-soft:#D7F5E6; --warn:#9A6400; --warn-soft:#FFF0C7; --bad:#C2183A; --bad-soft:#FFE0E6; --info:#1E5FB8; --info-soft:#DCEAFF; --wa:#118C48; color-scheme:light}}
:root[data-theme="light"]{
  --bg:#F2F2FA; --surface:#FFFFFF; --raise:#F7F7FD; --sunk:#E6E7F3; --line:#D6D8EA; --fg:#0B0D24; --muted:#5A5F86;
  --accent:#E3123E; --accent2:#E07800; --accent-fg:#FFFFFF; --accent-soft:#FFE1E8;
  --fire:linear-gradient(100deg,#E3123E 0%,#F2481B 55%,#F59E0B 100%);
  --ok:#0E8F55; --ok-soft:#D7F5E6; --warn:#9A6400; --warn-soft:#FFF0C7; --bad:#C2183A; --bad-soft:#FFE0E6; --info:#1E5FB8; --info-soft:#DCEAFF; --wa:#118C48; color-scheme:light}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--body)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:#07081A}
h1,h2,h3{font-family:var(--display);font-weight:800;font-style:italic;letter-spacing:.01em;line-height:1.05;margin:0;text-wrap:balance;text-transform:uppercase}
h2{font-size:1.9rem}
h3{font-size:1.3rem}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:.86em}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.hot{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}
.lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:700}
button,.btn{font:700 .9rem var(--body);border:1px solid var(--line);background:var(--raise);color:var(--fg);padding:.55rem .95rem;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.35rem;line-height:1.2;transition:transform .12s,border-color .12s,filter .12s}
button:hover,.btn:hover{border-color:var(--accent)}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[contenteditable]:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}
.primary{background:var(--fire);color:#fff;border-color:transparent;text-transform:uppercase;letter-spacing:.04em;font-size:.82rem;box-shadow:0 6px 18px -8px var(--accent)}
.primary:hover{filter:brightness(1.1);border-color:transparent}
.ghost{background:transparent}
.sm{padding:.35rem .65rem;font-size:.78rem}
.primary.sm{font-size:.72rem}
.wa{color:var(--wa);border-color:color-mix(in srgb,var(--wa) 45%,var(--line))}
.wa:hover{border-color:var(--wa)}
input,select,textarea{font:inherit;color:var(--fg);background:var(--sunk);border:1px solid var(--line);border-radius:8px;padding:.55rem .7rem;width:100%}
textarea{font-family:var(--mono);font-size:.82rem;line-height:1.5;resize:vertical}
textarea.prose{font-family:var(--body);font-size:.95rem}
label.f{display:grid;gap:.3rem}
.row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1rem;align-items:start}
.stack{display:grid;gap:1rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1.1rem;display:grid;gap:.9rem;min-width:0}
.pill{display:inline-flex;align-items:center;gap:.35rem;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:.22rem .55rem;border-radius:99px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.s-active,.s-approved,.s-connected,.s-high,.s-paid,.s-ontime,.s-posted{background:var(--ok-soft);color:var(--ok)} .s-paused,.s-scheduled{background:var(--info-soft);color:var(--info)}
.s-expired,.s-low,.s-absent{background:var(--bad-soft);color:var(--bad)} .s-expiring,.s-pending,.s-mid,.s-late,.s-unpaid{background:var(--warn-soft);color:var(--warn)}
.s-declined,.s-off,.s-draft{background:var(--sunk);color:var(--muted)}
.tag{font-size:.7rem;font-weight:700;padding:.12rem .45rem;border-radius:4px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.pr{font-size:.66rem;font-weight:900;letter-spacing:.06em;padding:.1rem .4rem;border-radius:4px;background:var(--fire);color:#fff;font-style:italic}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:#07081A;color:#F4F5FF;border-bottom:3px solid transparent;border-image:var(--fire) 1}
.top .wrap{display:flex;align-items:center;gap:1rem;padding-block:.7rem;flex-wrap:wrap}
.brand{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.6rem;text-transform:uppercase;letter-spacing:.02em;display:flex;align-items:center;gap:.55rem}
.plate{width:24px;height:24px;border-radius:50%;background:conic-gradient(var(--accent),var(--accent2),var(--accent));display:inline-grid;place-items:center}
.plate::after{content:"";width:8px;height:8px;border-radius:50%;background:#07081A}
.top .who{margin-left:auto;display:flex;gap:.6rem;align-items:center;font-size:.85rem;flex-wrap:wrap}
.top button{background:transparent;color:#F4F5FF;border-color:#3A3F78}
.demo-tag{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;border:1px dashed #565C9C;color:#C9CCF0;padding:.1rem .45rem;border-radius:4px}

/* login */
.login{display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;padding-block:3rem;align-items:start}
.login h1{font-size:clamp(3rem,8.5vw,6rem);font-weight:800;line-height:.88;letter-spacing:-.01em}
.login h1 em{font-style:italic;display:block}
.stripes{height:10px;margin-block:1.4rem;background:repeating-linear-gradient(-55deg,var(--accent) 0 10px,transparent 10px 20px);max-width:280px;opacity:.85}
.feat{display:grid;gap:.8rem;max-width:54ch}
.feat div{display:grid;grid-template-columns:2rem 1fr;gap:.5rem}
.feat b{font-family:var(--display);font-style:italic;font-size:1.4rem;line-height:1}
.roles{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.roles button{justify-content:center}
.roles button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}

/* tabs */
.tabs{display:flex;gap:.3rem;overflow-x:auto;margin-block:1.2rem;scrollbar-width:thin;padding-bottom:4px}
.tabs button{border:1px solid var(--line);background:var(--surface);padding:.55rem .95rem;color:var(--muted);white-space:nowrap;transform:skewX(-10deg);border-radius:6px}
.tabs button>span.t{display:inline-block;transform:skewX(10deg)}
.tabs button[aria-selected="true"]{background:var(--fire);color:#fff;border-color:transparent}
.badge{background:var(--accent2);color:#1A1000;border-radius:99px;font-size:.68rem;padding:0 .4rem;font-weight:800}
main{padding-block:0 3rem}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:1rem;min-width:0;position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:var(--line)}
.kpi .v{font-family:var(--display);font-style:italic;font-size:2.8rem;font-weight:800;line-height:1;margin-top:.2rem}
.kpi .v small{font-size:1.1rem;color:var(--muted);font-weight:700}
.kpi.k-ok::before{background:var(--ok)} .kpi.k-info::before{background:var(--info)} .kpi.k-warn::before{background:var(--warn)} .kpi.k-acc::before{background:var(--fire)}
.kpi.k-acc .v{background:var(--fire);-webkit-background-clip:text;background-clip:text;color:transparent}

/* table */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:700;padding:.5rem .6rem;border-bottom:1px solid var(--line)}
td{padding:.65rem .6rem;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
tfoot td{font-weight:800;border-top:2px solid var(--line)}
.list{display:grid;gap:.6rem}
.item{display:grid;grid-template-columns:1fr auto;gap:.6rem;align-items:center;padding:.8rem;border:1px solid var(--line);border-radius:8px;background:var(--raise)}
.item>div{min-width:0}

/* member card */
.card-m{background:var(--fire);color:#fff;border-radius:16px;padding:1.4rem;display:grid;gap:1rem;position:relative;overflow:hidden;box-shadow:0 18px 40px -22px var(--accent)}
.card-m::after{content:"";position:absolute;right:-40px;top:-30px;width:220px;height:220px;background:repeating-linear-gradient(-55deg,rgba(255,255,255,.16) 0 12px,transparent 12px 26px);transform:rotate(8deg)}
.card-m>*{position:relative;z-index:1}
.card-m .big{font-family:var(--display);font-style:italic;font-size:3.6rem;font-weight:800;line-height:.9}
.card-m .lbl{color:rgba(255,255,255,.8)}
.card-m .pill{background:rgba(0,0,0,.25);color:#fff}
.bar{height:8px;border-radius:99px;background:rgba(0,0,0,.25);overflow:hidden}
.bar i{display:block;height:100%;background:#fff}

/* cue */
.cue{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent)}
.ring{--p:0;width:70px;height:70px;border-radius:50%;background:conic-gradient(var(--accent) 0,var(--accent2) calc(var(--p)*1%),var(--sunk) 0);display:grid;place-items:center}
.ring span{width:54px;height:54px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-family:var(--display);font-style:italic;font-weight:800;font-size:1.3rem}

/* weekly chart */
.chart{display:grid;grid-template-columns:repeat(9,1fr);gap:.4rem;align-items:end;height:170px;position:relative;padding-top:18px}
.chart .col{display:grid;grid-template-rows:1fr auto;height:100%;text-align:center;min-width:0}
.chart .bwrap{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:2px}
.chart .b{width:min(28px,80%);background:var(--fg);border-radius:4px 4px 0 0;min-height:2px}
.chart .b.cur{background:var(--fire)}
.chart .b.miss{background:color-mix(in srgb,var(--fg) 30%,transparent)}
.chart .v{font-family:var(--mono);font-size:.72rem}
.chart .x{font-size:.64rem;color:var(--muted);padding-top:4px;white-space:nowrap;overflow:hidden}
.goal-line{position:absolute;left:0;right:0;border-top:2px dashed var(--accent2);pointer-events:none}
.goal-line span{position:absolute;right:0;top:-1.2rem;font-size:.68rem;color:var(--accent2);font-weight:800;background:var(--surface);padding:0 .3rem}
.heat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:340px}
.heat i{aspect-ratio:1;border-radius:3px;background:var(--sunk);max-width:100%}
.heat i.on{background:var(--ok)} .heat i.late{background:var(--warn)} .heat i.abs{background:var(--bad)} .heat i.fut{background:transparent;border:1px dashed var(--line)}
.heat i.today{outline:2px solid var(--accent2);outline-offset:1px}

/* week plan */
.week{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:.8rem}
.day{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:.9rem;display:grid;gap:.6rem;align-content:start}
.day.today{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 12px 30px -18px var(--accent)}
.day h4{margin:0;font-family:var(--display);font-style:italic;font-size:1.25rem;text-transform:uppercase}
.ex{display:grid;grid-template-columns:1fr auto;gap:.15rem .6rem;font-size:.88rem;padding-block:.35rem;border-top:1px solid var(--line)}
.ex .sr{font-family:var(--mono);font-size:.78rem;white-space:nowrap;color:var(--accent2)}
.ex .n{grid-column:1/-1;color:var(--muted);font-size:.78rem}

/* log form + devices */
.lrow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.4rem;align-items:end}
.lrow input{padding:.45rem .5rem}
.dev{display:grid;grid-template-columns:44px 1fr auto;gap:.8rem;align-items:center;padding:.9rem;border:1px solid var(--line);border-radius:var(--r);background:var(--raise)}
.dev .ic{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;font-family:var(--display);font-style:italic;font-weight:800;font-size:1.05rem;background:var(--sunk);color:var(--fg)}
.dev .ic.on{background:var(--fire);color:#fff}
.msg-body{border-left:3px solid var(--accent);padding-left:.8rem}
.chk{display:flex;gap:.5rem;align-items:center;width:auto}
.chk input{width:auto;accent-color:var(--accent)}
.editor-tools{display:flex;gap:.3rem;flex-wrap:wrap}
.editor{min-height:140px;border:1px solid var(--line);border-radius:8px;padding:.7rem;background:var(--sunk)}
.preview{border:1px dashed var(--line);border-radius:8px;padding:1rem;background:var(--raise)}

/* social */
.chan{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--line);border-radius:99px;padding:.3rem .7rem .3rem .3rem;background:var(--raise);font-weight:700;font-size:.82rem;cursor:pointer}
.chan i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:.68rem;font-weight:900;background:var(--sunk);color:var(--muted)}
.chan[aria-pressed="true"]{border-color:var(--accent)}
.chan[aria-pressed="true"] i{background:var(--fire);color:#fff}
.chan[disabled]{opacity:.45;cursor:not-allowed}
.post{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.8rem;border:1px solid var(--line);border-radius:8px;background:var(--raise)}
.post img,.thumb{width:64px;height:64px;object-fit:cover;border-radius:6px;background:var(--sunk);display:grid;place-items:center;font-family:var(--display);font-style:italic;font-weight:800;color:var(--muted);max-width:100%}
.post>div{min-width:0}
.post p{overflow-wrap:anywhere}
.cal{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:.4rem;min-width:860px}
.cal .cd{border:1px solid var(--line);border-radius:8px;padding:.5rem;min-height:120px;background:var(--raise);display:grid;gap:.35rem;align-content:start}
.cal .cd.today{border-color:var(--accent)}
.cal .ev{font-size:.74rem;padding:.3rem .4rem;border-radius:5px;background:var(--sunk);border-left:3px solid var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal .ev.done{border-left-color:var(--ok);opacity:.75}
.powered{display:flex;align-items:center;gap:.5rem;font-size:.78rem;color:var(--muted)}
.powered b{color:var(--fg)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent2);display:inline-block}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--fire);color:#fff;padding:.75rem 1.2rem;border-radius:10px;font-weight:800;z-index:40;max-width:calc(100% - 32px);box-shadow:0 10px 30px -10px var(--accent)}
.empty{padding:1.2rem;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:8px}
.modal-bg{position:fixed;inset:0;background:rgba(4,5,16,.7);display:grid;place-items:center;z-index:30;padding:16px}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.3rem;width:min(540px,100%);display:grid;gap:.9rem;max-height:90vh;overflow:auto}
pre.sample{margin:0;padding:.7rem;background:var(--sunk);border-radius:8px;overflow-x:auto;font-family:var(--mono);font-size:.75rem}
.clock{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;align-items:center;padding:1rem 1.1rem;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent2)}
.clock .t{font-family:var(--display);font-style:italic;font-weight:800;font-size:2.4rem;line-height:1}


/* colour combinations: Fire is the default above; each set has a dark and a light variant */
:root[data-accent="volt"]{--accent:#2F7BFF;--accent2:#22D3EE;--accent-soft:#12264F;--fire:linear-gradient(100deg,#2F7BFF 0%,#3AA0FF 50%,#22D3EE 100%)}
:root[data-accent="grape"]{--accent:#A855F7;--accent2:#F472B6;--accent-soft:#2E1747;--fire:linear-gradient(100deg,#7C3AED 0%,#C026D3 50%,#F472B6 100%)}
:root[data-accent="jungle"]{--accent:#10B981;--accent2:#A3E635;--accent-soft:#0F3328;--fire:linear-gradient(100deg,#059669 0%,#10B981 50%,#A3E635 100%)}
:root[data-accent="gold"]{--accent:#F59E0B;--accent2:#FDE047;--accent-soft:#3A2A0A;--fire:linear-gradient(100deg,#EA580C 0%,#F59E0B 50%,#FACC15 100%)}
:root[data-theme="light"][data-accent="volt"]{--accent:#1D5FE0;--accent2:#0891B2;--accent-soft:#DDE8FF;--fire:linear-gradient(100deg,#1D4ED8 0%,#2563EB 50%,#0891B2 100%)}
:root[data-theme="light"][data-accent="grape"]{--accent:#7E22CE;--accent2:#DB2777;--accent-soft:#F1E4FF;--fire:linear-gradient(100deg,#6D28D9 0%,#A21CAF 50%,#DB2777 100%)}
:root[data-theme="light"][data-accent="jungle"]{--accent:#047857;--accent2:#4D7C0F;--accent-soft:#D9F5EA;--fire:linear-gradient(100deg,#047857 0%,#059669 50%,#65A30D 100%)}
:root[data-theme="light"][data-accent="gold"]{--accent:#C2410C;--accent2:#B45309;--accent-soft:#FFEBD2;--fire:linear-gradient(100deg,#C2410C 0%,#D97706 50%,#CA8A04 100%)}
.look-btn{display:inline-flex;align-items:center;gap:.45rem}
.look-btn i{width:16px;height:16px;border-radius:50%;background:var(--fire);display:inline-block;border:2px solid #F4F5FF}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.modes button{justify-content:center}
.modes button[aria-pressed="true"],.sw[aria-pressed="true"]{border-color:var(--fg);box-shadow:0 0 0 1px var(--fg)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.5rem}
.sw{display:grid;gap:.45rem;justify-items:start;padding:.6rem;text-align:left}
.sw span.g{width:100%;height:30px;border-radius:6px;display:block}
.mini{display:grid;gap:.4rem;padding:.8rem;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
@media (max-width:860px){.login{grid-template-columns:1fr;padding-block:1.5rem;gap:1.5rem}.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){
  .m-table thead{display:none}
  .m-table tr{display:grid;grid-template-columns:1fr auto;gap:.2rem .6rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .m-table td{border:0;padding:0}
  .m-table td.c-act{grid-column:1/-1;padding-top:.4rem}
  .m-table td.c-act .row{justify-content:flex-start!important}
  .m-table td.c-hide{display:none}
  .lrow{grid-template-columns:1fr 1fr 1fr auto}
  .lrow .exn{grid-column:1/-1}
  .chart .x{font-size:.58rem}
  .clock{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}