@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400 500;font-display:swap;src:url(/_h/plex-arabic.0edef8fcbb.woff2) format("woff2");unicode-range:U+060C,U+061B,U+061F,U+0621-0655,U+0660-066D,U+0670,U+067E,U+0686,U+06A4,U+06AF,U+06CC,U+200C-200E}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400 500;font-display:swap;src:url(/_h/plex-latin.11bbd8f607.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201D,U+2022,U+2026,U+20AC,U+00B7,U+2212}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600 700;font-display:swap;src:url(/_h/plex-arabic-bold.b8c709f6a0.woff2) format("woff2");unicode-range:U+060C,U+061B,U+061F,U+0621-0655,U+0660-066D,U+0670,U+067E,U+0686,U+06A4,U+06AF,U+06CC,U+200C-200E}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:600 700;font-display:swap;src:url(/_h/plex-latin-bold.d1f3de6b46.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201D,U+2022,U+2026,U+20AC,U+00B7,U+2212}
@font-face{font-family:"Zain";font-style:normal;font-weight:400 500;font-display:swap;src:url(/_h/zain-arabic.915c19b773.woff2) format("woff2");unicode-range:U+060C,U+061B,U+061F,U+0621-0655,U+0660-066D,U+0670,U+067E,U+0686,U+06A4,U+06AF,U+06CC,U+200C-200E}
@font-face{font-family:"Zain";font-style:normal;font-weight:400 500;font-display:swap;src:url(/_h/zain-latin.d88ee1d1e5.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201D,U+2022,U+2026,U+20AC,U+00B7,U+2212}
@font-face{font-family:"Zain";font-style:normal;font-weight:600 800;font-display:swap;src:url(/_h/zain-arabic-bold.a3d0a258fb.woff2) format("woff2");unicode-range:U+060C,U+061B,U+061F,U+0621-0655,U+0660-066D,U+0670,U+067E,U+0686,U+06A4,U+06AF,U+06CC,U+200C-200E}
@font-face{font-family:"Zain";font-style:normal;font-weight:600 800;font-display:swap;src:url(/_h/zain-latin-bold.a8f79a0e31.woff2) format("woff2");unicode-range:U+0020-007E,U+00A0-00FF,U+2010-2015,U+2018-201D,U+2022,U+2026,U+20AC,U+00B7,U+2212}


:root {
  
  --brand: #0E6E7A;
  --brand-strong: #0A5660;
  --brand-soft: #E7F2F3;
  --on-brand: #FFFFFF;

  
  --canvas: #F5F7F7;      
  --surface: #FFFFFF;     
  --surface-2: #EEF2F2;   
  --line: #E1E6E7;
  --line-strong: #C7D0D2;
  --ink: #14191B;         
  --text: #3B4447;        
  --muted: #687377;       

  
  --ok: #18794E;   --ok-soft: #E8F5EE;
  --warn: #8F5600; --warn-soft: #FFF3DD;
  --bad: #B3261E;  --bad-soft: #FCEBEA;

  
  --font: "Zain", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --fs-12: 0.875rem; --fs-14: 1rem; --fs-16: 1.125rem; --fs-20: 1.375rem; --fs-24: 1.75rem; --fs-32: 2.25rem; --fs-40: 2.75rem; 
  --lh: 1.6;

  
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

  
  --r-sm: 8px;    
  --r-md: 12px;   
  --r-pill: 999px;
  --shadow-pop: 0 8px 24px rgba(16, 33, 36, .12), 0 1px 2px rgba(16, 33, 36, .08); 

  
  --control-h: 40px;
  --sidebar-w: 232px;

  
  --side-bg: #0F2A2E;   
  --side-2: #1C3B40;
  --side-line: #24464B;
  --side-text: #C9D6D8;
  --side-ink: #FFFFFF;
  --side-muted: #9FB4B7;
  --side-accent: #3FB3C1;
  --on-side-accent: #06242A;
  --content-max: 1200px;
  --form-max: 400px;
  --page-narrow: 760px; 
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3FB3C1; --brand-strong: #6CCAD5; --brand-soft: #12333A; --on-brand: #06242A;
    --canvas: #0E1416; --surface: #151D20; --surface-2: #1C262A; --line: #26333A; --line-strong: #364750;
    --ink: #EEF3F4; --text: #C9D3D6; --muted: #8C9A9F;
    --ok: #4CC38A; --ok-soft: #10301F; --warn: #F0B54A; --warn-soft: #33260C; --bad: #F08A80; --bad-soft: #3A1714;
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
    --side-bg: #090E10; --side-2: #172024; --side-line: #222D32;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #3FB3C1; --brand-strong: #6CCAD5; --brand-soft: #12333A; --on-brand: #06242A;
  --canvas: #0E1416; --surface: #151D20; --surface-2: #1C262A; --line: #26333A; --line-strong: #364750;
  --ink: #EEF3F4; --text: #C9D3D6; --muted: #8C9A9F;
  --ok: #4CC38A; --ok-soft: #10301F; --warn: #F0B54A; --warn-soft: #33260C; --bad: #F08A80; --bad-soft: #3A1714;
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, .45);
  --side-bg: #090E10; --side-2: #172024; --side-line: #222D32;
  color-scheme: dark;
}
@media (max-width: 719px) { :root { --control-h: 44px; } }


*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--canvas); color: var(--text); font: 400 var(--fs-14)/var(--lh) var(--font); }
h1, h2, h3 { color: var(--ink); margin: 0; line-height: 1.3; text-wrap: balance; }
h1 { font-size: var(--fs-24); font-weight: 700; }
h2 { font-size: var(--fs-16); font-weight: 600; }
h3 { font-size: var(--fs-14); font-weight: 600; }
p { margin: 0; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-12); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }


.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.side { background: var(--surface); border-inline-start: 0; border-inline-end: 1px solid var(--line); padding: var(--s5) var(--s3); display: flex; flex-direction: column; gap: var(--s5); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.side .logo { padding-inline: var(--s3); }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--text); font-weight: 500; }
.nav a:hover { background: var(--surface-2); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav .group { font-size: var(--fs-12); color: var(--muted); padding: var(--s4) var(--s3) var(--s1); }
.nav svg { width: 18px; height: 18px; flex: none; }
.side .foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: var(--s3); }
.main { min-width: 0; padding: var(--s6) var(--s6) var(--s8); }
.wrap { max-width: var(--content-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--s5); }
.topbar { display: none; }
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
  .main { padding: var(--s5) var(--s4) var(--s8); }
}


.logo { display: inline-flex; align-items: center; gap: var(--s2); color: var(--ink); font-weight: 700; font-size: var(--fs-16); }
.logo:hover { text-decoration: none; }
.logo .mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; flex: none; }
.logo .mark svg { width: 16px; height: 16px; color: var(--on-brand); }
.store-switch { display: flex; flex-direction: column; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); min-width: 0; }
.store-switch b { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }


.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.page-head > div { min-width: 0; display: flex; flex-direction: column; gap: var(--s1); }
.page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; flex-direction: row; align-items: center; }


.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--control-h); padding: 0 var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 var(--fs-14)/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.btn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--text); }
.btn--danger { color: var(--bad); }
.btn--block { width: 100%; }
.btn--icon { width: var(--control-h); padding: 0; }
.btn svg { width: 18px; height: 18px; flex: none; }


.form { display: flex; flex-direction: column; gap: var(--s4); width: 100%; }
.field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.field label { font-weight: 500; color: var(--ink); }
.field .hint { font-size: var(--fs-12); color: var(--muted); }
.field .err { font-size: var(--fs-12); color: var(--bad); }
.input, .select { width: 100%; height: var(--control-h); padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 400 var(--fs-14) var(--font); min-width: 0; }
.input::placeholder { color: var(--muted); }
.input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.input[aria-invalid="true"] { border-color: var(--bad); }
.input-group { display: flex; width: 100%; }
.input-group .input { flex: 1; }
.input-group > :first-child { border-start-end-radius: 0; border-end-end-radius: 0; }
.input-group > :last-child { border-start-start-radius: 0; border-end-start-radius: 0; margin-inline-start: -1px; }
.input-group .addon { flex: none; width: auto; padding-inline: var(--s3); }
.pw { position: relative; }
.pw .input { padding-inline-end: var(--control-h); }
.pw button { position: absolute; inset-block: 0; inset-inline-end: 0; width: var(--control-h); border: 0; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.pw button svg { width: 18px; height: 18px; }
.check { display: flex; gap: var(--s2); align-items: flex-start; }
.check input { margin-top: 4px; accent-color: var(--brand); }


.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.panel-body { padding: var(--s5); }
@media (max-width: 719px) { .panel-head { padding: var(--s3) var(--s4); } .panel-body { padding: var(--s4); } }


.toolbar { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
.toolbar .search { flex: 1 1 240px; min-width: 0; position: relative; }
.toolbar .search svg { position: absolute; inset-inline-start: var(--s3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.toolbar .search .input { padding-inline-start: 36px; }
.toolbar .select { width: auto; flex: 0 1 160px; }
@media (max-width: 719px) { .toolbar .select { flex: 1 1 calc(50% - var(--s1)); } }


.tabs { display: flex; gap: var(--s1); padding: 0 var(--s4); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: var(--s3) var(--s2); color: var(--muted); font-weight: 500; border-bottom: 2px solid transparent; white-space: nowrap; display: inline-flex; gap: var(--s1); }
.tabs a:hover { color: var(--ink); text-decoration: none; }
.tabs a[aria-current="true"] { color: var(--brand); border-bottom-color: var(--brand); }
.tabs .count { color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-start: 8px; unicode-bidi: isolate; }

@media (min-width: 720px) { .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: var(--s1); } }


.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r-sm); max-width: 100%; }
.seg > * { flex: 0 0 auto; }
.seg button { height: calc(var(--control-h) - 6px); padding: 0 var(--s3); border: 0; border-radius: 4px; background: transparent; color: var(--text); font: 500 var(--fs-14) var(--font); cursor: pointer; white-space: nowrap; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 33, 36, .12); }
.range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.range .compare { font-size: var(--fs-12); color: var(--muted); }


