/* =============================================================================
 * styles.css — arksdelta. PLUS-Y 運用コンソール
 * keiei-app (notion.css/notion-theme.css) のレイアウト思想と
 * Notion系モノトーン配色を踏襲。
 * 左サイドバー＋メイン＋カード＋テーブル＋ページピーク（詳細パネル）。
 * ========================================================================== */
:root{
  --navy:#37352f; --navy-2:#4b4944; --navy-3:#2f2d29;
  --orange:#2383e2; --orange-2:#1a6fc0; --orange-soft:#f1f1ef;
  --ink:#1f2733; --muted:#6b7280; --desc:#9aa3af;
  --line:#e6e9ee; --line-2:#d6dbe3; --bg:#ffffff; --panel:#f7f9fc;
  --sidebar:#0E2747; --sidebar-hover:#1a3a63; --sidebar-active:#1C4276;
  --green:#178d52; --green-soft:#e3f3ea; --red:#d23f3f; --red-soft:#fcebeb;
  --amber:#b5790a; --amber-soft:#fbf3df; --blue:#2b6cb0; --blue-soft:#e6f0fb;
  --radius:8px; --shadow:0 1px 3px rgba(16,24,40,.08); --shadow-lg:0 8px 28px rgba(16,24,40,.16);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--panel); color:var(--ink);
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  font-size:14px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.brandmark{ font-weight:800; letter-spacing:-.3px; }
.brandmark .dt{ color:var(--orange); }

/* ---------- AUTH GATE ---------- */
#gate{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:#fbfbfa; }
#gate .gcard{ background:#fff; border-radius:14px; padding:40px 38px; width:400px; box-shadow:var(--shadow-lg); }
#gate .glogo{ font-size:26px; font-weight:800; letter-spacing:-.5px; color:var(--navy); }
#gate .glogo .dt{ color:var(--orange); }
#gate .gtitle{ font-size:15px; font-weight:600; color:var(--ink); margin-top:14px; }
#gate .gtenant{ display:inline-flex; align-items:center; gap:7px; margin-top:8px; background:var(--orange-soft); color:#a85510;
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:20px; }
#gate .gtenant .pdot{ width:7px; height:7px; border-radius:50%; background:var(--orange); }
#gate label{ display:block; font-size:12px; color:var(--muted); margin:18px 0 6px; font-weight:500; }
#gate input{ width:100%; border:1px solid var(--line-2); border-radius:8px; padding:11px 13px; font-size:14px; background:#fbfcfe; }
#gate input:focus{ outline:none; border-color:var(--orange); background:#fff; }
#gate button{ width:100%; background:var(--navy); color:#fff; border:0; border-radius:8px; padding:12px; font-size:14px;
  font-weight:600; cursor:pointer; margin-top:20px; transition:.15s; }
#gate button:hover{ background:var(--navy-2); }
#gate .gnote{ font-size:11px; color:var(--desc); margin-top:18px; line-height:1.7; }
#gate .gerr{ color:var(--red); font-size:12px; margin-top:10px; min-height:15px; }

/* ---------- APP SHELL ---------- */
#app{ display:none; }
#app.shown{ display:flex; min-height:100vh; }
.sidebar{ width:248px; flex-shrink:0; background:var(--sidebar); color:#cdd8e8; height:100vh; position:sticky; top:0;
  display:flex; flex-direction:column; overflow-y:auto; }
