/* AUTO-EXTRACTED from design/backoffice.html — do NOT hand-edit deck section. */
/* See CLAUDE.md §8 (Porting design/*.html → Django templates). */

/* ═══ ICON SYSTEM · canonical from brand-guide.html ═══ */
.ic {
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.ic .d {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
}
.ic .dot { position: absolute; border-radius: 50%; }
.ic.primary { background: var(--ink); border-radius: 0; }
.ic.primary .d { color: var(--accent); }
.ic.primary .dot { background: var(--accent); }
.ic.accent { background: var(--accent); border-radius: 0; }
.ic.accent .d { color: var(--paper); }
.ic.accent .dot { background: var(--paper); }
.ic.cream { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 0; }
.ic.cream .d { color: var(--ink); }
.ic.cream .dot { background: var(--accent); }

.ic-48 { width: 48px; height: 48px; }
.ic-48 .d { font-size: 32px; }
.ic-48 .dot { width: 4px; height: 4px; bottom: 9px; right: 9px; }
.ic-32 { width: 32px; height: 32px; }
.ic-32 .d { font-size: 22px; }
.ic-32 .dot { display: none; }
.ic-16 { width: 16px; height: 16px; }
.ic-16 .d { font-size: 12px; }
.ic-16 .dot { display: none; }

:root {
  /* Palette · Thai Craft Modern — canonical per design/brand-guide.html.
     CLAUDE.md §0: brand-guide is supreme authority on tokens; deck and other
     screen decks defer when values disagree. Edit only when brand-guide changes. */
  --white:        #FFFFFF;
  --paper:        #F6F1E7;
  --paper-1:      #FDFCF8;
  --paper-2:      #FBF7EF;
  --paper-3:      #ECE4D2;
  --input-bg:     #FFFEF7;
  --ink:          #1B2A3A;
  --ink-2:        #2D3D50;
  --mid:          #6B7785;
  --mid-2:        #A5ACB5;
  --border:       #E5DDC9;
  --border-2:     #EFE8D7;

  --accent:       #C8501F;    /* persimmon */
  --accent-soft:  #F4E2D3;
  --accent-deep:  #9C3F18;

  --ai:           #7B8F6B;    /* sage — only for เอไอ surfaces */
  --ai-soft:      #E8EEDF;
  --ai-deep:      #5A6D4D;

  --good:         #4A6B40;
  --good-soft:    #E1EAD9;
  --warn:         #B45A3C;
  --warn-soft:    #F4DCD0;
  --danger:       #A8392F;
  --danger-soft:  #F0D5D0;

  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --radius-ic: 22.37%;   /* only for .ic letter-mark squircle */

  --shadow-1: 0 1px 0 rgba(27,42,58,.04), 0 1px 2px rgba(27,42,58,.05);
  --shadow-2: 0 4px 12px rgba(27,42,58,.08), 0 1px 2px rgba(27,42,58,.04);
  --shadow-3: 0 24px 48px rgba(27,42,58,.12), 0 4px 12px rgba(27,42,58,.06);

  --line-green:   #06C755;

  --font-sans:    'IBM Plex Sans Thai', 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Fraunces', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Subtle paper grain */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 9999;
  opacity: .8;
}

/* ─── ICON SYSTEM ──────────────────────────────────────── */
.ico {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
  stroke-width: 1.5;
}
.ico-sm { width: 12px; height: 12px; vertical-align: -2px; }
.ico-md { width: 18px; height: 18px; vertical-align: -4px; }
.ico-lg { width: 22px; height: 22px; }
.ico-xl { width: 32px; height: 32px; }

/* ─── DECK CHROME ───────────────────────────────────────── */
.deck-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.deck-brand {
  display: flex; align-items: center; gap: 12px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.deck-brand .mark {
  width: 28px; height: 28px;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  border-radius: 0;
  position: relative;
}
.deck-brand .mark::after {
  content: '';
  position: absolute;
  bottom: -3px; right: -3px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 0;
}
.deck-brand .name {
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.deck-brand .name em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.deck-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.deck-toc {
  position: sticky; top: 57px; z-index: 49;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 32px;
  display: flex; gap: 4px; align-items: center;
  overflow-x: auto;
}
.toc-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-right: 12px;
}
.toc-link {
  font-size: 12px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 0;
  white-space: nowrap;
}
.toc-link:hover { background: var(--paper-3); }

.frame-wrapper {
  padding: 56px 32px 72px;
  max-width: 1480px;
  margin: 0 auto;
}
.frame-label {
  display: flex; align-items: baseline; gap: 16px;
  margin-bottom: 24px;
}
.frame-label .id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
}
.frame-label .title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.frame-label .title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.frame-label .desc {
  color: var(--mid);
  font-size: 13px;
  margin-left: auto;
  max-width: 480px;
  text-align: right;
}

.frame {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  box-shadow: var(--shadow-3);
}

.frame-mobile-wrap {
  display: flex; gap: 48px;
  align-items: flex-start;
}
.frame-mobile {
  width: 390px;
  height: 800px;
  background: var(--paper-2);
  border: 8px solid var(--ink);
  border-radius: 0;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: var(--shadow-3);
}
.frame-mobile::before {
  content: '';
  position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: var(--ink);
  border-radius: 0;
  z-index: 10;
}
.mobile-content {
  height: 100%;
  overflow-y: auto;
  padding-top: 44px;
}

/* ─── APP CHROME (common across desktop screens) ───────── */
.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  height: 880px;
  font-size: 13px;
}
.app-sidebar {
  background: var(--ink);
  color: rgba(246,241,231,.85);
  padding: 18px 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ink-2);
}
.sb-brand {
  padding: 0 20px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 12px;
}

/* === BRAND v4 · "salesdee." with accent period · 2026-05-14 === */



/* Generic mark · used outside sidebar (onboarding, header, footers, etc.) */

.onb-top .brand .mark,

.onb-top .brand .mark::after,





.sb-brand .mark 
.sb-brand .mark span::after {
  content: '.';
  color: var(--accent);
  font-weight: 800;
}

.sb-brand .name .dot,
.sb-brand .name .tld { display: none; }




.sb-brand .name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--paper);
  line-height: 1;
}
.sb-brand .name .dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.04em;
  vertical-align: 0.05em;
}

.sb-section-label {
  padding: 18px 20px 6px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(246,241,231,.4);
}
.sb-item {
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  color: rgba(246,241,231,.75);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.sb-item:hover { background: rgba(255,255,255,.04); }
.sb-item.active {
  background: rgba(255,255,255,.05);
  color: rgba(246,241,231,1);
  border-left-color: var(--accent);
  font-weight: 500;
}
.sb-item .icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .9;
  color: currentColor;
  position: relative;  /* anchor for the floating notif badge */
}
.sb-item .icon svg { width: 16px; height: 16px; }
.sb-item .icon .badge {
  position: absolute;
  top: -6px; right: -10px;
  background: var(--accent);
  color: var(--paper);
  font-size: 9.5px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  padding: 0 4px;
  min-width: 16px;
  height: 14px;
  line-height: 14px;
  border-radius: 0;
  text-align: center;
  border: 1.5px solid var(--ink);  /* punch through the dark sidebar */
}

.sb-bottom {
  margin-top: auto;
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
}
.sb-user {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: left;
  transition: background .12s;
}
.sb-user:hover, .sb-user.active { background: rgba(255,255,255,.06); }
.sb-user .sb-caret {
  width: 14px; height: 14px;
  color: rgba(246,241,231,.45);
  margin-left: auto;
  transition: transform .15s;
}
.sb-user .sb-caret.open { transform: rotate(180deg); }
.sb-avatar {
  width: 28px; height: 28px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 12px;
  flex-shrink: 0;
}
.sb-avatar { overflow: hidden; }
.sb-avatar > label { display: block; width: 100%; height: 100%; }
.sb-avatar img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; display: block; }
.sb-avatar .sb-avatar-default { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.sb-user-info { line-height: 1.3; flex: 1; min-width: 0; overflow: hidden; }
.sb-user-info .name { color: var(--paper); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info .role { color: rgba(246,241,231,.5); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sb-pop {
  position: absolute;
  left: 12px; right: 12px;
  bottom: calc(100% - 4px);
  background: #2a2520;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  padding: 4px;
  z-index: 50;
}
.sb-pop-head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-bottom: 4px;
}
.sb-pop-head .nm { color: var(--paper); font-size: 13px; font-weight: 500; line-height: 1.3; }
.sb-pop-head .em { color: rgba(246,241,231,.45); font-size: 11px; margin-top: 2px; word-break: break-all; }
.sb-pop-list { display: flex; flex-direction: column; }
.sb-pop-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: var(--paper);
  font: inherit;
  font-size: 13px;
  text-align: left;
  transition: background .12s;
}
.sb-pop-item:hover { background: rgba(255,255,255,.07); }
.sb-pop-item svg { width: 16px; height: 16px; color: rgba(246,241,231,.6); }
.sb-pop-item.sb-logout:hover { background: rgba(220, 60, 60, .14); color: #ffb3b3; }
.sb-pop-item.sb-logout:hover svg { color: #ff9b9b; }

.app-main {
  background: var(--paper-2);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.app-topbar {
  height: 56px;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center;
  gap: 16px;
  background: var(--paper-2);
}
.app-topbar .search {
  flex: 1; max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--mid);
  font-size: 13px;
}
.app-topbar .search kbd {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background: var(--paper-3);
  padding: 2px 5px;
  border-radius: 0;
  color: var(--mid);
}
.tb-action {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  position: relative;
  color: var(--ink-2);
}
.tb-action:hover { background: var(--paper-3); }
.tb-action .dot {
  position: absolute; top: 7px; right: 8px;
  width: 7px; height: 7px;
  background: var(--accent);
  border: 1.5px solid var(--paper-2);
  border-radius: 50%;
}
.tb-cta {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 7px 14px;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}

.app-body {
  flex: 1;
  overflow: hidden;
  display: flex;
}

/* ─── COMMON UI PRIMITIVES ─────────────────────────────── */
.btn {
  font-family: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 500;
  transition: all .12s;
}
.btn:hover { border-color: var(--mid-2); }
.btn-primary {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.btn-primary:hover { background: var(--ink-2); }
.btn-accent {
  background: var(--accent); color: var(--paper); border-color: var(--accent);
}
.btn-accent:hover { background: var(--accent-deep); }
.btn-ghost {
  background: transparent; border-color: transparent;
}
.btn-ghost:hover { background: var(--paper-3); }
.btn-sm { padding: 4px 10px; font-size: 12px; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.chip-accent { background: var(--accent-soft); color: var(--accent-deep); border-color: transparent; }
.chip-ai { background: var(--ai-soft); color: var(--ai-deep); border-color: transparent; }
.chip-good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.chip-warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.chip-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.h2 { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.h3 { font-size: 15px; font-weight: 600; }

.mono {
  font-family: 'IBM Plex Mono', monospace;
}
.serif-it {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}

.divider { height: 1px; background: var(--border); margin: 16px 0; }
.divider-v { width: 1px; background: var(--border); align-self: stretch; }

.thumb {
  border-radius: 0;
  background: linear-gradient(135deg, var(--paper-3), var(--border));
  display: grid; place-items: center;
  color: var(--mid);
  position: relative;
  overflow: hidden;
}

/* ─── BRAND COVER ───────────────────────────────────────── */
.cover {
  background: var(--paper-2);
  padding: 80px 64px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cover::before {
  content: '';
  position: absolute;
  right: -120px; top: -120px;
  width: 400px; height: 400px;
  background: var(--accent);
  opacity: .06;
  border-radius: 50%;
  filter: blur(40px);
}
.cover-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.cover-wordmark {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 130px;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-transform: lowercase;
  line-height: 0.95;
  color: var(--ink);
  margin-bottom: 24px;
}
.cover-wordmark em {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.cover-wordmark .dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.04em;
  vertical-align: 0.05em;
}
.cover-tagline {
  font-size: 22px;
  line-height: 1.4;
  color: var(--ink-2);
  max-width: 540px;
  margin-bottom: 32px;
  font-weight: 300;
}
.cover-tagline strong { color: var(--ink); font-weight: 600; }
.cover-meta {
  display: flex; gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  max-width: 540px;
}
.cover-meta-item .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.cover-meta-item .val {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}

.cover-tokens {
  display: grid;
  gap: 24px;
}
.token-swatch {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
}
.token-swatch .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}
.token-colors {
  display: flex; gap: 8px;
  margin-bottom: 10px;
}
.token-colors > div {
  width: 36px; height: 36px;
  border-radius: 0;
  border: 1px solid var(--border);
}
.token-fonts .ex {
  font-size: 22px;
  margin-bottom: 4px;
}
.token-fonts .name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}

/* ============================================================
   D1 · DASHBOARD
   ============================================================ */
.d-page {
  flex: 1; overflow-y: auto;
  padding: 28px 32px;
}
.d-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 28px;
}
.d-hero .greet {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 28px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.d-hero .greet .name { font-style: normal; font-family: 'IBM Plex Sans Thai', sans-serif; }
.d-hero .date {
  text-align: right;
}
.d-hero .date .mono {
  font-size: 13px;
  color: var(--mid);
}
.d-hero .date .day {
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
}

.d-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}
.card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 20px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.card-head .title {
  font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}

.kpi-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.kpi {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.kpi .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}
.kpi .value {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
}
.kpi .delta {
  font-size: 12px;
  margin-top: 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.kpi .delta.up { color: var(--good); }
.kpi .delta.down { color: var(--danger); }
.kpi.accent {
  background: linear-gradient(135deg, var(--accent-soft), var(--paper-2));
  border-color: var(--accent-soft);
}
.kpi.accent .value { color: var(--accent-deep); }

.pipe-mini {
  display: flex; gap: 4px;
  margin-bottom: 8px;
  height: 6px;
}
.pipe-seg {
  flex: 1;
  background: var(--paper-3);
  border-radius: 0;
  position: relative;
}
.pipe-seg.fill { background: var(--ink); }
.pipe-seg.fill.accent { background: var(--accent); }
.pipe-legend {
  display: flex; justify-content: space-between;
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 16px;
}

.pipeline-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pf-col {
  background: var(--paper);
  padding: 14px;
  text-align: center;
}
.pf-col .num {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.pf-col .label {
  font-size: 11px;
  color: var(--mid);
  margin-top: 2px;
}
.pf-col .value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 6px;
}

.task-list {
  display: flex; flex-direction: column; gap: 0;
}
.task-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.task-row:last-child { border-bottom: none; }
.task-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  flex-shrink: 0;
}
.task-row.overdue .task-check { border-color: var(--danger); }
.task-row.overdue .task-when { color: var(--danger); }
.task-body { flex: 1; }
.task-title {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.task-meta {
  font-size: 11px;
  color: var(--mid);
  display: flex; gap: 10px;
}
.task-when {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  font-weight: 500;
}

.ai-digest {
  background: var(--ai-soft);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 20px;
}
.ai-digest .head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.ai-digest .head .icon {
  width: 24px; height: 24px;
  background: var(--ai);
  color: var(--paper-2);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
}
.ai-digest .head .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-deep);
}
.ai-digest p {
  font-size: 13px;
  color: var(--ai-deep);
  line-height: 1.6;
  margin-bottom: 10px;
}
.ai-digest .actions {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.ai-action {
  background: var(--paper-2);
  border: 1px solid var(--ai);
  color: var(--ai-deep);
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 0;
  cursor: pointer;
}
.ai-action:hover { background: var(--ai); color: var(--paper-2); }

.quote-list-mini {
  display: flex; flex-direction: column;
}
.qlm-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
}
.qlm-row:last-child { border-bottom: none; }
.qlm-row:hover { background: var(--paper); margin: 0 -8px; padding: 12px 8px; }
.qlm-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  width: 100px;
  flex-shrink: 0;
}
.qlm-body { flex: 1; min-width: 0; }
.qlm-cust { font-size: 13px; color: var(--ink); margin-bottom: 1px; }
.qlm-detail { font-size: 11px; color: var(--mid); }
.qlm-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.qlm-stat {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 0;
}

/* ============================================================
   I2 · INBOX (chat + เอไอ reply suggest)
   ============================================================ */
.inbox {
  display: grid;
  grid-template-columns: 280px 1fr 340px;
  height: 100%;
  flex: 1;
  background: var(--paper-2);
  overflow: hidden;
}
.inbox-list {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  background: var(--paper);
}
.il-header {
  padding: 16px;
  border-bottom: 1px solid var(--border);
}
.il-header .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 12px;
}
.il-filters {
  display: flex; gap: 4px;
  font-size: 11px;
}
.il-filter {
  padding: 3px 8px;
  border-radius: 0;
  background: var(--paper-3);
  color: var(--mid);
  cursor: pointer;
}
.il-filter.active { background: var(--ink); color: var(--paper); }

.il-rows { flex: 1; overflow-y: auto; }
.il-row {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-2);
  display: flex; gap: 12px;
  cursor: pointer;
  position: relative;
}
.il-row:hover { background: var(--paper-2); }
.il-row.active {
  background: var(--paper-2);
}
.il-row.active::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--accent);
}
.il-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  display: grid; place-items: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  flex-shrink: 0;
  position: relative;
}
.il-avatar .ch {
  position: absolute; bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  background: #06C755;
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 8px;
  font-weight: 700;
  color: white;
}
.il-content { flex: 1; min-width: 0; }
.il-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.il-name { font-size: 13px; font-weight: 600; color: var(--ink); }
.il-time { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--mid); }
.il-msg {
  font-size: 12px;
  color: var(--mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.il-row.unread .il-name { font-weight: 700; }
.il-row.unread .il-msg { color: var(--ink-2); font-weight: 500; }
.il-row.unread::after {
  content: '';
  position: absolute; right: 16px; top: 18px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
}

/* Chat middle */
.chat {
  display: flex; flex-direction: column;
  background: var(--paper-2);
}
.chat-header {
  padding: 14px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.chat-header .cust {
  flex: 1;
}
.chat-header .cust .name {
  font-weight: 600;
  font-size: 14px;
}
.chat-header .cust .meta {
  font-size: 11px;
  color: var(--mid);
  display: flex; gap: 10px;
}
.chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--paper);
}
.bubble-day {
  text-align: center;
  font-size: 11px;
  color: var(--mid);
  margin: 12px 0 8px;
  font-family: 'IBM Plex Mono', monospace;
}
.bubble {
  max-width: 70%;
  padding: 9px 13px;
  border-radius: 0;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 2px;
  position: relative;
}
.bubble.in {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-bottom-left-radius: 4px;
}
.bubble.out {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.bubble.selected {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bubble .check {
  position: absolute; top: -6px; left: -6px;
  width: 18px; height: 18px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
}
.bubble-time {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  align-self: flex-end;
  margin: -2px 4px 6px;
}
.bubble.out + .bubble-time { align-self: flex-end; }
.bubble.in + .bubble-time { align-self: flex-start; }

.chat-tools {
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 8px 24px;
  display: flex; align-items: center; gap: 8px;
}
.chat-tools .selected-count {
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 4px 10px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
}
.chat-tools .btn-mk-quote {
  margin-left: auto;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-weight: 600;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 0;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
}

.chat-input {
  padding: 12px 24px 18px;
  background: var(--input-bg);
  border-top: 1px solid var(--border);
}
.chat-input-box {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--mid);
}
.chat-input-box .actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-2);
}

/* เอไอ panel */
.ai-panel {
  background: var(--paper);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  position: relative;
}
.ai-panel::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--ai) 0%, transparent 100%);
}
.ai-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
}
.ai-head .icon {
  width: 28px; height: 28px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
}
.ai-head .title {
  font-weight: 600;
  font-size: 13px;
  color: var(--ai-deep);
}
.ai-head .sub {
  font-size: 11px;
  color: var(--mid);
}
.ai-section {
  padding: 16px;
  border-bottom: 1px solid var(--border-2);
}
.ai-section-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.ai-tone-pills {
  display: flex; gap: 4px;
  margin-bottom: 12px;
}
.ai-tone {
  flex: 1;
  text-align: center;
  font-size: 11px;
  padding: 4px 0;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--mid);
  cursor: pointer;
}
.ai-tone.active {
  background: var(--ai-soft);
  border-color: var(--ai);
  color: var(--ai-deep);
  font-weight: 600;
}

.ai-suggest {
  border: 1px solid var(--border);
  background: var(--paper-2);
  border-radius: 0;
  padding: 12px;
  margin-bottom: 8px;
  position: relative;
}
.ai-suggest.featured {
  border-color: var(--ai);
  background: var(--ai-soft);
}
.ai-suggest-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.ai-suggest.featured .ai-suggest-label { color: var(--ai-deep); }
.ai-suggest-text {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 10px;
}
.ai-suggest-actions {
  display: flex; gap: 6px;
}
.ai-use {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 0;
  border: none;
  background: var(--ai);
  color: var(--paper);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}
.ai-link {
  font-size: 11px;
  padding: 4px 6px;
  color: var(--ai-deep);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.ai-refresh {
  display: flex; gap: 6px;
  font-size: 11px;
  color: var(--ai-deep);
}
.ai-refresh button {
  background: transparent;
  border: 1px dashed var(--mid-2);
  color: var(--mid);
  font-family: inherit;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 0;
  cursor: pointer;
}

.lead-extracted {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px;
}
.lead-row {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 0;
  font-size: 12px;
}
.lead-row .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  width: 70px;
}
.lead-row .val { color: var(--ink-2); }

/* ============================================================
   เอไอ-2 · QUOTE-FROM-CHAT MODAL
   ============================================================ */
.modal-frame {
  background: rgba(27,42,58,.45);
  padding: 40px;
  position: relative;
}
.modal {
  background: var(--paper-2);
  border-radius: 0;
  max-width: 780px;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: var(--shadow-3);
  border: 1px solid var(--border);
}
.modal-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  background: linear-gradient(180deg, var(--ai-soft) 0%, var(--paper-2) 100%);
}
.modal-head .icon {
  width: 36px; height: 36px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  margin-right: 14px;
}
.modal-head .title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.modal-head .sub {
  font-size: 12px;
  color: var(--mid);
}
.modal-close {
  margin-left: auto;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  color: var(--mid);
}
.modal-body { padding: 24px; }

.qfc-meta {
  display: flex; gap: 20px;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 24px;
}
.qfc-meta-item {
  font-size: 12px;
}
.qfc-meta-item .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 2px;
}
.qfc-meta-item .val { color: var(--ink); font-weight: 500; }

.qfc-group {
  margin-bottom: 16px;
}
.qfc-group-head {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.qfc-group-head .icon {
  width: 20px; height: 20px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 0;
  display: grid; place-items: center;
  font-size: 11px;
}

.qfc-item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
  display: flex; gap: 12px;
  align-items: center;
  margin-bottom: 6px;
}
.qfc-item-thumb {
  width: 44px; height: 44px;
  border-radius: 0;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--mid);
}
.qfc-item-body { flex: 1; }
.qfc-item-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.qfc-item-desc {
  font-size: 11px;
  color: var(--mid);
}
.qfc-item-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}
.qfc-item-note {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--warn);
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--warn-soft);
  border-radius: 0;
}

.qfc-total {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
  margin-top: 20px;
}
.qfc-total-row {
  display: flex; justify-content: space-between;
  font-size: 13px;
  padding: 3px 0;
}
.qfc-total-row.bold { font-weight: 600; }
.qfc-total-row .label { color: var(--mid); }
.qfc-total-row .val { font-family: 'IBM Plex Mono', monospace; }
.qfc-warning {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 0;
  font-size: 11px;
  display: flex; align-items: center; gap: 6px;
}

.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  background: var(--paper);
}

/* ============================================================
   Q2 · QUOTE BUILDER
   ============================================================ */


.qb-side {
  background: var(--paper-2);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  overflow-y: auto;
}
.qb-side-title {
  padding: 0 20px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--border);
}
.qb-nav {
  padding: 8px 0;
}
.qb-nav-item:hover { background: var(--paper-3); }
.qb-nav-item.active {
  background: var(--paper-3);
  border-left-color: var(--accent);
  font-weight: 500;
  color: var(--ink);
}
.qb-nav-item .qbn-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

.qb-status {
  margin: 20px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
}
.qb-status .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.qb-status-flow {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
}
.qb-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.qb-status-dot.done { background: var(--good); }
.qb-status-dot.active { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.qb-status-line {
  flex: 1; height: 1px;
  background: var(--border);
}
.qb-status-line.done { background: var(--good); }
.qb-status .now {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}



.qb-tb-back {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  color: var(--ink-2);
}
.qb-tb-back:hover { background: var(--paper-3); }
.qb-tb-title {
  font-weight: 600;
  font-size: 14px;
}
.qb-tb-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  padding: 2px 8px;
  background: var(--paper-3);
  border-radius: 0;
}
.qb-tb-save {
  font-size: 11px;
  color: var(--good);
  display: flex; align-items: center; gap: 4px;
}
.qb-tb-actions {
  margin-left: auto;
  display: flex; gap: 6px;
  align-items: center;
}

.qb-content {
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
}



.qb-section-label::before {
  content: '';
  width: 16px; height: 1px; background: var(--accent);
}

.qb-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
}
.qb-field {
  display: flex; flex-direction: column; gap: 4px;
}
.qb-field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.qb-field-value {
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px dashed var(--border);
  padding: 4px 0;
}
.qb-field-value.bold { font-weight: 600; }

.qb-group {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.qb-group-bar {
  background: var(--paper-3);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.qb-drag {
  color: var(--mid-2);
  cursor: grab;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}
.qb-group-icon {
  width: 22px; height: 22px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 0;
  display: grid; place-items: center;
  font-size: 12px;
}
.qb-group-name {
  font-weight: 600;
  font-size: 13px;
}
.qb-group-sub {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.qb-group-menu {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  color: var(--mid);
}
.qb-group-menu:hover { background: var(--border); }

.qb-line {
  padding: 14px;
  border-bottom: 1px solid var(--border-2);
  display: grid;
  grid-template-columns: 14px 100px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}
.qb-line:last-child { border-bottom: none; }
.qb-line:hover { background: var(--paper); }
.qb-line-drag {
  color: var(--mid-2);
  font-family: 'IBM Plex Mono', monospace;
  cursor: grab;
  padding-top: 6px;
}
.qb-line-thumbs {
  display: grid;
  grid-template-columns: 44px 44px;
  gap: 4px;
  width: 92px;
}
.qb-line-thumb {
  width: 44px; height: 44px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--paper-3), var(--border));
  display: grid; place-items: center;
  position: relative;
  color: var(--mid-2);
}
.qb-line-thumb.more {
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--mid);
}
.qb-line-body {
  min-width: 0;
}
.qb-line-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-line-spec {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 8px;
}
.qb-line-options {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper-3);
  border-radius: 0;
  font-size: 12px;
}
.qb-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
}
.qb-opt.checked { color: var(--ink); font-weight: 500; }
.qb-opt-box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.qb-opt.checked .qb-opt-box {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
}
.qb-opt-label { flex: 1; }
.qb-opt-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-line-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}
.qb-line-meta .field {
  display: inline-flex; align-items: center; gap: 4px;
}
.qb-line-meta .field .label { color: var(--mid); font-size: 11px; }
.qb-line-meta .field .val {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: var(--ink);
}
.qb-line-right {
  text-align: right;
}
.qb-line-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.qb-line-actions {
  display: flex; gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
  color: var(--mid);
}
.qb-line-margin {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.qb-line-margin .lock { color: var(--mid-2); }

.qb-add-line {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  border-top: 1px dashed var(--border);
  background: var(--paper-2);
}
.qb-add-line:hover { background: var(--paper); color: var(--ink); }

.qb-add-group {
  margin: 8px 0 24px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 0;
  text-align: center;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
}
.qb-add-group:hover {
  background: var(--paper-2);
  border-color: var(--mid-2);
  color: var(--ink);
}

.qb-summary {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 20px;
}
.qb-sum-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 13px;
}
.qb-sum-row.total {
  border-top: 2px solid var(--ink);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 17px;
  font-weight: 600;
}
.qb-sum-row .label { color: var(--mid); }
.qb-sum-row.total .label { color: var(--ink); }
.qb-sum-row .val {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}
.qb-sum-info {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--mid);
}
.qb-sum-info-row {
  display: flex; justify-content: space-between;
  padding: 2px 0;
}
.qb-bahttext {
  margin-top: 14px;
  padding: 12px;
  background: var(--paper-3);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
}
.qb-bahttext .label {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  display: block;
  margin-bottom: 4px;
}

.qb-pay-table {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.qb-pay-row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 130px 1fr;
  padding: 10px 14px;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid var(--border-2);
}
.qb-pay-row:last-child { border-bottom: none; }
.qb-pay-row.head {
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}
.qb-pay-no {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid);
  font-weight: 500;
}
.qb-pay-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: var(--ink);
}
.qb-pay-pct {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-2);
}

/* QB เอไอ panel right side */
.qb-ai {
  background: var(--paper);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.qb-ai-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--ai-soft) 0%, var(--paper) 100%);
}
.qb-ai-head .icon {
  width: 26px; height: 26px;
  background: var(--ai); color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
}
.qb-ai-head .title { font-weight: 600; font-size: 13px; color: var(--ai-deep); }

.qb-check {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
  display: flex; gap: 10px;
}
.qb-check-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
}
.qb-check-icon.err { background: var(--danger); }
.qb-check-icon.warn { background: var(--warn); }
.qb-check-icon.info { background: var(--mid); }
.qb-check-body { flex: 1; }
.qb-check-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-check-desc {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 6px;
}
.qb-check-actions {
  display: flex; gap: 4px;
}
.qb-check-actions button {
  font-size: 10px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.qb-check-actions button.primary {
  background: var(--ai);
  border-color: var(--ai);
  color: var(--paper);
}

/* ============================================================
   CF1 · CUSTOMER-FACING (mobile)
   ============================================================ */
.cf {
  height: 100%;
  background: var(--paper-2);
  display: flex; flex-direction: column;
}
.cf-topbar {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: var(--paper-2);
}
.cf-logo {
  width: 28px; height: 28px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 12px;
}
.cf-company {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}
.cf-company .sub {
  font-size: 10px;
  font-weight: 400;
  color: var(--mid);
}
.cf-dl {
  color: var(--mid);
  padding: 4px;
}

.cf-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px 100px;
}
.cf-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 6px;
}
.cf-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.05em;
  margin-bottom: 24px;
}

.cf-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 8px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}
.cf-meta-item .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 2px;
}
.cf-meta-item .val {
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}

.cf-group-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  margin-bottom: 12px;
}
.cf-group-title::before {
  content: '';
  width: 16px; height: 2px;
  background: var(--accent);
}

.cf-item {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 12px;
}
.cf-item-img {
  height: 180px;
  background: linear-gradient(135deg, var(--paper-3), var(--border));
  display: grid; place-items: center;
  color: var(--mid);
  position: relative;
}
.cf-item-img .pager {
  position: absolute;
  bottom: 12px; right: 12px;
  background: rgba(27,42,58,.8);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 0;
}
.cf-item-body { padding: 14px; }
.cf-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.cf-item-spec {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 10px;
  line-height: 1.5;
}
.cf-item-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding-top: 10px;
  border-top: 1px solid var(--border-2);
}
.cf-item-qty {
  font-size: 12px;
  color: var(--mid);
}
.cf-item-qty .v { color: var(--ink); font-weight: 500; }
.cf-item-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.cf-item-opt {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--paper-3);
  border-radius: 0;
  font-size: 11px;
  color: var(--ink-2);
  display: flex; justify-content: space-between;
}
.cf-item-opt .price { font-family: 'IBM Plex Mono', monospace; }

.cf-summary {
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  padding: 18px;
  margin: 20px 0;
}
.cf-sum-row {
  display: flex; justify-content: space-between;
  padding: 4px 0;
  font-size: 13px;
}
.cf-sum-row .label { color: rgba(246,241,231,.65); }
.cf-sum-row .val { font-family: 'IBM Plex Mono', monospace; }
.cf-sum-total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid rgba(246,241,231,.15);
  display: flex; justify-content: space-between;
  align-items: baseline;
}
.cf-sum-total .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,241,231,.5);
}
.cf-sum-total .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 24px;
  font-weight: 600;
  color: var(--accent-soft);
}

.cf-terms {
  padding: 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 20px;
}
.cf-term-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.cf-term {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 12px;
  line-height: 1.5;
}
.cf-term:last-child { margin-bottom: 0; }
.cf-term .badge {
  display: inline-block;
  padding: 1px 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-size: 11px;
  border-radius: 0;
  margin-right: 6px;
}

.cf-cta-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  box-shadow: 0 -8px 24px rgba(27,42,58,.06);
}
.cf-cta {
  flex: 1;
  padding: 13px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.cf-cta.ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink-2);
  flex: 0.7;
}
.cf-cta.accept {
  background: var(--accent);
  color: var(--paper);
  flex: 1.5;
}

/* Frame caption */
.frame-caption {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.caption-item {
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
}
.caption-item .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 4px;
}
.caption-item .title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.caption-item .desc { font-size: 12px; color: var(--mid); line-height: 1.5; }

/* ============================================================
   P1 · PUBLIC HOMEPAGE (tenant.salesdee.com)
   ============================================================ */
.pub {
  background: var(--paper);
  min-height: 1200px;
}
.pub-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(246,241,231,.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 16px 40px;
  display: flex; align-items: center; gap: 28px;
}
.pub-nav-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
  font-size: 14px;
}
.pub-nav-brand .mark {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  border-radius: 0;
}
.pub-nav-brand .name { font-size: 14px; }
.pub-nav-brand .name .sub {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 400;
  margin-top: -2px;
}
.pub-nav-links {
  display: flex; gap: 24px;
  font-size: 13px;
}
.pub-nav-link {
  color: var(--ink-2);
  text-decoration: none;
  cursor: pointer;
}
.pub-nav-link.active { color: var(--ink); font-weight: 600; }
.pub-nav-link:hover { color: var(--accent); }
.pub-nav-actions {
  margin-left: auto;
  display: flex; gap: 8px; align-items: center;
}
.pub-line-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  padding: 7px 12px;
  background: #06C755;
  color: #fff;
  border-radius: 0;
  font-weight: 600;
}
.pub-cta-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px;
  padding: 9px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  font-weight: 600;
  border: 1px solid var(--ink);
}
.pub-cta-btn.accent {
  background: var(--accent);
  border-color: var(--accent);
}

/* HERO */
.pub-hero {
  padding: 64px 40px 56px;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.pub-hero::before {
  content: '';
  position: absolute;
  left: 28%; top: -10%;
  width: 600px; height: 600px;
  background: var(--accent);
  opacity: 0.03;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.pub-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px;
}
.pub-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--accent);
}
.pub-headline {
  font-size: 64px;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.pub-headline em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  display: block;
}
.pub-tag {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 560px;
  margin-bottom: 28px;
  font-weight: 300;
}
.pub-tag strong { font-weight: 600; color: var(--ink); }

.pub-hero-cta {
  display: flex; gap: 10px; align-items: center;
  margin-bottom: 32px;
}
.pub-btn {
  padding: 13px 22px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer;
  border: 1px solid;
}
.pub-btn.primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.pub-btn.outline {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink-2);
}
.pub-btn:hover.primary { background: var(--accent-deep); }
.pub-btn:hover.outline { background: var(--ink); color: var(--paper); }

.pub-hero-stats {
  display: flex; gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  max-width: 500px;
}
.pub-stat .num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.pub-stat .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 6px;
}

.pub-hero-vis {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(135deg, #6B5A45 0%, #3D3024 100%);
  display: grid;
  place-items: center;
}
.pub-hero-vis::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.3) 100%);
}
.pub-hero-overlay {
  position: absolute;
  bottom: 24px; left: 24px; right: 24px;
  color: var(--paper);
  z-index: 2;
}
.pub-hero-overlay .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pub-hero-overlay .title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  margin-top: 4px;
}
.pub-hero-badge {
  position: absolute;
  top: 24px; right: 24px;
  background: var(--paper);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  z-index: 2;
  display: flex; align-items: center; gap: 6px;
}

/* TRUST STRIP */
.pub-trust {
  padding: 40px;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.pub-trust-label {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 20px;
}
.pub-trust-logos {
  display: flex; gap: 56px;
  align-items: center; justify-content: center;
  flex-wrap: wrap;
}
.pub-trust-logo {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--mid-2);
  letter-spacing: -0.01em;
  opacity: 0.7;
}
.pub-trust-logo.it { font-style: italic; }
.pub-trust-logo.sans {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.05em;
}
.pub-trust-logo.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  letter-spacing: -0.04em;
  font-weight: 600;
}

/* SECTION HEADER */
.pub-section {
  padding: 72px 40px;
}
.pub-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 36px;
  gap: 40px;
}
.pub-sec-head .left { max-width: 640px; }
.pub-sec-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.pub-sec-label::before {
  content: '';
  width: 20px; height: 1px; background: var(--accent);
}
.pub-sec-title {
  font-size: 36px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 12px;
}
.pub-sec-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.pub-sec-desc {
  font-size: 15px;
  color: var(--mid);
  line-height: 1.55;
  max-width: 540px;
}
.pub-sec-link {
  font-size: 13px;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--ink-2);
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.pub-sec-link:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* CATEGORIES */
.pub-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pub-cat {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 24px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  min-height: 160px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.pub-cat:hover {
  background: var(--paper);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.pub-cat-thumb {
  width: 48px; height: 48px;
  background: var(--paper-3);
  border-radius: 0;
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 12px;
}
.pub-cat-thumb svg { width: 26px; height: 26px; }
.pub-cat-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.pub-cat-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}
.pub-cat-arrow {
  position: absolute;
  bottom: 16px; right: 16px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper-3);
  display: grid; place-items: center;
  color: var(--ink-2);
  transition: all .15s;
}
.pub-cat:hover .pub-cat-arrow {
  background: var(--accent);
  color: var(--paper);
}

/* PRODUCTS */
.pub-filter-row {
  display: flex; gap: 6px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pub-filter-chip {
  font-size: 12px;
  padding: 7px 14px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.pub-filter-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}

.pub-products {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.pub-product {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
}
.pub-product:hover {
  border-color: var(--mid-2);
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}
.pub-product-img {
  aspect-ratio: 4/3;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}
.pub-product-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.15));
  pointer-events: none;
}
.pub-product-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 3px 8px;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 1;
}
.pub-product-badge.new { background: var(--accent); color: var(--paper); }
.pub-product-badge.warranty {
  background: rgba(255,255,255,.9);
  color: var(--good);
  display: flex; align-items: center; gap: 3px;
}
.pub-product-fav {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--mid);
  z-index: 1;
}
.pub-product-body {
  padding: 16px;
}
.pub-product-sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 4px;
}
.pub-product-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.pub-product-spec {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 12px;
  line-height: 1.5;
  display: flex; flex-direction: column; gap: 2px;
}
.pub-product-spec-row {
  display: flex; gap: 6px;
}
.pub-product-spec-row .k { color: var(--mid-2); width: 50px; }
.pub-product-spec-row .v { color: var(--ink-2); }
.pub-product-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.pub-product-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.pub-product-price .from {
  font-family: inherit;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  line-height: 1;
}
.pub-product-quote {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}

/* SOLUTIONS */
.pub-solutions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.pub-solution {
  border-radius: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 5/6;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 28px;
  color: var(--paper);
  cursor: pointer;
}
.pub-solution::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 75%, rgba(0,0,0,0.85));
  z-index: 1;
}
.pub-solution-body {
  position: relative;
  z-index: 2;
}
.pub-solution-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.pub-solution-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.pub-solution-desc {
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
  margin-bottom: 16px;
}
.pub-solution-meta {
  display: flex; gap: 16px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  opacity: 0.75;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.2);
}
.pub-solution-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 600;
}

/* PROCESS */
.pub-process-band {
  background: var(--ink);
  color: var(--paper);
  padding: 72px 40px;
}
.pub-process-band .pub-sec-label { color: var(--accent-soft); }
.pub-process-band .pub-sec-label::before { background: var(--accent-soft); }
.pub-process-band .pub-sec-title { color: var(--paper); }
.pub-process-band .pub-sec-desc { color: rgba(246,241,231,.65); }

.pub-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 16px;
  position: relative;
}
.pub-step {
  padding: 32px 28px 32px 0;
  position: relative;
}
.pub-step:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0; top: 60px;
  width: 1px; height: 60%;
  background: rgba(246,241,231,.15);
}
.pub-step-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 52px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.04em;
}
.pub-step-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.pub-step-desc {
  font-size: 13px;
  color: rgba(246,241,231,.7);
  line-height: 1.55;
}
.pub-step + .pub-step { padding-left: 28px; }

/* CASE STUDY */
.pub-editorial {
  padding: 72px 40px;
  background: var(--paper-2);
}
.pub-edit-card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pub-edit-img {
  aspect-ratio: 5/4;
  position: relative;
}
.pub-edit-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,0.3));
}
.pub-edit-body {
  padding: 40px 48px 40px 0;
}
.pub-edit-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.pub-edit-title {
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.pub-edit-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.pub-edit-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 18px;
  display: flex; gap: 12px;
}
.pub-edit-excerpt {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-2);
  margin-bottom: 24px;
}
.pub-edit-quote {
  border-left: 2px solid var(--accent);
  padding: 10px 18px;
  margin: 0 0 24px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.pub-edit-quote .who {
  display: block;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-style: normal;
  font-size: 12px;
  color: var(--mid);
  margin-top: 8px;
  font-weight: 400;
}

/* BIG CTA */
.pub-cta-band {
  padding: 80px 40px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.pub-cta-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 60%);
  opacity: 0.5;
  pointer-events: none;
}
.pub-cta-card {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.pub-cta-band .pub-eyebrow {
  justify-content: center;
}
.pub-cta-band .pub-eyebrow::before { display: none; }
.pub-cta-title {
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  margin-bottom: 14px;
}
.pub-cta-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.pub-cta-text {
  font-size: 17px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 540px; margin-left: auto; margin-right: auto;
}
.pub-cta-buttons {
  display: flex; gap: 12px; justify-content: center;
  flex-wrap: wrap;
}
.pub-cta-line {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  background: #06C755;
  color: #fff;
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
}
.pub-cta-quote {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  cursor: pointer;
}

/* FOOTER */
.pub-foot {
  background: var(--ink);
  color: rgba(246,241,231,.7);
  padding: 64px 40px 32px;
}
.pub-foot-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: 24px;
}
.pub-foot-brand .name {
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.pub-foot-brand .name .mark {
  width: 32px; height: 32px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  position: relative;
}
.pub-foot-brand .name .mark::after {
  content: '';
  position: absolute;
  bottom: -3px; right: -3px;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 0;
}
.pub-foot-brand p {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 320px;
}
.pub-foot-social {
  display: flex; gap: 8px;
}
.pub-foot-social a {
  width: 36px; height: 36px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(246,241,231,.7);
}
.pub-foot-col h4 {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--paper);
  margin-bottom: 16px;
  font-weight: 600;
}
.pub-foot-col ul {
  list-style: none;
  display: flex; flex-direction: column; gap: 10px;
  padding: 0;
}
.pub-foot-col a {
  font-size: 13px;
  color: rgba(246,241,231,.6);
  text-decoration: none;
}
.pub-foot-col a:hover { color: var(--paper); }
.pub-foot-bottom {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px;
  color: rgba(246,241,231,.4);
  font-family: 'IBM Plex Mono', monospace;
}
.pub-foot-bottom .powered {
  display: inline-flex; align-items: center; gap: 8px;
}
.pub-foot-bottom .powered .mark {
  width: 16px; height: 16px;
  background: var(--paper); color: var(--ink);
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 9px;
}
.pub-foot-bottom .powered em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
}

/* ============================================================
   P1-M · PUBLIC HOMEPAGE MOBILE
   ============================================================ */
.frame-mobile.xtall {
  height: 1640px;
}
.p1m {
  background: var(--paper);
  min-height: 100%;
  font-size: 13px;
  padding-bottom: 70px;
}
.p1m-nav {
  position: sticky; top: 0; z-index: 8;
  background: rgba(246,241,231,.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}
.p1m-nav .menu {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink);
}
.p1m-nav-brand {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 12px;
}
.p1m-nav-brand .mark {
  width: 24px; height: 24px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 10px;
}
.p1m-line-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #06C755;
  color: #fff;
  padding: 6px 11px;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
}

/* Hero mobile */
.p1m-hero-img {
  height: 220px;
  background: linear-gradient(135deg, #6B5A45 0%, #3D3024 100%);
  position: relative;
  display: grid; place-items: center;
}
.p1m-hero-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4));
}
.p1m-hero-overlay {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  color: var(--paper);
  z-index: 1;
}
.p1m-hero-overlay .lab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.p1m-hero-overlay .t {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  margin-top: 2px;
}
.p1m-hero-badge {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--paper);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 0;
  font-size: 10px;
  font-weight: 600;
  display: flex; align-items: center; gap: 4px;
  z-index: 1;
}
.p1m-hero-body {
  padding: 24px 16px 20px;
}
.p1m-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.p1m-headline {
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 14px;
}
.p1m-headline em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  display: block;
}
.p1m-tag {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  margin-bottom: 20px;
}
.p1m-tag strong { font-weight: 600; }
.p1m-hero-cta {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 24px;
}
.p1m-btn {
  padding: 12px 16px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid;
  text-align: center;
}
.p1m-btn.primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.p1m-btn.outline { background: transparent; color: var(--ink); border-color: var(--ink-2); }
.p1m-btn.line { background: #06C755; color: #fff; border-color: #06C755; }
.p1m-btn.ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.p1m-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 16px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.p1m-stat {
  text-align: center;
  border-right: 1px solid var(--border);
}
.p1m-stat:last-child { border-right: none; }
.p1m-stat .n {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  line-height: 1;
}
.p1m-stat .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-top: 4px;
}

/* Trust strip mobile - horizontal scroll */
.p1m-trust {
  padding: 22px 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.p1m-trust-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--mid);
  text-align: center;
  margin-bottom: 14px;
}
.p1m-trust-row {
  display: flex; gap: 20px;
  padding: 0 16px;
  overflow-x: auto;
}
.p1m-trust-row > div {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Section heading mobile */
.p1m-sec {
  padding: 36px 16px 28px;
}
.p1m-sec-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px;
}
.p1m-sec-label::before {
  content: '';
  width: 14px; height: 1px; background: var(--accent);
}
.p1m-sec-title {
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.p1m-sec-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.p1m-sec-desc {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 20px;
}

/* Categories mobile - 2 col */
.p1m-cats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.p1m-cat {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px;
  min-height: 90px;
  position: relative;
}
.p1m-cat-ic {
  width: 32px; height: 32px;
  background: var(--paper-3);
  border-radius: 0;
  display: grid; place-items: center;
  color: var(--accent);
  margin-bottom: 10px;
}
.p1m-cat-ic svg { width: 18px; height: 18px; }
.p1m-cat-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.p1m-cat-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

/* Products mobile - horizontal scroll featured + 2-col grid */
.p1m-filter-row {
  display: flex; gap: 6px;
  margin-bottom: 16px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.p1m-chip {
  font-size: 11px;
  padding: 5px 11px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-2);
  flex-shrink: 0;
  font-family: inherit;
}
.p1m-chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 500; }

.p1m-prods-scroll {
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 0 16px 4px;
  margin: 0 -16px 16px;
}
.p1m-prod-card {
  flex-shrink: 0;
  width: 200px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.p1m-prod-img {
  aspect-ratio: 4/3;
  position: relative;
  display: grid; place-items: center;
}
.p1m-prod-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: var(--paper);
  color: var(--ink);
  font-size: 9px;
  font-family: 'IBM Plex Mono', monospace;
  padding: 2px 6px;
  border-radius: 0;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 1;
}
.p1m-prod-badge.new { background: var(--accent); color: var(--paper); }
.p1m-prod-body { padding: 12px; }
.p1m-prod-sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 3px;
}
.p1m-prod-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  line-height: 1.35;
}
.p1m-prod-spec {
  font-size: 10px;
  color: var(--mid);
  margin-bottom: 8px;
  line-height: 1.4;
}
.p1m-prod-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.p1m-prod-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.p1m-prod-price .from {
  font-family: inherit;
  font-size: 8px;
  color: var(--mid);
  font-weight: 400;
  text-transform: uppercase;
  display: block;
  line-height: 1;
}
.p1m-prod-quote {
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
}

/* Solutions mobile - stacked */
.p1m-sols {
  display: flex; flex-direction: column; gap: 12px;
}
.p1m-sol {
  border-radius: 0;
  overflow: hidden;
  position: relative;
  aspect-ratio: 5/4;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  color: var(--paper);
}
.p1m-sol::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75));
  z-index: 1;
}
.p1m-sol > * { position: relative; z-index: 2; }
.p1m-sol-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 6px;
}
.p1m-sol-title {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 6px;
}
.p1m-sol-meta {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  opacity: 0.85;
  display: flex; gap: 10px;
  margin-bottom: 10px;
}
.p1m-sol-cta {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
}

/* Process mobile - 2x2 */
.p1m-process-band {
  background: var(--ink);
  color: var(--paper);
  padding: 36px 16px 32px;
}
.p1m-process-band .p1m-sec-label { color: var(--accent-soft); }
.p1m-process-band .p1m-sec-label::before { background: var(--accent-soft); }
.p1m-process-band .p1m-sec-title { color: var(--paper); }
.p1m-process-band .p1m-sec-desc { color: rgba(246,241,231,.65); }

.p1m-steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 12px;
  margin-top: 8px;
}
.p1m-step {
  padding-top: 12px;
  border-top: 1px solid rgba(246,241,231,.15);
}
.p1m-step-num {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 30px;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 8px;
}
.p1m-step-t {
  font-size: 13px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 4px;
}
.p1m-step-d {
  font-size: 11px;
  color: rgba(246,241,231,.65);
  line-height: 1.5;
}

/* Case study mobile - stacked */
.p1m-edit {
  background: var(--paper-2);
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
}
.p1m-edit-img {
  aspect-ratio: 4/3;
  position: relative;
  background: linear-gradient(135deg, #4A4030 0%, #1F1A14 100%);
}
.p1m-edit-img-cap {
  position: absolute;
  bottom: 14px; left: 16px; right: 16px;
  color: var(--paper);
}
.p1m-edit-img-cap .lab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}
.p1m-edit-img-cap .t {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  margin-top: 2px;
}
.p1m-edit-body {
  padding: 18px;
}
.p1m-edit-title {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 10px;
}
.p1m-edit-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.p1m-edit-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 12px;
  display: flex; gap: 8px;
  flex-wrap: wrap;
}
.p1m-edit-quote {
  border-left: 2px solid var(--accent);
  padding: 6px 12px;
  margin: 14px 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.p1m-edit-quote .who {
  display: block;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-style: normal;
  font-size: 10px;
  color: var(--mid);
  margin-top: 6px;
}

/* CTA mobile */
.p1m-cta-band {
  padding: 40px 16px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.p1m-cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, var(--accent-soft) 0%, transparent 65%);
  opacity: 0.6;
  pointer-events: none;
}
.p1m-cta-band > * { position: relative; z-index: 1; }
.p1m-cta-title {
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin-bottom: 10px;
}
.p1m-cta-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  display: block;
}
.p1m-cta-text {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 20px;
}
.p1m-cta-btns {
  display: flex; flex-direction: column; gap: 8px;
}
.p1m-cta-phone {
  margin-top: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.05em;
}

/* Footer mobile */
.p1m-foot {
  background: var(--ink);
  color: rgba(246,241,231,.7);
  padding: 32px 16px 20px;
}
.p1m-foot-brand {
  margin-bottom: 28px;
}
.p1m-foot-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--paper);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.p1m-foot-name .mark {
  width: 26px; height: 26px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 11px;
  position: relative;
}
.p1m-foot-name .mark::after {
  content: '';
  position: absolute; bottom: -2px; right: -2px;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 0;
}
.p1m-foot-desc {
  font-size: 11px;
  line-height: 1.55;
  margin-bottom: 14px;
}
.p1m-foot-social {
  display: flex; gap: 8px;
}
.p1m-foot-social a {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50%;
  display: grid; place-items: center;
  color: rgba(246,241,231,.7);
}

.p1m-foot-accordion {
  border-top: 1px solid rgba(255,255,255,.1);
}
.p1m-foot-acc-row {
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: rgba(246,241,231,.85);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.p1m-foot-acc-row .chev {
  width: 16px; height: 16px;
  opacity: 0.5;
}

.p1m-foot-copy {
  font-size: 10px;
  color: rgba(246,241,231,.4);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 16px;
  text-align: center;
}
.p1m-foot-powered {
  font-size: 10px;
  color: rgba(246,241,231,.4);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 6px;
  text-align: center;
  display: flex; gap: 6px; justify-content: center; align-items: center;
}
.p1m-foot-powered em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: var(--accent-soft);
  font-size: 11px;
}
.p1m-foot-powered .mark {
  width: 14px; height: 14px;
  background: var(--paper); color: var(--ink);
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700; font-size: 8px;
}

/* Sticky bottom CTA */
.p1m-sticky-cta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  z-index: 7;
  box-shadow: 0 -4px 20px rgba(27,42,58,.08);
}
.p1m-sticky-cta button {
  flex: 1;
  padding: 11px;
  border-radius: 0;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer;
}
.p1m-sticky-cta .line {
  background: #06C755;
  color: #fff;
}
.p1m-sticky-cta .quote {
  background: var(--accent);
  color: var(--paper);
  flex: 1.2;
}

/* Side-by-side desktop/mobile compare */
.compare-wrap {
  display: flex; gap: 40px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.compare-notes {
  flex: 1; min-width: 280px;
  padding-top: 20px;
}

/* ============================================================
   M-EXTRAS · MORE MOBILE VIEWS
   ============================================================ */
.mobile-pair {
  display: flex; gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 64px;
}
.mobile-pair-notes {
  flex: 1; min-width: 320px;
  padding-top: 16px;
}
.mob-sub-head span { color: var(--mid); margin-left: 8px; font-weight: 400; }

/* ── M-PIP · ดีล (Pipeline) ─────────────────────── */
.mp-top-row .title {
  flex: 1;
  font-size: 17px;
  font-weight: 600;
}
.mp-top-row .icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 0;
  color: var(--ink-2);
}
.mp-summary .item {
  display: flex; align-items: baseline; gap: 4px;
}
.mp-summary .item .n {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.mp-summary .item .l { color: var(--mid); font-size: 10px; }
.mp-summary .divider {
  width: 1px; height: 12px;
  background: var(--border);
}
.mp-stage-tab .count {
  background: var(--paper-3);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 0;
  font-weight: 500;
}
.mp-stage-tab.active .count {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.mp-stage-meta .v {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}
.mp-card-foot .avatar {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--ai-soft), var(--accent-soft));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--ink);
  font-weight: 600;
}
.mp-card-foot .days {
  margin-left: auto;
  display: flex; align-items: center; gap: 3px;
}
.mp-card-foot .days.alert { color: var(--accent); font-weight: 600; }
.mp-card-foot .days.over { color: var(--danger); font-weight: 600; }
.mp-fab svg { width: 22px; height: 22px; }

/* ── M-CU · Customer 360 mobile ───────────────────── */
.mc {
  padding-bottom: 70px;
}
.mc-head {
  padding: 14px 16px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.mc-back-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
  font-size: 11px;
  color: var(--mid);
}
.mc-back-row .back {
  width: 28px; height: 28px;
  margin-left: -6px;
  display: grid; place-items: center;
  color: var(--ink);
}
.mc-top {
  display: flex; gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.mc-avatar {
  width: 52px; height: 52px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color: var(--paper);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 24px;
}
.mc-info { flex: 1; min-width: 0; }
.mc-info .name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mc-tags {
  display: flex; gap: 4px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mc-actions {
  display: flex; gap: 6px;
  margin-bottom: 14px;
}
.mc-actions .btn {
  flex: 1;
  padding: 9px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  font-family: inherit;
  font-size: 12px;
  color: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.mc-actions .btn.primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
}

.mc-kpi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.mc-kpi-item {
  padding: 12px;
  border-right: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.mc-kpi-item:nth-child(2n) { border-right: none; }
.mc-kpi-item:nth-last-child(-n+2) { border-bottom: none; }
.mc-kpi-item .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.mc-kpi-item .v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mc-kpi-item .s {
  font-size: 10px;
  color: var(--mid);
  margin-top: 2px;
}

.mc-tabs {
  background: var(--paper-2);
  padding: 0 16px;
  display: flex;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.mc-tab {
  padding: 11px 0;
  margin-right: 18px;
  font-size: 12px;
  color: var(--mid);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.mc-tab.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.mc-tab .count {
  background: var(--paper-3);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 0;
  margin-left: 4px;
}

.mc-body {
  padding: 16px;
}
.mc-ai {
  background: var(--ai-soft);
  border-radius: 0;
  padding: 14px;
  margin-bottom: 14px;
}
.mc-ai .head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.mc-ai .head .ic {
  width: 22px; height: 22px;
  background: var(--ai); color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
}
.mc-ai .head .t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ai-deep);
  font-weight: 600;
}
.mc-ai p {
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.55;
  margin-bottom: 4px;
}
.mc-ai p strong { font-weight: 600; }

.mc-tl-day {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 14px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed var(--border);
}
.mc-tl-event {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2);
}
.mc-tl-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--ink-2);
  display: grid; place-items: center;
  margin-top: 2px;
}
.mc-tl-icon.good { background: var(--good-soft); color: var(--good); }
.mc-tl-icon.accent { background: var(--accent-soft); color: var(--accent-deep); }
.mc-tl-icon.ai { background: var(--ai-soft); color: var(--ai-deep); }
.mc-tl-body .t {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 1px;
}
.mc-tl-body .t strong { font-weight: 600; }
.mc-tl-body .d {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.5;
}
.mc-tl-body .when {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid-2);
  margin-top: 2px;
}

/* ── M-PD · Product Detail ────────────────────────── */
.mpd {
  padding-bottom: 80px;
}
.mpd-top {
  position: sticky; top: 0; z-index: 6;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
}
.mpd-top .back {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink);
}
.mpd-top .brand {
  flex: 1;
  font-weight: 600;
  font-size: 12px;
}
.mpd-top .brand .mono {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--mid);
  font-weight: 400;
}
.mpd-top .actions { display: flex; gap: 4px; color: var(--ink-2); }

.mpd-gallery {
  position: relative;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, #8B7355, #4A3C2C);
  display: grid; place-items: center;
}
.mpd-gallery::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.25));
}
.mpd-gallery-dots {
  position: absolute;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 5px;
  z-index: 1;
}
.mpd-gallery-dot {
  width: 6px; height: 6px;
  background: rgba(255,255,255,.4);
  border-radius: 50%;
}
.mpd-gallery-dot.active {
  background: var(--paper);
  width: 18px;
  border-radius: 0;
}
.mpd-gallery-pager {
  position: absolute;
  bottom: 14px; right: 14px;
  background: rgba(27,42,58,.7);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 0;
  z-index: 1;
}
.mpd-gallery-fav {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ink-2);
  z-index: 1;
}

.mpd-body {
  padding: 18px 16px 16px;
}
.mpd-sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-bottom: 6px;
  display: flex; gap: 8px; align-items: center;
}
.mpd-sku .badge {
  background: var(--accent);
  color: var(--paper);
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 0;
  letter-spacing: 0.05em;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}
.mpd-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.mpd-price-row {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.mpd-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.mpd-price-from {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.mpd-price-from + .mpd-price { margin-left: -2px; }
.mpd-price-note {
  margin-left: auto;
  font-size: 11px;
  color: var(--mid);
  text-align: right;
}

.mpd-section {
  margin-bottom: 20px;
}
.mpd-sec-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}

.mpd-spec-list {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px 12px;
  font-size: 12px;
}
.mpd-spec-list .k { color: var(--mid); }
.mpd-spec-list .v { color: var(--ink); font-weight: 500; }

.mpd-options {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.mpd-opt-chip {
  font-size: 11px;
  padding: 6px 11px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--ink-2);
}
.mpd-opt-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.mpd-opt-chip.has-swatch {
  display: inline-flex; align-items: center; gap: 6px;
}
.mpd-opt-chip .swatch {
  width: 14px; height: 14px;
  border-radius: 0;
  border: 1px solid var(--border);
}
.mpd-opt-chip.active .swatch { border-color: rgba(255,255,255,.3); }

.mpd-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mpd-feature {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
}
.mpd-feature .ic {
  width: 28px; height: 28px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 0;
  display: grid; place-items: center;
  margin-bottom: 8px;
}
.mpd-feature .t {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.mpd-feature .d {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.4;
}

.mpd-stock-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--good-soft);
  color: var(--good);
  padding: 10px 12px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 500;
}

.mpd-related {
  display: flex; gap: 8px;
  overflow-x: auto;
  margin: 0 -16px;
  padding: 0 16px 8px;
}
.mpd-related-card {
  flex-shrink: 0;
  width: 130px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.mpd-related-card .img {
  aspect-ratio: 1/1;
  display: grid; place-items: center;
}
.mpd-related-card .info { padding: 8px; }
.mpd-related-card .name {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
}
.mpd-related-card .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

.mpd-sticky-cta {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  z-index: 6;
  box-shadow: 0 -8px 24px rgba(27,42,58,.08);
}
.mpd-sticky-cta button {
  padding: 11px;
  border-radius: 0;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.mpd-sticky-cta .line {
  background: #06C755;
  color: #fff;
  flex: 0 0 50px;
}
.mpd-sticky-cta .quote {
  background: var(--accent);
  color: var(--paper);
  flex: 1;
}

/* ── M-RFQ · Request Quote Form ───────────────────── */
.mrfq {
  padding-bottom: 90px;
}
.mrfq-top {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  position: sticky; top: 0; z-index: 6;
}
.mrfq-top .back {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  color: var(--ink);
}
.mrfq-top .title {
  font-size: 14px;
  font-weight: 600;
}

.mrfq-progress {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 16px;
}
.mrfq-prog-bar {
  display: flex; gap: 4px;
  margin-bottom: 10px;
}
.mrfq-prog-seg {
  flex: 1;
  height: 4px;
  background: var(--paper-3);
  border-radius: 0;
}
.mrfq-prog-seg.done { background: var(--accent); }
.mrfq-prog-seg.active { background: var(--accent); }
.mrfq-prog-step {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
}
.mrfq-prog-current {
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}
.mrfq-prog-current strong { font-size: 14px; }
.mrfq-prog-total {
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
}

.mrfq-body {
  padding: 24px 16px 16px;
}
.mrfq-h {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.mrfq-desc {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 24px;
}

.mrfq-field {
  margin-bottom: 18px;
}
.mrfq-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.mrfq-label .l {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
}
.mrfq-label .l .req { color: var(--accent); }
.mrfq-label .hint {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}
.mrfq-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.mrfq-input.filled { color: var(--ink); font-weight: 500; }
.mrfq-input.focus {
  border-color: var(--accent);
  background: var(--input-bg);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.mrfq-input::placeholder { color: var(--mid-2); }

.mrfq-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mrfq-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.mrfq-seg-btn {
  padding: 14px 10px;
  border-radius: 0;
  border: 1.5px solid var(--border);
  background: var(--paper);
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.mrfq-seg-btn .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.mrfq-seg-btn .d {
  font-size: 10px;
  color: var(--mid);
  line-height: 1.4;
}
.mrfq-seg-btn.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  position: relative;
}
.mrfq-seg-btn.active::after {
  content: '';
  position: absolute;
  top: 8px; right: 8px;
  width: 18px; height: 18px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
}
.mrfq-seg-btn.active .t { color: var(--accent-deep); }

.mrfq-checkpill {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.mrfq-pill {
  padding: 8px 13px;
  font-size: 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  font-family: inherit;
  cursor: pointer;
}
.mrfq-pill.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}

.mrfq-line-attach {
  margin-top: 16px;
  padding: 12px 14px;
  background: #06C75518;
  border: 1px dashed #06C755;
  border-radius: 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.mrfq-line-attach .ic {
  width: 28px; height: 28px;
  background: #06C755;
  color: #fff;
  border-radius: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.mrfq-line-attach strong { color: var(--ink); }

.mrfq-foot {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex; gap: 8px;
  z-index: 6;
}
.mrfq-foot button {
  padding: 13px;
  border-radius: 0;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mrfq-foot .back {
  flex: 0 0 80px;
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.mrfq-foot .next {
  flex: 1;
  background: var(--accent);
  color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}

/* ============================================================
   K · DEAL KANBAN DESKTOP
   ============================================================ */
.kb-page {
  flex: 1; display: flex; flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}
.kb-toolbar {
  padding: 16px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 14px;
}
.kb-toolbar h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  display: flex; align-items: baseline; gap: 8px;
}
.kb-toolbar h1 .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--mid);
  background: var(--paper-3);
  padding: 2px 8px;
  border-radius: 0;
}
.kb-search {
  flex: 1; max-width: 360px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--mid);
  font-size: 13px;
}
.kb-filters {
  display: flex; gap: 4px;
  margin-right: auto;
}
.kb-filter-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  font-size: 12px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
}
.kb-filter-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.kb-filter-chip .count {
  background: rgba(255,255,255,.15);
  padding: 0 5px;
  border-radius: 0;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
}
.kb-filter-chip:not(.active) .count {
  background: var(--paper-3);
  color: var(--mid);
}
.kb-view {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.kb-view-btn {
  padding: 6px 10px;
  background: var(--paper);
  color: var(--mid);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  border-right: 1px solid var(--border);
}
.kb-view-btn:last-child { border-right: none; }
.kb-view-btn.active { background: var(--paper-3); color: var(--ink); font-weight: 600; }

.kb-stat-bar {
  padding: 12px 24px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: flex; gap: 28px;
  font-size: 12px;
  align-items: center;
}
.kb-stat-item {
  display: flex; align-items: baseline; gap: 6px;
}
.kb-stat-item .n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.kb-stat-item .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.kb-stat-divider {
  width: 1px; height: 16px;
  background: var(--border);
}
.kb-stat-bar .right {
  margin-left: auto;
  display: flex; gap: 8px;
  color: var(--mid);
  font-size: 11px;
}

.kb-board {
  flex: 1;
  overflow-x: auto;
  display: flex;
  padding: 16px;
  gap: 12px;
  background: var(--paper);
}
.kb-col {
  flex: 0 0 280px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  display: flex; flex-direction: column;
  max-height: 100%;
}
.kb-col.featured {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.kb-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px;
}
.kb-col.featured .kb-col-head { border-bottom-color: var(--accent); }
.kb-col-stage {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--mid-2);
  flex-shrink: 0;
}
.kb-col-stage.s1 { background: var(--mid); }
.kb-col-stage.s2 { background: var(--mid-2); }
.kb-col-stage.s3 { background: var(--accent); }
.kb-col-stage.s4 { background: var(--warn); }
.kb-col-stage.s5 { background: var(--good); }
.kb-col-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.kb-col-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 500;
}
.kb-col.featured .kb-col-count {
  background: var(--paper-2);
  color: var(--accent-deep);
}
.kb-col-actions {
  margin-left: auto;
  display: flex; gap: 2px;
  color: var(--mid);
}
.kb-col-actions > div {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
}
.kb-col-actions > div:hover { background: var(--paper-3); }

.kb-col-total {
  padding: 8px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  display: flex; justify-content: space-between; align-items: center;
}
.kb-col.featured .kb-col-total {
  background: var(--accent-soft);
  border-bottom-color: var(--accent);
}
.kb-col-total .target {
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}

.kb-cards {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}

.kb-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
  cursor: grab;
  transition: all .12s;
  position: relative;
}
.kb-card:hover {
  border-color: var(--mid-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.kb-card.urgent { border-left: 3px solid var(--accent); }
.kb-card.warn { border-left: 3px solid var(--warn); }
.kb-card.danger { border-left: 3px solid var(--danger); }
.kb-card.good { border-left: 3px solid var(--good); }

.kb-card-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px;
}
.kb-card-cust {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-card-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-left: 6px;
}
.kb-card-title {
  font-size: 11px;
  color: var(--ink-2);
  margin-bottom: 10px;
  line-height: 1.4;
}
.kb-card-foot {
  display: flex; align-items: center; gap: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--border-2);
  font-size: 10px;
  color: var(--mid);
}
.kb-card-foot .avatar {
  width: 18px; height: 18px;
  background: linear-gradient(135deg, var(--ai-soft), var(--accent-soft));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--ink);
  font-weight: 600;
}
.kb-card-foot .activities {
  display: flex; gap: 3px;
  color: var(--mid);
}
.kb-card-foot .days {
  margin-left: auto;
  display: flex; align-items: center; gap: 3px;
  font-family: 'IBM Plex Mono', monospace;
}
.kb-card-foot .days.alert { color: var(--accent); font-weight: 600; }
.kb-card-foot .days.over { color: var(--danger); font-weight: 600; }

.kb-add-card {
  padding: 10px;
  text-align: center;
  font-size: 11px;
  color: var(--mid);
  border: 1px dashed var(--border);
  border-radius: 0;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.kb-add-card:hover {
  background: var(--paper);
  color: var(--ink-2);
  border-color: var(--mid-2);
}

/* ============================================================
   QL · QUOTE LIST
   ============================================================ */
.ql-page {
  flex: 1;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ql-toolbar {
  padding: 18px 28px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.ql-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.ql-title {
  display: flex; align-items: baseline; gap: 10px;
}
.ql-title h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.ql-title .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  background: var(--paper-3);
  padding: 2px 8px;
  border-radius: 0;
}
.ql-title .total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mid);
  margin-left: 8px;
}
.ql-title .total strong { color: var(--ink); font-weight: 600; }

.ql-tools {
  display: flex; gap: 8px;
  align-items: center;
}
.ql-filters-row {
  display: flex; gap: 12px; align-items: center;
}
.ql-search {
  flex: 1; max-width: 320px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--mid);
  font-size: 13px;
}
.ql-status-chips {
  display: flex; gap: 4px;
}
.ql-chip {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.ql-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.ql-chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ql-chip .dot.draft { background: var(--mid-2); }
.ql-chip .dot.sent { background: var(--warn); }
.ql-chip .dot.accepted { background: var(--good); }
.ql-chip .dot.rejected { background: var(--danger); }
.ql-chip .dot.expired { background: var(--accent); }
.ql-chip .dot.expiring { background: var(--accent); animation: pulse 1.4s infinite; }
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

.ql-bulk-bar {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 28px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.ql-bulk-bar .count {
  background: var(--accent);
  padding: 2px 9px;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}
.ql-bulk-bar .actions {
  display: flex; gap: 6px;
  margin-left: auto;
}
.ql-bulk-action {
  background: transparent;
  border: 1px solid rgba(246,241,231,.3);
  color: var(--paper);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.ql-bulk-action:hover { background: rgba(255,255,255,.1); }

.ql-table {
  flex: 1; overflow-y: auto;
}
.ql-row {
  display: grid;
  grid-template-columns: 32px 130px 1fr 90px 130px 140px 100px 40px;
  padding: 12px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  gap: 12px;
}
.ql-row.head {
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  padding: 10px 28px;
}
.ql-row.head .sort {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.ql-row.head .sort.asc::after { content: '↑'; color: var(--accent); }
.ql-row.head .sort.desc::after { content: '↓'; color: var(--accent); }
.ql-row:not(.head):hover { background: var(--paper-2); }
.ql-row.selected { background: var(--accent-soft); }

.ql-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  display: grid; place-items: center;
}
.ql-check.checked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.ql-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.ql-no .rev {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}
.ql-cust-cell {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.ql-cust-cell .avatar {
  width: 28px; height: 28px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color: var(--paper);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.ql-cust-cell .info { min-width: 0; flex: 1; }
.ql-cust-cell .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ql-cust-cell .person { font-size: 11px; color: var(--mid); }
.ql-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.ql-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 0;
  font-weight: 500;
}
.ql-status.draft { background: var(--paper-3); color: var(--mid); }
.ql-status.sent { background: var(--warn-soft); color: var(--warn); }
.ql-status.accepted { background: var(--good-soft); color: var(--good); }
.ql-status.rejected { background: var(--danger-soft); color: var(--danger); }
.ql-status.expiring { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.ql-status.expired { background: var(--paper-3); color: var(--mid); text-decoration: line-through; }
.ql-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ql-status.draft .dot { background: var(--mid-2); }
.ql-status.sent .dot { background: var(--warn); }
.ql-status.accepted .dot { background: var(--good); }
.ql-status.rejected .dot { background: var(--danger); }
.ql-status.expiring .dot { background: var(--accent); animation: pulse 1.4s infinite; }

.ql-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.ql-date .ago {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-family: inherit;
}
.ql-owner {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.ql-owner .avatar {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--ink);
  font-weight: 600;
}
.ql-row-actions {
  color: var(--mid);
  cursor: pointer;
}

.ql-footer {
  padding: 12px 28px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px;
  color: var(--mid);
}
.ql-pagination {
  display: flex; gap: 4px;
  align-items: center;
}
.ql-page-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
  cursor: pointer;
}
.ql-page-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}

/* ============================================================
   CL · CUSTOMER LIST
   ============================================================ */
.cl-page {
  flex: 1;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr;
  overflow: hidden;
}
.cl-side {
  background: var(--paper-2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 18px;
}
.cl-side-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 16px 0 10px;
}
.cl-side-title:first-child { margin-top: 0; }

.cl-filterbar {
  display: flex; align-items: center; gap: 14px;
}
.cl-tag-cloud {
  display: flex; flex-wrap: wrap; gap: 5px; flex-shrink: 0;
}
.cl-tag {
  display: inline-flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  font-size: 11px;
  padding: 0 11px;
  border-radius: 0;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.cl-tag.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.cl-tag .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  margin-left: 3px;
  opacity: 0.7;
}

.cl-checkbox-list {
  display: flex; flex-direction: column; gap: 8px;
}
.cl-checkbox-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.cl-checkbox {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  flex-shrink: 0;
  display: grid; place-items: center;
  color: var(--paper);
}
.cl-checkbox.checked {
  background: var(--ink);
  border-color: var(--ink);
}
.cl-checkbox-row .count {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

.cl-range {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px;
}
.cl-range .label {
  display: flex; justify-content: space-between;
  font-size: 11px;
  margin-bottom: 8px;
}
.cl-range .label .v { font-family: 'IBM Plex Mono', monospace; color: var(--ink); font-weight: 500; }
.cl-range .bar {
  height: 4px;
  background: var(--paper-3);
  border-radius: 0;
  position: relative;
  margin-bottom: 6px;
}
.cl-range .bar::before {
  content: '';
  position: absolute;
  left: 15%; right: 30%;
  top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 0;
}
.cl-range .bar::after {
  content: '';
  position: absolute;
  left: 70%; top: -4px;
  width: 12px; height: 12px;
  background: var(--paper);
  border: 2px solid var(--accent);
  border-radius: 50%;
}

.cl-main {
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cl-toolbar {
  padding: 16px 28px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.cl-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.cl-title h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.cl-title .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  background: var(--paper-3);
  padding: 2px 8px;
  border-radius: 0;
}

.cl-table { flex: 1; overflow-y: auto; }
.cl-row {
  display: grid;
  grid-template-columns: 1fr 1fr 130px 110px 110px 80px 40px;
  padding: 14px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  gap: 14px;
  cursor: pointer;
}
.cl-row.head {
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 28px;
  cursor: default;
}
.cl-row:not(.head):hover { background: var(--paper-2); }

.cl-cust-cell {
  display: flex; align-items: center; gap: 12px;
  min-width: 0;
}
.cl-cust-cell .avatar {
  width: 36px; height: 36px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color: var(--paper);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 16px;
  flex-shrink: 0;
}
.cl-cust-cell .info { min-width: 0; flex: 1; }
.cl-cust-cell .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.cl-cust-cell .name .small-chip {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 0;
  background: var(--good-soft);
  color: var(--good);
  font-weight: 600;
}
.cl-cust-cell .name .small-chip.vip {
  background: var(--accent-soft);
  color: var(--accent-deep);
}
.cl-cust-cell .meta {
  font-size: 11px;
  color: var(--mid);
}

.cl-tags-cell {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.cl-tags-cell .chip {
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 0;
  background: var(--paper-3);
  color: var(--ink-2);
}

.cl-value-cell {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.cl-value-cell .since {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}

.cl-deals-cell {
  display: flex; align-items: baseline; gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
}
.cl-deals-cell .open {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.cl-deals-cell .total {
  font-size: 11px;
  color: var(--mid);
}

.cl-last {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.cl-last .channel {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-family: inherit;
}

.cl-status-cell {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 0;
}
.cl-status-cell.active { background: var(--good-soft); color: var(--good); }
.cl-status-cell.warm { background: var(--warn-soft); color: var(--warn); }
.cl-status-cell.cold { background: var(--paper-3); color: var(--mid); }

/* ============================================================
   DD · DEAL DETAIL
   ============================================================ */
.dd-page {
  flex: 1;
  background: var(--paper);
  overflow-y: auto;
}
.dd-crumb {
  padding: 16px 32px 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--mid);
}
.dd-crumb a { color: var(--mid); text-decoration: none; }
.dd-crumb .cur { color: var(--ink); font-weight: 500; }

.dd-hero {
  padding: 16px 32px 24px;
  border-bottom: 1px solid var(--border);
}
.dd-hero-top {
  display: flex; gap: 18px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.dd-hero-cust {
  width: 56px; height: 56px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color: var(--paper);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 26px;
  flex-shrink: 0;
}
.dd-hero-info { flex: 1; min-width: 0; }
.dd-hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.dd-hero-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.dd-hero-meta {
  display: flex; gap: 16px;
  font-size: 13px;
  color: var(--mid);
  flex-wrap: wrap;
}
.dd-hero-meta .item {
  display: flex; align-items: center; gap: 5px;
}
.dd-hero-meta .item .v { color: var(--ink-2); font-weight: 500; }
.dd-hero-amt {
  text-align: right;
  flex-shrink: 0;
}
.dd-hero-amt .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.dd-hero-amt .v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.dd-hero-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}

.dd-pipe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.dd-pipe-step {
  padding: 12px 14px;
  border-right: 1px solid var(--border);
  position: relative;
}
.dd-pipe-step:last-child { border-right: none; }
.dd-pipe-step.done {
  background: var(--good-soft);
}
.dd-pipe-step.current {
  background: var(--accent-soft);
}
.dd-pipe-step .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 2px;
  display: flex; align-items: center; gap: 5px;
}
.dd-pipe-step.done .num { color: var(--good); }
.dd-pipe-step.current .num { color: var(--accent-deep); font-weight: 600; }
.dd-pipe-step .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.dd-pipe-step.done .name { color: var(--good); }
.dd-pipe-step.current .name { color: var(--accent-deep); }
.dd-pipe-step .when {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}

.dd-tabs {
  display: flex; gap: 0;
  padding: 0 32px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 2;
}
.dd-tab {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--mid);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.dd-tab.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.dd-tab .count {
  background: var(--paper-3);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 500;
}
.dd-tab.active .count { background: var(--accent-soft); color: var(--accent-deep); }

.dd-body {
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

.dd-act-add {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 0;
  display: flex; gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.dd-act-add .input {
  flex: 1;
  font-size: 13px;
  color: var(--mid);
  padding: 6px;
}
.dd-act-add .actions {
  display: flex; gap: 4px;
  color: var(--mid);
}
.dd-act-add .actions > div {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
}
.dd-act-add .actions > div:hover { background: var(--paper-3); color: var(--ink-2); }

.dd-info-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.dd-info-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.dd-info-head .t {
  font-size: 13px;
  font-weight: 600;
}
.dd-info-head .add {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}
.dd-info-body { padding: 14px 16px; }

.dd-field {
  display: flex; justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 12px;
}
.dd-field:last-child { border-bottom: none; }
.dd-field .l { color: var(--mid); }
.dd-field .v { color: var(--ink); font-weight: 500; }
.dd-field .v.mono { font-family: 'IBM Plex Mono', monospace; }

.dd-quote-mini {
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 6px;
  cursor: pointer;
}
.dd-quote-mini:hover { border-color: var(--mid-2); }
.dd-quote-mini-top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 2px;
}
.dd-quote-mini .no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  font-weight: 500;
}
.dd-quote-mini .amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.dd-quote-mini .desc {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 2px;
}

.dd-ai {
  background: var(--ai-soft);
  border-radius: 0;
  padding: 16px;
  margin-bottom: 16px;
}
.dd-ai-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.dd-ai-head .ic {
  width: 24px; height: 24px;
  background: var(--ai);
  color: var(--paper-2);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
}
.dd-ai-head .t {
  font-weight: 600;
  font-size: 12px;
  color: var(--ai-deep);
}
.dd-ai p {
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.6;
  margin-bottom: 8px;
}
.dd-ai p strong { font-weight: 600; }
.dd-ai-prob {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(123,143,107,.25);
}
.dd-ai-prob-row {
  display: flex; align-items: baseline; gap: 8px;
}
.dd-ai-prob-row .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ai-deep);
  opacity: 0.7;
}
.dd-ai-prob-row .v {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--ai-deep);
  line-height: 1;
}
.dd-ai-prob-bar {
  margin-top: 8px;
  height: 4px;
  background: rgba(123,143,107,.25);
  border-radius: 0;
  position: relative;
}
.dd-ai-prob-bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 72%;
  background: var(--ai);
  border-radius: 0;
}

/* ============================================================
   PE · PRODUCT EDITOR (CREATE / EDIT)
   ============================================================ */
.pe-page {
  flex: 1;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pe-crumb {
  padding: 14px 28px 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--mid);
  background: var(--paper);
}
.pe-crumb a { color: var(--mid); text-decoration: none; }
.pe-crumb .cur { color: var(--ink); font-weight: 500; }

.pe-hero {
  padding: 14px 28px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 16px;
  align-items: center;
  background: var(--paper);
}
.pe-hero-thumb {
  width: 72px; height: 72px;
  border-radius: 0;
  background: linear-gradient(135deg, #8B7355, #4A3C2C);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pe-hero-thumb .badge {
  position: absolute;
  bottom: 4px; right: 4px;
  background: rgba(0,0,0,.5);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 0;
}
.pe-hero-info { flex: 1; min-width: 0; }
.pe-hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.pe-hero-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 8px;
}
.pe-hero-name .editable {
  border-bottom: 1px dashed transparent;
  cursor: text;
}
.pe-hero-name .editable:hover { border-bottom-color: var(--mid-2); }
.pe-hero-meta {
  font-size: 11px;
  color: var(--mid);
  display: flex; gap: 14px;
}
.pe-hero-meta .sep { color: var(--mid-2); }

.pe-status-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.pe-status-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.pe-status-pill.live {
  background: var(--good-soft);
  color: var(--good);
}
.pe-status-pill.live .dot { background: var(--good); }
.pe-status-pill.draft {
  background: var(--paper-3);
  color: var(--mid);
}
.pe-status-pill.draft .dot { background: var(--mid-2); }

.pe-hero-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}

.pe-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 0;
}
.pe-main {
  padding: 20px 28px 100px;
}
.pe-side {
  background: var(--paper-2);
  border-left: 1px solid var(--border);
  padding: 20px;
  overflow-y: auto;
}

/* เอไอ import banner */
.pe-ai-import {
  background: var(--ai-soft);
  border: 1px dashed var(--ai);
  border-radius: 0;
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex; gap: 14px;
  align-items: center;
}
.pe-ai-import .ic {
  width: 36px; height: 36px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  flex-shrink: 0;
}
.pe-ai-import .body { flex: 1; min-width: 0; }
.pe-ai-import .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-deep);
  margin-bottom: 2px;
}
.pe-ai-import .desc {
  font-size: 12px;
  color: var(--ai-deep);
  opacity: 0.85;
  line-height: 1.5;
}
.pe-ai-import .actions { display: flex; gap: 6px; flex-shrink: 0; }
.pe-ai-import .ai-btn {
  background: var(--ai);
  color: var(--paper);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.pe-ai-import .ai-btn.ghost {
  background: transparent;
  color: var(--ai-deep);
  border: 1px solid var(--ai);
}

/* Form sections */
.pe-section {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--paper-2);
  overflow: hidden;
}
.pe-section-head {
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.pe-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.pe-section-title .icon {
  color: var(--mid);
  width: 18px; height: 18px;
}
.pe-section-title .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mid);
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 500;
}
.pe-section-actions {
  display: flex; gap: 6px;
  color: var(--mid);
  font-size: 12px;
  align-items: center;
}
.pe-section-actions .link {
  color: var(--accent);
  cursor: pointer;
}
.pe-section-body {
  padding: 18px;
  background: var(--paper);
}

/* Fields */
.pe-field-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.pe-field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.pe-field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pe-field-row.cols-1-2 { grid-template-columns: 1fr 2fr; }
.pe-field-row:last-child { margin-bottom: 0; }

.pe-field { display: flex; flex-direction: column; gap: 5px; }
.pe-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
}
.pe-label .req { color: var(--accent); }
.pe-label .hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mid);
  font-weight: 400;
}
.pe-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  outline: none;
}
.pe-input.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pe-input.mono { font-family: 'IBM Plex Mono', monospace; }
.pe-input::placeholder { color: var(--mid-2); }
.pe-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
  background: var(--input-bg);
  border: 1px solid var(--border);
}
.pe-help {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.pe-select {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.pe-select .chev { color: var(--mid); width: 14px; height: 14px; }

.pe-chip-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 10px;
  display: flex; gap: 5px; flex-wrap: wrap;
  align-items: center;
  min-height: 38px;
}
.pe-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 11px;
  padding: 3px 4px 3px 9px;
  border-radius: 0;
}
.pe-chip .x {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--mid);
  cursor: pointer;
}
.pe-chip .x:hover { color: var(--danger); }
.pe-chip-add {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 12px;
  font-family: inherit;
  padding: 3px;
}

/* Gallery */
.pe-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.pe-gallery-slot {
  aspect-ratio: 1;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: grid; place-items: center;
}
.pe-gallery-slot.has-image {
  background: var(--paper-3);
}
.pe-gallery-slot.empty {
  background: var(--paper-2);
  border: 2px dashed var(--border);
  color: var(--mid);
  font-size: 11px;
  flex-direction: column;
}
.pe-gallery-slot.empty:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pe-gallery-slot.empty svg { margin-bottom: 6px; }
.pe-gallery-slot.empty .text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-align: center;
}
.pe-gallery-slot .primary-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--accent);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 0;
  font-weight: 600;
  z-index: 1;
}
.pe-gallery-slot .actions {
  position: absolute;
  bottom: 6px; right: 6px;
  display: flex; gap: 3px;
  z-index: 1;
}
.pe-gallery-slot .actions > div {
  background: rgba(0,0,0,.55);
  color: var(--paper);
  width: 22px; height: 22px;
  border-radius: 0;
  display: grid; place-items: center;
  backdrop-filter: blur(3px);
}
.pe-gallery-slot .order {
  position: absolute;
  top: 6px; right: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  background: rgba(0,0,0,.55);
  color: var(--paper);
  padding: 2px 6px;
  border-radius: 0;
  z-index: 1;
}
.pe-gallery-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 0;
  font-size: 11px;
  display: flex; align-items: center; gap: 8px;
}

/* Variant matrix */
.pe-variant-meta {
  display: flex; gap: 16px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  align-items: center;
}
.pe-variant-meta .item {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px;
}
.pe-variant-meta .item .l { color: var(--mid); }
.pe-variant-meta .item .v {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
}

.pe-variant-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.pe-variant-axis {
  padding: 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
}
.pe-variant-axis-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.pe-variant-axis-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.pe-variant-axis-edit {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}
.pe-variant-values {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.pe-variant-value {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 11px;
  color: var(--ink-2);
}
.pe-variant-value .swatch {
  width: 12px; height: 12px;
  border-radius: 0;
}

.pe-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--paper);
}
.pe-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pe-matrix th,
.pe-matrix td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
}
.pe-matrix th:last-child,
.pe-matrix td:last-child { border-right: none; }
.pe-matrix tr:last-child td { border-bottom: none; }
.pe-matrix th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  background: var(--paper-2);
}
.pe-matrix .axis-l {
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  white-space: nowrap;
}
.pe-matrix .axis-l .swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 0;
  vertical-align: middle;
  margin-right: 6px;
}
.pe-matrix-sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
}
.pe-matrix-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}
.pe-matrix-stock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--good);
}
.pe-matrix-stock.low { color: var(--warn); }
.pe-matrix-stock.out { color: var(--danger); }
.pe-matrix-stock.custom { color: var(--mid); font-style: italic; }
.pe-matrix .cell-grid {
  display: flex; flex-direction: column; gap: 2px;
}

/* Pricing tiers */
.pe-tier-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
.pe-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px;
  gap: 10px;
  padding: 12px 14px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  background: var(--paper);
}
.pe-tier-row:last-child { border-bottom: none; }
.pe-tier-row.head {
  background: var(--paper-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.pe-tier-qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.pe-tier-discount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.pe-tier-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}
.pe-tier-actions {
  color: var(--mid);
  display: flex; gap: 4px;
  justify-content: flex-end;
}

.pe-addon-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pe-addon-row {
  display: grid;
  grid-template-columns: 24px 1fr 100px 40px;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  align-items: center;
}
.pe-addon-handle {
  color: var(--mid-2);
  cursor: grab;
}
.pe-addon-info .name { font-size: 12px; font-weight: 500; color: var(--ink); }
.pe-addon-info .desc { font-size: 11px; color: var(--mid); }
.pe-addon-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* Spec list */
.pe-spec-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pe-spec-row {
  display: grid;
  grid-template-columns: 24px 200px 1fr 40px;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  align-items: center;
}
.pe-spec-row:last-child { border-bottom: none; }
.pe-spec-row.add { background: var(--paper-2); color: var(--mid); }
.pe-spec-handle { color: var(--mid-2); cursor: grab; }
.pe-spec-key {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.pe-spec-value {
  font-size: 12px;
  color: var(--ink);
}
.pe-spec-value.mono { font-family: 'IBM Plex Mono', monospace; }
.pe-spec-actions { color: var(--mid); text-align: right; }

/* Description editor */
.pe-rich-toolbar {
  display: flex; gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.pe-rich-toolbar > div,
.pe-rich-toolbar > button {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 0;
  color: var(--mid);
  font-size: 12px;
  cursor: pointer;
  background: transparent;
  border: 1px solid transparent;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.pe-rich-toolbar > div:hover,
.pe-rich-toolbar > button:hover { background: var(--paper-3); color: var(--ink); }
.pe-rich-toolbar > div.active { background: var(--ink); color: var(--paper); }
.pe-rich-toolbar .divider {
  width: 1px; height: 20px;
  background: var(--border);
  margin: 4px 4px;
  cursor: default;
}
.pe-rich-content {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.65;
  min-height: 140px;
  background: var(--paper);
}
.pe-rich-content p { margin: 0 0 10px; }
.pe-rich-content ul { margin: 8px 0; padding-left: 20px; }
.pe-rich-content li { margin-bottom: 4px; }

/* Right sidebar cards */
.pe-side-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.pe-side-card-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-2);
  display: flex; justify-content: space-between; align-items: center;
}
.pe-side-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.pe-side-card-title .ico { color: var(--mid); }
.pe-side-card-action {
  font-size: 10px;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.pe-side-card-body {
  padding: 12px 14px;
}

.pe-radio-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pe-radio-row {
  display: flex; gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  padding: 7px 0;
}
.pe-radio {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}
.pe-radio.checked { border-color: var(--accent); }
.pe-radio.checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.pe-radio-body { flex: 1; min-width: 0; }
.pe-radio-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.pe-radio-desc {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.4;
  margin-top: 2px;
}

.pe-toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.pe-toggle-row + .pe-toggle-row { border-top: 1px solid var(--border-2); }
.pe-toggle-row .text {
  flex: 1;
}
.pe-toggle-row .text .name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.pe-toggle-row .text .desc {
  font-size: 10px;
  color: var(--mid);
  line-height: 1.4;
  margin-top: 1px;
}
.pe-toggle {
  width: 32px; height: 18px;
  border-radius: 0;
  background: var(--paper-3);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.pe-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: left .15s;
}
.pe-toggle.on {
  background: var(--accent);
}
.pe-toggle.on::after { left: 16px; }

.pe-stock-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.pe-stock-block {
  padding: 10px;
  background: var(--paper-2);
  border-radius: 0;
  text-align: center;
}
.pe-stock-block .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 3px;
}
.pe-stock-block .v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
}

.pe-ai-side {
  background: var(--ai-soft);
  border: 1px solid var(--ai);
}
.pe-ai-side .pe-side-card-head { border-bottom-color: rgba(123,143,107,.25); }
.pe-ai-side .pe-side-card-title { color: var(--ai-deep); }
.pe-ai-side .pe-side-card-title .ai-mark {
  width: 18px; height: 18px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 500;
}
.pe-ai-suggestion {
  padding: 8px 0;
  border-bottom: 1px solid rgba(123,143,107,.2);
  display: flex; gap: 8px;
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.5;
}
.pe-ai-suggestion:last-child { border-bottom: none; }
.pe-ai-suggestion strong { font-weight: 600; }
.pe-ai-suggestion .bullet {
  width: 4px; height: 4px;
  background: var(--ai);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.pe-ai-suggestion .accept {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--ai-deep);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 0;
  margin-top: 6px;
  display: inline-block;
  align-self: flex-start;
  cursor: pointer;
}

.pe-url-preview {
  background: var(--paper-2);
  padding: 8px 10px;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-top: 6px;
}
.pe-url-preview .domain { color: var(--mid-2); }
.pe-url-preview .slug { color: var(--ink); font-weight: 500; }

/* Bottom action bar (sticky) */
.pe-actions-bar {
  position: absolute;
  bottom: 0; left: 220px; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: 12px 28px;
  display: flex; align-items: center; gap: 10px;
  z-index: 5;
  box-shadow: 0 -2px 12px rgba(27,42,58,.06);
}
.pe-actions-bar .info {
  font-size: 11px;
  color: var(--mid);
  display: flex; align-items: center; gap: 8px;
}
.pe-actions-bar .info .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
}
.pe-actions-bar .right {
  margin-left: auto;
  display: flex; gap: 8px;
}

/* ============================================================
   AUTH · LOGIN · SIGN-UP · ONBOARDING
   ============================================================ */
.auth-stage {
  background: var(--paper);
  min-height: 100%;
  display: grid;
  place-items: center;
  padding: 40px 24px 60px;
  position: relative;
}
.auth-stage::before {
  content: '';
  position: absolute;
  top: -10%; left: 40%;
  width: 600px; height: 600px;
  background: var(--accent);
  opacity: 0.04;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.auth-stage::after {
  content: '';
  position: absolute;
  bottom: -10%; left: 5%;
  width: 400px; height: 400px;
  background: var(--ai);
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}
.auth-card {
  position: relative;
  z-index: 1;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 28px rgba(27,42,58,.06);
}
.auth-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 32px;
}



.auth-brand .wordmark {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--ink);
  line-height: 1;
}
.auth-brand .wordmark em {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.auth-brand .wordmark .dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.04em;
  vertical-align: 0.05em;
}
.auth-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
}
.auth-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.auth-sub {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 24px;
}
.auth-form {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.auth-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.auth-field .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  display: flex; justify-content: space-between;
}
.auth-field .label .helper {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}
.auth-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.auth-input.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-input.with-icon {
  padding-left: 36px;
  background-image: none;
  position: relative;
}
.auth-input-wrap {
  position: relative;
}
.auth-input-wrap > svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--mid);
  width: 16px; height: 16px;
  pointer-events: none;
}
.auth-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  margin-bottom: 16px;
}
.auth-check {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-2);
}
.auth-check .box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
}
.auth-check .box.checked {
  background: var(--ink);
  border-color: var(--ink);
  display: grid; place-items: center;
  color: var(--paper);
}
.auth-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-family: inherit;
  padding: 12px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.auth-btn:hover { background: var(--accent-deep); }
.auth-divider {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 18px 0;
  position: relative;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%; width: 35%;
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after { right: 0; }
.auth-social {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.auth-social-btn {
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: inherit;
  padding: 10px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.auth-social-btn .ico-brand {
  width: 16px; height: 16px;
  border-radius: 0;
}
.auth-foot {
  text-align: center;
  font-size: 12px;
  color: var(--mid);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Onboarding */
.onb-top .skip:hover { background: var(--paper-2); border-color: var(--mid-2); }
.onb-top .brand {
  display: flex; align-items: center; gap: 8px;
  font-weight: 600;
  font-size: 14px;
}

.onb-top .skip {
  margin-left: auto;
  font-size: 12px;
  color: var(--mid);
}
.onb-step-current strong { font-size: 14px; }
.onb-h em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.onb-tip .ic {
  width: 24px; height: 24px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
}
.onb-tip .text {
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.55;
}
.onb-tip strong { font-weight: 600; }
.onb-side-item .check {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.onb-side-item.done .check {
  background: var(--good);
  color: var(--paper);
}
.onb-side-item.active .check {
  background: var(--accent);
  color: var(--paper);
  animation: pulse 1.6s infinite;
}
.onb-side-item:not(.done):not(.active) .check {
  border: 1.5px solid var(--mid-2);
}
.onb-side-item .text {
  flex: 1;
  color: var(--ink-2);
}
.onb-side-item.done .text { color: var(--mid); text-decoration: line-through; }
.onb-side-item.active .text { color: var(--ink); font-weight: 600; }
.onb-side-item .meta {
  display: block;
  font-size: 11px;
  color: var(--mid);
  font-weight: 400;
  text-decoration: none;
  margin-top: 2px;
}

/* ============================================================
   PL · PRODUCT LIST (reuses .ql- styles + adds thumbnail)
   ============================================================ */
.pl-thumb {
  width: 44px; height: 44px;
  border-radius: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pl-thumb .count {
  position: absolute;
  bottom: 2px; right: 2px;
  background: rgba(0,0,0,.55);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 0;
}
.pl-row {
  display: grid;
  grid-template-columns: 32px 56px 1fr 120px 100px 110px 90px 100px 80px 40px;
  padding: 12px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  gap: 12px;
}
.pl-row.head {
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 28px;
}
.pl-row:not(.head):hover { background: var(--paper-2); cursor: pointer; }
.pl-row.selected { background: var(--accent-soft); }
.pl-info { min-width: 0; }
.pl-info .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-info .sku {
  font-size: 11px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 2px;
}
.pl-cat-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 0;
  background: var(--paper-3);
  color: var(--ink-2);
  display: inline-block;
}
.pl-variants {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}
.pl-variants .sub {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-family: inherit;
}
.pl-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.pl-price .from {
  display: block;
  font-size: 9px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pl-stock-bar {
  display: flex; flex-direction: column; gap: 3px;
}
.pl-stock-bar .v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.pl-stock-bar .v.ok { color: var(--good); }
.pl-stock-bar .v.low { color: var(--warn); }
.pl-stock-bar .v.out { color: var(--danger); }
.pl-stock-bar .label {
  font-size: 10px;
  color: var(--mid);
}
.pl-vis {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 0;
}
.pl-vis.live { background: var(--good-soft); color: var(--good); }
.pl-vis.internal { background: var(--paper-3); color: var(--mid); }
.pl-vis.draft { background: var(--warn-soft); color: var(--warn); }
.pl-sales {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.pl-sales .trend {
  font-size: 10px;
  color: var(--good);
}
.pl-sales .trend.down { color: var(--danger); }
.pl-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pl-view-toggle .btn {
  padding: 6px 10px;
  background: var(--paper);
  color: var(--mid);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.pl-view-toggle .btn:last-child { border-right: none; }
.pl-view-toggle .btn.active { background: var(--paper-3); color: var(--ink); font-weight: 600; }

/* ============================================================
   CAT · CATEGORY MANAGEMENT
   ============================================================ */
.cat-page {
  flex: 1;
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr 360px;
  overflow: hidden;
}
.cat-main {
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cat-toolbar {
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
  display: flex; justify-content: space-between; align-items: center;
}
.cat-title h1 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
  display: inline-flex; align-items: baseline; gap: 8px;
}
.cat-title .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  background: var(--paper-3);
  padding: 2px 8px;
  border-radius: 0;
}
.cat-title .desc {
  font-size: 12px;
  color: var(--mid);
  margin-top: 4px;
}
.cat-tree {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}
.cat-node {
  position: relative;
}
.cat-node-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  border-radius: 0;
  cursor: pointer;
  position: relative;
}
.cat-node-row:hover { background: var(--paper-2); }
.cat-node-row.selected { background: var(--accent-soft); }
.cat-node-row.selected::before {
  content: '';
  position: absolute;
  left: -16px; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0;
}
.cat-handle {
  color: var(--mid-2);
  cursor: grab;
  opacity: 0;
  transition: opacity .12s;
}
.cat-node-row:hover .cat-handle { opacity: 1; }
.cat-chev {
  width: 16px; height: 16px;
  display: grid; place-items: center;
  color: var(--mid);
  cursor: pointer;
}
.cat-chev.open svg { transform: rotate(90deg); }
.cat-chev.leaf { opacity: 0.25; }
.cat-icon {
  width: 24px; height: 24px;
  background: var(--paper-3);
  border-radius: 0;
  display: grid; place-items: center;
  color: var(--accent);
  flex-shrink: 0;
}
.cat-icon svg { width: 14px; height: 14px; }
.cat-name {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.cat-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 0;
}
.cat-node-row.selected .cat-count {
  background: var(--paper-2);
  color: var(--accent-deep);
}
.cat-node-actions {
  margin-left: auto;
  display: flex; gap: 2px;
  color: var(--mid);
  opacity: 0;
}
.cat-node-row:hover .cat-node-actions { opacity: 1; }
.cat-node-actions > div {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
}
.cat-node-actions > div:hover { background: var(--paper-3); color: var(--ink-2); }
.cat-children {
  margin-left: 24px;
  border-left: 1px dashed var(--border);
  padding-left: 12px;
  position: relative;
}
.cat-add-row {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px 8px 30px;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
  border-radius: 0;
}
.cat-add-row:hover {
  background: var(--paper-2);
  color: var(--accent);
}
.cat-detail {
  background: var(--paper-2);
  border-left: 1px solid var(--border);
  overflow-y: auto;
  padding: 20px;
}
.cat-detail-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.cat-detail-crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 6px;
}
.cat-detail-name {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 4px;
}
.cat-detail-meta {
  font-size: 12px;
  color: var(--mid);
}
.cat-detail-image {
  height: 140px;
  background: linear-gradient(135deg, #8B7355, #4A3C2C);
  border-radius: 0;
  display: grid; place-items: center;
  margin-bottom: 16px;
  position: relative;
  cursor: pointer;
}
.cat-detail-image .change {
  position: absolute;
  bottom: 8px; right: 8px;
  background: rgba(27,42,58,.7);
  color: var(--paper);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
}
.cat-detail-products {
  margin-top: 18px;
}
.cat-detail-products .head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.cat-detail-products .head .t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.cat-detail-products .head .link {
  font-size: 11px;
  color: var(--accent);
}
.cat-mini-product {
  display: flex; gap: 10px;
  padding: 8px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 6px;
}
.cat-mini-product .thumb {
  width: 36px; height: 36px;
  border-radius: 0;
  flex-shrink: 0;
}
.cat-mini-product .info { flex: 1; min-width: 0; }
.cat-mini-product .name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cat-mini-product .meta {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}

/* ============================================================
   RPT · REPORTS / ANALYTICS
   ============================================================ */
.rpt-page {
  flex: 1;
  background: var(--paper);
  overflow-y: auto;
}
.rpt-top {
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
  display: flex; justify-content: space-between; align-items: center;
}
.rpt-top h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.rpt-period {
  display: flex; border: 1px solid var(--border); border-radius: 0; overflow: hidden;
}
.rpt-period-btn {
  padding: 6px 14px;
  background: var(--paper);
  color: var(--mid);
  font-size: 12px;
  cursor: pointer;
  border-right: 1px solid var(--border);
  font-family: inherit;
}
.rpt-period-btn:last-child { border-right: none; }
.rpt-period-btn.active { background: var(--ink); color: var(--paper); font-weight: 600; }
.rpt-period-custom {
  padding: 6px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex; align-items: center; gap: 5px;
}

.rpt-insight-ribbon {
  background: var(--ai-soft);
  border-bottom: 1px solid var(--ai);
  padding: 12px 28px;
  display: flex; align-items: center; gap: 12px;
  font-size: 12px;
  color: var(--ai-deep);
}
.rpt-insight-ribbon .ic {
  width: 28px; height: 28px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  flex-shrink: 0;
}
.rpt-insight-ribbon strong { font-weight: 600; }
.rpt-insight-ribbon .link {
  color: var(--ai-deep);
  font-weight: 600;
  margin-left: auto;
  white-space: nowrap;
}

.rpt-grid {
  padding: 24px 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.rpt-kpi {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px;
}
.rpt-kpi .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}
.rpt-kpi .value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 4px;
}
.rpt-kpi .value em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.rpt-kpi .delta {
  font-size: 11px;
  color: var(--good);
  display: inline-flex; align-items: center; gap: 3px;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}
.rpt-kpi .delta.down { color: var(--danger); }
.rpt-kpi .compare {
  font-size: 10px;
  color: var(--mid);
  margin-left: 4px;
}

.rpt-section {
  padding: 0 28px 24px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.rpt-section.full { grid-template-columns: 1fr; }
.rpt-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.rpt-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.rpt-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.rpt-card-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.rpt-card-body { padding: 18px; }

/* Chart placeholder */
.rpt-chart {
  height: 240px;
  position: relative;
  background: var(--paper);
}
.rpt-chart-axis-y {
  position: absolute;
  left: 0; top: 0; bottom: 24px;
  width: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  padding-right: 8px;
  text-align: right;
}
.rpt-chart-axis-x {
  position: absolute;
  left: 40px; right: 0; bottom: 0;
  height: 20px;
  display: flex; justify-content: space-between;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
}
.rpt-chart-area {
  position: absolute;
  left: 40px; top: 0; right: 0; bottom: 24px;
  border-left: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.rpt-chart-grid {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
}
.rpt-chart-grid > div {
  border-top: 1px dashed var(--border-2);
}
.rpt-chart-svg {
  position: absolute; inset: 0;
}

/* Funnel viz */
.rpt-funnel {
  padding: 12px 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.rpt-funnel-row {
  display: grid;
  grid-template-columns: 130px 1fr 80px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
}
.rpt-funnel-name {
  color: var(--ink-2);
  font-weight: 500;
}
.rpt-funnel-bar-wrap {
  background: var(--paper);
  border-radius: 0;
  height: 28px;
  position: relative;
}
.rpt-funnel-bar {
  height: 100%;
  border-radius: 0;
  position: relative;
}
.rpt-funnel-bar .label {
  position: absolute;
  right: 8px; top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--paper);
}
.rpt-funnel-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  text-align: right;
}
.rpt-funnel-meta .pct { color: var(--ink); font-weight: 600; }
.rpt-funnel-meta .drop { color: var(--danger); display: block; font-size: 10px; }

/* Top list */
.rpt-top-list { display: flex; flex-direction: column; }
.rpt-top-item {
  display: grid;
  grid-template-columns: 24px 36px 1fr 80px;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 12px;
}
.rpt-top-item:last-child { border-bottom: none; }
.rpt-top-item .rank {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  color: var(--mid);
  text-align: center;
  line-height: 1;
}
.rpt-top-item .rank.gold { color: var(--accent); }
.rpt-top-item .thumb {
  width: 36px; height: 36px;
  border-radius: 0;
}
.rpt-top-item .info { min-width: 0; }
.rpt-top-item .name {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rpt-top-item .meta {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}
.rpt-top-item .value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}

.rpt-rep-row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 100px 80px;
  gap: 10px;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 12px;
}
.rpt-rep-row.head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--border);
}
.rpt-rep-row .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}
.rpt-rep-row .progress-bar {
  height: 6px;
  background: var(--paper-3);
  border-radius: 0;
  position: relative;
}
.rpt-rep-row .progress-bar::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--accent);
  border-radius: 0;
}

/* ============================================================
   ST · SYSTEM STATES (empty, error, loading)
   ============================================================ */
.st-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
  padding: 0;
}
.st-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  height: 460px;
  display: flex; flex-direction: column;
}
.st-card-label {
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.st-card-body {
  flex: 1;
  display: grid; place-items: center;
  padding: 32px 24px;
  text-align: center;
  position: relative;
}
.st-illust {
  margin-bottom: 20px;
  position: relative;
}
.st-illust-paper {
  width: 90px; height: 110px;
  background: var(--paper-3);
  border-radius: 0;
  position: relative;
  margin: 0 auto;
}
.st-illust-paper::before {
  content: '';
  position: absolute;
  top: 18px; left: 16px; right: 16px;
  height: 5px;
  background: var(--mid-2);
  border-radius: 0;
  opacity: 0.4;
}
.st-illust-paper::after {
  content: '';
  position: absolute;
  top: 32px; left: 16px;
  width: 40px;
  height: 5px;
  background: var(--mid-2);
  border-radius: 0;
  opacity: 0.3;
}
.st-illust-search {
  position: absolute;
  bottom: -10px; right: -10px;
  width: 40px; height: 40px;
  background: var(--input-bg);
  border: 2px solid var(--mid);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--mid);
}
.st-illust-paper.tilt { transform: rotate(-6deg); }
.st-h {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.st-h em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
}
.st-desc {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 18px;
  max-width: 280px;
}
.st-actions {
  display: flex; gap: 6px; justify-content: center;
}
.st-help {
  margin-top: 14px;
  font-size: 11px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}
.st-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  background: var(--paper-2);
  padding: 4px 10px;
  border-radius: 0;
  margin-top: 10px;
  display: inline-block;
}

.st-error-icon {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--danger-soft);
  color: var(--danger);
  display: grid; place-items: center;
  margin: 0 auto 18px;
}
.st-error-icon svg { width: 32px; height: 32px; }

/* Skeleton loading */
.st-skel-row {
  display: flex; gap: 12px;
  align-items: center;
  padding: 10px 16px;
  width: 100%;
  border-bottom: 1px solid var(--border-2);
}
.st-skel {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  background-size: 200% 100%;
  animation: skel 1.4s infinite linear;
  border-radius: 0;
}
@keyframes skel {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.st-skel.circle { border-radius: 50%; }
.st-skel.box { border-radius: 0; }

.powered-wm {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  color: var(--ink);
  font-style: normal;
}
.powered-wm em {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-style: normal;
  font-weight: 700;
  color: var(--accent);
}
.powered-wm .dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.04em;
  vertical-align: 0.05em;
}

/* Footer */
.deck-footer {
  text-align: center;
  padding: 64px 32px;
  color: var(--mid);
  font-size: 12px;
  border-top: 1px solid var(--border);
}
.deck-footer em {
  font-family: 'Fraunces', serif;
  font-style: italic;
}

/* ============================================================
   CU2 · CUSTOMER 360
   ============================================================ */
.c360 {
  flex: 1; overflow-y: auto;
  padding: 0;
}
.c360-header {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 28px 32px 20px;
}
.c360-crumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 16px;
}
.c360-crumb a { color: var(--mid); text-decoration: none; }
.c360-crumb .sep { color: var(--mid-2); }
.c360-crumb .cur { color: var(--ink); }

.c360-top {
  display: flex; gap: 20px;
  align-items: flex-start;
}
.c360-avatar {
  width: 72px; height: 72px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color: var(--paper);
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 32px;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.c360-info { flex: 1; min-width: 0; }
.c360-name-row {
  display: flex; align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.c360-name {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.c360-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.c360-meta {
  display: flex; gap: 24px;
  font-size: 12px;
  color: var(--mid);
  flex-wrap: wrap;
}
.c360-meta-item {
  display: flex; align-items: center; gap: 6px;
}
.c360-meta-item .ico { color: var(--mid-2); }
.c360-meta-item .val { color: var(--ink-2); }
.c360-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}

.c360-kpis {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 16px 32px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.c360-kpi {
  padding: 0 20px;
  border-right: 1px solid var(--border);
}
.c360-kpi:first-child { padding-left: 0; }
.c360-kpi:last-child { border-right: none; }
.c360-kpi .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.c360-kpi .value {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.c360-kpi .sub {
  font-size: 11px;
  color: var(--mid);
  margin-top: 2px;
}

.c360-tabs {
  background: var(--paper-2);
  padding: 0 32px;
  display: flex; gap: 0;
  border-bottom: 1px solid var(--border);
}
.c360-tab {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--mid);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.c360-tab.active {
  color: var(--ink);
  font-weight: 600;
  border-bottom-color: var(--accent);
}
.c360-tab .count {
  background: var(--paper-3);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 500;
}
.c360-tab.active .count { background: var(--accent-soft); color: var(--accent-deep); }

.c360-body {
  padding: 24px 32px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
}

.tl {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.tl-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
}
.tl-head .title {
  font-weight: 600;
  font-size: 14px;
}
.tl-head .filter {
  margin-left: auto;
  display: flex; gap: 4px;
}
.tl-filter-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 0;
  color: var(--mid);
  cursor: pointer;
}
.tl-filter-pill.active { background: var(--paper-3); color: var(--ink); font-weight: 500; }

.tl-list {
  padding: 0 18px;
}
.tl-day {
  padding: 14px 0 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px dashed var(--border);
  margin-bottom: 8px;
}

.tl-event {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-2);
}
.tl-event:last-child { border-bottom: none; }
.tl-event-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--ink-2);
  display: grid; place-items: center;
  margin-top: 2px;
}
.tl-event-icon.good { background: var(--good-soft); color: var(--good); }
.tl-event-icon.accent { background: var(--accent-soft); color: var(--accent-deep); }
.tl-event-icon.ai { background: var(--ai-soft); color: var(--ai-deep); }
.tl-event-body { min-width: 0; }
.tl-event-title {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 2px;
}
.tl-event-title strong { font-weight: 600; }
.tl-event-desc {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}
.tl-event-quote {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper);
  border-left: 2px solid var(--border);
  border-radius: 0;
  font-size: 12px;
  color: var(--ink-2);
  font-style: italic;
}
.tl-event-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  flex-shrink: 0;
  padding-top: 6px;
}

.c360-side {
  display: flex; flex-direction: column;
  gap: 16px;
}
.c360-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px;
}
.c360-card .head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
  display: flex; align-items: center; justify-content: space-between;
}
.c360-card .head .add {
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}

.c360-ai {
  background: var(--ai-soft);
  border: 1px solid transparent;
  border-radius: 0;
  padding: 18px;
}
.c360-ai .head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.c360-ai .head .icon {
  width: 24px; height: 24px;
  background: var(--ai);
  color: var(--paper-2);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
}
.c360-ai .head .title { font-weight: 600; font-size: 13px; color: var(--ai-deep); }
.c360-ai p {
  font-size: 13px;
  color: var(--ai-deep);
  line-height: 1.6;
  margin-bottom: 8px;
}
.c360-ai p strong { font-weight: 600; }
.c360-ai-stat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(123,143,107,.25);
}
.c360-ai-stat-item .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ai-deep);
  opacity: 0.7;
  margin-bottom: 2px;
}
.c360-ai-stat-item .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-deep);
}

.contact-row {
  display: flex; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2);
  align-items: center;
}
.contact-row:last-child { border-bottom: none; }
.contact-row .avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ai-soft), var(--accent-soft));
  display: grid; place-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.contact-row .info { flex: 1; min-width: 0; }
.contact-row .name { font-size: 13px; color: var(--ink); font-weight: 500; }
.contact-row .role { font-size: 11px; color: var(--mid); }
.contact-row .actions { display: flex; gap: 4px; color: var(--mid); }

.open-deal {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.open-deal:last-child { margin-bottom: 0; }
.open-deal .top {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.open-deal .title { font-size: 12px; font-weight: 600; color: var(--ink); }
.open-deal .amt { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--ink); }
.open-deal .meta { font-size: 11px; color: var(--mid); display: flex; gap: 8px; }

.tag-cloud {
  display: flex; gap: 6px; flex-wrap: wrap;
}

/* ============================================================
   S2 · SETTINGS
   ============================================================ */
.settings {
  flex: 1; display: grid;
  grid-template-columns: 240px 1fr;
  overflow: hidden;
  height: 100%;
}
.set-sub {
  background: var(--paper-2);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.set-sub-title {
  padding: 0 24px 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.set-sub-section {
  padding: 16px 24px 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.set-sub-item {
  padding: 8px 24px;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  border-left: 2px solid transparent;
}
.set-sub-item:hover { background: var(--paper-3); }
.set-sub-item.active {
  background: var(--paper-3);
  border-left-color: var(--accent);
  font-weight: 600;
  color: var(--ink);
}
.set-sub-item .ico { color: var(--mid); }
.set-sub-item.active .ico { color: var(--accent); }

.set-main {
  overflow-y: auto;
  padding: 10px 40px 60px;
  margin: 0 auto;
  width: 100%;
  background: var(--paper);
}
.set-page-head {
  margin-bottom: 28px;
  display: flex; align-items: flex-end; justify-content: space-between;
}
.set-page-head .title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}
.set-page-head .desc {
  font-size: 13px;
  color: var(--mid);
}

.set-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.set-card-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.set-card-head .title {
  font-weight: 600;
  font-size: 14px;
}
.set-card-head .sub {
  font-size: 12px;
  color: var(--mid);
}
.set-card-body { padding: 20px; }

.set-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-2);
  align-items: flex-start;
}
.set-row:last-child { border-bottom: none; }
.set-row .label {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 500;
  padding-top: 6px;
}
.set-row .label .sub {
  font-size: 11px;
  font-weight: 400;
  color: var(--mid);
  margin-top: 2px;
}
.set-row .control {
  font-size: 13px;
}

.set-input {
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
}
.set-input.mono { font-family: 'IBM Plex Mono', monospace; }
.set-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.set-logo-zone {
  display: flex; align-items: center; gap: 14px;
}
.set-logo {
  width: 64px; height: 64px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 24px;
  font-family: 'IBM Plex Sans Thai';
}
.set-logo-actions {
  display: flex; flex-direction: column; gap: 6px;
}
.set-logo-actions .hint {
  font-size: 11px;
  color: var(--mid);
}
/* Visually hide file inputs but keep them clickable via the linked <label for=...>.
   `display:none` would make the input unfocusable and break label-click → file-picker. */
.set-logo-actions input[type="file"],
.set-logo-zone > input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Camera badge anchored to the bottom-right corner of the preview (avatar-style).
   Sits on top of whatever child the label wraps (.set-logo / <img> / placeholder). */
.cp-img-preview {
  display: inline-block;
  position: relative;  /* anchor for .cp-img-badge */
}
.cp-img-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  pointer-events: none;       /* label handles the click */
  transition: transform .12s ease;
}
.cp-img-preview:hover .cp-img-badge { transform: scale(1.08); }
/* Smaller variant for the 28px sidebar avatar — keeps the badge visible
   without dwarfing the parent. */
.cp-img-badge-sm {
  width: 14px; height: 14px;
  right: -2px; bottom: -2px;
}

.set-branch {
  display: grid;
  grid-template-columns: 80px 1fr 1fr auto;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 6px;
  align-items: center;
  font-size: 12px;
}
.set-branch .code {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: var(--ink);
}
.set-branch .name { color: var(--ink); }
.set-branch .addr { color: var(--mid); font-size: 11px; }

.set-bank {
  display: grid;
  grid-template-columns: 40px 1fr 1fr auto;
  gap: 14px;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 6px;
  align-items: center;
}
.set-bank-logo {
  width: 36px; height: 36px;
  border-radius: 0;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--paper);
}
.set-bank-name { font-size: 13px; color: var(--ink); font-weight: 500; }
.set-bank-acct { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--mid); }
.set-bank-holder { font-size: 12px; color: var(--ink-2); }

.set-color-row {
  display: flex; gap: 10px;
  align-items: center;
}
.set-color-swatch {
  width: 36px; height: 36px;
  border-radius: 0;
  border: 2px solid var(--paper-2);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
}
.set-color-swatch.selected {
  box-shadow: 0 0 0 2px var(--ink);
}
.set-color-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  margin-left: 6px;
}

.set-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.set-toggle-switch {
  width: 32px; height: 18px;
  background: var(--ai);
  border-radius: 0;
  position: relative;
}
.set-toggle-switch::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: var(--paper);
  border-radius: 50%;
  top: 2px;
  right: 2px;
}
.set-toggle-switch.off { background: var(--border); }
.set-toggle-switch.off::after { right: auto; left: 2px; }

.set-save-bar {
  position: sticky; bottom: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 12px 20px;
  margin: 24px -40px 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px;
  box-shadow: 0 -8px 24px rgba(27,42,58,.04);
}
.set-save-status {
  margin-right: auto;
  font-size: 12px;
  color: var(--mid);
}

/* ============================================================
   MOBILE VARIANTS
   ============================================================ */
.mobile-trio {
  display: flex; gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.frame-mobile.tall {
  height: 844px;
}
.frame-mobile-label {
  text-align: center;
  margin-top: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.frame-mobile-label strong { color: var(--accent); font-weight: 500; }

/* Mobile app chrome */
.m-app {
  background: var(--paper-2);
  min-height: 100%;
  position: relative;
  padding-bottom: 60px;
}
.m-topbar {
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 5;
}
.m-topbar .menu { padding: 6px; color: var(--ink); }
.m-topbar .title {
  flex: 1;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.m-topbar .title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.m-topbar .action { padding: 6px; color: var(--ink-2); position: relative; }
.m-topbar .action .dot {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px;
  background: var(--accent);
  border: 1.5px solid var(--paper-2);
  border-radius: 50%;
}

.m-bottom-nav {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--paper-2);
  border-top: 1px solid var(--border);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  display: flex;
  z-index: 4;
}
.m-tab {
  flex: 1;
  text-align: center;
  padding: 6px 2px;
  font-size: 10px;
  color: var(--mid);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.m-tab .ico { width: 20px; height: 20px; }
.m-tab.active { color: var(--accent); font-weight: 600; }

/* M-D1: Mobile dashboard */
.m-d-body {
  padding: 16px;
  height: calc(100% - 60px - 50px);
  overflow-y: auto;
}
.m-greet {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 2px;
}
.m-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 20px;
}
.m-kpi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 16px;
}
.m-kpi {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
}
.m-kpi.accent {
  background: linear-gradient(135deg, var(--accent-soft), var(--paper));
  border-color: var(--accent-soft);
}
.m-kpi .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.m-kpi .value {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.m-kpi.accent .value { color: var(--accent-deep); }
.m-kpi .sub {
  font-size: 10px;
  color: var(--mid);
  margin-top: 2px;
}

.m-ai-card {
  background: var(--ai-soft);
  border-radius: 0;
  padding: 14px;
  margin-bottom: 16px;
}
.m-ai-card .head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.m-ai-card .head .ic {
  width: 20px; height: 20px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 500;
}
.m-ai-card .head .title {
  font-size: 11px; font-weight: 600; color: var(--ai-deep);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.m-ai-card p {
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.55;
}
.m-ai-card p strong { font-weight: 600; }
.m-ai-card .actions {
  display: flex; gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.m-ai-card .pill {
  font-size: 10px;
  background: var(--paper-2);
  border: 1px solid var(--ai);
  color: var(--ai-deep);
  padding: 3px 8px;
  border-radius: 0;
}

.m-sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 8px 0 10px;
}
.m-sec-head .title { font-size: 12px; font-weight: 600; color: var(--ink); }
.m-sec-head .link { font-size: 11px; color: var(--accent); }

.m-task {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 10px;
}
.m-task .check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  flex-shrink: 0;
}
.m-task.overdue .check { border-color: var(--danger); }
.m-task .body { flex: 1; min-width: 0; }
.m-task .title { font-size: 12px; color: var(--ink); }
.m-task .meta { font-size: 10px; color: var(--mid); display: flex; gap: 6px; align-items: center; }
.m-task .when { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--mid); }
.m-task.overdue .when { color: var(--danger); }

/* M-I2: Mobile chat */
.m-chat-head {
  padding: 10px 12px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  position: sticky; top: 0; z-index: 5;
}
.m-chat-head .back { padding: 4px; color: var(--ink); }
.m-chat-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  display: grid; place-items: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 12px;
  position: relative;
}
.m-chat-avatar .ch {
  position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #06C755;
  border: 2px solid var(--paper-2);
  border-radius: 50%;
}
.m-chat-head .info { flex: 1; min-width: 0; }
.m-chat-head .name { font-size: 13px; font-weight: 600; }
.m-chat-head .meta { font-size: 10px; color: var(--mid); }
.m-chat-head .actions { display: flex; gap: 4px; color: var(--ink-2); }

.m-chat-stream {
  padding: 12px;
  background: var(--paper);
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 4px;
  min-height: 480px;
}
.m-bubble {
  max-width: 78%;
  padding: 8px 11px;
  border-radius: 0;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 2px;
}
.m-bubble.in {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  border-bottom-left-radius: 4px;
}
.m-bubble.out {
  align-self: flex-end;
  background: var(--ink);
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.m-bubble-time {
  font-size: 9px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin: -1px 4px 4px;
}
.m-bubble-time.out { align-self: flex-end; }
.m-bubble-time.in { align-self: flex-start; }
.m-bubble-day {
  text-align: center;
  font-size: 9px;
  color: var(--mid);
  margin: 8px 0 4px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.m-ai-sheet {
  position: absolute;
  bottom: 60px; left: 0; right: 0;
  background: var(--ai-soft);
  border-top: 1px solid var(--ai);
  border-radius: 0;
  padding: 12px 14px 16px;
  z-index: 3;
  box-shadow: 0 -8px 32px rgba(27,42,58,.12);
}
.m-ai-sheet::before {
  content: '';
  display: block;
  width: 36px; height: 3px;
  background: var(--ai);
  opacity: 0.4;
  border-radius: 0;
  margin: 0 auto 10px;
}
.m-ai-sheet .head {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 10px;
}
.m-ai-sheet .head .ic {
  width: 18px; height: 18px;
  background: var(--ai); color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 10px;
}
.m-ai-sheet .head .title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ai-deep);
  font-weight: 600;
}
.m-ai-sheet .head .close {
  margin-left: auto;
  color: var(--ai-deep);
}
.m-ai-sheet .tones {
  display: flex; gap: 4px;
  margin-bottom: 10px;
}
.m-ai-sheet .tone {
  flex: 1;
  text-align: center;
  font-size: 10px;
  padding: 4px 0;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--mid);
}
.m-ai-sheet .tone.active {
  background: var(--ai);
  color: var(--paper);
  border-color: var(--ai);
  font-weight: 600;
}
.m-ai-sheet .reply {
  background: var(--paper-2);
  border-radius: 0;
  padding: 10px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.m-ai-sheet .row {
  display: flex; gap: 6px;
}
.m-ai-sheet .row button {
  flex: 1;
  font-size: 11px;
  padding: 8px;
  border-radius: 0;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--ink-2);
  font-family: inherit;
  font-weight: 500;
}
.m-ai-sheet .row button.use {
  background: var(--ai); color: var(--paper); border-color: var(--ai);
}

.m-chat-input {
  position: absolute;
  bottom: 60px; left: 0; right: 0;
  background: var(--input-bg);
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  display: flex; gap: 6px;
  align-items: center;
  z-index: 2;
}
.m-chat-input.with-sheet { bottom: 220px; box-shadow: none; border-bottom: none; }
.m-chat-input .field {
  flex: 1;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--mid);
}
.m-chat-input .act {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
}

/* M-Q2: Mobile quote builder */
.m-q-head .back { padding: 4px; color: var(--ink); }
.m-q-head .info { flex: 1; min-width: 0; }
.m-q-head .title { font-size: 13px; font-weight: 600; }
.m-q-head .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.m-q-status-bar .stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  letter-spacing: 0.05em;
}
.m-q-status-bar .save {
  margin-left: auto;
  font-size: 10px;
  color: var(--good);
  display: flex; align-items: center; gap: 4px;
}
.m-q-section-title::before {
  content: ''; width: 12px; height: 1px; background: var(--accent);
}
.m-q-customer-row .name { font-size: 13px; font-weight: 600; }
.m-q-customer-row .meta {
  font-size: 11px;
  color: var(--mid);
  margin-top: 2px;
  display: flex; gap: 8px; align-items: center;
}
.m-q-group-head .ic {
  width: 20px; height: 20px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 0;
  display: grid; place-items: center;
  font-size: 11px;
}
.m-q-group-head .name { font-size: 12px; font-weight: 600; }
.m-q-group-head .total {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.m-q-summary .row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  font-size: 11px;
}
.m-q-summary .row .label { color: rgba(246,241,231,.6); }
.m-q-summary .row .val { font-family: 'IBM Plex Mono', monospace; }
.m-q-summary .total-row {
  border-top: 1px solid rgba(246,241,231,.15);
  margin-top: 6px; padding-top: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.m-q-summary .total-row .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,241,231,.5);
}
.m-q-summary .total-row .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-soft);
}
.m-q-foot button {
  flex: 1;
  padding: 11px;
  border-radius: 0;
  border: none;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.m-q-foot .preview {
  background: var(--paper-3);
  color: var(--ink-2);
  border: 1px solid var(--border);
}
.m-q-foot .send {
  background: var(--accent);
  color: var(--paper);
  flex: 1.4;
}


  /* TLD suffix · added 2569-05-14 · brand evolved to salesdee.com */
  .wm .tld {
    color: var(--mid);
    font-weight: 500;
    margin-left: 0.02em;
    letter-spacing: -0.02em;
  }
  .wm.reverse .tld { color: rgba(246, 241, 231, 0.6); }
  .sb-brand .name .tld { color: rgba(246, 241, 231, 0.45); font-weight: 500; }
  .powered-wm .tld { color: var(--mid); font-weight: 500; }
  .brand-name .tld { color: var(--mid); font-weight: 500; margin-left: 0.02em; }

/* ═══ Outside-app shared header (auth + onboarding) ═══ */
.app-main.outside-flow {
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.outside-top {
  padding: 16px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.outside-top-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.outside-top-brand .wordmark {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
}
.outside-top-brand .wordmark em {
  font-style: italic;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--accent);
}
.outside-top-brand .wordmark .dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin: 0 2px 2px;
}
.outside-top-brand .wordmark .tld {
  color: var(--ink-2);
  font-weight: 600;
}
.outside-top-right {
  font-size: 13px;
  color: var(--mid);
}
.outside-top-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
}
.outside-top-link:hover { color: var(--accent-deep); text-decoration: underline; }
.outside-top-link.skip {
  color: var(--mid);
  font-weight: 400;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  text-decoration: none;
}
.outside-top-link.skip:hover {
  background: var(--paper-3);
  border-color: var(--mid-2);
  color: var(--ink-2);
}

/* ═══ Mobile (mb-*) ═══ */

/* ═══ MOBILE · 4 phones ═══ */

/* Top bar */

/* Page header (under topbar) */

/* Filter chips */

/* Queue list */

/* Quote detail (Phone 2) */

/* Sticky bottom action bar */

/* Chat (Phone 3) */

/* เอไอ peek bottom sheet */

/* Reply input row */

/* Bottom nav */

/* Send sheet · Phone 4 */



/* ═══ Settings · Quotation template (qst-*) ═══ */
.set-card-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--good);
}

.qst-hint-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(123, 143, 107, 0.12) 0%, rgba(123, 143, 107, 0.04) 100%);
  border-left: 3px solid var(--ai);
  margin-bottom: 18px;
}
.qst-hint-bar > .ico {
  width: 18px; height: 18px;
  color: var(--ai-deep, var(--ai));
  flex-shrink: 0;
}
.qst-hint-bar .t {
  flex: 1;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.qst-hint-mark {
  display: inline;
  border-bottom: 1.5px dashed var(--accent);
  color: var(--accent-deep);
  font-weight: 600;
  padding: 0 2px;
}

/* Quote preview container · paper look */
.qst-preview {
  background: white;
  border: 1px solid var(--border);
  padding: 32px 36px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(27, 42, 58, 0.06);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
}

/* HEADER · 3 cols */
.qp-header {
  display: grid;
  grid-template-columns: 100px 1fr 130px;
  gap: 20px;
  align-items: center;
  margin-bottom: 12px;
}
.qp-logo-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qp-logo-img.whale {
  width: 88px;
  height: 70px;
  display: grid;
  place-items: center;
}
.qp-logo-img.whale svg { width: 100%; height: 100%; }
.qp-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--mid-2);
  text-transform: uppercase;
  cursor: pointer;
}
.qp-tag:hover { color: var(--accent); }
.qp-tag.co { color: var(--mid); }

.qp-company {
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
}
.qp-company-en {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 4px;
  letter-spacing: -0.01em;
}
.qp-company-addr { font-size: 11px; color: var(--ink-2); margin-bottom: 2px; }
.qp-company-contact { font-size: 11px; color: var(--ink-2); margin-bottom: 2px; }
.qp-company-contact strong { font-weight: 600; }
.qp-company-tax { font-size: 11px; color: var(--ink-2); }
.qp-company-tax strong { font-weight: 600; }
.qp-company-web {
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 4px;
  text-decoration: underline;
}
.qp-company-web a { color: var(--ink-2); }

.qp-logo-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.qp-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.qp-brand .brand-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.qp-brand .brand-name strong { color: var(--accent); font-weight: 700; }
.qp-brand .brand-sub {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.qp-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px;
  background: white;
  border: 1px solid var(--border);
}
.qp-qr .qr-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  width: 50px; height: 50px;
}
.qp-qr .qr-grid span { background: var(--ink); }
.qp-qr .qr-grid span:nth-child(2),
.qp-qr .qr-grid span:nth-child(5),
.qp-qr .qr-grid span:nth-child(8),
.qp-qr .qr-grid span:nth-child(11),
.qp-qr .qr-grid span:nth-child(14),
.qp-qr .qr-grid span:nth-child(15) { background: white; }
.qp-qr .qr-label {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 9px;
  color: #06C755;
  letter-spacing: 0.05em;
}

/* TITLE row */
.qp-title-row {
  text-align: center;
  margin: 8px 0 16px;
}
.qp-title {
  display: inline-block;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: uppercase;
}
.qp-title.editing {
  position: relative;
  background: rgba(200, 80, 31, 0.06);
  border: 1.5px solid var(--accent);
  padding: 4px 10px;
}
.qp-title.editing input {
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
  width: 320px;
}
.qst-edit-caret {
  position: absolute;
  right: 8px;
  bottom: -22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  text-transform: uppercase;
}
.qst-edit-caret::before { content: "Editing · Enter to save"; }

/* META block */
.qp-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1.5px solid #A89BC8;
  margin-bottom: 8px;
}
.qp-meta-col {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qp-meta-col + .qp-meta-col { border-left: 1.5px solid #A89BC8; }
.qp-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11px;
}
.qp-meta-row .lbl {
  font-weight: 600;
  color: var(--ink);
  min-width: 80px;
}
.qp-meta-row .val { flex: 1; color: var(--ink-2); }
.qp-meta-row .val.mono { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--ink); }
.qp-meta-row .val.mockup { color: var(--mid-2); font-style: italic; font-family: inherit; }

/* ITEMS TABLE */
.qp-items {
  width: 100%;
  border-collapse: collapse;
  border: 1.5px solid #A89BC8;
  margin-bottom: 0;
  font-size: 11px;
}
.qp-items th,
.qp-items td {
  border: 1px solid #A89BC8;
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
}
.qp-items th {
  background: rgba(168, 155, 200, 0.10);
  font-weight: 700;
  color: var(--ink);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.qp-items td.num { text-align: right; font-family: 'IBM Plex Mono', monospace; }
.qp-items td.mono { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--ink-2); }
.qp-items tr.mockup td:not(.num):not(.mono) { color: var(--mid-2); font-style: italic; }
.qp-items tr.mockup td.num { color: var(--mid-2); }

/* MID row · remarks + totals */
.qp-mid-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  border: 1.5px solid #A89BC8;
  border-top: none;
}
.qp-remarks {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  line-height: 1.5;
}
.qp-remarks-title {
  font-weight: 700;
  color: #6B4FB8;
  text-decoration: underline;
  margin-bottom: 4px;
  display: inline-block;
}
.qp-remarks-highlight {
  margin-top: 6px;
  padding: 6px 8px;
  background: rgba(200, 80, 31, 0.08);
  color: var(--accent-deep);
  font-size: 11px;
  border-left: 2px solid var(--accent);
}
.qp-totals {
  border-left: 1.5px solid #A89BC8;
  display: flex;
  flex-direction: column;
}
.qp-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid #A89BC8;
}
.qp-total-row:last-child { border-bottom: none; }
.qp-total-row .lbl { color: var(--ink-2); }
.qp-total-row .val { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--ink); }
.qp-total-row .val.mockup { color: var(--mid-2); font-style: italic; }
.qp-total-row.final {
  background: rgba(168, 155, 200, 0.12);
  font-size: 13px;
}
.qp-total-row.final .lbl { font-weight: 700; }

/* AMOUNT IN WORDS */
.qp-amount-words {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(168, 155, 200, 0.18);
  border: 1.5px solid #A89BC8;
  border-top: none;
  font-size: 11px;
}
.qp-amount-words .lbl { font-weight: 700; color: var(--ink); }
.qp-amount-words .words { flex: 1; color: var(--ink-2); font-style: italic; }
.qp-amount-words .words.mockup { color: var(--mid-2); }
.qp-amount-words .trail { font-weight: 700; color: var(--ink); }
.qp-amount-words .trail .mono { font-family: 'IBM Plex Mono', monospace; font-weight: 600; }
.qp-amount-words .trail .mockup { color: var(--mid-2); font-style: italic; }

/* TERMS · 5 rows */
.qp-terms {
  border: 1.5px solid #A89BC8;
  border-top: none;
}
.qp-term {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 12px;
  font-size: 11px;
  border-bottom: 1px solid #A89BC8;
}
.qp-term:last-child { border-bottom: none; }
.qp-term .lbl {
  font-weight: 600;
  color: var(--ink);
  min-width: 280px;
}
.qp-term .val { flex: 1; color: var(--ink-2); }
.qp-term .val.long { font-size: 10.5px; }
.qp-term .unit {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.qp-term.highlight { background: rgba(200, 80, 31, 0.08); }
.qp-term.highlight .lbl { color: var(--accent-deep); }
.qp-term.highlight .val { color: var(--accent-deep); }
.qp-term.highlight .unit { color: var(--accent); }

/* SIGNATURE */
.qp-signature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-top: 22px;
  padding-top: 10px;
}
.qp-sig-buyer, .qp-sig-seller {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.qp-sig-line {
  width: 100%;
  border-bottom: 1px dotted var(--ink-2);
  height: 24px;
}
.qp-sig-lbl {
  font-size: 11px;
  color: var(--ink-2);
  text-align: center;
}
.qp-sig-lbl .mockup { color: var(--mid-2); font-style: italic; }
.qp-sig-img {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 28px;
}
.qp-sig-stroke {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 16px;
  color: var(--ink);
  transform: rotate(-3deg);
  letter-spacing: -0.02em;
}
.qp-sig-name {
  text-align: center;
  font-size: 11px;
  color: var(--ink-2);
}
.qp-sig-name strong { font-family: 'IBM Plex Mono', monospace; font-weight: 600; color: var(--ink); }

/* qp-f · editable field marker */
.qp-f:hover {
  border-bottom-color: var(--accent);
  background: rgba(200, 80, 31, 0.04);
}
div.qp-f { display: block; padding: 1px 3px; }
.qp-f.highlight {
  background: rgba(200, 80, 31, 0.08);
  color: var(--accent-deep);
  padding: 2px 6px;
}
.qp-f.highlight:hover { background: rgba(200, 80, 31, 0.16); }

.mockup { color: var(--mid-2) !important; font-style: italic; }

.qp-items th.qp-f { display: table-cell; }
.qp-items th.qp-f:hover { background: rgba(200, 80, 31, 0.10); }

/* qp-edit · click-to-edit inline cell used everywhere on settings_quote_template */
.qp-edit {
  display: inline-block;
  position: relative;
}
.qp-edit-display {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px dashed var(--mid-2);
  padding: 1px 2px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.qp-edit-display:hover {
  background: rgba(200, 80, 31, 0.08);
  border-bottom-color: var(--accent);
}
.qp-edit-pen {
  width: 11px; height: 11px;
  color: var(--mid);
  opacity: 0.6;
  flex-shrink: 0;
}
.qp-edit-display:hover .qp-edit-pen { color: var(--accent); opacity: 1; }
.qp-edit-input input,
.qp-edit-input textarea {
  font: inherit;
  color: inherit;
  background: var(--paper);
  border: 1.5px solid var(--accent);
  padding: 1px 4px;
  outline: none;
  border-radius: 0;
  min-width: 80px;
}
.qp-edit-input textarea { width: 100%; resize: vertical; }
.qp-edit-status {
  display: inline-block;
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
}
.qp-edit-status.saved { color: var(--good); }
.qp-edit-status.saving { color: var(--mid); }
.qp-edit-status.err { color: var(--danger); }

/* Global confirm modal — replaces window.confirm() (see base.html). */
.sd-confirm-bg {
  position: fixed; inset: 0;
  background: rgba(15, 25, 40, 0.5);
  z-index: 9000;
  display: grid;
  place-items: center;
  animation: sd-fade-in 0.12s ease-out;
}
.sd-confirm-box {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 22px 24px;
  min-width: 320px;
  max-width: 480px;
  box-shadow: 0 10px 32px rgba(15, 25, 40, 0.18);
}
.sd-confirm-msg {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 16px;
  white-space: pre-line;
}
.sd-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
@keyframes sd-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Page 2 photos section */
.qst-page2-section {
  margin-bottom: 18px;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--border);
}
.qst-page2-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.qst-page2-head > div:first-child { flex: 1; }
.qst-page2-head .t {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.qst-page2-head .sub { font-size: 11px; color: var(--mid); }

.qst-page2-layouts {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.qst-layout-opt {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--paper-2);
  border: 1.5px solid var(--border);
  cursor: pointer;
}
.qst-layout-opt:hover { background: var(--paper-3); border-color: var(--mid-2); }
.qst-layout-opt.on {
  background: var(--paper);
  border-color: var(--ink);
  border-width: 2px;
}
.qst-layout-thumb {
  height: 70px;
  background: white;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px;
}
.qst-layout-thumb .row { background: var(--paper-3); position: relative; }
.qst-layout-thumb .row.big { flex: 1; }
.qst-layout-thumb .row.med { flex: 1; }
.qst-layout-thumb .row.sm { flex: 1; }
.qst-layout-thumb .row .ph {
  position: absolute;
  inset: 6px;
  background: linear-gradient(135deg, rgba(123,143,107,0.20) 0%, rgba(123,143,107,0.06) 100%);
}
.qst-layout-thumb .row.med .ph, .qst-layout-thumb .row.sm .ph { inset: 3px; }
.qst-layout-name { font-size: 12px; font-weight: 600; color: var(--ink); }
.qst-layout-sub { font-size: 10px; color: var(--mid); }

/* Bottom action bar */
.qst-actions-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding: 18px 20px;
  background: linear-gradient(90deg, var(--paper-2) 0%, rgba(123, 143, 107, 0.08) 100%);
  border: 1px solid var(--border);
}
.qst-actions-text { flex: 1; }
.qst-actions-text .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.qst-actions-text .sub { font-size: 11px; color: var(--mid); }

/* ═══ Settings · Website · Hero banners (wb-*) ═══ */
.wb-page-head {
  margin-bottom: 22px;
}
.wb-page-crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}
.wb-page-title {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.wb-page-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.wb-page-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--mid);
  max-width: 720px;
}

.wb-tier-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(123, 143, 107, 0.10);
  border-left: 3px solid var(--ai);
  margin: 18px 0 24px;
}
.wb-tier-note .ico {
  width: 16px; height: 16px;
  color: var(--ai-deep, var(--ai));
  flex-shrink: 0;
  margin-top: 2px;
}
.wb-tier-note .t {
  flex: 1;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
}
.wb-tier-note strong {
  color: var(--ink);
  font-weight: 700;
}

.wb-rotate {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  margin-bottom: 24px;
}
.wb-rotate .info { flex: 1; }
.wb-rotate-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.wb-rotate-desc {
  font-size: 12px;
  color: var(--mid);
}
.wb-rotate-input {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
}
.wb-rotate-input input {
  width: 56px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}
.wb-rotate-input input:focus { outline: none; border-color: var(--accent); }
.wb-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.wb-switch-toggle {
  width: 36px;
  height: 20px;
  background: var(--mid-2);
  position: relative;
  transition: background 0.15s;
  flex-shrink: 0;
}
.wb-switch-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: white;
  transition: transform 0.15s;
}
.wb-switch.on .wb-switch-toggle { background: var(--good); }
.wb-switch.on .wb-switch-toggle::after { transform: translateX(16px); }
.wb-switch-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.wb-banner-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  margin-bottom: 14px;
}
.wb-banner-card.off { opacity: 0.55; }
.wb-banner-card.expanded { border-color: var(--accent); }

.wb-banner-head {
  display: grid;
  grid-template-columns: 48px 1fr auto auto auto;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  cursor: pointer;
  border-bottom: 1px solid transparent;
}
.wb-banner-card.expanded .wb-banner-head { border-bottom-color: var(--border); }

.wb-banner-preview {
  width: 48px;
  height: 30px;
  position: relative;
  display: grid;
  place-items: center;
  color: white;
}
.wb-banner-preview svg {
  width: 18px; height: 18px;
  opacity: 0.8;
}
.wb-banner-num {
  position: absolute;
  top: -6px;
  left: -6px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  width: 16px; height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.wb-banner-info {
  min-width: 0;
}
.wb-banner-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.wb-banner-headline-preview {
  font-size: 12px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wb-banner-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.wb-banner-status.default { color: var(--ai); }
.wb-banner-status.edited { color: var(--accent); }
.wb-banner-status.off { color: var(--mid-2); }

.wb-banner-toggle-mini {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--border);
  background: var(--paper);
  cursor: pointer;
  color: var(--ink-2);
}
.wb-banner-toggle-mini.on {
  background: var(--good);
  color: white;
  border-color: var(--good);
}

.wb-banner-chev {
  width: 14px; height: 14px;
  color: var(--mid);
  transition: transform 0.15s;
}
.wb-banner-card.expanded .wb-banner-chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.wb-banner-body {
  display: none;
  padding: 18px 20px 18px;
  background: var(--paper);
}
.wb-banner-card.expanded .wb-banner-body { display: block; }

.wb-field {
  margin-bottom: 14px;
}
.wb-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
.wb-field-row .wb-field { margin-bottom: 0; }

.wb-field-lbl {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.wb-field-lbl .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.wb-field-lbl .help {
  font-size: 11px;
  color: var(--mid);
  font-style: italic;
}
.wb-input:focus { outline: none; border-color: var(--accent); background: var(--input-bg); }
textarea.wb-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
  line-height: 1.4;
}

textarea

.wb-field-default {
  background: var(--paper-2);
  border-left: 2px solid var(--ai);
  padding: 6px 10px;
  font-size: 11px;
  color: var(--mid);
  margin-top: 6px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.02em;
}
.wb-field-default::before {
  content: "default · ";
  color: var(--ai);
  font-weight: 700;
}

.wb-banner-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: 6px;
  border-top: 1px solid var(--border);
}
.wb-banner-foot-left {
  font-size: 11px;
  color: var(--mid);
  font-style: italic;
}
.wb-reset-btn {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--mid-2);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  padding: 6px 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.wb-reset-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* เอไอ assist row */
.wb-ai-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(123, 143, 107, 0.08);
  border: 1px dashed var(--ai);
  margin-top: 8px;
  align-items: center;
  font-size: 11px;
}
.wb-ai-row .ai-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ai);
}
.wb-ai-row .ai-action {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wb-ai-row .ai-action:hover { color: var(--accent-deep); }

/* Advanced section · collapsed */
.wb-advanced {
  margin-top: 28px;
  border: 1px dashed var(--border);
  background: rgba(0,0,0,0.02);
}
.wb-advanced-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--mid);
}
.wb-advanced-head .lbl { flex: 1; font-weight: 600; }
.wb-advanced-head .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid-2);
}
.wb-advanced-body {
  padding: 0 18px 18px;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.55;
}
.wb-advanced-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
}
.wb-advanced-list li {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
}
.wb-advanced-list li::before {
  content: "○";
  color: var(--mid-2);
  font-family: 'IBM Plex Mono', monospace;
}
.wb-advanced-soon {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}

/* Bottom bar */
.wb-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--paper-2);
  border: 1px solid var(--border);
}
.wb-bottom .auto-save {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--good);
}
.wb-bottom .auto-save::before {
  content: "● ";
  color: var(--good);
}
.wb-bottom-actions {
  display: flex;
  gap: 8px;
}

.h-dc-subject {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 8px;
}
.h-dc-subject:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.h-dc-attach {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 11px;
  color: var(--mid);
}
.h-dc-attach .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-dc-attach .file {
  flex: 1;
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 600;
}
.h-dc-attach .attach-add {
  background: transparent;
  border: 1px dashed var(--border);
  padding: 4px 10px;
  font-size: 11px;
  color: var(--mid);
  cursor: pointer;
}
.h-dc-pick.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.h-dc-call {
  padding: 8px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  margin-right: 8px;
}
.h-dc-call:hover { border-color: var(--accent); color: var(--accent); }

/* ═══ Home v2 · unified timeline + action ═══ */

/* Col 3 · timeline pane (replaces h-chat-pane content) */
.h-tl-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-left: 1px solid var(--border);
  position: relative;
}
.h-tl-header .av {
  width: 32px; height: 32px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  flex-shrink: 0;
}
.h-tl-header .av .ch {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 14px; height: 14px;
  border: 2px solid var(--paper);
  background: #06C755;
  color: white;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  font-weight: 700;
}
.h-tl-header .av .ch.web { background: var(--accent); }
.h-tl-header .info { flex: 1; min-width: 0; }
.h-tl-header .nm {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-tl-header .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-tl-expand {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.h-tl-expand:hover { border-color: var(--accent); color: var(--accent); }

/* Timeline scroll */
.h-tl-stream {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 18px 18px;
  background: var(--paper-2);
}
.h-tl-stream::-webkit-scrollbar { width: 4px; }
.h-tl-stream::-webkit-scrollbar-thumb { background: var(--mid-2); }

.h-tl-day {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 14px 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.h-tl-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

/* Event row · compact icon + content + time */
.h-tl-event {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
}
.h-tl-event .ic {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--mid);
}
.h-tl-event .ic svg { width: 12px; height: 12px; }
.h-tl-event .content { color: var(--ink-2); line-height: 1.45; }
.h-tl-event .content strong { color: var(--ink); font-weight: 700; }
.h-tl-event .time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.h-tl-event.created .ic { color: var(--accent); }
.h-tl-event.delivery .ic { color: var(--ink); }
.h-tl-event.opened .ic { color: var(--good); }
.h-tl-event.unread .content { color: var(--warn); font-style: italic; }
.h-tl-event.system .content { color: var(--mid); font-style: italic; }

/* Chat bubble (in/out) within timeline */
.h-tl-msg {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.h-tl-msg .bub {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--paper);
  border: 1px solid var(--border);
}
.h-tl-msg .time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid-2);
  margin-top: 3px;
  letter-spacing: 0.03em;
}
.h-tl-msg.in { align-self: flex-start; }
.h-tl-msg.in .bub { background: var(--paper); border-color: var(--border); }
.h-tl-msg.out { align-self: flex-end; align-items: flex-end; }
.h-tl-msg.out .bub {
  background: var(--accent-soft);
  border-color: rgba(200, 80, 31, 0.25);
  color: var(--ink);
}

/* เอไอ suggest card (inline in timeline) */
.h-ai-card {
  margin: 16px 0 8px;
  background: linear-gradient(180deg, rgba(123, 143, 107, 0.10) 0%, rgba(123, 143, 107, 0.04) 100%);
  border: 1px solid var(--ai);
  border-left: 3px solid var(--ai);
  padding: 12px 14px;
}
.h-ai-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.h-ai-card-head .ic {
  width: 22px; height: 22px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 12px;
}
.h-ai-card-head .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep, var(--ai));
}
.h-ai-card-head .conf {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--ai);
}
.h-ai-card-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
}
.h-ai-card-body strong { font-weight: 700; }
.h-ai-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.h-ai-btn .ic { font-size: 12px; }
.h-ai-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
.h-ai-suggest-head svg.ic { width: 14px; height: 14px; color: var(--ai); }
.h-ai-btn:hover { border-color: var(--ai); color: var(--ai-deep, var(--ai)); }
.h-ai-btn.primary {
  background: var(--ai);
  color: var(--paper);
  border-color: var(--ai);
}
.h-ai-btn.primary:hover { opacity: 0.92; }
.h-ai-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--mid);
}

/* Compose */
.h-compose {
  padding: 10px 14px 8px;
  background: var(--paper);
  border-top: 1px solid var(--border);
}
.h-compose textarea {
  width: 100%;
  min-height: 56px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  resize: none;
}
.h-compose textarea:focus { outline: none; border-color: var(--accent); background: var(--input-bg); }

/* Action bar */
.h-actions {
  display: flex;
  gap: 8px;
  padding: 8px 14px 14px;
  background: var(--paper);
}
.h-act-chat {
  flex: 1;
  padding: 11px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.h-act-chat:hover { border-color: #06C755; color: #06C755; }
.h-act-chat .ic { font-size: 14px; }
.h-act-send {
  flex: 1.4;
  padding: 11px 14px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.h-act-send:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.h-act-send .ic { font-size: 14px; }

/* Slide-up overlay */
.h-slideup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: calc(100% - 80px);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
  border-top: 1px solid var(--border);
}
.h-tl-pane.preview-slideup .h-tl-stream,
.h-tl-pane.preview-slideup .h-compose,
.h-tl-pane.preview-slideup .h-actions {
  filter: brightness(0.95);
}
.h-slideup-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 42, 58, 0.20);
  z-index: 9;
}
.h-slideup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.h-slideup-head .title {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.h-slideup-head .title .docno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--mid);
  font-weight: 500;
}
.h-slideup-head .title .pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  background: var(--paper-2);
  color: var(--mid);
  border: 1px solid var(--border);
}
.h-slideup-head .title .pill.sent {
  background: rgba(34, 120, 60, .08);
  color: #22783c;
  border-color: rgba(34, 120, 60, .25);
}
.h-slide-recip .h-slide-recip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.h-slide-recip-list .rp b {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid);
  margin-right: 4px;
}
.h-slide-recip-list .rp.empty {
  color: var(--accent);
  font-size: 12px;
}
.h-slide-ch.disabled {
  opacity: .42;
  cursor: not-allowed;
}
.h-slide-pdf {
  width: 100%;
  height: 360px;
  border: 1px solid var(--border);
  background: var(--paper-2);
}
.h-slide-pdf-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.h-slide-pdf-link:hover { text-decoration: underline; }

/* ─── Sticky action card · slides up from the bottom on mount ─────────────
   Pinned at the bottom of .h-tl-pane above the chat composer. On first
   paint the card slides up from off-screen to draw sales' eye to the
   "next step" surface. Collapsible after that. */
@keyframes h-tl-action-slide-up {
  0%   { transform: translateY(100%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.h-tl-action-card.sticky {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  border-left: 0;
  background: var(--paper);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60%;
  overflow-y: auto;
  animation: h-tl-action-slide-up .42s cubic-bezier(.2,.85,.3,1) both;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .04);
}
.h-tl-action-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.h-tl-action-head .ic { color: var(--accent); }
.h-tl-action-head .docno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  font-weight: 500;
  margin-left: auto;
}
.h-tl-action-head .caret {
  font-size: 11px;
  color: var(--mid);
  transition: transform .15s;
}
.h-tl-action-head .caret.open { transform: rotate(180deg); }
.h-tl-action-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h-tl-action-recip {
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.h-tl-action-recip .rp { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.h-tl-action-recip .rp.empty { color: var(--accent); font-family: inherit; }

.h-tl-action-shortlink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.h-tl-action-shortlink .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
  flex-shrink: 0;
}
.h-tl-action-shortlink .inp {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: text;
  box-sizing: border-box;
}
.h-tl-action-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h-tl-action-channels .ch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  cursor: pointer;
  background: var(--paper);
  transition: background .12s;
}
.h-tl-action-channels .ch:hover { background: var(--paper-2); }
.h-tl-action-channels .ch.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.h-tl-action-channels .ch.on .ic { color: var(--paper); }
.h-tl-action-channels .ch.disabled { opacity: .4; cursor: not-allowed; }
.h-tl-action-channels .ch .ic {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--mid);
}

.h-tl-action-surface {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h-tl-action-surface .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-tl-action-surface .inp,
.h-tl-action-surface .ta {
  border: 1px solid var(--border);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  background: var(--paper);
  width: 100%;
  box-sizing: border-box;
}
.h-tl-action-surface .ta { resize: vertical; min-height: 80px; }
.h-tl-action-surface .ta.signoff { min-height: 50px; }
.h-tl-action-surface .pdf {
  width: 100%;
  height: 320px;
  border: 1px solid var(--border);
  background: var(--paper-2);
}
.h-tl-action-surface .pdf-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.h-tl-action-surface .pdf-link:hover { text-decoration: underline; }
.h-tl-action-surface .action-flex-preview,
.h-tl-action-surface .h-tl-bubble.sales.flex.action-flex-preview {
  margin: 0;
  margin-left: 0;
  align-self: flex-start;
}
.h-tl-action-surface .action-flex-preview .h-tl-bub-content { max-width: 340px; }

.h-tl-action-surface .sms-row {
  display: flex;
  gap: 8px;
}
.h-tl-action-surface .sms-row .inp.sms-url {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  cursor: text;
}
.h-tl-action-surface .sms-row .sms-copy {
  height: 34px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
}
.h-tl-action-surface .sms-row .sms-copy:hover { background: var(--accent); }
.h-tl-action-surface .hint { font-size: 11.5px; color: var(--mid); }

.h-tl-action-foot {
  display: flex;
  justify-content: flex-end;
}
.h-tl-action-send {
  height: 38px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.h-tl-action-send:hover { background: var(--accent-deep, var(--accent)); }
.h-tl-action-send:disabled { opacity: .45; cursor: not-allowed; }

/* LINE-channel Flex preview — reuses the timeline bubble styling so what
   sales sees matches what the customer will receive. */
.h-slide-flex-preview {
  margin: 0;
  align-self: stretch;
}
.h-slide-flex-preview .h-tl-bub-content { max-width: 360px; }

/* Phone / SMS channel — short URL row + copy button. */
.h-slide-sms-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.h-slide-sms-input {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  cursor: text;
}
.h-slide-sms-copy {
  height: 32px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.h-slide-sms-copy:hover { background: var(--accent); }
.h-slide-sms-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--mid);
  line-height: 1.5;
}
.h-slideup-head .close {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--mid);
  display: grid;
  place-items: center;
}
.h-slideup-head .close:hover { color: var(--ink); }
.h-slideup-body {
  flex: 0 1 auto;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}
.h-slide-section .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.h-slide-channels {
  display: flex;
  gap: 8px;
}
.h-slide-ch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.h-slide-ch.on {
  background: rgba(200, 80, 31, 0.08);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.h-slide-ch .ic {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}
.h-slide-ch.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.h-slide-input,
.h-slide-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.h-slide-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.h-slide-input:focus, .h-slide-textarea:focus { outline: none; border-color: var(--accent); background: var(--input-bg); }
.h-slide-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h-slide-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.h-slide-opt .file {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-left: 4px;
}
.h-slide-ai {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(123, 143, 107, 0.08);
  border-left: 2px solid var(--ai);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.5;
}
.h-slide-ai .ic {
  width: 18px; height: 18px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.h-slide-ai strong { color: var(--ink); font-weight: 700; }
.h-slideup-foot {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 18px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
}

.h-slideup-foot .h-slide-cancel,
.h-slideup-foot .h-slide-send {
  height: 40px;
  padding: 0 18px;
  border-radius: 0;
}
.h-slide-cancel {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.h-slide-send {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.h-slide-send:hover { background: var(--accent-deep); }

/* ─── Col 4 reference pane (v2) ─── */
.h-ref-pane {
  width: 380px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-2);
  border-left: 1px solid var(--border);
}
.h-ref-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.h-ref-scroll::-webkit-scrollbar { width: 4px; }
.h-ref-scroll::-webkit-scrollbar-thumb { background: var(--mid-2); }
.h-ref-view {
  width: 100%;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.h-ref-view:hover { background: var(--accent-deep); }

.h-ref-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.h-ref-section:last-child { border-bottom: none; }

.h-ref-quote {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.h-ref-qid {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.h-ref-source {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.h-ref-source.line {
  background: rgba(6, 199, 85, 0.10);
  color: #06C755;
}
.h-ref-source.web {
  background: rgba(200, 80, 31, 0.10);
  color: var(--accent);
}
.h-ref-source .badge {
  width: 14px; height: 14px;
  display: grid;
  place-items: center;
  font-size: 9px;
  font-weight: 700;
  background: currentColor;
  color: var(--paper);
  border-radius: 0;
}

.h-ref-cust-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 3px;
}
.h-ref-cust-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--mid);
}

.h-ref-status .pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.h-ref-status .pill.warn {
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn);
}
.h-ref-status .pill.warn::before {
  content: "⚠";
}
.h-ref-status .meta {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.h-ref-status .meta strong { color: var(--ink); font-weight: 700; }

.h-ref-items-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.h-ref-items-head .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-ref-items-head .total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.h-ref-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.h-ref-items li {
  display: grid;
  grid-template-columns: 28px 1fr 44px 80px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-2);
}
.h-ref-items li .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  text-align: right;
}
.h-ref-items li:last-child { border-bottom: none; }
.h-ref-items li .ref-item-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  background: var(--paper-2);
  display: block;
  cursor: zoom-in;
  transition: transform .12s;
}
.h-ref-items li .ref-item-thumb:hover { transform: scale(1.06); }
.h-ref-items li .ref-item-thumb.empty { background: var(--paper-2); cursor: default; }
.h-ref-items li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-ref-items li .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: right;
}
.h-ref-items .ref-zoom {
  position: fixed;
  inset: 0;
  background: rgba(21, 20, 15, .82);
  display: grid;
  place-items: center;
  z-index: 200;
  cursor: zoom-out;
  padding: 32px;
}
.h-ref-items .ref-zoom img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.h-ref-ai {
  background: linear-gradient(180deg, rgba(123, 143, 107, 0.08) 0%, rgba(123, 143, 107, 0.02) 100%);
  border-left: 3px solid var(--ai);
}
.h-ref-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.h-ref-ai-head .ic {
  width: 20px; height: 20px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
}
.h-ref-ai-head .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai);
}
.h-ref-ai p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.h-ref-ai p strong { color: var(--ink); font-weight: 700; }
.h-ref-ai .strategy {
  font-size: 12px;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px solid rgba(123, 143, 107, 0.20);
  line-height: 1.5;
}
.h-ref-ai .strategy strong { font-weight: 700; color: var(--accent); }

.h-ref-profile-head,
.h-ref-delivery-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.h-ref-profile-main {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 600;
}
.h-ref-profile-meta {
  font-size: 11px;
  color: var(--mid);
}

.h-ref-delivery-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 11px;
  color: var(--ink-2);
}
.h-ref-delivery-row .ic {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
}
.h-ref-delivery-row .ic.email { background: var(--ink); }
.h-ref-delivery-row .ic.line { background: #06C755; }
.h-ref-delivery-row .opens {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.h-ref-delivery-row .opens strong { color: var(--ink); font-weight: 700; }

.h-ref-go {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 13px;
  margin: 14px 18px 18px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.h-ref-go:hover { background: var(--accent-deep); }

/* Action button helper text (under buttons) */
.h-actions-wrap {
  background: var(--paper);
  border-top: 1px solid var(--border);
}
.h-actions-help {
  display: flex;
  gap: 8px;
  padding: 0 14px 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--mid);
  line-height: 1.4;
}
.h-actions-help .label-chat {
  flex: 1;
  text-align: center;
}
.h-actions-help .label-send {
  flex: 1.4;
  text-align: center;
}
.h-actions-help strong { color: var(--ink); font-weight: 700; }
.h-actions-wrap .h-actions { border-top: none; padding-top: 4px; }

/* Manual variant · first-send pill in compose area */
.h-firstsend-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(200, 80, 31, 0.06);
  border-top: 1px solid var(--accent-soft);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-2);
}
.h-firstsend-note .pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 7px;
  background: var(--accent-soft);
}
.h-firstsend-note strong { color: var(--ink); font-weight: 700; }

/* State badge in frame chrome (right of url) */
.frame-state-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--paper);
  vertical-align: middle;
}

/* "first send" label vs other states next to button (compact under button) */
.h-act-line-only { display: none; }

/* ─── Action bar v4 · inline textbox for LINE, send-only for Web/Manual ─── */
.h-compose-inline {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 110px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  resize: none;
}
.h-compose-inline:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.h-act-chat-inline {
  padding: 0 14px;
  background: #06C755;
  color: white;
  border: 1px solid #06C755;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.h-act-chat-inline:hover { background: #05a847; border-color: #05a847; }
.h-act-send-inline {
  padding: 0 14px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  margin-left: 4px;
}
.h-act-send-inline:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.h-act-send-full {
  width: 100%;
  padding: 13px 18px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.h-act-send-full:hover { background: var(--accent-deep); }

/* ─── Col 2 top bar v2 · drop title · functional controls only ─── */

.h-list-head-v2 .h-list-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px 8px;
  font-size: 13px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.h-list-head-v2 .h-list-summary .count {
  color: var(--ink);
}
.h-list-head-v2 .h-list-summary .count strong {
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}
.h-list-head-v2 .h-list-summary .sep {
  color: var(--mid-2);
}
.h-list-head-v2 .h-list-summary .total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.h-list-head-v2 .h-list-sort {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.h-list-head-v2 .h-list-sort:hover { border-color: var(--accent); color: var(--accent); }
.h-list-head-v2 .h-list-sort .ic { font-size: 10px; opacity: 0.7; }
.h-list-head-v2 .h-list-sort .caret { font-size: 9px; color: var(--mid); }

/* Override default h-list-head padding for v2 (uses inner padding) */
.h-list-head-v2 {
  padding: 0 !important;
}
.h-list-head-v2 .h-filters {
  padding: 0 14px 12px;
}

/* Col 2 v3 · just filter chips · no title, no summary */

/* Col 4 · Q-id + source merged into customer section · no separate header strip */

/* Col 2 v3 · just filter chips · no title, no summary */

.h-list-head-v3 .h-filters {
  padding: 0;
}

/* Col 4 · Q-id + source merged into customer section · no separate header strip */
.h-ref-cust-top .h-ref-qid {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}

/* Col 2 + Col 3 header alignment · pixel-perfect */
.h-list-head.h-list-head-v3 {
  padding: 14px 16px;
  min-height: 60px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
}
.h-list-head.h-list-head-v3 .h-filters {
  padding: 0;
  width: 100%;
}

/* Col 4 · remove customer duplication · cust-top remains as Q-id strip only */
.h-ref-cust-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
}

/* Header alignment · col 2 + col 3 */
.h-tl-header { padding: 14px 16px; min-height: 60px; }

/* Footer alignment · col 3 + col 4 */
.h-actions-line { padding: 14px 16px; }
.h-actions-send-only { padding: 14px 16px; }
.h-ref-actions { padding: 14px 16px; }

/* Q-id meta strip at top of col 4 (no header replacement) */
.h-ref-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

/* Totals section · new */
.h-ref-totals-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}
.h-ref-totals-row {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-size: 12px;
  color: var(--ink-2);
}
.h-ref-totals-row span:last-child {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}
.h-ref-totals-row.total {
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
}
.h-ref-totals-row.total span:last-child {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
}
.h-ref-totals-status {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h-ref-totals-status .pill {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn);
}
.h-ref-totals-status .pill::before { content: "⚠"; }
.h-ref-totals-status .meta {
  font-size: 11px;
  color: var(--mid);
}
.h-ref-totals-status .meta strong { color: var(--ink); font-weight: 700; }

.h-tl-header .av .ch.manual { background: var(--mid-2); }

/* Onboarding · scrollable body + sticky actions · prevent content cut */
.outside-flow {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
}
.outside-flow::-webkit-scrollbar { width: 6px; }
.outside-flow::-webkit-scrollbar-thumb { background: var(--mid-2); }
.outside-flow::-webkit-scrollbar-track { background: transparent; }

/* ─── Sign-up · missing auth CSS classes ─── */

/* 2-col layout when has side panel */
.auth-stage:has(.auth-side-panel) {
  grid-template-columns: 420px 360px;
  column-gap: 56px;
  align-items: start;
  justify-content: center;
  padding: 56px 24px 60px;
}

.auth-card-wide {
  max-width: 420px;
}

.auth-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--mid);
  font-weight: 400;
}

.auth-optional {
  color: var(--mid-2);
  font-weight: 400;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Password strength bar */
.auth-pw-strength {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.auth-pw-strength .bar {
  flex: 1;
  height: 3px;
  background: var(--border-2);
}
.auth-pw-strength .bar .fill {
  display: block;
  height: 100%;
  width: 80%;
  background: var(--good);
}
.auth-pw-strength .lbl {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--good);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Password eye toggle */
.auth-eye-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  display: grid;
  place-items: center;
  color: var(--mid);
  cursor: pointer;
  padding: 0;
}
.auth-eye-btn:hover { color: var(--ink); }
.auth-eye-btn svg { width: 16px; height: 16px; }

/* Terms checkbox */
.auth-check-tos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 20px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
}
.auth-check-tos .box {
  width: 18px;
  height: 18px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.auth-check-tos .box.checked {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.auth-check-tos .box svg { width: 12px; height: 12px; }
.auth-check-tos .t { flex: 1; }

/* Side panel · right column on sign-up */
.auth-side-panel {
  padding: 24px 0;
  align-self: stretch;
}

.auth-side-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 16px;
}

.auth-side-title {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
.auth-side-title em {
  font-style: italic;
  color: var(--accent);
}

.auth-side-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 28px;
}
.auth-side-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.auth-side-item .ic-check {
  width: 22px;
  height: 22px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.auth-side-item .ic-check svg {
  width: 13px;
  height: 13px;
}
.auth-side-item .t {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  padding-top: 2px;
}

.auth-side-quote {
  padding: 22px 22px 22px 50px;
  background: rgba(123, 143, 107, 0.08);
  border-left: 3px solid var(--ai);
  position: relative;
}
.auth-side-quote .qmark {
  font-family: 'Fraunces', serif;
  font-size: 72px;
  font-style: italic;
  color: var(--ai);
  position: absolute;
  top: -14px;
  left: 14px;
  line-height: 1;
  opacity: 0.5;
}
.auth-side-quote .qt {
  font-size: 13px;
  font-style: italic;
  color: var(--ink);
  line-height: 1.55;
  margin-bottom: 8px;
}
.auth-side-quote .qm {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
}

/* Onboarding brand-step · scoped */
.onbb-subdomain {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--paper-2);
  overflow: hidden;
}
.onbb-subdomain input {
  flex: 1;
  padding: 11px 14px;
  border: none;
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.onbb-subdomain .suffix {
  padding: 11px 14px;
  background: var(--paper);
  border-left: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--mid);
}
.onbb-avail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--good);
  font-weight: 600;
}
.onbb-avail svg { width: 14px; height: 14px; }

.onbb-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.onbb-theme {
  border: 2px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  background: var(--paper);
  transition: border-color .15s;
}
.onbb-theme.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.onbb-theme .swatch {
  height: 90px;
  position: relative;
  border-bottom: 1px solid var(--border-2);
}
.onbb-theme .swatch .ink {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  height: 6px; border-radius: 0;
  opacity: .8;
}
.onbb-theme .swatch .mini-text {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 12px;
  font-weight: 600;
}
.onbb-theme .swatch .mini-btn {
  position: absolute;
  bottom: 32px; left: 14px;
  padding: 3px 8px;
  font-size: 9px;
  border-radius: 0;
}
.onbb-theme .name {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.onbb-theme .name .vibe {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 11px;
  color: var(--mid);
  font-weight: 400;
}
.onbb-theme.t-craft .swatch { background: var(--paper); }
.onbb-theme.t-craft .swatch .mini-text { color: var(--ink); font-family: 'Fraunces', serif; font-style: italic; }
.onbb-theme.t-craft .swatch .ink { background: var(--accent); }
.onbb-theme.t-craft .swatch .mini-btn { background: var(--accent); color: white; }
.onbb-theme.t-atelier .swatch { background: #F2EAD7; }
.onbb-theme.t-atelier .swatch .mini-text { color: #2A2317; font-family: 'Fraunces', serif; }
.onbb-theme.t-atelier .swatch .ink { background: #B8965A; }
.onbb-theme.t-atelier .swatch .mini-btn { background: #B8965A; color: white; }
.onbb-theme.t-bauhaus .swatch { background: #FAFAF8; }
.onbb-theme.t-bauhaus .swatch .mini-text { color: #1A1A1A; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.onbb-theme.t-bauhaus .swatch .ink { background: #E63946; border-radius: 0; }
.onbb-theme.t-bauhaus .swatch .mini-btn { background: #E63946; color: white; border-radius: 0; }
.onbb-theme.t-velvet .swatch { background: #0F1715; }
.onbb-theme.t-velvet .swatch .mini-text { color: #C9A961; font-family: 'Fraunces', serif; font-style: italic; }
.onbb-theme.t-velvet .swatch .ink { background: #C9A961; }
.onbb-theme.t-velvet .swatch .mini-btn { background: #C9A961; color: #0F1715; }

.onbb-logo-drop {
  border: 2px dashed var(--mid-2);
  border-radius: 0;
  padding: 24px 20px;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  gap: 18px;
}
.onbb-logo-drop .preview {
  width: 64px; height: 64px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
}
.onbb-logo-drop .text {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.5;
}
.onbb-logo-drop .text strong { color: var(--ink); font-weight: 600; }

/* Onboarding products · 3-method sections + result */
.prd-method {
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--paper);
  margin-top: 20px;
  overflow: hidden;
}
.prd-method-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.prd-method-head .num {
  width: 30px; height: 30px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.prd-method-head .info { flex: 1; }
.prd-method-head .info .t {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.prd-method-head .info .d {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.45;
}
.prd-method-head .speed {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
  flex-shrink: 0;
}
.prd-method-head .speed.fast { background: var(--good-soft); color: var(--good); }
.prd-method-head .speed.best { background: var(--accent-soft); color: var(--accent-deep); }
.prd-method-head .speed.slow { background: #E5E7EB; color: var(--mid); }
.prd-method-body { padding: 18px; }

.prd-url-row {
  display: flex;
  gap: 8px;
}
.prd-url-input {
  flex: 1;
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--input-bg);
  padding: 0 14px;
}
.prd-url-input .ico {
  width: 16px; height: 16px;
  color: var(--mid);
  flex-shrink: 0;
}
.prd-url-input input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 11px 12px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}

.prd-btn-primary {
  background: var(--accent);
  color: white;
  border: none;
  padding: 11px 18px;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.prd-btn-primary:hover { background: var(--accent-deep); }

.prd-btn-ghost {
  background: transparent;
  color: var(--mid);
  border: 1px solid var(--border);
  padding: 9px 16px;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.prd-btn-ghost:hover { color: var(--ink); border-color: var(--mid-2); }

.prd-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--mid);
  line-height: 1.5;
}
.prd-hint strong { color: var(--ink-2); font-weight: 600; }

.prd-drop {
  border: 2px dashed var(--mid-2);
  border-radius: 0;
  padding: 30px 24px;
  background: var(--paper-2);
  text-align: center;
}
.prd-drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.prd-drop-ic {
  width: 36px; height: 36px;
  color: var(--mid);
  margin-bottom: 10px;
}
.prd-drop-t {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.prd-drop-d {
  font-size: 12px;
  color: var(--mid);
}

.prd-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.prd-link:hover { text-decoration: underline; }

/* Manual form */
.prd-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prd-form-row {
  display: flex;
  gap: 10px;
}
.prd-fld { display: flex; flex-direction: column; }
.prd-fld .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.prd-fld .lbl .req { color: var(--accent); }
.prd-fld input,
.prd-fld select {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--input-bg);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.prd-fld input:focus,
.prd-fld select:focus { border-color: var(--accent); background: var(--input-bg); }

.prd-img-drop {
  border: 1px dashed var(--mid-2);
  border-radius: 0;
  padding: 12px 14px;
  background: var(--paper-2);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
}
.prd-img-drop:hover { border-color: var(--accent); }

.prd-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
}

/* Result section */
.prd-result {
  margin-top: 28px;
  padding: 20px 22px;
  background: linear-gradient(135deg, var(--good-soft), rgba(106,153,78,.04));
  border: 1px solid var(--good);
  border-radius: 0;
}
.prd-result-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--good);
}
.prd-result-head .t {
  font-size: 14px;
  color: var(--ink);
}
.prd-result-head .t strong {
  color: var(--good);
  font-weight: 700;
  font-family: 'Fraunces', serif;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.prd-result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.prd-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.prd-card-img {
  height: 84px;
  background: var(--paper-2);
  display: grid;
  place-items: center;
  font-size: 18px;
  border-bottom: 1px solid var(--border-2);
}
.prd-card-body { padding: 10px 12px; }
.prd-card-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0;
  background: var(--accent-soft);
  color: var(--accent-deep);
  display: inline-block;
  margin-bottom: 6px;
}
.prd-card-tag.pdf { background: #E0E7FF; color: #3730A3; }
.prd-card-tag.manual { background: #E5E7EB; color: var(--mid); }
.prd-card-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
  line-height: 1.35;
}
.prd-card-meta {
  font-size: 11px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}

/* Web preview · onboarding.brand */
.onbb-preview {
  border-radius: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--paper-2);
  box-shadow: var(--shadow-1);
}
.onbb-browser {
  background: var(--paper);
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.onbb-browser .dots { display: flex; gap: 5px; }
.onbb-browser .dots span {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--mid-2);
}
.onbb-browser .url {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  background: var(--paper-2);
  padding: 4px 14px;
  border-radius: 0;
  flex: 1;
  text-align: center;
}
.onbb-browser .url-lock {
  display: inline-block;
  width: 9px; height: 9px;
  margin-right: 6px;
  vertical-align: -1px;
  color: var(--good);
}

/* Craft theme · default selected */
.onbb-site {
  background: var(--paper);
  color: var(--ink);
  min-height: 380px;
  position: relative;
}
.onbb-site-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 26px;
  border-bottom: 1px solid rgba(27,42,58,0.08);
}
.onbb-site-nav .brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.onbb-site-nav .brand em {
  font-style: italic;
  color: var(--accent);
}
.onbb-site-nav .links {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: var(--ink);
  align-items: center;
}
.onbb-site-nav .links .cta-mini {
  background: var(--accent);
  color: white;
  padding: 5px 12px;
  border-radius: 0;
  font-weight: 600;
}

.onbb-site-hero {
  padding: 34px 26px 28px;
  text-align: center;
}
.onbb-site-hero .eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 12px;
}
.onbb-site-hero .title {
  font-family: 'Fraunces', serif;
  font-size: 34px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 10px;
}
.onbb-site-hero .title em {
  font-style: italic;
  color: var(--accent);
}
.onbb-site-hero .sub {
  font-size: 13px;
  color: rgba(27,42,58,0.65);
  margin-bottom: 20px;
  line-height: 1.55;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.onbb-site-hero .cta {
  background: var(--accent);
  color: white;
  border: none;
  padding: 11px 22px;
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.onbb-site-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 26px 26px;
}
.onbb-prod {
  aspect-ratio: 1.3;
  background: linear-gradient(135deg, rgba(27,42,58,0.07), rgba(27,42,58,0.02));
  border-radius: 0;
  border: 1px solid rgba(27,42,58,0.06);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 20px;
  color: rgba(27,42,58,0.25);
}

/* Theme change hint · floating */
.onbb-preview-hint {
  position: absolute;
  bottom: 12px;
  right: 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(27,42,58,0.4);
  background: rgba(255,255,255,0.6);
  padding: 3px 8px;
  border-radius: 0;
}

/* === DARK SIDEBAR · scoped to /* === MAIN · 2-pane inbox layout === */
/* List pane (left) */
.h-list-pane {
  width: 300px;
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.h-list-head {
  padding: 18px 20px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.h-list-head .top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.h-list-head .top .title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.h-list-head .top .count-pill {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 0;
}
.h-list-head .sub {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 14px;
  line-height: 1.4;
}
.h-list-head .sub strong { color: var(--ink); font-weight: 600; }
.h-filters {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 0 12px;
  margin: 0 -2px;
}
.h-filter {
  white-space: nowrap;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--mid);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
}
.h-filter .ct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  margin-left: 3px;
  color: var(--mid-2);
}
.h-filter.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.h-filter.active .ct { color: var(--paper); opacity: 0.7; }

.h-rows {
  flex: 1;
  overflow-y: auto;
}
.h-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
}
.h-row:hover { background: var(--paper-2); }
.h-row.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.h-row.active::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 1px;
  background: var(--paper);
}

.h-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  position: relative;
  flex-shrink: 0;
}
.h-avatar .ch {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 8px;
  font-weight: 700;
  color: white;
}
.h-row.active .h-avatar .ch { border-color: var(--accent-soft); }
.ch.line { background: #06C755; font-family: 'Fraunces', serif; font-style: italic; }
.ch.web { background: var(--accent); }
.ch.email { background: #1A4A8A; }
.h-row-content { min-width: 0; }
.h-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.h-row-name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-row-age {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  white-space: nowrap;
  flex-shrink: 0;
}
.h-row-age.stale { color: var(--accent); font-weight: 600; }
.h-row-age.critical { color: var(--danger); font-weight: 700; }

.h-row-context {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.h-row-context .q { font-style: italic; color: var(--mid); }
.h-row-context em { font-family: 'IBM Plex Mono', monospace; font-style: normal; color: var(--mid); font-size: 11px; }

.h-row-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.h-row-type {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 0;
}
/* Row status pills · matches filter chips */
.h-row-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0;
}
.h-row-status.new { background: var(--accent-soft); color: var(--accent-deep); }
.h-row-status.waiting { background: #FCE3CC; color: #8A3408; }
.h-row-status.expiring { background: #FDE2E2; color: #991B1B; }

.h-row-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-left: auto;
}
.h-row-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}
.h-row-channel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--mid);
  padding: 2px 6px;
  white-space: nowrap;
}
.h-row-channel .ic { width: 11px; height: 11px; }

/* === DETAIL PANE (right) === */

.h-detail-head {
  padding: 22px 28px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.h-detail-crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.h-detail-crumb .pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 0;
  margin-right: 8px;
  font-weight: 700;
}
.h-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.h-detail-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.h-detail-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.h-detail-meta .item { display: inline-flex; align-items: center; gap: 6px; }
.h-detail-meta .item strong { color: var(--ink); font-weight: 600; }
.h-detail-meta .dot { color: var(--mid-2); }
.h-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 0;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.h-status.warning { background: #FCE3CC; color: #8A3408; }
.h-status.warning::before {
  content: '';
  width: 6px; height: 6px;
  background: #8A3408;
  border-radius: 50%;
}

/* เอไอ hint box prominent */
.h-ai-hint {
  background: linear-gradient(135deg, var(--ai-soft), rgba(123, 143, 107, 0.04));
  border-left: 3px solid var(--ai);
  border-radius: 0;
  padding: 16px 20px;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.h-ai-hint .ic {
  width: 28px; height: 28px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.h-ai-hint .body {}
.h-ai-hint .body .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.h-ai-hint .body .head .label {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  color: var(--ai-deep);
  font-size: 14px;
}
.h-ai-hint .body .head .conf {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background: var(--paper);
  color: var(--ai-deep);
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 600;
}
.h-ai-hint .body .text {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.55;
}
.h-ai-hint .body .text strong { color: var(--ink); font-weight: 700; }
.h-ai-hint .actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}
.h-ai-hint .actions .btn-sm {
  font-size: 12px;
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--ai);
  color: var(--ai-deep);
  border-radius: 0;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.h-ai-hint .actions .btn-sm.primary {
  background: var(--ai);
  color: white;
  border-color: var(--ai);
}

/* Section card */
.h-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.h-card-head {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.h-card-head .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.h-card-head .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}
.h-card-body { padding: 16px 18px; }

/* Quote at a glance */
.q-glance {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 0;
}
.q-glance .cell {
  padding: 0 18px;
  border-right: 1px solid var(--border-2);
}
.q-glance .cell:last-child { border-right: none; }
.q-glance .cell:first-child { padding-left: 0; }
.q-glance .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.q-glance .value {
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  line-height: 1.3;
}
.q-glance .value.accent {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.q-glance .value.warn {
  color: var(--danger);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
}

/* Compact items */
.q-items-mini {
  list-style: none;
  margin: 0;
  padding: 0;
}
.q-items-mini li {
  display: grid;
  grid-template-columns: 1fr 60px 90px;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-2);
  align-items: center;
  font-size: 13px;
}
.q-items-mini li:last-child { border-bottom: none; padding-bottom: 0; }
.q-items-mini .nm { color: var(--ink); }
.q-items-mini .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
  text-align: right;
}
.q-items-mini .pr {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* Timeline compact horizontal */
.h-timeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
}
.h-tl-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding-top: 22px;
}
.h-tl-step::before {
  content: '';
  position: absolute;
  top: 7px; left: 50%;
  width: 100%;
  height: 2px;
  background: var(--good);
  z-index: 0;
}
.h-tl-step:last-child::before { display: none; }
.h-tl-step.future::before { background: var(--border); }
.h-tl-step .dot {
  position: absolute;
  top: 1px;
  width: 14px; height: 14px;
  background: var(--paper);
  border: 3px solid var(--good);
  border-radius: 50%;
  z-index: 1;
}
.h-tl-step.future .dot { border-color: var(--border); }
.h-tl-step.now .dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.h-tl-step .when {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.h-tl-step .what {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 600;
  margin-top: 2px;
}
.h-tl-step.future .what { color: var(--mid); font-weight: 400; }

/* Activity events */
.h-act-list { display: flex; flex-direction: column; }
.h-act-row {
  display: flex;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border-2);
  font-size: 12.5px;
  align-items: flex-start;
}
.h-act-row:last-child { border-bottom: none; }
.h-act-row .when-col {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  min-width: 78px;
  flex-shrink: 0;
}
.h-act-row .what-col { color: var(--ink-2); line-height: 1.5; flex: 1; }
.h-act-row .what-col strong { color: var(--ink); font-weight: 600; }
.h-act-row .dur {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 600;
  margin-left: 6px;
}

/* Action bar bottom */
.h-action-bar {
  padding: 8px 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.h-action-bar .left-actions { display: flex; gap: 8px; }
.h-action-bar .right-actions { display: flex; gap: 8px; align-items: center; }
.h-action-btn {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 0 14px;
  height: 40px;
  box-sizing: border-box;
  font-size: 13px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.h-action-btn:hover { border-color: var(--mid-2); background: var(--paper); }
.h-action-btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 600;
}
.h-action-btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.h-action-btn.line {
  background: #06C755;
  color: white;
  border-color: #06C755;
  font-weight: 600;
}
.h-action-btn.line .ic {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
}

/* Home main · 3-col workspace */
.h-main {
  display: flex;
  height: 100%;
  flex: 1;
  background: var(--paper-2);
}

/* Chat pane (col 3 · 340px) */
.h-chat-pane {
  flex: 1;
  min-width: 0;
  background: var(--paper);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.h-chat-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  flex-shrink: 0;
}
.h-chat-head .av {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 12px;
  color: var(--ink);
  position: relative;
  flex-shrink: 0;
}
.h-chat-head .av .ch {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 14px; height: 14px;
  background: #06C755;
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 8px;
  font-weight: 700;
  color: white;
}
.h-chat-head .info { flex: 1; min-width: 0; }
.h-chat-head .nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-chat-head .sub {
  font-size: 11px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 1px;
}
.h-chat-head .expand-btn {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 11px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 0;
}
.h-chat-head .expand-btn:hover { color: var(--ink); background: var(--paper-2); }

/* เอไอ suggestion banner at top */
.h-chat-suggest {
  margin: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, var(--ai-soft), rgba(123,143,107,.03));
  border-left: 3px solid var(--ai);
  border-radius: 0;
}
.h-chat-suggest .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ai-deep);
  font-weight: 700;
  margin-bottom: 5px;
}
.h-chat-suggest .text {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.h-chat-suggest .text strong { color: var(--ink); font-weight: 600; }
.h-chat-suggest .msg-preview {
  background: var(--paper);
  border: 1px solid var(--ai-soft);
  border-radius: 0;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 8px;
}
.h-chat-suggest .use-btn {
  background: var(--ai);
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Chat stream (compact) */
.h-chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 0 14px 12px;
  background: var(--paper-2);
}
.h-chat-day {
  text-align: center;
  font-size: 10px;
  color: var(--mid);
  padding: 8px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.04em;
}
.h-bub {
  max-width: 260px;
  padding: 8px 11px;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 3px;
}
.h-bub.in {
  background: var(--paper);
  color: var(--ink);
  border-radius: 0;
  border: 1px solid var(--border-2);
}
.h-bub.out {
  background: #06C755;
  color: white;
  border-radius: 0;
  margin-left: auto;
}
.h-bub-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  margin-bottom: 10px;
}
.h-bub-time.in-time { padding-left: 4px; }
.h-bub-time.out-time { text-align: right; padding-right: 4px; }

.h-chat-system {
  font-size: 11px;
  color: var(--mid);
  font-style: italic;
  padding: 6px 8px;
  margin: 4px 0;
  text-align: center;
  background: var(--paper);
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
}
.h-chat-system::before { content: '· '; }
.h-chat-system::after { content: ' ·'; }

/* Reply box */
.h-chat-input {
  padding: 0 20px;
  height: 64px;
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  background: var(--input-bg);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.h-chat-input .box {
  flex: 1;
  padding: 0 14px;
  height: 40px;
  box-sizing: border-box;
  font-size: 13px;
  display: flex;
  align-items: center;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 12px;
  color: var(--mid);
}
.h-chat-input .send {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0 16px;
  height: 40px;
  box-sizing: border-box;
  font-size: 13px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Chat actions · Web variant (no reply box) */
.h-chat-actions {
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}
.h-chat-actions-label {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 8px;
  text-align: center;
}
.h-chat-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 6px;
}
.h-act-btn {
  background: var(--paper-2);
  border: 1px solid var(--border);
  color: var(--ink-2);
  padding: 9px 8px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.h-act-btn:hover { background: var(--paper); border-color: var(--mid-2); color: var(--ink); }
.h-act-btn.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.h-act-btn.primary:hover { background: var(--accent-deep); }

/* Relationship context line · in header */
.h-detail-rel {
  margin-top: 8px;
  font-size: 12px;
  color: var(--mid);
  display: flex;
  align-items: center;
}
.h-detail-rel strong { color: var(--ink-2); font-weight: 600; }
.h-detail-rel.new strong { color: var(--accent); }

/* Total row in compact items list */
.q-items-mini .total-row {
  border-top: 1px solid var(--border-2);
  padding-top: 10px;
  margin-top: 4px;
  font-weight: 600;
}
.q-items-mini .total-row .nm {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}
.q-items-mini .total-row .pr {
  color: var(--accent);
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ═══ COL 2 v3 · เรียงใหม่ตาม mental flow ═══
   1. Quote summary (with customer + items + total)
   2. Status
   3. เอไอ suggest
   4. Action bar (all 6 buttons) */

.h-detail-pane {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-2);
}

.h-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* === 1. Quote summary === */
.h-qs {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 20px;
}
.h-qs-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.04em;
  font-weight: 600;
}
.h-qs-id strong { color: var(--ink); font-weight: 700; }
.h-qs-source {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-qs-source .src-badge {
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 0;
  color: white;
  font-weight: 700;
  font-size: 10px;
  text-align: center;
  line-height: 16px;
  vertical-align: -3px;
  margin-right: 5px;
}
.h-qs-source .src-badge.line { background: #06C755; font-family: 'Fraunces', serif; font-style: italic; }
.h-qs-source .src-badge.web { background: var(--accent); }

.h-qs-project {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 6px 0 8px;
  line-height: 1.2;
}
.h-qs-project em { color: var(--accent); font-style: italic; }

.h-qs-customer {
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 6px;
}
.h-qs-customer strong { font-weight: 600; }
.h-qs-customer .co { color: var(--mid); font-size: 13px; }
.h-qs-customer .dot { color: var(--mid-2); margin: 0 4px; }

.h-qs-rel {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}
.h-qs-rel strong { color: var(--ink-2); font-weight: 600; }
.h-qs-rel .ic {
  width: 14px; height: 14px;
  margin-right: 5px;
  flex-shrink: 0;
}
.h-qs-rel.new strong { color: var(--accent); }

.h-qs-divider {
  height: 1px;
  background: var(--border-2);
  border: none;
  margin: 12px 0;
}

.h-qs-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.h-qs-items li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.h-qs-items li .nm { flex: 1; }
.h-qs-items li .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  min-width: 28px;
  text-align: right;
}
.h-qs-items li .pr {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  min-width: 70px;
  text-align: right;
}

.h-qs-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border-2);
}
.h-qs-total .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}
.h-qs-total .val {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* === 2. Status === */
.h-stat {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.h-stat .status-pill {
  background: #FDE2E2;
  color: #991B1B;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 0;
  flex-shrink: 0;
}


/* State markers · home.line 2-state demo */
.h-state-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 6px 0 10px;
  padding: 6px 0;
}
.h-state-marker:first-child { margin-top: 0; }
.h-state-marker .arrow { color: var(--accent); font-size: 14px; }
.h-state-marker .name { color: var(--ink); }
.h-state-marker .line {
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.h-state-marker .note {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mid-2);
  font-size: 11px;
}

.h-state-2-wrapper {
  position: relative;
  isolation: isolate;
  margin-bottom: 18px;
}
.h-state-dimmed {
  filter: blur(1.5px) brightness(0.85);
  pointer-events: none;
  opacity: 0.6;
}
.h-state-2-wrapper .dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Standalone dialog · no dim backdrop · shows dialog only */
.h-dialog-standalone {
  background: var(--paper-2);
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-bottom: 18px;
  border: 1px dashed var(--border);
}
.h-dialog-standalone .dialog-backdrop {
  position: static;
  background: transparent;
  display: block;
  inset: auto;
}
.h-dialog-standalone .dialog {
  margin: 0;
}

/* Delivery & Send section · appended ใน col 2 · expand inline */
.h-delivery {
  background: var(--paper-2);
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 -28px;
  padding-left: 28px;
  padding-right: 28px;
  border-top: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
}
.h-delivery-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.h-delivery-head .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.h-delivery-head .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

.h-delivery-channels {
  display: flex;
  flex-direction: column;
  gap: 5px;
}










.h-delivery-resend-btn {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
}
.h-delivery-resend-btn:hover { background: var(--paper-3); border-color: var(--mid-2); }
.h-delivery-resend-btn .arr {
  margin-left: 4px;
  color: var(--mid);
  font-size: 9px;
}

/* Expanded · review/edit · default expand ใน deck เพื่อโชว์ */
.h-delivery-compose {
  background: var(--paper);
  border: 1px solid var(--accent);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.h-dc-channels-pick {
  display: flex;
  gap: 5px;
}
.h-dc-pick {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px;
  color: var(--mid);
}
.h-dc-pick .ic {
  width: 16px; height: 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  color: white;
  font-size: 9px;
}
.h-dc-pick .ic.email { background: var(--accent); }
.h-dc-pick .ic.line { background: #06C755; }
.h-dc-pick .ic.sms { background: var(--mid); }
.h-dc-pick .name { font-weight: 600; }
.h-dc-pick .cb {
  width: 12px; height: 12px;
  border: 1.5px solid var(--mid-2);
  background: var(--paper);
}
.h-dc-pick.on {
  background: #FFF7EE;
  border-color: var(--accent);
  color: var(--accent-deep);
}
.h-dc-pick.on .cb {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.h-dc-pick.on .cb::after {
  content: '✓';
  color: white;
  font-size: 9px;
  font-weight: 700;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.h-dc-msg {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  border-radius: 0;
  box-sizing: border-box;
}
.h-dc-msg:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.h-dc-ai {
  background: rgba(123,143,107,.10);
  border-left: 2px solid var(--ai);
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--ink-2);
}
.h-dc-ai .ic {
  width: 16px; height: 16px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 9px;
  flex-shrink: 0;
}
.h-dc-ai .text strong { color: var(--ink); font-weight: 600; }

.h-dc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.h-dc-foot .summary {
  font-size: 10px;
  color: var(--mid);
  flex: 1;
}
.h-dc-foot .summary strong { color: var(--ink-2); font-weight: 600; }
.h-dc-send {
  background: var(--accent);
  color: white;
  border: none;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.h-dc-send:hover { background: var(--accent-deep); }

.h-qs-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.h-qs-top .status-pill {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  background: #FDE2E2;
  color: #991B1B;
  border-radius: 0;
}
.h-stat-meta {
  font-size: 11px;
  color: var(--mid);
  margin-top: 6px;
  margin-bottom: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h-stat-meta strong { color: var(--ink-2); font-weight: 600; }
.h-stat-meta .dot { color: var(--mid-2); }

/* Delivery history row · 5-col grid · channel + recipient + sent + read + opens */
.h-dc-row, .qd-hd-row {
  display: grid;
  grid-template-columns: 22px 50px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  font-size: 11px;
}
.h-dc-row .ic, .qd-hd-row .ic {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  color: white;
  font-size: 10px;
  flex-shrink: 0;
}
.h-dc-row .ic.email, .qd-hd-row .ic.email { background: var(--accent); }
.h-dc-row .ic.line, .qd-hd-row .ic.line { background: #06C755; }
.h-dc-row .ic.sms, .qd-hd-row .ic.sms { background: var(--mid); }
.h-dc-row .ch, .qd-hd-row .ch {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.h-dc-row .val, .qd-hd-row .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-dc-row .sent, .qd-hd-row .sent,
.h-dc-row .read, .qd-hd-row .read,
.h-dc-row .opens, .qd-hd-row .opens {
  font-size: 10px;
  color: var(--mid);
  white-space: nowrap;
}
.h-dc-row .sent strong, .qd-hd-row .sent strong,
.h-dc-row .read strong, .qd-hd-row .read strong,
.h-dc-row .opens strong, .qd-hd-row .opens strong {
  color: var(--ink-2);
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
}

/* ── Hero · 4 sections ─────────────────────── */

/* Section 1: Customer */
.h-cust {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h-cust-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 2px;
}
.h-cust-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.h-cust-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 600;
}
.h-cust-source.line { color: #06A24A; }
.h-cust-source.web { color: var(--accent-deep); }
.h-cust-source .src-badge {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: white;
}
.h-cust-source.line .src-badge { background: #06C755; }
.h-cust-source.web .src-badge { background: var(--accent); }

.h-cust-project {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--mid);
}
.h-cust-project em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--ink);
}
.h-cust-name {
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}
.h-cust-name strong { font-weight: 600; font-family: 'Fraunces', serif; font-size: 19px; font-weight: 500; }
.h-cust-name .dot { color: var(--mid-2); }
.h-cust-name .co { color: var(--mid); font-size: 13px; }
.h-cust-rel {
  font-size: 11px;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.h-cust-rel strong { color: var(--ink-2); font-weight: 600; }
.h-cust-rel .ic { width: 12px; height: 12px; color: var(--good); flex-shrink: 0; }
.h-cust-rel.new .ic { color: var(--accent); }

/* Section 2: Status */
.h-status-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  flex-wrap: wrap;
}
.h-status-box .status-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 0;
  flex-shrink: 0;
}
.h-status-box .status-pill.warn { background: #FDE2E2; color: #991B1B; }
.h-status-box .status-pill.good { background: var(--good-soft); color: var(--good); }
.h-status-meta {
  font-size: 11px;
  color: var(--mid);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.h-status-meta strong { color: var(--ink-2); font-weight: 600; }
.h-status-meta .dot { color: var(--mid-2); }

/* Section 3: Items · max 5 expandable */
.h-items-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h-items-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.h-items-head .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-items-head .total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.h-items-head .total strong { color: var(--ink); font-weight: 700; }
.h-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.h-items-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-2);
}
.h-items-list li:last-child { border-bottom: none; }
.h-items-list .nm { flex: 1; color: var(--ink-2); }
.h-items-list .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  min-width: 32px;
  text-align: right;
}
.h-items-list .pr {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
  min-width: 64px;
  text-align: right;
}
.h-items-more {
  background: transparent;
  border: 1px dashed var(--border);
  padding: 7px 12px;
  font-family: inherit;
  font-size: 11px;
  color: var(--mid);
  cursor: pointer;
  margin-top: 2px;
}
.h-items-more:hover { background: var(--paper); color: var(--ink-2); border-color: var(--mid-2); }

/* Prefill banner · quotation.builder (opens from home queue row click) */
.prefill-banner {
  background: linear-gradient(135deg, var(--accent-soft), rgba(200,80,31,0.04));
  border-bottom: 1px solid var(--accent);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.prefill-banner .ic {
  width: 36px; height: 36px;
  background: var(--accent);
  color: white;
  border-radius: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.prefill-banner .body { flex: 1; }
.prefill-banner .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 2px;
}
.prefill-banner .src {
  font-size: 13px;
  color: var(--ink);
}
.prefill-banner .src strong { font-weight: 600; }
.prefill-banner .actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.prefill-banner .link {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  padding: 6px 14px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.prefill-banner .dismiss {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 20px;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.prefill-banner .dismiss:hover { background: var(--paper-2); color: var(--ink); }

.qb-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 22px 24px;
}
.qb-sig-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qb-sig-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 16px;
}
.qb-sig-line {
  border-bottom: 1px dashed var(--mid-2);
  height: 32px;
}
.qb-sig-name {
  font-size: 13px;
  color: var(--mid);
  margin-top: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.qb-sig-date {
  font-size: 12px;
  color: var(--mid);
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
}
.qb-sig-content {
  font-size: 13px;
  color: var(--ink-2);
}
.qb-sig-sales-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.qb-sig-sales-meta {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 2px;
  font-family: 'IBM Plex Mono', monospace;
}

.qb-bank-info {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 14px 18px;
}
.qb-bank-row {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
}
.qb-bank-row:last-of-type { border-bottom: none; }
.qb-bank-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  min-width: 110px;
  flex-shrink: 0;
  padding-top: 2px;
}
.qb-bank-val { color: var(--ink-2); flex: 1; }
.qb-bank-val strong { color: var(--ink); font-weight: 600; }
.qb-bank-edit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.qb-bank-edit .link-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.qb-section-hint {
  color: var(--mid);
  font-weight: 400;
  font-size: 11px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

.qb-sum-wht-toggle {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  font-size: 11px;
  color: var(--mid);
  cursor: pointer;
  text-align: center;
}
.qb-sum-wht-toggle:hover { background: var(--paper-3); }
.qb-sum-wht-toggle .hint { color: var(--mid-2); font-size: 10px; margin-left: 6px; }

.qb-pay-advanced {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
}
.qb-pay-advanced:hover { background: var(--paper-3); }
.qb-pay-advanced .hint { color: var(--mid-2); font-size: 10px; margin-left: 6px; }

/* Status step with name label */
.qb-status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.qb-status-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--mid);
  text-transform: uppercase;
  white-space: nowrap;
}
.qb-status-step.done .qb-status-name { color: var(--ink-2); }
.qb-status-step.active .qb-status-name { color: var(--accent); font-weight: 700; }

.qb-nav-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-left: auto;
  font-weight: 400;
}
.qb-nav-item { display: flex; align-items: center; }

.qb-group-toggle-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--mid);
}
.qb-group-toggle-bar .ic {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid-2);
}
.qb-group-toggle-bar .label { flex: 1; color: var(--ink-2); font-weight: 500; }
.qb-group-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.qb-group-toggle-btn:hover { background: var(--paper); }
.qb-group-toggle-btn .hint { color: var(--mid-2); font-weight: 400; font-size: 10px; margin-left: 4px; }

/* Toolbar status flow · compact pills */
.qb-tb-status {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  height: 28px;
}
.qb-tb-step {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 3px 7px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.qb-tb-step.done {
  background: var(--good-soft);
  color: var(--good);
  border-color: var(--good);
}
.qb-tb-step.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 700;
}
.qb-tb-step-line {
  width: 14px;
  height: 1px;
  background: var(--border);
}
.qb-tb-step-line.done { background: var(--good); }

/* Send section · first-send · ใน builder · inline · ไม่มี modal */
.qb-section.qb-send {
  background: linear-gradient(180deg, var(--paper-2) 0%, #FFF3E5 100%);
  border: 1px solid var(--accent);
}
.qb-section.qb-send 
.qb-send-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qb-send-channels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.qb-send-ch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.qb-send-ch .ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  color: white;
  font-size: 11px;
  flex-shrink: 0;
}
.qb-send-ch .ic.email { background: var(--accent); font-family: 'Fraunces', serif; font-style: italic; }
.qb-send-ch .ic.line { background: #06C755; }
.qb-send-ch .ic.sms { background: var(--mid); }
.qb-send-ch .info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.qb-send-ch .info .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
.qb-send-ch .info .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb-send-ch .cb {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  flex-shrink: 0;
  background: var(--paper);
}
.qb-send-ch.on {
  border-color: var(--accent);
  background: #FFF7EE;
}
.qb-send-ch.on .cb {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.qb-send-ch.on .cb::after {
  content: '✓';
  color: white;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.qb-send-msg {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  border-radius: 0;
  box-sizing: border-box;
}
.qb-send-msg:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.qb-send-ai {
  background: rgba(123,143,107,.12);
  border-left: 3px solid var(--ai);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-send-ai .ic {
  width: 22px; height: 22px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.qb-send-ai .text strong { color: var(--ink); font-weight: 600; }

/* Pre-send check */
.qb-send-check {
  background: var(--paper);
  border: 1px solid var(--border-2);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qb-send-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-send-check-row strong { color: var(--ink); font-weight: 600; }
.qb-send-check-row .ico { flex-shrink: 0; }

/* Foot */
.qb-send-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.qb-send-summary {
  flex: 1;
  font-size: 12px;
  color: var(--mid);
  text-align: right;
}
.qb-send-summary strong { color: var(--ink-2); font-weight: 600; }
.qb-send-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qb-send-btn:hover { background: var(--accent-deep); }

.qb-tb-status-compact {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--accent);
  color: white;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.qb-tb-no strong { color: var(--ink); font-weight: 700; }

/* Right sidebar = Send composer (replaces qb-ai sanity check) */
.qb-send-sidebar {
  background: linear-gradient(180deg, #FFF7EE 0%, #FFEAD3 100%);
  border-left: 1px solid var(--accent-soft, #F5C9A5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
}
.qb-send-sidebar-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(200, 80, 31, 0.18);
  background: rgba(255, 255, 255, 0.4);
}
.qb-send-sidebar-head .lbl {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.qb-send-sidebar-head .sub {
  font-size: 11px;
  color: var(--mid);
}

.qb-send-sidebar .qb-send-body {
  padding: 16px 18px;
  flex: 1;
}

/* Sidebar version · stack channels vertically */
.qb-send-sidebar .qb-send-channels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qb-send-sidebar .qb-send-ch {
  padding: 8px 10px;
  background: var(--paper);
  font-size: 11px;
}
.qb-send-sidebar .qb-send-ch .ic {
  width: 20px; height: 20px;
  font-size: 10px;
}

.qb-send-sidebar .qb-send-msg {
  min-height: 140px;
  font-size: 12px;
  padding: 10px 12px;
}

.qb-send-sidebar .qb-send-ai {
  padding: 8px 10px;
  font-size: 11px;
}
.qb-send-sidebar .qb-send-ai .ic {
  width: 18px; height: 18px;
  font-size: 10px;
}

.qb-send-sidebar .qb-send-check {
  padding: 10px 12px;
}
.qb-send-sidebar .qb-send-check-row {
  font-size: 11px;
}

.qb-send-sidebar .qb-send-foot {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.qb-send-sidebar .qb-send-foot .btn {
  flex: 1;
}
.qb-send-sidebar .qb-send-btn {
  flex: 2;
  padding: 9px 14px;
  font-size: 12px;
}

/* Customer picker section · top of document */
.qb-section.qb-customer 
.qb-cust-actions {
  display: flex;
  gap: 6px;
}
.qb-cust-btn {
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.qb-cust-btn:hover { background: var(--paper-3); border-color: var(--mid-2); }
.qb-cust-btn.primary {
  background: var(--accent-soft, #FFF7EE);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.qb-cust-btn.primary:hover { background: #FFEAD3; }
.qb-cust-btn .arr { color: var(--mid); font-size: 8px; margin-left: 2px; }

.qb-cust-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border-2);
}
.qb-cust-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--ink);
  color: white;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
}
.qb-cust-body { flex: 1; min-width: 0; }
.qb-cust-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.qb-cust-name strong { font-weight: 500; }
.qb-cust-name .branch {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
  font-weight: 400;
}
.qb-cust-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qb-cust-field {
  display: flex;
  gap: 12px;
  font-size: 12px;
  align-items: baseline;
}
.qb-cust-field .k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid);
  font-weight: 600;
  min-width: 70px;
  flex-shrink: 0;
}
.qb-cust-field .v { color: var(--ink-2); flex: 1; }
.qb-cust-field .v.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

.qb-cust-rel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(46, 119, 84, 0.06);
  border-left: 3px solid var(--good);
  font-size: 12px;
  color: var(--ink-2);
}
.qb-cust-rel .ic { width: 14px; height: 14px; flex-shrink: 0; }
.qb-cust-rel strong { color: var(--ink); font-weight: 600; }

/* Empty state · ใช้ใน customer + items ของ quotation.create */
.qb-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 22px;
  background: var(--paper);
  border: 1px dashed var(--mid-2);
}
.qb-empty .empty-icon { flex-shrink: 0; }
.qb-empty .empty-msg { flex: 1; min-width: 0; }
.qb-empty .empty-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.qb-empty .empty-sub {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}
.qb-empty .empty-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.qb-cust-btn-big {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-align: left;
  justify-content: flex-start;
}
.qb-cust-btn-big:hover { background: var(--paper-3); border-color: var(--mid-2); }
.qb-cust-btn-big.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.qb-cust-btn-big.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Pre-send check · err level (additional) */
.qb-send-check-row.err strong { color: var(--accent); }
.qb-send-check-row.info { color: var(--mid); }

/* ── Revision · warning banner + diff markers ────── */
.qb-rev-warn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #FFF7E0, #FFEAB3);
  border: 1px solid #D4A017;
  border-left: 4px solid var(--warn, #D4A017);
  margin-bottom: 16px;
}
.qb-rev-warn > .ico {
  width: 22px;
  height: 22px;
  color: #B8860B;
  flex-shrink: 0;
}
.qb-rev-warn .msg { flex: 1; min-width: 0; }
.qb-rev-warn .t {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-rev-warn .t strong { color: var(--accent-deep); font-weight: 700; }
.qb-rev-warn .sub {
  font-size: 11px;
  color: var(--mid);
}
.qb-rev-back {
  background: transparent;
  border: 1px solid var(--mid-2);
  padding: 6px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.qb-rev-back:hover { background: var(--paper); }

/* Modification markers on line items */
.qb-mod-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}
.qb-mod-dot.new { background: var(--good); }
.qb-mod-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(200, 80, 31, 0.12);
  color: var(--accent-deep);
  margin-left: 8px;
  vertical-align: 1px;
}
.qb-mod-tag.new {
  background: rgba(46, 119, 84, 0.12);
  color: var(--good);
}

/* Diff summary in sidebar */
.qb-diff-summary {
  background: var(--paper-2);
  border: 1px solid #D4A017;
  border-left: 3px solid #D4A017;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.qb-diff-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #B8860B;
  margin-bottom: 4px;
}
.qb-diff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-2);
}
.qb-diff-row strong { color: var(--ink); font-weight: 600; }
.qb-diff-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.qb-diff-row.add .dot { background: var(--good); }
.qb-diff-row.total {
  padding-top: 4px;
  border-top: 1px solid var(--border-2);
  margin-top: 2px;
  font-weight: 600;
}
.qb-diff-row.total s { color: var(--mid-2); text-decoration: line-through; }
.qb-diff-row.total strong { color: var(--accent); font-weight: 700; }

/* Q-detail page layout */
.qd-crumb a { color: var(--mid); text-decoration: none; }
.qd-crumb a:hover { color: var(--accent); }
.qd-crumb .sep { color: var(--mid-2); }
.qd-crumb .current { color: var(--ink); font-weight: 500; }
.qd-title em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.qd-meta-row .item { display: inline-flex; align-items: center; gap: 6px; }
.qd-meta-row .item strong { color: var(--ink); font-weight: 600; }
.qd-meta-row .item.amt strong {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}
.qd-status-pill::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--good);
  border-radius: 50%;
}

/* Tabs */
.qd-tab.active .count {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

/* Content grid */

/* Delivery timeline */
.del-timeline {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.del-timeline-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.del-timeline-head .t {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.del-timeline-head .meta {
  font-size: 12px;
  color: var(--mid);
}

.channel-card {
  padding: 18px 20px;
  border-bottom: 1px solid var(--border-2);
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 16px;
  align-items: flex-start;
}
.channel-card:last-child { border-bottom: none; }
.channel-card.disabled { opacity: 0.45; }

.ch-icon {
  width: 40px; height: 40px;
  border-radius: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  color: white;
}
.ch-icon.email { background: #1A4A8A; }
.ch-icon.line { background: #06C755; font-family: 'Fraunces', serif; font-style: italic; font-size: 17px; }
.ch-icon.sms { background: var(--mid); }

.ch-info {}
.ch-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}
.ch-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.ch-recipient {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
}
.ch-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  font-family: 'IBM Plex Mono', monospace;
  padding: 2px 8px;
  border-radius: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.ch-status.delivered { background: var(--good-soft); color: var(--good); }
.ch-status.opened { background: var(--ai-soft); color: var(--ai-deep); }
.ch-status.clicked { background: var(--accent-soft); color: var(--accent-deep); }
.ch-status.read { background: #DAF5E0; color: #065F2B; }
.ch-status.off { background: var(--paper-3); color: var(--mid); }

/* Timeline events */
.ev-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.ev-list::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border);
}
.ev-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  position: relative;
}
.ev-dot {
  width: 13px; height: 13px;
  background: var(--paper);
  border: 2px solid var(--good);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.ev-row.future .ev-dot { border-color: var(--border); }
.ev-dot.click { border-color: var(--accent); background: var(--accent); }
.ev-row.future { opacity: 0.5; }
.ev-time {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid);
  min-width: 56px;
}
.ev-text { color: var(--ink-2); }
.ev-text strong { color: var(--ink); font-weight: 600; }
.ev-text .accent-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.ev-row .duration {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}

.ch-side {
  text-align: right;
}
.ch-side .quick-action {
  font-size: 12px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent-soft);
  border-radius: 0;
  padding: 6px 12px;
  font-family: inherit;
  cursor: pointer;
}

/* Channel disabled state */
.channel-card.disabled .ch-add-btn {
  font-size: 12px;
  color: var(--mid);
  background: transparent;
  border: 1px dashed var(--border);
  padding: 6px 12px;
  border-radius: 0;
  font-family: inherit;
}

/* Activity sidebar */
.qd-activity-head .t {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.qd-act-item .ev-dot { margin-top: 4px; }
.qd-act-item .body { flex: 1; }
.qd-act-item .body .who { color: var(--ink); font-weight: 600; }
.qd-act-item .body .what { color: var(--ink-2); }
.qd-act-item .body .time {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid);
  font-size: 11px;
  margin-top: 2px;
}

/* เอไอ hint box on activity */
.qd-ai-hint strong { font-weight: 700; }
.qd-ai-hint .head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  margin-bottom: 4px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
/* removed pseudo · use inline icon */

/* Send dialog (used in send-d frame) */
.dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(27,42,58,0.40);
  display: grid;
  place-items: center;
  z-index: 50;
}
.dialog {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-3);
  width: 720px;
  max-height: 88%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dialog-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-head .t {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dialog-head .t em {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 13px;
  color: var(--mid);
  margin-left: 8px;
  font-weight: 500;
}
.dialog-head .close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--mid);
  border-radius: 0;
}
.dialog-body {
  padding: 22px 22px 0;
  overflow-y: auto;
}
.dialog-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Channel toggles row */
.ch-toggles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.ch-toggle {
  background: var(--paper-2);
  border: 2px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
}
.ch-toggle:hover { border-color: var(--mid-2); }
.ch-toggle.on { border-color: var(--accent); background: var(--accent-soft); }
.ch-toggle .head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ch-toggle .head .ch-mini {
  width: 22px; height: 22px;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}
.ch-toggle .head .ch-mini.email { background: #1A4A8A; }
.ch-toggle .head .ch-mini.line { background: #06C755; font-family: 'Fraunces', serif; font-style: italic; }
.ch-toggle .head .ch-mini.sms { background: var(--mid); }
.ch-toggle .head .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}
.ch-toggle .head .cb {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
}
.ch-toggle.on .head .cb {
  background: var(--accent);
  border-color: var(--accent);
}
.ch-toggle.on .head .cb::after {
  content: '✓';
  color: white;
  font-size: 11px;
  font-weight: 700;
}
.ch-toggle .recipient {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}

/* Custom message */
.dialog-section { margin-bottom: 18px; }
.dialog-section-h {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dialog-section-h .meta { font-size: 11px; color: var(--mid); font-weight: 400; }
.msg-textarea {
  width: 100%;
  min-height: 70px;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  resize: vertical;
}
.msg-textarea:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* Preview tabs */
.prev-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.prev-tab {
  padding: 8px 14px;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prev-tab.active {
  color: var(--ink);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
.prev-tab.dim { opacity: 0.4; }
.preview-window {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.55;
  min-height: 160px;
  margin-bottom: 8px;
  max-height: 220px;
  overflow-y: auto;
}
.preview-email-subject {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}
.preview-divider {
  height: 1px;
  background: var(--border);
  margin: 10px 0;
}
.preview-cta-mock {
  display: inline-block;
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: 0;
  font-size: 12px;
  font-weight: 600;
  margin-top: 8px;
}

/* Send button with count */
.send-summary {
  font-size: 12px;
  color: var(--mid);
}
.send-summary strong { color: var(--ink); font-weight: 600; }
.btn-send-multi {
  background: var(--accent);
  color: var(--paper);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
  border-radius: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.btn-send-multi:hover { background: var(--accent-deep); }

/* Mobile send dialog */
.sm-screen {
  background: var(--paper-2);
  min-height: 100%;
  position: relative;
}
.sm-bg-content {
  padding: 16px;
  opacity: 0.4;
  pointer-events: none;
}
.sm-bg-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px;
  margin-bottom: 10px;
}
.sm-bg-card .t { font-size: 14px; font-weight: 600; color: var(--ink); }
.sm-bg-card .s { font-size: 12px; color: var(--mid); margin-top: 4px; }

.sm-sheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: var(--paper);
  border-radius: 0;
  padding: 8px 16px 16px;
  box-shadow: 0 -12px 32px rgba(27,42,58,0.18);
  max-height: 78%;
  display: flex;
  flex-direction: column;
}
.sm-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 0;
  margin: 0 auto 12px;
}
.sm-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.sm-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 16px;
}
.sm-section { margin-bottom: 14px; }
.sm-section-h {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.sm-ch-list { display: flex; flex-direction: column; gap: 8px; }
.sm-ch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
}
.sm-ch-row.on { background: var(--accent-soft); border-color: var(--accent); }
.sm-ch-row .ch-mini {
  width: 26px; height: 26px;
  border-radius: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.sm-ch-row .ch-mini.email { background: #1A4A8A; }
.sm-ch-row .ch-mini.line { background: #06C755; font-family: 'Fraunces', serif; font-style: italic; }
.sm-ch-row .ch-mini.sms { background: var(--mid); }
.sm-ch-row .body { flex: 1; }
.sm-ch-row .body .nm { font-size: 13px; font-weight: 600; color: var(--ink); }
.sm-ch-row .body .recipient { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--mid); margin-top: 1px; }
.sm-ch-row .switch {
  width: 36px; height: 22px;
  background: var(--border);
  border-radius: 0;
  position: relative;
  flex-shrink: 0;
}
.sm-ch-row .switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: all 0.15s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.sm-ch-row.on .switch { background: var(--accent); }
.sm-ch-row.on .switch::after { left: 16px; }
.sm-msg {
  width: 100%;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  min-height: 56px;
  resize: none;
}
.sm-preview-thumb {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  max-height: 100px;
  overflow: hidden;
}
.sm-pager {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin-top: 6px;
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
}
.sm-pager .d {
  width: 5px; height: 5px;
  background: var(--border);
  border-radius: 50%;
}
.sm-pager .d.on { background: var(--accent); }
.sm-send-btn {
  margin-top: 14px;
  width: 100%;
  padding: 14px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ═══ QUOTATION DETAIL v2 · hero + 2 tabs ═══ */

/* Sticky topbar */
.qd-topbar .back {
  font-size: 20px;
  color: var(--mid);
  cursor: pointer;
  font-weight: 300;
  padding: 6px 10px 6px 0;
}
.qd-topbar .qd-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.qd-topbar .qd-customer {
  flex: 1;
  font-size: 13px;
  color: var(--mid);
}
.qd-topbar .qd-customer strong { color: var(--ink-2); font-weight: 600; }
.qd-topbar .qd-actions {
  display: flex;
  gap: 6px;
}
.qd-btn .ico { width: 13px; height: 13px; }

/* Body container */

/* ─── HERO · status + identity + เอไอ inset ─── */
.qd-hero-rel strong { color: var(--ink-2); font-weight: 600; }
.qd-hero-rel .ic {
  width: 12px; height: 12px;
  color: var(--good);
}
.qd-hero-rel .link {
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  margin-left: 4px;
}
.qd-hero-rel .link:hover { text-decoration: underline; }

/* เอไอ inset inside hero */
.qd-hero-ai .ic {
  width: 28px; height: 28px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.qd-hero-ai .body { flex: 1; min-width: 0; }
.qd-hero-ai .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}
.qd-hero-ai .head .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--ai-deep);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.qd-hero-ai .head .conf {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ai-deep);
  font-weight: 700;
}
.qd-hero-ai .text {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 10px;
}
.qd-hero-ai .text strong { color: var(--ink); font-weight: 600; }
.qd-hero-ai .actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.qd-hero-ai .btn-primary {
  background: var(--ai-deep);
  color: white;
  border: none;
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.qd-hero-ai .btn-ghost {
  background: transparent;
  color: var(--ai-deep);
  border: 1px solid var(--ai);
  padding: 5px 10px;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* ─── TABS · 2 tabs ─── */
.qd-tab .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-left: 6px;
  font-weight: 400;
}
.qd-tab-marker .arrow { color: var(--accent); font-size: 14px; }
.qd-tab-marker .name { color: var(--ink); }
.qd-tab-marker .line {
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.qd-tab-marker .note {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mid-2);
  font-size: 11px;
}

/* ─── TAB 1 · FULL QUOTATION (document style) ─── */
.qd-doc-title .en {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.08em;
  display: block;
  margin-top: 2px;
  text-transform: uppercase;
  font-style: normal;
}
.qd-doc-meta .label {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10px;
}
.qd-doc-meta .val {
  color: var(--ink);
  font-weight: 600;
  margin-left: 6px;
}
.qd-doc-meta .val.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
}

/* Parties · from / to */
.qd-doc-party .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.qd-doc-party .nm {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 3px;
}
.qd-doc-party .addr {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}

/* Items table */
.qd-doc-items th {
  text-align: left;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
}
.qd-doc-items th.num { text-align: right; }
.qd-doc-items td {
  padding: 12px 8px;
  vertical-align: top;
  border-bottom: 1px solid var(--border-2);
}
.qd-doc-items .item-nm {
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 3px;
}
.qd-doc-items .item-desc {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.4;
}
.qd-doc-items td.num {
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
}
.qd-doc-items td.total {
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
  color: var(--ink);
}

/* Pricing summary */
.qd-doc-pricing-row .lbl { color: var(--mid); }
.qd-doc-pricing-row .val {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  font-weight: 500;
}
.qd-doc-pricing-row.total .lbl {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
}
.qd-doc-pricing-row.total .val {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* Terms + Notes */
.qd-doc-terms .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}
.qd-doc-terms ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.7;
}
.qd-doc-terms li {
  display: flex;
  gap: 10px;
  padding: 3px 0;
}
.qd-doc-terms li .k {
  min-width: 130px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}
.qd-doc-terms li .v { flex: 1; }
.qd-doc-notes .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 4px;
}

/* ─── TAB 2 · FULL HISTORY ─── */
.qd-hist-chip .ct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  margin-left: 4px;
  opacity: 0.7;
}
.qd-hist-day .relative {
  color: var(--ink-2);
  margin-left: 6px;
  font-weight: 400;
}
.qd-hist-event .time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  width: 56px;
  flex-shrink: 0;
  padding-top: 1px;
  text-align: right;
}
.qd-hist-event .src {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 11px;
  color: white;
  flex-shrink: 0;
  margin-top: 1px;
}
.qd-hist-event.customer .src { background: #06C755; }
.qd-hist-event.salesperson .src { background: var(--accent); }
.qd-hist-event.system .src { background: var(--mid); }
.qd-hist-event.ai .src { background: var(--ai); }
.qd-hist-event .body { flex: 1; min-width: 0; }
.qd-hist-event .heading {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.qd-hist-event .heading strong { color: var(--ink); font-weight: 600; }
.qd-hist-event .heading .kind {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-right: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qd-hist-event .quote-block {
  background: var(--paper-2);
  border-left: 2px solid var(--border);
  padding: 8px 12px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-top: 6px;
  font-style: italic;
}
.qd-hist-event.customer .quote-block { border-left-color: #06C755; }
.qd-hist-event.salesperson .quote-block { border-left-color: var(--accent); }
.qd-hist-event .meta {
  font-size: 11px;
  color: var(--mid);
  margin-top: 4px;
  font-family: 'IBM Plex Mono', monospace;
}
.qd-hist-event .meta em {
  color: var(--accent);
  font-style: normal;
  font-weight: 600;
}


/* Item code (SKU) below item name */
.qd-doc-items .item-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--mid);
  margin-bottom: 3px;
}

/* Bahttext · Fraunces italic character moment */
.qd-doc-bahttext .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  min-width: 220px;
  flex-shrink: 0;
}
.qd-doc-bahttext .amount-text {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  flex: 1;
}

/* Bank info section */
.qd-doc-bank .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 10px;
}
.qd-doc-bank .rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qd-doc-bank .row {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--ink-2);
}
.qd-doc-bank .row .k {
  min-width: 110px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  flex-shrink: 0;
}
.qd-doc-bank .row .v { flex: 1; }
.qd-doc-bank .row .v strong { color: var(--ink); font-weight: 600; }

/* Signature block */
.qd-doc-sig-box .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 18px;
}
.qd-doc-sig-box .line {
  border-bottom: 1px dashed var(--mid-2);
  height: 34px;
}
.qd-doc-sig-box .placeholder {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
  color: var(--mid);
  margin-top: 8px;
}
.qd-doc-sig-box .date {
  font-size: 12px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 12px;
}
.qd-doc-sig-box .sales-info {
  font-size: 13px;
  color: var(--ink-2);
}
.qd-doc-sig-box .sales-info .name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 6px;
}
.qd-doc-sig-box .sales-info .meta {
  font-size: 12px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-bottom: 2px;
}

/* Delivery + Send · appended inside qd-hero · static */
.qd-hd-head .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.qd-hd-head .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.qd-hd-ch .ic {
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  color: white;
  font-size: 10px;
}
.qd-hd-ch .ic.email { background: var(--accent); }
.qd-hd-ch .ic.line { background: #06C755; }
.qd-hd-ch .ic.sms { background: var(--mid); }
.qd-hd-ch .name { font-weight: 600; }
.qd-hd-ch .cb {
  width: 14px; height: 14px;
  border: 1.5px solid var(--mid-2);
  background: var(--paper);
}
.qd-hd-ch.on .cb {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.qd-hd-ch.on .cb::after {
  content: '✓';
  color: white;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}
.qd-hd-ai-hint .ic {
  width: 18px; height: 18px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 10px;
  flex-shrink: 0;
}
.qd-hd-ai-hint .text strong { color: var(--ink); font-weight: 600; }
.qd-hd-foot .summary {
  font-size: 11px;
  color: var(--mid);
  flex: 1;
}
.qd-hd-foot .summary strong { color: var(--ink-2); font-weight: 600; }

/* Close deal button (primary green) */
.qd-btn.primary.close-deal {
  background: var(--good);
  border-color: var(--good);
  color: white;
}
.qd-btn.primary.close-deal:hover {
  background: #245A3B;
  border-color: #245A3B;
}

/* State marker · for showing inline panel state in deck */
.qd-state-marker .arrow { color: var(--accent); font-size: 14px; }
.qd-state-marker .name { color: var(--ink); }
.qd-state-marker .line {
  flex: 1;
  height: 1px;
  background: var(--border-2);
}
.qd-state-marker .note {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--mid-2);
  font-size: 11px;
}

/* Close deal · inline confirmation panel */

.qd-close-head .t {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.qd-close-head .t strong { font-weight: 600; }
.qd-close-head .sub {
  font-size: 12px;
  color: var(--mid);
}
.qd-close-head .sub strong { color: var(--ink-2); font-weight: 600; }
.qd-close-field .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  min-width: 110px;
}
.qd-close-field .val {
  font-size: 13px;
  color: var(--ink-2);
}
.qd-close-field .val.mono {
  font-family: 'IBM Plex Mono', monospace;
}
.qd-close-field .val strong { color: var(--ink); font-weight: 700; }
.qd-close-ch .ic {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  color: white;
  font-size: 10px;
  flex-shrink: 0;
  background: var(--mid);
}
.qd-close-ch.on .ic { background: white; color: var(--good); }
.qd-close-ch .ic.line { background: #06C755; }
.qd-close-ch .ic.email { background: var(--accent); font-family: 'Fraunces', serif; font-style: italic; }
.qd-close-ch .ic.phone { font-size: 8px; }
.qd-close-ch .ic.bank { font-family: 'Fraunces', serif; font-style: italic; }
.qd-close-ch .ic.other { font-size: 13px; }
.qd-close-ch.on .ic.line,
.qd-close-ch.on .ic.email,
.qd-close-ch.on .ic.phone,
.qd-close-ch.on .ic.bank,
.qd-close-ch.on .ic.other {
  background: white;
  color: var(--good);
}
.qd-btn.primary.close-confirm {
  background: var(--good);
  border-color: var(--good);
  color: white;
}
.qd-btn.primary.close-confirm:hover { background: #245A3B; border-color: #245A3B; }
.qd-close-signal .ic {
  width: 24px; height: 24px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
  font-size: 13px;
  flex-shrink: 0;
}
.qd-close-signal .body { flex: 1; min-width: 0; }
.qd-close-signal .t {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.qd-close-signal .t strong { color: var(--ai-deep); font-weight: 700; }
.qd-close-signal .quote {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  margin: 2px 0 4px;
  padding-left: 8px;
  border-left: 2px solid var(--mid-2);
  line-height: 1.5;
}
.qd-close-signal .hint {
  font-size: 11px;
  color: var(--mid);
}

/* customer.detail · stats card · replaces c360-ai */
.c360-stats {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 14px 16px;
}
.c360-stats .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.c360-stats .head .t {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.c360-stats .head .sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.c360-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.c360-stats-item {
  background: var(--paper);
  padding: 10px 12px;
  border: 1px solid var(--border-2);
}
.c360-stats-item .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.c360-stats-item .val {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.1;
}
.c360-stats-item .delta {
  font-size: 10px;
  color: var(--mid);
  margin-top: 2px;
}
.c360-stats-item.accent .val { color: var(--accent); }

/* customer.list · regular search · replaces cl-ai-search */
.cl-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  flex: 1;
}
.cl-search svg {
  width: 16px;
  height: 16px;
  color: var(--mid);
  flex-shrink: 0;
}
.cl-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  color: var(--ink);
}
.cl-search input::placeholder { color: var(--mid-2); }
.cl-search kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background: var(--paper-3);
  padding: 2px 6px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* New: "ใหม่" pill for sub-nav items */
.set-sub-item .new-pill {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  padding: 1px 6px;
  border-radius: 0;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.set-sub-item.active .new-pill { display: none; }

/* Theme current badge in card head */
.theme-current {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  background: var(--accent-soft);
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 600;
}
.theme-current-dot {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Theme picker grid 2×2 */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.theme-card {
  position: relative;
  background: var(--paper);
  border: 2px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
  display: block;
}
.theme-card:hover {
  border-color: var(--mid-2);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.theme-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.theme-card .tc-check {
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  display: none;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.theme-card.selected .tc-check { display: grid; }

/* Mini-preview shared shell */
.tp {
  height: 200px;
  padding: 18px 18px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  background: var(--tp-bg);
  color: var(--tp-text);
  font-family: var(--tp-body);
}
.tp-nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.tp-wordmark {
  font-family: var(--tp-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--tp-text);
}
.tp-wordmark em {
  font-family: var(--tp-display-italic);
  font-style: italic;
  color: var(--tp-accent);
}
.tp-nav-links {
  display: flex;
  gap: 10px;
  font-size: 9px;
  color: var(--tp-mid);
  font-family: var(--tp-body);
}
.tp-hero {
  font-family: var(--tp-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--tp-text);
  margin-top: 4px;
}
.tp-hero em {
  font-family: var(--tp-display-italic);
  font-style: italic;
  font-weight: 500;
  color: var(--tp-accent);
}
.tp-meta {
  font-size: 10px;
  color: var(--tp-mid);
  line-height: 1.4;
  margin-bottom: auto;
}
.tp-cta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.tp-btn {
  background: var(--tp-accent);
  color: var(--tp-bg);
  font-family: var(--tp-body);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 0;
  letter-spacing: var(--tp-btn-letter, 0);
  text-transform: var(--tp-btn-case, none);
}
.tp-pill {
  background: var(--tp-accent-soft);
  color: var(--tp-accent-deep);
  font-family: var(--tp-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 0;
}

/* Theme tokens · scoped per preview */
.tp-craft {
  --tp-bg: var(--paper);
  --tp-text: var(--ink);
  --tp-mid: #6B7785;
  --tp-accent: var(--accent);
  --tp-accent-soft: #F4E2D3;
  --tp-accent-deep: #9C3F18;
  --tp-display: 'IBM Plex Sans Thai', sans-serif;
  --tp-display-italic: 'Fraunces', serif;
  --tp-body: 'IBM Plex Sans Thai', sans-serif;
  --tp-mono: 'IBM Plex Mono', monospace;
  --tp-radius: 6px;
}
.tp-atelier {
  --tp-bg: #F2EAD7;
  --tp-text: #2D1F12;
  --tp-mid: #8A7355;
  --tp-accent: #B8965A;
  --tp-accent-soft: #EBD9B0;
  --tp-accent-deep: #8A6E3D;
  --tp-display: 'Fraunces', serif;
  --tp-display-italic: 'Fraunces', serif;
  --tp-body: 'IBM Plex Sans Thai', sans-serif;
  --tp-mono: 'IBM Plex Mono', monospace;
  --tp-radius: 2px;
}
.tp-atelier .tp-hero { font-weight: 400; letter-spacing: -0.015em; }
.tp-bauhaus {
  --tp-bg: #FAFAF8;
  --tp-text: #0A0A0A;
  --tp-mid: #707070;
  --tp-accent: #E63946;
  --tp-accent-soft: #FDE5E7;
  --tp-accent-deep: #B82A35;
  --tp-display: 'IBM Plex Sans Thai', sans-serif;
  --tp-display-italic: 'IBM Plex Sans Thai', sans-serif;
  --tp-body: 'IBM Plex Sans Thai', sans-serif;
  --tp-mono: 'IBM Plex Mono', monospace;
  --tp-radius: 0;
  --tp-btn-letter: 0.05em;
  --tp-btn-case: uppercase;
}
.tp-bauhaus .tp-hero { font-weight: 700; letter-spacing: -0.025em; }
.tp-bauhaus .tp-hero em {
  font-weight: 700;
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--tp-accent);
  text-decoration-thickness: 3px;
}
.tp-bauhaus .tp-wordmark {
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.tp-bauhaus .tp-wordmark em { font-style: normal; font-weight: 700; }
.tp-velvet {
  --tp-bg: #0F1715;
  --tp-text: #F5E9D5;
  --tp-mid: #8A8074;
  --tp-accent: #C9A961;
  --tp-accent-soft: #3A3025;
  --tp-accent-deep: #A88944;
  --tp-display: 'Fraunces', serif;
  --tp-display-italic: 'Fraunces', serif;
  --tp-body: 'IBM Plex Sans Thai', sans-serif;
  --tp-mono: 'IBM Plex Mono', monospace;
  --tp-radius: 4px;
}
.tp-velvet .tp-hero { font-weight: 400; }

/* Theme card footer */
.tc-foot {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--paper-2);
}
.tc-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tc-name em {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  margin-left: 6px;
  font-size: 13px;
}
.tc-tagline {
  font-size: 11px;
  color: var(--mid);
  margin-top: 2px;
}
.tc-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  text-decoration: none;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tc-link:hover { color: var(--accent); }

/* Color presets · accent override */
.color-presets {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.color-chip {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 2px solid var(--paper);
  box-shadow: 0 0 0 1px var(--border);
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
  padding: 0;
}
.color-chip:hover { transform: scale(1.1); }
.color-chip.selected {
  box-shadow: 0 0 0 2px var(--accent);
}
.color-chip.selected::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Accent preview */
.accent-preview {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.ap-btn {
  background: var(--accent);
  color: var(--paper);
  padding: 8px 16px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 600;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.ap-badge {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 0;
}
.ap-link {
  color: var(--accent);
  font-size: 13px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.ap-ai {
  background: var(--ai-soft);
  color: var(--ai-deep);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}
.ap-ai/* removed pseudo */

/* Radio row · accent mode toggle */
.radio-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.radio-row label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 4px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.radio-row .rd {
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  background: var(--paper);
}
.radio-row label.on .rd { border-color: var(--accent); }
.radio-row label.on .rd::after {
  content: '';
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.radio-row label.on { color: var(--ink); font-weight: 500; }
.radio-row .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-left: 4px;
}

/* Logo display */
.logo-display {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
}
.logo-prev {
  width: 56px; height: 56px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.logo-info { flex: 1; }
.logo-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.logo-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
}
.logo-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* Check row · logo binding */
.check-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.check-row label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 3px 0;
  font-size: 13px;
  color: var(--ink-2);
}
.check-row label.disabled { cursor: not-allowed; opacity: 0.55; }
.check-row .cb {
  width: 16px; height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  flex-shrink: 0;
  margin-top: 1px;
}
.check-row label.on .cb {
  background: var(--accent);
  border-color: var(--accent);
}
.check-row label.on .cb::after {
  content: '✓';
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
}
.check-row .meta-inline {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 0;
  margin-left: 6px;
}

/* Hint note */
.hint-note {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-3);
  border: 1px solid var(--border-2);
  border-radius: 0;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.55;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hint-note::before {
  content: 'ℹ';
  color: var(--mid);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: -1px;
}
.hint-note strong {
  color: var(--ink-2);
  font-weight: 600;
}
.hint-note a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* LINE Official Account settings page · scoped */
.loa-page-head {
  margin-bottom: 28px;
}
.loa-page-crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}
.loa-page-title {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.loa-page-title em { color: var(--accent); font-style: italic; }
.loa-page-desc {
  font-size: 14px;
  color: var(--mid);
  line-height: 1.55;
  max-width: 640px;
}

/* Status panel · top */
.loa-status {
  background: linear-gradient(135deg, var(--good-soft), rgba(106,153,78,.04));
  border: 1px solid var(--good);
  border-radius: 0;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
}
.loa-status .badge {
  width: 48px; height: 48px;
  background: var(--good);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.loa-status .badge svg { width: 24px; height: 24px; }
.loa-status .info { flex: 1; }
.loa-status .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--good);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 3px;
}
.loa-status .name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
}
.loa-status .meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--mid);
}
.loa-status .meta .dot { color: var(--mid-2); }
.loa-status .actions {
  display: flex;
  gap: 8px;
}

/* Field group sections */
.loa-section {
  margin-bottom: 28px;
}
.loa-section-head {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.loa-section-head .t {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.loa-section-head .d {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}

.loa-field {
  margin-bottom: 16px;
}
.loa-field .lbl {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.loa-field .lbl .req { color: var(--accent); }
.loa-field .lbl .help {
  font-size: 11px;
  color: var(--mid);
  font-weight: 400;
  margin-left: auto;
}
.loa-input-box {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--input-bg);
  align-items: center;
}
.loa-input-box input,
.loa-input-box textarea,
.loa-input-box .val {
  flex: 1;
  padding: 9px 12px;
  border: none;
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.loa-input-box textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.55;
  width: 100%;
}
.loa-input-box:has(textarea) { align-items: stretch; }
.loa-input-box.readonly .val {
  cursor: default;
  user-select: all;
  color: var(--ink-2);
}
.loa-input-box .reveal,
.loa-input-box .copy {
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  color: var(--mid);
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
}
.loa-input-box .reveal:hover,
.loa-input-box .copy:hover { color: var(--ink); }
.loa-field .hint {
  font-size: 11px;
  color: var(--mid);
  margin-top: 5px;
  line-height: 1.5;
}
.loa-field .hint a { color: var(--accent); text-decoration: none; }
.loa-field .hint code {
  background: var(--paper-2);
  padding: 1px 5px;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

/* Test panel */
.loa-test-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px 18px;
}
.loa-test-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.loa-test-row .info { flex: 1; }
.loa-test-row .info .t {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.loa-test-row .info .d {
  font-size: 11px;
  color: var(--mid);
}
.loa-test-row .btn-test {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 9px 16px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.loa-test-recent {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 6px;
}
.loa-test-recent .ok {
  color: var(--good);
  font-weight: 600;
}

/* Stat row */
.loa-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.loa-stat {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
}
.loa-stat .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.loa-stat .val {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.loa-stat .sub {
  font-size: 11px;
  color: var(--mid);
  margin-top: 2px;
}

/* Danger zone */
.loa-danger {
  margin-top: 32px;
  padding: 18px 20px;
  border: 1px solid #FECACA;
  border-radius: 0;
  background: #FEF2F2;
  display: flex;
  align-items: center;
  gap: 14px;
}
.loa-danger .info { flex: 1; }
.loa-danger .info .t {
  font-size: 13px;
  font-weight: 600;
  color: #991B1B;
  margin-bottom: 2px;
}
.loa-danger .info .d {
  font-size: 12px;
  color: #7F1D1D;
  line-height: 1.5;
}
.loa-danger .btn-disconnect {
  background: white;
  color: #991B1B;
  border: 1px solid #991B1B;
  padding: 8px 14px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.loa-danger .btn-disconnect:hover { background: #991B1B; color: white; }

/* Sub-nav for settings (if applicable) · inline */
.set-subnav {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  padding: 0 40px;
  gap: 0;
}
.set-subnav-item {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--mid);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.set-subnav-item:hover { color: var(--ink); }
.set-subnav-item.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

/* ═══ MOBILE · 4 phones ═══ */
.mb-phone-label .num {
  background: var(--ink);
  color: var(--paper);
  padding: 2px 7px;
  margin-right: 6px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-style: italic;
}

/* Top bar */
.mb-topbar .brand {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.mb-topbar .brand em { color: var(--accent); font-style: italic; }
.mb-topbar .icons { display: flex; gap: 10px; color: var(--mid); }
.mb-topbar .icons svg { width: 16px; height: 16px; }
.mb-topbar .back {
  color: var(--mid);
  font-size: 18px;
  cursor: pointer;
  font-weight: 300;
}
.mb-topbar .title {
  flex: 1;
  text-align: left;
  margin-left: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
}
.mb-topbar .title small {
  font-family: inherit;
  color: var(--mid);
  font-weight: 400;
  display: block;
  margin-top: 1px;
  font-size: 10px;
}

/* Page header (under topbar) */
.mb-page-head h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}
.mb-page-head .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  background: var(--paper-2);
  padding: 3px 8px;
  border-radius: 0;
}

/* Filter chips */

/* Queue list */
.mb-q-avatar .ch {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 8px;
  color: white;
  border: 1.5px solid var(--paper);
}
.mb-q-avatar .ch.line { background: #06C755; }
.mb-q-avatar .ch.web { background: var(--accent); }
.mb-q-name .co { color: var(--mid); font-weight: 400; }
.mb-q-meta .price {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

/* Quote detail (Phone 2) */
.mb-status-strip .days { font-family: 'Fraunces', serif; font-weight: 700; font-size: 13px; font-style: italic; text-transform: none; letter-spacing: 0; }
.mb-card .id-mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  font-weight: 600;
  margin-bottom: 4px;
}
.mb-card .customer {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.mb-card .customer .co { color: var(--mid); font-size: 11px; font-weight: 400; }
.mb-card .rel {
  font-size: 10px;
  color: var(--mid);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.mb-card .rel strong { color: var(--ink-2); font-weight: 600; }
.mb-items li {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.mb-items li .nm { flex: 1; color: var(--ink-2); }
.mb-items li .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  min-width: 22px;
  text-align: right;
}
.mb-items li .pr {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  min-width: 58px;
  text-align: right;
}
.mb-total .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}
.mb-total .val {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
}
.mb-stat-line strong { color: var(--ink-2); font-weight: 600; }
.mb-stat-line .dot { color: var(--mid-2); }
.mb-ai .ic {
  width: 22px; height: 22px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.mb-ai .body { flex: 1; min-width: 0; }
.mb-ai .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.mb-ai .head .label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ai-deep);
  letter-spacing: 0.02em;
}
.mb-ai .head .conf {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ai-deep);
  font-weight: 700;
}
.mb-ai .text {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 8px;
}
.mb-ai .text strong { color: var(--ink); font-weight: 600; }
.mb-ai .cta {
  background: var(--ai-deep);
  color: white;
  border: none;
  padding: 7px 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  width: 100%;
  cursor: pointer;
}

/* Sticky bottom action bar */
.mb-sticky-bottom button {
  flex: 1;
  padding: 8px 6px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.mb-sticky-bottom button.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

/* Chat (Phone 3) */

/* เอไอ peek bottom sheet */
.mb-ai-peek .handle {
  width: 32px; height: 3px;
  background: var(--ai);
  margin: 0 auto 8px;
  opacity: 0.4;
}
.mb-ai-peek .head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
.mb-ai-peek .label {
  font-size: 9px;
  font-weight: 700;
  color: var(--ai-deep);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.mb-ai-peek .conf {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--ai-deep);
  font-weight: 700;
}
.mb-ai-peek .text {
  font-size: 10px;
  color: var(--ink-2);
  line-height: 1.4;
}
.mb-ai-peek .text strong { color: var(--ink); font-weight: 600; }

/* Reply input row */
.mb-reply .box {
  flex: 1;
  padding: 8px 10px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-size: 10px;
  color: var(--mid);
  display: flex;
  align-items: center;
}
.mb-reply .send {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0 12px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
}

/* Bottom nav */
.mb-tab svg { width: 18px; height: 18px; }
.mb-tab.fab svg { width: 22px; height: 22px; }

/* Send sheet · Phone 4 */
.mb-detail-dim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
}
.mb-sheet .handle {
  width: 36px; height: 3px;
  background: var(--mid-2);
  margin: 8px auto 6px;
}
.mb-sheet h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 4px 14px 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.mb-sheet-section .h {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
  margin-bottom: 6px;
}
.mb-ch-row .toggle {
  width: 32px; height: 18px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  position: relative;
  flex-shrink: 0;
}
.mb-ch-row .toggle::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  top: 1px;
  left: 1px;
}
.mb-ch-row.on .toggle {
  background: var(--accent);
  border-color: var(--accent);
}
.mb-ch-row.on .toggle::after {
  left: auto; right: 1px;
  background: white;
  border-color: var(--accent);
}
.mb-ch-row .ch-name {
  font-weight: 600;
  color: var(--ink);
  min-width: 50px;
}
.mb-ch-row .ch-val {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}


/* MVP product.edit · new elements */
.pe-variant-toggle {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  margin-bottom: 20px;
}
.pe-variant-toggle .toggle {
  width: 36px;
  height: 20px;
  background: var(--accent);
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}
.pe-variant-toggle .toggle::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--paper);
  top: 3px;
  right: 3px;
}
.pe-variant-toggle .toggle.off {
  background: var(--border);
}
.pe-variant-toggle .toggle.off::after {
  right: auto;
  left: 3px;
}
.pe-variant-toggle .toggle-body strong {
  display: block;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  margin-bottom: 2px;
}

.pe-bulk-actions {
  display: flex;
  gap: 8px;
  margin: 14px 0 12px;
}
.pe-bulk-actions button {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  padding: 6px 10px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  color: var(--ink-2);
  cursor: pointer;
}
.pe-bulk-actions button:hover { background: var(--paper); }

.pe-vat-hint {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
  padding: 10px 14px;
  background: rgba(200, 80, 31, 0.05);
  border-left: 2px solid var(--accent);
  margin-bottom: 14px;
}
.pe-vat-hint strong {
  color: var(--accent);
  font-weight: 700;
}

.pe-related-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border-2);
}
.pe-related-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pe-related-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 10px;
  align-items: center;
  cursor: pointer;
  padding: 4px;
  margin: -4px;
  transition: background 0.1s;
}
.pe-related-item:hover { background: var(--paper-2); }
.pe-related-item .thumb {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, #4A3C2C, #6B5847);
  display: grid;
  place-items: center;
}
.pe-related-item .name {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 2px;
}
.pe-related-item .sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* settings.website.brand · scoped */
.swb-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
.swb-domain-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--input-bg);
}
.swb-domain-field input {
  flex: 1;
  border: none;
  padding: 11px 14px;
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.swb-domain-suffix {
  background: var(--paper-3);
  padding: 11px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mid);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.swb-avail {
  margin-top: 8px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--good, #4A7C59);
}
.swb-avail svg { width: 14px; height: 14px; }
.swb-custom-domain {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
}
.swb-custom-domain .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.swb-custom-domain .head .t {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.swb-custom-domain .head .status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.swb-custom-domain .body {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.5;
}
.swb-custom-domain .body code {
  background: var(--paper-3);
  padding: 1px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.swb-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.swb-theme-opt {
  background: var(--paper-2);
  border: 1.5px solid var(--border);
  padding: 10px;
  cursor: pointer;
  position: relative;
}
.swb-theme-opt.on {
  border-color: var(--accent);
  background: var(--paper);
}
.swb-theme-opt.on::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.swb-theme-swatch {
  height: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 6px;
  border: 1px solid var(--border-2);
}
.swb-theme-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.swb-theme-desc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Live preview */
.swb-preview {
  position: sticky;
  top: 16px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.swb-preview-head {
  background: var(--paper-3);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.swb-preview-head .url {
  color: var(--accent);
  font-weight: 700;
}
.swb-preview-body {
  height: 460px;
  overflow: hidden;
  position: relative;
}
.swb-preview-frame {
  transform: scale(0.32);
  transform-origin: top left;
  width: 312.5%;
  height: 312.5%;
  background: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  padding: 24px;
}
.swb-preview-frame .pf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 24px;
}
.swb-preview-frame .pf-logo {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.swb-preview-frame .pf-logo em { color: var(--accent); }
.swb-preview-frame .pf-nav-links {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.swb-preview-frame .pf-hero {
  background: var(--paper-2);
  padding: 36px 28px;
  border: 1px solid var(--border-2);
  margin-bottom: 20px;
}
.swb-preview-frame .pf-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.2;
}
.swb-preview-frame .pf-hero h1 em { color: var(--accent); }
.swb-preview-frame .pf-hero p {
  font-size: 14px;
  color: var(--mid);
  margin: 0 0 20px;
  line-height: 1.5;
}
.swb-preview-frame .pf-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 13px;
}
.swb-preview-frame .pf-products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.swb-preview-frame .pf-product {
  border: 1px solid var(--border-2);
  background: var(--paper);
}
.swb-preview-frame .pf-product .img {
  height: 110px;
  background: linear-gradient(135deg, #4A3C2C, #6B5847);
}
.swb-preview-frame .pf-product .meta {
  padding: 10px 12px;
}
.swb-preview-frame .pf-product .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.swb-preview-frame .pf-product .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent);
}


/* ============================================ */
/* QUOTATION BUILDER CSS · restored after recovery  */
/* ============================================ */

/* --- from redesign_qb.py --- */

/* qb redesign · split view + live preview */
.qb {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
}
.qb-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}
.qb-toolbar {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.qb-toolbar > * {
  flex-shrink: 0;
}
.qb-split {
  flex: 1;
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 0;
  min-height: 0;
  border-top: 1px solid var(--border-2);
}
.qb-form {
  background: var(--paper-2);
  padding: 18px 22px 24px;
  overflow-y: auto;
  border-right: 1px solid var(--border-2);
}
.qb-form .qb-section {
  background: var(--paper);
  border: 1px solid var(--border-2);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.qb-form .qb-section-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-2);
}
.qb-form .qb-section-h .t {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.qb-form .qb-section-h .sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qb-form .qb-fld {
  margin-bottom: 10px;
}
.qb-form .qb-fld:last-child { margin-bottom: 0; }
.qb-form .qb-fld-lbl {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 4px;
  font-weight: 600;
}
.qb-form .qb-fld-input {
  width: 100%;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
}
.qb-form .qb-fld-input:focus { border-color: var(--accent); }
.qb-form .qb-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Items list in form */
.qb-items-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qb-item-row:hover { background: var(--paper); }
.qb-item-thumb {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #4A3C2C, #6B5847);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  color: rgba(255,255,255,0.6);
}
.qb-item-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb-item-qty {
  width: 60px;
  padding: 5px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-size: 12px;
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
}
.qb-item-del {
  background: transparent;
  border: none;
  color: var(--mid-2);
  cursor: pointer;
  font-size: 14px;
}
.qb-item-del:hover { color: var(--accent); }
.qb-add-item-btn {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px dashed var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
  margin-top: 4px;
}
.qb-add-item-btn:hover { color: var(--accent); border-color: var(--accent); }

/* Payment terms */
.qb-pay-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.qb-pay-preset {
  padding: 8px 6px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  text-align: center;
  cursor: pointer;
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.qb-pay-preset.on {
  background: rgba(200, 80, 31, 0.08);
  border-color: var(--accent);
}
.qb-pay-preset .t {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-pay-preset .sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.qb-pay-schedule {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qb-pay-line {
  display: grid;
  grid-template-columns: 24px 1fr 60px 100px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
}
.qb-pay-line .no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.qb-pay-line .label {
  font-size: 12px;
  color: var(--ink);
}
.qb-pay-line .pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  text-align: right;
  color: var(--accent);
}
.qb-pay-line .amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-align: right;
  color: var(--ink-2);
}

/* Live preview right */
.qb-live-preview {
  background: var(--paper);
  overflow-y: auto;
  padding: 24px 28px;
  position: relative;
}
.qb-preview-hint {
  position: sticky;
  top: 0;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  padding: 8px 12px;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 2;
}
.qb-preview-hint .t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.qb-preview-hint .live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--good, #4A7C59);
  border-radius: 50%;
  margin-right: 6px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.qb-preview-hint button {
  background: transparent;
  border: 1px solid var(--border);
  padding: 4px 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.qb-live-preview .qst-preview {
  margin: 0;
  transform-origin: top left;
  background: var(--paper-2);
  padding: 24px 22px;
  border: 1px solid var(--border-2);
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

/* qp adjustments for narrower column */
.qb-live-preview .qp-header {
  display: grid;
  grid-template-columns: 60px 1fr 80px;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-2);
}
.qb-live-preview .qp-logo-img { width: 48px; height: 48px; }
.qb-live-preview .qp-logo-img svg { width: 100%; height: 100%; }
.qb-live-preview .qp-company { font-size: 10px; line-height: 1.5; color: var(--ink-2); }
.qb-live-preview .qp-company-en { font-size: 11px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.qb-live-preview .qp-tag { display: none; }
.qb-live-preview .qp-brand { font-size: 14px; text-align: right; margin-bottom: 6px; }
.qb-live-preview .qp-qr { width: 60px; }

/* Action bar bottom */
.qb-actions-bar {
  flex-shrink: 0;
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: 12px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.04);
}
.qb-actions-bar .left,
.qb-actions-bar .right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.qb-actions-bar .save-indicator {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* --- from qb_round1.py --- */

/* Customer typeahead · search state */
.qb-cust-search {
  position: relative;
}
.qb-cust-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--input-bg);
  border: 1px solid var(--accent);
  outline: 2px solid rgba(200, 80, 31, 0.12);
}
.qb-cust-search-input-wrap svg {
  width: 14px;
  height: 14px;
  color: var(--mid);
  flex-shrink: 0;
}
.qb-cust-search-input-wrap input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.qb-cust-search-results {
  margin-top: 4px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  max-height: 320px;
  overflow-y: auto;
}
.qb-cust-result {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: 10px;
  align-items: start;
}
.qb-cust-result:hover { background: var(--paper-2); }
.qb-cust-result.on { background: rgba(200, 80, 31, 0.06); }
.qb-cust-result:last-child { border-bottom: none; }
.qb-cust-result .star {
  color: var(--accent);
  font-size: 11px;
  margin-top: 1px;
}
.qb-cust-result .info {
  min-width: 0;
}
.qb-cust-result .name {
  font-weight: 700;
  color: var(--ink);
  font-size: 13px;
  margin-bottom: 2px;
}
.qb-cust-result .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.qb-cust-result .stats {
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.qb-cust-result .stats .amount {
  color: var(--accent);
  font-weight: 700;
  display: block;
}
.qb-cust-result-create {
  padding: 10px 12px;
  background: var(--paper-2);
  border-top: 2px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
}
.qb-cust-result-create:hover { background: var(--paper); }

/* Per-item photo toggle */
.qb-item-photo.on {
  background: rgba(123, 143, 107, 0.12);
  border-color: var(--ai);
  color: var(--ai);
}
.qb-item-photo svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

/* Preview · page 2 indicator */
.qp-page2-indicator {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.qp-page2-indicator .t {
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 700;
}
.qp-page2-indicator .c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qp-page2-indicator .c svg {
  width: 12px;
  height: 12px;
  color: var(--ai);
}

/* --- from qb_missing_fields.py --- */

/* Customer · shipping address override */
.qb-ship-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  margin-top: 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-ship-toggle.on { background: rgba(200, 80, 31, 0.06); border-color: var(--accent); }
.qb-ship-toggle .check {
  width: 14px;
  height: 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-size: 10px;
  color: var(--accent);
}
.qb-ship-toggle.on .check { background: var(--accent); color: var(--paper); }
.qb-ship-field {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
}
.qb-ship-field .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--mid);
  margin-bottom: 4px;
}

/* Item row · 2-layer with unit price + variant + note */
.qb-item-row {
  display: grid;
  grid-template-columns: 32px 1fr 50px 90px 22px;
  gap: 8px;
}

.qb-item-detail {
  padding: 8px 10px;
  border-top: 1px dashed var(--border-2);
  background: var(--paper-2);
}
.qb-item-detail .fields {
  display: grid;
  grid-template-columns: 1fr 1fr 70px;
  gap: 6px;
}
.qb-item-detail .fld {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.qb-item-detail .fld > span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
}
.qb-item-detail .fld input,
.qb-item-detail .fld select {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  padding: 5px 8px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  border: 1px solid var(--border);
  background: var(--paper);
  outline: none;
}
.qb-item-detail .fld input:focus,
.qb-item-detail .fld select:focus {
  border-color: var(--accent);
}
.qb-item-disc {
  width: 64px;
  padding: 5px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-size: 11px;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  outline: none;
}
.qb-item-disc:focus { border-color: var(--accent); }
.qb-item-disc::placeholder { color: var(--faint); font-style: italic; }
.qb-item-was {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--faint);
  text-decoration: line-through;
}
.qb-item-info { min-width: 0; overflow: hidden; }
.qb-item-meta {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 3px;
}
.qb-item-sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.qb-item-variant {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10px;
  color: var(--accent);
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(200, 80, 31, 0.08);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.qb-item-variant:hover { background: rgba(200, 80, 31, 0.14); }
.qb-item-variant .caret { font-size: 8px; }
.qb-item-unit {
  width: 90px;
  padding: 5px 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-size: 11px;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  outline: none;
}
.qb-item-unit:focus { border-color: var(--accent); }
.qb-item-unit-wrap {
  display: flex;
  align-items: center;
  gap: 2px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
}
.qb-item-total {
  width: 90px;
  text-align: right;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

/* Line note · expand below item row */
.qb-item-card {
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
}
.qb-item-card:hover { background: var(--paper); }
.qb-item-card .qb-item-row {
  padding: 8px 10px;
  background: transparent;
  border: none;
  align-items: center;
}
.qb-item-note-row {
  padding: 0 10px 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.qb-item-note-row .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qb-item-note-row input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--border);
  padding: 3px 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  outline: none;
}
.qb-item-note-row input:focus { border-bottom-color: var(--accent); color: var(--ink); }
.qb-item-note-row input::placeholder { color: var(--mid-2); }

/* --- from qb_customer_revision.py --- */

/* Customer card · selected state */
.qb-customer-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qb-customer-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.qb-customer-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.qb-customer-meta .row {
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.qb-customer-meta .row .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  min-width: 60px;
}
.qb-customer-actions {
  display: flex;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-2);
}
.qb-customer-actions button {
  background: transparent;
  border: 1px solid var(--border);
  padding: 4px 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
}
.qb-customer-actions button:hover { color: var(--accent); border-color: var(--accent); }
.qb-customer-change {
  background: transparent;
  border: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

/* Revision pill + dropdown */
.qb-tb-rev {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.qb-tb-rev:hover { border-color: var(--accent); }
.qb-tb-rev.open { border-color: var(--accent); background: rgba(200, 80, 31, 0.05); }
.qb-tb-rev .caret { font-size: 9px; color: var(--mid); }

.qb-tb-rev-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 0;
}
.qb-tb-rev-pop .head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--paper-2);
}
.qb-tb-rev-pop .head .t {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.qb-tb-rev-pop .head .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.qb-tb-rev-pop .body { padding: 8px 0; }
.qb-rev-item {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.qb-rev-item:last-child { border-bottom: none; }
.qb-rev-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.qb-rev-item.current .dot { background: var(--accent); animation: pulse 2s infinite; }
.qb-rev-item.sent .dot { background: var(--good, #4A7C59); }
.qb-rev-item .info { font-size: 12px; }
.qb-rev-item .info .num {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-rev-item .info .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.qb-rev-item .info .note {
  font-size: 11px;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 4px 8px;
  margin-top: 4px;
  border-left: 2px solid var(--accent);
}
.qb-rev-item .info .view-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  display: inline-block;
}
.qb-tb-rev-pop .foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border-2);
  background: var(--paper-2);
}
.qb-tb-rev-pop .foot button {
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--mid);
  cursor: pointer;
}
.qb-tb-rev-pop .foot button:hover { color: var(--accent); }

/* --- from qb_master_photo.py --- */

/* Mini toggle for per-item photo */
.qb-item-photo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.qb-item-photo .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.qb-item-photo .sw {
  width: 22px;
  height: 12px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  border-radius: 0;
  position: relative;
  transition: background 0.15s;
}
.qb-item-photo .sw::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 8px;
  height: 8px;
  background: var(--mid-2);
  transition: left 0.15s, background 0.15s;
}
.qb-item-photo.on .sw { background: rgba(123, 143, 107, 0.2); border-color: var(--ai); }
.qb-item-photo.on .sw::after { left: 11px; background: var(--ai); }
.qb-item-photo.on .lbl { color: var(--ai); font-weight: 700; }

/* Master photo section in qb-form (bottom) */
.qb-photo-master {
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.qb-photo-master-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
}
.qb-photo-master-head .info { min-width: 0; flex: 1; }
.qb-photo-master-head .t {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.qb-photo-master-head .sub {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.5;
}
.qb-photo-master-toggle {
  width: 40px;
  height: 22px;
  background: rgba(123, 143, 107, 0.2);
  border: 1px solid var(--ai);
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
.qb-photo-master-toggle::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 19px;
  width: 16px;
  height: 16px;
  background: var(--ai);
  transition: left 0.15s;
}
.qb-photo-master-toggle.off { background: var(--paper-3); border-color: var(--border); }
.qb-photo-master-toggle.off::after { left: 2px; background: var(--mid-2); }
.qb-photo-master-foot {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}
.qb-photo-master-foot .layout-hint {
  text-transform: uppercase;
  font-weight: 700;
}
.qb-photo-master-foot .layout-hint strong { color: var(--ink-2); }
.qb-photo-master-foot .count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.qb-photo-master-foot .count .num {
  color: var(--ai);
  font-weight: 700;
}

/* ============================================ */
/* customer.detail · MVP info-first redesign    */
/* ============================================ */
.cd-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}
.cd-head {
  flex-shrink: 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px 16px;
}
.cd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
  margin-bottom: 8px;
}
.cd-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.cd-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 4px;
}
.cd-meta-line {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
}
.cd-meta-line .dot {
  margin: 0 8px;
  color: var(--mid-2);
}
.cd-meta-line strong { color: var(--ink-2); font-weight: 600; }
.cd-actions { display: flex; gap: 8px; }

.cd-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Card style · shared */
.cd-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cd-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--border);
}
.cd-card-h .t {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.cd-card-h .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cd-card-h .count strong { color: var(--ink-2); font-weight: 700; }
.cd-card-b { padding: 12px 14px; }
.cd-card-b.tight { padding: 0; }

/* Info card (company info) */
.cd-info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-2);
}
.cd-info-row:last-child { border-bottom: none; }
.cd-info-row:first-child { padding-top: 0; }
.cd-info-row .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}
.cd-info-row .val {
  font-size: 13px;
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.cd-info-row .val.mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.cd-info-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cd-info-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.cd-info-tag.good { background: rgba(123, 143, 107, 0.15); border-color: var(--ai); color: var(--ai); }
.cd-info-note {
  font-style: italic;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.4;
}

/* Contact list */
.cd-contact-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.1s;
}
.cd-contact-row:hover { background: var(--paper-3); }
.cd-contact-row:last-child { border-bottom: none; }
.cd-contact-row.primary {
  background: rgba(200, 80, 31, 0.04);
  border-left: 3px solid var(--accent);
}
.cd-contact-row .nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.cd-contact-row .nm .star { color: var(--accent); font-size: 12px; }
.cd-contact-row .role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cd-contact-row .contact-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-2);
}
.cd-contact-row .contact-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cd-contact-row .contact-line svg { width: 12px; height: 12px; color: var(--mid); }
.cd-contact-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 12px;
  color: var(--mid);
  background: var(--paper-3);
  cursor: pointer;
  border-top: 1px dashed var(--border);
}
.cd-contact-add:hover { background: var(--paper); color: var(--accent); }

/* Deal row */
.cd-deal-row {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
}
.cd-deal-row:hover { background: var(--paper-3); }
.cd-deal-row:last-child { border-bottom: none; }
.cd-deal-row .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cd-deal-row .qt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.cd-deal-row .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.cd-deal-row .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--mid);
}
.cd-deal-row .badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 1px 6px;
  background: var(--paper-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd-deal-row .badge.new { background: var(--accent); color: var(--paper); }
.cd-deal-row .badge.warn { background: #C99A3B; color: var(--paper); }
.cd-deal-row .badge.won { background: var(--ai); color: var(--paper); }
.cd-deal-row .age { color: var(--mid); font-size: 11px; }

/* Activity timeline */
.cd-act-day {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 14px 6px;
  background: var(--paper-3);
}
.cd-act-day:not(:first-child) { border-top: 1px solid var(--border-2); }
.cd-act-event {
  padding: 8px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid var(--border-2);
}
.cd-act-event:last-child { border-bottom: none; }
.cd-act-icon {
  width: 18px;
  height: 18px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cd-act-icon svg { width: 10px; height: 10px; color: var(--ink-2); }
.cd-act-text {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
}
.cd-act-text strong { color: var(--ink); font-weight: 700; }
.cd-act-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.cd-act-more {
  text-align: center;
  padding: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
}
.cd-act-more:hover { color: var(--accent); }




/* === product.edit · form input consistency fixes === */

/* pe-textarea · add missing padding */
.pe-textarea {
  padding: 9px 12px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  resize: vertical;
  outline: none;
  border-radius: 0;
}
.pe-textarea:focus { border-color: var(--accent); }

/* pe-spec-key + pe-spec-value · spec sheet inputs */
.pe-spec-key, .pe-spec-value {
  background: var(--input-bg);
  border: 1px solid var(--border);
  padding: 8px 12px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink);
  width: 100%;
  outline: none;
  border-radius: 0;
}
.pe-spec-key:focus, .pe-spec-value:focus {
  border-color: var(--accent);
}
.pe-spec-key {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.pe-spec-value.mono {
  font-family: 'IBM Plex Mono', monospace;
}

/* pe-variant-axis-name · variant axis label input */
.pe-variant-axis-name {
  background: var(--input-bg);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  width: 140px;
}
.pe-variant-axis-name:focus { border-color: var(--accent); }

/* pe-chip-input · standardize bg + add input styling */
.pe-chip-input input {
  background: transparent;
  border: none;
  outline: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink);
  padding: 0;
  min-width: 80px;
}
.pe-chip-input input::placeholder {
  color: var(--mid-2);
}

/* pe-section-name · the section title text (next to section number) */
.pe-section-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
}

/* pe-input focus state · ensure consistency */
.pe-input:focus, .pe-select:focus {
  border-color: var(--accent);
  background: var(--input-bg);
}

/* pe-matrix inputs · table cells with editable values */
.pe-matrix input[type="text"], .pe-matrix input[type="number"] {
  background: var(--input-bg);
  border: 1px solid transparent;
  padding: 4px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  width: 100%;
  outline: none;
  border-radius: 0;
}
.pe-matrix input[type="text"]:hover, .pe-matrix input[type="number"]:hover {
  border-color: var(--border);
}
.pe-matrix input[type="text"]:focus, .pe-matrix input[type="number"]:focus {
  border-color: var(--accent);
}

/* Standardize pe-chip-input padding to match canonical inputs */
.pe-chip-input {
  background: var(--input-bg);
  padding: 8px 12px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
}


/* === product.edit · button styling polish === */

/* × delete button inside variant value chip */
.pe-variant-value button {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 14px;
  height: 14px;
  display: inline-grid;
  place-items: center;
  font-family: inherit;
}
.pe-variant-value button:hover {
  color: var(--accent);
}

/* pe-variant-axis-h · axis header row */
.pe-variant-axis-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

/* pe-variant-axis-edit · "ลบ axis" button */
.pe-variant-axis-edit {
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pe-variant-axis-edit:hover { color: var(--accent-deep); }

/* pe-spec-actions · × delete button on spec rows · proper button */
.pe-spec-actions {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  text-align: right;
  font-family: inherit;
}
.pe-spec-actions:hover { color: var(--danger); }


/* === home.line v2 · conversation style timeline + sticky filters === */

/* Col 1 · filters at bottom · sticky */
.h-list-foot {
  border-top: 1px solid var(--border);
  background: var(--paper);
  padding: 12px 14px;
  flex-shrink: 0;
}
.h-list-foot .h-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0;
}

/* Col 2 · conversation bubbles · LEFT customer · RIGHT sales/system/เอไอ */
.h-tl-bubble {
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.h-tl-bubble.customer { align-items: flex-start; margin-right: auto; }
.h-tl-bubble.sales,
.h-tl-bubble.ai      { align-items: flex-end;   margin-left: auto;  }

.h-tl-bub-content {
  padding: 0;
  font-size: 13px;
  line-height: 1.5;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  word-wrap: break-word;
  width: fit-content;
  max-width: 100%;
}

.h-tl-bubble.customer .h-tl-bub-content {
  background: var(--paper);
  color: var(--ink);
}

.h-tl-bubble.sales .h-tl-bub-content {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.h-tl-bubble.ai .h-tl-bub-content {
  background: var(--ai-soft);
  border: 1px solid var(--ai);
  color: var(--ink);
  padding: 10px 12px;
  min-width: 240px;
}

.h-tl-bubble.event .h-tl-bub-content {
  background: transparent;
  border: none;
  border-left: 2px solid var(--mid-2);
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--mid);
  font-style: normal;
}

.h-tl-bubble.event.customer .h-tl-bub-content {
  border-left-color: var(--mid-2);
}

.h-tl-bubble.event.sales .h-tl-bub-content {
  border-left-color: var(--accent);
  border-right: 2px solid var(--accent);
  border-left: none;
  padding: 4px 10px 4px 10px;
}

.h-tl-bubble.photo .h-tl-bub-content {
  background: var(--paper-3);
  border-style: dashed;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.h-tl-bub-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid-2);
  margin-top: 3px;
  letter-spacing: 0.03em;
  padding: 0 2px;
}

/* เอไอ bubble · label + actions */
.h-tl-bubble.ai .ai-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep);
  margin-bottom: 6px;
}

.h-tl-bubble.ai .ai-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}

.h-tl-bubble.ai .ai-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.h-tl-bubble.ai .h-ai-btn {
  padding: 4px 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--ai);
  color: var(--ai-deep);
  cursor: pointer;
  border-radius: 0;
}

.h-tl-bubble.ai .h-ai-btn.primary {
  background: var(--ai);
  color: white;
  border-color: var(--ai);
}

.h-tl-bubble.ai .h-ai-btn:hover {
  background: var(--ai-soft);
}

.h-tl-bubble.ai .h-ai-btn.primary:hover {
  background: var(--ai-deep);
}

/* Date · centered with lines */
.h-tl-stream .h-tl-day {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.h-tl-stream .h-tl-day::before,
.h-tl-stream .h-tl-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

/* Col 2 · action bar · better alignment */
.h-actions-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 0;
  background: var(--paper);
  flex-shrink: 0;
}

.h-actions-line .h-compose-inline {
  flex: 1;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 12px;


  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  resize: none;
  outline: none;
  border-radius: 0;
  line-height: 1.4;
}

.h-actions-line .h-compose-inline:focus {
  border-color: var(--accent);
  background: var(--input-bg);
}

.h-actions-line .h-act-chat-inline,
.h-actions-line .h-act-send-inline {
  padding: 9px 14px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
}

.h-actions-line .h-act-chat-inline {
  background: var(--paper-2);
  color: var(--ink);
}

.h-actions-line .h-act-chat-inline:hover {
  background: var(--paper-3);
}

.h-actions-line .h-act-send-inline {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
}

.h-actions-line .h-act-send-inline:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Col 3 · เอไอ summary at top */
.h-ref-section.h-ref-ai {
  border-bottom: 1px solid var(--border);
}

.h-ref-section.h-ref-ai .h-ref-ai-head .label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep);
  margin-bottom: 8px;
}

.h-ref-section.h-ref-ai .strategy {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(123, 143, 107, 0.1);
  border-left: 2px solid var(--ai);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.h-ref-section.h-ref-ai .strategy strong {
  color: var(--ai-deep);
  font-weight: 700;
}


/* === home.line · action bar · clean alignment (v3) === */
.h-actions-line {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}

.h-actions-line .h-compose-inline {
  flex: 1;
  height: 40px;
  min-height: 40px;
  max-height: 120px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  resize: none;
  outline: none;
  border-radius: 0;
  line-height: 1.4;
  box-sizing: border-box;
}

.h-actions-line .h-compose-inline::placeholder {
  color: var(--mid-2);
}

.h-actions-line .h-compose-inline:focus {
  border-color: var(--accent);
}

.h-actions-line .h-act-chat-inline,
.h-actions-line .h-act-send-inline {
  height: 40px;
  padding: 0 16px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.h-actions-line .h-act-chat-inline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--border);
}

.h-actions-line .h-act-chat-inline:hover {
  background: var(--paper-2);
}

.h-actions-line .h-act-send-inline {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
  padding: 0 18px;
}

.h-actions-line .h-act-send-inline:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}


/* === home.line · footer bars · same height 64px === */

/* All 3 col footers · uniform 64px */
.h-list-foot,
.h-actions-line,
.h-ref-actions {
  height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: 0 14px;
}

/* Col 1 · filter chips · horizontal scroll (no wrap) */
.h-list-foot {
  overflow-x: auto;
  overflow-y: hidden;
}

.h-list-foot::-webkit-scrollbar {
  height: 0;
}

.h-list-foot .h-filters {
  display: flex;
  gap: 6px;
  padding: 0;
  flex-wrap: nowrap;
  flex-shrink: 0;
  width: max-content;
}

.h-list-foot .h-filter {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Col 2 · action bar already has compose + 2 buttons */
.h-actions-line {
  gap: 6px;
  padding: 0 14px;
}

.h-actions-line .h-compose-inline {
  height: 40px;
  min-height: 40px;
}

.h-actions-line .h-act-chat-inline,
.h-actions-line .h-act-send-inline {
  height: 40px;
}

/* Col 3 · ดูใบเสนอราคา · full-width button */
.h-ref-pane {
  display: flex;
  flex-direction: column;
}

.h-ref-scroll {
  flex: 1;
  overflow-y: auto;
}

.h-ref-actions {
  padding: 12px 14px;
}

.h-ref-view {
  flex: 1;
  height: 40px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h-ref-view:hover {
  background: var(--ink-2);
}

/* === LINE Flex Message · visual card render === */
.h-tl-bubble.flex {
  max-width: 85%;
}

.h-tl-flex {
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
}

.h-tl-flex .flex-header {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
}

.h-tl-flex .flex-brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

.h-tl-flex .flex-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.h-tl-flex .flex-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

.h-tl-flex .flex-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h-tl-flex .flex-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink);
  gap: 10px;
}

.h-tl-flex .flex-row > span:first-child {
  flex: 1;
  min-width: 0;
}

.h-tl-flex .flex-row .p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  flex-shrink: 0;
}

.h-tl-flex .flex-total {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.h-tl-flex .flex-total .t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.h-tl-flex .flex-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.h-tl-flex .flex-btn {
  width: 100%;
  height: 38px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}

.h-tl-flex .flex-btn:hover {
  background: var(--accent-deep);
}


/* === home.web/manual · email + note bubble variants === */

/* Email bubble · sales sends email to customer */
.h-tl-bubble.sales .email-subj {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--paper);
  opacity: 0.95;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 6px;
}

.h-tl-bubble.sales .email-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.92;
}

.h-tl-bubble.sales .email-attach {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--paper);
  opacity: 0.85;
}

/* Note bubble · sales internal note (not sent to customer) */
.h-tl-bubble.sales.note .h-tl-bub-content {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px dashed var(--mid-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

.h-tl-bubble.sales.note .note-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}

.h-tl-bubble.sales.note .note-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}

/* Phone call event · subtle telephone style */
.h-tl-bubble.sales.event.phone .h-tl-bub-content {
  background: transparent;
  border: 1px solid var(--ai);
  border-left: 3px solid var(--ai);
  color: var(--ink-2);
  font-size: 12px;
}

/* New event highlight · first event in source flow */
.h-tl-bubble.event.new .h-tl-bub-content {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-weight: 500;
}


/* === GLOBAL · ทุก column sticky footer 64px === */
.sb-bottom,
.h-list-foot,
.h-actions-line,
.h-ref-actions,
.ql-foot,
.pl-foot,
.cl-foot,
.cd-actions,
.pe-actions-bar,
.set-actions-bar,
.cat-toolbar,
.qb-actions-bar,
.auth-foot,
.wb-bottom {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}

/* sidebar bottom · dark theme */
.sb-bottom {
  background: var(--ink);
  border-top: 1px solid rgba(255,255,255,0.08);
}

/* Buttons inside any footer · 40px tall */
.sb-bottom button,
.h-list-foot button:not(.h-filter),
.h-actions-line button,
.h-ref-actions button,
.ql-foot button,
.pl-foot button,
.cl-foot button,
.cd-actions button,
.pe-actions-bar button,
.set-actions-bar button,
.qb-actions-bar button,
.auth-foot button,
.wb-bottom button {
  height: 40px;
  padding: 0 16px;
  border-radius: 0;
}

/* Filter chips inside h-list-foot · keep compact */
.h-list-foot .h-filter {
  height: auto;
  padding: 6px 11px;
}


/* auto-save indicator in footer bars · subtle */
.auto-save {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auto-save::before {
  content: "●";
  color: var(--good);
  font-size: 8px;
}

/* qb-actions-bar styles (mirrors set-actions-bar) */
.qb-actions-bar {
  background: var(--paper) !important;
}

/* sidebar sb-bottom 64px override · keep user info layout */
.sb-bottom {
  padding: 0 14px;
  position: relative;  /* popover needs an anchor */
}

.sb-bottom .sb-avatar {
  flex-shrink: 0;
}

.sb-bottom .sb-user-info {
  flex: 1;
  min-width: 0;
}

/* Override the generic .sb-bottom button rule (40px / 0 padding / square) for the
   account popover so the toggle and the items render with their own paddings. */
.sb-bottom button.sb-user,
.sb-bottom .sb-pop-item {
  height: auto;
  border-radius: 0;
}
.sb-bottom button.sb-user { padding: 6px 8px; }
.sb-bottom .sb-pop-item { padding: 8px 12px; border-radius: 0; }

/* set-actions-bar · settings save footer */
.set-actions-bar .auto-save {
  flex: 0 0 auto;
}


/* === qb-toolbar · button heights · match action bar pattern === */
.qb-tb-actions .btn {
  height: 32px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
}

.qb-tb-back {
  font-size: 18px;
  flex-shrink: 0;
}

.qb-tb-no strong {
  font-weight: 700;
  font-size: 12px;
}

.qb-tb-status-compact {
  flex-shrink: 0;
}

.qb-tb-save {
  flex-shrink: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.02em;
}


/* === cat-detail · form-first restructure === */
.cat-detail {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border-left: 1px solid var(--border);
  overflow: hidden;
  padding: 0;
}

.cat-detail-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
}

.cat-detail-head {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.cat-detail-crumb {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}

.cat-detail-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}

.cat-detail-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

/* form fields · prominently at top */
.cat-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.cat-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cat-field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 600;
}

.cat-field-input,
.cat-field-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.cat-field-input.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
}

.cat-field-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}

.cat-field-input:focus,
.cat-field-textarea:focus {
  border-color: var(--accent);
}

.cat-field-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 2px;
}

.cat-field-hint strong {
  color: var(--ink);
  font-weight: 700;
}

/* image preview · smaller in form context */
.cat-detail-image {
  height: 80px;
  background: linear-gradient(135deg, #8B7355, #4A3C2C);
  border: 1px solid var(--border);
  border-radius: 0;
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}

.cat-detail-image .change {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: white;
  background: rgba(0,0,0,0.4);
  padding: 2px 6px;
  letter-spacing: 0.04em;
}

.cat-detail-products {
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 4px;
}

.cat-detail-products .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}

.cat-detail-products .head .t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}

.cat-detail-products .head .link {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}

/* sticky bottom action footer · 64px */
.cat-detail-foot {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 0 18px;
  background: var(--paper);
  border-top: 1px solid var(--border);
  align-items: center;
}

.cat-detail-delete {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
}

.cat-detail-delete:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.cat-detail-save {
  flex: 1;
  height: 40px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}

.cat-detail-save:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}


/* === cat-toolbar · add main category button (top-right) === */
.cat-add-main-btn {
  padding: 9px 14px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.cat-add-main-btn:hover {
  background: var(--ink-2);
}


/* ============================================================
   CE · CUSTOMER EDIT FORM
   ============================================================ */

/* Toolbar · top header 64px */
.ce-toolbar {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.ce-back {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
}

.ce-back:hover {
  background: var(--paper-3);
}

.ce-crumb {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  color: var(--ink);
  flex: 1;
}

.ce-crumb .seg {
  color: var(--mid);
}

.ce-crumb strong {
  font-weight: 700;
}

.ce-save-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ce-save-status::before {
  content: "●";
  color: var(--good);
  font-size: 8px;
}

/* Body + grid */
.ce-body {
  flex: 1;
  overflow-y: auto;
  background: var(--paper);
}

.ce-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: 100%;
}

.ce-col-main {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid var(--border);
}

.ce-col-side {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--paper-2);
}

/* Section */
.ce-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ce-section-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.ce-section-head-side {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.ce-section-head-side > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ce-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.ce-section-sub {
  font-size: 11.5px;
  color: var(--mid);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

/* Type cards grid */
.ce-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ce-type-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  border-radius: 0;
}

.ce-type-card:hover {
  background: var(--paper-3);
}

.ce-type-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-width: 2px;
  padding: 9px 11px;
}

.ce-type-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: 2px;
}

.ce-type-icon.gov {
  background: #5A6B7D;
}

.ce-type-icon.edu {
  background: #7B8F6B;
}

.ce-type-icon.med {
  background: #B8533F;
}

.ce-type-card.active .ce-type-icon {
  background: var(--accent);
}

.ce-type-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.ce-type-sub {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10.5px;
  color: var(--mid);
  line-height: 1.3;
}

/* Form fields grid */
.ce-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.ce-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ce-field.ce-col-2 {
  grid-column: span 1;
}

.ce-field.ce-col-full {
  grid-column: span 2;
}

.ce-col-side .ce-fields .ce-field.ce-col-full {
  grid-column: span 2;
}

.ce-col-side .ce-fields {
  grid-template-columns: 1fr;
}

.ce-col-side .ce-fields .ce-field {
  grid-column: span 1 !important;
}

.ce-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ce-label .req {
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
}

.ce-input,
.ce-textarea,
.ce-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.ce-input.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ce-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}

.ce-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
  cursor: pointer;
}

.ce-input:focus,
.ce-textarea:focus,
.ce-select:focus {
  border-color: var(--accent);
}

/* Logo upload */
.ce-logo-up {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ce-logo-preview {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.ce-logo-btn {
  flex: 1;
  height: 40px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
}

.ce-logo-btn:hover {
  background: var(--paper-3);
}

/* Radio chips */
.ce-radio-row {
  display: flex;
  gap: 6px;
}

.ce-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
}

.ce-radio input {
  display: none;
}

.ce-radio.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Checkbox row */
.ce-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 0;
}

.ce-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Contact section · side */
.ce-add-contact {
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  font-weight: 600;
  flex-shrink: 0;
}

.ce-add-contact:hover {
  background: var(--paper-3);
}

.ce-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ce-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
}

.ce-contact.primary {
  border-left: 3px solid var(--accent);
}

.ce-contact-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ce-contact-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.ce-contact.primary .ce-contact-avatar {
  background: var(--accent);
}

.ce-contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ce-contact-name,
.ce-contact-role {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
}

.ce-contact-name {
  font-size: 13.5px;
  font-weight: 600;
  margin-left: -8px;
}

.ce-contact-role {
  font-size: 11.5px;
  color: var(--mid);
  margin-left: -8px;
}

.ce-contact-name:hover,
.ce-contact-role:hover,
.ce-contact-name:focus,
.ce-contact-role:focus {
  background: var(--input-bg);
  border-color: var(--border);
}

.ce-contact-star {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--mid);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ce-contact-star.on {
  color: var(--accent);
}

.ce-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ce-input-sm {
  padding: 7px 10px;
  font-size: 12px;
}

.ce-contact-remove {
  align-self: flex-end;
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--danger);
  cursor: pointer;
  padding: 2px 0;
  border-radius: 0;
}

.ce-contact-remove:hover {
  text-decoration: underline;
}

/* Tags input */
.ce-tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 0;
  align-items: center;
  min-height: 40px;
}

.ce-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  border-radius: 0;
  font-weight: 500;
}

.ce-tag button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  border-radius: 0;
}

.ce-tag button:hover {
  color: var(--paper);
}

.ce-tag-input {
  flex: 1;
  min-width: 80px;
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}

/* Sticky action bar 64px */
.ce-actions-bar {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  background: var(--paper);
  border-top: 1px solid var(--border);
}

.ce-action-delete {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
}

.ce-action-delete:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.ce-actions-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.ce-actions-right .btn {
  height: 40px;
  padding: 0 18px;
}


/* === ce-form · MVP single-column layout === */
.ce-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ce-type-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ce-field-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 4px;
}


/* === ce-label-hint · subtle adaptive hint === */
.ce-label-hint {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.ce-section-cond {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  margin-left: 6px;
}




/* ============================================================
   MOBILE · device + UI · polished v2
   ============================================================ */

.frame.frame-device {
  background: linear-gradient(180deg, #2a2a28 0%, #1a1a18 100%);
  padding: 56px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device {
  width: 393px;
  height: 852px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  box-shadow: 
    inset 0 0 0 8px #1a1a18,
    inset 0 0 0 11px #2a2a28,
    0 30px 80px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.3);
}

/* device chrome · status bar */
.device-status {
  height: 47px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px 0 32px;
  flex-shrink: 0;
  background: var(--paper);
}

.device-time {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.device-status-r {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
}

.device-battery {
  width: 24px;
  height: 11px;
  border: 1px solid var(--ink);
  border-radius: 0;
  position: relative;
  padding: 1px;
}

.device-battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 5px;
  background: var(--ink);
  border-radius: 0;
}

.device-battery-fill {
  width: 80%;
  height: 100%;
  background: var(--ink);
  border-radius: 0;
}

.mob-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: var(--ink);
  border-radius: 0;
  opacity: 0.85;
}

/* Top bar · 56px */
.mob-top {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-top-detail {
  padding: 0 8px 0 4px;
  gap: 4px;
}

.mob-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mob-brand-mark {
  width: 32px;
  height: 32px;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  position: relative;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 19px;
  color: var(--ink);
  font-weight: 700;
}

.mob-brand-mark .dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.mob-brand-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-brand-name em {
  font-style: normal;
  color: var(--accent);
}

.mob-top-r {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mob-iconbtn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  position: relative;
  border-radius: 0;
}

.mob-iconbtn:hover {
  background: var(--paper-2);
}

.mob-iconbtn-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 0;
  border: 2px solid var(--paper);
}

.mob-me {
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
}

.mob-top-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mob-top-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-top-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-src-inline {
  width: 6px;
  height: 6px;
  border-radius: 0;
  display: inline-block;
  flex-shrink: 0;
}

.mob-src-inline.line { background: #06C755; }
.mob-src-inline.web { background: #5A6B7D; }
.mob-src-inline.manual { background: #C9A86B; }

/* SLA banner */
.mob-sla {
  background: var(--accent-soft);
  border-bottom: 1px solid rgba(200, 80, 31, 0.2);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.mob-sla-l {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.mob-sla-r {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 600;
}

/* Context band · for chat detail */
.mob-context {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border-2);
  padding: 12px 16px;
  flex-shrink: 0;
}

.mob-context-row {
  display: flex;
  gap: 24px;
}

.mob-context-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mob-context-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-context-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.mob-context-val.accent {
  color: var(--accent);
  font-size: 14px;
}

/* Segmented filter */
.mob-seg {
  display: flex;
  gap: 0;
  padding: 8px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-seg-btn {
  flex: 1;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-right-width: 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mob-seg-btn:last-child {
  border-right-width: 1px;
}

.mob-seg-btn span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--mid);
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 0;
}

.mob-seg-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.mob-seg-btn.active span {
  background: rgba(255,255,255,0.18);
  color: var(--paper);
}

/* Scroll area */
.mob-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--paper);
}

.mob-scroll::-webkit-scrollbar { width: 0; }

.mob-scroll-chat {
  background: var(--paper-2);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Blocks · section grouping */
.mob-block {
  border-bottom: 1px solid var(--border-2);
}

.mob-block:last-of-type {
  border-bottom: none;
}

.mob-block-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}

/* เอไอ summary card */
.mob-ai-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px;
  background: rgba(123, 143, 107, 0.07);
  border-left: 3px solid var(--ai);
}

.mob-ai-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.mob-ai-line .dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--ai);
  flex-shrink: 0;
  margin-top: 7px;
}

.mob-ai-line .dot.accent {
  background: var(--accent);
}

.mob-ai-line strong {
  color: var(--ink);
  font-weight: 700;
}

/* Activity row · clean 3-line format */
.mob-row {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.mob-row:last-child {
  border-bottom: none;
}


.mob-row.urgent {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
  margin-left: -14px;
  padding-right: 14px;
  background: rgba(200, 80, 31, 0.02);
}

.mob-row-avatar {
  width: 42px;
  height: 42px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.mob-row-avatar.lg {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.mob-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob-row-name {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-row-time-r {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  flex-shrink: 0;
  font-weight: 500;
}

.mob-row-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mob-row-pill.hot {
  background: var(--accent);
  color: var(--paper);
}

.mob-row-pill.warn {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.mob-row-preview {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.mob-row-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.mob-row-time,
.mob-row-ref,
.mob-row-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--mid);
}

.mob-row-time {
  color: var(--mid);
}

.mob-row-ref {
  color: var(--ink-2);
}

.mob-row-amt {
  color: var(--ink);
  font-weight: 700;
}

.mob-row-dot {
  width: 2.5px;
  height: 2.5px;
  background: var(--mid);
  border-radius: 0;
  flex-shrink: 0;
}

.mob-src {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.mob-src.line { background: #06C755; }
.mob-src.web { background: #5A6B7D; }
.mob-src.manual { background: #C9A86B; }

/* Customer card (detail view) */
.mob-cust-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border-2);
}

.mob-cust-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-cust-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.mob-cust-meta {
  font-size: 12.5px;
  color: var(--mid);
  line-height: 1.4;
}

.mob-cust-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.mob-contact-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  color: var(--ink);
}

.mob-contact-pill.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

/* Items list (web detail) */
.mob-items-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  background: var(--paper);
}

.mob-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-2);
}

.mob-item:last-child {
  border-bottom: none;
}

.mob-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-item-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.2;
}

.mob-item-qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-item-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  flex-shrink: 0;
}

.mob-item-more {
  padding: 12px 14px;
  border-top: 1px dashed var(--border);
  background: transparent;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  font-weight: 600;
}

/* Totals card */
.mob-totals-card {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mob-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-2);
}

.mob-totals-row > span:last-child {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

.mob-totals-row.total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.mob-totals-row.total > span:last-child {
  font-size: 17px;
  color: var(--accent);
}

/* Note quote */
.mob-note-quote {
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 3px solid var(--mid-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}

/* Chat bubbles */
.mob-chat-day {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 0 12px;
  position: relative;
}

.mob-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 0;
  margin-bottom: 3px;
  position: relative;
}

.mob-bubble-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.mob-bubble-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.mob-bubble.them {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.mob-bubble.me {
  background: var(--ink);
  color: var(--paper);
  align-self: flex-end;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.mob-bubble.me .mob-bubble-time {
  color: rgba(252, 249, 242, 0.55);
  text-align: right;
}

.mob-event {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  padding: 4px 12px;
  margin: 4px 0;
  align-self: center;
  letter-spacing: 0.02em;
}

.mob-event.accent {
  color: var(--accent);
  font-weight: 700;
}

.mob-ai-bubble {
  max-width: 82%;
  align-self: flex-end;
  background: rgba(123, 143, 107, 0.12);
  border-left: 3px solid var(--ai);
  padding: 11px 13px;
  margin-bottom: 4px;
  margin-left: auto;
}

.mob-ai-bubble-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai);
  margin-bottom: 5px;
}

.mob-ai-bubble-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.mob-ai-bubble-use {
  margin-top: 9px;
  padding: 5px 10px;
  background: var(--ai);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
}

.mob-ai-bubble.standalone {
  max-width: none;
  align-self: stretch;
  margin: 0;
}

/* Compose bar · chat */
.mob-compose {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--paper);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.mob-compose-input {
  flex: 1;
  height: 40px;
  padding: 0 13px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  min-width: 0;
}

.mob-compose-input::placeholder {
  color: var(--mid);
}

/* Action bar · sticky bottom (detail) */
.mob-action {
  display: flex;
  gap: 8px;
  padding: 10px 16px 12px;
  background: var(--paper);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.mob-btn-ghost {
  height: 48px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
}

.mob-btn-ghost:hover {
  background: var(--paper-2);
}

.mob-btn-accent {
  height: 48px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  letter-spacing: -0.005em;
}

.mob-btn-accent.flex {
  flex: 1;
}

.mob-btn-accent:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Bottom nav · 3 tabs */
.mob-nav {
  height: 76px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px 0 16px;
  border-top: 1px solid var(--border-2);
  background: var(--paper);
  flex-shrink: 0;
}

.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mid);
  border-radius: 0;
  padding: 4px 0;
}

.mob-nav-btn.active {
  color: var(--ink);
}

.mob-nav-btn span {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mob-nav-btn:hover {
  color: var(--ink);
}

/* Padding for scroll area to clear sticky bottom */
.mob-pad {
  height: 24px;
}

.mob-pad-lg {
  height: 32px;
}


/* ============================================================
   MOBILE v2 · additional · m.4 m.5 m.6
   ============================================================ */

/* Top bar · page title variant */
.mob-top-page {
  padding: 0 8px 0 16px;
}

.mob-top-pagetitle {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-iconbtn-text {
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  border-radius: 0;
}

.mob-iconbtn-text:hover {
  background: var(--paper-2);
}

/* Search bar · pill input */
.mob-search {
  position: relative;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mid);
  pointer-events: none;
}

.mob-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-search-input::placeholder {
  color: var(--mid);
}

.mob-search-input:focus {
  background: var(--paper);
  border-color: var(--ink);
}

/* Filter chips · scrollable */
.mob-chips {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-chips::-webkit-scrollbar { display: none; }

/* Quote card · list page */
.mob-q-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  align-items: center;
}

.mob-q-card:hover {
  background: var(--paper-2);
}

.mob-q-card.compact {
  padding: 12px 14px;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 8px;
}

.mob-q-card-l {
  flex-shrink: 0;
}

.mob-q-avatar {
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.mob-q-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-q-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob-q-card-name {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-q-card-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mob-q-card-pill.warn {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.mob-q-card-pill.ok {
  background: rgba(123, 143, 107, 0.18);
  color: #4F6249;
}

.mob-q-card-pill.expiring {
  background: var(--accent);
  color: var(--paper);
}

.mob-q-card-pill.expired {
  background: var(--paper-3);
  color: var(--mid);
}

.mob-q-card-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-q-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.mob-q-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-q-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* === Customer detail hero === */
.mob-cust-hero {
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  border-bottom: 1px solid var(--border-2);
}

.mob-cust-hero-avatar {
  width: 64px;
  height: 64px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.mob-cust-hero-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 8px;
}

.mob-cust-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mid);
}

.mob-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mob-cust-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
}

.mob-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mob-stat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-stat-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-primary-star {
  color: var(--accent);
  font-size: 13px;
}

/* Activity row · customer detail */
.mob-act-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-2);
}

.mob-act-row:last-child {
  border-bottom: none;
}

.mob-act-row .mob-src {
  margin-top: 5px;
}

.mob-act-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.6;
}

.mob-act-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-act-msg {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.4;
}

.mob-act-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* === Quick create · m.6 === */
.mob-selected-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  align-items: center;
}

.mob-selected-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-selected-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.mob-selected-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-selected-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.mob-edit-link {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
  font-weight: 600;
}

.mob-edit-link:hover {
  background: var(--paper-2);
}

/* Template chips */
.mob-tmpl-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mob-tmpl-pill {
  padding: 8px 14px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}

.mob-tmpl-pill:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Discount inline row */
.mob-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
}

.mob-discount-lbl {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.mob-discount-input {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
}

.mob-discount-num {
  width: 44px;
  height: 32px;
  padding: 0 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  outline: none;
  text-align: center;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-discount-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

/* Channel select */
.mob-channel-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-2);
}

.mob-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  background: var(--paper);
}

.mob-channel:last-child {
  border-bottom: none;
}

.mob-channel.active {
  background: var(--paper-2);
}

.mob-channel.active::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  margin-right: 10px;
}

.mob-channel-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.mob-channel-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.mob-channel-val.muted {
  color: var(--mid-2);
}

.mob-msg-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.mob-msg-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  line-height: 1.5;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-msg-textarea::placeholder {
  color: var(--mid);
}


/* ============================================================
   MOBILE v3 · m.0 sign-in · m.7 customer list · m.8 quote detail · m.modal
   ============================================================ */

/* === m.0 SIGN IN === */
.mob-signin {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 24px;
  background: var(--paper);
  overflow-y: auto;
}

.mob-signin-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 36px;
}

.mob-signin-mark {
  width: 72px;
  height: 72px;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  position: relative;
  font-family: 'Fraunces', serif;
  font-size: 44px;
  color: var(--ink);
  font-weight: 600;
}

.mob-signin-mark .dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.mob-signin-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.mob-signin-name em {
  font-style: normal;
  color: var(--accent);
}

.mob-signin-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.mob-signin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mob-signin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mob-signin-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}

.mob-signin-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-signin-input.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}

.mob-signin-input:focus {
  border-color: var(--ink);
}

.mob-signin-subdomain {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--input-bg);
}

.mob-signin-subdomain .mob-signin-input {
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}

.mob-signin-suffix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mid);
  border-left: 1px solid var(--border);
  letter-spacing: 0.01em;
}

.mob-signin-pass {
  position: relative;
}

.mob-signin-show {
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  width: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--mid);
  cursor: pointer;
  border-radius: 0;
}

.mob-signin-forgot {
  align-self: flex-end;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  margin-top: -4px;
}

.mob-signin-submit {
  width: 100%;
  height: 52px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  margin-top: 6px;
  letter-spacing: -0.005em;
}

.mob-signin-submit:hover {
  background: var(--accent-deep);
}

.mob-signin-divider {
  position: relative;
  display: flex;
  align-items: center;
  margin: 16px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mob-signin-divider::before,
.mob-signin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

.mob-signin-divider span {
  padding: 0 12px;
}

.mob-signin-google {
  width: 100%;
  height: 48px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mob-signin-google:hover {
  background: var(--paper-2);
}

.mob-signin-footer {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--mid);
}

.mob-signin-footer a {
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
  cursor: pointer;
}

/* === m.7 CUSTOMER LIST === */
.mob-cust-row-list {
  display: flex;
  flex-direction: column;
}

.mob-cust-row {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

.mob-cust-row:hover {
  background: var(--paper-2);
}

.mob-cust-row .mob-row-avatar {
  flex-shrink: 0;
}

.mob-row-avatar.gov { background: #5A6B7D; }
.mob-row-avatar.edu { background: #7B8F6B; }
.mob-row-avatar.med { background: #B8533F; }
.mob-row-avatar.person { background: #C9A86B; color: var(--ink); }

.mob-cust-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mob-cust-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob-cust-row-name {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-cust-row-meta {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink-2);
}

.mob-cust-row-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mob-cust-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-cust-stat.accent {
  color: var(--accent);
  font-weight: 700;
}

.mob-type-chip.sm {
  font-size: 9px;
  padding: 1px 5px;
  background: var(--paper-3);
  color: var(--ink);
}

.mob-type-chip.sm.gov { background: #5A6B7D; color: var(--paper); }
.mob-type-chip.sm.edu { background: #7B8F6B; color: var(--paper); }
.mob-type-chip.sm.med { background: #B8533F; color: var(--paper); }
.mob-type-chip.sm.person { background: var(--ai-soft); color: var(--ai-deep); }
.mob-type-chip.sm.new { background: var(--accent); color: var(--paper); }

/* === m.8 QUOTE DETAIL === */
.mob-q-status-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-q-status-l {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mob-q-status-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.mob-q-status-tracker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-block-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-2);
}

.mob-block-link:hover {
  background: var(--paper-2);
}

.mob-block-link .mob-block-label {
  margin-bottom: 12px;
}

/* Delivery rows in quote detail */
.mob-deliver-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  background: var(--paper);
}

.mob-deliver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
}

.mob-deliver-row:last-child { border-bottom: none; }

.mob-deliver-row .mob-src {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.mob-deliver-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mob-deliver-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.mob-deliver-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* Action bar · 3-action variant */
.mob-action.mob-action-3 {
  gap: 6px;
}

.mob-btn-icon-ghost {
  width: 48px;
  height: 48px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 0;
  flex-shrink: 0;
}

.mob-btn-icon-ghost:hover {
  background: var(--paper-2);
}

/* === m.modal · BOTTOM SHEET === */
.mob-dimmed-bg {
  position: absolute;
  top: 47px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  filter: blur(0.5px);
  opacity: 0.4;
  z-index: 1;
}

.mob-dimmed-content {
  flex: 1;
}

.mob-sheet-backdrop {
  position: absolute;
  top: 47px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 42, 58, 0.55);
  z-index: 2;
}

.mob-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 8px 0 28px;
  z-index: 3;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}

.mob-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--mid-2);
  border-radius: 0;
  align-self: center;
  margin: 8px auto 14px;
}

.mob-sheet-head {
  padding: 0 22px 16px;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-title {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-sheet-sub {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--mid);
  margin-top: 3px;
}

.mob-sheet-summary {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-amt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.mob-sheet-amt-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-sheet-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin-top: 3px;
  letter-spacing: -0.02em;
}

.mob-sheet-amt-r {
  text-align: right;
}

.mob-sheet-qno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
}

.mob-sheet-cust {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--paper-2);
}

.mob-sheet-cust-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-sheet-cust-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.mob-sheet-cust-sub {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
}

.mob-sheet-channels {
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-channel {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-channel:last-child { border-bottom: none; }

.mob-sheet-channel .mob-src {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.mob-sheet-channel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-sheet-channel-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.mob-sheet-channel-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.mob-sheet-checkmark {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}

.mob-sheet-msg {
  padding: 14px 22px 18px;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-msg-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}

.mob-sheet-msg-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.mob-sheet-actions {
  display: flex;
  gap: 8px;
  padding: 16px 22px 4px;
}

.mob-btn-ghost.flex {
  flex: 1;
}


/* === m.0b SIGN UP === */
.mob-signup {
  padding: 24px 28px 24px;
}

.mob-signup-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}

.mob-signup-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mob-signup-step span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--paper-3);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
}

.mob-signup-step.active span {
  background: var(--accent);
  color: var(--paper);
}

.mob-signup-step .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-signup-step.active .lbl {
  color: var(--ink);
}

.mob-signup-step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.mob-signup-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.mob-signup-divider {
  height: 1px;
  background: var(--border-2);
  margin: 12px -8px;
}

.mob-signin-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

.mob-signup-pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.mob-signup-pwd-bar {
  flex: 1;
  height: 4px;
  background: var(--paper-3);
  border-radius: 0;
  overflow: hidden;
}

.mob-signup-pwd-bar .fill {
  height: 100%;
  border-radius: 0;
}

.mob-signup-pwd-bar .fill.weak {
  width: 33%;
  background: var(--danger, #B8533F);
}

.mob-signup-pwd-bar .fill.medium {
  width: 66%;
  background: #C9A86B;
}

.mob-signup-pwd-bar .fill.strong {
  width: 100%;
  background: var(--ai);
}

.mob-signup-pwd-strength span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ai);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mob-signup-terms {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  padding: 4px 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.mob-signup-terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.mob-signup-terms a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}


/* === mob-chip · filter chip buttons (m.4, m.7) === */
.mob-chip {
  height: 32px;
  padding: 0 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mob-chip:hover {
  background: var(--paper-3);
}

.mob-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.mob-chip span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mid);
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.mob-chip.active span {
  background: rgba(255, 255, 255, 0.18);
  color: var(--paper);
}


/* === FORCE wb-input · explicit color values to bypass cascade === */
input.wb-input,
textarea.wb-input {
  width: 100% !important;
  padding: 9px 12px !important;
  background: #FFFEF7 !important;
  border: 1px solid #E0D5BF !important;
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-size: 13px !important;
  color: #1B2A3A !important;
  outline: none;
  border-radius: 0;
  box-sizing: border-box !important;
  line-height: 1.4;
  flex: none !important;
}

textarea.wb-input {
  resize: vertical !important;
  min-height: 56px !important;
  line-height: 1.5 !important;
}


/* ════════════════════════════════════════════════════════════════════════
   LEGACY hand-written CSS — recovered from pre-3-file-cleanup state.
   These styles cover Django shell + per-screen classes (.app, .sb-item,
   .outside-page, etc.) that aren't in design/backoffice.html yet.
   TODO: as each screen is re-ported from design/backoffice.html frames,
   delete the matching section here.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- legacy/app.css ---- */

/* salesdee. shared app shell + components.
   Per CLAUDE.md: design/brand-guide.html wins; deck = layout; brand-guide = tokens, .ic, .wm, logo.
   Screen-specific styles live in per-screen files (dashboard.css, kanban.css, …) loaded via {% block extra_css %}. */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Paper grain overlay (canonical · per design/backoffice.html body::before) ─── */
body::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 0.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  z-index: 9999;
  opacity: .8;
}

/* ─── Wordmark · sales<em>dee</em>. ─── */
.wm {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.04em;
  text-transform: lowercase;
  line-height: 1;
  display: inline-block;
}
.wm .sales { color: var(--ink); }
.wm .dee   { color: var(--accent); }
.wm .dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  border-radius: 50%;
  background: var(--accent);
  margin-left: 0.04em;
  vertical-align: 0.05em;
}
.wm.reverse .sales { color: var(--paper); }
.wm.mono .sales,
.wm.mono .dee     { color: var(--ink); }
.wm.mono .dot     { background: var(--ink); }

/* Wordmark sizes */
.wm-12 { font-size: 12px; }
.wm-14 { font-size: 14px; }
.wm-18 { font-size: 18px; }
.wm-22 { font-size: 22px; }
.wm-28 { font-size: 28px; }
.wm-36 { font-size: 36px; }
.wm-48 { font-size: 48px; }
.wm-64 { font-size: 64px; }
.wm-96 { font-size: 96px; }

/* ─── Icon · letter-mark squircle (canonical · per design/brand-guide.html) ─── */
.ic {
  display: grid; place-items: center;
  position: relative; overflow: hidden;
  flex-shrink: 0;
}
.ic .d {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.85;
}
.ic .dot { position: absolute; border-radius: 50%; }

/* Variants */
.ic.primary { background: var(--ink); border-radius: 0; }
.ic.primary .d   { color: var(--accent); }
.ic.primary .dot { background: var(--accent); }

.ic.accent  { background: var(--accent); border-radius: 0; }
.ic.accent .d    { color: var(--paper); }
.ic.accent .dot  { background: var(--paper); }

.ic.cream   { background: var(--paper-2); border: 2px solid var(--ink); border-radius: 0; }
.ic.cream .d    { color: var(--ink); }
.ic.cream .dot  { background: var(--accent); }

.ic.round { border-radius: 50%; }

/* Sizes (canonical · brand-guide.html lines 406–414) */
.ic-48 { width: 48px; height: 48px; }
.ic-48 .d   { font-size: 32px; }
.ic-48 .dot { width: 4px; height: 4px; bottom: 9px; right: 9px; }

.ic-32 { width: 32px; height: 32px; }
.ic-32 .d   { font-size: 22px; }
.ic-32 .dot { display: none; }

.ic-16 { width: 16px; height: 16px; }
.ic-16 .d   { font-size: 12px; }
.ic-16 .dot { display: none; }

/* ─── Inline SVG icon utility (lucide / heroicons via <svg use href>) ─── */
.ico {
  width: 16px; height: 16px;
  display: inline-block;
  vertical-align: -3px;
  flex-shrink: 0;
  stroke-width: 1.5;
}
.ico-sm { width: 12px; height: 12px; vertical-align: -2px; }
.ico-md { width: 18px; height: 18px; vertical-align: -4px; }
.ico-lg { width: 22px; height: 22px; }
.ico-xl { width: 32px; height: 32px; }

/* ─── Typography helpers ─── */
.display { font-family: var(--font-display); }
.display em { font-style: italic; font-weight: 500; }

.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

/* ─── Shared components ─── */
/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--paper-3); }
.btn.primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn.primary:hover { background: var(--ink-2); }
.btn.accent {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.btn.accent:hover { background: var(--accent-deep); }
.btn.ai {
  background: var(--ai);
  color: var(--paper);
  border-color: var(--ai);
}
.btn.ai:hover { background: var(--ai-deep); }
.btn.ghost {
  background: transparent;
  border-color: transparent;
}
.btn.ghost:hover { background: var(--paper-3); }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Chip / pill */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  background: var(--paper-3);
  color: var(--ink-2);
  border-radius: 0;
  white-space: nowrap;
}
.chip.accent  { background: var(--accent-soft); color: var(--accent-deep); }
.chip.ai      { background: var(--ai-soft);     color: var(--ai-deep); }
.chip.good    { background: var(--good-soft);   color: var(--good); }
.chip.warn    { background: var(--warn-soft);   color: var(--warn); }
.chip.danger  { background: var(--danger-soft); color: var(--danger); }

/* Card */
.card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
}
.card-pad   { padding: 20px; }
.card-pad-sm { padding: 12px; }

/* KPI */
.kpi {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 16px 20px;
}
.kpi .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.kpi .value {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}

/* เอไอ panel — sage tint, only for เอไอ surfaces */
.ai-panel {
  background: var(--ai-soft);
  border: 1px solid var(--ai);
  border-left-width: 3px;
  color: var(--ai-deep);
  padding: 14px 16px;
}
.ai-panel .label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai);
  margin-bottom: 4px;
}

/* Table */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th, .tbl td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
}
.tbl th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}
.tbl tr:hover { background: var(--paper-3); }

/* Form field */
.field {
  display: flex; flex-direction: column;
  gap: 4px;
}
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
}
.field input,
.field select,
.field textarea {
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--ink);
}
.field .help { font-size: 11px; color: var(--mid); }
.field.err input,
.field.err select,
.field.err textarea { border-color: var(--danger); }
.field .err-msg { font-size: 11px; color: var(--danger); }

/* Utility */
.muted { color: var(--mid); }
.strong { font-weight: 600; }
.divider { height: 1px; background: var(--border); border: 0; }

/* ---- legacy/shell.css ---- */

/* App shell · sidebar (dark ink) + topbar + 2-col grid.
   Canonical · per design/backoffice.html .app/.app-sidebar/.app-main (lines 266–425). */

.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
  font-size: 13px;
}

/* ─── Sidebar ─── */
.app-sidebar {
  background: var(--ink);
  color: rgba(246, 241, 231, .85);
  padding: 18px 0;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--ink-2);
  position: sticky; top: 0;
  height: 100vh;
}

.sb-brand {
  padding: 0 20px 18px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  margin-bottom: 12px;
}
.sb-brand .name {
  color: var(--paper);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.04em;
  line-height: 1;
  text-transform: lowercase;
  display: inline-flex; align-items: baseline;
}
.sb-brand .name em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}
.sb-brand .name .dot {
  display: inline-block;
  width: 0.13em; height: 0.13em;
  background: var(--accent);
  border-radius: 50%;
  margin-left: 0.04em;
  vertical-align: 0.05em;
}

.sb-section-label {
  padding: 18px 20px 6px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(246, 241, 231, .4);
}

.sb-item {
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  color: rgba(246, 241, 231, .75);
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.sb-item:hover { background: rgba(255, 255, 255, .04); }
.sb-item.active {
  background: rgba(255, 255, 255, .05);
  color: rgba(246, 241, 231, 1);
  border-left-color: var(--accent);
  font-weight: 500;
}
.sb-item .icon {
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  opacity: .9; color: currentColor;
}
.sb-item .icon svg { width: 16px; height: 16px; }
.sb-item .badge {
  margin-left: auto;
  background: var(--accent);
  color: var(--paper);
  font-size: 10px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 0;
  min-width: 18px;
  text-align: center;
}

.sb-bottom {
  margin-top: auto;
  padding: 16px 20px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  display: flex; align-items: center; gap: 10px;
}
.sb-avatar {
  width: 36px; height: 36px;
  background: var(--accent);
  color: var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; font-size: 12px;
}
.sb-user-info { line-height: 1.3; flex: 1; min-width: 0; }
.sb-user-info .name { color: var(--paper); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info .role { color: rgba(246, 241, 231, .5); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user-info a { color: inherit; text-decoration: none; }

/* ─── Main + topbar ─── */
.app-main {
  background: var(--paper-2);
  display: flex; flex-direction: column;
  min-width: 0;
}

.app-topbar {
  height: 56px;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex; align-items: center;
  gap: 16px;
  background: var(--paper-2);
}
.app-topbar .search {
  flex: 1; max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 12px 7px 36px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  position: relative;
}
.app-topbar .search-wrap {
  flex: 1; max-width: 420px;
  position: relative;
}
.app-topbar .search-wrap .search { width: 100%; padding-left: 36px; }
.app-topbar .search-wrap svg {
  position: absolute; left: 10px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--mid);
  pointer-events: none;
}
.app-topbar .topbar-actions {
  margin-left: auto;
  display: flex; align-items: center; gap: 8px;
}
.app-topbar .topbar-action {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-2);
  cursor: pointer;
  position: relative;
}
.app-topbar .topbar-action:hover { background: var(--paper-3); }
.app-topbar .topbar-action .notif-dot {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
}

/* Content area */
.app-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
  min-height: 0;
}

/* ─── Flash messages ─── */
.messages {
  position: fixed; top: 12px; right: 12px;
  z-index: 1000;
  display: flex; flex-direction: column; gap: 8px;
}
.message {
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--ink);
  font-size: 13px;
  max-width: 360px;
  box-shadow: var(--shadow-2);
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.message .msg-body { flex: 1; min-width: 0; }
.message .msg-close {
  background: transparent;
  border: 0;
  color: var(--mid);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  flex-shrink: 0;
}
.message .msg-close:hover { color: var(--ink); }
.message.success { border-left-color: var(--good); }
.message.warning { border-left-color: var(--warn); }
.message.error   { border-left-color: var(--danger); }

/* ─── Mobile · backoffice shell collapse (frame j) ─── */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
  }
  .app-sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 200;
  }
  .app-sidebar.open { transform: translateX(0); }
  .app-sidebar-scrim {
    position: fixed; inset: 0;
    background: rgba(27, 42, 58, .5);
    z-index: 199;
    opacity: 0; pointer-events: none;
    transition: opacity .2s ease;
  }
  .app-sidebar-scrim.open { opacity: 1; pointer-events: auto; }
  .mobile-burger {
    display: inline-flex;
    background: transparent; border: none;
    color: var(--ink); padding: 8px; cursor: pointer;
    width: 36px; height: 36px;
    align-items: center; justify-content: center;
  }
  .app-topbar { padding: 0 16px; gap: 10px; }
  .app-topbar .search-wrap { display: none; }
  .app-content { padding: 16px; }

  /* ── Home workspace: ONE pane at a time + bottom step nav ──
     Desktop is 3 columns (queue · timeline · quote). On mobile each column
     becomes a full-height step: queue → timeline → quote pane. The fixed
     .h-mnav bar at the bottom steps between timeline/quote; the top-left
     back button returns to the queue. `.m-ref` on .h-main = quote step. */
  .app-content.home-content { padding: 0; }
  .h-main { flex-direction: column; overflow: hidden !important; height: 100dvh !important; display: flex !important; }
  .h-list-pane { width: 100% !important; overflow-y: auto; flex: 1 !important; min-height: 0; border-right: none; }

  .h-main.active-chat .h-list-pane { display: none; }
  .h-main:not(.active-chat) .h-tl-pane { display: none !important; }
  .h-main:not(.active-chat) .h-ref-pane { display: none !important; }

  .h-main.active-chat .h-tl-pane { width: 100% !important; flex: 1 !important; min-height: 0; border-left: none; }
  .h-main.active-chat .h-ref-pane { width: 100% !important; flex: 1 !important; min-height: 0; overflow-y: auto; border-left: none; border-top: none; }
  /* step switch: quote pane only when .m-ref, timeline otherwise */
  .h-main.active-chat.m-ref .h-tl-pane { display: none !important; }
  .h-main.active-chat:not(.m-ref) .h-ref-pane { display: none !important; }
  .h-pane-resizer { display: none; }
  /* `.m-list` (JS, URL has no ?item=): land on the queue list even though the
     server auto-focused the first thread for desktop — design m.1 is list-first */
  .h-main.m-list .h-tl-pane, .h-main.m-list .h-ref-pane, .h-main.m-list .h-mnav { display: none !important; }
  .h-main.m-list .h-list-pane { display: flex !important; }

  /* ── Queue list = design m.1 on mobile: swap the desktop .h-row list for the
     .mob-* rendering (both live inside #h-queue-rows; one dataset, two views) */
  .h-rows > .h-row, .h-rows > .h-empty { display: none; }
  .mob-home-list { display: block; padding: 0 16px; }
  .mob-row-avatar { overflow: hidden; }
  .mob-row-avatar img { width: 100%; height: 100%; object-fit: cover; }

  /* mobile detail top bar (m.2) — in-flow first child of the tl/ref pane;
     the back/next chevrons are <a>/<button> reusing the deck's .mob-iconbtn */
  .h-tl-pane > .mob-top a.mob-iconbtn,
  .h-ref-pane > .mob-top a.mob-iconbtn { color: var(--ink); text-decoration: none; }

  .h-tl-back-btn {
    display: inline-flex;
    align-items: center; gap: 4px;
    background: var(--paper-2); border: 1px solid var(--border); border-radius: 0;
    padding: 6px 10px;
    font-size: 13px; font-weight: 500; color: var(--ink); text-decoration: none;
    box-shadow: var(--shadow-1);
  }
  .h-tl-pane-actions--mobile-back { position: absolute; top: 8px; left: 14px; z-index: 5; }
  .h-tl-pane-actions--mobile-back ~ .h-tl-stream { padding-top: 48px; }
  /* quote step needs the back-to-queue button too (timeline is hidden) */
  .h-main.active-chat .h-ref-pane { position: relative; }
  .h-ref-pane .h-tl-pane-actions--mobile-back ~ .h-ref-scroll { padding-top: 48px; }

  /* ── Settings: side nav → horizontal chip bar, rows stack ── */
  .settings { display: flex; flex-direction: column; }
  .set-sub {
    display: flex; flex-shrink: 0; gap: 6px; overflow-x: auto;
    padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
  }
  .set-sub-title, .set-sub-section { display: none; }
  .set-sub-item {
    padding: 8px 12px; border: 1px solid var(--border); border-left-width: 1px;
    white-space: nowrap; flex-shrink: 0; background: var(--paper);
  }
  .set-sub-item.active { border-color: var(--accent); background: var(--paper-3); }
  .set-main { flex: 1; overflow-y: auto; padding: 16px 16px 60px; }
  .set-page-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .set-row { grid-template-columns: 1fr; gap: 6px; }
  .set-card-body { overflow-x: auto; }

  /* ── Quotation builder: form + preview stack vertically ── */
  .qb-split { display: flex; flex-direction: column; overflow-y: auto; }
  .qb-form { border-right: none; overflow-y: visible; }
  .qb-toolbar { height: auto; min-height: 0; max-height: none; flex-wrap: wrap; padding: 8px 12px; gap: 8px; }

  /* Allow data tables to scroll horizontally on mobile instead of crushing */
  .table-wrap, .ql-table, .cl-table { overflow-x: auto; width: 100%; display: block; -webkit-overflow-scrolling: touch; }
  table.data-table, .ql-row, .cl-row { min-width: 800px; }
}
@media (min-width: 901px) {
  .mobile-burger { display: none; }
  .app-sidebar-scrim { display: none; }
  .h-tl-pane-actions--mobile-back { display: none; }
}

/* ─── State reference helpers (frame l) ─── */
.skel {
  background: linear-gradient(90deg, var(--paper-3) 0%, var(--paper-2) 50%, var(--paper-3) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  display: block;
}
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skel.line { height: 12px; }
.skel.circle { border-radius: 50%; }

/* ---- legacy/auth.css ---- */

/* Auth + onboarding shared chrome (sign-in, sign-up, password reset, onboarding wizard).
   Canonical · per design/backoffice.html .auth-* + .outside-* (frames b.1, b.2, c.1, c.2). */

/* ─── Outside-app top header (no sidebar) ─── */
.outside-page {
  background: var(--paper);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.outside-top {
  padding: 16px 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  position: sticky; top: 0;
  z-index: 5;
}
.outside-top-brand {
  display: flex; align-items: center; gap: 12px;
}
.outside-top-brand .wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--ink);
  text-transform: lowercase;
  line-height: 1;
  display: inline-flex; align-items: baseline;
}
.outside-top-brand .wordmark em {
  font-style: italic;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--accent);
}
.outside-top-brand .wordmark .dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--accent);
  border-radius: 50%;
  margin: 0 2px 2px;
}
.outside-top-brand .wordmark .tld {
  color: var(--ink-2);
  font-weight: 600;
}
.outside-top-right {
  font-size: 13px;
  color: var(--mid);
}
.outside-top-link {
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  text-decoration: none;
}
.outside-top-link:hover { color: var(--accent-deep); text-decoration: underline; }
.outside-top-link.skip {
  color: var(--mid);
  font-weight: 400;
  padding: 7px 14px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  text-decoration: none;
}
.outside-top-link.skip:hover {
  background: var(--paper-3);
  border-color: var(--mid-2);
  color: var(--ink-2);
}

/* ─── Auth stage + card ─── */
.auth-stage {
  flex: 1;
  display: grid; place-items: center;
  padding: 40px 24px;
  position: relative;
  overflow: hidden;
}
.auth-stage::before {
  content: '';
  position: absolute;
  top: -10%; left: 40%;
  width: 600px; height: 600px;
  background: var(--accent);
  opacity: 0.04;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.auth-stage::after {
  content: '';
  position: absolute;
  bottom: -10%; left: 5%;
  width: 400px; height: 400px;
  background: var(--ai);
  opacity: 0.05;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
}

.auth-card {
  position: relative;
  z-index: 1;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 40px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 4px 28px rgba(27, 42, 58, .06);
}

.auth-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 8px;
}
.auth-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.auth-sub {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 24px;
}

.auth-form {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.auth-field {
  display: flex; flex-direction: column;
  gap: 6px;
}
.auth-field .label {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  display: flex; justify-content: space-between;
}
.auth-field .label .helper {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}
.auth-input {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  outline: none;
  width: 100%;
}
.auth-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.auth-input.with-icon { padding-left: 36px; }
.auth-input-wrap { position: relative; }
.auth-input-wrap > svg {
  position: absolute;
  left: 11px; top: 50%;
  transform: translateY(-50%);
  color: var(--mid);
  width: 16px; height: 16px;
  pointer-events: none;
}

.auth-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  margin-bottom: 16px;
}
.auth-check {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.auth-check input { display: none; }
.auth-check .box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.auth-check input:checked + .box {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.auth-check input:checked + .box svg { display: block; }
.auth-check .box svg { display: none; width: 10px; height: 10px; }

.auth-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
}
.auth-link:hover { text-decoration: underline; }

.auth-btn {
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-family: inherit;
  padding: 12px;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
}
.auth-btn:hover { background: var(--accent-deep); }
.auth-btn:disabled { opacity: .5; cursor: not-allowed; }

.auth-divider {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin: 18px 0;
  position: relative;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  position: absolute;
  top: 50%; width: 35%;
  height: 1px;
  background: var(--border);
}
.auth-divider::before { left: 0; }
.auth-divider::after  { right: 0; }

.auth-social {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px;
}
.auth-social-btn {
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: inherit;
  padding: 10px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
}
.auth-social-btn:hover { background: var(--paper-3); }
.auth-social-btn .ico-brand {
  width: 16px; height: 16px;
  border-radius: 0;
  display: inline-block;
}

.auth-foot {
  text-align: center;
  font-size: 12px;
  color: var(--mid);
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* ─── Sign-up wide variant (b.2: form + side panel) ─── */
.auth-stage.with-side {
  display: flex; justify-content: center; align-items: stretch;
  gap: 28px;
  flex-wrap: wrap;
}
.auth-card.auth-card-wide {
  max-width: 460px;
}
.auth-hint {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.auth-optional {
  color: var(--mid-2);
  font-size: 11px;
  font-weight: 400;
}
.auth-eye-btn {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--mid);
  cursor: pointer;
  padding: 4px;
  display: inline-flex; align-items: center;
}
.auth-eye-btn:hover { color: var(--ink-2); }
.auth-eye-btn svg { width: 16px; height: 16px; }

.auth-pw-strength {
  display: flex; align-items: center; gap: 8px;
  margin-top: 4px;
}
.auth-pw-strength .bar {
  flex: 1; height: 3px;
  background: var(--border-2);
  position: relative;
}
.auth-pw-strength .bar .fill {
  position: absolute; left: 0; top: 0;
  height: 100%; width: 0;
  background: var(--good);
  transition: width .15s, background .15s;
}
.auth-pw-strength .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.auth-check-tos {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 14px 0 18px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  user-select: none;
}
.auth-check-tos input { display: none; }
.auth-check-tos .box {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: transparent;
  margin-top: 1px;
}
.auth-check-tos input:checked + .box {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.auth-check-tos .box svg { width: 11px; height: 11px; }

/* Side panel · sage accent (next to sign-up form) */
.auth-side-panel {
  position: relative;
  z-index: 1;
  width: 320px;
  background: var(--ai-soft);
  border: 1px solid var(--ai);
  border-left-width: 3px;
  padding: 36px 28px;
  display: flex; flex-direction: column;
  gap: 20px;
  color: var(--ai-deep);
}
.auth-side-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ai);
}
.auth-side-title {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.2;
  color: var(--ink);
}
.auth-side-title em { font-style: italic; color: var(--accent); }
.auth-side-list { display: flex; flex-direction: column; gap: 10px; }
.auth-side-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.auth-side-item .ic-check {
  width: 18px; height: 18px;
  background: var(--ai);
  color: var(--paper);
  display: grid; place-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.auth-side-item .ic-check svg { width: 11px; height: 11px; }
.auth-side-quote {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(123, 143, 107, .3);
  font-size: 12px;
  color: var(--ai-deep);
  font-style: italic;
  position: relative;
}
.auth-side-quote .qmark {
  font-family: var(--font-display);
  font-size: 48px;
  line-height: 1;
  color: var(--ai);
  opacity: .4;
}
.auth-side-quote .qt { line-height: 1.5; margin-top: -8px; }
.auth-side-quote .qm {
  font-style: normal;
  color: var(--mid);
  font-size: 11px;
  margin-top: 8px;
}

/* Field error */
.auth-err {
  font-size: 11px;
  color: var(--danger);
  margin-top: 2px;
}
.auth-alert {
  background: var(--danger-soft);
  color: var(--danger);
  border-left: 3px solid var(--danger);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ---- legacy/home.css ---- */

/* Home · inbox-style queue (frame d.1, d.2 per design/backoffice.html).
   2-col: list pane (left 300px) + detail pane (right · flex-1).
   เอไอ-hint / channel-composer / delivery-history / chat-pane = future iterations. */

.h-main {
  display: flex;
  height: calc(100vh - 56px);  /* topbar = 56px */
  background: var(--paper-2);
}

/* ─── List pane (left) ─── */
.h-list-pane {
  width: 300px;
  background: var(--paper);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.h-list-head {
  padding: 18px 20px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.h-list-head .top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.h-list-head .top .title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.h-list-head .top .count-pill {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
}
.h-list-head .sub {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 14px;
  line-height: 1.4;
}
.h-list-head .sub strong { color: var(--ink); font-weight: 600; }

.h-filters {
  display: flex; gap: 4px;
  overflow-x: auto;
  padding: 0 0 12px;
}
.h-filter {
  white-space: nowrap;
  padding: 5px 11px;
  font-size: 12px;
  color: var(--mid);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
}
.h-filter .ct {
  font-family: var(--font-mono);
  font-size: 10px;
  margin-left: 3px;
  color: var(--mid-2);
}
.h-filter.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.h-filter.active .ct { color: var(--paper); opacity: 0.7; }

.h-rows { flex: 1; overflow-y: auto; }

.h-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-2);
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  cursor: pointer;
  position: relative;
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
}
.h-row:hover { background: var(--paper-2); }
.h-row.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
}
.h-row.active::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 1px;
  background: var(--paper);
}

.h-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  position: relative;
  flex-shrink: 0;
}
.h-avatar .ch {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 8px;
  font-weight: 700;
  color: white;
}
.h-row.active .h-avatar .ch { border-color: var(--accent-soft); }
.ch.line  { background: var(--line-green); font-family: var(--font-display); font-style: italic; }
.ch.web   { background: var(--accent); }
.ch.email { background: var(--ink-2); }

.h-row-content { min-width: 0; }
.h-row-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.h-row-name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-row-age {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  white-space: nowrap;
  flex-shrink: 0;
}
.h-row-age.stale    { color: var(--accent); font-weight: 600; }
.h-row-age.critical { color: var(--danger); font-weight: 700; }

/* Buyer-type pill prefix on the row name — distinguishes นิติบุคคล / บุคคล / หน่วยงาน */
.h-buyer-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: 1px 6px;
  margin-right: 6px;
  vertical-align: 1px;
  background: var(--paper-2);
  color: var(--mid);
  border: 1px solid var(--border);
  width: 70px; 
  text-align: center;
}
.h-buyer-pill.h-bk-company    { background: rgba(43, 87, 154, .08); color: #2b579a; border-color: rgba(43, 87, 154, .25); }
.h-buyer-pill.h-bk-government { background: rgba(120, 80, 30, .08); color: #78501e; border-color: rgba(120, 80, 30, .25); }
.h-buyer-pill.h-bk-individual { background: rgba(34, 120, 60, .08); color: #22783c; border-color: rgba(34, 120, 60, .25); }

/* Contact subline — primary contact name + phone, sits under the row name. */
.h-row-contact {
  font-size: 11.5px;
  color: var(--mid);
  margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.h-row-contact .cnm { color: var(--ink-2); font-weight: 500; }
.h-row-contact .cph { margin-left: 4px; font-family: var(--font-mono); }

.h-row-context {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.4;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.h-row-context .q { font-style: italic; color: var(--mid); }
.h-row-context em { font-family: var(--font-mono); font-style: normal; color: var(--mid); font-size: 11px; }

.h-row-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.h-row-status {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 2px 7px;
}
.h-row-status.new      { background: var(--accent-soft); color: var(--accent-deep); }
.h-row-status.waiting  { background: var(--warn-soft); color: var(--warn); }
.h-row-status.expiring { background: var(--danger-soft); color: var(--danger); }
.h-row-amt {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  margin-left: auto;
}

/* ─── Detail pane (right) ─── */
.h-detail-pane {
  flex: 1;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--paper-2);
}
.h-detail-head {
  padding: 22px 28px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.h-detail-crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.h-detail-crumb .pill {
  display: inline-block;
  padding: 2px 8px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-right: 8px;
  font-weight: 700;
}
.h-detail-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.h-detail-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.h-detail-meta {
  display: flex; align-items: center;
  gap: 14px;
  font-size: 13px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.h-detail-meta .item { display: inline-flex; align-items: center; gap: 6px; }
.h-detail-meta .item strong { color: var(--ink); font-weight: 600; }
.h-detail-meta .dot { color: var(--mid-2); }

.h-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex; flex-direction: column;
  gap: 18px;
}

/* Customer hero (section 1) */
.h-cust { display: flex; flex-direction: column; gap: 6px; }
.h-cust-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.h-cust-id {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
}
.h-cust-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px;
  font-weight: 600;
}
.h-cust-source.line { color: var(--good); }
.h-cust-source.web  { color: var(--accent-deep); }
.h-cust-source .src-badge {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 10px;
  color: white;
}
.h-cust-source.line .src-badge { background: var(--line-green); }
.h-cust-source.web  .src-badge { background: var(--accent); }
.h-cust-name {
  font-size: 17px;
  color: var(--ink);
  display: flex; align-items: baseline;
  gap: 4px; flex-wrap: wrap;
}
.h-cust-name strong {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
}
.h-cust-name .dot { color: var(--mid-2); }
.h-cust-name .co  { color: var(--mid); font-size: 13px; }

/* Status box (section 2) */
.h-status-box {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border-2);
  flex-wrap: wrap;
}
.h-status-pill {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  flex-shrink: 0;
}
.h-status-pill.warn { background: var(--danger-soft); color: var(--danger); }
.h-status-pill.good { background: var(--good-soft);   color: var(--good); }
.h-status-pill.new  { background: var(--accent-soft); color: var(--accent-deep); }
.h-status-meta {
  font-size: 11px;
  color: var(--mid);
  display: flex; flex-wrap: wrap; gap: 6px;
  align-items: center;
}
.h-status-meta strong { color: var(--ink-2); font-weight: 600; }
.h-status-meta .dot { color: var(--mid-2); }

/* Items list (section 3) */
.h-items-box { display: flex; flex-direction: column; gap: 8px; }
.h-items-head {
  display: flex; align-items: baseline; justify-content: space-between;
}
.h-items-head .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-items-head .total { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); }
.h-items-head .total strong { color: var(--ink); font-weight: 700; }
.h-items-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.h-items-list li {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--border-2);
}
.h-items-list li:last-child { border-bottom: none; }
.h-items-list .nm  { flex: 1; color: var(--ink-2); }
.h-items-list .qty { font-family: var(--font-mono); font-size: 10px; color: var(--mid); min-width: 32px; text-align: right; }
.h-items-list .pr  { font-family: var(--font-mono); font-size: 11px; color: var(--ink); font-weight: 600; min-width: 64px; text-align: right; }

/* Action row at bottom */
.h-actions {
  display: flex; gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border-2);
  margin-top: auto;
  flex-wrap: wrap;
}

/* Empty state */
.h-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--mid);
  padding: 48px 24px;
}
.h-empty .ic { width: 48px; height: 48px; color: var(--mid-2); margin-bottom: 12px; }
.h-empty .t  { font-size: 15px; color: var(--ink-2); margin-bottom: 4px; }
.h-empty .d  { font-size: 12px; }

/* Override app shell padding for home / settings — full bleed */
.app-content.home-content { padding: 0; overflow: hidden; height: 100vh; }
.app-content.home-content .h-main { height: 100vh; overflow: hidden; }
.app:has(.app-content.home-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.home-content) .app-sidebar { overflow-y: auto; }

/* ─── Slide-up send panel · ports design home.{line,web,manual}.send overlay ─── */
.h-slideup {
  position: absolute;
  top: 65px;  /* matches .h-tl-header height */
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  z-index: 10;
  box-shadow: 0 -8px 24px rgba(0,0,0,0.08);
}
.h-slideup-backdrop {
  position: absolute;
  top: 65px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 42, 58, 0.30);
  z-index: 9;
}
.h-slideup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.h-slideup-head .title {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.h-slideup-head .title .docno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--mid);
  font-weight: 500;
}
.h-slideup-head .title .pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 2px 7px;
  background: var(--paper-2);
  color: var(--mid);
  border: 1px solid var(--border);
}
.h-slideup-head .title .pill.sent {
  background: rgba(34, 120, 60, .08);
  color: #22783c;
  border-color: rgba(34, 120, 60, .25);
}
.h-slide-recip .h-slide-recip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12.5px;
  color: var(--ink-2);
}
.h-slide-recip-list .rp b {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid);
  margin-right: 4px;
}
.h-slide-recip-list .rp.empty {
  color: var(--accent);
  font-size: 12px;
}
.h-slide-ch.disabled {
  opacity: .42;
  cursor: not-allowed;
}
.h-slide-pdf {
  width: 100%;
  height: 360px;
  border: 1px solid var(--border);
  background: var(--paper-2);
}
.h-slide-pdf-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.h-slide-pdf-link:hover { text-decoration: underline; }

/* ─── Sticky action card · slides up from the bottom on mount ─────────────
   Pinned at the bottom of .h-tl-pane above the chat composer. On first
   paint the card slides up from off-screen to draw sales' eye to the
   "next step" surface. Collapsible after that. */
@keyframes h-tl-action-slide-up {
  0%   { transform: translateY(100%); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
.h-tl-action-card.sticky {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  border-left: 0;
  background: var(--paper);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60%;
  overflow-y: auto;
  animation: h-tl-action-slide-up .42s cubic-bezier(.2,.85,.3,1) both;
  box-shadow: 0 -6px 18px rgba(0, 0, 0, .04);
}
.h-tl-action-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 2px 0;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.h-tl-action-head .ic { color: var(--accent); }
.h-tl-action-head .docno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  font-weight: 500;
  margin-left: auto;
}
.h-tl-action-head .caret {
  font-size: 11px;
  color: var(--mid);
  transition: transform .15s;
}
.h-tl-action-head .caret.open { transform: rotate(180deg); }
.h-tl-action-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h-tl-action-recip {
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.h-tl-action-recip .rp { font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.h-tl-action-recip .rp.empty { color: var(--accent); font-family: inherit; }

.h-tl-action-shortlink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
}
.h-tl-action-shortlink .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
  flex-shrink: 0;
}
.h-tl-action-shortlink .inp {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  color: var(--ink-2);
  cursor: text;
  box-sizing: border-box;
}
.h-tl-action-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h-tl-action-channels .ch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  font-size: 12.5px;
  cursor: pointer;
  background: var(--paper);
  transition: background .12s;
}
.h-tl-action-channels .ch:hover { background: var(--paper-2); }
.h-tl-action-channels .ch.on { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.h-tl-action-channels .ch.on .ic { color: var(--paper); }
.h-tl-action-channels .ch.disabled { opacity: .4; cursor: not-allowed; }
.h-tl-action-channels .ch .ic {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 11px;
  color: var(--mid);
}

.h-tl-action-surface {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.h-tl-action-surface .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mid);
}
.h-tl-action-surface .inp,
.h-tl-action-surface .ta {
  border: 1px solid var(--border);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  background: var(--paper);
  width: 100%;
  box-sizing: border-box;
}
.h-tl-action-surface .ta { resize: vertical; min-height: 80px; }
.h-tl-action-surface .ta.signoff { min-height: 50px; }
.h-tl-action-surface .pdf {
  width: 100%;
  height: 320px;
  border: 1px solid var(--border);
  background: var(--paper-2);
}
.h-tl-action-surface .pdf-link {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}
.h-tl-action-surface .pdf-link:hover { text-decoration: underline; }
.h-tl-action-surface .action-flex-preview,
.h-tl-action-surface .h-tl-bubble.sales.flex.action-flex-preview {
  margin: 0;
  margin-left: 0;
  align-self: flex-start;
}
.h-tl-action-surface .action-flex-preview .h-tl-bub-content { max-width: 340px; }

.h-tl-action-surface .sms-row {
  display: flex;
  gap: 8px;
}
.h-tl-action-surface .sms-row .inp.sms-url {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  cursor: text;
}
.h-tl-action-surface .sms-row .sms-copy {
  height: 34px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  flex-shrink: 0;
}
.h-tl-action-surface .sms-row .sms-copy:hover { background: var(--accent); }
.h-tl-action-surface .hint { font-size: 11.5px; color: var(--mid); }

.h-tl-action-foot {
  display: flex;
  justify-content: flex-end;
}
.h-tl-action-send {
  height: 38px;
  padding: 0 22px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}
.h-tl-action-send:hover { background: var(--accent-deep, var(--accent)); }
.h-tl-action-send:disabled { opacity: .45; cursor: not-allowed; }

/* LINE-channel Flex preview — reuses the timeline bubble styling so what
   sales sees matches what the customer will receive. */
.h-slide-flex-preview {
  margin: 0;
  align-self: stretch;
}
.h-slide-flex-preview .h-tl-bub-content { max-width: 360px; }

/* Phone / SMS channel — short URL row + copy button. */
.h-slide-sms-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.h-slide-sms-input {
  flex: 1;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  cursor: text;
}
.h-slide-sms-copy {
  height: 32px;
  padding: 0 14px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  flex-shrink: 0;
}
.h-slide-sms-copy:hover { background: var(--accent); }
.h-slide-sms-hint {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--mid);
  line-height: 1.5;
}
.h-slideup-head .close {
  width: 28px; height: 28px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: var(--mid);
  display: grid;
  place-items: center;
}
.h-slideup-head .close:hover { color: var(--ink); }
.h-slideup form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.h-slideup-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.h-slideup-foot { flex-shrink: 0; }
.h-slide-section .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.h-slide-channels {
  display: flex;
  gap: 8px;
}
.h-slide-ch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.h-slide-ch.on {
  background: rgba(200, 80, 31, 0.08);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.h-slide-ch .ic {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
}
.h-slide-ch.disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.h-slide-input,
.h-slide-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
}
.h-slide-textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.h-slide-input:focus, .h-slide-textarea:focus { outline: none; border-color: var(--accent); background: var(--paper); }
.h-slide-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.h-slide-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.h-slide-opt .file {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-left: 4px;
}
.h-slide-ai {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(123, 143, 107, 0.08);
  border-left: 2px solid var(--ai);
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.5;
}
.h-slide-ai .ic {
  width: 18px; height: 18px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.h-slide-ai strong { color: var(--ink); font-weight: 700; }
.h-slideup-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
}
.h-slide-cancel {
  padding: 9px 16px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.h-slide-send {
  padding: 10px 20px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.h-slide-send:hover { background: var(--accent-deep); }


/* ============================================================
 * QL · Quotation list — verbatim from design quotation.list frame
 * ============================================================ */

.ql-page {
  flex: 1;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.ql-toolbar {
  padding: 18px 28px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.ql-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.ql-title {
  display: flex; align-items: baseline; gap: 10px;
}
.ql-title h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}
.ql-title .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  background: var(--paper-3);
  padding: 2px 8px;
}
.ql-title .total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mid);
  margin-left: 8px;
}
.ql-title .total strong { color: var(--ink); font-weight: 600; }
.ql-tools {
  display: flex; gap: 8px;
  align-items: center;
}
.ql-filters-row {
  display: flex; gap: 12px; align-items: center;
}
.ql-search {
  flex: 1; max-width: 320px;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 7px 12px;
  display: flex; align-items: center; gap: 8px;
  color: var(--mid);
  font-size: 13px;
}
.ql-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font-family: inherit; font-size: inherit; color: var(--ink);
  outline: none;
}
.ql-status-chips {
  display: flex; gap: 4px;
  flex-wrap: wrap;
}
.ql-chip {
  font-size: 12px;
  padding: 5px 11px;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  text-decoration: none;
  font-family: inherit;
}
.ql-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 500;
}
.ql-chip .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ql-chip .dot.draft { background: var(--mid-2); }
.ql-chip .dot.sent { background: var(--warn); }
.ql-chip .dot.accepted { background: var(--good); }
.ql-chip .dot.rejected { background: var(--danger); }
.ql-chip .dot.expired { background: var(--accent); }
.ql-chip .dot.expiring { background: var(--accent); animation: pulse 1.4s infinite; }
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}

.ql-bulk-bar {
  background: var(--ink);
  color: var(--paper);
  padding: 10px 28px;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
}
.ql-bulk-bar .count {
  background: var(--accent);
  padding: 2px 9px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}
.ql-bulk-bar .actions {
  display: flex; gap: 6px;
  margin-left: auto;
}
.ql-bulk-action {
  background: transparent;
  border: 1px solid rgba(246,241,231,.3);
  color: var(--paper);
  font-family: inherit;
  font-size: 12px;
  padding: 5px 11px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.ql-bulk-action:hover { background: rgba(255,255,255,.1); }

.ql-table {
  flex: 1; overflow-y: auto;
}
.ql-row {
  display: grid;
  grid-template-columns: 32px 130px 1fr 1fr 90px 130px 140px 100px 40px;
  padding: 12px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  gap: 12px;
  color: inherit;
  text-decoration: none;
}
.ql-row.head {
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  padding: 10px 28px;
}
.ql-row.head .sort {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.ql-row.head .sort.asc::after { content: '↑'; color: var(--accent); }
.ql-row.head .sort.desc::after { content: '↓'; color: var(--accent); }
.ql-row:not(.head):hover { background: var(--paper-2); }
.ql-row.selected { background: var(--accent-soft); }

.ql-check {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  display: grid; place-items: center;
}
.ql-check.checked {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.ql-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.ql-no .rev {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
}
.ql-cust-cell {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.ql-cust-cell .avatar {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, var(--ink), var(--ink-2));
  color: var(--paper);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 11px;
  flex-shrink: 0;
}
.ql-cust-cell .info { min-width: 0; flex: 1; }
.ql-cust-cell .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ql-cust-cell .person { font-size: 11px; color: var(--mid); }
.ql-proj {
  font-size: 12px;
  color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ql-proj .meta {
  display: block;
  font-size: 11px;
  color: var(--mid);
}
.ql-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.ql-status {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 3px 9px;
  font-weight: 500;
}
.ql-status.draft { background: var(--paper-3); color: var(--mid); }
.ql-status.sent { background: var(--warn-soft); color: var(--warn); }
.ql-status.accepted { background: var(--good-soft); color: var(--good); }
.ql-status.rejected { background: var(--danger-soft); color: var(--danger); }
.ql-status.expiring { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.ql-status.expired { background: var(--paper-3); color: var(--mid); text-decoration: line-through; }
.ql-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.ql-status.draft .dot { background: var(--mid-2); }
.ql-status.sent .dot { background: var(--warn); }
.ql-status.accepted .dot { background: var(--good); }
.ql-status.rejected .dot { background: var(--danger); }
.ql-status.expiring .dot { background: var(--accent); animation: pulse 1.4s infinite; }
.ql-date {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.ql-date .ago {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-family: inherit;
}
.ql-owner {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.ql-owner .avatar {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--ink);
  font-weight: 600;
}
.ql-row-actions {
  color: var(--mid);
  cursor: pointer;
}
.ql-footer {
  padding: 12px 28px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  font-size: 12px;
  color: var(--mid);
}
.ql-footer > :nth-child(1) { justify-self: start; }
.ql-footer > :nth-child(2) { justify-self: center; }
.ql-footer > :nth-child(3) { justify-self: end; }
.ql-pagination {
  display: flex; gap: 4px;
  align-items: center;
}
.ql-page-btn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  background: var(--paper);
  color: var(--ink-2);
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
}
.ql-page-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  font-weight: 600;
}

/* Make quote-list page take full viewport like home */
.app-content.quotes-content { padding: 0; overflow: hidden; height: 100vh; }
.app-content.quotes-content .ql-page { height: 100vh; }
.app:has(.app-content.quotes-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.quotes-content) .app-sidebar { overflow-y: auto; }
.app-content.settings-content { padding: 0; }
/* settings sub-nav items are <a> tags · kill the default browser underline */
a.set-sub-item { text-decoration: none; color: var(--ink-2); }
a.set-sub-item.active { color: var(--ink); }

/* ---- legacy/customer.css ---- */

/* Customer · list (f.1) + Customer 360 detail (f.2). Reuses .h-row + .q-form-grid. */

/* Natural-language search bar */
.c-search {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 24px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}
.c-search-input-wrap {
  flex: 1; position: relative;
}
.c-search-input-wrap > svg {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  color: var(--mid);
  pointer-events: none;
}
.c-search-input {
  width: 100%;
  padding: 9px 14px 9px 38px;
  font: inherit;
  font-size: 14px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  color: var(--ink);
}
.c-search-input:focus {
  outline: none;
  border-color: var(--accent);
}
.c-search-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
}

/* Customer 360 layout */
.c-360-head {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 24px 28px;
  display: flex; align-items: flex-start; gap: 20px;
  flex-wrap: wrap;
}
.c-360-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--ink);
  flex-shrink: 0;
}
.c-360-title { flex: 1; min-width: 240px; }
.c-360-name {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.c-360-name em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.c-360-meta {
  font-size: 13px;
  color: var(--mid);
  display: flex; gap: 14px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.c-360-meta strong { color: var(--ink-2); font-weight: 600; }
.c-360-meta .dot { color: var(--mid-2); }

.c-360-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 18px 28px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
}
.c-360-kpi {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 12px 14px;
}
.c-360-kpi .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}
.c-360-kpi .val {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.c-360-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  padding: 24px 28px;
  align-items: start;
}
.c-360-section {
  background: var(--paper);
  border: 1px solid var(--border);
}
.c-360-section h3 {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.c-360-section h3 .ct {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  font-weight: 400;
  margin-left: 6px;
}

.c-timeline { padding: 12px 18px; }
.c-timeline li {
  display: flex; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  list-style: none;
}
.c-timeline li:last-child { border-bottom: none; }
.c-timeline .t { flex: 1; }
.c-timeline .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  white-space: nowrap;
}

/* ---- legacy/quotes.css ---- */

/* Quotes · list + form + detail (frames e.1, e.2, e.3, e.4, e.3-sent).
   Reuses .h-row pattern from home.css for list. Form/detail use shared .card / .btn / .field. */

/* ─── List page chrome ─── */
.q-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 28px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  gap: 16px;
  flex-wrap: wrap;
}
.q-list-head .title-group { display: flex; align-items: baseline; gap: 12px; }
.q-list-head .title {
  font-size: 24px; font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.q-list-head .count-pill {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
}
.q-list-head .actions { display: flex; gap: 8px; align-items: center; }

.q-rows { background: var(--paper); }

/* ─── Detail header ─── */
.q-detail-head {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 22px 28px;
}
.q-detail-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
.q-detail-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.q-detail-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.q-detail-meta {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 13px; color: var(--ink-2);
  margin-top: 10px;
}
.q-detail-meta .item { display: inline-flex; gap: 6px; align-items: center; }
.q-detail-meta strong { color: var(--ink); font-weight: 600; }
.q-detail-meta .dot { color: var(--mid-2); }
.q-detail-meta select {
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  padding: 6px 34px 6px 11px;
  background-color: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89d8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}
.q-detail-meta select:focus { border-color: var(--accent); }
.q-detail-meta select::-ms-expand { display: none; }

.q-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  padding: 3px 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.q-status-pill.draft    { background: var(--paper-3); color: var(--ink-2); }
.q-status-pill.pending  { background: var(--warn-soft); color: var(--warn); }
.q-status-pill.ready    { background: var(--accent-soft); color: var(--accent-deep); }
.q-status-pill.sent     { background: var(--accent-soft); color: var(--accent-deep); }
.q-status-pill.accepted { background: var(--good-soft); color: var(--good); }
.q-status-pill.cancelled { background: var(--danger-soft); color: var(--danger); }

/* ─── Form layout ─── */
.q-form-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}
.q-form-main { display: flex; flex-direction: column; gap: 20px; }
.q-form-side { display: flex; flex-direction: column; gap: 16px; }
.q-form-section {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 20px;
}
.q-form-section h3 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  margin-bottom: 14px;
}
.q-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.q-form-stack { display: flex; flex-direction: column; gap: 14px; }

.q-form-section input[type="text"],
.q-form-section input[type="date"],
.q-form-section input[type="number"],
.q-form-section select,
.q-form-section textarea {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 14px;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--border);
  border-radius: 0;
}
.q-form-section input:focus,
.q-form-section select:focus,
.q-form-section textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.q-form-section label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}

/* ─── Lines table ─── */
.q-lines {
  background: var(--paper);
  border: 1px solid var(--border);
}
.q-lines-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.q-lines-head .title { font-weight: 600; font-size: 15px; }
.q-lines-table { width: 100%; border-collapse: collapse; }
.q-lines-table th, .q-lines-table td {
  text-align: left;
  padding: 10px 14px;
  font-size: 13px;
  border-bottom: 1px solid var(--border-2);
}
.q-lines-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  background: var(--paper-2);
}
.q-lines-table td.r,
.q-lines-table th.r { text-align: right; font-family: var(--font-mono); }
.q-lines-empty {
  padding: 28px;
  text-align: center;
  color: var(--mid);
  font-size: 13px;
}
.q-lines-foot {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  align-items: flex-end;
  font-size: 13px;
}
.q-lines-foot .row { display: flex; gap: 24px; align-items: baseline; }
.q-lines-foot .row .lbl { color: var(--mid); font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.q-lines-foot .row .val { font-family: var(--font-mono); color: var(--ink); }
.q-lines-foot .row.total .val {
  font-size: 18px; font-weight: 600; color: var(--accent);
}

/* ---- legacy/settings.css ---- */

/* Settings · hub + sub-pages (h.1, h.2, h.3, i.1) + system status + modules.
   Pattern: left-rail tabs + right content. */

.s-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}
.s-tabs {
  position: sticky; top: 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 8px 0;
  display: flex; flex-direction: column;
}
.s-tab {
  padding: 9px 16px;
  text-decoration: none;
  color: var(--ink-2);
  font-size: 13px;
  display: flex; align-items: center; gap: 8px;
  border-left: 3px solid transparent;
  transition: background .12s;
}
.s-tab:hover { background: var(--paper-2); }
.s-tab.active {
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-weight: 600;
  border-left-color: var(--accent);
}
.s-tab .ic { width: 14px; height: 14px; color: var(--mid); }
.s-tab.active .ic { color: var(--accent); }

.s-section {
  background: var(--paper);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.s-section h3 {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  font-size: 14px; font-weight: 600;
  color: var(--ink);
}
.s-section-body { padding: 18px; }

.s-row {
  display: flex; align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid var(--border-2);
  gap: 14px;
}
.s-row:last-child { border-bottom: none; }
.s-row .label { flex: 1; }
.s-row .label .t { font-weight: 500; }
.s-row .label .d { font-size: 11px; color: var(--mid); }

/* Plan tiers grid */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 18px;
}
.plan-card {
  border: 1px solid var(--border);
  padding: 18px;
  background: var(--paper-2);
  display: flex; flex-direction: column;
  gap: 8px;
}
.plan-card.current { border-color: var(--accent); border-left-width: 3px; background: var(--accent-soft); }
.plan-card .name { font-size: 16px; font-weight: 600; color: var(--ink); }
.plan-card .name em { font-family: var(--font-display); font-style: italic; color: var(--accent); }
.plan-card .price { font-family: var(--font-mono); font-size: 18px; color: var(--ink); }
.plan-card .feats { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); }
.plan-card .feats li::before { content: '✓ '; color: var(--good); }

/* ---- legacy/onboarding.css ---- */

/* Onboarding wizard · step 1 (company info) + step 2 (subdomain + brand).
   Canonical · per design/backoffice.html .onb-* + .onbb-* (frames c.1, c.2). */

.onb-progress {
  background: var(--paper-2);
  padding: 24px 32px;
  border-bottom: 1px solid var(--border);
}
.onb-steps {
  display: flex; gap: 6px; align-items: center;
  margin-bottom: 14px;
}
.onb-step-bar {
  flex: 1; height: 4px;
  background: var(--paper-3);
}
.onb-step-bar.done   { background: var(--good); }
.onb-step-bar.active { background: var(--accent); }
.onb-step-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px;
}
.onb-step-current {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.onb-step-current strong { font-size: 14px; }
.onb-step-total {
  font-family: var(--font-mono);
  color: var(--mid);
  font-size: 11px;
}

.onb-body {
  flex: 1;
  padding: 40px 32px;
  max-width: 760px;
  width: 100%;
  margin: 0 auto;
}
.onb-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.onb-h {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 10px;
}
.onb-h em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
}
.onb-desc {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.6;
  margin-bottom: 28px;
}
.onb-fields {
  display: flex; flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}
.onb-row-2 {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.onb-tip {
  background: var(--ai-soft);
  padding: 14px;
  display: flex; gap: 10px;
  align-items: flex-start;
  margin-top: 24px;
}
.onb-tip .ic {
  width: 24px; height: 24px;
  background: var(--ai);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 13px;
  flex-shrink: 0;
}
.onb-tip .text {
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.55;
}
.onb-tip strong { font-weight: 600; }

.onb-actions {
  display: flex; gap: 8px;
  margin-top: 28px;
  align-items: center;
}

.onb-required { color: var(--accent); }
.onb-helper {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.onb-note {
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  font-size: 12px;
  color: var(--mid);
}
.onb-note strong { color: var(--ink); }

/* ─── c.2 · brand-step bits (onbb-*) ─── */
.onbb-subdomain {
  display: flex; align-items: stretch;
  border: 1px solid var(--border);
  background: var(--paper-2);
  overflow: hidden;
}
.onbb-subdomain input {
  flex: 1;
  padding: 11px 14px;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.onbb-subdomain .suffix {
  padding: 11px 14px;
  background: var(--paper);
  border-left: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--mid);
}
.onbb-avail {
  display: flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--good);
  font-weight: 600;
}
.onbb-avail svg { width: 14px; height: 14px; }

.onbb-logo-drop {
  border: 2px dashed var(--mid-2);
  padding: 24px 20px;
  background: var(--paper-2);
  display: flex; align-items: center; gap: 18px;
}
.onbb-logo-drop .preview {
  width: 64px; height: 64px;
  background: var(--paper);
  border: 1px solid var(--border);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--accent);
  flex-shrink: 0;
  overflow: hidden;
}
.onbb-logo-drop .preview img { width: 100%; height: 100%; object-fit: contain; }
.onbb-logo-drop .text {
  font-size: 13px;
  color: var(--mid);
  line-height: 1.5;
}
.onbb-logo-drop .text strong { color: var(--ink); font-weight: 600; }
.onbb-logo-drop input[type="file"] { display: none; }

.onbb-themes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 8px;
}
.onbb-theme {
  border: 2px solid var(--border);
  cursor: pointer;
  overflow: hidden;
  background: var(--paper);
  transition: border-color .15s;
}
.onbb-theme.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.onbb-theme .swatch {
  height: 90px;
  position: relative;
  border-bottom: 1px solid var(--border-2);
}
.onbb-theme .swatch .ink {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  height: 6px;
  opacity: .8;
}
.onbb-theme .swatch .mini-text {
  position: absolute;
  top: 14px; left: 14px;
  font-size: 12px;
  font-weight: 600;
}
.onbb-theme .swatch .mini-btn {
  position: absolute;
  bottom: 32px; left: 14px;
  padding: 3px 8px;
  font-size: 9px;
}
.onbb-theme .name {
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex; justify-content: space-between; align-items: center;
}
.onbb-theme .name .vibe {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 11px;
  color: var(--mid);
  font-weight: 400;
}
.onbb-theme.t-craft   .swatch { background: #F6F1E7; }
.onbb-theme.t-craft   .swatch .mini-text { color: #1B2A3A; font-family: var(--font-display); font-style: italic; }
.onbb-theme.t-craft   .swatch .ink       { background: #C8501F; }
.onbb-theme.t-craft   .swatch .mini-btn  { background: #C8501F; color: #fff; }
.onbb-theme.t-atelier .swatch { background: #F2EAD7; }
.onbb-theme.t-atelier .swatch .mini-text { color: #2A2317; font-family: var(--font-display); }
.onbb-theme.t-atelier .swatch .ink       { background: #B8965A; }
.onbb-theme.t-atelier .swatch .mini-btn  { background: #B8965A; color: #fff; }
.onbb-theme.t-bauhaus .swatch { background: #FAFAF8; }
.onbb-theme.t-bauhaus .swatch .mini-text { color: #1A1A1A; font-family: 'Inter', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.onbb-theme.t-bauhaus .swatch .ink       { background: #E63946; }
.onbb-theme.t-bauhaus .swatch .mini-btn  { background: #E63946; color: #fff; }
.onbb-theme.t-velvet  .swatch { background: #0F1715; }
.onbb-theme.t-velvet  .swatch .mini-text { color: #C9A961; font-family: var(--font-display); font-style: italic; }
.onbb-theme.t-velvet  .swatch .ink       { background: #C9A961; }
.onbb-theme.t-velvet  .swatch .mini-btn  { background: #C9A961; color: #0F1715; }

/* On-page button styles (auth.css covers many; these cover deck's .btn/.btn-ghost/.btn-accent on onboarding) */
.btn.btn-ghost    { background: transparent; border-color: transparent; }
.btn.btn-accent   { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn.btn-accent:hover { background: var(--accent-deep); }

/* ---- legacy/kanban.css ---- */

/* Pipeline kanban · column per stage · drag deals across. */

.kb-board {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 24px;
  align-items: flex-start;
}
.kb-col {
  flex: 0 0 280px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 320px;
}
.kb-col-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--paper);
}
.kb-col-head .name { font-weight: 600; font-size: 13px; color: var(--ink); }
.kb-col-head .ct {
  font-family: var(--font-mono);
  font-size: 11px; color: var(--mid);
}
.kb-col-body {
  padding: 8px;
  flex: 1;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 80px;
}
.kb-card {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 10px 12px;
  cursor: grab;
  text-decoration: none;
  color: inherit;
  font-size: 13px;
}
.kb-card:hover { border-color: var(--accent); }
.kb-card .name { font-weight: 600; }
.kb-card .meta { font-size: 11px; color: var(--mid); margin-top: 2px; }
.kb-card .amt { font-family: var(--font-mono); font-weight: 600; color: var(--accent); }
.kb-card.sortable-ghost { opacity: 0.4; background: var(--accent-soft); }

/* ---- legacy/catalog.css ---- */

/* Catalog · product list (g.1), product form (g.2), categories tree (g.3). */

.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  padding: 24px;
}
.pl-card {
  background: var(--paper);
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  display: flex; flex-direction: column;
  transition: border-color .12s;
}
.pl-card:hover { border-color: var(--accent); }
.pl-card .thumb {
  aspect-ratio: 4 / 3;
  background: var(--paper-3);
  display: grid; place-items: center;
  color: var(--mid-2);
  overflow: hidden;
}
.pl-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.pl-card .thumb svg { width: 32px; height: 32px; }
.pl-card .body { padding: 12px 14px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pl-card .code {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pl-card .name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pl-card .meta { font-size: 11px; color: var(--mid); }
.pl-card .price {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  margin-top: auto;
}

/* Categories tree legacy rules removed — now using deck classes (.cat-page / .cat-node / .cat-detail) */

/* ---- Django runtime additions (Alpine/htmx, message banners) ---- */
/* These rules are NOT in design/backoffice.html — Django/Alpine implementation-only. */

[x-cloak] { display: none !important; }

/* LINE inbox conversation pane (Django-side; design frame has no live composer/retry) */
.conv-pane { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.conv-error {
  display: flex; align-items: center; gap: 6px;
  margin: 8px 18px 0; padding: 8px 12px;
  background: var(--danger-soft); color: var(--danger); font-size: 12px;
}
.conv-error .ic { width: 14px; height: 14px; flex-shrink: 0; }
.h-tl-bubble.failed .h-tl-bub-content { border: 1px solid var(--danger); opacity: 0.85; }
.h-tl-bub-time .bub-failed { color: var(--danger); font-weight: 600; }
.h-tl-bub-time .bub-retry {
  background: none; border: none; padding: 0 2px; cursor: pointer;
  color: var(--danger); vertical-align: middle;
}
.h-tl-bub-time .bub-retry .ic { width: 13px; height: 13px; }

.htmx-indicator { opacity: 0; transition: opacity .15s; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

.messages { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.message {
  padding: 10px 14px; border-radius: 0; font-size: 13px;
  background: var(--paper-2, #f5f1e6); border: 1px solid var(--border, #e0d7c2);
}
.message.success { background: #E8F5E9; border-color: #A5D6A7; color: #1B5E20; }
.message.error,
.message.danger { background: #FFEBEE; border-color: #EF9A9A; color: #B71C1C; }
.message.warning { background: #FFF8E1; border-color: #FFE082; color: #6D4C00; }
.message.info { background: #E3F2FD; border-color: #90CAF9; color: #0D47A1; }

/* Source-channel badges in the home queue (LINE / web / sales-create).
   Match the col-4 detail badge style (rounded squircle, 22×22, 13px icon). */
.h-avatar .ch,
.h-chat-head .av .ch {
  width: 22px !important;
  height: 22px !important;
  bottom: -4px !important;
  right: -4px !important;
  border-radius: 50% !important;
  border: 2px solid var(--paper) !important;
}
.h-avatar .ch,
.h-chat-head .av .ch,
.h-cust-source .src-badge { display: grid !important; place-items: center; }
.h-avatar .ch svg,
.h-chat-head .av .ch svg,
.h-cust-source .src-badge svg { width: 13px; height: 13px; stroke-width: 2; flex-shrink: 0; }
.h-cust-source .src-badge {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
}
.h-avatar .ch.line, .h-chat-head .av .ch.line, .h-cust-source.line .src-badge { background: #06C755 !important; color: #fff !important; }
.h-avatar .ch.web,  .h-chat-head .av .ch.web,  .h-cust-source.web  .src-badge { background: var(--ink) !important; color: var(--paper) !important; }
.h-avatar .ch.manual, .h-chat-head .av .ch.manual, .h-cust-source.manual .src-badge { background: var(--mid) !important; color: var(--paper) !important; }

/* Col 2 + Col 3 avatar = source icon directly (no initial letter, no dot badge). */
.h-avatar.h-avatar-source,
.h-chat-head .av.av-source {
  background: var(--paper-3) !important;
  color: var(--ink) !important;
  display: grid !important;
  place-items: center !important;
}
.h-avatar.h-avatar-source.ch-line,
.h-chat-head .av.av-source.ch-line   { background: #06C755 !important; color: #fff !important; }
.h-avatar.h-avatar-source.ch-web,
.h-chat-head .av.av-source.ch-web    { background: var(--ink) !important; color: var(--paper) !important; }
.h-avatar.h-avatar-source.ch-manual,
.h-chat-head .av.av-source.ch-manual { background: var(--mid) !important; color: var(--paper) !important; }
.h-avatar.h-avatar-source svg,
.h-chat-head .av.av-source svg { width: 18px; height: 18px; stroke-width: 2; }
/* Reset position:relative on av so child .ch (we no longer use it here) doesn't haunt */
.h-chat-head .av.av-source { position: relative; }

/* ─── Chat stream · Activity rows + Flex Message bubbles (home.web col 3) ─── */
.h-chat-act {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.h-chat-act .ic {
  display: inline-grid;
  place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper-3);
  color: var(--mid);
  flex-shrink: 0;
  margin-top: 1px;
}
.h-chat-act .ic svg { width: 11px; height: 11px; stroke-width: 2; }
.h-chat-act .time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--mid);
  flex-shrink: 0;
  margin-top: 4px;
}
.h-chat-act .text { flex: 1; }
.h-chat-act .actor-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 0;
  flex-shrink: 0;
  margin-top: 3px;
}

/* Actor variants: system = neutral gray; ai = sage; user = ink */
.h-chat-act.act-system { color: var(--mid); }
.h-chat-act.act-system .ic { background: var(--paper-3); color: var(--mid); }

.h-chat-act.act-ai { color: var(--ai-deep); background: var(--ai-soft); border-radius: 0; }
.h-chat-act.act-ai .ic { background: var(--ai); color: var(--paper); }
.h-chat-act.act-ai .text strong { color: var(--ai-deep); }
.h-chat-act.act-ai .actor-tag { background: var(--ai); color: var(--paper); }

.h-chat-act.act-user { color: var(--ink); }
.h-chat-act.act-user .ic { background: var(--ink); color: var(--paper); }

/* Flex bubble container — sits in the chat stream like a message */
.h-flex { display: flex; margin: 6px 0 2px; }
.h-flex.in  { justify-content: flex-start; }
.h-flex.out { justify-content: flex-end; }
.h-flex .flex-card {
  max-width: 260px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  font-size: 12px;
}
.h-flex.out .flex-card { background: #06C755; color: white; border-color: #06C755; }
.h-flex.out .flex-card .flex-head { background: rgba(255,255,255,.18); color: white; }
.h-flex.out .flex-card .flex-line .lbl { color: rgba(255,255,255,.7); }
.h-flex.out .flex-card .flex-line .val { color: white; }
.h-flex.out .flex-card .flex-line .val.accent { color: #FFD27A; }
.h-flex.out .flex-card .flex-foot { border-top-color: rgba(255,255,255,.18); }
.h-flex.out .flex-card .flex-btn { color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); }
.h-flex.out .flex-card .flex-btn.primary { background: white; color: var(--ink); }

.flex-head {
  background: var(--accent);
  color: var(--paper);
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.flex-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.flex-line { display: flex; justify-content: space-between; font-size: 12px; }
.flex-line .lbl { color: var(--mid); }
.flex-line .val { color: var(--ink); font-weight: 600; }
.flex-line .val.accent { color: var(--accent); font-weight: 700; }
.flex-foot {
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  display: flex; gap: 6px;
}
.flex-btn {
  flex: 1;
  text-align: center;
  padding: 6px 8px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 10px;
  font-weight: 600;
  border-radius: 0;
  cursor: pointer;
}
.flex-btn.primary { background: var(--accent); color: var(--paper); }

/* Carousel of product cards */
.flex-carousel {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.flex-carousel .flex-card { min-width: 140px; max-width: 140px; flex-shrink: 0; }
.flex-thumb {
  width: 100%;
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--paper-3), var(--mid-2));
}
.flex-name {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.flex-price { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--accent); }

/* Status card (accept/reject/changes) */
.flex-status {
  padding: 10px 14px;
  background: rgba(61, 90, 61, .08);
  border-left: 3px solid var(--good);
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--good);
}
.flex-status-rejected { background: rgba(160, 60, 31, .08); border-left-color: var(--danger); color: var(--danger); }
.flex-status-changes  { background: rgba(168, 126, 44, .08); border-left-color: var(--warn); color: var(--warn); }
.flex-status-ic {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--good); color: white;
  font-weight: 700;
  font-size: 13px;
}
.flex-status-rejected .flex-status-ic { background: var(--danger); }
.flex-status-changes .flex-status-ic { background: var(--warn); }

/* ─── Sidebar collapse (desktop) ─── */
/* `.app` is grid `220px 1fr` — when sidebar collapses we shrink the grid track
   so the main column reclaims the space (otherwise the sidebar element narrows
   but the grid cell stays 220px → ghost gap). */
.app { transition: grid-template-columns .18s ease; }
/* Collapse is a DESKTOP state. `sbCollapsed` persists in localStorage, so a
   user who collapsed on desktop then opens a phone viewport still carries the
   class — every .collapsed/.sb-collapsed rule must stay scoped to ≥901px or
   the mobile drawer renders 86px wide with icon-only rows. */
@media (min-width: 901px) {
  .app.sb-collapsed { grid-template-columns: 86px 1fr; }
}
/* Suppress all transitions during initial paint so the sidebar doesn't
   animate-collapse on every page navigation. `body.preload` is set inline in
   base.html and stripped by Alpine after init. */
body.preload, body.preload *, body.preload *::before, body.preload *::after {
  transition: none !important;
  animation-duration: 0s !important;
}
.app-sidebar { transition: width .18s ease; }
/* Desktop only — the ≤900px media block makes the sidebar a fixed slide-in
   drawer; an unscoped `position: relative` here (later in the file, same
   specificity) put it back into the grid flow and pushed the main column
   below a 100vh first row → whole backoffice rendered blank on mobile. */
@media (min-width: 901px) {
  .app-sidebar { position: relative; }
}
@media (min-width: 901px) {
.app-sidebar.collapsed { width: 86px !important; }

/* Collapsed chevron floats OVER the sidebar's right border (Wetask pattern) —
   so it visually escapes the dark container and looks like a tab handle. */
.app-sidebar.collapsed .sb-brand { position: relative; }
.app-sidebar.collapsed .sb-collapse-btn {
  position: absolute;
  top: 50%;
  right: -16px;
  transform: translateY(-50%);
  background: var(--paper);
  border-color: var(--border);
  color: var(--mid);
  width: 30px; height: 30px;
  z-index: 5;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.app-sidebar.collapsed .sb-collapse-btn:hover { color: var(--ink); background: var(--paper-2); }

/* Collapsed sidebar: icon stays visible, badge sits as a small overlay on its
   top-right (Notion / Linear / VS Code convention). Previous spec replaced
   the icon with a centered badge — readers had no clue what the row was. */
.app-sidebar.collapsed .sb-item .badge {
  font-size: 10px !important;
  font-weight: 700;
  min-width: 16px;
  padding: 0 4px;
  height: 14px;
  line-height: 14px;
}
/* Bare text labels (not wrapped in <span>) are hidden via font-size: 0 on the
   parent. Re-enable for child elements that should keep their natural size. */
.app-sidebar.collapsed .sb-item,
.app-sidebar.collapsed .sb-brand,
.app-sidebar.collapsed .sb-section-label,
.app-sidebar.collapsed .sb-bottom { font-size: 0 !important; }
.app-sidebar.collapsed .sb-item .icon,
.app-sidebar.collapsed .sb-item .badge,
.app-sidebar.collapsed .sb-brand .ic,
.app-sidebar.collapsed .sb-brand .sb-collapse-btn,
.app-sidebar.collapsed .sb-bottom .sb-avatar { font-size: 13px !important; }
.app-sidebar.collapsed .sb-brand .name,
.app-sidebar.collapsed .sb-bottom .sb-user-info { display: none; }
.app-sidebar.collapsed .sb-brand {
  padding: 0 0 12px;
  gap: 0;
  flex-wrap: nowrap;
  justify-content: center;
}
.app-sidebar.collapsed .sb-brand .sb-collapse-btn { margin: 0; }
.app-sidebar.collapsed .sb-item {
  display: block !important;
  padding: 12px 0;
  border-left: 0;
  position: relative;
  min-height: 40px;
}
/* Bare-text label nodes leak as anonymous flex items; positioning the icon
   absolutely centres it. The .badge is nested inside .icon and keeps its
   top-right offset from the expanded-mode rule. */
.app-sidebar.collapsed .sb-item .icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.app-sidebar.collapsed .sb-bottom { justify-content: center; padding: 14px 0; }
.app-sidebar.collapsed .sb-section-label { height: 4px; padding: 0; margin: 8px 14px; border-top: 1px solid rgba(255,255,255,.08); }
}

.sb-collapse-btn {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(246, 241, 231, 0.7);
  width: 24px; height: 24px;
  border-radius: 0;
  display: inline-grid; place-items: center;
  cursor: pointer;
  transition: all .15s;
}
.sb-collapse-btn:hover { color: var(--paper); border-color: rgba(255,255,255,0.3); background: rgba(255,255,255,0.08); }

/* ─── h-main column resizer (home.web · between chat + detail panes) ─── */
/* Chat pane = fixed width (user-set via resizer · 420px default), no grow.
   Detail pane = the only flex-grow target, so any freed width (e.g. when the
   sidebar collapses) flows into the detail column without resizing chat. */
.h-main.has-resizer .h-chat-pane {
  flex: 0 0 var(--chat-w, 420px);
  width: auto !important;
  min-width: 260px;
  max-width: 60%;
}
.h-main.has-resizer .h-detail-pane {
  flex: 1 1 0;
  min-width: 360px;
}
.h-main.has-resizer.dragging,
.h-main.has-resizer.dragging * { user-select: none; cursor: col-resize !important; }
.h-resizer {
  width: 4px;
  background: var(--border);
  cursor: col-resize;
  flex-shrink: 0;
  position: relative;
  transition: background .15s;
}
.h-resizer:hover,
.h-resizer.dragging { background: var(--accent); }
.h-resizer::before {
  content: "";
  position: absolute;
  left: -3px; right: -3px; top: 0; bottom: 0;  /* widen hit target */
}

/* Event-stream rows — Django additions override design `::before/::after '·'` dots
   because the inline event format already includes its own punctuation. */
.h-chat-system::before,
.h-chat-system::after { content: none !important; }
.h-chat-system {
  text-align: left !important;
  font-style: normal !important;
  background: transparent !important;
  padding: 6px 10px !important;
  font-family: inherit !important;
  font-size: 12.5px !important;
  color: var(--ink-2) !important;
  line-height: 1.5 !important;
  border-bottom: 1px dashed var(--border-2);
}
.h-chat-system.highlight {
  background: var(--accent-soft) !important;
  color: var(--accent-deep) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--accent-soft);
}
.h-chat-system .time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--mid);
  margin-right: 8px;
}
.h-chat-day {
  position: relative;
  padding: 12px 0 6px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mid);
}
.h-chat-day::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(50% + 3px);
  height: 1px;
  background: var(--border);
  z-index: 0;
}
.h-chat-day {
  /* span the day text on top of the line via inline-block + relative bg */
  display: block;
}
.h-chat-day > * { position: relative; z-index: 1; background: var(--paper); padding: 0 12px; }


/* ─── Settings widget auto-styling (Django form fields inside .set-card) ─── */
.set-card-body .control input[type=text],
.set-card-body .control input[type=email],
.set-card-body .control input[type=url],
.set-card-body .control input[type=tel],
.set-card-body .control input[type=number],
.set-card-body .control input[type=password],
.set-card-body .control input[type=date],
.set-card-body .control input:not([type]),
.set-card-body .control select,
.set-card-body .control textarea {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.set-card-body .control input:focus,
.set-card-body .control select:focus,
.set-card-body .control textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.set-card-body .control textarea { min-height: 60px; resize: vertical; }
.set-card-body .control input[type=file] {
  font-size: 12px;
  padding: 6px 0;
  background: transparent;
  border: 0;
}

/* Settings · checkbox → toggle-switch visual */
.set-card-body .control input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  background: var(--border);
  border-radius: 0;
  position: relative;
  cursor: pointer;
  transition: background .15s;
}
.set-card-body .control input[type=checkbox]::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.set-card-body .control input[type=checkbox]:checked { background: var(--accent); }
.set-card-body .control input[type=checkbox]:checked::after { transform: translateX(16px); }

/* Settings · auth-err inline error */
.set-card-body .auth-err { color: var(--danger); font-size: 11px; margin-top: 4px; }
.set-card-body .sub { color: var(--mid); font-size: 11px; margin-top: 3px; font-weight: 400; }

/* Settings · footer button row */
.set-footer { padding: 20px 0; display: flex; gap: 12px; }
.btn.btn-primary {
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn.btn-primary:hover { background: var(--accent-deep); }
.btn.btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
}


/* Settings · connection-status card (line OA, integrations) */
.set-status-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--border);
  background: var(--paper);
  margin-bottom: 16px;
}
.set-status-card.connected { background: rgba(61, 90, 61, 0.05); border-color: var(--good); }
.set-status-card.pending { background: rgba(168, 126, 44, 0.04); border-color: var(--warn); }
.set-status-card .status-ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--good); color: white;
  font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}
.set-status-card.pending .status-ic { background: var(--warn); }
.set-status-card .status-body { flex: 1; min-width: 0; }
.set-status-card .status-title { font-size: 14px; color: var(--ink); }
.set-status-card .status-meta { font-size: 11px; color: var(--mid); margin-top: 2px; font-family: var(--font-mono); }
.set-status-card .status-pill {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--paper-3);
  color: var(--mid);
  border-radius: 0;
}
.set-status-card .status-pill.good { background: var(--good); color: white; }
.set-row .req { color: var(--accent); font-weight: 700; }


.set-alert {
  padding: 10px 14px;
  background: rgba(123, 143, 107, 0.08);
  border-left: 3px solid var(--ai);
  font-size: 12.5px;
  color: var(--ink-2);
  margin-bottom: 16px;
}
.set-alert strong { color: var(--ai-deep); }


/* ───────────────────────────────────────────────────────────────────────────
 * Home — `.h-tl-pane` (col 3 timeline) + `.h-ref-pane` (col 4 reference)
 * Ported verbatim from design/backoffice.html#home.line/home.web/home.manual
 * ─────────────────────────────────────────────────────────────────────────── */

.h-tl-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper);
  border-left: 1px solid var(--border);
  position: relative;
}
.h-tl-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  height: 65px;
  border-bottom: 1px solid var(--border);
  background: var(--paper);
  box-sizing: border-box;
}
.h-tl-header .av {
  width: 32px; height: 32px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  font-size: 13px;
  position: relative;
  flex-shrink: 0;
}
.h-tl-header .av svg { width: 16px; height: 16px; }
.h-tl-header .av .ch {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 14px; height: 14px;
  border: 2px solid var(--paper);
  background: #06C755;
  color: white;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  font-weight: 700;
}
.h-tl-header .av .ch.web { background: var(--accent); }
.h-tl-header .av .ch.manual { background: var(--mid); }
.h-tl-header .info { flex: 1; min-width: 0; }
.h-tl-header .nm {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-tl-header .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h-tl-expand {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
}
.h-tl-expand:hover { border-color: var(--accent); color: var(--accent); }

.h-tl-stream {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 18px 18px;
  background: var(--white);
  display: flex;
  flex-direction: column;
}
.h-tl-stream::-webkit-scrollbar { width: 4px; }
.h-tl-stream::-webkit-scrollbar-thumb { background: var(--mid-2); }

.h-tl-day {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 14px 0 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.h-tl-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

.h-tl-event {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 5px 0;
  font-size: 12px;
  align-self: flex-end;
  width: 78%;
}
.h-tl-event .ic {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--mid);
  font-size: 12px;
}
.h-tl-event .ic svg { width: 12px; height: 12px; }
.h-tl-event .content { color: var(--ink-2); line-height: 1.45; }
.h-tl-event .content strong { color: var(--ink); font-weight: 700; }
.h-tl-event .time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid-2);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.h-tl-event.created .ic { color: var(--accent); }
.h-tl-event.delivery .ic { color: var(--ink); }
.h-tl-event.opened .ic { color: var(--good); }
.h-tl-event.unread .content { color: var(--warn); font-style: italic; }
.h-tl-event.system .content { color: var(--mid); font-style: italic; }
.h-tl-event.ai .ic { color: var(--ai); }
.h-tl-event.note .ic { color: var(--mid); }

.h-tl-msg {
  margin: 8px 0;
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.h-tl-msg .bub {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  background: var(--paper);
  border: 1px solid var(--border);
}
.h-tl-msg .time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid-2);
  margin-top: 3px;
  letter-spacing: 0.03em;
}
/* Customer (direction=in) goes LEFT · sales/system/ai (direction=out + events) go RIGHT */
.h-tl-msg.in { align-self: flex-start; }
.h-tl-msg.in .bub { background: var(--paper); border-color: var(--border); }
.h-tl-msg.out { align-self: flex-end; align-items: flex-end; }
.h-tl-msg.out .bub {
  background: var(--accent-soft);
  border-color: rgba(200, 80, 31, 0.25);
  color: var(--ink);
}

/* เอไอ suggest card inline in timeline */
.h-ai-card {
  margin: 16px 0 8px;
  background: linear-gradient(180deg, rgba(123, 143, 107, 0.10) 0%, rgba(123, 143, 107, 0.04) 100%);
  border: 1px solid var(--ai);
  border-left: 3px solid var(--ai);
  padding: 12px 14px;
  align-self: flex-end;
  max-width: 78%;
}
.h-ai-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.h-ai-card-head .ic {
  width: 22px; height: 22px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 12px;
}
.h-ai-card-head .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep, var(--ai));
}
.h-ai-card-head .conf {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--ai);
}
.h-ai-card-body {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 10px;
}
.h-ai-card-body strong { font-weight: 700; }
.h-ai-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.h-ai-card .h-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.h-ai-card .h-ai-btn:hover { border-color: var(--ai); color: var(--ai-deep, var(--ai)); }
.h-ai-card .h-ai-btn.primary {
  background: var(--ai);
  color: var(--paper);
  border-color: var(--ai);
}
.h-ai-card .h-ai-btn.primary:hover { opacity: 0.92; }
.h-ai-card .h-ai-btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--mid);
}

/* Adaptive footers — LINE (textarea + 2 buttons) vs Web/Manual (full-width send) */
.h-actions-line {
  display: flex;
  gap: 6px;
  padding: 12px 14px 14px;
  height: 75px;
  box-sizing: border-box;
  background: var(--paper);
  border-top: 1px solid var(--border);
  align-items: stretch;
  flex-shrink: 0;
}
.h-compose-inline {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 110px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  background: var(--paper-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  resize: none;
}
.h-compose-inline:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.h-act-chat-inline {
  padding: 0 14px;
  background: #06C755;
  color: white;
  border: 1px solid #06C755;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.h-act-chat-inline:hover { background: #05a847; border-color: #05a847; }
.h-act-send-inline {
  padding: 0 14px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  margin-left: 4px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.h-act-send-inline:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.h-actions-send-only {
  /* match the rest of the bottom-bar family (.h-list-foot / .h-ref-actions) at 64px */
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  padding: 0 16px;
  background: var(--paper);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.h-act-send-full {
  width: 100%;
  height: 40px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.h-act-send-full:hover { background: var(--accent-deep); }

.h-firstsend-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(200, 80, 31, 0.06);
  border-top: 1px solid var(--accent-soft);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  color: var(--ink-2);
  flex-shrink: 0;
}
.h-firstsend-note .pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 2px 7px;
  background: var(--accent-soft);
}
.h-firstsend-note strong { color: var(--ink); font-weight: 700; }

/* col 4 reference pane */
.h-ref-pane {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--paper-2);
  border-left: 1px solid var(--border);
}
.h-ref-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.h-ref-scroll::-webkit-scrollbar { width: 4px; }
.h-ref-scroll::-webkit-scrollbar-thumb { background: var(--mid-2); }
.h-ref-actions {
  padding: 12px 14px 14px;
  height: 75px;
  box-sizing: border-box;
  background: var(--paper);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: relative;
}
.h-ref-view {
  flex: 1;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.h-ref-view:hover { background: var(--accent-deep); }
/* Conversation-wide doc list inside the ref pane — every quotation under
   the buyer thread renders as a row; the focused one (driving the action
   card + timeline) gets an accent border. */
.h-ref-docs-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mid); margin-bottom: 8px;
}
.h-ref-doc {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center;
  padding: 8px 10px; margin-bottom: 4px;
  background: var(--soft); border-left: 3px solid transparent;
  text-decoration: none; color: var(--ink);
  font-size: 12px;
}
.h-ref-doc:hover { background: var(--paper); }
.h-ref-doc.focused { background: var(--paper); border-left-color: var(--accent); }
.h-ref-doc .num { font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; }
.h-ref-doc .pill {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 6px; background: var(--surface); color: var(--mid);
}
.h-ref-doc .pill.sent { background: var(--accent); color: #fff; }
.h-ref-doc .pill.accepted { background: #16a34a; color: #fff; }
.h-ref-doc .pill.rejected { background: #dc2626; color: #fff; }
.h-ref-doc .pill.cancelled { background: var(--mid); color: #fff; }
.h-ref-doc .amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--ink-2);
}
.h-ref-doc-add {
  width: 100%; padding: 8px 10px;
  background: transparent; border: 1px dashed var(--border);
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--mid); cursor: pointer;
}
.h-ref-doc-add:hover { background: var(--soft); color: var(--ink); border-color: var(--mid); }

.h-ref-doc-ops { position: relative; flex-shrink: 0; }
.h-ref-kebab {
  width: 44px; height: 100%;
  background: var(--paper);
  border: 1px solid var(--border);
  font-size: 22px; line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
}
.h-ref-kebab:hover { background: var(--soft); color: var(--ink); }
.h-ref-menu {
  position: absolute; right: 0; bottom: calc(100% + 4px);
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .08);
  z-index: 20;
}
.h-ref-menu form { margin: 0; }
.h-ref-menu button {
  width: 100%; text-align: left;
  padding: 10px 14px;
  background: transparent; border: none;
  font: inherit; font-size: 13px;
  color: var(--ink);
  cursor: pointer;
}
.h-ref-menu button:hover { background: var(--soft); }
.h-ref-menu button.danger { color: #dc2626; font-weight: 600; }
.h-ref-menu button.danger:hover { background: #fef2f2; }

.h-ref-section {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.h-ref-section:last-child { border-bottom: none; }

.h-ref-ai {
  background: linear-gradient(180deg, rgba(123, 143, 107, 0.08) 0%, rgba(123, 143, 107, 0.02) 100%);
  border-left: 3px solid var(--ai);
}
.h-ref-ai-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.h-ref-ai-head .ic {
  width: 20px; height: 20px;
  background: var(--ai);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 11px;
}
.h-ref-ai-head .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai);
}
.h-ref-ai p {
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.h-ref-ai p strong { color: var(--ink); font-weight: 700; }
.h-ref-ai .strategy {
  font-size: 12px;
  color: var(--ink);
  padding-top: 8px;
  border-top: 1px solid rgba(123, 143, 107, 0.20);
  line-height: 1.5;
}
.h-ref-ai .strategy strong { font-weight: 700; color: var(--accent); }

.h-ref-profile-head,
.h-ref-delivery-head,
.h-ref-totals-head,
.h-ref-items-head .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
/* h-ref-profile · stacked rows per buyer-type (header + company/addr/tax/meta) */
.h-ref-profile .rp-row {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-bottom: 3px;
}
.h-ref-profile .rp-row:last-child { margin-bottom: 0; }
.h-ref-profile .rp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 4px;
}
.h-ref-profile .rp-head .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.h-ref-profile .rp-company {
  font-weight: 600;
  color: var(--ink);
  font-size: 13px;
}
.h-ref-profile .rp-addr { font-size: 11.5px; color: var(--mid); }
.h-ref-profile .rp-tax {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
  margin-top: 4px;
}
.h-ref-profile .rp-meta {
  font-size: 11px;
  color: var(--mid);
  margin-top: 4px;
}

.h-ref-items-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.h-ref-items-head .lbl { margin-bottom: 0; }
.h-ref-items-head .total {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}
.h-ref-items ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.h-ref-items li {
  display: grid;
  grid-template-columns: 28px 1fr 44px 80px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--ink);
  border-bottom: 1px solid var(--border-2);
}
.h-ref-items li .qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  text-align: right;
}
.h-ref-items li:last-child { border-bottom: none; }
.h-ref-items li .ref-item-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  background: var(--paper-2);
  display: block;
  cursor: zoom-in;
  transition: transform .12s;
}
.h-ref-items li .ref-item-thumb:hover { transform: scale(1.06); }
.h-ref-items li .ref-item-thumb.empty { background: var(--paper-2); cursor: default; }
.h-ref-items li .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-ref-items li .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
  text-align: right;
}
.h-ref-items .ref-zoom {
  position: fixed;
  inset: 0;
  background: rgba(21, 20, 15, .82);
  display: grid;
  place-items: center;
  z-index: 200;
  cursor: zoom-out;
  padding: 32px;
}
.h-ref-items .ref-zoom img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
}

.h-ref-totals-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-2);
  padding: 3px 0;
}
.h-ref-totals-row.total {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 4px;
}
.h-ref-totals-row span:last-child {
  font-family: 'IBM Plex Mono', monospace;
}
.h-ref-totals-status {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-2);
}
.h-ref-totals-status .pill {
  display: inline-block;
  padding: 2px 7px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(217, 119, 6, 0.12);
  color: var(--warn);
  margin-right: 8px;
}
.h-ref-totals-status .meta strong { color: var(--ink); font-weight: 700; }

.h-ref-delivery-row {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 11px;
  color: var(--ink-2);
}
.h-ref-delivery-row .ic {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
}
.h-ref-delivery-row .ic.email { background: var(--ink); }
.h-ref-delivery-row .ic.line { background: #06C755; }
.h-ref-delivery-row .ic.phone { background: var(--mid); }
.h-ref-delivery-row .opens {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.h-ref-delivery-row .opens strong { color: var(--ink); font-weight: 700; }

/* override legacy `.h-main` flexbox so old `.has-resizer` rules still find chat/detail panes,
 * but new `.h-tl-pane` + `.h-ref-pane` work without resizer (fixed 380px ref) */
.h-main:has(.h-tl-pane) .h-tl-pane { flex: 1 1 auto; border-left: 0;}
.h-main:has(.h-tl-pane) .h-ref-pane { flex: 0 0 380px; }

/* List head v3 · filter chips only · aligns w/ tl-header + ref-ai head (design home.line/web/manual) */
.h-list-head.h-list-head-v3 {
  padding: 12px 14px;
  height: 65px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.h-list-head.h-list-head-v3 .h-filters {
  padding: 0;
  margin: 0;
  flex: 1;
}



/* ============================================================
 * QB · Quotation Builder — verbatim from design quotation.{create,builder}
 * ============================================================ */
.qb-side {
  background: var(--paper-2);
  border-right: 1px solid var(--border);
  padding: 20px 0;
  overflow-y: auto;
}
.qb-side-title {
  padding: 0 20px 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  border-bottom: 1px solid var(--border);
}
.qb-nav {
  padding: 8px 0;
}
.qb-nav-item {
  padding: 7px 20px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  border-left: 2px solid transparent;
  display: flex; align-items: center; justify-content: space-between;
}
.qb-nav-item:hover { background: var(--paper-3); }
.qb-nav-item.active {
  background: var(--paper-3);
  border-left-color: var(--accent);
  font-weight: 500;
  color: var(--ink);
}
.qb-nav-item .qbn-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}

.qb-status {
  margin: 20px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
}
.qb-status .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 6px;
}
.qb-status-flow {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 6px;
}
.qb-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border);
}
.qb-status-dot.done { background: var(--good); }
.qb-status-dot.active { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.qb-status-line {
  flex: 1; height: 1px;
  background: var(--border);
}
.qb-status-line.done { background: var(--good); }
.qb-status .now {
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
}

/* legacy .qb-main / .qb-toolbar removed — builder re-ported to deck classes */
.qb-tb-back {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  color: var(--ink-2);
}
.qb-tb-back:hover { background: var(--paper-3); }
.qb-tb-title {
  font-weight: 600;
  font-size: 14px;
}
.qb-tb-no {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  padding: 2px 8px;
  background: var(--paper-3);
  border-radius: 0;
}
.qb-tb-save {
  font-size: 11px;
  color: var(--good);
  display: flex; align-items: center; gap: 4px;
}
.qb-tb-actions {
  margin-left: auto;
  display: flex; gap: 6px;
  align-items: center;
}

.qb-content {
  padding: 24px;
  max-width: 1000px;
  margin: 0 auto;
}

.qb-section {
  margin-bottom: 28px;
}
.qb-section-label {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  color: var(--accent);
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
}
.qb-section-label::before {
  content: '';
  width: 16px; height: 1px; background: var(--accent);
}

.qb-header-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px;
}
.qb-field {
  display: flex; flex-direction: column; gap: 4px;
}
.qb-field-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.qb-field-value {
  font-size: 13px;
  color: var(--ink);
  border-bottom: 1px dashed var(--border);
  padding: 4px 0;
}
.qb-field-value.bold { font-weight: 600; }

.qb-group {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.qb-group-bar {
  background: var(--paper-3);
  padding: 10px 14px;
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border);
}
.qb-drag {
  color: var(--mid-2);
  cursor: grab;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}
.qb-group-icon {
  width: 22px; height: 22px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  border-radius: 0;
  display: grid; place-items: center;
  font-size: 12px;
}
.qb-group-name {
  font-weight: 600;
  font-size: 13px;
}
.qb-group-sub {
  margin-left: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.qb-group-menu {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 0;
  cursor: pointer;
  color: var(--mid);
}
.qb-group-menu:hover { background: var(--border); }

.qb-line {
  padding: 14px;
  border-bottom: 1px solid var(--border-2);
  display: grid;
  grid-template-columns: 14px 100px 1fr auto;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}
.qb-line:last-child { border-bottom: none; }
.qb-line:hover { background: var(--paper); }
.qb-line-drag {
  color: var(--mid-2);
  font-family: 'IBM Plex Mono', monospace;
  cursor: grab;
  padding-top: 6px;
}
.qb-line-thumbs {
  display: grid;
  grid-template-columns: 44px 44px;
  gap: 4px;
  width: 92px;
}
.qb-line-thumb {
  width: 44px; height: 44px;
  border-radius: 0;
  background: linear-gradient(135deg, var(--paper-3), var(--border));
  display: grid; place-items: center;
  position: relative;
  color: var(--mid-2);
}
.qb-line-thumb.more {
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--mid);
}
.qb-line-body {
  min-width: 0;
}
.qb-line-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-line-spec {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 8px;
}
.qb-line-options {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--paper-3);
  border-radius: 0;
  font-size: 12px;
}
.qb-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 0;
}
.qb-opt.checked { color: var(--ink); font-weight: 500; }
.qb-opt-box {
  width: 14px; height: 14px;
  border: 1.5px solid var(--mid-2);
  border-radius: 0;
  flex-shrink: 0;
  display: grid; place-items: center;
}
.qb-opt.checked .qb-opt-box {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 700;
}
.qb-opt-label { flex: 1; }
.qb-opt-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-line-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
}
.qb-line-meta .field {
  display: inline-flex; align-items: center; gap: 4px;
}
.qb-line-meta .field .label { color: var(--mid); font-size: 11px; }
.qb-line-meta .field .val {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: var(--ink);
}
.qb-line-right {
  text-align: right;
}
.qb-line-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.qb-line-actions {
  display: flex; gap: 4px;
  justify-content: flex-end;
  margin-top: 6px;
  color: var(--mid);
}
.qb-line-margin {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 4px;
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.qb-line-margin .lock { color: var(--mid-2); }

.qb-add-line {
  padding: 10px 14px;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  border-top: 1px dashed var(--border);
  background: var(--paper-2);
}
.qb-add-line:hover { background: var(--paper); color: var(--ink); }

.qb-add-group {
  margin: 8px 0 24px;
  padding: 14px;
  border: 1px dashed var(--border);
  border-radius: 0;
  text-align: center;
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
}
.qb-add-group:hover {
  background: var(--paper-2);
  border-color: var(--mid-2);
  color: var(--ink);
}

.qb-summary {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 18px 20px;
}
.qb-sum-row {
  display: flex; justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 13px;
}
.qb-sum-row.total {
  border-top: 2px solid var(--ink);
  margin-top: 8px;
  padding-top: 10px;
  font-size: 17px;
  font-weight: 600;
}
.qb-sum-row .label { color: var(--mid); }
.qb-sum-row.total .label { color: var(--ink); }
.qb-sum-row .val {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
}
.qb-sum-info {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  font-size: 11px;
  color: var(--mid);
}
.qb-sum-info-row {
  display: flex; justify-content: space-between;
  padding: 2px 0;
}
.qb-bahttext {
  margin-top: 14px;
  padding: 12px;
  background: var(--paper-3);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
}
.qb-bahttext .label {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  display: block;
  margin-bottom: 4px;
}

.qb-pay-table {
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.qb-pay-row {
  display: grid;
  grid-template-columns: 32px 1fr 80px 130px 1fr;
  padding: 10px 14px;
  align-items: center;
  font-size: 12px;
  border-bottom: 1px solid var(--border-2);
}
.qb-pay-row:last-child { border-bottom: none; }
.qb-pay-row.head {
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}
.qb-pay-no {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid);
  font-weight: 500;
}
.qb-pay-amount {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  color: var(--ink);
}
.qb-pay-pct {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink-2);
}

/* QB เอไอ panel right side */
.qb-ai {
  background: var(--paper);
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.qb-ai-head {
  padding: 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--ai-soft) 0%, var(--paper) 100%);
}
.qb-ai-head .icon {
  width: 26px; height: 26px;
  background: var(--ai); color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14px;
}
.qb-ai-head .title { font-weight: 600; font-size: 13px; color: var(--ai-deep); }

.qb-check {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-2);
  display: flex; gap: 10px;
}
.qb-check-icon {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--paper);
}
.qb-check-icon.err { background: var(--danger); }
.qb-check-icon.warn { background: var(--warn); }
.qb-check-icon.info { background: var(--mid); }
.qb-check-body { flex: 1; }
.qb-check-title {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-check-desc {
  font-size: 11px;
  color: var(--mid);
  margin-bottom: 6px;
}
.qb-check-actions {
  display: flex; gap: 4px;
}
.qb-check-actions button {
  font-size: 10px;
  padding: 2px 7px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 0;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.qb-check-actions button.primary {
  background: var(--ai);
  border-color: var(--ai);
  color: var(--paper);
}


.prefill-banner {
  background: linear-gradient(135deg, var(--accent-soft), rgba(200,80,31,0.04));
  border-bottom: 1px solid var(--accent);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.prefill-banner .ic {
  width: 36px; height: 36px;
  background: var(--accent);
  color: white;
  border-radius: 0;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.prefill-banner .body { flex: 1; }
.prefill-banner .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  margin-bottom: 2px;
}
.prefill-banner .src {
  font-size: 13px;
  color: var(--ink);
}
.prefill-banner .src strong { font-weight: 600; }
.prefill-banner .actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.prefill-banner .link {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent-deep);
  padding: 6px 14px;
  border-radius: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.prefill-banner .dismiss {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 20px;
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.prefill-banner .dismiss:hover { background: var(--paper-2); color: var(--ink); }

.qb-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 22px 24px;
}
.qb-sig-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.qb-sig-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 16px;
}
.qb-sig-line {
  border-bottom: 1px dashed var(--mid-2);
  height: 32px;
}
.qb-sig-name {
  font-size: 13px;
  color: var(--mid);
  margin-top: 8px;
  font-family: 'Fraunces', serif;
  font-style: italic;
}
.qb-sig-date {
  font-size: 12px;
  color: var(--mid);
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
}
.qb-sig-content {
  font-size: 13px;
  color: var(--ink-2);
}
.qb-sig-sales-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 4px;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.qb-sig-sales-meta {
  font-size: 12px;
  color: var(--mid);
  margin-bottom: 2px;
  font-family: 'IBM Plex Mono', monospace;
}

.qb-bank-info {
  background: var(--paper);
  border: 1px solid var(--border);
  padding: 14px 18px;
}
.qb-bank-row {
  display: flex;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
}
.qb-bank-row:last-of-type { border-bottom: none; }
.qb-bank-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  min-width: 110px;
  flex-shrink: 0;
  padding-top: 2px;
}
.qb-bank-val { color: var(--ink-2); flex: 1; }
.qb-bank-val strong { color: var(--ink); font-weight: 600; }
.qb-bank-edit {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.qb-bank-edit .link-btn {
  background: transparent;
  border: none;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}

.qb-section-hint {
  color: var(--mid);
  font-weight: 400;
  font-size: 11px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

.qb-sum-wht-toggle {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  font-size: 11px;
  color: var(--mid);
  cursor: pointer;
  text-align: center;
}
.qb-sum-wht-toggle:hover { background: var(--paper-3); }
.qb-sum-wht-toggle .hint { color: var(--mid-2); font-size: 10px; margin-left: 6px; }

.qb-pay-advanced {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  font-size: 12px;
  color: var(--mid);
  cursor: pointer;
}
.qb-pay-advanced:hover { background: var(--paper-3); }
.qb-pay-advanced .hint { color: var(--mid-2); font-size: 10px; margin-left: 6px; }

/* Status step with name label */
.qb-status-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.qb-status-name {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--mid);
  text-transform: uppercase;
  white-space: nowrap;
}
.qb-status-step.done .qb-status-name { color: var(--ink-2); }
.qb-status-step.active .qb-status-name { color: var(--accent); font-weight: 700; }

.qb-nav-count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-left: auto;
  font-weight: 400;
}
.qb-nav-item { display: flex; align-items: center; }

.qb-group-toggle-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--mid);
}
.qb-group-toggle-bar .ic {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--mid-2);
}
.qb-group-toggle-bar .label { flex: 1; color: var(--ink-2); font-weight: 500; }
.qb-group-toggle-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink);
  padding: 6px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
}
.qb-group-toggle-btn:hover { background: var(--paper); }
.qb-group-toggle-btn .hint { color: var(--mid-2); font-weight: 400; font-size: 10px; margin-left: 4px; }

/* Toolbar status flow · compact pills */
.qb-tb-status {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 14px;
  border-left: 1px solid var(--border);
  margin-left: 4px;
  height: 28px;
}
.qb-tb-step {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 3px 7px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.qb-tb-step.done {
  background: var(--good-soft);
  color: var(--good);
  border-color: var(--good);
}
.qb-tb-step.active {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
  font-weight: 700;
}
.qb-tb-step-line {
  width: 14px;
  height: 1px;
  background: var(--border);
}
.qb-tb-step-line.done { background: var(--good); }

/* Send section · first-send · ใน builder · inline · ไม่มี modal */
.qb-section.qb-send {
  background: linear-gradient(180deg, var(--paper-2) 0%, #FFF3E5 100%);
  border: 1px solid var(--accent);
}
.qb-section.qb-send .qb-section-label {
  color: var(--accent-deep);
}
.qb-send-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.qb-send-channels {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.qb-send-ch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 12px;
}
.qb-send-ch .ic {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-weight: 700;
  color: white;
  font-size: 11px;
  flex-shrink: 0;
}
.qb-send-ch .ic.email { background: var(--accent); font-family: 'Fraunces', serif; font-style: italic; }
.qb-send-ch .ic.line { background: #06C755; }
.qb-send-ch .ic.sms { background: var(--mid); }
.qb-send-ch .info { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.qb-send-ch .info .lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
}
.qb-send-ch .info .val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qb-send-ch .cb {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  flex-shrink: 0;
  background: var(--paper);
}
.qb-send-ch.on {
  border-color: var(--accent);
  background: #FFF7EE;
}
.qb-send-ch.on .cb {
  background: var(--accent);
  border-color: var(--accent);
  position: relative;
}
.qb-send-ch.on .cb::after {
  content: '✓';
  color: white;
  font-size: 11px;
  font-weight: 700;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  line-height: 1;
}

.qb-send-msg {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  border-radius: 0;
  box-sizing: border-box;
}
.qb-send-msg:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

.qb-send-ai {
  background: rgba(123,143,107,.12);
  border-left: 3px solid var(--ai);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-send-ai .ic {
  width: 22px; height: 22px;
  background: var(--ai);
  color: white;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 700;
  font-size: 12px;
  flex-shrink: 0;
}
.qb-send-ai .text strong { color: var(--ink); font-weight: 600; }

/* Pre-send check */
.qb-send-check {
  background: var(--paper);
  border: 1px solid var(--border-2);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qb-send-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.qb-send-check-row strong { color: var(--ink); font-weight: 600; }
.qb-send-check-row .ico { flex-shrink: 0; }

/* Foot */
.qb-send-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 4px;
}
.qb-send-summary {
  flex: 1;
  font-size: 12px;
  color: var(--mid);
  text-align: right;
}
.qb-send-summary strong { color: var(--ink-2); font-weight: 600; }
.qb-send-btn {
  background: var(--accent);
  color: white;
  border: none;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.qb-send-btn:hover { background: var(--accent-deep); }

.qb-tb-status-compact {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--accent);
  color: white;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.qb-tb-no strong { color: var(--ink); font-weight: 700; }

/* Right sidebar = Send composer (replaces qb-ai sanity check) */
.qb-send-sidebar {
  background: linear-gradient(180deg, #FFF7EE 0%, #FFEAD3 100%);
  border-left: 1px solid var(--accent-soft, #F5C9A5);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 0;
}
.qb-send-sidebar-head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(200, 80, 31, 0.18);
  background: rgba(255, 255, 255, 0.4);
}
.qb-send-sidebar-head .lbl {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-deep);
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.qb-send-sidebar-head .sub {
  font-size: 11px;
  color: var(--mid);
}

.qb-send-sidebar .qb-send-body {
  padding: 16px 18px;
  flex: 1;
}

/* Sidebar version · stack channels vertically */
.qb-send-sidebar .qb-send-channels {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.qb-send-sidebar .qb-send-ch {
  padding: 8px 10px;
  background: var(--paper);
  font-size: 11px;
}
.qb-send-sidebar .qb-send-ch .ic {
  width: 20px; height: 20px;
  font-size: 10px;
}

.qb-send-sidebar .qb-send-msg {
  min-height: 140px;
  font-size: 12px;
  padding: 10px 12px;
}

.qb-send-sidebar .qb-send-ai {
  padding: 8px 10px;
  font-size: 11px;
}
.qb-send-sidebar .qb-send-ai .ic {
  width: 18px; height: 18px;
  font-size: 10px;
}

.qb-send-sidebar .qb-send-check {
  padding: 10px 12px;
}
.qb-send-sidebar .qb-send-check-row {
  font-size: 11px;
}

.qb-send-sidebar .qb-send-foot {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}
.qb-send-sidebar .qb-send-foot .btn {
  flex: 1;
}
.qb-send-sidebar .qb-send-btn {
  flex: 2;
  padding: 9px 14px;
  font-size: 12px;
}

/* Customer picker section · top of document */
.qb-section.qb-customer .qb-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.qb-cust-actions {
  display: flex;
  gap: 6px;
}
.qb-cust-btn {
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink-2);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.qb-cust-btn:hover { background: var(--paper-3); border-color: var(--mid-2); }
.qb-cust-btn.primary {
  background: var(--accent-soft, #FFF7EE);
  border-color: var(--accent);
  color: var(--accent-deep);
}
.qb-cust-btn.primary:hover { background: #FFEAD3; }
.qb-cust-btn .arr { color: var(--mid); font-size: 8px; margin-left: 2px; }

.qb-cust-card {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--border-2);
}
.qb-cust-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--ink);
  color: white;
  display: grid;
  place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
}
.qb-cust-body { flex: 1; min-width: 0; }
.qb-cust-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  color: var(--ink);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.qb-cust-name strong { font-weight: 500; }
.qb-cust-name .branch {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
  font-weight: 400;
}
.qb-cust-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.qb-cust-field {
  display: flex;
  gap: 12px;
  font-size: 12px;
  align-items: baseline;
}
.qb-cust-field .k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mid);
  font-weight: 600;
  min-width: 70px;
  flex-shrink: 0;
}
.qb-cust-field .v { color: var(--ink-2); flex: 1; }
.qb-cust-field .v.mono { font-family: 'IBM Plex Mono', monospace; font-size: 11px; }

.qb-cust-rel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: rgba(46, 119, 84, 0.06);
  border-left: 3px solid var(--good);
  font-size: 12px;
  color: var(--ink-2);
}
.qb-cust-rel .ic { width: 14px; height: 14px; flex-shrink: 0; }
.qb-cust-rel strong { color: var(--ink); font-weight: 600; }

/* Empty state · ใช้ใน customer + items ของ quotation.create */
.qb-empty {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 22px;
  background: var(--paper);
  border: 1px dashed var(--mid-2);
}
.qb-empty .empty-icon { flex-shrink: 0; }
.qb-empty .empty-msg { flex: 1; min-width: 0; }
.qb-empty .empty-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.qb-empty .empty-sub {
  font-size: 12px;
  color: var(--mid);
  line-height: 1.5;
}
.qb-empty .empty-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.qb-cust-btn-big {
  background: var(--paper-2);
  border: 1px solid var(--border);
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-align: left;
  justify-content: flex-start;
}
.qb-cust-btn-big:hover { background: var(--paper-3); border-color: var(--mid-2); }
.qb-cust-btn-big.primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}
.qb-cust-btn-big.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* Pre-send check · err level (additional) */
.qb-send-check-row.err strong { color: var(--accent); }
.qb-send-check-row.info { color: var(--mid); }

/* ── Revision · warning banner + diff markers ────── */
.qb-rev-warn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: linear-gradient(90deg, #FFF7E0, #FFEAB3);
  border: 1px solid #D4A017;
  border-left: 4px solid var(--warn, #D4A017);
  margin-bottom: 16px;
}
.qb-rev-warn > .ico {
  width: 22px;
  height: 22px;
  color: #B8860B;
  flex-shrink: 0;
}
.qb-rev-warn .msg { flex: 1; min-width: 0; }
.qb-rev-warn .t {
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-rev-warn .t strong { color: var(--accent-deep); font-weight: 700; }
.qb-rev-warn .sub {
  font-size: 11px;
  color: var(--mid);
}
.qb-rev-back {
  background: transparent;
  border: 1px solid var(--mid-2);
  padding: 6px 11px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  white-space: nowrap;
}
.qb-rev-back:hover { background: var(--paper); }

/* Modification markers on line items */
.qb-mod-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 6px;
  vertical-align: 1px;
}
.qb-mod-dot.new { background: var(--good); }
.qb-mod-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: rgba(200, 80, 31, 0.12);
  color: var(--accent-deep);
  margin-left: 8px;
  vertical-align: 1px;
}
.qb-mod-tag.new {
  background: rgba(46, 119, 84, 0.12);
  color: var(--good);
}

/* Diff summary in sidebar */
.qb-diff-summary {
  background: var(--paper-2);
  border: 1px solid #D4A017;
  border-left: 3px solid #D4A017;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.qb-diff-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #B8860B;
  margin-bottom: 4px;
}
.qb-diff-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-2);
}
.qb-diff-row strong { color: var(--ink); font-weight: 600; }
.qb-diff-row .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
}
.qb-diff-row.add .dot { background: var(--good); }
.qb-diff-row.total {
  padding-top: 4px;
  border-top: 1px solid var(--border-2);
  margin-top: 2px;
  font-weight: 600;
}
.qb-diff-row.total s { color: var(--mid-2); text-decoration: line-through; }
.qb-diff-row.total strong { color: var(--accent); font-weight: 700; }

/* Builder host page constrained to viewport */
.app-content.builder-content { padding: 0; overflow: hidden; height: 100vh; display: flex; flex-direction: column; min-height: 0; }
.app:has(.app-content.builder-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.builder-content) .app-sidebar { overflow-y: auto; }

/* Builder section title · plain Thai · left-aligned · no italic */
.qb-section-label {
  font-family: 'IBM Plex Sans Thai', sans-serif !important;
  font-style: normal !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  justify-content: space-between;
}
.qb-section-label::before { display: none !important; }

/* Builder text inputs · flat cream pe-input pattern */
.qb-field-input {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  outline: none;
}
.qb-field-input.mono { font-family: 'IBM Plex Mono', monospace; }
.qb-field-input::placeholder { color: var(--mid-2); }
.qb-field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}


/* ============================================================
 * PL · Product list — verbatim from design product.list frame
 * ============================================================ */
.pl-thumb {
  width: 44px; height: 44px;
  border-radius: 0;
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pl-thumb .count {
  position: absolute;
  bottom: 2px; right: 2px;
  background: rgba(0,0,0,.55);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  padding: 1px 4px;
  border-radius: 0;
}
.pl-row {
  display: grid;
  grid-template-columns: 32px 56px 1fr 120px 100px 110px 90px 100px 80px 40px;
  padding: 12px 28px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  font-size: 13px;
  gap: 12px;
}
.pl-row.head {
  background: var(--paper-2);
  position: sticky; top: 0; z-index: 2;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 28px;
}
.pl-row:not(.head):hover { background: var(--paper-2); cursor: pointer; }
.pl-row.selected { background: var(--accent-soft); }
.pl-info { min-width: 0; }
.pl-info .name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-info .sku {
  font-size: 11px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  margin-top: 2px;
}
.pl-cat-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 0;
  background: var(--paper-3);
  color: var(--ink-2);
  display: inline-block;
}
.pl-variants {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}
.pl-variants .sub {
  display: block;
  font-size: 10px;
  color: var(--mid);
  font-family: inherit;
}
.pl-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink-2);
}
.pl-price .from {
  display: block;
  font-size: 9px;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pl-stock-bar {
  display: flex; flex-direction: column; gap: 3px;
}
.pl-stock-bar .v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 600;
}
.pl-stock-bar .v.ok { color: var(--good); }
.pl-stock-bar .v.low { color: var(--warn); }
.pl-stock-bar .v.out { color: var(--danger); }
.pl-stock-bar .label {
  font-size: 10px;
  color: var(--mid);
}
.pl-vis {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 0;
}
.pl-vis.live { background: var(--good-soft); color: var(--good); }
.pl-vis.internal { background: var(--paper-3); color: var(--mid); }
.pl-vis.draft { background: var(--warn-soft); color: var(--warn); }
.pl-sales {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.pl-sales .trend {
  font-size: 10px;
  color: var(--good);
}
.pl-sales .trend.down { color: var(--danger); }
.pl-view-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pl-view-toggle .btn {
  padding: 6px 10px;
  background: var(--paper);
  color: var(--mid);
  font-size: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  border-right: 1px solid var(--border);
  cursor: pointer;
}
.pl-view-toggle .btn:last-child { border-right: none; }
.pl-view-toggle .btn.active { background: var(--paper-3); color: var(--ink); font-weight: 600; }

/* Catalog list reuses ql-page shell, locked to viewport */
.app-content.catalog-content { padding: 0; overflow: hidden; height: 100vh; }
.app-content.catalog-content .ql-page { height: 100vh; }
.app:has(.app-content.catalog-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.catalog-content) .app-sidebar { overflow-y: auto; }


/* ============================================================
 * PE · Product editor — verbatim from design product.edit frame
 * ============================================================ */
.pe-page {
  flex: 1;
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.pe-crumb {
  padding: 14px 28px 0;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  color: var(--mid);
  background: var(--paper);
}
.pe-crumb a { color: var(--mid); text-decoration: none; }
.pe-crumb .cur { color: var(--ink); font-weight: 500; }

.pe-hero {
  padding: 14px 28px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; gap: 16px;
  align-items: center;
  background: var(--paper);
}
.pe-hero-thumb {
  width: 72px; height: 72px;
  border-radius: 0;
  background: linear-gradient(135deg, #8B7355, #4A3C2C);
  display: grid; place-items: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pe-hero-thumb .badge {
  position: absolute;
  bottom: 4px; right: 4px;
  background: rgba(0,0,0,.5);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 0;
}
.pe-hero-info { flex: 1; min-width: 0; }
.pe-hero-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--mid);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.pe-hero-name {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  display: flex; align-items: baseline; gap: 8px;
}
.pe-hero-name .editable {
  border-bottom: 1px dashed transparent;
  cursor: text;
}
.pe-hero-name .editable:hover { border-bottom-color: var(--mid-2); }
.pe-hero-meta {
  font-size: 11px;
  color: var(--mid);
  display: flex; gap: 14px;
}
.pe-hero-meta .sep { color: var(--mid-2); }

.pe-status-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 0;
  display: inline-flex; align-items: center; gap: 5px;
}
.pe-status-pill .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.pe-status-pill.live {
  background: var(--good-soft);
  color: var(--good);
}
.pe-status-pill.live .dot { background: var(--good); }
.pe-status-pill.draft {
  background: var(--paper-3);
  color: var(--mid);
}
.pe-status-pill.draft .dot { background: var(--mid-2); }

.pe-hero-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}

.pe-body {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 0;
}
.pe-main {
  padding: 20px 28px 100px;
}
.pe-side {
  background: var(--paper-2);
  border-left: 1px solid var(--border);
  padding: 20px;
  overflow-y: auto;
}

/* เอไอ import banner */
.pe-ai-import {
  background: var(--ai-soft);
  border: 1px dashed var(--ai);
  border-radius: 0;
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex; gap: 14px;
  align-items: center;
}
.pe-ai-import .ic {
  width: 36px; height: 36px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 18px;
  flex-shrink: 0;
}
.pe-ai-import .body { flex: 1; min-width: 0; }
.pe-ai-import .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ai-deep);
  margin-bottom: 2px;
}
.pe-ai-import .desc {
  font-size: 12px;
  color: var(--ai-deep);
  opacity: 0.85;
  line-height: 1.5;
}
.pe-ai-import .actions { display: flex; gap: 6px; flex-shrink: 0; }
.pe-ai-import .ai-btn {
  background: var(--ai);
  color: var(--paper);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
}
.pe-ai-import .ai-btn.ghost {
  background: transparent;
  color: var(--ai-deep);
  border: 1px solid var(--ai);
}

/* Form sections */
.pe-section {
  margin-bottom: 28px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--paper-2);
  overflow: hidden;
}
.pe-section-head {
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.pe-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.pe-section-title .icon {
  color: var(--mid);
  width: 18px; height: 18px;
}
.pe-section-title .num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--mid);
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 0;
  font-weight: 500;
}
.pe-section-actions {
  display: flex; gap: 6px;
  color: var(--mid);
  font-size: 12px;
  align-items: center;
}
.pe-section-actions .link {
  color: var(--accent);
  cursor: pointer;
}
.pe-section-body {
  padding: 18px;
  background: var(--paper);
}

/* Fields */
.pe-field-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.pe-field-row.cols-2 { grid-template-columns: 1fr 1fr; }
.pe-field-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.pe-field-row.cols-1-2 { grid-template-columns: 1fr 2fr; }
.pe-field-row:last-child { margin-bottom: 0; }

.pe-field { display: flex; flex-direction: column; gap: 5px; }
.pe-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 500;
}
.pe-label .req { color: var(--accent); }
.pe-label .hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--mid);
  font-weight: 400;
}
.pe-input {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  width: 100%;
  outline: none;
}
.pe-input.focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.pe-input.mono { font-family: 'IBM Plex Mono', monospace; }
.pe-input::placeholder { color: var(--mid-2); }
.pe-textarea {
  min-height: 100px;
  resize: vertical;
  line-height: 1.5;
}
.pe-help {
  font-size: 10px;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.03em;
  margin-top: 2px;
}

.pe-select {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer;
}
.pe-select .chev { color: var(--mid); width: 14px; height: 14px; }

.pe-chip-input {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 10px;
  display: flex; gap: 5px; flex-wrap: wrap;
  align-items: center;
  min-height: 38px;
}
.pe-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--paper-3);
  color: var(--ink-2);
  font-size: 11px;
  padding: 3px 4px 3px 9px;
  border-radius: 0;
}
.pe-chip .x {
  width: 14px; height: 14px;
  display: grid; place-items: center;
  color: var(--mid);
  cursor: pointer;
}
.pe-chip .x:hover { color: var(--danger); }
.pe-chip-add {
  background: transparent;
  border: none;
  color: var(--mid);
  font-size: 12px;
  font-family: inherit;
  padding: 3px;
}

/* Gallery */
.pe-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.pe-gallery-slot {
  aspect-ratio: 1;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: grid; place-items: center;
}
.pe-gallery-slot.has-image {
  background: var(--paper-3);
}
.pe-gallery-slot.empty {
  background: var(--paper-2);
  border: 2px dashed var(--border);
  color: var(--mid);
  font-size: 11px;
  flex-direction: column;
}
.pe-gallery-slot.empty:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
.pe-gallery-slot.empty svg { margin-bottom: 6px; }
.pe-gallery-slot.empty .text {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-align: center;
}
.pe-gallery-slot .primary-badge {
  position: absolute;
  top: 6px; left: 6px;
  background: var(--accent);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  padding: 2px 6px;
  border-radius: 0;
  font-weight: 600;
  z-index: 1;
}
.pe-gallery-slot .actions {
  position: absolute;
  bottom: 6px; right: 6px;
  display: flex; gap: 3px;
  z-index: 1;
}
.pe-gallery-slot .actions > div {
  background: rgba(0,0,0,.55);
  color: var(--paper);
  width: 22px; height: 22px;
  border-radius: 0;
  display: grid; place-items: center;
  backdrop-filter: blur(3px);
}
.pe-gallery-slot .order {
  position: absolute;
  top: 6px; right: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  background: rgba(0,0,0,.55);
  color: var(--paper);
  padding: 2px 6px;
  border-radius: 0;
  z-index: 1;
}
.pe-gallery-warning {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--warn-soft);
  color: var(--warn);
  border-radius: 0;
  font-size: 11px;
  display: flex; align-items: center; gap: 8px;
}

/* Variant matrix */
.pe-variant-meta {
  display: flex; gap: 16px;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
  align-items: center;
}
.pe-variant-meta .item {
  display: flex; align-items: baseline; gap: 5px;
  font-size: 11px;
}
.pe-variant-meta .item .l { color: var(--mid); }
.pe-variant-meta .item .v {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--ink);
  font-weight: 600;
  font-size: 12px;
}

.pe-variant-axes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}
.pe-variant-axis {
  padding: 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  border-radius: 0;
}
.pe-variant-axis-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.pe-variant-axis-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.pe-variant-axis-edit {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
}
.pe-variant-values {
  display: flex; gap: 5px; flex-wrap: wrap;
}
.pe-variant-value {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  font-size: 11px;
  color: var(--ink-2);
}
.pe-variant-value .swatch {
  width: 12px; height: 12px;
  border-radius: 0;
}

.pe-matrix-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--paper);
}
.pe-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pe-matrix th,
.pe-matrix td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--border-2);
  border-right: 1px solid var(--border-2);
}
.pe-matrix th:last-child,
.pe-matrix td:last-child { border-right: none; }
.pe-matrix tr:last-child td { border-bottom: none; }
.pe-matrix th {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
  background: var(--paper-2);
}
.pe-matrix .axis-l {
  font-weight: 600;
  color: var(--ink);
  background: var(--paper-2);
  white-space: nowrap;
}
.pe-matrix .axis-l .swatch {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 0;
  vertical-align: middle;
  margin-right: 6px;
}
.pe-matrix-sku {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
}
.pe-matrix-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink);
  font-weight: 600;
}
.pe-matrix-stock {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--good);
}
.pe-matrix-stock.low { color: var(--warn); }
.pe-matrix-stock.out { color: var(--danger); }
.pe-matrix-stock.custom { color: var(--mid); font-style: italic; }
.pe-matrix .cell-grid {
  display: flex; flex-direction: column; gap: 2px;
}

/* Pricing tiers */
.pe-tier-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  margin-bottom: 18px;
}
.pe-tier-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 40px;
  gap: 10px;
  padding: 12px 14px;
  align-items: center;
  border-bottom: 1px solid var(--border-2);
  background: var(--paper);
}
.pe-tier-row:last-child { border-bottom: none; }
.pe-tier-row.head {
  background: var(--paper-2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
}
.pe-tier-qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.pe-tier-discount {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}
.pe-tier-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}
.pe-tier-actions {
  color: var(--mid);
  display: flex; gap: 4px;
  justify-content: flex-end;
}

.pe-addon-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pe-addon-row {
  display: grid;
  grid-template-columns: 24px 1fr 100px 40px;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  align-items: center;
}
.pe-addon-handle {
  color: var(--mid-2);
  cursor: grab;
}
.pe-addon-info .name { font-size: 12px; font-weight: 500; color: var(--ink); }
.pe-addon-info .desc { font-size: 11px; color: var(--mid); }
.pe-addon-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--ink);
  font-weight: 600;
  text-align: right;
}

/* Spec list */
.pe-spec-list {
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
}
.pe-spec-row {
  display: grid;
  grid-template-columns: 24px 200px 1fr 40px;
  gap: 10px;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  align-items: center;
}
.pe-spec-row:last-child { border-bottom: none; }
.pe-spec-row.add { background: var(--paper-2); color: var(--mid); }
.pe-spec-handle { color: var(--mid-2); cursor: grab; }
.pe-spec-key {
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.pe-spec-value {
  font-size: 12px;
  color: var(--ink);
}
.pe-spec-value.mono { font-family: 'IBM Plex Mono', monospace; }
.pe-spec-actions { color: var(--mid); text-align: right; }

/* Description editor */
.pe-rich-toolbar {
  display: flex; gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.pe-rich-toolbar > div {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 0;
  color: var(--mid);
  font-size: 12px;
  cursor: pointer;
}
.pe-rich-toolbar > div:hover { background: var(--paper-3); color: var(--ink); }
.pe-rich-toolbar > div.active { background: var(--ink); color: var(--paper); }
.pe-rich-toolbar .divider {
  width: 1px; height: 20px;
  background: var(--border);
  margin: 4px 4px;
  cursor: default;
}
.pe-rich-content {
  padding: 14px 18px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.65;
  min-height: 140px;
  background: var(--paper);
}
.pe-rich-content p { margin: 0 0 10px; }
.pe-rich-content ul { margin: 8px 0; padding-left: 20px; }
.pe-rich-content li { margin-bottom: 4px; }

/* Right sidebar cards */
.pe-side-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 14px;
  overflow: hidden;
}
.pe-side-card-head {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-2);
  display: flex; justify-content: space-between; align-items: center;
}
.pe-side-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  display: flex; align-items: center; gap: 6px;
}
.pe-side-card-title .ico { color: var(--mid); }
.pe-side-card-action {
  font-size: 10px;
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.pe-side-card-body {
  padding: 12px 14px;
}

.pe-radio-list {
  display: flex; flex-direction: column; gap: 8px;
}
.pe-radio-row {
  display: flex; gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  padding: 7px 0;
}
.pe-radio {
  width: 16px; height: 16px;
  border: 1.5px solid var(--mid-2);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  position: relative;
}
.pe-radio.checked { border-color: var(--accent); }
.pe-radio.checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--accent);
  border-radius: 50%;
}
.pe-radio-body { flex: 1; min-width: 0; }
.pe-radio-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.pe-radio-desc {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.4;
  margin-top: 2px;
}

.pe-toggle-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
}
.pe-toggle-row + .pe-toggle-row { border-top: 1px solid var(--border-2); }
.pe-toggle-row .text {
  flex: 1;
}
.pe-toggle-row .text .name {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.pe-toggle-row .text .desc {
  font-size: 10px;
  color: var(--mid);
  line-height: 1.4;
  margin-top: 1px;
}
.pe-toggle {
  width: 32px; height: 18px;
  border-radius: 0;
  background: var(--paper-3);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
}
.pe-toggle::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: left .15s;
}
.pe-toggle.on {
  background: var(--accent);
}
.pe-toggle.on::after { left: 16px; }

.pe-stock-input {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.pe-stock-block {
  padding: 10px;
  background: var(--paper-2);
  border-radius: 0;
  text-align: center;
}
.pe-stock-block .l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 3px;
}
.pe-stock-block .v {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 16px;
  color: var(--ink);
  font-weight: 600;
}

.pe-ai-side {
  background: var(--ai-soft);
  border: 1px solid var(--ai);
}
.pe-ai-side .pe-side-card-head { border-bottom-color: rgba(123,143,107,.25); }
.pe-ai-side .pe-side-card-title { color: var(--ai-deep); }
.pe-ai-side .pe-side-card-title .ai-mark {
  width: 18px; height: 18px;
  background: var(--ai);
  color: var(--paper);
  border-radius: 0;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 11px;
  font-weight: 500;
}
.pe-ai-suggestion {
  padding: 8px 0;
  border-bottom: 1px solid rgba(123,143,107,.2);
  display: flex; gap: 8px;
  font-size: 12px;
  color: var(--ai-deep);
  line-height: 1.5;
}
.pe-ai-suggestion:last-child { border-bottom: none; }
.pe-ai-suggestion strong { font-weight: 600; }
.pe-ai-suggestion .bullet {
  width: 4px; height: 4px;
  background: var(--ai);
  border-radius: 50%;
  margin-top: 8px;
  flex-shrink: 0;
}
.pe-ai-suggestion .accept {
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: 0.05em;
  color: var(--ai-deep);
  background: var(--paper-2);
  padding: 2px 8px;
  border-radius: 0;
  margin-top: 6px;
  display: inline-block;
  align-self: flex-start;
  cursor: pointer;
}

.pe-url-preview {
  background: var(--paper-2);
  padding: 8px 10px;
  border-radius: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  margin-top: 6px;
}
.pe-url-preview .domain { color: var(--mid-2); }
.pe-url-preview .slug { color: var(--ink); font-weight: 500; }

/* Bottom action bar (sticky) */
.pe-actions-bar {
  position: absolute;
  bottom: 0; left: 220px; right: 0;
  background: var(--paper);
  border-top: 1px solid var(--border);
  padding: 12px 28px;
  display: flex; align-items: center; gap: 10px;
  z-index: 5;
  box-shadow: 0 -2px 12px rgba(27,42,58,.06);
}
.pe-actions-bar .info {
  font-size: 11px;
  color: var(--mid);
  display: flex; align-items: center; gap: 8px;
}
.pe-actions-bar .info .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warn);
}
.pe-actions-bar .right {
  margin-left: auto;
  display: flex; gap: 8px;
}

/* Product editor host page · scoped viewport lock */
.app-content.peditor-content { padding: 0; overflow: hidden; height: 100vh; }
.app-content.peditor-content .pe-page { height: 100vh; overflow-y: auto; }
.app:has(.app-content.peditor-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.peditor-content) .app-sidebar { overflow-y: auto; }

/* Category management host page · scoped viewport lock (deck frame g.3) */
.app-content.cat-content { padding: 0; overflow: hidden; height: 100vh; display: flex; }
.app-content.cat-content .cat-page { height: 100vh; }
.app:has(.app-content.cat-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.cat-content) .app-sidebar { overflow-y: auto; }

.pe-select-input {
  background-color: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 36px 9px 11px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  width: 100%;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  /* SVG chevron data-uri — matches deck's #i-chevron stroke ("m6 9 6 6 6-6") */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a89d8a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-size: 14px 14px;
  background-repeat: no-repeat;
}
.pe-select-input:focus { border-color: var(--accent); }
.pe-select-input::-ms-expand { display: none; }
.pe-quick-meta {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--border-2);
}
.pe-quick-meta:last-child { border-bottom: 0; }
.pe-quick-meta .k { color: var(--mid); }
.pe-quick-meta .v { color: var(--ink); font-weight: 600; }
/* ============================================================
   CE · CUSTOMER EDIT FORM
   ============================================================ */

/* Toolbar · top header 64px */
.ce-toolbar {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--border);
}

.ce-back {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
}

.ce-back:hover {
  background: var(--paper-3);
}

.ce-crumb {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  color: var(--ink);
  flex: 1;
}

.ce-crumb .seg {
  color: var(--mid);
}

.ce-crumb strong {
  font-weight: 700;
}

.ce-save-status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ce-save-status::before {
  content: "●";
  color: var(--good);
  font-size: 8px;
}

/* Body + grid */
.ce-body {
  flex: 1;
  overflow-y: auto;
  background: var(--paper);
}

.ce-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 0;
  min-height: 100%;
}

.ce-col-main {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-right: 1px solid var(--border);
}

.ce-col-side {
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  background: var(--paper-2);
}

/* Section */
.ce-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ce-section-head {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.ce-section-head-side {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.ce-section-head-side > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ce-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.ce-section-sub {
  font-size: 11.5px;
  color: var(--mid);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

/* Type cards grid */
.ce-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.ce-type-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  cursor: pointer;
  position: relative;
  border-radius: 0;
}

.ce-type-card:hover {
  background: var(--paper-3);
}

.ce-type-card.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  border-width: 2px;
  padding: 9px 11px;
}

.ce-type-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  margin-bottom: 2px;
}

.ce-type-icon.gov {
  background: #5A6B7D;
}

.ce-type-icon.edu {
  background: #7B8F6B;
}

.ce-type-icon.med {
  background: #B8533F;
}

.ce-type-card.active .ce-type-icon {
  background: var(--accent);
}

.ce-type-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.ce-type-sub {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10.5px;
  color: var(--mid);
  line-height: 1.3;
}

/* Form fields grid */
.ce-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}

.ce-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.ce-field.ce-col-2 {
  grid-column: span 1;
}

.ce-field.ce-col-full {
  grid-column: span 2;
}

.ce-col-side .ce-fields .ce-field.ce-col-full {
  grid-column: span 2;
}

.ce-col-side .ce-fields {
  grid-template-columns: 1fr;
}

.ce-col-side .ce-fields .ce-field {
  grid-column: span 1 !important;
}

.ce-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ce-label .req {
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
}

.ce-input,
.ce-textarea,
.ce-select {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.ce-input.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
}

.ce-textarea {
  min-height: 64px;
  resize: vertical;
  line-height: 1.5;
}

.ce-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
  cursor: pointer;
}

.ce-input:focus,
.ce-textarea:focus,
.ce-select:focus {
  border-color: var(--accent);
}

/* Logo upload */
.ce-logo-up {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ce-logo-preview {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.ce-logo-btn {
  flex: 1;
  height: 40px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  cursor: pointer;
  border-radius: 0;
}

.ce-logo-btn:hover {
  background: var(--paper-3);
}

/* Radio chips */
.ce-radio-row {
  display: flex;
  gap: 6px;
}

.ce-radio {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
}

.ce-radio input {
  display: none;
}

.ce-radio.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Checkbox row */
.ce-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  padding: 8px 0;
}

.ce-checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

/* Contact section · side */
.ce-add-contact {
  padding: 6px 10px;
  background: var(--paper);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  font-weight: 600;
  flex-shrink: 0;
}

.ce-add-contact:hover {
  background: var(--paper-3);
}

.ce-contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ce-contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 0;
}

.ce-contact.primary {
  border-left: 3px solid var(--accent);
}

.ce-contact-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.ce-contact-avatar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.ce-contact.primary .ce-contact-avatar {
  background: var(--accent);
}

.ce-contact-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ce-contact-name,
.ce-contact-role {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  color: var(--ink);
  border-radius: 0;
  outline: none;
  box-sizing: border-box;
}

.ce-contact-name {
  font-size: 13.5px;
  font-weight: 600;
  margin-left: -8px;
}

.ce-contact-role {
  font-size: 11.5px;
  color: var(--mid);
  margin-left: -8px;
}

.ce-contact-name:hover,
.ce-contact-role:hover,
.ce-contact-name:focus,
.ce-contact-role:focus {
  background: var(--input-bg);
  border-color: var(--border);
}

.ce-contact-star {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  font-size: 16px;
  color: var(--mid);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}

.ce-contact-star.on {
  color: var(--accent);
}

.ce-contact-fields {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ce-input-sm {
  padding: 7px 10px;
  font-size: 12px;
}

.ce-contact-remove {
  align-self: flex-end;
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--danger);
  cursor: pointer;
  padding: 2px 0;
  border-radius: 0;
}

.ce-contact-remove:hover {
  text-decoration: underline;
}

/* Tags input */
.ce-tags-input {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  border-radius: 0;
  align-items: center;
  min-height: 40px;
}

.ce-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  border-radius: 0;
  font-weight: 500;
}

.ce-tag button {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
  line-height: 1;
  border-radius: 0;
}

.ce-tag button:hover {
  color: var(--paper);
}

.ce-tag-input {
  flex: 1;
  min-width: 80px;
  border: none;
  background: transparent;
  padding: 2px 4px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--ink);
  outline: none;
}

/* Sticky action bar 64px */
.ce-actions-bar {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  background: var(--paper);
  border-top: 1px solid var(--border);
}

.ce-action-delete {
  height: 40px;
  padding: 0 16px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--danger);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0;
}

.ce-action-delete:hover {
  background: var(--danger-soft);
  border-color: var(--danger);
}

.ce-actions-right {
  margin-left: auto;
  display: flex;
  gap: 8px;
}

.ce-actions-right .btn {
  height: 40px;
  padding: 0 18px;
}


/* === ce-form · MVP single-column layout === */
.ce-form {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.ce-type-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ce-field-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 4px;
}


/* === ce-label-hint · subtle adaptive hint === */
.ce-label-hint {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 4px;
}

.ce-section-cond {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: 0;
  margin-left: 6px;
}


/* ── Django runtime · customer edit shell (design #customer.edit) ── */
.app-content.ce-content {
  padding: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app:has(.app-content.ce-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.ce-content) .app-sidebar { overflow-y: auto; }

/* ── Django runtime · customer list shell (design #customer.list) ── */
.app-content.cl-content {
  padding: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app:has(.app-content.cl-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.cl-content) .app-sidebar { overflow-y: auto; }
a.cl-row { text-decoration: none; color: inherit; }

/* ── design #customer.list · cl-search (re-extracted rev-20) ── */
.cl-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  flex: 1;
}
.cl-search svg {
  width: 16px;
  height: 16px;
  color: var(--mid);
  flex-shrink: 0;
}
.cl-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  color: var(--ink);
}
.cl-search input::placeholder { color: var(--mid-2); }
.cl-search kbd {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  background: var(--paper-3);
  padding: 2px 6px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* ============================================ */
/* customer.detail · MVP info-first redesign    */
/* ============================================ */
.cd-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  overflow: hidden;
}
.cd-head {
  flex-shrink: 0;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border);
  padding: 14px 28px 16px;
}
.cd-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
  margin-bottom: 8px;
}
.cd-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.cd-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 4px;
}
.cd-meta-line {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
}
.cd-meta-line .dot {
  margin: 0 8px;
  color: var(--mid-2);
}
.cd-meta-line strong { color: var(--ink-2); font-weight: 600; }
.cd-actions { display: flex; gap: 8px; }

.cd-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 28px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
}

/* Card style · shared */
.cd-card {
  background: var(--paper-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.cd-card-h {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px;
  background: var(--paper-3);
  border-bottom: 1px solid var(--border);
}
.cd-card-h .t {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.cd-card-h .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cd-card-h .count strong { color: var(--ink-2); font-weight: 700; }
.cd-card-b { padding: 12px 14px; }

/* Info card (company info) */
.cd-info-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--border-2);
}
.cd-info-row:last-child { border-bottom: none; }
.cd-info-row:first-child { padding-top: 0; }
.cd-info-row .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
}
.cd-info-row .val {
  font-size: 13px;
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.cd-info-row .val.mono { font-family: 'IBM Plex Mono', monospace; font-size: 13px; }
.cd-info-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.cd-info-tag {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  color: var(--ink-2);
}
.cd-info-tag.good { background: rgba(123, 143, 107, 0.15); border-color: var(--ai); color: var(--ai); }
.cd-info-note {
  font-style: italic;
  font-size: 12px;
  color: var(--mid);
  line-height: 1.4;
}

/* Contact list */
.cd-contact-row {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  transition: background 0.1s;
}
.cd-contact-row:hover { background: var(--paper-3); }
.cd-contact-row:last-child { border-bottom: none; }
.cd-contact-row.primary {
  background: rgba(200, 80, 31, 0.04);
  border-left: 3px solid var(--accent);
}
.cd-contact-row .nm {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.cd-contact-row .nm .star { color: var(--accent); font-size: 12px; }
.cd-contact-row .role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cd-contact-row .contact-lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--ink-2);
}
.cd-contact-row .contact-line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cd-contact-row .contact-line svg { width: 12px; height: 12px; color: var(--mid); }
.cd-contact-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px;
  font-size: 12px;
  color: var(--mid);
  background: var(--paper-3);
  cursor: pointer;
  border-top: 1px dashed var(--border);
}
.cd-contact-add:hover { background: var(--paper); color: var(--accent); }

/* Deal row */
.cd-deal-row {
  display: block;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
}
.cd-deal-row:hover { background: var(--paper-3); }
.cd-deal-row:last-child { border-bottom: none; }
.cd-deal-row .top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.cd-deal-row .qt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.cd-deal-row .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
}
.cd-deal-row .meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--mid);
}
.cd-deal-row .badge {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  padding: 1px 6px;
  background: var(--paper-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.cd-deal-row .badge.new { background: var(--accent); color: var(--paper); }
.cd-deal-row .badge.warn { background: #C99A3B; color: var(--paper); }
.cd-deal-row .badge.won { background: var(--ai); color: var(--paper); }
.cd-deal-row .age { color: var(--mid); font-size: 11px; }

/* Activity timeline */
.cd-act-day {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  padding: 10px 14px 6px;
  background: var(--paper-3);
}
.cd-act-day:not(:first-child) { border-top: 1px solid var(--border-2); }
.cd-act-event {
  padding: 8px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: start;
  border-bottom: 1px solid var(--border-2);
}
.cd-act-event:last-child { border-bottom: none; }
.cd-act-icon {
  width: 18px;
  height: 18px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.cd-act-icon svg { width: 10px; height: 10px; color: var(--ink-2); }
.cd-act-text {
  font-size: 12px;
  color: var(--ink);
  line-height: 1.4;
}
.cd-act-text strong { color: var(--ink); font-weight: 700; }
.cd-act-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
}
.cd-act-more {
  text-align: center;
  padding: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--mid);
  cursor: pointer;
}
.cd-act-more:hover { color: var(--accent); }

/* cd-actions · sticky 64px footer (shared-footer rule in deck; standalone here) */
.cd-actions {
  height: 64px;
  min-height: 64px;
  max-height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
}
.cd-actions button { height: 40px; padding: 0 16px; border-radius: 0; }
/* Django runtime · customer detail shell */
.app-content.cd-content {
  padding: 0;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.app:has(.app-content.cd-content) { height: 100vh; min-height: 0; overflow: hidden; }
.app:has(.app-content.cd-content) .app-sidebar { overflow-y: auto; }

/* ── design #home.line v2 · chat-bubble timeline (re-extracted rev-20) ── */
/* === home.line v2 · conversation style timeline + sticky filters === */

/* Col 1 · filters at bottom · sticky */
.h-list-foot {
  border-top: 1px solid var(--border);
  background: var(--paper);
  padding: 12px 14px;
  flex-shrink: 0;
}
.h-list-foot .h-filters {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 0;
}

/* Col 2 · conversation bubbles · LEFT customer · RIGHT sales/system/เอไอ */
.h-tl-bubble {
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  max-width: 75%;
}

.h-tl-bubble.customer { align-items: flex-start; margin-right: auto; }
.h-tl-bubble.sales,
.h-tl-bubble.ai      { align-items: flex-end;   margin-left: auto;  }

.h-tl-bub-content {
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.5;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  word-wrap: break-word;
  width: fit-content;
  max-width: 100%;
}

.h-tl-bubble.customer .h-tl-bub-content {
  background: var(--paper);
  color: var(--ink);
}

.h-tl-bubble.sales .h-tl-bub-content {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.h-tl-bubble.ai .h-tl-bub-content {
  background: var(--ai-soft);
  border: 1px solid var(--ai);
  color: var(--ink);
  padding: 10px 12px;
  min-width: 240px;
}

.h-tl-bubble.event .h-tl-bub-content {
  background: transparent;
  border: none;
  border-left: 2px solid var(--mid-2);
  padding: 4px 10px;
  font-size: 11.5px;
  color: var(--mid);
  font-style: normal;
}

.h-tl-bubble.event.customer .h-tl-bub-content {
  border-left-color: var(--mid-2);
}

.h-tl-bubble.event.sales .h-tl-bub-content {
  border-left-color: var(--accent);
  border-right: 2px solid var(--accent);
  border-left: none;
  padding: 4px 10px 4px 10px;
}

.h-tl-bubble.photo .h-tl-bub-content {
  background: var(--paper-3);
  border-style: dashed;
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.h-tl-bub-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid-2);
  margin-top: 3px;
  letter-spacing: 0.03em;
  padding: 0 2px;
}

/* เอไอ bubble · label + actions */
.h-tl-bubble.ai .ai-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep);
  margin-bottom: 6px;
}

.h-tl-bubble.ai .ai-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}

.h-tl-bubble.ai .ai-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.h-tl-bubble.ai .h-ai-btn {
  padding: 4px 10px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  background: transparent;
  border: 1px solid var(--ai);
  color: var(--ai-deep);
  cursor: pointer;
  border-radius: 0;
}

.h-tl-bubble.ai .h-ai-btn.primary {
  background: var(--ai);
  color: white;
  border-color: var(--ai);
}

.h-tl-bubble.ai .h-ai-btn:hover {
  background: var(--ai-soft);
}

.h-tl-bubble.ai .h-ai-btn.primary:hover {
  background: var(--ai-deep);
}

/* Date · centered with lines */
.h-tl-stream .h-tl-day {
  text-align: center;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.h-tl-stream .h-tl-day::before,
.h-tl-stream .h-tl-day::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

/* Col 2 · action bar · better alignment */
.h-actions-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}

.h-actions-line .h-compose-inline {
  flex: 1;
  min-height: 38px;
  max-height: 110px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  resize: none;
  outline: none;
  border-radius: 0;
  line-height: 1.4;
}

.h-actions-line .h-compose-inline:focus {
  border-color: var(--accent);
  background: var(--input-bg);
}

.h-actions-line .h-act-chat-inline,
.h-actions-line .h-act-send-inline {
  padding: 9px 14px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
}

.h-actions-line .h-act-chat-inline {
  background: var(--paper-2);
  color: var(--ink);
}

.h-actions-line .h-act-chat-inline:hover {
  background: var(--paper-3);
}

.h-actions-line .h-act-send-inline {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
}

.h-actions-line .h-act-send-inline:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Col 3 · เอไอ summary at top */
.h-ref-section.h-ref-ai {
  border-bottom: 1px solid var(--border);
}

.h-ref-section.h-ref-ai .h-ref-ai-head .label {
  display: block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai-deep);
  margin-bottom: 8px;
}

.h-ref-section.h-ref-ai .strategy {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(123, 143, 107, 0.1);
  border-left: 2px solid var(--ai);
  font-size: 11.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.h-ref-section.h-ref-ai .strategy strong {
  color: var(--ai-deep);
  font-weight: 700;
}


/* === home.line · action bar · clean alignment (v3) === */
.h-actions-line {
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--paper);
  flex-shrink: 0;
}

.h-actions-line .h-compose-inline {
  flex: 1;
  height: 40px;
  min-height: 40px;
  max-height: 120px;
  padding: 11px 12px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  resize: none;
  outline: none;
  border-radius: 0;
  line-height: 1.4;
  box-sizing: border-box;
}

.h-actions-line .h-compose-inline::placeholder {
  color: var(--mid-2);
}

.h-actions-line .h-compose-inline:focus {
  border-color: var(--accent);
}

.h-actions-line .h-act-chat-inline,
.h-actions-line .h-act-send-inline {
  height: 40px;
  padding: 0 16px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  border: 1px solid var(--border);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.h-actions-line .h-act-chat-inline {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--border);
}

.h-actions-line .h-act-chat-inline:hover {
  background: var(--paper-2);
}

.h-actions-line .h-act-send-inline {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  font-weight: 600;
  padding: 0 18px;
}

.h-actions-line .h-act-send-inline:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}


/* === home.line · footer bars · same height 64px === */

/* All 3 col footers · uniform 64px */
.h-list-foot,
.h-actions-line,
.h-ref-actions {
  height: 64px;
  box-sizing: border-box;
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  background: var(--paper);
  display: flex;
  align-items: center;
  padding: 0 14px;
}

/* Col 1 · filter chips · horizontal scroll (no wrap) */
.h-list-foot {
  overflow-x: auto;
  overflow-y: hidden;
}

.h-list-foot::-webkit-scrollbar {
  height: 0;
}

.h-list-foot .h-filters {
  display: flex;
  gap: 6px;
  padding: 0;
  flex-wrap: nowrap;
  flex-shrink: 0;
  width: max-content;
}

.h-list-foot .h-filter {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Col 2 · action bar already has compose + 2 buttons */
.h-actions-line {
  gap: 6px;
  padding: 0 14px;
}

.h-actions-line .h-compose-inline {
  height: 40px;
  min-height: 40px;
}

.h-actions-line .h-act-chat-inline,
.h-actions-line .h-act-send-inline {
  height: 40px;
}

/* Col 3 · ดูใบเสนอราคา · full-width button */
.h-ref-pane {
  display: flex;
  flex-direction: column;
}

.h-ref-scroll {
  flex: 1;
  overflow-y: auto;
}

.h-ref-actions {
  padding: 12px 14px;
}

.h-ref-view {
  flex: 1;
  height: 40px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.h-ref-view:hover {
  background: var(--ink-2);
}

/* === LINE Flex Message · visual card render === */
.h-tl-bubble.flex {
  max-width: 85%;
}

.h-tl-flex {
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
}

.h-tl-flex .flex-header {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
}

.h-tl-flex .flex-brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 4px;
}

.h-tl-flex .flex-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.h-tl-flex .flex-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  opacity: 0.7;
  margin-top: 2px;
}

.h-tl-flex .flex-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.h-tl-flex .flex-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--ink);
  gap: 10px;
}

.h-tl-flex .flex-row > span:first-child {
  flex: 1;
  min-width: 0;
}

.h-tl-flex .flex-row .p {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  flex-shrink: 0;
}

.h-tl-flex .flex-total {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
  background: var(--paper-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.h-tl-flex .flex-total .t {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
}

.h-tl-flex .flex-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border);
}

.h-tl-flex .flex-btn {
  width: 100%;
  height: 38px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}

.h-tl-flex .flex-btn:hover {
  background: var(--accent-deep);
}


/* === home.web/manual · email + note bubble variants === */

/* Email bubble · sales sends email to customer */
.h-tl-bubble.sales .email-subj {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--paper);
  opacity: 0.95;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  padding-bottom: 6px;
}

.h-tl-bubble.sales .email-body {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--paper);
  opacity: 0.92;
}

.h-tl-bubble.sales .email-attach {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.15);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--paper);
  opacity: 0.85;
}

/* Note bubble · sales internal note (not sent to customer) */
.h-tl-bubble.sales.note .h-tl-bub-content {
  background: var(--paper-2);
  color: var(--ink);
  border: 1px dashed var(--mid-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}

.h-tl-bubble.sales.note .note-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 4px;
}

.h-tl-bubble.sales.note .note-text {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}

/* Phone call event · subtle telephone style */
.h-tl-bubble.sales.event.phone .h-tl-bub-content {
  background: transparent;
  border: 1px solid var(--ai);
  border-left: 3px solid var(--ai);
  color: var(--ink-2);
  font-size: 12px;
}

/* New event highlight · first event in source flow */
.h-tl-bubble.event.new .h-tl-bub-content {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  color: var(--ink);
  font-weight: 500;
}

/* ── design #quotation.builder · revision pill + dropdown (rev-20) ── */

/* Revision pill + dropdown */
.qb-tb-rev {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  letter-spacing: 0.02em;
}
.qb-tb-rev:hover { border-color: var(--accent); }
.qb-tb-rev.open { border-color: var(--accent); background: rgba(200, 80, 31, 0.05); }
.qb-tb-rev .caret { font-size: 9px; color: var(--mid); }

.qb-tb-rev-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 320px;
  background: var(--paper);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 100;
  padding: 0;
}
.qb-tb-rev-pop .head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  background: var(--paper-2);
}
.qb-tb-rev-pop .head .t {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.qb-tb-rev-pop .head .count {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
}
.qb-tb-rev-pop .body { padding: 8px 0; }
.qb-rev-item {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  border-bottom: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
}
.qb-rev-item:last-child { border-bottom: none; }
.qb-rev-item .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-top: 5px;
}
.qb-rev-item.current .dot { background: var(--accent); animation: pulse 2s infinite; }
.qb-rev-item.sent .dot { background: var(--good, #4A7C59); }
.qb-rev-item .info { font-size: 12px; }
.qb-rev-item .info .num {
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 2px;
}
.qb-rev-item .info .meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.qb-rev-item .info .note {
  font-size: 11px;
  color: var(--ink-2);
  background: var(--paper-2);
  padding: 4px 8px;
  margin-top: 4px;
  border-left: 2px solid var(--accent);
}
.qb-rev-item .info .view-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 4px;
  display: inline-block;
}
.qb-tb-rev-pop .foot {
  padding: 10px 14px;
  border-top: 1px solid var(--border-2);
  background: var(--paper-2);
}
.qb-tb-rev-pop .foot button {
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  color: var(--mid);
  cursor: pointer;
}
.qb-tb-rev-pop .foot button:hover { color: var(--accent); }

/* ── design #settings.website.brand · swb-* + preview (rev-20) ── */
/* settings.website.brand · scoped */
.swb-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
.swb-domain-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--input-bg);
}
.swb-domain-field input {
  flex: 1;
  border: none;
  padding: 11px 14px;
  background: transparent;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  color: var(--ink);
  outline: none;
}
.swb-domain-suffix {
  background: var(--paper-3);
  padding: 11px 14px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mid);
  border-left: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.swb-avail {
  margin-top: 8px;
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--good, #4A7C59);
}
.swb-avail svg { width: 14px; height: 14px; }
.swb-custom-domain {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px dashed var(--border);
}
.swb-custom-domain .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.swb-custom-domain .head .t {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.swb-custom-domain .head .status {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.swb-custom-domain .body {
  font-size: 11px;
  color: var(--mid);
  line-height: 1.5;
}
.swb-custom-domain .body code {
  background: var(--paper-3);
  padding: 1px 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
}
.swb-theme-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.swb-theme-opt {
  background: var(--paper-2);
  border: 1.5px solid var(--border);
  padding: 10px;
  cursor: pointer;
  position: relative;
}
.swb-theme-opt.on {
  border-color: var(--accent);
  background: var(--paper);
}
.swb-theme-opt.on::after {
  content: '✓';
  position: absolute;
  top: 6px;
  right: 8px;
  width: 16px;
  height: 16px;
  background: var(--accent);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.swb-theme-swatch {
  height: 60px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-bottom: 6px;
  border: 1px solid var(--border-2);
}
.swb-theme-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}
.swb-theme-desc {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* Live preview */
.swb-preview {
  position: sticky;
  top: 16px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.swb-preview-head {
  background: var(--paper-3);
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.swb-preview-head .url {
  color: var(--accent);
  font-weight: 700;
}
.swb-preview-body {
  height: 460px;
  overflow: hidden;
  position: relative;
}
.swb-preview-frame {
  transform: scale(0.32);
  transform-origin: top left;
  width: 312.5%;
  height: 312.5%;
  background: var(--paper);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  padding: 24px;
}
.swb-preview-frame .pf-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 24px;
}
.swb-preview-frame .pf-logo {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.swb-preview-frame .pf-logo em { color: var(--accent); }
.swb-preview-frame .pf-nav-links {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.swb-preview-frame .pf-hero {
  background: var(--paper-2);
  padding: 36px 28px;
  border: 1px solid var(--border-2);
  margin-bottom: 20px;
}
.swb-preview-frame .pf-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 500;
  margin: 0 0 10px;
  color: var(--ink);
  line-height: 1.2;
}
.swb-preview-frame .pf-hero h1 em { color: var(--accent); }
.swb-preview-frame .pf-hero p {
  font-size: 14px;
  color: var(--mid);
  margin: 0 0 20px;
  line-height: 1.5;
}
.swb-preview-frame .pf-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--paper);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 13px;
}
.swb-preview-frame .pf-products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.swb-preview-frame .pf-product {
  border: 1px solid var(--border-2);
  background: var(--paper);
}
.swb-preview-frame .pf-product .img {
  height: 110px;
  background: linear-gradient(135deg, #4A3C2C, #6B5847);
}
.swb-preview-frame .pf-product .meta {
  padding: 10px 12px;
}
.swb-preview-frame .pf-product .name {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 2px;
}
.swb-preview-frame .pf-product .price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent);
}

/* ── design backoffice.html · mobile screens · mob-* / device / m-* (rev-20) ── */

/* ============================================================
   MOBILE · device + UI · polished v2
   ============================================================ */

.frame.frame-device {
  background: linear-gradient(180deg, #2a2a28 0%, #1a1a18 100%);
  padding: 56px 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.device {
  width: 393px;
  height: 852px;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 0;
  box-shadow: 
    inset 0 0 0 8px #1a1a18,
    inset 0 0 0 11px #2a2a28,
    0 30px 80px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.3);
}

/* device chrome · status bar */
.device-status {
  height: 47px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px 0 32px;
  flex-shrink: 0;
  background: var(--paper);
}

.device-time {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.device-status-r {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
}

.device-battery {
  width: 24px;
  height: 11px;
  border: 1px solid var(--ink);
  border-radius: 0;
  position: relative;
  padding: 1px;
}

.device-battery::after {
  content: "";
  position: absolute;
  right: -3px;
  top: 3px;
  width: 2px;
  height: 5px;
  background: var(--ink);
  border-radius: 0;
}

.device-battery-fill {
  width: 80%;
  height: 100%;
  background: var(--ink);
  border-radius: 0;
}

.mob-home-indicator {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  background: var(--ink);
  border-radius: 0;
  opacity: 0.85;
}

/* Top bar · 56px */
.mob-top {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-top-detail {
  padding: 0 8px 0 4px;
  gap: 4px;
}

.mob-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.mob-brand-mark {
  width: 32px;
  height: 32px;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  position: relative;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 19px;
  color: var(--ink);
  font-weight: 700;
}

.mob-brand-mark .dot {
  width: 4px;
  height: 4px;
  background: var(--accent);
  position: absolute;
  bottom: 6px;
  right: 6px;
}

.mob-brand-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-brand-name em {
  font-style: normal;
  color: var(--accent);
}

.mob-top-r {
  display: flex;
  align-items: center;
  gap: 4px;
}

.mob-iconbtn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink);
  position: relative;
  border-radius: 0;
}

.mob-iconbtn:hover {
  background: var(--paper-2);
}

.mob-iconbtn-dot {
  position: absolute;
  top: 9px;
  right: 11px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 0;
  border: 2px solid var(--paper);
}

.mob-me {
  width: 32px;
  height: 32px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
  margin-left: 4px;
  flex-shrink: 0;
}

.mob-top-title {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mob-top-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-top-sub {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-src-inline {
  width: 6px;
  height: 6px;
  border-radius: 0;
  display: inline-block;
  flex-shrink: 0;
}

.mob-src-inline.line { background: #06C755; }
.mob-src-inline.web { background: #5A6B7D; }
.mob-src-inline.manual { background: #C9A86B; }

/* SLA banner */
.mob-sla {
  background: var(--accent-soft);
  border-bottom: 1px solid rgba(200, 80, 31, 0.2);
  padding: 10px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.mob-sla-l {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.mob-sla-r {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--accent-deep);
  font-weight: 600;
}

/* Context band · for chat detail */
.mob-context {
  background: var(--paper-2);
  border-bottom: 1px solid var(--border-2);
  padding: 12px 16px;
  flex-shrink: 0;
}

.mob-context-row {
  display: flex;
  gap: 24px;
}

.mob-context-quote {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mob-context-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-context-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.mob-context-val.accent {
  color: var(--accent);
  font-size: 14px;
}

/* Segmented filter */
.mob-seg {
  display: flex;
  gap: 0;
  padding: 8px 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-seg-btn {
  flex: 1;
  height: 36px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--border);
  border-right-width: 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.mob-seg-btn:last-child {
  border-right-width: 1px;
}

.mob-seg-btn span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--mid);
  background: var(--paper-2);
  padding: 1px 6px;
  border-radius: 0;
}

.mob-seg-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.mob-seg-btn.active span {
  background: rgba(255,255,255,0.18);
  color: var(--paper);
}

/* Scroll area */
.mob-scroll {
  flex: 1;
  overflow-y: auto;
  background: var(--paper);
}

.mob-scroll::-webkit-scrollbar { width: 0; }

.mob-scroll-chat {
  background: var(--paper-2);
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Blocks · section grouping */
.mob-block {
  border-bottom: 1px solid var(--border-2);
}

.mob-block:last-of-type {
  border-bottom: none;
}

.mob-block-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 12px;
}

/* เอไอ summary card */
.mob-ai-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px;
  background: rgba(123, 143, 107, 0.07);
  border-left: 3px solid var(--ai);
}

.mob-ai-line {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-2);
}

.mob-ai-line .dot {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--ai);
  flex-shrink: 0;
  margin-top: 7px;
}

.mob-ai-line .dot.accent {
  background: var(--accent);
}

.mob-ai-line strong {
  color: var(--ink);
  font-weight: 700;
}

/* Activity row · clean 3-line format */
.mob-row {
  display: flex;
  gap: 12px;
  padding: 13px 0;
  align-items: flex-start;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.mob-row:last-child {
  border-bottom: none;
}

.mob-row:hover {
  background: var(--paper-2);
}

.mob-row.urgent {
  border-left: 3px solid var(--accent);
  padding-left: 11px;
  margin-left: -14px;
  padding-right: 14px;
  background: rgba(200, 80, 31, 0.02);
}

.mob-row-avatar {
  width: 42px;
  height: 42px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  flex-shrink: 0;
}

.mob-row-avatar.lg {
  width: 52px;
  height: 52px;
  font-size: 17px;
}

.mob-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob-row-name {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-row-time-r {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  flex-shrink: 0;
  font-weight: 500;
}

.mob-row-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mob-row-pill.hot {
  background: var(--accent);
  color: var(--paper);
}

.mob-row-pill.warn {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.mob-row-preview {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.mob-row-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 2px;
}

.mob-row-time,
.mob-row-ref,
.mob-row-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--mid);
}

.mob-row-time {
  color: var(--mid);
}

.mob-row-ref {
  color: var(--ink-2);
}

.mob-row-amt {
  color: var(--ink);
  font-weight: 700;
}

.mob-row-dot {
  width: 2.5px;
  height: 2.5px;
  background: var(--mid);
  border-radius: 0;
  flex-shrink: 0;
}

.mob-src {
  width: 8px;
  height: 8px;
  border-radius: 0;
  flex-shrink: 0;
}

.mob-src.line { background: #06C755; }
.mob-src.web { background: #5A6B7D; }
.mob-src.manual { background: #C9A86B; }

/* Customer card (detail view) */
.mob-cust-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--border-2);
}

.mob-cust-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-cust-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.mob-cust-meta {
  font-size: 12.5px;
  color: var(--mid);
  line-height: 1.4;
}

.mob-cust-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.mob-contact-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  color: var(--ink);
}

.mob-contact-pill.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

/* Items list (web detail) */
.mob-items-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  background: var(--paper);
}

.mob-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-2);
}

.mob-item:last-child {
  border-bottom: none;
}

.mob-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-item-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.2;
}

.mob-item-qty {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-item-price {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  color: var(--ink);
  font-weight: 600;
  flex-shrink: 0;
}

.mob-item-more {
  padding: 12px 14px;
  border-top: 1px dashed var(--border);
  background: transparent;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  text-align: center;
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  font-weight: 600;
}

/* Totals card */
.mob-totals-card {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mob-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink-2);
}

.mob-totals-row > span:last-child {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 600;
}

.mob-totals-row.total {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

.mob-totals-row.total > span:last-child {
  font-size: 17px;
  color: var(--accent);
}

/* Note quote */
.mob-note-quote {
  padding: 12px 14px;
  background: var(--paper-2);
  border-left: 3px solid var(--mid-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  font-style: italic;
}

/* Chat bubbles */
.mob-chat-day {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 0 12px;
  position: relative;
}

.mob-bubble {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 0;
  margin-bottom: 3px;
  position: relative;
}

.mob-bubble-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  line-height: 1.4;
}

.mob-bubble-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.mob-bubble.them {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border-2);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.mob-bubble.me {
  background: var(--ink);
  color: var(--paper);
  align-self: flex-end;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}

.mob-bubble.me .mob-bubble-time {
  color: rgba(252, 249, 242, 0.55);
  text-align: right;
}

.mob-event {
  text-align: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  padding: 4px 12px;
  margin: 4px 0;
  align-self: center;
  letter-spacing: 0.02em;
}

.mob-event.accent {
  color: var(--accent);
  font-weight: 700;
}

.mob-ai-bubble {
  max-width: 82%;
  align-self: flex-end;
  background: rgba(123, 143, 107, 0.12);
  border-left: 3px solid var(--ai);
  padding: 11px 13px;
  margin-bottom: 4px;
  margin-left: auto;
}

.mob-ai-bubble-head {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ai);
  margin-bottom: 5px;
}

.mob-ai-bubble-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
}

.mob-ai-bubble-use {
  margin-top: 9px;
  padding: 5px 10px;
  background: var(--ai);
  color: var(--paper);
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
}

.mob-ai-bubble.standalone {
  max-width: none;
  align-self: stretch;
  margin: 0;
}

/* Compose bar · chat */
.mob-compose {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--paper);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.mob-compose-input {
  flex: 1;
  height: 40px;
  padding: 0 13px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  min-width: 0;
}

.mob-compose-input::placeholder {
  color: var(--mid);
}

/* Action bar · sticky bottom (detail) */
.mob-action {
  display: flex;
  gap: 8px;
  padding: 10px 16px 12px;
  background: var(--paper);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.mob-btn-ghost {
  height: 48px;
  padding: 0 16px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
}

.mob-btn-ghost:hover {
  background: var(--paper-2);
}

.mob-btn-accent {
  height: 48px;
  padding: 0 18px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  letter-spacing: -0.005em;
}

.mob-btn-accent.flex {
  flex: 1;
}

.mob-btn-accent:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Bottom nav · 3 tabs */
.mob-nav {
  height: 76px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 6px 0 16px;
  border-top: 1px solid var(--border-2);
  background: var(--paper);
  flex-shrink: 0;
}

.mob-nav-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--mid);
  border-radius: 0;
  padding: 4px 0;
}

.mob-nav-btn.active {
  color: var(--ink);
}

.mob-nav-btn span {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mob-nav-btn:hover {
  color: var(--ink);
}

/* Padding for scroll area to clear sticky bottom */
.mob-pad {
  height: 24px;
}

.mob-pad-lg {
  height: 32px;
}


/* ============================================================
   MOBILE v2 · additional · m.4 m.5 m.6
   ============================================================ */

/* Top bar · page title variant */
.mob-top-page {
  padding: 0 8px 0 16px;
}

.mob-top-pagetitle {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-iconbtn-text {
  height: 36px;
  padding: 0 10px;
  background: transparent;
  border: none;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  cursor: pointer;
  border-radius: 0;
}

.mob-iconbtn-text:hover {
  background: var(--paper-2);
}

/* Search bar · pill input */
.mob-search {
  position: relative;
  padding: 10px 14px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-search-icon {
  position: absolute;
  left: 26px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mid);
  pointer-events: none;
}

.mob-search-input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-search-input::placeholder {
  color: var(--mid);
}

.mob-search-input:focus {
  background: var(--paper);
  border-color: var(--ink);
}

/* Filter chips · scrollable */
.mob-chips {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  overflow-x: auto;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-chips::-webkit-scrollbar { display: none; }

/* Quote card · list page */
.mob-q-card {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  align-items: center;
}

.mob-q-card:hover {
  background: var(--paper-2);
}

.mob-q-card.compact {
  padding: 12px 14px;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--border-2);
  border-bottom: 1px solid var(--border-2);
  margin-bottom: 8px;
}

.mob-q-card-l {
  flex-shrink: 0;
}

.mob-q-avatar {
  width: 48px;
  height: 48px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 16px;
  font-weight: 700;
}

.mob-q-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-q-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob-q-card-name {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-q-card-pill {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mob-q-card-pill.warn {
  background: var(--accent-soft);
  color: var(--accent-deep);
}

.mob-q-card-pill.ok {
  background: rgba(123, 143, 107, 0.18);
  color: #4F6249;
}

.mob-q-card-pill.expiring {
  background: var(--accent);
  color: var(--paper);
}

.mob-q-card-pill.expired {
  background: var(--paper-3);
  color: var(--mid);
}

.mob-q-card-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-q-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}

.mob-q-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-q-card-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* === Customer detail hero === */
.mob-cust-hero {
  padding: 22px 18px 18px;
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  border-bottom: 1px solid var(--border-2);
}

.mob-cust-hero-avatar {
  width: 64px;
  height: 64px;
  background: var(--ink);
  color: var(--paper);
  display: grid;
  place-items: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 24px;
  font-weight: 700;
}

.mob-cust-hero-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-top: 8px;
}

.mob-cust-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--mid);
}

.mob-type-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mob-cust-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  width: 100%;
  padding-top: 14px;
  border-top: 1px solid var(--border-2);
}

.mob-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.mob-stat-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-stat-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-primary-star {
  color: var(--accent);
  font-size: 13px;
}

/* Activity row · customer detail */
.mob-act-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-2);
}

.mob-act-row:last-child {
  border-bottom: none;
}

.mob-act-row .mob-src {
  margin-top: 5px;
}

.mob-act-icon {
  width: 16px;
  text-align: center;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.6;
}

.mob-act-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-act-msg {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.4;
}

.mob-act-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* === Quick create · m.6 === */
.mob-selected-card {
  display: flex;
  gap: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
  align-items: center;
}

.mob-selected-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mob-selected-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.mob-selected-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-selected-contact {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.mob-edit-link {
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 11.5px;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
  flex-shrink: 0;
  font-weight: 600;
}

.mob-edit-link:hover {
  background: var(--paper-2);
}

/* Template chips */
.mob-tmpl-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.mob-tmpl-pill {
  padding: 8px 14px;
  background: var(--paper-3);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  border-radius: 0;
}

.mob-tmpl-pill:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Discount inline row */
.mob-discount-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border: 1px solid var(--border-2);
}

.mob-discount-lbl {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.mob-discount-input {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
}

.mob-discount-num {
  width: 44px;
  height: 32px;
  padding: 0 8px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  font-weight: 700;
  outline: none;
  text-align: center;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-discount-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--accent);
  font-weight: 700;
}

/* Channel select */
.mob-channel-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border-2);
}

.mob-channel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  background: var(--paper);
}

.mob-channel:last-child {
  border-bottom: none;
}

.mob-channel.active {
  background: var(--paper-2);
}

.mob-channel.active::before {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  margin-right: 10px;
}

.mob-channel-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
}

.mob-channel-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.mob-channel-val.muted {
  color: var(--mid-2);
}

.mob-msg-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
}

.mob-msg-textarea {
  width: 100%;
  min-height: 70px;
  padding: 10px 12px;
  background: var(--input-bg);
  border: 1px solid var(--border-2);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--ink);
  outline: none;
  resize: vertical;
  line-height: 1.5;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-msg-textarea::placeholder {
  color: var(--mid);
}


/* ============================================================
   MOBILE v3 · m.0 sign-in · m.7 customer list · m.8 quote detail · m.modal
   ============================================================ */

/* === m.0 SIGN IN === */
.mob-signin {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px 28px 24px;
  background: var(--paper);
  overflow-y: auto;
}

.mob-signin-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 24px 0 36px;
}

.mob-signin-mark {
  width: 72px;
  height: 72px;
  background: var(--paper-3);
  display: grid;
  place-items: center;
  position: relative;
  font-family: 'Fraunces', serif;
  font-size: 44px;
  color: var(--ink);
  font-weight: 600;
}

.mob-signin-mark .dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  position: absolute;
  bottom: 14px;
  right: 14px;
}

.mob-signin-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.mob-signin-name em {
  font-style: normal;
  color: var(--accent);
}

.mob-signin-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.mob-signin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mob-signin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mob-signin-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 700;
}

.mob-signin-input {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
  box-sizing: border-box;
}

.mob-signin-input.mono {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
}

.mob-signin-input:focus {
  border-color: var(--ink);
}

.mob-signin-subdomain {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  background: var(--input-bg);
}

.mob-signin-subdomain .mob-signin-input {
  border: none;
  background: transparent;
  flex: 1;
  min-width: 0;
}

.mob-signin-suffix {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--paper-3);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--mid);
  border-left: 1px solid var(--border);
  letter-spacing: 0.01em;
}

.mob-signin-pass {
  position: relative;
}

.mob-signin-show {
  position: absolute;
  right: 0;
  top: 0;
  height: 48px;
  width: 48px;
  display: grid;
  place-items: center;
  background: transparent;
  border: none;
  color: var(--mid);
  cursor: pointer;
  border-radius: 0;
}

.mob-signin-forgot {
  align-self: flex-end;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  margin-top: -4px;
}

.mob-signin-submit {
  width: 100%;
  height: 52px;
  background: var(--accent);
  color: var(--paper);
  border: 1px solid var(--accent);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 0;
  margin-top: 6px;
  letter-spacing: -0.005em;
}

.mob-signin-submit:hover {
  background: var(--accent-deep);
}

.mob-signin-divider {
  position: relative;
  display: flex;
  align-items: center;
  margin: 16px 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mob-signin-divider::before,
.mob-signin-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-2);
}

.mob-signin-divider span {
  padding: 0 12px;
}

.mob-signin-google {
  width: 100%;
  height: 48px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mob-signin-google:hover {
  background: var(--paper-2);
}

.mob-signin-footer {
  margin-top: auto;
  padding-top: 32px;
  text-align: center;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  color: var(--mid);
}

.mob-signin-footer a {
  color: var(--accent);
  font-weight: 600;
  margin-left: 4px;
  cursor: pointer;
}

/* === m.7 CUSTOMER LIST === */
.mob-cust-row-list {
  display: flex;
  flex-direction: column;
}

.mob-cust-row {
  display: flex;
  gap: 12px;
  padding: 13px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--border-2);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

.mob-cust-row:hover {
  background: var(--paper-2);
}

.mob-cust-row .mob-row-avatar {
  flex-shrink: 0;
}

.mob-row-avatar.gov { background: #5A6B7D; }
.mob-row-avatar.edu { background: #7B8F6B; }
.mob-row-avatar.med { background: #B8533F; }
.mob-row-avatar.person { background: #C9A86B; color: var(--ink); }

.mob-cust-row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mob-cust-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mob-cust-row-name {
  flex: 1;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-cust-row-meta {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink-2);
}

.mob-cust-row-foot {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.mob-cust-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-cust-stat.accent {
  color: var(--accent);
  font-weight: 700;
}

.mob-type-chip.sm {
  font-size: 9px;
  padding: 1px 5px;
  background: var(--paper-3);
  color: var(--ink);
}

.mob-type-chip.sm.gov { background: #5A6B7D; color: var(--paper); }
.mob-type-chip.sm.edu { background: #7B8F6B; color: var(--paper); }
.mob-type-chip.sm.med { background: #B8533F; color: var(--paper); }
.mob-type-chip.sm.person { background: var(--ai-soft); color: var(--ai-deep); }
.mob-type-chip.sm.new { background: var(--accent); color: var(--paper); }

/* === m.8 QUOTE DETAIL === */
.mob-q-status-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--border-2);
  flex-shrink: 0;
}

.mob-q-status-l {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mob-q-status-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.01em;
}

.mob-q-status-tracker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

.mob-block-link {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-2);
}

.mob-block-link:hover {
  background: var(--paper-2);
}

.mob-block-link .mob-block-label {
  margin-bottom: 12px;
}

/* Delivery rows in quote detail */
.mob-deliver-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-2);
  background: var(--paper);
}

.mob-deliver-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-2);
}

.mob-deliver-row:last-child { border-bottom: none; }

.mob-deliver-row .mob-src {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.mob-deliver-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.mob-deliver-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.mob-deliver-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  color: var(--mid);
  letter-spacing: 0.02em;
}

/* Action bar · 3-action variant */
.mob-action.mob-action-3 {
  gap: 6px;
}

.mob-btn-icon-ghost {
  width: 48px;
  height: 48px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  border-radius: 0;
  flex-shrink: 0;
}

.mob-btn-icon-ghost:hover {
  background: var(--paper-2);
}

/* === m.modal · BOTTOM SHEET === */
.mob-dimmed-bg {
  position: absolute;
  top: 47px;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  filter: blur(0.5px);
  opacity: 0.4;
  z-index: 1;
}

.mob-dimmed-content {
  flex: 1;
}

.mob-sheet-backdrop {
  position: absolute;
  top: 47px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(27, 42, 58, 0.55);
  z-index: 2;
}

.mob-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding: 8px 0 28px;
  z-index: 3;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
}

.mob-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--mid-2);
  border-radius: 0;
  align-self: center;
  margin: 8px auto 14px;
}

.mob-sheet-head {
  padding: 0 22px 16px;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-title {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.mob-sheet-sub {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--mid);
  margin-top: 3px;
}

.mob-sheet-summary {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-amt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

.mob-sheet-amt-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-sheet-amt {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 26px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin-top: 3px;
  letter-spacing: -0.02em;
}

.mob-sheet-amt-r {
  text-align: right;
}

.mob-sheet-qno {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 3px;
}

.mob-sheet-cust {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--paper-2);
}

.mob-sheet-cust-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-sheet-cust-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.mob-sheet-cust-sub {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12px;
  color: var(--mid);
}

.mob-sheet-channels {
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-channel {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-channel:last-child { border-bottom: none; }

.mob-sheet-channel .mob-src {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
}

.mob-sheet-channel-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mob-sheet-channel-name {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}

.mob-sheet-channel-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}

.mob-sheet-checkmark {
  color: var(--accent);
  font-size: 16px;
  font-weight: 700;
}

.mob-sheet-msg {
  padding: 14px 22px 18px;
  border-bottom: 1px solid var(--border-2);
}

.mob-sheet-msg-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 8px;
}

.mob-sheet-msg-body {
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  font-style: italic;
  padding-left: 10px;
  border-left: 2px solid var(--border);
}

.mob-sheet-actions {
  display: flex;
  gap: 8px;
  padding: 16px 22px 4px;
}

.mob-btn-ghost.flex {
  flex: 1;
}


/* === m.0b SIGN UP === */
.mob-signup {
  padding: 24px 28px 24px;
}

.mob-signup-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 24px;
}

.mob-signup-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.mob-signup-step span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--paper-3);
  color: var(--mid);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  border-radius: 0;
}

.mob-signup-step.active span {
  background: var(--accent);
  color: var(--paper);
}

.mob-signup-step .lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mid);
}

.mob-signup-step.active .lbl {
  color: var(--ink);
}

.mob-signup-step-line {
  flex: 1;
  height: 1px;
  background: var(--border);
}

.mob-signup-hint {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--mid);
  margin-top: 4px;
  letter-spacing: 0.02em;
}

.mob-signup-divider {
  height: 1px;
  background: var(--border-2);
  margin: 12px -8px;
}

.mob-signin-select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

.mob-signup-pwd-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.mob-signup-pwd-bar {
  flex: 1;
  height: 4px;
  background: var(--paper-3);
  border-radius: 0;
  overflow: hidden;
}

.mob-signup-pwd-bar .fill {
  height: 100%;
  border-radius: 0;
}

.mob-signup-pwd-bar .fill.weak {
  width: 33%;
  background: var(--danger, #B8533F);
}

.mob-signup-pwd-bar .fill.medium {
  width: 66%;
  background: #C9A86B;
}

.mob-signup-pwd-bar .fill.strong {
  width: 100%;
  background: var(--ai);
}

.mob-signup-pwd-strength span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ai);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mob-signup-terms {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  cursor: pointer;
  padding: 4px 0;
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}

.mob-signup-terms input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 2px;
}

.mob-signup-terms a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}


/* === mob-chip · filter chip buttons (m.4, m.7) === */
.mob-chip {
  height: 32px;
  padding: 0 12px;
  background: var(--paper-2);
  border: 1px solid var(--border);
  font-family: 'IBM Plex Sans Thai', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 0;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mob-chip:hover {
  background: var(--paper-3);
}

.mob-chip.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.mob-chip span {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--mid);
  background: var(--paper-3);
  padding: 1px 6px;
  border-radius: 0;
  letter-spacing: 0.02em;
}

.mob-chip.active span {
  background: rgba(255, 255, 255, 0.18);
  color: var(--paper);
}

/* ── Django runtime · mobile screen shell (/m/ — no device bezel) ── */
body.m-screen {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 480px;
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
}

/* ── Django runtime · collections list (design #product.collection / .empty) ──
   Mirrors the scoped <style> on the deck frame. Move into the main deck
   <style> block on next re-extract. */
.coll-page { padding: 24px 28px 32px; max-width: 1240px; margin: 0 auto; }
.coll-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.coll-toolbar h1 { font-size: 22px; margin: 0 0 4px; }
.coll-toolbar .desc { color: var(--mid); font-size: 13px; }
.coll-tools { display: flex; gap: 8px; }
.coll-axis-chips { display: flex; gap: 6px; margin: 8px 0 20px; flex-wrap: wrap; }
.coll-section { margin-bottom: 28px; }
.coll-section-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; padding: 0 4px; }
.coll-section-head .k { font-weight: 600; font-size: 14px; }
.coll-section-head .rule { flex: 1; border-top: 1px solid var(--line); }
.coll-section-head .add { font-size: 12px; color: var(--mid); cursor: pointer; background: none; border: 0; padding: 0; }
.coll-section-head .add:hover { color: var(--accent-deep); }
.coll-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.coll-card { display: grid; grid-template-columns: 88px 1fr auto; gap: 14px; padding: 14px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 0; align-items: center; }
.coll-card:hover { border-color: var(--accent); }
.coll-card.draft { border-style: dashed; background: var(--paper); }
.coll-thumb { width: 88px; height: 72px; border-radius: 0; background: var(--lift); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.coll-thumb svg { width: 28px; height: 28px; color: var(--mid); }
.coll-info .name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.coll-info .meta { font-size: 12px; color: var(--mid); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.coll-info .slug { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; color: var(--mid); }
.coll-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 8px; border-radius: 0; }
.coll-status.live { background: var(--success-soft, #E8F2EA); color: var(--success-deep, #2F5E3B); }
.coll-status.draft { background: var(--paper); color: var(--mid); border: 1px solid var(--line); }
.coll-ai-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 0; background: var(--ai-soft); color: var(--ai-deep); }
.coll-ai-chip svg { width: 11px; height: 11px; }
.coll-actions { display: flex; gap: 4px; align-items: center; }
.coll-actions .ic-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 0; color: var(--mid); cursor: pointer; background: none; border: 0; }
.coll-actions .ic-btn:hover { background: var(--paper); color: var(--ink); }
.coll-actions form { margin: 0; }
.coll-empty-wrap { padding: 40px 28px; max-width: 720px; margin: 24px auto 0; }
.coll-empty .head { font-size: 18px; font-weight: 600; margin: 8px 0 6px; color: var(--ai-deep); }
.coll-empty .body { color: var(--ink); font-size: 14px; line-height: 1.7; margin-bottom: 18px; }
.coll-empty .actions { display: flex; gap: 10px; align-items: center; }
.coll-empty .or { color: var(--mid); font-size: 13px; }
.coll-empty-stats { display: flex; gap: 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.coll-empty-stats .stat { font-size: 12px; color: var(--mid); }
.coll-empty-stats .stat b { display: block; color: var(--ink); font-size: 18px; font-weight: 600; margin-bottom: 2px; }
.coll-ai-icon { width: 44px; height: 44px; border-radius: 0; background: var(--ai); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.coll-ai-icon svg { width: 22px; height: 22px; color: var(--paper); }

/* Col 3 quote list · per-row delete button on each doc link in the
   "ใบเสนอราคาในแชตนี้" panel. A conversation can hold multiple
   SalesDocuments, so the ✕ lives next to each doc — not on the col 1
   queue row (one per conversation, ambiguous which doc to delete).
   The <form> is a sibling of the <a class="h-ref-doc"> inside
   .h-ref-doc-wrap so we never nest a form inside an anchor. */
.h-ref-doc-wrap { position: relative; }
.h-ref-doc-wrap .h-ref-doc { padding-right: 40px; }
.h-ref-doc-del { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); z-index: 2; display: flex; gap: 4px; margin: 0; }
.h-ref-doc-del-btn { background: none; border: 0; color: var(--mid); cursor: pointer; font-size: 13px; padding: 4px 8px; opacity: 0.4; border-radius: 0; line-height: 1; }
.h-ref-doc-wrap:hover .h-ref-doc-del-btn { opacity: 0.9; }
.h-ref-doc-del-btn:hover { background: var(--paper); color: var(--danger, #b94a4a); opacity: 1; }
.h-ref-doc-del-confirm { background: var(--danger, #b94a4a); color: #fff; border: 0; padding: 5px 10px; border-radius: 0; font-size: 11px; font-weight: 600; cursor: pointer; line-height: 1; white-space: nowrap; }
.h-ref-doc-del-confirm:hover { filter: brightness(1.1); }

/* Col 2 timeline pane · top actions bar (archive / unarchive). Subtle —
   appears above the chat stream, not in the user's primary scan path. */
.h-tl-pane-actions { display: flex; justify-content: flex-end; padding: 5px 14px 0; }
.h-tl-act-btn { background: var(--paper); border: 1px solid var(--border-2); color: var(--mid); cursor: pointer; font-size: 12px; padding: 5px 10px; border-radius: 0; line-height: 1; }
.h-tl-act-btn:hover { background: var(--lift); color: var(--ink); border-color: var(--mid); }

/* Filter chip · the "ดูที่เก็บถาวร" link in the queue footer. Same shape as
   the other chips but no count by default. */
.h-filter-archived { padding: 4px 10px; font-size: 14px; }

/* Col 1 conversation list · v2 — Messenger/LINE-style inbox. Overrides the
   doc-centric .h-row from the deck (which mixed status pills + age + amount)
   so the row reads as "buyer · last activity · preview" at a glance. The
   filter/footer action bar is gone; queue is ordered by last_message_at. */
.h-row {
  display: grid !important;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.h-row.unread .h-row-name { font-weight: 700; }
.h-row.unread .h-row-preview { color: var(--ink); }

.h-row-avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent-soft), var(--ai-soft));
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  flex-shrink: 0;
}
.h-row-avatar .h-row-src {
  position: absolute;
  bottom: -3px; right: -3px;
  width: 16px; height: 16px;
  background: var(--paper);
  border: 1.5px solid var(--paper);
  border-radius: 50%;
  padding: 2px;
  color: var(--mid);
}
.h-row.active .h-row-avatar .h-row-src { background: var(--accent-soft); border-color: var(--accent-soft); }

.h-row-body { min-width: 0; }
.h-row-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.h-row-name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.h-row-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--mid);
  white-space: nowrap;
  flex-shrink: 0;
}
.h-row-preview {
  font-size: 12.5px;
  color: var(--mid);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.h-row-unread {
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 0;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}

/* Compact footer — just an archived-view toggle link, no chips. */
.h-list-foot-mini {
  padding: 12px 16px;
  border-top: 1px solid var(--border-2);
  font-size: 12px;
}
.h-list-foot-mini a {
  color: var(--mid);
  text-decoration: none;
}
.h-list-foot-mini a:hover { color: var(--ink); }

/* Col 2 timeline · sticky bottom dock holding the suggest-action panel and
   the LINE composer. Stream above is flex:1 so this dock parks at pane bottom.
   Three suggest sources stack here in priority order:
     1. _ai_suggestion_panel.html (AiSuggestion PENDING — full panel)
     2. .h-tl-suggest-hint (ai_hint chips — rule-based CTAs)
     3. .h-tl-suggest-state (suggest_chips — state-based fallback) */
.h-tl-bottom {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border-top:0;
}
.h-tl-suggest {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-2);
  flex-wrap: wrap;
}
.h-tl-suggest .lbl {
  font-size: 11px;
  color: var(--mid);
  margin-right: 4px;
}
.h-tl-suggest .h-ai-btn { font-size: 12px; padding: 4px 10px; }

/* Col 3 timeline · archive toggle. Floats top-right of the pane. */
.h-tl-arch {
  position: absolute;
  top: 8px;
  right: 8px;
  margin: 0;
  z-index: 2;
}
.h-tl-arch-btn {
  background: var(--paper);
  border: 1px solid var(--border-2);
  color: var(--mid);
  cursor: pointer;
  padding: 5px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.h-tl-arch-btn .ic { width: 14px; height: 14px; }
.h-tl-arch-btn:hover { background: var(--lift); color: var(--ink); border-color: var(--mid); }
/* เอไอ auto-reply toggle + archive sit together, top-right of the timeline pane.
   One box around both controls (desktop + mobile) — children go flat inside. */
.h-tl-pane-actions {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  display: flex; gap: 4px; align-items: center;
  background: var(--paper);
  border: 1px solid var(--border-2);
  box-shadow: var(--shadow-1);
  padding: 3px 6px;
}
.h-tl-pane-actions .h-tl-ai-toggle,
.h-tl-pane-actions .h-tl-arch-btn { border: none; background: transparent; box-shadow: none; }
.h-tl-pane-actions .h-tl-arch { border-left: 1px solid var(--border-2); padding-left: 4px; }
/* Back button is a mobile-only control — desktop hides it. An unscoped
   `display:none` here used to override the ≤900px media block (file order)
   and killed it on mobile too. */
@media (min-width: 901px) {
  .h-tl-back-btn { display: none; }
}
.h-tl-pane-actions .h-tl-arch { position: static; top: auto; right: auto; }
/* เอไอ auto-reply switch — sage when on (เอไอ surface), never persimmon. */
.h-tl-ai-toggle {
  background: var(--paper);
  border: 1px solid var(--border-2);
  color: var(--mid);
  cursor: pointer;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.h-tl-ai-toggle .ic { width: 14px; height: 14px; }
.h-tl-ai-toggle:hover { background: var(--lift); color: var(--ink); border-color: var(--mid); }
.h-tl-ai-switch {
  position: relative;
  width: 32px;
  height: 18px;
  border-radius: 0;
  background: var(--border-2);
  flex: 0 0 auto;
  transition: background .15s;
}
.h-tl-ai-switch .knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.h-tl-ai-toggle.on { color: var(--ai-deep); border-color: var(--ai); }
.h-tl-ai-toggle.on:hover { background: var(--ai-soft); color: var(--ai-deep); }
.h-tl-ai-toggle.on .h-tl-ai-switch { background: var(--ai); }
.h-tl-ai-toggle.on .h-tl-ai-switch .knob { transform: translateX(14px); }

/* Right-side badge stack for col 1 rows — wait pill + unread count. */
.h-row-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.h-row-wait {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--warn);
  background: var(--warn-soft);
  padding: 2px 7px;
  border-radius: 0;
  white-space: nowrap;
  line-height: 1.4;
}
/* Delivery channel badge — where the buyer wants the reply (latest doc). Only
   renders when the channel differs from source (e.g. came from web, wants LINE). */
.h-row-deliv {
  width: 12px; height: 12px;
  color: var(--mid);
  margin-left: auto;
  flex-shrink: 0;
}

/* Avatar in the flat row: LINE profile picture when present, else profile icon.
   overflow stays visible so the .h-row-src channel badge can sit outside the
   circle. The img clips itself via its own border-radius. */
.h-row-avatar { background: var(--paper-2); }
.h-row-avatar > img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.h-row-avatar > .ic {
  width: 20px; height: 20px;
  color: var(--mid);
}
.h-row.active .h-row-avatar > .ic { color: var(--accent); }

/* Reusable toggle switch — first surfaced inline in catalog/collections.html,
 * now hoisted into backoffice.css so other settings screens can use it. */
.sf-toggle { position: relative; display: inline-block; width: 42px; height: 24px; cursor: pointer; }
.sf-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.sf-toggle .slider { position: absolute; inset: 0; background: #cfcfcf; border-radius: 0; transition: background .15s; }
.sf-toggle .slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.sf-toggle input:checked + .slider { background: #2e7d32; }
.sf-toggle input:checked + .slider::before { transform: translateX(18px); }

/* Ultra-compact single-row action bar — replaces the stacked recipient/summary/
 * link/foot rows. Body (email textarea + flex preview) still expands below. */
.h-tl-action-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0;
}
.h-tl-action-toggle {
  background: transparent; border: 0; cursor: pointer;
  color: var(--accent); font-size: 14px;
  padding: 4px 2px;
}
.h-tl-action-stat {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mid);
  white-space: nowrap;
}
.h-tl-action-stat b { color: var(--ink); font-weight: 700; }
.h-tl-action-stat.dis { color: var(--accent); }
.h-tl-action-stat.total {
  color: var(--ink); font-weight: 700; font-size: 13px;
  padding-left: 6px; border-left: 1px solid var(--border); margin-left: 2px;
}
.h-tl-action-chan {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px; color: var(--mid);
  padding-left: 8px; border-left: 1px solid var(--border);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.h-tl-action-chan .empty { color: var(--accent); }
.h-tl-action-spacer { flex: 1; min-width: 4px; }
.h-tl-action-copy {
  height: 30px; padding: 0 12px;
  background: transparent; color: var(--ink);
  border: 1px solid var(--border);
  font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.h-tl-action-copy:hover { background: var(--paper-2); border-color: var(--ink); }
.h-tl-action-bar .h-tl-action-send {
  height: 30px; padding: 0 16px;
  background: var(--accent); color: var(--paper);
  border: 1px solid var(--accent);
  font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.h-tl-action-bar .h-tl-action-send:hover { filter: brightness(.92); }
.h-tl-action-caret {
  background: transparent; border: 0; cursor: pointer;
  color: var(--mid); font-size: 12px; padding: 4px 2px;
}
.h-tl-action-caret .caret.open { transform: rotate(180deg); display: inline-block; transition: transform .15s; }

/* Right-pane inline line editor — replaces the read-only h-ref-items list. */
.h-ref-items-edit .h-ref-items-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.h-ref-items-edit .h-ref-items-head .lbl {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--mid);
}
.h-ref-items-edit .h-ref-items-head .total {
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 700; color: var(--ink);
}
.h-ref-edit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.h-ref-edit-row {
  display: flex; flex-direction: column;
  padding: 5px;
  background: #fff;
  border: 1px solid var(--border);
}
.h-ref-edit-main {
  display: grid;
  grid-template-columns: 28px 1fr 36px 60px 22px 22px;
  align-items: center; gap: 6px;
}
.h-ref-edit-detail {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.h-ref-edit-detail form {
  display: grid; grid-template-columns: 1fr 1fr 70px; gap: 6px;
}
.h-ref-edit-detail .fld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h-ref-edit-detail .fld > span {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mid);
}
.h-ref-edit-detail .fld input,
.h-ref-edit-detail .fld select {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  padding: 6px 8px; width: 100%; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--border); background: var(--paper);
}
/* Doc-level discount + delivery row in the col-3 ref editor — reuses the
   per-line .fld look (label over input), 3-up grid like .h-ref-edit-detail. */
.h-ref-docset { margin: 0; }
.h-ref-docset .docset-row { display: grid; gap: 6px; }
.h-ref-docset .docset-row.disc { grid-template-columns: 1fr 52px; }
.h-ref-docset .docset-row.ship { grid-template-columns: 1fr 1fr; }
.h-ref-docset .fld { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.h-ref-docset .fld > span {
  font-family: 'IBM Plex Mono', monospace; font-size: 9.5px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--mid);
}
.h-ref-docset .fld input,
.h-ref-docset .fld select {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  padding: 8px; width: 100%; box-sizing: border-box; min-width: 0;
  border: 1px solid var(--border);
}

.h-ref-docset .fld select {
  padding: 7px;
}

.h-ref-totals-row.dis span:last-child { color: var(--accent); }
.h-ref-edit-row .thumb {
  height: 32px;
  object-fit: cover; background: var(--paper-3);
  cursor: zoom-in;
}
.h-ref-edit-row .thumb.empty { background: var(--paper-3); cursor: default; }
.h-ref-edit-row .nm {
  font-size: 12px; color: var(--ink); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.h-ref-edit-row .nm:hover { color: var(--accent); }
.h-ref-edit-row .qty-form { margin: 0; }
.h-ref-edit-row .qty {
  width: 100%;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  padding: 6px 4px;
  border: 1px solid var(--border); background: var(--paper);
  text-align: center;
}
.h-ref-edit-row .price {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--ink); text-align: right; white-space: nowrap;
}
.h-ref-edit-row .del {
  background: transparent; border: 0; cursor: pointer;
  color: var(--mid); font-size: 14px; line-height: 1;
  padding: 2px 4px;
}
.h-ref-edit-row .del:hover { color: var(--accent); }
.h-ref-edit-row .edit {
  background: transparent; border: 0; cursor: pointer;
  color: var(--mid); line-height: 1;
  padding: 2px 4px;
  display: flex; align-items: center; justify-content: center;
}
.h-ref-edit-row .edit:hover { color: var(--accent); }
.h-ref-edit-row .edit svg { width: 12px; height: 12px; }
.h-ref-edit-empty { font-size: 12px; color: var(--mid); font-style: italic; padding: 8px; text-align: center; }

.h-ref-edit-add { margin-top: 8px; }
.h-ref-edit-add-btn {
  width: 100%;
  background: var(--white); border: 1px dashed var(--border); cursor: pointer;
  padding: 6px; font: inherit; font-size: 12px;
  color: var(--mid);
}
.h-ref-edit-add-btn:hover { border-color: var(--ink); color: var(--ink); }
.h-ref-edit-add-panel { margin-top: 6px; }
.h-ref-edit-add-search {
  width: 100%; box-sizing: border-box;
  padding: 6px 8px;
  border: 1px solid var(--border); background: var(--paper);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
}
.h-ref-edit-add-results { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.h-ref-edit-result {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 5px 8px;
  background: var(--paper); border: 1px solid var(--border);
  cursor: pointer; font: inherit; text-align: left;
}
.h-ref-edit-result:hover { background: var(--paper-2); border-color: var(--ink); }
.h-ref-edit-result .nm { font-size: 12px; color: var(--ink); }
.h-ref-edit-result .meta {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--mid);
}

/* "พร้อมส่งให้ลูกค้า" action card — summary row that stays visible while the
 * heavy LINE flex / email preview body is collapsed by default. */
.h-tl-action-summary {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 6px 0;
  border-top: 1px dashed var(--border);
  border-bottom: 1px dashed var(--border);
}
.h-tl-action-summary .cell { display: inline-flex; align-items: baseline; gap: 6px; }
.h-tl-action-summary .k {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mid);
}
.h-tl-action-summary .v { font-size: 13px; font-weight: 600; color: var(--ink); font-family: 'IBM Plex Mono', monospace; }
.h-tl-action-summary .v.dis { color: var(--accent); }
.h-tl-action-summary .v.total { font-size: 14px; }

/* shortlink copy button */
.h-tl-action-shortlink .sms-copy {
  flex-shrink: 0;
  height: 28px; padding: 0 12px;
  background: var(--ink); color: var(--paper);
  border: none; font: inherit; font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.h-tl-action-shortlink .sms-copy:hover { background: var(--accent); }

/* เอไอ → ประวัติการทำงาน — reuses the .ql-* list primitives from quotation.list
   (filters row · search · status chips · cust-cell · status pill · footer).
   Only the column grid and the per-run metric cells are เอไอ-log-specific. */
.set-ai-log .set-empty {
  padding: 32px; text-align: center; color: var(--mid);
  border: 1px dashed var(--border); background: var(--paper-2);
}
.set-ai-log .ql-row {
  grid-template-columns: 70px minmax(190px, 1.4fr) 92px 120px 78px 92px 86px 1.7fr;
}
/* the square avatar carries the real LINE profile photo (falls back to initial) */
.set-ai-log .ql-cust-cell .avatar img { width: 100%; height: 100%; object-fit: cover; }
.set-ai-log .ql-cust-cell .name a { color: inherit; text-decoration: none; }
.set-ai-log .ql-cust-cell .name a:hover { color: var(--accent); text-decoration: underline; }
.set-ai-log .ql-cust-cell .person {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-ai-log .qa-msg {
  font-size: 11.5px; color: var(--mid); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.set-ai-log .qa-step {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-2);
}
.set-ai-log .qa-reason { font-size: 12.5px; color: var(--ink-2); }
.set-ai-log .ql-row.step-skip .qa-reason { color: var(--mid); }
/* neutral decision pill; step colour echoes the quotation status palette */
.set-ai-log .ql-status { background: var(--paper-3); color: var(--ink-2); }
.set-ai-log .ql-row.step-push .ql-status { background: var(--good-soft); color: var(--good); }
.set-ai-log .ql-row.step-suggest .ql-status { background: var(--ai-soft); color: var(--ai-deep); }
.set-ai-log .ql-row.step-skip .ql-status { background: var(--paper-3); color: var(--mid); }
.set-ai-log .ql-row.step-error .ql-status { background: var(--danger-soft); color: var(--danger); }
/* per-run metrics — three own columns (ใช้เวลา · LLM · ต้นทุน), present on the
   RECEIVED row; other steps show a muted dash. */
.set-ai-log .qa-dur,
.set-ai-log .qa-llm,
.set-ai-log .qa-cost {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  color: var(--ink); white-space: nowrap;
}
.set-ai-log .qa-cost { color: var(--ai-deep); }
.set-ai-log .qa-llm .tok {
  display: block; font-size: 10px; color: var(--mid);
}
.set-ai-log .qa-dur.none,
.set-ai-log .qa-llm.none,
.set-ai-log .qa-cost.none { color: var(--border-2); }

/* Settings → LINE OA — collapsible "เลือกได้" sections (LINE Login etc.). */
.loa-collapse { padding: 0; }
.loa-collapse > summary {
  list-style: none; cursor: pointer;
  padding: 14px 16px; margin: 0;
  border-bottom: 1px solid var(--border);
  background: var(--paper-2);
}
.loa-collapse > summary::-webkit-details-marker { display: none; }
.loa-collapse > summary::after {
  content: "+"; float: right;
  font-family: 'IBM Plex Mono', monospace; font-size: 16px;
  color: var(--mid);
}
.loa-collapse[open] > summary::after { content: "−"; }
.loa-collapse > summary .t {
  font-weight: 600; color: var(--ink);
}
.loa-collapse > summary .t .muted {
  font-weight: 400; color: var(--mid); font-size: 12px;
}
.loa-collapse > summary .d {
  font-size: 12px; color: var(--mid); margin-top: 4px;
}
.loa-collapse > .loa-field { margin: 12px 16px; }

/* Settings → LINE OA — tabs (Messaging | Login). */
.loa-tabs {
  display: flex; gap: 0;
  margin: 16px 0 30px;
  border-bottom: 1px solid var(--border);
}
.loa-tab {
  background: transparent; border: 0;
  padding: 10px 16px;
  font: inherit; font-size: 13px; color: var(--mid);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.loa-tab:hover { color: var(--ink); }
.loa-tab.active {
  color: var(--paper); 
  font-weight: 600;
  background: var(--accent);
}

/* Settings → ใบเสนอราคา → ตั้งค่า — toggle-row layout for the qo (quote options) form. */
.qo-row {
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
}
.qo-row .info { flex: 1; }
.qo-row .info .t { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 2px; }
.qo-row .info .sub { font-size: 12px; color: var(--mid); }
.qo-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px;
}

/* เอไอ suggestion panel — QUOTE_DRAFT product grid (with checkboxes + price) +
   reject reason row. Sits above the LINE composer (templates/core/_ai_suggestion_panel.html). */
.h-ai-suggest-form { display: contents; }
.h-ai-suggest { padding: 0 18px; }
.h-tl-resend-btn {
  display: inline-flex; align-items: center; gap: 3px;
  background: none; border: 1px solid var(--accent); color: var(--accent);
  font-family: inherit; font-size: 10px; padding: 2px 6px; cursor: pointer;
  margin-left: 6px; vertical-align: middle;
}
.h-tl-resend-btn:hover { background: var(--accent); color: var(--paper); }
/* Single-source preview: card + actions in one right-aligned wrapper. */
.h-ai-suggest-card-wrap { display: flex; flex-direction: column; align-items: flex-end; margin: 8px 0 12px 0; }
.h-ai-suggest-card-wrap .h-ai-suggest-card,
.h-ai-suggest-card-wrap .h-ai-suggest-actions { width: 340px; margin-top: 10px; }
.h-ai-suggest-card { max-width: 340px; }
.h-ai-suggest-card > * { max-width: 100%; }
/* Text reply draft — bubble + products share the card width so they line up
   right-aligned with the centered action row, matching the flex-card layout. */
.h-ai-suggest-card-wrap .h-ai-suggest-body,
.h-ai-suggest-card-wrap .h-ai-suggest-products { width: 340px; box-sizing: border-box; }
.h-ai-suggest-card-wrap .h-ai-suggest-body {
  background: var(--paper-2); border: 1px solid var(--border);
  padding: 11px 14px; font-size: 13px; line-height: 1.55; color: var(--ink);
  white-space: pre-wrap; word-break: break-word;
}
.h-ai-suggest-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px; margin: 8px 0 12px;
}
.h-ai-prod {
  display: block; position: relative;
  background: var(--paper); border: 1px solid var(--border);
  padding: 6px; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.h-ai-prod:has(.h-ai-prod-pick:checked) { border-color: var(--ai); }
.h-ai-prod:has(.h-ai-prod-pick:not(:checked)) {
  opacity: 0.55; background: var(--paper-2);
}
.h-ai-prod .h-ai-prod-pick {
  position: absolute; top: 6px; right: 6px; margin: 0;
  width: 18px; height: 18px;
  accent-color: var(--ai);
}
.h-ai-prod-vis {
  background: var(--paper-2);
  height: 90px;
  display: grid; place-items: center;
  overflow: hidden;
  margin-bottom: 6px;
}
.h-ai-prod-vis img { width: 100%; height: 100%; object-fit: cover; }
.h-ai-prod-vis .ph { color: var(--mid); font-size: 18px; }
.h-ai-prod-meta .sku {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  color: var(--mid); text-transform: uppercase; letter-spacing: .04em;
}
.h-ai-prod-meta .nm {
  font-size: 12px; color: var(--ink); margin-top: 1px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.h-ai-prod-meta .price {
  font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
  font-weight: 600; color: var(--accent); margin-top: 2px;
}
.h-ai-reject-reason {
  flex: 1; font: inherit; font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--border); background: var(--paper);
}
/* Action card pins to bottom of stream — margin-top:auto pushes it down when
   content is short; sticky bottom keeps it in view when stream overflows. */
.h-tl-action-card.sticky { margin-top: auto; position: sticky; bottom: 0; z-index: 10; }

/* Composer wrap — textarea fills, image button floats inside right. */
.h-compose-wrap { position: relative; flex: 1; display: flex; }
.h-compose-wrap .h-compose-inline { flex: 1; padding-right: 36px; }
.h-compose-img-btn {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 4px;
  cursor: pointer; color: var(--mid); padding: 4px;
}
.h-compose-img-btn:hover { color: var(--ink); }
.h-compose-img-btn .ico { width: 16px; height: 16px; }

/* Context strip — search term / file summary above the card preview. */
.h-ai-suggest-ctx {
  margin: 6px 0 10px; display: flex; flex-direction: column; gap: 4px;
}
.h-ai-suggest-ctx .ctx-row {
  font-size: 12px; color: var(--ink-2); line-height: 1.4;
}
.h-ai-suggest-ctx .lbl {
  display: inline-block; margin-right: 6px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ai); vertical-align: 1px;
}
/* Send button loading state — spinner shown while htmx request inflight. */
.h-ai-suggest-actions .h-ai-btn .spin-icon { display: none; }
.h-ai-suggest-actions .h-ai-btn:disabled .send-icon { display: none; }
.h-ai-suggest-actions .h-ai-btn:disabled .spin-icon {
  display: block;
  animation: ai-spin .7s linear infinite;
}
@keyframes ai-spin { to { transform: rotate(360deg); } }
/* Action row — two equal-width buttons, centered within card width. */
.h-ai-suggest-actions {
  display: flex; gap: 8px;
  margin: 0;
}
.h-ai-suggest-actions form { flex: 1; display: flex; }
.h-ai-suggest-actions .h-ai-btn.primary,
.h-ai-suggest-actions .h-ai-btn.ghost {
  flex: 1; justify-content: center; white-space: nowrap;
  padding: 13px 0; font-size: 13px;
}
.h-ai-suggest-actions .h-ai-btn.primary svg { width: 14px; height: 14px; }
.h-ai-suggest-actions .h-ai-btn.ghost {
  background: var(--paper); border: 1px solid var(--border); color: var(--ink-2);
}
/* ===== เอไอ → คะแนนคำแนะนำ (suggestion-score page) ===================== */
.set-ai-score .ai-info-card {
  border: 1px solid var(--border);
  background: var(--paper-2);
  padding: 14px 18px;
  margin: 16px 0;
}
.set-ai-score .ai-info-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.set-ai-score .ai-info-label {
  font-weight: 600; color: var(--ink); font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em;
}
.set-ai-score .ai-info-badge {
  font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--border); background: var(--paper);
  text-transform: uppercase; letter-spacing: .05em;
}
.set-ai-score .ai-info-badge.ok   { color: var(--ai); border-color: var(--ai); }
.set-ai-score .ai-info-badge.miss { color: var(--accent); border-color: var(--accent); }
.set-ai-score .ai-info-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px;
  font-size: 13px;
}
.set-ai-score .ai-info-row { display: flex; gap: 10px; align-items: baseline; }
.set-ai-score .ai-info-row .k { color: var(--mid); min-width: 180px; }
.set-ai-score .ai-info-row .v { color: var(--ink); }
.set-ai-score .ai-info-row .v code {
  font-family: 'IBM Plex Mono', monospace; font-size: 12px;
  background: var(--paper); padding: 1px 6px; border: 1px solid var(--border);
}

.set-ai-score .score-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 14px 0;
}
.set-ai-score .score-stats .stat {
  border: 1px solid var(--border); background: var(--paper);
  padding: 14px 16px;
}
.set-ai-score .score-stats .stat .n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 28px; font-weight: 600; color: var(--ink);
}
.set-ai-score .score-stats .stat .l { color: var(--mid); font-size: 12px; }

.set-ai-score .score-h {
  font-size: 14px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--mid); margin: 24px 0 10px;
}
.set-ai-score table {
  width: 100%; border-collapse: collapse; background: var(--paper);
  font-size: 13px;
}
.set-ai-score table th, .set-ai-score table td {
  border: 1px solid var(--border);
  padding: 8px 10px; text-align: left; vertical-align: top;
}
.set-ai-score table th {
  background: var(--paper-2); font-weight: 600; color: var(--mid);
  text-transform: uppercase; font-size: 11px; letter-spacing: .04em;
}
.set-ai-score table td.num {
  font-family: 'IBM Plex Mono', monospace;
  text-align: right; white-space: nowrap;
}
.set-ai-score .bk { font-weight: 600; color: var(--ink); }
.set-ai-score .bk-desc { color: var(--mid); font-size: 12px; margin-top: 2px; }
.set-ai-score .col-bk.ok   { background: color-mix(in srgb, var(--ai) 8%, transparent); }
.set-ai-score .col-bk.miss { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.set-ai-score .pred { font-weight: 600; color: var(--ink); }
.set-ai-score .skus { font-size: 11px; color: var(--mid); margin-top: 2px; }
.set-ai-score .meta { font-size: 11px; margin-top: 2px; }
.set-ai-score .muted { color: var(--mid); }
.set-ai-score .set-page-head .actions { margin-left: auto; display: flex; gap: 8px; }

.set-ai-score .score-flash {
  list-style: none; padding: 0; margin: 14px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.set-ai-score .score-flash li {
  padding: 8px 12px; border: 1px solid var(--border); background: var(--paper);
  font-size: 13px; color: var(--ink);
}
.set-ai-score .score-flash li.success { border-color: var(--ai); }
.set-ai-score .score-flash li.error   { border-color: var(--accent); color: var(--accent); }

.set-ai-score .case-help { margin: 14px 0 8px; font-size: 13px; }
.set-ai-score .case-list { display: flex; flex-direction: column; gap: 8px; }
.set-ai-score .case-row {
  border: 1px solid var(--border); background: var(--paper);
  padding: 12px 14px;
  display: grid; grid-template-columns: 1fr; gap: 8px;
}
.set-ai-score .case-row.is-labelled   { border-left: 4px solid var(--ai); }
.set-ai-score .case-row.is-unlabelled { border-left: 4px solid var(--accent); }
.set-ai-score .case-meta {
  display: flex; gap: 10px; align-items: center; font-size: 11px;
  text-transform: uppercase; letter-spacing: .04em;
}
.set-ai-score .case-source { color: var(--mid); }
.set-ai-score .case-id { color: var(--mid-2); }
.set-ai-score .case-pill { padding: 2px 8px; border: 1px solid var(--border); }
.set-ai-score .case-pill.ok   { color: var(--ai); border-color: var(--ai); }
.set-ai-score .case-pill.miss { color: var(--accent); border-color: var(--accent); }
.set-ai-score .case-text { font-size: 14px; color: var(--ink); padding: 4px 0; }
.set-ai-score .case-controls {
  display: grid; grid-template-columns: 180px 1fr auto; gap: 12px; align-items: end;
}
.set-ai-score .case-field {
  display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--mid);
}
.set-ai-score .case-field.grow { width: 100%; }
.set-ai-score .case-field.check {
  flex-direction: row; align-items: center; gap: 6px; padding-bottom: 8px;
}
.set-ai-score .case-field select,
.set-ai-score .case-field input[type=text] {
  font: inherit; font-size: 13px; padding: 6px 8px;
  border: 1px solid var(--border); background: var(--paper-2); color: var(--ink);
}
.set-ai-score .case-actions { display: flex; gap: 8px; }
.set-ai-score .case-delete-form { display: flex; justify-content: flex-end; margin-top: -8px; }
.set-ai-score .case-delete-btn {
  background: transparent; border: none; color: var(--accent);
  font-size: 12px; padding: 4px 6px; cursor: pointer;
}
.set-ai-score .case-delete-btn:hover { text-decoration: underline; }

/* ===== inbox bubble · media + file affordances ======================== */
/* Fixed boxes (object-fit) so the bubble reserves its space BEFORE the image
   arrives — max-* only let every loaded photo shove the timeline (CLS). */
.h-tl-bub-img {
  display: block; width: 260px; height: 240px; object-fit: contain;
  border: 1px solid var(--border); background: var(--paper-2);
}
.h-tl-bub-sticker { display: block; width: 160px; height: 160px; object-fit: contain; }
.h-tl-bub-video, .h-tl-bub-audio {
  display: block; max-width: 320px; width: 100%;
}
.h-tl-bub-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--paper-2);
  border: 1px solid var(--border); color: var(--ink);
  text-decoration: none; font-size: 13px; max-width: 320px;
}
.h-tl-bub-file:hover { border-color: var(--accent); color: var(--accent); }
.h-tl-bub-file .ic { color: var(--mid); display: inline-flex; }
.h-tl-bub-file .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-tl-bub-file .dl { color: var(--accent); font-weight: 700; }
.h-tl-bub-pending { color: var(--mid); font-style: italic; font-size: 13px; }
.h-tl-bub-pending em { color: var(--mid-2); font-style: normal; font-size: 11px; }


/* Resizable timeline ↔ reference-pane divider (home queue). Width persisted on a
   :root var by the small script in core/home.html; these rules + the grip live in
   the Django additions tail because they're app behaviour, not deck design.
   Selector mirrors the :has() rule's specificity so the var-driven basis wins. */
/* Initial load: col-2 (timeline) and col-3 (quote) split the post-list space
   equally. Once the user drags the resizer (or has a saved width), .h-main gets
   .h-ref-fixed and col-3 switches to its explicit --h-ref-w basis. */
.h-main:has(.h-tl-pane) .h-tl-pane { flex: 1 1 0; }
.h-main:has(.h-tl-pane) .h-ref-pane { flex: 1 1 0; }
.h-main.h-ref-fixed:has(.h-tl-pane) .h-ref-pane { flex: 0 0 var(--h-ref-w, 380px); }
.h-pane-resizer {
  flex: 0 0 6px; width: 6px; align-self: stretch;
  cursor: col-resize; background: transparent;
  margin: 0 -3px; z-index: 6; position: relative; touch-action: none;
}
.h-pane-resizer::before {
  content: ""; position: absolute; inset: 0 2px;
  background: var(--border); opacity: 0; transition: opacity .12s;
}
.h-pane-resizer:hover::before,
body.h-resizing .h-pane-resizer::before { opacity: 1; background: var(--accent); }
body.h-resizing, body.h-resizing * { user-select: none; cursor: col-resize !important; }


/* เอไอ-suggest-from-chat block in the col-3 quotation editor (core/_h_doc_line_ai.html).
   Sage เอไอ surface (var(--ai) family, never persimmon). Rows mirror the manual
   search results but carry a requested qty + a calibrated confidence badge.
   Lives in the Django additions tail — app behaviour, not deck design. */
.h-ref-ai-suggest { margin-top: 10px; }
.h-ref-ai-suggest .head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.h-ref-ai-suggest .head .lbl {
  font-family: 'IBM Plex Mono', monospace; font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ai-deep);
}
.h-ref-ai-suggest .head .refresh {
  font-size: 11px; color: var(--ai-deep); background: none;
  border: 1px solid var(--ai); padding: 3px 9px; cursor: pointer; border-radius: 0;
}
.h-ref-ai-suggest .head .refresh:hover { background: rgba(123, 143, 107, 0.12); }
.h-ref-ai-suggest .head .refresh:disabled { opacity: 0.5; cursor: progress; }
.ai-sg-row {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 9px; background: rgba(123, 143, 107, 0.07);
  border: 1px solid rgba(123, 143, 107, 0.28); cursor: pointer; margin-bottom: 6px;
}
.ai-sg-row:hover { background: rgba(123, 143, 107, 0.14); border-color: var(--ai); }
.ai-sg-row .thumb {
  width: 34px; height: 34px; flex: 0 0 34px; background: #F0ECE4; border-radius: 0;
  display: flex; align-items: center; justify-content: center; color: #c9c1b0;
  font-size: 18px; overflow: hidden;
}
.ai-sg-row .thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-sg-row .body { flex: 1; min-width: 0; }
.ai-sg-row .nm {
  display: block; font-size: 12.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ai-sg-row .meta {
  display: flex; gap: 7px; align-items: center; margin-top: 1px;
  font-size: 10.5px; color: var(--mid);
}
.ai-sg-row .qty, .ai-sg-row .conf, .ai-sg-row .code { font-family: 'IBM Plex Mono', monospace; }
.ai-sg-row .conf { font-weight: 700; }
.ai-sg-row .conf.hi { color: #3f7d3f; }
.ai-sg-row .conf.mid { color: #9a7d2e; }
.ai-sg-row .conf.lo { color: #b06a3a; }
.ai-sg-row .price { font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ai-sg-row .add { flex: 0 0 22px; text-align: center; font-size: 16px; font-weight: 700; color: var(--ai-deep); }
.ai-sg-warn { font-size: 10.5px; color: #b06a3a; margin: -2px 0 6px 42px; }
.ai-sg-empty { font-size: 11.5px; color: var(--mid); padding: 10px; text-align: center; }
.ai-sg-empty.err { color: var(--danger, #b04545); }
.ai-sg-foot { font-size: 10.5px; color: var(--mid); margin-top: 2px; }

/* ── Desktop guards for mobile-only home controls ──
   Must stay at the END of the file: `.h-tl-pane-actions` base rules above
   (display:flex) share specificity, so an earlier-placed hide loses on order. */
@media (min-width: 901px) {
  .h-tl-pane-actions--mobile-back { display: none; }
  /* mobile chrome (m.1 list bars + m.2 detail bars) — mobile only */
  .h-list-pane .mob-top,
  .h-tl-pane > .mob-top,
  .h-ref-pane > .mob-top,
  .h-rows .mob-home-list { display: none; }
  /* mobile PDF view of the quote builder — mobile only */
  .qb-mob { display: none; }
  /* sidebar-drawer opener for pages that suppress the default topbar — mobile only */
  .mob-burger { display: none; }
}
@media (max-width: 900px) {
  /* Timeline actions (เอไอตอบ + archive) sit top-CENTER below the 56px detail
     bar on mobile — top-right collided with the bar's ">" chevron. Box styling
     is in the base rule (~35419); only the position moves here. (After the
     absolute-positioning base rule, so this wins on file order.) */
  .h-tl-pane-actions {
    left: 50%; right: auto; transform: translateX(-50%); top: 64px;
    white-space: nowrap;
  }
  .h-tl-pane-actions .h-tl-ai-toggle .lbl { white-space: nowrap; }

  /* ── Quote builder → mobile shows the rendered PDF, not the 2-pane editor ──
     Editable branch roots at .qb-main; the read-only branch wraps .qb-main
     plus its "การจัดการ" side panel in .qb — hide both roots. */
  .builder-content .qb,
  .builder-content .qb-main { display: none !important; }
  .qb-mob { display: flex; flex-direction: column; height: 100dvh; background: var(--paper); }
  .qb-mob-bar {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    padding: 10px 12px; border-bottom: 1px solid var(--border);
  }
  .qb-mob-back { display: inline-flex; color: var(--ink); text-decoration: none; }
  .qb-mob-title { flex: 1; min-width: 0; }
  .qb-mob-no { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qb-mob-sub { font-size: 11.5px; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .qb-mob-open {
    flex-shrink: 0; padding: 7px 12px; font-size: 12.5px; font-weight: 600;
    background: var(--ink); color: var(--paper); text-decoration: none;
  }
  .qb-mob-pdf { flex: 1; width: 100%; border: 0; background: var(--paper-2); }

  /* Collapse toggle is a desktop control — pointless inside the mobile drawer
     (the .collapsed rules themselves are ≥901px-scoped; see ~27090). */
  .app-sidebar .sb-collapse-btn { display: none; }

  /* ── Sidebar-drawer opener (.mob-burger) — pages with no topbar burger ── */
  .mob-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; flex-shrink: 0; padding: 0;
    background: transparent; border: 1px solid var(--border);
    border-radius: 0; /* UA button default rounds it */
    color: var(--ink); cursor: pointer;
  }
  /* In the m.1 home top bar it sits flush with the brand mark — borderless. */
  .mob-top .mob-burger { border: none; width: auto; }

  /* ── Quotation list (.ql-*) → stacked rows; the 8-col desktop grid crushes ── */
  .ql-page { min-width: 0; }
  .ql-toolbar { padding: 12px 16px; }
  .ql-head { flex-wrap: wrap; gap: 8px; }
  .ql-filters-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .ql-search { width: 100%; }
  .ql-status-chips {
    display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .ql-status-chips .ql-chip { white-space: nowrap; flex-shrink: 0; }
  .ql-table { display: block; min-width: 0; overflow-x: hidden; }
  .ql-row { min-width: 0; }
  .ql-row.head { display: none; }
  .ql-row:not(.head) {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 3px 10px; padding: 12px 16px;
  }
  .ql-row .ql-check, .ql-row .ql-proj, .ql-row .ql-owner, .ql-row .ql-row-actions { display: none; }
  .ql-row .ql-cust-cell { order: -1; flex: 1 1 100%; min-width: 0; }
  .ql-row .ql-no { font-weight: 600; }
  .ql-row .ql-amt { margin-left: auto; font-weight: 700; text-align: right; }
  .ql-row .ql-date .ago { display: none; }
  .ql-footer { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }

  /* ── Customer list (.cl-*) → same stacked treatment ── */
  .cl-page { min-width: 0; }
  .cl-toolbar { padding: 12px 16px; }
  .cl-head { flex-wrap: wrap; gap: 8px; }
  .cl-filterbar { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .cl-search { width: 100%; }
  .cl-tag-cloud {
    display: flex; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .cl-tag-cloud .cl-tag { white-space: nowrap; flex-shrink: 0; }
  .cl-table { display: block; min-width: 0; overflow-x: hidden; }
  .cl-row { min-width: 0; }
  .cl-row.head { display: none; }
  .cl-row:not(.head) {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 3px 10px; padding: 12px 16px;
  }
  .cl-row .cl-value-cell, .cl-row .ql-row-actions { display: none; }
  .cl-row .cl-cust-cell { order: -1; flex: 1 1 100%; min-width: 0; }
  .cl-row .cl-last { margin-left: auto; text-align: right; }
}

/* ===== product hover card (static/js/hovercard.js) ===================== */
.pd-hovercard {
  position: fixed; z-index: 4000; display: none; width: 280px;
  background: var(--paper); border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(21, 20, 15, 0.18); pointer-events: none;
}
.pd-hover-img { display: block; width: 100%; height: 200px; object-fit: contain; background: var(--paper-2); }
.pd-hover-body { padding: 10px 12px 12px; }
.pd-hover-name { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.35; }
.pd-hover-meta { font-size: 11px; color: var(--mid); margin-top: 3px; }
.pd-hover-line { font-size: 11px; color: var(--ink-2); margin-top: 6px; }
.pd-hover-spec { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--ink-2); margin-top: 4px; }
.pd-hover-spec span:first-child { color: var(--mid); }