/* Star Planner — styles.
   Ported verbatim from the star-mode prototype, plus a login screen,
   a demo-mode banner, and a logout button. Deep-blue "star mode" night sky,
   clean light "day" mode, honey-gold + Amarant-blue accents. */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..500&family=Figtree:wght@400;500;600&family=Space+Mono:wght@700&display=swap');

:root, [data-theme="star"]{
  --bg-0:#070b1c; --bg-1:#0d1430; --bg-2:#141d42;
  --panel:rgba(21,30,64,.55); --panel-2:rgba(28,39,82,.5);
  --panel-border:rgba(150,165,235,.16); --panel-hover:rgba(30,42,86,.72);
  --ink:#e9ecff; --ink-soft:#a6afda; --ink-faint:#6e77a8;
  --gold:#f6e2a8; --gold-glow:rgba(246,226,168,.55);
  --peri:#a7b0e8; --peri-strong:#c7ccff;
  --note:rgba(246,226,168,.07); --note-border:rgba(246,226,168,.22);
  --cube:linear-gradient(180deg,#1a2450,#0f1836); --cube-line:rgba(0,0,0,.4);
  --line:rgba(150,165,235,.14); --shadow:0 18px 50px -20px rgba(0,0,0,.7); --drop:rgba(167,176,232,.16); --sky:1;
}
[data-theme="light"]{
  --bg-0:#eef1f9; --bg-1:#f6f8fd; --bg-2:#fff;
  --panel:#fff; --panel-2:#f7f9fe;
  --panel-border:rgba(30,45,95,.10); --panel-hover:#f2f5fc;
  --ink:#1b2240; --ink-soft:#55608a; --ink-faint:#97a0c0;
  --gold:#c1912a; --gold-glow:rgba(193,145,42,.22);
  --peri:#5769b0; --peri-strong:#43539a;
  --note:#fdf7e6; --note-border:rgba(193,145,42,.28);
  --cube:linear-gradient(180deg,#2a3566,#1b2450); --cube-line:rgba(0,0,0,.25);
  --line:rgba(30,45,95,.09); --shadow:0 14px 40px -22px rgba(35,50,100,.35); --drop:rgba(87,105,176,.10); --sky:0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Figtree',system-ui,sans-serif; color:var(--ink); min-height:100vh;
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(120,96,180,calc(.30*var(--sky))), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(60,90,170,calc(.28*var(--sky))), transparent 55%),
    linear-gradient(170deg,var(--bg-1),var(--bg-0) 60%,var(--bg-0));
  -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:color .5s,background .6s}
#sky{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:var(--sky); transition:opacity .6s}
.wrap{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:36px 22px 90px}

/* header */
.topbar{display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap}
.controls{display:flex; gap:8px; align-items:center}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--panel-border);
  color:var(--ink-soft); border-radius:999px; padding:9px 14px 9px 11px; font-size:13px; font-weight:500; cursor:pointer;
  backdrop-filter:blur(8px); box-shadow:var(--shadow); transition:background .3s,color .3s,transform .15s}
.btn:hover{background:var(--panel-hover); color:var(--ink)} .btn:active{transform:scale(.97)}
.btn:focus-visible{outline:2px solid var(--peri); outline-offset:2px}
.btn svg{width:16px; height:16px}
.viewseg{display:inline-flex; background:var(--panel); border:1px solid var(--panel-border); border-radius:999px; padding:3px; box-shadow:var(--shadow); backdrop-filter:blur(8px)}
.viewseg button{border:none; background:transparent; color:var(--ink-soft); font-size:13px; font-weight:500; padding:7px 14px; border-radius:999px; cursor:pointer; transition:all .2s}
.viewseg button.on{background:var(--panel-hover); color:var(--ink)}
.viewseg button:focus-visible{outline:2px solid var(--peri)}

