:root {
  --bg: #050508;
  --bg2: #080d1a;
  --bg3: #0c1220;
  --panel: #0a0f1e;
  --border: #1a2540;
  --border2: #243050;
  --accent: #22d3ee;
  --accent2: #17a3c4;
  --green: #00ff88;
  --green2: #00cc6a;
  --red: #f43f5e;
  --red2: #cc2244;
  --orange: #ff9500;
  --yellow: #ffd700;
  --purple: #9b59ff;
  --text: #c8d8f0;
  --text2: #7090b0;
  --text3: #6080a0;
  --white: #e8f0ff;
  --text-muted: #7090b0;        /* alias of --text2, was missing */
  --critical: #f43f5e;
  --warning: #ff9500;
  --info: #00d4ff;
  /* === ALPHA TOKENS (added to centralize literals) === */
  --accent-a04:  rgba(0, 212, 255, 0.04);
  --accent-a07:  rgba(0, 212, 255, 0.07);
  --accent-a10:  rgba(0, 212, 255, 0.10);
  --accent-a12:  rgba(0, 212, 255, 0.12);
  --accent-a15:  rgba(0, 212, 255, 0.15);
  --accent-a20:  rgba(0, 212, 255, 0.20);
  --accent-a30:  rgba(0, 212, 255, 0.30);
  --accent-a45:  rgba(0, 212, 255, 0.45);
  --green-a10:   rgba(0, 255, 136, 0.10);
  --green-a18:   rgba(0, 255, 136, 0.18);
  --green-a20:   rgba(0, 255, 136, 0.20);
  --red-a10:     rgba(244, 63, 94, 0.10);
  --red-a15:     rgba(244, 63, 94, 0.15);
  --red-a18:     rgba(244, 63, 94, 0.18);
  --red-a25:     rgba(244, 63, 94, 0.25);
  --red-a35:     rgba(244, 63, 94, 0.35);
  --orange-a20:  rgba(255, 149, 0, 0.20);
  --orange-a30:  rgba(255, 149, 0, 0.30);
  --glow: 0 0 20px var(--accent-a15);
  --glow-green: 0 0 20px var(--green-a20);
  --glow-red: 0 0 20px rgba(255,51,85,0.2);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Rajdhani', sans-serif;
  font-size: 14px;
  min-height: 100vh;
  overflow-x: clip;
  /* Permette scroll e pinch-zoom su iOS */
  touch-action: pan-x pan-y pinch-zoom;
  overflow-y: auto;
}
/* I canvas dei grafici gestiscono il pinch internamente tramite chart.js */
canvas {
  touch-action: none;
}
body::before {
  content:'';
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px);
  will-change: transform; transform: translateZ(0);   /* perf: composite layer */
}
#header {
  background: linear-gradient(90deg, #050810 0%, #080d1a 50%, #050810 100%);
  border-bottom: 1px solid var(--border2);
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  height: auto; min-height: 52px;
  position: sticky; top:0; z-index:100;
}
.header-left { display:flex; align-items:center; gap:16px; }
.logo {
  font-family: 'Orbitron', monospace;
  font-size: 20px; font-weight: 900;
  color: var(--accent);
  letter-spacing: 3px;
  text-shadow: 0 0 20px rgba(0,212,255,0.5);
}
.logo span { color: var(--green); }
.header-kpis { display:flex; gap:24px; }
.hkpi { text-align:center; }
.hkpi-label { font-size:12px; color:var(--white); letter-spacing:2px; text-transform:uppercase; }
.hkpi-val { font-family:'Share Tech Mono'; font-size:20px; font-weight:700; }
.hkpi-val.pos { color:var(--green); }
.hkpi-val.neg { color:var(--red); }
.hkpi-val.neutral { color:var(--accent); }
.header-right { display:flex; align-items:center; gap:12px; }
#clock { font-family:'Share Tech Mono'; font-size:15px; color:var(--accent); letter-spacing:2px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px var(--green); animation:pulse 2s infinite; }
.btn-exit { background:rgba(255,51,85,0.12); border:1px solid var(--red); color:var(--red); }
.btn-exit:hover { background:rgba(255,51,85,0.3); }
/* ── CLEAN BUTTON ── */
#clean-btn {
  background: rgba(255,149,0,0.08);
  border: 1px solid rgba(255,149,0,0.5);
  color: var(--orange);
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  font-family: 'Share Tech Mono';
  letter-spacing: 1px;
  font-weight: 700;
  line-height: 1;
  transition: all 0.2s;
}
#clean-btn:hover { background: rgba(255,149,0,0.22); border-color: var(--orange); color: #fff; box-shadow: 0 0 8px rgba(255,149,0,0.4); }
#clean-btn:disabled { opacity: 0.5; cursor: not-allowed; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
#ticker {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  height: 28px; overflow: hidden;
  display: flex; align-items: center;
  contain: paint;        /* perf: limit repaint to ticker area */
}
.ticker-inner {
  display:flex; gap:32px; white-space:nowrap;
  animation: ticker 140s linear infinite;
  will-change: transform;  /* perf: GPU layer */
}
@keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.tick-item { font-family:'Share Tech Mono'; font-size:14px; }
.tick-sym { color:var(--white); }
.tick-val { color:var(--green); margin-left:4px; }
.tick-val.neg { color:var(--red); }
/* ── PREMIUM TAB BAR ── */
#tabs {
  background: linear-gradient(180deg, #0c1220 0%, #080d1a 100%);
  border-bottom: 1px solid rgba(26,37,64,0.8);
  display: flex;
  gap: 2px;
  padding: 0 12px;
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  touch-action: pan-x;
  scrollbar-width: none;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}
#tabs::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-a15), transparent);
}
#tabs::-webkit-scrollbar { display: none; }

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  height: 46px;
  cursor: pointer;
  font-family: 'Rajdhani';
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--text2);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.tab::before {
  content: '';
  position: absolute;
  inset: 6px 4px;
  border-radius: 4px;
  background: transparent;
  transition: background 0.2s;
}
.tab:hover {
  color: var(--accent);
}
.tab:hover::before {
  background: var(--accent-a04);
}
.tab.active {
  color: var(--white);
  border-bottom-color: var(--accent);
}
.tab.active::before {
  background: var(--accent-a07);
}

/* Tab icon */
.tab-icon {
  font-size: 15px;
  line-height: 1;
  filter: saturate(0.6);
  transition: filter 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.tab:hover .tab-icon,
.tab.active .tab-icon {
  filter: saturate(1);
  transform: scale(1.1);
}

/* Tab label */
.tab-label {
  position: relative;
  z-index: 1;
}

/* Active accent line glow */
.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 20%; right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(0,212,255,0.6), 0 0 20px var(--accent-a30);
}

