:root{
  --bg:#f3f4f6;--surface:#fff;--surface-2:#f9fafb;--surface-3:#f3f4f6;--border:#e5e7eb;--border-strong:#d1d5db;
  --text:#111827;--text-secondary:#4b5563;--text-muted:#9ca3af;--rail:#101828;--rail-icon:#9aa4b8;--selected:#eef2f9;
  --primary:#2b6cf0;--primary-hover:#1d5fe0;--primary-soft:#eaf1fe;--primary-soft-border:#cfdffc;--primary-disabled:#a9c2f8;
  --success:#16a34a;--success-soft:#e8f7ee;--warn:#c2410c;--warn-soft:#ffedd5;--banner:#fdf1e3;--danger:#dc2626;--danger-soft:#fee2e2;
  --internal:#6d28d9;--internal-soft:#f5f3ff;--internal-border:#ddd6fe;--outgoing:#dcfce7;--outgoing-text:#15803d;
  --r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:20px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);--shadow-md:0 4px 12px rgba(16,24,40,.10);--shadow-lg:0 12px 32px rgba(16,24,40,.18);
  --ease-in:cubic-bezier(.21,1.02,.55,1);
}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:500 14px/1.45 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;overflow:hidden}
@media (pointer:coarse){body{font-size:15px}input,textarea,select{font-size:16px!important}}
.mono{font-family:inherit;font-size:12.5px;font-variant-numeric:tabular-nums}
.num{font-variant-numeric:tabular-nums;font-weight:700}
.ic{flex:none;vertical-align:middle}
a{color:var(--primary);font-weight:600;text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0}
.t-page{font-size:24px;font-weight:700;letter-spacing:-.5px}
.t-pane{font-size:16px;font-weight:700;letter-spacing:-.2px}
.t-name{font-size:14.5px;font-weight:700;letter-spacing:-.1px}
.sec{color:var(--text-secondary);font-size:12.5px}
.muted{color:var(--text-muted);font-size:12px}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--text-muted)}
.trunc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.spacer{flex:1}
.row{display:flex;align-items:center;gap:8px;min-width:0}
.col{display:flex;flex-direction:column;gap:6px;min-width:0}
.wrap{flex-wrap:wrap}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:60px 1fr;height:100vh}
.main{min-width:0;height:100vh;display:flex;flex-direction:column}
.detail{min-width:0;display:flex;flex-direction:column;min-height:0;overflow:auto;flex:1}
.hdr{height:64px;display:flex;align-items:center;gap:10px;padding:0 24px;flex:none;min-width:0;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2}
.hdr h1{min-width:0;flex:0 1 auto}
.hdr .pill{flex:none}
.content{padding:16px 24px 40px;max-width:1400px;width:100%}
.toolbar{display:flex;align-items:center;gap:12px;padding:12px 24px;background:var(--surface);border-bottom:1px solid var(--border)}
.toolbar .search{margin:0;width:320px}
.toolbar .tabs{margin:0;border:0;padding:0}
.toolbar .tabs button{height:36px}
.count{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--surface-3);color:var(--text-secondary);font-size:12px;font-weight:600}

/* ---------- search & tabs ---------- */
.search{position:relative}
.search input{width:100%;height:36px;padding:0 12px 0 36px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
.search .ic{position:absolute;left:11px;top:9px;color:var(--text-muted)}
.tabs{display:flex;gap:18px;padding:0 16px;border-bottom:1px solid var(--border);margin-top:8px;overflow-x:auto;align-items:center}
.tabs button{height:38px;border:0;background:none;padding:0 2px;font-size:13px;font-weight:600;color:var(--text-secondary);border-bottom:2px solid transparent;border-radius:0;white-space:nowrap}
.tabs button.on{color:var(--primary);border-bottom-color:var(--primary)}
.tabs button.quiet{margin-left:auto;color:var(--text-muted);display:inline-flex;align-items:center;gap:4px}
.tabs button.quiet.on{color:var(--primary)}
.tabs button:hover{color:var(--text)}

/* ---------- list rows ---------- */
.rows{overflow:auto}
.prow{display:grid;grid-template-columns:96px minmax(180px,1.4fr) 110px minmax(120px,1.2fr) 60px 130px 96px 34px;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);cursor:pointer;min-width:0}
.prow:hover{background:var(--surface-2)}
.prow:last-child{border-bottom:0}
.prow .rowact{opacity:0;transition:opacity .15s ease}.prow:hover .rowact,.prow .rowact:focus-visible{opacity:1}
@media (hover:none){.prow .rowact{opacity:1}}
.prow .name{font-size:14.5px;font-weight:700}
.prow .narrow-only{display:none}
.prow .sub{color:var(--text-secondary);font-size:12.5px}
.phead{display:grid;grid-template-columns:96px minmax(180px,1.4fr) 110px minmax(120px,1.2fr) 60px 130px 96px 34px;gap:12px;padding:8px 16px;border-bottom:1px solid var(--border)}
.phead span{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.lrow{display:grid;grid-template-columns:48px 1fr auto;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;min-width:0}
.lrow:hover{background:var(--surface-2)}
.lrow.on{background:var(--selected)}
.av{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:15px;flex:none}
.av.sq{border-radius:28%}
.av.sm{width:28px;height:28px;font-size:11px}
.lrow .name{font-size:15px;font-weight:700}
.lrow .prev{color:var(--text-secondary);font-size:13px}
.lrow .when{color:var(--text-muted);font-size:12px;white-space:nowrap;align-self:start;padding-top:3px}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:14px 16px}
.card+.card{margin-top:10px}
.card .head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.card .head .eyebrow{flex:1}
.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px}
.kv+.kv{border-top:1px solid var(--border)}
.kv b{font-weight:700;text-align:right}
.stack>*+*{margin-top:10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.grid2>.card+.card,.grid3>.card+.card{margin-top:0}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}

/* ---------- pills & chips ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:600;background:var(--surface-3);color:var(--text-secondary);white-space:nowrap}
.pill.ok{background:var(--success-soft);color:var(--success)}.pill.warn{background:var(--warn-soft);color:var(--warn)}.pill.bad{background:var(--danger-soft);color:var(--danger)}.pill.pri{background:var(--primary-soft);color:var(--primary)}.pill.int{background:var(--internal-soft);color:var(--internal)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill .dot.live{animation:pulse 1.6s ease-in-out infinite}
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 0}
.chip{height:32px;padding:0 14px;border:1px solid var(--border);border-radius:999px;background:var(--surface);font-size:13px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--border-strong)}
.chip.on{background:var(--primary-soft);border-color:var(--primary-soft-border);color:var(--primary)}

/* ---------- controls ---------- */
button{font:inherit;font-weight:500;height:32px;padding:6px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;transition:.15s ease;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
button:hover{border-color:var(--border-strong)}button:active{transform:scale(.96)}
button.primary{background:var(--primary);border-color:var(--primary);color:#fff}button.primary:hover{background:var(--primary-hover);transform:translateY(-1px)}
button.dark{background:var(--rail);border-color:var(--rail);color:#fff;border-radius:999px;padding:0 16px}
button.danger{background:var(--danger-soft);border-color:var(--danger-soft);color:var(--danger)}
button.ghost{border-color:transparent;background:transparent}button.ghost:hover{border-color:var(--border-strong);background:var(--surface)}
button.icon{width:34px;height:34px;padding:0;justify-content:center;border-radius:10px}
button.sm{height:26px;padding:0 10px;font-size:12px}
button:disabled{background:var(--surface-3);color:var(--text-muted);border-color:var(--border);cursor:default;transform:none}
button.primary:disabled{background:var(--primary-disabled);border-color:var(--primary-disabled);color:#fff}
input,select,textarea{font:inherit;font-size:13.5px;color:var(--text);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 12px;outline:0;height:32px}
textarea{height:auto;padding:8px 12px;resize:vertical}
/* One select for the whole app: no native drawing, the same padding as inputs, one chevron (text-secondary). */
select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0 34px 0 12px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;line-height:normal}
select:hover:not(:disabled){border-color:var(--border-strong)}
select:disabled{cursor:default;background-image:none;padding-right:12px;color:var(--text-secondary);background-color:var(--surface-2)}
select[multiple],select[size]:not([size="1"]){background-image:none;padding:6px;height:auto}
select::-ms-expand{display:none}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft-border)}
input::placeholder,textarea::placeholder{color:var(--text-muted)}
label.l{display:block;font-size:11.5px;font-weight:600;margin:0 0 4px;color:var(--text-secondary)}
.field{margin-bottom:10px}
.seg{display:inline-flex;background:var(--surface-3);border-radius:var(--r-sm);padding:2px}
.seg button{height:26px;border:0;background:transparent;border-radius:6px;font-size:12.5px;padding:0 10px}
.seg button.on{background:var(--surface);box-shadow:var(--shadow-sm)}
.swatch{width:22px;height:22px;border-radius:6px;border:1px solid var(--border);display:inline-block;vertical-align:middle}
input[type=color]{width:34px;height:32px;padding:2px}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted);padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:360px}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
.card.flush{padding:0;overflow:hidden}

