@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/barlow-condensed-800.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans.woff2') format('woff2')}

:root{
  --bg:#000;--panel:#0d0d11;--panel2:#15151b;--line:#1f1f28;--line2:#2c2c38;
  --t1:#f3f3f6;--t2:#a3a3b5;--t3:#7e7e92;
  --orange:#ff7a1a;--green:#2fd27a;--red:#ff3b3b;
  --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;
  --mono:'IBM Plex Mono','SF Mono',Menlo,monospace;
  --body:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{color:var(--t1);font-family:var(--body);min-height:100vh;display:flex;flex-direction:column;align-items:center;user-select:none;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--orange);color:#000}

/* top bar */
.bar{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--line)}
.brand img{height:30px;width:auto;display:block}
.bar-r{display:flex;align-items:center;gap:22px;font-size:14px;color:var(--t2)}
.bar-r a:hover{color:#fff}
.fs-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;margin-bottom:18px;border-radius:7px;border:1px solid var(--line2);background:transparent;color:var(--t1);font-family:var(--body);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .15s,background .15s}
.fs-btn:hover{border-color:var(--t3);background:var(--panel2)}
.fs-btn svg{width:16px;height:16px}

.stage{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 20px 10px}

.title{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--t2);display:flex;align-items:center;gap:10px;margin-bottom:26px;text-align:center}
.title .accent{color:var(--green)}
.title .tally{width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.4s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.clock{font-family:var(--mono);font-weight:600;font-size:clamp(2.6rem,6.4vw,5rem);letter-spacing:.04em;font-variant-numeric:tabular-nums;line-height:1;margin-bottom:14px}

.tz-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tz-row label{font-family:var(--mono);font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.16em}
.tz-row select{appearance:none;-webkit-appearance:none;background:var(--panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e7e92' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/14px;color:var(--t1);border:1px solid var(--line2);padding:7px 32px 7px 12px;font-family:var(--mono);font-size:13px;border-radius:6px;cursor:pointer;max-width:260px}
.tz-row select:focus{outline:none;border-color:var(--orange)}

.sync-status{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--t3);margin-bottom:14px;height:1.2em}
.sync-status.ok{color:var(--green)}
.sync-status.err{color:#e0763a}

.countdown{font-family:var(--mono);font-weight:600;font-size:clamp(5.5rem,21vw,17rem);color:var(--green);letter-spacing:.02em;line-height:1;margin:6px 0 10px;font-variant-numeric:tabular-nums;text-shadow:0 0 40px rgba(47,210,122,.35);transition:color .3s,text-shadow .3s}
.countdown.warning{color:var(--red);text-shadow:0 0 40px rgba(255,59,59,.5);animation:pulse 1s infinite}
.countdown.done{color:var(--red);animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}

/* control panel */
.mode-tabs{display:flex;margin-top:22px;border:1px solid var(--line2);border-bottom:0;border-radius:10px 10px 0 0;overflow:hidden;background:var(--panel)}
.mode-tab{background:transparent;color:var(--t3);border:0;padding:12px 22px;font-family:var(--mono);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;transition:background .15s,color .15s;min-width:auto;border-radius:0}
.mode-tab:hover{color:var(--t1);background:var(--panel2);box-shadow:none}
.mode-tab.active{background:var(--panel2);color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}

.controls{display:flex;gap:28px;flex-wrap:wrap;justify-content:center;align-items:center;padding:22px 28px;background:var(--panel2);border:1px solid var(--line2);border-radius:0 0 10px 10px}
.mode-panel{display:none}
.mode-panel.active{display:contents}
.time-group{display:flex;flex-direction:column;align-items:center;gap:10px}
.time-group>label{font-family:var(--mono);font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.18em}
.time-picker{display:flex;align-items:center;gap:6px;background:#000;border:1px solid var(--line2);border-radius:8px;padding:6px 10px}
.spinner{display:flex;flex-direction:column;align-items:center;cursor:ns-resize;padding:4px 2px;min-width:58px;touch-action:none}
.spinner-arrow{color:var(--t3);font-size:.7rem;line-height:1;transition:color .15s;cursor:pointer;padding:2px 10px}
.spinner:hover .spinner-arrow{color:var(--green)}
.spinner-value{font-family:var(--mono);font-size:2.1rem;font-weight:600;line-height:1.1;padding:2px 0;font-variant-numeric:tabular-nums;min-width:2.4ch;text-align:center}
.spinner-label{font-family:var(--mono);font-size:10px;color:var(--t3);text-transform:uppercase;letter-spacing:.1em;margin-top:2px}
.separator{font-family:var(--mono);font-size:1.8rem;color:var(--line2);font-weight:600;padding-bottom:12px}

.buttons{display:flex;gap:10px;flex-direction:column}
.buttons button{background:var(--green);color:#03150b;border:0;height:46px;padding:0 26px;font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.02em;border-radius:8px;cursor:pointer;transition:filter .15s,transform .15s;min-width:130px}
.buttons button:hover{filter:brightness(1.12);transform:translateY(-1px)}
.buttons button.stop{background:transparent;color:var(--t1);border:1px solid var(--line2)}
.buttons button.stop:hover{border-color:var(--red);color:var(--red);filter:none}

.info{margin-top:16px;font-family:var(--mono);font-size:13px;color:var(--t2);text-align:center;min-height:1.2em;letter-spacing:.04em}
.hint{font-family:var(--mono);font-size:10px;color:var(--t3);letter-spacing:.08em}

.footer{width:100%;text-align:center;padding:26px 20px 30px;font-size:13px;color:var(--t3);border-top:1px solid var(--line);margin-top:34px;line-height:1.7}
.footer a{color:var(--t2);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:3px}
.footer a:hover{color:#fff;text-decoration-color:var(--orange)}
.footer .keys{font-family:var(--mono);font-size:11px;letter-spacing:.06em;margin-top:4px}

/* full-screen: only the clocks */
body.fs .bar,body.fs .footer,body.fs .mode-tabs,body.fs .controls,body.fs .tz-row,body.fs .title,body.fs .sync-status{display:none}
body.fs .stage{padding:0}
body.fs .clock{font-size:clamp(3rem,8vw,7rem)}
body.fs .countdown{font-size:clamp(7rem,26vw,24rem)}

@media(max-width:640px){
  .bar{padding:12px 16px}
  .bar-r a{display:none}
  .controls{padding:18px 14px;gap:18px}
  .mode-tab{padding:11px 14px;font-size:11px}
  .spinner{min-width:48px}
  .spinner-value{font-size:1.7rem}
  .buttons{flex-direction:row}
  .buttons button{min-width:110px}
}

/* shared top menu is fixed (70px): make room, and hide it in full-screen display mode */
body{padding-top:70px}
body.fs{padding-top:0}
body.fs nav{display:none}
@media(max-width:1000px){.tc{display:none}}