.kpis { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 1439px) { .kpis[style*="--n:5"], .kpis[style*="--n:6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 719px) { .kpis.kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s2); min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.kpi .label { color: var(--muted); font-size: var(--fs-14); display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.kpi .label abbr { text-decoration: none; letter-spacing: .04em; }
.kpi-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; flex: none; font-style: normal; }
.kpi-ic svg { width: 20px; height: 20px; }
.kpi .value { text-align: start; overflow-wrap: anywhere; color: var(--ink); font-size: var(--fs-24); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .value small { font-size: var(--fs-12); font-weight: 500; color: var(--muted); }
.delta { font-size: var(--fs-12); font-weight: 500; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.delta.up { color: var(--ok); } .delta.down { color: var(--bad); } .delta.flat { color: var(--muted); }
@media (max-width: 559px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .kpi { padding: var(--s3); } .kpi .label { font-size: var(--fs-12); gap: var(--s1); } .kpi-ic { width: 28px; height: 28px; border-radius: 8px; } .kpi-ic svg { width: 16px; height: 16px; } .kpi .value { font-size: var(--fs-20); } }


.home-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s4); align-items: stretch; }
@media (max-width: 1023px) { .home-row { grid-template-columns: minmax(0, 1fr); } }
.wk { display: flex; align-items: stretch; gap: var(--s3); height: 220px; }
.wk-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s1); }
.wk-b { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s1); }
.wk-col i { display: block; width: 100%; max-width: 44px; border-radius: 8px 8px 0 0; background: color-mix(in srgb, var(--brand) 32%, var(--surface)); min-height: 2px; }
.wk-col.now i { background: var(--brand); }
.wk-v { font-size: var(--fs-12); color: var(--muted); }
.wk-d { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; border-top: 1px solid var(--line); width: 100%; text-align: center; padding-top: var(--s1); }
.wk-col.now .wk-d { color: var(--ink); font-weight: 600; }
.wk { position: relative; }
.wk-col { position: relative; cursor: default; outline: none; }
.wk-col:hover i, .wk-col:focus i { background: var(--brand); }
.wk-tip { display: none; position: absolute; top: 2px; z-index: 5; width: 232px; max-width: 86vw; box-sizing: border-box; padding: var(--s2) var(--s3); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.16); font-size: 12px; line-height: 1.45; text-align: start; }
.wk-col:hover .wk-tip, .wk-col:focus .wk-tip { display: block; }
.wk-st { inset-inline-start: 0; } .wk-en { inset-inline-end: 0; } .wk-mid { left: 50%; transform: translateX(-50%); }
.wk-t { font-weight: 700; margin-bottom: 4px; }
.wk-r { display: flex; align-items: baseline; gap: 6px; padding: 1px 0; } .wk-r span { color: var(--muted); flex: 1; white-space: nowrap; }
.wk-r em { font-style: normal; font-size: 11px; white-space: nowrap; }
.wk-h { color: var(--muted); font-size: 11px; }
@media (max-width: 559px) { .wk { gap: var(--s1); height: 200px; } .wk-d { font-size: 11px; } .wk-v { font-size: 11px; } }
.qt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.qt { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s2); min-height: 96px; padding: var(--s4) var(--s2); border-radius: var(--r-md); background: var(--surface-2); color: var(--ink); text-align: center; font-weight: 500; }
.qt:hover { text-decoration: none; background: var(--brand-soft); }
.qt svg { width: 24px; height: 24px; color: var(--brand); }


.table-wrap { overflow-x: auto; position: relative; } 
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th { text-align: start; font-weight: 500; font-size: var(--fs-12); color: var(--muted); background: var(--surface-2); padding: var(--s2) var(--s4); white-space: nowrap; }
.table td { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:hover { background: var(--surface-2); }
.table .n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .act { width: 1%; white-space: nowrap; text-align: end; padding-inline: var(--s2); }
.table .sel { width: 1%; padding-inline-end: 0; }
.table .sel input { accent-color: var(--brand); width: 16px; height: 16px; }
.cell-main { display: flex; flex-direction: column; min-width: 0; }
.cell-main b, .cell-main a { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.cell-main span { color: var(--muted); font-size: var(--fs-12); overflow-wrap: anywhere; }
.cell-main span[dir="ltr"] { display: block; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cell-main .pill:not(.ok):not(.warn):not(.bad):not(.info) { color: var(--text); }
.cell-img { display: flex; gap: var(--s3); align-items: center; min-width: 0; }
.thumb { width: 40px; height: 40px; border-radius: var(--r-sm); background: var(--surface-2); flex: none; display: grid; place-items: center; color: var(--muted); }
.thumb svg { width: 20px; height: 20px; }
.table-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border-top: 1px solid var(--line); flex-wrap: wrap; color: var(--muted); font-size: var(--fs-12); }

.m-only { display: none; }
@media (max-width: 719px) {
  .table .opt { display: none; }
  .table th, .table td { padding-inline: var(--s3); }
  .m-only { display: block; }
}


@media (max-width: 719px) {
  .table-wrap { overflow: visible; }
  .table, .table tbody, .table tr, .table td { display: block; }
  .table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .table tbody tr { position: relative; margin: 0 var(--s3) var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
  .table tbody tr:hover { background: var(--surface); }
  .table td { border-top: 0; padding: var(--s1) 0; min-inline-size: 0; }
  .table td:first-child { padding-inline-end: calc(var(--control-h) + var(--s1)); }
  .table td.sel { padding: 0 0 var(--s1); }
  .table td.sel + td { padding-inline-end: calc(var(--control-h) + var(--s1)); }
  .table td.act { position: absolute; inset-block-start: var(--s2); inset-inline-end: var(--s2); inline-size: auto; padding: 0; }
  .table td.act .menu > button { inline-size: var(--control-h); block-size: var(--control-h); }
  .table td.n { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); text-align: start; }
  .table td[data-l]:not(:first-child):not(.act):not(.sel)::before { content: attr(data-l); color: var(--muted); font-size: var(--fs-12); font-weight: 500; }
  .table td.n[data-l=""]::before { content: none; }
  .menu-list { max-inline-size: calc(100vw - 2 * var(--s3)); }
  
  .table td:first-child a, .table td:first-child .linkbtn, .table .cell-main > a, .table .cell-main .linkbtn { display: flex; align-items: center; min-block-size: var(--control-h); }
  .table td.act:has(.more) { position: static; padding: var(--s1) 0 0; }
  
  .table td.n > a { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 40px; min-block-size: 40px; }
}


.pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 var(--s2); border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 500; white-space: nowrap; background: var(--surface-2); color: var(--text); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.bad { background: var(--bad-soft); color: var(--bad); }
.pill.info { background: var(--brand-soft); color: var(--brand); }


.menu { position: relative; display: inline-block; }
.menu > button { width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.menu > button:hover, .menu > button[aria-expanded="true"] { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.menu > button svg { width: 18px; height: 18px; }
.menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 30; min-width: 196px; padding: var(--s1); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; text-align: start; }
.menu-list.up { top: auto; bottom: calc(100% + 4px); }
.menu-list.flip { inset-inline-end: auto; inset-inline-start: 0; }

.menu-list.floating, .menu-list.floating.up, .menu-list.floating.flip { position: fixed; inset: auto; z-index: 1000; overflow-y: auto; overscroll-behavior: contain; }
.menu-host-open { z-index: 60 !important; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); border-radius: var(--r-sm); border: 0; background: none; color: var(--text); font: 400 var(--fs-14) var(--font); cursor: pointer; text-align: start; white-space: nowrap; }
.menu-list a:hover, .menu-list button:hover { background: var(--surface-2); text-decoration: none; }
.menu-list hr { border: 0; border-top: 1px solid var(--line); margin: var(--s1) 0; }
.menu-list .danger { color: var(--bad); }


.alert { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-md); background: var(--warn-soft); color: var(--ink); }
.alert svg { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 3px; }
.alert > div { flex: 1; min-width: 0; }

.alert { flex-wrap: wrap; } .alert > div { flex: 1 1 12rem; }
.alert.bad { background: var(--bad-soft); } .alert.bad svg { color: var(--bad); }
.alert.info { background: var(--brand-soft); } .alert.info svg { color: var(--brand); }
.alert .btn { height: 32px; }
.alert[data-sound-unlock] { margin-block-end: var(--s4); } 


dialog.dialog { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); }
dialog.dialog::backdrop { background: rgba(10, 20, 22, .45); }
.dialog-head { padding: var(--s5) var(--s5) var(--s2); }
.dialog-body { padding: 0 var(--s5) var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.dialog-foot { display: flex; gap: var(--s2); justify-content: flex-start; padding: var(--s4) var(--s5); border-top: 1px solid var(--line); }


.toast { position: fixed; inset-inline-start: 50%; transform: translateX(50%); bottom: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); z-index: 50; display: flex; gap: var(--s3); align-items: center; padding: var(--s3) var(--s4); background: var(--ink); color: var(--canvas); border-radius: var(--r-md); box-shadow: var(--shadow-pop); max-width: calc(100vw - 32px); }
.toast a { color: var(--canvas); text-decoration: underline; font-weight: 600; }


.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s7) var(--s5); }
.empty .icon { width: 48px; height: 48px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; }
.empty .icon svg { width: 22px; height: 22px; }
.empty p { max-width: 36ch; color: var(--muted); }


.cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s5); align-items: start; }
@media (max-width: 1023px) { .cols { grid-template-columns: minmax(0, 1fr); } }
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); min-width: 0; }
.list-row:first-child { border-top: 0; }
.list-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
.list-row > :first-child .pill { max-inline-size: 100%; white-space: normal; block-size: auto; min-block-size: 24px; }
@media (max-width: 719px) { .list-row { padding: var(--s3) var(--s4); } }
.bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }


.proto-note { font-size: var(--fs-12); color: var(--muted); text-align: center; padding: var(--s4); }


