/* ════════════════════════════════════════════════════════════════
   DailyFlow — Design System
   Zwei Themes (dark/light) über CSS-Variablen, ein Akzentton den
   der Nutzer selbst wählt (siehe --acc, wird per JS überschrieben).
   ════════════════════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --acc:#D4A853;--acc2:#7EB8FF;--acc3:#66E6C1;--acc4:#C77DFF;
  --red:#FF7A7A;--green:#5FE3A4;--amber:#F5B15A;
  --r:20px;--r2:14px;--r3:28px;--rp:999px;
  --glass-blur:blur(22px) saturate(160%);
  --font-serif:'Fraunces',serif;--font-sans:'Manrope',sans-serif;--font-hand:'Caveat',cursive;
  --dur:.2s;--ease:cubic-bezier(.25,.8,.35,1);
}

/* ── Dark theme (default) ── */
:root,
:root[data-theme="dark"]{
  --bg:#0A0A12;
  --s1:rgba(255,255,255,.045);--s2:rgba(255,255,255,.065);--s3:rgba(255,255,255,.09);--s4:rgba(255,255,255,.14);
  --tx:#F6F3EE;--tx2:#A6A3B4;--tx3:#68657C;
  --bd:rgba(255,255,255,.09);--bd2:rgba(255,255,255,.16);
  --shadow-1:0 1px 0 rgba(255,255,255,.05) inset, 0 20px 50px -20px rgba(0,0,0,.6);
  --shadow-2:0 1px 0 rgba(255,255,255,.06) inset, 0 10px 26px -12px rgba(0,0,0,.55);
  --bg-glow:
    radial-gradient(600px 500px at 8% -5%, rgba(199,125,255,.16), transparent 60%),
    radial-gradient(700px 550px at 105% 0%, rgba(102,230,196,.12), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(212,168,83,.09), transparent 60%);
  --ink-on-acc:#1B1200;
}
/* ── Light theme ── */
:root[data-theme="light"]{
  --bg:#F4F1EA;
  --s1:rgba(20,15,40,.035);--s2:rgba(20,15,40,.05);--s3:rgba(20,15,40,.075);--s4:rgba(20,15,40,.12);
  --tx:#211C2E;--tx2:#605C72;--tx3:#8B8798;
  --bd:rgba(20,15,40,.09);--bd2:rgba(20,15,40,.15);
  --shadow-1:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -22px rgba(60,40,20,.22);
  --shadow-2:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 22px -14px rgba(60,40,20,.18);
  --bg-glow:
    radial-gradient(600px 500px at 8% -5%, rgba(199,125,255,.14), transparent 60%),
    radial-gradient(700px 550px at 105% 0%, rgba(102,230,196,.14), transparent 55%),
    radial-gradient(900px 700px at 50% 115%, rgba(212,168,83,.12), transparent 60%);
  --ink-on-acc:#1B1200;
}
@media(prefers-color-scheme:light){
  :root[data-theme="auto"]{
    --bg:#F4F1EA;
    --s1:rgba(20,15,40,.035);--s2:rgba(20,15,40,.05);--s3:rgba(20,15,40,.075);--s4:rgba(20,15,40,.12);
    --tx:#211C2E;--tx2:#605C72;--tx3:#8B8798;
    --bd:rgba(20,15,40,.09);--bd2:rgba(20,15,40,.15);
    --shadow-1:0 1px 0 rgba(255,255,255,.6) inset, 0 20px 40px -22px rgba(60,40,20,.22);
    --shadow-2:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 22px -14px rgba(60,40,20,.18);
    --bg-glow:
      radial-gradient(600px 500px at 8% -5%, rgba(199,125,255,.14), transparent 60%),
      radial-gradient(700px 550px at 105% 0%, rgba(102,230,196,.14), transparent 55%),
      radial-gradient(900px 700px at 50% 115%, rgba(212,168,83,.12), transparent 60%);
  }
}

html{scroll-behavior:smooth;color-scheme:dark}
:root[data-theme="light"] html,html:has([data-theme="light"]){color-scheme:light}
body{
  font-family:var(--font-sans);color:var(--tx);min-height:100vh;overflow-x:hidden;
  background:var(--bg-glow),var(--bg);background-attachment:fixed;
  transition:background-color .3s ease,color .3s ease;
  position:relative;
}
/* Feines Korn über dem ganzen Hintergrund — nimmt der App den "glatten KI-Verlauf"-Look */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%25" height="100%25" filter="url(%23n)"/></svg>');
}
h1,h2,.serif{font-family:var(--font-serif);font-weight:300;letter-spacing:-.01em}
.hand{font-family:var(--font-hand);font-weight:600}
button{cursor:pointer;font-family:var(--font-sans);color:inherit}
input,select,textarea{font-family:var(--font-sans)}
a{color:var(--acc)}
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-thumb{background:var(--s4);border-radius:var(--rp)}
::selection{background:var(--acc);color:var(--ink-on-acc)}

.screen{display:none;min-height:100vh}.screen.active{display:flex}
[hidden]{display:none!important}