/* ---------- banners, toasts, drawer ---------- */
.banner{background:var(--banner);color:var(--warn);font-weight:600;font-size:13px;text-align:center;padding:9px 16px;border-bottom:1px solid #fed7aa}
.notice{display:flex;align-items:center;gap:10px;background:var(--primary-soft);border:1px solid var(--primary-soft-border);border-radius:var(--r-md);padding:8px 12px;font-size:13px}
.notice.warn{background:var(--warn-soft);border-color:#fed7aa}
.toast{position:fixed;left:16px;bottom:16px;background:var(--rail);color:#fff;font-size:13px;padding:9px 12px;border-radius:var(--r-sm);box-shadow:var(--shadow-lg);opacity:0;transform:translateY(6px);transition:.18s ease;pointer-events:none;border-left:3px solid transparent;z-index:50;max-width:480px}
.toast.show{opacity:1;transform:none}.toast.bad{border-left-color:var(--danger)}.toast.warn{border-left-color:var(--warn)}
.drawer-bg{position:fixed;inset:0;background:rgba(16,24,40,.25);z-index:20;opacity:0;pointer-events:none;transition:.18s ease}
.drawer-bg.show{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;bottom:0;left:60px;width:520px;max-width:calc(100vw - 60px);background:var(--surface);box-shadow:var(--shadow-lg);z-index:21;transform:translateX(-12px);opacity:0;pointer-events:none;transition:.22s var(--ease-in);display:flex;flex-direction:column}
.drawer.show{transform:none;opacity:1;pointer-events:auto}
.drawer .hdr{border-bottom:1px solid var(--border)}
.tile{width:36px;height:36px;border-radius:10px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}
.nrow{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border)}
.nrow>.col{min-width:0;overflow-wrap:anywhere}
.nrow .eb{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.nrow .eb.mention{color:var(--internal)}.nrow .eb.attention{color:var(--danger)}.nrow .eb.info{color:var(--primary)}
.nrow .bdg{position:relative;align-self:start;width:48px;height:48px}
.nrow .bdg i{position:absolute;right:-4px;bottom:-4px;width:20px;height:20px;border-radius:50%;background:var(--surface);display:grid;place-items:center;box-shadow:var(--shadow-sm)}
.empty{text-align:center;padding:48px 16px;color:var(--text-secondary)}
.empty .tile{width:48px;height:48px;border-radius:12px;margin:0 auto 12px}
.empty h3{font-size:15px;font-weight:600;margin:0 0 4px;color:var(--text)}.empty p{font-size:13px;margin:0;color:var(--text-muted)}
.shim{height:12px;border-radius:6px;background:linear-gradient(90deg,var(--surface-3),var(--surface-2),var(--surface-3));background-size:200% 100%;animation:sh 1.2s linear infinite}

/* ---------- build view: chat + preview ---------- */
.build{display:grid;grid-template-columns:minmax(400px,520px) 1fr;min-height:0;height:calc(100vh - 68px - 39px)}
.build>*{min-height:0}
.preview.full{position:fixed;inset:0;z-index:30;background:var(--bg)}
.preview .bar select{max-width:280px}
.chat{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--border);background:var(--surface);position:relative}
.chat.drop:after{content:"Drop images to attach";position:absolute;inset:8px;border:2px dashed var(--primary);border-radius:var(--r-lg);background:rgba(43,108,240,.06);display:grid;place-items:center;color:var(--primary);font-weight:600;pointer-events:none;z-index:3}
.log{flex:1;overflow:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
.day{display:flex;align-items:center;gap:12px;color:var(--text-muted);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin:6px 0}
.day:before,.day:after{content:"";flex:1;height:1px;background:var(--border)}
.bub{max-width:88%;padding:10px 12px;border-radius:var(--r-lg);font-size:13.5px;white-space:pre-wrap;word-wrap:break-word;animation:in .22s var(--ease-in);position:relative}
.bub.in{background:var(--surface);border:1px solid var(--border);align-self:flex-start}
.bub.out{background:var(--outgoing);align-self:flex-end}
.bub .you{color:var(--outgoing-text);font-weight:700;font-size:12px;margin-bottom:2px}
.bub .ts{color:var(--text-muted);font-size:11px;margin-left:8px;white-space:nowrap}
.bub .imgs{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.bub .imgs img{height:96px;border-radius:8px;border:1px solid var(--border);background:#fff}
.qcard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-sm);padding:12px 14px;animation:in .22s var(--ease-in)}
.q{padding:8px 0;border-top:1px solid var(--border)}.q:first-of-type{border-top:0}
.q .qt{font-size:13px;font-weight:600;margin-bottom:6px}
.opt{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 8px;border-radius:var(--r-sm);cursor:pointer;font-size:13px}
.opt:hover{background:var(--surface-2)}.opt input{margin:0;accent-color:var(--primary)}
.opt .rec{font-size:10.5px;font-weight:700;color:var(--primary);background:var(--primary-soft);border:1px solid var(--primary-soft-border);border-radius:999px;padding:1px 6px}
.other{display:flex;gap:6px;align-items:center;padding-left:8px}.other input[type=text]{flex:1}
.req{font-size:13px}.req h2,.req h3,.req h4{font-size:14px;margin:10px 0 4px}.req ul{padding-left:18px;margin:4px 0}.req p{margin:4px 0}.req code{font-family:inherit;font-size:12px;background:var(--surface-3);padding:0 4px;border-radius:4px}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:10px}
.composer{margin:0 12px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md);padding:12px 14px 10px}
.composer.asking{border-color:var(--primary-soft-border);box-shadow:0 0 0 3px var(--primary-soft-border),var(--shadow-md)}
.stepper .chip{height:auto;min-height:32px;padding:6px 14px;white-space:normal;text-align:left;line-height:1.3}
.stepper .chips.wrap{flex-wrap:wrap;overflow:visible}
.composer textarea{width:100%;border:0;padding:4px 2px;font-size:15px;min-height:56px;resize:none;box-shadow:none}
.composer .bar{display:flex;align-items:center;gap:4px;margin-top:6px}
.composer .send{height:40px;border-radius:12px;padding:0 18px;font-weight:600}
.composer .files{font-size:12px;color:var(--text-secondary);display:flex;gap:8px;flex-wrap:wrap}
.composer .files:empty{display:none}
.composer .att{position:relative;margin:0;width:112px;display:flex;flex-direction:column;gap:4px}
.composer .att img{width:112px;height:80px;object-fit:cover;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface-3);display:block}
.composer .att figcaption{font-size:11px;line-height:1.2;color:var(--text-secondary)}
.composer .att .rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;display:grid;place-items:center;text-decoration:none}
.composer .att .rm:hover{background:rgba(0,0,0,.85)}
.preview{display:flex;flex-direction:column;min-height:0;background:var(--bg)}
.preview .bar{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--border)}
.stage{flex:1;overflow:auto;padding:20px 24px;display:flex;justify-content:center;align-items:flex-start;min-height:0}
/* A held-back attempt: shown so it can be pointed at, flagged so it is never mistaken for a publishable build. */
.draftnote{display:grid;gap:6px;padding:10px 16px;background:var(--danger-soft);border-bottom:1px solid var(--border);font-size:13px;line-height:1.45;color:var(--text)}.draftnote .pts{margin:0;padding-left:18px}.draftnote .muted{font-size:12.5px}
.fit{position:relative;flex:none}
.layouts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,2.4fr);gap:16px;padding:20px 24px;overflow:auto;flex:1;align-items:start}
.layout{min-width:0}
.layout .frame{background:transparent;box-shadow:var(--shadow-sm)}
.sb-canvas .frame{transition:none}
@media (max-width:1300px){.layouts{grid-template-columns:1fr}}
.frame{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden;position:absolute;top:0;left:0}
#zoom:empty{display:none}
.frame iframe{display:block;border:0;width:100%;height:100%;background:#fff}
.work{margin:0 12px 8px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;animation:in .22s var(--ease-in)}
.work .what{color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.work .what b{color:var(--text);font-weight:600}
.work.bad{background:var(--danger-soft);border-color:#fecaca}.work.bad .what{color:var(--danger)}
.work.ok{background:var(--success-soft);border-color:#bbf7d0}
.work .meta{color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.shots{display:flex;gap:8px;overflow-x:auto;padding:4px 0}
.shots figure{margin:0;text-align:center;font-size:11px;color:var(--text-muted)}
.shots img{height:150px;border:1px solid var(--border);border-radius:8px;background:#fff}
.linkrow{display:grid;grid-template-columns:150px 120px 1fr 34px;gap:6px;align-items:center;margin-bottom:6px}
.bars{display:flex;align-items:flex-end;gap:3px;height:80px}
.bars i{flex:1;background:var(--primary-soft);border-radius:3px 3px 0 0;position:relative;min-height:2px}
.bars i b{position:absolute;left:0;right:0;bottom:0;background:var(--primary);border-radius:3px 3px 0 0}
.login{max-width:380px;margin:12vh auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow-md)}
.login input{width:100%;height:38px;margin-bottom:10px}
.login button{width:100%;justify-content:center;height:38px}

@keyframes in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes sh{to{background-position:-200% 0}}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:1200px){.build{grid-template-columns:minmax(0,1fr)}.build .preview{display:none}.build .chat{border-right:0}.preview-link{display:flex!important}}
.preview-link{display:none;align-items:center;gap:8px;padding:8px 16px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:12.5px}
@media (max-width:980px){
  .app{grid-template-columns:1fr}.rail{flex-direction:row;height:56px;padding:0 10px;gap:0;justify-content:space-around;position:fixed;bottom:0;left:0;right:0;z-index:10}
  .rail-logo,.rail-spacer{display:none!important}.rail-btn:hover{transform:none}
  .main{height:calc(100vh - 56px)}
  .hdr{padding:0 16px}.toolbar{padding:10px 16px;flex-wrap:wrap}.toolbar .search{width:100%}
  .content{padding:12px 16px 80px}.grid2,.grid3{grid-template-columns:minmax(0,1fr)!important}
  .phead{display:none}
  /* Narrow: two lines per page. Name with the status on the right, then one meta line. */
  .prow{grid-template-columns:84px minmax(0,1fr) auto auto;gap:4px 12px;padding:12px 16px;align-items:center}
  .prow .wide-only{display:none}.prow .narrow-only{display:block}
  button,input,select{min-height:36px}.drawer{left:0;width:100vw;max-width:100vw}
  .linkrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 34px}.linkrow>:nth-child(3){grid-column:1/3;grid-row:2}.card .row{flex-wrap:wrap}
}

/* ---------- brand design references ---------- */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:10px}
.ref{margin:0;position:relative;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.ref img{display:block;width:100%;height:110px;object-fit:cover;object-position:top}
.ref figcaption{font-size:11px;color:var(--text-secondary);padding:4px 8px}
.ref button{position:absolute;top:4px;right:4px;background:var(--surface)}

/* ---------- storybook ---------- */
.sb{display:grid;grid-template-columns:260px 1fr;height:calc(100vh - 0px);min-height:0}
.sb-side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
.sb-tree{overflow:auto;padding:0 8px 16px}
.sb-comp-row{display:flex;align-items:center;gap:6px;height:32px;padding:0 8px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-secondary)}
.sb-comp-row:hover{background:var(--surface-2)}.sb-comp-row.on{color:var(--text)}
.sb-comp-row .chev{transition:.15s ease;color:var(--text-muted)}.sb-comp.open .chev{transform:rotate(90deg)}
.sb-story{display:flex;align-items:center;gap:6px;height:30px;padding:0 8px 0 34px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text-secondary)}
.sb-story:hover{background:var(--surface-2)}.sb-story.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.sb-main{display:grid;grid-template-rows:48px 1fr 300px;min-height:0;min-width:0}
.sb-main.panel-closed{grid-template-rows:48px 1fr 40px}
.sb-panel.closed .sb-panel-body{display:none}
.sb-panel.closed .tabs{border-bottom:0}
.sb-bar{display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--border);min-width:0}
.sb-canvas{overflow:auto;padding:24px;background:var(--bg);display:flex;justify-content:center;align-items:flex-start;background-image:radial-gradient(var(--border) 1px,transparent 1px);background-size:16px 16px}
.sb-canvas[data-bg="dark"]{background-color:#1a2030}
.sb-panel{border-top:1px solid var(--border);background:var(--surface);display:flex;flex-direction:column;min-height:0}
.sb-panel-body{overflow:auto;padding:12px 16px;flex:1;min-height:0}
.sb-ctl{display:grid;grid-template-columns:200px 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--border);align-items:start}
.sb-ctl:last-child{border-bottom:0}
.sb-ctl-k{display:flex;flex-direction:column;gap:2px;padding-top:6px}
.sb-ctl-v input,.sb-ctl-v textarea{font-size:13px}
.sb-pick-v{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:8px}
.sb-pick-f{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:11.5px;font-weight:600;color:var(--text-secondary)}
.sb-pick-f select{width:100%;min-width:0;font-size:13px;text-overflow:ellipsis}
.sb-pick-note{margin-top:6px;font-size:12px}
.sb-pick .sb-ctl-k{padding-top:0}
@media (max-width:640px){.sb-pick{grid-template-columns:1fr;gap:10px}.sb-pick-v{grid-template-columns:1fr}}
@media (max-width:980px){.sb{grid-template-columns:1fr}.sb-side{display:none}.sb-main{grid-template-rows:48px 1fr 260px}}
.qcard.outcome{max-width:88%}.qcard.outcome .ts{position:static;margin:0}
.pts{margin:0;padding:0;list-style:none;display:grid;gap:5px}.pts li{position:relative;padding-left:16px;font-size:13.5px;line-height:1.4}.pts li:before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.qcard.answers{max-width:88%;margin-left:auto;background:var(--primary-soft);border-color:var(--primary-soft-border)}.qcard.answers .ts{position:static;margin:0}
.qa{padding:7px 0;border-top:1px solid var(--primary-soft-border)}.qa:first-of-type{border-top:0}.qa .q{font-size:12px;color:var(--text-secondary);line-height:1.35}.qa .a{font-size:13.5px;font-weight:600;margin-top:2px;line-height:1.35}

.pill.wrapok{height:auto;min-height:20px;padding:3px 8px;white-space:normal;max-width:100%;line-height:1.35}

/* Element picker and the preview link menu */
.pickbtn{display:inline-flex;align-items:center;gap:6px}.pickbtn.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.menuwrap{position:relative}.menuwrap>button{display:inline-flex;align-items:center;gap:6px}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md,10px);box-shadow:var(--shadow-md,0 8px 24px rgba(0,0,0,.12));display:flex;flex-direction:column;gap:2px}
.menu[hidden]{display:none}.menu>button,.menu>.btnlike{display:flex;align-items:center;gap:8px;width:100%;justify-content:flex-start;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--text);text-decoration:none;border:0;background:none;cursor:pointer}.menu>button:hover,.menu>.btnlike:hover{background:var(--surface-2,rgba(0,0,0,.05))}
.composer .picks{display:flex;flex-wrap:wrap;gap:6px}.composer .picks:empty{display:none}.composer .picks{margin-bottom:8px}
.pickchip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:5px 8px 5px 9px;border-radius:8px;background:rgba(43,108,240,.08);border:1px solid rgba(43,108,240,.25);color:var(--primary);font-size:12.5px;font-weight:600}.pickchip .trunc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pickchip a{display:inline-grid;place-items:center;color:inherit;opacity:.7}.pickchip a:hover{opacity:1}
.pickchip.sent{display:flex;margin-top:8px;background:rgba(255,255,255,.55)}

