/* Fun-Ture v2 — refined app-style design system */
:root,[data-theme="dark"]{
  --bg-base:#0D0B14; --bg2-base:#17131F;
  /* Rose (default) stays untinted — matches original vibe */
  --bg:var(--bg-base); --bg2:var(--bg2-base);
  --bg3:#1E1828; --bg4:#2A1F35;
  --card:rgba(255,250,245,.04); --card-h:rgba(255,250,245,.07); --card-strong:rgba(255,250,245,.09);
  --border:rgba(255,220,230,.08); --border2:rgba(255,220,230,.14); --border-accent:color-mix(in oklab,var(--rose) 32%,transparent);
  --text:#F1E9E3; --text2:#A89A96; --text3:#6E635F;
  --rose:#E8A5C0; --lavender:#B9A4E3; --apricot:#F2B988; --teal:#8BB8B4; --gold:#E8C87A; --coral:#F09090;
  --app-bloom-opacity:1; --app-bloom-soft-opacity:.64;
  --ring:0 0 0 1px rgba(255,220,230,.06) inset, 0 1px 0 rgba(255,220,230,.08) inset;
  --sh1:0 1px 2px rgba(0,0,0,.25); --sh2:0 4px 18px rgba(0,0,0,.35),0 1px 3px rgba(0,0,0,.2);
  --sh3:0 12px 40px rgba(0,0,0,.45),0 2px 8px rgba(0,0,0,.25);
  --radius:16px; --radius-sm:12px; --radius-lg:22px;
  --nav-h:76px; --top-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overscroll-behavior-y:contain}
body{font-family:'Inter Tight',-apple-system,sans-serif;background:var(--bg-base);background:var(--bg);color:var(--text);line-height:1.55;min-height:100dvh;letter-spacing:-.005em}
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(800px 600px at 15% -10%,color-mix(in oklab,var(--rose) 26%,transparent),transparent 65%),radial-gradient(700px 600px at 110% 20%,color-mix(in oklab,var(--lavender) 24%,transparent),transparent 65%),radial-gradient(700px 600px at 50% 110%,color-mix(in oklab,var(--lavender) 18%,transparent),transparent 60%)}
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.035 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");mix-blend-mode:overlay}
#root,.ft-screen{position:relative;z-index:1}
.ft-topbar,.ft-nav,.ft-fab{z-index:40}
input,select,button,textarea{font-family:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
::selection{background:color-mix(in oklab,var(--rose) 55%,transparent);color:#fff}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:99px}

[data-theme="light"]{
  --bg-base:#FAF5F0; --bg2-base:#FFFFFF;
  --bg:var(--bg-base); --bg2:var(--bg2-base);
  --bg3:#F3EBE3; --bg4:#EADFD4;
  --card:rgba(90,60,70,.04); --card-h:rgba(90,60,70,.07); --card-strong:rgba(90,60,70,.09);
  --border:rgba(90,60,70,.10); --border2:rgba(90,60,70,.16);
  --text:#2A1F28; --text2:#6B5862; --text3:#9E8C95;
  --rose:#C55F8A; --lavender:#8067C2; --apricot:#D97B3C; --teal:#5A8682; --gold:#B8944A; --coral:#C56868;
  --app-bloom-opacity:.84; --app-bloom-soft-opacity:.48;
  /* --border-accent inherits from :root (color-mix of var(--rose)) so it derives automatically */
}
[data-theme="light"] body::after{opacity:.25}

/* ============ PALETTE OVERRIDES (brand color variations) ============
   Only --rose and --lavender change — everything else (border-accent, body glow,
   hero bg, etc.) derives via color-mix so it all follows automatically. */
/* Non-rose palettes subtly tint the background + card surfaces. Rose keeps the original dark-purple vibe. */
html[data-palette]{
  --bg:color-mix(in oklab,var(--teal) 5%,color-mix(in oklab,var(--rose) 7%,var(--bg-base)));
  --bg2:color-mix(in oklab,var(--lavender) 7%,var(--bg2-base));
  --card:color-mix(in oklab,var(--rose) 7%,rgba(255,250,245,.045));
  --card-h:color-mix(in oklab,var(--rose) 10%,rgba(255,250,245,.075));
  --card-strong:color-mix(in oklab,var(--lavender) 9%,rgba(255,250,245,.1));
}
html[data-theme="light"][data-palette]{
  --bg:color-mix(in oklab,var(--teal) 6%,color-mix(in oklab,var(--rose) 8%,var(--bg-base)));
  --bg2:color-mix(in oklab,var(--lavender) 6%,var(--bg2-base));
  --card:color-mix(in oklab,var(--rose) 6%,rgba(90,60,70,.045));
  --card-h:color-mix(in oklab,var(--rose) 9%,rgba(90,60,70,.075));
  --card-strong:color-mix(in oklab,var(--lavender) 8%,rgba(90,60,70,.1));
}

/* Palettes now have real two-hue contrast so gradients actually gradient */
html[data-palette="peony"] { --rose:#E23595; --lavender:#C753D6; --apricot:#E37E67; --teal:#3C9999 }
html[data-palette="lilac"] { --rose:#786FD8; --lavender:#9C84EA; --apricot:#B878D3; --teal:#5A8FC2 }
html[data-palette="sorbet"]{ --rose:#D9614A; --lavender:#54A991; --apricot:#D99447; --teal:#4D9C8D }
html[data-palette="aurora"]{ --rose:#229F8B; --lavender:#6255D1; --apricot:#7D4EC2; --teal:#2FA2A0 }
html[data-palette="blush"] { --rose:#D95D82; --lavender:#C78B5F; --apricot:#DFA3B8; --teal:#8060B5 }
html[data-palette="sunset"]{ --rose:#F09090; --lavender:#E8C87A; --apricot:#DF8941; --teal:#6A4B8A }
html[data-palette="ocean"] { --rose:#7AC8EA; --lavender:#2F5EBD; --apricot:#4BAFC8; --teal:#2D7EAA }
html[data-palette="garden"]{ --rose:#A8C3A0; --lavender:#F2B988; --apricot:#D9964B; --teal:#4F8D81 }
html[data-palette="twilight"]{ --rose:#5547B4; --lavender:#A64187; --apricot:#B25A71; --teal:#326BAA }
html[data-palette="mono"]  { --rose:#C8C1CC; --lavender:#A89AC6; --apricot:#A88F82; --teal:#6E9290 }
html[data-theme="light"][data-palette="peony"] { --rose:#C93B89; --lavender:#9A43BC; --apricot:#C96E57; --teal:#2C8C8B }
html[data-theme="light"][data-palette="lilac"] { --rose:#6F62C9; --lavender:#8E74D9; --apricot:#A768BD; --teal:#417AAE }
html[data-theme="light"][data-palette="sorbet"]{ --rose:#C55A45; --lavender:#479C84; --apricot:#C7833B; --teal:#3B8F7E }
html[data-theme="light"][data-palette="aurora"]{ --rose:#1C8D7C; --lavender:#5145BD; --apricot:#7041B0; --teal:#238F90 }
html[data-theme="light"][data-palette="blush"] { --rose:#C44F75; --lavender:#A5754F; --apricot:#C9859F; --teal:#6C50A3 }
html[data-theme="light"][data-palette="sunset"]{ --rose:#C45B4A; --lavender:#B8944A; --apricot:#CF7A39; --teal:#5C407D }
html[data-theme="light"][data-palette="ocean"] { --rose:#3A8FBF; --lavender:#1E488F; --apricot:#3A9DB4; --teal:#246F98 }
html[data-theme="light"][data-palette="garden"]{ --rose:#5A8C4F; --lavender:#D97B3C; --apricot:#C9853E; --teal:#3C7F73 }
html[data-theme="light"][data-palette="twilight"]{ --rose:#4E3DA6; --lavender:#963C7D; --apricot:#9E4C63; --teal:#285E9F }
html[data-theme="light"][data-palette="mono"]  { --rose:#6B606F; --lavender:#7563A5; --apricot:#8F7A70; --teal:#5E817E }

/* SHELL */
.ft-app{min-height:100dvh;padding-top:calc(var(--top-h) + env(safe-area-inset-top,0));padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0) + 16px);position:relative;isolation:isolate}
.ft-app::before{content:'';position:fixed;inset:-22% -24%;z-index:0;pointer-events:none;background:radial-gradient(68vw 48vh at 10% 10%,color-mix(in oklab,var(--rose) 42%,transparent),transparent 70%),radial-gradient(70vw 50vh at 92% 14%,color-mix(in oklab,var(--lavender) 44%,transparent),transparent 72%),radial-gradient(72vw 54vh at 8% 94%,color-mix(in oklab,var(--apricot) 32%,transparent),transparent 74%),radial-gradient(74vw 56vh at 94% 92%,color-mix(in oklab,var(--teal) 38%,transparent),transparent 74%),radial-gradient(86vw 64vh at 48% 38%,color-mix(in oklab,var(--rose) 16%,transparent),transparent 78%),radial-gradient(90vw 68vh at 52% 72%,color-mix(in oklab,var(--teal) 18%,transparent),transparent 78%);opacity:var(--app-bloom-opacity);filter:blur(22px) saturate(1.38);transform:translate3d(0,0,0);animation:ft-app-bloom-drift 32s ease-in-out infinite alternate}
.ft-app::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(440px 300px at 50% 24%,color-mix(in oklab,var(--rose) 24%,transparent),transparent 72%),radial-gradient(460px 320px at 45% 62%,color-mix(in oklab,var(--lavender) 22%,transparent),transparent 74%),radial-gradient(420px 300px at 78% 48%,color-mix(in oklab,var(--teal) 18%,transparent),transparent 76%);opacity:var(--app-bloom-soft-opacity);filter:blur(14px) saturate(1.22);animation:ft-app-bloom-breathe 18s ease-in-out infinite alternate}
@keyframes ft-app-bloom-drift{from{transform:translate3d(-1.5%,-.8%,0) scale(1)}to{transform:translate3d(1.5%,1%,0) scale(1.04)}}
@keyframes ft-app-bloom-breathe{from{opacity:.38;transform:scale(.98)}to{opacity:var(--app-bloom-soft-opacity);transform:scale(1.04)}}

/* TOP BAR */
.ft-topbar{position:fixed;top:0;left:0;right:0;height:calc(var(--top-h) + env(safe-area-inset-top,0));padding-top:env(safe-area-inset-top,0);display:flex;align-items:center;justify-content:space-between;padding-left:18px;padding-right:18px;z-index:40;isolation:isolate;background:color-mix(in oklab,var(--teal) 9%,color-mix(in oklab,var(--rose) 6%,var(--bg-base)))}
.ft-topbar::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in oklab,var(--rose) 22%,var(--bg-base)) 0%,color-mix(in oklab,var(--lavender) 14%,color-mix(in oklab,var(--bg-base) 70%,transparent)) 68%,transparent 100%);backdrop-filter:blur(22px) saturate(1.35);-webkit-backdrop-filter:blur(22px) saturate(1.35)}
.ft-top-title{font-family:'Playfair Display',serif;font-weight:700;font-size:17px;letter-spacing:-.01em;background:linear-gradient(110deg,var(--apricot),var(--rose),var(--lavender),var(--rose),var(--apricot));background-size:300% 300%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:ft-title-shimmer 14s ease-in-out infinite}
@keyframes ft-title-shimmer{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.ft-top-date{font-family:'Caveat',cursive;font-size:14px;color:var(--text3);margin-top:-2px}
.ft-top-avatars{display:flex;gap:-6px;align-items:center}
.ft-top-avatars .avatar:not(:first-child){margin-left:-8px}

/* BOTTOM NAV */
.ft-nav{position:fixed;left:0;right:0;bottom:0;height:calc(var(--nav-h) + env(safe-area-inset-bottom,0));padding-bottom:env(safe-area-inset-bottom,0);z-index:40;display:flex;align-items:stretch;justify-content:space-around;border-top:1px solid var(--border);isolation:isolate;background:color-mix(in oklab,var(--lavender) 8%,color-mix(in oklab,var(--teal) 4%,var(--bg2-base)))}
.ft-nav::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,color-mix(in oklab,var(--lavender) 24%,var(--bg2-base)) 0%,color-mix(in oklab,var(--teal) 16%,color-mix(in oklab,var(--bg2-base) 72%,transparent)) 100%);backdrop-filter:blur(26px) saturate(1.45);-webkit-backdrop-filter:blur(26px) saturate(1.45)}
.ft-nav-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--text3);font-size:10px;font-weight:500;letter-spacing:.02em;padding:8px 2px;transition:color .2s;position:relative}
.ft-nav-btn span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ft-nav-btn.a{color:var(--text)}
.ft-nav-btn.a::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:2px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--rose),var(--lavender));box-shadow:0 0 10px color-mix(in oklab,var(--rose) 50%,transparent)}
.ft-nav-btn svg{transition:transform .2s}
.ft-nav-btn.a svg{transform:translateY(-1px) scale(1.05);color:var(--rose)}

/* SCREEN */
.ft-screen{max-width:520px;margin:0 auto;padding:16px 16px 8px}
.ft-screen-title{font-family:'Playfair Display',serif;font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-bottom:4px}
.ft-screen-sub{font-family:'Caveat',cursive;font-size:18px;color:var(--text2);margin-bottom:20px}
.ft-section-label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:20px 0 10px 4px;display:flex;align-items:center;gap:8px}
.ft-section-label::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--border2),transparent)}
.ft-section-label.ft-collapsible{transition:color .15s}
.ft-section-label.ft-collapsible:hover{color:var(--text2)}
.ft-collapse-arrow{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;margin-left:auto;margin-right:2px;font-size:13px;color:var(--text2);background:color-mix(in oklab,var(--rose) 10%,var(--card));border:1px solid var(--border);transition:transform .2s,background .2s;font-weight:600;text-transform:none;letter-spacing:normal;line-height:1;order:99}
.ft-section-label.ft-collapsible:hover .ft-collapse-arrow{background:color-mix(in oklab,var(--rose) 18%,var(--card));transform:scale(1.08)}

/* CARD */
.ft-card{background:linear-gradient(145deg,color-mix(in oklab,var(--rose) 5%,var(--card)),color-mix(in oklab,var(--teal) 4%,var(--card)));backdrop-filter:blur(18px) saturate(1.16);-webkit-backdrop-filter:blur(18px) saturate(1.16);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--ring);padding:16px;transition:all .22s cubic-bezier(.4,0,.2,1)}
.ft-card.hoverable:hover{background:var(--card-h);border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--sh2),var(--ring)}
.ft-card.hoverable:active{transform:translateY(0) scale(.995)}

/* BTN */
.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;font-weight:600;letter-spacing:-.005em;transition:all .2s,transform .1s;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.ft-btn:active{transform:scale(.97)}
.ft-item-cb:active{transform:scale(.88)}
@keyframes ft-fade-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.ft-btn:active{transform:scale(.96)}
.ft-btn-solid{background:linear-gradient(135deg,var(--rose),var(--lavender));color:#fff;box-shadow:0 2px 10px color-mix(in oklab,var(--rose) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.2)}
.ft-btn-solid:hover{filter:brightness(1.08);transform:translateY(-1px)}
.ft-btn-ghost{background:var(--card);border:1px solid var(--border2);color:var(--text);backdrop-filter:blur(8px)}
.ft-btn-ghost:hover{background:var(--card-h);border-color:var(--border-accent)}
.ft-btn-soft{background:color-mix(in oklab,var(--lavender) 14%,transparent);color:var(--lavender);border:1px solid color-mix(in oklab,var(--lavender) 22%,transparent)}
.ft-btn-danger{background:rgba(240,144,144,.12);color:var(--coral);border:1px solid rgba(240,144,144,.25)}
.ft-btn-sm{padding:7px 14px;font-size:12px}
.ft-btn-md{padding:11px 18px;font-size:14px}
.ft-btn-lg{padding:14px 22px;font-size:15px}

/* INPUT */
.ft-input,.ft-select,.ft-textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border2);background:var(--card);color:var(--text);font-size:14px;outline:none;transition:all .2s;font-family:inherit}
.ft-input::placeholder{color:var(--text3)}
.ft-input:focus,.ft-select:focus,.ft-textarea:focus{border-color:var(--border-accent);box-shadow:0 0 0 4px color-mix(in oklab,var(--rose) 08%,transparent)}
.ft-textarea{resize:none;min-height:90px;line-height:1.5}
.ft-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);font-weight:600;margin-bottom:6px;display:block}

/* SEARCH */
.ft-search{position:relative;margin-bottom:14px}
.ft-search input{padding-left:40px}
.ft-search svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text3)}

/* HOME — tonight hero */
.ft-hero{background:linear-gradient(135deg,color-mix(in oklab,var(--rose) 20%,transparent),color-mix(in oklab,var(--lavender) 16%,transparent) 50%,color-mix(in oklab,var(--apricot) 12%,transparent));border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:16px 18px;position:relative;overflow:hidden;box-shadow:var(--ring),0 8px 32px color-mix(in oklab,var(--rose) 12%,transparent)}
.ft-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(400px 200px at 80% -20%,rgba(232,200,122,.18),transparent 60%);pointer-events:none}
.ft-hero-eyebrow{font-family:'Caveat',cursive;font-size:17px;color:var(--rose);margin-bottom:4px}
.ft-hero h2,.ft-hero-title{font-family:'Playfair Display',serif;font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-bottom:10px;min-height:27px}
.ft-hero-row .ft-btn{padding:9px 16px;font-size:13.5px}
.ft-hero-title{animation:ft-hero-in .28s cubic-bezier(.22,1,.36,1)}
.ft-hero.shuffling .ft-hero-title{animation:ft-hero-blur .14s ease-in-out infinite alternate}
.ft-hero.shuffling::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,color-mix(in oklab,var(--rose) 18%,transparent),transparent 65%);animation:ft-pulse .7s ease-in-out infinite;pointer-events:none}
@keyframes ft-hero-in{from{transform:translateY(6px);opacity:0;filter:blur(4px)}to{transform:translateY(0);opacity:1;filter:blur(0)}}
@keyframes ft-hero-blur{from{filter:blur(0) brightness(1);transform:translateY(0)}to{filter:blur(2px) brightness(1.15);transform:translateY(-1px)}}
@keyframes ft-pulse{0%,100%{opacity:.4}50%{opacity:1}}
.ft-hero-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ft-chip{font-size:11px;padding:3px 10px;border-radius:99px;background:rgba(255,255,255,.06);color:var(--text2);border:1px solid var(--border);letter-spacing:-.003em}
.ft-chip.accent{background:color-mix(in oklab,var(--rose) 14%,transparent);color:var(--rose);border-color:color-mix(in oklab,var(--rose) 25%,transparent)}
.ft-hero-row{display:flex;gap:8px}
.ft-hero-row .ft-btn{flex:1}

/* QUICK ACTIONS */
.ft-qa{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:10px}
.ft-qa button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);color:var(--text);font-size:11px;font-weight:500;text-align:center;line-height:1.25;cursor:pointer;transition:all .18s;backdrop-filter:blur(12px)}
.ft-qa button:hover{background:var(--card-h);border-color:var(--border-accent);transform:translateY(-1px)}
.ft-qa button:active{transform:scale(.98)}
.ft-qa-ico{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--lavender) 14%,transparent);color:var(--lavender);flex-shrink:0;font-size:14px}
.ft-qa-ico.rose{background:color-mix(in oklab,var(--rose) 14%,transparent);color:var(--rose)}
.ft-qa-ico.gold{background:rgba(232,200,122,.14);color:var(--gold)}
.ft-qa-ico.teal{background:rgba(139,184,180,.14);color:var(--teal)}
.ft-qa-ico.apricot{background:rgba(242,185,136,.14);color:var(--apricot)}
.ft-qa-ico.lav{background:color-mix(in oklab,var(--lavender) 14%,transparent);color:var(--lavender);font-size:17px}

/* THIS OR THAT */
.ft-tot{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--border2);background:var(--card);padding:0;cursor:pointer;transition:all .25s cubic-bezier(.22,1,.36,1);aspect-ratio:3/4;display:flex}
.ft-tot:hover{border-color:var(--border-accent);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.35)}
.ft-tot-bd{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35;filter:saturate(1.2);z-index:0}
.ft-tot-bd::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(13,11,20,.85) 90%)}
[data-theme="light"] .ft-tot-bd::after{background:linear-gradient(180deg,transparent 20%,rgba(250,245,240,.95) 90%)}
.ft-tot-inner{position:relative;z-index:1;padding:12px;display:flex;flex-direction:column;gap:6px;width:100%;height:100%;justify-content:flex-end;text-align:left;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.4) 100%)}
[data-theme="light"] .ft-tot-inner{background:linear-gradient(180deg,transparent 50%,rgba(255,255,255,.6) 100%)}
.ft-tot-poster{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:132px;border-radius:10px;object-fit:cover;box-shadow:0 6px 16px rgba(0,0,0,.45);z-index:0}
.ft-tot-glyph{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:56px;opacity:.6;z-index:0}
.ft-tot-cat{font-size:9.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin-top:auto}
.ft-tot-text{font-family:'Playfair Display',serif;font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.18;color:var(--text);word-break:break-word;text-wrap:pretty}
.ft-tot-rating{font-size:11px;color:var(--gold);font-weight:700}

/* SURPRISE */
.ft-surprise{position:relative;overflow:hidden;border-radius:18px;border:1px solid var(--border2);background:var(--card);min-height:320px;transition:opacity .3s}
.ft-surprise-bd{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.5;filter:saturate(1.2) blur(2px);z-index:0;animation:ft-surprise-in .6s ease}
.ft-surprise-bd::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,11,20,.5) 0%,rgba(13,11,20,.92) 90%)}
[data-theme="light"] .ft-surprise-bd::after{background:linear-gradient(180deg,rgba(250,245,240,.55) 0%,rgba(250,245,240,.94) 90%)}
.ft-surprise-inner{position:relative;z-index:1;padding:24px 22px 22px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.ft-surprise-poster{width:110px;height:165px;border-radius:12px;object-fit:cover;box-shadow:0 10px 30px rgba(0,0,0,.5);margin:4px 0 12px;animation:ft-surprise-in .45s cubic-bezier(.22,1,.36,1)}
.ft-surprise-glyph{font-size:64px;margin:10px 0;opacity:.7}
.ft-surprise-cat{font-size:10.5px;color:var(--text3);text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.ft-surprise-title{font-family:'Playfair Display',serif;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.15;margin-top:4px;transition:filter .2s}
.ft-surprise-title.blur{filter:blur(6px)}
.ft-surprise-ov{font-size:12.5px;color:var(--text2);font-style:italic;line-height:1.5;max-width:320px;margin-top:4px}
.ft-surprise-rating{color:var(--gold);font-weight:700;letter-spacing:.02em;margin-top:6px;font-size:13px}
@keyframes ft-surprise-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}

/* LIST — category chips (sticky under topbar) */
.ft-catrow-sticky{position:sticky;top:calc(var(--top-h) + env(safe-area-inset-top,0));z-index:25;margin:-4px -16px 4px;padding:6px 16px 2px;background:var(--bg);border-bottom:1px solid var(--border)}
.ft-catrow-sticky::before{content:'';position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(to bottom,var(--bg),transparent);pointer-events:none}
.ft-catrow{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.ft-catrow::-webkit-scrollbar{display:none}
.ft-catchip{flex-shrink:0;padding:7px 14px;border-radius:99px;background:var(--card);border:1px solid var(--border);color:var(--text2);font-size:12.5px;font-weight:500;white-space:nowrap;transition:all .2s;letter-spacing:-.005em;backdrop-filter:blur(10px)}
.ft-catchip:hover{color:var(--text)}
.ft-catchip.a{color:var(--text);background:var(--card-strong);border-color:var(--border-accent);box-shadow:0 0 0 3px color-mix(in oklab,var(--rose) 08%,transparent)}
.ft-catchip.edit{animation:ft-wiggle 1.8s ease-in-out infinite;border-style:dashed}
.ft-catchip.new{color:var(--rose);border-style:dashed;border-color:var(--border-accent);background:transparent}
.ft-catchip.new:hover{background:color-mix(in oklab,var(--rose) 08%,transparent)}
@keyframes ft-wiggle{0%,100%{transform:rotate(-.6deg)}50%{transform:rotate(.6deg)}}

/* PLAY SCREEN */
.ft-play-board{background:linear-gradient(135deg,color-mix(in oklab,var(--rose) 14%,transparent),color-mix(in oklab,var(--lavender) 14%,transparent) 50%,color-mix(in oklab,var(--apricot) 10%,transparent));border:1px solid var(--border-accent);border-radius:var(--radius-lg);padding:22px 18px;box-shadow:var(--ring),0 8px 32px color-mix(in oklab,var(--rose) 12%,transparent);position:relative;overflow:hidden}
.ft-play-board::before{content:'';position:absolute;inset:0;background:radial-gradient(300px 200px at 100% 0%,rgba(232,200,122,.15),transparent 60%);pointer-events:none}
.ft-play-game-label{display:flex;align-items:center;gap:9px;margin:-4px 0 18px;position:relative;z-index:1}
.ft-play-game-tiles{font-size:17px;filter:saturate(1.1)}
.ft-play-game-name{font-family:'Playfair Display',serif;font-weight:700;font-size:16px;letter-spacing:-.01em;background:linear-gradient(110deg,var(--apricot),var(--rose),var(--lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.ft-play-game-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border-accent),transparent)}
.ft-play-game-total{font-size:10.5px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.ft-play-vs{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:18px;position:relative}
.ft-play-side{flex:1;text-align:center;max-width:140px;position:relative}
.ft-play-side .avatar{margin:0 auto 8px}
.ft-play-num{font-family:'Playfair Display',serif;font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;background:linear-gradient(135deg,var(--rose),var(--lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ft-play-name{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-top:4px;font-weight:600}
.ft-play-fire{position:absolute;top:-6px;right:10px;font-size:11px;color:var(--gold);background:rgba(232,200,122,.15);padding:2px 7px;border-radius:99px;border:1px solid rgba(232,200,122,.3);font-weight:600}
.ft-play-vs-text{font-family:'Playfair Display',serif;font-style:italic;font-size:20px;color:var(--text3);padding:0 4px}
.ft-play-bar{position:relative;height:6px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:14px}
.ft-play-bar-fill{height:100%;background:linear-gradient(90deg,var(--rose),var(--lavender));border-radius:99px;transition:width .6s cubic-bezier(.22,1,.36,1)}
.ft-play-bar-lbl{position:absolute;top:-18px;font-size:10px;color:var(--text3);letter-spacing:.05em}
.ft-play-bar-lbl.l{left:0}
.ft-play-bar-lbl.r{right:0}
.ft-play-actions{display:flex;gap:8px}

.ft-streak-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ft-streak-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 12px;text-align:center;position:relative;backdrop-filter:blur(12px)}
.ft-streak-card .avatar{margin:0 auto 8px}
.ft-streak-flame{position:absolute;top:10px;right:12px;font-size:18px;filter:drop-shadow(0 0 8px rgba(242,185,136,.6))}
.ft-streak-n{font-family:'Playfair Display',serif;font-size:28px;font-weight:700;letter-spacing:-.015em;color:var(--apricot)}
.ft-streak-l{font-size:11px;color:var(--text3);margin-top:2px}

.ft-ach-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:420px){.ft-ach-grid{grid-template-columns:repeat(3,1fr)}}
.ft-ach{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 12px 16px;text-align:center;opacity:.5;transition:all .25s;backdrop-filter:blur(10px);min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}
.ft-ach.on{opacity:1;border-color:var(--border-accent);background:linear-gradient(135deg,color-mix(in oklab,var(--rose) 08%,transparent),color-mix(in oklab,var(--lavender) 06%,transparent));box-shadow:0 0 0 3px color-mix(in oklab,var(--rose) 05%,transparent)}
.ft-ach-ico{font-size:28px;margin-bottom:6px;filter:grayscale(1);transition:filter .25s;line-height:1}
.ft-ach.on .ft-ach-ico{filter:none}
.ft-ach-ttl{font-family:'Playfair Display',serif;font-size:13px;font-weight:700;letter-spacing:-.01em;margin-bottom:4px;line-height:1.15}
.ft-ach-sub{font-size:10.5px;color:var(--text3);line-height:1.35}

/* NUDGE CARD (inside expanded item) */
.ft-nc{margin-top:10px;padding:12px;border-radius:12px;background:color-mix(in oklab,var(--lavender) 06%,transparent);border:1px solid color-mix(in oklab,var(--lavender) 22%,transparent)}
.ft-nc-top{display:flex;gap:10px;margin-bottom:8px}
.ft-nc-photo{width:72px;height:72px;border-radius:10px;object-fit:cover;flex-shrink:0;background:var(--card-strong)}
.ft-nc-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ft-nc-hood{font-size:11.5px;color:var(--text2);display:flex;align-items:center;gap:4px}
.ft-nc-rating{font-size:11.5px;color:var(--gold);font-weight:600}
.ft-nc-hours{font-size:11px;color:var(--text3)}
.ft-nc-pull{font-size:12.5px;font-style:italic;color:var(--text);line-height:1.5;border-left:2px solid var(--border-accent);padding:2px 0 2px 10px;margin:8px 0}
.ft-nc-desc{font-size:12.5px;color:var(--text2);line-height:1.5;margin:6px 0}
.ft-nc-addr{font-size:11px;color:var(--text3);margin-top:6px;display:flex;align-items:center;gap:4px}
.ft-nc-near{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}
.ft-nc-near-title{font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--text3);font-weight:600;margin-bottom:4px}
.ft-nc-near-list{font-size:11.5px;color:var(--text2);line-height:1.5}
.ft-nc-link{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:var(--lavender);margin-top:8px;text-decoration:none;font-weight:500}
.ft-nc-link:hover{color:var(--rose)}

/* ITEM CARD */
.ft-item{display:flex;gap:12px;padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);margin-bottom:8px;transition:all .22s;position:relative;backdrop-filter:blur(14px)}
.ft-item:hover{background:var(--card-h);border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--sh1)}
.ft-item.done{opacity:.55}
.ft-item.done .ft-item-text{text-decoration:line-through;text-decoration-color:var(--text3);color:var(--text3)}
.ft-item-cb{width:24px;height:24px;border-radius:8px;border:1.5px solid var(--border2);background:var(--card);flex-shrink:0;margin-top:1px;display:flex;align-items:center;justify-content:center;color:transparent;transition:all .2s;cursor:pointer}
.ft-item-cb:hover{border-color:var(--border-accent)}
.ft-item-cb.checked{background:linear-gradient(135deg,var(--rose),var(--lavender));border-color:transparent;color:#fff;box-shadow:0 0 0 3px color-mix(in oklab,var(--rose) 15%,transparent)}
/* Satisfying pop + glow halo + checkmark draw-in when an item is just checked off.
   Durations tuned to feel celebratory without being annoying — ~1.2s total. */
@keyframes ft-cb-pop{0%{transform:scale(1)}20%{transform:scale(1.5) rotate(-4deg)}40%{transform:scale(.82) rotate(3deg)}60%{transform:scale(1.15) rotate(-1deg)}80%{transform:scale(.96)}100%{transform:scale(1) rotate(0)}}
@keyframes ft-cb-glow{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--rose) 60%,transparent),0 0 0 0 color-mix(in oklab,var(--lavender) 40%,transparent)}50%{box-shadow:0 0 0 18px transparent,0 0 26px 10px color-mix(in oklab,var(--lavender) 55%,transparent)}100%{box-shadow:0 0 0 3px color-mix(in oklab,var(--rose) 15%,transparent)}}
@keyframes ft-check-draw{0%{opacity:0;transform:scale(.2) rotate(-25deg)}40%{opacity:1;transform:scale(1.35) rotate(8deg)}70%{transform:scale(.95) rotate(-3deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
/* !important beats the inherited `transition:all .2s` on .ft-item-cb, which would
   otherwise swallow the keyframe transform. */
.ft-item-cb.pop{animation:ft-cb-pop 1s cubic-bezier(.34,1.56,.64,1),ft-cb-glow 1.2s ease-out !important}
.ft-item-cb.pop svg{animation:ft-check-draw .7s cubic-bezier(.34,1.56,.64,1) !important}

/* === Undo toast === floats above the bottom nav, auto-dismisses after 5s.
   width:fit-content keeps the pill hugging its content — otherwise flex stretches
   it awkwardly wide when the message is short. */
.ft-undo-toast{position:fixed;bottom:calc(env(safe-area-inset-bottom,0) + 96px);left:50%;transform:translateX(-50%);background:rgba(18,14,28,.96);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 6px 6px 18px;display:inline-flex;align-items:center;gap:10px;color:var(--text);font-size:13px;line-height:1.25;box-shadow:0 12px 36px rgba(0,0,0,.5);z-index:200;animation:ft-toast-in .3s cubic-bezier(.22,1,.36,1);width:fit-content;max-width:calc(100vw - 40px)}
.ft-undo-toast-msg{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55vw}
.ft-undo-toast-btn{background:linear-gradient(135deg,var(--rose),var(--lavender));color:#fff;border:none;border-radius:999px;padding:7px 16px;font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;flex-shrink:0;line-height:1}
@keyframes ft-toast-in{0%{opacity:0;transform:translateX(-50%) translateY(24px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes ft-toast-out{0%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(24px)}}
.ft-item-body{flex:1;min-width:0}
.ft-item-text{font-size:14.5px;line-height:1.4;color:var(--text);word-break:break-word}
.ft-item-meta{display:flex;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap;font-size:11px;color:var(--text3)}
.ft-item-meta .avatar{margin-right:-2px}
.ft-item-poster{width:52px;height:74px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--card-strong);box-shadow:var(--sh1)}
.ft-item-poster img{width:100%;height:100%;object-fit:cover;display:block}
.ft-badge{font-size:10px;padding:2px 8px;border-radius:99px;letter-spacing:.02em}
.ft-badge-status{background:rgba(139,184,180,.14);color:var(--teal)}
.ft-badge-tag{background:color-mix(in oklab,var(--lavender) 14%,transparent);color:var(--lavender)}
.ft-badge-mood{background:color-mix(in oklab,var(--rose) 12%,transparent);color:var(--rose);font-style:italic}

/* MEDIA ITEM (movies/TV with TMDB data) */
.ft-mitem{position:relative;border-radius:var(--radius);overflow:hidden;margin-bottom:10px;border:1px solid var(--border);background:var(--card);transition:all .22s;backdrop-filter:blur(14px)}
.ft-mitem:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--sh2)}
.ft-mitem.done{opacity:.55}
.ft-mitem.done .ft-mitem-title{text-decoration:line-through;text-decoration-color:var(--text3);color:var(--text3)}
.ft-mitem-bd{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.22;filter:saturate(1.1) blur(.5px);z-index:0;border-radius:inherit}
.ft-mitem-bd::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--card-strong) 0%,rgba(0,0,0,.45) 40%,rgba(0,0,0,.15) 100%)}

