:root {
    color-scheme: dark;
    --canvas-bg: #0B0F17;
    --canvas-text: #f8fafc;
    --muted-text: rgba(255,255,255,.72);
    --faint-text: rgba(255,255,255,.45);
    --panel-bg: rgba(255,255,255,.03);
    --panel-border: rgba(255,255,255,.08);
    --panel-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
    --input-bg: rgba(0,0,0,.2);
    --grid-line: rgba(255,255,255,.03);
}

html[data-theme="light"] {
    color-scheme: light;
    --canvas-bg: #eef4fb;
    --canvas-text: #0f172a;
    --muted-text: rgba(15,23,42,.74);
    --faint-text: rgba(15,23,42,.48);
    --panel-bg: rgba(255,255,255,.68);
    --panel-border: rgba(15,23,42,.08);
    --panel-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --input-bg: rgba(255,255,255,.86);
    --grid-line: rgba(15,23,42,.05);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
}

.cyber-grid {
    background-image:
        linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: 78px 78px;
    mask-image: radial-gradient(circle at center, rgba(0,0,0,1), transparent 82%);
}

.glass-panel {
    background: var(--panel-bg);
    backdrop-filter: blur(18px);
    box-shadow: var(--panel-shadow);
}

.glass-button {
    background: var(--panel-bg);
    backdrop-filter: blur(14px);
}

.glass-card {
    background: var(--panel-bg);
    backdrop-filter: blur(18px);
    border: 1px solid var(--panel-border);
    box-shadow: 0 18px 50px rgba(0,0,0,.24);
    position: relative;
    overflow: hidden;
}