.sb-brand{ padding:20px 20px 16px; }
.sb-logo{ font-size:21px; font-weight:800; letter-spacing:-.4px; color:#fff; }
.sb-logo .dt{ color:var(--orange); }
.sb-tenant{ display:inline-flex; align-items:center; gap:6px; margin-top:9px; background:#f1f1ef;
  color:#787774; font-size:11px; font-weight:600; padding:4px 10px; border-radius:20px; }
.sb-tenant .pdot{ width:6px; height:6px; border-radius:50%; background:var(--orange); }
.sb-section{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#6f86a8; padding:16px 22px 6px; font-weight:700; }
.nav{ display:flex; flex-direction:column; gap:1px; padding:0 10px; }
.navitem{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:7px; cursor:pointer;
  font-size:13.5px; color:#c2cee0; background:none; border:0; width:100%; text-align:left; line-height:1.3; position:relative; }
.navitem .ic{ width:18px; height:18px; flex-shrink:0; opacity:.9; }
.navitem .ic svg{ width:18px; height:18px; display:block; }
.navitem:hover{ background:var(--sidebar-hover); color:#fff; }
.navitem.active{ background:var(--sidebar-active); color:#fff; font-weight:600; }
.navitem.active::before{ content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--orange); }
.navitem .badge-n{ margin-left:auto; background:var(--orange); color:#fff; font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.sb-spacer{ flex:1; }
.sb-foot{ padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; color:#7e92b0; line-height:1.6; }
.sb-foot .uline{ color:#cdd8e8; font-weight:600; }
.sb-foot button{ background:none; border:0; color:var(--orange-2); cursor:pointer; font-size:11px; padding:0; margin-top:6px; }

.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ height:58px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center;
  gap:14px; padding:0 28px; position:sticky; top:0; z-index:30; }
.topbar .crumb{ font-size:13px; color:var(--muted); }
.topbar .crumb b{ color:var(--ink); font-weight:600; }
.topbar .demo-pill{ margin-left:auto; background:var(--amber-soft); color:var(--amber); font-size:11px; font-weight:600;
  padding:5px 11px; border-radius:20px; display:inline-flex; align-items:center; gap:6px; }
.topbar .demo-pill .ld{ width:7px; height:7px; border-radius:50%; background:var(--amber); }
.topbar .tb-user{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.topbar .avatar{ width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; display:flex;
  align-items:center; justify-content:center; font-size:12px; font-weight:700; }
.scroll{ flex:1; overflow-y:auto; }
.page{ max-width:1180px; margin:0 auto; padding:28px 28px 80px; }
.page.wide{ max-width:1320px; }

.view{ display:none; }
.view.active{ display:block; }

/* ---------- HEADINGS ---------- */
.phead{ margin-bottom:20px; }
.phead h1{ font-size:25px; font-weight:800; letter-spacing:-.4px; margin:0; color:var(--ink); }
.phead .sub{ font-size:13px; color:var(--muted); margin-top:5px; max-width:760px; }
.sect-title{ font-size:15px; font-weight:700; margin:26px 0 12px; color:var(--ink); display:flex; align-items:center; gap:8px; }
.sect-title .tag{ font-size:11px; font-weight:600; color:var(--orange); background:var(--orange-soft); padding:2px 8px; border-radius:5px; }

/* ---------- KPI CARDS ---------- */
.kpis{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:8px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:15px 16px; box-shadow:var(--shadow); }
.kpi .lbl{ font-size:11.5px; color:var(--muted); font-weight:500; min-height:32px; }
.kpi .val{ font-size:23px; font-weight:800; margin-top:6px; letter-spacing:-.5px; color:var(--navy); }
.kpi .val.danger{ color:var(--red); }
.kpi .val.good{ color:var(--green); }
.kpi .sub{ font-size:11px; color:var(--desc); margin-top:4px; }
.kpi .sub.up{ color:var(--green); font-weight:600; }
.kpi .sub.down{ color:var(--red); font-weight:600; }
@media(max-width:1100px){ .kpis{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px){ .kpis{ grid-template-columns:repeat(2,1fr); } }

/* ---------- CARDS / GRID ---------- */
.card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h2{ font-size:15px; font-weight:700; margin:0 0 4px; color:var(--ink); }
.card .desc{ font-size:12px; color:var(--desc); margin:0 0 14px; line-height:1.6; }
.grid2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid3{ display:grid; grid-template-columns:2fr 1fr; gap:16px; }
@media(max-width:920px){ .grid2,.grid3{ grid-template-columns:1fr; } }
.chartbox{ position:relative; height:260px; }
.chartbox.sm{ height:200px; }

/* ---------- TABLES ---------- */
table{ width:100%; border-collapse:collapse; font-size:13px; }
th,td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); }
th{ font-size:11.5px; color:var(--muted); font-weight:600; white-space:nowrap; background:#fafbfd; cursor:pointer; user-select:none; }
th.num,td.num{ text-align:right; font-variant-numeric:tabular-nums; }
tbody tr{ cursor:default; }
tbody tr.clickable{ cursor:pointer; }
tbody tr.clickable:hover{ background:var(--panel); }
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:#fff; box-shadow:var(--shadow); }
.tablewrap table th{ background:#fafbfd; }
.tablewrap table tr:last-child td{ border-bottom:0; }

/* ---------- PILLS / BADGES ---------- */
.pill{ display:inline-block; padding:2px 9px; border-radius:5px; font-size:11.5px; font-weight:600; line-height:1.6; white-space:nowrap; }
.pill-green{ background:var(--green-soft); color:#0f6b3d; }
.pill-red{ background:var(--red-soft); color:#b02a2a; }
.pill-amber{ background:var(--amber-soft); color:var(--amber); }
.pill-blue{ background:var(--blue-soft); color:#1f5694; }
.pill-gray{ background:#eef0f4; color:#5b6573; }
.pill-navy{ background:#e7edf6; color:var(--navy); }
.pill-orange{ background:var(--orange-soft); color:#a85510; }
.pill-purple{ background:#ede0f3; color:#492f64; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; vertical-align:middle; margin-right:5px; }

/* ---------- TOOLBAR ---------- */
.toolbar{ display:flex; gap:8px; margin-bottom:14px; flex-wrap:wrap; align-items:center; }
.toolbar input,.toolbar select{ border:1px solid var(--line-2); border-radius:7px; padding:8px 11px; font-size:13px; background:#fff; color:var(--ink); }
.toolbar input:focus,.toolbar select:focus{ outline:none; border-color:var(--orange); }
.toolbar .search{ min-width:220px; }
.toolbar .count{ font-size:12px; color:var(--desc); margin-left:auto; }
.tabs{ display:flex; gap:4px; background:#eef1f6; padding:4px; border-radius:9px; margin-bottom:16px; width:max-content; }
.tab{ border:0; background:none; padding:7px 16px; border-radius:7px; font-size:13px; font-weight:600; color:var(--muted); cursor:pointer; }
.tab.active{ background:#fff; color:var(--navy); box-shadow:var(--shadow); }

/* ---------- BUTTONS ---------- */
.btn{ border:0; border-radius:7px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:.15s; }
.btn-primary{ background:var(--orange); color:#fff; }
.btn-primary:hover{ background:#d96b16; }
.btn-navy{ background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-2); }
.btn-ghost{ background:#fff; color:var(--navy); border:1px solid var(--line-2); }
.btn-ghost:hover{ background:var(--panel); }
.btn-sm{ padding:5px 11px; font-size:12px; }
.btn:disabled{ opacity:.5; cursor:default; }

/* ---------- PAGE PEEK (詳細パネル) ---------- */
.peek-overlay{ position:fixed; inset:0; background:rgba(14,39,71,.35); z-index:80; display:none; }
.peek-overlay.open{ display:block; }
.peek{ position:fixed; top:0; right:0; height:100vh; width:560px; max-width:94vw; background:#fff; z-index:90;
  box-shadow:-12px 0 40px rgba(16,24,40,.22); transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; }
.peek.open{ transform:translateX(0); }
.peek-head{ padding:18px 22px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; gap:12px; }
.peek-head .pk-title{ font-size:16px; font-weight:700; flex:1; line-height:1.45; }
.peek-head .pk-sku{ font-size:11.5px; color:var(--muted); margin-top:3px; font-variant-numeric:tabular-nums; }
.peek-close{ background:none; border:0; font-size:22px; color:var(--muted); cursor:pointer; line-height:1; padding:0; }
.peek-body{ padding:20px 22px; overflow-y:auto; flex:1; }
.peek-sect{ font-size:12px; font-weight:700; color:var(--orange); text-transform:uppercase; letter-spacing:.05em; margin:18px 0 10px; }
.peek-sect:first-child{ margin-top:0; }
.ai-diag{ background:linear-gradient(135deg,#102a4d,#1C4276); color:#dbe6f4; border-radius:10px; padding:16px; font-size:13px; line-height:1.7; }
.ai-diag .ai-h{ display:flex; align-items:center; gap:8px; font-weight:700; color:#fff; margin-bottom:8px; font-size:12.5px; }
.ai-diag .ai-h .spark{ width:7px; height:7px; border-radius:50%; background:var(--nt-blue); box-shadow:0 0 0 4px rgba(35,131,226,.12); }
.ai-diag b{ color:#fff; }

.priceboard{ display:flex; flex-direction:column; gap:6px; }
.prow{ display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:8px; font-size:13px; }
.prow .pst{ font-weight:600; min-width:96px; }
.prow .ppr{ margin-left:auto; font-variant-numeric:tabular-nums; font-weight:700; }
.prow.win{ border-color:#bfe3cd; background:var(--green-soft); }
.prow.lose{ border-color:#f3c7c7; background:var(--red-soft); }
.prow.reco{ border-color:var(--orange); background:var(--orange-soft); }
.prow .ptag{ font-size:10.5px; font-weight:700; padding:1px 7px; border-radius:5px; }

/* ---------- ACTION BRIDGE ---------- */
.bridge{ display:grid; grid-template-columns:1fr 56px 1fr; gap:0; align-items:stretch; margin-bottom:16px; }
.bridge-col{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.bridge-col h3{ font-size:13px; font-weight:700; margin:0 0 4px; }
.bridge-col .ch{ font-size:11px; color:var(--muted); margin-bottom:12px; }
.bridge-mid{ display:flex; align-items:center; justify-content:center; }
.bridge-mid svg{ width:30px; height:30px; color:var(--orange); }
.insight{ border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; }
.insight .isrc{ font-size:11px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:6px; }
.insight .imp{ margin-left:auto; }
.insight .itxt{ font-size:12.5px; line-height:1.6; margin:8px 0; color:var(--ink); }
.insight .imet{ font-size:11px; color:var(--orange); font-weight:700; }
.insight .iact{ background:var(--orange-soft); border:1px dashed var(--orange-2); border-radius:7px; padding:10px; margin-top:10px; font-size:12px; line-height:1.6; }
.insight .iact .ah{ font-size:10.5px; font-weight:700; color:#a85510; letter-spacing:.04em; margin-bottom:5px; display:flex; align-items:center; gap:6px; }
.insight .iact .ah svg{ width:13px; height:13px; flex-shrink:0; }
.notif .nh svg{ width:14px; height:14px; flex-shrink:0; }
.rcol .rch svg{ width:14px; height:14px; }
.insight.done{ opacity:.55; }
.insight.done .iact{ background:var(--green-soft); border-color:#bfe3cd; }

.q-item{ display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:#fff; box-shadow:var(--shadow); }
.q-item .qmain{ flex:1; min-width:0; }
.q-item .qname{ font-size:13px; font-weight:600; }
.q-item .qmeta{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.q-item .qprice{ text-align:right; font-variant-numeric:tabular-nums; }
.q-item .qprice .from{ color:var(--muted); text-decoration:line-through; font-size:12px; }
.q-item .qprice .to{ color:var(--orange); font-weight:800; font-size:16px; }
.q-stores{ display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.q-stores .st{ font-size:10px; padding:2px 7px; border-radius:5px; background:#eef1f6; color:#5b6573; }
.q-stores .st.api{ background:#d3e5ef; color:#28456c; }
.q-stores .st.csv{ background:#fdecc8; color:#89632a; }
.q-stores .st.review{ background:#e3e2e0; color:#787774; }
.q-stores .st.synced{ background:var(--green-soft); color:#0f6b3d; }
.q-item.executed{ background:var(--green-soft); border-color:#bfe3cd; }
.operator-row{ display:flex; align-items:center; gap:8px; margin:10px 0 14px; color:var(--nt-text-2); font-size:13px; }
.operator-row select{ border:1px solid var(--nt-line-2); border-radius:4px; padding:5px 8px; background:#fff; color:var(--nt-text); }

/* ---------- PRODUCT MASTER EXPAND ---------- */
.chan-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
@media(max-width:700px){ .chan-grid{ grid-template-columns:1fr; } }
.chan{ border:1px solid var(--line); border-radius:8px; padding:12px 14px; }
.chan .cmoll{ font-size:11px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:8px; }
.chan .ctitle{ font-size:12.5px; line-height:1.55; margin:8px 0; }
.chan .clen{ font-size:10.5px; color:var(--muted); }
.chan .clen .over{ color:var(--red); font-weight:700; }
.lenbar{ height:5px; border-radius:3px; background:#eef1f6; margin-top:5px; overflow:hidden; }
.lenbar i{ display:block; height:100%; background:var(--nt-blue); }
.lenbar i.over{ background:var(--red); }
.master-row td{ background:var(--panel); }
.expand-cell{ padding:16px 18px; background:#fbfcfe; }

/* ---------- CONSISTENCY ---------- */
.diff-cell{ font-variant-numeric:tabular-nums; }
.diff-bad{ background:var(--red-soft); color:#b02a2a; font-weight:700; border-radius:5px; }
td.cellpad{ padding:6px 8px; }
td .cellbox{ padding:5px 9px; border-radius:6px; display:inline-block; }

/* ---------- NOTIFICATIONS ---------- */
.notif{ border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:12px; background:#fff; box-shadow:var(--shadow); }
.notif .nh{ padding:9px 14px; font-size:12px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px; }
.notif .nh.app{ background:var(--nt-blue); }
.notif .nh.slack{ background:#4a154b; }
.notif .nh.mail{ background:var(--navy); }
.notif .nb{ padding:13px 15px; font-size:12.5px; line-height:1.65; }
.notif .nt{ font-size:10.5px; color:var(--muted); margin-top:8px; }
.rule-card{ display:flex; align-items:center; gap:14px; padding:13px 16px; border:1px solid var(--line); border-radius:8px; margin-bottom:10px; background:#fff; }
.rule-card .rm{ flex:1; }
.rule-card .rn{ font-size:13px; font-weight:600; }
.rule-card .rd{ font-size:11.5px; color:var(--muted); margin-top:3px; }
.rule-card .rth{ font-size:11px; color:var(--navy); margin-top:5px; }
.toggle{ position:relative; width:42px; height:24px; border-radius:13px; background:#cfd6e0; cursor:pointer; transition:.18s; flex-shrink:0; border:0; }
.toggle.on{ background:var(--green); }
.toggle::after{ content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.2); }
.toggle.on::after{ transform:translateX(18px); }

/* ---------- ROADMAP (kanban) ---------- */
.roadmap{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media(max-width:920px){ .roadmap{ grid-template-columns:1fr; } }
.rcol{ background:var(--panel); border-radius:10px; padding:14px; }
.rcol .rch{ font-size:12.5px; font-weight:800; display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.rcol .rch .cnt{ margin-left:auto; font-size:11px; font-weight:700; color:var(--muted); }
.rcol.live .rch{ color:var(--green); }
.rcol.dev .rch{ color:var(--blue); }
.rcol.req .rch{ color:var(--orange); }
.rcard{ background:#fff; border:1px solid var(--line); border-radius:8px; padding:12px 13px; margin-bottom:10px; box-shadow:var(--shadow); }
.rcard .rn{ font-size:13px; font-weight:700; }
.rcard .rd{ font-size:11.5px; color:var(--muted); margin-top:5px; line-height:1.55; }
.rcard .rtags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }
.rcard .rtags .pill{ font-size:10.5px; padding:2px 6px; }
.rcard .rstat{ display:inline-block; margin-top:9px; font-size:10.5px; font-weight:700; padding:2px 9px; border-radius:12px; }
.rcard .rstat.live{ background:var(--green-soft); color:#0f6b3d; }
.rcard .rstat.dev{ background:var(--blue-soft); color:#1f5694; }
.rcard .rstat.req{ background:var(--orange-soft); color:#a85510; }
.platform-note{ background:linear-gradient(135deg,#102a4d,#1C4276); color:#dbe6f4; border-radius:10px; padding:16px 18px; font-size:13px; line-height:1.7; margin-bottom:18px; }
.platform-note b{ color:#fff; }
.platform-note .pn-h{ font-weight:800; color:#fff; font-size:14px; margin-bottom:6px; }

/* ---------- TIMELINE ---------- */
.timeline{ position:relative; }
.tl-item{ display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.tl-click{ width:100%; border-left:0; border-right:0; border-top:0; background:transparent; color:inherit; text-align:left; cursor:pointer; font:inherit; }
.tl-click:hover{ background:#f8f8f7; }
.tl-item:last-child{ border-bottom:0; }
.tl-time{ font-size:11px; color:var(--muted); min-width:46px; font-variant-numeric:tabular-nums; padding-top:2px; }
.tl-dot{ width:9px; height:9px; border-radius:50%; margin-top:5px; flex-shrink:0; }
.tl-txt{ font-size:12.5px; line-height:1.5; flex:1; }
.tl-txt b{ font-weight:700; }

/* ---------- FOOTER NOTE ---------- */
.demo-banner{ background:var(--amber-soft); border:1px solid #f0dca0; color:#8a5a00; border-radius:8px; padding:11px 15px;
  font-size:12px; line-height:1.65; margin-bottom:18px; }
.demo-banner b{ color:#6e4700; }
.page-foot{ margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:11px; color:var(--desc); line-height:1.7; }
.page-foot b{ color:var(--muted); }

/* ---------- MOBILE ---------- */
.hamburger{ display:none; }
@media(max-width:880px){
  .sidebar{ position:fixed; left:0; top:0; z-index:110; transform:translateX(-100%); transition:transform .2s; }
  .sidebar.open{ transform:translateX(0); }
  .hamburger{ display:flex; position:fixed; top:12px; left:12px; z-index:120; width:38px; height:38px; align-items:center;
    justify-content:center; background:var(--navy); color:#fff; border:0; border-radius:8px; cursor:pointer; }
  .page{ padding:20px 16px 70px; }
  .topbar{ padding:0 16px 0 60px; }
}
.flash{ animation:flash 1s ease; }
@keyframes flash{ 0%{ background:rgba(35,131,226,.10);} 100%{ background:transparent;} }
.syncing{ animation:pulse 1.1s ease infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:.4;} }

.global-search-trigger{
  display:flex; align-items:center; gap:7px; min-width:270px; max-width:380px; flex:1;
  border:1px solid var(--nt-line-2); background:#fbfbfa; color:var(--nt-text-2);
  border-radius:5px; padding:5px 8px; font:inherit; cursor:pointer;
}
.global-search-trigger svg{ width:15px; height:15px; color:var(--nt-text-3); flex-shrink:0; }
.global-search-trigger span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.global-search-trigger kbd{ margin-left:auto; border:1px solid var(--nt-line-2); border-radius:4px; padding:1px 5px; font-size:11px; color:var(--nt-text-3); background:#fff; }
.global-search-trigger:hover{ background:var(--nt-hover); color:var(--nt-text); }
.global-search-overlay{
  position:fixed; inset:0; z-index:160; display:none; align-items:flex-start; justify-content:center;
  background:rgba(15,15,15,.20); padding-top:10vh;
}
.global-search-overlay.open{ display:flex; }
.global-search-modal{ width:min(720px,92vw); max-height:76vh; background:#fff; border:1px solid var(--nt-line); border-radius:8px; box-shadow:0 12px 34px rgba(15,15,15,.18); overflow:hidden; }
.global-search-head{ display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--nt-line); }
.global-search-head svg{ width:18px; height:18px; color:var(--nt-text-3); }
.global-search-head input{ flex:1; border:0; outline:0; font:inherit; font-size:15px; }
.global-search-head span{ color:var(--nt-text-3); font-size:12px; border:1px solid var(--nt-line-2); border-radius:4px; padding:1px 6px; }
.global-search-results{ max-height:62vh; overflow:auto; padding:8px; }
.global-search-group{ color:var(--nt-text-3); font-size:12px; font-weight:600; padding:8px 8px 4px; }
.global-search-item{ width:100%; display:grid; grid-template-columns:96px 1fr; gap:2px 10px; border:0; background:transparent; color:var(--nt-text); text-align:left; border-radius:5px; padding:8px; cursor:pointer; font:inherit; }
.global-search-item:hover,.global-search-item.sel{ background:var(--nt-hover); }
.global-search-item .g-type{ grid-row:1 / span 2; color:var(--nt-text-3); font-size:12px; }
.global-search-item .g-title{ font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.global-search-item .g-sub{ color:var(--nt-text-2); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-empty{ color:var(--nt-text-3); font-size:13px; padding:20px; text-align:center; }
.clickable-kpi{ cursor:pointer; transition:background .15s,border-color .15s; }
.clickable-kpi:hover{ background:#fff; border-color:#d7d5d2; }
.drill-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.drill-list.in-peek{ margin-top:0; }
.drill-row{ display:flex; align-items:center; gap:10px; width:100%; border:1px solid var(--nt-line); background:#fff; border-radius:5px; padding:8px 10px; cursor:pointer; font:inherit; color:var(--nt-text); }
.drill-row:hover{ background:var(--nt-hover); }
.drill-row b{ margin-left:auto; color:var(--navy); font-variant-numeric:tabular-nums; }
.onboarding{ display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid #f1cfb0; background:#fff7ef; border-radius:6px; padding:12px 14px; margin:14px 0 18px; }
.ob-copy{ display:flex; flex-direction:column; gap:3px; }
.ob-copy b{ color:#854c1d; }
.ob-copy span{ color:var(--nt-text-2); font-size:13px; }
.ob-actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.ob-x{ border:0; background:transparent; color:var(--nt-text-3); cursor:pointer; font-size:20px; line-height:1; padding:2px 6px; border-radius:4px; }
.ob-x:hover{ background:#f3e5d8; color:var(--nt-text); }
.mini-select{ max-width:120px; border:1px solid var(--nt-line-2); border-radius:4px; padding:4px 6px; background:#fff; color:var(--nt-text); font-size:12px; }
.mini-check{ display:inline-flex; align-items:center; gap:4px; color:var(--nt-text-2); font-size:12px; cursor:pointer; }
tr.resolved-row td{ background:#f7fbf8; color:var(--nt-text-2); }
tr.resolved-row td:first-child{ box-shadow:inset 3px 0 0 var(--green); }
.deploy-status{ margin-top:9px; color:var(--nt-text-2); font-size:12px; line-height:1.7; background:#fbfbfa; border:1px solid var(--nt-line); border-radius:5px; padding:10px; }
.step-list{ display:flex; flex-direction:column; gap:8px; }
.step-row{ display:flex; align-items:center; gap:10px; border:1px solid var(--nt-line); border-radius:5px; padding:9px 10px; background:#fff; }
.step-copy{ flex:1; min-width:0; font-size:13px; }
.step-copy b{ font-weight:500; }
.step-state{ border:1px solid var(--nt-line-2); border-radius:4px; padding:5px 7px; background:#fff; color:var(--nt-text); }
.auto-tags{ display:flex; flex-wrap:wrap; gap:4px; margin-top:6px; }
.automation-policy{
  border:1px solid var(--nt-line); background:#fbfbfa; color:var(--nt-text-2);
  border-radius:6px; padding:12px 14px; margin:14px 0 18px; line-height:1.7;
}
.automation-policy b{ color:var(--nt-text); }
.csv-check{
  border:1px solid var(--nt-line); background:#fbfbfa; border-radius:6px; padding:12px 14px;
  margin:12px 0; display:flex; flex-direction:column; gap:8px;
}
.csv-check.ok{ border-color:var(--tg-green-bg); }
.csv-check.warn{ border-color:var(--tg-yellow-bg); }
.csv-check-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.csv-check-head b{ color:var(--nt-text); }
.csv-check-sub{ color:var(--nt-text-2); font-size:12px; line-height:1.6; }
.csv-check-grid{ display:flex; flex-wrap:wrap; gap:5px; }
.ir-note{
  color:var(--nt-text-2); background:#fbfbfa; border:1px solid var(--nt-line);
  border-radius:6px; padding:10px 12px; line-height:1.7; font-size:13px;
}
.ir-options{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ir-option{ border:1px solid var(--nt-line); background:#fff; border-radius:6px; padding:11px 12px; }
.ir-option-head{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:7px; }
.ir-option-head b{ color:var(--nt-text); }
.ir-grade{
  display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px;
  border-radius:4px; background:var(--nt-hover); color:var(--nt-text); font-weight:700;
}
.ir-option p{ margin:4px 0; color:var(--nt-text-2); font-size:12.5px; line-height:1.55; }
.ir-option p b{ color:var(--nt-text); font-weight:600; }

/* =============================================================================
 * Notion-like refresh overrides
 * ========================================================================== */
:root{
  --nt-text:#37352f; --nt-text-2:#787774; --nt-text-3:#9b9a97;
  --nt-line:#ecebea; --nt-line-2:#e3e2e0; --nt-bg:#ffffff;
  --nt-sidebar:#f7f7f5; --nt-hover:#f1f1ef; --nt-hover-2:#e8e7e4;
  --nt-blue:#2383e2; --nt-radius:3px;
  --tg-default-bg:#e3e2e0; --tg-default-fg:#37352f;
  --tg-gray-bg:#e3e2e0; --tg-gray-fg:#787774;
  --tg-orange-bg:#fadec9; --tg-orange-fg:#854c1d;
  --tg-yellow-bg:#fdecc8; --tg-yellow-fg:#89632a;
  --tg-green-bg:#dbeddb; --tg-green-fg:#2b593f;
  --tg-blue-bg:#d3e5ef; --tg-blue-fg:#28456c;
  --tg-purple-bg:#e8deee; --tg-purple-fg:#492f64;
  --tg-red-bg:#ffe2dd; --tg-red-fg:#6e3630;
}
body{ background:var(--nt-bg); color:var(--nt-text); font-size:14px; }
#gate{ background:#fbfbfa; }
#gate .gcard{ border:1px solid var(--nt-line); border-radius:8px; box-shadow:0 1px 3px rgba(15,15,15,.1); }
#gate input{ border-radius:5px; background:#fbfbfa; border-color:var(--nt-line-2); }
#gate button{ border-radius:5px; background:var(--navy); }

.sidebar{
  width:248px; background:var(--nt-sidebar); color:var(--nt-text-2);
  border-right:1px solid var(--nt-line-2); padding:0; gap:0;
}
.sb-brand{ padding:10px 12px 8px; }
.sb-logo{ color:var(--nt-text); font-size:16px; }
.sb-tenant{
  border-radius:var(--nt-radius); background:#f1f0ee; color:var(--nt-text-2);
  padding:3px 7px; font-size:11px;
}
.sb-section{
  color:var(--nt-text-3); padding:14px 14px 4px; font-size:11px;
  letter-spacing:.03em; text-transform:none;
}
.nav{ padding:0 8px; }
.navitem{
  color:var(--nt-text-2); padding:5px 8px; border-radius:var(--nt-radius);
  font-size:14px; gap:7px;
}
.navitem:hover{ background:var(--nt-hover); color:var(--nt-text); }
.navitem.active{ background:var(--nt-hover-2); color:var(--nt-text); font-weight:500; }
.navitem.active::before{ display:none; }
.navitem .ic{ color:#91918e; }
.navitem .badge-n{ background:var(--orange); border-radius:10px; font-size:10px; padding:1px 7px; }
.sb-foot{ border-top:1px solid var(--nt-line-2); color:var(--nt-text-3); padding:10px 14px; }
.sb-foot .uline{ color:var(--nt-text-2); }

.main{ background:var(--nt-bg); }
.topbar{
  height:45px; border-bottom:1px solid transparent; padding:0 16px; background:#fff;
  gap:8px; position:sticky;
}
.topbar .crumb{ display:flex; align-items:center; gap:6px; font-size:14px; color:var(--nt-text-2); min-width:0; }
.topbar .crumb b{ color:var(--nt-text); font-weight:500; }
.crumb-btn{ border:0; background:none; color:var(--nt-text-2); cursor:pointer; padding:3px 6px; border-radius:var(--nt-radius); font:inherit; }
.crumb-btn:hover{ background:var(--nt-hover); }
.crumb-sep{ color:var(--nt-text-3); }
.env-pills{ margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.topbar .demo-pill{
  margin-left:0; border-radius:var(--nt-radius); background:#f1f0ee; color:var(--nt-text-2);
  padding:3px 7px; font-weight:500;
}
.topbar .demo-pill.tenant{ background:var(--orange-soft); color:#854c1d; }
.topbar .demo-pill .ld{ background:currentColor; }
.topbar .tb-user{ color:var(--nt-text-2); }
.topbar .avatar{ background:var(--navy); border-radius:4px; width:26px; height:26px; }
.page{ padding:0 60px 84px; }
.page.wide{ max-width:none; }

.phead{ padding:48px 0 2px; margin-bottom:0; }
.phead h1{ font-size:30px; color:var(--nt-text); letter-spacing:-.4px; display:flex; align-items:center; gap:10px; margin:0; }
.phead .sub{ color:var(--nt-text-3); font-size:14px; margin:8px 0 0; max-width:860px; }
.db-title-ic{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; color:#91918e; }
.db-title-ic svg{ width:30px; height:30px; }
.viewbar{ display:flex; align-items:center; gap:2px; border-bottom:1px solid var(--nt-line-2); margin-top:10px; }
.viewtab{
  display:flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  color:var(--nt-text-2); font-size:14px; padding:8px 8px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
}
.viewtab svg{ width:15px; height:15px; }
.viewtab:hover,.viewtab.active{ color:var(--nt-text); }
.viewtab.active{ border-bottom-color:var(--nt-text); font-weight:500; }

.demo-banner{
  background:#fbf3db; border-color:#f5e0a3; color:#8a5a00;
  border-radius:6px; margin:14px 0 18px; box-shadow:none;
}
.card,.kpi,.bridge-col,.q-item,.tablewrap,.notif,.rule-card,.rcard{
  border-color:var(--nt-line); border-radius:6px; box-shadow:none;
}
.card h2{ font-size:16px; color:var(--nt-text); }
.card .desc,.phead .sub,.kpi .sub{ color:var(--nt-text-3); }
.kpi{ background:#fbfbfa; }
.kpi .lbl{ color:var(--nt-text-2); min-height:auto; }
.kpi .val{ color:var(--navy); }

.toolbar.db-toolbar,.toolbar{ padding:8px 0 6px; margin-bottom:0; gap:6px; }
.tb-search{ display:flex; align-items:center; gap:6px; border-bottom:1px solid var(--nt-line-2); padding:2px 0; }
.tb-search .ic svg{ width:14px; height:14px; color:var(--nt-text-3); }
.toolbar input,.toolbar select{
  border:0; border-radius:var(--nt-radius); padding:5px 6px; background:transparent; color:var(--nt-text); font-size:13px;
}
.toolbar select{ border:1px solid var(--nt-line-2); background:#fff; }
.toolbar input:focus,.toolbar select:focus{ outline:none; border-color:var(--nt-blue); }
.toolbar .search{ min-width:220px; }
.toolbar .count{ color:var(--nt-text-3); }

.n-tablewrap{ border-top:1px solid var(--nt-line-2); border-left:0; border-right:0; border-bottom:0; border-radius:0; overflow-x:auto; background:#fff; }
table.n-table{ width:100%; border-collapse:collapse; font-size:14px; }
table.n-table th,table.n-table td{
  border-bottom:1px solid var(--nt-line); border-right:1px solid var(--nt-line);
  padding:7px 8px; vertical-align:top;
}
table.n-table th:first-child,table.n-table td:first-child{ border-left:1px solid var(--nt-line); }
table.n-table th{ background:#fff; color:var(--nt-text-2); font-weight:400; font-size:13px; }
table.n-table tbody tr.clickable:hover{ background:#f8f8f7; }
.n-tag{
  display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:var(--nt-radius);
  font-size:13px; line-height:18px; white-space:nowrap;
}
.n-tag.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; opacity:.85; }
.n-tag.c-gray{ background:var(--tg-gray-bg); color:var(--tg-gray-fg); }
.n-tag.c-yellow{ background:var(--tg-yellow-bg); color:var(--tg-yellow-fg); }
.n-tag.c-orange{ background:#fadec9; color:#854c1d; }
.n-tag.c-green{ background:var(--tg-green-bg); color:var(--tg-green-fg); }
.n-tag.c-blue{ background:var(--tg-blue-bg); color:var(--tg-blue-fg); }

.pill{ border-radius:4px; font-weight:500; }
.pill-navy{ background:#d3e5ef; color:#28456c; }
.pill-orange{ background:#fadec9; color:#854c1d; }
.pill-green{ background:#dbeddb; color:#2b593f; }
.pill-red{ background:#ffe2dd; color:#6e3630; }
.pill-amber{ background:#fdecc8; color:#89632a; }
.pill-gray{ background:#e3e2e0; color:#787774; }

.peek-overlay{ background:rgba(15,15,15,.18); }
.peek{ width:620px; box-shadow:-4px 0 18px rgba(15,15,15,.14); }
.peek-head{ padding:18px 24px; border-bottom:1px solid var(--nt-line); }
.peek-head .pk-title{ color:var(--nt-text); font-size:20px; }
.peek-head .pk-sku{ color:var(--nt-text-2); }
.peek-body{ padding:20px 24px 40px; }
.peek-sect{ color:var(--nt-text-3); letter-spacing:.03em; text-transform:none; }
.peek-close{ width:28px; height:28px; border-radius:var(--nt-radius); }
.peek-close:hover{ background:var(--nt-hover); color:var(--nt-text); }
.prop-list{ border-top:1px solid var(--nt-line); }
.prop{ display:flex; gap:18px; padding:8px 0; border-bottom:1px solid var(--nt-line); font-size:14px; }
.prop span{ width:112px; flex-shrink:0; color:var(--nt-text-2); }
.prop b{ font-weight:500; color:var(--nt-text); }
.ai-diag{ background:#f7f7f5; color:var(--nt-text); border:1px solid var(--nt-line); border-radius:6px; }
.ai-diag .ai-h,.ai-diag b{ color:var(--nt-text); }

.kanban.db-board{ grid-template-columns:repeat(2,minmax(240px,1fr)); margin-top:8px; }
.kcol{ background:var(--nt-sidebar); border-radius:6px; padding:10px; }
.kcol h3{ color:var(--nt-text); font-size:13px; margin:0 0 10px; }
.kcard{ border-color:var(--nt-line); border-radius:5px; box-shadow:0 1px 2px rgba(15,15,15,.05); cursor:pointer; }
.kcard-title{ font-weight:600; font-size:13px; }
.empty{ color:var(--nt-text-3); font-size:13px; padding:12px; }

.arch-grid{ grid-template-columns:2fr .9fr; align-items:stretch; }
.arch-card{ overflow:hidden; }
.architecture{ display:grid; grid-template-columns:1fr 74px 1fr 74px 1fr; gap:10px; align-items:stretch; margin-top:12px; }
.arch-lane{ background:#fbfbfa; border:1px solid var(--nt-line); border-radius:6px; padding:12px; display:flex; flex-direction:column; gap:8px; }
.arch-label{ color:var(--nt-text-3); font-size:12px; font-weight:600; margin-bottom:2px; }
.arch-node{ background:#fff; border:1px solid var(--nt-line-2); border-radius:6px; padding:9px 10px; font-size:12.5px; line-height:1.35; color:var(--nt-text); }
.arch-node.primary{ border-color:#b7c7dc; background:#eef4fb; color:var(--navy); font-weight:700; }
.arch-node.ai{ border-color:#f1cfb0; background:#fff4eb; color:#854c1d; }
.arch-node.person{ border-color:#c4dfcd; background:#f0f8f3; color:#2b593f; font-weight:700; }
.arch-node span{ color:var(--nt-text-2); font-weight:500; font-size:11px; }
.flow-col{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.flow-arrow{ width:100%; border:1px solid var(--nt-line-2); border-radius:999px; padding:5px 7px; text-align:center; font-size:11px; color:var(--nt-text-2); background:#fff; position:relative; }
.flow-arrow::after{ content:""; position:absolute; right:-8px; top:50%; width:8px; height:1px; background:var(--nt-line-2); }
.flow-arrow.out::after{ left:-8px; right:auto; }
.flow-list>div{ border-bottom:1px solid var(--nt-line); padding:12px 0; }
.flow-list>div:first-child{ padding-top:0; }
.flow-list p{ margin:7px 0 0; color:var(--nt-text-2); font-size:13px; line-height:1.6; }
.peak-stores{ margin-top:2px; }
.review-card{ margin-top:14px; }
.review-list{ margin:8px 0 0; padding-left:20px; color:var(--nt-text-2); font-size:13px; line-height:1.7; }
.review-list li{ margin:3px 0; }

@media(max-width:980px){
  .page{ padding:0 22px 70px; }
  .env-pills{ display:none; }
  .architecture{ grid-template-columns:1fr; }
  .flow-col{ display:none; }
  .arch-grid{ grid-template-columns:1fr; }
}

/* =============================================================================
 * Round 4: Notion monochrome + in-app notifications
 * ========================================================================== */
:root{
  --navy:var(--nt-text); --navy-2:#4b4944; --navy-3:#2f2d29;
  --orange:var(--nt-blue); --orange-2:#1a6fc0; --orange-soft:var(--nt-hover);
  --ink:var(--nt-text); --muted:var(--nt-text-2); --desc:var(--nt-text-3);
  --line:var(--nt-line); --line-2:var(--nt-line-2); --bg:var(--nt-bg); --panel:var(--nt-sidebar);
  --sidebar:var(--nt-sidebar); --sidebar-hover:var(--nt-hover); --sidebar-active:var(--nt-hover-2);
  --green:var(--tg-green-fg); --green-soft:var(--tg-green-bg);
  --red:var(--tg-red-fg); --red-soft:var(--tg-red-bg);
  --amber:var(--tg-yellow-fg); --amber-soft:var(--tg-yellow-bg);
  --blue:var(--nt-blue); --blue-soft:var(--tg-blue-bg);
  --radius:6px;
}
.brandmark .dt,#gate .glogo .dt,.sb-logo .dt{ color:var(--nt-text); }
#gate .glogo{ color:var(--nt-text); }
#gate .gtenant,.topbar .demo-pill.tenant{ background:var(--nt-hover); color:var(--nt-text-2); }
#gate .gtenant .pdot,.sb-tenant .pdot{ background:var(--nt-text-3); }
#gate input:focus{ border-color:var(--nt-blue); }
#gate button,.btn-primary,.btn-navy{ background:var(--nt-blue); color:#fff; }
#gate button:hover,.btn-primary:hover,.btn-navy:hover{ background:#1a6fc0; }
.btn-ghost{ color:var(--nt-text); border-color:var(--nt-line-2); }
.btn-ghost:hover{ background:var(--nt-hover); }
.hamburger{ background:var(--nt-text); border-radius:var(--nt-radius); }
.navitem .badge-n{ background:var(--nt-blue); color:#fff; }
.topbar .avatar{ background:var(--nt-text); color:#fff; }
.sect-title .tag{ color:var(--nt-text-2); background:var(--nt-hover); border-radius:var(--nt-radius); }
.kpi .val,.drill-row b{ color:var(--nt-text); }
.kpi .val.good,.kpi .sub.up{ color:var(--tg-green-fg); }
.kpi .val.danger,.kpi .sub.down{ color:var(--tg-red-fg); }
.demo-banner{ background:#fbfbfa; border-color:var(--nt-line); color:var(--nt-text-2); }
.demo-banner b{ color:var(--nt-text); }
.page-foot b{ color:var(--nt-text-2); }
.bridge-mid svg,.insight .isrc,.insight .imet,.q-item .qprice .to,.chan .cmoll,.rule-card .rth{ color:var(--nt-text); }
.insight .iact{ background:#fbfbfa; border-color:var(--nt-line-2); border-style:solid; }
.ai-diag .ai-h .spark{ background:var(--nt-blue); box-shadow:0 0 0 4px rgba(35,131,226,.12); }
.prow.reco{ border-color:var(--nt-line-2); background:#fbfbfa; }
.lenbar i{ background:var(--nt-blue); }
.rcol.req .rch,.rcol.dev .rch,.rcol.live .rch{ color:var(--nt-text); }
.platform-note{ background:#fbfbfa; color:var(--nt-text-2); border:1px solid var(--nt-line); border-radius:6px; }
.platform-note b,.platform-note .pn-h{ color:var(--nt-text); }
.arch-node.primary{ border-color:var(--nt-line-2); background:#fbfbfa; color:var(--nt-text); }
.arch-node.ai{ border-color:var(--nt-line-2); background:#fff; color:var(--nt-text); }
.arch-node.person{ border-color:var(--tg-green-bg); background:var(--tg-green-bg); color:var(--tg-green-fg); }
.rstat.req{ background:var(--tg-gray-bg); color:var(--tg-gray-fg); }
.rstat.dev{ background:var(--tg-blue-bg); color:var(--tg-blue-fg); }
.rstat.live{ background:var(--tg-green-bg); color:var(--tg-green-fg); }
.onboarding{ border-color:var(--nt-line); background:#fbfbfa; }
.ob-copy b{ color:var(--nt-text); }
.ob-x:hover{ background:var(--nt-hover); }
.diff-bad{ background:var(--tg-red-bg); color:var(--tg-red-fg); }
.toggle.on{ background:var(--nt-blue); }
@keyframes flash{ 0%{ background:rgba(35,131,226,.10);} 100%{ background:transparent;} }

.notification-bell{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border:0; background:transparent; color:var(--nt-text-2);
  border-radius:var(--nt-radius); cursor:pointer; flex-shrink:0;
}
.notification-bell svg{ width:17px; height:17px; }
.notification-bell:hover{ background:var(--nt-hover); color:var(--nt-text); }
.notification-badge{
  position:absolute; top:2px; right:1px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--nt-blue); color:#fff; font-size:10px; font-weight:700;
  line-height:16px; text-align:center;
}
.notification-panel{
  position:fixed; top:42px; right:58px; z-index:170; width:min(420px,calc(100vw - 24px));
  display:none; background:#fff; border:1px solid var(--nt-line); border-radius:8px;
  box-shadow:0 12px 34px rgba(15,15,15,.16); overflow:hidden;
}
.notification-panel.open{ display:block; }
.notification-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid var(--nt-line); }
.notification-head div{ display:flex; flex-direction:column; gap:1px; }
.notification-head b{ font-size:14px; color:var(--nt-text); }
.notification-head span{ font-size:12px; color:var(--nt-text-3); }
.notification-head button,.notification-foot button,.link-btn{
  border:0; background:transparent; color:var(--nt-blue); cursor:pointer; font:inherit; font-size:12px; padding:3px 5px; border-radius:var(--nt-radius);
}
.notification-head button:hover,.notification-foot button:hover,.link-btn:hover{ background:var(--nt-hover); }
.notification-list{ max-height:420px; overflow:auto; padding:6px; }
.notification-item,.app-notify{
  width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:5px; text-align:left;
  border:1px solid transparent; background:#fff; color:var(--nt-text); padding:10px; border-radius:6px; cursor:pointer; font:inherit;
}
.notification-item:hover,.app-notify:hover{ background:var(--nt-hover); }
.notification-item.unread,.app-notify.unread{ border-color:var(--tg-blue-bg); background:#f7fbfd; }
.notification-item.read,.app-notify.read{ color:var(--nt-text-2); }
.notification-item b,.app-notify b{ font-size:13px; color:var(--nt-text); }
.notification-item span:not(.pill),.app-notify span:not(.pill){ font-size:12px; color:var(--nt-text-2); line-height:1.55; }
.notification-item time,.app-notify time{ font-size:11px; color:var(--nt-text-3); }
.notification-foot{ border-top:1px solid var(--nt-line); padding:8px 10px; text-align:right; }
.notify-actions{ display:flex; gap:8px; margin:8px 0 12px; flex-wrap:wrap; }
.app-notify-list{ display:flex; flex-direction:column; gap:8px; }
.app-notify-top{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.capability-card{ padding:0; overflow:hidden; }
.capability-card h2{ padding:14px 16px 8px; margin:0; }
.capability-card .tablewrap{ border-left:0; border-right:0; border-bottom:0; }
.capability-summary .kpi{ background:#fff; }
@media(max-width:880px){
  .notification-panel{ right:12px; top:52px; }
  .global-search-trigger{ min-width:0; max-width:none; }
  .global-search-trigger kbd,.tb-user span{ display:none; }
}