/* Landscape banner layout (for og_image / nudge cards with horizontal-ish photos) */
.ft-mitem.landscape{display:flex;flex-direction:column}
.ft-mitem.landscape .ft-mitem-hero{position:relative;width:100%;height:160px;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0}
.ft-mitem.landscape .ft-mitem-hero img{width:100%;height:100%;object-fit:cover;display:block}
.ft-mitem.landscape .ft-mitem-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.55) 100%)}
.ft-mitem.landscape .ft-mitem-hero-cb{position:absolute;top:10px;left:10px;z-index:2}
.ft-mitem.landscape .ft-mitem-hero-title{position:absolute;bottom:10px;left:14px;right:14px;z-index:2;font-family:'Playfair Display',serif;font-size:17px;font-weight:700;color:#fff;letter-spacing:-.01em;line-height:1.15;text-shadow:0 2px 8px rgba(0,0,0,.4)}
.ft-mitem.landscape .ft-mitem-hero-tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ft-mitem.landscape .ft-mitem-hero-hint{position:absolute;bottom:10px;right:10px;z-index:2;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.ft-mitem.landscape .ft-mitem-below{padding:12px 14px 14px}
.ft-mitem-inner{position:relative;z-index:1;display:block;padding:14px;background:linear-gradient(90deg,rgba(13,11,20,.55) 0%,rgba(13,11,20,.25) 100%)}
.ft-mitem-inner::after{content:'';display:table;clear:both}
.ft-mitem-inner > .ft-item-cb{float:left;margin-right:10px}
.ft-mitem-inner > .ft-mitem-poster{float:left;margin-right:12px;margin-bottom:8px}
.ft-mitem-body{display:block;min-width:0}
[data-theme="light"] .ft-mitem-inner{background:linear-gradient(90deg,rgba(250,245,240,.85) 0%,rgba(250,245,240,.55) 100%)}
.ft-mitem-poster{width:64px;height:96px;border-radius:10px;overflow:hidden;flex-shrink:0;box-shadow:0 4px 14px rgba(0,0,0,.4);background:var(--card-strong);position:relative;align-self:flex-start}
.ft-mitem-poster img{width:100%;height:100%;object-fit:cover}
.ft-mitem-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s cubic-bezier(.4,0,.2,1)}
.ft-mitem-poster-tappable{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ft-mitem-poster-tappable:active img{transform:scale(.96)}
.ft-mitem-poster-hint{position:absolute;bottom:5px;right:5px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.4);opacity:.92;transition:opacity .2s,transform .2s}
.ft-mitem-poster-tappable:hover .ft-mitem-poster-hint{opacity:1;transform:scale(1.1)}
.ft-mitem-details-chip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:600;padding:2.5px 9px;border-radius:99px;background:linear-gradient(135deg,color-mix(in oklab,var(--lavender) 22%,transparent),color-mix(in oklab,var(--rose) 18%,transparent));color:var(--lavender);border:1px solid color-mix(in oklab,var(--lavender) 35%,transparent);cursor:pointer;letter-spacing:.01em;transition:transform .15s,box-shadow .15s,background .2s;-webkit-tap-highlight-color:transparent}
.ft-mitem-details-chip:hover{background:linear-gradient(135deg,color-mix(in oklab,var(--lavender) 32%,transparent),color-mix(in oklab,var(--rose) 26%,transparent));box-shadow:0 2px 8px color-mix(in oklab,var(--lavender) 25%,transparent)}
.ft-mitem-details-chip:active{transform:scale(.94)}
.ft-mitem-body{flex:1;min-width:0}
.ft-mitem-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.2;margin-bottom:5px}
.ft-mitem-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:5px;font-size:11px}
.ft-mitem-year{color:var(--text2);font-weight:500}
.ft-mitem-rating{color:var(--gold);font-weight:700;letter-spacing:.01em}
.ft-mitem-type{font-size:9.5px;padding:2px 7px;border-radius:99px;background:color-mix(in oklab,var(--lavender) 15%,transparent);color:var(--lavender);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.ft-mitem-ov{font-size:12px;color:var(--text2);line-height:1.45;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;font-style:italic;opacity:.92;word-break:break-word}

/* MEMORIES */
.ft-mem-month{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;letter-spacing:-.015em;margin:22px 0 10px 4px;display:flex;align-items:baseline;gap:10px}
.ft-mem-month .count{font-family:'Caveat',cursive;font-weight:500;font-size:16px;color:var(--text3)}
.ft-mem{display:flex;gap:14px;padding:16px;border-radius:var(--radius);background:var(--card);border:1px solid var(--border);margin-bottom:10px;backdrop-filter:blur(14px);transition:all .22s;position:relative;overflow:hidden}
.ft-mem:hover{background:var(--card-h);border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--sh2)}
.ft-mem::before{content:'';position:absolute;left:0;top:20%;bottom:20%;width:2px;border-radius:0 2px 2px 0;background:linear-gradient(180deg,var(--rose),var(--lavender))}
.ft-mem-img{width:72px;height:96px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--card-strong)}
.ft-mem-img img{width:100%;height:100%;object-fit:cover}
.ft-mem-body{flex:1;min-width:0}
.ft-mem-date{font-family:'Caveat',cursive;font-size:14px;color:var(--text3)}
.ft-mem-title{font-family:'Playfair Display',serif;font-size:16px;font-weight:700;line-height:1.2;margin:2px 0 6px;letter-spacing:-.01em}
.ft-mem-who{display:flex;gap:6px;align-items:center;font-size:11px;color:var(--text2);margin-top:6px}
.ft-mem-placeholder{width:72px;height:96px;border-radius:8px;background:linear-gradient(135deg,color-mix(in oklab,var(--rose) 15%,transparent),color-mix(in oklab,var(--lavender) 15%,transparent));flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.7}
.ft-mem-fav{position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;border:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;font-family:inherit;background:rgba(255,255,255,.88);color:#b86a8a;box-shadow:0 2px 8px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.04);transition:transform .15s cubic-bezier(.22,1,.36,1),background .2s,color .2s}
[data-theme="dark"] .ft-mem-fav{background:rgba(30,24,40,.85);color:var(--text2);box-shadow:0 2px 8px rgba(0,0,0,.35),0 0 0 1px rgba(255,220,230,.1)}
.ft-mem-fav:hover{transform:scale(1.12)}
.ft-mem-fav:active{transform:scale(.92)}
.ft-mem-fav.on{background:linear-gradient(135deg,var(--rose),var(--lavender));color:#fff;box-shadow:0 2px 10px color-mix(in oklab,var(--rose) 55%,transparent),0 0 0 1px rgba(255,255,255,.3) inset}
.ft-mem-fav.on:hover{transform:scale(1.12);box-shadow:0 4px 14px color-mix(in oklab,var(--rose) 65%,transparent),0 0 0 1px rgba(255,255,255,.3) inset}

/* US SCREEN */
.ft-profile-card{text-align:center;padding:16px 18px}
.ft-profile-names{display:flex;justify-content:center;gap:12px;margin-bottom:10px}
.ft-profile-name{text-align:center}
.ft-profile-name .avatar{margin:0 auto 6px}
.ft-profile-name-text{font-family:'Playfair Display',serif;font-size:14px;font-weight:700}
.ft-profile-name-role{font-family:'Caveat',cursive;font-size:12px;color:var(--text3)}
.ft-profile-amp{align-self:center;font-family:'Playfair Display',serif;font-style:italic;font-size:18px;color:var(--text3);margin-top:14px}

.ft-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.ft-stat{text-align:center;padding:9px 6px;border-radius:var(--radius-sm);background:var(--card);border:1px solid var(--border)}
.ft-stat-n{font-family:'Playfair Display',serif;font-size:20px;font-weight:700;color:var(--text);letter-spacing:-.015em}
.ft-stat-l{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin-top:2px}

/* FAB */
.ft-fab{position:fixed;bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0) + 16px);right:18px;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--rose),var(--lavender));color:#fff;box-shadow:0 8px 24px color-mix(in oklab,var(--rose) 35%,transparent),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s cubic-bezier(.22,1,.36,1),opacity .2s ease;z-index:35;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.ft-fab:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 12px 32px color-mix(in oklab,var(--rose) 45%,transparent)}
.ft-fab:active{transform:scale(.95)}
.ft-fab.ft-fab-dragging{transition:none;cursor:grabbing;transform:scale(1.12);box-shadow:0 16px 40px color-mix(in oklab,var(--rose) 55%,transparent),0 4px 12px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);opacity:.95}

/* Subtle seasonal accent — a gentle tint blended over the background. */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease,background .4s ease}
html[data-season="fall"]   body::before{opacity:.04;background:radial-gradient(ellipse at top,rgba(242,185,136,.6) 0%,transparent 55%),radial-gradient(ellipse at bottom right,color-mix(in oklab,var(--rose) 40%,transparent) 0%,transparent 60%)}
html[data-season="winter"] body::before{opacity:.035;background:radial-gradient(ellipse at top,rgba(164,195,227,.6) 0%,transparent 55%),radial-gradient(ellipse at bottom,color-mix(in oklab,var(--lavender) 50%,transparent) 0%,transparent 60%)}
html[data-season="spring"] body::before{opacity:.035;background:radial-gradient(ellipse at top,color-mix(in oklab,var(--rose) 55%,transparent) 0%,transparent 55%),radial-gradient(ellipse at bottom,color-mix(in oklab,var(--lavender) 40%,transparent) 0%,transparent 60%)}
html[data-season="summer"] body::before{opacity:.035;background:radial-gradient(ellipse at top,rgba(232,200,122,.55) 0%,transparent 55%),radial-gradient(ellipse at bottom,rgba(242,185,136,.45) 0%,transparent 60%)}
html[data-theme="light"][data-season="fall"]   body::before{opacity:.06}
html[data-theme="light"][data-season="winter"] body::before{opacity:.055}
html[data-theme="light"][data-season="spring"] body::before{opacity:.06}
html[data-theme="light"][data-season="summer"] body::before{opacity:.055}
/* Block all interactions briefly after FAB release so drop-on-card doesn't trigger card */
html.ft-fab-just-dragged *{pointer-events:none!important}
html.ft-fab-just-dragged .ft-fab,html.ft-fab-just-dragged .ft-fab *{pointer-events:auto!important}

/* SHEET */
.ft-sheet-ov{position:fixed;inset:0;z-index:100;background:rgba(10,8,18,.65);backdrop-filter:blur(8px);display:flex;align-items:flex-end;justify-content:center;animation:fade .18s ease;overscroll-behavior:contain;touch-action:none}
.ft-sheet{background:var(--bg2);border-radius:22px 22px 0 0;padding:10px 18px calc(var(--nav-h) + env(safe-area-inset-bottom,0) + 20px);width:100%;max-width:520px;animation:up .28s cubic-bezier(.22,1,.36,1);border-top:1px solid var(--border2);box-shadow:0 -12px 40px rgba(0,0,0,.5);max-height:90vh;overflow-y:auto;transform:translate3d(0,0,0);backface-visibility:hidden;overscroll-behavior:none;-webkit-overflow-scrolling:touch;touch-action:pan-y}
.ft-sheet.dragging{transition:none!important}
.ft-sheet-ov{-webkit-tap-highlight-color:transparent}
.ft-sheet-handle{width:40px;height:4px;border-radius:99px;background:var(--border2);margin:6px auto 14px}
.ft-sheet-title{font-family:'Playfair Display',serif;font-weight:700;font-size:18px;margin-bottom:14px;letter-spacing:-.01em}

/* MODAL */
.ft-modal-ov{position:fixed;inset:0;z-index:100;background:rgba(10,8,18,.70);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;padding:16px;animation:fade .18s ease}
.ft-modal{background:var(--bg2);border-radius:22px;padding:22px;width:100%;max-width:400px;border:1px solid var(--border2);max-height:90vh;overflow-y:auto;animation:pop .26s cubic-bezier(.22,1,.36,1);box-shadow:var(--sh3)}
.ft-modal.wide{max-width:520px}
.ft-modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.ft-modal-head h3{font-family:'Playfair Display',serif;font-weight:700;font-size:19px;letter-spacing:-.01em}
.ft-close-btn{width:30px;height:30px;border-radius:50%;background:var(--card);border:1px solid var(--border);color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .2s}
.ft-close-btn:hover{background:var(--card-h);color:var(--text);transform:rotate(90deg)}

@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes up{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes pop{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}}

/* EMPTY */
.ft-empty{text-align:center;padding:56px 20px;color:var(--text3)}
.ft-empty-glyph{font-size:36px;margin-bottom:10px;opacity:.6;letter-spacing:.4em}
.ft-empty-text{font-family:'Caveat',cursive;font-size:18px;line-height:1.4}

/* ACTIVITY PILL */
.ft-activity-row{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.ft-activity-row:last-child{border-bottom:none}
.ft-activity-text{flex:1;color:var(--text2);line-height:1.4}
.ft-activity-text b{color:var(--text);font-weight:600}
.ft-activity-when{font-size:10px;color:var(--text3);letter-spacing:.02em;white-space:nowrap}

/* AVATAR UPLOAD */
.ft-av-upload{position:relative;display:inline-block;cursor:pointer}
.ft-av-upload input{display:none}
.ft-av-upload .ft-av-badge{position:absolute;right:-2px;bottom:-2px;width:26px;height:26px;border-radius:50%;background:var(--bg2);border:1.5px solid var(--border-accent);display:flex;align-items:center;justify-content:center;color:var(--rose)}

/* SPLASH */
.ft-splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(600px 400px at 50% 45%,color-mix(in oklab,var(--rose) 16%,transparent),transparent 60%),radial-gradient(500px 400px at 50% 70%,color-mix(in oklab,var(--lavender) 13%,transparent),transparent 60%),linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);gap:14px;transition:opacity .4s;padding-bottom:56px}
.ft-splash.hide{opacity:0;pointer-events:none}
.ft-splash-heart{font-size:66px;color:var(--rose);animation:pulse 1.3s ease-in-out infinite;filter:drop-shadow(0 0 30px color-mix(in oklab,var(--rose) 55%,transparent))}
.ft-splash-title{font-family:'Playfair Display',serif;font-size:32px;font-weight:700;letter-spacing:-.02em;background:linear-gradient(110deg,var(--apricot),var(--rose),var(--lavender));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.ft-splash-sub{font-family:'Caveat',cursive;font-size:19px;color:var(--text2)}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* CONFETTI */
#v2Confetti{position:fixed;inset:0;pointer-events:none;z-index:9999}

/* SMALL SCREENS */
@media(max-width:380px){
  .ft-screen-title{font-size:26px}
  .ft-hero h2{font-size:20px}
  .ft-qa{grid-template-columns:repeat(3,1fr)}
}

/* ANIMATED PROGRESS BAR */
.ft-progbar-fill{
  background: linear-gradient(90deg, var(--rose), var(--lavender), var(--apricot), var(--rose));
  background-size: 300% 100%;
  animation: progShimmer 4.5s linear infinite;
  border-radius: 99px;
  position: relative;
  overflow: hidden;
}
.ft-progbar-fill::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  animation: progSheen 2.8s ease-in-out infinite;
}
@keyframes progShimmer {
  0%   {background-position: 0% 50%}
  100% {background-position: 300% 50%}
}
@keyframes progSheen {
  0%   {transform: translateX(-100%)}
  60%  {transform: translateX(200%)}
  100% {transform: translateX(200%)}
}

/* THINKING FANFARE */
.ft-think-glow{
  position:fixed; inset:-20%;
  background: radial-gradient(circle at 50% 40%, color-mix(in oklab,var(--rose) 45%,transparent), transparent 55%);
  pointer-events:none;
  z-index:140;
  animation: thinkGlow 2.4s ease-out forwards;
}
@keyframes thinkGlow {
  0%   {opacity:0; transform:scale(.6)}
  30%  {opacity:1; transform:scale(1)}
  100% {opacity:0; transform:scale(1.4)}
}
.ft-think-ring{
  position:absolute; left:50%; top:38%;
  width:180px; height:180px;
  margin:-90px 0 0 -90px;
  border-radius:50%;
  border:2px solid color-mix(in oklab,var(--rose) 70%,transparent);
  pointer-events:none;
  animation: thinkRing 1.6s ease-out forwards;
}
.ft-think-ring.r2{animation-delay:.25s}
.ft-think-ring.r3{animation-delay:.5s}
@keyframes thinkRing {
  0%   {opacity:0; transform:scale(.3)}
  20%  {opacity:1}
  100% {opacity:0; transform:scale(2.4)}
}
.ft-think-spark{
  position:absolute;
  font-size:22px;
  pointer-events:none;
  animation: thinkSpark 1.8s ease-out forwards;
}
@keyframes thinkSpark {
  0%   {opacity:0; transform:translate(0,0) scale(.4) rotate(0)}
  20%  {opacity:1}
  100% {opacity:0; transform:translate(var(--dx),var(--dy)) scale(1) rotate(360deg)}
}
@keyframes spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

.ft-remove-photo-btn{margin-top:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 10px;font-size:10.5px;font-weight:600;border-radius:99px;background:color-mix(in oklab,var(--rose) 14%,transparent);border:1px solid color-mix(in oklab,var(--rose) 30%,transparent);color:var(--rose);cursor:pointer;font-family:inherit;letter-spacing:.02em;transition:transform .15s,background .2s}
.ft-remove-photo-btn:hover{background:color-mix(in oklab,var(--rose) 24%,transparent)}
.ft-remove-photo-btn:active{transform:scale(.94)}


/* ===== Comments (chat bubbles) ===== */
.ft-comments{display:flex;flex-direction:column;gap:10px;margin:4px 0 10px;padding:4px 0}
.ft-comment{display:flex;gap:8px;align-items:flex-start}
.ft-comment.mine{flex-direction:row-reverse}
.ft-comment-avatar{flex-shrink:0;margin-top:2px}
.ft-comment-body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.ft-comment.mine .ft-comment-body{align-items:flex-end}
.ft-comment-bubble{
  background:var(--card);
  border:1px solid var(--border);
  padding:8px 12px;
  border-radius:16px;
  border-bottom-left-radius:4px;
  max-width:85%;
  word-wrap:break-word;
}
.ft-comment.mine .ft-comment-bubble{
  background:linear-gradient(135deg, color-mix(in oklab,var(--rose) 14%,transparent), color-mix(in oklab,var(--lavender) 10%,transparent));
  border-color:color-mix(in oklab,var(--rose) 30%,transparent);
  border-radius:16px;
  border-bottom-right-radius:4px;
}
.ft-comment-who{font-size:10.5px;color:var(--text3);font-weight:600;letter-spacing:.03em;text-transform:uppercase;margin-bottom:2px}
.ft-comment-text{font-size:13px;color:var(--text);line-height:1.42}
.ft-comment-reactions{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:0 4px;position:relative}
.ft-reaction{
  display:inline-flex;align-items:center;gap:3px;
  padding:2px 8px;border-radius:99px;
  background:var(--card);border:1px solid var(--border);
  color:var(--text2);cursor:pointer;font-family:inherit;
  transition:transform .1s;
}
.ft-reaction:active{transform:scale(.9)}
.ft-reaction.mine{background:color-mix(in oklab,var(--rose) 20%,transparent);border-color:color-mix(in oklab,var(--rose) 45%,transparent)}
.ft-reaction-emoji{font-size:12px;line-height:1}
.ft-reaction-count{font-size:10px;color:var(--text3);font-weight:600}
.ft-reaction.mine .ft-reaction-count{color:var(--text2)}
.ft-reaction-add{
  padding:2px 7px;border-radius:99px;
  background:transparent;border:1px dashed var(--border);
  color:var(--text3);cursor:pointer;font-size:11px;font-family:inherit;
  opacity:.7;transition:opacity .15s, background .15s;
}
.ft-reaction-add:hover{opacity:1;background:var(--card)}
.ft-reaction-picker{display:none;gap:2px;margin-left:4px;padding:3px;background:var(--card);border:1px solid var(--border);border-radius:99px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
.ft-reaction-picker button{font-size:16px;padding:2px 5px;border-radius:99px;background:transparent;border:none;cursor:pointer;transition:transform .1s,background .15s}
.ft-reaction-picker button:hover{background:var(--card-strong)}
.ft-reaction-picker button:active{transform:scale(.85)}

/* ACTIVITY FEED SHEET */
.ft-activity-entry{padding:11px 0;border-bottom:1px solid var(--border)}
.ft-activity-entry:last-child{border-bottom:none}
.ft-activity-main{display:flex;gap:10px;align-items:flex-start;padding:4px 0;border-radius:10px;transition:background .15s}
.ft-activity-main:active{background:var(--card-h)}
.ft-activity-reactions{display:flex;gap:4px;flex-wrap:wrap;align-items:center;padding:6px 0 0 38px;position:relative;min-height:0}
.ft-activity-comments{margin:8px 0 0 38px;padding:8px 10px;border-radius:10px;background:var(--card-strong);border:1px solid var(--border)}
.ft-activity-comment{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:1px solid var(--border)}
.ft-activity-comment:last-of-type{border-bottom:none}
.ft-activity-comment-input{display:flex;gap:6px;padding-top:6px}
.ft-activity-comment-input input{flex:1;padding:7px 10px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--text);font-size:13px;font-family:inherit;outline:none}
.ft-activity-comment-input input:focus{border-color:var(--border-accent)}
.ft-activity-comment-input button{padding:7px 12px;border-radius:10px;background:linear-gradient(135deg,var(--rose),var(--lavender));color:#fff;border:none;font-size:12px;font-weight:600;cursor:pointer}
.ft-activity-comment-input button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.ft-comment-toggle{display:inline-flex;align-items:center;gap:3px}

/* ===== Lauren + Ondre legacy redesign preview, local copy only =====
   This mirrors the public-app design direction without touching the real
   legacy deploy folder. */
:root,
[data-theme="dark"]{
  --bg-base:oklch(18% .025 323);
  --bg2-base:oklch(20.5% .027 323);
  --bg:var(--bg-base);
  --bg2:var(--bg2-base);
  --bg3:oklch(24% .03 323);
  --bg4:oklch(29% .035 323);
  --card:oklch(95% .012 330 / .055);
  --card-h:oklch(95% .012 330 / .09);
  --card-strong:oklch(95% .012 330 / .13);
  --border:oklch(88% .035 330 / .10);
  --border2:oklch(88% .035 330 / .18);
  --text:oklch(94% .018 330);
  --text2:oklch(75% .028 330);
  --text3:oklch(58% .026 330);
  --rose:oklch(67% .14 345);
  --lavender:oklch(70% .12 305);
  --apricot:oklch(78% .12 55);
  --teal:oklch(72% .08 190);
  --gold:oklch(78% .11 85);
  --coral:oklch(70% .13 25);
  --ring:0 0 0 1px oklch(96% .02 330 / .06) inset,0 1px 0 oklch(96% .02 330 / .08) inset;
  --sh1:0 1px 2px oklch(10% .02 320 / .28);
  --sh2:0 10px 26px oklch(10% .02 320 / .34),0 1px 3px oklch(10% .02 320 / .22);
  --sh3:0 20px 52px oklch(10% .02 320 / .46),0 4px 12px oklch(10% .02 320 / .26);
  --radius:14px;
  --radius-sm:10px;
  --radius-lg:20px;
  --nav-h:74px;
  --top-h:70px;
}

[data-theme="light"]{
  --bg-base:oklch(95% .014 78);
  --bg2-base:oklch(98% .008 72);
  --bg:var(--bg-base);
  --bg2:var(--bg2-base);
  --bg3:oklch(92% .014 78);
  --bg4:oklch(88% .018 78);
  --card:oklch(99% .006 72 / .72);
  --card-h:oklch(99% .006 72 / .9);
  --card-strong:oklch(99% .006 72 / .96);
  --border:oklch(58% .03 330 / .12);
  --border2:oklch(52% .035 330 / .20);
  --text:oklch(24% .032 325);
  --text2:oklch(43% .04 325);
  --text3:oklch(59% .035 325);
  --rose:oklch(54% .12 345);
  --lavender:oklch(55% .11 305);
  --apricot:oklch(64% .10 58);
  --teal:oklch(52% .07 190);
  --gold:oklch(60% .12 85);
  --coral:oklch(58% .15 25);
}

html{font-size:16px}
body{
  letter-spacing:0;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--apricot) 4%,var(--bg-base)) 0%,var(--bg-base) 56%,color-mix(in oklab,var(--teal) 5%,var(--bg-base)) 100%);
}
body::before{
  background:
    radial-gradient(820px 520px at 20% -14%,color-mix(in oklab,var(--apricot) 9%,transparent),transparent 66%),
    radial-gradient(760px 520px at 108% 16%,color-mix(in oklab,var(--lavender) 7%,transparent),transparent 64%),
    radial-gradient(760px 560px at 48% 110%,color-mix(in oklab,var(--teal) 10%,transparent),transparent 62%);
}
::selection{background:color-mix(in oklab,var(--rose) 42%,transparent);color:var(--text)}
input,textarea,select{font-size:16px}
button,input,textarea,select{touch-action:manipulation}

