/* =========================================================
   7 Days to Die — Survival Codex (Apocalypse Premium)
   ========================================================= */

:root {
    --sd-bg: #070504;
    --sd-bg-2: #100b09;
    --sd-panel: rgba(18, 12, 10, 0.9);
    --sd-card: linear-gradient(160deg, rgba(36, 22, 18, 0.96), rgba(12, 8, 7, 0.98));
    --sd-blood: #c23b22;
    --sd-blood-hot: #e84a30;
    --sd-blood-deep: #7a1810;
    --sd-blood-glow: rgba(194, 59, 34, 0.4);
    --sd-rust: #a65a32;
    --sd-sand: #d4b896;
    --sd-toxic: #9aff5c;
    --sd-toxic-dim: rgba(154, 255, 92, 0.15);
    --sd-steel: #8a939c;
    --sd-text: #f2ebe3;
    --sd-muted: #b0a094;
    --sd-dim: #6f645c;
    --sd-border: rgba(212, 184, 150, 0.12);
    --sd-border-hot: rgba(194, 59, 34, 0.45);
    --sd-radius: 10px;
    --sd-radius-lg: 14px;
    --sd-shadow: 0 22px 50px rgba(0, 0, 0, 0.55);
    --sd-font: "Barlow", system-ui, sans-serif;
    --sd-display: "Barlow Condensed", "Barlow", sans-serif;
    --sd-mono: "Share Tech Mono", ui-monospace, monospace;
    --sd-max: 1280px;
    --sd-drawer: min(520px, 100vw);
    --sd-ease: 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    --site-header-offset: 0px;
}

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

.sd-body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--sd-font);
    color: var(--sd-text);
    background: var(--sd-bg);
    line-height: 1.55;
    overflow-x: hidden;
}

/* Atmosphere */
.sd-atmosphere {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 45% at 50% -5%, rgba(194, 59, 34, 0.18), transparent 55%),
        radial-gradient(ellipse 50% 40% at 90% 80%, rgba(166, 90, 50, 0.08), transparent 50%),
        linear-gradient(180deg, #120a08 0%, #070504 50%, #050302 100%);
}

.sd-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.78) 100%);
}

.sd-noise {
    position: absolute;
    inset: 0;
    background: url("assets/noise.svg");
    opacity: 0.45;
    mix-blend-mode: overlay;
}

.sd-ember {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.35;
}
.sd-ember--a {
    width: 380px; height: 380px;
    top: 5%; right: -60px;
    background: rgba(194, 59, 34, 0.35);
    animation: sd-drift 16s ease-in-out infinite alternate;
}
.sd-ember--b {
    width: 300px; height: 300px;
    bottom: 10%; left: -40px;
    background: rgba(154, 255, 92, 0.06);
    animation: sd-drift 20s ease-in-out infinite alternate-reverse;
}

.sd-scan {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.08) 3px,
        rgba(0, 0, 0, 0.08) 4px
    );
    opacity: 0.4;
}

@keyframes sd-drift {
    from { transform: translate(0, 0); }
    to { transform: translate(-25px, 18px); }
}

.sd-main {
    position: relative;
    z-index: 1;
    max-width: var(--sd-max);
    margin: 0 auto;
    padding: 22px 16px 80px;
}

/* Hazard strip */
.sd-hazard {
    height: 10px;
    background: url("assets/hazard.svg") repeat-x center / auto 100%;
}
.sd-hazard--thin { height: 6px; }

/* Hero */
.sd-hero {
    margin-bottom: 18px;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-lg);
    background: var(--sd-panel);
    box-shadow: var(--sd-shadow);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.sd-hero-inner {
    display: grid;
    gap: 22px;
    padding: 26px;
}

@media (min-width: 900px) {
    .sd-hero-inner {
        grid-template-columns: 1.45fr 1fr;
        align-items: center;
        padding: 32px;
    }
}