/* flip clock */
.clock{display:flex; flex-direction:column; gap:9px}
.cdate{font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:clamp(22px,4.6vw,30px); color:var(--ink); letter-spacing:-.01em; line-height:1.1}
.ctime{display:flex; align-items:center; gap:4px; perspective:280px}
.cube{width:30px; height:40px; background:var(--panel); border:1px solid var(--panel-border); border-radius:7px;
  display:grid; place-items:center; position:relative; box-shadow:var(--shadow); transform-style:preserve-3d; backdrop-filter:blur(8px)}
.cube:after{content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line)}
.cube .fv{font-family:'Space Mono',monospace; font-weight:700; font-size:22px; color:var(--gold); text-shadow:0 0 12px var(--gold-glow)}
.colon{font-family:'Space Mono',monospace; font-weight:700; color:var(--ink-faint); font-size:18px; margin:0 1px}

.greeting{margin:24px 0 22px; font-family:'Fraunces'; font-optical-sizing:auto}
.greeting .hi{font-style:italic; font-weight:400; font-size:clamp(26px,5vw,40px); line-height:1.05}
.greeting .name{font-style:italic; color:var(--gold); text-shadow:0 0 22px var(--gold-glow); outline:none; border-radius:6px; padding:0 2px}
.greeting .name:focus{box-shadow:0 0 0 2px var(--peri)}
.greeting .sub{margin-top:7px; font-family:'Figtree'; font-size:14.5px; color:var(--ink-soft)}

.panel{background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; padding:20px 22px; box-shadow:var(--shadow); backdrop-filter:blur(10px); margin-bottom:16px}
.eyebrow{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); display:flex; align-items:center; gap:8px}
.eyebrow .spark{color:var(--gold); filter:drop-shadow(0 0 6px var(--gold-glow))}
h2.sec{font-family:'Fraunces'; font-weight:500; font-size:20px; margin:6px 0 0; letter-spacing:-.01em}

/* generic rows + strike-through completion */
.row{display:flex; align-items:center; gap:11px; padding:8px 6px; border-radius:10px; transition:background .16s}
.row:hover{background:var(--panel-2)}
.txt{flex:1; font-size:14.5px; color:var(--ink)}
.tog{cursor:pointer; border-radius:5px; transition:color .15s; text-decoration-thickness:1.5px}
.tog:hover{color:var(--peri-strong)}
.tog:focus-visible{outline:2px solid var(--peri); outline-offset:2px}
.done > .tog, .done .txt.tog{color:var(--ink-faint); text-decoration:line-through; text-decoration-color:var(--gold)}
.row .tag{font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--peri);
  background:color-mix(in srgb,var(--peri) 14%,transparent); padding:3px 8px; border-radius:999px; flex:none}

.ib{flex:none; width:26px; height:26px; border-radius:8px; border:none; cursor:pointer; background:transparent; color:var(--ink-faint);
  display:grid; place-items:center; opacity:0; transition:all .18s}
.row:hover .ib, .slot:hover .ib, .task:hover .ib, .point:hover .ib, .project:hover .p-del, .chip:hover .ib{opacity:1}
.ib:hover{background:var(--panel-hover); color:var(--ink)}
.ib.star.on{opacity:1; color:var(--gold); filter:drop-shadow(0 0 5px var(--gold-glow))}
.ib.today.on{opacity:1; color:var(--peri)}
.ib:focus-visible{outline:2px solid var(--peri); outline-offset:1px; opacity:1}
.ib svg{width:15px; height:15px}

input.line{flex:1; background:transparent; border:none; outline:none; font-family:'Figtree'; font-size:14.5px; color:var(--ink);
  padding:8px 0; border-bottom:1px solid transparent; transition:border-color .2s}
input.line::placeholder{color:var(--ink-faint)} input.line:focus{border-bottom-color:var(--peri)}
.addrow{display:flex; align-items:center; gap:12px; padding:4px 6px}
.addrow .plus{color:var(--ink-faint); width:20px; text-align:center; display:grid; place-items:center}
.empty{color:var(--ink-faint); font-size:14px; font-style:italic; font-family:'Fraunces'; padding:2px 6px 6px}

