:root {
    --bg: #05050a;
    --panel: #101019;
    --deep: #07070d;
    --paper: #f3f0e9;
    --text: #f1ecf4;
    --muted: #aaa2b3;
    --teal: #67fff0;
    --plum: #ff5ed7;
    --line: rgba(103,255,240,.055);
}

body.theme-vhs {
    background:
        radial-gradient(circle at 15% 8%, rgba(34,210,202,.12), transparent 30rem),
        radial-gradient(circle at 88% 12%, rgba(255,65,183,.09), transparent 27rem),
        linear-gradient(90deg, rgba(64,240,224,.035) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        #05050a;
    background-size: auto, auto, 32px 32px, 32px 32px, auto;
}

.theme-vhs .crt-glass {
    display: block;
    opacity: .52;
    background:
        repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.22) 2px 3px),
        radial-gradient(ellipse at center, transparent 48%, rgba(0,0,0,.12) 76%, rgba(0,0,0,.52) 100%);
}

.theme-vhs .vhs-tracking {
    display: block;
    opacity: .14;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.7), transparent);
    filter: blur(4px);
    animation: tracking-roll 9s linear infinite;
}

.theme-vhs .site-header {
    border-radius: 2px;
    border-color: rgba(103,255,240,.28);
    background:
        linear-gradient(90deg, rgba(0,0,0,.78), rgba(0,0,0,.2)),
        repeating-linear-gradient(90deg, rgba(103,255,240,.06) 0 1px, transparent 1px 9px),
        linear-gradient(135deg, #161222 0%, #07070e 58%, #160b1a 100%);
    box-shadow:
        10px 0 0 rgba(255,64,184,.07),
        -8px 0 0 rgba(69,255,240,.06),
        0 22px 55px rgba(0,0,0,.55);
}

.theme-vhs .site-header::before {
    right: 0;
    width: clamp(140px, 27vw, 310px);
    opacity: .52;
    background: repeating-linear-gradient(90deg,
        #00d8cb 0 13px,
        #e9e6dc 13px 16px,
        #ff3fae 16px 31px,
        #e9e6dc 31px 34px,
        #6d4dff 34px 49px,
        #e9e6dc 49px 52px,
        #ffc947 52px 67px,
        #e9e6dc 67px 70px,
        #ff634f 70px 85px,
        #e9e6dc 85px 88px);
    filter: saturate(.82) contrast(1.15);
}

.theme-vhs .site-header::after {
    background:
        linear-gradient(90deg, rgba(5,5,10,.99) 0 48%, rgba(5,5,10,.88) 61%, rgba(5,5,10,.18) 86%),
        repeating-linear-gradient(to bottom, transparent 0 5px, rgba(255,255,255,.018) 5px 6px);
}

.theme-vhs h1 {
    position: relative;
    color: #f7f4f0;
    letter-spacing: -.07em;
    text-shadow: 3px 0 0 rgba(255,46,184,.42), -3px 0 0 rgba(63,255,237,.36), 0 4px 0 #000;
    animation: title-jitter 7s steps(1,end) infinite;
}

.theme-vhs h1::before,
.theme-vhs h1::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .16;
    overflow: hidden;
}
.theme-vhs h1::before { color: #4ffff0; transform: translateX(-2px); clip-path: inset(8% 0 67% 0); }
.theme-vhs h1::after { color: #ff4dc4; transform: translateX(2px); clip-path: inset(64% 0 12% 0); }

.theme-vhs .eyebrow,
.theme-vhs .timecode,
.theme-vhs .header-signal {
    text-shadow: 1px 0 rgba(255,65,190,.48), -1px 0 rgba(71,255,236,.48);
}

.theme-vhs .toolbar,
.theme-vhs .photo-card,
.theme-vhs .empty-state,
.theme-vhs .access-card {
    border-radius: 2px;
    border-color: rgba(103,255,240,.16);
    background: linear-gradient(145deg, rgba(20,19,30,.96), rgba(8,8,14,.98));
}

.theme-vhs .photo-card { box-shadow: 7px 8px 0 rgba(255,74,190,.035), 0 15px 30px rgba(0,0,0,.5); }
.theme-vhs .photo-card:hover { border-color: rgba(103,255,240,.58); }
.theme-vhs .photo-frame img { filter: contrast(1.04) saturate(.92); }
.theme-vhs .photo-frame::before {
    content: "REC";
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 11px;
    color: rgba(255,255,255,.72);
    font-size: .59rem;
    letter-spacing: .12em;
    text-shadow: 1px 0 #f05, -1px 0 #0fc;
}

.theme-vhs input,
.theme-vhs select,
.theme-vhs button {
    border-radius: 1px;
}
.theme-vhs input:focus,
.theme-vhs select:focus { box-shadow: 2px 0 0 rgba(255,65,190,.34), -2px 0 0 rgba(71,255,236,.34); }
.theme-vhs button { text-transform: uppercase; letter-spacing: .07em; }
.theme-vhs .status-dot { animation: rec-blink 1.45s steps(1,end) infinite; }
.theme-vhs .lightbox { background: rgba(3,3,8,.97); }

@keyframes tracking-roll {
    0%, 72% { transform: translateY(-18vh); }
    80% { transform: translateY(128vh); }
    100% { transform: translateY(128vh); }
}
@keyframes rec-blink { 0%, 58% { opacity: 1; } 59%, 100% { opacity: .22; } }
@keyframes title-jitter {
    0%, 89%, 93%, 100% { transform: translate(0); }
    90% { transform: translate(1px, -1px); }
    91% { transform: translate(-1px, 1px); }
    92% { transform: translate(2px, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .theme-vhs .vhs-tracking,
    .theme-vhs h1,
    .theme-vhs .status-dot { animation: none; }
}

/* Version 2.3 VHS treatment */
.theme-vhs .public-nav a,
.theme-vhs .set-tile,
.theme-vhs .welcome-card,
.theme-vhs .content-card {
    border-radius: 2px;
    border-color: rgba(103,255,240,.17);
    background: linear-gradient(145deg, rgba(20,19,30,.96), rgba(8,8,14,.98));
    box-shadow: 5px 6px 0 rgba(255,74,190,.035), 0 15px 30px rgba(0,0,0,.36);
}
.theme-vhs .set-tile:hover,
.theme-vhs .public-nav a:hover,
.theme-vhs .public-nav a.active { border-color: rgba(103,255,240,.55); }
.theme-vhs .set-cover-hero img { filter: contrast(1.08) saturate(.78); }
.theme-vhs .welcome-card { border-left-color: #67fff0; }
.theme-vhs .contact-form textarea { border-radius: 1px; }
.theme-vhs .maintenance-tape { text-shadow: 1px 0 rgba(255,65,190,.48), -1px 0 rgba(71,255,236,.48); }