: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;
}