dialog.drawer { margin: 0; margin-inline-end: auto; height: 100%; max-height: 100%; width: min(300px, 86vw); border: 0; padding: var(--s5) var(--s3); background: var(--surface); color: var(--text); display: none; }
dialog.drawer[open] { display: flex; flex-direction: column; gap: var(--s5); }
dialog.drawer::backdrop { background: rgba(10, 20, 22, .45); }
dialog.drawer .drawer-head { display: flex; justify-content: space-between; align-items: center; padding-inline: var(--s3); }


.header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.header-in { max-width: var(--content-max); margin-inline: auto; padding: var(--s3) var(--s5); display: flex; align-items: center; gap: var(--s5); }
.header nav { display: flex; gap: var(--s1); flex: 1; min-width: 0; }
.header nav a { padding: var(--s2) var(--s3); border-radius: var(--r-sm); color: var(--text); font-weight: 500; }
.header nav a:hover { background: var(--surface-2); text-decoration: none; }
.header nav a[aria-current="page"] { color: var(--brand); background: var(--brand-soft); }
.menu > .avatar, .avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 600; border: 0; cursor: pointer; font-family: var(--font); }
.page { max-width: var(--content-max); margin-inline: auto; padding: var(--s6) var(--s5) var(--s8); display: flex; flex-direction: column; gap: var(--s5); }
@media (max-width: 719px) {
  .header-in { padding: var(--s3) var(--s4); gap: var(--s3); }
  .header nav { display: none; }
  .header .logo { flex: 1; }
  .page { padding: var(--s5) var(--s4) var(--s8); }
}


.bulk { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; padding: var(--s2) var(--s4); background: var(--brand-soft); border-bottom: 1px solid var(--line); }
.bulk b { color: var(--ink); margin-inline-end: var(--s2); }
.bulk .btn { height: 32px; }
.toolbar .m-tabs { display: none; }
@media (max-width: 719px) { .opt-tabs { display: none; } .toolbar .m-tabs { display: block; } }
.btn:disabled { opacity: .45; cursor: default; }


.auth-top { max-width: var(--content-max); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); }
.doors { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-2); border-radius: var(--r-sm); }
.doors a { height: 34px; display: inline-flex; align-items: center; padding: 0 var(--s3); border-radius: 4px; color: var(--text); font-weight: 500; white-space: nowrap; }
.doors a:hover { text-decoration: none; color: var(--ink); }
.doors a[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 33, 36, .12); }
.auth { width: 100%; max-width: calc(var(--form-max) + 2 * var(--s5)); margin: var(--s6) auto var(--s8); padding-inline: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
.auth .form { gap: var(--s4); }
.or { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: var(--fs-12); }
.or::before, .or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.g-mark { width: 18px; height: 18px; flex: none; }
@media (max-width: 719px) { .auth-top { padding: var(--s3) var(--s4); } .auth { padding-inline: var(--s4); margin-top: var(--s5); } .doors a { padding: 0 var(--s2); } }

.store-hit { width: 100%; border: 0; border-top: 1px solid var(--line); background: none; font: inherit; text-align: start; cursor: pointer; }
.list > form:first-child .store-hit { border-top: 0; }

.my-ini { background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: var(--fs-16); }
.my-act { display: inline-flex; align-items: center; gap: var(--s1); }
.my-enter { height: 36px; background: var(--brand-soft); border-color: transparent; color: var(--brand); font-weight: 600; }
.my-enter:hover { background: var(--brand); color: var(--on-brand); }

.my-name { min-width: 0; max-width: 100%; text-align: start; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
@media (max-width: 719px) {
  .table .cell-main .linkbtn.my-name { display: -webkit-box; align-items: initial; }
  .table td:first-child:has(.my-name) { padding-inline-end: calc(var(--control-h) + 76px + var(--s2)); }
  .table td.act:has(.my-enter) .my-act { gap: var(--s2); }
}
@media (max-width: 399px) {
  .table td:first-child:has(.my-name) { padding-inline-end: 0; }
  .table td.act:has(.my-enter) { position: static; padding: var(--s2) 0 0; }
  .table td.act:has(.my-enter) .my-act { display: flex; justify-content: flex-end; }
  .table td.act:has(.my-enter) .my-act > form { flex: 1; }
  .table td.act:has(.my-enter) .my-enter { width: 100%; }
}


@media (max-width: 719px) {
  .doors a { height: 44px; }
  .field a.small, .field .small a { min-height: 44px; display: inline-flex; align-items: center; }
}
.logo .s-wordmark, .logo .shop2-wordmark { width: 46px; height: 20px; flex: none; }
.logo .s-brandmark, .logo .shop2-brandmark { width: 16px; height: 16px; }


@media (max-width: 719px) { .logo { min-height: 44px; } }
.check { align-items: center; }
.check input { appearance: none; -webkit-appearance: none; position: relative; flex: none; width: 44px; height: 44px; margin: -12px; background: none; border: 0; cursor: pointer; }
.check input::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid var(--line-strong); border-radius: 4px; background: var(--surface); }
.check input:checked::before { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { content: ""; position: absolute; inset-block-start: 16px; inset-inline-start: 19px; width: 6px; height: 11px; border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; border-radius: var(--r-sm); }
.check label { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s1); min-height: 44px; }
.check label a { display: inline-flex; align-items: center; min-height: 44px; }


.seg .seg-a { display: inline-flex; align-items: center; height: calc(var(--control-h) - 6px); padding: 0 var(--s3); border-radius: 4px; color: var(--text); font-weight: 500; white-space: nowrap; }
.seg .seg-a:hover { text-decoration: none; color: var(--ink); }
.seg .seg-a[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(16, 33, 36, .12); }
form.inline { display: inline; margin: 0; }
.linkbtn { border: 0; background: none; padding: 0; margin: 0; color: var(--ink); font: 600 var(--fs-14) var(--font); cursor: pointer; text-align: start; overflow-wrap: anywhere; }
.linkbtn:hover { color: var(--brand); text-decoration: underline; }
.cell-main .linkbtn { min-height: 24px; }
@media (max-width: 719px) { .cell-main .linkbtn { min-height: 44px; } }
.menu-list form { margin: 0; display: block; }
.menu-list form button { inline-size: 100%; }
.menu-list .opt-row { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3); cursor: pointer; min-height: 40px; }
.menu-list .note { display: block; padding: var(--s2) var(--s3); color: var(--muted); font-size: var(--fs-12); max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 719px) { .menu-list a, .menu-list button, .menu-list .opt-row { min-height: 44px; } }
.page-head .actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
#s-app-msg:not(:empty)::before { content: " · "; }
.list { list-style: none; margin: 0; padding: 0; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding-block: var(--s2); border-block-end: 1px solid var(--line); }
.list-row:last-child { border: 0; }
@media (max-width: 719px) {
  .menu > .avatar, .menu > button { width: 44px; height: 44px; }
  .seg button, .seg .seg-a { height: 44px; }
}
.table-wrap { overflow: visible; }


