:root,[data-theme=pink]{
--bg:#fff0f5;--bg-grad:linear-gradient(135deg,#fff0f5,#ffe3ee);--card:#fff;--pink:#e8457c;--soft:#ffd6e5;--ink:#4a2b38;--muted:#7a4a5c;
--cell:#fffafc;--btn:#fff;--on-accent:#fff;--danger:#b00020;--shadow:0 6px 24px rgba(232,69,124,.15);--glow:0 0 30px rgba(232,69,124,.45);
--r:10px;--r-lg:18px;--font:Georgia,'Segoe UI',serif;--font-head:Georgia,'Segoe UI',serif;--has-icon:'💌';
--bday-bg:linear-gradient(135deg,#ffd1e3,#ffe9a8);--bday-panel:linear-gradient(160deg,#fff,#ffe3ee 60%,#fff3c4);
--focus-bg:linear-gradient(135deg,#ffe3ee,#ffd0e0);--sky:linear-gradient(#e9f7ff,#fff8ee 70%);--ground:#b98a63}
[data-theme=garden]{
--bg:#eef9e8;--bg-grad:linear-gradient(135deg,#f3fbe9,#d6efc8);--card:#fcfff8;--pink:#2f9e4f;--soft:#cdeac4;--ink:#25472b;--muted:#4d7354;
--cell:#f6fdf1;--btn:#fcfff8;--on-accent:#fff;--danger:#b3261e;--shadow:0 6px 24px rgba(47,158,79,.18);--glow:0 0 30px rgba(47,158,79,.45);
--r:12px;--r-lg:22px;--font:'Trebuchet MS','Segoe UI',sans-serif;--font-head:Georgia,serif;--has-icon:'🌼';
--bday-bg:linear-gradient(135deg,#d9f5c9,#fff3b0);--bday-panel:linear-gradient(160deg,#fcfff8,#e3f6d6 60%,#fff6c2);
--focus-bg:linear-gradient(135deg,#dff3d2,#c4e5b4);--sky:linear-gradient(#dff3ff,#f4ffe8 70%);--ground:#8a6a45}
[data-theme=ninja]{
--bg:#0a0a0c;--bg-grad:linear-gradient(135deg,#050506,#17171c);--card:#14151a;--pink:#e5192d;--soft:#2b2c33;--ink:#ececf0;--muted:#a0a0ab;
--cell:#1b1c22;--btn:#1b1c22;--on-accent:#fff;--danger:#ff6672;--shadow:0 6px 24px rgba(0,0,0,.7);--glow:0 0 30px rgba(229,25,45,.55);
--r:3px;--r-lg:6px;--font:'Segoe UI',Tahoma,sans-serif;--font-head:'Trebuchet MS','Segoe UI',sans-serif;--has-icon:'📜';
--bday-bg:linear-gradient(135deg,#3a0a10,#1b1c22);--bday-panel:linear-gradient(160deg,#1b1c22,#2a0c11 70%);
--focus-bg:linear-gradient(135deg,#000,#1a0508);--sky:linear-gradient(#0e1020,#1d1830 70%);--ground:#2a2420}
[data-theme=ninja] h1,[data-theme=ninja] h2,[data-theme=ninja] h3{text-transform:uppercase;letter-spacing:2px}
[data-theme=ninja] h1::before{content:'✦ '}
[data-theme=ninja] .card,[data-theme=ninja] .calendar,[data-theme=ninja] .panel{border:1px solid #26272e;border-top:3px solid var(--pink)}
[data-theme=ninja] .timer{text-shadow:0 0 14px rgba(229,25,45,.7);letter-spacing:6px}
[data-theme=ninja] .bubble{border-left:3px solid var(--pink)}
[data-theme=ninja] .day:hover,[data-theme=ninja] button:hover{background:#2b2c33}
[data-theme=ninja] button.primary:hover{background:#ff2d41}
[data-theme=ninja] .plantEmoji.thirsty{filter:grayscale(.8) brightness(.8)}

/* theme picker */
#authbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg-grad);color:var(--ink);min-height:100vh}
header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;flex-wrap:wrap;gap:8px}
h1{margin:0;color:var(--pink)}
h1,h2,h3{font-family:var(--font-head)}
button{font:inherit;cursor:pointer;border:1px solid var(--soft);background:var(--btn);border-radius:var(--r);padding:8px 14px;color:var(--ink)}
button:hover{background:var(--soft)}
button.primary{background:var(--pink);color:var(--on-accent);border-color:var(--pink)}
button.danger{color:var(--danger)}
#adminBadge{background:var(--pink);color:var(--on-accent);border-radius:99px;padding:4px 12px;margin-right:8px;font-size:.85rem}
main{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding:0 24px 24px;max-width:1200px;margin:auto}
.calendar,.panel{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.nav{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.nav h2{flex:1;text-align:center;margin:0}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.dow div{text-align:center;font-weight:bold;color:var(--pink);padding:4px 0}
.day{min-height:84px;border:1px solid var(--soft);border-radius:10px;padding:6px;cursor:pointer;position:relative;background:var(--cell);font-size:.9rem;overflow:hidden}
.day:hover{background:var(--soft)}
.day.empty{visibility:hidden}
.day.today{outline:2px solid var(--pink)}
.day.selected{background:var(--soft)}
.day .n{font-weight:bold}
.day .preview{font-size:.72rem;margin-top:4px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.day.has::after{content:var(--has-icon);position:absolute;top:4px;right:6px}
.panel h3{margin-top:0;color:var(--pink)}
.msg{font-size:1.15rem;line-height:1.6;white-space:pre-wrap;min-height:60px}
textarea,input{width:100%;font:inherit;padding:10px;border:1px solid var(--soft);border-radius:var(--r);margin-bottom:8px;background:var(--cell);color:var(--ink)}
.row{display:flex;gap:8px}
.status{color:var(--pink);min-height:1.2em;margin:6px 0 0}
dialog{background:var(--card);color:var(--ink);border:none;border-radius:16px;padding:24px;box-shadow:0 10px 40px rgba(0,0,0,.25);width:min(340px,90vw)}
dialog::backdrop{background:rgba(74,43,56,.5)}
@media(max-width:800px){main{grid-template-columns:1fr}.day{min-height:56px}.day .preview{display:none}}
.day.bday{background:var(--bday-bg);border:2px solid var(--pink);font-weight:bold}
.day.bday::before{content:'🎂';position:absolute;bottom:4px;right:6px}
.panel.bday{background:var(--bday-panel);border:3px solid var(--pink);box-shadow:var(--glow)}
.panel.bday .msg{font-size:1.3rem;line-height:1.7}
.panel.bday h3{font-size:1.6rem}
.confetti{position:fixed;top:-40px;font-size:1.6rem;pointer-events:none;animation:fall linear forwards;z-index:10}
@keyframes fall{to{transform:translateY(110vh) rotate(360deg)}}

/* ===== Admin dashboard ===== */
#dash{display:grid;grid-template-columns:minmax(260px,1fr) minmax(280px,1.2fr) minmax(260px,320px);gap:18px;padding:0 24px 24px;max-width:1400px;margin:auto;align-items:start}
#dash[hidden]{display:none}
.dcol{display:flex;flex-direction:column;gap:18px;min-width:0}
.card{background:var(--card);border-radius:var(--r-lg);padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px;color:var(--pink)}
.small{font-size:.85rem;color:var(--muted)}
.center{justify-content:center;flex-wrap:wrap;margin-top:10px}
.row input[type=number]{width:70px}
.row input{margin-bottom:0}
select,input[type=number]{font:inherit;background:var(--cell);color:var(--ink);border:1px solid var(--soft);border-radius:8px;padding:4px 6px;width:auto}
.focus{text-align:center}
.charwrap{display:flex;align-items:center;gap:10px;justify-content:center}
.char{font-size:3.6rem;animation:bob 2.4s ease-in-out infinite}
.char.focus{animation:type .5s ease-in-out infinite}
.char.happy{animation:jump .6s ease-in-out 4}
.bubble{background:var(--soft);border-radius:14px;padding:8px 12px;font-size:.9rem;text-align:left;max-width:180px;position:relative}
.bubble::before{content:'';position:absolute;left:-8px;top:50%;margin-top:-6px;border:6px solid transparent;border-right-color:var(--soft);border-left:0}
@keyframes bob{50%{transform:translateY(-6px)}}
@keyframes type{50%{transform:translateY(-2px) rotate(-3deg)}}
@keyframes jump{50%{transform:translateY(-16px) scale(1.15)}}
.modeLabel{margin-top:8px;font-weight:bold;color:var(--pink)}
.timer{font-size:3.6rem;font-weight:bold;font-variant-numeric:tabular-nums;letter-spacing:2px}
.dots{display:flex;justify-content:center;gap:8px;font-size:1.2rem;margin-bottom:4px}
.working{margin-top:10px;font-size:.9rem;color:var(--muted)}
body.in-focus{background:var(--focus-bg)}
.plantBox{position:relative;height:170px;display:flex;align-items:flex-end;justify-content:center;background:var(--sky);border-radius:14px;overflow:hidden}
.plantBox::after{content:'';position:absolute;bottom:0;left:0;right:0;height:26px;background:var(--ground)}
.plantEmoji{position:relative;z-index:1;margin-bottom:14px;line-height:1;transition:font-size .6s;transform-origin:bottom}
.plantEmoji.thirsty{filter:grayscale(.6);animation:droop 3s ease-in-out infinite}
@keyframes droop{50%{transform:rotate(-6deg)}}
.plantBox.grow .plantEmoji{animation:pop 1.2s ease}
@keyframes pop{40%{transform:scale(1.35)}}
.drop{position:absolute;top:-20px;font-size:1.2rem;animation:drip 1.6s ease-in forwards;z-index:2}
@keyframes drip{to{top:120px;opacity:.2}}
.plantName{text-align:center;font-weight:bold;margin:8px 0 4px}
.bar{height:12px;background:var(--soft);border-radius:99px;overflow:hidden;margin:4px 0}
.bar div{height:100%;background:linear-gradient(90deg,#7ed957,#2fb36b);width:0;transition:width .6s}
.plant .small{text-align:center}
.list{list-style:none;padding:0;margin:10px 0 0;display:flex;flex-direction:column;gap:6px}
.list li{display:flex;align-items:center;gap:8px;background:var(--cell);border:1px solid var(--soft);border-radius:10px;padding:6px 8px}
.list li.done .grow{text-decoration:line-through;opacity:.5}
.list .grow{flex:1;word-break:break-word}
.list button{padding:2px 8px}
#journal{margin-top:8px;margin-bottom:0}
.row button{white-space:nowrap}
#calSlot{min-width:0}

/* mini calendar (admin) */
body.admin main.mini{display:block;padding:0;margin:0;max-width:none}
body.admin main.mini .calendar{padding:12px}
body.admin main.mini .panel{display:none}
body.admin main.mini .nav h2{font-size:1rem}
body.admin main.mini .nav button{padding:3px 8px}
body.admin main.mini #todayBtn{display:none}
body.admin main.mini .grid{gap:3px}
body.admin main.mini .day{min-height:30px;padding:3px;font-size:.75rem;border-radius:6px}
body.admin main.mini .day .preview{display:none}
body.admin main.mini .day.has::after{font-size:.6rem;top:1px;right:2px}
body.admin main.mini .day.bday::before{font-size:.6rem;bottom:1px;right:2px}
body.admin main.mini .dow div{font-size:.65rem}
/* expanded = full page */
body.admin main.expanded{position:fixed;inset:0;z-index:200;margin:0;max-width:none;background:var(--bg-grad);overflow:auto;padding:24px;display:grid;grid-template-columns:2fr 1fr;gap:20px;align-content:start}
body.noscroll{overflow:hidden}
@media(max-width:1000px){#dash{grid-template-columns:1fr 1fr}.dcol:last-child{grid-column:1/-1}}
@media(max-width:700px){#dash{grid-template-columns:1fr;padding:0 12px 24px}body.admin main.expanded{grid-template-columns:1fr;padding:12px}}

/* ===== Theme dropdown ===== */
.tp{position:relative}
#tpBtn{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;border:1px solid var(--soft);background:var(--btn);box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s}
#tpBtn:hover{transform:translateY(-1px)}
#tpBtn .caret{font-size:.8rem;opacity:.7;transition:transform .2s}
#tpBtn[aria-expanded=true] .caret{transform:rotate(180deg)}
#tpMenu{position:absolute;right:0;top:calc(100% + 8px);z-index:1000;list-style:none;margin:0;padding:6px;min-width:250px;background:var(--card);border:1px solid var(--soft);border-radius:var(--r-lg);box-shadow:var(--shadow),0 14px 40px rgba(0,0,0,.18);animation:menuIn .18s ease}
#tpMenu[hidden]{display:none}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scale(.98)}}
#tpMenu li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:calc(var(--r-lg) - 6px);cursor:pointer;transition:background .15s}
#tpMenu li:hover{background:var(--soft)}
#tpMenu li[aria-selected=true]{background:var(--soft);box-shadow:inset 3px 0 0 var(--pink)}
#tpMenu .t{display:flex;flex-direction:column;line-height:1.25}
#tpMenu small{color:var(--muted);font-size:.75rem}
.sw{width:30px;height:30px;border-radius:50%;flex:none;border:2px solid rgba(255,255,255,.7);box-shadow:0 1px 4px rgba(0,0,0,.3)}
#tpBtn .sw{width:20px;height:20px;border-width:1px}
.sw-pink{background:conic-gradient(#e8457c 0 33%,#ffd6e5 0 66%,#fff0f5 0)}
.sw-garden{background:conic-gradient(#2f9e4f 0 33%,#cdeac4 0 66%,#f3fbe9 0)}
.sw-ninja{background:conic-gradient(#e5192d 0 33%,#2b2c33 0 66%,#050506 0)}

/* ===== Extra polish ===== */
button{transition:background .15s,transform .1s,box-shadow .15s}
button:active{transform:scale(.96)}
button.primary{box-shadow:0 3px 10px rgba(0,0,0,.18)}
.card,.calendar,.panel{transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px)}
.day{transition:background .15s,transform .15s}
.day:hover{transform:scale(1.04)}
textarea:focus,input:focus,select:focus{outline:2px solid var(--pink);outline-offset:1px}
header{position:relative;z-index:100;backdrop-filter:blur(6px)}
h1{letter-spacing:.5px}
::selection{background:var(--pink);color:var(--on-accent)}