/* ═══════════════════════════════════════════════════
   ABIRE — Workforce Intelligence Platform
   styles.css
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;400;500;600;700&family=Share+Tech+Mono&family=Exo+2:ital,wght@0,200;0,300;0,400;0,600;0,700;1,300&display=swap');

/* ── CSS VARIABLES ── */
:root {
  --bg-primary:    #020b14;
  --bg-secondary:  #05101d;
  --bg-card:       #071625;
  --bg-card2:      #091c30;
  --bg-input:      rgba(0,0,0,0.45);
  --border:        #0c2540;
  --border-bright: #174870;
  --border-glow:   rgba(0,212,255,0.25);
  --accent:        #00d4ff;
  --accent2:       #00ff9d;
  --accent3:       #ff6b35;
  --accent4:       #f7c948;
  --accent5:       #c084fc;
  --danger:        #ff3b5c;
  --text-primary:  #ddf3ff;
  --text-secondary:#7ab8d4;
  --text-muted:    #2e607a;
  --safe:          #00ff9d;
  --warning:       #f7c948;
  --grid-line:     rgba(0,180,255,0.03);
  --radius:        6px;
  --shadow-card:   0 4px 24px rgba(0,0,0,0.5);
}

/* ── RESET ── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Exo 2', sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  overflow-x: hidden;
  background-image:
    repeating-linear-gradient(0deg,   transparent, transparent 39px, var(--grid-line) 40px),
   
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar          { width:5px; height:5px; }
::-webkit-scrollbar-track    { background: var(--bg-primary); }
::-webkit-scrollbar-thumb    { background: var(--border-bright); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ═══════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════ */
#site-header {
  background: linear-gradient(135deg,#030f1c 0%,#071b30 60%,#030f1c 100%);
  border-bottom: 1px solid var(--border-bright);
  position: sticky; top:0; z-index:200;
  box-shadow: 0 2px 40px rgba(0,0,0,0.8), 0 1px 0 rgba(0,212,255,0.08);
}
.header-inner {
  max-width:1900px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 24px; height:62px;
}
.brand { display:flex; align-items:center; gap:14px; }
.brand-logo {
  width:44px; height:44px;
  border:1.5px solid var(--accent); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:17px;
  color:var(--accent); position:relative; overflow:hidden;
  box-shadow:0 0 20px rgba(0,212,255,0.2), inset 0 0 14px rgba(0,212,255,0.05);
  flex-shrink:0;
}
.brand-logo::before {
  content:''; position:absolute; top:-50%; left:-50%;
  width:200%; height:200%;
  background:conic-gradient(transparent 270deg, rgba(0,212,255,0.35) 360deg);
  animation: spinLogo 4s linear infinite;
}
@keyframes spinLogo { to { transform:rotate(360deg); } }
.brand-text h1 {
  font-family:'Rajdhani',sans-serif; font-size:19px; font-weight:700;
  color:var(--accent); letter-spacing:3px; line-height:1;
  text-shadow:0 0 24px rgba(0,212,255,0.45);
}
.brand-text p {
  font-size:9px; color:var(--text-muted); letter-spacing:1.8px;
  text-transform:uppercase; margin-top:3px;
  font-family:'Share Tech Mono',monospace;
}
.header-right { display:flex; align-items:center; gap:16px; }
.status-pill {
  display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,0.4); border:1px solid var(--border);
  border-radius:20px; padding:5px 14px;
  font-family:'Share Tech Mono',monospace; font-size:10px;
  letter-spacing:1.5px; white-space:nowrap;
}
.status-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--text-muted); transition:all 0.3s;
  flex-shrink:0;
}
.status-dot.idle    { background:var(--text-muted); }
.status-dot.running { background:var(--accent4); animation:blink 0.9s infinite; }
.status-dot.done    { background:var(--safe); box-shadow:0 0 8px var(--safe); }
@keyframes blink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(1.4)} }
#status-text { color:var(--text-secondary); text-transform:uppercase; }

/* ═══════════════════════════════════════════
   COMMAND BAR
   ═══════════════════════════════════════════ */
