/* =========================================================
   ChemReg AI — Enterprise Regulatory Intelligence Platform
   ========================================================= */

:root{
  --navy: #0b2942;
  --navy-dark: #071c30;
  --navy-light: #123a5e;
  --petrol: #0e4d64;
  --cyan: #17b6c4;
  --cyan-light: #5fd9e3;
  --cyan-bg: #e6fbfc;
  --green: #1a9e6b;
  --green-bg: #e7f7ef;
  --green-dark: #0e6e49;
  --amber: #d98c0f;
  --amber-bg: #fef3e0;
  --amber-dark: #9a6208;
  --red: #d64545;
  --red-bg: #fdeaea;
  --red-dark: #a72e2e;
  --grey-bg: #f4f6f8;
  --grey-border: #e2e6ea;
  --text-main: #1c2b36;
  --text-muted: #667685;
  --text-faint: #93a1ad;
  --white: #ffffff;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 3px rgba(11,41,66,0.06), 0 1px 2px rgba(11,41,66,0.08);
  --shadow-md: 0 4px 16px rgba(11,41,66,0.08);
  --shadow-lg: 0 12px 32px rgba(11,41,66,0.14);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--grey-bg);
  color:var(--text-main);
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0; font-weight:700; color:var(--navy); }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,select{ font-family:inherit; }
.hidden{ display:none !important; }

/* ============ SHELL ============ */
.app-shell{ display:flex; min-height:100vh; }

/* ============ SIDEBAR ============ */
.sidebar{
  width:250px;
  min-width:250px;
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:#cfe0ec;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  z-index:20;
}
.sidebar-brand{
  display:flex; align-items:center; gap:12px;
  padding:22px 20px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg, var(--cyan) 0%, var(--petrol) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:17px; color:#fff; flex:none;
  box-shadow:0 0 0 4px rgba(23,182,196,0.15);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.2; }
.brand-name{ font-weight:700; font-size:16.5px; color:#fff; letter-spacing:0.2px; }
.brand-name b{ color:var(--cyan-light); font-weight:800; }
.brand-tag{ font-size:10.5px; color:#8fa8bb; text-transform:uppercase; letter-spacing:0.6px; margin-top:2px; }

.sidebar-nav{ flex:1; overflow-y:auto; padding:16px 12px; }
.nav-group{ margin-bottom:18px; }
.nav-group-title{
  font-size:10.5px; text-transform:uppercase; letter-spacing:0.8px;
  color:#5f7f96; padding:6px 12px; font-weight:700;
}
.nav-item{
  display:flex; align-items:center; gap:11px; width:100%;
  background:transparent; border:none; color:#b6cbdb;
  padding:10px 12px; border-radius:8px; font-size:13.3px; font-weight:500;
  text-align:left; margin-bottom:2px; transition:background .15s, color .15s;
}
.nav-item i{ width:18px; text-align:center; font-size:14px; color:#7ea3bb; }
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{
  background:linear-gradient(90deg, rgba(23,182,196,0.22) 0%, rgba(23,182,196,0.04) 100%);
  color:#fff; box-shadow:inset 3px 0 0 var(--cyan);
}
.nav-item.active i{ color:var(--cyan-light); }

.sidebar-footer{
  padding:16px 20px 20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-badge{
  font-size:11.5px; color:#8fa8bb; display:flex; align-items:center; gap:6px; margin-bottom:8px;
}
.footer-badge i{ color:var(--cyan-light); }
.footer-slogan{
  font-size:10.5px; letter-spacing:1.2px; color:#4f7288; font-weight:700;
}

/* ============ MAIN ============ */
.main-wrap{ flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar{
  height:64px; min-height:64px;
  background:#fff; border-bottom:1px solid var(--grey-border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:15;
}
.topbar-left{ display:flex; align-items:center; gap:14px; }
.mobile-nav-toggle{ display:none; background:none; border:none; font-size:18px; color:var(--navy); }
.topbar-title{ font-size:16px; font-weight:700; color:var(--navy); }
.topbar-right{ display:flex; align-items:center; gap:14px; }

.status-pill{
  display:flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600;
  padding:6px 12px; border-radius:20px; white-space:nowrap;
}
.status-pill .dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.status-online{ background:var(--green-bg); color:var(--green-dark); }
.status-online .dot{ background:var(--green); box-shadow:0 0 0 3px rgba(26,158,107,0.2); animation:pulse 2s infinite; }
.status-synced{ background:var(--cyan-bg); color:#0d7a86; }
.status-synced .dot{ background:var(--cyan); box-shadow:0 0 0 3px rgba(23,182,196,0.2); animation:pulse 2s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1;} 50%{ opacity:0.4; } }

.user-chip{ display:flex; align-items:center; gap:10px; padding-left:14px; border-left:1px solid var(--grey-border); }
.user-avatar{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--navy) 0%, var(--petrol) 100%);
  color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px;
}
.user-meta{ display:flex; flex-direction:column; line-height:1.25; }
.user-name{ font-size:12.5px; font-weight:700; color:var(--navy); }
.user-role{ font-size:10.5px; color:var(--text-muted); }

.app-main{ flex:1; padding:28px; max-width:1440px; width:100%; margin:0 auto; }

/* ============ VIEWS ============ */
.view{ display:none; animation:fadein .25s ease; }
.view.active{ display:block; }
@keyframes fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

.page-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  margin-bottom:22px; flex-wrap:wrap;
}
.page-title{ font-size:24px; letter-spacing:-0.3px; }
.page-subtitle{ color:var(--text-muted); margin-top:5px; font-size:13.5px; }
.page-header-actions{ display:flex; gap:10px; flex:none; }

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; border-radius:8px;
  padding:10px 16px; font-size:13px; font-weight:600; transition:all .15s; white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-light); }
