/* Haushaltsfee shared design system. Both editions use this exact file.
   Components own layout. Semantic tokens own colour, shape and interaction.
   Gold/multicolour wheel art is decoration; red/amber/green carry status. */
:root {
 --bg:#09060f; --card:#201827; --card2:#302638;
 --text:#faf5ff; --text2:#bdb0ca;
 --accent:#d6b9ff; --purple:var(--accent); --green:#84dfac; --orange:#ffd08a; --red:#ffaaa9;
 --surface-base:var(--bg); --surface-raised:var(--card); --surface-control:var(--card2);
 --brand:var(--accent); --brand-high:#e4d0ff; --brand-low:#c6a1f5; --on-brand:#241333;
 --brand-tint:#c49aff16; --border-soft:#dcc6f52b; --border-brand:#ba96da88;
 --focus-ring:#e6d4ff; --success-tint:#84dfac20; --warning-tint:#ffd08a22; --danger-tint:#ffaaa91f;
 --primary-fill:linear-gradient(155deg,var(--brand-high),var(--brand-low));
 --primary-shadow:inset 0 1px 0 #ffffff50,0 5px 18px #bb89fb28;
 --radius-control:16px; --radius:20px; --control-height:48px;
 --motion-fast:150ms; --motion-normal:250ms;
}
body {color:var(--text);background:var(--surface-base);color-scheme:dark;}
header {background:#09060fdb;border-color:var(--border-soft);}
header h1 {background:linear-gradient(135deg,var(--text) 30%,var(--brand) 85%);background-clip:text;-webkit-background-clip:text;}
button,input,textarea {accent-color:var(--brand);}
button {transition:background var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast),opacity var(--motion-fast);}
button:focus-visible,input:focus-visible,textarea:focus-visible {outline:2px solid var(--focus-ring);outline-offset:3px;}
button:disabled {opacity:.48;cursor:not-allowed;filter:none;}
button:not(:disabled):active {filter:brightness(.94);}
.btn {border-radius:var(--radius-control);min-height:var(--control-height);}
/* Primary action is a role, not a per-screen colour choice. */
.btn.hero,.btn.blue,.btn.auth-primary,#saveTask.btn.hero,#wheelResult .btn.hero,#spinBtn,.iconbtn.primary,.micbtn {
 background:var(--primary-fill);color:var(--on-brand);border:1px solid #e5d0ff80;box-shadow:var(--primary-shadow);
}
#spinBtn {font-size:18px;}
#spinBtn:active {box-shadow:var(--primary-shadow);transform:scale(.98);}
.iconbtn.primary svg,.micbtn svg {color:var(--on-brand);stroke:currentColor;}
.btn.ghost,.btn.auth-secondary {background:var(--surface-control);color:var(--text);border:1px solid var(--border-soft);box-shadow:inset 0 1px 0 #ffffff06;}
.btn.auth-secondary {background:var(--brand-tint);color:var(--brand-high);border-color:var(--border-brand);}
.btn.auth-tertiary {background:transparent;color:var(--text2);border:1px solid transparent;box-shadow:none;font-weight:500;}
.btn.danger {background:var(--danger-tint);color:var(--red);border:1px solid #ffaaa930;box-shadow:none;}
.iconbtn {background:var(--surface-raised);border:1px solid var(--border-soft);color:var(--text);}
.iconbtn:active {background:var(--surface-control);}
.speak-wrap textarea,.auth-card input {color:var(--text);background:var(--surface-control);border:1px solid var(--border-soft);border-radius:var(--radius-control);}
.speak-wrap textarea:focus,.auth-card input:focus {border-color:var(--brand);outline:none;box-shadow:0 0 0 2px var(--brand),0 0 18px #b98bff18;}
.speak-wrap textarea::placeholder,.auth-card input::placeholder {color:var(--text2);opacity:.8;}
.micbtn {width:44px;height:44px;min-height:44px;border-radius:50%;}
.micbtn.rec {background:linear-gradient(160deg,#b73149,#8c2338);color:#fff;border-color:#ffb0bd;box-shadow:0 0 0 3px #ffaaa92b;}
.micbtn.rec svg {color:#fff;stroke:currentColor;}
.sheet {background:var(--surface-raised);border:1px solid var(--border-soft);border-bottom:0;}
.sheet .grip:before {background:#cdb8e366;}.sheet .grip:active:before {background:var(--brand);}
.seg,.bgroup {background:var(--surface-raised);border:1px solid var(--border-soft);}
.seg button,.bgroup button {color:var(--text2);min-height:36px;}
.seg button.on,.bgroup button.on {background:var(--brand-tint);color:var(--brand-high);box-shadow:inset 0 0 0 1px var(--border-brand);}
.tile,.donerow,.sect .count,.preview,.result-card,.toast {border:1px solid var(--border-soft);}
.due-badge {color:var(--text2);background:#ffffff0d;}
.due-badge.today {color:var(--orange);background:var(--warning-tint);}
.due-badge.overdue {color:var(--red);background:var(--danger-tint);}
.due-badge.ok,.donerow .check {color:var(--green);background:var(--success-tint);}
.donerow .check svg {color:var(--green);}
.install-card {background:linear-gradient(135deg,#382449,#20172c);border:1px solid var(--border-brand);box-shadow:0 8px 24px #ad77e222;}
.menu-list button {border-color:var(--border-soft);min-height:48px;}
.menu-list button.red,.menu-list button.red svg {color:var(--red);}
.account-bar {background:var(--surface-raised);border-color:var(--border-soft);}
.account-bar button {color:var(--brand);min-height:28px;}
.auth-card h1 {color:var(--text);}.auth-card label {color:var(--text);}
.auth-card p,.auth-card .small {color:var(--text2);}
.sync-error {color:var(--orange)!important;}
.wheel-tools .iconbtn[aria-pressed="true"] {color:var(--brand);}
@media(prefers-reduced-motion:reduce){button {transition:none;}.micbtn.rec {animation:none;}}

/* App identity and account navigation */
header {display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;}
.app-brand {display:flex;align-items:center;gap:10px;min-width:0;}
.app-brand img {width:40px;height:40px;object-fit:cover;border-radius:12px;flex:none;}
.app-brand h1 {font-size:26px;white-space:nowrap;flex:initial;}
.header-tools {display:flex;align-items:center;gap:8px;}
.user-button {position:relative;}
.account-alert {position:absolute;width:9px;height:9px;right:5px;top:5px;background:var(--orange);border:2px solid var(--surface-raised);border-radius:50%;}
.account-menu {margin-bottom:6px;}
.account-menu strong {display:block;font-size:19px;overflow-wrap:anywhere;}
.account-menu small {display:block;color:var(--text2);line-height:1.5;margin:6px 0 18px;}
.account-menu .actions {display:flex;flex-direction:column;}
.account-menu .actions button {text-align:left;white-space:normal;}
@media(max-width:599px) {
 header {grid-template-columns:minmax(0,1fr) 44px;gap:8px;padding:calc(env(safe-area-inset-top) + 10px) 16px 10px;}
 .app-brand h1 {font-size:24px;letter-spacing:-.7px;}
 .app-brand {gap:8px;}.app-brand img {width:34px;height:34px;border-radius:10px;}
 .header-tools {grid-column:1/-1;grid-row:2;justify-content:flex-end;gap:10px;}
 .user-button {grid-column:2;grid-row:1;}
}

.schedule-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px;margin:18px 0;}
.schedule-fields label {display:flex;flex-direction:column;gap:7px;font-size:14px;color:var(--text);min-width:0;}
.schedule-fields input,.schedule-fields select {box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:46px;padding:10px;border:1px solid var(--border-soft);border-radius:12px;background:var(--surface-control);color:var(--text);font:inherit;color-scheme:dark;}
.schedule-fields input:focus,.schedule-fields select:focus {outline:2px solid var(--brand);outline-offset:1px;}
.schedule-wide {grid-column:1/-1;}.weekly-fields {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;}
.optional {display:inline;color:var(--text2);font-size:12px;}.clear-time {min-height:44px;text-align:left;color:var(--brand);font-size:13px;padding:0;}