/* Styles 4/8 (lines 686–981 of styles.css until v122) — goal / milestone / task looks, Settings sections, golden eggs, the Shop, try-on, gift, bought looks.
   Order matters (a later rule wins): index.html loads css/1-… → css/8-… in this order; see docs/REFACTOR.md step 4. */
/* ================= IDENTITY: goal · milestones · tasks look different =================
   Goal — a big card with its icon and a progress ring. Milestones — numbered steps on a path.
   Tasks — compact rows with a small icon tile. The skins below re-draw these same shapes. */
.ico{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.item-icon{flex:0 0 auto; display:flex; align-items:center; justify-content:center; padding:0; border:none; background:none; color:inherit; cursor:pointer; transition:transform .15s ease;}
.item-icon:active{transform:scale(.88);}

.goal-card{
  position:relative; border-radius:var(--r-lg); padding:12px 14px 16px; margin-bottom:4px;
  background:linear-gradient(135deg, var(--goal-bg), transparent 75%), var(--panel-2); border:1px solid var(--goal-border);
  animation:card-in .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes card-in{from{opacity:0; transform:translateY(8px) scale(.98);} to{opacity:1; transform:none;}}
.gc-bar{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.gc-kicker{font-size:11.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent);}
.gc-winbtns{display:none;}
.gc-main{display:flex; align-items:center; gap:12px;}
#goal-icon-slot{display:contents;}
.goal-card .goal-title{flex:1; min-width:0; margin:0; font-size:20px; font-weight:700; line-height:1.25; word-break:break-word;}
.goal-ico{width:52px; height:52px; border-radius:var(--r); background:var(--accent-fill); color:var(--on-accent); box-shadow:0 4px 14px rgba(217,164,65,.28);}
.goal-ico .ico{width:28px; height:28px;}
.gc-ring{position:relative; flex:0 0 auto; width:52px; height:52px;}
.gc-ring[hidden]{display:none;}
.gc-ring svg{display:block; width:100%; height:100%;}
.ring-bg{fill:none; stroke:var(--line); stroke-width:5;}
.ring-fg{fill:none; stroke:var(--accent-fill); stroke-width:5; stroke-linecap:round; transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1);}
.goal-card.done .ring-fg{stroke:var(--ok);}
.gc-ring span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:700;}
.section-kicker{margin-right:auto; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.section-kicker[hidden]{display:none;}

/* Milestones: a path of numbered steps. The line runs through the nodes, left of the cards. */
.milestone-list:not(.editing){gap:10px;}
.milestone-list:not(.editing) li{position:relative; margin-left:40px; padding:10px 12px 10px 10px;}
.milestone-list:not(.editing) li::before{content:""; position:absolute; left:-27px; top:-6px; bottom:-6px; width:2px; background:var(--line);}
.milestone-list:not(.editing) li:first-child::before{top:50%;}
.milestone-list:not(.editing) li:last-child::before{bottom:50%;}
.milestone-list:not(.editing) li:only-child::before{display:none;}
.milestone-list:not(.editing) li.reached::before{background:var(--ok);}
.ms-node{
  position:absolute; left:-40px; top:50%; transform:translateY(-50%); z-index:1;
  width:28px; height:28px; border-radius:50%; background:var(--bg); border:2px solid var(--ms); color:var(--ms);
  display:flex; align-items:center; justify-content:center; font-size:12.5px;
}
li.reached .ms-node{background:var(--ok); border-color:var(--ok); color:#fff;}
.ms-ico{width:34px; height:34px; border-radius:var(--r-sm); background:var(--ms-bg); color:var(--ms);}
.ms-ico .ico{width:20px; height:20px;}
li.reached .ms-ico{background:var(--ok-bg); color:var(--ok);}
.ms-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.ms-label{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
li.reached .ms-label{color:var(--ok);}
.ms-name{word-break:break-word;}
.ms-check{flex:0 0 auto; width:24px; height:24px; opacity:0; transform:scale(.4); transition:opacity .2s ease, transform .25s cubic-bezier(.3,1.5,.5,1);}
.ms-check svg{width:100%; height:100%; fill:none; stroke:var(--ok); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;}
li.reached .ms-check{opacity:1; transform:none;}

/* Tasks: compact rows, small icon tile */
.task-list:not(.editing) li{padding:8px;}
.task-ico{width:32px; height:32px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); color:var(--muted);}
.task-ico .ico{width:18px; height:18px;}
.task-list li.done .task-ico{color:var(--ok); border-color:var(--ok-border);}
.task-list li.not_done .task-ico{color:var(--bad); border-color:var(--bad-border);}
.task-text{flex:1; min-width:0; word-break:break-word;}

/* Icon picker */
.icon-sheet-item{margin:0 0 12px; font-size:14px; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.icon-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(52px, 1fr)); gap:8px;}
.icon-cell{aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:0; cursor:pointer;
  background:var(--panel-2); border:1.5px solid var(--line); border-radius:var(--r); color:var(--text);}
.icon-cell span{display:flex;}
.icon-cell .ico{width:24px; height:24px;}
.icon-cell small{font-size:10px; color:var(--muted); line-height:1;}
.icon-cell.on{border-color:var(--accent-fill); background:var(--goal-bg); color:var(--accent);}

/* Style picker (Settings): three mini previews */
.skin-prev{width:100%; height:56px; display:flex; flex-direction:column; gap:5px; padding:6px; overflow:hidden; border-radius:6px;}
.skin-prev i{display:block; height:11px;}
.skin-prev.classic{background:#17161a;}
.skin-prev.classic i{border-radius:4px; background:#26252b; border:1px solid #35333b;}
.skin-prev.classic i:first-child{width:60%; background:#d9a441; border:none;}
.skin-prev.retro{background:#008080; border-radius:0;}
.skin-prev.retro i{background:#c0c0c0; box-shadow:inset -1px -1px #0a0a0a, inset 1px 1px #fff;}
.skin-prev.retro i:first-child{background:linear-gradient(90deg, #000080, #1084d0); box-shadow:none;}
.skin-prev.medieval{background:#efe2c4; border-radius:3px;}
.skin-prev.medieval i{border-radius:2px; background:#fbf4e2; border:1px solid #c9ab74;}
.skin-prev.medieval i:first-child{width:60%; margin:0 auto; background:#8c1c13; border-color:#b8892b;}
/* v118: Glass had no preview (owner: "the Glass icon is missing") */
.skin-prev.glass{border-radius:10px; background:
  radial-gradient(70% 60% at 15% 15%, rgba(120,90,255,.7), transparent 70%),
  radial-gradient(60% 60% at 90% 40%, rgba(40,200,255,.5), transparent 70%),
  radial-gradient(70% 60% at 50% 110%, rgba(255,110,180,.45), transparent 70%), #0e1024;}
.skin-prev.glass i{border-radius:6px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.skin-prev.glass i:first-child{width:60%; background:linear-gradient(135deg, #8fd3ff, #a98bff); border:none;}
.seg.disabled{opacity:.45; pointer-events:none;}

/* ================= SETTINGS SECTIONS =================
   The root is an iOS-style grouped list; a section opens in place (panel[data-group]). */
.panel[data-panel="settings"] .set-group{display:none;}
.panel[data-panel="settings"][data-group] .set-root{display:none;}
.panel[data-panel="settings"][data-group="account"] .set-group[data-group="account"],
.panel[data-panel="settings"][data-group="profile"] .set-group[data-group="profile"],
.panel[data-panel="settings"][data-group="look"] .set-group[data-group="look"],
.panel[data-panel="settings"][data-group="manager"] .set-group[data-group="manager"],
.panel[data-panel="settings"][data-group="schedule"] .set-group[data-group="schedule"],
.panel[data-panel="settings"][data-group="privacy"] .set-group[data-group="privacy"],
.panel[data-panel="settings"][data-group="help"] .set-group[data-group="help"],
.panel[data-panel="settings"][data-group="danger"] .set-group[data-group="danger"]{display:block;}
.set-group.enter{animation:tab-in-right .24s cubic-bezier(.2,.8,.2,1);}
.panel[data-panel="settings"]:not([data-group]) .set-root{animation:tab-in-left .24s cubic-bezier(.2,.8,.2,1);}
.ph-back{margin:0 -6px 0 -10px; align-self:center; width:36px;}
.ph-back[hidden]{display:none;}
.set-menu{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:16px;}
.set-row{width:100%; display:flex; align-items:center; gap:12px; padding:11px 12px; background:none; border:none; color:var(--text); text-align:left; cursor:pointer; font:inherit;}
.set-row + .set-row{border-top:1px solid var(--line);}
.set-row:active{background:var(--accent-dim);}
.set-ic{flex:0 0 auto; width:32px; height:32px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:#fff;}
.set-ic svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.c-look{background:#c76bd6;} .c-manager{background:#4f8fe0;} .c-schedule{background:#e0913f;}
.c-privacy{background:#3fa66a;} .c-help{background:#7d7a86;} .c-danger{background:#d9534f;}
.set-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px;}
.set-txt b{font-weight:500; font-size:15.5px;}
.set-txt small{font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.set-txt small:empty{display:none;}
.set-row .chev{flex:0 0 auto; width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.set-row.danger b{color:var(--bad);}
.danger-zone{border:1.5px solid var(--bad-border); background:var(--bad-bg); border-radius:var(--r); padding:14px;}
.danger-intro{margin:0 0 12px; font-size:14px; line-height:1.45; color:var(--bad-text);}
.danger-zone .reset-btn.danger{margin-top:10px; background:var(--panel-2);}
.set-root .app-diag{text-align:center;}

/* ================= GOLDEN EGGS & SHOP ================= */
.egg{display:block; flex:0 0 auto;}
.egg-card{
  width:100%; margin-top:12px; display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; font:inherit; color:var(--text); text-align:left;
  border-radius:var(--r-lg); border:1px solid rgba(242,194,48,.5);
  background:linear-gradient(135deg, rgba(242,194,48,.22), rgba(242,194,48,.04) 65%), var(--panel-2);
}
.egg-card:active{transform:scale(.99);}
.egg-card-text{flex:1; min-width:0; display:flex; flex-direction:column;}
.egg-card-label{font-size:12.5px; color:var(--muted);}
.egg-card-text b{font-size:22px; font-weight:800; line-height:1.15;}
.egg-card-go{font-size:13.5px; color:var(--accent); white-space:nowrap; font-weight:600;}
.shop-balance{width:auto !important; min-width:56px; display:flex; align-items:center; justify-content:flex-end; gap:4px; padding-right:6px; font-size:15px;}
@keyframes egg-wobble{0%,70%,100%{transform:none;} 78%{transform:rotate(-8deg);} 86%{transform:rotate(6deg);} 93%{transform:rotate(-3deg);}}
.egg-num{font-size:40px; font-weight:800; line-height:1;}
.egg-label{font-size:14px; color:var(--muted); margin-top:2px;}
.egg-sub{font-size:12.5px; color:var(--muted); margin-top:6px;}
.shop-list{display:flex; flex-direction:column; gap:8px;}
.shop-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.shop-item{display:flex; align-items:center; gap:12px; padding:10px; border-radius:var(--r); background:var(--panel-2); border:1.5px solid var(--line);}
.shop-item.chosen{border-color:var(--accent-fill);}
.shop-list .skin-prev{flex:0 0 84px; height:52px;}
.shop-name{flex:1; min-width:0; font-weight:600; font-size:15px;}
.shop-btn{flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px;}
.shop-act{display:inline-flex; align-items:center; gap:5px; padding:8px 12px; font-size:14px;}
.shop-act.price:disabled{opacity:.5; cursor:default;}
.shop-short{font-size:11px; color:var(--muted); white-space:nowrap;}
.shop-try{padding:6px 10px; font-size:13px;}
/* TRY ON (v90): a bar over everything while a look is being tried */
.try-bar{position:fixed; left:calc(var(--safe-left) + 10px); right:calc(var(--safe-right) + 10px); bottom:calc(var(--tabbar-h) + var(--safe-bottom) + 12px); z-index:27;
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:var(--r); background:var(--text); color:var(--bg);
  box-shadow:0 6px 20px rgba(0,0,0,.3); font-size:14px; animation:msg-in .25s ease;}
.try-bar[hidden]{display:none;}
.try-bar .try-text{flex:1; min-width:0; display:flex; flex-direction:column;}
.try-bar .try-text small{opacity:.75; font-size:12px;}
.try-bar button{flex:0 0 auto; padding:7px 11px; font-size:13.5px; display:inline-flex; align-items:center; gap:4px;}
.try-bar .ghost-btn{color:var(--bg); border-color:color-mix(in srgb, var(--bg) 45%, transparent); background:transparent;}
.try-bar .price:disabled{opacity:.5;}
.shop-state.on{font-size:13px; font-weight:700; color:var(--ok);}
.shop-grid .shop-item{flex-direction:column; align-items:stretch; gap:8px; text-align:center;}
.shop-grid .shop-btn{align-items:center;}
.bg-prev{display:flex; flex-direction:column; justify-content:center; gap:6px; height:84px; padding:10px; border-radius:var(--r-sm); background-color:var(--bg); border:1px solid var(--line);}
.bg-prev i{display:block; height:14px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); width:65%;}
.bg-prev i:last-child{align-self:flex-end; width:50%; background:var(--accent-dim); border:none;}
.egg-rules{margin-top:16px; background:var(--panel-2); border:1px solid var(--line); border-radius:var(--r); padding:12px 14px;}
.egg-rules summary{cursor:pointer; font-weight:600;}
.egg-rules ul{margin:10px 0 0; padding-left:18px; font-size:13.5px; line-height:1.5; color:var(--text);}
.egg-rules li{margin:4px 0;}
/* "+2 🥚" floating up */
.egg-pop{position:fixed; z-index:16; right:calc(var(--safe-right) + 16px); top:calc(var(--safe-top) + 64px); display:flex; align-items:center; gap:4px;
  padding:6px 12px 6px 8px; border-radius:var(--r-pill); background:var(--panel-2); border:1px solid rgba(242,194,48,.7); color:var(--text);
  box-shadow:0 6px 18px rgba(0,0,0,.25); font-size:16px; pointer-events:none; animation:egg-pop 1.9s cubic-bezier(.2,.8,.2,1) forwards;}
.egg-pop.minus{border-color:var(--bad-border); color:var(--bad);}
@keyframes egg-pop{0%{opacity:0; transform:translateY(12px) scale(.6);} 15%{opacity:1; transform:translateY(0) scale(1.08);} 25%{transform:scale(1);} 75%{opacity:1; transform:translateY(-6px);} 100%{opacity:0; transform:translateY(-26px);}}

/* ================= v45: FEATHERS & GOLDEN EGGS, DAILY GIFT, SHOP 2.0, LOOKS ================= */
.feather{display:block; flex:0 0 auto;}
.egg-pop.gold{border-color:rgba(242,194,48,.9); box-shadow:0 0 0 3px rgba(242,194,48,.18), 0 6px 18px rgba(0,0,0,.25);}
/* Card on "My progress" */
.egg-card{align-items:center;}
.egg-card-text{gap:4px;}
.egg-card-bal{display:flex; align-items:center; gap:6px;}
.egg-card-bal b{font-size:20px; font-weight:800; margin-right:10px;}
.egg-card-gift{font-size:12.5px; color:var(--muted);}
.egg-card-go{font-size:22px; color:var(--muted);}
/* Shop: wallet, gift row, tabs */
.wallet{display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; padding:14px; border-radius:var(--r-lg); border:1px solid rgba(242,194,48,.5);
  background:radial-gradient(circle at 85% 30%, rgba(242,194,48,.22), transparent 55%), var(--panel-2);}
.wallet-cur{display:flex; align-items:center; gap:10px;}
.wallet-ic .feather{filter:drop-shadow(0 3px 6px rgba(80,90,110,.35));}
.wallet-ic.gold .egg{filter:drop-shadow(0 4px 10px rgba(168,111,8,.5)); animation:egg-wobble 2.4s 1s ease-in-out infinite;}
.wallet .egg-num{font-size:30px;}
.wallet .egg-sub{grid-column:1 / -1; margin-top:0;}
.gift-row{width:100%; margin-top:10px; display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r); cursor:pointer; font:inherit; text-align:left;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text);}
.gift-row span{flex:1;}
.gift-row svg{width:18px; height:18px; fill:none; stroke:var(--muted); stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.shop-tabs{margin-top:14px;}
.shop-tabs button{display:flex; align-items:center; justify-content:center; gap:5px;}
.shop-for{margin:-2px 0 8px;}
.soon-list{display:flex; flex-direction:column; gap:10px; margin-top:16px;}
.soon-list .soon-card{margin-top:0;}
/* Previews in shop cards */
.shop-grid .shop-item > span:first-child{align-self:stretch;}
.bub-prev, .fx-prev, .snd-prev, .frz-prev, .goose-prev, .av-prev, .celeb-prev, .flame-prev, .frame-prev, .icons-prev, .accent-prev{
  height:84px; border-radius:var(--r-sm); background:var(--bg); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:8px; position:relative; overflow:hidden;}
.bub-prev{flex-direction:column; align-items:stretch; padding:10px; gap:6px;}
.bub-prev i{display:block; height:16px; width:70%; background:var(--panel-2); border:1px solid var(--line); border-radius:12px 12px 12px 4px;}
.bub-prev i:last-child{align-self:flex-end; width:55%; background:var(--accent-dim); border:none; border-radius:12px 12px 4px 12px;}
.accent-prev{background:#d9a441; border:none;}
.accent-prev::after{content:""; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.35); box-shadow:0 0 0 6px rgba(255,255,255,.18);}
.icons-prev .item-icon{width:30px; height:30px;}
.fx-prev, .snd-prev{cursor:pointer; flex-direction:column; font-size:22px;}
.snd-prev small{font-size:11px; color:var(--muted);}
.fx-row{position:relative; padding:6px 12px; border-radius:var(--r-sm); background:var(--panel-2); border:1px solid var(--line); font-size:13px; color:var(--text);}
.frz-prev .frz{font-size:28px;}
.goose-prev svg, .av-prev svg{width:60px; height:60px; border-radius:50%; display:block;}
.celeb-prev{font-size:34px; background:radial-gradient(circle at 50% 40%, rgba(242,182,48,.45), transparent 65%), #14121a;}
.celeb-prev[data-celeb="stars"]{background:radial-gradient(circle at 50% 40%, rgba(124,156,255,.45), transparent 65%), #0b0e24;}
.celeb-prev[data-celeb="gold"]{background:radial-gradient(circle at 50% 40%, rgba(255,214,90,.75), transparent 70%), #3a2a06;}
.celeb-prev[data-celeb="neon"]{background:radial-gradient(circle at 30% 30%, rgba(255,64,200,.55), transparent 55%), radial-gradient(circle at 70% 70%, rgba(0,229,255,.5), transparent 55%), #0a0612;}
.flame-prev{font-size:40px;}
.bg-targets{display:flex; gap:4px; flex-wrap:wrap; justify-content:center;}
.bg-target{font:inherit; font-size:12px; padding:5px 8px; border-radius:var(--r-pill); border:1px solid var(--line); background:var(--panel); color:var(--muted); cursor:pointer;}
.bg-target.on{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--on-accent); font-weight:600;}
.shop-state{font-size:12.5px; color:var(--muted);}
/* Daily gift */
.gift{position:fixed; inset:0; z-index:28; display:flex; align-items:center; justify-content:center; padding:calc(var(--safe-top) + 20px) 20px calc(var(--safe-bottom) + 20px);
  background:radial-gradient(circle at 50% 35%, rgba(79,143,224,.35), transparent 60%), rgba(12,11,16,.92);}
.gift[hidden]{display:none;}
.gift.show{animation:fade-in .3s ease;}
.gift-card{width:100%; max-width:380px; text-align:center; color:#fff; display:flex; flex-direction:column; align-items:center;}
.gift-goose svg{display:block; border-radius:50%; box-shadow:0 10px 30px rgba(79,143,224,.45);}
.gift.show .gift-goose svg{animation:goose-hop 1.4s .2s ease-in-out;}
.gift-card h2{font-size:26px; margin:16px 0 4px;}
.gift-sub{margin:0 0 16px; color:rgba(255,255,255,.75); font-size:14.5px;}
.gift-track{display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; width:100%;}
.gift-day{display:flex; flex-direction:column; align-items:center; gap:3px; padding:7px 0 6px; border-radius:10px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);}
.gift-day small{font-size:10.5px; color:rgba(255,255,255,.6);}
.gift-day span{display:flex; flex-direction:column; align-items:center; gap:1px; font-size:11.5px;}
.gift-day.egg-day{background:rgba(242,194,48,.16); border-color:rgba(242,194,48,.5);}
.gift-day.got{opacity:.45;}
.gift-day.got::after{content:"✓"; font-size:11px; color:#9fe09f;}
.gift-day.now{background:rgba(255,255,255,.2); border-color:#fff; transform:scale(1.08); box-shadow:0 4px 14px rgba(0,0,0,.35);}
.gift-prize{min-height:56px; display:flex; align-items:center; justify-content:center; margin:16px 0 10px;}
.gift-prize span{display:flex; align-items:center; gap:8px; font-size:28px;}
.gift-got{animation:cel-pop .8s cubic-bezier(.2,1.4,.4,1);}
#gift-claim{width:100%; padding:14px 16px; font-size:16px; border-radius:14px;}
.gift-note{margin:12px 0 0; font-size:13px; color:rgba(255,255,255,.7); line-height:1.45;}
/* Chat bubble shapes */
body[data-bubble="round"] .msg.agent, body[data-bubble-me="round"] .msg.user, .bub-prev[data-bubble="round"] i{border-radius:22px !important;}
body[data-bubble="square"] .msg.agent, body[data-bubble-me="square"] .msg.user, .bub-prev[data-bubble="square"] i{border-radius:3px !important;}
body[data-bubble="comic"] .msg.agent, body[data-bubble-me="comic"] .msg.user, .bub-prev[data-bubble="comic"] i{border:2px solid var(--text) !important; box-shadow:3px 3px 0 var(--text); border-radius:14px !important;}
body[data-bubble="neon"] .msg.agent, .bub-prev[data-bubble="neon"] i:first-child{border:1px solid var(--accent-fill) !important; box-shadow:0 0 10px rgba(217,164,65,.45), inset 0 0 6px rgba(217,164,65,.15);}
body[data-bubble-me="neon"] .msg.user, .bub-prev[data-bubble="neon"] i:last-child{box-shadow:0 0 12px rgba(217,164,65,.55);}
/* Task icon packs */
.item-icon.pack-color{background:var(--ic) !important; color:#fff !important; border-color:transparent !important; box-shadow:none !important;}
.item-icon.pack-emoji{background:var(--panel-2);}
.ico-emoji{font-size:18px; line-height:1;}
.goal-ico .ico-emoji{font-size:28px;}
.icon-cell .ico-emoji{font-size:22px;}
/* "Done" effects */
.task-list li{position:relative;}
.done-fx{position:absolute; pointer-events:none; z-index:3;}
.fx-stamp{right:14px; top:50%; padding:2px 10px; border:2.5px solid #c62828; color:#c62828; font-weight:900; font-size:15px; letter-spacing:.08em;
  text-transform:uppercase; border-radius:6px; background:rgba(255,255,255,.75); animation:fx-stamp 1.3s cubic-bezier(.2,1.5,.4,1) forwards;}
@keyframes fx-stamp{0%{opacity:0; transform:translateY(-50%) rotate(-14deg) scale(2.2);} 25%{opacity:1; transform:translateY(-50%) rotate(-14deg) scale(1);} 80%{opacity:1;} 100%{opacity:0; transform:translateY(-50%) rotate(-14deg) scale(1);}}
.fx-fireworks{left:50%; top:50%;}
.fx-fireworks i{position:absolute; width:8px; height:8px; margin:-4px 0 0 -4px; border-radius:50%; animation:fx-spark .9s ease-out forwards;}
@keyframes fx-spark{0%{transform:translate(0,0) scale(1); opacity:1;} 100%{transform:translate(var(--dx), var(--dy)) scale(.3); opacity:0;}}
.fx-goose{right:8px; top:50%; display:flex; align-items:center; gap:4px; animation:fx-goose 1.3s cubic-bezier(.2,1.4,.4,1) forwards;}
.fx-goose svg{border-radius:50%;}
.fx-goose b{font-size:12px; font-weight:900; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:2px 6px;}
@keyframes fx-goose{0%{opacity:0; transform:translateY(-10%) scale(.3);} 25%{opacity:1; transform:translateY(-50%) scale(1.1);} 35%{transform:translateY(-50%) scale(1);} 80%{opacity:1; transform:translateY(-50%);} 100%{opacity:0; transform:translateY(-90%);}}
/* Celebration screen styles */
body[data-celeb="stars"] .celebrate{background:radial-gradient(circle at 50% 36%, rgba(124,156,255,.45), transparent 62%), radial-gradient(rgba(255,255,255,.5) 1px, transparent 1.5px) 0 0/34px 34px, #0b0e24;}
body[data-celeb="gold"] .celebrate{background:radial-gradient(circle at 50% 36%, rgba(255,214,90,.6), transparent 66%), linear-gradient(#3a2a06, #120c02);}
body[data-celeb="neon"] .celebrate{background:radial-gradient(circle at 25% 25%, rgba(255,64,200,.45), transparent 50%), radial-gradient(circle at 75% 70%, rgba(0,229,255,.4), transparent 50%), #0a0612;}
/* Streak flame colours */
body[data-flame="blue"] .streak-fire, .flame-prev[data-flame="blue"]{filter:hue-rotate(195deg) saturate(1.4);}
body[data-flame="green"] .streak-fire, .flame-prev[data-flame="green"]{filter:hue-rotate(85deg) saturate(1.3);}
body[data-flame="purple"] .streak-fire, .flame-prev[data-flame="purple"]{filter:hue-rotate(250deg) saturate(1.3);}
body[data-flame="rainbow"] .streak-fire, .flame-prev[data-flame="rainbow"]{animation:flame-rainbow 3s linear infinite;}
@keyframes flame-rainbow{from{filter:hue-rotate(0deg) saturate(1.4);} to{filter:hue-rotate(360deg) saturate(1.4);}}
body[data-flame] .streak-card.zero .streak-fire{filter:grayscale(1); animation:none;}