.shot-btn { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.shot-btn picture { display: block; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(10, 14, 22, .92); display: none; align-items: center; justify-content: center; padding: var(--s4); touch-action: pan-x; }
.lb.on { display: flex; }
.lb img { max-width: min(96vw, 1700px); max-height: 90vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-pop); transition: transform .15s; }
.lb button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; }
.lb button:hover { background: rgba(255, 255, 255, .26); }
.lb .lb-x { top: 14px; inset-inline-end: 14px; }
.lb .lb-prev { inset-inline-start: 14px; top: 50%; margin-top: -23px; }
.lb .lb-next { inset-inline-end: 14px; top: 50%; margin-top: -23px; }
.lb .lb-cap { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: #e8ecf3; font-size: var(--fs-14); padding: 0 70px; }
@media (max-width: 700px) { .lb .lb-prev, .lb .lb-next { top: auto; bottom: 56px; margin: 0; } .lb .lb-prev { inset-inline-start: 24px; } .lb .lb-next { inset-inline-end: 24px; } }


.nt-toast { position: fixed; inset-inline: var(--s4); inset-block-end: calc(var(--s5) + env(safe-area-inset-bottom, 0px)); margin-inline: auto; inline-size: max-content; max-inline-size: min(28rem, calc(100vw - 32px)); z-index: 60; display: flex; align-items: stretch; background: var(--ink); color: var(--canvas); border-radius: var(--r-md); box-shadow: var(--shadow-pop); animation: nt-in .25s ease-out; }
.nt-toast[hidden] { display: none; }
.nt-toast.is-gone { opacity: 0; transition: opacity .35s; }
.nt-go { flex: 1; min-width: 0; display: grid; gap: var(--s1); text-align: start; padding: var(--s3) var(--s4); background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }
.nt-go b { font-weight: 600; overflow-wrap: anywhere; }
.nt-go span { font-size: var(--fs-12); opacity: .8; }
.nt-x { flex: none; inline-size: 44px; background: none; border: 0; border-inline-start: 1px solid var(--muted); color: inherit; font-size: var(--fs-20); line-height: 1; cursor: pointer; }
@keyframes nt-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes nt-flash { from { background: var(--brand-soft); } to { background: transparent; } }
.nt-flash { animation: nt-flash 2.4s ease-out; }
@media (prefers-reduced-motion: reduce) { .nt-toast, .nt-flash { animation: none; } }


.shop2-stack { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.shop2-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.shop2-label { display: flex; flex-direction: column; gap: var(--s1); font-weight: 500; color: var(--ink); min-width: 0; }
.shop2-hint { font-size: var(--fs-12); color: var(--muted); margin: 0; }
.shop2-input, .shop2-select { width: 100%; height: var(--control-h); padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 400 var(--fs-14) var(--font); min-width: 0; }
.shop2-textarea { height: auto; min-height: calc(var(--control-h) * 2); padding: var(--s2) var(--s3); line-height: var(--lh); resize: vertical; }
.shop2-input:focus, .shop2-select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.shop2-num { max-width: 9rem; }
.shop2-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); height: var(--control-h); padding: 0 var(--s4); border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font: 500 var(--fs-14)/1 var(--font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.shop2-btn:hover { background: var(--surface-2); text-decoration: none; }
.shop2-btn--primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.shop2-btn--primary:hover { background: var(--brand-strong); border-color: var(--brand-strong); }
.shop2-btn--quiet { border-color: transparent; background: transparent; color: var(--text); }
.shop2-btn--danger { color: var(--bad); }
.shop2-btn--block { width: 100%; }
.shop2-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.s-row { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }


.av { --av: 28px; position: relative; display: inline-grid; place-items: center; flex: none; inline-size: var(--av); block-size: var(--av); border-radius: 22%; overflow: hidden; }
.av > img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.av > .av-l { display: none; font-weight: 700; font-size: calc(var(--av) * .5); line-height: 1; }
.av.av--fb { background: var(--av-bg, var(--brand)); color: var(--av-fg, var(--on-brand)); }
.av.av--fb > .av-l { display: block; }


dialog.sw-dlg { width: min(520px, calc(100vw - 32px)); padding: 0; }
dialog.sw-dlg.sw-dlg--wide { width: min(860px, calc(100vw - 32px)); }
dialog.sw-dlg.sw-dlg--xl { width: min(1180px, calc(100vw - 32px)); }
dialog.sw-dlg[open] { display: flex; flex-direction: column; }

dialog.sw-dlg { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sw-top { position: sticky; inset-block-start: 0; z-index: 1; background: var(--surface); }
.sw-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s4) var(--s5) var(--s2); }
.sw-head .sw-h { font-size: var(--fs-16, 16px); }
.sw-head .sw-n { margin-inline-end: auto; }
.sw-q { position: relative; display: flex; align-items: center; margin: 0 var(--s5) var(--s3); }
.sw-q > svg { position: absolute; inset-inline-start: var(--s3); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.sw-q > .input { inline-size: 100%; padding-inline-start: calc(var(--s3) * 2 + 18px); padding-inline-end: 84px; min-height: 44px; }
.sw-q > .sw-kbd { position: absolute; inset-inline-end: var(--s3); font: 500 11px var(--font); color: var(--muted); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 6px; pointer-events: none; }
.sw-sec { margin: 0 var(--s5) var(--s1); }
.sw-list { display: grid; grid-template-columns: 1fr; gap: var(--s1); padding: 0 var(--s3) var(--s3); }
.sw-dlg--wide .sw-list { grid-template-columns: 1fr 1fr; }
@media (min-width: 1100px) { .sw-dlg--xl .sw-list { grid-template-columns: 1fr 1fr 1fr; } }
dialog.sw-dlg.sw-dlg--xxl { width: min(1380px, calc(100vw - 32px)); }
@media (min-width: 1380px) { .sw-dlg--xxl .sw-list { grid-template-columns: repeat(4, 1fr); } .sw-dlg--xxl .sw-it.sw-cur, .sw-dlg--xxl .sw-it > button { min-height: 52px; padding-block: 6px; } }
@media (min-width: 641px) and (max-width: 860px) { .sw-dlg--wide .sw-list { grid-template-columns: 1fr; } }
.sw-it { margin: 0; min-width: 0; }
.sw-it[hidden] { display: none; }
.sw-it.sw-cur, .sw-it > button { display: flex; align-items: center; gap: var(--s3); inline-size: 100%; padding: var(--s2) var(--s3); min-height: 56px; border-radius: var(--r-sm); border: 1px solid transparent; background: none; color: var(--text); font: 400 var(--fs-14) var(--font); text-align: start; cursor: pointer; }
.sw-it > button:hover, .sw-it.is-act > button { background: var(--surface-2); border-color: var(--line); }
.sw-it > button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sw-it.sw-cur { background: var(--brand-soft, var(--surface-2)); cursor: default; }
.sw-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sw-t b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sw-t small { color: var(--muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.sw-ck { color: var(--brand); font-weight: 600; font-size: var(--fs-12); white-space: nowrap; }
.sw-none { padding: var(--s3) var(--s5); margin: 0; }
.sw-foot { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); }
.sw-foot form { margin: 0; }
@media (max-width: 640px) {
  
  dialog.sw-dlg, dialog.sw-dlg.sw-dlg--wide, dialog.sw-dlg.sw-dlg--xl { width: 100vw; max-width: 100vw; min-height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
  .sw-dlg--wide .sw-list { grid-template-columns: 1fr; }
  .sw-q > .sw-kbd { display: none; }
  .sw-q > .input { padding-inline-end: var(--s3); }
}




.code { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }
.stack { display: flex; flex-direction: column; gap: var(--s5); min-width: 0; }
.narrow { width: 100%; max-width: calc(var(--form-max) + 2 * var(--s5)); display: flex; flex-direction: column; gap: var(--s5); }

.wrap:has(> .narrow) { max-width: var(--page-narrow); }
.wrap:has(> .narrow) > .narrow { max-width: none; }
.page-head .back { display: inline-flex; align-items: center; min-height: 24px; color: var(--muted); }
.page-head .back::before { content: "→"; margin-inline-end: var(--s1); }
.panel-head .ph-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert.ok { background: var(--ok-soft); } .alert.ok svg { color: var(--ok); }
.alert b { color: var(--ink); }
.textarea { height: auto; min-height: calc(var(--control-h) * 2); padding: var(--s2) var(--s3); line-height: var(--lh); resize: vertical; }
.menu > .menu-text { width: auto; padding: 0 var(--s3); gap: var(--s1); display: inline-flex; align-items: center; height: var(--control-h); border-color: var(--line-strong); color: var(--ink); font: 500 var(--fs-14) var(--font); }
.kpi-link { color: inherit; }
.kpi-link:hover { text-decoration: none; background: var(--surface-2); }
.m-tabs-wrap { display: none; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
@media (max-width: 719px) { .m-tabs-wrap { display: block; } }
.table-foot .pager { display: flex; gap: var(--s2); margin-inline-start: auto; }
.list-row .lr-end { flex: none; display: flex; align-items: center; gap: var(--s2); }


.switch { display: inline-flex; align-items: center; gap: var(--s3); cursor: pointer; min-height: 44px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { position: relative; flex: none; width: 40px; height: 24px; border-radius: var(--r-pill); background: var(--line-strong); transition: background .15s; }
.switch .track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-pop); transition: inset-inline-start .15s; }
.switch input:checked + .track { background: var(--brand); }
.switch input:checked + .track::after { inset-inline-start: 19px; }
.switch input:focus-visible + .track { outline: 2px solid var(--brand); outline-offset: 2px; }


details.more { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
details.more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: 48px; padding: var(--s3) var(--s5); font-weight: 600; color: var(--ink); }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after { content: "+"; color: var(--muted); font-weight: 400; font-size: var(--fs-20); line-height: 1; }
details.more[open] > summary::after { content: "−"; }
details.more > .more-body { border-top: 1px solid var(--line); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s5); }
@media (max-width: 719px) { details.more > summary { padding: var(--s3) var(--s4); } details.more > .more-body { padding: var(--s4); } }


.toast svg { width: 18px; height: 18px; flex: none; }


.main-col { min-width: 0; display: flex; flex-direction: column; }
.main-col > .main { flex: 1; }
.skip:focus { position: fixed; z-index: 100; top: var(--s2); inset-inline-start: var(--s2); width: auto; height: auto; clip: auto; padding: var(--s2) var(--s3); background: var(--surface); border-radius: var(--r-sm); }
.store-box { display: flex; flex-direction: column; gap: 2px; padding-inline: var(--s3); min-width: 0; }
.store-box .logo { min-height: 44px; }
.store-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; flex: none; background: var(--surface-2); }
.store-name { overflow-wrap: anywhere; }
.store-domain { padding-inline-start: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: end; }
.store-switch-menu { margin-top: var(--s2); }
.store-switch-menu > .menu-text { width: 100%; justify-content: space-between; }
.store-switch-menu .menu-list { inset-inline-end: auto; inset-inline-start: 0; min-width: 100%; }
.store-switch-menu .menu-list img { width: 24px; height: 24px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.nav a > span { flex: 1; min-width: 0; }
.nav a .count { flex: none; min-width: 22px; height: 20px; padding: 0 6px; border-radius: var(--r-pill); background: var(--brand); color: var(--on-brand); font-size: var(--fs-12); font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums; }
.nav svg { color: var(--muted); }
.nav a[aria-current="page"] svg { color: var(--brand); }

.side { background: var(--side-bg); border-inline-end-color: var(--side-line); color: var(--side-text); }
.side .logo, .side .store-name { color: var(--side-ink); }
.side .store-domain { color: var(--side-muted); }
.side .store-switch-menu > .menu-text { color: var(--side-text); border-color: var(--side-line); background: var(--side-2); }
.side .nav a { color: var(--side-text); }
.side .nav a:hover { background: var(--side-2); color: var(--side-ink); }
.side .nav a[aria-current="page"] { background: var(--side-2); color: var(--side-ink); font-weight: 600; box-shadow: inset -3px 0 0 var(--side-accent); }
.side .nav svg { color: var(--side-muted); }
.side .nav a:hover svg, .side .nav a[aria-current="page"] svg { color: var(--side-accent); }
.side .nav .group { color: var(--side-muted); }
.side .nav a .count { background: var(--side-accent); color: var(--on-side-accent); }
.side .foot { border-top-color: var(--side-line); }
.side :focus-visible { outline-color: var(--side-accent); }

.sec-tabs { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none; padding-block: 4px; margin-block: -4px calc(-1 * var(--s2) - 4px); padding-inline: 2px; }
.sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 500; white-space: nowrap; }
.sec-tabs a:hover { text-decoration: none; border-color: var(--brand); color: var(--ink); }
.sec-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--canvas); font-weight: 600; }
@media (max-width: 719px) { .sec-tabs a { min-height: 44px; } }
@media (min-width: 720px) { .sec-tabs { flex-wrap: wrap; overflow-x: visible; row-gap: var(--s2); } } 

