:root {
  color-scheme: dark;
  --bg: #07120f;
  --surface: rgba(13, 29, 24, .8);
  --surface-strong: #11251f;
  --surface-soft: rgba(255, 255, 255, .04);
  --line: rgba(221, 191, 110, .17);
  --line-strong: rgba(221, 191, 110, .46);
  --text: #f2f0e8;
  --muted: #87958f;
  --accent: #d7b866;
  --accent-2: #f4e2aa;
  --glow: rgba(194, 150, 48, .2);
  --timer-font: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  --body-font: "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --radius: 24px;
  --shadow: 0 26px 80px rgba(0, 0, 0, .34);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--body-font); }
body { min-width: 320px; overflow-x: hidden; transition: background .5s ease; }
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ambient { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.orb { position: absolute; width: 55vw; height: 55vw; border-radius: 50%; filter: blur(100px); opacity: .21; transition: background .5s; }
.orb-a { left: -24vw; top: -25vw; background: var(--accent); }
.orb-b { right: -30vw; bottom: -35vw; background: var(--accent); opacity: .11; }
.grain { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E"); }

.app-shell { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; padding: 0 34px 20px; }
.topbar { position: relative; z-index: 4; min-height: 92px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), transparent); backdrop-filter: blur(14px); }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { width: 46px; height: 46px; display: grid; place-items: center; color: var(--accent); border: 1px solid var(--line-strong); border-radius: 14px; font-size: 28px; background: linear-gradient(145deg, var(--surface-strong), transparent); box-shadow: inset 0 0 18px var(--glow); }
.brand strong { display: block; font-size: 18px; letter-spacing: .06em; }
.brand span { display: block; margin-top: 2px; color: var(--muted); font-family: var(--timer-font); font-size: 11px; letter-spacing: .24em; }
.event-title { justify-self: center; display: flex; align-items: center; gap: 9px; padding: 11px 16px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; font-size: 15px; color: var(--text); }
.event-title:hover { background: var(--surface-soft); }
.event-title svg { width: 15px; height: 15px; color: var(--muted); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #4fd7a0; box-shadow: 0 0 0 5px rgba(79, 215, 160, .1); }
.top-actions { justify-self: end; display: flex; align-items: center; gap: 9px; }
.wall-time { text-align: right; padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--line); }
.wall-time span { display: block; font-family: var(--timer-font); font-size: 19px; font-weight: 700; letter-spacing: .06em; }
.wall-time small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); cursor: pointer; }
.icon-button:hover { border-color: var(--line-strong); background: var(--surface); }
.icon-button .action-label { display: none; }
.cast-button { position:relative; }
.cast-live-dot { position:absolute; right:6px; top:6px; width:6px; height:6px; border-radius:50%; background:#4fd7a0; box-shadow:0 0 0 3px color-mix(in srgb,#4fd7a0 16%,transparent),0 0 10px #4fd7a0; opacity:0; transition:.2s; }
body.room-connected .cast-live-dot { opacity:1; }
.sound-off, body.sound-muted .sound-on { display: none; }
body.sound-muted .sound-off { display: block; }

.main-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; padding: 22px 0; }
.timer-stage, .side-panel { border: 1px solid var(--line); background: linear-gradient(145deg, rgba(255,255,255,.025), transparent 45%), var(--surface); box-shadow: var(--shadow); backdrop-filter: blur(20px); }
.timer-stage { position: relative; min-height: 690px; border-radius: 30px; padding: 28px clamp(28px, 5vw, 80px) 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; }
.timer-stage::after { content:""; position:absolute; z-index:-2; inset:-40%; background:conic-gradient(from 190deg at 50% 50%, transparent 0 36%, var(--glow) 44%, transparent 52% 100%); opacity:.28; animation:ambient-shift 18s linear infinite; }
@keyframes ambient-shift { to { transform:rotate(360deg); } }
.timer-stage::before { content: "♠"; position: absolute; z-index: -1; right: -4%; top: 44%; transform: translateY(-50%) rotate(8deg); color: var(--accent); opacity: .027; font-size: min(48vw, 520px); line-height: 1; }
.stage-corners i { position: absolute; width: 40px; height: 40px; border-color: var(--line-strong); }
.stage-corners i:nth-child(1) { top: 18px; left: 18px; border-top: 1px solid; border-left: 1px solid; border-radius: 12px 0 0 0; }
.stage-corners i:nth-child(2) { top: 18px; right: 18px; border-top: 1px solid; border-right: 1px solid; border-radius: 0 12px 0 0; }
.stage-corners i:nth-child(3) { bottom: 18px; left: 18px; border-bottom: 1px solid; border-left: 1px solid; border-radius: 0 0 0 12px; }
.stage-corners i:nth-child(4) { bottom: 18px; right: 18px; border-bottom: 1px solid; border-right: 1px solid; border-radius: 0 0 12px 0; }
.level-chip { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.level-chip b { color: var(--accent); font-family: var(--timer-font); font-size: 15px; letter-spacing: .17em; }
.timer-wrap { position: relative; text-align: center; margin-top: 2px; }
.timer { font-family: var(--timer-font); font-size: clamp(108px, 13vw, 190px); font-weight: 700; line-height: .9; letter-spacing: -.035em; font-variant-numeric: tabular-nums; text-shadow: 0 0 42px var(--glow); }
.timer-status { position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); color: var(--muted); font-size: 12px; letter-spacing: .14em; white-space: nowrap; }
.timer-stage.warning .timer { color: #ffcf64; animation: pulse 1s ease-in-out infinite; }
.timer-stage.critical .timer { color: #ff665e; animation: pulse .5s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .68; text-shadow: 0 0 58px currentColor; } }
.progress-track { width: min(640px, 83%); height: 4px; margin-top: 30px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.07); }
.progress-fill { width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 14px var(--accent); transition: width .4s linear; }
.blind-block { display: grid; grid-template-columns: 1fr 76px 1fr; align-items: end; width: min(680px, 100%); margin-top: 30px; }
.blind-side { text-align: center; }
.blind-side span { display: block; color: var(--muted); font-size: 13px; letter-spacing: .16em; }
.blind-side strong { display: block; font-family: var(--timer-font); font-size: clamp(60px, 7.1vw, 102px); line-height: 1; margin-top: 4px; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.blind-divider { align-self: center; text-align: center; color: var(--accent); font-family: var(--timer-font); font-size: 58px; opacity: .52; }
.next-strip { width: min(620px, 88%); display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 15px; background: rgba(0,0,0,.14); }
.next-strip span { color: var(--muted); font-size: 11px; }
.next-strip strong { margin-left: 10px; font-family: var(--timer-font); font-size: 21px; letter-spacing: .06em; }
.next-meta { display: flex; gap: 18px; }
.break-hint { color: var(--accent) !important; padding-left: 18px; border-left: 1px solid var(--line); }
.primary-controls { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.control-button, .play-button { height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0 19px; border-radius: 14px; cursor: pointer; }
.control-button { border: 1px solid var(--line); background: var(--surface-soft); color: var(--muted); }
.control-button:hover { color: var(--text); border-color: var(--line-strong); }
.control-button svg { width: 17px; height: 17px; }
.play-button { min-width: 150px; border: 1px solid var(--accent); color: #16140e; background: linear-gradient(135deg, var(--accent-2), var(--accent)); font-weight: 800; box-shadow: 0 8px 26px var(--glow); }
.play-button:hover { filter: brightness(1.07); transform: translateY(-1px); }
.pause-icon, body.is-running .play-icon { display: none; }
body.is-running .pause-icon { display: block; }
.quick-controls { display: flex; gap: 8px; margin-top: 12px; }
.quick-controls button { border: 0; padding: 6px 10px; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.quick-controls button:hover { color: var(--accent-2); }
.quick-controls .end-link { color: #c9827d; }
.quick-controls .end-link:hover { color: #ff8178; }

.side-panel { border-radius: 24px; padding: 22px; display: flex; flex-direction: column; min-height: 690px; }
.panel-head, .modal-head { display: flex; align-items: flex-start; justify-content: space-between; }
.kicker { color: var(--accent); font-family: var(--timer-font); font-size: 10px; letter-spacing: .22em; }
.panel-head h2, .modal-head h2 { margin: 3px 0 0; font-size: 19px; letter-spacing: .04em; }
.text-button { border: 1px solid var(--line); border-radius: 9px; padding: 7px 12px; color: var(--muted); background: transparent; font-size: 12px; cursor: pointer; }
.text-button:hover { color: var(--text); border-color: var(--line-strong); }
.format-card { display: grid; grid-template-columns: 38px 1fr 18px; align-items: center; gap: 10px; width: 100%; margin-top: 14px; padding: 11px 12px; text-align: left; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(110deg, var(--glow), transparent 72%); cursor: pointer; }
.format-card:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.format-card > svg { width: 17px; color: var(--muted); }
.format-mark { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px; color: var(--accent); background: var(--surface-strong); font-family: var(--timer-font); font-weight: 800; }
.format-copy { min-width: 0; }
.format-copy small, .format-copy strong, .format-copy em { display:block; }
.format-copy small { color:var(--muted); font-size:9px; letter-spacing:.09em; }
.format-copy strong { margin-top:1px; font-size:12px; }
.format-copy em { margin-top:2px; color:var(--muted); font-size:9px; font-style:normal; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.schedule-list { flex: 1; min-height: 0; margin: 10px -5px 13px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; mask-image:linear-gradient(to bottom,transparent 0,#000 12px,#000 calc(100% - 12px),transparent 100%); padding-block:8px; }
.schedule-item { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; min-height: 56px; padding: 7px 9px; border-radius: 13px; color: var(--muted); border: 1px solid transparent; }
.schedule-item .number { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; font-family: var(--timer-font); font-weight: 700; }
.schedule-item strong { display: block; color: var(--text); font-family: var(--timer-font); font-size: 18px; letter-spacing: .06em; }
.schedule-item small { display: block; margin-top: 2px; font-size: 10px; }
.schedule-item .duration { font-family: var(--timer-font); font-size: 13px; }
.schedule-item.active { color: var(--accent); border-color: var(--line-strong); background: linear-gradient(90deg, var(--glow), transparent); }
.schedule-item.active .number { color: #16140e; border-color: var(--accent); background: var(--accent); }
.schedule-item.past { opacity: .43; }
.schedule-item.break strong { color: var(--accent-2); }
.summary-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.summary-card { padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-soft); }
.summary-card span { display: block; color: var(--muted); font-size: 10px; }
.summary-card strong { display: block; margin-top: 4px; font-family: var(--timer-font); font-size: 19px; }
.voice-card { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); }
.voice-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--accent); background: var(--glow); }
.voice-icon svg { width: 17px; height: 17px; }
.voice-card strong { display: block; font-size: 11px; }
.voice-card div > span { display: block; margin-top: 3px; color: var(--muted); font-size: 9px; }
.switch { width: 36px; height: 21px; padding: 2px; border: 0; border-radius: 99px; background: #42504a; cursor: pointer; transition: .2s; }
.switch span { display: block; width: 17px; height: 17px; border-radius: 50%; background: white; transition: transform .2s; }
.switch.on { background: var(--accent); }
.switch.on span { transform: translateX(15px); }

.theme-dock { min-height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 10px; border-top: 1px solid var(--line); }
.theme-label span { display: block; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.theme-label strong { display: block; font-size: 12px; margin-top: 1px; }
.theme-options { display: flex; gap: 8px; }
.theme-swatch { width: 34px; height: 34px; padding: 4px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; }
.theme-swatch i { display: block; width: 100%; height: 100%; border-radius: 7px; }
.theme-swatch.active { border-color: var(--line-strong); background: var(--surface-soft); }
.theme-swatch[data-theme-value="emerald"] i { background: linear-gradient(135deg, #0b2b21 48%, #e0bd67 50%); }
.theme-swatch[data-theme-value="mono"] i { background: linear-gradient(135deg, #10141a 48%, #e7eef8 50%); }
.theme-swatch[data-theme-value="inferno"] i { background: linear-gradient(135deg, #19090a 48%, #ff493d 50%); }
.theme-swatch[data-theme-value="nebula"] i { background: linear-gradient(135deg, #100b2b 48%, #7c64ff 50%); }
.theme-swatch[data-theme-value="amber"] i { background: linear-gradient(135deg, #1b1008 48%, #f09d41 50%); }
.offline-state { justify-self: end; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }
.offline-state span { width: 6px; height: 6px; border-radius: 50%; background: #4fd7a0; box-shadow: 0 0 8px rgba(79,215,160,.5); }
.footer-legal { justify-self: end; display: flex; align-items: center; gap: 12px; }
.use-notice-link { min-height: 34px; padding: 0 10px; color: var(--accent-2); border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); font-size: 11px; cursor: pointer; touch-action: manipulation; }
.use-notice-link:hover, .use-notice-link:focus-visible { border-color: var(--line-strong); }

.modal { width: min(520px, calc(100% - 28px)); max-height: calc(100vh - 30px); padding: 0; color: var(--text); border: 1px solid var(--line-strong); border-radius: 24px; background: transparent; box-shadow: 0 40px 100px rgba(0,0,0,.65); }
.modal::backdrop { background: rgba(0, 0, 0, .7); backdrop-filter: blur(10px); }
.modal-card { padding: 26px; background: color-mix(in srgb, var(--bg) 82%, #18221e); }
.modal-card.wide { width: min(760px, calc(100vw - 28px)); }
.close-button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: transparent; font-size: 24px; cursor: pointer; }
.modal-intro { margin: 14px 0; color: var(--muted); font-size: 13px; }
.field { display: block; margin-top: 18px; }
.field > span { display: block; margin-bottom: 7px; color: var(--muted); font-size: 12px; }
.field input:not(.range) { width: 100%; height: 46px; padding: 0 13px; color: var(--text); border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.035); }
.range { width: 100%; accent-color: var(--accent); }
#settingsDialog .modal-card { max-height:calc(100vh - 30px); overflow-y:auto; }
.voice-presets { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.voice-preset { display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:9px; align-items:center; min-height:59px; padding:9px 10px; text-align:left; border:1px solid var(--line); border-radius:12px; background:var(--surface-soft); cursor:pointer; }
.voice-preset:hover { border-color:var(--line-strong); }
.voice-preset.selected { border-color:var(--accent); background:linear-gradient(120deg,var(--glow),transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent); }
.voice-preset i { grid-row:1 / 3; width:31px; height:31px; display:grid; place-items:center; border-radius:10px; color:var(--accent); background:var(--glow); font-style:normal; font-size:12px; font-weight:800; }
.voice-preset strong { align-self:end; font-size:12px; }
.voice-preset small { align-self:start; margin-top:2px; color:var(--muted); font-size:10px; }
.voice-preview { width:100%; height:38px; display:flex; align-items:center; justify-content:center; gap:7px; margin-top:8px; color:var(--accent-2); border:1px solid var(--line); border-radius:10px; background:transparent; cursor:pointer; }
.voice-preview:hover { border-color:var(--line-strong); background:var(--surface-soft); }
.voice-preview svg { width:16px; height:16px; }
.voice-preview:disabled { opacity:.65; cursor:wait; }
.voice-hint { display:block; margin-top:7px; color:var(--muted); font-size:11px; line-height:1.45; }
.voice-language-options { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.voice-language-options label { position:relative; display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line); border-radius:11px; background:var(--surface-soft); color:var(--text); font-size:13px; font-weight:700; cursor:pointer; }
.voice-language-options label:has(input:checked) { border-color:var(--accent); background:var(--glow); color:var(--accent-2); }
.voice-language-options input { position:absolute; opacity:0; width:1px; height:1px; }
.voice-language-options label:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
.check-row { display: flex; gap: 11px; align-items: flex-start; margin-top: 20px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.check-row input { accent-color: var(--accent); margin-top: 4px; }
.check-row strong, .check-row small { display: block; }
.check-row strong { font-size: 13px; }
.check-row small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 25px; }
.button-ghost, .button-solid { min-width: 90px; height: 42px; border-radius: 11px; cursor: pointer; }
.button-ghost { color: var(--muted); border: 1px solid var(--line); background: transparent; }
.button-solid { color: #17130c; border: 1px solid var(--accent); background: var(--accent); font-weight: 800; }
.use-notice-modal { width: min(540px, calc(100% - 28px)); max-height: calc(100dvh - 28px); }
.use-notice-card { max-height: calc(100dvh - 30px); overflow-y: auto; overscroll-behavior: contain; }
.use-notice-card .modal-head { align-items: flex-start; }
.use-notice-card h2 { line-height: 1.25; }
.use-notice-intro { margin: 18px 0 15px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.use-notice-points { display: grid; gap: 9px; }
.use-notice-points p { display: grid; grid-template-columns: 31px 1fr; align-items: start; gap: 9px; margin: 0; padding: 12px; color: var(--text); border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); font-size: 13px; line-height: 1.65; }
.use-notice-points p span { color: var(--accent); font-family: var(--timer-font); font-size: 11px; font-weight: 800; line-height: 22px; }
.use-notice-agree { display: flex; align-items: center; gap: 10px; min-height: 48px; margin-top: 16px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--accent-2); font-size: 13px; font-weight: 700; cursor: pointer; touch-action: manipulation; }
.use-notice-agree[hidden], .use-notice-modal .close-button[hidden] { display: none; }
.use-notice-agree input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.use-notice-storage { margin: 12px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.use-notice-submit { width: 100%; min-height: 48px; margin-top: 17px; font-size: 14px; touch-action: manipulation; }
.use-notice-submit:disabled { opacity: .45; cursor: not-allowed; }
.schedule-modal { width: min(760px, calc(100% - 28px)); overflow-x: hidden; overscroll-behavior: contain; }
.schedule-modal .modal-card.wide { width: 100%; min-width: 0; }
.schedule-editor { max-height: 46vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-right: 3px; }
.editor-row { display: grid; grid-template-columns: 42px 1fr 1fr 1fr 34px; gap: 8px; align-items: center; margin-bottom: 8px; }
.editor-row > span { color: var(--muted); font-family: var(--timer-font); text-align: center; }
.editor-row input { min-width: 0; width: 100%; height: 39px; padding: 0 9px; color: var(--text); border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); }
.editor-row input.locked-input { color:var(--accent-2); background:var(--glow); cursor:not-allowed; }
.editor-row button { width: 32px; height: 32px; padding: 0; color: #ff7d75; border: 0; background: transparent; cursor: pointer; font-size: 18px; }
.editor-row.break-editor { border:1px solid var(--line); border-radius:10px; padding:5px 0; background:var(--glow); }
.editor-row.break-editor .break-name { grid-column:2 / 4; }
.editor-row.break-editor > span { color:var(--accent); font-weight:800; }
.editor-labels { display: grid; grid-template-columns: 42px 1fr 1fr 1fr 34px; gap: 8px; margin: 10px 0 6px; color: var(--muted); font-size: 10px; text-align: center; }
.editor-labels span:nth-child(3)::after { content:" ×2"; color:var(--accent); }
.editor-add-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.add-level { width: 100%; height: 41px; margin-top: 6px; color: var(--accent); border: 1px dashed var(--line-strong); border-radius: 10px; background: transparent; cursor: pointer; }
.add-level:hover { background:var(--glow); }
.preset-modal { width:min(900px,calc(100% - 28px)); }
.preset-modal .modal-card.wide { width:100%; }
.preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:18px; }
.preset-card { position:relative; min-height:174px; padding:20px; text-align:left; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,var(--surface-soft),transparent); cursor:pointer; overflow:hidden; }
.preset-card::after { content:""; position:absolute; right:-42px; bottom:-50px; width:130px; height:130px; border:1px solid var(--line); border-radius:50%; box-shadow:0 0 0 18px rgba(255,255,255,.015),0 0 0 36px rgba(255,255,255,.01); }
.preset-card:hover { border-color:var(--line-strong); transform:translateY(-2px); background:linear-gradient(145deg,var(--glow),transparent); }
.preset-card.selected { border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.preset-card i,.preset-card strong,.preset-card small,.preset-card em { position:relative; z-index:1; display:block; }
.preset-card i { color:var(--accent); font-family:var(--timer-font); font-size:14px; letter-spacing:.18em; font-style:normal; }
.preset-card strong { margin-top:6px; font-size:18px; }
.preset-card small { margin-top:9px; min-height:42px; color:var(--muted); font-size:11px; line-height:1.8; }
.preset-card em { margin-top:10px; color:var(--accent-2); font-size:10px; font-style:normal; }
.preset-tag { position:absolute; z-index:2; right:10px; top:10px; padding:5px 8px; border-radius:999px; color:#17130c; background:var(--accent); font-size:9px; font-weight:800; }
.confirm-modal { width:min(420px,calc(100% - 28px)); text-align:center; }
.confirm-symbol { width:56px; height:56px; display:grid; place-items:center; margin:0 auto 14px; border:1px solid rgba(255,100,90,.3); border-radius:18px; color:#ff7067; background:rgba(255,88,78,.08); }
.confirm-modal h2 { margin:0; font-size:21px; }
.confirm-modal p { margin:9px 0 0; color:var(--muted); font-size:12px; }
.modal-actions.centered { justify-content:center; }
.button-danger { min-width:100px; height:42px; border:1px solid #ff675e; border-radius:11px; color:#fff; background:#e64b43; font-weight:700; cursor:pointer; }
.cast-modal { width:min(860px,calc(100% - 28px)); }
.cast-card { position:relative; overflow:hidden; }
.cast-card::before { content:""; position:absolute; width:320px; height:320px; right:-150px; top:-170px; border-radius:50%; background:var(--accent); opacity:.08; filter:blur(12px); pointer-events:none; }
.cast-status-row { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:19px; padding:14px 16px; border:1px solid var(--line); border-radius:15px; background:linear-gradient(110deg,var(--glow),transparent 68%); }
.room-code-block { display:flex; align-items:center; gap:14px; }
.room-code-block span { color:var(--muted); font-size:11px; letter-spacing:.08em; }
.room-code-block strong { color:var(--accent-2); font-family:var(--timer-font); font-size:25px; letter-spacing:.18em; font-variant-numeric:tabular-nums; }
.remote-key-details { margin-left:10px; color:var(--muted); font-size:11px; }
.remote-key-details summary { cursor:pointer; }
.remote-key-details strong { display:block; margin-top:5px; font-size:16px; }
.connection-badge { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:10px; }
.connection-badge i { width:7px; height:7px; border-radius:50%; background:#d3a84a; box-shadow:0 0 8px rgba(211,168,74,.65); }
.connection-badge.online { color:#7fdeb6; }
.connection-badge.online i { background:#4fd7a0; box-shadow:0 0 8px rgba(79,215,160,.7); }
.cast-tip { margin:12px 2px 17px; color:var(--muted); font-size:11px; line-height:1.75; }
.cast-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.cast-option { position:relative; min-width:0; padding:17px; border:1px solid var(--line); border-radius:17px; background:linear-gradient(145deg,var(--surface-soft),transparent); }
.screen-option { display:grid; grid-template-columns:52px 1fr; grid-template-rows:auto 1fr auto auto; column-gap:13px; }
.cast-option-icon { grid-row:1 / 3; width:50px; height:50px; display:grid; place-items:center; color:var(--accent); border:1px solid var(--line-strong); border-radius:14px; background:var(--glow); }
.cast-option-icon svg { width:24px; height:24px; }
.cast-option-copy small,.cast-option-copy strong,.cast-option-copy span { display:block; }
.cast-option-copy small { color:var(--accent); font-size:9px; letter-spacing:.12em; }
.cast-option-copy strong { margin-top:3px; font-size:17px; }
.cast-option-copy span { margin-top:4px; color:var(--muted); font-size:10px; line-height:1.55; }
.cast-url { overflow:hidden; margin-top:15px; padding:10px 11px; color:var(--muted); border:1px solid var(--line); border-radius:9px; background:rgba(0,0,0,.15); font-family:Consolas,monospace; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.screen-option .cast-url,.screen-option .cast-action-row { grid-column:1 / -1; }
.cast-action-row { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.cast-primary,.cast-secondary { width:100%; height:42px; margin-top:9px; border-radius:11px; cursor:pointer; font-weight:700; }
.cast-primary { color:#17130c; border:1px solid var(--accent); background:linear-gradient(135deg,var(--accent-2),var(--accent)); }
.cast-secondary { color:var(--accent-2); border:1px solid var(--line-strong); background:var(--glow); }
.cast-primary:hover,.cast-secondary:hover { filter:brightness(1.08); transform:translateY(-1px); }
.remote-option { display:grid; grid-template-columns:1fr 118px; column-gap:13px; align-items:start; }
.remote-option .cast-option-copy { align-self:center; }
.qr-frame { grid-column:2; grid-row:1 / 3; padding:7px; color:#4c473c; border-radius:13px; background:#f5edda; text-align:center; box-shadow:0 10px 28px rgba(0,0,0,.24); }
.qr-frame img { display:block; width:104px; height:104px; border-radius:7px; }
.qr-frame span { display:block; margin-top:4px; font-size:9px; font-weight:700; }
.remote-option .cast-url,.remote-option .cast-secondary { grid-column:1 / -1; }
.cast-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:13px; color:var(--muted); font-size:10px; }
.cast-foot > span { display:flex; align-items:center; gap:7px; }
.cast-foot > span i { width:6px; height:6px; border-radius:50%; background:#4fd7a0; }
.cast-foot button { padding:7px 9px; color:var(--muted); border:0; background:transparent; cursor:pointer; font-size:10px; }
.cast-foot button:hover { color:var(--accent-2); }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 25px; transform: translate(-50%, 20px); padding: 11px 17px; border: 1px solid var(--line-strong); border-radius: 12px; color: var(--text); background: #111c18; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: .25s; font-size: 12px; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 821px) {
  body { overflow: hidden; }
  .app-shell { height: 100vh; min-height: 0; }
  .main-grid { min-height: 0; overflow: hidden; }
  .timer-stage, .side-panel { min-height: 0; height: 100%; }
  .schedule-list { min-height: 80px; }
}

body[data-theme="mono"] { --bg:#080b10; --surface:rgba(16,21,28,.86); --surface-strong:#171d25; --line:rgba(210,225,244,.14); --line-strong:rgba(224,237,253,.42); --text:#f3f6fa; --muted:#7e8998; --accent:#dfe7f1; --accent-2:#ffffff; --glow:rgba(170,190,218,.13); --radius:10px; }
body[data-theme="mono"] .timer-stage, body[data-theme="mono"] .side-panel { border-radius: 10px; }
body[data-theme="mono"] .timer-stage::before { content:"01"; font-family:var(--timer-font); font-weight:800; right:2%; opacity:.023; }
body[data-theme="mono"] .brand-mark, body[data-theme="mono"] .play-button { border-radius: 6px; }

body[data-theme="inferno"] { --bg:#0d0506; --surface:rgba(28,10,11,.84); --surface-strong:#260d0f; --line:rgba(255,86,73,.16); --line-strong:rgba(255,93,78,.48); --text:#fff6f3; --muted:#9f7774; --accent:#ff4f43; --accent-2:#ffb06e; --glow:rgba(255,61,46,.22); }
body[data-theme="inferno"] .timer-stage { background-image:linear-gradient(145deg,rgba(255,80,62,.08),transparent 42%),repeating-linear-gradient(135deg,transparent 0 42px,rgba(255,255,255,.012) 42px 43px); }
body[data-theme="inferno"] .play-button { color:#fff; }
body[data-theme="inferno"] .timer-stage::before { content:"◆"; }

body[data-theme="nebula"] { --bg:#090719; --surface:rgba(20,15,53,.78); --surface-strong:#21184f; --line:rgba(126,104,255,.2); --line-strong:rgba(140,120,255,.52); --text:#f6f2ff; --muted:#8f88ad; --accent:#8d72ff; --accent-2:#5ee4f2; --glow:rgba(107,75,255,.25); }
body[data-theme="nebula"] .ambient { background:radial-gradient(circle at 70% 15%,rgba(25,185,229,.1),transparent 30%); }
body[data-theme="nebula"] .timer-stage::before { content:"✦"; }
body[data-theme="nebula"] .play-button { color:#fff; }

body[data-theme="amber"] { --bg:#130b06; --surface:rgba(35,20,10,.82); --surface-strong:#321d0d; --line:rgba(241,160,68,.18); --line-strong:rgba(241,160,68,.48); --text:#fff5e7; --muted:#a48769; --accent:#f09d41; --accent-2:#ffe0a3; --glow:rgba(224,126,28,.21); }
body[data-theme="amber"] .timer-stage::before { content:"♣"; }

@media (max-width: 1060px) {
  .app-shell { padding-inline: 18px; }
  .main-grid { grid-template-columns: 1fr 300px; gap: 16px; }
  .timer-stage { padding-inline: 28px; }
  .blind-block { grid-template-columns: 1fr 54px 1fr; }
}

@media (max-width: 820px) {
  .app-shell { padding: 0 12px 12px; }
  .topbar { min-height: 72px; grid-template-columns: 1fr auto; }
  .event-title { order: 3; grid-column: 1 / -1; width: 100%; border-top: 1px solid var(--line); border-radius: 0; justify-content: center; }
  .wall-time { display: none; }
  .main-grid { grid-template-columns: 1fr; padding: 12px 0; }
  .timer-stage { min-height: calc(100svh - 164px); border-radius: 22px; padding: 30px 15px 22px; }
  .timer { font-size: clamp(92px, 29vw, 150px); }
  .blind-side strong { font-size: clamp(54px, 16vw, 84px); }
  .blind-block { grid-template-columns: 1fr 34px 1fr; margin-top: 28px; }
  .blind-divider { font-size: 40px; }
  .next-strip { width: 100%; }
  .side-panel { min-height: auto; }
  .schedule-list { max-height: 370px; }
  .theme-dock { grid-template-columns: 1fr auto; padding: 10px 5px; }
  .offline-state { display: none; }
}

@media (max-width: 520px) {
  .app-shell { padding-top: max(8px, env(safe-area-inset-top)); }
  .topbar { grid-template-columns: minmax(0, 1fr); row-gap: 8px; min-height: 0; }
  .brand { min-width: 0; grid-column: 1; }
  .brand-mark { width: 40px; height: 40px; font-size: 23px; }
  .brand strong { font-size: 14px; white-space: nowrap; }
  .top-actions { order: 2; grid-column: 1; justify-self: stretch; width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .top-actions #fullScreen { display: none; }
  .event-title { order: 3; grid-column: 1; min-height: 41px; padding-block: 9px; }
  .top-actions .icon-button { width: 100%; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 7px; touch-action: manipulation; }
  .top-actions .icon-button svg { width: 21px; height: 21px; flex: 0 0 auto; }
  .top-actions .icon-button .action-label { display: inline; font-size: 13px; font-weight: 600; white-space: nowrap; }
  .cast-grid { grid-template-columns:1fr; }
  .cast-modal .modal-card { max-height:calc(100vh - 28px); overflow-y:auto; }
  .cast-status-row { align-items:flex-start; }
  .room-code-block { align-items:flex-start; flex-direction:column; gap:3px; }
  .remote-key-details { margin:6px 0 0; }
  .room-code-block strong { font-size:22px; }
  .connection-badge { padding-top:5px; }
  .cast-foot { align-items:flex-start; }
  .timer-stage { justify-content: flex-start; min-height: 600px; padding-top: 26px; }
  .timer { margin-top: 18px; font-size: clamp(88px, 29vw, 120px); }
  .progress-track { width: 92%; margin-top: 37px; }
  .blind-side strong { font-size: clamp(50px, 16vw, 70px); }
  .next-strip { margin-top: 18px; padding: 11px 12px; }
  .next-strip strong { display: block; margin: 2px 0 0; font-size: 18px; }
  .next-meta { flex-direction: column; gap: 2px; text-align: right; }
  .break-hint { padding-left:0; border-left:0; }
  .primary-controls { width: 100%; justify-content: center; gap: 8px; margin-top: 20px; }
  .control-button { width: 47px; padding: 0; }
  .control-button span { display: none; }
  .play-button { min-width: 146px; }
  .quick-controls { width: 100%; margin-top: 8px; }
  .quick-controls button { flex: 1; min-width: 0; min-height: 44px; padding-inline: 2px; font-size: 11px; white-space: nowrap; touch-action: manipulation; }
  .theme-dock { display: flex; justify-content: space-between; gap: 6px; }
  .theme-label { display: none; }
  .theme-dock .theme-options { width: auto; min-width: 0; flex: 1; justify-content: center; gap: 2px; }
  .theme-swatch { width: 43px; height: 43px; }
  .footer-legal { flex: 0 0 auto; }
  .use-notice-link { min-height: 43px; padding-inline: 8px; }
  .use-notice-card { padding: 21px 17px; }
  .modal-card { padding: 21px 17px; }
  .close-button { width: 44px; height: 44px; }
  .preset-grid { grid-template-columns:1fr; }
  .preset-card { min-height:150px; }
  .preset-modal .modal-card { max-height:calc(100vh - 28px); overflow-y:auto; }
  .schedule-modal { max-height: calc(100dvh - 28px); touch-action: manipulation; }
  .schedule-modal .modal-card { padding-inline: 15px; overflow-x: hidden; }
  .editor-row { grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 44px; gap: 4px; }
  .editor-labels { grid-template-columns: 28px repeat(3, minmax(0, 1fr)) 44px; gap: 4px; }
  .editor-row input { height: 44px; padding-inline: 5px; font-size: 16px; }
  .editor-row button { width: 44px; height: 44px; }
}

@media (hover: none) and (pointer: coarse) {
  .schedule-modal { touch-action: manipulation; }
  .schedule-editor input { font-size: 16px; }
}

@media (max-height: 950px) and (min-width: 821px) {
  .topbar { min-height: 74px; }
  .main-grid { padding-block: 14px; }
  .timer-stage, .side-panel { min-height: 570px; }
  .timer-stage { padding-block: 20px; }
  .timer { font-size: clamp(96px, 11.7vw, 150px); }
  .blind-block { margin-top: 23px; }
  .blind-side strong { font-size: clamp(52px, 6.2vw, 80px); }
  .next-strip, .primary-controls { margin-top: 17px; }
  .theme-dock { min-height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}