/* ══════════ AUTH ══════════ */
#screen-auth{align-items:center;justify-content:center;padding:24px}
.auth-box{width:440px;padding:46px 42px;background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bd);border-radius:var(--r3);box-shadow:var(--shadow-1)}
.auth-logo{font-family:var(--font-serif);font-size:34px;font-style:italic;background:linear-gradient(120deg,var(--acc),var(--acc3));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500}
.auth-logo span{display:block;font-size:13px;color:var(--tx2);font-family:var(--font-sans);font-weight:500;margin-top:6px;-webkit-text-fill-color:var(--tx2)}
.auth-tabs{display:flex;background:var(--s2);border-radius:var(--rp);padding:4px;margin:28px 0 24px}
.auth-tab{flex:1;padding:10px;border:none;border-radius:var(--rp);font-size:13px;font-weight:600;background:none;color:var(--tx2);transition:all var(--dur)}
.auth-tab.active{background:var(--acc);color:var(--ink-on-acc);box-shadow:0 4px 14px -4px rgba(212,168,83,.5)}
.fld{margin-bottom:14px}
.fld label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--tx3);margin-bottom:7px;font-weight:700}
.fi{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:12px 15px;color:var(--tx);font-size:14px;outline:none;transition:border-color .15s,background .15s}
.fi:focus{border-color:var(--acc);background:var(--s3)}
.btn-full{width:100%;padding:13px;border:none;border-radius:var(--rp);font-size:14px;font-weight:700;background:var(--acc);color:var(--ink-on-acc);margin-top:6px;transition:opacity .15s,transform .15s;box-shadow:0 8px 20px -8px rgba(212,168,83,.5)}
.btn-full:hover{opacity:.92;transform:translateY(-1px)}.btn-full:disabled{opacity:.5;cursor:not-allowed;transform:none}
.auth-err{background:rgba(255,122,122,.12);border:1px solid rgba(255,122,122,.3);border-radius:var(--r2);padding:10px 14px;font-size:13px;color:var(--red);margin-bottom:14px}
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:var(--tx3);font-size:12px}
.auth-divider .ln{flex:1;height:1px;background:var(--bd)}
.discord-btn{background:#5865F2;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px}
.auth-toggle-theme{position:fixed;top:20px;right:20px;background:var(--s2);border:1px solid var(--bd);color:var(--tx2);width:40px;height:40px;border-radius:var(--rp);display:flex;align-items:center;justify-content:center;font-size:16px}

/* ══════════ ONBOARDING ══════════ */
#screen-onboarding{flex-direction:column;align-items:center;justify-content:center;padding:40px 20px}
.onb-wrap{width:100%;max-width:640px}
.onb-step{display:none}.onb-step.active{display:block;animation:page-in .35s var(--ease) both}
.onb-progress{display:flex;gap:6px;margin-bottom:36px}
.onb-pip{height:4px;flex:1;border-radius:var(--rp);background:var(--s3);transition:background .4s}.onb-pip.done{background:linear-gradient(90deg,var(--acc),var(--acc3))}
.onb-title{font-size:clamp(28px,5vw,38px);margin-bottom:8px;line-height:1.15;font-family:var(--font-serif);font-weight:300}
.onb-sub{font-size:15px;color:var(--tx2);margin-bottom:32px;line-height:1.6}
.onb-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:28px}
.onb-opt{background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1.5px solid var(--bd);border-radius:var(--r);padding:16px 18px;text-align:left;display:flex;align-items:center;gap:14px;transition:all var(--dur);color:var(--tx)}
.onb-opt:hover{border-color:var(--tx3);transform:translateY(-1px)}.onb-opt.sel{border-color:var(--acc);background:rgba(212,168,83,.1);box-shadow:0 0 0 1px var(--acc) inset}
.onb-opt .oi{font-size:24px;flex-shrink:0}.onb-opt .ol{font-size:14px;font-weight:600}.onb-opt .os{font-size:12px;color:var(--tx2);margin-top:2px}
.onb-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.btn-back{padding:12px 22px;border:1px solid var(--bd);border-radius:var(--rp);background:var(--s2);color:var(--tx2);font-size:14px;font-weight:600}
.btn-next{padding:12px 28px;border:none;border-radius:var(--rp);background:var(--acc);color:var(--ink-on-acc);font-size:14px;font-weight:700;box-shadow:0 8px 20px -8px rgba(212,168,83,.5)}
.onb-inp{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:13px 16px;color:var(--tx);font-size:15px;outline:none;transition:border-color .15s;margin-bottom:10px}
.onb-inp:focus{border-color:var(--acc)}
.av-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:28px}
.av-opt{width:100%;aspect-ratio:1;border-radius:32%;display:flex;align-items:center;justify-content:center;font-size:22px;border:2px solid transparent;cursor:pointer;transition:all var(--dur);background:var(--s2)}
.av-opt.sel{border-color:var(--acc);background:rgba(212,168,83,.12);transform:scale(1.06)}
.col-grid{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.col-opt{width:36px;height:36px;border-radius:32%;border:3px solid transparent;cursor:pointer;transition:transform .15s}
.col-opt.sel{border-color:var(--tx);transform:scale(1.15) rotate(6deg)}
.wday-grid{display:flex;gap:7px;flex-wrap:wrap}
.wday-btn{width:38px;height:38px;border-radius:32%;border:2px solid transparent;font-size:12px;font-weight:700;background:var(--s3);color:var(--tx)}
.wday-btn.on{background:var(--acc);color:var(--ink-on-acc)}
.chk-row{display:flex;align-items:flex-start;gap:10px;padding:11px 4px;border-bottom:1px solid var(--bd);cursor:pointer;border-radius:var(--r2);transition:background .15s}
.chk-row:hover{background:var(--s2)}
.chk-row:last-child{border-bottom:none}
.chkbox{width:20px;height:20px;border-radius:7px;border:2px solid var(--bd);background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:11px;transition:all .15s}
.chkbox.saving{opacity:.5}
.chkbox.on{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc)}