/* ---------- look only, after the reference: same layout and behaviour ---------- */
/* White canvas; the preview stage and storybook canvas keep their grey so pages stand out */
body{background:var(--surface)}
.detail{background:var(--surface)}
.preview{background:var(--bg)}
.toolbar{background:var(--surface)}
/* Bigger, bolder titles with the grey count pill beside them */
.hdr{height:68px;padding:0 28px}
.hdr .t-pane{font-size:21px;font-weight:700;letter-spacing:-.3px}
.count{height:24px;padding:0 9px;font-size:12.5px;background:var(--surface-3)}
.toolbar{padding:14px 28px}
.content{padding:20px 28px 48px}
/* Softer, rounder search */
.search input{height:40px;border-radius:12px;background:var(--surface-2);padding-left:40px;font-size:14px}
.search .ic{left:14px;top:12px}
/* Lighter, sentence-case table headers */
th,.phead span{font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-muted)}
/* Soft blue rounded tiles in empty states */
.empty .tile{width:64px;height:64px;border-radius:18px;background:linear-gradient(180deg,#eef2ff,#e0e7ff);border:1px solid #c7d2fe;color:var(--primary);box-shadow:0 6px 16px -8px rgba(43,108,240,.35);margin-bottom:16px}
.empty h3{font-size:16px}.empty p{font-size:14px;line-height:1.5}
@media (max-width:980px){.hdr{height:60px;padding:0 16px}.toolbar{padding:10px 16px}.content{padding:12px 16px 80px}.build{height:calc(100vh - 56px - 60px - 39px)}}

/* Overview: details on the left, the live version on the right in the builder's device preview. */
.ov{display:grid;grid-template-columns:minmax(380px,460px) minmax(0,1fr);height:calc(100vh - 68px - 39px);min-height:0}
.ov>*{min-height:0}
.ov-side{overflow-y:auto;background:var(--surface);border-right:1px solid var(--border);padding-bottom:24px}
.ov-sec{padding:18px 20px;border-bottom:1px solid var(--border)}
.ov-sec:last-child{border-bottom:0}
.ov-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}.ov-h .eyebrow{flex:1}.ov-h a{font-size:12.5px;font-weight:500}
.ov-url{display:flex;align-items:center;gap:2px;margin-top:12px;padding:4px 4px 4px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md)}
.ov-url>a:first-child{flex:1;min-width:0;font-size:13px;font-weight:600;color:var(--primary);text-decoration:none}
.ov-url .icon-link{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--text-secondary)}.ov-url .icon-link:hover{background:var(--surface)}
.ov-meta{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:14px 0 0;font-size:13.5px}
.ov-meta dt{color:var(--text-muted)}.ov-meta dd{margin:0;display:flex;align-items:baseline;gap:8px;min-width:0;justify-content:flex-end;text-align:right}
.ov-meta .mono{font-size:11px}.ov-meta a{font-size:12.5px;font-weight:500}
#expiryEditor{justify-content:flex-end;flex-wrap:wrap}
.ov-add button{height:32px}
.ov-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-md)}
.ov-stats>div{display:flex;flex-direction:column;gap:2px;padding:10px 14px}.ov-stats>div+div{border-left:1px solid var(--border)}
.ov-stats b{font-size:22px;font-variant-numeric:tabular-nums;line-height:1.2}
.ov-links{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.ov-link{display:flex;align-items:center;gap:10px;padding:8px 6px 8px 12px}.ov-link+.ov-link{border-top:1px solid var(--border)}
.ov-link .who{flex:1;min-width:0}.ov-link .who b{font-size:13.5px;font-weight:600}
.ov-link .code{padding:2px 8px;border-radius:6px;background:var(--surface-3);color:var(--text-secondary)}
.ov-add{display:grid;grid-template-columns:minmax(0,1.1fr) 72px minmax(0,1.3fr) auto;gap:6px;margin-top:10px}.ov-add>*{min-width:0}
.ov-shots{display:flex;gap:10px;align-items:flex-end;overflow-x:auto;padding-bottom:4px}
.ov-shots a{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;text-decoration:none;color:var(--text-muted);font-size:11px}
.ov-shots img{width:62px;height:132px;border:1px solid var(--border);border-radius:8px;background:#fff;object-fit:cover;object-position:top;transition:.15s ease}
.ov-shots a.wide img{width:210px}
.ov-shots a:hover img{border-color:var(--primary);box-shadow:var(--shadow-sm)}
.ov .preview .bar .btnlike{display:inline-flex;align-items:center;gap:6px;height:32px;padding:6px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:13px;font-weight:500;text-decoration:none;white-space:nowrap}
.ov .preview .bar .btnlike:hover{background:var(--surface-2)}
button.danger{color:var(--danger)}
@media (max-width:1100px){.ov{grid-template-columns:minmax(0,1fr);height:auto;flex:none}.ov-side{overflow:visible;border-right:0}.ov .preview{height:auto;border-top:1px solid var(--border)}.ov .stage{flex:none}.ov .preview .bar>.muted,.ov .preview .bar>.spacer{display:none}.ov .preview .bar select{min-width:0;flex:1}}
[hidden]{display:none!important}

/* In-app dialog (replaces confirm/prompt). */
.dlg-wrap{position:fixed;inset:0;z-index:60;background:rgba(16,24,40,.38);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .15s ease}
.dlg-wrap.on{opacity:1}
.dlg{width:100%;max-width:440px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);padding:22px 22px 18px;transform:translateY(6px) scale(.98);transition:transform .18s var(--ease-in)}
.dlg-wrap.on .dlg{transform:none}
.dlg h2{margin:0 0 6px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.dlg p{margin:0 0 14px;color:var(--text-secondary);font-size:13.5px}
.dlg-field{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}.dlg-field>span{font-size:12.5px;font-weight:600;color:var(--text-secondary)}
.dlg-field input,.dlg-field select{height:38px;width:100%}.dlg-field em{font-style:normal;font-size:12px;color:var(--text-muted)}
.dlg-bar{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.dlg-bar button{height:36px;padding:0 16px}
button.dangerbtn{background:var(--danger);border-color:var(--danger);color:#fff}button.dangerbtn:hover{background:#b91c1c}

/* Analytics: filter row, KPI strip, chart, tables. */
.an{max-width:none}
.rangebar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rangebar .seg button{height:30px;padding:0 12px}
.daterange{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted)}
.daterange.on{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.daterange input{border:0;height:30px;padding:0 2px;background:transparent;font-size:13px;color:var(--text)}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.kpis>div{display:flex;flex-direction:column;gap:2px;padding:14px 18px;min-width:0}.kpis>div+div{border-left:1px solid var(--border)}
.kpis b{font-size:26px;line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.chart{position:relative}
.chart-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}.chart-head .eyebrow{flex:1}
.legend{display:flex;gap:14px;font-size:12.5px;color:var(--text-secondary)}.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:10px;height:10px;border-radius:3px}.sw.v{background:#7aa2f7}.sw.c{background:#1d4fd8}
.plot{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;height:180px}
.yaxis{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums;margin:-6px 0}
.bars2{position:relative;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:2px;align-items:end;border-bottom:1px solid var(--border-strong)}
.bars2 .grid{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}.bars2 .grid i{border-top:1px dashed var(--border)}.bars2 .grid i:last-child{border:0}
.bars2 .col{position:relative;height:100%;display:flex;align-items:flex-end;justify-content:center;cursor:default;border-radius:4px 4px 0 0}
.bars2 .col:hover,.bars2 .col.on{background:var(--surface-3)}
.bars2 .col i{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:min(70%,28px);border-radius:4px 4px 0 0}
.bars2 .col i.v{background:#7aa2f7;min-height:0}.bars2 .col i.c{background:#1d4fd8;box-shadow:0 -2px 0 var(--surface)}
.xaxis{display:flex;justify-content:space-between;margin:6px 0 0 34px;font-size:11.5px;color:var(--text-muted)}
.tip{position:absolute;top:30px;z-index:3;min-width:150px;background:var(--rail);color:#fff;border-radius:var(--r-sm);padding:8px 10px;font-size:12.5px;box-shadow:var(--shadow-lg);pointer-events:none;display:flex;flex-direction:column;gap:3px}
.tip div{display:flex;align-items:center;gap:6px}.tip .muted{color:#9aa4b8}
.thead-title{display:flex;align-items:center;gap:10px;padding:14px 16px 6px}
.thead-title .spacer{flex:1}
.tscroll{overflow-x:auto}
table.data td{padding:10px;border-bottom:1px solid var(--border)}table.data tr:last-child td{border-bottom:0}
table.data th{text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--text-muted);padding:8px 10px}
table.data td:first-child,table.data th:first-child{padding-left:16px}table.data td:last-child,table.data th:last-child{padding-right:16px}
.srcname{font-weight:600}.codechip{font-family:inherit;font-size:11.5px;padding:1px 6px;border-radius:5px;background:var(--surface-3);color:var(--text-secondary)}
.share{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}.share i{display:block;height:100%;background:#7aa2f7;border-radius:3px}
@media (max-width:900px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.kpis>div{border-left:0!important;border-top:1px solid var(--border)}.kpis>div:nth-child(-n+2){border-top:0}.kpis>div:nth-child(even){border-left:1px solid var(--border)!important}.kpis>div:last-child:nth-child(odd){grid-column:1/-1}.kpis b{font-size:22px}}

/* Versions: meta on the left, screenshots on the right. */
.vnote{display:flex;align-items:center;gap:6px;margin:0 0 10px}
.vlist{display:flex;flex-direction:column;gap:10px}
.vrow{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px 18px}
.vrow.live{border-color:#bbe5c9;box-shadow:0 0 0 3px var(--success-soft)}
.vrow.old .vshots{opacity:.8}
.vmeta{display:flex;flex-direction:column;gap:8px;min-width:0}.vmeta .mono{font-size:11px}.vmeta button{align-self:flex-start;margin-top:4px}
.vnum{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.verr{display:flex;gap:6px;color:var(--danger);font-size:12.5px}
.vshots{min-width:0}
@media (max-width:800px){.vrow{grid-template-columns:minmax(0,1fr)}}

/* Users. */
.users{max-width:1100px}
.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.role{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 14px}
.urow{display:grid;grid-template-columns:auto minmax(0,1fr) 150px 150px 110px;align-items:center;gap:14px;padding:12px 16px}
.urow+.urow{border-top:1px solid var(--border)}
.urow .av{width:36px;height:36px;font-size:13px}
.urow .who{display:flex;flex-direction:column;gap:1px;min-width:0}.urow .who b{font-weight:600}
.urow .when{white-space:nowrap;justify-self:start;font-variant-numeric:tabular-nums}.urow select{height:32px}.urow .rolepill{justify-self:start;height:24px;padding:0 10px}
.urow>button{justify-self:end}
.urow.off .av,.urow.off .who{opacity:.5}
@media (max-width:760px){.roles{grid-template-columns:minmax(0,1fr)}.urow{grid-template-columns:auto minmax(0,1fr) auto}.urow .when{display:none}.urow{row-gap:6px}.urow>button{grid-column:2/-1;justify-self:start;padding:0;height:auto;min-height:0;background:none}}

/* Sources table on Domains, and the shortener question on links. */
.tog{position:relative;display:inline-block;width:34px;height:20px}.tog input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.tog span{position:absolute;inset:0;border-radius:999px;background:var(--border-strong);transition:.15s}.tog span:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--shadow-sm);transition:.15s}
.tog input:checked+span{background:var(--primary)}.tog input:checked+span:after{transform:translateX(14px)}
.shortq{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--text-secondary);cursor:pointer}.shortq input{height:auto;margin:0;accent-color:var(--primary)}
.linkrow .shortq{grid-column:1/-1;flex-basis:100%}
.ov-add .shortq{grid-column:1/-1}
.chipbtn{height:24px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;color:var(--text-muted);border:1px dashed var(--border-strong);background:transparent;gap:4px}
.chipbtn.on{border-style:solid;border-color:var(--primary-soft-border);background:var(--primary-soft);color:var(--primary)}
.detail>.tabs{flex:none}

table.wide{min-width:760px}
@media (max-width:640px){.hdr .lbl{display:none}.hdr button{padding:6px 9px}.thead-title{flex-wrap:wrap}.thead-title>.muted{flex-basis:100%;order:3}}

/* Overview: the live page block. */
.ov-live-head{display:flex;align-items:center;gap:10px}
.ov-state{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--success)}
.ov-state i{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px var(--success-soft)}
.ov-ver{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}
.danger-ic{color:var(--danger)}.danger-ic:hover{background:var(--danger-soft)!important;border-color:transparent!important}
.ov-site{display:flex;align-items:center;gap:2px;margin-top:14px;padding:6px 6px 6px 8px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);transition:.15s}
.ov-site:hover{border-color:var(--primary-soft-border);box-shadow:0 0 0 3px var(--primary-soft)}
.ov-site>a:first-child{flex:1;min-width:0;display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.ov-site .globe{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--primary-soft);color:var(--primary)}
.ov-site .addr{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.ov-site .addr b{font-size:14px;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-site .addr span{font-size:12.5px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-site .icon-link{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--text-secondary)}.ov-site .icon-link:hover{background:var(--surface-2)}
.ov-facts{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;font-size:12.5px;color:var(--text-secondary)}
.fact{display:inline-flex;align-items:center;gap:5px}.fact svg{color:var(--text-muted)}
.fact.ok,.fact.ok svg{color:var(--success)}.fact.bad,.fact.bad svg{color:var(--danger)}
.fact a{font-weight:500}

/* Rail, after the support desk's: 60px, 40px tiles at a 10px radius, 20px icons at a 1.8 stroke, 6px apart. */
.rail{width:60px;background:var(--rail);display:flex;flex-direction:column;align-items:center;padding:14px 0;gap:6px;box-sizing:border-box}
.rail-logo{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;color:#a78bfa;transition:transform .2s ease}
.rail-logo{position:relative}.rail-logo svg{width:24px;height:24px}
.rail-logo:has(video){width:40px;height:40px;border-radius:12px;background:none}
.rail-logo video{position:absolute;left:-3px;top:-2px;width:46px;height:46px;object-fit:contain;pointer-events:none}.rail-logo:has(video){overflow:hidden}
.rail-logo:hover{transform:rotate(-6deg) scale(1.05)}
.rail-btn{width:40px;height:40px;border-radius:10px;border:none;background:transparent;color:#98a2b3;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;flex:none;transition:background .14s ease,color .14s ease,transform .12s ease}
.rail-btn svg{width:20px;height:20px}
.rail-btn:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateY(-1px)}
.rail-btn.active{background:rgba(255,255,255,.12);color:#fff}
.rail-btn:focus-visible,.rail-logo:focus-visible,.rail-avatar:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.rail-spacer{flex:1}
.rail-avatar{width:34px;height:34px;border-radius:28%;color:#fff;font-size:13px;font-weight:700;line-height:1;font-family:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;padding:0;flex:none;background-image:linear-gradient(135deg,rgba(255,255,255,.06),rgba(0,0,0,.22));transition:transform .14s ease,box-shadow .14s ease}
.rail-avatar:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(255,255,255,.14)}
.rail-badge{position:relative}
.rail-badge[data-count]:not([data-count="0"])::after{content:attr(data-count);position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;font-size:9.5px;font-weight:700;min-width:15px;height:15px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 3px;box-sizing:border-box}
.rail-tip{position:fixed;z-index:400;background:#111827;color:#fff;font-size:11.5px;font-weight:600;line-height:1;padding:6px 8px;border-radius:7px;white-space:nowrap;pointer-events:none;opacity:0;box-shadow:0 6px 16px -8px rgba(15,23,42,.6);letter-spacing:.1px;transition:opacity .08s}
.rail-tip.on{opacity:1}
@media (max-width:980px){.rail{width:auto;height:56px;flex-direction:row;padding:0 10px;gap:0;justify-content:space-around}.rail-tip{display:none}}

/* Pages list: a desktop screenshot per page (top of the page), a quiet placeholder until one exists. */
.pthumb{position:relative;width:96px;height:60px;border-radius:8px;overflow:hidden;background:var(--surface-3);border:1px solid var(--border);display:grid;place-items:center;color:var(--text-muted);flex:none}
.pthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;background:var(--surface-3)}
.prow:hover .pthumb{border-color:var(--border-strong)}
@media (max-width:980px){.pthumb{width:84px;height:53px}}
.rail-logo:has(video) svg{visibility:hidden}

/* Domains: a list with per-source retirement chips beside sources written as rules. */
.dom{max-width:1400px}
.dom-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(340px,1fr);gap:14px;align-items:start}
.sec-head{display:flex;align-items:center;gap:10px;padding:14px 16px 10px;border-bottom:1px solid var(--border)}
.drow{display:flex;align-items:flex-start;gap:12px;padding:14px 16px}.drow+.drow{border-top:1px solid var(--border)}
.dmain{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.dname{font-size:14.5px;font-weight:600;letter-spacing:-.005em;color:var(--text)}
.dstate{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--success)}.dstate i{width:7px;height:7px;border-radius:50%;background:var(--success)}
.dsub{font-size:12.5px;color:var(--text-secondary)}
.derr{display:flex;gap:6px;font-size:12.5px;color:var(--danger)}
.dchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.uchip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border-radius:999px;background:var(--surface-3);color:var(--text-secondary);font-size:11.5px;font-weight:600}
.uchip.burned{background:var(--danger-soft);color:var(--danger)}
.dacts{display:flex;gap:4px;flex:none;opacity:.55;transition:opacity .15s}.drow:hover .dacts,.dacts:focus-within{opacity:1}
@media (hover:none){.dacts{opacity:1}}
@media (max-width:1200px){.dom-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.drow{flex-direction:column}.dacts{opacity:1}}

.linkrow [data-medium]{grid-column:1/2}
.ov-add [data-medium]{grid-column:1/2}

/* Page headers: lighter, even buttons. */
.hdr button{height:34px;padding:0 13px;border-radius:9px;font-size:13px;font-weight:600;gap:6px;box-shadow:0 1px 2px rgba(16,24,40,.05)}
.hdr button svg{width:15px;height:15px}
.hdr button:not(.primary){background:var(--surface);border-color:var(--border);color:var(--text-secondary)}
.hdr button:not(.primary):hover{color:var(--text);border-color:var(--border-strong);background:var(--surface-2)}
.hdr button.primary{background:var(--primary);border-color:var(--primary);box-shadow:0 1px 2px rgba(43,108,240,.25),inset 0 1px 0 rgba(255,255,255,.14)}
.hdr button.primary:hover{background:var(--primary-hover);transform:none}
.hdr button+button{margin-left:2px}

/* Brand: a live preview with the palette on top, settings left, references and files right. */
.brand{max-width:1400px}
.bhero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);margin-bottom:14px}
.bprev{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:30px 36px;min-height:260px}
.bprev img{max-width:180px;object-fit:contain;margin-bottom:10px}
.pv-h{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pv-sub{font-size:14px;margin-bottom:10px}
.pv-card{margin-top:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px;min-width:210px}.pv-card b{font-size:20px;font-weight:700}.pv-k{font-size:11.5px;font-weight:600;letter-spacing:.02em}
.pv-cta{display:inline-block;padding:12px 26px;font-weight:700;font-size:14px}
.bsum{padding:22px 24px;border-left:1px solid var(--border);display:flex;flex-direction:column;gap:14px;min-width:0}
.bpal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bpal-i{display:flex;flex-direction:column;gap:3px;min-width:0}
.bpal-i span{height:40px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)}
.bpal-i b{font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bpal-i em{font-style:normal;font-size:11px;color:var(--text-muted)}
.bfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding-top:12px;border-top:1px solid var(--border)}
.bfacts>div{display:flex;flex-direction:column;gap:2px;min-width:0}.bfacts b{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;align-items:start}
.bhead{display:flex;align-items:center;gap:10px;margin-bottom:14px}.bhead .spacer{flex:1}
.bfield{display:flex;flex-direction:column;gap:6px}.bfield+.bfield{margin-top:14px}.bfield input:not([type=color]){width:100%;height:36px}
.bfield .l{margin:0}
.blogo{display:flex;gap:14px;align-items:center}
.blogo-tile{width:132px;height:64px;border-radius:12px;display:grid;place-items:center;flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.blogo-tile img{max-width:110px;max-height:44px}
.bh{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted);font-size:12.5px}
.bh input{width:44px!important;height:28px!important;border:0;padding:0;text-align:right;font-weight:600;color:var(--text)}
.btoks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.btok{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:.15s}
.btok:hover{border-color:var(--border-strong);background:var(--surface-2)}
.btok input[type=color]{-webkit-appearance:none;appearance:none;width:38px;height:38px;flex:none;border:0;padding:0;border-radius:9px;background:none;cursor:pointer}
.btok input[type=color]::-webkit-color-swatch-wrapper{padding:0}.btok input[type=color]::-webkit-color-swatch{border:0;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(16,24,40,.14)}
.btok input[type=color]::-moz-color-swatch{border:0;border-radius:9px}
.btok-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}.btok-t b{font-size:12.5px;font-weight:600}
.btok-t input{height:22px;border:0;padding:0;background:transparent;font-size:12px;color:var(--text-secondary);width:100%}
.btok-t input:focus{color:var(--text)}
.bsuggest{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.bshape{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.bshape .bfield+.bfield{margin-top:0}
.bcap{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.bcap-url{display:flex;align-items:center;gap:6px;flex:1;min-width:220px;height:34px;padding:0 3px 0 10px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-muted)}
.bcap-url input{flex:1;min-width:0;border:0;height:30px;padding:0;background:transparent}
.bcap-url button{height:28px}
#genMsg:not(:empty){margin-top:8px}
.brefs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-top:12px}
.bref{position:relative;margin:0;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--surface-3);box-shadow:inset 0 0 0 1px var(--border)}
.bref img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transition:transform .2s}
.bref:hover img{transform:scale(1.03)}
.bref button{position:absolute;top:6px;right:6px;width:24px;height:24px;min-height:0;padding:0;border-radius:999px;border:0;background:rgba(16,24,40,.72);color:#fff;opacity:0;transition:opacity .15s}
.bref:hover button,.bref button:focus-visible{opacity:1}
@media (hover:none){.bref button{opacity:1}}
.bmd{width:100%;font-size:12.5px;line-height:1.55;min-height:260px;background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px;resize:vertical}
.bfiles{display:flex;flex-direction:column}
.bfile{display:grid;grid-template-columns:52px minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:7px 0;font-size:13px}.bfile+.bfile{border-top:1px solid var(--border)}
.bkind{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);background:var(--surface-3);border-radius:5px;padding:2px 0;text-align:center}
.bdata summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none}.bdata summary::-webkit-details-marker{display:none}
.bdata summary svg{margin-left:auto;transition:transform .15s}.bdata[open] summary svg{transform:rotate(180deg)}
.bdata[open] summary{margin-bottom:12px}
.bdata textarea{width:100%;font-size:12px;line-height:1.5;background:var(--surface-2);border-radius:var(--r-md)}
@media (max-width:1100px){.bhero,.bgrid{grid-template-columns:minmax(0,1fr)}.bsum{border-left:0;border-top:1px solid var(--border)}}
@media (max-width:640px){.bpal,.bfacts{grid-template-columns:repeat(2,minmax(0,1fr))}.btoks,.bshape{grid-template-columns:minmax(0,1fr)}.bprev{padding:24px}.hdr .wide-sub{display:none}}

/* Date range control: a button, then presets beside a two-month calendar. */
.drp{position:relative}
.drp-btn{height:36px;padding:0 12px;border-radius:10px;gap:8px;font-size:13px;background:var(--surface);border-color:var(--border);box-shadow:0 1px 2px rgba(16,24,40,.05)}
.drp-btn b{font-weight:600}.drp-btn span{color:var(--text-secondary);font-weight:500}.drp-btn svg{color:var(--text-muted)}
.drp-btn:hover{border-color:var(--border-strong)}
.drp-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:40;display:flex;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;animation:in .16s var(--ease-in)}
.drp-presets{display:flex;flex-direction:column;gap:2px;padding:10px;border-right:1px solid var(--border);background:var(--surface-2);min-width:150px}
.drp-presets button{justify-content:flex-start;height:32px;border:0;background:transparent;border-radius:8px;font-size:13px;color:var(--text-secondary);padding:0 10px}
.drp-presets button:hover{background:var(--surface-3);color:var(--text)}.drp-presets button.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.drp-main{display:flex;flex-direction:column}
.drp-cal{position:relative;padding:12px 14px 6px}
.drp-nav{position:absolute;left:10px;right:10px;top:8px;display:flex;pointer-events:none}.drp-nav button{pointer-events:auto;width:30px;height:30px;min-height:0}
.drp-nav [data-nav="-1"] svg{transform:rotate(90deg)}.drp-nav [data-nav="1"] svg{transform:rotate(-90deg)}
.drp-months{display:flex;gap:22px}
.drp-month{width:238px}
.drp-title{text-align:center;font-size:13.5px;font-weight:700;height:30px;line-height:30px;margin-bottom:6px}
.drp-dow,.drp-days{display:grid;grid-template-columns:repeat(7,34px)}
.drp-dow span{text-align:center;font-size:11px;font-weight:600;color:var(--text-muted);height:24px;line-height:24px}
.dd{width:34px;height:34px;min-height:0;padding:0;border:0;border-radius:9px;background:transparent;font-size:13px;font-weight:500;color:var(--text);justify-content:center;font-variant-numeric:tabular-nums;position:relative}
.dd:hover:not(:disabled){background:var(--surface-3)}
.dd.today:after{content:"";position:absolute;bottom:5px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--primary)}
.dd.in{background:var(--primary-soft);border-radius:0;color:var(--primary)}
.dd.start,.dd.end{background:var(--primary)!important;color:#fff;border-radius:9px}.dd.start.today:after,.dd.end.today:after{background:#fff}
.dd.off,.dd:disabled{color:var(--text-muted);opacity:.45;cursor:default;background:transparent}
.drp-foot{display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
@media (max-width:720px){.drp-pop{flex-direction:column;left:0;right:auto;max-width:calc(100vw - 32px)}.drp-presets{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--border);min-width:0}}

/* Settings: a tab bar across Brand, Components and Users. */
.subnav{display:flex;align-items:stretch;gap:4px;height:52px;padding:0 24px;background:var(--surface);border-bottom:1px solid var(--border);flex:none;overflow-x:auto;scrollbar-width:none}.subnav::-webkit-scrollbar{display:none}
.subnav-t{align-self:center;display:flex;align-items:center;height:22px;margin-right:16px;padding-right:20px;border-right:1px solid var(--border);font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--text);white-space:nowrap}
.subnav a{display:inline-flex;align-items:center;gap:7px;padding:0 12px;margin-bottom:-1px;border-bottom:2px solid transparent;font-size:14px;font-weight:500;color:var(--text-secondary);text-decoration:none;white-space:nowrap}
.subnav a .ic{color:var(--text-muted)}
.subnav a:hover{color:var(--text)}.subnav a:hover .ic{color:var(--text-secondary)}
.subnav a.on{color:var(--primary);font-weight:600;border-bottom-color:var(--primary)}.subnav a.on .ic{color:var(--primary)}
.subnav+.sb{height:calc(100vh - 53px)}
@media (max-width:980px){.subnav{padding:0 12px;gap:0}.subnav-t{display:none}.subnav a{padding:0 10px}.subnav+.sb{height:calc(100vh - 53px - 56px)}}

