/* ============================================================
   ABYSS — Deep Sea theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    /* Deep Sea palette ---------------------------------------- */
    --abyss:           #02050d;   /* almost black, infinite depth */
    --trench:          #040814;   /* base page background */
    --deep:            #07101f;   /* primary surface */
    --mid:             #0b1a30;   /* panels */
    --shelf:           #122a47;   /* raised surfaces / hover */
    --reef:            #1c3a5e;   /* borders */
    --foam:            #2d5a8a;   /* lighter blue / disabled */

    /* Bioluminescence --------------------------------------- */
    --biolum:          #00e5ff;   /* primary cyan accent */
    --biolum-dim:      #008eb3;
    --biolum-glow:     rgba(0, 229, 255, 0.35);
    --jelly:           #00ffc8;   /* secondary teal */
    --jelly-dim:       #00b389;
    --plankton:        #7ff5ff;   /* light glow */

    /* Status colors ----------------------------------------- */
    --coral:           #ff5a78;   /* danger / malicious */
    --coral-glow:      rgba(255, 90, 120, 0.25);
    --amber:           #ffb84d;   /* warning */
    --kelp:            #4ade80;   /* safe / success */
    --moonlight:       #e8f1ff;   /* primary text */
    --tide:            #93a8c2;   /* secondary text */
    --murky:           #4f6280;   /* muted text */

    /* Typography ------------------------------------------- */
    --font-display: "Chakra Petch", system-ui, sans-serif;
    --font-body:    "Inter Tight", system-ui, sans-serif;
    --font-mono:    "JetBrains Mono", "Fira Code", monospace;

    /* Sizing ---------------------------------------------- */
    --radius:       4px;
    --radius-lg:    8px;
    --header-h:     56px;
    --sidebar-w:    260px;
}

/* ============================================================
   reset & base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--trench);
    color: var(--moonlight);
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body {
    background:
        radial-gradient(ellipse 80% 60% at 20% 0%, rgba(0, 142, 179, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 80% at 100% 100%, rgba(0, 255, 200, 0.05), transparent 60%),
        var(--trench);
    background-attachment: fixed;
    min-height: 100vh;
    overflow-x: hidden;
}

/* subtle moving caustics — deep sea light scatter */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 15% 30%, rgba(0, 229, 255, 0.04) 0%, transparent 25%),
        radial-gradient(circle at 75% 70%, rgba(0, 255, 200, 0.03) 0%, transparent 30%);
    z-index: 0;
    animation: caustics 18s ease-in-out infinite alternate;
}

@keyframes caustics {
    from { transform: translate(0, 0); }
    to   { transform: translate(2%, -1%); }
}

/* noise overlay — barely-there grain */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0;
}

a { color: var(--biolum); text-decoration: none; }
a:hover { color: var(--plankton); }

button { font-family: inherit; cursor: pointer; }

::selection {
    background: var(--biolum-glow);
    color: var(--moonlight);
}

/* scrollbars - thin and on-theme */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: var(--trench); }
*::-webkit-scrollbar-thumb {
    background: var(--reef);
    border-radius: 4px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--foam); }

/* ============================================================
   topbar
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    display: flex;
    align-items: center;
    padding: 0 24px;
    background: linear-gradient(180deg, rgba(7, 16, 31, 0.95), rgba(7, 16, 31, 0.85));
    border-bottom: 1px solid var(--reef);
    backdrop-filter: blur(10px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.15em;
    color: var(--moonlight);
    text-transform: uppercase;
}

.brand-mark {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid var(--biolum);
    color: var(--biolum);
    border-radius: 50%;
    box-shadow:
        0 0 8px var(--biolum-glow),
        inset 0 0 6px rgba(0, 229, 255, 0.18);
    animation: pulse-glow 4s ease-in-out infinite;
}
.brand-mark svg { width: 16px; height: 16px; }

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 6px var(--biolum-glow), inset 0 0 4px rgba(0,229,255,.12); }
    50%      { box-shadow: 0 0 18px var(--biolum-glow), inset 0 0 8px rgba(0,229,255,.25); }
}

.brand-tag {
    color: var(--murky);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: lowercase;
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid var(--reef);
}

.topbar-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.depth-indicator {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    display: flex;
    align-items: center;
    gap: 6px;
}
.depth-indicator .dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--jelly);
    box-shadow: 0 0 6px var(--jelly);
}
.depth-indicator.offline .dot { background: var(--coral); box-shadow: 0 0 6px var(--coral-glow); }

/* ============================================================
   layout
   ============================================================ */

.main {
    position: relative;
    z-index: 2;
    padding: 32px 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.workspace {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 1080px) {
    .workspace { grid-template-columns: 1fr; }
}

/* ============================================================
   buttons
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--reef);
    background: var(--mid);
    color: var(--moonlight);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.btn:hover {
    background: var(--shelf);
    border-color: var(--foam);
    color: var(--moonlight);
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    border-color: var(--biolum);
    color: var(--biolum);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.10), rgba(0, 229, 255, 0.02));
    box-shadow: 0 0 0 0 var(--biolum-glow);
}
.btn-primary:hover {
    color: var(--abyss);
    background: var(--biolum);
    border-color: var(--biolum);
    box-shadow: 0 0 16px var(--biolum-glow);
}

.btn-danger {
    border-color: var(--coral);
    color: var(--coral);
}
.btn-danger:hover {
    background: var(--coral);
    border-color: var(--coral);
    color: var(--abyss);
    box-shadow: 0 0 16px var(--coral-glow);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--tide);
}
.btn-ghost:hover {
    background: var(--mid);
    color: var(--moonlight);
}

.btn-sm { padding: 5px 10px; font-size: 11px; }

/* ============================================================
   inputs
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"],
input:not([type]),
textarea, select {
    width: 100%;
    padding: 9px 12px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    color: var(--moonlight);
    font-family: var(--font-body);
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    /* kill the Chrome / Safari / Firefox default chrome */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
input[type="password"] { font-family: var(--font-mono); letter-spacing: 0.08em; }
input::placeholder, textarea::placeholder { color: var(--murky); opacity: 1; }
input:hover:not(:disabled), textarea:hover:not(:disabled), select:hover:not(:disabled) {
    border-color: var(--shelf);
    background: var(--mid);
}
textarea, .mono-input { font-family: var(--font-mono); font-size: 12px; line-height: 1.5; }
input:focus, textarea:focus, select:focus {
    border-color: var(--biolum);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
    background: var(--deep);
}
input:disabled, textarea:disabled, select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* select arrow */
select {
    background-image:
        linear-gradient(45deg, transparent 50%, var(--tide) 50%),
        linear-gradient(135deg, var(--tide) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) 14px,
        calc(100% - 13px) 14px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 32px;
    cursor: pointer;
}
select:focus { background-image:
        linear-gradient(45deg, transparent 50%, var(--biolum) 50%),
        linear-gradient(135deg, var(--biolum) 50%, transparent 50%);
}

/* checkboxes & radios — fully custom */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: 3px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    flex: none;
    margin: 0;
    transition: all 0.12s ease;
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--biolum-dim); }
input[type="checkbox"]:checked, input[type="radio"]:checked {
    background: var(--biolum);
    border-color: var(--biolum);
}
input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 1px;
    width: 4px; height: 8px;
    border: solid var(--abyss);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 3px;
    background: var(--abyss);
    border-radius: 50%;
}
input[type="checkbox"]:focus, input[type="radio"]:focus {
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.2);
    outline: none;
}
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* file inputs */
input[type="file"] {
    width: 100%;
    padding: 8px;
    background: var(--deep);
    border: 1px dashed var(--reef);
    border-radius: var(--radius);
    color: var(--moonlight);
    font-family: var(--font-mono);
    font-size: 12px;
    cursor: pointer;
}
input[type="file"]::file-selector-button {
    background: var(--mid);
    border: 1px solid var(--reef);
    color: var(--biolum);
    padding: 5px 12px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    margin-right: 12px;
    transition: all 0.15s ease;
}
input[type="file"]::file-selector-button:hover {
    background: var(--shelf);
    border-color: var(--biolum-dim);
}

