:root{
  --pink:#ec0060;
  --pink-dark:#c60051;
  --turq:#42c8c3;
  --text:#252525;
  --muted:#707070;
  --line:#d8d8d8;
  --line2:#ececec;
  --panel:#4a4a4a;
  --side:#292929;
  --side2:#383838;
  --ok:#dff1d5;
  --ok-text:#4f7a4d;
  --bg:#fff;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;font-size:14px}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
#app{min-height:100%}

/* login */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:flex-start;background:#fff;padding-left:18vw}
.login-box{width:350px;margin-top:10px}
.login-box h1{font-size:22px;margin:0 0 3px;font-weight:500}
.login-box .sub{font-size:15px;margin-bottom:18px}
.login-box label{display:block;font-size:12px;margin:17px 0 9px;text-transform:uppercase}
.login-box input{width:100%;height:37px;border:0;background:#efefef;padding:0 9px;outline:none}
.login-box .forgot{display:inline-block;margin-top:12px;color:var(--pink);font-size:13px}
.login-box .signin-row{text-align:right;margin-top:24px}
.btn-pink{border:1px solid var(--pink);background:var(--pink);color:#fff;padding:10px 22px;border-radius:1px}
.btn-pink:hover{background:var(--pink-dark)}

/* shell */
.header{height:72px;border-bottom:1px solid #ccc;background:#fff;display:flex;align-items:center;padding:0 32px 0 43px;position:sticky;top:0;z-index:20}
.logo{width:170px;display:flex;align-items:center;gap:6px;font-size:25px;font-weight:600;color:#222}
.logo-mark{position:relative;width:18px;height:18px;transform:rotate(45deg);background:#111;display:inline-block}
.logo-mark:after{content:"";position:absolute;left:6px;top:6px;width:8px;height:8px;background:var(--pink)}
.topnav{height:100%;display:flex;align-items:center;gap:26px;border-left:1px solid #cfcfcf;padding-left:23px;font-size:13px}
.navitem{height:100%;display:flex;align-items:center;gap:5px;cursor:pointer;white-space:nowrap}
.navitem.active,.navitem:hover{color:var(--pink)}
.chev{font-size:11px;color:#111}
.navgroup{position:relative;height:100%;display:flex;align-items:center}.navmenu{display:none;position:absolute;left:-12px;top:58px;min-width:160px;padding:6px;background:#fff;border:1px solid var(--line);box-shadow:0 5px 14px rgba(0,0,0,.15);z-index:30}.navgroup:hover .navmenu,.navgroup:focus-within .navmenu{display:block}.navmenu button{display:block;width:100%;padding:10px 12px;border:0;background:#fff;text-align:left;white-space:nowrap}.navmenu button:hover{background:#f6f6f6;color:var(--pink)}
.userbox{margin-left:auto;height:46px;border-left:1px solid #cfcfcf;padding-left:19px;display:flex;align-items:center;gap:15px}
.account{font-size:12px;line-height:1.4;min-width:105px}.account b{display:block;font-size:13px;font-weight:500}.account span{color:#777}
.iconrow{display:flex;gap:12px;color:#666;font-size:17px}
.layout{display:flex;min-height:calc(100vh - 72px)}
.sidebar{width:208px;background:var(--side);color:#fff;position:fixed;top:72px;bottom:0;left:0;padding:12px 10px 37px;overflow:auto;z-index:10}
.sidebar .widebtn{width:100%;height:32px;border:1px solid #ddd;background:transparent;color:#fff;margin-bottom:10px}
.sidebar .smalllabel{font-size:12px;color:#ddd;margin:8px 1px 12px}
.side-title{font-size:13px;color:#eee;margin:4px 0 3px}.side-id{font-size:11px;color:#a9a9a9}
.side-section{border-top:1px solid #737373;margin-top:17px;padding-top:10px}
.side-item{padding:10px 6px;margin:0 -10px 2px 0;border-bottom:1px solid #454545;cursor:pointer}
.side-item:hover,.side-item.active{background:#4a4a4a}
.side-item .meta{display:flex;justify-content:space-between;color:#999;font-size:11px;margin-bottom:5px}.side-item .name{font-size:13px}.side-item .count{float:right;color:#ddd}
.sidebar-empty{padding:12px 6px;color:#aaa;font-size:12px;border-bottom:1px solid #454545}
.archive{position:fixed;left:0;bottom:0;width:208px;background:#404040;text-align:center;padding:9px;color:#ddd;font-size:11px}
.content{margin-left:208px;width:calc(100% - 208px);padding:16px 22px 50px;min-width:0}
.content.no-side{margin-left:0;width:100%;padding:22px}

.breadcrumb-tabs{display:flex;gap:35px;margin:8px 10px 12px;height:28px;align-items:flex-end}
.tab{padding-bottom:7px;color:var(--pink);cursor:pointer}.tab.active{color:#111;border-bottom:2px solid var(--pink);font-weight:600}
.sectionbar{height:38px;background:var(--panel);color:#fff;display:flex;align-items:center;padding:0 14px;margin-bottom:0;font-size:16px}.sectionbar:before{content:"▶";font-size:11px;color:var(--pink);margin-right:9px}.sectionbar .right{margin-left:auto}.sectionbar .back{font-size:12px;color:#fff;cursor:pointer}
.subtabs{display:flex;gap:27px;border-bottom:1px solid var(--line);padding:0 8px;height:43px;align-items:flex-end}.subtabs .tab{font-size:13px;padding:0 0 10px}
.card{border:1px solid var(--line);border-radius:3px;background:#fff;padding:15px 14px;margin-bottom:14px}
.form-grid{display:grid;grid-template-columns:170px minmax(260px,1fr);column-gap:10px;row-gap:17px;align-items:center}.form-grid.two{grid-template-columns:160px minmax(220px,1fr) 160px minmax(220px,1fr)}
.lbl{font-weight:600;font-size:12px}.req:after{content:"*";color:var(--pink)}
.line-input,.line-select{border:0;border-bottom:1px solid #d8d8d8;height:32px;padding:0 3px;outline:none;width:100%;background:#fff}.line-input:focus,.line-select:focus{border-bottom-color:var(--turq)}
.line-select{appearance:none;-webkit-appearance:none;padding:0 31px 0 9px;border:1px solid #cfcfcf;border-radius:3px;background-color:#fff;background-image:linear-gradient(45deg,transparent 50%,#666 50%),linear-gradient(135deg,#666 50%,transparent 50%);background-position:calc(100% - 15px) 13px,calc(100% - 10px) 13px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer}.line-select:hover{border-color:#999}.line-select:focus{border-color:var(--turq);box-shadow:0 0 0 2px rgba(53,196,190,.15)}.line-select option:disabled{color:#aaa}.line-select:disabled{color:#888;background-color:#f3f3f3;cursor:not-allowed}
textarea.line-input{min-height:64px;resize:vertical;padding-top:8px}
.inline{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
.radio,.check{display:inline-flex;align-items:center;gap:7px;margin-right:14px;font-size:12px;cursor:pointer}.check input{accent-color:var(--turq)}.radio input{appearance:none;-webkit-appearance:none;width:17px;height:17px;flex:0 0 17px;margin:0;border:2px solid #a8a8a8;border-radius:50%;background:#fff;display:grid;place-content:center;cursor:pointer}.radio input:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--turq);transform:scale(0);transition:transform .12s ease}.radio input:checked{border-color:var(--turq)}.radio input:checked:before{transform:scale(1)}.radio input:focus-visible{outline:2px solid rgba(53,196,190,.35);outline-offset:2px}.radio input:disabled{border-color:#ccc;background:#f2f2f2;cursor:not-allowed}.radio:has(input:disabled){color:#999;cursor:not-allowed}
.choice-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.radio.choice{min-height:34px;margin:0;padding:7px 11px;border:1px solid #d2d2d2;border-radius:3px;background:#fff;transition:border-color .12s,background .12s,box-shadow .12s}.radio.choice:hover{border-color:#999}.radio.choice:has(input:checked){border-color:var(--turq);background:#effafa;box-shadow:inset 0 0 0 1px var(--turq)}.choice-group.compact .radio.choice{min-height:32px;padding:5px 9px}.protocol-hint{min-height:32px;margin:0 0 12px;padding:9px 11px;border-left:3px solid var(--turq);background:#f3fbfa;color:#4a6967;font-size:11px;line-height:1.4}.protocol-fields-hidden{display:none}.pricing-row,.new-partner-fields{display:contents}.pricing-row[hidden],.new-partner-fields[hidden]{display:none!important}.check-inline{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13px;color:var(--muted)}
.multi-select{position:relative;min-width:0}.multi-select-trigger{width:100%;min-height:36px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid #cfcfcf;border-radius:3px;background:#fff;text-align:left;cursor:pointer}.multi-select-trigger:hover,.multi-select-trigger[aria-expanded="true"]{border-color:var(--turq);box-shadow:0 0 0 2px rgba(53,196,190,.12)}.multi-select-trigger span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333;font-size:12px}.multi-select-trigger b{color:#666}.multi-select-menu{position:absolute;top:39px;left:0;right:0;z-index:45;padding:9px;border:1px solid #bbb;border-radius:3px;background:#fff;box-shadow:0 8px 22px rgba(0,0,0,.18)}.multi-select-search{width:100%;height:33px;padding:0 9px;border:1px solid #ccc;border-radius:3px;outline:none}.multi-select-search:focus{border-color:var(--turq)}.multi-select-options{max-height:230px;margin:8px 0;overflow:auto;border-top:1px solid #eee;border-bottom:1px solid #eee}.multi-select-options label{display:flex;align-items:center;gap:9px;padding:8px 7px;font-size:12px;cursor:pointer}.multi-select-options label:hover{background:#effafa}.multi-select-options input{accent-color:var(--turq)}.multi-select-add{width:100%;text-align:left}.multi-select-trigger:disabled{background:#f3f3f3;color:#888;cursor:not-allowed}
.help{color:#aaa;font-size:12px}.hint{font-size:11px;color:#666;line-height:1.5}.pink{color:var(--pink)}
.hline{border-top:1px solid var(--line);margin:16px 0 12px}.heading-small{font-size:13px;font-weight:700;margin:6px 0 10px}
.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:13px}.btn{height:34px;border:1px solid #777;background:#fff;padding:0 15px}.btn:hover{background:#f4f4f4}.btn.tiny{height:26px;padding:0 10px;font-size:11px}.btn.teal{background:#43c9c0;color:white;border-color:#43c9c0}.btn.dark{background:#555;color:#fff;border-color:#555}
[data-campaign-page][hidden],.form-actions button[hidden]{display:none!important}
.toggle{display:inline-flex;vertical-align:middle;width:32px;height:18px;border-radius:11px;background:#888;position:relative;cursor:pointer}.toggle.readonly{cursor:default;opacity:.7}.toggle:after{content:"";position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;left:2px;top:2px;transition:.16s}.toggle.on{background:var(--turq)}.toggle.on:after{left:16px}
.tag{display:inline-flex;align-items:center;background:var(--pink);color:#fff;height:25px;padding:0 8px;margin:3px;font-size:11px;border-radius:2px}.tag.gray{background:#666}.tag.outline{background:#fff;color:#333;border:1px solid #777}.tagbtn{border:1px solid #666;background:#fff;padding:6px 11px;margin:4px 3px;font-size:11px}.tagbtn.used{background:#666;color:#fff}
.status-badge{display:inline-flex;align-items:center;min-width:62px;height:22px;padding:0 8px;border-radius:11px;font-size:10px;font-weight:700;letter-spacing:.025em}.status-enabled,.status-active{background:#dff5e8;color:#17683a}.status-paused{background:#fff0ca;color:#7a5700}.status-archived{background:#eceeef;color:#60666b}.status-unknown{background:#f1e5f3;color:#69416f}
.tag-layout{display:grid;grid-template-columns:41% 59%;gap:20px}.macro-groups{padding:0 5px}.macro-group{border-top:1px solid var(--line);padding:9px 0 12px}.macro-group:first-child{border-top:0}.macro-group h4{margin:0 0 6px;font-size:12px}
.copyline{font-family:Arial,sans-serif;font-size:13px;line-height:1.8;word-break:break-all;min-height:120px;white-space:pre-wrap}
.source-ingress-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0 0}.source-endpoint{min-width:0;border:1px solid var(--line);border-radius:4px;background:#fff;padding:13px 14px}.source-endpoint.ready{border-top:3px solid var(--turq)}.source-endpoint.pending{border-top:3px solid #aaa;background:#fafafa}.source-endpoint-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.source-endpoint-head span{display:flex;align-items:center;gap:8px}.source-endpoint-head b{font-size:12px}.source-endpoint-head small{padding:3px 6px;border-radius:2px;background:#555;color:#fff;font-size:9px;font-weight:700}.source-endpoint-value{min-height:34px;padding:8px 10px;border:1px solid #e0e0e0;background:#f8f8f8;color:#333;font:11px/1.55 monospace;overflow-wrap:anywhere}.source-endpoint.pending .source-endpoint-value{color:#888;font-family:Arial,sans-serif}.source-ingress-note{margin:0 0 14px;padding:10px 13px;border:1px solid #bfe7e5;background:#effafa;color:#356f6d;font-size:11px;line-height:1.5}.source-ingress-note b{margin-right:4px}
.dashboard-top-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:18px 0}.dashboard-top-table{margin-top:0}.analytics-daily-table{margin-top:18px}
.report-builder{margin:14px 0 0}.report-dimensions{display:flex;flex-wrap:wrap;gap:8px}.report-chip{height:34px;padding:0 13px;border:1px solid #777;background:#fff;border-radius:2px}.report-chip:hover{border-color:var(--turq)}.report-chip.selected{background:#666;color:#fff;border-color:#666}
/* The dimension chips wrap onto as many rows as the viewport needs; there are
   sixteen of them and they must never force the card to scroll sideways. */
.report-chip{cursor:pointer;font-size:12px;white-space:nowrap}
/* Numeric columns read as a column of digits, so they are right-aligned and
   never wrap: a metric split across two lines cannot be compared down the page.
   The generic table rule right-aligns only the last cell, which would leave the
   other eight metrics ragged. */
.report-table .metric-cell{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.report-table th:last-child,.report-table td:last-child{text-align:right}
.report-table .dim-cell{white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}
/* The first dimension column is frozen so the row stays identifiable while the
   nine metric columns are scrolled horizontally. The header cell needs the
   higher z-index because it is sticky in both axes at once. */
.report-table-wrap{overflow-x:auto}
.report-table tbody td:first-child{position:sticky;left:0;z-index:1;background:inherit}
.report-table thead th:first-child{position:sticky;left:0;z-index:3}
.report-table tbody tr{background:#fff}
.report-table tbody tr:nth-child(even){background:#f7f7f7}
.report-table tbody tr:hover{background:#eefafa}
.report-table tr.summary-row td{background:#e5e5e5!important}
.toast{position:fixed;right:16px;top:86px;background:var(--ok);color:var(--ok-text);padding:18px 20px;min-width:210px;z-index:50;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.debug-modal-backdrop{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-start;justify-content:center;padding:10px;background:rgba(0,0,0,.38)}.debug-modal{width:min(1790px,100%);height:calc(100vh - 20px);display:flex;flex-direction:column;overflow:hidden;background:#fff;border-radius:0 0 4px 4px;box-shadow:0 8px 30px rgba(0,0,0,.28)}.debug-modal>header{height:106px;flex:0 0 106px;display:flex;align-items:center;padding:0 30px;background:#585858;color:#fff}.debug-modal h2{margin:0;font-size:25px;font-weight:400}.debug-modal-x{margin-left:auto;border:0;background:transparent;color:var(--turq);font-size:48px;font-weight:200;line-height:1;cursor:pointer}.debug-modal-tabs{flex:0 0 auto;display:flex;gap:45px;padding:27px 40px 0;overflow-x:auto}.debug-modal-tabs button{padding:13px 10px 10px;border:0;border-bottom:4px solid transparent;background:#fff;color:var(--pink);font-size:18px;white-space:nowrap;cursor:pointer}.debug-modal-tabs button.active{border-bottom-color:var(--pink);color:#111;font-weight:700}.debug-modal-body{min-height:190px;flex:1 1 auto;padding:48px 20px 34px;overflow:auto}.debug-modal-body>p{margin:0;font-size:18px;line-height:1.55}.debug-log-sample{position:relative;margin:0 0 20px;border:1px solid #ccc;border-radius:7px;background:#f7f7f7}.debug-log-sample pre{min-height:190px;margin:0;padding:22px 62px 22px 20px;color:#383838;font:17px/1.38 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.debug-log-sample [data-copy-debug-log]{position:absolute;right:18px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--pink);font-size:30px;cursor:pointer}.debug-modal footer{flex:0 0 auto;display:flex;justify-content:flex-end;padding:26px 36px;border-top:1px solid var(--line);background:#f7f7f7}.debug-modal-close{height:48px;padding:0 24px;border:2px solid #111;border-radius:3px;font-size:16px}.trace-value{max-width:190px!important;font-family:monospace;font-size:10px;overflow:hidden!important;text-overflow:ellipsis;white-space:nowrap!important}

/* tables */
.filter-card{padding:20px 14px}.filter-grid{display:grid;grid-template-columns:140px minmax(180px,1fr) 150px minmax(180px,1fr);gap:13px 10px;align-items:center}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:visible;border:1px solid var(--line);border-radius:4px;margin-top:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.035);scrollbar-gutter:stable}
.table-wrap>table{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-size:12px;line-height:1.35;font-variant-numeric:tabular-nums}
.table-wrap th{position:sticky;top:0;z-index:2;background:#e3e4e5;color:#333;text-align:left;font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase;padding:11px 12px;border-right:1px solid #d0d1d2;border-bottom:1px solid #c8c9ca;white-space:nowrap}
.table-wrap th:last-child{border-right:0}
/* Sortable report headers. The arrow is dimmed until the column is the one in
   effect, so the affordance is visible without implying an order that is not
   applied. user-select:none stops a double-click from selecting the label
   instead of toggling the direction. */
.table-wrap th.sortable{cursor:pointer;user-select:none}
.table-wrap th.sortable:hover{background:#d7d8d9}
.table-wrap th.sortable .sort-arrow{opacity:.35;font-size:9px;margin-left:2px}
.table-wrap th.sortable.sorted{background:#d2e9e8;color:#1c1c1c}
.table-wrap th.sortable.sorted .sort-arrow{opacity:1}
.table-wrap td{padding:10px 12px;border-bottom:1px solid #e8e8e8;vertical-align:middle;white-space:normal;overflow-wrap:anywhere;word-break:normal;max-width:320px}
.table-wrap tbody tr:nth-child(even){background:#f7f7f7}.table-wrap tbody tr:hover{background:#eefafa}.table-wrap tbody tr:last-child td{border-bottom:0}
.table-wrap th:first-child,.table-wrap td:first-child{width:1%;white-space:nowrap}
.table-wrap th:last-child,.table-wrap td:last-child{text-align:right}
.table-wrap td:has(.btn){width:1%;min-width:112px;white-space:nowrap}
.table-wrap td:last-child .btn{margin:2px 0 2px 4px}
.table-wrap .empty{width:auto;max-width:none!important;text-align:center!important;white-space:normal!important;color:#777;padding:28px 16px}
.link{color:var(--pink);font-weight:600}
.table-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:52px;padding:10px 12px;margin:0;border-bottom:1px solid var(--line2);font-size:12px;background:#fafafa}.table-toolbar .line-input{flex:0 1 280px;max-width:100%}.spacer{flex:1 1 20px}.pager{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-height:48px;padding:9px 12px;margin:0;border-top:1px solid var(--line2);font-size:12px;background:#fafafa}.pager .line-select{width:auto;min-width:62px}.page-size{display:inline-flex;gap:5px}.page-size span{padding:6px 8px}.page-size .active{background:var(--turq);color:#fff}.summary-row td{font-weight:700;background:#e5e5e5!important;border-top:3px solid var(--pink)}

/* dropdown + misc */
.dropdown{position:relative;display:inline-block}.dropdown-menu{position:absolute;right:0;top:34px;background:#fff;border:1px solid #ccc;min-width:170px;box-shadow:0 3px 10px rgba(0,0,0,.15);z-index:12}.dropdown-menu div{padding:8px 12px;cursor:pointer}.dropdown-menu div:hover{background:var(--pink);color:#fff}
.hidden{display:none!important}.empty{text-align:center;color:#777;padding:12px}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.metric{border:1px solid #ddd;padding:18px}.metric .n{font-size:28px;font-weight:600}.metric .t{color:#777;margin-top:5px}.bar{height:7px;background:#eee;margin-top:15px}.bar i{display:block;height:100%;background:var(--pink)}

/* channel analytics */
.channel-loading{margin:12px 0 0;padding:9px 12px;border:1px solid #bfe7e5;background:#effafa;color:#317b78;font-size:12px}
.channel-period-title{font-size:22px;font-weight:600;margin:22px 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
/* The KPI row is driven by a caller-supplied metric list, so the column count
   must follow the number of cards rather than assume four. auto-fit keeps each
   card readable and wraps the remainder onto a second row instead of squeezing
   every metric into one line. */
/* Separators come from a one-pixel grid gap showing the container colour, not
   from per-card borders. The card count is set by the caller and the wrap point
   depends on the viewport, so nth-child arithmetic cannot know which card ends a
   row; a gap draws a line only between cards and never leaves a stray edge. */
.channel-kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;border:1px solid var(--line);border-radius:5px;background:var(--line2);overflow:hidden}
.channel-kpi{min-width:0;padding:22px 18px;background:#fff}
.channel-kpi-label{font-size:13px;font-weight:700;color:#505050}.channel-kpi-value{margin:17px 0 20px;color:var(--pink);font-size:25px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-kpi-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:13px}.channel-kpi-compare span{min-width:0;overflow:hidden;text-overflow:ellipsis}.channel-kpi-compare b{display:block;margin-bottom:6px;font-size:11px}

/* Dashboard overview cards.
   Each card carries one number, the same number for yesterday, and the change
   between them. The cards sit in a bordered panel and are separated by a single
   rule rather than by gaps, so a row reads as one comparable set instead of
   three unrelated tiles. */
.kpi-panel{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 4px 6px;margin-bottom:16px}
.kpi-panel-title{font-size:17px;font-weight:600;padding:0 20px 16px;border-bottom:1px solid var(--line);margin-bottom:4px}
.kpi-row{display:grid;grid-template-columns:repeat(3,1fr)}
.kpi-cell{min-width:0;padding:18px 24px;border-left:1px solid var(--line)}
.kpi-cell:first-child{border-left:0}
.kpi-label{font-size:13px;font-weight:700;color:#505050}
/* The value is the reason the card exists, so it is the only element allowed to
   dominate. It never wraps: a wrapped currency figure reads as two numbers. */
.kpi-value{margin:14px 0 16px;color:var(--pink);font-size:26px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-compare{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;font-size:13px}
.kpi-compare-label{font-weight:700;text-align:center}
.kpi-compare-value{color:var(--pink);font-weight:600;white-space:nowrap;text-align:right}
/* Direction is carried by both an arrow and a colour. Colour alone would leave
   the change unreadable to a colour-blind operator, and on a revenue figure the
   direction is the whole point of showing yesterday at all. */
.kpi-delta{font-weight:600;white-space:nowrap}
.kpi-delta.up{color:#1a9c5b}
.kpi-delta.down{color:#d83a3a}
.kpi-delta.flat{color:#767676}
.channel-range{width:min(310px,100%);margin:27px 0 12px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.channel-chart-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.channel-chart-card{min-width:0;height:310px;padding:18px 20px;border:1px solid var(--line);border-radius:5px;background:#fff}.channel-chart-title{font-size:14px;font-weight:700;margin-bottom:16px}.chart-empty{height:235px;display:flex;align-items:center;justify-content:center;color:#777;font-size:12px}
.revenue-chart{height:240px;display:flex;align-items:flex-end;gap:9px;padding:12px 4px 0;border-bottom:1px solid var(--line)}.revenue-column{height:100%;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:7px;text-align:center}.revenue-column span{height:16px;font-size:10px;color:#666}.revenue-bar{min-height:3px;background:var(--turq);border-radius:2px 2px 0 0;transition:height .2s}
.performance-chart{display:flex;flex-direction:column;gap:25px;padding-top:21px}.performance-row{display:grid;grid-template-columns:118px minmax(80px,1fr) 88px;gap:10px;align-items:center;font-size:11px}.performance-row>div{height:31px;background:#f0f0f0;overflow:hidden}.performance-row i{display:block;height:100%;min-width:2px;background:var(--turq)}.performance-row:nth-child(2) i{background:var(--pink)}.performance-row:nth-child(3) i{background:#646464}.performance-row b{text-align:right;font-size:11px;white-space:nowrap}

@media(max-width:1100px){.filter-grid{grid-template-columns:125px minmax(160px,1fr)}.form-grid.two{grid-template-columns:145px minmax(180px,1fr)}.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.topnav{gap:14px}.channel-chart-grid,.dashboard-top-grid{grid-template-columns:1fr}}
@media(max-width:900px){.sidebar{width:175px}.archive{width:175px}.content{margin-left:175px;width:calc(100% - 175px);padding-left:14px;padding-right:14px}.header{padding-left:16px;padding-right:16px}.logo{width:145px;font-size:21px}.topnav{gap:10px;overflow-x:auto}.userbox{padding-left:10px;gap:8px}.account{min-width:0;max-width:150px;overflow:hidden}.account b,.account span{overflow:hidden;text-overflow:ellipsis}.table-wrap>table{min-width:680px}}
@media(max-width:700px){.header{height:auto;min-height:64px;align-items:center;flex-wrap:wrap;padding:8px 12px}.logo{width:auto;margin-right:16px}.topnav{order:3;width:100%;height:38px;border-left:0;border-top:1px solid var(--line);padding:6px 0 0}.navitem{height:30px}.userbox{margin-left:auto;border-left:0;height:auto}.account{display:none}.layout{display:block;min-height:calc(100vh - 102px)}.sidebar{position:relative;top:auto;bottom:auto;width:100%;max-height:250px;padding-bottom:12px}.archive{position:static;width:100%;margin-top:8px}.content,.content.no-side{margin-left:0;width:100%;padding:12px 10px 36px}.form-grid,.form-grid.two,.filter-grid,.source-ingress-grid{grid-template-columns:1fr;row-gap:7px}.form-grid .lbl,.filter-grid .lbl{margin-top:8px}.tag-layout{grid-template-columns:1fr}.metric-grid,.channel-kpi-grid,.kpi-row{grid-template-columns:1fr}.kpi-cell{border-left:0;border-top:1px solid var(--line)}.kpi-cell:first-child{border-top:0}.channel-chart-card{height:280px;padding:14px 12px}.performance-row{grid-template-columns:105px minmax(70px,1fr) 75px}.breadcrumb-tabs,.subtabs{overflow-x:auto;gap:20px}.table-toolbar{align-items:stretch}.table-toolbar .spacer{display:none}.table-toolbar .line-input{flex-basis:100%;width:100%!important}.pager .spacer{display:none}.table-wrap>table{min-width:620px}.sectionbar{font-size:14px}}
@media(max-width:900px){.topnav{overflow:visible}.navmenu{top:46px}}
@media(max-width:700px){.navmenu{top:34px}}
.geo-attribution{margin-top:28px;padding:12px 0;color:#718096;font-size:11px;text-align:right}.geo-attribution a{color:#526f8f}
.field-error{margin:4px 0 2px;color:var(--pink);font-size:11px;line-height:1.45}
.field-error.summary{margin:0 0 14px;padding:9px 11px;border:1px solid var(--pink);border-radius:2px;background:#fff5f8}
.invalid-field{border-color:var(--pink)!important}
.trace-value.mono{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;font-size:11px;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager .btn[disabled],.table-toolbar .btn[disabled]{opacity:.45;cursor:not-allowed}