/* from yesterday */
.yest .eyebrow{color:var(--peri)} .yest{border-color:color-mix(in srgb,var(--peri) 30%,var(--panel-border))}

/* today slots */
.slots{margin-top:14px; display:flex; flex-direction:column; gap:9px}
.slot{display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:13px; border:1px dashed var(--panel-border); background:var(--panel-2)}
.slot.filled{border-style:solid; border-color:var(--gold-glow); background:color-mix(in srgb,var(--gold) 7%,transparent)}
.slot .num{font-family:'Fraunces'; font-style:italic; font-size:19px; color:var(--gold); width:20px; text-align:center; flex:none; opacity:.85}
.slot .txt{font-size:15.5px} .slot input.line{font-size:15px}
.subhead{margin:18px 0 8px; font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--ink-faint); text-transform:uppercase}
.also-list{display:flex; flex-direction:column; gap:1px}

/* capture */
.cap-add{display:flex; align-items:center; gap:12px; margin-top:12px; padding:6px 8px; border-radius:12px; background:var(--panel-2); border:1px solid var(--panel-border)}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.chip{position:relative; display:flex; align-items:flex-start; gap:6px; max-width:100%; background:var(--note); border:1px solid var(--note-border);
  border-radius:4px 12px 12px 12px; padding:9px 10px 9px 12px; box-shadow:var(--shadow); cursor:grab; transition:transform .15s}
.chip:nth-child(odd){transform:rotate(-1.1deg)} .chip:nth-child(even){transform:rotate(1deg)}
.chip:hover{transform:rotate(0) translateY(-1px)} .chip.dragging{opacity:.5}
.chip .ctxt{font-size:13.5px; line-height:1.4; color:var(--ink); max-width:230px}
.chip .cap-acts{display:flex; gap:2px; align-items:center; margin-left:2px}
.chip .ib{opacity:.55; width:24px; height:24px} .chip:hover .ib{opacity:1}
.cap-hint{margin-top:10px; font-size:12px; color:var(--ink-faint); font-style:italic; font-family:'Fraunces'}
.clink{color:var(--peri); text-decoration:underline; text-decoration-color:color-mix(in srgb,var(--peri) 45%,transparent); text-underline-offset:2px; word-break:break-word}
.clink:hover{color:var(--peri-strong)}
.cap-attach{opacity:.55} .cap-add:hover .cap-attach{opacity:1}
.today.drop, .project.drop{box-shadow:var(--shadow),0 0 0 2px var(--peri)}

