:root{
  --bg:#04070d; --panel:rgba(10,16,28,0.75);
  --line:rgba(34,211,238,0.25); --hair:rgba(120,160,180,0.12);
  --cyan:#22d3ee; --ink:#eaf7fd; --ink2:#9fb6c6; --muted:#5a7080;
  --ok:#34d399; --warn:#fbbf24; --crit:#ff5d5d;
  --glow:0 0 12px rgba(34,211,238,0.5),0 0 30px rgba(34,211,238,0.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg)}
body{font-family:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;color:var(--ink);
  min-height:100vh;font-size:13px;line-height:1.45;overflow-x:hidden}
.bgfx{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 60% 40% at 50% -5%, rgba(34,211,238,0.07), transparent 60%)}
.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;
  padding:calc(22px + env(safe-area-inset-top)) 20px calc(34px + env(safe-area-inset-bottom))}
.fade{opacity:0;transform:translateY(8px);animation:boot .45s ease-out forwards;animation-delay:var(--d,0s)}
@keyframes boot{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  .fade{opacity:1;transform:none;animation:none}
  .led.crit,.now-label::before{animation:none}
}
.hidden{display:none!important}

/* top */
.top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px}
.logo{font-size:15px;font-weight:700;letter-spacing:0.3em;color:var(--ink2)}
.logo b{color:var(--cyan)}
.clock{text-align:right;color:var(--muted);font-size:11px;letter-spacing:0.12em;text-transform:uppercase}
.clock b{display:block;color:var(--ink);font-size:17px;letter-spacing:0.08em;font-weight:400}

/* NOW — the one thing */
.now{position:relative;border:1px solid var(--line);background:var(--panel);border-radius:5px;
  padding:26px 28px 22px;margin-bottom:26px}
.now::before,.now::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none}
.now::before{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.now::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.now-label{font-size:11px;letter-spacing:0.3em;color:var(--cyan);text-transform:uppercase;margin-bottom:12px}
.now-label::before{content:"●";margin-right:9px;animation:pl 1.8s ease-in-out infinite}
@keyframes pl{50%{opacity:0.3}}
.now-title{font-size:clamp(22px,4vw,31px);font-weight:700;line-height:1.25;letter-spacing:0.01em;
  color:var(--ink);text-shadow:var(--glow)}
.now-foot{display:flex;justify-content:space-between;align-items:baseline;margin-top:18px;
  padding-top:12px;border-top:1px solid var(--hair);font-size:11px;color:var(--muted);
  letter-spacing:0.1em;text-transform:uppercase;gap:12px}
.now-foot b{color:var(--ink2);font-weight:400;font-variant-numeric:tabular-nums;flex:none}

/* sections */
.sect{margin-bottom:24px}
.st{font-size:10.5px;letter-spacing:0.26em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.st b{color:var(--ink2);font-weight:600}
.st-toggle{cursor:pointer;display:flex;align-items:baseline;user-select:none;-webkit-user-select:none;
  -webkit-tap-highlight-color:transparent;padding:6px 0;margin-bottom:4px}
.st-toggle .chev{margin-left:auto;color:var(--muted);transition:transform .2s;font-size:11px}

/* checklists (mission + routine) */
.mission li{list-style:none;display:flex;gap:11px;align-items:baseline;padding:11px 2px;
  border-top:1px solid var(--hair);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mission li:first-child{border-top:none}
.mission .tick{flex:none;width:13px;height:13px;border:1px solid var(--line);border-radius:2px;position:relative;top:2px}
.mission li.done .tick{background:var(--ok);border-color:var(--ok)}
.mission li.done .mt{color:var(--muted);text-decoration:line-through}
.mission .tag{flex:none;font-size:9.5px;letter-spacing:0.12em;color:var(--muted);min-width:52px;text-transform:uppercase}
.mission li .tag.hot{color:var(--cyan)}
.mission .mt{font-size:13.5px;min-width:0;overflow-wrap:anywhere}
.mission li.div{cursor:default;padding:12px 2px 3px;font-size:9.5px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--muted)}
.mission li.empty{cursor:default}
.mission li.empty .mt{color:var(--muted)}
.mission li.current{box-shadow:inset 2px 0 0 var(--cyan);padding-left:10px}
.mission .kids{margin-left:auto;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;flex:none}
.mission .chev2{margin-left:9px;font-size:10px;color:var(--muted);flex:none}
.mission li.sub{padding-left:34px;border-top:1px solid rgba(120,160,180,0.06)}
.mission li.sub .mt{font-size:12.5px;color:var(--ink2)}
.mission li.sub .tick{width:11px;height:11px}

/* week bars */
.goals{display:grid;grid-template-columns:1fr 1fr;gap:7px 26px}
@media(max-width:620px){.goals{grid-template-columns:1fr}}
.goal .gt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink2);margin-bottom:4px}
.goal .gt b{color:var(--ink);font-weight:400;font-variant-numeric:tabular-nums}
.bar{height:4px;background:rgba(120,160,180,0.13);border-radius:2px;overflow:hidden;margin-bottom:6px}
.bar i{display:block;height:100%;width:0;background:var(--cyan);transition:width 1s ease}
.bar i.full{background:var(--ok)}

