:root{
  --mind:#2f6fb0; --mind-l:#eaf2fa;
  --physical:#2e8b57; --physical-l:#eaf6f0;
  --health:#e2892b; --health-l:#fdf1e4;
  --career:#7952b3; --career-l:#f3eefa;
  --night:#1e2a5e; --night-l:#eaecf5;
  --ink:#242522; --ink-soft:#5b5d57;
  --paper:#faf8f3; --card:#ffffff; --line:#e7e3d8;
  --gold:#c8963e;
  --shadow:0 1px 2px rgba(30,26,15,.06), 0 6px 18px rgba(30,26,15,.08);
  --r-lg:20px; --r-md:14px; --r-sm:10px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;}
html,body{height:100%;}
html{scroll-padding-top:var(--safe-t);}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--safe-t); padding-bottom:var(--safe-b);
}
h1,h2,h3,.serif{font-family:Georgia,"Iowan Old Style","Palatino Linotype",Palatino,serif;}
button{font-family:inherit;}
a{color:inherit; text-decoration:none;}

.hide{display:none !important;}
.row{display:flex; align-items:center;}
.between{justify-content:space-between;}
.muted{color:var(--ink-soft);}
.small{font-size:12.5px;}
.btn{
  border:none; border-radius:999px; padding:11px 20px; font-size:14.5px; font-weight:600;
  cursor:pointer; background:var(--ink); color:#fff; transition:transform .08s ease, opacity .15s ease;
  display:inline-block;
}
.btn:active{transform:scale(.97);}
.btn.ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line);}
.btn.subtle{background:var(--card); color:var(--ink); border:1.5px solid var(--line); font-weight:500;}
.btn.block{width:100%; text-align:center;}
.btn.sm{padding:7px 14px; font-size:13px;}
.btn:disabled{opacity:.45; cursor:not-allowed;}
input[type=text],input[type=password],input[type=number],input[type=date],select{
  width:100%; padding:11px 13px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  font-size:15px; background:#fff; color:var(--ink); font-family:inherit;
}
input:focus,select:focus,button:focus-visible{outline:2.5px solid var(--gold); outline-offset:2px;}
label.field{display:block; margin-bottom:14px; font-size:13.5px; font-weight:600; color:var(--ink-soft);}
label.field input,label.field select{margin-top:6px; font-weight:400;}
.card{background:var(--card); border-radius:var(--r-lg); box-shadow:var(--shadow); border:1px solid var(--line);}