#command-bar {
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
  padding:9px 24px;
}
.command-inner {
  max-width:1900px; margin:0 auto;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.cmd-label {
  font-family:'Share Tech Mono',monospace; font-size:9px;
  color:var(--text-muted); letter-spacing:2px; text-transform:uppercase;
  margin-right:4px; white-space:nowrap;
}
.cmd-sep { width:1px; height:24px; background:var(--border); margin:0 4px; }

/* ═══════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════ */
.btn {
  font-family:'Exo 2',sans-serif; font-size:11px; font-weight:600;
  padding:6px 14px; border-radius:4px; border:1px solid;
  cursor:pointer; letter-spacing:1px; text-transform:uppercase;
  transition:all 0.18s; position:relative; overflow:hidden;
  white-space:nowrap; line-height:1.4;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0.06); opacity:0; transition:opacity 0.18s;
}
.btn:hover::after { opacity:1; }
.btn:active { transform:scale(0.97); }

.btn-primary  { background:rgba(0,212,255,0.09);  border-color:var(--accent);  color:var(--accent); }
.btn-primary:hover  { background:rgba(0,212,255,0.2);  box-shadow:0 0 14px rgba(0,212,255,0.3); }
.btn-success  { background:rgba(0,255,157,0.07);  border-color:var(--accent2); color:var(--accent2); }
.btn-success:hover  { background:rgba(0,255,157,0.18); box-shadow:0 0 14px rgba(0,255,157,0.3); }
.btn-warning  { background:rgba(247,201,72,0.07); border-color:var(--accent4); color:var(--accent4); }
.btn-warning:hover  { background:rgba(247,201,72,0.18);box-shadow:0 0 14px rgba(247,201,72,0.3); }
.btn-danger   { background:rgba(255,59,92,0.07);  border-color:var(--danger);  color:var(--danger); }
.btn-danger:hover   { background:rgba(255,59,92,0.18); box-shadow:0 0 14px rgba(255,59,92,0.3); }
.btn-purple   { background:rgba(192,132,252,0.07);border-color:var(--accent5); color:var(--accent5); }
.btn-purple:hover   { background:rgba(192,132,252,0.18);box-shadow:0 0 14px rgba(192,132,252,0.3); }
.btn-neutral  { background:rgba(255,255,255,0.03);border-color:var(--border-bright); color:var(--text-secondary); }
.btn-neutral:hover  { background:rgba(255,255,255,0.07); }
.btn-sm       { font-size:10px; padding:4px 10px; }
.btn-icon     { padding:6px 10px; }

/* ═══════════════════════════════════════════
   MAIN LAYOUT
   ═══════════════════════════════════════════ */
#app-main {
  max-width:1900px; margin:0 auto;
  padding:20px 24px 0;
}

/* ═══════════════════════════════════════════
   SECTION HEADERS
   ═══════════════════════════════════════════ */
.section-hdr {
  display:flex; align-items:center; gap:10px;
  margin-bottom:13px;
}
.section-lbl {
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:3px; text-transform:uppercase; color:var(--text-muted);
  white-space:nowrap;
}
.section-line {
  flex:1; height:1px;
  background:linear-gradient(90deg,var(--border),transparent);
}
.mb-4  { margin-bottom:4px; }
.mb-8  { margin-bottom:8px; }
.mb-14 { margin-bottom:14px; }
.mb-20 { margin-bottom:20px; }
.mb-28 { margin-bottom:28px; }

/* ═══════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════ */
.card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-card);
  transition:border-color 0.25s;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.25),transparent);
  opacity:0; transition:opacity 0.25s;
}
.card:hover { border-color:var(--border-bright); }
.card:hover::before { opacity:1; }
.card-title {
  font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:10px; display:flex; align-items:center; gap:7px;
}

/* ═══════════════════════════════════════════
   GRIDS
   ═══════════════════════════════════════════ */
