@font-face{font-family:Poppins;font-weight:400;font-display:swap;src:url(/app/fonts/Poppins-Regular.ttf) format('truetype')}
@font-face{font-family:Poppins;font-weight:500;font-display:swap;src:url(/app/fonts/Poppins-Medium.ttf) format('truetype')}
@font-face{font-family:Poppins;font-weight:600;font-display:swap;src:url(/app/fonts/Poppins-SemiBold.ttf) format('truetype')}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/app/fonts/Poppins-Bold.ttf) format('truetype')}
/* ============================================================
   Colours: every colour is a variable. Dark is the default,
   html[data-theme=light] switches to the light palette.
   Directions use logical properties (start/end), so Arabic
   (html[dir=rtl]) mirrors the layout automatically.
   ============================================================ */
:root{
  --bg:#0A1120; --panel:#111A2C; --panel2:#172238; --input:#1A2742; --line:#22304A; --line2:#2C3B58; --line-soft:#18233A; --edge:#182340;
  --text:#E8EEF8; --muted:#8391AB; --dim:#56637D; --mint:#2EE6A6; --cyan:#22D3EE; --ink:#0A1120; --rose:#F2557A; --amber:#F5B942;
  --accent-text:#2EE6A6; --amber-text:#F5B942;
  --side:#080E1B; --side-line:#151F33; --nav-hover:#111A2C; --hover:#223152; --logo-dim:#2A3854;
  --danger-fg:#FF8FA8; --danger-bg:#2A1322; --danger-line:#5A2238;
  --prog-bg:#2E2B5A; --prog-fg:#C9C2FF;
  --backdrop:rgba(3,6,12,.65); --shadow:0 30px 80px rgba(0,0,0,.6); --pop-shadow:0 18px 40px rgba(0,0,0,.55);
  --card-shadow:none; --scroll:#243049;
  --r:14px;
  color-scheme:dark;
}
html[data-theme=light]{
  --bg:#F3F5FA; --panel:#FFFFFF; --panel2:#F0F3F8; --input:#EDF1F7; --line:#E1E6EF; --line2:#D2D9E5; --line-soft:#EDF0F5; --edge:#E3E8F0;
  --text:#141B2D; --muted:#56627C; --dim:#8791A7; --ink:#0A1120;
  --accent-text:#0A8F68; --amber-text:#A96400;
  --side:#FFFFFF; --side-line:#E3E8F0; --nav-hover:#F0F3F8; --hover:#E3E9F2; --logo-dim:#CBD3E1;
  --danger-fg:#C0264D; --danger-bg:#FDEEF2; --danger-line:#F3BFCC;
  --prog-bg:#ECE9FF; --prog-fg:#4F3FCB;
  --backdrop:rgba(20,27,45,.32); --shadow:0 30px 80px rgba(20,30,60,.22); --pop-shadow:0 18px 40px rgba(20,30,60,.18);
  --card-shadow:0 1px 2px rgba(20,30,60,.04),0 6px 18px -10px rgba(20,30,60,.12); --scroll:#C9D1DE;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:Poppins,'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif;font-size:14px;overflow:hidden}
/* Poppins has no Cyrillic, Arabic or CJK letters: use the Windows UI fonts for those languages */
html[lang=ru] body{font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif}
html[lang=ar] body{font-family:'Segoe UI Variable Text','Segoe UI',Tahoma,'DejaVu Sans',sans-serif}
html[lang=ar] *{letter-spacing:0!important} /* spacing would break the joined Arabic letters */
html[lang=zh] body{font-family:Poppins,'Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
html[lang=ja] body{font-family:Poppins,'Yu Gothic UI','Meiryo UI','Noto Sans CJK JP',sans-serif}
body{overflow-wrap:break-word;hyphens:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
::selection{background:rgba(46,230,166,.3)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:10px;border:2px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
/* scroll boxes inside cards (task lists, goals): thin bar on the card colour */
.tlist,.day .tasks,.gscroll{scrollbar-width:thin;scrollbar-color:var(--scroll) transparent;overscroll-behavior:contain}
.card ::-webkit-scrollbar-thumb,.day ::-webkit-scrollbar-thumb{border-color:var(--panel)}
.tlist.more,.day .tasks.more,.gscroll.more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),rgba(0,0,0,.15));mask-image:linear-gradient(to bottom,#000 calc(100% - 26px),rgba(0,0,0,.15))}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
body,.card,.day,#side,.dlg,#pop,#dp,#toast,.field,.btn{transition:background-color .2s,border-color .2s,color .2s}
html[dir=rtl] [data-flip] svg,html[dir=rtl] svg[data-flip]{transform:scaleX(-1)}

#app{display:flex;height:100vh}
/* sidebar */
#side{width:228px;flex:none;background:var(--side);border-inline-end:1px solid var(--side-line);display:flex;flex-direction:column;padding:22px 14px 16px;user-select:none;overflow-y:auto}
.logo{display:flex;align-items:center;gap:9px;padding:0 8px 24px;direction:ltr}
html[dir=rtl] .logo{justify-content:flex-end}
.wordmark{font-family:Poppins,'Segoe UI',sans-serif;font-weight:700;font-size:22px;letter-spacing:-.02em;line-height:1}
.wordmark span{color:var(--mint)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav button{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;color:var(--muted);font-weight:500;font-size:14px;line-height:1.3;text-align:start;transition:background .15s,color .15s}
.nav button span{min-width:0}
.nav button:hover{background:var(--nav-hover);color:var(--text)}
.nav button.on{background:linear-gradient(90deg,rgba(46,230,166,.16),rgba(34,211,238,.06));color:var(--text)}
html[dir=rtl] .nav button.on{background:linear-gradient(270deg,rgba(46,230,166,.16),rgba(34,211,238,.06))}
.nav button.on svg{color:var(--mint)}
.nav svg{width:19px;height:19px;flex:none}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:12px}
.saved{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--dim);padding:0 12px}
.saved i{width:7px;height:7px;border-radius:50%;background:#12A97C;display:block;flex:none;transition:background .2s}
.saved.busy i{background:var(--amber)}

/* main */
#main{flex:1;min-width:0;overflow:auto;padding:28px 34px 40px;position:relative}
.page{max-width:1320px;margin:0 auto}
.page-narrow{max-width:1080px}
.head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:14px 20px;margin-bottom:22px}
.head>div:first-child{min-width:min(100%,280px);flex:1 1 320px}
.head h1{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.head p{color:var(--muted);font-size:13.5px;margin-top:4px;line-height:1.45}
.head-acts{display:flex;gap:8px;flex-wrap:wrap}
.datebtn{display:inline-flex;align-items:center;gap:7px;margin-top:4px;margin-inline-start:-7px;padding:3px 8px 3px 7px;border-radius:8px;color:var(--muted);font-size:13.5px;line-height:1.45;text-align:start}
.datebtn svg{width:15px;height:15px;flex:none}
.datebtn svg:last-child{width:13px;height:13px;opacity:.7}
.datebtn:hover{background:var(--panel2);color:var(--text)}
.switch{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:4px;user-select:none;box-shadow:var(--card-shadow)}
.switch button{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.switch button svg{width:18px;height:18px}
.switch button:hover{background:var(--panel2);color:var(--text)}
.switch .lbl{min-width:150px;padding:0 4px;text-align:center;font-weight:600;font-size:14px;white-space:nowrap}
.switch .lbl-btn{width:auto;gap:7px;padding:0 10px;color:var(--text)}
.switch .lbl-btn svg{width:15px;height:15px;color:var(--muted)}
.switch .lbl-btn:hover svg{color:var(--accent-text)}
.switch .now{width:auto;padding:0 12px;font-size:12.5px;font-weight:600;color:var(--accent-text);white-space:nowrap}

/* grids adapt to the window width and to longer words in other languages */
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
/* minmax(max(min, share)) = never more than 2/3/4/6 columns, fewer when the text needs room */
.g2{grid-template-columns:repeat(auto-fit,minmax(max(320px,calc(50% - 8px)),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(max(230px,calc(33.333% - 11px)),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(max(190px,calc(25% - 12px)),1fr))}
.g6{grid-template-columns:repeat(auto-fit,minmax(max(168px,calc(16.666% - 14px)),1fr))}
.split{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:start}
.split-wide{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.split-settings{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.weektop{grid-template-columns:minmax(220px,.9fr) minmax(0,1.3fr) minmax(0,1fr)}
@media (max-width:1180px){.weektop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.weektop>:first-child{grid-column:1/-1}}
@media (max-width:1060px){.split,.split-settings{grid-template-columns:minmax(0,1fr)}}

.card{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);padding:18px 20px;box-shadow:var(--card-shadow)}
.card h3{font-size:12px;font-weight:700;letter-spacing:.09em;color:var(--muted);text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;line-height:1.35}
.card h3 small{font-size:11.5px;letter-spacing:0;text-transform:none;font-weight:500;color:var(--dim)}
.kpi .v{font-size:27px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
.kpi .v-word{font-size:clamp(19px,1.7vw,26px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* fitWords() in app.js shrinks it */
.kpi .l{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;line-height:1.35}
.kpi .s{font-size:12px;color:var(--dim);margin-top:2px;line-height:1.4}
.mint{color:var(--accent-text)}.muted{color:var(--muted)}.dim{color:var(--dim)}
.sublbl{font-size:12.5px;margin-bottom:6px}
.bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;position:relative}
.bar i{position:absolute;inset-inline-start:0;top:0;bottom:0;border-radius:5px;background:var(--mint)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:11px;font-weight:600;font-size:13.5px;line-height:1.3;text-align:start;background:var(--panel2);border:1px solid var(--line2);color:var(--text);transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn svg{width:16px;height:16px;flex:none}
.btn span[data-flip]{display:inline-flex}
.btn.pri{background:linear-gradient(90deg,var(--mint),var(--cyan));color:var(--ink);border:0}
.btn.ghost{background:none}
.btn.danger{color:var(--danger-fg);border-color:var(--danger-line);background:var(--danger-bg)}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.linkbtn{font-weight:600;color:var(--muted);font-size:13px;padding:5px 10px;border-radius:8px}
.linkbtn:hover{color:var(--text);background:var(--panel2)}
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:99px;font-size:11.5px;font-weight:600;background:var(--panel2);color:var(--muted);white-space:nowrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.field{width:100%;min-width:0;background:var(--input);border:1px solid transparent;border-radius:10px;padding:9px 12px;outline:none;transition:border .15s}
.field:focus{border-color:rgba(46,230,166,.55)}
.field:disabled{opacity:.55;cursor:not-allowed}
textarea.field{resize:vertical;min-height:92px;line-height:1.5}
select.field{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 55%,calc(100% - 12px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-inline-end:30px}
html[dir=rtl] select.field{background-position:12px 55%,17px 55%}
.counter{text-align:end;font-size:11px;color:var(--dim);margin-top:5px;font-variant-numeric:tabular-nums}
.counter b{font-weight:600;color:var(--muted)}
.empty{color:var(--dim);font-size:13px;padding:10px 0;line-height:1.5;display:flex;align-items:center;flex-wrap:wrap;gap:8px}

/* checkbox */
.cb{width:22px;height:22px;border-radius:7px;border:2px solid var(--c,var(--mint));display:inline-flex;align-items:center;justify-content:center;flex:none;transition:background .15s,transform .1s}
.cb svg{width:14px;height:14px;opacity:0}
.cb.on{background:var(--c,var(--mint))}
.cb.on svg{opacity:1}
.cb:active{transform:scale(.92)}

/* 1–10 ratings: red → orange → yellow → green (colour per value in --sc, text colour in --sct) */
.scale{display:flex;gap:5px}
.scale button{flex:1;min-width:0;height:36px;border-radius:9px;font-weight:600;color:var(--text);
  background:color-mix(in srgb,var(--sc) 14%,var(--input));box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--sc) 75%,transparent);transition:background .12s,color .12s,transform .1s}
.scale button:hover{background:color-mix(in srgb,var(--sc) 34%,var(--input))}
.scale button.on{background:var(--sc);color:var(--sct);box-shadow:0 6px 14px -8px var(--sc)}
.scale button:active{transform:scale(.95)}

/* today */
.hero{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hero .ringwrap{position:relative;width:132px;height:132px;flex:none}
.hero .ringwrap b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;font-weight:700;letter-spacing:-.02em;text-align:center;padding:0 18px}
.hero .ringwrap b small{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:0;line-height:1.25}
.hero-txt{flex:1 1 200px;min-width:0}
.hrow{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:12px;cursor:pointer;transition:background .15s;user-select:none}
.hrow:hover{background:var(--panel2)}
.hrow .nm{flex:1;min-width:0;font-weight:500;line-height:1.35}
.hrow.done .nm{color:var(--muted)}
.streak{display:flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:var(--amber-text);min-width:46px;justify-content:flex-end;white-space:nowrap}
.streak.zero{color:var(--dim)}
.dots7{display:flex;gap:4px;flex:none}
.dots7 i{width:8px;height:8px;border-radius:3px;background:var(--line)}
.dots7 i.on{background:var(--c)}
.trow{display:flex;align-items:center;gap:12px;padding:8px 6px;border-radius:10px}
.trow:hover{background:var(--panel2)}
.trow .tx{flex:1;min-width:0;line-height:1.35;overflow-wrap:break-word}
.trow.done .tx{color:var(--muted);text-decoration:line-through}
.trow .x{opacity:0;color:var(--dim);width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex:none}
.trow .x svg{width:16px;height:16px}
.tlist{max-height:calc(8 * 38px + 4px);overflow-y:auto;margin-inline:-4px;padding-inline:4px}
.trow:hover .x,.trow .x:focus-visible{opacity:1}.trow .x:hover{background:var(--danger-bg);color:var(--danger-fg)}
.addrow{display:flex;gap:8px;margin-top:8px}
.addrow .btn{flex:none}

/* month grid */
.mgrid{overflow:auto;padding-bottom:4px}
.mgrid table{border-collapse:separate;border-spacing:3px;width:100%;user-select:none}
.mgrid th,.mgrid td{font-size:11px;text-align:center}
.mgrid .hn{text-align:start;font-size:13px;font-weight:500;white-space:nowrap;padding-inline-end:10px;min-width:150px;max-width:220px;overflow:hidden;text-overflow:ellipsis}
.mgrid .th{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.mgrid .hdot{display:inline-block;width:8px;height:8px;border-radius:3px;margin-inline-end:8px}
.mgrid .wk{height:24px;line-height:24px;border-radius:7px;color:var(--ink);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;overflow:hidden;padding:0 4px}
.mgrid .dn{color:var(--dim);font-weight:600;height:18px}
.mgrid .dn.we{color:var(--muted)}
.mgrid .dd{font-weight:700;color:var(--muted);height:22px;border-radius:6px}
.mgrid .dd.today{background:var(--mint);color:var(--ink)}
.cell{width:22px;height:24px;border-radius:6px;background:var(--input);cursor:pointer;transition:transform .08s,filter .12s;position:relative}
.cell:hover{filter:brightness(1.35)}
html[data-theme=light] .cell:hover{filter:brightness(.94)}
.cell.on{background:var(--c)}
.cell.on:after{content:"";position:absolute;left:8px;top:4px;width:5px;height:11px;border:solid var(--ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.cell.fut{opacity:.45}
/* before the start of the tracking history: greyed out with a light hatching, not clickable */
.cell.pre,.mood.pre{background:repeating-linear-gradient(135deg,var(--input) 0 2px,var(--panel) 2px 5px);opacity:.7;cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--line-soft)}
.cell.pre:hover{filter:none}
.mood:disabled,.day .mind button:disabled{cursor:not-allowed}
.day.pre{opacity:.5}
.day.pre .mind button{background:repeating-linear-gradient(135deg,var(--input) 0 2px,var(--panel) 2px 5px)}
.switch button:disabled,.dp-row button:disabled,.dp-grid button:disabled,.dp-head .nav-b:disabled{opacity:.3;cursor:not-allowed;pointer-events:none}
.mgrid .an{min-width:84px;text-align:start;padding-inline-start:8px;white-space:nowrap}
.mgrid .pc{font-weight:700;font-size:12.5px;min-width:44px;text-align:end;white-space:nowrap}
.mood{width:22px;height:24px;border-radius:6px;background:var(--input);cursor:pointer;font-weight:700;font-size:11.5px;color:var(--text)}
.mood:hover{outline:1px solid var(--mint)}
.foot-row td{color:var(--muted);font-size:10.5px;height:18px}

/* week: 7 columns when there is room, otherwise 4 + 3 or 2 per row (no sideways scrolling) */
.wk-sum{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.wk-ring{position:relative;width:96px;height:96px;flex:none}
.wk-ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:19px}
.wk-sum .kpi{flex:1 1 110px;min-width:0}
.days-wrap{container-type:inline-size}
.days{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
@container (min-width:620px){.days{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (min-width:1240px){.days{grid-template-columns:repeat(7,minmax(0,1fr))}}
.day{background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;min-width:0;box-shadow:var(--card-shadow)}
.day.today{outline:2px solid var(--mint);outline-offset:-2px}
.day .dh{background:var(--dc);padding:8px 12px;color:var(--ink);font-weight:700;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:0 8px;line-height:1.3}
.day .dh span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.day .dh small{font-weight:600;font-size:11.5px;opacity:.75;white-space:nowrap}
.dsum{display:flex;align-items:center;gap:10px;padding:10px 12px 6px}
.dring{position:relative;width:58px;height:58px;flex:none}
.dring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.dcount{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dcount b{font-size:15px;white-space:nowrap}
.dcount span{font-size:11.5px;color:var(--muted)}
/* every day shows 5 task rows; more tasks scroll inside the box, so all days have the same size */
.day .tasks{padding:2px 6px 0;margin-bottom:6px;flex:none;height:calc(5 * var(--trow-h) + 2px);overflow-y:auto}
.day{--trow-h:31px}
.day .trow{padding-block:6px;padding-inline:4px 30px;gap:8px;font-size:12.5px;position:relative;align-items:flex-start;min-height:var(--trow-h)}
.day .trow .cb{width:18px;height:18px;border-radius:6px;margin-top:1px}.day .trow .cb svg{width:11px;height:11px}
.day .trow .x{position:absolute;inset-inline-end:2px;top:3px;background:var(--panel2)}
.day .add{margin:0 8px 8px}
.day .add input{text-overflow:ellipsis;width:100%;background:transparent;border:1px dashed var(--line2);border-radius:9px;padding:7px 10px;font-size:12.5px;outline:none;color:var(--text)}
.day .add input:focus{border-style:solid;border-color:rgba(46,230,166,.55)}
.day .add input:disabled{opacity:.6;cursor:not-allowed}
.mind{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.mind label{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:12px;color:var(--muted)}
.mind label span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mind button{width:34px;height:24px;border-radius:7px;background:var(--input);font-weight:700;font-size:12px;color:var(--text);flex:none}
.mind button.empty{color:var(--dim);font-weight:500;padding:0}

/* goals: one grid for header and rows (subgrid) so columns size to the longest text */
.glist{padding:0;overflow:hidden;container-type:inline-size}
/* narrow window: progress as number only, so all columns (incl. edit and delete) stay visible */
@container (max-width:920px){
  .glist .gtable{grid-template-columns:minmax(150px,2fr) auto auto auto auto auto auto;column-gap:10px;min-width:0}
  .gprog .bar{display:none}
  .glist .gprog b{min-width:0}
}
/* the goal list scrolls inside the card once it is taller than the window allows */
.gscroll{max-height:max(300px,calc(100vh - 424px));overflow:auto;padding:0 14px 12px}
/* search and filters above the goal list */
.gtools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.gsearch{position:relative;flex:1 1 220px;min-width:180px;display:flex;align-items:center}
.gsearch svg{position:absolute;inset-inline-start:12px;width:16px;height:16px;color:var(--dim);pointer-events:none}
.gsearch input{padding-inline-start:36px}
.gsearch input::-webkit-search-cancel-button{cursor:pointer}
.gfil{width:auto;flex:0 1 auto;max-width:200px;padding-block:9px;font-size:13px;text-overflow:ellipsis}
.gfil.on{border-color:rgba(46,230,166,.55);color:var(--text)}
.gcount{margin-inline-start:auto;font-size:12.5px;color:var(--muted);white-space:nowrap}
.gtools .linkbtn{font-size:12.5px}
.gnone{display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 14px 36px;text-align:center;color:var(--muted)}
.gnone svg{width:28px;height:28px;color:var(--dim)}
.gtable{display:grid;grid-template-columns:minmax(220px,2fr) auto auto minmax(150px,1.3fr) auto auto auto;column-gap:14px;min-width:880px}
.ghead,.goal{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center}
.ghead{position:sticky;top:0;z-index:2;background:var(--panel);padding:16px 14px 8px;font-size:11px;font-weight:700;letter-spacing:.07em;color:var(--dim);text-transform:uppercase;line-height:1.3}
.goal{padding:10px 14px;border-radius:12px;min-height:74px}
.goal:hover{background:var(--panel2)}
.goal .nm{font-weight:600;min-width:0;line-height:1.35}
.goal .gname{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal .nm small{display:block;font-weight:400;font-size:12px;color:var(--dim)}
.gnote{font-weight:400;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal .dl{font-size:13px;line-height:1.35;white-space:nowrap;text-align:start;padding:5px 7px;margin:-5px -7px;border-radius:8px}
.goal .dl:hover{background:var(--input)}
.goal .dl small{display:block;font-size:11.5px}
.gprog{display:flex;align-items:center;gap:10px;min-width:0}
.gprog .bar{flex:1}
.gprog b{min-width:42px;text-align:end;white-space:nowrap}
.steps{display:flex;align-items:center;gap:8px}
.steps button{width:26px;height:26px;border-radius:8px;background:var(--input);font-weight:700;color:var(--muted);flex:none}
.steps button:hover{color:var(--text);background:var(--hover)}
.steps span{font-weight:600;font-size:13px;min-width:44px;text-align:center;white-space:nowrap}
.status{justify-self:start}
.st-done{background:var(--mint);color:var(--ink)}.st-over{background:var(--rose);color:var(--ink)}.st-prog{background:var(--prog-bg);color:var(--prog-fg)}
.gacts{display:flex;gap:4px;justify-content:flex-end;opacity:0}
.goal:hover .gacts,.gacts:focus-within{opacity:1}
.icon-btn{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.icon-btn:hover{background:var(--input);color:var(--text)}
.icon-btn svg{width:16px;height:16px}
.empty-goals{display:flex;flex-direction:column;align-items:center;gap:12px;padding:34px 20px;text-align:center;color:var(--dim)}
.empty-goals>svg{width:36px;height:36px;color:var(--line2)}
.empty-goals p{font-size:13.5px}

/* reflection: previous months, always 6 per row (2 × 6) */
.months12{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.mchip{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px;border-radius:11px;background:var(--sc);color:var(--sct);font-size:11.5px;line-height:1.25;min-width:0;transition:transform .1s,filter .12s}
.mchip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-weight:500}
.mchip b{font-size:15px;font-variant-numeric:tabular-nums}
.mchip:hover{filter:brightness(1.06);transform:translateY(-1px)}
.mchip.cur{outline:2px solid var(--text);outline-offset:2px}

/* charts (drawn left to right in every language) */
.chart{width:100%;direction:ltr}.chart svg{display:block;overflow:visible;font-family:inherit}
.chart .gl{stroke:var(--line)}
.chart .ax{fill:var(--muted);font-size:11px}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0;font-weight:500}
.legend span{display:flex;align-items:center;gap:6px;white-space:nowrap}
.legend i{width:14px;height:3px;border-radius:2px;display:block}

/* list rows (dashboard) */
.lrow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(60px,1.2fr) auto;align-items:center;gap:12px;padding:7px 2px;border-bottom:1px solid var(--line-soft);font-size:13px}
.lrow:last-child{border-bottom:0}
.lrow .nm{min-width:0;line-height:1.35}
.lrow .num{text-align:end;min-width:28px}
.lrow .pc{text-align:end;font-weight:700;min-width:42px;white-space:nowrap}
.lrow-streak{grid-template-columns:minmax(0,1fr) auto auto}
.lrow-streak .streak{justify-content:flex-start;min-width:0}

/* modal & popovers */
#modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:var(--backdrop);backdrop-filter:blur(3px);z-index:50;padding:16px}
#modal.open{display:flex}
.dlg{background:var(--panel);border:1px solid var(--line2);border-radius:18px;padding:26px 28px;width:min(560px,92vw);max-height:88vh;overflow:auto;box-shadow:var(--shadow)}
.dlg-wide{width:min(760px,94vw)}
.dlg-ob{width:min(620px,94vw)}
.dlg h2{font-size:22px;letter-spacing:-.01em;margin-bottom:6px;line-height:1.25}
.dlg p{color:var(--muted);margin-bottom:16px;line-height:1.5}
.dlg .row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:12px}
.dlg label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:5px}
.dlg .acts{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:18px}
.datefield{display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer;min-height:41px}
.datefield svg{width:16px;height:16px;color:var(--muted);flex:none}
.datefield .ph{color:var(--dim)}
.ob-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.ob-brand{display:flex;align-items:center;gap:9px;direction:ltr}
.ob-brand .wordmark{font-size:20px}
.ob-langs{display:flex;gap:4px;flex-wrap:wrap;direction:ltr}
.ob-langs button{padding:5px;border-radius:8px;border:1px solid transparent;opacity:.6;transition:opacity .15s,background .15s}
.ob-langs button:hover{opacity:1;background:var(--panel2)}
.ob-langs button.on{opacity:1;border-color:var(--mint);background:var(--panel2)}
.ob-name{height:46px;font-size:15px}
.ob-later{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line-soft);text-align:center}
.ob-later span{font-size:12px;color:var(--dim)}
.ob-import{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;max-width:100%}
.ob-import svg{width:14px;height:14px;flex:none}
.ob-import span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sugg{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px;margin:6px 0 14px}
.sugg button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:11px;background:var(--input);text-align:start;font-size:13.5px;line-height:1.35}
.sugg button span:last-child{min-width:0}
.sugg button .cb{width:18px;height:18px;border-radius:6px}
.sugg button .cb svg{width:11px;height:11px}
.notices{max-height:48vh;overflow:auto;background:var(--input);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-family:Consolas,'Cascadia Mono',monospace;font-size:11.5px;line-height:1.5;color:var(--muted);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text;text-align:left}
.terms{max-height:52vh;overflow:auto;background:var(--input);border:1px solid var(--line);border-radius:12px;padding:6px 18px 12px;user-select:text}
.terms h4{font-size:13.5px;margin:14px 0 4px}
.dlg .terms p{color:var(--muted);margin-bottom:6px;font-size:13px;line-height:1.55}
.dlg .terms .terms-date{font-size:12px;color:var(--dim);margin:10px 0 0}
#pop{position:fixed;z-index:60;display:none;background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:8px;box-shadow:var(--pop-shadow)}
#pop.open{display:block}
#pop .t{font-size:11px;color:var(--muted);font-weight:600;padding:2px 4px 6px;max-width:170px}
#pop .nums{display:grid;grid-template-columns:repeat(5,30px);gap:4px}
#pop .nums button{height:28px;border-radius:7px;font-weight:700;font-size:12px;background:color-mix(in srgb,var(--sc) 20%,var(--input));box-shadow:inset 0 -2px 0 var(--sc)}
#pop .nums button:hover{background:var(--sc);color:var(--sct)}
#pop .clr{margin-top:6px;width:100%;font-size:11.5px;color:var(--muted);padding:4px;border-radius:7px}
#pop .clr:hover{background:var(--input);color:var(--text)}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--panel2);border:1px solid var(--line2);padding:10px 18px;border-radius:12px;font-size:13px;transition:all .25s;z-index:70;pointer-events:none;max-width:min(560px,86vw);text-align:center;line-height:1.45;box-shadow:var(--pop-shadow)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* date picker */
#dp{position:fixed;z-index:65;display:none;width:292px;background:var(--panel);border:1px solid var(--line2);border-radius:14px;padding:10px;box-shadow:var(--pop-shadow);user-select:none}
#dp.open{display:block;animation:dpIn .14s ease-out}
@keyframes dpIn{from{opacity:0;transform:translateY(-4px)}}
.dp-head{display:flex;align-items:center;gap:4px;margin-bottom:8px}
.dp-head .nav-b{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none}
.dp-head .nav-b:hover{background:var(--panel2);color:var(--text)}
.dp-head .nav-b svg{width:16px;height:16px}
.dp-title{flex:1;min-width:0;height:30px;border-radius:8px;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;gap:5px;white-space:nowrap}
button.dp-title:hover{background:var(--panel2)}
.dp-title svg{width:13px;height:13px;color:var(--muted);flex:none}
.dp-wd{display:grid;grid-template-columns:repeat(7,1fr);font-size:11px;font-weight:600;color:var(--dim);text-align:center;margin-bottom:4px}
.dp-wd span{overflow:hidden;white-space:nowrap}
.dp-row{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;border-radius:9px}
.dp-row+.dp-row{margin-top:2px}
.dp-row button{height:34px;border-radius:8px;font-size:13px;font-variant-numeric:tabular-nums;color:var(--text)}
.dp-row button:hover{background:var(--panel2)}
.dp-row button.out{color:var(--dim)}
.dp-row button.today{box-shadow:inset 0 0 0 1.5px var(--mint);font-weight:700}
.dp-row button.sel{background:var(--mint);color:var(--ink);font-weight:700}
.dp-weekmode .dp-row:hover{background:var(--panel2)}
.dp-weekmode .dp-row:hover button:hover{background:transparent}
.dp-weekmode .dp-row.sel-week{background:rgba(46,230,166,.18)}
.dp-weekmode .dp-row.sel-week button{font-weight:600}
.dp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.dp-grid button{height:44px;border-radius:9px;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.dp-grid button:hover{background:var(--panel2)}
.dp-grid button.cur{box-shadow:inset 0 0 0 1.5px var(--mint)}
.dp-grid button.sel{background:var(--mint);color:var(--ink);font-weight:700}
.dp-foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;margin-top:10px;padding-top:8px;border-top:1px solid var(--line-soft)}
.dp-foot button{font-size:12.5px;font-weight:600;color:var(--accent-text);padding:6px 8px;border-radius:8px}
.dp-foot button:hover{background:var(--panel2)}
.dp-foot .dp-clear{color:var(--muted)}

/* settings */
.hset{display:flex;align-items:center;gap:8px;padding:5px 0}
.hset .sw{width:24px;height:24px;border-radius:8px;flex:none;background:var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:transform .1s,box-shadow .15s}
.hset .sw:hover{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--c)}
.hset .sw:active{transform:scale(.92)}
#pop .swatches{display:grid;grid-template-columns:repeat(5,32px);gap:6px;padding:2px}
#pop .swatches button{width:32px;height:32px;border-radius:9px;background:var(--c);display:grid;place-items:center;transition:transform .1s,box-shadow .15s}
#pop .swatches button:hover:not(:disabled){transform:scale(1.08)}
#pop .swatches button.on{box-shadow:0 0 0 2px var(--panel2),0 0 0 4px var(--text)}
#pop .swatches button svg{width:16px;height:16px}
#pop .swatches button.on svg{opacity:1}
#pop .swatches button.lock{background:color-mix(in srgb,var(--c) 22%,var(--input));color:var(--muted);cursor:not-allowed}
#pop .swatches button.lock svg{width:14px;height:14px}
.hset input{flex:1}
.sec{margin-bottom:6px;font-size:13px;color:var(--muted);line-height:1.5}
.pref+.pref{margin-top:18px;padding-top:16px;border-top:1px solid var(--line-soft)}
.pref-l{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:10px}
.pref-l svg{width:16px;height:16px;flex:none}
.pref-hint{display:flex;gap:8px;align-items:flex-start;font-size:12px;color:var(--dim);margin-top:8px;line-height:1.45}
.pref-hint svg{width:14px;height:14px;flex:none;margin-top:2px}
.flag{width:22px;height:15px;border-radius:3px;overflow:hidden;flex:none;display:block;box-shadow:0 0 0 1px rgba(128,140,160,.35)}
.flag svg{width:100%;height:100%;display:block}
.langs{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.langs button{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:10px;background:var(--input);border:1px solid transparent;font-size:13px;text-align:start;min-width:0}
.langs button span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.langs button:hover{border-color:var(--line2)}
.langs button.on{border-color:var(--mint);background:rgba(46,230,166,.1);font-weight:600}
.langs button[lang=zh]{font-family:'Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
.langs button[lang=ja]{font-family:'Yu Gothic UI','Meiryo UI','Noto Sans CJK JP',sans-serif}
.langs button[lang=ru]{font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif}
.langs button[lang=ar]{font-family:'Segoe UI Variable Text','Segoe UI',Tahoma,'DejaVu Sans',sans-serif}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--input);border-radius:12px;padding:4px}
.seg button{display:flex;align-items:center;justify-content:center;gap:7px;padding:8px 6px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted);min-width:0;line-height:1.25;text-align:center}
.seg button svg{width:16px;height:16px;flex:none}
.seg button span{min-width:0}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--panel);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.18)}

/* license activation */
.keyfield{font:500 12.5px/1.2 Consolas,'Cascadia Mono',monospace;letter-spacing:.02em;height:44px;text-align:left}
.keyfield::placeholder{font-family:Poppins,'Segoe UI',sans-serif;letter-spacing:0}
html[lang=ru] .keyfield::placeholder{font-family:'Segoe UI Variable Text','Segoe UI',system-ui,sans-serif}
html[lang=ar] .keyfield::placeholder{font-family:'Segoe UI Variable Text','Segoe UI',Tahoma,'DejaVu Sans',sans-serif}
html[lang=zh] .keyfield::placeholder{font-family:'Microsoft YaHei UI','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
html[lang=ja] .keyfield::placeholder{font-family:'Yu Gothic UI','Meiryo UI','Noto Sans CJK JP',sans-serif}
html[dir=rtl] .keyfield:not(:placeholder-shown){direction:ltr}
html[dir=rtl] .keyfield::placeholder{text-align:right}
.keyfield.bad,.field.bad{border-color:var(--rose)}
.field-err{min-height:19px;margin:6px 0 0!important;font-size:12.5px;color:var(--danger-fg)!important}
.act-msg{min-height:20px;margin:8px 0 0!important;font-size:12.5px;color:var(--danger-fg)!important}
.about-lic{color:var(--muted)}

/* about */
.about-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.about-head>div{flex:1 1 150px;min-width:0}
.about-head .wordmark{font-size:24px}
.about-tag{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.35}
.about-privacy{display:flex;gap:10px;align-items:flex-start;margin:16px 0 12px;padding:12px 14px;border-radius:12px;background:var(--panel2);font-size:13px;line-height:1.5;color:var(--muted)}
.about-privacy svg{width:18px;height:18px;flex:none;color:var(--accent-text);margin-top:1px}
.about-rows{display:flex;flex-direction:column}
.about-row{display:flex;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line-soft);font-size:13px;text-align:start;border-radius:0;color:var(--text)}
.about-row:last-child{border-bottom:0}
.about-row svg{width:16px;height:16px;flex:none;color:var(--muted)}
.about-row span{flex:1;min-width:0}
.about-row small{color:var(--dim);font-size:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
button.about-row:hover{color:var(--accent-text)}
.about-foot{margin-top:12px;font-size:11.5px;color:var(--dim);line-height:1.5}

/* ============================================================
   Rowlight Web: Ergänzungen zur Oberfläche der Windows-App.
   Konto, Pro, Erinnerungen und die Handy-Ansicht.
   ============================================================ */
html,body{height:100%}
#app{height:100vh;height:100dvh}

/* Bereich Konto in den Einstellungen */
.rl-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 16px;padding:12px 0;border-top:1px solid var(--line-soft)}
.card h3+.rl-row{border-top:0;padding-top:2px}
.rl-row-t{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:3px}
.rl-row-t b{font-weight:600;font-size:14px}
.rl-row-t span{font-size:12.5px;color:var(--muted);line-height:1.45}
.rl-row-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rl-time{width:auto;min-width:118px}
.rl-steps{margin:2px 0 0;padding-inline-start:20px;color:var(--muted);font-size:13px;line-height:1.6}
.rl-steps li+li{margin-top:4px}
.rl-chip-pro{background:linear-gradient(90deg,var(--mint),var(--cyan));color:var(--ink)}

/* Schalter */
.rl-switch{position:relative;display:inline-block;width:44px;height:26px;flex:none}
.rl-switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.rl-switch span{position:absolute;inset:0;border-radius:99px;background:var(--line2);transition:background .2s}
.rl-switch span::after{content:'';position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.rl-switch input:checked+span{background:var(--mint)}
.rl-switch input:checked+span::after{transform:translateX(18px)}
html[dir=rtl] .rl-switch input:checked+span::after{transform:translateX(-18px)}
.rl-switch input:focus-visible+span{outline:2px solid var(--cyan);outline-offset:2px}
.rl-switch input:disabled+span{opacity:.45}
.rl-switch input:disabled{cursor:not-allowed}

/* Pro-Dialog */
.rl-list{list-style:none;margin:4px 0 14px;display:flex;flex-direction:column;gap:9px}
.rl-list li{display:flex;align-items:center;gap:10px;font-size:14px}
.rl-list li svg{width:18px;height:18px;flex:none;padding:3px;border-radius:6px;background:linear-gradient(90deg,var(--mint),var(--cyan));color:var(--ink)}
.dlg p.rl-trial{color:var(--accent-text);font-weight:600;font-size:13px;margin-bottom:12px}
.rl-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.rl-plan{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);text-align:start;transition:border-color .15s,transform .1s}
.rl-plan:first-child{border-color:var(--mint);background:linear-gradient(135deg,rgba(46,230,166,.14),rgba(34,211,238,.05))}
.rl-plan:hover{border-color:var(--mint)}
.rl-plan:active{transform:scale(.99)}
.rl-plan span{font-size:12.5px;color:var(--muted);font-weight:600}
.rl-plan b{font-size:20px;font-weight:700;letter-spacing:-.01em}

/* Pro-Hinweis in der Seitenleiste */
.rl-side-pro{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 2px;padding:11px 12px;border-radius:12px;text-align:start;border:1px solid rgba(46,230,166,.35);background:linear-gradient(135deg,rgba(46,230,166,.14),rgba(34,211,238,.05));transition:border-color .15s}
.rl-side-pro:hover{border-color:var(--mint)}
.rl-side-pro b{font-size:13px;font-weight:700}
.rl-side-pro span{font-size:12px;color:var(--accent-text);font-weight:600}

/* Daten konnten nicht geladen werden */
.rl-loaderr{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:24px;text-align:center}
.rl-loaderr>div{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:360px}
.rl-loaderr p{color:var(--muted);line-height:1.5}

/* ============================================================
   Handy: Seitenleiste wird zur Leiste unten
   ============================================================ */
@media (max-width:760px){
  #app{flex-direction:column}
  #side{position:fixed;inset-inline:0;bottom:0;z-index:40;width:auto;height:auto;flex-direction:row;align-items:stretch;padding:6px 4px calc(6px + env(safe-area-inset-bottom));border-inline-end:0;border-top:1px solid var(--side-line);overflow:visible}
  #side .logo,#side .saved,#side .rl-side-pro{display:none}
  #side>.nav{flex:6 1 0;min-width:0}
  #side .side-foot{flex:1 1 0;min-width:0;margin:0;padding:0}
  #side .nav{flex-direction:row;gap:0}
  /* nur Symbole, der Name bleibt für Screenreader lesbar */
  #side .nav button{flex:1 1 0;min-width:0;justify-content:center;padding:8px 0;border-radius:12px;margin:0 2px}
  #side .nav button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  #side .nav button.on{background:linear-gradient(135deg,rgba(46,230,166,.18),rgba(34,211,238,.08));color:var(--accent-text)}
  #side .nav svg{width:23px;height:23px}
  #main{padding:18px 14px calc(86px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}
  .head{margin-bottom:16px}
  .head h1{font-size:24px}
  .switch .lbl{min-width:0}
  .weektop,.split,.split-wide,.split-settings,.g2{grid-template-columns:minmax(0,1fr)}
  .weektop>:first-child{grid-column:auto}
  .dlg{padding:20px 18px;width:100%;max-height:calc(100dvh - 32px)}
  #modal{padding:16px 10px}
  #toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .rl-row-r .btn{padding:8px 13px}
  .btn{min-height:40px}
}
a.btn{text-decoration:none}