@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500;1,9..144,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── TOKENS — Sakura v4 (handoff 2026-05-07) ── */
:root {
 color-scheme: light;

 /* Surfaces */
 --paper: #fffaf8;
 --surface: #ffffff;
 --tint: #fff3f5;
 --tint2: #ffe4ec;

 /* Ink (text) */
 --ink: #2b1e1b;
 --ink2: #7d5a56;
 --ink3: #b09490;
 --ink4: #d9c4c0;

 /* Lines */
 --line: rgba(196,96,122,.10);
 --line2: rgba(196,96,122,.18);

 /* Accent — sakura pink */
 --accent: #c4607a;
 --accent-soft: #d97a92;
 --accent-deep: #8b2844;
 --accent-bg: #ffe4ec;

 /* Semantic */
 --green: #e8f5ee; --green-text: #1a6e44;
 --red-bg: #fdedf0; --red-text: #ac2640;
 --amber-bg: #fef3c7; --amber-text: #854d0e;
 --blue-bg: #dbeafe; --blue-text: #1e40af;
 --purple-bg: #ede9ff; --purple-text: #4a3a8f;

 /* Radius */
 --r-s: 6px;
 --r: 10px;
 --r-l: 14px;
 --r-pill: 999px;

 /* Shadows */
 --shadow-1: 0 1px 2px rgba(43,30,27,.04);
 --shadow-2: 0 2px 8px rgba(196,96,122,.06), 0 1px 2px rgba(43,30,27,.04);
 --shadow-3: 0 8px 28px rgba(196,96,122,.14);

 /* Type */
 --font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
 --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
 --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

 /* ─── LEGACY ALIASES (Phases 1–8 only; dropped in Phase 9) ─── */
 --bg: var(--paper);
 --bg2: var(--tint);
 --bg3: var(--tint2);
 --hover: var(--line);
 --text: var(--ink);
 --text2: var(--ink2);
 --text3: var(--ink3);
 --border: var(--line);
 --border2: var(--line2);
 --accent-text: var(--accent-deep);
 --radius: var(--r);
 --radius-lg: var(--r-l);
 --radius-xl: var(--r-pill);
 --shadow: var(--shadow-2);
 --shadow-sm: var(--shadow-1);
 --font-body: var(--font);
 --font-display: var(--font);
 --font-num: var(--mono);
}
@media (prefers-color-scheme: dark) {
 :root {
 --surface: #271a18;
 --bg: #1e1513;
 --bg2: #271a18;
 --bg3: #31211e;
 --hover: rgba(240,140,160,.07);
 --text: #f0e6e2;
 --text2: #c09a94;
 --text3: #8a6e6a;
 --border: rgba(255,150,130,.1);
 --border2: rgba(255,150,130,.2);
 --accent: #e8849a;
 --accent-bg: #3a1e25;
 --accent-text: #f5b8c8;
 --green: #192e22;
 --green-text: #7dd4b0;
 --red-bg: #391920;
 --red-text: #f09595;
 --shadow: 0 2px 16px rgba(0,0,0,.35);
 --shadow-sm: 0 1px 5px rgba(0,0,0,.22);
 }
}

