:root{
  --bg:#F6EAD4; --surface:#FCF6E9; --surface-alt:#F9F0DF; --text:#2B2A24; --muted:#79705D;
  --border:#E4D2AC; --accent:#8B5E34; --accent-contrast:#FFFFFF; --accent-num:#A67C33; --danger:#B3432E;
  --radius:4px; --font-display:"Montserrat",Arial,sans-serif; --font-body:"Source Sans 3",Arial,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-user-theme="light"]){
    --bg:#1B1913; --surface:#242019; --surface-alt:#2C271E; --text:#EDE7D8; --muted:#A79E8A;
    --border:#3A3526; --accent:#D9A45E; --accent-contrast:#12160F; --accent-num:#D9A94A; --danger:#D9705A;
  }
}
:root[data-user-theme="dark"]{
  --bg:#1B1913; --surface:#242019; --surface-alt:#2C271E; --text:#EDE7D8; --muted:#A79E8A;
  --border:#3A3526; --accent:#D9A45E; --accent-contrast:#12160F; --accent-num:#D9A94A; --danger:#D9705A;
}
/* Colour schemes — pastel surfaces, a richer named accent. The default
   (no data-scheme attribute) is the beige scheme defined above. */
:root[data-scheme="green"]{
  --bg:#EAF2EA; --surface:#F5FAF5; --surface-alt:#F0F6F0; --text:#223026; --muted:#6B8073;
  --border:#CFE0D2; --accent:#2F5D42; --accent-contrast:#FFFFFF; --accent-num:#4C8B63; --danger:#B3432E;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="green"]:not([data-user-theme="light"]){
    --bg:#131912; --surface:#1B2319; --surface-alt:#212B1E; --text:#E4EDE0; --muted:#93A390;
    --border:#34402F; --accent:#6FAE84; --accent-contrast:#0F150F; --accent-num:#8FC29E; --danger:#D9705A;
  }
}
:root[data-scheme="green"][data-user-theme="dark"]{
  --bg:#131912; --surface:#1B2319; --surface-alt:#212B1E; --text:#E4EDE0; --muted:#93A390;
  --border:#34402F; --accent:#6FAE84; --accent-contrast:#0F150F; --accent-num:#8FC29E; --danger:#D9705A;
}
:root[data-scheme="blue"]{
  --bg:#EAF1F7; --surface:#F6FAFC; --surface-alt:#F0F6FA; --text:#202B33; --muted:#5F7885;
  --border:#CBDCE8; --accent:#2E5C82; --accent-contrast:#FFFFFF; --accent-num:#4A7FA6; --danger:#B3432E;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="blue"]:not([data-user-theme="light"]){
    --bg:#10161C; --surface:#171F26; --surface-alt:#1D262E; --text:#E2ECF2; --muted:#8CA0AC;
    --border:#2E3B44; --accent:#6FA3C9; --accent-contrast:#0D141A; --accent-num:#8FBBDA; --danger:#D9705A;
  }
}
:root[data-scheme="blue"][data-user-theme="dark"]{
  --bg:#10161C; --surface:#171F26; --surface-alt:#1D262E; --text:#E2ECF2; --muted:#8CA0AC;
  --border:#2E3B44; --accent:#6FA3C9; --accent-contrast:#0D141A; --accent-num:#8FBBDA; --danger:#D9705A;
}
:root[data-scheme="coral"]{
  --bg:#FBEDE8; --surface:#FDF6F3; --surface-alt:#FCF3EF; --text:#3A2620; --muted:#8B6558;
  --border:#EED0C4; --accent:#C0563E; --accent-contrast:#FFFFFF; --accent-num:#C97A54; --danger:#96323C;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="coral"]:not([data-user-theme="light"]){
    --bg:#1D1512; --surface:#251C18; --surface-alt:#2B211C; --text:#F2E4DC; --muted:#B79A8C;
    --border:#3D2E27; --accent:#E08868; --accent-contrast:#1D1512; --accent-num:#E6A182; --danger:#D97A85;
  }
}
:root[data-scheme="coral"][data-user-theme="dark"]{
  --bg:#1D1512; --surface:#251C18; --surface-alt:#2B211C; --text:#F2E4DC; --muted:#B79A8C;
  --border:#3D2E27; --accent:#E08868; --accent-contrast:#1D1512; --accent-num:#E6A182; --danger:#D97A85;
}
:root[data-scheme="gray"]{
  --bg:#ECEBE8; --surface:#F7F6F4; --surface-alt:#F2F1EE; --text:#2B2A28; --muted:#78766F;
  --border:#DCDAD4; --accent:#5B5B56; --accent-contrast:#FFFFFF; --accent-num:#7A7A72; --danger:#B3432E;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="gray"]:not([data-user-theme="light"]){
    --bg:#171715; --surface:#201F1D; --surface-alt:#282725; --text:#E8E7E3; --muted:#9C9A92;
    --border:#37352F; --accent:#A8A79D; --accent-contrast:#1A1917; --accent-num:#C2C0B5; --danger:#D9705A;
  }
}
:root[data-scheme="gray"][data-user-theme="dark"]{
  --bg:#171715; --surface:#201F1D; --surface-alt:#282725; --text:#E8E7E3; --muted:#9C9A92;
  --border:#37352F; --accent:#A8A79D; --accent-contrast:#1A1917; --accent-num:#C2C0B5; --danger:#D9705A;
}
:root[data-scheme="pink"]{
  --bg:#FAEBF1; --surface:#FEF7FA; --surface-alt:#FCF0F5; --text:#3A2430; --muted:#8B637A;
  --border:#F0D3E1; --accent:#B23D6F; --accent-contrast:#FFFFFF; --accent-num:#C9578A; --danger:#B3432E;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="pink"]:not([data-user-theme="light"]){
    --bg:#1D1417; --surface:#251A1F; --surface-alt:#2B1E24; --text:#F2E0E8; --muted:#B98CA0;
    --border:#3D2731; --accent:#E585A8; --accent-contrast:#1D1417; --accent-num:#EDA0BE; --danger:#D9705A;
  }
}
:root[data-scheme="pink"][data-user-theme="dark"]{
  --bg:#1D1417; --surface:#251A1F; --surface-alt:#2B1E24; --text:#F2E0E8; --muted:#B98CA0;
  --border:#3D2731; --accent:#E585A8; --accent-contrast:#1D1417; --accent-num:#EDA0BE; --danger:#D9705A;
}
/* Neon — Blade Runner duotone: hot magenta for the accent, electric
   cyan reserved for numbers (same "second colour only on numbers"
   rule every other scheme follows, just turned up to a neon-noir
   pair). Light variant reads as an overcast daytime version of the
   same city rather than a washed-out pastel. */