/* Pages toolbar: a squarer search and a status filter menu. */
.toolbar .search input{border-radius:8px}
.fsel{position:relative}
.fbtn{height:36px;padding:0 12px;border-radius:8px;gap:7px;font-size:13px;font-weight:500;color:var(--text-secondary);background:var(--surface);border-color:var(--border)}
.fbtn:hover{border-color:var(--border-strong);color:var(--text)}
.fbtn b{font-weight:600;color:var(--text);padding-left:7px;border-left:1px solid var(--border)}
.fbtn.set{border-color:var(--border-strong);color:var(--text)}
.fsel .menu{position:absolute;top:calc(100% + 6px);left:0;z-index:30;min-width:240px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg)}
.fsel .menu button{display:grid;grid-template-columns:1fr auto 16px;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border-radius:8px;font-size:13px;font-weight:500;text-align:left}
.fsel .menu button.on{font-weight:600}
.fsel .menu button:not(.on) svg{display:none}
.mcount{font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.fclear{height:28px;padding:0 9px;border-radius:999px;border:0;background:transparent;color:var(--text-muted);font-size:12.5px;gap:4px}.fclear:hover{color:var(--text);background:var(--surface-3)}

/* Primary buttons in ink, like the rail; blue stays for links and selections. */
button.primary,.hdr button.primary{background:var(--rail);border-color:var(--rail);color:#fff;box-shadow:0 1px 2px rgba(16,24,40,.18),inset 0 1px 0 rgba(255,255,255,.08)}
button.primary:hover,.hdr button.primary:hover{background:#1d2939;border-color:#1d2939}
button.primary:disabled{background:var(--surface-3);border-color:var(--border);color:var(--text-muted);box-shadow:none}

/* Tables: a tinted header, calm row lines, hover, numbers aligned, a light dash for empty cells. */
th{background:var(--surface-2);font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-secondary);padding:9px 12px;border-bottom:1px solid var(--border)}
td{padding:11px 12px;border-bottom:1px solid #eef0f3}
tbody tr{transition:background .12s}tbody tr:hover td{background:var(--surface-2)}
td.num,td .num,td.r{font-variant-numeric:tabular-nums}
table.data th{background:var(--surface-2);font-size:12px;font-weight:600;color:var(--text-secondary);padding:9px 12px}
table.data td{padding:11px 12px;border-bottom:1px solid #eef0f3}
.card.flush>table:first-child th:first-child,.card.flush>.tscroll:first-child th:first-child{border-top-left-radius:var(--r-lg)}
.nil{color:var(--border-strong)}

/* Pages list. */
.ptable{overflow:hidden}
.ptable .phead,.ptable .prow{grid-template-columns:72px minmax(220px,2fr) 112px minmax(140px,1.3fr) 76px 92px 92px 34px;gap:14px}
.ptable .phead{align-items:center;height:38px;padding:0 16px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.ptable .phead>span,.ptable .phead .th{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-secondary)}
.th{height:26px;padding:0 6px;margin-left:-6px;border:0;background:transparent;border-radius:6px;gap:4px;justify-self:start}
.th:hover{background:var(--surface-3);color:var(--text)}.th.on{color:var(--text)}
.th i{display:inline-flex}.th i.up svg{transform:rotate(180deg)}
.ptable .prow{padding:10px 16px;border-bottom:1px solid #eef0f3;align-items:center}
.ptable .prow:last-child{border-bottom:0}
.ptable .prow:hover{background:var(--surface-2)}
.ptable .prow:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.ptable .pthumb{width:72px;height:45px;border-radius:7px}
.pcell-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.ptable .prow .name{font-size:14px;font-weight:600}
.ptable .prow .sub{font-size:12.5px;color:var(--text-muted)}
.pnum{display:inline-block;margin-right:6px;padding:0 5px;border-radius:4px;background:var(--surface-3);color:var(--text-secondary);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.plive{font-size:13px;color:var(--text);font-weight:500}.plive.off{color:var(--text-muted);text-decoration:line-through}
.vchip{display:inline-flex;height:22px;align-items:center;padding:0 7px;border-radius:6px;background:var(--surface-3);font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.toolbar .spacer{flex:1}
@media (max-width:980px){.ptable .phead{display:none}.ptable .prow{grid-template-columns:64px minmax(0,1fr) auto auto;gap:4px 12px}.ptable .pthumb{width:64px;height:40px}}
@media (max-width:980px){.ptable .prow .sub .narrow-only{display:inline}}

/* Table header: white with a hairline, small labels on each column's own edge. */
.ptable .phead{height:40px;background:var(--surface);border-bottom:1px solid var(--border)}
.ptable .phead>span,.ptable .phead .th{font-size:12px;font-weight:500;color:var(--text-muted);letter-spacing:.01em}
.th{height:auto;padding:0;margin:0;border:0;background:transparent;border-radius:0;gap:3px;min-height:0;box-shadow:none}
.th:hover{background:transparent;color:var(--text-secondary)}
.th.on{color:var(--text);font-weight:600}
th,table.data th{background:var(--surface);font-weight:500;color:var(--text-muted);font-size:12px}

/* Source logos. */
.slogo{flex:none;display:block}.slogo.plain{color:var(--text-secondary)}
.srccell{display:inline-flex;align-items:center;gap:7px}
/* Domain usage chips: logo, name, then Retired or a small meter. */
.uchip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px 0 8px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:500}
.uchip em{font-style:normal;font-size:12px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.uchip .meter{display:inline-block;width:28px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}.uchip .meter b{display:block;height:100%;background:var(--text-secondary);border-radius:2px}
.uchip.burned{background:var(--surface-2)}
.uchip.burned>span{color:var(--text-secondary)}
.uchip.burned em{display:inline-flex;align-items:center;gap:5px;color:var(--danger);font-weight:600}.uchip.burned em:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--danger)}
/* Icons in buttons sit on the text's centre line. */
button>svg,.btnlike>svg,a.btnlike svg,button .ic{display:block;flex:none}

/* Analytics balance: full width, the range on the right, a shorter chart. */
.rangebar.right .drp-pop{left:auto;right:0}
.an-head{display:flex;align-items:center;gap:12px}
.an-title{font-size:16px;font-weight:700;letter-spacing:-.01em}
.plot{height:160px}
.hdr .drp-btn{height:34px}

/* Screenshot viewer. */
.lb{position:fixed;inset:0;z-index:70;background:rgba(10,14,24,.86);display:flex;flex-direction:column;animation:in .16s var(--ease-in)}
.lb-bar{display:flex;align-items:center;gap:10px;height:56px;padding:0 16px;color:#fff;flex:none}
.lb-bar b{font-size:14px;font-weight:600}.lb-bar .muted{color:#9aa4b8}
.lb-bar button{color:#d0d5dd}.lb-bar button:hover:not(:disabled){background:rgba(255,255,255,.1);color:#fff;border-color:transparent}
.lb-bar button:disabled{background:transparent;color:#475467;border:0}
.lb-bar [data-lb="-1"] svg{transform:rotate(90deg)}.lb-bar [data-lb="1"] svg{transform:rotate(-90deg)}
.lb-open{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:8px;color:#d0d5dd;font-size:13px;font-weight:500;text-decoration:none}.lb-open:hover{background:rgba(255,255,255,.1);color:#fff}
.lb-body{flex:1;overflow:auto;display:flex;justify-content:center;align-items:flex-start;padding:8px 24px 40px;overscroll-behavior:contain}
.lb-body img{display:block;max-width:100%;height:auto;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.5);cursor:zoom-in;background:#fff}
.lb-body img.zoom{max-width:none;width:auto;cursor:zoom-out}
.ov-shots a{cursor:zoom-in}

/* Section headings with a plain line underneath; sources list their UTM values on labelled lines. */
.sec-title{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.sec-title .muted{font-size:12.5px;line-height:1.45}
.sec-head{align-items:flex-start}

/* Flat surfaces: a border, no shadow. */
.card,.kpis,.vrow,.vrow.live,.role,.bhero,.lb-none{box-shadow:none}
.vrow.live{border-color:#a7dcb8}
/* Viewer: a solid backdrop and bar, so the app never shows through. */
.lb{background:rgba(9,12,20,.97)}
.lb-bar{background:#0b0f19;border-bottom:1px solid rgba(255,255,255,.08)}

/* Analytics: buttons and engagement side by side. */
.an-pair{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:12px;align-items:start}
.btnname{font-weight:600}
.reach{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary)}.reach+.reach{margin-top:9px}
.reach b{text-align:right;font-variant-numeric:tabular-nums;color:var(--text)}.reach .share{height:8px;border-radius:4px}
.tstats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.tstats>div{display:flex;flex-direction:column;gap:2px}.tstats b{font-size:20px;font-variant-numeric:tabular-nums}
.tbuckets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:92px;align-items:end}
.tbuckets>div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:4px;height:100%}
.tbuckets i{width:70%;background:#7aa2f7;border-radius:4px 4px 0 0;min-height:3px}
.tbuckets span{font-size:11px;color:var(--text-muted);white-space:nowrap}.tbuckets em{font-style:normal;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.an-pair{grid-template-columns:minmax(0,1fr)}}

/* Visitors list. */
.vtable td{vertical-align:top}
.vwhen{font-weight:600;white-space:nowrap}
.vscroll{display:flex;align-items:center;gap:8px;min-width:120px}.vscroll .share{flex:1;height:6px}.vscroll span{font-size:12px;color:var(--text-secondary);width:34px;font-variant-numeric:tabular-nums}
.vclick{display:inline-flex;align-items:center;height:22px;padding:0 8px;margin:0 4px 2px 0;border-radius:6px;background:var(--primary-soft);color:var(--primary);font-size:12px;font-weight:600;white-space:nowrap}
.vmore{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--border)}
#visSrc{height:32px}

/* Live page facts: three columns, label over value. */
.ov-facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.ov-facts3>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ov-facts3 .muted{font-size:12px}
.ov-facts3 b{font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.ov-facts3 b.ok{color:var(--success)}.ov-facts3 b.bad{color:var(--danger)}
.ov-facts3 b a{font-weight:500;font-size:12.5px}
.ov-live-head button.danger{color:var(--danger)}

/* Components toolbar: viewport as icon buttons. */
.sb-vp button{width:34px;padding:0;justify-content:center;color:var(--text-secondary)}.sb-vp button.on{color:var(--text)}

/* Analytics: key-number tabs, breakdown cards whose rows filter the page, a details table. */
.kpi2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.kt{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:3px;padding:14px 16px;cursor:pointer;border-bottom:2px solid transparent;transition:background .12s}
.kt+.kt{border-left:1px solid var(--border)}
.kt:hover{background:var(--surface-2)}.kt.on{border-bottom-color:var(--primary);background:var(--surface-2)}
.kt:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.kl{font-size:12px;color:var(--text-muted);font-weight:500}.kt b{font-size:24px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15}
.dl{font-size:11.5px;font-weight:600;color:var(--text-muted);font-variant-numeric:tabular-nums}.dl.up{color:var(--success)}.dl.down{color:var(--danger)}.dl.new{color:var(--primary)}
.bars2 .col i.v.one{background:#7aa2f7}
.dgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dcard{display:flex;flex-direction:column}
.dhead{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;flex-wrap:wrap}
.dtitle{font-size:14px;font-weight:700;flex:1}
.dtabs{display:flex;gap:2px}.dtabs button{height:26px;padding:0 9px;border:0;border-radius:7px;background:transparent;font-size:12.5px;font-weight:500;color:var(--text-muted)}
.dtabs button:hover{color:var(--text)}.dtabs button.on{background:var(--surface-3);color:var(--text);font-weight:600}
.dcols{display:flex;justify-content:space-between;padding:4px 14px 6px;font-size:11.5px;font-weight:600;color:var(--text-muted)}
.dlist{display:flex;flex-direction:column;gap:3px;padding:0 8px 8px;min-height:120px}
.dr{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:10px;height:32px;padding:0 8px;border-radius:7px;cursor:pointer;font-size:13px}
.dr i{position:absolute;left:0;top:0;bottom:0;background:#e3ebfd;border-radius:7px;z-index:0}
.dr:hover i{background:#d2defb}.dr:focus-visible{outline:2px solid var(--primary)}
.dr .dl2,.dr .dn{position:relative;z-index:1}.dr .dl2{flex:1;min-width:0;display:flex}
.dr .dn{font-weight:600;font-variant-numeric:tabular-nums;display:flex;gap:8px;align-items:baseline}.dr .dn em{font-style:normal;font-size:11.5px;font-weight:500;color:var(--text-muted);min-width:34px;text-align:right}
.dempty{padding:10px 8px}
.dmore{margin:0 14px 12px;align-self:flex-start;height:28px;padding:0 10px;font-size:12.5px;border-radius:8px}
.flag{font-size:14px;line-height:1}
.fchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fchip{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 4px 0 11px;border-radius:999px;background:var(--primary-soft);color:var(--text-secondary);font-size:12.5px}
.fchip b{color:var(--text);font-weight:600}.fchip button{width:22px;height:22px;min-height:0;padding:0;border:0;border-radius:999px;background:transparent;display:grid;place-items:center;color:var(--text-secondary)}.fchip button:hover{background:#cfdcfb;color:var(--text)}
.dlg.details{max-width:1000px;width:calc(100vw - 48px);max-height:calc(100vh - 80px);display:flex;flex-direction:column}
.dscroll{overflow:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.dscroll thead th{position:sticky;top:0;z-index:1}
.clickrow{cursor:pointer}
@media (max-width:1100px){.kpi2{grid-template-columns:repeat(3,minmax(0,1fr))}.kt:nth-child(4){border-left:0}.kt:nth-child(n+4){border-top:1px solid var(--border)}.dgrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.kpi2{grid-template-columns:repeat(2,minmax(0,1fr))}.kt{border-left:0!important;border-top:1px solid var(--border)}.kt:nth-child(-n+2){border-top:0}.kt:nth-child(even){border-left:1px solid var(--border)!important}}
.dgrid>.card+.card,.dgrid>.card{margin-top:0}
.tbuckets{height:120px}.tbuckets em small{font-size:11px;font-weight:500;color:var(--text-muted)}

/* Domains: one grid of domain × channel. */
.dsum{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px;font-size:13px;color:var(--text-secondary)}.dsum b{color:var(--text);font-variant-numeric:tabular-nums}.dsum .new b{color:var(--primary)}
.dmx th.mx{text-align:center;white-space:nowrap}.dmx th.mx .slogo{display:inline-block;vertical-align:-3px;margin-right:5px}
.dmx td.mx{text-align:center}
.dmx tr.isnew td{background:#f5f8ff}.dmx tr.islocked .dname{color:var(--text-muted)}
.mx-free{display:inline-block;width:8px;height:8px;border-radius:50%;background:#bfe6cb;box-shadow:0 0 0 3px #eaf7ef}
.mx-use{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}.mx-use i{display:inline-block;width:26px;height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}.mx-use i b{display:block;height:100%;background:var(--warn)}
.mx-ret{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:var(--danger)}.mx-ret:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--danger)}
.dlegend{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:12px 16px;border-top:1px solid var(--border);font-size:12.5px;color:var(--text-muted)}.dlegend>span{display:inline-flex;align-items:center;gap:8px}.dlegend a{margin-left:auto;font-weight:500}
.dmenu{position:absolute;right:0;top:calc(100% + 4px);z-index:30;min-width:220px;padding:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);text-align:left}
.dmenu button{display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 10px;border-radius:8px;font-size:13px;justify-content:flex-start}
.menuwrap{position:relative}

/* Page overview, reworked: address first, share links as the main task, quiet facts, actions tucked away. */
.ov-url2{display:block;font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text);text-decoration:none;overflow-wrap:anywhere;line-height:1.3}
.ov-url2 span{display:inline-block;color:var(--text-secondary);font-weight:500}.ov-url2:hover{color:var(--primary)}
.ov-meta2{display:flex;flex-wrap:wrap;gap:4px 0;margin-top:6px;font-size:12.5px;color:var(--text-secondary)}
.ov-meta2>span{display:inline-flex;align-items:center;gap:4px}.ov-meta2>span+span:before{content:"·";margin:0 8px;color:var(--text-muted)}
.ov-status{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}.ov-status>span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap}.ov-status .ok{color:var(--success)}.ov-status .bad{color:var(--danger)}
.ov-actions{display:flex;align-items:center;gap:6px;margin-top:14px}.ov-actions .spacer{flex:1}
.ov-actions .btnlike{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:500;text-decoration:none}.ov-actions .btnlike:hover{background:var(--surface-2)}
.danger-item{color:var(--danger)!important}
.ov-h2{display:flex;align-items:center;gap:10px;margin-bottom:10px}.ov-h2 h3{margin:0;font-size:14px;font-weight:700;flex:1}.ov-h2 h3 .muted{font-weight:500}.ov-h2 a{font-size:12.5px;font-weight:500}
.ov-hint{margin:-4px 0 12px;font-size:12.5px;color:var(--text-muted)}
.olist{display:flex;flex-direction:column;gap:8px}
.ol{border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.ol-top{display:flex;align-items:center;gap:7px;min-width:0}.ol-top b{font-size:13.5px;font-weight:600;flex:none}.ol-top .muted{font-size:12px;min-width:0}
.ol-def{margin-left:auto;flex:none;font-size:11px;font-weight:600;color:var(--text-muted);border:1px solid var(--border);border-radius:999px;padding:1px 7px;cursor:help}
.ol-url{display:flex;align-items:center;gap:8px;margin-top:8px;padding:5px 5px 5px 10px;background:var(--surface-2);border-radius:var(--r-sm);font-size:12.5px}
.ol-url>span{flex:1;min-width:0}.ol-url b{color:var(--text);font-weight:700}.ol-url button{flex:none;height:26px}
.ol-short{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12.5px;color:var(--text-secondary);cursor:pointer}
.ov-nums{display:flex;gap:28px}.ov-nums>div{display:flex;flex-direction:column}.ov-nums b{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}.ov-nums span{font-size:12px;color:var(--text-muted)}
.dlg-check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 12px;cursor:pointer}.dlg-check input{margin-top:3px;accent-color:var(--primary)}.dlg-check span{display:flex;flex-direction:column;gap:2px}.dlg-check b{font-size:13.5px;font-weight:600}.dlg-check em{font-style:normal;font-size:12px;color:var(--text-muted)}

/* Microsoft Clarity. */
.clcard .bshape{margin-bottom:12px}.clfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:12px;border-top:1px solid var(--border)}.clfoot .bad{color:var(--danger)}
.clnote{margin-top:10px;font-size:12px}
.clempty{display:flex;align-items:center;gap:10px;color:var(--text-secondary);font-size:13px}
.clsig{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.clsig>div{display:flex;flex-direction:column;padding:10px 16px}.clsig>div+div{border-left:1px solid var(--border)}.clsig b{font-size:20px;font-variant-numeric:tabular-nums}.clsig span{font-size:12px;color:var(--text-muted)}
.clwhy{display:inline-flex;height:22px;align-items:center;padding:0 8px;border-radius:6px;background:var(--warn-soft);color:var(--warn);font-size:12px;font-weight:600}
.sm-link{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:500;margin-left:12px}
@media (max-width:700px){.clsig{grid-template-columns:1fr;padding:4px 0}.clsig>div{flex-direction:row-reverse;justify-content:space-between;align-items:baseline;padding:6px 16px}.clsig>div+div{border-left:0}.clsig b{font-size:15px}.clsig span{font-size:13px;color:var(--text-secondary)}.clbox .thead-title>.muted,.clbox .clx{display:none}.clbox .thead-title{flex-wrap:nowrap}.clbox .thead-title .eyebrow{white-space:nowrap}.clbox .sm-link{margin-left:8px}.clcard .bhead>.muted{display:none}}
.sm-link,.clcard .eyebrow{white-space:nowrap}

/* ---------- Analytics, visual pass: one surface for numbers + chart, quiet marks, aligned columns ---------- */
.an{--viz:color-mix(in srgb,var(--primary) 70%,var(--surface));--viz-strong:var(--primary);--viz-soft:color-mix(in srgb,var(--primary) 8%,var(--surface));--viz-soft-2:color-mix(in srgb,var(--primary) 14%,var(--surface));--viz-grid:var(--surface-3)}
.an.stack>*+*{margin-top:16px}
.an .card{border-radius:var(--r-lg)}
/* One section-title style for every block on the page. */
.an .chart-head .eyebrow,.an .thead-title .eyebrow,.an .eng .eyebrow,.an .dtitle{font-size:14px;font-weight:600;letter-spacing:-.005em;text-transform:none;color:var(--text)}
.an-head{align-items:center}
.an-title{font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.an-head .muted{font-size:12.5px;color:var(--text-secondary)}

/* Date range button: flat, square-ish, like the other filters. The popover's own buttons never pick up header button styles. */
.drp-btn,.hdr .drp-btn{height:34px;padding:0 10px 0 11px;border-radius:var(--r-sm);gap:8px;box-shadow:none;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:13px}
.drp-btn:hover,.hdr .drp-btn:hover{background:var(--surface-2);border-color:var(--border-strong);color:var(--text)}
.drp-btn[aria-expanded="true"]{border-color:var(--border-strong);background:var(--surface-2)}
.drp-btn>svg{color:var(--text-muted);width:14px;height:14px}
.drp-btn b{font-weight:600}.drp-btn span{color:var(--text-muted);font-weight:500;padding-left:8px;border-left:1px solid var(--border)}
.drp-pop{border-radius:12px;box-shadow:var(--shadow-md);top:calc(100% + 6px)}
.drp-pop .drp-presets{padding:8px;gap:1px;background:var(--surface);min-width:148px}
.drp-pop .drp-presets button{height:30px;padding:0 10px;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--text-secondary);font-size:13px;font-weight:500}
.drp-pop .drp-presets button:hover{background:var(--surface-2);color:var(--text)}
.drp-pop .drp-presets button.on{background:var(--surface-3);color:var(--text);font-weight:600}
.drp-pop .drp-nav button{width:28px;height:28px;border:0;background:transparent;box-shadow:none;border-radius:6px;color:var(--text-secondary)}
.drp-pop .drp-nav button:hover:not(:disabled){background:var(--surface-3);color:var(--text)}
.drp-pop .drp-nav button:disabled{background:transparent;opacity:.35}
.drp-pop .drp-nav button svg{width:16px;height:16px}
.drp-pop .drp-title{font-size:13px;font-weight:600}
.drp-pop button.dd{width:34px;height:32px;margin:1px 0;border:0;border-radius:6px;background:transparent;box-shadow:none;color:var(--text);font-size:12.5px;font-weight:500}
.drp-pop button.dd:hover:not(:disabled){background:var(--surface-3)}
.drp-pop button.dd.in{background:var(--primary-soft);color:var(--primary);border-radius:0}
.drp-pop button.dd.start,.drp-pop button.dd.end{background:var(--primary)!important;color:#fff;border-radius:6px}
.drp-pop button.dd.off,.drp-pop button.dd:disabled{background:transparent;color:var(--text-muted);opacity:.5}
.drp-pop .drp-foot{padding:10px 14px}
.drp-pop .drp-foot button{height:30px;padding:0 12px;border-radius:var(--r-sm);font-size:12.5px;box-shadow:none}
.drp-pop .drp-foot button:not(.primary){background:var(--surface);border:1px solid var(--border);color:var(--text)}
.drp-pop .drp-foot #drpSel{font-size:12.5px;color:var(--text-secondary)}

/* Filter bar: applied filters as chips (field, operator, value), ANDed, then "Add filter". Chips are bordered and lightly
   rounded so they read as filters, not tabs; a chip opens its filter in the picker, × removes it. */
.anfbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:28px}
.an .fchip{display:inline-flex;align-items:stretch;height:28px;padding:0;gap:0;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:12.5px;max-width:100%;min-width:0}
.an .fchip .fchip-b{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;gap:5px;padding:0 4px 0 10px;cursor:pointer;min-width:0;border-radius:var(--r-sm) 0 0 var(--r-sm)}
.an .fchip .fchip-b:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.an .fchip .fk{font-weight:500;color:var(--text-secondary);white-space:nowrap}
.an .fchip .fo{color:var(--text-muted);white-space:nowrap}
.an .fchip.neg .fo{color:var(--danger)}
.an .fchip b{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.an .fchip .fchip-x{align-self:center;width:22px;height:22px;min-height:0;margin-right:2px;padding:0;border:0;border-radius:5px;background:transparent;display:grid;place-items:center;color:var(--text-muted)}
.an .fchip .fchip-x:hover{background:var(--surface-3);color:var(--text)}.an .fchip .fchip-x:active{transform:none}
.an .fchip:hover{border-color:var(--border-strong)}
.an .fchip.open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.fand{font-size:11.5px;color:var(--text-muted);padding:0 1px}
.fadd{height:28px;min-height:0;padding:0 10px 0 8px;gap:5px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:12.5px;font-weight:500;box-shadow:none}
.fadd svg{color:var(--text-muted)}
.fadd:hover,.fadd.open{border-color:var(--border-strong);color:var(--text);background:var(--surface-2)}.fadd:hover svg{color:var(--text)}
.fadd:active{transform:none}
.an .fclear{height:28px;min-height:0;padding:0 8px;border-radius:6px;font-weight:500}

/* Filter picker: one popover, the one shadow menus use. */
.fpop{position:absolute;z-index:30;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-md);animation:in .12s var(--ease-in)}
.fpop-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px;padding:12px 12px 8px}
.fpop-head select{width:100%;height:32px;font-size:13px;font-weight:500}
.fpop-q{position:relative;margin:0 12px}
.fpop-q input{width:100%;height:32px;padding:0 10px 0 30px;font-size:13px;border-radius:var(--r-sm);background:var(--surface)}
.fpop-q .ic{position:absolute;left:10px;top:9px;color:var(--text-muted);pointer-events:none}
.fpop-lh{display:flex;justify-content:space-between;gap:12px;padding:10px 20px 4px;font-size:11.5px;font-weight:500;color:var(--text-muted)}
.fpop-lh>span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpop-list{max-height:min(272px,40vh);overflow:auto;padding:0 6px 6px;overscroll-behavior:contain}
.fopt{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;column-gap:10px;min-height:34px;padding:4px 8px 4px 10px;border-radius:6px;cursor:pointer;font-size:13px;color:var(--text)}
.fopt:hover,.fopt.act{background:var(--surface-2)}
.fopt.act{box-shadow:inset 0 0 0 1px var(--border)}
.fck{width:14px;height:14px;display:grid;place-items:center;border:1.5px solid var(--border-strong);background:var(--surface);color:#fff}
.fck.box{border-radius:4px}.fck.dot{border-radius:50%}
.fopt.on .fck.box{background:var(--primary);border-color:var(--primary)}
.fopt.on .fck.dot{border-color:var(--primary)}.fck.dot i{width:6px;height:6px;border-radius:50%;background:var(--primary)}
.fck svg{stroke-width:3}
.fol{display:flex;align-items:center;gap:8px;min-width:0}.fol>svg,.fol>.slogo,.fol>.flag{flex:none}
.fol2{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.fopt.on .fol2>span:first-child{font-weight:600}
.fsub{font-size:11.5px;color:var(--text-muted)}
.fn{font-size:12.5px;font-weight:500;color:var(--text-secondary);font-variant-numeric:tabular-nums;text-align:right}
.fempty{padding:18px 8px;text-align:center;font-size:12.5px;color:var(--text-muted)}
.fpop-foot{display:flex;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--border)}
.fpop-foot #fpSum{font-size:12.5px;color:var(--text-secondary)}
.fpop-foot button{height:30px;min-height:0;padding:0 12px;border-radius:var(--r-sm);font-size:12.5px;box-shadow:none}
.fpop-foot button:active{transform:none}

/* Breakdown rows: "Only this" and "Exclude" on hover, at the end of the label. */
.dracts{position:relative;z-index:1;display:none;gap:4px;flex:none;margin-left:8px}
.dr:hover .dracts,.dr:focus-within .dracts{display:flex}
.dracts button{height:22px;min-height:0;padding:0 7px;border-radius:5px;border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:11.5px;font-weight:500;box-shadow:none}
.dracts button:hover{border-color:var(--border-strong);color:var(--text)}
.dracts button[data-fx="ex"]:hover{color:var(--danger)}
.dracts button:active{transform:none}
@media (hover:none){.dr:hover .dracts{display:none}}
@media (max-width:640px){.fand{display:none}.fpop-lh{padding:10px 18px 4px}}

/* Key numbers + chart: one card; the numbers are the chart's tabs. */
.anmain{overflow:visible}
.anmain .kpi2{border:0;border-bottom:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;background:transparent}
.anmain .kt{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:8px;row-gap:6px;padding:16px 16px 18px;border-bottom:0}
.anmain .kt:first-child{border-top-left-radius:var(--r-lg)}.anmain .kt:last-child{border-top-right-radius:var(--r-lg)}
.anmain .kt .kl{grid-column:1/-1;font-size:12.5px;font-weight:500;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.anmain .kt b{font-size:26px;font-weight:600;line-height:1.1;letter-spacing:-.025em;color:var(--text)}
.anmain .kt .dl{font-size:12px;font-weight:500;white-space:nowrap}
.anmain .kt:hover{background:var(--surface-2)}
.anmain .kt.on{background:var(--surface)}
.anmain .kt.on .kl{color:var(--text)}
.anmain .kt::after{content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:transparent}
.anmain .kt.on::after{background:var(--primary)}
.anchart{padding:16px 16px 14px}
.an .chart-head{margin-bottom:14px}
.an .plot{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:180px auto;column-gap:12px;height:auto}
.an .yaxis{margin:-7px 0;font-size:11px;color:var(--text-muted);min-width:24px}
.an .bars2{gap:0;border-bottom:1px solid var(--border)}
.an .bars2 .grid i{border-top:1px solid var(--viz-grid)}
.an .bars2 .col{border-radius:3px 3px 0 0;cursor:default}
.an .bars2 .col:hover,.an .bars2 .col.on{background:var(--surface-2)}
.an .bars2 .col i,.an .bars2 .col i.v.one{width:min(56%,22px);border-radius:3px 3px 0 0;background:var(--viz)}
.an .bars2 .col.on i{background:var(--viz-strong)}
.an .xpad{display:block}
.an .xaxis{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));margin:8px 0 0;font-size:11px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.an .xaxis span{grid-row:1;justify-self:center;white-space:nowrap}
.an .tip{top:44px;min-width:140px;padding:8px 10px;border-radius:var(--r-sm);font-size:12px;box-shadow:var(--shadow-md);gap:2px}
.an .tip>b{font-weight:600;color:#fff;margin-bottom:2px}
.an .tip div b{margin-left:auto;font-variant-numeric:tabular-nums}

/* Breakdown cards: title + switch, then rows; bar and label share a track, numbers sit in fixed columns. */
.an .dgrid{gap:16px}
.an .dhead{padding:14px 16px 8px;gap:8px 12px;flex-wrap:wrap}
.an .dtitle{flex:1 0 auto;white-space:nowrap}
.an .dtabs{gap:0;padding:2px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--border);flex:none;max-width:100%;overflow-x:auto}
.an .dtabs button{height:24px;min-height:0;padding:0 9px;border-radius:5px;font-size:12px;font-weight:500;color:var(--text-muted);box-shadow:none}
.an .dtabs button:hover{color:var(--text)}
.an .dtabs button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--border)}
.an .dcols{display:grid;grid-template-columns:minmax(0,1fr) auto;padding:6px 16px;font-size:12px;font-weight:500;color:var(--text-muted)}
.an .dcols>span:last-child{text-align:right;padding-right:48px}
.an .dlist{gap:2px;padding:0 8px 10px;min-height:0}
.an .dr{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;height:32px;padding:0;border-radius:6px;font-size:13px;color:var(--text)}
.an .dr:hover{background:var(--surface-2)}
.an .dr:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.an .dbar{position:relative;display:flex;align-items:center;min-width:0;height:28px;padding:0 8px}
.an .dbar i{position:absolute;left:0;top:0;bottom:0;background:var(--viz-soft);border-radius:4px;z-index:0}
.an .dr:hover .dbar i{background:var(--viz-soft-2)}
.an .dl2{position:relative;z-index:1;flex:1;min-width:0;display:flex}
.an .dl2 .srccell{min-width:0;max-width:100%}
.an .dn{display:grid;grid-template-columns:auto 40px;column-gap:8px;align-items:baseline;padding-right:8px;font-weight:600;font-size:13px;font-variant-numeric:tabular-nums;text-align:right}
.an .dn em{font-style:normal;font-size:12px;font-weight:500;color:var(--text-muted);min-width:0;text-align:right}
.an .dempty{padding:10px 8px;font-size:12.5px}
.an .dmore{margin:auto 0 0;align-self:stretch;height:40px;padding:0 16px;justify-content:flex-start;border:0;border-top:1px solid var(--border);border-radius:0 0 var(--r-lg) var(--r-lg);background:transparent;color:var(--text-secondary);font-size:12.5px;font-weight:500;box-shadow:none}
.an .dmore:hover{background:var(--surface-2);color:var(--text)}
.an .dmore:active{transform:none}

/* Engagement: scroll depth and time on page side by side. */
.an .eng{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:0}
.an .eng-col{padding:16px 16px 20px;min-width:0}
.an .eng-col+.eng-col{border-left:1px solid var(--border)}
.an .eng .eyebrow{margin-bottom:14px}
.an .reach{grid-template-columns:112px minmax(0,1fr) 40px;gap:12px;font-size:13px;color:var(--text-secondary)}
.an .reach+.reach{margin-top:12px}
.an .reach b{font-weight:600;font-size:13px}
.an .share{height:6px;border-radius:3px;background:var(--surface-3)}
.an .share i{background:var(--viz);border-radius:3px}
.an .reach .share{height:6px;border-radius:3px}
.an .tstats{gap:16px;margin-bottom:16px}
.an .tstats .muted{font-size:12.5px;color:var(--text-secondary)}
.an .tstats b{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.an .tbuckets{height:112px;gap:12px}
.an .tbuckets>div{gap:0}
.an .tbuckets i{width:min(60%,40px);background:var(--viz);border-radius:3px 3px 0 0;margin-bottom:8px}
.an .tbuckets span{font-size:11.5px;color:var(--text-muted);line-height:1.4}
.an .tbuckets em{font-size:12.5px;font-weight:600;line-height:1.4}
.an .tbuckets em small{font-size:11.5px;font-weight:500}

/* Visitors and Clarity tables: title row, calm header, aligned numbers. */
.an .thead-title{padding:16px 16px 12px;gap:10px;align-items:baseline}
.an .thead-title>.muted{font-size:12.5px}
.an .clbox .thead-title{align-items:center}
.an table.data th{height:36px;padding:0 12px;background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:12px;font-weight:500;color:var(--text-muted)}
.an table.data th:first-child,.an table.data td:first-child{padding-left:16px}.an table.data th:last-child,.an table.data td:last-child{padding-right:16px}
.an table.data td{padding:10px 12px;border-bottom:1px solid var(--border);font-size:13px}
.an .card.flush>.tscroll:first-child th:first-child{border-top-left-radius:0}
.an .vtable td{vertical-align:top;line-height:1.4}
.an .vtable td .muted{font-size:12px;margin-top:2px}
.an .vtable td.num{font-weight:600}
.an .vwhen{font-weight:500}
.an .vtable td a{color:var(--text);font-weight:500}
.an .vtable td a:hover{color:var(--primary)}
.an .srcname{font-weight:500}
.an .codechip{font-size:11.5px;padding:0 5px;border-radius:4px;line-height:18px}
.an .vscroll{min-width:128px;gap:10px;height:20px}
.an .vscroll span{font-size:12px;width:34px;text-align:right}
.an .vclick{height:20px;padding:0 7px;margin:0 4px 3px 0;border-radius:4px;font-size:11.5px;font-weight:500}
.an .vtable .pill{height:18px;padding:0 6px;border-radius:4px;font-size:11px;font-weight:500}
.an .vmore{padding:10px 16px}
.an .clsig{border-bottom:0}
.an .clsig>div{padding:14px 16px;gap:2px}
.an .clsig b{font-size:20px;font-weight:600;letter-spacing:-.02em}
.an .clwhy{height:20px;border-radius:4px;font-size:11.5px;font-weight:500}
.an .clempty{padding:14px 16px}

/* Details dialog. */
.dlg.details{padding:20px 20px 16px;border-radius:14px}
.dlg.details h2{font-size:16px;font-weight:600}
.dlg.details .search input{height:34px;border-radius:var(--r-sm);font-size:13px;padding-left:32px}
.dlg.details .search .ic{left:11px;top:10px}
.dlg.details .dscroll{border-radius:var(--r-md)}
.dlg.details table.data th{height:36px;padding:0 12px;background:var(--surface-2);font-size:12px;font-weight:500;color:var(--text-muted)}
.dlg.details table.data th .th{font-weight:500;color:var(--text-muted);margin-left:auto}
.dlg.details table.data th .th.on{color:var(--text);font-weight:600}
.dlg.details table.data td{padding:9px 12px;border-bottom:1px solid var(--border)}
.dlg.details table.data td.num{font-weight:500}
.dlg.details table.data th:first-child,.dlg.details table.data td:first-child{padding-left:14px}
.dlg.details table.data th:last-child,.dlg.details table.data td:last-child{padding-right:14px}

@media (max-width:1100px){.an .kpi2{grid-template-columns:repeat(6,minmax(0,1fr))}.an .kt:nth-child(4){border-left:1px solid var(--border)}.an .kt:nth-child(n+4){border-top:0}.an .dgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .anmain .kt{padding:14px 16px 16px}.anmain .kt b{font-size:22px}.anmain .kt .kl{font-size:12px}}
@media (max-width:1000px){.an .kpi2{grid-template-columns:repeat(3,minmax(0,1fr))}.an .kt:nth-child(4){border-left:0}.an .kt:nth-child(n+4){border-top:1px solid var(--border)}.anmain .kt:first-child,.anmain .kt:last-child{border-radius:0}.anmain .kt:nth-child(1){border-top-left-radius:var(--r-lg)}.anmain .kt:nth-child(3){border-top-right-radius:var(--r-lg)}}
@media (max-width:900px){.an .dgrid{grid-template-columns:minmax(0,1fr)}.an .eng{grid-template-columns:minmax(0,1fr)}.an .eng-col+.eng-col{border-left:0;border-top:1px solid var(--border)}}
@media (max-width:640px){
  .an .kpi2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an .kt{border-left:0!important;border-top:1px solid var(--border)!important}.an .kt:nth-child(-n+2){border-top:0!important}.an .kt:nth-child(even){border-left:1px solid var(--border)!important}
  .anmain .kt:nth-child(3){border-top-right-radius:0}.anmain .kt:nth-child(2){border-top-right-radius:var(--r-lg)}
  .anmain .kt{padding:12px 14px 14px;row-gap:4px}.anmain .kt::after{left:14px;right:14px}.anmain .kt b{font-size:20px}
  .anchart{padding:14px 14px 12px}.an .plot{grid-template-rows:140px auto;column-gap:8px}
  .an .dtabs button{height:28px}
  .an .eng-col{padding:16px}
  .an .reach{grid-template-columns:108px minmax(0,1fr) 36px;gap:10px}.an .reach>span{white-space:nowrap}
  .an .tbuckets{gap:6px}
  .an-head{align-items:center}
}
.drp-pop .drp-foot #drpSel{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dlg.details>.row>.muted{white-space:nowrap}
@media (max-width:640px){.dlg.details{padding:16px 14px 12px;width:calc(100vw - 24px)}.dlg.details>.row{flex-wrap:wrap}.dlg.details>.row>.search{order:5;width:100%!important;flex-basis:100%}}
@media (max-width:640px){.an .xaxis span:first-child{justify-self:start}.an .xaxis span:last-child:not(:first-child){justify-self:end}}

/* Publish form: share links, one header row and fixed columns. */
.shlinks .shl-intro{margin:2px 0 14px;font-size:13px}
.shl-cols,.shlinks .shl-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr) 32px;gap:8px;align-items:center}
.shl-cols{padding:0 0 6px;font-size:12px;font-weight:500;color:var(--text-secondary)}.shl-cols em{font-style:normal;font-weight:400;color:var(--text-muted);margin-left:2px}
.shlinks .shl-row{margin:0;padding:8px 0;border-top:1px solid var(--border)}
.shlinks .shl-row:first-child{border-top:0;padding-top:0}
.shlinks .shl-row>select,.shlinks .shl-row>input{width:100%;min-width:0;height:36px}
.shlinks .shl-row [data-medium]{grid-column:auto}
.shlinks .shl-row [data-medium]:disabled{opacity:1;color:var(--text-secondary);background:var(--surface-2);background-image:none;-webkit-appearance:none;appearance:none;padding-left:12px;cursor:default}
.shlinks .shl-row [data-del]{width:32px;height:32px;display:grid;place-items:center;color:var(--text-muted)}.shlinks .shl-row [data-del]:disabled{visibility:hidden}
.shlinks .shl-row .shortq{grid-column:1/-1;margin-top:2px}
.shlinks .shl-add{margin-top:10px}
@media (max-width:700px){
  .shl-cols{display:none}
  .shlinks .shl-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;padding:12px 0}
  .shlinks .shl-row [data-src]{grid-column:1;grid-row:1}.shlinks .shl-row [data-medium]{grid-column:2;grid-row:1}.shlinks .shl-row [data-del]{grid-column:3;grid-row:1}
  .shlinks .shl-row [data-cid]{grid-column:1;grid-row:2}.shlinks .shl-row [data-label]{grid-column:2/4;grid-row:2}
  .shlinks .shl-row [data-cid]::placeholder{color:var(--text-muted)}
}

/* Sources: one table, a column per fact; a stacked card per source on narrow screens. */
.srcpage{display:flex;flex-direction:column;gap:12px}.srcpage>.card{margin:0}
.src-lede{margin:0;font-size:13px;line-height:1.5;color:var(--text-secondary)}
table.srct th{height:40px;padding:0 12px;border-bottom:1px solid var(--border)}
table.srct td{height:52px;padding:8px 12px;font-size:13px;color:var(--text-secondary);max-width:none;border-bottom:1px solid var(--border)}
table.srct th:first-child,table.srct td:first-child{padding-left:16px}table.srct th:last-child,table.srct td:last-child{padding-right:10px}
.srct .c-name .srccell{display:flex;gap:10px}.srct .c-name b{font-size:13.5px;font-weight:600;color:var(--text)}
.src-id{font-size:12.5px;color:var(--text);font-variant-numeric:tabular-nums}
.src-meds{display:flex;flex-wrap:wrap;gap:4px;vertical-align:middle}
.src-med{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border-radius:6px;background:var(--surface-3);color:var(--text);font-size:12px;font-weight:500;line-height:1}
.src-med i{font-style:normal;font-size:11px;color:var(--text-muted);position:relative;top:.5px}
.srct .c-med{white-space:normal}
.srct .c-rule b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.src-short{display:flex;align-items:center;gap:6px;color:var(--text)}.src-short .ic{color:var(--text-muted)}
table.srct td.num{font-weight:600;color:var(--text)}table.srct td.num .nil{font-weight:500}
.srct .m-only{display:none}
.srct .c-edit{width:1%;text-align:right}
.srct .c-edit button{width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-muted)}
.srct tbody tr:hover .c-edit button{color:var(--text)}
.src-how{padding:0}
.src-how summary{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px 0 16px;list-style:none;cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary)}
.src-how summary::-webkit-details-marker{display:none}
.src-how summary:hover{color:var(--text)}
.src-how summary .ic{color:var(--text-muted)}.src-how summary .ic:last-child{margin-left:auto;transition:transform .15s}
.src-how[open] summary .ic:last-child{transform:rotate(180deg)}
.src-how ol{margin:0;padding:12px 16px 14px 39px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;color:var(--text-secondary)}
.src-how li::marker{color:var(--text-muted);font-variant-numeric:tabular-nums}
@media (max-width:900px){
  .srct,.srct tbody{display:block}table.srct thead{display:none}
  .srct tr{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;padding:12px 8px 14px 16px;border-bottom:1px solid var(--border)}
  .srct tr:last-child{border-bottom:0}
  .srct tbody tr:hover td{background:none}
  table.srct td,table.srct td:first-child,table.srct td:last-child{display:block;height:auto;padding:0;border:0;white-space:normal;overflow:visible;text-align:left}
  .srct .c-name{grid-column:1/4;grid-row:1}
  .srct .c-edit{grid-column:4;grid-row:1/3;width:auto}
  .srct .c-pages,.srct .c-visits{grid-row:2;margin-top:2px;font-size:12.5px;font-weight:500;color:var(--text-secondary)}
  .srct .c-pages{grid-column:1;padding-left:28px}
  .srct .c-visits{grid-column:2}.srct .c-visits:before{content:"·";margin:0 6px;color:var(--text-muted)}
  .srct .m-only{display:inline;font-weight:500;color:var(--text-muted)}
  table.srct td[data-l]{grid-column:1/-1;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;min-height:22px;margin-top:6px}
  table.srct td.c-src{margin-top:12px}
  table.srct td[data-l]:before{content:attr(data-l);font-size:12px;color:var(--text-muted)}
  .srct .c-short.off{display:none}
}

/* ---------- Analytics, review fixes: funnel first, variable key numbers, trends per row, domain heat, when visits arrive ---------- */
.an-note{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12.5px;color:var(--text-secondary)}.an-note svg{color:var(--text-muted)}.an-note b{font-weight:600;color:var(--text)}
.an .anfbar+.an-note{margin-top:8px}
/* Funnel: steps left to right, each with its rate from the step before and a thin bar against all visits. */
.an .funnel{display:flex;align-items:stretch;gap:0;padding:0}
.fstep{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:14px 16px 14px}
.fstep .fl{font-size:12.5px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
.fstep b{font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2}
.fstep .fr{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fstep .fr em{font-style:normal;font-weight:600;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.fstep .farr{color:var(--warn)}
.fbar{display:block;height:4px;margin-top:6px;border-radius:2px;background:var(--surface-3);overflow:hidden}.fbar i{display:block;height:100%;background:var(--viz);border-radius:2px}
.farrow{display:flex;align-items:center;color:var(--border-strong);flex:none}.farrow svg{transform:rotate(-90deg)}
.fnote{align-self:center;flex:none;margin:0 16px 0 8px;padding:0 9px;height:24px;display:inline-flex;align-items:center;border:1px dashed var(--border-strong);border-radius:6px;font-size:12px;color:var(--text-muted);white-space:nowrap;cursor:help}
/* Key numbers: as many columns as there are numbers; hairlines from the gap, so any count lays out cleanly. */
.an .anmain .kpi2{grid-template-columns:repeat(var(--k,6),minmax(0,1fr));gap:1px;background:var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.an .anmain .kt{border:0!important;background:var(--surface);border-radius:0!important}
.an .anmain .kt:hover{background:var(--surface-2)}
.an .anmain .kt .kl{text-decoration:underline dotted var(--border-strong);text-underline-offset:3px;justify-self:start}
.an .dl.none{color:var(--text-muted);font-weight:400}
/* Chart: legend, previous period dashed, unfinished bucket hatched, version ticks. */
.an .chart-head{flex-wrap:wrap;row-gap:6px}
.an .legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;color:var(--text-muted)}
.an .lg{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.lg-prev{width:16px;height:0;border-top:1.5px dashed var(--text-muted)}
.lg-part{width:10px;height:10px;border-radius:2px;background:repeating-linear-gradient(135deg,var(--viz) 0 2px,var(--viz-soft-2) 2px 4px)}
.lg-ver{width:7px;height:7px;border-radius:50%;background:var(--surface);border:1.5px solid var(--text-secondary)}
.an .bars2 .col.partial i.v.one,.an .bars2 .col.arriving i.v.one{background:repeating-linear-gradient(135deg,var(--viz) 0 3px,var(--viz-soft-2) 3px 6px)}
.an .bars2 .col.partial.on i.v.one,.an .bars2 .col.arriving.on i.v.one,.an .bars2 .col.partial:focus-visible i.v.one{background:repeating-linear-gradient(135deg,var(--viz-strong) 0 3px,var(--viz-soft-2) 3px 6px)}
.an .bars2 .col:focus-visible{outline:2px solid var(--primary);outline-offset:-2px;background:var(--surface-2)}
.an .bars2 .col:focus-visible i.v.one{background:var(--viz-strong)}
.prevline{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.prevline polyline{fill:none;stroke:var(--text-secondary);stroke-width:1.25;stroke-dasharray:4 3;vector-effect:non-scaling-stroke;opacity:.75}
.vtk{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed var(--border-strong);z-index:3;cursor:default}
.vtk b{position:absolute;top:-4px;left:-4.5px;width:8px;height:8px;border-radius:50%;background:var(--surface);border:1.5px solid var(--text-secondary)}
.vtk:hover b,.vtk:focus-visible b{background:var(--text-secondary)}.vtk:focus-visible{outline:none}
.vtk::after{content:"";position:absolute;top:-8px;bottom:0;left:-7px;width:14px}
/* Breakdown rows: label and bar | trend | number | rate | change, in fixed columns. */
.an .dgrid>.span2{grid-column:1/-1}
.an .dcols{display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:8px;padding:6px 16px 4px}
.an .dcols>span:last-child{padding-right:0}
.an .dcols .dch{text-align:right;white-space:nowrap}
.an .dr{grid-template-columns:minmax(0,1fr) 56px 50px 44px 44px;column-gap:8px;padding-right:8px}
.an .dr.tall{height:44px}.an .dr.tall .dbar{height:40px}
.an .dr .dn{display:block;padding:0;text-align:right}
.spk{display:block;width:56px;height:18px;overflow:visible}.spk polyline{fill:none;stroke:var(--viz);stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}.spk polyline.part{stroke-dasharray:2 2;opacity:.7}
.an .dr:hover .spk polyline{stroke:var(--viz-strong)}
.rt{font-size:12px;font-weight:500;color:var(--text-secondary);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rt.few{color:var(--text-muted);opacity:.75;text-decoration:underline dotted var(--border-strong);text-underline-offset:3px}
.rt small{font-size:11px;font-weight:500;color:var(--text-muted);margin-left:2px}
.rdl{font-size:11.5px;font-weight:500;color:var(--text-muted);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}.rdl.up{color:var(--success)}.rdl.down{color:var(--danger)}.rdl.none{font-weight:400}
.lab2{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}.lab2>svg,.lab2>.slogo,.lab2>img{flex:none}
.l2{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.l2a{display:flex;align-items:center;gap:6px;min-width:0}.l2a .codechip{flex:none}
.l2b{font-size:11.5px;color:var(--text-muted);font-weight:400}
.dnote{margin:-2px 16px 10px;font-size:12px;color:var(--text-muted)}
/* Domain heat: channel cells banded at 60 / 80 / 100% of the limit. */
.dheat .thead-title{flex-wrap:wrap;row-gap:4px}.dheat .thead-title>.muted{flex:1 1 320px;min-width:0}
.dheat table.data th.mx,.dheat table.data td.mx{text-align:center;white-space:nowrap}
.dheat th.mx .slogo,.dheat th.mx svg,.dheat th.mx img{display:inline-block;vertical-align:-3px;margin-right:5px}
.dheat .dname{font-weight:500}
.hb{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;font-size:12px;font-weight:500;color:var(--text-muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.hb.b60{background:var(--banner);color:var(--text)}.hb.b80{background:var(--warn-soft);color:var(--warn)}.hb.b100{background:var(--danger-soft);color:var(--danger);font-weight:600}
.hlegend{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;padding:12px 16px;border-top:1px solid var(--border);font-size:12px;color:var(--text-muted)}.hlegend>span{display:inline-flex;align-items:center;gap:6px}
/* Versions. */
.vcard td b{font-weight:600}
/* When visits arrive: weekday rows by hour, one blue scale. */
.an .heat{position:relative;padding:0 0 14px}
.hm{display:grid;grid-template-columns:36px repeat(24,minmax(0,1fr));gap:3px;padding:4px 16px 0;align-items:center}
.hm-d{font-size:11.5px;color:var(--text-muted)}
.hm-h{font-size:11px;color:var(--text-muted);padding-top:4px;white-space:nowrap}
.hc{display:block;height:18px;border-radius:3px;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--surface-3)}
.hc.l1{background:color-mix(in srgb,var(--primary) 9%,var(--surface));box-shadow:none}.hc.l2{background:color-mix(in srgb,var(--primary) 20%,var(--surface));box-shadow:none}
.hc.l3{background:color-mix(in srgb,var(--primary) 34%,var(--surface));box-shadow:none}.hc.l4{background:color-mix(in srgb,var(--primary) 50%,var(--surface));box-shadow:none}
.hc.l5{background:color-mix(in srgb,var(--primary) 70%,var(--surface));box-shadow:none}
.hm .hc:hover{outline:2px solid var(--text);outline-offset:-1px}
.hm-legend{display:flex;align-items:center;gap:3px;justify-content:flex-end;padding:10px 16px 0;font-size:11.5px;color:var(--text-muted)}.hm-legend .hc{width:14px;height:10px}.hm-legend span{margin:0 4px}
.an .heat .tip{top:0}
/* Visits: collapsed behind a button; on phones each visit stacks, no sideways scroll. */
.vinspect{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 16px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);box-shadow:none;color:var(--text);font-size:13.5px;font-weight:500;justify-content:flex-start}
.vinspect:hover{background:var(--surface-2)}.vinspect svg{color:var(--text-muted)}.vinspect .muted{font-weight:400;font-size:12.5px}
.vlog .thead-title{align-items:center;flex-wrap:wrap;row-gap:6px}.vlog .thead-title .sm{height:28px}
.an .v-page .muted{font-size:11.5px}
/* Details dialog: a subtitle, a CSV button, labels over two lines. */
.dtl-head{gap:10px;margin-bottom:12px;align-items:center}.dtl-t{display:flex;flex-direction:column;gap:2px;min-width:0}.dtl-t h2{margin:0}.dtl-t .muted{font-size:12.5px}.dtl-t h2 .dtl-n{font-size:12.5px;font-weight:400;margin-left:6px}
.dlg.details .search{width:220px}.dtl-csv{height:34px}
.dlg.details td.dlab{max-width:340px}
.dlg.details .dl{font-size:12px}.dlg.details .dl.fewd{color:var(--text-muted);opacity:.8}
.dtl-foot{margin-top:10px;font-size:12px}
.ov-noconv{justify-content:flex-end}.ov-noconv span{font-size:12px;color:var(--text-muted)}
@media (max-width:1000px){
  .an .anmain .kpi2{grid-template-columns:repeat(3,minmax(0,1fr))}
  .an .anmain .kt:last-child:nth-child(3n+2){grid-column:span 2}.an .anmain .kt:last-child:nth-child(3n+1){grid-column:span 3}
}
@media (max-width:900px){.an .funnel{flex-wrap:wrap}.fstep{flex:1 1 40%}.farrow{display:none}.fnote{margin:0 16px 14px}}
@media (max-width:640px){
  .an .anmain .kpi2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .an .anmain .kt:last-child:nth-child(3n+2),.an .anmain .kt:last-child:nth-child(3n+1){grid-column:auto}.an .anmain .kt:last-child:nth-child(odd){grid-column:span 2}
  .an .funnel{display:grid;grid-template-columns:1fr 1fr}.fstep{padding:12px 14px}.fstep b{font-size:18px}.fnote{grid-column:1/-1;justify-self:start;margin:0 14px 12px}
  .an .dr{grid-template-columns:minmax(0,1fr) 46px 40px 40px;column-gap:6px}.an .dr .spk{display:none}
  .an .dcols{grid-template-columns:minmax(0,1fr) 40px;column-gap:6px}
  .hm{grid-template-columns:28px repeat(24,minmax(0,1fr));gap:2px;padding:4px 12px 0}.hc{height:14px;border-radius:2px}.hm-d{font-size:10.5px}.hm-h{font-size:10px}
  .an .vscrollx{overflow:visible}
  .an .vtable,.an .vtable tbody{display:block}.an .vtable thead{display:none}
  .an .vtable tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 16px;border-bottom:1px solid var(--border)}
  .an .vtable td{display:block;padding:0!important;border:0!important;min-width:0;max-width:none!important}
  .an .vtable .v-when{order:1}.an .vtable .v-time{order:2;align-self:start}.an .vtable .v-page{order:3;grid-column:1/-1}.an .vtable .v-from{order:4;grid-column:1/-1}
  .an .vtable .v-dev{order:5}.an .vtable .v-country{order:6;text-align:right}.an .vtable .v-scroll{order:7;grid-column:1/-1}.an .vtable .v-clicks{order:8;grid-column:1/-1}
  .an .vtable .vscroll{min-width:0}
  .dlg.details .search{width:auto}
}

/* Settings, Tracking. */
.trackpage{max-width:760px}.trk-intro{margin:0 0 14px;font-size:13px}
.clcard .trk-wide{grid-column:1/-1}.clcard .l em{font-style:normal;font-weight:400;color:var(--text-muted);margin-left:4px}
.trk-hint{display:block;margin-top:5px;font-size:12px;color:var(--text-muted)}
.clcard input,.toast{font-feature-settings:"calt" 0;font-variant-ligatures:none}
/* Domain heat keeps the domain in view while its channels scroll on narrow screens; versions drop two columns on phones. */
.dheat table.data th:first-child,.dheat table.data td:first-child{position:sticky;left:0;z-index:1;background:var(--surface)}.dheat table.data th:first-child{background:var(--surface-2)}
@media (max-width:640px){.vcard .vpub,.vcard .vmed{display:none}.dheat .thead-title>.muted{flex-basis:100%}}
@media (max-width:640px){.vinspect .muted{display:none}}
@media (max-width:600px){.subnav{padding:0 6px}.subnav a{padding:0 8px;font-size:13.5px}.subnav a .ic{display:none}}
.clrec-note{display:flex;align-items:center;gap:6px;padding:10px 16px 14px;font-size:12.5px}

/* Page overview: the live page as one card. */
.livecard{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);overflow:hidden}
.lc-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:14px 16px 0}
.lc-live{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:6px;background:var(--success-soft);color:var(--success);font-size:12px;font-weight:600}
.lc-live i{width:6px;height:6px;border-radius:50%;background:currentColor}
.lc-tag{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary);white-space:nowrap}
.lc-tag.ok{color:var(--success)}.lc-tag.bad{color:var(--danger);border-color:var(--danger-soft-border,var(--border))}
.lc-url{display:block;padding:10px 16px 16px;text-decoration:none;line-height:1.3}
.lc-host{display:block;font-size:13px;font-weight:500;color:var(--text-secondary)}
.lc-path{display:block;margin-top:2px;font-size:19px;font-weight:700;letter-spacing:-.015em;color:var(--text);overflow-wrap:anywhere}
.lc-url:hover .lc-path{color:var(--primary)}
.lc-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface-2)}
.lc-facts>div{padding:10px 16px;min-width:0}.lc-facts>div+div{border-left:1px solid var(--border)}
.lc-facts dt{font-size:11.5px;color:var(--text-muted)}
.lc-facts dd{margin:3px 0 0;font-size:14px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lc-actions{display:flex;align-items:center;gap:8px;padding:12px 12px 12px 16px}.lc-actions .spacer{flex:1}.lc-actions .menu{right:0;left:auto}
.lc-actions .btnlike{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:500;text-decoration:none}
.lc-actions .btnlike:hover{border-color:var(--border-strong)}
.lc-actions button.dark{border-radius:var(--r-sm);padding:0 10px}.lc-tag.bad{border-color:var(--danger-soft)}
@media (max-width:420px){.lc-actions{gap:6px}.lc-actions>button,.lc-actions>.btnlike{padding:0 9px}.lc-actions>.btnlike .ic,.lc-actions>#undo .ic{display:none}}
@media (max-width:760px){.lc-actions .btnlike{height:36px}}

/* Analytics: busiest day of the week: the answer on the left, the seven days as rows on the right. */
.an .wd{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);gap:0;padding:0}
.wd-side{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px 20px;border-right:1px solid var(--border)}
.wd-eb{margin-bottom:8px}
.wd-day{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--text)}
.wd-say{font-size:13px;color:var(--text-secondary)}
.wd-lift{font-size:13px;font-weight:500;color:var(--success)}
.wd .wd-seg{margin-top:14px}.wd .wd-seg button{height:26px;padding:0 10px;font-size:12px}
.wd-note{margin-top:8px;font-size:11.5px;color:var(--text-muted)}
.wd-list{padding:12px 20px 14px}
.wd-hd,.wd-row{display:grid;grid-template-columns:40px minmax(0,1fr) 84px 72px;gap:14px;align-items:center}
.wd-hd{padding-bottom:6px;font-size:11.5px;color:var(--text-muted)}.wd-hd span:nth-child(n+3){text-align:right}
.wd-row{height:32px;padding:0 6px;margin:0 -6px;border-radius:var(--r-sm);outline:0;cursor:default}
.wd-row:hover,.wd-row:focus-visible{background:var(--surface-2)}
.wd-d{font-size:13px;font-weight:500;color:var(--text-secondary)}
.wd-track{height:10px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.wd-track i{display:block;height:100%;border-radius:3px;background:color-mix(in srgb,var(--primary) 35%,var(--surface))}
.wd-row b{text-align:right;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums}
.wd-cr{text-align:right;font-size:12.5px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.wd-row.best .wd-d,.wd-row.best b{color:var(--text);font-weight:700}.wd-row.best .wd-track i{background:var(--primary)}
.an .wd .tip{top:0}
@media (max-width:760px){.an .wd{grid-template-columns:minmax(0,1fr)}.wd-side{border-right:0;border-bottom:1px solid var(--border);padding:16px}.wd-list{padding:12px 16px}.wd-hd,.wd-row{grid-template-columns:34px minmax(0,1fr) 64px 60px;gap:10px}}

/* Settings, Tracking: one integration as a settings panel. */
.trackpage{max-width:880px}.trk-intro{margin:0 0 16px;font-size:13px;color:var(--text-secondary)}
.trk-top{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border)}
.trk-ico{width:40px;height:40px;flex:none;display:grid;place-items:center;border:1px solid var(--border);border-radius:var(--r-md);color:var(--primary);background:var(--surface-2)}
.trk-t{min-width:0;flex:1}.trk-name{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px;font-weight:600}.trk-sub{margin-top:2px;font-size:13px;color:var(--text-secondary)}
.trk-badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid var(--border);border-radius:6px;font-size:12px;font-weight:500;color:var(--text-secondary)}
.trk-badge.ok{border-color:transparent;background:var(--success-soft);color:var(--success);font-weight:600}.trk-badge.ok i{width:6px;height:6px;border-radius:50%;background:currentColor}
.trk-badge.bad{border-color:var(--danger-soft);color:var(--danger)}
.trk-open{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text);font-size:12.5px;font-weight:500;text-decoration:none;white-space:nowrap}.trk-open:hover{border-color:var(--border-strong)}
.trk-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:24px;align-items:start;padding:16px 20px;border-bottom:1px solid var(--border)}
.trk-l{font-size:13.5px;font-weight:600;color:var(--text)}.trk-l em{font-style:normal;font-weight:400;color:var(--text-muted);margin-left:4px}
.trk-h{margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--text-muted)}
.trk-f input,.trk-f select{width:100%;height:36px}
.trk input{font-feature-settings:"calt" 0;font-variant-ligatures:none}
.trk-foot{display:flex;align-items:center;gap:8px;padding:12px 20px;background:var(--surface-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.trk-pull{font-size:12.5px;color:var(--text-secondary)}.trk-pull .bad{color:var(--danger)}
@media (max-width:700px){.trk-top{flex-wrap:wrap;padding:14px 16px}.trk-open{order:3;margin-left:52px}.trk-row{grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 16px}.trk-foot{flex-wrap:wrap;padding:12px 16px}.trk-pull{flex-basis:100%}}
@media (max-width:700px){.trk-t{flex:1 1 calc(100% - 52px)}}

/* Chat: end-of-task cards say what happened, what's next, and keep the technical reason folded away. */
.qcard.outcome .oc-say{font-size:14px;line-height:1.5;color:var(--text)}
.qcard.outcome .oc-next{margin-top:8px;font-size:13px;color:var(--text-secondary)}
.qcard.outcome .pill.warn{background:var(--warn-soft);color:var(--warn)}
.oc-detail{margin-top:10px;font-size:12px;color:var(--text-muted)}.oc-detail summary{cursor:pointer;width:max-content}.oc-detail div{margin-top:6px;padding:8px 10px;border-radius:var(--r-sm);background:var(--surface-2);overflow-wrap:anywhere}
.an .funnel:has(.fnote.arriving){flex-wrap:wrap}.fnote.arriving{flex:1 0 100%;height:auto;margin:-4px 16px 12px;padding:0;border:0;color:var(--warn);font-size:12px}
.fnote.arriving{text-align:right;justify-content:flex-end}@media (max-width:640px){.fnote.arriving{text-align:left;justify-content:flex-start}}

/* Affiliates: name first with the ID beside it; under an ID field, whose it is or that it is unknown. */
.affcell{display:inline-flex;align-items:baseline;gap:6px;min-width:0}.affcell .muted{font-size:12px;white-space:nowrap}
.aff-note{display:block;font-size:12px;margin-top:2px;color:var(--text-muted)}.aff-note.ok{color:var(--success)}.aff-note.warn{color:var(--warn)}
.shlinks .shl-row .aff-note{grid-column:3/5;margin-top:-2px}
@media (max-width:700px){.shlinks .shl-row .aff-note{grid-column:1/-1}}
.fstep b .fmoney{margin-left:8px;font-size:13px;font-weight:600;color:var(--success);font-variant-numeric:tabular-nums}
.trk-conv{margin-top:16px}.trk-stat{display:flex;align-items:center;gap:6px;height:36px;font-size:13px;color:var(--text-secondary)}.trk-stat .ic{color:var(--success)}