/* webkit autofill — kill the yellow */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--moonlight);
    -webkit-box-shadow: 0 0 0 1000px var(--deep) inset;
    box-shadow: 0 0 0 1000px var(--deep) inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--biolum);
}

label {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--tide);
    margin-bottom: 6px;
}

/* ============================================================
   index page — project list
   ============================================================ */

.hero {
    margin-bottom: 32px;
    padding: 48px 44px 40px;
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, var(--mid) 0%, var(--deep) 100%);
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}
@media (max-width: 980px) {
    .hero {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 28px;
    }
}
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 90% -30%, rgba(0, 229, 255, 0.15), transparent 60%),
        radial-gradient(circle at -10% 110%, rgba(0, 255, 200, 0.06), transparent 50%);
    pointer-events: none;
}
.hero > * { position: relative; }

.hero-text { min-width: 0; }
.hero-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--biolum);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hero-eyebrow::before {
    content: "";
    display: inline-block;
    width: 24px; height: 1px;
    background: var(--biolum);
}

.hero h1 {
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    margin: 0 0 16px;
}
.hero h1 .accent {
    background: linear-gradient(90deg, var(--biolum), var(--jelly));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
@media (max-width: 1180px) { .hero h1 { font-size: 38px; } }
@media (max-width: 760px)  { .hero h1 { font-size: 32px; } }

.hero p {
    color: var(--tide);
    max-width: 540px;
    margin: 0;
    line-height: 1.55;
    font-size: 14px;
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 28px 0 14px;
}
.section-header h2 {
    font-size: 14px;
    letter-spacing: 0.18em;
    color: var(--tide);
    text-transform: uppercase;
    font-weight: 600;
}
.section-header h2::before {
    content: "▸";
    color: var(--biolum);
    margin-right: 8px;
}
.section-header .count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.project-card {
    display: block;
    padding: 18px 20px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    color: inherit;
}
.project-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.04) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.project-card:hover {
    transform: translateY(-2px);
    border-color: var(--biolum);
    box-shadow: 0 8px 32px rgba(0, 229, 255, 0.10);
    color: inherit;
}
.project-card:hover::before { opacity: 1; }

.project-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}
.project-card h3 {
    font-size: 16px;
    margin-bottom: 4px;
    word-break: break-word;
}
.project-card .file-name {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    word-break: break-all;
}
.project-card .meta-row {
    display: flex;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tide);
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--reef);
}
.project-card .hash {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    margin-top: 6px;
    word-break: break-all;
}

/* threat badges */
.threat {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid;
}
.threat-unknown    { color: var(--murky); border-color: var(--reef); }
.threat-clean      { color: var(--kelp);   border-color: var(--kelp); }
.threat-suspicious { color: var(--amber);  border-color: var(--amber); }
.threat-malicious  { color: var(--coral);  border-color: var(--coral); box-shadow: 0 0 8px var(--coral-glow); }

.tag {
    display: inline-block;
    padding: 2px 8px;
    margin: 2px 4px 2px 0;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--plankton);
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.18);
}

/* empty state */
.empty {
    padding: 60px 24px;
    text-align: center;
    border: 1px dashed var(--reef);
    border-radius: var(--radius-lg);
    color: var(--murky);
}
.empty svg { opacity: 0.35; margin-bottom: 12px; }

/* upload zone */
.upload-zone {
    margin: 0;
    padding: 36px 28px;
    border: 2px dashed var(--reef);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all 0.2s ease;
    cursor: pointer;
    background: rgba(2, 5, 13, 0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    gap: 8px;
}
.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--biolum);
    background: rgba(0, 229, 255, 0.04);
    box-shadow: inset 0 0 30px rgba(0, 229, 255, 0.08);
}
.upload-zone svg {
    color: var(--biolum);
    margin: 0;
    width: 40px;
    height: 40px;
    transition: transform 0.25s ease;
}
.upload-zone:hover svg { transform: translateY(-3px); }
.upload-zone .upload-title {
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--moonlight);
    margin: 8px 0 2px;
}
.upload-zone p { color: var(--tide); margin: 0; }
.upload-zone .hint { color: var(--murky); font-size: 11px; font-family: var(--font-mono); line-height: 1.5; }

/* modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 5, 13, 0.78);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: none;
    align-items: center;
    justify-content: center;
}
.modal-backdrop.open { display: flex; }

.modal {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    width: min(90vw, 520px);
    padding: 24px 28px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
.modal h3 {
    font-size: 18px;
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.modal .field { margin-bottom: 14px; }
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
}

/* ============================================================
   project workspace
   ============================================================ */

/* sidebar */
.sidebar {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    padding: 16px;
    position: sticky;
    top: calc(var(--header-h) + 20px);
}

.sidebar-section {
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--reef);
}
.sidebar-section:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }

.sidebar-section h4 {
    font-size: 10px;
    color: var(--murky);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.sidebar-section .value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--moonlight);
    word-break: break-all;
}
.sidebar-section .value.small { font-size: 11px; color: var(--tide); }

.tab-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.tab-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--tide);
    border-radius: var(--radius);
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
}
.tab-list li:hover { background: var(--mid); color: var(--moonlight); }
.tab-list li.active {
    background: var(--mid);
    color: var(--biolum);
    border-left-color: var(--biolum);
}
.tab-list svg { width: 14px; height: 14px; flex: none; }

.tab-badge {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 10px;
    background: var(--shelf);
    color: var(--plankton);
    padding: 1px 6px;
    border-radius: 3px;
}

/* content panel */
.panel {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 600px;
}
.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--reef);
    background: linear-gradient(180deg, var(--mid), var(--deep));
}
.panel-header h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--moonlight);
}
.panel-header .panel-sub {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    margin-left: auto;
}
.panel-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.panel-body { padding: 22px; }

/* tab pages */
.tab-page { display: none; }
.tab-page.active { display: block; }

/* ============================================================
   overview cards
   ============================================================ */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.card {
    padding: 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    position: relative;
}
.card .label {
    font-size: 10px;
    color: var(--murky);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
.card .stat {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--moonlight);
    font-weight: 600;
}
.card .stat.mono {
    font-family: var(--font-mono);
    font-size: 16px;
    word-break: break-all;
}
.card .sub {
    font-size: 11px;
    color: var(--tide);
    margin-top: 4px;
}

.card.accent {
    border-color: var(--biolum);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), var(--mid));
}
.card.danger {
    border-color: var(--coral);
    background: linear-gradient(135deg, rgba(255, 90, 120, 0.10), var(--mid));
}
.card.warn {
    border-color: var(--amber);
    background: linear-gradient(135deg, rgba(255, 184, 77, 0.10), var(--mid));
}

/* entropy gauge */
.gauge {
    margin-top: 8px;
    height: 6px;
    background: var(--deep);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--kelp), var(--amber) 60%, var(--coral) 90%);
    transition: width 0.5s ease;
}