:root[data-scheme="neon"]{
  --bg:#E7E9F2; --surface:#F6F7FB; --surface-alt:#EFF1F8; --text:#181825; --muted:#5B5E78;
  --border:#C7CBDE; --accent:#C81E7A; --accent-contrast:#FFFFFF; --accent-num:#0E7AA8; --danger:#B3432E;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="neon"]:not([data-user-theme="light"]){
    --bg:#0A0A12; --surface:#13131F; --surface-alt:#1A1A2E; --text:#E8E6F5; --muted:#8B88AC;
    --border:#2A2A45; --accent:#FF2E88; --accent-contrast:#0A0A12; --accent-num:#00E5FF; --danger:#FF5555;
  }
}
:root[data-scheme="neon"][data-user-theme="dark"]{
  --bg:#0A0A12; --surface:#13131F; --surface-alt:#1A1A2E; --text:#E8E6F5; --muted:#8B88AC;
  --border:#2A2A45; --accent:#FF2E88; --accent-contrast:#0A0A12; --accent-num:#00E5FF; --danger:#FF5555;
}
/* Классика — сдержанная бело-серо-чёрная палитра с фирменным синим
   акцентом, в духе строгих технологичных сайтов. Никакого цветного фона —
   вся индивидуальность в оттенках нейтралей и синем как единственном цвете. */
