:root {
  color-scheme: dark;
  --bg: #070b11;
  --bg-soft: #0b1119;
  --surface: #101821;
  --surface-raised: #141e29;
  --surface-hover: #172431;
  --border: #263340;
  --border-strong: #344756;
  --text: #f4f7fb;
  --muted: #8e9aa9;
  --muted-strong: #b7c1cd;
  --cyan: #14b8f3;
  --cyan-soft: #68d7ff;
  --amber: #ffb21d;
  --green: #32dd79;
  --red: #ff6b6b;
  --radius: 12px;
  --shadow: 0 18px 48px rgba(0, 0, 0, .25);
  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; background: var(--bg); }
body { font-size: 15px; line-height: 1.5; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--cyan-soft); outline-offset: 3px; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; background: radial-gradient(circle at 100% 0, rgba(20, 184, 243, .055), transparent 32rem), var(--bg); }
.topbar { height: 84px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid rgba(91,211,255,.28); background: #07121c; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 20px; letter-spacing: -.045em; }
.brand-logo { display: block; width: clamp(220px, 25vw, 340px); height: auto; max-height: 72px; object-fit: contain; }
.brand strong { color: var(--cyan); font-weight: 800; }
.brand-mark { display: grid; place-items: center; width: 27px; height: 27px; color: var(--bg); background: var(--cyan); border-radius: 7px; font-size: 14px; font-weight: 800; letter-spacing: 0; }
.topbar-status, .privacy-note, .preview-note { color: var(--muted); font-size: 12px; }
.topbar-status { display: flex; align-items: center; gap: 8px; }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(50,221,121,.1); }