/* obvious job switch */
.switch-label{font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:24px 0 10px}
.switch{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.sw{--acc:var(--gold); position:relative; border:1px solid var(--panel-border); background:#fbfaf7; border-radius:16px; padding:16px 18px; min-height:88px;
  cursor:pointer; transition:all .22s; display:flex; align-items:center; justify-content:center; gap:9px; opacity:.5; box-shadow:var(--shadow)}
.sw:hover{opacity:.82}
.sw.on{opacity:1; border-color:color-mix(in srgb,var(--acc) 60%,transparent); box-shadow:0 0 30px -8px var(--acc), 0 0 0 1px color-mix(in srgb,var(--acc) 45%,transparent), var(--shadow)}
.swlogo{max-height:56px; max-width:100%; object-fit:contain; display:block}
.sw .swname{color:#333; font-family:'Fraunces'; font-weight:500; font-size:17px}
.sw:focus-visible{outline:2px solid var(--peri); outline-offset:2px}

/* projects */
.project{margin-bottom:10px; border:1px solid var(--panel-border); border-radius:16px; background:var(--panel); box-shadow:var(--shadow); overflow:hidden}
.p-head{display:flex; align-items:center; gap:10px; padding:15px 16px; cursor:pointer; flex-wrap:wrap}
.chev{flex:none; color:var(--ink-faint); display:grid; place-items:center; transition:transform .2s}
.chev svg{width:16px; height:16px}
.project.open .chev{transform:rotate(90deg)}
.project h3{font-family:'Fraunces'; font-weight:500; font-size:17.5px; margin:0; flex:1; min-width:120px; letter-spacing:-.01em; outline:none; border-radius:6px}
.project h3:focus{box-shadow:0 0 0 2px var(--peri)}
.due-wrap{display:inline-flex; align-items:center; gap:6px; flex:none}
.due-tag{font-size:9.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.due{font-family:'Figtree'; font-size:12.5px; font-style:italic; color:var(--peri); outline:none; border-bottom:1px dashed transparent; min-width:14px}
.due:focus{border-bottom-color:var(--peri)}
.due:empty:before{content:'add…'; color:var(--ink-faint); font-style:italic}
.p-meta{font-size:12px; color:var(--ink-faint); flex:none}
.p-body{padding:0 16px 14px; display:none} .project.open .p-body{display:block}

.points{display:flex; flex-direction:column; gap:6px; margin:2px 0 10px}
.point{display:flex; align-items:flex-start; gap:8px; padding:8px 10px; border-radius:9px; background:var(--note); border:1px solid var(--note-border)}
.point .ptxt{flex:1; font-size:13.5px; line-height:1.45; color:var(--ink)}
.point .pdot{color:var(--gold); font-size:14px; line-height:1.4; flex:none}
.note{width:100%; resize:vertical; min-height:0; height:34px; background:transparent; border:none; outline:none; color:var(--ink-soft);
  font-family:'Figtree'; font-size:13.5px; line-height:1.5; padding:2px 0 10px; font-style:italic}
.note::placeholder{color:var(--ink-faint)}
hr.thin{border:none; border-top:1px solid var(--line); margin:6px 0 8px}
.tasks{display:flex; flex-direction:column; gap:1px}
.task{display:flex; align-items:center; gap:11px; padding:7px 6px; border-radius:10px; transition:background .16s}
.task:hover{background:var(--panel-2)} .task.dragging{opacity:.4} .task.over{box-shadow:inset 0 2px 0 var(--peri)}
.grip{flex:none; color:var(--ink-faint); cursor:grab; opacity:0; display:grid; place-items:center; transition:opacity .18s}
.task:hover .grip{opacity:.6} .grip svg{width:14px; height:14px}

.add-project{margin-top:8px; background:transparent; border:1px dashed var(--panel-border); color:var(--ink-soft); border-radius:14px;
  padding:12px; width:100%; cursor:pointer; font-size:13.5px; font-weight:500; transition:all .2s; display:inline-flex; gap:8px; align-items:center; justify-content:center}
.add-project:hover{background:var(--panel-2); color:var(--ink); border-color:var(--peri)}

/* waiting on / shared with partner */
.ib.wait.on{opacity:1; color:var(--peri)}
.ib.p-share.on{opacity:1; color:var(--peri)}
.project:hover .p-share{opacity:1}
.wtag{font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--peri);
  background:color-mix(in srgb,var(--peri) 14%,transparent); padding:3px 8px; border-radius:999px; flex:none}
.task.waiting{background:color-mix(in srgb,var(--peri) 6%,transparent)}

/* partner view — minimalist */
.partner .pcard{padding:20px 22px}
.partner .phelp{border-color:color-mix(in srgb,var(--peri) 28%,var(--panel-border))}
.peyebrow{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:2px}
.partner .plist{display:flex; flex-direction:column; gap:1px; margin-top:6px}
.pulse{display:flex; flex-direction:column; gap:10px; margin-top:8px}
.pulseitem{border:1px solid var(--panel-border); border-radius:12px; padding:13px 15px; background:var(--panel-2)}
.pi-head{display:flex; align-items:center; gap:11px}
.pi-dot{width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 9px currentColor}
.pi-title{flex:1; font-family:'Fraunces'; font-weight:500; font-size:16px; color:var(--ink)}
.pi-due{font-size:12px; font-style:italic; color:var(--peri)}
.pi-meta{font-size:12px; color:var(--ink-faint); flex:none}
.pi-waits{margin-top:10px; padding-top:8px; border-top:1px solid var(--line)}
.wdot{width:7px; height:7px; border-radius:50%; flex:none}
.wcheck{flex:none; width:20px; height:20px; border-radius:6px; border:1.6px solid var(--peri); background:transparent;
  cursor:pointer; display:grid; place-items:center; color:#fff; padding:0; transition:all .15s}
.wcheck:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--peri) 18%,transparent)}
.wcheck svg{width:13px; height:13px}
.wrow{gap:10px}

