:root {
  --midnight: #0b1220;
  --midnight-raised: #111b2e;
  --midnight-soft: #17233a;
  --cloud: #f7f9fc;
  --white: #ffffff;
  --green: #35e08d;
  --red: #ff2d55;
  --blue: #367bf5;
  --amber: #f5a524;
  --error: #c52233;
  --slate-900: #152033;
  --slate-700: #344054;
  --slate-600: #475467;
  --slate-500: #667085;
  --slate-400: #98a2b3;
  --slate-300: #d0d5dd;
  --slate-200: #e4e7ec;
  --slate-100: #f2f4f7;
  --border: #e5e9f0;
  --shadow-sm: 0 1px 3px rgba(13, 24, 43, .06), 0 1px 2px rgba(13, 24, 43, .04);
  --shadow-lg: 0 24px 80px rgba(11, 18, 32, .28);
  --radius: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { background: var(--cloud); color: var(--slate-900); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--cloud); touch-action: manipulation; }
button, input, select, textarea { font: inherit; }
button, select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(54, 123, 245, .34); outline-offset: 2px; }
button { border: 0; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 10px 13px; border-radius: 8px; background: var(--green); color: var(--midnight); font-size: 12px; font-weight: 800; text-decoration: none; transform: translateY(-140%); transition: transform .18s var(--ease); }
.skip-link:focus { transform: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 244px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 244px; padding: 22px 14px 16px; background: var(--midnight); color: var(--cloud); display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; color: var(--cloud); text-decoration: none; padding: 0 10px 22px; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand span { display: grid; line-height: 1.05; }
.brand strong { font-size: 19px; letter-spacing: -.03em; }
.brand small { color: var(--slate-400); font-size: 11px; margin-top: 4px; letter-spacing: .08em; text-transform: uppercase; }
.nav-list { display: grid; gap: 4px; }
.nav-item { width: 100%; min-height: 42px; padding: 0 12px; border-radius: 9px; background: transparent; color: #9da8ba; display: flex; align-items: center; gap: 12px; text-align: left; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--cloud); }
.nav-item:active { transform: scale(.985); }
.nav-item.active { background: rgba(53, 224, 141, .11); color: var(--green); }
.nav-item b { margin-left: auto; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; background: rgba(255,45,85,.14); color: #ff7d96; display: grid; place-items: center; font-size: 11px; }
.sidebar-lower { margin-top: auto; display: grid; gap: 10px; }
.network-mini { padding: 13px; border: 1px solid rgba(255,255,255,.08); border-radius: 11px; background: rgba(255,255,255,.03); }
.mini-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; }
.mini-top span { color: #aab4c4; display: flex; align-items: center; gap: 6px; }
.mini-top strong { font-size: 12px; }
.progress { height: 4px; margin: 11px 0 8px; border-radius: 10px; background: rgba(255,255,255,.08); overflow: hidden; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.network-mini small { font-size: 10px; color: #7f8ca0; }
.profile-button { width: 100%; padding: 9px 8px; border-radius: 10px; background: transparent; color: var(--cloud); display: grid; grid-template-columns: 32px 1fr 18px; align-items: center; gap: 9px; text-align: left; }
.profile-button:hover { background: rgba(255,255,255,.05); }
.profile-button > span:not(.avatar) { display: grid; min-width: 0; }
.profile-button strong { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-button small { font-size: 9px; color: var(--slate-400); margin-top: 3px; }
.profile-button svg { width: 16px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--midnight); background: var(--green); font-weight: 800; font-size: 10px; }

.main-area { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 20; height: 66px; padding: 0 28px; border-bottom: 1px solid rgba(11,18,32,.07); background: rgba(247,249,252,.93); backdrop-filter: blur(16px); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.global-search { width: min(490px, 46vw); height: 39px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--white); display: flex; align-items: center; gap: 8px; color: var(--slate-400); }
.global-search svg, .table-search svg { width: 17px; height: 17px; }
.global-search input, .table-search input { width: 100%; border: 0; outline: 0; background: transparent; color: var(--slate-900); font-size: 12px; }
.global-search input::placeholder, .table-search input::placeholder { color: var(--slate-400); }
.top-actions { display: flex; align-items: center; gap: 9px; }
.prototype-chip { padding: 5px 9px; border: 1px solid rgba(54,123,245,.18); border-radius: 99px; color: var(--blue); background: rgba(54,123,245,.06); font-size: 10px; font-weight: 700; }
.icon-button { position: relative; width: 38px; height: 38px; border-radius: 9px; background: transparent; color: var(--slate-600); display: grid; place-items: center; transition: background .2s, color .2s; }
.icon-button:hover { background: var(--slate-100); color: var(--slate-900); }
.top-actions .icon-button i { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--cloud); }
.primary-button, .secondary-button { min-height: 39px; padding: 0 14px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; font-weight: 700; transition: transform .2s var(--ease), box-shadow .2s, background .2s; }
.primary-button { color: var(--midnight); background: var(--green); box-shadow: 0 5px 14px rgba(53,224,141,.16); }
.primary-button:hover { background: #4be69a; box-shadow: 0 7px 20px rgba(53,224,141,.22); }
.primary-button:active, .secondary-button:active { transform: scale(.975); }
.primary-button svg { width: 16px; }
.secondary-button { border: 1px solid var(--border); background: var(--white); color: var(--slate-700); }
.secondary-button:hover { border-color: var(--slate-300); background: var(--slate-100); }
.mobile-menu { display: none; width: 40px; height: 40px; background: transparent; }
.mobile-menu span { display: block; width: 20px; height: 2px; margin: 4px auto; background: var(--midnight); }

.views { padding: 26px 28px 44px; max-width: 1720px; margin: 0 auto; }
.view { display: none; animation: viewIn .32s var(--ease); }
.view.active { display: block; }
@keyframes viewIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 23px; }
.page-heading.compact { align-items: center; }
.eyebrow { margin: 0 0 6px; color: var(--slate-500); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.page-heading h1 { margin: 0; color: var(--midnight); font-size: clamp(25px, 2.2vw, 34px); line-height: 1.12; letter-spacing: -.035em; }
.page-heading > div > p:last-child { margin: 7px 0 0; color: var(--slate-500); font-size: 12px; }
.select-control { display: grid; gap: 5px; min-width: 150px; }
.select-control span, .inventory-toolbar label > span { color: var(--slate-500); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
select, input[type="date"], input[type="week"], input[type="number"] { height: 39px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--white); color: var(--slate-700); font-size: 12px; }
.heading-actions { display: flex; gap: 9px; }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 13px; }
.kpi-card, .panel, .table-panel, .creative-card, .report-summary article { border: 1px solid var(--border); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-sm); }
.kpi-card { min-height: 142px; padding: 16px 17px; overflow: hidden; }
.kpi-label { display: flex; align-items: center; justify-content: space-between; color: var(--slate-500); font-size: 11px; font-weight: 600; }
.signal { width: 8px; height: 8px; border-radius: 2px; }
.signal.red { background: var(--red); }.signal.green { background: var(--green); }.signal.blue { background: var(--blue); }
.kpi-card > strong { display: block; margin-top: 17px; color: var(--midnight); font-size: 28px; line-height: 1; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.kpi-card strong em { color: var(--slate-400); font-size: 13px; font-style: normal; }
.kpi-card p { margin: 8px 0 0; color: var(--slate-500); font-size: 10px; }
.up { color: #168052; }.warn { color: #b45f06; }
.spark { height: 30px; margin: 3px -17px -16px; padding: 0 17px; display: flex; align-items: flex-end; gap: 4px; }
.spark i { flex: 1; border-radius: 2px 2px 0 0; background: rgba(255,45,85,.2); }
.spark i:nth-child(1){height:30%}.spark i:nth-child(2){height:47%}.spark i:nth-child(3){height:35%}.spark i:nth-child(4){height:64%}.spark i:nth-child(5){height:55%}.spark i:nth-child(6){height:75%}.spark i:nth-child(7){height:87%}
.blue-spark i { background: rgba(54,123,245,.17); }
.bullet { position: relative; height: 6px; margin-top: 15px; border-radius: 99px; background: var(--slate-100); }
.bullet span { display:block;height:100%;border-radius:inherit;background:var(--green)}
.bullet i { position:absolute;top:-3px;width:2px;height:12px;background:var(--midnight) }
.screen-dots { display:flex;gap:5px;margin-top:15px }.screen-dots span{height:6px;flex:1;border-radius:2px;background:var(--green)}.screen-dots .off{background:var(--amber)}

.dashboard-grid { margin-top: 13px; display: grid; grid-template-columns: 1.35fr .9fr; gap: 13px; align-items: start; }
.panel { padding: 17px; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.panel-head h2 { margin: 0; font-size: 14px; letter-spacing: -.015em; }
.panel-head p { margin: 4px 0 0; color: var(--slate-500); font-size: 10px; }
.text-button { padding: 7px 4px; background: transparent; color: var(--blue); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }
.text-button:hover { color: #185fd1; }
.text-button svg { width: 13px; height: 13px; }
.delivery-panel { min-height: 330px; }
.delivery-total { margin-top: 19px; display: flex; align-items: flex-end; justify-content: space-between; }
.delivery-total > div:first-child { display: grid; gap: 4px; }
.delivery-total span { color: var(--slate-500); font-size: 9px; }
.delivery-total strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.legend { display: flex; gap: 13px; }
.legend span { display: flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; }
.dot.green { background: var(--green); }.dot.slate { background: var(--slate-200); }.dot.amber { background: var(--amber); }
.chart-wrap { height: 190px; margin-top: 10px; display: grid; grid-template-columns: 32px 1fr; }
.y-labels { padding: 5px 0 22px; display: flex; flex-direction: column; justify-content: space-between; color: var(--slate-400); font-size: 8px; }
.bar-chart { position: relative; padding: 5px 7px 22px; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to bottom, transparent 0, transparent 40px, var(--slate-100) 41px); display: flex; align-items: flex-end; justify-content: space-around; gap: 9px; }
.bar-group { position: relative; width: 9%; height: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.bar-group i,.bar-group b { width: 8px; border-radius: 3px 3px 0 0; }.bar-group i{background:var(--slate-200)}.bar-group b{background:var(--green)}
.bar-group span { position: absolute; bottom: -18px; color: var(--slate-400); font-size: 7px; white-space: nowrap; }
.network-map-panel { min-height: 330px; }
.map-canvas { position: relative; height: 252px; margin: 16px -3px -2px; border-radius: 11px; overflow: hidden; background: #edf3f2; }
.map-canvas > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-road { fill:none;stroke:#cbd8d6;stroke-width:9;stroke-linecap:round;opacity:.8}.map-water{fill:#d5e9f1;stroke:none}
.map-pin { position: absolute; transform: translate(-50%,-50%); width: 31px; height: 31px; border-radius: 9px 9px 9px 2px; rotate: -45deg; color: var(--midnight); box-shadow: 0 3px 9px rgba(11,18,32,.18); }
.map-pin span { display:block;rotate:45deg;font-size:9px;font-weight:800 }.map-pin.active{background:var(--green)}.map-pin.warning{background:var(--amber)}
.map-summary { position:absolute;left:10px;right:10px;bottom:10px;height:42px;padding:0 12px;border:1px solid rgba(255,255,255,.55);border-radius:9px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);display:flex;align-items:center;gap:7px;font-size:9px;color:var(--slate-500)}
.map-summary strong{font-size:15px;color:var(--midnight)}.map-summary i{height:18px;width:1px;background:var(--border);margin:0 8px}
.attention-panel { grid-column: 1 / -1; }
.count-badge { width:22px;height:22px;border-radius:7px;background:rgba(255,45,85,.09);color:var(--red);display:grid;place-items:center;font-size:9px;font-weight:800 }
.attention-list { list-style:none;padding:0;margin:12px -8px -7px;display:grid;grid-template-columns:repeat(3,1fr); }
.attention-list li { min-width:0;padding:9px 12px;display:grid;grid-template-columns:34px 1fr 24px;align-items:center;gap:9px;border-right:1px solid var(--border) }.attention-list li:last-child{border-right:0}
.alert-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center}.alert-icon svg{width:15px}.alert-icon.red{background:rgba(255,45,85,.09);color:var(--red)}.alert-icon.amber{background:rgba(245,165,36,.12);color:#b56b00}.alert-icon.blue{background:rgba(54,123,245,.09);color:var(--blue)}
.attention-list strong{font-size:10px}.attention-list p{margin:3px 0 0;color:var(--slate-500);font-size:9px}.attention-list button{width:24px;height:24px;background:transparent;color:var(--slate-400)}.attention-list button:hover{color:var(--midnight)}.attention-list button svg{width:14px}

.filter-row,.content-toolbar,.inventory-toolbar { margin-bottom: 13px; display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.table-search{height:38px;min-width:220px;padding:0 10px;border:1px solid var(--border);border-radius:9px;background:var(--white);display:flex;align-items:center;gap:7px;color:var(--slate-400)}
.filter-button{height:34px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--slate-600);font-size:10px;font-weight:600}.filter-button:hover,.filter-button.active{border-color:rgba(54,123,245,.26);background:rgba(54,123,245,.06);color:var(--blue)}.filter-button span{margin-left:4px;color:var(--slate-400)}
.filter-row > select,.content-toolbar > select{height:34px;margin-left:auto}
.table-panel { overflow: hidden; }
table { width:100%;border-collapse:collapse;font-size:10px }
th { height:39px;padding:0 14px;background:#fafbfc;color:var(--slate-500);font-size:8px;text-align:left;text-transform:uppercase;letter-spacing:.06em }
td { height:66px;padding:0 14px;border-top:1px solid var(--border);color:var(--slate-600);vertical-align:middle }
tbody tr{transition:background .18s}tbody tr:hover{background:#fbfcfe}
td strong{display:block;color:var(--slate-900);font-size:10px}td small{display:block;color:var(--slate-400);font-size:8px;margin-top:3px}
.campaign-name{display:flex;align-items:center;gap:10px}.creative-thumb{width:48px;height:34px;border-radius:7px;background:#ddd;display:block;flex:none}.breakfast{background:linear-gradient(135deg,#ffbb56,#db4d30)}.fashion{background:linear-gradient(135deg,#262332,#b58f78)}.tech{background:linear-gradient(135deg,#367bf5,#111b2e)}.grocery{background:linear-gradient(135deg,#35e08d,#0f7b55)}.coffee{background:linear-gradient(135deg,#5f3b2b,#d2a678)}
.delivery-cell{display:flex;align-items:center;gap:8px}.delivery-cell>span{width:70px;height:5px;border-radius:99px;background:var(--slate-100);overflow:hidden}.delivery-cell b{display:block;height:100%;border-radius:inherit;background:var(--green)}.delivery-cell>strong{font-variant-numeric:tabular-nums;font-size:9px}
.status-pill{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:99px;font-size:8px;font-weight:800;white-space:nowrap}.status-pill.active{background:rgba(53,224,141,.12);color:#13754a}.status-pill.risk{background:rgba(255,45,85,.09);color:#d21d43}.status-pill.scheduled{background:rgba(54,123,245,.09);color:#2564c9}.status-pill.review{background:rgba(245,165,36,.12);color:#9e5b00}.muted{color:var(--slate-400);font-size:9px}
.table-footer{height:48px;padding:0 14px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;color:var(--slate-500);font-size:9px}.table-footer div{display:flex;gap:6px}.table-footer button{height:27px;padding:0 9px;border:1px solid var(--border);border-radius:7px;background:var(--white);font-size:9px}.table-footer button:disabled{opacity:.45;cursor:not-allowed}

.network-layout{display:grid;grid-template-columns:330px 1fr;gap:13px}.network-list-panel{padding-bottom:8px}.location-row{width:100%;min-height:65px;padding:10px 9px;margin-top:5px;border-radius:10px;background:transparent;display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:9px;text-align:left}.location-row:hover,.location-row.selected{background:var(--slate-100)}.location-row.selected{box-shadow:inset 3px 0 var(--green)}.location-icon{width:34px;height:34px;border-radius:9px;background:var(--white);border:1px solid var(--border);display:grid;place-items:center;color:var(--blue)}.location-icon svg{width:16px}.location-row strong{display:block;font-size:10px;color:var(--slate-900)}.location-row small{display:block;margin-top:3px;color:var(--slate-400);font-size:8px}.health-text{display:flex;align-items:center;gap:5px;color:#13754a;font-size:8px;font-weight:700}.health-text.warning{color:#9e5b00}
.device-detail .panel-head h2{margin-top:10px;font-size:18px}.device-hero{margin-top:17px;padding:17px;border-radius:12px;background:var(--midnight);color:var(--cloud);display:grid;grid-template-columns:260px 1fr;gap:22px}.screen-preview{position:relative;height:147px;padding:8px;border-radius:7px;background:#05070c;box-shadow:0 12px 25px rgba(0,0,0,.28)}.screen-content{height:100%;padding:16px;background:linear-gradient(135deg,#ffba55,#d34a2f);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.screen-content span{font-size:15px;letter-spacing:.08em}.screen-content strong{font-size:30px}.screen-content small{margin-top:7px;font-size:8px}.screen-preview>i{position:absolute;left:50%;bottom:-11px;width:48px;height:10px;transform:translateX(-50%);background:#2c3441;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}.device-data{display:grid;grid-template-columns:1fr 1fr;gap:18px}.device-data div{display:grid;align-content:center;gap:5px}.device-data span{font-size:8px;color:#8190a7;text-transform:uppercase;letter-spacing:.05em}.device-data strong{font-size:10px}.device-table-head{margin-top:19px;display:flex;align-items:center;justify-content:space-between}.device-table-head h3{font-size:12px}.device-table-head .table-search{height:34px;min-width:190px}.device-rows{border:1px solid var(--border);border-radius:10px;overflow:hidden}.device-rows>div{height:48px;padding:0 12px;border-bottom:1px solid var(--border);display:grid;grid-template-columns:12px 1.5fr .8fr .7fr .5fr;align-items:center;gap:8px;font-size:9px;color:var(--slate-500)}.device-rows>div:last-child{border-bottom:0}.device-rows strong{font-size:9px;color:var(--slate-900)}.device-rows b{color:#13754a}

.inventory-toolbar{align-items:end;padding:13px;border:1px solid var(--border);border-radius:12px;background:var(--white)}.inventory-toolbar label{display:grid;gap:5px}.inventory-toolbar label:first-child{min-width:245px}.inventory-legend{margin-left:auto;display:flex;gap:13px;padding-bottom:10px;font-size:9px;color:var(--slate-500)}.inventory-legend span{display:flex;align-items:center;gap:5px}.inv-dot{width:8px;height:8px;border-radius:3px}.inv-dot.available{background:var(--green)}.inv-dot.limited{background:var(--amber)}.inv-dot.sold{background:var(--red)}
.inventory-board{padding:0;overflow:hidden}.daypart-head,.daypart-row{display:grid;grid-template-columns:150px repeat(7,1fr);align-items:stretch}.daypart-head{height:44px;background:#fafbfc;border-bottom:1px solid var(--border)}.daypart-head>*{display:flex;align-items:center;justify-content:center;border-right:1px solid var(--border);font-size:9px}.daypart-head span{justify-content:flex-start;padding-left:14px;color:var(--slate-500)}.daypart-row{min-height:86px;border-bottom:1px solid var(--border)}.daypart-row:last-child{border-bottom:0}.daypart-row>div{padding:16px 14px;border-right:1px solid var(--border)}.daypart-row strong{display:block;font-size:10px}.daypart-row small{display:block;margin-top:5px;color:var(--slate-400);font-size:8px}.daypart-row button{margin:8px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;font-weight:800;transition:transform .2s}.daypart-row button:hover{transform:translateY(-2px)}.daypart-row button small{margin-top:4px;font-size:7px}.daypart-row button.available{background:rgba(53,224,141,.12);color:#13754a}.daypart-row button.limited{background:rgba(245,165,36,.12);color:#9e5b00}.daypart-row button.sold{background:rgba(255,45,85,.08);color:#cf2044}

.content-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.creative-card{overflow:hidden}.creative-preview{position:relative;height:150px}.creative-preview.portrait{background:linear-gradient(120deg,#7a251c 0 30%,#ffbd58 30% 68%,#d4472d 68%)}.duration,.format{position:absolute;bottom:8px;padding:4px 6px;border-radius:5px;background:rgba(11,18,32,.78);color:white;font-size:8px}.duration{right:8px}.format{left:8px}.creative-card>div:last-child{padding:13px}.creative-card h3{margin:10px 0 5px;font-size:11px}.creative-card p{margin:0;color:var(--slate-500);font-size:9px}.creative-card small{display:block;margin-top:12px;color:var(--slate-400);font-size:8px}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:13px}.report-summary article{padding:15px}.report-summary span{color:var(--slate-500);font-size:9px}.report-summary strong{display:block;margin-top:10px;font-size:22px;font-variant-numeric:tabular-nums}.report-summary small{display:block;margin-top:7px;color:var(--slate-400);font-size:8px}
.empty-view{min-height:70vh;display:none;place-items:center;text-align:center}.empty-view.active{display:grid}.empty-view svg{width:40px;height:40px;color:var(--slate-400)}.empty-view h1{font-size:24px}.empty-view p{max-width:480px;color:var(--slate-500)}

.drawer-backdrop{position:fixed;inset:0;z-index:60;background:rgba(7,12,22,.44);backdrop-filter:blur(3px);opacity:0;transition:opacity .26s}.drawer-backdrop.open{opacity:1}.campaign-drawer{position:fixed;z-index:70;top:0;right:0;width:min(560px,100vw);height:100vh;background:var(--white);box-shadow:var(--shadow-lg);transform:translateX(105%);transition:transform .36s var(--ease);display:grid;grid-template-rows:auto auto 1fr auto}.campaign-drawer.open{transform:none}.drawer-head{padding:20px 22px 13px;display:flex;align-items:center;justify-content:space-between}.drawer-head h2{margin:0;font-size:21px}.steps{list-style:none;margin:0;padding:0 22px 16px;display:flex;align-items:center}.steps li{position:relative;flex:1;display:flex;align-items:center;gap:6px;color:var(--slate-400);font-size:8px}.steps li:not(:last-child)::after{content:"";position:absolute;left:28px;right:6px;top:10px;height:1px;background:var(--border)}.steps span{position:relative;z-index:1;width:21px;height:21px;border-radius:50%;background:var(--slate-100);display:grid;place-items:center;font-size:8px}.steps li.active{color:var(--midnight)}.steps li.active span{background:var(--green);font-weight:800}.steps li.completed span{background:var(--midnight);color:var(--cloud)}
.drawer-content{overflow:auto;padding:0 22px 24px;border-top:1px solid var(--border)}.wizard-step{display:none;padding-top:21px}.wizard-step.active{display:block}.wizard-step h3{margin:0;font-size:16px}.wizard-step>p{margin:6px 0 20px;color:var(--slate-500);font-size:10px}.wizard-step>label,.form-grid label{display:grid;gap:6px;margin-bottom:14px}.wizard-step label>span,.form-grid label>span{font-size:9px;font-weight:700;color:var(--slate-700)}.wizard-step input,.wizard-step select,.wizard-step textarea{width:100%;border:1px solid var(--border);border-radius:9px;background:var(--white);color:var(--slate-900);font-size:11px}.wizard-step input,.wizard-step select{height:41px;padding:0 11px}.wizard-step textarea{min-height:84px;padding:11px;resize:vertical}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.target-summary{padding:13px;margin-bottom:14px;border-radius:10px;background:var(--midnight);color:var(--cloud);display:flex;align-items:center;gap:11px}.target-summary>span{width:34px;height:34px;border-radius:9px;background:rgba(54,123,245,.18);color:#79a6ff;display:grid;place-items:center}.target-summary strong{font-size:11px}.target-summary p{margin:4px 0 0;color:#8492a8;font-size:8px}.check-list{margin-bottom:14px;border:1px solid var(--border);border-radius:10px;overflow:hidden}.check-list label{min-height:52px;padding:0 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.check-list label:last-child{border-bottom:0}.check-list input{width:15px;height:15px;accent-color:var(--green)}.check-list strong{display:block;font-size:10px}.check-list small{display:block;margin-top:2px;color:var(--slate-400);font-size:8px}.token-input{display:flex;gap:7px}.token-input button{height:30px;padding:0 9px;border-radius:7px;background:rgba(54,123,245,.08);color:var(--blue);font-size:9px}.schedule-card{padding:14px;margin-bottom:14px;border:1px solid var(--border);border-radius:11px}.schedule-card>div:first-child{display:flex;align-items:center;gap:9px}.schedule-card svg{color:var(--blue)}.schedule-card span{display:grid}.schedule-card strong{font-size:10px}.schedule-card small{margin-top:3px;color:var(--slate-400);font-size:8px}.schedule-card .text-button{margin-left:auto}.time-range{margin-top:14px;display:flex;align-items:center;gap:9px}.time-range span{padding:8px 10px;border-radius:7px;background:var(--slate-100);font-size:10px;font-variant-numeric:tabular-nums}.time-range i{height:3px;flex:1;border-radius:10px;background:var(--green)}.availability-callout{padding:12px;border:1px solid rgba(53,224,141,.28);border-radius:9px;background:rgba(53,224,141,.06);display:flex;align-items:flex-start;gap:9px}.availability-callout strong{font-size:10px}.availability-callout p{margin:3px 0 0;color:var(--slate-500);font-size:8px}.review-block{border:1px solid var(--border);border-radius:10px;overflow:hidden}.review-block div{min-height:47px;padding:0 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:15px}.review-block div:last-child{border-bottom:0}.review-block span{color:var(--slate-500);font-size:9px}.review-block strong{font-size:9px;text-align:right}.readiness{margin-top:14px;display:grid;gap:8px}.readiness>div{padding:11px;border-radius:9px;background:var(--slate-100);display:flex;align-items:flex-start;gap:9px}.readiness strong{font-size:9px}.readiness small{display:block;margin-top:3px;color:var(--slate-500);font-size:8px}.drawer-footer{min-height:68px;padding:12px 22px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}.drawer-footer>div{display:flex;align-items:center;gap:10px}.drawer-footer .text-button{padding:9px}.toast{position:fixed;z-index:90;left:50%;bottom:24px;min-height:42px;padding:0 14px;border-radius:10px;background:var(--midnight);color:var(--cloud);box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;font-size:10px;transform:translate(-50%,80px);opacity:0;transition:.3s var(--ease)}.toast.show{transform:translate(-50%,0);opacity:1}

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .content-grid { grid-template-columns: repeat(2, 1fr); }
  .network-layout { grid-template-columns: 280px 1fr; }
  .device-hero { grid-template-columns: 210px 1fr; }
  .attention-list { grid-template-columns: 1fr; }.attention-list li{border-right:0;border-bottom:1px solid var(--border)}.attention-list li:last-child{border-bottom:0}
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 76px minmax(0,1fr); }
  .sidebar { width:76px;padding-inline:10px }.brand{padding-inline:9px}.brand span,.nav-item span,.nav-item b,.network-mini,.profile-button>span:not(.avatar),.profile-button>svg{display:none}.nav-item{justify-content:center;padding:0}.profile-button{display:flex;justify-content:center}.sidebar-lower{gap:5px}
  .main-area{grid-column:2}.topbar{padding-inline:18px}.views{padding:22px 18px 38px}.dashboard-grid{grid-template-columns:1fr}.network-layout{grid-template-columns:1fr}.network-list-panel{display:none}.report-summary{grid-template-columns:repeat(2,1fr)}
  .daypart-head,.daypart-row{grid-template-columns:120px repeat(7,100px)}.inventory-board{overflow:auto}.device-hero{grid-template-columns:1fr}.screen-preview{max-width:300px}
}
@media (max-width: 680px) {
  .app-shell{display:block}.sidebar{transform:translateX(-105%);width:244px;transition:transform .3s var(--ease)}.sidebar.open{transform:none}.sidebar .brand span,.sidebar .nav-item span,.sidebar .nav-item b,.sidebar .network-mini,.sidebar .profile-button>span:not(.avatar),.sidebar .profile-button>svg{display:grid}.sidebar .nav-item{justify-content:flex-start;padding:0 12px}.sidebar .profile-button{display:grid;justify-content:initial}
  .main-area{width:100%}.topbar{height:60px;padding-inline:10px}.mobile-menu{display:block}.global-search{display:none}.prototype-chip{display:none}.views{padding:19px 12px 32px}.page-heading{align-items:flex-start;flex-direction:column}.page-heading .select-control{width:100%}.kpi-grid,.content-grid,.report-summary{grid-template-columns:1fr}.top-actions .primary-button{min-width:44px;min-height:44px;padding:0 10px;font-size:0}.top-actions .primary-button svg{width:18px;height:18px}.icon-button,.mobile-menu{width:44px;height:44px}.select-control select,select,input[type="date"],input[type="week"],input[type="number"]{min-height:44px}.delivery-total{align-items:flex-start;gap:10px;flex-direction:column}.filter-row>.table-search,.content-toolbar>.table-search{width:100%}.filter-row>select,.content-toolbar>select{margin-left:0;width:100%}.table-panel{overflow:auto}.table-panel table{min-width:760px}.attention-list{grid-template-columns:1fr}.device-data{grid-template-columns:1fr}.device-rows>div{grid-template-columns:12px 1.4fr .8fr}.device-rows span:nth-of-type(2),.device-rows b{display:none}.inventory-toolbar{align-items:stretch;flex-direction:column}.inventory-toolbar label{width:100%;min-width:0!important}.inventory-legend{margin-left:0;padding:5px 0}.heading-actions{width:100%}.heading-actions>*{flex:1}.campaign-drawer{width:100%}.steps b{display:none}.form-grid{grid-template-columns:1fr}.drawer-footer{padding-inline:14px}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important; } }