:root {
  color-scheme: light;
  --ink: #142033;
  --muted: #667085;
  --line: #dfe4ea;
  --line-dark: #cbd3dc;
  --paper: #ffffff;
  --canvas: #f4f6f8;
  --navy: #0f172a;
  --navy-2: #17233a;
  --amber: #f5a524;
  --amber-dark: #df8b0d;
  --green: #087e58;
  --red: #d92d20;
  --room-width: 184px;
  --row-height: 68px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--canvas); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.app-header { height: 68px; padding: 0 clamp(18px, 4vw, 64px); display: flex; align-items: center; justify-content: space-between; color: white; background: var(--navy); border-bottom: 1px solid #26344c; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: white; font-size: 20px; font-weight: 800; letter-spacing: -.03em; text-decoration: none; }
.brand > span:last-child span { color: var(--amber); }
.brand-mark { width: 32px; height: 32px; padding: 7px 6px; display: flex; gap: 3px; align-items: end; border-radius: 9px; background: var(--amber); }
.brand-mark i { width: 5px; display: block; border-radius: 2px 2px 0 0; background: var(--navy); }
.brand-mark i:nth-child(1) { height: 9px; }.brand-mark i:nth-child(2) { height: 18px; }.brand-mark i:nth-child(3) { height: 13px; }
.privacy-badge { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cbd5e1; }
.privacy-badge span { color: #37d39a; font-size: 10px; }

main { min-height: calc(100vh - 68px); }
.view { padding: 44px clamp(18px, 4vw, 64px) 64px; }
.import-view { max-width: 1560px; margin: 0 auto; }
.hero { max-width: 820px; }
.eyebrow, .section-kicker { margin: 0 0 10px; color: #b36a00; font-size: 11px; font-weight: 800; letter-spacing: .16em; }
.hero h1 { margin: 0; color: var(--navy); font-size: clamp(36px, 5vw, 62px); line-height: .99; letter-spacing: -.055em; }
.hero h1 span { color: #637083; }
.hero-copy { max-width: 690px; margin: 22px 0 0; color: var(--muted); font-size: 16px; line-height: 1.65; }

.steps { max-width: 900px; margin: 38px 0 28px; display: grid; grid-template-columns: auto 1fr auto 1fr auto; align-items: center; }
.step { display: flex; align-items: center; gap: 11px; color: #8791a0; }
.step > span { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--line-dark); border-radius: 50%; background: #fff; font-size: 12px; font-weight: 800; }
.step strong, .step small { display: block; white-space: nowrap; }
.step strong { font-size: 13px; }.step small { margin-top: 2px; font-size: 11px; }
.step.active { color: var(--ink); }.step.active > span { border-color: var(--amber); background: var(--amber); color: var(--navy); }
.step-line { height: 1px; margin: 0 18px; background: var(--line); }

.sheet-card { overflow: hidden; border: 1px solid var(--line-dark); border-radius: 14px; background: var(--paper); box-shadow: 0 12px 40px rgb(15 23 42 / 7%); }
.sheet-toolbar { min-height: 82px; padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-bottom: 1px solid var(--line); }
.sheet-toolbar h2 { margin: 0; font-size: 20px; letter-spacing: -.025em; }
.sheet-toolbar .section-kicker { margin-bottom: 5px; }
.repertoire-range { margin-left: auto; display: grid; grid-template-columns: minmax(145px, 1fr) auto minmax(145px, 1fr); align-items: end; gap: 5px 9px; }
.repertoire-range label { display: grid; gap: 5px; }
.repertoire-range label > span { color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.repertoire-range input { height: 38px; padding: 0 10px; border: 1px solid var(--line-dark); border-radius: 7px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 650; }
.repertoire-range input:focus { border-color: var(--amber-dark); outline: none; box-shadow: 0 0 0 3px rgb(245 165 36 / 16%); }
.repertoire-range small { grid-column: 1 / -1; color: #8a94a3; font-size: 10px; }
.range-separator { padding-bottom: 10px; color: #98a2b3; font-size: 14px; }
.toolbar-actions, .schedule-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button { min-height: 38px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 8px; font-size: 13px; font-weight: 750; transition: .15s ease; }
.button:hover { transform: translateY(-1px); }.button:active { transform: translateY(0); }
.button.primary { color: var(--navy); background: var(--amber); border-color: var(--amber); box-shadow: 0 6px 14px rgb(245 165 36 / 20%); }
.button.primary:hover { background: #ffb83f; border-color: #ffb83f; }
.button.secondary { color: white; background: var(--navy-2); }
.button.ghost { color: #344054; background: white; border-color: var(--line-dark); }
.button.ghost:hover { background: #f8fafc; border-color: #aeb8c5; }
.button.large { min-height: 48px; padding-inline: 23px; font-size: 14px; }
.danger-text { color: var(--red) !important; }

.paste-hint { margin: 14px; min-height: 70px; padding: 14px 18px; display: flex; align-items: center; justify-content: center; gap: 13px; border: 1px dashed #d6a146; border-radius: 9px; outline: none; background: #fffaf0; color: #68430a; }
.paste-hint:focus { border-style: solid; box-shadow: 0 0 0 3px rgb(245 165 36 / 18%); }
.paste-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: #ffe7b9; font-weight: 900; }
.paste-hint strong, .paste-hint small { display: block; }.paste-hint strong { font-size: 13px; }.paste-hint small { margin-top: 3px; color: #8a6b38; font-size: 11px; }
.paste-hint.has-data { margin-bottom: 0; min-height: 44px; padding: 8px 14px; justify-content: flex-start; background: #f8fafc; border-color: var(--line-dark); color: #667085; }
.paste-hint.has-data .paste-icon { width: 26px; height: 26px; background: #e8edf3; }.paste-hint.has-data small { display: none; }

.sheet-wrap { max-height: 480px; overflow: auto; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.data-sheet { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: white; }
.data-sheet th { position: sticky; top: 0; z-index: 3; height: 42px; padding: 0 8px; border-right: 1px solid #364258; border-bottom: 1px solid #364258; color: #e8edf5; background: var(--navy-2); font-size: 10px; font-weight: 800; letter-spacing: .035em; text-align: left; white-space: nowrap; }
.data-sheet th.row-number { left: 0; z-index: 5; width: 44px; min-width: 44px; color: #8f9bad; text-align: center; }
.data-sheet td { height: 48px; padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; }
.data-sheet td.row-number { position: sticky; left: 0; z-index: 2; width: 44px; min-width: 44px; color: #8a94a3; background: #f5f7f9; font-size: 10px; font-weight: 700; text-align: center; }
.sheet-cell { width: 100%; height: 47px; padding: 8px; resize: none; overflow: hidden; display: block; border: 0; outline: none; background: transparent; color: #263244; font-size: 11px; line-height: 1.25; }
.sheet-cell:focus { position: relative; z-index: 1; box-shadow: inset 0 0 0 2px var(--amber); background: #fffdf8; }
.sheet-cell.time-cell { text-align: center; color: #253b58; font-weight: 700; }
.sheet-footer { min-height: 52px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.text-button { border: 0; color: #475467; background: none; font-size: 12px; font-weight: 750; }
.text-button:hover { color: var(--ink); }
.import-summary { color: var(--muted); font-size: 12px; }
.import-summary strong { color: var(--ink); }
.import-actions { margin-top: 18px; display: flex; justify-content: flex-end; gap: 10px; }
.validation-box { margin-top: 14px; padding: 13px 16px; border: 1px solid #f2b8b5; border-radius: 9px; color: #912018; background: #fff2f1; font-size: 13px; line-height: 1.5; }

.scheduler-view { max-width: none; padding: 28px clamp(16px, 2.5vw, 42px) 50px; }
.scheduler-titlebar { margin-bottom: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.scheduler-titlebar h1 { margin: 8px 0 4px; font-size: clamp(27px, 3.2vw, 42px); letter-spacing: -.045em; }
.scheduler-titlebar p { margin: 0; color: var(--muted); font-size: 13px; }
.back-button { padding: 0; border: 0; color: #667085; background: none; font-size: 12px; font-weight: 750; }
.back-button:hover { color: var(--ink); }
.control-bar { min-height: 72px; padding: 12px 16px; display: flex; align-items: end; flex-wrap: wrap; gap: 12px; border: 1px solid var(--line-dark); border-radius: 12px; background: white; }
.control { display: grid; gap: 5px; }
.control > span { color: #667085; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.control input:not([type="range"]), .control select { height: 36px; min-width: 118px; padding: 0 10px; border: 1px solid var(--line-dark); border-radius: 7px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 650; }
.zoom-control { min-width: 145px; }.zoom-control input { accent-color: var(--amber-dark); }
.legend { margin-left: auto; min-height: 36px; display: flex; align-items: center; gap: 14px; color: #667085; font-size: 11px; }
.legend span { display: flex; align-items: center; gap: 6px; }.legend i { width: 22px; height: 8px; display: inline-block; border-radius: 2px; }
.legend-ads { border: 1px solid #c5902b; background: repeating-linear-gradient(135deg, #ffe2a7, #ffe2a7 3px, #fff7e6 3px, #fff7e6 6px); }.legend-bar { background: #31578b; }.legend-buffer { background: repeating-linear-gradient(135deg, #d5dbe3, #d5dbe3 3px, #f6f8fa 3px, #f6f8fa 6px); }
.status-row { min-height: 46px; padding: 0 3px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.stats { color: #667085; font-size: 12px; }.stats strong { color: var(--ink); }
.conflict-status { font-size: 12px; font-weight: 750; }.conflict-status.ok { color: var(--green); }.conflict-status.warning { color: var(--red); }

.timeline-shell { position: relative; min-height: 430px; border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 12px 35px rgb(15 23 42 / 6%); }
.timeline-scroll { max-height: calc(100vh - 285px); min-height: 430px; overflow: auto; }
.timeline { width: max-content; min-width: 100%; background: white; }
.timeline-head, .room-row { display: flex; min-width: 100%; }
.timeline-head { position: sticky; top: 0; z-index: 20; height: 52px; background: var(--navy-2); }
.room-corner, .room-label { position: sticky; left: 0; z-index: 12; width: var(--room-width); min-width: var(--room-width); border-right: 1px solid #344157; }
.room-corner { z-index: 25; padding: 0 16px; display: flex; align-items: center; color: #d9e0e9; background: var(--navy-2); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.time-head, .room-track { position: relative; flex: none; }
.time-head { color: #dbe2eb; background: var(--navy-2); }
.hour-label { position: absolute; top: 0; height: 52px; padding: 18px 0 0 9px; border-left: 1px solid #354259; font-size: 10px; font-weight: 700; }
.room-row { height: var(--row-height); border-bottom: 1px solid var(--line); }
.room-row:last-child { border-bottom: 0; }
.room-label { padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; background: #f8fafc; }
.room-label strong { overflow: hidden; color: #253247; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.room-label span { margin-top: 4px; color: #8a94a3; font-size: 10px; }
.room-track { background-color: white; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--half-hour) - 1px), #eef1f4 calc(var(--half-hour) - 1px), #eef1f4 var(--half-hour)); }
.room-track::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(var(--hour) - 1px), #dce2e8 calc(var(--hour) - 1px), #dce2e8 var(--hour)); }
.room-row.drop-target .room-label { color: #6d4a0c; background: #fff4da; }.room-row.drop-target .room-track { background-color: #fffdf7; }
.now-line { position: absolute; z-index: 7; top: 0; bottom: 0; width: 2px; background: #ef4444; pointer-events: none; }.now-line::before { content: ""; position: absolute; top: -1px; left: -4px; width: 10px; height: 10px; border-radius: 50%; background: #ef4444; }

.event-card { position: absolute; z-index: 5; top: 9px; height: 50px; padding: 7px 9px 6px; overflow: visible; border: 1px solid var(--event-border); border-radius: 6px; color: var(--event-text); background: linear-gradient(135deg, var(--event-color), var(--event-color-2)); box-shadow: 0 3px 7px rgb(15 23 42 / 18%); font: inherit; text-align: left; touch-action: none; cursor: grab; user-select: none; }
.event-card:hover, .event-card:focus-visible { z-index: 9; outline: 2px solid white; box-shadow: 0 0 0 4px rgb(20 32 51 / 26%), 0 6px 15px rgb(15 23 42 / 22%); }
.event-card:active { cursor: grabbing; }.event-card.dragging { z-index: 30; opacity: .92; box-shadow: 0 12px 26px rgb(15 23 42 / 30%); }
.event-card.conflict { outline: 3px solid #ef4444; outline-offset: 1px; }
.event-card.selected { box-shadow: 0 0 0 3px #fff, 0 0 0 5px #16243a; }
.event-content { position: relative; z-index: 2; height: 100%; overflow: hidden; display: block; pointer-events: none; }
.event-ads { position: absolute; z-index: 1; inset: 0 auto 0 0; border-right: 1px solid rgb(255 255 255 / 55%); border-radius: 5px 0 0 5px; background: repeating-linear-gradient(135deg, rgb(255 224 158 / 74%), rgb(255 224 158 / 74%) 4px, rgb(255 248 231 / 58%) 4px, rgb(255 248 231 / 58%) 8px); pointer-events: none; }
.event-title { width: fit-content; max-width: 100%; margin: -2px 0 0 -3px; padding: 2px 5px; display: block; overflow: hidden; border-radius: 4px; color: #fff; background: rgb(10 19 34 / 78%); box-shadow: 0 1px 4px rgb(0 0 0 / 24%); font-size: 12px; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; text-shadow: 0 1px 2px rgb(0 0 0 / 70%); white-space: nowrap; }
.event-meta { margin-top: 3px; display: flex; justify-content: space-between; gap: 6px; font-size: 9px; font-weight: 800; opacity: 1; text-shadow: 0 1px 2px rgb(0 0 0 / 70%); white-space: nowrap; }
.event-ad-controls { position: absolute; z-index: 15; top: 3px; right: 3px; height: 23px; padding: 2px; display: flex; align-items: center; gap: 2px; border: 1px solid rgb(255 255 255 / 55%); border-radius: 5px; opacity: 0; pointer-events: none; background: rgb(15 23 42 / 92%); box-shadow: 0 4px 10px rgb(15 23 42 / 25%); transition: opacity .12s ease; cursor: default; }
.event-card:hover .event-ad-controls, .event-card:focus-within .event-ad-controls, .event-card.selected .event-ad-controls { opacity: 1; pointer-events: auto; }
.event-card.dragging .event-ad-controls { opacity: 0; }
.event-ad-controls button { width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 3px; color: white; background: rgb(255 255 255 / 16%); font-size: 13px; font-weight: 900; line-height: 1; }
.event-ad-controls button:hover { color: var(--navy); background: var(--amber); }
.event-ad-controls button:disabled { opacity: .35; cursor: not-allowed; }
.event-ad-controls output { min-width: 38px; color: white; font-size: 8px; font-weight: 800; text-align: center; white-space: nowrap; }
.event-buffer { position: absolute; z-index: -1; top: 8px; height: 50px; border: 1px solid #ccd3dc; border-left: 0; border-radius: 0 6px 6px 0; background: repeating-linear-gradient(135deg, #d7dde4, #d7dde4 4px, #f3f5f7 4px, #f3f5f7 8px); pointer-events: none; }
.empty-schedule { position: absolute; inset: 52px 0 0 var(--room-width); display: grid; place-content: center; text-align: center; color: #667085; }.empty-schedule strong, .empty-schedule span { display: block; }.empty-schedule strong { color: var(--ink); }.empty-schedule span { margin-top: 6px; font-size: 12px; }
.keyboard-tip { margin: 10px 2px 0; color: #8a94a3; font-size: 10px; }

.event-dialog { width: min(620px, calc(100vw - 28px)); padding: 0; border: 0; border-radius: 14px; color: var(--ink); box-shadow: 0 28px 80px rgb(15 23 42 / 32%); }
.event-dialog::backdrop { background: rgb(15 23 42 / 55%); backdrop-filter: blur(2px); }
.event-dialog form { padding: 0; }
.dialog-header { padding: 20px 22px; display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); }.dialog-header h2 { margin: 0; font-size: 22px; }.dialog-header .section-kicker { margin-bottom: 5px; }
.icon-button { width: 32px; height: 32px; border: 0; border-radius: 7px; color: #667085; background: #f2f4f7; font-size: 22px; }
.form-grid { padding: 20px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.form-grid label { display: grid; gap: 6px; }.form-grid label.full { grid-column: 1 / -1; }.form-grid label > span { color: #475467; font-size: 11px; font-weight: 800; }.form-grid input, .form-grid select, .form-grid textarea { width: 100%; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line-dark); border-radius: 7px; outline: none; color: var(--ink); background: white; font-size: 13px; }.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { border-color: var(--amber-dark); box-shadow: 0 0 0 3px rgb(245 165 36 / 16%); }.form-grid small { color: #8a94a3; font-size: 10px; }
.dialog-actions { padding: 14px 22px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; border-top: 1px solid var(--line); background: #f8fafc; }
.drag-tooltip { position: fixed; z-index: 100; padding: 7px 10px; border-radius: 6px; color: white; background: var(--navy); box-shadow: 0 5px 15px rgb(15 23 42 / 24%); font-size: 11px; font-weight: 800; pointer-events: none; }
.toast { position: fixed; z-index: 200; right: 22px; bottom: 22px; max-width: 360px; padding: 12px 16px; border-radius: 9px; color: white; background: var(--navy); box-shadow: 0 12px 35px rgb(15 23 42 / 28%); font-size: 12px; font-weight: 700; }

@media (max-width: 850px) {
  .view { padding-inline: 16px; }.privacy-badge { display: none; }.steps { grid-template-columns: 1fr; gap: 8px; }.step-line { display: none; }.step:not(.active) { display: none; }
  .sheet-toolbar, .scheduler-titlebar { align-items: flex-start; flex-direction: column; }.repertoire-range { width: 100%; margin-left: 0; }.toolbar-actions, .schedule-actions { width: 100%; }.schedule-actions .button { flex: 1; }
  .legend { width: 100%; margin-left: 0; }.status-row { align-items: flex-start; flex-direction: column; padding-block: 10px; }
  :root { --room-width: 135px; }.room-label { padding-inline: 9px; }.form-grid { grid-template-columns: 1fr; }.form-grid label.full { grid-column: auto; }.dialog-actions { grid-template-columns: 1fr 1fr; }.dialog-actions span { display: none; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }