* { margin:0; padding:0; box-sizing:border-box; }
body {
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:#eef1f4;
  color:#1f2933;
}

#topbar {
  height:50px;
  background:#263241;
  color:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 14px;
}
.brand-mark { display:flex; align-items:center; gap:10px; font-size:18px; color:#ffdf3c; }
.logo-dot {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:6px;
  background:#f20; color:#fffd72; font-weight:800;
}
.top-crumb {
  background:#d6ad41;
  color:#fff7d6;
  padding:5px 14px;
  border-radius:2px;
  font-size:13px;
}
.top-actions { display:flex; align-items:center; gap:28px; font-size:14px; color:#d7dde6; }
#login-section { display:flex; align-items:center; }
#login-form { display:flex; align-items:center; gap:6px; }
#login-info { display:none; align-items:center; gap:10px; }
.login-input {
  height:28px; width:100px; padding:0 8px;
  border:1px solid #5d6978; border-radius:2px;
  background:#f0f2f5; color:#333; font-size:12px;
  outline:none;
}
.login-input:focus { border-color:#4db6bd; background:#fff; }
.login-btn {
  height:28px; min-width:50px; padding:0 12px;
  border:1px solid #4db6bd; background:#4db6bd; color:#fff;
  border-radius:2px; cursor:pointer; font-size:12px;
  white-space:nowrap;
}
.login-btn:hover { filter:brightness(1.1); }
.logout-btn {
  height:28px; padding:0 12px;
  border:1px solid #d9dee5; background:transparent; color:#d7dde6;
  border-radius:2px; cursor:pointer; font-size:12px;
}
.logout-btn:hover { border-color:#f8fafc; color:#fff; }
.login-display { color:#fff; font-size:13px; font-weight:500; }

#app-shell { display:flex; min-height:calc(100vh - 50px); }

#sidebar {
  width:166px;
  background:#f4f5f6;
  border-right:1px solid #d9dee5;
  flex-shrink:0;
}
#sidebar h1 {
  height:38px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500;
  color:#3d4852;
  border-bottom:1px solid #d9dee5;
}
#sidebar nav { padding:0; }
#sidebar nav a {
  display:block;
  min-height:36px;
  padding:10px 16px 10px 34px;
  color:#354052;
  text-decoration:none;
  font-size:14px;
  cursor:pointer;
  border-bottom:1px solid #e1e5ea;
}
#sidebar nav a:hover,
#sidebar nav a.active {
  color:#1687d9;
  background:#fff;
  border-left:3px solid #1687d9;
  padding-left:31px;
}
.nav-group {
  padding:12px 12px 7px;
  font-size:12px;
  color:#8a96a3;
  background:#ebeef2;
  border-bottom:1px solid #dce1e7;
}

#main { flex:1; display:flex; flex-direction:column; min-width:0; }
#header {
  height:50px;
  background:#fff;
  border-bottom:1px solid #dce1e7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
}
#header h2 { font-size:18px; font-weight:600; color:#1f2933; }
#header .account-bar { display:flex; align-items:center; gap:8px; font-size:13px; color:#5d6978; }
#header .account-bar select {
  height:32px;
  padding:0 10px;
  border:1px solid #c9d2dc;
  border-radius:2px;
  background:#fff;
}
#content { flex:1; padding:16px 18px 24px; overflow:auto; }
.page { display:none; }
.page.active { display:block; }

