:root {
  color-scheme: light;
  --ink: #2e3335;
  --ink-soft: #616660;
  --muted: #969a92;
  --line: #e8e9e4;
  --paper: #f5f6f2;
  --white: #fff;
  --olive: #234836;
  --olive-mid: #77856b;
  --olive-pale: #edf0e8;
  --sand: #f2eee5;
  --amber: #b38c49;
  --shadow: 0 12px 36px rgba(43, 48, 41, .045);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: 'Aptos', 'Segoe UI Variable', 'Segoe UI', sans-serif; font-size: 14px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }

.preview-ribbon { height: 30px; padding: 0 28px; display: flex; align-items: center; gap: 9px; background: #373b36; color: #e8e9e3; font-size: 10px; font-weight: 600; letter-spacing: .1em; }
.preview-dot, .demo-label > span { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: #c3cfad; }
.ribbon-divider { color: #858a80; padding: 0 4px; }
.ribbon-right { margin-left: auto; color: #aeb4a8; font-size: 9px; letter-spacing: .16em; }
.app-layout { min-height: calc(100vh - 30px); display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.app-layout.live-mode { min-height: 100vh; }

.sidebar { background: #fff; border-right: 1px solid #e9eae5; padding: 31px 17px 19px; display: flex; flex-direction: column; min-height: calc(100vh - 30px); position: sticky; top: 0; height: calc(100vh - 30px); }
.live-mode .sidebar { min-height: 100vh; height: 100vh; }
.brand { padding: 0 12px; display: inline-flex; width: fit-content; flex-direction: column; gap: 3px; }
.brand-logo { display: block; width: 140px; height: auto; }
.brand-subtitle { font-size: 8px; font-weight: 700; letter-spacing: .19em; color: #8c9188; }
.account-switcher { display: flex; align-items: center; gap: 10px; margin: 34px 2px 30px; border: 1px solid #ebede8; border-radius: 10px; padding: 10px; }
.account-mark { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 8px; background: #eff1e9; color: var(--olive); font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-weight: 800; }
.account-copy { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.account-copy small { font-size: 8px; font-weight: 700; letter-spacing: .14em; color: #9b9e97; }
.account-copy strong { font-size: 12px; font-weight: 600; }
.account-switcher .icon { width: 15px; color: #92978e; }
.nav-caption, .section-label { color: #a1a59c; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.nav-caption { padding: 0 12px; margin-bottom: 10px; }
.main-nav { display: grid; gap: 4px; }
.nav-link { color: #777c74; display: flex; align-items: center; gap: 12px; height: 43px; padding: 0 12px; border-radius: 8px; font-size: 12px; font-weight: 500; transition: background .18s, color .18s; }
.nav-link .icon { width: 17px; height: 17px; }
.nav-link:hover { background: #f6f7f3; color: var(--ink); }
.nav-link.active { background: #eef1e9; color: var(--olive); font-weight: 700; }
.nav-link.upcoming { cursor: pointer; }
.nav-soon { margin-left: auto; font-size: 9px; color: #a7aaa3; }
.sidebar-spacer { flex: 1; min-height: 28px; }
.support-card { background: #f6f7f3; border: 1px solid #edf0e9; padding: 15px; border-radius: 10px; }
.support-icon { display: grid; place-items: center; color: var(--olive); width: 29px; height: 29px; background: #e9ede3; border-radius: 8px; margin-bottom: 12px; }
.support-icon .icon { width: 16px; }
.support-card > strong { font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 12px; }
.support-card p { margin: 5px 0 12px; color: #878c83; font-size: 10px; line-height: 1.55; }
.support-link { display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: var(--olive); font-size: 10px; font-weight: 700; cursor: pointer; }
.support-link .icon { width: 13px; height: 13px; }
.sidebar-footer { border-top: 1px solid #eff0ed; padding: 16px 7px 0; margin-top: 19px; display: flex; align-items: center; gap: 7px; color: #9b9f97; font-size: 9px; }
.status-light { width: 6px; height: 6px; background: #8b9b77; border-radius: 100%; }

.main-column { min-width: 0; }
.topbar { height: 70px; padding: 0 42px; border-bottom: 1px solid #e9eae5; display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.76); }
.topbar-context { display: flex; align-items: center; gap: 9px; color: #92968e; font-size: 11px; }
.topbar-context .icon { width: 13px; transform: rotate(-90deg); }
.topbar-context strong { color: var(--ink); font-weight: 600; }
.topbar-actions { display: flex; align-items: center; gap: 17px; position: relative; }
.search-box { height: 36px; min-width: 220px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid #ebede8; border-radius: 7px; background: #fff; color: #969a92; }
.search-box .icon { width: 15px; height: 15px; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--ink); font-size: 10px; background: transparent; }
.search-box input::placeholder { color: #a5a89f; }
kbd { color: #a1a59e; white-space: nowrap; font-family: inherit; font-size: 9px; background: #f5f6f3; border: 1px solid #eceee8; border-radius: 4px; padding: 2px 4px; }
.icon-button { position: relative; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #ebede8; border-radius: 8px; background: #fff; color: #777d74; cursor: pointer; }
.icon-button .icon { width: 16px; height: 16px; }
.notification-dot { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border: 1px solid #fff; border-radius: 50%; background: #788767; }
.notification-popover { z-index: 5; position: absolute; right: 95px; top: 48px; width: 238px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 40px #20251c1a; }
.notification-popover strong { font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 12px; }
.notification-popover p { margin: 9px 0; color: #777d74; font-size: 11px; line-height: 1.55; }
.notification-popover small { color: #a0a49b; font-size: 9px; }
.top-profile { display: flex; align-items: center; gap: 9px; padding-left: 4px; color: #7e837a; font-size: 10px; }
.top-profile > .icon { width: 13px; }
.profile-avatar { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 50%; background: #e8ece1; color: var(--olive); font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 11px; font-weight: 800; }
.mobile-menu { display: none; }

.main-content { width: min(100%, 1500px); margin: 0 auto; padding: 36px 42px 22px; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #8a9084; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.eyebrow-line { width: 18px; height: 1px; background: var(--olive-mid); }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 5px; margin-top: 8px; font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: clamp(25px, 2.2vw, 31px); font-weight: 600; letter-spacing: -.045em; }
.page-heading p { color: #858a82; margin: 0; font-size: 11px; }
.period-select { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border: 1px solid #e6e8e2; border-radius: 7px; background: #fff; color: #6e746a; cursor: pointer; font-size: 10px; }
.period-select .icon { width: 14px; height: 14px; }
.period-select .icon:last-child { width: 12px; margin-left: 6px; }

.welcome-card { min-height: 214px; position: relative; display: flex; align-items: center; overflow: hidden; padding: 29px 42px; border-radius: 13px; background: #e9ede5; }
.welcome-copy { position: relative; z-index: 2; max-width: 470px; }
.welcome-kicker { display: flex; align-items: center; gap: 8px; color: #747e69; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.welcome-spark { width: 21px; height: 21px; display: grid; place-items: center; background: #dbe2d3; color: var(--olive); border-radius: 6px; }
.welcome-spark .icon { width: 13px; height: 13px; }
.welcome-card h2 { font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; margin: 14px 0 8px; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: -.04em; color: #394137; }
.welcome-card h2 em { color: #657458; font-style: normal; font-weight: 500; }
.welcome-card p { max-width: 410px; color: #70796b; margin: 0 0 14px; font-size: 10px; line-height: 1.65; }
.text-link, .panel-link, .quiet-link { display: inline-flex; align-items: center; gap: 8px; color: var(--olive); font-size: 10px; font-weight: 700; }
.text-link .icon, .panel-link .icon, .quiet-link .icon { width: 13px; height: 13px; }
.welcome-art { position: absolute; inset: 0 7% 0 auto; width: 38%; }
.art-orbit { position: absolute; border: 1px solid rgba(90,106,78,.14); border-radius: 50%; transform: rotate(-22deg); }
.orbit-one { width: 300px; height: 175px; right: 4%; top: 20px; }
.orbit-two { width: 350px; height: 210px; right: -2%; top: 2px; }
.art-card { position: absolute; width: 144px; height: 159px; border: 1px solid rgba(71,83,64,.08); border-radius: 7px; padding: 12px; background: rgba(255,255,255,.85); box-shadow: 0 12px 35px #4b5a4217; }
.art-back { right: 43%; top: 41px; transform: rotate(-10deg); background: #f5f4ee; }
.art-front { z-index: 1; right: 25%; top: 31px; transform: rotate(7deg); }
.art-mini-label { display: block; color: #848b7e; font-size: 5px; font-weight: 700; letter-spacing: .16em; }
.art-composition { height: 83px; margin: 10px 0; display: flex; gap: 4px; align-items: stretch; background: #e6e9df; padding: 8px; }
.art-composition span { flex: 1; background: #7a866a; opacity: .73; }
.art-composition span:nth-child(2) { background: #c6ac82; flex: 1.4; }
.art-composition span:nth-child(3) { background: #b4bbae; }
.art-line { display: block; height: 3px; width: 75%; border-radius: 2px; margin-top: 5px; background: #e7e8e2; }
.line-short { width: 34%; }.line-mid { width: 58%; }
.art-stamp { position: absolute; z-index: 2; right: 11%; top: 66px; width: 39px; height: 39px; border: 1px solid #89947d; border-radius: 50%; display: grid; place-items: center; color: #647258; font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 11px; font-weight: 800; line-height: .7; text-align: center; transform: rotate(9deg); }
.art-stamp small { font-size: 8px; }
.art-leaf { position: absolute; width: 16px; height: 34px; border-radius: 90% 0 90% 0; background: #849078; opacity: .44; }
.leaf-a { right: 18%; bottom: 30px; transform: rotate(33deg); }.leaf-b { right: 15%; bottom: 26px; transform: rotate(75deg) scale(.7); }
.welcome-index { position: absolute; right: 24px; bottom: 19px; display: flex; align-items: center; gap: 7px; color: #84907a; font-size: 8px; letter-spacing: .1em; }
.index-rule { width: 23px; height: 1px; background: #aeb8a5; }

.section-topline { display: flex; justify-content: space-between; align-items: flex-end; margin: 28px 0 12px; }
.section-topline h2, .panel h2 { margin: 5px 0 0; font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: -.025em; }
.demo-label { display: inline-flex; align-items: center; gap: 6px; color: #92978e; font-size: 9px; }
.demo-label > span { width: 5px; height: 5px; background: #abb69c; }
.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.metric-card { min-height: 122px; padding: 14px 16px 12px; border: 1px solid #ebede8; border-radius: 10px; background: #fff; box-shadow: var(--shadow); }
.metric-head { display: flex; justify-content: space-between; align-items: center; color: #858a82; font-size: 9px; }
.metric-icon { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 7px; }
.metric-icon .icon { width: 14px; height: 14px; }
.metric-icon.sage { color: #6d7c60; background: #edf1e8; }.metric-icon.amber { color: #a5854f; background: #f5f0e7; }.metric-icon.charcoal { color: #606862; background: #eff0ed; }.metric-icon.green { color: #56734e; background: #eaf1e7; }
.metric-value { margin: 7px 0 3px; font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 26px; line-height: 1; font-weight: 600; letter-spacing: -.055em; }
.metric-unit { margin-left: 6px; color: #9ca098; font-family: 'Aptos', 'Segoe UI Variable', 'Segoe UI', sans-serif; font-size: 9px; font-weight: 400; letter-spacing: 0; }
.metric-foot { display: flex; align-items: center; gap: 6px; color: #a1a49d; font-size: 8px; }
.metric-trend { display: inline-flex; align-items: center; gap: 2px; color: #637a56; font-weight: 700; }
.metric-trend .icon { width: 11px; height: 11px; transform: rotate(-45deg); }
.metric-note { color: #989d94; }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(330px, .92fr); gap: 14px; margin-top: 15px; }
.panel { background: #fff; border: 1px solid #ebede8; border-radius: 10px; box-shadow: var(--shadow); }
.performance-panel { padding: 19px 19px 14px; min-height: 306px; }
.panel-header { display: flex; justify-content: space-between; align-items: flex-start; }
.panel h2 { font-size: 13px; }
.more-button { border: 0; background: transparent; color: #959a91; font-size: 22px; line-height: 15px; letter-spacing: 2px; cursor: pointer; }
.chart-summary { display: flex; align-items: baseline; gap: 9px; margin-top: 17px; }
.chart-summary strong { font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.chart-summary > span:nth-child(2) { color: #9a9e97; font-size: 9px; }
.chart-change { display: inline-flex; align-items: center; gap: 3px; color: #637a56; font-size: 9px; font-weight: 700; }
.chart-change .icon { width: 11px; height: 11px; transform: rotate(-45deg); }
.chart-wrap { height: 147px; display: grid; grid-template-columns: 39px 1fr; margin-top: 9px; }
.chart-y-labels { display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0 1px; color: #a4a89f; font-size: 8px; }
.chart { width: 100%; height: 100%; overflow: visible; }
.chart-gridline { fill: none; stroke: #eef0eb; stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-area { fill: url(#chart-fill); }
.chart-line { fill: none; stroke: #68795a; stroke-width: 2.1; vector-effect: non-scaling-stroke; }
.chart-point { fill: #68795a; stroke: #fff; stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart-x-labels { display: flex; justify-content: space-between; margin: 0 2px 0 39px; color: #a4a89f; font-size: 8px; letter-spacing: .05em; }
.chart-note { display: flex; align-items: center; gap: 6px; margin-top: 13px; color: #858a82; font-size: 8px; }
.chart-legend { width: 6px; height: 6px; border-radius: 50%; background: #758467; }
.chart-disclaimer { margin-left: auto; color: #adb0aa; }

.next-deliveries-panel { padding: 19px 18px 14px; }
.count-badge { min-width: 27px; height: 25px; display: grid; place-items: center; color: #826d49; background: #f5f0e7; border-radius: 7px; font-size: 9px; font-weight: 700; }
.panel-description { margin: 8px 0 12px; color: #969a92; font-size: 9px; }
.work-list { display: grid; }
.work-item { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid #f0f1ee; }
.file-thumb { position: relative; width: 42px; height: 42px; flex: 0 0 auto; overflow: hidden; border-radius: 6px; }
.thumb-photo { background: linear-gradient(145deg, #d9c7a2, #9b9b73 55%, #758365); }
.thumb-sun { position: absolute; right: 8px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: #f5e5bb; }
.thumb-hill { position: absolute; left: -5px; right: -5px; bottom: -9px; height: 26px; border-radius: 50% 50% 0 0; background: #647253; transform: rotate(-13deg); }
.thumb-editorial { display: grid; place-items: center; background: #e9e2d5; color: #58634e; }
.thumb-type { font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 7px; font-weight: 800; letter-spacing: .15em; line-height: 1.3; text-align: center; }
.thumb-video { display: grid; place-items: center; background: linear-gradient(140deg, #bcc2b0, #808a77); }
.play-mark { display: grid; place-items: center; width: 19px; height: 19px; padding-left: 1px; border-radius: 50%; color: #647158; background: #fff9; font-size: 8px; }
.file-type { position: absolute; right: 3px; bottom: 3px; width: 15px; height: 15px; display: grid; place-items: center; border: 1px solid #fff; border-radius: 4px; background: #fff; color: #67745b; }
.file-type .icon { width: 9px; height: 9px; }
.work-copy { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 4px; }
.work-copy strong { overflow: hidden; color: #555a53; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.work-copy span { color: #a2a69f; font-size: 8px; }
.work-dot { width: 6px; height: 6px; border-radius: 50%; background: #c6a86c; }
.panel-link { margin-top: 10px; padding-top: 11px; width: 100%; border-top: 1px solid #f0f1ee; font-size: 9px; }

.deliveries-panel { margin-top: 15px; padding: 18px 19px 6px; }
.deliveries-header { align-items: center; margin-bottom: 14px; }
.quiet-link { color: #7b846f; font-size: 9px; }
.deliveries-table { width: 100%; }
.table-row { min-height: 48px; display: grid; grid-template-columns: minmax(200px, 1.4fr) minmax(95px, .75fr) minmax(110px, .8fr) minmax(95px, .65fr) 24px; gap: 12px; align-items: center; border-top: 1px solid #f0f1ee; color: #888d84; font-size: 9px; }
.table-heading { min-height: 29px; border-top: 0; color: #a2a69e; font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.delivery-name { min-width: 0; display: flex; align-items: center; gap: 9px; }
.delivery-name strong { overflow: hidden; color: #565b54; font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.delivery-icon { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; }
.delivery-icon .icon { width: 13px; height: 13px; }
.cover-one { color: #637458; background: #edf0e8; }.cover-two { color: #7c735e; background: #f2eee6; }.cover-three { color: #727c6c; background: #edf0ed; }
.status-pill { display: inline-flex; width: fit-content; align-items: center; gap: 5px; padding: 5px 7px; border-radius: 20px; font-size: 8px; }
.status-pill > span { width: 5px; height: 5px; border-radius: 50%; }
.status-ready { color: #617653; background: #edf2e9; }.status-ready > span { background: #859775; }
.status-progress { color: #96794a; background: #f6f1e7; }.status-progress > span { background: #c4a66e; }
.row-action { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 5px; background: transparent; color: #9b9f97; cursor: pointer; }
.row-action:hover { background: #f4f5f1; color: var(--olive); }
.row-action .icon { width: 14px; height: 14px; }
.main-footer { display: flex; align-items: center; justify-content: space-between; padding: 22px 2px 0; color: #a2a69f; font-size: 8px; }
.footer-star { color: #78876d; margin-left: 3px; }
.toast { position: fixed; z-index: 9; left: 50%; bottom: 22px; max-width: calc(100vw - 30px); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; padding: 11px 15px; border: 1px solid #42483e; border-radius: 8px; background: #383d36; color: #fff; box-shadow: 0 10px 30px #1f241c33; font-size: 11px; transition: opacity .18s, transform .18s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.auth-screen { min-height: 100vh; display: grid; place-items: center; position: relative; padding: 32px 20px 64px; background: radial-gradient(ellipse at 82% 18%, #e8ece3 0, transparent 34%), var(--paper); }
.auth-card { width: min(100%, 448px); padding: 42px 44px 36px; border: 1px solid #e7e9e2; border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 24px 70px rgba(36,47,35,.08); }
.auth-brand { display: inline-flex; flex-direction: column; gap: 4px; margin-bottom: 42px; }
.auth-brand img { width: 150px; height: auto; }
.auth-brand span { color: #8c9188; font-size: 8px; font-weight: 700; letter-spacing: .19em; }
.auth-kicker { display: flex; align-items: center; gap: 8px; color: #747c6d; font-size: 9px; font-weight: 700; letter-spacing: .16em; }
.auth-kicker > span { width: 7px; height: 7px; border-radius: 50%; background: var(--olive); }
.auth-card h1 { margin: 13px 0 9px; color: var(--ink); font-size: 36px; line-height: 1.08; }
.auth-card h1 em { color: var(--olive); font-style: normal; }
.auth-intro { max-width: 330px; margin: 0 0 27px; color: #7b8078; font-size: 12px; line-height: 1.65; }
.login-form { display: grid; gap: 9px; }
.login-form label { margin-top: 4px; color: #555b54; font-size: 10px; font-weight: 700; }
.login-form input { width: 100%; min-height: 43px; padding: 0 12px; border: 1px solid #e5e8e1; border-radius: 7px; outline: 0; background: #fff; color: var(--ink); font-size: 12px; transition: border-color .18s, box-shadow .18s; }
.login-form input:focus { border-color: #829174; box-shadow: 0 0 0 3px rgba(95,116,81,.12); }
.form-feedback { margin: 3px 0 0; padding: 10px 11px; border: 1px solid #ead8d3; border-radius: 7px; background: #fbf3f0; color: #874b3c; font-size: 10px; line-height: 1.5; }
.login-submit { min-height: 44px; margin-top: 8px; padding: 0 15px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 7px; background: var(--olive); color: #fff; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .18s, opacity .18s; }
.login-submit:hover { background: #193b2b; }
.login-submit:disabled { opacity: .65; cursor: wait; }
.login-submit .icon { width: 15px; height: 15px; }
.auth-footnote { margin: 18px 0 0; color: #a0a49b; font-size: 9px; text-align: center; }
.auth-side-note { position: absolute; right: 28px; bottom: 22px; display: flex; align-items: center; gap: 10px; color: #a1a69c; font-size: 8px; font-weight: 700; letter-spacing: .15em; }
.auth-side-note span + span { padding-left: 10px; border-left: 1px solid #d9ddd3; font-weight: 500; }
.logout-button { padding: 7px 10px; border: 1px solid #e7e9e3; border-radius: 6px; background: #fff; color: #687064; font-size: 10px; cursor: pointer; }
.logout-button:disabled { opacity: .6; cursor: wait; }
.client-select { flex: 1; min-width: 0; padding: 7px 22px 7px 8px; border: 1px solid #e5e8e1; border-radius: 6px; background: #fff; color: var(--ink); font-size: 10px; }
.account-switcher:has(.client-select:not([hidden])) .account-mark { flex: 0 0 33px; }
.session-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(160px, .55fr); align-items: center; gap: 20px; min-height: 190px; padding: 28px; }
.session-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #e8eee5; color: var(--olive); }
.session-mark .icon { width: 20px; height: 20px; }
.session-copy h2 { margin: 8px 0 7px; font-family: 'Segoe UI Variable Display', 'Segoe UI', sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.session-copy p { max-width: 420px; margin: 0; color: #82877e; font-size: 11px; line-height: 1.65; }
.session-facts { display: grid; gap: 12px; padding-left: 20px; border-left: 1px solid var(--line); }
.session-facts > div { display: grid; gap: 4px; }
.session-facts small { color: #a1a59c; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.session-facts strong { color: #555d53; font-size: 11px; font-weight: 600; }

@media (min-width: 1550px) { .main-content { padding-left: 56px; padding-right: 56px; } .topbar { padding-left: 56px; padding-right: 56px; } }
@media (max-width: 1180px) { .app-layout { grid-template-columns: 220px minmax(0, 1fr); }.sidebar { padding-left: 14px; padding-right: 14px; }.topbar { padding-left: 28px; padding-right: 28px; }.main-content { padding-left: 28px; padding-right: 28px; }.dashboard-grid { grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr); }.welcome-art { right: 1%; width: 39%; }.art-front { right: 22%; } }
@media (max-width: 980px) { .app-layout { grid-template-columns: 200px minmax(0, 1fr); }.topbar { padding: 0 22px; }.main-content { padding: 30px 22px 20px; }.metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-grid { grid-template-columns: 1fr; }.next-deliveries-panel { min-height: 0; }.welcome-art { opacity: .62; right: -6%; }.table-row { grid-template-columns: minmax(175px, 1.4fr) minmax(75px, .7fr) minmax(85px, .75fr) minmax(85px, .65fr) 24px; gap: 7px; } }
@media (max-width: 720px) { .preview-ribbon { padding: 0 14px; font-size: 8px; }.ribbon-right { display: none; }.app-layout { display: block; }.sidebar { z-index: 10; position: fixed; top: 30px; bottom: 0; left: 0; width: 260px; height: calc(100dvh - 30px); min-height: 0; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 12px 0 32px #1c211a20; }.sidebar.open { transform: translateX(0); }.topbar { height: 60px; padding: 0 15px; }.mobile-menu { display: grid; margin-right: 10px; }.topbar-context { margin-right: auto; }.topbar-actions { gap: 9px; }.search-box { min-width: 34px; width: 34px; justify-content: center; padding: 0; border: 0; background: transparent; }.search-box input, .search-box kbd { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }.search-box .icon { width: 17px; height: 17px; color: #777d74; }.icon-button { width: 32px; height: 32px; }.top-profile { gap: 0; }.profile-name, .top-profile > .icon { display: none; }.main-content { padding: 25px 15px 18px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 13px; margin-bottom: 18px; }.page-heading p { max-width: 320px; line-height: 1.5; }.period-select { align-self: flex-start; }.welcome-card { min-height: 230px; padding: 24px 21px; align-items: flex-start; }.welcome-copy { max-width: 100%; }.welcome-card h2 { font-size: 21px; }.welcome-card p { max-width: 76%; font-size: 9px; }.welcome-art { width: 45%; right: -16%; top: 90px; opacity: .3; }.welcome-index { right: 13px; bottom: 12px; }.section-topline { align-items: flex-start; flex-direction: column; gap: 8px; margin-top: 24px; }.metrics-grid { gap: 8px; }.metric-card { min-height: 116px; padding: 12px 11px; }.metric-head { gap: 4px; font-size: 8px; }.metric-icon { width: 24px; height: 24px; }.metric-value { font-size: 23px; }.metric-unit { font-size: 8px; }.metric-foot { font-size: 7px; }.performance-panel, .next-deliveries-panel { padding: 16px 13px 13px; }.chart-summary { gap: 7px; }.chart-summary strong { font-size: 20px; }.deliveries-panel { overflow: hidden; padding: 16px 13px 6px; }.deliveries-table { min-width: 620px; }.deliveries-panel { overflow-x: auto; }.main-footer { flex-direction: column; align-items: flex-start; gap: 7px; padding-top: 18px; }.notification-popover { right: 41px; top: 43px; } }
@media (max-width: 720px) { .live-mode .sidebar { top: 0; height: 100dvh; } }
@media (max-width: 720px) { .auth-card { padding: 30px 24px 27px; }.auth-brand { margin-bottom: 34px; }.auth-side-note { right: 16px; bottom: 14px; font-size: 7px; }.session-panel { grid-template-columns: auto minmax(0, 1fr); gap: 15px; padding: 20px 17px; }.session-copy { min-width: 0; }.session-copy h2 { font-size: 16px; }.session-facts { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }


/* V1 — paid traffic and administration, keeping the approved VINTon palette. */
.traffic-app select,.traffic-app input,.editor-dialog input,.editor-dialog select { font:inherit; }
.traffic-app .account-copy { gap:5px; }
.traffic-app .client-select { max-width:155px; width:100%; padding:0 15px 0 0; border:0; background-color:transparent; font-size:12px; font-weight:600; color:var(--ink); }
.traffic-app .account-switcher { margin-bottom:27px; }
.traffic-app .admin-caption { margin-top:27px; }
.traffic-side-note { margin:10px 8px; padding:21px 13px; border-radius:9px; background:linear-gradient(140deg,#eef1e9,#f7f7f3); }
.traffic-side-note>span { font-size:8px; letter-spacing:.17em; color:#8b9585; }
.traffic-side-note strong { display:block; margin:12px 0; font-size:16px; line-height:1.35; font-weight:500; letter-spacing:-.035em; color:var(--olive); }
.traffic-side-note p { margin:0; color:#92998c; font-size:9px; }
.traffic-heading h1 { margin-bottom:6px; }
.connection-pill,.neutral-badge,.data-badge { display:inline-flex; align-items:center; gap:7px; padding:7px 10px; border-radius:20px; background:#eceee8; color:#6f7969; font-size:10px; white-space:nowrap; }
.connection-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.connection-pill.ready { background:#e8f0e9; color:#315f44; }
.connection-pill.warning { background:#f5efdf; color:#927138; }
.filter-bar { display:flex; flex-wrap:wrap; align-items:center; gap:20px; padding:16px 18px; border:1px solid var(--line); border-radius:11px; background:#fff; margin-bottom:22px; }
.filter-bar label { display:grid; gap:6px; min-width:145px; }
.filter-bar label>span { font-size:8px; font-weight:700; letter-spacing:.12em; color:#949b8f; }
.filter-bar select { width:100%; border:0; outline-offset:5px; background:transparent; color:#485044; font-size:11px; }
.filter-meta { margin-left:auto; display:grid; gap:5px; font-size:10px; color:#596252; }
.filter-meta small { color:#959c8e; font-size:9px; }
.custom-period { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.custom-period label { min-width:110px; }
.custom-period input { padding:6px; border:1px solid var(--line); border-radius:5px; font-size:10px; }
.small-button,.primary-button,.danger-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:35px; border:1px solid #e3e7dc; border-radius:7px; padding:8px 12px; background:#fff; color:var(--olive); font-size:11px; font-weight:600; cursor:pointer; line-height:1.35; }
.primary-button { background:var(--olive); color:#fff; border-color:var(--olive); }
.primary-button:hover { background:#2f5943; }
.small-button:hover { background:#f3f6ee; }
.danger-button { background:#9a4540; border-color:#9a4540; color:#fff; }
.small-button .icon,.primary-button .icon { width:14px; height:14px; }
button:disabled,a[aria-disabled="true"] { opacity:.42; cursor:not-allowed; }
a[aria-disabled="true"] { pointer-events:none; }
.quiet-button { color:#7b8474; font-size:10px; }
.page-alert { padding:13px 15px; margin:0 0 18px; border:1px solid #e9cfc9; border-radius:9px; background:#fff5f1; color:#8e5148; font-size:12px; line-height:1.5; }
.traffic-state { display:flex; gap:18px; align-items:center; padding:20px 22px; margin-bottom:22px; border:1px solid #e1e6d9; border-radius:11px; background:linear-gradient(110deg,#eef2e9,#f8f9f5); }
.traffic-state .state-symbol { flex:0 0 auto; width:42px; height:42px; display:grid; place-items:center; border:1px solid #d8e0cd; border-radius:11px; color:#69805d; background:#f9fbf6; }
.traffic-state strong { display:block; font-size:14px; font-weight:600; color:#4b6041; margin-bottom:5px; }
.traffic-state p { margin:0; max-width:680px; color:#7a8770; font-size:11px; line-height:1.65; }
.traffic-state .small-button { margin-left:auto; flex-shrink:0; }
.traffic-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.traffic-kpi { position:relative; min-height:139px; padding:20px; border:1px solid var(--line); border-radius:11px; background:#fff; }
.traffic-kpi .kpi-label { display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:10px; color:#7d8575; font-weight:500; }
.traffic-kpi .kpi-label .icon { width:15px; height:15px; color:#8b9b7e; }
.traffic-kpi strong { display:block; margin:18px 0 8px; font-size:29px; font-weight:550; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.traffic-kpi .kpi-note { color:#a1a797; font-size:9px; line-height:1.5; }
.traffic-kpi.primary-kpi { background:#edf1e7; border-color:#e2e9d9; }
.traffic-kpi.primary-kpi strong { color:var(--olive); }
.traffic-overview-grid { display:grid; grid-template-columns:minmax(0,1.8fr) minmax(245px,.9fr); gap:18px; margin-bottom:22px; }
.traffic-chart-panel,.account-panel { padding:24px; }
.traffic-app .panel h2 { margin:5px 0 0; font-size:16px; font-weight:600; letter-spacing:-.03em; }
.spend-chart { min-height:235px; display:flex; flex-direction:column; justify-content:center; }
.chart-empty,.empty-block { display:grid; justify-items:center; align-content:center; text-align:center; gap:8px; padding:30px 20px; min-height:160px; color:#9aa28f; font-size:11px; line-height:1.6; }
.chart-empty .icon,.empty-block .icon { color:#b4bfa8; width:28px; height:28px; margin-bottom:5px; }
.empty-block strong { font-size:13px; color:#727e66; font-weight:500; }
.spend-svg { display:block; width:100%; height:190px; overflow:visible; margin-top:18px; }
.spend-svg text { font-family:inherit; font-size:9px; fill:#9aa28f; }
.chart-date-labels { display:flex; justify-content:space-between; margin:10px 0 0 35px; color:#969e8c; font-size:9px; }
.chart-accessible-table { margin-top:10px; font-size:10px; color:#7a856e; }
.chart-accessible-table summary { cursor:pointer; }
.chart-accessible-table table { width:100%; margin-top:8px; font-size:10px; }
.chart-accessible-table th,.chart-accessible-table td { text-align:left; padding:4px; }
.account-highlight { display:flex; gap:14px; align-items:center; padding:25px 0 19px; border-bottom:1px solid #e9ede1; }
.account-highlight strong { font-size:43px; font-weight:500; color:var(--olive); letter-spacing:-.05em; line-height:1; }
.account-highlight span { color:#909984; font-size:10px; line-height:1.5; }
.account-details { display:grid; gap:13px; margin:20px 0 24px; }
.account-details>div { display:grid; gap:4px; }
.account-details small { font-size:8px; letter-spacing:.1em; color:#a0a795; font-weight:700; }
.account-details strong { font-size:11px; color:#5f6c53; font-weight:500; overflow-wrap:anywhere; }
.traffic-table-panel { padding:22px; }
.traffic-table-panel .panel-header,.admin-panel .panel-header { margin-bottom:18px; }
.data-table-wrap { overflow:auto; border-top:1px solid #edf0e7; }
.data-table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }
.data-table th { padding:13px 10px; color:#a1a795; font-size:8px; letter-spacing:.1em; font-weight:700; white-space:nowrap; border-bottom:1px solid #edf0e7; }
.data-table td { padding:16px 10px; border-bottom:1px solid #edf0e7; color:#69735e; }
.data-table tbody tr:last-child td { border-bottom:0; }
.data-table td:first-child { color:#445039; }
.data-table .name-cell { display:grid; gap:5px; min-width:165px; max-width:280px; }
.name-cell strong { font-weight:600; color:#445039; overflow-wrap:anywhere; }
.name-cell small { font-size:9px; color:#a0a795; line-height:1.5; }
.data-table .numeric { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.data-table th.numeric { text-align:right; }
.status-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:15px; font-size:9px; white-space:nowrap; background:#f0f2eb; color:#818b75; }
.status-badge.active,.status-badge.master { background:#e8f0e3; color:#5c7a48; }
.status-badge.paused,.status-badge.pending { background:#f6f0e3; color:#9c854e; }
.status-badge.disabled,.status-badge.ended { background:#eee; color:#92928e; }
.status-badge.error { background:#f8e9e3; color:#a16c5b; }
.table-search { display:flex; align-items:center; gap:8px; background:#f8f9f5; border:1px solid #e6eadf; border-radius:7px; padding:9px 11px; min-width:220px; }
.table-search .icon { width:14px; height:14px; color:#9ba58d; }
.table-search input { background:transparent; border:0; outline-offset:5px; width:100%; min-width:0; font-size:11px; color:#536248; }
.table-search input::placeholder { color:#a0a893; }
.wrap-header { flex-wrap:wrap; gap:12px; }
.table-note { font-size:10px; margin:0 0 14px; color:#9aa38d; line-height:1.6; }
.table-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; }
.text-button { padding:5px 7px; background:transparent; border:0; border-radius:5px; color:#63814f; font-size:10px; cursor:pointer; font-weight:600; }
.text-button:hover { background:#eff3e9; }
.text-button.danger { color:#a16c5b; }
.report-actions { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:0 0 22px; }
.report-actions strong { color:#5b6a4f; font-size:13px; font-weight:500; }
.report-actions p { margin:5px 0 0; font-size:10px; color:#959f88; line-height:1.5; }
.button-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.report-document { padding:34px; min-height:380px; }
.report-masthead { display:flex; align-items:center; justify-content:space-between; gap:22px; padding-bottom:25px; border-bottom:1px solid #e9ede2; }
.report-masthead img { width:125px; }
.report-masthead>span { font-size:8px; letter-spacing:.18em; color:#98a18b; }
.report-title { margin:25px 0 8px; font-size:27px; font-weight:500; letter-spacing:-.04em; color:#3e5132; }
.report-meta { margin:0 0 22px; font-size:10px; line-height:1.7; color:#909d81; }
.report-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0 26px; }
.report-kpis>div { padding:14px; background:#f4f6ef; border-radius:7px; display:grid; gap:9px; }
.report-kpis span { font-size:9px; color:#8f9b80; }
.report-kpis strong { font-size:19px; font-weight:500; letter-spacing:-.03em; color:#536d42; font-variant-numeric:tabular-nums; }
.report-footnote { margin-top:24px; border-top:1px solid #e9ede2; padding-top:16px; color:#9ba58e; font-size:9px; line-height:1.75; }
.admin-panel { padding:22px; }
.admin-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:22px; }
.admin-summary>div { display:flex; align-items:center; gap:12px; border:1px solid var(--line); background:#fff; border-radius:9px; padding:18px; }
.admin-summary strong { font-size:25px; font-weight:500; color:var(--olive); }
.admin-summary span { color:#89967b; font-size:10px; }
.permission-intro { display:flex; gap:14px; align-items:center; margin-bottom:22px; padding:16px 20px; background:#eef2e8; border-radius:9px; border:1px solid #e1e8d9; }
.permission-intro .icon { color:#82956d; width:24px; height:24px; }
.permission-intro p { margin:0; color:#7d8d6c; font-size:11px; line-height:1.7; }
.permission-intro strong { font-weight:600; color:#5b7148; }
.traffic-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:28px 0 5px; font-size:9px; color:#a4ab9b; }
.editor-dialog { width:min(580px,calc(100% - 28px)); max-height:calc(100dvh - 36px); overflow:auto; padding:27px; border:1px solid #e3e8da; border-radius:14px; box-shadow:0 24px 100px #24301e35; color:var(--ink); background:#fff; }
.editor-dialog::backdrop { background:#27332180; backdrop-filter:blur(3px); }
.dialog-heading { display:flex; justify-content:space-between; align-items:start; gap:20px; margin-bottom:22px; }
.dialog-heading h2 { margin:8px 0 0; font-size:23px; font-weight:500; letter-spacing:-.04em; }
.dialog-close { background:#f5f6f1; border:0; border-radius:50%; width:30px; height:30px; color:#8c9980; font-size:22px; cursor:pointer; }
.editor-form { display:grid; gap:18px; }
.form-field { display:grid; gap:7px; }
.form-field>label,.field-label { font-size:11px; font-weight:600; color:#637453; }
.form-field input:not([type="checkbox"]),.form-field select { width:100%; min-height:41px; padding:10px 12px; border:1px solid #e0e6d8; border-radius:7px; color:#506442; background:#fbfcf8; font-size:12px; }
.form-field input:focus,.form-field select:focus { outline:2px solid #b5c6a4; outline-offset:1px; }
.field-help { color:#9aa68d; font-size:10px; line-height:1.65; margin:0; }
.field-help.warning { color:#a4834c; }
.form-field .username-preview { color:#6a8258; font-weight:600; }
.checkbox-field { display:flex; align-items:center; gap:9px; font-size:11px; color:#718161; }
.checkbox-field input { accent-color:var(--olive); width:15px; height:15px; }
.dialog-actions { display:flex; justify-content:flex-end; align-items:center; gap:9px; padding-top:18px; margin-top:2px; border-top:1px solid #edf0e6; }
.dialog-feedback { padding:11px 13px; color:#9c6652; background:#fbf0e8; border-radius:7px; font-size:11px; line-height:1.6; margin:0; }
.access-list { border:1px solid #e3e9db; border-radius:8px; max-height:260px; overflow:auto; }
.access-row { display:flex; justify-content:space-between; align-items:center; gap:15px; padding:12px 14px; border-bottom:1px solid #edf0e6; }
.access-row:last-child { border-bottom:0; }
.access-row span { display:grid; gap:4px; font-size:11px; color:#627652; }
.access-row small { color:#9da98f; font-size:9px; }
.access-row input { width:16px; height:16px; flex:0 0 auto; accent-color:var(--olive); }
.dialog-copy { font-size:12px; color:#81936f; line-height:1.75; margin:0 0 5px; }
.admin-loading { padding:45px; text-align:center; color:#9aa98c; font-size:12px; }
.toast { max-width:calc(100% - 30px); }
.loading-dot { display:inline-block; width:10px; height:10px; margin-right:5px; border:2px solid #c6d2ba; border-top-color:#6e875b; border-radius:50%; animation:turn .8s linear infinite; }
@keyframes turn { to { transform:rotate(360deg); } }
:focus-visible { outline:2px solid #8ca875; outline-offset:3px; }
@media(min-width:1550px){ .traffic-app .main-content { max-width:1540px; } }
@media(max-width:1080px){ .traffic-overview-grid { grid-template-columns:1.5fr 1fr; }.traffic-chart-panel,.account-panel { padding:19px; }.traffic-kpi { padding:17px; }.traffic-kpi strong { font-size:25px; }.filter-bar { gap:15px; }.filter-meta { margin-left:0; }.report-document { padding:25px; } }
@media(max-width:800px){ .traffic-overview-grid { grid-template-columns:1fr; }.account-panel { display:grid; grid-template-columns:1fr 1fr; gap:0 25px; }.account-panel>.section-label,.account-panel>h2,.account-panel>.panel-link { grid-column:1/-1; }.account-highlight { border-bottom:0; }.account-details { margin:10px 0 16px; }.traffic-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }.traffic-state { flex-wrap:wrap; }.traffic-state .small-button { margin-left:60px; }.report-actions { align-items:flex-start; flex-direction:column; }.filter-meta { width:100%; }.report-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:720px){ .traffic-app .sidebar { top:0; height:100dvh; min-height:100dvh; }.traffic-heading { gap:12px; }.connection-pill { align-self:flex-start; }.filter-bar { padding:13px; gap:17px; }.filter-bar label { min-width:125px; flex:1; }.custom-period { order:3; width:100%; }.filter-meta { width:auto; min-width:155px; }.traffic-kpis { gap:9px; }.traffic-kpi { min-height:126px; padding:15px; }.traffic-kpi strong { font-size:25px; }.traffic-kpi .kpi-note { font-size:8px; }.traffic-state { padding:17px; gap:12px; }.traffic-state>div:not(.state-symbol) { flex:1; min-width:170px; }.traffic-state .small-button { margin-left:54px; }.traffic-state strong { font-size:13px; }.traffic-state p { font-size:10px; }.traffic-table-panel,.admin-panel { padding:16px 13px; }.traffic-chart-panel { padding:18px; }.account-panel { padding:18px; }.report-document { padding:21px 15px; }.report-masthead { align-items:flex-start; flex-direction:column; gap:13px; }.report-kpis strong { font-size:17px; }.report-kpis>div { padding:12px; }.table-search { min-width:0; max-width:100%; flex:1; }.admin-summary { gap:8px; }.admin-summary>div { align-items:flex-start; flex-direction:column; gap:5px; padding:13px; }.admin-summary strong { font-size:22px; }.admin-summary span { font-size:9px; }.editor-dialog { padding:21px; }.data-table { min-width:660px; }.traffic-footer { font-size:8px; }.table-actions { flex-wrap:nowrap; }.permission-intro { align-items:flex-start; padding:15px; }.filter-bar>.quiet-button { margin-left:auto; } }
@media print {
  @page { margin:14mm; size:A4 portrait; }
  body.report-print-mode { background:#fff; color:#111; }
  body.report-print-mode #auth-screen, body.report-print-mode .sidebar, body.report-print-mode .topbar, body.report-print-mode .page-heading, body.report-print-mode .filter-bar, body.report-print-mode .traffic-state, body.report-print-mode .page-alert, body.report-print-mode .report-actions, body.report-print-mode .traffic-footer, body.report-print-mode .toast, body.report-print-mode .editor-dialog { display:none!important; }
  body.report-print-mode .app-layout, body.report-print-mode .main-column, body.report-print-mode .main-content { display:block!important; width:100%!important; padding:0!important; margin:0!important; }
  body.report-print-mode [data-page] { display:none!important; }
  body.report-print-mode #page-reports { display:block!important; }
  body.report-print-mode .report-document { border:0; box-shadow:none; padding:0; }
  body.report-print-mode .report-document * { print-color-adjust:exact; -webkit-print-color-adjust:exact; }
  body.report-print-mode .report-document .data-table-wrap { overflow:visible; }
  body.report-print-mode .report-document .data-table { min-width:0; table-layout:fixed; font-size:8px; }
  body.report-print-mode .report-document .data-table th, body.report-print-mode .report-document .data-table td { padding:8px 4px; white-space:normal; overflow-wrap:anywhere; }
  body.report-print-mode .report-document .name-cell { min-width:0; }
  body.report-print-mode .report-document .status-badge { white-space:normal; font-size:8px; }
  body.report-print-mode .report-document thead { display:table-header-group; }
  body.report-print-mode .report-document tr, body.report-print-mode .report-kpis>div { break-inside:avoid; }
  body.report-print-mode .report-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.name-cell .status-badge { justify-self:start; }

/* Meta connection and background synchronization */
.sync-toolbar { display:flex; align-items:center; justify-content:space-between; gap:18px; margin:-8px 0 22px; }
.sync-toolbar p { margin:0; color:var(--muted,#747a70); font-size:12px; line-height:1.6; max-width:650px; }
.sync-toolbar .button-row { flex-shrink:0; }
.meta-summary { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; padding:24px; }
.meta-summary h2 { font-size:19px; margin:8px 0; }
.meta-summary p { margin:0; font-size:13px; color:var(--muted,#747a70); line-height:1.6; }
.meta-dialog { padding:0 28px 26px; }
.meta-facts { margin:18px 0; display:grid; gap:12px; }
.meta-facts div { display:flex; justify-content:space-between; gap:16px; font-size:12px; }
.meta-facts dt { color:#73796d; } .meta-facts dd { margin:0; text-align:right; font-weight:600; }
.meta-account { display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:18px; margin-bottom:12px; border:1px solid #e4e7df; border-radius:12px; font-size:13px; }
.meta-account small,.meta-account>span { color:#73796d; }
@media (max-width:720px) { .sync-toolbar,.meta-summary { align-items:flex-start; flex-direction:column; } .sync-toolbar .button-row { flex-wrap:wrap; } .meta-facts div { flex-direction:column; gap:4px; } .meta-facts dd { text-align:left; } }
@media print { .sync-toolbar,.meta-summary { display:none !important; } }

/* Shared campaign selection across overview, campaigns and reports. */
.filter-bar .campaign-filter { flex:1 1 220px; min-width:180px; max-width:400px; }
.filter-bar select { min-width:0; max-width:100%; min-height:28px; }
.campaign-selection-summary { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:17px 19px; margin:-8px 0 22px; border:1px solid #cedac5; border-radius:10px; background:#eef3e9; }
.campaign-selection-summary>div { display:grid; gap:6px; min-width:0; }
.campaign-selection-summary small { color:#7a896e; font-size:8px; font-weight:700; letter-spacing:.12em; }
.campaign-selection-summary strong { color:#2e4936; font-size:15px; font-weight:600; overflow-wrap:anywhere; }
.campaign-selection-summary span { color:#7b8a6d; font-size:10px; line-height:1.5; }
.campaign-selection-summary .small-button { flex-shrink:0; }
.campaign-row { cursor:pointer; }
.campaign-row:hover td { background:#f6f8f2; }
.campaign-row.selected td { background:#edf3e7; }
.campaign-row.selected td:first-child { box-shadow:inset 3px 0 #34583f; }
.campaign-select-button { display:block; width:100%; min-height:40px; padding:3px 0; border:0; background:transparent; color:inherit; text-align:left; font:inherit; line-height:1.5; cursor:pointer; }
.campaign-select-button:hover strong { color:#234836; text-decoration:underline; text-underline-offset:3px; }
.campaign-select-button[aria-pressed="true"] strong { color:#234836; }
#campaign-count-label { white-space:pre-line; }
#spend-chart-context { max-width:45%; overflow-wrap:anywhere; text-align:right; }
@media(max-width:1080px) { .filter-bar .campaign-filter { max-width:none; } }
@media(max-width:720px) {
  .filter-bar .campaign-filter { flex-basis:100%; width:100%; min-width:0; }
  .campaign-selection-summary { align-items:flex-start; flex-direction:column; gap:12px; padding:15px; }
  .campaign-selection-summary strong { font-size:14px; }
  .campaign-selection-summary .small-button { min-height:40px; }
  .campaign-select-button { min-height:44px; }
}
@media print { .campaign-selection-summary { display:none!important; } }


/* Mobile results: readable controls, a persistent nav and campaign cards.
   Kept inside screen media so the exported report retains its table layout. */
.mobile-brand,.sidebar-close,.mobile-results-nav,.mobile-filters-toggle,.mobile-filters-done,.mobile-cell-label { display:none; }
.sidebar-backdrop { position:fixed; inset:0; z-index:40; border:0; border-radius:0; background:#18251db3; cursor:pointer; }
@media screen and (max-width:720px) {
  html { scroll-behavior:auto; scroll-padding-top:88px; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  body.sidebar-open { overflow:hidden; }
  .traffic-app .topbar { position:sticky; top:0; z-index:20; height:auto; min-height:68px; padding:8px 14px; padding-top:max(8px,env(safe-area-inset-top)); background:#fffffff5; backdrop-filter:blur(12px); gap:10px; }
  .traffic-app .mobile-menu { width:44px; height:44px; margin:0; flex:0 0 44px; }
  .traffic-app .mobile-menu .icon { width:21px; height:21px; }
  .traffic-app .topbar-context { min-width:0; flex:1; flex-direction:column; align-items:flex-start; gap:4px; overflow:hidden; }
  .traffic-app .topbar-context>span,.traffic-app .topbar-context>.icon { display:none; }
  .mobile-brand { display:block; max-width:100%; }
  .mobile-brand img { display:block; width:88px; height:auto; }
  .traffic-app .topbar-context strong { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; }
  .traffic-app .topbar-actions { flex:0 0 auto; gap:8px; }
  .traffic-app .profile-avatar { width:30px; height:30px; font-size:12px; }
  .traffic-app .logout-button { min-width:44px; min-height:44px; font-size:13px; }
  .traffic-app .sidebar { z-index:41; width:min(320px,calc(100vw - 40px)); overflow-y:auto; overscroll-behavior:contain; padding:28px 16px max(20px,env(safe-area-inset-bottom)); }
  .sidebar-close { display:grid; position:absolute; right:14px; top:20px; width:44px; height:44px; font-size:28px; line-height:1; }
  .traffic-app .sidebar .brand { padding-left:10px; max-width:calc(100% - 44px); }
  .traffic-app .sidebar .brand-logo { width:138px; max-width:100%; }
  .traffic-app .sidebar .brand-subtitle { font-size:9px; }
  .traffic-app .account-switcher { margin:28px 0 22px; min-height:68px; }
  .traffic-app .account-copy small,.traffic-app .nav-caption { font-size:10px; color:#6d7765; }
  .traffic-app .client-select { max-width:100%; min-height:44px; font-size:16px; }
  .traffic-app .nav-link { min-height:50px; font-size:15px; gap:12px; }
  .traffic-app .nav-link .icon { width:21px; height:21px; }
  .traffic-side-note p,.traffic-app .sidebar-footer { font-size:11px; }
  .traffic-app .main-content { padding:24px 16px calc(92px + env(safe-area-inset-bottom)); }
  .traffic-app .traffic-heading { margin-bottom:20px; gap:12px; }
  .traffic-app .traffic-heading h1 { font-size:29px; }
  #page-title:focus { outline:none; }
  .traffic-app .page-heading p { max-width:none; font-size:14px; color:#66715e; line-height:1.55; }
  .traffic-app .eyebrow,.traffic-app .section-label { font-size:10px; color:#6e7b63; letter-spacing:.12em; }
  .connection-pill,.neutral-badge,.data-badge { font-size:12px; }
  .mobile-results-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); position:fixed; inset:auto 0 0; z-index:25; gap:4px; padding:6px max(10px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); border-top:1px solid #dfe5d9; background:#fffffff5; backdrop-filter:blur(12px); box-shadow:0 -6px 24px #27332108; }
  .mobile-results-nav a { min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:10px; color:#64705a; font-size:12px; font-weight:600; }
  .mobile-results-nav .icon { width:21px; height:21px; }
  .mobile-results-nav a.active { background:#eaf0e5; color:var(--olive); }
  .mobile-filters-toggle { display:flex; width:100%; min-height:64px; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; margin:0 0 20px; border:1px solid #dfe5d8; border-radius:11px; background:#fff; color:var(--ink); text-align:left; cursor:pointer; }
  .mobile-filters-toggle>span { display:grid; gap:5px; min-width:0; }
  .mobile-filters-toggle strong { font-size:15px; font-weight:600; }
  .mobile-filters-toggle small { font-size:12px; color:#65725b; overflow-wrap:anywhere; }
  .mobile-filters-toggle[aria-expanded="true"] .icon { transform:rotate(180deg); }
  .traffic-app .filter-bar:not(.filters-open) { display:none; }
  .traffic-app .filter-bar { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:16px; margin-top:-8px; }
  .traffic-app .filter-bar label,.traffic-app .filter-bar .campaign-filter { min-width:0; width:100%; max-width:none; gap:8px; }
  .traffic-app .filter-bar label>span { font-size:11px; color:#627157; }
  .traffic-app .filter-bar select,.traffic-app .filter-bar input { min-height:48px; width:100%; min-width:0; max-width:100%; font-size:16px; padding:10px 12px; border:1px solid #dfe5d8; border-radius:8px; background-color:#fbfcf8; color:#35472e; }
  .traffic-app .custom-period { order:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .traffic-app .custom-period .small-button { grid-column:1/-1; width:100%; }
  .traffic-app .filter-meta { width:100%; min-width:0; margin:0; font-size:13px; line-height:1.5; }
  .traffic-app .filter-meta small { font-size:12px; color:#6e7a64; }
  .traffic-app .filter-bar>.quiet-button { margin:0; width:100%; }
  .traffic-app .small-button,.traffic-app .primary-button,.traffic-app .danger-button,.editor-dialog .small-button,.editor-dialog .primary-button,.editor-dialog .danger-button { min-height:46px; font-size:14px; padding:11px 14px; }
  .traffic-app .filter-bar .mobile-filters-done { display:inline-flex; width:100%; background:#eaf0e5; border-color:#d2dfc7; }
  .campaign-selection-summary { padding:16px; gap:14px; margin-bottom:20px; }
  .campaign-selection-summary small { font-size:10px; color:#607653; }
  .campaign-selection-summary strong { font-size:16px; line-height:1.45; }
  .campaign-selection-summary span { font-size:13px; color:#64765a; }
  .campaign-selection-summary .small-button { width:100%; }
  .sync-toolbar { margin:0 0 20px; gap:12px; }
  .sync-toolbar p { font-size:13px; color:#66745c; line-height:1.6; }
  .sync-toolbar .button-row { width:100%; }
  .sync-toolbar .button-row>button { flex:1; }
  .traffic-kpis { gap:10px; margin-bottom:20px; }
  .traffic-kpi { min-width:0; min-height:160px; padding:15px 13px; }
  .traffic-kpi .kpi-label { min-height:32px; align-items:flex-start; gap:5px; font-size:12px; color:#627157; line-height:1.35; }
  .traffic-kpi .kpi-label .icon { width:15px; height:15px; margin-top:1px; }
  .traffic-kpi strong { font-size:clamp(22px,6.5vw,28px); margin:13px 0 10px; line-height:1.15; overflow-wrap:anywhere; }
  .traffic-kpi .kpi-note { display:block; font-size:12px; color:#718064; line-height:1.5; }
  .traffic-app .panel h2 { font-size:18px; }
  .traffic-chart-panel,.account-panel { padding:18px 16px; }
  .traffic-chart-panel .panel-header { gap:10px; }
  #spend-chart-context { max-width:44%; white-space:normal; font-size:11px; line-height:1.5; }
  .spend-chart { min-height:220px; }
  .spend-svg { height:auto; min-height:160px; }
  .spend-svg text { font-size:12px; fill:#68795a; }
  .chart-date-labels { margin-left:0; gap:6px; font-size:11px; color:#67785a; }
  .chart-accessible-table { font-size:13px; color:#586e49; }
  .chart-accessible-table summary { min-height:46px; padding:12px 6px; line-height:1.5; }
  .chart-accessible-table table { font-size:12px; table-layout:fixed; }
  .chart-accessible-table th,.chart-accessible-table td { padding:9px 3px; overflow-wrap:anywhere; border-bottom:1px solid var(--line); }
  .account-panel { display:block; }
  .account-highlight { padding:20px 0; gap:16px; }
  .account-highlight span { font-size:13px; color:#68795b; }
  .account-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:0 0 12px; }
  .account-details>div:last-child { grid-column:1/-1; }
  .account-details small { font-size:10px; color:#718064; }
  .account-details strong { font-size:14px; color:#435b36; line-height:1.5; }
  .traffic-app .panel-link,.traffic-app .quiet-link { min-height:44px; font-size:13px; }
  .traffic-table-panel { padding:18px 14px; }
  .traffic-table-panel>.panel-header { flex-wrap:wrap; gap:12px; }
  .table-search { flex-basis:100%; min-height:48px; padding:10px 12px; }
  .table-search input { font-size:16px; }
  .table-note,.panel-description { font-size:13px; color:#68795a; line-height:1.6; }
  .campaign-table-wrap { border:0; overflow:visible; }
  .campaign-data-table { display:block; width:100%; min-width:0; }
  .campaign-data-table thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .campaign-data-table tbody { display:grid; gap:14px; }
  .campaign-data-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; padding:15px; border:1px solid #dfe6d7; border-radius:11px; background:#fbfcf8; }
  .campaign-data-table tbody tr.selected { border-color:#8da37d; background:#edf3e7; }
  .campaign-data-table td { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:7px; min-width:0; padding:12px 4px; border:0; color:#3f5434; font-size:16px; line-height:1.45; overflow-wrap:anywhere; }
  .campaign-data-table td:first-child { grid-column:1/-1; padding:0 0 12px; }
  .campaign-data-table .name-cell { min-width:0; max-width:none; width:100%; gap:5px; }
  .campaign-data-table .name-cell strong { font-size:16px; line-height:1.5; }
  .campaign-data-table .name-cell small { font-size:12px; color:#6d7d5e; }
  .campaign-data-table .campaign-select-button { min-height:48px; padding:0; }
  .campaign-data-table .campaign-status-cell { grid-column:1/-1; flex-direction:row; align-items:center; justify-content:space-between; padding:10px 0; border-top:1px solid #e1e7d9; border-bottom:1px solid #e1e7d9; }
  .campaign-data-table .numeric { text-align:left; white-space:normal; font-weight:600; }
  .campaign-data-table .mobile-cell-label { display:block; font-size:12px; font-weight:400; color:#68795c; }
  .campaign-data-table .status-badge { font-size:12px; padding:6px 10px; }
  .campaign-row.selected td,.campaign-row:hover td { background:transparent; }
  .campaign-row.selected td:first-child { box-shadow:none; }
  .report-actions { gap:16px; margin-bottom:20px; }
  .report-actions strong { font-size:16px; }
  .report-actions p { font-size:13px; color:#697b5b; line-height:1.6; }
  .report-actions .button-row { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .report-actions .button-row>* { min-width:0; }
  .report-document { padding:22px 16px; }
  .report-masthead { gap:16px; padding-bottom:20px; }
  .report-masthead>span { font-size:10px; color:#6c7d5f; }
  .report-title { font-size:28px; }
  .report-meta { font-size:13px; color:#627554; overflow-wrap:anywhere; }
  .report-kpis { gap:10px; }
  .report-kpis>div { min-width:0; padding:14px 12px; gap:12px; }
  .report-kpis span { font-size:12px; color:#627653; }
  .report-kpis strong { font-size:22px; overflow-wrap:anywhere; }
  .report-footnote { font-size:12px; color:#687b5a; line-height:1.7; }
  .traffic-state { padding:18px; gap:14px; }
  .traffic-state strong { font-size:16px; }
  .traffic-state p,.empty-block,.chart-empty { font-size:14px; }
  .traffic-state .small-button { margin:0; width:100%; }
  .empty-block strong { font-size:16px; }
  .traffic-footer { gap:8px; font-size:11px; color:#758368; }
  .traffic-app .text-button { min-height:44px; font-size:13px; padding:10px; }
  .admin-panel .data-table { font-size:13px; }
  .admin-panel .data-table th { font-size:10px; }
  .admin-panel .data-table .name-cell small { font-size:12px; }
  .permission-intro p { font-size:14px; }
  .editor-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); padding:22px 18px; }
  .dialog-heading { gap:12px; }
  .dialog-heading h2 { font-size:24px; overflow-wrap:anywhere; }
  .dialog-close { flex:0 0 44px; width:44px; height:44px; }
  .form-field>label,.field-label,.checkbox-field { font-size:14px; line-height:1.5; }
  .form-field input:not([type="checkbox"]),.form-field select { min-height:48px; font-size:16px; }
  .field-help,.dialog-feedback,.dialog-copy { font-size:13px; }
  .checkbox-field { min-height:44px; }
  .checkbox-field input,.access-row input { width:22px; height:22px; flex:0 0 22px; }
  .access-row { min-height:64px; }
  .access-row span { font-size:14px; }
  .access-row small { font-size:12px; }
  .dialog-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .dialog-actions>* { min-width:0; }
  .meta-dialog { padding:0; }
  .meta-account { font-size:14px; overflow-wrap:anywhere; }
  .auth-screen { min-height:100svh; padding:32px 16px; }
  .auth-card { padding:30px 24px; }
  .auth-intro { font-size:14px; }
  .login-form label { font-size:14px; }
  .login-form input { min-height:50px; font-size:16px; }
  .login-submit { min-height:50px; font-size:15px; }
  .auth-footnote,.form-feedback { font-size:13px; }
  .auth-side-note { position:static; justify-content:center; flex-wrap:wrap; margin-top:24px; font-size:9px; }
  .toast { bottom:calc(86px + env(safe-area-inset-bottom)); font-size:13px; }
}
@media screen and (max-width:360px) {
  .traffic-app .main-content { padding-left:12px; padding-right:12px; }
  .traffic-kpi { padding:14px 11px; }
  .traffic-kpi strong { font-size:22px; }
  .traffic-kpi .kpi-label .icon { display:none; }
  .campaign-data-table tbody tr { padding:12px; }
  .report-actions .button-row { grid-template-columns:1fr; }
}
@media screen and (max-width:720px) and (max-height:600px) {
  .traffic-side-note,.traffic-app .sidebar-footer,.traffic-app .sidebar-spacer { display:none; }
}
@media print {
  .mobile-brand,.sidebar-close,.sidebar-backdrop,.mobile-results-nav,.mobile-filters-toggle,.mobile-filters-done,.mobile-cell-label { display:none!important; }
}


/* Appearance controls and paired wordmarks. */
.theme-logo-dark { display:none!important; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:8px 11px; border:1px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink); font:inherit; font-size:12px; cursor:pointer; }
.theme-toggle .icon { width:17px; height:17px; }
.theme-toggle:hover { background:var(--olive-pale); }
.auth-tools { display:flex; justify-content:flex-end; margin:-12px -14px 22px 0; }
.auth-card .auth-brand { margin-bottom:26px; }
.auth-card h1 { font-size:30px; }
.spend-grid { stroke:var(--chart-grid,#e8eddf); }
.spend-line { stroke:var(--chart-line,#6c8757); }
.spend-dot { fill:var(--chart-line,#6c8757); }

@media screen {
  html[data-theme="dark"] {
    color-scheme:dark;
    --ink:#e5ebe1;
    --ink-soft:#bcc7b5;
    --muted:#a0ae98;
    --line:#364338;
    --paper:#151b17;
    --white:#202822;
    --olive:#aac298;
    --olive-mid:#8fa47e;
    --olive-pale:#2a3828;
    --sand:#3b3427;
    --amber:#e2c98d;
    --shadow:0 12px 36px #0000001a;
    --surface-soft:#253027;
    --surface-input:#18201a;
    --accent-surface:#2c3d2a;
    --accent-border:#556f49;
    --secondary:#b1bea8;
    --success-bg:#293f30;
    --success-fg:#b1d8b8;
    --warning-bg:#3e3523;
    --warning-fg:#e2c98d;
    --danger-bg:#442d2b;
    --danger-fg:#efb6a6;
    --chart-grid:#3d4b3c;
    --chart-line:#a7c492;
  }
  html[data-theme="dark"] .theme-logo-light { display:none!important; }
  html[data-theme="dark"] .theme-logo-dark { display:block!important; }
  html[data-theme="dark"] body { background:var(--paper); color:var(--ink); }
  html[data-theme="dark"] .traffic-app :is(.sidebar,.topbar,.panel,.traffic-kpi,.filter-bar,.mobile-filters-toggle,.mobile-results-nav,.admin-summary>div) {
    background:var(--white); border-color:var(--line);
  }
  html[data-theme="dark"] .traffic-app :is(.topbar-context,.top-profile,.nav-link,.page-heading p,.filter-meta,.sync-toolbar p,.table-note,.panel-description,.data-table td,.name-cell small,.table-search,.report-meta,.report-footnote,.report-actions p,.account-details strong,.account-highlight span,.traffic-footer,.chart-accessible-table,.chart-date-labels,.admin-summary span,.meta-summary p,.permission-intro p) {
    color:var(--secondary);
  }
  html[data-theme="dark"] .traffic-app :is(.topbar-context strong,.name-cell strong,.report-title,.report-actions strong,.campaign-selection-summary strong,.traffic-kpi strong) { color:var(--ink); }
  html[data-theme="dark"] .traffic-app :is(.eyebrow,.section-label,.nav-caption,.account-copy small,.filter-bar label>span,.filter-meta small,.account-details small,.data-table th,.report-masthead>span) { color:var(--muted); }
  html[data-theme="dark"] .traffic-app .nav-link:hover { background:var(--surface-soft); color:var(--ink); }
  html[data-theme="dark"] .traffic-app .nav-link.active,
  html[data-theme="dark"] .traffic-app .mobile-results-nav a.active { background:var(--accent-surface); color:var(--olive); }
  html[data-theme="dark"] .traffic-app .mobile-results-nav a { color:var(--secondary); }
  html[data-theme="dark"] .traffic-app :is(.account-switcher,.data-table-wrap,.data-table th,.data-table td,.account-highlight,.panel-link,.report-masthead,.report-footnote,.chart-accessible-table td,.chart-accessible-table th) { border-color:var(--line); }
  html[data-theme="dark"] .traffic-app :is(.account-mark,.profile-avatar) { background:var(--accent-surface); color:var(--olive); }
  html[data-theme="dark"] .traffic-app :is(.icon-button,.logout-button,.small-button,.theme-toggle) { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
  html[data-theme="dark"] .traffic-app :is(.small-button:hover,.theme-toggle:hover,.text-button:hover) { background:var(--accent-surface); }
  html[data-theme="dark"] .traffic-app :is(.quiet-button,.quiet-link,.panel-link,.text-button,.account-highlight strong) { color:var(--olive); }
  html[data-theme="dark"] .traffic-app .primary-button,
  html[data-theme="dark"] .editor-dialog .primary-button,
  html[data-theme="dark"] .login-submit { background:#aac298; color:#162211; border-color:#aac298; }
  html[data-theme="dark"] .traffic-app .primary-button:hover,
  html[data-theme="dark"] .editor-dialog .primary-button:hover,
  html[data-theme="dark"] .login-submit:hover { background:#bdd3a9; }
  html[data-theme="dark"] .traffic-app .danger-button,
  html[data-theme="dark"] .editor-dialog .danger-button { background:#82443c; border-color:#a36458; color:#fff0e8; }
  html[data-theme="dark"] .traffic-app .text-button.danger { color:var(--danger-fg); }
  html[data-theme="dark"] .traffic-app :is(input:not([type="checkbox"]),select),
  html[data-theme="dark"] .editor-dialog :is(input:not([type="checkbox"]),select),
  html[data-theme="dark"] .login-form input { background-color:var(--surface-input); border-color:var(--line); color:var(--ink); }
  html[data-theme="dark"] .traffic-app .account-copy .client-select,
  html[data-theme="dark"] .traffic-app .table-search input { background-color:transparent; }
  html[data-theme="dark"] :is(.traffic-app,.editor-dialog,.login-form) input::placeholder { color:var(--muted); opacity:1; }
  html[data-theme="dark"] .traffic-app .table-search { background:var(--surface-input); border-color:var(--line); }
  html[data-theme="dark"] .traffic-app .table-search .icon { color:var(--muted); }
  html[data-theme="dark"] .traffic-app .traffic-kpi.primary-kpi { background:var(--accent-surface); border-color:var(--accent-border); }
  html[data-theme="dark"] .traffic-app .traffic-kpi.primary-kpi strong { color:var(--olive); }
  html[data-theme="dark"] .traffic-app .traffic-kpi :is(.kpi-label,.kpi-note) { color:var(--secondary); }
  html[data-theme="dark"] .traffic-app .traffic-kpi .kpi-label .icon { color:var(--muted); }
  html[data-theme="dark"] .traffic-app :is(.connection-pill,.neutral-badge,.data-badge,.status-badge) { background:var(--surface-soft); color:var(--secondary); }
  html[data-theme="dark"] .traffic-app :is(.connection-pill.ready,.status-badge.active,.status-badge.master) { background:var(--success-bg); color:var(--success-fg); }
  html[data-theme="dark"] .traffic-app :is(.connection-pill.warning,.status-badge.paused,.status-badge.pending) { background:var(--warning-bg); color:var(--warning-fg); }
  html[data-theme="dark"] .traffic-app .status-badge.error { background:var(--danger-bg); color:var(--danger-fg); }
  html[data-theme="dark"] .traffic-app :is(.status-badge.disabled,.status-badge.ended) { background:var(--surface-soft); color:var(--muted); }
  html[data-theme="dark"] .traffic-app .campaign-selection-summary { background:var(--accent-surface); border-color:var(--accent-border); }
  html[data-theme="dark"] .traffic-app .campaign-selection-summary :is(small,span) { color:var(--secondary); }
  html[data-theme="dark"] .traffic-app :is(.mobile-filters-toggle small,.campaign-data-table .mobile-cell-label,.campaign-data-table .name-cell small) { color:var(--secondary); }
  html[data-theme="dark"] .traffic-app .mobile-filters-toggle strong { color:var(--ink); }
  html[data-theme="dark"] .traffic-app .filter-bar .mobile-filters-done { background:var(--accent-surface); border-color:var(--accent-border); color:var(--ink); }
  html[data-theme="dark"] .traffic-app .campaign-row:hover td { background:var(--surface-soft); }
  html[data-theme="dark"] .traffic-app .campaign-row.selected td { background:var(--accent-surface); }
  html[data-theme="dark"] .traffic-app .campaign-row.selected td:first-child { box-shadow:inset 3px 0 var(--olive); }
  html[data-theme="dark"] .traffic-app .campaign-select-button:hover strong,
  html[data-theme="dark"] .traffic-app .campaign-select-button[aria-pressed="true"] strong { color:var(--olive); }
  html[data-theme="dark"] .traffic-app .spend-svg text { fill:var(--secondary); }
  html[data-theme="dark"] .traffic-app .report-kpis>div { background:var(--surface-soft); }
  html[data-theme="dark"] .traffic-app .report-kpis span { color:var(--secondary); }
  html[data-theme="dark"] .traffic-app .report-kpis strong { color:var(--olive); }
  html[data-theme="dark"] .traffic-app :is(.traffic-state,.permission-intro) { background:var(--surface-soft); border-color:var(--line); }
  html[data-theme="dark"] .traffic-app .traffic-state :is(strong,.state-symbol),
  html[data-theme="dark"] .traffic-app .permission-intro :is(strong,.icon) { color:var(--olive); }
  html[data-theme="dark"] .traffic-app .traffic-state .state-symbol { background:var(--surface-input); border-color:var(--line); }
  html[data-theme="dark"] .traffic-app .traffic-state p,
  html[data-theme="dark"] .traffic-app :is(.empty-block,.chart-empty,.empty-block strong,.admin-loading) { color:var(--secondary); }
  html[data-theme="dark"] :is(.page-alert,.form-feedback,.dialog-feedback) { background:var(--danger-bg); border-color:#6a4940; color:var(--danger-fg); }
  html[data-theme="dark"] .editor-dialog { background:var(--white); color:var(--ink); border-color:var(--line); }
  html[data-theme="dark"] .editor-dialog :is(.section-label,.field-help,.access-row small,.meta-facts dt,.meta-account small,.meta-account>span) { color:var(--secondary); }
  html[data-theme="dark"] .editor-dialog :is(.form-field>label,.field-label,.checkbox-field,.access-row span,.dialog-copy) { color:var(--ink-soft); }
  html[data-theme="dark"] .editor-dialog .field-help.warning { color:var(--warning-fg); }
  html[data-theme="dark"] .editor-dialog .username-preview { color:var(--olive); }
  html[data-theme="dark"] .editor-dialog :is(.access-list,.access-row,.dialog-actions,.meta-account) { border-color:var(--line); }
  html[data-theme="dark"] .editor-dialog :is(.small-button,.dialog-close,.theme-toggle) { background:var(--surface-soft); border-color:var(--line); color:var(--ink); }
  html[data-theme="dark"] .auth-screen { background:radial-gradient(ellipse at 82% 18%,#273526 0,transparent 44%),var(--paper); }
  html[data-theme="dark"] .auth-card { background:var(--white); border-color:var(--line); }
  html[data-theme="dark"] .auth-card :is(h1,.login-form label) { color:var(--ink); }
  html[data-theme="dark"] .auth-card :is(.auth-intro,.auth-footnote) { color:var(--secondary); }
  html[data-theme="dark"] .auth-card .theme-toggle { background:var(--surface-soft); color:var(--ink); }
  html[data-theme="dark"] .toast { background:var(--surface-soft); border-color:var(--accent-border); color:var(--ink); }
  html[data-theme="dark"] .loading-dot { border-color:var(--line); border-top-color:var(--olive); }
  html[data-theme="dark"] :focus-visible { outline-color:#adc793; }
}
@media screen and (max-width:720px) {
  .traffic-app .theme-toggle { flex:0 0 44px; width:44px; min-height:44px; padding:0; }
  .traffic-app .theme-toggle .theme-choice { display:none; }
  .auth-tools { margin:0 0 22px; }
  .auth-tools .theme-toggle { min-height:44px; font-size:14px; }
  html[data-theme="dark"] .traffic-app .campaign-data-table tbody tr { background:var(--surface-input); border-color:var(--line); }
  html[data-theme="dark"] .traffic-app .campaign-data-table tbody tr.selected { background:var(--accent-surface); border-color:var(--accent-border); }
  html[data-theme="dark"] .traffic-app .campaign-data-table .campaign-status-cell { border-color:var(--line); }
  html[data-theme="dark"] .traffic-app .campaign-data-table .campaign-row td,
  html[data-theme="dark"] .traffic-app .campaign-data-table .campaign-row.selected td { background:transparent; box-shadow:none; }
}
@media screen and (max-width:360px) {
  .traffic-app .top-profile { display:none; }
}
@media print {
  html { color-scheme:light!important; }
  .theme-toggle { display:none!important; }
  .theme-logo-dark { display:none!important; }
  .theme-logo-light { display:block!important; }
}

/* VINTon — approved overview finish, 2026-10-26. */
/*
 * VINTon — shared portal design system.
 * Shared across portal screens, login and dialogs; screen-only.
 * Brand, theme preference, application rules and print layout are preserved.
 */
@media screen {
  body:has(#app-layout) {
    --ov-brand-charcoal:#2e3335; --ov-brand-green:#234836;
    --ov-paper:#f3f5f4; --ov-surface:#ffffff; --ov-soft:#f7f8f8;
    --ov-text:#2e3335; --ov-secondary:#626c6b; --ov-muted:#646e6b;
    --ov-line:#e1e5e4; --ov-hover:#f0f3f2;
    --ov-accent:#234836; --ov-accent-soft:#edf3ef; --ov-accent-line:#d4e0d8;
    --ov-success-bg:#edf4ef; --ov-success-fg:#234836;
    --ov-warning-bg:#fbf3e5; --ov-warning-fg:#79591c;
    --ov-danger-bg:#f9eeeb; --ov-danger-fg:#8b4137;
    --ov-focus:#3d7861; --ov-chart-grid:#e7ebea; --ov-chart-line:#234836;
    --ov-radius:16px; --ov-control-radius:10px;
    --ov-font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",sans-serif;
    --ink:var(--ov-text); --ink-soft:var(--ov-secondary); --muted:var(--ov-muted);
    --paper:var(--ov-paper); --white:var(--ov-surface); --line:var(--ov-line);
    --olive:var(--ov-accent); --olive-pale:var(--ov-accent-soft);
    --chart-grid:var(--ov-chart-grid); --chart-line:var(--ov-chart-line);
    background:var(--ov-paper); color:var(--ov-text);
    font-family:var(--ov-font); font-size:14px; line-height:1.5;
    -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  }
  html[data-theme="dark"] body:has(#app-layout) {
    --ov-paper:#141819; --ov-surface:#1c2223; --ov-soft:#22292a;
    --ov-text:#edf1ef; --ov-secondary:#b1bcba; --ov-muted:#9eaaa7;
    --ov-line:#343e3d; --ov-hover:#27312f;
    --ov-accent:#a7c6b1; --ov-accent-soft:#20352a; --ov-accent-line:#3b5948;
    --ov-success-bg:#23392d; --ov-success-fg:#b3d0be;
    --ov-warning-bg:#3c3220; --ov-warning-fg:#e0c590;
    --ov-danger-bg:#3e2b29; --ov-danger-fg:#e3aea3;
    --ov-focus:#a7c6b1; --ov-chart-grid:#35403e; --ov-chart-line:#9cbcaa;
  }
  body:has(#app-layout) #app-layout { grid-template-columns:224px minmax(0,1fr); background:var(--ov-paper); }
  body:has(#app-layout) :is(button,input,select) { font-family:var(--ov-font); }
  body:has(#app-layout) :is(h1,h2) { font-family:var(--ov-font); text-wrap:balance; }
  body:has(#app-layout) :is(p,.kpi-note,.account-highlight span) { text-wrap:pretty; }
  body:has(#app-layout) :is(.traffic-kpi strong,.numeric,.account-highlight strong,.chart-accessible-table) { font-variant-numeric:tabular-nums; }
  body:has(#app-layout) :is(.panel,.traffic-kpi,.filter-bar,.mobile-filters-toggle) { border:1px solid var(--ov-line); border-radius:var(--ov-radius); background:var(--ov-surface); box-shadow:none; }
  body:has(#app-layout) :is(a,button,select,input,summary,[tabindex="0"]):focus-visible { outline:2px solid var(--ov-focus); outline-offset:3px; }
  body:has(#app-layout) :is(button,a,select,summary) { transition-property:background-color,border-color,color; transition-duration:140ms; transition-timing-function:ease-out; }
  body:has(#app-layout) :is(button,select,input):disabled { opacity:.5; }
  body:has(#app-layout) :is(button,a):active { transform:none; }
  body:has(#app-layout) .sidebar { background:var(--ov-paper); border-color:var(--ov-line); padding:34px 16px 24px; box-shadow:none; }
  body:has(#app-layout) .brand { padding:0 14px; }
  body:has(#app-layout) .brand-logo { width:140px; }
  body:has(#app-layout) .account-switcher { margin:30px 0 30px; padding:8px 12px; gap:10px; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .account-mark { width:34px; height:34px; flex:0 0 34px; border-radius:8px; font-family:var(--ov-font); font-weight:650; background:var(--ov-accent-soft); color:var(--ov-accent); }
  body:has(#app-layout) .account-copy { gap:1px; }
  body:has(#app-layout) .account-copy small { color:var(--ov-muted); font-size:10px; letter-spacing:.08em; font-weight:550; }
  body:has(#app-layout) .client-select { min-height:32px; max-width:100%; font-size:13px; font-weight:600; color:var(--ov-text); background-color:transparent; }
  body:has(#app-layout) .nav-caption { font-size:10px; font-weight:550; letter-spacing:.08em; color:var(--ov-muted); padding:0 14px; margin-bottom:12px; }
  body:has(#app-layout) .main-nav { gap:5px; }
  body:has(#app-layout) .nav-link { min-height:44px; height:auto; padding:12px 14px; border:1px solid transparent; border-radius:10px; color:var(--ov-secondary); font-size:14px; font-weight:500; gap:12px; position:relative; }
  body:has(#app-layout) .nav-link .icon { width:18px; height:18px; stroke-width:1.65; }
  body:has(#app-layout) .nav-link:hover { background:var(--ov-hover); color:var(--ov-text); }
  body:has(#app-layout) .nav-link.active { background:var(--ov-surface); border-color:var(--ov-line); color:var(--ov-accent); font-weight:600; }
  body:has(#app-layout) .nav-link.active::before { content:""; position:absolute; width:3px; height:16px; left:-1px; top:50%; transform:translateY(-50%); border-radius:2px; background:var(--ov-accent); }
  body:has(#app-layout) .topbar { min-height:76px; height:auto; padding:12px 36px; border-color:var(--ov-line); background:var(--ov-paper); backdrop-filter:none; }
  body:has(#app-layout) .topbar-context { font-size:13px; color:var(--ov-muted); gap:12px; }
  body:has(#app-layout) .topbar-context strong { color:var(--ov-text); font-weight:600; }
  body:has(#app-layout) .topbar-actions { gap:16px; }
  body:has(#app-layout) .top-profile { color:var(--ov-secondary); font-size:12px; gap:9px; }
  body:has(#app-layout) .profile-avatar { width:30px; height:30px; font-family:var(--ov-font); font-size:12px; font-weight:600; background:var(--ov-soft); color:var(--ov-secondary); }
  body:has(#app-layout) :is(.theme-toggle,.logout-button,.icon-button,.small-button) { min-height:44px; border:1px solid var(--ov-line); border-radius:var(--ov-control-radius); background:var(--ov-surface); color:var(--ov-secondary); font-size:12px; font-weight:550; padding:10px 13px; box-shadow:none; }
  body:has(#app-layout) :is(.theme-toggle,.logout-button,.icon-button,.small-button):hover { background:var(--ov-hover); color:var(--ov-text); border-color:var(--ov-line); }
  body:has(#app-layout) :is(.theme-toggle,.logout-button,.icon-button,.small-button):active { background:var(--ov-accent-soft); }
  body:has(#app-layout) .main-content { width:100%; max-width:1480px; margin:0 auto; padding:32px 36px 24px; }
  body:has(#app-layout) .traffic-heading { align-items:flex-end; gap:24px; margin-bottom:24px; }
  body:has(#app-layout) .eyebrow { font-size:10px; font-weight:550; letter-spacing:.1em; color:var(--ov-muted); gap:8px; }
  body:has(#app-layout) .eyebrow-line { display:none; }
  body:has(#app-layout) #page-title { font-size:34px; font-weight:650; letter-spacing:-.04em; line-height:1.18; margin:9px 0 8px; }
  body:has(#app-layout) #page-description { font-size:13px; line-height:1.6; color:var(--ov-secondary); }
  body:has(#app-layout) :is(.connection-pill,.neutral-badge,.status-badge) { font-size:11px; font-weight:500; line-height:1.5; padding:5px 10px; background:var(--ov-soft); color:var(--ov-secondary); border-radius:999px; }
  body:has(#app-layout) :is(.connection-pill.ready,.status-badge.active) { color:var(--ov-success-fg); background:var(--ov-success-bg); }
  body:has(#app-layout) :is(.connection-pill.warning,.status-badge.paused,.status-badge.pending) { color:var(--ov-warning-fg); background:var(--ov-warning-bg); }
  body:has(#app-layout) .status-badge.error { color:var(--ov-danger-fg); background:var(--ov-danger-bg); }
  body:has(#app-layout) .connection-pill::before { width:5px; height:5px; }
  body:has(#app-layout) .filter-bar { display:grid; grid-template-columns:minmax(135px,1fr) minmax(180px,1.15fr) minmax(190px,1.6fr) auto; gap:10px 16px; padding:0; margin-bottom:12px; align-items:end; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .filter-bar label { min-width:0; gap:7px; }
  body:has(#app-layout) .filter-bar label>span { color:var(--ov-muted); font-size:10px; letter-spacing:.07em; font-weight:550; }
  body:has(#app-layout) .filter-bar .campaign-filter { min-width:0; width:100%; max-width:none; }
  body:has(#app-layout) .filter-bar :is(select,input) { width:100%; min-width:0; max-width:100%; min-height:44px; border:1px solid var(--ov-line); border-radius:var(--ov-control-radius); background-color:var(--ov-surface); color:var(--ov-text); padding:10px 12px; font-size:13px; font-weight:500; outline-offset:3px; }
  body:has(#app-layout) .filter-bar select:hover { border-color:var(--ov-muted); }
  body:has(#app-layout) #reload-traffic { grid-column:4; grid-row:1; min-height:44px; margin:0; align-self:end; }
  body:has(#app-layout) .filter-meta { grid-column:1/-1; grid-row:2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:4px 16px; margin:0; padding-top:0; border-top:0; color:var(--ov-secondary); font-size:11px; min-width:0; }
  body:has(#app-layout) .filter-meta small { color:var(--ov-muted); font-size:11px; }
  body:has(#app-layout) .custom-period { grid-column:1/-1; grid-row:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; align-items:end; width:100%; }
  body:has(#app-layout) .filter-bar:has(#custom-period:not([hidden])) .filter-meta { grid-row:3; }
  body:has(#app-layout) .sync-toolbar { margin:0 0 20px; min-height:20px; gap:12px; }
  body:has(#app-layout) .sync-toolbar p { font-size:11px; color:var(--ov-muted); line-height:1.6; margin:0; }
  body:has(#app-layout) .campaign-selection-summary { background:var(--ov-accent-soft); border:1px solid var(--ov-accent-line); border-radius:12px; padding:16px 18px; margin-bottom:16px; gap:16px; }
  body:has(#app-layout) .campaign-selection-summary small { color:var(--ov-accent); font-size:10px; letter-spacing:.07em; font-weight:600; }
  body:has(#app-layout) .campaign-selection-summary strong { color:var(--ov-text); font-size:15px; font-weight:600; line-height:1.5; }
  body:has(#app-layout) .campaign-selection-summary span { color:var(--ov-secondary); font-size:12px; }
  body:has(#app-layout) .traffic-kpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; margin-bottom:28px; border:1px solid var(--ov-line); border-radius:18px; background:var(--ov-surface); overflow:hidden; }
  body:has(#app-layout) .traffic-kpi { min-width:0; min-height:164px; padding:24px; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .traffic-kpi:not(:nth-child(3n+1)) { border-left:1px solid var(--ov-line); }
  body:has(#app-layout) .traffic-kpi .kpi-label { color:var(--ov-secondary); font-size:12px; line-height:1.4; font-weight:500; gap:8px; }
  body:has(#app-layout) .traffic-kpi .kpi-label .icon { width:16px; height:16px; color:var(--ov-muted); stroke-width:1.5; }
  body:has(#app-layout) .traffic-kpi strong { color:var(--ov-text); display:block; font-size:clamp(30px,3.1vw,44px); font-weight:600; letter-spacing:-.045em; line-height:1.15; margin:20px 0 10px; overflow-wrap:anywhere; }
  body:has(#app-layout) .traffic-kpi .kpi-note { display:block; color:var(--ov-muted); font-size:11px; line-height:1.55; }
  body:has(#app-layout) .traffic-kpi.primary-kpi { border-color:var(--ov-line); background:transparent; }
  body:has(#app-layout) .traffic-kpi.primary-kpi strong { color:var(--ov-accent); }
  body:has(#app-layout) .traffic-kpi:nth-child(n+4) { min-height:112px; padding:18px 24px; background:var(--ov-soft); border-top:1px solid var(--ov-line); }
  body:has(#app-layout) .traffic-kpi:nth-child(n+4) strong { font-size:28px; margin:13px 0 7px; }
  body:has(#app-layout) .traffic-overview-grid { grid-template-columns:minmax(0,2fr) minmax(240px,.82fr); gap:20px; margin-bottom:24px; }
  body:has(#app-layout) .traffic-chart-panel { padding:24px; }
  body:has(#app-layout) .account-panel { padding:8px 0 8px 24px; background:transparent; border:0; border-left:1px solid var(--ov-line); border-radius:0; }
  body:has(#app-layout) .panel-header { align-items:center; gap:16px; }
  body:has(#app-layout) .section-label { color:var(--ov-muted); font-size:10px; letter-spacing:.08em; font-weight:550; }
  body:has(#app-layout) .panel h2 { color:var(--ov-text); font-size:18px; letter-spacing:-.025em; font-weight:600; margin:5px 0 0; line-height:1.4; }
  body:has(#app-layout) .spend-chart { min-height:234px; }
  body:has(#app-layout) .spend-svg { height:220px; margin-top:12px; overflow:visible; }
  body:has(#app-layout) .spend-svg text { font-family:var(--ov-font); font-variant-numeric:tabular-nums; font-size:10px; fill:var(--ov-muted); }
  body:has(#app-layout) .spend-grid { stroke:var(--ov-chart-grid); }
  body:has(#app-layout) .spend-line { stroke:var(--ov-chart-line); stroke-width:2.25; }
  body:has(#app-layout) .spend-dot { fill:var(--ov-chart-line); r:0; }
  body:has(#app-layout) .spend-dot:last-child { r:3.5px; }
  body:has(#app-layout) .chart-date-labels { margin:4px 0 0 38px; gap:8px; font-size:11px; color:var(--ov-muted); }
  body:has(#app-layout) .chart-accessible-table { color:var(--ov-secondary); margin-top:10px; font-size:12px; }
  body:has(#app-layout) .chart-accessible-table summary { display:list-item; min-height:44px; width:fit-content; padding:12px 2px; cursor:pointer; }
  body:has(#app-layout) .chart-accessible-table :is(td,th) { padding:9px 4px; border-bottom:1px solid var(--ov-line); font-size:12px; }
  body:has(#app-layout) .account-highlight { align-items:center; gap:16px; padding:20px 0; border-color:var(--ov-line); }
  body:has(#app-layout) .account-highlight strong { font-size:44px; font-weight:550; line-height:1; letter-spacing:-.05em; color:var(--ov-text); }
  body:has(#app-layout) .account-highlight span { color:var(--ov-secondary); font-size:12px; line-height:1.6; white-space:pre-line; }
  body:has(#app-layout) .account-details { gap:14px; margin:20px 0 14px; }
  body:has(#app-layout) .account-details>div { gap:4px; }
  body:has(#app-layout) .account-details small { color:var(--ov-muted); font-size:10px; letter-spacing:.06em; font-weight:550; }
  body:has(#app-layout) .account-details strong { color:var(--ov-text); font-size:12px; line-height:1.5; font-weight:500; }
  body:has(#app-layout) :is(.panel-link,.quiet-link) { display:inline-flex; align-items:center; gap:8px; min-height:44px; font-size:12px; color:var(--ov-accent); font-weight:550; }
  body:has(#app-layout) .panel-link { display:flex; border-color:var(--ov-line); }
  body:has(#app-layout) :is(.panel-link,.quiet-link):hover { text-decoration:underline; text-underline-offset:4px; }
  body:has(#app-layout) .traffic-table-panel { padding:0; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .traffic-table-panel .campaign-table-wrap { border:1px solid var(--ov-line); border-radius:14px; background:var(--ov-surface); }
  body:has(#app-layout) .traffic-table-panel>.panel-header { margin-bottom:16px; }
  body:has(#app-layout) .data-table-wrap { border-color:var(--ov-line); }
  body:has(#app-layout) .data-table { min-width:0; font-size:14px; }
  body:has(#app-layout) .data-table th { color:var(--ov-muted); font-size:11px; font-weight:550; letter-spacing:.055em; padding:15px 12px; border-color:var(--ov-line); white-space:normal; }
  body:has(#app-layout) .data-table td { color:var(--ov-text); padding:14px 12px; border-color:var(--ov-line); font-size:13px; }
  body:has(#app-layout) .data-table .numeric { font-weight:550; }
  body:has(#app-layout) .data-table .name-cell { max-width:360px; gap:3px; }
  body:has(#app-layout) .data-table .name-cell strong { color:var(--ov-text); font-size:13px; font-weight:550; line-height:1.5; }
  body:has(#app-layout) .data-table .name-cell small { color:var(--ov-muted); font-size:11px; }
  body:has(#app-layout) .campaign-select-button { min-height:44px; padding:6px 0; text-align:left; border-radius:5px; }
  body:has(#app-layout) .campaign-row:hover td { background:var(--ov-hover); }
  body:has(#app-layout) .campaign-row.selected td { background:var(--ov-accent-soft); }
  body:has(#app-layout) .campaign-row.selected td:first-child { box-shadow:inset 2px 0 var(--ov-accent); }
  body:has(#app-layout) .traffic-footer { color:var(--ov-muted); font-size:11px; padding:24px 0 0; }
  body:has(#app-layout) .traffic-state { background:var(--ov-soft); border:1px solid var(--ov-line); border-radius:var(--ov-radius); padding:20px; }
  body:has(#app-layout) .traffic-state .state-symbol { background:var(--ov-surface); border-color:var(--ov-line); border-radius:10px; color:var(--ov-muted); }
  body:has(#app-layout) .traffic-state strong { color:var(--ov-text); font-size:15px; line-height:1.5; }
  body:has(#app-layout) :is(.traffic-state p,.empty-block,.chart-empty) { color:var(--ov-secondary); font-size:12px; line-height:1.65; }
  body:has(#app-layout) .empty-block strong { color:var(--ov-text); font-size:14px; }
  body:has(#app-layout) :is(.chart-empty,.empty-block) .icon { color:var(--ov-muted); }
  body:has(#app-layout) .page-alert { background:var(--ov-danger-bg); border-color:var(--ov-danger-fg); color:var(--ov-danger-fg); font-size:13px; border-radius:12px; }
}
@media screen and (min-width:1550px) {
  body:has(#app-layout) .main-content { padding-left:48px; padding-right:48px; }
  body:has(#app-layout) .topbar { padding-left:48px; padding-right:48px; }
}
@media screen and (min-width:721px) and (max-width:1120px) {
  body:has(#app-layout) #app-layout { grid-template-columns:208px minmax(0,1fr); }
  body:has(#app-layout) .main-content { padding:28px 24px 24px; }
  body:has(#app-layout) .topbar { padding-left:24px; padding-right:24px; }
  body:has(#app-layout) .traffic-kpi { padding:18px; }
  body:has(#app-layout) .traffic-kpi strong { font-size:30px; }
  body:has(#app-layout) .traffic-overview-grid { grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr); gap:16px; }
  body:has(#app-layout) :is(.traffic-chart-panel,.account-panel) { padding:20px; }
  body:has(#app-layout) .filter-bar { grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); }
  body:has(#app-layout) .filter-bar .campaign-filter { grid-column:1; grid-row:2; }
  body:has(#app-layout) #reload-traffic { grid-column:2; grid-row:2; justify-self:end; }
  body:has(#app-layout) .filter-meta { grid-row:3; }
  body:has(#app-layout) .custom-period { grid-row:3; }
  body:has(#app-layout) .filter-bar:has(#custom-period:not([hidden])) .filter-meta { grid-row:4; }
  body:has(#app-layout) .top-profile .profile-name { max-width:130px; overflow-wrap:anywhere; }
}
@media screen and (min-width:721px) and (max-width:900px) {
  body:has(#app-layout) .traffic-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(#app-layout) .traffic-kpi:nth-child(n+4) { padding:18px; min-height:150px; }
  body:has(#app-layout) .traffic-kpi:nth-child(n+4) strong { margin-top:20px; font-size:30px; }
  body:has(#app-layout) .traffic-overview-grid { grid-template-columns:minmax(0,1fr); }
  body:has(#app-layout) .account-panel { display:block; }
  body:has(#app-layout) .account-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(#app-layout) .account-details>div:last-child { grid-column:1/-1; }
  body:has(#app-layout) .data-table .name-cell { max-width:190px; }
}
@media screen and (max-width:1200px) {
  body:has(#app-layout) .campaign-data-table thead { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  body:has(#app-layout) .traffic-table-panel>.panel-header { flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  body:has(#app-layout) .traffic-table-panel .quiet-link { font-size:12px; }
  body:has(#app-layout) .traffic-table-panel .campaign-table-wrap { overflow:visible; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .campaign-data-table { display:block; min-width:0; width:100%; }
  body:has(#app-layout) .campaign-data-table tbody { display:grid; gap:12px; }
  body:has(#app-layout) .campaign-data-table tbody tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; padding:16px; border:1px solid var(--ov-line); border-radius:12px; background:var(--ov-surface); }
  body:has(#app-layout) .campaign-data-table tbody tr.selected { border-color:var(--ov-accent-line); background:var(--ov-accent-soft); }
  body:has(#app-layout) .campaign-data-table td { display:flex; align-items:flex-start; justify-content:flex-start; flex-direction:column; gap:6px; min-width:0; padding:12px 0; border:0; font-size:15px; color:var(--ov-text); background:transparent; }
  body:has(#app-layout) .campaign-data-table .name-cell { max-width:100%; gap:4px; }
  body:has(#app-layout) .campaign-data-table .name-cell strong { font-size:14px; font-weight:600; line-height:1.55; }
  body:has(#app-layout) .campaign-data-table .name-cell small { font-size:11px; }
  body:has(#app-layout) .campaign-data-table td:first-child { grid-column:1/-1; padding:0 0 12px; }
  body:has(#app-layout) .campaign-data-table .campaign-select-button { min-height:44px; padding:0; }
  body:has(#app-layout) .campaign-data-table .campaign-status-cell { grid-column:1/-1; flex-direction:row; justify-content:space-between; align-items:center; border-block:1px solid var(--ov-line); padding:10px 0; }
  body:has(#app-layout) .campaign-data-table .numeric { text-align:left; font-size:15px; white-space:normal; font-weight:550; }
  body:has(#app-layout) .campaign-data-table .mobile-cell-label { display:block; color:var(--ov-secondary); font-size:11px; font-weight:400; }
  body:has(#app-layout) .campaign-data-table .status-badge { font-size:11px; padding:5px 10px; }
  body:has(#app-layout) :is(.campaign-row.selected,.campaign-row:hover) td { background:transparent; }
  body:has(#app-layout) .campaign-row.selected td:first-child { box-shadow:none; }
}
@media screen and (max-width:900px) {
  body:has(#app-layout) .traffic-kpi:not(:nth-child(3n+1)) { border-left:0; }
  body:has(#app-layout) .traffic-kpi:nth-child(n+3) { border-top:1px solid var(--ov-line); }
  body:has(#app-layout) .traffic-kpi:nth-child(even) { border-left:1px solid var(--ov-line); }
  body:has(#app-layout) .traffic-kpi:nth-child(n+4) { background:transparent; }
}
@media screen and (max-width:720px) {
  body:has(#app-layout) #app-layout { display:block; }
  body:has(#app-layout) .topbar { padding:10px 16px; padding-top:max(10px,env(safe-area-inset-top)); gap:10px; min-height:70px; background:var(--ov-surface); backdrop-filter:none; }
  body:has(#app-layout) .mobile-menu { width:44px; height:44px; padding:0; margin:0; flex:0 0 44px; }
  body:has(#app-layout) .topbar-context { flex-direction:column; gap:3px; font-size:12px; }
  body:has(#app-layout) .mobile-brand img { width:88px; }
  body:has(#app-layout) .topbar-context strong { color:var(--ov-secondary); font-size:11px; font-weight:500; }
  body:has(#app-layout) .topbar-actions { gap:6px; }
  body:has(#app-layout) .theme-toggle { width:44px; padding:0; }
  body:has(#app-layout) .top-profile { display:none; }
  body:has(#app-layout) .logout-button { min-width:44px; padding:10px; font-size:12px; }
  body:has(#app-layout) .sidebar { z-index:41; width:min(320px,calc(100vw - 40px)); padding:28px 16px max(20px,env(safe-area-inset-bottom)); }
  body:has(#app-layout) .sidebar .brand { padding-left:12px; }
  body:has(#app-layout) .sidebar-close { width:44px; height:44px; padding:0; font-size:28px; }
  body:has(#app-layout) .sidebar .account-switcher { margin-top:30px; min-height:68px; }
  body:has(#app-layout) .sidebar .client-select { min-height:44px; font-size:16px; }
  body:has(#app-layout) .sidebar .nav-link { min-height:48px; font-size:15px; }
  body:has(#app-layout) .main-content { padding:24px 18px calc(96px + env(safe-area-inset-bottom)); }
  body:has(#app-layout) .traffic-heading { align-items:flex-start; flex-direction:column; margin-bottom:20px; gap:12px; }
  body:has(#app-layout) #page-title { font-size:30px; margin:8px 0; }
  body:has(#app-layout) #page-description { font-size:13px; line-height:1.6; }
  body:has(#app-layout) .connection-pill { font-size:11px; }
  body:has(#app-layout) .mobile-filters-toggle { min-height:66px; padding:13px 15px; margin-bottom:16px; color:var(--ov-text); }
  body:has(#app-layout) .mobile-filters-toggle strong { font-size:14px; font-weight:600; }
  body:has(#app-layout) .mobile-filters-toggle small { font-size:12px; color:var(--ov-secondary); }
  body:has(#app-layout) .filter-bar:not(.filters-open) { display:none; }
  body:has(#app-layout) .filter-bar { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; padding:16px; margin-top:-6px; margin-bottom:16px; }
  body:has(#app-layout) .filter-bar label { grid-column:1; grid-row:auto; gap:8px; }
  body:has(#app-layout) .filter-bar :is(input,select) { min-height:48px; font-size:16px; }
  body:has(#app-layout) .custom-period { grid-column:1; grid-row:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  body:has(#app-layout) .custom-period .small-button { grid-column:1/-1; }
  body:has(#app-layout) #reload-traffic { grid-column:1; grid-row:auto; justify-self:stretch; min-height:46px; }
  body:has(#app-layout) .filter-meta,body:has(#app-layout) .filter-bar:has(#custom-period:not([hidden])) .filter-meta { grid-column:1; grid-row:auto; display:grid; gap:4px; font-size:12px; width:100%; }
  body:has(#app-layout) .filter-meta small { font-size:11px; }
  body:has(#app-layout) .filter-bar .mobile-filters-done { display:inline-flex; min-height:46px; background:var(--ov-accent-soft); border-color:var(--ov-accent-line); color:var(--ov-accent); font-size:14px; }
  body:has(#app-layout) .sync-toolbar { margin-bottom:18px; }
  body:has(#app-layout) .sync-toolbar p { font-size:11px; line-height:1.6; }
  body:has(#app-layout) .traffic-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-bottom:20px; }
  body:has(#app-layout) .traffic-kpi,body:has(#app-layout) .traffic-kpi:nth-child(n+4) { padding:17px 15px; min-height:148px; background:transparent; }
  body:has(#app-layout) .traffic-kpi .kpi-label { font-size:12px; align-items:flex-start; min-height:34px; line-height:1.4; gap:5px; }
  body:has(#app-layout) .traffic-kpi .kpi-label .icon { width:14px; height:14px; margin-top:1px; }
  body:has(#app-layout) .traffic-kpi strong,body:has(#app-layout) .traffic-kpi:nth-child(n+4) strong { font-size:clamp(23px,6vw,28px); margin:12px 0 9px; line-height:1.2; }
  body:has(#app-layout) .traffic-kpi .kpi-note { font-size:11px; line-height:1.55; }
  body:has(#app-layout) .traffic-overview-grid { grid-template-columns:minmax(0,1fr); gap:18px; margin-bottom:20px; }
  body:has(#app-layout) :is(.traffic-chart-panel,.account-panel,.traffic-table-panel) { padding:20px 16px; }
  body:has(#app-layout) .panel h2 { font-size:18px; }
  body:has(#app-layout) .panel-header { gap:12px; }
  body:has(#app-layout) .neutral-badge { font-size:10px; }
  body:has(#app-layout) #spend-chart-context { max-width:44%; line-height:1.6; text-align:right; }
  body:has(#app-layout) .spend-chart { min-height:220px; }
  body:has(#app-layout) .spend-svg { height:auto; min-height:156px; margin-top:16px; }
  body:has(#app-layout) .spend-svg text { font-size:12px; }
  body:has(#app-layout) .spend-dot { r:0; }
  body:has(#app-layout) .spend-dot:last-child { r:3px; }
  body:has(#app-layout) .chart-date-labels { margin:8px 0 0; font-size:10px; }
  body:has(#app-layout) .chart-accessible-table summary { min-height:44px; font-size:12px; padding:12px 0; }
  body:has(#app-layout) .chart-accessible-table table { table-layout:fixed; width:100%; }
  body:has(#app-layout) .chart-accessible-table :is(td,th) { overflow-wrap:anywhere; font-size:11px; }
  body:has(#app-layout) .account-panel { display:block; padding:20px 0 0; border-left:0; border-top:1px solid var(--ov-line); }
  body:has(#app-layout) .traffic-table-panel { padding:0; }
  body:has(#app-layout) .account-highlight { padding:20px 0; gap:16px; }
  body:has(#app-layout) .account-highlight strong { font-size:40px; }
  body:has(#app-layout) .account-highlight span { font-size:12px; }
  body:has(#app-layout) .account-details { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:18px 0 10px; }
  body:has(#app-layout) .account-details>div:last-child { grid-column:1/-1; }
  body:has(#app-layout) .account-details strong { font-size:13px; }
  body:has(#app-layout) .campaign-selection-summary { padding:16px; }
  body:has(#app-layout) .campaign-selection-summary strong { font-size:14px; }
  body:has(#app-layout) .campaign-selection-summary span { font-size:12px; }
  body:has(#app-layout) .campaign-selection-summary .small-button { min-height:44px; font-size:13px; width:100%; }

  body:has(#app-layout) .mobile-results-nav { border-color:var(--ov-line); background:var(--ov-surface); backdrop-filter:none; box-shadow:none; gap:6px; padding:7px max(12px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); }
  body:has(#app-layout) .mobile-results-nav a { min-height:52px; gap:4px; border-radius:10px; color:var(--ov-secondary); font-size:11px; font-weight:550; }
  body:has(#app-layout) .mobile-results-nav a.active { background:var(--ov-accent-soft); color:var(--ov-accent); }
  body:has(#app-layout) .mobile-results-nav .icon { width:20px; height:20px; }
  body:has(#app-layout) .traffic-state { gap:12px; padding:16px; }
  body:has(#app-layout) .traffic-state p { font-size:12px; }
  body:has(#app-layout) .traffic-footer { font-size:10px; padding-top:20px; }
}
@media screen and (max-width:360px) {
  body:has(#app-layout) .main-content { padding-left:14px; padding-right:14px; }
  body:has(#app-layout) .traffic-kpis { gap:0; }
  body:has(#app-layout) .traffic-kpi,body:has(#app-layout) .traffic-kpi:nth-child(n+4) { padding:14px 11px; min-height:152px; }
  body:has(#app-layout) .traffic-kpi .kpi-label { font-size:11px; }
  body:has(#app-layout) .traffic-kpi .kpi-label .icon { display:none; }
  body:has(#app-layout) .traffic-kpi strong,body:has(#app-layout) .traffic-kpi:nth-child(n+4) strong { font-size:22px; }
  body:has(#app-layout) .topbar { padding-left:12px; padding-right:12px; }
  body:has(#app-layout) .topbar-actions { gap:4px; }
}
@media screen and (prefers-reduced-motion:reduce) {
  body:has(#app-layout) *, body:has(#app-layout) *::before, body:has(#app-layout) *::after { transition:none!important; animation:none!important; scroll-behavior:auto!important; }
}


/* Shared component finish. Keep print rules separate from screen styling. */
@media screen {
  body:has(#app-layout) :is(.primary-button,.danger-button,.text-button,.dialog-close,.login-submit) { min-height:44px; border-radius:var(--ov-control-radius); font-family:var(--ov-font); font-size:13px; font-weight:600; transition:background-color 140ms ease-out,border-color 140ms ease-out,color 140ms ease-out; box-shadow:none; }
  body:has(#app-layout) :is(.primary-button,.login-submit) { background:var(--ov-accent); border:1px solid var(--ov-accent); color:var(--ov-surface); }
  body:has(#app-layout) :is(.primary-button,.login-submit):hover { background:var(--ov-accent); filter:brightness(.93); }
  body:has(#app-layout) :is(.danger-button,.text-button.danger) { color:var(--ov-danger-fg); background:var(--ov-danger-bg); border-color:var(--ov-danger-bg); }
  body:has(#app-layout) .text-button { padding:8px 11px; color:var(--ov-accent); border:1px solid var(--ov-line); background:var(--ov-surface); }
  body:has(#app-layout) .text-button:hover { background:var(--ov-hover); }
  body:has(#app-layout) .table-search { gap:10px; min-height:44px; padding:0 13px; border:1px solid var(--ov-line); border-radius:var(--ov-control-radius); background:var(--ov-surface); color:var(--ov-muted); }
  body:has(#app-layout) .table-search input { min-width:0; width:100%; min-height:44px; font-size:13px; background:transparent; color:var(--ov-text); border:0; }
  body:has(#app-layout) .table-search input::placeholder { color:var(--ov-muted); opacity:1; }
  body:has(#app-layout) .panel-description { color:var(--ov-secondary); font-size:12px; line-height:1.6; }
  body:has(#app-layout) .table-note { margin:0 0 16px; }
  body:has(#app-layout) :is(.report-actions,.meta-summary,.permission-intro) { padding:20px 24px; gap:20px; background:var(--ov-surface); color:var(--ov-text); border:1px solid var(--ov-line); border-radius:var(--ov-radius); margin-bottom:24px; box-shadow:none; }
  body:has(#app-layout) .report-actions strong { font-size:15px; font-weight:600; }
  body:has(#app-layout) :is(.report-actions p,.meta-summary p,.permission-intro p) { color:var(--ov-secondary); font-size:13px; line-height:1.65; }
  body:has(#app-layout) .report-document { padding:32px; border-color:var(--ov-line); background:var(--ov-surface); box-shadow:none; }
  body:has(#app-layout) .report-masthead { padding-bottom:24px; border-color:var(--ov-line); }
  body:has(#app-layout) .report-masthead>span { color:var(--ov-muted); font-size:10px; letter-spacing:.08em; }
  body:has(#app-layout) #report-document .report-title { font-size:28px; font-weight:600; letter-spacing:-.035em; margin-top:24px; }
  body:has(#app-layout) .report-meta { color:var(--ov-secondary); font-size:13px; line-height:1.8; }
  body:has(#app-layout) .report-kpis { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--ov-line); border-radius:12px; overflow:hidden; background:var(--ov-soft); margin:24px 0; }
  body:has(#app-layout) .report-kpis>div { min-width:0; padding:20px; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .report-kpis>div:not(:nth-child(3n+1)) { border-left:1px solid var(--ov-line); }
  body:has(#app-layout) .report-kpis>div:nth-child(n+4) { border-top:1px solid var(--ov-line); }
  body:has(#app-layout) .report-kpis span { color:var(--ov-secondary); font-size:12px; }
  body:has(#app-layout) .report-kpis strong { display:block; color:var(--ov-text); font-size:28px; line-height:1.2; font-weight:600; letter-spacing:-.035em; margin-top:12px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
  body:has(#app-layout) .report-footnote { color:var(--ov-secondary); border-color:var(--ov-line); font-size:12px; line-height:1.8; margin-top:24px; }
  body:has(#app-layout) .report-document .campaign-table-wrap { border:1px solid var(--ov-line); border-radius:12px; }
  body:has(#app-layout) .data-table :is(td,th) { overflow-wrap:anywhere; }
  body:has(#app-layout) .data-table .name-cell { min-width:0; }
  body:has(#app-layout) .data-table .numeric { font-variant-numeric:tabular-nums; }
  body:has(#app-layout) .table-actions { gap:8px; flex-wrap:wrap; }
  body:has(#app-layout) .admin-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--ov-line); border-radius:var(--ov-radius); overflow:hidden; background:var(--ov-surface); margin-bottom:24px; }
  body:has(#app-layout) .admin-summary>div { display:flex; align-items:flex-start; flex-direction:column; gap:10px; padding:24px; border:0; border-radius:0; background:transparent; }
  body:has(#app-layout) .admin-summary>div+div { border-left:1px solid var(--ov-line); }
  body:has(#app-layout) .admin-summary strong { font-size:36px; line-height:1; font-weight:600; letter-spacing:-.035em; color:var(--ov-text); font-variant-numeric:tabular-nums; }
  body:has(#app-layout) .admin-summary span { font-size:12px; color:var(--ov-secondary); }
  body:has(#app-layout) .admin-panel { padding:24px; }
  body:has(#app-layout) .admin-panel .data-table-wrap { border:1px solid var(--ov-line); border-radius:12px; }
  body:has(#app-layout) .admin-panel .data-table { width:100%; min-width:0; }
  body:has(#app-layout) .admin-panel .data-table td { vertical-align:top; }
  body:has(#app-layout) .admin-panel .data-table th:last-child { min-width:140px; }
  body:has(#app-layout) .status-badge.master { color:var(--ov-accent); background:var(--ov-accent-soft); }
  body:has(#app-layout) .permission-intro { align-items:flex-start; }
  body:has(#app-layout) .permission-intro>.icon { width:20px; height:20px; margin-top:3px; color:var(--ov-accent); flex-shrink:0; }
  body:has(#app-layout) .editor-dialog { width:min(600px,calc(100% - 32px)); max-height:calc(100dvh - 40px); padding:28px; background:var(--ov-surface); color:var(--ov-text); border:1px solid var(--ov-line); border-radius:20px; box-shadow:0 16px 48px #0002; }
  body:has(#app-layout) .editor-dialog::backdrop { background:#14181985; backdrop-filter:none; }
  body:has(#app-layout) .dialog-heading { gap:20px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid var(--ov-line); }
  body:has(#app-layout) .dialog-heading h2 { margin:6px 0 0; font-size:23px; line-height:1.3; font-weight:600; letter-spacing:-.03em; }
  body:has(#app-layout) .dialog-close { flex:0 0 44px; width:44px; padding:0; color:var(--ov-secondary); border:1px solid var(--ov-line); background:var(--ov-soft); font-size:24px; }
  body:has(#app-layout) .editor-form { gap:20px; }
  body:has(#app-layout) :is(.form-field>label,.field-label) { color:var(--ov-text); font-size:13px; font-weight:600; }
  body:has(#app-layout) .editor-dialog :is(input:not([type="checkbox"]),select) { min-height:46px; width:100%; padding:11px 13px; background:var(--ov-soft); color:var(--ov-text); border:1px solid var(--ov-line); border-radius:var(--ov-control-radius); font-size:14px; }
  body:has(#app-layout) .editor-dialog :is(.field-help,.access-row small,.meta-facts dt,.meta-account small,.meta-account>span) { color:var(--ov-secondary); font-size:12px; line-height:1.6; }
  body:has(#app-layout) :is(.dialog-copy,.checkbox-field,.access-row span) { color:var(--ov-text); font-size:13px; line-height:1.7; }
  body:has(#app-layout) .access-list { border-color:var(--ov-line); border-radius:12px; background:var(--ov-soft); }
  body:has(#app-layout) .access-row { min-height:68px; padding:14px; border-color:var(--ov-line); gap:12px; }
  body:has(#app-layout) input[type="checkbox"] { accent-color:var(--ov-brand-green); width:18px; height:18px; flex-shrink:0; }
  body:has(#app-layout) .dialog-actions { padding-top:20px; margin-top:8px; border-color:var(--ov-line); gap:10px; }
  body:has(#app-layout) .meta-account { border-color:var(--ov-line); border-radius:12px; padding:16px; background:var(--ov-soft); }
  body:has(#app-layout) .meta-facts dd { color:var(--ov-text); font-size:13px; }
  body:has(#app-layout) .toast { background:var(--ov-text); color:var(--ov-paper); border:1px solid var(--ov-line); box-shadow:0 6px 20px #0002; border-radius:12px; font-size:13px; line-height:1.5; }
  body:has(#app-layout) .auth-screen { background:var(--ov-paper); padding:24px; }
  body:has(#app-layout) .auth-card { width:min(420px,100%); padding:36px; border:1px solid var(--ov-line); border-radius:20px; background:var(--ov-surface); color:var(--ov-text); box-shadow:none; }
  body:has(#app-layout) .auth-card h1 { color:var(--ov-text); font-size:28px; font-weight:600; letter-spacing:-.035em; }
  body:has(#app-layout) .auth-card :is(p,.auth-helper) { color:var(--ov-secondary); font-size:13px; line-height:1.7; }
  body:has(#app-layout) .login-form { gap:12px; }
  body:has(#app-layout) .login-form label { color:var(--ov-text); font-size:13px; }
  body:has(#app-layout) .login-form input { min-height:48px; padding:0 14px; font-size:16px; border-radius:var(--ov-control-radius); background:var(--ov-soft); border-color:var(--ov-line); color:var(--ov-text); }
  body:has(#app-layout) .login-submit { min-height:48px; padding:12px 15px; font-size:14px; }
  body:has(#app-layout) .chart-interactive { position:relative; min-width:0; }
  body:has(#app-layout) .chart-interactive .spend-svg { display:block; cursor:crosshair; touch-action:pan-y; }
  body:has(#app-layout) .chart-crosshair { stroke:var(--ov-muted); stroke-width:1; stroke-dasharray:3 4; vector-effect:non-scaling-stroke; }
  body:has(#app-layout) .chart-active-dot { fill:var(--ov-chart-line); stroke:var(--ov-surface); stroke-width:2.5; vector-effect:non-scaling-stroke; }
  body:has(#app-layout) .chart-cursor { pointer-events:none; }
  body:has(#app-layout) .chart-tooltip { position:absolute; z-index:2; pointer-events:none; padding:10px 13px; min-width:140px; max-width:calc(100% - 16px); border:1px solid var(--ov-line); border-radius:10px; background:var(--ov-surface); color:var(--ov-text); box-shadow:0 4px 16px #0002; font-variant-numeric:tabular-nums; }
  body:has(#app-layout) .chart-tooltip time { display:block; color:var(--ov-secondary); font-size:12px; line-height:1.5; }
  body:has(#app-layout) .chart-tooltip strong { display:block; margin-top:3px; font-size:20px; line-height:1.3; font-weight:600; letter-spacing:-.025em; }
  body:has(#app-layout) .chart-hint { margin:12px 0 0; font-size:11px; line-height:1.65; color:var(--ov-muted); }
}
@media screen and (max-width:1200px) {
  body:has(#app-layout) .report-document .campaign-table-wrap { overflow:visible; border:0; border-radius:0; }
  body:has(#app-layout) .admin-panel .data-table-wrap { border:0; border-radius:0; overflow:visible; }
  body:has(#app-layout) .admin-panel .data-table thead { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  body:has(#app-layout) .admin-panel :is(.data-table,.data-table tbody) { display:block; }
  body:has(#app-layout) .admin-panel .data-table tbody { display:grid; gap:14px; }
  body:has(#app-layout) .admin-panel .data-table tr { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 16px; padding:18px; border:1px solid var(--ov-line); border-radius:12px; background:var(--ov-surface); }
  body:has(#app-layout) .admin-panel .data-table td { display:flex; flex-direction:column; gap:7px; min-width:0; padding:12px 0; border:0; text-align:left; font-size:14px; }
  body:has(#app-layout) .admin-panel .data-table td::before { content:attr(data-label); color:var(--ov-secondary); font-size:11px; font-weight:400; }
  body:has(#app-layout) .admin-panel .data-table td:first-child { grid-column:1/-1; padding-top:0; border-bottom:1px solid var(--ov-line); }
  body:has(#app-layout) .admin-panel .data-table td:first-child::before { display:none; }
  body:has(#app-layout) .admin-panel .data-table td:last-child { grid-column:1/-1; border-top:1px solid var(--ov-line); padding-bottom:0; }
  body:has(#app-layout) .admin-panel .data-table td:last-child::before { display:none; }
  body:has(#app-layout) .admin-panel .data-table .name-cell { max-width:100%; }
}
@media screen and (max-width:720px) {
  body:has(#app-layout) :is(.report-actions,.meta-summary,.permission-intro) { padding:18px; gap:16px; margin-bottom:20px; }
  body:has(#app-layout) .report-actions .button-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
  body:has(#app-layout) .report-actions :is(.small-button,.primary-button) { justify-content:center; font-size:13px; padding-inline:10px; }
  body:has(#app-layout) .report-document { padding:20px 16px; }
  body:has(#app-layout) #report-document .report-title { font-size:25px; }
  body:has(#app-layout) .report-meta { font-size:12px; }
  body:has(#app-layout) .report-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); }
  body:has(#app-layout) .report-kpis>div { padding:16px 12px; }
  body:has(#app-layout) .report-kpis>div:not(:nth-child(3n+1)) { border-left:0; }
  body:has(#app-layout) .report-kpis>div:nth-child(even) { border-left:1px solid var(--ov-line); }
  body:has(#app-layout) .report-kpis>div:nth-child(n+3) { border-top:1px solid var(--ov-line); }
  body:has(#app-layout) .report-kpis strong { font-size:25px; }
  body:has(#app-layout) .report-kpis span { font-size:11px; }
  body:has(#app-layout) .admin-summary>div { padding:18px 12px; gap:10px; }
  body:has(#app-layout) .admin-summary strong { font-size:30px; }
  body:has(#app-layout) .admin-summary span { font-size:11px; line-height:1.6; }
  body:has(#app-layout) .admin-panel { padding:0; border:0; background:transparent; }
  body:has(#app-layout) .wrap-header { align-items:stretch; gap:12px; }
  body:has(#app-layout) .wrap-header .table-search { width:100%; flex-basis:100%; }
  body:has(#app-layout) .table-search input { font-size:16px; }
  body:has(#app-layout) .meta-summary { align-items:flex-start; flex-direction:column; }
  body:has(#app-layout) .editor-dialog { width:calc(100% - 24px); max-height:calc(100dvh - 24px); padding:22px 18px; border-radius:16px; }
  body:has(#app-layout) .editor-dialog :is(input:not([type="checkbox"]),select) { min-height:48px; font-size:16px; }
  body:has(#app-layout) .dialog-actions { flex-wrap:wrap; }
  body:has(#app-layout) .auth-screen { padding:16px; }
  body:has(#app-layout) .auth-card { padding:28px 22px; }
  body:has(#app-layout) .chart-tooltip { min-width:130px; padding:9px 11px; }
}

@media screen {
  body:has(#app-layout) .spend-dot.isolated { r:3.5px; }
  body:has(#app-layout) .admin-panel .status-badge { align-self:flex-start; width:fit-content; }
  body:has(#app-layout) .table-search .icon { color:var(--ov-muted); opacity:1; }
  body:has(#app-layout) .spend-svg:focus:not(:focus-visible) { outline:none; }
}