.btn-secondary{ background:#fff; color:var(--navy); border:1px solid var(--grey-border); }
.btn-secondary:hover{ background:var(--grey-bg); }
.btn-ghost{ background:transparent; color:var(--text-muted); }
.btn-ghost:hover{ color:var(--navy); }
.btn-ai{
  background:linear-gradient(90deg, var(--petrol) 0%, var(--cyan) 100%);
  color:#fff; box-shadow:0 4px 14px rgba(23,182,196,0.35);
}
.btn-ai:hover{ filter:brightness(1.07); }
.btn-lg{ padding:13px 22px; font-size:13.5px; }
.back-btn{ margin-bottom:16px; padding-left:0; }

/* ============ KPI CARDS ============ */
.kpi-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:16px; margin-bottom:22px; }
.kpi-grid-5{ grid-template-columns:repeat(5,1fr); }
.kpi-card{
  background:#fff; border-radius:var(--radius); padding:18px; border:1px solid var(--grey-border);
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.kpi-icon{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  font-size:14px; margin-bottom:12px;
}
.kpi-icon-navy{ background:rgba(11,41,66,0.08); color:var(--navy); }
.kpi-icon-green{ background:var(--green-bg); color:var(--green); }
.kpi-icon-amber{ background:var(--amber-bg); color:var(--amber); }
.kpi-icon-red{ background:var(--red-bg); color:var(--red); }
.kpi-icon-dark{ background:rgba(11,41,66,0.85); color:#fff; }
.kpi-value{ font-size:26px; font-weight:800; color:var(--navy); line-height:1; }
.kpi-label{ font-size:12.5px; font-weight:600; color:var(--text-main); margin-top:6px; }
.kpi-sub{ font-size:11px; color:var(--text-muted); margin-top:3px; }
.kpi-green::before, .kpi-amber::before, .kpi-red::before{
  content:''; position:absolute; top:0; left:0; width:4px; height:100%;
}
.kpi-green::before{ background:var(--green); }
.kpi-amber::before{ background:var(--amber); }
.kpi-red::before{ background:var(--red); }
.kpi-dark{ background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%); border:none; }
.kpi-dark .kpi-value, .kpi-dark .kpi-label{ color:#fff; }
.kpi-dark .kpi-sub{ color:#9db6c8; }

/* ============ CARDS ============ */
.card{
  background:#fff; border-radius:var(--radius); border:1px solid var(--grey-border);
  box-shadow:var(--shadow-sm); margin-bottom:20px;
}
.card-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 20px; border-bottom:1px solid var(--grey-border); flex-wrap:wrap;
}
.card-title{ font-size:14.5px; display:flex; align-items:center; gap:9px; color:var(--navy); }
.card-title i{ color:var(--cyan); }
.card-header-tag{ font-size:11px; color:var(--text-faint); font-weight:500; }
.card-body{ padding:20px; }

.grid-2col{ display:grid; grid-template-columns:1.1fr 1fr; gap:20px; }

/* ============ DONUT / EXPOSURE ============ */
.exposure-body{ display:flex; align-items:center; gap:24px; }
.donut-wrap{ width:170px; height:170px; flex:none; }
.exposure-legend{ display:flex; flex-direction:column; gap:14px; }
.legend-row{ font-size:13px; color:var(--text-main); display:flex; align-items:center; gap:8px; }
.legend-row b{ margin-left:auto; color:var(--navy); }
.legend-dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.legend-green{ background:var(--green); }
.legend-amber{ background:var(--amber); }
.legend-red{ background:var(--red); }

/* ============ AI INSIGHT CARD ============ */
.ai-insight-card{
  background:linear-gradient(135deg, var(--navy) 0%, #0f3550 60%, var(--petrol) 100%);
  color:#fff; padding:22px; position:relative; overflow:hidden; border:none;
}
.ai-insight-glow{
  position:absolute; top:-60px; right:-60px; width:220px; height:220px; border-radius:50%;
  background:radial-gradient(circle, rgba(23,182,196,0.35) 0%, transparent 70%);
}
.ai-insight-header{ display:flex; align-items:center; gap:10px; margin-bottom:12px; position:relative; z-index:1; }
.ai-badge{
  width:32px; height:32px; border-radius:9px; background:rgba(23,182,196,0.25);
  display:flex; align-items:center; justify-content:center; color:var(--cyan-light); font-size:14px;
}
.ai-insight-header h3{ color:#fff; font-size:14.5px; }
.ai-insight-text{ font-size:14.5px; line-height:1.6; color:#dbe9f1; position:relative; z-index:1; }
.ai-insight-text b{ color:var(--cyan-light); }
.ai-insight-meta{ display:flex; gap:18px; margin-top:14px; font-size:11.5px; color:#9db6c8; position:relative; z-index:1; }
.ai-insight-meta i{ color:var(--cyan-light); margin-right:5px; }
.ai-insight-card .btn-ai{ margin-top:16px; position:relative; z-index:1; background:#fff; color:var(--navy); box-shadow:none; }
.ai-insight-card .btn-ai:hover{ background:var(--cyan-bg); }

/* ============ TABLE ============ */
.data-table{ width:100%; border-collapse:collapse; font-size:13px; }
.data-table th{
  text-align:left; padding:10px 14px; font-size:11.5px; text-transform:uppercase; letter-spacing:0.4px;
  color:var(--text-muted); border-bottom:1px solid var(--grey-border); font-weight:700; white-space:nowrap;
}
.data-table td{ padding:12px 14px; border-bottom:1px solid #eef1f4; color:var(--text-main); vertical-align:middle; }
.data-table tbody tr:hover{ background:#f9fbfc; }
.row-clickable{ cursor:pointer; }
.row-clickable td:last-child{ color:var(--text-faint); text-align:right; }

/* ============ BADGES ============ */
.badge{ display:inline-block; padding:4px 10px; border-radius:20px; font-size:10.5px; font-weight:700; letter-spacing:0.3px; }
.badge-critical{ background:var(--red-bg); color:var(--red-dark); }
.badge-high{ background:#fde4e4; color:var(--red-dark); }
.badge-medium{ background:var(--amber-bg); color:var(--amber-dark); }
.badge-warning{ background:var(--amber-bg); color:var(--amber-dark); }
.badge-compliant{ background:var(--green-bg); color:var(--green-dark); }
.badge-info{ background:var(--cyan-bg); color:#0d7a86; }
.badge-consultation{ background:#ecebf7; color:#5548a8; margin-top:8px; display:inline-block; }
.badge-ai-generated{ background:#fff3d6; color:#8a5a00; font-size:10px; }

/* ============ RADAR ============ */
.radar-tabs{ display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--grey-border); }
.radar-tab{
  background:none; border:none; padding:10px 16px; font-size:13px; font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent; display:flex; align-items:center; gap:8px;
}
.radar-tab.active{ color:var(--navy); border-color:var(--cyan); }
.tab-count{ background:var(--grey-bg); color:var(--text-muted); border-radius:10px; padding:1px 7px; font-size:10.5px; }
.radar-tab.active .tab-count{ background:var(--cyan-bg); color:#0d7a86; }

.radar-timeline{ background:#fff; border:1px solid var(--grey-border); border-radius:var(--radius); padding:36px 24px 26px; margin-bottom:20px; overflow-x:auto; }
.timeline-track{ position:relative; height:6px; background:var(--grey-bg); border-radius:3px; min-width:640px; margin:0 20px; }
.timeline-point{ position:absolute; top:-3px; transform:translateX(-50%); text-align:center; }
.timeline-dot{ width:12px; height:12px; border-radius:50%; display:block; margin:0 auto; border:2px solid #fff; box-shadow:0 0 0 2px currentColor; }
.dot-red{ background:var(--red); color:var(--red); }
.dot-amber{ background:var(--amber); color:var(--amber); }
.dot-grey{ background:var(--text-faint); color:var(--text-faint); }
.timeline-label{ font-size:10.5px; color:var(--text-muted); margin-top:8px; white-space:nowrap; line-height:1.3; }

.radar-layout{ display:grid; grid-template-columns:340px 1fr; gap:20px; }
.radar-list{ display:flex; flex-direction:column; gap:10px; }
.radar-list-item{
  background:#fff; border:1px solid var(--grey-border); border-radius:var(--radius-sm); padding:14px 16px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s;
}
.radar-list-item:hover{ box-shadow:var(--shadow-md); }
.radar-list-item.active{ border-color:var(--cyan); box-shadow:0 0 0 2px rgba(23,182,196,0.18); }
.radar-list-item-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.radar-list-item-name{ font-weight:700; font-size:13px; color:var(--navy); }
.radar-list-item-desc{ font-size:12px; color:var(--text-muted); }
.radar-list-item-meta{ display:flex; justify-content:space-between; margin-top:8px; font-size:11px; color:var(--text-faint); }

.radar-detail{ padding:24px; }
.radar-detail-header{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.radar-detail-title{ font-size:19px; color:var(--navy); }
.radar-detail-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:20px 0; }
.radar-fact{ background:var(--grey-bg); border-radius:var(--radius-sm); padding:14px 16px; }
.radar-fact span{ display:block; font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; margin-bottom:4px;}
.radar-fact b{ font-size:15px; color:var(--navy); }
.radar-fact.fact-red b{ color:var(--red); }
.limit-compare{ display:flex; align-items:center; gap:14px; background:var(--red-bg); border-radius:var(--radius-sm); padding:16px; margin:18px 0; }
.limit-box{ text-align:center; flex:1; }
.limit-box span{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.limit-box b{ font-size:22px; color:var(--red-dark); }
.limit-box.limit-old b{ color:var(--text-muted); text-decoration:line-through; }

/* ============ FILTERS / SEARCH ============ */
.table-toolbar{ display:flex; justify-content:space-between; gap:16px; padding:16px 20px; border-bottom:1px solid var(--grey-border); flex-wrap:wrap; }
.search-box{ display:flex; align-items:center; gap:8px; background:var(--grey-bg); border-radius:8px; padding:8px 14px; min-width:260px; }
.search-box i{ color:var(--text-faint); }
.search-box input{ border:none; background:none; outline:none; font-size:13px; width:100%; color:var(--text-main); }
.filter-group{ display:flex; gap:8px; flex-wrap:wrap; }
.filter-select{
  border:1px solid var(--grey-border); border-radius:8px; padding:8px 10px; font-size:12.5px;
  background:#fff; color:var(--text-main); outline:none;
}
.table-scroll{ overflow-x:auto; padding:0; }
.table-scroll table{ min-width:900px; }
.table-scroll .card-body{ padding:0 20px 6px; }
.table-footer{ padding:12px 20px; font-size:12px; color:var(--text-muted); border-top:1px solid var(--grey-border); }

.risk-tag{ font-weight:700; font-size:12px; }
.risk-Low{ color:var(--green); }
.risk-Medium{ color:var(--amber); }
.risk-High{ color:#c76e14; }
.risk-Critical{ color:var(--red); }

/* ============ PRODUCT TWIN ============ */
.twin-header{ padding:24px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px; }
.twin-title-block{ display:flex; align-items:center; gap:16px; }
.twin-icon{ width:56px; height:56px; border-radius:12px; background:var(--grey-bg); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--navy); flex:none; }
.twin-name{ font-size:21px; color:var(--navy); }
.twin-code{ font-size:12.5px; color:var(--text-muted); font-family:'JetBrains Mono', monospace; margin-top:3px;}
.twin-status-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }
.twin-score-block{ text-align:center; }
.twin-score-label{ font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; }
.score-ring{ width:88px; height:88px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin:6px auto 0; position:relative; }
.score-ring b{ font-size:22px; color:var(--navy); }
.score-ring span{ font-size:9px; color:var(--text-muted); position:absolute; bottom:14px; }

.tabs{ display:flex; gap:4px; overflow-x:auto; border-bottom:1px solid var(--grey-border); margin-bottom:20px; }
.tab-btn{
  background:none; border:none; padding:11px 16px; font-size:12.8px; font-weight:600; color:var(--text-muted);
  border-bottom:2px solid transparent; white-space:nowrap;
}
.tab-btn.active{ color:var(--navy); border-color:var(--cyan); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadein .2s ease; }

.conflict-box{
  background:var(--red-bg); border:1px solid #f6c9c9; border-radius:var(--radius-sm);
  padding:18px 20px; margin-top:16px; display:flex; gap:14px; align-items:flex-start;
}
.conflict-box i{ color:var(--red); font-size:20px; margin-top:2px; }
.conflict-box h4{ color:var(--red-dark); font-size:14px; margin-bottom:8px; }
.conflict-facts{ display:flex; gap:24px; margin-top:10px; flex-wrap:wrap; }
.conflict-facts div span{ display:block; font-size:11px; color:var(--text-muted); }
.conflict-facts div b{ font-size:14px; color:var(--red-dark); }

.substance-row-highlight td{ background:var(--red-bg) !important; color:var(--red-dark) !important; font-weight:700; }

.info-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.info-box{ background:#fff; border:1px solid var(--grey-border); border-radius:var(--radius-sm); padding:16px; }
.info-box span{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.3px;}
.info-box b{ font-size:14.5px; color:var(--navy); }

/* ============ KNOWLEDGE GRAPH ============ */
.graph-wrap{ position:relative; background:#fbfcfd; border:1px solid var(--grey-border); border-radius:var(--radius); padding:30px; overflow-x:auto; }
.graph-canvas{ position:relative; min-width:900px; min-height:520px; }
.graph-node{
  position:absolute; padding:12px 16px; border-radius:10px; font-size:12.5px; font-weight:700;
  cursor:pointer; text-align:center; box-shadow:var(--shadow-sm); border:2px solid transparent;
  transition:transform .15s; background:#fff; color:var(--text-main); min-width:130px;
}
.graph-node:hover{ transform:translateY(-3px) scale(1.03); z-index:5; }
.graph-node i{ display:block; font-size:16px; margin-bottom:4px; }
.node-red{ background:var(--red-bg); border-color:var(--red); color:var(--red-dark); }
.node-amber{ background:var(--amber-bg); border-color:var(--amber); color:var(--amber-dark); }
.node-green{ background:var(--green-bg); border-color:var(--green); color:var(--green-dark); }
.node-navy{ background:#eaf0f5; border-color:var(--navy); color:var(--navy); }
.graph-svg{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; }
.graph-legend{ display:flex; gap:18px; margin-top:16px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; }
.graph-legend span{ display:inline-flex; align-items:center; gap:6px; }
.graph-legend .legend-dot{ width:10px; height:10px; border-radius:3px; }

/* ============ IMPACT ANALYSIS ============ */
.impact-idle{ text-align:center; padding:60px 20px; color:var(--text-muted); }
.idle-icon{ font-size:42px; color:var(--grey-border); margin-bottom:16px; }
.impact-idle h3{ margin-bottom:8px; }

.impact-loading{ text-align:center; padding:50px 20px; }
.scan-animation{ position:relative; width:90px; height:90px; margin:0 auto 20px; }
.scan-ring{
  position:absolute; inset:0; border-radius:50%; border:4px solid var(--cyan-bg);
  border-top-color:var(--cyan); animation:spin 1.1s linear infinite;
}
.scan-icon{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--petrol); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.loading-dots span{ animation:blink 1.4s infinite; opacity:0; }
.loading-dots span:nth-child(2){ animation-delay:.2s; }
.loading-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,100%{opacity:0;} 50%{opacity:1;} }
.progress-bar{ height:6px; background:var(--grey-bg); border-radius:3px; margin-top:18px; max-width:400px; margin-inline:auto; overflow:hidden; }
.progress-fill{ height:100%; width:0%; background:linear-gradient(90deg, var(--petrol), var(--cyan)); transition:width .3s; }

.ai-complete-banner{
  display:flex; align-items:center; gap:12px; background:var(--green-bg); color:var(--green-dark);
  padding:14px 20px; border-radius:var(--radius-sm); margin-bottom:20px; font-size:13.5px;
}
.ai-complete-banner i{ font-size:20px; }
.ai-complete-banner div{ display:flex; flex-direction:column; }
.ai-complete-banner span{ font-size:11.5px; color:#2b8462; font-weight:500; }

.revenue-exposure-card{ display:flex; align-items:center; gap:16px; padding:18px 22px; }
.revenue-exposure-card i{ font-size:26px; color:var(--navy); background:var(--grey-bg); width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.revenue-exposure-card div span{ display:block; font-size:12px; color:var(--text-muted); }
.revenue-exposure-card div b{ font-size:22px; color:var(--navy); }

.why-explanation{ font-size:14.5px; line-height:1.7; color:var(--text-main); background:var(--grey-bg); padding:16px 18px; border-radius:var(--radius-sm); border-left:4px solid var(--cyan); margin-bottom:14px; }

.impacted-elements-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
.impact-element{ display:flex; gap:12px; padding:14px 16px; border-radius:var(--radius-sm); border:1px solid var(--grey-border); }
.impact-dot{ width:10px; height:10px; border-radius:50%; margin-top:4px; flex:none; }
.impact-critical{ background:var(--red-bg); border-color:#f4cccc; }
.impact-critical .impact-dot{ background:var(--red); }
.impact-warning{ background:var(--amber-bg); border-color:#f5deb0; }
.impact-warning .impact-dot{ background:var(--amber); }
.impact-ok{ background:var(--green-bg); border-color:#c9ecda; }
.impact-ok .impact-dot{ background:var(--green); }
.impact-element b{ font-size:13px; color:var(--text-main); display:block; margin-bottom:3px; }
.impact-element p{ font-size:12px; color:var(--text-muted); }

.action-plan-card .plan-meta{ display:flex; gap:10px; align-items:center; }
.deadline-chip{ font-size:11.5px; color:var(--text-muted); background:var(--grey-bg); padding:5px 10px; border-radius:20px; }
.action-steps{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.action-step{ display:flex; gap:14px; padding:14px 16px; border:1px solid var(--grey-border); border-radius:var(--radius-sm); align-items:flex-start; }
.step-num{ width:28px; height:28px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700; flex:none; }
.step-body b{ font-size:13.5px; color:var(--navy); }
.step-body p{ font-size:12.5px; color:var(--text-muted); margin-top:3px; }
.step-meta{ display:flex; gap:8px; margin-top:8px; }
.chip{ font-size:11px; background:var(--grey-bg); color:var(--text-muted); padding:3px 9px; border-radius:20px; }
.chip-pending{ background:var(--amber-bg); color:var(--amber-dark); }
.chip-done{ background:var(--green-bg); color:var(--green-dark); }

/* ============ COPILOT ============ */
.copilot-layout{ display:grid; grid-template-columns:1fr 300px; gap:20px; align-items:start; }
.chat-window{ display:flex; flex-direction:column; height:640px; padding:0; }
.chat-messages{ flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:16px; }
.chat-msg{ display:flex; gap:12px; max-width:88%; }
.chat-msg.user{ align-self:flex-end; flex-direction:row-reverse; }
.chat-avatar{ width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
.chat-avatar.ai{ background:linear-gradient(135deg, var(--petrol), var(--cyan)); color:#fff; }
.chat-avatar.user{ background:var(--navy); color:#fff; }
.chat-bubble{ background:var(--grey-bg); padding:12px 16px; border-radius:12px; font-size:13.3px; line-height:1.6; color:var(--text-main); }
.chat-msg.user .chat-bubble{ background:var(--navy); color:#fff; }
.chat-sources{ margin-top:10px; padding-top:10px; border-top:1px dashed #cfd8de; font-size:11.5px; color:var(--text-muted); }
.chat-sources b{ display:block; color:var(--navy); margin-bottom:4px; font-size:11px; text-transform:uppercase; letter-spacing:0.4px; }
.chat-sources ul{ margin:0; padding-left:16px; }
.chat-typing{ display:flex; gap:4px; padding:12px 16px; }
.chat-typing span{ width:6px; height:6px; border-radius:50%; background:var(--text-faint); animation:blink 1.2s infinite; }
.chat-typing span:nth-child(2){ animation-delay:.2s; }
.chat-typing span:nth-child(3){ animation-delay:.4s; }

.chat-suggestions{ display:flex; gap:8px; flex-wrap:wrap; padding:12px 20px; border-top:1px solid var(--grey-border); }
.suggestion-chip{
  font-size:11.5px; background:var(--cyan-bg); color:#0d7a86; border:none; padding:7px 12px; border-radius:20px;
  font-weight:600;
}
.suggestion-chip:hover{ background:#c9f0f2; }
.chat-input-row{ display:flex; gap:10px; padding:16px 20px; border-top:1px solid var(--grey-border); }
.chat-input-row input{ flex:1; border:1px solid var(--grey-border); border-radius:8px; padding:11px 14px; font-size:13px; outline:none; }
.chat-input-row input:focus{ border-color:var(--cyan); }

.copilot-side{ padding:20px; }
.copilot-side h3{ font-size:13.5px; display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.copilot-side h3 i{ color:var(--cyan); }
.copilot-source-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.copilot-source-list li{ font-size:12.5px; color:var(--text-main); display:flex; gap:10px; align-items:center; }
.copilot-source-list i{ color:var(--navy); width:16px; }
.copilot-note{ margin-top:18px; background:var(--grey-bg); border-radius:var(--radius-sm); padding:12px 14px; font-size:11.5px; color:var(--text-muted); line-height:1.5; }
.copilot-note i{ color:var(--cyan); margin-right:6px; }

/* ============ SIMULATOR ============ */
.sim-select-row{ display:flex; align-items:center; gap:14px; }
.sim-select-row label{ font-size:12.5px; font-weight:600; color:var(--text-muted); }
.sim-grid{ align-items:start; }
.sim-slider-block{ margin-bottom:22px; }
.sim-slider-labels{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:10px; }
.sim-slider-labels span:first-child{ color:var(--text-main); font-weight:600; }
.sim-slider-value{ font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--navy); }
input[type=range]{ width:100%; accent-color:var(--cyan); height:6px; }
.sim-slider-scale{ display:flex; justify-content:space-between; font-size:10.5px; color:var(--text-faint); margin-top:6px; }
.limit-marker{ color:var(--red); font-weight:700; }
.sim-from-to{ display:flex; align-items:center; gap:16px; margin-bottom:22px; }
.from-to-box{ flex:1; background:var(--grey-bg); border-radius:var(--radius-sm); padding:14px; text-align:center; }
.from-to-box span{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:4px; }
.from-to-box b{ font-size:19px; color:var(--navy); }
#simToBox{ background:var(--cyan-bg); }
#simToBox b{ color:#0d7a86; }
.sim-from-to i{ color:var(--text-faint); }

.sim-result-banner{
  display:flex; align-items:center; gap:12px; background:var(--green-bg); color:var(--green-dark);
  padding:16px 22px; border-radius:var(--radius-sm); margin-bottom:20px; font-weight:800; font-size:16px; letter-spacing:0.5px;
}
.sim-result-banner.failed{ background:var(--red-bg); color:var(--red-dark); }
.sim-result-banner i{ font-size:22px; }

.score-compare-card{ padding:26px; text-align:center; }
.score-compare-label{ font-size:12px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.4px; }
.score-compare-row{ display:flex; align-items:center; justify-content:center; gap:20px; margin:16px 0; }
.score-badge{ width:70px; height:70px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; }
.score-before{ background:var(--red-bg); color:var(--red-dark); }
.score-after{ background:var(--green-bg); color:var(--green-dark); }
.score-compare-row i{ color:var(--text-faint); }
.status-compare-row{ display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:8px; }
.status-compare-row i{ color:var(--text-faint); font-size:12px; }
.status-compare-sub{ font-size:12px; color:var(--text-muted); }

.sim-metrics-card{ display:flex; flex-direction:column; gap:16px; padding:22px; justify-content:center; }
.sim-metric{ display:flex; align-items:center; gap:14px; }
.sim-metric i{ width:42px; height:42px; border-radius:10px; background:var(--grey-bg); display:flex; align-items:center; justify-content:center; color:var(--navy); font-size:16px; }
.sim-metric b{ display:block; font-size:16px; color:var(--navy); }
.sim-metric span{ font-size:11.5px; color:var(--text-muted); }
.sim-cta-row{ display:flex; gap:10px; margin-top:16px; position:relative; z-index:1; }

/* ============ DOCUMENTS ============ */
.doc-generate-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-bottom:22px; }
.doc-card{ padding:20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:10px; }
.doc-card-icon{ width:50px; height:50px; border-radius:12px; background:var(--grey-bg); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--navy); }
.doc-card-body{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.doc-current-name{ font-size:12px; font-family:'JetBrains Mono', monospace; color:var(--text-muted); word-break:break-all; }
.doc-card .btn{ width:100%; justify-content:center; margin-top:6px; }

.doc-process{ padding:26px; }
.doc-process-steps{ display:flex; flex-direction:column; gap:14px; }
.doc-step{ font-size:13.5px; color:var(--text-faint); display:flex; align-items:center; gap:10px; transition:color .2s; }
.doc-step i{ width:16px; }
.doc-step.active{ color:var(--navy); font-weight:600; }
.doc-step.active i{ color:var(--cyan); }
.doc-step.done{ color:var(--green-dark); }
.doc-step.done i{ color:var(--green); }

.doc-result{ padding:24px; }
.doc-result-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.doc-result-header div{ font-size:15px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:10px; }
.doc-result-header i{ color:var(--green); font-size:20px; }
.doc-diff-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.doc-diff-col h4{ font-size:12.5px; color:var(--text-muted); margin-bottom:8px; }
.doc-diff-box{ background:var(--grey-bg); border-radius:var(--radius-sm); padding:16px; font-size:12.5px; line-height:1.9; font-family:'JetBrains Mono', monospace; min-height:220px; }
.doc-diff-box .removed{ background:#fbd6d6; color:var(--red-dark); text-decoration:line-through; padding:1px 4px; border-radius:3px; }
.doc-diff-box .added{ background:#c9f0da; color:var(--green-dark); padding:1px 4px; border-radius:3px; }
.doc-result-actions{ display:flex; gap:10px; margin-top:18px; justify-content:flex-end; }

/* ============ WORKFLOW / KANBAN ============ */
.deadline-indicator{ background:var(--amber-bg); color:var(--amber-dark); padding:10px 16px; border-radius:20px; font-size:12.5px; font-weight:700; white-space:nowrap; }
.kanban-board{ display:grid; grid-template-columns:repeat(6, 1fr); gap:14px; overflow-x:auto; }
.kanban-col{ background:#eef1f4; border-radius:var(--radius); padding:14px; min-width:220px; display:flex; flex-direction:column; gap:12px; }
.kanban-col-header{ display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:700; color:var(--navy); text-transform:uppercase; letter-spacing:0.4px; padding:0 4px; }
.kanban-col-count{ background:#fff; border-radius:10px; padding:1px 8px; font-size:11px; color:var(--text-muted); }
.kanban-card{ background:#fff; border-radius:var(--radius-sm); padding:14px; box-shadow:var(--shadow-sm); border-top:3px solid var(--cyan); }
.kanban-card.priority-critical{ border-top-color:var(--red); }
.kanban-card.priority-high{ border-top-color:var(--amber); }
.kanban-card.priority-done{ border-top-color:var(--green); }
.kanban-card-title{ font-size:12.8px; font-weight:700; color:var(--navy); margin-bottom:8px; }
.kanban-card-row{ font-size:11.3px; color:var(--text-muted); display:flex; justify-content:space-between; margin-bottom:5px; }
.kanban-card-row b{ color:var(--text-main); }
.kanban-card-footer{ display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--grey-border); font-size:11px; color:var(--text-faint); }

/* ============ AUDIT TRAIL ============ */
.audit-timeline{ position:relative; padding-left:28px; }
.audit-timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:2px; background:var(--grey-border); }
.audit-item{ position:relative; padding-bottom:26px; }
.audit-item::before{ content:''; position:absolute; left:-28px; top:2px; width:12px; height:12px; border-radius:50%; background:var(--cyan); border:2px solid #fff; box-shadow:0 0 0 2px var(--cyan); }
.audit-date{ font-size:11px; color:var(--text-faint); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; }
.audit-action{ font-size:13.5px; font-weight:700; color:var(--navy); margin-top:3px; }
.audit-detail-row{ display:flex; gap:16px; margin-top:6px; font-size:11.8px; color:var(--text-muted); flex-wrap:wrap; }
.audit-detail-row span b{ color:var(--text-main); }

/* ============ PRIORITIZATION ============ */
.priority-ranking{ display:flex; flex-direction:column; gap:12px; }
.priority-item{ display:flex; align-items:center; gap:16px; padding:14px 16px; border:1px solid var(--grey-border); border-radius:var(--radius-sm); }
.priority-rank{ width:32px; height:32px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex:none; }
.priority-info{ flex:1; }
.priority-info b{ font-size:13.5px; color:var(--navy); display:block; }
.priority-info span{ font-size:11.5px; color:var(--text-muted); }
.priority-bar-wrap{ flex:2; }
.priority-bar-track{ background:var(--grey-bg); border-radius:6px; height:8px; overflow:hidden; }
.priority-bar-fill{ height:100%; border-radius:6px; }
.priority-revenue{ font-size:13.5px; font-weight:700; color:var(--navy); width:70px; text-align:right; }

/* ============ FORECAST ============ */
.forecast-card{ padding:26px; }
.forecast-top{ display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; flex-wrap:wrap; gap:16px;}
.forecast-top h2{ font-size:19px; }
.forecast-confidence{ text-align:center; }
.forecast-confidence span{ display:block; font-size:11px; color:var(--text-muted); margin-bottom:8px; }
.confidence-ring{
  width:80px; height:80px; border-radius:50%; margin:0 auto;
  background:conic-gradient(var(--amber) 0% 78%, var(--grey-border) 78% 100%);
  display:flex; align-items:center; justify-content:center; position:relative;
}
.confidence-ring::before{ content:''; position:absolute; inset:8px; background:#fff; border-radius:50%; }
.confidence-ring span{ position:relative; font-weight:800; color:var(--navy); font-size:16px; }
.forecast-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.forecast-stat{ background:var(--grey-bg); border-radius:var(--radius-sm); padding:16px; text-align:center; }
.forecast-stat span{ display:block; font-size:11.5px; color:var(--text-muted); margin-bottom:6px; }
.forecast-stat b{ font-size:19px; color:var(--navy); }
.early-warning-box{ display:flex; gap:14px; background:var(--amber-bg); padding:16px 18px; border-radius:var(--radius-sm); margin-bottom:20px; }
.early-warning-box i{ color:var(--amber-dark); font-size:20px; margin-top:2px; }
.early-warning-box b{ color:var(--amber-dark); display:block; margin-bottom:4px; }
.early-warning-box p{ font-size:13px; color:#6b4c0c; line-height:1.6; }
.forecast-result{ margin-top:20px; }
.forecast-result-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.forecast-result-item{ background:var(--navy); color:#fff; border-radius:var(--radius-sm); padding:16px; text-align:center; }
.forecast-result-item b{ display:block; font-size:20px; color:var(--cyan-light); }
.forecast-result-item span{ font-size:11px; color:#a9c1d1; }

/* ============ SETTINGS ============ */
.settings-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-bottom:20px; }
.settings-card{ background:#fff; border:1px solid var(--grey-border); border-radius:var(--radius); padding:22px; }
.settings-card i{ font-size:22px; color:var(--cyan); margin-bottom:12px; display:block; }
.settings-card h3{ font-size:14px; margin-bottom:6px; }
.settings-card p{ font-size:12.5px; color:var(--text-muted); }
.product-tagline-card{ background:linear-gradient(135deg, var(--navy), var(--navy-dark)); text-align:center; padding:40px 20px; }
.tagline-main{ display:block; font-size:24px; font-weight:800; color:#fff; letter-spacing:1px; }
.tagline-sub{ display:block; margin-top:10px; color:var(--cyan-light); font-size:14px; font-weight:600; }

/* ============ MODAL ============ */
.modal-overlay{
  position:fixed; inset:0; background:rgba(11,20,29,0.55); display:none; align-items:center; justify-content:center;
  z-index:100; padding:20px;
}
.modal-overlay.active{ display:flex; }
.modal{ background:#fff; border-radius:var(--radius); max-width:480px; width:100%; padding:24px; box-shadow:var(--shadow-lg); max-height:85vh; overflow-y:auto; }
.modal-close{ float:right; background:none; border:none; font-size:16px; color:var(--text-faint); cursor:pointer; }
.modal h3{ font-size:16px; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.modal-fact{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--grey-border); font-size:13px; }
.modal-fact span{ color:var(--text-muted); }
.modal-fact b{ color:var(--navy); }

/* ============ RESPONSIVE ============ */
@media (max-width: 1100px){
  .kpi-grid, .kpi-grid-5{ grid-template-columns:repeat(3,1fr); }
  .grid-2col{ grid-template-columns:1fr; }
  .radar-layout{ grid-template-columns:1fr; }
  .copilot-layout{ grid-template-columns:1fr; }
  .doc-generate-grid{ grid-template-columns:repeat(2,1fr); }
  .kanban-board{ grid-template-columns:repeat(3,1fr); }
  .impacted-elements-grid{ grid-template-columns:repeat(2,1fr); }
  .settings-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width: 720px){
  .sidebar{ position:fixed; left:-260px; transition:left .2s; height:100vh; }
  .sidebar.open{ left:0; }
  .mobile-nav-toggle{ display:block; }
  .kpi-grid, .kpi-grid-5{ grid-template-columns:repeat(2,1fr); }
  .kanban-board{ grid-template-columns:repeat(2,1fr); }
  .doc-generate-grid, .impacted-elements-grid, .settings-grid, .forecast-grid, .forecast-result-grid{ grid-template-columns:1fr; }
  .app-main{ padding:16px; }
  .topbar{ padding:0 14px; }
  .status-pill span.dot{ margin:0; }
  .status-pill{ display:none; }
}