Updates

README.md

@@ -9,7 +9,11 @@ Enterprise-style Scrum Poker application using Go, Gin, and SSE for real-time ro
 - Real-time updates via Server-Sent Events (SSE)
 - Strict state sanitization: unrevealed votes from other users are never broadcast
 - Backend authorization for admin-only actions (`reveal`, `reset`)
-- Win98-themed frontend with:
+- Themeable frontend with:
+  - CSS architecture split into `main.css`, `layout.css`, and `/themes/*`
+  - Theme options: `win98` (default), `modern`, `No Theme`
+  - Light/Dark mode independent from active theme
+  - Desktop taskbar controls + mobile top controls for theme/mode switching
   - Config page and card deck preview
   - Drag-and-drop card ordering
   - Card add/remove with animation completion handling
@@ -28,8 +32,11 @@ Enterprise-style Scrum Poker application using Go, Gin, and SSE for real-time ro
 - `src/middleware/`: static cache headers middleware
 - `src/models/`: template page data models
 - `src/templates/`: HTML templates (`index.html`, `room.html`)
-- `static/css/`: styles
+- `static/css/main.css`: shared component primitives
-- `static/js/`: frontend logic (`config.js`, `room.js`)
+- `static/css/layout.css`: grids/flex/positioning/responsive layout
+- `static/css/themes/`: drop-in theme files
+- `static/js/ui-controls.js`: global theme + mode engine
+- `static/js/`: page logic (`config.js`, `room.js`)
 
 ## Environment Variables
 

src/state/manager.go

@@ -2,11 +2,17 @@ package state
 
 import (
 	"encoding/json"
+	"fmt"
 	"slices"
 	"strings"
 	"sync"
 )
 
