:root {
  --fx-accent:#f27622;
  --fx-bg:#111114;
  --fx-text:#fff;
  --fx-size:72px;
  --fx-font:Inter,Arial,sans-serif;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; background:transparent; overflow:hidden; }
body { display:flex; align-items:center; justify-content:center; padding:18px; font-family:var(--fx-font); color:var(--fx-text); }
.subathon { position:relative; width:min(1000px,calc(100vw - 36px)); min-height:300px; padding:24px 30px 22px; overflow:hidden; border:1px solid color-mix(in srgb,var(--fx-accent) 42%,transparent); border-radius:24px; background:linear-gradient(145deg,color-mix(in srgb,var(--fx-bg) 96%,transparent),color-mix(in srgb,var(--fx-bg) 86%,#000)); box-shadow:0 28px 80px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.08); }
html[data-transparent="1"] .subathon { background:linear-gradient(145deg,color-mix(in srgb,var(--fx-bg) 72%,transparent),color-mix(in srgb,var(--fx-bg) 55%,transparent)); backdrop-filter:blur(10px); }
.subathon:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg,transparent 0 36%,rgba(255,255,255,.055) 47%,transparent 58%); transform:translateX(-100%); animation:scan 7s ease-in-out infinite; }
.subathon-glow { position:absolute; right:-120px; top:-170px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle,color-mix(in srgb,var(--fx-accent) 32%,transparent),transparent 68%); filter:blur(6px); }
.subathon-head,.subathon-foot { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.subathon-brand { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:900; letter-spacing:.18em; }
.subathon-brand img { width:38px; height:38px; object-fit:contain; filter:drop-shadow(0 5px 8px rgba(0,0,0,.35)); }
.subathon-brand span span,.subathon-kicker { color:var(--fx-accent); }
.subathon-status { display:flex; align-items:center; gap:8px; padding:8px 12px; border:1px solid rgba(255,255,255,.11); border-radius:999px; background:rgba(0,0,0,.25); font-size:11px; font-weight:900; letter-spacing:.13em; }
.subathon-status i { width:8px; height:8px; border-radius:50%; background:#777; box-shadow:0 0 0 5px rgba(255,255,255,.05); }
.subathon-status.is-running i { background:#43d884; box-shadow:0 0 14px #43d884; }
.subathon-status.is-paused i { background:#ffd15b; box-shadow:0 0 14px #ffd15b; }
.subathon-status.is-finished i { background:#ff5f68; box-shadow:0 0 14px #ff5f68; }
.subathon-content { position:relative; z-index:2; text-align:center; padding:24px 0 20px; }
.subathon-kicker { margin:0 0 4px; font-size:13px; font-weight:900; letter-spacing:.24em; }
.subathon-time { display:block; font-size:var(--fx-size); font-weight:950; line-height:1.05; letter-spacing:.045em; font-variant-numeric:tabular-nums; text-shadow:0 7px 28px rgba(0,0,0,.38); }
.subathon-subtitle { margin:7px 0 16px; color:color-mix(in srgb,var(--fx-text) 68%,transparent); font-size:14px; }
.subathon-progress { height:7px; overflow:hidden; border-radius:99px; background:rgba(255,255,255,.09); }
.subathon-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--fx-accent),color-mix(in srgb,var(--fx-accent) 65%,#fff)); box-shadow:0 0 18px var(--fx-accent); transition:width .5s ease; }
.subathon-foot { padding-top:15px; border-top:1px solid rgba(255,255,255,.08); color:color-mix(in srgb,var(--fx-text) 65%,transparent); font-size:11px; font-weight:800; letter-spacing:.1em; }
.subathon-event { position:absolute; z-index:5; right:24px; bottom:22px; display:flex; align-items:center; gap:10px; padding:11px 14px; border:1px solid color-mix(in srgb,var(--fx-accent) 55%,transparent); border-radius:13px; background:color-mix(in srgb,var(--fx-bg) 94%,transparent); opacity:0; transform:translateY(18px) scale(.96); pointer-events:none; }
.subathon-event b { color:var(--fx-accent); font-size:18px; }
.subathon-event span { font-size:10px; font-weight:900; letter-spacing:.12em; }
.subathon-event.is-visible { animation:event-pop 4s ease both; }
.subathon-kickstats { display:none; position:relative; z-index:2; }
.subathon-kickstats[hidden],.subathon-subgoal[hidden],.kick-stat[hidden] { display:none!important; }
.subathon-kickstats-head { display:flex; align-items:center; justify-content:space-between; gap:16px; color:var(--fx-accent); font-size:13px; font-weight:950; letter-spacing:.2em; }
.subathon-kickstats-head small { color:color-mix(in srgb,var(--fx-text) 52%,transparent); font-size:10px; letter-spacing:.14em; }
.subathon-subgoal { margin-top:15px; }
.subathon-subgoal>div:first-child { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:8px; }
.subathon-subgoal span { font-size:11px; font-weight:900; letter-spacing:.13em; }
.subathon-subgoal b { font-size:16px; font-variant-numeric:tabular-nums; }
.subathon-subgoal b strong { color:var(--fx-accent); font-size:26px; }
.subathon-subgoal-track { height:10px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.1); }
.subathon-subgoal-track i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--fx-accent),color-mix(in srgb,var(--fx-accent) 55%,#fff)); box-shadow:0 0 18px color-mix(in srgb,var(--fx-accent) 72%,transparent); transition:width .5s ease; }
.subathon-subgoal.is-reached .subathon-subgoal-track i { animation:goal-glow 1.25s ease-in-out infinite alternate; }
.subathon-kickstats-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:15px; }
.kick-stat { position:relative; display:grid; gap:2px; padding:11px 13px; overflow:hidden; border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(0,0,0,.2); }
.kick-stat:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--fx-accent); }
.kick-stat span { color:color-mix(in srgb,var(--fx-text) 58%,transparent); font-size:9px; font-weight:900; letter-spacing:.12em; }
.kick-stat strong { font-size:23px; font-variant-numeric:tabular-nums; }
html[data-subathon-mode="compact"] .subathon { min-height:172px; padding:18px 22px; border-radius:18px; }
html[data-subathon-mode="compact"] .subathon-content { padding:8px 0 12px; text-align:left; }
html[data-subathon-mode="compact"] .subathon-time { font-size:min(var(--fx-size),60px); }
html[data-subathon-mode="compact"] .subathon-kicker,html[data-subathon-mode="compact"] .subathon-subtitle { display:inline; margin-right:12px; }
html[data-subathon-mode="compact"] .subathon-foot { padding-top:10px; }
html[data-subathon-mode="minimal"] .subathon { width:auto; min-width:430px; min-height:150px; padding:18px 24px; }
html[data-subathon-mode="minimal"] .subathon-head,html[data-subathon-mode="minimal"] .subathon-foot,html[data-subathon-mode="minimal"] .subathon-subtitle,html[data-subathon-mode="minimal"] .subathon-progress { display:none; }
html[data-subathon-mode="minimal"] .subathon-content { padding:4px 0; text-align:center; }
html[data-subathon-mode="minimal"] .subathon-time { font-size:min(var(--fx-size),64px); }
html[data-subathon-mode="timer"] body { padding:0; }
html[data-subathon-mode="timer"] .subathon { width:100%; min-height:100%; padding:0; border:0; border-radius:0; background:transparent!important; box-shadow:none; backdrop-filter:none; display:grid; place-items:center; }
html[data-subathon-mode="timer"] .subathon:before,html[data-subathon-mode="timer"] .subathon-glow,html[data-subathon-mode="timer"] .subathon-head,html[data-subathon-mode="timer"] .subathon-kicker,html[data-subathon-mode="timer"] .subathon-subtitle,html[data-subathon-mode="timer"] .subathon-progress,html[data-subathon-mode="timer"] .subathon-foot,html[data-subathon-mode="timer"] .subathon-event,html[data-subathon-mode="timer"] .subathon-kickstats { display:none!important; }
html[data-subathon-mode="timer"] .subathon-content { padding:0; text-align:center; }
html[data-subathon-mode="timer"] .subathon-time { font-size:min(var(--fx-size),42vh); filter:drop-shadow(0 5px 16px rgba(0,0,0,.7)); }
html[data-subathon-mode="kickstats"] body,html[data-subathon-mode="subgoal"] body,html[data-subathon-mode="subgoalcompact"] body { padding:0; }
html[data-subathon-mode="kickstats"] .subathon,html[data-subathon-mode="subgoal"] .subathon { width:100%; min-height:100%; padding:20px 24px; border-radius:18px; }
html[data-subathon-mode="kickstats"] .subathon-content,html[data-subathon-mode="kickstats"] .subathon-foot,html[data-subathon-mode="kickstats"] .subathon-event,html[data-subathon-mode="subgoal"] .subathon-content,html[data-subathon-mode="subgoal"] .subathon-head,html[data-subathon-mode="subgoal"] .subathon-foot,html[data-subathon-mode="subgoal"] .subathon-event { display:none!important; }
html[data-subathon-mode="kickstats"] .subathon-head { margin-bottom:12px; }
html[data-subathon-mode="kickstats"] .subathon-kickstats,html[data-subathon-mode="subgoal"] .subathon-kickstats { display:block; }
html[data-subathon-mode="subgoal"] .subathon-kickstats { width:100%; margin:auto; }
html[data-subathon-mode="subgoal"] .subathon-kickstats-head,html[data-subathon-mode="subgoal"] .subathon-kickstats-grid { display:none; }
html[data-subathon-mode="subgoal"] .subathon-subgoal { margin:0; }
html[data-subathon-mode="subgoalcompact"] .subathon { width:100%; min-height:100%; padding:0; border:0; border-radius:0; background:transparent!important; box-shadow:none; backdrop-filter:none; display:grid; place-items:center; }
html[data-subathon-mode="subgoalcompact"] .subathon:before,html[data-subathon-mode="subgoalcompact"] .subathon-glow,html[data-subathon-mode="subgoalcompact"] .subathon-content,html[data-subathon-mode="subgoalcompact"] .subathon-head,html[data-subathon-mode="subgoalcompact"] .subathon-foot,html[data-subathon-mode="subgoalcompact"] .subathon-event,html[data-subathon-mode="subgoalcompact"] .subathon-kickstats-head,html[data-subathon-mode="subgoalcompact"] .subathon-kickstats-grid,html[data-subathon-mode="subgoalcompact"] [data-subathon-goal-label] { display:none!important; }
html[data-subathon-mode="subgoalcompact"] .subathon-kickstats { display:block; width:100%; }
html[data-subathon-mode="subgoalcompact"] .subathon-subgoal { margin:0; text-align:center; }
html[data-subathon-mode="subgoalcompact"] .subathon-subgoal>div:first-child { display:block; margin:0; }
html[data-subathon-mode="subgoalcompact"] .subathon-subgoal b { display:block; color:var(--fx-text); font-size:min(52vh,150px); font-weight:950; line-height:1; letter-spacing:.01em; filter:drop-shadow(0 7px 22px rgba(0,0,0,.78)); }
html[data-subathon-mode="subgoalcompact"] .subathon-subgoal b strong,html[data-subathon-mode="subgoalcompact"] .subathon-subgoal b span { color:inherit; font-size:inherit; font-weight:inherit; letter-spacing:inherit; }
html[data-subathon-mode="subgoalcompact"] .subathon-subgoal b strong { color:var(--fx-accent); }
html[data-subathon-mode="subgoalcompact"] .subathon-subgoal-track { display:none!important; }
@keyframes scan { 0%,45%{transform:translateX(-100%)}70%,100%{transform:translateX(100%)} }
@keyframes event-pop { 0%{opacity:0;transform:translateY(18px) scale(.96)}12%,78%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-10px) scale(.98)} }
@keyframes goal-glow { from{filter:saturate(1)}to{filter:saturate(1.4) brightness(1.28);box-shadow:0 0 28px var(--fx-accent)} }
@media (max-width:650px) {
  body { padding:8px; }
  .subathon { padding:18px; width:calc(100vw - 16px); min-height:230px; }
  .subathon-time { font-size:min(var(--fx-size),15vw); }
  .subathon-subtitle { font-size:12px; }
  .subathon-foot { align-items:flex-start; flex-direction:column; gap:6px; }
  .subathon-kickstats-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html[data-subathon-mode="timer"] body { padding:0; }
  html[data-subathon-mode="timer"] .subathon { padding:0; width:100%; min-height:100%; }
  html[data-subathon-mode="timer"] .subathon-time { font-size:min(var(--fx-size),34vw); }
}