.ft-app{
  padding-top:calc(var(--top-h) + env(safe-area-inset-top,0) + 8px);
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0) + 48px);
}
.ft-screen{max-width:560px;padding:18px 18px 10px}
.ft-screen-title{
  font-size:clamp(28px,8vw,38px);
  line-height:1.02;
  letter-spacing:0;
  color:var(--text);
}
.ft-screen-sub{font-size:18px;line-height:1.25;color:var(--text2)}
.ft-section-label{
  margin:24px 0 12px 2px;
  color:var(--text2);
  letter-spacing:.08em;
}

.ft-topbar{
  height:calc(var(--top-h) + env(safe-area-inset-top,0));
  padding-left:max(18px,env(safe-area-inset-left,0) + 18px);
  padding-right:max(18px,env(safe-area-inset-right,0) + 18px);
  background:color-mix(in oklab,var(--bg-base) 76%,transparent);
  backdrop-filter:blur(18px) saturate(1.15);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);
  border-bottom:1px solid var(--border);
}
.ft-topbar::before{display:none}
.ft-top-title{
  color:var(--text);
  background:none;
  -webkit-text-fill-color:currentColor;
  animation:none;
  font-size:18px;
  letter-spacing:0;
}
.ft-top-title::after{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin-top:5px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--rose),var(--apricot));
}
.ft-top-date{font-family:'Inter Tight',system-ui,sans-serif;font-size:12px;color:var(--text3);margin-top:4px}
.ft-icon-btn,
.ft-avatar-switch{
  min-width:44px;
  min-height:44px;
  border:1px solid var(--border2);
  background:var(--card);
  color:var(--text2);
  box-shadow:var(--ring);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.ft-icon-btn{width:44px;height:44px;border-radius:999px}
.ft-avatar-switch{padding:4px 6px;border-radius:999px;gap:0}
.ft-avatar-switch .avatar:not(:first-child){margin-left:-8px}
.ft-icon-btn:focus-visible,
.ft-avatar-switch:focus-visible,
.ft-nav-btn:focus-visible,
.ft-btn:focus-visible{
  outline:3px solid color-mix(in oklab,var(--apricot) 55%,transparent);
  outline-offset:3px;
}

.ft-nav{
  left:16px;
  right:16px;
  bottom:calc(10px + env(safe-area-inset-bottom,0));
  height:64px;
  padding:6px;
  border:1px solid var(--border2);
  border-radius:22px;
  background:color-mix(in oklab,var(--bg2-base) 84%,transparent);
  box-shadow:var(--sh2),var(--ring);
  backdrop-filter:blur(20px) saturate(1.18);
  -webkit-backdrop-filter:blur(20px) saturate(1.18);
}
.ft-nav::before{display:none}
.ft-nav-btn{
  min-height:52px;
  border-radius:16px;
  font-size:10.5px;
  letter-spacing:0;
  gap:3px;
  color:var(--text3);
}
.ft-nav-btn.a{
  background:color-mix(in oklab,var(--rose) 13%,var(--card));
  color:var(--text);
}
.ft-nav-btn.a::before{display:none}
.ft-nav-btn.a svg{color:var(--rose);transform:none}

.ft-card{
  border-radius:16px;
  background:linear-gradient(180deg,var(--card-strong),var(--card));
  border-color:var(--border2);
  box-shadow:var(--sh1),var(--ring);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.ft-card.hoverable:hover{transform:translateY(-2px);box-shadow:var(--sh2),var(--ring)}
.ft-hero{
  padding:22px 20px;
  border-radius:20px;
  background:
    linear-gradient(135deg,color-mix(in oklab,var(--rose) 22%,var(--card-strong)),color-mix(in oklab,var(--lavender) 18%,var(--card)) 56%,color-mix(in oklab,var(--teal) 16%,var(--card)));
  box-shadow:var(--sh2),var(--ring);
}
.ft-hero-eyebrow{font-family:'Inter Tight',system-ui,sans-serif;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--rose)}
.ft-hero h2,.ft-hero-title{font-size:clamp(24px,7vw,34px);line-height:1.05;letter-spacing:0}
.ft-qa{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.ft-qa button{
  min-height:72px;
  padding:14px 10px;
  border-radius:16px;
  font-size:12.5px;
  line-height:1.2;
  background:var(--card);
  border-color:var(--border2);
}
.ft-btn{min-height:44px;border-radius:14px}
.ft-btn-solid{
  background:linear-gradient(135deg,var(--rose),var(--lavender));
  color:oklch(98% .006 330);
  box-shadow:0 9px 22px color-mix(in oklab,var(--rose) 24%,transparent);
}
.ft-input,.ft-select,.ft-textarea{
  min-height:46px;
  border-radius:14px;
  background:var(--card-strong);
}
.ft-input:focus,.ft-select:focus,.ft-textarea:focus{
  border-color:color-mix(in oklab,var(--rose) 62%,var(--border2));
  box-shadow:0 0 0 4px color-mix(in oklab,var(--rose) 14%,transparent);
}
.ft-splash{
  background:
    radial-gradient(720px 460px at 50% 34%,color-mix(in oklab,var(--rose) 18%,transparent),transparent 62%),
    linear-gradient(180deg,var(--bg-base),color-mix(in oklab,var(--teal) 10%,var(--bg-base)));
}
.ft-splash-heart{
  color:var(--rose);
  filter:none;
  animation:none;
}
.ft-splash-title,
.ft-play-game-name,
.ft-play-num{
  color:var(--text);
  background:none;
  -webkit-text-fill-color:currentColor;
  animation:none;
}
.ft-play-num{color:var(--rose)}
.ft-fab{
  bottom:calc(88px + env(safe-area-inset-bottom,0));
  right:18px;
  width:58px;
  height:58px;
  background:linear-gradient(135deg,var(--rose),var(--lavender));
}

@media(min-width:760px){
  .ft-screen{max-width:620px;padding-top:26px}
  .ft-nav{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 32px))}
  .ft-fab{right:calc(50vw - 300px)}
}
@media(min-width:600px) and (max-width:759px){
  .ft-nav{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100vw - 32px))}
}
@media(max-width:360px){
  .ft-screen{padding-left:12px;padding-right:12px}
  .ft-nav{left:10px;right:10px}
  .ft-nav-btn{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ===== Preview polish pass 2: warmer, more touchable home surface ===== */
.ft-home-heading{
  margin-top:16px;
  margin-bottom:4px;
  text-wrap:balance;
}
.ft-home-heading span[style*="Caveat"]{
  color:color-mix(in oklab,var(--text) 82%,var(--rose));
}
.ft-home-subrow{
  margin-bottom:16px;
}
.ft-home-subrow .ft-screen-sub{
  color:color-mix(in oklab,var(--text2) 78%,var(--rose));
}

.ft-note-banner{
  min-height:62px;
  border-radius:18px!important;
  padding:12px 14px!important;
  background:
    linear-gradient(135deg,color-mix(in oklab,var(--rose) 18%,var(--card-strong)),color-mix(in oklab,var(--lavender) 12%,var(--card)))!important;
  border-color:color-mix(in oklab,var(--rose) 42%,var(--border2))!important;
  box-shadow:0 12px 26px color-mix(in oklab,var(--rose) 12%,transparent),var(--ring);
  backdrop-filter:blur(12px) saturate(1.05);
  -webkit-backdrop-filter:blur(12px) saturate(1.05);
}
.ft-note-banner:active{
  transform:scale(.99);
}
.ft-note-banner button{
  width:36px;
  height:36px;
  border-radius:999px!important;
}

.ft-hero{
  margin-top:8px;
  margin-bottom:18px;
  border-radius:24px;
  padding:26px 24px 24px;
  border-color:color-mix(in oklab,var(--rose) 38%,var(--border2));
  background:
    radial-gradient(420px 210px at 12% 0%,color-mix(in oklab,var(--rose) 22%,transparent),transparent 68%),
    radial-gradient(380px 240px at 92% 18%,color-mix(in oklab,var(--lavender) 20%,transparent),transparent 68%),
    linear-gradient(135deg,var(--card-strong),color-mix(in oklab,var(--teal) 10%,var(--card)));
}
.ft-hero::before{
  background:
    linear-gradient(90deg,color-mix(in oklab,var(--apricot) 44%,transparent),transparent 38%),
    radial-gradient(220px 150px at 80% 0%,color-mix(in oklab,var(--apricot) 18%,transparent),transparent 70%);
  opacity:.52;
}
.ft-hero-eyebrow{
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:13px;
  color:var(--rose);
  letter-spacing:.10em;
  margin-bottom:12px;
}
.ft-hero-title{
  max-width:12ch;
  margin-bottom:14px;
}
.ft-hero-meta{
  gap:8px;
  margin-bottom:18px;
}
.ft-chip{
  padding:5px 12px;
  border-radius:999px;
  background:color-mix(in oklab,var(--bg2-base) 52%,transparent);
  border-color:color-mix(in oklab,var(--rose) 22%,var(--border));
  font-size:12px;
}
.ft-hero-row{
  gap:10px;
}
.ft-hero-row .ft-btn{
  min-height:54px;
  font-size:15px;
  border-radius:18px;
}
.ft-hero-row .ft-btn-ghost{
  background:color-mix(in oklab,var(--bg2-base) 64%,transparent);
}

.ft-qa{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}
.ft-qa button{
  min-height:92px;
  position:relative;
  overflow:hidden;
  align-items:flex-start;
  justify-content:space-between;
  padding:16px;
  border-radius:20px;
  text-align:left;
  font-size:14px;
  font-weight:700;
  color:var(--text);
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--card-strong) 72%,transparent),var(--card));
  box-shadow:var(--sh1),var(--ring);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.ft-qa button::after{
  content:"";
  position:absolute;
  inset:auto 14px 12px 14px;
  height:1px;
  background:linear-gradient(90deg,color-mix(in oklab,var(--rose) 36%,transparent),transparent);
  opacity:.55;
}
.ft-qa button:hover{
  transform:translateY(-2px);
  box-shadow:var(--sh2),var(--ring);
}
.ft-qa button:active{
  transform:scale(.985);
}
.ft-qa-ico{
  width:40px;
  height:40px;
  border-radius:14px;
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 14%,transparent);
}
.ft-qa button span{
  position:relative;
  z-index:1;
}

.ft-progbar-fill{
  background:linear-gradient(90deg,var(--rose),var(--apricot),var(--teal));
}
.ft-activity-row{
  margin:0 -4px;
  padding:12px 4px;
  border-bottom-color:color-mix(in oklab,var(--border) 72%,transparent);
}
.ft-activity-row:hover{
  background:color-mix(in oklab,var(--rose) 7%,transparent);
}

.ft-item,
.ft-mitem,
.ft-mem,
.ft-streak-card,
.ft-stat,
.ft-ach{
  border-radius:18px;
  box-shadow:var(--sh1),var(--ring);
}
.ft-catchip{
  min-height:36px;
  padding:8px 15px;
  border-color:var(--border2);
}
.ft-catchip.a{
  background:color-mix(in oklab,var(--rose) 14%,var(--card-strong));
}

.ft-sheet{
  border-radius:28px 28px 0 0;
  max-width:560px;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--rose) 5%,var(--bg2)),var(--bg2));
}
.ft-sheet-title,
.ft-modal-head h3{
  font-size:22px;
  letter-spacing:0;
}
.ft-sheet-handle{
  width:52px;
  height:5px;
  background:color-mix(in oklab,var(--rose) 22%,var(--border2));
}
.ft-modal{
  border-radius:24px;
}

.ft-fab{
  width:60px;
  height:60px;
  border:1px solid color-mix(in oklab,var(--text) 14%,transparent);
  box-shadow:
    0 18px 34px color-mix(in oklab,var(--rose) 28%,transparent),
    0 4px 10px oklch(10% .02 320 / .26),
    inset 0 1px 0 color-mix(in oklab,var(--text) 20%,transparent);
}

@media(max-width:430px){
  .ft-home-heading{margin-top:8px}
  .ft-hero{padding:22px 20px;border-radius:22px}
  .ft-hero-title{max-width:none}
  .ft-qa{gap:10px}
  .ft-qa button{min-height:86px;padding:14px}
}

/* ===== Preview polish pass 3: make secondary screens feel designed too ===== */
.ft-catrow-sticky{
  top:calc(var(--top-h) + env(safe-area-inset-top,0) + 1px);
  margin:2px -18px 12px;
  padding:10px 18px 4px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 90%,transparent),color-mix(in oklab,var(--bg-base) 72%,transparent));
  border-bottom:1px solid color-mix(in oklab,var(--rose) 14%,var(--border));
  backdrop-filter:blur(18px) saturate(1.08);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
}
.ft-catrow-sticky::before{
  height:18px;
  bottom:-18px;
  background:linear-gradient(to bottom,color-mix(in oklab,var(--bg-base) 72%,transparent),transparent);
}
.ft-catrow{
  gap:8px;
  padding-bottom:12px;
}
.ft-catchip{
  border-radius:14px;
  background:color-mix(in oklab,var(--card-strong) 74%,transparent);
  box-shadow:var(--ring);
}
.ft-catchip.a{
  color:var(--text);
  border-color:color-mix(in oklab,var(--rose) 42%,var(--border2));
  box-shadow:0 8px 18px color-mix(in oklab,var(--rose) 12%,transparent),var(--ring);
}
.ft-catchip.new{
  background:transparent;
  border-style:solid;
  color:var(--rose);
}

.ft-search{
  margin-bottom:16px;
}
.ft-search .ft-input{
  height:52px;
  padding-left:44px;
  border-radius:18px;
  background:color-mix(in oklab,var(--bg2-base) 52%,var(--card-strong));
  box-shadow:var(--ring);
}
.ft-search svg{
  left:16px;
}

.ft-item{
  gap:14px;
  padding:16px;
  margin-bottom:10px;
  border-radius:20px;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--card-strong) 80%,transparent),var(--card));
  border-color:color-mix(in oklab,var(--rose) 10%,var(--border2));
}
.ft-item:hover{
  box-shadow:var(--sh2),var(--ring);
}
.ft-item-cb{
  width:30px;
  height:30px;
  border-radius:11px;
  margin-top:0;
  background:color-mix(in oklab,var(--bg2-base) 48%,var(--card));
}
.ft-item-text{
  font-size:15.5px;
  line-height:1.38;
}
.ft-item-meta{
  gap:7px;
  margin-top:8px;
}
.ft-badge{
  padding:4px 9px;
  border-radius:999px;
}

.ft-mitem{
  border-radius:22px;
  margin-bottom:14px;
  border-color:color-mix(in oklab,var(--rose) 12%,var(--border2));
  box-shadow:var(--sh1),var(--ring);
}
.ft-mitem-inner{
  padding:18px;
  background:
    linear-gradient(90deg,color-mix(in oklab,var(--bg2-base) 72%,transparent) 0%,color-mix(in oklab,var(--card) 74%,transparent) 100%);
}
[data-theme="light"] .ft-mitem-inner{
  background:
    linear-gradient(90deg,color-mix(in oklab,var(--bg2-base) 86%,transparent) 0%,color-mix(in oklab,var(--card) 72%,transparent) 100%);
}
.ft-mitem-bd{
  opacity:.18;
  filter:saturate(1.05) blur(.2px);
}
.ft-mitem-poster{
  width:72px;
  height:108px;
  border-radius:14px;
  box-shadow:0 12px 24px oklch(10% .02 320 / .28);
}
.ft-mitem-title{
  font-size:18px;
  line-height:1.14;
}
.ft-mitem-meta{
  gap:7px;
  margin-top:7px;
}
.ft-mitem-type,
.ft-mitem-details-chip{
  border-radius:999px;
}
.ft-mitem-ov{
  font-size:13px;
  line-height:1.5;
  margin-top:7px;
}

.ft-play-board,
.ft-surprise{
  border-radius:24px;
  box-shadow:var(--sh2),var(--ring);
  background:
    radial-gradient(460px 230px at 14% 0%,color-mix(in oklab,var(--rose) 18%,transparent),transparent 66%),
    radial-gradient(460px 240px at 90% 8%,color-mix(in oklab,var(--lavender) 18%,transparent),transparent 68%),
    linear-gradient(135deg,var(--card-strong),color-mix(in oklab,var(--teal) 10%,var(--card)));
}
.ft-play-side .avatar{
  box-shadow:0 8px 20px color-mix(in oklab,var(--rose) 15%,transparent);
}
.ft-play-num{
  font-size:50px;
}
.ft-play-actions .ft-btn{
  min-height:48px;
  border-radius:16px;
}
.ft-streak-card,
.ft-ach{
  border-radius:20px;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--card-strong) 76%,transparent),var(--card));
}
.ft-ach.on{
  box-shadow:0 10px 24px color-mix(in oklab,var(--rose) 12%,transparent),var(--ring);
}

.ft-tot{
  border-radius:20px;
  box-shadow:var(--sh1),var(--ring);
}
.ft-tot-text{
  font-size:16px;
}

.ft-mem{
  padding:18px;
  border-radius:22px;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--card-strong) 78%,transparent),var(--card));
}
.ft-mem::before{
  left:10px;
  top:16px;
  bottom:16px;
  width:3px;
  border-radius:99px;
}
.ft-mem-img,
.ft-mem-placeholder{
  width:82px;
  height:108px;
  border-radius:14px;
}
.ft-mem-title{
  font-size:18px;
}
.ft-mem-date{
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.ft-mem-month{
  margin-top:28px;
}

.ft-profile-card{
  padding:22px;
  border-radius:24px;
}
.ft-profile-name .avatar{
  box-shadow:0 10px 22px color-mix(in oklab,var(--rose) 12%,transparent);
}
.ft-stat-row{
  gap:10px;
}
.ft-stat{
  padding:14px 8px;
  border-radius:18px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--card-strong) 74%,transparent),var(--card));
}
.ft-stat-n{
  font-size:24px;
}

.ft-comments{
  gap:12px;
}
.ft-comment-bubble{
  padding:10px 13px;
  border-radius:18px;
  background:color-mix(in oklab,var(--bg2-base) 48%,var(--card));
}
.ft-comment.mine .ft-comment-bubble{
  background:linear-gradient(135deg,color-mix(in oklab,var(--rose) 20%,var(--card)),color-mix(in oklab,var(--lavender) 14%,var(--card)));
}
.ft-reaction,
.ft-reaction-add{
  min-height:28px;
}

.ft-activity-entry{
  padding:14px 0;
}
.ft-activity-comments{
  border-radius:16px;
}

.ft-modal-ov,
.ft-sheet-ov{
  background:color-mix(in oklab,oklch(12% .02 320) 66%,transparent);
}
.ft-modal{
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--rose) 5%,var(--bg2)),var(--bg2));
  border-color:color-mix(in oklab,var(--rose) 18%,var(--border2));
}
.ft-close-btn{
  width:38px;
  height:38px;
}

@media(max-width:380px){
  .ft-qa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-mitem-inner{padding:14px}
  .ft-mitem-poster{width:62px;height:92px}
  .ft-item{padding:14px}
}

.ft-cum-card{
  overflow:hidden;
  background:color-mix(in oklab,var(--bg2-base) 86%,var(--card))!important;
}
.ft-cum-card > div:first-child{
  gap:10px;
}
.ft-cum-card > div:first-child > div:first-child{
  max-width:58%;
}
.ft-cum-plot{
  width:min(100%,430px);
  margin:8px auto 0;
}
.ft-cum-svg{
  width:100%;
  height:92px;
  max-height:92px;
  display:block;
}
.ft-cum-axis{
  padding-left:38px;
  padding-right:4px;
}
@media(min-width:760px){
  .ft-cum-plot{
    width:min(54vw,430px);
  }
}

/* ===== Preview polish pass 49: splash-style theme color inside the app ===== */
html[data-palette]{
  --app-bloom-opacity:1;
  --app-bloom-soft-opacity:.72;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,var(--rose) 34%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,var(--lavender) 34%,transparent) 0%,transparent 68%),
    radial-gradient(64% 46% at 6% 96%,color-mix(in oklab,var(--apricot) 24%,transparent) 0%,transparent 72%),
    radial-gradient(66% 48% at 98% 94%,color-mix(in oklab,var(--teal) 30%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,var(--teal) 12%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette]{
  --app-bloom-opacity:.98;
  --app-bloom-soft-opacity:.62;
}
html[data-palette="sunset"]{
  --rose:#F45F9E;
  --lavender:#9A66F2;
  --apricot:#F19A5D;
  --teal:#C05FC9;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,#F45F9E 36%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,#9A66F2 34%,transparent) 0%,transparent 68%),
    radial-gradient(64% 46% at 8% 96%,color-mix(in oklab,#F19A5D 22%,transparent) 0%,transparent 72%),
    radial-gradient(66% 48% at 98% 94%,color-mix(in oklab,#C05FC9 30%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,#F45F9E 12%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette="sunset"]{
  --rose:#D64C8A;
  --lavender:#7652D4;
  --apricot:#D97842;
  --teal:#9E4FB0;
}
html[data-theme="dark"][data-palette="sunset"]{
  --bg-base:#1a0e18;
  --bg2-base:#281425;
  --rose:#FF70AD;
  --lavender:#B78AFF;
  --apricot:#FFA36B;
  --teal:#D071DC;
}
.ft-app::before{
  background:
    radial-gradient(74vw 52vh at 8% 6%,color-mix(in oklab,var(--rose) 50%,transparent),transparent 68%),
    radial-gradient(76vw 54vh at 94% 10%,color-mix(in oklab,var(--lavender) 50%,transparent),transparent 70%),
    radial-gradient(78vw 58vh at 6% 96%,color-mix(in oklab,var(--apricot) 38%,transparent),transparent 74%),
    radial-gradient(78vw 58vh at 96% 94%,color-mix(in oklab,var(--teal) 46%,transparent),transparent 74%),
    radial-gradient(98vw 72vh at 48% 36%,color-mix(in oklab,var(--rose) 20%,transparent),transparent 78%),
    radial-gradient(100vw 74vh at 54% 74%,color-mix(in oklab,var(--lavender) 20%,transparent),transparent 78%)!important;
  opacity:var(--app-bloom-opacity)!important;
  filter:blur(18px) saturate(1.55)!important;
}
.ft-app::after{
  background:
    radial-gradient(520px 340px at 50% 20%,color-mix(in oklab,var(--rose) 30%,transparent),transparent 72%),
    radial-gradient(520px 360px at 42% 62%,color-mix(in oklab,var(--lavender) 28%,transparent),transparent 74%),
    radial-gradient(480px 340px at 82% 50%,color-mix(in oklab,var(--teal) 24%,transparent),transparent 76%)!important;
  opacity:var(--app-bloom-soft-opacity)!important;
  filter:blur(12px) saturate(1.32)!important;
}
.ft-hero,
.ft-play-board,
.ft-card,
.ft-mitem,
.ft-mem,
.ft-stat,
.ft-qa button{
  border-color:color-mix(in oklab,var(--rose) 18%,var(--border2))!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 28%,transparent) inset,
    0 12px 30px color-mix(in oklab,var(--rose) 10%,transparent),
    var(--ring)!important;
}

/* ===== Preview polish pass 51: restore missing palette family colors ===== */
html[data-palette="peony"]{
  --rose:#F0449D;
  --lavender:#C852D8;
  --apricot:#E97962;
  --teal:#25A68D;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,#F0449D 34%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,#C852D8 30%,transparent) 0%,transparent 68%),
    radial-gradient(62% 46% at 8% 94%,color-mix(in oklab,#E97962 18%,transparent) 0%,transparent 72%),
    radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,#25A68D 34%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,#25A68D 12%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette="peony"]{
  --rose:#D83B8E;
  --lavender:#A747BD;
  --apricot:#C96D56;
  --teal:#168E76;
}
html[data-theme="dark"][data-palette="peony"]{
  --rose:#FF63B3;
  --lavender:#DA82FF;
  --apricot:#F18A78;
  --teal:#51D0B8;
}
html[data-palette="blush"]{
  --rose:#E45D88;
  --lavender:#9A62C8;
  --apricot:#E5A2B8;
  --teal:#805FC2;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,#E45D88 30%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,#9A62C8 34%,transparent) 0%,transparent 68%),
    radial-gradient(62% 46% at 8% 94%,color-mix(in oklab,#E5A2B8 20%,transparent) 0%,transparent 72%),
    radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,#805FC2 24%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,#9A62C8 10%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette="blush"]{
  --rose:#C74E78;
  --lavender:#8150B0;
  --apricot:#CA879F;
  --teal:#6D4EA8;
}
html[data-theme="dark"][data-palette="blush"]{
  --rose:#F0739B;
  --lavender:#B985F0;
  --apricot:#F5CAD7;
  --teal:#A980DE;
}
html[data-palette="lilac"]{
  --rose:#8B78EA;
  --lavender:#B690F5;
  --apricot:#C985DF;
  --teal:#4E9AD8;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,#8B78EA 30%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,#B690F5 30%,transparent) 0%,transparent 68%),
    radial-gradient(62% 46% at 8% 94%,color-mix(in oklab,#C985DF 16%,transparent) 0%,transparent 72%),
    radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,#4E9AD8 36%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,#4E9AD8 12%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette="lilac"]{
  --rose:#786BD6;
  --lavender:#9C7EDF;
  --apricot:#B06DC8;
  --teal:#367FBE;
}
html[data-theme="dark"][data-palette="lilac"]{
  --rose:#9C92FF;
  --lavender:#CDB8FF;
  --apricot:#DCA6F6;
  --teal:#68B5F0;
}
html[data-palette="sunset"]{
  --rose:#E05291;
  --lavender:#8059DE;
  --apricot:#EF7D3E;
  --teal:#B456C2;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,#E05291 30%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,#8059DE 28%,transparent) 0%,transparent 68%),
    radial-gradient(68% 50% at 8% 96%,color-mix(in oklab,#EF7D3E 34%,transparent) 0%,transparent 72%),
    radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,#B456C2 26%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,#EF7D3E 12%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette="sunset"]{
  --rose:#C94A82;
  --lavender:#6D4CC4;
  --apricot:#D66D35;
  --teal:#9649AA;
}
html[data-theme="dark"][data-palette="sunset"]{
  --bg-base:#1a0e18;
  --bg2-base:#281425;
  --rose:#FF70AD;
  --lavender:#B78AFF;
  --apricot:#FF9658;
  --teal:#D071DC;
}
@media(max-width:430px){
  .ft-cum-card > div:first-child{
    flex-direction:column;
    align-items:flex-start!important;
  }
  .ft-cum-card > div:first-child > div:first-child{
    max-width:none;
  }
  .ft-cum-svg{
    height:88px!important;
  }
  .ft-cum-axis{
    padding-left:34px;
  }
}

/* ===== Preview polish pass 5: glassy raised surfaces ===== */
:root{
  --glass:color-mix(in oklab,var(--bg2-base) 58%,transparent);
  --glass-strong:color-mix(in oklab,var(--bg2-base) 74%,transparent);
  --glass-line:color-mix(in oklab,var(--text) 18%,transparent);
  --glass-top:color-mix(in oklab,var(--text) 14%,transparent);
  --lift-1:0 1px 0 var(--glass-top) inset,0 1px 2px oklch(20% .02 320 / .10),0 10px 24px oklch(25% .02 320 / .10);
  --lift-2:0 1px 0 var(--glass-top) inset,0 14px 34px oklch(22% .02 320 / .16),0 4px 10px oklch(22% .02 320 / .08);
  --lift-3:0 1px 0 color-mix(in oklab,var(--text) 20%,transparent) inset,0 22px 52px oklch(18% .02 320 / .22),0 8px 18px oklch(18% .02 320 / .10);
}

.ft-topbar,
.ft-nav,
.ft-card,
.ft-hero,
.ft-note-banner,
.ft-qa button,
.ft-item,
.ft-mitem,
.ft-mem,
.ft-play-board,
.ft-surprise,
.ft-tot,
.ft-streak-card,
.ft-ach,
.ft-profile-card,
.ft-stat,
.ft-sheet,
.ft-modal,
.ft-cum-card,
.ft-catchip,
.ft-input,
.ft-select,
.ft-textarea,
.ft-comment-bubble,
.ft-activity-comments{
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  border-color:var(--glass-line)!important;
  box-shadow:var(--lift-1),var(--ring);
}

.ft-topbar{
  background:color-mix(in oklab,var(--bg-base) 70%,transparent);
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 10%,transparent),0 14px 26px oklch(24% .02 320 / .08);
}

.ft-nav{
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 84%,transparent),color-mix(in oklab,var(--bg2-base) 68%,transparent));
  box-shadow:var(--lift-3),0 0 0 1px color-mix(in oklab,var(--text) 7%,transparent);
}
.ft-nav-btn.a{
  background:linear-gradient(180deg,color-mix(in oklab,var(--rose) 14%,var(--glass-strong)),color-mix(in oklab,var(--bg2-base) 62%,transparent));
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 15%,transparent) inset,0 8px 18px color-mix(in oklab,var(--rose) 10%,transparent);
}

.ft-card,
.ft-item,
.ft-mitem,
.ft-mem,
.ft-streak-card,
.ft-ach,
.ft-profile-card,
.ft-stat,
.ft-cum-card{
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 72%,transparent),color-mix(in oklab,var(--bg2-base) 48%,transparent))!important;
}

.ft-hero,
.ft-play-board,
.ft-surprise{
  background:
    radial-gradient(420px 230px at 15% 0%,color-mix(in oklab,var(--rose) 12%,transparent),transparent 70%),
    radial-gradient(420px 230px at 92% 12%,color-mix(in oklab,var(--lavender) 10%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 72%,transparent),color-mix(in oklab,var(--bg2-base) 46%,transparent))!important;
  box-shadow:var(--lift-2),var(--ring);
}

.ft-note-banner,
.ft-qa button{
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 54%,transparent))!important;
}
.ft-qa button{
  box-shadow:var(--lift-1),0 0 0 1px color-mix(in oklab,var(--text) 5%,transparent);
}
.ft-qa button:hover,
.ft-card.hoverable:hover,
.ft-item:hover,
.ft-mitem:hover,
.ft-mem:hover{
  box-shadow:var(--lift-2),var(--ring);
}

.ft-qa-ico,
.ft-icon-btn,
.ft-avatar-switch,
.ft-close-btn,
.ft-item-cb,
.ft-fab,
.ft-btn,
.ft-reaction,
.ft-reaction-add{
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 18%,transparent) inset,0 8px 18px oklch(24% .02 320 / .12);
}

.ft-input,
.ft-select,
.ft-textarea{
  background:color-mix(in oklab,var(--bg2-base) 60%,transparent);
}

.ft-sheet,
.ft-modal{
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 86%,transparent),color-mix(in oklab,var(--bg2-base) 72%,transparent))!important;
  box-shadow:var(--lift-3);
}
.ft-sheet-ov,
.ft-modal-ov{
  backdrop-filter:blur(14px) saturate(1.05);
  -webkit-backdrop-filter:blur(14px) saturate(1.05);
}

.ft-fab{
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 22%,transparent) inset,0 20px 38px color-mix(in oklab,var(--rose) 22%,transparent),0 8px 18px oklch(18% .02 320 / .18);
}

@media(prefers-reduced-transparency:reduce){
  .ft-topbar,
  .ft-nav,
  .ft-card,
  .ft-hero,
  .ft-note-banner,
  .ft-qa button,
  .ft-item,
  .ft-mitem,
  .ft-mem,
  .ft-play-board,
  .ft-surprise,
  .ft-tot,
  .ft-streak-card,
  .ft-ach,
  .ft-profile-card,
  .ft-stat,
  .ft-sheet,
  .ft-modal,
  .ft-cum-card,
  .ft-catchip,
  .ft-input,
  .ft-select,
  .ft-textarea,
  .ft-comment-bubble,
  .ft-activity-comments{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

/* ===== Preview polish pass 6: compact quick actions + brighter pastels ===== */
[data-theme="light"]{
  --rose:oklch(61% .145 345);
  --lavender:oklch(63% .135 305);
  --apricot:oklch(72% .125 58);
  --teal:oklch(62% .09 190);
  --gold:oklch(70% .13 85);
  --coral:oklch(64% .14 25);
}

.ft-top-title{
  color:transparent;
  background:linear-gradient(110deg,var(--lavender),var(--rose),var(--apricot));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.ft-qa{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
}
.ft-qa button{
  min-height:76px!important;
  aspect-ratio:1.14 / 1;
  padding:10px 7px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
  font-size:12.5px!important;
  line-height:1.12!important;
  font-weight:650!important;
}
.ft-qa button::after{
  display:none;
}
.ft-qa-ico{
  width:36px!important;
  height:36px!important;
  border-radius:12px!important;
}
.ft-qa-ico.rose{background:color-mix(in oklab,var(--rose) 18%,transparent);color:var(--rose)}
.ft-qa-ico.gold{background:color-mix(in oklab,var(--gold) 20%,transparent);color:var(--gold)}
.ft-qa-ico.teal{background:color-mix(in oklab,var(--teal) 18%,transparent);color:var(--teal)}
.ft-qa-ico.apricot{background:color-mix(in oklab,var(--apricot) 22%,transparent);color:var(--apricot)}
.ft-qa-ico.lav{background:color-mix(in oklab,var(--lavender) 18%,transparent);color:var(--lavender)}
.ft-qa button span{
  display:block;
  max-width:100%;
}

.ft-hero,
.ft-note-banner,
.ft-catchip.a,
.ft-nav-btn.a{
  border-color:color-mix(in oklab,var(--rose) 34%,var(--glass-line))!important;
}
.ft-btn-solid,
.ft-fab{
  background:linear-gradient(135deg,var(--rose),var(--lavender))!important;
}

@media(max-width:360px){
  .ft-qa{
    gap:8px!important;
  }
  .ft-qa button{
    min-height:70px!important;
    padding:8px 5px!important;
    font-size:11.5px!important;
  }
  .ft-qa-ico{
    width:32px!important;
    height:32px!important;
  }
}

/* ===== Preview polish pass 7: readable screen subtitles ===== */
.ft-screen-sub{
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif!important;
  font-size:15px!important;
  line-height:1.35!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:color-mix(in oklab,var(--text2) 84%,var(--lavender))!important;
}
.ft-home-subrow .ft-screen-sub,
.ft-splash-sub,
.ft-profile-name-role,
.ft-mem-month .count,
.ft-empty-text{
  font-family:'Caveat',cursive!important;
}
.ft-home-subrow .ft-screen-sub{
  font-size:24px!important;
  line-height:1.1!important;
  font-weight:400!important;
}

/* ===== Preview polish pass 8: Talk pills and AI panels ===== */
.ft-talk-screen{
  max-width:620px;
}
.ft-talk-pill-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.ft-talk-pill-row.source{
  margin-bottom:8px;
}
.ft-talk-pill{
  min-height:36px;
  padding:7px 13px;
  border-radius:999px;
  border:1px solid var(--glass-line);
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 58%,transparent));
  color:var(--text2);
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:0;
  cursor:pointer;
  box-shadow:var(--lift-1),var(--ring);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  appearance:none;
  -webkit-appearance:none;
  transition:transform .16s cubic-bezier(.22,1,.36,1),opacity .16s ease,border-color .18s ease,background .18s ease;
}
.ft-talk-pill.small{
  min-height:34px;
  padding:6px 12px;
  font-size:12.5px;
}
.ft-talk-pill.a{
  color:var(--text);
  border-color:color-mix(in oklab,var(--lavender) 42%,var(--glass-line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--lavender) 22%,var(--glass-strong)),color-mix(in oklab,var(--bg2-base) 60%,transparent));
}
.ft-talk-pill.a.rose{
  border-color:color-mix(in oklab,var(--rose) 42%,var(--glass-line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--rose) 20%,var(--glass-strong)),color-mix(in oklab,var(--bg2-base) 60%,transparent));
}
.ft-talk-question-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ft-talk-question{
  width:100%;
  text-align:left;
  border:1px solid color-mix(in oklab,var(--rose) 30%,var(--glass-line));
  border-radius:20px;
  padding:16px 18px;
  cursor:pointer;
  font-family:inherit;
  color:var(--text);
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:
    radial-gradient(260px 120px at 0% 0%,color-mix(in oklab,var(--rose) 10%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 74%,transparent),color-mix(in oklab,var(--bg2-base) 54%,transparent));
  box-shadow:var(--lift-1),var(--ring);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.ft-talk-question:active,
.ft-talk-alt:active,
.ft-talk-pill:active{
  transform:translateY(1px) scale(.99);
  opacity:.9;
}
.ft-talk-question-ico{
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab,var(--rose) 16%,transparent);
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 16%,transparent) inset;
  flex-shrink:0;
  font-size:19px;
}
.ft-talk-question-kicker{
  font-size:11px;
  color:var(--rose);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
  margin-bottom:5px;
}
.ft-talk-question-text{
  font-size:16px;
  color:var(--text);
  line-height:1.42;
  text-wrap:pretty;
}
.ft-talk-refresh{
  margin-top:12px;
  width:100%;
  min-height:46px;
  border-radius:16px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 72%,transparent),color-mix(in oklab,var(--bg2-base) 52%,transparent));
  border:1px solid var(--glass-line);
  color:var(--text2);
  font-size:13px;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  box-shadow:var(--lift-1),var(--ring);
}
.ft-talk-alt-list{
  display:flex;
  gap:10px;
  flex-direction:column;
}
.ft-talk-alt{
  display:flex;
  align-items:center;
  gap:13px;
  min-height:68px;
  padding:12px 16px;
  border-radius:20px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 76%,transparent),color-mix(in oklab,var(--bg2-base) 56%,transparent));
  border:1px solid var(--glass-line);
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  box-shadow:var(--lift-1),var(--ring);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.ft-talk-alt-ico{
  width:42px;
  height:42px;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 16%,transparent) inset;
}
.ft-talk-alt-ico.teal{
  color:var(--teal);
  background:color-mix(in oklab,var(--teal) 16%,transparent);
}
.ft-talk-alt-ico.lav{
  color:var(--lavender);
  background:color-mix(in oklab,var(--lavender) 17%,transparent);
}
.ft-talk-alt-title{
  font-size:15px;
  font-weight:800;
  line-height:1.15;
}
.ft-talk-alt-sub{
  font-size:12.5px;
  color:var(--text3);
  margin-top:3px;
}
.ft-talk-alt-arrow{
  color:var(--text3);
  font-size:18px;
}

@media(max-width:430px){
  .ft-talk-pill-row{
    gap:7px;
  }
  .ft-talk-pill{
    min-height:34px;
    padding:6px 11px;
    font-size:12.5px;
  }
  .ft-talk-question{
    padding:14px;
    gap:11px;
  }
  .ft-talk-question-text{
    font-size:15px;
  }
}

/* ===== Preview polish pass 9: Play stats glass surfaces ===== */
.ft-play-stats-panel{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:14px;
}
.ft-play-stat-grid{
  gap:10px!important;
  margin-bottom:0!important;
}
.ft-play-stats-panel > div:not(.ft-play-stat-grid),
.ft-play-stat-grid > div,
.ft-play-stats-panel .ft-cum-card{
  border:1px solid var(--glass-line)!important;
  background:
    radial-gradient(240px 130px at 0% 0%,color-mix(in oklab,var(--rose) 8%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 56%,transparent))!important;
  box-shadow:var(--lift-1),var(--ring)!important;
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
}
.ft-play-stat-grid > div{
  min-height:84px;
  border-radius:18px!important;
  padding:14px 12px!important;
}
.ft-play-stat-top > div{
  min-height:86px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:
    radial-gradient(140px 90px at 70% 0%,color-mix(in oklab,var(--lavender) 13%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 82%,transparent),color-mix(in oklab,var(--bg2-base) 58%,transparent))!important;
}
.ft-play-stat-top > div > div:first-child{
  color:var(--text);
  text-shadow:0 1px 0 color-mix(in oklab,var(--bg2-base) 64%,transparent);
}
.ft-play-stat-facts > div:nth-child(4n+1),
.ft-play-stat-facts > div:nth-child(4n+4){
  background:
    radial-gradient(180px 100px at 100% 0%,color-mix(in oklab,var(--lavender) 12%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 56%,transparent))!important;
}
.ft-play-stat-facts > div:nth-child(4n+2),
.ft-play-stat-facts > div:nth-child(4n+3){
  background:
    radial-gradient(180px 100px at 100% 0%,color-mix(in oklab,var(--apricot) 13%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 56%,transparent))!important;
}
.ft-play-stats-panel > div:not(.ft-play-stat-grid){
  border-radius:20px!important;
  padding:15px 16px!important;
  margin-bottom:0!important;
}
.ft-play-stats-panel .ft-cum-card{
  overflow:hidden;
}
.ft-play-stats-panel .ft-cum-plot{
  border-radius:16px;
  padding:10px 10px 8px;
  background:color-mix(in oklab,var(--bg2-base) 46%,transparent);
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 10%,transparent) inset;
}
.ft-play-stats-panel [style*="background:var(--card-strong)"]{
  background:color-mix(in oklab,var(--bg2-base) 58%,transparent)!important;
  border:1px solid color-mix(in oklab,var(--glass-line) 72%,transparent)!important;
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 10%,transparent) inset!important;
}
.ft-play-stats-panel [style*="borderTop:'1px solid var(--border)'"],
.ft-play-stats-panel [style*="borderTop: '1px solid var(--border)'"]{
  border-top-color:var(--glass-line)!important;
}
.ft-play-rivalry-card{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.ft-play-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.ft-play-card-kicker{
  font-size:10px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:800;
}
.ft-play-card-sub{
  margin-top:3px;
  color:var(--text3);
  font-size:11.5px;
  line-height:1.35;
}
.ft-play-leader-pill{
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--lavender) 38%,var(--glass-line));
  background:linear-gradient(180deg,color-mix(in oklab,var(--lavender) 18%,var(--glass-strong)),color-mix(in oklab,var(--bg2-base) 58%,transparent));
  color:var(--text);
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  white-space:nowrap;
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 12%,transparent) inset;
}
.ft-play-mini-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
.ft-play-mini-metrics > div{
  min-height:62px;
  border-radius:16px;
  padding:10px 8px;
  text-align:center;
  background:color-mix(in oklab,var(--bg2-base) 52%,transparent);
  border:1px solid color-mix(in oklab,var(--glass-line) 70%,transparent);
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 10%,transparent) inset;
}
.ft-play-mini-metrics span{
  display:block;
  font-family:'Playfair Display',serif;
  font-size:26px;
  line-height:1;
  color:var(--text);
  font-weight:700;
}
.ft-play-mini-metrics small{
  display:block;
  margin-top:5px;
  font-size:9.5px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.1em;
  font-weight:700;
}
.ft-play-lead-chart{
  border-radius:18px;
  padding:10px;
  background:
    radial-gradient(180px 90px at 8% 12%,color-mix(in oklab,var(--rose) 10%,transparent),transparent 72%),
    radial-gradient(180px 90px at 92% 88%,color-mix(in oklab,var(--lavender) 12%,transparent),transparent 72%),
    color-mix(in oklab,var(--bg2-base) 42%,transparent);
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 10%,transparent) inset;
}
.ft-play-lead-chart svg{
  width:100%;
  height:96px;
  display:block;
}
.ft-play-momentum-strip{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:4px;
}
.ft-play-momentum-strip span{
  min-height:24px;
  border-radius:8px;
  display:grid;
  place-items:center;
  color:color-mix(in oklab,var(--bg2-base) 96%,var(--text));
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 16%,transparent) inset;
}
.ft-play-momentum-strip .l{
  background:var(--rose);
}
.ft-play-momentum-strip .o{
  background:var(--lavender);
}
.ft-play-rivalry-copy{
  color:var(--text3);
  font-size:11.5px;
  line-height:1.5;
}

@media(max-width:430px){
  .ft-play-stats-panel{
    gap:9px;
  }
  .ft-play-stat-grid{
    gap:8px!important;
  }
  .ft-play-stat-grid > div{
    min-height:78px;
    border-radius:16px!important;
    padding:12px 10px!important;
  }
  .ft-play-stats-panel > div:not(.ft-play-stat-grid){
    border-radius:18px!important;
    padding:14px!important;
  }
  .ft-play-card-head{
    flex-direction:column;
    gap:8px;
  }
  .ft-play-leader-pill{
    align-self:flex-start;
  }
  .ft-play-mini-metrics{
    gap:6px;
  }
  .ft-play-mini-metrics span{
    font-size:23px;
  }
  .ft-play-mini-metrics small{
    font-size:8.5px;
  }
}

/* ===== Preview polish pass 10: Quick Things compact symmetry lock ===== */
.ft-screen .ft-qa{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:10px!important;
  margin-top:10px!important;
}
.ft-screen .ft-qa button{
  min-height:78px!important;
  height:78px!important;
  aspect-ratio:auto!important;
  padding:9px 7px!important;
  border-radius:18px!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  text-align:center!important;
  font-size:12.25px!important;
  line-height:1.12!important;
  font-weight:750!important;
  overflow:hidden!important;
  background:
    radial-gradient(120px 70px at 50% 0%,color-mix(in oklab,var(--bg2-base) 64%,transparent),transparent 76%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 56%,transparent))!important;
  box-shadow:var(--lift-1),var(--ring)!important;
}
.ft-screen .ft-qa button::after{
  display:none!important;
  content:none!important;
}
.ft-screen .ft-qa .ft-qa-ico{
  width:34px!important;
  height:34px!important;
  border-radius:12px!important;
  flex:0 0 34px!important;
}
.ft-screen .ft-qa button span{
  display:block!important;
  max-width:100%!important;
  position:static!important;
  white-space:normal!important;
}
.ft-screen .ft-qa-ico.rose{background:color-mix(in oklab,var(--rose) 20%,transparent)!important;color:var(--rose)!important}
.ft-screen .ft-qa-ico.gold{background:color-mix(in oklab,var(--gold) 22%,transparent)!important;color:var(--gold)!important}
.ft-screen .ft-qa-ico.teal{background:color-mix(in oklab,var(--teal) 20%,transparent)!important;color:var(--teal)!important}
.ft-screen .ft-qa-ico.apricot{background:color-mix(in oklab,var(--apricot) 24%,transparent)!important;color:var(--apricot)!important}
.ft-screen .ft-qa-ico.lav{background:color-mix(in oklab,var(--lavender) 20%,transparent)!important;color:var(--lavender)!important}

@media(max-width:360px){
  .ft-screen .ft-qa{
    gap:8px!important;
  }
  .ft-screen .ft-qa button{
    min-height:72px!important;
    height:72px!important;
    padding:8px 5px!important;
    font-size:11.25px!important;
  }
  .ft-screen .ft-qa .ft-qa-ico{
    width:31px!important;
    height:31px!important;
    flex-basis:31px!important;
  }
}

/* ===== Preview polish pass 11: sliding bottom nav pill ===== */
.ft-nav{
  --nav-pad:6px;
  --nav-count:6;
  overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.ft-nav-pill{
  position:absolute;
  top:var(--nav-pad);
  bottom:var(--nav-pad);
  left:var(--nav-pad);
  width:calc((100% - (var(--nav-pad) * 2)) / var(--nav-count));
  border-radius:18px;
  background:
    radial-gradient(120px 70px at 50% 0%,color-mix(in oklab,var(--rose) 18%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in oklab,var(--rose) 14%,var(--glass-strong)),color-mix(in oklab,var(--bg2-base) 62%,transparent));
  border:1px solid color-mix(in oklab,var(--rose) 32%,var(--glass-line));
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 15%,transparent) inset,0 8px 18px color-mix(in oklab,var(--rose) 10%,transparent);
  transform:translateX(calc(var(--tab-index,0) * 100%));
  transition:transform .34s cubic-bezier(.22,1,.36,1),background .24s ease,border-color .24s ease;
  pointer-events:none;
  z-index:0;
}
.ft-nav-btn{
  z-index:1;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  appearance:none;
  -webkit-appearance:none;
  outline-offset:3px;
  transition:color .2s ease,transform .16s cubic-bezier(.22,1,.36,1),opacity .16s ease;
}
.ft-nav-btn.a{
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text)!important;
}
.ft-nav-btn.a svg{
  color:var(--rose)!important;
  transform:translateY(-1px) scale(1.04);
}
.ft-nav-btn:not(.a):active{
  transform:translateY(1px) scale(.985);
  opacity:.82;
}
.ft-nav-btn.a:active{
  transform:translateY(1px) scale(.992);
}

@media(prefers-reduced-motion:reduce){
  .ft-nav-pill{
    transition:none;
  }
}

/* ===== Preview polish pass 12: restore original Funture palette ===== */
:root,
[data-theme="dark"]{
  --rose:#E8A5C0;
  --lavender:#B9A4E3;
  --apricot:#F2B988;
  --teal:#8BB8B4;
  --gold:#E8C87A;
  --coral:#F09090;
}
[data-theme="light"]{
  --rose:#C55F8A;
  --lavender:#8067C2;
  --apricot:#D97B3C;
  --teal:#5A8682;
  --gold:#B8944A;
  --coral:#C56868;
}
.ft-top-title{
  background:linear-gradient(110deg,var(--apricot),var(--rose),var(--lavender),var(--rose),var(--apricot))!important;
  background-size:300% 300%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}
.ft-qa-ico.rose,
.ft-screen .ft-qa-ico.rose{background:color-mix(in oklab,var(--rose) 22%,transparent)!important;color:var(--rose)!important}
.ft-qa-ico.gold,
.ft-screen .ft-qa-ico.gold{background:color-mix(in oklab,var(--gold) 24%,transparent)!important;color:var(--gold)!important}
.ft-qa-ico.teal,
.ft-screen .ft-qa-ico.teal{background:color-mix(in oklab,var(--teal) 22%,transparent)!important;color:var(--teal)!important}
.ft-qa-ico.apricot,
.ft-screen .ft-qa-ico.apricot{background:color-mix(in oklab,var(--apricot) 26%,transparent)!important;color:var(--apricot)!important}
.ft-qa-ico.lav,
.ft-screen .ft-qa-ico.lav,
.ft-screen .ft-qa-ico:not(.rose):not(.gold):not(.teal):not(.apricot){background:color-mix(in oklab,var(--lavender) 22%,transparent)!important;color:var(--lavender)!important}

/* ===== Preview polish pass 13: top-right control breathing room ===== */
.ft-topbar{
  padding-left:max(18px,env(safe-area-inset-left,0) + 18px)!important;
  padding-right:max(28px,env(safe-area-inset-right,0) + 28px)!important;
  gap:14px;
}
.ft-top-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.ft-top-actions .ft-icon-btn{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
}
.ft-top-actions .ft-avatar-switch{
  min-width:58px;
  min-height:42px;
  padding:4px 5px;
}
.ft-top-actions .ft-avatar-switch .avatar{
  width:30px!important;
  height:30px!important;
}
.ft-top-actions .ft-avatar-switch .avatar:not(:first-child){
  margin-left:-10px;
}

@media(max-width:430px){
  .ft-topbar{
    padding-right:max(20px,env(safe-area-inset-right,0) + 20px)!important;
  }
  .ft-top-actions{
    gap:7px;
  }
  .ft-top-actions .ft-icon-btn{
    width:40px;
    height:40px;
    min-width:40px;
    min-height:40px;
  }
  .ft-top-actions .ft-avatar-switch{
    min-width:54px;
    min-height:40px;
  }
  .ft-top-actions .ft-avatar-switch .avatar{
    width:28px!important;
    height:28px!important;
  }
}

/* ===== Preview polish pass 14: splash screen aesthetic refresh ===== */
.ft-splash{
  isolation:isolate;
  overflow:hidden;
  gap:12px!important;
  padding:44px 24px calc(64px + env(safe-area-inset-bottom,0))!important;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--rose) 8%,var(--bg-base)) 0%,var(--bg-base) 46%,color-mix(in oklab,var(--teal) 8%,var(--bg-base)) 100%)!important;
}
.ft-splash::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(380px,calc(100vw - 48px));
  height:min(420px,calc(100dvh - 140px));
  border-radius:34px;
  border:1px solid var(--glass-line);
  background:
    radial-gradient(360px 180px at 28% 0%,color-mix(in oklab,var(--rose) 18%,transparent),transparent 70%),
    radial-gradient(340px 180px at 86% 18%,color-mix(in oklab,var(--lavender) 15%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 76%,transparent),color-mix(in oklab,var(--bg2-base) 52%,transparent));
  box-shadow:var(--lift-3),var(--ring);
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
}
.ft-splash-heart{
  width:86px;
  height:86px;
  border-radius:28px;
  display:grid;
  place-items:center;
  margin-bottom:4px;
  color:var(--rose)!important;
  font-size:54px!important;
  line-height:1;
  background:
    radial-gradient(68px 42px at 44% 20%,color-mix(in oklab,var(--rose) 28%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 52%,transparent));
  border:1px solid color-mix(in oklab,var(--rose) 34%,var(--glass-line));
  box-shadow:var(--lift-2),0 18px 34px color-mix(in oklab,var(--rose) 18%,transparent)!important;
  filter:none!important;
  animation:ft-splash-heart-float 2.8s ease-in-out infinite!important;
}
.ft-splash-title{
  color:var(--text)!important;
  background:linear-gradient(110deg,var(--apricot),var(--rose),var(--lavender))!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  font-size:clamp(31px,8vw,42px)!important;
  letter-spacing:-.02em!important;
  line-height:1.02!important;
  text-align:center;
  max-width:min(340px,calc(100vw - 72px));
  text-wrap:balance;
}
.ft-splash-sub{
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif!important;
  font-size:13px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
  color:var(--text2)!important;
  text-align:center;
}
.ft-splash > div[style*="display:'flex'"],
.ft-splash > div[style*="display: 'flex'"]{
  position:relative;
  z-index:1;
}
.ft-splash-picker{
  position:relative;
  z-index:1;
  display:flex;
  gap:22px;
  margin-top:24px;
}
.ft-splash-signout{
  position:relative;
  z-index:1;
  margin-top:22px;
  border:1px solid color-mix(in oklab,var(--text3) 18%,transparent);
  border-radius:999px;
  background:color-mix(in oklab,var(--bg2-base) 42%,transparent);
  color:var(--text3);
  font-size:12px;
  cursor:pointer;
  font-family:inherit;
  padding:6px 12px;
  opacity:.82;
}
.ft-splash-signout:hover{
  opacity:1;
  color:var(--text2);
}
.ft-splash .avatar{
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 16%,transparent) inset,0 12px 28px color-mix(in oklab,var(--rose) 16%,transparent)!important;
}
@keyframes ft-splash-heart-float{
  0%,100%{transform:translateY(0) scale(1)}
  50%{transform:translateY(-5px) scale(1.03)}
}
@media(prefers-reduced-motion:reduce){
  .ft-splash-heart{
    animation:none!important;
  }
}

