: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: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 5vw; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(7,11,17,.82); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-size: 20px; letter-spacing: -.045em; }
.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 { color: var(--muted); font-size: 12px; }
.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: 84px; padding: 3px 6px; }
.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 { display: flex; gap: 7px; margin: 16px 0 0; }

.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 { display: grid; grid-template-columns: repeat(2, 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); }
.mini-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; padding: 13px; background: #0b1118; }
.mini-card.clock, .mini-card.news { grid-column: 1 / -1; }
.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.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.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: calc(100vh - clamp(36px, 6vw, 108px)); min-height: 0; margin: 0 auto; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); 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.clock, .signage-card.news { grid-column: 1 / -1; }
.signage-card.size-wide:not(.clock):not(.news) { grid-column: span 2; }
.signage-card.clock { display: grid; grid-template-columns: 1.2fr 1px 1fr; align-items: center; gap: clamp(20px, 4vw, 70px); min-height: 180px; }
.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; }
.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: 62px; padding: 0 5vw; }
  .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-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; } }

/* 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: rgba(237,242,246,.86); }
:root[data-theme="light"] .signage-card, :root[data-theme="light"] .mini-card { background: var(--surface); }
:root[data-theme="light"] .youtube-frame { background: #e5ebef; }
: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; }
.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: .045; border-color: transparent; padding: 5px 7px; font-size: 10px; }
.exit-signage:hover, .exit-signage:focus-visible { opacity: .72; border-color: var(--border-strong); }
.exit-signage span { display: none; }
.exit-signage:hover span, .exit-signage:focus-visible span { display: inline; }

@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; }
}