/* ══════════ APP SHELL ══════════ */
#screen-app{flex-direction:row}
.sidebar{width:264px;background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-right:1px solid var(--bd);display:flex;flex-direction:column;padding:26px 16px;flex-shrink:0;height:100vh;overflow-y:auto;position:sticky;top:0;border-radius:0 28px 28px 0;box-shadow:var(--shadow-1)}
.sb-logo{font-family:var(--font-serif);font-style:italic;font-size:21px;background:linear-gradient(120deg,var(--acc),var(--acc3));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:500;padding:4px 10px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.theme-toggle{background:var(--s2);border:1px solid var(--bd);color:var(--tx2);width:30px;height:30px;border-radius:var(--rp);display:flex;align-items:center;justify-content:center;font-size:13px;-webkit-text-fill-color:var(--tx2)}
.sb-user{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:18px;background:var(--s2);border-radius:var(--r);border:1px solid var(--bd);cursor:pointer;transition:background .15s}
.sb-user:hover{background:var(--s3)}
.sb-av{width:38px;height:38px;border-radius:32%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.sb-section{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--tx3);padding:14px 10px 6px;font-weight:700}
.sb-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--rp);border:none;background:none;color:var(--tx2);font-size:13px;font-weight:600;width:100%;text-align:left;transition:all .15s}
.sb-item:hover{background:var(--s2);color:var(--tx)}
.sb-item.active{background:linear-gradient(90deg,rgba(212,168,83,.18),rgba(212,168,83,.03));color:var(--acc);box-shadow:0 0 0 1px rgba(212,168,83,.25) inset}
.sb-item .ico{width:16px;text-align:center;flex-shrink:0}
.sb-badge{margin-left:auto;font-size:11px;padding:2px 8px;border-radius:var(--rp);background:var(--acc);color:var(--ink-on-acc);font-weight:800}
.sb-streak{margin-top:auto;background:linear-gradient(160deg,rgba(212,168,83,.14),rgba(199,125,255,.07));border:1px solid rgba(212,168,83,.22);border-radius:var(--r);padding:16px;text-align:center;cursor:pointer}
.sb-sv{font-family:var(--font-serif);font-size:38px;color:var(--acc);line-height:1}
.sb-sl{font-size:11px;color:var(--tx2);margin-top:5px;text-transform:uppercase;letter-spacing:.8px;font-weight:600}
.sb-searchbtn{display:flex;align-items:center;gap:8px;background:var(--s2);border:1px solid var(--bd);color:var(--tx3);border-radius:var(--rp);padding:9px 12px;font-size:12px;margin-bottom:14px}
.sb-searchbtn kbd{margin-left:auto;background:var(--s3);border:1px solid var(--bd);border-radius:6px;padding:1px 6px;font-size:10px;color:var(--tx2)}

.main-area{flex:1;overflow-y:auto;padding:38px 34px 60px;max-height:100vh}
.page{display:none}.page.active{display:block;animation:page-in .3s var(--ease) both}
.ph{margin-bottom:30px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.ph h1{font-size:34px;color:var(--tx);font-weight:300;font-style:italic}.ph p{font-size:14px;color:var(--tx2);margin-top:6px}
.card{background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bd);border-radius:var(--r);padding:22px;box-shadow:var(--shadow-2);transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--bd2)}
.card-t{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--tx3);font-weight:700;margin-bottom:15px;display:flex;align-items:center;justify-content:space-between}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.prof-col{display:flex;flex-direction:column;gap:20px}
@media(max-width:1040px){.g3{grid-template-columns:1fr 1fr}}
@media(max-width:860px){.prof-grid,.g2{grid-template-columns:1fr}.g3{grid-template-columns:1fr}}
.save-status{font-size:12px;color:var(--tx2);margin-top:8px;min-height:16px;transition:color .15s}
.save-status.err{color:var(--red)}
.btn-dirty{position:relative;box-shadow:0 0 0 2px var(--acc)}
.btn-dirty::after{content:'●';position:absolute;top:-6px;right:-6px;color:var(--acc);font-size:10px;animation:pulse-dot 1.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.25}}
.empty-state{text-align:center;padding:32px 12px;color:var(--tx3)}
.empty-state .ei{font-size:30px;margin-bottom:8px}
.empty-state .et{font-size:13px}