/* ===== Preview polish pass 15: Tilt n Shout Play module ===== */
.ft-tilt-board{
  position:relative;
  overflow:hidden;
  margin:0 0 20px;
  padding:18px 16px 16px;
  border-radius:22px;
  border:1px solid color-mix(in oklab,var(--teal) 28%,var(--glass-line));
  background:
    radial-gradient(260px 160px at 12% 0%,color-mix(in oklab,var(--teal) 18%,transparent),transparent 72%),
    radial-gradient(220px 150px at 92% 12%,color-mix(in oklab,var(--apricot) 16%,transparent),transparent 74%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 54%,transparent));
  box-shadow:var(--lift-3),var(--ring);
  backdrop-filter:blur(22px) saturate(1.14);
  -webkit-backdrop-filter:blur(22px) saturate(1.14);
}
.ft-tilt-board::after{
  content:"";
  position:absolute;
  inset:auto 16px 0;
  height:1px;
  background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--teal) 44%,transparent),transparent);
  opacity:.72;
}
.ft-tilt-game-icon{
  background:transparent!important;
  color:var(--teal);
  border-color:transparent!important;
  box-shadow:none!important;
  width:auto!important;
  min-width:0!important;
  height:auto!important;
  padding:0!important;
}
.ft-tilt-scoreline{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  margin:18px 0 12px;
}
.ft-tilt-player{
  display:grid;
  justify-items:center;
  gap:4px;
  color:var(--rose);
}
.ft-tilt-player.o{
  color:var(--lavender);
}
.ft-tilt-player span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.ft-tilt-player b{
  font-family:'Playfair Display',Georgia,serif;
  font-size:40px;
  line-height:.92;
  font-variant-numeric:tabular-nums;
}
.ft-tilt-vs{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--text3);
  font-size:22px;
  font-style:italic;
}
.ft-tilt-seesaw{
  margin:8px 0 26px;
  padding:12px 12px 14px;
  border-radius:16px;
  border:1px solid color-mix(in oklab,var(--teal) 20%,var(--border));
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 58%,transparent),color-mix(in oklab,var(--bg-base) 48%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 10%,transparent),0 10px 20px color-mix(in oklab,var(--text) 5%,transparent);
  overflow:visible;
}
.ft-tilt-seesaw-labels{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  color:var(--text3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.ft-tilt-seesaw-labels span:nth-child(2){
  color:var(--text2);
  letter-spacing:.04em;
}
.ft-tilt-seesaw-stage{
  position:relative;
  height:58px;
  overflow:visible;
}
.ft-tilt-seesaw-beam{
  position:absolute;
  left:8px;
  right:8px;
  top:18px;
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--rose),var(--lavender));
  box-shadow:0 10px 18px color-mix(in oklab,var(--lavender) 18%,transparent);
  transform:rotate(calc(var(--tilt,0) * 1deg));
  transform-origin:center;
  transition:transform .34s cubic-bezier(.22,1,.36,1);
}
.ft-tilt-seesaw-beam span{
  position:absolute;
  top:-15px;
  width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#fff;
  font-size:12px;
  font-weight:900;
  box-shadow:0 8px 16px color-mix(in oklab,var(--text) 12%,transparent);
}
.ft-tilt-seesaw-beam .l{
  left:0;
  background:var(--rose);
}
.ft-tilt-seesaw-beam .o{
  right:0;
  background:var(--lavender);
}
.ft-tilt-seesaw-pivot{
  position:absolute;
  left:50%;
  bottom:2px;
  width:0;
  height:0;
  transform:translateX(-50%);
  border-left:17px solid transparent;
  border-right:17px solid transparent;
  border-bottom:32px solid color-mix(in oklab,var(--gold) 54%,var(--bg2-base));
  filter:drop-shadow(0 8px 10px color-mix(in oklab,var(--gold) 20%,transparent));
}
.ft-tilt-actions{
  margin-top:8px;
}
.ft-tilt-undo{
  width:100%;
  margin-top:8px;
}
.ft-tilt-stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-top:12px;
}
.ft-tilt-stats-grid div{
  min-width:0;
  padding:10px 8px;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--teal) 18%,var(--border));
  background:color-mix(in oklab,var(--bg2-base) 54%,transparent);
  text-align:center;
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 9%,transparent);
}
.ft-tilt-stats-grid span{
  display:block;
  color:var(--text);
  font-family:'Playfair Display',Georgia,serif;
  font-size:23px;
  line-height:1;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.ft-tilt-stats-grid small{
  display:block;
  margin-top:4px;
  color:var(--text3);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ft-tilt-lead-chart{
  margin-top:12px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--lavender) 18%,var(--border));
  background:color-mix(in oklab,var(--bg-base) 34%,transparent);
}
.ft-tilt-lead-chart svg{
  display:block;
  width:100%;
  height:62px;
}
.ft-tilt-footer{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:10px;
  margin-top:12px;
}
.ft-tilt-momentum{
  margin:0!important;
  justify-content:flex-start;
}
.ft-play-momentum-strip span.empty{
  background:color-mix(in oklab,var(--text3) 12%,transparent);
  color:var(--text3);
  border:1px dashed color-mix(in oklab,var(--text3) 22%,transparent);
}
.ft-tilt-copy{
  min-width:0;
  color:var(--text3);
  font-size:11px;
  line-height:1.35;
}
.ft-tilt-copy b{
  color:var(--text2);
}
.ft-tilt-expanded-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:8px;
  margin-top:14px;
}
.ft-tilt-expanded-stats div{
  min-width:0;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab,var(--rose) 16%,var(--border));
  background:color-mix(in oklab,var(--bg2-base) 46%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 8%,transparent);
}
.ft-tilt-expanded-stats small,
.ft-tilt-expanded-stats em{
  display:block;
  color:var(--text3);
}
.ft-tilt-expanded-stats small{
  margin-bottom:5px;
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.ft-tilt-expanded-stats b{
  display:block;
  color:var(--text);
  font-size:13.5px;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.ft-tilt-expanded-stats em{
  margin-top:3px;
  font-size:10.5px;
  font-style:normal;
  line-height:1.25;
}
.ft-tilt-ach-grid{
  margin-bottom:18px;
}
.ft-tilt-ach-progress{
  position:absolute;
  left:10px;
  right:10px;
  bottom:7px;
  height:4px;
  border-radius:999px;
  overflow:hidden;
  background:color-mix(in oklab,var(--text3) 14%,transparent);
}
.ft-tilt-ach-progress span{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--rose),var(--lavender));
}
@media(max-width:430px){
  .ft-tilt-board{
    padding:16px 14px 15px;
    border-radius:20px;
  }
  .ft-tilt-stats-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .ft-tilt-footer{
    grid-template-columns:1fr;
  }
  .ft-tilt-expanded-stats{
    grid-template-columns:1fr 1fr;
  }
}
@media(prefers-reduced-motion:reduce){
  .ft-tilt-seesaw-beam{
    transition:none;
  }
}

/* ===== Preview polish pass 16: elegant Play game switcher ===== */
.ft-game-switch{
  --game-pad:5px;
  position:sticky;
  top:calc(var(--topbar-h,76px) + 8px);
  z-index:8;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin:12px 0 18px;
  padding:var(--game-pad);
  border-radius:22px;
  border:1px solid color-mix(in oklab,var(--rose) 20%,var(--glass-line));
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 52%,transparent));
  box-shadow:0 12px 28px color-mix(in oklab,var(--text) 8%,transparent),inset 0 1px 0 color-mix(in oklab,var(--text) 10%,transparent);
  backdrop-filter:blur(18px) saturate(1.12);
  -webkit-backdrop-filter:blur(18px) saturate(1.12);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}
.ft-game-switch-pill{
  position:absolute;
  top:var(--game-pad);
  bottom:var(--game-pad);
  left:var(--game-pad);
  width:calc((100% - (var(--game-pad) * 2)) / 2);
  border-radius:18px;
  border:1px solid color-mix(in oklab,var(--rose) 34%,var(--glass-line));
  background:
    radial-gradient(120px 70px at 24% 0%,color-mix(in oklab,var(--rose) 18%,transparent),transparent 72%),
    radial-gradient(120px 70px at 86% 30%,color-mix(in oklab,var(--lavender) 16%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 72%,transparent),color-mix(in oklab,var(--bg-base) 44%,transparent));
  box-shadow:0 1px 0 color-mix(in oklab,var(--text) 14%,transparent) inset,0 10px 18px color-mix(in oklab,var(--rose) 12%,transparent);
  transform:translateX(calc(var(--game-index,0) * 100%));
  transition:transform .38s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.ft-game-switch[data-dragging="1"] .ft-game-switch-pill{
  transition:transform .06s linear;
}
.ft-game-switch-btn{
  position:relative;
  z-index:1;
  min-width:0;
  min-height:56px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--text3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  font-family:inherit;
  cursor:pointer;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
  appearance:none;
  -webkit-appearance:none;
  transition:color .18s ease,transform .18s ease,opacity .16s ease;
}
.ft-game-switch-btn:active{
  transform:translateY(1px) scale(.985);
  opacity:.88;
}
.ft-game-switch-btn.a{
  color:var(--text);
}
.ft-game-switch-ico{
  width:32px;
  height:32px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:color-mix(in oklab,var(--rose) 13%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 10%,transparent);
  flex:0 0 32px;
}
.ft-game-switch-btn:nth-of-type(2) .ft-game-switch-ico{
  background:color-mix(in oklab,var(--teal) 15%,transparent);
}
.ft-game-switch-btn b,
.ft-game-switch-btn small{
  display:block;
  min-width:0;
  text-align:left;
  white-space:nowrap;
}
.ft-game-switch-btn b{
  font-size:13px;
  line-height:1.05;
  font-weight:850;
  letter-spacing:0;
}
.ft-game-switch-btn small{
  margin-top:3px;
  color:var(--text3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
@media(max-width:430px){
  .ft-game-switch{
    top:calc(var(--topbar-h,72px) + 6px);
    margin-top:10px;
    margin-bottom:14px;
  }
  .ft-game-switch-btn{
    min-height:52px;
    gap:6px;
    padding:8px 7px;
  }
  .ft-game-switch-ico{
    width:28px;
    height:28px;
    border-radius:10px;
    flex-basis:28px;
  }
  .ft-game-switch-btn b{
    font-size:12px;
  }
  .ft-game-switch-btn small{
    font-size:9px;
  }
}
@media(prefers-reduced-motion:reduce){
  .ft-game-switch-pill,
  .ft-game-switch-btn{
    transition:none;
  }
}
.ft-game-stage{
  touch-action:pan-y;
  overflow:hidden;
  margin-inline:-2px;
  padding-inline:2px;
  user-select:none;
  -webkit-user-select:none;
  position:relative;
}
.ft-game-panel{
  transform:translateX(var(--swipe-x,0px));
  will-change:transform,opacity;
  animation:ft-game-panel-in .34s cubic-bezier(.16,1,.3,1);
  transition:transform .28s cubic-bezier(.16,1,.3,1), opacity .22s ease;
  position:relative;
  z-index:1;
}
.ft-game-panel-rummikub-details{
  transform:none!important;
  animation:none!important;
  transition:none!important;
  will-change:auto;
}
.ft-game-peek{
  position:absolute;
  inset:0 2px auto 2px;
  z-index:2;
  pointer-events:none;
  opacity:var(--peek-opacity,0);
  transform:translateX(var(--peek-x,100%));
  will-change:transform,opacity;
  filter:saturate(1.03);
}
.ft-game-peek .ft-play-board,
.ft-game-peek .ft-tilt-board{
  min-height:100%;
  box-shadow:
    var(--ring),
    0 14px 34px color-mix(in oklab,var(--text) 12%,transparent),
    0 8px 22px color-mix(in oklab,var(--rose) 10%,transparent);
}
.ft-game-stage[data-dragging="1"] .ft-game-panel{
  transition:none;
  cursor:grabbing;
}
.ft-game-stage[data-dir="left"] .ft-game-panel{--panel-from:18px}
.ft-game-stage[data-dir="right"] .ft-game-panel{--panel-from:-18px}
@keyframes ft-game-panel-in{
  from{opacity:.82;transform:translateX(calc(var(--panel-from,0px) + var(--swipe-x,0px))) scale(.996)}
  to{opacity:1;transform:translateX(var(--swipe-x,0px)) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  .ft-game-panel,
  .ft-game-switch[data-dragging="1"] .ft-game-switch-pill{
    animation:none;
    transition:none;
  }
}

.ft-tilt-deep-stats{
  display:grid;
  gap:10px;
  margin-top:14px;
}
.ft-tilt-stat-card{
  padding:13px 14px;
  border-radius:16px;
  border:1px solid color-mix(in oklab,var(--lavender) 18%,var(--border));
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 54%,transparent),color-mix(in oklab,var(--bg-base) 34%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 8%,transparent);
}
.ft-tilt-day-bars,
.ft-tilt-time-bars,
.ft-tilt-month-list,
.ft-tilt-streak-list,
.ft-tilt-recent-list{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.ft-tilt-story-card{
  overflow:hidden;
}
.ft-tilt-form-strip{
  margin-top:12px;
}
.ft-tilt-rhythm-line,
.ft-tilt-profile-stat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-top:1px solid color-mix(in oklab,var(--border) 64%,transparent);
  color:var(--text3);
  font-size:11px;
}
.ft-tilt-rhythm-line:first-of-type{
  margin-top:8px;
}
.ft-tilt-rhythm-line b,
.ft-tilt-profile-stat b{
  color:var(--text);
  font-size:12px;
  text-align:right;
}
.ft-tilt-rhythm-line i{
  font-style:normal;
  margin-left:8px;
}
.ft-tilt-rhythm-line i.l{color:var(--rose)}
.ft-tilt-rhythm-line i.o{color:var(--lavender)}
.ft-tilt-cumulative-chart{
  margin-top:10px;
  height:104px;
  border-radius:14px;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 40%,transparent),color-mix(in oklab,var(--lavender) 6%,transparent));
  border:1px solid color-mix(in oklab,var(--border) 74%,transparent);
  overflow:hidden;
}
.ft-tilt-cumulative-chart svg{
  width:100%;
  height:100%;
  display:block;
}
.ft-tilt-empty-chart{
  min-height:96px;
  margin-top:12px;
  border-radius:14px;
  border:1px dashed color-mix(in oklab,var(--lavender) 28%,var(--border));
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 44%,transparent),color-mix(in oklab,var(--lavender) 7%,transparent));
  display:grid;
  place-items:center;
  color:var(--text3);
  font-size:12px;
  font-weight:850;
}
.ft-tilt-empty-chart span{
  width:72%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--rose),var(--lavender));
  opacity:.42;
}
.ft-tilt-empty-chart b{
  color:var(--text2);
  margin-top:-22px;
}
.ft-tilt-chart-legend{
  display:flex;
  justify-content:center;
  gap:18px;
  margin-top:8px;
  font-size:11px;
  font-weight:850;
}
.ft-tilt-chart-legend .l{color:var(--rose)}
.ft-tilt-chart-legend .o{color:var(--lavender)}
.ft-tilt-day-row{
  display:grid;
  grid-template-columns:34px 1fr 24px;
  align-items:center;
  gap:9px;
  color:var(--text3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.ft-tilt-day-row b{
  color:var(--text2);
  font-size:11px;
  text-align:right;
}
.ft-tilt-day-split{
  height:13px;
  border-radius:999px;
  background:color-mix(in oklab,var(--text3) 12%,transparent);
  overflow:hidden;
  display:flex;
  align-items:stretch;
  justify-content:center;
  gap:2px;
}
.ft-tilt-day-split i{
  display:block;
  min-width:0;
}
.ft-tilt-day-split i.l{background:var(--rose)}
.ft-tilt-day-split i.o{background:var(--lavender)}
.ft-tilt-time-row{
  display:grid;
  grid-template-columns:92px 1fr 24px;
  align-items:center;
  gap:10px;
}
.ft-tilt-time-row div b,
.ft-tilt-streak-list b,
.ft-tilt-recent-list span{
  display:block;
  color:var(--text);
  font-size:12px;
  line-height:1.15;
}
.ft-tilt-time-row div small,
.ft-tilt-recent-list small{
  display:block;
  margin-top:2px;
  color:var(--text3);
  font-size:10px;
}
.ft-tilt-time-row > span{
  height:9px;
  border-radius:999px;
  background:color-mix(in oklab,var(--text3) 12%,transparent);
  overflow:hidden;
}
.ft-tilt-time-row > span i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--teal),var(--lavender));
}
.ft-tilt-time-row em{
  color:var(--text2);
  font-size:11px;
  font-style:normal;
  font-weight:800;
  text-align:right;
}
.ft-tilt-hour-slots{
  display:grid;
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:6px;
  align-items:end;
  min-height:120px;
  margin-top:12px;
}
.ft-tilt-hour-slot{
  display:grid;
  grid-template-rows:86px auto auto;
  gap:4px;
  text-align:center;
  min-width:0;
}
.ft-tilt-hour-slot > span{
  align-self:end;
  width:100%;
  min-height:8px;
  border-radius:999px 999px 6px 6px;
  background:color-mix(in oklab,var(--text3) 10%,transparent);
  overflow:hidden;
  display:flex;
  flex-direction:column-reverse;
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 10%,transparent);
}
.ft-tilt-hour-slot i{
  display:block;
  min-height:0;
}
.ft-tilt-hour-slot i.l{background:var(--rose)}
.ft-tilt-hour-slot i.o{background:var(--lavender)}
.ft-tilt-hour-slot b{
  color:var(--text2);
  font-size:9px;
  font-weight:850;
}
.ft-tilt-hour-slot small{
  color:var(--text3);
  font-size:9px;
}
.ft-tilt-month-row{
  display:grid;
  grid-template-columns:54px 1fr 44px;
  align-items:center;
  gap:10px;
}
.ft-tilt-month-row b{
  color:var(--text2);
  font-size:11px;
}
.ft-tilt-month-row span{
  height:12px;
  border-radius:999px;
  background:color-mix(in oklab,var(--text3) 12%,transparent);
  display:flex;
  overflow:hidden;
}
.ft-tilt-month-row i{
  display:block;
  min-width:0;
}
.ft-tilt-month-row i.l{background:var(--rose)}
.ft-tilt-month-row i.o{background:var(--lavender)}
.ft-tilt-month-row small{
  color:var(--text3);
  font-size:10px;
  font-weight:850;
  text-align:right;
}
.ft-tilt-player-profiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.ft-tilt-streak-list div,
.ft-tilt-recent-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid color-mix(in oklab,var(--border) 72%,transparent);
}
.ft-tilt-streak-list div:last-child,
.ft-tilt-recent-list div:last-child{
  border-bottom:0;
}
.ft-tilt-streak-list span,
.ft-tilt-recent-list span{
  font-weight:850;
}
.ft-tilt-streak-list span.l,
.ft-tilt-recent-list span.l{color:var(--rose)}
.ft-tilt-streak-list span.o,
.ft-tilt-recent-list span.o{color:var(--lavender)}
@media(max-width:430px){
  .ft-tilt-player-profiles{
    grid-template-columns:1fr;
  }
  .ft-tilt-hour-slots{
    gap:4px;
  }
  .ft-tilt-hour-slot{
    grid-template-rows:76px auto auto;
  }
}

/* ===== Preview polish pass 18: list header utility typography ===== */
.ft-list-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.ft-list-count-badge{
  min-height:30px;
  min-width:54px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--lavender) 22%,var(--border));
  background:color-mix(in oklab,var(--bg2-base) 52%,transparent);
  color:var(--text2);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 8%,transparent);
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  font-size:12px;
  line-height:1;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  display:grid;
  place-items:center;
}
.ft-list-edit-toggle{
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid var(--border2);
  background:var(--card);
  color:var(--text2);
  display:grid;
  place-items:center;
  cursor:pointer;
  font-family:'Inter Tight',system-ui,-apple-system,sans-serif;
  font-size:14px;
  font-weight:800;
  line-height:1;
  box-shadow:0 8px 16px color-mix(in oklab,var(--text) 6%,transparent);
}
.ft-list-edit-toggle.a{
  background:color-mix(in oklab,var(--rose) 18%,transparent);
  border-color:var(--border-accent);
  color:var(--text);
}

/* ===== Preview polish pass 19: seamless list category rail ===== */
.ft-catrow-sticky{
  margin:0 -18px 14px!important;
  padding:6px 0 8px!important;
  border-bottom:0!important;
  overflow:visible;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 66%,transparent),color-mix(in oklab,var(--bg-base) 48%,transparent) 72%,transparent)!important;
}
.ft-catrow-sticky::before{
  bottom:-20px!important;
  height:24px!important;
  background:linear-gradient(to bottom,color-mix(in oklab,var(--bg-base) 52%,transparent),transparent)!important;
}
.ft-catrow{
  gap:10px!important;
  margin:-7px 0 -8px!important;
  padding:16px 34px 22px!important;
  scroll-padding-inline:34px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%);
}
.ft-catchip{
  box-shadow:
    0 10px 20px color-mix(in oklab,var(--text) 8%,transparent),
    inset 0 1px 0 color-mix(in oklab,var(--text) 10%,transparent),
    var(--ring)!important;
}
.ft-catchip.a{
  box-shadow:
    0 12px 24px color-mix(in oklab,var(--rose) 16%,transparent),
    inset 0 1px 0 color-mix(in oklab,var(--text) 10%,transparent),
    var(--ring)!important;
}

/* ===== Preview polish pass 20: floating Play game switcher ===== */
.ft-play-screen{
  overflow:visible;
}
.ft-game-switch{
  top:calc(var(--top-h) + env(safe-area-inset-top,0) + 12px)!important;
  z-index:39!important;
  width:min(100%,520px);
  margin:14px auto 24px!important;
  padding:6px!important;
  border-radius:26px!important;
  border-color:color-mix(in oklab,var(--rose) 26%,var(--glass-line))!important;
  background:
    radial-gradient(220px 90px at 18% 0%,color-mix(in oklab,var(--rose) 14%,transparent),transparent 72%),
    radial-gradient(220px 90px at 88% 20%,color-mix(in oklab,var(--lavender) 14%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 82%,transparent),color-mix(in oklab,var(--bg2-base) 58%,transparent))!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,var(--text) 12%,transparent) inset,
    0 18px 34px color-mix(in oklab,var(--text) 10%,transparent),
    0 8px 18px color-mix(in oklab,var(--rose) 10%,transparent)!important;
  backdrop-filter:blur(24px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(24px) saturate(1.18)!important;
}
.ft-game-switch::after{
  content:"";
  position:absolute;
  left:20px;
  right:20px;
  bottom:-18px;
  height:18px;
  background:linear-gradient(to bottom,color-mix(in oklab,var(--bg-base) 34%,transparent),transparent);
  pointer-events:none;
}
.ft-game-switch-btn{
  min-height:58px!important;
}
.ft-game-stage{
  margin-top:4px;
}
@media(max-width:430px){
  .ft-game-switch{
    top:calc(var(--top-h) + env(safe-area-inset-top,0) + 10px)!important;
    width:calc(100% - 8px);
    margin-top:12px!important;
    margin-bottom:22px!important;
    border-radius:24px!important;
  }
  .ft-game-switch-btn{
    min-height:54px!important;
  }
}

/* ===== Preview polish pass 17: roomier note composer sheet ===== */
.ft-sheet:has(.ft-note-compose){
  max-width:min(620px,calc(100vw - 42px))!important;
  min-height:min(520px,72dvh);
  padding:14px 24px calc(var(--nav-h) + env(safe-area-inset-bottom,0) + 28px)!important;
}
.ft-sheet:has(.ft-note-compose) .ft-sheet-drag-area{
  padding-top:18px!important;
  padding-bottom:14px!important;
}
.ft-sheet:has(.ft-note-compose) .ft-sheet-title{
  font-size:31px!important;
  line-height:1.05;
  margin-bottom:4px!important;
}
.ft-note-compose{
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:330px;
}
.ft-note-compose-textarea{
  min-height:210px!important;
  resize:vertical;
  padding:18px 18px!important;
  border-radius:22px!important;
  font-size:18px!important;
  line-height:1.45!important;
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--text) 11%,transparent),0 12px 24px color-mix(in oklab,var(--rose) 10%,transparent)!important;
}
.ft-note-compose-send{
  min-height:64px!important;
  border-radius:20px!important;
  font-size:18px!important;
  box-shadow:0 16px 28px color-mix(in oklab,var(--lavender) 20%,transparent)!important;
}
@media(max-width:430px){
  .ft-sheet:has(.ft-note-compose){
    max-width:100%!important;
    min-height:min(560px,76dvh);
    padding-left:20px!important;
    padding-right:20px!important;
  }
  .ft-note-compose{
    min-height:360px;
  }
  .ft-note-compose-textarea{
    min-height:240px!important;
  }
}

