:root {
  --ruby: #8A1538;
  --wine: #5A1A2B;
  --gold: #C58D44;
  --ivory: #F8F3ED;
  --sand: #E9DCC8;
  --ink: #1A1A1C;
  --muted: #6F6A66;
  --white: #FFFFFF;
  --line: rgba(90, 26, 43, 0.13);
  --success: #277A52;
  --warning: #A56A13;
  --danger: #A3213F;
  --shadow: 0 18px 50px rgba(51, 20, 30, .08);
  --radius-lg: 24px;
  --radius-md: 16px;
  --sidebar: 280px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ivory); color: var(--ink); }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #551627 0%, #2b1119 100%); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; overflow-y: auto; z-index: 10; }
.brand { display:flex; align-items:center; gap:12px; padding: 6px 8px 22px; border-bottom:1px solid rgba(255,255,255,.12); }
.brand-mark { width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:linear-gradient(145deg, var(--ruby), var(--gold)); color:white; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:22px; font-weight:700; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.brand-copy strong { display:block; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; letter-spacing:.02em; font-size:15px; }
.brand-copy span { display:block; color:#e8d9dd; font-size:11px; margin-top:2px; }
.nav-section { margin-top:18px; }
.nav-label { padding:0 10px 7px; color:#bfa9b0; font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; }
.nav-item { width:100%; display:flex; align-items:center; gap:11px; border:0; background:transparent; color:#eadfe2; padding:10px 11px; border-radius:12px; text-align:left; margin:2px 0; transition:.18s ease; }
.nav-item:hover { background:rgba(255,255,255,.08); color:white; }
.nav-item.active { background:linear-gradient(135deg, rgba(197,141,68,.26), rgba(138,21,56,.36)); color:white; box-shadow: inset 3px 0 0 var(--gold); }
.nav-icon { width:29px; height:29px; flex:0 0 29px; border:1px solid rgba(255,255,255,.16); border-radius:9px; display:grid; place-items:center; font-size:13px; font-weight:700; }
.nav-item.active .nav-icon { border-color:rgba(197,141,68,.65); color:#f2c987; }
.sidebar-footer { margin-top:auto; padding-top:18px; }
.owner-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); border-radius:15px; padding:12px; }
.owner-row { display:flex; align-items:center; gap:10px; }
.avatar { width:36px; height:36px; border-radius:50%; background:var(--gold); color:#2b1119; display:grid; place-items:center; font-weight:800; }
.owner-card strong { display:block; font-size:12px; }
.owner-card small { color:#c9b9be; font-size:10px; }
.main { min-width:0; }
.topbar { position:sticky; top:0; z-index:8; min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 26px; background:rgba(248,243,237,.89); backdrop-filter:blur(16px); border-bottom:1px solid var(--line); }
.top-left { display:flex; align-items:center; gap:14px; min-width:0; }
.mobile-menu { display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.page-title { min-width:0; }
.page-title h1 { font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:23px; margin:0; line-height:1.15; color:var(--wine); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.page-title p { font-size:11px; color:var(--muted); margin:4px 0 0; }
.top-actions { display:flex; align-items:center; gap:9px; }
.scope-select { min-width:170px; border:1px solid var(--line); background:white; padding:10px 12px; border-radius:12px; color:var(--ink); }
.icon-btn, .primary-btn, .ghost-btn, .danger-btn { border:0; border-radius:12px; min-height:42px; padding:0 14px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-weight:600; white-space:nowrap; }
.icon-btn { width:42px; padding:0; background:white; border:1px solid var(--line); }
.primary-btn { background:linear-gradient(135deg, var(--ruby), var(--wine)); color:white; box-shadow:0 9px 24px rgba(138,21,56,.18); }
.ghost-btn { background:white; color:var(--wine); border:1px solid var(--line); }
.danger-btn { background:#fff0f2; color:var(--danger); border:1px solid rgba(163,33,63,.18); }
.content { padding:24px 26px 36px; max-width:1720px; margin:0 auto; }
.hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(290px,.7fr); gap:18px; margin-bottom:18px; }
.hero-main { background:linear-gradient(135deg, #fff 0%, #fff9f4 100%); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.hero-main:after { content:"XT"; position:absolute; right:-7px; bottom:-40px; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:170px; font-weight:700; color:rgba(138,21,56,.035); pointer-events:none; }
.eyebrow { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; background:#fff4e4; border:1px solid #f1d8ad; border-radius:999px; color:#8a5d22; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; }
.hero h2 { font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:36px; line-height:1.12; margin:15px 0 10px; color:var(--wine); max-width:730px; }
.hero h2 em { color:var(--ruby); font-style:normal; }
.hero p { margin:0; color:var(--muted); font-size:13px; max-width:760px; line-height:1.7; }
.hero-actions { display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; }
.hero-side { background:linear-gradient(160deg, var(--wine), #250f17); color:white; border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow); }
.lock-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.lock-badge { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; background:rgba(197,141,68,.16); color:#f1c985; border:1px solid rgba(197,141,68,.35); }
.lock-status { font-size:10px; border:1px solid rgba(255,255,255,.15); border-radius:999px; padding:5px 8px; color:#dacdd1; }
.hero-side h3 { margin:16px 0 7px; font-size:16px; }
.hero-side p { color:#d8c9cd; font-size:11px; line-height:1.6; }
.rule-list { margin:16px 0 0; padding:0; list-style:none; display:grid; gap:9px; }
.rule-list li { display:flex; gap:8px; font-size:11px; color:#f4ecee; line-height:1.4; }
.rule-dot { width:18px; height:18px; border-radius:50%; flex:0 0 18px; display:grid; place-items:center; font-size:9px; background:rgba(197,141,68,.16); color:#f0c27b; }
.stats { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-bottom:18px; }
.stat-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:17px; box-shadow:0 8px 26px rgba(51,20,30,.045); min-width:0; }
.stat-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.stat-icon { width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:#f8eaee; color:var(--ruby); font-weight:800; }
.stat-trend { font-size:10px; color:var(--success); background:#eff8f3; padding:5px 7px; border-radius:999px; }
.stat-card strong { display:block; font-size:27px; margin-top:13px; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--ink); }
.stat-card span { display:block; font-size:10px; color:var(--muted); margin-top:3px; }
.grid-2 { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(300px,.7fr); gap:18px; margin-bottom:18px; }
.panel { background:white; border:1px solid var(--line); border-radius:20px; padding:20px; box-shadow:0 8px 26px rgba(51,20,30,.045); min-width:0; }
.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:16px; }
.panel-head h3 { margin:0; font-size:15px; color:var(--wine); }
.panel-head p { margin:4px 0 0; font-size:10px; color:var(--muted); }
.module-grid { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px; }
.module-card { border:1px solid var(--line); border-radius:14px; padding:13px 12px; background:linear-gradient(180deg,#fff,#fffaf7); min-height:95px; transition:.18s ease; }
.module-card:hover { transform:translateY(-2px); box-shadow:0 9px 20px rgba(90,26,43,.08); border-color:rgba(138,21,56,.22); }
.module-card .mini-icon { width:31px; height:31px; border-radius:9px; background:#f5e8ec; color:var(--ruby); display:grid; place-items:center; font-size:11px; font-weight:800; margin-bottom:10px; }
.module-card strong { display:block; font-size:11px; }
.module-card span { display:block; font-size:9px; color:var(--muted); margin-top:4px; line-height:1.4; }
.flow { display:flex; align-items:stretch; gap:8px; overflow-x:auto; padding-bottom:4px; }
.flow-node { min-width:105px; flex:1 0 105px; border:1px solid var(--line); border-radius:13px; padding:12px 10px; text-align:center; background:#fffdfb; }
.flow-node strong { display:block; font-size:10px; color:var(--wine); }
.flow-node span { display:block; font-size:9px; color:var(--muted); margin-top:3px; }
.flow-arrow { align-self:center; color:var(--gold); font-weight:800; }
.table-wrap { width:100%; overflow:auto; border-radius:14px; border:1px solid var(--line); }
table { width:100%; border-collapse:collapse; min-width:680px; background:white; }
th, td { padding:12px 13px; border-bottom:1px solid var(--line); text-align:left; font-size:10px; vertical-align:middle; }
th { background:#fbf6f2; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.06em; position:sticky; top:0; }
tr:last-child td { border-bottom:0; }
.badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:5px 8px; font-size:9px; font-weight:700; }
.badge.success { background:#edf8f1; color:var(--success); }
.badge.pending { background:#fff7e7; color:var(--warning); }
.badge.locked { background:#f9e9ee; color:var(--ruby); }
.architecture { display:grid; gap:18px; }
.layer-row { display:grid; grid-template-columns:150px minmax(0,1fr); gap:14px; align-items:start; }
.layer-label { border-radius:16px; padding:16px; background:var(--wine); color:white; position:sticky; top:98px; }
.layer-label b { display:block; font-size:12px; }
.layer-label span { display:block; font-size:9px; color:#decbd1; margin-top:4px; }
.layer-box { border:1px solid var(--line); border-radius:18px; background:white; padding:16px; }
.layer-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.arch-card { padding:13px; border:1px solid var(--line); border-radius:13px; background:#fffcfa; min-height:85px; }
.arch-card strong { font-size:10px; display:block; color:var(--wine); }
.arch-card span { font-size:9px; color:var(--muted); display:block; margin-top:5px; line-height:1.5; }
.ai-path { display:flex; gap:8px; align-items:center; overflow-x:auto; padding:10px 0 2px; }
.ai-node { min-width:115px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; text-align:center; font-size:10px; font-weight:700; }
.ai-node.blocked { border-color:rgba(163,33,63,.3); color:var(--danger); background:#fff7f8; }
.guardrail { border-left:4px solid var(--ruby); padding:14px 16px; background:#fff6f8; border-radius:0 13px 13px 0; color:#5c2635; font-size:11px; line-height:1.6; }
.voice-fab { position:fixed; right:26px; bottom:24px; z-index:20; border:0; width:58px; height:58px; border-radius:50%; background:linear-gradient(145deg,var(--ruby),var(--wine)); color:white; box-shadow:0 16px 35px rgba(90,26,43,.28); font-size:20px; }
.voice-fab.listening { animation:pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow:0 0 0 14px rgba(138,21,56,.12), 0 16px 35px rgba(90,26,43,.25); } }
.modal-backdrop { position:fixed; inset:0; background:rgba(25,10,14,.58); z-index:50; display:grid; place-items:center; padding:18px; }
.modal { width:min(520px,100%); background:white; border-radius:22px; padding:22px; box-shadow:0 30px 90px rgba(0,0,0,.25); }
.modal h3 { font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--wine); font-size:22px; margin:0 0 8px; }
.modal p { color:var(--muted); font-size:11px; line-height:1.6; }
.field { display:grid; gap:6px; margin-top:14px; }
.field label { font-size:10px; font-weight:700; color:var(--wine); }
.field input, .field textarea { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; outline:none; background:#fffdfb; }
.field input:focus, .field textarea:focus { border-color:rgba(138,21,56,.45); box-shadow:0 0 0 3px rgba(138,21,56,.08); }
.modal-actions { display:flex; justify-content:flex-end; gap:9px; margin-top:18px; }
.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,16px); background:#211115; color:white; padding:11px 15px; border-radius:12px; font-size:10px; opacity:0; pointer-events:none; transition:.2s ease; z-index:80; box-shadow:0 10px 35px rgba(0,0,0,.2); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.empty { padding:42px 20px; text-align:center; border:1px dashed var(--line); border-radius:16px; background:#fffdfa; }
.empty strong { display:block; color:var(--wine); font-size:14px; }
.empty span { display:block; color:var(--muted); font-size:10px; margin-top:5px; }
.brand-reference { display:grid; grid-template-columns:260px 1fr; gap:18px; align-items:center; }
.brand-reference img { width:100%; border-radius:16px; border:1px solid var(--line); background:white; }
.palette { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; }
.swatch { min-height:72px; border-radius:13px; padding:10px; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; font-size:9px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.05); }
.swatch.ivory, .swatch.sand { color:var(--ink); }

@media (max-width: 1240px) {
  :root { --sidebar: 238px; }
  .module-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .layer-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 980px) {
  .app-shell { grid-template-columns:1fr; }
  .sidebar { position:fixed; left:0; top:0; width:min(300px,86vw); transform:translateX(-105%); transition:.22s ease; box-shadow:20px 0 60px rgba(0,0,0,.2); }
  .sidebar.open { transform:translateX(0); }
  .mobile-menu { display:grid; place-items:center; }
  .hero, .grid-2 { grid-template-columns:1fr; }
  .layer-row { grid-template-columns:1fr; }
  .layer-label { position:static; }
  .layer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-reference { grid-template-columns:1fr; }
  .brand-reference img { max-width:330px; }
}
@media (max-width: 720px) {
  .topbar { padding:11px 14px; min-height:68px; }
  .content { padding:16px 14px 90px; }
  .page-title h1 { font-size:18px; }
  .page-title p, .scope-select { display:none; }
  .top-actions { gap:6px; }
  .icon-btn { width:39px; min-height:39px; }
  .hero-main, .hero-side { padding:19px; border-radius:19px; }
  .hero h2 { font-size:28px; }
  .stats { grid-template-columns:1fr 1fr; gap:10px; }
  .module-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .layer-grid { grid-template-columns:1fr; }
  .palette { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .voice-fab { right:16px; bottom:16px; }
}
@media (max-width: 430px) {
  .stats { grid-template-columns:1fr; }
  .module-grid { grid-template-columns:1fr 1fr; }
  .hero h2 { font-size:25px; }
  .hero-actions { display:grid; grid-template-columns:1fr; }
  .hero-actions button { width:100%; }
  .panel { padding:15px; }
  .modal-actions { display:grid; grid-template-columns:1fr; }
  .modal-actions button { width:100%; }
}

/* V3 • Authentication */
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(360px,.65fr); background:linear-gradient(135deg,#2a1018 0%,#5A1A2B 48%,#F8F3ED 48%,#F8F3ED 100%); padding:clamp(24px,5vw,76px); gap:clamp(28px,6vw,90px); align-items:center; }
.login-brand { color:#fff; max-width:760px; }
.login-logo { width:76px; height:76px; border-radius:22px; display:grid; place-items:center; font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:32px; font-weight:800; background:linear-gradient(145deg,var(--ruby),var(--gold)); box-shadow:0 18px 45px rgba(0,0,0,.25); margin-bottom:24px; }
.login-brand h1 { font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:clamp(38px,5.8vw,72px); line-height:1.02; margin:18px 0 18px; letter-spacing:-.025em; }
.login-brand h1 em { color:#efc78d; font-style:normal; }
.login-brand p { max-width:670px; color:#e9dfe2; line-height:1.8; font-size:14px; }
.login-rules { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.login-rules span { border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.07); padding:9px 11px; border-radius:999px; font-size:11px; color:#f7edf0; }
.login-card { width:min(470px,100%); justify-self:end; background:#fff; border:1px solid var(--line); border-radius:28px; padding:clamp(24px,4vw,40px); box-shadow:0 28px 80px rgba(31,10,17,.18); }
.login-card h2 { font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; color:var(--wine); font-size:30px; margin:0 0 7px; }
.login-card > p { color:var(--muted); font-size:11px; line-height:1.6; margin:0 0 18px; }
.login-submit { width:100%; margin-top:18px; }
.login-submit:disabled { opacity:.65; cursor:wait; }
.dev-note { margin-top:18px; padding:11px 12px; border-radius:12px; background:#fff7e7; color:#7a541f; font-size:10px; line-height:1.5; border:1px solid #f1d9ae; }
.logout-btn { width:100%; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05); color:#f0e4e7; border-radius:10px; padding:8px 10px; margin-top:10px; font-size:10px; }
.logout-btn:hover { background:rgba(255,255,255,.1); }
@media (max-width: 900px) { .login-shell { grid-template-columns:1fr; background:linear-gradient(180deg,#421420 0 45%,#F8F3ED 45% 100%); } .login-card { justify-self:stretch; margin:0 auto; } }

/* V5 • Sales Pipeline / Fulfillment / CSKH / Management Report */
.module-stack { display:grid; gap:22px; }
.subhead { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin:0 0 10px; }
.subhead h4 { margin:0; color:var(--wine); font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:18px; }
.subhead span { color:var(--muted); font-size:10px; }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; min-width:150px; }
.mini-btn { border:1px solid var(--line); background:#fff; color:var(--wine); border-radius:9px; padding:7px 9px; font-size:9px; font-weight:700; white-space:nowrap; }
.mini-btn.primary { border-color:transparent; background:var(--ruby); color:#fff; }
.mini-btn:hover { transform:translateY(-1px); box-shadow:0 6px 15px rgba(90,26,43,.08); }
.stage-select,.status-select { width:100%; min-width:125px; border:1px solid var(--line); border-radius:9px; background:#fffdfb; color:var(--ink); padding:7px 8px; font-size:9px; outline:none; }
.stage-select:focus,.status-select:focus { border-color:rgba(138,21,56,.45); box-shadow:0 0 0 3px rgba(138,21,56,.07); }
.pipeline-grid { display:grid; grid-template-columns:repeat(6,minmax(185px,1fr)); gap:10px; overflow-x:auto; padding:2px 2px 8px; }
.pipeline-column { min-width:185px; border:1px solid var(--line); border-radius:15px; background:#fffaf7; padding:10px; align-self:start; }
.pipeline-head { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; border-bottom:1px solid var(--line); padding:2px 2px 9px; margin-bottom:8px; }
.pipeline-head b { display:block; color:var(--wine); font-size:10px; }
.pipeline-head span { display:block; margin-top:3px; color:var(--muted); font-size:8px; }
.pipeline-head > strong { color:var(--ruby); font-size:10px; text-align:right; }
.deal-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:8px; box-shadow:0 4px 14px rgba(90,26,43,.035); }
.deal-top { display:flex; justify-content:space-between; gap:8px; }
.deal-top b { color:var(--ink); font-size:10px; line-height:1.35; }
.deal-top span { flex:0 0 auto; color:var(--gold); font-weight:800; font-size:9px; }
.deal-card p { margin:5px 0 7px; color:var(--muted); font-size:9px; }
.deal-card > strong { display:block; color:var(--ruby); font-size:11px; }
.deal-card small { display:block; color:var(--muted); margin:4px 0 8px; font-size:8px; }
.pipeline-empty { text-align:center; padding:20px 8px; color:var(--muted); font-size:9px; border:1px dashed var(--line); border-radius:10px; background:#fff; }
.report-kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.report-kpi { border:1px solid var(--line); border-radius:15px; background:linear-gradient(180deg,#fff,#fffaf7); padding:14px; min-width:0; }
.report-kpi span,.report-kpi small { display:block; color:var(--muted); font-size:9px; }
.report-kpi strong { display:block; color:var(--wine); font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size:21px; margin:6px 0 4px; overflow-wrap:anywhere; }
.report-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.report-grid > div { border:1px solid var(--line); border-radius:15px; padding:13px; background:#fffdfb; min-width:0; }
.metric-list { display:grid; gap:7px; }
.metric-list > div { display:flex; justify-content:space-between; gap:12px; align-items:center; border-bottom:1px solid var(--line); padding:8px 2px; font-size:9px; }
.metric-list > div:last-child { border-bottom:0; }
.metric-list span { color:var(--muted); }
.metric-list b { color:var(--wine); text-align:right; }
@media (max-width: 980px) { .report-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); } .report-grid { grid-template-columns:1fr; } }
@media (max-width: 520px) { .report-kpis { grid-template-columns:1fr; } .subhead { align-items:flex-start; flex-direction:column; } }

/* V7 • Storage workspace / approval center / operations */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.field select { width:100%; border:1px solid var(--line); border-radius:12px; padding:11px 12px; outline:none; background:#fffdfb; color:var(--ink); min-width:0; }
.field select:focus { border-color:rgba(138,21,56,.45); box-shadow:0 0 0 3px rgba(138,21,56,.08); }
.backup-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.approval-stack { display:grid; gap:24px; }
.inline-actions { display:flex; flex-wrap:wrap; gap:7px; }
.muted-line { color:var(--muted); font-size:9px; overflow-wrap:anywhere; }
.ops-stats { margin-bottom:0; }
.ops-list { display:grid; gap:0; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ops-list > div { display:grid; grid-template-columns:minmax(120px,.7fr) minmax(0,1.3fr); gap:14px; align-items:center; padding:11px 12px; border-bottom:1px solid var(--line); background:#fffdfb; min-width:0; }
.ops-list > div:last-child { border-bottom:0; }
.ops-list span { color:var(--muted); font-size:10px; }
.ops-list b { color:var(--wine); font-size:10px; text-align:right; overflow-wrap:anywhere; min-width:0; }
.break-text { overflow-wrap:anywhere; word-break:break-word; }
code { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.92em; background:#f7ecef; color:var(--wine); border-radius:6px; padding:2px 5px; overflow-wrap:anywhere; }
#uploadProgress { overflow-wrap:anywhere; }
button:disabled { opacity:.58; cursor:not-allowed; }
@media (max-width: 1180px) { .backup-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) {
  .form-grid,.backup-grid { grid-template-columns:1fr; }
  .inline-actions { display:grid; grid-template-columns:1fr; min-width:130px; }
  .inline-actions button { width:100%; }
  .ops-list > div { grid-template-columns:1fr; gap:5px; }
  .ops-list b { text-align:left; }
}


/* V13 CEO Dashboard + Production Readiness */
.ceo-filter{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin:0 0 18px}.ceo-filter .field{min-width:170px;margin:0}.ceo-lower{margin-top:20px}.trend-bars{display:grid;gap:10px}.trend-row{display:grid;grid-template-columns:74px minmax(90px,1fr) 120px minmax(90px,1fr) 120px;gap:8px;align-items:center;font-size:12px}.trend-track{height:8px;border-radius:999px;background:#eadfd9;overflow:hidden}.trend-track i{display:block;height:100%;background:var(--ruby);border-radius:999px}.trend-track.expense i{background:var(--gold)}.alert-grid{display:grid;gap:10px}.alert-card{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:4px;background:#fff}.alert-card.high{border-left:4px solid var(--ruby)}.alert-card.medium{border-left:4px solid var(--gold)}.alert-card span{color:var(--muted);font-size:13px;line-height:1.45}.success-guard{border-color:#bed8c4}.readiness-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.readiness-head div{display:grid;gap:2px}.readiness-head strong{font-size:28px;color:var(--wine)}.readiness-list{display:grid;gap:8px}.readiness-item{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px}.readiness-item>span{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800}.readiness-item.ok>span{background:#e8f5eb;color:#236a35}.readiness-item.bad>span{background:#fbe9ed;color:var(--ruby)}.readiness-item div{display:grid;gap:2px;min-width:0}.readiness-item small{color:var(--muted);line-height:1.35}.readiness-item em{font-style:normal;font-size:10px;letter-spacing:.06em;color:var(--muted)}
@media(max-width:900px){.trend-row{grid-template-columns:70px 1fr 92px}.trend-row .trend-track.expense,.trend-row .trend-track.expense+b{display:none}}

/* V13 visual safety: chống đè/tràn chữ trên desktop/tablet/mobile */
*,*::before,*::after{box-sizing:border-box}
.card,.panel,.table-wrap,.sidebar,.main,.content,.modal,.modal-card{min-width:0}
button,input,select,textarea,th,td,.nav-item,.metric,.kpi,.chip,.badge{max-width:100%}
button,.nav-item,.chip,.badge{overflow-wrap:anywhere}
table{width:100%;border-collapse:collapse}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
img,svg,canvas{max-width:100%;height:auto}
@media (max-width:560px){.toolbar,.actions,.filters{flex-wrap:wrap}.modal-card{width:calc(100vw - 24px);max-height:calc(100vh - 24px);overflow:auto}}

/* ============================================================
   V14 UI — Module workspace styles (bo sung: goi v14 thieu CSS)
   ============================================================ */
.module-hero{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:26px 28px;margin-bottom:22px;}
.module-hero-main{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.module-identity{display:flex;gap:18px;align-items:flex-start;min-width:260px;flex:1;}
.module-symbol{width:54px;height:54px;flex:none;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,var(--ruby),var(--gold));color:#fff;font-size:24px;font-weight:800;box-shadow:0 12px 26px rgba(138,21,56,.22);}
.module-eyebrow{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:700;color:var(--gold);margin-bottom:4px;}
.module-identity h2{margin:0 0 6px;font-size:26px;color:var(--wine);line-height:1.15;}
.module-identity p{margin:0;color:var(--muted);font-size:14px;max-width:520px;}
.module-scope{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 16px;min-width:200px;}
.module-scope span{display:block;text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--muted);font-weight:700;}
.module-scope strong{display:block;color:var(--wine);font-size:15px;margin:4px 0 2px;}
.module-scope small{color:var(--muted);font-size:11px;}
.module-flow-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
.module-caption{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:700;color:var(--muted);margin-bottom:8px;}
.module-flow-map{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.module-flow-map i{color:var(--gold);font-style:normal;}
.flow-chip{border:1px solid var(--line);background:var(--white);color:var(--wine);border-radius:999px;padding:7px 14px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.16s;}
.flow-chip:hover{border-color:var(--ruby);color:var(--ruby);}
.flow-chip.current{background:linear-gradient(145deg,var(--ruby),var(--wine));color:#fff;border-color:transparent;}
.module-links{display:flex;gap:10px;flex-wrap:wrap;}
.module-link{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--white);color:var(--wine);border-radius:12px;padding:9px 15px;font-size:13px;font-weight:600;cursor:pointer;transition:.16s;}
.module-link:hover{border-color:var(--ruby);color:var(--ruby);transform:translateY(-1px);}
.module-link span{color:var(--gold);}

.module-layout{display:grid;grid-template-columns:minmax(0,1fr) 328px;gap:22px;align-items:start;}
.module-workspace{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:22px 24px;}
.workspace-toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line);}
.workspace-toolbar h3{margin:2px 0 0;color:var(--wine);font-size:19px;}
.workspace-actions{display:flex;gap:10px;flex-wrap:wrap;}

.module-sidecard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:20px 22px;position:sticky;top:20px;}
.sidecard-head span{text-transform:uppercase;letter-spacing:.1em;font-size:10px;color:var(--muted);font-weight:700;}
.sidecard-head b{display:block;color:var(--wine);font-size:17px;margin-top:3px;}
.sidecard-rules{margin-top:16px;display:flex;flex-direction:column;gap:12px;}
.sidecard-rules>div{display:flex;gap:12px;align-items:flex-start;}
.sidecard-rules span{width:24px;height:24px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--ivory);color:var(--ruby);font-weight:700;font-size:12px;border:1px solid var(--line);}
.sidecard-rules p{margin:0;font-size:13px;color:var(--ink);line-height:1.45;}
.sidecard-lock{margin-top:18px;padding:14px;border-radius:var(--radius-md);background:linear-gradient(145deg,rgba(138,21,56,.06),rgba(197,141,68,.06));border:1px solid var(--line);display:flex;gap:12px;align-items:flex-start;}
.sidecard-lock span{font-size:18px;}
.sidecard-lock p{margin:0;font-size:12.5px;color:var(--wine);line-height:1.45;}

.module-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:20px;}
.module-kpi{background:var(--ivory);border:1px solid var(--line);border-radius:var(--radius-md);padding:16px 18px;border-left:4px solid var(--ruby);}
.module-kpi span{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:10.5px;color:var(--muted);font-weight:700;}
.module-kpi strong{display:block;font-size:26px;color:var(--ink);margin:8px 0 2px;line-height:1;}
.module-kpi small{color:var(--muted);font-size:12px;}
.module-kpi.gold{border-left-color:var(--gold);}
.module-kpi.wine{border-left-color:var(--wine);}
.module-kpi.success{border-left-color:var(--success);}
.module-kpi.warning{border-left-color:var(--warning);}
.module-kpi.danger{border-left-color:var(--danger);}

.data-section{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px 20px;margin-bottom:16px;}
.data-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px;}
.data-section-head h4{margin:0;color:var(--wine);font-size:16px;}
.data-section-head p{margin:3px 0 0;color:var(--muted);font-size:12.5px;max-width:560px;}
.data-count{background:var(--ivory);border:1px solid var(--line);color:var(--wine);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;white-space:nowrap;}
.data-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.data-stack{display:flex;flex-direction:column;gap:16px;}

.compact-list{display:flex;flex-direction:column;gap:8px;}
.compact-list>*{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--ivory);font-size:13px;}

.mini-metrics{display:flex;flex-wrap:wrap;gap:10px;}
.mini-metric{background:var(--ivory);border:1px solid var(--line);border-radius:12px;padding:9px 14px;min-width:110px;}
.mini-metric span{display:block;font-size:11px;color:var(--muted);}
.mini-metric b{display:block;color:var(--wine);font-size:17px;margin-top:2px;}

.timeline-list{display:flex;flex-direction:column;gap:0;position:relative;}
.timeline-list>*{position:relative;padding:0 0 16px 22px;border-left:2px solid var(--line);}
.timeline-list>*:last-child{border-left-color:transparent;padding-bottom:0;}
.timeline-list>*::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--ruby);border:2px solid var(--white);box-shadow:0 0 0 1px var(--line);}

.source-pill{display:inline-block;background:rgba(197,141,68,.14);color:var(--wine);border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;}
.progress-cell{display:flex;align-items:center;gap:8px;}
.progress-cell>span{flex:1;height:8px;border-radius:999px;background:var(--sand);overflow:hidden;min-width:80px;}
.progress-cell>span>i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ruby),var(--gold));}

.report-rule{margin-top:14px;}
.v14-report{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
.danger-text{color:var(--danger);font-weight:600;}

.module-loading{display:flex;align-items:center;gap:16px;padding:26px;color:var(--muted);}
.module-loading strong{display:block;color:var(--wine);font-size:15px;}
.module-loading span{font-size:12.5px;}
.loading-ring{width:34px;height:34px;flex:none;border-radius:50%;border:3px solid var(--sand);border-top-color:var(--ruby);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.module-empty{text-align:center;padding:34px 20px;color:var(--muted);}
.module-empty>div{font-size:30px;color:var(--gold);margin-bottom:8px;}
.module-empty strong{display:block;color:var(--wine);font-size:15px;margin-bottom:4px;}
.module-empty span{font-size:13px;}
.module-error{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--radius-md);background:rgba(163,33,63,.06);border:1px solid rgba(163,33,63,.25);}
.module-error span{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--danger);color:#fff;font-weight:700;}
.module-error strong{display:block;color:var(--danger);}

.mini-btn.ai-preview{border-color:var(--gold);color:var(--wine);}
.mini-btn.ai-execute,.mini-btn.ai-execute.primary{background:var(--ruby);color:#fff;border-color:transparent;}
.mini-btn.ai-edit-plan{color:var(--wine);}
.mini-btn.ai-rollback,.mini-btn.reject-ai{border-color:var(--danger);color:var(--danger);}
.mini-btn.approve-ai,.mini-btn.approve-structure{background:var(--success);color:#fff;border-color:transparent;}
.mini-btn.download-asset{border-color:var(--gold);color:var(--wine);}

@media (max-width:980px){
  .module-layout{grid-template-columns:minmax(0,1fr);}
  .module-sidecard{position:static;}
  .data-grid-2,.v14-report{grid-template-columns:minmax(0,1fr);}
}

/* V14 UI+ — Form modal nhập liệu */
.form-modal{max-width:560px;width:calc(100vw - 40px);max-height:calc(100vh - 60px);display:flex;flex-direction:column;}
.form-modal h3{margin:0 0 4px;color:var(--wine);}
.form-scope{margin:0 0 14px;font-size:12.5px;color:var(--muted);}
.form-scope b{color:var(--wine);}
.form-body{overflow-y:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;padding-right:4px;}
.form-body .field{margin:0;}
.form-body .field:has(textarea),.form-body .field:has(.line-items){grid-column:1 / -1;}
.form-body label{display:block;font-size:12.5px;font-weight:600;color:var(--wine);margin-bottom:5px;}
.form-body label .req{color:var(--danger);font-style:normal;}
.form-body input,.form-body select,.form-body textarea{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);font:inherit;font-size:13.5px;}
.form-body input:focus,.form-body select:focus,.form-body textarea:focus{outline:none;border-color:var(--ruby);box-shadow:0 0 0 3px rgba(138,21,56,.10);}
.line-items{display:flex;flex-direction:column;gap:8px;margin-bottom:8px;}
.line-row{display:grid;grid-template-columns:minmax(0,2fr) 72px minmax(0,1fr) 34px;gap:8px;align-items:center;}
.line-row .li-del{padding:0;height:34px;color:var(--danger);border-color:var(--line);}
.form-err{margin-top:12px;padding:10px 12px;border-radius:10px;background:rgba(163,33,63,.08);border:1px solid rgba(163,33,63,.3);color:var(--danger);font-size:13px;}
.form-modal .modal-actions{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);}
@media (max-width:560px){ .form-body{grid-template-columns:minmax(0,1fr);} .line-row{grid-template-columns:minmax(0,1fr) 60px minmax(0,1fr) 30px;} }

/* V14+ — nút thao tác & khu người dùng */
.mini-btn.danger{border-color:rgba(163,33,63,.45);color:var(--danger);}
.mini-btn.danger:hover{background:rgba(163,33,63,.08);}
.owner-actions{display:flex;gap:8px;margin-top:10px;}
.owner-actions .logout-btn{flex:1;margin-top:0;font-size:12px;padding:8px 6px;}
.form-body input:disabled{background:var(--ivory);color:var(--muted);cursor:not-allowed;}

/* V14+ — sidebar dùng icon emoji thay chữ cái */
.nav-icon{font-size:17px;line-height:1;border-color:rgba(255,255,255,.10);background:rgba(255,255,255,.04);}
.nav-item.active .nav-icon{background:rgba(197,141,68,.18);}
.nav-item>span:not(.nav-icon){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}