/* Lumi for iPhone: the Android app's night sky + glass cloud look. */
:root { --night:#161616; --text:#F4F1F8; --soft:rgba(237,232,245,.72); --faint:rgba(237,232,245,.46); --glass:rgba(255,255,255,.08);
  --glass-b:rgba(255,255,255,.15); --gold:#F2C46B; --pink:#F07FB4; --blue:#7D95FF; --purple:#B27BF2; --galaxy:none;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Roboto, "Segoe UI", sans-serif; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--night); color:var(--text); font-family:var(--font); -webkit-font-smoothing:antialiased;
  overscroll-behavior:none; -webkit-text-size-adjust:100%; }
body { overflow:hidden; }
button { font:inherit; color:inherit; }
a { color:inherit; }
#safe-probe { position:fixed; visibility:hidden; pointer-events:none; padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); }

/* sky */
#sky { position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--night); }
#sky .nebula { position:absolute; inset:-6%; background:url(/app/img/nebula.webp) center/cover no-repeat; transform:scale(1.08);
  filter:var(--galaxy); opacity:.92; animation:drift 60s ease-in-out infinite alternate; }
#sky canvas { position:absolute; inset:0; }
@keyframes drift { from { transform:scale(1.08) translate3d(-1.5%,-1%,0); } to { transform:scale(1.08) translate3d(1.5%,1%,0); } }
#app { position:fixed; inset:0; z-index:1; }
.view { position:absolute; inset:0; opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .22s ease; }
.view.in { opacity:1; transform:none; }

/* launch splash */
#launch { position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:var(--night); transition:opacity .45s ease; }
#launch img { border-radius:22px; box-shadow:0 0 40px rgba(233,238,255,.25); }
#launch p { margin:0; font-size:20px; font-weight:300; letter-spacing:.06em; color:var(--soft); }
#launch.gone { opacity:0; pointer-events:none; }

