/* =========================================================
   御鲜宝 · YUXIANBAO Enterprise Atelier
   A quiet, editorial operating system for Northeast China food.
   ========================================================= */

:root {
  --paper: #f4f0e6;
  --paper-2: #fbf8f0;
  --paper-3: #ece6d8;
  --paper-4: #e4ddcc;
  --ink: #16231b;
  --forest: #1f3a2c;
  --forest-2: #294a38;
  --forest-3: #345742;
  --moss: #526b52;
  --moss-light: #7c8f6e;
  --sage: #d8dfcf;
  --sage-2: #e8ebdf;
  --amber: #b5783c;
  --amber-2: #c98b4a;
  --amber-soft: #ead7bd;
  --red: #9e3d2f;
  --red-soft: #ecd7d0;
  --blue: #4f6572;
  --blue-soft: #dbe4e7;
  --violet: #6c5b6d;
  --violet-soft: #e5dce4;
  --muted: #70766c;
  --muted-light: #979b8f;
  --line: rgba(22, 35, 27, 0.135);
  --line-soft: rgba(22, 35, 27, 0.075);
  --line-light: rgba(245, 241, 231, 0.16);
  /* Typography system: only two roles — bold display sans + Microsoft YaHei body. */
  --font-display: "Microsoft YaHei", "PingFang SC", "Heiti SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--font-display);
  --sans: var(--font-body);
  --mono: var(--font-body);
  --text-caption: 12px;
  --text-small: 13px;
  --text-body: 14px;
  --text-card: 16px;
  --text-section: 22px;
  --text-page: 34px;
  --radius: 6px;
  --radius-sm: 3px;
  --shadow-soft: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  --shadow-float: 0 24px 70px rgba(18, 29, 21, 0.16);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sidebar-w: 246px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

::selection { background: var(--amber-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, blockquote, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(22, 35, 27, 0.18); border: 3px solid var(--paper); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(22, 35, 27, 0.32); }

/* ---------- primitives ---------- */

.micro-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--muted);
}
.micro-label.light { color: rgba(245, 241, 231, 0.58); }
.micro { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--muted);
  text-transform: uppercase;
}
.eyebrow > span {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 12px;
  letter-spacing: 0;
}
.eyebrow > i { width: 26px; height: 1px; background: var(--line); }
.eyebrow.light { color: rgba(245, 241, 231, 0.58); }
.eyebrow.light > span { border-color: rgba(245, 241, 231, 0.25); }
.eyebrow.light > i { background: rgba(245, 241, 231, 0.22); }

.muted { color: var(--muted); font-size: 13px; line-height: 1.7; }
.text-green { color: var(--moss) !important; }
.text-red { color: var(--red) !important; }
.text-amber { color: var(--amber) !important; }
.desk-br { display: inline; }

