/* Styles 8/8 (lines 1674–1846 of styles.css until v122) — install guide, first run, morning plan, evening check-in, the Glass skin.
   Order matters (a later rule wins): index.html loads css/1-… → css/8-… in this order; see docs/REFACTOR.md step 4. */
/* INSTALL GUIDE (install.js, v104): drawn phone screens — the same drawings as site/install.html, "ig-" prefixed */
.install-guide{position:fixed; inset:0; z-index:300; background:var(--bg); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);}
body.ig-open{overflow:hidden;}
.ig-top{display:flex; justify-content:flex-end; padding:10px 14px 0;}
.ig-body{max-width:420px; margin:0 auto; padding:4px 20px 28px; text-align:center;}
.ig-body h2{font-size:22px; margin:6px 0 6px; line-height:1.25;}
.ig-why{color:var(--muted); font-size:14.5px; line-height:1.5; margin:0 0 14px;}
.ig-now{width:100%; margin-bottom:6px;}
.ig-or{color:var(--muted); font-size:13px; margin:2px 0 10px;}
.ig-step{display:flex; flex-direction:column; align-items:center; gap:14px;}
.ig-text{max-width:330px;}
.ig-text .ig-n{display:inline-flex; width:26px; height:26px; border-radius:50%; background:#e0a83e; color:#17181c; font-weight:800; align-items:center; justify-content:center; font-size:14px; margin-right:8px; vertical-align:middle;}
.ig-text b{font-size:17px; vertical-align:middle;}
.ig-text p{margin:8px 0 0; color:var(--muted); font-size:14.5px; line-height:1.5;}
.ig-dots{display:flex; justify-content:center; gap:6px; margin:16px 0 12px;}
.ig-dots i{width:7px; height:7px; border-radius:50%; background:var(--line);}
.ig-dots i.on{background:#e0a83e; width:18px; border-radius:4px;}
.ig-nav{display:flex; gap:10px;}
.ig-nav button{flex:1;}
.ig-help{color:var(--muted); font-size:13px; line-height:1.5; margin:14px 0 0;}
.ig-copied{color:var(--muted); font-size:13px; margin:8px 0 0; word-break:break-all;}

.ig-phone{--pw:190px; width:var(--pw); height:calc(var(--pw)*2.05); border-radius:30px; background:#0c0d10; padding:8px; box-shadow:0 14px 34px rgba(0,0,0,.28); position:relative; flex:0 0 auto;}
.ig-phone .scr{position:relative; width:100%; height:100%; border-radius:23px; overflow:hidden; background:#f2f2f7; color:#111; font:11px/1.3 -apple-system,"Segoe UI",Roboto,sans-serif; display:flex; flex-direction:column; text-align:center;}
.ig-phone.android{border-radius:22px;} .ig-phone.android .scr{border-radius:15px; background:#fff;}
.ig-phone .notch{position:absolute; top:14px; left:50%; transform:translateX(-50%); width:60px; height:17px; border-radius:12px; background:#0c0d10; z-index:5;}
.ig-phone.android .notch{width:12px; height:12px; border-radius:50%;}
.ig-sb{height:30px; flex:0 0 30px; display:flex; align-items:center; justify-content:space-between; padding:0 18px; font-weight:700; font-size:10.5px;}
.ig-sb i{font-style:normal; letter-spacing:1px;}
.ig-page{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; background:#121317; color:#eef0f4; padding:10px;}
.ig-page img{width:52px; height:52px; border-radius:13px;}
.ig-page b{font-size:14px;}
.ig-page .fld{width:80%; height:19px; border-radius:7px; background:#22252d;}
.ig-page .pbtn{width:80%; height:21px; border-radius:7px; background:#e0a83e;}
.ig-page.dim{filter:brightness(.55);}
.ig-saf{background:#f7f7f9; border-top:1px solid #ddd; padding:6px 8px 10px; flex:0 0 auto;}
.ig-saf .url{background:#e4e4ea; border-radius:10px; height:24px; display:flex; align-items:center; justify-content:center; font-size:10px; color:#333;}
.ig-saf .bar{display:flex; justify-content:space-around; align-items:center; margin-top:7px; color:#0a84ff;}
.ig-saf svg, .ig-chr svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; display:block;}
.ig-chr{display:flex; align-items:center; gap:6px; padding:6px 8px; background:#fff; border-bottom:1px solid #e3e3e3; flex:0 0 auto; color:#444;}
.ig-chr .url{flex:1; background:#f1f3f4; border-radius:14px; height:24px; display:flex; align-items:center; padding:0 10px; font-size:10px; color:#333; overflow:hidden; white-space:nowrap;}
.ig-chr.inapp{background:#f7f7f9;} .ig-chr.inapp .url{justify-content:center; background:none;} .ig-chr .x{font-size:12px; padding:0 2px;}
.ig-phone .tap{position:relative; border-radius:50%; display:inline-block;}
.ig-phone .tap::after{content:""; position:absolute; inset:-7px; border-radius:50%; border:2.5px solid #ff3b5c; box-shadow:0 0 0 4px rgba(255,59,92,.18); pointer-events:none; animation:ig-pulse 1.4s ease-in-out infinite;}
.ig-phone .tap-row{position:relative;}
.ig-phone .tap-row::after{content:""; position:absolute; inset:-3px; border-radius:9px; border:2.5px solid #ff3b5c; box-shadow:0 0 0 4px rgba(255,59,92,.18); pointer-events:none; animation:ig-pulse 1.4s ease-in-out infinite;}
@keyframes ig-pulse{50%{box-shadow:0 0 0 7px rgba(255,59,92,.08);}}
@media (prefers-reduced-motion: reduce){ .ig-phone .tap::after, .ig-phone .tap-row::after{animation:none;} }
.ig-sheet{position:absolute; left:0; right:0; bottom:0; background:#f2f2f7; border-radius:16px 16px 0 0; padding:10px 10px 14px; box-shadow:0 -6px 20px rgba(0,0,0,.25); text-align:left;}
.ig-sheet .head{display:flex; align-items:center; gap:8px; padding:4px 4px 10px; border-bottom:1px solid #ddd; margin-bottom:8px;}
.ig-sheet .head img{width:28px; height:28px; border-radius:7px;}
.ig-sheet .head small{display:block; color:#888; font-size:9px;}
.ig-sheet .rows{background:#fff; border-radius:10px;}
.ig-sheet .rows div{padding:8px 10px; border-bottom:1px solid #eee; font-size:10.5px;}
.ig-sheet .rows div:last-child{border-bottom:0;}
.ig-add{flex:1; background:#f2f2f7; padding:8px 10px; text-align:left;}
.ig-add .top{display:flex; justify-content:space-between; align-items:center; padding:6px 0 12px; font-size:10.5px;}
.ig-add .top span{color:#0a84ff; padding:2px 4px;} .ig-add .top b{font-size:11px;}
.ig-add .card{background:#fff; border-radius:10px; padding:10px; display:flex; gap:10px; align-items:center;}
.ig-add .card img{width:40px; height:40px; border-radius:10px;}
.ig-add .card u{text-decoration:none; display:block; border-bottom:1px solid #ddd; padding-bottom:4px; font-weight:600;}
.ig-add .card small{color:#888; font-size:9px;}
.ig-home{flex:1; background:linear-gradient(160deg,#5b7bd5,#9a6fd0 60%,#e08bb0); display:grid; grid-template-columns:repeat(4,1fr); gap:12px 8px; padding:14px 12px; align-content:start;}
.ig-phone.android .ig-home{background:linear-gradient(170deg,#2e7d6b,#4a9d8a 55%,#a4d4b4);}
.ig-home .app{display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; font-size:8.5px;}
.ig-home .app i{width:34px; height:34px; border-radius:9px; background:rgba(255,255,255,.35); display:block;}
.ig-home .app img{width:34px; height:34px; border-radius:9px; display:block;}
.ig-phone.android .ig-home .app i, .ig-phone.android .ig-home .app img{border-radius:50%;}
.ig-menu{position:absolute; top:62px; right:8px; width:66%; background:#fff; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.25); padding:4px 0; text-align:left;}
.ig-menu div{padding:7px 12px; font-size:10.5px;}
.ig-dialog{position:absolute; left:12px; right:12px; top:34%; background:#fff; border-radius:14px; padding:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); text-align:left;}
.ig-dialog > b{display:block; font-size:11.5px; margin-bottom:10px;}
.ig-dialog .app{display:flex; gap:9px; align-items:center; margin-bottom:12px;}
.ig-dialog .app img{width:32px; height:32px; border-radius:50%;}
.ig-dialog .app small{display:block; color:#777; font-size:9px;}
.ig-dialog .acts{display:flex; justify-content:flex-end; gap:16px; color:#1a73e8; font-weight:600; font-size:10.5px;}

/* FIRST RUN (v105): answer buttons under the manager's message, the tour, the reminders card, the pick screen */
.choice-row{display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 8px; max-width:92%;}
.choice-btn{border:1.5px solid var(--accent, #e0a83e); background:transparent; color:var(--text); border-radius:18px; padding:8px 14px; font-size:14.5px; line-height:1.25; cursor:pointer; text-align:left;}
.choice-btn:active{transform:scale(.97);}
.tour{position:fixed; inset:0; z-index:250;}
.tour-spot{position:fixed; border-radius:16px; box-shadow:0 0 0 9999px rgba(0,0,0,.62); transition:left .3s ease, top .3s ease, width .3s ease, height .3s ease; pointer-events:none; border:2px solid #e0a83e;}
.tour-tip{position:fixed; left:12px; right:12px; max-width:420px; margin:0 auto; background:var(--panel, #232228); color:var(--text); border-radius:16px; padding:14px 16px; box-shadow:0 12px 32px rgba(0,0,0,.4);}
.tour-head{display:flex; align-items:center; gap:8px; margin-bottom:6px;}
.tour-head b{font-size:16px; flex:1;} .tour-head small{color:var(--muted);}
.tour-av{width:30px; height:30px; border-radius:50%; overflow:hidden; display:inline-block; flex:0 0 auto;}
.tour-av svg{width:100%; height:100%;}
.tour-tip p{margin:0 0 10px; font-size:14.5px; line-height:1.5; color:var(--muted);}
.tour-acts{display:flex; justify-content:space-between; align-items:center;}
body.touring .composer{visibility:hidden;}
.frun-card{background:var(--panel, #232228); border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin:6px 0 10px; max-width:92%; text-align:left; align-self:flex-start;}
.frun-card p{margin:6px 0; font-size:14.5px; line-height:1.5;}
.frun-from{display:flex; align-items:center; gap:8px; margin-bottom:4px;}
.frun-acts{display:flex; gap:8px; margin:8px 0;}
.frun-card .frun-note{color:var(--muted); font-size:13px; background:none; padding:0; margin:4px 0 0; border:0;}
.frun-card .frun-note:empty{display:none;}
.frun-card .fw-answer{color:var(--accent); font-weight:600;} /* v145: the first task — answer in the chat */
body.fw-answer #input{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-dim);} /* v145: the input lights up until the first task is done */
.onb-situation{background:var(--panel-2, rgba(255,255,255,.06)); border-radius:12px; padding:8px 12px; font-style:italic;}
.onb-style{color:var(--muted); font-weight:400; font-size:13px;}

/* MORNING PLAN (v106): the plan card's buttons, Settings → Tasks for the day */
.plan-card .plan-acts{display:flex; gap:8px; margin-top:10px;}
.plan-card .plan-acts button{flex:1;}
#plan-how-box{margin-top:8px;}

/* EVENING CHECK-IN (v107): the card in the chat */
.checkin-card{background:var(--panel, #232228); border:1px solid var(--line); border-radius:16px; padding:12px 14px; margin:6px 0 10px; max-width:92%; text-align:left; align-self:flex-start;}
.checkin-card p{margin:6px 0; font-size:14.5px; line-height:1.5;}
.checkin-faces{display:flex; gap:6px; margin:8px 0;}
.checkin-faces button{flex:1; display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer;}
.checkin-faces button span{font-size:22px; line-height:1;}
.checkin-faces button small{font-size:10.5px; color:var(--muted);}
.checkin-note{width:100%; box-sizing:border-box; margin-top:4px;}
.checkin-done{color:var(--muted);}

/* GLASS SKIN (v111, 1 golden egg): our own frosted-glass look — a deep gradient with soft colour glows behind
   translucent, blurred panels with thin light edges. Like every skin: colours and surfaces only, never the layout. */
html:root[data-skin="glass"]{
  color-scheme: dark;
  --bg: #0e1024; --panel: rgba(255,255,255,.07); --panel-2: rgba(255,255,255,.10); --line: rgba(255,255,255,.16);
  --text: #f3f4fb; --muted: rgba(235,238,255,.62);
  --accent: #8fd3ff; --accent-fill: #6fb8ff; --on-accent: #0b1430; --accent-dim: rgba(143,211,255,.22);
  --user-text: #f3f4fb;
  --goal-bg: rgba(255,255,255,.08); --goal-border: rgba(255,255,255,.2); --chip-border: rgba(255,255,255,.3);
  --overlay: rgba(6,8,24,.45);
  --r-sm: 12px; --r: 18px; --r-lg: 24px;
  --glass-blur: blur(18px) saturate(160%);
}
html[data-skin="glass"] body{
  background:
    radial-gradient(60% 45% at 15% 10%, rgba(120,90,255,.45), transparent 70%),
    radial-gradient(55% 40% at 90% 30%, rgba(40,200,255,.32), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(255,110,180,.28), transparent 70%),
    #0e1024;
  background-attachment: fixed;
}
html[data-skin="glass"] .chat-header, html[data-skin="glass"] .page-header, html[data-skin="glass"] .subpage-head,
html[data-skin="glass"] .tabbar, html[data-skin="glass"] .composer, html[data-skin="glass"] .drawer,
html[data-skin="glass"] .goal-card, html[data-skin="glass"] .hub-tile,
html[data-skin="glass"] .frun-card, html[data-skin="glass"] .tour-tip{
  background-color: var(--panel); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border-color: var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 24px rgba(0,0,0,.25);
}
/* v118: the chat — glass WITHOUT blur (owner: "the bubbles' blur shows up late, they flicker for a few seconds and turn
   fully transparent, especially over a background"): a phone draws a blur for every bubble separately and late, and
   gives up when there are many. Dense tinted panels with the same light edge read the same and draw at once. */
html[data-skin="glass"] .msg.agent, html[data-skin="glass"] .msg.user, html[data-skin="glass"] .action-card,
html[data-skin="glass"] .choice-btn, html[data-skin="glass"] .checkin-card{
  background-color: rgba(30,34,74,.72); border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.22);
}
html[data-skin="glass"] .msg.user{background-color: rgba(54,86,158,.74);}
/* v118: a Settings section is not a card — no panel behind it (it hugged the text and buttons with no padding, so the
   panel's hard edge showed right next to them: owner, "Profile & friends"); its rows and buttons carry the glass */
html[data-skin="glass"] main{background: transparent;}
/* v112: a page (Shop, Games…) lies OVER a tab — it needs its own opaque glass backdrop, or the tab shows through */
html[data-skin="glass"] .subpage{
  background:
    radial-gradient(60% 45% at 15% 10%, rgba(120,90,255,.45), transparent 70%),
    radial-gradient(55% 40% at 90% 30%, rgba(40,200,255,.32), transparent 70%),
    radial-gradient(60% 50% at 50% 100%, rgba(255,110,180,.28), transparent 70%),
    #0e1024;
}
/* bottom sheets lie over content too — frosted but dense enough that nothing behind them can be read */
html[data-skin="glass"] .drawer, html[data-skin="glass"] .tour-tip{background-color: rgba(22,25,54,.92);}
html[data-skin="glass"] .primary-btn{background: linear-gradient(135deg, #8fd3ff, #a98bff); color: #0b1430; border: 0;}
html[data-skin="glass"] .tabbar button.active{color: #fff; text-shadow: 0 0 12px rgba(143,211,255,.7);}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  html[data-skin="glass"]{--panel: rgba(30,34,70,.92); --panel-2: rgba(40,46,90,.94);} /* no blur — solid enough to read */
}
@media (prefers-reduced-transparency: reduce){
  html[data-skin="glass"]{--panel: rgba(30,34,70,.95); --panel-2: rgba(40,46,90,.96);}
}

/* STEP-BY-STEP DISCOVERY (v124, hints.js): the Goose's hint sheet; the Settings row of the Shop hides until it opens */
.settings-row[hidden], #set-skin-label[hidden]{display:none;}
.hint-card{display:flex; gap:12px; align-items:flex-start; margin:4px 0 16px;}
.hint-card .goose{flex:0 0 auto;}
#hint-text p{margin:0 0 8px; line-height:1.45;}
#hint-text ul{margin:0 0 8px; padding-left:18px;}
#hint-text li{margin:4px 0;}
#hint-ok{width:100%;}

/* v131 (IDEAS 50): Settings → Manager — what the manager remembers (reactions.js) */
.mem-list{list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:6px;}
.mem-list li{display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--panel-2); font-size:14px; line-height:1.4;}
.mem-list li span{flex:1 1 auto; min-width:0; overflow-wrap:anywhere;}
.mem-list li.mem-empty{color:var(--muted); border-style:dashed; background:none;}
.mem-forget{flex:0 0 auto; border:0; background:none; color:var(--muted); font-size:15px; padding:4px 6px; cursor:pointer;}
/* v136: numbers on the tab bar — unread in Chat (red, like a messenger), today's open tasks (calm, the accent) */
.tabbar button{position:relative;}
.tab-badge{position:absolute; top:4px; left:calc(50% + 5px); min-width:17px; height:17px; padding:0 5px; box-sizing:border-box;
  border-radius:9px; background:#e5484d; color:#fff; font-size:10.5px; font-weight:700; line-height:17px; text-align:center;
  font-style:normal; pointer-events:none; box-shadow:0 0 0 2px var(--panel);}
.tab-btn[data-tab="tasks"] .tab-badge{background:var(--accent-fill); color:var(--on-accent);}
.tab-badge[hidden]{display:none;}
/* v136: the Goose in the chat — its face, its name, a warm gold bubble (not the manager's) */
.msg.goose{align-self:flex-start; background:rgba(224,168,62,.13); border:1px solid rgba(224,168,62,.5); border-bottom-left-radius:4px;}
.goose-from{display:flex; align-items:center; gap:6px; margin:-3px 0 4px -2px; font-size:12.5px; color:#c98f22;}
.goose-from svg{flex:0 0 auto; display:block;}
.goose-text{white-space:pre-wrap;}
[data-skin="retro"] .msg.goose{background:#fff8c8; border:none; box-shadow:var(--raised); color:#000;}
[data-skin="retro"] .goose-from{color:#000;}
.msg.goose.anim-in{animation:msg-in .32s cubic-bezier(.2,.9,.3,1.15); transform-origin:0 100%;}
/* v137 (owner: "a glass bottom bar like Telegram — only for Glass"): the tab bar floats over the content — a rounded,
   see-through, blurred pill; lists scroll on under it. One blurred bar is light for a phone (v118 blinked because every
   chat bubble had its own blur). Each tab's list gets room at the bottom so its end can be scrolled out from under the
   bar; in the chat the text box sits above it. Pages and sheets (z-index 9–11) still lie over the bar (it's 5). */
html[data-skin="glass"]{--float-bar: calc(var(--tabbar-h) + var(--safe-bottom) + 14px);} /* the bar's height + its gap */
html[data-skin="glass"] .tabbar{
  position:fixed; z-index:5; left:calc(var(--safe-left) + 12px); right:calc(var(--safe-right) + 12px);
  bottom:calc(var(--safe-bottom) + 8px); padding:0 4px; border:1px solid rgba(255,255,255,.22); border-radius:30px;
  background-color:rgba(28,32,72,.36);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 10px 30px rgba(0,0,0,.35);
}
html[data-skin="glass"] .tabbar button{border-radius:26px;}
html[data-skin="glass"] .tabbar button.active{background:rgba(143,211,255,.14);}
html[data-skin="glass"] main .panel-scroll{padding-bottom:calc(var(--float-bar) + 16px);}
html[data-skin="glass"] .panel[data-panel="chat"]{padding-bottom:var(--float-bar);}
html[data-skin="glass"] body.typing .panel[data-panel="chat"]{padding-bottom:0;} /* the keyboard is open, the bar hidden */
html[data-skin="glass"] .toast, html[data-skin="glass"] .try-bar{bottom:calc(var(--float-bar) + 10px);}
html[data-skin="glass"] .tab-badge{box-shadow:none;}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  html[data-skin="glass"] .tabbar{background-color:rgba(30,34,70,.94);} /* no blur — solid enough to read */
}
/* v138: setting / renaming a goal (goal-tasks.js) — one button on the empty Goal tab, ✎ next to the title, the "New goal" form's title */
.goal-empty p{margin:0 0 14px;}
.goal-empty #goal-start-btn{width:100%;}
.gc-rename{flex:0 0 auto; width:34px; height:34px; font-size:16px; opacity:.75;}
.gc-rename[hidden], .goal-rename-input[hidden], .goal-title[hidden]{display:none;}
.goal-rename-input{flex:1; min-width:0; font-size:18px; font-weight:700; padding:6px 10px; border-radius:var(--r-sm);
  border:1px solid var(--accent); background:var(--panel-2); color:var(--text);}
.manual-form-title{display:block; font-size:17px; margin-bottom:10px;}

/* ---- v139 (IDEAS 61): the new start — only the chat until the first win; the streak and notifications screens ---- */
body.fresh .tabbar{display:none;}
.fresh-skip{flex:0 0 auto; align-self:center; background:none; border:0; color:var(--muted); font-size:12.5px; padding:8px 16px calc(8px + var(--safe-bottom, 0px)); cursor:pointer;}
body.tabs-arrive .tabbar{animation:tabsUp .6s cubic-bezier(.2,.9,.3,1.2);}
@keyframes tabsUp{from{transform:translateY(100%); opacity:0;} to{transform:none; opacity:1;}}
.fw-card .fw-task{font-weight:600; background:var(--accent-dim); border-radius:10px; padding:8px 10px;}
.fw-card .primary-btn{font-size:16px; padding:10px 22px;}
.fresh-screen{position:fixed; inset:0; z-index:240; display:flex; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(circle at 50% 38%, rgba(255,140,50,.28), transparent 60%), rgba(10,9,14,.95);}
.fresh-screen[hidden]{display:none;}
.fresh-card{width:100%; max-width:380px; text-align:center; color:#fff;}
.fresh-screen.show .fresh-card{animation:freshIn .45s cubic-bezier(.2,.9,.3,1.2);}
@keyframes freshIn{from{transform:scale(.85); opacity:0;} to{transform:none; opacity:1;}}
.fresh-card h2{margin:10px 0 6px; font-size:24px;}
.fresh-card p{margin:6px 0 14px; font-size:15px; line-height:1.5; opacity:.9;}
.fresh-card .big-btn{width:100%; margin-top:6px;}
.fs-flame{font-size:76px; line-height:1; display:inline-block; animation:flameBurn 1.4s ease-in-out infinite; filter:drop-shadow(0 0 18px rgba(255,120,40,.7));}
@keyframes flameBurn{0%,100%{transform:scale(1) rotate(-2deg);} 50%{transform:scale(1.1) rotate(2deg);}}
.fs-week{display:flex; justify-content:center; gap:6px; margin:4px 0 18px;}
.fs-day{display:flex; flex-direction:column; align-items:center; gap:4px;}
.fs-day i{width:36px; height:36px; border-radius:50%; border:2px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:18px;}
.fs-day small{font-size:11px; opacity:.7;}
.fs-day.lit i{border-color:#ff8a3d; background:radial-gradient(circle, rgba(255,150,60,.55), rgba(255,90,30,.25)); animation:litPop .6s .3s both cubic-bezier(.2,.9,.3,1.4);}
.fs-day.frozen i{border-color:#7cc4ff; color:#7cc4ff;} .fs-day.off small{opacity:.4;} /* v143: the daily streak screen — a freeze, a day off */
@keyframes litPop{from{transform:scale(.3);} to{transform:none;}}
.fs-bell{display:flex; justify-content:center;}
.fs-note{min-height:1em; font-size:13px !important;}
.fresh-card .fs-later{color:rgba(255,255,255,.65); font-size:13px; margin-top:8px;}
@media (prefers-reduced-motion: reduce){.fs-flame, .fs-day.lit i, .fresh-screen.show .fresh-card, body.tabs-arrive .tabbar{animation:none;}}
/* ROADMAP stage 4 (2026-11-02): «we moved» on an old address — on top of everything, under the status bar */
#moved-banner{position:fixed;left:0;right:0;top:0;z-index:9999;display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;background:var(--accent-fill, #d9a441);color:#1b1b1b;font-size:13.5px;line-height:1.4;box-shadow:0 4px 14px rgba(0,0,0,.25);}
#moved-banner div{flex:1 1 220px;display:flex;flex-direction:column;gap:2px;}
#moved-banner b{font-size:15px;}
#moved-banner .primary-btn{background:#1b1b1b;color:#fff;text-decoration:none;padding:8px 16px;border-radius:12px;}