/* Terminal Green Theme */
:root{
  --bg:#0b0e10;
  --surface:#101417;
  --card:#0f1412;
  --text:#d7ffd9;
  --muted:#9cd6a6;
  --primary:#28ff6a;
  --primary-2:#1ddf57;
  --accent:#39ff14;
  --accent-2:#00ffd5;
  --accent-3:#a4ff4f;
  --border:#1a2e1d;
  --primary-soft:rgba(40,255,106,0.08);
  --primary-soft-2:rgba(40,255,106,0.06);
  --primary-focus:rgba(40,255,106,0.35);
  --card-glow-1:rgba(29,255,106,0.04);
  --card-glow-2:rgba(29,255,106,0.02);
  --shadow:rgba(40,255,106,0.08);
  --nav-bg:rgba(11,14,16,0.75);
}

:root[data-theme="cyberphunk"]{
  --bg:#050914;
  --surface:#0b1021;
  --card:#0a0f1c;
  --text:#e6f0ff;
  --muted:#9db2ff;
  --primary:#00f0ff;
  --primary-2:#b06bff;
  --accent:#00f0ff;
  --accent-2:#b06bff;
  --accent-3:#6fe6ff;
  --border:#152049;
  --primary-soft:rgba(0,240,255,0.08);
  --primary-soft-2:rgba(0,240,255,0.06);
  --primary-focus:rgba(0,240,255,0.35);
  --card-glow-1:rgba(0,240,255,0.04);
  --card-glow-2:rgba(0,240,255,0.02);
  --shadow:rgba(0,240,255,0.12);
  --nav-bg:rgba(5,9,20,0.78);
}

:root[data-theme="deus-ex"]{
  --bg:#000000;
  --surface:#0b0b0b;
  --card:#0a0a0a;
  --text:#f3e8c8;
  --muted:#c8b47a;
  --primary:#ffbf3c;
  --primary-2:#ff8f1f;
  --accent:#ffbf3c;
  --accent-2:#ff8f1f;
  --accent-3:#ffe08a;
  --border:#33250b;
  --primary-soft:rgba(255,191,60,0.08);
  --primary-soft-2:rgba(255,191,60,0.06);
  --primary-focus:rgba(255,191,60,0.35);
  --card-glow-1:rgba(255,191,60,0.04);
  --card-glow-2:rgba(255,191,60,0.02);
  --shadow:rgba(255,191,60,0.12);
  --nav-bg:rgba(0,0,0,0.82);
}

:root[data-theme="hackers"]{
  --bg:#05070b;
  --surface:#0b1016;
  --card:#0a0f14;
  --text:#d8ffe5;
  --muted:#7de8c1;
  --primary:#39ff14;
  --primary-2:#ff4fd8;
  --accent:#39ff14;
  --accent-2:#00f0ff;
  --accent-3:#ff4fd8;
  --border:#1b2d27;
  --primary-soft:rgba(57,255,20,0.08);
  --primary-soft-2:rgba(57,255,20,0.06);
  --primary-focus:rgba(57,255,20,0.35);
  --card-glow-1:rgba(57,255,20,0.04);
  --card-glow-2:rgba(57,255,20,0.02);
  --shadow:rgba(57,255,20,0.12);
  --nav-bg:rgba(5,7,11,0.78);
}

:root[data-theme="black-mesa"]{
  --bg:#0c0c0c;
  --surface:#14110d;
  --card:#17120d;
  --text:#f5e6d0;
  --muted:#c8a984;
  --primary:#ff8c1a;
  --primary-2:#ffb85c;
  --accent:#ff8c1a;
  --accent-2:#ffb85c;
  --accent-3:#ffd28a;
  --border:#3b2a18;
  --primary-soft:rgba(255,140,26,0.08);
  --primary-soft-2:rgba(255,140,26,0.06);
  --primary-focus:rgba(255,140,26,0.35);
  --card-glow-1:rgba(255,140,26,0.04);
  --card-glow-2:rgba(255,140,26,0.02);
  --shadow:rgba(255,140,26,0.12);
  --nav-bg:rgba(12,12,12,0.8);
}

