:root{color-scheme:dark;--bg:#070706;--panel:#10100f;--panel2:#151514;--gold:#d8a54e;--gold2:#efc370;--edge:#4a3a23;--edge2:#2b261d;--cream:#f3e3c9;--text:#f5eee3;--muted:#8f887e;--green:#87c66f;--pink:#e697a8;--kai:"Kaiti TC","DFKai-SB","BiauKai","KaiTi","STKaiti",serif;font-family:-apple-system,BlinkMacSystemFont,"PingFang TC",sans-serif}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#070706;color:var(--text)}body{background:radial-gradient(circle at 50% -2%,rgba(216,165,78,.08),transparent 33%),#070706}.poster-shell{width:min(100%,1254px);margin:0 auto;padding-bottom:24px;background:linear-gradient(180deg,#090908,#070706);overflow:hidden}.poster-header{height:298px;position:relative;border-bottom:1px solid #3c3121;display:flex;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 20%,rgba(216,165,78,.07),transparent 36%)}.hero-cat{position:absolute;object-fit:cover;mix-blend-mode:screen;pointer-events:none}.hero-cat.left{left:38px;bottom:-3px;width:300px;height:250px}.hero-cat.right{right:45px;bottom:3px;width:190px;height:150px}.hero-title{text-align:center;padding-top:47px;z-index:2}.hero-title h1{margin:0;color:var(--gold2);font-family:var(--kai);font-size:78px;line-height:.94;letter-spacing:.08em;text-shadow:0 0 18px rgba(216,165,78,.12)}.title-cat{font-size:25px}.hero-title p{margin:21px 0 14px;font-family:var(--kai);font-size:22px;letter-spacing:.2em;color:#efe3d3}.feature-row{display:flex;gap:29px;justify-content:center;color:#c4ad86;font-size:14px;white-space:nowrap}.speech{position:absolute;right:48px;top:48px;z-index:3;border:2px solid #7e5c28;border-radius:55% 45% 52% 48%;padding:17px 28px 20px;color:var(--gold2);font:18px/1.52 var(--kai);transform:rotate(-2deg)}.deco{position:absolute;color:var(--gold);font-family:serif}.moon{left:27px;top:26px;font-size:59px}.s1{left:320px;top:43px;font-size:31px}.s2{left:905px;top:57px;font-size:25px}.poster-grid{display:grid;grid-template-columns:318px 430px 318px;gap:34px;justify-content:center;align-items:start;padding-top:21px}.side{display:flex;flex-direction:column;gap:14px}.gold-card{position:relative;background:linear-gradient(150deg,#11110f,#0c0c0b 70%);border:1px solid var(--edge);border-radius:22px;overflow:hidden;box-shadow:inset 0 1px rgba(255,255,255,.015)}.clickable{cursor:pointer}.clickable:hover{border-color:#6c512c}.reminder-card{height:270px;padding:17px 17px 90px}.done-card{height:277px;padding:17px 17px 90px}.health-card{height:570px;padding:18px 17px}.card-title{font:700 18px/1.2 var(--kai);color:var(--gold2);padding-bottom:13px;border-bottom:1px solid rgba(216,165,78,.13)}.side-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055);font-size:12px}.side-item strong{color:#dfd2bd;font-weight:600}.side-item span{color:var(--gold2);font-weight:700}.side-item .meta{font-size:9px;color:#7d776f;margin-top:4px}.side-empty{color:#777168;font-size:11px;padding:24px 0}.card-cat{position:absolute;object-fit:cover;mix-blend-mode:screen}.card-cat.reminder{right:-8px;bottom:1px;width:165px;height:120px}.card-cat.sleep{right:-3px;bottom:-3px;width:165px;height:118px}.quote-card{height:166px;padding:28px 112px 20px 22px;font:21px/1.5 var(--kai);color:#c99b4e}.quote-card.right{height:168px;padding-right:122px}.quote-card p{margin:0}.quote-card img{position:absolute;right:-3px;bottom:-2px;width:125px;height:105px;object-fit:cover;mix-blend-mode:screen}.quote-mark{position:absolute;left:18px;top:10px;font-size:34px;color:#8c6931}.quote-mark.end{left:auto;right:99px;top:auto;bottom:6px}.phone-stage{position:sticky;top:12px}.phone-frame{position:relative;width:430px;border:3px solid #5d584f;border-radius:56px;padding:10px 9px 8px;background:#040403;box-shadow:0 26px 70px #000b,inset 0 0 0 2px #12120f}.speaker{position:absolute;z-index:10;top:5px;left:50%;transform:translateX(-50%);width:128px;height:20px;border-radius:0 0 16px 16px;background:#020202}.phone-screen{height:760px;border-radius:44px;overflow:auto;background:linear-gradient(180deg,#090908,#080807 65%,#070706);scrollbar-width:none;position:relative}.phone-screen::-webkit-scrollbar{display:none}.app-topbar{position:sticky;top:0;z-index:8;height:95px;padding:22px 17px 11px;background:linear-gradient(#090908 83%,rgba(9,9,8,.9));border-bottom:1px solid rgba(216,165,78,.12)}.phone-time{position:absolute;top:15px;left:22px;font-size:10px}.phone-status{position:absolute;top:15px;right:22px;font-size:8px;letter-spacing:.14em}.app-brand{position:absolute;bottom:12px;left:17px;display:flex;align-items:center;gap:9px;font:18px var(--kai);color:var(--gold2)}.app-brand img{width:37px;height:30px;object-fit:cover;mix-blend-mode:screen;border-radius:6px}.app-actions{position:absolute;bottom:6px;right:14px;display:flex}.app-actions button{width:34px;height:34px;border:0;background:transparent;color:var(--gold2);font-size:21px}.phone-main{padding:10px 13px 82px}.page{display:none}.page.active{display:block}.day-block{position:relative;margin:8px 0;border:1px solid #43351f;border-radius:16px;background:linear-gradient(145deg,#141412,#0e0e0d);overflow:hidden}.day-head{height:74px;padding:11px 13px;display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:8px}.day-icon{width:42px;height:42px;display:grid;place-items:center;color:var(--gold2);font-size:26px}.day-copy h3{margin:0;color:var(--gold2);font:18px var(--kai)}.day-copy small{display:block;margin-top:4px;color:#807a71;font-size:9px}.count{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#2a261d;border:1px solid #493a24;color:#ddc28f;font-size:9px}.note-row{display:grid;grid-template-columns:24px 1fr auto;gap:8px;align-items:center;padding:9px 13px;border-top:1px solid rgba(255,255,255,.05)}.check{width:20px;height:20px;border-radius:50%;border:1px solid #665f54;background:none;color:transparent}.note-row.done .check{background:var(--gold);border-color:var(--gold);color:#10100d}.note-row.done .note-title{text-decoration:line-through;color:#716c64}.note-title{font-size:12px;color:#e4ddd3}.note-meta{font-size:8px;color:#777168;margin-top:3px}.more{border:0;background:none;color:#6f685f;font-size:16px}.quickbar{display:grid;grid-template-columns:44px 1fr 42px;gap:7px;align-items:center;padding:8px 9px;border:1px solid #43351f;border-radius:17px;background:#11110f;margin:13px 0}.quickbar img{width:42px;height:38px;object-fit:cover;mix-blend-mode:screen}.quickbar input{min-width:0;border:0;background:transparent;color:#e6ded2;outline:0;font-size:12px}.quickbar button{width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(145deg,#efc36c,#b77e2d);color:#17110a;font-size:25px}.bottom-nav{position:absolute;bottom:0;left:0;right:0;height:72px;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(8,8,7,.98);border-top:1px solid #382d1f;backdrop-filter:blur(15px);z-index:9}.nav{border:0;background:none;color:#7e786f;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.nav span{font-size:20px}.nav small{font-size:8px}.nav.active{color:var(--gold2)}.nav.add span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#efc36c,#b77e2d);color:#15100a;font-size:28px;box-shadow:0 0 0 4px #080807}.page-head{height:93px;display:flex;align-items:center;justify-content:space-between;padding:7px 5px 5px}.page-head small{font-size:8px;letter-spacing:.14em;color:#8f7950}.page-head h2{margin:4px 0 0;color:#eedbb7;font:25px var(--kai)}.page-head img{width:90px;height:76px;object-fit:cover;mix-blend-mode:screen}.searchbox{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #373022;border-radius:14px;background:#11110f}.searchbox input{flex:1;border:0;background:none;outline:0;color:#eee3d4}.chips,.metric-switch{display:flex;gap:7px;overflow:auto;padding:9px 0;scrollbar-width:none}.chips button,.metric-switch button,.health-tabs button,.ghost,.settings button,.file-btn{border:1px solid #3a3124;background:#0c0c0b;color:#918b82;border-radius:999px;padding:7px 10px;font-size:9px;white-space:nowrap}.chips button.active,.metric-switch button.active,.health-tabs button.active{border-color:#6b542e;color:var(--gold2);background:#19150f}.form-card{position:relative;border:1px solid #42341f;border-radius:17px;background:linear-gradient(145deg,#141412,#0e0e0d);padding:14px}.form-card label,.modal-card label{display:flex;flex-direction:column;gap:6px;margin:10px 0;color:#cfc4b5;font-size:10px}.form-card input,.form-card textarea,.form-card select,.modal-card input,.modal-card textarea,.modal-card select{width:100%;border:1px solid #31291f;border-radius:11px;background:#090908;color:white;padding:10px;outline:0}.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toggle{flex-direction:row!important;align-items:center;justify-content:space-between}.toggle span{display:flex;flex-direction:column}.toggle small,.setting small{font-size:8px;color:#7e786f}.toggle input{width:22px!important}.primary{width:100%;padding:12px;border:0;border-radius:12px;background:linear-gradient(145deg,#efc36c,#b77e2d);color:#161009;font-weight:800}.health-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}.metric-card{min-height:96px;border:1px solid #42341f;border-radius:15px;background:#11110f;padding:12px}.metric-card small{color:#b59a6c;font-size:9px}.metric-card strong{display:block;margin:7px 0 3px;color:#f0e3cf;font:23px var(--kai)}.metric-card em{font-style:normal;color:var(--green);font-size:9px}.metric-card.period em{color:var(--pink)}.health-tabs{display:flex;gap:5px;border:1px solid #372e21;border-radius:14px;padding:4px;margin-bottom:9px}.health-tabs button{flex:1;border:0;background:transparent}.health-panel{display:none}.health-panel.active{display:block}.panel-head{display:flex;align-items:center;justify-content:space-between}.panel-head h3{margin:0;color:var(--gold2);font:18px var(--kai)}.ghost{color:var(--gold2);border-color:#5a4526}.chart{height:164px}.chart svg{width:100%;height:100%}.gridline{stroke:#2a271f}.line{fill:none;stroke:var(--gold2);stroke-width:3}.dot{fill:#0e0d0b;stroke:var(--gold2);stroke-width:2}.charttext{fill:#776f64;font-size:9px}.history{display:flex;justify-content:space-between;gap:8px;padding:9px 1px;border-top:1px solid rgba(255,255,255,.05);font-size:10px}.history .right{text-align:right;color:#decfb7}.period-box,.inj-box{margin:10px 0;padding:11px;border:1px solid #31281d;border-radius:13px;background:#0b0b0a}.period-box strong{display:block;margin:5px 0;color:var(--gold2);font:23px var(--kai)}.tags{display:flex;gap:6px;flex-wrap:wrap}.tag{border:1px solid #443822;border-radius:999px;padding:5px 8px;color:#b4aa9a;font-size:8px}.inj-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.inj-stat{padding:9px;border:1px solid #2b251c;border-radius:10px;background:#0d0d0c}.inj-stat small{display:block;color:#8b857c;font-size:8px}.inj-stat strong{font-size:11px;color:#eadbc2}.injection-panel{overflow:hidden}.panel-cat{position:absolute;right:-8px;top:43px;width:98px;height:73px;object-fit:cover;mix-blend-mode:screen}.medical{font-size:7px;color:#706a61}.settings{padding:3px 12px}.setting{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-top:1px solid rgba(255,255,255,.05)}.setting:first-child{border-top:0}.setting>div{display:flex;flex-direction:column;gap:3px}.setting>span{font-size:8px;color:var(--green);border:1px solid #33482f;border-radius:999px;padding:5px 8px}.desktop-health-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.desktop-hmetric{height:122px;border:1px solid #3e321f;border-radius:14px;padding:14px;background:#0d0d0c;position:relative}.desktop-hmetric small{color:#b49b6e;font-size:10px}.desktop-hmetric strong{display:block;margin:8px 0 2px;color:#eee1ca;font:28px var(--kai)}.desktop-hmetric em{font-style:normal;color:var(--green);font-size:10px}.desktop-hmetric.period em{color:var(--pink)}.desktop-hmetric .mini-line{height:26px;margin-top:8px}.mini-line svg{width:100%;height:100%}.mini-line path{fill:none;stroke:var(--gold2);stroke-width:2}.mini-line circle{fill:var(--gold2)}.health-card .peek{position:absolute;right:0;top:4px;width:104px;height:82px;object-fit:cover;mix-blend-mode:screen}.desktop-injection{position:absolute;left:17px;right:17px;bottom:17px;height:130px;border:1px solid #3e321f;border-radius:14px;padding:13px;background:#0d0d0c}.desktop-inj-title{color:#e7c27d;font:16px var(--kai)}.desktop-inj-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px;margin-right:74px}.desktop-inj-stat small{display:block;color:#817a71;font-size:8px}.desktop-inj-stat strong{font-size:10px;color:#e3d3ba}.health-card .coffee{position:absolute;right:1px;bottom:6px;width:118px;height:86px;object-fit:cover;mix-blend-mode:screen}.feature-strip{margin:25px 45px 0;height:101px;border:1px solid #4a3a23;border-radius:22px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;background:linear-gradient(145deg,#11110f,#0d0d0c)}.feature-strip>div{height:60px;padding:0 15px;display:flex;align-items:center;gap:10px;border-left:1px solid rgba(216,165,78,.13)}.feature-strip>div:first-child{border-left:0}.feature-strip b{font-size:29px;color:var(--gold2);font-weight:400}.feature-strip img{width:54px;height:48px;object-fit:cover;mix-blend-mode:screen}.feature-strip span{display:flex;flex-direction:column;gap:4px}.feature-strip strong{font:14px var(--kai);color:#dec18b}.feature-strip small{font-size:9px;color:#7c766d}dialog{width:min(410px,calc(100% - 18px));border:0;background:none;padding:0;color:white}dialog::backdrop{background:#000c;backdrop-filter:blur(5px)}.modal-card{background:#11110f;border:1px solid #453823;border-radius:20px;padding:15px;max-height:88vh;overflow:auto}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head small{font-size:9px;color:#a98a57}.modal-head h3{margin:3px 0;color:#efdfc2}.modal-head button{width:35px;height:35px;border:1px solid #342b20;border-radius:11px;background:#171612;color:white}.modal-card fieldset{border:1px solid #352c21;border-radius:12px}.modal-card legend{font-size:10px;color:#bdb4a8}.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.checks label{flex-direction:row;margin:0;align-items:center}.checks input{width:auto}.divider{margin-top:13px;padding-top:12px;border-top:1px solid #362d21;color:var(--gold2);font-size:9px}#toast{position:fixed;z-index:100;left:50%;bottom:86px;transform:translate(-50%,15px);opacity:0;transition:.2s;padding:9px 13px;border:1px solid #5d4a2b;border-radius:999px;background:#2b2417;color:#f0d092;font-size:10px}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){body{background:#080807}.poster-shell{width:100%;min-height:100dvh}.poster-header,.side,.feature-strip{display:none}.poster-grid{display:block;padding:0}.phone-stage{position:static}.phone-frame{width:100%;border:0;border-radius:0;padding:0;box-shadow:none;background:#080807}.speaker{display:none}.phone-screen{height:100dvh;border-radius:0;padding-bottom:env(safe-area-inset-bottom)}.app-topbar{padding-top:calc(22px + env(safe-area-inset-top));height:calc(95px + env(safe-area-inset-top))}.phone-time{top:calc(15px + env(safe-area-inset-top))}.phone-status{top:calc(15px + env(safe-area-inset-top))}.bottom-nav{position:fixed;height:calc(72px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom)}.phone-main{padding-bottom:calc(86px + env(safe-area-inset-bottom))}.day-head{height:72px}.day-block{margin:8px 0}.page-head{height:88px}.quote-card{display:none}}
@media(max-width:370px){.two{grid-template-columns:1fr}.checks{grid-template-columns:repeat(2,1fr)}}/* v5.1 visual-lock refinements */
.brand-title-wrap{width:590px;height:135px;margin:-13px auto -9px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.brand-title-img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;filter:brightness(1.06) saturate(.96);-webkit-mask-image:radial-gradient(ellipse 88% 80% at 50% 50%,#000 66%,transparent 100%);mask-image:radial-gradient(ellipse 88% 80% at 50% 50%,#000 66%,transparent 100%)}
.hero-cat.left{-webkit-mask-image:radial-gradient(ellipse 86% 90% at 50% 60%,#000 55%,transparent 95%);mask-image:radial-gradient(ellipse 86% 90% at 50% 60%,#000 55%,transparent 95%)}
.hero-cat.right,.health-card .peek,.card-cat,.quote-card img,.health-card .coffee,.feature-strip img,.app-brand img,.page-head img,.quickbar img,.panel-cat{-webkit-mask-image:radial-gradient(ellipse 88% 88% at 50% 55%,#000 54%,transparent 100%);mask-image:radial-gradient(ellipse 88% 88% at 50% 55%,#000 54%,transparent 100%)}
.day-head{cursor:pointer}.day-block .note-row{display:none}.day-block.expanded .note-row{display:grid}.day-block.expanded .day-head{border-bottom:1px solid rgba(255,255,255,.05)}
@media(max-width:980px){.brand-title-wrap{display:none}}
/* black-to-alpha assets render natively */
.hero-cat,.brand-title-img,.health-card .peek,.card-cat,.quote-card img,.health-card .coffee,.feature-strip img,.app-brand img,.page-head img,.quickbar img,.panel-cat{mix-blend-mode:normal!important}
/* v5.2 match the approved reference's charcoal background (not pure black) */
:root{--bg:#121212;--panel:#171717;--panel2:#1b1b1a}
html,body{background:#121212}.poster-shell{background:linear-gradient(180deg,#151515,#111111)}
.poster-header{background:radial-gradient(circle at 50% 20%,rgba(216,165,78,.07),transparent 36%),#151515}
.phone-frame{background:#101010}.phone-screen{background:linear-gradient(180deg,#111111,#0f0f0f 65%,#0e0e0e)}
.app-topbar{background:linear-gradient(#111111 83%,rgba(17,17,17,.92))}.bottom-nav{background:rgba(14,14,14,.98)}
.gold-card,.form-card,.day-block,.quickbar,.health-card,.feature-strip{background:linear-gradient(145deg,#1a1a19,#131313 72%)}
.brand-title-img,.hero-cat,.health-card .peek,.card-cat,.quote-card img,.health-card .coffee,.feature-strip img,.app-brand img,.page-head img,.quickbar img,.panel-cat{mix-blend-mode:screen!important}

/* v6 mascot integration fix: real transparent cutouts, no overlay/fog/screen blend */
.hero-cat,.health-card .peek,.card-cat,.quote-card img,.health-card .coffee,.feature-strip img,.app-brand img,.page-head img,.quickbar img,.panel-cat{
  mix-blend-mode:normal!important;
  -webkit-mask-image:none!important; mask-image:none!important;
  filter:none!important; opacity:1!important; object-fit:contain!important;
}
.hero-cat.left{left:31px;bottom:0;width:305px;height:228px}
.hero-cat.right{right:43px;bottom:0;width:174px;height:140px}
.card-cat.reminder{right:4px;bottom:4px;width:164px;height:90px}
.card-cat.sleep{right:4px;bottom:4px;width:205px;height:80px}
.quote-card img{right:2px;bottom:2px;width:145px;height:112px}
.quote-card.right img{right:2px;bottom:0;width:180px;height:115px}
.health-card .peek{right:6px;top:10px;width:112px;height:64px}
.health-card .coffee{right:2px;bottom:11px;width:155px;height:98px}
.desktop-injection{padding-right:118px}
.desktop-inj-grid{margin-right:0}
.panel-cat{right:2px;top:46px;width:112px;height:70px}
.app-brand img{width:34px;height:30px}
.quickbar img{width:42px;height:34px}
.page-head img{width:88px;height:72px}
.feature-strip img{width:48px;height:42px}
/* Make mascot art sit on the same charcoal plane as the card, never in its own rectangle. */
.card-cat,.quote-card img,.health-card .peek,.health-card .coffee,.hero-cat{pointer-events:none}
\n/* v7 mascot repair: no alpha holes, no visible rectangular fog; matte-matched silhouettes. */
.hero-cat,.health-card .peek,.card-cat,.quote-card img,.health-card .coffee,.feature-strip img,.app-brand img,.page-head img,.quickbar img,.panel-cat{
  mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important;filter:none!important;opacity:1!important;object-fit:contain!important;
}
.hero-cat.left{width:292px;height:218px;left:38px;bottom:0}
.hero-cat.right{width:158px;height:128px;right:47px;bottom:5px}
.card-cat.reminder{width:154px;height:88px;right:7px;bottom:4px}
.card-cat.sleep{width:196px;height:82px;right:4px;bottom:3px}
.quote-card img{width:136px;height:105px;right:2px;bottom:1px}
.quote-card.right img{width:170px;height:110px;right:2px;bottom:0}
.health-card .peek{width:100px;height:60px;right:7px;top:9px}
.health-card .coffee{width:145px;height:94px;right:2px;bottom:8px}
.panel-cat{width:104px;height:68px;right:4px;top:48px}
.app-brand img,.quickbar img,.page-head img,.feature-strip img{mix-blend-mode:normal!important}

/* v8: use feathered reference-image patches; do NOT chroma-key/erase dark fur. */
.hero-cat,
.card-cat,
.quote-card img,
.health-card .peek,
.health-card .coffee{
  mix-blend-mode:normal!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
  filter:none!important;
  opacity:1!important;
  object-fit:contain!important;
  background:transparent!important;
}
.hero-cat.left{left:16px!important;bottom:-5px!important;width:355px!important;height:250px!important}
.hero-cat.right{right:22px!important;bottom:-5px!important;width:235px!important;height:175px!important}
.card-cat.reminder{right:-10px!important;bottom:-8px!important;width:205px!important;height:135px!important}
.card-cat.sleep{right:-10px!important;bottom:-10px!important;width:285px!important;height:132px!important}
.quote-card img{right:-10px!important;bottom:-8px!important;width:175px!important;height:125px!important}
.health-card .peek{right:-4px!important;top:0!important;width:150px!important;height:92px!important}
.health-card .coffee{right:-10px!important;bottom:-9px!important;width:205px!important;height:150px!important}
/* Make card surfaces slightly closer to the reference crop background to eliminate any patch seam. */
.gold-card{background:linear-gradient(150deg,#11110f,#0d0d0c 72%)!important}
.quote-card{background:linear-gradient(150deg,#11110f,#0d0d0c 72%)!important}
.health-card{background:linear-gradient(150deg,#11110f,#0d0d0c 72%)!important}


/* v9 — approved Lusfuo pose sheet, integrated without clipped ears/paws or hard image patches */
:root{--art-black:#050505}
.hero-cat,.card-cat,.quote-card img,.health-card .peek,.health-card .coffee,.panel-cat,.page-head img,.app-brand img,.quickbar img,.feature-strip img{
  mix-blend-mode:normal!important;filter:none!important;opacity:1!important;object-fit:contain!important;background:transparent!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
/* The generated mascot assets are feathered at their OUTER crop edges only; never mask the cat itself in CSS. */
.poster-header{background:radial-gradient(circle at 50% 20%,rgba(216,165,78,.055),transparent 37%),#080808!important}
.gold-card,.quote-card,.health-card{background:linear-gradient(145deg,#090908,#050505 76%)!important}
.hero-cat.left{left:18px!important;bottom:-6px!important;width:365px!important;height:248px!important}
.hero-cat.right{right:20px!important;bottom:-3px!important;width:220px!important;height:166px!important}
.card-cat.reminder{right:-2px!important;bottom:-4px!important;width:188px!important;height:126px!important}
.card-cat.sleep{right:-4px!important;bottom:-5px!important;width:250px!important;height:122px!important}
.quote-card img{right:-5px!important;bottom:-5px!important;width:158px!important;height:122px!important}
.quote-card.right img{right:-5px!important;bottom:-7px!important;width:175px!important;height:132px!important}
.health-card .peek{right:0!important;top:3px!important;width:145px!important;height:89px!important}
.health-card .coffee{right:-2px!important;bottom:-5px!important;width:170px!important;height:135px!important}
.panel-cat{right:2px!important;top:45px!important;width:105px!important;height:82px!important}
.app-brand img{width:37px!important;height:31px!important}.quickbar img{width:43px!important;height:35px!important}.page-head img{width:90px!important;height:73px!important}.feature-strip img{width:50px!important;height:44px!important}
/* Keep artwork away from live text/value zones. */
.reminder-card #desktopReminders{position:relative;z-index:2;padding-right:112px}.done-card #desktopCompleted{position:relative;z-index:2;padding-right:86px}
.quote-card p,.quote-mark{position:relative;z-index:2}.health-card .card-title,.desktop-health-grid,.desktop-injection{position:relative;z-index:2}
@media(max-width:980px){
  .page-head img{width:78px!important;height:62px!important}
  .panel-cat{width:96px!important;height:72px!important}
}


/* v9.1 — match mascot artwork's black plane so no pasted rectangles are visible */
.poster-shell{background:#050505!important}
.poster-header{background:#050505!important}
.gold-card,.quote-card,.health-card{background:#050505!important}
.brand-title-img{mix-blend-mode:normal!important;-webkit-mask-image:none!important;mask-image:none!important;filter:none!important;background:transparent!important}

/* v10 — true transparent mascot assets. No matte rectangles, no blend mode. */
:root{--bg:#0d0d0d;--panel:#151514;--panel2:#191918}
html,body{background:#0d0d0d!important}
.poster-shell{background:linear-gradient(180deg,#111111,#0b0b0b)!important}
.poster-header{background:radial-gradient(circle at 50% 18%,rgba(216,165,78,.055),transparent 38%),#101010!important}
.gold-card,.quote-card,.health-card{background:linear-gradient(145deg,#171716,#101010 74%)!important}
.day-block,.quickbar,.form-card,.feature-strip{background:linear-gradient(145deg,#171716,#101010 74%)!important}
.phone-frame{background:#090909!important}.phone-screen{background:linear-gradient(180deg,#111,#0d0d0d 65%,#0b0b0b)!important}
.app-topbar{background:linear-gradient(#111 83%,rgba(17,17,17,.94))!important}.bottom-nav{background:rgba(12,12,12,.985)!important}
.hero-cat,.card-cat,.quote-card img,.health-card .peek,.health-card .coffee,.panel-cat,.page-head img,.app-brand img,.quickbar img,.feature-strip img{
  mix-blend-mode:normal!important;filter:none!important;opacity:1!important;object-fit:contain!important;background:transparent!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}
/* The PNG alpha itself controls the edge. Never fake transparency in CSS. */
.hero-cat.left{left:20px!important;bottom:-2px!important;width:348px!important;height:236px!important}
.hero-cat.right{right:30px!important;bottom:4px!important;width:196px!important;height:150px!important}
.card-cat.reminder{right:3px!important;bottom:3px!important;width:178px!important;height:112px!important}
.card-cat.sleep{right:1px!important;bottom:2px!important;width:238px!important;height:112px!important}
.quote-card img{right:2px!important;bottom:0!important;width:145px!important;height:112px!important}
.quote-card.right img{right:1px!important;bottom:-1px!important;width:168px!important;height:124px!important}
.health-card .peek{right:5px!important;top:6px!important;width:124px!important;height:76px!important}
.health-card .coffee{right:2px!important;bottom:2px!important;width:150px!important;height:116px!important}
.panel-cat{right:3px!important;top:48px!important;width:100px!important;height:76px!important}
.app-brand img{width:35px!important;height:30px!important}.quickbar img{width:42px!important;height:34px!important}.page-head img{width:82px!important;height:68px!important}.feature-strip img{width:48px!important;height:42px!important}
@media(max-width:980px){
  .page-head img{width:74px!important;height:58px!important}
  .panel-cat{width:92px!important;height:68px!important}
  /* transparent assets remain transparent on iPhone charcoal cards */
  .phone-screen,.app-topbar,.bottom-nav,.day-block,.quickbar,.form-card{background-color:#101010!important}
}


/* v11 — iPhone polish from real-device screenshots */
.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.two>*{min-width:0}.form-card input,.form-card select,.form-card textarea,.modal-card input,.modal-card select,.modal-card textarea{min-width:0;max-width:100%}
#allNotes .note-row{display:grid!important}
#allNotes .day-block{overflow:visible}
@media(max-width:980px){
  /* Real iPhone already has a status bar; remove the fake 9:41/status icons from the desktop phone mockup. */
  .phone-time,.phone-status{display:none!important}
  .app-topbar{height:calc(68px + env(safe-area-inset-top))!important;padding:env(safe-area-inset-top) 16px 8px!important}
  .app-brand{top:calc(env(safe-area-inset-top) + 15px)!important;bottom:auto!important;left:16px!important}
  .app-actions{top:calc(env(safe-area-inset-top) + 10px)!important;bottom:auto!important;right:12px!important}
  .phone-main{padding-top:8px!important}
  .page-head{height:82px!important}
  .form-card input[type="date"],.form-card input[type="time"],.modal-card input[type="date"],.modal-card input[type="time"]{font-size:16px!important;width:100%!important;min-width:0!important}
  .two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:8px!important}
  #allNotes .day-block{margin-top:10px!important}
  #allNotes .note-row{padding:12px 13px!important}
}
@media(max-width:430px){
  .form-card{padding:14px 13px!important}
  .two{gap:7px!important}
}