.g-2  { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.g-3  { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.g-4  { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.g-5  { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.g-2-1{ display:grid; grid-template-columns:2fr 1fr; gap:14px; }

/* ═══════════════════════════════════════════
   KPI CARDS
   ═══════════════════════════════════════════ */
.kpi-val {
  font-family:'Share Tech Mono',monospace;
  font-size:30px; line-height:1; margin:6px 0 4px;
}
.kpi-sub { font-size:10px; color:var(--text-muted); letter-spacing:1px; }
.c-cyan   { color:var(--accent);  text-shadow:0 0 18px rgba(0,212,255,0.4); }
.c-green  { color:var(--accent2); text-shadow:0 0 18px rgba(0,255,157,0.4); }
.c-orange { color:var(--accent3); text-shadow:0 0 18px rgba(255,107,53,0.4); }
.c-yellow { color:var(--accent4); text-shadow:0 0 18px rgba(247,201,72,0.4); }
.c-purple { color:var(--accent5); text-shadow:0 0 18px rgba(192,132,252,0.4); }
.c-red    { color:var(--danger);  text-shadow:0 0 18px rgba(255,59,92,0.4);  }
.c-muted  { color:var(--text-muted); }

/* ═══════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════ */
.badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 9px; border-radius:3px; font-size:9px;
  font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  font-family:'Share Tech Mono',monospace;
}
.b-safe   { background:rgba(0,255,157,0.09);  border:1px solid rgba(0,255,157,0.3);  color:var(--safe); }
.b-warn   { background:rgba(247,201,72,0.09); border:1px solid rgba(247,201,72,0.3); color:var(--warning); }
.b-danger { background:rgba(255,59,92,0.09);  border:1px solid rgba(255,59,92,0.3);  color:var(--danger); }
.b-info   { background:rgba(0,212,255,0.09);  border:1px solid rgba(0,212,255,0.3);  color:var(--accent); }
.b-purple { background:rgba(192,132,252,0.09);border:1px solid rgba(192,132,252,0.3);color:var(--accent5); }

/* ═══════════════════════════════════════════
   TOOLTIPS
   ═══════════════════════════════════════════ */
.info-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; border-radius:50%;
  border:1px solid var(--text-muted); color:var(--text-muted);
  font-size:8px; cursor:help; position:relative; flex-shrink:0;
  transition:all 0.2s; user-select:none;
}
.info-icon:hover { border-color:var(--accent); color:var(--accent); }
.info-icon .tt {
  display:none; position:absolute; top:calc(100% + 8px); left:50%;
  transform:translateX(-50%); width:270px;
  background:#081e33; border:1px solid var(--border-bright);
  border-radius:6px; padding:12px; z-index:999; pointer-events:none;
  box-shadow:0 8px 40px rgba(0,0,0,0.7),0 0 20px rgba(0,212,255,0.08);
  animation:ttFade 0.15s ease;
}
@keyframes ttFade { from{opacity:0;transform:translateX(-50%) translateY(-4px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.info-icon:hover .tt { display:block; }
.tt-title { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; color:var(--accent); margin-bottom:7px; letter-spacing:1px; }
.tt-lbl   { font-size:8px; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--text-muted); font-family:'Share Tech Mono',monospace; margin-bottom:2px; }
.tt-body  { font-size:10px; color:var(--text-secondary); line-height:1.55; margin-bottom:6px; }
.tt-formula {
  font-family:'Share Tech Mono',monospace; font-size:9px; color:var(--accent4);
  background:rgba(247,201,72,0.05); border-left:2px solid var(--accent4);
  padding:4px 8px; border-radius:0 3px 3px 0; margin-top:3px;
}

/* ═══════════════════════════════════════════
   INPUTS
   ═══════════════════════════════════════════ */
.inp-lbl {
  font-size:9px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-muted); margin-bottom:5px;
  font-family:'Share Tech Mono',monospace;
  display:flex; align-items:center; gap:6px;
}
.inp {
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:4px; color:var(--text-primary);
  font-family:'Share Tech Mono',monospace; font-size:13px;
  padding:7px 11px; transition:all 0.2s; outline:none;
  -moz-appearance:textfield;
}
.inp::-webkit-outer-spin-button,
.inp::-webkit-inner-spin-button { -webkit-appearance:none; }
.inp:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,212,255,0.1); }
.inp::placeholder { color:var(--text-muted); }
.inp-sm { font-size:11px; padding:4px 7px; text-align:center; }
.inp-err { border-color:var(--danger) !important; }
.inp-warn { border-color:var(--accent4) !important; }

select.inp {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233a6a85'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:28px; cursor:pointer;
}

/* ═══════════════════════════════════════════
   INTERVAL CONFIG PANEL
   ═══════════════════════════════════════════ */
#interval-config-panel {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
}
.config-grid {
  display:grid;
  grid-template-columns:160px 160px 180px 160px 1fr;
  gap:12px; align-items:end;
}
@media(max-width:1100px){ .config-grid { grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){  .config-grid { grid-template-columns:1fr 1fr; } }

/* DATA SOURCE TOGGLE */
.ds-toggle {
  display:flex; border:1px solid var(--border); border-radius:4px; overflow:hidden;
}
.ds-toggle-btn {
  flex:1; padding:7px 12px; font-size:10px; font-weight:600;
  letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  font-family:'Share Tech Mono',monospace; border:none;
  background:transparent; color:var(--text-muted); transition:all 0.2s;
}
.ds-toggle-btn.active {
  background:rgba(0,212,255,0.12); color:var(--accent);
}

/* ═══════════════════════════════════════════
   BULK PASTE PANELS
   ═══════════════════════════════════════════ */
#bulk-panel {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:16px; margin-bottom:14px;
}
.bulk-cols {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
}
.bulk-col-box { display:flex; flex-direction:column; gap:6px; }
.bulk-col-lbl {
  font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  font-family:'Share Tech Mono',monospace; color:var(--text-muted);
  display:flex; align-items:center; justify-content:space-between;
}
.bulk-textarea {
  width:100%; height:90px; resize:vertical;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:4px; color:var(--text-primary);
  font-family:'Share Tech Mono',monospace; font-size:11px;
  padding:6px 8px; outline:none; transition:all 0.2s;
  scrollbar-width:thin; scrollbar-color:var(--border-bright) transparent;
}
.bulk-textarea:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(0,212,255,0.1); }
.bulk-textarea::placeholder { color:var(--text-muted); font-size:10px; }
.bulk-col-actions { display:flex; gap:4px; }