/* hash blocks */
.hashes { display: grid; gap: 6px; }
.hash-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
}
.hash-row .name {
    font-family: var(--font-display);
    font-size: 10px;
    color: var(--murky);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    width: 70px;
    flex: none;
}
.hash-row code {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--plankton);
    flex: 1;
    overflow-x: auto;
    word-break: break-all;
}
.copy-btn {
    background: none;
    border: 1px solid var(--reef);
    color: var(--murky);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.copy-btn:hover { color: var(--biolum); border-color: var(--biolum); }

/* entropy chart */
.entropy-chart {
    margin-top: 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 16px;
}
.entropy-chart .chart-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.entropy-chart svg { width: 100%; height: 140px; display: block; }

/* capability badges */
.capabilities { display: flex; flex-wrap: wrap; gap: 8px; }
.cap-pill {
    padding: 6px 12px;
    background: rgba(255, 90, 120, 0.08);
    border: 1px solid rgba(255, 90, 120, 0.3);
    color: var(--coral);
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    cursor: help;
}
.cap-pill.medium {
    background: rgba(255, 184, 77, 0.06);
    border-color: rgba(255, 184, 77, 0.25);
    color: var(--amber);
}

/* ============================================================
   data tables
   ============================================================ */

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--reef);
    border-radius: var(--radius);
}
table.data {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: 12px;
}
table.data th {
    text-align: left;
    padding: 10px 14px;
    background: var(--mid);
    color: var(--murky);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: 1px solid var(--reef);
    position: sticky;
    top: 0;
}
table.data td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--reef);
    color: var(--moonlight);
    vertical-align: top;
}
table.data tr:hover td { background: rgba(0, 229, 255, 0.03); }
table.data tr:last-child td { border-bottom: none; }
table.data td.dim { color: var(--tide); }
table.data td.hl  { color: var(--biolum); }

/* ============================================================
   strings panel
   ============================================================ */

.strings-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
    align-items: center;
    flex-wrap: wrap;
}
.strings-toolbar input { flex: 1; min-width: 200px; }
.strings-toolbar select { width: auto; min-width: 100px; }

.strings-list {
    max-height: 600px;
    overflow-y: auto;
    border: 1px solid var(--reef);
    border-radius: var(--radius);
}
.string-row {
    display: grid;
    grid-template-columns: 100px 60px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    border-bottom: 1px solid var(--mid);
    cursor: pointer;
}
.string-row:hover { background: rgba(0, 229, 255, 0.04); }
.string-row .offset { color: var(--murky); }
.string-row .type   { color: var(--tide); font-size: 10px; text-transform: uppercase; }
.string-row .value  { color: var(--moonlight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.string-row .string-tags { display: flex; gap: 4px; }
.string-tag {
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.string-tag.url     { background: rgba(0, 229, 255, 0.12); color: var(--biolum); }
.string-tag.ip      { background: rgba(0, 229, 255, 0.12); color: var(--biolum); }
.string-tag.domain  { background: rgba(0, 229, 255, 0.12); color: var(--biolum); }
.string-tag.api     { background: rgba(255, 184, 77, 0.12); color: var(--amber); }
.string-tag.crypto  { background: rgba(0, 255, 200, 0.12); color: var(--jelly); }
.string-tag.path    { background: rgba(147, 168, 194, 0.12); color: var(--tide); }
.string-tag.registry{ background: rgba(147, 168, 194, 0.12); color: var(--tide); }
.string-tag.user_msg{ background: rgba(255, 90, 120, 0.12); color: var(--coral); }

/* ============================================================
   hex view
   ============================================================ */

.hex-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.hex-toolbar input { width: auto; flex: 0 0 160px; }
.hex-view {
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    background: var(--abyss);
    padding: 12px 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    max-height: 700px;
    overflow-y: auto;
}
.hex-line { display: flex; gap: 18px; white-space: nowrap; }
.hex-line .hex-offset { color: var(--biolum-dim); width: 8ch; flex: none; }
.hex-line .hex-bytes  { color: var(--moonlight); flex: none; }
.hex-line .hex-bytes span { padding: 0 1px; }
.hex-line .hex-bytes .b00 { color: var(--murky); }
.hex-line .hex-bytes .ascii-hi { color: var(--plankton); }
.hex-line .hex-ascii { color: var(--tide); border-left: 1px solid var(--reef); padding-left: 12px; flex: none; }

.hex-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 12px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
}

/* ============================================================
   disassembly
   ============================================================ */

.disasm {
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.55;
    max-height: 700px;
    overflow-y: auto;
    padding: 12px 16px;
}
.disasm-row {
    display: grid;
    grid-template-columns: 110px 220px 80px 1fr;
    gap: 16px;
    padding: 1px 0;
}
.disasm-row:hover { background: rgba(0, 229, 255, 0.04); }
.disasm-row .addr { color: var(--biolum-dim); }
.disasm-row .bytes { color: var(--murky); font-size: 11px; }
.disasm-row .mnem  { color: var(--plankton); font-weight: 600; }
.disasm-row .ops   { color: var(--moonlight); }
.disasm-row .mnem.flow  { color: var(--amber); }
.disasm-row .mnem.call  { color: var(--jelly); }
.disasm-row .mnem.ret   { color: var(--coral); }

/* ============================================================
   YARA editor
   ============================================================ */

.yara-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    height: 700px;
}
@media (max-width: 1280px) {
    .yara-grid { grid-template-columns: 1fr; height: auto; }
}

.yara-editor {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    overflow: hidden;
}
.yara-editor textarea {
    flex: 1;
    border: none;
    border-radius: 0;
    background: var(--abyss);
    color: var(--moonlight);
    padding: 14px;
    resize: none;
    min-height: 400px;
}
.yara-editor-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--mid);
    border-bottom: 1px solid var(--reef);
}

.yara-results {
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 16px;
    overflow-y: auto;
    max-height: 700px;
}
.yara-match {
    margin-bottom: 12px;
    padding: 12px 14px;
    background: var(--mid);
    border-left: 3px solid var(--coral);
    border-radius: 0 var(--radius) var(--radius) 0;
}
.yara-match.severity-low      { border-color: var(--tide); }
.yara-match.severity-medium   { border-color: var(--amber); }
.yara-match.severity-high     { border-color: var(--coral); }
.yara-match.severity-critical { border-color: var(--coral); box-shadow: -3px 0 12px var(--coral-glow); }
.yara-match h4 {
    color: var(--moonlight);
    font-family: var(--font-mono);
    font-size: 13px;
    margin-bottom: 4px;
}
.yara-match .meta {
    color: var(--tide);
    font-size: 11px;
    margin-bottom: 8px;
}
.yara-match .strings-found {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    padding-left: 8px;
    border-left: 1px solid var(--reef);
}
.yara-match .strings-found > div { padding: 1px 0; }

/* ============================================================
   notes (markdown)
   ============================================================ */

.notes-area textarea {
    width: 100%;
    min-height: 500px;
    resize: vertical;
}
.notes-toolbar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* ============================================================
   sandbox
   ============================================================ */

.sandbox-status {
    padding: 16px;
    margin-bottom: 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    gap: 14px;
}
.sandbox-status .dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex: none;
}
.sandbox-status.online .dot  { background: var(--jelly); box-shadow: 0 0 8px var(--jelly); }
.sandbox-status.offline .dot { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
.sandbox-status .text { flex: 1; }
.sandbox-status .text strong { color: var(--moonlight); }
.sandbox-status .text small { color: var(--tide); display: block; margin-top: 2px; }

.profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.profile-card {
    padding: 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.15s ease;
}
.profile-card:hover {
    border-color: var(--biolum);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.10);
}
.profile-card.dangerous { border-left: 3px solid var(--coral); }
.profile-card h4 { margin-bottom: 4px; font-size: 14px; }
.profile-card .image { font-family: var(--font-mono); font-size: 11px; color: var(--murky); margin-bottom: 8px; }
.profile-card .desc { font-size: 12px; color: var(--tide); margin-bottom: 12px; }
.profile-card .warn-badge {
    display: inline-block;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(255, 90, 120, 0.15);
    color: var(--coral);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
}