/* screenshot attachments (partner questions) */
.qshot{display:block; max-width:180px; max-height:130px; border-radius:10px; border:1px solid var(--panel-border); margin:6px 0 2px 36px}
.qattach{margin-left:2px}

/* documents to sign */
.dlist{display:flex; flex-direction:column; gap:8px; margin-top:6px}
.drow{display:flex; align-items:center; gap:11px; flex-wrap:wrap; padding:11px 13px; border-radius:12px; border:1px solid var(--panel-border); background:var(--panel-2)}
.drow.signed{border-color:var(--gold-glow); background:color-mix(in srgb,var(--gold) 6%,var(--panel-2))}
.drow:hover .ib{opacity:1}
.dname{flex:1; min-width:140px; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink)}
.dname svg{width:16px; height:16px; color:var(--ink-faint); flex:none}
.dstatus{font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:3px 9px; border-radius:999px; flex:none;
  color:var(--peri); background:color-mix(in srgb,var(--peri) 14%,transparent)}
.drow.signed .dstatus{color:var(--gold); background:color-mix(in srgb,var(--gold) 16%,transparent)}
.dlink{font-size:12.5px; color:var(--peri); text-decoration:none; border-bottom:1px dashed color-mix(in srgb,var(--peri) 45%,transparent); flex:none; font-style:italic}
.dlink:hover{color:var(--peri-strong)}
.dbtn{flex:none; background:color-mix(in srgb,var(--peri) 12%,var(--panel-2)); border:1px solid var(--panel-border); color:var(--ink);
  border-radius:10px; padding:7px 12px; font-family:'Figtree'; font-size:12.5px; font-weight:500; cursor:pointer; display:inline-flex; gap:7px; align-items:center; transition:all .2s}
.dbtn:hover{border-color:var(--peri); background:color-mix(in srgb,var(--peri) 20%,var(--panel-2))}
.dbtn svg{width:14px; height:14px}
.dadd{margin-top:12px}

/* reflection */
.moods{display:flex; gap:9px; margin:14px 0 6px; flex-wrap:wrap}
.mood{background:var(--panel-2); border:1px solid var(--panel-border); color:var(--ink-soft); border-radius:12px; padding:10px 16px;
  font-family:'Figtree'; font-size:14px; cursor:pointer; transition:all .2s}
.mood:hover{color:var(--ink); border-color:var(--peri)}
.mood.on{color:var(--ink); background:color-mix(in srgb,var(--gold) 13%,transparent); border-color:var(--gold-glow); box-shadow:0 0 18px -6px var(--gold-glow)}
.mood:focus-visible{outline:2px solid var(--peri)}
.rlabel{margin:16px 0 6px; font-size:13.5px; color:var(--ink-soft)}
.reflect textarea{width:100%; min-height:64px; resize:vertical; background:var(--panel-2); border:1px solid var(--panel-border); border-radius:12px;
  padding:12px 14px; color:var(--ink); font-family:'Figtree'; font-size:14px; line-height:1.5; outline:none}
.reflect textarea:focus{border-color:var(--peri)} .reflect textarea::placeholder{color:var(--ink-faint)}