/* PASTE PREVIEW */
#paste-preview {
  display:none;
  background:rgba(247,201,72,0.04); border:1px solid rgba(247,201,72,0.25);
  border-radius:var(--radius); padding:12px 16px; margin-top:10px;
}
#paste-preview-title { font-size:11px; color:var(--accent4); font-family:'Share Tech Mono',monospace; letter-spacing:1px; margin-bottom:8px; }
#paste-preview-content { font-family:'Share Tech Mono',monospace; font-size:10px; color:var(--text-secondary); max-height:80px; overflow:auto; }
.preview-actions { display:flex; gap:8px; margin-top:10px; }

/* VALIDATION */
#validation-bar {
  display:none; padding:8px 14px; border-radius:4px; margin-top:8px;
  font-size:11px; font-family:'Share Tech Mono',monospace; letter-spacing:0.5px;
}
#validation-bar.warn   { background:rgba(247,201,72,0.08); border:1px solid rgba(247,201,72,0.3); color:var(--accent4); }
#validation-bar.error  { background:rgba(255,59,92,0.08);  border:1px solid rgba(255,59,92,0.3);  color:var(--danger); }
#validation-bar.ok     { background:rgba(0,255,157,0.06);  border:1px solid rgba(0,255,157,0.25); color:var(--safe); }

/* ═══════════════════════════════════════════
   INTERVAL TABLE
   ═══════════════════════════════════════════ */