.glass-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(125deg, color-mix(in srgb, var(--theme-blue, #4cc9f0) 16%, transparent), color-mix(in srgb, var(--theme-purple, #7209b7) 6%, transparent), color-mix(in srgb, var(--theme-pink, #f72585) 14%, transparent));
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.glass-card:hover::after {
    opacity: 1;
}

.dashboard-widget {
    position: relative;
    display: grid;
    gap: .85rem;
}

.dashboard-widget-handle {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    align-self: flex-start;
    border: 1px solid var(--panel-border);
    border-radius: 999px;
    background: rgba(255,255,255,.03);
    padding: .65rem .95rem;
    cursor: grab;
    user-select: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.dashboard-widget-handle::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background:
        radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), transparent 45%),
        radial-gradient(circle at center, rgba(76,201,240,.42) 0, rgba(76,201,240,.18) 48%, transparent 52%);
    box-shadow: 0 0 18px rgba(76,201,240,.18);
}

.dashboard-widget-handle:hover {
    border-color: rgba(76,201,240,.24);
    box-shadow: 0 0 28px rgba(76,201,240,.08);
    transform: translateY(-1px);
}

.dashboard-widget-kicker {
    color: var(--faint-text);
    font-size: .62rem;
    letter-spacing: .28em;
    text-transform: uppercase;
}

.dashboard-widget-label {
    color: var(--canvas-text);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.dashboard-widget.drag-armed .dashboard-widget-handle,
.dashboard-widget.widget-drop-target .dashboard-widget-handle {
    border-color: rgba(76,201,240,.28);
    box-shadow: 0 0 30px rgba(76,201,240,.12);
}

.dashboard-widget.widget-dragging {
    opacity: .54;
}

.dashboard-widget.widget-dragging .dashboard-widget-handle {
    cursor: grabbing;
}

.metric-ring {
    background:
        radial-gradient(circle at center, rgba(11,15,23,1) 57%, transparent 58%),
        conic-gradient(var(--theme-blue, #4cc9f0) 0deg, var(--theme-purple, #7209b7) 190deg, var(--theme-pink, #f72585) 320deg, rgba(255,255,255,.08) 320deg 360deg);
}

.semi-donut {
    width: 280px;
    height: 140px;
    border-top-left-radius: 280px;
    border-top-right-radius: 280px;
    border: 18px solid var(--panel-border);
    border-bottom: 0;
    position: relative;
    overflow: hidden;
}

.semi-donut::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-top-left-radius: 280px;
    border-top-right-radius: 280px;
    border: 18px solid transparent;
    border-top-color: var(--theme-blue, #4cc9f0);
    border-left-color: var(--theme-purple, #7209b7);
    border-right-color: var(--theme-pink, #f72585);
    border-bottom: 0;
    transform: rotate(-18deg);
}

.semi-donut::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 180px;
    height: 90px;
    transform: translateX(-50%);
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
    background: var(--canvas-bg);
}

.count-up {
    font-variant-numeric: tabular-nums;
}

.bubble-node {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.1);
    backdrop-filter: blur(16px);
    animation: floaty 6s ease-in-out infinite;
}

.table-shell tr:not(:last-child) {
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.status-pill {
    border: 1px solid rgba(255,255,255,.08);
}

.report-shell {
    display: grid;
    gap: 1.5rem;
}

.report-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .report-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.risk-ring {
    --progress: 0%;
    --ring-color: var(--theme-blue, #4cc9f0);
    width: 112px;
    height: 112px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, rgba(11,15,23,1) 58%, transparent 59%),
        conic-gradient(var(--ring-color) var(--progress), rgba(255,255,255,.08) 0);
    box-shadow: 0 0 28px rgba(76,201,240,.16);
}

.risk-ring span {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.15rem;
    color: #fff;
}

.metrics-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.metric-card {
    border: 1px solid var(--panel-border);
    border-radius: 1.2rem;
    background: rgba(255,255,255,.03);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.metric-card strong {
    color: var(--canvas-text);
    font-size: 1.05rem;
}

.metric-label {
    font-size: .7rem;
    color: var(--faint-text);
    letter-spacing: .24em;
    text-transform: uppercase;
}

.tag-pill {
    border-radius: 999px;
    border: 1px solid rgba(76,201,240,.18);
    background: rgba(76,201,240,.08);
    color: rgba(220, 244, 255, .92);
    font-size: .72rem;
    letter-spacing: .18em;
    padding: .7rem .95rem;
    text-transform: uppercase;
}

.flag-item {
    border-radius: 1rem;
    border: 1px solid rgba(251, 191, 36, .15);
    background: rgba(251, 191, 36, .08);
    color: var(--muted-text);
    padding: .9rem 1rem;
    font-size: .92rem;
}

.detail-list {
    display: grid;
    gap: .75rem;
}

.detail-item {
    border-radius: 1rem;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,.025);
    padding: .95rem 1rem;
}

.detail-item strong {
    display: block;
    color: var(--canvas-text);
    margin-bottom: .35rem;
    font-size: .82rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.detail-item span {
    color: var(--muted-text);
    font-size: .92rem;
    word-break: break-word;
}

.intel-note {
    border-radius: 1rem;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,.03);
    padding: .9rem 1rem;
    color: var(--muted-text);
    font-size: .9rem;
}

.action-row {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 1rem;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,.04);
    padding: .9rem 1.2rem;
    color: rgba(255,255,255,.88);
    font-size: .88rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.action-button:hover {
    transform: translateY(-1px);
    border-color: rgba(76,201,240,.22);
    box-shadow: 0 0 28px rgba(76,201,240,.12);
}

.timeline-list {
    display: grid;
    gap: 1rem;
}

.timeline-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border-radius: 1.25rem;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,.025);
    padding: 1rem;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.timeline-item:hover {
    transform: translateY(-1px);
    border-color: rgba(76,201,240,.2);
    box-shadow: 0 0 26px rgba(76,201,240,.08);
}

.timeline-dot {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    margin-top: .45rem;
    flex: 0 0 auto;
    box-shadow: 0 0 20px currentColor;
}

.timeline-dot.scan {
    color: #4cc9f0;
    background: #4cc9f0;
}

.timeline-dot.alert {
    color: #f72585;
    background: #f72585;
}

.timeline-dot.takedown {
    color: #f59e0b;
    background: #f59e0b;
}

.timeline-dot.monitor {
    color: #34d399;
    background: #34d399;
}

.geo-row {
    border-radius: 1rem;
    border: 1px solid var(--panel-border);
    background: rgba(255,255,255,.025);
    padding: .95rem 1rem;
}

.geo-map-shell {
    border-radius: 1.5rem;
    border: 1px solid var(--panel-border);
    background:
        radial-gradient(circle at top left, rgba(76,201,240,.12), transparent 28%),
        radial-gradient(circle at bottom right, rgba(247,37,133,.08), transparent 24%),
        rgba(255,255,255,.02);
    overflow: hidden;
    padding: 1rem;
}

.geo-map-stage {
    position: relative;
    min-height: 250px;
    border-radius: 1.25rem;
    background:
        linear-gradient(180deg, rgba(76,201,240,.05), rgba(11,15,23,.2)),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px);
    background-size: auto, 58px 58px, 58px 58px;
}

.geo-continent {
    position: absolute;
    background: linear-gradient(135deg, rgba(76,201,240,.12), rgba(114,9,183,.08));
    border: 1px solid rgba(255,255,255,.06);
    filter: drop-shadow(0 0 18px rgba(76,201,240,.08));
}

.continent-na { left: 8%; top: 18%; width: 23%; height: 23%; border-radius: 40% 46% 38% 44%; transform: rotate(-8deg); }
.continent-sa { left: 24%; top: 47%; width: 12%; height: 27%; border-radius: 42% 38% 46% 50%; transform: rotate(12deg); }
.continent-eu { left: 44%; top: 19%; width: 13%; height: 12%; border-radius: 44% 40% 38% 42%; }
.continent-af { left: 48%; top: 38%; width: 14%; height: 26%; border-radius: 40% 44% 48% 46%; }
.continent-as { left: 58%; top: 18%; width: 28%; height: 31%; border-radius: 36% 42% 38% 44%; transform: rotate(4deg); }
.continent-au { left: 80%; top: 68%; width: 11%; height: 13%; border-radius: 42% 38% 44% 40%; }

.geo-map-point {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.14);
    display: grid;
    place-items: center;
    backdrop-filter: blur(10px);
    cursor: default;
    box-shadow: 0 0 0 0 rgba(76,201,240,.28);
    animation: geoPulse 2.8s ease-in-out infinite;
}

.geo-map-point span {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-size: .6rem;
    letter-spacing: .18em;
    color: rgba(255,255,255,.72);
    text-transform: uppercase;
    white-space: nowrap;
}

.geo-map-point.low {
    background: rgba(76,201,240,.16);
    box-shadow: 0 0 28px rgba(76,201,240,.22);
}

.geo-map-point.medium {
    background: rgba(251,191,36,.18);
    box-shadow: 0 0 28px rgba(251,191,36,.2);
}

.geo-map-point.high {
    background: rgba(247,37,133,.18);
    box-shadow: 0 0 30px rgba(247,37,133,.28);
}

.heatmap-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .55rem;
}

.heatmap-cell {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: .7rem;
    border: 1px solid rgba(255,255,255,.06);
    background: rgba(255,255,255,.04);
}

.heatmap-cell.level-1 {
    background: rgba(76,201,240,.18);
}

.heatmap-cell.level-2 {
    background: linear-gradient(135deg, rgba(76,201,240,.28), rgba(114,9,183,.24));
}

.heatmap-cell.level-3 {
    background: linear-gradient(135deg, rgba(114,9,183,.36), rgba(247,37,133,.28));
}

.heatmap-cell.level-4 {
    background: linear-gradient(135deg, rgba(247,37,133,.48), rgba(251,146,60,.34));
    box-shadow: 0 0 18px rgba(247,37,133,.14);
}

.widget-group {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

.widget-chip {
    display: inline-flex;
    align-items: center;
    gap: .75rem;
    border-radius: 1rem;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.03);
    padding: .85rem 1rem;
}

.widget-chip strong {
    color: #fff;
    font-size: 1rem;
}

html[data-theme="light"] body {
    background: var(--canvas-bg) !important;
    color: var(--canvas-text);
}

html[data-theme="light"] .pointer-events-none > div:first-child {
    background: radial-gradient(circle at top left, rgba(76,201,240,.12), transparent 28%), radial-gradient(circle at top right, rgba(247,37,133,.08), transparent 22%), radial-gradient(circle at bottom, rgba(114,9,183,.1), transparent 35%), #eef4fb !important;
}

html[data-theme="light"] .glass-card,
html[data-theme="light"] .glass-panel,
html[data-theme="light"] .glass-button,
html[data-theme="light"] .dashboard-widget-handle,
html[data-theme="light"] .metric-card,
html[data-theme="light"] .detail-item,
html[data-theme="light"] .timeline-item,
html[data-theme="light"] .geo-row,
html[data-theme="light"] .widget-chip,
html[data-theme="light"] .intel-note {
    box-shadow: var(--panel-shadow);
}

html[data-theme="light"] [class*="text-white"] {
    color: var(--canvas-text) !important;
}

html[data-theme="light"] [class*="text-white/"],
html[data-theme="light"] [class*="text-slate-100"] {
    color: var(--muted-text) !important;
}

html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
    background: var(--input-bg) !important;
    color: var(--canvas-text) !important;
    border-color: var(--panel-border) !important;
}

html[data-theme="light"] input::placeholder,
html[data-theme="light"] textarea::placeholder {
    color: var(--faint-text) !important;
}

html[data-theme="light"] .risk-ring span,
html[data-theme="light"] .widget-chip strong {
    color: var(--canvas-text) !important;
}

.copy-state {
    color: #34d399;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.14);
    border-radius: 999px;
}

@keyframes geoPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,201,240,.12); }
    50% { box-shadow: 0 0 0 8px rgba(76,201,240,0); }
}

@media print {
    .glass-panel,
    aside,
    [data-dashboard-print],
    a[href*="api/export_dashboard.php"] {
        display: none !important;
    }

    body {
        background: #0B0F17;
    }

    .glass-card,
    .timeline-item,
    .metric-card,
    .detail-item,
    .geo-row {
        box-shadow: none !important;
        border-color: rgba(255,255,255,.2) !important;
        break-inside: avoid;
    }
}