/* micro animations */
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
button{transition:transform .12s ease, background-color .15s, border-color .15s, opacity .15s, box-shadow .15s}
.btn:active,.btn-p:active,.btn-icon:active,.todo-chk:active,.hi-tog:active,.work-tog:active,.tab:active,.tpl-chip:active,.wd-chip:active,.fab:active{transform:scale(.94)}
.todo-chk,.hi-tog,.cu-chk{transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .15s,border-color .15s}
.todo-chk.pop,.hi-tog.pop,.cu-chk.pop{animation:chk-pop .32s cubic-bezier(.34,1.56,.64,1)}
@keyframes chk-pop{0%{transform:scale(1)}45%{transform:scale(1.35)}100%{transform:scale(1)}}
.todo-item,.habit-row,.ev-item{transition:opacity .22s ease, transform .22s ease, max-height .22s ease, margin .22s ease, padding .22s ease;max-height:220px;overflow:hidden}
.todo-item.removing,.habit-row.removing,.ev-item.removing{opacity:0;transform:translateX(10px);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-bottom-width:0}
.todo-item.entering,.habit-row.entering,.ev-item.entering{animation:item-in .28s ease both}
@keyframes item-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Mobile nav */
.mobile-topbar{display:none}
.sidebar-overlay{display:none}
.hamburger-btn{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);width:38px;height:38px;color:var(--tx);font-size:18px;flex-shrink:0}
@media(max-width:860px){
  #screen-app{flex-direction:column}
  .mobile-topbar{display:flex;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top)) 16px 14px;background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:150}
  .mobile-topbar-logo{font-family:var(--font-serif);font-style:italic;color:var(--acc);font-size:17px;font-weight:500}
  .sidebar{position:fixed;top:0;left:0;height:100vh;width:min(280px,80vw);z-index:250;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:0 0 60px rgba(0,0,0,.5);padding-top:calc(24px + env(safe-area-inset-top));border-radius:0 var(--r3) var(--r3) 0}
  .sidebar.open{transform:translateX(0)}
  .sidebar-overlay{display:block;position:fixed;inset:0;background:rgba(5,5,10,.55);backdrop-filter:blur(2px);z-index:240;opacity:0;pointer-events:none;transition:opacity .25s}
  .sidebar-overlay.open{opacity:1;pointer-events:auto}
  .main-area{padding:20px 16px 90px;max-height:none}
  .ph h1{font-size:27px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .auth-box{width:calc(100vw - 32px);padding:34px 22px}
  .modal{padding:22px}
  .todo-inp-row{flex-wrap:wrap}
  .todo-inp{min-width:100%}
  .work-day-row{flex-wrap:wrap}
  .toast{left:16px;right:16px;bottom:calc(20px + env(safe-area-inset-bottom));max-width:none}
  .fab{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}
.sc{background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:17px;text-align:center;transition:transform .15s,border-color .15s}
.sc:hover{transform:translateY(-2px) rotate(-.6deg);border-color:var(--bd2)}
.sc .n{font-family:var(--font-serif);font-size:30px;color:var(--acc);font-weight:300}.sc .l{font-size:12px;color:var(--tx2);margin-top:4px;font-weight:500}
.btn{background:var(--s2);border:1px solid var(--bd);color:var(--tx);padding:10px 18px;border-radius:var(--rp);font-size:13px;font-weight:600;transition:all .15s}
.btn:hover{border-color:var(--tx3);background:var(--s3)}
.btn-p{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc);box-shadow:0 6px 16px -6px rgba(212,168,83,.5)}.btn-p:hover{opacity:.92;background:var(--acc)}
.btn-danger{background:rgba(255,122,122,.1);border-color:rgba(255,122,122,.3);color:var(--red)}
.btn-icon{background:var(--s2);border:1px solid var(--bd);color:var(--tx2);width:32px;height:32px;border-radius:var(--rp);display:flex;align-items:center;justify-content:center;font-size:12px}
.btn-sm{padding:7px 14px;font-size:12px}