#table-wrapper {
  overflow-x:auto; overflow-y:auto;
  max-height:520px; /* scrollable */
  border:1px solid var(--border); border-radius:var(--radius);
}
#interval-table { width:100%; border-collapse:collapse; font-size:11px; }
#interval-table thead { position:sticky; top:0; z-index:10; }
#interval-table th {
  background:#071322;
  color:var(--text-muted); font-family:'Share Tech Mono',monospace;
  font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
  padding:9px 10px; text-align:right; border-bottom:1px solid var(--border);
  white-space:nowrap; user-select:none;
}
#interval-table th:first-child { text-align:left; min-width:68px; }
#interval-table td {
  padding:3px 5px; text-align:right;
  border-bottom:1px solid rgba(12,37,64,0.5);
  white-space:nowrap;
}
#interval-table td:first-child { text-align:left; padding-left:10px; }
#interval-table tr:hover td { background:rgba(0,212,255,0.025); }
#interval-table tr:last-child td { border-bottom:none; }

/* Table cell inputs */
.tc {
  width:54px; background:transparent; border:1px solid transparent;
  border-radius:3px; color:var(--text-secondary);
  font-family:'Share Tech Mono',monospace; font-size:11px;
  padding:3px 5px; text-align:center; outline:none;
  transition:all 0.15s; -moz-appearance:textfield;
}
.tc::-webkit-outer-spin-button,.tc::-webkit-inner-spin-button { -webkit-appearance:none; }
.tc:hover { border-color:var(--border); background:var(--bg-input); }
.tc:focus { border-color:var(--accent); background:rgba(0,212,255,0.06); color:var(--text-primary); box-shadow:0 0 0 1px rgba(0,212,255,0.15); }
.tc.selected { background:rgba(0,212,255,0.12); border-color:var(--accent); }
.tc.paste-highlight { animation:pasteFlash 0.5s ease; }
@keyframes pasteFlash { 0%{background:rgba(0,212,255,0.3)} 100%{background:transparent} }

/* Today column */
.tc-today { color:var(--accent2) !important; }
.tc-today:focus { border-color:var(--accent2); background:rgba(0,255,157,0.06); }

/* Interval time label */
.int-lbl {
  font-family:'Share Tech Mono',monospace; font-size:10px;
  color:var(--accent); letter-spacing:0.5px;
}

/* Avg + Dev cells */
.td-avg { color:var(--text-muted); font-family:'Share Tech Mono',monospace; font-size:10px; }
.td-dev { font-family:'Share Tech Mono',monospace; font-size:10px; font-weight:700; }
.dev-normal   { color:var(--text-muted); }
.dev-mild     { color:var(--accent4); }
.dev-major    { color:var(--accent3); }
.dev-critical { color:var(--danger); }

/* ═══════════════════════════════════════════
   FORECAST INPUTS + KPIs
   ═══════════════════════════════════════════ */