:root[data-scheme="classic"]{
  --bg:#F5F5F7; --surface:#FFFFFF; --surface-alt:#FBFBFD; --text:#1D1D1F; --muted:#86868B;
  --border:#D2D2D7; --accent:#0071E3; --accent-contrast:#FFFFFF; --accent-num:#0068D1; --danger:#FF3B30;
}
@media (prefers-color-scheme: dark){
  :root[data-scheme="classic"]:not([data-user-theme="light"]){
    --bg:#000000; --surface:#1D1D1F; --surface-alt:#161617; --text:#F5F5F7; --muted:#98989D;
    --border:#424245; --accent:#2997FF; --accent-contrast:#FFFFFF; --accent-num:#40A9FF; --danger:#FF453A;
  }
}
:root[data-scheme="classic"][data-user-theme="dark"]{
  --bg:#000000; --surface:#1D1D1F; --surface-alt:#161617; --text:#F5F5F7; --muted:#98989D;
  --border:#424245; --accent:#2997FF; --accent-contrast:#FFFFFF; --accent-num:#40A9FF; --danger:#FF453A;
}
*{box-sizing:border-box;min-width:0;}
html,body{max-width:100%;overflow-x:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);margin:0;}
.wrap{max-width:960px;margin:0 auto;padding:40px 20px 80px;position:relative;}
@media (max-width:480px){.wrap{padding:28px 14px 60px;}}
h1,h2,h3{font-family:var(--font-display);text-wrap:balance;margin:0;font-weight:600;}
a{color:var(--accent);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--muted);margin:0 0 6px;}
.account-bar{display:flex;justify-content:flex-end;margin-bottom:12px;position:relative;}
.btn-menu-toggle{background:var(--surface);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius);width:36px;height:36px;font-size:1.05rem;line-height:1;cursor:pointer;flex-shrink:0;}
.btn-menu-toggle:hover{border-color:var(--accent);color:var(--accent);}
.account-menu{display:none;position:absolute;top:44px;right:0;z-index:20;min-width:220px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px;box-shadow:0 4px 16px rgba(0,0,0,.16);}
.account-menu.is-open{display:flex;flex-direction:column;gap:10px;}
.account-menu .select-theme,.account-menu .select-scheme,.account-menu .btn-account{width:100%;}
.select-theme,.select-scheme{background:var(--bg);border:1px solid var(--border);color:var(--muted);
  border-radius:var(--radius);padding:6px 10px;font-family:var(--font-body);font-size:.8rem;cursor:pointer;}
.select-theme:hover,.select-scheme:hover{border-color:var(--accent);color:var(--accent);}
.btn-account{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:6px 12px;font-family:var(--font-body);font-size:.8rem;cursor:pointer;}
.btn-account:hover{border-color:var(--accent);color:var(--accent);}
.account-email{font-size:.8rem;color:var(--muted);word-break:break-all;}
.overall-bar{margin-bottom:24px;}
.bar-track.big{height:12px;margin-bottom:8px;}
.overall-bar .bar-meta{font-size:.82rem;margin-bottom:0;}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius);margin-bottom:20px;
  max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.view-btn{background:var(--surface);border:none;color:var(--muted);padding:7px 16px;flex-shrink:0;white-space:nowrap;
  font-family:var(--font-body);font-size:.8rem;cursor:pointer;}
.view-btn.is-active{background:var(--accent);color:var(--accent-contrast);}
.view-btn:not(.is-active):hover{color:var(--accent);}
.wheel-wrap{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 24px;}
.wheel-svg{width:100%;max-width:420px;height:auto;}
.wheel-label{font-family:var(--font-body);font-size:11px;font-weight:600;fill:var(--text);}
.wheel-level{font-family:var(--font-display);font-size:10px;font-weight:600;fill:var(--accent-num);}
.wheel-hint{max-width:420px;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.5;margin:0;}
.calendar-wrap{display:flex;flex-direction:column;gap:16px;padding:8px 0 24px;}
.calendar-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.calendar-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.btn-cal-nav{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:5px 10px;cursor:pointer;font-size:.85rem;font-family:var(--font-body);}
.btn-cal-nav:hover{border-color:var(--accent);color:var(--accent);}
.calendar-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600;white-space:nowrap;}
.calendar-month-total{font-family:var(--font-display);font-size:1.3rem;font-weight:700;
  color:var(--accent-num);font-variant-numeric:tabular-nums;white-space:nowrap;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr) auto;gap:5px;}
.cal-dow{font-size:.65rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);text-align:center;padding-bottom:2px;}
.cal-week-label{font-size:.65rem;color:var(--muted);text-align:center;padding-bottom:2px;}
.cal-cell{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  min-height:48px;padding:4px;display:flex;flex-direction:column;gap:2px;margin:0;
  font:inherit;font-family:var(--font-body);text-align:left;width:100%;appearance:none;}
