/* LawsonFlow — styles */
:root {
  --bg: #1d2130;
  --bg2: #262b3d;
  --bg3: #313750;
  --fg: #eef0f6;
  --fg2: #aab1c8;
  --line: #3a4160;
  --accent: #2f7cf6;
  --accent2: #fde047;
  --green: #22c55e;
  --red: #ef4444;
  --cell: #2c3147;
  --cell-fg: #eef0f6;
  --row-h: 3.2rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.theme-light {
  --bg: #ffffff;
  --bg2: #f5f6fa;
  --bg3: #e9ebf2;
  --fg: #1c2030;
  --fg2: #6b7290;
  --line: #dfe2ec;
  --cell: #f3f4f8;
  --cell-fg: #1c2030;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--fg); font-size: 15px; line-height: 1.35; }
a { color: var(--accent); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 700; }
.muted { color: var(--fg2); }
.small { font-size: 0.85em; }
.right { text-align: right; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; gap: 0.75rem; }
.wrap { flex-wrap: wrap; }

/* ---- buttons / inputs ---- */
.btn { background: var(--bg3); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.9rem; color: var(--fg); display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.btn:hover { filter: brightness(1.12); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn.go { background: var(--green); border-color: var(--green); color: #062b12; font-weight: 800; font-size: 1.05rem; padding: 0.55rem 1.4rem; letter-spacing: 0.04em; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.sm { padding: 0.3rem 0.6rem; font-size: 0.85rem; border-radius: 6px; }
.btn.icon { padding: 0.4rem 0.55rem; }
.input, select.input, textarea.input { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.7rem; color: var(--fg); width: 100%; }
textarea.input { min-height: 5rem; resize: vertical; }
label.field { display: block; margin-bottom: 0.8rem; }
label.field > span { display: block; font-size: 0.85rem; color: var(--fg2); margin-bottom: 0.3rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.error { color: var(--red); margin: 0.5rem 0; }

/* ---- top navigation (dashboards) ---- */
.topnav { display: flex; align-items: center; gap: 1rem; padding: 0.7rem 1.5rem; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }
.topnav .brand { font-weight: 800; font-size: 1.15rem; display: flex; align-items: center; gap: 0.5rem; color: var(--fg); }
.topnav .brand .logo { width: 26px; height: 26px; border-radius: 6px; background: #1f2433; display: inline-grid; place-items: center; }
.topnav .brand .logo::after { content: ""; border-left: 11px solid var(--accent2); border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 2px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: #f2c47e; color: #4a2f00; font-weight: 700; display: inline-grid; place-items: center; font-size: 0.85rem; }
.page { max-width: 1400px; margin: 0 auto; padding: 1.5rem; }
.page h1 { font-size: 1.8rem; }
.crumbs { font-size: 0.9rem; color: var(--fg2); margin-bottom: 0.5rem; }
.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--line); margin: 1rem 0; }
.tabs button { background: none; border: 0; padding: 0.6rem 0; color: var(--fg2); border-bottom: 2px solid transparent; font-weight: 600; }
.tabs button.active { color: var(--accent); border-color: var(--accent); }

.list { border-top: 1px solid var(--line); }
.list .li { display: grid; grid-template-columns: 64px 1fr 220px 180px 40px; gap: 1rem; align-items: center; padding: 1rem 0.5rem; border-bottom: 1px solid var(--line); }
.list .li:hover { background: var(--bg2); }
.list .li .thumb { width: 60px; height: 44px; border-radius: 6px; background: var(--bg3); display: grid; place-items: center; color: var(--fg2); overflow: hidden; }
.list .li .thumb img { max-width: 100%; max-height: 100%; }
.list .li .title { font-weight: 700; font-size: 1.05rem; color: var(--fg); }
.list .li .sub { color: var(--fg2); font-size: 0.9rem; }
.list .li .sub em { font-style: italic; }
.list .li.srow { grid-template-columns: 44px 1fr 220px 180px 40px; }
.list .li .type { width: 28px; height: 22px; border: 2px solid var(--accent); border-radius: 4px; position: relative; }
.list .li .type::before, .list .li .type::after { content: ""; position: absolute; background: var(--accent); }
.list .li .type::before { left: 0; right: 0; top: 50%; height: 2px; }
.list .li .type::after { top: 0; bottom: 0; left: 50%; width: 2px; }
.list .li .type.folder { border-radius: 4px 4px 4px 4px; }
.list .li.head { padding: 0.4rem 0.5rem; color: var(--fg2); font-size: 0.9rem; }
.list .li.head:hover { background: none; }
.empty { padding: 3rem; text-align: center; color: var(--fg2); }

/* ---- menus / modals / toast ---- */
.menu { position: absolute; z-index: 50; background: #fff; color: #1c2030; border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); min-width: 220px; padding: 0.4rem 0; }
.menu button { display: flex; width: 100%; background: none; border: 0; text-align: left; padding: 0.55rem 1rem; gap: 1rem; align-items: center; }
.menu button:hover { background: #eef2ff; }
.menu button .kbd { margin-left: auto; color: #8a8fa3; font-size: 0.8rem; }
.menu hr { border: 0; border-top: 1px solid #e5e7ef; margin: 0.3rem 0; }
.menu .swatches { display: flex; gap: 6px; padding: 0.5rem 1rem; align-items: center; }
.menu .swatches .sw { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.menu .swatches .sw.none { background: #fff; border-color: #c9ccd8; position: relative; }
.menu .swatches .sw.none::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; color: #8a8fa3; font-size: 14px; }
.menu .swatches .sw:hover { transform: scale(1.15); }
.backdrop { position: fixed; inset: 0; z-index: 40; }
.modal-wrap { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 60; display: grid; place-items: center; padding: 1rem; }
.modal { background: var(--bg); color: var(--fg); border-radius: 14px; width: min(640px, 100%); max-height: 92vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.5); padding: 1.4rem; }
.modal.wide { width: min(980px, 100%); }
.modal h2 { margin-bottom: 1rem; }
.modal .actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1.2rem; }
#toast { position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%); background: #111; color: #fff; padding: 0.6rem 1rem; border-radius: 8px; opacity: 0; transition: opacity 0.2s; pointer-events: none; z-index: 100; font-size: 0.9rem; }
#toast.on { opacity: 1; }

.warnbar { background: #fde047; color: #2b2606; padding: 0.45rem 1.5rem; font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 0.8rem; }
.warnbar .btn { background: #2b2606; color: #fde047; border-color: #2b2606; }

.picker { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem; background: var(--bg2); }
.picker-list { max-height: 200px; overflow: auto; margin-top: 0.3rem; border-top: 1px solid var(--line); padding-top: 0.3rem; }
.picker-row { display: flex; gap: 0.6rem; align-items: center; padding: 0.35rem 0.4rem; border-radius: 6px; }
.picker-row:hover { background: var(--bg3); }
.picker-row.all { padding: 0.4rem; }
.picker-row span:last-child { margin-left: auto; }

/* ---- login ---- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.login .card { width: min(400px, 100%); background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 1.6rem; }
.login .card h1 { margin-bottom: 1rem; }

/* ================= SHOW DESKTOP ================= */
#app > .show { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.show-head { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1.5rem; align-items: center; padding: 0.6rem 1.2rem; border-bottom: 1px solid var(--line); background: var(--bg); }
.show-head .back { color: var(--fg2); }
.show-head .titles .ev { color: var(--fg2); font-size: 0.85rem; }
.show-head .titles .nm { font-weight: 700; font-size: 1.1rem; }
.clocks { display: flex; gap: 2rem; align-items: center; text-align: center; }
.clock .v { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
.clock .l { font-size: 0.8rem; color: var(--fg2); }
.clock .s { font-size: 0.7rem; color: var(--fg2); font-style: italic; }
.clock .v.under { color: var(--green); }
.clock .v.over { color: var(--red); }
.clock .v.live { color: var(--accent2); }
.clock .v.warn { color: #fbbf24; }
.tools { display: flex; gap: 0.35rem; align-items: center; }
.tools .btn.icon { font-size: 1rem; line-height: 1; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); display: inline-block; margin-right: 4px; }
.live-dot.on { background: var(--green); box-shadow: 0 0 6px var(--green); }

.tools .btn.follow { font-size: 0.85rem; padding: 0.35rem 0.6rem; }
.tools .btn.follow.on { background: var(--green); border-color: var(--green); color: #062b12; font-weight: 700; }
.tools .btn.follow.paused { background: #fbbf24; border-color: #fbbf24; color: #2b2606; font-weight: 700; }
.livechip { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1.4rem; z-index: 20; background: var(--accent); color: #fff; border: 0; border-radius: 999px; padding: 0.6rem 1.3rem; font-weight: 700; box-shadow: 0 6px 20px rgba(0,0,0,0.45); cursor: pointer; }
.livechip:hover { filter: brightness(1.1); }
#app > .show { position: relative; }

/* grid */
.gridwrap { flex: 1; overflow: auto; position: relative; scroll-behavior: auto; overscroll-behavior: contain; }
table.rundown { border-collapse: separate; border-spacing: 0; min-width: 100%; }
table.rundown th { position: sticky; top: 0; z-index: 5; background: var(--bg); text-align: left; font-weight: 600; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; color: var(--fg); }
table.rundown th.num { width: 56px; }
table.rundown th.items { min-width: 340px; }
table.rundown th .colname { cursor: pointer; display: inline-flex; gap: 0.35rem; align-items: center; }
table.rundown th .colname::before { content: "⌄"; color: var(--fg2); font-size: 0.9em; }
table.rundown th.addcol { color: var(--fg2); font-weight: 500; cursor: pointer; }
table.rundown td { vertical-align: top; padding: 4px 3px; }
table.rundown td.num { text-align: center; white-space: nowrap; min-width: 56px; color: var(--fg2); padding-top: 12px; position: relative; cursor: grab; user-select: none; }
table.rundown td.num .n { font-variant-numeric: tabular-nums; }
table.rundown td.num .gear { display: none; position: absolute; left: 4px; top: 8px; font-size: 1.1rem; cursor: pointer; color: var(--fg); background: var(--bg); border-radius: 50%; padding: 0 2px; }
table.rundown tr:hover td.num .gear { display: block; }
table.rundown tr:hover td.num .n { visibility: hidden; }
.card { background: var(--cell); color: var(--cell-fg); border-radius: 6px; padding: 0.55rem 0.7rem; min-height: var(--row-h); white-space: pre-wrap; word-break: break-word; outline: none; }
.card[contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); }
.card:empty::before { content: attr(data-ph); color: var(--fg2); opacity: 0.6; }
tr.item .cell { min-width: 220px; }
tr.item td.itemcell { min-width: 340px; }
tr.item .itemcard { display: flex; flex-direction: column; gap: 0.4rem; }
tr.item .itemcard .title { font-weight: 700; white-space: pre-wrap; outline: none; }
tr.item .itemcard .title:empty::before { content: "Untitled item"; color: var(--fg2); opacity: 0.6; }
tr.item .itemcard .times { display: flex; gap: 1.2rem; font-size: 0.85rem; margin-top: auto; align-items: baseline; }
tr.item .itemcard .times .st { cursor: pointer; }
tr.item .itemcard .times .st.hard::before { content: "⚑ "; }
tr.item .itemcard .times .dur { cursor: pointer; font-variant-numeric: tabular-nums; }
tr.item .itemcard .times .delta { font-variant-numeric: tabular-nums; font-size: 0.8rem; }
tr.item .itemcard .times .delta.over { color: #b91c1c; }
tr.item .itemcard .times .delta.under { color: #15803d; }
tr.item .itemcard .times .lock { margin-left: auto; opacity: 0.7; }
tr.item.current td.num { color: var(--accent); font-weight: 800; }
tr.item.current td.num .n::before { content: "▶ "; }
tr.item.current .card { box-shadow: 0 0 0 3px var(--accent), 0 0 14px rgba(47,124,246,0.6); }
tr.item.done { opacity: 0.55; }
tr.title td.itemcell .card { background: transparent; color: var(--fg); font-style: italic; font-weight: 700; font-size: 1.1rem; min-height: 2rem; }
tr.title .cell .card { background: transparent; color: var(--fg); }
tr.dragging { opacity: 0.4; }
tr.drop-before td { border-top: 3px solid var(--accent) !important; }
tr.drop-after td { border-bottom: 3px solid var(--accent) !important; }
.endpad { flex: none; }
.gridfoot { padding: 0.6rem 1rem; border-top: 1px solid var(--line); display: flex; gap: 1rem; align-items: center; font-size: 0.9rem; color: var(--fg2); }

/* colors — Shoflo-like pastel palette; dark text keeps them readable */
.card.c-pink { background: #f7b6e6; color: #241120; }
.card.c-green { background: #bdf2c7; color: #0e2513; }
.card.c-yellow { background: #fdf27a; color: #2b2606; }
.card.c-orange { background: #fdcf9a; color: #2d1804; }
.card.c-tan { background: #d8c3a5; color: #26190a; }
.card.c-red { background: #f6a3a0; color: #2c0b0a; }
.card.c-gray { background: #d4d6dd; color: #1c2030; }
.card.c-blue { background: #a9c5f4; color: #0b1a33; }
.card.c-purple { background: #cdb4f2; color: #1c0d33; }
.sw.c-pink { background: #f7b6e6; } .sw.c-green { background: #bdf2c7; } .sw.c-yellow { background: #fdf27a; } .sw.c-orange { background: #fdcf9a; } .sw.c-tan { background: #d8c3a5; } .sw.c-red { background: #f6a3a0; } .sw.c-gray { background: #d4d6dd; } .sw.c-blue { background: #a9c5f4; } .sw.c-purple { background: #cdb4f2; }

/* compact view */
.show.compact { --row-h: 1.6rem; font-size: 13px; }
.show.compact .card { padding: 0.3rem 0.5rem; }
.show.compact tr.item .itemcard .times { font-size: 0.75rem; }

/* prompter view */
.prompter { min-height: 100%; padding: 2rem 4rem; background: #000; color: #fff; }
.prompter .now { font-size: 2.6rem; line-height: 1.3; white-space: pre-wrap; font-weight: 600; }
.prompter .next { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #333; color: #aaa; font-size: 1.6rem; white-space: pre-wrap; }
.prompter .tag { font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase; color: #888; margin-bottom: 0.5rem; }
.prompter .tag.live { color: var(--accent2); }

/* display view */
.display { min-height: 100%; padding: 1rem 1.5rem; }
.display .drow { display: grid; grid-template-columns: 56px 1fr 130px; gap: 1rem; padding: 0.8rem 1rem; border-radius: 10px; margin-bottom: 0.4rem; background: var(--bg2); align-items: center; }
.display .drow.current { background: var(--accent2); color: #2b2606; font-size: 1.25rem; box-shadow: 0 0 0 3px var(--accent2); }
.display .drow.done { opacity: 0.45; }
.display .drow.title { background: transparent; font-style: italic; font-weight: 700; }
.display .drow .n { font-weight: 800; text-align: center; }
.display .drow .t { font-weight: 700; white-space: pre-wrap; }
.display .drow .d { font-variant-numeric: tabular-nums; text-align: right; }

/* search modal */
.results { max-height: 45vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; margin-top: 1rem; }
.results .r { display: flex; gap: 0.7rem; padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.results .r mark { background: var(--accent2); color: #2b2606; border-radius: 2px; }

/* guest banner */
.guestbar { background: var(--accent2); color: #2b2606; text-align: center; padding: 0.3rem; font-size: 0.85rem; font-weight: 600; }

/* ---- print (PDF export) ---- */
@media print {
  body { background: #fff; color: #000; }
  .show { height: auto; overflow: visible; }
  .show-head { position: static; }
  .tools, .gridfoot, .btn, .gear, .topnav, #toast { display: none !important; }
  .gridwrap { overflow: visible; }
  table.rundown th { position: static; background: #fff; color: #000; border-bottom: 1px solid #000; }
  .card { border: 1px solid #999; color: #000; background: #fff; min-height: 0; }
  .card.c-pink, .card.c-green, .card.c-yellow, .card.c-orange, .card.c-tan, .card.c-red, .card.c-gray, .card.c-blue, .card.c-purple { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  tr { break-inside: avoid; }
  tr.item.done { opacity: 1; }
}
@page { size: landscape; margin: 10mm; }

/* ---- settings cards ---- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 1rem; }
.cards.one { grid-template-columns: minmax(0, 760px); }
.topnav .btn.ghost.on { color: var(--accent); background: var(--bg2); }
/* "Follow the caller" — a latch you flip on, not a link you click each time */
.followsw { display: inline-flex; align-items: center; gap: 0.55rem; background: var(--bg3); border: 1px solid var(--line);
  border-radius: 999px; padding: 0.35rem 0.9rem 0.35rem 0.45rem; color: var(--fg2); cursor: pointer; font: inherit; }
.followsw:hover { filter: brightness(1.08); }
.followsw .sw { width: 34px; height: 20px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background 0.18s ease; }
.followsw .knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg2); transition: transform 0.18s ease, background 0.18s ease; }
.followsw .swlabel { font-weight: 600; white-space: nowrap; }
.followsw.on { background: #ef4444; border-color: #ef4444; color: #fff; }
.followsw.on .sw { background: rgba(255, 255, 255, 0.35); }
.followsw.on .knob { transform: translateX(14px); background: #fff; animation: livepulse 1.6s ease-in-out infinite; }
.followsw .livewhat { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; font-weight: 500; }
.followsw.compact { padding: 0.25rem 0.7rem 0.25rem 0.35rem; gap: 0.4rem; font-size: 0.9rem; }
.followsw.compact .sw { width: 28px; height: 17px; }
.followsw.compact .knob { width: 13px; height: 13px; }
.followsw.compact.on .knob { transform: translateX(11px); }
@media (max-width: 900px) { .followsw .livewhat { display: none; } .followsw .swlabel { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; } }
@keyframes livepulse { 50% { opacity: 0.25; } }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr; } .grid2 { grid-template-columns: 1fr; } .list .li, .list .li.srow { grid-template-columns: 44px 1fr 40px; } .list .li > :nth-child(3), .list .li > :nth-child(4) { display: none; } }
.card2 { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 1.4rem; }
.card2 h2 { margin-bottom: 1rem; font-size: 1.25rem; }
.card2 .kv { margin-bottom: 0.9rem; }
.card2 .kv .k { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); margin-bottom: 0.2rem; }
.card2 .ok { color: var(--green); }
.card2 .bad { color: var(--red); }
.card2 label.field small { display: block; margin-bottom: 0.3rem; }

/* ---- Settings → Security ---- */
.cards.sec { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
.cards.sec .card2.span { grid-column: 1 / -1; }
@media (max-width: 1000px) { .cards.sec { grid-template-columns: 1fr; } }
.btn.small { padding: 0.3rem 0.6rem; font-size: 0.85rem; border-radius: 6px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.nowrap { white-space: nowrap; }
.tablewrap { overflow-x: auto; }
table.sectable { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.sectable th { text-align: left; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg2); font-weight: 600; padding: 0 0.7rem 0.5rem 0; border-bottom: 1px solid var(--line); }
table.sectable td { padding: 0.6rem 0.7rem 0.6rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.sectable tr:last-child td { border-bottom: 0; }
.pill { display: inline-block; padding: 0.12rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; }
.pill.ok { background: color-mix(in srgb, var(--green) 18%, transparent); color: var(--green); }
.pill.fail { background: color-mix(in srgb, var(--red) 18%, transparent); color: var(--red); }
.pill.warn { background: color-mix(in srgb, #f59e0b 20%, transparent); color: #f59e0b; }
.pill.neutral { background: var(--bg3); color: var(--fg2); }
.blocklist .brow { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.blocklist .brow:last-child { border-bottom: 0; }
.logbox { background: #10131c; color: #cbd3e6; border-radius: 10px; padding: 1rem 1.1rem; overflow: auto; max-height: 340px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.6; white-space: pre; }

/* ================= STAGE TIMER ================= */
/* The screen the speaker sees: black, one huge number, a progress bar under it. */
body.stage-page { background: #000; }
.stage { position: relative; display: flex; flex-direction: column; height: 100vh; background: #111214; color: #fff; overflow: hidden; container-type: size; }
.stage.preview { height: auto; aspect-ratio: 16 / 9; border-radius: 10px; border: 1px solid var(--line); }
.stage-head { display: flex; align-items: center; justify-content: space-between; padding: 1.6cqh 2cqw; font-size: clamp(10px, 3cqh, 30px); }
.stage-head .brand-mark { display: flex; align-items: center; gap: 0.5vw; font-weight: 800; opacity: 0.85; letter-spacing: 0.02em; }
.stage-head .brand-mark .logo { width: 1.6em; height: 1.6em; border-radius: 0.35em; background: #1f2433; display: inline-grid; place-items: center; }
.stage-head .brand-mark .logo::after { content: ""; border-left: 0.55em solid var(--accent2); border-top: 0.36em solid transparent; border-bottom: 0.36em solid transparent; margin-left: 0.12em; }
.stage-title { color: #4ea3ff; font-weight: 800; text-align: center; flex: 1; padding: 0 1vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-clock { color: #8a90a3; font-variant-numeric: tabular-nums; }
.stage-body { flex: 1; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.stage-time { font-size: min(38cqh, 24cqw); font-weight: 800; line-height: 0.95; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #fff; }
.stage-time.warn { color: #fbbf24; }
.stage-time.danger { color: #fb7185; }
.stage-time.over { color: #ef4444; }
.stage-time.paused { animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.stage-msg { text-align: center; font-size: clamp(11px, 8cqh, 90px); font-weight: 600; padding: 0 3cqw 1cqh; min-height: 0; color: #fff; line-height: 1.15; }
.stage-msg:empty { padding: 0; }
.stage-msg.bold { font-weight: 800; }
.stage-msg.c-green { color: #4ade80; } .stage-msg.c-amber { color: #fbbf24; } .stage-msg.c-red { color: #f87171; }
.stage-bar { height: 4cqh; min-height: 8px; background: #26282e; }

.stage-bar > i { display: block; height: 100%; background: #4ade80; transition: width 0.25s linear; }
.stage-bar.warn > i { background: #fbbf24; }
.stage-bar.danger > i, .stage-bar.over > i { background: #ef4444; }
.stage.blackout .stage-time, .stage.blackout .stage-title, .stage.blackout .stage-msg, .stage.blackout .stage-bar, .stage.blackout .stage-clock { visibility: hidden; }
.stage.flashing { animation: stageflash 0.45s steps(1) 5; }
@keyframes stageflash { 50% { background: #fff; } }

/* control panel */
.timerpanel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; padding: 1rem 1.2rem; align-items: start; }
@media (max-width: 1200px) { .timerpanel { grid-template-columns: 1fr; } }
.tp-card { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem; }
.tp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.7rem; }
.tp-head h3 { font-size: 1rem; }
.tp-meta { display: flex; align-items: center; gap: 0.7rem; margin: 0.7rem 0; font-size: 0.9rem; }
.onair { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; padding: 0.2rem 0.45rem; border-radius: 4px; background: var(--bg3); color: var(--fg2); }
.onair.on { background: #ef4444; color: #fff; }
.tp-transport { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.6rem; align-items: center; }
.tp-row { display: flex; gap: 0.8rem; align-items: center; justify-content: space-between; padding: 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.tp-row.active { border-color: var(--accent); background: var(--bg3); }
.tp-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; }
.tp-msgs { display: grid; gap: 0.4rem; }
.tp-msg { display: flex; gap: 0.5rem; align-items: center; padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: 8px; }
.tp-msg.on { border-color: var(--accent); background: var(--bg3); }
.tp-msg .txt { flex: 1; }
.tp-msg .txt.bold { font-weight: 800; }
.tp-msg .txt.c-green { color: #4ade80; } .tp-msg .txt.c-amber { color: #fbbf24; } .tp-msg .txt.c-red { color: #f87171; }

/* ---- Settings → Companion ---- */
.keybox { background: #10131c; color: #9fe6b4; border-radius: 10px; padding: 1rem 1.1rem; margin: 0.8rem 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.95rem; word-break: break-all; white-space: pre-wrap; user-select: all; }
ol.steps { margin: 1rem 0 0.6rem 1.1rem; color: var(--fg2); line-height: 1.9; }
ol.steps li { padding-left: 0.2rem; }
ol.steps strong { color: var(--fg); }