/* Padigo — the parent brand of KITCHEN, COOKBOOK, DASHBOARD, COUNTER and CHAT.
   The one design language all five apps share: colours, type, radii, focus, the Padigo wordmark, the "Padigo / APP" lockup and
   the switcher between apps. Each app's build puts this file FIRST, then its own CSS, which builds on these tokens.
   Components (brand.jsx): <Wordmark/>, <Lockup app="Kitchen"/>, <AppSwitcher/>, <PlatformLinks/>. Fonts: brand-head.mjs. */

:root {
  /* brand */
  --pd-green: #0f6b4f;          /* Padigo green: primary actions, links, the app name in the lockup */
  --pd-green-strong: #0b573f;   /* hover / pressed */
  --pd-green-soft: #e8f4ee;     /* selected rows, info notes, chips */
  --pd-green-line: #b9dccb;
  --pd-green-ink: #0a4433;      /* text on --pd-green-soft */
  --pd-marigold: #f0a020;       /* the wordmark's dot; small highlights only, never text on white */
  --pd-ink: #11201a;            /* sidebars and dark surfaces */
  --pd-ink-2: #1a2c25;
  --pd-ink-3: #233a31;
  --pd-ink-text: #c6d3cd;
  --pd-ink-muted: #8a9b94;
  --pd-ink-accent: #8fd8b6;     /* the app name and links on --pd-ink */

  /* neutrals */
  --pd-paper: #f7f7f4;
  --pd-panel: #ffffff;
  --pd-line: #e3e6e1;
  --pd-line-strong: #c9cec7;
  --pd-text: #17201c;
  --pd-muted: #64706a;

  /* meaning */
  --pd-success: #2b8a3e; --pd-success-soft: #ebfbee;
  --pd-warning: #b35c00; --pd-warning-soft: #fff4e6;
  --pd-danger: #d0352b;  --pd-danger-soft: #fff3f2;
  --pd-info: #1f5fa8;    --pd-info-soft: #eaf2fc;

  /* shape and type */
  --pd-radius-sm: 6px; --pd-radius: 8px; --pd-radius-lg: 12px; --pd-radius-xl: 16px;
  --pd-shadow: 0 1px 2px rgba(17, 32, 26, .05), 0 12px 32px -16px rgba(17, 32, 26, .22);
  --pd-shadow-pop: 0 18px 44px -18px rgba(17, 32, 26, .38);
  --pd-font-ui: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pd-font-brand: 'Bricolage Grotesque', var(--pd-font-ui);
  --pd-focus: 0 0 0 3px color-mix(in srgb, var(--pd-green) 32%, transparent);

  /* the names every app's CSS already uses, pointed at the brand */
  --bg: var(--pd-paper); --panel: var(--pd-panel); --line: var(--pd-line); --text: var(--pd-text); --muted: var(--pd-muted);
  --accent: var(--pd-green); --accent-strong: var(--pd-green-strong); --accent-soft: var(--pd-green-soft);
  --accent-line: var(--pd-green-line); --accent-ink: var(--pd-green-ink); --danger: var(--pd-danger);
  --side: var(--pd-ink); --side-2: var(--pd-ink-2); --side-3: var(--pd-ink-3); --side-text: var(--pd-ink-text);
  --side-muted: var(--pd-ink-muted); --side-link: var(--pd-ink-accent);
}

/* keyboard focus looks the same everywhere */
:focus-visible { outline: none; box-shadow: var(--pd-focus); }
a:focus-visible, button:focus-visible { border-radius: var(--pd-radius-sm); }

/* ---------- the wordmark ----------
   Bricolage Grotesque ExtraBold at its display optical size, set tight. The i is dotless and wears a marigold dot instead:
   that dot is the one signature detail (there is no logo yet). Screen readers hear "Padigo". */
