/*
  Seller panel + master admin — "Console" (owner-pinned reference).
  Calm grey canvas, white rounded cards, one royal blue for action and selection, green / red change pills,
  Inter throughout. Loaded after app.css on panel pages only (<body class="console">); it overrides the shared
  tokens (so every panel page follows) and restyles the shell and the common components.
*/

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plusjakarta-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20B9, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("../fonts/plusjakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

.console {
  --canvas: #f6f7f9;
  --canvas-wash: #f6f7f9;
  --surface: #ffffff;
  --surface-soft: #f8f9fb;
  --surface-sunk: #f1f3f6;
  --line: #eaecf0;
  --line-strong: #d5d9e0;

  --ink: #111827;
  --ink-2: #4b5563;
  --ink-3: #6b7280;

  /* v1.24: the brand colour (Branding → Brand colour, /brand.css); a seller may use their shop colour instead */
  --blue: var(--brand, #2b6ef6);
  --blue-strong: var(--brand-strong, #1d57d8);
  --blue-tint: var(--brand-tint, #eef3ff);
  --blue-tint-2: var(--brand-tint-2, #dbe6fe);
  --blue-rgb: var(--brand-rgb, 43 110 246);
  --orange: #f59e0b;

  --accent: var(--brand-strong, #2160e8);  /* text-safe shade for links */
  --accent-strong: #1a4fc4;
  --accent-tint: var(--blue-tint);
  --accent-tint-2: var(--blue-tint-2);
  --focus: var(--blue);
  --grad: var(--blue);
  --grad-soft: var(--blue-tint);
  --glow: transparent;
  --violet: var(--blue);
  --wash-1: transparent;
  --wash-2: transparent;

  --ok: #15803d;       --ok-bg: #e9f8ef;     --ok-line: #c3ebd2;
  --warn: #9a4a06;     --warn-bg: #fff5e5;   --warn-line: #fadcaa;
  --bad: #c62828;      --bad-bg: #fdecec;    --bad-line: #f7c9c9;
  --note: #1d4ed8;     --note-bg: #eef3ff;   --note-line: #cfdcfd;

  --r-xs: 6px;
  --r-sm: 10px;
  --r: 12px;
  --r-lg: 16px;

  --shadow-1: 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-2: 0 12px 32px -12px rgb(16 24 40 / 0.18);
  --shadow-pop: none;

  --font: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* v1.24: same as the website */
  --tabbar-h: 64px;
  accent-color: var(--blue);
}

body.console { background: var(--canvas); color: var(--ink-2); font: 400 14px/1.55 var(--font); font-feature-settings: "cv11", "tnum" 0; }
.console ::selection { background: var(--blue-tint-2); color: var(--ink); }
.console :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.console h1, .console h2, .console h3 { color: var(--ink); font-weight: 650; letter-spacing: -0.015em; }
.console h1 { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.025em; }
.console h2 { font-size: 1rem; }
.console h3 { font-size: .9375rem; }
.console strong, .console b { font-weight: 650; color: var(--ink); }
.console a { color: var(--accent); text-decoration-thickness: 1px; }
.console a:hover { color: var(--accent-strong); }
.console .muted { color: var(--ink-3); }
.console .icon { stroke-width: 1.6; }
.console .icon .i-fill { display: none; }
.console .tabular, .console .num { font-variant-numeric: tabular-nums; }
.console .skip-link { border-radius: var(--r-sm); }

/* ---------------------------------------------------------------- brand */
.console .brand { color: var(--ink); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; gap: .65rem; }
.console .brand-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--blue); color: #fff;
  box-shadow: none; font-size: .8125rem; font-weight: 700; letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------- shell: laptop */
.console .app { grid-template-columns: 256px minmax(0, 1fr); }
.console .sidebar { background: var(--surface); border-right: 1px solid var(--line); padding: 1.25rem 1rem 1rem; }
.console .sidebar .brand { padding: .15rem .5rem 1.4rem; }
.console .nav { gap: 2px; }
.console .nav-label { color: var(--ink-3); font-size: .75rem; font-weight: 500; padding: .8rem .75rem .3rem; }
.console .nav a {
  position: relative; gap: .7rem; padding: .45rem .75rem; min-height: 38px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: .875rem; font-weight: 500;
}
.console .nav a .icon { width: 20px; height: 20px; color: var(--ink-3); }
.console .nav a:hover { background: var(--surface-sunk); color: var(--ink); }
.console .nav a:hover .icon { color: var(--ink-2); }
.console .nav a[aria-current="page"] { background: var(--blue-tint); color: var(--blue-strong); font-weight: 600; }
.console .nav a[aria-current="page"] .icon { color: var(--blue); }
.console .nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -1rem; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue);
}
.console .nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console .nav-badge {
  margin-left: auto; min-width: 22px; height: 20px; padding: 0 .4rem; border-radius: 10px; display: inline-grid; place-items: center;
  background: #16a34a; color: #fff; font-size: .6875rem; font-weight: 650; font-variant-numeric: tabular-nums;
}
.console .sidebar-foot { color: var(--ink-3); font-weight: 500; padding: .75rem .75rem 0; }

.console .plan-card {
  margin: 1.25rem .25rem 0; padding: 1rem; border-radius: var(--r-lg);
  background: var(--blue-tint); border: 1px solid var(--blue-tint-2);
}
.console .plan-card p { margin: 0; }
.console .plan-card-name { display: flex; align-items: center; gap: .45rem; color: var(--ink); font-weight: 600; font-size: .875rem; }
.console .plan-card-name .icon { width: 18px; height: 18px; color: var(--blue); }
.console .plan-card-days { color: var(--ink-2); font-size: .8125rem; margin: .2rem 0 .8rem !important; }

.console .topbar {
  background: rgb(255 255 255 / 0.92); border-bottom: 1px solid var(--line); min-height: 64px;
  padding: .65rem 1.5rem; gap: 1.25rem; backdrop-filter: saturate(1.2) blur(10px);
}
.console .topbar-title { font-weight: 650; font-size: 1rem; color: var(--ink); }
.console .top-search {
  position: relative; flex: 1 1 auto; max-width: 420px; display: flex; align-items: center;
}
.console .top-search .icon { position: absolute; left: .85rem; width: 18px; height: 18px; color: var(--ink-3); pointer-events: none; }
.console .top-search input {
  width: 100%; min-height: 40px; padding: .5rem 4.25rem .5rem 2.5rem; border-radius: 999px;
  background: var(--surface-sunk); border: 1px solid transparent; font: inherit; color: var(--ink);
}
.console .top-search input::placeholder { color: var(--ink-3); }
.console .top-search input:hover { border-color: var(--line-strong); }
.console .top-search input:focus { outline: none; background: #fff; border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / 0.15); }
.console .kbd {
  position: absolute; right: .55rem; padding: .1rem .45rem; border-radius: 6px; border: 1px solid var(--line-strong);
  background: #fff; color: var(--ink-3); font: 500 .6875rem/1.5 var(--font); pointer-events: none;
}
.console .top-search input:focus ~ .kbd { display: none; }
.console .avatar { background: var(--blue-tint); color: var(--blue-strong); border: 0; font-weight: 650; width: 36px; height: 36px; }
.console .user-name { font-weight: 600; font-size: .875rem; }
.console .content { padding: 1.25rem 1.5rem 2rem; max-width: 1320px; }

.console .page-head { margin-bottom: 1rem; align-items: center; }
.console .page-head p { color: var(--ink-3); font-weight: 400; }
.console .crumb a { color: var(--ink-3); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.console .crumb a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- buttons: pills */
.console .btn {
  border-radius: 999px; font-weight: 600; min-height: 40px; padding: .5rem 1.1rem; font-size: .875rem; letter-spacing: 0;
  box-shadow: none; transition: transform .1s var(--ease); /* no colour fade: Safari would show the old colour fading to the brand colour on load */
}
.console .btn-primary { background: var(--blue); color: #fff; }
.console .btn-primary:hover:not(:disabled) { background: var(--blue-strong); color: #fff; box-shadow: none; }
.console .btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--line-strong); box-shadow: var(--shadow-1); }
.console .btn-secondary:hover:not(:disabled) { background: var(--surface-soft); border-color: #b9bfc9; color: var(--ink); }
.console .btn-ghost { color: var(--ink-2); }
.console .btn-ghost:hover:not(:disabled) { background: var(--surface-sunk); color: var(--ink); }
.console .btn-danger { background: var(--bad); }
.console .btn-danger:hover:not(:disabled) { background: #a51f1f; }
.console .btn-sm { min-height: 34px; padding: .3rem .85rem; font-size: .8125rem; }
.console .btn .icon { width: 17px; height: 17px; }

/* ---------------------------------------------------------------- tabs / filters */
.console .seg-tabs { gap: .4rem; }
.console .seg-tabs a {
  background: #fff; border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; min-height: 36px; padding: 0 .9rem; border-radius: 999px;
}
.console .seg-tabs a:hover { border-color: var(--line-strong); color: var(--ink); background: #fff; }
.console .seg-tabs a[aria-current="true"], .console .seg-tabs a[aria-current="page"] { background: var(--blue-tint); border-color: var(--blue-tint-2); color: var(--blue-strong); font-weight: 600; }
.console .seg-tabs .count { background: var(--surface-sunk); color: var(--ink-2); font-weight: 600; }
.console .seg-tabs a[aria-current="true"] .count, .console .seg-tabs a[aria-current="page"] .count { background: var(--blue); color: #fff; }

/* ---------------------------------------------------------------- forms */
.console .input, .console .select, .console textarea.input {
  background: #fff; border: 1px solid var(--line-strong); border-radius: var(--r-sm); min-height: 42px;
  font-weight: 400; color: var(--ink); box-shadow: var(--shadow-1);
}
.console .input:hover, .console .select:hover { border-color: #b9bfc9; }
.console .input:focus, .console .select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(var(--blue-rgb) / 0.15); }
.console .input::placeholder { color: #8a919e; }
.console .input[aria-invalid="true"] { border-color: var(--bad); }
.console .field label, .console .label { font-weight: 500; color: var(--ink); }
.console .hint { color: var(--ink-3); }
.console .radio-card { border-radius: var(--r); border-color: var(--line); box-shadow: none; }
.console .radio-card:has(input:checked) { border-color: var(--blue); background: var(--blue-tint); box-shadow: none; }
.console .pill-check input:checked + span { background: var(--blue); }

/* ---------------------------------------------------------------- surfaces */
.console .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 1.1rem 1.25rem; }
.console .card + .card, .console .grid-cards + .card, .console .card + .grid-cards { margin-top: 1rem; }
.console :is(.grid-2, .grid-3, .grid-cards, .dash-grid, .stat-row) > .card { margin-top: 0; }
.console .grid-cards { gap: 1rem; }
.console .card-header { margin-bottom: .75rem; align-items: center; }
.console .card-header h2 { font-size: 1rem; }
.console .summary { border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.console .summary .chip-icon { background: var(--blue-tint); color: var(--blue); border-radius: 12px; }
.console .summary dt { font-weight: 500; color: var(--ink-3); }
.console .summary dd { font-weight: 650; color: var(--ink); }
/* KPI strips on every page: same card as the dashboard, equal widths, equal heights */
.console .stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.console .stat-row:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.console .stat-row:has(> :nth-child(3):last-child),
.console .stat-row:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.console .stat-row:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.console .stat-row > .card,
.console .stat-row > .card + .card { margin: 0; }
.console .stat-row .card.stat {
  display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; min-width: 0; height: 100%;
  padding: 1.15rem 1.25rem 1.1rem; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.console .stat .kpi-top { width: 100%; margin-bottom: .25rem; }
.console .stat-label { color: var(--ink-2); font-weight: 500; font-size: .875rem; }
.console .stat-row .stat strong { color: var(--ink); font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.console .stat-row .stat > .muted.small, .console .stat-row .stat > span:not(.delta):not(.kpi-top) { color: var(--ink-3); font-size: .75rem; }
.console .compact-stats { margin: 1rem 0 0; }
.console .compact-stats .card.stat { box-shadow: none; background: var(--surface-soft); }
.console .empty { background: #fff; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
.console .disclosure summary { font-weight: 500; }

.console .badge { background: var(--surface-sunk); color: var(--ink-2); font-weight: 600; border-radius: 999px; font-size: .75rem; }
.console .badge-success { background: var(--ok-bg); color: var(--ok); }
.console .badge-warning { background: var(--warn-bg); color: var(--warn); }
.console .badge-danger { background: var(--bad-bg); color: var(--bad); }
.console .badge-info { background: var(--note-bg); color: var(--note); }

.console .alert { background: #fff; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink-2); align-items: center; box-shadow: var(--shadow-1); }
.console .alert > .icon { width: 32px; height: 32px; padding: 7px; border-radius: 50%; flex: none; margin: 0; }
.console .alert-success > .icon { background: var(--ok-bg); color: var(--ok); }
.console .alert-warning > .icon { background: var(--warn-bg); color: var(--warn); }
.console .alert-error > .icon { background: var(--bad-bg); color: var(--bad); }
.console .alert-info > .icon { background: var(--note-bg); color: var(--note); }
.console .alert-body { font-weight: 400; }

.console .table th { background: var(--surface-soft); color: var(--ink-3); font-size: .75rem; font-weight: 500; border-bottom: 1px solid var(--line); }
.console .table td { border-bottom-color: var(--line); }
.console .table tbody tr:hover { background: var(--surface-soft); }

.console .olist-total { color: var(--ink); font-weight: 650; }
.console dialog.confirm { border-radius: 16px; border: 0; box-shadow: 0 24px 60px -18px rgb(16 24 40 / 0.35); }
.console .impersonation-bar { background: var(--ink); }
.console .banner-maint { font-weight: 600; }

/* change pills: ▲ 12.5% */
.console .delta {
  display: inline-flex; align-items: center; gap: .2rem; padding: .1rem .5rem; border-radius: 999px;
  font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.5;
}
.console .delta [aria-hidden] { font-size: .5625rem; }
.console .delta.up { background: var(--ok-bg); color: var(--ok); }
.console .delta.down { background: var(--bad-bg); color: var(--bad); }
.console .delta.flat, .console .delta.new { background: var(--surface-sunk); color: var(--ink-2); }

/* ---------------------------------------------------------------- dashboard */
.dash-head .head-tools { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.period-pills { display: inline-flex; padding: 3px; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 999px; box-shadow: var(--shadow-1); }
.period-pills a {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 .9rem; border-radius: 999px;
  color: var(--ink-2); font-size: .8125rem; font-weight: 500; text-decoration: none;
}
.period-pills a:hover { color: var(--ink); background: var(--surface-sunk); }
.period-pills a[aria-current="true"] { background: var(--blue-tint); color: var(--blue-strong); font-weight: 600; }

.shop-bar {
  display: flex; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1rem;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: .85rem 1rem .85rem 1.25rem;
}
.shop-bar-state { display: flex; align-items: center; gap: .6rem; }
.shop-bar-state strong { font-weight: 600; font-size: .9375rem; }
.shop-bar .dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa1ad; box-shadow: 0 0 0 4px rgb(154 161 173 / 0.18); }
.shop-bar.is-live .dot { background: #16a34a; box-shadow: 0 0 0 4px rgb(22 163 74 / 0.16); }
.shop-bar.is-held .dot { background: var(--orange); box-shadow: 0 0 0 4px rgb(245 158 11 / 0.2); }
.shop-bar-facts { display: flex; gap: .5rem 2rem; flex-wrap: wrap; margin: 0; flex: 1 1 auto; }
.shop-bar-facts div { min-width: 0; }
.shop-bar-facts dt { font-size: .75rem; color: var(--ink-3); }
.shop-bar-facts dd { margin: 0; color: var(--ink); font-weight: 500; font-size: .875rem; }
.shop-bar-link dd a { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; overflow-wrap: anywhere; }
.shop-bar-link .icon { width: 14px; height: 14px; }
.shop-bar-action { margin-left: auto; }
.console .dash-head + .shop-bar + .hint { margin: -.75rem 0 1.25rem; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); padding: 1rem 1.15rem; min-width: 0; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.kpi-label { color: var(--ink-2); font-weight: 500; font-size: .875rem; }
.kpi-icon { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue); color: #fff; flex: none; }
.kpi-icon .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.kpi-value { margin: .6rem 0 .55rem; color: var(--ink); font-size: 1.75rem; line-height: 1.15; font-weight: 700; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.kpi-foot { margin: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; color: var(--ink-3); font-size: .75rem; }

.dash-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.dash-grid > .card { margin: 0 !important; min-width: 0; }
.chart-card { grid-column: span 2; }
.best-card { grid-column: 1 / -1; }
.card-link { font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.card-sub { margin: .2rem 0 0; color: var(--ink-3); font-size: .8125rem; }
.card-sub strong { color: var(--ink); }

/* sales chart */
.chart-card .card-header { align-items: flex-start; }
.chart-total { margin: .25rem 0 0; display: flex; align-items: center; gap: .6rem; color: var(--ink); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; }
.chart-side { display: flex; align-items: center; gap: 1.25rem; }
.legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 1rem; font-size: .75rem; color: var(--ink-2); }
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend li::before { content: ""; width: 14px; height: 3px; border-radius: 2px; background: var(--blue); }
.legend li.is-before::before { background: repeating-linear-gradient(90deg, #b8c0cc 0 4px, transparent 4px 7px); }
.area-chart { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 200px auto; column-gap: .75rem; }
.chart-y { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; }
.chart-y span { height: 0; display: flex; align-items: center; color: var(--ink-3); font-size: .6875rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-plot { position: relative; min-width: 0; border-radius: 4px; touch-action: pan-y; cursor: crosshair; }
.chart-plot:focus-visible { outline-offset: 6px; }
.chart-plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.chart-plot .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart-plot .grid:last-of-type { stroke-dasharray: none; }
.chart-plot .line-now { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart-plot .line-before { fill: none; stroke: #b8c0cc; stroke-width: 1.75; stroke-dasharray: 5 5; }
.chart-plot .area { stroke: none; }
.chart-plot .guide { stroke: var(--blue); stroke-width: 1; stroke-dasharray: 3 3; opacity: .6; }
.chart-dot {
  position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue); pointer-events: none; box-shadow: 0 2px 6px rgb(var(--blue-rgb) / 0.35);
}
.chart-tip {
  position: absolute; left: 0; top: 0; min-width: 120px; padding: .5rem .7rem; border-radius: 10px; pointer-events: none;
  background: var(--ink); color: #fff; font-size: .75rem; box-shadow: var(--shadow-2); z-index: 2;
}
.chart-tip p { margin: 0; white-space: nowrap; }
.chart-tip .tip-day { color: #c7ccd6; }
.chart-tip .tip-now { font-size: .9375rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.chart-tip .tip-before { color: #c7ccd6; font-variant-numeric: tabular-nums; }
.chart-x { grid-column: 2; display: flex; justify-content: space-between; padding-top: .6rem; }
.chart-x span { width: 0; display: flex; justify-content: center; color: var(--ink-3); font-size: .6875rem; white-space: nowrap; }
.chart-x span:first-child { justify-content: flex-start; }
.chart-x span:last-child { justify-content: flex-end; }
.chart-empty { margin: 1rem 0 0; color: var(--ink-3); font-size: .8125rem; }

/* orders to handle */
.todo-card { align-self: stretch; }
.todo-counts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.todo-counts a {
  display: flex; flex-direction: column; gap: .1rem; padding: .7rem .75rem; border-radius: var(--r);
  background: var(--surface-soft); border: 1px solid var(--line); text-decoration: none; color: var(--ink-2); min-height: 100%;
}
.todo-counts a:hover { border-color: var(--line-strong); background: #fff; }
.todo-counts strong { font-size: 1.375rem; line-height: 1.2; font-weight: 700; color: var(--ink); }
.todo-counts span { font-size: .75rem; }
.todo-counts a.is-hot { background: var(--blue-tint); border-color: var(--blue-tint-2); }
.todo-counts a.is-hot strong { color: var(--blue-strong); }
.todo-counts a.is-alert { background: var(--warn-bg); border-color: var(--warn-line); }
.todo-counts a.is-alert strong, .todo-counts a.is-alert span { color: var(--warn); }
.todo-today { display: flex; align-items: baseline; gap: .5rem; margin: .9rem 0 .25rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .8125rem; }
.todo-today strong { font-size: 1rem; }
.todo-empty { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 0; color: var(--ink-3); font-size: .8125rem; }
.todo-empty .icon { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); }
.todo-list { list-style: none; margin: .5rem -.5rem 0; padding: 0; }
.todo-list a { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: var(--r-sm); text-decoration: none; color: inherit; }
.todo-list a:hover { background: var(--surface-soft); }
.todo-av { width: 40px; height: 40px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-3); overflow: hidden; position: relative; }
.todo-av img { width: 100%; height: 100%; object-fit: cover; }
.todo-av .icon { width: 18px; height: 18px; }
.todo-av.is-hot::after { content: ""; position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #fff; }
.todo-main { min-width: 0; flex: 1; display: grid; }
.todo-title { color: var(--ink); font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-line { color: var(--ink-3); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-meta { display: grid; justify-items: end; font-size: .6875rem; color: var(--ink-3); flex: none; }
.todo-meta strong { font-size: .8125rem; font-weight: 600; }

/* busiest day */
.weekbars { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.weekbars li { display: grid; justify-items: center; gap: .35rem; }
.wb-n { font-size: .6875rem; color: var(--ink-3); }
.wb-track { position: relative; width: 100%; max-width: 34px; height: 132px; border-radius: 8px; background: var(--surface-sunk); overflow: hidden; }
.wb-fill { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 8px; background: var(--blue-tint-2); height: 0; }
.weekbars li.is-top .wb-fill { background: var(--blue); }
.weekbars li.is-top .wb-n { color: var(--blue-strong); font-weight: 650; }
.wb-day { font-size: .75rem; color: var(--ink-2); }
.wb-fill.h-5 { height: 5%; } .wb-fill.h-10 { height: 10%; } .wb-fill.h-15 { height: 15%; } .wb-fill.h-20 { height: 20%; }
.wb-fill.h-25 { height: 25%; } .wb-fill.h-30 { height: 30%; } .wb-fill.h-35 { height: 35%; } .wb-fill.h-40 { height: 40%; }
.wb-fill.h-45 { height: 45%; } .wb-fill.h-50 { height: 50%; } .wb-fill.h-55 { height: 55%; } .wb-fill.h-60 { height: 60%; }
.wb-fill.h-65 { height: 65%; } .wb-fill.h-70 { height: 70%; } .wb-fill.h-75 { height: 75%; } .wb-fill.h-80 { height: 80%; }
.wb-fill.h-85 { height: 85%; } .wb-fill.h-90 { height: 90%; } .wb-fill.h-95 { height: 95%; } .wb-fill.h-100 { height: 100%; }

/* repeat-customer gauge */
.gauge { position: relative; max-width: 260px; margin: 0 auto; }
.gauge svg { display: block; width: 100%; height: auto; }
.gauge-track, .gauge-value { fill: none; stroke-width: 16; stroke-linecap: round; }
.gauge-track { stroke: var(--surface-sunk); }
.gauge-value { stroke: var(--blue); }
.gauge-num { position: absolute; left: 0; right: 0; bottom: -4px; margin: 0; display: grid; justify-items: center; text-align: center; }
.gauge-num strong { font-size: 2.25rem; line-height: 1.1; font-weight: 700; letter-spacing: -0.03em; }
.gauge-cap { margin: .6rem auto 0; max-width: 220px; text-align: center; font-size: .8125rem; color: var(--ink-2); line-height: 1.4; }
.gauge-foot { display: flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; margin: 1rem 0 0; font-size: .75rem; color: var(--ink-3); }

/* customers to reach */
.people { list-style: none; margin: 0; padding: 0; }
.people + .people { margin-top: .25rem; padding-top: .25rem; border-top: 1px solid var(--line); }
.people li { display: flex; align-items: center; gap: .7rem; padding: .5rem 0; }
.people-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #fff4e0; color: #9a4a06; font-weight: 650; font-size: .8125rem; }
.people-main { min-width: 0; flex: 1; display: grid; text-decoration: none; }
.people-name { color: var(--ink); font-weight: 600; font-size: .875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-line { color: var(--ink-3); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-main:hover .people-name { color: var(--accent); }

/* best sellers */
.best-table td { vertical-align: middle; }
.best-name { display: flex; align-items: center; gap: .75rem; color: var(--ink); font-weight: 500; text-decoration: none; min-width: 180px; }
.best-name:hover { color: var(--accent); }
.best-thumb { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; flex: none; display: grid; place-items: center; background: var(--surface-sunk); color: var(--ink-3); }
.best-thumb img { width: 100%; height: 100%; object-fit: cover; }
.best-thumb .icon { width: 18px; height: 18px; }
.best-sales { display: inline-flex; align-items: center; gap: .35rem; color: var(--ink); font-weight: 600; }
.trend { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.trend .icon { width: 13px; height: 13px; stroke-width: 2.2; }
.trend.up { background: var(--ok-bg); color: var(--ok); }
.trend.down { background: var(--bad-bg); color: var(--bad); }
.stars { display: inline-flex; align-items: center; gap: .3rem; color: var(--ink); font-weight: 500; }
.stars .icon { width: 16px; height: 16px; color: var(--orange); fill: var(--orange); }

/* sellers by status: labelled bars */
.big-num { margin: -.25rem 0 1rem; color: var(--ink); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.025em; }
.seg-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.seg-bars li { display: grid; grid-template-columns: 1fr auto; gap: .35rem .5rem; font-size: .8125rem; }
.seg-name { color: var(--ink-2); }
.seg-val { color: var(--ink); font-weight: 600; }
.seg-track { grid-column: 1 / -1; position: relative; height: 8px; border-radius: 4px; background: var(--surface-sunk); overflow: hidden; }
.seg-fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; width: 0; background: var(--blue); }
.seg-bars .is-orange .seg-fill { background: var(--orange); }
.seg-bars .is-grey .seg-fill { background: #9aa1ad; }
.seg-bars .is-red .seg-fill { background: #dc2626; }

/* icon + label / value rows */
.facts { margin: 0; display: grid; }
.facts div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.facts div:first-child { border-top: 0; padding-top: 0; }
.facts dt { display: flex; align-items: center; gap: .6rem; color: var(--ink-2); font-size: .8125rem; }
.facts dt .icon { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: var(--blue-tint); color: var(--blue); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.maint { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.dash-lower { margin-top: 1rem; }
.dash-lower + .card { margin-top: 1rem; }
.seg-fill.h-5 { width: 5%; } .seg-fill.h-10 { width: 10%; } .seg-fill.h-15 { width: 15%; } .seg-fill.h-20 { width: 20%; } .seg-fill.h-25 { width: 25%; } .seg-fill.h-30 { width: 30%; } .seg-fill.h-35 { width: 35%; } .seg-fill.h-40 { width: 40%; } .seg-fill.h-45 { width: 45%; } .seg-fill.h-50 { width: 50%; } .seg-fill.h-55 { width: 55%; } .seg-fill.h-60 { width: 60%; } .seg-fill.h-65 { width: 65%; } .seg-fill.h-70 { width: 70%; } .seg-fill.h-75 { width: 75%; } .seg-fill.h-80 { width: 80%; } .seg-fill.h-85 { width: 85%; } .seg-fill.h-90 { width: 90%; } .seg-fill.h-95 { width: 95%; } .seg-fill.h-100 { width: 100%; }

/* ---------------------------------------------------------------- laptop widths */
@media (max-width: 1100px) {
  .kpis, .console .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console .stat-row:has(> :nth-child(3):last-child), .console .stat-row:has(> :nth-child(5):last-child), .console .stat-row:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chart-card { grid-column: 1 / -1; }
  .todo-card { align-self: stretch; }
}

/* ---------------------------------------------------------------- phone: app shell */
@media (max-width: 900px) {
  .console .app { grid-template-columns: minmax(0, 1fr); }
  .console .topbar { padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top)); gap: .75rem; min-height: 56px; }
  .console .topbar-title { font-size: 1rem; }
  .console .topbar-title .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
  .console .top-search { display: none; }
  .console .content { padding: 1.1rem 1rem calc(var(--tabbar-h) + 1.5rem + env(safe-area-inset-bottom)); }
  .console .card { padding: 1.1rem; border-radius: 16px; }
  .console .table-wrap { margin: 0 -1.1rem; padding: 0 1.1rem; }
  .console h1 { font-size: 1.375rem; }
  .console .tabbar { background: rgb(255 255 255 / 0.96); border-top: 1px solid var(--line); box-shadow: none; }
  .console .tabbar a { color: var(--ink-3); font-weight: 500; }
  .console .tabbar a[aria-current="page"] { color: var(--blue-strong); font-weight: 600; }
  .console .tabbar a[aria-current="page"] .icon { color: var(--blue); }
  .console .tabbar a[aria-current="page"]::before { background: var(--blue-tint); }
}
@media (max-width: 640px) {
  .console .stat-row, .console .stat-row:has(> :nth-child(3):last-child), .console .stat-row:has(> :nth-child(5):last-child), .console .stat-row:has(> :nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .console .stat-row > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .console .stat-row .card.stat { padding: .9rem 1rem; }
  .console .stat-row .stat strong { font-size: 1.3rem; }
  .console .stat .kpi-icon { width: 30px; height: 30px; }
  .dash-head { align-items: flex-start; }
  .dash-head .head-tools { width: 100%; justify-content: space-between; }
  .kpis { gap: .75rem; }
  .kpi { padding: .9rem 1rem; }
  .kpi-icon { width: 30px; height: 30px; }
  .kpi-icon .icon { width: 16px; height: 16px; }
  .kpi-value { font-size: 1.3rem; }
  .kpi-foot span:last-child { display: none; }
  .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .chart-side .legend { display: none; }
  .area-chart { grid-template-rows: 180px auto; }
  .chart-x span.alt { visibility: hidden; }
  .shop-bar { padding: .9rem 1rem; gap: .75rem 1.25rem; }
  .shop-bar-action { margin-left: 0; width: 100%; }
  .shop-bar-action .btn { width: 100%; }
  .best-table th:first-child, .best-table td:first-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .console .btn { transition: none; }
}

/* ---------------------------------------------------------------- M15: banner pictures, slides, ads, reports */
.bc-field { min-width: 0; }
.bc-frame { position: relative; display: grid; place-items: center; max-width: 420px; margin-bottom: .6rem; border-radius: var(--r); overflow: hidden; background: var(--surface-sunk); border: 1px dashed var(--line-strong); color: var(--ink-3); }
.bc-frame.bc-wide { aspect-ratio: 2 / 1; }
.bc-frame.bc-phone { aspect-ratio: 16 / 9; }
.bc-frame img, .bc-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bc-preview { background-repeat: no-repeat; background-color: var(--surface-sunk); }
.bc-empty { display: grid; justify-items: center; gap: .2rem; font-size: .75rem; }
.bc-empty .icon { width: 26px; height: 26px; }
.slide-pics { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.slide-form { display: grid; gap: .25rem; padding-top: .75rem; }
.slide-list { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.slide-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: .5rem .85rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-soft); }
.slide-row.is-off .slide-thumb { opacity: .45; }
.slide-thumb { width: 120px; aspect-ratio: 2 / 1; object-fit: cover; border-radius: 8px; background: var(--surface-sunk); }
.slide-info { display: grid; gap: .1rem; min-width: 0; }
.slide-info .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slide-actions, .ad-actions { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; justify-content: flex-end; }
.slide-edit { grid-column: 1 / -1; margin: 0; }
.slide-add summary .icon { width: 16px; height: 16px; margin-right: .3rem; vertical-align: -3px; }
.pill-checks { display: flex; flex-wrap: wrap; gap: .4rem; }
.console .pill-check span { min-height: 36px; font-weight: 500; border-width: 1px; }
.console .pill-check input:checked + span { background: var(--blue-tint); border-color: var(--blue); color: var(--blue-strong); font-weight: 600; }
.input-num { max-width: 120px; }
.ad-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ad-row { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: .5rem 1rem; align-items: center; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r); }
.ad-row.is-off .ad-thumb img { opacity: .45; }
.ad-thumb { display: block; width: 136px; aspect-ratio: 2 / 1; border-radius: 8px; overflow: hidden; background: var(--surface-sunk); flex: none; }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.best-name .ad-thumb { width: 72px; }
.ad-info { display: grid; gap: .15rem; min-width: 0; }
.ad-name { color: var(--ink); font-weight: 600; text-decoration: none; }
.ad-name:hover { color: var(--accent); }
.ad-state { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ads-lower { gap: 1rem; margin-top: 1rem; align-items: start; }
.client-grid { gap: 1rem; align-items: start; }
.client-grid > .card { margin: 0; }
.report-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: .5rem; }
.report-period .field { margin: 0; }
.report-tools { display: flex; gap: .5rem; margin-left: auto; }
.report-range { margin: 0 0 1rem; color: var(--ink-2); font-size: .8125rem; }
.report-note { margin-top: 1rem; max-width: 80ch; }
.report-bar { background: #fff; border-bottom: 1px solid var(--line); }
.report-wrap { max-width: 1100px; margin: 0 auto; padding-inline: 1.25rem; }
.report-bar .report-wrap { display: flex; align-items: center; justify-content: space-between; min-height: 60px; }
.report-page .content { padding-top: 1.25rem; }
.console .sfp-logo-preview { background: var(--line); }
.console [data-theme-swatch="instagram"] .sfp-swatch { background: #b8246a; }
.console [data-theme-swatch="ocean"] .sfp-swatch { background: #1d4ed8; }
.console [data-theme-swatch="emerald"] .sfp-swatch { background: #0f766e; }
.console [data-theme-swatch="sunset"] .sfp-swatch { background: #be123c; }
@media (max-width: 700px) {
  .slide-pics { grid-template-columns: minmax(0, 1fr); }
  .slide-row, .ad-row { grid-template-columns: 96px minmax(0, 1fr); }
  .slide-thumb, .ad-thumb { width: 96px; }
  .slide-actions, .ad-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .report-tools { margin-left: 0; }
}
@media print {
  .no-print, .console .sidebar, .console .topbar, .console .tabbar, .report-period, .skip-link { display: none !important; }
  .console .app { display: block; }
  .console .content { padding: 0; max-width: none; }
  body.console { background: #fff; }
  .console .card, .console .stat-row .card.stat { box-shadow: none; break-inside: avoid; }
  .chart-plot { cursor: default; }
}

/* ---------------------------------------------------------------- M16: brand in panels + Branding & SEO page */
.console .brand-logo { display: block; height: 32px; width: auto; max-width: 190px; object-fit: contain; }
.console .brand-icon { background: none; object-fit: cover; }
.console .topbar-title .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
.brand-pics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: .5rem; }
.brand-pic-frame { display: grid; place-items: center; height: 110px; margin-bottom: .6rem; padding: .75rem; border-radius: var(--r); border: 1px dashed var(--line-strong); background: var(--surface-soft); color: var(--ink-3); overflow: hidden; }
.brand-pic-frame img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brand-pic-dark { background: #111827; border-style: solid; }
.brand-pic-square { width: 110px; }
.brand-pic-share { height: auto; aspect-ratio: 1200 / 630; max-width: 420px; padding: 0; }
.brand-pic-share img { width: 100%; height: 100%; object-fit: cover; }
.colour-picks { display: flex; flex-wrap: wrap; gap: .5rem; margin: .25rem 0 .75rem; }
.colour-pick { position: relative; display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .8rem .4rem .45rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 500; cursor: pointer; }
.colour-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.colour-pick:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.colour-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.colour-dot { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.colour-dot.is-custom { background: conic-gradient(#ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7, #ef4444); }
.colour-dot[data-colour="#2b6ef6"] { background: #2b6ef6; } .colour-dot[data-colour="#7c3aed"] { background: #7c3aed; }
.colour-dot[data-colour="#db2777"] { background: #db2777; } .colour-dot[data-colour="#e11d48"] { background: #e11d48; }
.colour-dot[data-colour="#c2410c"] { background: #c2410c; } .colour-dot[data-colour="#0f766e"] { background: #0f766e; }
.colour-dot[data-colour="#15803d"] { background: #15803d; } .colour-dot[data-colour="#111827"] { background: #111827; }
@media (max-width: 800px) { .brand-pics { grid-template-columns: 1fr; } }
.console .colour-pick { display: inline-flex; } .console .colour-dot { display: inline-block; }

/* ---------------------------------------------------------------- M16: profile pages (seller + admin) */
.profile-layout { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
.profile-side, .profile-main { display: grid; gap: 1rem; min-width: 0; }
.profile-side > .card, .profile-main > .card, .profile-main > section { margin: 0 !important; }
.profile-side { position: sticky; top: 80px; }
.profile-card { display: grid; justify-items: center; text-align: center; gap: .35rem; }
.profile-card h2 { margin: .4rem 0 0; font-size: 1.125rem; }
.profile-card p { margin: 0; }
.profile-avatar { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--blue-tint); color: var(--blue-strong); font-size: 1.75rem; font-weight: 650; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--line); }
.profile-avatar img, .avatar.has-photo img { width: 100%; height: 100%; object-fit: cover; }
.console .avatar.has-photo { overflow: hidden; padding: 0; }
.avatar-link { display: inline-flex; border-radius: 50%; text-decoration: none; }
.avatar-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.profile-photo-form { margin-top: .5rem; }
.profile-progress { width: 100%; margin-top: .9rem; padding-top: .9rem; border-top: 1px solid var(--line); text-align: left; display: grid; gap: .4rem; }
.profile-progress-top { display: flex; justify-content: space-between; font-size: .8125rem; }
.profile-progress-top strong { color: var(--ink); }
.profile-progress .seg-track { display: block; }
.profile-change { padding-top: .5rem; }
.signin-h { margin: .75rem 0 .35rem; }
.signins { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; font-size: .8125rem; }
.signins li { display: flex; justify-content: space-between; gap: .75rem; }
.profile-main .sticky-actions { margin-top: 0; }
@media (max-width: 960px) {
  .profile-layout { grid-template-columns: minmax(0, 1fr); }
  .profile-side { position: static; }
}

/* ---------------------------------------------------------------- M16: seller Shop page → Theme */
.layout-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.layout-pick { position: relative; display: grid; gap: .3rem; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; cursor: pointer; }
.layout-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.layout-pick:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: var(--blue-tint); }
.layout-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.layout-name { color: var(--ink); font-weight: 600; font-size: .875rem; }
.layout-about { color: var(--ink-3); font-size: .75rem; line-height: 1.4; }
/* tiny drawings of each layout */
.layout-sketch { display: grid; gap: 3px; height: 92px; padding: 6px; border-radius: 8px; background: var(--surface-sunk); grid-template-columns: 1fr 1fr; grid-template-rows: 26px 8px 1fr 1fr; }
.layout-sketch i { display: block; border-radius: 3px; background: #c7d2e4; }
.layout-sketch i:nth-child(1) { grid-column: 1 / -1; background: #9fb3d6; }
.layout-sketch i:nth-child(2) { grid-column: 1 / -1; width: 60%; background: #d6deea; }
.sketch-boutique { padding: 0 0 6px; grid-template-rows: 34px 6px 1fr 1fr; }
.sketch-boutique i:nth-child(1) { border-radius: 8px 8px 0 0; }
.sketch-boutique i:nth-child(2) { justify-self: center; width: 40%; }
.sketch-boutique i:nth-child(n+3) { margin: 0 6px; }
.sketch-minimal { grid-template-columns: repeat(3, 1fr); grid-template-rows: 18px 6px 1fr 1fr; }
.sketch-minimal i:nth-child(2) { width: 35%; }
.sketch-food { grid-template-columns: 1fr; grid-template-rows: 8px 1fr 1fr 1fr; }
.sketch-food i:nth-child(1) { width: 70%; background: #d6deea; }
.sketch-food i:nth-child(2) { width: auto; }
.sketch-food i:nth-child(n+2) { background: linear-gradient(90deg, #d6deea 0 68%, transparent 68% 72%, #9fb3d6 72%); }
.sketch-bright { padding-top: 0; grid-template-rows: 24px 8px 1fr 1fr; }
.sketch-bright i:nth-child(1) { margin: 0 -6px; border-radius: 8px 8px 12px 12px; background: #6f8fcb; }
.sketch-bright i:nth-child(n+3) { border-radius: 8px; }
.sketch-bright i:nth-child(3) { background: #f4c9da; } .sketch-bright i:nth-child(4) { background: #cfe3f7; } .sketch-bright i:nth-child(5) { background: #f8e2b4; }
.font-picks { display: flex; flex-wrap: wrap; gap: .5rem; }
.font-pick { position: relative; display: inline-flex; align-items: center; gap: .6rem; padding: .45rem .9rem .45rem .5rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; font-size: .8125rem; cursor: pointer; }
.font-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.font-pick:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.font-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.font-sample { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; background: var(--surface-sunk); color: var(--ink); font-size: 1.1rem; font-weight: 600; }
.font-elegant .font-sample { font-family: "Playfair Display", Georgia, serif; }
.font-friendly .font-sample { font-family: "DM Sans", system-ui, sans-serif; }
.console .sfp-themes { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.console .sfp-theme { padding: .45rem .7rem; border-width: 1px; border-radius: var(--r); font-weight: 500; font-size: .8125rem; }
.console [data-theme-swatch="violet"] .sfp-swatch { background: #6d28d9; }
.console [data-theme-swatch="amber"] .sfp-swatch { background: #b45309; }
.console [data-theme-swatch="forest"] .sfp-swatch { background: #15803d; }
.console [data-theme-swatch="charcoal"] .sfp-swatch { background: #1f2937; }
.console .sfp-swatch { width: 22px; height: 22px; }
.shop-preview { margin-top: 1rem; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-sunk); overflow: hidden; }
.shop-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem .75rem; background: #fff; border-bottom: 1px solid var(--line); }
.seg-toggle { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; }
.seg-toggle button { display: inline-flex; align-items: center; gap: .35rem; min-height: 30px; padding: 0 .75rem; border: 0; border-radius: 999px; background: none; color: var(--ink-2); font: 500 .8125rem var(--font); cursor: pointer; }
.seg-toggle button .icon { width: 15px; height: 15px; }
.seg-toggle button.is-on { background: var(--blue-tint); color: var(--blue-strong); font-weight: 600; }
.shop-preview-stage { position: relative; overflow: hidden; padding: 0; }
.shop-preview-stage iframe { display: block; border: 0; background: #fff; transform-origin: top left; }
.shop-preview-stage.is-phone { display: flex; justify-content: center; padding-top: .75rem; }
.shop-preview-stage.is-phone iframe { border-radius: 18px; box-shadow: 0 0 0 8px #111827, var(--shadow-2); transform-origin: top center; margin-bottom: .75rem; }
@media (max-width: 900px) { .layout-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.console .layout-pick { display: grid; align-content: start; } .console .layout-name, .console .layout-about { display: block; } .console .font-pick { display: inline-flex; }
.shop-preview-stage:not(.is-phone) iframe { position: absolute; left: 0; top: 0; } .sfp-form, .sfp-form > .card, .shop-preview { min-width: 0; max-width: 100%; }

/* ================================================================ M17: returns & exchanges */
.console .check-list { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.console .rt-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.console .rt-lines li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: .8rem; align-items: start; }
.console .rt-line-main { display: grid; gap: .15rem; min-width: 0; }
.console .rt-swap-to { display: inline-flex; align-items: center; gap: .35rem; margin-top: .25rem; padding: .3rem .6rem; width: fit-content;
  border-radius: 999px; background: var(--accent-tint, #eef3ff); color: var(--ink); font-size: .8125rem; }
.console .rt-swap-to .icon { width: 14px; height: 14px; }
.console .rt-quote { margin: .5rem 0 0; padding: .65rem .9rem; border: 1px solid var(--line); background: var(--surface-soft, #f6f7f9); border-radius: 12px; }
.console .rt-photos { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: .6rem; }
.console .rt-photos a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.console .rt-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.console .rt-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.console .rt-mini li { display: flex; align-items: center; justify-content: space-between; gap: .6rem; font-size: .875rem; }
.console .rt-mini a { min-width: 0; }
.console details.rt-decline > summary { cursor: pointer; font-weight: 650; color: var(--bad); list-style: none; }
.console details.rt-decline > summary::-webkit-details-marker { display: none; }
.console details.rt-decline[open] > summary { margin-bottom: .75rem; }

/* ================================================================ M19: plan form — show only the fee amount that applies */
.console .fee-card:has(input[name="fee_type"][value="none"]:checked) :is(.fee-percent, .fee-fixed),
.console .fee-card:has(input[name="fee_type"][value="percent"]:checked) .fee-fixed,
.console .fee-card:has(input[name="fee_type"][value="fixed"]:checked) .fee-percent { display: none; }
.console .setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.console .setup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .6rem 1rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.console .setup-row:first-child { border-top: 0; padding-top: 0; }
.console .setup-who { display: grid; gap: .15rem; min-width: 0; }
.console .setup-form { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; }
.console .setup-form .field { margin: 0; }
.console .setup-form .grow { flex: 1 1 260px; }
.console .upgrade-card { border-color: var(--blue-tint-2); background: linear-gradient(180deg, var(--blue-tint), var(--surface) 70%); }
.console .upgrade-card h2 { display: flex; align-items: center; gap: .5rem; }
.console .upgrade-card h2 .icon { color: var(--blue); }
.console .upgrade-card p { max-width: 62ch; }
.console .starter-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1rem; }
.console .starter-card h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .3rem; font-size: 1.0625rem; }
.console .starter-card h2 .icon { color: var(--blue); }
.console .starter-card p { margin: 0; max-width: 70ch; }
.console .starter-form { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

/* ================================================================ v1.24 panel redesign: brand colour, 3 looks, phone = app
   Colour: /brand.css (--brand…) from Branding; a seller may use their shop colour (html[data-panel-colour]).
   Looks (body.look-*): b Soft cream (default) · a Fresh Console · c Brand header. Phones (≤ 900px) behave like an app:
   page title in the top bar (← inside a section), bottom tabs, floating main action, filters in a bottom sheet,
   lists edge to edge, compact two-column rows for tables, confirmations as bottom sheets. */
:root[data-panel-colour="instagram"] { --brand: #b8246a; --brand-strong: #97195a; --brand-tint: #fbeaf3; --brand-tint-2: #f6dcea; --brand-rgb: 184 36 106; }
:root[data-panel-colour="ocean"] { --brand: #1d4ed8; --brand-strong: #1e3a8a; --brand-tint: #e8effd; --brand-tint-2: #d3e0fb; --brand-rgb: 29 78 216; }
:root[data-panel-colour="emerald"] { --brand: #0f766e; --brand-strong: #115e59; --brand-tint: #e2f4f1; --brand-tint-2: #c9eae5; --brand-rgb: 15 118 110; }
:root[data-panel-colour="sunset"] { --brand: #be123c; --brand-strong: #9f1239; --brand-tint: #fdeaee; --brand-tint-2: #f9d3dc; --brand-rgb: 190 18 60; }
:root[data-panel-colour="violet"] { --brand: #6d28d9; --brand-strong: #5b21b6; --brand-tint: #f3eefe; --brand-tint-2: #e4d8fd; --brand-rgb: 109 40 217; }
:root[data-panel-colour="amber"] { --brand: #b45309; --brand-strong: #92400e; --brand-tint: #fdf4e7; --brand-tint-2: #fbe3c1; --brand-rgb: 180 83 9; }
:root[data-panel-colour="forest"] { --brand: #15803d; --brand-strong: #166534; --brand-tint: #eaf7ee; --brand-tint-2: #cdebd6; --brand-rgb: 21 128 61; }
:root[data-panel-colour="charcoal"] { --brand: #1f2937; --brand-strong: #111827; --brand-tint: #f1f2f4; --brand-tint-2: #e1e3e7; --brand-rgb: 31 41 55; }

.console { --ease: cubic-bezier(0.23, 1, 0.32, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); }
.console h1 { font-weight: 800; letter-spacing: -0.025em; }
.console h2, .console h3 { font-weight: 700; }
.console .kpi-value, .console .stat-row .stat strong, .console .chart-total, .console .big-num { font-weight: 800; }
.console .btn { font-weight: 650; }
.console .btn:active:not(:disabled) { transform: scale(.97); }
.console .nav a { font-weight: 550; }
.console .badge, .console .delta { white-space: nowrap; }
.console .topbar-back, .console .topbar-icon { display: none; }
.console .topbar-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* More page: grouped rows, sign out at the end */
.console .list-nav + .list-nav { margin-top: .75rem; }
.console .list-nav-head { margin: .35rem .75rem .15rem; color: var(--ink-3); font-size: .75rem; font-weight: 650; text-transform: uppercase; letter-spacing: .05em; }
.console .list-nav .chip-icon { background: var(--blue-tint); color: var(--blue); }
.console .list-nav li form { margin: 0; }
.console .list-nav-btn { display: flex; align-items: center; gap: .85rem; width: 100%; min-height: 56px; padding: .7rem .75rem; border: 0; border-radius: var(--r-sm); background: none; color: var(--bad); font: 650 .9375rem var(--font); text-align: left; cursor: pointer; }
.console .list-nav-btn .chip-icon { background: var(--bad-bg); color: var(--bad); }
.console .list-nav-btn:hover { background: var(--surface-soft); }
/* Panel look picker */
.look-picks { display: grid; gap: .5rem; }
.look-pick { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .75rem; align-items: start; padding: .6rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; }
.look-pick input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.look-pick:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: var(--blue-tint); }
.look-pick:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.look-name { color: var(--ink); font-weight: 650; font-size: .875rem; }
.look-about { grid-column: 2; color: var(--ink-3); font-size: .75rem; line-height: 1.4; }
.look-sketch { grid-row: 1 / span 2; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 10px 1fr 1fr; gap: 3px; height: 58px; padding: 4px; border-radius: 8px; background: #f3f4f6; }
.look-sketch i { display: block; border-radius: 3px; background: #fff; }
.look-sketch i:nth-child(1) { grid-row: 1 / -1; }
.look-sketch i:nth-child(2) { background: var(--blue-tint-2); }
.look-sketch-b { background: color-mix(in srgb, var(--blue) 6%, #fdfbf8); }
.look-sketch-b i { box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.look-sketch-a i { box-shadow: inset 0 0 0 1px #e5e7eb; }
.look-sketch-c i:nth-child(2) { background: var(--blue); }
.look-sketch-c i:nth-child(3) { background: var(--blue); opacity: .85; }
.look-form .field { margin-bottom: .75rem; }
.radio-stack { display: grid; gap: .35rem; }
.radio-stack .check { display: flex; align-items: center; gap: .5rem; min-height: 36px; font-size: .875rem; }

/* ---------------------------------------------------------------- look B: Soft cream (default), like the website */
.console.look-b {
  --canvas: color-mix(in srgb, var(--blue) 4%, #fdfbf8);
  --surface-soft: color-mix(in srgb, var(--blue) 3%, #fbf9f6);
  --surface-sunk: color-mix(in srgb, var(--blue) 5%, #f5f2ee);
  --line: color-mix(in srgb, var(--blue) 6%, #ece7e1);
  --line-strong: color-mix(in srgb, var(--blue) 8%, #d9d2ca);
  --ink: #1c1917; --ink-2: #57534e; --ink-3: #78716c;
  --shadow-1: 0 1px 2px rgb(60 30 10 / .05), 0 8px 24px -18px rgb(60 30 10 / .28);
  --r-lg: 20px;
}
.look-b .sidebar { background: var(--canvas); border-right: 0; }
.look-b .nav a[aria-current="page"] { background: var(--surface); color: var(--blue-strong); box-shadow: 0 1px 3px rgb(60 30 10 / .08); }
.look-b .nav a[aria-current="page"]::before { content: none; }
.look-b .topbar { background: color-mix(in srgb, var(--canvas) 92%, transparent); border-bottom-color: transparent; }
.look-b .top-search input { background: var(--surface); border-color: var(--line); }
.look-b :is(.card, .kpi, .stat-row .card.stat, .shop-bar, .summary, .alert, .period-pills) { border-color: transparent; }
.look-b :is(.card, .kpi, .shop-bar) { box-shadow: var(--shadow-1); }
.look-b .kpi-icon { border-radius: 12px; background: var(--blue-tint); color: var(--blue); }
.look-b h1 { font-size: 1.875rem; }
.look-b .table th { background: transparent; }
.look-b .input, .look-b .select { box-shadow: none; }
.look-b .plan-card { background: var(--surface); border-color: transparent; box-shadow: var(--shadow-1); }

/* ---------------------------------------------------------------- look A: Fresh Console = the base styles above */

/* ---------------------------------------------------------------- look C: Brand header */
.look-c .topbar { background: var(--blue); border-bottom: 0; color: #fff; }
.look-c .topbar :is(.topbar-title, .user-name, .btn-ghost, .topbar-back, .topbar-icon) { color: #fff; }
.look-c .topbar .btn-ghost:hover { background: rgb(255 255 255 / .14); color: #fff; }
.look-c .top-search input { background: rgb(255 255 255 / .16); border-color: transparent; color: #fff; }
.look-c .top-search input::placeholder, .look-c .top-search .icon { color: rgb(255 255 255 / .8); }
.look-c .top-search input:focus { background: #fff; color: var(--ink); }
.look-c .kbd { background: transparent; border-color: rgb(255 255 255 / .4); color: rgb(255 255 255 / .85); }
.look-c .avatar { background: #fff; color: var(--blue-strong); }
.look-c .nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.look-c .nav a[aria-current="page"] .icon { color: #fff; }
.look-c .nav a[aria-current="page"]::before { content: none; }
.look-c :is(.kpis > .kpi:first-child, .stat-row > .card.stat:first-child) { background: var(--blue); border-color: var(--blue); }
.look-c :is(.kpis > .kpi:first-child, .stat-row > .card.stat:first-child) :is(.kpi-label, .kpi-foot, .kpi-value, .stat-label, strong, span, .muted) { color: #fff; }
.look-c :is(.kpis > .kpi:first-child, .stat-row > .card.stat:first-child) .kpi-icon { background: rgb(255 255 255 / .2); }
.look-c :is(.kpis > .kpi:first-child, .stat-row > .card.stat:first-child) .delta { background: rgb(255 255 255 / .2); color: #fff; }
.look-c .kpi-icon { border-radius: 10px; background: var(--surface-sunk); color: var(--ink); }

/* ---------------------------------------------------------------- phone: the panel is an app */
@media (max-width: 900px) {
  .console .topbar { position: sticky; top: 0; z-index: 30; min-height: 56px; gap: .5rem; }
  .console .topbar-back { display: grid; place-items: center; width: 40px; height: 40px; margin-left: -.5rem; border-radius: 50%; color: var(--ink); flex: none; }
  .console .topbar-back:active { transform: scale(.92); }
  .console .topbar-back .icon { width: 22px; height: 22px; }
  .console .topbar-title { flex: 1 1 auto; min-width: 0; font-size: 1.0625rem; font-weight: 750; }
  .console .topbar-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--ink); flex: none; }
  .console .topbar-icon .icon { width: 21px; height: 21px; }
  .console .topbar .user { gap: .25rem; margin-left: 0; }
  .console .topbar .user form, .console .topbar .user-name { display: none; }
  .console .avatar { width: 34px; height: 34px; }
  /* the top bar shows the title: the same heading below stays for screen readers only */
  .console .page-head h1.is-dup { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .console .page-head { margin-bottom: .85rem; }
  .console .crumb { display: none; }
  /* floating main action (the page's first "add / new" link) */
  .console .fab-main { display: inline-flex; width: auto; flex: none; white-space: nowrap; position: fixed; right: 16px; bottom: calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom)); z-index: 35; min-height: 54px; padding: 0 1.25rem; border-radius: 27px; box-shadow: 0 12px 26px -10px rgb(var(--blue-rgb) / .65); font-size: .9375rem; }
  .console .fab-main .icon { width: 20px; height: 20px; }
  .console:has(.fab-main) .content { padding-bottom: calc(var(--tabbar-h) + 5.5rem + env(safe-area-inset-bottom)); }
  /* lists edge to edge: no box inside a box */
  .console .content > .card:has(> :is(.olist, .plist, .crm-list, .table-wrap, .filter-bar)),
  .console .content > form > .card:has(> :is(.olist, .plist, .table-wrap)) { margin-inline: -1rem; border-radius: 0; border-left: 0; border-right: 0; padding-inline: 1rem; }
  .console .content > .list-nav { margin-inline: -1rem; border-radius: 0; border-left: 0; border-right: 0; }
  .console .content .card .table-wrap { margin-inline: 0; padding-inline: 0; } /* the card already reaches the screen edges */
  /* tables become compact rows: title across the top, the rest in two columns (label above value) */
  .console .table.stack-sm tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1rem; padding: .9rem 0; }
  .console .table.stack-sm td { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; text-align: left; padding: 0; font-size: .8125rem; }
  .console .table.stack-sm td::before { grid-row: auto; grid-column: 1; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; padding: 0; margin-bottom: .05rem; }
  .console .table.stack-sm td > * { grid-column: 1; }
  .console .table.stack-sm td:first-child { grid-column: 1 / -1; font-size: .9375rem; font-weight: 700; }
  .console .table.stack-sm td:first-child::before { content: none; }
  .console .table.stack-sm td[data-label=""], .console .table.stack-sm td:last-child:has(.btn, form, .btn-row) { grid-column: 1 / -1; }
  /* filters in a bottom sheet (panel.js builds it); the search box stays in the page */
  .console .filter-bar.has-sheet { flex-wrap: nowrap; }
  .console .filter-bar.has-sheet > .filter-search { flex: 1 1 auto; min-width: 0; }
  .console .filter-open { display: inline-flex; align-items: center; gap: .35rem; flex: none; min-height: 42px; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .8125rem var(--font); cursor: pointer; }
  .console .filter-open .icon { width: 17px; height: 17px; }
  .console .filter-open .count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--blue); color: #fff; font-size: .6875rem; }
  .console .filter-sheet { position: fixed; inset: 0; z-index: 60; display: none; }
  .console .filter-sheet.is-open { display: block; }
  .console .filter-sheet-backdrop { position: absolute; inset: 0; background: rgb(17 24 39 / .45); animation: fade .25s var(--ease); }
  .console .filter-sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: .85rem; max-height: 86dvh; overflow-y: auto; padding: .5rem 1rem calc(1rem + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: var(--surface); box-shadow: 0 -12px 40px -16px rgb(16 24 40 / .35); animation: sheet-up .4s var(--ease-drawer); }
  .console .filter-sheet-panel :is(.field, .select, .input) { width: 100%; min-width: 0; margin: 0; }
  .console .filter-sheet-grip { width: 40px; height: 5px; margin: .25rem auto 0; border-radius: 3px; background: var(--line-strong); }
  .console .filter-sheet-head { display: flex; align-items: center; justify-content: space-between; }
  .console .filter-sheet-head h2 { margin: 0; font-size: 1.125rem; }
  .console .filter-sheet-panel .btn[type="submit"] { width: 100%; min-height: 48px; }
  /* confirmations slide up from the bottom */
  .console dialog.confirm[open] { margin: auto 0 0; width: 100%; max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(1.25rem + env(safe-area-inset-bottom)); animation: sheet-up .35s var(--ease-drawer); }
  .console dialog.confirm .btn-row { display: grid; grid-template-columns: 1fr 1fr; }
  /* bottom tabs: brand-colour pill on the active tab */
  .console .tabbar a { font-size: .6875rem; font-weight: 600; transition: transform .16s var(--ease); }
  .console .tabbar a:active { transform: scale(.94); }
  .console .tabbar a[aria-current="page"] { color: var(--blue-strong); }
  .console .tabbar a[aria-current="page"] .icon { color: var(--blue); }
  .console .tabbar a[aria-current="page"]::before { background: var(--blue-tint); }
  .look-b .tabbar { background: color-mix(in srgb, var(--surface) 96%, transparent); }
  .look-c .tabbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 32px; border: 0; background: #1f2937; box-shadow: 0 10px 30px -10px rgb(17 24 39 / .55); height: var(--tabbar-h); padding-bottom: 0; }
  .look-c .tabbar a { color: rgb(255 255 255 / .62); }
  .look-c .tabbar a[aria-current="page"], .look-c .tabbar a[aria-current="page"] .icon { color: #fff; }
  .look-c .tabbar a[aria-current="page"]::before { background: var(--blue); }
  .look-c .content { padding-bottom: calc(var(--tabbar-h) + 2.5rem + env(safe-area-inset-bottom)); }
  .look-c .fab-main { bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); }
  .look-c .topbar-back, .look-c .topbar-icon { color: #fff; }
  .console .sticky-actions { z-index: 34; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .console .filter-sheet-backdrop, .console .filter-sheet-panel, .console dialog.confirm[open] { animation: none; }
  .console .btn:active:not(:disabled), .console .tabbar a:active, .console .topbar-back:active { transform: none; }
}

/* ================================================================ Delivery (D1 rate table, D2 Shiprocket) */
.dl-methods { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.dl-block { margin-top: 1rem; }
.dl-sub { margin: .25rem 0 .25rem; font-size: 1rem; }
.dl-table-wrap { margin: .75rem 0 .5rem; }
.dl-rates { min-width: 560px; }
.dl-rates th, .dl-rates td { padding: .35rem .4rem; vertical-align: middle; }
.dl-rates thead th { font-size: .8125rem; white-space: nowrap; }
.dl-rates tbody th { font-weight: 600; white-space: nowrap; position: sticky; left: 0; background: var(--surface); z-index: 1; }
.dl-rates .input { min-width: 0; width: 100%; max-width: 7.5rem; padding-block: .45rem; }
.dl-kg { display: inline-flex; align-items: center; gap: .35rem; }
.dl-kg .input { width: 4.75rem; }
.dl-extra th, .dl-extra td { border-top: 1px solid var(--line-strong); }
.dl-rates[data-method="weight"] [data-zone-col]:not([data-zone-col="india"]) { display: none; }
.dl-rates[data-method="weight"] [data-zone-name] { display: none; }
.dl-rates[data-method="weight"] .dl-all { display: inline !important; }
.dl-bands { max-width: 420px; }
.dl-bands td { padding: .35rem .4rem; }
.dl-days { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .75rem 1rem; }
.dl-states { columns: 3 200px; display: block; }
.dl-states .check-inline { display: flex; break-inside: avoid; padding: .2rem 0; }
.dl-steps { margin: .5rem 0 1rem; padding-left: 1.25rem; display: grid; gap: .35rem; }
.dl-local { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line-strong); }
.dl-local p { margin: 0 0 .5rem; }
.copy-row { display: flex; gap: .5rem; align-items: center; }
.copy-row .input { flex: 1; min-width: 0; font-size: .8125rem; }
.box-size { margin-top: .5rem; }
.box-row { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: end; }
.box-row .select { width: auto; min-width: 12rem; }
.box-dim { display: grid; gap: .2rem; font-size: .8125rem; color: var(--ink-2); }
.box-dim .input { width: 5rem; }
.sr-parcel { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 .6rem; }
.sr-parcel .field { margin-bottom: .6rem; }
.sr-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.sr-sim { margin-top: .75rem; padding: .75rem; border-radius: 12px; background: var(--surface-soft); display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.sr-sim p { margin: 0 .25rem 0 0; flex-basis: 100%; }
@media (max-width: 560px) {
  .sr-parcel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dl-states { columns: 2 140px; }
}