button.cal-cell{cursor:pointer;}
button.cal-cell:hover{border-color:var(--accent);}
.cal-cell.is-outside{opacity:.45;}
.cal-cell.is-today{border-color:var(--accent);border-width:2px;}
.cal-cell.is-future{opacity:.4;}
.cal-day-num{font-size:.68rem;color:var(--muted);font-variant-numeric:tabular-nums;}
.cal-day-xp{font-family:var(--font-display);font-size:.72rem;font-weight:700;color:var(--accent-num);
  font-variant-numeric:tabular-nums;}
.cal-week-total{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);
  min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:2px;}
.cal-week-total-num{font-family:var(--font-display);font-size:.72rem;font-weight:700;color:var(--accent-num);}
.cal-week-total-label{font-size:.58rem;color:var(--muted);text-transform:uppercase;}
.day-editor{margin-top:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;display:flex;flex-direction:column;gap:16px;}
.day-editor-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.day-editor-title{font-size:1rem;}
.day-editor-sphere-title{font-family:var(--font-display);font-size:.8rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin:0 0 6px;}
.ach-groups{display:flex;flex-direction:column;gap:28px;padding:8px 0 24px;}
.ach-section-title{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 12px;}
.ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;}
@media (max-width:680px){.ach-grid{grid-template-columns:1fr;}}
.ach-card{display:flex;gap:12px;align-items:flex-start;
  background:color-mix(in srgb, var(--surface) 65%, transparent);
  border:1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius:var(--radius);padding:14px 16px;opacity:.55;line-height:1.25;}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .ach-card{backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);}
}
.ach-card.is-unlocked{opacity:1;border-color:color-mix(in srgb, var(--accent) 55%, transparent);}
.ach-icon{font-size:1.4rem;color:var(--accent-num);flex-shrink:0;line-height:1;}
.ach-name{font-family:var(--font-display);font-weight:600;font-size:.95rem;}
.ach-desc{font-size:.82rem;color:var(--muted);margin-top:2px;}
.ach-date{font-size:.72rem;color:var(--accent-num);margin-top:6px;font-variant-numeric:tabular-nums;}
.ach-progress{font-size:.72rem;color:var(--muted);margin-top:6px;font-variant-numeric:tabular-nums;}
.wishes-wrap{padding:8px 0 24px;}
.wish-num{color:var(--muted);font-variant-numeric:tabular-nums;flex-shrink:0;}
.edit-wish{display:flex;flex-wrap:wrap;gap:8px;padding:8px 6px;align-items:center;width:100%;}
.edit-wish-text{flex:1 1 200px;min-width:0;background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:6px 8px;font-family:var(--font-body);font-size:.85rem;color:var(--text);}
.confirm-del{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:6px;width:100%;}
.confirm-del-label{font-size:.85rem;color:var(--muted);}
.btn-del-yes{background:none;color:var(--danger);border:1px solid var(--danger);border-radius:var(--radius);
  padding:5px 12px;font-size:.8rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.btn-del-yes:hover{background:var(--bg);}
.btn-del-cancel{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:5px 12px;font-size:.8rem;cursor:pointer;white-space:nowrap;}
.btn-del-cancel:hover{background:var(--bg);border-color:var(--muted);}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;}
.btn-search-toggle{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:6px 11px;font-size:.9rem;line-height:1;cursor:pointer;flex-shrink:0;}
.btn-search-toggle:hover{border-color:var(--accent);color:var(--accent);}
.btn-search-toggle.is-active{border-color:var(--accent);color:var(--accent);}
.search-input{flex:1 1 180px;min-width:0;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:7px 10px;font-family:var(--font-body);font-size:.85rem;color:var(--text);}
.btn-toggle-done{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:7px 12px;font-family:var(--font-body);font-size:.78rem;cursor:pointer;white-space:nowrap;}
.btn-toggle-done:hover{border-color:var(--accent);color:var(--accent);}
.btn-toggle-done.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-contrast);}
.jump-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.jump-chip{background:var(--surface);border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:5px 12px;font-family:var(--font-body);font-size:.78rem;cursor:pointer;}
.jump-chip:hover{border-color:var(--accent);color:var(--accent);}
.btn-sphere-editor-toggle{background:none;border:1px dashed var(--border);color:var(--muted);border-radius:var(--radius);
  padding:5px 12px;font-family:var(--font-body);font-size:.78rem;cursor:pointer;flex-shrink:0;white-space:nowrap;}