.pd-wordmark {
  display: inline-block; font-family: var(--pd-font-brand); font-weight: 800; font-size: 22px; line-height: 1;
  letter-spacing: -.03em; font-variation-settings: 'opsz' 96; font-kerning: normal; color: inherit; white-space: nowrap;
}
.pd-wordmark .pd-P { margin-right: -.02em; }          /* close the P–a gap the bowl leaves */
/* the i gets a little air on both sides, so the dot reads as its own mark between d and g */
.pd-wordmark .pd-i { position: relative; display: inline-block; letter-spacing: 0; margin: 0 .005em 0 .015em; }
.pd-wordmark .pd-i::after {
  content: ''; position: absolute; left: 50%; top: var(--pd-dot-top, .09em); width: .19em; height: .19em; transform: translateX(-50%);
  border-radius: 50%; background: var(--pd-marigold);
}

/* ---------- Padigo / APP ---------- */
.pd-lockup {
  display: inline-flex; align-items: baseline; gap: .5em; min-width: 0; color: var(--pd-text); text-decoration: none; white-space: nowrap;
}
.pd-lockup .pd-wordmark { font-size: 21px; }
.pd-sep { font-family: var(--pd-font-ui); font-weight: 300; font-size: 17px; color: var(--pd-line-strong); transform: translateY(-.02em); }
.pd-app {
  font-family: var(--pd-font-ui); font-size: 11px; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: var(--pd-green);
}
.pd-lockup.sm .pd-wordmark { font-size: 18px; }
.pd-lockup.sm .pd-sep { font-size: 15px; }
.pd-lockup.sm .pd-app { font-size: 10px; letter-spacing: .15em; }
.pd-lockup.lg .pd-wordmark { font-size: 28px; }
.pd-lockup.lg .pd-sep { font-size: 22px; }
.pd-lockup.lg .pd-app { font-size: 12.5px; }
.pd-on-dark .pd-lockup, .pd-lockup.pd-on-dark { color: #fff; }
.pd-on-dark .pd-sep { color: rgba(255, 255, 255, .3); }
.pd-on-dark .pd-app { color: var(--pd-ink-accent); }
a.pd-lockup:hover .pd-app { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- moving between the apps ---------- */
.pd-switch { position: relative; display: inline-flex; }
.pd-switch-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: var(--pd-radius);
  border: 1px solid transparent; background: transparent; color: var(--pd-muted); cursor: pointer;
}
.pd-switch-btn:hover, .pd-switch-btn[aria-expanded='true'] { background: color-mix(in srgb, var(--pd-text) 6%, transparent); color: var(--pd-text); }
.pd-on-dark .pd-switch-btn { color: var(--pd-ink-muted); }
.pd-on-dark .pd-switch-btn:hover, .pd-on-dark .pd-switch-btn[aria-expanded='true'] { background: var(--pd-ink-2); color: #fff; }
.pd-switch-btn svg { width: 16px; height: 16px; }
.pd-switch-menu {
  position: absolute; z-index: 300; top: calc(100% + 6px); left: 0; width: 270px; padding: 6px; background: var(--pd-panel);
  border: 1px solid var(--pd-line); border-radius: var(--pd-radius-lg); box-shadow: var(--pd-shadow-pop); display: flex; flex-direction: column;
  font-family: var(--pd-font-ui); font-size: 14px; text-align: left;
}
.pd-switch-menu.right { left: auto; right: 0; }
.pd-switch-head { display: flex; align-items: baseline; justify-content: space-between; padding: 8px 10px 10px; border-bottom: 1px solid var(--pd-line); margin-bottom: 4px; color: var(--pd-text); }
.pd-switch-head .pd-wordmark { font-size: 18px; }
.pd-switch-head small { color: var(--pd-muted); font-size: 11.5px; }
.pd-switch-menu a {
  display: grid; grid-template-columns: 1fr auto; gap: 1px 8px; padding: 8px 10px; border-radius: var(--pd-radius); color: var(--pd-text); text-decoration: none;
}
.pd-switch-menu a:hover { background: var(--pd-green-soft); }
.pd-switch-menu a[aria-current='page'] { background: color-mix(in srgb, var(--pd-text) 5%, transparent); }
.pd-switch-menu .pd-app { grid-column: 1; }
.pd-switch-menu .what { grid-column: 1; font-size: 12.5px; color: var(--pd-muted); }
.pd-switch-menu .here { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 11px; color: var(--pd-muted); }

/* in a dark sidebar: the other apps as a list */
.pd-platforms { display: flex; flex-direction: column; gap: 2px; }
.pd-platforms .side-title { display: flex; align-items: baseline; gap: 6px; }
.side-group.pd-platforms a { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 7px 10px; border-radius: var(--pd-radius); color: var(--side-text); text-decoration: none; }
.side-group.pd-platforms a:hover { background: var(--side-2); color: #fff; }
.pd-platforms a .pd-app { color: inherit; font-size: 10.5px; letter-spacing: .15em; }
.pd-platforms a .what { font-size: 12px; color: var(--side-muted); }
.pd-platforms a:hover .what { color: var(--side-text); }

@media (max-width: 760px) {
  /* tight top bars on a phone: smaller, but both names stay (which app this is matters most on a small screen) */
  .pd-lockup.collapse { gap: .35em; }
  .pd-lockup.collapse .pd-wordmark { font-size: 16px; }
  .pd-lockup.collapse .pd-sep { font-size: 13px; }
  .pd-lockup.collapse .pd-app { font-size: 9px; letter-spacing: .12em; }
  .pd-switch-menu { position: fixed; left: 12px; right: 12px; top: 56px; width: auto; }
}

/* Shared by Kitchen and the Dashboard. Uses each app's --bg --panel --line --text --muted --accent --danger. */
.theme-list { display: flex; flex-direction: column; gap: 10px; }
.theme-subhead { margin: 14px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.theme-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px 16px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.theme-card.is-live { border-color: color-mix(in srgb, #2b8a3e 45%, var(--line)); }
.theme-list:not(.compact) .theme-card.is-live { grid-template-columns: 260px 1fr auto; }
.theme-preview { display: block; width: 260px; height: 170px; overflow: hidden; border-radius: 8px; border: 1px solid var(--line);
  background: var(--bg); position: relative; }
.theme-preview iframe { width: 1280px; height: 836px; border: 0; transform: scale(.203); transform-origin: 0 0; pointer-events: none; }
.theme-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.theme-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-title b { font-size: 15px; }
.theme-actions { display: flex; align-items: center; gap: 8px; }
.pill { font-size: 11.5px; padding: 3px 8px; border-radius: 99px; background: #f1f3f5; color: var(--muted); font-weight: 600; white-space: nowrap; }
.pill.live { background: #ebfbee; color: #2b8a3e; }
.menu-wrap { position: relative; }
.icon-btn { width: 34px; height: 34px; padding: 0; border-radius: 8px; font-size: 18px; line-height: 1; }
.menu-wrap .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 50; min-width: 180px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 40px -16px rgba(0,0,0,.3); padding: 6px; display: flex; flex-direction: column; }
.menu-wrap .menu a, .menu-wrap .menu button { text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  color: var(--text); text-decoration: none; font: inherit; cursor: pointer; }
.menu-wrap .menu a:hover, .menu-wrap .menu button:hover { background: var(--bg); }
.menu-wrap .menu .danger { color: var(--danger); }
.add-theme { align-self: flex-start; border: 1px dashed #c5cad6; background: none; color: var(--accent); border-radius: 10px; padding: 9px 14px; font-weight: 500; }
.add-theme-form { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.add-theme-form label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.note.info { background: var(--accent-soft); color: var(--accent-ink); }
.theme-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 3px 4px 3px 10px; border-radius: 99px;
  background: var(--bg); border: 1px solid var(--line); font-weight: 500; font-size: 12.5px; }
@media (max-width: 760px) {
  .theme-card, .theme-list:not(.compact) .theme-card.is-live { grid-template-columns: 1fr; }
  .theme-preview { width: 100%; height: 190px; }
  .theme-preview iframe { transform: scale(calc(100vw / 1400)); }
  .theme-actions { justify-content: flex-start; }
}

/* media library + picker */
.media-lib { display: flex; flex-direction: column; gap: 12px; position: relative; }
.media-lib.dragging::after { content: 'Drop to upload'; position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; border: 2px dashed var(--accent);
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); font-weight: 600; }
.media-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.media-toolbar .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.media-toolbar .seg button { border: 0; border-radius: 0; padding: 7px 12px; background: var(--panel); }
.media-toolbar .seg button.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.media-search { flex: 1; min-width: 140px; width: auto; }
.media-body { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.media-lib:not(.compact) .media-body:has(.media-detail) { grid-template-columns: 1fr 300px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.media-lib.compact .media-grid { max-height: 52vh; overflow: auto; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); padding: 2px; }
.media-tile { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #f1f3f5; cursor: pointer; }
.media-tile.on { outline: 2px solid var(--accent); outline-offset: 1px; }
.media-tile:hover { border-color: var(--accent); }
.media-tile img, .media-tile video { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-kind { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 11px;
  background: rgba(0,0,0,.6); color: #fff; }
.media-name { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 7px 5px; font-size: 11px; color: #fff; text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.6)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 40px 16px; border: 1.5px dashed #cfd4de; border-radius: 12px; text-align: center; }
.media-detail { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; position: sticky; top: 16px; }
.media-detail label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 500; }
.media-preview { border-radius: 8px; overflow: hidden; background: #f1f3f5; }
.media-preview img, .media-preview video { width: 100%; display: block; max-height: 240px; object-fit: contain; }
.media-title { overflow-wrap: anywhere; }
.copy-row { display: flex; gap: 6px; } .copy-row input { flex: 1; min-width: 0; font-size: 12px; }
.modal-back { position: fixed; inset: 0; z-index: 200; background: rgba(15,17,22,.5); display: grid; place-items: center; padding: 16px; }
.modal { width: min(860px, 100%); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel); border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: 0 30px 80px -30px rgba(0,0,0,.5); }
.modal-head { display: flex; align-items: center; justify-content: space-between; }
.modal-foot { display: flex; gap: 8px; align-items: center; border-top: 1px solid var(--line); padding-top: 12px; }
.modal-foot input { flex: 1; min-width: 0; }
.media-field { display: flex; gap: 8px; align-items: center; }
.media-field .thumb-lg { width: 54px; height: 54px; flex: none; border-radius: 8px; background: #f1f3f5 center / cover no-repeat; border: 1px solid var(--line); overflow: hidden; }
.media-field .thumb-lg video { width: 100%; height: 100%; object-fit: cover; }
.media-field input { flex: 1; min-width: 0; }
@media (max-width: 760px) {
  .media-lib:not(.compact) .media-body:has(.media-detail) { grid-template-columns: 1fr; }
  .media-grid { grid-template-columns: repeat(3, 1fr); }
}

/* The app shell every signed-in app of ours uses: base type and controls, the dark sidebar, page frames,
   cards, stats and the phone layout. Kept here so the Dashboard and Counter look like one product.
   Each app's build prepends brand.css (Padigo's colours, type and the lockup), then ui.css, then this, then its own app.css.
   Colours come from brand.css: --bg --panel --line --text --muted --accent(-soft/-ink/-line) --danger --side(-2/-3/-text/-muted/-link). */
:root { font-family: var(--pd-font-ui); font-size: 14px; color: var(--text); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
button { border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 7px 12px; cursor: pointer; color: var(--text); }
button:hover { border-color: #c5cad6; }
button.primary, a.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
button.primary:hover:not(:disabled), a.btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
button.primary:disabled { opacity: .6; }
button.link { border: 0; background: none; color: var(--accent); padding: 4px; }
button.link.danger { color: var(--danger); }
a.btn { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; color: var(--text); text-decoration: none; background: #fff; font-weight: 500; }
a.btn:hover { border-color: #c5cad6; }
.btn-link { color: var(--accent); font-size: 13px; text-decoration: none; }
input, select, textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; width: 100%; background: #fff; color: var(--text); }
code { font-family: ui-monospace, monospace; font-size: 12px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
small.err { color: var(--danger); }
.boot { padding: 40px; color: var(--muted); }
.note { padding: 9px 12px; border-radius: 8px; font-size: 13px; }
.note.ok { background: #ebfbee; color: #2b8a3e; } .note.err { background: #fff5f5; color: var(--danger); }
.note .token-value { display: block; margin-top: 8px; padding: 8px 10px; background: #fff; border-radius: 6px; word-break: break-all; user-select: all; color: var(--text); }
.banner.info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 28px; background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; }
.at-input { display: flex; align-items: stretch; border: 1px solid var(--line); border-radius: 8px; background: #fff; overflow: hidden; }
.at-input > span { display: flex; align-items: center; padding: 0 2px 0 10px; color: var(--muted); }
.at-input input { border: 0; padding-left: 2px; min-width: 0; }
.at-input:focus-within { border-color: var(--accent); }

/* shell */
.dash { display: grid; grid-template-columns: 248px 1fr; min-height: 100dvh; }
.sidebar { position: sticky; top: 0; height: 100dvh; overflow: auto; background: var(--side); color: var(--side-text); padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px; }
.brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 8px 6px; }
.page-head h1, .card h2, .section-head h2, .empty-state h3 { font-family: var(--pd-font-brand); letter-spacing: -.015em; }
.side-label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); padding: 0 4px; }
.side-label select { background: var(--side-2); color: #fff; border-color: var(--side-3); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.side-nav, .side-group { display: flex; flex-direction: column; gap: 2px; }
.side-nav a, .side-group a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--side-text); text-decoration: none; font-weight: 500; }
.side-nav a:hover, .side-group a:hover { background: var(--side-2); color: #fff; }
.side-nav a.on, .side-group a.on { background: var(--side-3); color: #fff; }
.ico { width: 18px; text-align: center; opacity: .8; }
.side-title { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--side-muted); padding: 6px 10px 2px; }
.side-user { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 6px 0; border-top: 1px solid var(--side-3); }
.side-user .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-user .who b { color: #fff; font-size: 13px; } .side-user .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--side-muted); }
.side-user .link { color: var(--side-link); font-size: 12.5px; }
.avatar { width: 32px; height: 32px; flex: none; border-radius: 99px; display: grid; place-items: center; background: var(--side-3); color: #fff; font-weight: 600; }
.content { min-width: 0; }
.mobile-store { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-weight: 500; }
.mobile-top .pd-switch { margin-left: auto; }
.mobile-top, .scrim { display: none; }
.page { max-width: 1080px; margin: 0 auto; padding: 30px 28px 60px; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.page-head h1 { margin: 0; font-size: 24px; letter-spacing: -.01em; }
.page-actions { display: flex; gap: 8px; }
.sub { margin: -8px 0 4px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.card h2, .card h3 { margin: 0; font-size: 16px; }
.card label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; }
.empty-state { text-align: center; padding: 48px 20px; border: 1px dashed #cfd4de; border-radius: 12px; background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-state h3 { margin: 0; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.stat b { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stat b.warn { color: #e67700; }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.steps li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; }
.steps li.done a { color: var(--muted); text-decoration: line-through; }
.steps .check { width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid #c5cad6; display: grid; place-items: center; font-size: 12px; color: #fff; }
.steps li.done .check { background: #2b8a3e; border-color: #2b8a3e; }
.history table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.history th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; }
.history td { padding: 8px; border-top: 1px solid var(--line); }
.history td.right { text-align: right; }
/* moved account pages */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head h2 { margin: 0; font-size: 18px; }
.ns-list, .token-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ns-row { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.ns-head { display: flex; gap: 12px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 12px 14px; }
.ns-head:disabled { cursor: default; color: inherit; }
.ns-head span:last-child { display: flex; flex-direction: column; }
.store-initial { width: 36px; height: 36px; flex: none; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; text-transform: uppercase; }
.store-initial.small { width: 32px; height: 32px; font-size: 14px; }
.verified { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: 6px; border-radius: 99px; background: var(--accent); color: #fff; font-size: 10px; }
.members { border-top: 1px solid var(--line); padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.member { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 6px 0; }
.member > span:first-child { flex: 1; min-width: 0; }
.member select { width: auto; }
.member.add { justify-content: flex-start; } .member.add .at-input { flex: 1; }
.token-list .member { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.token-new { display: flex; gap: 8px; margin: 14px 0; } .token-new input { flex: 1; }

@media (max-width: 900px) {
  .dash { grid-template-columns: 1fr; }
  .sidebar { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: 270px; transform: translateX(-102%); transition: transform .22s ease; }
  .dash.nav-open .sidebar { transform: none; }
  .dash.nav-open .scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.35); }
  .mobile-top { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 20; padding: 10px 14px; background: var(--panel); border-bottom: 1px solid var(--line); }
  .page { padding: 20px 14px 40px; }
  .stat-grid { grid-template-columns: 1fr 1fr; }
  .grid2 { grid-template-columns: 1fr; }
  .banner.info { padding: 10px 14px; }
}

/* Counter's own styles. The shell (sidebar, page frame, cards, stats) comes from shared/app-ui/shell.css,
   so Counter and the Dashboard read as one product; only the money-specific pieces live here. */

/* A green mark, so you always know which app you are in. */
.counter .brand .mark { background: linear-gradient(135deg, #12b886, #2b8a3e); }
.counter .side-nav a.on, .counter .side-group a.on { background: #1b2a24; }

.stat.big b { font-size: 23px; letter-spacing: -.02em; overflow: visible; white-space: normal; }
@media (max-width: 1200px) { .stat.big b { font-size: 20px; } }

/* the headline balance */
.balance { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.balance > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.balance strong { font-size: 34px; letter-spacing: -.03em; line-height: 1.1; }
.balance button { padding: 10px 20px; }

/* collected − paid out = held */
.sum-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sum-row > span { display: flex; flex-direction: column; }
.sum-row b { font-size: 16px; }
.sum-row .op { font-size: 18px; color: var(--muted); align-self: center; }
.pill.warn { background: #fff4e6; color: #e67700; }

/* labelled figures (So far, the money rules) */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 0; }
.facts div { background: #f8f9fa; border-radius: 8px; padding: 10px 12px; }
.facts dt { font-size: 12px; color: var(--muted); }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; }

/* statements and the money feed */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
.table-wrap table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table-wrap th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 8px; white-space: nowrap; }
.table-wrap td { padding: 9px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.table-wrap td.right, .table-wrap th.right { text-align: right; }
.nowrap { white-space: nowrap; }
td.in { color: #2b8a3e; }
td.out { color: var(--danger); }

/* the account switcher on the statement */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; flex-wrap: wrap; }
.seg button { border: 0; border-radius: 0; padding: 6px 12px; background: transparent; font-size: 13px; }
.seg button.on { background: var(--accent); color: #fff; font-weight: 600; }

/* the pages that are still to come */
.soon { align-items: flex-start; }
.soon ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.soon .pill { background: var(--accent-soft); color: var(--accent-ink); }

@media (max-width: 900px) {
  .balance strong { font-size: 28px; }
  .sum-row { gap: 10px; }
  .section-head { flex-wrap: wrap; }
}

/* On a phone a five-column table is unreadable, so each row becomes a small block:
   what happened and the amount on top, then what it was for and the balance, then the time. */
@media (max-width: 760px) {
  .table-wrap { overflow-x: visible; margin: 0; }
  .table-wrap thead { display: none; }
  .table-wrap table, .table-wrap tbody { display: block; }
  .table-wrap tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "what amount" "for balance" "into into" "when when";
    gap: 1px 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
  .table-wrap td { display: block; border: 0; padding: 0; }
  .c-what { grid-area: what; } .c-amount { grid-area: amount; }
  .c-for { grid-area: for; } .c-balance { grid-area: balance; }
  .c-into { grid-area: into; } .c-when { grid-area: when; margin-top: 2px; }
  .c-balance::before { content: 'balance '; }
}

/* ---- orders ---- */
.seg.wrap { flex-wrap: wrap; }
.seg button b { font-weight: 700; opacity: .75; }
.search { max-width: 420px; }
.order-rows { display: flex; flex-direction: column; gap: 8px; }
.order-row { display: grid; grid-template-columns: 62px minmax(120px, 1.1fr) minmax(0, 1.6fr) auto 110px 110px;
  gap: 12px; align-items: center; width: 100%; text-align: left; padding: 12px 14px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; }
.order-row:hover { border-color: #c5cad6; }
.order-rows.compact .order-row { grid-template-columns: 62px 1fr auto 110px; padding: 10px 12px; }
.order-row .num { font-variant-numeric: tabular-nums; font-weight: 700; }
.order-row .who { display: flex; flex-direction: column; min-width: 0; }
.order-row .who b, .order-row .who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row .what { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-row .when { text-align: right; }
.order-row .amount { text-align: right; font-variant-numeric: tabular-nums; }

/* the state an order is in, at a glance */
.pill.st-wait { background: #fff9db; color: #856404; }
.pill.st-bad { background: #fff5f5; color: var(--danger); }
.pill.st-go { background: var(--accent-soft); color: var(--accent-ink); }
.pill.st-done { background: #ebfbee; color: #2b8a3e; }
.pill.st-off { background: #f1f3f5; color: var(--muted); }

.facts.totals dd { font-size: 16px; }
.address { margin: 0; line-height: 1.6; }
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.timeline li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; }
.card textarea { font: inherit; border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; resize: vertical; width: 100%; }

@media (max-width: 900px) {
  .order-row { grid-template-columns: 56px 1fr auto; row-gap: 6px; }
  .order-row .what, .order-row .when { display: none; }
  .order-rows.compact .order-row { grid-template-columns: 56px 1fr auto; }
  .timeline li { grid-template-columns: 1fr; gap: 0; }
}

/* ---- payments, escrow, payouts ---- */
.clickable { cursor: pointer; }
.clickable:hover td { background: #f8f9fa; }
code { background: #f1f3f5; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; word-break: break-all; }
.issues { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; }
.issues li.bad { color: var(--danger); }
.issues li.warn { color: #e67700; }
.how { margin: 0 0 8px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.form-grid { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.form-grid label, .withdraw-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.form-grid input, .form-grid select, .withdraw-form input { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--text, inherit); background: #fff; }
.row-end { display: flex; justify-content: flex-end; gap: 8px; }
.ok-line { color: #2b8a3e; margin: 0; font-weight: 600; }
.err-line { color: var(--danger); margin: 0; }
.balance-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.balance-line strong { font-size: 24px; letter-spacing: -.02em; }
.blockers { margin: 0 0 10px; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; color: #e67700; font-size: 13.5px; }
.withdraw-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.withdraw-form input { min-width: 220px; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 12.5px; }
@media (max-width: 760px) {
  .withdraw-form { flex-direction: column; align-items: stretch; }
  .withdraw-form input { min-width: 0; }
}

/* refunds and disputes */
.card.attention { border-color: var(--warn, #d97706); background: color-mix(in srgb, var(--warn, #d97706) 6%, var(--card, #fff)); }
.refund-form { margin-top: 12px; }
.thread { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.thread .msg { padding: 10px 12px; border-radius: 10px; background: var(--soft, #f4f4f2); max-width: 640px; }
.thread .msg.by-seller { background: color-mix(in srgb, var(--accent, #2563eb) 10%, transparent); margin-left: auto; }
.thread .msg.by-platform, .thread .msg.by-system { background: transparent; border: 1px dashed var(--line, #ddd); }
.thread .msg p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.reply textarea { width: 100%; }

/* live: the bell, the pop-ups, the light */
.bell-wrap { position: relative; }
.bell { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; margin-bottom: 6px; border-radius: 8px; background: transparent; border: 0; color: var(--side-text); font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.bell:hover { background: var(--side-2); color: #fff; }
.bell .badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 11px; text-align: center; }
.bell .live-dot { width: 8px; height: 8px; border-radius: 50%; background: #8a8f9c; flex: none; }
.bell:not(:has(.badge)) .live-dot { margin-left: auto; }
.bell .live-dot.live { background: #30c48d; box-shadow: 0 0 0 3px rgba(48,196,141,.18); }
.bell .live-dot.reconnecting, .bell .live-dot.connecting { background: #f5a524; }
.bell .live-dot.offline { background: #e5484d; }
.bell-panel { position: absolute; left: 0; top: calc(100% + 4px); z-index: 80; width: min(360px, 92vw); max-height: 70vh; overflow: auto; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.22); }
.bell-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.bell-panel .pad { padding: 14px; margin: 0; }
.bell-panel ul { list-style: none; margin: 0; padding: 0; }
.bell-panel li button { display: flex; gap: 10px; width: 100%; text-align: left; padding: 10px 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); color: inherit; font: inherit; cursor: pointer; }
.bell-panel li button:hover { background: rgba(127,127,127,.08); }
.bell-panel li.unread button { background: color-mix(in srgb, var(--accent, #12b886) 8%, transparent); }
.t-ico { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: rgba(127,127,127,.18); }
.tone-good .t-ico { background: rgba(48,196,141,.22); color: #12b886; }
.tone-warn .t-ico { background: rgba(245,165,36,.25); color: #b7791f; }
.tone-bad .t-ico { background: rgba(229,72,77,.22); color: #e5484d; }
.t-text { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.t-text small { display: block; font-size: 12px; }
.bell-wrap.compact { margin-left: auto; }
.bell-wrap.compact .bell { width: auto; margin: 0; padding: 6px 8px; color: var(--text); }
.bell-wrap.compact .bell:hover { background: rgba(127,127,127,.12); color: var(--text); }
.bell-wrap.compact .bell-panel { left: auto; right: 0; }
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; text-align: left; padding: 12px 14px; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-left: 4px solid #8a8f9c; border-radius: 10px; box-shadow: 0 10px 28px rgba(0,0,0,.25); font: inherit; cursor: pointer; animation: toast-in .2s ease; }
.toast.tone-good { border-left-color: #12b886; } .toast.tone-warn { border-left-color: #f5a524; } .toast.tone-bad { border-left-color: #e5484d; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the sidebar scrolls, which would clip a panel inside it, so the panel floats over the page instead */
.bell-wrap:not(.compact) .bell-panel { position: fixed; left: 256px; top: 96px; }
@media (max-width: 900px) { .bell-wrap:not(.compact) .bell-panel { left: 12px; right: 12px; width: auto; top: 90px; } }

/* ---------- analytics and customers ---------- */
.stat small.up { color: #0f9d6b; } .stat small.down { color: #d6336c; }
.live-now { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; color: #0f9d6b; font-weight: 600; }
.live-now i { width: 8px; height: 8px; border-radius: 50%; background: #12b886; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; transform: scale(.8); } }
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 11px; }
.chart .line { stroke: var(--accent); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.chart .dot { fill: var(--panel); stroke: var(--accent); stroke-width: 2; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
.two-col > .card, .three-col > .card { margin: 0; min-width: 0; }
.bars, .funnel { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bars li, .funnel li { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; column-gap: 10px; row-gap: 2px; align-items: center; font-size: 13px; }
.bars li small, .funnel li small { grid-column: 2 / 4; margin-top: -2px; }
.bars li small { display: none; }
.bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { height: 10px; background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; overflow: hidden; }
.bar-track i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 12px; }
.toolbar .search { flex: 1; min-width: 180px; margin: 0; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 10px; }
.pager span { margin-right: auto; }
ul.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
tr.clickable { cursor: pointer; } tr.clickable:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
@media (max-width: 900px) { .two-col, .three-col { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .bars li, .funnel li { grid-template-columns: minmax(70px, 30%) 1fr auto; } .toolbar .seg { width: 100%; } }