/* sectors */
.sectors{display:flex;flex-wrap:wrap;gap:7px}
.sec{display:flex;align-items:center;gap:8px;border:1px solid var(--hair);border-radius:3px;
  padding:11px 12px;cursor:default;transition:border-color .15s;-webkit-tap-highlight-color:transparent}
.sec:hover{border-color:var(--line)}
.led{width:7px;height:7px;border-radius:50%;flex:none}
.led.ok{background:var(--ok)}
.led.warn{background:var(--warn)}
.led.crit{background:var(--crit);box-shadow:0 0 8px var(--crit);animation:pcrit 1.4s ease-in-out infinite}
@keyframes pcrit{50%{box-shadow:0 0 16px var(--crit);transform:scale(1.3)}}
.sec .sn{font-size:12px;color:var(--ink2)}
.sec.crit .sn{color:var(--ink)}
.sec .warnmark{color:var(--crit);font-weight:700}
#tip{position:fixed;z-index:9;background:#0a1522;border:1px solid var(--line);border-radius:3px;
  color:var(--ink2);font-size:11.5px;padding:8px 11px;max-width:260px;pointer-events:none;display:none;
  box-shadow:0 4px 22px rgba(0,0,0,0.6)}

/* login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  padding:20px}
.login-box{position:relative;width:100%;max-width:320px;border:1px solid var(--line);background:var(--panel);
  border-radius:5px;padding:30px 26px 24px}
.login-box::before,.login-box::after{content:"";position:absolute;width:18px;height:18px;pointer-events:none}
.login-box::before{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan)}
.login-box::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan)}
.login-box .logo{text-align:center;margin-bottom:24px}
.login-box input{width:100%;background:rgba(10,21,34,0.6);border:1px solid var(--hair);border-radius:3px;
  color:var(--ink);font-family:inherit;font-size:16px;padding:11px 12px;margin-bottom:10px;outline:none}
.login-box input:focus{border-color:var(--line)}
.login-box input::placeholder{color:var(--muted)}
.login-box button{width:100%;background:transparent;border:1px solid var(--cyan);color:var(--cyan);
  border-radius:3px;font-family:inherit;font-size:12px;letter-spacing:0.24em;text-transform:uppercase;
  padding:12px;cursor:pointer;margin-top:4px}
.login-box button:disabled{opacity:.45;cursor:default}
#login-err{color:var(--crit);font-size:11.5px;margin-top:12px;text-align:center;min-height:16px}

/* netnote (Fehler an Ort und Stelle) */
#netnote{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);
  z-index:10;background:#0a1522;border:1px solid var(--crit);color:var(--ink);font-size:12px;
  padding:9px 14px;border-radius:3px;display:none;max-width:90vw;text-align:center}