:root{
    --bg:#0c0b10; --bg2:#131219; --panel:#15141c; --panel2:#1d1c26;
    --line-2:#2a2834; --line-soft:#201f29;
    --text:#f2f0f6; --muted:#9a95aa; --faint:#5e596f;
    --gold:#e2b768; --gold-soft:#f1dba8; --gold-deep:#b48f44;
    --lime:#c2f259; --lime-deep:#9cc63f;
    --ern:#9fd089; --sport:#f29469; --arbeit:#e2b768; --schule:#8fa6f2; --selbst:#c79bf2; --water:#7cd0ea;
    --shadow:0 24px 60px -28px rgba(0,0,0,.85);
    --r:20px; --r-sm:13px;
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
  html,body{margin:0; background:
    radial-gradient(1200px 760px at 82% -10%, rgba(226,183,104,.10), transparent 58%),
    radial-gradient(900px 620px at -8% 105%, rgba(199,155,242,.07), transparent 55%),
    var(--bg);
    color:var(--text); font-family:Inter,system-ui,sans-serif; -webkit-font-smoothing:antialiased}
  body{padding:0 0 122px; min-height:100vh}
  .wrap{max-width:780px; margin:0 auto; padding:0 18px}
  button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
  input,textarea{font-family:inherit}
  ::placeholder{color:var(--faint)}
  img{max-width:100%}

  /* App bar */
  .appbar{display:flex; align-items:center; justify-content:space-between; padding:20px 0 4px}
  .brand{display:flex; align-items:center; gap:9px}
  .brand .logo{width:30px; height:30px; border-radius:9px; border:1.5px solid var(--gold-deep); display:grid; place-items:center; font-family:Fraunces,serif; font-weight:600; color:var(--gold-soft); font-size:17px}
  .brand .nm{font-family:Fraunces,serif; font-weight:500; font-size:19px; letter-spacing:.01em}
  .gear{width:36px; height:36px; border-radius:10px; border:1px solid var(--line-2); color:var(--muted); display:grid; place-items:center}
  .gear:active{background:var(--panel)}
  .gear svg{width:18px;height:18px}

  .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:11px; margin-top:16px}
  #t-stats>.panel:first-child{margin-top:20px}
  .stat{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r-sm); padding:13px 12px 11px}
  .stat .k{font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700}
  .stat .v{font-family:Fraunces,serif; font-size:26px; font-weight:600; line-height:1; margin-top:7px; letter-spacing:-.02em}
  .stat .v small{font-size:13px; color:var(--muted); font-weight:500; font-family:Inter}
  .stat.s-streak .v{color:var(--sport)} .stat.s-avg .v{color:var(--lime)} .stat.s-today .v{color:var(--gold-soft)}

  nav.tabs{position:fixed; bottom:0; left:0; right:0; z-index:40;
    background:linear-gradient(180deg,rgba(12,11,16,.35),var(--bg) 58%);
    backdrop-filter:blur(16px); border-top:1px solid var(--line-soft); padding:8px 0 calc(8px + env(safe-area-inset-bottom))}
  nav.tabs .inner{max-width:780px; margin:0 auto; display:flex; padding:0 8px; gap:2px}
  nav.tabs button{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:5px 1px; border-radius:13px; color:var(--faint); font-size:9.5px; letter-spacing:.01em; font-weight:600; transition:.18s}
  nav.tabs button svg{width:21px; height:21px}
  nav.tabs button.on{color:var(--gold-soft)}

  .day-head{display:flex; align-items:center; justify-content:space-between; margin:22px 0 8px}
  .day-head h2{font-family:Fraunces,serif; font-weight:500; font-size:20px; margin:0}
  .dn-btn{width:34px; height:34px; border-radius:10px; border:1px solid var(--line-2); color:var(--muted); font-size:16px; display:grid; place-items:center}
  .dn-btn:active{background:var(--panel)}

  .ring-card{display:flex; align-items:center; gap:18px; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:17px; margin-bottom:18px}
  .ring{position:relative; width:84px; height:84px; flex:none}
  .ring svg{transform:rotate(-90deg)}
  .ring .pct{position:absolute; inset:0; display:grid; place-items:center; font-family:Fraunces,serif; font-weight:600; font-size:21px}
  .ring-card .msg .big{font-family:Fraunces,serif; font-size:17px; font-weight:500; margin-bottom:3px}
  .ring-card .msg .sm{color:var(--muted); font-size:13px; line-height:1.45}
  .celebrate{text-align:center; padding:18px; border:1px dashed var(--gold-deep); border-radius:var(--r); background:rgba(226,183,104,.06); margin-bottom:16px; font-family:Fraunces,serif; font-size:16px; color:var(--gold-soft)}

  .area{margin-bottom:18px}
  .area-h{display:flex; align-items:center; gap:9px; margin:0 2px 10px}
  .area-h .ic{font-size:16px}
  .area-h .nm{font-weight:700; font-size:12px; letter-spacing:.13em; text-transform:uppercase}
  .area-h .ln{flex:1; height:1px; background:var(--line-soft)}
  .area-h .cnt{font-size:11.5px; color:var(--faint); font-weight:700}
  .habit{display:flex; align-items:center; gap:13px; padding:13px 15px; border:1px solid var(--line-soft); border-radius:14px; margin-bottom:8px; background:var(--panel); transition:.16s; user-select:none}
  .habit:active{transform:scale(.992)}
  .check{width:26px; height:26px; border-radius:9px; border:2px solid var(--line-2); flex:none; display:grid; place-items:center; transition:.18s}
  .habit.done .check{background:var(--ac); border-color:var(--ac)}
  .check svg{width:15px; height:15px; stroke:#13100a; stroke-width:3.4; opacity:0; transform:scale(.4); transition:.18s}
  .habit.done .check svg{opacity:1; transform:scale(1)}
  .habit .label{flex:1; font-size:15px; font-weight:500; transition:.18s}
  .habit.done .label{color:var(--muted); text-decoration:line-through; text-decoration-color:var(--faint)}
  .habit .streak{font-size:12px; font-weight:700; color:var(--faint); display:flex; align-items:center; gap:3px; white-space:nowrap}
  .habit .streak.hot{color:var(--sport)}

  /* area extras */
  .extra{background:var(--bg2); border:1px solid var(--line-soft); border-radius:14px; padding:12px 14px; margin:-2px 0 8px}
  .extra .row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .extra .lbl{font-size:12px; color:var(--muted); font-weight:600}
  .stepper{display:flex; align-items:center; gap:11px}
  .stepper button{width:30px; height:30px; border-radius:9px; border:1px solid var(--line-2); color:var(--gold-soft); font-size:17px; font-weight:700; display:grid; place-items:center}
  .stepper .num{font-family:Fraunces,serif; font-size:20px; font-weight:600; min-width:24px; text-align:center}
  .linkbtn{margin-left:auto; font-size:12px; color:var(--gold-soft); border:1px solid var(--line-2); padding:7px 11px; border-radius:9px; text-decoration:none; display:inline-flex; gap:5px; align-items:center}
  .miniadd{font-size:12.5px; color:var(--gold-soft); border:1px dashed var(--line-2); padding:8px 12px; border-radius:10px; margin-top:4px}
  .miniadd:active{border-color:var(--gold-deep)}
  .sess{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text); padding:6px 0}
  .sess .x{margin-left:auto; color:var(--faint); width:24px; height:24px; border-radius:7px}
  .sess .x:active{background:var(--panel); color:var(--sport)}
  .miniform{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:8px}
  .miniform input{background:var(--panel); border:1px solid var(--line-2); border-radius:9px; color:var(--text); padding:8px 10px; font-size:13px; width:auto}
  .miniform input.t{width:70px} .miniform input.lab{flex:1; min-width:90px}
  .miniform button{background:var(--gold); color:#16110a; font-weight:700; border-radius:9px; padding:8px 13px; font-size:13px}
  .total{font-size:12.5px; color:var(--lime); font-weight:700; margin-top:2px}
  .water{display:flex; align-items:center; gap:14px}
  .winfo{flex:1; min-width:0}
  .wbig{font-family:Fraunces,serif; font-size:21px; font-weight:600}
  .wbig span{font-size:14px; color:var(--muted); font-weight:500; font-family:Inter}
  .wrem{font-size:12.5px; color:var(--water); font-weight:600; margin-top:1px}
  .wbtns{display:flex; gap:7px; margin-top:9px; flex-wrap:wrap}
  .wbtns button{background:var(--panel); border:1px solid var(--line-2); color:var(--text); border-radius:10px; padding:8px 11px; font-size:12.5px; font-weight:600; display:inline-flex; gap:5px; align-items:center}
  .wbtns button i{color:var(--faint); font-style:normal; font-weight:500; font-size:11px}
  .wbtns button:active{background:var(--panel2)}
  .wbtns .undo{color:var(--muted)}
  .wfoot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:11px}
  .wedit{font-size:11.5px; color:var(--faint); text-align:left}
  .wedit:active{color:var(--gold-soft)}
  .wsettings{display:flex; gap:10px; margin-top:11px; flex-wrap:wrap}
  .wsettings label{font-size:11px; color:var(--muted); display:flex; flex-direction:column; gap:4px; font-weight:600}
  .wsettings input{width:84px; background:var(--panel); border:1px solid var(--line-2); border-radius:9px; color:var(--text); padding:7px 9px; font-size:13px}
  .wsettings input:focus{outline:none; border-color:var(--gold-deep)}

  .reflect{margin-top:6px; background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:16px}
  .reflect h3{font-family:Fraunces,serif; font-weight:500; font-size:16px; margin:0 0 2px}
  .reflect .why-line{font-size:12.5px; color:var(--faint); margin-bottom:8px}
  .mood{display:flex; gap:8px; margin:10px 0}
  .mood button{flex:1; padding:9px 0; font-size:20px; border:1px solid var(--line-soft); border-radius:12px; filter:grayscale(.6) opacity(.55); transition:.15s}
  .mood button.on{filter:none; border-color:var(--gold); background:rgba(226,183,104,.08); transform:translateY(-2px)}
  .mslot{margin:12px 0}
  .mslot .ml{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:7px; display:flex; align-items:center; gap:8px}
  .mslot.now .ml{color:var(--gold-soft)}
  .nowb{font-size:9px; background:rgba(226,183,104,.14); color:var(--gold-soft); padding:2px 7px; border-radius:6px; letter-spacing:.04em; font-weight:700}
  .mrow{display:flex; gap:7px}
  .mrow button{flex:1; padding:8px 0; font-size:18px; border:1px solid var(--line-soft); border-radius:11px; filter:grayscale(.6) opacity(.5); transition:.15s}
  .mrow button.on{filter:none; border-color:var(--gold); background:rgba(226,183,104,.08); transform:translateY(-2px)}
  .reflect textarea{width:100%; min-height:62px; resize:vertical; background:var(--bg2); border:1px solid var(--line-soft); border-radius:12px; color:var(--text); padding:11px 13px; font-size:14px; line-height:1.5; margin-top:4px}
  .reflect textarea:focus{outline:none; border-color:var(--gold-deep)}

  /* Was jetzt? */
  .rec-head{padding:22px 2px 4px}
  .rec-head h2{font-family:Fraunces,serif; font-weight:500; font-size:25px; margin:0; letter-spacing:-.01em}
  .rec-head .s{color:var(--muted); font-size:13.5px; margin-top:4px; line-height:1.45}
  .rec-q{font-size:12px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:20px 2px 11px}
  .mood-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:9px}
  .ms{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 6px; border:1px solid var(--line-soft); border-radius:15px; background:var(--panel); transition:.15s}
  .ms .e{font-size:24px}
  .ms .l{font-size:11.5px; color:var(--muted); font-weight:600; text-align:center; line-height:1.2}
  .ms.on{border-color:var(--gold); background:rgba(226,183,104,.08); transform:translateY(-2px)}
  .ms.on .l{color:var(--gold-soft)}
  .time-row{display:flex; gap:9px}
  .tp{flex:1; padding:11px 0; text-align:center; border:1px solid var(--line-soft); border-radius:12px; background:var(--panel); font-size:13.5px; font-weight:600; color:var(--muted)}
  .tp.on{border-color:var(--gold); background:rgba(226,183,104,.08); color:var(--gold-soft)}
  .rec-go{width:100%; margin-top:18px; padding:15px; border-radius:15px; background:linear-gradient(100deg,var(--gold),var(--gold-deep)); color:#16110a; font-weight:800; font-size:15px}
  .rec-go:disabled{opacity:.4}
  .rec-card{display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line-2); border-radius:16px; background:var(--panel); margin-bottom:11px; box-shadow:var(--shadow)}
  .rec-card .e{font-size:30px; flex:none}
  .rec-card .mid{flex:1; min-width:0}
  .rec-card .nm{font-family:Fraunces,serif; font-size:18px; font-weight:500}
  .rec-card .meta{font-size:12.5px; color:var(--muted); margin-top:3px; line-height:1.4}
  .rec-card .min{font-size:11px; color:var(--gold-deep); font-weight:700; letter-spacing:.05em}
  .rec-card .do{flex:none; padding:10px 13px; border-radius:11px; background:var(--lime); color:#16210a; font-weight:800; font-size:12.5px; white-space:nowrap}
  .rec-card.done{opacity:.6}
  .rec-card.done .do{background:var(--panel2); color:var(--muted)}
  .rec-invest{text-align:center; color:var(--muted); font-size:13px; margin:16px 0 4px}
  .rec-invest b{color:var(--lime); font-family:Fraunces,serif; font-size:16px}

  /* Schule */
  .sch-head{padding:22px 2px 6px}
  .sch-head h2{font-family:Fraunces,serif; font-weight:500; font-size:25px; margin:0}
  .panel{background:var(--panel); border:1px solid var(--line-soft); border-radius:var(--r); padding:18px; margin-bottom:16px}
  .panel h2{font-family:Fraunces,serif; font-weight:500; font-size:18px; margin:0 0 3px}
  .panel .sub{color:var(--muted); font-size:13px; margin-bottom:14px}
  .todo{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
  .todo:last-of-type{border-bottom:none}
  .todo .cb{width:22px; height:22px; border-radius:7px; border:2px solid var(--line-2); flex:none; display:grid; place-items:center}
  .todo.done .cb{background:var(--schule); border-color:var(--schule)}
  .todo .cb svg{width:13px;height:13px;stroke:#0c0b10;stroke-width:3.5;opacity:0}
  .todo.done .cb svg{opacity:1}
  .todo .tt{flex:1; font-size:14.5px}
  .todo.done .tt{color:var(--muted); text-decoration:line-through}
  .todo .x{color:var(--faint); width:26px;height:26px;border-radius:7px}
  .todo .x:active{background:var(--bg2); color:var(--sport)}
  .addbar{display:flex; gap:8px; margin-top:12px}
  .addbar input{flex:1; background:var(--bg2); border:1px solid var(--line-soft); border-radius:10px; color:var(--text); padding:11px 13px; font-size:14px}
  .addbar input:focus{outline:none; border-color:var(--gold-deep)}
  .addbar button{padding:0 16px; border-radius:10px; background:var(--gold); color:#16110a; font-weight:800}
  .subj{border:1px solid var(--line-soft); border-radius:15px; margin-bottom:11px; overflow:hidden}
  .subj .sh{display:flex; align-items:center; gap:10px; padding:14px 15px; background:var(--bg2)}
  .subj .sh .nm{flex:1; font-weight:600; font-size:15px; color:var(--schule)}
  .subj .sh .chev{color:var(--faint); transition:.2s}
  .subj.open .sh .chev{transform:rotate(90deg)}
  .subj .sh .x{color:var(--faint); width:26px;height:26px;border-radius:7px}
  .subj .body{display:none; padding:14px 15px; border-top:1px solid var(--line-soft)}
  .subj.open .body{display:block}
  .subj textarea{width:100%; min-height:80px; resize:vertical; background:var(--bg2); border:1px solid var(--line-soft); border-radius:11px; color:var(--text); padding:11px 13px; font-size:14px; line-height:1.5}
  .subj textarea:focus{outline:none; border-color:var(--gold-deep)}
  .photos{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:11px}
  .photo{position:relative; aspect-ratio:1; border-radius:10px; overflow:hidden; border:1px solid var(--line-2)}
  .photo img{width:100%; height:100%; object-fit:cover; display:block}
  .photo .rm{position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; font-size:13px; display:grid; place-items:center}
  .addphoto{aspect-ratio:1; border:1px dashed var(--line-2); border-radius:10px; display:grid; place-items:center; color:var(--faint); font-size:22px}
  .addphoto:active{border-color:var(--gold-deep); color:var(--gold-soft)}

  /* Statistik */
  .mom-hero{text-align:center; padding:6px 0 2px}
  .mom-hero .num{font-family:Fraunces,serif; font-size:54px; font-weight:600; line-height:1; color:var(--lime); letter-spacing:-.02em}
  .mom-hero .num small{font-size:22px; color:var(--muted)}
  .mom-hero .lbl{color:var(--muted); font-size:13px; margin-top:6px; line-height:1.45}
  .tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
  .tile{background:var(--bg2); border:1px solid var(--line-soft); border-radius:14px; padding:14px 15px}
  .tile .tv{font-family:Fraunces,serif; font-size:28px; font-weight:600; line-height:1; letter-spacing:-.02em}
  .tile .tl{font-size:11.5px; color:var(--muted); margin-top:6px; font-weight:600}
  .tile.c1 .tv{color:var(--gold-soft)} .tile.c2 .tv{color:var(--lime)} .tile.c3 .tv{color:var(--sport)} .tile.c4 .tv{color:var(--schule)}
  .cal-wd{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px}
  .cal-wd span{text-align:center; font-size:10px; color:var(--faint); font-weight:700}
  .cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
  .cal-cell{aspect-ratio:1; border-radius:9px; background:var(--bg2); border:1px solid var(--line-soft); display:grid; place-items:center; font-size:11px; color:var(--faint); font-weight:600}
  .cal-cell.blank{background:transparent; border:none}
  .cal-cell.today{outline:2px solid var(--gold); outline-offset:1px}
  .cal-cell.future{opacity:.4}
  .legend{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:11px; color:var(--faint); flex-wrap:wrap}
  .legend .sw{width:13px; height:13px; border-radius:4px}
  .area-stat{display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line-soft)}
  .area-stat:last-child{border-bottom:none}
  .area-stat .ic{font-size:16px; width:22px; text-align:center}
  .area-stat .nm{flex:1; font-size:14px; font-weight:500}
  .bar{height:7px; border-radius:4px; background:var(--bg2); width:120px; overflow:hidden; flex:none}
  .bar i{display:block; height:100%; border-radius:4px}
  .area-stat .pc{font-size:12px; color:var(--muted); font-weight:700; width:34px; text-align:right}

  /* Customize */
  .cust-area{border:1px solid var(--line-soft); border-radius:var(--r); margin-bottom:14px; overflow:hidden}
  .cust-area .top{display:flex; align-items:center; gap:10px; padding:14px 15px; background:var(--panel)}
  .cust-area .top .ic{font-size:17px}
  .cust-area .top .nm{flex:1; font-weight:700; font-size:14px}
  .cust-area .top button{color:var(--faint); font-size:13px}
  .cust-habit{display:flex; align-items:center; gap:10px; padding:10px 15px; border-top:1px solid var(--line-soft)}
  .cust-habit .lab{flex:1; font-size:14px}
  .cust-habit .del{color:var(--faint); width:26px; height:26px; border-radius:8px; font-size:15px}
  .cust-habit .del:active{background:var(--bg2); color:var(--sport)}
  .add-row{display:flex; gap:8px; padding:10px 15px; border-top:1px solid var(--line-soft); background:var(--bg2)}
  .add-row input{flex:1; background:var(--panel); border:1px solid var(--line-soft); border-radius:9px; color:var(--text); padding:8px 11px; font-size:13.5px}
  .add-row input:focus{outline:none; border-color:var(--gold-deep)}
  .add-row button{padding:0 14px; border-radius:9px; background:var(--gold); color:#16110a; font-weight:800; font-size:13px}
  .add-area{width:100%; padding:14px; border:1px dashed var(--line-2); border-radius:var(--r); color:var(--muted); font-weight:600; font-size:14px; margin-bottom:18px}
  .add-area:active{border-color:var(--gold-deep); color:var(--gold-soft)}
  .field{margin-bottom:14px}
  .field label{display:block; font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:7px}
  .field input,.field textarea{width:100%; background:var(--panel); border:1px solid var(--line-soft); border-radius:11px; color:var(--text); padding:12px 14px; font-size:15px}
  .field textarea{min-height:62px; resize:vertical; font-family:Fraunces,serif; font-style:italic; line-height:1.5}
  .field input:focus,.field textarea:focus{outline:none; border-color:var(--gold-deep)}
  .act-item{padding:11px 15px; border-top:1px solid var(--line-soft)}
  .act-item .r1{display:flex; align-items:center; gap:9px}
  .act-item .r1 .lab{flex:1; font-size:14px}
  .act-item .tags{font-size:11px; color:var(--faint); margin-top:5px}
  .act-item .del{color:var(--faint); width:26px;height:26px;border-radius:8px;font-size:15px}
  .bk{padding:12px 16px; border-radius:12px; border:1px solid var(--line-2); background:var(--panel); color:var(--gold-soft); font-weight:600; font-size:13.5px; display:inline-block}
  .bk:active{background:var(--panel2)}
  .reset{display:block; margin:24px auto 0; color:var(--faint); font-size:12px; text-decoration:underline; text-underline-offset:3px}

  .tabview{display:none; animation:fade .25s ease}
  .tabview.on{display:block}
  @keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1}}
  @media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}
  .loader{position:fixed; inset:0; display:grid; place-items:center; background:var(--bg); z-index:99}
  .loader span{font-family:Fraunces,serif; font-style:italic; color:var(--gold-soft); font-size:18px}