.adm-bar { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s6); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; min-height: 64px; }
.adm-bar .adm-store { display: none; color: var(--ink); font-weight: 700; font-size: var(--fs-16); min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 44px; align-items: center; }
.adm-bar .adm-store:hover { text-decoration: none; }
.adm-search, .drawer-search { position: relative; flex: 0 1 420px; min-width: 0; }
.adm-search svg, .drawer-search svg { position: absolute; inset-inline-start: var(--s3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.adm-search .input, .drawer-search .input { padding-inline-start: 36px; }
.adm-tools { display: flex; align-items: center; gap: var(--s2); margin-inline-start: auto; }
[data-m-only] { display: none; }
.drawer-search { flex: none; padding-inline: var(--s3); }
.drawer-search svg { inset-inline-start: calc(var(--s3) * 2); }
dialog.drawer .drawer-head .store-box { padding-inline: 0; flex: 1; }
dialog.drawer .foot { border-top: 1px solid var(--line); padding-top: var(--s3); }
@media (max-width: 1023px) {
  .adm-bar { padding: var(--s2) var(--s4); top: env(safe-area-inset-top, 0px); }
  .adm-bar .adm-store { display: inline-flex; }
  .adm-search { display: none; }
  [data-m-only] { display: inline-flex; }
  .adm-tools { margin-inline-start: 0; gap: var(--s1); }
}
@media (max-width: 719px) {
  .adm-tools .menu > .menu-text { padding: 0 var(--s2); }
  .btn--icon { width: 44px; }
}


.todo-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border-top: 1px solid var(--line); color: var(--text); min-height: 56px; }
.todo-row:first-child { border-top: 0; }
.todo-row:hover { background: var(--surface-2); text-decoration: none; }
.todo-row .todo-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.todo-row .todo-t b { color: var(--ink); font-weight: 600; }
.todo-row .todo-t span { color: var(--muted); font-size: var(--fs-12); }
.todo-row .todo-n { flex: none; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.todo-row .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.todo-row .dot.bad { background: var(--bad); } .todo-row .dot.warn { background: var(--warn); } .todo-row .dot.info { background: var(--brand); }
@media (max-width: 719px) { .todo-row { padding: var(--s3) var(--s4); } }

.todo-row .todo-t, .list-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 479px) {
  .todo-row:has(> form, > .btn, > button), .list-row:has(> form, > .btn, > button) { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--s3); }
  .todo-row:has(> form, > .btn, > button) > :is(form, .btn, button), .list-row:has(> form, > .btn, > button) > :is(form, .btn, button) { inline-size: 100%; }
  .todo-row:has(> form, > .btn, > button) .btn, .list-row:has(> form, > .btn, > button) .btn { inline-size: 100%; justify-content: center; }
}
.chart { display: flex; align-items: flex-end; gap: 2px; height: 120px; padding-top: var(--s2); }
.chart i { flex: 1; min-width: 2px; background: var(--brand-soft); border-radius: 3px 3px 0 0; position: relative; }
.chart i b { position: absolute; inset: auto 0 0 0; background: var(--brand); border-radius: inherit; }
.chart-axis { display: flex; justify-content: space-between; color: var(--muted); font-size: var(--fs-12); padding-top: var(--s1); }
.legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--muted); font-size: var(--fs-12); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-inline-end: var(--s1); vertical-align: middle; }
.legend .l1 { background: var(--brand); } .legend .l2 { background: var(--brand-soft); }
.app-banner { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.app-banner > div { flex: 1; min-width: 200px; }
.funnel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.funnel > div { display: flex; flex-direction: column; gap: 2px; }
.funnel b { color: var(--ink); font-size: var(--fs-20); font-variant-numeric: tabular-nums; }
.help-links { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
video.help-video { width: 100%; max-width: 720px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); }
ol.help-steps { margin: 0; padding-inline-start: var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
.auth-store-logo { max-width: 120px; max-height: 40px; object-fit: contain; }
.logo .wordmark { width: 46px; height: 20px; flex: none; }
.logo .brandmark { width: 16px; height: 16px; }
.chart, .chart-axis { direction: ltr; }
.stack-sm { display: flex; flex-direction: column; gap: var(--s1); }
.auth-foot { text-align: center; }
:where(.auth-top .logo img) { display: block; } 
.lang-switch { font-weight: 700; }

.table th { color: var(--text); }
@media (max-width: 719px) { .alert .btn { height: 44px; } .adm-tools .mt-l { display: none; } }
.adm-bar .adm-store { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
@media (max-width: 719px) { .panel-head > a, .help-links a, .page-head .back { min-height: 44px; display: inline-flex; align-items: center; } }

.logo-night { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-day { display: none; } :root:not([data-theme="light"]) .logo-night { display: block; } }
:root[data-theme="dark"] .logo-day { display: none; } :root[data-theme="dark"] .logo-night { display: block; }

.code:not(a .code):not(button .code):not(label .code) { cursor: copy; border-radius: 4px; }
@media (hover: hover) { .code:not(a .code):not(button .code):not(label .code):hover { background: var(--brand-soft); } }

html[dir="rtl"] .input[dir="ltr"]:not([name*="-en"]):not([id*="-en"]):not([lang="en"]),
html[dir="rtl"] .input[type="number"] { text-align: right; }

.input[type="tel"] { direction: ltr; text-align: left; }
@media (hover: hover) and (pointer: fine) { a[href^="tel:"]:not([role="menuitem"]):not(.btn) { cursor: copy; } }

@media (max-width: 640px) { details > summary { min-height: 44px; } .menu-text, .btn { min-width: 44px; } }

.setup { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.setup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.setup-n { flex: none; font-weight: 700; color: var(--ink); font-size: var(--fs-16); }
.setup-bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.setup-bar > span { display: block; height: 100%; width: var(--p, 0%); background: var(--brand); border-radius: inherit; }
.setup-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2); }
.setup-step { display: flex; align-items: center; gap: var(--s3); min-height: 56px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--r-md); color: var(--text); }
.setup-step:hover { text-decoration: none; border-color: var(--line-strong); background: var(--surface-2); }
.setup-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-12); font-weight: 700; border: 1.5px solid var(--line-strong); color: var(--muted); }
.setup-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.setup-t b { color: var(--ink); font-weight: 600; }
.setup-t span { color: var(--muted); font-size: var(--fs-12); }
.setup-step.is-done .setup-dot { background: var(--ok); border-color: var(--ok); color: var(--surface); }
.setup-step.is-done .setup-t b { color: var(--muted); font-weight: 500; text-decoration: line-through; }
.setup-step.is-next { border: 2px solid var(--brand); background: var(--brand-soft); padding: calc(var(--s2) - 1px) calc(var(--s3) - 1px); }
.setup-step.is-next .setup-dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.setup-step.is-next .setup-t b, .setup-step.is-next .setup-t span { color: var(--brand-strong); }
.setup-step.is-next svg { flex: none; color: var(--brand); }


.ms { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; }
.ms-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2); min-height: 32px; align-items: center; }
.ms-chip { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; padding: 0 var(--s3) 0 var(--s1); border-radius: var(--r-pill); background: var(--brand-soft); color: var(--ink); font-size: var(--fs-14); }
.ms-x { width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: var(--fs-16); line-height: 1; cursor: pointer; }
.ms-x:hover { background: var(--line); color: var(--bad); }
.ms-empty { color: var(--muted); font-size: var(--fs-14); }
.ms-open { display: none; align-self: flex-start; }
.ms-veil { display: none; }
.ms-panel { border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.ms-head { display: flex; gap: var(--s2); padding: var(--s3); border-bottom: 1px solid var(--line); }
.ms-q { flex: 1; min-width: 0; }
.ms-done { display: none; }
.ms-presets { display: flex; flex-wrap: wrap; gap: var(--s2); padding: var(--s2) var(--s3); border-bottom: 1px solid var(--line); }
.ms-preset { height: 32px; padding: 0 var(--s3); border-color: var(--line); background: var(--surface-2); }
.ms-list { list-style: none; margin: 0; padding: var(--s1); max-height: 264px; overflow-y: auto; overscroll-behavior: contain; }
.ms-opt { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s3); border-radius: var(--r-sm); cursor: pointer; color: var(--text); font-size: var(--fs-14); }
.ms-opt::after { content: ""; margin-inline-start: auto; width: 20px; height: 20px; flex: none; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); }
.ms-opt:hover, .ms-opt:focus-visible { background: var(--surface-2); outline: none; }
.ms-opt.is-on { color: var(--ink); font-weight: 600; background: var(--brand-soft); }
.ms-opt.is-on::after { content: "✓"; border-color: var(--brand); background: var(--brand); color: var(--on-brand); font-size: var(--fs-14); line-height: 17px; text-align: center; }
.ms-opt[hidden] { display: none; }
.ms-none { margin: 0; padding: var(--s4); text-align: center; color: var(--muted); font-size: var(--fs-14); }
@media (max-width: 719px) {
  .ms-open { display: inline-flex; }
  .ms-done { display: inline-flex; }
  .ms-panel { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 61; max-height: 85dvh; border-radius: var(--r-md) var(--r-md) 0 0; border-width: 1px 0 0; box-shadow: var(--shadow-pop); }
  .ms.is-open .ms-panel { display: flex; }
  .ms.is-open .ms-veil { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(16, 33, 36, .45); }
  .ms-list { max-height: none; flex: 1; min-height: 0; }
  html.ms-lock { overflow: hidden; }
}

