/* pwnsy Tools: shared modern layer. Loaded LAST on every tool page (after the
   page's own <style>), so these rules win over per-page defaults without
   !important. Goals: tighter vertical rhythm, crisper cards, one accent
   gradient, no redundant "live" badges. Light theme only. */

:root {
  --edge: #cfd8e3;
  --edge-strong: #b8c4d2;
  --glow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.05), 0 10px 28px -22px rgba(15,23,42,.35);
  --grad: linear-gradient(92deg, #059669 0%, #0d9488 55%, #0891b2 100%);
}

/* Page canvas: faint dot grid under the existing glow. */
body {
  background:
    radial-gradient(900px 480px at 8% -10%, rgba(16,185,129,.09), transparent 60%),
    radial-gradient(700px 420px at 100% 0%, rgba(8,145,178,.06), transparent 60%),
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.055) 1px, transparent 0) 0 0 / 22px 22px,
    linear-gradient(180deg, #fbfcfd 0%, #f3f6f8 100%);
}

/* Vertical rhythm: less air above and between blocks. */
.wrap, main { padding-top: 16px !important; }
.apphead, .directory-head, .hero { margin-top: 0 !important; margin-bottom: 10px !important; }
.apphead h1, .directory-head h1, .hero h1 { letter-spacing: -0.02em !important; }
.apphead p, .apphead .sub, .directory-head p { margin-top: 3px !important; }