.btn-sphere-editor-toggle:hover{border-color:var(--accent);color:var(--accent);}
.sphere-editor{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:24px;display:flex;flex-direction:column;gap:14px;}
.sphere-editor-title{font-size:1rem;}
.sphere-editor-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.sphere-editor-name,.sphere-editor-short{background:var(--bg);border:1px solid var(--border);
  border-radius:var(--radius);padding:6px 8px;font-family:var(--font-body);font-size:.85rem;color:var(--text);}
.sphere-editor-name{flex:1 1 220px;min-width:0;}
.sphere-editor-short{flex:0 0 120px;}
.sphere-editor-add{border-top:1px dashed var(--border);padding-top:14px;}
.today-count{font-size:.76rem;color:var(--muted);margin:-8px 0 12px;font-variant-numeric:tabular-nums;}
header.top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px;
  margin-bottom:32px;border-bottom:1px solid var(--border);padding-bottom:24px;}
header.top h1{font-size:1.7rem;font-weight:600;}
.top-stats{display:flex;gap:32px;flex-wrap:wrap;}
.stat{display:flex;flex-direction:column;align-items:flex-end;}
.stat-num{font-family:var(--font-display);font-size:2.1rem;font-weight:600;color:var(--accent-num);
  font-variant-numeric:tabular-nums;line-height:1;}