.run-list { margin-top: 20px; }
.run-row {
    padding: 12px 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.run-row:hover { background: var(--shelf); }
.run-row .profile { font-family: var(--font-mono); font-size: 12px; color: var(--biolum); flex: 1; }
.run-row .meta { font-family: var(--font-mono); font-size: 11px; color: var(--tide); }

.sandbox-output {
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 14px 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--plankton);
    white-space: pre-wrap;
    max-height: 500px;
    overflow-y: auto;
    margin-top: 12px;
}

/* ============================================================
   loaders / toasts
   ============================================================ */

.loader {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid var(--reef);
    border-top-color: var(--biolum);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-stack {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 200;
}
.toast {
    padding: 12px 16px;
    background: var(--deep);
    border: 1px solid var(--biolum);
    color: var(--moonlight);
    font-size: 13px;
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 12px rgba(0, 229, 255, 0.12);
    animation: slide-in 0.25s ease;
}
.toast.danger { border-color: var(--coral); }
.toast.warn   { border-color: var(--amber); }
@keyframes slide-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   utility
   ============================================================ */

.mono { font-family: var(--font-mono); color: white;}
.dim  { color: white; }
.hl   { color: var(--biolum); }
.row  { display: flex; gap: 12px; align-items: center; }
.spacer { flex: 1; }
.center { text-align: center; }
.empty-text { color: var(--murky); padding: 40px; text-align: center; font-style: italic; }
.nowrap { white-space: nowrap; }
hr { border: none; border-top: 1px solid var(--reef); margin: 16px 0; }

/* ============================================================
   v2 additions — navigation, actors, clusters, IIM, docker
   ============================================================ */

.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 32px;
}
.main-nav a {
    padding: 6px 14px;
    color: var(--tide);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: var(--radius);
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.main-nav a:hover {
    color: var(--moonlight);
    background: var(--mid);
}
.main-nav a.active {
    color: var(--biolum);
    background: var(--mid);
    box-shadow: inset 0 -2px 0 var(--biolum);
}
.nav-pill {
    background: var(--shelf);
    color: var(--plankton);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    font-family: var(--font-mono);
}

/* page header */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--reef);
}
.page-header h1 {
    font-size: 28px;
    letter-spacing: 0.02em;
}
.page-header h1 .accent {
    background: linear-gradient(90deg, var(--biolum), var(--jelly));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.page-header .subtitle {
    color: var(--tide);
    margin-top: 4px;
    max-width: 720px;
}
.page-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* stats grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.stat-card {
    padding: 16px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 60px; height: 60px;
    background: radial-gradient(circle at 70% 30%, var(--biolum-glow), transparent 70%);
    opacity: 0.6;
}
.stat-card .stat-label {
    font-size: 10px;
    color: var(--murky);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.stat-card .stat-value {
    font-family: var(--font-display);
    font-size: 32px;
    font-weight: 700;
    color: var(--moonlight);
    line-height: 1.1;
    margin-top: 6px;
}
.stat-card.danger .stat-value { color: var(--coral); }
.stat-card.success .stat-value { color: var(--kelp); }

/* sortable table headers (re-used) */
table.data th.sort {
    cursor: pointer;
    user-select: none;
}
table.data th.sort:hover { color: var(--moonlight); }

/* threat actor cards */
.actor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
}
.actor-card {
    padding: 18px 20px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-left: 3px solid var(--biolum-dim);
    border-radius: var(--radius-lg);
    transition: all 0.18s ease;
    color: inherit;
    display: block;
}
.actor-card:hover {
    transform: translateY(-2px);
    border-left-color: var(--biolum);
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.10);
    color: inherit;
}
.actor-card .actor-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--biolum);
    letter-spacing: 0.08em;
    margin-bottom: 4px;
}
.actor-card h3 {
    font-size: 17px;
    margin-bottom: 8px;
    word-break: break-word;
}
.actor-card .aliases {
    color: var(--tide);
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.4;
}
.actor-card .meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tide);
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--reef);
}
.actor-card .meta-grid .label {
    color: var(--murky);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sophistication-low      { color: var(--tide); }
.sophistication-medium   { color: var(--amber); }
.sophistication-high     { color: var(--coral); }
.sophistication-advanced { color: var(--coral); text-shadow: 0 0 6px var(--coral-glow); }

.motivation-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--plankton);
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ----- cluster view ----- */
.cluster-block {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    margin-bottom: 14px;
    overflow: hidden;
}
.cluster-head {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    background: linear-gradient(180deg, var(--mid), var(--deep));
    border-bottom: 1px solid var(--reef);
    cursor: pointer;
}
.cluster-head .cluster-kind {
    padding: 3px 10px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.cluster-head .cluster-kind.imphash { background: rgba(0, 229, 255, 0.15); color: var(--biolum); }
.cluster-head .cluster-kind.actor   { background: rgba(255, 90, 120, 0.15); color: var(--coral); }
.cluster-head .cluster-kind.bucket  { background: rgba(147, 168, 194, 0.12); color: var(--tide); }
.cluster-head .cluster-value {
    font-family: var(--font-mono);
    color: var(--moonlight);
    font-size: 14px;
}
.cluster-head .cluster-size {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tide);
}
.cluster-head.malicious { border-left: 3px solid var(--coral); }
.cluster-body {
    padding: 0;
    max-height: 600px;
    overflow-y: auto;
}
.cluster-body .sample-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 80px 80px 70px auto;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 1px solid var(--mid);
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: background 0.1s;
}
.cluster-body .sample-row:hover { background: rgba(0, 229, 255, 0.04); }
.cluster-body .sample-row:last-child { border-bottom: none; }
.cluster-body .sample-row .name { color: var(--moonlight); font-weight: 500; word-break: break-word; }
.cluster-body .sample-row .file { font-family: var(--font-mono); font-size: 11px; color: var(--murky); }
.cluster-body .sample-row .fmt  { font-family: var(--font-mono); font-size: 11px; color: var(--plankton); }
.cluster-body .sample-row .size { font-family: var(--font-mono); font-size: 11px; color: var(--tide); }

/* ----- IIM ----- */
.iim-categories {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.iim-cat-card {
    padding: 16px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    border-top: 3px solid;
}
.iim-cat-card.hosting       { border-top-color: var(--biolum); }
.iim-cat-card.resolution    { border-top-color: var(--jelly); }
.iim-cat-card.routing       { border-top-color: var(--amber); }
.iim-cat-card.gating        { border-top-color: var(--coral); }
.iim-cat-card.composition   { border-top-color: var(--plankton); }
.iim-cat-card h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 4px;
}
.iim-cat-card .count {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    margin-bottom: 12px;
}
.iim-cat-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.iim-cat-card li {
    padding: 6px 10px;
    background: var(--mid);
    border-radius: var(--radius);
    cursor: pointer;
    transition: background 0.1s;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--tide);
    display: flex;
    gap: 10px;
    align-items: center;
}
.iim-cat-card li:hover { background: var(--shelf); color: var(--moonlight); }
.iim-cat-card li .tid { color: var(--biolum-dim); flex: none; }
.iim-cat-card li .name { color: var(--moonlight); }

/* technique modal */
.modal-large {
    width: min(90vw, 760px);
    max-height: 85vh;
    overflow-y: auto;
}
.tech-detail h2 {
    font-size: 20px;
    margin-bottom: 4px;
}
.tech-detail .tid {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--biolum);
    margin-bottom: 12px;
}
.tech-detail h4 {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tide);
    margin: 16px 0 6px;
}
.tech-detail p {
    margin: 0 0 8px;
    color: var(--moonlight);
    line-height: 1.55;
}
.tech-detail ul {
    margin: 0 0 8px;
    padding-left: 20px;
    color: var(--moonlight);
}
.tech-detail ul li { margin-bottom: 4px; }
.tech-detail .attack-tag {
    display: inline-block;
    background: rgba(255, 90, 120, 0.12);
    border: 1px solid rgba(255, 90, 120, 0.25);
    color: var(--coral);
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    margin-right: 6px;
}

