:root{font-family:Inter,system-ui,-apple-system,sans-serif;color:#1b2430;background:#f6f7f9}*{box-sizing:border-box}body{margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}.shell{max-width:980px;margin:auto;padding:28px 18px 70px}.top{display:flex;align-items:center;justify-content:space-between;gap:12px}.muted{color:#687385}.small{font-size:13px}h1{font-size:30px;letter-spacing:-1px;margin:5px 0}h2{font-size:19px;margin:0 0 16px}.panel{background:white;border:1px solid #e7eaf0;border-radius:17px;padding:20px;margin-top:18px;box-shadow:0 3px 18px #172b4d08}.tabs,.filters{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}.tabs button,.filters button{border:1px solid #dfe4ec;background:white;border-radius:11px;padding:10px 17px;color:#455064}.tabs button.active,.filters button.active{background:#182c47;color:white;border-color:#182c47}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}.stat{padding:18px;background:white;border:1px solid #e7eaf0;border-radius:15px}.stat strong{display:block;font-size:27px;margin-top:4px}.formrow{display:flex;gap:9px;flex-wrap:wrap}.formrow input{flex:1;min-width:180px}input,select,textarea{border:1px solid #dce2ea;border-radius:10px;padding:11px 12px;background:white;color:#1b2430}button.primary{background:#1b715c;color:white;border:0;border-radius:10px;padding:11px 17px}button.secondary{background:white;border:1px solid #dce2ea;border-radius:10px;padding:10px 13px;color:#263344}.task{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid #eef0f3}.task:last-child{border:0}.task input[type=checkbox]{width:19px;height:19px;accent-color:#1b715c;flex:none}.taskmain{flex:1;min-width:0}.done{text-decoration:line-through;color:#89929e}.pill{display:inline-block;font-size:11px;padding:3px 7px;background:#edf1f5;border-radius:7px;margin:3px 5px 0 0}.pill.high{background:#ffebeb;color:#a33434}.actions{display:flex;gap:5px}.actions button{border:0;background:transparent;color:#657183;padding:6px}.project{padding:16px;border:1px solid #e6e9ef;border-radius:12px;margin:10px 0}.project h3{margin:0 0 5px;font-size:16px}.progress{height:6px;border-radius:8px;background:#edf1f3;margin-top:12px;overflow:hidden}.progress div{height:100%;background:#1b715c}.auth{max-width:460px;margin:65px auto}.auth input{width:100%;margin:6px 0 12px}.hidden{display:none!important}.notice{padding:12px;border-radius:10px;background:#fff4dc;color:#6d5216;margin-top:12px}.error{color:#ad2f2f}.success{color:#16735b}dialog{border:1px solid #dce2ea;border-radius:17px;max-width:520px;width:calc(100% - 32px);padding:24px;box-shadow:0 20px 70px #0003}dialog::backdrop{background:#14203388}dialog label{display:block;margin:12px 0 5px;font-size:13px;color:#536073}dialog input,dialog select,dialog textarea{width:100%}dialog menu{padding:0;display:flex;justify-content:flex-end;gap:8px;margin-bottom:0}.headeractions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}@media(max-width:580px){.stats{grid-template-columns:repeat(3,1fr)}.stat{padding:12px}.stat strong{font-size:24px}.shell{padding:18px 13px 60px}h1{font-size:26px}.panel{padding:15px}.task{align-items:flex-start}}

/* Version 1.1: vidareutveckling av originalgränssnittet */
:root{color:#243c36;background:#f6f8f5}body{min-height:100dvh}.shell{max-width:1100px;padding-top:36px}.panel{box-shadow:0 4px 24px #143d2010;border-color:#e2e8df;border-radius:18px}.tabs button.active,.filters button.active{background:#244b41;border-color:#244b41}.tabs{padding:4px;border:1px solid #e2e8df;background:#fff;border-radius:14px;display:inline-flex}.tabs button{border:0;background:transparent;min-width:125px}.stat{background:#fff;border-color:#e2e8df;box-shadow:0 2px 10px #173b2210}.stat strong{font-weight:600;color:#244b41}.stat:nth-child(2){background:#f3f6fb}.stat:nth-child(3){background:#f8f5eb}.task{padding:17px 0}.tasktitle{font-weight:550;font-size:14px;overflow-wrap:anywhere}.task-notes{font-size:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;max-width:580px;margin:5px 0}.pill{font-size:11px;border-radius:5px;background:#f0f3ed;color:#64745e}.pill.low{background:#edf3f8;color:#74859c}.pill.overdue{color:#b14d37;background:#fff1e8}.taskmain{line-height:1.65}.actions button{min-width:44px;min-height:44px;border-radius:8px;font-size:19px}.actions button:hover{background:#f0f4ed;color:#245340}.actions{flex-shrink:0}.project{border-color:#e2e8df;padding:20px}.project h3{overflow-wrap:anywhere}.project-description{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7}.project summary{font-size:13px;color:#5a7762;cursor:pointer;padding:12px 0}.project .task{padding:13px 0}.project .actions button{min-width:36px;width:36px}.empty{padding:28px 0;text-align:center;line-height:1.8}.notice{line-height:1.7}.progress{margin-bottom:6px}.project-progress{margin-top:12px}progress{appearance:none;width:100%;height:6px;border:0;border-radius:8px;display:block;margin:12px 0;background:#edf1eb}progress::-webkit-progress-bar{border-radius:8px;background:#edf1eb}progress::-webkit-progress-value{background:#84a579;border-radius:8px}progress::-moz-progress-bar{background:#84a579;border-radius:8px}.skip{position:absolute;top:-80px;left:16px;z-index:3;padding:10px;background:white}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}button,input,select,textarea{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #80b8a3;outline-offset:3px}input,select,button.primary,button.secondary{min-height:44px}input[type=checkbox]{min-height:22px;min-width:22px}.formrow{gap:10px}.formrow input[type=date]{flex:0 1 160px;min-width:140px}.formrow input[type=text],#quickText{flex:1 1 220px}#search{display:block;width:100%;margin:18px 0 4px;font-size:14px;background:#fafbf9}dialog{max-height:90dvh;overflow:auto}dialog textarea{resize:vertical}dialog h2{margin-bottom:8px}.footer{text-align:center;font-size:11px;margin-top:30px;color:#8b978d}#status.error{color:#a33f32}#status.success{color:#356f52}#status{padding:12px 0;overflow-wrap:anywhere}.top h2{margin:0}.auth label{display:block;font-size:13px;margin:12px 0 4px}.auth .formrow{margin-top:8px}.auth #resetconfig{margin-top:15px;font-size:12px}.auth input{font-size:16px}#setupmsg,#authmsg{line-height:1.7}button:hover{filter:brightness(.98)}@media(max-width:580px){.shell{padding:20px 13px 45px}.headeractions{gap:5px;justify-content:flex-end}.headeractions button{font-size:11px;padding:8px}.top{align-items:flex-start}.stat .small{font-size:11px}.stat strong{font-size:26px}.panel{padding:16px}h1{white-space:nowrap}.top h2{padding-top:9px;font-size:17px}.top>.secondary,.top>.primary{font-size:12px;padding:10px}.formrow input,.formrow select{font-size:16px}.formrow input[type=date]{flex:1 1 140px;min-width:0}.formrow select{flex:1 1 140px;min-width:0}.formrow button{flex:1}.task{gap:10px}.tasktitle{font-size:14px}.actions{gap:0}.actions button{min-width:34px;width:34px;padding:4px}.filters{gap:6px}.filters button{padding:9px 12px;font-size:12px}.project{padding:14px}.project .top{flex-wrap:wrap}.project .top>div:first-child{flex:1;min-width:160px}dialog input,dialog select,dialog textarea{font-size:16px}.auth{margin:35px auto}#search{font-size:16px}}

/* 1.2: Gemensamma färger för ljust och mörkt läge. */
:root{
 color-scheme:light;
 --page:#f6f8f5;--surface:#fff;--text:#243c36;--muted:#687385;
 --border:#e2e8df;--divider:#eef0f3;--field:#fff;--search:#fafbf9;
 --stat-work:#f3f6fb;--stat-today:#f8f5eb;--stat-number:#244b41;
 --button-text:#263344;--filter-text:#455064;--active:#244b41;--active-text:#fff;
 --primary:#1b715c;--primary-text:#fff;--hover:#f0f4ed;--hover-text:#245340;
 --pill:#f0f3ed;--pill-text:#64745e;--low:#edf3f8;--low-text:#60728b;
 --high:#ffebeb;--high-text:#a33434;--overdue:#fff1e8;--overdue-text:#a84630;
 --label:#536073;--subtle:#737f78;--done:#758071;--action:#657183;
 --error:#a33f32;--success:#356f52;--progress:#edf1eb;--progress-fill:#84a579;
 --notice:#fff4dc;--notice-text:#6d5216;--focus:#518973;--shadow:0 4px 24px #143d2010;
 --backdrop:#14203388;--link:#266b55;
}
:root[data-theme="dark"]{
 color-scheme:dark;
 --page:#101917;--surface:#192521;--text:#e4eee8;--muted:#acbab2;
 --border:#35473e;--divider:#2d3c34;--field:#111d18;--search:#142019;
 --stat-work:#1b2830;--stat-today:#2b291e;--stat-number:#a7d9be;
 --button-text:#deebe3;--filter-text:#bdcdc3;--active:#285c49;--active-text:#effbf4;
 --primary:#8cd5b8;--primary-text:#102c20;--hover:#293e31;--hover-text:#c3ead2;
 --pill:#2b3b2d;--pill-text:#c4d8ba;--low:#263745;--low-text:#bad0e6;
 --high:#492c2d;--high-text:#ffbeb8;--overdue:#493126;--overdue-text:#ffd0ac;
 --label:#b9c8be;--subtle:#a4b4a8;--done:#a3b0a6;--action:#b0c3b5;
 --error:#ffb7a9;--success:#a2dab6;--progress:#304235;--progress-fill:#8cc99b;
 --notice:#3d3520;--notice-text:#f1d79b;--focus:#9edbbd;--shadow:0 4px 24px #0002;
 --backdrop:#030b08bf;--link:#a7d9be;
}
:root{background:var(--page);color:var(--text)}
a{color:var(--link)}
.panel,.stat,.tabs,.filters button,button.secondary,.skip,dialog{background:var(--surface);border-color:var(--border);color:var(--text)}
.panel,.stat{box-shadow:var(--shadow)}
.muted{color:var(--muted)}
.stat:nth-child(2){background:var(--stat-work)}
.stat:nth-child(3){background:var(--stat-today)}
.stat strong{color:var(--stat-number)}
button.secondary{color:var(--button-text)}
.tabs button,.filters button{color:var(--filter-text)}
.tabs button.active,.filters button.active{background:var(--active);color:var(--active-text);border-color:var(--active)}
input,select,textarea{background:var(--field);color:var(--text);border-color:var(--border)}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
#search{background:var(--search)}
button.primary{background:var(--primary);color:var(--primary-text)}
.task{border-color:var(--divider)}
.task input[type=checkbox]{accent-color:var(--primary)}
.done{color:var(--done)}
.pill{background:var(--pill);color:var(--pill-text)}
.pill.high{background:var(--high);color:var(--high-text)}
.pill.low{background:var(--low);color:var(--low-text)}
.pill.overdue{background:var(--overdue);color:var(--overdue-text)}
.actions button{color:var(--action)}
.actions button:hover{background:var(--hover);color:var(--hover-text)}
.project{border-color:var(--border)}
.project summary{color:var(--stat-number)}
progress{background:var(--progress)}
progress::-webkit-progress-bar{background:var(--progress)}
progress::-webkit-progress-value{background:var(--progress-fill)}
progress::-moz-progress-bar{background:var(--progress-fill)}
.notice{background:var(--notice);color:var(--notice-text)}
.error,#status.error{color:var(--error)}
.success,#status.success{color:var(--success)}
dialog{box-shadow:0 20px 70px #0005}
dialog::backdrop{background:var(--backdrop)}
dialog label,.auth label{color:var(--label)}
.footer{color:var(--subtle)}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--focus)}
.theme-toggle{white-space:nowrap}
.theme-toggle[aria-pressed="true"]{border-color:var(--focus);background:var(--hover);color:var(--text)}
@media(max-width:580px){.shell>.top{flex-wrap:wrap}.shell>.top>.headeractions{flex:1 1 100%;justify-content:flex-start}.headeractions button{font-size:12px;min-height:44px}}

/* Delningar och personlig sortering. */
.share-resource{font-weight:600;overflow-wrap:anywhere}.share-subheading{font-size:14px;margin:24px 0 10px}.share-person{display:grid;grid-template-columns:1fr auto;gap:8px;padding:16px 0;border-bottom:1px solid var(--border)}.share-person strong{font-size:13px;overflow-wrap:anywhere;grid-column:1/-1}.share-person .muted{grid-column:1/-1}.share-person select{min-width:0;font-size:12px}.share-person .secondary{font-size:12px}.invitation{border:1px solid var(--border);border-radius:10px;padding:16px;margin:15px 0}.invitation h3{font-size:15px;margin:0;overflow-wrap:anywhere}.invitation p{overflow-wrap:anywhere;line-height:1.6}.invitation-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}#shareDialog input,#shareDialog select{width:100%}.order-handle{touch-action:none;cursor:grab;flex-shrink:0;color:var(--muted);padding:5px;min-height:44px;min-width:28px;border:0;background:transparent;font-size:23px;vertical-align:middle;border-radius:6px}.order-handle:hover{background:var(--hover);color:var(--text)}.project h3 .order-handle{margin-right:6px}.reordering,.reordering *{user-select:none!important}.reordering .order-handle{cursor:grabbing}.drag-source{opacity:.55}.drop-before{box-shadow:0 -3px 0 var(--focus)!important}.drop-after{box-shadow:0 3px 0 var(--focus)!important}@media(max-width:580px){.task{gap:7px}.order-handle{min-width:24px;padding:2px}.share-person{grid-template-columns:1fr}.share-person select{font-size:16px}}

.shell>.top{flex-wrap:wrap}.shell>.top>.headeractions{margin-left:auto}h1{white-space:nowrap}