/* 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; }
}

/* products */
.products { display: flex; flex-direction: column; gap: 12px; }
.products-toolbar { display: flex; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.product-rows { display: flex; flex-direction: column; gap: 8px; }
.product-row { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.product-row.open { border-color: #c5cad6; }
.product-sum { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 10px 14px; text-align: left; border-radius: 12px; }
.product-sum .grow { display: flex; flex-direction: column; }
.product-sum .grow b { display: inline; margin-right: 8px; }
.product-sum .pill { align-self: flex-start; margin-top: 2px; }
.thumb-md { width: 48px; height: 48px; flex: none; border-radius: 8px; background: #f1f3f5 center / cover no-repeat; border: 1px solid var(--line); }
.cell { width: 130px; text-align: right; font-size: 13px; } .cell.out { color: var(--danger); } .cell.low { color: #e67700; }
.product-editor { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label, .field-label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 500; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 13px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.subsection { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.subsection h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; }
label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 400; font-size: 13px; }
label.check input { width: auto; }
.option-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 8px; align-items: center; }
.row-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
button.small-btn { padding: 6px 12px; font-size: 13px; }
table.variants { width: 100%; border-collapse: collapse; font-size: 13px; }
table.variants th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px; }
table.variants td { padding: 4px 6px; border-top: 1px solid var(--line); }
table.variants input { padding: 6px 8px; }
.color-row { display: flex; gap: 6px; } .color-row input[type=color] { width: 44px; padding: 2px; }
.images-field { display: flex; flex-wrap: wrap; gap: 8px; }
.image-chip { position: relative; width: 84px; height: 84px; border-radius: 10px; background: #f1f3f5 center / cover no-repeat; border: 1px solid var(--line); }
.image-chip:first-child { outline: 2px solid var(--accent); outline-offset: 1px; }
.image-chip button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 99px; font-size: 11px;
  background: rgba(0,0,0,.6); color: #fff; }
.image-chip button:first-child:not(:last-child) { right: auto; left: 4px; }
.image-add { width: 84px; height: 84px; border: 1.5px dashed #c5cad6; border-radius: 10px; background: none; color: var(--accent); font-size: 12.5px; }
.new-product h3 { margin: 0; }
/* fields editor */
.fields-editor { display: flex; flex-direction: column; gap: 10px; }
.field-list { display: flex; flex-direction: column; gap: 6px; }
.field-item { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.field-item.open { border-color: #c5cad6; }
.field-item > .form { padding: 0 12px 12px; }
.field-sum { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 10px 12px; text-align: left; }
input.invalid { border-color: var(--danger); }
/* settings */
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.type-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; text-align: left; }
.type-card.on { border-color: var(--accent); background: #f5f7ff; }
.type-card small { color: #2b8a3e; font-weight: 600; }
.type-icon { font-size: 22px; }
.danger-btn { color: var(--danger); border-color: #ffc9c9; }
@media (max-width: 900px) {
  .grid3 { grid-template-columns: 1fr 1fr; }
  .product-sum .cell.muted { display: none; }
  .cell { width: auto; }
  .option-row { grid-template-columns: 1fr 1fr auto; }
}

/* ---- demo / live ---- */
.mode-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; font-size: 13px; }
.mode-bar.demo { background: #fff9db; color: #856404; border: 1px solid #ffe8a3; }
.mode-bar.live { background: #ebfbee; color: #2b8a3e; border: 1px solid #b2f2bb; }
.mode-bar .seg { display: inline-flex; border: 1px solid rgba(0,0,0,.15); border-radius: 8px; overflow: hidden; background: #fff; }
.mode-bar .seg button { border: 0; border-radius: 0; padding: 6px 14px; background: transparent; color: var(--text); }
.mode-bar .seg button.on { background: var(--accent); color: #fff; font-weight: 600; }
.mode-text { flex: 1; min-width: 200px; }
.radios { border: 0; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 6px; }
.modal.small { width: min(480px, 100%); display: flex; flex-direction: column; gap: 10px; }
.inline-form { display: flex; gap: 8px; align-items: center; flex-direction: row; }
.inline-form input { flex: 1; min-width: 0; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.row-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.row-card > input, .row-card > select { flex: 1; min-width: 140px; }
.row-actions { display: flex; gap: 6px; margin-left: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: #f1f3f5; border-radius: 99px; padding: 6px 12px; }
.with-btn { display: flex; gap: 6px; } .with-btn input { flex: 1; min-width: 0; }
.post-editor textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; resize: vertical; }
.link-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 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; }
.type-field { border: 0; padding: 0; margin: 4px 0 0; } .type-field legend { font-size: 13px; font-weight: 500; padding: 0; margin-bottom: 6px; }

/* custom APIs */
.api-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 12px 0; }
.api-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.api-card code, .api-address { font-size: 12px; background: #f1f3f5; padding: 2px 6px; border-radius: 6px; word-break: break-all; }
.api-builder { margin: 12px 0; padding: 16px; }
.api-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; }
@media (max-width: 860px) { .api-grid { grid-template-columns: 1fr; } }
.api-form { display: flex; flex-direction: column; gap: 14px; }
.api-form fieldset { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.api-form legend { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 4px; }
.api-group { display: flex; flex-direction: column; gap: 6px; }
.row { display: flex; gap: 8px; align-items: center; } .row.wrap { flex-wrap: wrap; }
.api-picklist, .api-products { max-height: 240px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.api-picked { display: flex; flex-direction: column; gap: 4px; }
.api-preview { background: #f8f9fa; border: 1px solid var(--line); border-radius: 10px; padding: 12px; align-self: start; position: sticky; top: 12px; }
ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 6px 10px; border-top: 1px solid var(--line); display: flex; gap: 8px; align-items: center; }
ul.plain li:first-child { border-top: 0; }
.chip.on { background: #d0ebff; color: #1864ab; }
button.chip { border: 0; cursor: pointer; }
.at-input .at { display: flex; gap: 6px; align-items: center; }
.danger { color: var(--danger); }

/* moving demo products to live */
.product-head { display: flex; align-items: center; padding-left: 12px; }
.product-head .product-sum { flex: 1; min-width: 0; }
.select-all { font-size: 13px; padding-left: 4px; }