*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --f:"Onest",-apple-system,Segoe UI,Roboto,sans-serif;
  --gold:#A6772E;--goldb:#E9CE78;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
html,body{height:100%}
body{font-family:var(--f);background:#15120e;color:#2A2017;overflow:hidden;
  position:fixed;inset:0;-webkit-font-smoothing:antialiased}
#app{height:100dvh;height:100vh;position:relative;display:flex;flex-direction:column;overflow:hidden}
button{font-family:var(--f);cursor:pointer;border:0;background:none}
input{font-family:var(--f)}

/* themes */
#app.t-dark{color:#FBF4E9}
#app.t-light{color:#2A2017}

/* background layers */
#bg{position:absolute;inset:0;z-index:0}
.photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(120,70,20,.12),rgba(40,20,8,.1));mix-blend-mode:multiply}
.heroshade{position:absolute;inset:0;background:rgba(0,0,0,.6)}
.dscrim{position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(0,0,0,.32) 100%)}
.lbg{position:absolute;inset:0;background:radial-gradient(58% 38% at 80% 4%,#FCEBC9,transparent 72%),radial-gradient(64% 44% at 16% 6%,#F4D6B2,transparent 72%),linear-gradient(172deg,#F4E3CC,#E6CDAE 58%,#D8BD9C)}
.blob{position:absolute;border-radius:50%;filter:blur(54px)}
.b1{width:240px;height:240px;background:#FBDBA8;top:-46px;right:-40px;opacity:.7}
.b2{width:220px;height:220px;background:#E7AD8C;top:38%;left:-80px;opacity:.36}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* column */
.col{position:relative;z-index:3;display:flex;flex-direction:column;height:100%}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 22px}
.scroll::-webkit-scrollbar{width:0}
.pt{padding-top:calc(var(--sat) + 14px)}

/* glass */
.glass{backdrop-filter:blur(18px) saturate(1.25);-webkit-backdrop-filter:blur(18px) saturate(1.25)}
.t-dark .glass{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.26)}
.t-light .glass{background:rgba(255,253,250,.5);border:1px solid rgba(255,255,255,.62)}

/* top */
.top{display:flex;justify-content:space-between;align-items:center;padding:0 22px}
.av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:500;font-size:17px;flex:none}
.t-dark .av{color:#fff}
.t-light .av{color:#fff;background:radial-gradient(circle at 32% 28%,#EABB8C,#B07C4E)}
.menu{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
.menu b{display:block;width:4px;height:4px;border-radius:50%;margin:1.5px}
.t-dark .menu b{background:#fff}.t-light .menu b{background:#3a2f22}
.menu .g2{display:grid;grid-template-columns:repeat(2,4px);gap:3px}
.brandmark{display:flex;align-items:center}
.hm{width:27px;height:27px;display:block}
.t-dark .hm{color:#E9CE78}
.t-light .hm{color:#A6772E}
.burger{width:44px;height:44px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:none;padding:0}
.burger span{display:block;width:18px;height:2px;border-radius:2px}
.t-dark .burger span{background:#FBF4E9}
.t-light .burger span{background:#2A2017}

/* today hero */
.today{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 26px}
.tsp{flex:1}
.prog{display:flex;flex-direction:column;align-items:center}
.colbar{width:64px;height:188px;border-radius:36px;position:relative;overflow:hidden;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.colbar .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#F4D88A,#C9A227);border-radius:0 0 36px 36px;box-shadow:0 -2px 22px rgba(233,206,120,.55);transition:height .7s cubic-bezier(.2,.8,.2,1)}
.colpct{font-size:48px;font-weight:300;letter-spacing:-.02em;color:#FFFaf2;margin-top:20px;line-height:1}
.collabel{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:#F1D89C;font-weight:600;margin-top:9px}
.kick{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:#F1D89C;font-weight:500;margin-bottom:13px;text-align:center}
.lede{font-size:34px;line-height:1.1;font-weight:300;letter-spacing:-.025em;color:#FFFaf2;text-align:center}
.meta{margin-top:15px;font-size:13.5px;color:rgba(255,255,255,.72);text-align:center}.meta b{color:#F1D89C;font-weight:500}
.cta{margin-top:22px;padding-bottom:calc(var(--sab) + 20px)}
.pill{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;background:rgba(252,247,240,.96);color:#241710;border-radius:100px;padding:18px;font-size:15px;font-weight:500;box-shadow:0 20px 40px -18px rgba(0,0,0,.5)}
.replace{display:block;text-align:center;margin-top:13px;font-size:13px;color:rgba(255,255,255,.66)}
.subacts{display:flex;justify-content:center;gap:22px;margin-top:14px;flex-wrap:wrap}
.subacts span{font-size:13.5px;color:rgba(255,255,255,.72)}
.donestate{text-align:center;padding-bottom:calc(var(--sab) + 28px)}
.donestate .big{font-size:28px;font-weight:300;color:#FFFaf2;letter-spacing:-.02em}
.donestate .sub{font-size:13.5px;color:rgba(255,255,255,.7);margin-top:8px}

/* light headings */
.h1{font-size:30px;font-weight:300;letter-spacing:-.025em;margin-top:18px}
.hsub{font-size:13px;color:#7c6a51;margin-top:7px}

/* segmented */
.seg{display:flex;border-radius:100px;padding:4px;margin:18px 0 6px}
.seg button{flex:1;padding:11px;border-radius:100px;font-size:12px;font-weight:600;letter-spacing:.04em;color:#7c6a51}
.seg button.on{background:#2C2118;color:#F3E7D5}

/* rows */
.grp{margin:22px 0 6px;display:flex;justify-content:space-between;align-items:baseline}
.grp .l{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600}
.grp .a{font-size:12px;color:#9a8568}
.row{display:flex;align-items:center;gap:13px;padding:14px 0;border-bottom:1px solid rgba(60,45,25,.1);font-size:14px}
.row .ch{font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;width:70px;flex:none}
.row .tk{flex:1}
.row .d{font-size:10px;color:#a2906f;letter-spacing:.1em;text-transform:uppercase;flex:none}
.row.done .tk{color:#9a8a70}.row .ck{color:var(--gold)}

/* calendar */
.cal{border-radius:26px;padding:18px;margin-top:16px}
.calhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.calhead .m{font-size:18px;font-weight:500}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:7px}
.dow span{text-align:center;font-size:9px;text-transform:uppercase;color:#a2906f;font-weight:600}
.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.day{aspect-ratio:1;min-width:0;position:relative;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:50%;color:#3a2f22}
.day.flower{background:rgba(214,120,144,.30)}
.day.done{background:linear-gradient(180deg,#EFCB6A,#C9A227);color:#241710;font-weight:600}
.day.today{border:1.5px solid var(--gold)}
.day.dot::after{content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gold)}
.day.mut{color:#bcae96}
.calstat{text-align:center;margin-top:16px;font-size:12px;color:#7c6a51;line-height:1.5}.calstat b{color:var(--gold);font-weight:600}
.fldot{color:#D67890}
.flowers{display:flex;align-items:center;gap:13px;border-radius:24px;padding:15px 16px;margin-top:14px}
.fl-ico{font-size:26px;flex:none;line-height:1}
.fl-txt{flex:1;min-width:0}
.fl-t{font-size:15px;font-weight:600;color:#2A2017}
.fl-s{font-size:12px;color:#8a7558;margin-top:2px}
.fl-btn{flex:none;border-radius:100px;padding:11px 16px;font-size:13px;font-weight:600;background:#C25B73;color:#fff}
.fl-btn.wilt{background:rgba(60,45,25,.12);color:#6b5a42}

/* add row + wishes + base */
.addrow{display:flex;gap:9px;margin:18px 0 4px}
.addrow input{flex:1;border-radius:16px;padding:14px 15px;font-size:14px;color:#2A2017;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.55)}
.addrow input::placeholder{color:#a2906f}.addrow input:focus{outline:0;border-color:var(--gold)}
.addrow .add{flex:none;width:50px;border-radius:16px;background:#2C2118;color:#F3E7D5;font-size:22px}
.wish{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid rgba(60,45,25,.1)}
.wish .tx{flex:1;font-size:14px}
.wish .mo{flex:none;font-size:10px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--gold);border-radius:100px;padding:6px 12px;border:1px solid rgba(166,119,46,.3);background:rgba(255,255,255,.4)}
.wish .mo.empty{color:#a2906f;border-color:rgba(60,45,25,.14)}
.bsec{margin-top:22px}
.bsec .bh{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.bsec .bn{font-size:18px;font-weight:500}.bsec .bt{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#a2906f;font-weight:600}
.bitem{display:flex;gap:11px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(60,45,25,.1);font-size:13.5px}
.bitem .ch{font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600;width:62px;flex:none}
.bitem .tk{flex:1}
.addbtn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:18px;background:#2C2118;color:#F3E7D5;border-radius:100px;padding:17px;font-size:14px;font-weight:500;box-shadow:0 18px 34px -18px rgba(44,33,24,.7)}

/* nav */
.nav{flex:none;display:flex;justify-content:space-around;align-items:center;margin:8px 16px;
  margin-bottom:calc(var(--sab) + 12px);border-radius:30px;padding:13px 8px}
.nav a{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:9px;letter-spacing:.04em;text-transform:uppercase;font-weight:500}
.nav a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6}
.t-dark .nav{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}
.t-dark .nav a{color:rgba(255,255,255,.6)}.t-dark .nav a.on{color:#FBF4E9}
.t-light .nav{background:rgba(255,253,250,.5);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.t-light .nav a{color:#9a8568}.t-light .nav a.on{color:#2A2017}

/* ===== AUTH ===== */
.auth{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:24px;text-align:center}
.auth .emblem{width:34px;margin-bottom:20px}
.auth h1{font-size:30px;font-weight:300;letter-spacing:.06em;color:#2A2017}
.auth .sub{margin-top:10px;font-size:13.5px;color:#7c6a51;font-style:italic;line-height:1.5;max-width:280px}
.card-auth{margin-top:30px;width:100%;max-width:360px;border-radius:28px;padding:22px;display:flex;flex-direction:column;gap:11px}
.field{border-radius:16px;padding:15px 16px;font-size:15px;color:#2A2017;border:1px solid rgba(255,255,255,.62);background:rgba(255,255,255,.6)}
.field::placeholder{color:#a2906f}.field:focus{outline:0;border-color:var(--gold)}
.btn-gold{margin-top:5px;border-radius:100px;padding:17px;background:#2C2118;color:#F3E7D5;font-size:15px;font-weight:600;box-shadow:0 16px 30px -16px rgba(44,33,24,.8)}
.auth .switch{margin-top:18px;font-size:13.5px;color:#7c6a51}
.auth .switch b{color:var(--gold);font-weight:600}
.auth .err{min-height:18px;font-size:13px;color:#B4452F;font-weight:500}

/* ===== sheet / addwin / toast (body level) ===== */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(20,12,6,.42);opacity:0;pointer-events:none;transition:.22s}
.scrim.show{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;border-radius:30px 30px 0 0;padding:24px 24px calc(var(--sab) + 28px);transform:translateY(110%);transition:.28s cubic-bezier(.2,.8,.2,1);
  background:rgba(250,244,236,.9);backdrop-filter:blur(30px) saturate(1.3);-webkit-backdrop-filter:blur(30px) saturate(1.3);border-top:1px solid rgba(255,255,255,.6);color:#2A2017}
.sheet.show{transform:translateY(0)}
.sheet h4{font-size:20px;font-weight:500;margin-bottom:5px}.sheet .sx{font-size:13px;color:#7c6a51;margin-bottom:14px}
.opt{display:flex;align-items:center;padding:15px 2px;border-bottom:1px solid rgba(60,45,25,.1)}
.opt:last-child{border-bottom:0}.opt .o1{font-size:16px}.opt .o2{margin-left:auto;font-size:11px;color:#a2906f}
.mgrid{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.mgrid button{font-size:12px;font-weight:500;color:#6b5a42;border:1px solid rgba(60,45,25,.16);background:rgba(255,255,255,.4);border-radius:100px;padding:10px 15px}
.mgrid button.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.addwin{position:fixed;inset:0;z-index:45;transform:translateY(110%);transition:.32s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;
  background:radial-gradient(58% 40% at 80% 4%,#FCEBC9,transparent 72%),radial-gradient(64% 44% at 16% 6%,#F4D6B2,transparent 72%),linear-gradient(172deg,#F4E3CC,#E6CDAE 58%,#D8BD9C);color:#2A2017}
.addwin.show{transform:translateY(0)}
.addwin .awh{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--sat) + 22px) 26px 8px}
.addwin .awh .t{font-size:22px;font-weight:300}.addwin .awh .t b{font-weight:600}
.addwin .x{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.6);font-size:18px;color:#5b4c39}
.addwin .awb{flex:1;overflow-y:auto;padding:14px 26px}
.awlab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:18px 0 10px}
.awin{width:100%;border-radius:20px;padding:16px;font-size:16px;color:#2A2017;border:1px solid rgba(255,255,255,.6);background:rgba(255,255,255,.55);resize:none}
.awin:focus{outline:0;border-color:var(--gold)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12.5px;font-weight:500;color:#6b5a42;border:1px solid rgba(60,45,25,.16);background:rgba(255,255,255,.45);border-radius:100px;padding:11px 16px}
.chip.on{background:var(--gold);color:#fff;border-color:var(--gold)}
.awsave{margin:8px 26px calc(var(--sab) + 26px);background:#2C2118;color:#F3E7D5;border-radius:100px;padding:18px;font-size:15px;font-weight:500}
.toast{position:fixed;left:50%;bottom:calc(var(--sab) + 96px);z-index:50;transform:translate(-50%,12px);background:#2C2118;color:#F3E7D5;font-size:13px;padding:12px 20px;border-radius:30px;opacity:0;pointer-events:none;transition:.25s;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

.loader{position:fixed;inset:0;display:grid;place-items:center;background:#15120e;color:#E9CE78;font-size:14px;z-index:60}

/* ===== mobile adaptation ===== */
@media (max-width: 400px) {
  .scroll{padding:0 16px}
  .today{padding:0 18px}
  .top{padding:0 18px}
  .lede{font-size:30px}
  .colbar{height:168px;width:58px}
  .colpct{font-size:42px}
  .cal{padding:14px}
  .calhead .m{font-size:17px}
  .day{font-size:12px}
  .h1{font-size:27px}
  .fl-btn{padding:11px 13px;font-size:12.5px}
  .fl-ico{font-size:23px}
}
@media (max-width: 345px) {
  .day{font-size:11px}
  .colbar{height:150px}
  .lede{font-size:27px}
  .dow span{font-size:8px}
}