:root {
  --ink: #17283a;
  --muted: #6b7a8a;
  --line: #dfe7ee;
  --paper: #f4f7fa;
  --card: #ffffff;
  --navy: #173f5f;
  --blue: #3478aa;
  --violet: #7058a6;
  --green: #2f8a62;
  --coral: #e7795f;
  --yellow: #e9ad45;
  --shadow: 0 12px 34px rgba(30, 55, 75, 0.09);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Space Grotesk", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: #246b9b; }
.eyebrow { margin: 0 0 4px; color: var(--violet); font-size: .72rem; font-weight: 700; letter-spacing: .14em; }
.app-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px clamp(20px, 4vw, 64px); background: #fff; border-bottom: 1px solid var(--line); }
.app-header h1 { margin: 0; font-size: clamp(1.4rem, 2.5vw, 2.15rem); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.user-chip { padding: 9px 13px; border-radius: 999px; background: #edf4f8; color: var(--navy); font-size: .82rem; font-weight: 600; }
.main-tabs { display: flex; gap: 8px; padding: 12px clamp(20px, 4vw, 64px) 0; overflow-x: auto; background: #fff; }
.tab-button { white-space: nowrap; border: 1px solid transparent; border-radius: 11px 11px 0 0; padding: 12px 16px; background: transparent; color: var(--muted); font-weight: 600; }
.tab-button span { display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin-left: 5px; border-radius: 999px; background: #e9eef3; }
.tab-button.is-active { color: var(--navy); border-color: var(--line); border-bottom-color: #fff; background: #fff; box-shadow: 0 -5px 14px rgba(20,50,75,.05); }
.app-main { max-width: 1540px; margin: 0 auto; padding: 28px clamp(18px, 4vw, 58px) 60px; }
.tab-panel[hidden] { display: none; }
.flash { max-width: 900px; margin: 0 auto 20px; padding: 12px 16px; border-radius: 10px; background: #e8f5ed; color: #1c6845; }
.flash.error { background: #ffe9e8; color: #9c2e2c; }.flash.warning { background: #fff3d7; color: #875b12; }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.metric-card { position: relative; overflow: hidden; min-height: 145px; padding: 21px; border-radius: 16px; color: #fff; box-shadow: var(--shadow); }
.metric-card::after { content: ""; position: absolute; width: 110px; height: 110px; right: -25px; bottom: -45px; border-radius: 50%; background: rgba(255,255,255,.13); }
.metric-card span, .metric-card small { display: block; }.metric-card strong { display: block; margin: 12px 0 4px; font-size: 2.5rem; }.metric-card.coral { background: linear-gradient(135deg, #de6b55, #ef9474); }.metric-card.blue { background: linear-gradient(135deg, #226994, #4c98c4); }.metric-card.green { background: linear-gradient(135deg, #257653, #48a77a); }.metric-card.violet { background: linear-gradient(135deg, #5b478e, #8b75bc); }
.two-column { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, .8fr); gap: 20px; }
.panel-card { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--card); box-shadow: var(--shadow); }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 16px; }.panel-heading h2, .panel-heading h3 { margin: 0; }.page-heading { margin-bottom: 20px; }
.text-button { border: 0; background: transparent; color: var(--blue); font-weight: 700; }
.signal-list { display: grid; gap: 12px; }.full-list { gap: 16px; }.signal-card { border: 1px solid var(--line); border-radius: 13px; padding: 16px; background: #fff; }.signal-card h3 { margin: 10px 0 6px; font-size: 1rem; }.signal-card p { margin: 0; color: #556779; line-height: 1.5; }.signal-card.detailed { padding: 22px; }.signal-card.detailed h3 { font-size: 1.15rem; }
.source-pill, .status-pill, .crm-pill, .level, .run-status { display: inline-flex; padding: 4px 8px; margin-right: 6px; border-radius: 999px; background: #edf3f7; color: #496477; font-size: .7rem; font-weight: 700; text-transform: uppercase; }.status-pill.new { background: #fff0dc; color: #9a5f14; }.status-pill.review, .status-pill.pending { background: #e8f1fa; color: #2c6995; }.status-pill.watch { background: #eee9fa; color: #654b9e; }.status-pill.approved_for_crm, .status-pill.validated, .crm-pill { background: #e4f5eb; color: #25734d; }.status-pill.rejected { background: #fde8e8; color: #a33c3b; }
.signal-meta, .signal-topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: var(--muted); font-size: .8rem; }.score { font-size: 1.1rem; color: var(--green); }
.evidence-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }.evidence-grid div { padding: 11px; border-radius: 9px; background: #f4f7f9; }.evidence-grid span, .evidence-grid strong { display: block; }.evidence-grid span { margin-bottom: 4px; color: var(--muted); font-size: .7rem; text-transform: uppercase; }.evidence-grid strong { font-size: .84rem; }
blockquote { margin: 14px 0; padding: 12px 16px; border-left: 4px solid #9c89c8; background: #f6f3fb; color: #4f4664; }
.action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }.action-row form { margin: 0; }
.primary-button, .ghost-button, .soft-button { border-radius: 9px; padding: 10px 14px; font-weight: 700; }.primary-button { border: 1px solid #245f87; background: linear-gradient(135deg, #245f87, #347fab); color: #fff; }.primary-button.small { padding: 8px 12px; }.ghost-button { border: 1px solid var(--line); background: #fff; color: var(--ink); }.soft-button { border: 1px solid #cad7e1; background: #f5f8fa; color: #365269; }.soft-button.blue { border-color: #a9c6dd; background: #edf6fc; color: #28658f; }.soft-button.danger { border-color: #e6b8b7; background: #fff0ef; color: #9e3c39; }
.health-list { margin: 18px 0; }.health-list div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }.health-list dt { color: var(--muted); }.health-list dd { margin: 0; font-weight: 700; }.health-list dd.ok { color: var(--green); }.health-list dd.waiting { color: #a36a18; }.agent-run-form button { width: 100%; }.fine-print { color: var(--muted); font-size: .75rem; line-height: 1.45; }
.report-list { display: grid; gap: 18px; }.report-card pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 500 14px/1.7 "Space Grotesk", sans-serif; color: var(--muted); margin: 18px 0 0; }
.manual-entry { margin-bottom: 18px; }.manual-entry summary { cursor: pointer; font-weight: 700; }.manual-entry[open] summary { margin-bottom: 18px; }.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }.form-grid .wide { grid-column: 1 / -1; }
label { display: grid; gap: 6px; color: #3f5669; font-size: .8rem; font-weight: 600; }input, select, textarea { width: 100%; border: 1px solid #cdd9e2; border-radius: 8px; padding: 10px 11px; background: #fff; color: var(--ink); }textarea { resize: vertical; }
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }.filter-button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; background: #fff; color: var(--muted); }.filter-button.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.runs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 18px; }.run-card { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }.run-card strong, .run-card small { display: block; margin-top: 8px; }.run-card p { color: var(--muted); font-size: .82rem; }.run-status.completed { background: #e4f5eb; color: #25734d; }.run-status.failed { background: #fde8e8; color: #a33c3b; }
.table-scroll, .activity-log { overflow-x: auto; }.activity-log { max-height: 600px; overflow-y: auto; }table { width: 100%; border-collapse: collapse; font-size: .8rem; }th, td { padding: 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }th { position: sticky; top: 0; background: #edf3f7; color: #3b566a; }.level.error { background: #fde8e8; color: #a33c3b; }.level.warning { background: #fff0dc; color: #946017; }
.world-map-card { margin-bottom: 18px; padding: 16px; border-radius: 16px; background: #122b3e; box-shadow: var(--shadow); }.world-map { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; border-radius: 12px; background-color: #17384e; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 8.333% 16.666%; }.world-map::before { content: ""; position: absolute; inset: 12% 5%; opacity: .32; background: radial-gradient(ellipse at 17% 38%, #87a6af 0 10%, transparent 11%), radial-gradient(ellipse at 25% 65%, #87a6af 0 8%, transparent 9%), radial-gradient(ellipse at 48% 37%, #87a6af 0 7%, transparent 8%), radial-gradient(ellipse at 52% 61%, #87a6af 0 8%, transparent 9%), radial-gradient(ellipse at 70% 38%, #87a6af 0 18%, transparent 19%), radial-gradient(ellipse at 84% 72%, #87a6af 0 5%, transparent 6%); }.continent { position: absolute; color: rgba(255,255,255,.35); font-size: clamp(.45rem, 1vw, .72rem); letter-spacing: .15em; }.c-america { left: 13%; top: 45%; }.c-europe { left: 47%; top: 31%; }.c-africa { left: 49%; top: 59%; }.c-asia { left: 70%; top: 38%; }.c-oceania { left: 82%; top: 74%; }.map-marker { position: absolute; z-index: 2; width: 14px; height: 14px; transform: translate(-50%, -50%); border: 2px solid #fff; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(233,173,69,.22); }.map-marker.validated { background: #4ec88a; box-shadow: 0 0 0 5px rgba(78,200,138,.22); }.map-marker span { display: none; position: absolute; left: 14px; bottom: 12px; width: 220px; padding: 8px; border-radius: 7px; background: #fff; color: var(--ink); text-align: left; font-size: .7rem; box-shadow: var(--shadow); }.map-marker:hover span, .map-marker:focus span { display: block; }
.map-count { color: var(--muted); }.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.settings-card h3 { margin-top: 0; }.stack-form { display: grid; gap: 11px; }.mini-list { display: grid; gap: 7px; margin-top: 16px; }.mini-list > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px; border-radius: 8px; background: #f4f7f9; }.mini-list span { min-width: 0; }.mini-list strong, .mini-list small { display: block; }.mini-list small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; }.toggle { width: 38px; height: 21px; border: 0; border-radius: 999px; background: #bcc8d1; }.toggle::after { content: ""; display: block; width: 15px; height: 15px; margin: 3px; border-radius: 50%; background: #fff; transition: transform .2s; }.toggle.on { background: var(--green); }.toggle.on::after { transform: translateX(17px); }.model-panel, .secret-panel { margin-top: 18px; }.model-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }.model-card { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #f8fafb; }.model-card > small { color: var(--muted); }.checkbox { display: flex; align-items: center; gap: 6px; }.checkbox input { width: auto; }.key-state { font-size: .8rem; }.ok-dot, .off-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; background: var(--green); }.off-dot { background: var(--yellow); }.secret-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.secret-grid span { padding: 11px; border-radius: 8px; background: #f3f6f8; }.secret-grid strong { display: block; margin-top: 4px; }.warning-box { padding: 11px; border-radius: 8px; background: #fff3d7; color: #825a18; }
.empty-state { padding: 22px; border: 1px dashed #cdd8e1; border-radius: 10px; color: var(--muted); text-align: center; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 22px; background: radial-gradient(circle at 20% 20%, #d9ebf3, transparent 34%), radial-gradient(circle at 80% 75%, #e5def2, transparent 36%), #eef3f6; }.login-card { width: min(440px, 100%); padding: 38px; border: 1px solid rgba(255,255,255,.8); border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: 0 24px 70px rgba(25,53,72,.15); }.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 13px; background: linear-gradient(135deg, var(--blue), var(--violet)); color: #fff; font-size: 1.4rem; font-weight: 700; }.login-card h1 { margin: 5px 0 10px; }.login-intro { color: var(--muted); }
@media (max-width: 1050px) { .metric-grid, .model-grid { grid-template-columns: repeat(2, 1fr); }.two-column { grid-template-columns: 1fr; }.evidence-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .app-header { align-items: flex-start; }.header-actions { flex-direction: column; align-items: flex-end; }.metric-grid, .settings-grid, .form-grid, .secret-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }.model-grid { grid-template-columns: 1fr; }.main-tabs { padding-left: 12px; }.app-main { padding-inline: 12px; }.evidence-grid { grid-template-columns: 1fr; }.user-chip { display: none; } }