/* Layout: one column "утренний экран" — день сверху, направления сеткой, обучение карточками, ритм недели внизу */
:root{
  --bg:#F3F4F2; --surface:#FFFFFF; --ink:#1C2320; --muted:#66706B; --line:#DCE0DC;
  --accent:#2E5E57; --accent-soft:#E3EEEB; --gold:#A7812F; --gold-soft:#F4ECDA;
  --rose:#9A4A5C; --rose-soft:#F4E4E8; --slate:#4B5A74; --slate-soft:#E4E8F0; --plum:#7A3F6E; --plum-soft:#F1E4EE; --yellow:#8A6A00; --yellow-soft:#FFF1B8; --yellow-line:#E9CF5C; --grey-soft:#ECEDEA;
  --display:"Forum","Cormorant Garamond",Georgia,serif;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme]){
  --bg:#151917; --surface:#1D2220; --ink:#E7ECE9; --muted:#9AA49F; --line:#2E3532;
  --accent:#7DBFB4; --accent-soft:#1F3431; --gold:#D9B266; --gold-soft:#342C1C;
  --rose:#D98FA0; --rose-soft:#36232A; --slate:#9DB0D2; --slate-soft:#232A38; --plum:#D8A1CB; --plum-soft:#35222F; --yellow:#F2D46B; --yellow-soft:#3A3217; --yellow-line:#6B5A1E; --grey-soft:#262B29; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#151917; --surface:#1D2220; --ink:#E7ECE9; --muted:#9AA49F; --line:#2E3532;
  --accent:#7DBFB4; --accent-soft:#1F3431; --gold:#D9B266; --gold-soft:#342C1C;
  --rose:#D98FA0; --rose-soft:#36232A; --slate:#9DB0D2; --slate-soft:#232A38; --plum:#D8A1CB; --plum-soft:#35222F; --yellow:#F2D46B; --yellow-soft:#3A3217; --yellow-line:#6B5A1E; --grey-soft:#262B29; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:15px/1.5 var(--body)}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px;padding-block:28px 64px;display:grid;gap:40px}
h1,h2{font-family:var(--display);font-weight:400;margin:0;text-wrap:balance}
h1{font-size:clamp(34px,6vw,52px);line-height:1.05}
h2{font-size:28px}
.eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
.top{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:flex-end}
.count{display:flex;align-items:baseline;gap:10px;background:var(--gold-soft);border-radius:14px;padding:12px 18px}
.counts{display:flex;flex-wrap:wrap;gap:10px}
.count.warm{background:var(--accent-soft)}
.count.warm b{color:var(--accent)}
.count b{font-family:var(--display);font-size:40px;font-weight:400;color:var(--gold);line-height:1;font-variant-numeric:tabular-nums}
.count span{font-size:13px;color:var(--ink);max-width:24ch;line-height:1.3}

/* day */
.day{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:22px;display:grid;gap:18px}
.dayhead{display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:center}
.modes{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mode{border:1px solid var(--line);background:transparent;border-radius:999px;padding:7px 14px;font-size:14px}
.mode[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.hint{font-size:13px;color:var(--muted)}
.btn{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:10px;padding:8px 14px;font-weight:500;font-size:14px}
.btn.solid{background:var(--accent);color:var(--surface)}
.btn.ghost{border-color:transparent;color:var(--muted);padding-inline:8px}
.list{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;background:var(--bg)}
.task.main{background:var(--gold-soft)}
.task .t{min-width:0;overflow-wrap:anywhere}
.task.done .t{text-decoration:line-through;color:var(--muted)}
.check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--muted);background:transparent;display:grid;place-items:center;padding:0}
.check[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.check[aria-checked="true"]::after{content:"";width:10px;height:6px;border:2px solid var(--surface);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.acts{display:flex;gap:2px;align-items:center}
.ic{border:0;background:transparent;color:var(--muted);border-radius:8px;padding:4px 7px;font-size:13px;white-space:nowrap}
.ic:hover{background:var(--grey-soft);color:var(--ink)}
.ic.on{color:var(--gold)}
.meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:3px}
.chip{font-size:11.5px;padding:1px 8px;border-radius:999px;background:var(--grey-soft);color:var(--muted);white-space:nowrap}
.chip.launch{background:var(--gold-soft);color:var(--gold)}
.chip.warm{background:var(--accent-soft);color:var(--accent)}
.chip.reels{background:var(--rose-soft);color:var(--rose)}
.chip.heels{background:var(--plum-soft);color:var(--plum)}
.chip.learn{background:var(--slate-soft);color:var(--slate)}
.empty{padding:14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:14px}
.add{display:flex;gap:8px;flex-wrap:wrap}
.add input{flex:1 1 180px;min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 12px}
.add select{border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px}

/* areas */
.sec{display:grid;gap:16px}
.sechead{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.area{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:12px;align-content:start;min-width:0}
.area h3{margin:0;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%}
.area .task{background:transparent;padding:6px 4px;border-bottom:1px solid var(--line);border-radius:0;grid-template-columns:1fr auto}
.area .task:last-child{border-bottom:0}
.area .add input{padding:6px 10px;font-size:14px}

/* learning */
.learn{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:10px;min-width:0}
.card .title{font-weight:600;overflow-wrap:anywhere}
.card label{font-size:12px;color:var(--muted)}
.card input.next{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 10px;font-size:14px}
.bar{height:6px;border-radius:99px;background:var(--grey-soft);overflow:hidden}
.bar i{display:block;height:100%;background:var(--slate);border-radius:99px}
.row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pct{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}

/* week */
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
.wd{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;display:grid;gap:6px;min-width:0}
.wd.today{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.wd b{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wd textarea{width:100%;min-height:74px;resize:vertical;border:0;background:transparent;font:14px/1.4 var(--body);color:var(--ink);padding:0}
@media (max-width:760px){.week{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.week{grid-template-columns:1fr}.wrap{padding-inline:16px}}

.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:0;padding:0;list-style:none;counter-reset:s}
.how li{counter-increment:s;display:grid;gap:4px;font-size:14px}
.how li::before{content:counter(s);font-family:var(--display);font-size:30px;color:var(--accent);line-height:1}
.note{font-size:13px;color:var(--muted)}
.habits{display:grid;gap:10px}
.habits:empty{display:none}
.habit.skipped .hname{color:var(--muted)}
.habit.skipped .check{opacity:.35}
.tdot.off{border-style:dashed;color:var(--muted);background:transparent}
.habit .hint .ic{padding:0 4px;font-size:12px;text-decoration:underline}
.train.extra{background:var(--grey-soft);gap:10px}
.train.extra .task{background:var(--surface)}
.train.extra .check{border-color:var(--muted)}.train.extra .check[aria-checked="true"]{background:var(--muted);border-color:var(--muted)}
.sess{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.sbtn{width:28px;height:28px;border-radius:8px;border:1px solid var(--plum);background:var(--surface);color:var(--plum);font-size:13px;padding:0}
.sbtn.on{background:var(--plum);color:var(--surface)}
.train.study{background:var(--slate-soft)}
.train.study .check{border-color:var(--slate)}.train.study .check[aria-checked="true"]{background:var(--slate);border-color:var(--slate)}
.train.study .tdot.on{background:var(--slate);border-color:var(--slate)}.train.study .tdot.now{outline-color:var(--slate)}
.worklabel{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;padding:4px 4px 0}
.timer{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 10px;font-size:12.5px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink)}
.timer.run{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.timer.over{border-color:var(--rose);color:var(--rose)}
.timer.run.over{background:var(--rose);border-color:var(--rose);color:var(--surface)}
.nowbar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:var(--ink);color:var(--bg);border-radius:14px;padding:10px 14px}
.nowbar b{font-variant-numeric:tabular-nums;font-size:18px;margin-left:auto}
.nowbar .btn{background:var(--bg);color:var(--ink);border-color:var(--bg)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--rose)}
@media (prefers-reduced-motion:no-preference){.pulse{animation:p 1.4s infinite}@keyframes p{50%{opacity:.3}}}
.train.personal{background:var(--yellow-soft);border:1px solid var(--yellow-line)}
.train.personal .habit{border-top-color:var(--yellow-line)}
.train.personal .check{border-color:var(--yellow)}.train.personal .check[aria-checked="true"]{background:var(--yellow);border-color:var(--yellow)}
.chip.dose{background:var(--surface);color:var(--plum)}
.train.personal .chip.dose{color:var(--yellow)}
.train.study .chip.dose{color:var(--slate)}
.train.personal .tdot{border-color:var(--yellow-line)}
.train.personal .tdot.on{background:var(--yellow);border-color:var(--yellow)}
.train.personal .tdot.now{outline-color:var(--yellow)}
.train{display:grid;gap:4px;padding:12px;border-radius:12px;background:var(--plum-soft)}
.hhead{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;justify-content:space-between;padding:0 4px 6px}
.habit{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:8px 4px;border-top:1px solid var(--line)}
.habit .hname{font-weight:600;margin-right:8px}
.habit.done .hname{text-decoration:line-through;color:var(--muted)}
.train .check{border-color:var(--plum)}.train .check[aria-checked="true"]{background:var(--plum);border-color:var(--plum)}
.dots{display:flex;gap:4px}
.tdot{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:10.5px;color:var(--muted);border:1px solid var(--line);background:var(--surface)}
.tdot.on{background:var(--plum);border-color:var(--plum);color:var(--surface)}
.tdot.now{outline:1.5px solid var(--plum);outline-offset:1px}
@media (max-width:620px){.habit{grid-template-columns:auto 1fr auto}.habit .dots{grid-column:2/-1}}
.banner{background:var(--rose-soft);color:var(--rose);border-radius:10px;padding:10px 14px;font-size:14px}
@media (prefers-reduced-motion:no-preference){.task,.mode,.check{transition:background .15s,border-color .15s}}

/* template additions */
.chip.c-gold{background:var(--gold-soft);color:var(--gold)}.chip.c-accent{background:var(--accent-soft);color:var(--accent)}
.chip.c-rose{background:var(--rose-soft);color:var(--rose)}.chip.c-plum{background:var(--plum-soft);color:var(--plum)}
.chip.c-slate{background:var(--slate-soft);color:var(--slate)}.chip.c-yellow{background:var(--yellow-soft);color:var(--yellow)}
.chip.c-muted{background:var(--grey-soft);color:var(--muted)}
.chip.ex{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.savenote{font-size:13px;color:var(--muted)}.savenote.warn{color:var(--rose)}
.welcome{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;background:var(--accent-soft);border-radius:16px;padding:16px 18px}
.welcome>div:first-child{flex:1 1 320px}
.setup{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:0}
.setup>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;padding:18px 22px}
.setup>summary::-webkit-details-marker{display:none}
.setup>summary h2::after{content:" ＋";color:var(--muted);font-size:20px}
.setup[open]>summary h2::after{content:" −"}
.setup-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;padding:4px 22px 22px}
.sblock{display:grid;gap:10px;align-content:start;min-width:0}
.sblock h3{margin:0;font-size:15px;font-weight:600}
.sblock p{margin:0}
.srows{display:grid;gap:8px}
.srow{display:flex;gap:8px;align-items:center;min-width:0}
.srow.wrapr{flex-wrap:wrap}
.srow input,.srow select,.fld input{min-width:0;flex:1 1 120px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:7px 10px;font-size:14px}
.srow select{flex:0 1 auto}
.srow input[type=date]{flex:0 1 150px}
.srow .dot{flex:none}
.fld{display:grid;gap:4px}.fld span{font-size:12px;color:var(--muted)}
.hrow{display:grid;gap:6px;padding:10px;border-radius:12px;background:var(--bg)}
.hrow .srow input,.hrow .srow select{background:var(--surface)}
.inl{display:flex;gap:6px;align-items:center;flex:none}
input.num{width:72px;flex:none!important}
.wdays{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.wdb{width:32px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);font-size:12px;padding:0}
.wdb.on{background:var(--accent);border-color:var(--accent);color:var(--surface)}
.backup{width:100%;min-height:64px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:8px 10px;font:12px/1.4 ui-monospace,Menlo,monospace;color:var(--ink);resize:vertical}
.vh{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
label.btn{display:inline-block;cursor:pointer}
.btn.danger{color:var(--rose)}
.archnav{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.archnav strong{font-family:var(--display);font-weight:400;font-size:22px;min-width:9ch;text-align:center}
.archnav .btn:disabled{opacity:.35;cursor:default}
.archstats{display:flex;flex-wrap:wrap;gap:8px}
.astat{display:flex;gap:8px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 12px}
.astat b{font-family:var(--display);font-weight:400;font-size:22px;color:var(--accent);font-variant-numeric:tabular-nums}
.astat span{font-size:13px;color:var(--muted)}
.archlist{display:grid;gap:12px}
.aday{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;gap:8px}
.adate{display:flex;justify-content:space-between;gap:8px;font-weight:600;text-transform:capitalize}
.arow{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:4px 0;border-top:1px solid var(--line)}
.arow:first-child{border-top:0}
.arow .t{min-width:0;overflow-wrap:anywhere}
@media (max-width:520px){.arow{grid-template-columns:auto 1fr auto}.arow .hint{grid-column:2;grid-row:2}.arow .arx{grid-column:3;grid-row:1/3}}

/* background themes chosen in settings */
:root[data-theme="green"]{--bg:#E3EDE7;--surface:#F8FBF9;--ink:#18271F;--muted:#5A6B62;--line:#C8DACF;--grey-soft:#D9E6DE;--accent:#2E5E57;--accent-soft:#D0E5DB}
:root[data-theme="blue"]{--bg:#E2E9F3;--surface:#F8FAFD;--ink:#18212E;--muted:#5C6879;--line:#C9D5E4;--grey-soft:#D8E1ED;--accent-soft:#D6E6E0}
:root[data-theme="emerald"]{
  --bg:#06221E; --surface:#0D2E29; --ink:#EFE6DA; --muted:#B59C84; --line:#1E4640;
  --accent:#C4AC92; --accent-soft:#163C36; --gold:#D9B266; --gold-soft:#2E2F1E;
  --rose:#E09AAB; --rose-soft:#3A2530; --slate:#A9BBD9; --slate-soft:#1E3038; --plum:#DDAAD1; --plum-soft:#33283A; --yellow:#F0D27A; --yellow-soft:#2F3219; --yellow-line:#64592A; --grey-soft:#143731; color-scheme:dark}
:root[data-theme="navy"]{
  --bg:#141E30; --surface:#1B2940; --ink:#E7EDF6; --muted:#9FB0C8; --line:#2B3E5C;
  --accent:#8DB2DE; --accent-soft:#22385A; --gold:#DDB86C; --gold-soft:#302C24; --rose:#E29BAC; --rose-soft:#3A2636; --slate:#A8BEE0; --slate-soft:#243552;
  --plum:#D9A6D0; --plum-soft:#33284A; --yellow:#F0D27A; --yellow-soft:#2E2F25; --yellow-line:#655A30; --grey-soft:#22324C; color-scheme:dark}