/* ---------- cloud buttons ---------- */
.cb { position:relative; flex:none; padding:0; margin:0; border:0; background:none; cursor:pointer; touch-action:manipulation; color:#fff; }
.cb:disabled { opacity:.5; }
.cb-shape { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cb-fill { fill:#fff; opacity:.06; transition:opacity .12s; }
.cb-rim { fill:none; stroke:rgba(255,255,255,.40); vector-effect:none; }
.cb-glow { fill:none; stroke:rgba(255,255,255,.12); filter:blur(1.5px); }
.cb-scrim { fill:rgba(0,0,0,.08); filter:blur(4px); }
.cb.accent .cb-fill { fill:#FFD27A; opacity:.14; }
.cb.accent .cb-rim { stroke:rgba(255,210,122,.44); }
.cb.accent .cb-glow { stroke:rgba(255,210,122,.14); }
.cb:active .cb-fill, .cb.selected .cb-fill { opacity:.14; }
.cb.accent:active .cb-fill, .cb.accent.selected .cb-fill { opacity:.26; }
.cb-icon { position:absolute; transform:translate(-50%,-50%); display:flex; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.55)); }
.cb-label { position:absolute; display:flex; align-items:center; justify-content:center; text-align:center; font-weight:600; font-size:14px;
  line-height:1.1; letter-spacing:-.01em; white-space:nowrap; text-shadow:0 1.5px 4px rgba(0,0,0,.6); }
.cb.accent .cb-label { font-weight:700; color:#FFF3D6; }
.cb-badge { position:absolute; right:14%; top:6%; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:#fff; color:#151838;
  font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; box-shadow:0 0 8px rgba(255,255,255,.45); }

/* ---------- home ---------- */
.home { position:absolute; inset:0; display:flex; flex-direction:column; padding:calc(var(--sat) + 6px) 0 calc(var(--sab) + 8px); }
.home-top { display:flex; align-items:center; gap:8px; padding:4px 12px 0 20px; min-height:56px; }
.greet { flex:1; min-width:0; margin:0; font-size:28px; font-weight:300; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; }
.writer { flex:none; width:56px; height:56px; padding:2px; border:0; background:none; border-radius:50%; cursor:pointer; -webkit-touch-callout:none; user-select:none; }
.writer:active { background:rgba(255,255,255,.08); }
.home-mid { flex:1; min-height:0; display:flex; flex-direction:column; }
.sp { min-height:0; }
.stage { position:relative; flex:none; align-self:center; display:flex; align-items:center; justify-content:center; }
.mascot-btn { border:0; padding:0; background:none; cursor:pointer; display:block; -webkit-touch-callout:none; user-select:none; touch-action:manipulation; }
.mascot { display:block; }
.reply { position:absolute; left:50%; bottom:-6px; transform:translate(-50%,8px); width:max-content; max-width:min(320px,86vw); margin:0; padding:8px 14px;
  border-radius:16px; background:rgba(22,20,32,.82); border:1px solid var(--glass-b); color:var(--text); font-size:15px; line-height:1.35; text-align:center;
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; z-index:4; box-shadow:0 6px 20px rgba(0,0,0,.35); }
.reply.show { opacity:1; transform:translate(-50%,0); }
.banner-slot { flex:none; padding:0 8px; }
.foot { margin:2px 0 4px; text-align:center; font-size:10px; color:var(--faint); letter-spacing:.02em; }
.places, .dock { display:flex; justify-content:center; align-items:flex-end; }
.places { margin-bottom:6px; }
.home.roomy .places { margin-bottom:10px; }

/* Pip */
.pip-wrap { position:absolute; right:-4px; top:2%; z-index:3; width:44px; height:44px; }
.pip { width:44px; height:44px; padding:7px; border:0; background:none; cursor:pointer; border-radius:50%; display:block; position:relative; touch-action:manipulation; }
.pip-float { display:block; animation:pip-orbit 9s ease-in-out infinite; }
.pip-look { display:block; }
.pip svg { display:block; width:30px; height:30px; overflow:visible; transition:filter .6s, opacity .6s;
  filter:drop-shadow(0 0 3px rgba(255,240,190,.9)) drop-shadow(0 0 10px rgba(255,226,140,.55)); }
.pip-eyes { transform-box:fill-box; transform-origin:50% 50%; }
.pip-eyes.blink { animation:blink .18s ease-in-out; }
@keyframes blink { 50% { transform:scaleY(.1); } }
@keyframes pip-orbit { 0%,100% { transform:translate3d(0,0,0) rotate(-6deg); } 25% { transform:translate3d(6px,-8px,0) rotate(4deg); }
  50% { transform:translate3d(-2px,-14px,0) rotate(8deg); } 75% { transform:translate3d(-7px,-5px,0) rotate(-2deg); } }
.pip.spin svg { animation:pip-spin .75s cubic-bezier(.3,1.4,.5,1); }
@keyframes pip-spin { 0% { transform:rotate(0) scale(1); } 45% { transform:rotate(200deg) scale(1.35); } 100% { transform:rotate(360deg) scale(1); } }
.pip-z { position:absolute; right:-6px; top:-8px; font-size:13px; font-weight:800; color:#e9e4ff; opacity:0; pointer-events:none; text-shadow:0 0 6px rgba(200,190,255,.7); }
.pip-z span { font-size:10px; margin-left:1px; vertical-align:6px; }
.pip.sleep svg { opacity:.62; filter:drop-shadow(0 0 2px rgba(255,240,190,.45)); }
.pip.sleep .pip-eyes rect, .pip-big.sleep .pip-eyes rect { height:3px; y:52px; }
.pip.sleep .pip-float { animation-duration:16s; }
.pip.sleep .pip-z { opacity:.9; animation:zz 3.2s ease-in-out infinite; }
@keyframes zz { 0%,100% { transform:translate3d(0,0,0); opacity:.4; } 50% { transform:translate3d(3px,-5px,0); opacity:.95; } }
.pip-say { position:absolute; right:0; bottom:calc(100% + 2px); width:max-content; max-width:190px; margin:0; padding:6px 11px; border-radius:12px;
  background:#fff8dc; color:#141414; font-weight:700; font-size:13px; line-height:1.3; box-shadow:0 4px 16px rgba(0,0,0,.35), 0 0 14px rgba(255,230,150,.35);
  opacity:0; transform:translateY(4px) scale(.95); transition:opacity .2s, transform .2s; pointer-events:none; }
.pip-say.show { opacity:1; transform:none; }

/* ---------- wrestling banner ---------- */
.wx-banner { border-radius:22px; overflow:hidden; position:relative;
  background:linear-gradient(180deg, rgba(36,26,58,.94), rgba(18,14,32,.94) 55%, rgba(11,9,21,.94)); box-shadow:0 10px 30px rgba(0,0,0,.35); }
.wx-banner::after { content:""; position:absolute; inset:0; border-radius:22px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, rgba(255,210,122,.7), rgba(255,255,255,.08) 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
.wx-head { height:44px; display:flex; align-items:center; gap:8px; padding:0 12px; background:linear-gradient(90deg,#B3141B,#6B1030 55%,#2A1745); }
.wx-dot { width:8px; height:8px; border-radius:50%; background:#FF3B3B; box-shadow:0 0 8px #FF3B3B; animation:pulse 1.4s ease-in-out infinite; flex:none; }
@keyframes pulse { 50% { opacity:.35; transform:scale(.8); } }
.wx-word { font-family:"Avenir Next Condensed","Arial Narrow",var(--font); font-stretch:condensed; font-weight:800; font-size:15px; letter-spacing:1.4px; flex:none; }
.wx-xlinks { flex:1; display:flex; justify-content:center; gap:4px; min-width:0; }
.wx-xlinks a { text-decoration:none; font-size:10px; font-weight:800; letter-spacing:.4px; padding:3px 6px; border-radius:8px;
  background:rgba(0,0,0,.28); border:1px solid color-mix(in srgb, var(--pc) 70%, transparent); color:#fff; }
.wx-round { flex:none; border:0; background:none; color:#FFE3B8; font-weight:800; font-size:12px; letter-spacing:1px; padding:8px 0 8px 4px; cursor:pointer; }
.wx-body { overflow-x:auto; overflow-y:hidden; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.wx-body::-webkit-scrollbar { display:none; }
.wx-track { display:flex; gap:10px; padding:10px; width:max-content; }
.wx-card { flex:none; display:block; text-decoration:none; border-radius:14px; overflow:hidden; background:rgba(255,255,255,.05);
  border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.wx-thumb { position:relative; background:#0d0b14; overflow:hidden; }
.wx-thumb.noimg { background:linear-gradient(160deg,#050507, color-mix(in srgb, var(--pc) 55%, transparent), #0D0B14); }
.wx-img { width:100%; height:100%; object-fit:cover; display:block; }
.wx-tile { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:linear-gradient(160deg,#050507, color-mix(in srgb, var(--pc) 55%, transparent), #0D0B14); text-align:center; padding:6px; }
.wx-ava { width:58px; height:58px; border-radius:50%; border:2px solid var(--pc); object-fit:cover; box-shadow:0 0 14px color-mix(in srgb, var(--pc) 60%, transparent); }
.wx-tile b { font-size:14px; } .wx-tile span { font-size:12px; color:var(--soft); }
.wx-tag { position:absolute; left:8px; top:8px; padding:2px 7px; border-radius:7px; font-size:10px; font-weight:800; letter-spacing:.5px; }
.wx-x { position:absolute; right:8px; top:8px; width:22px; height:22px; border-radius:50%; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; }
.wx-text { padding:8px 10px 9px; }
.wx-title { margin:0; font-size:15px; line-height:20px; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; height:40px; }
.wx-meta { margin:4px 0 0; font-size:12px; color:var(--faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---------- pages ---------- */
.page { position:absolute; inset:0; display:flex; flex-direction:column; padding-top:var(--sat); }
.page-head { display:flex; align-items:center; gap:6px; padding:8px 10px 8px 6px; min-height:60px; }
.page-titles { flex:1; min-width:0; }
.page-titles h1 { margin:0; font-size:24px; font-weight:400; letter-spacing:-.01em; }
.page-sub { margin:2px 0 0; font-size:13px; color:var(--soft); line-height:1.35; }
.page-actions { display:flex; gap:2px; }
.page-body { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 16px calc(var(--sab) + 24px); display:flex; flex-direction:column; gap:10px; }
.page-body > * { flex-shrink:0; }
.icon-btn { width:44px; height:44px; border:0; border-radius:50%; background:none; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--text); font-size:22px; flex:none; }
.icon-btn:active { background:rgba(255,255,255,.1); }
.head-lumi { display:flex; margin-right:2px; }
.card { background:rgba(255,255,255,.07); border:1px solid var(--glass-b); border-radius:20px; padding:14px 16px; display:flex; gap:12px; align-items:center; }
.card:not(.rem):not(.work):not(.wx-row) { flex-direction:column; align-items:stretch; gap:8px; }
.card-title { margin:0; font-size:16px; font-weight:500; }
.eyebrow { margin:0; font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--gold); }
.soft { color:var(--soft); } .faint { color:var(--faint); } .small { font-size:12px; } .tiny { font-size:11px; }
.card p, .page-body p { margin:0; }
.grow { flex:1; min-width:0; }
.sec { margin:8px 4px 0 !important; font-size:13px; color:var(--faint); }
.empty { color:var(--soft); text-align:center; padding:28px 12px; line-height:1.45; }
.inp { width:100%; font:inherit; font-size:16px; color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--glass-b); border-radius:14px; padding:11px 14px; outline:none; }
.inp:focus { border-color:rgba(255,210,122,.6); }
.inp::placeholder { color:var(--faint); }
.pills { display:flex; flex-wrap:wrap; gap:8px; }
.pill { border:1px solid var(--glass-b); background:rgba(255,255,255,.06); color:var(--text); border-radius:16px; padding:7px 12px; font-size:14px; cursor:pointer; }
.pill.on { background:rgba(255,210,122,.2); border-color:rgba(255,210,122,.6); color:#FFF3D6; }
.pill[style*="--pc"].on { background:color-mix(in srgb, var(--pc) 30%, transparent); border-color:var(--pc); }
.chip { border:1px solid var(--glass-b); background:rgba(255,255,255,.06); border-radius:14px; padding:6px 10px; font-size:13px; display:inline-flex; gap:5px; align-items:center; cursor:pointer; color:var(--text); }
.row-between { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.row-end { display:flex; justify-content:flex-end; }
.link-btn { border:0; background:none; color:var(--soft); text-decoration:underline; font-size:13px; padding:10px; align-self:center; cursor:pointer; }
.banner-note { display:flex; gap:10px; align-items:flex-start; padding:10px 14px; border-radius:16px; background:rgba(242,196,107,.1); border:1px solid rgba(242,196,107,.3); font-size:13px; color:var(--soft); line-height:1.4; }
.banner-note .ic { flex:none; color:var(--gold); margin-top:1px; }
.rem-dot { width:9px; height:9px; border-radius:50%; background:var(--pink); flex:none; }
.rem.done { opacity:.6; } .rem.done .rem-dot { background:var(--faint); }
.rem-t, .work-t { font-size:16px; margin:0 0 2px !important; }
.status-pill { border:1px solid var(--sc); color:var(--sc); background:color-mix(in srgb, var(--sc) 14%, transparent); border-radius:14px; padding:6px 10px; font-size:13px; font-weight:600; cursor:pointer; flex:none; }
.work.done .work-t { text-decoration:line-through; color:var(--soft); }
.add-row { display:flex; gap:10px; align-items:center; position:sticky; bottom:0; padding:8px 0; }
.list { display:flex; flex-direction:column; gap:10px; }
.timeline { display:flex; flex-direction:column; }
.tl-row { display:flex; gap:12px; }
.tl-rail { width:12px; display:flex; flex-direction:column; align-items:center; padding-top:6px; flex:none; }
.tl-rail span { width:9px; height:9px; border-radius:50%; }
.tl-row.ms .tl-rail span { width:12px; height:12px; box-shadow:0 0 8px rgba(242,196,107,.7); }
.tl-rail i { width:1px; flex:1; background:rgba(255,255,255,.2); margin-top:4px; min-height:30px; }
.tl-body { padding-bottom:14px; flex:1; }
.tl-t { font-size:15px; line-height:20px; }
.tl-row.ms .tl-t { font-weight:600; }

/* wrestling page */
.acct-row { display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 6px; margin:0 -16px; padding-left:16px; padding-right:16px; }
.acct-row::-webkit-scrollbar { display:none; }
.acct { flex:none; width:96px; display:flex; flex-direction:column; align-items:center; gap:3px; text-decoration:none; text-align:center; padding:10px 4px; border-radius:16px;
  background:linear-gradient(160deg,#050507, color-mix(in srgb, var(--pc) 40%, transparent), #0D0B14); border:1px solid color-mix(in srgb, var(--pc) 45%, transparent); }
.acct-ring { position:relative; width:58px; height:58px; border-radius:50%; border:2px solid var(--pc); display:flex; align-items:center; justify-content:center; overflow:hidden; background:#111; }
.acct-ring img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.acct-ring b { font-size:13px; }
.acct-n { font-size:12px; font-weight:600; line-height:1.2; }
.wx-list { display:flex; flex-direction:column; gap:10px; }
.wx-row { flex-direction:column; align-items:stretch !important; text-decoration:none; border-color:color-mix(in srgb, var(--pc) 40%, transparent) !important; gap:8px !important; }
.wx-row-img { width:100%; max-height:220px; object-fit:cover; border-radius:12px; }
.wx-row-top { display:flex; align-items:center; gap:8px; font-size:13px; }
.wx-row-top .wx-tag { position:static; }
.wx-row-ava { width:28px; height:28px; border-radius:50%; }
.wx-row-t { font-size:15px; line-height:1.4; }

/* weather + radar */
.loc-bar { display:flex; align-items:center; gap:10px; padding:4px 4px 4px 14px; border-radius:18px; background:rgba(255,255,255,.08); border:1px solid var(--glass-b); }
.loc-bar p { flex:1; font-size:13px; color:var(--soft); line-height:1.35; }
.now-card { display:flex; align-items:center; padding:20px; border-radius:26px; border:1px solid rgba(255,255,255,.25);
  background:linear-gradient(135deg, rgba(43,59,122,.2), rgba(178,123,242,.13), rgba(242,196,107,.09)); }
.big-temp { font-size:64px !important; font-weight:200; line-height:68px; }
.now-w { font-size:17px; }
.day-row { display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:20px; background:rgba(255,255,255,.1); border:1px solid var(--glass-b); }
.day-n { width:88px; display:flex; flex-direction:column; } .day-n b { font-weight:500; font-size:15px; }
.day-w { display:flex; flex-direction:column; font-size:14px; } .rainp { color:#9DB6FF; font-size:12px; }
.hi { font-size:17px; font-weight:500; } .lo { color:var(--faint); font-size:15px; }
.radar-body { padding-bottom:0 !important; }
.radar-frame { flex:1; width:calc(100% + 32px); margin:0 -16px; border:0; min-height:300px; background:#161616; }

/* cloud page */
.tabs { display:flex; gap:6px; background:rgba(255,255,255,.06); border:1px solid var(--glass-b); border-radius:18px; padding:4px; flex:none; }
.tab { flex:1; border:0; background:none; border-radius:14px; padding:8px 0; font-size:14px; color:var(--soft); cursor:pointer; }
.tab.on { background:rgba(255,210,122,.2); color:#FFF3D6; font-weight:600; box-shadow:inset 0 0 0 1px rgba(255,210,122,.45); }
.tab-panel { display:flex; flex-direction:column; gap:10px; }
.chat-mode .page-body { overflow:hidden; }
.chat-mode .tab-panel { flex:1; min-height:0; }
.chat { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.clear-chat { align-self:flex-end; padding:0 4px; font-size:12px; }
.msg { display:flex; gap:8px; align-items:flex-end; }
.msg.user { justify-content:flex-end; }
.msg-ava { flex:none; display:flex; }
.msg-b { max-width:78%; padding:10px 14px; border-radius:18px; font-size:15px; line-height:1.4; display:flex; flex-direction:column; gap:6px; }
.msg.assistant .msg-b { background:rgba(255,255,255,.1); border:1px solid var(--glass-b); border-bottom-left-radius:6px; }
.msg.user .msg-b { background:rgba(125,149,255,.28); border:1px solid rgba(125,149,255,.45); border-bottom-right-radius:6px; }
.msg-t { font-size:11px; color:var(--faint); align-self:flex-end; }
.msg .chip.write { align-self:flex-start; background:rgba(255,210,122,.16); border-color:rgba(255,210,122,.5); color:#FFF3D6; }
.chat-bar { display:flex; gap:8px; align-items:center; padding:6px 0 0; flex:none; }
.mic { width:44px; height:44px; border-radius:50%; border:1px solid var(--glass-b); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex:none; cursor:pointer; }
.mic.on { background:rgba(240,127,180,.3); border-color:var(--pink); animation:pulse 1s infinite; }
.pip-hero { display:flex; gap:12px; align-items:center; }
.pip-hero h2, .cotd h2 { margin:2px 0 0; font-size:21px; font-weight:500; }
.pip-big { width:56px; height:56px; flex:none; display:flex; filter:drop-shadow(0 0 4px rgba(255,240,190,.9)) drop-shadow(0 0 14px rgba(255,226,140,.55)); animation:pip-orbit 9s ease-in-out infinite; }
.pip-big svg { width:100%; height:100%; }
.pip-big.sleep { opacity:.65; }
.pip-stage { display:flex; justify-content:space-between; font-size:14px; }
.bar { height:8px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; margin:6px 0 4px; }
.bar span { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#FFE7A3,#F2C46B); box-shadow:0 0 10px rgba(242,196,107,.6); }
.pip-line { margin-top:8px !important; font-size:15px; }
.pip-quote { font-style:italic; color:#FFF3D6; margin:4px 0 !important; }
.lesson { padding:8px 0; border-top:1px solid rgba(255,255,255,.08); }
.lesson:first-child { border-top:0; }
.lesson-topic, .j-entry h3 { font-size:16px; font-weight:600; margin:2px 0 !important; }
.j-entry { padding:10px 0; border-top:1px solid rgba(255,255,255,.08); }
.j-entry:first-child { border-top:0; }
.j-entry p.soft { line-height:1.5; white-space:pre-line; }
.loves { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; color:var(--soft); }
.loves li span { display:inline-block; width:24px; color:var(--gold); }
.write-card .slot { align-self:flex-start; margin-top:4px; }

.cotd .chip { align-self:flex-start; }

/* customize */
.cz-preview { display:flex; justify-content:center; padding:4px 0; }
.swatches { display:flex; gap:12px; flex-wrap:wrap; }
.sw { width:42px; height:42px; border-radius:50%; border:2px solid transparent; background:var(--b); box-shadow:0 0 12px var(--g); color:#1B1726; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.sw .ic { opacity:0; } .sw.on { border-color:var(--gold); } .sw.on .ic { opacity:1; }
.galaxies { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.gal { border:2px solid transparent; border-radius:14px; padding:0; overflow:hidden; background:#111; cursor:pointer; position:relative; height:70px; }
.gal span { position:absolute; inset:0; background:url(/app/img/nebula.webp) center/cover; }
.gal b { position:absolute; left:0; right:0; bottom:4px; font-size:11px; text-shadow:0 1px 3px #000; }
.gal.on { border-color:var(--gold); }
.toggle { display:flex; justify-content:space-between; align-items:center; font-size:15px; gap:10px; }
.toggle input { width:22px; height:22px; accent-color:var(--gold); }
input[type=range] { width:100%; accent-color:var(--gold); }

/* sheets, composer, toast */
.sheet-wrap { position:fixed; inset:0; z-index:20; }
.sheet-scrim { position:absolute; inset:0; background:rgba(0,0,0,.45); opacity:0; transition:opacity .22s; }
.sheet { position:absolute; left:0; right:0; bottom:0; max-height:88%; overflow-y:auto; background:#1d1a27; border:1px solid rgba(255,255,255,.12); border-bottom:0;
  border-radius:24px 24px 0 0; padding:6px 18px calc(var(--sab) + 18px); transform:translateY(100%); transition:transform .25s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 -10px 40px rgba(0,0,0,.4); }
.sheet-wrap.open .sheet { transform:none; } .sheet-wrap.open .sheet-scrim { opacity:1; }
.sheet-grab { width:38px; height:5px; border-radius:3px; background:rgba(255,255,255,.25); margin:4px auto 6px; }
.sheet-head { display:flex; align-items:center; justify-content:space-between; }
.sheet-head h2 { margin:0; font-size:20px; font-weight:500; }
.composer { display:flex; flex-direction:column; gap:10px; padding-top:6px; }
.composer textarea { width:100%; font:inherit; font-size:16px; color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--glass-b); border-radius:16px; padding:12px 14px; resize:none; outline:none; }
.composer textarea:focus { border-color:rgba(255,210,122,.6); }
.hint { margin:0; font-size:12px; color:var(--faint); }
.note-intro { margin:0; color:var(--soft); }
.fld { display:flex; flex-direction:column; gap:5px; font-size:13px; color:var(--soft); }
.fld i { color:var(--faint); font-style:normal; }
.fld input { font:inherit; font-size:16px; color:var(--text); background:rgba(255,255,255,.06); border:1px solid var(--glass-b); border-radius:14px; padding:10px 14px; outline:none; }
.hp { position:absolute !important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.count { font-size:12px; color:var(--faint); }
.status { margin:0; min-height:1.2em; font-size:14px; color:var(--soft); }
.status.ok { color:#9BE3B5; } .status.err { color:#FFB4B4; }
.toast { position:fixed; left:50%; top:calc(var(--sat) + 12px); z-index:30; transform:translate(-50%,-20px); opacity:0; transition:.25s; display:flex; gap:12px; align-items:center;
  max-width:calc(100% - 32px); width:max-content; padding:11px 16px; border-radius:18px; background:rgba(30,27,40,.96); border:1px solid rgba(255,255,255,.16); font-size:14px; box-shadow:0 8px 28px rgba(0,0,0,.45); }
.toast.show { opacity:1; transform:translate(-50%,0); }
.toast button { border:0; background:rgba(255,210,122,.2); color:#FFE3B8; font-weight:700; border-radius:12px; padding:6px 10px; white-space:nowrap; cursor:pointer; }
@media (prefers-reduced-motion: reduce) { #sky .nebula, .pip-float, .pip-big, .wx-dot { animation:none; } }