.icon { flex: 0 0 auto; }

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 39px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  white-space: nowrap;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease), transform 0.22s var(--ease);
}
.btn:hover { border-color: rgba(22, 35, 27, 0.34); background: rgba(22, 35, 27, 0.035); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--forest); border-color: var(--forest); color: var(--paper); }
.btn-primary:hover { background: var(--forest-2); border-color: var(--forest-2); }
.btn-paper { background: var(--paper); border-color: var(--paper); color: var(--forest); }
.btn-paper:hover { background: #fffdf7; border-color: #fffdf7; }
.btn-ghost { background: rgba(251, 248, 240, 0.55); }
.btn-danger { background: var(--red); border-color: var(--red); color: #fff; }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 12px; }
.btn-xs { min-height: 26px; padding: 0 9px; font-size: 12px; }
.btn-block { width: 100%; }
.btn.is-loading { pointer-events: none; }
.btn.is-loading span { opacity: 0.5; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.icon-btn:hover { background: rgba(22, 35, 27, 0.055); color: var(--ink); border-color: var(--line-soft); }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--forest);
  border-bottom: 1px solid rgba(22, 35, 27, 0.25);
  padding-bottom: 2px;
  transition: border-color 0.2s, color 0.2s;
}
.text-link:hover { color: var(--amber); border-color: var(--amber); }
.text-link.light { color: rgba(245, 241, 231, 0.78); border-color: rgba(245, 241, 231, 0.28); }
.text-link.light:hover { color: #fff; border-color: rgba(245, 241, 231, 0.7); }

.delta { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.delta.up { color: var(--moss); }
.delta.down { color: var(--red); }
.delta.neutral { color: var(--muted); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 2px;
  background: rgba(22, 35, 27, 0.055);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pill-dot { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.pill-green { background: rgba(82, 107, 82, 0.14); color: #3f5c42; }
.pill-amber { background: rgba(181, 120, 60, 0.13); color: #8c5a29; }
.pill-red { background: rgba(158, 61, 47, 0.12); color: #8b352a; }
.pill-blue { background: rgba(79, 101, 114, 0.12); color: #435a66; }
.pill-violet { background: rgba(108, 91, 109, 0.12); color: #5c4b5d; }
.pill-neutral { background: rgba(22, 35, 27, 0.06); color: var(--muted); }

.avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0;
  color: var(--paper);
  background: var(--forest);
  overflow: hidden;
}
.avatar.sm { width: 30px; height: 30px; font-size: 12px; }
.avatar.xxs { width: 20px; height: 20px; font-size: 12px; }
.avatar.xl { width: 76px; height: 76px; font-size: 24px; border-radius: 50%; }
.av-pine { background: #1f3a2c; }
.av-moss { background: #5d735b; }
.av-clay { background: #9a765e; }
.av-amber { background: #a97945; }
.av-ink { background: #3f4e5a; }
.av-sage { background: #84917a; }

.progress { position: relative; height: 4px; width: 100%; background: rgba(22, 35, 27, 0.09); border-radius: 99px; overflow: hidden; }
.progress span, .progress i { display: block; height: 100%; border-radius: inherit; background: var(--forest); transition: width 0.8s var(--ease); }
.progress-amber span, .progress-amber i { background: var(--amber); }
.progress-green span, .progress-green i { background: var(--moss); }

.score-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 6px;
  border: 1px solid rgba(22, 35, 27, 0.12);
  border-radius: 2px;
  background: var(--paper-2);
  font-family: var(--mono);
}
.score-badge b { font-size: 13px; font-weight: 600; }
.score-badge small { font-size: 12px; color: var(--muted); }
.score-good b { color: #3f5c42; }
.score-mid b { color: #9a6a32; }
.score-low b { color: var(--red); }

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--forest);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 12px;
}

/* ---------- boot ---------- */

.boot-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: var(--paper);
  z-index: 1000;
}
.boot-mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid var(--forest);
  color: var(--forest);
  font-family: var(--serif);
  font-size: 27px;
}
.boot-name { font-family: var(--serif); font-size: 20px; letter-spacing: 0.14em; }
.boot-logo { display: grid; place-items: center; width: 70px; height: 70px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.boot-logo img { width: 100%; height: 100%; object-fit: contain; }
.boot-wordmark { width: auto; height: 38px; margin-top: 2px; }
.boot-line { width: 120px; height: 1px; background: var(--line); overflow: hidden; }
.boot-line span { display: block; width: 50%; height: 100%; background: var(--amber); animation: boot 1.4s ease-in-out infinite; }
.boot-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; color: var(--muted); }
@keyframes boot { 0% { transform: translateX(-110%); } 100% { transform: translateX(240%); } }

/* ---------- generic page ---------- */

.app-shell { min-height: 100vh; }

.app-main {
  min-height: 100vh;
  margin-left: var(--sidebar-w);
  display: flex;
  flex-direction: column;
}

.page {
  width: 100%;
  max-width: 1540px;
  margin: 0 auto;
  padding: 31px 42px 60px;
  flex: 1;
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.page.is-entering { opacity: 1; transform: none; }

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 4px 0 27px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 26px;
}
.page-head-main { min-width: 0; }
.page-head h1 {
  margin-top: 10px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(34px, 3.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.035em;
}
.lede { max-width: 700px; margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 15px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.head-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--amber); }
.head-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; padding-bottom: 2px; }

.panel {
  position: relative;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(251, 248, 240, 0.72);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.panel.pad-0 { padding: 0; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.section-head h2 {
  margin-top: 5px;
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.section-action { display: flex; align-items: center; gap: 8px; }
.section-action .micro { color: var(--muted); }

.page-signature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 38px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--muted-light);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.page-signature i { margin-left: auto; width: 80px; height: 1px; background: var(--line); }
.sig-seal { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--serif); font-size: 12px; color: var(--muted); }

.page-loading { min-height: 48vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.15em; text-transform: uppercase; }
.loader-rule { display: block; width: 120px; height: 1px; background: var(--line); overflow: hidden; position: relative; }
.loader-rule::after { content: ""; position: absolute; inset: 0; width: 40%; background: var(--amber); animation: boot 1.2s ease-in-out infinite; }

.error-state, .status-page { min-height: 55vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; }
.error-state h3, .status-page h1 { font-family: var(--serif); font-weight: 600; font-size: 32px; margin-top: 8px; }
.error-state p, .status-page p { max-width: 430px; color: var(--muted); font-size: 14px; line-height: 1.8; }
.status-code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--amber); }
.status-page .btn { margin-top: 12px; }

.empty-state { padding: 48px 20px; text-align: center; color: var(--muted); }
.empty-mark { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border: 1px solid var(--line); border-radius: 50%; color: var(--moss); }
.empty-state h3 { font-family: var(--serif); font-weight: 600; font-size: 20px; color: var(--ink); }

.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid .span-2 { grid-column: span 2; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > span { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; letter-spacing: 0.06em; }
.field > span b { color: var(--amber); font-family: var(--mono); font-size: 12px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(255, 253, 247, 0.7);
  color: var(--ink);
  font-size: 13px;
  transition: border-color 0.2s, background 0.2s;
}
.field textarea { resize: vertical; line-height: 1.65; }
.field input::placeholder, .field textarea::placeholder { color: #a6a99d; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--forest); background: #fffdf8; }
.field input:disabled { background: rgba(22, 35, 27, 0.035); color: var(--muted); }
.field input[type="range"] { min-height: 24px; padding: 0; accent-color: var(--forest); background: transparent; border: 0; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 15px) 17px, calc(100% - 10px) 17px; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }

.filter-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 210px;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: rgba(251, 248, 240, 0.6);
  color: var(--muted);
}
.filter-search input { width: 100%; border: 0; outline: 0; background: transparent; font-size: 12px; }
.filter-search input::placeholder { color: #9ca093; }

.inline-alert {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  border: 1px solid rgba(82, 107, 82, 0.18);
  border-left: 2px solid var(--moss);
  background: rgba(82, 107, 82, 0.06);
  color: var(--ink);
}
.inline-alert > div { min-width: 0; }
.inline-alert b { display: block; font-size: 13px; margin-bottom: 3px; }
.inline-alert p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.inline-alert.amber { border-color: rgba(181, 120, 60, 0.24); border-left-color: var(--amber); background: rgba(181, 120, 60, 0.07); }
.inline-alert.amber > svg { color: var(--amber); }
.inline-alert.danger { border-color: rgba(158, 61, 47, 0.22); border-left-color: var(--red); background: rgba(158, 61, 47, 0.06); }
.inline-alert.danger > svg { color: var(--red); }

/* ---------- sidebar ---------- */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  width: var(--sidebar-w);
  padding: 27px 17px 18px;
  background: var(--forest);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(circle at 20% 5%, rgba(255, 255, 255, 0.06), transparent 35%),
    repeating-linear-gradient(115deg, transparent 0 38px, rgba(245, 241, 231, 0.018) 38px 39px);
}
.sidebar > * { position: relative; z-index: 1; }

.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 0 5px; }
.brand-logo-plate { display: grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
.brand-logo-plate img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* 1.5px outline is baked into logo-mark-outline-v3.png, with transparent padding to avoid edge clipping. */
.brand-wordmark { display: flex; align-items: center; height: 42px; flex: 0 1 auto; min-width: 0; }
.brand-wordmark img { width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; }
.brand-seal {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 39px;
  height: 39px;
  border: 1px solid rgba(245, 241, 231, 0.45);
  color: var(--paper);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1;
}
.brand-seal.lg { width: 50px; height: 50px; font-size: 25px; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy b { font-family: var(--serif); font-size: 19px; font-weight: 600; letter-spacing: 0.12em; }
.brand-copy small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.21em; color: rgba(245, 241, 231, 0.5); }

.sidebar-edition {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  margin: 22px 7px 16px;
  padding-top: 15px;
  border-top: 1px solid rgba(245, 241, 231, 0.13);
  color: rgba(245, 241, 231, 0.4);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.sidebar-edition span:last-child { color: rgba(245, 241, 231, 0.27); letter-spacing: 0.12em; }
.sidebar-nav { display: flex; flex-direction: column; gap: 19px; }
.nav-group { display: flex; flex-direction: column; gap: 3px; }
.nav-caption { padding: 0 12px 6px; color: rgba(245, 241, 231, 0.32); font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 37px;
  padding: 0 11px;
  border-radius: 2px;
  color: rgba(245, 241, 231, 0.67);
  font-size: 13px;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-item:hover { background: rgba(245, 241, 231, 0.06); color: var(--paper); }
.nav-icon { display: flex; opacity: 0.7; }
.nav-item.is-active { background: var(--paper); color: var(--forest); }
.nav-item.is-active .nav-icon { opacity: 1; }
.nav-item.is-active .nav-mark { position: absolute; right: 10px; width: 4px; height: 4px; border-radius: 50%; background: var(--amber); }
.nav-label { white-space: nowrap; }

.sidebar-bottom { margin-top: auto; padding-top: 22px; display: flex; flex-direction: column; gap: 8px; }
.ai-side-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 10px;
  border: 1px solid rgba(245, 241, 231, 0.14);
  border-radius: 3px;
  background: rgba(245, 241, 231, 0.045);
  color: var(--paper);
  text-align: left;
  transition: background 0.2s, border-color 0.2s;
}
.ai-side-card:hover { background: rgba(245, 241, 231, 0.09); border-color: rgba(245, 241, 231, 0.25); }
.ai-side-orb { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border: 1px solid rgba(245, 241, 231, 0.38); border-radius: 50%; font-family: var(--serif); font-size: 16px; }
.ai-side-orb i { position: absolute; right: -1px; bottom: 1px; width: 6px; height: 6px; border-radius: 50%; background: #91b184; box-shadow: 0 0 0 2px var(--forest); }
.ai-side-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-side-copy b { font-size: 12px; font-weight: 500; }
.ai-side-copy small { font-size: 12px; color: rgba(245, 241, 231, 0.46); white-space: nowrap; }
.ai-side-card > svg { margin-left: auto; color: rgba(245, 241, 231, 0.45); }
.sidebar-rule { height: 1px; margin: 5px 0; background: rgba(245, 241, 231, 0.09); }
.side-mini-link { display: flex; align-items: center; gap: 9px; height: 31px; padding: 0 11px; color: rgba(245, 241, 231, 0.55); font-size: 12px; border-radius: 2px; }
.side-mini-link:hover { color: var(--paper); background: rgba(245, 241, 231, 0.05); }
.sidebar-user { display: flex; align-items: center; gap: 7px; margin-top: 5px; padding-top: 12px; border-top: 1px solid rgba(245, 241, 231, 0.1); }
.sidebar-user-main { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
.sidebar-user-main span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sidebar-user-main b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-main small { font-size: 12px; color: rgba(245, 241, 231, 0.42); }
.sidebar-user .avatar { width: 28px; height: 28px; font-size: 12px; }
.logout-btn { color: rgba(245, 241, 231, 0.45); width: 29px; height: 29px; }
.logout-btn:hover { color: var(--paper); background: rgba(245, 241, 231, 0.08); border-color: transparent; }

/* ---------- topbar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  padding: 0 42px;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 240, 230, 0.86);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 13px; }
.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--muted); }
.breadcrumb a { transition: color 0.2s; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { color: var(--muted-light); }
.breadcrumb b { font-weight: 500; color: var(--ink); letter-spacing: 0.02em; }
.mobile-menu { display: none; }
.search-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  width: 232px;
  padding: 0 9px 0 11px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(251, 248, 240, 0.55);
  color: var(--muted);
  font-size: 12px;
  text-align: left;
  transition: border-color 0.2s, background 0.2s;
}
.search-trigger:hover { border-color: rgba(22, 35, 27, 0.28); background: var(--paper-2); }
.search-trigger span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 19px; height: 18px; padding: 0 4px; border: 1px solid var(--line); border-radius: 2px; font-family: var(--mono); font-size: 12px; color: var(--muted); background: rgba(255, 255, 255, 0.4); }
.bell-btn { position: relative; }
.bell-btn i { position: absolute; top: 7px; right: 7px; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--paper); }
.topbar-rule { width: 1px; height: 20px; background: var(--line); }
.topbar-user { display: flex; align-items: center; gap: 8px; padding: 3px 2px; }
.topbar-user-copy { display: flex; flex-direction: column; gap: 0; }
.topbar-user-copy b { font-size: 12px; font-weight: 500; }
.topbar-user-copy small { color: var(--muted); font-size: 12px; }
.topbar-user .avatar { width: 29px; height: 29px; font-size: 12px; }

/* ---------- login ---------- */

.login-page { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(480px, 0.86fr); min-height: 100vh; background: var(--paper-2); }
.login-visual { position: relative; min-height: 100vh; overflow: hidden; background: var(--forest); color: var(--paper); padding: 42px 50px 35px; display: flex; }
.login-grain { position: absolute; inset: 0; opacity: 0.4; background: radial-gradient(circle at 22% 25%, rgba(201, 139, 74, 0.18), transparent 34%), radial-gradient(circle at 85% 80%, rgba(245, 241, 231, 0.08), transparent 40%); }
.login-contours { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-vertical { position: absolute; top: 50%; right: 25px; transform: translateY(-50%); writing-mode: vertical-rl; color: rgba(245, 241, 231, 0.3); font-family: var(--serif); font-size: 12px; letter-spacing: 0.42em; z-index: 2; }
.login-visual-inner { position: relative; z-index: 3; display: flex; flex-direction: column; width: 100%; }
.login-top { display: flex; justify-content: space-between; align-items: flex-start; }
.login-brand { display: flex; align-items: center; gap: 12px; }
.login-brand .brand-logo-plate { width: 62px; height: 62px; }
.login-brand .brand-wordmark { height: 52px; }
.login-top-meta { text-align: right; color: rgba(245, 241, 231, 0.38); font-family: var(--mono); font-size: 12px; line-height: 1.8; letter-spacing: 0.16em; }
.login-hero { margin: auto 0; padding: 9vh 0 6vh; max-width: 690px; }
.login-hero h1 { margin-top: 22px; font-family: var(--serif); font-weight: 600; font-size: clamp(52px, 5.4vw, 78px); line-height: 1.14; letter-spacing: -0.045em; }
.login-hero h1 em { font-style: normal; color: var(--amber-2); }
.login-hero p { margin-top: 27px; color: rgba(245, 241, 231, 0.56); font-size: 13px; line-height: 2.1; letter-spacing: 0.03em; }
.login-lower { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 36px; align-items: end; margin-top: auto; }
.login-stats { display: flex; gap: 27px; }
.login-stats > div { display: flex; flex-direction: column; gap: 4px; }
.login-stats b { font-family: var(--serif); font-size: 31px; font-weight: 600; line-height: 1; color: var(--paper); }
.login-stats span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: rgba(245, 241, 231, 0.37); }
.login-quote { border-left: 1px solid var(--amber); padding-left: 20px; }
.login-quote > span { display: block; font-family: var(--serif); font-size: 24px; color: var(--amber-2); line-height: 0.7; }
.login-quote p { margin-top: 6px; font-family: var(--serif); font-size: 14px; line-height: 1.8; color: rgba(245, 241, 231, 0.72); }
.login-quote footer { margin-top: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: rgba(245, 241, 231, 0.35); }
.login-foot { display: flex; justify-content: space-between; margin-top: 35px; padding-top: 15px; border-top: 1px solid rgba(245, 241, 231, 0.12); color: rgba(245, 241, 231, 0.3); font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }

.login-panel { position: relative; display: flex; align-items: center; justify-content: center; padding: 44px; background: var(--paper-2); }
.login-panel::before { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(22, 35, 27, 0.06); pointer-events: none; }
.login-panel-inner { width: min(100%, 402px); position: relative; z-index: 1; }
.login-mobile-mark { display: none; }
.login-mobile-mark .brand-logo-plate { width: 42px; height: 42px; }
.login-mobile-mark .brand-wordmark { height: 34px; }
.login-form-head h2 { margin-top: 12px; font-family: var(--serif); font-weight: 600; font-size: 34px; letter-spacing: -0.035em; }
.login-form-head > p { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.login-form-head { margin-bottom: 27px; }
#login-form { display: flex; flex-direction: column; gap: 15px; }
.login-form .field > span, #login-form .field > span { font-size: 12px; letter-spacing: 0.08em; }
.field-input { display: flex; align-items: center; gap: 9px; height: 45px; padding: 0 12px; border: 1px solid var(--line); border-radius: 2px; background: rgba(255, 253, 247, 0.7); color: var(--muted); transition: border-color 0.2s, background 0.2s; }
.field-input:focus-within { border-color: var(--forest); background: #fffdf8; }
.field-input input { flex: 1; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; font-size: 13px; }
.field-input input::placeholder { color: #a9ab9f; }
.password-toggle { display: grid; place-items: center; width: 26px; height: 26px; border: 0; background: transparent; color: var(--muted); }
.login-options { display: flex; align-items: center; justify-content: space-between; margin: 1px 0 2px; color: var(--muted); font-size: 12px; }
.checkbox { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.checkbox input { accent-color: var(--forest); width: 13px; height: 13px; }
.login-submit { height: 45px; margin-top: 2px; }
.login-error { display: flex; align-items: center; gap: 7px; padding: 9px 11px; background: rgba(158, 61, 47, 0.07); border-left: 2px solid var(--red); color: var(--red); font-size: 12px; }
.login-error svg { flex: 0 0 auto; }
.demo-block { margin-top: 28px; padding-top: 19px; border-top: 1px solid var(--line); }
.demo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.demo-head b { color: var(--ink); font-weight: 500; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.demo-account { display: flex; align-items: center; gap: 8px; padding: 8px 8px; border: 1px solid var(--line-soft); border-radius: 2px; background: rgba(251, 248, 240, 0.5); text-align: left; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.demo-account:hover { border-color: rgba(22, 35, 27, 0.24); background: var(--paper-2); transform: translateY(-1px); }
.demo-account > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.demo-account b { font-size: 12px; font-weight: 500; }
.demo-account small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-account > svg { color: var(--muted-light); }
.login-security { display: flex; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; line-height: 1.6; }
.login-security svg { flex: 0 0 auto; color: var(--moss); margin-top: 1px; }
.login-copyright { margin-top: 15px; color: var(--muted-light); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }

/* ---------- overlays / modal / panel ---------- */

body.overlay-open, body.ai-open { overflow: hidden; }
.overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.overlay-side { padding: 0; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(14, 23, 17, 0.46); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); animation: fade 0.25s var(--ease); }
.overlay-panel { position: relative; z-index: 1; display: flex; flex-direction: column; max-height: min(88vh, 900px); width: min(100%, 650px); border: 1px solid rgba(22, 35, 27, 0.18); border-radius: 4px; background: var(--paper-2); box-shadow: var(--shadow-float); animation: modalIn 0.36s var(--ease); overflow: hidden; }
.overlay-panel.panel-sm { width: min(100%, 430px); }
.overlay-panel.panel-lg { width: min(100%, 760px); }
.overlay-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 25px 17px; border-bottom: 1px solid var(--line-soft); flex: 0 0 auto; }
.overlay-head h2 { margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -0.03em; line-height: 1.2; }
.overlay-head p { margin-top: 6px; max-width: 560px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.overlay-body { padding: 22px 25px 25px; overflow-y: auto; min-height: 0; }
.overlay-foot { display: flex; justify-content: flex-end; align-items: center; gap: 9px; padding: 14px 25px; border-top: 1px solid var(--line-soft); background: rgba(236, 230, 216, 0.35); flex: 0 0 auto; }

.overlay-panel.panel-panel { position: fixed; top: 0; right: 0; bottom: 0; max-height: none; width: min(100%, 570px); border-radius: 0; border-top: 0; border-right: 0; border-bottom: 0; animation: panelIn 0.4s var(--ease); }
.overlay-panel.panel-panel.panel-lg { width: min(100%, 690px); }
.overlay-panel.panel-panel.panel-sm { width: min(100%, 430px); }
.overlay-panel.panel-panel .panel-head { padding: 27px 27px 19px; }
.overlay-panel.panel-panel .panel-body { padding: 22px 27px 28px; }
.overlay-panel.panel-panel .panel-foot { padding: 15px 27px; }
.overlay-panel.panel-panel .panel-foot .btn:first-child { margin-right: auto; }

.overlay-command { align-items: flex-start; padding-top: 12vh; }
.overlay-command .overlay-panel { width: min(100%, 650px); max-height: 70vh; background: var(--paper-2); }
.command-head { display: flex; align-items: center; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line); color: var(--muted); }
.command-head input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 15px; color: var(--ink); }
.command-head input::placeholder { color: #9fa397; }
.command-body { overflow-y: auto; padding: 9px 8px 11px; }
.command-section { padding: 8px 0; }
.command-section + .command-section { border-top: 1px solid var(--line-soft); }
.command-label { display: block; padding: 2px 11px 7px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.command-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 2px; background: transparent; text-align: left; }
.command-item:hover { background: rgba(22, 35, 27, 0.05); }
.command-icon { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line-soft); border-radius: 2px; color: var(--moss); }
.command-item > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.command-item b { font-size: 12px; font-weight: 500; }
.command-item small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.command-item > svg { color: var(--muted-light); }
.command-ai-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px; }
.command-ai { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; }
.command-ai:hover { border-color: var(--amber); color: var(--amber); }
.command-foot { display: flex; align-items: center; gap: 14px; padding: 9px 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.command-foot kbd { margin-right: 3px; }
.command-brand { margin-left: auto; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); }
.command-loading { padding: 22px; display: flex; justify-content: center; }
.command-empty { padding: 36px 20px; text-align: center; color: var(--muted); font-size: 12px; }
.command-empty svg { margin: 0 auto 8px; color: var(--muted-light); }

@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(0.985); } to { opacity: 1; transform: none; } }
@keyframes panelIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: none; } }

/* toast */
#toast-root { position: fixed; right: 22px; bottom: 22px; z-index: 400; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; max-width: 360px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 3px; background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); font-size: 12px; transform: translateY(10px); opacity: 0; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); }
.toast.is-in { transform: none; opacity: 1; }
.toast-success .toast-mark { color: #b4c9a8; }
.toast-error .toast-mark { color: #df9f91; }
.toast-mark { display: flex; color: var(--amber-2); }

/* =========================================================
   DASHBOARD
   ========================================================= */

.dashboard-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.72fr);
  gap: 42px;
  min-height: 318px;
  margin-bottom: 17px;
  padding: 35px 38px;
  overflow: hidden;
  border-radius: 6px;
  background: var(--forest);
  color: var(--paper);
}
.hero-contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dashboard-hero::after { content: ""; position: absolute; width: 340px; height: 340px; right: -90px; top: -120px; border: 1px solid rgba(201, 139, 74, 0.24); border-radius: 50%; pointer-events: none; }
.dashboard-hero-main { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.dashboard-hero h1 { margin-top: 20px; font-family: var(--serif); font-weight: 600; font-size: clamp(37px, 3.6vw, 51px); line-height: 1.15; letter-spacing: -0.04em; }
.dashboard-hero-lede { margin-top: 13px; max-width: 540px; color: rgba(245, 241, 231, 0.58); font-size: 13px; line-height: 1.9; }
.dashboard-hero-actions { display: flex; align-items: center; gap: 20px; margin-top: 25px; flex-wrap: wrap; }
.hero-brief { position: relative; z-index: 2; display: flex; flex-direction: column; align-self: center; padding: 21px; border: 1px solid rgba(245, 241, 231, 0.14); border-radius: 3px; background: rgba(245, 241, 231, 0.055); backdrop-filter: blur(4px); }
.hero-brief-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid rgba(245, 241, 231, 0.12); }
.hero-brief-head > span:first-child { display: flex; align-items: center; gap: 6px; color: var(--amber-2); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.live-dot { display: inline-flex; align-items: center; gap: 5px; color: rgba(245, 241, 231, 0.42); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; }
.live-dot::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: #91b184; box-shadow: 0 0 0 3px rgba(145, 177, 132, 0.13); }
.hero-brief > p { margin-top: 14px; font-family: var(--serif); font-size: 16px; line-height: 1.82; color: rgba(245, 241, 231, 0.87); }
.hero-brief-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(245, 241, 231, 0.1); }
.brief-score { display: flex; align-items: baseline; gap: 8px; }
.brief-score b { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1; color: var(--paper); }
.brief-score b span { font-size: 15px; color: var(--amber-2); }
.brief-score small { max-width: 54px; color: rgba(245, 241, 231, 0.4); font-size: 12px; line-height: 1.4; }
.brief-open { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: rgba(245, 241, 231, 0.6); font-size: 12px; }
.brief-open:hover { color: var(--paper); }

.kpi-strip {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, 1fr) 1.2fr;
  margin-bottom: 17px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(251, 248, 240, 0.74);
  overflow: hidden;
}
.kpi-cell { min-width: 0; min-height: 118px; padding: 18px 20px 16px; border-left: 1px solid var(--line-soft); }
.kpi-cell:first-child { border-left: 0; }
.kpi-primary { background: rgba(236, 230, 216, 0.38); }
.kpi-label { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 7px; color: var(--muted); font-size: 12px; letter-spacing: 0.03em; line-height: 1.45; }
.kpi-label span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.11em; color: var(--muted-light); }
.kpi-value { margin: 7px 0 8px; font-family: var(--serif); font-size: clamp(25px, 2.15vw, 33px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.kpi-value small { font-size: 15px; margin-left: 2px; color: var(--amber); }
.kpi-value.small { font-size: 26px; margin: 3px 0 9px; }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 20px; }
.kpi-note { color: var(--muted-light); font-size: 12px; }
.kpi-spark { width: 88px; height: 26px; }
.kpi-spark svg { width: 100%; height: 100%; }
.kpi-target-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 3px; }
.kpi-target-row > span { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.kpi-target .progress { margin: 1px 0 9px; }

.dashboard-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 17px; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-8 { grid-column: span 8; }
.span-12 { grid-column: span 12; }

.trend-panel { padding-bottom: 18px; }
.trend-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2px; }
.trend-top > div:first-child { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.trend-top .micro { width: 100%; }
.trend-top b { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: -0.03em; }
.trend-top small { color: var(--muted); font-size: 12px; }
.trend-legend { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; }
.trend-legend span { display: inline-flex; align-items: center; gap: 5px; }
.trend-legend i { width: 13px; height: 2px; background: var(--forest); }
.trend-legend i.dash { background: repeating-linear-gradient(90deg, var(--muted-light) 0 3px, transparent 3px 5px); }
.segmented { display: inline-flex; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.segmented button { height: 26px; padding: 0 9px; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; }
.segmented button:first-child { border-left: 0; }
.segmented button.is-active { background: var(--forest); color: var(--paper); }
.area-chart { width: 100%; height: 228px; margin-top: 5px; overflow: visible; }
.chart-grid-line { stroke: rgba(22, 35, 27, 0.075); stroke-width: 1; }
.chart-axis { fill: var(--muted-light); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.trend-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.trend-foot span { display: flex; align-items: center; gap: 5px; }
.trend-foot button { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; color: var(--forest); font-size: 12px; }

.donut-block { display: flex; align-items: center; gap: 13px; }
.donut-wrap { position: relative; flex: 0 0 auto; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; pointer-events: none; }
.donut-center b { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1; }
.donut-center span { color: var(--muted); font-size: 12px; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
.donut-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.donut-legend span { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.donut-legend i { width: 5px; height: 5px; border-radius: 50%; flex: 0 0 auto; }
.donut-legend b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.mix-insight { display: flex; align-items: flex-start; gap: 6px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; line-height: 1.6; }
.mix-insight svg { flex: 0 0 auto; color: var(--amber); margin-top: 1px; }
.mix-insight b { color: var(--ink); font-weight: 500; }

.map-panel { overflow: hidden; }
.map-wrap { position: relative; margin: 0 -5px; }
.ne-map { width: 100%; height: 300px; overflow: visible; }
.map-label { fill: var(--ink); font-family: var(--sans); font-size: 12px; letter-spacing: 0.02em; paint-order: stroke; stroke: var(--paper-2); stroke-width: 3px; }
.map-pin { cursor: pointer; }
.map-pin-halo { fill: rgba(181, 120, 60, 0.15); transition: fill 0.2s, r 0.2s; }
.map-pin-dot { fill: var(--amber); stroke: var(--paper-2); stroke-width: 1.4; }
.map-pin-dot.is-signed { fill: var(--forest); }
.map-pin:hover .map-pin-halo { fill: rgba(181, 120, 60, 0.32); }
.map-pin:hover .map-label { fill: var(--amber); }
.map-pin:hover .map-pin-dot { fill: var(--forest); }
.map-note { fill: var(--muted-light); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.map-legend { display: flex; align-items: center; gap: 14px; margin-top: 2px; color: var(--muted); font-size: 12px; }
.map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend i { width: 5px; height: 5px; border-radius: 50%; }
.dot-amber { background: var(--amber); }
.dot-forest { background: var(--forest); }
.map-hint { margin-left: auto; color: var(--muted-light); }
.map-footer { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line-soft); }
.map-footer > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; padding-left: 13px; border-left: 1px solid var(--line-soft); }
.map-footer > div:first-child { padding-left: 0; border-left: 0; }
.map-footer span { width: 100%; color: var(--muted); font-size: 12px; }
.map-footer b { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1; }
.map-footer small { color: var(--muted-light); font-size: 12px; }

.task-list { display: flex; flex-direction: column; margin: 0 -8px; }
.task-row { display: flex; align-items: flex-start; gap: 9px; padding: 10px 8px; border-top: 1px solid var(--line-soft); cursor: default; transition: background 0.2s; }
.task-row:first-child { border-top: 0; padding-top: 4px; }
.task-row:hover { background: rgba(22, 35, 27, 0.025); }
.task-check { display: grid; place-items: center; flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; padding: 0; border: 1px solid rgba(22, 35, 27, 0.25); border-radius: 50%; background: transparent; color: transparent; }
.task-check:hover { border-color: var(--moss); background: rgba(82, 107, 82, 0.08); color: var(--moss); }
.task-row.is-done .task-check { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.task-row.is-done .task-copy b { text-decoration: line-through; color: var(--muted); }
.task-copy { min-width: 0; flex: 1; }
.task-copy > b { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-meta { display: flex; align-items: center; gap: 5px; margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.task-meta em { margin-left: auto; font-style: normal; color: var(--amber); font-family: var(--mono); font-size: 12px; }
.task-meta em.is-overdue { color: var(--red); }
.priority-dot { width: 4px; height: 4px; border-radius: 50%; }
.p-high { background: var(--red); }
.p-medium { background: var(--amber); }
.p-low { background: var(--muted-light); }
.task-row > svg { color: var(--muted-light); margin-top: 4px; }
.panel-link { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.panel-link:hover { color: var(--forest); }

.signal-list { display: flex; flex-direction: column; gap: 3px; margin: 0 -6px; }
.signal-item { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 6px; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; }
.signal-item:first-child { border-top: 0; padding-top: 3px; }
.signal-item:hover { background: rgba(22, 35, 27, 0.025); }
.signal-icon { display: grid; place-items: center; width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%; background: rgba(22, 35, 27, 0.05); color: var(--muted); }
.signal-item.tone-danger .signal-icon { background: rgba(158, 61, 47, 0.1); color: var(--red); }
.signal-item.tone-warn .signal-icon { background: rgba(181, 120, 60, 0.1); color: var(--amber); }
.signal-item > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.signal-item b { font-size: 12px; font-weight: 500; }
.signal-item small { color: var(--muted); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.pipeline-total { display: flex; align-items: baseline; gap: 7px; margin: -3px 0 12px; }
.pipeline-total b { font-family: var(--serif); font-size: 31px; font-weight: 600; line-height: 1; }
.pipeline-total span { color: var(--muted); font-size: 12px; }
.hbars { display: flex; flex-direction: column; gap: 8px; }
.hbar-row { display: flex; flex-direction: column; gap: 3px; }
.hbar-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.hbar-meta span { color: var(--muted); font-size: 12px; }
.hbar-meta b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.hbar-track { height: 4px; background: rgba(22, 35, 27, 0.07); border-radius: 99px; overflow: hidden; }
.hbar-track i { display: block; height: 100%; border-radius: inherit; min-width: 2px; }
.hbar-row small { color: var(--muted-light); font-size: 12px; }
.pipeline-note { display: flex; gap: 5px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; line-height: 1.55; }
.pipeline-note svg { flex: 0 0 auto; color: var(--amber); margin-top: 1px; }

.mini-product-list { display: flex; flex-direction: column; }
.mini-product { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line-soft); background: transparent; border-left: 0; border-right: 0; border-bottom: 0; text-align: left; width: 100%; }
.mini-product:first-child { border-top: 0; padding-top: 2px; }
.mini-product:hover .mini-product-copy b { color: var(--amber); }
.mini-art { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 42px; border-radius: 1px; color: rgba(22, 35, 27, 0.55); }
.mini-art.art-honey { background: #ead6b9; }
.mini-art.art-grain { background: #e7dfcd; }
.mini-art.art-mushroom { background: #dcd8c9; }
.mini-art.art-corn { background: #ecdfb9; }
.mini-art.art-fish { background: #d7e2df; }
.mini-art.art-berry { background: #dadce7; }
.mini-art.art-ginseng { background: #e2d2c2; }
.mini-art.art-nuts { background: #e5d8c1; }
.mini-art.art-beef { background: #e4d6ca; }
.mini-art.art-pork { background: #e5d4cd; }
.mini-art.art-wine { background: #ded0d1; }
.mini-art.art-gift { background: #e4dbc9; }
.mini-art.art-brand { background: #dbe1d5; }
.mini-product-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mini-product-copy b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.mini-product-copy small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-product-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; }
.mini-product-stat b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.mini-product-stat small { color: var(--muted-light); font-size: 12px; }

.pipeline-value { display: flex; align-items: baseline; justify-content: space-between; margin: -2px 0 10px; }
.pipeline-value span { color: var(--muted); font-size: 12px; }
.pipeline-value b { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; }
.customer-mini-list { display: flex; flex-direction: column; }
.customer-mini { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line-soft); border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; }
.customer-mini:first-child { border-top: 0; padding-top: 1px; }
.customer-mini-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.customer-mini-top b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.customer-mini-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.customer-mini-meta em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--amber); }
.customer-mini-meta span { color: var(--muted); font-size: 12px; }
.customer-note { display: flex; gap: 5px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; line-height: 1.55; }
.customer-note svg { flex: 0 0 auto; color: var(--amber); margin-top: 1px; }

/* =========================================================
   SOURCING
   ========================================================= */

.sourcing-principles {
  display: grid;
  grid-template-columns: 1.05fr 1.45fr 0.75fr;
  gap: 34px;
  align-items: center;
  margin-bottom: 23px;
  padding: 25px 28px;
  border-radius: 5px;
  background: var(--forest);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.sourcing-principles::after { content: ""; position: absolute; width: 240px; height: 240px; right: -100px; bottom: -150px; border: 1px solid rgba(201, 139, 74, 0.2); border-radius: 50%; }
.principle-lead h3 { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.25; letter-spacing: -0.03em; }
.principle-lead > p { margin-top: 8px; max-width: 290px; color: rgba(245, 241, 231, 0.5); font-size: 12px; line-height: 1.75; }
.principle-threshold { display: flex; gap: 4px; margin-top: 15px; }
.principle-threshold span { padding: 4px 6px; border: 1px solid rgba(245, 241, 231, 0.16); color: rgba(245, 241, 231, 0.6); font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.principle-threshold span:first-child { border-color: var(--amber); color: var(--amber-2); }
.principle-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(245, 241, 231, 0.13); border-left: 1px solid rgba(245, 241, 231, 0.13); }
.principle-item { display: flex; align-items: baseline; gap: 8px; padding: 9px 11px; border-right: 1px solid rgba(245, 241, 231, 0.13); border-bottom: 1px solid rgba(245, 241, 231, 0.13); }
.principle-item > span { font-family: var(--mono); font-size: 12px; color: rgba(245, 241, 231, 0.3); }
.principle-item b { font-size: 12px; font-weight: 600; color: rgba(245, 241, 231, 0.75); }
.principle-item em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--amber-2); }
.principle-side { display: flex; flex-direction: column; gap: 10px; }
.principle-side > div { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 1px solid rgba(201, 139, 74, 0.45); }
.principle-side b { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: rgba(245, 241, 231, 0.8); }
.principle-side b svg { color: var(--amber-2); }
.principle-side span { color: rgba(245, 241, 231, 0.35); font-size: 12px; }

.board-section { border: 1px solid var(--line); border-radius: 4px; background: rgba(236, 230, 216, 0.42); }
.board-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 16px; border-bottom: 1px solid var(--line); background: rgba(251, 248, 240, 0.55); flex-wrap: wrap; }
.stage-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.stage-tab { height: 28px; padding: 0 9px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; }
.stage-tab:hover { background: rgba(22, 35, 27, 0.045); color: var(--ink); }
.stage-tab.is-active { background: var(--ink); color: var(--paper); }
.stage-tab em { margin-left: 3px; font-style: normal; font-family: var(--mono); font-size: 12px; opacity: 0.6; }
.board-filters { display: flex; align-items: center; gap: 8px; }
.filter-select { display: flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px; border: 1px solid var(--line); border-radius: 2px; background: rgba(251, 248, 240, 0.6); color: var(--muted); }
.filter-select select { max-width: 110px; border: 0; outline: 0; background: transparent; font-size: 12px; color: var(--ink); appearance: none; }
.sourcing-board { display: grid; grid-template-columns: repeat(5, minmax(208px, 1fr)); gap: 1px; background: var(--line-soft); overflow-x: auto; align-items: stretch; }
.board-column { min-width: 0; background: rgba(244, 240, 230, 0.74); display: flex; flex-direction: column; transition: opacity 0.3s, background 0.25s; }
.board-column.is-dimmed { opacity: 0.38; }
.board-column.is-drag-over { background: rgba(181, 120, 60, 0.08); }
.column-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 9px; border-bottom: 1px solid var(--line-soft); }
.column-title { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.column-title em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.stage-dot { width: 5px; height: 5px; border-radius: 50%; }
.stage-lead { background: #b9b4a4; }
.stage-screen { background: #7d90a0; }
.stage-visit { background: #8a7890; }
.stage-sample { background: var(--amber); }
.stage-signed { background: var(--moss); }
.column-add { width: 24px; height: 24px; }
.column-body { display: flex; flex-direction: column; gap: 8px; padding: 8px; min-height: 180px; flex: 1; }
.column-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 130px; color: var(--muted-light); font-size: 12px; border: 1px dashed rgba(22, 35, 27, 0.11); border-radius: 2px; }
.sourcing-card { padding: 12px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-2); cursor: pointer; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65); transition: border-color 0.2s, transform 0.2s var(--ease), box-shadow 0.2s; }
.sourcing-card:hover { border-color: rgba(22, 35, 27, 0.28); transform: translateY(-2px); box-shadow: 0 8px 22px rgba(22, 35, 27, 0.08); }
.sourcing-card.is-dragging { opacity: 0.45; }
.sc-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.sc-region { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-region svg { color: var(--amber); flex: 0 0 auto; }
.sourcing-card h3 { margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: -0.02em; }
.sc-supplier { margin-top: 2px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-facts { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 9px; }
.sc-facts span { padding: 3px 5px; background: rgba(22, 35, 27, 0.045); color: var(--muted); font-size: 12px; border-radius: 1px; }
.sc-facts b { color: var(--ink); font-weight: 500; }
.sc-next { margin-top: 9px; padding: 7px 8px; border-left: 1px solid rgba(181, 120, 60, 0.5); background: rgba(181, 120, 60, 0.045); }
.sc-next span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--amber); }
.sc-next p { margin-top: 2px; color: var(--ink); font-size: 12px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sc-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.sc-owner { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12px; }
.sc-foot time { color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.board-foot { display: flex; justify-content: space-between; gap: 15px; padding: 9px 14px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-size: 12px; flex-wrap: wrap; }
.board-foot span { display: flex; align-items: center; gap: 4px; }
.board-no-results { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 30px; color: var(--muted); font-size: 12px; border-top: 1px solid var(--line-soft); }

/* sourcing detail */
.detail-hero { display: flex; align-items: center; gap: 18px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.score-ring { position: relative; flex: 0 0 auto; }
.score-ring > span { position: absolute; inset: 0; display: flex; align-items: baseline; justify-content: center; gap: 1px; }
.score-ring b { font-family: var(--serif); font-size: 24px; font-weight: 600; }
.score-ring small { color: var(--muted); font-size: 12px; }
.detail-hero-copy { min-width: 0; }
.detail-hero-copy h2 { margin-top: 4px; font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.detail-hero-copy > p { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.detail-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.detail-section { padding: 19px 0; border-bottom: 1px solid var(--line-soft); }
.detail-section:last-child { border-bottom: 0; padding-bottom: 4px; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px; }
.detail-section-head > span:last-child { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); margin: 18px 0; }
.detail-grid > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.detail-grid span { color: var(--muted); font-size: 12px; }
.detail-grid b { font-size: 12px; font-weight: 500; line-height: 1.45; }
.score-breakdown { display: flex; flex-direction: column; gap: 9px; }
.score-part { display: grid; grid-template-columns: 82px 1fr 37px; align-items: center; gap: 10px; }
.score-part > span { color: var(--muted); font-size: 12px; }
.score-part-track { height: 4px; background: rgba(22, 35, 27, 0.07); border-radius: 99px; overflow: hidden; }
.score-part-track i { display: block; height: 100%; background: var(--amber); border-radius: inherit; }
.score-part > b { text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.score-part > b small { color: var(--muted-light); font-size: 12px; }
.detail-ai { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 19px; padding: 14px 15px; border: 1px solid rgba(181, 120, 60, 0.2); background: rgba(181, 120, 60, 0.055); }
.detail-ai > div { display: grid; grid-template-columns: 17px 1fr; column-gap: 7px; }
.detail-ai > div > svg { grid-row: span 2; color: var(--amber); }
.detail-ai b { font-size: 12px; font-weight: 500; }
.detail-ai p { margin-top: 1px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.detail-ai .btn { flex: 0 0 auto; }

/* =========================================================
   PRODUCTS
   ========================================================= */

.product-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, .82fr) 1px minmax(0, .82fr) 1px minmax(0, 1.45fr);
  align-items: center;
  gap: 20px;
  margin-bottom: 23px;
  padding: 17px 21px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(251, 248, 240, 0.72);
}
.product-summary > div:not(.summary-divider) { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.product-summary b { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.product-summary b small { color: var(--muted); font-family: var(--sans); font-size: 13px; }
.product-summary p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.summary-divider { width: 1px; height: 34px; background: var(--line-soft); }
.summary-note { flex-direction: row !important; align-items: flex-start; gap: 7px !important; padding-left: 6px; }
.summary-note svg { flex: 0 0 auto; color: var(--moss); margin-top: 2px; }
.summary-note p { max-width: 260px; line-height: 1.6; }
.catalog-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
.catalog-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.catalog-tabs button { height: 29px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; }
.catalog-tabs button:hover { color: var(--ink); background: rgba(22, 35, 27, 0.035); }
.catalog-tabs button.is-active { border-color: var(--line); background: rgba(251, 248, 240, 0.8); color: var(--ink); }
.catalog-tabs em { margin-left: 3px; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px; }
.product-card { border: 1px solid var(--line); border-radius: 4px; background: rgba(251, 248, 240, 0.7); overflow: hidden; cursor: pointer; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s; }
.product-card:hover { transform: translateY(-3px); border-color: rgba(22, 35, 27, 0.25); box-shadow: 0 16px 36px rgba(22, 35, 27, 0.08); }
.product-card-art { position: relative; padding: 10px; background: rgba(236, 230, 216, 0.35); }
.product-status { position: absolute; top: 17px; left: 17px; z-index: 3; background: rgba(251, 248, 240, 0.9); backdrop-filter: blur(5px); }
.art-compliance { position: absolute; top: 17px; right: 17px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; background: rgba(158, 61, 47, 0.9); color: #fff; font-size: 12px; border-radius: 1px; }
.product-art { position: relative; aspect-ratio: 4 / 3.1; display: flex; flex-direction: column; padding: 16px 17px; overflow: hidden; border-radius: 2px; color: #4d4a3e; isolation: isolate; }
.art-honey { background: linear-gradient(145deg, #f0e0c4 0%, #e6cfa9 58%, #ddc196 100%); color: #6b4a29; }
.art-grain, .art-grain2 { background: linear-gradient(145deg, #f1ecdf 0%, #e0d8c4 62%, #d3c9b1 100%); color: #5d5a48; }
.art-fish { background: linear-gradient(145deg, #e4ece8 0%, #cfded9 65%, #b9d0ca 100%); color: #405f5b; }
.art-beef { background: linear-gradient(145deg, #ebded3 0%, #dcc8b7 60%, #c9ae98 100%); color: #704938; }
.art-mushroom { background: linear-gradient(145deg, #e8e3d5 0%, #d8d0bb 62%, #c3b99f 100%); color: #5c5543; }
.art-ginseng { background: linear-gradient(145deg, #ece0d2 0%, #ddc7b1 60%, #c8ab90 100%); color: #704c34; }
.art-corn { background: linear-gradient(145deg, #f4e9c7 0%, #e7d6a0 60%, #d5c183 100%); color: #6e5927; }
.art-nuts { background: linear-gradient(145deg, #ede2ce 0%, #decbb0 62%, #c8b18e 100%); color: #66513a; }
.art-berry { background: linear-gradient(145deg, #e3e3eb 0%, #d0d0dd 60%, #b9b9cb 100%); color: #4f4b62; }
.art-pork { background: linear-gradient(145deg, #ecded8 0%, #ddc8bf 62%, #c8ada1 100%); color: #6e4d42; }
.art-wine { background: linear-gradient(145deg, #e5d9da 0%, #d2bec0 62%, #bda4a8 100%); color: #614147; }
.art-gift { background: linear-gradient(145deg, #eee4d2 0%, #ddcfb5 62%, #c8b693 100%); color: #5c4b30; }
.art-brand { background: linear-gradient(145deg, #e4e8dd 0%, #cfd7c6 62%, #b8c3ae 100%); color: #425440; }
.art-noise { position: absolute; inset: 0; z-index: -1; opacity: 0.25; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }
.product-art::after { content: ""; position: absolute; right: -28px; bottom: -42px; width: 122px; height: 122px; border: 1px solid currentColor; opacity: 0.14; border-radius: 50%; }
.art-top { display: flex; align-items: center; justify-content: space-between; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; opacity: 0.72; }
.art-top span { font-family: var(--serif); font-size: 12px; letter-spacing: 0.18em; }
.art-top small { font-size: 12px; letter-spacing: 0.18em; }
.art-glyph { display: flex; align-items: center; justify-content: center; flex: 1; padding: 8px 0; opacity: 0.83; }
.art-glyph-svg { filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.22)); }
.art-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.art-bottom b { font-family: var(--serif); font-size: 16px; font-weight: 600; letter-spacing: 0.03em; line-height: 1.2; }
.art-bottom span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; opacity: 0.62; text-align: right; max-width: 100px; }
.art-seal { position: absolute; right: 16px; top: 50%; display: grid; place-items: center; width: 19px; height: 19px; margin-top: 8px; border: 1px solid currentColor; border-radius: 50%; color: var(--red); font-family: var(--serif); font-size: 12px; opacity: 0.75; }
.product-card-body { padding: 14px 16px 15px; }
.product-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.product-card-head h3 { font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.35; letter-spacing: -0.02em; }
.product-card-head p { margin-top: 3px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-price { flex: 0 0 auto; font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--forest); }
.product-metrics { display: grid; grid-template-columns: 1.2fr 1fr 0.8fr; gap: 7px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.product-metrics > span { display: flex; flex-direction: column; gap: 1px; }
.product-metrics small { color: var(--muted-light); font-size: 12px; }
.product-metrics b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.product-metrics b.low-stock { color: var(--red); }
.product-margin { display: flex; align-items: center; gap: 9px; margin-top: 9px; }
.product-margin > span { flex: 0 0 auto; color: var(--muted); font-size: 12px; }
.product-margin b { color: var(--ink); font-family: var(--mono); font-weight: 500; }
.product-margin .progress { height: 3px; }
.catalog-foot { display: flex; align-items: center; gap: 5px; margin-top: 23px; color: var(--muted-light); font-size: 12px; }
.catalog-empty { grid-column: span 3; padding: 45px; text-align: center; color: var(--muted); }
.catalog-empty svg { margin: 0 auto 8px; }
.product-detail-art { margin: -4px 0 20px; }
.product-detail-art .product-art { aspect-ratio: 16 / 7.3; }
.product-detail-art .art-glyph svg { width: 88px; height: 88px; }
.product-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.product-detail-head h2 { margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.035em; }
.product-detail-head p { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--muted); font-size: 12px; }
.product-detail-price { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.product-detail-price b { font-family: var(--serif); font-size: 29px; font-weight: 600; }
.product-story { font-family: var(--serif); font-size: 15px; line-height: 1.9; color: #39453b; }
.channel-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.channel-fit span { display: flex; align-items: center; gap: 6px; padding: 8px 9px; border: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.channel-fit b { margin-left: auto; color: var(--forest); font-weight: 500; }

/* =========================================================
   CHANNELS
   ========================================================= */

.channel-overview { display: grid; grid-template-columns: 1.05fr 1fr; gap: 0; margin-bottom: 20px; border-radius: 5px; overflow: hidden; background: var(--forest); color: var(--paper); }
.channel-overview-main { padding: 26px 28px; background: var(--forest); }
.channel-overview-main h2 { margin-top: 13px; font-family: var(--serif); font-size: 43px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; }
.channel-overview-main > p { margin-top: 6px; color: rgba(245, 241, 231, 0.45); font-size: 12px; }
.overview-progress { display: flex; align-items: center; gap: 10px; margin-top: 21px; max-width: 400px; }
.overview-progress .progress { flex: 1; background: rgba(245, 241, 231, 0.13); }
.overview-progress .progress i { background: var(--amber-2); }
.overview-progress span { font-family: var(--mono); font-size: 12px; color: var(--amber-2); }
.channel-overview-side { display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: rgba(245, 241, 231, 0.045); border-left: 1px solid rgba(245, 241, 231, 0.12); }
.channel-overview-side > div { padding: 20px 22px; border-bottom: 1px solid rgba(245, 241, 231, 0.1); }
.channel-overview-side > div:nth-child(3) { grid-column: span 2; border-bottom: 0; }
.channel-overview-side span { display: block; color: rgba(245, 241, 231, 0.42); font-size: 12px; }
.channel-overview-side b { display: block; margin-top: 5px; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1; }
.channel-overview-side b small { font-family: var(--sans); font-size: 12px; color: rgba(245, 241, 231, 0.4); }
.channel-overview-side small { display: block; margin-top: 4px; color: rgba(245, 241, 231, 0.32); font-size: 12px; }
.overview-note { display: flex !important; flex-direction: row; align-items: flex-start; gap: 7px; padding: 13px 22px !important; background: rgba(201, 139, 74, 0.08); }
.overview-note svg { color: var(--amber-2); flex: 0 0 auto; margin-top: 1px; }
.overview-note p { color: rgba(245, 241, 231, 0.55); font-size: 12px; line-height: 1.6; }
.channel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.channel-card { position: relative; padding: 18px 18px 15px; border: 1px solid var(--line); border-radius: 4px; background: rgba(251, 248, 240, 0.7); cursor: pointer; overflow: hidden; transition: transform 0.25s var(--ease), border-color 0.25s, box-shadow 0.25s; }
.channel-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: transparent; transition: background 0.25s; }
.channel-card:hover { transform: translateY(-3px); border-color: rgba(22, 35, 27, 0.26); box-shadow: 0 16px 34px rgba(22, 35, 27, 0.075); }
.channel-card:hover::before { background: var(--amber); }
.channel-card-top { display: flex; align-items: center; gap: 7px; }
.channel-number { font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.channel-type { color: var(--muted); font-size: 12px; letter-spacing: 0.03em; }
.channel-card-top .pill { margin-left: auto; }
.channel-card h3 { margin-top: 9px; font-family: var(--serif); font-weight: 600; font-size: 21px; letter-spacing: -0.025em; }
.channel-gmv { display: flex; align-items: baseline; gap: 9px; margin-top: 6px; }
.channel-gmv b { font-family: var(--serif); font-size: 30px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.channel-target { margin-top: 13px; }
.channel-target > div { display: flex; justify-content: space-between; color: var(--muted); font-family: var(--mono); font-size: 12px; margin-bottom: 5px; }
.channel-target > div b { color: var(--ink); font-weight: 500; }
.channel-facts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.channel-facts span { display: flex; flex-direction: column; gap: 1px; }
.channel-facts small { color: var(--muted-light); font-size: 12px; }
.channel-facts b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.channel-note { margin-top: 10px; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-size: 12px; }
.channel-card-foot span { display: flex; align-items: center; gap: 4px; }
.channel-lower { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.rhythm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--line-soft); }
.rhythm-day { position: relative; padding: 13px; border-left: 1px solid var(--line-soft); }
.rhythm-day:first-child { border-left: 0; }
.rhythm-day > span { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--amber); }
.rhythm-day b { display: block; margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 17px; }
.rhythm-day p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.rhythm-day i { display: block; width: 18px; height: 1px; margin-top: 10px; background: var(--line); }
.priority-list { display: flex; flex-direction: column; }
.priority-list > div { display: flex; align-items: center; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.priority-list > div:first-child { border-top: 0; padding-top: 1px; }
.priority-rank { display: inline-grid; place-items: center; width: 26px; height: 20px; font-family: var(--mono); font-size: 12px; border-radius: 1px; }
.priority-rank.high { background: rgba(158, 61, 47, 0.1); color: var(--red); }
.priority-rank.mid { background: rgba(181, 120, 60, 0.12); color: var(--amber); }
.priority-rank.low { background: rgba(22, 35, 27, 0.055); color: var(--muted); }
.priority-list b { font-size: 12px; font-weight: 500; }
.priority-list em { margin-left: auto; font-style: normal; color: var(--muted); font-size: 12px; max-width: 160px; text-align: right; }
.priority-list strong { font-size: 12px; font-weight: 600; color: var(--muted-light); min-width: 44px; text-align: right; }
.channel-detail-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.channel-detail-hero h2 { margin-top: 4px; font-family: var(--serif); font-weight: 600; font-size: 30px; letter-spacing: -0.03em; }
.channel-detail-hero p { margin-top: 3px; color: var(--muted); font-size: 12px; }
.channel-detail-gmv { text-align: right; }
.channel-detail-gmv b { display: block; font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1; }
.channel-detail-gmv span { display: block; margin-top: 4px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.channel-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-soft); margin: 16px 0 20px; }
.channel-detail-stats div { padding: 11px 12px; border-left: 1px solid var(--line-soft); }
.channel-detail-stats div:first-child { border-left: 0; }
.channel-detail-stats span { display: block; color: var(--muted); font-size: 12px; }
.channel-detail-stats b { display: block; margin-top: 3px; font-family: var(--mono); font-size: 15px; font-weight: 500; }
.playbook-list { list-style: none; display: flex; flex-direction: column; }
.playbook-list li { display: flex; gap: 11px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.playbook-list li:first-child { border-top: 0; padding-top: 2px; }
.playbook-list li > span { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--mono); font-size: 12px; color: var(--amber); }
.playbook-list b { font-size: 12px; font-weight: 500; }
.playbook-list p { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.6; }

/* =========================================================
   CUSTOMERS / CRM
   ========================================================= */

.crm-stats { display: grid; grid-template-columns: 1.35fr 0.8fr 0.8fr 0.8fr 1.15fr; margin-bottom: 20px; border: 1px solid var(--line); border-radius: 4px; background: rgba(251, 248, 240, 0.72); overflow: hidden; }
.crm-stat { display: flex; flex-direction: column; gap: 2px; padding: 17px 19px; border-left: 1px solid var(--line-soft); }
.crm-stat:first-child { border-left: 0; }
.crm-stat.main { background: var(--forest); color: var(--paper); }
.crm-stat.main .micro-label { color: rgba(245, 241, 231, 0.45); }
.crm-stat.main b { color: var(--paper); }
.crm-stat.main p { color: rgba(245, 241, 231, 0.45); }
.crm-stat > span:not(.micro-label) { color: var(--muted); font-size: 12px; }
.crm-stat b { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.1; letter-spacing: -0.03em; }
.crm-stat small { color: var(--muted-light); font-size: 12px; }
.crm-stat p { color: var(--muted); font-size: 12px; }
.crm-spring { background: rgba(236, 230, 216, 0.4); }
.crm-spring b { font-family: var(--serif); font-size: 31px; }
.crm-spring b small { font-family: var(--sans); font-size: 12px; color: var(--muted); margin-left: 2px; }
.crm-spring p { max-width: 200px; }
.crm-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.crm-type-tabs { display: flex; gap: 3px; flex-wrap: wrap; }
.crm-type-tabs button { height: 29px; padding: 0 10px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; }
.crm-type-tabs button:hover { color: var(--ink); background: rgba(22, 35, 27, 0.035); }
.crm-type-tabs button.is-active { border-color: var(--line); background: rgba(251, 248, 240, 0.8); color: var(--ink); }
.crm-type-tabs em { margin-left: 3px; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.crm-board { display: grid; grid-template-columns: repeat(5, minmax(205px, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: 4px; background: var(--line-soft); overflow-x: auto; margin-bottom: 17px; }
.crm-column { background: rgba(236, 230, 216, 0.36); min-width: 0; display: flex; flex-direction: column; }
.crm-column-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 11px 12px 8px; border-bottom: 1px solid var(--line-soft); }
.crm-column-head > span { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.crm-column-head em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted-light); }
.crm-column-head b { font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--muted); }
.crm-column-body { display: flex; flex-direction: column; gap: 7px; padding: 7px; flex: 1; min-height: 170px; }
.crm-card { padding: 10px 11px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-2); cursor: pointer; transition: transform 0.22s var(--ease), border-color 0.2s, box-shadow 0.2s; }
.crm-card:hover { transform: translateY(-2px); border-color: rgba(22, 35, 27, 0.27); box-shadow: 0 9px 22px rgba(22, 35, 27, 0.07); }
.crm-top { display: flex; align-items: center; justify-content: space-between; gap: 5px; }
.prob { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.crm-card h3 { margin-top: 7px; font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: -0.02em; }
.crm-amount { margin-top: 2px; font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--forest); }
.crm-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 7px; }
.crm-tags span { padding: 2px 4px; background: rgba(22, 35, 27, 0.045); color: var(--muted); font-size: 12px; }
.crm-contact { display: flex; align-items: center; gap: 3px; margin-top: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-foot { display: flex; align-items: center; justify-content: space-between; gap: 5px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line-soft); }
.crm-owner { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; }
.crm-follow { display: flex; align-items: center; gap: 2px; color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.crm-follow.is-late { color: var(--red); }
.crm-lower { display: grid; grid-template-columns: 1.1fr 1fr 0.9fr; gap: 16px; }
.calendar-list { display: flex; flex-direction: column; }
.calendar-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line-soft); border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; width: 100%; }
.calendar-row:first-child { border-top: 0; padding-top: 1px; }
.calendar-row:hover .calendar-copy b { color: var(--amber); }
.calendar-date { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 34px; border: 1px solid var(--line); }
.calendar-date b { font-family: var(--serif); font-size: 16px; font-weight: 600; line-height: 1; }
.calendar-date small { color: var(--muted); font-size: 12px; margin-top: 1px; }
.calendar-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.calendar-copy b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.calendar-copy small { color: var(--muted); font-size: 12px; }
.calendar-amount { font-family: var(--mono); font-size: 12px; color: var(--forest); }
.calendar-row > svg { color: var(--muted-light); }
.qual-list { display: flex; flex-direction: column; }
.qual-list > div { display: flex; align-items: center; gap: 6px; padding: 7px 0; border-top: 1px solid var(--line-soft); }
.qual-list > div:first-child { border-top: 0; padding-top: 1px; }
.qual-list span { display: flex; }
.qual-list b { font-size: 12px; font-weight: 600; }
.qual-list small { margin-left: auto; color: var(--muted); font-size: 12px; }
.qual-list .is-ok span { color: var(--moss); }
.qual-list .is-warn span { color: var(--amber); }
.qual-list .is-warn small { color: var(--amber); }
.crm-ai-card { display: flex; flex-direction: column; background: var(--forest); color: var(--paper); }
.crm-ai-card h3 { margin-top: 9px; font-family: var(--serif); font-weight: 600; font-size: 23px; line-height: 1.3; letter-spacing: -0.025em; }
.crm-ai-card p { margin-top: 9px; color: rgba(245, 241, 231, 0.5); font-size: 12px; line-height: 1.7; }
.crm-ai-card .btn { margin-top: auto; align-self: flex-start; }
.crm-ai-card .micro-label { color: rgba(245, 241, 231, 0.4); }
.crm-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.crm-detail-head h2 { margin-top: 7px; font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.crm-detail-head p { display: flex; align-items: center; gap: 4px; margin-top: 3px; color: var(--muted); font-size: 12px; }
.crm-detail-amount { text-align: right; flex: 0 0 auto; }
.crm-detail-amount b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; }
.crm-detail-amount span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.crm-stage-track { display: flex; align-items: flex-start; margin: 17px 0 1px; }
.crm-stage-track span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; color: var(--muted-light); font-size: 12px; text-align: center; }
.crm-stage-track span::before { content: ""; position: absolute; top: 9px; left: 50%; width: 100%; height: 1px; background: var(--line); }
.crm-stage-track span:last-child::before { display: none; }
.crm-stage-track i { position: relative; z-index: 1; display: grid; place-items: center; width: 19px; height: 19px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-2); font-family: var(--mono); font-size: 12px; font-style: normal; }
.crm-stage-track .is-passed { color: var(--moss); }
.crm-stage-track .is-passed i { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.crm-stage-track .is-current { color: var(--ink); }
.crm-stage-track .is-current i { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(181, 120, 60, 0.12); }

/* =========================================================
   ORDERS
   ========================================================= */

.order-stats { display: grid; grid-template-columns: 1.55fr repeat(3, 1fr); margin-bottom: 17px; border: 1px solid var(--line); border-radius: 4px; background: rgba(251, 248, 240, 0.72); overflow: hidden; }
.order-stat { display: flex; flex-direction: column; gap: 2px; padding: 17px 19px; border-left: 1px solid var(--line-soft); }
.order-stat:first-child { border-left: 0; }
.order-stat.main { background: var(--forest); color: var(--paper); }
.order-stat.main .micro-label { color: rgba(245, 241, 231, 0.42); }
.order-stat.main b { color: var(--paper); }
.order-stat.main p { color: rgba(245, 241, 231, 0.43); }
.order-stat > span:not(.micro-label) { color: var(--muted); font-size: 12px; }
.order-stat b { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.order-stat small { color: var(--muted-light); font-size: 12px; }
.order-stat p { color: var(--muted); font-size: 12px; }
.exception-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 17px; padding: 12px 15px; border: 1px solid rgba(158, 61, 47, 0.18); border-left: 2px solid var(--red); background: rgba(158, 61, 47, 0.055); }
.exception-icon { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: rgba(158, 61, 47, 0.1); color: var(--red); flex: 0 0 auto; }
.exception-banner > div { flex: 1; }
.exception-banner b { font-size: 12px; font-weight: 500; }
.exception-banner p { margin-top: 1px; color: var(--muted); font-size: 12px; }
.order-table-panel { padding: 0; overflow: hidden; }
.order-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.order-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.order-tabs button { height: 28px; padding: 0 8px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; }
.order-tabs button:hover { color: var(--ink); background: rgba(22, 35, 27, 0.04); }
.order-tabs button.is-active { background: var(--ink); color: var(--paper); }
.order-tabs em { margin-left: 3px; font-style: normal; font-family: var(--mono); font-size: 12px; opacity: 0.65; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 9px 15px; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; white-space: nowrap; background: rgba(236, 230, 216, 0.25); }
.data-table td { padding: 12px 15px; border-bottom: 1px solid var(--line-soft); font-size: 12px; vertical-align: middle; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td small { display: block; margin-top: 2px; color: var(--muted-light); font-size: 12px; }
.data-table td > b { font-weight: 500; }
.order-row { cursor: pointer; transition: background 0.18s; }
.order-row:hover { background: rgba(22, 35, 27, 0.028); }
.order-no { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; }
.order-customer { font-size: 12px; }
.row-action { color: var(--muted-light); width: 30px; }
.table-wrap { overflow-x: auto; }
.table-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-size: 12px; }
.table-foot span { display: flex; align-items: center; gap: 4px; }
.order-lower { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 17px; }
.rhythm-timeline { display: flex; flex-direction: column; }
.rhythm-timeline > div { position: relative; display: grid; grid-template-columns: 48px 1fr auto; gap: 7px; align-items: baseline; padding: 8px 0 8px 15px; border-left: 1px solid var(--line); }
.rhythm-timeline > div::before { content: ""; position: absolute; left: -3px; top: 14px; width: 5px; height: 5px; border-radius: 50%; background: var(--muted-light); }
.rhythm-timeline > div.is-done::before { background: var(--moss); }
.rhythm-timeline > div.is-current::before { background: var(--amber); box-shadow: 0 0 0 3px rgba(181, 120, 60, 0.1); }
.rhythm-timeline span { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.rhythm-timeline b { font-size: 12px; font-weight: 500; }
.rhythm-timeline small { color: var(--muted); font-size: 12px; text-align: right; }
.after-sales-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: 10px; border: 1px solid var(--line-soft); }
.after-sales-grid > div { padding: 10px; border-left: 1px solid var(--line-soft); }
.after-sales-grid > div:first-child { border-left: 0; }
.after-sales-grid b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 600; line-height: 1; }
.after-sales-grid span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.order-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.order-detail-head h2 { margin-top: 5px; font-family: var(--mono); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.order-detail-head p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.order-detail-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.order-detail-amount b { font-family: var(--serif); font-size: 27px; font-weight: 600; }
.order-flow { display: flex; align-items: flex-start; }
.flow-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1; color: var(--muted-light); font-size: 12px; text-align: center; }
.flow-step::before { content: ""; position: absolute; top: 8px; left: 50%; width: 100%; height: 1px; background: var(--line); }
.flow-step:last-child::before { display: none; }
.flow-step > span { position: relative; z-index: 1; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper-2); font-family: var(--mono); font-size: 12px; }
.flow-step b { font-weight: 600; }
.flow-step.is-done { color: var(--moss); }
.flow-step.is-done > span { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.flow-step.is-current { color: var(--ink); }
.flow-step.is-current > span { border-color: var(--amber); }

/* =========================================================
   CONTENT
   ========================================================= */

.editorial-hero { display: grid; grid-template-columns: 1.4fr 0.8fr; margin-bottom: 18px; border-radius: 5px; overflow: hidden; }
.editorial-quote { padding: 27px 29px; background: var(--forest); color: var(--paper); }
.editorial-quote blockquote { margin-top: 12px; font-family: var(--serif); font-size: 32px; line-height: 1.4; letter-spacing: -0.035em; }
.editorial-quote > p { margin-top: 11px; max-width: 530px; color: rgba(245, 241, 231, 0.5); font-size: 12px; line-height: 1.8; }
.voice-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 17px; }
.voice-tags span { padding: 4px 7px; border: 1px solid rgba(245, 241, 231, 0.15); color: rgba(245, 241, 231, 0.5); font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; }
.editorial-stats { display: flex; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-left: 0; background: rgba(251, 248, 240, 0.72); }
.editorial-stats > div { padding: 13px 24px; border-top: 1px solid var(--line-soft); }
.editorial-stats > div:first-child { border-top: 0; }
.editorial-stats b { display: block; margin-top: 3px; font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.editorial-stats small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.content-calendar-panel { padding-bottom: 16px; }
.calendar-nav { display: flex; align-items: center; gap: 5px; color: var(--muted); font-family: var(--mono); font-size: 12px; }
.calendar-nav .icon-btn { width: 24px; height: 24px; }
.content-calendar { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.calendar-day { min-width: 0; background: rgba(251, 248, 240, 0.55); border-left: 1px solid var(--line-soft); }
.calendar-day:first-child { border-left: 0; }
.calendar-day.is-today { background: rgba(236, 230, 216, 0.45); }
.calendar-day > header { display: flex; align-items: baseline; gap: 6px; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
.calendar-day > header span { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.calendar-day > header b { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.calendar-day > header em { margin-left: auto; font-style: normal; color: var(--amber); font-size: 12px; }
.calendar-day-body { display: flex; flex-direction: column; gap: 5px; padding: 7px; min-height: 134px; }
.calendar-empty { display: block; padding-top: 8px; text-align: center; color: var(--muted-light); font-size: 12px; }
.calendar-content { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; padding: 7px 7px 6px; border: 1px solid var(--line-soft); border-radius: 2px; background: var(--paper-2); text-align: left; transition: border-color 0.2s, transform 0.2s; }
.calendar-content:hover { border-color: rgba(22, 35, 27, 0.26); transform: translateY(-1px); }
.calendar-content .cc-channel { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; }
.calendar-content b { font-size: 12px; font-weight: 500; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cc-status { font-size: 12px; color: var(--muted-light); }
.cc-status.status-published { color: var(--moss); }
.cc-status.status-review { color: var(--amber); }
.cc-status.status-scheduled { color: var(--blue); }
.content-lower { display: grid; grid-template-columns: 1.5fr 0.8fr 0.8fr; gap: 16px; margin-top: 17px; }
.content-list { display: flex; flex-direction: column; }
.content-row { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line-soft); border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; width: 100%; }
.content-row:first-child { border-top: 0; padding-top: 1px; }
.content-row:hover .content-row-copy b { color: var(--amber); }
.content-tone { display: grid; place-items: center; flex: 0 0 auto; width: 30px; height: 34px; color: rgba(22, 35, 27, 0.5); }
.content-row-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.content-row-copy b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s; }
.content-row-copy small { color: var(--muted); font-size: 12px; }
.content-row-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex: 0 0 auto; padding: 0 5px; }
.content-row-stat b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.content-row-stat small { color: var(--muted-light); font-size: 12px; }
.content-row > svg { color: var(--muted-light); }
.tone-honey { background: #ead6b9; }
.tone-grain { background: #e7dfcd; }
.tone-fish { background: #d7e2df; }
.tone-ginseng { background: #e2d2c2; }
.tone-brand { background: #dbe1d5; }
.tone-gift { background: #e4dbc9; }
.campaign-card { display: flex; flex-direction: column; background: var(--forest); color: var(--paper); }
.campaign-card h3 { margin-top: 10px; font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.3; letter-spacing: -0.03em; }
.campaign-card > p { margin-top: 9px; color: rgba(245, 241, 231, 0.5); font-size: 12px; line-height: 1.7; }
.campaign-progress { margin-top: auto; padding-top: 15px; }
.campaign-progress > span { display: block; margin-bottom: 5px; color: rgba(245, 241, 231, 0.4); font-family: var(--mono); font-size: 12px; }
.campaign-progress .progress { background: rgba(245, 241, 231, 0.13); }
.campaign-progress .progress i { background: var(--amber-2); }
.campaign-card .btn { margin-top: 13px; align-self: flex-start; }
.asset-list { display: flex; flex-direction: column; }
.asset-list button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; color: var(--moss); }
.asset-list button:first-child { border-top: 0; padding-top: 1px; }
.asset-list button:hover b { color: var(--amber); }
.asset-list button > span { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.asset-list b { color: var(--ink); font-size: 12px; font-weight: 500; transition: color 0.2s; }
.asset-list small { color: var(--muted); font-size: 12px; }
.asset-list button > svg:last-child { color: var(--muted-light); }
.content-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.content-detail-head h2 { margin-top: 7px; font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1.3; letter-spacing: -0.03em; }
.content-detail-head p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.content-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.content-checklist > div { display: grid; grid-template-columns: 17px 1fr; gap: 1px 6px; padding: 9px; border: 1px solid var(--line-soft); opacity: 0.6; }
.content-checklist > div.is-done { opacity: 1; }
.content-checklist span { grid-row: span 2; display: grid; place-items: center; width: 17px; height: 17px; border: 1px solid var(--line); border-radius: 50%; color: transparent; }
.content-checklist .is-done span { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.content-checklist b { font-size: 12px; font-weight: 500; }
.content-checklist small { color: var(--muted); font-size: 12px; }
.clean-list { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.clean-list li { position: relative; padding-left: 10px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.clean-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; border-radius: 50%; background: var(--amber); }

/* =========================================================
   KNOWLEDGE
   ========================================================= */

.knowledge-hero { display: grid; grid-template-columns: 1.1fr 0.95fr; gap: 30px; align-items: end; margin-bottom: 18px; padding: 28px 30px; border-radius: 5px; background: var(--forest); color: var(--paper); }
.knowledge-hero-copy h2 { margin-top: 10px; font-family: var(--serif); font-weight: 600; font-size: 33px; line-height: 1.35; letter-spacing: -0.035em; }
.knowledge-hero-copy p { margin-top: 9px; max-width: 460px; color: rgba(245, 241, 231, 0.46); font-size: 12px; line-height: 1.75; }
.knowledge-hero-search > label { display: flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px; border: 1px solid rgba(245, 241, 231, 0.18); background: rgba(245, 241, 231, 0.06); color: rgba(245, 241, 231, 0.55); }
.knowledge-hero-search input { flex: 1; width: 100%; border: 0; outline: 0; background: transparent; color: var(--paper); font-size: 13px; }
.knowledge-hero-search input::placeholder { color: rgba(245, 241, 231, 0.35); }
.knowledge-hero-search kbd { background: rgba(245, 241, 231, 0.06); border-color: rgba(245, 241, 231, 0.15); color: rgba(245, 241, 231, 0.45); }
.knowledge-hero-hint { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: rgba(245, 241, 231, 0.32); font-size: 12px; }
.knowledge-hero-stats { grid-column: span 2; display: flex; gap: 32px; padding-top: 15px; border-top: 1px solid rgba(245, 241, 231, 0.12); }
.knowledge-hero-stats > div { display: flex; align-items: baseline; gap: 6px; }
.knowledge-hero-stats b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.knowledge-hero-stats span { color: rgba(245, 241, 231, 0.35); font-size: 12px; }
.featured-knowledge { position: relative; display: grid; grid-template-columns: 110px 1fr auto; gap: 26px; align-items: center; margin-bottom: 19px; padding: 25px 27px; border: 1px solid var(--line); border-radius: 4px; background: linear-gradient(100deg, rgba(236, 230, 216, 0.75), rgba(251, 248, 240, 0.65)); overflow: hidden; }
.featured-knowledge::before { content: "READ"; position: absolute; right: 130px; bottom: -30px; font-family: var(--serif); font-size: 110px; color: rgba(22, 35, 27, 0.035); letter-spacing: 0.06em; pointer-events: none; }
.featured-label { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; }
.featured-label i { width: 26px; height: 1px; background: var(--amber); }
.featured-copy { position: relative; z-index: 1; min-width: 0; }
.featured-copy h2 { margin-top: 7px; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -0.03em; line-height: 1.3; }
.featured-copy > p { margin-top: 6px; max-width: 690px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.featured-meta { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.featured-meta i { width: 2px; height: 2px; border-radius: 50%; background: var(--muted-light); }
.featured-read { display: inline-flex; align-items: center; gap: 6px; align-self: end; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--ink); background: transparent; color: var(--ink); font-size: 12px; white-space: nowrap; }
.knowledge-cat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 1px; font-size: 12px; letter-spacing: 0.02em; }
.cat-forest { background: rgba(31, 58, 44, 0.1); color: var(--forest); }
.cat-amber { background: rgba(181, 120, 60, 0.12); color: #8c5a29; }
.cat-blue { background: rgba(79, 101, 114, 0.12); color: #435a66; }
.cat-red { background: rgba(158, 61, 47, 0.1); color: #8b352a; }
.cat-violet { background: rgba(108, 91, 109, 0.1); color: #5c4b5d; }
.cat-sage { background: rgba(82, 107, 82, 0.12); color: #4c6448; }
.knowledge-layout { display: grid; grid-template-columns: 210px 1fr; gap: 25px; align-items: start; }
.knowledge-rail { position: sticky; top: 88px; padding: 14px 0; border-top: 1px solid var(--line); }
.rail-title { display: block; padding: 0 10px 8px; color: var(--muted-light); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.rail-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 2px; background: transparent; color: var(--muted); font-size: 12px; text-align: left; }
.rail-item:hover { background: rgba(22, 35, 27, 0.035); color: var(--ink); }
.rail-item.is-active { background: rgba(251, 248, 240, 0.85); border: 1px solid var(--line); color: var(--ink); }
.rail-item > span { display: flex; align-items: center; gap: 7px; }
.rail-item em { font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--muted-light); }
.rail-divider { height: 1px; margin: 13px 0; background: var(--line-soft); }
.health-score { display: flex; align-items: baseline; gap: 6px; padding: 3px 10px 8px; }
.health-score b { font-family: var(--serif); font-size: 26px; font-weight: 600; }
.health-score b small { font-size: 12px; color: var(--muted); }
.health-score span { color: var(--muted); font-size: 12px; }
.rail-health .progress { width: calc(100% - 20px); margin: 0 10px; }
.rail-health > p { padding: 7px 10px 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.rail-note { display: flex; gap: 6px; padding: 2px 10px; color: var(--muted); }
.rail-note svg { flex: 0 0 auto; color: var(--moss); margin-top: 1px; }
.rail-note p { font-size: 12px; line-height: 1.6; }
.knowledge-toolbar { display: flex; align-items: flex-end; justify-content: space-between; padding-bottom: 11px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.knowledge-toolbar h2 { margin-top: 3px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.025em; }
.knowledge-count { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.knowledge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.knowledge-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 194px; padding: 17px 18px 14px; border: 1px solid var(--line); border-radius: 3px; background: rgba(251, 248, 240, 0.65); text-align: left; cursor: pointer; transition: transform 0.24s var(--ease), border-color 0.2s, box-shadow 0.2s; }
.knowledge-card:hover { transform: translateY(-3px); border-color: rgba(22, 35, 27, 0.26); box-shadow: 0 14px 30px rgba(22, 35, 27, 0.07); }
.knowledge-card-top { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.knowledge-version { color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.knowledge-card h3 { margin-top: 12px; font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.4; letter-spacing: -0.025em; }
.knowledge-card > p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.knowledge-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 9px; }
.knowledge-tags span { padding: 2px 4px; border: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.knowledge-card-foot { display: flex; align-items: center; gap: 9px; width: 100%; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-size: 12px; }
.knowledge-card-foot span:first-child { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.knowledge-card-foot span:nth-child(2) { display: flex; align-items: center; gap: 2px; }
.knowledge-empty { padding: 40px; text-align: center; color: var(--muted); font-size: 12px; }
.knowledge-empty svg { margin: 0 auto 7px; }
.knowledge-detail-page { max-width: 1240px; margin: 0 auto; }
.article-topbar { display: flex; align-items: center; gap: 17px; padding-bottom: 17px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.back-link { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.back-link:hover { color: var(--ink); }
.article-crumb { flex: 1; color: var(--muted-light); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.article-crumb i { margin: 0 4px; font-style: normal; }
.article-actions { display: flex; align-items: center; gap: 7px; }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 44px; align-items: start; }
.article-main { min-width: 0; }
.article-head { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.article-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.article-status { color: var(--muted); font-family: var(--mono); font-size: 12px; }
.article-head h1 { margin-top: 17px; font-family: var(--serif); font-weight: 600; font-size: clamp(33px, 3.2vw, 45px); line-height: 1.25; letter-spacing: -0.04em; }
.article-summary { margin-top: 12px; max-width: 760px; color: var(--muted); font-family: var(--serif); font-size: 16px; line-height: 1.8; }
.article-byline { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.byline-avatar { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--serif); font-size: 14px; color: var(--moss); }
.article-byline > span:nth-child(2) { display: flex; flex-direction: column; gap: 1px; }
.article-byline b { font-size: 12px; font-weight: 500; }
.article-byline small { color: var(--muted); font-size: 12px; }
.article-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; }
.article-tags span { padding: 3px 6px; background: rgba(22, 35, 27, 0.045); color: var(--muted); font-size: 12px; }
.article-body { padding: 27px 0 8px; max-width: 800px; }
.article-body h3 { margin: 30px 0 11px; font-family: var(--serif); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; line-height: 1.4; }
.article-body h3:first-child { margin-top: 0; }
.article-body h4 { margin: 22px 0 8px; font-family: var(--serif); font-weight: 600; font-size: 18px; }
.article-body p { margin: 9px 0; color: #3c473d; font-family: var(--serif); font-size: 15px; line-height: 2; }
.article-body ul, .article-body ol { margin: 10px 0 14px; padding-left: 20px; }
.article-body li { margin: 5px 0; color: #3c473d; font-family: var(--serif); font-size: 14px; line-height: 1.9; }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body blockquote { margin: 18px 0; padding: 12px 17px; border-left: 2px solid var(--amber); background: rgba(181, 120, 60, 0.055); color: var(--muted); font-family: var(--serif); font-size: 14px; line-height: 1.8; }
.article-body hr { margin: 25px 0; border: 0; border-top: 1px solid var(--line); }
.article-body code { padding: 1px 4px; background: rgba(22, 35, 27, 0.06); font-family: var(--mono); font-size: 12px; }
.check-box { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 5px; border: 1px solid var(--line); font-size: 12px; }
.check-box.is-checked { background: var(--moss); border-color: var(--moss); color: var(--paper); }
.md-table { margin: 17px 0 21px; border: 1px solid var(--line); }
.md-table th { padding: 8px 11px; background: rgba(236, 230, 216, 0.5); color: var(--muted); font-family: var(--mono); font-size: 12px; text-align: left; }
.md-table td { padding: 8px 11px; border-top: 1px solid var(--line-soft); font-family: var(--serif); font-size: 12px; }
.article-source { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-top: 26px; }
.article-source > span { grid-column: span 4; padding: 7px 11px; border-bottom: 1px solid var(--line); background: rgba(236, 230, 216, 0.3); }
.article-source > div { padding: 9px 11px; border-left: 1px solid var(--line-soft); }
.article-source > div:first-of-type { border-left: 0; }
.article-source span { display: block; color: var(--muted); font-size: 12px; }
.article-source b { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.article-review { display: flex; align-items: center; gap: 17px; margin-top: 18px; padding: 14px 16px; border: 1px solid rgba(181, 120, 60, 0.24); background: rgba(181, 120, 60, 0.06); }
.article-review > div { flex: 1; display: grid; grid-template-columns: 17px 1fr; gap: 1px 7px; }
.article-review svg { grid-row: span 2; color: var(--amber); }
.article-review b { font-size: 12px; }
.article-review p { color: var(--muted); font-size: 12px; }
.article-cta { display: flex; align-items: center; gap: 12px; margin-top: 25px; padding: 16px 18px; background: var(--forest); color: var(--paper); }
.article-cta > span { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid rgba(245, 241, 231, 0.2); border-radius: 50%; color: var(--amber-2); flex: 0 0 auto; }
.article-cta > div { flex: 1; }
.article-cta b { font-size: 12px; font-weight: 600; }
.article-cta p { margin-top: 2px; color: rgba(245, 241, 231, 0.42); font-size: 12px; }
.article-rail { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 18px; padding-top: 3px; }
.toc-box { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.toc-box .micro-label { margin-bottom: 6px; }
.toc-link { padding: 4px 0 4px 9px; border-left: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.5; transition: color 0.2s, border-color 0.2s; }
.toc-link:hover { color: var(--ink); border-color: var(--amber); }
.article-meta-box { display: flex; flex-direction: column; gap: 7px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.article-meta-box > div { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.article-meta-box span { color: var(--muted); }
.article-meta-box b { font-weight: 500; }
.related-box { display: flex; flex-direction: column; gap: 4px; }
.related-box button { display: flex; align-items: center; gap: 7px; padding: 8px 0; border: 0; border-top: 1px solid var(--line-soft); background: transparent; text-align: left; }
.related-box button:first-of-type { border-top: 0; }
.related-box button > span { display: flex; flex-direction: column; gap: 1px; flex: 1; }
.related-box b { font-size: 12px; font-weight: 500; line-height: 1.4; }
.related-box small { color: var(--muted); font-size: 12px; }
.related-box svg { color: var(--muted-light); }

/* =========================================================
   INSIGHTS
   ========================================================= */

.insight-kpis { display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); margin-bottom: 18px; border: 1px solid var(--line); border-radius: 4px; background: rgba(251, 248, 240, 0.72); overflow: hidden; }
.insight-kpi { display: flex; flex-direction: column; gap: 2px; padding: 17px 19px; border-left: 1px solid var(--line-soft); }
.insight-kpi:first-child { border-left: 0; }
.insight-kpi.main { background: var(--forest); color: var(--paper); }
.insight-kpi.main .micro-label { color: rgba(245, 241, 231, 0.4); }
.insight-kpi.main > b { color: var(--paper); }
.insight-kpi.main > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.insight-kpi.main > div span { color: rgba(245, 241, 231, 0.38); font-size: 12px; }
.insight-kpi.main .delta.up { color: #b9d0ad; }
.insight-kpi > span:not(.micro-label) { color: var(--muted); font-size: 12px; }
.insight-kpi > b { font-family: var(--serif); font-size: 27px; font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.insight-kpi small { color: var(--muted-light); font-size: 12px; }
.insights-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; }
.insights-grid .span-4, .insights-grid .span-8, .insights-grid .span-12 { grid-column: span 4; }
.insights-grid .span-8 { grid-column: span 8; }
.insights-grid .span-12 { grid-column: span 12; }
.insights-grid .area-chart { height: 260px; }
.chart-legend-row { display: flex; align-items: center; gap: 17px; padding-top: 9px; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; }
.chart-legend-row span { display: flex; align-items: center; gap: 5px; }
.chart-legend-row i { width: 13px; height: 2px; }
.insight-donut { display: flex; justify-content: center; padding: 3px 0 11px; }
.compact-legend { display: flex; flex-direction: column; gap: 5px; padding-top: 10px; border-top: 1px solid var(--line-soft); }
.compact-legend > div { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.compact-legend span { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact-legend i { width: 4px; height: 4px; border-radius: 50%; flex: 0 0 auto; }
.compact-legend b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.efficiency-list { display: flex; flex-direction: column; gap: 8px; }
.efficiency-row { display: grid; grid-template-columns: 135px 1fr 34px; align-items: center; gap: 9px; }
.efficiency-row > div:first-child { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.efficiency-row b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.efficiency-row span { color: var(--muted-light); font-size: 12px; }
.eff-bar { height: 4px; background: rgba(22, 35, 27, 0.07); border-radius: 99px; overflow: hidden; }
.eff-bar i { display: block; height: 100%; background: var(--forest); border-radius: inherit; }
.eff-bar i.is-ahead { background: var(--moss); }
.eff-bar i.is-behind { background: var(--amber); }
.efficiency-row em { font-family: var(--mono); font-size: 12px; font-style: normal; color: var(--muted); text-align: right; }
.region-list { display: flex; flex-direction: column; gap: 7px; }
.region-row { display: grid; grid-template-columns: 74px 1fr 15px; align-items: center; gap: 8px; }
.region-row > span { display: flex; align-items: center; gap: 3px; color: var(--muted); font-size: 12px; }
.region-row svg { color: var(--amber); }
.region-track { height: 4px; background: rgba(22, 35, 27, 0.07); overflow: hidden; border-radius: 99px; }
.region-track i { display: block; height: 100%; background: var(--amber); border-radius: inherit; }
.region-row b { font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: right; }
.region-funnel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.region-funnel > div { text-align: center; }
.region-funnel span { display: block; color: var(--muted); font-size: 12px; }
.region-funnel b { display: block; margin-top: 2px; font-family: var(--serif); font-size: 16px; font-weight: 600; }
.product-performance { padding-bottom: 8px; }
.rank { color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.mini-trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; }
.mini-trend.up { color: var(--moss); }
.conclusion-section { display: grid; grid-template-columns: 0.85fr repeat(3, 1fr); margin-top: 18px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: rgba(251, 248, 240, 0.72); }
.conclusion-lead { padding: 25px 24px; background: var(--forest); color: var(--paper); }
.conclusion-lead h2 { margin-top: 9px; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -0.03em; }
.conclusion-lead p { margin-top: 7px; color: rgba(245, 241, 231, 0.42); font-size: 12px; line-height: 1.6; }
.conclusion-card { padding: 22px 21px; border-left: 1px solid var(--line-soft); }
.conclusion-card > span { color: var(--amber); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.conclusion-card h3 { margin-top: 9px; font-family: var(--serif); font-weight: 600; font-size: 17px; line-height: 1.5; letter-spacing: -0.02em; }
.conclusion-card p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.7; }

/* =========================================================
   SETTINGS
   ========================================================= */

.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 19px; align-items: start; }
.settings-main { display: flex; flex-direction: column; gap: 17px; }
.profile-card { padding: 24px; }
.profile-head { display: flex; align-items: center; gap: 17px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.profile-head > div { flex: 1; min-width: 0; }
.profile-head h2 { margin-top: 4px; font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.profile-head p { margin-top: 2px; color: var(--muted); font-size: 12px; }
.role-badge { padding: 5px 8px; border: 1px solid var(--line); color: var(--muted); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); margin-top: 16px; }
.profile-grid > div { padding: 9px 12px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.profile-grid span { display: block; color: var(--muted); font-size: 12px; }
.profile-grid b { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; }
.profile-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 11px; margin-top: 15px; }
.permission-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.permission-chips span { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; background: rgba(82, 107, 82, 0.075); color: #4b6349; font-size: 12px; }
.security-list { display: flex; flex-direction: column; }
.security-list > div { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line-soft); }
.security-list > div:first-child { border-top: 0; padding-top: 1px; }
.sec-icon { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--line-soft); border-radius: 50%; color: var(--moss); flex: 0 0 auto; }
.security-list > div > div { flex: 1; }
.security-list b { display: block; font-size: 12px; font-weight: 500; }
.security-list p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.sec-state { color: var(--muted-light); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.sec-state.is-on { color: var(--moss); }
.integration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.integration-item { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line-soft); }
.integration-icon { display: grid; place-items: center; width: 29px; height: 29px; background: rgba(22, 35, 27, 0.045); color: var(--muted); flex: 0 0 auto; }
.integration-item > div { flex: 1; min-width: 0; }
.integration-item b { display: block; font-size: 12px; font-weight: 500; }
.integration-item p { color: var(--muted); font-size: 12px; line-height: 1.4; }
.integration-state { color: var(--muted-light); font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.integration-state.is-on { color: var(--moss); }
.settings-rail { display: flex; flex-direction: column; gap: 15px; }
.settings-brand { text-align: center; padding: 23px; }
.settings-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.settings-brand-lockup .brand-logo-plate { width: 56px; height: 56px; }
.settings-brand-lockup .brand-wordmark { height: 44px; }
.settings-brand h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; letter-spacing: 0.1em; }
.settings-brand > p { margin-top: 4px; color: var(--muted); font-size: 12px; }
.brand-meta { display: flex; justify-content: space-between; gap: 7px; margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.preference-card .section-head { margin-bottom: 8px; }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); color: var(--muted); font-size: 12px; cursor: pointer; }
.switch-row:first-of-type { border-top: 0; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { position: relative; width: 27px; height: 15px; border-radius: 99px; background: rgba(22, 35, 27, 0.16); transition: background 0.2s; flex: 0 0 auto; }
.switch-row i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); transition: transform 0.2s var(--ease); }
.switch-row input:checked + i { background: var(--forest); }
.switch-row input:checked + i::after { transform: translateX(12px); }
.settings-help { display: flex; flex-direction: column; align-items: flex-start; }
.settings-help h3 { margin-top: 7px; font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.4; }
.settings-help > p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.settings-help .btn { margin-top: 12px; }
.settings-help .text-link { margin-top: 11px; font-size: 12px; }
.admin-entry { display: flex; align-items: center; gap: 9px; padding: 13px; border: 1px solid var(--line); border-radius: 3px; background: rgba(251, 248, 240, 0.65); }
.admin-entry:hover { border-color: rgba(22, 35, 27, 0.28); }
.admin-entry > span { display: grid; place-items: center; width: 29px; height: 29px; background: var(--forest); color: var(--paper); }
.admin-entry > div { flex: 1; }
.admin-entry b { display: block; font-size: 12px; font-weight: 500; }
.admin-entry small { color: var(--muted); font-size: 12px; }
.admin-entry > svg { color: var(--muted-light); }
.logout-full { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 12px; }
.logout-full:hover { color: var(--red); border-color: rgba(158, 61, 47, 0.3); }

/* =========================================================
   ADMIN
   ========================================================= */

.admin-page { max-width: 1400px; margin: 0 auto; }
.admin-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 30px 31px; border-radius: 5px; background: var(--forest); color: var(--paper); margin-bottom: 0; }
.admin-hero h1 { margin-top: 13px; font-family: var(--serif); font-weight: 600; font-size: 41px; letter-spacing: -0.04em; line-height: 1.1; }
.admin-hero p { margin-top: 8px; color: rgba(245, 241, 231, 0.46); font-size: 12px; line-height: 1.7; }
.admin-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.admin-hero-side > span { display: flex; align-items: center; gap: 5px; color: rgba(245, 241, 231, 0.4); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; }
.admin-hero-side a { display: flex; align-items: center; gap: 5px; color: rgba(245, 241, 231, 0.65); font-size: 12px; border-bottom: 1px solid rgba(245, 241, 231, 0.25); padding-bottom: 2px; }
.admin-tabs { display: flex; gap: 1px; margin-bottom: 20px; border: 1px solid var(--line); border-top: 0; background: rgba(251, 248, 240, 0.55); overflow-x: auto; }
.admin-tabs button { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border: 0; border-left: 1px solid var(--line-soft); background: transparent; color: var(--muted); font-size: 12px; white-space: nowrap; }
.admin-tabs button:first-child { border-left: 0; }
.admin-tabs button:hover { color: var(--ink); background: rgba(22, 35, 27, 0.03); }
.admin-tabs button.is-active { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--amber); }
.admin-tabs em { font-style: normal; font-family: var(--mono); font-size: 12px; background: rgba(181, 120, 60, 0.14); color: var(--amber); padding: 2px 4px; }
.admin-panel { animation: fadeUp 0.35s var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.admin-panel-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.admin-panel-head h2 { margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 28px; letter-spacing: -0.03em; }
.admin-panel-head p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.6; max-width: 650px; }
.admin-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-bottom: 17px; border: 1px solid var(--line); background: var(--line-soft); }
.admin-stats > div { padding: 13px 16px; background: rgba(251, 248, 240, 0.8); }
.admin-stats span { color: var(--muted); font-size: 12px; }
.admin-stats b { display: block; margin-top: 2px; font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1; }
.admin-stats small { display: block; margin-top: 3px; color: var(--muted-light); font-size: 12px; }
.admin-table-wrap { border: 1px solid var(--line); border-radius: 3px; overflow: auto; background: rgba(251, 248, 240, 0.6); }
.admin-user-table th { background: rgba(236, 230, 216, 0.35); }
.admin-user-cell { display: flex; align-items: center; gap: 8px; }
.admin-user-cell > div { display: flex; flex-direction: column; gap: 1px; }
.admin-user-cell b { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
.admin-user-cell b em { font-style: normal; padding: 1px 3px; background: rgba(181, 120, 60, 0.12); color: var(--amber); font-size: 12px; }
.admin-user-cell small { color: var(--muted); font-size: 12px; }
.cell-strong { font-size: 12px; font-weight: 500; }
.cell-muted { color: var(--muted); font-size: 12px; white-space: nowrap; }
.role-select { max-width: 140px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 1px; background: var(--paper-2); font-size: 12px; }
.role-select:disabled { opacity: 0.65; }
.admin-note { display: flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.admin-note svg { color: var(--moss); flex: 0 0 auto; }
.role-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 17px; }
.role-card { position: relative; padding: 13px 14px; border: 1px solid var(--line); background: rgba(251, 248, 240, 0.65); }
.role-card-dot { position: absolute; top: 13px; right: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--moss); }
.role-card b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.role-card small { display: block; margin-top: 1px; color: var(--muted); font-size: 12px; }
.role-card p { margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.role-card em { display: block; margin-top: 6px; color: var(--amber); font-size: 12px; font-style: normal; line-height: 1.5; }
.matrix-wrap { border: 1px solid var(--line); overflow-x: auto; }
.permission-matrix { min-width: 720px; }
.permission-matrix th { padding: 9px 10px; border-bottom: 1px solid var(--line); background: rgba(236, 230, 216, 0.35); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 500; text-align: center; }
.permission-matrix th:first-child { text-align: left; min-width: 190px; }
.permission-matrix td { padding: 7px 10px; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); text-align: center; }
.permission-matrix td:first-child { text-align: left; border-left: 0; }
.permission-matrix td b { display: block; font-size: 12px; font-weight: 600; }
.permission-matrix td small { display: block; color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.matrix-group td { padding: 6px 10px; background: rgba(236, 230, 216, 0.28); color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.matrix-check { display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--muted-light); font-size: 12px; border-radius: 50%; }
.matrix-check.is-on { background: rgba(82, 107, 82, 0.11); color: var(--moss); }
.matrix-legend { display: flex; align-items: center; gap: 14px; margin-top: 10px; color: var(--muted); font-size: 12px; flex-wrap: wrap; }
.matrix-legend span { display: flex; align-items: center; gap: 4px; }
.matrix-legend i { width: 7px; height: 7px; border-radius: 50%; background: rgba(22, 35, 27, 0.08); }
.matrix-legend i.is-on { background: var(--moss); }
.review-list { border: 1px solid var(--line); background: rgba(251, 248, 240, 0.6); }
.review-row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line-soft); }
.review-row:first-child { border-top: 0; }
.review-icon { display: grid; place-items: center; width: 30px; height: 30px; background: rgba(22, 35, 27, 0.045); color: var(--moss); flex: 0 0 auto; }
.review-row > div { flex: 1; min-width: 0; }
.review-row b { display: block; font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-row small { color: var(--muted); font-size: 12px; }
.admin-empty { padding: 38px; text-align: center; color: var(--muted); }
.admin-empty svg { margin: 0 auto 7px; color: var(--moss); }
.admin-empty b { display: block; font-family: var(--serif); font-size: 18px; font-weight: 600; color: var(--ink); }
.admin-empty p { margin-top: 2px; font-size: 12px; }
.governance-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 15px; }
.governance-grid > div { padding: 13px 14px; border: 1px solid var(--line); background: rgba(251, 248, 240, 0.55); }
.governance-grid span { display: block; color: var(--moss); }
.governance-grid b { display: block; margin-top: 7px; font-size: 12px; font-weight: 500; }
.governance-grid p { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.audit-filter { display: flex; gap: 3px; margin-bottom: 11px; flex-wrap: wrap; }
.audit-filter button { height: 27px; padding: 0 9px; border: 1px solid transparent; border-radius: 1px; background: transparent; color: var(--muted); font-size: 12px; }
.audit-filter button:hover { background: rgba(22, 35, 27, 0.04); color: var(--ink); }
.audit-filter button.is-active { border-color: var(--line); background: var(--paper-2); color: var(--ink); }
.audit-table td { font-size: 12px; }
.audit-detail { max-width: 250px; color: var(--muted); }
.audit-action { display: inline-flex; padding: 2px 5px; font-size: 12px; }
.audit-action.tone-forest { background: rgba(31, 58, 44, 0.08); color: var(--forest); }
.audit-action.tone-amber { background: rgba(181, 120, 60, 0.1); color: #8c5a29; }
.audit-action.tone-violet { background: rgba(108, 91, 109, 0.1); color: #5c4b5d; }
.audit-action.tone-neutral { background: rgba(22, 35, 27, 0.045); color: var(--muted); }
.system-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 10px; }
.system-card { padding: 17px; border: 1px solid var(--line); background: rgba(251, 248, 240, 0.62); }
.ai-system { background: var(--forest); color: var(--paper); border-color: var(--forest); }
.ai-system .micro-label { color: rgba(245, 241, 231, 0.38); }
.system-icon { display: grid; place-items: center; width: 31px; height: 31px; margin-bottom: 10px; border: 1px solid var(--line); color: var(--moss); }
.ai-system .system-icon { border-color: rgba(245, 241, 231, 0.2); color: var(--amber-2); }
.system-card h3 { margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.35; }
.ai-system h3 { color: var(--paper); }
.system-card > p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.6; }
.ai-system > p { color: rgba(245, 241, 231, 0.42); }
.system-rows { display: flex; flex-direction: column; margin-top: 11px; border-top: 1px solid rgba(245, 241, 231, 0.12); }
.system-rows > div { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(245, 241, 231, 0.08); }
.system-rows span { color: rgba(245, 241, 231, 0.38); font-size: 12px; }
.system-rows b { font-size: 12px; font-weight: 600; color: rgba(245, 241, 231, 0.72); text-align: right; }
.system-hint { display: flex; align-items: flex-start; gap: 4px; margin-top: 9px !important; color: rgba(245, 241, 231, 0.32) !important; font-size: 12px !important; }
.system-hint code { font-family: var(--mono); color: var(--amber-2); }
.db-counts { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px; margin-top: 11px; }
.db-counts > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px solid var(--line-soft); }
.db-counts span { color: var(--muted); font-size: 12px; }
.db-counts b { font-family: var(--mono); font-size: 12px; font-weight: 500; }
.security-checks { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.security-checks li { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 12px; }
.security-checks li svg { color: var(--moss); }
.security-checks li:last-child svg { color: var(--amber); }
.system-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.system-columns .panel { padding: 18px; }
.brand-settings .section-head, .deploy-card .section-head { margin-bottom: 12px; }
.brand-settings .form-grid { grid-template-columns: 1fr 1fr; }
.brand-settings .field input { min-height: 35px; font-size: 12px; }
.brand-settings .btn { align-self: end; }
.deploy-list { display: flex; flex-direction: column; }
.deploy-list > div { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.deploy-list > div:first-child { border-top: 0; padding-top: 1px; }
.deploy-list > div > b { flex: 0 0 auto; font-family: var(--mono); font-size: 12px; color: var(--amber); }
.deploy-list span { display: flex; flex-direction: column; gap: 1px; }
.deploy-list span b { font-size: 12px; font-weight: 500; }
.deploy-list small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.temp-password { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 20px; border: 1px dashed rgba(22, 35, 27, 0.24); background: rgba(236, 230, 216, 0.35); }
.temp-password > span { color: var(--muted); font-size: 12px; }
.temp-password > b { font-family: var(--mono); font-size: 24px; letter-spacing: 0.08em; color: var(--forest); }
.temp-password .btn { margin-top: 3px; }

/* =========================================================
   AI AGENT
   ========================================================= */

.ai-fab {
  position: fixed;
  right: 23px;
  bottom: 22px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 39px;
  padding: 0 13px 0 5px;
  border: 1px solid rgba(245, 241, 231, 0.14);
  border-radius: 99px;
  background: var(--forest);
  color: var(--paper);
  box-shadow: 0 7px 22px rgba(22, 35, 27, 0.2);
  transition: transform 0.24s var(--ease), box-shadow 0.24s;
}
.ai-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 27px rgba(22, 35, 27, 0.25); }
.ai-fab > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(245, 241, 231, 0.35); border-radius: 50%; font-family: var(--serif); font-size: 13px; }
.ai-fab b { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; }
.ai-fab > svg { color: var(--amber-2); }
body.ai-open .ai-fab { transform: translateY(80px); opacity: 0; pointer-events: none; }
.ai-scrim { position: fixed; inset: 0; z-index: 90; background: rgba(14, 23, 17, 0.22); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.ai-scrim.is-open { opacity: 1; pointer-events: auto; }
.ai-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column; width: min(435px, 100vw); border-left: 1px solid rgba(22, 35, 27, 0.2); background: var(--paper-2); box-shadow: -20px 0 60px rgba(18, 29, 21, 0.16); transform: translateX(102%); transition: transform 0.46s var(--ease); }
.ai-drawer.is-open { transform: none; }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 18px; border-bottom: 1px solid var(--line); flex: 0 0 auto; background: var(--forest); color: var(--paper); }
.ai-identity { display: flex; align-items: center; gap: 10px; }
.ai-orb { position: relative; display: grid; place-items: center; width: 35px; height: 35px; border: 1px solid rgba(245, 241, 231, 0.35); border-radius: 50%; font-family: var(--serif); font-size: 16px; }
.ai-orb > i { position: absolute; right: 0; bottom: 0; width: 7px; height: 7px; border: 2px solid var(--forest); border-radius: 50%; background: #a9c89b; }
.ai-identity > div { display: flex; flex-direction: column; gap: 1px; }
.ai-identity b { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: 0.04em; }
.ai-identity span { display: flex; align-items: center; gap: 3px; color: rgba(245, 241, 231, 0.4); font-size: 12px; }
.status-dot { width: 4px; height: 4px; border-radius: 50%; background: #9fbe91; }
.ai-head-actions { display: flex; align-items: center; gap: 2px; }
.ai-head .icon-btn { color: rgba(245, 241, 231, 0.5); width: 29px; height: 29px; }
.ai-head .icon-btn:hover { color: var(--paper); background: rgba(245, 241, 231, 0.1); border-color: transparent; }
.ai-context { display: flex; align-items: center; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--line-soft); background: rgba(236, 230, 216, 0.32); color: var(--muted); font-size: 12px; flex: 0 0 auto; }
.ai-context > span:first-child { display: flex; align-items: center; gap: 4px; }
.ai-context > b { color: var(--ink); font-weight: 500; }
.ai-context-mode { margin-left: auto; color: var(--amber); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
.ai-thread { flex: 1; overflow-y: auto; padding: 20px 18px 12px; }
.ai-welcome { padding-top: 8px; }
.ai-welcome h3 { margin-top: 9px; font-family: var(--serif); font-weight: 600; font-size: 25px; line-height: 1.35; letter-spacing: -0.03em; }
.ai-welcome > p { margin-top: 9px; color: var(--muted); font-size: 12px; line-height: 1.75; }
.ai-suggestions { display: flex; flex-direction: column; gap: 6px; margin-top: 17px; }
.ai-suggest { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 2px; background: rgba(251, 248, 240, 0.65); text-align: left; font-size: 12px; transition: border-color 0.2s, background 0.2s, transform 0.2s; }
.ai-suggest:hover { border-color: rgba(22, 35, 27, 0.28); background: var(--paper-2); transform: translateX(2px); }
.ai-suggest-icon { display: grid; place-items: center; width: 25px; height: 25px; background: rgba(82, 107, 82, 0.08); color: var(--moss); flex: 0 0 auto; }
.ai-suggest > span:nth-child(2) { flex: 1; }
.ai-suggest > svg { color: var(--muted-light); }
.ai-scope { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 17px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-size: 12px; }
.ai-scope span { display: flex; align-items: center; gap: 3px; }
.ai-msg { display: flex; gap: 8px; margin-bottom: 17px; }
.ai-msg-user { justify-content: flex-end; }
.ai-bubble { max-width: 86%; padding: 9px 12px; border-radius: 8px 8px 2px 8px; background: var(--forest); color: var(--paper); font-size: 12px; line-height: 1.7; white-space: pre-wrap; }
.ai-agent-mark { display: grid; place-items: center; flex: 0 0 auto; width: 25px; height: 25px; border: 1px solid var(--line); border-radius: 50%; font-family: var(--serif); font-size: 12px; color: var(--forest); }
.ai-agent-content { min-width: 0; flex: 1; }
.ai-msg-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 5px; }
.ai-msg-meta b { font-family: var(--serif); font-size: 13px; font-weight: 600; }
.ai-msg-meta span { color: var(--muted-light); font-family: var(--mono); font-size: 12px; }
.ai-markdown { color: #3a453b; font-size: 12px; line-height: 1.85; }
.ai-markdown p { margin: 7px 0; }
.ai-markdown p:first-child { margin-top: 0; }
.ai-markdown strong { color: var(--ink); font-weight: 600; }
.ai-markdown h3, .ai-markdown h4 { margin: 13px 0 5px; font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--ink); }
.ai-markdown ul, .ai-markdown ol { margin: 5px 0; padding-left: 16px; }
.ai-markdown li { margin: 3px 0; }
.ai-markdown blockquote { margin: 7px 0; padding: 5px 8px; border-left: 2px solid var(--amber); background: rgba(181, 120, 60, 0.05); color: var(--muted); }
.ai-markdown code { padding: 0 3px; background: rgba(22, 35, 27, 0.06); font-family: var(--mono); font-size: 12px; }
.ai-markdown .md-table { margin: 8px 0; }
.ai-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ai-tools span { display: flex; align-items: center; gap: 2px; padding: 2px 4px; background: rgba(82, 107, 82, 0.07); color: var(--moss); font-family: var(--mono); font-size: 12px; }
.ai-citations { margin-top: 11px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.ai-citations-head { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.ai-citation { display: flex; align-items: center; gap: 7px; width: 100%; padding: 6px 7px; border: 1px solid var(--line-soft); border-radius: 1px; background: rgba(251, 248, 240, 0.55); margin-top: 4px; text-align: left; }
.ai-citation:hover { border-color: rgba(22, 35, 27, 0.24); }
.citation-index { display: grid; place-items: center; flex: 0 0 auto; width: 19px; height: 19px; border: 1px solid var(--line); border-radius: 50%; color: var(--amber); font-family: var(--mono); font-size: 12px; }
.citation-copy { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.citation-copy b { font-size: 12px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.citation-copy small { color: var(--muted); font-size: 12px; }
.ai-citation > svg { color: var(--muted-light); }
.ai-followups { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
.ai-followups button { display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 99px; background: transparent; color: var(--muted); font-size: 12px; }
.ai-followups button:hover { border-color: var(--amber); color: var(--amber); }
.ai-typing { align-items: center; }
.ai-typing-dots { display: flex; gap: 3px; padding: 7px 3px; }
.ai-typing-dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); animation: typing 1.1s infinite ease-in-out; }
.ai-typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.35; } 30% { transform: translateY(-3px); opacity: 1; } }
.ai-composer { flex: 0 0 auto; padding: 10px 17px 14px; border-top: 1px solid var(--line); background: rgba(251, 248, 240, 0.8); }
.ai-input-wrap { display: flex; align-items: flex-end; gap: 6px; padding: 7px 7px 7px 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper-2); transition: border-color 0.2s; }
.ai-input-wrap:focus-within { border-color: var(--forest); }
.ai-input-wrap textarea { flex: 1; width: 100%; min-height: 27px; max-height: 145px; padding: 3px 0; border: 0; outline: 0; background: transparent; font-size: 12px; line-height: 1.55; resize: none; }
.ai-input-wrap textarea::placeholder { color: #a0a396; }
.ai-send { display: grid; place-items: center; width: 29px; height: 29px; border: 0; border-radius: 50%; background: var(--forest); color: var(--paper); flex: 0 0 auto; }
.ai-send:hover { background: var(--forest-2); }
.ai-send:disabled { opacity: 0.4; }
.ai-composer-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--muted-light); font-size: 12px; }
.ai-composer-meta span:last-child { display: flex; align-items: center; gap: 2px; }
.ai-disclaimer { margin-top: 5px; color: var(--muted-light); font-size: 12px; line-height: 1.5; }

/* notification side */
.notification-panel { display: flex; flex-direction: column; }
.notification-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 2px; border-top: 1px solid var(--line-soft); border-left: 0; border-right: 0; border-bottom: 0; background: transparent; text-align: left; width: 100%; }
.notification-item:first-child { border-top: 0; padding-top: 2px; }
.notification-item:hover b { color: var(--amber); }
.notification-mark { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: rgba(22, 35, 27, 0.05); color: var(--muted); flex: 0 0 auto; }
.notification-item.tone-danger .notification-mark { background: rgba(158, 61, 47, 0.09); color: var(--red); }
.notification-item.tone-warn .notification-mark { background: rgba(181, 120, 60, 0.1); color: var(--amber); }
.notification-item > span:nth-child(2) { flex: 1; min-width: 0; }
.notification-item b { display: block; font-size: 12px; font-weight: 500; transition: color 0.2s; }
.notification-item p { margin-top: 2px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.notification-item > svg { color: var(--muted-light); margin-top: 5px; }
.notification-foot { display: flex; align-items: center; gap: 4px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted-light); font-size: 12px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1320px) {
  :root { --sidebar-w: 228px; }
  .page { padding: 29px 32px 55px; }
  .topbar { padding: 0 32px; }
  .statusbar { padding: 0; }
  .dashboard-hero { gap: 27px; padding: 30px 30px; }
  .channel-card { padding: 16px; }
  .channel-gmv b { font-size: 27px; }
  .sourcing-principles { grid-template-columns: 1fr 1.4fr; gap: 24px; }
  .principle-side { display: none; }
  .login-visual { padding: 36px 38px 30px; }
}

@media (max-width: 1180px) {
  .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid > .span-3,
  .dashboard-grid > .span-4,
  .dashboard-grid > .span-5 { grid-column: span 1; }
  .dashboard-grid > .span-8,
  .dashboard-grid > .span-12 { grid-column: span 2; }
  .dashboard-grid > .map-panel { grid-column: span 2; }
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-primary { grid-column: span 2; }
  .kpi-target { grid-column: span 1; }
  .product-summary { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr) 1px minmax(0, 1fr); gap: 14px; }
  .product-summary .divider-3 { display: none; }
  .product-summary .summary-note { display: none !important; }
  .channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .channel-overview { grid-template-columns: 1fr; }
  .channel-overview-side { border-left: 0; border-top: 1px solid rgba(245, 241, 231, 0.12); }
  .channel-overview-side > div { border-bottom: 0; border-right: 1px solid rgba(245, 241, 231, 0.1); }
  .channel-overview-side > div:nth-child(3) { grid-column: span 2; border-top: 1px solid rgba(245, 241, 231, 0.1); }
  .crm-stats { grid-template-columns: 1.4fr 1fr 1fr; }
  .crm-stat:nth-child(4) { display: none; }
  .crm-spring { grid-column: span 3; border-left: 0; border-top: 1px solid var(--line-soft); display: flex; align-items: baseline; gap: 9px; }
  .crm-spring .micro-label { width: 100%; }
  .crm-spring p { margin-left: auto; max-width: none; }
  .crm-lower { grid-template-columns: 1fr 1fr; }
  .crm-ai-card { grid-column: span 2; }
  .crm-ai-card h3 br { display: none; }
  .order-stats { grid-template-columns: 1.4fr 1fr; }
  .order-stat:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .order-stat:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .content-lower { grid-template-columns: 1.3fr 0.9fr; }
  .asset-library { grid-column: span 2; }
  .asset-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .asset-list button:nth-child(2) { border-top: 0; padding-top: 1px; }
  .settings-layout { grid-template-columns: 1fr 280px; }
  .system-grid { grid-template-columns: 1fr 1fr; }
  .system-grid .system-card:nth-child(3) { grid-column: span 2; }
  .conclusion-section { grid-template-columns: 1fr 1fr; }
  .conclusion-lead { grid-column: span 2; }
  .conclusion-card:nth-child(2) { border-left: 0; }
  .conclusion-card:nth-child(4) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .conclusion-card:nth-child(3) { border-top: 1px solid var(--line-soft); }
  .insight-kpis { grid-template-columns: 1.35fr 1fr 1fr; }
  .insight-kpi:nth-child(4), .insight-kpi:nth-child(5) { border-top: 1px solid var(--line-soft); }
  .insight-kpi:nth-child(4) { border-left: 0; }
  .login-page { grid-template-columns: minmax(0, 1.1fr) minmax(450px, 0.9fr); }
  .login-hero h1 { font-size: 54px; }
  .login-lower { grid-template-columns: 1fr; gap: 20px; }
  .login-quote { display: none; }
}

@media (max-width: 980px) {
  :root { --sidebar-w: 246px; }
  .sidebar { transform: translateX(-103%); transition: transform 0.38s var(--ease); box-shadow: 18px 0 50px rgba(0, 0, 0, 0.16); }
  .sidebar.is-open { transform: none; }
  .sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(14, 23, 17, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .sidebar-scrim.is-open { opacity: 1; pointer-events: auto; }
  .app-main { margin-left: 0; }
  .mobile-menu { display: inline-grid; }
  .topbar { height: 60px; padding: 0 21px; }
  .page { padding: 24px 22px 48px; }
  .page-head { flex-direction: column; align-items: flex-start; gap: 17px; }
  .head-actions { justify-content: flex-start; padding-bottom: 0; }
  .search-trigger { width: 35px; padding: 0; justify-content: center; }
  .search-trigger span, .search-trigger kbd { display: none; }
  .topbar-user-copy { display: none; }
  .topbar-rule { display: none; }
  .dashboard-hero { grid-template-columns: 1fr; gap: 22px; }
  .hero-brief { align-self: stretch; }
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
  .dashboard-grid > .span-3, .dashboard-grid > .span-4, .dashboard-grid > .span-5 { grid-column: span 1; }
  .dashboard-grid > .span-8, .dashboard-grid > .span-12 { grid-column: span 2; }
  .dashboard-grid > .map-panel { grid-column: span 2; }
  .tasks-panel, .signals-panel { grid-column: span 1; }
  .pipeline-panel, .product-panel, .customer-panel { grid-column: span 1; }
  .customer-panel { grid-column: span 2; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-toolbar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .crm-board { grid-template-columns: repeat(5, 220px); }
  .order-lower { grid-template-columns: 1fr; }
  .knowledge-hero { grid-template-columns: 1fr; gap: 17px; }
  .knowledge-hero-stats { grid-column: span 1; }
  .featured-knowledge { grid-template-columns: 1fr; gap: 14px; }
  .featured-label { flex-direction: row; align-items: center; }
  .featured-read { align-self: flex-start; }
  .knowledge-layout { grid-template-columns: 1fr; gap: 15px; }
  .knowledge-rail { position: static; display: flex; flex-wrap: wrap; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .knowledge-rail .rail-title, .knowledge-rail .rail-divider, .knowledge-rail .rail-health, .knowledge-rail .rail-note { display: none; }
  .rail-item { width: auto; height: 29px; padding: 0 8px; border: 1px solid transparent; }
  .rail-item.is-active { border-color: var(--line); }
  .article-layout { grid-template-columns: 1fr; gap: 20px; }
  .article-rail { display: none; }
  .article-body { max-width: none; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-rail { display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
  .settings-rail .admin-entry, .settings-rail .logout-full { grid-column: span 2; }
  .admin-hero { flex-direction: column; align-items: flex-start; gap: 20px; }
  .admin-hero-side { align-items: flex-start; }
  .role-cards { grid-template-columns: 1fr 1fr; }
  .governance-grid { grid-template-columns: 1fr 1fr; }
  .system-columns { grid-template-columns: 1fr; }
  .insights-grid { grid-template-columns: 1fr 1fr; }
  .insights-grid .span-4, .insights-grid .span-8, .insights-grid .span-12 { grid-column: span 2; }
  .insights-grid .insight-donut-panel { grid-column: span 1; }
  .content-calendar-panel { overflow: hidden; }
  .content-calendar { min-width: 760px; }
  .content-calendar-panel .section-head { margin-bottom: 13px; }
  .content-calendar-wrap { overflow-x: auto; }
  .login-page { grid-template-columns: 1fr; }
  .login-visual { display: none; }
  .login-panel { min-height: 100vh; padding: 34px 24px; background: var(--paper); }
  .login-panel::before { inset: 15px; }
  .login-mobile-mark { display: flex; align-items: center; gap: 9px; margin-bottom: 34px; }
  .login-mobile-mark .brand-seal { border-color: var(--forest); color: var(--forest); width: 35px; height: 35px; font-size: 18px; }
  .login-mobile-mark b { font-family: var(--serif); font-size: 18px; letter-spacing: 0.12em; font-weight: 600; }
  .login-mobile-mark small { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; }
  .login-panel-inner { width: min(100%, 430px); }
}

@media (max-width: 760px) {
  .page { padding: 20px 16px 45px; }
  .topbar { padding: 0 16px; }
  .breadcrumb a { display: none; }
  .breadcrumb span { display: none; }
  .dashboard-hero { padding: 25px 21px; }
  .dashboard-hero h1 { font-size: 37px; }
  .dashboard-hero-lede { font-size: 12px; }
  .dashboard-hero-actions { gap: 13px; }
  .dashboard-grid { grid-template-columns: 1fr; gap: 12px; }
  .dashboard-grid > .span-3, .dashboard-grid > .span-4, .dashboard-grid > .span-5, .dashboard-grid > .span-8, .dashboard-grid > .span-12 { grid-column: span 1; }
  .map-panel, .customer-panel { grid-column: span 1; }
  .kpi-strip { grid-template-columns: 1fr 1fr; }
  .kpi-primary { grid-column: span 2; }
  .kpi-target { grid-column: span 2; }
  .kpi-cell { padding: 14px 15px; }
  .kpi-cell:nth-child(2) { border-left: 0; }
  .kpi-cell:nth-child(4) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .kpi-cell:nth-child(3) { border-top: 1px solid var(--line-soft); }
  .panel { padding: 17px; }
  .section-head h2 { font-size: 19px; }
  .donut-block { flex-direction: column; align-items: flex-start; gap: 12px; }
  .donut-legend { width: 100%; }
  .map-panel .ne-map { height: 240px; }
  .sourcing-principles { grid-template-columns: 1fr; padding: 21px; gap: 20px; }
  .principle-lead h3 br { display: none; }
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .board-toolbar { flex-direction: column; align-items: flex-start; padding: 11px; }
  .board-filters { width: 100%; }
  .board-filters .filter-search { flex: 1; min-width: 0; }
  .sourcing-board { grid-template-columns: repeat(5, 220px); }
  .product-summary { grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
  .product-summary .summary-divider { display: none; }
  .product-summary > div:nth-child(5) { grid-column: span 2; }
  .product-grid { grid-template-columns: 1fr; }
  .product-card-art { padding: 8px; }
  .product-art { aspect-ratio: 4 / 2.9; }
  .channel-grid { grid-template-columns: 1fr; }
  .channel-lower { grid-template-columns: 1fr; }
  .channel-overview-main { padding: 22px; }
  .channel-overview-main h2 { font-size: 36px; }
  .channel-overview-side { grid-template-columns: 1fr 1fr; }
  .crm-stats { grid-template-columns: 1fr 1fr; }
  .crm-stat.main { grid-column: span 2; }
  .crm-stat:nth-child(3) { border-left: 0; }
  .crm-spring { grid-column: span 2; }
  .crm-spring p { display: none; }
  .crm-toolbar { flex-direction: column; align-items: flex-start; gap: 9px; }
  .crm-lower { grid-template-columns: 1fr; }
  .crm-ai-card { grid-column: span 1; }
  .crm-board { grid-template-columns: repeat(5, 210px); }
  .order-stats { grid-template-columns: 1fr 1fr; }
  .order-table-panel { overflow: hidden; }
  .order-table { min-width: 650px; }
  .exception-banner { flex-wrap: wrap; }
  .exception-banner .btn { margin-left: 43px; }
  .editorial-hero { grid-template-columns: 1fr; }
  .editorial-stats { border-left: 1px solid var(--line); border-top: 0; }
  .editorial-stats > div { padding: 10px 18px; }
  .editorial-quote blockquote { font-size: 27px; }
  .content-lower { grid-template-columns: 1fr; }
  .asset-library { grid-column: span 1; }
  .asset-list { grid-template-columns: 1fr; }
  .asset-list button:nth-child(2) { border-top: 1px solid var(--line-soft); padding-top: 8px; }
  .knowledge-grid { grid-template-columns: 1fr; }
  .knowledge-hero { padding: 21px; }
  .knowledge-hero-copy h2 { font-size: 28px; }
  .knowledge-hero-stats { gap: 20px; }
  .featured-knowledge { padding: 19px; }
  .featured-copy h2 { font-size: 22px; }
  .article-head h1 { font-size: 31px; }
  .article-summary { font-size: 14px; }
  .article-byline { flex-wrap: wrap; }
  .article-tags { margin-left: 0; width: 100%; }
  .article-source { grid-template-columns: 1fr 1fr; }
  .article-source > span { grid-column: span 2; }
  .article-source > div:nth-child(3) { border-left: 0; }
  .article-cta { align-items: flex-start; flex-wrap: wrap; }
  .article-cta .btn { margin-left: 46px; }
  .settings-rail { grid-template-columns: 1fr; }
  .settings-rail .admin-entry, .settings-rail .logout-full { grid-column: span 1; }
  .profile-form { grid-template-columns: 1fr 1fr; }
  .profile-form .btn { grid-column: span 2; }
  .integration-grid { grid-template-columns: 1fr; }
  .admin-hero { padding: 23px 21px; }
  .admin-hero h1 { font-size: 33px; }
  .admin-tabs button { padding: 0 12px; height: 40px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .role-cards { grid-template-columns: 1fr; }
  .governance-grid { grid-template-columns: 1fr; }
  .system-grid { grid-template-columns: 1fr; }
  .system-grid .system-card:nth-child(3) { grid-column: span 1; }
  .admin-panel-head { flex-direction: column; align-items: flex-start; gap: 11px; }
  .review-row { flex-wrap: wrap; }
  .review-row > div { min-width: calc(100% - 44px); }
  .audit-table { min-width: 730px; }
  .insights-grid { grid-template-columns: 1fr; }
  .insights-grid .span-4, .insights-grid .span-8, .insights-grid .span-12 { grid-column: span 1; }
  .insight-kpis { grid-template-columns: 1fr 1fr; }
  .insight-kpi.main { grid-column: span 2; }
  .insight-kpi:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .insight-kpi:nth-child(4), .insight-kpi:nth-child(5) { border-top: 1px solid var(--line-soft); }
  .insight-kpi:nth-child(4) { border-left: 1px solid var(--line-soft); }
  .insight-kpi:nth-child(5) { border-left: 0; }
  .conclusion-section { grid-template-columns: 1fr; }
  .conclusion-lead { grid-column: span 1; }
  .conclusion-card { border-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .conclusion-card:nth-child(2) { border-top: 0; }
  .page-signature i { display: none; }
  .page-signature { flex-wrap: wrap; }
  .overlay { padding: 14px; }
  .overlay-panel { max-height: 92vh; }
  .overlay-body { padding: 18px; }
  .overlay-head { padding: 19px 18px 14px; }
  .overlay-head h2 { font-size: 23px; }
  .overlay-foot { padding: 12px 18px; }
  .overlay-panel.panel-panel .panel-head { padding: 21px 18px 15px; }
  .overlay-panel.panel-panel .panel-body { padding: 17px 18px 22px; }
  .overlay-panel.panel-panel .panel-foot { padding: 12px 18px; }
  .form-grid.two { grid-template-columns: 1fr; }
  .form-grid .span-2 { grid-column: span 1; }
  .detail-grid { grid-template-columns: 1fr 1fr; }
  .detail-ai { align-items: flex-start; flex-direction: column; }
  .detail-ai .btn { margin-left: 24px; }
  .ai-drawer { width: 100%; }
  .ai-scrim { display: none; }
  .ai-thread { padding: 17px 15px 10px; }
  .ai-composer { padding: 8px 14px 12px; }
  .command-head { padding: 12px 13px; }
  .command-item { padding: 8px; }
  .temp-password > b { font-size: 20px; }
}

@media (max-width: 520px) {
  .page { padding: 16px 13px 40px; }
  .topbar { height: 56px; padding: 0 13px; }
  .topbar-left { gap: 4px; }
  .topbar-right { gap: 4px; }
  .page-head { padding: 2px 0 19px; margin-bottom: 18px; }
  .page-head h1 { font-size: 33px; }
  .lede { font-size: 12px; line-height: 1.7; }
  .head-actions { width: 100%; }
  .head-actions .btn { flex: 1; }
  .dashboard-hero { padding: 21px 17px; min-height: 0; }
  .dashboard-hero h1 { font-size: 32px; }
  .dashboard-hero-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
  .hero-brief { padding: 16px; }
  .hero-brief > p { font-size: 14px; }
  .kpi-strip { grid-template-columns: 1fr; }
  .kpi-primary, .kpi-target { grid-column: span 1; }
  .kpi-cell { border-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .kpi-cell:first-child { border-top: 0; }
  .kpi-value { font-size: 29px; }
  .panel { padding: 14px; }
  .section-head { margin-bottom: 13px; }
  .section-head h2 { font-size: 18px; }
  .segmented button { padding: 0 7px; font-size: 12px; }
  .trend-top { flex-direction: column; gap: 7px; }
  .trend-legend { display: none; }
  .trend-foot { flex-direction: column; align-items: flex-start; gap: 7px; }
  .map-footer { grid-template-columns: 1fr 1fr; gap: 7px; }
  .map-footer > div:nth-child(3) { display: none; }
  .product-summary { grid-template-columns: 1fr 1fr; }
  .product-summary b { font-size: 23px; }
  .catalog-tabs { gap: 0; }
  .catalog-tabs button { padding: 0 7px; font-size: 12px; }
  .channel-overview-side { grid-template-columns: 1fr; }
  .channel-overview-side > div { border-right: 0; border-bottom: 1px solid rgba(245, 241, 231, 0.1); }
  .channel-overview-side > div:nth-child(3) { grid-column: span 1; border-top: 0; }
  .channel-detail-hero { flex-direction: column; align-items: flex-start; gap: 10px; }
  .channel-detail-gmv { text-align: left; }
  .channel-detail-stats { grid-template-columns: 1fr 1fr; }
  .channel-detail-stats div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .channel-detail-stats div:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .crm-detail-head { flex-direction: column; gap: 8px; }
  .crm-detail-amount { text-align: left; }
  .crm-stats { grid-template-columns: 1fr 1fr; }
  .crm-stat { padding: 13px; }
  .crm-stat b { font-size: 23px; }
  .crm-spring { display: none; }
  .order-stats { grid-template-columns: 1fr; }
  .order-stat { border-left: 0 !important; border-top: 1px solid var(--line-soft); }
  .order-stat:first-child { border-top: 0; }
  .order-table-toolbar { padding: 10px; }
  .order-tabs button { padding: 0 6px; font-size: 12px; }
  .editorial-quote { padding: 20px; }
  .editorial-quote blockquote { font-size: 24px; }
  .editorial-quote > p { font-size: 12px; }
  .editorial-stats > div { padding: 9px 15px; }
  .knowledge-hero { padding: 18px; }
  .knowledge-hero-copy h2 { font-size: 25px; }
  .knowledge-hero-stats { gap: 15px; }
  .knowledge-hero-stats b { font-size: 19px; }
  .featured-meta { flex-wrap: wrap; }
  .article-topbar { flex-wrap: wrap; gap: 10px; }
  .article-crumb { order: 3; width: 100%; }
  .article-actions { margin-left: auto; }
  .article-head h1 { font-size: 28px; }
  .article-body p { font-size: 14px; }
  .article-body li { font-size: 13px; }
  .profile-head { flex-wrap: wrap; }
  .profile-head .role-badge { margin-left: auto; }
  .profile-form { grid-template-columns: 1fr; }
  .profile-form .btn { grid-column: span 1; }
  .admin-hero { padding: 19px 16px; }
  .admin-hero h1 { font-size: 29px; }
  .admin-hero-side { display: none; }
  .admin-tabs button { padding: 0 9px; font-size: 12px; gap: 4px; }
  .admin-stats { grid-template-columns: 1fr 1fr; }
  .admin-stats > div { padding: 10px; }
  .review-row .btn { margin-left: 40px; }
  .insight-kpis { grid-template-columns: 1fr 1fr; }
  .insight-kpi { padding: 13px; }
  .insight-kpi.main { grid-column: span 2; }
  .insight-kpi > b { font-size: 23px; }
  .conclusion-lead { padding: 19px; }
  .conclusion-card { padding: 17px; }
  .login-panel { padding: 25px 18px; }
  .login-panel::before { display: none; }
  .login-mobile-mark { margin-bottom: 25px; }
  .login-form-head h2 { font-size: 30px; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-account { padding: 7px 8px; }
  .login-security { font-size: 12px; }
  .toast { max-width: calc(100vw - 26px); }
  #toast-root { right: 13px; bottom: 13px; }
  .ai-fab { right: 14px; bottom: 14px; }
  .ai-welcome h3 { font-size: 22px; }
  .command-ai-row { flex-direction: column; }
  .command-ai { width: 100%; }
  .detail-hero { align-items: flex-start; gap: 12px; }
  .detail-hero-copy h2 { font-size: 23px; }
  .score-ring { width: 74px !important; height: 74px !important; }
  .score-ring svg { width: 74px; height: 74px; }
  .score-ring b { font-size: 19px; }
  .detail-grid { grid-template-columns: 1fr; }
  .content-checklist { grid-template-columns: 1fr; }
  .order-flow { overflow-x: auto; min-width: 420px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
.knowledge-version.is-draft { color: var(--amber); }
.mini-art svg { width: 22px; height: 22px; }
button.panel-link { border: 0; background: transparent; width: 100%; cursor: pointer; font-family: var(--sans); }
.task-panel-summary { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 20px; }
.task-panel-summary > div { padding: 13px 14px; border-left: 1px solid var(--line-soft); }
.task-panel-summary > div:first-child { border-left: 0; }
.task-panel-summary b { display: block; font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1; }
.task-panel-summary span { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.task-group { margin-bottom: 15px; }
.task-group > .micro-label { display: block; margin-bottom: 5px; }
.task-panel-row { display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.task-panel-row > div { flex: 1; min-width: 0; }
.task-panel-row b { display: block; font-size: 12px; font-weight: 500; line-height: 1.45; }
.task-panel-row small { display: block; margin-top: 2px; color: var(--muted); font-size: 12px; }
.task-panel-row .pill { flex: 0 0 auto; }
.task-panel-row.is-done { opacity: 0.55; }
.task-group-done { padding-top: 4px; }
.access-panel { display: flex; flex-direction: column; background: var(--forest); color: var(--paper); }
.access-panel .micro-label { color: rgba(245, 241, 231, 0.4); }
.access-panel .section-head h2 { color: var(--paper); }
.access-panel-mark { display: grid; place-items: center; width: 43px; height: 43px; margin: 8px 0 14px; border: 1px solid rgba(245, 241, 231, 0.2); border-radius: 50%; color: var(--amber-2); }
.access-panel h3 { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.45; letter-spacing: -0.02em; }
.access-panel p { margin-top: 7px; color: rgba(245, 241, 231, 0.5); font-size: 12px; line-height: 1.7; }
.access-foot { display: flex; align-items: center; gap: 5px; margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(245, 241, 231, 0.12); color: rgba(245, 241, 231, 0.35); font-size: 12px; }

/* =========================================================
   ENTERPRISE WECOM / DEEPSEEK / IMPORT
   ========================================================= */

.wecom-login {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 52px;
  padding: 8px 13px;
  border: 1px solid var(--forest);
  border-radius: 2px;
  background: var(--forest);
  color: var(--paper);
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.wecom-login:hover { background: var(--forest-2); transform: translateY(-1px); }
.wecom-login.is-configured { border-color: var(--forest); }
.wecom-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(245, 241, 231, 0.3); border-radius: 50%; color: #b9d8b2; flex: 0 0 auto; }
.wecom-login > span:nth-child(2) { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.wecom-login b { font-size: 12px; font-weight: 500; letter-spacing: 0.02em; }
.wecom-login small { color: rgba(245, 241, 231, 0.45); font-size: 12px; }
.wecom-login > svg { color: rgba(245, 241, 231, 0.55); }
.login-divider { display: flex; align-items: center; gap: 9px; margin: 15px 0 2px; color: var(--muted-light); font-size: 12px; letter-spacing: 0.04em; }
.login-divider::before, .login-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-divider span { white-space: nowrap; }
.ai-test-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 11px; padding-top: 9px; border-top: 1px solid rgba(245, 241, 231, 0.12); }
.ai-test-result { display: flex; align-items: flex-start; gap: 7px; margin-top: 8px; padding: 8px 9px; font-size: 12px; line-height: 1.5; }
.ai-test-result > div { display: flex; flex-direction: column; gap: 1px; }
.ai-test-result b { font-size: 12px; font-weight: 500; }
.ai-test-result span { color: rgba(245, 241, 231, 0.5); }
.ai-test-result.is-ok { border: 1px solid rgba(145, 177, 132, 0.3); color: #b9d8b2; }
.ai-test-result.is-error { border: 1px solid rgba(223, 159, 145, 0.3); color: #df9f91; }
.wecom-system .system-icon { color: #4b8e5d; }
.system-grid { grid-template-columns: repeat(4, 1fr); }

.import-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 17px; align-items: start; }
.import-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.import-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.import-type { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 2px; background: rgba(251, 248, 240, 0.55); text-align: left; }
.import-type:hover { border-color: rgba(22, 35, 27, 0.28); }
.import-type.is-active { border-color: var(--amber); background: rgba(181, 120, 60, 0.055); }
.import-type > span { display: grid; place-items: center; width: 25px; height: 25px; background: rgba(22, 35, 27, 0.045); color: var(--moss); flex: 0 0 auto; }
.import-type > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.import-type b { font-size: 12px; font-weight: 500; }
.import-type small { color: var(--muted); font-size: 12px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.import-workbench { padding: 19px; border: 1px solid var(--line); background: rgba(251, 248, 240, 0.74); }
.import-workbench-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.import-workbench-head h3 { margin-top: 3px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.import-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 94px; margin-bottom: 12px; border: 1px dashed rgba(22, 35, 27, 0.23); background: rgba(236, 230, 216, 0.2); color: var(--muted); cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.import-drop.is-over { border-color: var(--amber); background: rgba(181, 120, 60, 0.06); }
.import-drop svg { color: var(--moss); margin-bottom: 2px; }
.import-drop b { font-size: 12px; font-weight: 500; color: var(--ink); }
.import-drop small { font-size: 12px; }
.import-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.import-workbench .field textarea { font-family: var(--mono); font-size: 12px; line-height: 1.6; }
.import-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 11px; }
.import-actions > span { display: flex; align-items: center; gap: 4px; color: var(--muted-light); font-size: 12px; line-height: 1.5; }
.import-actions > span svg { flex: 0 0 auto; color: var(--moss); }
.import-result { margin-top: 13px; border: 1px solid var(--line); background: rgba(251, 248, 240, 0.7); }
.import-result.is-ok { border-left: 2px solid var(--moss); }
.import-result.has-warnings { border-left: 2px solid var(--amber); }
.import-result-head { display: flex; align-items: flex-start; gap: 8px; padding: 11px 12px; }
.import-result-head svg { color: var(--moss); margin-top: 1px; }
.import-result.has-warnings .import-result-head svg { color: var(--amber); }
.import-result-head > div { display: flex; flex-direction: column; gap: 2px; }
.import-result-head b { font-size: 12px; font-weight: 500; }
.import-result-head span { color: var(--muted); font-size: 12px; }
.import-errors { border-top: 1px solid var(--line-soft); }
.import-errors > div { display: flex; gap: 8px; padding: 5px 12px; border-top: 1px solid var(--line-soft); font-size: 12px; }
.import-errors > div:first-child { border-top: 0; }
.import-errors b { flex: 0 0 62px; font-weight: 500; color: var(--red); }
.import-errors span { color: var(--muted); }
.import-rail { display: flex; flex-direction: column; gap: 11px; }
.import-rules { padding: 17px; }
.import-rules .section-head { margin-bottom: 11px; }
.import-rule { display: flex; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.import-rule:first-of-type { border-top: 0; padding-top: 0; }
.import-rule > span { font-family: var(--mono); font-size: 12px; color: var(--amber); padding-top: 1px; }
.import-rule p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.import-rule b { color: var(--ink); font-weight: 500; }
.import-history { padding: 17px; }
.import-history .section-head { margin-bottom: 7px; }

@media (max-width: 1180px) {
  .import-layout { grid-template-columns: 1fr; }
  .import-rail { display: grid; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .import-type-grid { grid-template-columns: 1fr 1fr; }
  .import-rail { grid-template-columns: 1fr; }
  .import-actions { flex-direction: column; align-items: flex-start; }
  .wecom-login { min-height: 48px; }
}
@media (max-width: 520px) {
  .import-type-grid { grid-template-columns: 1fr; }
  .import-type small { display: none; }
}
@media (max-width: 1180px) {
  .system-grid { grid-template-columns: 1fr 1fr; }
  .system-grid .system-card:nth-child(3) { grid-column: auto; }
}
@media (max-width: 760px) {
  .system-grid { grid-template-columns: 1fr; }
  .system-grid .system-card:nth-child(3) { grid-column: auto; }
}
.ai-fab { cursor: grab; touch-action: none; user-select: none; will-change: left, top; bottom: 28px; }
.ai-fab.is-dragging { cursor: grabbing; transition: none; transform: none; box-shadow: 0 16px 35px rgba(22, 35, 27, 0.3); }
.ai-fab.is-dragging:hover { transform: none; }

/* =========================================================
   GROUP OPERATIONS
   ========================================================= */

.group-overview { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 0; margin-bottom: 20px; border-radius: 5px; overflow: hidden; background: var(--forest); color: var(--paper); }
.group-overview-main { padding: 26px 28px; position: relative; overflow: hidden; }
.group-overview-main::after { content: ""; position: absolute; width: 240px; height: 240px; right: -120px; bottom: -160px; border: 1px solid rgba(201,139,74,.22); border-radius: 50%; }
.group-overview-main h2 { margin-top: 10px; font-family: var(--serif); font-weight: 600; font-size: 31px; line-height: 1.35; letter-spacing: -0.03em; }
.group-overview-main > p { margin-top: 9px; max-width: 560px; color: rgba(245,241,231,.48); font-size: 12px; line-height: 1.8; }
.group-flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 18px; }
.group-flow span { padding: 4px 7px; border: 1px solid rgba(245,241,231,.16); color: rgba(245,241,231,.55); font-size: 12px; }
.group-flow svg { color: var(--amber-2); }
.group-overview-stats { display: flex; flex-direction: column; justify-content: center; border-left: 1px solid rgba(245,241,231,.12); background: rgba(245,241,231,.04); }
.group-overview-stats > div { padding: 13px 22px; border-top: 1px solid rgba(245,241,231,.1); display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.group-overview-stats > div:first-child { border-top: 0; }
.group-overview-stats span { width: 100%; color: rgba(245,241,231,.38); font-size: 12px; }
.group-overview-stats b { font-family: var(--serif); font-weight: 600; font-size: 27px; line-height: 1; }
.group-overview-stats small { color: rgba(245,241,231,.35); font-size: 12px; }
.groups-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.groups-toolbar h2 { margin-top: 4px; font-family: var(--serif); font-weight: 600; font-size: 22px; letter-spacing: -0.025em; }
.group-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.group-card { padding: 17px; border: 1px solid var(--line); border-radius: 3px; background: rgba(251,248,240,.7); cursor: pointer; transition: transform .24s var(--ease), border-color .2s, box-shadow .2s; }
.group-card:hover { transform: translateY(-3px); border-color: rgba(22,35,27,.26); box-shadow: 0 14px 30px rgba(22,35,27,.07); }
.group-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.group-code { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--amber); }
.group-card h3 { margin-top: 9px; font-family: var(--serif); font-weight: 600; font-size: 19px; line-height: 1.4; letter-spacing: -0.02em; }
.group-leader { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.group-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 13px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.group-stats > div { display: flex; flex-direction: column; gap: 1px; }
.group-stats b { font-family: var(--serif); font-weight: 600; font-size: 20px; line-height: 1; }
.group-stats small { color: var(--muted-light); font-size: 12px; }
.group-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 7px; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--line-soft); color: var(--muted-light); font-size: 12px; }
.group-card-foot span { display: flex; align-items: center; gap: 3px; }
.group-roadmap { margin-top: 17px; }
.group-roadmap-body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.group-roadmap-body > div { display: flex; gap: 8px; padding-top: 11px; border-top: 1px solid var(--line-soft); }
.group-roadmap-body > div > span { font-family: var(--mono); font-size: 12px; color: var(--amber); }
.group-roadmap-body p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.group-roadmap-body b { color: var(--ink); font-weight: 500; }
.group-detail-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.group-detail-top h2 { margin-top: 5px; font-family: var(--serif); font-weight: 600; font-size: 27px; letter-spacing: -0.03em; }
.group-detail-top p { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.group-qr-wrap { display: flex; align-items: center; gap: 20px; margin: 18px 0; padding: 16px; border: 1px solid var(--line); background: rgba(236,230,216,.25); }
.group-qr { flex: 0 0 auto; width: 152px; height: 152px; padding: 8px; background: #fff; }
.group-qr svg { width: 100%; height: 100%; }
.group-qr-copy { min-width: 0; flex: 1; }
.group-qr-copy > p { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.group-link { margin-top: 9px; padding: 7px 8px; border: 1px solid var(--line-soft); background: var(--paper-2); color: var(--muted); font-family: var(--mono); font-size: 12px; overflow-wrap: anywhere; }
.group-detail-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.group-detail-stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-soft); margin-bottom: 18px; }
.group-detail-stats > div { padding: 9px 10px; border-left: 1px solid var(--line-soft); }
.group-detail-stats > div:first-child { border-left: 0; }
.group-detail-stats span { display: block; color: var(--muted); font-size: 12px; }
.group-detail-stats b { display: block; margin-top: 3px; font-family: var(--mono); font-size: 12px; font-weight: 500; }
.group-welcome-text { font-family: var(--serif); font-size: 14px; line-height: 1.85; color: #3c473d; }
.group-recent { display: flex; flex-direction: column; max-height: 290px; overflow-y: auto; border: 1px solid var(--line-soft); }
.group-recent-row { display: grid; grid-template-columns: 48px 1fr; gap: 7px; padding: 8px 10px; border-top: 1px solid var(--line-soft); }
.group-recent-row:first-child { border-top: 0; }
.group-recent-row > span { color: var(--muted); font-size: 12px; }
.group-recent-row.is-user > span { color: var(--amber); }
.group-recent-row p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.group-security-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 17px; padding: 11px 12px; border-left: 2px solid var(--moss); background: rgba(82,107,82,.055); }
.group-security-note svg { color: var(--moss); flex: 0 0 auto; margin-top: 1px; }
.group-security-note p { color: var(--muted); font-size: 12px; line-height: 1.65; }

@media (max-width: 1180px) {
  .group-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .group-overview { grid-template-columns: 1fr; }
  .group-overview-stats { flex-direction: row; border-left: 0; border-top: 1px solid rgba(245,241,231,.12); }
  .group-overview-stats > div { flex: 1; border-top: 0; border-left: 1px solid rgba(245,241,231,.1); }
  .group-overview-stats > div:first-child { border-left: 0; }
  .group-overview-stats span { width: auto; }
  .group-grid { grid-template-columns: 1fr; }
  .group-roadmap-body { grid-template-columns: 1fr; }
  .group-qr-wrap { flex-direction: column; align-items: flex-start; }
  .group-detail-stats { grid-template-columns: 1fr 1fr; }
  .group-detail-stats > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .group-detail-stats > div:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .group-qr { width: 132px; height: 132px; }
}


/* =========================================================
   TYPOGRAPHY SYSTEM · 2026
   Scale: 12 caption / 13 small / 14 body / 16 card
          22 section / 34 page / 48–64 hero
   Font roles: bold Microsoft YaHei for headings, regular YaHei for body.
   ========================================================= */
body, button, input, select, textarea { font-family: var(--font-body); }
.login-hero h1,
.dashboard-hero h1,
.page-head h1,
.login-form-head h2,
.overlay-head h2,
.section-head h2,
.panel-title,
.error-state h3,
.status-page h1,
.empty-state h3,
.group-detail-top h2 { font-family: var(--font-display); font-weight: 700; }
.login-hero h1 { font-size: clamp(44px, 4.6vw, 64px); line-height: 1.18; letter-spacing: -0.035em; }
.dashboard-hero h1 { font-size: clamp(34px, 3.2vw, 46px); line-height: 1.2; letter-spacing: -0.03em; }
.page-head h1 { font-size: var(--text-page); line-height: 1.25; letter-spacing: -0.025em; }
.login-form-head h2 { font-size: 32px; line-height: 1.25; }
.overlay-head h2 { font-size: 26px; line-height: 1.3; }
.section-head h2, .panel-title { font-size: var(--text-section); line-height: 1.35; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); }
strong, b { font-weight: 700; }

/* AI knowledge gap feedback */
.ai-gap-note { display: flex; align-items: flex-start; gap: 5px; margin-top: 8px; padding: 7px 8px; border-left: 2px solid var(--amber); background: rgba(181,120,60,.06); color: var(--muted); font-size: 11px; line-height: 1.6; }
.ai-gap-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--amber); }
.ai-gap-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 9px; padding: 4px 7px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); font-size: 11px; }
.ai-gap-btn:hover { border-color: var(--amber); color: var(--amber); }
.ai-gap-btn:disabled { opacity: .55; cursor: default; }

/* Knowledge gap operations */
.gap-digest { display: grid; grid-template-columns: repeat(4, 1fr) 1.6fr; border: 1px solid var(--line); background: rgba(251,248,240,.72); }
.gap-digest > div { min-height: 76px; padding: 12px 14px; border-left: 1px solid var(--line-soft); }
.gap-digest > div:first-child { border-left: 0; }
.gap-digest span { color: var(--muted); font-size: 11px; }
.gap-digest b { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 26px; line-height: 1; }
.gap-digest small { color: var(--muted-light); font-family: var(--mono); font-size: 10px; }
.gap-digest-top p { margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.gap-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 15px 0 11px; }
.gap-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.gap-filters button { padding: 5px 9px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--muted); font-size: 11px; }
.gap-filters button.is-active { border-color: var(--forest); background: var(--forest); color: var(--paper); }
.gap-list { display: flex; flex-direction: column; gap: 8px; }
.gap-item { padding: 13px 15px; border: 1px solid var(--line); background: rgba(251,248,240,.7); }
.gap-item-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 10px; }
.gap-item-head > span:last-child { margin-left: auto; }
.gap-item h3 { margin-top: 7px; font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.5; }
.gap-item > p { margin-top: 5px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.gap-item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 7px; color: var(--muted-light); font-size: 10px; }
.gap-item-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--muted-light); }
.gap-item-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
@media (max-width: 900px) {
  .gap-digest { grid-template-columns: 1fr 1fr; }
  .gap-digest > div:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-soft); }
  .gap-digest > div:nth-child(4) { border-top: 1px solid var(--line-soft); }
  .gap-digest-top { grid-column: span 2; border-top: 1px solid var(--line-soft); }
  .gap-toolbar { align-items: flex-start; flex-direction: column; }
}

/* =========================================================
   LEADER OPERATIONS
   ========================================================= */
.leaders-page { max-width: 1540px; }
.leader-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); border:1px solid var(--line); background:rgba(251,248,240,.62); margin-bottom:15px; }
.leader-metric { min-height:72px; padding:13px 15px; border-left:1px solid var(--line-soft); }
.leader-metric:first-child { border-left:0; }
.leader-metric span { display:block; color:var(--muted); font-size:12px; white-space:nowrap; }
.leader-metric b { display:inline-block; margin-top:6px; font-family:var(--serif); font-size:25px; line-height:1; letter-spacing:-.04em; }
.leader-metric small { margin-left:3px; color:var(--muted-light); font-size:12px; }
.leader-metric.is-amber b { color:var(--amber); }
.leader-metric.is-green b { color:var(--forest); }
.leader-metric.is-muted b { color:var(--muted-light); font-family:var(--sans); font-size:16px; letter-spacing:0; }
.leader-sync { display:flex; align-items:center; gap:8px; margin-bottom:14px; padding:9px 12px; border:1px solid rgba(181,120,60,.24); background:rgba(234,215,189,.2); color:#77522f; font-size:12px; }
.leader-sync i { width:5px; height:5px; flex:0 0 auto; border-radius:50%; background:var(--amber); }
.leader-sync b { font-weight:700; }
.leader-sync button { margin-left:auto; padding:0; border:0; background:none; color:#77522f; font:inherit; font-size:12px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.leader-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.leader-tabs { display:flex; flex-wrap:wrap; gap:2px; }
.leader-tab { height:30px; padding:0 9px; border:1px solid transparent; background:transparent; color:var(--muted); font-family:var(--sans); font-size:12px; cursor:pointer; }
.leader-tab.is-active { border-color:var(--line); background:rgba(251,248,240,.8); color:var(--ink); }
.leader-tab em { margin-left:3px; color:var(--muted-light); font-style:normal; font-size:12px; }
.leader-tools { display:flex; align-items:center; gap:5px; }
.leader-filter { height:30px; padding:0 9px; border:1px solid var(--line); background:transparent; color:var(--muted); font-family:var(--sans); font-size:12px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; }
.leader-filter.is-active { border-color:var(--amber); color:var(--amber); background:rgba(181,120,60,.06); }
.leader-search { width:210px; padding:0 8px; }
.leader-search input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font:inherit; }
.leader-search svg { flex:0 0 auto; color:var(--muted-light); }
.leader-table-wrap { border:1px solid var(--line); background:rgba(251,248,240,.66); overflow:hidden; }
.leader-table { width:100%; border-collapse:collapse; table-layout:fixed; }
.leader-table th { height:36px; padding:0 10px; border-bottom:1px solid var(--line); background:rgba(236,230,216,.28); color:var(--muted-light); font-size:12px; font-weight:400; letter-spacing:.08em; text-align:left; text-transform:uppercase; white-space:nowrap; }
.leader-table td { height:58px; padding:0 10px; border-bottom:1px solid var(--line-soft); font-size:12px; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leader-table tr:last-child td { border-bottom:0; }
.leader-table tbody tr { cursor:pointer; }
.leader-table tbody tr:hover { background:rgba(22,35,27,.025); }
.leader-check { width:25px; color:var(--muted-light); }
.leader-person { display:flex; align-items:center; gap:9px; min-width:0; }
.leader-avatar { width:29px; height:29px; flex:0 0 auto; display:grid; place-items:center; border:1px solid rgba(22,35,27,.08); border-radius:50%; background:var(--paper-3); color:var(--forest); font-size:12px; font-weight:700; }
.leader-person b { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; font-size:12px; font-weight:600; }
.leader-person small { display:block; max-width:145px; overflow:hidden; text-overflow:ellipsis; color:var(--muted-light); font-size:12px; }
.leader-tier { width:27px; height:27px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-size:12px; font-weight:700; }
.leader-tier.s { border-color:var(--forest); background:var(--forest); color:var(--paper); }
.leader-tier.a { border-color:rgba(181,120,60,.5); color:var(--amber); }
.leader-tier.b,.leader-tier.c { color:var(--muted); }
.leader-next { white-space:normal !important; }
.leader-next b { display:block; font-size:12px; font-weight:500; line-height:1.45; }
.leader-next small { display:block; color:var(--muted-light); font-size:12px; line-height:1.35; }
.leader-next .is-warn { color:var(--red); }
.leader-table-foot { display:flex; align-items:center; justify-content:space-between; padding:10px 2px 0; color:var(--muted-light); font-size:12px; }
.leader-pager { display:flex; gap:3px; }
.leader-pager span { width:24px; height:24px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); font-size:12px; }
.leader-pager span.is-current { border-color:var(--forest); background:var(--forest); color:var(--paper); }
.leader-note { margin-top:12px; color:var(--muted-light); font-size:12px; }
.leader-finance-empty { border:1px solid var(--line); padding:54px 28px; text-align:center; background:rgba(251,248,240,.5); }
.leader-finance-mark { width:44px; height:44px; margin:0 auto 13px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; color:var(--moss); }
.leader-finance-empty h2 { margin:0; font-size:22px; font-weight:600; }
.leader-finance-empty p { max-width:580px; margin:9px auto 14px; color:var(--muted); font-size:12px; line-height:1.8; }

/* custom leader panel */
.leader-overlay { display:flex; flex-direction:column; }
.leader-overlay-head { flex:0 0 auto; position:relative; overflow:hidden; padding:20px 22px 17px; background:var(--forest); color:var(--paper); }
.leader-overlay-head::before,.leader-overlay-head::after { content:""; position:absolute; border:1px solid rgba(245,241,231,.12); border-radius:50%; pointer-events:none; }
.leader-overlay-head::before { width:210px; height:210px; top:-90px; right:-50px; }
.leader-overlay-head::after { width:120px; height:120px; top:-38px; right:-4px; border-color:rgba(245,241,231,.08); }
.leader-overlay-top { position:relative; z-index:1; display:flex; align-items:flex-start; justify-content:space-between; color:rgba(245,241,231,.48); font-size:12px; letter-spacing:.14em; }
.leader-close { width:26px; height:26px; border:1px solid rgba(245,241,231,.24); background:transparent; color:rgba(245,241,231,.8); font-size:16px; line-height:1; cursor:pointer; }
.leader-overlay-title { position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin-top:14px; }
.leader-overlay-title .leader-avatar { width:46px; height:46px; border-color:rgba(245,241,231,.25); background:rgba(245,241,231,.06); color:var(--amber-soft); font-size:17px; }
.leader-overlay-title h2 { margin:0; font-family:var(--serif); font-size:25px; line-height:1.1; font-weight:700; letter-spacing:-.03em; }
.leader-overlay-title p { margin:5px 0 0; color:rgba(245,241,231,.55); font-size:12px; }
.leader-overlay-meta { color:rgba(245,241,231,.4) !important; }
.leader-overlay-meta .is-missing { color:#e4a38e; font-weight:500; }
.leader-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:5px; margin-top:11px; }
.leader-tags span { padding:3px 6px; border:1px solid rgba(245,241,231,.17); color:rgba(245,241,231,.7); font-size:12px; }
.leader-overlay-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:6px; margin-top:15px; }
.leader-overlay-actions .btn { height:28px; padding:0 9px; border-color:rgba(245,241,231,.22); color:var(--paper); font-size:12px; }
.leader-overlay-actions .btn.btn-paper { border-color:var(--paper); background:var(--paper); color:var(--forest); }
.leader-overlay-body { flex:1; overflow:auto; padding:15px 22px 24px; }
.leader-status-line { display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid var(--line); background:rgba(236,230,216,.25); }
.leader-status-line > div { padding:9px 10px; border-left:1px solid var(--line-soft); }
.leader-status-line > div:first-child { border-left:0; }
.leader-status-line span { display:block; color:var(--muted-light); font-size:12px; }
.leader-status-line b { display:block; margin-top:3px; font-size:12px; font-weight:600; }
.leader-status-line b.is-muted { color:var(--muted-light); }
.leader-status-line small { display:block; margin-top:2px; color:var(--muted-light); font-size:12px; }
.leader-section { margin-top:17px; }
.leader-section-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.leader-section-head span { color:var(--muted-light); font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.leader-section-head b { font-size:13px; font-weight:600; }
.leader-section-head button,.leader-section-head a { margin-left:auto; padding:0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--muted); font:inherit; font-size:12px; text-decoration:none; cursor:pointer; }
.leader-count { margin-left:auto; }
.leader-coop-card { display:flex; align-items:flex-start; gap:10px; padding:11px 12px; border:1px solid var(--line); background:rgba(251,248,240,.65); }
.leader-coop-icon { width:27px; height:27px; flex:0 0 auto; display:grid; place-items:center; border:1px solid rgba(82,107,82,.25); color:var(--moss); }
.leader-coop-card b { display:block; font-size:12px; font-weight:600; }
.leader-coop-card p { margin:3px 0 0; color:var(--muted); font-size:12px; line-height:1.6; }
.leader-coop-meta { display:flex; gap:8px; margin-top:6px; color:var(--muted-light); font-size:12px; }
.leader-coop-pending { border:1px solid var(--line); padding:12px; background:rgba(236,230,216,.2); color:var(--muted); font-size:12px; line-height:1.7; }
.leader-evidence-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.leader-evidence-list a { padding:3px 6px; border:1px solid var(--line); color:var(--muted); font-size:12px; text-decoration:none; }
.leader-evidence-list a:hover { color:var(--forest); border-color:var(--moss); }
.leader-timeline { margin-left:3px; padding-left:14px; border-left:1px solid var(--line); }
.leader-event { position:relative; padding-bottom:12px; }
.leader-event:last-child { padding-bottom:0; }
.leader-event::before { content:""; position:absolute; left:-18px; top:4px; width:7px; height:7px; border:1px solid var(--moss); border-radius:50%; background:var(--paper-2); }
.leader-event.is-green::before { border-color:var(--moss); background:var(--moss); }
.leader-event b { display:block; font-size:12px; font-weight:500; }
.leader-event p { margin:2px 0 0; color:var(--muted); font-size:12px; line-height:1.55; }
.leader-event time { position:absolute; top:0; right:0; color:var(--muted-light); font-size:12px; }
.leader-inline-action { margin-top:4px; padding:0; border:0; border-bottom:1px solid var(--line); background:none; color:var(--amber); font:inherit; font-size:12px; cursor:pointer; }
.leader-empty-line { color:var(--muted-light); font-size:12px; }
.leader-task-list { border-top:1px solid var(--line-soft); }
.leader-task { display:flex; align-items:flex-start; gap:8px; padding:8px 0; border-bottom:1px solid var(--line-soft); font-size:12px; }
.leader-task input { margin-top:3px; accent-color:var(--forest); }
.leader-task span { display:block; }
.leader-task small { display:block; margin-top:2px; color:var(--muted-light); font-size:12px; }
.leader-task.is-done span { text-decoration:line-through; color:var(--muted-light); }
.leader-order-empty { padding:13px; border:1px dashed var(--line); background:rgba(236,230,216,.18); color:var(--muted-light); font-size:12px; text-align:center; }
.leader-order-empty b { display:block; margin-bottom:3px; color:var(--muted); font-size:12px; font-weight:500; }
.leader-overlay-foot { flex:0 0 auto; display:flex; align-items:center; gap:7px; padding:12px 22px; border-top:1px solid var(--line); background:rgba(251,248,240,.94); }
.leader-overlay-foot .btn { height:31px; font-size:12px; }
.leader-overlay .form-hint { color:var(--muted-light); font-size:12px; line-height:1.6; }
.leader-overlay .field span { font-size:12px; }

@media (max-width:1180px) {
  .leader-metrics { grid-template-columns:repeat(3,1fr); }
  .leader-metric:nth-child(4) { border-left:0; border-top:1px solid var(--line-soft); }
  .leader-metric:nth-child(5),.leader-metric:nth-child(6) { border-top:1px solid var(--line-soft); }
}
@media (max-width:760px) {
  .leader-overlay .overlay-panel { width:100% !important; }
  .leader-metrics { grid-template-columns:1fr 1fr; }
  .leader-metric:nth-child(3),.leader-metric:nth-child(5) { border-left:0; }
  .leader-metric:nth-child(3),.leader-metric:nth-child(4),.leader-metric:nth-child(5),.leader-metric:nth-child(6) { border-top:1px solid var(--line-soft); }
  .leader-toolbar { align-items:flex-start; flex-direction:column; }
  .leader-tools { flex-wrap:wrap; width:100%; }
  .leader-search { width:100%; }
  .leader-table-wrap { overflow:auto; }
  .leader-table { min-width:900px; }
  .leader-overlay { width:100% !important; }
}

/* leader weekly report */
.leader-report-summary { display:grid; grid-template-columns:repeat(5,1fr); border:1px solid var(--line); margin-bottom:18px; }
.leader-report-summary > div { padding:11px 12px; border-left:1px solid var(--line-soft); }
.leader-report-summary > div:first-child { border-left:0; }
.leader-report-summary span { display:block; color:var(--muted-light); font-size:12px; }
.leader-report-summary b { display:block; margin-top:4px; font-family:var(--serif); font-size:23px; line-height:1; }
.leader-report-block { margin-top:15px; }
.leader-report-block h3 { margin:0 0 7px; font-size:13px; font-weight:600; }
.leader-report-row { display:flex; align-items:center; gap:8px; padding:7px 0; border-top:1px solid var(--line-soft); font-size:12px; }
.leader-report-row b { min-width:80px; font-weight:500; }
.leader-report-row span { color:var(--muted); }
.leader-report-row small { margin-left:auto; color:var(--muted-light); }
.leader-report-note { margin-top:14px; color:var(--muted-light); font-size:12px; line-height:1.7; }
@media (max-width:760px) { .leader-report-summary { grid-template-columns:1fr 1fr; } .leader-report-summary > div:nth-child(3) { border-left:0; } .leader-report-summary > div:nth-child(4),.leader-report-summary > div:nth-child(5) { border-top:1px solid var(--line-soft); } }

/* leader bulk selection */
.leader-bulk { display:flex; align-items:center; gap:7px; margin:0 0 8px; padding:7px 10px; border:1px solid rgba(181,120,60,.25); background:rgba(234,215,189,.22); color:#77522f; font-size:12px; }
.leader-bulk[hidden] { display:none; }
.leader-bulk span { margin-right:4px; }
.leader-check input,#leader-check-all { width:13px; height:13px; accent-color:var(--forest); vertical-align:middle; }

/* leader import */
.leader-import-form { display:flex; flex-direction:column; gap:10px; }
.leader-import-form .field { width:100%; }
.leader-import-form .field input[type="file"] { width:100%; padding:7px 8px; border:1px solid var(--line); background:rgba(251,248,240,.6); font-size:12px; }
.leader-import-form .field small { color:var(--muted-light); font-size:12px; margin-top:3px; }
.leader-import-text { width:100%; min-height:150px; resize:vertical; padding:9px 10px; border:1px solid var(--line); background:var(--paper-2); color:var(--ink); font:12px/1.6 var(--sans); }
.leader-import-error { white-space:pre-wrap; padding:9px 10px; border:1px solid rgba(158,61,47,.25); background:rgba(236,215,208,.35); color:var(--red); font-size:12px; line-height:1.6; }
.leader-import-error[hidden] { display:none; }