:root{--bg:#0b0b0d;--card:#151517;--mut:#8a8a93;--fg:#f2f2f5;--acc:#e8b339;--red:#c74440;--green:#4caf7d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.5 -apple-system,system-ui,sans-serif;padding-bottom:40px}
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(env(safe-area-inset-top, 0px) + 14px) 16px 12px;border-bottom:1px solid #222}
.brand{font-size:18px}
.brand .who{color:var(--mut);font-size:13px;margin-left:10px}
.pushbtn{background:var(--card);border:1px solid #2f2f36;color:var(--fg);font-size:13px;padding:7px 12px;border-radius:9px;cursor:pointer}
.pushbtn.on{border-color:var(--green);color:var(--green)}
.iosHint{margin:10px 16px 0;padding:10px 12px;background:#1c1a12;border:1px solid #3a331d;border-radius:10px;color:#d8c68a;font-size:13.5px}
.tabs{display:flex;gap:8px;padding:12px 16px 0}
.tab{flex:1;background:var(--card);border:1px solid #2f2f36;color:var(--mut);font-size:15px;padding:10px;border-radius:11px;cursor:pointer}
.tab.on{color:var(--fg);border-color:var(--acc)}
.tab .cnt{display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;border-radius:10px;background:var(--red);color:#fff;font-weight:700;font-size:12.5px;line-height:20px}
.tab .cnt:empty{display:none}
main{padding:14px 16px}
.pane{display:none}
.pane.on{display:block}
.addForm{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;padding:12px;background:var(--card);border:1px solid #26262c;border-radius:12px}
.addForm input[type=text],.addForm textarea,.addForm input[type=date],.addForm select{background:#0f0f12;border:1px solid #2f2f36;border-radius:8px;color:var(--fg);padding:9px 10px;font-size:15px;font-family:inherit;width:100%}
.addForm input:focus,.addForm textarea:focus,.addForm select:focus{outline:none;border-color:var(--acc)}
.formRow{display:flex;gap:8px}
.formRow select,.formRow input[type=date]{flex:1;min-width:0}
.formRow button{background:var(--acc);border:0;border-radius:8px;color:#111;font-weight:700;font-size:15px;padding:9px 16px;cursor:pointer;white-space:nowrap}
.item{display:flex;gap:12px;align-items:flex-start;padding:12px;background:var(--card);border:1px solid #26262c;border-radius:12px;margin-bottom:10px}
.item.overdue{border-color:var(--red)}
.item.today{border-color:var(--acc)}
.item.done{opacity:.55}
.item.done .t{text-decoration:line-through}
.itemBody{flex:1;min-width:0}
.item .t{font-size:15.5px}
.item .d{color:var(--mut);font-size:13.5px;margin-top:3px;white-space:pre-wrap}
.item .m{color:var(--mut);font-size:12px;margin-top:5px}
.badge{display:inline-block;font-size:11px;font-weight:700;padding:1px 7px;border-radius:8px;margin-right:6px;vertical-align:1px}
.badge.hausaufgabe{background:#233047;color:#9cc0f0}
.badge.bestrafung{background:#3d1f1f;color:#f0a0a0}
.due{font-weight:600}
.due.overdue{color:var(--red)}
.due.today{color:var(--acc)}
.actions{display:flex;flex-direction:column;gap:6px;flex:none}
.actions button{background:#1d1d22;border:1px solid #2f2f36;color:var(--fg);font-size:12.5px;padding:6px 10px;border-radius:8px;cursor:pointer;white-space:nowrap}
.actions button.pri{background:var(--green);border-color:var(--green);color:#0b0b0d;font-weight:700}
.actions button.warn:hover{border-color:var(--red);color:var(--red)}
.doneWrap{margin-top:18px}
.doneWrap summary{color:var(--mut);font-size:14px;cursor:pointer;padding:6px 2px}
.empty{color:var(--mut);text-align:center;padding:26px 10px;font-size:14.5px}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:#222;color:var(--fg);padding:10px 18px;border-radius:10px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;box-shadow:0 8px 30px rgba(0,0,0,.5);max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.cmt{color:#c8c8d0;font-size:13.5px;margin-top:5px;background:#101014;border:1px solid #232329;border-radius:8px;padding:6px 9px}
.d.resol{color:#a8d5b5}
.inlineForm{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.inlineForm input{background:#0f0f12;border:1px solid #2f2f36;border-radius:8px;color:var(--fg);padding:8px 10px;font-size:14px;width:100%}
.inlineForm input:focus{outline:none;border-color:var(--acc)}
.ifRow{display:flex;gap:7px}
.ifRow input[type=date]{flex:1;min-width:0}
.ifRow button{background:var(--acc);border:0;border-radius:8px;color:#111;font-weight:700;font-size:13.5px;padding:8px 14px;cursor:pointer;white-space:nowrap}
.ifRow button[data-act=cancelInline]{background:#1d1d22;border:1px solid #2f2f36;color:var(--mut);font-weight:400}
.hbtns{display:flex;gap:8px}
.ghostBanner{margin:10px 16px 0;padding:9px 12px;background:#1a1226;border:1px solid #3d2a5e;border-radius:10px;color:#c9b3ef;font-size:13.5px}
.loginWrap{display:flex;justify-content:center;padding:12vh 16px 0}
.loginCard{display:flex;flex-direction:column;gap:10px;width:min(360px,100%);padding:22px;background:var(--card);border:1px solid #2f2f36;border-radius:14px}
.loginTitle{font-size:20px;font-weight:700;text-align:center;margin-bottom:6px}
.loginCard select,.loginCard input{background:#0f0f12;border:1px solid #2f2f36;border-radius:9px;color:var(--fg);padding:11px 12px;font-size:16px}
.loginCard select:focus,.loginCard input:focus{outline:none;border-color:var(--acc)}
.loginCard button{background:var(--acc);border:0;border-radius:9px;color:#111;font-weight:700;font-size:16px;padding:11px;cursor:pointer}
.loginErr{color:var(--red);font-size:13.5px;text-align:center;min-height:18px}