:root[data-theme="syndicate"]{
  --bg:#0a0f12;
  --surface:#0f1519;
  --card:#11181c;
  --text:#e7f3f7;
  --muted:#9db4be;
  --primary:#7bdcff;
  --primary-2:#2da6ff;
  --accent:#7bdcff;
  --accent-2:#2da6ff;
  --accent-3:#b6f1ff;
  --border:#20313a;
  --primary-soft:rgba(123,220,255,0.08);
  --primary-soft-2:rgba(123,220,255,0.06);
  --primary-focus:rgba(123,220,255,0.35);
  --card-glow-1:rgba(123,220,255,0.04);
  --card-glow-2:rgba(123,220,255,0.02);
  --shadow:rgba(123,220,255,0.12);
  --nav-bg:rgba(10,15,18,0.8);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  line-height:1.45;
}

/* Nav */
.nav{position:sticky; top:0; z-index:10; backdrop-filter:saturate(110%) blur(6px); background:var(--nav-bg); border-bottom:1px solid var(--border)}
.nav-inner{max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; gap:12px; flex-wrap:wrap}
.brand{color:var(--primary); font-weight:700}
.nav-links a{color:var(--muted); text-decoration:none; margin-left:14px; padding:4px 8px; border-radius:6px; transition:color .15s, background .15s}
.nav-links a:hover{color:var(--text); background:var(--primary-soft-2)}
.nav-links a.active{color:var(--bg); background:var(--primary)}

/* Site Nav (Overview style) */
.site-nav{background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:1rem 1.3rem; box-shadow:0 28px 60px rgba(0,0,0,0.55); margin-bottom:1.6rem; backdrop-filter:blur(18px)}
.site-nav__inner{display:flex; align-items:center; justify-content:space-between; gap:1.2rem; flex-wrap:wrap; max-width:1200px; margin:0 auto}
.site-brand{display:inline-flex; align-items:center; gap:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:.78rem; color:var(--text); text-decoration:none}
.site-brand__mark{width:20px; height:20px; border-radius:6px; background:url("TPLogo-removebg-preview.png") center/contain no-repeat; box-shadow:0 0 8px var(--primary-soft), 0 0 12px rgba(0,0,0,0.3)}
.site-menu{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center}
.site-menu a{color:var(--text); text-decoration:none; font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600}
.site-menu a.active, .site-menu a:hover{color:var(--accent)}

.theme-switcher{display:flex; align-items:center; gap:8px; color:var(--muted)}
.theme-switcher label{font-size:11px; letter-spacing:0.08em; text-transform:uppercase}
.theme-switcher select.kbd{min-height:30px; font-size:12px; padding:6px 28px 6px 10px}

/* Layout */
.main{max-width:1200px; margin:0 auto; padding:18px 16px}
.footer{max-width:1200px; margin:0 auto; padding:16px; color:var(--muted); border-top:1px solid var(--border); text-align:center}
.hr{border:0; border-top:1px solid var(--border); margin:12px 0}

/* Cards */
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px}
.card{background:linear-gradient(180deg, var(--card-glow-1), var(--card-glow-2)), var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:0 6px 20px var(--shadow)}
.card-header{display:flex; align-items:center; justify-content:flex-start; padding:10px 12px; border-bottom:1px solid var(--border)}
.card-title{font-weight:700; color:var(--primary)}
.card-body{padding:12px}

/* Tags & Controls */
.tag{display:inline-block; padding:2px 8px; border:1px solid var(--primary-2); color:var(--primary); border-radius:999px; font-size:12px; background:var(--primary-soft)}
.kbd{background:transparent; color:var(--text); border:1px solid var(--primary-2); border-radius:8px; padding:6px 10px; cursor:pointer; font:inherit}
.kbd:hover{background:var(--primary-soft)}
.kbd:focus{outline:none; box-shadow:0 0 0 2px var(--primary-focus)}
select.kbd, input.kbd{min-height:34px}
input.kbd::placeholder{color:var(--muted)}
input.kbd{background-color:var(--surface); color:var(--text)}
/* Improve select readability and caret visibility */
select.kbd{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background-color:var(--surface);
  color:var(--text);
  border:1px solid var(--primary-2);
  border-radius:8px;
  padding:8px 30px 8px 10px;
  font-size:14px;
  line-height:1.4;
  box-shadow:inset 0 1px 2px rgba(0,0,0,0.35);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--primary) 50%),
    linear-gradient(135deg, var(--primary) 50%, transparent 50%),
    linear-gradient(to right, var(--primary) 0%, var(--primary) 100%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px),
    calc(100% - 2.3em) 50%;
  background-size:5px 5px, 5px 5px, 1px 1.6em;
  background-repeat:no-repeat;
}
select.kbd:hover{border-color:var(--primary)}
select.kbd:focus{box-shadow:0 0 0 2px var(--primary-focus)}
select.kbd option{background-color:var(--surface); color:var(--text)}