/* calendar */
.calnav{display:flex; align-items:center; justify-content:space-between; margin:6px 0 16px}
.calnav h2{font-family:'Fraunces'; font-weight:500; font-size:22px; margin:0}
.calnav button{background:var(--panel-2); border:1px solid var(--panel-border); color:var(--ink-soft); width:36px; height:36px; border-radius:10px; cursor:pointer; display:grid; place-items:center}
.calnav button:hover{color:var(--ink); border-color:var(--peri)} .calnav button svg{width:16px; height:16px}
.calgrid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.cah{text-align:center; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding-bottom:4px}
.cell{aspect-ratio:1; border-radius:12px; border:1px solid transparent; background:var(--panel-2); padding:8px; cursor:pointer;
  display:flex; flex-direction:column; justify-content:space-between; transition:all .18s; position:relative}
.cell:hover{border-color:var(--peri)} .cell.blank{background:transparent; cursor:default; border:none}
.cell.today{border-color:var(--gold-glow)}
.cell.sel{background:color-mix(in srgb,var(--gold) 14%,transparent); border-color:var(--gold)}
.cell .dn{font-family:'Figtree'; font-size:13px; color:var(--ink-soft)} .cell.today .dn{color:var(--gold)}
.cell .marks{display:flex; align-items:center; gap:4px} .cell .fin{font-size:11px; color:var(--gold); filter:drop-shadow(0 0 4px var(--gold-glow))}
.cell .refl{font-size:10px; color:var(--peri)}
/* a little star per completed task + a soft glow on productive days */
.cell-top{display:flex; align-items:center; justify-content:space-between; gap:4px}
.cell .crefl{font-size:11px; color:var(--peri)}
.cell.has-fin{background:color-mix(in srgb,var(--gold) 11%,var(--panel-2)); border-color:var(--gold-glow)}
.cell.has-fin.sel{background:color-mix(in srgb,var(--gold) 20%,transparent)}
.cstars{display:flex; flex-wrap:wrap; gap:3px 4px; align-content:flex-end; margin-top:4px; line-height:1}
.cstar{font-size:13px; color:var(--gold); filter:drop-shadow(0 0 4px var(--gold-glow)); transform-origin:center; animation:twinkle 2.4s ease-in-out infinite}
.cmore{font-size:10px; color:var(--ink-faint); align-self:flex-end; margin-left:2px}
@keyframes twinkle{ 0%,100%{transform:scale(1); opacity:.82} 50%{transform:scale(1.28); opacity:1} }

/* "three for three" sticker-stamp reward */
.stamp{display:flex; justify-content:center; margin:20px 2px 4px; animation:stampPop .55s cubic-bezier(.18,1.5,.4,1)}
.stamp-in{transform:rotate(-7deg); border:2.5px solid var(--gold); color:var(--gold); border-radius:16px; padding:12px 26px; text-align:center;
  background:color-mix(in srgb,var(--gold) 9%,transparent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 13%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--gold) 32%,transparent);
  font-family:'Fraunces'}
.stamp-star{display:block; font-size:20px; filter:drop-shadow(0 0 7px var(--gold-glow)); animation:twinkle 2s ease-in-out infinite; transform-origin:center}
.stamp-main{display:block; font-weight:600; font-size:20px; font-style:italic; letter-spacing:.01em; line-height:1.1}
.stamp-sub{display:block; font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; font-family:'Figtree'}
@keyframes stampPop{ 0%{transform:scale(.3) rotate(6deg); opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1); opacity:1} }
@media (prefers-reduced-motion:reduce){ .cstar,.stamp,.stamp-star{animation:none !important} }
.daydetail{margin-top:18px}
.daydetail h3{font-family:'Fraunces'; font-weight:500; font-size:19px; margin:0 0 4px}
.dd-mood{display:inline-block; font-size:13px; color:var(--peri); background:color-mix(in srgb,var(--peri) 12%,transparent); padding:4px 12px; border-radius:999px; margin:6px 0}
.dd-improve{font-style:italic; font-family:'Fraunces'; color:var(--ink-soft); font-size:15px; line-height:1.5; margin:8px 0 14px}
.dd-fin{display:flex; flex-direction:column; gap:5px}
.dd-fin .fitem{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--ink)}
.dd-fin .fitem .fstar{color:var(--gold); filter:drop-shadow(0 0 4px var(--gold-glow))}
.dd-fin .fitem .tag{font-size:10px; color:var(--peri); text-transform:uppercase; letter-spacing:.05em}

