:root {
  color-scheme: dark;
  --bg: #0a101d;
  --muted: #8c9aae;
  --text: #f2f5fc;
  --stroke: rgba(171, 192, 218, 0.13);
  --mint: #8ae5ce;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); color: var(--text); overflow-x: hidden; }
.ambient { position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); }
.ambient-one { width: 580px; height: 580px; top: -280px; left: -160px; background: rgba(40, 118, 127, .15); }
.ambient-two { width: 680px; height: 680px; right: -340px; bottom: -380px; background: rgba(60, 60, 130, .13); }
.dashboard { max-width: 1450px; margin: 0 auto; padding: clamp(38px, 6vw, 88px) clamp(22px, 5vw, 80px) 36px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 35px; }
.eyebrow { color: var(--mint); font-size: 11px; letter-spacing: .22em; font-weight: 750; display: flex; align-items: center; gap: 12px; }
.eyebrow-line { width: 23px; height: 1px; background: var(--mint); }
h1 { font-size: clamp(40px, 4.55vw, 67px); letter-spacing: -.057em; line-height: 1.08; margin: 24px 0 20px; font-weight: 750; }
h1 span { color: #98acbd; }
.intro { font-size: 15px; line-height: 1.7; margin: 0; color: #9eaabe; max-width: 620px; }
.live-status { color: #a7c8bc; border: 1px solid rgba(138,229,206,.23); background: rgba(36,79,75,.18); border-radius: 999px; padding: 11px 14px; display: flex; gap: 10px; align-items: center; white-space: nowrap; font-size: 10px; font-weight: 750; letter-spacing: .12em; margin-bottom: 8px; }
.live-dot { width: 7px; height: 7px; background: #71d9ad; border-radius: 50%; box-shadow: 0 0 0 4px rgba(113,217,173,.12),0 0 16px rgba(113,217,173,.3); animation: pulse 2.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .48; box-shadow: 0 0 0 6px rgba(113,217,173,.06); } }
/* Three columns in ascending current UTC offset; DOM order remains user-draggable. */
.clock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.comparison-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 14px 17px; border: 1px solid var(--stroke); background: rgba(24,35,50,.67); border-radius: 15px; }
.comparison-title { display: flex; align-items: center; gap: 10px; color: #c9d6e7; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.comparison-indicator { background: var(--mint); width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 0 4px rgba(138,229,206,.1); }
.comparison-hint { color: #8190a5; font-size: 12px; font-weight: 450; letter-spacing: normal; margin-left: 10px; }
.reference-picker { display: flex; gap: 12px; align-items: center; }
.reference-picker label { white-space: nowrap; color: #95a4b9; letter-spacing: .12em; font-size: 11px; font-weight: 750; }
.select-shell { position: relative; min-width: 207px; }
.select-shell select { appearance: none; width: 100%; padding: 12px 40px 12px 14px; color: #effbf8; border-radius: 10px; background: #24364a; border: 1px solid rgba(138,229,206,.38); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; }
.select-shell select:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.select-shell select:hover { border-color: rgba(138,229,206,.75); }
.select-shell svg { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); width: 18px; height: 18px; pointer-events: none; fill: none; stroke: #9edacc; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.clock-card { --accent: #a0b5ff; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 304px; padding: 25px 23px 23px; background: linear-gradient(160deg, rgba(27,37,54,.92), rgba(16,25,40,.96)); border: 1px solid var(--stroke); border-radius: 20px; box-shadow: 0 22px 65px rgba(0,0,0,.13); overflow: hidden; }
.clock-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); opacity: .78; }
.clock-card--home { --accent: #70e6c4; border-color: rgba(112,230,196,.3); background: linear-gradient(160deg, rgba(27,59,62,.77), rgba(16,30,45,.96) 76%); }
.clock-card--nt { --accent: #f2a885; }
.clock-card--sa { --accent: #b09bff; }
.clock-card--act { --accent: #81d2e4; }
.clock-card--qld { --accent: #f3c787; }
.clock-card--east { --accent: #8abbf7; }
.clock-card.is-reference { border-color: rgba(138,229,206,.65); box-shadow: 0 0 0 1px rgba(138,229,206,.16), 0 22px 65px rgba(0,0,0,.13); }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.state-code { font-size: clamp(26px,2.4vw,33px); font-weight: 750; letter-spacing: -.046em; line-height: 1.05; }
.state-code--wide { white-space: nowrap; font-size: clamp(23px,2.05vw,28px); }
.state-slash { color: #67788d; margin: 0 3px; font-weight: 450; }
.state-name { margin-top: 10px; color: #8494ac; font-size: 9px; font-weight: 750; letter-spacing: .12em; line-height: 1.4; }
/* Reorder is restricted to a dedicated grip so the rest of each card is usable. */
.card-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.drag-handle { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border-radius: 11px; border: 1px solid rgba(169,188,207,.14); background: rgba(159,177,200,.06); color: #90a0b5; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.drag-handle:hover { color: var(--mint); border-color: rgba(138,229,206,.4); background: rgba(138,229,206,.1); }
.drag-handle:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.drag-handle:active { cursor: grabbing; }
.drag-handle svg { width: 17px; height: 20px; fill: currentColor; }
.clock-card.is-dragging { opacity: .26; border-style: dashed; }
.drag-ghost { position: fixed !important; z-index: 50; margin: 0; pointer-events: none; opacity: .95; box-shadow: 0 28px 90px rgba(0,0,0,.55),0 0 0 1px rgba(138,229,206,.32); transition: none !important; }
body.reordering { cursor: grabbing; user-select: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sorting-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0 1px 12px; }
.sorting-copy { display: flex; gap: 15px; align-items: center; }
.sorting-label { color: #a0e4d0; font-size: 10px; font-weight: 750; letter-spacing: .13em; white-space: nowrap; }
.sorting-hint { color: #8c9aae; font-size: 12px; }
.reset-button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(171,192,218,.24); background: rgba(24,35,50,.7); color: #e0e8f3; padding: 8px 11px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; white-space: nowrap; }
.reset-button:hover:not(:disabled) { border-color: rgba(138,229,206,.7); color: var(--mint); }
.reset-button:disabled { cursor: default; opacity: .47; }
.reset-button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
.reset-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.utc-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 17px 22px; border-radius: 15px; background: rgba(22,34,48,.76); border: 1px solid var(--stroke); margin-top: 18px; }
.utc-strip-heading { display: flex; align-items: center; gap: 10px; color: #a4e4d2; font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.utc-dot { width: 7px; height: 7px; flex: 0 0 7px; background: #85d9bc; border-radius: 50%; }
.utc-caption { margin-left: 9px; font-size: 12px; color: var(--muted); font-weight: 450; letter-spacing: 0; }
.utc-strip-time { display: flex; align-items: baseline; gap: 16px; }
.utc-strip-time time { font-size: 21px; font-weight: 680; letter-spacing: -.03em; color: #eef6ff; font-variant-numeric: tabular-nums; }
.utc-strip-time span { color: #8c9aae; font-size: 12px; }
.card-icon { display: grid; place-items: center; width: 37px; height: 37px; flex: 0 0 37px; border-radius: 11px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); }
.card-icon svg { width: 19px; height: 19px; }
.person { margin-top: 19px; color: #c8d2e1; font-size: 13px; font-weight: 550; }
.person-separator { margin: 0 7px; color: #708198; }
.clock-face { display: flex; align-items: baseline; margin-top: 10px; white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -.075em; }
.clock-time { font-size: clamp(41px, 3.6vw, 53px); line-height: 1.2; font-weight: 680; }
.clock-seconds { font-size: clamp(19px, 1.75vw, 24px); font-weight: 500; color: #8192a9; margin-left: 1px; }
.local-date { color: #9daac0; font-size: 12px; margin-top: 8px; }
.card-divider { height: 1px; background: rgba(180,198,217,.12); margin: auto 0 21px; padding-top: 0; }
.card-footer { display: flex; align-items: flex-end; gap: 10px; justify-content: space-between; }
.timezone { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.zone-abbr { color: var(--accent); font-size: 13px; font-weight: 750; }
.zone-offset { color: #8c9cb1; font-size: 11px; white-space: nowrap; }
.difference { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.difference-value { color: #f0f5fe; font-size: 16px; font-weight: 750; white-space: nowrap; font-variant-numeric: tabular-nums; }
.is-reference .difference-value { font-size: 11px; letter-spacing: .13em; color: var(--mint); }
.difference-label { font-size: 11px; color: #8798ac; white-space: nowrap; }
.page-footer { margin-top: 27px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: #8290a4; font-size: 12px; line-height: 1.6; }
.footer-note { display: flex; align-items: baseline; gap: 10px; }
.footer-bullet { display: inline-block; width: 6px; height: 6px; border-radius: 100%; background: #91a9bf; flex: 0 0 6px; }
.footer-right strong { color: #c2cfdd; font-weight: 650; }
@media (max-width: 1060px) { .clock-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .clock-card { min-height: 307px; padding: 26px; } .clock-time { font-size: clamp(48px,5.8vw,65px); } .clock-seconds { font-size: 26px; } .state-code { font-size: 33px; } .state-code--wide { font-size: 29px; } }
@media (min-width: 1061px) and (max-width: 1200px) { .clock-time { font-size: 45px; } .clock-seconds { font-size: 21px; } .clock-card { padding: 21px; } .state-code { font-size: 30px; } }
@media (max-width: 650px) { .dashboard { padding: 39px 18px 30px; } .page-header { align-items: flex-start; flex-direction: column; gap: 24px; margin-bottom: 27px; } h1 { font-size: clamp(42px,10vw,60px); margin: 23px 0 13px; } .intro { font-size: 14px; } .live-status { margin: 0; } .comparison-bar { align-items: stretch; flex-direction: column; padding: 16px; } .comparison-title { flex-wrap: wrap; } .comparison-hint { display: none; } .sorting-toolbar { align-items: flex-start; } .sorting-copy { align-items: flex-start; flex-direction: column; gap: 4px; } .sorting-hint { font-size: 11px; } .utc-strip { padding: 15px 16px; flex-direction: column; align-items: flex-start; gap: 9px; } .utc-strip-time { flex-wrap: wrap; gap: 8px 14px; } .utc-caption { display: none; } .reference-picker { justify-content: space-between; } .select-shell { min-width: 0; flex: 1; max-width: 260px; } .clock-grid { grid-template-columns: 1fr; gap: 13px; } .clock-card { min-height: 303px; padding: 24px; } .clock-card--home .person { margin-top: 20px; } .clock-time { font-size: clamp(49px,11vw,65px); } .clock-seconds { font-size: 24px; } .card-divider { margin-bottom: 18px; } .page-footer { flex-direction: column; align-items: flex-start; } }
@media (max-width: 390px) { .difference-label { white-space: normal; max-width: 140px; } .card-footer { gap: 8px; } .state-name { font-size: 8px; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* Appearance: System / Light / Dark. A three-way radio control supports keyboard use. */
.header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; flex: 0 0 auto; }
.header-controls .live-status { margin: 0; }
.theme-control { border: 0; padding: 0; margin: 0; min-width: 0; }
.theme-control legend { float: none; padding: 0; margin: 0 0 8px; font-size: 10px; font-weight: 750; color: #9eaec1; letter-spacing: .13em; }
.theme-options { display: flex; align-items: center; gap: 3px; padding: 4px; border: 1px solid var(--stroke); border-radius: 12px; background: rgba(22,34,48,.84); }
.theme-options label { position: relative; display: block; cursor: pointer; }
.theme-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-options span { display: block; color: #a7b7c9; border-radius: 8px; padding: 8px 12px; font-weight: 650; font-size: 12px; line-height: 1.3; transition: background .15s ease, color .15s ease; }
.theme-options input:checked + span { color: #f6fcfc; background: #2b4b56; box-shadow: 0 1px 6px rgba(0,0,0,.16); }
.theme-options input:focus-visible + span { outline: 2px solid var(--mint); outline-offset: 2px; }
.theme-options label:hover span { color: #f3fafd; }
/* Long NSW/VIC/ACT code and Tokyo label must be legible in narrow cards. */
.clock-card--east .state-code--wide { font-size: clamp(20px,1.73vw,26px); }
.clock-card--east .person { font-size: 12px; }
.clock-card--tokyo { --accent: #f4a1b9; }
@media (max-width: 1060px) { .clock-card--east .state-code--wide { font-size: 26px; } }
@media (max-width: 650px) { .header-controls { flex-direction: row; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; width: 100%; gap: 13px; } .theme-control legend { font-size: 9px; } .theme-options span { padding: 8px 10px; } }
@media (max-width: 390px) { .theme-options span { padding: 8px; font-size: 11px; } .header-controls { align-items: flex-start; } }

/* Light palette, including all text and surface treatments of the original dark UI. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6fb;
  --muted: #61748d;
  --text: #15283e;
  --stroke: rgba(67,96,123,.18);
  --mint: #0a816c;
}
[data-theme="light"] .ambient-one { background: rgba(83,184,189,.11); }
[data-theme="light"] .ambient-two { background: rgba(96,130,202,.09); }
[data-theme="light"] h1 span { color: #576b84; }
[data-theme="light"] .intro { color: #52667f; }
[data-theme="light"] .live-status { color: #136b58; background: rgba(18,145,112,.07); border-color: rgba(24,144,119,.24); }
[data-theme="light"] .live-dot { background: #0aa783; }
[data-theme="light"] .comparison-bar { background: rgba(255,255,255,.87); box-shadow: 0 8px 25px rgba(46,74,101,.045); }
[data-theme="light"] .comparison-title { color: #314c65; }
[data-theme="light"] .comparison-hint { color: #647993; }
[data-theme="light"] .reference-picker label { color: #516983; }
[data-theme="light"] .select-shell select { color: #153b45; background: #f3fbf9; border-color: rgba(15,126,100,.37); }
[data-theme="light"] .select-shell svg { stroke: #167660; }
[data-theme="light"] .clock-card { background: linear-gradient(155deg,#fff,#f8fafd); border-color: rgba(66,93,127,.17); box-shadow: 0 14px 32px rgba(35,70,97,.075); }
[data-theme="light"] .clock-card--home { background: linear-gradient(160deg,#e8f9f4,#fff 82%); border-color: rgba(4,133,106,.3); }
[data-theme="light"] .clock-card--home { --accent: #168b70; }
[data-theme="light"] .clock-card--sa { --accent: #6a55c9; }
[data-theme="light"] .clock-card--nt { --accent: #b75a2c; }
[data-theme="light"] .clock-card--tokyo { --accent: #ae396c; }
[data-theme="light"] .clock-card--qld { --accent: #aa6c12; }
[data-theme="light"] .clock-card--east { --accent: #2676bf; }
[data-theme="light"] .clock-card.is-reference { border-color: rgba(10,129,108,.65); box-shadow: 0 0 0 1px rgba(10,129,108,.13),0 18px 38px rgba(27,77,91,.09); }
[data-theme="light"] .state-name { color: #647891; }
[data-theme="light"] .state-slash { color: #8da1b8; }
[data-theme="light"] .drag-handle { color: #687d95; background: #f4f7fb; border-color: rgba(67,96,123,.19); }
[data-theme="light"] .drag-handle:hover { color: #076954; background: #e9f5f1; border-color: rgba(10,129,108,.45); }
[data-theme="light"] .drag-ghost { box-shadow: 0 25px 80px rgba(27,64,87,.24); }
[data-theme="light"] .sorting-label { color: #0a7561; }
[data-theme="light"] .sorting-hint { color: #63778e; }
[data-theme="light"] .reset-button { color: #324b66; background: rgba(255,255,255,.9); border-color: rgba(67,96,123,.25); }
[data-theme="light"] .utc-strip { background: rgba(255,255,255,.88); box-shadow: 0 8px 25px rgba(46,74,101,.045); }
[data-theme="light"] .utc-strip-heading { color: #177866; }
[data-theme="light"] .utc-dot { background: #1a9e80; }
[data-theme="light"] .utc-strip-time time { color: #15283e; }
[data-theme="light"] .utc-strip-time span { color: #61748d; }
[data-theme="light"] .person { color: #445b75; }
[data-theme="light"] .person-separator { color: #94a4b9; }
[data-theme="light"] .clock-seconds { color: #76899e; }
[data-theme="light"] .local-date { color: #627890; }
[data-theme="light"] .card-divider { background: rgba(73,95,122,.13); }
[data-theme="light"] .zone-offset { color: #647990; }
[data-theme="light"] .difference-value { color: #18364c; }
[data-theme="light"] .is-reference .difference-value { color: #0a806a; }
[data-theme="light"] .difference-label { color: #637b92; }
[data-theme="light"] .page-footer { color: #667a92; }
[data-theme="light"] .footer-right strong { color: #2b4d60; }
[data-theme="light"] .footer-bullet { background: #859aaf; }
[data-theme="light"] .theme-control legend { color: #667c93; }
[data-theme="light"] .theme-options { background: rgba(255,255,255,.9); }
[data-theme="light"] .theme-options span { color: #617791; }
[data-theme="light"] .theme-options input:checked + span { color: #0a594b; background: #dcf1ea; box-shadow: 0 1px 5px rgba(15,73,64,.08); }
[data-theme="light"] .theme-options label:hover span { color: #0a594b; }

/* Quiet meeting-time preview controls immediately below the UTC strip. */
.time-preview-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 10px; padding: 15px 18px;
  background: rgba(22,34,48,.45); border: 1px solid var(--stroke);
  border-radius: 14px;
}
.time-preview-copy { display: flex; align-items: center; gap: 13px; min-width: 0; }
.time-preview-copybody { min-width: 0; }
.time-preview-icon { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; color: #94abbd; background: rgba(139,170,195,.08); flex: 0 0 auto; }
.time-preview-icon svg { width: 19px; height: 19px; }
.time-preview-title { color: #a4b7c8; font-weight: 750; letter-spacing: .10em; font-size: 10px; display: flex; align-items: center; gap: 9px; }
.preview-chip { color: #9bc9bc; font-size: 9px; padding: 3px 6px; letter-spacing: .09em; border: 1px solid rgba(138,229,206,.22); border-radius: 5px; }
.preview-chip.is-preview { color: #f0c58a; border-color: rgba(240,197,138,.4); background: rgba(240,197,138,.07); }
.time-preview-copy p { color: #879bb0; margin: 6px 0 0; font-size: 11px; line-height: 1.5; }
.time-preview-copy strong { color: #b4d1da; font-weight: 650; }
.time-preview-controls { display: flex; align-items: flex-end; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.time-preview-controls label { display: flex; flex-direction: column; gap: 6px; color: #8d9fb4; letter-spacing: .09em; font-size: 9px; font-weight: 700; }
.time-preview-controls input {
  font: inherit; font-size: 12px; letter-spacing: normal; font-weight: 600;
  color: #d6e5f1; background: #203044; border: 1px solid rgba(157,182,205,.25);
  color-scheme: dark; padding: 9px 8px; border-radius: 8px; height: 36px;
  width: 137px; min-width: 0;
}
#preview-time { width: 100px; }
.time-preview-controls input:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.preview-reset {
  height: 36px; display: inline-flex; align-items: center; gap: 7px;
  color: #c5d5e3; font: inherit; font-size: 11px; font-weight: 650;
  background: #25394a; border: 1px solid rgba(157,182,205,.25);
  border-radius: 8px; padding: 0 11px; cursor: pointer; white-space: nowrap;
}
.preview-reset:hover:not(:disabled) { border-color: var(--mint); }
.preview-reset:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.preview-reset:disabled { opacity: .43; cursor: default; }
.preview-reset svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.preview-error { min-height: 0; margin: 0; color: #b4bbc9; font-size: 11px; }
.preview-error:not(:empty) { padding: 8px 12px 0; }
.preview-error.is-error { color: #f4a3a3; }
.live-status.is-preview { color: #f0ca94; border-color: rgba(240,197,138,.32); background: rgba(142,96,28,.14); }
.live-status.is-preview .live-dot { background: #f0ca94; box-shadow: 0 0 0 4px rgba(240,197,138,.12); animation: none; }
[data-theme="light"] .time-preview-bar { background: rgba(255,255,255,.7); }
[data-theme="light"] .time-preview-icon { color: #53758b; background: #edf4f8; }
[data-theme="light"] .time-preview-title { color: #49647c; }
[data-theme="light"] .preview-chip { color: #21836b; border-color: rgba(22,131,107,.3); }
[data-theme="light"] .preview-chip.is-preview { color: #955e12; border-color: rgba(149,94,18,.3); background: #fff8e9; }
[data-theme="light"] .time-preview-copy p { color: #6a7d90; }
[data-theme="light"] .time-preview-copy strong { color: #2e6172; }
[data-theme="light"] .time-preview-controls label { color: #677b91; }
[data-theme="light"] .time-preview-controls input { background: #f7fafc; color: #1e3b50; color-scheme: light; border-color: rgba(66,93,127,.24); }
[data-theme="light"] .preview-reset { color: #354b60; background: #f7fafc; border-color: rgba(66,93,127,.24); }
[data-theme="light"] .preview-error { color: #64788c; }
[data-theme="light"] .preview-error.is-error { color: #ab2828; }
[data-theme="light"] .live-status.is-preview { color: #945b11; border-color: rgba(149,94,18,.24); background: #fff7e8; }
[data-theme="light"] .live-status.is-preview .live-dot { background: #cb8c27; box-shadow: 0 0 0 4px rgba(200,140,39,.13); }
@media (max-width: 1060px) { .time-preview-bar { align-items: flex-start; flex-wrap: wrap; } .time-preview-controls { margin-left: 47px; } }
@media (max-width: 650px) {
  .time-preview-bar { padding: 14px; gap: 12px; }
  .time-preview-copy { align-items: flex-start; }
  .time-preview-controls { margin-left: 0; width: 100%; display: grid; grid-template-columns: 1.35fr 1fr auto; gap: 8px; }
  .time-preview-controls input { width: 100% !important; }
  .preview-reset { font-size: 10px; padding: 0 8px; }
}
@media (max-width: 350px) { .time-preview-controls { grid-template-columns: 1.25fr 1fr; } .preview-reset { grid-column: 1 / -1; justify-self: end; } }