.kpi-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: 2px; }
.kpi-chip { font-size: var(--fs-12); color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px var(--s2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-warn .value { color: var(--warn); }
.kpi-warn .kpi-chip { background: var(--warn-soft); color: var(--warn); }


.table td.num, .table th.num, .table td.code, .table th.code, .table td.nw, .table th.nw { direction: inherit; text-align: start; font-variant-numeric: tabular-nums; }


@view-transition { navigation: auto; }
.app .side { view-transition-name: s5-side; }
.adm-bar { view-transition-name: s5-bar; }
.app #main { view-transition-name: s5-main; }
::view-transition-group(s5-side), ::view-transition-group(s5-bar) { animation: none; }
::view-transition-old(s5-side), ::view-transition-new(s5-side), ::view-transition-old(s5-bar), ::view-transition-new(s5-bar) { animation: none; }
::view-transition-group(s5-main) { animation-duration: .26s; }
::view-transition-old(s5-main) { animation: af-out .14s ease-in both; }
::view-transition-new(s5-main) { animation: af-in .26s cubic-bezier(.2, .8, .2, 1) both; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@keyframes af-out { to { opacity: 0; } }
@keyframes af-in { from { opacity: 0; transform: translateY(10px); } }


.btn { transition: background-color .15s, border-color .15s, color .15s, transform .08s, box-shadow .15s; }
.btn:active:not(:disabled) { transform: scale(.97); }
.btn--primary:hover { box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent); }
.nav a { transition: background-color .15s, color .15s; }
.table tbody tr { transition: background-color .12s; }
.kpi, a.panel, .panel a.card, .hub-card, a.kpi { transition: transform .15s, box-shadow .15s, border-color .15s; }
a.kpi:hover, a.panel:hover, .hub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.input, .select, textarea { transition: border-color .15s, box-shadow .15s; }
.input:focus, .select:focus, textarea:focus { box-shadow: 0 0 0 3px var(--brand-soft); }
.toast:not([hidden]) { animation: af-toast .3s cubic-bezier(.2, .9, .3, 1.25); }
@keyframes af-toast { from { opacity: 0; transform: translate(50%, 16px) scale(.96); } }
dialog[open] { animation: af-pop .2s cubic-bezier(.2, .8, .2, 1); }
dialog.drawer[open] { animation: af-drawer .25s cubic-bezier(.2, .8, .2, 1); }
@keyframes af-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes af-drawer { from { transform: translateX(-24px); opacity: 0; } }


.tabs { gap: var(--s1); border-bottom: 0; padding: var(--s3) var(--s4) var(--s2); } 
.tabs a { padding: var(--s2) var(--s4); border-radius: var(--r-pill); border: 1px solid transparent; border-bottom: 1px solid transparent; transition: background-color .15s, color .15s, border-color .15s; }
.tabs a:hover { background: var(--surface-2); }
.tabs a[aria-current="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); box-shadow: 0 1px 2px rgba(16, 33, 36, .06); font-weight: 600; }


.af-find { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); color: var(--muted); }
.af-find .input { max-width: 340px; height: 36px; }
.af-find svg { width: 18px; height: 18px; flex: none; }
.af-find .af-n { font-size: var(--fs-12); }
.af-none { padding: var(--s5); text-align: center; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .btn, .nav a, .table tbody tr, .kpi, .input, .toast, dialog { transition: none !important; animation: none !important; }
}


.win-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4) var(--s5); padding: var(--s5); border-radius: var(--r-md); background: linear-gradient(135deg, var(--brand), var(--brand-strong)); color: var(--on-brand); }
.win-band .win-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s2); flex: 1 1 260px; min-width: 0; }
.win-band .win-main > span:first-child { flex-basis: 100%; opacity: .9; }
.win-band .win-big { font-size: var(--fs-32); font-weight: 800; line-height: 1.1; }
.win-band small { flex-basis: 100%; opacity: .85; font-size: var(--fs-12); }
.win-band .win-parts { display: flex; gap: var(--s5); flex-wrap: wrap; }
.win-band .win-parts div { display: grid; font-size: var(--fs-12); opacity: .95; }
.win-band .win-parts b { font-size: var(--fs-20); }
.win-band .btn { color: var(--on-brand); background: color-mix(in srgb, var(--on-brand) 14%, transparent); border-color: transparent; }
.goal-card .panel-body { display: grid; gap: var(--s3); }
.goal-top { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; justify-content: space-between; }
.goal-top h2 { margin: 0; font-size: var(--fs-16); }
.goal-track { height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.goal-track i { display: block; height: 100%; border-radius: inherit; background: var(--brand); animation: af-grow .9s cubic-bezier(.2, .8, .2, 1) both; transform-origin: right; }
[dir="ltr"] .goal-track i { transform-origin: left; }
@keyframes af-grow { from { transform: scaleX(0); } }
.goal-badges { display: flex; gap: var(--s2); flex-wrap: wrap; }
.goal-badge { display: inline-flex; align-items: center; gap: var(--s1); padding: 2px var(--s3); border-radius: var(--r-pill); background: var(--ok-soft); color: var(--ok); font-size: var(--fs-12); font-weight: 600; }
.goal-badge svg { width: 14px; height: 14px; }
.goal-badge--next { background: var(--surface-2); color: var(--muted); }
.af-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 90; }


.kpis { gap: var(--s3); }
.kpi { position: relative; padding: var(--s4); gap: var(--s1); box-shadow: 0 1px 2px rgba(16, 33, 36, .04); }
.kpi .label { flex-wrap: nowrap; min-width: 0; min-height: 32px; padding-inline-end: 40px; font-size: var(--fs-14); }
.kpi .kpi-lt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi .kpi-ic { position: absolute; top: var(--s4); inset-inline-end: var(--s4); width: 32px; height: 32px; border-radius: 9px; }
.kpi .kpi-ic svg { width: 18px; height: 18px; }
.kpi .value { font-size: var(--fs-24); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; }
.kpi-na { color: var(--muted); font-size: var(--fs-12); line-height: 1.3; }
.kpi .delta { align-self: flex-start; display: inline-flex; align-items: center; gap: 2px; padding: 0 var(--s2); border-radius: var(--r-pill); line-height: 1.7; }
.kpi .delta.up { background: var(--ok-soft); } .kpi .delta.down { background: var(--bad-soft); } .kpi .delta.flat { background: var(--surface-2); }
.kpi-link:hover { background: var(--surface); border-color: var(--line-strong); }
@media (max-width: 559px) { .kpi { padding: var(--s3); } .kpi .label { padding-inline-end: 34px; min-height: 28px; } .kpi .kpi-ic { top: var(--s3); inset-inline-end: var(--s3); width: 28px; height: 28px; } .kpi .value { font-size: var(--fs-20); } }


.wk-col .wk-v { opacity: 0; transition: opacity .15s; }
.wk-col.now .wk-v, .wk-col:hover .wk-v, .wk-col:focus .wk-v { opacity: 1; }
.wk-col i { transition: background-color .15s, transform .15s; transform-origin: bottom; animation: af-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes af-rise { from { transform: scaleY(0); } }
.wk-col:hover i { transform: scaleY(1.02); }
.wk-tip { display: block; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; width: 220px; padding: var(--s3); border-radius: var(--r-md); box-shadow: var(--shadow-pop); pointer-events: none; }
.wk-col:hover .wk-tip, .wk-col:focus .wk-tip { visibility: visible; opacity: 1; transform: translateY(0); }
.wk-mid { transform: translate(-50%, 6px); } .wk-col:hover .wk-mid, .wk-col:focus .wk-mid { transform: translate(-50%, 0); }
.wk-t { font-size: var(--fs-12); color: var(--muted); font-weight: 600; margin-bottom: var(--s1); }
.wk-big { display: block; font-size: var(--fs-20); font-weight: 800; color: var(--ink); line-height: 1.2; margin-bottom: var(--s2); font-variant-numeric: tabular-nums; }
.wk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s1) var(--s3); border-top: 1px solid var(--line); padding-top: var(--s2); }
.wk-grid .wk-r { display: grid; gap: 0; padding: 0; }
.wk-grid .wk-r span { font-size: 11px; color: var(--muted); }
.wk-grid .wk-r b { font-size: var(--fs-14); font-weight: 700; color: var(--ink); }
.wk-sl { display: block; font-size: 11px; color: var(--muted); }


.o-lines { display: grid; gap: 2px; margin-top: var(--s1); }
.o-line { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: var(--fs-12); min-width: 0; }
.o-line > svg { width: 14px; height: 14px; flex: none; }
.o-line > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-line--addr .o-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.table .o-place { min-width: 150px; max-width: 240px; }
.table .o-place .o-addr { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; line-height: 1.4; }
.table .nw { white-space: nowrap; }


.pl-thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); }
.pl-thumb--none { color: var(--muted); }
.pl-thumb--none svg { width: 18px; height: 18px; }
.pl-stock { font-weight: 700; }
.pl-stock--out { color: var(--bad); } .pl-stock--low { color: var(--warn); }


.adm-bar { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.panel, .kpi { box-shadow: 0 1px 2px rgba(16, 33, 36, .04), 0 6px 18px -10px rgba(16, 33, 36, .12); }
.panel { transition: box-shadow .2s, border-color .2s; }
a.kpi:hover, .kpi-link:hover, .hub-card:hover, .qt:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16, 33, 36, .05), 0 14px 28px -14px rgba(16, 33, 36, .25); }
.qt { transition: transform .15s, box-shadow .15s, background-color .15s; }
.wrap > * { animation: af-up .38s cubic-bezier(.2, .8, .2, 1) backwards; }
.wrap > :nth-child(2) { animation-delay: .04s; } .wrap > :nth-child(3) { animation-delay: .08s; } .wrap > :nth-child(4) { animation-delay: .12s; }
.wrap > :nth-child(5) { animation-delay: .16s; } .wrap > :nth-child(n+6) { animation-delay: .2s; }
@keyframes af-up { from { opacity: 0; transform: translateY(8px); } }
.kpis .kpi { animation: af-up .38s cubic-bezier(.2, .8, .2, 1) backwards; }
.kpis .kpi:nth-child(2) { animation-delay: .05s; } .kpis .kpi:nth-child(3) { animation-delay: .1s; } .kpis .kpi:nth-child(4) { animation-delay: .15s; } .kpis .kpi:nth-child(n+5) { animation-delay: .2s; }
.table thead th { position: sticky; top: 64px; z-index: 2; }
.table-wrap .table thead th { position: static; }
.nav a { position: relative; }
.nav a[aria-current="page"]::before { content: ""; position: absolute; inset-inline-start: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--side-accent); }
@media (prefers-reduced-motion: reduce) { .wrap > *, .kpis .kpi { animation: none !important; } }