/* ===== Preview polish pass 21: refined palettes + Loop-style color splash ===== */
:root,
[data-theme="dark"]{
  --rose:#F17BC0;
  --lavender:#B18CFF;
  --apricot:#F0AD78;
  --teal:#95D4D0;
  --gold:#EFD07F;
  --coral:#F27F97;
  --ft-splash:
    radial-gradient(66% 44% at 18% 8%, color-mix(in oklab,var(--lavender) 30%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 16%, color-mix(in oklab,var(--rose) 34%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 18% 76%, color-mix(in oklab,var(--apricot) 15%,transparent) 0%, transparent 74%),
    radial-gradient(42% 34% at 80% 82%, color-mix(in oklab,var(--teal) 8%,transparent) 0%, transparent 74%);
}
[data-theme="light"]{
  --rose:#DD4FA0;
  --lavender:#8B68EA;
  --apricot:#E99A62;
  --teal:#58A9A5;
  --gold:#BD9344;
  --coral:#D85E7B;
  --ft-splash:
    radial-gradient(70% 46% at 18% 6%, color-mix(in oklab,var(--lavender) 22%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 16%, color-mix(in oklab,var(--rose) 24%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 16% 76%, color-mix(in oklab,var(--apricot) 12%,transparent) 0%, transparent 74%),
    radial-gradient(42% 34% at 82% 82%, color-mix(in oklab,var(--teal) 6%,transparent) 0%, transparent 74%);
}
html[data-palette="sunset"]{
  --rose:#F05D55;
  --lavender:#E4A13B;
  --apricot:#F6B05F;
  --teal:#7F5A9E;
}
html[data-palette="ocean"]{
  --rose:#38B6DB;
  --lavender:#2E56C2;
  --apricot:#7AD2E8;
  --teal:#2F8EBA;
}
html[data-palette="garden"]{
  --rose:#7FBC74;
  --lavender:#E8A46E;
  --apricot:#F1C483;
  --teal:#6CAFA0;
}
html[data-palette="peony"]{
  --rose:#FF4FA7;
  --lavender:#D975F0;
  --apricot:#F0977D;
  --teal:#72C7C7;
}
html[data-palette="lilac"]{
  --rose:#8F83F2;
  --lavender:#C4AEFF;
  --apricot:#D8A0F4;
  --teal:#73A9D8;
}
html[data-palette="sorbet"]{
  --rose:#F47A5B;
  --lavender:#7ECDB8;
  --apricot:#F4BE73;
  --teal:#78C6B1;
}
html[data-palette="aurora"]{
  --rose:#2AC4A8;
  --lavender:#7E73F2;
  --apricot:#9D6FE1;
  --teal:#58C9C7;
}
html[data-palette="blush"]{
  --rose:#EA6A92;
  --lavender:#E9B78E;
  --apricot:#F2C6D5;
  --teal:#9C78CF;
}
html[data-palette="twilight"]{
  --rose:#6F5DD6;
  --lavender:#C45A9C;
  --apricot:#D07A8B;
  --teal:#447EBC;
}
html[data-palette="mono"]{
  --rose:#C8C1CC;
  --lavender:#A89AC6;
  --apricot:#D7C7BC;
  --teal:#A7BFBC;
}
html[data-theme="light"][data-palette="sunset"]{--rose:#D9574F;--lavender:#C98724;--apricot:#DF8941;--teal:#6A4B8A}
html[data-theme="light"][data-palette="ocean"]{--rose:#238FB6;--lavender:#234BA7;--apricot:#4BAFC8;--teal:#2D7EAA}
html[data-theme="light"][data-palette="garden"]{--rose:#5C9658;--lavender:#C9793E;--apricot:#D9964B;--teal:#4F8D81}
html[data-theme="light"][data-palette="peony"]{--rose:#E23595;--lavender:#C753D6;--apricot:#E37E67;--teal:#3C9999}
html[data-theme="light"][data-palette="lilac"]{--rose:#786FD8;--lavender:#9C84EA;--apricot:#B878D3;--teal:#5A8FC2}
html[data-theme="light"][data-palette="sorbet"]{--rose:#D9614A;--lavender:#54A991;--apricot:#D99447;--teal:#4D9C8D}
html[data-theme="light"][data-palette="aurora"]{--rose:#229F8B;--lavender:#6255D1;--apricot:#7D4EC2;--teal:#2FA2A0}
html[data-theme="light"][data-palette="blush"]{--rose:#D95D82;--lavender:#C78B5F;--apricot:#DFA3B8;--teal:#8060B5}
html[data-theme="light"][data-palette="twilight"]{--rose:#5547B4;--lavender:#A64187;--apricot:#B25A71;--teal:#326BAA}
body{
  background:
    var(--ft-splash),
    linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 96%,var(--lavender) 4%) 0%,var(--bg) 42%,color-mix(in oklab,var(--bg-base) 92%,var(--apricot) 8%) 100%)!important;
  background-attachment:fixed;
}
body::after{
  opacity:.32;
}
[data-theme="light"] body::after{
  opacity:.18;
}
.ft-topbar,
.ft-nav{
  background:color-mix(in oklab,var(--bg2-base) 76%,transparent)!important;
}
.ft-topbar::before{
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 80%,transparent) 0%,color-mix(in oklab,var(--bg-base) 54%,transparent) 100%),
    radial-gradient(360px 120px at 18% 0%,color-mix(in oklab,var(--lavender) 12%,transparent),transparent 72%),
    radial-gradient(320px 120px at 88% 0%,color-mix(in oklab,var(--rose) 12%,transparent),transparent 72%)!important;
}
.ft-nav::before{
  background:
    linear-gradient(0deg,color-mix(in oklab,var(--bg2-base) 82%,transparent) 0%,color-mix(in oklab,var(--bg2-base) 50%,transparent) 100%),
    radial-gradient(360px 120px at 28% 100%,color-mix(in oklab,var(--rose) 12%,transparent),transparent 70%),
    radial-gradient(360px 120px at 78% 100%,color-mix(in oklab,var(--lavender) 14%,transparent),transparent 72%)!important;
}
.ft-card,
.ft-qa button,
.ft-talk-question,
.ft-talk-alt,
.ft-play-board,
.ft-tilt-board,
.ft-game-switch,
.ft-sheet{
  background-color:color-mix(in oklab,var(--bg2-base) 44%,transparent);
}
.ft-btn-solid,
.ft-fab{
  background:linear-gradient(135deg,color-mix(in oklab,var(--rose) 90%,var(--apricot) 10%),color-mix(in oklab,var(--lavender) 92%,var(--rose) 8%))!important;
}

/* ===== Preview polish pass 23: cleaner Play tab shading ===== */
.ft-game-switch{
  background:
    radial-gradient(220px 90px at 18% 0%,color-mix(in oklab,var(--rose) 10%,transparent),transparent 72%),
    radial-gradient(220px 90px at 88% 20%,color-mix(in oklab,var(--lavender) 10%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 92%,transparent),color-mix(in oklab,var(--bg2-base) 76%,transparent))!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,var(--text) 10%,transparent) inset,
    0 10px 24px color-mix(in oklab,var(--text) 8%,transparent)!important;
}
.ft-game-switch::after{
  display:none!important;
}
.ft-game-stage{
  isolation:isolate;
  overflow:visible;
}
.ft-play-board,
.ft-tilt-board{
  background:
    radial-gradient(420px 230px at 15% 0%,color-mix(in oklab,var(--rose) 10%,transparent),transparent 70%),
    radial-gradient(420px 230px at 92% 12%,color-mix(in oklab,var(--lavender) 9%,transparent),transparent 70%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 88%,transparent),color-mix(in oklab,var(--bg2-base) 72%,transparent))!important;
}
.ft-play-board::before{
  background:
    radial-gradient(260px 180px at 8% 0%,color-mix(in oklab,var(--apricot) 8%,transparent),transparent 72%)!important;
}

/* ===== Preview polish pass 22: splash color spread-in ===== */
.ft-splash{
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 96%,var(--lavender) 4%) 0%,var(--bg-base) 52%,color-mix(in oklab,var(--bg-base) 94%,var(--apricot) 6%) 100%)!important;
}
.ft-splash > *{
  position:relative;
  z-index:3;
}
.ft-splash::after{
  content:"";
  position:absolute;
  inset:-32%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(34% 30% at 38% 36%,color-mix(in oklab,var(--lavender) 42%,transparent) 0%,transparent 68%),
    radial-gradient(30% 28% at 64% 32%,color-mix(in oklab,var(--rose) 38%,transparent) 0%,transparent 68%),
    radial-gradient(24% 22% at 22% 64%,color-mix(in oklab,var(--apricot) 22%,transparent) 0%,transparent 72%),
    radial-gradient(25% 22% at 78% 66%,color-mix(in oklab,var(--teal) 13%,transparent) 0%,transparent 74%),
    radial-gradient(70% 54% at 50% 48%,color-mix(in oklab,var(--rose) 19%,transparent) 0%,transparent 72%);
  filter:blur(16px) saturate(1.28);
  opacity:.96;
  transform:scale(.08);
  transform-origin:50% 42%;
  animation:
    ft-splash-colour-spread 2.55s cubic-bezier(.19,1,.22,1) .04s both,
    ft-splash-colour-drift 14s ease-in-out 2.4s infinite alternate;
}
.ft-splash::before{
  z-index:1;
  animation:
    ft-splash-card-bloom .72s cubic-bezier(.16,1,.3,1) .16s both,
    ft-splash-card-glow 7s ease-in-out 1.1s infinite alternate;
}
.ft-splash-heart,
.ft-splash-title,
.ft-splash-sub,
.ft-splash-picker,
.ft-splash-signout{
  animation-duration:.72s;
  animation-timing-function:cubic-bezier(.16,1,.3,1);
  animation-fill-mode:both;
}
.ft-splash-heart{
  animation-name:ft-splash-heart-enter,ft-splash-heart-float!important;
  animation-duration:.68s,2.8s!important;
  animation-delay:.18s,.92s!important;
  animation-timing-function:cubic-bezier(.16,1,.3,1),ease-in-out!important;
  animation-fill-mode:both,both!important;
  animation-iteration-count:1,infinite!important;
}
.ft-splash-title{
  animation-name:ft-splash-content-enter;
  animation-delay:.28s;
}
.ft-splash-sub{
  animation-name:ft-splash-content-enter;
  animation-delay:.36s;
}
.ft-splash-picker,
.ft-splash-signout{
  animation-name:ft-splash-content-enter;
  animation-delay:.44s;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:0;transform:scale(.14) rotate(-3deg);filter:blur(46px) saturate(.98)}
  18%{opacity:.36;transform:scale(.39) rotate(-2deg);filter:blur(40px) saturate(1.04)}
  42%{opacity:.72;transform:scale(.72) rotate(-.8deg);filter:blur(31px) saturate(1.12)}
  68%{opacity:.94;transform:scale(1.02) rotate(.35deg);filter:blur(23px) saturate(1.22)}
  86%{opacity:.92;transform:scale(1.14) rotate(.08deg);filter:blur(19px) saturate(1.27)}
  100%{opacity:.9;transform:scale(1.2) rotate(0);filter:blur(20px) saturate(1.22)}
}
@keyframes ft-splash-colour-drift{
  from{transform:scale(1.2) translate3d(-1.2%,.4%,0) rotate(0);filter:blur(20px) saturate(1.2)}
  to{transform:scale(1.26) translate3d(1.2%,-1%,0) rotate(.8deg);filter:blur(23px) saturate(1.28)}
}
@keyframes ft-splash-card-bloom{
  from{opacity:.72;transform:translateY(10px) scale(.965);filter:blur(5px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes ft-splash-card-glow{
  from{box-shadow:var(--lift-3),var(--ring),0 0 0 color-mix(in oklab,var(--rose) 0%,transparent)}
  to{box-shadow:var(--lift-3),var(--ring),0 24px 70px color-mix(in oklab,var(--lavender) 11%,transparent)}
}
@keyframes ft-splash-heart-enter{
  from{opacity:0;transform:translateY(8px) scale(.72);filter:blur(8px)}
  to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}
}
@keyframes ft-splash-content-enter{
  from{opacity:0;transform:translateY(10px);filter:blur(5px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
@media(prefers-reduced-motion:reduce){
  .ft-splash::after,
  .ft-splash::before,
  .ft-splash-heart,
  .ft-splash-title,
  .ft-splash-sub,
  .ft-splash-picker,
  .ft-splash-signout{
    animation:none!important;
  }
  .ft-splash::after{
    opacity:.66;
    transform:none;
  }
}

/* ===== Preview polish pass 24: lower floating bottom bar ===== */
.ft-nav{
  --nav-bottom-gap:max(6px,calc(env(safe-area-inset-bottom,0px) - 8px));
  bottom:var(--nav-bottom-gap)!important;
}
.ft-fab{
  bottom:calc(var(--nav-bottom-gap,10px) + 102px)!important;
}
.ft-app{
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom,0px) + 34px)!important;
}

/* ===== Preview polish pass 25: daily suggestion glass panel ===== */
.ft-daily-rec{
  overflow:hidden;
  padding:18px 18px 16px!important;
  border-radius:24px!important;
  border:1px solid color-mix(in oklab,var(--rose) 28%,var(--glass-line))!important;
  background:
    radial-gradient(320px 180px at 10% 0%,color-mix(in oklab,var(--rose) 14%,transparent),transparent 72%),
    radial-gradient(340px 200px at 96% 18%,color-mix(in oklab,var(--lavender) 13%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 80%,transparent),color-mix(in oklab,var(--bg2-base) 58%,transparent))!important;
  box-shadow:var(--lift-2),var(--ring),0 18px 42px color-mix(in oklab,var(--rose) 10%,transparent);
  backdrop-filter:blur(22px) saturate(1.16);
  -webkit-backdrop-filter:blur(22px) saturate(1.16);
}
.ft-daily-rec::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,color-mix(in oklab,#fff 15%,transparent),transparent 38%),
    radial-gradient(280px 120px at 58% 0%,color-mix(in oklab,var(--apricot) 9%,transparent),transparent 74%);
  opacity:.8;
}
.ft-daily-rec > *{
  position:relative;
  z-index:1;
}
.ft-daily-rec-head{
  margin-bottom:12px!important;
  color:var(--text)!important;
  font-size:12px!important;
  letter-spacing:.14em!important;
}
.ft-daily-rec-head > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.ft-daily-rec-actions button{
  min-width:34px;
  min-height:34px;
  border-radius:999px!important;
  background:color-mix(in oklab,var(--bg2-base) 68%,transparent)!important;
  border:1px solid color-mix(in oklab,var(--text) 10%,transparent)!important;
  color:var(--text2)!important;
  box-shadow:0 1px 0 color-mix(in oklab,#fff 28%,transparent) inset,0 8px 18px color-mix(in oklab,var(--text) 6%,transparent);
}
.ft-daily-rec-copy{
  font-size:15px!important;
  line-height:1.48!important;
  color:var(--text)!important;
}
.ft-daily-rec-copy p{
  margin:0;
}
.ft-daily-rec-user > div{
  border:1px solid color-mix(in oklab,var(--rose) 20%,transparent);
  background:color-mix(in oklab,var(--rose) 10%,var(--bg2-base))!important;
  box-shadow:0 10px 22px color-mix(in oklab,var(--rose) 8%,transparent);
}
.ft-daily-rec-ai-actions{
  border:1px solid color-mix(in oklab,var(--lavender) 24%,var(--glass-line))!important;
  border-radius:16px!important;
  background:color-mix(in oklab,var(--lavender) 9%,var(--bg2-base))!important;
}
.ft-daily-rec-reply{
  gap:10px!important;
  margin-top:16px!important;
}
.ft-daily-rec-input{
  min-height:48px!important;
  padding:12px 16px!important;
  border-radius:18px!important;
  border:1px solid color-mix(in oklab,var(--text) 12%,transparent)!important;
  background:color-mix(in oklab,var(--bg2-base) 76%,transparent)!important;
  box-shadow:0 1px 0 color-mix(in oklab,#fff 28%,transparent) inset,0 8px 18px color-mix(in oklab,var(--text) 5%,transparent);
  font-size:15px!important;
}
.ft-daily-rec-input:focus{
  border-color:color-mix(in oklab,var(--rose) 46%,var(--border2))!important;
  box-shadow:0 0 0 4px color-mix(in oklab,var(--rose) 12%,transparent),0 10px 22px color-mix(in oklab,var(--rose) 8%,transparent)!important;
}
.ft-daily-rec-send{
  width:48px;
  min-width:48px;
  height:48px;
  border-radius:18px!important;
  box-shadow:0 12px 24px color-mix(in oklab,var(--lavender) 15%,transparent),0 1px 0 color-mix(in oklab,#fff 28%,transparent) inset!important;
}
.ft-daily-rec-send:not(:disabled){
  background:linear-gradient(135deg,var(--rose),var(--lavender))!important;
  color:#fff!important;
}
.ft-daily-rec-send:disabled{
  opacity:.56;
}
.ft-daily-rec-chips{
  gap:8px!important;
  margin-top:12px!important;
}
.ft-daily-rec-chips button{
  min-height:34px;
  padding:7px 13px!important;
  border-radius:999px!important;
  border:1px solid color-mix(in oklab,var(--text) 9%,transparent)!important;
  background:color-mix(in oklab,var(--bg2-base) 54%,transparent)!important;
  color:var(--text2)!important;
  box-shadow:0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,0 8px 16px color-mix(in oklab,var(--text) 4%,transparent);
  font-size:13px!important;
  font-weight:500;
}

/* ===== Preview polish pass 26: progress detail + deletable memories ===== */
.ft-progress-card{
  position:relative;
}
.ft-progress-card::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:radial-gradient(260px 110px at 12% 0%,color-mix(in oklab,var(--teal) 10%,transparent),transparent 72%);
}
.ft-progress-open{
  margin-left:auto;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--text) 10%,transparent);
  background:color-mix(in oklab,var(--bg2-base) 56%,transparent);
  color:var(--text2);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.ft-completed-sheet-sub{
  margin:-6px 0 16px;
  color:var(--text2);
  font-family:'Caveat',cursive;
  font-size:19px;
}
.ft-completed-month{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin:18px 0 10px;
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:0;
}
.ft-completed-month span{
  color:var(--text3);
  font-family:'Inter Tight',system-ui,sans-serif;
  font-size:12px;
  font-weight:700;
}
.ft-completed-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  margin-bottom:10px;
  border-radius:18px;
  border:1px solid color-mix(in oklab,var(--text) 10%,transparent);
  background:
    radial-gradient(180px 90px at 0% 0%,color-mix(in oklab,var(--rose) 8%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 76%,transparent),color-mix(in oklab,var(--bg2-base) 54%,transparent));
  color:var(--text);
  box-shadow:0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,0 10px 22px color-mix(in oklab,var(--text) 5%,transparent);
  font-family:inherit;
  text-align:left;
  cursor:pointer;
}
.ft-completed-icon{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  background:color-mix(in oklab,var(--rose) 12%,var(--bg2-base));
  box-shadow:0 1px 0 color-mix(in oklab,#fff 30%,transparent) inset;
}
.ft-completed-body{
  min-width:0;
  flex:1;
}
.ft-completed-title{
  font-weight:700;
  font-size:15px;
  line-height:1.2;
}
.ft-completed-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px;
  color:var(--text3);
  font-size:12px;
}
.ft-completed-meta span:not(:last-child)::after{
  content:"·";
  margin-left:6px;
}
.ft-completed-check{
  width:28px;
  height:28px;
  border-radius:999px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:#fff;
  background:linear-gradient(135deg,var(--rose),var(--lavender));
  box-shadow:0 8px 16px color-mix(in oklab,var(--rose) 16%,transparent);
  font-weight:800;
}
.ft-mem-title{
  padding-right:74px!important;
}
.ft-mem-delete{
  position:absolute;
  top:10px;
  right:48px;
  width:32px;
  height:32px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--rose) 24%,transparent);
  background:color-mix(in oklab,var(--bg2-base) 82%,transparent);
  color:var(--rose);
  box-shadow:0 2px 8px color-mix(in oklab,var(--text) 10%,transparent),0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset;
  cursor:pointer;
  font-family:inherit;
  font-size:21px;
  line-height:1;
  display:grid;
  place-items:center;
}
.ft-mem-delete:hover,
.ft-mem-delete:focus-visible{
  background:color-mix(in oklab,var(--rose) 14%,var(--bg2-base));
}
.ft-memory-delete-full{
  width:100%;
  min-height:48px;
  margin-top:14px;
  border-radius:16px;
  border:1px solid color-mix(in oklab,var(--rose) 32%,var(--glass-line));
  background:color-mix(in oklab,var(--rose) 9%,var(--bg2-base));
  color:var(--rose);
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,0 10px 22px color-mix(in oklab,var(--rose) 7%,transparent);
}

/* ===== Preview polish pass 45: lower memory detail sheet affordance ===== */
.ft-memory-detail-sheet{
  border-radius:34px 34px 0 0!important;
  box-shadow:
    0 -20px 60px color-mix(in oklab,var(--text) 24%,transparent),
    0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset!important;
}
.ft-memory-detail-sheet .ft-sheet-drag-area{
  padding-top:18px!important;
  padding-bottom:14px!important;
}
.ft-memory-detail-sheet .ft-sheet-handle{
  width:68px!important;
  height:7px!important;
  background:color-mix(in oklab,var(--lavender) 36%,var(--border2))!important;
  opacity:1!important;
  box-shadow:0 4px 14px color-mix(in oklab,var(--text) 12%,transparent)!important;
}

/* ===== Preview polish pass 27: expanded palette picker ===== */
.ft-palette-grid{
  width:100%;
  max-width:100%;
}
.ft-settings-row-palette{
  align-items:stretch!important;
  flex-direction:column;
  gap:12px!important;
}
.ft-settings-row-palette > div:first-child{
  width:100%;
}
.ft-palette-choice{
  min-height:38px;
  padding:5px 9px 5px 5px;
  border-radius:999px;
  border:1px solid color-mix(in oklab,var(--text) 9%,transparent);
  background:color-mix(in oklab,var(--bg2-base) 58%,transparent);
  color:var(--text2);
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  font-family:inherit;
  font-size:12px;
  font-weight:700;
  box-shadow:0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,0 8px 16px color-mix(in oklab,var(--text) 4%,transparent);
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s ease,background .16s ease;
}
.ft-palette-choice:hover{
  transform:translateY(-1px);
  border-color:color-mix(in oklab,var(--rose) 22%,var(--border2));
}
.ft-palette-choice.selected{
  color:var(--text);
  border-color:color-mix(in oklab,var(--rose) 46%,var(--glass-line));
  background:color-mix(in oklab,var(--rose) 10%,var(--bg2-base));
  box-shadow:0 0 0 2px color-mix(in oklab,var(--rose) 10%,transparent),0 10px 22px color-mix(in oklab,var(--rose) 9%,transparent);
}
.ft-palette-swatch{
  width:28px;
  height:28px;
  border-radius:999px;
  background:
    radial-gradient(circle at 24% 28%,var(--sw1) 0 24%,transparent 56%),
    radial-gradient(circle at 78% 22%,var(--sw2) 0 28%,transparent 58%),
    radial-gradient(circle at 24% 82%,var(--sw3) 0 25%,transparent 58%),
    radial-gradient(circle at 82% 82%,var(--sw4) 0 24%,transparent 58%),
    linear-gradient(135deg,var(--sw1),var(--sw2) 44%,var(--sw3) 72%,var(--sw4));
  box-shadow:0 1px 0 color-mix(in oklab,#fff 36%,transparent) inset,0 5px 12px color-mix(in oklab,var(--text) 8%,transparent);
  flex:0 0 auto;
}
.ft-palette-label{
  white-space:nowrap;
}
@media(max-width:430px){
  .ft-palette-grid{
    justify-content:flex-start!important;
  }
  .ft-palette-choice{
    flex:1 1 calc(50% - 6px);
    justify-content:flex-start;
  }
}

/* ===== Preview polish pass 39: bespoke AI typography ===== */
:root{
  --ai-prose-font:"Newsreader", Georgia, "Times New Roman", serif;
}
.ft-daily-rec-copy,
.ft-ai-message.assistant .ft-ai-bubble{
  font-family:var(--ai-prose-font)!important;
  font-size:17px!important;
  line-height:1.55!important;
  font-weight:500!important;
  letter-spacing:.003em!important;
  color:color-mix(in oklab,var(--text) 92%,var(--lavender))!important;
  font-optical-sizing:auto;
}
.ft-daily-rec-copy p,
.ft-ai-message.assistant .ft-ai-bubble p{
  margin:0 0 .72em!important;
}
.ft-daily-rec-copy p:last-child,
.ft-ai-message.assistant .ft-ai-bubble p:last-child{
  margin-bottom:0!important;
}
.ft-daily-rec-copy strong,
.ft-ai-message.assistant .ft-ai-bubble strong{
  font-family:var(--ai-prose-font)!important;
  font-weight:700!important;
  color:color-mix(in oklab,var(--rose) 72%,var(--text))!important;
}
.ft-daily-rec-copy em,
.ft-ai-message.assistant .ft-ai-bubble em{
  color:color-mix(in oklab,var(--lavender) 64%,var(--text))!important;
  font-style:italic;
}
.ft-ai-message.user .ft-ai-bubble{
  font-family:"Inter Tight",system-ui,sans-serif!important;
  font-size:14px!important;
  line-height:1.48!important;
  font-weight:600!important;
}
.ft-ai-intro{
  font-family:var(--ai-prose-font)!important;
  font-size:17px!important;
  line-height:1.52!important;
  color:color-mix(in oklab,var(--text2) 88%,var(--lavender))!important;
}
.ft-ai-kicker,
.ft-daily-rec-head{
  font-family:"Inter Tight",system-ui,sans-serif!important;
  font-weight:800!important;
}
.ft-ai-chip,
.ft-ai-preset,
.ft-daily-rec-input,
.ft-daily-rec-send,
.ft-daily-rec-chips button{
  font-family:"Inter Tight",system-ui,sans-serif!important;
}
.ft-ai-preset{
  min-height:48px!important;
  border-radius:16px!important;
  padding:12px 14px!important;
  font-size:15px!important;
  font-weight:700!important;
  background:
    radial-gradient(220px 90px at 0% 0%,color-mix(in oklab,var(--rose) 9%,transparent),transparent 72%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 82%,transparent),color-mix(in oklab,var(--bg2-base) 62%,transparent))!important;
  border-color:color-mix(in oklab,var(--text) 12%,var(--glass-line))!important;
  box-shadow:var(--lift-1),var(--ring)!important;
}
.ft-ai-chip{
  min-height:34px!important;
  padding:7px 12px!important;
  font-size:13px!important;
  font-weight:700!important;
  box-shadow:0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,0 6px 14px color-mix(in oklab,var(--text) 5%,transparent)!important;
}
.ft-ai-message.assistant .ft-ai-bubble{
  background:
    radial-gradient(240px 120px at 0% 0%,color-mix(in oklab,var(--lavender) 10%,transparent),transparent 76%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 78%,transparent),color-mix(in oklab,var(--bg2-base) 58%,transparent))!important;
  border-color:color-mix(in oklab,var(--lavender) 20%,var(--glass-line))!important;
  box-shadow:var(--lift-1),var(--ring)!important;
}
.ft-ai-message.assistant .ft-ai-bubble ul,
.ft-ai-message.assistant .ft-ai-bubble ol,
.ft-daily-rec-copy ul,
.ft-daily-rec-copy ol{
  font-family:var(--ai-prose-font)!important;
  padding-left:1.15em!important;
}
@media(max-width:430px){
  .ft-daily-rec-copy,
  .ft-ai-message.assistant .ft-ai-bubble{
    font-size:16.5px!important;
    line-height:1.58!important;
  }
}

/* ===== Preview polish pass 40: fixed header clearance ===== */
html{
  scroll-padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 30px);
}
.ft-app{
  padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 30px)!important;
}
.ft-screen{
  padding-top:22px!important;
}
.ft-topbar{
  overflow:visible;
  background:color-mix(in oklab,var(--bg2-base) 94%,transparent)!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,var(--text) 12%,transparent),
    0 14px 30px color-mix(in oklab,var(--text) 8%,transparent)!important;
}
.ft-topbar > *{
  position:relative;
  z-index:2;
}
.ft-topbar::before{
  display:block!important;
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 96%,transparent) 0%,color-mix(in oklab,var(--bg-base) 88%,transparent) 100%),
    radial-gradient(360px 120px at 18% 0%,color-mix(in oklab,var(--lavender) 10%,transparent),transparent 72%),
    radial-gradient(320px 120px at 88% 0%,color-mix(in oklab,var(--rose) 10%,transparent),transparent 72%)!important;
  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);
}
.ft-topbar::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-38px;
  height:38px;
  pointer-events:none;
  z-index:1;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 92%,transparent) 0%,color-mix(in oklab,var(--bg-base) 72%,transparent) 48%,transparent 100%);
}
.ft-catrow-sticky{
  top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 12px)!important;
}
.ft-game-switch{
  top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 22px)!important;
}
@media(max-width:430px){
  .ft-app{
    padding-top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 24px)!important;
  }
  .ft-screen{
    padding-top:18px!important;
  }
}

/* ===== Preview polish pass 41: prevent horizontal page drift ===== */
html,
body,
#root{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
  overscroll-behavior-x:none;
  -webkit-text-size-adjust:100%;
}
.ft-app,
.ft-screen{
  width:100%;
  max-width:100vw;
  min-width:0;
  overflow-x:clip;
  overscroll-behavior-x:none;
}
.ft-app{
  position:relative;
  left:0!important;
  right:0!important;
}
.ft-topbar{
  width:100vw!important;
  max-width:100vw!important;
}
.ft-catrow-sticky{
  max-width:calc(100vw - 24px);
  overflow:hidden!important;
  contain:paint;
}
.ft-list-screen .ft-catrow-sticky{
  max-width:calc(100vw - 24px);
}
.ft-catrow{
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:hidden!important;
}
.ft-splash.hide{
  pointer-events:none;
  transform:translateZ(0);
  max-width:100vw;
  overflow:hidden;
}