.setup-view { width: min(1400px, 90vw); margin: 0 auto; padding: 72px 0 54px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(410px, .95fr); gap: clamp(48px, 7vw, 110px); }
.intro-block { margin-bottom: 50px; }
.eyebrow, .section-kicker { margin: 0 0 12px; color: var(--cyan); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 20px; font-size: clamp(35px, 4vw, 58px); line-height: 1.18; letter-spacing: -.065em; font-weight: 700; }
.intro-copy { max-width: 590px; margin-bottom: 0; color: var(--muted-strong); font-size: 16px; }
.section-heading-row, .preview-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
h2 { margin-bottom: 0; font-size: 20px; letter-spacing: -.04em; }
.count-label { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; color: var(--muted); font-size: 12px; }
#capacity-status { margin-left: 4px; }
.capacity-warning { color: var(--red); }
.widget-list { display: grid; gap: 9px; }
.widget-row { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(16,24,33,.84); transition: border-color .2s, background .2s; }
.widget-row.is-enabled { border-color: rgba(20,184,243,.88); background: linear-gradient(90deg, rgba(20,184,243,.08), rgba(16,24,33,.86) 35%); }
.widget-row:hover { background-color: var(--surface-hover); }
.widget-main { min-height: 66px; display: grid; grid-template-columns: 32px minmax(95px, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 12px 14px; }
.widget-icon { display: grid; place-items: center; width: 29px; height: 29px; color: var(--cyan); border: 1px solid currentColor; border-radius: 8px; font-size: 14px; font-weight: 700; }
.widget-row[data-type="weather"] .widget-icon { color: var(--amber); }
.widget-row[data-type="bitcoin"] .widget-icon, .widget-row[data-type="xrp"] .widget-icon { color: var(--amber); }
.widget-label { font-weight: 600; }
.widget-settings { display: flex; align-items: center; gap: 15px; color: var(--muted-strong); font-size: 12px; }
.compact-setting { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.compact-setting input { accent-color: var(--cyan); }
.toggle { position: relative; display: inline-flex; width: 43px; height: 24px; flex: 0 0 auto; }
.toggle input { position: absolute; opacity: 0; }
.toggle-track { width: 43px; height: 24px; border-radius: 99px; background: #394652; transition: background .2s; }
.toggle-track::after { content: ""; display: block; width: 18px; height: 18px; margin: 3px; border-radius: 50%; background: #edf2f7; transition: transform .2s; }
.toggle input:checked + .toggle-track { background: var(--cyan); }
.toggle input:checked + .toggle-track::after { transform: translateX(19px); }
.row-expand { border-top: 1px solid rgba(255,255,255,.06); padding: 13px 14px 15px 60px; background: rgba(0,0,0,.12); }
.field-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.field-grid.youtube-fields { grid-template-columns: minmax(0, 1fr) auto; }
.field { display: grid; gap: 5px; }
.field label { color: var(--muted); font-size: 11px; }
input[type="text"], input[type="number"], select { width: 100%; min-height: 34px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 6px 9px; color: var(--text); background: var(--surface); font-size: 12px; }
input::placeholder { color: #657382; }
.row-tools { display: flex; align-items: center; gap: 4px; }
.row-tool { width: 27px; height: 27px; padding: 0; border: 1px solid transparent; border-radius: 6px; color: var(--muted); background: transparent; }
.row-tool:hover:not(:disabled) { color: var(--text); border-color: var(--border-strong); background: var(--surface-raised); }
.row-tool:disabled { opacity: .25; cursor: not-allowed; }
.size-select { min-height: 27px; width: 136px; min-width: 136px; padding: 3px 8px; }
.setup-actions { display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 28px; }
.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 18px; color: var(--text); background: transparent; font-weight: 600; transition: transform .2s, background .2s, border-color .2s; }
.button:hover { transform: translateY(-1px); }
.button-ghost:hover { background: var(--surface-raised); border-color: var(--muted); }
.button-primary { border-color: var(--cyan); color: #02131a; background: var(--cyan); box-shadow: 0 8px 24px rgba(20,184,243,.18); font-size: 15px; }
.button-primary:hover { background: var(--cyan-soft); }
.privacy-note, .contact-note { display: flex; gap: 7px; margin: 16px 0 0; }
.contact-note { margin-top: 8px; color: var(--muted); font-size: 12px; }
.contact-note a { color: var(--cyan); text-underline-offset: 3px; }
.contact-note a:hover { color: var(--cyan-soft); }

.preview-column { min-width: 0; align-self: start; }
.preview-badge { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: .12em; }
.preview-grid { --preview-cols: 2; display: grid; grid-template-columns: repeat(var(--preview-cols), minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); gap: 6px; padding: 14px; border: 1px solid rgba(255,255,255,.08); border-radius: 13px; background: #111820; box-shadow: var(--shadow); }
.preview-grid.is-over-capacity { border-color: var(--red); }
.mini-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; padding: 13px; background: #0b1118; }
.mini-card.news { grid-column: 1 / -1; }
.mini-card.clock { grid-column: span 2; }
.mini-card h3 { margin: 0 0 7px; font-size: 12px; }
.mini-card .mini-value { color: var(--text); font-size: clamp(21px, 3vw, 34px); font-weight: 700; letter-spacing: -.06em; line-height: 1.1; }
.mini-card .mini-muted { color: var(--muted); font-size: 10px; }
.mini-card.weather .mini-value { color: var(--amber); }
.mini-card.crypto .mini-value { font-size: 19px; }
.mini-card.crypto.size-compact .mini-value { font-size: 16px; }
.mini-card.crypto.size-wide .mini-value { font-size: 22px; }
.mini-card.crypto.size-huge .mini-value { font-size: clamp(22px, 2.5vw, 30px); }
.mini-card.news ul { display: grid; gap: 4px; margin: 0; padding-left: 16px; color: var(--muted-strong); font-size: 11px; }
.mini-card.youtube { display: grid; place-items: center; min-height: 130px; color: var(--muted); background: repeating-linear-gradient(135deg, #0c1218, #0c1218 8px, #0f171f 8px, #0f171f 16px); }
.mini-card.size-compact { min-height: 80px; padding: 8px; }
.mini-card.size-compact .mini-value { font-size: clamp(17px, 2.2vw, 26px); }
.mini-card.size-wide { min-height: 120px; }
.mini-card.size-huge { min-height: 180px; }
.mini-card.size-wide .mini-value { font-size: clamp(24px, 3.4vw, 40px); }
.mini-card.size-huge .mini-value { font-size: clamp(28px, 4vw, 48px); }
.mini-card.clock.size-compact { min-height: 78px; }
.mini-card.clock.size-wide { min-height: 120px; }
.mini-card.clock.size-huge { min-height: 160px; grid-column: 1 / -1; grid-row: span 2; }
.mini-card.clock.size-compact { grid-column: span 1; }
.mini-card.clock.size-compact .mini-value { font-size: clamp(18px, 2.4vw, 28px); }
.mini-card.clock.size-wide .mini-value { font-size: clamp(27px, 3.8vw, 44px); }
.mini-card.clock.size-huge .mini-value { font-size: clamp(32px, 5vw, 58px); }
.mini-card.news.size-compact { min-height: 80px; }
.mini-card.news.size-wide { min-height: 120px; }
.mini-card.news.size-huge { min-height: 180px; grid-row: span 2; }
.mini-card.news.size-compact li { font-size: 9px; }
.mini-card.news.size-huge li { font-size: 13px; }
.mini-card.size-wide:not(.clock):not(.news) { grid-column: span 2; }
.mini-card.size-huge:not(.clock):not(.news) { grid-column: span 2; grid-row: span 2; }
.mini-card.youtube .play { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--cyan); }
.preview-note { margin: 13px 2px 0; }

.signage-view { height: 100vh; min-height: 0; overflow: auto; padding: clamp(18px, 3vw, 54px); background: var(--bg); }
.signage-grid { --cols: 4; max-width: 2200px; height: auto; min-height: calc(100vh - clamp(36px, 6vw, 108px)); margin: 0 auto; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(205px, auto); gap: clamp(9px, 1vw, 17px); }
.signage-grid.is-dense { height: auto; min-height: calc(100vh - clamp(36px, 6vw, 108px)); grid-auto-rows: minmax(190px, auto); }
.signage-grid.is-dense .signage-card { min-height: 190px; }
.signage-grid.is-dense .signage-card.calendar { min-height: 240px; }
.signage-card { min-width: 0; min-height: 0; overflow: hidden; border: 1px solid rgba(69, 132, 157, .78); border-radius: 15px; padding: clamp(15px, 1.8vw, 31px); background: #0e151d; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.signage-card.news { grid-column: 1 / -1; }
.signage-card.clock { grid-column: span 2; }
.signage-card.size-wide:not(.clock):not(.news) { grid-column: span 2; }
.signage-card.size-compact { padding: clamp(10px, 1.2vw, 18px); }
.signage-card.size-compact .card-title { margin-bottom: 8px; font-size: clamp(14px, 1.5vw, 22px); }
.signage-card.size-compact .weather-big { font-size: clamp(26px, 3vw, 48px); }
.signage-card.size-compact .stat-value { font-size: clamp(21px, 2.5vw, 46px); }
.signage-card.size-compact .change-up { margin-top: 10px; font-size: clamp(15px, 1.8vw, 30px); }
.signage-card.news.size-compact { min-height: 170px; }
.signage-card.news.size-wide { min-height: 230px; }
.signage-card.news.size-huge { min-height: 330px; grid-row: span 2; }
.signage-card.news.size-compact .news-list a { font-size: clamp(11px, 1.1vw, 18px); }
.signage-card.news.size-huge .news-list a { font-size: clamp(14px, 1.7vw, 28px); }
.signage-card.clock { display: grid; grid-template-columns: 1.2fr 1px 1fr; align-items: center; gap: clamp(20px, 4vw, 70px); min-height: 180px; }
.signage-card.clock.size-compact { min-height: 150px; }
.signage-card.clock.size-wide { min-height: 230px; }
.signage-card.clock.size-huge { min-height: 330px; grid-column: 1 / -1; grid-row: span 2; }
.signage-card.clock.size-compact { grid-column: span 1; }
.signage-card.clock.size-compact { grid-template-columns: 1fr; gap: 12px; }
.signage-card.clock.size-compact .clock-divider { width: 100%; height: 1px; }
.signage-card.clock.size-compact .clock-time { font-size: clamp(48px, 7vw, 110px); }
.signage-card.clock.size-wide .clock-time { font-size: clamp(72px, 11vw, 180px); }
.signage-card.clock.size-huge .clock-time { font-size: clamp(86px, 14vw, 220px); }
.clock-time { font-size: clamp(66px, 10vw, 160px); line-height: .95; letter-spacing: -.09em; font-weight: 700; white-space: nowrap; }
.clock-divider { width: 1px; height: 70%; background: var(--muted); opacity: .6; }
.clock-date { font-size: clamp(25px, 3.3vw, 58px); font-weight: 600; }
.card-meta { color: var(--muted); font-size: clamp(10px, 1vw, 15px); }
.signage-card.weather { border-color: rgba(255,178,29,.78); }
.card-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: clamp(10px, 1.2vw, 20px); font-size: clamp(16px, 2vw, 29px); font-weight: 700; }
.weather-big { display: flex; align-items: center; gap: 13px; color: var(--amber); font-size: clamp(31px, 4vw, 65px); font-weight: 700; }
.weather-icon { font-size: 1.05em; }
.weather-description { color: var(--amber); font-size: clamp(14px, 1.5vw, 23px); }
.weather-attribution { margin-top: 6px; font-size: clamp(9px, .75vw, 12px); }
.stat-value { font-size: clamp(24px, 3.2vw, 58px); font-weight: 700; line-height: 1.1; letter-spacing: -.055em; white-space: nowrap; }
.signage-card.crypto .stat-value { font-size: clamp(22px, 2.5vw, 44px); }
.change-up { display: inline-block; margin-top: 19px; color: var(--green); font-size: clamp(18px, 2.3vw, 39px); font-weight: 600; }
.sparkline { width: 100%; height: 35px; margin-top: 12px; opacity: .9; }
.signage-card.news { padding-top: clamp(13px, 1.4vw, 24px); }
.news-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.news-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(11px, 1.6vw, 26px); align-items: center; padding: clamp(8px, .85vw, 14px) 0; border-top: 1px solid rgba(255,255,255,.14); }
.news-list a { overflow: hidden; color: var(--text); text-decoration: none; text-overflow: ellipsis; white-space: nowrap; font-size: clamp(12px, 1.35vw, 23px); }
.news-list a:hover { color: var(--cyan-soft); }
.news-time { color: var(--cyan); font-size: clamp(11px, 1vw, 16px); }
.news-source { color: var(--muted); font-size: clamp(10px, .9vw, 14px); }
.youtube-frame { display: grid; place-items: center; height: calc(100% - 42px); min-height: 105px; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--muted); background: #06080b; }
.youtube-frame iframe { width: 100%; height: 100%; min-height: 105px; border: 0; border-radius: 7px; }
.youtube-empty { text-align: center; font-size: 13px; }
.exit-signage { position: fixed; right: 20px; bottom: 18px; opacity: .18; border: 1px solid var(--border-strong); border-radius: 7px; padding: 8px 11px; color: var(--text); background: rgba(7,11,17,.85); transition: opacity .2s; }
.exit-signage:hover, .exit-signage:focus-visible { opacity: 1; }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 5; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: 7px; color: var(--text); background: var(--surface-raised); box-shadow: var(--shadow); font-size: 12px; transition: opacity .2s, transform .2s; }
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
.is-error { color: var(--red) !important; }

@media (max-width: 1000px) {
  .setup-view { width: min(720px, 90vw); grid-template-columns: 1fr; padding-top: 48px; }
  .preview-column { order: -1; }
  .intro-block { margin-bottom: 38px; }
  .signage-grid { --cols: 2; }
}
@media (max-width: 620px) {
  .topbar { height: 68px; padding: 0 5vw; }
  .brand-logo { width: min(210px, 62vw); max-height: 48px; }
  .topbar-status { display: none; }
  .setup-view { width: 90vw; padding: 37px 0 36px; }
  h1 { font-size: 35px; }
  .widget-main { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; }
  .widget-settings, .row-tools { grid-column: 2 / -1; }
  .widget-settings { flex-wrap: wrap; }
  .row-tools { justify-content: flex-end; }
  .row-expand { padding-left: 14px; }
  .field-grid, .field-grid.youtube-fields { grid-template-columns: 1fr 1fr; }
  .field-grid .field:first-child { grid-column: 1 / -1; }
  .setup-actions { grid-template-columns: 1fr; }
  .button { width: 100%; }
  .signage-view { height: auto; min-height: 100vh; overflow: visible; padding: 9px; }
  .signage-grid { --cols: 1; height: auto; min-height: calc(100vh - 18px); grid-auto-rows: auto; }
  .signage-card { min-height: 165px; }
  .signage-card.clock { grid-column: auto; grid-row: auto; }
  .signage-card.clock { grid-template-columns: 1fr; gap: 12px; min-height: 210px; }
  .clock-time { font-size: clamp(56px, 18vw, 100px); }
  .clock-divider { width: 100%; height: 1px; }
  .clock-date { font-size: 24px; }
  .signage-card.size-wide:not(.clock):not(.news) { grid-column: auto; }
  .news-list li { grid-template-columns: auto minmax(0, 1fr); }
  .news-source { display: none; }
  .news-list a { white-space: normal; }
  .exit-signage { right: 10px; bottom: 10px; }
  .exit-signage span { display: none; }
}

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

/* UX refresh: a guided setup flow with a persistent preview */
.setup-view { width: min(1480px, calc(100vw - 80px)); grid-template-columns: minmax(0, 1fr) minmax(420px, .78fr); gap: clamp(34px, 5vw, 78px); padding: 56px 0 72px; align-items: start; }
.setup-column { min-width: 0; }
.intro-block { margin-bottom: 26px; }
.intro-block h1 { margin-bottom: 14px; font-size: clamp(38px, 4.2vw, 64px); }
.intro-copy { max-width: 660px; font-size: 15px; }
.setup-progress { display: flex; align-items: center; gap: 10px; margin: 0 0 22px; color: var(--muted); }
.progress-step { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; }
.progress-step span { display: grid; place-items: center; width: 25px; height: 25px; border: 1px solid var(--border-strong); border-radius: 50%; color: var(--muted-strong); font-size: 11px; font-weight: 700; }
.progress-step strong { font-weight: 600; }
.progress-step.is-current { color: var(--text); }
.progress-step.is-current span { border-color: var(--cyan); color: #03141a; background: var(--cyan); }
.progress-line { flex: 1 1 30px; max-width: 80px; height: 1px; background: var(--border); }
.workflow-section { margin-top: 14px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: 0 12px 30px rgba(0,0,0,.06); }
.workflow-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.workflow-title { display: flex; align-items: flex-start; gap: 13px; min-width: 0; }
.step-number { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; color: #03141a; background: var(--cyan); font-size: 15px; font-weight: 800; }
.workflow-title .section-kicker { margin-bottom: 4px; }
.workflow-title h2 { font-size: 22px; }
.workflow-help { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.count-label { align-items: center; padding-top: 6px; }
.add-widget-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 14px; padding: 12px 14px; border: 1px dashed var(--border-strong); border-radius: 11px; background: var(--bg-soft); }
.add-widget-bar > div:first-child { display: grid; gap: 2px; }
.add-widget-bar strong { font-size: 13px; }
.add-widget-bar span { color: var(--muted); font-size: 11px; }
.add-widget-controls { display: flex; align-items: center; gap: 8px; min-width: min(320px, 45%); }
.add-widget-controls select { min-width: 0; flex: 1; }
.widget-list { gap: 8px; }
.widget-row { border-radius: 12px; background: var(--bg-soft); }
.widget-row.is-enabled { background: linear-gradient(90deg, rgba(20,184,243,.09), var(--bg-soft) 42%); }
.widget-main { min-height: 70px; grid-template-columns: 24px 30px minmax(100px, 1fr) auto auto auto; gap: 11px; padding: 11px 12px; }
.widget-label { font-size: 13px; }
.phase2-toolbar { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); align-items: end; gap: 12px; margin: 0; padding: 0; border: 0; background: transparent; }
.phase2-toolbar .toolbar-check { min-height: 34px; padding: 0 2px; }
.toolbar-button { white-space: nowrap; }
.start-section { padding-bottom: 18px; }
.secondary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.toolbar-button-danger { color: var(--red); }
.toolbar-button-danger:hover { color: var(--red); border-color: var(--red); background: rgba(255,107,107,.08); }
.setup-actions { display: block; margin-top: 0; }
.setup-actions .button-primary { width: 100%; min-height: 58px; }
.setup-notes { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.setup-notes .privacy-note, .setup-notes .contact-note { margin-bottom: 0; }
.preview-column { min-width: 0; align-self: start; }
.preview-sticky { position: sticky; top: 24px; padding: 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 44px rgba(0,0,0,.1); }
.preview-heading { margin-bottom: 5px; }
.preview-heading .section-kicker { margin-bottom: 4px; }
.preview-helper { margin: 0 0 14px; color: var(--muted); font-size: 12px; }
.preview-grid { min-height: 360px; padding: 10px; border-color: var(--border); background: var(--bg-soft); box-shadow: none; }
.preview-note { margin: 12px 2px 0; line-height: 1.6; }
:root[data-theme="light"] .workflow-section, :root[data-theme="light"] .preview-sticky { box-shadow: 0 14px 34px rgba(37,65,83,.08); }
:root[data-theme="light"] .workflow-section { background: #fff; }
:root[data-theme="light"] .widget-row { background: #f7fafc; }
:root[data-theme="light"] .widget-row.is-enabled { background: linear-gradient(90deg, rgba(20,139,195,.09), #fff 42%); }
:root[data-theme="light"] .add-widget-bar { background: #f7fafc; }

@media (max-width: 1000px) {
  .setup-view { width: min(760px, calc(100vw - 48px)); grid-template-columns: 1fr; padding-top: 40px; }
  .preview-column { order: -1; }
  .preview-sticky { position: static; }
  .preview-grid { min-height: 260px; }
}

@media (max-width: 620px) {
  .setup-view { width: calc(100vw - 28px); padding: 30px 0 48px; }
  .intro-block h1 { font-size: 34px; }
  .intro-copy { font-size: 14px; }
  .setup-progress { gap: 6px; }
  .progress-step { gap: 5px; font-size: 10px; }
  .progress-step span { width: 22px; height: 22px; }
  .progress-line { max-width: 24px; }
  .workflow-section, .preview-sticky { padding: 15px; border-radius: 13px; }
  .workflow-heading { display: block; }
  .workflow-heading .count-label { justify-content: flex-start; padding: 12px 0 0 43px; }
  .workflow-help { line-height: 1.5; }
  .add-widget-bar { display: grid; gap: 10px; }
  .add-widget-controls { width: 100%; min-width: 0; }
  .phase2-toolbar { grid-template-columns: 1fr 1fr; gap: 9px; }
  .secondary-actions > * { flex: 1 1 calc(50% - 8px); }
  .widget-main { grid-template-columns: 24px 30px minmax(0, 1fr) auto; gap: 8px; }
  .widget-settings, .row-tools { grid-column: 3 / -1; }
  .setup-notes { display: grid; }
  .preview-grid { min-height: 220px; }
  #preview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #signage-grid { grid-template-columns: 1fr !important; }
}

/* Collapsible widget settings */
.widget-main { grid-template-columns: 24px 30px minmax(0, 1fr) auto auto; }
.widget-details { border-top: 1px solid var(--border); }
.widget-details summary { display: flex; align-items: center; justify-content: flex-end; gap: 7px; min-height: 30px; padding: 6px 13px; color: var(--muted); cursor: pointer; font-size: 11px; list-style: none; }
.widget-details summary::-webkit-details-marker { display: none; }
.widget-details summary::after { content: "⌄"; color: var(--cyan); font-size: 14px; line-height: 1; transform: translateY(-1px); transition: transform .2s; }
.widget-details[open] summary { color: var(--text); background: rgba(20,184,243,.05); }
.widget-details[open] summary::after { transform: rotate(180deg); }
.widget-details > .row-expand { border-top: 0; padding: 12px 14px 15px 60px; }
:root[data-theme="light"] .widget-details { border-top-color: var(--border); }
:root[data-theme="light"] .widget-details[open] summary { background: rgba(20,139,195,.06); }

/* Compact settings header and focused widget list */
.setup-screen-header { position: sticky; top: 12px; z-index: 5; display: flex; align-items: center; gap: 14px; min-height: 58px; margin-bottom: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 10px 26px rgba(0,0,0,.08); backdrop-filter: blur(14px); }
.setup-screen-header .section-kicker { display: none; }
.setup-screen-header h1 { font-size: 22px; letter-spacing: -.055em; }
.setup-header-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto; }
.setup-header-title h1 { flex: 0 1 auto; white-space: nowrap; }
.setup-header-title .count-label { padding-top: 0; justify-content: flex-start; white-space: nowrap; }
.setup-header-title #capacity-status { color: var(--muted); font-size: 10px; }
.setup-header-title #capacity-status.capacity-warning { color: var(--red); }
.setup-header-start { min-height: 38px; margin-left: auto; padding: 0 14px; font-size: 12px; }
.screen-back { min-height: 32px; padding-inline: 9px; border-color: transparent; }
.screen-back:hover { border-color: var(--border-strong); }
.widget-section .workflow-heading { align-items: center; margin-bottom: 12px; }
.widget-section .workflow-title { gap: 0; }
.workflow-title h2 { font-size: 19px; }
.widget-section .section-kicker, .appearance-section .section-kicker, .start-section .section-kicker { display: none; }
.add-widget-bar { min-height: 49px; padding: 7px 9px; border-style: solid; }
.add-widget-bar > .add-widget-controls { display: flex; }
.add-widget-controls { width: 100%; min-width: 0; }
.add-widget-controls select { max-width: 260px; }
.disabled-widget-group { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-soft) 72%, transparent); }
.disabled-widget-group > summary, .more-settings > summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 12px; color: var(--muted-strong); cursor: pointer; font-size: 12px; list-style: none; }
.disabled-widget-group > summary::-webkit-details-marker, .more-settings > summary::-webkit-details-marker { display: none; }
.disabled-widget-group > summary::after, .more-settings > summary::after { content: "⌄"; color: var(--cyan); font-size: 15px; transition: transform .2s; }
.disabled-widget-group[open] > summary::after, .more-settings[open] > summary::after { transform: rotate(180deg); }
.disabled-widget-group > summary span { margin-left: auto; margin-right: 9px; color: var(--muted); }
.disabled-widget-list { display: grid; gap: 8px; padding: 0 8px 8px; }
.disabled-widget-list .widget-row { opacity: .78; }
.appearance-section, .start-section { padding: 16px 18px; }
.appearance-section .workflow-heading, .start-section .workflow-heading { margin-bottom: 10px; }
.more-settings { border-top: 1px solid var(--border); }
.more-settings > summary { padding-inline: 0; }
.more-settings[open] > summary { color: var(--text); }
.more-settings .secondary-actions { padding-top: 4px; }
.setup-notes { margin-top: 10px; }

@media (max-width: 620px) {
  .setup-screen-header { top: 8px; gap: 8px; min-height: 54px; padding: 7px 8px; }
  .setup-screen-header h1 { font-size: 18px; }
  .setup-header-title { display: grid; gap: 0; }
  .setup-header-title h1 { white-space: normal; }
  .setup-header-title .count-label { font-size: 10px; }
  .setup-header-start { min-height: 36px; padding-inline: 11px; }
  .setup-header-start span { display: none; }
  .add-widget-controls select { max-width: none; }
  .disabled-widget-list { padding-inline: 6px; }
  .setup-column { order: 0; }
  .preview-column { order: 1; }
}

@media (max-width: 620px) {
  .widget-details summary { justify-content: flex-start; padding-left: 63px; }
  .widget-details > .row-expand { padding-left: 14px; }
}

/* Separate explanation screen */
.intro-view { width: min(1240px, calc(100vw - 80px)); min-height: calc(100vh - 84px); margin: 0 auto; padding: clamp(52px, 8vw, 110px) 0 54px; }
.intro-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .8fr); align-items: center; gap: clamp(44px, 8vw, 120px); }
.intro-hero-copy h1 { margin: 0 0 20px; font-size: clamp(42px, 5vw, 72px); line-height: 1.12; letter-spacing: -.07em; }
.intro-hero-copy > p:not(.section-kicker) { max-width: 560px; margin: 0 0 28px; color: var(--muted-strong); font-size: 16px; line-height: 1.8; }
.intro-hero-copy .button-primary { min-width: 220px; }
.intro-hero-preview { min-height: 350px; padding: clamp(24px, 3vw, 40px); border: 1px solid rgba(91,211,255,.24); border-radius: 24px; color: #f4f7fb; background: radial-gradient(circle at 80% 15%, rgba(20,184,243,.22), transparent 45%), #07121c; box-shadow: 0 22px 60px rgba(0,0,0,.2); }
.intro-preview-clock { font-size: clamp(56px, 7vw, 100px); font-weight: 700; letter-spacing: -.08em; line-height: .95; }
.intro-preview-meta { margin-top: 14px; color: #a8bac8; font-size: 15px; }
.intro-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 54px; }
.intro-preview-grid span { display: grid; gap: 9px; min-height: 84px; padding: 13px; border: 1px solid rgba(160,210,229,.2); border-radius: 11px; color: var(--cyan-soft); font-size: 25px; background: rgba(255,255,255,.04); }
.intro-preview-grid strong { color: #f4f7fb; font-size: 13px; font-weight: 600; }
.intro-guide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(54px, 8vw, 100px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.intro-guide-item { display: flex; gap: 14px; min-height: 130px; padding: 25px 24px; border-right: 1px solid var(--border); }
.intro-guide-item:last-child { border-right: 0; }
.intro-guide-item > span { display: grid; place-items: center; width: 27px; height: 27px; flex: 0 0 auto; border-radius: 50%; color: #03141a; background: var(--cyan); font-size: 12px; font-weight: 800; }
.intro-guide-item h2 { margin: 0 0 8px; font-size: 15px; }
.intro-guide-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.intro-contact { margin: 20px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.intro-contact a { color: var(--cyan); text-underline-offset: 3px; }
.setup-view { padding-top: 30px; }
.setup-screen-header { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.setup-screen-header .section-kicker { margin-bottom: 3px; }
.setup-screen-header h1 { margin: 0; font-size: clamp(26px, 3vw, 38px); letter-spacing: -.06em; }
.screen-back { min-height: 34px; border: 1px solid var(--border-strong); border-radius: 8px; padding: 0 11px; color: var(--muted-strong); background: transparent; font-size: 11px; white-space: nowrap; }
.screen-back:hover { color: var(--text); border-color: var(--cyan); background: var(--surface-hover); }
:root[data-theme="light"] .intro-guide { border-color: var(--border); }
:root[data-theme="light"] .intro-guide-item { border-color: var(--border); }

@media (max-width: 1000px) {
  .intro-view { width: min(760px, calc(100vw - 48px)); padding-top: 48px; }
  .intro-hero { grid-template-columns: 1fr; gap: 34px; }
  .intro-hero-preview { min-height: 280px; }
}

@media (max-width: 620px) {
  .intro-view { width: calc(100vw - 28px); padding: 38px 0 42px; }
  .intro-hero-copy h1 { font-size: 38px; }
  .intro-hero-copy > p:not(.section-kicker) { font-size: 14px; }
  .intro-hero-preview { min-height: 240px; padding: 22px; border-radius: 17px; }
  .intro-preview-clock { font-size: 55px; }
  .intro-preview-grid { margin-top: 34px; }
  .intro-preview-grid span { min-height: 68px; padding: 9px; font-size: 19px; }
  .intro-preview-grid strong { font-size: 10px; }
  .intro-guide { grid-template-columns: 1fr; margin-top: 44px; }
  .intro-guide-item { min-height: auto; padding: 18px 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .intro-guide-item:last-child { border-bottom: 0; }
  .setup-screen-header { align-items: flex-start; gap: 10px; }
  .setup-screen-header { flex-wrap: wrap; }
}

/* Phase 2 controls and widget variants */
:root[data-theme="light"] { --bg: #edf2f6; --bg-soft: #f7f9fb; --surface: #ffffff; --surface-raised: #f7fafc; --surface-hover: #eef6fa; --border: #c7d4de; --border-strong: #9fb3c1; --text: #10202d; --muted: #617180; --muted-strong: #3d5262; --cyan: #078bc3; --cyan-soft: #0579aa; --amber: #c77b00; --green: #168b4c; --shadow: 0 18px 48px rgba(37,65,83,.12); }
:root[data-theme="light"] .app-shell { background: radial-gradient(circle at 100% 0, rgba(20,184,243,.1), transparent 32rem), var(--bg); }
:root[data-theme="light"] .topbar { background: #07121c; border-bottom-color: rgba(91,211,255,.42); }
:root[data-theme="light"] .widget-row { background: rgba(255,255,255,.84); }
:root[data-theme="light"] .widget-row.is-enabled { background: linear-gradient(90deg, rgba(20,139,195,.1), rgba(255,255,255,.96) 35%); }
:root[data-theme="light"] .row-expand { border-top-color: rgba(16,32,45,.1); background: rgba(237,242,246,.72); }
:root[data-theme="light"] .signage-card, :root[data-theme="light"] .mini-card { background: var(--surface); }
:root[data-theme="light"] .preview-grid { border-color: var(--border); background: var(--bg-soft); }
:root[data-theme="light"] .youtube-frame { background: #e5ebef; }
:root[data-theme="light"] .phase2-toolbar { border-color: var(--border); background: rgba(255,255,255,.72); }
:root[data-theme="light"] .exit-signage { color: var(--text); background: rgba(255,255,255,.86); border-color: rgba(16,32,45,.2); opacity: .66; }
:root[data-theme="light"] .exit-signage:hover, :root[data-theme="light"] .exit-signage:focus-visible { opacity: .96; border-color: var(--border-strong); }
:root[data-gap="tight"] .signage-grid { gap: 7px; }
:root[data-gap="relaxed"] .signage-grid { gap: 22px; }
:root[data-radius="sharp"] .signage-card, :root[data-radius="sharp"] .widget-row { border-radius: 5px; }
:root[data-radius="round"] .signage-card, :root[data-radius="round"] .widget-row { border-radius: 22px; }
:root[data-borders="off"] .signage-card { border-color: transparent; box-shadow: none; }
.phase2-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 9px; margin: -3px 0 12px; padding: 10px; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(16,24,33,.45); }
.toolbar-group { display: grid; gap: 4px; }
.toolbar-group label, .toolbar-check, .add-widget-bar > label { color: var(--muted); font-size: 11px; }
.toolbar-check { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 4px; white-space: nowrap; }
.toolbar-button { min-height: 34px; border: 1px solid var(--border-strong); border-radius: 7px; padding: 0 10px; color: var(--muted-strong); background: transparent; font-size: 11px; font-weight: 600; }
.toolbar-button:hover { color: var(--text); background: var(--surface-hover); }
.toolbar-button-accent { border-color: var(--cyan); color: var(--cyan-soft); }
.phase2-toolbar select, .add-widget-bar select { min-height: 34px; width: auto; min-width: 82px; }
.add-widget-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; padding: 9px 10px; border: 1px dashed var(--border); border-radius: 8px; }
.add-widget-bar select { flex: 1; }
.drag-handle { color: var(--muted); cursor: grab; font-size: 16px; }
.widget-main { grid-template-columns: 18px 32px minmax(95px, 1fr) auto auto auto; }
.widget-row.is-dragging { opacity: .5; }
textarea { width: 100%; resize: vertical; border: 1px solid var(--border-strong); border-radius: 7px; padding: 7px 9px; color: var(--text); background: var(--surface); font: inherit; font-size: 12px; }
.field-wide { grid-column: 1 / -1; }
.inline-field { display: flex; gap: 7px; }
.inline-field input { flex: 1; min-width: 0; }
.weather-result { grid-column: 1 / -1; }
.advanced-location { grid-column: 1 / -1; color: var(--muted); font-size: 11px; }
.advanced-location summary { cursor: pointer; padding: 6px 0; }
.advanced-location .field-grid { padding-top: 5px; }
.zone-settings { flex-wrap: wrap; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 4px; text-align: center; font-size: clamp(12px, 1.3vw, 21px); }
.calendar-grid span { min-height: 1.35em; color: var(--muted-strong); }
.calendar-week { margin-bottom: 8px; color: var(--cyan); font-size: clamp(10px, 1vw, 15px); }
.calendar-grid .today { display: grid; place-items: center; border-radius: 50%; color: #001018; background: var(--cyan); }
.worldclock-list { display: grid; gap: 10px; }
.worldclock-list div { display: flex; justify-content: space-between; gap: 14px; padding-bottom: 7px; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--muted-strong); font-size: clamp(14px, 1.5vw, 24px); }
.worldclock-list strong { color: var(--text); font-size: clamp(20px, 2.2vw, 34px); }
.timer-value { margin: 15px 0 18px; color: var(--text); font-size: clamp(34px, 4vw, 70px); font-weight: 700; letter-spacing: -.06em; text-align: center; }
.timer-controls { display: flex; justify-content: center; gap: 7px; }
.timer-controls button { width: 34px; height: 30px; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text); background: transparent; }
.timer-controls button:hover { border-color: var(--cyan); color: var(--cyan); }
.signage-card.size-huge:not(.clock):not(.news) { grid-column: span 2; grid-row: span 2; }
.news-list { max-height: 100%; overflow: auto; }
.news-list.auto-scroll { overflow: visible; animation-name: news-scroll; animation-duration: 28s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate; }
.news-list.auto-scroll.speed-slow { animation-duration: 46s; }
.news-list.auto-scroll.speed-fast { animation-duration: 15s; }
@keyframes news-scroll { from { transform: translateY(0); } to { transform: translateY(-18%); } }
.exit-signage { right: 15px; bottom: 12px; opacity: .3; border-color: transparent; padding: 5px 7px; font-size: 10px; }
.exit-signage:hover, .exit-signage:focus-visible { opacity: .85; border-color: var(--border-strong); }
.exit-signage span { display: inline; }
.setup-side-controls { display: grid; gap: 14px; margin-top: 14px; }
.setup-side-controls .workflow-section { margin-top: 0; }
.site-ad { width: min(1480px, calc(100vw - 80px)); min-height: 90px; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; padding: 10px; border-top: 1px solid var(--border); color: var(--muted); overflow: hidden; }
.app-shell { padding-bottom: 52px; }
.preview-sticky { position: static !important; top: auto; }
.site-footer { position: fixed; inset: auto 0 0; z-index: 10; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 16px; border-top: 1px solid rgba(91,211,255,.34); color: #b7c8d4; background: #07121c; font-size: 12px; }
.site-footer a { color: var(--cyan-soft); text-underline-offset: 3px; }
.site-footer a:hover { color: #fff; }
.toast { z-index: 15; }

/* Final compact-settings overrides (keep the utility header single-line) */
.setup-screen-header { position: sticky; top: 12px; z-index: 5; min-height: 58px; margin-bottom: 14px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 10px 26px rgba(0,0,0,.08); backdrop-filter: blur(14px); }
.setup-screen-header .section-kicker { display: none; }
.setup-screen-header h1 { margin: 0; font-size: 22px; line-height: 1.2; letter-spacing: -.055em; white-space: nowrap; }
.setup-header-title { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto; }
.setup-header-title .count-label { padding-top: 0; justify-content: flex-start; white-space: nowrap; }
.setup-header-title #capacity-status { color: var(--muted); font-size: 10px; }
.setup-header-title #capacity-status.capacity-warning { color: var(--red); }
.setup-header-start { min-height: 38px; margin-left: auto; padding: 0 14px; font-size: 12px; }
.screen-back { min-height: 32px; padding-inline: 9px; border-color: transparent; }
.screen-back:hover { border-color: var(--border-strong); }
.widget-section .workflow-heading { align-items: center; margin-bottom: 12px; }
.widget-section .workflow-title { gap: 0; }
.widget-section .section-kicker, .appearance-section .section-kicker, .start-section .section-kicker { display: none; }
.widget-section .workflow-title h2, .appearance-section .workflow-title h2, .start-section .workflow-title h2 { font-size: 19px; }
.add-widget-bar { min-height: 49px; padding: 7px 9px; border-style: solid; }
.add-widget-bar > div.add-widget-controls:first-child { display: flex; }
.add-widget-controls { width: 100%; min-width: 0; }
.add-widget-controls select { max-width: 260px; }
.disabled-widget-group { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: color-mix(in srgb, var(--bg-soft) 72%, transparent); }
.disabled-widget-group > summary, .more-settings > summary { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 12px; color: var(--muted-strong); cursor: pointer; font-size: 12px; list-style: none; }
.disabled-widget-group > summary::-webkit-details-marker, .more-settings > summary::-webkit-details-marker { display: none; }
.disabled-widget-group > summary::after, .more-settings > summary::after { content: "⌄"; color: var(--cyan); font-size: 15px; transition: transform .2s; }
.disabled-widget-group[open] > summary::after, .more-settings[open] > summary::after { transform: rotate(180deg); }
.disabled-widget-group > summary span { margin-left: auto; margin-right: 9px; color: var(--muted); }
.disabled-widget-list { display: grid; gap: 8px; padding: 0 8px 8px; }
.disabled-widget-list .widget-row { opacity: .78; }
.appearance-section, .start-section { padding: 16px 18px; }
.appearance-section .workflow-heading, .start-section .workflow-heading { margin-bottom: 10px; }
.more-settings { border-top: 1px solid var(--border); }
.more-settings > summary { padding-inline: 0; }
.more-settings[open] > summary { color: var(--text); }
.more-settings .secondary-actions { padding-top: 4px; }
.setup-notes { margin-top: 10px; }

@media (max-width: 620px) {
  .setup-screen-header { top: 8px; gap: 8px; min-height: 54px; padding: 7px 8px; }
  .setup-screen-header h1 { font-size: 18px; white-space: normal; }
  .setup-header-title { display: grid; gap: 0; }
  .setup-header-title .count-label { font-size: 10px; }
  .setup-header-start { min-height: 36px; padding-inline: 11px; }
  .setup-header-start span { display: none; }
  .add-widget-controls select { max-width: none; }
  .disabled-widget-list { padding-inline: 6px; }
  .site-ad { width: calc(100vw - 28px); min-height: 76px; }
  .site-footer { min-height: 42px; font-size: 11px; }
}

/* Contact is a normal bottom footer, not a viewport-fixed control. */
.app-shell { padding-bottom: 0; }
.site-footer { position: static; inset: auto; width: 100%; }
.intro-hero-copy h1 { font-size: clamp(34px, 3.6vw, 54px); }
.headline-chunk { display: inline-block; white-space: nowrap; }

@media (max-width: 620px) {
  .phase2-toolbar { align-items: stretch; }
  .toolbar-button { flex: 1; }
  .add-widget-bar { flex-wrap: wrap; }
  .add-widget-bar > label { width: 100%; }
  .widget-main { grid-template-columns: 14px 30px minmax(0, 1fr) auto; }
.widget-settings, .row-tools { grid-column: 3 / -1; }
  .signage-card.size-huge:not(.clock):not(.news) { grid-column: auto; grid-row: auto; }
}

.site-ad { display: block; }
.site-ad-grid { width: min(100%, 1040px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; margin: 0 auto; }
.site-ad-slot { min-width: 0; min-height: 90px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.site-ad-slot > script { max-width: 100%; }
.signage-card.clock { container-type: size; }
.signage-card.clock:not(.size-compact) { grid-template-columns: minmax(0, 1.2fr) 1px minmax(0, 1fr); }
.signage-card.clock .clock-info { min-width: 0; overflow: hidden; }
.signage-card.clock .clock-time { min-width: 0; overflow: hidden; font-size: clamp(42px, 9cqw, 150px); }
.signage-card.clock.size-wide .clock-time { font-size: clamp(48px, 11cqw, 180px); }
.signage-card.clock.size-huge .clock-time { font-size: clamp(56px, 13cqw, 220px); }
.signage-card.clock .clock-time { text-align: center; }
.signage-card.clock .clock-info { display: grid; align-content: center; justify-items: center; text-align: center; }
.mini-card.clock { grid-column: span 1; }
.mini-card.clock.size-wide { grid-column: span 2; }
.mini-card.clock.size-huge { grid-column: 1 / -1; grid-row: span 2; }
.signage-card.clock { grid-column: span 1; }
.signage-card.clock.size-wide { grid-column: span 2; }
.signage-card.clock.size-huge { grid-column: 1 / -1; grid-row: span 2; }
.signage-card.clock .clock-date { min-width: 0; overflow: hidden; font-size: clamp(20px, 2.7cqw, 42px); line-height: 1.25; white-space: nowrap; }
.signage-card.clock .card-meta[data-clock-meta] { min-width: 0; overflow: hidden; font-size: clamp(9px, 1.2cqw, 14px); line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.signage-card.clock .clock-time { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.signage-grid.is-single { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.signage-grid.is-single { align-content: center; }
.signage-grid.is-single > .signage-card.clock {
  align-self: center;
  grid-column: auto;
  grid-row: auto;
  width: min(50%, 1100px);
  min-width: 420px;
  min-height: 0;
  height: 230px;
}
.signage-grid.is-single > .signage-card.clock.size-compact { width: min(39%, 720px); height: 150px; }
.signage-grid.is-single > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) { width: min(44%, 900px); height: 190px; }
.signage-grid.is-single > .signage-card.clock.size-huge { width: 100%; height: min(62vh, 520px); }

/* A single-cell clock is one visual unit: keep its information stacked and centered. */
.signage-card.clock:not(.size-huge) {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.signage-card.clock:not(.size-huge) .clock-divider { display: none; }
.signage-card.clock:not(.size-huge) .clock-info { width: 100%; }
.signage-card.clock:not(.size-huge) .clock-date,
.signage-card.clock:not(.size-huge) .card-meta[data-clock-meta] { text-align: center; }
.signage-card.clock.size-compact .clock-time { font-size: clamp(34px, 7cqw, 110px); }

/* Compact widgets should occupy a compact card inside a multi-widget row. */
.signage-grid:not(.is-single) > .signage-card.clock.size-compact {
  align-self: start;
  min-height: 0;
  height: clamp(130px, 22vh, 200px);
}

@media (max-width: 620px) {
  .site-ad-grid { grid-template-columns: 1fr; gap: 10px; }
  .signage-card.clock .clock-time { font-size: clamp(48px, 14cqw, 100px); }
  .signage-card.clock.size-compact .clock-time { font-size: clamp(34px, 9cqw, 72px); }
  .signage-card.clock.size-wide,
  .signage-card.clock.size-huge { grid-column: auto; grid-row: auto; }
  .signage-grid.is-single > .signage-card.clock { width: 100%; min-width: 0; height: 210px; }
  .signage-grid.is-single > .signage-card.clock.size-compact { height: 140px; }
  .signage-grid.is-single > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) { height: 175px; }
  .signage-grid.is-single > .signage-card.clock.size-huge { height: 360px; }
  .signage-grid:not(.is-single) > .signage-card.clock.size-compact { height: 130px; }
}

/* Clock typography follows the actual card footprint. The size control changes the frame; the frame scales its contents. */
.signage-card.clock .clock-time,
.signage-card.clock.size-compact .clock-time,
.signage-card.clock.size-wide .clock-time,
.signage-card.clock.size-huge .clock-time {
  width: 100%;
  overflow: hidden;
  font-size: clamp(40px, 11cqw, 150px);
}
.signage-card.clock .clock-date { font-size: clamp(20px, 3cqw, 42px); }
.signage-card.clock .card-meta[data-clock-meta] { font-size: clamp(9px, 1.3cqw, 14px); }

/* Do not let the grid row stretch a clock frame far beyond its content. */
.signage-grid > .signage-card.clock {
  align-self: start;
  height: fit-content;
  min-height: 0;
}
.signage-grid.is-single > .signage-card.clock { align-self: center; }

/* Stable clock presets: frame, typography, and supporting text scale together without cyclic sizing. */
.signage-card.clock { container-type: inline-size; }
.signage-grid > .signage-card.clock { height: 210px; }
.signage-grid > .signage-card.clock.size-compact { height: 160px; }
.signage-grid > .signage-card.clock.size-wide { height: 250px; }
.signage-grid > .signage-card.clock.size-huge { height: 360px; }
.signage-card.clock .clock-time,
.signage-card.clock.size-compact .clock-time,
.signage-card.clock.size-wide .clock-time,
.signage-card.clock.size-huge .clock-time {
  width: 100%;
  overflow: hidden;
  text-overflow: clip;
}
.signage-card.clock.size-compact .clock-time { font-size: clamp(40px, 11cqw, 52px); }
.signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .clock-time { font-size: clamp(54px, 11cqw, 78px); }
.signage-card.clock.size-wide .clock-time { font-size: clamp(70px, 11cqw, 110px); }
.signage-card.clock.size-huge .clock-time { font-size: clamp(86px, 11cqw, 150px); }
.signage-card.clock.size-compact .clock-date { font-size: 20px; }
.signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .clock-date { font-size: 24px; }
.signage-card.clock.size-wide .clock-date { font-size: 28px; }
.signage-card.clock.size-huge .clock-date { font-size: 34px; }
.signage-card.clock.size-compact .card-meta[data-clock-meta] { font-size: 9px; }
.signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .card-meta[data-clock-meta] { font-size: 10px; }
.signage-card.clock.size-wide .card-meta[data-clock-meta] { font-size: 12px; }
.signage-card.clock.size-huge .card-meta[data-clock-meta] { font-size: 13px; }

@media (max-width: 620px) {
  .signage-grid > .signage-card.clock { height: 190px; }
  .signage-grid > .signage-card.clock.size-compact { height: 140px; }
  .signage-grid > .signage-card.clock.size-wide { height: 220px; }
  .signage-grid > .signage-card.clock.size-huge { height: 320px; }
}

/* Keep the frame close to the clock contents at every size. */
.signage-grid > .signage-card.clock { height: 150px; }
.signage-grid > .signage-card.clock.size-compact { height: 130px; }
.signage-grid > .signage-card.clock.size-wide { height: 200px; }
.signage-grid > .signage-card.clock.size-huge { height: 260px; }
.signage-grid.is-single > .signage-card.clock { height: 170px; }
.signage-grid.is-single > .signage-card.clock.size-compact { height: 140px; }
.signage-grid.is-single > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) { height: 170px; }
.signage-grid.is-single > .signage-card.clock.size-wide { height: 210px; }
.signage-grid.is-single > .signage-card.clock.size-huge { height: 260px; }
.signage-grid:not(.is-single) > .signage-card.clock.size-compact { height: 130px; }

/* Size controls change horizontal occupancy only. Let each grid row take the
   height its contents need, then stretch cards in that row together. */
.signage-grid,
.signage-grid.is-dense {
  min-height: 0;
  grid-auto-rows: auto;
  align-content: start;
}
.signage-card.size-compact,
.signage-card.size-wide,
.signage-card.size-huge {
  min-height: 0;
}
.signage-card.size-huge:not(.news) { grid-row: auto; }
.signage-card.news.size-huge { grid-row: auto; }
.signage-grid > .signage-card.clock,
.signage-grid > .signage-card.clock.size-compact,
.signage-grid > .signage-card.clock.size-wide,
.signage-grid > .signage-card.clock.size-huge {
  height: auto;
  min-height: 0;
  align-self: stretch;
}
.signage-grid.is-single > .signage-card.clock,
.signage-grid.is-single > .signage-card.clock.size-compact,
.signage-grid.is-single > .signage-card.clock.size-wide,
.signage-grid.is-single > .signage-card.clock.size-huge {
  height: auto;
  min-height: 0;
  align-self: center;
}
.signage-grid:not(.is-single) > .signage-card.clock.size-compact {
  height: auto;
  min-height: 0;
  align-self: stretch;
}

/* Scale the clock contents from the actual frame, not from a fixed preset. */
.signage-grid:not(.is-single) > .signage-card.clock {
  container-type: size;
  padding: clamp(12px, 1vw, 20px);
}
.signage-grid:not(.is-single) > .signage-card.clock .clock-time,
.signage-grid.is-single > .signage-card.clock .clock-time {
  font-size: clamp(50px, min(20cqw, 55cqh), 170px);
}
.signage-grid:not(.is-single) > .signage-card.clock .clock-date,
.signage-grid.is-single > .signage-card.clock .clock-date {
  font-size: clamp(22px, min(6cqw, 16cqh), 46px);
}
.signage-grid:not(.is-single) > .signage-card.clock .card-meta[data-clock-meta],
.signage-grid.is-single > .signage-card.clock .card-meta[data-clock-meta] {
  font-size: clamp(10px, min(3cqw, 7cqh), 24px);
}
.signage-grid.is-single > .signage-card.clock {
  padding: clamp(12px, 1vw, 20px);
}
.signage-grid.is-single > .signage-card.clock .clock-time {
  font-size: clamp(50px, 20cqw, 170px);
}
.signage-grid.is-single > .signage-card.clock .clock-date {
  font-size: clamp(22px, 6cqw, 46px);
}
.signage-grid.is-single > .signage-card.clock .card-meta[data-clock-meta] {
  font-size: clamp(10px, 3cqw, 24px);
}
.signage-grid:not(.is-single) > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .clock-time,
.signage-grid.is-single > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .clock-time {
  font-size: clamp(50px, min(20cqw, 55cqh), 170px) !important;
}
.signage-grid:not(.is-single) > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .clock-date,
.signage-grid.is-single > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .clock-date {
  font-size: clamp(22px, min(6cqw, 16cqh), 46px) !important;
}
.signage-grid:not(.is-single) > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .card-meta[data-clock-meta],
.signage-grid.is-single > .signage-card.clock:not(.size-compact):not(.size-wide):not(.size-huge) .card-meta[data-clock-meta] {
  font-size: clamp(10px, min(3cqw, 7cqh), 24px) !important;
}
.signage-grid:not(.is-single) > .signage-card.clock.size-huge {
  height: clamp(280px, 38vh, 360px);
  min-height: clamp(280px, 38vh, 360px);
}
.signage-card.clock.size-huge {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-content: center;
  justify-items: center;
  text-align: center;
}
.signage-card.clock.size-huge .clock-info {
  width: 100%;
  text-align: center;
}
.signage-card.clock.size-huge .clock-date,
.signage-card.clock.size-huge .card-meta[data-clock-meta] {
  text-align: center;
}
.signage-card.clock.size-huge .clock-info {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: clamp(20px, 3vw, 56px);
}
.signage-grid > .signage-card.clock.size-huge .clock-time {
  font-size: clamp(100px, min(24cqw, 65cqh), 240px) !important;
}
.signage-grid > .signage-card.clock.size-huge .clock-date {
  font-size: clamp(26px, min(6cqw, 16cqh), 54px) !important;
}
.signage-grid > .signage-card.clock.size-huge .card-meta[data-clock-meta] {
  font-size: clamp(12px, min(3cqw, 8cqh), 26px) !important;
}

/* Unified widget sizing: standard = 1 column, large = 2 columns, huge = full width. */
.signage-grid > .signage-card,
.preview-grid > .mini-card {
  container-type: inline-size;
}
.signage-grid > .signage-card.size-wide:not(.news),
.preview-grid > .mini-card.size-wide:not(.news) {
  grid-column: span 2;
}
.signage-grid > .signage-card.size-huge:not(.news),
.preview-grid > .mini-card.size-huge:not(.news) {
  grid-column: 1 / -1;
  grid-row: auto;
}
.signage-grid > .signage-card.news,
.preview-grid > .mini-card.news {
  grid-column: span 1;
}
.signage-grid > .signage-card.news.size-wide,
.preview-grid > .mini-card.news.size-wide {
  grid-column: span 2;
}
.signage-grid > .signage-card.news.size-huge,
.preview-grid > .mini-card.news.size-huge {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* Width-aware typography for every non-clock widget. */
.signage-grid > .signage-card:not(.clock) .card-title {
  font-size: clamp(16px, 3cqw, 42px);
}
.signage-grid > .signage-card.weather .weather-big {
  font-size: clamp(34px, 16cqw, 180px);
}
.signage-grid > .signage-card.weather .weather-description {
  font-size: clamp(14px, 3.4cqw, 36px);
}
.signage-grid > .signage-card.weather .card-meta {
  font-size: clamp(10px, 1.8cqw, 22px);
}
.signage-grid > .signage-card.crypto .stat-value {
  font-size: clamp(24px, 8cqw, 130px);
}
.signage-grid > .signage-card.crypto .change-up {
  font-size: clamp(18px, 5cqw, 72px);
}
.signage-grid > .signage-card.crypto .card-meta {
  font-size: clamp(10px, 1.8cqw, 22px);
}
.signage-grid > .signage-card.crypto .sparkline {
  height: clamp(35px, 5cqw, 100px);
}
.signage-grid > .signage-card.news .news-list a {
  font-size: clamp(12px, 2.4cqw, 36px);
}
.signage-grid > .signage-card.news .news-time {
  font-size: clamp(11px, 1.5cqw, 20px);
}
.signage-grid > .signage-card.news .news-source,
.signage-grid > .signage-card.news .card-meta {
  font-size: clamp(10px, 1.3cqw, 18px);
}
.signage-grid > .signage-card.calendar .calendar-grid {
  font-size: clamp(12px, 2.5cqw, 28px);
}
.signage-grid > .signage-card.calendar .calendar-week {
  font-size: clamp(10px, 1.8cqw, 20px);
}
.signage-grid > .signage-card.worldclock .worldclock-list div {
  font-size: clamp(14px, 3cqw, 30px);
}
.signage-grid > .signage-card.worldclock .worldclock-list strong {
  font-size: clamp(20px, 5cqw, 56px);
}
.signage-grid > .signage-card.timer .timer-value,
.signage-grid > .signage-card.stopwatch .timer-value {
  font-size: clamp(34px, 10cqw, 140px);
}
.signage-grid > .signage-card.youtube.size-wide { min-height: 280px; }
.signage-grid > .signage-card.youtube.size-huge { min-height: 360px; }

/* Keep the setup preview's cards on the same horizontal sizing model. */
.preview-grid > .mini-card .mini-value {
  font-size: clamp(18px, 8cqw, 72px);
}
.preview-grid > .mini-card.crypto .mini-value {
  font-size: clamp(18px, 8cqw, 72px);
}
.preview-grid > .mini-card h3 {
  font-size: clamp(12px, 3cqw, 28px);
}

/* Make the shared grid capacity easy to spot in the setup header. */
.setup-header-title #capacity-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-left: 8px;
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-raised);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
}
.setup-header-title #capacity-status.capacity-warning {
  border-color: rgba(255,107,107,.7);
  color: var(--red);
  background: rgba(255,107,107,.08);
}
@media (max-width: 620px) {
  .setup-header-title #capacity-status {
    min-height: 26px;
    margin-left: 0;
    padding: 3px 7px;
    font-size: 11px;
  }
}

/* Preview cards mirror the same content density and size behavior as signage cards. */
.preview-grid > .mini-card {
  align-self: stretch;
  min-height: 0;
  padding: clamp(9px, 2cqw, 22px);
  overflow: hidden;
}
.preview-grid > .mini-card h3 {
  margin-bottom: clamp(6px, 2cqw, 14px);
  font-size: clamp(12px, 3cqw, 28px) !important;
}
.preview-grid > .mini-card .mini-value {
  font-size: clamp(18px, 8cqw, 72px) !important;
}
.preview-grid > .mini-card .mini-muted {
  font-size: clamp(9px, 2cqw, 20px);
  line-height: 1.45;
}
.preview-grid > .mini-card.clock .mini-value {
  font-size: clamp(22px, 20cqw, 96px) !important;
  line-height: .95;
}
.preview-grid > .mini-card.clock .mini-info {
  display: grid;
  gap: 4px;
  margin-top: clamp(5px, 1.5cqw, 12px);
  text-align: center;
}
.preview-grid > .mini-card.clock.size-huge .mini-info {
  grid-template-columns: auto auto;
  justify-content: center;
  align-items: baseline;
  column-gap: clamp(8px, 3cqw, 24px);
}
.preview-grid > .mini-card.weather .mini-value {
  font-size: clamp(20px, 16cqw, 90px) !important;
}
.preview-grid > .mini-card.crypto .mini-value {
  font-size: clamp(18px, 8cqw, 80px) !important;
}
.preview-grid > .mini-card.crypto .mini-chart {
  height: clamp(18px, 5cqw, 48px);
  margin-top: clamp(6px, 2cqw, 14px);
  border-bottom: 2px solid var(--cyan);
  opacity: .55;
  transform: skewY(-3deg);
}
.preview-grid > .mini-card.news ul {
  display: grid;
  gap: clamp(3px, 1cqw, 8px);
  margin: 0;
  padding-left: 1.2em;
  font-size: clamp(10px, 2cqw, 22px);
}

/* The preview uses the same virtual canvas width as the signage view, then
   scales that canvas into the setup column so text wraps at the same points. */
.preview-grid-frame {
  min-height: 360px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--bg-soft);
}
.preview-grid-frame.is-over-capacity { border-color: var(--red); }
.preview-grid-frame > .preview-grid {
  width: var(--preview-virtual-width, 1200px);
  min-height: 0;
  grid-auto-rows: auto;
  gap: clamp(9px, 1vw, 17px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: scale(var(--preview-scale, 1));
  transform-origin: top left;
}

/* Market and alert widgets added after Phase 2. */
.change-up.is-down { color: var(--red); }
.signage-card.market .stat-value { font-variant-numeric: tabular-nums; }
.signage-card.market .card-title small { color: var(--muted); font-size: .62em; font-weight: 500; }
.signage-card.earthquake { border-color: rgba(255,107,107,.78); }
.earthquake-scale { color: var(--red); font-size: clamp(36px, 7cqw, 110px); font-weight: 800; line-height: 1; }
.earthquake-place { margin-top: 15px; color: var(--text); font-size: clamp(18px, 3.8cqw, 48px); font-weight: 700; }
.field-help { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.field-help code { color: var(--cyan-soft); }
.signage-grid > .signage-card.market .stat-value { font-size: clamp(24px, 8cqw, 130px); }
.signage-grid > .signage-card.market .change-up { font-size: clamp(18px, 5cqw, 72px); }
.signage-grid > .signage-card.market .card-meta { font-size: clamp(10px, 1.8cqw, 22px); }
.signage-grid > .signage-card.earthquake .earthquake-scale { font-size: clamp(36px, 10cqw, 150px); }
.signage-grid > .signage-card.earthquake .earthquake-place { font-size: clamp(18px, 3.8cqw, 48px); }
.signage-grid > .signage-card.earthquake .card-meta { font-size: clamp(10px, 1.8cqw, 22px); }
.preview-grid > .mini-card.market .mini-value,
.preview-grid > .mini-card.earthquake .mini-value { font-size: clamp(18px, 8cqw, 72px) !important; }
.signage-card.airquality { border-color: rgba(86, 211, 255, .78); }
.airquality-aqi { color: var(--cyan); font-size: clamp(38px, 8cqw, 120px); font-weight: 800; line-height: 1; }
.airquality-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; color: var(--muted-strong); font-size: clamp(12px, 2cqw, 25px); }
.airquality-grid strong { display: block; margin-top: 3px; color: var(--text); font-size: 1.45em; }
.signage-card.apod { display: grid; align-content: start; gap: 10px; }
.apod-media { min-height: 120px; display: grid; place-items: center; overflow: hidden; border-radius: 9px; background: #05080b; }
.apod-media img { width: 100%; height: clamp(120px, 22cqw, 360px); object-fit: cover; display: block; }
.apod-media a { display: block; width: 100%; }
.apod-empty { padding: 30px 12px; color: var(--muted); font-size: 13px; }
.apod-title { color: var(--text); font-size: clamp(16px, 2.5cqw, 32px); font-weight: 700; line-height: 1.3; }
.signage-grid > .signage-card.airquality .airquality-aqi { font-size: clamp(38px, 10cqw, 150px); }
.signage-grid > .signage-card.airquality .airquality-grid { font-size: clamp(12px, 2.3cqw, 30px); }
.signage-grid > .signage-card.apod .apod-title { font-size: clamp(16px, 2.5cqw, 36px); }
.signage-grid > .signage-card.apod .apod-media img { height: clamp(140px, 24cqw, 460px); }
.preview-grid > .mini-card.airquality .mini-value { color: var(--cyan); }
.preview-grid > .mini-card.apod { background: linear-gradient(135deg, #111b3b, #251334); }