/* IIM chain visualization */
.chain-viz {
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 20px;
    overflow-x: auto;
}
.chain-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: max-content;
    padding: 16px 0;
}
.chain-node {
    padding: 12px 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: 8px;
    min-width: 140px;
    text-align: center;
    position: relative;
}
.chain-node.role-entry      { border-color: var(--biolum); }
.chain-node.role-redirector { border-color: var(--amber); }
.chain-node.role-staging    { border-color: var(--plankton); }
.chain-node.role-payload    { border-color: var(--jelly); }
.chain-node.role-c2         { border-color: var(--coral); }
.chain-node .role-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--biolum);
    margin-bottom: 6px;
}
.chain-node.role-c2 .role-label         { color: var(--coral); }
.chain-node.role-payload .role-label    { color: var(--jelly); }
.chain-node.role-staging .role-label    { color: var(--plankton); }
.chain-node.role-redirector .role-label { color: var(--amber); }
.chain-node .entity-type {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--murky);
    margin-bottom: 2px;
}
.chain-node .entity-value {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--moonlight);
    word-break: break-all;
    line-height: 1.3;
}
.chain-node .tech-list {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}
.chain-node .tech-tag {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--biolum);
    background: rgba(0, 229, 255, 0.08);
    padding: 1px 5px;
    border-radius: 3px;
}
.chain-arrow {
    color: var(--reef);
    font-size: 22px;
    flex: none;
}
.chain-arrow .rel {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--murky);
    display: block;
    margin-top: 2px;
    text-align: center;
}

/* chain editor */
.iim-editor {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 1280px) {
    .iim-editor { grid-template-columns: 1fr; }
}
.iim-editor textarea {
    min-height: 600px;
    font-family: var(--font-mono);
    font-size: 12px;
    background: var(--abyss);
    color: var(--moonlight);
}
.validation-panel {
    padding: 14px;
    background: var(--mid);
    border-radius: var(--radius);
    border-left: 3px solid var(--kelp);
    margin-bottom: 12px;
}
.validation-panel.invalid { border-left-color: var(--coral); }
.validation-panel h4 {
    font-size: 12px;
    margin-bottom: 6px;
    color: var(--moonlight);
}
.validation-panel .err {
    color: var(--coral);
    font-family: var(--font-mono);
    font-size: 11px;
    margin: 2px 0;
}
.validation-panel .ok {
    color: var(--kelp);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* docker UI */
.docker-grid {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 18px;
}
@media (max-width: 1100px) {
    .docker-grid { grid-template-columns: 1fr; }
}
.docker-panel {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.docker-panel-head {
    padding: 12px 18px;
    background: linear-gradient(180deg, var(--mid), var(--deep));
    border-bottom: 1px solid var(--reef);
    display: flex;
    align-items: center;
    gap: 12px;
}
.docker-panel-head h2 {
    font-size: 13px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.docker-panel-head .actions {
    margin-left: auto;
    display: flex;
    gap: 6px;
}
.docker-panel-body {
    padding: 16px;
    max-height: 600px;
    overflow-y: auto;
}

.container-row, .image-row {
    padding: 10px 12px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    margin-bottom: 6px;
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: 14px;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 12px;
}
.container-row .cid, .image-row .iid {
    color: var(--biolum-dim);
    font-size: 11px;
}
.container-row .info, .image-row .info {
    color: var(--moonlight);
    word-break: break-all;
}
.container-row .info .name { color: var(--biolum); }
.container-row .info .image { color: var(--tide); font-size: 11px; }
.container-row .state {
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.container-row .state.running { background: rgba(74, 222, 128, 0.15); color: var(--kelp); }
.container-row .state.exited  { background: rgba(147, 168, 194, 0.12); color: var(--tide); }
.container-row .state.created { background: rgba(0, 229, 255, 0.12); color: var(--biolum); }
.container-row .actions, .image-row .actions {
    display: flex;
    gap: 4px;
}

.image-row .image-info { color: var(--moonlight); }
.image-row .image-info .tag {
    color: var(--biolum);
    margin-right: 6px;
}
.image-row .size { color: var(--tide); font-size: 11px; }

/* docker profile editor */
.profile-editor {
    padding: 16px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    margin-bottom: 12px;
}
.profile-editor .head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.profile-editor h4 { font-size: 14px; }
.profile-editor .danger-badge {
    background: rgba(255, 90, 120, 0.15);
    color: var(--coral);
    padding: 2px 7px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
}
.profile-editor .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.profile-editor .form-grid .span-2 { grid-column: 1 / 3; }
.profile-editor textarea {
    font-family: var(--font-mono);
    min-height: 100px;
    background: var(--abyss);
}

/* YARA library list */
.yara-library {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.yara-rule-row {
    padding: 14px 18px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    border-left: 3px solid var(--reef);
    cursor: pointer;
    transition: all 0.15s ease;
}
.yara-rule-row.severity-low      { border-left-color: var(--tide); }
.yara-rule-row.severity-medium   { border-left-color: var(--amber); }
.yara-rule-row.severity-high     { border-left-color: var(--coral); }
.yara-rule-row.severity-critical { border-left-color: var(--coral); box-shadow: -3px 0 12px var(--coral-glow); }
.yara-rule-row:hover { background: var(--mid); }
.yara-rule-row.disabled { opacity: 0.5; }
.yara-rule-row .row-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.yara-rule-row h4 {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--moonlight);
    flex: 1;
}
.yara-rule-row .severity-tag {
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.yara-rule-row .severity-tag.low      { background: rgba(147, 168, 194, 0.12); color: var(--tide); }
.yara-rule-row .severity-tag.medium   { background: rgba(255, 184, 77, 0.12); color: var(--amber); }
.yara-rule-row .severity-tag.high     { background: rgba(255, 90, 120, 0.12); color: var(--coral); }
.yara-rule-row .severity-tag.critical { background: rgba(255, 90, 120, 0.2); color: var(--coral); }
.yara-rule-row .desc {
    color: var(--tide);
    font-size: 12px;
    margin-top: 6px;
}
.yara-rule-row .meta-row {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    align-items: center;
}

/* pattern role chips */
.role-chip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-right: 4px;
}
.role-chip.entry       { background: rgba(0, 229, 255, 0.15); color: var(--biolum); }
.role-chip.redirector  { background: rgba(255, 184, 77, 0.15); color: var(--amber); }
.role-chip.staging     { background: rgba(127, 245, 255, 0.15); color: var(--plankton); }
.role-chip.payload     { background: rgba(0, 255, 200, 0.15); color: var(--jelly); }
.role-chip.c2          { background: rgba(255, 90, 120, 0.15); color: var(--coral); }

/* tabs (for actor / pattern detail) */
.subtabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--reef);
    margin-bottom: 16px;
}
.subtabs > button {
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--tide);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.subtabs > button.active {
    color: var(--biolum);
    border-bottom-color: var(--biolum);
}

/* checkbox */
.check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 12px;
    color: var(--tide);
}
.check input { width: auto; }

/* select multi */
select[multiple] {
    min-height: 100px;
    font-family: var(--font-mono);
    font-size: 12px;
}

/* JSON view */
.json-view {
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--moonlight);
    white-space: pre-wrap;
    max-height: 400px;
    overflow-y: auto;
}
.json-view .json-key { color: var(--biolum); }
.json-view .json-str { color: var(--plankton); }
.json-view .json-num { color: var(--amber); }
.json-view .json-bool { color: var(--coral); }

/* ============================================================
   v3 additions — share button, API keys, API docs, shared view
   ============================================================ */