/* ── REDESIGNED BADGES ── */
.tab .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  font-family: 'Share Tech Mono';
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  background: rgba(255,51,85,0.25);
  color: #ff8099;
  border: 1px solid rgba(255,51,85,0.5);
  transition: all 0.2s;
}
.tab .badge.ok {
  background: rgba(0,204,106,0.2);
  color: #55ffaa;
  border-color: rgba(0,204,106,0.45);
}
.tab .badge.warn {
  background: rgba(255,149,0,0.2);
  color: #ffbb55;
  border-color: rgba(255,149,0,0.5);
}
.tab.active .badge {
  box-shadow: 0 0 6px currentColor;
}
/* ── TAB BAR WRAPPER + SCROLL ARROWS ── */
#tabs-wrap {
  position: sticky;
  top: 52px;
  z-index: 99;
  background: var(--bg);
}
.tabs-arrow {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 10;
  width: 28px;
  border: none;
  cursor: pointer;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  color: var(--text2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, color 0.2s;
  display: flex; align-items: center; justify-content: center;
}
.tabs-arrow:hover { color: var(--accent); }
.tabs-arrow.visible { opacity: 1; pointer-events: auto; }
#tabs-arrow-left  {
  left: 0;
  background: linear-gradient(90deg, #080d1a 40%, transparent);
}
#tabs-arrow-right {
  right: 0;
  background: linear-gradient(270deg, #080d1a 40%, transparent);
}

#content { padding: 12px 16px; }
.tab-panel { display:none; }
.tab-panel.active { display:block; animation:tabFadeIn 0.18s ease; }
.ctrl-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:rgba(10,16,40,0.6);border:1px solid var(--border2);border-radius:8px;gap:12px}
.ctrl-label{font-size:14px;color:var(--text2);font-family:'Share Tech Mono';letter-spacing:0.5px;flex:1}
.ctrl-desc{font-size:13px;color:var(--text-muted);margin-top:2px}
.toggle-wrap{position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0}
.toggle-wrap input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,0.1);border-radius:24px;transition:0.3s;border:1px solid rgba(255,255,255,0.15)}
.toggle-slider:before{position:absolute;content:'';height:18px;width:18px;left:2px;bottom:2px;background:rgba(255,255,255,0.4);border-radius:50%;transition:0.3s}
.toggle-wrap input:checked+.toggle-slider{background:rgba(0,212,255,0.35);border-color:var(--accent2)}
.toggle-wrap input:checked+.toggle-slider:before{transform:translateX(20px);background:#00d4ff}
.ctrl-section{font-size:11px;color:var(--text-muted);letter-spacing:1.5px;text-transform:uppercase;padding:6px 0 2px;border-bottom:1px solid var(--border2);margin-bottom:4px}
@keyframes tabFadeIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px; }
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
}
.panel-title {
  font-family:'Orbitron'; font-size:11px; letter-spacing:2px;
  color:var(--text2); text-transform:uppercase;
  margin-bottom:10px;
  display:flex; align-items:center; gap:6px;
  border-bottom:1px solid var(--border); padding-bottom:6px;
}
.panel-title span { color:var(--accent); }
.kpi-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius:4px; padding:12px 14px;
  position:relative; overflow:hidden;
}
.kpi-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
}
.kpi-card.green::before { background: linear-gradient(90deg, var(--green), transparent); }
.kpi-card.red::before   { background: linear-gradient(90deg, var(--red), transparent); }
.kpi-card.blue::before  { background: linear-gradient(90deg, var(--accent), transparent); }
.kpi-card.orange::before { background: linear-gradient(90deg, var(--orange), transparent); }
.kpi-label { font-size:13px; color:var(--white); letter-spacing:2px; text-transform:uppercase; }
.kpi-val { font-family:'Share Tech Mono'; font-size:29px; font-weight:700; margin:4px 0 2px; }
.kpi-val.pos { color:var(--green); }
.kpi-val.neg { color:var(--red); }
.kpi-val.blue { color:var(--accent); }
.kpi-val.orange { color:var(--orange); }
.kpi-sub { font-size:14px; color:var(--text); }
.data-table { width:100%; border-collapse:collapse; font-size:15px; }
.data-table th {
  text-align:left; padding:8px 10px;
  font-family:'Orbitron'; font-size:12px; letter-spacing:1.5px; color:var(--text2);
  border-bottom:1px solid var(--border); background:var(--bg2);
  text-transform:uppercase;
}
.data-table td { padding:8px 10px; border-bottom:1px solid rgba(26,37,64,0.5); vertical-align:middle; }
.data-table tbody tr {
  transition: background 0.15s, box-shadow 0.15s;
}
/* ── ZEBRA ── */
.data-table tbody tr:nth-child(odd) td {
  background: rgba(255,255,255,0.018);
}
.data-table tbody tr:nth-child(even) td {
  background: transparent;
}
/* ── HOVER GENERICO ── */
.data-table tbody tr:hover td {
  background: var(--accent-a07) !important;
  color: var(--white);
}
.data-table tbody tr:hover td:first-child {
  border-left: 2px solid rgba(0,212,255,0.5);
  padding-left: 6px;
}
.data-table tbody tr:hover {
  box-shadow: inset 0 0 0 1px rgba(0,212,255,0.08), 0 0 12px rgba(0,212,255,0.06);
}
.data-table tr:last-child td { border-bottom:none; }
/* ── HOVER AUDIT per SEVERITY ── */
.audit-main-row[data-sev="CRITICAL"]:hover td { background: rgba(255,51,85,0.1) !important; }
.audit-main-row[data-sev="CRITICAL"]:hover td:first-child { border-left: 2px solid var(--red) !important; padding-left:6px; }
.audit-main-row[data-sev="WARNING"]:hover td  { background: rgba(255,149,0,0.09) !important; }
.audit-main-row[data-sev="WARNING"]:hover td:first-child  { border-left: 2px solid var(--orange) !important; padding-left:6px; }
.audit-main-row[data-sev="INFO"]:hover td     { background: var(--accent-a07) !important; }
.audit-main-row[data-sev="INFO"]:hover td:first-child     { border-left: 2px solid var(--accent) !important; padding-left:6px; }
/* ── DETAIL ROW esclusa da zebra ── */
.audit-row-detail td { background: rgba(0,0,0,0.25) !important; }

/* ── STRISCIA SEVERITY SEMPRE VISIBILE ── */
.audit-main-row[data-sev="CRITICAL"] td:first-child { border-left: 3px solid var(--red) !important; }
.audit-main-row[data-sev="WARNING"]  td:first-child { border-left: 3px solid var(--orange) !important; }
.audit-main-row[data-sev="INFO"]     td:first-child { border-left: 3px solid var(--accent) !important; }
/* ── BADGE PULSE NUOVI ISSUE ── */
@keyframes badgePulse { 0%,100%{transform:scale(1);box-shadow:none} 40%{transform:scale(1.35);box-shadow:0 0 8px rgba(255,51,85,0.8)} }
.badge.new-pulse { animation: badgePulse 1.5s ease infinite; animation-iteration-count: 120; /* ~3min */ }

/* ── SEVERITY BADGES ── leggibili su sfondo scuro */
.sev {
  display:inline-block; padding:2px 8px;
  border-radius:2px; font-size:11px; font-weight:800;
  font-family:'Share Tech Mono'; letter-spacing:1px;
}
.sev-CRITICAL { /* contrast bumped to WCAG AA */
  background:rgba(255,51,85,0.22);
  color:#ffb0c0;
  border:1px solid rgba(255,51,85,0.55);
  text-shadow: 0 0 6px rgba(255,51,85,0.5);
}
.sev-WARNING {
  background:var(--orange-a20);
  color:#ffd089;
  border:1px solid rgba(255,149,0,0.55);
  text-shadow: 0 0 6px rgba(255,149,0,0.4);
}
.sev-INFO {
  background:var(--accent-a20);
  color:#66e5ff;
  border:1px solid rgba(0,212,255,0.55);
  text-shadow: 0 0 6px var(--accent-a30);
}

/* KPI card label per audit — stesso fix leggibilità */
#ak-crit { color:#ff8099 !important; }
#ak-warn { color:#ffbb55 !important; }
#ak-info { color:#66e5ff !important; }
/* Label audit KPI più visibili */
#audit-kpis .kpi-label { color: var(--white) !important; font-size:12px !important; letter-spacing:1.5px; font-weight:600; }

/* ── CRYPTO LOGO ── */
.crypto-logo {
  width:18px; height:18px; border-radius:50%;
  vertical-align:middle; margin-right:5px;
  object-fit:contain; background:rgba(255,255,255,0.05);
  display:inline-block;
}
.crypto-logo-sm { width:14px; height:14px; }
.sym-cell { display:flex; align-items:center; gap:5px; }

/* ── AI CHAT WIDGET ── */
#ai-chat-toggle {
  font-size:14px; letter-spacing:1px;
  background:var(--accent-a12); border:1px solid var(--accent);
  color:var(--accent); padding:4px 12px; border-radius:4px;
  cursor:pointer; font-family:'Share Tech Mono';
  transition:background 0.2s;
}
#ai-chat-panel {
  position:fixed; top:80px; right:24px; z-index:9000;
  width:400px; max-height:600px;
  background:#080d1a; border:1px solid #1a2540;
  border-radius:12px; display:none; flex-direction:column;
  box-shadow:0 0 40px rgba(0,0,0,0.6), 0 0 20px var(--accent-a10);
  overflow:hidden;
}
#ai-chat-panel.open { display:flex; }
@media(max-width:600px) {
    bottom: 16px; right: 16px;
    width: 48px; height: 48px; font-size: 22px;
  }
  #ai-chat-panel {
    /* Drawer dal basso: full width, altezza ~65% viewport */
    bottom: 0; right: 0; left: 0;
    width: 100%;
    max-height: 68vh;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
}
#ai-chat-header {
  background:linear-gradient(90deg,#0a0f1e,#0c1525);
  border-bottom:1px solid #1a2540;
  padding:12px 16px; display:flex; align-items:center; gap:10px;
}
#ai-chat-header .ai-avatar {
  width:32px; height:32px; border-radius:50%;
  background:linear-gradient(135deg,#00d4ff22,#0055aa44);
  border:1px solid #00d4ff44;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
#ai-chat-header .ai-name {
  font-family:'Orbitron'; font-size:12px; letter-spacing:2px; color:var(--accent);
}
#ai-chat-header .ai-model {
  font-size:11px; color:var(--text2); font-family:'Share Tech Mono';
}
#ai-chat-close {
  margin-left:auto; background:none; border:none; color:var(--text2);
  cursor:pointer; font-size:20px; line-height:1;
}
#ai-chat-close:hover { color:var(--red); }
#ai-chat-messages {
  flex:1; overflow-y:auto; padding:14px; display:flex;
  flex-direction:column; gap:10px; min-height:200px; max-height:400px;
}
#ai-chat-messages::-webkit-scrollbar { width:4px; }
#ai-chat-messages::-webkit-scrollbar-track { background:transparent; }
#ai-chat-messages::-webkit-scrollbar-thumb { background:#1a2540; border-radius:2px; }
.chat-msg {
  max-width:88%; padding:9px 13px; border-radius:8px;
  font-size:13px; line-height:1.5; word-break:break-word;
}
.chat-msg.user {
  align-self:flex-end;
  background:var(--accent-a12); border:1px solid var(--accent-a20);
  color:var(--text); border-bottom-right-radius:2px;
}
.chat-msg.ai {
  align-self:flex-start;
  background:rgba(255,255,255,0.04); border:1px solid #1a2540;
  color:var(--text); border-bottom-left-radius:2px;
}
.chat-msg.ai.thinking {
  color:var(--text2); font-style:italic; font-size:12px;
  padding-bottom: 8px;
}
.thinking-bar-wrap {
  margin-top: 6px;
  background: var(--border);
  border-radius: 3px;
  height: 3px;
  overflow: hidden;
}
.thinking-bar {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--green));
  background-size: 200% 100%;
  transition: width 1s linear;
  animation: shimmer 1.5s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.chat-msg.error { border-color:var(--red); color:var(--red); background:rgba(255,51,85,0.08); }
