:root { --bg:#f5f5f2; --surface:#fff; --ink:#20211e; --muted:#73736c; --line:#e5e4dd; --orange:#ff4b00; --orange-dark:#cb3c00; --orange-soft:#fff0e8; --green:#16815b; --blue:#2472a8; --dark:#171816; --shadow:0 12px 34px rgba(31,31,27,.08); }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-height:100vh; color:var(--ink); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.45; background:linear-gradient(120deg,#fbfbf9 0%,var(--bg) 55%,#efeee9 100%); display:flex; }
button,input,select,textarea { font:inherit; }
button { border:0; cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:3px solid rgba(255,75,0,.24); outline-offset:2px; }
i,svg { width:18px; height:18px; flex:0 0 auto; }
.sidebar { width:258px; min-height:100vh; padding:18px 14px; background:#181916; color:#fff; position:sticky; top:0; align-self:flex-start; }
.brand { height:68px; padding:9px; display:flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.12); border-radius:12px; background:rgba(255,255,255,.04); overflow:hidden; }
.brand-mark { width:46px; height:46px; flex:0 0 46px; border-radius:9px; overflow:hidden; background:#fff; }
.brand-mark img { width:100%; height:100%; object-fit:contain; display:block; }
.brand strong { display:block; font-size:17px; line-height:1.1; }
.brand span:not(.brand-mark) { display:block; margin-top:3px; color:#c6c6bf; font-size:11px; white-space:nowrap; }
.tabs { display:grid; gap:4px; margin-top:21px; }
.nav-label { color:#8e8e85; text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.08em; margin:17px 10px 4px; }
.tab { width:100%; height:42px; padding:0 10px; color:#d8d8d3; border:1px solid transparent; border-radius:8px; background:transparent; display:flex; align-items:center; gap:11px; font-size:13px; font-weight:700; text-align:left; transition:.16s ease; }
.tab svg { color:#aaa9a2; }
.tab:hover { color:#fff; background:rgba(255,255,255,.07); }
.tab.active { color:#201e1a; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.16); }
.tab.active svg { color:var(--orange); }
.event-box { margin-top:22px; padding:13px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:linear-gradient(140deg,rgba(255,75,0,.22),rgba(255,255,255,.04)); }
.event-box span { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:#fff; }
.event-box strong,.event-box small { display:block; }
.event-box strong { margin-top:8px; font-size:12px; }
.event-box small { margin-top:2px; color:#c4c4bd; font-size:11px; }
.app { flex:1; min-width:0; padding:30px 34px 48px; max-width:1600px; margin:0 auto; }
.topbar { min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.mobile-brand { display:none; }
.eyebrow { margin:0 0 5px; color:var(--orange-dark); font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1,h2 { letter-spacing:0; }
h1 { margin-bottom:0; font-size:26px; line-height:1.16; }
h2 { margin-bottom:0; font-size:18px; line-height:1.25; }
.actions,.report-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.icon-button { width:38px; height:38px; border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); display:grid; place-items:center; transition:.16s ease; }
.icon-button:hover { color:var(--orange); border-color:rgba(255,75,0,.4); transform:translateY(-1px); }
.quiet-danger:hover { color:#b63232; border-color:rgba(182,50,50,.35); }
.file-button input { display:none; }
.panel { display:none; } .panel.active { display:block; animation:appear .22s ease both; }
@keyframes appear { from { opacity:.3; transform:translateY(4px); } to { opacity:1; transform:none; } }
.event-hero { min-height:168px; padding:25px 28px; margin-bottom:16px; border-radius:12px; color:#fff; background:linear-gradient(115deg,#20221e 0%,#26271f 55%,#51311f 100%); position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.event-hero::after { content:""; position:absolute; width:260px; height:260px; right:-90px; top:-100px; border:44px solid var(--orange); border-radius:50%; opacity:.9; }
.event-hero > * { position:relative; z-index:1; }
.hero-kicker { display:inline-flex; align-items:center; gap:7px; color:#ffb58d; font-size:12px; font-weight:800; }
.event-hero h2 { font-size:27px; margin:8px 0 5px; }
.event-hero p { margin:0; color:#d0d0c9; font-size:14px; }
.hero-action,.primary { min-height:42px; padding:0 14px; border-radius:8px; background:var(--orange); color:#fff; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:800; box-shadow:0 10px 24px rgba(255,75,0,.2); }
.hero-action { background:#fff; color:#25231e; box-shadow:none; white-space:nowrap; }
.hero-action:hover,.primary:hover { transform:translateY(-1px); filter:brightness(.98); }
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:14px; }
.metric,.block { background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); }
.metric { min-height:132px; padding:16px; display:flex; flex-direction:column; justify-content:space-between; }
.metric.emphasis { border-color:rgba(255,75,0,.34); background:linear-gradient(130deg,#fff 0%,#fff4ee 100%); }
.metric span { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; font-weight:800; }
.metric span svg { color:var(--orange); }
.metric strong { margin-top:10px; color:#20211e; font-size:25px; line-height:1.05; }
.metric small { margin-top:4px; color:var(--muted); font-size:11px; }
.dashboard-grid,.split { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wide { grid-column:1/-1; }.section-gap { margin-top:14px; }
.block { padding:18px; min-width:0; }
.chart-block { min-height:280px; }
.block-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:15px; }
.block-head > div { display:flex; align-items:center; gap:10px; }.block-head h2 { font-size:16px; }
.block-head span { max-width:250px; color:var(--muted); text-align:right; font-size:12px; }.block-head strong { color:var(--orange-dark); font-size:15px; white-space:nowrap; }
.section-icon { width:32px; height:32px; border-radius:8px; color:var(--orange); background:var(--orange-soft); display:grid; place-items:center; }
.section-icon svg { width:17px; height:17px; }
.view-intro { display:flex; align-items:center; gap:11px; margin:0 0 17px; }.view-intro h2 { font-size:21px; }.view-intro p { margin:3px 0 0; color:var(--muted); font-size:13px; }
.form { display:grid; gap:12px; align-content:start; }
label { display:grid; gap:6px; color:#55554e; font-size:12px; font-weight:800; }
input,select,textarea { width:100%; min-height:41px; padding:9px 10px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; outline:0; }
input:focus,select:focus,textarea:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(255,75,0,.12); }
textarea { resize:vertical; }
.check { display:flex; align-items:center; gap:8px; color:var(--ink); }.check input { width:17px; min-height:17px; accent-color:var(--orange); }
.inline-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }.inline-fields.two { grid-template-columns:1fr 1fr; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
table { width:100%; min-width:580px; border-collapse:collapse; } th,td { padding:11px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; font-size:13px; } th { color:var(--muted); background:#fafaf8; font-size:10px; letter-spacing:.05em; text-transform:uppercase; } tr:last-child td { border-bottom:0; } td input { min-height:34px; padding:5px 7px; }
.mini { min-height:31px; padding:0 8px; border-radius:6px; display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; }.remove { color:#a53612; background:#fff0e8; }
.empty { margin:0; padding:20px; color:var(--muted); font-size:13px; }
.schedule-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }.day-card { overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#fff; }.day-title { padding:11px 12px; display:flex; justify-content:space-between; background:#fafaf8; font-size:13px; font-weight:800; }.day-card .table-wrap { border:0; border-radius:0; }.day-card table { min-width:510px; }.day-card th,.day-card td { padding:9px 8px; }
.category-list { display:grid; gap:13px; }.category-row { display:grid; gap:7px; }.category-row > div:first-child { display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:700; }.category-row > div:first-child span:last-child { color:var(--muted); }.bar { height:8px; overflow:hidden; border-radius:99px; background:#ecebe5; }.bar span { display:block; height:100%; border-radius:99px; background:var(--orange); }
.map-shell { padding:20px; overflow:hidden; color:#f7f6f0; border:1px solid rgba(255,75,0,.28); border-radius:12px; background:#07101a; box-shadow:var(--shadow); }.map-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid rgba(255,255,255,.12); }.map-header .eyebrow { color:#ff9a67; }.map-header h2 { display:flex; align-items:center; gap:9px; color:#fff; font-size:22px; }.map-header h2 svg { color:var(--orange); }.map-header > div > span { display:block; margin-top:5px; color:#c5c8ca; font-size:12px; }.ghost { min-height:38px; padding:0 12px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--ink); display:inline-flex; align-items:center; gap:7px; font-weight:800; }.compact { min-height:36px; font-size:12px; }
.camera-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(315px,365px); gap:16px; }.arena-board { position:relative; min-height:600px; overflow:hidden; touch-action:none; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:radial-gradient(circle at center,rgba(255,255,255,.08),transparent 34%),linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.07) 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,rgba(255,255,255,.07) 50%,transparent 50.2%),#0c1722; }.arena-ring { position:absolute; top:50%; left:50%; border:2px solid rgba(255,255,255,.15); border-radius:50%; transform:translate(-50%,-50%); }.ring-outer { width:77%; height:68%; }.ring-inner { width:23%; height:17%; }.flight-path { position:absolute; inset:9% 9%; border:2px dashed var(--orange); border-radius:50%; opacity:.9; }.stage-box,.foh-box,.runway-box,.venue-label,.grandstand { position:absolute; padding:10px 13px; border:1px solid rgba(255,255,255,.24); border-radius:6px; color:#fff; background:rgba(6,15,24,.82); text-align:center; font-size:12px; font-weight:800; }.stage-box { top:14%; left:50%; width:170px; transform:translateX(-50%); }.stage-box small { display:block; margin-top:4px; color:#c5c8ca; font-size:10px; }.runway-box { top:28%; left:50%; width:62px; height:144px; padding:7px; color:var(--orange); transform:translateX(-50%); writing-mode:vertical-rl; display:grid; place-items:center; }.foh-box { bottom:8%; left:50%; transform:translateX(-50%); }.venue-label { padding:7px 9px; color:#c5c8ca; font-size:10px; }.label-pavilions { top:7%; left:5%; }.label-parking { right:5%; bottom:6%; }.grandstand { top:47%; width:120px; padding:9px; color:#c5c8ca; font-size:9px; }.stand-left { left:7%; transform:rotate(-72deg); }.stand-right { right:7%; transform:rotate(72deg); }.coverage-beam { position:absolute; width:0; height:0; opacity:.28; }.beam-front { bottom:18%; left:47%; border-right:76px solid transparent; border-bottom:205px solid var(--orange); border-left:76px solid transparent; }.beam-side { right:13%; top:43%; border-top:53px solid transparent; border-right:178px solid var(--orange); border-bottom:53px solid transparent; }.beam-stage { top:24%; left:45%; border-right:59px solid transparent; border-top:150px solid var(--orange); border-left:59px solid transparent; }.camera-marker { position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%); width:50px; height:50px; padding:0; border:2px solid var(--orange); border-radius:50%; color:var(--orange); background:#07101a; transform:translate(-50%,-50%); display:grid; place-items:center; grid-template-rows:17px 16px; font-weight:900; cursor:grab; user-select:none; z-index:5; box-shadow:0 0 0 4px rgba(255,75,0,.15),0 10px 26px rgba(0,0,0,.34); }.camera-marker:active { cursor:grabbing; }.camera-marker.selected { outline:3px solid rgba(255,255,255,.7); }.camera-marker.tele { color:#ffc06e; border-color:#ffc06e; }.camera-marker.gimbal { color:#66d7ff; border-color:#66d7ff; }.camera-marker.reaction { color:#9effb7; border-color:#9effb7; }.camera-marker.drone { color:#d793ff; border-color:#d793ff; border-style:dashed; }.camera-marker svg { width:15px; height:15px; }.map-caption { position:absolute; left:12px; bottom:12px; padding:6px 8px; border:1px solid rgba(255,255,255,.12); border-radius:5px; color:#bdc1c2; background:rgba(5,11,18,.75); font-size:10px; }.camera-panel { max-height:600px; padding:14px; overflow:auto; border:1px solid rgba(255,255,255,.13); border-radius:10px; background:rgba(255,255,255,.035); }.camera-card { display:grid; grid-template-columns:34px minmax(0,1fr); gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid rgba(255,255,255,.12); }.camera-card:last-child { padding:0; margin:0; border:0; }.camera-number { width:32px; height:32px; border:2px solid var(--orange); border-radius:50%; color:var(--orange); display:grid; place-items:center; font-size:13px; font-weight:900; }.camera-card strong { display:flex; align-items:center; gap:7px; color:#fff; font-size:13px; }.camera-card strong svg { color:var(--orange); }.camera-card p { margin:5px 0 8px; color:#c9cccd; font-size:11px; }.camera-card label { color:#c9cccd; font-size:10px; }.camera-card select,.camera-card input { min-height:32px; padding:5px 7px; color:#fff; border-color:rgba(255,255,255,.16); background:#0b1723; }.camera-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:7px; }.camera-controls input { padding:0; accent-color:var(--orange); }.legend { display:grid; gap:8px; padding-top:13px; margin-top:13px; border-top:1px solid rgba(255,255,255,.12); color:#d0d2d2; font-size:11px; }.legend strong { color:#fff; font-size:12px; }.legend span { display:flex; align-items:center; gap:7px; }.legend span svg { width:15px; color:var(--orange); }
#summaryText { min-height:300px; margin-top:17px; background:#fcfcfa; }.mobile-nav,.quick-add,.quick-sheet { display:none; }.toast { position:fixed; left:50%; bottom:26px; z-index:30; padding:10px 13px; color:#fff; border-radius:7px; background:#20211e; box-shadow:var(--shadow); font-size:13px; font-weight:700; transform:translate(-50%,100px); transition:transform .2s ease; }.toast.show { transform:translate(-50%,0); }
@media (max-width:1180px) { .sidebar { width:220px; }.app { padding:26px; }.summary-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.schedule-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:920px) { body { display:block; }.sidebar { display:none; }.app { padding:20px 20px 104px; }.mobile-brand { display:flex; align-items:center; gap:7px; }.mobile-brand img { width:30px; height:30px; border-radius:7px; }.mobile-brand strong { font-size:15px; }.topbar { min-height:38px; margin-bottom:20px; }.page-heading { flex:1; }.page-heading h1 { font-size:20px; }.page-heading .eyebrow { display:none; }.actions { gap:5px; }.icon-button { width:34px; height:34px; }.dashboard-grid,.split,.camera-layout { grid-template-columns:1fr; }.camera-panel { max-height:none; }.mobile-nav { position:fixed; left:0; right:0; bottom:0; z-index:15; height:calc(67px + env(safe-area-inset-bottom)); padding:7px 7px calc(7px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:rgba(255,255,255,.97); display:grid; grid-template-columns:repeat(5,1fr); box-shadow:0 -8px 24px rgba(0,0,0,.07); }.mobile-tab { min-width:0; padding:0 3px; color:#73736c; background:transparent; display:grid; place-items:center; gap:2px; font-size:9px; font-weight:700; }.mobile-tab svg { width:18px; }.mobile-tab.active { color:var(--orange); }.quick-add { position:fixed; right:17px; bottom:calc(82px + env(safe-area-inset-bottom)); z-index:18; width:54px; height:54px; border-radius:50%; background:var(--orange); color:#fff; display:grid; place-items:center; box-shadow:0 12px 28px rgba(255,75,0,.34); }.quick-add svg { width:24px; height:24px; }.quick-add:active { transform:scale(.95); }.quick-sheet { position:fixed; inset:0; z-index:25; }.quick-sheet.open { display:block; }.quick-sheet-backdrop { position:absolute; inset:0; background:rgba(17,18,15,.46); backdrop-filter:blur(2px); }.quick-sheet-content { position:absolute; right:0; bottom:0; left:0; padding:10px 18px calc(24px + env(safe-area-inset-bottom)); border-radius:18px 18px 0 0; background:#fff; box-shadow:0 -18px 40px rgba(0,0,0,.16); animation:sheet-in .22s ease both; }.sheet-handle { width:36px; height:4px; margin:0 auto 13px; border-radius:99px; background:#d8d7d0; }.quick-sheet-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:15px; }.quick-sheet-head h2 { font-size:19px; }.quick-sheet-head .eyebrow { margin-bottom:2px; }.quick-options { display:grid; gap:8px; }.quick-options button { min-height:62px; padding:9px 4px; border-top:1px solid var(--line); color:var(--ink); background:#fff; display:grid; grid-template-columns:42px 1fr 22px; align-items:center; gap:10px; text-align:left; }.quick-options button:last-child { border-bottom:1px solid var(--line); }.quick-options strong,.quick-options small { display:block; }.quick-options strong { font-size:14px; }.quick-options small { margin-top:2px; color:var(--muted); font-size:11px; font-weight:600; }.quick-options > button > svg { color:#aaa9a2; }.quick-icon { width:38px; height:38px; border-radius:9px; display:grid; place-items:center; }.quick-icon.food { color:#b75c14; background:#fff0d9; }.quick-icon.transport { color:#2874a4; background:#e9f5fc; }.quick-icon.expense { color:#9f3c10; background:#fff0e8; }.quick-icon.budget { color:#5d43a6; background:#f0ebff; }.sheet-open { overflow:hidden; }.event-hero { min-height:154px; padding:20px; align-items:flex-start; flex-direction:column; }.event-hero h2 { font-size:23px; }.hero-action { min-height:36px; font-size:12px; }.event-hero::after { width:180px; height:180px; right:-75px; top:-85px; border-width:34px; }.arena-board { min-height:520px; } }
@keyframes sheet-in { from { transform:translateY(28px); opacity:.3; } to { transform:translateY(0); opacity:1; } }
@media (max-width:600px) { .app { padding:15px 14px 104px; }.topbar { gap:8px; }.page-heading h1 { font-size:17px; }.mobile-brand strong { display:none; }.summary-grid { grid-template-columns:1fr 1fr; gap:9px; }.metric { min-height:115px; padding:13px; }.metric strong { font-size:19px; overflow-wrap:anywhere; }.metric span { font-size:10px; }.metric small { font-size:10px; }.block { padding:14px; }.block-head { gap:10px; }.block-head h2 { font-size:15px; }.block-head span { font-size:10px; }.view-intro { align-items:flex-start; }.view-intro h2 { font-size:18px; }.view-intro p { font-size:12px; }.inline-fields,.inline-fields.two { grid-template-columns:1fr; }.chart-block { min-height:260px; }.schedule-grid { grid-template-columns:1fr; }.map-shell { padding:13px; }.map-header { display:grid; }.map-header h2 { font-size:19px; }.arena-board { min-height:430px; }.stage-box { top:15%; width:138px; font-size:10px; }.runway-box { top:28%; height:118px; }.grandstand { width:86px; }.label-pavilions,.label-parking { display:none; }.camera-marker { width:43px; height:43px; }.map-caption { max-width:170px; }.table-block { padding:12px; }.toast { bottom:102px; } }