/* ── RESET ── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
 font-family: var(--font-body);
 background: var(--bg2);
 color: var(--text);
 font-size: 14px;
 line-height: 1.6;
 height: 100vh;
 overflow: hidden;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
#app {
 display: flex;
 flex-direction: column;
 height: 100vh;
 max-width: 1600px;
 margin: 0 auto;
 padding: 10px 14px;
 gap: 8px;
}

/* ── TOPBAR ── */
.topbar {
 display: flex;
 align-items: center;
 gap: 12px;
 padding: 8px 16px;
 background: var(--bg);
 border-radius: var(--radius-xl);
 box-shadow: var(--shadow);
 flex-shrink: 0;
}
.app-brand {
 font-family: var(--font);
 font-size: 19px;
 font-weight: 500; color: var(--accent);
 letter-spacing: -.4px;
 white-space: nowrap;
 padding-right: 10px;
 border-right: 1.5px solid var(--border2);
}
.tabs { display: flex; gap: 4px; }
.tab {
 padding: 7px 18px;
 font-size: 13.5px;
 font-family: inherit;
 cursor: pointer;
 color: var(--text2);
 background: transparent;
 border: none;
 border-radius: var(--radius-xl);
 font-weight: 500;
 transition: all .15s;
}
.tab:hover { background: var(--bg2); color: var(--text); }
.tab.active {
 color: var(--accent-text);
 background: var(--accent-bg);
 font-weight: 700;
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pronoun-picker { display: flex; gap: 5px; padding: 3px; background: var(--bg2); border-radius: var(--radius-xl); }
.pronoun-chip {
 display: inline-flex; align-items: center; gap: 4px;
 padding: 4px 11px; border-radius: var(--radius-xl);
 border: none; background: transparent;
 font-family: inherit; font-size: 12px; font-weight: 600;
 color: var(--text2); cursor: pointer;
 transition: background .15s, color .15s, transform .15s;
}
.pronoun-chip:hover { background: var(--accent-bg); color: var(--accent); }
.pronoun-chip.active { background: var(--surface); color: var(--accent); box-shadow: 0 1px 4px rgba(43,30,27,.08); }
.pronoun-chip .pn-customer { color: var(--text3); font-weight: 500; }
.pronoun-chip .pn-sep { opacity: .45; font-size: 10px; }
.pronoun-chip .pn-shop { font-weight: 700; }
.pronoun-chip.active .pn-customer { color: var(--accent); opacity: .65; font-weight: 500; }
.pronoun-chip.active .pn-shop { color: var(--accent); font-weight: 700; }
html[data-theme=dark] .pronoun-chip.active { background: var(--bg3); }
.sync-btn {
 padding: 6px 14px;
 border-radius: var(--radius-xl);
 border: 1.5px solid var(--border2);
 font-size: 12.5px;
 font-family: inherit;
 cursor: pointer;
 background: transparent;
 color: var(--text2);
 font-weight: 600;
 transition: all .15s;
}
.sync-btn:hover { background: var(--accent-bg); border-color: var(--accent); color: var(--accent); }
.sync-btn.syncing { opacity: .5; pointer-events: none; }

/* ── PILL BUTTONS ── */
.pill-btn {
 padding: 5px 14px;
 border-radius: var(--radius-xl);
 border: 1.5px solid var(--border2);
 font-size: 12px;
 font-family: inherit;
 cursor: pointer;
 background: transparent;
 color: var(--text3);
 font-weight: 600;
 transition: all .15s;
 white-space: nowrap;
}
.pill-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.pill-btn.active {
 background: var(--accent);
 color: #fff; border-color: var(--accent);
 box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── PANELS ── */
.panel { display: none; flex: 1; gap: 10px; min-height: 0; }
.panel.active { display: flex; }
.col {
 background: var(--bg);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-sm);
 padding: 14px 16px;
 overflow-y: auto;
 min-height: 0;
}
.col-left { width: 34%; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; }
.col-right { flex: 1; display: flex; flex-direction: column; }

/* ── SEARCH ── */
.search-input {
 width: 100%;
 padding: 10px 16px;
 border-radius: var(--radius-xl);
 border: 1.5px solid var(--border2);
 font-size: 13.5px;
 font-family: inherit;
 background: var(--bg2);
 color: var(--text);
 outline: none;
 transition: border-color .18s, box-shadow .18s;
 flex-shrink: 0;
}
.search-input:focus {
 border-color: var(--accent);
 box-shadow: 0 0 0 3px rgba(196,96,122,.12);
 background: var(--bg);
}
.search-input::placeholder { color: var(--text3); }
.result-count { font-size: 11.5px; color: var(--text3); padding: 2px 4px; flex-shrink: 0; font-weight: 500; }
.result-list { flex: 1; overflow-y: auto; }
.result-item {
 padding: 9px 12px;
 border-radius: var(--radius);
 cursor: pointer;
 margin-bottom: 3px;
 transition: all .12s;
 border: 1.5px solid transparent;
}
.result-item:hover { background: var(--bg2); }
.result-item.active { background: var(--accent-bg); border-color: var(--accent); }
.result-item.keyboard-active { background: var(--accent-bg); border-color: var(--accent); }
.result-item .ri-name { font-size: 13px; font-weight: 600; }
.result-item .ri-meta { font-size: 11.5px; color: var(--text2); margin-top: 2px; }

/* ── PILLS (status badges) ── */
.pill { display: inline-block; padding: 2px 10px; border-radius: var(--radius-xl); font-size: 11px; font-weight: 700; }
.pill-green { background: var(--green); color: var(--green-text); }
.pill-red { background: var(--red-bg); color: var(--red-text); }
.pill-gray { background: var(--bg2); color: var(--text3); }

/* ── REUSABLE PRIMITIVES ── */
.section-label {
 font-size: 10.5px; font-weight: 700; color: var(--accent);
 letter-spacing: .5px; text-transform: uppercase; margin-bottom: 4px;
}
.section-label.muted { color: var(--text2); }
.section-card {
 background: var(--surface, var(--bg)); border: 1.5px solid var(--border);
 border-radius: var(--radius-lg, 10px); padding: 11px 13px;
 display: flex; flex-direction: column; gap: 8px;
}

/* Buttons (semantic) */
.btn { padding: 8px 18px; border-radius: var(--radius); font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: opacity .15s, background .15s, border-color .15s, color .15s; border: 1.5px solid transparent; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { opacity: .87; }
.btn-ghost { background: transparent; border-color: var(--border2); color: var(--text2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* Modal primitives — shared by change-PIN, shortcuts, admin */
.modal-overlay {
 position: fixed; inset: 0; background: rgba(43,30,27,.36);
 backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
 display: none; align-items: center; justify-content: center;
 z-index: 200; padding: 20px;
}
.modal-overlay.show { display: flex; animation: modalFade .18s ease-out; }
@keyframes modalFade { from { opacity: 0; } }
.modal-card {
 background: var(--surface); border-radius: var(--radius-lg);
 box-shadow: 0 12px 48px rgba(43,30,27,.22);
 padding: 26px 28px; width: 100%; max-width: 360px;
 display: flex; flex-direction: column; gap: 14px;
 animation: modalSlide .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalSlide { from { transform: translateY(8px) scale(.97); opacity: 0; } }
.modal-card.wide { max-width: 520px; }
.modal-title { font-family: var(--font); font-size: 19px; font-weight: 500; color: var(--text); letter-spacing: -.2px; }
.modal-sub { font-size: 12.5px; color: var(--text2); margin-top: -8px; }
.modal-field { display: flex; flex-direction: column; gap: 5px; }
.modal-field label { font-size: 11px; font-weight: 700; color: var(--text2); text-transform: uppercase; letter-spacing: .5px; }
.modal-field input {
 padding: 10px 13px; border: 1.5px solid var(--border);
 border-radius: var(--radius); font-family: inherit; font-size: 14px;
 background: var(--bg); color: var(--text); outline: none;
 transition: border-color .15s, box-shadow .15s;
}
.modal-field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,96,122,.12); }
.modal-error { color: var(--red-text); font-size: 12.5px; min-height: 16px; font-weight: 500; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* Shortcut sheet */
.kbd-grid { display: grid; grid-template-columns: 1fr; gap: 4px; }
.kbd-row {
 display: grid; grid-template-columns: 1fr auto; gap: 14px;
 align-items: center; padding: 9px 4px;
 border-bottom: 1px solid var(--border); font-size: 13px;
}
.kbd-row:last-child { border-bottom: none; }
.kbd-row .kbd-desc { color: var(--text); }
.kbd-row .kbd-keys { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.kbd-row .kbd-plus { font-size: 11px; color: var(--text3); }
.kbd-section { font-family: var(--font); font-size: 14px; color: var(--accent); margin: 12px 0 4px; padding-left: 4px; }
.kbd-section:first-child { margin-top: 0; }
kbd, .kbd {
 display: inline-block; padding: 3px 8px; min-width: 22px; text-align: center;
 font-size: 11px; font-weight: 600;
 background: var(--bg2); border: 1px solid var(--border2);
 border-bottom-width: 2px; border-radius: 5px;
 font-family: ui-monospace, SF Mono, Menlo, monospace;
 color: var(--text2); line-height: 1.2;
}
/* ── USER MENU (avatar dropdown) ── */
.user-menu { position: relative; }
.user-trigger {
 display: inline-flex; align-items: center; gap: 7px;
 padding: 4px 10px 4px 4px;
 border-radius: var(--radius-xl);
 border: 1.5px solid var(--border2);
 background: transparent; cursor: pointer;
 font-family: inherit; color: var(--text2);
 transition: border-color .15s, background .15s, color .15s;
}
.user-trigger:hover, .user-menu.open .user-trigger {
 border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
}
.user-avatar {
 width: 26px; height: 26px; border-radius: 50%;
 background: var(--accent); color: #fff;
 display: inline-flex; align-items: center; justify-content: center;
 font-weight: 700; font-size: 12px; text-transform: uppercase;
 letter-spacing: .3px; flex-shrink: 0;
}
.user-caret { transition: transform .18s; opacity: .7; }
.user-menu.open .user-caret { transform: rotate(180deg); }

.user-dropdown {
 position: absolute; top: calc(100% + 6px); right: 0;
 width: 260px; padding: 6px;
 background: var(--surface);
 border: 1px solid var(--border2);
 border-radius: var(--radius-lg);
 box-shadow: 0 12px 36px rgba(43,30,27,.18), 0 1px 4px rgba(43,30,27,.06);
 z-index: 60; display: none;
 animation: uddOpen .16s cubic-bezier(.34,1.56,.64,1);
}
.user-menu.open .user-dropdown { display: block; }
@keyframes uddOpen { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.udd-header { padding: 8px 12px 10px; }
.udd-name { font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--text); letter-spacing: -.2px; }
.udd-role {
 display: inline-block; margin-top: 3px;
 font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
 color: var(--accent); background: var(--accent-bg);
 padding: 1px 8px; border-radius: 10px;
}
.udd-role.role-user { color: var(--text2); background: var(--bg2); }

.udd-section { padding: 6px 12px 8px; }
.udd-label {
 font-size: 10px; font-weight: 700; color: var(--text3);
 text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.udd-divider { height: 1px; background: var(--border); margin: 4px 8px; }

.udd-item {
 display: flex; align-items: center; gap: 10px; width: 100%;
 padding: 8px 12px; border: none; background: transparent;
 border-radius: var(--radius); cursor: pointer;
 font-family: inherit; font-size: 13px; font-weight: 500;
 color: var(--text); text-align: left; text-decoration: none;
 transition: background .12s, color .12s;
}
.udd-item:hover { background: var(--accent-bg); color: var(--accent); }
.udd-item .udi-text { flex: 1; }
.udd-item .udi-key {
 font-size: 11px; padding: 2px 7px; min-width: 22px; text-align: center;
 background: var(--bg2); border: 1px solid var(--border2);
 border-bottom-width: 2px; border-radius: 5px;
 font-family: ui-monospace, SF Mono, Menlo, monospace;
 color: var(--text2); line-height: 1.2;
}
.udd-item.is-danger { color: var(--red-text); }
.udd-item.is-danger:hover { background: var(--red-bg); color: var(--red-text); }

/* Theme picker repositioned for dropdown */
.user-dropdown .theme-picker { padding: 0; gap: 8px; }
.user-dropdown .theme-swatch { width: 22px; height: 22px; }
.user-dropdown .theme-swatch::after { top: auto; bottom: calc(100% + 10px); }
.user-dropdown .theme-swatch::before { top: auto; bottom: calc(100% + 4px); border-radius: 0 0 9px 9px; }

@media (max-width: 680px) {
 .user-dropdown { width: 240px; }
 .user-trigger .user-avatar { width: 28px; height: 28px; }
}

/* ── COPYABLE ── */
.copyable { cursor: pointer; position: relative; transition: background .15s; border-radius: var(--radius); }
.copyable:hover { background: var(--hover); }
.copyable:active { transform: scale(.999); }
.flash-badge {
 position: absolute; top: 6px; right: 10px;
 font-size: 10px; font-weight: 700;
 color: var(--green-text); background: var(--green);
 padding: 2px 9px 2px 22px; border-radius: var(--radius-xl);
 opacity: 0; pointer-events: none; z-index: 2;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-6.5' stroke='%23166040' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
 background-repeat: no-repeat;
 background-position: 6px center;
 background-size: 12px 12px;
 background-color: var(--green);
}
.flash-badge.show { animation: flash-in-out 1.2s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes flash-in-out {
 0% { opacity: 0; transform: translateY(-2px) scale(.92); }
 18% { opacity: 1; transform: translateY(0) scale(1); }
 72% { opacity: 1; transform: translateY(0) scale(1); }
 100% { opacity: 0; transform: translateY(-2px) scale(.96); }
}
/* New copy-zone markup (Phase 2+): .copyable[data-copy-zone] uses .flashed for tint pulse. */
.copyable.flashed { background: var(--accent-bg); transition: background .25s; }
.copyable[data-copy-zone="row"]:hover { background: var(--tint); }
.copyable[data-copy-zone="inline"] { cursor: pointer; }
html[data-theme=dark] .flash-badge {
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-6.5' stroke='%237dd4b0' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
 background-repeat: no-repeat;
 background-position: 6px center;
 background-size: 12px 12px;
 background-color: var(--green);
}

/* ── PRODUCT DETAIL ── */
.detail-header {
 display: flex; justify-content: space-between; align-items: flex-start;
 gap: 10px; margin-bottom: 10px; flex-shrink: 0;
}
.detail-header h2 { font-size: 15px; font-weight: 700; flex: 1; line-height: 1.45; }
.add-quote-btn {
 padding: 6px 16px; border-radius: var(--radius-xl);
 border: 1.5px solid var(--accent);
 background: transparent; color: var(--accent);
 font-size: 12px; font-family: inherit; font-weight: 700;
 cursor: pointer; white-space: nowrap; transition: all .15s;
}
.add-quote-btn:hover { background: var(--accent); color: #fff; }
.detail-scroll { flex: 1; overflow-y: auto; min-height: 0; }
.detail-top-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.detail-left-stack { display: flex; flex-direction: column; }
.detail-section {
 padding: 11px 14px;
 border-bottom: 1px solid var(--border);
}
.ds-label {
 font-size: 10.5px; color: var(--accent); margin-bottom: 5px;
 letter-spacing: .6px; font-weight: 700; text-transform: uppercase;
}
.ds-value { font-size: 13px; color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.ds-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.ds-row { font-size: 13px; line-height: 1.55; }
.ds-row span:first-child { color: var(--text3); font-size: 11.5px; }

/* Link rows */
.ds-link-row { display: flex; gap: 8px; align-items: center; font-size: 12px; padding: 3px 0; }
.ds-link-url {
 flex: 1; min-width: 0;
 overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 color: var(--accent); text-decoration: none; font-size: 12px;
}
.ds-link-url:hover { text-decoration: underline; }
.link-copy-btn {
 flex-shrink: 0; width: 90px;
 background: none; border: 1.5px solid var(--border2); border-radius: 6px;
 padding: 3px 0; cursor: pointer; color: var(--text2);
 font-size: 12px; font-weight: 700; text-align: center;
 transition: background .15s, color .15s, border-color .15s;
}
.link-copy-btn:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* ── QUOTE ── */
.quote-tabs {
 display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0;
 padding-bottom: 8px; border-bottom: 1.5px solid var(--border);
}
.qtab {
 padding: 5px 14px; font-size: 12px; font-family: inherit; font-weight: 600;
 cursor: pointer; border-radius: var(--radius-xl);
 background: var(--bg2); border: 1.5px solid var(--border);
 color: var(--text2); display: flex; align-items: center; gap: 6px;
 transition: all .12s;
}
.qtab:hover { border-color: var(--accent); color: var(--accent); }
.qtab.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.qtab .close { font-size: 11px; opacity: .5; cursor: pointer; }
.qtab .close:hover { opacity: 1; }
.qtab-add {
 padding: 5px 14px; font-size: 14px; font-family: inherit;
 cursor: pointer; color: var(--accent);
 background: transparent; border: 1.5px dashed var(--accent);
 border-radius: var(--radius-xl); opacity: .6; transition: opacity .15s;
}
.qtab-add:hover { opacity: 1; background: var(--accent-bg); }
.quote-product-results {
 position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 50;
 max-height: 55vh; overflow-y: auto;
 background: var(--bg); border: 1.5px solid var(--border2);
 border-radius: var(--radius); box-shadow: var(--shadow);
 display: none;
}
.quote-product-results:not(:empty) { display: block; }
.quote-items { flex: 1; overflow-y: auto; min-height: 60px; }
.qi {
 display: flex; gap: 8px; align-items: center;
 padding: 7px 2px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.qi-num { min-width: 18px; color: var(--text3); font-size: 11px; font-weight: 700; }
.qi-name-wrap { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.qi-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.qi-stock { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 10px; white-space: nowrap; flex-shrink: 0; }
.qi-stock-ok { background: var(--green); color: var(--green-text); }
.qi-stock-out { background: var(--red-bg); color: var(--red-text); }
.qi-qty {
 display: flex; align-items: center;
 border: 1.5px solid var(--border2); border-radius: var(--radius-xl); overflow: hidden;
}
.qi-qty button {
 width: 27px; height: 27px; border: none;
 background: var(--bg2); cursor: pointer; font-size: 14px;
 color: var(--text2); display: flex; align-items: center; justify-content: center;
 transition: background .1s;
}
.qi-qty button:hover { background: var(--accent-bg); color: var(--accent); }
.qi-qty .qty-val { width: 28px; text-align: center; font-size: 13px; font-weight: 700; }
.qi-prices { min-width: 90px; text-align: right; }
.qi-orig { text-decoration: line-through; color: var(--text3); font-size: 11px; margin-right: 4px; font-variant-numeric: tabular-nums; }
.qi-sale { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.qi-pct { font-size: 11px; color: var(--text3); margin-left: 3px; }
.qi-remove { cursor: pointer; color: var(--text3); font-size: 14px; padding: 3px 5px; border-radius: var(--radius); transition: all .12s; }
.qi-remove:hover { color: var(--red-text); background: var(--red-bg); }
.quote-options {
 display: flex; flex-direction: column; gap: 8px;
 padding: 10px 0 12px; flex-shrink: 0;
 border-bottom: 1px solid var(--border);
}
.opt-section {
 display: grid;
 grid-template-columns: 64px 1fr;
 align-items: center;
 gap: 4px 12px;
}
.opt-label {
 font-size: 10.5px; color: var(--accent); margin: 0;
 letter-spacing: .6px; font-weight: 700; text-transform: uppercase;
 white-space: nowrap;
}
.opt-group { display: flex; gap: 5px; flex-wrap: nowrap; min-width: 0; }
.opt-group .pill-btn { padding: 5px 11px; flex-shrink: 0; }
.opt-custom-wrap {
 grid-column: 2;
 display: flex;
}
.opt-custom-input {
 width: 100%; padding: 6px 10px;
 border: 1.5px solid var(--border); border-radius: var(--radius);
 font-size: 13px; font-family: inherit;
 background: var(--bg); color: var(--text); outline: none;
 transition: border-color .15s;
}
.opt-custom-input:focus { border-color: var(--accent); }
.hidden { display: none !important; }
.quote-summary { flex-shrink: 0; margin-bottom: 10px; }
.qs-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }
.qs-row .qs-val { font-variant-numeric: tabular-nums; }
.qs-row.total { font-weight: 700; font-size: 16px; border-top: 1.5px solid var(--border); padding-top: 7px; margin-top: 5px; }
.qs-row.total .qs-val { color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.2px; }
.qs-discount { color: var(--red-text); font-weight: 600; }
.quote-preview-label { font-size: 11px; color: var(--text3); margin-bottom: 6px; flex-shrink: 0; font-weight: 600; letter-spacing: .3px; }
.quote-preview-label .hint { opacity: .5; }
.quote-preview {
 background: var(--bg2); border: 1.5px solid var(--border);
 border-radius: var(--radius-lg); padding: 14px 16px;
 font-size: 12.5px; line-height: 1.75; cursor: pointer;
 flex: 1; overflow-y: auto; min-height: 80px;
 transition: all .15s; white-space: pre-wrap; word-break: break-word; position: relative;
 font-family: var(--font-body);
}
.quote-preview:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,96,122,.09); }
.paste-zone {
 margin-top: 8px; padding: 10px 14px;
 border: 1.5px dashed var(--border2); border-radius: var(--radius-lg);
 font-size: 12px; color: var(--text3); min-height: 36px; flex-shrink: 0; outline: none;
 font-family: inherit; transition: border-color .15s;
}
.paste-zone:empty:before { content: attr(data-placeholder); }
.paste-zone:focus { border-color: var(--accent); }

/* ── FAQ ── */
.faq-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-shrink: 0; }
.faq-header h2 { font-size: 15px; font-weight: 700; }
.faq-steps { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 5px; }
.faq-step {
 background: var(--bg2); border-radius: var(--radius-lg);
 padding: 11px 14px; font-size: 13px; line-height: 1.7;
 border: 1.5px solid var(--border); cursor: pointer; position: relative;
 transition: all .14s; display: flex; gap: 8px; align-items: flex-start;
}
.faq-step:hover { border-color: var(--accent); background: var(--accent-bg); }
.faq-step:active { transform: scale(.999); }
.faq-step .step-num {
 font-size: 10px; color: var(--accent); font-weight: 700;
 flex-shrink: 0; min-width: 16px; padding-top: 3px;
 background: var(--accent-bg); width: 20px; height: 20px;
 border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.faq-step .step-text { white-space: pre-wrap; word-break: break-word; flex: 1; }
.copy-all-btn {
 padding: 7px 18px; border-radius: var(--radius-xl);
 border: 1.5px solid var(--border2);
 background: transparent; color: var(--text2);
 font-size: 12.5px; font-family: inherit; font-weight: 700;
 cursor: pointer; transition: all .15s; white-space: nowrap;
}
.copy-all-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.copy-all-btn:active { transform: scale(.97); }

/* ── TOAST ── */
.toast {
 position: fixed; bottom: 24px; right: 24px;
 display: inline-flex; align-items: center; gap: 8px;
 background: var(--text); color: var(--surface);
 padding: 10px 16px 10px 12px; border-radius: var(--radius-xl);
 font-size: 13px; font-weight: 600; z-index: 1000;
 box-shadow: 0 8px 28px rgba(43,30,27,.22), 0 1px 3px rgba(43,30,27,.08);
 animation: toastIn .28s cubic-bezier(.34,1.56,.64,1);
}
.toast::before {
 content: ''; width: 18px; height: 18px; flex-shrink: 0;
 background: var(--accent); border-radius: 50%;
 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.2l3 3 6-6.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' fill='none'/></svg>");
 background-repeat: no-repeat; background-position: center;
 background-size: 14px 14px;
}
.toast.hidden { display: none; }
@keyframes toastIn {
 from { opacity:0; transform: translateX(8px) translateY(6px) scale(.95); }
}
html[data-theme=dark] .toast { background: var(--bg3); color: var(--text); }
.empty-state {
 display: flex; flex-direction: column; align-items: center; justify-content: center;
 height: 100%; gap: 14px; padding: 24px; text-align: center;
}
.empty-state .es-art {
 width: 96px; height: 96px; opacity: .55;
 animation: esFloat 4.5s ease-in-out infinite;
}
.empty-state .es-art path,
.empty-state .es-art circle,
.empty-state .es-art line { stroke: var(--accent); }
.empty-state .es-art .es-fill { fill: var(--accent-bg); stroke-width: 0; }
.empty-state .es-title {
 font-family: var(--font); font-weight: 500;
 font-size: 18px; color: var(--text); letter-spacing: -.2px;
}
.empty-state .es-hint {
 font-size: 12.5px; color: var(--text3); font-weight: 500; line-height: 1.7;
 max-width: 280px;
}
.empty-state .es-hint kbd {
 display: inline-block; padding: 1px 6px; font-size: 11px;
 background: var(--bg2); border: 1px solid var(--border2); border-radius: 4px;
 font-family: ui-monospace, SF Mono, Menlo, monospace; color: var(--text2);
 margin: 0 1px;
}
@keyframes esFloat {
 0%, 100% { transform: translateY(0); }
 50% { transform: translateY(-5px); }
}

/* ── COPY FLASH ── */
@keyframes copied-flash { 0%{background:var(--accent-bg)} 100%{background:transparent} }
.copyable.copied { animation: copied-flash .6s ease-out forwards; }
.faq-step.copied { animation: copied-flash .6s ease-out forwards; }
.quote-preview.copied { animation: copied-flash .6s ease-out forwards; }

/* ── QUOTE 2-col preview ── */
.quote-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; min-height: 0; }
.quote-preview-col { display: flex; flex-direction: column; min-height: 0; }
.preview-col-label { font-size: 10.5px; font-weight: 700; color: var(--accent); margin-bottom: 5px; flex-shrink: 0; letter-spacing: .5px; text-transform: uppercase; }

/* ── NO DETAIL NOTE ── */
.no-detail-note { font-size: 12px; color: var(--text3); padding: 8px 14px; }

/* ── SKELETON LOADER ── */
.sk-detail { display: flex; flex-direction: column; gap: 14px; padding: 4px; animation: skFade .15s ease-out; }
@keyframes skFade { from { opacity: 0; } }
.sk-line, .sk-block {
 background: linear-gradient(90deg,
 var(--bg2) 0%, var(--bg3) 50%, var(--bg2) 100%);
 background-size: 220% 100%;
 border-radius: 6px; animation: shimmer 1.4s ease-in-out infinite;
}
.sk-line { height: 14px; }
.sk-line.title { height: 22px; width: 65%; }
.sk-line.label { height: 11px; width: 22%; opacity: .7; }
.sk-line.short { width: 40%; }
.sk-line.medium { width: 70%; }
.sk-line.full { width: 100%; }
.sk-block { height: 60px; }
.sk-row { display: flex; gap: 8px; align-items: center; }
.sk-row .sk-line { flex: 1; }
@keyframes shimmer {
 0% { background-position: 110% 0; }
 100% { background-position: -110% 0; }
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ════════════════════════════
 RESPONSIVE — TABLET ≤ 900px
 ════════════════════════════ */
@media (max-width: 900px) {
 #app { padding: 8px 10px; }
 .col-left { width: 38%; }
 .quote-previews { grid-template-columns: 1fr; }
}

/* ════════════════════════════
 RESPONSIVE — MOBILE ≤ 680px
 ════════════════════════════ */
@media (max-width: 680px) {
 body { overflow: auto; }
 #app { height: auto; min-height: 100vh; padding: 6px 8px; overflow: visible; }

 /* Topbar: brand hidden, tabs scroll */
 .topbar { flex-wrap: wrap; padding: 8px 10px; gap: 8px; border-radius: var(--radius-lg); }
 .app-brand { display: none; }
 .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
 .tabs::-webkit-scrollbar { display: none; }
 .tab { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
 .topbar-right { width: 100%; justify-content: space-between; }

 /* Panels stack vertically */
 .panel { flex-direction: column; height: auto; overflow: visible; }
 .col { overflow: visible; }
 .col-left { width: 100%; max-height: 45vh; overflow-y: auto; }
 .col-right { width: 100%; }

 /* Product detail: single column */
 .detail-top-grid { grid-template-columns: 1fr; }

 /* Quote: options column */
 .quote-options { flex-direction: column; gap: 10px; }
 .quote-previews { grid-template-columns: 1fr; }

 /* FAQ steps */
 .faq-header { flex-wrap: wrap; gap: 8px; }
}

/* ── HDSD button in quote items ── */
.qi-hdsd {
 flex-shrink: 0;
 padding: 7px 16px;
 min-height: 32px;
 border-radius: var(--radius-xl);
 border: 1.5px solid var(--border2);
 background: none;
 font-size: 12.5px;
 font-family: inherit;
 font-weight: 700;
 color: var(--text3);
 cursor: pointer;
 letter-spacing: .3px;
 transition: all .15s;
}
.qi-hdsd:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

/* ── Send guide section ── */
.send-guide-section {
 display: flex;
 align-items: center;
 gap: 10px;
 flex-shrink: 0;
 margin: 8px 0;
 padding: 4px 0;
}
.send-guide-label {
 font-size: 10.5px;
 font-weight: 700;
 color: var(--accent);
 letter-spacing: .5px;
 text-transform: uppercase;
 white-space: nowrap;
 flex-shrink: 0;
}
.send-guide-text {
 flex: 1;
 padding: 6px 12px;
 background: var(--bg2);
 border: 1.5px solid var(--border);
 border-radius: var(--radius-lg);
 font-size: 13px;
 cursor: pointer;
 transition: all .15s;
 min-height: 28px;
}
.send-guide-text:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,96,122,.09); }

/* ── COPYABLE INLINE ── */
.copyable-inline { cursor: pointer; color: var(--accent); text-decoration: underline dotted; border-radius: 3px; padding: 0 2px; transition: background .15s; }
.copyable-inline:hover { background: var(--hover); text-decoration: underline; }

/* ── QUOTE PANEL: wider left column ── */
#panel-quote .col-left { width: 50%; }


/* ── THEMES ── */
/* ROSE — Sakura lift: clean cherry-blossom pink, kept-cheerful accent */
html[data-theme=rose] {
 color-scheme: light;
 --surface:#ffffff;
 --bg:#fffaf8;--bg2:#ffeaee;--bg3:#fcd6dd;--hover:rgba(214,98,126,.08);
 --text:#2b1e1b;--text2:#7d5a56;--text3:#b09490;
 --border:rgba(214,98,126,.12);--border2:rgba(214,98,126,.26);
 --accent:#c4607a;--accent-bg:#ffe4ec;--accent-text:#8b2844;
 --green:#e6f5ee;--green-text:#166040;--red-bg:#fdedf0;--red-text:#ac2640;
 --shadow:0 2px 16px rgba(214,98,126,.10);--shadow-sm:0 1px 5px rgba(214,98,126,.07);
 /* Sakura v4 new-token aliases (so migrated selectors theme correctly) */
 --paper:var(--bg);--tint:var(--bg2);--tint2:var(--bg3);
 --ink:var(--text);--ink2:var(--text2);--ink3:var(--text3);--ink4:#d9c4c0;
 --line:var(--border);--line2:var(--border2);
 --accent-soft:#d97a92;--accent-deep:var(--accent-text);
 --shadow-1:var(--shadow-sm);--shadow-2:var(--shadow);--shadow-3:0 8px 28px rgba(196,96,122,.14);
}
/* LAVENDER — Iris bloom: cleaner lilac, livelier */
html[data-theme=lavender] {
 color-scheme: light;
 --surface:#ffffff;
 --bg:#faf8ff;--bg2:#ede4ff;--bg3:#d8c8ff;--hover:rgba(135,110,220,.08);
 --text:#1e1a2e;--text2:#5a4e82;--text3:#9088b8;
 --border:rgba(135,110,220,.12);--border2:rgba(135,110,220,.26);
 --accent:#7c6bc9;--accent-bg:#e2d6ff;--accent-text:#4a3a8f;
 --green:#e6f5ee;--green-text:#166040;--red-bg:#fdedf0;--red-text:#ac2640;
 --shadow:0 2px 16px rgba(135,110,220,.10);--shadow-sm:0 1px 5px rgba(135,110,220,.07);
 --paper:var(--bg);--tint:var(--bg2);--tint2:var(--bg3);
 --ink:var(--text);--ink2:var(--text2);--ink3:var(--text3);--ink4:#c5bdd9;
 --line:var(--border);--line2:var(--border2);
 --accent-soft:#9788d6;--accent-deep:var(--accent-text);
 --shadow-1:var(--shadow-sm);--shadow-2:var(--shadow);--shadow-3:0 8px 28px rgba(135,110,220,.18);
}
/* SAGE — Tea garden lift: fresher matcha */
html[data-theme=sage] {
 color-scheme: light;
 --surface:#ffffff;
 --bg:#f8fbf6;--bg2:#e3eedf;--bg3:#c8e0c8;--hover:rgba(76,160,98,.08);
 --text:#1a2e1c;--text2:#4a7a56;--text3:#88ad90;
 --border:rgba(76,160,98,.12);--border2:rgba(76,160,98,.26);
 --accent:#3d8a56;--accent-bg:#d8efde;--accent-text:#1d5e34;
 --green:#e6f5ee;--green-text:#166040;--red-bg:#fdedf0;--red-text:#ac2640;
 --shadow:0 2px 16px rgba(76,160,98,.10);--shadow-sm:0 1px 5px rgba(76,160,98,.07);
 --paper:var(--bg);--tint:var(--bg2);--tint2:var(--bg3);
 --ink:var(--text);--ink2:var(--text2);--ink3:var(--text3);--ink4:#bbd5bf;
 --line:var(--border);--line2:var(--border2);
 --accent-soft:#5fa371;--accent-deep:var(--accent-text);
 --shadow-1:var(--shadow-sm);--shadow-2:var(--shadow);--shadow-3:0 8px 28px rgba(76,160,98,.18);
}
/* SKY — Hydrangea fresh: cleaner periwinkle */
html[data-theme=sky] {
 color-scheme: light;
 --surface:#ffffff;
 --bg:#f8fbff;--bg2:#dde7ff;--bg3:#bcd2ff;--hover:rgba(70,130,230,.08);
 --text:#1a2240;--text2:#4a6090;--text3:#8a9ec0;
 --border:rgba(70,130,230,.12);--border2:rgba(70,130,230,.26);
 --accent:#3a72c8;--accent-bg:#dbe7ff;--accent-text:#1c4490;
 --green:#e6f5ee;--green-text:#166040;--red-bg:#fdedf0;--red-text:#ac2640;
 --shadow:0 2px 16px rgba(70,130,230,.10);--shadow-sm:0 1px 5px rgba(70,130,230,.07);
 --paper:var(--bg);--tint:var(--bg2);--tint2:var(--bg3);
 --ink:var(--text);--ink2:var(--text2);--ink3:var(--text3);--ink4:#bdcce0;
 --line:var(--border);--line2:var(--border2);
 --accent-soft:#5b8edb;--accent-deep:var(--accent-text);
 --shadow-1:var(--shadow-sm);--shadow-2:var(--shadow);--shadow-3:0 8px 28px rgba(70,130,230,.18);
}
html[data-theme=dark] {
 color-scheme: dark;
 --surface:#271a18;
 --bg:#1e1513;--bg2:#271a18;--bg3:#31211e;--hover:rgba(240,140,160,.07);
 --text:#f0e6e2;--text2:#c09a94;--text3:#8a6e6a;
 --border:rgba(255,150,130,.1);--border2:rgba(255,150,130,.2);
 --accent:#e8849a;--accent-bg:#3a1e25;--accent-text:#f5b8c8;
 --green:#192e22;--green-text:#7dd4b0;--red-bg:#391920;--red-text:#f09595;
 --shadow:0 2px 16px rgba(0,0,0,.35);--shadow-sm:0 1px 5px rgba(0,0,0,.22);
 --paper:var(--bg);--tint:var(--bg2);--tint2:var(--bg3);
 --ink:var(--text);--ink2:var(--text2);--ink3:var(--text3);--ink4:#5a4541;
 --line:var(--border);--line2:var(--border2);
 --accent-soft:#f0a3b3;--accent-deep:var(--accent-text);
 --shadow-1:var(--shadow-sm);--shadow-2:var(--shadow);--shadow-3:0 8px 28px rgba(0,0,0,.5);
}

/* ── THEME PICKER ── */
.theme-picker { display:flex; gap:6px; align-items:center; padding: 0 4px; }
.theme-swatch {
 position: relative;
 width:18px; height:18px; border-radius:50%; border:2.5px solid transparent;
 cursor:pointer; padding:0; flex-shrink:0;
 transition:transform .15s, border-color .15s, box-shadow .15s;
 outline: none;
}
.theme-swatch:hover { transform:scale(1.2); box-shadow: 0 2px 8px rgba(43,30,27,.18); }
.theme-swatch.active { border-color:var(--text); transform:scale(1.15); }

/* Mini preview tooltip on hover */
.theme-swatch::after {
 content: attr(title);
 position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-4px);
 padding: 6px 12px 6px 30px;
 background: var(--surface); color: var(--text);
 border: 1px solid var(--border2); border-radius: var(--radius);
 font-family: var(--font-body); font-size: 11px; font-weight: 700;
 letter-spacing: .2px;
 white-space: nowrap; pointer-events: none;
 opacity: 0; transition: opacity .15s, transform .15s;
 box-shadow: 0 6px 16px rgba(43,30,27,.14);
 z-index: 50;
}
.theme-swatch::before {
 content: ''; position: absolute;
 top: calc(100% + 16px); left: 50%; transform: translateX(-50%);
 width: 18px; height: 9px; border-radius: 9px 9px 0 0;
 background: var(--swatch-preview, #c4607a);
 opacity: 0; transition: opacity .15s;
 pointer-events: none; z-index: 50;
}
.theme-swatch:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.theme-swatch:hover::before { opacity: 1; }
.theme-swatch[data-theme=rose] { --swatch-preview: linear-gradient(90deg,#fffaf8 33%,#ffeaee 33% 66%,#c4607a 66%); }
.theme-swatch[data-theme=lavender] { --swatch-preview: linear-gradient(90deg,#faf8ff 33%,#ede4ff 33% 66%,#7c6bc9 66%); }
.theme-swatch[data-theme=sage] { --swatch-preview: linear-gradient(90deg,#f8fbf6 33%,#e3eedf 33% 66%,#3d8a56 66%); }
.theme-swatch[data-theme=sky] { --swatch-preview: linear-gradient(90deg,#f8fbff 33%,#dde7ff 33% 66%,#3a72c8 66%); }
.theme-swatch[data-theme=dark] { --swatch-preview: linear-gradient(90deg,#1e1513 33%,#271a18 33% 66%,#e8849a 66%); }
.theme-color-input::before, .theme-color-input::after { display: none !important; }

/* ── CUSTOM COLOR PICKER SWATCH ── */
.theme-color-input {
 width: 16px; height: 16px; padding: 0;
 border-radius: 50%; cursor: pointer; overflow: hidden;
 appearance: none; -webkit-appearance: none;
}
.theme-color-input::-webkit-color-swatch-wrapper { padding: 0; margin: 0; border: none; border-radius: 50%; }
.theme-color-input::-webkit-color-swatch { border: none; border-radius: 50%; }
.theme-color-input::-moz-color-swatch { border: none; border-radius: 50%; }

/* ── ORDER TAB ── */
#panel-order .col-left { width: 42%; flex-shrink: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
#panel-order .col-right { flex: 1; overflow-y: auto; padding: 10px 14px; display: flex; flex-direction: column; gap: 10px; }

.order-section { background: var(--surface, var(--bg)); border: 1.5px solid var(--border); border-radius: var(--radius-lg, 10px); padding: 11px 13px; display: flex; flex-direction: column; gap: 8px; }
.order-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--text2); }

.order-section textarea {
 width: 100%; resize: vertical; min-height: 72px; padding: 7px 10px;
 border: 1.5px solid var(--border); border-radius: var(--radius, 7px);
 background: var(--bg); color: var(--text); font-family: inherit; font-size: 12px;
 line-height: 1.5; outline: none; transition: border-color .15s;
}
.order-section textarea:focus { border-color: var(--accent); }
.order-section textarea::placeholder { color: var(--text3); }

.order-parse-btn {
 align-self: flex-start; padding: 6px 14px; background: var(--accent); color: #fff;
 border: none; border-radius: var(--radius, 7px); font-family: inherit; font-size: 12px;
 font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.order-parse-btn:hover { opacity: .85; }

.order-tags { display: flex; gap: 5px; flex-wrap: wrap; min-height: 0; }
.order-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.order-tag-blue { background: #dbeafe; color: #1e40af; }
.order-tag-green { background: #dcfce7; color: #166040; }
.order-tag-purple { background: #ede9ff; color: #4a3a8f; }
.order-tag-yellow { background: #fef9c3; color: #854d0e; }
html[data-theme=dark] .order-tag-blue { background: #1e3a5f; color: #93c5fd; }
html[data-theme=dark] .order-tag-green { background: #192e22; color: #7dd4b0; }
html[data-theme=dark] .order-tag-purple { background: #2e2457; color: #c4b5fd; }
html[data-theme=dark] .order-tag-yellow { background: #3b2f07; color: #fcd34d; }

/* Fallback section hidden by default */
#orderFallbackSection { display: none; }
#orderFallbackSection.order-fallback-show { display: flex; }

/* Product list */
.order-no-products { font-size: 12px; color: var(--text3); text-align: center; padding: 10px 0; }
.order-product-row {
 display: flex; align-items: center; gap: 7px; padding: 5px 0;
 border-bottom: 1px solid var(--border); font-size: 12px;
}
.order-product-row:last-child { border-bottom: none; }
.op-conf { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; flex-shrink: 0; }
.op-match-ok { background: var(--green, #dcfce7); color: var(--green-text, #166040); }
.op-match-fuzzy { background: #fef9c3; color: #854d0e; }
.op-match-none { background: var(--red-bg, #fdedf0); color: var(--red-text, #ac2640); }
.op-info { flex: 1; min-width: 0; }
.op-raw { font-size: 11px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-match { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-code { font-size: 9px; background: var(--bg3); border-radius: 3px; padding: 1px 4px; margin-left: 3px; }
.op-qty { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.op-qty button { width: 20px; height: 20px; border: 1.5px solid var(--border2); border-radius: 4px; background: var(--bg2); color: var(--text); cursor: pointer; font-size: 13px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.op-qty span { min-width: 18px; text-align: center; font-weight: 600; font-size: 12px; }
.op-price { font-size: 11px; font-weight: 600; color: var(--accent); flex-shrink: 0; min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }
.op-orig-price { text-decoration: line-through; opacity: .5; font-weight: 400; margin-right: 3px; }
.op-remove { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.op-remove:hover { color: var(--red-text, #ac2640); }

/* Status bar */
.order-status-bar {
 padding: 8px 12px; border-radius: var(--radius, 7px); font-size: 12px; font-weight: 600;
 background: var(--bg3); color: var(--text2); border: 1.5px solid var(--border);
}
.order-status-loading { background: var(--bg3); color: var(--text2); }
.order-status-success { background: var(--green, #dcfce7); color: var(--green-text, #166040); border-color: transparent; }
.order-status-warn { background: #fef9c3; color: #854d0e; border-color: transparent; }
.order-status-error { background: var(--red-bg, #fdedf0); color: var(--red-text, #ac2640); border-color: transparent; }
.order-status-idle { background: var(--bg3); color: var(--text3); }
html[data-theme=dark] .order-status-warn { background: #3b2f07; color: #fcd34d; }

/* Form */
.order-form { display: flex; flex-direction: column; gap: 9px; background: var(--surface, var(--bg)); border: 1.5px solid var(--border); border-radius: var(--radius-lg, 10px); padding: 13px; }
.order-form-row { display: flex; gap: 9px; align-items: flex-end; }
.order-form-group { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.order-form-group label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text2); }
.order-form-group input,
.order-form-group select {
 padding: 6px 9px; border: 1.5px solid var(--border); border-radius: var(--radius, 7px);
 background: var(--bg); color: var(--text); font-family: inherit; font-size: 13px;
 outline: none; transition: border-color .15s; width: 100%;
}
.order-form-group input:focus,
.order-form-group select:focus { border-color: var(--accent); }
.order-flags { display: flex; gap: 4px; align-items: center; padding-bottom: 2px; }
.order-divider { border: none; border-top: 1px solid var(--border); margin: 2px 0; }
.order-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.order-reset-btn {
 padding: 8px 16px; border: 1.5px solid var(--border); border-radius: var(--radius, 7px);
 background: transparent; color: var(--text2); font-family: inherit; font-size: 13px; cursor: pointer;
}
.order-reset-btn:hover { background: var(--bg2); }
.order-submit-btn {
 padding: 8px 20px; border: none; border-radius: var(--radius, 7px);
 background: var(--accent); color: #fff; font-family: inherit; font-size: 13px;
 font-weight: 700; cursor: pointer; transition: opacity .15s;
}
.order-submit-btn:hover { opacity: .88; }
.order-submit-btn:disabled { opacity: .5; cursor: not-allowed; }

/* History */
.order-history-item { display: flex; gap: 8px; align-items: center; padding: 5px 4px; border-bottom: 1px solid var(--border); font-size: 12px; border-radius: var(--radius); }
.order-history-item:last-child { border-bottom: none; }
.ohi-clickable { cursor: pointer; transition: background .15s; }
.ohi-clickable:hover { background: var(--hover); }
.ohi-id { color: var(--accent); font-weight: 700; min-width: 52px; font-size: 11px; }
.ohi-name { flex: 1; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ohi-amt { color: var(--text2); font-weight: 600; min-width: 48px; text-align: right; font-variant-numeric: tabular-nums; }
.ohi-time { color: var(--text3); font-size: 11px; min-width: 38px; text-align: right; }

/* ── LOGIN PAGE ── */
body.login-page {
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 100vh;
 height: auto;
 overflow: auto;
 position: relative;
 background:
 radial-gradient(ellipse 1200px 800px at 20% 0%, rgba(214,98,126,.18), transparent 60%),
 radial-gradient(ellipse 900px 600px at 80% 100%, rgba(255,180,196,.22), transparent 55%),
 linear-gradient(180deg, var(--bg2) 0%, var(--bg3) 100%);
}
body.login-page::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='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .55 0 0 0 0 .35 0 0 0 0 .35 0 0 0 .14 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
 opacity: .5; mix-blend-mode: multiply; z-index: 0;
}
.login-decor {
 position: fixed; pointer-events: none; opacity: .16; z-index: 0;
 color: var(--accent);
}
.login-decor.d1 { top: 8vh; left: 7vw; width: 120px; animation: drift 14s ease-in-out infinite; }
.login-decor.d2 { bottom: 12vh; right: 10vw; width: 96px; animation: drift 18s ease-in-out infinite reverse; animation-delay: -3s; }
.login-decor.d3 { top: 55vh; right: 22vw; width: 60px; animation: drift 12s ease-in-out infinite; animation-delay: -6s; opacity: .09; }
@keyframes drift {
 0%, 100% { transform: translate(0,0) rotate(0deg); }
 33% { transform: translate(14px,-12px) rotate(8deg); }
 66% { transform: translate(-10px,16px) rotate(-6deg); }
}

.login-wrap { width: 100%; max-width: 380px; padding: 20px; position: relative; z-index: 1; }
.login-greet {
 text-align: center; font-size: 13px; color: var(--text2);
 margin-bottom: 14px; font-weight: 500; letter-spacing: .3px;
 animation: greetFade .7s ease-out;
}
@keyframes greetFade { from { opacity: 0; transform: translateY(-4px); } }
.login-card {
 background: var(--surface);
 border-radius: 24px;
 box-shadow: 0 12px 48px rgba(196,96,122,.18), 0 1px 3px rgba(196,96,122,.08);
 padding: 36px 40px;
 display: flex; flex-direction: column; gap: 18px;
 backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
 border: 1px solid rgba(255,255,255,.6);
}
.login-brand { text-align: center; font-family: var(--font); font-size: 42px; font-weight: 500; color: var(--accent); letter-spacing: -1px; line-height: 1; }
.login-sub { text-align: center; color: var(--text3); font-size: 13px; margin-top: -10px; }
.fl { display: flex; flex-direction: column; gap: 5px; }
.fl label { font-size: 10.5px; font-weight: 700; color: var(--ink2); text-transform: uppercase; letter-spacing: .5px; }
.fl input {
 padding: 11px 14px; border: 1.5px solid var(--line); border-radius: var(--r);
 font-family: inherit; font-size: 14px; background: var(--surface); color: var(--ink);
 outline: none; transition: all .15s;
}
.fl input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,96,122,.15); }
.login-btn {
 padding: 12px;
 background: var(--accent);
 color: #fff;
 border: none;
 border-radius: var(--r);
 font-family: inherit;
 font-size: 15px;
 font-weight: 700;
 cursor: pointer;
 transition: filter .15s, transform .12s;
 margin-top: 6px;
}
.login-btn:hover { filter: brightness(1.05); }
.login-btn:active { transform: translateY(1px); }
.login-btn:disabled { opacity: .5; cursor: default; }

/* Respect user's reduced-motion preference for petals + greet fade */
@media (prefers-reduced-motion: reduce) {
 .login-decor { animation: none !important; }
 .login-greet { animation: none !important; }
}
.login-err {
 background: var(--red-bg); color: var(--red-text);
 border-radius: var(--radius); padding: 9px 14px; font-size: 13px;
 text-align: center; display: none;
}
.login-err.show { display: block; }

/* ── Copy-all Giá button (quote tab header) ── */
#copyAllPricesBtn {
 padding: 5px 16px;
 font-size: 12px;
 font-weight: 700;
 border-radius: var(--radius-xl);
 background: var(--accent-bg);
 border: 1.5px solid var(--accent);
 color: var(--accent);
 font-family: inherit;
 cursor: pointer;
 letter-spacing: .3px;
 transition: all .12s;
}
#copyAllPricesBtn:hover { background: var(--accent); color: #fff; }

/* ── Others (Sale 1-4) dropdown ── */
.sale-others-select {
 padding: 5px 6px 5px 10px;
 cursor: pointer;
 appearance: auto;
 -webkit-appearance: auto;
}
.sale-others-select.active {
 background: var(--accent);
 color: #fff;
 border-color: var(--accent);
}

/* ── Nhanh address badge (order tab, before name field) ── */
.nhanh-badge {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 6px 16px;
 border-radius: var(--radius-xl);
 border: 2px solid transparent;
 font-size: 13px;
 font-family: inherit;
 font-weight: 700;
 white-space: nowrap;
 cursor: default;
 line-height: 1.4;
 letter-spacing: .3px;
 box-shadow: 0 2px 6px rgba(0,0,0,.12);
 flex-shrink: 0;
 align-self: flex-end;
 margin-bottom: 1px;
}
.nhanh-badge[data-level="green"] { background: #d1fae5; color: #065f46; border-color: #34d399; box-shadow: 0 2px 8px rgba(52,211,153,.25); }
.nhanh-badge[data-level="yellow"] { background: #fef3c7; color: #92400e; border-color: #fbbf24; box-shadow: 0 2px 8px rgba(251,191,36,.25); }
.nhanh-badge[data-level="red"] { background: #fee2e2; color: #991b1b; border-color: #f87171; box-shadow: 0 2px 8px rgba(248,113,113,.25); }

/* ── Nhanh lookup widget (quote tab) ── */
.nhanh-lookup-row { display: flex; gap: 6px; margin-bottom: 7px; }
.nhanh-sdt-input {
 flex: 1;
 padding: 5px 10px;
 border: 1.5px solid var(--border2);
 border-radius: var(--radius-xl);
 font-size: 12px;
 font-family: inherit;
 background: var(--bg);
 color: var(--text);
 outline: none;
 min-width: 0;
}
.nhanh-sdt-input:focus { border-color: var(--accent); }

/* ─── Trello push panel (Phase 2 cụm A1) — compact ─── */
.trello-panel {
 margin-top: 10px;
 padding: 8px 10px;
 border: 1px solid var(--border2);
 border-radius: 8px;
 background: var(--bg2);
}
.trello-panel-head {
 display: flex;
 align-items: center;
 justify-content: space-between;
 font-weight: 600;
 font-size: 13px;
 color: var(--accent-text);
 margin-bottom: 6px;
}
.trello-panel-head .trello-actions {
 display: flex;
 gap: 4px;
 margin: 0;
}
.trello-panel-head .pill-btn {
 padding: 3px 10px;
 font-size: 11.5px;
}
.trello-warn {
 background: #fff7e0;
 color: #8b5a00;
 border: 1px solid #f0d680;
 padding: 5px 7px;
 border-radius: 5px;
 font-size: 11px;
 margin-bottom: 6px;
}

.trello-fields-row {
 display: grid;
 grid-template-columns: minmax(120px, 0.8fr) 1.2fr;
 gap: 6px;
 margin-bottom: 6px;
}
.trello-field-inline {
 display: flex;
 align-items: center;
 gap: 6px;
 font-size: 11px;
 color: var(--text2);
 background: var(--bg);
 border: 1px solid var(--border2);
 border-radius: 5px;
 padding: 0 8px;
 min-height: 26px;
}
.trello-field-inline > span {
 font-weight: 600;
 color: var(--text2);
 white-space: nowrap;
 font-size: 10.5px;
 text-transform: uppercase;
 letter-spacing: .03em;
}
.trello-field-inline input {
 flex: 1;
 font-family: inherit;
 font-size: 12px;
 color: var(--text);
 background: transparent;
 border: 0;
 outline: none;
 padding: 4px 0;
 min-width: 0;
}

.trello-pills-row {
 display: flex;
 align-items: center;
 gap: 4px;
 margin-bottom: 6px;
 flex-wrap: wrap;
}
.trello-pills-row .trello-pills-label {
 font-size: 10.5px;
 font-weight: 600;
 color: var(--text2);
 text-transform: uppercase;
 letter-spacing: .03em;
 margin-right: 2px;
}
.trello-pills-row .pill-btn {
 padding: 3px 10px;
 font-size: 11.5px;
}
.trello-pills-row .pill-btn.active {
 background: var(--accent);
 border-color: var(--accent);
 color: #fff;
}
.trello-pills-divider {
 flex: 1;
 height: 1px;
 background: transparent;
}
.trello-toggle-extras {
 margin-left: auto;
 background: transparent;
 border: 1px dashed var(--border2);
 color: var(--text2);
 font-size: 11px;
 padding: 3px 10px;
 border-radius: 12px;
 cursor: pointer;
}
.trello-toggle-extras:hover { border-color: var(--accent); color: var(--accent); }
.trello-toggle-extras.active { border-style: solid; border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }
.trello-extras {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 6px;
 margin-bottom: 6px;
}
.trello-extras[hidden] { display: none; }

.trello-preview-title {
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 11px;
 color: var(--text);
 background: var(--bg);
 border: 1px dashed var(--border2);
 border-radius: 5px;
 padding: 5px 7px;
 white-space: pre-wrap;
 word-break: break-word;
 margin: 0 0 5px;
 max-height: 44px;
 overflow-y: auto;
}
.trello-preview-desc {
 width: 100%;
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 11px;
 line-height: 1.45;
 color: var(--text);
 background: var(--bg);
 border: 1px solid var(--border2);
 border-radius: 5px;
 padding: 6px 8px;
 resize: vertical;
 outline: none;
 min-height: 120px;
}
.trello-actions {
 display: flex;
 gap: 6px;
}
.pill-primary {
 background: var(--accent);
 color: #fff;
 border-color: var(--accent);
}
.pill-primary:hover { filter: brightness(1.05); }
.pill-primary:disabled {
 background: var(--border2);
 color: var(--text2);
 cursor: not-allowed;
 filter: none;
}

/* Toast */
.trello-toast {
 position: fixed;
 bottom: 20px;
 right: 20px;
 background: var(--accent);
 color: #fff;
 padding: 10px 14px;
 border-radius: 6px;
 font-size: 12.5px;
 box-shadow: 0 4px 14px rgba(0,0,0,.15);
 opacity: 0;
 transform: translateY(8px);
 transition: opacity .2s ease, transform .2s ease;
 pointer-events: none;
 z-index: 1000;
}
.trello-toast.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.trello-toast.error { background: #c0392b; }
.trello-toast a { color: #fff; text-decoration: underline; font-weight: 600; }

/* ─── Audit tab (Phase 2 cụm A2) ─── */
#panel-audit { padding: 16px 20px; overflow: auto; }
.audit-wrap { max-width: 1400px; margin: 0 auto; }
.audit-header {
 display: flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 12px;
 flex-wrap: wrap;
}
.audit-header select {
 font-size: 13px;
 padding: 5px 10px;
 border: 1px solid var(--border2);
 border-radius: 6px;
 background: var(--bg);
 color: var(--text);
 min-width: 280px;
}
.audit-running { color: var(--accent); font-size: 12px; }

/* Cards */
.audit-cards {
 display: grid;
 grid-template-columns: repeat(5, minmax(120px, 1fr));
 gap: 8px;
 margin-bottom: 6px;
}
.audit-card {
 background: var(--bg2);
 border: 1px solid var(--border);
 border-radius: 8px;
 padding: 10px 12px;
 text-align: center;
}
.audit-card .ac-num { font-size: 22px; font-weight: 700; color: var(--text); line-height: 1.1; }
.audit-card .ac-lbl { font-size: 11px; color: var(--text2); margin-top: 2px; }
.audit-card.ok { border-color: #79c97c33; background: #e8f7e833; }
.audit-card.mismatch { border-color: #c060604d; background: #fff0f0; }
.audit-card.mismatch .ac-num { color: #b03030; }
.audit-card.nonote { opacity: .8; }
.audit-card.parsefail .ac-num { color: #c08020; }

.audit-meta {
 font-size: 11px;
 color: var(--text2);
 margin: 6px 0 12px;
 display: flex;
 gap: 14px;
}

.audit-empty, .audit-error {
 padding: 24px;
 text-align: center;
 color: var(--text2);
 font-size: 13px;
}
.audit-error { color: #c0392b; }

/* Rows */
.audit-rows { display: flex; flex-direction: column; gap: 4px; }
.audit-row {
 border: 1px solid var(--border);
 border-radius: 6px;
 background: var(--bg2);
 font-size: 12.5px;
}
.audit-row > summary {
 display: grid;
 grid-template-columns: 100px 110px 1.6fr 130px 1fr 80px;
 gap: 8px;
 padding: 8px 12px;
 cursor: pointer;
 align-items: center;
 list-style: none;
}
.audit-row > summary::-webkit-details-marker { display: none; }
.audit-row .ar-badge {
 font-weight: 600;
 font-size: 11.5px;
 padding: 2px 6px;
 border-radius: 4px;
 background: var(--bg);
 text-align: center;
}
.audit-row.status-ok .ar-badge { color: #5e8a44; }
.audit-row.status-mismatch .ar-badge { color: #b03030; background: #ffe5e5; }
.audit-row.status-no-note .ar-badge { color: var(--text2); }
.audit-row.status-parse-fail .ar-badge { color: #c08020; background: #fff5e0; }
.audit-row .ar-id-wrap {
 display: inline-flex;
 flex-direction: column;
 gap: 1px;
 line-height: 1.2;
}
.audit-row .ar-id-link {
 font-family: ui-monospace, monospace;
 font-size: 11px;
 color: var(--accent);
 text-decoration: none;
}
.audit-row .ar-id-link:hover { text-decoration: underline; }
.audit-row .ar-status {
 font-size: 10px;
 font-weight: 500;
 color: var(--text2);
 background: var(--bg);
 padding: 1px 5px;
 border-radius: 3px;
 border: 1px solid var(--border);
 width: fit-content;
}
.audit-row.status-ok .ar-status { border-color: #79c97c80; color: #5e8a44; background: #f3fbf3; }
.audit-row.status-mismatch .ar-status { border-color: #c0606080; color: #b03030; background: #fff0f0; }
.audit-row .ar-name { color: var(--text); font-weight: 500; }
.audit-row .ar-phone { font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--text2); }
.audit-row .ar-total { font-family: ui-monospace, monospace; font-size: 12px; }
.audit-row .ar-time { font-size: 10.5px; color: var(--text2); text-align: right; }

.audit-row[open] { background: var(--bg); }

.ar-body {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 12px;
 padding: 8px 14px 12px;
 border-top: 1px solid var(--border);
 font-size: 12px;
 color: var(--text);
}
.ar-col .ar-h {
 font-size: 11px;
 color: var(--text2);
 text-transform: uppercase;
 letter-spacing: .04em;
 margin-bottom: 4px;
}
.ar-col > div { margin-bottom: 2px; }
.ar-col .ar-raw {
 font-family: ui-monospace, monospace;
 font-size: 11px;
 background: var(--bg2);
 padding: 6px 8px;
 border-radius: 4px;
 white-space: pre-wrap;
 word-break: break-word;
 margin-top: 6px;
 color: var(--text2);
}
.ar-col .ar-err {
 color: #b03030;
 font-size: 11px;
 margin-top: 4px; }

.cell-bad { color: #b03030; font-weight: 600; background: #ffeaea; padding: 0 3px; border-radius: 3px; }

.ar-mismatches {
 margin: 0;
 padding: 6px 14px 12px 30px;
 list-style: disc;
 color: #b03030;
 font-size: 11.5px;
 border-top: 1px dashed var(--border2);
 background: #fff7f7;
}
.ar-mismatches li { margin: 1px 0; }

@media (max-width: 1100px) {
 .audit-row > summary { grid-template-columns: 90px 90px 1fr 110px 1fr 70px; font-size: 11.5px; }
 .audit-cards { grid-template-columns: repeat(2, 1fr); }
 .ar-body { grid-template-columns: 1fr; }
}

/* Phone validation indicator */
.invalid-phone,
.trello-field-inline:has(.invalid-phone) {
 border-color: #c0392b !important;
 background: #fff5f5;
}
.invalid-phone:focus,
.trello-field-inline:has(.invalid-phone:focus) {
 border-color: #c0392b !important;
 box-shadow: 0 0 0 2px rgba(192, 57, 43, .15);
}

/* Phone warning (block push if SĐT sai) */
.trello-warn-phone {
 background: #ffe8e8;
 color: #b03030;
 border: 1px solid #f0b0b0;
}

/* ── D1 address mode block ── */
.trello-addr-block { margin: 6px 0; padding: 6px 8px; background: rgba(0,0,0,0.02); border-radius: 4px; }
.trello-addr-pills { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.trello-addr-content { margin-top: 6px; }
.trello-addr-display { font-size: 12px; color: var(--text2); min-height: 16px; }
.trello-addr-paste { width: 100%; font-size: 12px; padding: 4px 6px; box-sizing: border-box; }
.trello-addr-status { font-size: 11px; margin-top: 3px; min-height: 14px; }
.trello-addr-status.ok { color: var(--green-text, #2a7); }
.trello-addr-status.warn { color: var(--red-text, #c00); }
.trello-addr-status.busy { color: var(--text2); }
.pill-mini { font-size: 11px; padding: 2px 8px; }

/* ── Task 10: card-history banner + archived modal ── */
.trello-history-banner {
 background: rgba(255, 200, 0, 0.08);
 border-left: 3px solid #f5a623;
 padding: 6px 8px; margin: 6px 0;
 border-radius: 4px; font-size: 12px;
}
.hist-title { font-weight: 600; margin-bottom: 4px; }
.hist-list { list-style: none; padding: 0; margin: 0; }
.hist-list li {
 display: flex; align-items: center; gap: 6px;
 padding: 3px 0; border-top: 1px solid rgba(0,0,0,0.05);
}
.hist-list li:first-child { border-top: 0; }
.hist-meta { flex: 1; font-family: monospace; font-size: 11px; }
.hist-time { color: var(--text2); font-size: 11px; }

.msg-template-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 3px; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === PHASE 2 — TAB 1 — TRA CỨU SP (Sakura v4) ========================== */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Layout primitives — used by Tab 1 first; will lift to global at Phase 9. */
#panel-products {
 display: none;
 flex: 1;
 gap: 10px;
 min-height: 0;
}
#panel-products.active { display: flex; }

#panel-products .col {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 padding: 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 min-height: 0;
}
#panel-products .col.col-left { width: 34%; flex-shrink: 0; }
#panel-products .col.col-right { flex: 1; }
.col-pad { padding: 12px 14px; flex-shrink: 0; }
.col-body { flex: 1; overflow-y: auto; padding: 0 14px 12px; }
.col-head { padding: 10px 14px 9px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.col-head h3 { font-family: var(--font); font-size: 15px; font-weight: 500; color: var(--ink); flex: 1; }
.col-head .meta { font-size: 11px; color: var(--ink3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* Search */
.search-wrap { position: relative; flex-shrink: 0; }
.search { width: 100%; padding: 9px 16px 9px 34px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); font-size: 13px; background: var(--tint); color: var(--ink); outline: none; transition: all .15s; }
.search:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(196,96,122,.1); }
.search::placeholder { color: var(--ink3); }
.s-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--ink3); pointer-events: none; }
.kbd { font-size: 10px; padding: 1px 5px; background: #fff; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; font-family: var(--mono); color: var(--ink3); }

/* Recent strip */
.strip { display: flex; gap: 5px; align-items: center; padding: 6px 0 0; flex-wrap: wrap; }
.strip-label { font-size: 9.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; margin-right: 2px; }
.strip-chip { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tint); color: var(--ink2); font-weight: 600; border: 1px solid transparent; cursor: pointer; }
.strip-chip:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* Results bar + filters */
.results-bar { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px; font-size: 11px; color: var(--ink3); border-bottom: 1px solid var(--line); margin-bottom: 5px; flex-shrink: 0; }
.results-bar b { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.filter-pill { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--ink2); font-weight: 600; cursor: pointer; }
.filter-pill:hover { color: var(--accent); border-color: var(--accent); }
.filter-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Result item rows (Tab 1 product list) */
.ri { padding: 8px 10px; border-radius: var(--r); margin-bottom: 1px; cursor: pointer; border: 1.5px solid transparent; display: flex; gap: 9px; align-items: center; transition: all .12s; }
.ri:hover { background: var(--tint); }
.ri:hover .ri-add { opacity: 1; }
.ri.active { background: var(--accent-bg); border-color: var(--accent); }
.ri-info { flex: 1; min-width: 0; }
.ri .ri-name { font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ri .ri-meta { font-size: 10.5px; color: var(--ink2); margin-top: 1px; display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.ri-stock { font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 8px; background: var(--green); color: var(--green-text); font-variant-numeric: tabular-nums; }
.ri-stock.low { background: var(--amber-bg); color: var(--amber-text); }
.ri-stock.out { background: var(--red-bg); color: var(--red-text); }
.ri-add { opacity: 0; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--accent); background: #fff; color: var(--accent); display: flex; align-items: center; justify-content: center; transition: opacity .12s; flex-shrink: 0; font-size: 12px; font-weight: 700; }
.ri-add:hover { background: var(--accent); color: #fff; }

/* Empty state — handoff style */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--ink3); padding: 32px; text-align: center; }
.empty svg { width: 60px; height: 60px; opacity: .4; margin-bottom: 8px; }
.empty .es-title { font-family: var(--font); font-size: 17px; color: var(--ink2); margin-bottom: 5px; }
.empty .es-hint { font-size: 12px; line-height: 1.6; color: var(--ink3); }
.empty .es-hint kbd { display: inline-block; font-size: 10px; padding: 1px 5px; background: #fff; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; font-family: var(--mono); color: var(--ink3); margin: 0 1px; }

/* Product detail head */
.pd-head { display: flex; gap: 14px; align-items: flex-start; padding: 14px 14px 12px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pd-img { width: 64px; height: 64px; border-radius: var(--r); background: linear-gradient(135deg, #fff, var(--accent-bg)); border: 1px solid var(--line); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font); color: var(--accent); font-size: 24px; cursor: pointer; }
.pd-titles { flex: 1; min-width: 0; }
.pd-brand { font-size: 10.5px; color: var(--accent); font-weight: 700; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 3px; cursor: pointer; padding: 1px 4px; border-radius: 4px; display: inline-block; }
.pd-brand:hover { background: var(--accent-bg); }
.pd-name { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--ink); font-family: var(--font); cursor: pointer; padding: 1px 4px; border-radius: 4px; }
.pd-name:hover { background: var(--tint); }
.pd-meta-row { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.meta-pill { font-size: 10.5px; padding: 2px 8px; border-radius: var(--r-pill); background: var(--tint); color: var(--ink2); font-weight: 600; cursor: pointer; }
.meta-pill.green { background: var(--green); color: var(--green-text); }
.meta-pill.tiny { font-size: 10px; padding: 1px 6px; }
.meta-pill:hover { background: var(--accent-bg); color: var(--accent); }
.pd-actions { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex-shrink: 0; }
.add-q-btn { padding: 6px 13px; border-radius: var(--r-pill); background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 8px rgba(196,96,122,.25); display: inline-flex; align-items: center; gap: 5px; border: none; cursor: pointer; }
.add-q-btn:hover { box-shadow: 0 3px 12px rgba(196,96,122,.4); }
.pd-mini-act { display: flex; gap: 4px; }
.pd-mini-act button { font-size: 10.5px; padding: 3px 8px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--ink2); font-weight: 600; background: transparent; cursor: pointer; }
.pd-mini-act button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }

/* Product detail grid */
.pd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; padding: 8px 14px 14px; }
.pd-section { padding: 10px 0 8px; border-bottom: 1px solid var(--line); position: relative; cursor: pointer; }
.pd-section.full { grid-column: 1 / -1; }
.pd-label { font-size: 10px; color: var(--accent); margin-bottom: 5px; letter-spacing: .6px; font-weight: 700; text-transform: uppercase; }
.pd-row { display: grid; grid-template-columns: 80px 1fr; gap: 0 8px; padding: 2px 4px; font-size: 12px; border-radius: 4px; cursor: pointer; }
.pd-row:hover { background: var(--tint); }
.pd-row > span:first-child { color: var(--ink3); }
.pd-row .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.pd-row .num.acc { color: var(--accent); }
.pd-row .strike { text-decoration: line-through; color: var(--ink3); margin-right: 4px; font-size: 11px; }
.pd-val { font-size: 12.5px; line-height: 1.6; color: var(--ink); cursor: pointer; padding: 2px 4px; border-radius: 4px; }
.pd-val:hover { background: var(--tint); }
.pd-val.ingred { font-size: 10.5px; line-height: 1.6; color: var(--ink2); }
.pd-bullet { font-size: 12px; line-height: 1.65; padding-left: 14px; position: relative; cursor: pointer; padding-right: 4px; border-radius: 4px; }
.pd-bullet:hover { background: var(--tint); }
.pd-bullet::before { content: "·"; position: absolute; left: 4px; color: var(--accent); font-weight: 700; }
.pd-barcode-btn { font-family: var(--mono); font-size: 10.5px; letter-spacing: 1px; }
.pd-link-row { display: flex; gap: 6px; align-items: center; padding: 2px 0; font-size: 11.5px; min-width: 0; overflow: hidden; }
.pd-link-row a { flex: 1; color: var(--accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); min-width: 0; font-size: 11px; }
.pd-link-row a:hover { text-decoration: underline; }
.pd-link-copy { padding: 2px 0; width: 72px; flex-shrink: 0; border: 1px solid var(--line2); border-radius: var(--r-s); color: var(--ink2); font-size: 10.5px; font-weight: 700; text-align: center; background: transparent; cursor: pointer; }
.pd-link-copy:hover { background: var(--accent-bg); color: var(--accent); border-color: var(--accent); }

/* Flash badge — handoff style (parent .copyable.flashed reveals .flash) */
.flash { position: absolute; top: 6px; right: 6px; background: var(--green); color: var(--green-text); font-size: 9.5px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill); opacity: 0; transform: translateY(-2px); transition: all .2s; pointer-events: none; }
.copyable.flashed .flash { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === PHASE 3 — TAB 2 — BÁO GIÁ (Sakura v4 — markup-preserving restyle) === */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Note: Tab 2 keeps existing markup (msg templates, address pills, history
 banner, override fields). Visual layer applied via #panel-quote scoped
 overrides. Phase 9 cleanup will lift shared rules to global. */

#panel-quote.panel { gap: 10px; }
#panel-quote .col {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 padding: 12px 14px;
 overflow-y: auto;
 min-height: 0;
}
#panel-quote .col.col-left { width: 46%; flex-shrink: 0; gap: 8px; display: flex; flex-direction: column; }
#panel-quote .col.col-right { flex: 1; display: flex; flex-direction: column; gap: 10px; }

/* Customer tabs row */
#panel-quote .quote-tabs { display: flex; gap: 4px; padding: 0 0 4px; flex-shrink: 0; flex-wrap: wrap; }
#panel-quote .qtab { padding: 5px 12px; font-size: 11.5px; font-weight: 600; border-radius: var(--r-pill); background: var(--tint); border: 1.5px solid var(--line); color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all .15s; }
#panel-quote .qtab:hover { color: var(--accent); border-color: var(--accent); }
#panel-quote .qtab.active { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 2px 8px rgba(196,96,122,.25); }
#panel-quote .qtab-add { padding: 5px 12px; font-size: 14px; line-height: 1; color: var(--accent); border: 1.5px dashed var(--accent); border-radius: var(--r-pill); background: transparent; opacity: .7; cursor: pointer; transition: all .15s; }
#panel-quote .qtab-add:hover { opacity: 1; background: var(--accent-bg); }

/* Quote search */
#panel-quote .search-input {
 border-radius: var(--r-pill);
 border: 1.5px solid var(--line2);
 background: var(--tint);
 padding: 9px 14px;
 font-size: 13px;
}
#panel-quote .search-input:focus { border-color: var(--accent); background: var(--surface); box-shadow: 0 0 0 3px rgba(196,96,122,.1); }

/* Opt sections (Giảm + Phí ship) */
#panel-quote .quote-options { padding: 4px 0; flex-shrink: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
#panel-quote .opt-section { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
#panel-quote .opt-section + .opt-section { border-top: 1px dashed var(--line); }
#panel-quote .opt-label { font-size: 9.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; min-width: 56px; flex-shrink: 0; }
#panel-quote .opt-group .pill-btn,
#panel-quote .opt-group .sale-others-select { padding: 4px 11px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 600; border: 1px solid var(--line2); color: var(--ink2); background: transparent; cursor: pointer; }
#panel-quote .opt-group .pill-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
#panel-quote .opt-group .pill-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Send-guide card — sakura tint */
#panel-quote .send-guide-section { background: linear-gradient(135deg, var(--tint), var(--tint2)); border: 1px solid var(--line); border-radius: var(--r); padding: 9px 11px; flex-shrink: 0; margin-top: 6px; }
#panel-quote .send-guide-label { font-size: 9.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; font-family: var(--font); font-style: normal; }
#panel-quote .send-guide-text { background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r-s); padding: 7px 10px; font-size: 12px; color: var(--ink); cursor: pointer; position: relative; min-height: 22px; }
#panel-quote .send-guide-text:hover { border-color: var(--accent); background: var(--tint); }
#panel-quote .send-guide-text em { color: var(--accent); }

/* Quote summary — italic Fraunces total */
#panel-quote .quote-summary { background: var(--paper); border-radius: var(--r); padding: 8px 12px; flex-shrink: 0; }
#panel-quote .qs-row { display: flex; justify-content: space-between; padding: 3px 0; font-size: 12px; }
#panel-quote .qs-row .qs-discount { color: var(--red-text); }
#panel-quote .qs-row.total { border-top: 1px solid var(--line2); padding-top: 7px; margin-top: 3px; font-size: 13px; }
#panel-quote .qs-row.total > span:first-child { font-family: var(--font); font-size: 16px; font-weight: 500; color: var(--ink); }
#panel-quote .qs-row.total .qs-val { font-family: var(--font); font-size: 18px; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Quote items */
#panel-quote .quote-items { flex: 1; overflow-y: auto; min-height: 80px; }
#panel-quote .paste-zone { border: 1.5px dashed var(--line2); border-radius: var(--r); padding: 10px 12px; min-height: 40px; font-size: 11.5px; color: var(--ink3); flex-shrink: 0; transition: all .15s; }
#panel-quote .paste-zone:focus { border-color: var(--accent); background: var(--tint); }
#panel-quote .paste-zone:empty::before { content: attr(data-placeholder); color: var(--ink3); }

/* Quote preview blocks — surface card with dashed accent on hover */
#panel-quote .quote-previews { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; flex: 1; min-height: 0; }
#panel-quote .quote-preview-col { display: flex; flex-direction: column; min-height: 0; gap: 5px; overflow-y: auto; }
#panel-quote .preview-col-label { font-size: 9.5px; font-weight: 700; color: var(--accent); letter-spacing: .55px; text-transform: uppercase; }
#panel-quote .quote-preview {
 background: var(--surface);
 border: 1.5px solid var(--line);
 border-radius: var(--r);
 padding: 10px 12px;
 font-family: var(--font);
 font-size: 12.5px;
 line-height: 1.6;
 white-space: pre-wrap;
 cursor: pointer;
 position: relative;
 transition: all .15s;
 flex: 1;
 min-height: 220px;
 overflow-y: auto;
}
#panel-quote .quote-preview:hover { border-color: var(--accent); border-style: dashed; box-shadow: 0 0 0 3px rgba(196,96,122,.08); }
#panel-quote .nhanh-lookup-row { display: flex; gap: 6px; margin-bottom: 7px; flex-shrink: 0; }
#panel-quote .nhanh-sdt-input { flex: 1; padding: 6px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--line2); background: var(--tint); color: var(--ink); font-size: 12px; }
#panel-quote .nhanh-sdt-input:focus { border-color: var(--accent); background: var(--surface); outline: none; box-shadow: 0 0 0 3px rgba(196,96,122,.1); }

/* Trello push panel — gradient bg with dashed inner code blocks */
#panel-quote .trello-panel {
 background: linear-gradient(180deg, var(--surface), var(--tint));
 border: 1.5px solid var(--line2);
 border-radius: var(--r-l);
 padding: 12px;
 display: flex;
 flex-direction: column;
 gap: 8px;
 flex-shrink: 0;
 box-shadow: var(--shadow-2);
}
#panel-quote .trello-panel-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 22px; }
#panel-quote .trello-panel-title { font-family: var(--font); font-size: 14px; font-weight: 600; color: var(--ink); flex-shrink: 0; }
/* Push/Copy actions live next to address pills (Row 2) — auto-pushed right */
#panel-quote .trello-addr-pills .trello-actions { display: flex; gap: 5px; margin-left: auto; }
#panel-quote .trello-actions .pill-primary { background: var(--accent); color: #fff; border: none; padding: 5px 13px; border-radius: var(--r-pill); font-size: 11.5px; font-weight: 700; box-shadow: 0 2px 8px rgba(196,96,122,.25); cursor: pointer; }
#panel-quote .trello-actions .pill-primary:hover:not(:disabled) { box-shadow: 0 3px 12px rgba(196,96,122,.4); }
#panel-quote .trello-actions .pill-primary:disabled { background: var(--ink4); color: rgba(255,255,255,.7); box-shadow: none; cursor: not-allowed; opacity: .8; }
#panel-quote .trello-warn { background: var(--amber-bg); color: var(--amber-text); border: 1px dashed var(--amber-text); border-radius: var(--r-s); padding: 3px 10px; font-size: 11px; font-weight: 600; display: inline-block; }
#panel-quote .trello-push-hint { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; background: var(--red-bg); color: var(--red-text); border-radius: var(--r-s); font-size: 11px; font-weight: 600; border-left: 3px solid var(--red-text); }
#panel-quote .trello-push-hint[hidden] { display: none; }
#panel-quote .trello-pills-row { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
#panel-quote .trello-pills-label { font-size: 9.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; margin-right: 4px; }
#panel-quote .trello-pills-divider { width: 1px; height: 14px; background: var(--line2); margin: 0 4px; }
#panel-quote .trello-pills-row .pill-btn { padding: 3px 10px; font-size: 11px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: var(--surface); color: var(--ink2); font-weight: 600; cursor: pointer; }
#panel-quote .trello-pills-row .pill-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
#panel-quote .trello-pills-row .pill-btn.active { color: #fff; background: var(--accent); border-color: var(--accent); }
#panel-quote .trello-toggle-extras { padding: 3px 10px; font-size: 11px; border-radius: var(--r-pill); border: 1px dashed var(--accent); background: transparent; color: var(--accent); font-weight: 600; cursor: pointer; }
#panel-quote .trello-fields-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#panel-quote .trello-fields-row .trello-field-inline { flex: 1; min-width: 140px; }
#panel-quote .trello-fields-row .trello-field-check { flex: 0 0 auto; cursor: pointer; padding: 4px 10px; border: 1px dashed var(--line2); border-radius: var(--r-pill); }
#panel-quote .trello-fields-row .trello-field-check input { margin-right: 4px; }
#panel-quote .trello-fields-row .trello-field-check span { font-size: 10.5px; font-weight: 600; color: var(--ink2); text-transform: none; letter-spacing: 0; }
#panel-quote .trello-fields-row .trello-field-check:hover { border-color: var(--accent); color: var(--accent); }
#panel-quote .trello-field-inline { display: flex; align-items: center; gap: 6px; font-size: 11px; }
#panel-quote .trello-field-inline > span { font-size: 9.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; min-width: 32px; }
#panel-quote .trello-field-inline input[type=text] { flex: 1; padding: 4px 9px; border-radius: var(--r-s); border: 1px solid var(--line2); background: var(--surface); font-size: 11.5px; color: var(--ink); }
#panel-quote .trello-field-inline input[type=text]:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 2px rgba(196,96,122,.1); }
#panel-quote .trello-extras { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r-s); }
#panel-quote .trello-extras-row { display: flex; gap: 8px; align-items: center; }
#panel-quote .trello-toggle-recipient { padding: 4px 11px; border: 1px dashed var(--line2); border-radius: var(--r-pill); background: transparent; color: var(--ink2); font-size: 11px; font-weight: 600; cursor: pointer; flex-shrink: 0; }
#panel-quote .trello-toggle-recipient:hover { border-color: var(--accent); color: var(--accent); }
#panel-quote .trello-toggle-recipient.active { background: var(--accent); border-color: var(--accent); border-style: solid; color: #fff; }
#panel-quote .trello-recipient-block { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed var(--line); margin-top: 4px; }
#panel-quote .trello-recipient-block .trello-field-inline { flex: 1; min-width: 140px; }
#panel-quote .trello-recipient-block[hidden] { display: none; }
#panel-quote .trello-preview-title {
 font-family: var(--font); font-size: 12px; padding: 6px 10px;
 background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r-s);
 color: var(--ink); white-space: nowrap; overflow-x: auto; line-height: 1.5; margin: 0;
}
#panel-quote .trello-preview-desc {
 font-family: var(--font); font-size: 12px; padding: 8px 10px;
 background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r-s);
 color: var(--ink); resize: vertical; max-height: 150px; outline: none; line-height: 1.55;
}
#panel-quote .trello-preview-desc:focus { border-color: var(--accent); border-style: solid; }
#panel-quote .trello-desc-toggle { display: flex; align-items: center; gap: 5px; background: none; border: none; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--ink3); padding: 4px 2px; margin-top: 4px; transition: color .12s; }
#panel-quote .trello-desc-toggle:hover { color: var(--ink2); }
#panel-quote .trello-desc-arrow { font-size: 10px; transition: transform .15s; display: inline-block; }
#panel-quote .trello-desc-toggle.open .trello-desc-arrow { transform: rotate(90deg); }
#panel-quote #trelloDescWrap { margin-top: 4px; }

/* Address block (chat / nhanh / paste pills) */
#panel-quote .trello-addr-block { display: flex; flex-direction: column; gap: 6px; }
#panel-quote .trello-addr-pills { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
#panel-quote .trello-addr-pills .trello-pills-label { margin-right: 4px; }
#panel-quote .trello-addr-display { font-family: var(--font); font-size: 12px; padding: 6px 10px; background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r-s); color: var(--ink); min-height: 22px; line-height: 1.55; }
#panel-quote .trello-addr-paste { font-family: var(--font); font-size: 12px; padding: 6px 10px; background: var(--surface); border: 1px dashed var(--line2); border-radius: var(--r-s); color: var(--ink); resize: vertical; outline: none; line-height: 1.55; }
#panel-quote .trello-addr-paste:focus { border-color: var(--accent); }
#panel-quote .trello-addr-status { font-size: 10.5px; color: var(--ink3); min-height: 14px; }

/* Nhanh.vn lookup result blocks (3 cards) */
#panel-quote #quoteNhanhWrap > div[id^="quoteNhanh"]:not(#quoteNhanhWrap) { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); }
#panel-quote #quoteNhanhAddr,
#panel-quote #quoteNhanhChatAddr,
#panel-quote #quoteNhanhMsg { padding: 8px 10px; font-family: var(--font); font-size: 12.5px; line-height: 1.55; cursor: pointer; transition: all .15s; flex: none; overflow-y: visible; min-height: 0; }
#panel-quote .quote-msg-editable-wrap { position: relative; }
#panel-quote .quote-msg-editable-wrap #quoteNhanhMsg { padding-right: 32px; }
#panel-quote .quote-msg-editable-wrap #quoteNhanhMsg[contenteditable="true"] { background: var(--surface); border-left-color: var(--accent); cursor: text; outline: none; box-shadow: 0 0 0 3px rgba(196,96,122,.10); }
#panel-quote .quote-msg-edit-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 1px solid var(--line2); border-radius: 50%; background: var(--surface); font-size: 12px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: all .12s; line-height: 1; }
#panel-quote .quote-msg-edit-btn:hover { border-color: var(--accent); color: var(--accent); }
#panel-quote .quote-msg-edit-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#panel-quote #quoteNhanhAddr { border-left: 3px solid var(--green-text); }
#panel-quote #quoteNhanhChatAddr { border-left: 3px solid var(--ink3); }
#panel-quote #quoteNhanhMsg { border-left: 3px solid var(--accent); }
#panel-quote #quoteNhanhAddr:hover,
#panel-quote #quoteNhanhChatAddr:hover,
#panel-quote #quoteNhanhMsg:hover { background: var(--tint); }
#panel-quote .msg-template-row { gap: 5px; padding: 4px 0; }
#panel-quote .msg-template-row .pill-mini { padding: 3px 9px; font-size: 10.5px; }

/* Trello history banner */
#panel-quote .trello-history-banner { background: var(--amber-bg); border: 1px solid var(--amber-text); border-radius: var(--r-s); padding: 7px 10px; }
#panel-quote .trello-history-banner .hist-title { font-size: 11px; font-weight: 700; color: var(--amber-text); margin-bottom: 4px; }
#panel-quote .trello-history-banner .hist-list { list-style: none; margin: 0; padding: 0; font-size: 11px; font-family: var(--mono); }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === PHASE 4 — TAB 3 — TƯ VẤN / FAQ (Sakura v4) ======================== */
/* ═══════════════════════════════════════════════════════════════════════ */

#panel-faq {
 display: none;
 flex: 1;
 gap: 10px;
 min-height: 0;
}
#panel-faq.active { display: flex; }
#panel-faq .col {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 padding: 0;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 min-height: 0;
}
#panel-faq .col.col-left { width: 32%; flex-shrink: 0; }
#panel-faq .col.col-right { flex: 1; }

/* Faq head */
.faq-head { padding: 10px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; gap: 8px; flex-shrink: 0; }
.faq-title { font-family: var(--font); font-size: 17px; font-weight: 500; color: var(--ink); line-height: 1.3; }
.faq-title-sub { font-size: 11px; color: var(--ink3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.faq-head-actions { display: flex; gap: 6px; flex-shrink: 0; }
.faq-pill { padding: 5px 11px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--ink2); font-size: 11px; font-weight: 600; background: transparent; cursor: pointer; }
.faq-pill:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.faq-pill.primary { background: var(--accent); color: #fff; border: none; box-shadow: 0 2px 8px rgba(196,96,122,.25); }
.faq-pill.primary:hover { box-shadow: 0 3px 12px rgba(196,96,122,.4); }

/* Faq step cards */
.faq-step { display: grid; grid-template-columns: 32px 1fr; gap: 0; align-items: stretch; padding: 0; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 5px; cursor: default; transition: border-color .12s; background: var(--surface); overflow: hidden; position: relative; }
.faq-step.faq-sel { border-color: var(--accent); }
.faq-row-hdr { align-self: stretch; background: var(--surface2); border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background .1s; }
.faq-step:hover .faq-row-hdr { background: var(--line); }
.faq-step.faq-sel .faq-row-hdr { background: var(--accent); border-right-color: var(--accent); }
.faq-row-num { font-size: 11px; font-weight: 700; color: var(--ink3); transition: color .1s; line-height: 1; }
.faq-step:hover .faq-row-num { color: var(--ink2); }
.faq-step.faq-sel .faq-row-num { color: #fff; }
.faq-step .step-body { font-size: 12px; line-height: 1.65; color: var(--ink); padding: 8px 11px; transition: background .1s; }
.faq-step .step-body.copyable { cursor: pointer; }
.faq-step .step-body.copyable:hover { background: var(--tint); }
.faq-step.faq-sel .step-body { background: var(--tint); }
.faq-step .step-body em { color: var(--accent); font-style: normal; font-weight: 600; }
.faq-hint { font-size: 10.5px; color: var(--ink3); text-align: center; padding: 6px 0 2px; }
.faq-copy-result { background: var(--green-bg, #e8f5ef); border: 1px solid var(--green-border, #b8ddc8); border-radius: var(--r); padding: 7px 11px; margin: 8px 0 2px; }
.faq-copy-result-label { font-size: 9.5px; font-weight: 800; color: var(--green, #3a9b6f); text-transform: uppercase; letter-spacing: .3px; display: block; margin-bottom: 3px; }
.faq-copy-result-text { font-size: 11px; color: var(--ink); line-height: 1.55; display: block; white-space: pre-line; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === PHASE 5 — TAB 4 — NHẬP ĐƠN (Sakura v4 — markup-preserving restyle) === */
/* ═══════════════════════════════════════════════════════════════════════ */
/* Scope: keep existing 2-col layout (col-left pipeline | col-right form +
 history). Apply Sakura tokens, step-dot prefix on section labels, gradient
 submit, refined chips. 3-col reorganization deferred (preserves complex
 parser/auto-fill flow that mockup didn't account for). */

#panel-order {
 display: none;
 flex: 1;
 gap: 10px;
 min-height: 0;
}
#panel-order.active { display: flex; }
#panel-order .col {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 padding: 12px;
 overflow-y: auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
}
#panel-order .col.col-left { width: 42%; flex-shrink: 0; }
#panel-order .col.col-right { flex: 1; border: 1.5px solid var(--accent); box-shadow: 0 4px 16px rgba(196,96,122,.12); }

/* Section cards inside Tab 4 */
#panel-order .order-section {
 background: var(--paper);
 border: 1px solid var(--line);
 border-radius: var(--r);
 padding: 10px 12px;
 gap: 7px;
}
#panel-order .order-section-label {
 font-size: 10.5px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: .55px;
 color: var(--accent);
 display: flex;
 align-items: center;
 gap: 6px;
}

/* Step-dot prefix — auto-numbered via CSS counter on labels starting with N. */
#panel-order .col-left { counter-reset: order-step; }
#panel-order .col-left .order-section { counter-increment: order-step; position: relative; padding-left: 38px; }
#panel-order .col-left .order-section::before {
 content: counter(order-step);
 position: absolute;
 left: 11px;
 top: 11px;
 width: 22px;
 height: 22px;
 border-radius: 50%;
 background: var(--accent);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-family: var(--mono);
 font-size: 11px;
 font-weight: 700;
 box-shadow: 0 2px 6px rgba(196,96,122,.3);
}
/* Note: section labels in col-left have their literal '1. '/'3. ' digit
 prefixes removed in HTML — CSS counter handles numbering via ::before. */

/* Textareas + inputs */
#panel-order textarea,
#panel-order input[type=text],
#panel-order input[type=number] {
 border: 1.5px solid var(--line2);
 border-radius: var(--r-s);
 background: var(--surface);
 font-size: 12px;
 padding: 7px 11px;
 color: var(--ink);
 outline: none;
 transition: all .12s;
 font-family: var(--font);
 width: 100%;
}
#panel-order textarea:focus,
#panel-order input[type=text]:focus,
#panel-order input[type=number]:focus {
 border-color: var(--accent);
 background: var(--surface);
 box-shadow: 0 0 0 3px rgba(196,96,122,.1);
}
#panel-order textarea::placeholder,
#panel-order input::placeholder { color: var(--ink3); }

/* Auto-filled green highlight (Phase 5: visual class only; wire-up deferred) */
#panel-order .auto-filled { background: #f0fdf4; border-color: #86efac; }
#panel-order .auto-filled:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

/* Order tags chips — already exist but fine-tune for new tokens */
#panel-order .order-tags { display: flex; gap: 4px; flex-wrap: wrap; padding: 0; }
#panel-order .order-tag {
 font-size: 10px;
 padding: 2px 8px;
 border-radius: var(--r-pill);
 font-weight: 700;
 letter-spacing: .3px;
}

/* Status bar */
#panel-order .order-status-bar {
 border-radius: var(--r);
 font-size: 11.5px;
 font-weight: 600;
 padding: 6px 11px;
 border-left: 3px solid var(--ink3);
 background: var(--tint);
 color: var(--ink2);
}
#panel-order .order-status-success { background: var(--green); color: var(--green-text); border-left-color: var(--green-text); }
#panel-order .order-status-warn { background: var(--amber-bg); color: var(--amber-text); border-left-color: var(--amber-text); }
#panel-order .order-status-error { background: var(--red-bg); color: var(--red-text); border-left-color: var(--red-text); }
#panel-order .order-status-loading { background: var(--tint2); color: var(--ink2); border-left-color: var(--accent); }
#panel-order .order-status-loading::before {
 content: '';
 display: inline-block;
 width: 7px; height: 7px;
 border-radius: 50%;
 background: var(--accent);
 margin-right: 8px;
 vertical-align: middle;
 animation: zPulse 1.4s cubic-bezier(.4,.0,.6,1) infinite;
}
@keyframes zPulse {
 0%,100% { opacity: 1; transform: scale(1); }
 50% { opacity: .35; transform: scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
 #panel-order .order-status-loading::before { animation: none; }
}
#panel-order .order-status-idle { background: var(--tint); color: var(--ink3); border-left-color: var(--ink4); }

/* Parse button + submit */
#panel-order .order-parse-btn {
 padding: 6px 14px;
 border-radius: var(--r-pill);
 background: var(--accent);
 color: #fff;
 font-size: 11.5px;
 font-weight: 700;
 border: none;
 cursor: pointer;
 align-self: flex-start;
 box-shadow: 0 2px 6px rgba(196,96,122,.25);
}
#panel-order .order-parse-btn:hover { background: var(--accent-deep); box-shadow: 0 3px 10px rgba(196,96,122,.4); }

#panel-order .order-form { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
#panel-order .order-form-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
#panel-order .order-form-group { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
#panel-order .order-form-group label { font-size: 9.5px; font-weight: 700; color: var(--ink3); text-transform: uppercase; letter-spacing: .5px; }
#panel-order .order-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 8px; border-top: 1px dashed var(--line); }
#panel-order .order-reset-btn { padding: 7px 13px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: transparent; color: var(--ink2); font-size: 11.5px; font-weight: 600; cursor: pointer; }
#panel-order .order-reset-btn:hover { border-color: var(--accent); color: var(--accent); }
#panel-order .order-submit-btn {
 padding: 8px 18px;
 border-radius: var(--r-pill);
 background: var(--accent);
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 border: none;
 cursor: pointer;
 box-shadow: 0 3px 10px rgba(196,96,122,.3);
}
#panel-order .order-submit-btn:hover:not(:disabled) { box-shadow: 0 4px 14px rgba(196,96,122,.45); }
#panel-order .order-submit-btn:disabled { background: var(--ink4); cursor: not-allowed; box-shadow: none; opacity: .8; }

#panel-order .order-flags { display: flex; gap: 4px; flex-wrap: wrap; flex-shrink: 0; }
#panel-order .order-flag-chip { padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--line2); background: transparent; font-size: 10.5px; font-weight: 600; color: var(--ink3); cursor: pointer; }
#panel-order .order-flag-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }

#panel-order .order-no-products { color: var(--ink3); font-size: 11.5px; padding: 8px 0; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === PHASE 6 — TAB 5 — KIỂM ĐƠN (Sakura v4 — markup-preserving restyle) === */
/* ═══════════════════════════════════════════════════════════════════════ */

#panel-audit {
 display: none;
 flex: 1;
 min-height: 0;
 overflow-y: auto;
 padding: 6px 4px 14px;
}
#panel-audit.active { display: block; }
#panel-audit .audit-wrap { max-width: 1820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }

/* Header card */
#panel-audit .audit-header {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 padding: 12px 16px;
 display: flex;
 align-items: center;
 gap: 10px;
 flex-wrap: wrap;
}
#panel-audit .audit-header::before {
 content: "🔍 Kiểm đơn hôm nay";
 font-family: var(--font); font-size: 17px;
 font-weight: 500;
 color: var(--ink);
 margin-right: auto;
}
#panel-audit .audit-header select {
 padding: 6px 12px;
 border-radius: var(--r-pill);
 border: 1.5px solid var(--line2);
 background: var(--tint);
 font-size: 12px;
 color: var(--ink);
 font-family: var(--font);
 cursor: pointer;
}
#panel-audit .audit-header select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(196,96,122,.1); }
#panel-audit .audit-header .pill-btn {
 padding: 6px 14px;
 border-radius: var(--r-pill);
 background: var(--accent);
 color: #fff;
 font-size: 12px;
 font-weight: 700;
 border: none;
 box-shadow: 0 2px 8px rgba(196,96,122,.25);
 cursor: pointer;
}
#panel-audit .audit-header .pill-btn:hover { box-shadow: 0 3px 12px rgba(196,96,122,.4); }
#panel-audit .audit-running { font-size: 11.5px; color: var(--accent); font-weight: 600; padding: 4px 10px; background: var(--accent-bg); border-radius: var(--r-pill); }

/* Summary cards grid */
#panel-audit .audit-summary { display: flex; flex-direction: column; gap: 6px; }
#panel-audit .audit-cards {
 display: grid;
 grid-template-columns: repeat(5, 1fr);
 gap: 10px;
}
#panel-audit .audit-card {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 padding: 14px 16px;
 display: flex;
 flex-direction: column;
 gap: 4px;
 cursor: pointer;
 transition: all .14s;
}
#panel-audit .audit-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-3); border-color: var(--accent); }
#panel-audit .audit-card .ac-lbl {
 font-size: 9.5px;
 font-weight: 700;
 color: var(--ink3);
 text-transform: uppercase;
 letter-spacing: .55px;
 order: 2;
}
#panel-audit .audit-card .ac-num {
 font-family: var(--font); font-size: 30px;
 font-weight: 600;
 color: var(--ink);
 font-variant-numeric: tabular-nums;
 line-height: 1.1;
 order: 1;
}
#panel-audit .audit-card.ok .ac-num { color: var(--green-text); }
#panel-audit .audit-card.mismatch .ac-num { color: var(--red-text); }
#panel-audit .audit-card.nonote .ac-num { color: var(--ink3); }
#panel-audit .audit-card.parsefail .ac-num { color: var(--amber-text); }
#panel-audit .audit-card.ok .ac-lbl { color: var(--green-text); }
#panel-audit .audit-card.mismatch .ac-lbl { color: var(--red-text); }
#panel-audit .audit-card.parsefail .ac-lbl { color: var(--amber-text); }

#panel-audit .audit-meta { display: flex; gap: 10px; font-size: 10.5px; color: var(--ink3); padding: 0 4px; }

/* Audit table — 5-col grid (handoff) */
#panel-audit .audit-table {
 background: var(--surface);
 border: 1px solid var(--line);
 border-radius: var(--r-l);
 box-shadow: var(--shadow-2);
 overflow: hidden;
}
#panel-audit .audit-empty { padding: 32px; text-align: center; color: var(--ink3); }
#panel-audit .audit-table-head {
 display: grid;
 grid-template-columns: 130px 1fr 1fr 80px 90px;
 gap: 10px;
 padding: 9px 14px;
 background: var(--tint);
 border-bottom: 1px solid var(--line2);
 font-size: 9.5px;
 font-weight: 700;
 color: var(--ink3);
 text-transform: uppercase;
 letter-spacing: .55px;
 position: sticky;
 top: 0;
 z-index: 1;
}
#panel-audit .audit-rows { display: flex; flex-direction: column; }
#panel-audit .audit-row {
 display: grid;
 grid-template-columns: 130px 1fr 1fr 80px 90px;
 gap: 10px;
 padding: 10px 14px;
 border-bottom: 1px solid var(--line);
 font-size: 11.5px;
 align-items: start;
 transition: background .12s;
}
#panel-audit .audit-row:last-child { border-bottom: none; }
#panel-audit .audit-row:hover { background: var(--tint); }
#panel-audit .audit-row.mismatch { background: linear-gradient(90deg, rgba(252,165,165,.10), transparent 60%); }
#panel-audit .audit-row.no-note { opacity: .75; }

/* Col 1: id + status + SKU/carrier */
#panel-audit .audit-id { font-family: var(--mono); font-size: 12px; font-weight: 600; }
#panel-audit .audit-id a { color: var(--accent); text-decoration: none; }
#panel-audit .audit-id a:hover { color: var(--accent-deep); text-decoration: underline; }
#panel-audit .audit-stat { display: inline-block; font-size: 9.5px; padding: 1px 7px; border-radius: 8px; font-weight: 700; margin-top: 3px; letter-spacing: .3px; }
#panel-audit .audit-stat.ok { background: var(--green); color: var(--green-text); }
#panel-audit .audit-stat.mismatch { background: var(--red-bg); color: var(--red-text); }
#panel-audit .audit-stat.no-note { background: var(--tint); color: var(--ink3); }
#panel-audit .audit-stat.parse-fail { background: var(--amber-bg); color: var(--amber-text); }
#panel-audit .audit-skus { font-size: 10px; color: var(--ink3); margin-top: 3px; font-family: var(--mono); }

/* Col 2/3: structured cell lines */
#panel-audit .audit-cell-line { display: flex; gap: 5px; padding: 1px 0; font-size: 11px; font-family: var(--mono); }
#panel-audit .audit-cell-line .k { color: var(--ink3); min-width: 32px; }
#panel-audit .audit-cell-line .v { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
#panel-audit .audit-cell-line.bad { color: var(--red-text); font-weight: 700; }
#panel-audit .audit-cell-line.bad .v { background: var(--red-bg); padding: 0 4px; border-radius: 3px; color: var(--red-text); }
#panel-audit .audit-cell-line.bad .k { color: var(--red-text); }

/* Col 4: time/carrier */
#panel-audit .audit-meta { font-size: 10.5px; color: var(--ink3); font-family: var(--mono); line-height: 1.4; }

/* Col 5: actions */
#panel-audit .audit-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
#panel-audit .audit-act-btn { font-size: 10.5px; padding: 4px 10px; border-radius: var(--r-pill); border: 1px solid var(--line2); color: var(--ink2); font-weight: 600; background: transparent; cursor: pointer; text-decoration: none; text-align: center; }
#panel-audit .audit-act-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
#panel-audit .audit-act-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
#panel-audit .audit-act-btn.primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === PHASE 7 — TOPBAR + ⌘K PALETTE + cross-cutting (Sakura v4) ========= */
/* ═══════════════════════════════════════════════════════════════════════ */

/* Topbar — apply Sakura tokens on top of existing structure */
.topbar {
 background: var(--surface);
 border: 1px solid var(--line);
 box-shadow: var(--shadow-2);
 padding: 7px 14px;
 border-radius: var(--r-pill);
}
.app-brand {
 font-size: 19px;
 font-weight: 500;
 letter-spacing: -.4px;
 padding-right: 12px;
 border-right: 1.5px solid var(--line2);
 display: flex;
 align-items: center;
 gap: 7px;
}
.tabs { gap: 2px; }
.tab {
 padding: 7px 14px;
 font-size: 12.5px;
 font-weight: 600;
 border-radius: var(--r-pill);
 display: inline-flex;
 align-items: center;
 gap: 6px;
}
.tab:hover { color: var(--ink); background: var(--tint); }
.tab.active {
 color: #fff;
 background: var(--accent);
 box-shadow: 0 2px 8px rgba(196,96,122,.3);
 font-weight: 600;
}
.tab-badge {
 font-size: 10px;
 padding: 0 6px;
 min-width: 16px;
 height: 16px;
 line-height: 16px;
 border-radius: 8px;
 background: var(--accent-bg);
 color: var(--accent-deep);
 font-weight: 700;
 display: inline-block;
 text-align: center;
}
.tab.active .tab-badge { background: rgba(255,255,255,.25); color: #fff; }

.topbar-right { gap: 8px; }
.pronoun-picker {
 display: flex;
 gap: 2px;
 padding: 2px;
 background: var(--tint);
 border-radius: var(--r-pill);
}
.pronoun-chip {
 padding: 4px 10px;
 border-radius: var(--r-pill);
 font-size: 11px;
 font-weight: 600;
 color: var(--ink2);
 background: transparent;
 border: none;
 cursor: pointer;
}
.pronoun-chip:hover { background: rgba(255,255,255,.6); color: var(--accent); }
.pronoun-chip.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-1); }
.pronoun-chip .pn-customer { color: var(--ink3); font-weight: 500; }
.pronoun-chip.active .pn-customer { color: var(--accent); opacity: .65; }
.pronoun-chip.active .pn-shop { color: var(--accent); font-weight: 700; }

.sync-btn {
 display: flex;
 align-items: center;
 gap: 5px;
 padding: 5px 11px;
 border-radius: var(--r-pill);
 border: 1.5px solid var(--line2);
 color: var(--ink2);
 font-size: 11.5px;
 font-weight: 600;
 background: transparent;
 cursor: pointer;
}
.sync-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
.sync-btn .sync-time, .sync-btn #syncTimeLabel { font-size: 9.5px; color: var(--ink3); font-family: var(--mono); }

.user-trigger {
 display: flex;
 align-items: center;
 gap: 6px;
 padding: 2px 10px 2px 3px;
 border-radius: var(--r-pill);
 border: 1.5px solid var(--line2);
 background: transparent;
 color: var(--ink2);
 cursor: pointer;
}
.user-trigger:hover { border-color: var(--accent); color: var(--accent); }
.user-avatar {
 width: 24px;
 height: 24px;
 border-radius: 50%;
 background: var(--accent);
 color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 font-weight: 700;
 font-size: 11px;
}

/* Command palette ⌘K (Phase 7 — new) */
.cmd-palette {
 position: fixed;
 inset: 0;
 background: rgba(43,30,27,.32);
 display: none;
 align-items: flex-start;
 justify-content: center;
 z-index: 100;
 padding-top: 14vh;
 backdrop-filter: blur(6px);
}
.cmd-palette.show { display: flex; }
.cmd-palette-card {
 background: var(--surface);
 border: 1px solid var(--line2);
 border-radius: var(--r-l);
 width: 90vw;
 max-width: 540px;
 box-shadow: var(--shadow-3);
 display: flex;
 flex-direction: column;
 overflow: hidden;
}
.cmd-palette-input {
 width: 100%;
 padding: 14px 18px;
 border: none;
 border-bottom: 1px solid var(--line);
 background: transparent;
 font-size: 14px;
 font-family: var(--font);
 color: var(--ink);
 outline: none;
}
.cmd-palette-input::placeholder { color: var(--ink3); }
.cmd-palette-list {
 list-style: none;
 margin: 0;
 padding: 6px;
 max-height: 50vh;
 overflow-y: auto;
}
.cmd-palette-item {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 9px 12px;
 border-radius: var(--r-s);
 font-size: 13px;
 cursor: pointer;
 color: var(--ink);
}
.cmd-palette-item .cmd-icon { color: var(--accent); width: 18px; flex-shrink: 0; text-align: center; }
.cmd-palette-item .cmd-label { flex: 1; }
.cmd-palette-item .cmd-hint { font-size: 10.5px; color: var(--ink3); font-family: var(--mono); }
.cmd-palette-item.active, .cmd-palette-item:hover { background: var(--tint); }
.cmd-palette-item.active { color: var(--accent); }
.cmd-palette-empty { padding: 18px; text-align: center; color: var(--ink3); font-size: 12px; }
.cmd-palette-foot { padding: 7px 14px; border-top: 1px solid var(--line); display: flex; gap: 14px; font-size: 10px; color: var(--ink3); background: var(--tint); }
.cmd-palette-foot kbd { display: inline-block; padding: 1px 5px; background: #fff; border: 1px solid var(--line2); border-bottom-width: 2px; border-radius: 3px; font-family: var(--mono); font-size: 9.5px; color: var(--ink2); margin-right: 4px; }

/* ═══════════════════════════════════════════════════════════════════════ */
/* === MERGED FROM main — guide modal + responsive mobile (cb90b54+ae38cbb+eff2deb) === */
/* ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
 .audit-row > summary { grid-template-columns: 90px 90px 1fr 110px 1fr 70px; font-size: 11.5px; }
 .audit-cards { grid-template-columns: repeat(2, 1fr); }
 .ar-body { grid-template-columns: 1fr; }
}

/* Phone validation indicator */
.invalid-phone,
.trello-field-inline:has(.invalid-phone) {
 border-color: #c0392b !important;
 background: #fff5f5;
}
.invalid-phone:focus,
.trello-field-inline:has(.invalid-phone:focus) {
 border-color: #c0392b !important;
 box-shadow: 0 0 0 2px rgba(192, 57, 43, .15);
}

/* Phone warning (block push if SĐT sai) */
.trello-warn-phone {
 background: #ffe8e8;
 color: #b03030;
 border: 1px solid #f0b0b0;
}

/* ─── Hướng dẫn sử dụng modal — editorial magazine style ─── */
.guide-card {
 max-width: 720px;
 max-height: 90vh;
 padding: 0;
 overflow: hidden;
 border-radius: 16px;
 position: relative;
 background:
 radial-gradient(circle at 90% -10%, rgba(212,160,23,.08), transparent 50%),
 radial-gradient(circle at -10% 110%, rgba(196,96,122,.06), transparent 60%),
 var(--surface);
}
.guide-close {
 position: absolute;
 top: 12px; right: 14px;
 width: 32px; height: 32px;
 border: none; background: transparent;
 font-size: 22px; line-height: 1;
 color: var(--text2);
 cursor: pointer;
 border-radius: 50%;
 transition: all .15s;
 z-index: 2;
}
.guide-close:hover { background: var(--bg2); color: var(--accent); transform: rotate(90deg); }

.guide-card > * { overflow-y: auto; }
.guide-card {
 display: flex !important;
 flex-direction: column !important;
 gap: 0 !important;
}
.guide-card > section,
.guide-card > header,
.guide-card > footer { flex-shrink: 0; }
.guide-card {
 overflow-y: auto;
}

/* Hero */
.guide-hero {
 padding: 48px 44px 36px;
 background:
 linear-gradient(135deg, rgba(255,234,238,.5) 0%, transparent 60%),
 var(--surface);
 border-bottom: 1px solid var(--border);
 position: relative;
}
.guide-hero::before {
 content: "✿";
 position: absolute;
 top: 22px; right: 50px;
 font-size: 56px;
 color: rgba(196,96,122,.12);
 font-family: var(--font);
 pointer-events: none;
 transform: rotate(15deg);
}
.guide-hero-eyebrow {
 font-size: 10.5px;
 font-weight: 700;
 letter-spacing: .25em;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 10px;
}
.guide-hero-title {
 font-family: var(--font);
 font-size: 38px;
 font-weight: 400;
 line-height: 1.05;
 color: var(--text);
 margin: 0 0 14px;
 letter-spacing: -.5px;
}
.guide-hero-title em { color: var(--accent);
}
.guide-hero-sub {
 font-size: 14px;
 line-height: 1.55;
 color: var(--text2);
 max-width: 520px;
 margin: 0;
}

/* Section common */
.guide-section { padding: 36px 44px; border-top: 1px solid var(--border); }
.guide-section-eyebrow {
 font-size: 10px;
 font-weight: 700;
 letter-spacing: .3em;
 text-transform: uppercase;
 color: var(--text2);
 opacity: .65;
 margin-bottom: 6px;
}
.guide-section-title {
 font-family: var(--font);
 font-size: 24px;
 font-weight: 500; color: var(--text);
 margin: 0 0 24px;
 letter-spacing: -.3px;
}

/* Workflow flow (numbered list) */
.guide-flow { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.guide-flow li {
 display: flex; gap: 18px;
 padding: 18px 20px;
 background: var(--bg2);
 border-radius: 10px;
 border: 1px solid transparent;
 transition: border-color .15s;
}
.guide-flow li:hover { border-color: var(--border2); }
.gf-num {
 flex-shrink: 0;
 font-family: var(--font);
 font-size: 26px;
 font-weight: 400; color: var(--accent);
 line-height: 1;
 width: 42px;
 letter-spacing: -1px;
}
.guide-flow li > div { flex: 1; min-width: 0; }
.guide-flow strong {
 display: block;
 font-size: 14.5px;
 color: var(--text);
 margin-bottom: 6px;
 font-weight: 600;
}
.guide-flow strong em { font-weight: 400;
 color: var(--accent);
}
.guide-flow p {
 margin: 0 0 6px;
 font-size: 13.5px;
 line-height: 1.55;
 color: var(--text2);
}
.guide-flow p:last-child { margin-bottom: 0; }
.guide-flow ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; color: var(--text2); line-height: 1.65; }
.guide-flow ul li {
 display: list-item;
 padding: 0; background: none; border: none;
 margin-bottom: 2px;
}
.guide-flow ul li:hover { border: none; }
.gf-tip {
 margin-top: 10px !important;
 padding: 8px 12px;
 background: rgba(212,160,23,.08);
 border-left: 2px solid #d4a017;
 border-radius: 4px;
 font-size: 12.5px !important;
 color: var(--text) !important; }

/* 5 tab cards */
.guide-tabs {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
 gap: 12px;
}
.gt-card {
 padding: 18px 16px;
 background: var(--bg);
 border: 1px solid var(--border);
 border-radius: 10px;
 transition: all .18s;
}
.gt-card:hover {
 transform: translateY(-2px);
 border-color: var(--accent);
 box-shadow: 0 8px 24px rgba(196,96,122,.1);
}
.gt-icon {
 font-size: 26px;
 margin-bottom: 8px;
 line-height: 1;
}
.gt-card h4 {
 font-family: var(--font);
 font-size: 16px;
 font-weight: 500;
 color: var(--text);
 margin: 0 0 6px;
 letter-spacing: -.2px;
}
.gt-card p {
 font-size: 12.5px;
 line-height: 1.5;
 color: var(--text2);
 margin: 0;
}
.gt-card em { color: var(--accent); }

/* FAQ */
.guide-faq { margin: 0; display: flex; flex-direction: column; gap: 14px; }
.guide-faq > div {
 padding: 14px 18px;
 background: var(--bg2);
 border-radius: 8px;
 border-left: 3px solid var(--accent);
}
.guide-faq dt {
 font-size: 13.5px;
 font-weight: 600;
 color: var(--text);
 margin-bottom: 4px;
}
.guide-faq dd {
 margin: 0;
 font-size: 13px;
 line-height: 1.55;
 color: var(--text2);
}
.guide-faq code {
 font-family: ui-monospace, "SF Mono", monospace;
 font-size: 11.5px;
 background: var(--bg);
 padding: 1px 6px;
 border-radius: 3px;
 border: 1px solid var(--border);
 color: var(--accent-text);
}
.guide-faq strong { color: var(--text); }
.guide-faq em { color: var(--accent); }

/* Footer */
.guide-footer {
 padding: 28px 44px 32px;
 background: var(--bg2);
 border-top: 1px solid var(--border);
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
}
.guide-footer p {
 font-size: 13px;
 color: var(--text2);
 margin: 0; }
.guide-footer .btn-primary {
 white-space: nowrap;
}

/* Responsive */
@media (max-width: 700px) {
 .guide-hero { padding: 32px 24px 24px; }
 .guide-hero-title { font-size: 28px; }
 .guide-hero::before { font-size: 40px; right: 20px; top: 18px; }
 .guide-section { padding: 28px 24px; }
 .guide-flow li { padding: 14px; gap: 12px; }
 .gf-num { font-size: 22px; width: 32px; }
 .guide-footer { padding: 22px 24px; flex-direction: column; align-items: stretch; }
}

/* ════════════════════════════════════════════════════════════════
 RESPONSIVE — MOBILE ≤ 680px
 Placed at end of file so these rules win source-order ties against
 desktop ID-prefixed selectors like #panel-quote .col-left { width: 50% }.
 ════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
 html { overflow-x: hidden; width: 100%; }
 body { overflow-y: auto; overflow-x: hidden; width: 100%; overscroll-behavior-x: none; }
 #app { height: auto; min-height: 100vh; padding: 6px 8px; overflow-x: hidden; max-width: 100vw; box-sizing: border-box; touch-action: pan-y; }
 /* Prevent horizontal swipe propagating from inner scroll containers to page */
 .tabs { overscroll-behavior-x: contain; }
 .pronoun-picker { overscroll-behavior-x: contain; }
 #panel-audit { overscroll-behavior: contain; }

 /* Topbar: brand hidden, tabs scroll, right group wraps */
 .topbar { flex-wrap: wrap; padding: 8px 10px; gap: 8px; border-radius: var(--radius-lg); }
 .app-brand { display: none; }
 .tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; max-width: 100%; }
 .tabs::-webkit-scrollbar { display: none; }
 .tab { padding: 7px 14px; font-size: 13px; white-space: nowrap; }
 /* Topbar right row: keep nowrap so sync button stays visible, let pronoun
    picker scroll internally rather than breaking to next line */
 .topbar-right { width: 100%; justify-content: space-between; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
 .pronoun-picker { overflow-x: auto; scrollbar-width: none; flex: 1 1 0; min-width: 0; overscroll-behavior-x: contain; }
 .pronoun-picker::-webkit-scrollbar { display: none; }

 /* Panels stack vertically — override ID-prefixed widths.
    Desktop uses .col.col-left (2 classes, specificity 1,2,0) which beats
    single-class mobile selectors (1,1,0) — must list all double-class variants. */
 .panel { flex-direction: column; height: auto; overflow: visible; }
 .col { overflow: visible; max-width: 100%; box-sizing: border-box; }
 #panel-quote .col { overflow-y: visible; }
 #panel-quote .quote-preview-col { overflow-y: visible; }
 .col-left,
 .col.col-left,
 #panel-quote .col-left,
 #panel-quote .col.col-left,
 #panel-products .col.col-left,
 #panel-faq .col.col-left,
 #panel-order .col-left,
 #panel-order .col.col-left { width: 100%; max-height: 50vh; overflow-y: auto; flex-shrink: 1; }
 .col-right,
 #panel-quote .col.col-right,
 #panel-order .col-right { width: 100%; padding: 10px 12px; }
 #panel-order .col-left { padding: 10px 12px; }

 /* Product detail: single column + wrap header */
 .detail-top-grid { grid-template-columns: 1fr; }
 .detail-header { flex-wrap: wrap; }
 .ds-grid { grid-template-columns: 1fr; gap: 4px; }

 /* Quote tab: stack options, wrap pills, full-width preview */
 .quote-options { flex-direction: column; gap: 10px; }
 .quote-previews,
 #panel-quote .quote-previews { grid-template-columns: 1fr; }
 .opt-section { grid-template-columns: 60px 1fr; gap: 4px 8px; }
 .opt-group { flex-wrap: wrap; }
 .send-guide-section { flex-wrap: wrap; gap: 6px; }
 .send-guide-text { flex: 1 1 100%; min-width: 0; }

 /* Quote items: allow wrap so qty + prices don't squeeze name */
 .qi { flex-wrap: wrap; gap: 6px 8px; }
 .qi-name-wrap { flex: 1 1 100%; min-width: 0; }
 .qi-prices { min-width: 0; flex: 1 1 auto; text-align: right; }

 /* Nhanh lookup row */
 .nhanh-lookup-row { flex-wrap: wrap; }
 .nhanh-sdt-input { flex: 1 1 60%; }

 /* FAQ */
 .faq-header { flex-wrap: wrap; gap: 8px; }

 /* Order tab — stack form rows, badge above name.
 `!important` overrides inline style="align-items:flex-end" in index.html. */
 .order-form { padding: 10px; gap: 10px; }
 .order-form-row { flex-direction: column; align-items: stretch !important; gap: 7px; }
 .nhanh-badge { align-self: flex-start; margin-bottom: 0; }
 .order-actions { flex-wrap: wrap; gap: 6px; }
 .order-reset-btn, .order-submit-btn { flex: 1 1 auto; padding-left: 12px; padding-right: 12px; }

 /* Trello panel — collapse 2-col grids */
 .trello-panel { padding: 8px 9px; }
 .trello-panel-head { flex-wrap: wrap; gap: 6px; }
 .trello-panel-head .trello-actions { margin-left: auto; }
 .trello-fields-row { grid-template-columns: 1fr; gap: 5px; }
 .trello-extras { grid-template-columns: 1fr; gap: 5px; }
 .trello-pills-row { gap: 4px 6px; }
 .trello-toggle-extras { margin-left: 0; }
 .trello-pills-divider { display: none; }

 /* Audit tab — tighter padding, summary becomes flexible */
 #panel-audit { padding: 10px 8px; }
 .audit-wrap { max-width: 100%; }
 .audit-header { gap: 6px; }
 .audit-header select { min-width: 0; flex: 1 1 100%; }
 .audit-cards { grid-template-columns: repeat(2, 1fr); gap: 6px; }
 /* ID-prefixed desktop rules need matching specificity to override */
 #panel-audit .audit-cards { grid-template-columns: repeat(2, 1fr); }
 #panel-audit .audit-table-head { display: none; }
 #panel-audit .audit-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 8px;
  padding: 8px 10px;
 }
 #panel-audit .audit-row > div:first-child { flex: 1 1 0; min-width: 0; }
 #panel-audit .audit-row > div:nth-child(2),
 #panel-audit .audit-row > div:nth-child(3) { flex: 1 1 100%; min-width: 0; font-size: 11px; }
 #panel-audit .audit-row > .audit-meta { flex: 0 0 auto; }
 #panel-audit .audit-row > .audit-actions { flex: 0 0 auto; }
 .audit-card { padding: 8px 6px; }
 .audit-card .ac-num { font-size: 18px; }
 .audit-meta { flex-wrap: wrap; gap: 4px 14px; }
 .audit-row > summary {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 grid-template-columns: none;
 gap: 3px 8px;
 padding: 8px 10px;
 font-size: 12px;
 }
 .audit-row .ar-name { flex: 1 1 100%; order: 1; }
 .audit-row .ar-id-wrap { order: 2; }
 .audit-row .ar-phone { order: 3; }
 .audit-row .ar-total { order: 4; margin-left: auto; }
 .audit-row .ar-time { order: 5; flex: 1 1 100%; text-align: left; }
 .audit-row .ar-badge { order: 0; }
 .ar-body { grid-template-columns: 1fr; padding: 8px 10px 10px; }

 /* Modal padding */
 .modal-overlay { padding: 12px; }
 .modal-card { padding: 22px 20px; }

 /* Toast: full width with margins so it doesn't clip */
 .toast { right: 12px; left: 12px; bottom: 16px; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
 RESPONSIVE — SMALL PHONE ≤ 480px
 ════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
 #app { padding: 4px 6px; gap: 6px; }
 .topbar { padding: 6px 8px; gap: 6px; }
 .tab { padding: 6px 11px; font-size: 12.5px; }
 .pronoun-picker { padding: 2px; gap: 3px; }
 .pronoun-chip { padding: 3px 8px; font-size: 11px; }
 .sync-btn { padding: 5px 10px; font-size: 11.5px; }
 .col-left,
 .col.col-left,
 #panel-quote .col-left,
 #panel-quote .col.col-left,
 #panel-products .col.col-left,
 #panel-faq .col.col-left,
 #panel-order .col-left,
 #panel-order .col.col-left { max-height: 42vh; }
 .audit-cards { grid-template-columns: 1fr 1fr; gap: 5px; }
 .audit-card { padding: 7px 5px; }
 .audit-card .ac-num { font-size: 16px; }
 .audit-card .ac-lbl { font-size: 10px; }
 .modal-card { padding: 18px 16px; }
 /* Stack order action buttons vertically so long labels like
 "✓ Tạo đơn Nhanh.vn" don't get clipped at narrow widths. */
 .order-actions { flex-direction: column-reverse; gap: 6px; }
 .order-reset-btn, .order-submit-btn { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════
   ADMIN ANALYTICS DASHBOARD
   ════════════════════════════════════════════════════════════════ */
.adm-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px; font-family: var(--font, system-ui); color: var(--ink1, #1a1a1a); }
.adm-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 10px; }
.adm-topbar h1 { font-size: 17px; font-weight: 700; margin: 0; }
.adm-range-pills { display: flex; gap: 6px; }
.adm-range-pills button { padding: 5px 14px; border-radius: 20px; border: 1.5px solid var(--line, #e0e0e0); background: var(--surface2, #f5f5f5); cursor: pointer; font-size: 12.5px; }
.adm-range-pills button.active { background: var(--accent, #e11d48); color: #fff; border-color: var(--accent, #e11d48); }
.adm-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.adm-kpi { background: var(--surface1, #fff); border: 1px solid var(--line, #e0e0e0); border-radius: 10px; padding: 14px 16px; }
.adm-kpi .k-val { font-size: 26px; font-weight: 700; color: var(--accent, #e11d48); line-height: 1; }
.adm-kpi .k-lbl { font-size: 11.5px; color: var(--ink2, #666); margin-top: 4px; }
.adm-section { background: var(--surface1, #fff); border: 1px solid var(--line, #e0e0e0); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.adm-section-hdr { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.adm-section-hdr h2 { font-size: 13.5px; font-weight: 700; margin: 0; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.adm-table th { text-align: left; padding: 6px 8px; border-bottom: 2px solid var(--line, #e0e0e0); color: var(--ink2, #666); cursor: pointer; user-select: none; white-space: nowrap; }
.adm-table th:hover { color: var(--accent, #e11d48); }
.adm-table th.sort-asc::after { content: ' ↑'; }
.adm-table th.sort-desc::after { content: ' ↓'; }
.adm-table td { padding: 7px 8px; border-bottom: 1px solid var(--line2, #f0f0f0); vertical-align: middle; }
.adm-table tr:last-child td { border-bottom: none; }
.adm-table tr:hover td { background: var(--surface2, #fafafa); }
.adm-grade { display: inline-block; padding: 2px 8px; border-radius: 12px; font-weight: 700; font-size: 11px; }
.adm-grade.A { background: #dcfce7; color: #16a34a; }
.adm-grade.B { background: #fef9c3; color: #a16207; }
.adm-grade.C { background: #fee2e2; color: #dc2626; }
.adm-rate-bar { display: flex; align-items: center; gap: 8px; }
.adm-rate-bar .bar { height: 6px; background: var(--accent, #e11d48); border-radius: 3px; min-width: 2px; }
.adm-empty { color: var(--ink3, #aaa); font-size: 12px; text-align: center; padding: 24px 0; }
.adm-feed { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
.adm-feed-row { display: flex; align-items: center; gap: 10px; padding: 5px 4px; border-radius: 6px; font-size: 12px; }
.adm-feed-row:hover { background: var(--surface2, #f5f5f5); }
.adm-feed-row .f-user { font-weight: 600; min-width: 60px; }
.adm-feed-row .f-event { color: var(--ink2, #666); flex: 1; }
.adm-feed-row .f-time { color: var(--ink3, #aaa); font-size: 11px; white-space: nowrap; }
.adm-heatmap { display: grid; grid-template-columns: 70px repeat(24, 1fr); gap: 2px; font-size: 10px; }
.adm-heatmap .hm-label { display: flex; align-items: center; font-weight: 600; color: var(--ink2, #666); padding: 2px 4px; }
.adm-heatmap .hm-cell { width: 100%; aspect-ratio: 1; border-radius: 3px; background: var(--line2, #f0f0f0); }
.adm-heatmap .hm-hour { text-align: center; color: var(--ink3, #aaa); padding-bottom: 2px; }