#ai-chat-input-row {
  border-top:1px solid #1a2540; padding:10px; display:flex; gap:8px; align-items:flex-end;
}
#ai-chat-input {
  flex:1; background:#050810; border:1px solid #1a2540;
  border-radius:6px; padding:8px 10px;
  color:var(--text); font-family:'Rajdhani'; font-size:14px;
  resize:none; max-height:80px; outline:none; line-height:1.4;
}
#ai-chat-input:focus { border-color:rgba(0,212,255,0.4); }
#ai-chat-send {
  background:var(--accent-a15); border:1px solid var(--accent);
  color:var(--accent); border-radius:6px; padding:8px 12px;
  cursor:pointer; font-size:18px; flex-shrink:0;
  transition:background 0.2s;
}
#ai-chat-send:hover { background:var(--accent-a30); }
#ai-chat-send:disabled { opacity:0.4; cursor:not-allowed; }

.ft { display:inline-block; padding:2px 6px; border-radius:2px; font-size:11px; font-weight:700; font-family:'Share Tech Mono'; }
.ft-SQL    { background:rgba(155,89,255,0.2); color:#c49aff; border:1px solid rgba(155,89,255,0.5); }
.ft-CODE   { background:var(--accent-a15); color:#66e5ff; border:1px solid var(--accent-a45); }
.ft-MANUAL { background:rgba(255,215,0,0.15); color:#ffe566; border:1px solid rgba(255,215,0,0.45); }
.ft-HTML   { background:rgba(0,230,160,0.15);  color:#00e6a0; border:1px solid rgba(0,230,160,0.45); }

.btn {
  padding:4px 10px; border:none; border-radius:2px;
  cursor:pointer; font-family:'Rajdhani'; font-weight:600;
  font-size:12px; letter-spacing:1px; text-transform:uppercase;
  transition:all 0.15s;
}
.btn-approve  { background:var(--green-a20); color:var(--green); border:1px solid rgba(0,255,136,0.4); }
.btn-approve:hover  { background:rgba(0,255,136,0.35); box-shadow:0 0 8px rgba(0,255,136,0.3); }
.btn-reject   { background:rgba(255,51,85,0.15); color:var(--red); border:1px solid rgba(255,51,85,0.3); }
.btn-reject:hover   { background:rgba(255,51,85,0.3); box-shadow:0 0 8px rgba(255,51,85,0.3); }
.btn-detail   { background:var(--accent-a10); color:var(--accent); border:1px solid rgba(0,212,255,0.25); }
.btn-detail:hover   { background:var(--accent-a20); }
.btn-resolve  { background:rgba(155,89,255,0.2); color:var(--purple); border:1px solid rgba(155,89,255,0.4); }
.btn-resolve:hover  { background:rgba(155,89,255,0.35); }
.btn-sm { padding:2px 7px; font-size:11px; }
.filter-bar { display:flex; gap:8px; margin-bottom:10px; align-items:center; flex-wrap:wrap; }
.filter-btn {
  padding:4px 12px; border-radius:2px; cursor:pointer;
  font-family:'Rajdhani'; font-weight:600; font-size:12px; letter-spacing:1px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
  transition:all 0.15s;
}
.filter-btn:hover  { border-color:var(--accent); color:var(--accent); }
.filter-btn.active { background:var(--accent-a10); border-color:var(--accent); color:var(--accent); }
/* Base colors per tipo (riposo) */
.filter-btn.f-crit   { border-color:rgba(255,51,85,0.35);   color:#ff8099; }
.filter-btn.f-warn   { border-color:rgba(255,149,0,0.35);   color:#ffbb55; }
.filter-btn.f-info   { border-color:rgba(0,212,255,0.35);   color:#66e5ff; }
.filter-btn.f-sql    { border-color:rgba(155,89,255,0.35);  color:#c49aff; }
.filter-btn.f-code   { border-color:rgba(85,221,204,0.35);  color:#55ddcc; }
.filter-btn.f-manual { border-color:rgba(255,229,102,0.35); color:#ffe566; }
.filter-btn.f-html   { border-color:rgba(0,230,160,0.35);   color:#00e6a0; }
/* Active colors per tipo */
.filter-btn.f-crit.active   { background:rgba(255,51,85,0.15);   border-color:var(--red);              color:#ff8099; }
.filter-btn.f-warn.active   { background:rgba(255,149,0,0.15);   border-color:var(--orange);           color:#ffbb55; }
.filter-btn.f-info.active   { background:var(--accent-a15);   border-color:var(--accent);           color:#66e5ff; }
.filter-btn.f-sql.active    { background:rgba(155,89,255,0.15);  border-color:var(--purple);           color:#c49aff; }
.filter-btn.f-code.active   { background:rgba(85,221,204,0.15);  border-color:rgba(85,221,204,0.7);    color:#55ddcc; }
.filter-btn.f-manual.active { background:rgba(255,229,102,0.15); border-color:rgba(255,229,102,0.7);   color:#ffe566; }
.filter-btn.f-html.active   { background:rgba(0,230,160,0.15);   border-color:rgba(0,230,160,0.7);     color:#00e6a0; }
.search-box {
  padding:4px 10px; background:var(--bg2); border:1px solid var(--border);
  border-radius:2px; color:var(--text); font-family:'Rajdhani'; font-size:13px;
  width:200px; outline:none;
}
.search-box:focus { border-color:var(--accent); }
.filter-count { font-family:'Share Tech Mono'; font-size:12px; color:var(--text); margin-left:auto; }
.dir-L, .dir-LONG  { color:var(--green); font-weight:700; font-family:'Share Tech Mono'; }
.dir-S, .dir-SHORT { color:var(--red);   font-weight:700; font-family:'Share Tech Mono'; }
.pl-pos { color:var(--green); font-family:'Share Tech Mono'; }
.pl-neg { color:var(--red);   font-family:'Share Tech Mono'; }
.mono { font-family:'Share Tech Mono'; }
#modal-overlay {
  display:none; position:fixed; inset:0; z-index:500;
  background:rgba(5,8,16,0.92); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
#modal-overlay.open { display:flex; }
#modal {
  background:var(--bg2); border:1px solid var(--border2);
  border-radius:4px; max-width:700px; width:92%;
  max-height:85vh; overflow-y:auto;
  overscroll-behavior: contain;
  box-shadow: 0 0 40px var(--accent-a10);
}
@media(max-width:600px) {
  #modal-overlay { align-items: flex-end; }
  /* Handle bar per swipe-to-dismiss */
  #modal::before {
    content: '';
    display: block;
    width: 36px; height: 4px;
    background: var(--border2);
    border-radius: 2px;
    margin: 10px auto 0;
  }
}
.modal-header {
  padding:14px 18px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg3);
}
.modal-title { font-family:'Orbitron'; font-size:14px; color:var(--accent); letter-spacing:2px; }
.modal-close { background:none; border:none; color:var(--text2); cursor:pointer; font-size:20px; }
.modal-close:hover { color:var(--red); }
.modal-body { padding:16px 18px; }
.modal-section { margin-bottom:14px; }
.modal-section-title {
  font-size:11px; letter-spacing:2px; text-transform:uppercase;
  color:var(--text2); margin-bottom:6px;
  font-family:'Orbitron';
}
.modal-section p { color:var(--text); line-height:1.6; font-size:14px; }
.code-block {
  background:var(--bg); border:1px solid var(--border);
  border-radius:2px; padding:10px 12px;
  font-family:'Share Tech Mono'; font-size:12px;
  color:var(--green); line-height:1.5;
  overflow-x:auto; white-space:pre-wrap; word-break:break-all;
}
.modal-actions { display:flex; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--border); }
.agent-row {
  display:flex; align-items:center; gap:10px;
  padding:7px 0; border-bottom:1px solid rgba(26,37,64,0.5);
}
.agent-row:last-child { border-bottom:none; }
.agent-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.agent-dot.ok    { background:var(--green); box-shadow:0 0 6px var(--green); }
.agent-dot.warn  { background:var(--orange); box-shadow:0 0 6px var(--orange); }
.agent-dot.crit  { background:var(--red); box-shadow:0 0 6px var(--red); }
.agent-zona { font-weight:700; color:var(--white); min-width:140px; font-size:13px; }
.agent-model { color:var(--text); font-size:12px; font-family:'Share Tech Mono'; min-width:120px; }
.agent-counts { display:flex; gap:6px; }
.ac { font-size:11px; padding:1px 5px; border-radius:2px; font-family:'Share Tech Mono'; }
.ac-c { background:rgba(255,51,85,0.15); color:#ff8099; }
.ac-w { background:rgba(255,149,0,0.15); color:#ffbb55; }
.progress-wrap { background:var(--bg); border-radius:2px; height:4px; margin-top:4px; }
.progress-bar { height:100%; border-radius:2px; transition:width 0.5s; }
.regime { font-size:11px; padding:2px 5px; border-radius:2px; font-family:'Share Tech Mono'; }
.regime-TRENDING  { background:var(--green-a10); color:var(--green2); }
.regime-RANGING   { background:var(--accent-a10); color:var(--accent2); }
.regime-VOLATILE  { background:rgba(255,149,0,0.1); color:var(--orange); }
.regime-SQUEEZE   { background:rgba(155,89,255,0.1); color:var(--purple); }
.regime-UNKNOWN   { background:rgba(64,80,112,0.3); color:var(--text2); }
#loading {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  z-index:10500;
  background:#050810;
  display:none;
  flex-direction:column; align-items:center; justify-content:center;
  gap:16px;
}
#loading.visible { display:flex !important; }
.loading-logo { font-family:'Orbitron'; font-size:31px; font-weight:900; color:var(--accent); letter-spacing:4px; }
.loading-bar-wrap { width:300px; height:2px; background:var(--border); border-radius:2px; }
.loading-bar { height:100%; background:linear-gradient(90deg,var(--accent),var(--green)); border-radius:2px; animation:loadanim 1.5s ease-in-out; }
@keyframes loadanim { 0%{width:0} 80%{width:90%} 100%{width:100%} }
@keyframes loadpulse { 0%,100%{opacity:0.6} 50%{opacity:1} }
#loading.visible .loading-bar { animation: loadanim 1.5s ease-in-out infinite; }

/* ── PULL-TO-REFRESH ── */
#ptr-indicator {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 8000;
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--accent-a12), transparent);
  transition: height 0.15s ease;
  pointer-events: none;
}
#ptr-indicator.pulling  { height: 56px; }
#ptr-indicator.ready    { height: 56px; background: linear-gradient(180deg, rgba(0,255,136,0.15), transparent); }
#ptr-indicator.loading  { height: 56px; }
#ptr-spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--accent-a20);
  border-top-color: var(--accent);
  border-radius: 50%;
  transition: transform 0.15s, border-color 0.2s;
}
#ptr-indicator.ready #ptr-spinner  { border-top-color: var(--green); transform: rotate(180deg); }
#ptr-indicator.loading #ptr-spinner { animation: ptr-spin 0.7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }
#ptr-label {
  font-family: 'Share Tech Mono'; font-size: 12px; letter-spacing: 1px;
  color: var(--accent); transition: color 0.2s;
}
#ptr-indicator.ready #ptr-label { color: var(--green); }
.loading-txt { font-family:'Share Tech Mono'; font-size:13px; color:var(--text2); }
#toast { display:none !important;
  position:fixed; bottom:20px; right:20px; z-index:9500;
  background:var(--bg2); border-radius:4px;
  padding:10px 16px; border-left:3px solid var(--green);
  font-size:14px; color:var(--text);
  transform:translateX(120%); transition:transform 0.3s;
  max-width:320px;
}
#toast.show { transform:translateX(0); }
#toast.err  { border-left-color:var(--red); }
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent2); }
.cat-tabs { display:flex; gap:6px; margin-bottom:10px; flex-wrap:wrap; }
.cat-tab {
  padding:4px 12px; border-radius:2px; cursor:pointer;
  font-family:'Rajdhani'; font-weight:600; font-size:12px; letter-spacing:1px;
  background:var(--bg2); border:1px solid var(--border); color:var(--text2);
  transition:all 0.15s;
}
.cat-tab.active { background:var(--accent-a10); border-color:var(--accent); color:var(--accent); }
.cat-count { font-family:'Share Tech Mono'; font-size:11px; margin-left:4px; }
.zone-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; }
.zone-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:4px; padding:10px;
  display:flex; flex-direction:column; gap:4px;
}
.zone-card.ok    { border-left:3px solid var(--green); }
.zone-card.warn  { border-left:3px solid var(--orange); }
.zone-card.crit  { border-left:3px solid var(--red); animation:zoneflash 2s infinite; }
@keyframes zoneflash { 0%,100%{border-left-color:var(--red)} 50%{border-left-color:rgba(255,51,85,0.3)} }
.zone-name { font-weight:700; color:var(--white); font-size:13px; }
.zone-counts { display:flex; gap:6px; font-family:'Share Tech Mono'; font-size:12px; }
.kill-alert {
  background:rgba(255,51,85,0.1); border:1px solid var(--red);
  border-radius:4px; padding:8px 14px;
  display:flex; align-items:center; gap:10px;
  margin-bottom:10px;
  animation:killflash 1s infinite;
}
@keyframes killflash { 0%,100%{opacity:1} 50%{opacity:0.7} }
.sparkline { display:inline-flex; align-items:flex-end; gap:1px; height:20px; vertical-align:middle; }
.spark-bar { width:3px; background:var(--accent); border-radius:1px; }
.no-data { text-align:center; padding:40px 20px; color:var(--text3); font-family:'Share Tech Mono'; font-size:13px; }

/* ── SKELETON LOADER ── */
@keyframes shimmer-sweep {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.skeleton-row {
  display: flex; gap: 8px; padding: 8px 0;
  border-bottom: 1px solid rgba(26,37,64,0.3);
}
.skeleton-row:last-child { border-bottom: none; }
.skel {
  height: 12px; border-radius: 3px;
  background: linear-gradient(90deg, #0c1220 25%, #1a2540 50%, #0c1220 75%);
  background-size: 400px 100%;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
}
.skel-wide  { flex: 3; }
.skel-mid   { flex: 2; }
.skel-short { flex: 1; }
.skeleton-kpi {
  height: 28px; border-radius: 3px; margin: 6px 0 4px;
  background: linear-gradient(90deg, #0c1220 25%, #1a2540 50%, #0c1220 75%);
  background-size: 400px 100%;
  animation: shimmer-sweep 1.4s ease-in-out infinite;
}
@media(prefers-reduced-motion: reduce) {
  /* Skeleton */
  .skel, .skeleton-kpi { animation: none; background: #0c1220; }
  /* Badge pulse */
  .badge.new-pulse, #notif-toggle .notif-count { animation: none; }
  /* Ticker */
  .ticker-inner { animation: none; }
  /* Tab fade-in */
  .tab-panel.active { animation: none; }
  /* Shortcut panel open */
  #shortcut-panel { animation: none; }
  /* Status dot pulse */
  .status-dot { animation: none; }
  /* Zone card flash */
  .zone-card.crit { animation: none; }
  /* Kill switch flash */
  .kill-alert { animation: none; }
  /* Loading bar */
  .loading-bar { animation: none; width: 100%; }
  /* Chart shimmer */
  .thinking-bar { animation: none; }
  /* PTR spinner */
  #ptr-spinner { animation: none !important; }
  /* All transitions halved */
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}
/* ═══════════════════════════════════════
   TABLET  (≤ 900px)
═══════════════════════════════════════ */
@media(max-width:900px) {
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-3 { grid-template-columns:1fr 1fr; }
  .header-kpis { display:flex; gap:24px; }
}

/* ═══════════════════════════════════════
   MOBILE PORTRAIT  (≤ 600px)
═══════════════════════════════════════ */
@media(max-width:600px) {
  body { font-size:14px; width:100%; max-width:100vw; }
  /* FIX SCROLL PORTRAIT: layout a colonna flex — solo #content scorre */
  html { height:100%; overflow:hidden; }
  body { height:100% !important; min-height:0 !important; overflow:hidden !important; display:flex !important; flex-direction:column !important; }
  #header   { position:relative !important; top:auto !important; flex-shrink:0 !important; }
  #ticker   { flex-shrink:0 !important; }
  #tabs-wrap{ position:relative !important; top:auto !important; flex-shrink:0 !important; }
  #content  { flex:1 1 0 !important; overflow-y:scroll !important; overflow-x:hidden !important;
              -webkit-overflow-scrolling:touch; min-height:0 !important; }
  #header { height:auto; min-height:46px; padding:7px 10px; flex-wrap:nowrap; width:100%; max-width:100vw; box-sizing:border-box; }
  .logo { font-size:16px; letter-spacing:2px; }
  .header-kpis { display:flex; gap:24px; }
  .header-right { gap:6px; flex-shrink:0; }
  #clock { font-size:12px; letter-spacing:1px; }
  /* Search box nascosta su mobile — troppo stretta */
  #global-search-wrap { display:none; }
  #ticker { max-width:100vw; overflow:hidden; height:24px; }
  .tick-item { font-size:11px; }
  #tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; padding:0 8px; scrollbar-width:none; width:100%; max-width:100vw; touch-action:pan-x; }
  /* Agenti: colonna singola su mobile + permetti scroll tabella */
  .grid-4 { grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:10px; }
  .grid-3 { grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px; }
  .grid-2 { grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px; }
  .kpi-card { padding:9px 10px; }
  .kpi-val { font-size:22px; margin:3px 0 1px; }
  .kpi-label { font-size:10px; letter-spacing:1px; }
  .kpi-sub { font-size:11px; }
  .panel { padding:9px 10px; overflow-x:hidden; max-width:100%; box-sizing:border-box; }
  .panel-title { font-size:10px; letter-spacing:1.5px; }
  .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; font-size:12px; }
  .data-table thead { display:table; width:100%; }
  .data-table tbody { display:table; width:100%; }
  .data-table th { padding:5px 6px; font-size:9px; letter-spacing:0.8px; white-space:nowrap; }
  .data-table td { padding:5px 6px; white-space:nowrap; }
  /* Colonne secondarie nascoste per tabella */
  #trades-table th:nth-child(8),#trades-table td:nth-child(8),
  #trades-table th:nth-child(9),#trades-table td:nth-child(9),
  #trades-table th:nth-child(10),#trades-table td:nth-child(10),
  #trades-table th:nth-child(12),#trades-table td:nth-child(12) { display:none; }
  #watch-table th:nth-child(7),#watch-table td:nth-child(7),
  #watch-table th:nth-child(8),#watch-table td:nth-child(8),
  #watch-table th:nth-child(9),#watch-table td:nth-child(9) { display:none; }
  #deleted-table th:nth-child(8),#deleted-table td:nth-child(8) { display:none; }
  #stats-table th:nth-child(8),#stats-table td:nth-child(8),
  #stats-table th:nth-child(9),#stats-table td:nth-child(9),
  #stats-table th:nth-child(10),#stats-table td:nth-child(10) { display:none; }
  #hist-table th:nth-child(7),#hist-table td:nth-child(7) { display:none; }
  
  /* Touch targets — WCAG 2.5.5: min 44×44px */
  .btn { min-height:44px; padding:8px 14px; font-size:14px; }
  .btn-sm { min-height:38px; padding:6px 10px; font-size:13px; }
  .filter-btn { min-height:40px; padding:7px 12px; font-size:13px; }
  .cat-tab { min-height:38px; padding:7px 12px; }
  .filter-bar { flex-wrap:wrap; gap:5px; margin-bottom:8px; }
  .search-box { width:100%; min-width:0; flex:1 1 100%; padding:9px 12px; min-height:44px; font-size:15px; }
  .filter-count { margin-left:0; width:100%; text-align:right; font-size:11px; }
  .cat-tabs { overflow-x:auto; flex-wrap:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:4px; gap:5px; touch-action:pan-x; }
  .cat-tabs::-webkit-scrollbar { display:none; }
  .cat-tab { flex-shrink:0; }
  .zone-grid { grid-template-columns: 1fr; }
  .zone-card { flex-direction: row; align-items: center; gap: 10px; padding: 9px 12px; }
  .zone-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .zone-counts { flex-shrink: 0; flex-wrap: nowrap; }
  .audit-detail-grid { grid-template-columns:1fr; }
  .audit-expand-btn { min-width:36px; min-height:36px; }
  /* Modal: drawer dal basso, pulsanti a colonna piena */
  #modal { width:100vw; max-height:92vh; overflow-y:auto; margin:0; border-radius:16px 16px 0 0; border-bottom:none; }
  .modal-header { padding:12px 16px; }
  .modal-title { font-size:13px; letter-spacing:1px; }
  .modal-body { padding:14px; }
  .modal-section p { font-size:14px; }
  .modal-actions { flex-direction:column; gap:8px; padding:12px 16px 20px; }
  .modal-actions .btn { width:100%; min-height:48px; font-size:15px; }
  .code-block { font-size:12px; }
  /* Tabelle: leggermente più grandi su mobile */
  .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; font-size:13px; }
  .data-table thead { display:table; width:100%; }
  .data-table tbody { display:table; width:100%; }
  .data-table th { padding:6px 7px; font-size:10px; letter-spacing:0.6px; white-space:nowrap; }
  .data-table td { padding:7px 7px; white-space:nowrap; }
  #chart-modal-overlay > div > div { width:98vw !important; padding:12px !important; max-height:90vh; overflow-y:auto; }
  #chart-modal-title { font-size:14px !important; letter-spacing:1px !important; }
  #toast { display:none !important; bottom:10px; right:8px; left:8px; max-width:none; font-size:13px; }
  /* Session cards su mobile */
  .session-card { padding:8px 10px; }
  .session-meta { gap:6px; font-size:11px; flex-wrap:wrap; }
  .session-fingerprint { font-size:12px; }
  /* ── iOS Safe Area (notch + home bar) ── */
  #header   { padding-top: max(7px, env(safe-area-inset-top)); padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  /* Fix Dynamic Island / notch: tabs-wrap segue l'altezza reale dell'header via JS --header-h */
  #tabs-wrap { top: var(--header-h, 52px); }
  #ai-chat-panel { padding-bottom: env(safe-area-inset-bottom); right: max(0px, env(safe-area-inset-right)); left: max(0px, env(safe-area-inset-left)); }
  #toast { display:none !important; bottom: max(10px, calc(env(safe-area-inset-bottom) + 8px)); right: max(8px, env(safe-area-inset-right)); left: max(8px, env(safe-area-inset-left)); }
  /* Chat drawer: non finisce sotto la home bar */
  #ai-chat-input-row { padding-bottom: max(10px, calc(env(safe-area-inset-bottom) + 6px)); }
  #ai-chat-messages { touch-action: pan-y; }
  /* Modal scroll dentro il drawer */
  #modal { touch-action: pan-y; }
  /* Tabs e content rispettano i bordi laterali in landscape */
  #tabs { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); touch-action: pan-x; }
  #content { padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); }
}

/* ═══════════════════════════════════════
   LANDSCAPE MOBILE  (altezza ≤ 500px)
═══════════════════════════════════════ */
@media(max-height:500px) and (orientation:landscape) {
  #header { height:38px; min-height:38px; padding:0 12px; }
  .logo { font-size:15px; letter-spacing:2px; }
  .header-kpis { display:flex; gap:24px; }
  #clock { font-size:12px; }
  .btn { padding:4px 10px; min-height:30px; font-size:12px; }
  /* Ticker nascosto: altezza critica, guadagna 22px verticali */
  #ticker { display: none; }
  #tabs { padding:0 6px; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; touch-action:pan-x; }
  #tabs::-webkit-scrollbar { display:none; }
  .tab { padding:0 10px; height:36px; font-size:11px; flex-shrink:0; white-space:nowrap; }
  #content { padding:6px 8px; }
  .grid-4 { grid-template-columns:repeat(4,1fr); gap:6px; }
  .grid-3 { grid-template-columns:repeat(3,1fr); gap:6px; }
  .grid-2 { grid-template-columns:1fr 1fr; gap:6px; }
  .kpi-val { font-size:20px; margin:2px 0 1px; }
  .kpi-card { padding:6px 9px; }
  .kpi-sub { font-size:10px; }
  .panel { padding:7px 10px; }
  .panel-title { font-size:10px; margin-bottom:7px; }
  .data-table { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; font-size:12px; }
  .data-table th { padding:4px 6px; font-size:9px; white-space:nowrap; }
  .data-table td { padding:4px 6px; white-space:nowrap; }
  #modal { max-height:92vh; width:min(680px,96vw); }
  .modal-body { padding:10px 14px; max-height:60vh; overflow-y:auto; }
  .zone-grid { grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:6px; }
  /* Chat: pannello laterale in landscape invece di drawer dal basso */
  #ai-chat-panel { bottom:0; right:0; left:auto; width:55vw; max-height:100vh; border-radius:12px 0 0 12px; border-bottom:1px solid #1a2540; }
  /* Fix notch/fotocamera landscape: safe-area-inset-top garantisce che
     l'header non vada sotto la fotocamera anche se ruotata in orizzontale
     (Android punch-hole in alto, iPhone Dynamic Island sul lato) */
  #header {
    height: auto;
    min-height: 38px;
    padding-top: max(0px, env(safe-area-inset-top));
    padding-left: max(59px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
  /* tabs-wrap usa --header-h misurato dal JS (si aggiorna su orientationchange) */
  #tabs-wrap { top: var(--header-h, 38px); }
  #tabs { padding-left: max(59px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
  #content { padding-left: max(59px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
}

/* ═══════════════════════════════════════
   LANDSCAPE: Dynamic Island / Notch fix
   Garantisce che contenuto parta DOPO
   l'isola fotocamera su qualsiasi iPhone
═══════════════════════════════════════ */

/* ═══════════════════════════════════════
   EXTRA SMALL  (≤ 380px — iPhone SE)
═══════════════════════════════════════ */
@media(max-width:380px) {
  .logo { font-size:14px; letter-spacing:1px; }
  #clock { font-size:10px !important; letter-spacing:0px !important; opacity:0.85; }
  #header { padding:6px 8px; }
  /* Solo icona nei tab: guadagna ~40% di spazio orizzontale */
  .tab .tab-label { display: none; }
  .tab { font-size:15px; padding:0 10px; height:42px; gap:0; }
  .tab .tab-icon { font-size:18px; }
  .tab .badge { min-width:14px; height:14px; font-size:9px; padding:0 3px; }
  .grid-4 { grid-template-columns:1fr 1fr; gap:6px; }
  .kpi-val { font-size:19px; }
  .kpi-label { font-size:9px; }
  .btn { font-size:12px; padding:5px 9px; min-height:34px; }
  .filter-btn { font-size:11px; padding:5px 8px; min-height:32px; }
  #content { padding:6px; }
  .panel { padding:7px 8px; }
  .data-table th { font-size:8px; padding:4px 5px; }
  .data-table td { padding:4px 5px; font-size:11px; }
  #toast { display:none !important; font-size:12px; }
}

/* Frecce tab bar: su touch lo swipe è già gestito, le frecce sono ridondanti */
@media(max-width:600px) {
  .tabs-arrow { display: none !important; }
}

@media(max-width:900px) {
  #audit-kpis { grid-template-columns: repeat(3,1fr) !important; }
}
@media(max-width:700px) {
  #audit-kpis { grid-template-columns: repeat(2,1fr) !important; }
  .ank-track { grid-template-columns: 90px 1fr 1fr 1fr auto; }
  .ank-block { padding:7px 10px; }
}
.ank-track {
  display:grid; grid-template-columns:110px 1fr 1fr 1fr auto;
  align-items:center; gap:0;
  border-bottom:1px solid var(--border); position:relative; overflow:hidden;
}
.ank-track:last-child { border-bottom:none; }
.ank-track-label { padding:10px 12px; border-right:1px solid var(--border); }
.ank-block { padding:8px 14px; border-right:1px solid var(--border); }
.ank-lbl { font-family:Orbitron;font-size:9px;letter-spacing:2px;color:#ffffff;margin-bottom:4px; }
.ank-bar-wrap { position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--border); }
.ank-bar { height:100%;width:0%;transition:width 1s linear;border-radius:0 2px 2px 0; }
@media(max-width:600px){
  .ank-track { grid-template-columns:68px 1fr 1fr 1fr; }
  .ank-block { padding:5px 6px; border-right:none; }
  .ank-block:nth-child(3) { display:block; border-left:1px solid var(--border); }
  .ank-block:nth-child(4) { display:block; border-left:1px solid var(--border); }
  .ank-track > div:nth-child(5) { display:none; } /* nascondi btn AVVIA su mobile */
  .ank-lbl { font-size:7px; letter-spacing:1px; }
}
.ud { display:inline-block; padding:2px 7px; border-radius:2px; font-size:11px; font-weight:700; font-family:'Share Tech Mono'; letter-spacing:0.5px; }
.ud-PENDING  { background:rgba(255,149,0,0.25); color:#ffbb55; border:1px solid rgba(255,149,0,0.5); }
.ud-YES      { background:var(--green-a18); color:#55ffaa; border:1px solid rgba(0,255,136,0.45); }
.ud-NO       { background:rgba(255,51,85,0.18); color:#ff8099; border:1px solid rgba(255,51,85,0.45); }
.es { display:inline-block; padding:2px 7px; border-radius:2px; font-size:11px; font-weight:700; font-family:'Share Tech Mono'; letter-spacing:0.5px; }
.es-WAITING    { background:rgba(255,215,0,0.18);  color:#ffe566;  border:1px solid rgba(255,215,0,0.45); }
.es-DONE       { background:rgba(0,255,136,0.15);  color:#55ffaa;  border:1px solid rgba(0,255,136,0.4); }
.es-FAILED     { background:rgba(255,51,85,0.18);  color:#ff8099;  border:1px solid rgba(255,51,85,0.4); }
.es-TESTING    { background:var(--accent-a15);  color:#66e5ff;  border:1px solid rgba(0,212,255,0.4); }
.es-TEST_FAILED{ background:rgba(255,149,0,0.2);   color:#ffbb55;  border:1px solid rgba(255,149,0,0.5); }
.audit-row-detail { display:none; }
.audit-row-detail.open { display:table-row; }
.audit-detail-cell { padding:10px 14px 14px 14px !important; background:rgba(0,212,255,0.03) !important; border-bottom:1px solid var(--border) !important; }
.audit-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.audit-detail-block { background:var(--bg); border:1px solid var(--border); border-radius:3px; padding:9px 11px; }
.audit-detail-label { font-family:'Orbitron'; font-size:10px; letter-spacing:1.5px; color:var(--white); text-transform:uppercase; margin-bottom:5px; }
.audit-detail-text  { color:var(--text); font-size:13px; line-height:1.55; }
.audit-detail-code  { font-family:'Share Tech Mono'; font-size:12px; color:var(--green); line-height:1.5; white-space:pre-wrap; word-break:break-all; }
.audit-expand-btn { background:none; border:none; color:var(--text3); cursor:pointer; font-size:13px; padding:2px 5px; transition:transform 0.2s, color 0.2s; }
.audit-expand-btn:hover { color:var(--accent); }
.audit-expand-btn.open { transform:rotate(90deg); color:var(--accent); }

/* ── BULK SELECT ── */
.bulk-cb {
  width: 15px; height: 15px; cursor: pointer;
  accent-color: var(--accent);
  vertical-align: middle;
}
.audit-main-row.bulk-selected td { background: var(--accent-a07) !important; }
.audit-main-row.bulk-selected td:first-child { border-left: 3px solid var(--accent) !important; }

/* Bulk action bar */
#bulk-bar {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(0,212,255,0.08), var(--accent-a04));
  border: 1px solid rgba(0,212,255,0.25);
  border-radius: 4px;
  margin-bottom: 8px;
  animation: tabFadeIn 0.15s ease;
}
#bulk-bar.show { display: flex; }
#bulk-bar-count {
  font-family: 'Share Tech Mono'; font-size: 14px;
  color: var(--accent); font-weight: 700; flex-shrink: 0;
}
#bulk-bar-label { font-size: 13px; color: var(--text2); flex: 1; }
.btn-bulk-approve {
  background: rgba(0,255,136,0.15); border: 1px solid var(--green);
  color: var(--green); font-size: 13px; letter-spacing: 0.5px;
}
.btn-bulk-approve:hover { background: rgba(0,255,136,0.28); }
.btn-bulk-reject {
  background: rgba(255,51,85,0.15); border: 1px solid var(--red);
  color: var(--red); font-size: 13px; letter-spacing: 0.5px;
}
.btn-bulk-reject:hover { background: rgba(255,51,85,0.28); }
.btn-bulk-clear {
  background: transparent; border: 1px solid var(--border2);
  color: var(--text2); font-size: 12px;
}
.btn-bulk-clear:hover { border-color: var(--accent); color: var(--accent); }

/* Sessioni agenti */
.session-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:4px; padding:10px 12px; margin-bottom:8px;
}
.session-card:last-child { margin-bottom:0; }
.session-header { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.session-fingerprint { font-family:'Share Tech Mono'; font-size:13px; color:var(--white); font-weight:700; }
.session-status-badge { display:inline-block; padding:2px 7px; border-radius:2px; font-size:11px; font-weight:700; font-family:'Share Tech Mono'; }
.ssb-OK       { background:var(--green-a18); color:#55ffaa; border:1px solid rgba(0,255,136,0.4); }
.ssb-CRITICAL { background:rgba(255,51,85,0.25); color:#ff8099; border:1px solid rgba(255,51,85,0.5); }
.ssb-WARNING  { background:rgba(255,149,0,0.22); color:#ffbb55; border:1px solid rgba(255,149,0,0.5); }
.ssb-INFO     { background:var(--accent-a15); color:#66e5ff; border:1px solid rgba(0,212,255,0.4); }
.ssb-FAILED   { background:rgba(64,64,64,0.3);   color:#888;    border:1px solid #555; }
.session-meta { display:flex; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--text2); margin-bottom:4px; }
.session-meta span { font-family:'Share Tech Mono'; }
.session-zones { display:flex; gap:6px; flex-wrap:wrap; }
.session-zone-tag {
  display:inline-block; padding:2px 6px; border-radius:2px;
  font-size:11px; font-family:'Share Tech Mono';
  background:rgba(0,212,255,0.08); color:var(--accent2);
  border:1px solid var(--accent-a20);
}
/* ── CHART RANGE BUTTONS ─────────────────────────────── */
.crb {
  padding: 5px 11px; border-radius: 3px; cursor: pointer;
  font-family: 'Share Tech Mono'; font-weight: 700; font-size: 12px;
  letter-spacing: 1px; transition: all 0.15s;
  background: rgba(26,37,64,0.5);
  border: 1px solid rgba(64,80,112,0.6);
  color: #90aac8;
  min-width: 36px; text-align: center;
}
.crb:hover { border-color: #00d4ff; color: #00d4ff; background: rgba(0,212,255,0.08); }
.crb.active {
  background: rgba(0,212,255,0.18);
  border: 1.5px solid #00d4ff;
  color: #00d4ff;
  box-shadow: 0 0 10px rgba(0,212,255,0.35), inset 0 0 6px var(--accent-a10);
  text-shadow: 0 0 8px rgba(0,212,255,0.6);
}
.crb.live-btn { color: #00cc6a; border-color: rgba(0,255,136,0.35); background: rgba(0,255,136,0.06); }
.crb.live-btn:hover { border-color: #00ff88; color: #00ff88; background: rgba(0,255,136,0.12); }
.crb.live-btn.active {
  background: var(--green-a20);
  border: 1.5px solid #00ff88;
  color: #00ff88;
  box-shadow: 0 0 10px rgba(0,255,136,0.4), inset 0 0 6px rgba(0,255,136,0.12);
  text-shadow: 0 0 8px rgba(0,255,136,0.7);
}
.crb-group { display:flex; align-items:center; gap:3px; }
.crb-label {
  font-size: 10px; color: #7090b0; font-family:'Share Tech Mono';
  letter-spacing: 1.5px; padding: 0 4px;
  border-right: 1px solid rgba(64,80,112,0.4); margin-right: 2px;
}

/* ── GLOBAL SEARCH ── */
#global-search-wrap {
  position:relative; display:flex; align-items:center;
}
#global-search {
  background: rgba(0,212,255,0.05);
  border: 1px solid rgba(0,212,255,0.18);
  border-radius: 3px;
  color: var(--text);
  font-family: 'Rajdhani';
  font-size: 12px;
  padding: 3px 8px 3px 22px;
  width: 90px;
  outline: none;
  transition: all 0.2s;
}
#global-search:focus {
  border-color: var(--accent);
  background: rgba(0,212,255,0.08);
  width: 160px;
  box-shadow: 0 0 8px var(--accent-a12);
}
#global-search::placeholder { color: var(--text3); }
#global-search-icon {
  position:absolute; left:6px; font-size:11px; color:var(--text3); pointer-events:none;
}
#search-results-panel {
  display:none;
  position:fixed; top:82px; right:16px; z-index:2000;
  background:#0a0f1e; border:1px solid var(--border2);
  border-radius:6px; width:420px; max-height:70vh; overflow-y:auto;
  box-shadow:0 8px 40px rgba(0,0,0,0.7), 0 0 20px rgba(0,212,255,0.08);
}
#search-results-panel.open { display:block; }
.sr-header {
  padding:10px 14px; border-bottom:1px solid var(--border);
  font-family:Orbitron; font-size:10px; letter-spacing:2px;
  color:var(--text2); display:flex; justify-content:space-between; align-items:center;
}
.sr-group { padding:6px 0; border-bottom:1px solid rgba(26,37,64,0.5); }
.sr-group:last-child { border-bottom:none; }
.sr-group-title {
  padding:4px 14px; font-size:10px; color:var(--text2);
  font-family:Share Tech Mono; letter-spacing:1.5px; text-transform:uppercase;
}
.sr-item {
  padding:7px 14px; display:flex; align-items:center; gap:10px;
  cursor:pointer; transition:background 0.1s;
}
.sr-item:hover { background:rgba(0,212,255,0.06); }
.sr-sym { font-family:Share Tech Mono; font-size:14px; font-weight:700; color:var(--accent); min-width:90px; }
.sr-tag { font-size:10px; padding:1px 6px; border-radius:2px; font-family:Share Tech Mono; font-weight:700; }
.sr-tag-trade   { background:rgba(0,255,136,0.15); color:#55ffaa; border:1px solid rgba(0,255,136,0.3); }
.sr-tag-watch   { background:var(--accent-a12); color:#66e5ff; border:1px solid var(--accent-a30); }
.sr-tag-deleted { background:rgba(255,51,85,0.12);  color:#ff8099; border:1px solid rgba(255,51,85,0.3); }
.sr-tag-audit   { background:rgba(155,89,255,0.15); color:#c49aff; border:1px solid rgba(155,89,255,0.35); }
.sr-desc { font-size:12px; color:var(--text2); font-family:Rajdhani; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; }
.sr-empty { padding:20px; text-align:center; color:var(--text3); font-family:Share Tech Mono; font-size:12px; }


/* ===========================================
   FIX MOBILE: AI AUDIT + AGENTI
=========================================== */
@media(max-width:600px) {
  .tab-panel { overflow-x:clip !important; }
  #audit-kpis { grid-template-columns:repeat(2,1fr) !important; gap:6px !important; margin-bottom:8px !important; }
  #audit-next-bar { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ank-track { min-width:300px; }
  #agents-list { overflow-x:auto; -webkit-overflow-scrolling:touch; display:block; }
  #agents-list .data-table { min-width:480px; }
  .session-card { word-break:break-word; }
  .session-meta { flex-wrap:wrap; gap:4px; }
  .session-fingerprint { font-size:11px; }
  #zona-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:2px; }
  #zona-tabs::-webkit-scrollbar { display:none; }
}
@media(max-width:380px) {
  #agents-list .data-table { min-width:320px; font-size:11px; }
  #agents-list .data-table th, #agents-list .data-table td { padding:3px 4px; font-size:10px; white-space:nowrap; }
  .kpi-card .kpi-sub { display:none; }
}


/* ===========================================
   FIX MOBILE: AI AUDIT + AGENTI
=========================================== */
@media(max-width:600px) {
  .tab-panel { overflow-x:clip !important; }
  #audit-kpis { grid-template-columns:repeat(2,1fr) !important; gap:6px !important; margin-bottom:8px !important; }
  #audit-next-bar { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .ank-track { min-width:300px; }
  #agents-list { overflow-x:auto; -webkit-overflow-scrolling:touch; display:block; }
  #agents-list .data-table { min-width:480px; }
  .session-card { word-break:break-word; }
  .session-meta { flex-wrap:wrap; gap:4px; }
  .session-fingerprint { font-size:11px; }
  #zona-tabs { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; scrollbar-width:none; padding-bottom:2px; }
  #zona-tabs::-webkit-scrollbar { display:none; }
}
@media(max-width:380px) {
  #agents-list .data-table { min-width:320px; font-size:11px; }
  #agents-list .data-table th, #agents-list .data-table td { padding:3px 4px; font-size:10px; white-space:nowrap; }
  .kpi-card .kpi-sub { display:none; }
}


/* FIX MOBILE LAYOUT: body locked */
@media (max-width: 768px) {
  html { height: 100%; }
  body {
    height: 100% !important;
    min-height: unset !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  #header  { flex-shrink: 0; }
  #ticker  { flex-shrink: 0; }
  #tabs-wrap { flex-shrink: 0; position: relative !important; top: auto !important; }
  #content {
    flex: 1 1 0;
    overflow-y: auto !important;
    overflow-x: clip !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
  }
}

/* FIX LANDSCAPE BODY: dynamic island */

/* === LOGO BOLT MICRO-SHIMMER (added) === */
.logo {
  position: relative;
  animation: logo-shimmer 6s ease-in-out infinite;
}
@keyframes logo-shimmer {
  0%, 88%, 100% { filter: brightness(1); }
  92%, 96%      { filter: brightness(1.25); }
}
@media (prefers-reduced-motion: reduce) {
  .logo { animation: none; }
}

/* === KPI CARDS INNER GLOW (added) === */
.kpi-card.green { box-shadow: inset 0 0 32px -16px rgba(0,255,136,0.20); }
.kpi-card.red   { box-shadow: inset 0 0 32px -16px rgba(244,63,94,0.20); }
.kpi-card.blue  { box-shadow: inset 0 0 32px -16px rgba(0,212,255,0.15); }
.kpi-card.orange{ box-shadow: inset 0 0 32px -16px rgba(255,149,0,0.18); }
.kpi-card.green:hover  { box-shadow: inset 0 0 32px -10px rgba(0,255,136,0.30); }
.kpi-card.red:hover    { box-shadow: inset 0 0 32px -10px rgba(244,63,94,0.30); }
.kpi-card.blue:hover   { box-shadow: inset 0 0 32px -10px rgba(0,212,255,0.22); }
.kpi-card.orange:hover { box-shadow: inset 0 0 32px -10px rgba(255,149,0,0.28); }
.kpi-card { transition: box-shadow 0.3s ease; }

/* === H. CODE BLOCK SQL HIGHLIGHT (added) === */
.code-block, .audit-detail-code {
  position: relative;
}
.code-block::before, .audit-detail-code::before {
  content: '';
  position: absolute; top: 0; left: 0;
  width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--accent) 0%, var(--green) 100%);
  border-radius: 2px 0 0 2px;
}

/* === I. AUDIT CLOSED ROWS (added — visual cue for non-pending) === */
.audit-main-row[data-decision="YES"]:not(:hover) td,
.audit-main-row[data-decision="NO"]:not(:hover) td {
  opacity: 0.62;
}
.audit-main-row[data-decision="YES"]:not(:hover) td:first-child {
  border-left-color: rgba(0,255,136,0.25) !important;
}
.audit-main-row[data-decision="NO"]:not(:hover) td:first-child {
  border-left-color: rgba(244,63,94,0.20) !important;
}

/* === J. EMPTY STATE SUBTLE BREATH (added) === */
.no-data {
  animation: nodata-breath 4s ease-in-out infinite;
}
@keyframes nodata-breath {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
  .no-data { animation: none; opacity: 0.7; }
}

/* === K. LOGIN INPUT FOCUS GLOW (added) === */
#login-overlay input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 16px var(--accent-a30) !important;
  outline: none !important;
}
#login-overlay input { transition: border-color 0.2s, box-shadow 0.2s; }
#login-btn { transition: all 0.2s !important; }
#login-btn:hover {
  background: rgba(0,212,255,0.30) !important;
  box-shadow: 0 0 16px var(--accent-a45) !important;
  transform: translateY(-1px);
}
#login-btn:active { transform: translateY(0); }

/* === L. FILTER BUTTON PRESS FEEDBACK (added) === */
.filter-btn { transition: all 0.15s ease; }
.filter-btn:active { transform: scale(0.96); }
.btn { transition: all 0.15s ease; }
.btn:active { transform: scale(0.96); }

/* === M. KPI VALUE TABULAR + ALIVE (added) === */
.kpi-val, .hkpi-val { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.kpi-card .kpi-val { transition: color 0.4s ease, text-shadow 0.4s ease; }
.kpi-card:hover .kpi-val.pos { text-shadow: 0 0 12px rgba(0,255,136,0.45); }
.kpi-card:hover .kpi-val.neg { text-shadow: 0 0 12px rgba(244,63,94,0.45); }
.kpi-card:hover .kpi-val.blue { text-shadow: 0 0 12px var(--accent-a45); }

/* === O. STICKY TABLE HEADERS (added) === */
.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  /* keep the bg2 background opaque so rows scroll under it cleanly */
  background: var(--bg2);
  box-shadow: 0 1px 0 var(--border);
}

/* === P. MODAL ENTER ANIMATION (added) === */
@keyframes modal-enter {
  0%   { opacity: 0; transform: scale(0.95) translateY(8px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
#modal-overlay.open { animation: fade-in 0.18s ease; }
#modal-overlay.open > #modal { animation: modal-enter 0.22s cubic-bezier(0.16, 0.84, 0.30, 1); }
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #modal-overlay.open,
  #modal-overlay.open > #modal { animation: none; }
}

/* === Q. SYMBOL CELL HOVER (added) === */
.data-table tbody tr td .sym-cell {
  border-bottom: 1px dashed transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
  display: inline-flex; /* sym-cell is inline-flex already */
}
.data-table tbody tr:hover .sym-cell {
  border-bottom-color: var(--accent);
  color: var(--accent);
  cursor: pointer;
}

/* === R. INLINE MINI-BAR ON PnL CELLS (added) === */
/* For rows that set --pnl-pct (added by JS later) — purely additive */
.data-table td.pl-pos, .data-table td.pl-neg {
  position: relative;
}
.data-table td.pl-pos::after,
.data-table td.pl-neg::after {
  content: '';
  position: absolute;
  left: 8px; right: 8px; bottom: 1px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.35;
  transform: scaleX(var(--pnl-strength, 0.3));
  transform-origin: left;
}
.data-table tbody tr:hover td.pl-pos::after,
.data-table tbody tr:hover td.pl-neg::after { opacity: 0.7; }

/* === T. EQUITY SPARKLINE IN HEADER (added) === */
.hkpi-equity {
  display: flex; flex-direction: column;
  align-items: center; gap: 2px;
  padding: 0 8px;
  position: relative;
}
.hkpi-spark {
  width: 60px; height: 18px;
  margin-top: 1px;
  color: var(--green);
  filter: drop-shadow(0 0 4px currentColor);
}
@media(max-width:600px) {
  .hkpi-spark { display: none; }
}

/* === U. TICKER PAUSE ON HOVER (added) === */
#ticker:hover .ticker-inner { animation-play-state: paused; }

/* === V. AGENT ROW HOVER GLOW (added) === */
.agent-row { transition: background 0.2s ease, padding 0.2s ease; padding-left: 4px; padding-right: 4px; }
.agent-row:hover { background: var(--accent-a07); padding-left: 8px; padding-right: 8px; }
.agent-row:hover .agent-zona { color: var(--white); }
.agent-row:hover .agent-dot { transform: scale(1.3); }
.agent-dot { transition: transform 0.2s ease; }

/* === W. ZONE CARD click affordance (added) === */
.zone-card { cursor: pointer; transition: transform 0.15s ease, border-left-width 0.15s ease; }
.zone-card:hover { transform: translateX(2px); }
.zone-card:active { transform: translateX(2px) scale(0.99); }

/* === X. KPI card click pulse — focus accessibility (added) === */
.kpi-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: 0 0 20px var(--accent-a30);
}

/* === AC. STATUS DOT HOVER (added) === */
.status-dot { position: relative; cursor: help; }
.status-dot::after {
  content: 'backend OK · live';
  position: absolute;
  top: 18px; right: -8px;
  background: var(--bg2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--font-mono, 'Share Tech Mono');
  font-size: 11px;
  letter-spacing: 1px;
  padding: 4px 8px;
  border-radius: 3px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform: translateY(-4px);
  z-index: 10;
}
.status-dot:hover::after { opacity: 1; transform: translateY(0); }

/* === AD. AUDIT zone-tab count as progress chip (added) === */
.cat-tab .cat-count {
  background: var(--accent-a10);
  padding: 0 6px;
  border-radius: 999px;
  border: 1px solid var(--accent-a30);
}
.cat-tab.active .cat-count {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* === AE. NEW TRADE row highlight (added) === */
@keyframes trade-row-new {
  0%   { background: rgba(0,255,136,0.18); }
  100% { background: transparent; }
}
.data-table tbody tr.new-row td { animation: trade-row-new 4s ease-out; }

/* === AF. KEYBOARD `/` HINT on search box (added) === */
.search-box {
  background-image: linear-gradient(90deg, transparent, transparent calc(100% - 28px), var(--bg) calc(100% - 28px), var(--bg) 100%);
  padding-right: 30px;
  position: relative;
}
.search-box ~ .search-key-hint,
.search-box-wrap::after {
  content: '/';
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono, 'Share Tech Mono');
  font-size: 10px;
  color: var(--text3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 2px;
  padding: 1px 4px;
  pointer-events: none;
}

/* === OPENCLAW TAB REDESIGN === */
#tab-audit #audit-kpis { grid-template-columns: repeat(4, 1fr) !important; }
#tab-audit #audit-kpis .kpi-card { transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; }
#tab-audit #audit-kpis .kpi-card:hover { transform: translateY(-2px); }
#tab-audit #audit-kpis .kpi-card.red:hover { box-shadow: inset 0 0 32px -10px rgba(244,63,94,0.35), 0 8px 24px -8px rgba(244,63,94,0.25); }
#tab-audit #audit-kpis .kpi-card.orange:hover { box-shadow: inset 0 0 32px -10px rgba(255,149,0,0.35), 0 8px 24px -8px rgba(255,149,0,0.25); }
#tab-audit #audit-kpis .kpi-card.blue:hover { box-shadow: inset 0 0 32px -10px rgba(0,212,255,0.30), 0 8px 24px -8px rgba(0,212,255,0.25); }
#tab-audit #audit-kpis .kpi-card.green:hover { box-shadow: inset 0 0 32px -10px rgba(0,255,136,0.35), 0 8px 24px -8px rgba(0,255,136,0.25); }
/* APRI OPENCLAW button polish */
#tab-audit a[href*="agent-ab-analysis"] button { transition: all 0.2s ease; }
#tab-audit a[href*="agent-ab-analysis"] button:hover {
  background: rgba(0,212,255,0.30) !important;
  box-shadow: 0 0 20px rgba(0,212,255,0.45);
  transform: translateY(-1px);
}
#tab-audit a[href*="agent-ab-analysis"] button:active { transform: translateY(0); }
/* OpenClaw section header */
#tab-audit > div:first-child > div:first-child {
  font-size: 14px !important;
  display: flex; align-items: center; gap: 8px;
}
#tab-audit > div:first-child > div:first-child span:first-child {
  animation: openclaw-blink 3s ease-in-out infinite;
}
@keyframes openclaw-blink {
  0%, 90%, 100% { opacity: 1; transform: scale(1); }
  92%, 96%      { opacity: 0.7; transform: scale(1.12); }
}
/* Empty state for OpenClaw tab when no data */
#audit-tbody:empty::before {
  content: "🤖 Nessuna anomalia rilevata · l'agente sta monitorando ogni 30 min";
  display: block;
  padding: 40px 20px;
  text-align: center;
  color: var(--text3);
  font-family: 'Share Tech Mono';
  font-size: 13px;
  letter-spacing: 1px;
}

/* === OPENCLAW AGENT TRACKS — design polish === */
/* Gradient progress bar in basso alle 3 righe AnkTrack */
.ank-track { position: relative; transition: background 0.2s ease; }
.ank-track:hover { background: rgba(0,212,255,0.03); }
.ank-track::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  height: 3px; width: var(--ank-progress, 0%);
  background: linear-gradient(90deg, var(--accent2), var(--accent), var(--green));
  background-size: 200% 100%;
  box-shadow: 0 0 8px rgba(0,212,255,0.4);
  animation: shimmer 1.5s linear infinite;
  transition: width 1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .ank-track::after { animation: none; }
}
/* Avatar/dot animato accanto al nome agente */
.ank-track-label > div:first-child {
  position: relative; padding-left: 14px;
}
.ank-track-label > div:first-child::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 6px var(--green);
  transform: translateY(-50%);
  animation: agent-heartbeat 2s ease-in-out infinite;
}
@keyframes agent-heartbeat {
  0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.6; transform: translateY(-50%) scale(1.3); }
}
/* Status colorato: dot rosso se CRITICO */
.ank-track[data-status="CRITICO"] .ank-track-label > div:first-child::before {
  background: var(--red); box-shadow: 0 0 8px var(--red);
}
.ank-track[data-status="WARNING"] .ank-track-label > div:first-child::before {
  background: var(--orange); box-shadow: 0 0 8px var(--orange);
}
/* Mobile stack */
@media (max-width: 600px) {
  .ank-track { grid-template-columns: 1fr; }
  .ank-block { padding: 4px 8px; }
  .ank-track-label { padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* === OPENCLAW TABLE: nascondi colonne ora obsolete (decisione/exec/azioni) === */


/* Hide "Nessun dato agenti" banner when agents present */
#agents-list:has(.ank-track) ~ .no-agents-banner,
.no-agents-banner {

/* Hide duplicate KPIs by class signatures */
#tab-audit .kpi-card:has(.kpi-label:contains("Ultimo Run")),
#tab-audit .kpi-card:has(.kpi-label:contains("Critici Aperti")),
#tab-audit .kpi-card:has(.kpi-label:contains("Warning Aperti")),
#tab-audit .kpi-card:has(.kpi-label:contains("Prossimo Run")) { display: none !important; }
/* Hide Fix-type column, Decision column. Keep "Stato Exec" with mapped badges */

/* Show Stato Exec column (12) with 3-state badges via CSS content */

.es-DONE::before { content: 'EXECUTED'; }
.es-WAITING::before { content: 'PENDING'; }
.es-RESOLVED::before, .es-AUTO_RESOLVED::before { content: 'INFO'; }
.es-DONE { background: rgba(0,255,136,0.18); color: #55ffaa; border: 1px solid rgba(0,255,136,0.4); }
.es-WAITING { background: rgba(255,149,0,0.18); color: #ffbb55; border: 1px solid rgba(255,149,0,0.4); }
.es-RESOLVED, .es-AUTO_RESOLVED { background: rgba(0,212,255,0.15); color: #66e5ff; border: 1px solid rgba(0,212,255,0.4); }
/* Hide original text in badge so ::before takes over */
#audit-table .es { font-size: 0; }
#audit-table .es::before { font-size: 11px; }

/* === OPENCLAW TABLE: STATO column visible + 3 badges === */

/* Show only Severity/Zona/Nodo/Problema + Stato (12) */

/* Stato Exec column: replace text */
.es-DONE, .es-WAITING, .es-RESOLVED, .es-AUTO_RESOLVED, .es-TEST_OK { font-size: 0 !important; padding: 3px 8px !important; border-radius: 2px; font-family: 'Share Tech Mono'; border: 1px solid; display: inline-block; }
.es-DONE::before, .es-TEST_OK::before { content: 'EXECUTED'; font-size: 11px; }
.es-WAITING::before { content: 'PENDING'; font-size: 11px; }
.es-RESOLVED::before, .es-AUTO_RESOLVED::before { content: 'INFO'; font-size: 11px; }
.es-DONE, .es-TEST_OK { background: rgba(0,255,136,0.18); color: #55ffaa; border-color: rgba(0,255,136,0.4); }
.es-WAITING { background: rgba(255,149,0,0.18); color: #ffbb55; border-color: rgba(255,149,0,0.4); }
.es-RESOLVED, .es-AUTO_RESOLVED { background: rgba(0,212,255,0.15); color: #66e5ff; border-color: rgba(0,212,255,0.4); }