/* Tables */
.table{width:100%; border-collapse:collapse; font-size:14px}
.table th, .table td{border:1px solid var(--border); padding:6px 8px; text-align:left}
.table th{background:var(--primary-soft-2); color:var(--primary)}
.table tr:nth-child(even){background:rgba(255,255,255,0.02)}
.table tr:hover{background:var(--primary-soft-2)}

/* Links */
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Follow link */
.footer-links{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; justify-content:center}
.follow-link{display:inline-flex; align-items:center; gap:6px}
.follow-link a{display:inline-flex; align-items:center; gap:4px; color:var(--text); text-decoration:none; border:1px solid var(--border); padding:2px 6px; border-radius:999px; font-size:12px}
.follow-link a:hover{color:var(--primary); border-color:var(--primary)}
.follow-link .x-icon{width:12px; height:12px; fill:currentColor}
.follow-link .social-icon{width:12px; height:12px; fill:currentColor}

/* Plotly overrides */
.js-plotly-plot .plotly .main-svg{border-radius:8px}

/* Utilities */
.small{font-size:12px; color:var(--muted)}
.hidden{display:none}

/* Campaign graph */
.graph-shell{
  position:relative;
  min-height:520px;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(0,240,255,0.12), transparent 45%),
    radial-gradient(circle at 85% 30%, rgba(176,107,255,0.12), transparent 50%),
    radial-gradient(circle at 40% 85%, rgba(57,255,20,0.12), transparent 48%),
    var(--surface);
}
.graph-svg{width:100%; height:560px; display:block}
.graph-links line{stroke:rgba(0,240,255,0.28); stroke-width:1}
.graph-nodes .graph-node{stroke:rgba(255,255,255,0.25); stroke-width:1; cursor:grab}
.graph-nodes .graph-node:active{cursor:grabbing}
.graph-node--campaign{fill:#00f0ff}
.graph-node--group{fill:#b06bff}
.graph-node--software{fill:#39ff14}
.graph-node--tactic{fill:#6fe6ff}
.graph-node--technique{fill:#ff4fd8}
.graph-label{
  fill:var(--text);
  font-size:12px;
  letter-spacing:0.02em;
  paint-order:stroke;
  stroke:rgba(5,7,12,0.65);
  stroke-width:3;
}
.graph-legend{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.graph-key{display:inline-flex; align-items:center; gap:6px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:0.08em}
.graph-dot{width:10px; height:10px; border-radius:50%; box-shadow:0 0 10px currentColor}
.graph-dot--campaign{color:#00f0ff}
.graph-dot--group{color:#b06bff}
.graph-dot--software{color:#39ff14}
.graph-dot--tactic{color:#6fe6ff}
.graph-dot--technique{color:#ff4fd8}
.graph-tooltip{
  position:absolute;
  top:0;
  left:0;
  min-width:180px;
  max-width:260px;
  background:rgba(5,10,20,0.92);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text);
  font-size:12px;
  line-height:1.35;
  box-shadow:0 12px 30px rgba(0,0,0,0.45);
  pointer-events:none;
}
.graph-tip-title{font-weight:700; color:var(--accent)}
.graph-tip-line{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:0.08em; margin-top:4px}
.graph-tip-desc{color:var(--text); margin-top:6px}
.graph-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.18em;
  background:linear-gradient(180deg, rgba(5,7,12,0.4), rgba(5,7,12,0.9));
  z-index:2;
}