.btn-share {
    background: rgba(0, 229, 255, 0.06);
    border-color: rgba(0, 229, 255, 0.2);
    color: var(--biolum);
}
.btn-share:hover {
    background: rgba(0, 229, 255, 0.12);
    border-color: var(--biolum);
}
.btn-share.active {
    background: rgba(0, 229, 255, 0.16);
    border-color: var(--biolum);
    color: var(--biolum);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

/* ----- shared / public read-only banner ----- */
.shared-banner {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.08), rgba(0, 255, 200, 0.04));
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: var(--radius-lg);
    padding: 18px 22px;
    margin-bottom: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.shared-banner .badge {
    background: var(--biolum);
    color: var(--abyss);
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 3px;
    font-weight: 600;
    flex: none;
}
.shared-banner .text {
    flex: 1;
    color: var(--moonlight);
    font-size: 13px;
    line-height: 1.5;
}
.shared-banner .text strong { color: var(--biolum); }
.shared-banner .meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tide);
    flex: none;
    text-align: right;
}

/* ----- API keys ----- */
.api-key-row {
    padding: 14px 18px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: 1fr 1.2fr auto;
    gap: 16px;
    align-items: center;
}
.api-key-row .name { font-weight: 500; color: var(--moonlight); }
.api-key-row .meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--murky);
    margin-top: 4px;
}
.api-key-row .token-display {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--biolum);
    background: var(--mid);
    padding: 8px 10px;
    border-radius: var(--radius);
    word-break: break-all;
}
.api-key-row .scope-chip {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    color: var(--plankton);
    border-radius: 3px;
    font-family: var(--font-mono);
    font-size: 10px;
    margin-right: 4px;
}
.api-key-row .actions { display: flex; gap: 6px; }
.api-key-row.disabled { opacity: 0.5; }

.api-key-row .reveal {
    background: rgba(255, 184, 77, 0.06);
    border: 1px solid rgba(255, 184, 77, 0.4);
    color: var(--amber);
    padding: 10px 14px;
    border-radius: var(--radius);
    grid-column: 1 / -1;
    margin-top: 8px;
    word-break: break-all;
    font-family: var(--font-mono);
    font-size: 12px;
}
.api-key-row .reveal strong { color: var(--amber); display:block; margin-bottom: 6px; }

/* ----- API docs ----- */
.api-docs {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
    margin-top: 16px;
}
@media (max-width: 980px) {
    .api-docs { grid-template-columns: 1fr; }
}
.api-docs-sidebar {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 14px;
    position: sticky;
    top: 80px;
    height: max-content;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}
.api-docs-sidebar h4 {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--murky);
    margin: 14px 0 6px;
}
.api-docs-sidebar h4:first-child { margin-top: 0; }
.api-docs-sidebar a {
    display: block;
    padding: 4px 8px;
    color: var(--tide);
    font-family: var(--font-mono);
    font-size: 12px;
    border-radius: 3px;
}
.api-docs-sidebar a:hover { background: var(--mid); color: var(--moonlight); }

.api-section { margin-bottom: 36px; }
.api-section h2 {
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--moonlight);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--reef);
}
.api-section .intro { color: var(--tide); margin-bottom: 16px; font-size: 13px; line-height: 1.6; }

.api-endpoint {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 10px;
}
.api-endpoint-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.api-method {
    font-family: var(--font-mono);
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 3px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 700;
    min-width: 60px;
    text-align: center;
}
.api-method.GET    { background: rgba(0, 229, 255, 0.15); color: var(--biolum); }
.api-method.POST   { background: rgba(0, 255, 200, 0.15); color: var(--jelly); }
.api-method.PATCH  { background: rgba(255, 184, 77, 0.15); color: var(--amber); }
.api-method.DELETE { background: rgba(255, 90, 120, 0.15); color: var(--coral); }
.api-path {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--moonlight);
}
.api-endpoint .desc {
    color: var(--tide);
    font-size: 12px;
    margin-top: 4px;
    line-height: 1.5;
}

.api-example {
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 12px 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--moonlight);
    margin-top: 10px;
    white-space: pre;
    overflow-x: auto;
}
.api-example .comment { color: var(--murky); }
.api-example .key { color: var(--biolum); }
.api-example .str { color: var(--plankton); }
.api-example .verb {
    color: var(--jelly);
    font-weight: 700;
}

/* ----- shared workspace tweaks ----- */
.shared-workspace .sidebar h4 { color: var(--tide); }
.shared-workspace .sidebar .actions-locked {
    background: rgba(255, 90, 120, 0.04);
    border: 1px solid rgba(255, 90, 120, 0.2);
    border-radius: var(--radius);
    padding: 10px;
    font-size: 11px;
    color: var(--tide);
    line-height: 1.5;
}
.shared-workspace .sidebar .actions-locked strong { color: var(--coral); }

/* ============================================================
   v4 additions — shared footer, sortable clusters, user mgmt
   ============================================================ */

/* ----- shared footer ----- */
.shared-footer {
    margin-top: 48px;
    border-top: 1px solid var(--reef);
    background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.02));
    padding: 22px 0 26px;
}
.shared-footer .footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 28px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 24px;
    align-items: center;
}
@media (max-width: 880px) {
    .shared-footer .footer-inner { grid-template-columns: 1fr; gap: 12px; text-align: center; }
}
.shared-footer .footer-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--biolum);
}
.shared-footer .footer-brand .brand-mark {
    width: 18px; height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.shared-footer .footer-text {
    font-size: 12px;
    line-height: 1.55;
    max-width: 640px;
}
.shared-footer .footer-links {
    display: flex;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.05em;
}
.shared-footer .footer-links a { color: var(--biolum-dim); }
.shared-footer .footer-links a:hover { color: var(--biolum); }

/* ----- clusters: sort/filter toolbar ----- */
.clusters-toolbar {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 18px;
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
}
.clusters-toolbar input,
.clusters-toolbar select {
    width: auto;
    min-width: 160px;
    font-size: 12px;
}
.clusters-toolbar .toolbar-label {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--murky);
    margin-right: 4px;
}
.clusters-toolbar .pill-group {
    display: flex;
    gap: 4px;
    background: var(--mid);
    padding: 2px;
    border-radius: var(--radius);
    border: 1px solid var(--reef);
}
.clusters-toolbar .pill-group button {
    background: none;
    border: none;
    padding: 4px 10px;
    color: var(--tide);
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
}
.clusters-toolbar .pill-group button.active {
    background: var(--biolum);
    color: var(--abyss);
}
.clusters-toolbar .spacer { flex: 1; }

.cluster-block.hidden { display: none; }
.cluster-head {
    user-select: none;
}
.cluster-head .chev {
    color: var(--murky);
    font-size: 10px;
    margin-right: 4px;
    transition: transform 0.15s;
}
.cluster-block.collapsed .cluster-body { display: none; }
.cluster-block.collapsed .chev { transform: rotate(-90deg); display: inline-block; }

.cluster-head .cluster-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--tide);
}
.cluster-head .threat-bar {
    display: flex;
    gap: 2px;
    height: 6px;
    width: 80px;
    border-radius: 3px;
    overflow: hidden;
    background: var(--mid);
}
.cluster-head .threat-bar > span { flex: 1; }
.cluster-head .threat-bar > span.t-malicious  { background: var(--coral); }
.cluster-head .threat-bar > span.t-suspicious { background: var(--amber); }
.cluster-head .threat-bar > span.t-benign     { background: var(--kelp); }
.cluster-head .threat-bar > span.t-unknown    { background: var(--reef); }

.cluster-body .sample-row.sortable {
    cursor: pointer;
}

table.data th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
}
table.data th.sortable::after {
    content: " ▾";
    color: var(--murky);
    font-size: 9px;
    opacity: 0.4;
}
table.data th.sortable.sort-asc::after  { content: " ▲"; opacity: 1; color: var(--biolum); }
table.data th.sortable.sort-desc::after { content: " ▼"; opacity: 1; color: var(--biolum); }