+const (
+	maxActivityLogEntries   = 400
+	adminLogBroadcastLimit  = 200
+)
+
 type Manager struct {
 	mu    sync.RWMutex
 	rooms map[string]*Room
@@ -111,8 +117,10 @@ func (m *Manager) CreateRoom(input CreateRoomInput) (CreateRoomResult, error) {
 		Participants: map[string]*Participant{
 			creatorID: creator,
 		},
+		ActivityLog: []ActivityLogEntry{},
 		subscribers: map[string]*subscriber{},
 	}
+	m.appendActivityLogLocked(room, "%s created the room as admin.", creator.Username)
 
 	m.mu.Lock()
 	m.rooms[roomID] = room
@@ -176,12 +184,16 @@ func (m *Manager) JoinRoom(roomID string, input JoinRoomInput) (JoinRoomResult,
 			return JoinRoomResult{}, ErrParticipantNotFound
 		}
 
+		wasConnected := existing.Connected
 		existing.Username = username
 		existing.Connected = true
 		existing.UpdatedAt = now
 		if isAdminByToken {
 			existing.IsAdmin = true
 		}
+		if !wasConnected {
+			m.appendActivityLogLocked(room, "%s joined as %s.", existing.Username, existing.Role)
+		}
 
 		room.UpdatedAt = now
 		if err := m.store.Save(room); err != nil {
@@ -225,6 +237,7 @@ func (m *Manager) JoinRoom(roomID string, input JoinRoomInput) (JoinRoomResult,
 	}
 
 	room.Participants[participant.ID] = participant
+	m.appendActivityLogLocked(room, "%s joined as %s.", participant.Username, participant.Role)
 	room.UpdatedAt = now
 
 	if err := m.store.Save(room); err != nil {
@@ -254,9 +267,11 @@ func (m *Manager) LeaveRoom(roomID, participantID string) error {
 		return ErrParticipantNotFound
 	}
 
-	participant.Connected = false
+	if !participant.Connected {
-	participant.UpdatedAt = nowUTC()
+		return nil
-	room.UpdatedAt = nowUTC()
+	}
+	m.disconnectParticipantLocked(room, participant)
+	m.appendActivityLogLocked(room, "%s left the room.", participant.Username)
 
 	if err := m.store.Save(room); err != nil {
 		return err
@@ -300,9 +315,11 @@ func (m *Manager) CastVote(roomID, participantID, card string) error {
 	participant.VoteValue = normalizedCard
 	participant.UpdatedAt = nowUTC()
 	room.UpdatedAt = nowUTC()
+	m.appendActivityLogLocked(room, "%s voted %s.", participant.Username, normalizedCard)
 
 	if room.Settings.RevealMode == RevealModeAutoAll && allActiveParticipantsVoted(room) {
 		room.Round.Revealed = true
+		m.appendActivityLogLocked(room, "Votes auto-revealed after all active participants voted.")
 	}
 
 	if err := m.store.Save(room); err != nil {
@@ -332,6 +349,7 @@ func (m *Manager) RevealVotes(roomID, participantID string) error {
 
 	room.Round.Revealed = true
 	room.UpdatedAt = nowUTC()
+	m.appendActivityLogLocked(room, "%s revealed the votes.", participant.Username)
 
 	if err := m.store.Save(room); err != nil {
 		return err
@@ -360,6 +378,7 @@ func (m *Manager) ResetVotes(roomID, participantID string) error {
 
 	m.resetVotesLocked(room)
 	room.UpdatedAt = nowUTC()
+	m.appendActivityLogLocked(room, "%s reset all votes.", participant.Username)
 
 	if err := m.store.Save(room); err != nil {
 		return err
@@ -421,11 +440,12 @@ func (m *Manager) Subscribe(roomID, participantID string) (<-chan []byte, []byte
 		delete(roomRef.subscribers, subscriberID)
 
 		if p, participantOK := roomRef.Participants[participantID]; participantOK {
-			p.Connected = false
+			if p.Connected {
-			p.UpdatedAt = nowUTC()
+				m.disconnectParticipantLocked(roomRef, p)
-			roomRef.UpdatedAt = nowUTC()
+				m.appendActivityLogLocked(roomRef, "%s disconnected.", p.Username)
 				_ = m.store.Save(roomRef)
 			}
+		}
 		roomRef.mu.Unlock()
 
 		go m.broadcastRoom(roomID)
@@ -461,6 +481,7 @@ func (m *Manager) loadFromDisk() error {
 			Settings:     persisted.Settings,
 			Round:        persisted.Round,
 			Participants: make(map[string]*Participant, len(persisted.Participants)),
+			ActivityLog:  append([]ActivityLogEntry(nil), persisted.ActivityLog...),
 			subscribers:  map[string]*subscriber{},
 		}
 		for _, participant := range persisted.Participants {
@@ -489,6 +510,7 @@ func (room *Room) toPersisted() persistedRoom {
 		Settings:     room.Settings,
 		Round:        room.Round,
 		Participants: participants,
+		ActivityLog:  append([]ActivityLogEntry(nil), room.ActivityLog...),
 	}
 }
 
@@ -529,6 +551,10 @@ func (m *Manager) marshalRoomState(room *Room, viewerParticipantID string) ([]by
 
 	participants := make([]PublicParticipant, 0, len(room.Participants))
 	for _, participant := range sortParticipants(room.Participants) {
+		if !participant.Connected {
+			continue
+		}
+
 		public := PublicParticipant{
 			ID:        participant.ID,
 			Username:  participant.Username,
@@ -568,6 +594,18 @@ func (m *Manager) marshalRoomState(room *Room, viewerParticipantID string) ([]by
 
 	if viewer.IsAdmin {
 		state.Links.AdminLink = "/room/" + room.ID + "?adminToken=" + room.AdminToken
+
+		start := 0
+		if len(room.ActivityLog) > adminLogBroadcastLimit {
+			start = len(room.ActivityLog) - adminLogBroadcastLimit
+		}
+		state.AdminLogs = make([]PublicActivityLogEntry, 0, len(room.ActivityLog)-start)
+		for _, item := range room.ActivityLog[start:] {
+			state.AdminLogs = append(state.AdminLogs, PublicActivityLogEntry{
+				At:      item.At,
+				Message: item.Message,
+			})
+		}
 	}
 
 	return json.Marshal(state)
@@ -602,3 +640,20 @@ func (m *Manager) broadcastRoom(roomID string) {
 		}
 	}
 }
+
+func (m *Manager) appendActivityLogLocked(room *Room, format string, args ...any) {
+	room.ActivityLog = append(room.ActivityLog, ActivityLogEntry{
+		At:      nowUTC(),
+		Message: fmt.Sprintf(format, args...),
+	})
+
+	if len(room.ActivityLog) > maxActivityLogEntries {
+		room.ActivityLog = append([]ActivityLogEntry(nil), room.ActivityLog[len(room.ActivityLog)-maxActivityLogEntries:]...)
+	}
+}
+
+func (m *Manager) disconnectParticipantLocked(room *Room, participant *Participant) {
+	participant.Connected = false
+	participant.UpdatedAt = nowUTC()
+	room.UpdatedAt = nowUTC()
+}

src/state/types.go

@@ -54,6 +54,11 @@ type RoundState struct {
 	Revealed bool `json:"revealed"`
 }
 
+type ActivityLogEntry struct {
+	At      time.Time `json:"at"`
+	Message string    `json:"message"`
+}
+
 type persistedRoom struct {
 	ID           string         `json:"id"`
 	AdminToken   string         `json:"adminToken"`
@@ -62,6 +67,7 @@ type persistedRoom struct {
 	Settings     RoomSettings   `json:"settings"`
 	Round        RoundState     `json:"round"`
 	Participants []*Participant `json:"participants"`
+	ActivityLog  []ActivityLogEntry `json:"activityLog,omitempty"`
 }
 
 type subscriber struct {
@@ -77,6 +83,7 @@ type Room struct {
 	Settings     RoomSettings
 	Round        RoundState
 	Participants map[string]*Participant
+	ActivityLog  []ActivityLogEntry
 
 	mu          sync.RWMutex
 	subscribers map[string]*subscriber
@@ -133,6 +140,11 @@ type RoomLinks struct {
 	AdminLink       string `json:"adminLink,omitempty"`
 }
 
+type PublicActivityLogEntry struct {
+	At      time.Time `json:"at"`
+	Message string    `json:"message"`
+}
+
 type PublicRoomState struct {
 	RoomID            string              `json:"roomId"`
 	RoomName          string              `json:"roomName"`
@@ -148,4 +160,5 @@ type PublicRoomState struct {
 	SelfParticipantID string              `json:"selfParticipantId"`
 	ViewerIsAdmin     bool                `json:"viewerIsAdmin"`
 	Links             RoomLinks           `json:"links"`
+	AdminLogs         []PublicActivityLogEntry `json:"adminLogs,omitempty"`
 }

src/templates/index.html

@@ -7,11 +7,18 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/styles.css">
+    <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/layout.css">
+    <link rel="stylesheet" href="/static/css/cards.css">
+    <link rel="stylesheet" href="/static/css/themes/win98.css">
+    <link rel="stylesheet" href="/static/css/themes/modern.css">
+    <link rel="stylesheet" href="/static/css/themes/no-theme.css">
 </head>
 <body data-page="config">
-    <div class="top-bar">
+    <div class="mobile-control-strip">
-        <button class="btn" id="theme-toggle" type="button">Dark Mode</button>
+        <div class="taskbar-shell">
+            <div class="taskbar-program-list" data-role="taskbar-program-list"></div>
+        </div>
     </div>
 
     <main id="desktop">
@@ -74,7 +81,6 @@
                                     <label for="voting-timeout">Voting timeout (seconds)</label>
                                     <div class="number-input-wrap number-with-unit">
                                         <input type="number" id="voting-timeout" name="votingTimeoutSec" min="0" max="3600" value="{{ .DefaultVotingTime }}">
-                                        <span class="input-unit">sec</span>
                                     </div>
                                 </div>
 
@@ -122,8 +128,17 @@
                                     <div class="card-editor-row">
                                         <input type="text" id="custom-card" maxlength="8" placeholder="e.g. 34 or ?">
                                         <button type="button" id="add-card" class="btn">Add</button>
+                                        <button type="button" id="auto-sort" class="btn">Auto-sort</button>
                                     </div>
                                 </div>
+
+                                <div class="deck-tools-row">
+                                    <button type="button" id="save-preset" class="btn">Save preset</button>
+                                    <button type="button" id="share-deck" class="btn">Share</button>
+                                    <button type="button" id="preset-picker-toggle" class="btn icon-btn" aria-expanded="false" aria-controls="preset-modal-overlay" title="Open Presets">
+                                        <img src="/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png" alt="Presets">
+                                    </button>
+                                </div>
                             </div>
                         </aside>
                     </div>
@@ -137,8 +152,112 @@
                 </form>
             </div>
         </section>
+
+        <div id="preset-modal-overlay" class="preset-modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="preset-modal-title">
+            <section class="window preset-modal-window">
+                <div class="title-bar">
+                    <span id="preset-modal-title">Deck Presets</span>
+                    <div class="title-bar-controls">
+                        <button type="button" id="preset-modal-close">×</button>
+                    </div>
+                </div>
+                <div class="window-content">
+                    <div id="preset-list" class="preset-list"></div>
+                    <div class="preset-modal-actions">
+                        <button type="button" id="import-toggle" class="btn import-btn">Import</button>
+                        <button type="button" id="preset-modal-done" class="btn">Done</button>
+                    </div>
+                    <div id="import-pane" class="import-pane hidden">
+                        <textarea id="import-b64" rows="3" placeholder="Paste base64 deck string"></textarea>
+                        <div class="actions-row">
+                            <button type="button" id="import-apply" class="btn">Apply Import</button>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+
+        <section
+            id="theme-tool-window"
+            class="window ui-tool-window hidden"
+            role="dialog"
+            aria-modal="false"
+            aria-labelledby="theme-tool-title"
+            data-ui-window
+            data-window-title="ThemePicker.exe"
+            data-window-rights="all"
+            data-window-order="10"
+            data-window-default-left="16"
+            data-window-default-top="88"
+            data-window-default-width="390"
+            data-window-default-height="250"
+            data-window-icons='{"win98":"/static/img/Windows Icons - PNG/main.cpl_14_109-1.png","modern":"/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png","none":"/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png","default":"/static/img/Windows Icons - PNG/main.cpl_14_109-1.png"}'
+        >
+            <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
+                <span id="theme-tool-title">ThemePicker.exe</span>
+                <div class="title-bar-controls">
+                    <button type="button" data-role="close-window" data-target="theme-tool-window">×</button>
+                </div>
+            </div>
+            <div class="window-content">
+                <p class="tool-copy">Pick a visual style for this workspace.</p>
+                <div class="theme-option-list">
+                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="win98">
+                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_100-0.png" alt="">
+                        <span>Win98</span>
+                    </button>
+                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="modern">
+                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png" alt="">
+                        <span>Modern</span>
+                    </button>
+                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="none">
+                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png" alt="">
+                        <span>No Theme</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <section
+            id="mode-tool-window"
+            class="window ui-tool-window hidden"
+            role="dialog"
+            aria-modal="false"
+            aria-labelledby="mode-tool-title"
+            data-ui-window
+            data-window-title="DisplayMode.exe"
+            data-window-rights="all"
+            data-window-order="20"
+            data-window-default-left="424"
+            data-window-default-top="88"
+            data-window-default-width="340"
+            data-window-default-height="190"
+            data-window-icons='{"win98":"/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png","modern":"/static/img/Windows Icons - PNG/desk.cpl_14_100-0.png","none":"/static/img/Windows Icons - PNG/timedate.cpl_14_200-6.png","default":"/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png"}'
+        >
+            <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
+                <span id="mode-tool-title">DisplayMode.exe</span>
+                <div class="title-bar-controls">
+                    <button type="button" data-role="close-window" data-target="mode-tool-window">×</button>
+                </div>
+            </div>
+            <div class="window-content">
+                <p class="tool-copy" id="mode-status-text">Current mode: Light</p>
+                <button class="btn mode-toggle-btn" type="button" data-role="mode-toggle-action">
+                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
+                    <span data-role="mode-toggle-label">Switch to Dark Mode</span>
+                </button>
+            </div>
+        </section>
     </main>
 
+    <footer class="taskbar desktop-taskbar" aria-label="Desktop taskbar">
+        <div class="taskbar-shell">
+            <div class="taskbar-program-list" data-role="taskbar-program-list"></div>
+        </div>
+    </footer>
+
+    <script src="/static/js/ui-controls.js"></script>
+    <script src="/static/js/cards.js"></script>
     <script src="/static/js/config.js"></script>
 </body>
 </html>

src/templates/room.html

@@ -7,15 +7,50 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="/static/css/styles.css">
+    <link rel="stylesheet" href="/static/css/main.css">
+    <link rel="stylesheet" href="/static/css/layout.css">
+    <link rel="stylesheet" href="/static/css/cards.css">
+    <link rel="stylesheet" href="/static/css/themes/win98.css">
+    <link rel="stylesheet" href="/static/css/themes/modern.css">
+    <link rel="stylesheet" href="/static/css/themes/no-theme.css">
 </head>
-<body data-page="room" data-room-id="{{ .RoomID }}">
+<body data-page="room" data-room-id="{{ .RoomID }}" class="prejoin">
-    <div class="top-bar">
+    <div class="mobile-control-strip">
-        <button class="btn" id="theme-toggle" type="button">Dark Mode</button>
+        <div class="taskbar-shell">
+            <div class="taskbar-program-list">
+                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="theme-tool-window" aria-label="Open theme picker">
+                    <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_109-1.png" alt="">
+                    <span>ThemePicker.exe</span>
+                </button>
+                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="mode-tool-window" aria-label="Open display mode settings">
+                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
+                    <span>DisplayMode.exe</span>
+                </button>
+            </div>
+        </div>
     </div>
 
     <main id="desktop" class="room-desktop">
-        <section class="room-grid" aria-label="Scrum poker room board">
+        <section id="room-skeleton" class="room-grid skeleton-grid hidden" aria-hidden="true">
+            <article class="window room-main-window">
+                <div class="title-bar"><span>Loading room...</span></div>
+                <div class="window-content">
+                    <div class="skeleton-line"></div>
+                    <div class="skeleton-board"></div>
+                    <div class="skeleton-line short"></div>
+                    <div class="skeleton-table"></div>
+                </div>
+            </article>
+            <aside class="window side-panel-window">
+                <div class="title-bar"><span>Loading participants...</span></div>
+                <div class="window-content">
+                    <div class="skeleton-list"></div>
+                    <div class="skeleton-controls"></div>
+                </div>
+            </aside>
+        </section>
+
+        <section id="room-grid" class="room-grid hidden" aria-label="Scrum poker room board">
             <article class="window room-main-window">
                 <div class="title-bar">
                     <span id="room-title">Room</span>
@@ -31,39 +66,73 @@
                         <span id="round-state-label">Cards hidden</span>
                     </div>
                     <div class="voting-board" id="voting-board"></div>
+
+                    <section class="window vote-summary-window" id="vote-summary-window">
+                        <div class="title-bar">
+                            <span>Vote Summary</span>
+                        </div>
+                        <div class="window-content vote-summary-content">
+                            <table class="summary-table" id="summary-table">
+                                <thead>
+                                    <tr>
+                                        <th>Card</th>
+                                        <th>Users</th>
+                                    </tr>
+                                </thead>
+                                <tbody id="summary-body"></tbody>
+                            </table>
+                            <div class="summary-metrics">
+                                <span id="summary-average">Average: -</span>
+                                <span id="summary-recommended">Recommended: -</span>
+                            </div>
+                        </div>
+                    </section>
                 </div>
             </article>
 
-            <aside class="window participants-window">
+            <div class="side-stack">
+                <aside class="window side-panel-window participants-window">
                     <div class="title-bar">
                         <span>Participants</span>
                     </div>
-                <div class="window-content participants-content">
+                    <div class="window-content side-panel-content">
+                        <div class="participants-scroll">
                             <ul id="participant-list" class="participant-list"></ul>
                         </div>
+                        <div class="participants-footer">
+                            <p id="votes-counter" class="status-line">Votes: 0/0</p>
+                            <button type="button" id="change-name-btn" class="btn">Change Name</button>
+                        </div>
+                    </div>
                 </aside>
 
-            <section class="window control-window">
+                <aside class="window side-panel-window admin-window">
                     <div class="title-bar">
-                    <span>Controls</span>
+                        <span>Admin Controls</span>
                     </div>
-                <div class="window-content control-content">
+                    <div class="window-content side-panel-content">
                         <div class="links-block">
-                        <label>Participant Link</label>
+                            <label for="share-link">Share Link</label>
-                        <input id="participant-link" type="text" readonly>
+                            <div class="share-link-row">
-                        <label>Admin Link</label>
+                                <input id="share-link" type="text" readonly>
-                        <input id="admin-link" type="text" readonly>
+                                <label class="share-admin-toggle">
+                                    <input id="share-admin-toggle" type="checkbox">
+                                    <span>Admin</span>
+                                </label>
+                            </div>
                         </div>
                         <div id="admin-controls" class="admin-controls hidden">
                             <button type="button" id="reveal-btn" class="btn">Reveal</button>
                             <button type="button" id="reset-btn" class="btn">Reset</button>
+                            <button type="button" id="terminal-btn" class="btn">Terminal</button>
                         </div>
-                    <p id="room-status" class="status-line">Connecting...</p>
+                        <p id="room-message" class="status-line">Waiting for join...</p>
+                    </div>
+                </aside>
             </div>
-            </section>
         </section>
 
-        <section id="join-panel" class="window join-window hidden" aria-label="Join room">
+        <section id="join-panel" class="window join-window" aria-label="Join room">
             <div class="title-bar">
                 <span>JoinRoom.exe</span>
             </div>
@@ -95,8 +164,81 @@
                 </form>
             </div>
         </section>
+
+        <div id="terminal-modal-overlay" class="terminal-modal-overlay hidden" role="dialog" aria-modal="true" aria-labelledby="terminal-title">
+            <section class="window terminal-window">
+                <div class="title-bar">
+                    <span id="terminal-title">RoomTerminal.exe</span>
+                    <div class="title-bar-controls">
+                        <button type="button" id="terminal-close-btn">×</button>
+                    </div>
+                </div>
+                <div class="window-content terminal-window-content">
+                    <div id="terminal-log-output" class="terminal-log-output" aria-live="polite"></div>
+                </div>
+            </section>
+        </div>
+
+        <section id="theme-tool-window" class="window ui-tool-window hidden" role="dialog" aria-modal="false" aria-labelledby="theme-tool-title">
+            <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
+                <span id="theme-tool-title">ThemePicker.exe</span>
+                <div class="title-bar-controls">
+                    <button type="button" data-role="close-window" data-target="theme-tool-window">×</button>
+                </div>
+            </div>
+            <div class="window-content">
+                <p class="tool-copy">Pick a visual style for this workspace.</p>
+                <div class="theme-option-list">
+                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="win98">
+                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_100-0.png" alt="">
+                        <span>Win98</span>
+                    </button>
+                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="modern">
+                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/msconfig.exe_14_128-0.png" alt="">
+                        <span>Modern</span>
+                    </button>
+                    <button type="button" class="btn theme-option-btn" data-role="theme-option" data-theme="none">
+                        <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/taskmgr.exe_14_118-1.png" alt="">
+                        <span>No Theme</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+
+        <section id="mode-tool-window" class="window ui-tool-window hidden" role="dialog" aria-modal="false" aria-labelledby="mode-tool-title">
+            <div class="title-bar ui-tool-title-bar" data-role="drag-handle">
+                <span id="mode-tool-title">DisplayMode.exe</span>
+                <div class="title-bar-controls">
+                    <button type="button" data-role="close-window" data-target="mode-tool-window">×</button>
+                </div>
+            </div>
+            <div class="window-content">
+                <p class="tool-copy" id="mode-status-text">Current mode: Light</p>
+                <button class="btn mode-toggle-btn" type="button" data-role="mode-toggle-action">
+                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
+                    <span data-role="mode-toggle-label">Switch to Dark Mode</span>
+                </button>
+            </div>
+        </section>
     </main>
 
+    <footer class="taskbar desktop-taskbar" aria-label="Desktop taskbar">
+        <div class="taskbar-shell">
+            <div class="taskbar-program-list">
+                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="theme-tool-window" aria-label="Open theme picker">
+                    <img class="taskbar-icon" src="/static/img/Windows Icons - PNG/main.cpl_14_109-1.png" alt="">
+                    <span>ThemePicker.exe</span>
+                </button>
+                <button class="taskbar-program-btn" type="button" data-role="open-window" data-target="mode-tool-window" aria-label="Open display mode settings">
+                    <img class="taskbar-icon" data-role="mode-icon" src="/static/img/Windows Icons - PNG/desk.cpl_14_40-0.png" alt="">
+                    <span>DisplayMode.exe</span>
+                </button>
+            </div>
+        </div>
+    </footer>
+
+    <script src="/static/js/ui-controls.js"></script>
+    <script src="/static/js/cards.js"></script>
     <script src="/static/js/room.js"></script>
 </body>
 </html>

static/css/cards.css

@@ -0,0 +1,38 @@
+.vote-card,
+.preview-card {
+    border: var(--card-border-width) solid var(--card-border);
+    background: var(--card-bg);
+    color: var(--card-text);
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.card-corner {
+    position: absolute;
+    z-index: 1;
+    font-weight: 700;
+    font-size: 0.82rem;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+}
+
+.card-corner.top-left {
+    top: 0.34rem;
+    left: 0.34rem;
+}
+
+.card-corner.bottom-right {
+    right: 0.34rem;
+    bottom: 0.34rem;
+    transform: rotate(180deg);
+}
+
+.card-center-icon {
+    z-index: 1;
+    line-height: 1;
+    pointer-events: none;
+    user-select: none;
+}

static/css/layout.css

@@ -0,0 +1,645 @@
+:root {
+    --ui-scale: 1.06;
+    --base-font-size: clamp(16px, 0.35vw + 0.9rem, 20px);
+}
+
+#desktop {
+    flex: 1;
+    width: 100%;
+    padding: 4.3rem 1rem 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.mobile-control-strip {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 50;
+    padding: 0.25rem 0.45rem;
+}
+
+.taskbar-shell {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-height: 2.15rem;
+}
+
+.taskbar-program-list {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+}
+
+.taskbar-program-btn {
+    min-height: 1.8rem;
+    max-width: min(14rem, 42vw);
+    padding: 0.18rem 0.5rem 0.18rem 0.34rem;
+    border: var(--control-border-width) solid var(--border-outer);
+    background: var(--surface-control);
+    color: var(--text-primary);
+    box-shadow: var(--button-shadow);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.38rem;
+    cursor: pointer;
+    overflow: hidden;
+}
+
+.taskbar-program-btn.is-active {
+    box-shadow: var(--button-shadow-active);
+    transform: translateY(1px);
+}
+
+.taskbar-program-btn span {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.taskbar-icon {
+    width: 1rem;
+    height: 1rem;
+    flex: 0 0 auto;
+    image-rendering: pixelated;
+}
+
+.desktop-taskbar {
+    display: none;
+}
+
+.ui-tool-window {
+    position: fixed;
+    z-index: 80;
+    top: 6.2rem;
+    left: 1rem;
+    width: min(24rem, calc(100vw - 2rem));
+    height: 14rem;
+    min-width: 16.25rem;
+    min-height: 10rem;
+    resize: both;
+    overflow: auto;
+    max-width: calc(100vw - 1rem);
+    max-height: calc(100vh - 1rem);
+}
+
+.ui-tool-title-bar {
+    cursor: grab;
+}
+
+.ui-tool-window .title-bar-controls button {
+    cursor: pointer;
+}
+
+.tool-copy {
+    margin-bottom: 0.45rem;
+}
+
+.theme-option-list {
+    display: grid;
+    gap: 0.35rem;
+}
+
+.theme-option-btn,
+.mode-toggle-btn {
+    justify-content: flex-start;
+    align-items: center;
+    gap: 0.4rem;
+    width: 100%;
+}
+
+.theme-option-btn.is-selected {
+    outline: var(--selected-outline);
+    outline-offset: -0.28rem;
+}
+
+body.is-dragging-window {
+    user-select: none;
+}
+
+body.is-dragging-window .ui-tool-title-bar {
+    cursor: grabbing;
+}
+
+.config-window {
+    width: min(78rem, 100%);
+}
+
+.intro-copy {
+    margin-bottom: 0.7rem;
+}
+
+.room-form {
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+}
+
+.config-layout {
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: minmax(0, 1fr) 24rem;
+}
+
+.config-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+.field-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 0.6rem;
+}
+
+.field-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.number-input-wrap {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+}
+
+.number-with-unit .input-unit {
+    min-width: 2rem;
+    text-align: right;
+}
+
+.preview-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+}
+
+.preview-meta {
+    display: flex;
+    justify-content: space-between;
+}
+
+.preview-board {
+    min-height: 13rem;
+    padding: 0.6rem;
+}
+
+.preview-cards {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.preview-card {
+    width: 3.15rem;
+    height: 4.45rem;
+    border-radius: 0.32rem;
+    user-select: none;
+    cursor: grab;
+    transition: transform 170ms ease;
+}
+
+.preview-card .card-center-icon {
+    font-size: 1.18rem;
+}
+
+.preview-card.dragging {
+    opacity: 0.65;
+}
+
+.preview-card.wiggle {
+    animation: wiggle 250ms linear infinite;
+}
+
+@keyframes wiggle {
+    0% { transform: rotate(-2deg); }
+    50% { transform: rotate(2deg); }
+    100% { transform: rotate(-2deg); }
+}
+
+.preview-card-remove {
+    position: absolute;
+    top: -0.35rem;
+    right: -0.35rem;
+    width: 1rem;
+    height: 1rem;
+    opacity: 0;
+    transition: opacity 120ms ease, transform 120ms ease;
+    transform: scale(0.86);
+    pointer-events: none;
+}
+
+.preview-card:hover .preview-card-remove,
+.preview-card-remove:focus {
+    opacity: 1;
+    transform: scale(1);
+    pointer-events: auto;
+}
+
+.preview-card.is-removing {
+    animation: card-pop-out 190ms ease forwards;
+}
+
+@keyframes card-pop-out {
+    from { opacity: 1; transform: scale(1); }
+    to { opacity: 0; transform: scale(0.58) rotate(-10deg); }
+}
+
+.card-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+}
+
+.card-editor-row {
+    display: grid;
+    grid-template-columns: 1fr auto auto;
+    gap: 0.35rem;
+}
+
+.deck-tools-row {
+    display: flex;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+}
+
+.icon-btn {
+    width: 2.45rem;
+    min-width: 2.45rem;
+    height: 2.15rem;
+    padding: 0.1rem;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.icon-btn img {
+    width: 1.05rem;
+    height: 1.05rem;
+    image-rendering: pixelated;
+}
+
+.preset-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 70;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.preset-modal-window {
+    width: min(40rem, 92vw);
+}
+
+.preset-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    max-height: 11rem;
+    overflow-y: auto;
+    margin-bottom: 0.5rem;
+}
+
+.preset-item {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.35rem;
+}
+
+.preset-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.preset-modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.35rem;
+}
+
+.import-pane {
+    margin-top: 0.5rem;
+}
+
+.import-pane textarea {
+    resize: vertical;
+}
+
+.actions-row {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.4rem;
+}
+
+.room-desktop {
+    align-items: stretch;
+}
+
+.room-grid {
+    width: min(78rem, 100%);
+    display: grid;
+    gap: 0.75rem;
+    grid-template-columns: 2fr 1fr;
+}
+
+.room-main-window {
+    min-height: 40rem;
+}
+
+.side-stack {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    min-width: 0;
+}
+
+.participants-window {
+    min-height: 24rem;
+}
+
+.admin-window {
+    min-height: 15rem;
+}
+
+.room-meta {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 0.55rem;
+}
+
+.voting-board {
+    min-height: 14rem;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    padding: 0.6rem;
+    align-content: flex-start;
+}
+
+.vote-card {
+    width: 4.3rem;
+    height: 6rem;
+    border-radius: 0.4rem;
+    cursor: pointer;
+    overflow: visible;
+    transition: transform 120ms ease;
+}
+
+.vote-card .card-center-icon {
+    font-size: 1.65rem;
+}
+
+.vote-card:hover {
+    transform: translateY(-0.2rem);
+}
+
+.vote-summary-window {
+    margin-top: 0.7rem;
+}
+
+.vote-summary-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+}
+
+.summary-metrics {
+    display: flex;
+    justify-content: space-between;
+}
+
+.side-panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.55rem;
+    height: 100%;
+}
+
+.participants-scroll {
+    flex: 1;
+    min-height: 13rem;
+    overflow-y: auto;
+}
+
+.participants-footer {
+    margin-top: 0.5rem;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.35rem;
+    align-items: center;
+}
+
+.participant-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 0.35rem;
+}
+
+.side-controls {
+    margin-top: auto;
+    display: flex;
+    flex-direction: column;
+    gap: 0.45rem;
+    min-width: 0;
+}
+
+.links-block {
+    display: grid;
+    gap: 0.2rem;
+    min-width: 0;
+}
+
+.share-link-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 0.35rem;
+    align-items: center;
+}
+
+.share-admin-toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+}
+
+#share-link {
+    min-width: 0;
+}
+
+#votes-counter,
+#room-message {
+    min-width: 0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+
+.admin-controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.35rem;
+    flex-wrap: wrap;
+}
+
+.join-window {
+    position: fixed;
+    z-index: 60;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: min(27rem, 92vw);
+}
+
+.terminal-modal-overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 72;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.terminal-window {
+    width: min(46rem, 94vw);
+}
+
+.terminal-window-content {
+    padding: 0.55rem;
+}
+
+.terminal-log-output {
+    height: min(55vh, 30rem);
+    overflow-y: auto;
+    padding: 0.5rem;
+    white-space: pre-wrap;
+}
+
+.skeleton-line,
+.skeleton-board,
+.skeleton-table,
+.skeleton-list,
+.skeleton-controls {
+    height: 1.2rem;
+}
+
+.skeleton-board {
+    height: 15rem;
+}
+
+.skeleton-table {
+    height: 8rem;
+}
+
+.skeleton-list {
+    height: 20rem;
+    margin-bottom: 0.45rem;
+}
+
+.skeleton-controls {
+    height: 9rem;
+}
+
+@media (min-width: 900px) {
+    .mobile-control-strip {
+        display: none;
+    }
+
+    .desktop-taskbar {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        min-height: 2.5rem;
+        padding: 0.3rem 0.55rem;
+    }
+
+    .desktop-taskbar .taskbar-program-btn {
+        min-width: 11.2rem;
+        max-width: 15rem;
+    }
+
+    .ui-tool-window {
+        top: 4.25rem;
+        left: 1rem;
+    }
+
+    #desktop {
+        padding: 1rem 1rem 3.4rem;
+    }
+}
+
+@media (max-width: 960px) {
+    .config-layout,
+    .room-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .room-main-window,
+    .participants-window,
+    .admin-window {
+        min-height: unset;
+    }
+}
+
+@media (max-width: 720px) {
+    #desktop {
+        align-items: flex-start;
+        padding-top: 3.65rem;
+    }
+
+    .taskbar-program-btn span {
+        display: none;
+    }
+
+    .taskbar-program-btn {
+        max-width: none;
+        width: 2rem;
+        justify-content: center;
+        padding: 0.2rem;
+    }
+
+    .field-row {
+        grid-template-columns: 1fr;
+    }
+
+    .summary-metrics {
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+}
+
+@media (max-width: 899px) {
+    .ui-tool-window {
+        top: 2.85rem !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: 0 !important;
+        width: 100vw !important;
+        height: calc(100dvh - 2.85rem) !important;
+        min-width: 0;
+        min-height: 0;
+        max-width: 100vw;
+        max-height: calc(100dvh - 2.85rem);
+        resize: none;
+        overflow: auto;
+        transform: none !important;
+    }
+
+    .ui-tool-title-bar {
+        cursor: default;
+    }
+}
+
+@media (min-width: 2560px), (min-resolution: 2dppx) {
+    :root {
+        --ui-scale: 1.24;
+    }
+}

static/css/main.css

@@ -0,0 +1,245 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: calc(var(--base-font-size) * var(--ui-scale));
+}
+
+body {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-main);
+    color: var(--text-primary);
+}
+
+.mobile-control-strip,
+.taskbar {
+    background: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--surface-window) 87%, #ffffff 13%) 0%,
+        color-mix(in srgb, var(--surface-window) 92%, #000000 8%) 100%
+    );
+    box-shadow:
+        inset 0 1px 0 rgba(255, 255, 255, 0.45),
+        0 -1px 0 rgba(0, 0, 0, 0.35);
+}
+
+.mobile-control-strip {
+    border-bottom: var(--window-border-width) solid var(--border-outer);
+}
+
+.taskbar {
+    border-top: var(--window-border-width) solid var(--border-outer);
+}
+
+.taskbar {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 45;
+}
+
+input,
+select,
+textarea,
+button {
+    font: inherit;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.window {
+    background: var(--surface-window);
+    border: var(--window-border-width) solid var(--border-outer);
+    box-shadow: var(--window-shadow);
+}
+
+.title-bar {
+    background: var(--title-bg);
+    color: var(--title-text);
+    padding: 0.25rem 0.45rem;
+    font-size: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.title-bar-controls {
+    display: inline-flex;
+    gap: 0.12rem;
+}
+
+.title-bar-controls button {
+    width: 1rem;
+    height: 1rem;
+    font-size: 0.72rem;
+    line-height: 0.6rem;
+    border: var(--control-border-width) solid var(--border-outer);
+    background: var(--surface-control);
+    color: var(--text-primary);
+}
+
+.window-content {
+    padding: 0.75rem;
+}
+
+.btn {
+    border: var(--control-border-width) solid var(--border-outer);
+    background: var(--surface-control);
+    color: var(--text-primary);
+    box-shadow: var(--button-shadow);
+    padding: 0.3rem 0.65rem;
+    cursor: pointer;
+}
+
+.btn:active {
+    box-shadow: var(--button-shadow-active);
+}
+
+.btn-primary {
+    font-weight: 700;
+}
+
+input[type="text"],
+input[type="number"],
+input[type="password"],
+select,
+textarea {
+    background: var(--surface-input);
+    color: var(--text-primary);
+    border: var(--input-border-width) solid var(--border-input);
+    padding: 0.35rem 0.45rem;
+    width: 100%;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: none;
+    box-shadow: var(--focus-ring);
+}
+
+input[type="number"] {
+    appearance: textfield;
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.status-line {
+    background: var(--surface-status);
+    border: var(--input-border-width) solid var(--border-input);
+    padding: 0.32rem 0.5rem;
+    min-height: 1.8rem;
+}
+
+.participant-list {
+    list-style: none;
+    background: var(--surface-input);
+    border: var(--input-border-width) solid var(--border-input);
+}
+
+.participant-item {
+    border-bottom: 1px dashed var(--border-muted);
+}
+
+.participant-item:last-child {
+    border-bottom: none;
+}
+
+.participant-name.is-admin {
+    color: #2f58ff;
+    text-shadow: 0 0 0.2rem rgba(47, 88, 255, 0.32);
+    font-weight: 700;
+}
+
+.summary-table {
+    width: 100%;
+    border-collapse: collapse;
+    background: var(--surface-input);
+}
+
+.summary-table th,
+.summary-table td {
+    border: 1px solid var(--border-muted);
+    padding: 0.35rem 0.45rem;
+    text-align: left;
+}
+
+.vote-card.is-selected {
+    outline: var(--selected-outline);
+    outline-offset: -0.35rem;
+}
+
+.vote-card.impact {
+    animation: vote-impact 320ms cubic-bezier(0.2, 0.85, 0.2, 1);
+}
+
+@keyframes vote-impact {
+    0% { transform: translateX(0) scale(1) rotate(0deg); }
+    15% { transform: translateX(-0.18rem) scale(0.9) rotate(-2.2deg); }
+    30% { transform: translateX(0.14rem) scale(1.06) rotate(1.7deg); }
+    45% { transform: translateX(-0.1rem) scale(0.98) rotate(-1.4deg); }
+    60% { transform: translateX(0.08rem) scale(1.04) rotate(1deg); }
+    100% { transform: translateX(0) scale(1) rotate(0deg); }
+}
+
+.vote-particle {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0.32rem;
+    height: 0.32rem;
+    border-radius: 999px;
+    pointer-events: none;
+    background: hsl(var(--hue, 120) 95% 66%);
+    box-shadow: 0 0 0.35rem hsl(var(--hue, 120) 95% 66%);
+    transform: translate(-50%, -50%) scale(1);
+    animation: vote-particle-burst 420ms ease-out forwards;
+}
+
+@keyframes vote-particle-burst {
+    0% {
+        opacity: 0.95;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.2);
+    }
+}
+
+.terminal-window .title-bar {
+    background: #0f0f0f;
+    color: #9dff9d;
+}
+
+.terminal-window .title-bar-controls button {
+    background: #1a1a1a;
+    color: #9dff9d;
+    border-color: #2e2e2e;
+}
+
+.terminal-log-output {
+    background: #020a02;
+    color: #84ff84;
+    border: 1px solid #0f4f0f;
+    font-family: "Courier New", Courier, monospace;
+    font-size: 0.9rem;
+    line-height: 1.35;
+}
+
+.terminal-log-line {
+    margin-bottom: 0.18rem;
+}

static/css/styles.css

@@ -1,557 +0,0 @@
-:root {
-    --desktop-bg: #008080;
-    --window-bg: #c0c0c0;
-    --window-text: #000000;
-    --border-light: #ffffff;
-    --border-dark: #000000;
-    --border-mid-light: #dfdfdf;
-    --border-mid-dark: #808080;
-    --title-bg: #000080;
-    --title-text: #ffffff;
-    --input-bg: #ffffff;
-    --status-bg: #b3b3b3;
-    --board-bg: #0f6d3d;
-    --card-bg: #ffffff;
-    --card-text: #000000;
-}
-
-[data-theme="dark"] {
-    --desktop-bg: #0a0a0a;
-    --window-bg: #2b2b2b;
-    --window-text: #e0e0e0;
-    --border-light: #555555;
-    --border-dark: #000000;
-    --border-mid-light: #3a3a3a;
-    --border-mid-dark: #1a1a1a;
-    --title-bg: #000000;
-    --title-text: #00ff00;
-    --input-bg: #111111;
-    --status-bg: #1b1b1b;
-    --board-bg: #0b2f16;
-    --card-bg: #171717;
-    --card-text: #00ff66;
-}
-
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-    font-family: 'VT323', monospace;
-}
-
-body {
-    background-color: var(--desktop-bg);
-    color: var(--window-text);
-    min-height: 100vh;
-    display: flex;
-    flex-direction: column;
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
-    background-size: 4px 4px;
-}
-
-#desktop {
-    flex: 1;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 28px 16px 40px;
-}
-
-.top-bar {
-    position: fixed;
-    top: 12px;
-    right: 12px;
-    z-index: 10;
-}
-
-.window {
-    background-color: var(--window-bg);
-    border: 2px solid;
-    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
-    padding: 2px;
-    box-shadow: inset 1px 1px var(--border-mid-light), inset -1px -1px var(--border-mid-dark);
-}
-
-.title-bar {
-    background-color: var(--title-bg);
-    color: var(--title-text);
-    padding: 2px 4px;
-    font-size: 1.25rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    letter-spacing: 0.8px;
-}
-
-.title-bar-controls {
-    display: inline-flex;
-    gap: 2px;
-}
-
-.title-bar-controls button {
-    background: var(--window-bg);
-    border: 1px solid;
-    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
-    width: 16px;
-    height: 16px;
-    font-size: 0.8rem;
-    line-height: 10px;
-    text-align: center;
-    color: var(--window-text);
-    font-weight: bold;
-    pointer-events: none;
-}
-
-.window-content {
-    padding: 12px;
-}
-
-.room-form {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.field-group {
-    display: flex;
-    flex-direction: column;
-}
-
-.field-group label,
-legend {
-    font-size: 1.2rem;
-    margin-bottom: 4px;
-}
-
-input[type="text"],
-input[type="number"],
-input[type="password"],
-select {
-    background: var(--input-bg);
-    color: var(--window-text);
-    border: 2px solid;
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    padding: 5px 6px;
-    font-size: 1.2rem;
-    width: 100%;
-    outline: none;
-}
-
-input:focus,
-select:focus {
-    box-shadow: inset 0 0 0 1px var(--title-bg);
-}
-
-input[type="number"] {
-    appearance: textfield;
-    -moz-appearance: textfield;
-}
-
-input[type="number"]::-webkit-outer-spin-button,
-input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-}
-
-.number-input-wrap {
-    display: flex;
-    align-items: center;
-    background: var(--input-bg);
-    border: 2px solid;
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    padding: 0 6px;
-    min-height: 38px;
-}
-
-.number-input-wrap input[type="number"] {
-    border: 0;
-    box-shadow: none;
-    background: transparent;
-    padding: 5px 0;
-}
-
-.number-with-unit {
-    gap: 8px;
-}
-
-.input-unit {
-    font-size: 1rem;
-    opacity: 0.8;
-    min-width: 26px;
-    text-align: right;
-}
-
-.btn {
-    background: var(--window-bg);
-    color: var(--window-text);
-    border: 2px solid;
-    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
-    box-shadow: inset 1px 1px var(--border-mid-light), inset -1px -1px var(--border-mid-dark);
-    padding: 4px 12px;
-    font-size: 1.2rem;
-    cursor: pointer;
-    margin-left: 6px;
-}
-
-.btn:active {
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    box-shadow: inset 1px 1px var(--border-mid-dark), inset -1px -1px var(--border-mid-light);
-    padding: 5px 11px 3px 13px;
-}
-
-.btn-primary {
-    font-weight: bold;
-}
-
-.actions-row {
-    text-align: right;
-    margin-top: 4px;
-}
-
-.status-line {
-    background: var(--status-bg);
-    border: 2px solid;
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    padding: 5px 8px;
-    font-size: 1.1rem;
-    min-height: 30px;
-}
-
-.hidden {
-    display: none !important;
-}
-
-/* Config page */
-.config-window {
-    width: 100%;
-    max-width: 980px;
-}
-
-.intro-copy {
-    font-size: 1.3rem;
-    margin-bottom: 12px;
-}
-
-.config-layout {
-    display: grid;
-    grid-template-columns: minmax(0, 1fr) 320px;
-    gap: 12px;
-    align-items: start;
-}
-
-.config-panel {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.field-row {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 10px;
-}
-
-.options-box {
-    padding: 8px;
-}
-
-.options-box legend {
-    padding: 0 4px;
-}
-
-.option-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 1.2rem;
-    margin: 6px 0;
-}
-
-.option-item input[type="checkbox"] {
-    width: 16px;
-    height: 16px;
-    accent-color: #000080;
-}
-
-[data-theme="dark"] .option-item input[type="checkbox"] {
-    accent-color: #00aa00;
-}
-
-.preview-window {
-    width: 100%;
-}
-
-.preview-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.preview-meta {
-    display: flex;
-    justify-content: space-between;
-    font-size: 1.1rem;
-}
-
-.preview-board {
-    background: var(--board-bg);
-    border: 2px solid;
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    border-radius: 2px;
-    min-height: 190px;
-    padding: 10px;
-}
-
-.preview-cards {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-    align-content: flex-start;
-}
-
-.preview-card {
-    position: relative;
-    width: 50px;
-    height: 72px;
-    background: var(--card-bg);
-    border: 2px solid #000;
-    border-radius: 5px;
-    color: var(--card-text);
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1.5rem;
-    font-weight: bold;
-    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
-    user-select: none;
-    transition: transform 180ms ease;
-    cursor: grab;
-}
-
-.preview-card.dragging {
-    opacity: 0.5;
-}
-
-.preview-card-remove {
-    position: absolute;
-    top: -6px;
-    right: -6px;
-    width: 18px;
-    height: 18px;
-    border: 1px solid;
-    border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
-    background: #a40000;
-    color: #fff;
-    font-size: 0.8rem;
-    line-height: 14px;
-    opacity: 0;
-    transform: scale(0.85);
-    pointer-events: none;
-    transition: opacity 130ms ease, transform 130ms ease;
-    cursor: pointer;
-}
-
-.preview-card:hover .preview-card-remove,
-.preview-card-remove:focus {
-    opacity: 1;
-    transform: scale(1);
-    pointer-events: auto;
-}
-
-.preview-card.is-removing {
-    animation: card-pop-out 190ms ease forwards;
-}
-
-@keyframes card-pop-out {
-    from {
-        opacity: 1;
-        transform: scale(1) rotate(0deg);
-    }
-    to {
-        opacity: 0;
-        transform: scale(0.58) rotate(-10deg);
-    }
-}
-
-.hint-text {
-    font-size: 1rem;
-}
-
-.card-editor {
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-
-.card-editor label {
-    font-size: 1.1rem;
-}
-
-.card-editor-row {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    gap: 6px;
-}
-
-/* Room page */
-.room-desktop {
-    align-items: stretch;
-    justify-content: center;
-    padding-top: 60px;
-}
-
-.room-grid {
-    width: min(1180px, 100%);
-    display: grid;
-    gap: 12px;
-    grid-template-columns: 2fr 1fr;
-    grid-template-rows: auto auto;
-    grid-template-areas:
-        "main participants"
-        "controls participants";
-}
-
-.room-main-window {
-    grid-area: main;
-}
-
-.participants-window {
-    grid-area: participants;
-}
-
-.control-window {
-    grid-area: controls;
-}
-
-.room-meta {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 10px;
-    font-size: 1.15rem;
-}
-
-.voting-board {
-    background: var(--board-bg);
-    border: 2px solid;
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    min-height: 260px;
-    padding: 12px;
-    display: flex;
-    flex-wrap: wrap;
-    gap: 10px;
-    align-content: flex-start;
-}
-
-.vote-card {
-    width: 72px;
-    height: 100px;
-    border-radius: 6px;
-    border: 2px solid #000;
-    background: var(--card-bg);
-    color: var(--card-text);
-    font-size: 2rem;
-    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
-    cursor: pointer;
-}
-
-.vote-card:hover {
-    transform: translateY(-3px);
-}
-
-.vote-card.is-selected {
-    outline: 3px solid #ffd200;
-}
-
-.participants-content {
-    max-height: 520px;
-    overflow-y: auto;
-}
-
-.participant-list {
-    list-style: none;
-    background: var(--input-bg);
-    border: 2px solid;
-    border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
-    padding: 5px;
-}
-
-.participant-item {
-    display: flex;
-    justify-content: space-between;
-    padding: 5px;
-    border-bottom: 1px dashed var(--border-mid-dark);
-    font-size: 1.15rem;
-}
-
-.participant-item:last-child {
-    border-bottom: 0;
-}
-
-.control-content {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.links-block {
-    display: grid;
-    gap: 4px;
-}
-
-.links-block input {
-    font-size: 1rem;
-}
-
-.admin-controls {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.join-window {
-    position: fixed;
-    z-index: 30;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: min(420px, 92vw);
-}
-
-#join-error {
-    margin-top: 8px;
-}
-
-@media (max-width: 960px) {
-    .config-layout,
-    .room-grid {
-        grid-template-columns: 1fr;
-    }
-
-    .room-grid {
-        grid-template-areas:
-            "main"
-            "participants"
-            "controls";
-    }
-}
-
-@media (max-width: 720px) {
-    #desktop {
-        align-items: flex-start;
-        padding-top: 56px;
-    }
-
-    .field-row {
-        grid-template-columns: 1fr;
-    }
-
-    .actions-row {
-        display: flex;
-        justify-content: flex-end;
-        gap: 8px;
-    }
-
-    .btn {
-        margin-left: 0;
-    }
-}

static/css/themes/modern.css

@@ -0,0 +1,228 @@
+:root[data-ui-theme="modern"] {
+    --font-main: "Segoe UI Variable Text", "Segoe UI", "Inter", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
+    --desktop-bg: #282c34;
+    --desktop-pattern:
+        radial-gradient(circle at 14% 18%, rgba(97, 175, 239, 0.18) 0, rgba(97, 175, 239, 0) 46%),
+        radial-gradient(circle at 88% 10%, rgba(198, 120, 221, 0.18) 0, rgba(198, 120, 221, 0) 40%),
+        radial-gradient(circle at 54% 100%, rgba(86, 182, 194, 0.13) 0, rgba(86, 182, 194, 0) 52%),
+        linear-gradient(165deg, #2c313c 0%, #232731 100%);
+    --surface-window: rgba(40, 44, 52, 0.92);
+    --surface-control: #3a404b;
+    --surface-input: #21252b;
+    --surface-status: #2f343f;
+    --text-primary: #abb2bf;
+    --title-bg: linear-gradient(90deg, #353b46 0%, #2c313c 100%);
+    --title-text: #e6edf7;
+    --border-outer: #4b5263;
+    --border-input: #5c6370;
+    --border-muted: #3a404b;
+    --window-border-width: 1px;
+    --control-border-width: 1px;
+    --input-border-width: 1px;
+    --window-shadow: 0 18px 45px rgba(14, 16, 20, 0.42);
+    --button-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
+    --button-shadow-active: inset 0 1px 0 rgba(0, 0, 0, 0.25);
+    --focus-ring: 0 0 0 2px rgba(97, 175, 239, 0.35);
+    --card-bg: #21252b;
+    --card-text: #e6edf7;
+    --card-border: #5c6370;
+    --card-border-width: 1px;
+    --selected-outline: 2px solid #61afef;
+    --modal-overlay: rgba(10, 12, 16, 0.62);
+}
+
+:root[data-ui-theme="modern"][data-theme="dark"] {
+    --desktop-bg: #21252b;
+    --desktop-pattern:
+        radial-gradient(circle at 12% 16%, rgba(97, 175, 239, 0.16) 0, rgba(97, 175, 239, 0) 46%),
+        radial-gradient(circle at 86% 8%, rgba(198, 120, 221, 0.16) 0, rgba(198, 120, 221, 0) 42%),
+        linear-gradient(165deg, #252932 0%, #1d2027 100%);
+    --surface-window: rgba(33, 37, 43, 0.95);
+    --surface-control: #343a45;
+    --surface-input: #1d2127;
+    --surface-status: #2a2f38;
+    --text-primary: #b9c2d0;
+    --title-bg: linear-gradient(90deg, #2f343f 0%, #272c35 100%);
+    --title-text: #eef3fb;
+    --border-outer: #5c6370;
+    --border-input: #6c7484;
+    --border-muted: #404652;
+    --window-shadow: 0 20px 52px rgba(8, 10, 13, 0.58);
+    --focus-ring: 0 0 0 2px rgba(97, 175, 239, 0.42);
+    --card-bg: #1d2127;
+    --card-text: #eef3fb;
+    --card-border: #6c7484;
+}
+
+:root[data-ui-theme="modern"] body {
+    background-color: var(--desktop-bg);
+    background-image: var(--desktop-pattern);
+    background-size: cover;
+    background-attachment: fixed;
+}
+
+:root[data-ui-theme="modern"] .window,
+:root[data-ui-theme="modern"] .vote-card,
+:root[data-ui-theme="modern"] .preview-card,
+:root[data-ui-theme="modern"] .btn,
+:root[data-ui-theme="modern"] input,
+:root[data-ui-theme="modern"] select,
+:root[data-ui-theme="modern"] textarea {
+    border-radius: 0.62rem;
+}
+
+:root[data-ui-theme="modern"] .window {
+    backdrop-filter: blur(5px);
+}
+
+:root[data-ui-theme="modern"] .mobile-control-strip,
+:root[data-ui-theme="modern"] .taskbar {
+    background: rgba(40, 44, 52, 0.82);
+    border-top-color: var(--border-input);
+    backdrop-filter: blur(8px);
+}
+
+:root[data-ui-theme="modern"] .title-bar {
+    font-size: 0.96rem;
+    letter-spacing: 0.01em;
+    border-bottom: 1px solid rgba(97, 175, 239, 0.3);
+}
+
+:root[data-ui-theme="modern"] .title-bar-controls button {
+    border-radius: 0.45rem;
+    border-color: var(--border-input);
+    background: #323843;
+}
+
+:root[data-ui-theme="modern"] .title-bar-controls button:hover,
+:root[data-ui-theme="modern"] .btn:hover {
+    background: #434a57;
+    border-color: #7d8699;
+    color: #e6edf7;
+}
+
+:root[data-ui-theme="modern"] .btn {
+    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
+}
+
+:root[data-ui-theme="modern"] .btn:active {
+    transform: translateY(1px);
+}
+
+:root[data-ui-theme="modern"] .btn-primary {
+    background: #61afef;
+    border-color: #61afef;
+    color: #10131a;
+    font-weight: 700;
+}
+
+:root[data-ui-theme="modern"] .btn-primary:hover {
+    background: #79bcf3;
+    border-color: #79bcf3;
+    color: #0d1117;
+}
+
+:root[data-ui-theme="modern"] input::placeholder,
+:root[data-ui-theme="modern"] textarea::placeholder {
+    color: #7d8699;
+}
+
+:root[data-ui-theme="modern"] .status-line,
+:root[data-ui-theme="modern"] .summary-table,
+:root[data-ui-theme="modern"] .participant-list {
+    border-radius: 0.5rem;
+}
+
+:root[data-ui-theme="modern"] .summary-table th {
+    color: #61afef;
+    background: #272c35;
+}
+
+:root[data-ui-theme="modern"] .participant-item:hover {
+    background: rgba(97, 175, 239, 0.08);
+}
+
+:root[data-ui-theme="modern"] .participant-name.is-admin {
+    color: #d19a66;
+    text-shadow: 0 0 0.25rem rgba(209, 154, 102, 0.28);
+}
+
+:root[data-ui-theme="modern"] .preview-board,
+:root[data-ui-theme="modern"] .voting-board {
+    background:
+        linear-gradient(145deg, rgba(97, 175, 239, 0.07) 0%, rgba(33, 37, 43, 0) 34%),
+        linear-gradient(0deg, rgba(92, 99, 112, 0.08), rgba(92, 99, 112, 0.08)),
+        #20242b;
+    border: 1px solid #5c6370;
+    box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.15), inset 0 -20px 40px rgba(0, 0, 0, 0.2);
+}
+
+:root[data-ui-theme="modern"][data-theme="dark"] .preview-board,
+:root[data-ui-theme="modern"][data-theme="dark"] .voting-board {
+    background:
+        linear-gradient(145deg, rgba(97, 175, 239, 0.07) 0%, rgba(33, 37, 43, 0) 35%),
+        linear-gradient(0deg, rgba(108, 116, 132, 0.08), rgba(108, 116, 132, 0.08)),
+        #1b1f25;
+    border-color: #6c7484;
+}
+
+:root[data-ui-theme="modern"] .vote-card,
+:root[data-ui-theme="modern"] .preview-card {
+    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
+}
+
+:root[data-ui-theme="modern"] .vote-card:hover {
+    border-color: #61afef;
+}
+
+:root[data-ui-theme="modern"] .vote-card.is-selected {
+    box-shadow: 0 0 0 1px #61afef, 0 10px 22px rgba(97, 175, 239, 0.22);
+}
+
+:root[data-ui-theme="modern"] .hint-text {
+    color: #7d8699;
+}
+
+:root[data-ui-theme="modern"] .icon-btn img {
+    image-rendering: auto;
+    filter: saturate(0.9) brightness(0.9);
+}
+
+:root[data-ui-theme="modern"] .preset-modal-overlay {
+    background: var(--modal-overlay);
+}
+
+:root[data-ui-theme="modern"] .skeleton-line,
+:root[data-ui-theme="modern"] .skeleton-board,
+:root[data-ui-theme="modern"] .skeleton-table,
+:root[data-ui-theme="modern"] .skeleton-list,
+:root[data-ui-theme="modern"] .skeleton-controls {
+    background: linear-gradient(90deg, rgba(92, 99, 112, 0.22), rgba(122, 132, 148, 0.32), rgba(92, 99, 112, 0.22));
+    background-size: 220% 100%;
+    border: 1px solid #4b5263;
+    border-radius: 0.4rem;
+    animation: modern-skeleton-shimmer 1.2s ease infinite;
+}
+
+@keyframes modern-skeleton-shimmer {
+    from { background-position: 0 0; }
+    to { background-position: -200% 0; }
+}
+
+:root[data-ui-theme="modern"] .terminal-window .title-bar {
+    background: #21252b;
+    color: #98c379;
+}
+
+:root[data-ui-theme="modern"] .terminal-window .title-bar-controls button {
+    background: #2f343f;
+    color: #98c379;
+    border-color: #5c6370;
+}
+
+:root[data-ui-theme="modern"] .terminal-log-output {
+    background: #1b1f25;
+    color: #abb2bf;
+    border: 1px solid #4b5263;
+    font-family: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+}

static/css/themes/no-theme.css

@@ -0,0 +1,66 @@
+:root[data-ui-theme="none"] {
+    --font-main: ui-monospace, monospace;
+    --desktop-bg: #ffffff;
+    --desktop-pattern: none;
+    --surface-window: transparent;
+    --surface-control: #f5f5f5;
+    --surface-input: #ffffff;
+    --surface-status: #ffffff;
+    --text-primary: #000000;
+    --title-bg: transparent;
+    --title-text: #000000;
+    --border-outer: #bdbdbd;
+    --border-input: #bdbdbd;
+    --border-muted: #d3d3d3;
+    --window-border-width: 1px;
+    --control-border-width: 1px;
+    --input-border-width: 1px;
+    --window-shadow: none;
+    --button-shadow: none;
+    --button-shadow-active: none;
+    --focus-ring: 0 0 0 1px #777777;
+    --card-bg: #ffffff;
+    --card-text: #000000;
+    --card-border: #bdbdbd;
+    --card-border-width: 1px;
+    --selected-outline: 1px dashed #000000;
+    --modal-overlay: rgba(0, 0, 0, 0.2);
+}
+
+:root[data-ui-theme="none"][data-theme="dark"] {
+    --desktop-bg: #111111;
+    --surface-window: transparent;
+    --surface-control: #232323;
+    --surface-input: #161616;
+    --surface-status: #161616;
+    --text-primary: #e8e8e8;
+    --title-bg: transparent;
+    --title-text: #e8e8e8;
+    --border-outer: #4a4a4a;
+    --border-input: #4a4a4a;
+    --border-muted: #3a3a3a;
+    --focus-ring: 0 0 0 1px #9a9a9a;
+    --card-bg: #161616;
+    --card-text: #e8e8e8;
+    --card-border: #4a4a4a;
+}
+
+:root[data-ui-theme="none"] body {
+    background-color: var(--desktop-bg);
+    background-image: none;
+}
+
+:root[data-ui-theme="none"] .title-bar-controls,
+:root[data-ui-theme="none"] .icon-btn img {
+    display: none;
+}
+
+:root[data-ui-theme="none"] .window,
+:root[data-ui-theme="none"] .preview-board,
+:root[data-ui-theme="none"] .voting-board {
+    border-style: dashed;
+}
+
+:root[data-ui-theme="none"] .preset-modal-overlay {
+    background: var(--modal-overlay);
+}

static/css/themes/win98.css

@@ -0,0 +1,88 @@
+: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; }
+}