/* ===== Preview polish pass 42: distinct dark theme palettes ===== */
html[data-theme="dark"]{
  --bg-base:#160f1a;
  --bg2-base:#211827;
  --bg:#160f1a;
  --bg2:#211827;
  --card:color-mix(in oklab,var(--rose) 6%,rgba(255,250,245,.055));
  --card-h:color-mix(in oklab,var(--rose) 8%,rgba(255,250,245,.09));
  --card-strong:color-mix(in oklab,var(--lavender) 8%,rgba(255,250,245,.13));
}
html[data-theme="dark"][data-palette="peony"]{
  --bg-base:#1b0d1d;
  --bg2-base:#28142b;
  --rose:#FF63B3;
  --lavender:#D882FF;
  --apricot:#F18A78;
  --teal:#6ED0CF;
  --ft-splash:
    radial-gradient(72% 48% at 14% 4%, color-mix(in oklab,var(--rose) 34%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 92% 14%, color-mix(in oklab,var(--lavender) 30%,transparent) 0%, transparent 68%),
    radial-gradient(42% 34% at 18% 82%, color-mix(in oklab,var(--apricot) 13%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="lilac"]{
  --bg-base:#111427;
  --bg2-base:#1a1d35;
  --rose:#9C92FF;
  --lavender:#CDB8FF;
  --apricot:#DCA6F6;
  --teal:#76B5E5;
  --ft-splash:
    radial-gradient(72% 48% at 16% 6%, color-mix(in oklab,var(--rose) 30%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 90% 16%, color-mix(in oklab,var(--teal) 20%,transparent) 0%, transparent 70%),
    radial-gradient(46% 34% at 50% 86%, color-mix(in oklab,var(--lavender) 22%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="sorbet"]{
  --bg-base:#1c130f;
  --bg2-base:#291b14;
  --rose:#FF8267;
  --lavender:#78D6C0;
  --apricot:#FFC06F;
  --teal:#68C9B5;
  --ft-splash:
    radial-gradient(74% 48% at 12% 6%, color-mix(in oklab,var(--rose) 30%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 90% 18%, color-mix(in oklab,var(--lavender) 22%,transparent) 0%, transparent 70%),
    radial-gradient(42% 34% at 24% 82%, color-mix(in oklab,var(--apricot) 18%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="aurora"]{
  --bg-base:#071c1a;
  --bg2-base:#102927;
  --rose:#36D5B6;
  --lavender:#8D83FF;
  --apricot:#A878F0;
  --teal:#65DAD7;
  --ft-splash:
    radial-gradient(74% 50% at 12% 6%, color-mix(in oklab,var(--rose) 32%,transparent) 0%, transparent 66%),
    radial-gradient(56% 42% at 88% 18%, color-mix(in oklab,var(--lavender) 30%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 56% 86%, color-mix(in oklab,var(--teal) 18%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="blush"]{
  --bg-base:#1c1016;
  --bg2-base:#281922;
  --rose:#F0739B;
  --lavender:#F0BA8E;
  --apricot:#F5CAD7;
  --teal:#A980DE;
  --ft-splash:
    radial-gradient(72% 48% at 16% 6%, color-mix(in oklab,var(--rose) 30%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 16%, color-mix(in oklab,var(--lavender) 20%,transparent) 0%, transparent 70%),
    radial-gradient(42% 34% at 24% 82%, color-mix(in oklab,var(--apricot) 18%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="sunset"]{
  --bg-base:#1d100d;
  --bg2-base:#2b1813;
  --rose:#FF6A5E;
  --lavender:#F2B23F;
  --apricot:#FFAE62;
  --teal:#9A6AC0;
  --ft-splash:
    radial-gradient(74% 48% at 14% 4%, color-mix(in oklab,var(--rose) 34%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 92% 16%, color-mix(in oklab,var(--lavender) 26%,transparent) 0%, transparent 68%),
    radial-gradient(42% 34% at 20% 82%, color-mix(in oklab,var(--teal) 16%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="ocean"]{
  --bg-base:#071426;
  --bg2-base:#0d2039;
  --rose:#40C4EA;
  --lavender:#4771E6;
  --apricot:#83DDF0;
  --teal:#3AA2CF;
  --ft-splash:
    radial-gradient(72% 48% at 12% 6%, color-mix(in oklab,var(--rose) 28%,transparent) 0%, transparent 66%),
    radial-gradient(60% 44% at 90% 14%, color-mix(in oklab,var(--lavender) 34%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 48% 86%, color-mix(in oklab,var(--teal) 18%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="garden"]{
  --bg-base:#11190f;
  --bg2-base:#1b2418;
  --rose:#87C77B;
  --lavender:#F0AE76;
  --apricot:#F2C887;
  --teal:#75C2AF;
  --ft-splash:
    radial-gradient(72% 48% at 12% 6%, color-mix(in oklab,var(--rose) 26%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 90% 16%, color-mix(in oklab,var(--lavender) 22%,transparent) 0%, transparent 70%),
    radial-gradient(44% 34% at 52% 84%, color-mix(in oklab,var(--teal) 16%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="twilight"]{
  --bg-base:#0d1024;
  --bg2-base:#181631;
  --rose:#7767F0;
  --lavender:#D15BAC;
  --apricot:#D47C91;
  --teal:#4B8DDB;
  --ft-splash:
    radial-gradient(74% 48% at 14% 4%, color-mix(in oklab,var(--rose) 34%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 90% 16%, color-mix(in oklab,var(--lavender) 28%,transparent) 0%, transparent 68%),
    radial-gradient(44% 34% at 22% 84%, color-mix(in oklab,var(--teal) 18%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette="mono"]{
  --bg-base:#141318;
  --bg2-base:#202027;
  --rose:#D3CBD8;
  --lavender:#B3A5D8;
  --apricot:#DCCBBF;
  --teal:#B1CBC8;
  --ft-splash:
    radial-gradient(72% 48% at 14% 6%, color-mix(in oklab,var(--rose) 18%,transparent) 0%, transparent 68%),
    radial-gradient(58% 42% at 90% 16%, color-mix(in oklab,var(--lavender) 18%,transparent) 0%, transparent 70%),
    radial-gradient(44% 34% at 22% 84%, color-mix(in oklab,var(--teal) 10%,transparent) 0%, transparent 74%);
}
html[data-theme="dark"][data-palette]{
  --bg:color-mix(in oklab,var(--rose) 8%,var(--bg-base));
  --bg2:color-mix(in oklab,var(--lavender) 8%,var(--bg2-base));
  --card:color-mix(in oklab,var(--rose) 7%,rgba(255,250,245,.055));
  --card-h:color-mix(in oklab,var(--rose) 10%,rgba(255,250,245,.09));
  --card-strong:color-mix(in oklab,var(--lavender) 11%,rgba(255,250,245,.13));
  --border:color-mix(in oklab,var(--rose) 14%,rgba(255,220,230,.08));
  --border2:color-mix(in oklab,var(--lavender) 16%,rgba(255,220,230,.14));
}

/* ===== Preview polish pass 28: smoother list bloom + softer list cards ===== */
.ft-list-screen{
  position:relative;
  isolation:isolate;
}
.ft-list-screen::before{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  left:50%;
  top:-18px;
  width:min(900px,168vw);
  height:760px;
  transform:translateX(-50%);
  background:
    radial-gradient(54% 34% at 20% 8%,color-mix(in oklab,var(--lavender) 18%,transparent) 0%,transparent 76%),
    radial-gradient(48% 30% at 78% 12%,color-mix(in oklab,var(--rose) 20%,transparent) 0%,transparent 78%),
    radial-gradient(56% 36% at 52% 48%,color-mix(in oklab,var(--rose) 12%,transparent) 0%,transparent 78%),
    radial-gradient(46% 32% at 28% 76%,color-mix(in oklab,var(--apricot) 8%,transparent) 0%,transparent 80%);
  filter:blur(28px) saturate(1.08);
  opacity:.82;
}
.ft-list-screen .ft-catrow-sticky{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
.ft-list-screen .ft-catrow-sticky::before{
  display:none!important;
}
.ft-list-screen .ft-catrow{
  padding-top:18px!important;
  padding-bottom:24px!important;
}
.ft-list-screen .ft-search{
  border-radius:28px;
  filter:drop-shadow(0 16px 28px color-mix(in oklab,var(--text) 4%,transparent));
}
.ft-list-screen .ft-swipe-row{
  border-radius:30px!important;
  background:transparent!important;
  margin-bottom:16px;
}
.ft-list-screen .ft-swipe-row > div[style]{
  background:transparent!important;
  border-radius:30px!important;
}
.ft-list-screen .ft-search .ft-input{
  min-height:58px;
  border-radius:26px!important;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 84%,transparent),color-mix(in oklab,var(--bg2-base) 66%,transparent))!important;
  box-shadow:
    inset 0 1px 0 color-mix(in oklab,#fff 36%,transparent),
    0 14px 32px color-mix(in oklab,var(--text) 6%,transparent)!important;
}
.ft-list-screen .ft-mitem{
  border-radius:30px!important;
  overflow:hidden!important;
  margin-bottom:0!important;
  background:
    linear-gradient(145deg,color-mix(in oklab,var(--bg2-base) 82%,transparent),color-mix(in oklab,var(--card) 66%,transparent))!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 34%,transparent) inset,
    0 22px 40px color-mix(in oklab,var(--text) 8%,transparent),
    0 10px 26px color-mix(in oklab,var(--rose) 7%,transparent)!important;
}
.ft-list-screen .ft-mitem-bd{
  inset:1px!important;
  border-radius:29px!important;
  opacity:.2!important;
  filter:blur(3px) saturate(1.08)!important;
  transform:scale(1.045);
}
.ft-list-screen .ft-mitem-bd::after{
  border-radius:inherit;
  background:
    radial-gradient(72% 86% at 22% 30%,color-mix(in oklab,var(--bg2-base) 86%,transparent),transparent 72%),
    linear-gradient(100deg,color-mix(in oklab,var(--bg2-base) 84%,transparent) 0%,color-mix(in oklab,var(--card) 72%,transparent) 52%,color-mix(in oklab,var(--bg-base) 54%,transparent) 100%)!important;
}
.ft-list-screen .ft-mitem-inner{
  border-radius:inherit;
  overflow:hidden;
  background:
    linear-gradient(105deg,color-mix(in oklab,var(--bg2-base) 86%,transparent) 0%,color-mix(in oklab,var(--bg2-base) 74%,transparent) 48%,color-mix(in oklab,var(--card) 58%,transparent) 100%)!important;
}
.ft-list-screen .ft-mitem-poster{
  border-radius:18px!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,
    0 14px 26px color-mix(in oklab,var(--text) 13%,transparent)!important;
}
.ft-list-screen .ft-item-cb{
  border-radius:16px!important;
}
.ft-list-screen .ft-catchip{
  border-radius:24px!important;
}
@media(max-width:430px){
  .ft-list-screen::before{
    top:-24px;
    width:180vw;
    height:720px;
    opacity:.78;
    filter:blur(24px) saturate(1.06);
  }
  .ft-list-screen .ft-mitem{
    border-radius:28px!important;
  }
  .ft-list-screen .ft-mitem-bd{
    border-radius:27px!important;
  }
}

/* ===== Preview polish pass 29: smoother splash motion ===== */
.ft-splash{
  contain:layout paint;
  transform:translate3d(0,0,0);
  backface-visibility:hidden;
  transition:
    opacity .62s cubic-bezier(.22,1,.36,1),
    transform .62s cubic-bezier(.22,1,.36,1)!important;
}
.ft-splash.hide{
  opacity:0;
  transform:translate3d(0,0,0) scale(1.012);
}
.ft-splash::after{
  filter:blur(22px) saturate(1.18)!important;
  will-change:transform,opacity;
  transform:translate3d(0,0,0) scale(.22);
  animation:
    ft-splash-colour-spread 2.75s cubic-bezier(.2,1,.22,1) .04s both,
    ft-splash-colour-drift 16s ease-in-out 2.65s infinite alternate!important;
}
.ft-splash::before{
  will-change:transform,opacity,box-shadow;
}
.ft-splash-heart,
.ft-splash-title,
.ft-splash-sub,
.ft-splash-picker,
.ft-splash-signout{
  will-change:transform,opacity;
  transform:translate3d(0,0,0);
}
.ft-splash-heart{
  animation-duration:.78s,4.2s!important;
  animation-delay:.16s,1.05s!important;
  animation-timing-function:cubic-bezier(.2,1,.24,1),ease-in-out!important;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.2) rotate(-1.4deg)}
  24%{opacity:.38;transform:translate3d(-.8%,4px,0) scale(.48) rotate(-.9deg)}
  52%{opacity:.74;transform:translate3d(.2%,1px,0) scale(.82) rotate(-.25deg)}
  76%{opacity:.9;transform:translate3d(.4%,0,0) scale(1.08) rotate(.08deg)}
  100%{opacity:.88;transform:translate3d(0,0,0) scale(1.18) rotate(0)}
}
@keyframes ft-splash-colour-drift{
  from{transform:translate3d(-.7%,.3%,0) scale(1.18) rotate(0);opacity:.86}
  to{transform:translate3d(.7%,-.5%,0) scale(1.22) rotate(.45deg);opacity:.9}
}
@keyframes ft-splash-card-bloom{
  from{opacity:.76;transform:translate3d(0,8px,0) scale(.975)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-heart-enter{
  from{opacity:0;transform:translate3d(0,7px,0) scale(.78)}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-content-enter{
  from{opacity:0;transform:translate3d(0,9px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes ft-splash-heart-float{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,-3px,0) scale(1.012)}
}
@media(prefers-reduced-motion:reduce){
  .ft-splash.hide{
    transform:none;
  }
}

/* ===== Preview polish pass 30: gentler splash entrance ===== */
.ft-splash::after{
  opacity:.84;
  animation:
    ft-splash-colour-spread 3.25s cubic-bezier(.22,1,.24,1) .02s both,
    ft-splash-colour-drift 18s ease-in-out 3.05s infinite alternate!important;
}
.ft-splash::before{
  animation:
    ft-splash-card-bloom 1.08s cubic-bezier(.18,1,.24,1) .08s both,
    ft-splash-card-glow 8s ease-in-out 1.4s infinite alternate!important;
}
.ft-splash-heart{
  animation-duration:.95s,4.8s!important;
  animation-delay:.34s,1.35s!important;
}
.ft-splash-title{
  animation-delay:.5s!important;
}
.ft-splash-sub{
  animation-delay:.66s!important;
}
.ft-splash-picker,
.ft-splash-signout{
  animation-delay:.76s!important;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:.04;transform:translate3d(0,10px,0) scale(.42) rotate(-.8deg)}
  24%{opacity:.22;transform:translate3d(-.5%,7px,0) scale(.62) rotate(-.5deg)}
  52%{opacity:.5;transform:translate3d(.1%,3px,0) scale(.88) rotate(-.18deg)}
  78%{opacity:.76;transform:translate3d(.25%,1px,0) scale(1.08) rotate(.04deg)}
  100%{opacity:.86;transform:translate3d(0,0,0) scale(1.18) rotate(0)}
}
@keyframes ft-splash-card-bloom{
  0%{opacity:0;transform:translate3d(0,12px,0) scale(.945)}
  38%{opacity:.42;transform:translate3d(0,8px,0) scale(.966)}
  72%{opacity:.82;transform:translate3d(0,2px,0) scale(.992)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-heart-enter{
  0%{opacity:0;transform:translate3d(0,6px,0) scale(.88)}
  56%{opacity:.72;transform:translate3d(0,2px,0) scale(.975)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-content-enter{
  0%{opacity:0;transform:translate3d(0,8px,0)}
  64%{opacity:.74;transform:translate3d(0,2px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

/* ===== Preview polish pass 31: fade the whole splash layer in ===== */
.ft-splash:not(.hide){
  animation:none!important;
}
.ft-splash::after{
  animation:
    ft-splash-colour-spread 3.35s cubic-bezier(.24,1,.26,1) .18s both,
    ft-splash-colour-drift 18s ease-in-out 3.2s infinite alternate!important;
}
.ft-splash::before{
  animation:
    ft-splash-card-bloom 1.28s cubic-bezier(.2,1,.24,1) .38s both,
    ft-splash-card-glow 8s ease-in-out 1.75s infinite alternate!important;
}
.ft-splash-heart{
  animation-delay:.72s,1.72s!important;
}
.ft-splash-title{
  animation-delay:.9s!important;
}
.ft-splash-sub{
  animation-delay:1.04s!important;
}
.ft-splash-picker,
.ft-splash-signout{
  animation-delay:1.12s!important;
}
@keyframes ft-splash-screen-in{
  0%{opacity:1;transform:translate3d(0,0,0) scale(.996)}
  55%{opacity:1;transform:translate3d(0,0,0) scale(.999)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-card-bloom{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.972)}
  50%{opacity:.28;transform:translate3d(0,5px,0) scale(.984)}
  84%{opacity:.78;transform:translate3d(0,1px,0) scale(.997)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* ===== Preview polish pass 32: faster, still-soft splash load ===== */
.ft-splash::after{
  opacity:.82;
  transform:translate3d(0,0,0) scale(.78);
  animation:
    ft-splash-colour-spread .9s cubic-bezier(.22,1,.28,1) 0s both,
    ft-splash-colour-drift 18s ease-in-out 1.1s infinite alternate!important;
}
.ft-splash::before{
  animation:
    ft-splash-card-bloom .62s cubic-bezier(.18,1,.28,1) .08s both,
    ft-splash-card-glow 8s ease-in-out 1s infinite alternate!important;
}
.ft-splash-heart{
  animation-delay:.22s,1s!important;
  animation-duration:.5s,4.8s!important;
}
.ft-splash-title{
  animation-delay:.32s!important;
  animation-duration:.52s!important;
}
.ft-splash-sub{
  animation-delay:.42s!important;
  animation-duration:.52s!important;
}
.ft-splash-picker,
.ft-splash-signout{
  animation-delay:.48s!important;
  animation-duration:.52s!important;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:.42;transform:translate3d(0,3px,0) scale(.72)}
  58%{opacity:.76;transform:translate3d(.1%,1px,0) scale(1.02)}
  100%{opacity:.86;transform:translate3d(0,0,0) scale(1.16)}
}
@keyframes ft-splash-card-bloom{
  0%{opacity:.08;transform:translate3d(0,6px,0) scale(.976)}
  62%{opacity:.72;transform:translate3d(0,2px,0) scale(.994)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-heart-enter{
  0%{opacity:0;transform:translate3d(0,4px,0) scale(.94)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes ft-splash-content-enter{
  0%{opacity:0;transform:translate3d(0,5px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}

/* ===== Preview polish pass 33: linger and slower bloom ===== */
.ft-splash::after{
  animation:
    ft-splash-colour-spread 1.55s cubic-bezier(.2,1,.26,1) 0s both,
    ft-splash-colour-drift 18s ease-in-out 1.65s infinite alternate!important;
}
.ft-splash-heart{
  animation-duration:.58s,3.4s!important;
  animation-delay:.2s,.86s!important;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:.34;transform:translate3d(0,4px,0) scale(.66)}
  36%{opacity:.56;transform:translate3d(.05%,2px,0) scale(.86)}
  72%{opacity:.78;transform:translate3d(.12%,.5px,0) scale(1.06)}
  100%{opacity:.86;transform:translate3d(0,0,0) scale(1.16)}
}

/* ===== Preview polish pass 34: instant boot splash + slower bloom linger ===== */
.ft-splash::after{
  opacity:.86;
  animation:
    ft-splash-colour-spread 2.15s cubic-bezier(.18,1,.24,1) 0s both,
    ft-splash-colour-drift 20s ease-in-out 2.2s infinite alternate!important;
}
.ft-splash::before{
  animation:
    ft-splash-card-bloom .48s cubic-bezier(.18,1,.3,1) 0s both,
    ft-splash-card-glow 8s ease-in-out .9s infinite alternate!important;
}
.ft-splash-heart{
  animation-duration:.34s,2.9s!important;
  animation-delay:.06s,.54s!important;
}
.ft-splash-title{
  animation-delay:.1s!important;
  animation-duration:.34s!important;
}
.ft-splash-sub{
  animation-delay:.16s!important;
  animation-duration:.34s!important;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:.58;transform:translate3d(0,2px,0) scale(.78)}
  42%{opacity:.72;transform:translate3d(.05%,1px,0) scale(.94)}
  78%{opacity:.84;transform:translate3d(.12%,0,0) scale(1.08)}
  100%{opacity:.88;transform:translate3d(0,0,0) scale(1.17)}
}
@keyframes ft-splash-card-bloom{
  0%{opacity:.72;transform:translate3d(0,2px,0) scale(.992)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}

/* ===== Preview polish pass 37: darker boot parity + slower bloom hold ===== */
.ft-splash::after{
  animation:
    ft-splash-colour-spread 3.4s cubic-bezier(.16,1,.24,1) 0s both,
    ft-splash-colour-drift 22s ease-in-out 3.45s infinite alternate!important;
}
.ft-splash-heart{
  animation-duration:.34s,2.75s!important;
  animation-delay:.06s,.42s!important;
}
@keyframes ft-splash-colour-spread{
  0%{opacity:.5;transform:translate3d(0,3px,0) scale(.72)}
  30%{opacity:.64;transform:translate3d(.04%,2px,0) scale(.86)}
  62%{opacity:.78;transform:translate3d(.1%,.8px,0) scale(1.02)}
  100%{opacity:.9;transform:translate3d(0,0,0) scale(1.18)}
}

/* ===== Preview polish pass 38: stronger palette separation ===== */
html[data-palette="sunset"]{
  --ft-splash:
    radial-gradient(72% 46% at 18% 8%, color-mix(in oklab,var(--rose) 26%,transparent) 0%, transparent 66%),
    radial-gradient(56% 40% at 88% 16%, color-mix(in oklab,var(--lavender) 22%,transparent) 0%, transparent 70%),
    radial-gradient(44% 34% at 20% 78%, color-mix(in oklab,var(--teal) 10%,transparent) 0%, transparent 74%);
}
html[data-palette="ocean"]{
  --ft-splash:
    radial-gradient(72% 48% at 18% 6%, color-mix(in oklab,var(--rose) 24%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 86% 16%, color-mix(in oklab,var(--lavender) 28%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 50% 84%, color-mix(in oklab,var(--apricot) 10%,transparent) 0%, transparent 74%);
}
html[data-palette="lilac"]{
  --ft-splash:
    radial-gradient(72% 46% at 16% 8%, color-mix(in oklab,var(--rose) 24%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 16%, color-mix(in oklab,var(--lavender) 24%,transparent) 0%, transparent 68%),
    radial-gradient(42% 34% at 50% 84%, color-mix(in oklab,var(--teal) 9%,transparent) 0%, transparent 74%);
}
html[data-palette="blush"]{
  --ft-splash:
    radial-gradient(72% 46% at 18% 8%, color-mix(in oklab,var(--rose) 24%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 18%, color-mix(in oklab,var(--lavender) 18%,transparent) 0%, transparent 70%),
    radial-gradient(46% 34% at 20% 78%, color-mix(in oklab,var(--apricot) 16%,transparent) 0%, transparent 74%);
}

/* ===== Preview polish pass 36: palette-aware splash hold ===== */
.ft-splash-heart{
  animation-duration:.34s,3s!important;
  animation-delay:.06s,.48s!important;
}

/* ===== Preview polish pass 35: distinct palettes + top settings control ===== */
html[data-palette="peony"]{
  --ft-splash:
    radial-gradient(70% 46% at 16% 8%, color-mix(in oklab,var(--rose) 30%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 86% 12%, color-mix(in oklab,var(--lavender) 26%,transparent) 0%, transparent 70%),
    radial-gradient(46% 34% at 22% 78%, color-mix(in oklab,var(--apricot) 9%,transparent) 0%, transparent 74%);
}
html[data-palette="sorbet"]{
  --ft-splash:
    radial-gradient(72% 46% at 16% 8%, color-mix(in oklab,var(--rose) 24%,transparent) 0%, transparent 68%),
    radial-gradient(58% 42% at 86% 16%, color-mix(in oklab,var(--lavender) 20%,transparent) 0%, transparent 70%),
    radial-gradient(42% 34% at 82% 82%, color-mix(in oklab,var(--teal) 10%,transparent) 0%, transparent 74%);
}
html[data-palette="aurora"]{
  --ft-splash:
    radial-gradient(70% 48% at 18% 6%, color-mix(in oklab,var(--teal) 24%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 18%, color-mix(in oklab,var(--lavender) 24%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 48% 82%, color-mix(in oklab,var(--rose) 16%,transparent) 0%, transparent 74%);
}
html[data-palette="twilight"]{
  --ft-splash:
    radial-gradient(70% 46% at 18% 6%, color-mix(in oklab,var(--rose) 24%,transparent) 0%, transparent 66%),
    radial-gradient(58% 42% at 88% 16%, color-mix(in oklab,var(--lavender) 22%,transparent) 0%, transparent 68%),
    radial-gradient(46% 34% at 18% 78%, color-mix(in oklab,var(--teal) 10%,transparent) 0%, transparent 74%);
}
.ft-settings-top-btn{
  font-size:15px!important;
}
.ft-top-actions .ft-avatar-switch{
  min-width:68px!important;
  padding:4px 7px!important;
  gap:0!important;
}
.ft-top-actions .ft-avatar-switch .avatar:not(:first-child){
  margin-left:-4px!important;
}
@media(max-width:430px){
  .ft-top-actions{
    gap:6px!important;
  }
  .ft-top-actions .ft-avatar-switch{
    min-width:62px!important;
    padding-inline:6px!important;
  }
  .ft-top-actions .ft-avatar-switch .avatar:not(:first-child){
    margin-left:-4px!important;
  }
}

/* ===== Preview polish pass 43: smoother boot-to-splash handoff ===== */
.ft-splash{
  z-index:220!important;
  background:
    radial-gradient(82vw 64vh at 34% 23%,color-mix(in oklab,var(--lavender) 24%,transparent),transparent 68%),
    radial-gradient(80vw 62vh at 72% 24%,color-mix(in oklab,var(--rose) 24%,transparent),transparent 70%),
    radial-gradient(74vw 48vh at 30% 86%,color-mix(in oklab,var(--apricot) 14%,transparent),transparent 72%),
    radial-gradient(60vw 42vh at 82% 82%,color-mix(in oklab,var(--teal) 8%,transparent),transparent 74%),
    linear-gradient(180deg,var(--bg-base) 0%,var(--bg2-base) 100%)!important;
  transition:
    opacity .52s cubic-bezier(.22,1,.36,1),
    transform .52s cubic-bezier(.22,1,.36,1)!important;
}
.ft-splash.hide{
  opacity:0!important;
  transform:translate3d(0,0,0) scale(1.004)!important;
}
.ft-splash::after{
  animation:
    ft-splash-colour-spread 3.45s cubic-bezier(.22,1,.24,1) .08s both,
    ft-splash-colour-drift 18s ease-in-out 3.25s infinite alternate!important;
}
.ft-splash::before{
  animation:
    ft-splash-card-bloom .96s cubic-bezier(.2,1,.24,1) .04s both,
    ft-splash-card-glow 8s ease-in-out 1.2s infinite alternate!important;
}
.ft-splash-heart{
  animation-duration:.38s,3s!important;
  animation-delay:.04s,.46s!important;
}
.ft-splash-title{
  animation-delay:.08s!important;
  animation-duration:.38s!important;
}
.ft-splash-sub{
  animation-delay:.14s!important;
  animation-duration:.38s!important;
}
.ft-splash-picker,
.ft-splash-signout{
  animation-delay:.18s!important;
  animation-duration:.38s!important;
}

/* ===== Preview polish pass 44: clean sticky list category rail ===== */
.ft-list-screen .ft-catrow-sticky{
  top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 8px)!important;
  z-index:39!important;
  margin:0 0 18px!important;
  padding:8px 0 9px!important;
  max-width:none!important;
  width:auto!important;
  overflow:hidden!important;
  contain:paint;
  isolation:isolate;
  border:1px solid color-mix(in oklab,var(--text) 10%,transparent)!important;
  border-radius:30px!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg2-base) 92%,transparent) 0%,
      color-mix(in oklab,var(--bg-base) 82%,var(--bg2-base)) 100%)!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 30%,transparent) inset,
    0 14px 26px color-mix(in oklab,var(--text) 7%,transparent),
    0 16px 34px color-mix(in oklab,var(--rose) 5%,transparent)!important;
  backdrop-filter:blur(28px) saturate(1.18)!important;
  -webkit-backdrop-filter:blur(28px) saturate(1.18)!important;
}
.ft-list-screen .ft-catrow-sticky::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:0!important;
  right:0!important;
  top:0!important;
  bottom:0!important;
  z-index:-1!important;
  pointer-events:none!important;
  background:
    radial-gradient(340px 88px at 18% 0%,color-mix(in oklab,var(--teal) 10%,transparent),transparent 74%),
    radial-gradient(360px 92px at 86% 8%,color-mix(in oklab,var(--lavender) 10%,transparent),transparent 76%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 72%,transparent),color-mix(in oklab,var(--bg-base) 88%,transparent))!important;
}
.ft-list-screen .ft-catrow-sticky::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:-22px;
  height:28px;
  z-index:-2;
  pointer-events:none;
  background:linear-gradient(180deg,color-mix(in oklab,var(--bg-base) 72%,transparent),transparent);
}
.ft-list-screen .ft-catrow{
  margin:0!important;
  padding:7px 18px 9px!important;
  gap:10px!important;
}
.ft-list-screen .ft-catchip{
  min-height:42px;
  padding:8px 18px!important;
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 92%,transparent),color-mix(in oklab,var(--bg2-base) 74%,transparent))!important;
  border-color:color-mix(in oklab,var(--text) 12%,transparent)!important;
  color:color-mix(in oklab,var(--text) 82%,var(--text2))!important;
}
.ft-list-screen .ft-catchip.a{
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--rose) 19%,var(--bg2-base)),color-mix(in oklab,var(--teal) 13%,var(--bg2-base)))!important;
  border-color:color-mix(in oklab,var(--rose) 34%,var(--teal))!important;
  color:var(--text)!important;
  box-shadow:
    0 12px 24px color-mix(in oklab,var(--rose) 13%,transparent),
    inset 0 1px 0 color-mix(in oklab,#fff 36%,transparent),
    var(--ring)!important;
}
@media(max-width:430px){
  .ft-list-screen .ft-catrow-sticky{
    margin-inline:0!important;
    top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 6px)!important;
  }
  .ft-list-screen .ft-catrow{
    padding-inline:14px!important;
  }
}

/* ===== Preview polish pass 45: seamless topbar fade ===== */
.ft-topbar{
  background:transparent!important;
  box-shadow:none!important;
  border-bottom:0!important;
  overflow:visible!important;
}
.ft-topbar::before{
  inset:0 0 -22px 0!important;
  background:
    radial-gradient(360px 118px at 18% 4%,color-mix(in oklab,var(--lavender) 8%,transparent),transparent 72%),
    radial-gradient(330px 112px at 86% 8%,color-mix(in oklab,var(--rose) 7%,transparent),transparent 74%),
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg-base) 98%,var(--bg2-base)) 0%,
      color-mix(in oklab,var(--bg-base) 94%,transparent) 64%,
      color-mix(in oklab,var(--bg-base) 46%,transparent) 88%,
      transparent 100%)!important;
  box-shadow:none!important;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.72) 86%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 72%,rgba(0,0,0,.72) 86%,transparent 100%);
}
.ft-topbar::after{
  bottom:-112px!important;
  height:124px!important;
  z-index:0!important;
  opacity:.82!important;
  background:
    radial-gradient(68% 74% at 28% 0%,color-mix(in oklab,var(--lavender) 7%,transparent),transparent 74%),
    radial-gradient(62% 72% at 82% 0%,color-mix(in oklab,var(--rose) 6%,transparent),transparent 76%),
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg-base) 58%,transparent) 0%,
      color-mix(in oklab,var(--bg-base) 34%,transparent) 34%,
      color-mix(in oklab,var(--bg-base) 14%,transparent) 66%,
      transparent 100%)!important;
  backdrop-filter:blur(11px) saturate(1.08);
  -webkit-backdrop-filter:blur(11px) saturate(1.08);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.22) 76%,transparent 100%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.62) 42%,rgba(0,0,0,.22) 76%,transparent 100%);
}
.ft-topbar > *{
  z-index:2!important;
}

/* ===== Preview polish pass 46: actually floating list rail + seam cleanup ===== */
.ft-list-screen{
  overflow:visible!important;
}
.ft-app{
  overflow-x:visible!important;
  overflow-y:visible!important;
}
#root{
  overflow:visible!important;
}
.ft-list-screen::before{
  top:-96px!important;
  height:900px!important;
  width:min(980px,190vw)!important;
  background:
    radial-gradient(54% 30% at 22% 0%,color-mix(in oklab,var(--teal) 18%,transparent) 0%,transparent 78%),
    radial-gradient(54% 32% at 78% 4%,color-mix(in oklab,var(--lavender) 16%,transparent) 0%,transparent 78%),
    radial-gradient(62% 40% at 50% 36%,color-mix(in oklab,var(--rose) 10%,transparent) 0%,transparent 80%),
    linear-gradient(180deg,transparent 0%,color-mix(in oklab,var(--bg-base) 18%,transparent) 28%,transparent 72%)!important;
  filter:blur(34px) saturate(1.06)!important;
  opacity:.72!important;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 82%,transparent 100%);
}
.ft-topbar::before{
  inset:0!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg-base) 96%,var(--bg2-base)) 0%,
      color-mix(in oklab,var(--bg-base) 92%,transparent) 100%)!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}
.ft-topbar::after{
  bottom:-86px!important;
  height:96px!important;
  opacity:.34!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg-base) 34%,transparent) 0%,
      color-mix(in oklab,var(--bg-base) 15%,transparent) 42%,
      transparent 100%)!important;
  backdrop-filter:blur(7px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.04)!important;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.22) 58%,transparent 100%)!important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.58) 0%,rgba(0,0,0,.22) 58%,transparent 100%)!important;
}
.ft-list-screen .ft-catrow-sticky{
  position:relative!important;
  top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 10px)!important;
  overflow:visible!important;
  contain:layout style!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg2-base) 92%,transparent) 0%,
      color-mix(in oklab,var(--bg2-base) 82%,var(--bg-base)) 100%)!important;
}
.ft-list-screen .ft-catrow-slot{
  min-height:95px;
  margin-bottom:18px;
}
.ft-list-screen .ft-catrow-slot .ft-catrow-sticky{
  margin-bottom:0!important;
}
.ft-list-screen .ft-catrow-sticky.is-floating{
  position:fixed!important;
  left:50%!important;
  top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 8px)!important;
  width:min(488px,calc(100vw - 36px))!important;
  max-width:min(488px,calc(100vw - 36px))!important;
  transform:translate3d(-50%,0,0)!important;
  z-index:39!important;
}
.ft-list-screen .ft-catrow-sticky::before{
  border-radius:inherit!important;
  background:
    radial-gradient(360px 88px at 22% 4%,color-mix(in oklab,var(--teal) 9%,transparent),transparent 78%),
    radial-gradient(360px 88px at 82% 6%,color-mix(in oklab,var(--lavender) 8%,transparent),transparent 78%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 72%,transparent),color-mix(in oklab,var(--bg2-base) 58%,transparent))!important;
}
.ft-list-screen .ft-catrow-sticky::after{
  display:none!important;
}
@media(max-width:430px){
  .ft-list-screen .ft-catrow-sticky{
    top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 8px)!important;
  }
  .ft-list-screen .ft-catrow-sticky.is-floating{
    top:calc(var(--top-h) + env(safe-area-inset-top,0px) + 7px)!important;
    width:calc(100vw - 36px)!important;
  }
}

/* ===== Preview polish pass 47: scroll-safe floating rail + calmer pull zone ===== */
html,
body{
  overscroll-behavior-x:none;
  overscroll-behavior-y:contain;
  overflow-x:clip!important;
  max-width:100vw;
}
#root{
  overflow-x:clip!important;
  overflow-y:visible!important;
  max-width:100vw;
}
.ft-app{
  overflow-x:clip!important;
  overflow-y:visible!important;
  max-width:100vw;
}
.ft-topbar{
  isolation:isolate;
}
.ft-topbar::before{
  background:
    radial-gradient(48% 115% at 18% 0%,color-mix(in oklab,var(--lavender) 5%,transparent),transparent 76%),
    radial-gradient(44% 110% at 84% 0%,color-mix(in oklab,var(--rose) 4%,transparent),transparent 78%),
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg-base) 98%,var(--bg2-base)) 0%,
      color-mix(in oklab,var(--bg-base) 96%,var(--bg2-base)) 72%,
      color-mix(in oklab,var(--bg-base) 88%,transparent) 100%)!important;
}
.ft-topbar::after{
  bottom:-72px!important;
  height:80px!important;
  opacity:.46!important;
  background:
    linear-gradient(180deg,
      color-mix(in oklab,var(--bg-base) 54%,transparent) 0%,
      color-mix(in oklab,var(--bg-base) 22%,transparent) 52%,
      transparent 100%)!important;
  backdrop-filter:blur(9px) saturate(1.04)!important;
  -webkit-backdrop-filter:blur(9px) saturate(1.04)!important;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.26) 56%,transparent 100%)!important;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.26) 56%,transparent 100%)!important;
}
.ft-list-screen .ft-catrow-slot{
  min-height:90px!important;
}
.ft-list-screen .ft-catrow-sticky{
  overflow:hidden!important;
  contain:layout style paint!important;
  border-color:color-mix(in oklab,var(--text) 8%,var(--border))!important;
  box-shadow:
    0 14px 28px color-mix(in oklab,var(--text) 7%,transparent),
    0 18px 36px color-mix(in oklab,var(--rose) 5%,transparent)!important;
}
.ft-list-screen .ft-catrow-sticky::before{
  background:
    radial-gradient(360px 82px at 20% 2%,color-mix(in oklab,var(--teal) 8%,transparent),transparent 80%),
    radial-gradient(360px 82px at 84% 4%,color-mix(in oklab,var(--lavender) 7%,transparent),transparent 80%),
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 82%,transparent),color-mix(in oklab,var(--bg-base) 72%,transparent))!important;
}
.ft-list-screen .ft-catrow-sticky.is-floating{
  box-shadow:
    0 14px 30px color-mix(in oklab,var(--text) 9%,transparent),
    0 20px 44px color-mix(in oklab,var(--rose) 7%,transparent)!important;
}
#ft-pull-indicator{
  color:var(--text2);
  background:
    linear-gradient(180deg,color-mix(in oklab,var(--bg2-base) 88%,transparent),color-mix(in oklab,var(--bg-base) 76%,transparent))!important;
  border-color:color-mix(in oklab,var(--text) 10%,transparent)!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 30%,transparent) inset,
    0 8px 22px color-mix(in oklab,var(--text) 10%,transparent)!important;
}

