/* Patara Web 2.0 — shared styles (tokens, header, components). Page-only styles go inline in each page. */

/* Layout: sticky header (menu button, logo, account, language, profile) + left sidebar menu; filter/summary band; dense one-row campaign cards */
:root{
  --bg:#F3F3F0; --surface:#FFFFFF; --sunken:#FAFAF7; --line:#E2E1DB; --line-soft:#ECEBE6; --line-strong:#CFCEC7;
  --fg:#1A1A17; --fg-2:#3D3C37; --muted:#626058;
  --brand:#B07C00; --brand-soft:#FBF0D0;
  --action:#1D5FD1; --action-fg:#FFFFFF; --action-soft:#E9F0FC; --action-ink:#163F8C;
  --good-bg:#E2F2E6; --good:#1C6A3B;
  --mid-bg:#FAF0D2; --mid:#6A4D00;
  --bad-bg:#FBE5D7; --bad:#893308;
  --crit-bg:#FBE2DF; --crit:#8E1C11; --crit-line:#B42318;
  --need-line:#D99A00;
  --ink-btn:#1A1A17; --ink-btn-fg:#FFFFFF;
  --danger:#C42B1C;
  --logo-filter:none;
  --sans:"IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#141412; --surface:#1D1D1A; --sunken:#181816; --line:#2F2E2A; --line-soft:#272623; --line-strong:#3E3D38;
  --fg:#EDECE6; --fg-2:#D2D1CA; --muted:#A3A198;
  --brand:#E8B23A; --brand-soft:#3A2F12;
  --action:#5B92F0; --action-fg:#0E1420; --action-soft:#1C2A44; --action-ink:#AFC8F7;
  --good-bg:#16301F; --good:#8FD6A6;
  --mid-bg:#352C10; --mid:#EBCB72;
  --bad-bg:#3A2213; --bad:#F2AE84;
  --crit-bg:#3E1B17; --crit:#F5A79E; --crit-line:#E5534B;
  --need-line:#E8B23A;
  --ink-btn:#EDECE6; --ink-btn-fg:#141412;
  --danger:#F0675A;
  --logo-filter:invert(1) hue-rotate(180deg);
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#141412; --surface:#1D1D1A; --sunken:#181816; --line:#2F2E2A; --line-soft:#272623; --line-strong:#3E3D38;
  --fg:#EDECE6; --fg-2:#D2D1CA; --muted:#A3A198;
  --brand:#E8B23A; --brand-soft:#3A2F12;
  --action:#5B92F0; --action-fg:#0E1420; --action-soft:#1C2A44; --action-ink:#AFC8F7;
  --good-bg:#16301F; --good:#8FD6A6;
  --mid-bg:#352C10; --mid:#EBCB72;
  --bad-bg:#3A2213; --bad:#F2AE84;
  --crit-bg:#3E1B17; --crit:#F5A79E; --crit-line:#E5534B;
  --need-line:#E8B23A;
  --ink-btn:#EDECE6; --ink-btn-fg:#141412;
  --danger:#F0675A;
  --logo-filter:invert(1) hue-rotate(180deg);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:13px;line-height:1.35;font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:110;background:var(--surface)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--action);outline-offset:2px}
a{color:var(--action)}
.wrap{max-width:1480px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* Header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:100;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding-block:10px}
.logo{display:block;line-height:0}
.logo img{height:40px;width:auto;filter:var(--logo-filter)}
.app{display:flex;flex-direction:column;gap:2px}
.app b{font-size:13px}.app b small{font-weight:400;color:var(--muted);font-size:10px;margin-left:4px}
.app span{font-size:11px;color:var(--muted)}
.acct{display:flex;align-items:center;gap:14px}
.acct select,.lang select{padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.acct select{min-width:190px}
.acct-meta{display:flex;flex-direction:column;gap:2px}
.acct-meta b{font-size:13px}
.acct-meta span{font-family:var(--mono);font-size:11px;color:var(--muted)}
.grow{flex:1 1 0}
.lang{display:flex;align-items:center;gap:6px;color:var(--muted)}
.profile{display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.who img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.who div{display:flex;flex-direction:column;gap:1px}
.who b{font-size:13px}.who span{font-size:11px;color:var(--muted)}
.logout{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--danger);display:grid;place-items:center;cursor:pointer}
.logout:hover{background:var(--crit-bg)}
/* Left sidebar (shell.js): always 64px of icons beside the page. Hovering it (or tabbing into it) opens it to 232px
   OVER the page (.side.is-open) — the page keeps its 64px offset and is not reflowed. Phone (≤720px): off-canvas overlay
   opened from the header button (html.side-mob). */
:root{--side-w:64px}
html body{margin:0;padding-left:var(--side-w)}
.top{margin-left:calc(-1 * var(--side-w))}
/* Header pinned (Şaban, Oct 29: it moved up/down while scrolling — trackpad overscroll "bounce" dragged the sticky header
   along). Now position:fixed + the page starts below it (--hdr-h, set by shell.js) + no scroll chaining / bounce. */
html,body{overscroll-behavior-y:none}
html{scroll-padding-top:calc(var(--hdr-h,71px) + 8px)}
html body{padding-top:var(--hdr-h,71px)}
header.top{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);margin-left:0}
.top .bar{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.side-tog{flex:none;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg-2);display:none;place-items:center;cursor:pointer}
.side-tog:hover{background:var(--sunken);color:var(--fg)}
.side{position:fixed;top:calc(env(safe-area-inset-top,0px) + var(--hdr-h,61px));left:0;bottom:0;width:64px;z-index:90;background:var(--surface);border-right:1px solid var(--line);overflow-x:hidden;overflow-y:auto;padding:6px 8px calc(10px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));transition:width .16s ease,box-shadow .16s ease;scrollbar-width:thin}

.sg{display:flex;flex-direction:column;gap:2px}
.sg-t{display:block;padding:12px 12px 4px;font-size:11px;font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg:first-child .sg-t{padding-top:6px}
.side a{display:flex;align-items:center;gap:12px;min-height:40px;padding:0 13px;border-radius:8px;color:var(--fg-2);text-decoration:none;font-size:13px;white-space:nowrap}
.side a span{overflow:hidden;text-overflow:ellipsis}
.side a:hover{background:var(--sunken);color:var(--fg)}
.side a[aria-current="page"]{color:var(--brand);font-weight:600;background:var(--brand-soft)}
.side svg{flex:none;width:22px;height:22px}


.side-scrim{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.25)}
@media (max-width:720px){
  :root{--side-w:0px}
  .side-tog{display:grid;margin-right:-4px}
  .side{width:min(260px,85vw);transform:translateX(-100%);visibility:hidden;transition:transform .18s ease,visibility 0s .18s;box-shadow:10px 0 30px rgba(0,0,0,.15)}
  html.side-mob .side{transform:none;visibility:visible;transition:transform .18s ease}
  html.side-mob .sg-t,html.side-mob .side a span{display:block}
  html.side-mob .sg+.sg{margin-top:0;padding-top:0;border-top:0}
}
@media (prefers-reduced-motion:reduce){.side{transition:none}}

/* Toolbars */
/* Standard vertical space between page blocks (all pages): --block-gap. Page bodies that wrap their blocks in one container use .pw-blocks. */
:root{--block-gap:12px}
main{display:flex;flex-direction:column;gap:var(--block-gap);padding-block:16px 40px}
.pw-blocks{display:flex;flex-direction:column;gap:var(--block-gap);min-width:0}
.pw-blocks[hidden]{display:none}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
h1{margin:0;font-size:20px;font-weight:700;margin-right:auto}
.seg{display:flex;border:1px solid var(--line-strong);border-radius:8px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;padding:7px 12px;cursor:pointer}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink-btn);color:var(--ink-btn-fg);font-weight:600}
.box{display:flex;align-items:center;gap:8px;padding:0 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);min-height:34px}
.box input{border:0;outline:none;background:transparent;padding:7px 0;min-width:0;width:220px}
.lbl{font-size:12px;color:var(--muted)}
.chip{padding:5px 12px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink-btn);color:var(--ink-btn-fg);border-color:var(--ink-btn);font-weight:500}
/* Urgent / Needed priority chips: same shape and weight as a plain chip (Şaban, Oct 29) — only the colour tells them apart;
   pressed = the colour's soft fill + a 1px inner ring (like the Successful chip) */
.chip.urgent{border-color:var(--crit-line);color:var(--crit)}
.chip.needed{border-color:var(--need-line);color:var(--mid)}
.chip.urgent[aria-pressed="true"]{background:var(--crit-bg);color:var(--crit);border-color:var(--crit-line);box-shadow:inset 0 0 0 1px var(--crit-line)}
.chip.needed[aria-pressed="true"]{background:var(--mid-bg);color:var(--mid);border-color:var(--need-line);box-shadow:inset 0 0 0 1px var(--need-line)}
.chip .n{font-size:11px;opacity:.8;margin-left:4px}
.vr{width:1px;height:22px;background:var(--line-strong);margin:0 6px}

.summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.sum{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.sum h3{margin:0;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sum .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sum .g div{display:flex;flex-direction:column;gap:1px}
.sum .k{font-size:11px;color:var(--muted)}.sum .v{font-size:16px;font-weight:700}.sum .b{font-size:11px;color:var(--muted)}

.strip{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.budget{display:flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.budget div{padding:5px 12px;display:flex;flex-direction:column;gap:1px}
.budget div+div{border-left:1px solid var(--line)}
.budget span{font-size:11px;color:var(--muted)}.budget b{font-weight:600}
.btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:7px 12px;cursor:pointer}
.btn.ink{background:var(--ink-btn);color:var(--ink-btn-fg);border-color:var(--ink-btn);font-weight:600}
select.sel{padding:7px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}

/* Campaign cards */
.list-scroll{overflow-x:auto;padding:2px}
.list{min-width:1260px;display:flex;flex-direction:column;gap:6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card.urgent{border:3px solid var(--crit-line)}
.card.needed{border:1.5px solid var(--need-line)}
.cg{display:grid;grid-template-columns:minmax(0,2.4fr) minmax(0,1fr) minmax(0,.72fr) minmax(0,.95fr) minmax(0,1.9fr) 128px}
.blk{padding:7px 12px;display:flex;flex-direction:column;justify-content:center;gap:3px;font-size:11.5px;min-width:0}
.blk+.blk{border-left:1px solid var(--line-soft)}
.blk.opt{padding:6px 10px;font-size:11px;gap:3px}
.blk.opt .kv span{font-size:10.5px}
.kv{display:flex;justify-content:space-between;gap:6px}
.kv span{color:var(--muted)}.kv b{font-weight:600}
.top-line{display:flex;align-items:center;gap:6px;min-width:0;color:var(--fg-2)}
.top-line input{margin:0;width:15px;height:15px;flex:none}
.top-line .pf{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-line code,.idl code{font-family:var(--mono);font-size:10.5px;color:var(--muted)}
.cname{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cname-row{display:flex;align-items:center;gap:4px;min-width:0}.cname-row .cname{min-width:0;flex:0 1 auto}
.cn-copy{flex:none;width:20px;height:20px;background:transparent;color:var(--fg-3,var(--fg-2));opacity:.7}.cn-copy:hover,.cn-copy:focus-visible{opacity:1;background:var(--sunken);color:var(--fg)}.cn-copy.done{opacity:1;color:var(--good,#1a7f37)}
.idl{display:flex;align-items:center;gap:6px;min-width:0}
.tog{flex:none;width:24px;height:24px;padding:0;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--fg-2);display:grid;place-items:center;cursor:pointer}
.tog svg{transition:transform .15s}
.tog[aria-expanded="true"]{background:var(--action-soft)}
.tog[aria-expanded="true"] svg{transform:rotate(90deg)}
.tags{display:flex;flex-wrap:wrap;gap:4px}
.tag{font-size:10.5px;padding:1px 6px;border-radius:5px;background:var(--sunken);border:1px solid var(--line);color:var(--fg-2)}
.tag.kind{background:var(--action-soft);border-color:transparent;color:var(--action-ink);font-weight:600}
.tag.on{background:var(--good-bg);border-color:transparent;color:var(--good)}
.tag.p-urgent{background:var(--crit-bg);border-color:transparent;color:var(--crit);font-weight:600}
.tag.p-needed{background:var(--mid-bg);border-color:transparent;color:var(--mid);font-weight:600}
.bud{display:flex;align-items:center;gap:6px}
.bud .k{color:var(--muted);width:42px;flex:none}
.money{font-size:13px;font-weight:700;padding:0 8px;line-height:22px;border:1px solid var(--line-strong);border-radius:6px}
.icon-btn{width:24px;height:24px;padding:0;border:0;border-radius:6px;background:var(--sunken);color:var(--fg-2);display:grid;place-items:center;cursor:pointer}
.meter{flex:1;height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden}
.meter i{display:block;height:100%;background:var(--action)}
.meter i.full{background:var(--crit-line)}
.oob{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--crit)}
.acos{align-self:flex-start;font-size:14px;font-weight:700;padding:0 8px;line-height:22px;border-radius:6px}
.t-good{background:var(--good-bg);color:var(--good)}.t-mid{background:var(--mid-bg);color:var(--mid)}
.t-bad{background:var(--bad-bg);color:var(--bad)}.t-crit{background:var(--crit-bg);color:var(--crit)}
.t-none{background:var(--sunken);color:var(--muted)}
.det{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 12px;align-content:center}
.pl{padding:5px 12px;gap:0}
.pl .r{display:grid;grid-template-columns:1.35fr .65fr .9fr .9fr .9fr;gap:0 8px;align-items:center;line-height:19px}
.pl .h{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pl .r span:first-child{white-space:nowrap;color:var(--fg-2)}
.mod{justify-self:start;padding:0 6px;line-height:17px;border:1px solid var(--line-strong);border-radius:5px;cursor:text}
.mod.na{border-style:dashed;color:var(--muted)}
.pa{justify-self:start;padding:0 5px;line-height:17px;border-radius:5px;font-weight:600}
.opt-btn{display:flex;align-items:center;justify-content:center;gap:6px;min-height:24px;border-radius:6px;background:var(--action);color:var(--action-fg);font-weight:600;font-size:11.5px;text-decoration:none}
.opt-btn:hover{filter:brightness(1.08)}
.note-btn{display:flex;align-items:center;justify-content:center;gap:5px;min-height:22px;border-radius:6px;border:1px solid var(--line-strong);background:var(--surface);color:var(--fg-2);font-size:11px;cursor:pointer;padding:0 6px}
.note-btn:hover{background:var(--sunken)}
.late{color:var(--bad)}.warn{color:var(--mid)}.fresh{color:var(--good)}

.panel{border-top:1px solid var(--line-soft);background:var(--sunken);padding:10px 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.pbox{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 12px;min-width:0}
.pbox h4{margin:0 0 6px;font-size:12px}
.tbl{display:grid;gap:3px 10px;font-size:12px}
.tbl .h{color:var(--muted)}
.tbl .tgt-n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-weight:500}
.tbl .tgt-n small{font-weight:400;color:var(--muted)}
.share{display:grid;grid-template-columns:110px 1fr 40px;gap:10px;align-items:center;font-size:12px;margin-bottom:5px}
.share .meter{height:7px}
.share b{text-align:right}
.prod{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:12px}
.thumb{width:36px;height:36px;border-radius:6px;background:var(--line-soft)}
.prod .t{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.links{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:16px;font-size:12px;align-items:center}
.links span{color:var(--muted)}
.empty{padding:24px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line-strong);border-radius:10px}

.total{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 14px;display:flex;flex-wrap:wrap;gap:8px 24px}
.note{font-size:11.5px;color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink-btn);color:var(--ink-btn-fg);padding:8px 14px;border-radius:8px;font-size:12px;z-index:220}
@media (max-width:720px){.box input{width:140px}.acct select{min-width:0}.acct-meta{display:none}}
@media (prefers-reduced-motion:reduce){.tog svg{transition:none}}

/* ---- components first built for Campaigns ---- */

[hidden]{display:none!important}
/* Date picker (old-app style: calendar icon, start/end pills, day-count pill, dropdown calendar) */
.dp{position:relative}
.dp-box{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface);cursor:pointer;user-select:none}
.dp-box:hover{border-color:var(--fg-2)}
.dp-ic{width:28px;height:28px;display:grid;place-items:center;color:var(--fg-2)}
.pill{padding:4px 10px;border-radius:7px;background:var(--sunken);border:1px solid var(--line);font-size:12.5px;font-weight:500}
.pill.days{font-size:11px;color:var(--muted);padding:3px 8px}
.dp-open{width:30px;height:28px;border:0;border-radius:7px;background:transparent;color:var(--fg-2);display:grid;place-items:center;cursor:pointer}
.dp-open:hover{background:var(--sunken)}
.cal{position:absolute;top:calc(100% + 6px);left:0;z-index:8;width:300px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.14);padding:12px}
.cal-head{display:flex;align-items:center;gap:6px;margin-bottom:8px}
.cal-head select{padding:4px 6px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface)}
.cal-nav{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--surface);cursor:pointer;display:grid;place-items:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.cal-grid .wd{font-size:10.5px;color:var(--muted);padding:4px 0}
.cal-grid button{border:0;background:transparent;height:32px;border-radius:6px;cursor:pointer;font-size:12px}
.cal-grid button:hover{background:var(--sunken)}
.cal-grid button.in{background:var(--action-soft);border-radius:0}
.cal-grid button.edge{background:var(--action);color:var(--action-fg);font-weight:600;border-radius:6px}
.cal-grid button.out{color:var(--line-strong)}
.cal-grid button:disabled{color:var(--line-strong);cursor:default}
.cal.has-pre{width:460px;display:grid;grid-template-columns:136px minmax(0,1fr);gap:12px}
.cal-pre{display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line);padding-right:10px}
.cal-pre button{border:0;background:transparent;text-align:left;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:12.5px;color:var(--fg)}
.cal-pre button:hover{background:var(--sunken)}
.cal-pre button[aria-pressed="true"]{background:var(--action-soft);color:var(--action-ink);font-weight:600}
@media (max-width:560px){.cal.has-pre{width:min(300px,calc(100vw - 32px));grid-template-columns:minmax(0,1fr)}.cal-pre{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:0 0 8px}.cal-pre button{padding:4px 8px;border:1px solid var(--line);font-size:11.5px}}
.cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11.5px;color:var(--muted)}
.sum h3 .rng{display:block;text-transform:none;letter-spacing:0;font-weight:500;color:var(--fg-2);font-size:11.5px;margin-top:2px}

/* Select-all row + bulk drawer */
.listbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:8px 12px}
.listbar label{display:flex;align-items:center;gap:8px;cursor:pointer}
.listbar input{width:16px;height:16px;margin:0}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--action-fg);font-weight:600}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:200}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);z-index:201;background:var(--surface);border-left:1px solid var(--line);box-shadow:-10px 0 30px rgba(0,0,0,.15);display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);padding-right:env(safe-area-inset-right,0px)}
.dr-head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--line)}
.dr-head h2{margin:0;font-size:16px;flex:1}
.dr-close{width:32px;height:32px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;display:grid;place-items:center}
.dr-body{flex:1;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:14px}
.dr-sec{border:1px solid var(--line);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.dr-sec h3{margin:0;font-size:13px}
.dr-sec p{margin:0;font-size:12px;color:var(--muted)}
.radios{display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.radios label{display:flex;align-items:center;gap:8px}
.inrow{display:flex;gap:8px;align-items:center}
.inrow input,.dr-sec textarea{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface)}
.dr-sec textarea{min-height:70px;resize:vertical}
.btn.warn-btn{border-color:var(--crit-line);color:var(--crit);background:var(--crit-bg);font-weight:600}
.preview-line{font-size:12px;color:var(--fg-2)}
.tag.paused{background:var(--sunken);color:var(--muted)}
.tag.arch{background:var(--sunken);color:var(--muted);text-decoration:line-through}
/* Status switch left of campaign type */
.sw{position:relative;flex:none;width:30px;height:17px;display:inline-block;cursor:pointer}
.sw input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.sw span{position:absolute;inset:0;border-radius:999px;background:var(--line-strong);transition:background .15s}
.sw span::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.sw input:checked+span{background:var(--good-sw)}
.sw input:checked+span::after{transform:translateX(13px)}
.sw input:focus-visible+span{outline:2px solid var(--action);outline-offset:2px}
.sw input:disabled{cursor:not-allowed}.sw input:disabled+span{opacity:.45}
.sw.busy span{opacity:.6}
:root{--good-sw:#16A34A;--ok-bg:#22C55E;--err-bg:#EF4444;--be-bg:#BFDBFE}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--good-sw:#22C55E;--ok-bg:#16A34A;--err-bg:#DC2626;--be-bg:#1E3A5F}}
:root[data-theme="dark"]{--good-sw:#22C55E;--ok-bg:#16A34A;--err-bg:#DC2626;--be-bg:#1E3A5F}
/* Inline budget editor and Amazon response states (old app: green on success, red on error) */
.bud-edit{display:flex;align-items:stretch;background:var(--be-bg);padding:2px;border-radius:7px}
.bud-edit .cur{display:grid;place-items:center;width:20px;background:var(--sunken);border:1px solid var(--line-strong);border-right:0;border-radius:6px 0 0 6px;font-size:12px}
.bud-in{width:64px;padding:2px 6px;border:1px solid var(--line-strong);border-radius:0 6px 6px 0;background:var(--surface);font-size:12.5px;font-weight:600}
.be-ok,.be-x{width:24px;height:24px;padding:0;border:0;border-radius:6px;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--fg)}
.be-ok:hover,.be-x:hover{background:var(--sunken)}
.money.ok{background:var(--ok-bg);border-color:var(--ok-bg);color:#fff}
.money.err{background:var(--err-bg);border-color:var(--err-bg);color:#fff}
.money.saving{color:var(--muted);display:inline-flex;align-items:center;gap:5px}
.spin{width:10px;height:10px;border-radius:50%;border:2px solid var(--line-strong);border-top-color:var(--action);animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.listbar{scroll-margin-top:150px}
.filters-sticky{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--hdr-h,128px));z-index:4;background:var(--bg);display:flex;flex-direction:column;gap:10px;padding-block:10px;margin-block:-10px 0;border-bottom:1px solid transparent}
.filters-sticky.stuck{border-bottom-color:var(--line);box-shadow:0 6px 10px -8px rgba(0,0,0,.18)}
.listbar{scroll-margin-top:calc(var(--hdr-h,128px) + 120px)}
.chip.greatchip{border-color:var(--great-line);color:var(--good)}
.chip.greatchip[aria-pressed="true"]{background:var(--good-bg);color:var(--good);border-color:var(--great-line);box-shadow:inset 0 0 0 2px var(--great-line)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
main > .row:first-of-type{justify-content:flex-start}
.card.great{border:1px solid var(--great-line);box-shadow:0 0 0 .5px var(--great-line)}
:root{--great-line:#16A34A;--sw-on:#7CC497}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--great-line:#4ADE80;--sw-on:#4E9A6B}}
:root[data-theme="dark"]{--great-line:#4ADE80;--sw-on:#4E9A6B}
.sw{width:24px;height:14px}
.sw span::after{top:2px;left:2px;width:10px;height:10px}
.sw input:checked+span{background:var(--sw-on)}
.sw input:checked+span::after{transform:translateX(10px)}
.pagebar{justify-content:flex-end}
.pagebar:first-of-type{margin-top:-4px}
.meter i.hi{background:#F97316}
.meter i.mid{background:#EAB308}
.bud-msg{font-size:10.5px;color:var(--crit);line-height:1.2;white-space:normal}
.icon-btn:disabled{opacity:.4;cursor:not-allowed}
/* Pagination */
.perpage{display:flex;align-items:center;gap:6px}
.perpage .seg button{padding:5px 10px}
.pager{display:flex;align-items:center;gap:4px}
.pg{min-width:32px;height:32px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-weight:500}
.pg:hover{border-color:var(--line-strong)}
.pg[aria-current="page"]{background:var(--ink-btn);color:var(--ink-btn-fg);border-color:var(--ink-btn)}
.pg:disabled{opacity:.4;cursor:not-allowed}
.pg-gap{padding:0 4px;color:var(--muted)}
.pagebar{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px}
.linkbtn{border:0;background:none;padding:0;color:var(--action);cursor:pointer;font:inherit;text-decoration:underline}
/* Toast variants */
.toast.ok{background:var(--ok-bg);color:#fff}
.toast.err{background:var(--err-bg);color:#fff}
/* Notes drawer list */
.nd-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.nd-list li{border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.nd-list li p{margin:0 0 4px;white-space:pre-wrap}
.nd-list li span{font-size:11px;color:var(--muted)}
.nd-list li.none{border-style:dashed;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}.sw span,.sw span::after{transition:none}}
/* Budget block: utilization bar on its own row, same full width on every card */
.budget-meter{flex:none;width:100%;height:8px;border-radius:4px;margin-block:1px 2px}
.bud .util{margin-left:auto;font-weight:600;color:var(--fg-2)}
.bud .util.over{color:var(--crit)}
.bud.avg{color:var(--muted);font-size:11px}
.bud.avg .k{width:auto}
.bud .k{width:auto;min-width:42px;white-space:nowrap}
.cg{grid-template-columns:minmax(0,1.95fr) minmax(0,1.12fr) minmax(0,.88fr) minmax(0,1.2fr) minmax(0,1.85fr) 140px}
.bud .util.over{font-size:10.5px;font-weight:700}
.pl .r{grid-template-columns:1.3fr .55fr .85fr 1fr 1fr;gap:0 6px}
.pl .r span{white-space:nowrap}
.blk.det .kv{min-width:0}
.blk.det .kv b{white-space:nowrap}
.blk.opt .kv{white-space:nowrap}
/* Priority borders drawn with box-shadow so every card keeps the same height */
.list-scroll{padding:4px}
.card.urgent{border:1px solid var(--crit-line);box-shadow:0 0 0 2px var(--crit-line)}
.card.needed{border:1px solid var(--need-line);box-shadow:0 0 0 .5px var(--need-line)}
.card .cg{min-height:105px}

/* Dropdowns, matched to the old app: white trigger box with soft shadow, chevron flips when open, bordered menu with rounded hover rows */
:root{--dd-hover:#D6ECFA;--py-light:#FCEFBF;--py-ink:#1A1A17;--py-deep:#F2C200;--py-deep-ink:#1A1A17}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--dd-hover:#1E3A52;--py-light:#463812;--py-ink:#F6E3A6;--py-deep:#F2C200;--py-deep-ink:#141412}}
:root[data-theme="dark"]{--dd-hover:#1E3A52;--py-light:#463812;--py-ink:#F6E3A6;--py-deep:#F2C200;--py-deep-ink:#141412}
.dd{position:relative}
.dd-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:7px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);cursor:pointer;text-align:left;font-size:12.8px}
.dd-btn:hover{border-color:var(--line-strong)}
.dd-chev{flex:none;transition:transform .15s}
.dd.open .dd-chev{transform:rotate(180deg)}
.dd-menu{position:absolute;top:100%;left:0;margin:4px 0 0;padding:12px;list-style:none;min-width:100%;max-height:384px;overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);z-index:12;outline:none}
.dd-menu li{padding:12px 8px;border-radius:12px;cursor:pointer;font-size:12.8px;white-space:nowrap}
.dd-menu{display:flex;flex-direction:column;gap:4px}
.dd-menu[hidden]{display:none}
.dd-menu li:hover,.dd-menu li.kb{background:var(--dd-hover)}
/* Selected item: light Patara yellow; hovered/focused selected item: deep Patara yellow */
.dd-menu li[aria-selected="true"]{font-weight:600;background:var(--py-light);color:var(--py-ink)}
.dd-menu li[aria-selected="true"]:hover,.dd-menu li[aria-selected="true"].kb{background:var(--py-deep);color:var(--py-deep-ink)}
.dd-acct .dd-btn{width:180px;font-weight:500}
.dd-acct .dd-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-acct .dd-menu{width:220px}
.dd-sort .dd-btn{min-width:220px}
.dd-sort .dd-menu{right:0;left:auto}
.lang .dd-btn{min-width:110px}
.lang .dd-menu{right:0;left:auto}
@media (prefers-reduced-motion:reduce){.dd-chev{transition:none}}
.chip.oobchip[aria-pressed="false"]{border-color:var(--crit-line);color:var(--crit)}

/* ---- shared since Dashboard ---- */
.tgt-link{color:inherit;text-decoration:underline dotted var(--line-strong);text-underline-offset:3px}
.tgt-link:hover{color:var(--action);text-decoration-color:var(--action)}
/* Dropdown option with a small second line (opts[].sub), e.g. Optimization campaign picker: spend · sales */
.dd-menu li small.dd-sub{display:block;margin-top:2px;font-size:10.5px;font-weight:400;color:var(--muted)}



/* Layers (page-wide): page content and its popovers < 80 · phone menu scrim 80 · sidebar 90 · header 100 (+ its own
   dropdowns) · safe-area strip 110 · drawers/scrims 200–201 · toast 220. Page popovers must stay below 80 so they slide
   under the sticky header and the sidebar when the page scrolls. */
/* Account picker in the header: plain text (account name + ID); clicking it opens the list */
.dd-plain .dd-btn{border-color:transparent;background:transparent;box-shadow:none;min-height:0;padding:4px 8px;margin-left:-8px;gap:8px;border-radius:8px}
.dd-plain .dd-btn:hover,.dd-plain.open .dd-btn{background:var(--sunken);border-color:var(--line)}
.dd-plain .dd-val{display:flex;flex-direction:column;gap:2px;min-width:0}
.dd-plain .dd-val b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dd-plain .dd-val small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.dd-acct.dd-plain .dd-btn{width:auto;max-width:280px}
.dd-acct.dd-plain .dd-menu{width:auto;min-width:calc(100% + 8px);left:-8px;margin-top:6px}
/* Sidebar pin (bottom): pinned = always open with names, page pushed right by the full width (no hover overlay) */
.side{display:flex;flex-direction:column}
.side-nav{flex:1 0 auto;display:flex;flex-direction:column}
.side-pin-btn{flex:none;display:flex;align-items:center;gap:12px;width:100%;min-height:40px;margin-top:8px;padding:0 13px;border:0;border-top:1px solid var(--line-soft);border-radius:0 0 8px 8px;background:transparent;color:var(--muted);font-size:12.5px;white-space:nowrap;cursor:pointer;text-align:left}
.side-pin-btn:hover{background:var(--sunken);color:var(--fg)}
.side-pin-btn svg{flex:none;width:22px;height:22px}
.side-pin-btn span{overflow:hidden;text-overflow:ellipsis}

.side-pin-btn[aria-pressed="true"]{color:var(--brand)}
.side-pin-btn[aria-pressed="true"] .pin-arr{transform:scaleX(-1);transform-origin:14px 12px}
html.side-pin{--side-w:232px}
html.side-pin .side{box-shadow:none}
@media (max-width:720px){html.side-pin{--side-w:0px}.side-pin-btn{display:none}}

/* Sidebar v3: compact rows, one colour per section, not-yet-designed pages greyed out.
   Icons sit at exactly the same place collapsed and open: every section keeps a 22px title slot in both states
   (collapsed it shows a short rule instead of the text), so opening only reveals text to the right of the icons. */
:root{--sg-advertising:#1D5FD1;--sg-products:#1C7A4A;--sg-sales-reports:#7A3FC4;--sg-admin:#B4560F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sg-advertising:#7FA9F5;--sg-products:#7FD3A2;--sg-sales-reports:#C2A0F2;--sg-admin:#F0A866}}
:root[data-theme="dark"]{--sg-advertising:#7FA9F5;--sg-products:#7FD3A2;--sg-sales-reports:#C2A0F2;--sg-admin:#F0A866}
.sg-advertising{--gc:var(--sg-advertising)}.sg-products{--gc:var(--sg-products)}.sg-sales-reports{--gc:var(--sg-sales-reports)}.sg-admin{--gc:var(--sg-admin)}
.side{padding-top:2px}
.sg{gap:1px}
.sg-t,.sg:first-child .sg-t{position:relative;display:block;height:22px;padding:7px 12px 0;font-size:10.5px;line-height:14px;letter-spacing:.02em;color:var(--gc,var(--muted))}



.side a{min-height:32px;gap:10px;font-size:12.5px}
.side svg{width:20px;height:20px}
.side a:not(.soon) svg{color:var(--gc,currentColor)}
.side a.soon{color:var(--muted);opacity:.55}
.side a.soon:hover{opacity:.8}
.side a[aria-current="page"]{background:color-mix(in srgb,var(--gc,var(--brand)) 13%,transparent);color:var(--gc,var(--brand))}
.side-pin-btn{min-height:32px;gap:10px}
.side-pin-btn svg{width:20px;height:20px}

/* Marketplace flags (account picker in the header and its list) */
.flag{flex:none;width:20px;height:14px;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.12);overflow:hidden;vertical-align:middle}
.flag-cc{display:inline-grid;place-items:center;font:600 8.5px/1 var(--mono);color:var(--fg-2);background:var(--sunken)}
/* Header: flag at a fixed 20×14, top-aligned with the account name; name and ID stacked to its right */
.dd-plain .dd-val{flex-direction:row;align-items:flex-start;gap:8px}
.dd-plain .dd-val .flag{width:20px;height:14px;margin-top:2px}
.acct-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-txt b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* List: flag as tall as the capital letters, sitting on the text baseline (top = cap top, bottom = baseline) */
.acct-opt{display:block;white-space:nowrap}
.acct-opt .flag{width:auto;height:.72em;height:1cap;aspect-ratio:10/7;vertical-align:baseline;margin-right:7px;border-radius:1.5px}
.acct-opt .flag-cc{width:auto;padding:0 2px;font-size:.6em;line-height:1cap}

/* Account picker v3: marketplace split from the name. Header = 2×2 grid: [flag | name] over [code | profile ID];
   each row is centred on its own line, so the flag sits on the name line and the code on the ID line. */
.dd-plain .dd-val{display:block}
.acct-grid{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:18px 15px;column-gap:8px;align-items:center;justify-items:start}
.acct-grid .flag{width:20px;height:14px;margin:0;justify-self:center}
.acct-grid b{font-size:13px;line-height:18px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.acct-grid .mkt{justify-self:center;font:600 10.5px/15px var(--mono);color:var(--muted);letter-spacing:.04em}
.acct-grid small{font:11px/15px var(--mono);color:var(--muted);padding:0}
.acct-opt .mkt{display:inline-block;width:2.2em;font:600 .8em var(--mono);color:var(--muted);letter-spacing:.03em}


/* Header brand: logo | "Patara Web" with a bordered v2.0 tag at its bottom-right | account picker */
.bar>.logo img{height:34px;width:auto}
.hdr-div{flex:none;width:1px;height:34px;background:var(--line-strong)}
.brand-name{display:flex;flex-direction:column;align-items:flex-end;gap:3px;line-height:1}
.brand-name b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--fg)}
.brand-name .ver{font:600 9.5px/1 var(--mono);padding:2px 5px;border:1px solid var(--line-strong);border-radius:4px;color:var(--muted);background:var(--sunken)}
@media (max-width:720px){.hdr-div{display:none}}

/* Sidebar theme row (above the pin): palette icon · "Theme" · current theme name; opens the theme picker */
.side-theme{flex:none;display:flex;align-items:center;gap:10px;width:100%;min-height:32px;margin-top:8px;padding:0 13px;border:0;border-top:1px solid var(--line-soft);border-radius:0;background:transparent;color:var(--muted);font-size:12.5px;white-space:nowrap;cursor:pointer;text-align:left}
.side-theme:hover{background:var(--sunken);color:var(--fg)}
.side-theme svg{flex:none;width:20px;height:20px;color:var(--brand)}
.side-theme .th-l{overflow:hidden;text-overflow:ellipsis}
.side-theme .th-cur{margin-left:auto;font-size:11px;color:var(--muted);padding:1px 6px;border:1px solid var(--line);border-radius:5px}

.side-theme+.side-pin-btn{margin-top:0;border-top:0}
/* Theme picker dialog */
.th-scrim{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.08)}
.th-dlg{position:fixed;z-index:201;left:50%;top:50%;transform:translate(-50%,-50%);width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 48px);display:flex;flex-direction:column;background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.3)}
.th-dlg .dr-head{padding:14px 18px}
.th-body{overflow:auto;padding:4px 18px 18px;display:flex;flex-direction:column;gap:14px}
.th-grp h3{margin:6px 0 8px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.th-card{display:flex;flex-direction:column;gap:7px;padding:7px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);cursor:pointer;text-align:left;font-size:12.5px;font-weight:500}
.th-card:hover{border-color:var(--line-strong);background:var(--sunken)}
.th-card[aria-pressed="true"]{border-color:var(--action);box-shadow:0 0 0 2px var(--action)}
.th-card[aria-pressed="true"] .th-nm::after{content:"✓";margin-left:6px;color:var(--action);font-weight:700}
.th-pv{position:relative;display:block;height:72px;border-radius:7px;overflow:hidden;background:var(--p-bg);border:1px solid rgba(127,127,127,.25)}
.th-pv i{position:absolute;display:block}
.th-pv .pv-top{left:0;right:0;top:0;height:14px;background:var(--p-sf);border-bottom:1px solid rgba(127,127,127,.2)}
.th-pv .pv-dot{left:6px;top:4px;width:18px;height:6px;border-radius:3px;background:var(--p-br)}
.th-pv .pv-side{left:0;top:14px;bottom:0;width:16px;background:var(--p-sf);border-right:1px solid rgba(127,127,127,.2)}
.th-pv .pv-ic{left:4px;width:8px;height:8px;border-radius:2px;background:var(--p-br);opacity:.8}
.th-pv .pv-card{left:24px;right:8px;top:21px;height:22px;border-radius:4px;background:var(--p-sf)}
.th-pv .pv-a{left:24px;top:50px;width:42px;height:12px;border-radius:4px;background:var(--p-ac)}
.th-pv .pv-b{left:72px;top:50px;width:30px;height:12px;border-radius:4px;background:var(--p-ink)}


/* ---------- Themes: skins layered on the light/dark base (shell.js sets data-theme + data-skin) ----------
   [data-theme] in the selector lifts these above the pages' own light/dark variables. */
:root[data-theme][data-skin="sun"]{
  color-scheme:light;
  --bg:#F3EBDD; --surface:#FBF6EC; --sunken:#F5EDE0; --line:#E3D6C1; --line-soft:#ECE2D2; --line-strong:#D2C2A8;
  --fg:#2B2118; --fg-2:#4A3B2D; --muted:#7A6753;
  --brand:#B26B00; --brand-soft:#F6E2BE;
  --action:#B8521F; --action-fg:#FFF8EF; --action-soft:#F7E1D1; --action-ink:#8A3A12;
  --good-bg:#E5EDD3; --good:#4B6B1E; --mid-bg:#F6E7C2; --mid:#7A5300; --bad-bg:#F8DCC8; --bad:#8F3A0C;
  --crit-bg:#F6D9D2; --crit:#922414; --crit-line:#B9381F; --need-line:#D08A12;
  --ink-btn:#3A2A1C; --ink-btn-fg:#FBF6EC; --danger:#B9381F;
  --dd-hover:#F3E3CC; --py-light:#F8E7B8; --py-ink:#2B2118; --py-deep:#EBB93A; --py-deep-ink:#2B2118; --be-bg:#F3DCC4;
  --good-sw:#6B8E23; --sw-on:#9BB36A; --great-line:#6B8E23; --ok-bg:#5E7D2A; --err-bg:#C2410C;
  --sg-advertising:#B8521F; --sg-products:#5E7D2A; --sg-sales-reports:#9A3F6B; --sg-admin:#8A6A2E;
  --c-sales:#2E7D6B; --c-spend:#C27C0E; --c-adsales:#B0457A; --c-acos:#4A3B2D;
  --logo-filter:none;
}
:root[data-theme][data-skin="patara"]{
  color-scheme:dark;
  --bg:#111110; --surface:#1A1917; --sunken:#151413; --line:#2C2A26; --line-soft:#232220; --line-strong:#3D3A34;
  --fg:#F2EFE6; --fg-2:#D8D3C6; --muted:#A39D8E;
  --brand:#F2C200; --brand-soft:#3A3008;
  --action:#F2C200; --action-fg:#141412; --action-soft:#332A08; --action-ink:#F6DA6A;
  --ink-btn:#F2C200; --ink-btn-fg:#141412; --danger:#F0675A;
  --dd-hover:#2E2A1C; --py-light:#4A3D0A; --py-ink:#F8E39A; --py-deep:#F2C200; --py-deep-ink:#141412; --be-bg:#3A3008;
  --sg-advertising:#F2C200; --sg-products:#8FD6A6; --sg-sales-reports:#F0A866; --sg-admin:#C9C2B0;
  --c-sales:#F2C200; --c-spend:#E07A3F; --c-adsales:#E06A9A; --c-acos:#D8D3C6;
  --logo-filter:url(#pw-logo-dark);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--logo-filter:url(#pw-logo-dark)}}
:root[data-theme="dark"]{--logo-filter:url(#pw-logo-dark)}

/* ---------- Themes (12): light/dark base + data-skin palette. Generated by tools/themes — keep shell.js THEMES in sync. ---------- */
:root[data-theme][data-skin="cini"]{
  color-scheme:light;
  --bg:#EAF4F3;
  --surface:#FBFEFD;
  --sunken:#F2F9F8;
  --line:#CFE3E1;
  --line-soft:#E0EEEC;
  --line-strong:#B5D3D0;
  --fg:#10282B;
  --fg-2:#24464A;
  --muted:#557579;
  --brand:#1A4FA0;
  --brand-soft:#DCE6F6;
  --action:#0E8F8C;
  --action-fg:#FFFFFF;
  --action-soft:#D6F0EE;
  --action-ink:#0A5F5D;
  --ink-btn:#1A4FA0;
  --ink-btn-fg:#FFFFFF;
  --danger:#C0392B;
  --dd-hover:#D6F0EE;
  --py-light:#DCE6F6;
  --py-ink:#10282B;
  --py-deep:#1A4FA0;
  --py-deep-ink:#FFFFFF;
  --be-bg:#D6F0EE;
  --sg-advertising:#0E8F8C;
  --sg-products:#1A4FA0;
  --sg-sales-reports:#C0392B;
  --sg-admin:#3E7D5A;
  --c-sales:#0E8F8C;
  --c-spend:#C0392B;
  --c-adsales:#1A4FA0;
  --c-acos:#24464A;
  --logo-filter:none;
}
:root[data-theme][data-skin="firuze"]{
  color-scheme:dark;
  --bg:#0B1718;
  --surface:#102224;
  --sunken:#0D1C1E;
  --line:#1E3638;
  --line-soft:#182D2F;
  --line-strong:#2A4749;
  --fg:#EAF6F5;
  --fg-2:#CBE3E1;
  --muted:#8FB1AE;
  --brand:#D9B26A;
  --brand-soft:#3A3018;
  --action:#34C6BD;
  --action-fg:#06201F;
  --action-soft:#123A3A;
  --action-ink:#9EE9E3;
  --ink-btn:#34C6BD;
  --ink-btn-fg:#06201F;
  --dd-hover:#173A3B;
  --py-light:#123A3A;
  --py-ink:#BDF1EC;
  --py-deep:#34C6BD;
  --py-deep-ink:#06201F;
  --be-bg:#173A3B;
  --sg-advertising:#34C6BD;
  --sg-products:#D9B26A;
  --sg-sales-reports:#7FB6F0;
  --sg-admin:#A9C4C1;
  --c-sales:#34C6BD;
  --c-spend:#D9B26A;
  --c-adsales:#7FB6F0;
  --c-acos:#CBE3E1;
  --logo-filter:url(#pw-logo-dark);
}
:root[data-theme][data-skin="ebru"]{
  color-scheme:light;
  --bg:#F1EEE7;
  --surface:#FFFDF8;
  --sunken:#F7F3EB;
  --line:#DED7CA;
  --line-soft:#EAE4D9;
  --line-strong:#CBC2B2;
  --fg:#1E2430;
  --fg-2:#3A4250;
  --muted:#6B7280;
  --brand:#8E3B5E;
  --brand-soft:#F2DEE6;
  --action:#1C8C8C;
  --action-fg:#FFFFFF;
  --action-soft:#D9EFEE;
  --action-ink:#0F5F5F;
  --ink-btn:#2C3E66;
  --ink-btn-fg:#FFFDF8;
  --dd-hover:#E8F2F1;
  --py-light:#F2DEE6;
  --py-ink:#1E2430;
  --py-deep:#8E3B5E;
  --py-deep-ink:#FFFFFF;
  --be-bg:#D9EFEE;
  --sg-advertising:#1C8C8C;
  --sg-products:#8E3B5E;
  --sg-sales-reports:#2C3E66;
  --sg-admin:#B07A2A;
  --c-sales:#1C8C8C;
  --c-spend:#8E3B5E;
  --c-adsales:#2C3E66;
  --c-acos:#3A4250;
  --logo-filter:none;
}
:root[data-theme][data-skin="nazar"]{
  color-scheme:light;
  --bg:#EDF4F9;
  --surface:#FFFFFF;
  --sunken:#F4F8FB;
  --line:#D3E1EB;
  --line-soft:#E3EDF3;
  --line-strong:#BACDDB;
  --fg:#0D1B2A;
  --fg-2:#23384D;
  --muted:#587089;
  --brand:#1B3F94;
  --brand-soft:#DFE7F8;
  --action:#12A5B5;
  --action-fg:#FFFFFF;
  --action-soft:#D7F2F5;
  --action-ink:#0B6E79;
  --ink-btn:#0D1B2A;
  --ink-btn-fg:#FFFFFF;
  --dd-hover:#D7F2F5;
  --py-light:#DFE7F8;
  --py-ink:#0D1B2A;
  --py-deep:#1B3F94;
  --py-deep-ink:#FFFFFF;
  --be-bg:#D7F2F5;
  --sg-advertising:#12A5B5;
  --sg-products:#1B3F94;
  --sg-sales-reports:#5B6FD6;
  --sg-admin:#587089;
  --c-sales:#12A5B5;
  --c-spend:#1B3F94;
  --c-adsales:#C98A00;
  --c-acos:#23384D;
  --logo-filter:none;
}
:root[data-theme][data-skin="christmas"]{
  color-scheme:dark;
  --bg:#0E1A14;
  --surface:#14241B;
  --sunken:#102018;
  --line:#22382B;
  --line-soft:#1B2E23;
  --line-strong:#2F4A39;
  --fg:#F3EFE6;
  --fg-2:#DCD6C8;
  --muted:#A3AE9F;
  --brand:#E8B84A;
  --brand-soft:#3A3014;
  --action:#D9393C;
  --action-fg:#FFF6F0;
  --action-soft:#3A1A19;
  --action-ink:#F5A3A0;
  --ink-btn:#C62F33;
  --ink-btn-fg:#FFF6F0;
  --dd-hover:#1F3A2B;
  --py-light:#3A3014;
  --py-ink:#F6DE9C;
  --py-deep:#E8B84A;
  --py-deep-ink:#141412;
  --be-bg:#1F3A2B;
  --sg-advertising:#F0716B;
  --sg-products:#7FCB8F;
  --sg-sales-reports:#E8B84A;
  --sg-admin:#C8C2B2;
  --c-sales:#7FCB8F;
  --c-spend:#E8B84A;
  --c-adsales:#F0716B;
  --c-acos:#DCD6C8;
  --logo-filter:url(#pw-logo-dark);
}
:root[data-theme][data-skin="halloween"]{
  color-scheme:dark;
  --bg:#120E15;
  --surface:#1B1520;
  --sunken:#16111A;
  --line:#2E2433;
  --line-soft:#241C29;
  --line-strong:#3E3145;
  --fg:#F1ECF3;
  --fg-2:#D8CFDC;
  --muted:#A497AA;
  --brand:#FF8A1F;
  --brand-soft:#3D2410;
  --action:#FF8A1F;
  --action-fg:#160E06;
  --action-soft:#3A220F;
  --action-ink:#FFC08A;
  --ink-btn:#FF8A1F;
  --ink-btn-fg:#160E06;
  --dd-hover:#2E2238;
  --py-light:#3D2410;
  --py-ink:#FFD0A1;
  --py-deep:#FF8A1F;
  --py-deep-ink:#160E06;
  --be-bg:#2E2238;
  --sg-advertising:#FF8A1F;
  --sg-products:#9BE15D;
  --sg-sales-reports:#B98CF0;
  --sg-admin:#C9BFCF;
  --c-sales:#FF8A1F;
  --c-spend:#B98CF0;
  --c-adsales:#9BE15D;
  --c-acos:#D8CFDC;
  --logo-filter:url(#pw-logo-dark);
}
:root[data-theme][data-skin="july4"]{
  color-scheme:light;
  --bg:#EEF1F7;
  --surface:#FFFFFF;
  --sunken:#F6F8FC;
  --line:#DCE1EC;
  --line-soft:#E8ECF4;
  --line-strong:#C5CCDC;
  --fg:#101B33;
  --fg-2:#2A3654;
  --muted:#5D6885;
  --brand:#B22234;
  --brand-soft:#F9E1E4;
  --action:#1F3A93;
  --action-fg:#FFFFFF;
  --action-soft:#E4EAF8;
  --action-ink:#172C70;
  --ink-btn:#B22234;
  --ink-btn-fg:#FFFFFF;
  --danger:#B22234;
  --dd-hover:#E4EAF8;
  --py-light:#F9E1E4;
  --py-ink:#101B33;
  --py-deep:#B22234;
  --py-deep-ink:#FFFFFF;
  --be-bg:#E4EAF8;
  --sg-advertising:#B22234;
  --sg-products:#1F3A93;
  --sg-sales-reports:#3C6FD8;
  --sg-admin:#5D6885;
  --c-sales:#1F3A93;
  --c-spend:#B22234;
  --c-adsales:#E0A100;
  --c-acos:#2A3654;
  --logo-filter:none;
}

/* Theme touches: seasonal stripe under the header, Ebru marbling behind the page */
:root[data-skin="christmas"] .top{border-image:repeating-linear-gradient(90deg,#D9393C 0 18px,#F3EFE6 18px 24px,#2E8B57 24px 42px,#F3EFE6 42px 48px) 0 0 3 0/0 0 3px 0}
:root[data-skin="halloween"] .top{border-image:repeating-linear-gradient(90deg,#FF8A1F 0 22px,#120E15 22px 26px,#B98CF0 26px 48px,#120E15 48px 52px) 0 0 3 0/0 0 3px 0}
:root[data-skin="july4"] .top{border-image:linear-gradient(90deg,#B22234 0 33.3%,#FFFFFF 33.3% 66.6%,#1F3A93 66.6%) 0 0 3 0/0 0 3px 0}
:root[data-skin="cini"] .top{border-image:repeating-linear-gradient(90deg,#0E8F8C 0 14px,#1A4FA0 14px 28px,#FBFEFD 28px 31px,#C0392B 31px 35px,#FBFEFD 35px 38px) 0 0 3 0/0 0 3px 0}
:root[data-skin="ebru"] body{background-color:var(--bg);background-image:radial-gradient(120% 60% at 8% 12%,rgba(28,140,140,.09),transparent 60%),radial-gradient(90% 70% at 92% 30%,rgba(142,59,94,.07),transparent 60%),radial-gradient(110% 80% at 40% 100%,rgba(44,62,102,.07),transparent 60%);background-attachment:fixed}

/* Header decorations per theme (between the account picker and the language menu; hidden on narrow screens) */
.hdr-deco{flex:none;width:150px;height:40px;background:no-repeat center/contain;pointer-events:none}
@media (max-width:1100px){.hdr-deco{display:none}}
:root[data-skin="sun"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Ccircle cx='122' cy='20' r='7.5' fill='%23E8A33A'/%3E%3Cline x1='127.2' y1='20.0' x2='137.0' y2='20.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='126.5' y1='22.6' x2='135.0' y2='27.5' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='124.6' y1='24.5' x2='129.5' y2='33.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='122.0' y1='25.2' x2='122.0' y2='35.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='119.4' y1='24.5' x2='114.5' y2='33.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='117.5' y1='22.6' x2='109.0' y2='27.5' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='116.8' y1='20.0' x2='107.0' y2='20.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='117.5' y1='17.4' x2='109.0' y2='12.5' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='119.4' y1='15.5' x2='114.5' y2='7.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='122.0' y1='14.8' x2='122.0' y2='5.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='124.6' y1='15.5' x2='129.5' y2='7.0' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Cline x1='126.5' y1='17.4' x2='135.0' y2='12.5' stroke='%23E8A33A' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='122' cy='20' r='1.6' fill='%23E8A33A'/%3E%3Cpath d='M30 30 q8 -6 16 0 q8 6 16 0' fill='none' stroke='%23D2B48C' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M60 22 q8 -6 16 0' fill='none' stroke='%23E3C9A0' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
:root[data-skin="patara"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cpath d='M86 32 L98 10 L110 32 Z' fill='none' stroke='%23F2C200' stroke-width='2' stroke-linejoin='round'/%3E%3Cpath d='M112 32 L120 18 L128 32 Z' fill='none' stroke='%23F2C200' stroke-width='1.8' stroke-linejoin='round' opacity='.7'/%3E%3Cpath d='M130 32 L135 23 L140 32 Z' fill='none' stroke='%23F2C200' stroke-width='1.6' stroke-linejoin='round' opacity='.45'/%3E%3C/svg%3E")}
:root[data-skin="cini"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cpath fill='none' stroke='%233E7D5A' stroke-width='1.6' d='M70 30 C 70 22 69 18 70 12'/%3E%3Cpath d='M70 14 c-3 -1 -6 -3 -7 -8 c3 1 5 3 7 6 c2 -3 4 -5 7 -6 c-1 5 -4 7 -7 8z' fill='%23C0392B'/%3E%3Cpath d='M70 13 c-1 -4 0 -9 0 -12 c0 3 1 8 0 12z' fill='%230E8F8C'/%3E%3Cpath d='M70 26 c-5 -1 -7 -4 -8 -7 c4 0 6 2 8 5z' fill='%233E7D5A'/%3E%3Cpath d='M70 24 c5 -1 7 -4 8 -7 c-4 0 -6 2 -8 5z' fill='%233E7D5A'/%3E%3Cg transform='translate(100 20)'%3E%3Cellipse rx='3.42' ry='9' transform='rotate(0)' fill='%230E8F8C'/%3E%3Cellipse rx='3.42' ry='9' transform='rotate(45)' fill='%230E8F8C'/%3E%3Cellipse rx='3.42' ry='9' transform='rotate(90)' fill='%230E8F8C'/%3E%3Cellipse rx='3.42' ry='9' transform='rotate(135)' fill='%230E8F8C'/%3E%3Ccircle r='3.6' fill='%231A4FA0'/%3E%3C/g%3E%3Cpath fill='none' stroke='%233E7D5A' stroke-width='1.6' d='M130 30 C 130 22 129 18 130 12'/%3E%3Cpath d='M130 14 c-3 -1 -6 -3 -7 -8 c3 1 5 3 7 6 c2 -3 4 -5 7 -6 c-1 5 -4 7 -7 8z' fill='%23C0392B'/%3E%3Cpath d='M130 13 c-1 -4 0 -9 0 -12 c0 3 1 8 0 12z' fill='%231A4FA0'/%3E%3Cpath d='M130 26 c-5 -1 -7 -4 -8 -7 c4 0 6 2 8 5z' fill='%233E7D5A'/%3E%3Cpath d='M130 24 c5 -1 7 -4 8 -7 c-4 0 -6 2 -8 5z' fill='%233E7D5A'/%3E%3Cg transform='translate(45 22)'%3E%3Cellipse rx='2.2800000000000002' ry='6' transform='rotate(0)' fill='%231A4FA0'/%3E%3Cellipse rx='2.2800000000000002' ry='6' transform='rotate(45)' fill='%231A4FA0'/%3E%3Cellipse rx='2.2800000000000002' ry='6' transform='rotate(90)' fill='%231A4FA0'/%3E%3Cellipse rx='2.2800000000000002' ry='6' transform='rotate(135)' fill='%231A4FA0'/%3E%3Ccircle r='2.4000000000000004' fill='%23C0392B'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-skin="firuze"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cg transform='translate(122 20)'%3E%3Cellipse rx='4.18' ry='11' transform='rotate(0)' fill='%2334C6BD'/%3E%3Cellipse rx='4.18' ry='11' transform='rotate(45)' fill='%2334C6BD'/%3E%3Cellipse rx='4.18' ry='11' transform='rotate(90)' fill='%2334C6BD'/%3E%3Cellipse rx='4.18' ry='11' transform='rotate(135)' fill='%2334C6BD'/%3E%3Ccircle r='4.4' fill='%23D9B26A'/%3E%3C/g%3E%3Cg transform='translate(92 20)'%3E%3Crect x='-7' y='-7' width='14' height='14' fill='none' stroke='%23D9B26A' stroke-width='1.6'/%3E%3Crect x='-7' y='-7' width='14' height='14' fill='none' stroke='%23D9B26A' stroke-width='1.6' transform='rotate(45)'/%3E%3Ccircle r='2.2' fill='%2334C6BD'/%3E%3C/g%3E%3Ccircle cx='70' cy='20' r='2' fill='%2334C6BD'/%3E%3Ccircle cx='60' cy='20' r='1.4' fill='%23D9B26A'/%3E%3C/svg%3E")}
:root[data-skin="ebru"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cg fill='none' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M40 28 c10 -16 26 -16 30 -4 c4 12 18 12 24 0' stroke='%231C8C8C' opacity='.75'/%3E%3Cpath d='M60 32 c8 -10 20 -10 24 -2 c4 8 14 8 20 -2' stroke='%238E3B5E' opacity='.6'/%3E%3C/g%3E%3Ccircle cx='122' cy='19' r='10' fill='%231C8C8C' opacity='.25'/%3E%3Ccircle cx='122' cy='19' r='6.5' fill='%23FFFDF8' stroke='%238E3B5E' stroke-width='1.6'/%3E%3Ccircle cx='122' cy='19' r='3' fill='%232C3E66'/%3E%3Ccircle cx='140' cy='28' r='4' fill='%238E3B5E' opacity='.35'/%3E%3C/svg%3E")}
:root[data-skin="nazar"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cg transform='translate(122 20)'%3E%3Ccircle r='14' fill='%231B3F94'/%3E%3Ccircle r='10.08' fill='%23FFFFFF'/%3E%3Ccircle r='6.72' fill='%234FB3E8'/%3E%3Ccircle r='3.36' fill='%230D1B2A'/%3E%3C/g%3E%3Cg transform='translate(92 24)'%3E%3Ccircle r='8' fill='%231B3F94'/%3E%3Ccircle r='5.76' fill='%23FFFFFF'/%3E%3Ccircle r='3.84' fill='%234FB3E8'/%3E%3Ccircle r='1.92' fill='%230D1B2A'/%3E%3C/g%3E%3Cg transform='translate(72 16)'%3E%3Ccircle r='5' fill='%231B3F94'/%3E%3Ccircle r='3.5999999999999996' fill='%23FFFFFF'/%3E%3Ccircle r='2.4' fill='%234FB3E8'/%3E%3Ccircle r='1.2' fill='%230D1B2A'/%3E%3C/g%3E%3C/svg%3E")}
:root[data-skin="christmas"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cpath d='M122 6 l12 14 h-6 l9 11 h-30 l9 -11 h-6 z' fill='%232E8B57'/%3E%3Crect x='119.5' y='31' width='5' height='5' fill='%238B5A2B'/%3E%3Cpolygon points='122.0,1.5 123.2,4.4 126.3,4.6 123.9,6.6 124.6,9.6 122.0,8.0 119.4,9.6 120.1,6.6 117.7,4.6 120.8,4.4' fill='%23E8B84A'/%3E%3Ccircle cx='117' cy='22' r='1.8' fill='%23D9393C'/%3E%3Ccircle cx='127' cy='27' r='1.8' fill='%23E8B84A'/%3E%3Ccircle cx='125' cy='16' r='1.6' fill='%23D9393C'/%3E%3Crect x='88' y='22' width='13' height='12' rx='1.5' fill='%23D9393C'/%3E%3Crect x='93.3' y='22' width='2.4' height='12' fill='%23E8B84A'/%3E%3Crect x='88' y='26.5' width='13' height='2.4' fill='%23E8B84A'/%3E%3Cline x1='62.0' y1='14.0' x2='74.0' y2='14.0' stroke='%23F3EFE6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='65.0' y1='8.8' x2='71.0' y2='19.2' stroke='%23F3EFE6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='71.0' y1='8.8' x2='65.0' y2='19.2' stroke='%23F3EFE6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='46.0' y1='26.0' x2='54.0' y2='26.0' stroke='%23DCD6C8' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='48.0' y1='22.5' x2='52.0' y2='29.5' stroke='%23DCD6C8' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='52.0' y1='22.5' x2='48.0' y2='29.5' stroke='%23DCD6C8' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='141.5' y1='12.0' x2='148.5' y2='12.0' stroke='%23F3EFE6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='143.2' y1='9.0' x2='146.8' y2='15.0' stroke='%23F3EFE6' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='146.8' y1='9.0' x2='143.2' y2='15.0' stroke='%23F3EFE6' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
:root[data-skin="halloween"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cg transform='translate(122 23)'%3E%3Cellipse rx='12' ry='10' fill='%23FF8A1F'/%3E%3Cellipse rx='5' ry='10' fill='%23F07A10'/%3E%3Cpath d='M-1 -10 q1 -5 4 -6' stroke='%235E9E2F' stroke-width='2.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M-6 -3 l2.5 -3 l2.5 3z M1 -3 l2.5 -3 l2.5 3z' fill='%232A1A0C'/%3E%3Cpath d='M-6 3 q6 5 12 0 l-2 1.5 l-2 -1.5 l-2 1.5 l-2 -1.5 l-2 1.5z' fill='%232A1A0C'/%3E%3C/g%3E%3Cpath d='M78 14 c3 -4 6 -3 8 0 c1 -2 3 -2 4 0 c1 -2 3 -2 4 0 c2 -3 5 -4 8 0 c-4 -1 -6 1 -7 3 c-2 -1 -4 -1 -5 1 c-1 -2 -3 -2 -5 -1 c-1 -2 -3 -4 -7 -3z' fill='%23B98CF0'/%3E%3Cpath d='M52 8 a10 10 0 1 0 8 16 a8 8 0 1 1 -8 -16z' fill='%23E8D9A8'/%3E%3C/svg%3E")}
:root[data-skin="july4"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cpolygon points='124.0,10.0 126.6,16.4 133.5,16.9 128.3,21.4 129.9,28.1 124.0,24.5 118.1,28.1 119.7,21.4 114.5,16.9 121.4,16.4' fill='%23B22234'/%3E%3Cline x1='96.2' y1='16.0' x2='104.0' y2='16.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='95.6' y1='18.1' x2='102.4' y2='22.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='94.1' y1='19.6' x2='98.0' y2='26.4' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='92.0' y1='20.2' x2='92.0' y2='28.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='89.9' y1='19.6' x2='86.0' y2='26.4' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='88.4' y1='18.1' x2='81.6' y2='22.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='87.8' y1='16.0' x2='80.0' y2='16.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='88.4' y1='13.9' x2='81.6' y2='10.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='89.9' y1='12.4' x2='86.0' y2='5.6' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='92.0' y1='11.8' x2='92.0' y2='4.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='94.1' y1='12.4' x2='98.0' y2='5.6' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Cline x1='95.6' y1='13.9' x2='102.4' y2='10.0' stroke='%231F3A93' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='92' cy='16' r='1.6' fill='%231F3A93'/%3E%3Cline x1='64.8' y1='24.0' x2='70.0' y2='24.0' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='64.3' y1='25.6' x2='68.5' y2='28.7' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='62.9' y1='26.7' x2='64.5' y2='31.6' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='61.1' y1='26.7' x2='59.5' y2='31.6' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='59.7' y1='25.6' x2='55.5' y2='28.7' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='59.2' y1='24.0' x2='54.0' y2='24.0' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='59.7' y1='22.4' x2='55.5' y2='19.3' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='61.1' y1='21.3' x2='59.5' y2='16.4' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='62.9' y1='21.3' x2='64.5' y2='16.4' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Cline x1='64.3' y1='22.4' x2='68.5' y2='19.3' stroke='%23B22234' stroke-width='1.3' stroke-linecap='round'/%3E%3Ccircle cx='62' cy='24' r='1.6' fill='%23B22234'/%3E%3Cpolygon points='145.0,26.0 146.1,28.5 148.8,28.8 146.7,30.6 147.4,33.2 145.0,31.8 142.6,33.2 143.3,30.6 141.2,28.8 143.9,28.5' fill='%231F3A93'/%3E%3Cpolygon points='40.0,8.5 40.9,10.7 43.3,10.9 41.5,12.5 42.1,14.8 40.0,13.6 37.9,14.8 38.5,12.5 36.7,10.9 39.1,10.7' fill='%231F3A93'/%3E%3C/svg%3E")}

/* Easter (seasonal, light): pastel lavender ground, violet action, berry-pink brand, mint/yellow accents */
:root[data-theme][data-skin="easter"]{
  color-scheme:light;
  --bg:#F5F1FA;
  --surface:#FFFFFF;
  --sunken:#FAF7FD;
  --line:#E4DDEF;
  --line-soft:#EEE9F5;
  --line-strong:#D1C7E3;
  --fg:#221B33;
  --fg-2:#3F3654;
  --muted:#6C6385;
  --brand:#B83A78;
  --brand-soft:#FBE3EF;
  --action:#6B4FB8;
  --action-fg:#FFFFFF;
  --action-soft:#ECE6F8;
  --action-ink:#4A3390;
  --ink-btn:#4A3390;
  --ink-btn-fg:#FFFFFF;
  --danger:#C0392B;
  --dd-hover:#EFE9FA;
  --py-light:#FFF3C4;
  --py-ink:#221B33;
  --py-deep:#F5C842;
  --py-deep-ink:#221B33;
  --be-bg:#E2F4EC;
  --sg-advertising:#6B4FB8;
  --sg-products:#2E8B6E;
  --sg-sales-reports:#B83A78;
  --sg-admin:#B07C00;
  --c-sales:#2E8B6E;
  --c-spend:#C27C0E;
  --c-adsales:#B83A78;
  --c-acos:#3F3654;
  --logo-filter:none;
}
:root[data-skin="easter"] .top{border-image:repeating-linear-gradient(90deg,#F7B9D3 0 16px,#FFF3C4 16px 32px,#9ED9BE 32px 48px,#C9B6EE 48px 64px,#A9D4F5 64px 80px) 0 0 3 0/0 0 3px 0}
:root[data-skin="easter"] .hdr-deco{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 40'%3E%3Cellipse cx='122' cy='21' rx='9' ry='12' fill='%23C9B6EE'/%3E%3Cpath d='M113.4 19 l3 -3 l3 3 l3 -3 l3 3 l3 -3 l3 3' fill='none' stroke='%23FFFFFF' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3Ccircle cx='118' cy='26' r='1.3' fill='%23B83A78'/%3E%3Ccircle cx='122' cy='28' r='1.3' fill='%232E8B6E'/%3E%3Ccircle cx='126' cy='26' r='1.3' fill='%23B83A78'/%3E%3Cellipse cx='100' cy='25' rx='6.5' ry='8.5' fill='%23F7B9D3'/%3E%3Cpath d='M93.8 22.5 h12.4 M93.6 27 h12.8' stroke='%23FFF3C4' stroke-width='1.6'/%3E%3Cellipse cx='140' cy='28' rx='5' ry='6.5' fill='%23F5D46A'/%3E%3Cpath d='M135.6 27 q2.2 -2 4.4 0 t4.4 0' fill='none' stroke='%236B4FB8' stroke-width='1.2'/%3E%3Cg fill='%23B8A9DA'%3E%3Cellipse cx='67' cy='10' rx='2.6' ry='7.5' transform='rotate(-10 67 10)'/%3E%3Cellipse cx='75' cy='10' rx='2.6' ry='7.5' transform='rotate(10 75 10)'/%3E%3Ccircle cx='71' cy='23' r='7'/%3E%3Cellipse cx='71' cy='34' rx='9' ry='5'/%3E%3C/g%3E%3Cg fill='%23F7B9D3'%3E%3Cellipse cx='67' cy='10' rx='1.1' ry='5' transform='rotate(-10 67 10)'/%3E%3Cellipse cx='75' cy='10' rx='1.1' ry='5' transform='rotate(10 75 10)'/%3E%3Ccircle cx='71' cy='25' r='1.2'/%3E%3C/g%3E%3Ccircle cx='68.5' cy='21.5' r='1' fill='%233F3654'/%3E%3Ccircle cx='73.5' cy='21.5' r='1' fill='%233F3654'/%3E%3Cg transform='translate(46 27)' fill='%239ED9BE'%3E%3Ccircle cx='0' cy='-3.4' r='2.4'/%3E%3Ccircle cx='3.2' cy='-1' r='2.4'/%3E%3Ccircle cx='2' cy='2.8' r='2.4'/%3E%3Ccircle cx='-2' cy='2.8' r='2.4'/%3E%3Ccircle cx='-3.2' cy='-1' r='2.4'/%3E%3Ccircle r='1.8' fill='%23F5D46A'/%3E%3C/g%3E%3C/svg%3E")}

/* "I'm bored" row (above Theme) + mini games dialog (assets/games.js; reuses the theme picker dialog) */
.side-fun+.side-theme{margin-top:0;border-top:0}
.side-fun svg{color:var(--sg-sales-reports,var(--brand))}
.gm-dlg{width:min(520px,calc(100vw - 32px))}
.gm-dlg .dr-head{gap:10px}
.gm-body{overflow:auto;padding:4px 18px 18px;display:flex;flex-direction:column;gap:12px}
.gm-note{margin:0;font-size:12.5px;color:var(--muted)}
.gm-list{display:flex;flex-direction:column;gap:8px}
.gm-pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg);cursor:pointer;text-align:left}
.gm-pick:hover{border-color:var(--action);background:var(--action-soft)}
.gm-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--action-soft);color:var(--action-ink)}
.gm-ic svg{width:22px;height:22px}
.gm-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.gm-tx b{font-size:14px}.gm-tx small{font-size:12px;color:var(--muted)}
.gm-best{margin-left:auto;font-size:11px;color:var(--good);background:var(--good-bg);padding:2px 8px;border-radius:999px;white-space:nowrap}
.gm-row{display:flex;gap:8px;flex-wrap:wrap}
.gm-row input{flex:1;min-width:120px;padding:9px 12px;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);font:600 20px/1 var(--mono);letter-spacing:.3em;text-align:center}
.gm-msg{margin:0;min-height:18px;font-size:12.5px;color:var(--fg-2)}
.gm-win{color:var(--good)}
.gm-tries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:280px;overflow:auto}
.gm-tries li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:6px 10px;border:1px solid var(--line-soft);border-radius:8px;background:var(--sunken)}
.gm-tries code{font:600 17px var(--mono);letter-spacing:.25em}
.gm-n{font-size:11px;color:var(--muted)}
.gm-hint{display:flex;gap:6px}
.gm-hint b{font:700 13px var(--mono);padding:1px 7px;border-radius:6px}
.gm-hint .plus{background:var(--good-bg);color:var(--good)}.gm-hint .minus{background:var(--mid-bg);color:var(--mid)}.gm-hint .zero{background:var(--line-soft);color:var(--muted)}
.gm-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gm-card{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:10px;background:var(--action);color:var(--action-fg);font-size:28px;cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.gm-card:hover:not(.up){transform:translateY(-2px)}
.gm-card:not(.up):not(.done) span{font:700 22px var(--sans);opacity:.55}
.gm-card.up{background:var(--surface);border-color:var(--action)}
.gm-card.done{background:var(--good-bg);border-color:transparent;opacity:.75;cursor:default}
.gm-xox{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(300px,100%);margin:0 auto}
.gm-cell{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:10px;background:var(--sunken);font:700 38px/1 var(--sans);cursor:pointer;color:var(--fg)}
.gm-cell:hover:not([disabled]){background:var(--action-soft)}
.gm-cell.x{color:var(--action)}.gm-cell.o{color:var(--brand)}
.gm-cell.line{background:var(--good-bg)}
.gm-cell[disabled]{cursor:default}
@media (prefers-reduced-motion:reduce){.gm-card{transition:none}}

/* Mini games, round 2 (Minesweeper · 2048 · Snake · 15 Puzzle · Color Sequence · Reaction Time) */
.gm-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.gm-dlg{width:min(600px,calc(100vw - 32px))}
.gm-pick{align-items:flex-start}
.gm-tx .gm-best{align-self:flex-start;margin:4px 0 0}
.gm-bar{align-items:center;justify-content:space-between;font-size:12.5px;color:var(--fg-2)}
.gm-bar .btn[aria-pressed="true"]{background:var(--action-soft);border-color:var(--action);color:var(--action-ink)}
.gm-mine{display:grid;grid-template-columns:repeat(9,1fr);gap:3px;width:min(360px,100%);margin:0 auto}
.gm-mc{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:5px;background:var(--action-soft);font:700 14px/1 var(--sans);cursor:pointer;padding:0;color:var(--fg)}
.gm-mc:hover:not([disabled]){background:var(--dd-hover)}
.gm-mc.o{background:var(--sunken);border-color:var(--line-soft);cursor:default}
.gm-mc.n1{color:#1D5FD1}.gm-mc.n2{color:#1C7A4A}.gm-mc.n3{color:#C42B1C}.gm-mc.n4{color:#5B2EA6}.gm-mc.n5{color:#8A4A00}.gm-mc.n6{color:#0E7C86}
.gm-mc.boom{background:var(--crit-bg)}
.gm-2048{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:min(320px,100%);margin:0 auto;padding:8px;border-radius:12px;background:var(--line-strong);outline:none;touch-action:none}
.gm-t2{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font:700 24px/1 var(--sans);background:var(--sunken);color:var(--fg)}
.gm-t2.v2{background:#EEE4DA;color:#776E65}.gm-t2.v4{background:#EDE0C8;color:#776E65}.gm-t2.v8{background:#F2B179;color:#fff}.gm-t2.v16{background:#F59563;color:#fff}
.gm-t2.v32{background:#F67C5F;color:#fff}.gm-t2.v64{background:#F65E3B;color:#fff}.gm-t2.v128{background:#EDCF72;color:#fff;font-size:21px}.gm-t2.v256{background:#EDCC61;color:#fff;font-size:21px}
.gm-t2.v512{background:#EDC850;color:#fff;font-size:21px}.gm-t2.v1024{background:#EDC53F;color:#fff;font-size:18px}.gm-t2.v2048,.gm-t2.v4096{background:#EDC22E;color:#fff;font-size:18px}
.gm-pad{display:grid;grid-template-columns:repeat(3,44px);grid-template-areas:". u ." "l d r";gap:6px;justify-content:center}
.gm-pad [data-dir="u"]{grid-area:u}.gm-pad [data-dir="l"]{grid-area:l}.gm-pad [data-dir="d"]{grid-area:d}.gm-pad [data-dir="r"]{grid-area:r}
.gm-pad .btn{padding:6px 0;font-size:16px}
@media (hover:hover) and (pointer:fine){.gm-pad{display:none}}
.gm-snake{display:block;width:min(320px,100%);aspect-ratio:1;height:auto;margin:0 auto;border:1px solid var(--line-strong);border-radius:8px;touch-action:none}
.gm-slide{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;width:min(300px,100%);margin:0 auto;touch-action:none}
.gm-st{aspect-ratio:1;border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);font:700 22px/1 var(--sans);color:var(--fg);cursor:pointer;display:grid;place-items:center}
.gm-st:hover:not([disabled]){background:var(--action-soft)}
.gm-st.ok{background:var(--good-bg);border-color:transparent}
.gm-st.empty{border:1px dashed var(--line);background:transparent;cursor:default}
.gm-simon{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;width:min(260px,100%);margin:0 auto}
.gm-pad4{aspect-ratio:1;border:0;border-radius:16px;background:var(--c);opacity:.45;cursor:pointer;transition:opacity .1s,transform .1s}
.gm-pad4:not([disabled]):hover{opacity:.65}
.gm-pad4.lit{opacity:1;transform:scale(1.04);box-shadow:0 0 0 3px var(--surface),0 0 18px var(--c)}
.gm-pad4[disabled]{cursor:default}
.gm-react{display:grid;place-items:center;width:100%;min-height:200px;padding:16px;border:0;border-radius:12px;font:700 18px/1.3 var(--sans);cursor:pointer;background:var(--action);color:var(--action-fg);text-align:center}
.gm-react.wait{background:#C42B1C;color:#fff}.gm-react.go{background:#1C9A4A;color:#fff}.gm-react.early{background:var(--mid-bg);color:var(--mid)}
@media (prefers-reduced-motion:reduce){.gm-pad4{transition:none}}

/* ---------- Filter drawer (shared: Campaigns, Optimize · assets/filter.js) ---------- */
.flt-btn{display:inline-flex;align-items:center;gap:6px}
.flt-btn .n{font-size:11px;background:var(--action);color:var(--action-fg);border-radius:999px;padding:0 6px;line-height:17px}
.flt-btn .n:empty{display:none}
.flt-chips{display:flex;flex-wrap:wrap;gap:6px}
.flt-chips:empty{display:none}
.flt-chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:var(--action-soft);color:var(--action-ink);border-radius:999px;padding:3px 4px 3px 10px;font-variant-numeric:tabular-nums}
.flt-chip button{width:20px;height:20px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;display:grid;place-items:center}
.flt-chip button:hover{background:var(--surface)}
.flt-rows{display:flex;flex-direction:column;gap:10px}
.flt-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px;border:1px solid var(--line);border-radius:8px;padding:8px;background:var(--sunken)}
.flt-row > .dd{width:100%;min-width:0}
.flt-row .dd-btn{white-space:nowrap;min-width:0;width:100%}
.flt-row .dd-val{overflow:hidden;text-overflow:ellipsis}
.flt-val{display:flex;align-items:stretch}
.flt-val .cur{display:grid;place-items:center;min-width:22px;padding:0 4px;background:var(--surface);border:1px solid var(--line-strong);border-right:0;border-radius:6px 0 0 6px;font-size:12px;color:var(--fg-2)}
.flt-val input{flex:1;min-width:0;padding:6px 8px;border:1px solid var(--line-strong);border-radius:0 6px 6px 0;background:var(--surface);font-weight:600}
.flt-val input.bad{border-color:var(--crit-line);background:var(--crit-bg)}
.flt-row .rm{grid-column:1/-1;justify-self:end;font-size:11.5px;border:0;background:none;color:var(--crit);cursor:pointer}
.flt-act{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Change source badge (history: PataraWeb = made in this app, Amazon = read from Amazon's change history) ---------- */
.srcb{display:inline-block;font-size:9.5px;font-weight:600;line-height:15px;padding:0 5px;border-radius:4px;letter-spacing:.01em;white-space:nowrap;vertical-align:1px}
.srcb.pw{background:var(--action-soft);color:var(--action-ink)}
.srcb.amz{background:#FFF1DC;color:#8A4B00}
:root[data-theme="dark"] .srcb.amz{background:#3A2A12;color:#F5C27A}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .srcb.amz{background:#3A2A12;color:#F5C27A}}

/* ---------- History pop-up (hover / click a history line) ---------- */
.pw-pop{position:fixed;z-index:40;min-width:300px;max-width:min(480px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);padding:10px 12px;font-size:12px}
.pw-pop .ttl{display:block;font-size:12.5px;margin-bottom:6px}
.pw-pop .scroll{max-height:260px;overflow:auto}
.pw-pop table,.hist-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:12px}
.pw-pop th,.pw-pop td,.hist-tbl th,.hist-tbl td{padding:4px 6px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
.pw-pop th,.hist-tbl th{font-size:10.5px;color:var(--muted);font-weight:600}
.pw-pop .up,.hist-tbl .up{color:var(--good);font-weight:600}
.pw-pop .dn,.hist-tbl .dn{color:var(--bad);font-weight:600}
.pw-pop .by,.hist-tbl .by{color:var(--muted)}
.pw-pop p{margin:6px 0 0;font-size:11px;color:var(--muted)}
.flt-row.nowin > [data-fdd="m"]{grid-column:1/-1}

/* ---------- Header profile menu (Şaban, Oct 29): the profile box is a button → Profile settings · Log out ---------- */
.profile{position:relative}
button.who{font:inherit;color:inherit;text-align:left;cursor:pointer;padding-right:10px}
button.who:hover,button.who.open{border-color:var(--line-strong);background:var(--sunken)}
.who-chev{flex:none;color:var(--muted);transition:transform .15s}
.who.open .who-chev{transform:rotate(180deg)}
.prof-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:100%;z-index:12;display:flex;flex-direction:column;gap:4px;padding:8px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.prof-menu[hidden]{display:none}
.prof-menu button{display:flex;align-items:center;gap:10px;width:100%;padding:10px 10px;border:0;border-radius:8px;background:transparent;color:var(--fg);font:inherit;font-size:12.8px;text-align:left;cursor:pointer;white-space:nowrap}
.prof-menu button:hover,.prof-menu button:focus-visible{background:var(--dd-hover);outline:none}
.prof-menu button svg{flex:none;color:var(--muted)}
.prof-menu .pm-out{color:var(--danger);border-top:1px solid var(--line-soft);border-radius:0 0 8px 8px}
.prof-menu .pm-out svg{color:var(--danger)}
.prof-menu .pm-out:hover,.prof-menu .pm-out:focus-visible{background:var(--crit-bg)}
@media (max-width:720px){.who div{display:none}.who{padding-right:8px}}
/* Signed-out screen (preview of Log out) */
.lo-scrim{position:fixed;inset:0;z-index:240;background:var(--bg);display:grid;place-items:center;padding:16px}
.lo-dlg{width:min(420px,100%);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.12)}
.lo-dlg svg{color:var(--danger)}
.lo-dlg h2{margin:0;font-size:17px}
.lo-dlg p{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
html.logged-out body{overflow:hidden}
/* Language dropdown: flag + language name */
.lang-opt{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.lang-opt .flag{width:20px;height:14px}
@media (prefers-reduced-motion:reduce){.who-chev{transition:none}}

/* ---------- TACOS band badges tc-1 … tc-7 (shared since Dashboard · Grading; bands = PW.model.tacosBand) ---------- */
/* ACOS / TACOS grade colours (Şaban, Nov 2–3). Same in every theme (light, dark, Sunlight, Patara, Çini, seasonal …) and they always win
   over page rules (e.g. Optimize's ".op-win span{color:muted}" made the text grey on the dark fills): solid ends with white text —
   Performing dark green, Critical dark red; every light fill in between has black text (On target light green, Slightly above cream,
   Above yellow, High light orange, Very high light red). */
:root,:root[data-theme],:root[data-skin]{--tc1-bg:#1C6A3B;--tc1:#FFFFFF;--tc2-bg:#BFE5C9;--tc2:#111111;--tc3-bg:#F4EEDC;--tc3:#111111;--tc4-bg:#FAE7A8;--tc4:#111111;--tc5-bg:#F8D2B4;--tc5:#111111;--tc6-bg:#F6B8B0;--tc6:#111111;--tc7-bg:#8E1C11;--tc7:#FFFFFF}
.tc-1{background:#1C6A3B!important;color:#FFFFFF!important}
.tc-2{background:#BFE5C9!important;color:#111111!important}
.tc-3{background:#F4EEDC!important;color:#111111!important}
.tc-4{background:#FAE7A8!important;color:#111111!important}
.tc-5{background:#F8D2B4!important;color:#111111!important}
.tc-6{background:#F6B8B0!important;color:#111111!important}
.tc-7{background:#8E1C11!important;color:#FFFFFF!important}
.tc-1 *,.tc-7 *{color:#FFFFFF!important}.tc-2 *,.tc-3 *,.tc-4 *,.tc-5 *,.tc-6 *{color:#111111!important}

/* ---------- Compact filters (Şaban, Oct 29): tighter sticky filter band on desktop; on phones it is not sticky ---------- */
/* Pinned filters must not move at all while scrolling (Şaban, Nov 2): the band used to start 8px below the header
   (main's 16px top padding − 8px margin) but stick right under it, so it slid up 8px before sticking. It now starts
   exactly where it sticks: margin cancels main's top padding, the same space is kept inside the band. */
.filters-sticky{gap:8px;padding-block:8px;margin-block:-8px 0}
main.wrap > .filters-sticky:first-child,main.wrap > .sr-only:first-child + .filters-sticky{padding-block:var(--main-pt,16px) 8px;margin-block:calc(-1 * var(--main-pt,16px)) 0}

/* ---------- Phone header (≤720px, Şaban Oct 29): one 52px row — menu · logo · account (flag + name) · language flag · avatar ---------- */
@media (max-width:720px){
  .top .bar{flex-wrap:nowrap;gap:8px;padding-block:8px;min-height:52px}
  .top .side-tog{width:36px;height:36px;margin-right:0;border-radius:9px}
  .top .brand-name,.top .hdr-div,.top .hdr-deco,.top .grow{display:none}
  .bar>.logo{flex:none}
  .bar>.logo img{height:24px}
  .top .acct{flex:1 1 auto;min-width:0;gap:0}
  .top .dd-acct{min-width:0;max-width:100%}
  .dd-acct.dd-plain .dd-btn{max-width:100%;margin-left:0;padding:5px 6px;gap:4px}
  .acct-grid{grid-template-rows:18px;column-gap:6px}
  .acct-grid .mkt,.acct-grid small{display:none}
  .acct-grid b{font-size:12.5px}
  .dd-acct .dd-chev{width:12px;height:12px}
  .lang .dd-btn{min-width:0;min-height:36px;padding:6px 8px;gap:0;box-shadow:none}
  .lang .dd-btn .lang-opt > span,.lang .dd-btn .dd-chev{display:none}
  .lang .dd-btn .lang-opt .flag{width:22px;height:15px}
  .top .profile{flex:none}
  button.who{padding:2px;border-radius:999px;gap:0}
  .who img{width:34px;height:34px}
  .who .who-chev{display:none}
  .prof-menu{min-width:200px}
  .dd-acct.dd-plain .dd-menu{position:fixed;left:8px;right:8px;top:calc(var(--hdr-h,52px) + 4px);width:auto;min-width:0;margin:0;max-height:calc(100vh - var(--hdr-h,52px) - 16px)}
  .lang .dd-menu{position:fixed;right:8px;left:auto;top:calc(var(--hdr-h,52px) + 4px)}

  /* Filters on phones: scroll away with the page, compact controls, no dividers, no "Last days" quick buttons (the date picker has quick ranges) */
  .filters-sticky,.filters-sticky.stuck{position:static;margin-block:0;padding-block:0;gap:8px;border-bottom:0;box-shadow:none;background:transparent}
  .filters-sticky .row{gap:6px 8px}
  .filters-sticky .vr{display:none}
  .filters-sticky .lbl{font-size:11px}
  .filters-sticky .seg button{padding:5px 9px;font-size:12.5px}
  .filters-sticky .chip{padding:3px 9px;font-size:12px}
  .filters-sticky .btn{padding:5px 10px}
  .filters-sticky .dd-btn{min-height:34px;padding:5px 10px}
  .filters-sticky .box{flex:1 1 100%;min-height:34px}
  .filters-sticky .box input{width:100%}
  .filters-sticky #daySeg,.filters-sticky .lbl:has(+ #daySeg){display:none}
  .filters-sticky .dp-box{padding:3px 4px;gap:4px}
  .filters-sticky .dp-ic{width:22px;height:24px}
  .filters-sticky .pill{padding:3px 7px;font-size:12px}
  main{gap:10px;padding-block:10px 32px}
}
@media (max-width:380px){.bar>.logo{display:none}}
@media (max-width:720px){
  .filters-sticky .lbl{display:none}
  .filters-sticky .seg + .lbl{display:inline}
  .filters-sticky .row > .dd{flex:1 1 150px;min-width:0}
  .filters-sticky .row > .dd .dd-btn{width:100%;min-width:0}
  .filters-sticky .row > .dd .dd-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Search box in a filter row takes the space that is left instead of a fixed width (saves a row on desktop) */
.filters-sticky .box{flex:1 1 180px;max-width:360px}
.filters-sticky .box input{width:100%}

/* Inventory section colour in the sidebar (Oct 30): teal; skins without their own value keep it */
:root{--sg-inventory:#0E7C86}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sg-inventory:#5CC8D0}}
:root[data-theme="dark"]{--sg-inventory:#5CC8D0}
.sg-inventory{--gc:var(--sg-inventory)}

/* account picker: Amazon account name when it differs from ours */
.acct-amz{color:var(--muted);font-size:11px;font-weight:400}

/* ---------- Sidebar v2 (Nimet, Oct 30): Homepage on top + collapsible sections with larger titles ----------
   .side-home = Homepage link · .sg = section · .sg-h = title button (icon, name, chevron) · .sg-l = its pages (hidden when closed).
   Icon rail (menu closed): section icons only; an open section shows its page icons under a thin line. */
.side a.side-home{min-height:38px;margin:4px 0 6px;font-size:13.5px;font-weight:500;color:var(--fg)}
.side a.side-home svg{color:var(--brand)}
.side a.side-home[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
.sg{gap:0;margin-top:2px}
.sg-h{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px 0 13px;border-radius:8px;cursor:pointer;color:var(--gc,var(--fg));font-size:13.5px;font-weight:500;letter-spacing:0;white-space:nowrap}
.sg-h:hover{background:var(--sunken)}
.sg-h:focus-visible{outline:2px solid var(--action);outline-offset:-2px}
.sg-h > svg:first-child{flex:none;width:20px;height:20px;color:var(--gc,currentColor)}
.sg-h .sg-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sg-h .sg-chev{flex:none;width:14px;height:14px;color:var(--muted);transition:transform .15s ease}
.sg-h[aria-expanded="true"] .sg-chev{transform:rotate(90deg)}
.sg.sg-has:not(.sg-open) .sg-h{background:color-mix(in srgb,var(--gc,var(--brand)) 10%,transparent)}
.sg-l{display:flex;flex-direction:column;gap:1px;padding:2px 0 6px}
.sg-l[hidden]{display:none!important}
html.side-mob .sg-l a{padding-left:24px}
html.side-mob .sg-l{margin-left:13px;border-left:1px solid color-mix(in srgb,var(--gc,var(--line)) 35%,transparent)}
html.side-mob .sg-l a{padding-left:12px;margin-left:4px}





html.side-mob .sg-h .sg-n,html.side-mob .side-home span{display:block}
@media (prefers-reduced-motion:reduce){.sg-h .sg-chev{transition:none}}

/* Account menu options (Oct 31): flag + country code | name (+ Amazon name) + profile ID | API access chips SP / Ads */
.acct-opt2{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:10px;white-space:nowrap}
.acct-opt2 .ao-f{display:flex;flex-direction:column;align-items:center;gap:2px}
.acct-opt2 .ao-f .flag{width:20px;height:14px;margin:0;border-radius:1.5px}
.acct-opt2 .ao-f small{font:600 10px/1 var(--mono);color:var(--muted);letter-spacing:.04em}
.acct-opt2 .ao-n{display:flex;flex-direction:column;gap:2px;min-width:0}
.acct-opt2 .ao-n b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.acct-opt2 .ao-n b i{font-style:normal;font-weight:400;color:var(--muted);font-size:11px}
.acct-opt2 .ao-n small{font:11px/1.2 var(--mono);color:var(--muted)}
.acct-opt2 .ao-api{display:flex;gap:4px}
.acct-opt2 .ao-api span{font:700 10px/1 var(--sans);padding:3px 5px;border-radius:4px;letter-spacing:.02em}
.acct-opt2 .ao-api .on{background:var(--good-bg);color:var(--good)}
.acct-opt2 .ao-api .off{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);text-decoration:line-through;opacity:.7}
.dd-menu li[aria-selected="true"] .acct-opt2 .ao-n small,.dd-menu li[aria-selected="true"] .acct-opt2 .ao-f small,.dd-menu li[aria-selected="true"] .acct-opt2 .ao-n b i{color:inherit;opacity:.75}
@media (min-width:721px){.dd-acct.dd-plain .dd-menu{min-width:360px}}
.dd-acct .dd-menu li{padding:8px 8px}

/* ================= Spacing standard (Nimet, Oct 31) =================
   One scale for every page. Defined here, at the end of the shared stylesheet, with `html body` in front so page styles
   cannot drift from it. New pages: use these tokens, never a hand-picked gap.
   --gap-block 12px : between page blocks (everything directly inside <main>), between cards in a grid (rows and columns),
                      between tiles in a KPI / summary row.
   --gap-row    8px : between the items of a stacked list (list rows, campaign cards, comments, recommendations). */
:root{--gap-block:12px;--gap-row:8px;--block-gap:var(--gap-block)}
:root{--main-pt:16px}
html body main.wrap{display:flex;flex-direction:column;gap:var(--gap-block);padding-top:var(--main-pt)}
html body main.wrap > :not(.sr-only):not(.filters-sticky){margin-top:0!important;margin-bottom:0!important}
/* Containers that only stack blocks (a view rendered by script, a detail area) get the block gap too; inline margins inside them are ignored */
html body main.wrap > div:not([class]),html body main :is(div,section):not([class]):has(> :is(.k-card,.k-grid2,.k-grid3,.k-kpis,.k-tw,.k-bar,.k-empty) ~ :is(.k-card,.k-grid2,.k-grid3,.k-kpis,.k-tw,.k-bar,.k-empty)){display:flex;flex-direction:column;gap:var(--gap-block)}
html body main.wrap > div:not([class]) > :not(.sr-only),html body main :is(div,section):not([class]):has(> :is(.k-card,.k-grid2,.k-grid3,.k-kpis,.k-tw,.k-bar,.k-empty) ~ :is(.k-card,.k-grid2,.k-grid3,.k-kpis,.k-tw,.k-bar,.k-empty)) > *{margin-top:0!important;margin-bottom:0!important}
/* Card grids and tile rows */
html body main :is(.k-kpis,.k-grid2,.k-grid3,.ac-kpis,.ac-cty,.ob-kpis,.bu-kpis,.fb-kpis,.fb-pipe,.fb-proj,.fb-grid2,.fb-grid3,.hr-kpis,.rp-kpis,.rp-lib,.al-kpis,.kpis,.lx-kpis,.lx-health,.pp-kpis,.st-kpis,.tg-kpis,.vc-kpis,.vc-two,.wl-att,.wl-kpis,.wl-sk,.summary,.sa-grid2,.sa-kpis,.sa-set,.sa-cands,.sl-cards,.sl-side,.sl-sidebody,.rt-rules,.rt-who,.cb-prods,.bu-recs,.prios,.op-pers,.gr-col,.am-cat,.ag-cards,.sl-mini){gap:var(--gap-block)}
/* Stacked lists */
html body main :is(.ag-list:not(.ag-list-grid),.al-list,.list,.op-list,.bz-opps,.vc-cm,.rt-disp,.fb-recs,.sa-recs,.pp-q,.sl-pc){gap:var(--gap-row)}
html body main .ag-list.ag-list-grid{gap:var(--gap-row)}
html body main :is(.list,.ag-list,.al-list,.op-list,.vc-cm) > *{margin-top:0;margin-bottom:0}

/* App footer (shell.js addFooter): Amazon Ads Verified Partner badge + Solution Provider text + trademark statement */
.pw-foot{margin-top:28px;padding-block:18px 26px;border-top:1px solid var(--line)}
.pw-foot-in{display:flex;align-items:center;gap:14px 18px;flex-wrap:wrap}
.pw-foot-vp{display:block;height:64px;width:auto;margin:-8px -6px}
.pw-foot-tx{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:11.5px;color:var(--muted)}
.pw-foot-tx b{font-size:12px;font-weight:600;color:var(--fg-2)}
.pw-foot-tx small{font-size:10.5px}

/* Sidebar v3 (Şaban, Nov 1): icons never move between the icon rail and the open menu.
   Section titles, Home and pages keep the same padding in both states (no centring in the rail); a section's pages sit 8px
   in from the section icons behind a thin line in the section colour, which fits inside the 64px rail. Only the text,
   chevrons and badges are hidden when the menu is closed. */
.side .sg-h{justify-content:flex-start;padding:0 10px 0 13px}

.sg-l,html.side-mob .sg-l{margin:0 0 0 9px;padding:2px 0 6px;border-top:0;border-left:1px solid color-mix(in srgb,var(--gc,var(--line)) 40%,transparent)}
.sg-l a,html.side-mob .sg-l a{justify-content:flex-start;margin:0 0 0 3px;padding:0 8px}
.side .sg-h{height:38px;min-height:38px}
.side .sg{margin-top:2px;padding-top:0;border-top:0}

/* Sidebar v4 (Şaban, Nov 1): smooth open/close. Desktop: the menu is always laid out at full width (232px) with every
   label in place and is CLIPPED to the 64px icon rail when closed. Opening only animates the clip — no relayout, no
   labels switching on/off, nothing on the page restyled — so it opens and closes instantly and icons never move.
   Clipped parts take no clicks, so the page under the rail stays usable. Pinned = fully shown, page pushed right. */
@media (min-width:721px){
  .side{width:232px;border-right:0;box-shadow:none;clip-path:inset(0 168px 0 0);transition:clip-path .12s ease-out,box-shadow .12s ease-out;
    background-image:linear-gradient(to right,transparent 63px,var(--line) 63px,var(--line) 64px,transparent 64px);will-change:clip-path}
  .side.is-open{clip-path:inset(0 -40px 0 0);box-shadow:10px 0 30px rgba(0,0,0,.14);background-image:linear-gradient(to left,var(--line) 1px,transparent 1px)}
  html.side-pin .side{clip-path:none;box-shadow:none;background-image:linear-gradient(to left,var(--line) 1px,transparent 1px)}
}
@media (min-width:721px) and (prefers-reduced-motion:reduce){.side{transition:none}}
/* closed rail: labels that start inside the 64px strip are faded out (opacity only — the layout never changes) */
@media (min-width:721px){
  .side a > span,.side button > span,.side .sg-chev,.side .side-staff{transition:opacity .1s ease-out}
  .side:not(.is-open) a > span,.side:not(.is-open) button > span,.side:not(.is-open) .sg-chev,.side:not(.is-open) .side-staff{opacity:0}
}

/* ---------- Data type label (Şaban, Nov 2): Live data · Uploaded data · Sample data, in the header on every page ---------- */
.dsrc{position:relative;flex:none;margin-left:8px}
.dsrc[hidden]{display:none}
.dsrc-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:3px 4px;cursor:pointer;display:flex;align-items:center}
.dsrc-btn:hover{background:var(--sunken)}
.dk{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;line-height:18px}
.dk i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dk-live{background:var(--good-bg);color:var(--good)}
.dk-up{background:var(--action-soft);color:var(--action-ink)}
.dk-smp{background:var(--crit-bg);color:var(--crit)}
.dk-mix{background:var(--mid-bg);color:var(--mid)}
.dsrc-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:105;width:340px;max-width:calc(100vw - 24px);background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:12px 14px;font-size:12.5px;color:var(--fg-2)}
.dsrc-pop > b{display:block;font-size:13px;color:var(--fg);margin-bottom:8px}
.dsrc-pop ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.dsrc-pop li{display:flex;gap:8px;align-items:flex-start}
.dsrc-pop li > span:last-child{display:flex;flex-direction:column;gap:1px;min-width:0}
.dsrc-pop li b{color:var(--fg);font-weight:600}
.dsrc-pop small{color:var(--muted);font-size:11.5px}
.dsrc-pop small.dk-other{color:var(--crit)}
.dsrc-pop p{margin:6px 0 0;line-height:1.45}
.dsrc-warn{display:flex;align-items:flex-start;gap:8px;padding:6px max(16px,env(safe-area-inset-right,0px)) 6px max(16px,env(safe-area-inset-left,0px));background:var(--mid-bg);color:var(--mid);border-top:1px solid var(--line);font-size:12.5px;line-height:22px}
.dsrc-warn-ic{font-size:14px;line-height:22px}
.dsrc-warn .dk{margin:0 2px;padding:0 8px}
@media (max-width:720px){ .dsrc{margin-left:4px} .dsrc-btn .dk{font-size:0;gap:0;padding:6px} .dsrc-btn .dk i{width:9px;height:9px} .dsrc-pop{position:fixed;left:8px;right:8px;width:auto;top:calc(var(--hdr-h,52px) + 4px)} .dsrc-warn{font-size:12px;line-height:18px} }

a.btn{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:inherit}a.btn.ink{color:var(--ink-btn-fg,#fff)}