/* TODOS */
.todo-inp-row{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.todo-inp{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rp);padding:11px 18px;color:var(--tx);font-size:14px;outline:none;transition:border-color .15s;min-width:180px}
.todo-inp:focus{border-color:var(--acc)}
.todo-sel{background:var(--s2);border:1px solid var(--bd);border-radius:var(--rp);padding:0 34px 0 14px;color:var(--tx);font-size:13px;outline:none;height:40px;transition:border-color .15s;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%238a8478" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 12px center;background-size:11px 7px}
.todo-sel:focus{border-color:var(--acc)}
.todo-sel:hover{border-color:var(--bd2)}
.todo-sel option{background:var(--s2);color:var(--tx);padding:8px}
.todo-item{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--bd)}
.todo-item:last-child{border-bottom:none}
.todo-chk{width:22px;height:22px;border-radius:32%;border:2px solid var(--bd);background:none;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;font-size:11px}
.todo-chk.on{background:var(--green);border-color:var(--green);color:#00220F}
.todo-body{flex:1;min-width:0}.todo-name{font-size:14px;font-weight:500}.todo-name.done{text-decoration:line-through;color:var(--tx2)}
.todo-meta{display:flex;gap:6px;margin-top:5px;align-items:center;flex-wrap:wrap}
.tag{font-size:11px;padding:3px 9px;border-radius:var(--rp);font-weight:600;white-space:nowrap}
.tag.daily{background:rgba(126,184,255,.15);color:var(--acc2)}.tag.weekly{background:rgba(102,230,196,.15);color:var(--acc3)}
.tag.once{background:rgba(212,168,83,.15);color:var(--acc)}.tag.work{background:rgba(199,125,255,.15);color:var(--acc4)}
.tag.cat{background:var(--s3);color:var(--tx2)}
.tag.prio-2{background:rgba(255,122,122,.15);color:var(--red)}.tag.prio-0{background:var(--s3);color:var(--tx3)}
.str-chip{font-size:11px;color:var(--acc);font-weight:600;white-space:nowrap}
.del-btn{background:none;border:none;color:var(--tx3);font-size:13px;padding:6px;opacity:0;transition:opacity .15s,color .15s;border-radius:var(--rp)}
.todo-item:hover .del-btn,.ev-item:hover .del-btn,.habit-row:hover .del-btn{opacity:1}
@media(max-width:860px){.del-btn{opacity:1}}
.del-btn:hover{color:var(--red);background:rgba(255,122,122,.1)}
.tabs{display:flex;gap:6px;margin-bottom:22px;flex-wrap:wrap}
.tab{padding:8px 16px;border-radius:var(--rp);font-size:13px;font-weight:600;border:1px solid transparent;color:var(--tx2);background:none;transition:all .15s}
.tab:hover{color:var(--tx)}.tab.active{background:var(--s3);border-color:var(--bd);color:var(--tx)}
.tpl-cat{padding:6px 14px;border-radius:var(--rp);font-size:12px;font-weight:600;border:1px solid var(--bd);color:var(--tx2);background:none;transition:all .15s;cursor:pointer}
.tpl-cat:hover{color:var(--tx)}.tpl-cat.active{background:var(--acc);color:var(--ink-on-acc);border-color:var(--acc)}
.tpl-chip{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--rp);font-size:13px;border:1px solid var(--bd);background:var(--s2);color:var(--tx);cursor:pointer;transition:all .15s}
.tpl-chip:hover{border-color:var(--acc);color:var(--acc);transform:translateY(-1px)}
.tpl-chip.added{opacity:.45;pointer-events:none}
.wd-chip{width:36px;height:36px;border-radius:32%;border:1px solid var(--bd);background:var(--s2);color:var(--tx2);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s}
.wd-chip:hover{border-color:var(--acc)}
.wd-chip.on{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc);font-weight:700}
.wd-chip-sm{width:26px;height:26px;border-radius:32%;border:1px solid var(--bd);background:var(--s3);color:var(--tx3);font-size:10px;cursor:pointer;transition:all .15s}
.wd-chip-sm.on{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc);font-weight:700}

/* CALENDAR */
.cal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.cal-hd h2{font-size:19px;font-weight:300;font-style:italic;font-family:var(--font-serif)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cdn{text-align:center;font-size:10px;color:var(--tx3);padding:5px 0;text-transform:uppercase;letter-spacing:.8px;font-weight:700}
.cd{min-height:104px;display:flex;flex-direction:column;align-items:stretch;padding:7px 6px;border-radius:var(--r2);font-size:13px;font-weight:500;cursor:pointer;position:relative;transition:background .15s,border-color .15s;border:1px solid transparent;gap:4px}
.cd:hover{background:var(--s2)}
.cd-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.cd-num{width:23px;height:23px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .15s;position:relative}
.cd.today .cd-num{border:1.5px solid var(--acc);color:var(--acc);font-weight:700}
.cd-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.cd.work-day{background:rgba(199,125,255,.06)}.cd.completed{background:rgba(95,227,164,.07)}
.cd.om{color:var(--tx3);opacity:.5}.cd.sel{background:var(--s3);border-color:var(--bd2)}
.cd-evs{display:flex;flex-direction:column;gap:3px;width:100%;overflow:hidden}
.cd-ev-chip{font-size:10px;font-weight:700;padding:3px 7px;border-radius:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cd-ev-more{font-size:10px;color:var(--tx3);padding:0 3px;font-weight:600}
@media(max-width:860px){.cd{min-height:78px}.cd-ev-chip{font-size:9px;padding:2px 5px}}
.streak-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd)}
.streak-row:last-child{border-bottom:none}
.streak-fire{font-size:13px;font-weight:700;color:var(--acc);white-space:nowrap}
.ap-card{display:flex;align-items:center;gap:14px;padding:12px 4px;border-bottom:1px solid var(--bd);transition:opacity .22s ease, transform .22s ease, max-height .22s ease, margin .22s ease, padding .22s ease;max-height:200px;overflow:hidden}
.ap-card:last-child{border-bottom:none}
.ap-card.removing{opacity:0;transform:translateX(10px);max-height:0;margin:0;padding-top:0;padding-bottom:0;border-bottom-width:0}
.ap-card.entering{animation:item-in .28s ease both}
.ap-date{width:58px;height:58px;border-radius:var(--r2);display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;color:#0A0A12;box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
.ap-day{font-family:var(--font-serif);font-size:22px;font-weight:600;line-height:1}
.ap-mon{font-size:10px;text-transform:uppercase;letter-spacing:.6px;font-weight:700;margin-top:2px}
.ap-info{flex:1;min-width:0}
.ap-title{font-size:14px;font-weight:600}
.ap-sub{font-size:12px;color:var(--tx2);margin-top:2px}
.ev-item{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--bd)}
.ev-item:last-child{border-bottom:none}
.ev-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;box-shadow:0 0 0 3px currentColor}
.ev-et{font-size:14px;font-weight:600}.ev-eu{font-size:12px;color:var(--tx2);margin-top:2px}

