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

/* Chat: a plain messenger. ui.css + shell.css come first (colours, buttons, inputs, pills, notes). */
.chat-app { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.top nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.top nav a { text-decoration: none; font-weight: 500; }
.top-brand { display: flex; align-items: center; gap: 6px; min-width: 0; }
.top-brand .for { font-size: 12px; color: var(--muted); }
.top .who { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
main.narrow { width: 100%; max-width: 760px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; }
main.narrow h1 { margin: 0; font-size: 24px; }
main.narrow h1, .card h2, .chat-head h1 { font-family: var(--pd-font-brand); letter-spacing: -.02em; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.card h2 { margin: 0; font-size: 17px; }
.row { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.row input { flex: 1; min-width: 160px; }
.row label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); flex: 1; min-width: 160px; }
.info-note { background: var(--accent-soft); color: var(--accent-ink); }
.err { color: var(--danger); }

/* lists */
.chat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chat-list a { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--line); color: var(--text); text-decoration: none; }
.chat-list a:hover { border-color: #c5cad6; }
.chat-list li.on a { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.chat-list .row-top { display: flex; justify-content: space-between; gap: 8px; }
.chat-list .tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chat-list .pill { margin-left: 4px; }

/* a conversation */
.chat-page { gap: 12px; }
.chat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chat-head h1, .chat-head h2 { margin: 0; }
.thread-box { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-height: 320px; }
.messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; max-height: 60vh; }
.messages .empty { text-align: center; padding: 30px 0; }
.m { display: flex; flex-direction: column; gap: 3px; max-width: 80%; align-self: flex-start; }
.m.mine { align-self: flex-end; align-items: flex-end; }
.m.event, .m.m-system { align-self: center; max-width: 100%; text-align: center; color: var(--muted); font-size: 12.5px; }
.m .who { font-size: 11.5px; color: var(--muted); }
.m .body { padding: 9px 13px; border-radius: 16px; background: #f1f3f5; white-space: pre-wrap; overflow-wrap: anywhere; }
.m.mine .body { background: var(--accent); color: #fff; }
.m.event .body, .m.m-system .body { background: none; padding: 2px 0; }
.compose { display: flex; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; }

/* offers */
.offer { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; min-width: 260px; text-align: left; }
.offer.in-play { border-color: var(--accent); }
.offer[data-status='accepted'] { border-color: #2b8a3e; }
.offer[data-status='void'], .offer[data-status='declined'], .offer[data-status='withdrawn'], .offer[data-status='countered'], .offer[data-status='superseded'] { opacity: .65; }
.offer-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.offer-what { display: flex; gap: 10px; align-items: flex-start; }
.offer-what img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; background: #f1f3f5; }
.offer-price { font-size: 19px; font-weight: 700; }
.offer-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.counter-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.counter-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.counter-form input { width: 12ch; }
.offer-box .total { padding-bottom: 10px; }

/* the store's inbox */
.inbox { display: grid; grid-template-columns: 340px 1fr; gap: 16px; padding: 16px; flex: 1; min-height: 0; box-sizing: border-box; }
.inbox-list { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.inbox-chat { min-width: 0; }
.inbox-chat .pick { text-align: center; padding: 60px 0; }
.conversation { display: flex; flex-direction: column; gap: 10px; }
.back-mobile { display: none; }
@media (max-width: 860px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox.has-chat .inbox-list { display: none; }
  .inbox:not(.has-chat) .inbox-chat { display: none; }
  .back-mobile { display: inline-block; }
  .top .who { display: none; }
  .m { max-width: 92%; }
}