/*
 * Painel Uma Música: the look of mockup 06 "No bolso" (admin/mockups/06-no-bolso.html).
 * A phone app first (floating plum tab bar, bottom sheets); from 1024px the tab bar becomes a left rail and the
 * sheets a right drawer. Tokens, type, cards, tab bar/rail, sheet and the login screen are copied from the mockup.
 */
:root{
  color-scheme: light;
  /* palette */
  --bg:#F1ECFF; --bg-deep:#E6DCFF; --surface:#FFFFFF; --surface-2:#F8F5FF; --surface-3:#F3EEFF;
  --ink:#2B1846; --ink-2:#6B5A86; --ink-3:#9C8EB5; --on-ink:#FFFFFF; --on-ink-2:#CFC2EA;
  --line:#ECE5F9; --line-2:#DCD1F2;
  --accent:#FF8A3D; --accent-press:#F2742A; --accent-ink:#A8460A; --accent-soft:#FFE4D0; --accent-tint:#FFF4EB;
  --good:#2FB67C; --good-ink:#13704A; --good-soft:#DCF4E8;
  --warn:#F5B700; --warn-ink:#7A5A00; --warn-soft:#FFF1C2;
  --crit:#E5484D; --crit-ink:#B0242A; --crit-soft:#FDE2E3;
  --info-ink:#4F3B94; --info-soft:#ECE6FF;
  /* entity colors (an entity keeps its color everywhere) */
  --s-revenue:#FF8A3D; --s-profit:#E2600F; --s-spend:#2B1846; --s-sales:#7A4FE0; --s-convs:#3A8DDE;
  --c-ads:#2B1846; --c-tax:#4A3768; --c-wa:#6B5A86; --c-pix:#8B7AAB; --c-ai:#A28DD6; --c-suno:#D3C6F3;
  --heat-0:#F4F0FC; --heat-1:#DCEBFB; --heat-2:#AFD2F4; --heat-3:#72AEEA; --heat-4:#3A8DDE; --heat-5:#1E5A99;
  /* type */
  --f-display:"Sora","Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-body:"Nunito Sans","Avenir","Segoe UI",system-ui,-apple-system,sans-serif;
  /* shape + depth */
  --r-xl:28px; --r-lg:22px; --r-md:16px; --r-sm:12px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(58,28,110,.05),0 10px 26px -12px rgba(76,40,150,.26);
  --shadow-2:0 2px 6px rgba(58,28,110,.06),0 24px 48px -18px rgba(76,40,150,.42);
  --shadow-accent:0 12px 22px -10px rgba(255,138,61,.75);
  --gl:max(16px, env(safe-area-inset-left, 0px)); --gr:max(16px, env(safe-area-inset-right, 0px));
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-spring:cubic-bezier(.3,1.3,.4,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.45 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100dvh}
body.sheet-open,body.chat-open{overflow:hidden}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{cursor:default}
img{display:block}
.num{font-family:var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:16px;height:16px}
.ico.xs{width:13px;height:13px;stroke-width:2.4}

/* first paint, before the first screen renders */
.boot{min-height:100dvh;display:grid;place-items:center}
.boot img{width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 6px var(--surface);animation:breathe 1.4s var(--ease-out) infinite alternate}
@keyframes breathe{from{transform:scale(.92);opacity:.7}to{transform:none;opacity:1}}

/* ---------- app frame ---------- */
.app{min-height:100dvh}
.main{min-width:0}
.screen{padding:calc(10px + env(safe-area-inset-top,0px)) var(--gr) calc(112px + env(safe-area-inset-bottom,0px)) var(--gl)}
.wrap{max-width:1200px;margin:0 auto}
.rail{display:none}

.appbar{display:flex;align-items:center;gap:8px;min-height:56px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font:700 15px var(--f-display);letter-spacing:-.02em;margin-right:auto;min-height:48px;white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:50%;box-shadow:0 0 0 3px var(--surface)}
.avatar-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--ink);font:800 18px var(--f-display);text-decoration:none;box-shadow:var(--shadow-accent);flex:none}
.hello{padding:6px 0 16px}
.hello h1{font-size:clamp(28px,7.6vw,40px);font-weight:700}
.hello p{margin-top:6px;color:var(--ink-2);font-weight:600;font-size:14.5px}
.hello .hl{color:var(--accent-ink)}

/* tab bar (phone) */
.tabbar{position:fixed;z-index:40;left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px));bottom:calc(10px + env(safe-area-inset-bottom,0px));display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;background:var(--ink);border-radius:28px;box-shadow:0 18px 34px -12px rgba(43,24,70,.6)}
.tab{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:60px;border:0;background:none;border-radius:22px;color:var(--on-ink-2);text-decoration:none;font:700 11.5px var(--f-body);letter-spacing:.01em}
.tab-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tab-ico{display:grid;place-items:center;width:52px;height:30px;border-radius:var(--r-pill);transition:background .25s var(--ease-out),transform .25s var(--ease-spring)}
.tab[aria-current="page"]{color:var(--on-ink)}
.tab[aria-current="page"] .tab-ico{background:var(--accent);color:var(--ink);transform:translateY(-1px)}
.tab-badge{position:absolute;top:5px;left:calc(50% + 10px);min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--on-ink);color:var(--ink);font:800 11px/20px var(--f-display);text-align:center;box-shadow:0 0 0 2px var(--ink)}

/* ---------- shared controls ---------- */
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);padding:5px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-1);min-height:58px}
.seg-thumb{position:absolute;top:5px;bottom:5px;left:5px;width:calc((100% - 10px)/3);border-radius:var(--r-pill);background:var(--ink);transform:translateX(calc(var(--i,1)*100%));transition:transform .4s var(--ease-spring)}
.seg button{position:relative;z-index:1;border:0;background:none;border-radius:var(--r-pill);min-height:48px;font:700 15px var(--f-display);color:var(--ink-2);transition:color .25s}
.seg button[aria-checked="true"]{color:var(--on-ink)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 4px;margin:0 -2px}
.chips::-webkit-scrollbar{display:none}
.chip{--c:var(--ink);display:inline-flex;align-items:center;gap:8px;flex:none;min-height:48px;padding:0 16px;border-radius:var(--r-pill);border:2px solid var(--line-2);background:var(--surface);font:700 14px var(--f-body);color:var(--ink);white-space:nowrap;transition:background .2s,border-color .2s}
.chip .cdot{width:10px;height:10px;border-radius:50%;background:var(--c)}
.chip[aria-selected="true"],.chip[aria-pressed="true"]{border-color:var(--c);background:color-mix(in srgb,var(--c) 13%,var(--surface))}
.chip .count{font:700 12px var(--f-display);color:var(--ink-2)}
.btn-wide{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:56px;border-radius:20px;border:2px solid var(--ink);background:var(--surface);font:700 16px var(--f-display);color:var(--ink);text-decoration:none}
.btn-wide:active{transform:scale(.985)}
.btn-mini{min-height:40px;padding:0 16px;border-radius:var(--r-pill);border:0;background:var(--ink);color:var(--on-ink);font:700 13px var(--f-body)}
.link-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 4px;border:0;background:none;color:var(--accent-ink);font:800 14px var(--f-body);text-decoration:none}
.btn-soft{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:2px solid var(--line-2);background:var(--surface);color:var(--ink);font:700 13.5px var(--f-body);white-space:nowrap;transition:border-color .2s,background .2s}
.btn-soft:hover{border-color:var(--ink-3)}
.btn-soft.danger{color:var(--crit-ink);border-color:color-mix(in srgb,var(--crit) 30%,var(--surface))}
.btn-soft.danger:hover{border-color:var(--crit)}
.btn-add{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:44px;padding:0 16px 0 12px;border:0;border-radius:var(--r-pill);background:var(--accent);color:var(--ink);font:800 14px var(--f-display);box-shadow:var(--shadow-accent)}
.btn-add:hover{background:var(--accent-press)}
.icon-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1);flex:none}
button[aria-busy="true"]{opacity:.7;pointer-events:none}