footer{margin-top:30px; display:flex; justify-content:center}
.reset{background:none; border:none; color:var(--ink-faint); font-size:12px; cursor:pointer; opacity:.7; transition:all .2s}
.reset:hover{opacity:1; color:var(--peri)}
.loading{text-align:center; color:var(--ink-soft); font-family:'Fraunces'; font-style:italic; padding:80px 0; font-size:18px}

/* ---- login screen (live mode) ---- */
.login-wrap{position:relative; z-index:1; max-width:400px; margin:0 auto; padding:9vh 22px 90px; display:flex; flex-direction:column; align-items:center}
.login-mark{font-family:'Fraunces'; font-style:italic; font-weight:500; font-size:34px; color:var(--gold); text-shadow:0 0 22px var(--gold-glow); margin-bottom:4px}
.login-sub{font-family:'Figtree'; font-size:14px; color:var(--ink-soft); margin-bottom:26px}
.login-card{width:100%; background:var(--panel); border:1px solid var(--panel-border); border-radius:20px; padding:26px 24px; box-shadow:var(--shadow); backdrop-filter:blur(10px)}
.login-card label{display:block; font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px}
.login-card input{width:100%; background:var(--panel-2); border:1px solid var(--panel-border); border-radius:12px; padding:12px 14px;
  color:var(--ink); font-family:'Figtree'; font-size:15px; outline:none; margin-bottom:16px; transition:border-color .2s}
.login-card input:focus{border-color:var(--peri)}
.login-card button{width:100%; background:color-mix(in srgb,var(--gold) 16%,var(--panel-2)); border:1px solid var(--gold-glow); color:var(--ink);
  border-radius:12px; padding:13px; font-family:'Figtree'; font-size:15px; font-weight:600; cursor:pointer; transition:all .2s}
