:root:not([data-ui-theme]), :root[data-ui-theme="win98"] { --font-main: 'VT323', monospace; --desktop-bg: #008080; --desktop-pattern: radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px); --surface-window: #c0c0c0; --surface-control: #c0c0c0; --surface-input: #ffffff; --surface-status: #b3b3b3; --text-primary: #000000; --title-bg: #000080; --title-text: #ffffff; --border-outer: #000000; --border-input: #000000; --border-muted: #808080; --window-border-width: 2px; --control-border-width: 1px; --input-border-width: 2px; --window-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080; --button-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080; --button-shadow-active: inset 1px 1px #808080, inset -1px -1px #dfdfdf; --focus-ring: inset 0 0 0 1px #000080; --card-bg: #ffffff; --card-text: #000000; --card-border: #000000; --card-border-width: 2px; --selected-outline: 2px dotted currentColor; --modal-overlay: rgba(0, 0, 0, 0.45); } :root[data-ui-theme="win98"][data-theme="dark"] { --desktop-bg: #0a0a0a; --desktop-pattern: radial-gradient(circle, rgba(0, 255, 80, 0.08) 1px, transparent 1px); --surface-window: #2b2b2b; --surface-control: #2b2b2b; --surface-input: #111111; --surface-status: #1b1b1b; --text-primary: #e0e0e0; --title-bg: #000000; --title-text: #00ff66; --border-outer: #000000; --border-input: #555555; --border-muted: #3b3b3b; --window-shadow: inset 1px 1px #3a3a3a, inset -1px -1px #1a1a1a; --button-shadow: inset 1px 1px #3a3a3a, inset -1px -1px #1a1a1a; --button-shadow-active: inset 1px 1px #1a1a1a, inset -1px -1px #3a3a3a; --focus-ring: inset 0 0 0 1px #00ff66; --card-bg: #171717; --card-text: #00ff66; --card-border: #555555; } body { background-color: var(--desktop-bg); background-image: var(--desktop-pattern); background-size: 4px 4px; } .preview-board, .voting-board { background: #0f6d3d; border: 2px solid #000; } :root[data-ui-theme="win98"][data-theme="dark"] .preview-board, :root[data-ui-theme="win98"][data-theme="dark"] .voting-board { background: #0a2c14; } .preset-modal-overlay { background: var(--modal-overlay); } .skeleton-line, .skeleton-board, .skeleton-table, .skeleton-list, .skeleton-controls { background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08)); background-size: 220% 100%; border: 1px solid var(--border-muted); animation: skeleton-shimmer 1.2s ease infinite; } @keyframes skeleton-shimmer { from { background-position: 0 0; } to { background-position: -200% 0; } }