.m-only.o-lines { display: none; }
@media (max-width: 719px) { .m-only.o-lines { display: grid; } }
.o-country { display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-12); }

.src-chips { display: flex; flex-wrap: wrap; gap: var(--s1); }
.src-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px var(--s2) 2px var(--s2); border-radius: var(--r-pill); background: var(--surface-2); color: var(--text); font-size: var(--fs-12); font-weight: 600; white-space: nowrap; }
.src-chip svg { width: 15px; height: 15px; flex: none; }
.src-fb svg { color: #1877F2; } .src-ig svg { color: #E1306C; } .src-tt svg { color: var(--ink); } .src-gg svg { color: #4285F4; }
.src-sc svg { color: #E6C800; } .src-wa svg { color: #25D366; } .src-dr svg, .src-other svg, .src-mk svg { color: var(--muted); }


.wk-panel, .wk-panel .panel-body { overflow: visible; }
.wk-tip { top: auto; bottom: calc(100% - 28px); width: 230px; z-index: 30; }
.wk-grid { display: grid; grid-template-columns: 1fr; gap: 3px; }
.wk-grid .wk-r { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.wk-grid .wk-r span { font-size: var(--fs-12); }
.wk-grid .wk-r b { font-size: var(--fs-12); font-weight: 700; }


.table-clickable th, .table-clickable td { padding-inline: 10px; }
.table-clickable .cell-main { min-width: 130px; }
.table-clickable .cell-main > a { overflow-wrap: normal; word-break: normal; }
.table-clickable .nw .code, .table-clickable td .code { white-space: nowrap; }
.wrap:has(.table-clickable) { max-width: 1560px; }
@media (max-width: 1499px) { .table-clickable .o-lg { display: none; } }


.table td bdi + .cpi { margin-inline-start: var(--s1); }
.table td .items-rich { display: flex; align-items: center; gap: var(--s2); }

@media (max-width: 1499px) { .table-wrap:has(> .table-clickable) { overflow-x: auto; } }

:root {
  --sh-line: var(--line-strong, var(--line, #dadce0));
  --sh-grid: var(--line, #e2e3e3);
  --sh-head: var(--surface-2, var(--head, #f8f9fa));
  --sh-cell: var(--surface, #fff);
  --sh-ink: var(--ink, #202124);
  --sh-muted: var(--muted, #5f6368);
  --sh-brand: var(--brand, #188038);
}


.kpis, .kpis.sheet-sum {
  display: grid !important; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)) !important; gap: 0 !important;
  background: var(--sh-cell); border: 1px solid var(--sh-line) !important; border-radius: 4px !important; box-shadow: none !important; overflow: hidden;
}
.kpis > .kpi {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
  border-inline-start: 1px solid var(--sh-grid) !important; border-top: 0 !important; margin: -1px 0 0 0;
  padding: 6px 10px !important; gap: 1px !important; min-width: 0; text-align: center; align-items: center; justify-content: flex-start;
}
.kpis > .kpi { box-shadow: inset 0 1px 0 var(--sh-grid) !important; } 
.kpis > .kpi .label, .kpis > .kpi .l { font-size: 12px !important; color: var(--sh-muted) !important; font-weight: 500 !important; justify-content: center; white-space: nowrap; line-height: 1.5; }
.kpis > .kpi .label abbr { font-size: 11px; opacity: .7; text-decoration: none; }
.kpis > .kpi .value, .kpis > .kpi .v {
  font-size: 19px !important; font-weight: 700 !important; line-height: 1.35 !important; color: var(--sh-ink);
  white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; max-width: 100%; text-align: center !important; font-variant-numeric: tabular-nums; padding: 0 !important;
}
.kpis > .kpi .d, .kpis > .kpi .kpi-chips { font-size: 11.5px !important; line-height: 1.4; justify-content: center; }
.kpis > .kpi .kpi-ic { display: none; }
.kpis > a.kpi:hover, .kpis > .kpi-link:hover { background: var(--sh-head) !important; }
@media (max-width: 720px) {
  .kpis, .kpis.sheet-sum { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .kpis > .kpi { padding: 5px 4px !important; }
  .kpis > .kpi .value, .kpis > .kpi .v { font-size: 16px !important; }
  .kpis > .kpi .label, .kpis > .kpi .l { font-size: 11px !important; }
  .kpis > .kpi .d { font-size: 10.5px !important; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}


@media (min-width: 721px) and (max-width: 1099px) {
  .kpis:has(> .kpi:nth-child(6)), .kpis.sheet-sum:has(> .kpi:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .kpis:has(> .kpi:nth-child(7)), .kpis.sheet-sum:has(> .kpi:nth-child(7)) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}


.sheet-cur { margin-top: -8px; font-size: 13px; color: var(--sh-muted); }
.sheet-cur > summary { cursor: pointer; width: max-content; padding: 2px 0; }
.sheet-cur .table-wrap { margin-top: 6px; width: max-content; max-width: 100%; background: var(--sh-cell); border: 1px solid var(--sh-line); border-radius: 4px; }


:root {
  --seg-track: color-mix(in srgb, var(--ink, #111827) 7%, var(--surface, #fff));
  --seg-on: var(--surface, #fff);
  --seg-shadow: 0 1px 2px rgba(16, 24, 40, .12), 0 0 0 .5px rgba(16, 24, 40, .06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --seg-track: color-mix(in srgb, var(--ink, #eef3f4) 6%, var(--canvas, var(--bg, #0e1416))); --seg-on: color-mix(in srgb, var(--ink, #eef3f4) 14%, var(--surface, #151d20)); --seg-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
}
:root[data-theme="dark"] { --seg-track: color-mix(in srgb, var(--ink, #eef3f4) 6%, var(--canvas, var(--bg, #0e1416))); --seg-on: color-mix(in srgb, var(--ink, #eef3f4) 14%, var(--surface, #151d20)); --seg-shadow: 0 1px 2px rgba(0, 0, 0, .45); }

.seg, .tabs, .sec-tabs {
  display: inline-flex !important; flex-wrap: nowrap !important; align-items: center; gap: 2px !important; row-gap: 0 !important;
  width: max-content; max-width: 100%; min-width: 0; height: 34px; padding: 3px !important; margin-block: 0;
  background: var(--seg-track) !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important;
  overflow-x: auto !important; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth;
  vertical-align: middle; flex-shrink: 1; align-self: flex-start;
}
.seg::-webkit-scrollbar, .tabs::-webkit-scrollbar, .sec-tabs::-webkit-scrollbar { display: none; }
.sec-tabs { margin-block: 0 4px !important; }

.opt-tabs + .m-tabs-wrap { display: none !important; }
.ph .seg, .page-head .seg { align-self: center; }
.range { flex-wrap: wrap; min-width: 0; }
.range > .seg { flex: 0 1 auto; }
.seg > button, .seg > a, .seg > .seg-a, .tabs > button, .tabs > a, .sec-tabs > a {
  flex: none !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
  height: 28px !important; min-height: 0 !important; margin: 0 !important; padding: 0 12px !important;
  border: 0 !important; border-radius: 7px !important; background: transparent !important; box-shadow: none !important;
  color: var(--muted) !important; font: 500 13.5px/1 var(--font, inherit) !important; white-space: nowrap; text-decoration: none !important;
  cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; position: relative;
}
.seg > button:hover, .seg > a:hover, .tabs > button:hover, .tabs > a:hover, .sec-tabs > a:hover { color: var(--ink) !important; }
.seg > button.on, .seg > button[aria-pressed="true"], .seg > a[aria-pressed="true"], .seg > a[aria-current], .seg > .on,
.tabs > button.on, .tabs > button[aria-selected="true"], .tabs > a[aria-selected="true"], .tabs > a[aria-current="page"], .tabs > a[aria-current="true"], .tabs > a.on,
.sec-tabs > a[aria-current="page"] {
  background: var(--seg-on) !important; color: var(--ink) !important; font-weight: 700 !important; box-shadow: var(--seg-shadow) !important;
}
.tabs .n, .tabs .count, .seg .n, .seg .count { background: transparent !important; color: inherit !important; padding: 0 !important; margin: 0 !important; opacity: .65; font-weight: 500; font-variant-numeric: tabular-nums; }

.seg.seg--sm { height: 30px; padding: 2px !important; border-radius: 8px !important; }
.seg.seg--sm > button, .seg.seg--sm > a { height: 26px !important; padding: 0 10px !important; font-size: 12.5px !important; border-radius: 6px !important; }

@media (max-width: 719px) {
  .seg, .tabs, .sec-tabs { height: 40px; }
  .seg > button, .seg > a, .seg > .seg-a, .tabs > button, .tabs > a, .sec-tabs > a { height: 34px !important; padding: 0 12px !important; }
  .seg.seg--sm { height: 36px; } .seg.seg--sm > button, .seg.seg--sm > a { height: 32px !important; }
}


@media (min-width: 721px) {
  .sheet-wrap { max-height: calc(100vh - 150px); overflow: auto !important; border-radius: 0 !important; }
  table.table, table.tbl { border-collapse: separate !important; border-spacing: 0; font-size: 14px; width: 100%; }
  table.table th, table.tbl th {
    position: sticky !important; top: 0; z-index: 3; background: var(--sh-head) !important; color: var(--sh-ink) !important;
    font-weight: 600 !important; font-size: 13px !important; height: auto !important; padding: 6px 10px !important; text-align: center !important;
    border: 0 !important; border-bottom: 1px solid var(--sh-line) !important; border-inline-start: 1px solid var(--sh-grid) !important;
    white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important; vertical-align: middle;
  }
  table.table td, table.tbl td {
    padding: 5px 10px !important; text-align: center !important; vertical-align: middle; line-height: 1.45;
    border: 0 !important; border-bottom: 1px solid var(--sh-grid) !important; border-inline-start: 1px solid var(--sh-grid) !important;
    background-clip: padding-box;
  }
  table.table th:first-child, table.tbl th:first-child, table.table td:first-child, table.tbl td:first-child { border-inline-start: 0 !important; }
  table.table tbody tr:last-child td, table.tbl tbody tr:last-child td { border-bottom: 1px solid var(--sh-grid) !important; }
  table.table td.n, table.table td.num, table.tbl td.num, table.table .n { text-align: center !important; }
  
  table.table td:first-child, table.tbl td:first-child, table.table th:first-child, table.tbl th:first-child,
  table.table td:has(> .cell-img, > .cell-main, > .c-name, > .prod), table.tbl td:has(> .c-name, > .prod), table.tbl td.c-who, table.tbl td.c-place { text-align: start !important; }
  table.tbl td:has(> .c-name), table.tbl td.c-who { text-align: start !important; }
  
  table.table th:first-child, table.tbl th:first-child { position: sticky; inset-inline-start: 0; z-index: 4; }
  table.table td:first-child, table.tbl td:first-child { position: sticky; inset-inline-start: 0; z-index: 2; background: var(--sh-cell); box-shadow: inset -1px 0 0 var(--sh-line); }
  table.table tbody tr:hover td, table.tbl tbody tr:hover td { background: color-mix(in srgb, var(--sh-brand) 5%, var(--sh-cell)); }
  table.table tbody tr:hover, table.tbl tbody tr:hover { background: transparent; }
  
  table.table td .money, table.tbl td .money, table.tbl td .st, table.tbl td .src, table.table td .pill { justify-content: center; }
  table.tbl td .pricebtn { text-align: center; align-items: center; margin: -3px auto; }
  table.tbl td .sw { margin-inline: auto; display: block; }
  table.tbl td .pthumb { margin-inline: auto; width: 34px; height: 34px; }
  table.tbl td .prod .th { width: 30px; height: 30px; }
  table.tbl:not(.tbl-mw0) td { white-space: nowrap; }
  .dr table.tbl td { white-space: normal !important; } 
  table.tbl td .prod .nm { -webkit-line-clamp: 1; max-width: 300px; white-space: normal; }
  table.tbl td .c-sub { white-space: nowrap; }
  table.tbl td .idrow { gap: 6px; } table.tbl td .eyebtn { width: 26px; height: 26px; }
  table.tbl th.sortable { padding: 0 !important; } table.tbl th .thsort { height: auto; padding: 6px 10px; justify-content: center !important; width: auto; }
  .tbl th:first-child, .tbl td:first-child { padding-inline-start: 12px !important; }

  
  table.table tfoot td, table.tbl tfoot td {
    position: sticky; bottom: 0; z-index: 3; background: var(--sh-head) !important; font-weight: 700; text-align: center;
    padding: 6px 10px !important; border-top: 1px solid var(--sh-line) !important; border-inline-start: 1px solid var(--sh-grid); white-space: nowrap; font-variant-numeric: tabular-nums;
  }
  table.table tfoot td:first-child, table.tbl tfoot td:first-child { text-align: start; inset-inline-start: 0; z-index: 4; border-inline-start: 0; }
  table.table tfoot td .muted, table.tbl tfoot td .muted { font-weight: 400; color: var(--sh-muted); font-size: 12px; }

  
  .sh-th { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
  .sh-dd { all: unset; margin-inline-start: 4px; vertical-align: middle; cursor: pointer; width: 18px; height: 18px; border-radius: 3px; display: inline-grid; place-items: center; color: var(--sh-muted); font-size: 10px; flex: none; opacity: .55; }
  th:hover .sh-dd, .sh-dd.on, .sh-dd[aria-expanded="true"] { opacity: 1; }
  .sh-dd:hover, .sh-dd[aria-expanded="true"] { background: color-mix(in srgb, var(--sh-ink) 9%, transparent); }
  .sh-dd.on { color: var(--sh-brand); }
  .sh-rz { position: absolute; top: 0; bottom: 0; inset-inline-end: -3px; width: 7px; cursor: col-resize; z-index: 5; }
  th:last-child > .sh-rz { inset-inline-end: 0; } 
  .sh-rz:hover, .sh-rz.on { background: var(--sh-brand); opacity: .45; }
  table.table th, table.tbl th { background-clip: padding-box; }
}
.sh-off { display: none !important; }
.sh-menu {
  position: fixed; z-index: 200; min-width: 210px; max-width: 280px; background: var(--sh-cell); color: var(--sh-ink); border: 1px solid var(--sh-line);
  border-radius: 6px; box-shadow: 0 4px 18px rgba(0,0,0,.16); padding: 6px 0; font-size: 13.5px; direction: rtl; text-align: start;
}
.sh-menu button.it { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 6px 14px; cursor: pointer; }
.sh-menu button.it:hover { background: var(--sh-head); }
.sh-menu hr { border: 0; border-top: 1px solid var(--sh-grid); margin: 6px 0; }
.sh-menu .t { padding: 2px 14px; font-size: 12px; color: var(--sh-muted); }
.sh-menu input[type=search] { box-sizing: border-box; width: calc(100% - 20px); margin: 4px 10px; height: 30px; border: 1px solid var(--sh-line); border-radius: 4px; padding: 0 8px; background: var(--sh-cell); color: var(--sh-ink); font: inherit; }
.sh-menu .vals { max-height: 220px; overflow: auto; padding: 2px 0; }
.sh-menu label { display: flex; align-items: center; gap: 8px; padding: 3px 14px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-menu label .v { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.sh-menu label .c { color: var(--sh-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sh-menu label:hover { background: var(--sh-head); }
.sh-menu label input { accent-color: var(--sh-brand); margin: 0; flex: none; }
.sh-menu .row { display: flex; gap: 6px; padding: 6px 10px 2px; justify-content: flex-start; }
.sh-menu .row button { all: unset; cursor: pointer; padding: 4px 12px; border-radius: 4px; border: 1px solid var(--sh-line); font-size: 13px; }
.sh-menu .row button.pri { background: var(--sh-brand); color: var(--on-brand, #fff); border-color: var(--sh-brand); font-weight: 700; }


.ftip { position: fixed; z-index: 1000; min-width: 200px; max-width: min(340px, calc(100vw - 16px)); background: var(--sh-cell); color: var(--sh-ink); border: 1px solid var(--sh-line); border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,.14); font-size: 13px; pointer-events: none; direction: rtl; }
.ftip[hidden] { display: none; }
.ftip .ft-t { padding: 6px 10px; font-weight: 700; border-bottom: 1px solid var(--sh-grid); background: var(--sh-head); text-align: center; }
.ftip .ft-g { display: grid; grid-template-columns: auto auto; }
.ftip .ft-l, .ftip .ft-v { padding: 4px 10px; border-bottom: 1px solid var(--sh-grid); white-space: nowrap; }
.ftip .ft-g > :nth-last-child(-n+2) { border-bottom: 0; }
.ftip .ft-l { color: var(--sh-muted); text-align: start; }
.ftip .ft-v { font-weight: 600; text-align: end; font-variant-numeric: tabular-nums; max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.ftip .ft-v.up { color: var(--up); } .ftip .ft-v.down { color: var(--down); }
.ftip .ft-f { padding: 5px 10px; border-top: 1px solid var(--sh-grid); color: var(--sh-muted); font-size: 11.5px; white-space: normal; line-height: 1.5; }


.sheet-wrap td.sh-ed, table.tbl td.sh-ed, table.table td.sh-ed { background: color-mix(in oklab, var(--sh-brand) 7%, transparent); cursor: text; }
.sheet-wrap td.sh-ed:hover, table.tbl td.sh-ed:hover, table.table td.sh-ed:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--sh-brand) 60%, transparent); }
td.sh-ed .pricebtn { background: transparent; cursor: text; }
th .sh-mk { display: none; } 
.sh-edhint { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12px; color: var(--sh-muted); }
.sh-edhint .sw { width: 20px; height: 14px; border: 1px solid color-mix(in oklab, var(--sh-brand) 60%, transparent); background: color-mix(in oklab, var(--sh-brand) 7%, transparent); }
.sh-edhint b { color: var(--sh-brand); font-weight: 400; }
.sh-edhint button { border: 0; background: none; color: var(--sh-muted); cursor: pointer; font-size: 12px; padding: 2px 4px; }

table.tbl td select, table.table td select { appearance: none; -webkit-appearance: none; border: 1px solid var(--sh-line); border-radius: 999px; padding: 2px 10px 2px 24px; min-height: 26px;
  background: color-mix(in oklab, var(--sh-brand) 10%, var(--sh-cell, #fff)) no-repeat left 8px center / 9px 9px; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--sh-ink); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23777'/%3E%3C/svg%3E"); }
table.tbl td select:focus-visible, table.table td select:focus-visible { outline: 2px solid var(--sh-brand); outline-offset: 1px; }


.sh-colbar { display: flex; justify-content: flex-end; margin: 8px 0 12px; padding-top: 2px; }

.panel > .sh-colbar, .toolbar + .sh-colbar { margin: 0; padding: var(--s3, 12px) var(--s4, 16px); border-bottom: 1px solid var(--line, var(--sh-line)); }
.sh-colbtn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border: 1px solid var(--sh-line); border-radius: 8px; background: var(--sh-cell); color: var(--sh-ink); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sh-colbtn:hover { background: var(--sh-head); }
.sh-colbtn .ic { flex: none; opacity: .75; }
.sh-colbtn .n { font-size: 11px; font-weight: 500; color: var(--sh-muted); opacity: .8; }
.sh-colbtn .n:not(:empty) { margin-inline-start: 2px; padding-inline-start: 8px; border-inline-start: 1px solid var(--sh-line); }
.sh-cols { width: 250px; }
.sh-cols .pre { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--sh-grid); }
.sh-cols .pre button { all: unset; box-sizing: border-box; flex: 1; text-align: center; height: 28px; line-height: 26px; border: 1px solid var(--sh-line); border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.sh-cols .pre button:hover { background: var(--sh-head); }
.sh-cols .pre button.on { border-color: var(--sh-brand); color: var(--sh-brand); background: color-mix(in oklab, var(--sh-brand) 10%, transparent); }
.sh-cols .vals { max-height: min(55vh, 360px); }
@media (max-width: 720px) { .sh-colbar { display: none; } }