:root {
    --labs-blue: #1463ff;
    --labs-cyan: #00b8f5;
    --labs-ink: #10213d;
    --labs-muted: #66758c;
    --labs-bg: #f4f7fc;
    --labs-panel: rgba(255, 255, 255, .88);
    --labs-border: rgba(44, 91, 170, .15);
    --labs-shadow: 0 20px 60px rgba(25, 60, 120, .12);
}

[data-bs-theme="dark"] {
    --labs-ink: #edf4ff;
    --labs-muted: #a7b7cc;
    --labs-bg: #07111f;
    --labs-panel: rgba(13, 28, 49, .88);
    --labs-border: rgba(102, 160, 255, .2);
    --labs-shadow: 0 22px 70px rgba(0, 0, 0, .4);
}

html { scroll-behavior: smooth; }
body {
    color: var(--labs-ink);
    background:
        radial-gradient(circle at 9% 4%, rgba(20, 99, 255, .12), transparent 25rem),
        radial-gradient(circle at 90% 18%, rgba(0, 184, 245, .1), transparent 28rem),
        var(--labs-bg);
    min-height: 100vh;
}
a { color: var(--labs-blue); }
.skip-link { position: fixed; z-index: 1100; top: 1rem; left: 1rem; background: #fff; padding: .75rem; }
.labs-navbar { background: color-mix(in srgb, var(--labs-panel) 92%, transparent); backdrop-filter: blur(18px); border-bottom: 1px solid var(--labs-border); }
.brand-orb, .tool-icon {
    display: inline-grid; place-items: center; flex: 0 0 auto;
    width: 3rem; height: 3rem; border-radius: 1rem;
    color: #fff; background: linear-gradient(135deg, var(--labs-blue), var(--labs-cyan));
    box-shadow: 0 10px 25px rgba(20, 99, 255, .25);
}
.brand-orb { width: 2.5rem; height: 2.5rem; border-radius: .8rem; }
.tool-icon.large { width: 4.5rem; height: 4.5rem; border-radius: 1.35rem; font-size: 1.8rem; }
.labs-hero { overflow: hidden; }
.py-lg-6 { padding-block: 6.5rem !important; }
.eyebrow, .step-label { color: var(--labs-blue); font-weight: 700; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.hero-visual {
    position: relative; min-height: 27rem; border: 1px solid var(--labs-border); border-radius: 2rem;
    background: linear-gradient(145deg, rgba(20,99,255,.12), rgba(0,184,245,.04)), var(--labs-panel);
    box-shadow: var(--labs-shadow); overflow: hidden;
}
.scan-grid { position: absolute; inset: 0; opacity: .35; background-image: linear-gradient(var(--labs-border) 1px, transparent 1px), linear-gradient(90deg, var(--labs-border) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000, transparent); }
.hero-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-visual path { fill: none; stroke: var(--labs-blue); stroke-width: 3; stroke-dasharray: 10 8; opacity: .5; animation: dash 6s linear infinite; }
.evidence-node { position: absolute; z-index: 2; display: grid; place-items: center; gap: .35rem; width: 7.5rem; height: 7.5rem; border-radius: 1.5rem; background: var(--labs-panel); border: 1px solid var(--labs-border); box-shadow: var(--labs-shadow); font-weight: 700; }
.evidence-node i { color: var(--labs-blue); font-size: 2rem; }
.node-image { left: 8%; top: 13%; }.node-network { left: 8%; bottom: 13%; }.node-result { right: 8%; top: calc(50% - 3.75rem); }
@keyframes dash { to { stroke-dashoffset: -72; } }
.section-heading { max-width: 52rem; }
.section-heading h2 { font-size: clamp(2rem, 4vw, 3.3rem); margin-top: .6rem; }
.category-card, .tool-card {
    display: flex; gap: 1.25rem; padding: 2rem; color: inherit; text-decoration: none;
    border: 1px solid var(--labs-border); border-radius: 1.4rem; background: var(--labs-panel);
    box-shadow: 0 12px 35px rgba(25,60,120,.07); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.category-card:hover, .tool-card:hover { transform: translateY(-5px); border-color: rgba(20,99,255,.5); box-shadow: var(--labs-shadow); }
.category-card h3 { font-size: 1.65rem; }.category-card p, .tool-card p { color: var(--labs-muted); }
.tool-card { flex-direction: column; }.tool-card-body { display: block; }.link-arrow { color: var(--labs-blue); font-weight: 700; }
.privacy-banner, .interpretation-card {
    display: flex; gap: 1.25rem; align-items: flex-start; padding: 2rem; border-radius: 1.4rem;
    background: linear-gradient(135deg, rgba(20,99,255,.13), rgba(0,184,245,.08)); border: 1px solid rgba(20,99,255,.2);
}
.privacy-banner > i { font-size: 2.2rem; color: var(--labs-blue); }
.category-header, .tool-heading { display: flex; align-items: center; gap: 1.4rem; padding-block: 1rem; }
.category-header h1, .tool-heading h1 { font-size: clamp(2rem, 4vw, 3.7rem); margin: 0; }
.labs-panel {
    padding: 1.5rem; border: 1px solid var(--labs-border); border-radius: 1.4rem;
    background: var(--labs-panel); box-shadow: 0 14px 45px rgba(25,60,120,.08); backdrop-filter: blur(16px);
}
.privacy-chip { display: inline-flex; align-items: center; gap: .45rem; padding: .42rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.privacy-chip.local { color: #087443; background: rgba(25,135,84,.12); }.privacy-chip.server { color: #9c5b00; background: rgba(255,193,7,.18); }
.drop-zone { min-height: 15rem; display: grid; place-items: center; align-content: center; gap: .5rem; padding: 2rem; text-align: center; cursor: pointer; border: 2px dashed rgba(20,99,255,.35); border-radius: 1.2rem; background: rgba(20,99,255,.04); transition: .2s ease; }
.drop-zone:hover, .drop-zone.dragging { border-color: var(--labs-blue); background: rgba(20,99,255,.1); }
.drop-zone > i { font-size: 3rem; color: var(--labs-blue); }.drop-zone span { color: var(--labs-muted); font-size: .9rem; }
.forensic-textarea { resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.visual-panel { min-height: 38rem; }
.visual-actions { display: flex; gap: .35rem; }
.visual-stage { position: relative; min-height: 31rem; display: grid; place-items: center; overflow: auto; border-radius: 1rem; background: repeating-conic-gradient(rgba(80,100,130,.06) 0 25%, transparent 0 50%) 50% / 24px 24px; border: 1px solid var(--labs-border); }
.empty-visual { text-align: center; color: var(--labs-muted); }.empty-visual i { font-size: 4rem; display: block; margin-bottom: .8rem; color: rgba(20,99,255,.45); }
.visual-stage canvas, .visual-stage img { max-width: 100%; height: auto; border-radius: .7rem; transform: scale(var(--visual-zoom, 1)); transform-origin: center; transition: transform .15s ease; }
.visual-stage.fullscreen { background: var(--labs-bg); padding: 2rem; }
.split-view { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; width: 100%; padding: 1rem; align-items: start; }
.visual-card { min-width: 0; padding: 1rem; border-radius: 1rem; background: var(--labs-panel); border: 1px solid var(--labs-border); }
.visual-card h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: var(--labs-muted); }
.visual-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; width: calc(100% - 2rem); margin: 1rem; padding: .8rem; border-radius: .9rem; border: 1px solid var(--labs-border); background: var(--labs-panel); }
.visual-controls .form-label { display: flex; justify-content: space-between; gap: 1rem; width: 100%; margin: 0; font-weight: 600; }
.visual-controls .form-range { flex: 1 1 18rem; margin: 0; }
.control-value { color: var(--labs-blue); font-weight: 700; }
.forensic-map { width: 100%; min-height: 14rem; margin-top: 1rem; border-radius: .8rem; background: linear-gradient(135deg, rgba(20,99,255,.08), rgba(0,184,245,.1)); }
.forensic-map .map-grid line, .forensic-map .map-line { stroke: rgba(20,99,255,.15); stroke-width: 1; }
.forensic-map circle { fill: #ef3340; stroke: #fff; stroke-width: 4; }
.forensic-map text { fill: var(--labs-ink); font: 600 16px system-ui; }
.meta-item.copied { border-color: var(--labs-blue); box-shadow: 0 0 0 .2rem rgba(20,99,255,.15); }
.meta-grid, .indicator-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(12rem,1fr)); gap: .75rem; width: 100%; }
.meta-item, .indicator-item { padding: .9rem; border-radius: .85rem; border: 1px solid var(--labs-border); background: color-mix(in srgb, var(--labs-panel) 75%, transparent); }
.meta-item span, .indicator-item span { display: block; font-size: .75rem; color: var(--labs-muted); text-transform: uppercase; letter-spacing: .05em; }.meta-item strong, .indicator-item strong { display: block; overflow-wrap: anywhere; }
.status-orb { display: grid; place-items: center; width: 4rem; height: 4rem; flex: 0 0 auto; border-radius: 50%; font-size: 1.55rem; }
.status-badge { display: inline-flex; padding: .35rem .7rem; border-radius: 999px; font-weight: 700; font-size: .82rem; }
.normal { color: #087443; background: rgba(25,135,84,.13); }.warning { color: #9c5b00; background: rgba(255,193,7,.18); }.suspicious { color: #b42318; background: rgba(220,53,69,.14); }
.timeline { position: relative; display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; width: 100%; padding: 2rem 1rem; }
.timeline::before { content: ""; position: absolute; left: 2rem; right: 2rem; top: 3rem; height: 2px; background: var(--labs-border); }
.timeline-node { position: relative; min-width: 11rem; padding-top: 2.8rem; }.timeline-node::before { content: ""; position: absolute; top: .58rem; left: 1rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--labs-blue); box-shadow: 0 0 0 .45rem rgba(20,99,255,.13); }
.network-graph { width: 100%; min-height: 28rem; }
.network-graph line, .network-graph path { stroke: rgba(20,99,255,.5); stroke-width: 2; }.network-graph circle { fill: var(--labs-blue); }.network-graph text { fill: var(--labs-ink); font: 13px system-ui; }
.labs-footer { background: var(--labs-panel); }.labs-footer li { margin-bottom: .45rem; }.labs-footer a { text-decoration: none; }
.legal-content { max-width: 58rem; margin-inline: auto; }.legal-content h2 { margin-top: 2rem; }

@media (max-width: 767.98px) {
    .py-lg-6 { padding-block: 3rem !important; }
    .hero-visual { min-height: 22rem; }.evidence-node { width: 6rem; height: 6rem; }.node-result { top: calc(50% - 3rem); }
    .category-header, .tool-heading, .interpretation-card, .privacy-banner { flex-direction: column; }
    .split-view { grid-template-columns: 1fr; }
    .visual-stage { min-height: 24rem; }
    .visual-actions .btn { padding-inline: .55rem; }.visual-actions .btn:last-child { font-size: 0; }.visual-actions .btn:last-child i { font-size: 1rem; margin: 0 !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
    .labs-navbar, .labs-footer, aside, .visual-actions, [data-report], .accordion { display: none !important; }
    body { background: #fff; }.labs-panel, .interpretation-card { box-shadow: none; border: 1px solid #ccc; }
}