/* HABITS */
.habit-row{display:flex;align-items:center;gap:12px;padding:14px 4px;border-bottom:1px solid var(--bd)}
.habit-row:last-child{border-bottom:none}
.hi-icon{width:40px;height:40px;border-radius:32%;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.hi-info{flex:1;min-width:0}.hi-name{font-size:14px;font-weight:600}.hi-st{font-size:12px;color:var(--tx2);margin-top:1px}
.hi-dots{display:flex;gap:3px;margin-top:6px}.hi-dot{width:9px;height:9px;border-radius:50%}
.hi-tog{width:42px;height:24px;border-radius:var(--rp);border:none;cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.hi-tog::after{content:'';width:18px;height:18px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:transform .2s;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.hi-tog.on::after{transform:translateX(18px)}
.heatmap{display:grid;grid-auto-flow:column;grid-auto-columns:11px;grid-template-rows:repeat(7,1fr);gap:3px}
.hm-cell{width:11px;height:11px;border-radius:3px;background:var(--s3);flex-shrink:0}
.hm-cell.hm-future{background:transparent}
.hm-wk-row{display:grid;grid-auto-flow:column;grid-auto-columns:11px;gap:3px;margin-bottom:6px}
.hm-wk-lbl{font-size:9px;font-weight:600;color:var(--tx3);text-align:center;letter-spacing:.2px;writing-mode:vertical-rl;transform:rotate(180deg);height:30px;display:flex;align-items:center;justify-content:center}
.hm-legend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tx3);margin-top:4px}
.hm-legend .hm-cell{width:9px;height:9px}

/* FAB / catch-up & quick add */
.fab-stack{position:fixed;right:20px;bottom:26px;display:flex;flex-direction:column;gap:12px;z-index:190}
.fab{width:54px;height:54px;border-radius:50%;background:var(--s1);backdrop-filter:var(--glass-blur);color:var(--tx);border:1px solid var(--bd);font-size:19px;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-1);transition:transform .15s,opacity .15s}
.fab:hover{transform:translateY(-2px) scale(1.04)}
.fab.primary{background:var(--acc);color:var(--ink-on-acc);border-color:var(--acc);box-shadow:0 10px 26px -8px rgba(212,168,83,.6)}
.cu-dates{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cu-dates::-webkit-scrollbar{display:none}
.cu-datechip{flex-shrink:0;padding:10px 16px;min-height:44px;border-radius:var(--rp);font-size:13px;font-weight:600;border:1px solid var(--bd);background:var(--s2);color:var(--tx2);white-space:nowrap;transition:all .15s}
.cu-datechip.active{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc)}
.cu-item{display:flex;align-items:center;gap:14px;padding:14px 6px;min-height:44px;border-bottom:1px solid var(--bd);cursor:pointer;transition:background .15s}
.cu-item:last-child{border-bottom:none}
.cu-item:hover{background:var(--s2)}
.cu-chk{width:28px;height:28px;border-radius:50%;border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px;transition:all .15s}
.cu-chk.on{background:var(--green);border-color:var(--green);color:#00220F}
.cu-label{font-size:14px;font-weight:500;flex:1}
.cu-item.done .cu-label{color:var(--tx2);text-decoration:line-through}

/* BADGES */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:12px}
.badge-card{background:var(--s2);border-radius:var(--r);padding:18px 14px;text-align:center;border:1px solid var(--bd);transition:transform .15s,border-color .15s}
.badge-card:hover{transform:translateY(-2px) rotate(-1deg)}
.badge-card.ul{border-color:rgba(212,168,83,.35);background:linear-gradient(160deg,rgba(212,168,83,.1),rgba(212,168,83,.02))}
.b-ico{font-size:30px;margin-bottom:9px;filter:grayscale(1);opacity:.3}.badge-card.ul .b-ico{filter:none;opacity:1}
.b-name{font-size:13px;font-weight:600;color:var(--tx3)}.badge-card.ul .b-name{color:var(--tx)}
.b-desc{font-size:11px;color:var(--tx3);margin-top:4px;line-height:1.4}