.workbench-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
  margin-bottom:16px;
}
.metric-card {
  background:#fff;
  border:1px solid #dce1e7;
  padding:16px;
  min-height:86px;
}
.metric-card span { display:block; color:#718096; font-size:13px; margin-bottom:10px; }
.metric-card strong { font-size:30px; color:#1687d9; }
.quick-panel {
  background:#fff;
  border:1px solid #dce1e7;
  padding:16px;
}
.quick-panel h3 { font-size:15px; margin-bottom:12px; }
.quick-panel button {
  height:34px;
  margin:0 8px 8px 0;
  padding:0 18px;
  border:1px solid #0b84c6;
  background:#0b84c6;
  color:#fff;
  cursor:pointer;
}

.filter-bar {
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #dce1e7;
}
.filter-bar input,
.filter-bar select,
.form-row input,
.form-row select {
  height:32px;
  padding:0 10px;
  border:1px solid #c7d0db;
  border-radius:2px;
  background:#fff;
  font-size:13px;
}
.filter-bar button,
.btn-submit,
.btn-receive {
  height:32px;
  padding:0 18px;
  border:1px solid #0b84c6;
  background:#0b84c6;
  color:#fff;
  border-radius:2px;
  cursor:pointer;
  font-size:13px;
}
.filter-bar button:nth-of-type(2n),
.btn-add-line {
  border-color:#4db6bd;
  background:#4db6bd;
}
.filter-bar button:hover,
.btn-submit:hover,
.btn-receive:hover,
.quick-panel button:hover { filter:brightness(1.08); }

.role-workbench {
  background:#ffffff;
  border:1px solid #dce1e7;
  padding:18px;
}
.role-hero {
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.role-hero h3 {
  font-size:26px;
  line-height:1.25;
  margin-bottom:8px;
  color:#121826;
}
.role-hero p {
  color:#667085;
  font-size:14px;
  line-height:1.7;
  max-width:720px;
}
.role-status-card {
  min-width:150px;
  border:1px solid #e1e6ec;
  background:#f7f9fb;
  padding:14px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.role-status-card span {
  color:#8a96a3;
  font-size:12px;
  margin-bottom:6px;
}
.role-status-card strong {
  color:#172033;
  font-size:18px;
}
.role-status-card em {
  color:#1687d9;
  font-style:normal;
  font-size:12px;
  margin-top:8px;
  word-break:break-all;
}
.role-action-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.role-action-card {
  min-height:132px;
  border:1px solid #dce1e7;
  background:#fbfcfd;
  color:#172033;
  padding:16px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}
.role-action-card:hover {
  background:#fff;
  border-color:#1687d9;
  box-shadow:0 10px 30px rgba(23,32,51,.08);
  transform:translateY(-1px);
}
.role-action-card span {
  font-size:18px;
  font-weight:700;
  color:#0f172a;
}
.role-action-card strong {
  font-size:13px;
  line-height:1.7;
  font-weight:500;
  color:#5d6978;
}
.role-action-1 { border-top:4px solid #1687d9; }
.role-action-2 { border-top:4px solid #14a38b; }
.role-action-3 { border-top:4px solid #d6ad41; }
.role-action-4 { border-top:4px solid #a05a2c; }
.siri-bar {
  min-height:58px;
  background:#101827;
  border:1px solid #1f2a3a;
  padding:9px;
  display:grid;
  grid-template-columns:1fr 92px;
  gap:8px;
}
.siri-bar input {
  height:40px;
  border:1px solid #344155;
  background:#f8fafc;
  color:#172033;
  padding:0 14px;
  font-size:14px;
  outline:none;
}
.siri-bar input:focus { border-color:#4db6bd; }
.siri-bar button {
  height:40px;
  border:1px solid #4db6bd;
  background:#4db6bd;
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.siri-bar button:hover { filter:brightness(1.08); }

.inv-scan-hint {
  margin:8px 0 10px;
}
.inventory-table-wrap {
  width:100%;
}

.plan-hero {
  background:#fff;
  border:1px solid #dce1e7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  margin-bottom:14px;
}
.plan-eyebrow { color:#8a96a3; font-size:12px; margin-bottom:6px; }
.plan-hero h3 { font-size:22px; margin-bottom:8px; color:#172033; }
.plan-hero p { color:#5d6978; font-size:14px; }
.plan-score {
  width:150px;
  min-height:92px;
  border:1px solid #dce1e7;
  background:#f7f9fb;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.plan-score strong { font-size:34px; color:#1687d9; line-height:1; }
.plan-score span { margin-top:8px; font-size:12px; color:#718096; }
.plan-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(180px,1fr));
  gap:12px;
  margin-bottom:14px;
}
.plan-card,
.plan-panel {
  background:#fff;
  border:1px solid #dce1e7;
  padding:14px;
}
.plan-card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.plan-level {
  background:#263241;
  color:#fff;
  font-size:12px;
  padding:3px 8px;
  border-radius:2px;
}
.plan-status,
.step-status {
  color:#1687d9;
  font-size:12px;
}
.plan-card h3,
.plan-panel h3 {
  font-size:15px;
  margin-bottom:10px;
}
.progress-track {
  height:8px;
  background:#e8edf3;
  overflow:hidden;
  margin-bottom:6px;
}
.progress-track span {
  display:block;
  height:100%;
  background:#1687d9;
}
.plan-progress { font-size:12px; color:#718096; margin-bottom:8px; }
.plan-card ul,
.plan-panel ul {
  padding-left:16px;
  color:#4b5563;
  font-size:13px;
  line-height:1.8;
}
.plan-two-col {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:12px;
  margin-bottom:14px;
}
.step-row {
  display:grid;
  grid-template-columns:86px 1fr 80px 54px;
  gap:10px;
  align-items:center;
  min-height:38px;
  border-bottom:1px solid #edf1f5;
  font-size:13px;
}
.step-row:last-child { border-bottom:none; }
.step-owner {
  color:#53606f;
  background:#f3f5f8;
  padding:4px 8px;
}
.step-row em { color:#8a96a3; font-style:normal; }
.plan-docs { display:flex; flex-direction:column; gap:8px; }
.plan-docs code {
  background:#f5f7fa;
  border:1px solid #e1e6ec;
  padding:8px 10px;
  color:#263241;
  font-size:12px;
  word-break:break-all;
}

.hub-toolbar {
  background:#fff;
  border:1px solid #dce1e7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  margin-bottom:12px;
}
.hub-toolbar h3 { font-size:22px; margin-bottom:8px; color:#172033; }
.hub-toolbar p { color:#5d6978; font-size:14px; }
.hub-open {
  height:32px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border:1px solid #c9d2dc;
  background:#fff;
  color:#1687d9;
  text-decoration:none;
  font-size:13px;
  flex-shrink:0;
}
.hub-open:hover { border-color:#1687d9; }
.hub-grid {
  display:grid;
  grid-template-columns:repeat(6,minmax(126px,1fr));
  gap:10px;
  margin-bottom:12px;
}
.hub-card {
  min-height:74px;
  text-align:left;
  background:#fff;
  border:1px solid #dce1e7;
  padding:12px;
  cursor:pointer;
}
.hub-card:hover,
.hub-card.active {
  border-color:#1687d9;
  box-shadow:inset 3px 0 #1687d9;
}
.hub-card strong {
  display:block;
  font-size:14px;
  color:#1f2933;
  margin-bottom:7px;
}
.hub-card span {
  display:block;
  font-size:12px;
  color:#718096;
  line-height:1.45;
}
.hub-frame {
  width:100%;
  min-height:640px;
  border:1px solid #dce1e7;
  background:#fff;
}

.docs-hero {
  background:#fff;
  border:1px solid #dce1e7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  margin-bottom:12px;
}
.docs-hero h3 { font-size:22px; margin-bottom:8px; color:#172033; }
.docs-hero p { color:#5d6978; font-size:13px; word-break:break-all; }
.readonly-badge {
  border:1px solid #c9d2dc;
  background:#f7f9fb;
  color:#53606f;
  font-size:12px;
  padding:6px 10px;
  flex-shrink:0;
}
.docs-tabs {
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:10px;
  margin-bottom:12px;
}
.docs-tab {
  text-align:left;
  background:#fff;
  border:1px solid #dce1e7;
  padding:12px;
  min-height:78px;
  cursor:pointer;
}
.docs-tab:hover,
.docs-tab.active {
  border-color:#1687d9;
  box-shadow:inset 3px 0 #1687d9;
}
.docs-tab strong { display:block; font-size:14px; margin-bottom:7px; color:#1f2933; }
.docs-tab span { display:block; font-size:12px; line-height:1.45; color:#718096; }
.docs-content {
  background:#fff;
  border:1px solid #dce1e7;
  padding:14px;
}
.docs-path {
  color:#718096;
  font-size:12px;
  margin-bottom:10px;
  word-break:break-all;
}
.docs-markdown {
  margin:0;
  padding:14px;
  background:#f7f9fb;
  border:1px solid #e1e6ec;
  color:#263241;
  font-size:13px;
  line-height:1.65;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:620px;
  overflow:auto;
}

.cashier-hero {
  background:#fff;
  border:1px solid #dce1e7;
  padding:18px 20px;
  margin-bottom:12px;
}
.cashier-hero h3 { font-size:24px; margin-bottom:8px; color:#172033; }
.cashier-hero p { color:#5d6978; font-size:14px; }
.cashier-search {
  background:#fff;
  border:1px solid #dce1e7;
  display:grid;
  grid-template-columns:1fr 120px 100px;
  gap:10px;
  padding:14px;
  margin-bottom:12px;
}
.cashier-search input {
  height:42px;
  border:1px solid #c7d0db;
  padding:0 12px;
  font-size:16px;
}
.cashier-search button {
  height:42px;
  border:1px solid #0b84c6;
  background:#0b84c6;
  color:#fff;
  cursor:pointer;
}
.cashier-sale {
  background:#fff;
  border:1px solid #dce1e7;
  padding:14px;
  margin-bottom:12px;
}
.cashier-sale-grid {
  display:grid;
  grid-template-columns:120px 140px 140px 110px;
  gap:10px;
  align-items:end;
  margin-bottom:10px;
}
.cashier-sale label {
  display:flex;
  flex-direction:column;
  gap:5px;
  color:#5d6978;
  font-size:12px;
}
.cashier-sale input, .cashier-sale select {
  height:36px;
  border:1px solid #c7d0db;
  padding:0 9px;
  font-size:14px;
}
.cashier-sale button {
  height:36px;
  border:1px solid #1c8f5a;
  background:#1c8f5a;
  color:#fff;
  cursor:pointer;
}
.cashier-result {
  background:#fff;
  border:1px solid #dce1e7;
  padding:14px;
}
.empty-state {
  padding:18px;
  color:#718096;
  background:#f7f9fb;
  border:1px solid #e1e6ec;
}
.empty-state.ok { color:#1c6f45; background:#f1fff7; border-color:#b7ebc6; }
.empty-state.error { color:#a8071a; background:#fff1f0; border-color:#ffa39e; }
.cashier-product {
  display:grid;
  grid-template-columns:78px 1fr 120px 120px;
  gap:14px;
  align-items:center;
  border-bottom:1px solid #edf1f5;
  padding-bottom:14px;
  margin-bottom:14px;
}
.cashier-product img {
  width:72px;
  height:96px;
  object-fit:cover;
  border:1px solid #e1e6ec;
}
.cashier-sku { color:#1687d9; font-weight:700; margin-bottom:6px; }
.cashier-product h3 { font-size:20px; margin-bottom:8px; }
.cashier-product p { color:#718096; font-size:13px; }
.cashier-stock {
  min-height:76px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background:#f7fbff;
  border:1px solid #cfe8ff;
}
.cashier-stock.total { background:#f7f9fb; border-color:#dce1e7; }
.cashier-stock strong { font-size:32px; color:#1687d9; line-height:1; }
.cashier-stock span { margin-top:8px; color:#718096; font-size:12px; }
.cashier-section { margin-top:14px; }
.cashier-section h3 { font-size:15px; margin-bottom:10px; }
.stock-chip-row { display:flex; flex-wrap:wrap; gap:8px; }
.stock-chip {
  display:inline-block;
  padding:6px 10px;
  background:#f7f9fb;
  border:1px solid #dce1e7;
  color:#53606f;
  font-size:13px;
}
.stock-chip.local { border-color:#1687d9; color:#1687d9; background:#f4faff; }

/* ── Table horizontal scroll wrapper (mobile) ── */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrap table { min-width:400px; }

/* ── AI Query Card (DS-P1-01) ── */
.ai-query-card {
  background:#fff;
  border:1px solid #dce1e7;
  padding:14px 18px;
  margin-bottom:12px;
}
.ai-query-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ai-query-header h4 { font-size:16px; color:#172033; }
.ai-query-sub { font-size:12px; color:#8a96a3; }
.ai-query-row {
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.ai-query-input {
  flex:1; min-width:200px; height:36px;
  border:1px solid #c7d0db; border-radius:2px;
  padding:0 10px; font-size:14px; background:#fff;
}
.ai-query-row select {
  height:36px; border:1px solid #c7d0db; border-radius:2px;
  padding:0 8px; background:#fff; font-size:13px;
}
.ai-query-row button {
  height:36px; padding:0 20px;
  border:1px solid #0b84c6; background:#0b84c6; color:#fff;
  border-radius:2px; cursor:pointer; font-size:13px;
}
.btn-outline {
  background:#fff !important; color:#53606f !important;
  border-color:#c7d0db !important;
}
.ai-query-row button:hover { filter:brightness(1.08); }
.ai-query-result {
  margin-top:12px; padding:12px; background:#f7f9fb;
  border:1px solid #dce1e7;
}
.ai-query-meta {
  display:flex; align-items:center; gap:10px; margin-bottom:8px;
}
.ai-query-intent {
  display:inline-block; font-size:11px; padding:2px 8px;
  background:#e8edf2; color:#4a5a6e; border-radius:10px;
  font-weight:500;
}
.ai-query-format-badge {
  font-size:11px; color:#8a96a3;
}
.ai-query-summary {
  font-size:15px; font-weight:500; color:#172033;
  margin-bottom:10px; line-height:1.5;
}
.ai-query-table-wrap { overflow-x:auto; }
.ai-query-table-wrap table { min-width:100%; }
.ai-query-table-wrap th { white-space:nowrap; }
.ai-query-note {
  margin-top:8px; font-size:12px; color:#8a96a3;
  border-top:1px solid #e1e6ec; padding-top:8px;
}
.ai-query-error {
  margin-top:8px; padding:8px 12px;
  background:#fff1f0; border:1px solid #ffa39e; border-radius:2px;
  color:#a8071a; font-size:13px;
}

.ai-lobby-hero {
  background:#fff;
  border:1px solid #dce1e7;
  padding:18px 20px;
  margin-bottom:12px;
}
.ai-lobby-hero h3 { font-size:24px; margin-bottom:8px; color:#172033; }
.ai-lobby-hero p { color:#5d6978; font-size:14px; }
.ai-lobby-filter {
  display:grid;
  grid-template-columns:180px 1fr 150px 110px 90px;
  gap:10px;
  background:#fff;
  border:1px solid #dce1e7;
  padding:12px;
  margin-bottom:12px;
}
.ai-lobby-filter input,
.ai-lobby-filter select {
  height:34px;
  border:1px solid #c7d0db;
  padding:0 10px;
  background:#fff;
}
.ai-lobby-filter button {
  height:34px;
  border:1px solid #0b84c6;
  background:#0b84c6;
  color:#fff;
  cursor:pointer;
}
.ai-lobby-summary {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.ai-lobby-summary span {
  background:#fff;
  border:1px solid #dce1e7;
  color:#53606f;
  padding:8px 12px;
  font-size:13px;
}

table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
  border:1px solid #dce1e7;
}
th, td {
  height:34px;
  padding:6px 10px;
  border-bottom:1px solid #e9edf2;
  font-size:13px;
  text-align:left;
}
th {
  background:#f7f9fb;
  color:#111827;
  font-weight:600;
  white-space:nowrap;
}
tr:hover td { background:#f4faff; }

.form-card {
  background:#fff;
  border:1px solid #dce1e7;
  padding:14px;
  margin-bottom:14px;
}
.form-card h3 { font-size:15px; margin-bottom:10px; }
.form-row { display:flex; gap:10px; margin-bottom:10px; flex-wrap:wrap; align-items:center; }
.form-row label { font-size:13px; color:#53606f; min-width:64px; }
.form-row input, .form-row select { flex:1; min-width:120px; }

.stk-scan-hint {
  font-size:13px; color:#6b7a8a; background:#f7f9fb;
  padding:8px 12px; margin-bottom:10px; border-radius:2px;
  border:1px solid #e1e6ec; line-height:1.5;
}
.lines-table { margin:10px 0; overflow-x:auto; }
.lines-table table { border:1px solid #e1e6ec; min-width:600px; }
.lines-table td { padding:5px 8px; white-space:nowrap; }
.lines-table input { width:100%; height:28px; padding:0 6px; border:1px solid #ccd5df; }
.stk-confirm-table-scroll { overflow-x:auto; margin-bottom:6px; }
.stk-confirm-table-scroll table { min-width:500px; }
.stk-confirm-table-scroll td { white-space:nowrap; padding:4px 8px; }
.form-hint { color:#8a96a3; font-size:12px; margin-bottom:10px; }
.lines-table-scroll { overflow-x:auto; margin-bottom:6px; }
.lines-table-scroll .lines-table { min-width:460px; }
.btn-remove { color:#e03b3b; cursor:pointer; border:none; background:none; font-size:18px; }
.btn-add-line {
  height:30px;
  padding:0 14px;
  color:#fff;
  border-radius:2px;
  cursor:pointer;
}
.status-badge {
  display:inline-block;
  min-width:58px;
  text-align:center;
  padding:2px 8px;
  border-radius:2px;
  font-size:12px;
}
.status-in_transit, .status-sent, .status-shipped, .status-finalized { background:#e6f4ff; color:#096dd9; }
.status-pending { background:#fff7e6; color:#d48806; }
.status-received { background:#f0f9eb; color:#389e0d; }
.msg { padding:8px 12px; margin:8px 0; font-size:13px; display:none; }
.msg-success { background:#f0f9eb; border:1px solid #b7eb8f; color:#237804; display:block; }
.msg-error { background:#fff1f0; border:1px solid #ffa39e; color:#a8071a; display:block; }

/* Transfer page: inline detail row */
.tfr-main-row td { vertical-align:middle; padding:8px 6px; }
.tfr-id { font-family:monospace; font-size:12px; color:#5d6978; }
.tfr-from { font-weight:600; color:#096dd9; }
.tfr-to { font-weight:600; color:#389e0d; }
.tfr-time { font-size:12px; color:#718096; }
.tfr-actions { text-align:center; }
.tfr-detail-row td { padding:0; background:#fafbfc; border-bottom:2px solid #dce1e7; }
.tfr-detail-body { padding:10px 14px 10px 42px; font-size:13px; }
.tfr-detail-header { font-weight:600; color:#3d4852; margin-bottom:8px; font-size:13px; }
.tfr-line-detail { display:flex; gap:16px; padding:4px 0; border-bottom:1px solid #edf1f5; }
.tfr-line-detail:last-child { border-bottom:none; }
.tfr-line-detail span { color:#4b5563; }
.tfr-line-detail span:first-child { min-width:120px; font-weight:500; }
.tfr-line-detail span:nth-child(2) { min-width:50px; color:#718096; }
.tfr-line-detail span:last-child { color:#1f2933; font-weight:600; }

/* Shipment detail rows */
.shp-detail-row td { padding:0; background:#fafbfc; border-bottom:2px solid #dce1e7; }
.shp-detail-body { padding:10px 14px 10px 42px; font-size:13px; }
.shp-detail-header { font-weight:600; color:#3d4852; margin-bottom:8px; font-size:13px; }
.shp-line-detail { display:flex; gap:16px; padding:4px 0; border-bottom:1px solid #edf1f5; }
.shp-line-detail:last-child { border-bottom:none; }
.shp-line-detail span { color:#4b5563; }
.shp-line-detail span:first-child { min-width:120px; font-weight:500; }
.shp-line-detail span:nth-child(2) { min-width:50px; color:#718096; }
.shp-line-detail span:last-child { color:#1f2933; font-weight:600; }
.shp-detail-note { margin-top:8px; padding-top:6px; border-top:1px dashed #d9dee5; color:#718096; font-size:12px; }

@media (max-width:390px) {
  .shp-detail-body { padding:10px 8px; }
  .shp-line-detail { gap:8px; flex-wrap:wrap; font-size:12px; }
  .shp-line-detail span:first-child { min-width:80px; }
  #page-shipments table { font-size:12px; }
  #page-shipments td, #page-shipments th { padding:6px 4px; }
}

@media (max-width:480px) {
  #page-inventory .filter-bar {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-items:stretch;
  }
  #page-inventory .filter-bar select,
  #page-inventory .filter-bar input,
  #page-inventory .filter-bar button {
    width:100%;
    min-width:0;
    height:38px;
  }
  #page-inventory #invSku {
    grid-column:1 / -1;
    font-size:16px;
  }
  #page-inventory .inventory-table-wrap {
    overflow:visible;
  }
  #page-inventory table,
  #page-inventory thead,
  #page-inventory tbody,
  #page-inventory tr,
  #page-inventory th,
  #page-inventory td {
    display:block;
  }
  #page-inventory thead {
    display:none;
  }
  #page-inventory tbody tr {
    border:1px solid #dce1e7;
    border-radius:6px;
    background:#fff;
    margin-bottom:10px;
    padding:8px 10px;
    box-shadow:0 1px 2px rgba(15,23,42,.04);
  }
  #page-inventory tbody td {
    border:0;
    padding:5px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:13px;
  }
  #page-inventory tbody td::before {
    content:attr(data-label);
    color:#718096;
    font-size:12px;
    flex:0 0 auto;
  }
  #page-inventory tbody td[colspan] {
    display:block;
    text-align:center !important;
  }
  #page-inventory tbody td[colspan]::before {
    content:"";
  }
}

.btn-detail {
  height:26px; padding:0 10px; border:1px solid #c9d2dc; background:#fff;
  color:#5d6978; border-radius:2px; cursor:pointer; font-size:12px;
}
.btn-detail:hover { border-color:#1687d9; color:#1687d9; }
.btn-receive {
  height:30px; padding:0 16px; border:none; background:#389e0d; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s;
}
.btn-receive:hover { background:#2b7a0a; }
.btn-receive:disabled { background:#b5d8a6; cursor:not-allowed; }
.received-mark { color:#389e0d; font-weight:600; font-size:13px; }

/* Transfer approval badges */
.status-TRANSFER_REQUEST { background:#f0f5ff; color:#1d39c4; border:1px solid #d6e4ff; font-weight:600; }
.status-APPROVE_TRANSFER { background:#fff7e6; color:#d48806; border:1px solid #ffe58f; font-weight:600; }
.status-PICKING { background:#e6f4ff; color:#096dd9; border:1px solid #91caff; }
.status-IN_TRANSIT { background:#f6ffed; color:#389e0d; border:1px solid #b7eb8f; }
.status-RECEIVED { background:#f6ffed; color:#389e0d; border:1px solid #b7eb8f; font-weight:600; }
.status-COMPLETED { background:#f0f0f0; color:#262626; border:1px solid #d9d9d9; font-weight:600; }
.status-REJECTED { background:#fff1f0; color:#cf1322; border:1px solid #ffa39e; }
.status-DISCREPANCY_REPORTED { background:#fffbe6; color:#d46b08; border:1px solid #ffe58f; font-weight:600; }
.status-DISCREPANCY_ARBITRATION { background:#fff7e6; color:#d48806; border:1px solid #ffe58f; }
.status-CANCELLED { background:#f5f5f5; color:#8c8c8c; border:1px solid #d9d9d9; }
.rejected-mark { color:#cf1322; font-weight:600; font-size:13px; }
.cancelled-mark { color:#8c8c8c; font-weight:600; font-size:13px; }

/* Approve / Reject buttons */
.btn-approve {
  height:30px; padding:0 16px; border:none; background:#389e0d; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s; margin-right:4px;
}
.btn-approve:hover { background:#2b7a0a; }
.btn-approve:disabled { background:#b5d8a6; cursor:not-allowed; }
.btn-reject {
  height:30px; padding:0 16px; border:none; background:#cf1322; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s;
}
.btn-reject:hover { background:#a8071a; }
.btn-reject:disabled { background:#e88d95; cursor:not-allowed; }

.btn-pick {
  height:30px; padding:0 16px; border:none; background:#1890ff; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s; margin-right:4px;
}
.btn-pick:hover { background:#096dd9; }
.btn-pick:disabled { background:#91caff; cursor:not-allowed; }
.btn-ship {
  height:30px; padding:0 16px; border:none; background:#722ed1; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s; margin-right:4px;
}
.btn-ship:hover { background:#531dab; }
.btn-ship:disabled { background:#b37feb; cursor:not-allowed; }
.btn-complete {
  height:30px; padding:0 16px; border:none; background:#389e0d; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s; margin-right:4px;
}
.btn-complete:hover { background:#2b7a0a; }
.btn-complete:disabled { background:#b5d8a6; cursor:not-allowed; }
.btn-arbitrate {
  height:30px; padding:0 16px; border:none; background:#fa8c16; color:#fff;
  border-radius:3px; cursor:pointer; font-size:13px; font-weight:600;
  transition:background .15s; margin-right:4px;
}
.btn-arbitrate:hover { background:#d46b08; }
.btn-arbitrate:disabled { background:#ffd591; cursor:not-allowed; }

/* Approval settings form */
.approval-settings-form { max-width:520px; }
.approval-settings-form .form-row { margin-bottom:10px; display:flex; align-items:flex-start; gap:10px; }

/* Product image thumbnail */
.prod-img { width:48px; height:64px; object-fit:cover; border:1px solid #e1e6ec; border-radius:2px; cursor:pointer; display:block; }
.prod-img:hover { border-color:#1687d9; }
.no-img { color:#bbb; font-size:11px; }

/* AI portrait button */
.btn-ai { height:28px; padding:0 12px; border:1px solid #722ed1; background:#722ed1; color:#fff; border-radius:2px; cursor:pointer; font-size:12px; }
.btn-ai:hover { filter:brightness(1.1); }

/* Product actions row */
.prod-actions { display:flex; gap:4px; flex-wrap:wrap; }
.btn-media { height:26px; padding:0 8px; border:1px solid #0b84c6; background:#0b84c6; color:#fff; border-radius:2px; cursor:pointer; font-size:11px; white-space:nowrap; }
.btn-media:hover { filter:brightness(1.1); }
.btn-hangtag { height:26px; padding:0 8px; border:1px solid #e67e22; background:#e67e22; color:#fff; border-radius:2px; cursor:pointer; font-size:11px; white-space:nowrap; }
.btn-hangtag:hover { filter:brightness(1.1); }

/* Media assets table in modal */
.media-status { display:inline-block; padding:2px 6px; border-radius:2px; font-size:11px; font-weight:500; }
.status-uploaded { background:#f0f0f0; color:#666; }
.status-ai_tagging { background:#e6f7ff; color:#0b84c6; }
.status-validated { background:#f6ffed; color:#389e0d; }
.status-needs_review { background:#fff7e6; color:#d46b08; }
.btn-validate { height:22px; padding:0 6px; border:1px solid #c7d0db; background:#fff; color:#5d6978; border-radius:2px; cursor:pointer; font-size:11px; margin-left:4px; }
.btn-validate:hover { border-color:#1687d9; color:#1687d9; }

/* Media add form */
.media-add-form { border-top:1px solid #e1e6ec; padding-top:12px; }
.media-add-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.media-add-row input,
.media-add-row select { height:32px; padding:0 10px; border:1px solid #c7d0db; border-radius:2px; font-size:13px; }
.media-add-row button { height:32px; padding:0 16px; border:1px solid #0b84c6; background:#0b84c6; color:#fff; border-radius:2px; cursor:pointer; font-size:13px; }
.media-add-row button:hover { filter:brightness(1.08); }

/* Detail JSON expandable block */
.detail-json {
  background:#f5f6f8;
  border:1px solid #dce1e7;
  border-radius:2px;
  padding:6px 8px;
  font-size:11px;
  line-height:1.5;
  max-height:180px;
  overflow:auto;
  white-space:pre-wrap;
  word-break:break-all;
  margin:2px 0;
}

/* Export buttons – compact, subdued */
.btn-export { height:28px; padding:0 12px; border:1px solid #c9d2dc; background:#fff; color:#5d6978; border-radius:2px; cursor:pointer; font-size:12px; }
.btn-export:hover { border-color:#1687d9; color:#1687d9; }

/* Modal overlay */
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.45); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-content { background:#fff; border-radius:4px; width:560px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 8px 30px rgba(0,0,0,0.2); }
.modal-wide { width:720px; max-width:94vw; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #e1e6ec; }
.modal-header h3 { font-size:16px; font-weight:600; }
.modal-close { border:none; background:none; font-size:22px; cursor:pointer; color:#888; padding:0 4px; line-height:1; }
.modal-close:hover { color:#333; }
.modal-body { flex:1; overflow-y:auto; padding:16px 18px; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; padding:12px 18px; border-top:1px solid #e1e6ec; }
.modal-footer .btn-export { background:#fff; color:#5d6978; border-color:#c7d0db; }
.modal-footer .btn-export:hover { border-color:#1687d9; color:#1687d9; }

/* Stocktake diff colors */
.stk-name { display:inline-block; min-width:100px; font-size:13px; padding:4px 6px; color:#5d6978; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stk-sys-qty { display:inline-block; min-width:40px; text-align:center; font-size:13px; padding:4px 0; color:#3d4852; }
.stk-diff { display:inline-block; min-width:40px; text-align:center; font-size:13px; padding:4px 0; font-weight:600; }
.diff-warn { color:#b33; background:#fff0f0; border-radius:2px; padding:4px 6px; }
.diff-ok { color:#2a7d2a; }

/* AI profile tags */
.ai-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.ai-tag { background:#f4f0ff; border:1px solid #d3bcf5; border-radius:2px; padding:4px 10px; font-size:12px; color:#531dab; }
.ai-tag b { margin-right:4px; }
.ai-tag.risk { background:#fff1f0; border-color:#ffa39e; color:#a8071a; }
.ai-section { margin-bottom:12px; }
.ai-section h4 { font-size:13px; font-weight:600; margin-bottom:6px; color:#3d4852; }
.ai-section p { font-size:13px; color:#555; line-height:1.6; }

/* ── Audit Trail page ── */
.audit-tab-bar {
  display:flex;
  gap:0;
  margin-bottom:0;
  background:#fff;
  border:1px solid #dce1e7;
  border-bottom:none;
}
.audit-tab {
  flex:1;
  height:40px;
  border:none;
  background:#f7f9fb;
  color:#5d6978;
  font-size:14px;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:all .15s;
}
.audit-tab:hover { background:#eef1f4; color:#1f2933; }
.audit-tab.active {
  background:#fff;
  color:#1687d9;
  border-bottom-color:#1687d9;
  font-weight:600;
}
.audit-filter { border-top:none; }
.audit-table-pane { display:none; }
.audit-table-pane.active { display:block; }
#auditTableContainer table { margin-top:0; }
.success-yes { color:#389e0d; font-weight:600; }
.success-no { color:#cf1322; font-weight:600; }

/* ── Import page ── */
.import-section { margin-top:4px; }
.import-file-row { display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.import-file-row input[type="file"] { font-size:13px; }
.template-hint { font-size:12px; color:#8a96a3; }
.file-name { font-size:12px; color:#1687d9; margin-left:8px; }
.import-buttons { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.import-summary { padding:8px 12px; background:#f7f9fb; border:1px solid #dce1e7; font-size:13px; margin-bottom:10px; }
.import-errors { margin-bottom:10px; }
.import-errors h4 { font-size:13px; font-weight:600; color:#a8071a; margin-bottom:6px; }
.import-preview { margin-bottom:6px; }
.import-preview h4 { font-size:13px; font-weight:600; color:#3d4852; margin-bottom:6px; }
.import-results table th,
.import-results table td { font-size:12px; }

/* ── Sales Trace ═══ */
.sales-trace-hero {
  background:#fff;
  border:1px solid #dce1e7;
  padding:18px 20px;
  margin-bottom:12px;
}
.sales-trace-hero h3 { font-size:24px; margin-bottom:8px; color:#172033; }
.sales-trace-hero p { color:#5d6978; font-size:14px; }
.sales-trace-summary {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
}
.sales-trace-summary span {
  background:#fff;
  border:1px solid #dce1e7;
  color:#53606f;
  padding:8px 12px;
  font-size:13px;
}
.st-main-row td { vertical-align:middle; padding:8px 6px; }
.st-time { font-size:12px; color:#718096; white-space:nowrap; }
.st-sale-no { font-family:monospace; font-size:12px; color:#5d6978; font-weight:500; }
.st-detail-row td { padding:0; background:#fafbfc; border-bottom:2px solid #dce1e7; }
.st-detail-body { padding:10px 14px 10px 42px; font-size:13px; }
.st-detail-header { font-weight:600; color:#3d4852; margin-bottom:8px; font-size:13px; }
.st-line-detail { display:flex; gap:16px; padding:4px 0; border-bottom:1px solid #edf1f5; }
.st-line-detail:last-child { border-bottom:none; }
.st-line-detail span { color:#4b5563; font-size:12px; }
.st-line-detail span:first-child { min-width:120px; font-weight:500; }

@media (max-width:820px) {
  #topbar { gap:8px; padding:0 8px; }
  .top-crumb { display:none; }
  .top-actions { gap:12px; font-size:12px; }
  #app-shell { flex-direction:column; }
  #sidebar { width:100%; overflow-x:auto; }
  #sidebar h1, .nav-group { display:none; }
  #sidebar nav { display:flex; }
  #sidebar nav a { white-space:nowrap; padding:10px 14px; border-right:1px solid #e1e5ea; }
  #sidebar nav a.active { padding-left:14px; border-left:none; border-bottom:3px solid #1687d9; }
  .workbench-grid { grid-template-columns:repeat(2,minmax(120px,1fr)); }
  .hub-toolbar { align-items:flex-start; flex-direction:column; }
  .hub-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hub-frame { min-height:560px; }
  .docs-hero { align-items:flex-start; flex-direction:column; }
  .docs-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .docs-markdown { max-height:none; }
  .cashier-search { grid-template-columns:1fr; }
  .cashier-sale-grid { grid-template-columns:1fr; }
  .cashier-product { grid-template-columns:72px 1fr; }
  .cashier-stock { min-height:68px; }
  .ai-lobby-filter { grid-template-columns:1fr; }
  #content { padding:12px; }
}

@media (max-width:480px) {
  .cashier-search input { height:48px; font-size:18px; }
  .cashier-search button { height:48px; font-size:16px; }
  .cashier-sale input, .cashier-sale select { height:44px; font-size:16px; }
  .cashier-sale button { height:44px; font-size:16px; width:100%; }
  .cashier-sale-grid { gap:8px; }
  .cashier-sale-grid label { gap:8px; }
  .cashier-product { grid-template-columns:60px 1fr; gap:10px; }
  .cashier-product img { width:56px; height:76px; }
  .cashier-stock strong { font-size:24px; }
  .cashier-stock { min-height:60px; }
  .cashier-search { padding:10px; }
  .cashier-sale { padding:10px; }
  .cashier-result { padding:10px; }
  #cashierClearBtn { height:44px; font-size:16px; }
  /* Stocktake mobile */
  .stk-scan-hint { font-size:12px; padding:8px 10px; }
  .lines-table input { height:40px; font-size:16px; }
  .lines-table td { padding:6px 4px; }
  .lines-table .stk-sku { width:100px !important; }
  .lines-table .stk-size { width:50px !important; }
  .lines-table .stk-qty { width:80px !important; }
  .btn-add-line { height:40px; font-size:15px; }
  #stkBtn { height:40px; font-size:15px; padding:0 20px; }
  .stk-diff { min-width:32px; font-size:13px; padding:6px 2px; }
  .stk-sys-qty { min-width:32px; font-size:13px; padding:6px 0; }
  .stk-name { max-width:100px; font-size:12px; }
  .btn-remove { font-size:22px; padding:4px; }
  /* Shipment mobile */
  .lines-table-scroll { margin-bottom:4px; }
  .lines-table .shp-sku { width:100px !important; }
  .lines-table .shp-size { width:50px !important; }
  .lines-table .shp-qty { width:70px !important; }
  #shpBtn { height:40px; font-size:15px; padding:0 20px; }
}

/* ── Unified state row classes (DS-P1-16) ── */
.state-row { text-align:center; padding:24px 12px; font-size:14px; }
.state-row.loading { color:#718096; }
.state-row.empty { color:#8a96a3; }
.state-row.error { color:#a8071a; background:#fff1f0; }

.btn-sm {
  height:26px; padding:0 10px;
  border:1px solid #c7d0db; background:#fff; color:#354052;
  border-radius:2px; cursor:pointer; font-size:12px;
}
.btn-sm:hover { background:#f0f2f5; }

.form-actions {
  display:flex; gap:10px; justify-content:flex-end;
  margin-top:14px;
}

.acct-section {
  background:#fff; border:1px solid #dce1e7;
  margin-bottom:16px; padding:14px 16px;
}
.acct-section-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.acct-section-header h3 { font-size:15px; margin:0; }
.acct-section-header button {
  height:30px; padding:0 14px;
  border:1px solid #0b84c6; background:#0b84c6; color:#fff;
  border-radius:2px; cursor:pointer; font-size:13px;
}

/* ── Transfer Print Modal ── */
.tfr-print-modal { max-width:720px; width:720px; }
.tfr-print-modal .modal-body { padding:20px 24px; }
.tfr-print-actions .btn-submit { background:#0b84c6; border-color:#0b84c6; color:#fff; }

/* Print preview sheet inside modal */
.tfr-print-sheet {
  font-size:13px; color:#1f2933; line-height:1.6;
}
.tfr-print-sheet h2 {
  font-size:18px; text-align:center; margin-bottom:16px;
  padding-bottom:10px; border-bottom:2px solid #263241;
}
.tfr-print-sheet .tfr-print-meta {
  display:grid; grid-template-columns:1fr 1fr; gap:6px 20px;
  margin-bottom:14px;
}
.tfr-print-sheet .tfr-print-meta > div { display:flex; }
.tfr-print-sheet .tfr-print-label { color:#718096; min-width:80px; flex-shrink:0; }
.tfr-print-sheet .tfr-print-value { color:#1f2933; font-weight:500; }

.tfr-print-sheet table {
  width:100%; border-collapse:collapse; margin-bottom:12px;
}
.tfr-print-sheet table th {
  background:#f4f5f6; text-align:left; padding:7px 10px;
  border:1px solid #d9dee5; font-size:12px; color:#5d6978;
}
.tfr-print-sheet table td {
  padding:7px 10px; border:1px solid #d9dee5; font-size:13px;
}
.tfr-print-sheet .tfr-print-total {
  text-align:right; font-weight:600; font-size:14px;
  margin-bottom:18px; padding-top:4px;
}
.tfr-print-sheet .tfr-print-sign {
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px;
  margin-top:20px; padding-top:14px; border-top:1px dashed #d9dee5;
}
.tfr-print-sheet .tfr-print-sign div {
  text-align:center; font-size:12px; color:#8a96a3;
}
.tfr-print-sheet .tfr-print-sign .sign-line {
  display:block; height:28px; border-bottom:1px solid #c7d0db;
  margin-bottom:6px;
}
.tfr-print-sheet .tfr-print-note {
  margin-top:10px; padding:8px 12px; background:#fafafa;
  border:1px solid #e8edf3; border-radius:2px; font-size:12px; color:#888;
}

/* Copy toast */
.tfr-copy-toast {
  position:fixed; bottom:60px; left:50%; transform:translateX(-50%);
  background:#263241; color:#fff; padding:10px 24px; border-radius:4px;
  font-size:14px; z-index:2000; pointer-events:none;
  animation:fadeInOut 2s ease forwards;
}
@keyframes fadeInOut {
  0%{opacity:0;transform:translateX(-50%) translateY(10px)}
  15%{opacity:1;transform:translateX(-50%) translateY(0)}
  85%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(-10px)}
}

/* Print-only content */
@media print {
  body * { visibility:hidden !important; }
  #tfrPrintSheet, #tfrPrintSheet * { visibility:visible !important; }
  #tfrPrintSheet {
    position:absolute !important; left:0 !important; top:0 !important;
    width:100% !important; max-width:100% !important;
    padding:20px !important; margin:0 !important;
    font-size:12px !important;
  }
  #tfrPrintSheet h2 { font-size:16px !important; }
  #tfrPrintSheet table th,
  #tfrPrintSheet table td { padding:5px 8px !important; }
  #tfrPrintSheet .tfr-print-sign { margin-top:30px !important; }
  #tfrPrintSheet .tfr-print-note { display:none !important; }
}

/* ── Mobile 390px for transfer print modal ── */
@media (max-width:480px) {
  .tfr-print-modal { width:100%; max-width:100vw; }
  .tfr-print-modal .modal-body { padding:12px 14px; }
  .tfr-print-sheet .tfr-print-meta {
    grid-template-columns:1fr; gap:4px;
  }
  .tfr-print-sheet table th,
  .tfr-print-sheet table td { padding:5px 6px; font-size:12px; }
  .tfr-print-sheet .tfr-print-sign {
    grid-template-columns:1fr; gap:10px;
  }
}

/* ── AI Navigator (DS-P1-17) ── */
.navigator-hero {
  background:#fff;
  border:1px solid #dce1e7;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  margin-bottom:12px;
}
.navigator-hero h3 { font-size:22px; margin-bottom:8px; color:#172033; }
.navigator-hero p { color:#5d6978; font-size:14px; }

.navigator-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.navigator-card {
  background:#fff;
  border:1px solid #dce1e7;
  display:flex;
  flex-direction:column;
  min-height:140px;
}
.navigator-card h4 {
  font-size:15px;
  color:#1f2933;
  padding:12px 16px 8px;
  border-bottom:1px solid #edf1f5;
  margin:0;
}
.nav-body {
  flex:1;
  padding:10px 16px 14px;
  font-size:13px;
  color:#3d4852;
  line-height:1.65;
  overflow:auto;
}
.nav-body p { margin:6px 0; }
.nav-empty { color:#8a96a3; text-align:center; padding:20px 0; }
.nav-error { color:#a8071a; display:block; padding:10px 0; font-size:13px; }
.nav-hr { border:none; border-top:1px solid #e8edf3; margin:10px 0; }

.nav-field {
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 0;
  font-size:13px;
}
.nav-label {
  color:#718096;
  min-width:60px;
  flex-shrink:0;
}
.nav-chips { display:flex; flex-wrap:wrap; gap:6px; padding:4px 0; }
.nav-chip {
  display:inline-block;
  padding:3px 10px;
  background:#f1f5f9;
  border:1px solid #dce1e7;
  border-radius:2px;
  font-size:12px;
  color:#475569;
}

.nav-badge {
  display:inline-block;
  padding:2px 8px;
  border-radius:3px;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
}
.nav-badge.role { background:#e8edf2; color:#4a5a6e; }
.nav-badge.mode { background:#263241; color:#f8fafc; }
.nav-badge.write { background:#fff1f0; color:#cf1322; border:1px solid #ffa39e; }
.nav-badge.dryrun { background:#f6ffed; color:#389e0d; border:1px solid #b7eb8f; }

/* Capability filter */
.nav-cap-filter {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 16px;
  border-bottom:1px solid #edf1f5;
  background:#fafbfc;
  flex-wrap:wrap;
}
.nav-cap-filter span { font-size:12px; color:#8a96a3; }
.nav-cap-filter button {
  height:28px;
  padding:0 12px;
  border:1px solid #dce1e7;
  background:#fff;
  color:#53606f;
  font-size:12px;
  cursor:pointer;
  border-radius:2px;
}
.nav-cap-filter button.active {
  background:#1687d9;
  color:#fff;
  border-color:#1687d9;
}
.nav-cap-table-wrap { overflow-x:auto; }
.nav-cap-table { width:100%; border-collapse:collapse; font-size:12px; }
.nav-cap-table th {
  background:#f7f9fb;
  padding:7px 10px;
  border-bottom:1px solid #e1e6ec;
  text-align:left;
  font-weight:600;
  white-space:nowrap;
}
.nav-cap-table td {
  padding:7px 10px;
  border-bottom:1px solid #edf1f5;
  vertical-align:middle;
}
.nav-cap-method {
  font-family:monospace;
  font-weight:600;
  color:#1687d9;
  white-space:nowrap;
}
.nav-cap-path {
  font-family:monospace;
  color:#475569;
  word-break:break-all;
}

/* Entity card */
.nav-entity {
  padding:8px 0;
  border-bottom:1px solid #edf1f5;
}
.nav-entity:last-child { border-bottom:none; }
.nav-entity-name { font-weight:600; color:#1f2933; font-size:14px; margin-bottom:2px; }
.nav-entity-table { font-family:monospace; font-size:11px; color:#8a96a3; margin-bottom:4px; }
.nav-entity-purpose { color:#5d6978; font-size:12px; margin-bottom:4px; }
.nav-entity-keys { font-size:11px; color:#718096; }
.nav-entity-rels { font-size:11px; color:#1687d9; }
.nav-flow { font-size:12px; color:#475569; padding:3px 0 3px 12px; border-left:3px solid #dce1e7; margin:4px 0; }

/* Rules */
.nav-rule {
  padding:8px 0;
  border-bottom:1px solid #edf1f5;
}
.nav-rule:last-child { border-bottom:none; }
.nav-rule-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.nav-rule-id { font-family:monospace; font-size:11px; color:#8a96a3; }
.nav-rule-text { font-size:13px; color:#3d4852; line-height:1.55; }
.nav-sev {
  display:inline-block;
  padding:2px 8px;
  border-radius:2px;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
}
.nav-sev-critical { background:#fff1f0; color:#cf1322; border:1px solid #ffa39e; }
.nav-sev-high { background:#fff7e6; color:#d46b08; border:1px solid #ffd591; }
.nav-sev-medium { background:#f6ffed; color:#389e0d; border:1px solid #b7eb8f; }
.nav-safe-list { padding-left:18px; font-size:12px; color:#5d6978; line-height:1.8; margin:6px 0; }

@media (max-width: 900px) {
  .role-hero {
    flex-direction:column;
  }
  .role-status-card {
    min-width:0;
  }
  .role-action-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .navigator-hero {
    align-items:flex-start;
    flex-direction:column;
  }
  .navigator-grid {
    grid-template-columns:1fr;
  }
}

@media (max-width: 520px) {
  .role-workbench {
    padding:12px;
  }
  .role-hero h3 {
    font-size:22px;
  }
  .role-action-grid,
  .siri-bar {
    grid-template-columns:1fr;
  }
  .role-action-card {
    min-height:104px;
  }
  .siri-bar button {
    width:100%;
  }
}