.inputs-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media(max-width:1200px){ .inputs-5 { grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){  .inputs-5 { grid-template-columns:1fr 1fr; } }

.kpi-5 { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
@media(max-width:1200px){ .kpi-5 { grid-template-columns:repeat(3,1fr); } }
@media(max-width:700px){  .kpi-5 { grid-template-columns:1fr 1fr; } }

/* ═══════════════════════════════════════════
   ANALYSIS SECTIONS
   ═══════════════════════════════════════════ */
.metric-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 0; border-bottom:1px solid rgba(12,37,64,0.5);
  font-size:11px;
}
.metric-row:last-child { border-bottom:none; }
.mr-lbl { color:var(--text-muted); font-family:'Share Tech Mono',monospace; font-size:9px; letter-spacing:1px; }
.mr-val { font-family:'Share Tech Mono',monospace; font-weight:600; }

.pattern-center {
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:16px 8px;
}
.pattern-icon-big { font-size:34px; margin-bottom:8px; }
.pattern-name-big {
  font-family:'Rajdhani',sans-serif; font-size:17px; font-weight:700;
  color:var(--accent5); letter-spacing:2px; text-transform:uppercase; margin-bottom:5px;
}
.pattern-desc-txt { font-size:11px; color:var(--text-muted); line-height:1.55; }

.risk-lbl {
  font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700;
  letter-spacing:2px; text-transform:uppercase;
}
.risk-safe     { color:var(--safe);    text-shadow:0 0 20px rgba(0,255,157,0.5); }
.risk-moderate { color:var(--warning); text-shadow:0 0 20px rgba(247,201,72,0.5); }
.risk-critical { color:var(--danger);  text-shadow:0 0 20px rgba(255,59,92,0.5); animation:rp 1s infinite; }
@keyframes rp { 0%,100%{opacity:1} 50%{opacity:0.55} }

/* ═══════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════ */
.chart-h200 { position:relative; height:200px; }
.chart-h260 { position:relative; height:260px; }

/* ═══════════════════════════════════════════
   RECOMMENDATIONS
   ═══════════════════════════════════════════ */
.rec-item {
  display:flex; align-items:flex-start; gap:9px;
  padding:9px 12px; border-radius:4px; margin-bottom:7px;
  border:1px solid; font-size:11px; line-height:1.5;
}
.rec-item.safe     { background:rgba(0,255,157,0.04);  border-color:rgba(0,255,157,0.2);  color:var(--accent2); }
.rec-item.warn     { background:rgba(247,201,72,0.04); border-color:rgba(247,201,72,0.2); color:var(--accent4); }
.rec-item.critical { background:rgba(255,59,92,0.04);  border-color:rgba(255,59,92,0.2);  color:var(--danger); }
.rec-item.info     { background:rgba(0,212,255,0.04);  border-color:rgba(0,212,255,0.2);  color:var(--accent); }

/* ═══════════════════════════════════════════
   EXEC SUMMARY
   ═══════════════════════════════════════════ */
#exec-summary-box {
  background:rgba(0,0,0,0.35); border:1px solid var(--border-bright);
  border-radius:var(--radius); padding:16px;
  font-family:'Share Tech Mono',monospace; font-size:11px;
  line-height:1.9; color:var(--text-secondary);
  white-space:pre-wrap; min-height:150px;
  max-height:360px; overflow-y:auto;
}

/* ═══════════════════════════════════════════
   CAPACITY INPUTS
   ═══════════════════════════════════════════ */
.cap-inputs { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:900px){ .cap-inputs { grid-template-columns:1fr 1fr; } }

/* ═══════════════════════════════════════════
   SEO LANDING CONTENT
   ═══════════════════════════════════════════ */
#seo-content {
  background:var(--bg-secondary);
  border-top:1px solid var(--border); padding:60px 24px;
}
.seo-inner { max-width:1200px; margin:0 auto; }
.seo-h1 {
  font-family:'Rajdhani',sans-serif; font-size:36px; font-weight:700;
  color:var(--text-primary); letter-spacing:2px; line-height:1.2;
  margin-bottom:16px; text-align:center;
}
.seo-h1 span { color:var(--accent); }
.seo-lead {
  font-size:15px; color:var(--text-secondary); line-height:1.8;
  max-width:800px; margin:0 auto 48px; text-align:center;
}
.seo-h2 {
  font-family:'Rajdhani',sans-serif; font-size:22px; font-weight:700;
  color:var(--accent4); letter-spacing:1.5px; margin:40px 0 12px;
  border-bottom:1px solid var(--border); padding-bottom:8px;
}
.seo-h3 {
  font-family:'Rajdhani',sans-serif; font-size:16px; font-weight:600;
  color:var(--accent); letter-spacing:1px; margin:20px 0 8px;
}
.seo-p {
  font-size:13px; color:var(--text-secondary); line-height:1.8; margin-bottom:14px;
}
.features-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin:24px 0; }
.feature-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:20px;
  transition:border-color 0.25s, transform 0.25s;
}
.feature-card:hover { border-color:var(--border-bright); transform:translateY(-2px); }
.feature-card-icon { font-size:26px; margin-bottom:10px; }
.feature-card-title {
  font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700;
  color:var(--text-primary); letter-spacing:1px; margin-bottom:6px;
}
.feature-card-desc { font-size:12px; color:var(--text-muted); line-height:1.6; }