:root[data-scheme="neon"] .stat-num{text-shadow:0 0 10px color-mix(in srgb, var(--accent-num) 70%, transparent);}
.stat-label{font-size:.72rem;color:var(--muted);margin-top:4px;text-transform:uppercase;letter-spacing:.06em;}
.spheres{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
@media (max-width:680px){.spheres{grid-template-columns:1fr;}.top-stats{gap:20px;}}
@media (max-width:480px){
  .top-stats{gap:14px;flex-wrap:nowrap;width:100%;justify-content:center;
    overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .stat{flex:0 0 auto;min-width:0;align-items:center;}
  .stat-num{font-size:1.9rem;}
  .stat-label{font-size:.58rem;margin-top:2px;text-align:center;}
  header.top{flex-direction:column;align-items:stretch;gap:22px;}
  header.top>div:first-child{padding-right:44px;}
  /* Бургер уходит из своего ряда и встаёт вровень с заголовком — экономит
     вертикальное место на маленьком экране. */
  .account-bar{position:absolute;top:28px;right:14px;margin-bottom:0;}
  .jump-nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
  .jump-chip{flex-shrink:0;padding:4px 10px;font-size:.7rem;}
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 22px;}
.card.is-collapsed{padding-top:14px;padding-bottom:14px;}
.card.is-collapsed .bar-meta{margin-bottom:8px;}
.card.is-collapsed .today-count{margin-bottom:0;}
.spheres .card:nth-child(even){background:var(--surface-alt);}
.card-head{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;row-gap:4px;
  margin-bottom:14px;gap:10px;cursor:pointer;border-radius:var(--radius);}
.card-head:hover h2{color:var(--accent);}
.card-head h2{overflow-wrap:anywhere;font-size:1.1rem;transition:color .15s ease;}
.card-head-right{display:flex;align-items:center;gap:8px;}
.badge{font-family:var(--font-display);font-size:.78rem;font-weight:700;color:var(--accent-contrast);
  background:var(--accent);border-radius:var(--radius);padding:3px 10px;white-space:nowrap;}
.chev{display:inline-block;color:var(--muted);font-size:.7rem;transition:transform .15s ease;}
.card-head[aria-expanded="false"] .chev{transform:rotate(-90deg);}
@media (prefers-reduced-motion:reduce){.chev,.card-head h2{transition:none;}}
.bar-track{height:8px;background:var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:6px;}
.bar-fill{height:100%;background:var(--accent);transition:width .25s ease;}
@media (prefers-reduced-motion:reduce){.bar-fill{transition:none;}}
.bar-meta{display:flex;justify-content:space-between;font-size:.76rem;color:var(--muted);margin-bottom:16px;
  font-family:var(--font-display);font-variant-numeric:tabular-nums;}
ul.quests{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;line-height:1.25;}
.quest{display:flex;align-items:stretch;gap:2px;}
.quest label{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:var(--radius);cursor:pointer;flex:1;min-width:0;}
.quest label:hover{background:var(--bg);}
.quest input{width:16px;height:16px;accent-color:var(--accent);flex-shrink:0;}
.quest-name{flex:1;font-size:.92rem;overflow-wrap:anywhere;}
.quest.is-done .quest-name{color:var(--muted);text-decoration:line-through;}
.quest-xp{font-family:var(--font-display);font-size:.78rem;font-weight:600;color:var(--accent-num);
  font-variant-numeric:tabular-nums;flex-shrink:0;}
.btn-edit{background:none;border:none;color:var(--muted);font-size:.85rem;line-height:1;cursor:pointer;
  padding:4px 10px;border-radius:var(--radius);flex-shrink:0;}
.btn-edit:hover{background:var(--bg);color:var(--accent);}
.btn-del{background:none;border:none;color:var(--muted);font-size:.85rem;line-height:1;cursor:pointer;
  padding:4px 10px;border-radius:var(--radius);flex-shrink:0;}
.btn-del:hover{background:var(--bg);color:var(--danger);}
.quest-empty{font-style:italic;color:var(--muted);font-size:.85rem;padding:6px 6px;}
.edit-quest{display:flex;flex-wrap:wrap;gap:8px;padding:8px 6px;align-items:center;width:100%;}
.edit-name{flex:1 1 140px;min-width:0;}
.edit-xp{width:84px;flex:0 0 84px;cursor:pointer;}
.edit-name,.edit-xp{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:6px 8px;font-family:var(--font-body);font-size:.85rem;color:var(--text);}
.btn-save{background:var(--accent);color:var(--accent-contrast);border:none;border-radius:var(--radius);
  padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.btn-save:hover{filter:brightness(1.08);}
.btn-cancel{background:none;border:1px solid var(--border);color:var(--muted);border-radius:var(--radius);
  padding:6px 12px;font-size:.82rem;cursor:pointer;white-space:nowrap;}
.btn-cancel:hover{background:var(--bg);border-color:var(--muted);}
.add-quest{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:12px;border-top:1px dashed var(--border);}
.add-name{flex:1 1 140px;min-width:0;}
.add-xp{width:84px;flex:0 0 84px;cursor:pointer;}
.add-name,.add-xp{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);
  padding:6px 8px;font-family:var(--font-body);font-size:.85rem;color:var(--text);}
.btn-add{background:var(--accent);color:var(--accent-contrast);border:none;border-radius:var(--radius);
  padding:6px 14px;font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;}
.btn-add:hover{filter:brightness(1.08);}
.log{margin-top:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 22px;}
.log-title{font-size:1rem;margin-bottom:12px;}
.log-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:.85rem;line-height:1.25;}
.log-list li{display:flex;gap:12px;color:var(--muted);}
.log-date{width:88px;flex-shrink:0;font-family:var(--font-display);font-variant-numeric:tabular-nums;}
.log-quest{flex:1;color:var(--text);}
.log-xp{font-family:var(--font-display);font-weight:600;color:var(--accent-num);
  font-variant-numeric:tabular-nums;flex-shrink:0;}
.log-empty{font-style:italic;}
.note{margin-top:20px;font-size:.8rem;color:var(--muted);line-height:1.5;}
body.is-saving::after{content:"Сохраняю…";position:fixed;bottom:16px;right:16px;background:var(--accent);
  color:var(--accent-contrast);padding:7px 16px;border-radius:var(--radius);font-size:.8rem;
  box-shadow:0 2px 10px rgba(0,0,0,.15);}
.toast-stack{position:fixed;bottom:60px;right:16px;display:flex;flex-direction:column-reverse;gap:8px;
  z-index:1000;max-width:calc(100vw - 32px);pointer-events:none;}
.toast{background:var(--surface);border:1px solid var(--accent);color:var(--text);border-radius:var(--radius);
  padding:10px 16px;font-size:.85rem;box-shadow:0 4px 16px rgba(0,0,0,.18);animation:toast-in .2s ease;}
.toast.is-leaving{animation:toast-out .3s ease forwards;}
@keyframes toast-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px);}}
@media (prefers-reduced-motion:reduce){.toast{animation:none;}.toast.is-leaving{animation:none;opacity:0;}}
.onboarding-hint,.streak-risk-hint{background:var(--surface-alt);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;font-size:.85rem;color:var(--muted);margin-bottom:20px;}