/* TODAY */
.hero-card{background:linear-gradient(150deg,var(--s2),var(--s1));border:1px solid var(--bd);border-radius:36px 30px 36px 14px;padding:28px;display:flex;align-items:center;gap:28px;box-shadow:var(--shadow-1);margin-bottom:20px;flex-wrap:wrap;position:relative;overflow:hidden}
.hero-datestamp{position:absolute;top:16px;right:22px;font-family:var(--font-hand);font-size:15px;font-weight:600;color:var(--acc);background:var(--s2);border:1px solid var(--bd);padding:3px 12px 4px;border-radius:8px;transform:rotate(3deg);box-shadow:0 3px 8px -4px rgba(0,0,0,.35)}
.hero-motto{font-family:var(--font-hand);font-size:17px;color:var(--acc);margin-top:2px;font-weight:600}
.ring-wrap{position:relative;width:112px;height:112px;flex-shrink:0}
.ring-wrap svg{transform:rotate(-90deg)}
.ring-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring-label b{font-family:var(--font-serif);font-size:26px;font-weight:500}
.ring-label span{font-size:10px;color:var(--tx2);text-transform:uppercase;letter-spacing:.6px}
.hero-text{flex:1;min-width:220px}
.hero-text h1{font-size:clamp(24px,3vw,32px)}
.hero-text p{font-size:14px;color:var(--tx2);margin-top:6px}
.tt-row{display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--s2);border-radius:var(--r2);margin-bottom:8px;cursor:pointer;border:1px solid transparent;transition:all .15s}
.tt-row:hover{border-color:var(--bd);background:var(--s3)}.tt-row.done .tt-n{text-decoration:line-through;color:var(--tx2)}
.tt-n{font-size:14px;flex:1;font-weight:500}
.tt-chk{width:19px;height:19px;border-radius:50%;border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:9px}
.tt-chk.on{background:var(--green);border-color:var(--green);color:#00220F}
.shift-banner{background:linear-gradient(120deg,rgba(199,125,255,.12),rgba(199,125,255,.03));border:1px solid rgba(199,125,255,.25);border-radius:var(--r);padding:15px 18px;margin-bottom:18px;font-size:14px}
.mood-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.mood-btn{width:38px;height:38px;border-radius:32%;border:2px solid transparent;background:var(--s2);font-size:18px;display:flex;align-items:center;justify-content:center}
.mood-btn.sel{border-color:var(--acc);background:rgba(212,168,83,.14)}
.journal-inp{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:11px 14px;color:var(--tx);font-size:13px;resize:vertical;min-height:60px;outline:none}
.journal-inp:focus{border-color:var(--acc)}

/* WORK */
.work-day-row{display:flex;align-items:center;gap:10px;padding:11px 4px;border-bottom:1px solid var(--bd)}
.work-day-row:last-child{border-bottom:none}.wdn{width:80px;font-size:13px;color:var(--tx2);font-weight:600}
.work-tog{width:40px;height:23px;border-radius:var(--rp);border:none;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0}
.work-tog::after{content:'';width:17px;height:17px;border-radius:50%;background:white;position:absolute;top:3px;left:3px;transition:transform .2s;box-shadow:0 2px 5px rgba(0,0,0,.3)}
.work-tog.on::after{transform:translateX(17px)}

/* FOCUS / POMODORO */
.focus-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:30px 12px 8px;text-align:center}
.focus-ring{position:relative;width:220px;height:220px;margin-bottom:22px}
.focus-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.focus-time{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.focus-time b{font-family:var(--font-serif);font-size:44px;font-weight:400}
.focus-time span{font-size:11px;color:var(--tx2);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
.focus-controls{display:flex;gap:10px;margin-bottom:18px}
.focus-len-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:14px}
.len-chip{padding:8px 14px;border-radius:var(--rp);border:1px solid var(--bd);background:var(--s2);font-size:12px;font-weight:600;color:var(--tx2)}
.len-chip.active{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc)}
.focus-sessions-list{margin-top:6px}
.fs-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--bd);font-size:13px}
.fs-item:last-child{border-bottom:none}
.fs-time{color:var(--tx2);font-size:12px;margin-left:auto}

/* STATS / INSIGHTS */
.insight-heatmap-wrap{overflow-x:auto;padding-bottom:6px}
.trend-bars{display:flex;align-items:flex-end;gap:5px;height:120px;padding-top:10px}
.trend-bar{flex:1;background:linear-gradient(180deg,var(--acc),var(--acc3));border-radius:5px 5px 2px 2px;min-height:3px;position:relative}
.trend-bar .tb-tip{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:10px;color:var(--tx3);white-space:nowrap}
.cat-bar-row{display:flex;align-items:center;gap:10px;padding:8px 0}
.cat-bar-track{flex:1;height:8px;border-radius:var(--rp);background:var(--s3);overflow:hidden}
.cat-bar-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--acc3));border-radius:var(--rp)}
.cat-bar-label{font-size:12px;color:var(--tx2);width:110px;flex-shrink:0}
.cat-bar-val{font-size:12px;color:var(--tx3);width:44px;text-align:right;flex-shrink:0}
.routine-detail-row{padding:12px 0;border-bottom:1px solid var(--bd)}
.routine-detail-row:last-child{border-bottom:none}
.rd-top{display:flex;align-items:center;gap:12px}
.rd-mini-heatmap{display:grid;grid-auto-flow:column;grid-template-rows:repeat(1,1fr);gap:3px;margin-top:9px;margin-left:46px;overflow-x:auto}
.rd-mini-heatmap .hm-cell{width:9px;height:16px;border-radius:3px}

/* PROFILE */
.prof-av{width:84px;height:84px;border-radius:30%;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 20px;box-shadow:0 0 0 4px var(--s2)}
.prof-sec{margin-bottom:28px}
.prof-sec h3{font-size:14px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.8px;margin-bottom:15px;padding-bottom:9px;border-bottom:1px solid var(--bd);display:flex;align-items:center;gap:6px}
.logout-btn{background:rgba(255,122,122,.08);border:1px solid rgba(255,122,122,.3);color:var(--red);padding:10px 16px;border-radius:var(--rp);font-size:13px;font-weight:700;width:100%;margin-top:10px}
.logout-btn:hover{background:rgba(255,122,122,.14)}
.theme-picker{display:flex;gap:8px}
.theme-opt{flex:1;padding:12px;border-radius:var(--r2);border:1.5px solid var(--bd);background:var(--s2);text-align:center;font-size:12px;font-weight:600;color:var(--tx2)}
.theme-opt.sel{border-color:var(--acc);color:var(--acc);background:rgba(212,168,83,.1)}