.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-pill);font:700 12px/1.3 var(--f-body);white-space:nowrap}
.pill .pdot{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.good{background:var(--good-soft);color:var(--good-ink)}
.pill.warning{background:var(--warn-soft);color:var(--warn-ink)}
.pill.critical{background:var(--crit-soft);color:var(--crit-ink)}
.pill.info{background:var(--info-soft);color:var(--info-ink)}
.pill.neutral{background:var(--surface-3);color:var(--ink-2)}

.delta{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:var(--r-pill);font:700 12.5px var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.delta.good{background:var(--good-soft);color:var(--good-ink)}
.delta.bad{background:var(--crit-soft);color:var(--crit-ink)}
.delta.flat{background:var(--surface-3);color:var(--ink-2)}
.delta .arr{font-size:9px}

/* "?" next to a number or an acronym: helpButton() in js/ui.js opens its explanation */
.help-btn{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;border:2px solid var(--line-2);background:var(--surface);color:var(--ink-2);font:800 14px var(--f-display);flex:none;vertical-align:middle}
.help-btn::after{content:"";position:absolute;inset:-8px}
.help-card{display:flex;flex-direction:column;gap:16px;font:600 16px/1.5 var(--f-body)}
.help-card .btn-mini{align-self:flex-start}

/* ---------- cards ---------- */
.card{position:relative;background:var(--surface);border-radius:var(--r-xl);padding:20px 18px;box-shadow:var(--shadow-1);min-width:0}
.card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.card-head h2{font-size:18px;font-weight:700}
.card-sub{color:var(--ink-2);font-size:13.5px;font-weight:600;margin-top:3px}
.ch-tile{display:grid;place-items:center;width:42px;height:42px;border-radius:15px;background:var(--surface-3);color:var(--ink);flex:none}
.card-head .grow{flex:1;min-width:0}
.rise{animation:rise .55s var(--ease-out) both;animation-delay:calc(var(--k,0)*55ms)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.empty{padding:28px 16px;text-align:center;color:var(--ink-2);font-weight:600;background:var(--surface);border-radius:24px}

/* ---------- screens of numbers (Visão geral, Campanhas): states and notices ---------- */
/* a quiet redraw puts the scroll back itself (keepingState); the browser's scroll anchoring would nudge it again */
.numbers{overflow-anchor:none}
.numbers[aria-busy="true"] [data-body]{opacity:.62;transition:opacity .2s}
/* an automatic refresh redraws without replaying the entrance animations */
.numbers[data-quiet] *{animation:none!important}
.numbers[data-quiet] .chart .line.draw{stroke-dasharray:none}
.load-state{display:flex;flex-direction:column;align-items:flex-start;gap:12px;color:var(--ink-2);font-weight:600}
.empty-note{margin:0}
.sync-line{display:flex;align-items:center;gap:6px;margin-top:4px;color:var(--ink-2);font-size:13px;font-weight:600}
.notice{display:flex;align-items:center;gap:12px;margin:0 0 14px;padding:8px 16px 8px 8px;border-radius:20px;font:700 14.5px/1.3 var(--f-body)}
.notice .ni{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;flex:none}
.notice small{display:block;font-weight:600;font-size:12.5px;opacity:.9;margin-top:1px}
.notice.info{background:var(--info-soft);color:var(--info-ink)}
.notice.info .ni{background:var(--surface);color:var(--info-ink)}
.notice.warn{background:var(--warn-soft);color:var(--warn-ink)}
.notice.warn .ni{background:var(--warn);color:var(--ink)}
.notice.compact{margin-bottom:12px}
.alert-pill{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;margin:0 0 14px;padding:8px 14px 8px 8px;border:0;border-radius:20px;background:var(--warn-soft);color:var(--warn-ink);text-align:left;text-decoration:none;font:700 14.5px/1.3 var(--f-body)}
.alert-pill .ai{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--warn);color:var(--ink);flex:none}
.alert-pill .at{flex:1}
.alert-pill small{display:block;font-weight:600;font-size:12.5px;opacity:.85}

/* ---------- KPI carousel ---------- */
.ov-head .seg{margin-bottom:14px}
.kpi-zone{margin-top:4px}
.carousel{position:relative;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(-1*var(--gr)) 0 calc(-1*var(--gl));padding:6px var(--gr) 18px var(--gl);scroll-padding:0 var(--gr) 0 var(--gl);overscroll-behavior-x:contain}
.carousel::-webkit-scrollbar{display:none}
.kpi{position:relative;flex:0 0 82%;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-height:212px;padding:20px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-1);overflow:hidden}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px}
.kpi-label{font:700 14px var(--f-body);color:var(--ink-2)}
.kpi-value{white-space:nowrap;font:800 34px/1.05 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.035em;color:var(--ink)}
.kpi-value small{font-size:.55em;letter-spacing:-.01em;font-weight:700;opacity:.75}
.kpi-value .unit{font-size:.45em;font-weight:700;color:var(--ink-2);letter-spacing:0;margin-left:4px}
.kpi-delta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;font-weight:600;color:var(--ink-2)}
.kpi-note{font-size:13px;font-weight:600;color:var(--ink-2);margin-top:auto}
.kpi-note b{color:var(--ink)}
.kpi-spark{margin-top:auto;height:46px;min-width:0}
.kpi-spark svg{display:block}
.kpi-hero{flex-basis:88%;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-2)}
.kpi-hero::before{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:var(--accent);opacity:.16;right:-95px;top:-115px}
.kpi-hero::after{content:"";position:absolute;width:96px;height:96px;border-radius:50%;border:14px solid var(--accent);opacity:.22;right:-30px;top:-34px}
.kpi-hero > *{position:relative;z-index:1}
.kpi-hero .kpi-label{color:var(--on-ink-2)}
.kpi-hero .kpi-value{color:var(--on-ink);font-size:40px}
.kpi-hero .help-btn{background:transparent;border-color:rgba(255,255,255,.28);color:var(--on-ink)}
.kpi-hero .kpi-delta{color:var(--on-ink-2)}
.kpi-hero .delta.good{background:rgba(47,182,124,.22);color:#8BE7BD}
.kpi-hero .delta.bad{background:rgba(229,72,77,.24);color:#FFA7AA}
.kpi-hero .delta.flat{background:rgba(255,255,255,.12);color:var(--on-ink-2)}
.kpi-foot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);font-size:13px;font-weight:600;color:var(--on-ink-2)}
.kpi-foot strong{color:var(--on-ink);font:700 15px var(--f-display);font-variant-numeric:tabular-nums}
.kpi-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ring-wrap{position:relative;width:78px;height:78px;flex:none}
.ring{width:78px;height:78px;display:block}
.ring-txt{position:absolute;inset:0;display:grid;place-content:center;text-align:center;line-height:1}
.ring-txt b{font:800 17px var(--f-display);font-variant-numeric:tabular-nums}
.ring-txt span{font:700 10px var(--f-body);color:var(--ink-2);margin-top:2px}
.vs{display:flex;flex-direction:column;gap:7px;margin-top:auto}
.vs-row{display:grid;grid-template-columns:1fr;gap:3px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.vs-row .vs-l{display:flex;justify-content:space-between;gap:8px}
.vs-row .vs-l b{color:var(--ink);font-family:var(--f-display);font-variant-numeric:tabular-nums}
.vs-track{height:12px;border-radius:6px;background:var(--surface-3);overflow:hidden}
.vs-bar{height:100%;border-radius:6px;transform-origin:left;animation:growx .7s var(--ease-out) both}
@keyframes growx{from{transform:scaleX(0)}to{transform:none}}
.cac-bar{position:relative;height:16px;border-radius:8px;background:color-mix(in srgb,var(--s-revenue) 30%,var(--surface));overflow:hidden}
.cac-bar i{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--s-spend);transform-origin:left;animation:growx .7s var(--ease-out) both}
.cac-legend{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:700;color:var(--ink-2);margin-top:6px}
.cac-legend span{display:inline-flex;align-items:center;gap:5px}
.cac-legend i{width:9px;height:9px;border-radius:3px;display:inline-block}
.cac-legend i.leftover{background:color-mix(in srgb,var(--s-revenue) 30%,#fff)}
.dots{display:flex;justify-content:center;gap:6px;margin:-4px 0 14px}
.dots i{width:7px;height:7px;border-radius:4px;background:var(--line-2);transition:width .3s var(--ease-out),background .3s}
.dots i.on{width:22px;background:var(--accent)}
.more-card{padding:8px}
.more-head{display:flex;align-items:center;justify-content:space-between;padding:8px 10px 6px}
.more-head h2{font-size:15px}
.more-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mini{display:flex;flex-direction:column;gap:4px;padding:12px;border-radius:20px;background:var(--surface-2);min-height:96px;min-width:0}
.mini-l{font:700 12.5px var(--f-body);color:var(--ink-2)}
.mini-v{white-space:nowrap;font:800 21px/1.1 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.mini .delta{align-self:flex-start;font-size:11.5px;padding:2px 8px}

/* ---------- overview cards ---------- */
.cards{display:grid;gap:14px;grid-auto-flow:row dense}
.chart-total{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:14px 0 2px}
.chart-total b{font:800 30px var(--f-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.chart-total span{color:var(--ink-2);font-weight:600;font-size:14px}
.chart-note{font-size:13px;color:var(--ink-2);font-weight:600;margin-top:4px}
.chart-note b{color:var(--ink)}
.chart{margin-top:8px;min-height:200px;touch-action:pan-y}
.chart svg{display:block;overflow:visible}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .base{stroke:var(--line-2);stroke-width:1.5}
.chart .ax{fill:var(--ink-2);font:600 11px var(--f-body);font-variant-numeric:tabular-nums}
.chart .ax.now{fill:var(--accent-ink);font-weight:800}
.chart .unit{font-weight:800;fill:var(--ink-3)}
.chart .dl{fill:var(--ink);font:700 11.5px var(--f-display);font-variant-numeric:tabular-nums}
.chart .bar{transform-box:fill-box;transform-origin:50% 100%;animation:growy .6s var(--ease-out) both;animation-delay:var(--d,0ms)}
.chart .bar.partial{opacity:.5}
@keyframes growy{from{transform:scaleY(0)}to{transform:none}}
.chart .line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .line.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s var(--ease-out) forwards}
.chart .line.dash{stroke-dasharray:4 4}
@keyframes draw{to{stroke-dashoffset:0}}
.chart .col-hl{fill:var(--surface-3);transition:opacity .15s}
.chart .cross{stroke:var(--ink-3);stroke-width:1.5;stroke-dasharray:3 3}
.chart .hover{transition:opacity .15s;pointer-events:none}
.chart svg:focus-visible{outline:3px solid var(--accent);outline-offset:4px;border-radius:12px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--ink-2);margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:16px;height:4px;border-radius:2px;display:inline-block}
.legend i.area{height:10px;border-radius:3px}
.legend i.legend-revenue{background:color-mix(in srgb,var(--s-revenue) 45%,#fff);box-shadow:inset 0 2px 0 var(--s-revenue)}

.tip{position:fixed;left:0;top:0;z-index:90;max-width:240px;padding:10px 12px;border-radius:16px;background:var(--ink);color:var(--on-ink);font:600 13px/1.4 var(--f-body);box-shadow:0 14px 30px -10px rgba(43,24,70,.55);pointer-events:none}
.tip b{display:block;font:700 13px var(--f-display);margin-bottom:3px}
.tip .tl{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tip .tl i{width:9px;height:9px;border-radius:50%;flex:none;box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
.tip strong{font-family:var(--f-display);font-variant-numeric:tabular-nums;margin-left:auto;padding-left:8px}
.tip .tx{color:var(--on-ink-2);white-space:normal}

/* funnel */
.fn{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.fn-row{padding:8px 0;border-radius:14px}
.fn-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;font-weight:700}
.fn-top .num{font-size:15px}
.fn-pct{color:var(--ink-2);font:600 12px var(--f-display);margin-left:6px}
.fn-track{height:14px;margin-top:6px;border-radius:7px;background:var(--surface-3);overflow:hidden}
.fn-bar{height:100%;border-radius:7px;background:var(--c);transform-origin:left;animation:growx .7s var(--ease-out) both}
.fn-drop{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;margin:0 0 0 10px;padding:3px 10px;border-left:2px dashed var(--line-2);font:600 12px var(--f-body);color:var(--ink-2)}
.fn-drop.max{border-radius:0 12px 12px 0;background:var(--accent-tint);color:var(--accent-ink);border-left-color:var(--accent);font-weight:800}

/* heatmap */
.hm{display:grid;grid-template-columns:30px repeat(24,minmax(0,1fr));gap:2px;align-items:center}
.hm-day{font:700 11px var(--f-body);color:var(--ink-2)}
.hm-cell{position:relative;height:15px;border-radius:4px;background:var(--heat-0)}
.hm-cell::after{content:"";position:absolute;inset:-1px}
.hm-cell.peak{box-shadow:0 0 0 2px var(--accent)}
.hm-h{font:600 10px var(--f-body);color:var(--ink-2);white-space:nowrap}
.hm-legend{display:flex;align-items:center;gap:4px;margin-top:12px;font:700 11.5px var(--f-body);color:var(--ink-2)}
.hm-legend i{width:16px;height:12px;border-radius:3px}
.insights{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.insight{display:flex;flex-direction:column;gap:1px;padding:10px 14px;border-radius:18px;background:var(--surface-2);min-width:0;flex:1 1 130px}
.insight small{font:700 11.5px var(--f-body);color:var(--ink-2)}
.insight b{font:700 15px var(--f-display)}

/* bar lists (products, mix) */
.blist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.brow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:8px 6px;border-radius:14px}
.brow:hover{background:var(--surface-2)}
.brow .bn{font-weight:700;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .bv{font:700 14px var(--f-display);font-variant-numeric:tabular-nums;text-align:right}
.brow .bv small{display:block;font:600 11.5px var(--f-body);color:var(--ink-2)}
.brow .bt{grid-column:1/-1;height:10px;border-radius:5px;background:var(--surface-3);overflow:hidden}
.brow .bt i{display:block;height:100%;border-radius:5px;background:var(--c);transform-origin:left;animation:growx .7s var(--ease-out) both}
.mini-seg{display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:var(--r-pill);background:var(--surface-3);margin-bottom:10px}
.mini-seg button{min-height:44px;padding:0 16px;border:0;border-radius:var(--r-pill);background:none;font:700 13.5px var(--f-display);color:var(--ink-2)}
.mini-seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px -3px rgba(43,24,70,.3)}

/* costs receipt */
.stack{display:flex;height:22px;border-radius:11px;overflow:hidden;gap:2px;margin:4px 0 16px;background:var(--surface-3)}
.stack i{display:block;height:100%;flex:0 1 auto;transform-origin:left;animation:growx .7s var(--ease-out) both}
.receipt{background:var(--surface-2);border-radius:20px 20px 0 0;padding:14px 16px 22px;
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 10px repeat-x;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 10px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/18px 10px repeat-x}
.rc{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:14px;font-weight:600}
.rc .sw{width:10px;height:10px;border-radius:3px;flex:none}
.rc .rl{flex:1;min-width:0}
.rc .rv{font:700 14px var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.rc .rv .pill{font-family:var(--f-body)}
.rc.minus .rv{color:var(--ink-2)}
.rc.total{border-top:2px dashed var(--line-2);margin-top:6px;padding-top:12px;font-weight:800}
.rc.total .rv{font-size:18px;color:var(--s-profit)}
.rc small{display:block;font-size:12px;color:var(--ink-2);font-weight:600}
details.gl summary{min-height:48px;display:flex;align-items:center;gap:8px;font:700 15px var(--f-display);cursor:pointer;list-style:none}
details.gl summary::-webkit-details-marker{display:none}
details.gl summary .ico{transition:transform .2s}
details.gl[open] summary .ico{transform:rotate(90deg)}
details.how{margin-top:10px}
.how-list{margin:2px 0 10px;padding-left:18px;display:grid;gap:6px;font-size:14px;font-weight:600;color:var(--ink-2)}
.how-list b{color:var(--ink)}
.how-todo{margin-bottom:8px;padding:10px 12px;border-radius:14px;background:var(--warn-soft);color:var(--warn-ink);font-size:13.5px;font-weight:600}

/* health */
.c-health{background:var(--bg-deep);box-shadow:none}
.c-health .ch-tile{background:var(--surface)}
.live{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface);font:800 11px var(--f-body);color:var(--accent-ink);text-transform:uppercase;letter-spacing:.06em}
.live::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,138,61,.6)}70%{box-shadow:0 0 0 8px rgba(255,138,61,0)}100%{box-shadow:0 0 0 0 rgba(255,138,61,0)}}
.hl-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:20px;background:var(--surface);min-height:64px}
.hrow .hi{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:var(--surface-3)}
.hrow.warning .hi{background:var(--warn-soft);color:var(--warn-ink)}
.hrow.good .hi{background:var(--good-soft);color:var(--good-ink)}
.hrow .ht{font-weight:700;font-size:14px;line-height:1.25}
.hrow .hs{font-size:12.5px;color:var(--ink-2);font-weight:600}
.hrow .hv{text-align:right;font:800 17px var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.hrow .hv .pill{margin-top:4px;font-size:11px;padding:2px 8px}
.hrow .hgo{grid-column:2/-1;justify-self:start;margin-top:-4px}

/* top campaigns */
.rank{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rank button{display:grid;grid-template-columns:34px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:62px;padding:8px 10px;border:0;border-radius:18px;background:var(--surface-2);text-align:left}
.rank button:hover{background:var(--surface-3)}
.rank .rn{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--ink);color:var(--on-ink);font:800 14px var(--f-display)}
.rank .rt{font-weight:700;font-size:14px;line-height:1.25}
.rank .rs{font-size:12.5px;color:var(--ink-2);font-weight:600}

/* return (ROAS) seal */
.roas{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;min-width:74px;padding:8px 10px;border-radius:20px;text-align:center;flex:none}
.roas b{font:800 21px/1.05 var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.roas small{display:inline-flex;align-items:center;gap:3px;font:800 10.5px var(--f-body);text-transform:uppercase;letter-spacing:.05em;margin-top:2px}
.roas.good{background:var(--good-soft);color:var(--good-ink)}
.roas.warn{background:var(--warn-soft);color:var(--warn-ink)}
.roas.crit{background:var(--crit);color:#fff}
.roas.none{background:var(--surface-3);color:var(--ink-2)}
.roas.sm{min-width:0;padding:4px 10px;flex-direction:row;gap:6px;border-radius:var(--r-pill)}
.roas.sm b{font-size:14px}
.roas.sm small{margin:0;font-size:9.5px}

/* ---------- campaigns ---------- */
.camp-top .seg{margin-bottom:14px}
.camp-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:16px 10px;background:var(--ink);color:var(--on-ink);box-shadow:var(--shadow-2);margin-bottom:14px}
.camp-summary div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;min-width:0}
.camp-summary small{font:700 12px var(--f-body);color:var(--on-ink-2)}
.camp-summary b{font:800 18px var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
.camp-summary .acc{color:var(--accent)}
.camp-summary .full{grid-column:1/-1;margin-top:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);flex-direction:row;justify-content:center;gap:8px;font-size:13px;color:var(--on-ink-2);font-weight:600}
.camp-summary .full b{font-size:15px;color:var(--on-ink)}
.tools{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.tools .chips{flex:1;min-width:0}
.gloss-btn{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:48px;padding:0 14px;border-radius:var(--r-pill);border:0;background:var(--ink);color:var(--on-ink);font:700 13.5px var(--f-body)}
.camp-cards{display:grid;gap:12px}
.camp-card{display:flex;flex-direction:column;gap:14px;width:100%;padding:18px;border:0;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-1);text-align:left;transition:transform .2s var(--ease-out),box-shadow .2s}
.camp-card:hover{box-shadow:var(--shadow-2)}
.camp-card:active{transform:scale(.982)}
.camp-head{display:flex;align-items:flex-start;gap:12px}
.camp-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:16px;background:var(--surface-3);flex:none}
.camp-name{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.camp-name strong{font:700 17px/1.2 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.camp-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px;color:var(--ink-2);font-weight:700}
.camp-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.camp-stats span{display:flex;flex-direction:column;padding:10px 12px;border-radius:16px;background:var(--surface-2);min-width:0}
.camp-stats small{font:700 12px var(--f-body);color:var(--ink-2)}
.camp-stats b{font:700 17px var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.camp-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:14px}
.camp-foot .profit b{font-family:var(--f-display);font-variant-numeric:tabular-nums}
.camp-foot .neg b{color:var(--crit-ink)}
.camp-foot .more{display:inline-flex;align-items:center;gap:2px;color:var(--accent-ink);font-weight:800}
.loss-banner{display:flex;align-items:flex-start;gap:10px;margin:0;padding:12px 14px;border-radius:18px;background:var(--crit-soft);color:var(--crit-ink);font-size:14px;font-weight:600;line-height:1.35}
.loss-banner b{font-weight:800}
.camp-card.loss{box-shadow:0 0 0 2.5px var(--crit),var(--shadow-1)}
.table-block{margin-top:14px}
.table-wrap{position:relative;margin-top:12px;overflow-x:auto;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1);-webkit-overflow-scrolling:touch}
.ctable{border-collapse:separate;border-spacing:0;min-width:1080px;width:100%;font-size:13.5px}
.ctable th,.ctable td{padding:10px 6px;border-bottom:1px solid var(--line);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}
.ctable th{position:sticky;top:0;background:var(--surface-2);font:700 12px var(--f-body);color:var(--ink-2);padding:6px 6px;vertical-align:bottom}
.ctable th button{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 4px;border:0;border-radius:12px;background:none;font:inherit;color:inherit;text-align:right;white-space:normal;line-height:1.2}
.ctable th button:hover{background:var(--surface-3);color:var(--ink)}
.ctable th[aria-sort] button{color:var(--ink)}
.ctable th .si{font-size:10px;opacity:.8}
.ctable td{font-family:var(--f-display);font-size:13px}
.ctable .pill{padding:3px 8px;font-size:11.5px}
.ctable td.stick,.ctable th.stick{padding-left:12px}
.ctable td.txt,.ctable th.txt{text-align:left}
.ctable td.txt{font-family:var(--f-body);font-weight:600}
.ctable td.stick{white-space:normal;min-width:140px;max-width:170px}
.roas.tb{min-width:0;padding:4px 9px;flex-direction:row;gap:5px;border-radius:var(--r-pill)}
.roas.tb b{font-size:13.5px}
.ctable .stick{position:sticky;left:0;z-index:1;background:var(--surface);box-shadow:1px 0 0 var(--line)}
.ctable th.stick{z-index:2;background:var(--surface-2)}
.ctable tbody tr:hover td{background:var(--surface-2)}
.ctable tr.loss td{background:color-mix(in srgb,var(--crit-soft) 55%,var(--surface))}
.ctable tfoot td{font-weight:800;background:var(--surface-3);border-bottom:0}
.ctable tfoot td.stick{background:var(--surface-3)}
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0;border:0;background:none;font:700 13.5px/1.25 var(--f-body);color:var(--ink);text-align:left}
.tlink:hover{color:var(--accent-ink)}
.neg-v{color:var(--crit-ink)}
.table-note{font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:10px}
@media (max-width:719px){.ctable td.stick{min-width:132px;max-width:150px}}

/* campaign detail (inside the sheet) */
.d-head{display:flex;align-items:center;gap:12px}
.d-head .camp-name{gap:4px}
.d-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.d-grid div{display:flex;flex-direction:column;gap:2px;padding:10px;border-radius:16px;background:var(--surface-2);min-width:0}
.d-grid small{font:700 11.5px var(--f-body);color:var(--ink-2)}
.d-grid b{white-space:nowrap;font:700 14px var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis}
.d-sec{font:700 16px var(--f-display);margin:6px 2px 0}
.ad{display:flex;flex-direction:column;gap:10px}
.ad q{font:600 15px/1.35 var(--f-display);letter-spacing:-.01em;quotes:"“" "”"}
.ad .ad-n{font:700 12.5px var(--f-body);color:var(--ink-2);display:flex;justify-content:space-between;align-items:center;gap:8px}
.ad .ad-n > span:first-child{min-width:0;overflow-wrap:anywhere}
.ad-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ad-stats span{display:flex;flex-direction:column;padding:8px 10px;border-radius:14px;background:var(--surface-2);min-width:0}
.ad-stats small{font:700 11px var(--f-body);color:var(--ink-2)}
.ad-stats b{font:700 14.5px var(--f-display);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field-label{font:700 14px var(--f-body);color:var(--ink)}
.field-hint{font-size:13px;font-weight:600;color:var(--ink-2)}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap > .ico{position:absolute;left:18px;color:var(--ink-2);pointer-events:none}
.input{width:100%;height:62px;padding:0 18px 0 52px;border-radius:22px;border:2px solid var(--line-2);background:var(--surface);font:600 17px var(--f-body);color:var(--ink)}
.input.has-toggle{padding-right:62px}
.input::placeholder{color:var(--ink-3)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.pw-toggle{position:absolute;right:7px;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:16px;background:none;color:var(--ink-2)}
.pw-toggle[aria-pressed="true"]{color:var(--accent-ink);background:var(--accent-tint)}
.textarea{display:block;width:100%;min-height:132px;padding:14px 18px;border-radius:22px;border:2px solid var(--line-2);background:var(--surface);font:600 16px/1.6 var(--f-body);color:var(--ink);resize:vertical}
.textarea::placeholder{color:var(--ink-3)}
.textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.textarea:disabled{background:var(--surface-2)}
.btn-primary{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:62px;border:0;border-radius:22px;background:var(--accent);color:var(--ink);font:800 18px var(--f-display);letter-spacing:-.01em;text-decoration:none;box-shadow:var(--shadow-accent);transition:transform .15s,background .15s}
.btn-primary:hover{background:var(--accent-press)}
.btn-primary:active{transform:scale(.98)}
.form-msg{padding:12px 16px;border-radius:18px;background:var(--crit-soft);color:var(--crit-ink);font:700 14.5px/1.4 var(--f-body);overflow-wrap:anywhere}
.form-msg.ok{background:var(--good-soft);color:var(--good-ink)}
.note{padding:14px 16px;border-radius:20px;background:var(--info-soft);color:var(--info-ink);font:600 14.5px/1.45 var(--f-body)}
.note b{font-weight:800}

/* ---------- sheet: bottom sheet (phone) / right drawer (desktop) ---------- */
.sheet-layer{position:fixed;inset:0;z-index:70}
.scrim{position:absolute;inset:0;background:rgba(43,24,70,.45);opacity:0;transition:opacity .3s}
.sheet{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;max-height:92dvh;background:var(--bg);border-radius:30px 30px 0 0;transform:translateY(102%);transition:transform .42s var(--ease-out);outline:none;box-shadow:0 -20px 50px -20px rgba(43,24,70,.5)}
.sheet-layer.open .scrim{opacity:1}
.sheet-layer.open .sheet{transform:none}
.sheet-grip{width:44px;height:5px;border-radius:3px;background:var(--line-2);margin:10px auto 2px;flex:none}
.sheet-head{display:flex;align-items:center;gap:12px;padding:6px var(--gr) 12px var(--gl);flex:none}
.sheet-head h2{flex:1;min-width:0;font-size:20px}
.sheet-body{overflow-y:auto;overscroll-behavior:contain;padding:2px var(--gr) calc(28px + env(safe-area-inset-bottom,0px)) var(--gl);display:flex;flex-direction:column;gap:12px}
.sheet-content{display:contents}
.sheet .card{box-shadow:none}
.sheet-form{display:flex;flex-direction:column;gap:16px}
.gloss{margin:0;display:grid;gap:12px}
.gloss dt{font:700 14px var(--f-display)}
.gloss dd{margin:2px 0 0;color:var(--ink-2);font-weight:600;font-size:14.5px}

/* toast: short confirmations ("Link copiado") */
.toast{position:fixed;z-index:90;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));width:max-content;max-width:min(420px,calc(100vw - 32px));padding:12px 18px;border-radius:18px;background:var(--ink);color:var(--on-ink);font:700 14.5px/1.35 var(--f-body);box-shadow:0 14px 30px -10px rgba(43,24,70,.55);opacity:0;transform:translate(-50%,12px);transition:opacity .25s,transform .3s var(--ease-out);pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- profile and team ---------- */
.profile{display:flex;align-items:center;gap:14px}
.profile .grow{flex:1;min-width:0}
.profile h2{font-size:20px;overflow-wrap:anywhere}
.profile .card-sub{overflow-wrap:anywhere}
.avatar{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;font:800 15px var(--f-display);color:var(--ink);background:var(--surface-3);flex:none}
.avatar.xl{width:64px;height:64px;font-size:22px}
.avatar.acc{background:var(--accent);box-shadow:var(--shadow-accent)}
.btn-out{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:58px;border-radius:20px;border:2px solid var(--crit);background:var(--surface);color:var(--crit-ink);font:800 16px var(--f-display)}
.profile-logo{width:150px;height:auto;margin:8px auto 0;opacity:.9}
.profile-grid{display:grid;gap:14px}

.team-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.person{display:grid;grid-template-columns:46px minmax(0,1fr);gap:0 12px;align-items:start;padding:12px;border-radius:22px;background:var(--surface-2)}
.person.off{background:transparent;border:2px dashed var(--line-2)}
.person.off .avatar{filter:grayscale(1);opacity:.6}
.p-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.p-name{font:700 15.5px/1.3 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.p-you{font:700 12.5px var(--f-body);color:var(--ink-2);letter-spacing:0}
.p-mail{font-size:13.5px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}
.p-seen{font-size:12.5px;font-weight:600;color:var(--ink-3)}
.p-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.p-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
/* side by side when they fit; on a narrow phone each takes a full row instead of a ragged wrap */
.p-actions .btn-soft{flex:1 1 auto;justify-content:center;padding:0 12px}
.list-state{padding:18px 12px;text-align:center;color:var(--ink-2);font-weight:600;font-size:14.5px;border-radius:20px;background:var(--surface-2)}
.list-state .btn-soft{margin-top:10px}
.phones-form{display:flex;flex-direction:column;gap:12px}

.link-card{display:flex;flex-direction:column;gap:14px}
.link-for{font-weight:600;color:var(--ink-2)}
.link-for b{color:var(--ink);font-family:var(--f-display)}
.link-field{padding:14px 16px;border-radius:18px;border:2px dashed var(--line-2);background:var(--surface-2);font:600 14.5px/1.45 var(--f-display);color:var(--ink);overflow-wrap:anywhere;word-break:break-all;-webkit-user-select:all;user-select:all}
.link-note{font:700 14.5px/1.4 var(--f-body);color:var(--ink)}
.confirm-text{font:600 16px/1.45 var(--f-body)}
.confirm-text b{font-family:var(--f-display)}

/* ---------- conversations: list ---------- */
/* phone: the list; a conversation opens full screen over it (chat-open hides the tab bar) */
body.chat-open .tabbar{display:none}
.conv-tools{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.search{position:relative;display:block}
.search .ico{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-2);pointer-events:none}
.search input{width:100%;height:52px;padding:0 16px 0 48px;border-radius:var(--r-pill);border:2px solid transparent;background:var(--surface);box-shadow:var(--shadow-1);font:600 16px var(--f-body);color:var(--ink)}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none;border-color:var(--accent)}
.conv-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.sel{position:relative;display:flex;align-items:center;flex:1 1 150px;min-width:0}
.sel select{appearance:none;-webkit-appearance:none;width:100%;height:48px;padding:0 44px 0 16px;border-radius:var(--r-pill);border:2px solid var(--line-2);background:var(--surface);font:700 14px var(--f-body);color:var(--ink);text-overflow:ellipsis}
.sel .ico{position:absolute;right:14px;pointer-events:none;color:var(--ink-2)}
.chip.ensaios{padding:0 14px;gap:6px}
.chip.ensaios .ico{color:var(--ink-2)}
.conv-scroll[aria-busy="true"] .conv-list{opacity:.55;transition:opacity .2s}
.conv-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.conv-row{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:4px 12px;align-items:start;width:100%;min-height:88px;padding:14px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-1);color:var(--ink);text-decoration:none;text-align:left;transition:transform .15s}
.conv-row:active{transform:scale(.985)}
.conv-row .avatar{grid-row:span 2}
.cr-who{min-width:0;display:flex;flex-direction:column}
.cr-name{font:700 15.5px var(--f-display);letter-spacing:-.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-phone{font-size:12px;color:var(--ink-3);font-weight:600;white-space:nowrap}
.cr-time{font:600 12px var(--f-display);color:var(--ink-2);text-align:right;white-space:nowrap}
.cr-prev{grid-column:2;font-size:14px;color:var(--ink-2);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-side{grid-column:3;grid-row:2;justify-self:end}
.unread{display:grid;place-items:center;min-width:24px;height:24px;padding:0 7px;border-radius:12px;background:var(--accent);color:var(--ink);font:800 12px var(--f-display)}
.cr-tags{grid-column:2/-1;display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;min-width:0}
.origin{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:4px 10px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink-2);font:700 12px var(--f-body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-more{display:flex;justify-content:center;margin-top:12px}
.conv-more:empty{display:none}
.empty small{display:block;margin-top:8px;font-size:13px}

/* ---------- conversations: chat ---------- */
.conv-chat-pane{display:none}
.conv-info-pane{display:none}
.conv-layout[data-view="chat"] .conv-list-pane{visibility:hidden}
.conv-layout[data-view="chat"] .conv-chat-pane{display:flex;flex-direction:column;position:fixed;inset:0;z-index:50;background:var(--bg);animation:slidein .35s var(--ease-out)}
@keyframes slidein{from{transform:translateX(30px);opacity:.4}to{transform:none;opacity:1}}
.chat-head{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) var(--gr) 10px var(--gl);background:var(--surface);box-shadow:0 8px 20px -14px rgba(43,24,70,.4);position:relative;z-index:2}
.chat-head .ch-main{display:contents}
.chat-head .ch-txt{flex:1;min-width:0}
.chat-head h2{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-head .ch-sub{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);font-weight:600;margin-top:2px;overflow:hidden;white-space:nowrap}
.chat-head .ch-sub span:last-child{overflow:hidden;text-overflow:ellipsis}
.chat-head .icon-btn{box-shadow:none;background:var(--surface-3)}
.chat-head .icon-btn:disabled{opacity:.45}
.chat-scroll{flex:1;min-height:0;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;padding:12px var(--gr) 18px var(--gl);display:flex;flex-direction:column;background-color:var(--bg);background-image:radial-gradient(var(--bg-deep) 1.2px,transparent 1.6px);background-size:22px 22px}
.chat-top{display:flex;justify-content:center}
.older-btn{min-height:40px;margin:2px 0 6px;padding:0 16px;border-radius:var(--r-pill);border:2px solid var(--line-2);background:var(--surface);font:700 13px var(--f-body);color:var(--ink)}
.chat-older,.chat-start{margin:2px 0 6px;padding:5px 12px;border-radius:var(--r-pill);font:700 12px var(--f-body);color:var(--ink-2)}
.chat-start{background:var(--bg-deep)}
.chat-list{display:flex;flex-direction:column}
.chat-state{align-self:center;display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:24px;padding:16px 18px;border-radius:20px;background:var(--surface);color:var(--ink-2);font-weight:600;text-align:center}
.chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;text-align:center}
.chat-empty h2{font-size:19px;margin-top:6px}
.day-sep{align-self:center;margin:10px 0 6px;padding:5px 12px;border-radius:var(--r-pill);background:var(--surface);font:700 12px var(--f-body);color:var(--ink-2)}
.msg{display:flex;flex-direction:column;max-width:min(88%,520px);margin-top:4px}
.msg.first{margin-top:14px}
.msg.in{align-self:flex-start;align-items:flex-start}
.msg.out{align-self:flex-end;align-items:flex-end}
.who{font:700 11.5px var(--f-body);color:var(--ink-2);margin:0 12px 4px}
.bubble{position:relative;padding:11px 14px 7px;border-radius:22px;box-shadow:0 1px 1px rgba(43,24,70,.04),0 8px 16px -10px rgba(43,24,70,.3);min-width:0;max-width:100%;overflow-wrap:anywhere}
.msg.in .bubble{background:var(--surface);color:var(--ink)}
.msg.out .bubble{background:var(--ink);color:var(--on-ink)}
.msg.in.first .bubble{border-top-left-radius:8px}
.msg.out.first .bubble{border-top-right-radius:8px}
.b-text{white-space:pre-line;font-size:15.5px;line-height:1.45;overflow-wrap:anywhere}
.b-other{font-size:14.5px;font-style:italic;color:var(--ink-2)}
.msg.out .b-other{color:var(--on-ink-2)}
.meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;font:600 11px var(--f-display);color:var(--ink-3)}
.msg.out .meta{color:var(--on-ink-2)}
.tick{display:inline-flex}
.tick:empty{display:none}
.tick-read{color:var(--accent)}
.fail-note{display:inline-flex;align-items:center;gap:5px;margin:5px 10px 0;color:var(--crit-ink);font:800 12px var(--f-body)}
/* audio and song players: --p (0–1) is how much has played */
.audio{display:flex;align-items:center;gap:10px;min-width:200px}
.play{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);color:var(--on-ink);flex:none}
.msg.out .play{background:var(--accent);color:var(--ink)}
.play .ico{width:18px;height:18px}
.wave{position:relative;flex:1;height:34px;min-width:90px;cursor:pointer}
.wave-base,.wave-fill{position:absolute;inset:0;display:flex;align-items:center;gap:2px}
.wave i{flex:1;min-width:2px;border-radius:2px;background:var(--line-2)}
.wave-fill{clip-path:inset(0 calc((1 - var(--p,0)) * 100%) 0 0)}
.wave-fill i{background:var(--accent)}
.msg.out .wave i{background:rgba(255,255,255,.22)}
.msg.out .wave-fill i{background:var(--accent)}
.dur{min-width:34px;font:600 12px var(--f-display);font-variant-numeric:tabular-nums;color:var(--ink-2);white-space:nowrap;text-align:right}
.msg.out .dur{color:var(--on-ink-2)}
.transcript{margin-top:10px;padding:10px 12px;border-radius:14px;background:var(--surface-3);font-size:14.5px;line-height:1.45;white-space:pre-line}
.msg.out .transcript{background:rgba(255,255,255,.1)}
.tlabel{display:flex;align-items:center;gap:6px;font:800 11px var(--f-body);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:4px}
.msg.out .tlabel{color:var(--on-ink-2)}
.media-off{display:flex;align-items:center;gap:8px;min-height:44px;padding:8px 12px;border-radius:14px;background:var(--surface-3);color:var(--ink-2);font:700 13.5px var(--f-body)}
.msg.out .media-off{background:rgba(255,255,255,.1);color:var(--on-ink-2)}
.img-box{display:block;width:min(240px,62vw);aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface-3)}
.img-box img{width:100%;height:100%;object-fit:cover}
.img-ph{display:grid;place-items:center;align-content:center;gap:6px;width:min(240px,62vw);aspect-ratio:4/3;border-radius:16px;color:var(--ink-2);font:700 12px var(--f-body);background:repeating-linear-gradient(135deg,var(--surface-3) 0 10px,var(--bg-deep) 10px 20px)}
.img-ph .ico{width:30px;height:30px}
.b-caption{margin-top:8px;font-size:14px;font-weight:600;color:var(--ink-2)}
.msg.out .b-caption{color:var(--on-ink-2)}
.vid{display:block;width:min(240px,62vw);aspect-ratio:3/4;max-height:320px;border-radius:16px;background:var(--ink);object-fit:contain}
.vid + .b-text{margin-top:8px}
.doc{display:flex;align-items:center;gap:10px;min-width:200px;padding:10px 12px;border-radius:14px;background:var(--surface-3)}
.msg.out .doc{background:rgba(255,255,255,.1)}
.doc-name{flex:1;min-width:0;font-size:14px;font-weight:700;overflow-wrap:anywhere}
.doc-open{display:inline-flex;align-items:center;min-height:36px;font:800 13.5px var(--f-body);color:var(--accent-ink);text-decoration:none}
.msg.out .doc-open{color:var(--accent)}
.doc + .b-text{margin-top:8px}
.song{display:flex;align-items:center;gap:12px;min-width:210px}
.song-art{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--accent);color:var(--ink);flex:none;position:relative;overflow:hidden}
.song-art::after{content:"";position:absolute;width:64px;height:64px;border-radius:50%;border:8px solid rgba(43,24,70,.12);right:-30px;bottom:-30px}
.song-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.song-main strong{font:700 14.5px var(--f-display);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-bar{display:block;height:6px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;cursor:pointer}
.msg.in .song-bar{background:var(--surface-3)}
.song-bar i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(max(var(--p,0),.02))}
.song-time{font:600 11.5px var(--f-display);font-variant-numeric:tabular-nums;color:var(--on-ink-2)}
.msg.in .song-time{color:var(--ink-2)}
.song-link{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.1);font-size:13px;font-weight:600;overflow-wrap:anywhere}
.msg.in .song-link{background:var(--surface-3)}
.song-link .ico{flex:none}
.ev{display:flex;justify-content:center;margin:14px 0 2px}
.ev-pill{display:inline-flex;align-items:center;gap:10px;max-width:94%;padding:7px 14px 7px 7px;border-radius:20px;background:var(--accent-tint);border:1.5px solid var(--accent-soft);color:var(--ink);font:600 13px/1.35 var(--f-body);overflow-wrap:anywhere}
.ev-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:var(--ink);flex:none}
.ev-ic .ico{width:16px;height:16px;stroke-width:2.2}
.ev-pill time{font:600 11.5px var(--f-display);color:var(--ink-2);white-space:nowrap}
.ev-paid .ev-ic,.ev-delivered .ev-ic{background:var(--ink);color:var(--accent)}
.readonly{display:flex;align-items:center;gap:10px;padding:12px var(--gr) calc(12px + env(safe-area-inset-bottom,0px)) var(--gl);background:var(--surface);color:var(--ink-2);font:600 14px/1.35 var(--f-body);box-shadow:0 -8px 20px -14px rgba(43,24,70,.4);position:relative;z-index:2}
.readonly .ri{display:grid;place-items:center;width:40px;height:40px;border-radius:14px;background:var(--surface-3);color:var(--ink);flex:none}
.readonly b{color:var(--ink)}