.login-card button:hover{background:color-mix(in srgb,var(--gold) 26%,var(--panel-2))}
.login-card button:disabled{opacity:.6; cursor:default}
.login-err{color:#ff9d9d; font-size:13px; margin-top:12px; min-height:16px; text-align:center}

/* demo banner + logout */
.demo-banner{position:relative; z-index:1; max-width:920px; margin:14px auto -6px; padding:9px 16px; border-radius:12px;
  background:color-mix(in srgb,var(--peri) 12%,var(--panel)); border:1px solid var(--panel-border); color:var(--ink-soft);
  font-size:12.5px; text-align:center; backdrop-filter:blur(8px)}
.demo-banner b{color:var(--ink)}

/* ---- Sunshine (default) theme + Star mode -----------------------------------
   Sunshine is the DEFAULT for everyone (login, Rach, Yanaki): a warm, minimal,
   sunshine-y surface with only a faint static star homage — no full starfield.
   Star mode (the deep-blue animated night sky) is an OPTION both people can
   toggle into. */
[data-theme="sunshine"]{
  --bg-0:#efe8db; --bg-1:#faf6ee; --bg-2:#ffffff;
  --panel:#fffdf9; --panel-2:#f5efe4;
  --panel-border:rgba(90,74,48,.13); --panel-hover:#f7f1e6;
  --ink:#34302a; --ink-soft:#6d6456; --ink-faint:#a89d89;
  --gold:#a86a1c; --gold-glow:rgba(190,142,74,.26);
  --peri:#6f6650; --peri-strong:#524a37;
  --note:#faf3e3; --note-border:rgba(168,106,28,.26);
  --cube:linear-gradient(180deg,#2a3566,#1b2450); --cube-line:rgba(0,0,0,.25);
  --line:rgba(90,74,48,.11); --shadow:0 16px 42px -24px rgba(90,70,42,.30); --drop:rgba(168,120,50,.12); --sky:0;
}
/* owner: light warm ivory with a whisper of sun */
[data-theme="sunshine"] body{
  background:
    radial-gradient(1000px 600px at 86% -16%, rgba(226,176,118,.15), transparent 62%),
    radial-gradient(720px 520px at 3% 112%,  rgba(206,182,146,.12), transparent 58%),
    linear-gradient(167deg,#fdfbf6,#f7f2e8 58%,#f2ece0);
}
[data-theme="sunshine"] #sky{ display:none !important; }
[data-theme="sunshine"] body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.38; background-repeat:no-repeat;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 16%, var(--gold-glow), transparent 62%),
    radial-gradient(1.2px 1.2px at 24% 76%, var(--peri),      transparent 62%),
    radial-gradient(1.3px 1.3px at 62% 15%, var(--gold-glow), transparent 62%),
    radial-gradient(1.2px 1.2px at 84% 40%, var(--peri),      transparent 62%),
    radial-gradient(1.3px 1.3px at 55% 86%, var(--gold-glow), transparent 62%),
    radial-gradient(1.1px 1.1px at 31% 46%, var(--peri),      transparent 62%),
    radial-gradient(1.2px 1.2px at 90% 74%, var(--gold-glow), transparent 62%);
}
/* Yanaki + login: even more minimal — flatter, cleaner, barely-there stars */
[data-theme="sunshine"][data-lane="partner"] body{
  background:linear-gradient(172deg,#fdfcf9,#f8f3ec 70%,#f4efe4);
}
[data-theme="sunshine"][data-lane="partner"] body::before{ opacity:.18 }

/* ---- partner two-way inputs (answers / notes / document context) ---- */
.qanswer, .hnote{ display:block; width:calc(100% - 40px); margin:2px 0 8px 36px;
  background:var(--panel-2); border:1px solid var(--panel-border); border-radius:11px; padding:9px 12px;
  color:var(--ink); font-family:'Figtree'; font-size:13.5px; line-height:1.45; outline:none; resize:vertical; min-height:36px }
.qanswer:focus, .hnote:focus{ border-color:var(--peri) }
.qanswer::placeholder, .hnote::placeholder{ color:var(--ink-faint); font-style:italic }
.replyshown{ margin:2px 0 8px 36px; font-size:13.5px; color:var(--ink); line-height:1.5;
  border-left:2px solid var(--gold-glow); padding:2px 0 2px 11px }
.replyshown b{ display:block; color:var(--gold); font-weight:600; font-size:10.5px; letter-spacing:.06em;
  text-transform:uppercase; margin-bottom:3px }
.dnote{ flex-basis:100%; margin:3px 0 0 24px; font-size:12.5px; color:var(--ink-soft); font-style:italic; line-height:1.5 }
.dnote-input{ flex-basis:100%; margin:7px 0 0 24px; background:var(--panel-2); border:1px solid var(--panel-border);
  border-radius:10px; padding:7px 11px; color:var(--ink); font-family:'Figtree'; font-size:12.5px; outline:none }
.dnote-input:focus{ border-color:var(--peri) }
.dnote-input::placeholder{ color:var(--ink-faint); font-style:italic }

@media (max-width:560px){ .wrap{padding:26px 15px 70px} .chip .ctxt{max-width:180px} .row .tag{display:none} .cube{width:26px;height:34px} .cube .fv{font-size:19px} }
@media (prefers-reduced-motion:reduce){ *{transition:none !important} .chip{transform:none !important} }