/* login */
#login-screen{
  min-height:100vh; min-height:100dvh; display:flex; align-items:center; justify-content:center; padding:28px 18px;
  background:
    linear-gradient(180deg, rgba(20,25,45,.55), rgba(20,25,45,.72)),
    linear-gradient(160deg,#3a5a86 0%, #7a8fa8 35%, #e8b06b 68%, #f4e3c3 100%);
}
.login-box{width:100%; max-width:380px; background:rgba(255,255,255,.97); border-radius:var(--r-lg); padding:34px 26px 28px; box-shadow:0 20px 60px rgba(0,0,0,.35);}
.login-box .mark{font-size:13px; letter-spacing:.03em; color:var(--gold); font-weight:700; margin-bottom:2px;}
.login-box h1{font-size:30px; margin:0 0 2px; line-height:1.1;}
.login-box .sub{color:var(--ink-soft); font-size:13.5px; margin-bottom:22px;}
.login-error{background:#fdeceb; color:#a33; border-radius:var(--r-sm); padding:9px 12px; font-size:13px; margin-bottom:14px;}
.login-widgets{display:flex; gap:10px; max-width:420px; width:100%; margin-bottom:12px; flex-wrap:wrap;}
.login-widgets .widget-card{background:rgba(255,255,255,.42); border-color:rgba(255,255,255,.55);}
.insp-widget{padding:0; overflow:hidden; position:relative; min-height:84px; color:#fff; display:flex; align-items:flex-end; flex:1 1 220px;}
.insp-widget .photo{position:absolute; inset:0; background-size:cover; background-position:center;}
.insp-widget .wash{position:absolute; inset:0; background:linear-gradient(0deg, rgba(10,14,25,.85), rgba(10,14,25,.15));}
.insp-widget .txt{position:relative; z-index:1; padding:10px 12px; font-size:11.5px; font-style:italic; font-family:Georgia,serif; line-height:1.35;}

/* app shell */
#app-screen{min-height:100vh; min-height:100dvh;}
.app-body{max-width:1180px; margin:0 auto; padding:18px 16px calc(90px + var(--safe-b)); }
.topbar{
  position:sticky; top:0; z-index:20; background:linear-gradient(180deg,#20305e,#2c4577 60%, #3a5a86);
  color:#fff; padding:calc(14px + var(--safe-t)) 18px 16px;
}
.topbar-row{display:flex; align-items:center; justify-content:space-between; max-width:1180px; margin:0 auto;}
.topbar .brand{display:flex; align-items:center; gap:10px;}
.topbar .infin{font-size:22px; color:#e8b06b;}
.topbar h1{font-size:19px; margin:0; letter-spacing:.01em;}
.topbar .sub{font-size:11px; opacity:.8; margin-top:1px;}
.stars-badge{display:flex; align-items:center; gap:5px; background:rgba(255,255,255,.14); padding:6px 11px; border-radius:999px; font-size:13px; font-weight:700;}
.stars-badge .ic{color:#ffd873;}
.logout-btn{background:transparent; border:1px solid rgba(255,255,255,.4); color:#fff; border-radius:999px; padding:7px 12px; font-size:12px; cursor:pointer;}

.flash-stack{margin-bottom:14px;}
.flash-msg{padding:10px 14px; border-radius:var(--r-sm); font-size:13.5px; margin-bottom:8px;}
.flash-msg.error{background:#fdeceb; color:#a33;}
.flash-msg.success{background:#e9f6ee; color:#2e6b47;}

.sidebar{display:none;}
@media (min-width:900px){
  .shell{display:flex; max-width:1180px; margin:0 auto; gap:26px; align-items:flex-start;}
  .sidebar{
    display:flex; flex-direction:column; gap:4px; width:200px; flex-shrink:0; position:sticky; top:96px;
    background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; margin-top:18px; box-shadow:var(--shadow);
  }
  .sidebar button, .sidebar a{
    display:flex; align-items:center; gap:10px; text-align:left; background:none; border:none; padding:11px 12px;
    border-radius:var(--r-sm); font-size:14.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; width:100%;
  }
  .sidebar button.active, .sidebar a.active{background:var(--night-l); color:var(--night);}
  .app-body{flex:1; min-width:0; padding-bottom:40px;}
  .bottom-nav{display:none !important;}
}

.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:30; background:#fff; border-top:1px solid var(--line);
  display:flex; padding-bottom:var(--safe-b); box-shadow:0 -4px 18px rgba(0,0,0,.06);
}
.bottom-nav button, .bottom-nav a{
  flex:1; background:none; border:none; padding:9px 4px 8px; display:flex; flex-direction:column; align-items:center; gap:3px;
  font-size:10.5px; font-weight:700; color:#9a978c; cursor:pointer;
}
.bottom-nav button .ic, .bottom-nav a .ic{font-size:19px;}
.bottom-nav button.active, .bottom-nav a.active{color:var(--night);}
@media (orientation:landscape) and (max-height:480px){
  .bottom-nav button, .bottom-nav a{padding:5px 4px; font-size:9px;}
  .bottom-nav button .ic, .bottom-nav a .ic{font-size:16px;}
  .topbar{padding-top:calc(8px + var(--safe-t)); padding-bottom:8px;}
}

/* poster hero */
.poster-hero{border-radius:var(--r-lg); overflow:hidden; margin-bottom:0; background:#233a63;}
.poster-hero img{width:100%; display:block;}
.cat-strip{
  display:flex; overflow-x:auto; gap:0; margin:10px 0 18px;
  background:#fff; border-radius:var(--r-md); box-shadow:var(--shadow); border:1px solid var(--line);
}
.cat-strip .cc{
  flex:1 0 auto; display:flex; flex-direction:column; align-items:center; gap:4px; padding:12px 14px; min-width:82px;
  font-size:10.5px; font-weight:700; color:var(--ink-soft); text-align:center; border-right:1px solid var(--line);
}
.cat-strip .cc:last-child{border-right:none;}
.cat-strip .cc .ic{font-size:17px; display:inline-block; animation:cat-float 2.6s ease-in-out infinite;}
.cat-strip .cc:nth-child(1) .ic{animation-delay:0s;}
.cat-strip .cc:nth-child(2) .ic{animation-delay:.2s;}
.cat-strip .cc:nth-child(3) .ic{animation-delay:.4s;}
.cat-strip .cc:nth-child(4) .ic{animation-delay:.6s;}
.cat-strip .cc:nth-child(5) .ic{animation-delay:.8s;}
.cat-strip .cc:nth-child(6) .ic{animation-delay:1s;}
@keyframes cat-float{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-4px);}
}
@media (prefers-reduced-motion: reduce){
  .cat-strip .cc .ic{animation:none;}
}

/* widgets */
.widget-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px;}
.widget-card{
  flex:1 1 220px; padding:12px 14px;
  background:rgba(255,255,255,.55); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.55); box-shadow:0 4px 24px rgba(30,26,15,.10);
}
.widget-card .wt{font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;}
.wx-chip{display:flex; align-items:center; gap:9px; padding:6px 2px; cursor:pointer; border-radius:8px;}
.wx-chip:hover{background:var(--paper);}
.wx-chip .emo{font-size:19px;}
.wx-chip .info{flex:1; min-width:0;}
.wx-chip .city{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.wx-chip .cond{font-size:10.5px; color:var(--ink-soft);}
.wx-chip .temp{font-size:15px; font-weight:800;}
.wx-remove{background:none; border:none; color:#b56; font-size:12px; cursor:pointer; padding:2px 4px;}

.clock-row{display:flex; gap:10px;}
.clock-item{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;}
.analog{width:58px; height:58px; border-radius:50%; background:#fff; border:2.5px solid var(--ink); position:relative; box-shadow:inset 0 0 0 2px #fff, 0 1px 3px rgba(0,0,0,.15);}
.analog .tick{position:absolute; width:2px; height:5px; background:#c9c5b7; left:50%; top:2px; transform-origin:1px 27px;}
.analog .hand{position:absolute; left:50%; bottom:50%; transform-origin:50% 100%; border-radius:3px; background:var(--ink);}
.analog .hand.h{width:2.6px; height:15px; margin-left:-1.3px;}
.analog .hand.m{width:2px; height:21px; margin-left:-1px;}
.analog .hand.s{width:1px; height:23px; margin-left:-.5px; background:var(--gold);}
.analog .pin{position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:var(--ink);}
.clock-item .cname{font-size:10.5px; font-weight:700;}
.clock-item .ctime{font-size:9.5px; color:var(--ink-soft); font-variant-numeric:tabular-nums;}
.clock-item .ctime .tzab{font-weight:700; color:var(--gold); margin-left:2px;}
.report-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0;}
.report-grid .rb{background:var(--paper); border-radius:10px; padding:10px 12px;}
.report-grid .rb .l{font-size:10.5px; color:var(--ink-soft); font-weight:700; text-transform:uppercase;}
.report-grid .rb .v{font-size:17px; font-weight:800; margin-top:2px;}

.tz-search-wrap{position:relative;}
.tz-suggestions{position:absolute; left:0; right:0; top:100%; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); z-index:5; max-height:220px; overflow:auto; margin-top:4px;}
.tz-suggestions .opt{padding:10px 13px; font-size:13.5px; cursor:pointer; border-bottom:1px solid var(--line);}
.tz-suggestions .opt:last-child{border-bottom:none;}
.tz-suggestions .opt:hover{background:var(--paper);}
.tz-suggestions .opt small{display:block; color:var(--ink-soft); font-size:11px;}
.clock-slot{display:flex; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line);}
.clock-slot:first-child{border-top:none;}
.clock-slot .l{font-size:13.5px;}
.clock-slot .l small{display:block; color:var(--ink-soft); font-size:11px;}

/* dashboard */
.hero-card{border-radius:var(--r-lg); padding:22px 20px; color:#fff; margin-bottom:16px; background:linear-gradient(160deg,#2c4577 0%, #6b7fa0 45%, #d99a52 78%, #f0cf9a 100%);}
.hero-card .day-tag{font-size:12.5px; font-weight:700; opacity:.9; letter-spacing:.02em;}
.hero-card h2{margin:4px 0 14px; font-size:22px;}
.progress-track{background:rgba(255,255,255,.28); height:10px; border-radius:99px; overflow:hidden;}
.progress-fill{height:100%; background:#fff; border-radius:99px; transition:width .4s ease;}
.hero-nums{display:flex; justify-content:space-between; margin-top:8px; font-size:12.5px; opacity:.95;}

.goal-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px;}
.goal-card{padding:0; cursor:pointer; transition:transform .1s ease; overflow:hidden; position:relative; color:#fff; min-height:150px; display:flex; flex-direction:column; justify-content:flex-end;}
.goal-card .photo{position:absolute; inset:0; background-size:cover; background-position:center;}
.goal-card .wash{position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), var(--wash-color,rgba(0,0,0,.75)) 85%);}
.goal-card .content{position:relative; padding:14px;}
.goal-card:active{transform:scale(.97);}
.goal-card .ic{font-size:20px;}
.goal-card .name{font-weight:700; font-size:14px; margin:6px 0 2px; color:#fff;}
.goal-card .tag{font-size:11px; color:rgba(255,255,255,.85); margin-bottom:8px; line-height:1.3;}
.goal-card .pct{font-size:19px; font-weight:800; color:#fff;}

.section-title{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); margin:22px 0 10px;}
.msg-card{padding:18px; margin-bottom:12px; position:relative;}
.msg-card .kicker{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; opacity:.7;}
.msg-card p{margin:6px 0 0; font-size:15.5px; line-height:1.45; font-family:Georgia,serif; font-style:italic;}
.msg-card.motivation{background:var(--night); color:#fff;}
.msg-card.motivation .kicker{color:#c7d0ea;}
.msg-card.lucky{background:var(--health-l); border-color:#f0d6ac;}
.msg-card.lucky .kicker{color:#a4661b;}
.affirm-card{padding:16px 18px;}
.affirm-card .kicker{font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--career);}
.affirm-list{margin:8px 0 0; padding:0; list-style:none; font-size:14px; line-height:1.9;}
.affirm-list li:before{content:"♥ "; color:var(--career);}
.infin-line{text-align:center; margin:26px 0 6px; color:var(--ink-soft); font-size:13px;}
.infin-line .big{display:block; font-size:26px; color:var(--gold); margin-bottom:2px;}

/* today */
.day-header{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.day-header h2{font-size:20px; margin:0;}
.daynav{display:flex; gap:6px;}
.daynav button{width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); background:#fff; cursor:pointer; font-size:15px;}
.daynav .btn-icon{
  width:32px; height:32px; border-radius:50%; border:1.5px solid var(--line); background:#fff; font-size:15px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink);
}
.daynav .btn-icon.disabled{opacity:.4; pointer-events:none; cursor:default;}
.today-progress{margin:10px 0 18px;}
.today-progress .num{font-size:13px; color:var(--ink-soft); margin-bottom:6px;}

.cat-block{margin-bottom:16px; overflow:hidden;}
.cat-head{padding:16px; display:flex; align-items:center; gap:9px; color:#fff; position:relative; background-size:cover; background-position:center;}
.cat-head .wash{position:absolute; inset:0; background:var(--wash-color); opacity:.82;}
.cat-head>*:not(.wash){position:relative; z-index:1;}
.cat-head .ic{font-size:17px;}
.cat-head .t{font-weight:700; font-size:14.5px; flex:1;}
.cat-head .p{font-size:12.5px; opacity:.9;}
.task-row{display:flex; align-items:center; gap:12px; padding:13px 16px; border-top:1px solid var(--line);}
.check-btn{
  width:27px; height:27px; border-radius:50%; border:2px solid var(--line); background:#fff; flex-shrink:0;
  cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; color:#fff; position:relative;
}
.check-btn.done{background:var(--cat-color,#2e8b57); border-color:var(--cat-color,#2e8b57);}
.check-btn.skip{background:#d8d4c6; border-color:#d8d4c6; color:#8b8878;}
.task-name{flex:1; font-size:14.5px;}
.task-name .note{display:block; font-size:11.5px; color:var(--ink-soft); font-weight:400;}
.task-name.done-txt{text-decoration:line-through; color:var(--ink-soft);}
.qty-ctrl{display:flex; align-items:center; gap:8px;}
.qty-ctrl button{width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line); background:#fff; font-size:15px; cursor:pointer; line-height:1;}
.qty-ctrl .val{min-width:64px; text-align:center; font-size:13px; font-weight:700;}
.qty-ctrl .val small{font-weight:400; color:var(--ink-soft);}
.custom-tag{font-size:9.5px; font-weight:800; background:var(--career-l); color:var(--career); padding:2px 6px; border-radius:5px; margin-left:6px; vertical-align:2px;}

/* 30 day */
.streak-row{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:18px;}
.stat-box{padding:13px 8px; text-align:center;}
.stat-box .n{font-size:19px; font-weight:800;}
.stat-box .l{font-size:10px; color:var(--ink-soft); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:2px;}
.day-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:20px;}
.day-cell{
  aspect-ratio:1; border-radius:10px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:#efece2; border:1px solid var(--line); cursor:pointer; font-size:11px; font-weight:700; color:var(--ink-soft);
}
.day-cell .mark{font-size:13px; margin-top:2px;}
.day-cell.full{background:var(--physical); color:#fff; border-color:var(--physical);}
.day-cell.partial{background:var(--health-l); color:#a4661b; border-color:#f0d6ac;}
.day-cell.future{opacity:.5; cursor:default;}
.day-cell.today{outline:2.5px solid var(--gold); outline-offset:1px;}
.task-history{margin-bottom:14px;}
.task-history .th-name{font-size:13px; font-weight:700; margin-bottom:6px;}
.dots-row{display:flex; gap:4px; flex-wrap:wrap;}
.dot{width:16px; height:16px; border-radius:4px; background:#efece2;}
.dot.done{background:var(--physical);}
.dot.skip{background:#cfcabb;}

/* goals */
.goal-detail{margin-bottom:16px; overflow:hidden;}
.goal-detail .gd-head{padding:20px 16px; color:#fff; position:relative; background-size:cover; background-position:center; min-height:100px;}
.goal-detail .gd-head .wash{position:absolute; inset:0; background:var(--wash-color); opacity:.8;}
.goal-detail .gd-head>*:not(.wash){position:relative; z-index:1;}
.goal-detail .gd-head .ic{font-size:24px;}
.goal-detail .gd-head h3{margin:6px 0 2px; font-size:17px;}
.goal-detail .gd-head .tag{font-size:12px; opacity:.9;}
.goal-task-row{padding:12px 16px; border-top:1px solid var(--line); display:flex; align-items:center; gap:10px;}
.goal-task-row .gt-name{flex:1; font-size:14px;}
.goal-task-row .gt-meta{font-size:11px; color:var(--ink-soft);}
.del-x{background:none; border:none; color:#b56; cursor:pointer; font-size:15px; padding:4px;}
.add-sub-row{padding:12px 16px; border-top:1px solid var(--line);}
.add-sub-form{padding:14px 16px; border-top:1px dashed var(--line); background:var(--paper);}
.type-toggle{display:flex; gap:8px; margin-bottom:14px;}
.type-toggle button{flex:1; padding:9px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:#fff; font-size:13px; font-weight:600; cursor:pointer;}
.type-toggle button.sel{background:var(--ink); color:#fff; border-color:var(--ink);}
.qty-fields{display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;}

/* settings */
.set-group{margin-bottom:16px; padding:16px;}
.set-group h3{font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 12px; color:var(--ink-soft);}
.set-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line);}
.set-row:first-of-type{border-top:none;}
.set-row .l{font-size:14px;}
.theme-dots{display:flex; gap:8px;}
.theme-dot{width:26px; height:26px; border-radius:50%; border:2px solid transparent; cursor:pointer;}
.theme-dot.sel{border-color:var(--ink);}
.switch{width:42px; height:24px; border-radius:99px; background:#d8d4c6; position:relative; cursor:pointer; border:none;}
.switch.on{background:var(--physical);}
.switch::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; transition:transform .15s ease;}
.switch.on::after{transform:translateX(18px);}
.cycle-item{padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-sm); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center;}
.cycle-item .cn{font-size:13.5px; font-weight:700;}
.cycle-item .cd{font-size:11.5px; color:var(--ink-soft);}
.file-row{display:flex; gap:8px; margin-top:6px;}
.file-row .btn{flex:1;}

/* overlays */
.overlay{position:fixed; inset:0; background:rgba(20,20,15,.55); z-index:100; display:flex; align-items:center; justify-content:center; padding:20px;}
.overlay .box{background:#fff; border-radius:var(--r-lg); padding:28px 24px; max-width:380px; width:100%; text-align:center; position:relative; max-height:85vh; overflow:auto;}
.overlay .box.wide{max-width:460px; text-align:left;}
.overlay h2{margin:6px 0 8px; font-size:21px;}
.overlay .close{position:absolute; top:12px; right:14px; background:none; border:none; font-size:18px; color:var(--ink-soft); cursor:pointer;}
.day-complete-icon{font-size:44px;}
.day-complete-lines{font-size:14px; color:var(--ink-soft); line-height:1.7; margin:10px 0 18px;}
.thirty-complete-cats{display:flex; flex-direction:column; gap:6px; margin:16px 0; text-align:left;}
.thirty-complete-cats div{display:flex; justify-content:space-between; font-size:13.5px; padding:6px 10px; background:var(--paper); border-radius:8px;}

.star-burst{position:fixed; z-index:200; pointer-events:none;}
.star-burst span{position:absolute; font-size:16px; color:var(--gold); animation:starpop .8s ease-out forwards;}
@keyframes starpop{
  0%{opacity:0; transform:translate(0,0) scale(.3) rotate(0deg);}
  15%{opacity:1;}
  100%{opacity:0; transform:translate(var(--dx),var(--dy)) scale(1.1) rotate(var(--rot));}
}
.confetti-fall{position:fixed; inset:0; z-index:150; pointer-events:none; overflow:hidden;}
.confetti-fall span{position:absolute; top:-20px; font-size:15px; animation:fall 2.6s linear forwards;}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg); opacity:.2;}}

/* ---------- todo sticky board ---------- */
.todo-tabs{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:14px 0 16px;}
.todo-tab{padding:8px 14px; border-radius:999px; font-size:13px; font-weight:600; color:var(--ink-soft); background:var(--card); border:1px solid var(--line);}
.todo-tab.active{background:var(--night); color:#fff; border-color:var(--night);}
.sticky-board{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; margin-bottom:20px;}
.sticky-note{
  position:relative; min-height:150px; padding:16px 14px 14px; border:none; text-align:left; cursor:pointer;
  border-radius:4px 4px 24px 4px; box-shadow:0 6px 14px rgba(30,26,15,.18), 0 1px 0 rgba(255,255,255,.4) inset;
  display:flex; flex-direction:column; gap:6px; font-family:inherit; transition:transform .12s ease;
}
.sticky-note:nth-child(3n+1){transform:rotate(-1.5deg);}
.sticky-note:nth-child(3n+2){transform:rotate(1deg);}
.sticky-note:nth-child(3n+3){transform:rotate(-.5deg);}
.sticky-note:hover, .sticky-note:focus-visible{transform:scale(1.03) rotate(0deg); z-index:2;}
.sticky-note.overdue{outline:2px solid #c0392b; outline-offset:2px;}
.sn-pin{position:absolute; top:-10px; left:50%; transform:translateX(-50%); font-size:18px; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3));}
.sn-title{font-weight:700; font-size:14.5px; color:#3a3116; margin-top:6px;}
.sn-due{font-size:11px; font-weight:700; color:#7a5a1e;}
.sticky-note.overdue .sn-due{color:#a3241a;}
.sn-notes{font-size:12px; color:#5c531f; line-height:1.4;}
.sticky-add{
  background:var(--paper); border:2px dashed var(--line) !important; box-shadow:none;
  align-items:center; justify-content:center; color:var(--ink-soft); font-weight:700; gap:6px; transform:none !important;
}
.sn-plus{font-size:26px; line-height:1;}
.todo-form label.field textarea{
  width:100%; padding:11px 13px; border-radius:var(--r-sm); border:1.5px solid var(--line);
  font-size:15px; font-family:inherit; margin-top:6px; resize:vertical; min-height:80px;
}
.color-swatches{display:flex; gap:8px; margin-bottom:16px;}
.color-swatch{width:28px; height:28px; border-radius:50%; border:2px solid transparent; cursor:pointer;}
.color-swatch.sel{border-color:var(--ink);}
.todo-status-row{display:flex; gap:8px; flex-wrap:wrap; margin:16px 0;}
.todo-status-row button{flex:1; min-width:110px;}
.todo-danger{color:#b33; background:transparent; border:1.5px solid #e9c3c3;}

@media print{
  .topbar,.bottom-nav,.sidebar,.overlay,.day-header .daynav{display:none !important;}
  body{background:#fff;}
}