/* ═══════════════════════════════════════
   BASE — Reset · Variables · Themes · Body
   Loaded by: ALL pages
   ═══════════════════════════════════════ */

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

:root {
    --gap: 12px;
    --frame: 12px;
    --r: 24px;
    --ro: 32px;
    --font: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="dark"] {
    --bg-out: #000000;
    --bg-in: #000000;
    --card: #0f0f0f;
    --card2: #1a1a1a;
    --border: #242424;
    --border2: #2e2e2e;
    --text: #ededf2;
    --text2: #84848e;
    --text3: #4a4a55;
    --chip: #2a2a2a;
    --cbg: #2a2a2a;
    --cfg: #ededf2;
    --bg-border: #242424;
}

[data-theme="dark"] .dynamic-icon {
    filter: invert(1);
}

[data-theme="light"] {
    --bg-out: #e4e4ea;
    --bg-in: #e4e4ea;
    --card: #f0f0f5;
    --card2: #e8e8f0;
    --border: #c8cacd;
    --border2: #b0b2b5;
    --text: #18181c;
    --text2: #64646e;
    --text3: #aaaabc;
    --chip: #dcdce6;
    --cbg: #2a2a2e;
    --cfg: #ffffff;
    --bg-border: #b5b5b5;
}

/* ── NOISE TEXTURE — size 64, opacity 0.08, sharp (radius 0) ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.18;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='64' height='64' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 64px 64px;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg-out);
    font-family: var(--font);
    color: var(--text);
    transition: background .3s, color .3s;
}