.sd-hero-brand {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.sd-mark {
    width: 84px;
    height: 84px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 18px var(--sd-blood-glow));
    animation: sd-pulse-glow 3.5s ease-in-out infinite;
}

@keyframes sd-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 12px var(--sd-blood-glow)); }
    50% { filter: drop-shadow(0 0 26px var(--sd-blood-glow)); }
}

.sd-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-family: var(--sd-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sd-blood-hot);
}

.sd-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sd-toxic);
    box-shadow: 0 0 10px var(--sd-toxic);
    animation: sd-blink 1.6s ease-in-out infinite;
}

@keyframes sd-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.sd-title {
    margin: 0;
    font-family: var(--sd-display);
    font-size: clamp(2.5rem, 7vw, 3.8rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--sd-text);
    text-shadow: 0 0 40px var(--sd-blood-glow);
}

.sd-subtitle {
    margin: 6px 0 12px;
    font-family: var(--sd-mono);
    font-size: 0.9rem;
    letter-spacing: 0.35em;
    text-transform: uppercase;
    color: var(--sd-blood);
}

.sd-lede {
    margin: 0;
    max-width: 52ch;
    color: var(--sd-muted);
    font-size: 0.98rem;
}

.sd-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sd-stat {
    padding: 12px 10px;
    border: 1px solid var(--sd-border);
    border-left: 3px solid var(--sd-blood);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.35);
    text-align: center;
}

.sd-stat span {
    display: block;
    font-family: var(--sd-mono);
    font-size: 1.35rem;
    color: var(--sd-blood-hot);
    line-height: 1.1;
}

.sd-stat small {
    display: block;
    margin-top: 4px;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sd-dim);
}

.sd-countdown-bar {
    position: relative;
    height: 28px;
    background: #1a0e0c;
    border-top: 1px solid var(--sd-border);
    overflow: hidden;
}

.sd-countdown-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 70%;
    background: linear-gradient(90deg, var(--sd-blood-deep), var(--sd-blood-hot));
    opacity: 0.55;
    animation: sd-fill 12s ease-in-out infinite alternate;
}

@keyframes sd-fill {
    from { width: 35%; }
    to { width: 92%; }
}

.sd-countdown-label {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: var(--sd-mono);
    font-size: 0.72rem;
    letter-spacing: 0.28em;
    color: var(--sd-sand);
}

/* Modes */
.sd-mode-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.sd-mode {
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid var(--sd-border);
    background: rgba(0, 0, 0, 0.3);
    color: var(--sd-muted);
    font-family: var(--sd-display);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--sd-ease);
}

.sd-mode:hover {
    color: var(--sd-text);
    border-color: var(--sd-rust);
}

.sd-mode.is-active {
    color: #1a0806;
    background: linear-gradient(135deg, var(--sd-blood-hot), var(--sd-blood-deep));
    border-color: transparent;
    box-shadow: 0 0 18px var(--sd-blood-glow);
}

/* Controls */
.sd-controls {
    margin-bottom: 16px;
    padding: 14px;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    background: var(--sd-panel);
    backdrop-filter: blur(10px);
}

.sd-search-wrap {
    position: relative;
    margin-bottom: 10px;
}

.sd-search {
    width: 100%;
    padding: 12px 48px 12px 14px;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--sd-text);
    font-family: var(--sd-font);
    font-size: 1rem;
    outline: none;
    transition: border-color var(--sd-ease), box-shadow var(--sd-ease);
}

.sd-search::placeholder { color: var(--sd-dim); }

.sd-search:focus {
    border-color: var(--sd-blood);
    box-shadow: 0 0 0 3px rgba(194, 59, 34, 0.15), 0 0 20px var(--sd-blood-glow);
}

.sd-kbd {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 7px;
    border: 1px solid var(--sd-border);
    border-radius: 3px;
    font-family: var(--sd-mono);
    font-size: 0.7rem;
    color: var(--sd-dim);
}

.sd-filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.sd-label {
    font-family: var(--sd-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sd-dim);
}