/* ----- topbar: user widget ----- */
.user-widget {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-left: 1px solid var(--reef);
    margin-left: 4px;
}
.user-widget .avatar {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--biolum), var(--jelly));
    color: var(--abyss);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
}
.user-widget .uname {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--moonlight);
}
.user-widget .role-badge {
    font-family: var(--font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 1px 6px;
    border-radius: 3px;
}
.role-badge.admin   { background: rgba(255, 90, 120, 0.18); color: var(--coral); }
.role-badge.analyst { background: rgba(0, 229, 255, 0.18); color: var(--biolum); }
.role-badge.viewer  { background: rgba(147, 168, 194, 0.15); color: var(--tide); }
.user-widget .uname-link { color: inherit; }
.user-widget .uname-link:hover .uname { color: var(--biolum); }

/* ----- login page ----- */
.login-shell {
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.login-card {
    width: min(420px, 100%);
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
}
.login-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 100% 0%, rgba(0, 229, 255, 0.1), transparent 60%);
    pointer-events: none;
}
.login-card > * { position: relative; }
.login-card h1 {
    font-family: var(--font-display);
    font-size: 22px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.login-card h1 .accent {
    background: linear-gradient(90deg, var(--biolum), var(--jelly));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.login-card .subtitle {
    color: var(--tide);
    font-size: 12px;
    margin-bottom: 26px;
    font-family: var(--font-mono);
}
.login-card .field { margin-bottom: 14px; }
.login-card .btn-primary {
    width: 100%;
    padding: 11px;
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.login-card .login-error {
    background: rgba(255, 90, 120, 0.1);
    border: 1px solid rgba(255, 90, 120, 0.3);
    color: var(--coral);
    padding: 10px 12px;
    border-radius: var(--radius);
    font-size: 12px;
    margin-bottom: 16px;
}
.login-card .login-hint {
    margin-top: 18px;
    font-size: 11px;
    color: var(--murky);
    font-family: var(--font-mono);
    text-align: center;
    line-height: 1.6;
}

/* ----- users list ----- */
.user-row {
    padding: 14px 18px;
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    margin-bottom: 8px;
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    align-items: center;
}
.user-row.disabled { opacity: 0.5; }
.user-row .avatar {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, var(--biolum), var(--jelly));
    color: var(--abyss);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
}
.user-row .info .name { color: var(--moonlight); font-weight: 500; }
.user-row .info .meta { color: var(--murky); font-family: var(--font-mono); font-size: 11px; margin-top: 2px; }
.user-row .actions { display: flex; gap: 6px; }

/* ============================================================
   v5 additions — captcha modal, notes split, batch upload
   ============================================================ */

.captcha-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mid);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 8px;
}
.captcha-question {
    font-size: 22px;
    color: var(--moonlight);
    letter-spacing: 0.08em;
    background: var(--abyss);
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--reef);
    user-select: none;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.captcha-box input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 16px;
    text-align: center;
}
.captcha-box button {
    flex: none;
    width: 32px;
    padding: 6px 0;
    font-size: 14px;
}

/* ----- notes split ----- */
.notes-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
@media (max-width: 1280px) {
    .notes-split { grid-template-columns: 1fr; }
}
.notes-pane {
    background: var(--deep);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notes-pane.public { border-color: rgba(0, 229, 255, 0.2); }
.notes-pane-head {
    padding: 10px 14px;
    background: var(--mid);
    border-bottom: 1px solid var(--reef);
    display: flex;
    align-items: center;
    gap: 10px;
}
.notes-pane-head h3 {
    font-family: var(--font-display);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--moonlight);
}
.notes-pane-head .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: none;
}
.notes-pane-head .dot.internal { background: var(--coral); box-shadow: 0 0 8px var(--coral-glow); }
.notes-pane-head .dot.public   { background: var(--biolum); box-shadow: 0 0 8px var(--biolum-glow); }
.notes-pane textarea {
    border: none;
    border-radius: 0;
    background: var(--deep);
    min-height: 280px;
    flex: 1;
    resize: vertical;
}
.notes-pane textarea:focus { box-shadow: inset 0 0 0 2px rgba(0, 229, 255, 0.12); }

/* ----- batch upload modal: input[type=file] inside, file preview ----- */
#batch-progress {
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 12px 14px;
}

/* ============================================================
   v6 additions — feed widget, share buttons, more shares
   ============================================================ */

.feed-widget {
    background: linear-gradient(135deg, var(--mid) 0%, var(--deep) 100%);
    border: 1px solid var(--reef);
    border-radius: var(--radius-lg);
    padding: 22px 26px;
    margin-bottom: 32px;
    position: relative;
}
.feed-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 16px;
}
.feed-head h2 {
    font-family: var(--font-display);
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--moonlight);
    margin: 0;
}
.feed-controls .pill-group {
    background: var(--abyss);
    border: 1px solid var(--reef);
}

.feed-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--reef);
}
.feed-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.feed-stat .label {
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--murky);
}
.feed-stat .value {
    font-family: var(--font-mono);
    font-size: 22px;
    color: var(--moonlight);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.feed-chart {
    position: relative;
    height: 140px;
}
.feed-chart svg {
    width: 100%;
    height: 100%;
    display: block;
}
.feed-chart svg .feed-hover {
    cursor: pointer;
}
.feed-chart svg .feed-hover:hover ~ rect {
    /* not used; hover styling via JS not needed */
}
.feed-tooltip {
    position: absolute;
    top: 0;
    transform: translate(-50%, -110%);
    background: var(--abyss);
    border: 1px solid var(--reef);
    border-radius: var(--radius);
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--moonlight);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s;
    white-space: nowrap;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-width: 140px;
}
.feed-tooltip.show { opacity: 1; }
.feed-tooltip .d {
    font-family: var(--font-display);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--biolum);
    margin-bottom: 4px;
    border-bottom: 1px solid var(--reef);
    padding-bottom: 4px;
}
.feed-tooltip .row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 0;
}
.feed-tooltip .row b { color: var(--moonlight); font-weight: 500; }

/* ----- share button variations in cluster/yara/iim pages ----- */
.share-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}
.share-toolbar .share-status {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--biolum);
    padding: 4px 10px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.2);
    border-radius: var(--radius);
}
.share-toolbar .share-status.off {
    color: var(--murky);
    background: var(--mid);
    border-color: var(--reef);
}

/* ----- cluster share button in cluster head ----- */
.cluster-head .cluster-share {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    color: var(--biolum);
    padding: 3px 9px;
    font-family: var(--font-display);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 8px;
}
.cluster-head .cluster-share:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: var(--biolum);
}
.cluster-head .cluster-share.active {
    background: var(--biolum);
    color: var(--abyss);
    border-color: var(--biolum);
}

.mantis-icon {
  width: 15%;
  max-width: 90px;   /* optional, damit es nicht riesig wird */
  min-width: 32px;   /* optional, damit es nicht zu klein wird */
}

.mantis-icon svg {
  width: 100%;
  height: auto;
  display: block;
}

.brand-name b {
    font-weight: 400;
    color: #67e8f9;
}

/* ============================================================
   MOBILE RESPONSIVE — phone & small-tablet overrides
   added 2026-05 · purely additive, kept at end of file so it
   wins on equal specificity and is easy to locate/remove
   ============================================================ */

/* ---- burger toggle (visible only on small screens) ---- */
.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--reef);
    color: var(--moonlight);
    width: 40px;
    height: 36px;
    border-radius: var(--radius);
    cursor: pointer;
    padding: 0;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
}
.nav-toggle:hover { border-color: var(--biolum); color: var(--biolum); }
.nav-toggle .bars {
    display: inline-block;
    width: 18px; height: 2px;
    background: currentColor;
    position: relative;
}
.nav-toggle .bars::before,
.nav-toggle .bars::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 2px;
    background: currentColor;
}
.nav-toggle .bars::before { top: -6px; }
.nav-toggle .bars::after  { top:  6px; }