/* One accent treatment for the highlighted word in every title. */
.apphead h1 .a, .directory-head h1 .a, .hero h1 .a {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Title emoji chip, used as <span class="emo" aria-hidden="true">🎯</span> before the h1 text. */
.emo {
  display: inline-grid; place-items: center;
  width: 1.55em; height: 1.55em; margin-right: .35em;
  font-size: .78em; line-height: 1; vertical-align: .12em;
  background: #fff; border: 1.5px solid var(--edge); border-radius: 10px;
  box-shadow: var(--glow);
}
/* Inline emoji in labels, buttons and section titles. */
.ei { display: inline-block; margin-right: .38em; font-style: normal; line-height: 1; filter: saturate(1.05); }

/* Redundant status pills: the page itself shows the data is live. */
.live-badge, .status, .directory-head .status, span.live { display: none !important; }

/* Cards and panels: bolder outline, softer depth, consistent radius. */
.workbench, .panel, .bucket, .tile, .module, .controlbar, .tablebox, .tablewrap,
.graphbox, .verdict, .picker, .list, .item, .play, .finding, details.note, .tool,
.workflow, .queue, .card, .screen, .box, .result, .stat {
  border-color: var(--edge) !important;
  border-width: 1.5px !important;
  box-shadow: var(--glow);
}
.workbench, .panel, .bucket, .controlbar, .graphbox, .picker, .list, details.note { border-radius: 12px !important; }
.module:hover, .tool:hover { border-color: var(--accent) !important; box-shadow: 0 1px 2px rgba(15,23,42,.05), 0 14px 30px -20px rgba(5,150,105,.45); }

/* Metric strips read as one instrument panel. */
.metricbar { background: linear-gradient(180deg, #fff, #f7fafb) !important; }
.metric { padding: 9px 12px !important; }
.metric .k, .tile .lab { letter-spacing: .08em !important; }
.metric .v, .tile .val { letter-spacing: -0.01em; }

/* Tighter controls and tables. */
.toolbar, .controlbar { padding: 10px 12px !important; }
.chart-pane, .table-pane { padding: 12px !important; }
.section-title { margin-bottom: 6px !important; }
tbody td { padding-top: 7px; padding-bottom: 7px; }
.crew-row { margin-bottom: 8px !important; }

/* A thead inside its own scroll box sticks to the top of that box. */
.tablebox thead th, .tablewrap thead th, .tbl-wrap thead th, [style*="overflow-x"] thead th { top: 0 !important; }

/* Never truncate names: wrap at spaces instead. */
.crew-label b { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: break-word; }

/* Buttons: a touch more modern. */
button.go { border-radius: 9px; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px -8px rgba(5,150,105,.7); }
.seg button.on { box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 0 0 1px var(--edge); }

@media (max-width: 640px) {
  .wrap, main { padding-top: 12px !important; }
}

/* Grid and flex items default to min-width:auto, so a wide table inside a
   card's scroll wrapper still stretched the card past the viewport. */
.card, .panel, .bucket, .tile, .module, .item, .play, .finding, .result, .box, .screen { min-width: 0; }

/* ---------- Contrast and weight pass (bolder, AA-safe) ----------
   Measured on white: old accent #059669 = 3.8:1 (fails AA with white button
   text), new #047857 = 5.5:1. Old dim #94a3b8 = 2.6:1, new #64748b = 4.8:1.
   Old muted #5b6675 -> #475467 (7:1 on the page tint). */
:root {
  --text: #0b1220;
  --muted: #475467;
  --dim: #64748b;
  --border: #d3dbe5;
  --border-2: #b6c2d0;
  --accent: #047857;
  --accent-2: #059669;
  --edge: #c3cddb;
  --kev: #c81e1e;
  --ransom: #be123c;
  --grad: linear-gradient(92deg, #047857 0%, #0f766e 50%, #0e7490 100%);
}
body { color: var(--text); }

/* Titles: heavier and tighter. */
.apphead h1, .directory-head h1, .hero h1, h1 { font-weight: 800 !important; color: #0b1220; }
h2, h3 { color: #0b1220; }

/* Small uppercase labels were the faintest text on every page. */
.metric .k, .tile .lab, .section-title, label.fld, .lab, .k, .grp h3, .tier, thead th,
.metrics small, .signals small, .flag {
  color: #344054 !important;
  font-weight: 800 !important;
}
thead th { background: #eef2f6 !important; border-bottom: 1.5px solid var(--border-2) !important; }
.metric .v, .tile .val, .signals b, .metrics b { color: #0b1220; font-weight: 800; }

/* Body copy and secondary text a notch darker. */
p, .sub, .mini, .lead, .meta, footer, .s, .tile .sub, .metric .s { color: var(--muted); }
footer a { color: #1f2937; }

/* Cards: crisper edge, a hint of depth, accent rule on hover. */
.workbench, .panel, .bucket, .tile, .module, .controlbar, .graphbox, .verdict,
.picker, .list, .item, .play, .finding, details.note, .tool, .workflow, .queue, .card, .screen, .box, .result, .stat {
  background-color: #fff;
  border-color: var(--edge) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,23,42,.06), 0 12px 30px -24px rgba(15,23,42,.45);
}

/* Inputs: visible edge and a strong focus ring. */
input[type=text], input[type=search], input:not([type]), select, textarea {
  border: 1.5px solid var(--border-2) !important;
  background: #fff !important;
  color: #0b1220 !important;
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(4,120,87,.28) !important;
  outline-offset: 1px;
  border-color: var(--accent) !important;
}

/* Primary buttons: solid deep green, white bold text (5.5:1). */
button.go:not([style*="background"]), .cta {
  background: var(--accent) !important;
  color: #fff !important;
  font-weight: 800 !important;
  border: 1.5px solid #065f46 !important;
}
button.go:not([style*="background"]):hover, .cta:hover { background: #065f46 !important; }
button.go[style*="background"] { font-weight: 800 !important; border-width: 1.5px !important; }
button.go.secondary { background: #fff !important; color: #0b1220 !important; border-color: var(--border-2) !important; }
button.go.secondary:hover { border-color: var(--accent) !important; color: var(--accent) !important; }
button.go:disabled { opacity: .55; }

/* Chips and segmented tabs: clear selected state. */
.chip { border-width: 1.5px !important; font-weight: 700; color: #1f2937; }
.chip.on { background: var(--accent) !important; border-color: #065f46 !important; color: #fff !important; }
.seg { background: #e9eef4 !important; border-color: var(--border-2) !important; }
.seg button { color: #344054 !important; font-weight: 800 !important; }
.seg button.on, [role="tab"][aria-selected="true"] { color: #0b1220 !important; background: #fff !important; box-shadow: 0 1px 2px rgba(15,23,42,.12), inset 0 -2px 0 var(--accent) !important; }

/* Tags: stronger fills so status reads at a glance. */
.tag { font-weight: 800 !important; border-width: 1.5px !important; }
.tag-kev, .tag-crit { color: #b91c1c !important; background: #fee2e2 !important; border-color: #fca5a5 !important; }
.tag-high { color: #9a3412 !important; background: #ffedd5 !important; border-color: #fdba74 !important; }
.tag-med { color: #854d0e !important; background: #fef9c3 !important; border-color: #fde047 !important; }
.tag-low { color: #334155 !important; background: #f1f5f9 !important; border-color: #cbd5e1 !important; }
.tag-ransom { background: #be123c !important; border-color: #9f1239 !important; color: #fff !important; }

/* Links inside tool content use the darker accent. */
.wrap a:not(.site-nav-link):not(.site-brand-link):not(.tool):not(.module):not(.cta) { color: var(--accent); }
.cve { color: var(--accent) !important; }

/* Bars: deeper fills. */
.bar:has(> span[style*="width"]) { background: #e6ebf1 !important; border-color: var(--border-2) !important; }
.bar > span[style*="width"] { background: linear-gradient(90deg, #059669, #047857) !important; }
.bar.spike > span[style*="width"], .bar.risk > span[style*="width"] { background: linear-gradient(90deg, #ef4444, #b91c1c) !important; }
.bar.warn > span[style*="width"] { background: linear-gradient(90deg, #f59e0b, #b45309) !important; }
.bar:has(> span[style*="width"]) > b { color: #0b1220 !important; font-weight: 800 !important; }

/* Site nav: active item in the deeper accent. */
.site-nav-link { color: #475467 !important; }
.site-nav-link.active { color: var(--accent) !important; }