.sd-select {
    padding: 7px 10px;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--sd-text);
    font-family: var(--sd-font);
    font-size: 0.88rem;
    cursor: pointer;
}

.sd-select:focus {
    outline: none;
    border-color: var(--sd-blood);
}

.sd-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sd-chip {
    padding: 5px 10px;
    border: 1px dashed var(--sd-border);
    border-radius: 3px;
    background: transparent;
    color: var(--sd-muted);
    font-family: var(--sd-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: all var(--sd-ease);
    text-transform: capitalize;
}

.sd-chip:hover {
    border-style: solid;
    color: var(--sd-text);
}

.sd-chip.is-active {
    border-style: solid;
    border-color: var(--sd-blood);
    color: var(--sd-blood-hot);
    background: rgba(194, 59, 34, 0.1);
}

.sd-meta {
    margin: 10px 0 0;
    font-family: var(--sd-mono);
    font-size: 0.75rem;
    color: var(--sd-dim);
    letter-spacing: 0.04em;
}

/* Grid */
.sd-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

.sd-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 168px;
    padding: 14px;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius);
    background: var(--sd-card);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--sd-ease), border-color var(--sd-ease), box-shadow var(--sd-ease);
    overflow: hidden;
}

.sd-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sd-blood), transparent);
    opacity: 0;
    transition: opacity var(--sd-ease);
}

.sd-card:hover,
.sd-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--sd-border-hot);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    outline: none;
}

.sd-card:hover::before,
.sd-card:focus-visible::before { opacity: 1; }

.sd-card-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}

.sd-avatar {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-family: var(--sd-mono);
    font-size: 0.78rem;
    font-weight: 700;
    color: #1a0806;
    background: linear-gradient(145deg, var(--sd-blood-hot), var(--sd-blood-deep));
    box-shadow: 0 0 14px var(--sd-blood-glow);
    flex-shrink: 0;
}