/* ===== Preview polish pass 48: compact list category rail ===== */
.ft-list-screen .ft-catrow-slot{
  min-height:72px!important;
  margin-bottom:12px!important;
}
.ft-list-screen .ft-catrow-sticky{
  border-radius:24px!important;
  padding:5px 0 6px!important;
}
.ft-list-screen .ft-catrow{
  gap:8px!important;
  padding:6px 14px 7px!important;
}
.ft-list-screen .ft-catchip{
  min-height:34px!important;
  padding:6px 13px!important;
  border-radius:999px!important;
  font-size:13px!important;
  line-height:1.05!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 24%,transparent) inset,
    0 7px 16px color-mix(in oklab,var(--text) 5%,transparent)!important;
}
.ft-list-screen .ft-catchip span{
  margin-right:4px!important;
}
.ft-list-screen .ft-catchip.a{
  box-shadow:
    0 8px 18px color-mix(in oklab,var(--rose) 11%,transparent),
    inset 0 1px 0 color-mix(in oklab,#fff 32%,transparent),
    var(--ring)!important;
}
@media(max-width:430px){
  .ft-list-screen .ft-catrow-slot{
    min-height:68px!important;
  }
  .ft-list-screen .ft-catrow{
    padding-inline:12px!important;
    gap:7px!important;
  }
  .ft-list-screen .ft-catchip{
    min-height:32px!important;
    padding:5px 11px!important;
    font-size:12.5px!important;
  }
}

/* ===== Preview polish pass 50: richer app bloom + animated title restored ===== */
html[data-palette]{
  --app-bloom-opacity:1;
  --app-bloom-soft-opacity:.72;
}
html[data-theme="light"][data-palette]{
  --app-bloom-opacity:.98;
  --app-bloom-soft-opacity:.62;
}
html[data-palette="sunset"]{
  --rose:#F45F9E;
  --lavender:#9A66F2;
  --apricot:#F19A5D;
  --teal:#C05FC9;
  --ft-splash:
    radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,#F45F9E 36%,transparent) 0%,transparent 66%),
    radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,#9A66F2 34%,transparent) 0%,transparent 68%),
    radial-gradient(64% 46% at 8% 96%,color-mix(in oklab,#F19A5D 22%,transparent) 0%,transparent 72%),
    radial-gradient(66% 48% at 98% 94%,color-mix(in oklab,#C05FC9 30%,transparent) 0%,transparent 72%),
    radial-gradient(92% 70% at 50% 48%,color-mix(in oklab,#F45F9E 12%,transparent) 0%,transparent 78%);
}
html[data-theme="light"][data-palette="sunset"]{
  --rose:#D64C8A;
  --lavender:#7652D4;
  --apricot:#D97842;
  --teal:#9E4FB0;
}
html[data-theme="dark"][data-palette="sunset"]{
  --bg-base:#1a0e18;
  --bg2-base:#281425;
  --rose:#FF70AD;
  --lavender:#B78AFF;
  --apricot:#FFA36B;
  --teal:#D071DC;
}
.ft-app::before{
  background:
    radial-gradient(74vw 52vh at 8% 6%,color-mix(in oklab,var(--rose) 50%,transparent),transparent 68%),
    radial-gradient(76vw 54vh at 94% 10%,color-mix(in oklab,var(--lavender) 50%,transparent),transparent 70%),
    radial-gradient(78vw 58vh at 6% 96%,color-mix(in oklab,var(--apricot) 38%,transparent),transparent 74%),
    radial-gradient(78vw 58vh at 96% 94%,color-mix(in oklab,var(--teal) 46%,transparent),transparent 74%),
    radial-gradient(98vw 72vh at 48% 36%,color-mix(in oklab,var(--rose) 20%,transparent),transparent 78%),
    radial-gradient(100vw 74vh at 54% 74%,color-mix(in oklab,var(--lavender) 20%,transparent),transparent 78%)!important;
  opacity:var(--app-bloom-opacity)!important;
  filter:blur(18px) saturate(1.55)!important;
}
.ft-app::after{
  background:
    radial-gradient(520px 340px at 50% 20%,color-mix(in oklab,var(--rose) 30%,transparent),transparent 72%),
    radial-gradient(520px 360px at 42% 62%,color-mix(in oklab,var(--lavender) 28%,transparent),transparent 74%),
    radial-gradient(480px 340px at 82% 50%,color-mix(in oklab,var(--teal) 24%,transparent),transparent 76%)!important;
  opacity:var(--app-bloom-soft-opacity)!important;
  filter:blur(12px) saturate(1.32)!important;
}
.ft-top-title{
  color:transparent!important;
  background:linear-gradient(110deg,var(--apricot),var(--rose),var(--lavender),var(--teal),var(--rose),var(--apricot))!important;
  background-size:340% 340%!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  animation:ft-title-shimmer 12s ease-in-out infinite!important;
}
.ft-top-title::after{
  background:linear-gradient(90deg,var(--rose),var(--lavender),var(--teal),var(--apricot))!important;
  background-size:260% 260%!important;
  animation:ft-title-shimmer 10s ease-in-out infinite!important;
  box-shadow:0 0 16px color-mix(in oklab,var(--rose) 34%,transparent)!important;
}
.ft-hero,
.ft-play-board,
.ft-card,
.ft-mitem,
.ft-mem,
.ft-stat,
.ft-qa button{
  border-color:color-mix(in oklab,var(--rose) 18%,var(--border2))!important;
  box-shadow:
    0 1px 0 color-mix(in oklab,#fff 28%,transparent) inset,
    0 12px 30px color-mix(in oklab,var(--rose) 10%,transparent),
    var(--ring)!important;
}

/* ===== Preview polish pass 52: final palette family anchors ===== */
html[data-palette="peony"]{--rose:#F0449D;--lavender:#C852D8;--apricot:#E97962;--teal:#25A68D}
html[data-theme="light"][data-palette="peony"]{--rose:#D83B8E;--lavender:#A747BD;--apricot:#C96D56;--teal:#168E76}
html[data-theme="dark"][data-palette="peony"]{--rose:#FF63B3;--lavender:#DA82FF;--apricot:#F18A78;--teal:#51D0B8}
html[data-palette="blush"]{--rose:#E45D88;--lavender:#9A62C8;--apricot:#E5A2B8;--teal:#805FC2}
html[data-theme="light"][data-palette="blush"]{--rose:#C74E78;--lavender:#8150B0;--apricot:#CA879F;--teal:#6D4EA8}
html[data-theme="dark"][data-palette="blush"]{--rose:#F0739B;--lavender:#B985F0;--apricot:#F5CAD7;--teal:#A980DE}
html[data-palette="lilac"]{--rose:#8B78EA;--lavender:#B690F5;--apricot:#C985DF;--teal:#4E9AD8}
html[data-theme="light"][data-palette="lilac"]{--rose:#786BD6;--lavender:#9C7EDF;--apricot:#B06DC8;--teal:#367FBE}
html[data-theme="dark"][data-palette="lilac"]{--rose:#9C92FF;--lavender:#CDB8FF;--apricot:#DCA6F6;--teal:#68B5F0}
html[data-palette="sunset"]{--rose:#E05291;--lavender:#8059DE;--apricot:#EF7D3E;--teal:#B456C2}
html[data-theme="light"][data-palette="sunset"]{--rose:#C94A82;--lavender:#6D4CC4;--apricot:#D66D35;--teal:#9649AA}
html[data-theme="dark"][data-palette="sunset"]{--bg-base:#1a0e18;--bg2-base:#281425;--rose:#FF70AD;--lavender:#B78AFF;--apricot:#FF9658;--teal:#D071DC}
html[data-palette="peony"]{--ft-splash:radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,var(--rose) 34%,transparent) 0%,transparent 66%),radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,var(--lavender) 30%,transparent) 0%,transparent 68%),radial-gradient(62% 46% at 8% 94%,color-mix(in oklab,var(--apricot) 18%,transparent) 0%,transparent 72%),radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,var(--teal) 36%,transparent) 0%,transparent 72%)}
html[data-palette="blush"]{--ft-splash:radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,var(--rose) 30%,transparent) 0%,transparent 66%),radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,var(--lavender) 36%,transparent) 0%,transparent 68%),radial-gradient(62% 46% at 8% 94%,color-mix(in oklab,var(--apricot) 20%,transparent) 0%,transparent 72%),radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,var(--teal) 26%,transparent) 0%,transparent 72%)}
html[data-palette="lilac"]{--ft-splash:radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,var(--rose) 30%,transparent) 0%,transparent 66%),radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,var(--lavender) 30%,transparent) 0%,transparent 68%),radial-gradient(62% 46% at 8% 94%,color-mix(in oklab,var(--apricot) 16%,transparent) 0%,transparent 72%),radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,var(--teal) 38%,transparent) 0%,transparent 72%)}
html[data-palette="sunset"]{--ft-splash:radial-gradient(78% 54% at 10% 2%,color-mix(in oklab,var(--rose) 30%,transparent) 0%,transparent 66%),radial-gradient(72% 52% at 94% 8%,color-mix(in oklab,var(--lavender) 28%,transparent) 0%,transparent 68%),radial-gradient(68% 50% at 8% 96%,color-mix(in oklab,var(--apricot) 38%,transparent) 0%,transparent 72%),radial-gradient(70% 50% at 96% 92%,color-mix(in oklab,var(--teal) 26%,transparent) 0%,transparent 72%)}

/* ===== Preview polish pass 53: distinct theme color geography ===== */
html[data-palette="peony"]{--rose:#EF4299;--lavender:#B94DD0;--apricot:#D97862;--teal:#0FAE85;--ft-splash:radial-gradient(82% 56% at 8% 0%,color-mix(in oklab,var(--rose) 33%,transparent) 0%,transparent 63%),radial-gradient(70% 50% at 93% 7%,color-mix(in oklab,var(--lavender) 24%,transparent) 0%,transparent 66%),radial-gradient(58% 44% at 10% 96%,color-mix(in oklab,var(--apricot) 15%,transparent) 0%,transparent 70%),radial-gradient(82% 58% at 96% 92%,color-mix(in oklab,var(--teal) 50%,transparent) 0%,transparent 72%),radial-gradient(56% 44% at 50% 54%,color-mix(in oklab,var(--teal) 18%,transparent) 0%,transparent 72%)}
html[data-theme="light"][data-palette="peony"]{--rose:#CF347F;--lavender:#9140AE;--apricot:#C76D5C;--teal:#078D70;--bg:color-mix(in oklab,var(--teal) 14%,color-mix(in oklab,var(--rose) 6%,var(--bg-base)));--bg2:color-mix(in oklab,var(--teal) 10%,var(--bg2-base))}
html[data-theme="dark"][data-palette="peony"]{--rose:#FF64B2;--lavender:#DA82FF;--apricot:#F18A78;--teal:#48DDBA;--bg-base:#0c1716;--bg2-base:#141121}

html[data-palette="blush"]{--rose:#E45B89;--lavender:#7D4DB8;--apricot:#E6A5B8;--teal:#9B68DA;--ft-splash:radial-gradient(78% 54% at 8% 2%,color-mix(in oklab,var(--rose) 30%,transparent) 0%,transparent 64%),radial-gradient(78% 56% at 94% 5%,color-mix(in oklab,var(--lavender) 44%,transparent) 0%,transparent 68%),radial-gradient(64% 48% at 6% 96%,color-mix(in oklab,var(--apricot) 24%,transparent) 0%,transparent 72%),radial-gradient(70% 52% at 98% 93%,color-mix(in oklab,var(--teal) 34%,transparent) 0%,transparent 72%),radial-gradient(58% 46% at 50% 50%,color-mix(in oklab,var(--lavender) 18%,transparent) 0%,transparent 74%)}
html[data-theme="light"][data-palette="blush"]{--rose:#C74A76;--lavender:#6F42A7;--apricot:#C9869D;--teal:#8354C8;--bg:color-mix(in oklab,var(--lavender) 11%,color-mix(in oklab,var(--rose) 7%,var(--bg-base)));--bg2:color-mix(in oklab,var(--teal) 8%,var(--bg2-base))}
html[data-theme="dark"][data-palette="blush"]{--rose:#F0739B;--lavender:#B985F0;--apricot:#F5CAD7;--teal:#A980DE;--bg-base:#171021;--bg2-base:#21142c}

html[data-palette="lilac"]{--rose:#7D70E6;--lavender:#AE8EF5;--apricot:#C482E1;--teal:#2F95D8;--ft-splash:radial-gradient(78% 54% at 8% 2%,color-mix(in oklab,var(--rose) 28%,transparent) 0%,transparent 65%),radial-gradient(74% 54% at 94% 7%,color-mix(in oklab,var(--lavender) 35%,transparent) 0%,transparent 68%),radial-gradient(62% 46% at 8% 95%,color-mix(in oklab,var(--apricot) 18%,transparent) 0%,transparent 72%),radial-gradient(82% 58% at 97% 92%,color-mix(in oklab,var(--teal) 50%,transparent) 0%,transparent 72%),radial-gradient(62% 48% at 48% 52%,color-mix(in oklab,var(--teal) 17%,transparent) 0%,transparent 76%)}
html[data-theme="light"][data-palette="lilac"]{--rose:#6D61D6;--lavender:#9677DE;--apricot:#AA6CC6;--teal:#267FBE;--bg:color-mix(in oklab,var(--teal) 13%,color-mix(in oklab,var(--lavender) 7%,var(--bg-base)));--bg2:color-mix(in oklab,var(--teal) 9%,var(--bg2-base))}
html[data-theme="dark"][data-palette="lilac"]{--rose:#9C92FF;--lavender:#CDB8FF;--apricot:#DCA6F6;--teal:#62BDF5;--bg-base:#0b1424;--bg2-base:#13162d}

html[data-palette="sunset"]{--rose:#D64C8A;--lavender:#7652D4;--apricot:#F07A32;--teal:#A851B4;--ft-splash:radial-gradient(76% 54% at 8% 2%,color-mix(in oklab,var(--rose) 30%,transparent) 0%,transparent 64%),radial-gradient(72% 52% at 94% 6%,color-mix(in oklab,var(--lavender) 33%,transparent) 0%,transparent 68%),radial-gradient(86% 60% at 8% 96%,color-mix(in oklab,var(--apricot) 54%,transparent) 0%,transparent 72%),radial-gradient(70% 50% at 98% 92%,color-mix(in oklab,var(--teal) 30%,transparent) 0%,transparent 72%),radial-gradient(58% 44% at 50% 54%,color-mix(in oklab,var(--apricot) 16%,transparent) 0%,transparent 74%)}
html[data-theme="light"][data-palette="sunset"]{--rose:#C94A82;--lavender:#6D4CC4;--apricot:#E06E2C;--teal:#9649AA;--bg:color-mix(in oklab,var(--apricot) 15%,color-mix(in oklab,var(--rose) 7%,var(--bg-base)));--bg2:color-mix(in oklab,var(--lavender) 8%,var(--bg2-base))}
html[data-theme="dark"][data-palette="sunset"]{--bg-base:#1a0e18;--bg2-base:#2a1420;--rose:#FF70AD;--lavender:#B78AFF;--apricot:#FF9658;--teal:#D071DC}

html[data-palette="peony"] body::before{background:radial-gradient(760px 580px at 4% -6%,color-mix(in oklab,var(--rose) 24%,transparent),transparent 62%),radial-gradient(780px 620px at 110% 10%,color-mix(in oklab,var(--teal) 32%,transparent),transparent 62%),radial-gradient(760px 620px at 52% 112%,color-mix(in oklab,var(--teal) 28%,transparent),transparent 64%)!important}
html[data-palette="blush"] body::before{background:radial-gradient(760px 580px at 4% -6%,color-mix(in oklab,var(--rose) 22%,transparent),transparent 62%),radial-gradient(780px 620px at 110% 10%,color-mix(in oklab,var(--lavender) 34%,transparent),transparent 62%),radial-gradient(760px 620px at 52% 112%,color-mix(in oklab,var(--teal) 24%,transparent),transparent 64%)!important}
html[data-palette="lilac"] body::before{background:radial-gradient(760px 580px at 4% -6%,color-mix(in oklab,var(--lavender) 28%,transparent),transparent 62%),radial-gradient(780px 620px at 110% 10%,color-mix(in oklab,var(--teal) 34%,transparent),transparent 62%),radial-gradient(760px 620px at 52% 112%,color-mix(in oklab,var(--rose) 24%,transparent),transparent 64%)!important}
html[data-palette="sunset"] body::before{background:radial-gradient(760px 580px at 4% -6%,color-mix(in oklab,var(--rose) 22%,transparent),transparent 62%),radial-gradient(780px 620px at 110% 10%,color-mix(in oklab,var(--lavender) 26%,transparent),transparent 62%),radial-gradient(780px 640px at 8% 112%,color-mix(in oklab,var(--apricot) 36%,transparent),transparent 64%)!important}

html[data-palette="peony"] .ft-app::before{background:radial-gradient(74vw 52vh at 6% 4%,color-mix(in oklab,var(--rose) 42%,transparent),transparent 62%),radial-gradient(70vw 50vh at 94% 8%,color-mix(in oklab,var(--lavender) 30%,transparent),transparent 66%),radial-gradient(82vw 60vh at 94% 94%,color-mix(in oklab,var(--teal) 62%,transparent),transparent 70%),radial-gradient(66vw 48vh at 10% 92%,color-mix(in oklab,var(--apricot) 20%,transparent),transparent 72%),radial-gradient(70vw 52vh at 48% 48%,color-mix(in oklab,var(--teal) 22%,transparent),transparent 76%)!important}
html[data-palette="blush"] .ft-app::before{background:radial-gradient(74vw 52vh at 6% 4%,color-mix(in oklab,var(--rose) 42%,transparent),transparent 62%),radial-gradient(78vw 54vh at 94% 8%,color-mix(in oklab,var(--lavender) 58%,transparent),transparent 68%),radial-gradient(76vw 56vh at 96% 94%,color-mix(in oklab,var(--teal) 42%,transparent),transparent 72%),radial-gradient(70vw 52vh at 8% 94%,color-mix(in oklab,var(--apricot) 28%,transparent),transparent 72%)!important}
html[data-palette="lilac"] .ft-app::before{background:radial-gradient(74vw 52vh at 6% 4%,color-mix(in oklab,var(--rose) 38%,transparent),transparent 62%),radial-gradient(78vw 54vh at 94% 8%,color-mix(in oklab,var(--lavender) 44%,transparent),transparent 68%),radial-gradient(82vw 60vh at 96% 94%,color-mix(in oklab,var(--teal) 64%,transparent),transparent 70%),radial-gradient(72vw 52vh at 8% 94%,color-mix(in oklab,var(--apricot) 24%,transparent),transparent 72%)!important}
html[data-palette="sunset"] .ft-app::before{background:radial-gradient(74vw 52vh at 6% 4%,color-mix(in oklab,var(--rose) 42%,transparent),transparent 62%),radial-gradient(76vw 54vh at 94% 8%,color-mix(in oklab,var(--lavender) 42%,transparent),transparent 68%),radial-gradient(88vw 62vh at 8% 96%,color-mix(in oklab,var(--apricot) 68%,transparent),transparent 70%),radial-gradient(72vw 52vh at 96% 94%,color-mix(in oklab,var(--teal) 34%,transparent),transparent 72%)!important}