/* MODAL */
.modal-bg{position:fixed;inset:0;background:rgba(4,4,10,.55);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-bg.open{display:flex}
.modal{background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bd);border-radius:var(--r3);padding:30px;width:460px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-1)}
.modal h2{font-size:23px;margin-bottom:20px;font-weight:300;font-style:italic;font-family:var(--font-serif)}
.m-row{margin-bottom:14px}
.m-row label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--tx3);margin-bottom:6px;font-weight:700}
.m-inp{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:11px 15px;color:var(--tx);font-size:14px;outline:none;transition:border-color .15s}
.m-inp:focus{border-color:var(--acc)}
.m-sel{width:100%;background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);padding:11px 40px 11px 15px;color:var(--tx);font-size:14px;outline:none;transition:border-color .15s;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M1 1.5L6 6.5L11 1.5" stroke="%238a8478" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat:no-repeat;background-position:right 15px center;background-size:11px 7px}
.m-sel:focus{border-color:var(--acc)}
.m-sel:hover{border-color:var(--bd2)}
.m-sel option{background:var(--s2);color:var(--tx);padding:8px}.m-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px}
.prio-row{display:flex;gap:8px}
.prio-btn{flex:1;padding:10px;border-radius:var(--r2);border:1.5px solid var(--bd);background:var(--s2);font-size:12px;font-weight:600;color:var(--tx2)}
.prio-btn.sel{border-color:var(--acc);color:var(--acc);background:rgba(212,168,83,.1)}

/* COMMAND PALETTE */
.cp-bg{position:fixed;inset:0;background:rgba(4,4,10,.5);backdrop-filter:blur(3px);z-index:300;display:none;align-items:flex-start;justify-content:center;padding:12vh 16px 16px}
.cp-bg.open{display:flex}
.cp-box{width:560px;max-width:100%;background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow-1);overflow:hidden}
.cp-input{width:100%;background:none;border:none;border-bottom:1px solid var(--bd);padding:18px 20px;color:var(--tx);font-size:16px;outline:none}
.cp-results{max-height:360px;overflow-y:auto;padding:8px}
.cp-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r2);cursor:pointer}
.cp-item:hover,.cp-item.active{background:var(--s2)}
.cp-item .cpi{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.cp-item .cpt{flex:1;min-width:0;font-size:13px}
.cp-item .cps{font-size:11px;color:var(--tx3)}
.cp-hint{padding:10px 20px;border-top:1px solid var(--bd);font-size:11px;color:var(--tx3);display:flex;gap:14px}

/* ZEIT-PICKER (ersetzt das native Browser-Popup bei input[type=time]) */
input[type="time"]{cursor:pointer}
input[type="time"]::-webkit-calendar-picker-indicator{filter:var(--time-icon-filter,none);opacity:.75;cursor:pointer}
.tp-pop{position:fixed;z-index:500;background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bd2);border-radius:var(--r2);box-shadow:var(--shadow-1);width:236px;padding:14px 14px 12px;
  opacity:0;transform:translateY(-6px) scale(.97);pointer-events:none;transition:opacity .16s var(--ease),transform .16s var(--ease)}
.tp-pop.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.tp-cols{position:relative;display:flex;align-items:center;justify-content:center;gap:4px;height:180px}
.tp-col{width:70px;height:100%;overflow-y:auto;overflow-x:hidden;scroll-behavior:auto;scroll-snap-type:y mandatory;border-radius:10px;background:var(--s2);
  padding:70px 0;-ms-overflow-style:none;scrollbar-width:none;
  mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28%,#000 72%,transparent 100%)}
.tp-col::-webkit-scrollbar{display:none}
.tp-item{height:40px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;color:var(--tx2);cursor:pointer;scroll-snap-align:center;border-radius:8px;transition:color .12s}
.tp-item:hover{color:var(--tx)}
.tp-item.sel{color:var(--ink-on-acc);background:var(--acc);box-shadow:0 4px 14px -6px rgba(0,0,0,.4)}
.tp-sep{font-size:18px;font-weight:700;color:var(--tx3);padding-bottom:2px;align-self:center}
.tp-actions{display:flex;gap:8px;margin-top:12px}
.tp-btn{flex:1;background:var(--s2);border:1px solid var(--bd);border-radius:var(--rp);padding:9px 8px;color:var(--tx2);font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
.tp-btn:hover{color:var(--tx);border-color:var(--bd2)}
.tp-btn-p{background:var(--acc);color:var(--ink-on-acc);border-color:transparent}
.tp-btn-p:hover{color:var(--ink-on-acc);filter:brightness(1.08)}

/* TOAST */
.toast{position:fixed;bottom:26px;right:26px;background:var(--s1);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--bd);border-radius:var(--r);padding:14px 20px;font-size:14px;font-weight:500;z-index:9999;transform:translateY(60px);opacity:0;transition:all .3s;max-width:320px;box-shadow:var(--shadow-1)}
.toast.show{transform:translateY(0);opacity:1}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:9998}
#loader{display:flex;align-items:center;justify-content:center;min-height:100vh;font-family:var(--font-serif);font-style:italic;font-size:24px;color:var(--acc);background:var(--bg)}