/* Shared light/dark palette and rounded surfaces for the website and CEP. */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101713;--paper:#101713;--card:#1a241d;--white:#1a241d;
  --text:#eef5eb;--ink:#eef5eb;--muted:#a4b4a4;--line:#344737;
  --lime:#d4f778;--accent:#d4f778;--on-accent:#223015;--focus:#d4f778;
  --soft:#233228;--field:#131e17;--hover:#2d4131;--selected:#3a522c;--selected-text:#e6f7d7;
  --clock-bg:#273c21;--clock-text:#e4f4d3;--clock-muted:#b7caaa;--clock-line:#4c6640;
  --notice-bg:#293c24;--notice-text:#d9ebcc;--warning-bg:#3d3020;--warning-text:#f0d2a0;
  --good:#bedc8d;--danger:#efb0a0;--shadow:0 22px 60px #00000045;
  --radius-card:32px;--radius-field:18px;--radius-small:16px;
}
[data-theme="light"]{
  color-scheme:light;
  --bg:#eef2e8;--paper:#eef2e8;--card:#fbfdf7;--white:#fbfdf7;
  --text:#233020;--ink:#233020;--muted:#66765f;--line:#d5dfca;
  --accent:#526f31;--focus:#526f31;--soft:#e6eedc;--field:#f3f7ee;--hover:#dce8ce;
  --selected:#deebcb;--selected-text:#2a411a;
  --notice-bg:#deebce;--notice-text:#334b24;--warning-bg:#f4e7d2;--warning-text:#765528;
  --good:#506f2d;--danger:#9b5040;--shadow:0 22px 60px #263c1315;
}
html,body{background:var(--bg);color:var(--text)}
button{border-radius:999px}
input,select{border-radius:var(--radius-field);background:var(--field);color:var(--text)}
input::placeholder{color:var(--muted);opacity:.75}
label{color:var(--muted)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.entry-panel,.card,.content-card,.controls,.clock-panel,.timer-box,.waiting-card,dialog{border-radius:var(--radius-card)}
.entry-panel{box-shadow:var(--shadow)}
.mode-button{border-radius:24px;background:var(--soft);color:var(--text)}
.mode-button:first-child,.primary,button.primary,.score-save{background:var(--lime);color:var(--on-accent)}
.primary:hover,button.primary:hover{background:#e0ff99}
.secondary,.profile-button{color:var(--text)}
.avatar-arrow{border-radius:50%;background:var(--soft);color:var(--text)}
.avatar-arrow:hover{background:var(--hover)}
.notice,.warning{border-radius:22px;background:var(--notice-bg);border-color:var(--line);color:var(--notice-text)}
.notice.error,.warning{background:var(--warning-bg);color:var(--warning-text);border-color:var(--line)}
.room-tabs{border-radius:999px;background:var(--soft);padding:5px}
.room-tabs button{border-radius:999px}
.room-tabs button.active{background:var(--selected);color:var(--selected-text);border-color:transparent}
.clock-panel,.timer-box{background:var(--clock-bg);color:var(--clock-text)}
.clock-meta,.timer-label,.timer-note,.phases,.phase-track{color:var(--clock-muted)}
.phase-track{border-color:var(--clock-line)}
.track{border-radius:999px;background:var(--clock-line)}
.invite{color:var(--text);border-radius:999px}
.room-code{background:var(--soft);color:var(--accent);border-radius:999px}
.member-status.online,.first-place .rank{color:var(--good)}
.flagged,.person-status.warn{color:var(--warning-text)!important}
.danger-text,.hc-chat-status.error{color:var(--danger)}
.hc-chat-send{border-radius:50%;color:var(--on-accent);flex-shrink:0}
.hc-kick,.hc-message-retry{border-radius:999px}
.hc-chat-input{border-radius:999px;padding-left:16px}
dialog{box-shadow:var(--shadow)}
dialog::backdrop{background:#09150db0;backdrop-filter:blur(5px)}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;flex:0 0 42px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--soft);color:var(--text)}
.theme-toggle:hover{background:var(--hover)}
.theme-toggle svg{width:20px;height:20px}
.theme-icon-moon,[data-theme="light"] .theme-icon-sun{display:none}
[data-theme="light"] .theme-icon-moon{display:block}
.topbar{gap:14px}.topbar .brand{margin-right:auto;border-radius:22px}
.topbar .profile-button{padding:5px 12px 5px 6px;background:var(--soft);max-width:42%}
.profile-button #self-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.settings-menu>summary{width:40px;height:40px;border-radius:50%;background:var(--card);color:var(--text)}
.settings-menu[open]>summary,.settings-menu>summary:hover{color:var(--accent);border-color:var(--accent)}
.settings-menu.update-ready>summary::after,.dot{border-radius:50%}
.settings-popover{width:310px;top:48px;border-radius:26px;padding:18px;box-shadow:var(--shadow);border-color:var(--line)}
.theme-settings{padding:14px 0;border-bottom:1px solid var(--line)}
.update-toggle input{position:relative;flex:0 0 38px;width:38px;height:23px;min-height:23px;padding:0;border:1px solid var(--line);border-radius:999px;background:var(--soft);box-shadow:none;cursor:pointer}
.update-toggle input::before{content:'';position:absolute;left:3px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--muted);transition:transform .16s ease}
.update-toggle input:checked{background:var(--lime);border-color:var(--lime);box-shadow:none}
.update-toggle input:checked::before{background:var(--on-accent);transform:translateX(15px)}
.update-toggle input:disabled{opacity:.5;cursor:default}
.waiting-card{background:var(--card);border-color:var(--line)}
.waiting-card p{color:var(--muted)}
.waiting-clock{color:var(--accent)}
body[data-surface] button{background:var(--soft);color:var(--text)}
body[data-surface] button:hover{background:var(--hover)}
body[data-surface] button.primary,body[data-surface] button.hc-chat-send{background:var(--lime);color:var(--on-accent)}
body[data-surface] button.primary:hover,body[data-surface] button.hc-chat-send:hover{background:#e0ff99}
body[data-surface] button.ghost{background:transparent;color:var(--muted)}
body[data-surface] button.ghost:hover{background:var(--soft);color:var(--text)}
body[data-surface] .room-tabs button:not(.active){background:transparent;color:var(--muted)}
body[data-surface] .room-tabs button.active{background:var(--selected);color:var(--selected-text)}
[data-theme="light"] body[data-surface] .brand-logo{background:#19251a;border-radius:18px;padding:7px 10px;width:105px}
.hc-duration-options button{border-radius:999px;border-color:var(--line);background:var(--soft);color:var(--text)}
.hc-duration-options button.active,body[data-surface] .hc-duration-options button.active{background:var(--lime);border-color:var(--lime);color:var(--on-accent);box-shadow:none}
@media(max-width:450px){.topbar #top-label{display:none}.entry-panel{padding:26px 22px}.settings-popover{padding:16px}.topbar .profile-button{max-width:48%}}
@media(prefers-reduced-motion:reduce){.update-toggle input::before{transition:none}}

/* Updater errors stay legible in both themes. */
#update-status.update-error { color: var(--danger, #f07178); }
#update-status { overflow-wrap: anywhere; }