:root {
    color-scheme: dark;
    --bg: #05070a;
    --panel: #10151d;
    --panel-2: #171e28;
    --text: #f7f9fc;
    --muted: #94a1b2;
    --line: #293240;
    --accent: #36e07b;
    --accent-dark: #092c1a;
    --yellow: #ffd84d;
    --red: #ff4f5e;
    --blue: #52a8ff;
    --controls-drawer-handle: 3.25rem;
    --controls-drawer-safe-bottom: max(.35rem, env(safe-area-inset-bottom));
    --controls-drawer-closed-height: calc(var(--controls-drawer-handle) + var(--controls-drawer-safe-bottom));
    --controls-drawer-open-height: 50dvh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

@media (pointer: coarse) {
    :root { --controls-drawer-safe-bottom: max(2rem, env(safe-area-inset-bottom)); }
}

/* Projektzugang und Bereichsverwaltung */
.timer-access { min-height: 100vh; background: #05070a; color: #f5f7fa; }
.access-shell { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 48px 0 80px; }
.access-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 36px; }
.access-header h1 { margin: 5px 0 8px; font-size: clamp(2rem, 5vw, 4rem); }
.access-header p, .settings-card p { color: #94a1b2; }
.access-header-actions { display: flex; align-items: center; gap: 10px; }
.access-header-actions form { margin: 0; }
.icon-button { width: 54px; min-width: 54px; padding: 13px; }
.icon-button svg { display: block; width: 24px; height: 24px; fill: currentColor; }
.access-kicker { color: #36e07b; font-weight: 900; letter-spacing: .22em; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.area-card, .settings-card { border: 1px solid #26303b; border-top: 4px solid var(--area-color, #36e07b); border-radius: 18px; background: #0b0f14; padding: 24px; color: inherit; }
.area-color-green { --area-color: #36e07b; }
.area-color-blue { --area-color: #52a8ff; }
.area-color-gray { --area-color: #94a1b2; }
.area-color-amber { --area-color: #ffb84d; }
.area-color-red { --area-color: #ff4f64; }
.area-color-purple { --area-color: #b37cff; }
.area-card { display: flex; min-height: 145px; flex-direction: column; align-items: stretch; justify-content: center; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.area-card:hover, .area-card:focus-visible { border-color: var(--area-color); background: #111821; transform: translateY(-2px); outline: none; }
.area-card.is-disabled { cursor: not-allowed; opacity: .55; transform: none; }
.area-card h2 { margin: 10px 0 0; font-size: 1.55rem; line-height: 1.15; }
.area-card p { color: #94a1b2; margin: 10px 0 0; }
.area-card label { margin-top: 14px; color: #b8c2cf; font-weight: 700; }
.area-type { color: var(--area-color); font-weight: 900; letter-spacing: .15em; font-size: .75rem; }
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: start; }
.settings-card { display: grid; gap: 14px; }
.settings-card h2 { margin: 0; }
.settings-card label, .information-form label, .information-slot-select { display: grid; gap: 7px; color: #b8c2cf; font-weight: 700; }
.settings-card input, .settings-card select, .information-form input, .information-form select, .information-form textarea, .information-slot-select select, .area-card input { width: 100%; box-sizing: border-box; border: 1px solid #344252; border-radius: 10px; background: #080b10; color: #f5f7fa; padding: 12px; font: inherit; }
.settings-card fieldset, .information-form fieldset { border: 1px solid #26303b; border-radius: 12px; padding: 14px; }
.check-label { display: grid !important; grid-template-columns: 1.25rem minmax(0, 1fr) !important; align-items: start; gap: 10px !important; font-weight: 500 !important; line-height: 1.35; }
.check-label input[type="checkbox"], .settings-card .check-label input[type="checkbox"], .area-settings-form .check-label input[type="checkbox"] { width: 1.25rem; min-width: 1.25rem; height: 1.25rem; min-height: 1.25rem; margin: .05rem 0 0; padding: 0; justify-self: start; accent-color: var(--blue); }
.check-label span { min-width: 0; }
.fixed-permission { color: #d7dde5 !important; }
.fixed-permission small { margin-left: auto; color: var(--accent); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.inline-notice { margin-bottom: 20px; border: 1px solid #36e07b; border-radius: 10px; padding: 12px; color: #36e07b; }
.settings-subnav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; border-bottom: 1px solid #26303b; }
.settings-subnav button { border: 0; border-bottom: 3px solid transparent; background: transparent; color: #94a1b2; padding: 13px 16px; font: inherit; font-weight: 850; cursor: pointer; }
.settings-subnav button[aria-selected="true"] { border-bottom-color: var(--accent); color: #f5f7fa; }
.settings-subnav button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.guest-link-settings { display: grid; gap: 16px; }
.guest-link-grid { grid-template-columns: minmax(280px, .7fr) minmax(360px, 1.3fr); }
.guest-link-created { display: grid; gap: 10px; }
.guest-link-created > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.guest-link-created input { min-width: 0; }
.guest-link-list { display: grid; gap: 12px; }
.guest-link-card { border-top-color: var(--accent); }
.guest-link-card.inactive { opacity: .62; border-top-color: var(--muted); }
.guest-link-card header { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.guest-link-card header strong, .guest-link-card header small { display: block; }
.guest-link-card header small { margin-top: 4px; color: var(--muted); }
.guest-link-card header > span { border: 1px solid currentColor; border-radius: 999px; padding: 4px 7px; color: var(--accent); font-size: .65rem; font-weight: 900; letter-spacing: .07em; }
.guest-link-card.inactive header > span { color: var(--muted); }
.guest-link-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.guest-link-card dl div { border-top: 1px solid var(--line); padding-top: 8px; }
.guest-link-card dt { color: var(--muted); font-size: .67rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; }
.guest-link-card dd { margin: 3px 0 0; font-variant-numeric: tabular-nums; }
.settings-section-title { margin: 0 0 18px; }
.area-settings-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; align-items: start; }
.settings-add-card { min-height: 100px; border: 1px dashed #425064; border-radius: 18px; background: #0b0f14; color: inherit; }
.settings-add-card > summary { display: flex; min-height: 100px; align-items: center; gap: 12px; padding: 20px; color: #d7dde5; font-size: 1.15rem; font-weight: 850; cursor: pointer; list-style: none; }
.settings-add-card > summary::-webkit-details-marker { display: none; }
.settings-add-card > summary span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid #526176; border-radius: 50%; color: var(--accent); font-size: 1.5rem; }
.settings-add-card[open] > summary { min-height: auto; border-bottom: 1px solid #26303b; }
.settings-add-card > .settings-card { border: 0; border-radius: 0 0 18px 18px; }
.project-picker-grid .project-create-card:not([open]) > summary { min-height: 141px; }
.project-picker-grid .project-create-card[open] { grid-column: 1 / -1; }
.project-create-card > summary { color: var(--text); }
.project-create-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.project-create-form h2, .project-create-form p, .project-create-form button { grid-column: 1 / -1; }
.area-settings-card { display: block; width: 100%; align-self: start; padding: 0; overflow: hidden; }
.area-settings-list.is-editing .area-settings-card:not(.is-editing) { display: none; }
.settings-shell.area-editor-open [data-area-settings-context] { display: none; }
.area-settings-card.is-editing { grid-column: 1 / -1; overflow: visible; }
.area-settings-card.is-editing .area-settings-summary { display: none; }
.area-settings-summary { display: grid; width: 100%; min-height: 126px; box-sizing: border-box; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; background: transparent; color: inherit; padding: 20px; font: inherit; text-align: left; cursor: pointer; }
.area-settings-summary:hover { background: #111821; }
.area-settings-summary:focus-visible { outline: 2px solid var(--area-color); outline-offset: -2px; }
.area-setting-marker { width: 13px; height: 13px; border-radius: 50%; background: var(--area-color); }
.area-settings-summary strong, .area-settings-summary small { display: block; }
.area-settings-summary strong { overflow: hidden; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.area-settings-summary small { margin-top: 6px; color: #94a1b2; font-size: .72rem; letter-spacing: .1em; }
.area-settings-summary em { border: 1px solid var(--accent); border-radius: 999px; padding: 5px 9px; color: var(--accent); font-size: .62rem; font-style: normal; font-weight: 900; letter-spacing: .08em; }
.area-settings-summary .edit-label { grid-column: 2 / -1; color: #94a1b2; font-size: .68rem; font-weight: 850; letter-spacing: .1em; }
.area-settings-form { display: grid; gap: 14px; padding: 20px; }
.area-settings-form[hidden] { display: none; }
.area-settings-actions { position: sticky; z-index: 8; top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: -4px -4px 6px; border: 1px solid #344252; border-radius: 12px; background: rgba(11, 15, 20, .97); padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); }
.area-settings-actions span { min-width: 0; }
.area-settings-actions small, .area-settings-actions strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.area-settings-actions small { margin-bottom: 3px; color: #94a1b2; font-size: .66rem; font-weight: 850; letter-spacing: .1em; }
.area-settings-form label { display: grid; gap: 7px; color: #b8c2cf; font-weight: 700; }
.area-settings-form input, .area-settings-form select { width: 100%; border: 1px solid #344252; border-radius: 10px; background: #080b10; color: #f5f7fa; padding: 12px; }
.area-settings-form fieldset { border: 1px solid #26303b; border-radius: 12px; padding: 14px; }
.area-settings-form fieldset .check-label + .check-label, .settings-card fieldset .check-label + .check-label { margin-top: 10px; }
.settings-intro { margin: -8px 0 18px; color: #94a1b2; }
.plan-overview-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.plan-overview-card { display: grid; width: 100%; min-height: 158px; align-content: start; border: 1px solid #26303b; border-radius: 14px; background: #0b0f14; color: #f5f7fa; padding: 18px; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.plan-overview-card:hover, .plan-overview-card:focus-visible { border-color: var(--accent); background: #111821; transform: translateY(-2px); outline: none; }
.plan-overview-card .plan-overview-date { color: var(--accent); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.plan-overview-card strong { margin: 9px 0 7px; font-size: 1.08rem; line-height: 1.3; }
.plan-overview-card small { color: #94a1b2; font-size: 1rem; }
.plan-overview-card .plan-overview-open { margin-top: auto; padding-top: 16px; color: #b8c2cf; font-size: .68rem; font-weight: 900; letter-spacing: .1em; }
.empty-settings-state { margin: 0; color: #94a1b2; }
.settings-plan-overview-tools { display: grid; grid-template-columns: repeat(3, minmax(240px, 1fr)); gap: 14px; align-items: start; margin-bottom: 18px; }
.settings-plan-create-card, .settings-plan-import-card { width: 100%; }
.settings-plan-create-card h3, .settings-plan-import-card h3 { margin: 0; }
.settings-plan-import-card[open], .settings-plan-template-card[open] { grid-column: 1 / -1; }
.settings-plan-template-card { width: 100%; }
.template-download-list { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.template-download-list > h3, .template-download-list > p { grid-column: 1 / -1; margin: 0; }
.template-download-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid #344252; border-radius: 12px; padding: 13px; color: #f5f7fa; background: #0b0f14; text-decoration: none; }
.template-download-row:hover, .template-download-row:focus-visible { border-color: var(--accent); background: #111821; outline: none; }
.template-download-row span, .template-download-row strong, .template-download-row small { display: block; min-width: 0; }
.template-download-row small { margin-top: 4px; color: #94a1b2; font-size: .72rem; line-height: 1.35; }
.template-download-row b { flex: 0 0 auto; color: var(--accent); font-size: .72rem; letter-spacing: .08em; }
.plan-import-preview { display: grid; grid-column: 1 / -1; gap: 14px; border-top: 1px solid #344252; padding-top: 16px; }
.plan-import-preview h4 { margin: 0; }
.plan-import-meta, .plan-import-mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.plan-import-meta label small { color: #94a1b2; font-size: .68rem; font-weight: 500; line-height: 1.35; }
.plan-import-summary { border-left: 4px solid var(--accent); border-radius: 8px; padding: 10px 12px; color: #b8c2cf; background: #0b0f14; font-size: .78rem; }
.plan-import-table-wrap { max-width: 100%; overflow: auto; border: 1px solid #344252; border-radius: 10px; }
.plan-import-table-wrap table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .76rem; }
.plan-import-table-wrap th, .plan-import-table-wrap td { max-width: 260px; overflow: hidden; border-bottom: 1px solid #26303b; padding: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.plan-import-table-wrap th { position: sticky; top: 0; color: var(--accent); background: #0b0f14; }
.settings-past-plans { margin-top: 20px; border: 1px solid #26303b; border-radius: 14px; background: #0b0f14; }
.settings-past-plans > summary { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; padding: 0 18px; color: #d7dde5; font-weight: 850; cursor: pointer; }
.settings-past-plans > summary small { border: 1px solid #344252; border-radius: 999px; padding: 5px 9px; color: #94a1b2; font-size: .7rem; letter-spacing: .06em; }
.settings-past-plans[open] > summary { border-bottom: 1px solid #26303b; }
.settings-past-plans > .plan-overview-grid { padding: 16px; }
.settings-plan-status { margin: 0 0 18px; }
.settings-plan-status.error { border-color: #7e2530; color: #ffd8dc; background: #421219; }
.settings-plan-detail { border-top: 4px solid var(--accent); border-radius: 16px; background: #0b0f14; padding: 18px; }
.settings-plan-detail-header { position: sticky; z-index: 8; top: 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; border: 1px solid #344252; border-radius: 12px; background: rgba(11, 15, 20, .97); padding: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .28); backdrop-filter: blur(10px); }
.settings-plan-detail-header > div:nth-child(2) { min-width: 0; }
.settings-plan-detail-header span { color: var(--accent); font-size: .66rem; font-weight: 900; letter-spacing: .1em; }
.settings-plan-detail-header h3 { overflow: hidden; margin: 3px 0; text-overflow: ellipsis; white-space: nowrap; }
.settings-plan-detail-header p { overflow: hidden; margin: 0; color: #94a1b2; font-size: .85rem; text-overflow: ellipsis; white-space: nowrap; }
.settings-plan-detail-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.settings-plan-detail-actions .button { display: inline-grid; place-items: center; text-decoration: none; }
.settings-plan-duplicate-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .55fr) auto; align-items: end; gap: 12px; margin-top: 16px; border: 1px solid #344252; border-radius: 12px; background: #111821; padding: 16px; }
.settings-plan-duplicate-form h4 { grid-column: 1 / -1; margin: 0; }
.settings-plan-duplicate-form label { display: grid; gap: 7px; color: #b8c2cf; font-weight: 700; }
.settings-plan-duplicate-form .system-note { grid-column: 1 / 3; margin: 0; }
.settings-plan-duplicate-form > div { grid-column: 3; display: flex; justify-content: flex-end; gap: 8px; }
.settings-plan-detail-section-title { margin: 24px 0 12px; }
.settings-plan-detail-slots { display: grid; gap: 8px; }
.settings-plan-detail-slot { display: grid; grid-template-columns: 90px minmax(0, 1fr) 80px; align-items: center; gap: 14px; border: 1px solid #26303b; border-radius: 10px; background: #111821; padding: 12px 14px; }
.settings-plan-detail-slot time { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }
.settings-plan-detail-slot span { color: #94a1b2; text-align: right; font-variant-numeric: tabular-nums; }
.settings-plan-detail-slot.temporary { border-color: #725f24; }
.settings-plan-detail-extra { grid-column: 2 / -1; border-left: 4px solid #52a8ff; padding: 8px 12px; background: #0b1119; }
.settings-plan-detail-extra p { margin: 5px 0 0; color: #c8d1dc; line-height: 1.4; }
.settings-plan-modal { width: min(98vw, 78rem); }
.settings-plan-editor-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.settings-plan-editor-actions > div { display: flex; gap: 8px; }
.system-note { font-size: .85rem; }
.plan-assignment-list { display: grid; gap: 8px; max-height: 230px; margin-top: 12px; overflow: auto; border-top: 1px solid #26303b; padding-top: 12px; }
.plan-assignment-list small { margin-left: auto; color: #94a1b2; }
.projection-settings details { margin-top: 10px; border: 1px solid #344252; border-radius: 10px; background: #080b10; }
.projection-settings summary { cursor: pointer; padding: 11px 12px; color: #d7dde5; font-size: .82rem; font-weight: 850; }
.projection-settings details > div { display: grid; gap: 9px; max-height: 260px; overflow: auto; border-top: 1px solid #26303b; padding: 12px; }

/* Slot-Extra-Infos und bereichsspezifische Sondermeldungen */
.current-information { width: min(980px, 94vw); margin: 20px auto 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.view-only .current-information { max-height: 32dvh; margin-top: clamp(.35rem, 1dvh, 1rem); overflow: auto; scrollbar-gutter: stable; }
.slot-information { border-left: 6px solid #52a8ff; border-radius: 10px; background: #111821; padding: 12px 16px; text-align: left; }
.slot-information.priority-1, .information-edit-row.priority-1 { border-color: #ff4f64; }
.slot-information.priority-2, .information-edit-row.priority-2 { border-color: #ffb84d; }
.slot-information.scope-extra { border-color: #52a8ff; background: #111821; }
.slot-information.scope-special { background: #171820; }
.slot-information p, .information-edit-row p { margin: 6px 0 0; color: #d7dde5; line-height: 1.35; }
.information-modal { width: min(1000px, 94vw); }
.information-slot-select { margin: 16px 0; }
.information-list { display: grid; gap: 10px; max-height: 35vh; overflow: auto; margin-bottom: 18px; }
.information-edit-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; border-left: 5px solid #52a8ff; border-radius: 10px; background: #111821; padding: 12px; }
.information-edit-row small { display: block; margin-top: 8px; color: #94a1b2; }
.information-form { display: grid; grid-template-columns: 1fr 200px; gap: 14px; }
.information-form label:nth-of-type(2), .information-form fieldset, .information-form .modal-actions { grid-column: 1 / -1; }
.information-audiences { display: grid; gap: 8px; }
.information-audience { display: grid; grid-template-columns: 1fr 220px; align-items: center; gap: 12px; border-left: 4px solid var(--area-color); padding: 8px 12px; background: #0b0f14; }
.empty-information { color: #94a1b2; }
@media (max-width: 700px) {
  .access-header { flex-direction: column; }
  .settings-plan-overview-tools { grid-template-columns: 1fr; }
  .settings-plan-detail-header { grid-template-columns: auto minmax(0, 1fr); }
  .settings-plan-detail-actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .settings-plan-duplicate-form { grid-template-columns: 1fr; }
  .settings-plan-duplicate-form h4, .settings-plan-duplicate-form .system-note, .settings-plan-duplicate-form > div { grid-column: auto; }
  .settings-plan-duplicate-form > div { display: grid; grid-template-columns: 1fr 1fr; }
  .settings-plan-detail-slot { grid-template-columns: 70px minmax(0, 1fr); }
  .settings-plan-detail-slot span { grid-column: 2; text-align: left; }
  .information-form { grid-template-columns: 1fr; }
  .information-form > * { grid-column: 1 !important; }
  .information-audience, .information-edit-row { grid-template-columns: 1fr; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); }
body.timer-app { width: 100%; height: 100dvh; min-height: 100dvh; overflow: hidden; }
body.timer-app.controls-hidden {
    position: fixed;
    inset: 0;
    overscroll-behavior: none;
    touch-action: none;
}
button, input, select { font: inherit; }
button { touch-action: manipulation; }

.stage-shell {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at 50% 10%, rgba(49, 71, 95, .2), transparent 35%),
        var(--bg);
}

.stage-shell:not(.view-only) .stage-display {
    width: 100%;
    height: calc(100dvh - var(--controls-drawer-closed-height));
    min-height: 0;
    max-height: calc(100dvh - var(--controls-drawer-closed-height));
    overflow: hidden;
}
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display {
    height: calc(100dvh - var(--controls-drawer-open-height));
    max-height: calc(100dvh - var(--controls-drawer-open-height));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    justify-content: flex-start;
    justify-content: safe center;
    scrollbar-gutter: stable;
    scroll-padding-block: .5rem;
    gap: clamp(.12rem, .55dvh, .45rem);
    padding-block: max(.55rem, env(safe-area-inset-top)) .35rem;
}
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .current-clock { font-size: clamp(1rem, min(4vw, 4dvh), 3.4rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .current-program { font-size: clamp(1.1rem, min(5.8vw, 6.5dvh), 5rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .countdown { font-size: clamp(2.5rem, min(16vw, 15dvh), 12rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .ready-label,
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .ended-view { margin-top: .2rem; font-size: clamp(1.8rem, min(7vw, 9dvh), 5rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .planned-duration,
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .buffer { font-size: clamp(1.05rem, min(4.5vw, 4.5dvh), 3.5rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .scheduled-start { margin-top: .2rem; font-size: clamp(.78rem, 2.4dvh, 1.25rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .next-program { margin-top: .2rem; font-size: clamp(.72rem, min(1.8vw, 2.5dvh), 1.25rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .after-program { font-size: clamp(.68rem, min(1.4vw, 2.1dvh), 1rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .display-caption { font-size: clamp(.58rem, 1.7dvh, .82rem); }
body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .current-information { max-height: none; margin-top: .2rem; overflow: visible; }

.stage-display {
    flex: 1 1 auto;
    min-height: 58vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(.25rem, 1vh, 1rem);
    padding: max(1.2rem, env(safe-area-inset-top)) clamp(1rem, 4vw, 4rem) 1rem;
    text-align: center;
}

.current-clock {
    font-variant-numeric: tabular-nums;
    font-size: clamp(1.5rem, min(5vw, 8dvh), 5.2rem);
    font-weight: 500;
    letter-spacing: .05em;
    color: #d6dde7;
}
.plan-identity { color: var(--accent); font-size: clamp(.8rem, 1.4vw, 1.15rem); font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }

.current-program {
    max-width: 95vw;
    font-size: clamp(1.8rem, min(7vw, 12dvh), 7.5rem);
    font-weight: 850;
    line-height: .98;
    letter-spacing: -.035em;
    text-wrap: balance;
    text-transform: uppercase;
}

.ready-view, .running-view, .buffer-view { display: flex; flex-direction: column; align-items: center; }
.ready-view[hidden], .running-view[hidden], .buffer-view[hidden], .ended-view[hidden] { display: none; }
.ready-start { appearance: none; border: 1px solid transparent; border-radius: 1rem; background: transparent; color: inherit; padding: .35rem 1.1rem .45rem; }
.ready-start:not(:disabled) { cursor: pointer; touch-action: manipulation; }
.ready-start:not(:disabled)::after { content: "ANTIPPEN ZUM STARTEN"; margin-top: .55rem; color: var(--accent); font-size: clamp(.58rem, 1.25vw, .82rem); font-weight: 900; letter-spacing: .16em; }
.ready-start:not(:disabled) .ready-label { animation: ready-start-pulse 1.45s ease-in-out infinite; }
.ready-start:not(:disabled):hover, .ready-start:not(:disabled):focus-visible { border-color: rgba(54, 224, 123, .75); background: rgba(54, 224, 123, .07); outline: none; }
@keyframes ready-start-pulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(54, 224, 123, 0)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 1rem rgba(54, 224, 123, .72)); transform: scale(1.045); }
}
@media (prefers-reduced-motion: reduce) {
    .ready-start:not(:disabled) .ready-label { animation: none; }
}
.ready-label, .ended-view {
    margin-top: clamp(.5rem, 2vh, 2rem);
    color: var(--accent);
    font-size: clamp(2.2rem, min(9vw, 14dvh), 9rem);
    font-weight: 900;
    letter-spacing: .08em;
}
.next-plan-notice { display: grid; justify-items: center; gap: .35rem; width: min(95vw, 58rem); margin-top: 1rem; padding: clamp(1rem, 2vw, 1.6rem); border: 1px solid rgba(54, 224, 123, .48); border-radius: 1rem; background: rgba(9, 44, 26, .55); }
.next-plan-notice[hidden] { display: none; }
.next-plan-notice > span, .next-plan-notice > small { color: var(--accent); font-size: clamp(.72rem, 1.2vw, .95rem); font-weight: 900; letter-spacing: .14em; }
.next-plan-notice > strong { font-size: clamp(1.5rem, 4vw, 3.8rem); line-height: 1.05; text-transform: uppercase; }
.next-plan-notice > div { color: #c2cad5; font-size: clamp(.9rem, 1.7vw, 1.35rem); font-weight: 750; text-transform: uppercase; }
.next-plan-notice > time { margin-top: .35rem; font-size: clamp(2rem, 6vw, 5.6rem); font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; }
.planned-duration { font-size: clamp(1.7rem, min(5vw, 8dvh), 5rem); font-weight: 750; font-variant-numeric: tabular-nums; }
.scheduled-start { margin-top: .75rem; font-size: clamp(1.1rem, 2.2vw, 2.2rem); color: var(--muted); font-weight: 700; }
.scheduled-start small, .next-program small { display: inline-block; margin-left: .7em; font-size: .58em; color: #7f8a99; font-weight: 650; }

.countdown {
    font-variant-numeric: tabular-nums;
    font-size: clamp(4.5rem, min(20vw, 34dvh), 23rem);
    font-weight: 900;
    line-height: .82;
    letter-spacing: -.07em;
    color: var(--text);
    transition: color .18s linear;
}
.countdown.warning { color: var(--yellow); }
.countdown.danger { color: var(--red); }
.display-caption { color: var(--muted); font-size: clamp(.8rem, 1.6vw, 1.55rem); font-weight: 800; letter-spacing: .2em; }
.buffer { margin-top: clamp(.25rem, 1vh, 1rem); font-size: clamp(1.8rem, min(6vw, 9dvh), 6rem); line-height: 1; font-weight: 850; font-variant-numeric: tabular-nums; color: var(--accent); }
.buffer.negative { color: var(--red); }
.next-program { margin-top: clamp(.8rem, 2vh, 2rem); font-size: clamp(1rem, 2.3vw, 2.4rem); font-weight: 750; color: #c2cad5; text-transform: uppercase; }
.after-program { font-size: clamp(.85rem, 1.65vw, 1.65rem); font-weight: 700; color: var(--muted); text-transform: uppercase; }
.after-program[hidden] { display: none; }

.controls {
    position: fixed;
    z-index: 30;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 50dvh;
    overflow: auto;
    padding: 0 max(1rem, env(safe-area-inset-right)) var(--controls-drawer-safe-bottom) max(1rem, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: rgba(9, 12, 17, .96);
    box-shadow: 0 -1.2rem 3rem rgba(0, 0, 0, .42);
    backdrop-filter: blur(16px);
    transform: translateY(0);
    transition: transform .28s cubic-bezier(.2, .75, .25, 1);
    will-change: transform;
    overscroll-behavior: contain;
}
.controls[hidden] { display: none !important; }
.controls-hidden .controls {
    overflow: hidden;
    overscroll-behavior: none;
    transform: translateY(calc(100% - var(--controls-drawer-closed-height)));
}
.controls-hidden .controls > :not(.show-controls) { visibility: hidden; }
.primary-controls, .secondary-controls { display: grid; gap: .65rem; }
.primary-controls[hidden] { display: none; }
.primary-controls { grid-template-columns: minmax(6.5rem, .45fr) minmax(13rem, 1.55fr); margin: .8rem 0 .65rem; }
.secondary-controls { grid-template-columns: repeat(5, minmax(8rem, 1fr)); }
.button {
    min-height: 3.4rem;
    padding: .7rem 1rem;
    border: 1px solid #384455;
    border-radius: .75rem;
    background: var(--panel-2);
    color: var(--text);
    font-weight: 800;
    letter-spacing: .025em;
    cursor: pointer;
}
.button:hover { border-color: #68778b; background: #202a37; }
.button:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.button:disabled { opacity: .35; cursor: not-allowed; }
.button-primary, .button-start { background: var(--accent); color: #031108; border-color: var(--accent); }
.button-start { grid-column: 1 / -1; min-height: 4.5rem; font-size: 1.35rem; }
.button-next { background: #ecf1f7; color: #0a0d12; border-color: #ecf1f7; }
.button-back { color: #d8e3f0; }
.button-danger { background: var(--red); border-color: var(--red); color: #190307; }
.button-buffer { color: var(--accent); border-color: var(--accent); }
.button-admin-logout { color: #ff8c96; border-color: rgba(255, 79, 94, .55); }
.bridge-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; }
.bridge-preview small { color: var(--muted); font-size: .72rem; }
.button-logout { color: var(--red); margin-top: 1.5rem; }
.inline-status { min-height: 1.4rem; margin-top: .55rem; color: var(--muted); text-align: center; }
.inline-status.error, .inline-error { color: #ffd8dc; background: #421219; border: 1px solid #7e2530; border-radius: .6rem; padding: .7rem .9rem; }

.show-controls {
    position: sticky;
    z-index: 2;
    top: 0;
    display: grid;
    width: 100%;
    min-height: var(--controls-drawer-handle);
    place-items: center;
    gap: .15rem;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    padding: .35rem 1rem .5rem;
    background: rgba(15, 20, 27, .96);
    color: rgba(255,255,255,.65);
    font: inherit;
    font-size: .68rem;
    letter-spacing: .08em;
    cursor: pointer;
    touch-action: none;
}
.show-controls:hover, .show-controls:focus-visible { color: var(--text); outline: none; }
.drawer-grip { display: block; width: 3.4rem; height: .28rem; border-radius: 999px; background: rgba(255,255,255,.38); }
.show-controls strong { font-size: inherit; }
.controls-hidden .show-controls { color: rgba(255,255,255,.82); }
.controls-pin {
    position: absolute;
    z-index: 4;
    top: .45rem;
    right: max(1rem, env(safe-area-inset-right));
    display: grid;
    width: 2rem;
    min-width: 2rem;
    min-height: 2rem;
    place-items: center;
    border: 1px solid #46566b;
    border-radius: 999px;
    background: #111822;
    color: #aeb9c7;
    padding: .35rem;
    cursor: pointer;
}
.controls-pin svg { display: block; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.controls-pin.active svg { fill: rgba(54, 224, 123, .18); }
.controls-pin:hover, .controls-pin:focus-visible, .controls-pin.active { border-color: var(--accent); color: var(--accent); }
.live-indicator {
    position: fixed;
    z-index: 25;
    top: max(.7rem, env(safe-area-inset-top));
    left: max(.8rem, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: .38rem;
    color: rgba(255,255,255,.5);
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .12em;
}
.live-indicator .live-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 .8rem rgba(54,224,123,.7); }
.live-indicator.fallback .live-dot { background: var(--yellow); box-shadow: none; }
.live-indicator.offline { color: #ffd8dc; }
.live-indicator.offline .live-dot { background: var(--red); box-shadow: none; }
.view-mode-actions {
    position: fixed;
    z-index: 25;
    top: max(2.15rem, calc(env(safe-area-inset-top) + .8rem));
    right: max(.8rem, env(safe-area-inset-right));
    display: flex;
    gap: .45rem;
}
.view-mode-button {
    padding: .5rem .75rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 2rem;
    background: rgba(8,12,17,.5);
    color: rgba(255,255,255,.45);
    font-size: .72rem;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.view-mode-button:hover, .view-mode-button:focus-visible { color: var(--text); border-color: rgba(255,255,255,.5); }
.view-mode-logout { color: rgba(255, 114, 126, .78); }
.modal-open .stage-display, .modal-open #controls, .modal-open #showControls, .modal-open .view-mode-actions, .modal-open .live-indicator { pointer-events: none !important; }
.view-only .stage-display { min-height: 100dvh; }
.linked-slots {
    position: fixed;
    z-index: 18;
    top: max(4rem, calc(env(safe-area-inset-top) + 3.2rem));
    right: max(1rem, env(safe-area-inset-right));
    width: min(30rem, 34vw);
    max-height: calc(100dvh - 5rem);
    overflow: auto;
    border: 1px solid #344154;
    border-radius: 1rem;
    background: rgba(8, 12, 17, .94);
    padding: .8rem;
    box-shadow: 0 1.5rem 5rem rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
}
.has-linked-slots.view-only .stage-display { padding-right: min(38vw, 34rem); }
.has-linked-slots.view-only .stage-display > * {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.linked-slot-group + .linked-slot-group { margin-top: .9rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.linked-slot-group > header { margin-bottom: .55rem; }
.linked-slot-group > header span, .linked-slot-group > header strong { display: block; }
.linked-slot-group > header span { color: var(--blue); font-size: .62rem; font-weight: 900; letter-spacing: .1em; }
.linked-slot-group > header strong { margin-top: .2rem; font-size: .82rem; }
.linked-slot { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: center; column-gap: .75rem; row-gap: .28rem; border-left: 4px solid #526176; border-radius: .55rem; padding: .7rem; background: #111822; }
.linked-slot + .linked-slot { margin-top: .45rem; }
.linked-slot time { color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
.linked-slot div { min-width: 0; }
.linked-slot div strong, .linked-slot div small { display: block; }
.linked-slot > .linked-slot-time { grid-row: 1 / span 2; align-self: center; }
.linked-slot > div:not(.linked-slot-time) { grid-column: 2; overflow-wrap: anywhere; }
.linked-slot div small { margin-top: .18rem; color: var(--muted); font-size: .68rem; line-height: 1.3; }
.linked-slot-time small { font-size: .56rem !important; font-weight: 850; letter-spacing: .04em; }
.linked-slot.time-adjusted .linked-slot-time time { color: var(--yellow); }
.linked-slot.time-adjusted .linked-slot-time small { color: var(--yellow); }
.linked-slot > span { grid-column: 2; justify-self: start; color: var(--muted); font-size: .6rem; font-weight: 900; line-height: 1; letter-spacing: .07em; }
.linked-slot.state-running { border-color: var(--accent); background: var(--accent-dark); }
.linked-slot.state-running > span { color: var(--accent); }
.linked-slot.state-ready { border-color: var(--yellow); }
.linked-slot.state-ended { opacity: .5; }
.controls-hidden { cursor: none; }
.controls-hidden.cursor-active { cursor: default; }
.controls-hidden .stage-display { min-height: 0; }

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(0, 0, 0, .8);
}
.modal-backdrop[hidden], .modal[hidden] { display: none; }
.modal-open { overflow: hidden; }
.modal {
    --modal-padding: clamp(1rem, 3vw, 2rem);
    width: min(95vw, 48rem);
    max-height: 94dvh;
    overflow: auto;
    border: 1px solid #344154;
    border-radius: 1.1rem;
    padding: var(--modal-padding);
    background: #0e141c;
    box-shadow: 0 2rem 8rem rgba(0,0,0,.65);
}
.modal h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 3vw, 2.5rem); }
.modal p { color: var(--muted); }
.modal > .editor-header { position: sticky; z-index: 12; top: 0; flex: 0 0 auto; margin: calc(0px - var(--modal-padding)) calc(0px - var(--modal-padding)) 0; padding: var(--modal-padding); border-bottom: 1px solid var(--line); background: rgba(14, 20, 28, .98); box-shadow: 0 .7rem 1.5rem rgba(0, 0, 0, .22); backdrop-filter: blur(12px); }
.editor-modal, .library-modal, .information-modal { overflow: hidden; display: flex; flex-direction: column; }
.modal-scroll-body { min-height: 0; flex: 1 1 auto; overflow: auto; padding: 1rem .15rem .25rem; scrollbar-gutter: stable; }
.modal-editor-form { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.start-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin: 1.5rem 0; }
.option-button { display: flex; flex-direction: column; gap: .4rem; min-height: 6rem; align-items: center; justify-content: center; }
.option-button span { font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.manual-duration { display: grid; grid-template-columns: auto auto 1fr auto auto; gap: .6rem; align-items: center; margin-bottom: 1rem; }
.manual-duration strong { text-align: center; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.modal-actions, .editor-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 1.2rem; }
.editor-actions, .settings-plan-editor-actions, .modal-fixed-actions { z-index: 12; flex: 0 0 auto; margin: .8rem calc(0px - var(--modal-padding)) calc(0px - var(--modal-padding)); padding: .85rem var(--modal-padding); border-top: 1px solid var(--line); background: rgba(14, 20, 28, .98); box-shadow: 0 -.7rem 1.5rem rgba(0, 0, 0, .22); backdrop-filter: blur(12px); }
.editor-modal { width: min(98vw, 78rem); }
.library-modal { width: min(96vw, 64rem); }
.plans-modal { width: min(98vw, 86rem); }
.views-modal { width: min(98vw, 92rem); }
.comparison-modal { width: min(98vw, 92rem); height: min(94dvh, 60rem); overflow: hidden; display: flex; flex-direction: column; }
.comparison-modal > .editor-header { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; position: relative; z-index: 3; padding-bottom: .9rem; border-bottom: 1px solid var(--line); background: #0e141c; }
.comparison-header-actions { display: flex; align-items: center; gap: .55rem; }
.comparison-export-icon { display: inline-flex; width: auto; min-width: 4.6rem; padding: 0 .65rem; align-items: center; justify-content: center; gap: .35rem; text-decoration: none; }
.comparison-export-icon span { font-size: .67rem; font-weight: 900; letter-spacing: .06em; }
.comparison-export-icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.editor-header { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.editor-header p { margin: 0; }
.collaboration-badge { display: inline-flex; align-items: center; margin-left: .45rem; border: 1px solid rgba(54, 224, 123, .5); border-radius: 999px; padding: .18rem .45rem; color: var(--success); font-size: .62rem; font-weight: 900; letter-spacing: .06em; white-space: nowrap; }
.editor-subnav { display: flex; justify-content: flex-end; gap: .55rem; margin-top: .8rem; }
.event-fields { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.event-fields label { display: grid; gap: .35rem; font-weight: 700; }
.original-plan-control { display: flex; align-items: center; gap: .7rem; color: var(--muted); font-size: .88rem; }
input, select {
    min-height: 2.8rem;
    border: 1px solid #3b4859;
    border-radius: .55rem;
    padding: .45rem .65rem;
    background: #090d13;
    color: var(--text);
}
.slot-editor { display: grid; gap: .45rem; margin-bottom: .8rem; }
.settings-plan-slot { display: grid; gap: 0; }
.settings-plan-detail-slot > strong small { display: block; margin-top: .2rem; color: var(--blue); font-size: .62rem; letter-spacing: .06em; }
.settings-slot-extra { margin: -1px 10px 0; border: 1px solid #2b3745; border-radius: 0 0 .65rem .65rem; background: #0c1219; }
.settings-slot-extra summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 9px 12px; color: #b8c2cf; font-size: .72rem; font-weight: 900; letter-spacing: .07em; }
.settings-slot-extra summary small { color: #52a8ff; font-size: .65rem; }
.settings-slot-extra > div { display: grid; grid-template-columns: minmax(180px, .38fr) minmax(260px, 1fr); gap: 12px; border-top: 1px solid #2b3745; padding: 12px; }
.settings-slot-extra label { display: grid; gap: 6px; color: #b8c2cf; font-size: .78rem; font-weight: 800; }
.settings-slot-extra textarea { min-height: 4.8rem; resize: vertical; }
.slot-row { display: grid; grid-template-columns: 2.5rem 8rem minmax(13rem, 1fr) 9rem repeat(3, 3rem); gap: .45rem; align-items: center; padding: .45rem; border: 1px solid var(--line); border-radius: .65rem; background: #111822; }
.slot-row.with-information { grid-template-columns: 2.5rem 8rem minmax(13rem, 1fr) 9rem 9.5rem repeat(3, 3rem); }
.slot-row.dragging { opacity: .5; border-color: var(--blue); }
.slot-row.locked { border-color: #39404a; background: #0c1118; }
.slot-row.locked .drag-handle { cursor: not-allowed; opacity: .35; }
.drag-handle { cursor: grab; color: var(--muted); text-align: center; font-size: 1.3rem; }
.slot-duration { text-align: center; font-variant-numeric: tabular-nums; color: var(--muted); }
.slot-duration-adjust { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) 2.2rem; align-items: center; gap: .25rem; }
.slot-duration-adjust > button { min-height: 2.2rem; border: 1px solid #425267; border-radius: .45rem; background: #182332; color: var(--text); font: inherit; font-weight: 900; cursor: pointer; }
.slot-duration-adjust > button:hover:not(:disabled), .slot-duration-adjust > button:focus-visible { border-color: var(--blue); background: #20334a; }
.slot-duration-adjust > button:disabled { opacity: .35; cursor: not-allowed; }
.slot-shortening-option { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .3rem; color: var(--muted); font-size: .58rem; font-weight: 900; letter-spacing: .035em; cursor: pointer; }
.timer-mode-select { grid-column: 1 / -1; min-height: 1.8rem; padding: .2rem .35rem; border-color: #425267; color: var(--blue); font-size: .62rem; font-weight: 900; letter-spacing: .04em; }
.slot-shortening-option input { width: auto; margin: 0; accent-color: var(--yellow); }
.slot-shortening-option:has(input:checked) { color: var(--yellow); }
.slot-lock { display: block; margin-top: .18rem; color: var(--yellow); font-size: .58rem; line-height: 1.15; }
.slot-row .button { min-height: 2.8rem; padding: .35rem; }
.slot-time { display: grid; gap: .2rem; }
.slot-time small { color: var(--muted); font-size: .68rem; text-align: center; }
.temporary-row { border-color: #725f24; }
.comparison-panel { margin-top: 1.3rem; border: 1px solid var(--line); border-radius: .7rem; padding: .8rem; background: #0a0f15; }
.comparison-panel summary { cursor: pointer; font-weight: 850; letter-spacing: .04em; }
.comparison-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: .8rem; margin: .8rem 0; color: var(--muted); }
.comparison-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.comparison-scroll table { width: 100%; min-width: 58rem; border-collapse: collapse; font-size: .82rem; }
.comparison-scroll th, .comparison-scroll td { padding: .5rem; border-bottom: 1px solid var(--line); text-align: left; font-variant-numeric: tabular-nums; }
.comparison-scroll th { position: sticky; top: 0; z-index: 2; color: var(--muted); background: #0e141c; box-shadow: 0 1px 0 var(--line); }
.comparison-scroll td small { display: block; margin-top: .15rem; color: var(--muted); }
.comparison-scroll .comparison-swap-row { background: rgba(255, 202, 58, .09); }
.comparison-scroll .comparison-move-row { background: rgba(61, 162, 255, .07); }
.comparison-scroll td .comparison-swap-badge { display: inline-block; margin-top: .35rem; border: 1px solid rgba(255, 202, 58, .55); border-radius: .35rem; padding: .2rem .38rem; color: var(--yellow); background: rgba(255, 202, 58, .08); font-size: .65rem; font-weight: 900; letter-spacing: .035em; line-height: 1.3; }
.comparison-scroll .comparison-move-row .comparison-swap-badge { border-color: rgba(61, 162, 255, .55); color: var(--blue); background: rgba(61, 162, 255, .08); }
.comparison-scroll td .comparison-buffer-time { color: var(--accent); font-weight: 900; letter-spacing: .035em; }
.comparison-scroll td .comparison-correction-badge { display: inline-block; margin-top: .35rem; border: 1px solid rgba(255, 153, 51, .6); border-radius: .35rem; padding: .2rem .38rem; color: #ffb15c; background: rgba(255, 153, 51, .1); font-size: .65rem; font-weight: 900; letter-spacing: .025em; line-height: 1.3; }
.comparison-scroll .current-comparison-row { background: rgba(54, 224, 123, .13); }
.comparison-scroll .current-comparison-row:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.comparison-scroll .current-comparison-row td { border-top: 1px solid rgba(54, 224, 123, .65); border-bottom-color: rgba(54, 224, 123, .65); }
.comparison-scroll .current-comparison-row td:first-child { border-left: .3rem solid var(--accent); padding-left: .7rem; }
.next-program-forecast { color: var(--accent); font-weight: 900; letter-spacing: .035em; }
.day-plan-modal { width: min(94vw, 64rem); height: min(94dvh, 60rem); overflow: hidden; display: flex; flex-direction: column; }
.day-plan-list { display: grid; flex: 1 1 auto; min-height: 0; gap: .5rem; overflow-y: auto; padding: 1rem .15rem .25rem; scrollbar-gutter: stable; scroll-padding-block: 35%; }
.day-plan-row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 5rem; align-items: center; gap: .8rem; border: 1px solid var(--line); border-radius: .65rem; padding: .75rem .9rem; background: #111822; }
.day-plan-row time { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; }
.day-plan-row div strong, .day-plan-row div small { display: block; }
.day-plan-row div small { margin-top: .25rem; color: var(--muted); font-size: .74rem; }
.day-plan-row > span { color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .07em; text-align: right; font-variant-numeric: tabular-nums; }
.day-plan-row > span small { display: block; margin-top: .25rem; font-size: .68rem; letter-spacing: 0; }
.day-plan-row.past { border-color: #222c38; background: #0a0f15; opacity: .48; }
.day-plan-row.past time, .day-plan-row.past > span { color: #788493; }
.day-plan-row.past div strong { color: #a1a9b4; text-decoration: line-through; text-decoration-thickness: 1px; }
.day-plan-row.current { position: relative; border: 2px solid var(--accent); background: var(--accent-dark); box-shadow: 0 0 0 .18rem rgba(54, 224, 123, .13), 0 0 1.5rem rgba(54, 224, 123, .16); }
.day-plan-row.current::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: -.12rem; width: .3rem; border-radius: 999px; background: var(--accent); box-shadow: 0 0 .8rem rgba(54, 224, 123, .65); }
.day-plan-row.current > span { color: var(--accent); }
.day-plan-row:focus { outline: 3px solid rgba(54, 224, 123, .42); outline-offset: 2px; }
.day-plan-row.temporary:not(.current):not(.past) { border-color: #725f24; }
.comparison-running-badge { display: inline-block; margin-left: .6rem; border-radius: 999px; padding: .18rem .45rem; background: var(--accent); color: #031108; font-size: .66rem; font-weight: 900; letter-spacing: .08em; vertical-align: .1em; }
.library-editor { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.library-category-manager, .library-item-manager { display: grid; gap: .65rem; margin-top: 1rem; padding: .85rem; border: 1px solid var(--line); border-radius: .7rem; background: #101822; }
.library-category-manager h3, .library-item-manager h3 { margin: 0; font-size: .72rem; letter-spacing: .09em; color: var(--muted); }
.library-category-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; }
.library-category-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.library-category-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .4rem; }
.library-create { display: grid; grid-template-columns: minmax(10rem, 1.4fr) minmax(9rem, 1fr) minmax(9rem, .7fr) minmax(12rem, 1fr) auto; align-items: center; gap: .6rem; }
.library-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin-top: .8rem; }
.library-row { display: grid; grid-template-columns: minmax(9rem, 1.2fr) minmax(8rem, .9fr) minmax(8rem, .7fr); gap: .4rem; padding: .55rem; border: 1px solid #29384a; border-radius: .55rem; }
.library-row > .button { min-height: 2.35rem; }
.library-duration { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem; color: var(--muted); font-size: .62rem; font-weight: 900; }
.library-duration input { grid-column: 1; grid-row: 2; }
.library-duration span { grid-column: 2; grid-row: 2; }
.library-protect { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .62rem; font-weight: 900; }
.library-protect input { width: auto; margin: 0; accent-color: var(--yellow); }
.library-row .library-protect { grid-column: 1 / -1; }
.library-empty { margin: 0; color: var(--muted); font-size: .75rem; }
.plans-list { display: grid; gap: .5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.plan-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .8rem; padding: .75rem; border: 1px solid var(--line); border-radius: .7rem; background: #111822; }
.plan-row.active { border-color: var(--accent); background: var(--accent-dark); }
.plan-row div { min-width: 0; }
.plan-row strong, .plan-row span { display: block; }
.plan-row span, .plan-row small { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.views-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: .8rem; margin-top: 1rem; }
.view-overview-card { min-width: 0; border: 1px solid var(--line); border-top: .25rem solid var(--area-color, var(--blue)); border-radius: .8rem; padding: 1rem; background: #111822; }
.view-overview-card > header { display: flex; justify-content: space-between; gap: .7rem; align-items: start; margin-bottom: .8rem; }
.view-overview-card h3 { margin: 0; font-size: 1.2rem; }
.view-overview-card header span { display: block; margin-top: .25rem; color: var(--muted); font-size: .76rem; }
.view-overview-card header small { flex: 0 0 auto; border: 1px solid var(--area-color, var(--blue)); border-radius: 999px; padding: .25rem .45rem; color: var(--area-color, var(--blue)); font-size: .64rem; font-weight: 900; letter-spacing: .08em; }
.view-overview-timers { display: grid; gap: .55rem; }
.view-overview-timer { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(8.5rem, auto) 3rem; gap: 1rem; align-items: center; border: 1px solid #354256; border-radius: .65rem; padding: .85rem; background: #0b1017; }
.view-overview-timer.active { border-color: var(--accent); background: var(--accent-dark); }
.view-overview-timer-info { min-width: 0; }
.view-overview-slot-meta { display: block; color: var(--muted); font-size: .66rem; font-weight: 850; letter-spacing: .08em; }
.view-overview-slot-name { display: block; margin-top: .3rem; font-size: clamp(1.05rem, 2.4vw, 1.4rem); line-height: 1.15; overflow-wrap: anywhere; }
.view-overview-live { min-width: 8.5rem; border-left: 1px solid #354256; padding-left: 1rem; text-align: center; }
.view-overview-live strong { display: block; color: var(--muted); font-size: clamp(1.3rem, 2.4vw, 2.35rem); font-variant-numeric: tabular-nums; line-height: 1; }
.view-overview-live span { display: block; margin-top: .35rem; color: var(--muted); font-size: .62rem; font-weight: 900; letter-spacing: .08em; }
.view-overview-live.running strong, .view-overview-live.running span { color: var(--accent); }
.view-overview-live.scheduled strong { color: var(--text); }
.view-overview-live.scheduled span { color: var(--accent); }
.view-overview-live.warning strong, .view-overview-live.warning span { color: var(--yellow); }
.view-overview-live.danger strong, .view-overview-live.danger span { color: var(--red); }
.view-overview-open-button { display: grid; width: 3rem; min-width: 3rem; min-height: 3rem; padding: .65rem; place-items: center; color: var(--area-color, var(--blue)); border-color: var(--area-color, var(--blue)); }
.view-overview-open-button svg { display: block; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.view-overview-open-button.is-active { color: var(--accent); border-color: var(--accent); opacity: 1; }
.view-overview-empty { margin: 0; border: 1px dashed #354256; border-radius: .65rem; padding: .9rem; color: var(--muted); }

.timer-login { min-height: 100dvh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at 50% 20%, #172434, #05070a 55%); }
.login-shell { width: min(100%, 26rem); }
.login-form { display: grid; gap: .8rem; padding: 2rem; border: 1px solid var(--line); border-radius: 1.2rem; background: rgba(12,17,24,.94); box-shadow: 0 2rem 6rem rgba(0,0,0,.45); }
.login-form h1 { margin: .2rem 0 0; font-size: 2.3rem; }
.login-form p { margin: 0 0 .6rem; color: var(--muted); }
.login-secondary-action { display: flex; justify-content: center; margin-top: .75rem; }
.legacy-login { margin-top: .8rem; color: var(--muted); }
.legacy-login > summary { cursor: pointer; text-align: center; font-weight: 800; }
.legacy-login .login-form { margin-top: .7rem; padding: 1.2rem; }
.login-form label { font-weight: 700; }
.account-settings-grid, .member-settings-grid { align-items: start; }
.account-shell code { overflow-wrap: anywhere; }
.totp-secret { display: block; padding: .8rem; border: 1px solid var(--line); border-radius: .6rem; background: #05070a; color: var(--accent); font-size: 1.05rem; letter-spacing: .12em; }
.totp-uri { display: block; margin-top: .6rem; color: var(--muted); font-size: .75rem; }
.recovery-codes pre { columns: 2; white-space: pre-wrap; color: var(--accent); font: 800 .95rem/1.8 ui-monospace, monospace; }
.status-positive { color: var(--accent); font-weight: 850; }
.account-sessions { margin-top: 1rem; }
.account-sessions article { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-top: 1px solid var(--line); }
.account-sessions article div { display: grid; gap: .2rem; min-width: 0; }
.account-sessions article strong { overflow-wrap: anywhere; }
.account-sessions article small { color: var(--muted); }
.member-list { display: grid; gap: 1rem; }
.member-card > header { display: flex; justify-content: space-between; gap: 1rem; }
.member-card > header div { display: grid; gap: .2rem; }
.member-card > header small { color: var(--muted); }
.member-card > header span { color: var(--accent); font-size: .75rem; font-weight: 900; letter-spacing: .08em; }
.member-card.inactive { opacity: .68; }
.member-card form { display: grid; gap: .75rem; margin-top: .8rem; }
@media (max-width: 620px) { .recovery-codes pre { columns: 1; } .account-sessions article { align-items: stretch; flex-direction: column; } .project-create-form { grid-template-columns: 1fr; } .project-create-form > * { grid-column: 1 !important; } }
.login-mode-switch { min-width: 0; margin: .2rem 0; padding: 0; border: 0; }
.login-mode-switch legend { margin-bottom: .4rem; font-size: .78rem; font-weight: 850; letter-spacing: .09em; color: var(--muted); }
.login-mode-options { display: grid; grid-template-columns: 1fr 1fr; padding: .25rem; border: 1px solid #3b4859; border-radius: .7rem; background: #090d13; }
.login-mode-options label { position: relative; cursor: pointer; }
.login-mode-options input { position: absolute; width: 1px; height: 1px; min-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.login-mode-options span { display: grid; min-height: 3rem; place-items: center; border-radius: .5rem; color: var(--muted); font-weight: 900; letter-spacing: .08em; transition: background .15s ease, color .15s ease; }
.login-mode-options input:checked + span { background: var(--accent); color: #031108; }
.login-mode-options input:focus-visible + span { outline: 3px solid var(--blue); outline-offset: 2px; }
.brand-mark { display: grid; place-items: center; width: 3.3rem; height: 3.3rem; border-radius: .9rem; background: var(--accent); color: #041108; font-size: 2rem; font-weight: 950; }

@media (max-width: 1050px) {
    .secondary-controls { grid-template-columns: repeat(3, minmax(8rem, 1fr)); }
    .slot-row { grid-template-columns: 2.2rem 7.5rem minmax(11rem, 1fr) 8.5rem repeat(3, 2.8rem); }
    .slot-row.with-information { grid-template-columns: 2.2rem 7.5rem minmax(11rem, 1fr) 8.5rem 9rem repeat(3, 2.8rem); }
}

@media (max-height: 620px) and (orientation: landscape) {
    .stage-shell:not(.view-only) .stage-display { gap: .18rem; padding-block: max(.45rem, env(safe-area-inset-top)) .35rem; }
    .plan-identity { font-size: .72rem; }
    .current-clock { font-size: clamp(1.25rem, 6dvh, 2.25rem); }
    .current-program { font-size: clamp(1.5rem, 10dvh, 3.6rem); line-height: .94; }
    .countdown { font-size: clamp(3.5rem, 30dvh, 8.5rem); }
    .ready-label, .ended-view { margin-top: .2rem; font-size: clamp(2rem, 12dvh, 4.25rem); }
    .planned-duration, .buffer { font-size: clamp(1.5rem, 7dvh, 3rem); }
    .scheduled-start { margin-top: .2rem; font-size: .92rem; }
    .next-program { margin-top: .25rem; font-size: clamp(.82rem, 3.3dvh, 1.2rem); }
    .after-program { font-size: clamp(.72rem, 2.8dvh, 1rem); }
    .display-caption { font-size: .68rem; }
    .current-information { max-height: 18dvh; margin-top: .25rem; overflow: hidden; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display { gap: 0; padding-block: .12rem; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .plan-identity { font-size: .5rem; line-height: 1; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .current-clock { font-size: clamp(.68rem, 3.2dvh, .9rem); line-height: 1; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .current-program { font-size: clamp(.82rem, 4.6dvh, 1.25rem); line-height: .92; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .countdown { font-size: clamp(1.8rem, 12dvh, 3rem); line-height: .78; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .ready-label,
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .ended-view { margin-top: 0; font-size: clamp(1.1rem, 7dvh, 1.8rem); }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .planned-duration,
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .buffer { margin-top: 0; font-size: clamp(.9rem, 5dvh, 1.25rem); }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .scheduled-start { margin-top: 0; font-size: .52rem; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .next-program { margin-top: 0; font-size: clamp(.5rem, 2.6dvh, .66rem); line-height: 1; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .after-program { font-size: clamp(.46rem, 2.3dvh, .6rem); line-height: 1; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .display-caption { font-size: .45rem; line-height: 1; letter-spacing: .12em; }
    body:not(.controls-hidden) .stage-shell:not(.view-only) .stage-display .current-information { max-height: none; margin-top: 0; overflow: visible; }
}

@media (orientation: portrait), (max-width: 720px) {
    .guest-link-grid, .guest-link-created > div { grid-template-columns: 1fr; }
    .stage-shell.view-only { overflow-y: auto; overscroll-behavior: contain; }
    .stage-display { min-height: 54vh; padding-inline: .7rem; }
    .view-only .stage-display { padding-top: max(5.25rem, calc(env(safe-area-inset-top) + 5.25rem)); }
    .view-mode-actions {
        top: calc(env(safe-area-inset-top) + 2.15rem);
        left: max(.8rem, env(safe-area-inset-left));
        right: max(.8rem, env(safe-area-inset-right));
        justify-content: flex-end;
    }
    .view-mode-button { white-space: nowrap; }
    .current-program { font-size: clamp(2.2rem, 10vw, 5rem); }
    .countdown { font-size: clamp(5.5rem, 26vw, 12rem); }
    .primary-controls { grid-template-columns: minmax(5.5rem, .45fr) minmax(0, 1.55fr); }
    .secondary-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .button { font-size: .84rem; padding-inline: .45rem; }
    .start-options { grid-template-columns: 1fr; }
    .manual-duration { grid-template-columns: 1fr 1fr 1fr; }
    .manual-duration > span { grid-column: 1 / -1; }
    .manual-duration .button-start { grid-column: 1 / -1; }
    .slot-row { grid-template-columns: 2rem 1fr 1fr; }
    .slot-row.with-information { grid-template-columns: 2rem 1fr 1fr; }
    .slot-row select { grid-column: 2 / -1; }
    .settings-slot-extra > div { grid-template-columns: 1fr; }
    .slot-row > .slot-duration-adjust, .slot-row > .slot-duration { grid-column: 1 / -1; }
    .library-list, .library-category-list { grid-template-columns: 1fr; }
    .library-create { grid-template-columns: 1fr; }
    .plan-row { grid-template-columns: minmax(0, 1fr) auto; }
    .plan-row > div { grid-column: 1 / -1; }
    .plan-row small { display: none; }
    .view-overview-timer { grid-template-columns: minmax(0, 1fr) 3rem; gap: .8rem; }
    .view-overview-live { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid #354256; border-left: 0; padding: .8rem 0 0; }
    .view-overview-open-button { grid-column: 2; grid-row: 1; align-self: center; }
    .editor-header { flex-direction: column; }
    .settings-plan-editor-actions { align-items: stretch; flex-direction: column; }
    .settings-plan-editor-actions > div { display: grid; grid-template-columns: 1fr 1fr; }
    .area-settings-actions { grid-template-columns: 1fr 1fr; }
    .area-settings-actions span { grid-column: 1 / -1; grid-row: 1; }
    .comparison-modal > .editor-header { grid-template-columns: minmax(0, 1fr) auto; }
    .linked-slots { position: static; flex: 0 0 auto; order: 2; width: auto; max-height: none; margin: 0 .7rem 1rem; }
    .has-linked-slots.view-only .stage-display { min-height: 58vh; padding-right: .7rem; }
    .linked-slot { grid-template-columns: 5.8rem minmax(0, 1fr); }
    .linked-slot > span { grid-column: 2; }
    .day-plan-row { grid-template-columns: 4.2rem minmax(0, 1fr); }
    .day-plan-row > span { grid-column: 2; text-align: left; }
}

@media (max-width: 380px) {
    .view-mode-actions { gap: .3rem; }
    .view-mode-button { padding: .42rem .55rem; font-size: .67rem; }
}

@media (max-height: 700px) and (orientation: landscape) {
    .stage-display { min-height: 50vh; padding-block: .5rem; }
    .current-clock { font-size: clamp(1.4rem, 4vh, 2.2rem); }
    .current-program { font-size: clamp(2rem, 8vh, 4rem); }
    .countdown { font-size: clamp(5rem, 25vh, 10rem); }
    .buffer { font-size: clamp(2rem, 8vh, 4rem); }
    .next-program { margin-top: .35rem; }
    .button { min-height: 2.8rem; }
}

@media (max-height: 800px) and (orientation: landscape) {
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .stage-display { gap: .18rem; padding-block: max(.35rem, env(safe-area-inset-top)) .55rem; }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .current-clock { font-size: clamp(1.25rem, 4dvh, 2.2rem); }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .current-program { font-size: clamp(2rem, 7dvh, 4rem); }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .countdown { font-size: clamp(5rem, 22dvh, 10rem); }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .current-information { max-height: 18dvh; margin-top: .15rem; overflow: auto; }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .slot-information { padding: .55rem .8rem; }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .buffer { margin-top: .05rem; font-size: clamp(1.6rem, 6dvh, 3rem); }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .next-program { margin-top: .15rem; font-size: clamp(.72rem, 2.5dvh, 1rem); line-height: 1.05; }
    .controls-hidden.timer-status-running .stage-shell:not(.view-only) .after-program { font-size: clamp(.64rem, 2.1dvh, .85rem); }
    .controls-hidden.timer-status-ready .stage-display { gap: .16rem; padding-block: .35rem; }
    .controls-hidden.timer-status-ready .stage-display .ready-label { margin-top: .1rem; font-size: clamp(1.8rem, 7dvh, 3rem); }
    .controls-hidden.timer-status-ready .stage-display .planned-duration,
    .controls-hidden.timer-status-ready .stage-display .buffer { margin-top: .1rem; font-size: clamp(1.35rem, 5.5dvh, 2.6rem); }
    .controls-hidden.timer-status-ready .stage-display .scheduled-start { margin-top: .1rem; font-size: clamp(.68rem, 2.5dvh, 1rem); }
    .controls-hidden.timer-status-ready .stage-display .display-caption { font-size: clamp(.52rem, 1.8dvh, .72rem); }
    .controls-hidden.timer-status-ready .stage-display .next-program { margin-top: .15rem; font-size: clamp(.68rem, 2.7dvh, 1rem); }
    .controls-hidden.timer-status-ready .stage-display .after-program { font-size: clamp(.6rem, 2.2dvh, .85rem); }
}