html { background: #f4f6f8; }
.dark html { background: #0b1220; }

.dc-bg {
    isolation: isolate;
    background: transparent;
}

.dc-scene {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background:
        radial-gradient(900px 480px at 0% -10%, rgba(148, 163, 184, 0.22), transparent 55%),
        radial-gradient(720px 420px at 100% 110%, rgba(203, 213, 225, 0.35), transparent 52%),
        linear-gradient(180deg, #f1f4f8 0%, #f8fafc 46%, #eef2f6 100%);
}
.dark .dc-scene {
    background:
        radial-gradient(880px 480px at 0% -10%, rgba(51, 65, 85, 0.45), transparent 55%),
        radial-gradient(720px 420px at 100% 110%, rgba(30, 41, 59, 0.5), transparent 52%),
        linear-gradient(180deg, #0b1220 0%, #0f172a 48%, #0b1220 100%);
}

.dc-wash {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
}
.dc-wash-a {
    width: 36rem;
    height: 24rem;
    left: -14%;
    top: -20%;
    background: rgba(100, 116, 139, 0.16);
    animation: dc-drift-a 28s ease-in-out infinite;
}
.dc-wash-b {
    width: 32rem;
    height: 22rem;
    right: -16%;
    bottom: -18%;
    background: rgba(148, 163, 184, 0.14);
    animation: dc-drift-b 32s ease-in-out infinite;
}
.dc-wash-c { display: none; }
.dark .dc-wash-a { background: rgba(71, 85, 105, 0.28); }
.dark .dc-wash-b { background: rgba(51, 65, 85, 0.22); }

.dc-sheen {
    position: absolute;
    inset: -20%;
    background: linear-gradient(
        118deg,
        transparent 40%,
        rgba(255, 255, 255, 0.28) 50%,
        transparent 60%
    );
    animation: dc-sheen 22s ease-in-out infinite;
}
.dark .dc-sheen {
    background: linear-gradient(
        118deg,
        transparent 40%,
        rgba(255, 255, 255, 0.04) 50%,
        transparent 60%
    );
}

@keyframes dc-drift-a {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(3%, 5%); }
}
@keyframes dc-drift-b {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-4%, -3%); }
}
@keyframes dc-sheen {
    0%, 100% { transform: translateX(-5%); opacity: 0.45; }
    50% { transform: translateX(5%); opacity: 0.75; }
}

@media (prefers-reduced-motion: reduce) {
    .dc-wash,
    .dc-sheen { animation: none !important; }
}

.glass-panel {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(148, 163, 184, 0.25);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}
.dark .glass-panel {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.12);
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.35);
}

.guide-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    text-decoration: none;
}
.guide-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 40px rgba(15, 23, 42, 0.12);
}
.dark .guide-card:hover {
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);
}
@media (prefers-reduced-motion: reduce) {
    .guide-card:hover { transform: none; }
}

.scan-line {
    height: 2px;
    background: linear-gradient(to right, transparent, #3b82f6, transparent);
    position: absolute;
    width: 100%;
    animation: dc-scan 3s infinite linear;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
}
@keyframes dc-scan {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

.dc-tone-ok { color: #15803d; }
.dark .dc-tone-ok { color: #34d399; }
.dc-tone-mid { color: #b45309; }
.dark .dc-tone-mid { color: #fbbf24; }
.dc-tone-hi { color: #b91c1c; }
.dark .dc-tone-hi { color: #f87171; }

.dc-prob-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.dc-prob-code {
    width: 3.25rem;
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: #64748b;
}
.dark .dc-prob-code { color: #94a3b8; }
.dc-prob-code.is-winner { font-weight: 800; }
.dc-prob-track {
    flex: 1;
    height: 0.375rem;
    border-radius: 999px;
    overflow: hidden;
    background: #e2e8f0;
}
.dark .dc-prob-track { background: #334155; }
.dc-prob-fill {
    height: 100%;
    border-radius: 999px;
    min-width: 0;
}
.dc-prob-fill-nilm { background: #10b981; }
.dc-prob-fill-asc { background: #f59e0b; }
.dc-prob-fill-lsil { background: #f97316; }
.dc-prob-fill-hsil { background: #ef4444; }
.dc-prob-fill-scc { background: #be123c; }
.dc-prob-val {
    width: 3.25rem;
    flex-shrink: 0;
    text-align: right;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #475569;
}
.dark .dc-prob-val { color: #cbd5e1; }