.sd-avatar[data-tone="weapon"] {
    background: linear-gradient(145deg, #9aa3ad, #4b5563);
    box-shadow: 0 0 12px rgba(148, 163, 184, 0.3);
    color: #0b0f14;
}
.sd-avatar[data-tone="food"] {
    background: linear-gradient(145deg, #c4a574, #7a5a32);
    box-shadow: 0 0 12px rgba(196, 165, 116, 0.3);
}
.sd-avatar[data-tone="medical"] {
    background: linear-gradient(145deg, #86efac, #15803d);
    box-shadow: 0 0 12px rgba(134, 239, 172, 0.3);
    color: #052e16;
}
.sd-avatar[data-tone="resource"] {
    background: linear-gradient(145deg, #fbbf24, #92400e);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.3);
}
.sd-avatar[data-tone="biome"] {
    background: linear-gradient(145deg, #5eead4, #0f766e);
    box-shadow: 0 0 12px rgba(94, 234, 212, 0.3);
    color: #042f2e;
}
.sd-avatar[data-tone="skill"] {
    background: linear-gradient(145deg, #c4b5fd, #6d28d9);
    box-shadow: 0 0 12px rgba(196, 181, 253, 0.3);
}
.sd-avatar[data-tone="system"] {
    background: linear-gradient(145deg, #fcd34d, #b45309);
    box-shadow: 0 0 12px rgba(252, 211, 77, 0.3);
}
.sd-avatar[data-tone="tip"] {
    background: linear-gradient(145deg, #93c5fd, #1d4ed8);
    box-shadow: 0 0 12px rgba(147, 197, 253, 0.3);
}

.sd-card-fav {
    border: none;
    background: transparent;
    color: var(--sd-dim);
    font-size: 1.05rem;
    cursor: pointer;
    padding: 2px 4px;
    transition: color var(--sd-ease), transform var(--sd-ease);
}
.sd-card-fav:hover { color: #fbbf24; transform: scale(1.1); }
.sd-card-fav.is-active { color: #fbbf24; text-shadow: 0 0 8px rgba(251, 191, 36, 0.5); }

.sd-card-name {
    margin: 0;
    font-family: var(--sd-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.15;
}

.sd-card-sub {
    margin: 2px 0 0;
    font-family: var(--sd-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sd-dim);
}

.sd-card-desc {
    margin: 0;
    flex: 1;
    font-size: 0.86rem;
    color: var(--sd-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sd-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: auto;
}

.sd-tag {
    padding: 2px 7px;
    border-radius: 2px;
    font-family: var(--sd-mono);
    font-size: 0.65rem;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--sd-border);
    color: var(--sd-muted);
    text-transform: uppercase;
}

.sd-tag--hot {
    color: var(--sd-blood-hot);
    border-color: rgba(194, 59, 34, 0.35);
}
.sd-tag--ok {
    color: var(--sd-toxic);
    border-color: var(--sd-toxic-dim);
}
.sd-tag--warn {
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.25);
}

/* Threat pips */
.sd-threat {
    display: inline-flex;
    gap: 2px;
}
.sd-threat i {
    width: 6px;
    height: 10px;
    background: var(--sd-dim);
    border-radius: 1px;
}
.sd-threat i.on {
    background: var(--sd-blood-hot);
    box-shadow: 0 0 6px var(--sd-blood-glow);
}

/* Empty / load */
.sd-loading, .sd-empty {
    text-align: center;
    padding: 56px 16px;
    color: var(--sd-muted);
}
.sd-loading[hidden], .sd-empty[hidden] { display: none !important; }
.sd-empty h2 {
    margin: 10px 0 6px;
    font-family: var(--sd-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--sd-text);
}

.sd-loader {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 12px;
}
.sd-loader span {
    width: 8px;
    height: 22px;
    background: var(--sd-blood);
    border-radius: 1px;
    animation: sd-bar 0.9s ease-in-out infinite;
    box-shadow: 0 0 8px var(--sd-blood-glow);
}
.sd-loader span:nth-child(2) { animation-delay: 0.12s; }
.sd-loader span:nth-child(3) { animation-delay: 0.24s; }

@keyframes sd-bar {
    0%, 100% { transform: scaleY(0.4); opacity: 0.5; }
    50% { transform: scaleY(1); opacity: 1; }
}

.sd-btn {
    margin-top: 12px;
    padding: 10px 16px;
    border: 1px solid var(--sd-blood);
    border-radius: 4px;
    background: rgba(194, 59, 34, 0.12);
    color: var(--sd-blood-hot);
    font-family: var(--sd-mono);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all var(--sd-ease);
}
.sd-btn:hover {
    background: var(--sd-blood);
    color: #1a0806;
    box-shadow: 0 0 18px var(--sd-blood-glow);
}

/* About */
.sd-about {
    margin-top: 36px;
    border: 1px solid var(--sd-border);
    border-radius: var(--sd-radius-lg);
    background: var(--sd-panel);
    overflow: hidden;
}
.sd-about-body { padding: 22px; }
.sd-about h2 {
    margin: 0 0 10px;
    font-family: var(--sd-display);
    font-size: 1.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sd-blood-hot);
}
.sd-about p {
    margin: 0 0 10px;
    color: var(--sd-muted);
    font-size: 0.95rem;
}
.sd-credit {
    font-size: 0.82rem !important;
    color: var(--sd-dim) !important;
}

/* Drawer — sits below site header */
.sd-backdrop {
    position: fixed;
    top: var(--site-header-offset, 0px);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900;
    background: rgba(5, 2, 1, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease, top 0.15s ease;
}
.sd-backdrop.is-open { opacity: 1; }
.sd-backdrop[hidden] { display: none; }

.sd-drawer {
    position: fixed;
    top: var(--site-header-offset, 0px);
    right: 0;
    bottom: 0;
    z-index: 910;
    width: var(--sd-drawer);
    max-height: calc(100dvh - var(--site-header-offset, 0px));
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a100e 0%, #0a0605 100%);
    border-left: 1px solid var(--sd-border-hot);
    box-shadow: -22px 0 55px rgba(0, 0, 0, 0.6);
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), top 0.15s ease, max-height 0.15s ease;
    overflow: hidden;
}
.sd-drawer.is-open { transform: translateX(0); }

.sd-drawer-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--sd-border);
    flex-shrink: 0;
}

.sd-drawer-id {
    display: flex;
    gap: 12px;
    align-items: center;
    min-width: 0;
}

.sd-drawer-avatar {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    font-family: var(--sd-mono);
    font-weight: 700;
    font-size: 0.85rem;
    color: #1a0806;
    background: linear-gradient(145deg, var(--sd-blood-hot), var(--sd-blood-deep));
    box-shadow: 0 0 18px var(--sd-blood-glow);
    flex-shrink: 0;
}
.sd-drawer-avatar[data-tone="weapon"] { background: linear-gradient(145deg, #9aa3ad, #4b5563); box-shadow: 0 0 12px rgba(148, 163, 184, 0.3); }
.sd-drawer-avatar[data-tone="food"] { background: linear-gradient(145deg, #c4a574, #7a5a32); }
.sd-drawer-avatar[data-tone="medical"] { background: linear-gradient(145deg, #86efac, #15803d); color: #052e16; }
.sd-drawer-avatar[data-tone="resource"] { background: linear-gradient(145deg, #fbbf24, #92400e); }
.sd-drawer-avatar[data-tone="biome"] { background: linear-gradient(145deg, #5eead4, #0f766e); color: #042f2e; }
.sd-drawer-avatar[data-tone="skill"] { background: linear-gradient(145deg, #c4b5fd, #6d28d9); }
.sd-drawer-avatar[data-tone="system"] { background: linear-gradient(145deg, #fcd34d, #b45309); }
.sd-drawer-avatar[data-tone="tip"] { background: linear-gradient(145deg, #93c5fd, #1d4ed8); }

.sd-drawer-kicker {
    margin: 0;
    font-family: var(--sd-mono);
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-dim);
}

.sd-drawer-title {
    margin: 2px 0 0;
    font-family: var(--sd-display);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.1;
    word-break: break-word;
}

.sd-drawer-actions { display: flex; gap: 6px; flex-shrink: 0; }

.sd-icon-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.35);
    color: var(--sd-muted);
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--sd-ease);
}
.sd-icon-btn:hover {
    color: var(--sd-blood-hot);
    border-color: var(--sd-blood);
}
.sd-icon-btn.is-active {
    color: #fbbf24;
    border-color: #fbbf24;
}

.sd-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--sd-blood-deep) transparent;
}

.sd-drawer-desc {
    margin: 0 0 14px;
    color: var(--sd-muted);
}

.sd-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}

.sd-mini {
    padding: 10px;
    border: 1px solid var(--sd-border);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.3);
}
.sd-mini-label {
    display: block;
    font-family: var(--sd-mono);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sd-dim);
    margin-bottom: 3px;
}
.sd-mini-value {
    font-family: var(--sd-mono);
    font-size: 0.95rem;
    color: var(--sd-blood-hot);
    word-break: break-word;
}

.sd-block { margin-bottom: 18px; }
.sd-block-title {
    margin: 0 0 8px;
    font-family: var(--sd-mono);
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sd-blood);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sd-block-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--sd-border-hot), transparent);
}

.sd-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--sd-muted);
    font-size: 0.9rem;
}
.sd-list li { margin-bottom: 5px; }

.sd-muted { color: var(--sd-dim); font-size: 0.88rem; }

body.sd-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 600px) {
    .sd-hero-brand { flex-direction: column; align-items: center; text-align: center; }
    .sd-lede { margin-inline: auto; }
    .sd-hero-stats { grid-template-columns: 1fr 1fr; }
    .sd-kbd { display: none; }
}