/* --- Инструкция «Как пользоваться» (модалка поверх приложения) --- */
.help-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;
  display:flex;align-items:flex-start;justify-content:center;padding:32px 16px;overflow-y:auto;}
.help-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  max-width:600px;width:100%;padding:24px;box-shadow:0 8px 30px rgba(0,0,0,.3);}
.help-head{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.help-head h2{font-size:1.25rem;}
.help-close{width:32px;height:32px;padding:0;flex-shrink:0;}
.help-body{display:flex;flex-direction:column;gap:16px;}
.help-body section{border-bottom:1px dashed var(--border);padding-bottom:14px;}
.help-body section:last-child{border-bottom:none;padding-bottom:0;}
.help-body h3{font-size:.92rem;margin-bottom:6px;}
.help-body p,.help-body li{font-size:.85rem;color:var(--text);line-height:1.55;margin:0;}
.help-body ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
@media (max-width:480px){.help-overlay{padding:16px 10px;}.help-card{padding:18px;}}

/* --- Экран входа: мини-лендинг, чтобы новому человеку сразу было понятно,
   куда он попал, а не голая форма входа. Всегда в классической схеме
   (см. renderAuthScreen) — своя цветовая схема начинается только внутри
   аккаунта. --- */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:64px 20px;
  background:
    radial-gradient(ellipse 900px 540px at 50% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--bg);
}
.auth-page{max-width:720px;width:100%;display:flex;flex-direction:column;align-items:center;gap:44px;}
.auth-hero{text-align:center;max-width:580px;}
.auth-hero .eyebrow{text-align:center;}
.auth-hero h1{font-size:clamp(2rem, 5vw, 3.1rem);font-weight:700;letter-spacing:-.02em;line-height:1.02;margin:14px 0 0;}
.auth-hero-sub{font-size:1.05rem;color:var(--muted);line-height:1.35;margin:16px 0 0;}
.auth-features{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;}
@media (max-width:600px){.auth-features{grid-template-columns:1fr;}}
.auth-feature{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:20px 22px;display:flex;gap:14px;align-items:flex-start;text-align:left;
  box-shadow:0 1px 2px rgba(0,0,0,.04);transition:transform .2s ease, box-shadow .2s ease;}
@media (hover:hover){.auth-feature:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(0,0,0,.09);}}
.auth-feature-icon{display:flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:10px;flex-shrink:0;font-size:1.25rem;line-height:1;
  background:color-mix(in srgb, var(--accent) 14%, var(--surface-alt));}
.auth-feature h3{font-size:.92rem;margin-bottom:4px;line-height:1.2;}
.auth-feature p{font-size:.82rem;color:var(--muted);line-height:1.3;margin:0;}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:32px 28px;width:100%;display:flex;flex-direction:column;gap:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.07);}
.auth-card-title{font-size:1.3rem;}
.auth-title{font-size:1.4rem;}
.auth-subtitle{font-size:.88rem;color:var(--muted);line-height:1.35;margin:0;}
.auth-hero,.auth-features,.auth-card{animation:auth-rise .55s ease both;}
.auth-features{animation-delay:.08s;}
.auth-card{animation-delay:.16s;}
@keyframes auth-rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){.auth-hero,.auth-features,.auth-card{animation:none;}}
.auth-input{background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:11px 14px;font-family:var(--font-body);font-size:.95rem;color:var(--text);width:100%;}
/* Браузер красит автоподставленный email своим жёлтым фоном поверх наших
   цветов — этот трюк с огромной задержкой transition отменяет перекраску. */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:0 0 0 1000px var(--bg) inset;
  box-shadow:0 0 0 1000px var(--bg) inset;
  transition:background-color 9999s ease-in-out 0s;
  caret-color:var(--text);
}
.auth-btn{background:var(--accent);color:var(--accent-contrast);border:none;border-radius:10px;
  padding:12px 20px;font-size:.95rem;font-weight:600;cursor:pointer;width:100%;
  transition:filter .15s ease, transform .15s ease;}
.auth-btn:hover{filter:brightness(1.08);transform:translateY(-1px);}
.auth-btn:disabled{opacity:.6;cursor:default;}
.auth-note{font-size:.8rem;color:var(--muted);line-height:1.35;margin:0;}
.auth-error{font-size:.82rem;color:var(--danger);margin:0;}
.auth-loading{min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--muted);}