/* FAQ */
.faq-item {
  border-bottom:1px solid var(--border); padding:16px 0; cursor:pointer;
}
.faq-q {
  font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:600;
  color:var(--text-primary); letter-spacing:0.5px;
  display:flex; justify-content:space-between; align-items:center;
}
.faq-q::after { content:'▾'; color:var(--accent); font-size:14px; transition:transform 0.2s; }
.faq-item.open .faq-q::after { transform:rotate(180deg); }
.faq-a { font-size:12px; color:var(--text-secondary); line-height:1.7; max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding 0.3s; }
.faq-item.open .faq-a { max-height:300px; padding-top:10px; }

/* SHARE */
.share-bar {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:20px 24px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--radius);
  margin-top:32px;
}
.share-bar-txt { font-size:12px; color:var(--text-secondary); flex:1; min-width:200px; }
.share-bar-txt strong { color:var(--text-primary); }
.share-li-btn {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 16px; border-radius:4px;
  background:rgba(10,102,194,0.15); border:1px solid rgba(10,102,194,0.4);
  color:#5ba3e0; font-size:11px; font-weight:600; letter-spacing:1px;
  text-decoration:none; text-transform:uppercase; transition:all 0.2s;
}
.share-li-btn:hover { background:rgba(10,102,194,0.28); box-shadow:0 0 14px rgba(10,102,194,0.3); }

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
#site-footer {
  text-align:center; padding:18px 24px;
  border-top:1px solid var(--border);
  font-family:'Share Tech Mono',monospace; font-size:9px;
  color:var(--text-muted); letter-spacing:2px;
}
#site-footer span { color:var(--accent); }

/* ═══════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════ */
.toast {
  position:fixed; top:74px; right:20px;
  background:#081e33; border:1px solid var(--accent);
  border-radius:6px; padding:9px 16px; font-size:11px;
  color:var(--accent); z-index:9999;
  box-shadow:0 4px 24px rgba(0,0,0,0.5);
  font-family:'Share Tech Mono',monospace; letter-spacing:0.5px;
  animation:toastIn 0.25s ease forwards;
}
.toast.err  { border-color:var(--danger); color:var(--danger); }
.toast.warn { border-color:var(--accent4); color:var(--accent4); }
@keyframes toastIn  { from{opacity:0;transform:translateX(16px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { to{opacity:0;transform:translateX(16px)} }

/* ═══════════════════════════════════════════
   SCAN LINE EFFECT
   ═══════════════════════════════════════════ */
/*
body::after {
  display: none;
  content:''; position:fixed; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,0.55),transparent);
  animation:scanLine 7s linear infinite; pointer-events:none; z-index:9999;
}
*/
@keyframes scanLine {
  0%{top:0;opacity:0} 5%{opacity:1} 95%{opacity:1} 100%{top:100vh;opacity:0}
}

/* ═══════════════════════════════════════════
   MOBILE
   ═══════════════════════════════════════════ */
@media(max-width:768px) {
  #app-main { padding:14px 12px 0; }
  .g-2,.g-3,.g-4,.g-5 { grid-template-columns:1fr; }
  .g-2-1 { grid-template-columns:1fr; }
  .kpi-5 { grid-template-columns:1fr 1fr; }
  .header-inner { padding:0 12px; }
  .seo-h1 { font-size:24px; }
  .features-grid { grid-template-columns:1fr; }
  .bulk-cols { grid-template-columns:1fr 1fr; }
}

/* ═══════════════════════════════════════════
   API FEED PANEL
   ═══════════════════════════════════════════ */
#api-panel {
  display:none;
  background:rgba(0,212,255,0.03); border:1px solid rgba(0,212,255,0.15);
  border-radius:var(--radius); padding:14px; margin-top:10px;
}
.api-textarea {
  width:100%; height:110px; resize:vertical;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:4px; color:var(--accent4);
  font-family:'Share Tech Mono',monospace; font-size:10px;
  padding:8px; outline:none; transition:border-color 0.2s;
}
.api-textarea:focus { border-color:var(--accent); }

/* ═══════════════════════════════════════════
   UNDO HISTORY INDICATOR
   ═══════════════════════════════════════════ */
#undo-bar {
  display:none; font-size:10px; color:var(--accent4);
  font-family:'Share Tech Mono',monospace; letter-spacing:0.5px;
  padding:4px 0;
}