/* ---------- conversations: the customer card (desktop pane / phone sheet) ---------- */
.cinfo{display:flex;flex-direction:column;gap:12px}
.info-contact{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:20px 16px}
.info-contact h3{font-size:19px;margin-top:6px;overflow-wrap:anywhere}
.info-contact p{color:var(--ink-2);font-weight:600;font-size:14px}
.info-block h4{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:10px}
.info-block h4 .ico{color:var(--ink-2)}
.info-block .card-sub{margin:0}
.info-strong{font-weight:700;overflow-wrap:anywhere}
.info-strong + .card-sub{margin-top:4px}
.info-empty{padding:18px;color:var(--ink-2);font-weight:600;font-size:14.5px;text-align:center}
.pq,.sheet .pq{background:var(--warn-soft);color:var(--ink);box-shadow:0 0 0 2px var(--warn) inset}
.pq h4,.pq h4 .ico{color:var(--warn-ink)}
.pq p{font:600 15px/1.4 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.pq-when{display:block;margin-top:8px;font:700 12.5px var(--f-body);color:var(--warn-ink)}
.quote{margin-top:6px;padding:10px 12px;border-radius:14px;background:var(--surface-2);font:600 14px/1.4 var(--f-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.order dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px}
.order dt{color:var(--ink-2);font-weight:700}
.order dd{margin:0;font-weight:700;text-align:right;overflow-wrap:anywhere}
.order .ov{font:800 20px var(--f-display);font-variant-numeric:tabular-nums}
.past{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.past li{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:14px;background:var(--surface-2)}
.past-top{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.past-top .num{font-weight:800;white-space:nowrap}
.past-sub{font-size:13px;font-weight:600;color:var(--ink-2)}
.mem{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mem li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-size:14px;font-weight:600;overflow-wrap:anywhere}
.mem li .ico{color:var(--accent-ink);margin-top:1px}
.mem li b{font-weight:800}
.nums{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.nums div{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:18px;background:var(--surface);min-width:0}
.nums small{font:700 12px var(--f-body);color:var(--ink-2)}
.nums b{font:800 18px var(--f-display);font-variant-numeric:tabular-nums}

/* ---------- login and invite ---------- */
.login{position:relative;min-height:100dvh;display:grid;place-items:center;padding:calc(20px + env(safe-area-inset-top,0px)) var(--gr) calc(20px + env(safe-area-inset-bottom,0px)) var(--gl);overflow:hidden;background:var(--bg)}
.login-deco{position:absolute;inset:0;pointer-events:none}
.blob{position:absolute;border-radius:50%}
.blob.b1{width:300px;height:300px;right:-150px;top:-175px;background:var(--accent);opacity:.9}
.blob.b2{width:260px;height:260px;left:-150px;bottom:-160px;border:44px solid var(--ink);opacity:.95}
.blob.b3{width:70px;height:70px;right:24%;bottom:12%;background:var(--bg-deep)}
.eq{display:flex;align-items:flex-end;gap:5px;height:56px;flex:none}
/* phone: the equalizer sits beside the address chip, as in the mockup at 390 px, so a taller card never puts it behind the title */
.login-deco .eq{display:none;position:absolute;right:26px;top:140px}
.login-domain-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;min-width:0}
.eq-inline{margin:-30px 6px 0 0}
.eq i{width:8px;border-radius:4px;background:var(--ink);opacity:.85;transform-origin:bottom;animation:eq 1.4s ease-in-out infinite alternate}
.eq i:nth-child(1){height:30%;animation-delay:-.2s}.eq i:nth-child(2){height:70%;animation-delay:-.6s}.eq i:nth-child(3){height:45%;animation-delay:-1s}.eq i:nth-child(4){height:100%;animation-delay:-.4s}.eq i:nth-child(5){height:60%;animation-delay:-.8s}
@keyframes eq{to{transform:scaleY(.45)}}
.login-card{position:relative;z-index:1;width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px;padding:12px 4px}
.login-top{display:flex;align-items:center;gap:12px}
.login-top .brand-tile{display:grid;place-items:center;width:64px;height:64px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-1)}
.login-top .brand-tile img{width:44px;height:44px}
.login-logo{height:30px;width:auto}
.login-domain{display:inline-flex;align-self:flex-start;max-width:100%;padding:5px 12px;border-radius:var(--r-pill);background:var(--bg-deep);font:700 12.5px var(--f-display);color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.login-title{font-size:30px;font-weight:700;line-height:1.12}
.login-sub{color:var(--ink-2);font-weight:600;margin-top:-6px}
.login-foot{display:flex;justify-content:center;margin-top:-4px}
.invite-who{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:22px;background:var(--surface);box-shadow:var(--shadow-1)}
.invite-who .grow{flex:1;min-width:0}
.invite-who b{display:block;font:700 16px/1.25 var(--f-display);letter-spacing:-.02em;overflow-wrap:anywhere}
.invite-who small{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2);overflow-wrap:anywhere}

/* ---------- tablet ---------- */
@media (min-width:640px){
  .kpi{flex-basis:46%}
  .kpi-hero{flex-basis:56%}
  .p-actions .btn-soft{flex:0 0 auto}
  .login-deco .eq{display:flex}
  .eq-inline{display:none}
  .login-card{padding:40px 36px;background:var(--surface);border-radius:36px;box-shadow:var(--shadow-2)}
  .login-card .invite-who{background:var(--surface-2);box-shadow:none}
}

@media (min-width:720px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .span-2{grid-column:span 2}
  .camp-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-health,.c-mix{grid-column:span 2}
  .c-health .hl-list{grid-template-columns:1fr 1fr}
}

/* ---------- desktop: rail + columns ---------- */
@media (min-width:1024px){
  /* the number screens: the carousel becomes a grid and the charts fill their cards */
  .ov-head,.camp-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:16px}
  .ov-head .seg,.camp-top .seg{width:380px;margin:0 0 16px;flex:none}
  .notice,.alert-pill{width:auto;display:inline-flex;padding-right:20px;margin-right:10px}
  .carousel{display:contents}
  .kpi-zone{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:16px}
  .kpi{min-height:230px}
  .kpi-hero{grid-column:span 2}
  .kpi-hero .kpi-value{font-size:48px}
  .kpi-value{font-size:30px}
  .dots{display:none}
  .cards{gap:16px}
  .chart{min-height:240px}
  .c-chart,.c-invest,.c-heat{display:flex;flex-direction:column}
  .invest-body,.heat-body,.heat-map{flex:1 1 auto;display:flex;flex-direction:column}
  .chart.fill{flex:1 1 auto;position:relative;min-height:250px}
  .chart.fill svg{position:absolute;left:0;top:0}
  .hm{flex:1 1 auto;grid-template-rows:repeat(7,minmax(20px,1fr)) auto}
  .hm-cell{height:100%;min-height:20px}
  .camp-summary{grid-template-columns:repeat(4,1fr);padding:20px}
  .camp-summary .full{grid-column:auto;margin:0;padding:0;border:0;flex-direction:column;align-items:center;gap:2px;font-size:12px}
  .camp-summary .full b{font-size:18px}
  .camp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .app{display:grid;grid-template-columns:104px minmax(0,1fr)}
  .tabbar{display:none}
  .rail{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 10px;background:var(--ink);border-radius:0 34px 34px 0;z-index:30}
  .rail-logo{display:grid;place-items:center;width:58px;height:58px;border-radius:20px;background:var(--surface);margin-bottom:18px}
  .rail-logo img{width:40px;height:40px}
  .rail .tab{width:84px;min-height:72px;gap:5px}
  .rail .tab-ico{width:56px;height:34px}
  .rail-foot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px}
  .rail .rail-me{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--ink);font:800 17px var(--f-display)}
  .rail .tab[aria-current="page"] .rail-me{box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--on-ink)}
  .screen{padding:20px 32px 48px}
  .appbar .brand,.appbar .avatar-btn{display:none}
  .appbar{justify-content:flex-end;min-height:36px}
  .hello{padding-top:0}
  .sheet{left:auto;top:0;bottom:0;width:min(580px,92vw);max-height:none;border-radius:34px 0 0 34px;transform:translateX(104%)}
  .sheet-grip{display:none}
  .sheet-head{padding:24px 28px 14px}
  .sheet-body{padding:2px 28px 32px}
  .toast{bottom:32px;left:calc(50% + 52px)}
  /* conversations: list | chat | card side by side, the page itself does not scroll */
  .screen-conv{height:100dvh;padding:16px 24px;display:flex;flex-direction:column}
  .screen-conv .wrap{flex:1;min-height:0;width:100%;max-width:1400px;display:flex;flex-direction:column}
  .screen-conv .appbar{display:none}
  .conv-layout{flex:1;min-height:0;display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr) minmax(240px,320px);gap:16px}
  .conv-list-pane{display:flex;flex-direction:column;min-height:0}
  .conv-layout[data-view="chat"] .conv-list-pane{visibility:visible}
  .conv-list-pane .hello{padding-bottom:12px}
  .conv-list-pane .hello h1{font-size:30px}
  .conv-scroll{flex:1;min-height:0;overflow-y:auto;padding:4px 4px 12px;margin:0 -4px}
  .conv-layout[data-view] .conv-chat-pane{display:flex;flex-direction:column;position:static;animation:none;min-height:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-1);background:var(--bg)}
  .chat-head{padding:12px 16px}
  .chat-head [data-chat-back],.chat-head [data-chat-info]{display:none}
  .chat-scroll{padding:12px 20px 20px}
  .readonly{padding:14px 18px}
  .conv-info-pane{display:block;min-height:0;overflow-y:auto;padding:0 2px 12px}
  .conv-row[aria-current="true"]{background:var(--ink);color:var(--on-ink)}
  .conv-row[aria-current="true"] .cr-prev,.conv-row[aria-current="true"] .cr-time,.conv-row[aria-current="true"] .cr-phone{color:var(--on-ink-2)}
  .conv-row[aria-current="true"] .origin{background:rgba(255,255,255,.12);color:var(--on-ink-2)}
  /* the tall team card spans the rows; its extra height goes to the last (1fr) row, so the right column stays packed */
  .profile-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;grid-template-areas:"team me" "team phones" "team out" "team logo";align-items:start;gap:16px}
  .pf-team{grid-area:team}
  .pf-me{grid-area:me}
  .pf-phones{grid-area:phones}
  .pf-out{grid-area:out}
  .pf-logo{grid-area:logo}
}
@media (min-width:1024px) and (max-width:1279px){
  /* side columns at their narrowest, so the chat keeps room for its bubbles */
  .conv-layout{grid-template-columns:260px minmax(0,1fr) 240px}
  .kpi-zone{grid-template-columns:repeat(3,minmax(0,1fr))}
  .more-card{grid-column:span 2}
  .more-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:1280px){
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .c-chart{grid-column:1 / span 2;grid-row:1}
  .c-health{grid-column:3;grid-row:1 / span 2}
  .c-health .hl-list{grid-template-columns:1fr}
  .c-heat{grid-column:1 / span 2;grid-row:2}
  .c-invest{grid-column:1 / -1;grid-row:3}
  .c-funnel,.c-products,.c-costs{grid-column:auto;grid-row:4}
  .c-top{grid-column:span 2;grid-row:5}
  .c-mix{grid-column:auto;grid-row:5}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}