/* ============================================================
   <= 980px — large tablet / landscape phone
   ============================================================ */
@media (max-width: 980px) {
    /* topbar: tighten + hide decorative chrome */
    .topbar { padding: 0 14px; gap: 8px; }
    .brand-tag { display: none; }
    .depth-indicator { display: none; }

    /* main padding */
    .main { padding: 22px 18px; }

    /* show burger, hide horizontal nav by default */
    .nav-toggle { display: inline-flex; order: 99; }
    .main-nav {
        position: absolute;
        top: var(--header-h);
        left: 0;
        right: 0;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 8px 12px 12px;
        background: linear-gradient(180deg, rgba(7,16,31,0.98), rgba(7,16,31,0.96));
        border-bottom: 1px solid var(--reef);
        backdrop-filter: blur(10px);
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        transform: translateY(-8px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease, transform 0.18s ease;
        z-index: 49;
    }
    .topbar.nav-open .main-nav {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }
    .main-nav a {
        padding: 12px 14px;
        font-size: 13px;
        border-radius: var(--radius);
    }
    .main-nav a.active { box-shadow: inset 2px 0 0 var(--biolum); }

    /* topbar-actions: keep compact */
    .topbar-actions { margin-left: auto; gap: 8px; }
    .user-widget .uname { display: none; }
    .user-widget .role-badge { display: none; }
}

/* ============================================================
   <= 768px — main phone breakpoint
   ============================================================ */
@media (max-width: 768px) {
    :root { --header-h: 54px; }

    /* page headers stack */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .page-header h1 { font-size: 22px; }
    .page-header-actions {
        width: 100%;
        flex-wrap: wrap;
    }
    .page-header-actions .btn { flex: 1 1 auto; justify-content: center; }

    /* hero / sections */
    .hero { padding: 24px 18px; gap: 22px; }
    .hero h1 { font-size: 26px; }
    .hero p { font-size: 14px; }

    /* main padding */
    .main { padding: 18px 14px; }

    /* collapse every multi-column grid to a single column */
    .workspace,
    .yara-grid,
    .iim-editor,
    .docker-grid,
    .api-docs,
    .notes-split,
    .project-grid,
    .actor-grid,
    .iim-categories,
    .profile-grid,
    .cards,
    .stats-grid,
    .feed-stats,
    .capabilities {
        grid-template-columns: 1fr !important;
    }

    /* hash rows, string rows, run rows, disasm rows, user rows,
       api-key rows — collapse the fixed-px column lists to stacks */
    .hash-row,
    .string-row,
    .disasm-row,
    .run-row,
    .user-row,
    .api-key-row,
    .yara-rule-row,
    .cluster-head {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* sidebar (project workspace) is no longer fixed-width */
    .sidebar {
        position: static;
        width: 100%;
    }

    /* panels: reduce internal padding */
    .panel-header { padding: 10px 12px; flex-wrap: wrap; gap: 8px; }
    .panel-toolbar { flex-wrap: wrap; gap: 6px; }
    .panel-body { padding: 12px; }

    /* tabs: scroll horizontally instead of wrapping awkwardly */
    .tab-list,
    .subtabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .tab-list::-webkit-scrollbar,
    .subtabs::-webkit-scrollbar { height: 4px; }
    .tab-list button,
    .subtabs button {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* modals: full-width minus small gutter */
    .modal {
        width: calc(100vw - 24px);
        padding: 18px 18px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
    .modal-large { width: calc(100vw - 24px); }
    .modal-actions { flex-direction: column-reverse; gap: 8px; }
    .modal-actions .btn { width: 100%; justify-content: center; }

    /* forms: prevent iOS zoom on focus (16px minimum) + full width */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="tel"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* buttons: enlarge tap targets, allow full-width grouping */
    .btn { padding: 10px 16px; min-height: 40px; }
    .btn-sm { padding: 8px 12px; min-height: 36px; font-size: 11px; }

    /* the one data table (shared_cluster): make horizontally scrollable */
    table.data,
    .table-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table.data thead,
    table.data tbody,
    table.data tr { display: table; width: max-content; min-width: 100%; table-layout: auto; }

    /* chain visualisation (IIM): allow horizontal scroll instead of forcing overflow */
    .chain-viz,
    .chain-flow {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .chain-node { min-width: 140px; }

    /* hex view: shrink font + allow scroll */
    .hex-view {
        font-size: 11px;
        overflow-x: auto;
    }
    .hex-line { white-space: nowrap; }

    /* JSON view */
    .json-view {
        font-size: 12px;
        overflow-x: auto;
        word-break: break-word;
    }

    /* api-docs sidebar becomes a top section */
    .api-docs-sidebar {
        position: static;
        max-height: none;
        border-right: none;
        border-bottom: 1px solid var(--reef);
        padding-bottom: 12px;
        margin-bottom: 16px;
    }
    .api-endpoint-head { flex-wrap: wrap; gap: 8px; }
    .api-path { word-break: break-all; font-size: 12px; }
    .api-example {
        overflow-x: auto;
        font-size: 11px;
    }

    /* shared footer */
    .shared-footer .footer-inner {
        grid-template-columns: 1fr !important;
        text-align: center;
        gap: 12px;
    }

    /* shared banner */
    .shared-banner { padding: 12px 14px; font-size: 13px; }

    /* upload zone */
    .upload-zone { padding: 24px 16px; }

    /* toasts: full width with side gutter */
    .toast-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }
    .toast { max-width: none; width: 100%; }

    /* captcha box wraps */
    .captcha-box {
        flex-wrap: wrap;
        gap: 8px;
    }
    .captcha-question { width: 100%; }

    /* login card breathes */
    .login-card { width: calc(100vw - 28px); padding: 24px 20px; }

    /* feed widget */
    .feed-chart { height: 160px; }
    .feed-head { flex-wrap: wrap; gap: 8px; }

    /* share toolbar */
    .share-toolbar { flex-wrap: wrap; gap: 8px; }
    .share-toolbar .btn { flex: 1 1 calc(50% - 4px); }

    /* clusters toolbar */
    .clusters-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .clusters-toolbar > * { flex: 1 1 auto; }
}

/* ============================================================
   <= 480px — small phone tightening
   ============================================================ */
@media (max-width: 480px) {
    .brand { font-size: 15px; gap: 8px; }
    .brand-mark { width: 24px; height: 24px; }

    .page-header h1 { font-size: 19px; }
    .hero h1 { font-size: 22px; }
    .hero-eyebrow { font-size: 10px; letter-spacing: 0.18em; }

    .main { padding: 14px 10px; }

    .stat-card { padding: 14px; }
    .card { padding: 14px; }

    .modal { padding: 16px 14px; }
    .modal h3 { font-size: 15px; }

    /* keep avatar visible, drop everything else from user widget */
    .user-widget .avatar { width: 28px; height: 28px; font-size: 12px; }

    /* further compact tab buttons */
    .tab-list button,
    .subtabs button { padding: 6px 10px; font-size: 11px; }

    /* full-width primary actions */
    .page-header-actions .btn { width: 100%; }

    /* tighter cluster/api section headers */
    .api-method { font-size: 10px; padding: 2px 6px; }
}

/* ============================================================
   touch & hover: disable hover-only effects on touch devices
   so they don't get "stuck" after a tap
   ============================================================ */
@media (hover: none) {
    .btn:hover { background: var(--mid); border-color: var(--reef); color: var(--moonlight); }
    .main-nav a:hover { background: transparent; color: var(--tide); }
    .main-nav a.active { color: var(--biolum); background: var(--mid); }
}

/* prevent unintended horizontal scroll on the whole page */
html, body { max-width: 100%; overflow-x: hidden; }