/* ===== TimeFace v2 "Studio" redesign — ADDITIVE re-skin layer =====
   Loads LAST. Removes nothing. Reuses all existing modules/mounts/contracts.
   Everything scoped under html.tf2 so it is 100% revertible (remove the class / this file). */

html.tf2{
  --tf2-bg:#07080C; --tf2-bg2:#0A0C12; --tf2-surf:#11141D; --tf2-surf2:#161A25; --tf2-elev:#1B2030;
  --tf2-line:rgba(255,255,255,.07); --tf2-line2:rgba(255,255,255,.12);
  --tf2-txt:#F3F5FB; --tf2-mut:#AEB6C9; --tf2-mut2:#7E869B;
  --tf2-vio:#8B7BFF; --tf2-vio2:#6E5BFF; --tf2-viosoft:rgba(123,110,255,.16);
  --tf2-champ:#E9C98B; --tf2-ok:#86ECB4; --tf2-rad:22px;
}

/* ---- floating Dock (core nav: Home · Gallery · CREATE · Projects · Profile) ---- */
.tf2-dock{position:fixed;bottom:18px;inset-inline:0;margin:0 auto;width:min(404px,calc(100vw - 24px));height:68px;
  border-radius:26px;background:rgba(14,17,25,.86);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  border:1px solid var(--tf2-line2);box-shadow:0 20px 50px rgba(0,0,0,.6);
  display:flex;align-items:center;justify-content:space-around;padding:0 10px;z-index:10000}
.tf2-dock a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--tf2-mut2);
  font:700 .62rem/1 'Heebo',sans-serif;text-decoration:none;-webkit-tap-highlight-color:transparent;cursor:pointer}
.tf2-dock a.on{color:#fff}.tf2-dock a.on svg{stroke:var(--tf2-vio)}
.tf2-dock a svg{width:21px;height:21px;stroke:currentColor;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
.tf2-dock .tf2-fab{width:56px;height:56px;border-radius:20px;margin-top:-26px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));box-shadow:0 12px 30px rgba(110,91,255,.6),inset 0 1px 0 rgba(255,255,255,.3)}
.tf2-dock .tf2-fab svg{width:26px;height:26px;stroke:#fff;stroke-width:2.4}
.tf2-dock .tf2-av{width:22px;height:22px;border-radius:50%;overflow:hidden;border:1px solid var(--tf2-line2)}
.tf2-dock .tf2-av img{width:100%;height:100%;object-fit:cover}
/* make room above dock + hide the OLD bottom nav to avoid duplication (revertible) */
html.tf2 body{padding-bottom:92px !important}
html.tf2 .tfup-bottomnav,html.tf2 .tf-bnav,html.tf2 .mobile-dock,html.tf2 #tfMobDock,html.tf2 .tfm-bar{display:none !important}
html.tf2 #hlPromo{display:none !important}

/* ---- Create Hub + generic sheet ---- */
.tf2-dim{position:fixed;inset:0;background:rgba(5,6,10,.72);backdrop-filter:blur(3px);z-index:10050}
.tf2-sheet{position:fixed;inset-inline:0;bottom:0;z-index:9700;max-width:440px;margin:0 auto;
  background:linear-gradient(180deg,var(--tf2-surf2),#0d1017);border-top:1px solid var(--tf2-line2);
  border-radius:28px 28px 0 0;padding:12px 20px 28px;box-shadow:0 -30px 80px rgba(0,0,0,.7);z-index:10060;
  animation:tf2up .26s cubic-bezier(.2,.7,.2,1) both}
@keyframes tf2up{from{transform:translateY(30px);opacity:0}}
.tf2-grip{width:40px;height:5px;border-radius:3px;background:var(--tf2-line2);margin:2px auto 14px}
.tf2-sheet h3{font:900 1.4rem/1.1 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.02em;margin-bottom:3px;color:var(--tf2-txt)}
.tf2-sheet .tf2-sub{color:var(--tf2-mut);font-size:.88rem;margin-bottom:14px}
.tf2-hub{display:flex;align-items:center;gap:14px;padding:13px;border-radius:16px;border:1px solid var(--tf2-line);
  background:var(--tf2-surf);margin-bottom:10px;cursor:pointer}
.tf2-hub .tf2-ic{width:46px;height:46px;border-radius:14px;flex:none;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--tf2-viosoft),rgba(123,110,255,.05));border:1px solid rgba(123,110,255,.25)}
.tf2-hub .tf2-ic svg{stroke:var(--tf2-vio);width:22px;height:22px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tf2-hub b{display:block;font:800 1.02rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-txt)}
.tf2-hub s{font-style:normal;text-decoration:none;color:var(--tf2-mut);font-size:.78rem}
.tf2-hub .tf2-new{font-size:.6rem;color:#0a0c12;background:var(--tf2-champ);padding:2px 7px;border-radius:999px;margin-inline-start:6px;vertical-align:middle}
.tf2-hub .tf2-go{margin-inline-start:auto;color:var(--tf2-mut2)}

/* ---- Keep Creating banner (injected after a result when a module exposes one) ---- */
.tf2-kc{margin:14px 0;padding:14px 16px;border-radius:var(--tf2-rad);
  background:linear-gradient(135deg,rgba(123,110,255,.14),rgba(123,110,255,.04));border:1px solid rgba(123,110,255,.3)}
.tf2-kc .lab{color:var(--tf2-vio);font:800 .72rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:.05em}
.tf2-kc h4{font:900 1.1rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;margin:3px 0 10px;color:var(--tf2-txt)}
.tf2-kc .row{display:flex;gap:8px;flex-wrap:wrap}
.tf2-kc .nb{flex:1;min-width:120px;padding:12px;border-radius:13px;border:1px solid var(--tf2-line);
  background:var(--tf2-surf2);color:var(--tf2-txt);font:800 .86rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-align:center;cursor:pointer}
.tf2-kc .nb.pri{background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));border:none;box-shadow:0 10px 26px rgba(110,91,255,.5)}

/* ---- premium polish on EXISTING shells (scoped, additive) ---- */
html.tf2 .cr-chip,html.tf2 #creditsSlot .credits-pill,html.tf2 .credits-pill{
  background:linear-gradient(180deg,rgba(233,201,139,.14),rgba(233,201,139,.05)) !important;
  border:1px solid rgba(233,201,139,.34) !important;color:#F1DDAF !important}

/* ===== TF2 NEW HOME — full premium screen (covers old chrome, no bleed) ===== */
#tf2home{position:fixed;inset:0;z-index:9998;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(900px 500px at 80% -8%,rgba(123,110,255,.14),transparent 60%),
   radial-gradient(700px 500px at -10% 12%,rgba(201,162,76,.055),transparent 55%),
   linear-gradient(180deg,var(--tf2-bg),var(--tf2-bg2));
  font-family:'Heebo',system-ui,sans-serif}
#tf2home .wrap{padding:54px 20px 120px;max-width:440px;margin:0 auto}
#tf2home .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
#tf2home .brand{font-weight:900;font-size:1.3rem;letter-spacing:-.02em;color:#fff}
#tf2home .brand .hg{color:var(--tf2-champ)}
#tf2home .top-r{display:flex;align-items:center;gap:9px}
#tf2home .cr{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:linear-gradient(180deg,rgba(233,201,139,.14),rgba(233,201,139,.05));border:1px solid rgba(233,201,139,.34);font-weight:800;font-size:.82rem;color:#F1DDAF}
#tf2home .cr .d{width:7px;height:7px;border-radius:2px;transform:rotate(45deg);background:var(--tf2-champ);box-shadow:0 0 10px rgba(233,201,139,.8)}
#tf2home .av{width:36px;height:36px;border-radius:50%;overflow:hidden;border:1px solid var(--tf2-line2)}#tf2home .av img{width:100%;height:100%;object-fit:cover}
#tf2home .hi{color:var(--tf2-mut);font-weight:600;font-size:.95rem}
#tf2home h1{font-size:2rem;font-weight:900;letter-spacing:-.035em;line-height:1.08;margin:4px 0 16px;
  background:linear-gradient(110deg,#fff 20%,#c9c0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
#tf2home .prompt{display:flex;align-items:center;gap:11px;padding:15px 16px;border-radius:17px;background:linear-gradient(180deg,var(--tf2-surf2),var(--tf2-surf));border:1px solid var(--tf2-line2);box-shadow:0 18px 44px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.05);cursor:pointer}
#tf2home .prompt .spark{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));box-shadow:0 8px 20px rgba(110,91,255,.5)}
#tf2home .prompt .spark svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
#tf2home .prompt .ph{flex:1;color:var(--tf2-mut2);font-weight:600;font-size:.98rem}
#tf2home .sec{display:flex;align-items:baseline;justify-content:space-between;margin:24px 2px 12px}
#tf2home .sec h3{font-size:1.04rem;font-weight:800;color:#fff}
#tf2home .sec .l{font-size:.76rem;font-weight:700;color:var(--tf2-mut2)}
#tf2home .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#tf2home .dcard{position:relative;height:144px;border-radius:var(--tf2-rad);overflow:hidden;border:1px solid var(--tf2-line);box-shadow:0 14px 32px rgba(0,0,0,.4);cursor:pointer}
#tf2home .dcard.wide{grid-column:1 / -1;height:120px}
#tf2home .dcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#tf2home .dcard .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,12,.1) 20%,rgba(7,8,12,.88))}
#tf2home .dcard .bic{position:absolute;top:12px;inset-inline-start:12px;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:rgba(10,12,18,.55);backdrop-filter:blur(8px);border:1px solid var(--tf2-line2)}
#tf2home .dcard .bic svg{width:20px;height:20px;stroke:#fff;stroke-width:1.9;fill:none;stroke-linecap:round;stroke-linejoin:round}
#tf2home .dcard .tag{position:absolute;top:13px;inset-inline-end:13px;font-size:.62rem;font-weight:800;color:#0a0c12;background:var(--tf2-champ);padding:3px 8px;border-radius:999px}
#tf2home .dcard .nm{position:absolute;bottom:12px;inset-inline-start:14px;inset-inline-end:14px}
#tf2home .dcard .nm b{display:block;font-weight:800;font-size:1.04rem;color:#fff}
#tf2home .dcard .nm s{font-style:normal;text-decoration:none;font-size:.74rem;color:var(--tf2-mut);font-weight:600}
#tf2home .kcrow{display:flex;gap:11px;overflow-x:auto;padding-bottom:4px}
#tf2home .kccard{flex:none;width:290px;display:flex;gap:12px;align-items:center;padding:11px;border-radius:17px;background:linear-gradient(135deg,rgba(123,110,255,.14),rgba(123,110,255,.04));border:1px solid rgba(123,110,255,.3);cursor:pointer}
#tf2home .kccard img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:none}
#tf2home .kccard b{display:block;font-weight:800;font-size:.92rem;color:#fff}#tf2home .kccard s{font-style:normal;text-decoration:none;font-size:.76rem;color:var(--tf2-mut);font-weight:600}
#tf2home .kccard .arr{margin-inline-start:auto;width:28px;height:28px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));display:grid;place-items:center;color:#fff;font-weight:800}
/* when the new home is active, hide the OLD page chrome underneath (kept in DOM, just not shown) */
html.tf2home-on #hero,html.tf2home-on .site-header,html.tf2home-on #hlPromo,html.tf2home-on #ttFab,html.tf2home-on .tf-dock-fab{visibility:hidden}
/* suppress legacy hint/toast bubbles while new home is active (revertible) */
html.tf2home-on .tf-gift-hint,html.tf2home-on .hl-gifttip,html.tf2home-on #hlGiftTip,html.tf2home-on .tf-toast,html.tf2home-on .gift-nudge,html.tf2home-on [class*="gifttip"],html.tf2home-on [class*="welcome"]{display:none !important}

/* ===== GLOBAL THEME RE-SKIN — override the app's own CSS variables (premium language) =====
   Pure recolor/texture. No layout vars touched. Scoped html.tf2 → fully revertible. */
html.tf2{
  --bg-0:#07080C; --bg-1:#0A0C12; --bg-elevated:#1B2030;
  --surface-solid:#11141D; --surface-solid-2:#161A25; --surface-glass:rgba(20,24,34,.72);
  --text-primary:#F3F5FB; --text-secondary:#AEB6C9; --text-tertiary:#7E869B;
  --border-soft:rgba(255,255,255,.07); --border-default:rgba(255,255,255,.12); --border-strong:rgba(255,255,255,.2);
  /* primary accent → refined violet (was gold); credits coin stays champagne */
  --accent:#8B7BFF; --accent-gold:#8B7BFF; --accent-gold-2:#6E5BFF; --accent-gold-3:#a394ff;
  --grad-gold:linear-gradient(135deg,#8B7BFF,#6E5BFF);
  --glow-gold:0 12px 30px rgba(110,91,255,.5); --glow-accent:0 12px 30px rgba(110,91,255,.5);
  --text-on-gold:#ffffff; --coin:#E9C98B;
}
html.tf2 body{background:
  radial-gradient(900px 500px at 80% -8%,rgba(123,110,255,.12),transparent 60%),
  radial-gradient(700px 500px at -10% 12%,rgba(201,162,76,.05),transparent 55%),
  linear-gradient(180deg,#07080C,#0A0C12) !important;}
/* keep the credit pill champagne even though primary is violet now */
html.tf2 .credits-pill,html.tf2 .cr-chip,html.tf2 #creditsSlot [class*="credit"]{color:#F1DDAF !important}
/* guest welcome-toast is a nudge that duplicates the new home's CTA — hide it while on the new home (revertible) */
html.tf2home-on .tf-billing-toasts,html.tf2home-on .tf-billing-toast{display:none !important}

/* ===== close LEGACY chrome (duplicated by the new Dock/Profile) — revertible ===== */
html.tf2 .tf-drawer,html.tf2 .tf-drawer-scrim,
html.tf2 .tfd-nav,html.tf2 .tfd-logo,html.tf2 .tfd-up,html.tf2 .tfd-user,
html.tf2 .site-footer,html.tf2 .footer-quick,
/* Tuvia 2026-10-02: the floating 🎧 FAB overlapped content — removed. Support now lives as a
   clean icon in the home top bar (→ TFSupport.toggle), non-intrusive and 18-lang-safe. */
html.tf2 .tf-help-fab,html.tf2 #ttFab,html.tf2 .tf-dock-fab{display:none !important}
/* new home: top-bar icon buttons (support + notifications) + account avatar (reset native button styling) */
html.tf2 #tf2home .tf2-ico{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--tf2-surf);border:1px solid var(--tf2-line2);color:var(--tf2-mut);cursor:pointer;transition:.16s;padding:0}
html.tf2 #tf2home .tf2-ico svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){ html.tf2 #tf2home .tf2-ico:hover{color:#fff;border-color:var(--tf2-vio)} }
html.tf2 #tf2home .tf2-bell .dot{position:absolute;top:7px;inset-inline-end:8px;width:9px;height:9px;border-radius:50%;
  background:#ff5b6e;border:2px solid var(--tf2-bg)}
html.tf2 #tf2home .av{padding:0;cursor:pointer;background:none}
@media(hover:hover){ html.tf2 #tf2home .av:hover{border-color:var(--tf2-vio)} }

/* ===== Professional re-skin of the ORIGINAL account menu (#tfAcctMenu) — CSS only,
   keeps all original actions + 18-lang + logic; just a modern tf2-language presentation ===== */
html.tf2 #tfAcctMenu{min-width:286px !important;max-width:calc(100vw - 28px) !important;padding:8px !important;
  background:var(--tf2-bg2) !important;border:1px solid var(--tf2-line2) !important;border-radius:20px !important;
  box-shadow:0 26px 70px rgba(0,0,0,.6) !important;backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
html.tf2 #tfAcctMenu .tf-am-head{padding:12px 12px 14px !important;margin-bottom:4px;
  border-bottom:1px solid var(--tf2-line) !important;
  background:linear-gradient(180deg,var(--tf2-viosoft),transparent);border-radius:15px 15px 0 0}
html.tf2 #tfAcctMenu .tf-am-ava{width:44px !important;height:44px !important;flex:0 0 44px !important;
  border:2px solid var(--tf2-vio) !important;box-shadow:0 0 0 3px var(--tf2-viosoft)}
html.tf2 #tfAcctMenu .tf-am-em{font-size:14px !important;color:var(--tf2-txt) !important;font-weight:800 !important}
html.tf2 #tfAcctMenu .tf-am-plan{color:var(--tf2-vio) !important;font-weight:800 !important}
html.tf2 #tfAcctMenu .tf-am-label{font-size:10px !important;letter-spacing:1.6px !important;color:var(--tf2-mut2) !important;
  padding:12px 12px 6px !important;opacity:1 !important}
html.tf2 #tfAcctMenu button{padding:12px 12px !important;border-radius:13px !important;font-size:14.5px !important;
  font-weight:600 !important;color:var(--tf2-txt) !important;gap:12px !important;transition:.15s}
@media(hover:hover){ html.tf2 #tfAcctMenu button:hover{background:var(--tf2-viosoft) !important} }
html.tf2 #tfAcctMenu button:active{transform:scale(.985)}
html.tf2 #tfAcctMenu button .ic{width:34px !important;height:34px !important;flex:0 0 34px !important;
  display:grid;place-items:center;border-radius:10px;background:var(--tf2-surf2);font-size:16px !important}
html.tf2 #tfAcctMenu #tfLogout,html.tf2 #tfAcctMenu #tfLogoutAll{color:#ff8a98 !important}
html.tf2 #tfAcctMenu #tfLogout .ic,html.tf2 #tfAcctMenu #tfLogoutAll .ic{background:rgba(255,91,110,.12)}
html.tf2 #tfAcctMenu .tf-am-sep{border-top:1px solid var(--tf2-line) !important;margin:8px 6px !important}
html.tf2 #tfAcctMenu .tf-am-lang,html.tf2 #tfAcctMenu select{background:var(--tf2-surf2) !important;
  color:var(--tf2-txt) !important;border:1px solid var(--tf2-line2) !important;border-radius:10px !important;padding:6px 8px !important}
html.tf2 #tfAcctMenu .tf-act-badge{background:#ff5b6e !important;color:#fff !important}
/* legacy hero quickbar (How it works / Payment / Terms) — redundant with Profile→Legal */
html.tf2 .hero-quick,html.tf2 #heroQuick,html.tf2 .hql,html.tf2 #qbRow{display:none !important}

/* ===================================================================
   TF2 — DEEP POLISH PASS (UI/UX only · additive · revertible)
   typography · spacing · hierarchy · consistency · buttons/cards ·
   contrast · micro-interactions · mobile · RTL/LTR · states
   =================================================================== */
html.tf2{ --tf2-mut2:#8B93A8; --ease:cubic-bezier(.2,.7,.2,1); }

/* smooth baseline + crisp text rendering */
html.tf2 #tf2home *, html.tf2 .tf2-dock, html.tf2 .tf2-sheet, html.tf2 .tf2-dock *{
  transition:transform .22s var(--ease), background-color .22s var(--ease),
             border-color .22s var(--ease), box-shadow .22s var(--ease), color .18s var(--ease), opacity .2s;
}
html.tf2 #tf2home{ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; }

/* keyboard accessibility — visible focus ring */
html.tf2 #tf2home [role="button"]:focus-visible,
html.tf2 .tf2-dock a:focus-visible, html.tf2 .tf2-hub:focus-visible{
  outline:2px solid var(--tf2-vio); outline-offset:3px; border-radius:16px;
}

/* ---------- typography + hierarchy ---------- */
#tf2home .hi{ font-size:.98rem; font-weight:600; color:var(--tf2-mut); letter-spacing:-.01em; opacity:.95; }
#tf2home h1{ font-size:2.1rem; font-weight:900; letter-spacing:-.04em; line-height:1.05; margin:5px 0 18px; }
#tf2home .sec{ margin:26px 2px 13px; align-items:center; }
#tf2home .sec h3{ font-size:1.12rem; font-weight:800; letter-spacing:-.02em; position:relative; padding-inline-start:12px; }
#tf2home .sec h3::before{ content:""; position:absolute; inset-inline-start:0; top:51%; transform:translateY(-50%);
  width:4px; height:16px; border-radius:3px; background:linear-gradient(180deg,var(--tf2-vio),var(--tf2-vio2)); }
#tf2home .sec .l{ font-size:.75rem; font-weight:700; color:var(--tf2-mut2); letter-spacing:.01em; }
#tf2home .dcard .nm b{ letter-spacing:-.02em; }
#tf2home .dcard .nm s{ opacity:.92; }

/* ---------- cards: consistent depth + hover lift (desktop) ---------- */
#tf2home .dcard{ box-shadow:0 10px 28px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); will-change:transform; }
@media (hover:hover){
  #tf2home .dcard:hover{ transform:translateY(-3px); box-shadow:0 20px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(123,110,255,.3); }
  #tf2home .dcard:hover img{ transform:scale(1.05); }
}
#tf2home .dcard:active{ transform:translateY(-1px) scale(.995); }
#tf2home .dcard img{ transition:transform .5s var(--ease); }
#tf2home .dcard .bic{ box-shadow:0 4px 14px rgba(0,0,0,.4); }
#tf2home .dcard .tag{ box-shadow:0 4px 12px rgba(233,201,139,.35); letter-spacing:.03em; }

/* ---------- prompt bar: premium focus feel ---------- */
#tf2home .prompt{ cursor:text; border:1px solid var(--tf2-line2); }
@media (hover:hover){ #tf2home .prompt:hover{ border-color:rgba(123,110,255,.4); box-shadow:0 20px 50px rgba(0,0,0,.5),0 0 0 1px rgba(123,110,255,.25),inset 0 1px 0 rgba(255,255,255,.06); } }
#tf2home .prompt:active{ transform:scale(.995); }
#tf2home .prompt .spark{ transition:transform .3s var(--ease); }
@media (hover:hover){ #tf2home .prompt:hover .spark{ transform:rotate(90deg); } }

/* ---------- keep-creating cards ---------- */
@media (hover:hover){ #tf2home .kccard:hover{ transform:translateY(-2px); border-color:rgba(123,110,255,.5); box-shadow:0 16px 36px rgba(110,91,255,.22); } }
#tf2home .kccard:active{ transform:scale(.99); }
#tf2home .kccard .arr{ box-shadow:0 6px 16px rgba(110,91,255,.5); }

/* ---------- Dock: active pop + press feedback ---------- */
.tf2-dock a{ padding:6px 4px; border-radius:14px; }
.tf2-dock a:active{ transform:scale(.9); }
.tf2-dock a.on{ background:rgba(123,110,255,.1); }
.tf2-dock a.on svg{ filter:drop-shadow(0 0 8px rgba(123,110,255,.8)); }
.tf2-dock .tf2-fab{ transition:transform .22s var(--ease),box-shadow .22s var(--ease); }
@media (hover:hover){ .tf2-dock .tf2-fab:hover{ transform:translateY(-28px) scale(1.06); box-shadow:0 18px 40px rgba(110,91,255,.7); } }
.tf2-dock a:active .tf2-fab{ transform:translateY(-26px) scale(.94); }

/* ---------- Create Hub rows ---------- */
@media (hover:hover){ .tf2-hub:hover{ transform:translateX(-3px); border-color:rgba(123,110,255,.45); background:linear-gradient(135deg,rgba(123,110,255,.08),var(--tf2-surf)); } }
html[dir="ltr"] .tf2-hub:hover{ transform:translateX(3px); }
.tf2-hub:active{ transform:scale(.99); }
.tf2-hub .tf2-ic{ transition:transform .22s var(--ease); }
@media (hover:hover){ .tf2-hub:hover .tf2-ic{ transform:scale(1.08); } }
.tf2-sheet h3{ letter-spacing:-.02em; }

/* ---------- premium polish on the REAL app's themed components (buttons/chips/cards) ---------- */
@media (hover:hover){
  html.tf2 .btn:hover,html.tf2 .btn-gold:hover,html.tf2 .cta:hover,html.tf2 .gen:hover{ transform:translateY(-2px); filter:brightness(1.05); }
  html.tf2 .chip:hover,html.tf2 .st:hover{ border-color:rgba(123,110,255,.4); }
  html.tf2 .card:hover{ border-color:rgba(255,255,255,.14); }
}
html.tf2 .btn:active,html.tf2 .btn-gold:active,html.tf2 .cta:active,html.tf2 .gen:active{ transform:translateY(0) scale(.98); }
html.tf2 .btn,html.tf2 .btn-gold,html.tf2 .cta,html.tf2 .chip,html.tf2 .st,html.tf2 .card{ transition:transform .2s var(--ease),filter .2s,border-color .2s,box-shadow .2s; }

/* ---------- Loading / Empty / Error — premium, consistent (themed) ---------- */
html.tf2 .tf-loading,html.tf2 [class*="loading"],html.tf2 [class*="empty"]{ color:var(--tf2-mut); }
html.tf2 .tf-spinner,html.tf2 [class*="spinner"]{ border-top-color:var(--tf2-vio) !important; }

/* ---------- mobile + safe-area ---------- */
@supports(padding:max(0px)){ .tf2-dock{ bottom:max(18px,env(safe-area-inset-bottom)); } html.tf2 #tf2home .wrap{ padding-bottom:max(120px,calc(100px + env(safe-area-inset-bottom))); } }

/* ---------- respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html.tf2 *, html.tf2 #tf2home *{ transition:none !important; animation:none !important; }
}

/* ===== correction round #1 (Tuvia) — UI only ===== */
/* 5) shrink credits chip (less prominent) + make it tappable → billing */
#tf2home .cr.sm{ padding:4px 10px; font-size:.72rem; font-weight:800; opacity:.88; cursor:pointer; border-width:1px; }
@media (hover:hover){ #tf2home .cr.sm:hover{ opacity:1; border-color:rgba(233,201,139,.6); } }
#tf2home .cr.sm .d{ width:6px; height:6px; }
/* 3+4) clean top-center access: subscription · credits · invoices · terms */
#tf2home .tf2-util{ display:flex; gap:9px; align-items:center; justify-content:center; margin:-6px 0 16px; flex-wrap:wrap; }
#tf2home .tf2-util button{ background:none; color:var(--tf2-mut2); font:700 .78rem/1 'Heebo',sans-serif; padding:5px 7px; border-radius:9px; letter-spacing:-.01em; }
@media (hover:hover){ #tf2home .tf2-util button:hover{ color:var(--tf2-vio); background:rgba(123,110,255,.08); } }
#tf2home .tf2-util button:active{ transform:scale(.95); }
#tf2home .tf2-util .sep{ color:var(--tf2-line2); font-size:.7rem; }

/* robustness: dock icon/label never swallow the tap — the <a> always receives the click */
.tf2-dock a > *{ pointer-events:none; }
.tf2-dock a{ pointer-events:auto; cursor:pointer; -webkit-tap-highlight-color:transparent; }

/* ===== Billing dashboard (tf2-billing.js) — additive, revertible ===== */
html.tf2 #tf2bill{position:fixed;inset:0;z-index:10080;display:flex;align-items:flex-end;justify-content:center}
html.tf2 .tf2b-dim{position:absolute;inset:0;background:rgba(4,6,12,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.tf2 .tf2b-panel{position:relative;width:min(560px,100%);max-height:94vh;display:flex;flex-direction:column;
  background:var(--tf2-bg2);border:1px solid var(--tf2-line2);border-radius:26px 26px 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.6);overflow:hidden;animation:tf2bUp .26s cubic-bezier(.22,1,.36,1)}
@keyframes tf2bUp{from{transform:translateY(26px);opacity:.4}to{transform:translateY(0);opacity:1}}
html.tf2 .tf2b-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:20px 20px 12px;border-bottom:1px solid var(--tf2-line)}
html.tf2 .tf2b-head h2{margin:0;font-size:20px;font-weight:800;color:var(--tf2-txt);letter-spacing:-.01em}
html.tf2 .tf2b-head p{margin:4px 0 0;font-size:13px;color:var(--tf2-mut2);line-height:1.5}
html.tf2 .tf2b-x{flex:0 0 auto;width:38px;height:38px;border-radius:12px;border:1px solid var(--tf2-line2);
  background:var(--tf2-surf);color:var(--tf2-mut);font-size:16px;cursor:pointer;transition:.16s}
html.tf2 .tf2b-x:hover{color:#fff;border-color:var(--tf2-vio)}
html.tf2 .tf2b-scroll{overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:13px;-webkit-overflow-scrolling:touch}
html.tf2 .tf2b-card{background:var(--tf2-surf);border:1px solid var(--tf2-line);border-radius:18px;padding:15px 16px}
html.tf2 .tf2b-ct{display:flex;align-items:center;gap:9px;margin-bottom:10px}
html.tf2 .tf2b-ct h3{margin:0;font-size:15px;font-weight:700;color:var(--tf2-txt)}
html.tf2 .tf2b-ct .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;line-height:1;
  background:var(--tf2-viosoft);flex:0 0 auto}
html.tf2 .tf2b-ct .ic svg{width:17px;height:17px;stroke:var(--tf2-vio);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2b-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 0;border-bottom:1px dashed var(--tf2-line);font-size:14px}
html.tf2 .tf2b-row:last-of-type{border-bottom:0}
html.tf2 .tf2b-row .k{color:var(--tf2-mut2)}
html.tf2 .tf2b-row .v{color:var(--tf2-txt);font-weight:600;text-align:end}
html.tf2 .tf2b-bal{font-size:22px;color:var(--tf2-champ);font-weight:800}
html.tf2 .chip{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:700}
html.tf2 .chip.ok{background:rgba(134,236,180,.14);color:var(--tf2-ok)}
html.tf2 .tf2b-btn{width:100%;margin-top:11px;padding:12px;border-radius:13px;border:0;font-size:14.5px;
  font-weight:700;cursor:pointer;transition:.16s;font-family:inherit}
html.tf2 .tf2b-btn.primary{background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));color:#fff}
html.tf2 .tf2b-btn.primary:hover{filter:brightness(1.08)}
html.tf2 .tf2b-btn.ghost{background:transparent;border:1px solid var(--tf2-line2);color:var(--tf2-txt)}
html.tf2 .tf2b-btn.ghost:hover{border-color:var(--tf2-vio);color:#fff}
html.tf2 .tf2b-2{display:flex;gap:9px}
html.tf2 .tf2b-2 .tf2b-btn{margin-top:11px}
html.tf2 .tf2b-list{display:flex;flex-direction:column;gap:2px}
html.tf2 .tf2b-li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 0;border-bottom:1px solid var(--tf2-line)}
html.tf2 .tf2b-li:last-child{border-bottom:0}
html.tf2 .tf2b-li .li-main{display:flex;flex-direction:column;gap:2px;min-width:0}
html.tf2 .tf2b-li .li-main b{font-size:14px;color:var(--tf2-txt);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tf2 .tf2b-li .li-main s{font-size:12px;color:var(--tf2-mut2);text-decoration:none}
html.tf2 .tf2b-li .li-end{display:flex;align-items:center;gap:9px;flex:0 0 auto}
html.tf2 .tf2b-li .amt{font-size:14px;font-weight:700;color:var(--tf2-txt)}
html.tf2 .tf2b-dl{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:10px;
  border:1px solid var(--tf2-line2);background:var(--tf2-surf2);color:var(--tf2-mut);font-size:12px;cursor:pointer;transition:.16s;font-family:inherit}
html.tf2 .tf2b-dl:hover{color:#fff;border-color:var(--tf2-vio)}
html.tf2 .tf2b-dl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2b-empty{padding:14px 0;text-align:center;color:var(--tf2-mut2);font-size:13px}
html.tf2 .tf2b-link{display:flex;align-items:center;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--tf2-line);color:var(--tf2-txt);text-decoration:none;font-size:14px;font-weight:600}
html.tf2 .tf2b-link:last-child{border-bottom:0}
html.tf2 .tf2b-link .tf2b-go svg{width:16px;height:16px;stroke:var(--tf2-mut2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2b-link:hover{color:var(--tf2-vio)}
html.tf2 .tf2b-link:hover .go svg{stroke:var(--tf2-vio)}
html.tf2 .tf2b-note{text-align:center;font-size:12px;color:var(--tf2-mut2);padding:4px 10px 10px;line-height:1.5}
html.tf2[dir="rtl"] .tf2b-link .tf2b-go svg,html.tf2 [dir="rtl"] .tf2b-link .tf2b-go svg{transform:scaleX(-1)}

/* ---- billing: plans comparison + demo tags + credit value ---- */
html.tf2 .tf2b-demo{margin-inline-start:auto;font-size:11px;font-weight:800;letter-spacing:.02em;
  padding:2px 9px;border-radius:999px;background:rgba(233,201,139,.14);color:var(--tf2-champ);text-transform:uppercase}
html.tf2 .tf2b-demo.sm{margin:0 0 0 6px;font-size:10px;padding:1px 7px;vertical-align:middle}
html.tf2 .tf2b-mini{margin-top:10px;font-size:12px;color:var(--tf2-mut2);line-height:1.5}
html.tf2 .tf2b-tiers{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 6px;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
html.tf2 .tf2b-tier{position:relative;flex:0 0 61%;max-width:210px;scroll-snap-align:start;
  background:var(--tf2-surf2);border:1px solid var(--tf2-line2);border-radius:16px;padding:16px 14px 14px;display:flex;flex-direction:column}
html.tf2 .tf2b-tier.rec{border-color:var(--tf2-vio);box-shadow:0 0 0 1px var(--tf2-vio) inset,0 10px 30px rgba(110,91,255,.18)}
html.tf2 .tf2b-tier.cur{border-color:var(--tf2-ok)}
html.tf2 .tf2b-rec{position:absolute;top:-9px;inset-inline-start:14px;font-size:10.5px;font-weight:800;letter-spacing:.02em;
  padding:3px 10px;border-radius:999px;background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));color:#fff}
html.tf2 .tf2b-tn{font-size:16px;font-weight:800;color:var(--tf2-txt);margin-bottom:4px}
html.tf2 .tf2b-tp{font-size:22px;font-weight:800;color:var(--tf2-txt);line-height:1}
html.tf2 .tf2b-tp span{font-size:12px;font-weight:600;color:var(--tf2-mut2);margin-inline-start:2px}
html.tf2 .tf2b-tc{margin-top:6px;font-size:13px;font-weight:700;color:var(--tf2-champ)}
html.tf2 .tf2b-tg{margin-top:6px;font-size:12.5px;color:var(--tf2-mut);line-height:1.5;flex:1 1 auto}
html.tf2 .tf2b-tier .tf2b-btn{margin-top:12px}
html.tf2 .tf2b-tcur{margin-top:12px;text-align:center;font-size:13px;font-weight:700;color:var(--tf2-ok);
  padding:11px;border:1px dashed rgba(134,236,180,.4);border-radius:13px}
html.tf2 .tf2b-value{margin-top:4px;padding:11px 13px;background:var(--tf2-surf2);border:1px solid var(--tf2-line);border-radius:13px}
html.tf2 .tf2b-value .vt{display:block;font-size:12px;color:var(--tf2-mut2);font-weight:700;margin-bottom:4px}
html.tf2 .tf2b-value .vv{display:block;font-size:13.5px;color:var(--tf2-txt);font-weight:600;line-height:1.6}

/* ---- Create Hub footer: Billing + Terms quick access ---- */
html.tf2 .tf2-hubfoot{display:flex;gap:10px;margin-top:6px;padding-top:12px;border-top:1px solid var(--tf2-line)}
html.tf2 .tf2-hublink{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:14px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);
  color:var(--tf2-txt);font:700 14px/1 'Heebo',sans-serif;cursor:pointer;transition:.16s}
html.tf2 .tf2-hublink:hover{border-color:var(--tf2-vio);color:#fff}
html.tf2 .tf2-hublink .i{display:grid;place-items:center}
html.tf2 .tf2-hublink .i svg{width:17px;height:17px;stroke:var(--tf2-vio);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* ---- billing: neutral/placeholder states (no invented numbers) ---- */
html.tf2 .tf2b-lead{margin:0 0 12px;font-size:13.5px;color:var(--tf2-mut);line-height:1.55}
html.tf2 .tf2b-ph{color:var(--tf2-mut2);font-weight:600}
html.tf2 .tf2b-li.skel .li-main b,html.tf2 .tf2b-li.skel .li-main s,html.tf2 .tf2b-li.skel .amt{color:var(--tf2-mut2);opacity:.75}

/* ---- mock purchase screens (plans + checkout), Stub only ---- */
html.tf2 .tf2b-second{position:fixed;inset:0;z-index:10090;display:flex;align-items:flex-end;justify-content:center}
html.tf2 .tf2b-stub{margin:0 0 14px;padding:11px 14px;border-radius:13px;font-size:13px;line-height:1.55;
  background:rgba(233,201,139,.10);border:1px solid rgba(233,201,139,.35);color:var(--tf2-champ);font-weight:600}
html.tf2 .tf2b-cyc{display:flex;gap:6px;background:var(--tf2-surf);border:1px solid var(--tf2-line2);
  border-radius:14px;padding:4px;margin:0 auto 16px;width:max-content}
html.tf2 .tf2b-cyc button{padding:8px 20px;border-radius:10px;border:0;background:none;color:var(--tf2-mut);
  font:700 14px 'Heebo',sans-serif;cursor:pointer;transition:.16s}
html.tf2 .tf2b-cyc button.on{background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));color:#fff}
html.tf2 .tf2b-tiers.col{display:flex;flex-direction:column;gap:12px}
html.tf2 .tf2b-tier.col{flex:none;max-width:none;width:100%}
html.tf2 .tf2b-tp.ph,html.tf2 .tf2b-tc.ph{color:var(--tf2-mut2);font-weight:700}
html.tf2 .tf2b-tp.ph{font-size:17px}
html.tf2 .tf2b-tc.ph{font-size:13px;margin-top:2px}
html.tf2 .tf2b-feats{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
html.tf2 .tf2b-feats li{font-size:13.5px;color:var(--tf2-txt);font-weight:500}
html.tf2 .tf2b-consent{display:flex;gap:10px;align-items:flex-start;margin:4px 0 2px;padding:13px 15px;
  background:var(--tf2-viosoft);border:1px solid var(--tf2-line2);border-radius:13px;cursor:pointer;
  font-size:13.5px;line-height:1.6;color:var(--tf2-mut)}
html.tf2 .tf2b-consent input{margin-top:2px;width:19px;height:19px;flex:0 0 auto;accent-color:var(--tf2-vio);cursor:pointer}
html.tf2 .tf2b-consent a{color:var(--tf2-vio);text-decoration:underline;font-weight:700}
html.tf2 .tf2b-btn.primary:disabled{opacity:.5;cursor:not-allowed;filter:none}

/* ===== Profile & Settings + Help Center (tf2-profile.js) — shares the tf2b sheet shell ===== */
html.tf2 .tf2b-ct2{font-size:11px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--tf2-mut2);margin:16px 4px 8px;padding:0}
html.tf2 .tf2p-headcard{display:flex;align-items:center;gap:14px}
html.tf2 .tf2p-ava{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden;
  border:2px solid var(--tf2-vio);box-shadow:0 0 0 4px var(--tf2-viosoft)}
html.tf2 .tf2p-ava img{width:100%;height:100%;object-fit:cover}
html.tf2 .tf2p-id{display:flex;flex-direction:column;gap:2px;min-width:0}
html.tf2 .tf2p-id b{font-size:17px;font-weight:800;color:var(--tf2-txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tf2 .tf2p-id s{font-size:13px;color:var(--tf2-mut2);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tf2 .tf2p-id .tf2p-plan{font-size:12.5px;font-weight:800;color:var(--tf2-vio);margin-top:2px}
html.tf2 .tf2p-bill{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:13px}
html.tf2 .tf2p-bill .tf2p-arr svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
html.tf2[dir="rtl"] .tf2p-bill .tf2p-arr svg,html.tf2 [dir="rtl"] .tf2p-bill .tf2p-arr svg{transform:scaleX(-1)}
html.tf2 .tf2p-list{display:flex;flex-direction:column}
html.tf2 .tf2p-row{display:flex;align-items:center;gap:13px;width:100%;padding:13px 2px;border:0;background:none;
  cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;color:var(--tf2-txt);text-align:start;
  border-bottom:1px solid var(--tf2-line);transition:.14s}
html.tf2 .tf2p-row:last-child{border-bottom:0}
html.tf2 .tf2p-row.static{cursor:default}
@media(hover:hover){ html.tf2 .tf2p-row:not(.static):hover{color:#fff} html.tf2 .tf2p-row:not(.static):hover .tf2p-ic{border-color:var(--tf2-vio);color:var(--tf2-vio)} }
html.tf2 .tf2p-ic{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:11px;
  background:var(--tf2-surf2);border:1px solid var(--tf2-line2);color:var(--tf2-mut);transition:.14s;font-size:17px;line-height:1}
html.tf2 .tf2p-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2p-lab{flex:1;min-width:0}
html.tf2 .tf2p-arr{flex:0 0 auto;opacity:.6}
html.tf2 .tf2p-arr svg{width:16px;height:16px;stroke:var(--tf2-mut2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tf2[dir="rtl"] .tf2p-row .tf2p-arr svg,html.tf2 [dir="rtl"] .tf2p-row .tf2p-arr svg{transform:scaleX(-1)}
html.tf2 .tf2p-lang{margin-inline-start:auto;background:var(--tf2-surf2);color:var(--tf2-txt);
  border:1px solid var(--tf2-line2);border-radius:10px;padding:7px 10px;font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer;max-width:50%}
/* logout rows tinted */
html.tf2 .tf2p-row[data-act="logout"],html.tf2 .tf2p-row[data-act="logoutall"]{color:#ff8a98;font-weight:700}
html.tf2 .tf2p-row[data-act="logout"] .tf2p-ic,html.tf2 .tf2p-row[data-act="logoutall"] .tf2p-ic{color:#ff8a98;background:rgba(255,91,110,.12);border-color:rgba(255,91,110,.3)}

/* profile: admin entry (admin-only, distinct) */
html.tf2 .tf2p-admin{display:flex;align-items:center;gap:12px;width:100%;margin-top:11px;padding:13px 14px;
  border-radius:15px;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:800;text-align:start;
  color:var(--tf2-champ);background:linear-gradient(135deg,rgba(233,201,139,.14),rgba(123,110,255,.1));
  border:1px solid rgba(233,201,139,.4)}
html.tf2 .tf2p-admin .tf2p-ic{background:rgba(233,201,139,.14);border-color:rgba(233,201,139,.4);color:var(--tf2-champ)}
html.tf2 .tf2p-admin .tf2p-lab{flex:1}
@media(hover:hover){ html.tf2 .tf2p-admin:hover{filter:brightness(1.1)} }

/* Help Center: premium FILLED app-icon tiles (vibrant gradient + white glyph) */
html.tf2 .tf2p-ic.appico{font-size:0;width:40px;height:40px;flex:0 0 40px;border-radius:12px}
html.tf2 .tf2p-ic.appico svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* billing dashboard section icons as FILLED app-icon tiles (white glyph on gradient) */
html.tf2 .tf2b-ct .ic.appico{border:0;font-size:0}
html.tf2 .tf2b-ct .ic.appico svg{width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}

/* Create Hub close (X) — small icon, large tap target, trailing corner (RTL-left/LTR-right), safe-area aware */
html.tf2 .tf2-x{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));inset-inline-end:12px;z-index:5;
  width:40px;height:40px;display:grid;place-items:center;border-radius:12px;padding:0;
  background:var(--tf2-surf);border:1px solid var(--tf2-line2);color:var(--tf2-mut);
  cursor:pointer;-webkit-tap-highlight-color:transparent;transition:.16s}
html.tf2 .tf2-x svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){ html.tf2 .tf2-x:hover{color:#fff;border-color:var(--tf2-vio)} }
html.tf2 .tf2-x:active{transform:scale(.92)}

/* Create Hub: make the sheet always fully reachable + room for the bottom close button */
html.tf2 .tf2-sheet{max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)) !important}
/* bottom close button — mirrors the + FAB position (bottom-center), dark with an X */
html.tf2 .tf2-xbtm{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10070;
  width:56px;height:56px;border-radius:20px;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;
  background:linear-gradient(135deg,#2b3242,#191d28);border:1px solid var(--tf2-line2);box-shadow:0 14px 34px rgba(0,0,0,.6)}
html.tf2 .tf2-xbtm svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2-xbtm:active{transform:translateX(-50%) scale(.94)}
@media(hover:hover){ html.tf2 .tf2-xbtm:hover{border-color:var(--tf2-vio)} }

/* ============================================================
   BILLING DASHBOARD — premium redesign (hero + quick tiles + empty states)
   Clear hierarchy: ONE hero (plan·credits·renewal·1 CTA) → quiet quick tiles → soft sections.
   ============================================================ */
html.tf2 .tf2b-hero{position:relative;border-radius:22px;padding:22px 20px 20px;margin-bottom:16px;
  background:radial-gradient(520px 230px at 85% -24%,rgba(123,110,255,.30),transparent 60%),linear-gradient(160deg,#1a1f30,#0f131d);
  border:1px solid rgba(123,110,255,.30);box-shadow:0 26px 64px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06)}
html.tf2 .tf2b-hero .h-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
html.tf2 .tf2b-hero .h-lab{font-size:12px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--tf2-mut2)}
html.tf2 .tf2b-hero .h-plan{font-size:30px;font-weight:900;letter-spacing:-.02em;color:#fff;line-height:1.02}
html.tf2 .tf2b-hero .h-credits{display:flex;align-items:center;gap:12px;margin:17px 0 6px}
html.tf2 .tf2b-hero .h-credits .appico{width:46px;height:46px;flex:0 0 46px;border-radius:14px}
html.tf2 .tf2b-hero .h-credits .appico svg{width:23px;height:23px}
html.tf2 .tf2b-hero .h-cr{display:flex;flex-direction:column;line-height:1}
html.tf2 .tf2b-hero .h-cr-num{font-size:29px;font-weight:900;color:var(--tf2-champ);letter-spacing:-.01em}
html.tf2 .tf2b-hero .h-cr-lab{font-size:12.5px;font-weight:700;color:var(--tf2-mut);margin-top:4px}
html.tf2 .tf2b-hero .h-meta{font-size:13px;color:var(--tf2-mut2);margin:6px 0 16px}
html.tf2 .tf2b-hero .h-cta{width:100%;margin:0}
html.tf2 .tf2b-hero .h-link{display:block;width:100%;margin-top:11px;padding:8px;background:none;border:0;
  color:var(--tf2-vio);font:700 14px 'Heebo',sans-serif;cursor:pointer}
@media(hover:hover){ html.tf2 .tf2b-hero .h-link:hover{color:#fff} }
html.tf2 .tf2b-quick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
html.tf2 .tf2b-qt{display:flex;align-items:center;gap:11px;padding:14px 13px;border-radius:16px;
  background:var(--tf2-surf);border:1px solid var(--tf2-line);cursor:pointer;font-family:inherit;
  color:var(--tf2-txt);font-size:13.5px;font-weight:700;text-align:start;transition:.16s}
@media(hover:hover){ html.tf2 .tf2b-qt:hover{border-color:var(--tf2-vio);transform:translateY(-1px)} }
html.tf2 .tf2b-qt:active{transform:scale(.98)}
html.tf2 .tf2b-qt .appico{width:36px;height:36px;flex:0 0 36px;border-radius:11px}
html.tf2 .tf2b-qt .appico svg{width:18px;height:18px}
html.tf2 .tf2b-qt span{flex:1;min-width:0;line-height:1.25}
html.tf2 .tf2b-card.soft{background:rgba(255,255,255,.02)}
html.tf2 .tf2b-empty2{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:16px 10px 4px}
html.tf2 .tf2b-empty2 .es-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:14px;
  background:var(--tf2-surf2);border:1px solid var(--tf2-line2);color:var(--tf2-mut2)}
html.tf2 .tf2b-empty2 .es-ic svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2b-empty2 .es-txt{font-size:13.5px;color:var(--tf2-mut);font-weight:600}

/* ===== CHECKOUT — premium, same language as billing hero (what you buy · get · charged + consent) ===== */
html.tf2 .tf2b-cohero{border-radius:20px;padding:20px;margin-bottom:14px;
  background:radial-gradient(440px 210px at 85% -22%,rgba(123,110,255,.28),transparent 60%),linear-gradient(160deg,#1a1f30,#0f131d);
  border:1px solid rgba(123,110,255,.30);box-shadow:0 22px 54px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
html.tf2 .co-lab{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--tf2-mut2);margin-bottom:6px}
html.tf2 .co-item{font-size:24px;font-weight:900;color:#fff;letter-spacing:-.01em;line-height:1.1}
html.tf2 .co-charge{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--tf2-line)}
html.tf2 .co-ch-lab{font-size:13.5px;color:var(--tf2-mut)}
html.tf2 .co-ch-val{font-size:16px;font-weight:800;color:var(--tf2-champ)}
html.tf2 .tf2b-card.consent-card{border-color:rgba(123,110,255,.32);background:linear-gradient(180deg,var(--tf2-viosoft),transparent)}
html.tf2 .tf2b-card.consent-card .tf2b-consent{background:transparent;border:0;padding:4px 2px 2px}
html.tf2 .co-pay{width:100%;margin-top:6px}
html.tf2 .co-hint{text-align:center;margin-top:8px}

/* ========================================================================
   2026-10-03b — PREMIUM minimal Billing redesign (Tuvia): one visual language
   with TimeFace, compact hero, flat hierarchy, unified PURPLE icon tiles,
   quiet demo notices. Design-only; no functionality change. Overrides above. */
/* unified icon tile — replaces every rainbow .appico in billing/checkout */
html.tf2 .tf2tile{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
  background:var(--tf2-viosoft);border:1px solid rgba(123,110,255,.22)}
html.tf2 .tf2tile svg{width:18px;height:18px;stroke:var(--tf2-vio);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2b-ct{margin-bottom:11px}
/* COMPACT hero */
html.tf2 .tf2b-hero{padding:16px 16px 15px;margin-bottom:12px}
html.tf2 .tf2b-hero .h-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
html.tf2 .tf2b-hero .h-id{display:flex;flex-direction:column;gap:3px;min-width:0}
html.tf2 .tf2b-hero .h-lab{font-size:11px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--tf2-mut2)}
html.tf2 .tf2b-hero .h-plan{font-size:22px;font-weight:900;letter-spacing:-.01em;color:#fff;line-height:1.05}
html.tf2 .tf2b-hero .chip.ok{flex:0 0 auto;align-self:center;min-height:0;display:inline-flex;align-items:center;
  padding:4px 11px;font-size:11.5px;font-weight:800;line-height:1.4;border-radius:999px;cursor:default}
html.tf2 .tf2b-hero .h-strip{display:flex;align-items:stretch;gap:0;margin-bottom:13px;padding:11px 6px;
  background:rgba(255,255,255,.035);border:1px solid var(--tf2-line);border-radius:14px}
html.tf2 .tf2b-hero .h-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
html.tf2 .tf2b-hero .h-cell-num{font-size:21px;font-weight:900;color:var(--tf2-champ);line-height:1;letter-spacing:-.01em}
html.tf2 .tf2b-hero .h-cell-num.sm{font-size:16px;color:#fff}
html.tf2 .tf2b-hero .h-cell-lab{font-size:11.5px;font-weight:700;color:var(--tf2-mut2)}
html.tf2 .tf2b-hero .h-sep{width:1px;background:var(--tf2-line);margin:1px 2px}
html.tf2 .tf2b-hero .h-cta{width:100%;margin:0}
html.tf2 .tf2b-hero .h-link{margin-top:9px;padding:6px}
/* UPGRADE driver row */
html.tf2 .tf2b-upsell{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;font-family:inherit;
  padding:13px 14px;border-radius:16px;border:1px solid rgba(123,110,255,.3);
  background:linear-gradient(180deg,var(--tf2-viosoft),transparent);transition:.16s}
html.tf2 .tf2b-upsell .up-txt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
html.tf2 .tf2b-upsell .up-txt b{font-size:15px;font-weight:800;color:#fff}
html.tf2 .tf2b-upsell .up-txt s{font-size:12.5px;color:var(--tf2-mut);text-decoration:none}
@media(hover:hover){ html.tf2 .tf2b-upsell:hover{border-color:var(--tf2-vio)} }
html.tf2 .tf2b-upsell:active{transform:scale(.99)}
/* unified nav rows (one card) */
html.tf2 .tf2b-card.list{padding:4px 16px}
html.tf2 .tf2b-card.list .tf2b-ct{padding-top:11px}
html.tf2 .tf2b-nav{display:flex;align-items:center;gap:12px;width:100%;text-align:start;cursor:pointer;font-family:inherit;
  padding:12px 0;border:0;border-bottom:1px solid var(--tf2-line);background:none}
html.tf2 .tf2b-card.list .tf2b-nav:last-child{border-bottom:0}
html.tf2 .tf2b-nav .nv-txt{flex:1;font-size:14.5px;font-weight:600;color:var(--tf2-txt);min-width:0}
html.tf2 .tf2b-nav .nv-go svg,html.tf2 .tf2b-upsell .nv-go svg{width:17px;height:17px;stroke:var(--tf2-mut2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(hover:hover){ html.tf2 .tf2b-nav:hover .nv-txt{color:#fff} }
html.tf2[dir="rtl"] .tf2b-nav .nv-go svg,html.tf2[dir="rtl"] .tf2b-upsell .nv-go svg,html.tf2 [dir="rtl"] .tf2b-nav .nv-go svg,html.tf2 [dir="rtl"] .tf2b-upsell .nv-go svg{transform:scaleX(-1)}
/* merged activity empty lines */
html.tf2 .tf2b-emptyline{font-size:13px;color:var(--tf2-mut2);padding:8px 0;border-bottom:1px dashed var(--tf2-line)}
html.tf2 .tf2b-emptyline:last-of-type{border-bottom:0}
/* QUIET demo notice — no longer a dominant gold box */
html.tf2 .tf2b-stub{margin:0 0 12px;padding:0;background:none;border:0;font-size:12px;line-height:1.5;color:var(--tf2-mut2)}
html.tf2 .tf2b-note{padding:2px 10px 8px}
/* plan "who it's for" line */
html.tf2 .tf2b-tier .tf2b-tg{margin:2px 0 10px;font-size:12.5px;color:var(--tf2-mut);line-height:1.45}

/* ===== 2026-10-03e BILLING DASHBOARD — premium SaaS structure (Tuvia-approved) =====
   Few boxes: one Summary, then section labels + hairline rows. Purple only on the
   primary CTA + active state. Mobile-first (390px), RTL-safe via logical props. */
html.tf2 .tf2b-scroll.tf2s{padding:6px 18px 22px;gap:0}
html.tf2 .tf2s-lab{display:block;font-size:11px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--tf2-mut2);margin:0 0 8px}
html.tf2 .tf2s-sum{padding:18px 18px 14px;margin:8px 0 26px;border-radius:20px;
  background:linear-gradient(160deg,rgba(139,123,255,.10),rgba(255,255,255,.02) 55%);border:1px solid var(--tf2-line2)}
html.tf2 .tf2s-sum .s-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
html.tf2 .tf2s-sum .s-id{display:flex;flex-direction:column;min-width:0}
html.tf2 .tf2s-sum .s-id .tf2s-lab{margin-bottom:4px}
html.tf2 .tf2s-sum .s-plan{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.01em;line-height:1.1}
html.tf2 .tf2s-sum .s-pill{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;font-size:12px;font-weight:700;
  color:var(--tf2-ok);padding:4px 10px;border-radius:999px;background:rgba(134,236,180,.10);border:1px solid rgba(134,236,180,.25)}
html.tf2 .tf2s-sum .s-pill i{width:6px;height:6px;border-radius:50%;background:var(--tf2-ok)}
html.tf2 .tf2s-sum .s-cr{display:flex;align-items:baseline;gap:8px;margin:18px 0 10px}
html.tf2 .tf2s-sum .s-num{font-size:40px;font-weight:800;color:#fff;letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
html.tf2 .tf2s-sum .s-unit{font-size:14px;font-weight:600;color:var(--tf2-mut)}
html.tf2 .tf2s-sum .s-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:12px}
html.tf2 .tf2s-sum .s-bar i{display:block;height:100%;border-radius:99px;background:var(--tf2-vio)}
html.tf2 .tf2s-sum .s-bar.pending{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.05) 0 6px,rgba(255,255,255,.10) 6px 12px)}
html.tf2 .tf2s-sum .s-kv{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;padding:5px 0;color:var(--tf2-mut)}
html.tf2 .tf2s-sum .s-kv b{color:var(--tf2-txt);font-weight:600}
html.tf2 .tf2s-sum .s-note{font-size:12px;color:var(--tf2-mut2);margin-top:4px;line-height:1.5}
html.tf2 .tf2s-sum .s-cta{margin-top:16px;padding:14px;font-size:15px;border-radius:14px}
html.tf2 .tf2s-sum .s-link{display:block;width:100%;margin-top:6px;padding:10px;background:none;border:0;font:inherit;
  font-size:14px;font-weight:700;color:var(--tf2-txt);cursor:pointer;min-height:44px}
html.tf2 .tf2s-sec{margin-bottom:26px}
html.tf2 .tf2s-explain{margin:0 0 6px;font-size:13.5px;line-height:1.6;color:var(--tf2-mut)}
html.tf2 .tf2s-group{display:flex;flex-direction:column}
html.tf2 .tf2s-row{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 0;background:none;border:0;
  border-bottom:1px solid var(--tf2-line);color:var(--tf2-txt);font:inherit;text-align:start;cursor:pointer;text-decoration:none}
html.tf2 .tf2s-group > .tf2s-row:last-child{border-bottom:0}
html.tf2 .tf2s-row.static{cursor:default;min-height:44px}
html.tf2 .tf2s-row .r-ic{width:20px;height:20px;flex:0 0 20px;display:grid;place-items:center}
html.tf2 .tf2s-row .r-ic svg,html.tf2 .tf2s-up .u-ic svg,html.tf2 .tf2s-table .e-ic svg,html.tf2 .tf2p-consent svg{width:19px;height:19px;stroke:var(--tf2-mut);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2s-row .r-txt{flex:1;min-width:0;font-size:15px;font-weight:600}
html.tf2 .tf2s-row .r-val{font-size:13px;color:var(--tf2-mut2);text-align:end;max-width:48%}
html.tf2 .tf2s-row .r-val.mut{color:var(--tf2-mut2)}
html.tf2 .tf2s-row .r-go svg,html.tf2 .tf2s-up .r-go svg{width:16px;height:16px;stroke:var(--tf2-mut2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tf2 [dir="rtl"] .tf2s-row .r-go svg,html.tf2 [dir="rtl"] .tf2s-up .r-go svg{transform:scaleX(-1)}
@media(hover:hover){ html.tf2 .tf2s-row:not(.static):hover .r-txt{color:#fff} }
html.tf2 .tf2s-row:active:not(.static){opacity:.7}
html.tf2 .tf2s-up{display:flex;align-items:center;gap:14px;width:100%;margin:0 0 26px;padding:16px;border-radius:16px;cursor:pointer;
  font:inherit;text-align:start;color:var(--tf2-txt);background:rgba(139,123,255,.07);border:1px solid rgba(139,123,255,.35)}
html.tf2 .tf2s-up .u-ic{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;background:rgba(139,123,255,.16)}
html.tf2 .tf2s-up .u-ic svg{stroke:var(--tf2-vio)}
html.tf2 .tf2s-up .u-txt{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
html.tf2 .tf2s-up .u-txt b{font-size:15.5px;font-weight:800;color:#fff}
html.tf2 .tf2s-up .u-txt s{font-size:13px;color:var(--tf2-mut);text-decoration:none}
html.tf2 .tf2s-up:active{transform:scale(.99)}
html.tf2 .tf2s-table{border:1px solid var(--tf2-line);border-radius:14px;overflow:hidden}
html.tf2 .tf2s-table .t-head{display:grid;grid-template-columns:1fr 1.6fr 1fr .9fr;gap:8px;padding:10px 14px;
  font-size:11.5px;font-weight:700;color:var(--tf2-mut2);background:rgba(255,255,255,.03);border-bottom:1px solid var(--tf2-line)}
html.tf2 .tf2s-table .t-head span:nth-child(n+3){text-align:end}
html.tf2 .tf2s-table .t-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 18px 24px}
html.tf2 .tf2s-table .e-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.04);margin-bottom:4px}
html.tf2 .tf2s-table .t-empty b{font-size:14.5px;color:var(--tf2-txt);font-weight:700}
html.tf2 .tf2s-table .t-empty span{font-size:13px;color:var(--tf2-mut2);line-height:1.55;max-width:300px}
html.tf2 .tf2s-row.two .r-val{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---- Pricing / Upgrade screen ---- */
html.tf2 .tf2p-lead{margin:2px 0 16px;font-size:15px;line-height:1.55;color:var(--tf2-txt);font-weight:600}
html.tf2 .tf2p-how{margin-bottom:18px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.025);border:1px solid var(--tf2-line)}
html.tf2 .tf2p-how ol{list-style:none;margin:0;padding:0;display:flex;gap:8px}
html.tf2 .tf2p-how li{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tf2-txt);line-height:1.35}
html.tf2 .tf2p-how li b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12px;color:var(--tf2-vio);border:1px solid rgba(139,123,255,.45)}
html.tf2 .tf2p-cx{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--tf2-mut)}
html.tf2 .tf2p-tiers{display:flex;flex-direction:column;gap:12px;margin-top:4px}
html.tf2 .tf2p-tier{padding:18px;border-radius:18px;border:1px solid var(--tf2-line2);background:rgba(255,255,255,.02)}
html.tf2 .tf2p-tier .tp-head{margin-bottom:12px}
html.tf2 .tf2p-tier .tf2b-tg{margin-top:3px}
html.tf2 .tf2p-tier .tp-price{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
html.tf2 .tf2p-tier .tp-amt{font-size:18px;font-weight:800;color:var(--tf2-mut)}
html.tf2 .tf2ph-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:99px;color:var(--tf2-mut2);border:1px dashed var(--tf2-line2)}
html.tf2 .tf2p-tier .tp-cr{font-size:13px;color:var(--tf2-mut2);margin-top:4px}
html.tf2 .tf2p-tier .tf2b-feats li{position:relative;padding-inline-start:20px}
html.tf2 .tf2p-tier .tf2b-feats li::before{content:"";position:absolute;inset-inline-start:2px;top:6px;width:9px;height:5px;
  border-left:2px solid var(--tf2-ok);border-bottom:2px solid var(--tf2-ok);transform:rotate(-45deg)} /* physical: a checkmark never mirrors */
html.tf2 .tf2p-tier .tp-cta{margin-top:14px;min-height:46px}
html.tf2 .tf2p-consent{display:flex;gap:10px;align-items:flex-start;margin:18px 0 6px;font-size:12.5px;line-height:1.55;color:var(--tf2-mut)}
html.tf2 .tf2p-consent svg{flex:0 0 auto;width:16px;height:16px;margin-top:2px}
html.tf2 .tf2p-terms{color:var(--tf2-txt);text-decoration:underline;font-weight:700;cursor:pointer}
html.tf2 .tf2p-only{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:10px;min-height:52px;padding:12px 16px;
  border-radius:14px;border:1px solid var(--tf2-line2);background:none;font:inherit;color:var(--tf2-mut);cursor:pointer}
html.tf2 .tf2p-only b{color:var(--tf2-txt)}
html.tf2 [dir="rtl"] .tf2s-lab{letter-spacing:0;text-transform:none;font-size:12.5px} /* Hebrew/Arabic: no tracking (letters must connect/read naturally) */
html.tf2 .tf2p-only .r-go svg{width:16px;height:16px;stroke:var(--tf2-txt);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
html.tf2 [dir="rtl"] .tf2p-only .r-go svg{transform:scaleX(-1)}
html.tf2 .tf2p-only b{display:inline-flex;align-items:center;gap:4px}
html.tf2 [dir="rtl"] .tf2b-cohero .co-lab,html.tf2 [dir="rtl"] .tf2b-hero .h-lab{letter-spacing:0;text-transform:none}
/* 2026-10-03f — Stub placeholders + mock manage/coupon */
html.tf2 .tf2s-sum .s-pill.ph{color:var(--tf2-mut2);background:none;border:1px dashed var(--tf2-line2)}
html.tf2 .tf2s-sum .s-num.ph{color:var(--tf2-mut2)}
html.tf2 .tf2s-sum .s-cr .tf2ph-tag{align-self:center}
html.tf2 .tf2b-btn.danger{background:rgba(251,113,133,.12);border:1px solid rgba(251,113,133,.45);color:#fb7185}
html.tf2 .tf2m-confirm{margin-top:14px;padding:14px;border-radius:14px;border:1px solid rgba(251,113,133,.3);background:rgba(251,113,133,.05)}
html.tf2 .tf2m-confirm p{margin:0;font-size:14px;line-height:1.55;color:var(--tf2-txt)}
html.tf2 .tf2m-input{width:100%;box-sizing:border-box;padding:14px;border-radius:13px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);
  color:#fff;font-size:16px;text-align:center;letter-spacing:1px;font-family:inherit}
html.tf2 .tf2m-input:focus{outline:none;border-color:var(--tf2-vio)}
html.tf2 .tf2m-msg{min-height:20px;margin:10px 0 0;font-size:13px;font-weight:600;color:var(--tf2-ok);text-align:center}
html.tf2 .tf2m-msg.err{color:#fb7185}
/* QA 2026-10-03f: on short secondary sheets the header (✕) landed mid-screen, exactly under the
   app's floating accessibility button (♿, left-middle) → the ✕ was untappable in RTL. Secondary
   sheets now always start near the top, so their ✕ never sits under ♿ (♿ stays fully available). */
html.tf2 .tf2b-second .tf2b-panel{min-height:min(86vh,760px)}

/* =====================================================================================
   RESPONSIVE (2026-10-03g, Tuvia: "desktop feels like a stretched mobile") — layout only,
   no functionality change. Mobile (<768) is untouched. Breakpoints:
   • TABLET 768–1099: bottom dock kept (touch), wider content, sheets become centered dialogs.
   • DESKTOP ≥1100: matches the ORIGINAL app shell (dashboard.js reserves a 252px inline-start
     column via html[data-tfdash] body{padding-inline-start:252px}) — the dock becomes that
     sidebar; content uses the width (grids/columns); dialogs centered.
   ===================================================================================== */
.tf2-dock .tf2-clbl{display:none}

@media (min-width:768px){
  /* ---- Home: wider column, 3-up studio grid ---- */
  #tf2home .wrap{max-width:760px;padding:48px 32px 130px}
  #tf2home h1{font-size:2.5rem}
  #tf2home .grid{grid-template-columns:repeat(3,1fr);gap:14px}
  #tf2home .dcard{height:172px}
  #tf2home .dcard.wide{grid-column:auto;height:172px}
  /* ---- all sheets → centered dialogs (no full-width bottom drawers on big screens) ---- */
  html.tf2 #tf2bill,html.tf2 .tf2b-second{align-items:center;padding:24px}
  html.tf2 .tf2b-panel{width:min(640px,100%);max-height:min(88vh,920px);border-radius:24px;box-shadow:0 30px 90px rgba(0,0,0,.65)}
  html.tf2 .tf2b-second .tf2b-panel{min-height:0}
  @keyframes tf2bUp{from{transform:translateY(12px) scale(.985);opacity:.3}to{transform:none;opacity:1}}
  /* Create Hub: centered dialog, studios in 2 columns, top ✕ only */
  html.tf2 .tf2-sheet{top:50%;bottom:auto;inset-inline:0;transform:translateY(-50%);max-width:720px;width:calc(100% - 48px);
    border-radius:24px;border:1px solid var(--tf2-line2);padding:22px 24px 22px !important;max-height:88vh;
    display:grid;grid-template-columns:1fr 1fr;column-gap:12px;align-content:start;animation:none}
  html.tf2 .tf2-sheet > .tf2-grip{display:none}
  html.tf2 .tf2-sheet > h3,html.tf2 .tf2-sheet > .tf2-sub,html.tf2 .tf2-sheet > .tf2-hubfoot{grid-column:1 / -1}
  html.tf2 .tf2-sheet > h3{padding-inline-end:48px;margin-top:4px}
  html.tf2 .tf2-sheet .tf2-hub{margin-bottom:12px}
  html.tf2 .tf2-xbtm{display:none !important}
  html.tf2 .tf2-x{top:16px}
  /* Plans: tiers side-by-side */
  html.tf2 #tf2plans .tf2b-panel{width:min(1040px,100%)}
  html.tf2 .tf2p-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
  html.tf2 .tf2p-tier{display:flex;flex-direction:column}
  html.tf2 .tf2p-tier .tp-cta{margin-top:auto}
  html.tf2 .tf2p-tier .tf2b-feats{margin-bottom:16px}
  html.tf2 #tf2plans .tf2b-cyc{margin-inline:auto}
  html.tf2 .tf2p-consent,html.tf2 .tf2p-only{max-width:620px}
  /* Billing: roomier dialog */
  html.tf2 #tf2bill .tf2b-panel{width:min(720px,100%)}
  html.tf2 .tf2b-scroll.tf2s{padding:10px 28px 28px}
}

@media (min-width:1100px){
  /* ---- Sidebar navigation (replaces the floating mobile dock; sits in the original 252px shell column) ---- */
  html.tf2 .tfd{display:none !important}
  .tf2-dock{top:0;bottom:0 !important;inset-inline-start:0;inset-inline-end:auto;margin:0;width:252px;height:auto;border-radius:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:22px 14px 20px;
    border:0;border-inline-end:1px solid var(--tf2-line);background:rgba(10,12,18,.92);box-shadow:none;z-index:10000}
  .tf2-dock::before{content:"TimeFace";order:-2;display:block;font-weight:900;font-size:21px;letter-spacing:-.02em;color:#fff;padding:4px 12px 18px}
  .tf2-dock a{flex-direction:row;justify-content:flex-start;gap:12px;padding:11px 13px;border-radius:12px;font-size:14.5px;font-weight:700;min-height:44px}
  .tf2-dock a span{font-size:14.5px}
  .tf2-dock a svg{width:20px;height:20px}
  @media(hover:hover){ .tf2-dock a:hover{background:rgba(255,255,255,.05);color:#fff} }
  .tf2-dock a.on{background:var(--tf2-viosoft);color:#fff}
  /* Create = one clear primary button at the top of the sidebar */
  .tf2-dock a[data-go="create"]{order:-1;margin-bottom:12px;justify-content:center;gap:8px;color:#fff;
    background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));box-shadow:0 10px 26px rgba(110,91,255,.35)}
  .tf2-dock a[data-go="create"] .tf2-fab{position:static;width:auto;height:auto;transform:none !important;background:none;box-shadow:none;border:0;margin:0}
  .tf2-dock a[data-go="create"] .tf2-fab svg{width:18px;height:18px;stroke:#fff !important;opacity:1 !important}
  .tf2-dock a[data-go="create"],.tf2-dock a[data-go="create"] *{opacity:1 !important}
  .tf2-dock .tf2-clbl{display:inline;font-weight:800}
  .tf2-dock a[data-go="profile"]{margin-top:auto;border:1px solid var(--tf2-line);background:rgba(255,255,255,.03)}
  /* ---- Home: content area next to the sidebar, uses the width ---- */
  html.tf2 #tf2home{inset-inline-start:252px}
  #tf2home .wrap{max-width:1120px;padding:40px 48px 64px}
  #tf2home h1{font-size:2.9rem}
  #tf2home .prompt{max-width:820px;padding:18px 20px}
  #tf2home .grid{gap:18px}
  #tf2home .dcard,#tf2home .dcard.wide{height:220px}
  #tf2home .dcard .nm b{font-size:1.15rem}
  html.tf2 #tf2home .wrap{padding-bottom:64px;position:relative}
  /* the sidebar already carries the brand → the home top bar keeps only the tools; billing/terms sit in the same line */
  #tf2home .top .brand{visibility:hidden}
  #tf2home .tf2-util{position:absolute;top:46px;inset-inline-start:48px;margin:0}
  /* ---- Billing: two columns — sticky Summary + sections ---- */
  html.tf2 #tf2bill .tf2b-panel{width:min(1040px,100%)}
  html.tf2 .tf2b-scroll.tf2s{display:grid;grid-template-columns:minmax(320px,380px) 1fr;column-gap:36px;align-items:start;padding:22px 32px 32px}
  html.tf2 .tf2b-scroll.tf2s > *{grid-column:2}
  html.tf2 .tf2b-scroll.tf2s > .tf2s-sum{grid-column:1;grid-row:1 / span 12;position:sticky;top:0;margin:0}
  html.tf2 .tf2b-scroll.tf2s > .tf2b-note{grid-column:1 / -1}
  /* Checkout + small dialogs stay focused (narrow is correct for a form) */
  html.tf2 #tf2checkout .tf2b-panel,html.tf2 #tf2paym .tf2b-panel,html.tf2 #tf2coupon .tf2b-panel,html.tf2 #tf2manage .tf2b-panel,html.tf2 #tf2usage .tf2b-panel{width:min(600px,100%)}
}
/* phone LANDSCAPE (short viewport): compact dock so it doesn't cover a third of the screen */
@media (orientation:landscape) and (max-height:500px) and (max-width:1099px){
  .tf2-dock{height:52px;bottom:max(6px,env(safe-area-inset-bottom)) !important;width:min(360px,calc(100vw - 24px))}
  .tf2-dock a > span:last-child:not(.tf2-fab):not(.tf2-av){display:none}
  .tf2-dock .tf2-fab{width:46px;height:46px;transform:translateY(-14px)}
  #tf2home .wrap{padding-top:22px;padding-bottom:90px}
  #tf2home h1{font-size:1.9rem}
  html.tf2 .tf2-sheet{max-height:92vh}
}


/* ===== 04a — Images + Video creation dashboard (tf2-create.js, STUB) — Tuvia 2026-10-04 ===== */
html.tf2 #tf2create{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,var(--tf2-bg),var(--tf2-bg2));color:var(--tf2-txt)}
html.tf2c-on body{overflow:hidden}
html.tf2 .tf2c-page{height:100%;display:flex;flex-direction:column;font-family:'Heebo',system-ui,sans-serif}
html.tf2 .tf2c-page svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2c-head{display:flex;align-items:center;gap:10px;padding:calc(8px + env(safe-area-inset-top,0px)) 16px 8px;border-bottom:1px solid var(--tf2-line)}
html.tf2 .tf2c-head h2{margin:0;font:900 1.12rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.01em}
html.tf2 .tf2c-x{width:44px;height:44px;border-radius:12px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);display:grid;place-items:center;cursor:pointer}
html.tf2 [dir=rtl] .tf2c-x svg{transform:scaleX(-1)}
html.tf2 .tf2c-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
html.tf2 .tf2c-wrap{max-width:720px;margin:0 auto;padding:12px 16px calc(120px + env(safe-area-inset-bottom,0px))}
html.tf2 .tf2c-q{font:900 1.25rem/1.15 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;margin:0 2px 10px;letter-spacing:-.02em}
/* 5 actions — always all visible, one row on every phone */
html.tf2 .tf2c-acts{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
html.tf2 .tf2c-act{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 8px;min-height:72px;border-radius:14px;
  border:1px solid var(--tf2-line);background:var(--tf2-surf);color:var(--tf2-mut);cursor:pointer;font:700 .72rem/1.12 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-align:center}
html.tf2 .tf2c-act .i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--tf2-surf2)}
html.tf2 .tf2c-act .i svg{width:18px;height:18px;stroke:var(--tf2-mut)}
html.tf2 .tf2c-act.on{border-color:rgba(139,123,255,.75);background:linear-gradient(180deg,rgba(123,110,255,.22),rgba(123,110,255,.06));color:#fff;box-shadow:0 8px 22px rgba(110,91,255,.25)}
html.tf2 .tf2c-act.on .i{background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2))}
html.tf2 .tf2c-act.on .i svg{stroke:#fff}
html.tf2 .tf2c-desc{margin:10px 2px;color:var(--tf2-mut);font-size:.86rem;line-height:1.4}
html.tf2 .tf2c-card{padding:12px;border-radius:20px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);display:flex;flex-direction:column;gap:10px}
/* the previous RESULT carried forward */
html.tf2 .tf2c-base{display:flex;align-items:center;gap:10px;padding:6px;border-radius:14px;background:var(--tf2-viosoft);border:1px solid rgba(139,123,255,.4)}
html.tf2 .tf2c-base .m{flex:0 0 auto;width:46px;height:46px;border-radius:10px;overflow:hidden;background:var(--tf2-surf2)}
html.tf2 .tf2c-base .m img,html.tf2 .tf2c-base .m video{width:100%;height:100%;object-fit:cover;display:block}
html.tf2 .tf2c-base .t{flex:1;font:800 .84rem/1.3 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-base button{width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--tf2-txt);display:grid;place-items:center;cursor:pointer}
html.tf2 .tf2c-base button svg{width:16px;height:16px}
/* upload */
html.tf2 .tf2c-drop{display:flex;align-items:center;gap:12px;min-height:76px;padding:12px 14px;border-radius:16px;text-align:start;
  border:1.5px dashed rgba(139,123,255,.55);background:rgba(123,110,255,.06);color:var(--tf2-txt);cursor:pointer;font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-drop .i{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--tf2-viosoft)}
html.tf2 .tf2c-drop .i svg{stroke:var(--tf2-vio);width:24px;height:24px}
html.tf2 .tf2c-drop .tx{display:flex;flex-direction:column;gap:2px}
html.tf2 .tf2c-drop b{font:800 .98rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-drop s,html.tf2 .tf2c-add s{text-decoration:none;color:var(--tf2-mut2);font-size:.74rem}
html.tf2 .tf2c-ths{display:flex;gap:8px;overflow-x:auto;padding:2px 0 2px;scrollbar-width:none}
html.tf2 .tf2c-th{position:relative;flex:0 0 auto;width:96px;height:112px;border-radius:14px;overflow:hidden;background:var(--tf2-surf2);border:1px solid var(--tf2-line2)}
html.tf2 .tf2c-th.sel{border-color:var(--tf2-vio);box-shadow:0 0 0 2px rgba(139,123,255,.45)}
html.tf2 .tf2c-ths.sm .tf2c-th,html.tf2 .tf2c-ths.sm .tf2c-add{width:84px;height:96px}
html.tf2 .tf2c-th img,html.tf2 .tf2c-th video{width:100%;height:100%;object-fit:cover;display:block}
/* visible role label = a real button (tap → "what is this?" picker) */
html.tf2 .tf2c-tag{position:absolute;bottom:0;inset-inline:0;display:flex;align-items:center;justify-content:center;gap:2px;min-height:36px;padding:4px 6px;border:0;
  background:linear-gradient(0deg,rgba(10,12,18,.92),rgba(10,12,18,.72));color:#fff;font:800 .74rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer}
html.tf2 .tf2c-tag i svg{width:13px;height:13px;stroke:var(--tf2-vio)}
html.tf2 .tf2c-tag.ro{cursor:default}
html.tf2 .tf2c-rm,html.tf2 .tf2c-mv{position:absolute;top:4px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(10,12,18,.8);color:#fff;display:grid;place-items:center;cursor:pointer}
html.tf2 .tf2c-rm{inset-inline-end:4px} html.tf2 .tf2c-mv{inset-inline-start:4px}
html.tf2 .tf2c-rm svg,html.tf2 .tf2c-mv svg{width:14px;height:14px}
html.tf2 [dir=ltr] .tf2c-mv svg{transform:none} html.tf2 [dir=rtl] .tf2c-mv svg{transform:scaleX(-1)}
html.tf2 .tf2c-add{flex:0 0 auto;width:96px;height:112px;border-radius:14px;border:1.5px dashed var(--tf2-line2);background:transparent;color:var(--tf2-mut);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:700 .76rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer;padding:6px}
html.tf2 .tf2c-add svg{width:20px;height:20px;stroke:var(--tf2-vio)}
html.tf2 .tf2c-pick{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:10px;border-radius:14px;background:var(--tf2-bg2);border:1px solid rgba(139,123,255,.35)}
html.tf2 .tf2c-pick span{width:100%;font:800 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-txt)}
html.tf2 .tf2c-pick button{min-height:38px;padding:6px 13px;border-radius:999px;border:1px solid var(--tf2-line2);background:var(--tf2-surf2);color:var(--tf2-txt);font:700 .82rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer}
html.tf2 .tf2c-pick button.on{background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));border-color:transparent;color:#fff}
html.tf2 .tf2c-hint{margin:-2px 2px 0;color:var(--tf2-mut2);font-size:.75rem;line-height:1.4}
/* prompt */
html.tf2 .tf2c-in{width:100%;box-sizing:border-box;min-height:70px;resize:vertical;padding:12px 14px;border-radius:14px;border:1px solid var(--tf2-line2);
  background:var(--tf2-bg2);color:var(--tf2-txt);font:500 16px/1.45 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;outline:none}
html.tf2 .tf2c-in:focus{border-color:var(--tf2-vio);box-shadow:0 0 0 3px rgba(123,110,255,.18)}
html.tf2 .tf2c-ideas{display:flex;gap:6px;overflow-x:auto;margin-top:-2px;scrollbar-width:none}
html.tf2 .tf2c-idea{flex:0 0 auto;min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--tf2-line2);background:var(--tf2-surf2);color:var(--tf2-txt);font:600 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer;white-space:nowrap}
/* options: collapsed summary row, expands to clean segmented choices */
html.tf2 .tf2c-opts{border-radius:14px;border:1px solid var(--tf2-line);background:var(--tf2-bg2)}
html.tf2 .tf2c-otog{width:100%;display:flex;align-items:center;gap:8px;min-height:46px;padding:8px 12px;border:0;background:transparent;color:var(--tf2-txt);cursor:pointer;font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-otog .g svg{width:18px;height:18px;stroke:var(--tf2-vio)}
html.tf2 .tf2c-otog .l{font:800 .86rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-otog .s{margin-inline-start:auto;color:var(--tf2-mut);font:600 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;direction:ltr;unicode-bidi:isolate}
html.tf2 .tf2c-otog i svg{width:16px;height:16px;stroke:var(--tf2-mut2);transition:transform .2s}
html.tf2 .tf2c-opts.open .tf2c-otog i svg{transform:rotate(180deg)}
html.tf2 .tf2c-obody{display:flex;flex-direction:column;gap:10px;padding:2px 12px 12px}
html.tf2 .tf2c-orow{display:flex;flex-direction:column;gap:6px}
html.tf2 .tf2c-orow>span{font:700 .76rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-mut)}
html.tf2 .tf2c-orow .seg{display:flex;flex-wrap:wrap;gap:6px}
html.tf2 .tf2c-orow .seg button{flex:1 1 auto;min-height:40px;padding:6px 10px;border-radius:11px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);font:700 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer;white-space:nowrap}
html.tf2 .tf2c-orow .seg button.on{border-color:var(--tf2-vio);background:var(--tf2-viosoft);color:#fff}
/* create */
html.tf2 .tf2c-go{position:sticky;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:2;width:100%;min-height:52px;border:0;border-radius:15px;background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));color:#fff;
  font:900 1.05rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer;box-shadow:0 0 0 10px var(--tf2-surf),0 12px 28px rgba(110,91,255,.45)} /* surf ring = solid bar when it floats */
html.tf2 .tf2c-go:disabled{background:linear-gradient(135deg,#3b3470,#463d86);color:rgba(255,255,255,.6);box-shadow:0 0 0 10px var(--tf2-surf);cursor:not-allowed}
html.tf2 .tf2c-cost{margin-top:-4px;text-align:center;color:var(--tf2-mut2);font-size:.74rem}
html.tf2 .tf2c-cost b{color:var(--tf2-mut);font-weight:700}
html.tf2 .tf2c-adv{display:block;margin:12px auto 0;min-height:44px;padding:8px 14px;border:0;background:transparent;color:var(--tf2-mut2);font:600 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-decoration:underline;cursor:pointer}
/* waiting */
html.tf2 .tf2c-wait{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:60px 10px}
html.tf2 .tf2c-orb{width:84px;height:84px;border-radius:50%;background:conic-gradient(from 0deg,var(--tf2-vio),#4fd1ff,var(--tf2-vio2),var(--tf2-vio));animation:tf2cspin 1.4s linear infinite;
  -webkit-mask:radial-gradient(circle,transparent 52%,#000 54%);mask:radial-gradient(circle,transparent 52%,#000 54%)}
@keyframes tf2cspin{to{transform:rotate(360deg)}}
html.tf2 .tf2c-wait b{font:900 1.2rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-wait p{color:var(--tf2-mut);font-size:.86rem;margin:0}
html.tf2 .tf2c-bar{width:min(280px,80%);height:6px;border-radius:3px;background:var(--tf2-surf2);overflow:hidden}
html.tf2 .tf2c-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--tf2-vio2),var(--tf2-vio));animation:tf2cbar 2.5s ease-out forwards}
@keyframes tf2cbar{to{width:96%}}
/* result + next actions (directly under the media, above the dock) */
html.tf2 .tf2c-res{display:flex;flex-direction:column;gap:10px}
html.tf2 .tf2c-media{position:relative;border-radius:20px;overflow:hidden;background:var(--tf2-surf);border:1px solid var(--tf2-line2);margin:0 auto}
html.tf2 #tf2create{--tf2c-mh:50vh}
html.tf2 .tf2c-media img,html.tf2 .tf2c-media video{width:100%;height:100%;object-fit:cover;display:block}
html.tf2 .tf2c-media.kb img{animation:tf2ckb 6s ease-in-out infinite alternate}
@keyframes tf2ckb{from{transform:scale(1)}to{transform:scale(1.12) translateY(-2%)}}
html.tf2 .tf2c-badge{position:absolute;top:10px;inset-inline-start:10px;padding:5px 10px;border-radius:999px;background:rgba(10,12,18,.8);color:#fff;font:800 .72rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-note{margin:0;text-align:center;color:var(--tf2-mut2);font-size:.74rem}
html.tf2 .tf2c-pr{margin:0;text-align:center;color:var(--tf2-mut);font-size:.88rem}
html.tf2 .tf2c-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:7px}
html.tf2 .tf2c-next button{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 3px;border-radius:14px;border:1px solid var(--tf2-line2);
  background:var(--tf2-surf);color:var(--tf2-txt);font:700 .74rem/1.12 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer}
html.tf2 .tf2c-next button svg{stroke:var(--tf2-vio)}
html.tf2 [dir=rtl] .tf2c-next [data-next=cont] svg{transform:scaleX(-1)}
html.tf2 .tf2c-next button:first-child{background:linear-gradient(180deg,rgba(123,110,255,.22),rgba(123,110,255,.06));border-color:rgba(139,123,255,.6)}
html.tf2 .tf2c-new{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:14px;border:1px dashed var(--tf2-line2);background:transparent;color:var(--tf2-mut);font:700 .84rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer}
html.tf2 .tf2c-new svg{width:18px;height:18px}
.tf2c-toast{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:10200;max-width:min(92vw,420px);padding:11px 16px;border-radius:14px;
  background:#1B2030;color:#F3F5FB;border:1px solid rgba(255,255,255,.12);font:600 .86rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-align:center;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:opacity .35s}
.tf2c-toast.out{opacity:0}
@media (min-width:768px){
  html.tf2 .tf2c-act{min-height:92px;font-size:.86rem}
  html.tf2 .tf2c-act .i{width:42px;height:42px}
  html.tf2 .tf2c-wrap{padding-top:22px}
  html.tf2 #tf2create{--tf2c-mh:56vh}
}
@media (min-width:1100px){
  html.tf2 #tf2create{inset-inline-start:252px}
  html.tf2 .tf2c-wrap{padding-bottom:40px}
  html.tf2 .tf2c-go{bottom:16px}
}
@media (orientation:landscape) and (max-height:500px) and (max-width:1099px){
  html.tf2 .tf2c-wrap{padding-bottom:80px}
  html.tf2 .tf2c-go{position:relative;bottom:auto} /* short landscape: no floating bar, plain scroll */
  html.tf2 .tf2c-act{min-height:48px;flex-direction:row;justify-content:center}
  html.tf2 .tf2c-act .i{width:26px;height:26px}
  html.tf2 #tf2create{--tf2c-mh:64vh}
}

/* ===== 04b — Billing Dashboard v2 (tabs · catalog from TimeFace code · Mock-tagged demo account) — Tuvia 2026-10-04 ===== */
html.tf2 .tf2mock{display:inline-flex;align-items:center;vertical-align:middle;margin-inline-start:6px;padding:1px 7px;border-radius:99px;
  font:800 9.5px/1.5 'Heebo',sans-serif;letter-spacing:.04em;color:var(--tf2-champ);border:1px dashed rgba(233,201,139,.55);background:rgba(233,201,139,.06);white-space:nowrap}
/* tabs */
html.tf2 .tf2bt-tabs{display:flex;gap:4px;margin:10px 16px 2px;padding:4px;border-radius:14px;background:var(--tf2-surf);border:1px solid var(--tf2-line2)}
html.tf2 .tf2bt-tabs button{flex:1;min-width:0;min-height:40px;padding:6px 4px;border:0;border-radius:10px;background:none;color:var(--tf2-mut);
  font:700 13.5px/1.15 'Heebo',sans-serif;cursor:pointer;transition:.16s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tf2 .tf2bt-tabs button.on{background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));color:#fff;box-shadow:0 6px 16px rgba(110,91,255,.3)}
/* overview summary additions */
html.tf2 .tf2s-sum .s-price{display:flex;align-items:baseline;gap:5px;margin-top:6px}
html.tf2 .tf2s-sum .s-price b{font-size:17px;font-weight:800;color:var(--tf2-txt)}
html.tf2 .tf2s-sum .s-price span{font-size:13px;color:var(--tf2-mut2)}
html.tf2 .tf2s-sum .s-cr{flex-wrap:wrap;margin:16px 0 10px}
html.tf2 .tf2s-sum .s-act{display:flex;gap:9px;margin-top:14px}
html.tf2 .tf2s-sum .s-act .tf2b-btn{margin-top:0;min-height:48px;padding:12px 10px}
html.tf2 .tf2s-labrow{display:flex !important;align-items:center;justify-content:space-between;gap:10px}
html.tf2 .tf2s-more{background:none;border:0;color:var(--tf2-vio);font:700 13px 'Heebo',sans-serif;cursor:pointer;min-height:36px;padding:0 4px}
html.tf2 .tf2s-hint{font-size:12px;font-weight:600;color:var(--tf2-mut2);letter-spacing:0;text-transform:none}
/* history / invoice rows */
html.tf2 .tf2h-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:10px 0;border-bottom:1px solid var(--tf2-line)}
html.tf2 .tf2s-group > .tf2h-row:last-child{border-bottom:0}
html.tf2 .tf2h-row .h-main{display:flex;flex-direction:column;gap:3px;min-width:0}
html.tf2 .tf2h-row .h-main b{font-size:14.5px;font-weight:600;color:var(--tf2-txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.tf2 .tf2h-row .h-main s{font-size:12.5px;color:var(--tf2-mut2);text-decoration:none}
html.tf2 .tf2h-row .h-end{display:flex;align-items:center;flex:0 0 auto}
html.tf2 .tf2h-row .h-amt{font-size:14.5px;font-weight:700;color:var(--tf2-txt);font-variant-numeric:tabular-nums}
html.tf2 .tf2h-row .tf2b-dl{min-height:40px;min-width:64px;justify-content:center}
html.tf2 .tf2s-table .t-head,html.tf2 .tf2s-table .t-row{grid-template-columns:.9fr 2fr .8fr}
html.tf2 .tf2s-table .t-head span:nth-child(n+3){text-align:end}
html.tf2 .tf2s-table .t-row{display:grid;gap:8px;padding:12px 14px;font-size:13.5px;color:var(--tf2-txt);border-bottom:1px solid var(--tf2-line)}
html.tf2 .tf2s-table .t-row:last-child{border-bottom:0}
html.tf2 .tf2s-table .t-row span:first-child{color:var(--tf2-mut2)}
html.tf2 .tf2s-table .t-row .amt{text-align:end;font-weight:700;font-variant-numeric:tabular-nums}
/* plans */
html.tf2 .tf2p-tier{position:relative}
html.tf2 .tf2p-tier.cur{border-color:rgba(134,236,180,.55);background:linear-gradient(180deg,rgba(134,236,180,.05),transparent 60%)}
html.tf2 .tf2p-tier .tp-badge{position:absolute;top:-10px;inset-inline-end:16px;font:800 11px/1 'Heebo',sans-serif;padding:5px 10px;border-radius:99px;background:var(--tf2-ok);color:#06210f}
html.tf2 .tf2p-tier .tp-amt{font-size:28px;font-weight:900;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
html.tf2 .tf2p-tier .tp-per{font-size:13px;color:var(--tf2-mut2);font-weight:600}
html.tf2 .tf2p-tier .tp-price{align-items:baseline;gap:5px}
html.tf2 .tf2p-tier .tp-bill{font-size:12.5px;color:var(--tf2-mut2);margin-top:4px}
html.tf2 .tf2p-tier .tf2b-feats li b{color:var(--tf2-champ);font-weight:800}
html.tf2 .tf2p-tier .tp-cta:disabled{opacity:.55;cursor:default}
html.tf2 .tf2p-yn{text-align:center;margin:-8px 0 14px}
/* credits */
html.tf2 .tf2c2-bal{padding:16px 18px;margin:8px 0 22px;border-radius:18px;border:1px solid var(--tf2-line2);background:linear-gradient(160deg,rgba(139,123,255,.10),rgba(255,255,255,.02) 55%)}
html.tf2 .tf2c2-bal .b-num{font-size:34px;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums}
html.tf2 .tf2c2-bal .b-num small{font-size:13.5px;font-weight:600;color:var(--tf2-mut);letter-spacing:0}
html.tf2 .tf2k-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
html.tf2 .tf2k{display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 6px 12px;border-radius:16px;border:1px solid var(--tf2-line2);
  background:var(--tf2-surf);color:var(--tf2-txt);font:inherit;cursor:pointer;transition:.16s;min-width:0}
@media(hover:hover){ html.tf2 .tf2k:hover{border-color:var(--tf2-vio)} }
html.tf2 .tf2k:active{transform:scale(.98)}
html.tf2 .tf2k .k-nm{font-size:12.5px;font-weight:700;color:var(--tf2-mut)}
html.tf2 .tf2k .k-cr{font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;margin-top:4px}
html.tf2 .tf2k .k-u{font-size:11.5px;color:var(--tf2-mut2)}
html.tf2 .tf2k .k-pr{font-size:17px;font-weight:800;color:var(--tf2-champ);margin-top:8px}
html.tf2 .tf2k .k-go{margin-top:8px;width:100%;padding:8px 0;border-radius:10px;background:var(--tf2-viosoft);color:#fff;font-size:12.5px;font-weight:700}
html.tf2 .tf2s-row .r-val .tf2mock{margin-inline-start:4px}
/* checkout */
html.tf2 .co-gets{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
html.tf2 .co-gets li{display:flex;align-items:flex-start;gap:8px;font-size:14px;color:var(--tf2-txt)}
html.tf2 .co-gets svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;stroke:var(--tf2-ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .co-lines{margin-top:16px;padding-top:12px;border-top:1px solid var(--tf2-line)}
html.tf2 .co-line{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:13.5px;color:var(--tf2-mut)}
html.tf2 .co-line b{color:var(--tf2-txt);font-weight:600;text-align:end}
html.tf2 .co-line.tot{font-size:15px;color:var(--tf2-txt);font-weight:700}
html.tf2 .co-line.tot b{font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
html.tf2 .co-cur{margin-top:8px;font-size:12px;color:var(--tf2-mut2);line-height:1.5}
html.tf2 .consent-card .tf2b-consent + .tf2b-consent{margin-top:6px;padding-top:12px;border-top:1px dashed var(--tf2-line2)}
html.tf2 .tf2b-consent input{width:22px;height:22px}
html.tf2 .co-legal{color:var(--tf2-vio);text-decoration:underline;font-weight:700;cursor:pointer}
html.tf2 .co-pay{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;font-size:15.5px}
html.tf2 .co-pay svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .co-trust{text-align:center;margin-top:4px}
html.tf2 .co-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 10px 10px}
html.tf2 .co-done .cd-ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:rgba(134,236,180,.12);border:1px solid rgba(134,236,180,.4)}
html.tf2 .co-done .cd-ic svg{width:30px;height:30px;stroke:var(--tf2-ok);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .co-done b{font-size:19px;color:#fff}
html.tf2 .co-done p{margin:0 0 10px;font-size:14px;color:var(--tf2-mut);line-height:1.6;max-width:340px}
/* payment method card */
html.tf2 .tf2pm-card{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:18px;border-radius:16px;margin-bottom:4px;
  background:linear-gradient(135deg,#1d2236,#141826);border:1px solid var(--tf2-line2)}
html.tf2 .tf2pm-card .pm-brand{font:900 italic 17px/1 'Heebo',sans-serif;color:#fff;letter-spacing:.04em}
html.tf2 .tf2pm-card .pm-no{font-size:16px;color:var(--tf2-txt);font-variant-numeric:tabular-nums;direction:ltr}
html.tf2 .tf2pm-card .pm-def{margin-inline-start:auto;font-size:12px;font-weight:700;color:var(--tf2-ok)}
/* desktop: the 2-column sticky layout is for the Overview tab only */
@media (min-width:1100px){
  html.tf2 .tf2b-scroll.tf2s:not(.t-overview){display:flex;flex-direction:column}
  html.tf2 .tf2bt-tabs{margin:12px 32px 4px;max-width:560px}
}
@media (min-width:768px){ html.tf2 .tf2bt-tabs{margin-inline:28px} }

/* ===== account strip: Home + Create Hub (+) — Billing & Terms always one tap away ===== */
html.tf2 .tf2-acct{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:10px 14px;border-radius:16px;
  border:1px solid var(--tf2-line2);background:linear-gradient(160deg,rgba(139,123,255,.09),rgba(255,255,255,.02) 60%);
  color:var(--tf2-txt);font:inherit;text-align:start;cursor:pointer}
html.tf2 .tf2-acct .a-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.tf2 .tf2-acct .a-txt b{font-size:15px;font-weight:800;color:#fff}
html.tf2 .tf2-acct .a-txt s{font-size:12.5px;color:var(--tf2-mut);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tf2 .tf2-acct .a-go svg{width:16px;height:16px;stroke:var(--tf2-mut2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tf2 [dir="rtl"] .tf2-acct .a-go svg{transform:scaleX(-1)}
html.tf2 .tf2-acctwrap{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
html.tf2 .tf2-legalln{display:flex;justify-content:center;gap:6px;align-items:center;font-size:12.5px;color:var(--tf2-mut2)}
html.tf2 .tf2-legalln a{color:var(--tf2-mut);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:8px 6px;min-height:36px;display:inline-flex;align-items:center}
html.tf2 .tf2-sheet .tf2-acctwrap{margin:2px 0 14px}
@media (min-width:768px){ html.tf2 .tf2-sheet > .tf2-acctwrap{grid-column:1 / -1} }
@media (min-width:1100px){ #tf2home .tf2-acctwrap{max-width:820px} }
html.tf2 .tf2s-more{min-width:44px}
#tf2home .top .cr.sm{min-height:36px;padding-block:7px}
/* QA 2026-10-04: on phones the floating ♿ button (left-middle) covered billing amounts/labels.
   While a billing sheet is open it moves into the dimmed strip ABOVE the sheet (top-left) —
   still visible and tappable, no longer on top of content. Desktop/tablet dialogs unaffected. */
@media (max-width:767px){
  html.tf2:has(body > #tf2bill) .tfa11y-btn,html.tf2:has(body > .tf2b-second) .tfa11y-btn{top:max(4px,env(safe-area-inset-top));transform:none;height:40px;border-radius:0 12px 12px 0}
  html.tf2:has(body > #tf2bill) .tf2b-panel,html.tf2:has(body > .tf2b-second) .tf2b-panel{max-height:calc(100vh - 52px)}
  html.tf2 .tf2b-second .tf2b-panel{min-height:min(84vh,740px)}
}
html.tf2 .tf2-legalln a{min-width:44px;justify-content:center}

/* ===== 04c — Billing v3: transparent recommendation, value delta, comparison, legal footer ===== */
html.tf2 .tf2rec{border:1px solid var(--tf2-line2);background:var(--tf2-surf);border-radius:18px;padding:14px 16px;margin-bottom:16px}
html.tf2 .tf2rec.up{border-color:rgba(123,110,255,.45);background:linear-gradient(135deg,var(--tf2-viosoft),rgba(123,110,255,.04))}
html.tf2 .tf2rec .rc-h{display:flex;align-items:center;gap:10px;margin-bottom:6px}
html.tf2 .tf2rec .rc-h b{font:800 .98rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-txt)}
html.tf2 .tf2rec .rc-h .tf2tile{width:30px;height:30px}
html.tf2 .tf2rec p{color:var(--tf2-txt);font-size:.92rem;line-height:1.5;margin:0}
html.tf2 .tf2rec s{display:block;text-decoration:none;color:var(--tf2-mut2);font-size:.76rem;margin-top:6px}
html.tf2 .tf2p-tier.rec{border-color:rgba(123,110,255,.55)}
html.tf2 .tp-badge.rec{background:var(--tf2-viosoft);color:#cfc8ff;border:1px solid rgba(123,110,255,.4)}
html.tf2 .tp-delta{margin:10px 0 2px;padding:9px 11px;border-radius:12px;background:rgba(134,236,180,.08);border:1px solid rgba(134,236,180,.22);
  color:var(--tf2-ok);font-size:.82rem;font-weight:700;line-height:1.4}
html.tf2 .tf2cmp{border:1px solid var(--tf2-line);border-radius:16px;overflow:hidden;background:var(--tf2-surf)}
html.tf2 .tf2cmp .cm-r{display:grid;grid-template-columns:minmax(0,1.35fr) repeat(3,minmax(0,1fr));align-items:stretch;border-top:1px solid var(--tf2-line)}
html.tf2 .tf2cmp .cm-r:first-child{border-top:0}
html.tf2 .tf2cmp .cm-r>span{display:flex;align-items:center;justify-content:center;padding:10px 6px;text-align:center;font-size:.82rem;color:var(--tf2-txt);overflow-wrap:anywhere;min-width:0}
html.tf2 .tf2cmp .cm-r>span:first-child{justify-content:flex-start;text-align:start;padding-inline-start:12px;color:var(--tf2-mut);font-size:.78rem}
html.tf2 .tf2cmp .cm-hd>span{font:800 .86rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-txt);background:var(--tf2-surf2)}
html.tf2 .tf2cmp .cm-r>span.me{background:rgba(123,110,255,.10)}
html.tf2 .tf2cmp .cm-y{font-style:normal;color:var(--tf2-ok);font-weight:900}
html.tf2 .tf2cmp .cm-n{font-style:normal;color:var(--tf2-mut2)}
html.tf2 .tf2k{position:relative}
html.tf2 .tf2k.best{border-color:rgba(134,236,180,.4)}
html.tf2 .tf2k .k-best{display:block;margin:-4px 0 6px;padding:3px 8px;border-radius:10px;max-width:100%;
  background:#0f2a1d;border:1px solid rgba(134,236,180,.45);color:var(--tf2-ok);font-size:.66rem;font-weight:800;line-height:1.25;text-align:center}
html.tf2 .tf2lf{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:22px 0 4px;padding:12px 14px;border-radius:14px;border:1px solid var(--tf2-line);background:var(--tf2-surf)}
html.tf2 .tf2lf .lf-ic{display:inline-flex;width:18px;height:18px}
html.tf2 .tf2lf .lf-ic svg{width:18px;height:18px;stroke:var(--tf2-vio);fill:none;stroke-width:1.9}
html.tf2 .tf2lf b{font-size:.84rem;color:var(--tf2-txt);margin-inline-end:4px}
html.tf2 .tf2lf a{color:#cfc8ff;font-size:.84rem;font-weight:700;cursor:pointer;min-height:36px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:underline;text-underline-offset:3px}
html.tf2 .tf2lf i{font-style:normal;color:var(--tf2-mut2)}
@media (min-width:1100px){ html.tf2 .tf2b-scroll.tf2s:not(.t-overview) .tf2rec, html.tf2 .tf2b-scroll.tf2s:not(.t-overview) .tf2lf, html.tf2 .tf2b-scroll.tf2s:not(.t-overview) .tf2s-sec{width:100%} }

/* ===== 04d — Billing: single Mock source banner (Tuvia 2026-10-04: nothing approved yet) ===== */
html.tf2 .tf2b-mockban{display:flex;align-items:flex-start;gap:8px;margin:0 0 14px;padding:10px 12px;border-radius:13px;
  background:rgba(232,193,112,.08);border:1px dashed rgba(232,193,112,.45);font-size:12.5px;line-height:1.5;color:#e8d3a6}
html.tf2 .tf2b-mockban .tf2mock{margin-inline-start:0;flex:0 0 auto}
html.tf2 .tf2b-mockban span:last-child{flex:1;min-width:0}
html.tf2 .tf2k .tf2mock{margin:4px auto 0}
html.tf2 .tf2s-sum .s-id + .tf2mock{display:none}
html.tf2 .tf2s-sum .s-id .tf2mock{margin-inline-start:8px}
/* 04e — Stub: unapproved numbers on legacy screens get a Mock chip (tf2-mock.js markUnapproved) */
.tf2mock.tf2mock-pend{display:inline-flex;align-items:center;vertical-align:middle;margin-inline-start:6px;padding:1px 7px;border-radius:99px;
  border:1px dashed rgba(232,193,112,.6);color:#e8c170;background:rgba(232,193,112,.08);font:700 10.5px/1.5 system-ui,sans-serif;
  letter-spacing:0;white-space:nowrap;text-transform:none;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* tight spots (header credit pill, chat cost chip): compact chip so nothing is clipped */
button .tf2mock.tf2mock-pend{margin-inline-start:4px;padding:0 5px;font-size:9.5px;line-height:1.45}
/* header credit pill is already full → no extra chip; the Mock number itself is shown in Mock style (gold, dashed underline) */
#creditsSlot .tf2mock.tf2mock-pend{display:none}
#creditsSlot [data-tf2mk]{color:#e8c170!important;text-decoration:underline dashed rgba(232,193,112,.8);text-underline-offset:4px}

/* ===== 04f — Billing v4: fixed account card + 5 tabs (Plan · Credits · Songs · Clips · Invoices) — Tuvia 2026-10-04 ===== */
html.tf2 .tf2b-acct{margin:8px 16px 0;padding:10px 12px 12px;border-radius:16px;border:1px solid var(--tf2-line2);
  background:linear-gradient(160deg,rgba(139,123,255,.10),rgba(255,255,255,.02) 65%)}
html.tf2 .tf2b-acct .ac-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;font-size:13px;color:var(--tf2-mut)}
html.tf2 .tf2b-acct .ac-plan{font-size:16px;font-weight:800;color:var(--tf2-txt)}
html.tf2 .tf2b-acct .s-pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--tf2-ok);padding:2px 8px;border-radius:999px;
  background:rgba(134,236,180,.10);border:1px solid rgba(134,236,180,.25)}
html.tf2 .tf2b-acct .s-pill i{width:6px;height:6px;border-radius:50%;background:var(--tf2-ok)}
html.tf2 .tf2b-acct .ac-ren{font-size:12.5px;color:var(--tf2-mut2)}
html.tf2 .tf2b-acct .ac-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:9px}
html.tf2 .tf2b-acct .ac-chip{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;min-height:58px;padding:7px 4px;border-radius:12px;
  border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);cursor:pointer;font-family:'Heebo',sans-serif;transition:.16s}
html.tf2 .tf2b-acct .ac-chip.on{border-color:var(--tf2-vio);background:var(--tf2-viosoft)}
html.tf2 .tf2b-acct .ac-chip .ac-ic{font-size:13px;line-height:1}
html.tf2 .tf2b-acct .ac-chip b{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.25}
html.tf2 .tf2b-acct .ac-chip s{text-decoration:none;font-size:11px;color:var(--tf2-mut);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 5 tabs: fit on a phone, scroll sideways only if a language needs it (no page overflow) */
html.tf2 .tf2bt-tabs.t5{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
html.tf2 .tf2bt-tabs.t5::-webkit-scrollbar{display:none}
html.tf2 .tf2bt-tabs.t5 button{flex:1 0 auto;min-width:58px;padding:6px 8px;font-size:13px}
/* type tags: recurring vs one-time */
html.tf2 .tf2tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
html.tf2 .tf2tag{display:inline-flex;align-items:center;font-style:normal;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;
  color:var(--tf2-mut);border:1px solid var(--tf2-line2);background:rgba(255,255,255,.03);white-space:nowrap}
html.tf2 .tf2tag.one{color:#9EE7FF;border-color:rgba(103,232,249,.35);background:rgba(103,232,249,.08)}
html.tf2 .tf2tag.rec{color:#C9BFFF;border-color:rgba(139,123,255,.45);background:var(--tf2-viosoft)}
html.tf2 .tf2s-sum2 .s-top{align-items:center}
/* balance before → after */
html.tf2 .tf2ba{display:inline-block;direction:ltr;unicode-bidi:isolate;font-variant-numeric:tabular-nums;font-weight:700;color:var(--tf2-txt)}
html.tf2 .tf2k .k-after{margin-top:6px;font-size:11.5px;color:var(--tf2-mut)}
html.tf2 .tf2k .k-after .tf2ba{font-weight:700;color:var(--tf2-ok)}
/* songs: quota row + "when it runs out" options */
html.tf2 .tf2q{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 6px}
html.tf2 .tf2q div{display:flex;flex-direction:column;align-items:center;padding:8px 4px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid var(--tf2-line)}
html.tf2 .tf2q s{text-decoration:none;font-size:11.5px;color:var(--tf2-mut2)}
html.tf2 .tf2q b{font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
html.tf2 .tf2opts{display:flex;flex-direction:column;gap:8px}
html.tf2 .tf2opt{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;border:1px solid var(--tf2-line2);background:var(--tf2-surf)}
html.tf2 .tf2opt .o-n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;background:var(--tf2-viosoft);color:#fff}
html.tf2 .tf2opt .o-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.tf2 .tf2opt .o-b b{font-size:14.5px;font-weight:700;color:var(--tf2-txt)}
html.tf2 .tf2opt .o-b s{text-decoration:none;font-size:12.5px;line-height:1.45;color:var(--tf2-mut)}
html.tf2 .tf2opt .o-go{flex:0 0 auto;width:auto;min-height:36px;padding:6px 12px;margin:0;font-size:12.5px}
/* clips: rows with length + credits + price state */
html.tf2 .tf2s-row.tf2clip .r-txt{display:flex;flex-direction:column;gap:2px}
html.tf2 .tf2s-row.tf2clip .r-txt b{font-weight:700}
html.tf2 .tf2s-row.tf2clip .r-txt s{text-decoration:none;font-size:12px;font-weight:500;color:var(--tf2-mut2)}
html.tf2 .tf2s-row.tf2clip .r-val{font-size:11.5px;max-width:42%;text-align:end;line-height:1.35}
/* invoices: 4 columns incl. type */
html.tf2 .tf2s-table.t4 .t-head,html.tf2 .tf2s-table.t4 .t-row{grid-template-columns:.8fr 1.7fr 1.2fr .8fr;align-items:center}
html.tf2 .tf2s-table.t4 .t-head span:nth-child(3){text-align:start}
html.tf2 .tf2s-table.t4 .tf2tag{font-size:10.5px;padding:2px 7px;white-space:normal;line-height:1.25}
/* checkout: the 5 fixed lines */
html.tf2 .co-lab2{margin-top:12px}
html.tf2 .co-line.co-after b small{display:block;font-size:11.5px;font-weight:500;color:var(--tf2-mut2);margin-top:3px}
html.tf2 .co-line.co-rec b{color:#C9BFFF}
html.tf2 .co-line.co-one b{color:#9EE7FF}
@media (min-width:768px){ html.tf2 .tf2b-acct{margin-inline:28px} }
@media (min-width:1100px){ html.tf2 .tf2b-acct{margin:12px 32px 0;max-width:560px} }
/* 04f fix: in the flex-column panel an overflow container may shrink to 0 → keep card + tabs at natural height */
html.tf2 #tf2bill .tf2b-acct,html.tf2 #tf2bill .tf2bt-tabs.t5{flex-shrink:0}
html.tf2 .tf2bt-tabs.t5{overflow-y:hidden}
/* price not decided yet → normal size, never looks like a final amount */
html.tf2 .co-line.tot.pend b{font-size:16px;font-weight:800;color:var(--tf2-champ)}
/* 04f desktop: one centered column for card + tabs + every tab's content (the old 2-col layout was Overview-only) */
@media (min-width:1100px){
  html.tf2 #tf2bill .tf2b-acct,html.tf2 #tf2bill .tf2bt-tabs.t5{width:calc(100% - 64px);max-width:760px;margin-inline:auto}
  html.tf2 #tf2bill .tf2b-scroll.tf2s > *{width:100%;max-width:760px;margin-inline:auto;box-sizing:border-box}
}
html.tf2 .tf2s-sum.tf2s-sum2{margin-bottom:14px}

/* ===== 04f (2026-10-05) — two clear account doors: "Billing & subscription" + "Terms & legal" =====
   Home: full row under the header. + hub: compact row AFTER the studios (creation stays first).
   Titles may wrap to 2 lines (long languages) — never truncated. */
html.tf2 .tf2-acctrow{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:8px;width:100%}
html.tf2 .tf2-acctrow .tf2-acct{min-width:0;text-align:start}
html.tf2 .tf2-acctrow .tf2-acct .a-txt b{white-space:normal;line-height:1.2;overflow-wrap:anywhere}
html.tf2 .tf2-acctrow .tf2-acct-legal{gap:10px;padding-inline:12px}
html.tf2 .tf2-acctrow .tf2tile{flex:0 0 auto}
html.tf2 .tf2-acctrow .tf2tile svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
html.tf2 .tf2-acctrow .a-go{flex:0 0 auto}
html.tf2 .tf2-acctrow.hub{grid-template-columns:1fr 1fr}
html.tf2 .tf2-acctrow.hub .tf2-acct{min-height:52px;padding:8px 12px;border-radius:14px;background:transparent}
html.tf2 .tf2-acctrow.hub .tf2-acct .a-txt b{font-size:13.5px;font-weight:700;color:var(--tf2-mut,#c9cfdc)}
html.tf2 .tf2-acctrow.hub .tf2tile{width:30px;height:30px;border-radius:9px}
html.tf2 .tf2-sheet .tf2-hubacct{margin:6px 0 0;padding-top:12px;border-top:1px solid var(--tf2-line,rgba(255,255,255,.08))}
@media (min-width:768px){ html.tf2 .tf2-sheet > .tf2-hubacct{grid-column:1 / -1} }
@media (max-width:359px){ html.tf2 .tf2-acctrow:not(.hub){grid-template-columns:1fr} }
html.tf2 .tf2-acctrow .tf2-acct .a-txt s{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.3}
html.tf2 .tf2-acctrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
html.tf2 .tf2-acctrow .tf2-acct{gap:10px;padding-inline:12px}
html.tf2 .tf2-acctrow .tf2-acct .a-txt b{overflow-wrap:normal;word-break:normal;hyphens:auto;font-size:14.5px}
/* phones: Home = two full-width doors (Billing card + slimmer Terms row) — no squeezed words in any language;
   + hub keeps one compact 2-up row (arrows hidden, smaller tile → room for long labels) */
@media (max-width:599px){
  html.tf2 .tf2-acctrow:not(.hub){grid-template-columns:1fr;gap:6px}
  html.tf2 .tf2-acctrow:not(.hub) .tf2-acct-legal{min-height:46px;padding-block:6px;background:transparent}
  html.tf2 .tf2-acctrow:not(.hub) .tf2-acct-legal .tf2tile{width:28px;height:28px;flex-basis:28px;border-radius:9px}
  html.tf2 .tf2-acctrow:not(.hub) .tf2-acct-legal .a-txt b{font-size:14px;font-weight:700;color:var(--tf2-mut,#c9cfdc)}
  html.tf2 .tf2-acctrow.hub .a-go{display:none}
  html.tf2 .tf2-acctrow.hub .tf2-acct{gap:8px;padding-inline:10px}
  html.tf2 .tf2-acctrow.hub .tf2tile{width:26px;height:26px;flex-basis:26px}
  html.tf2 .tf2-acctrow.hub .tf2-acct .a-txt b{font-size:13px}
}
html.tf2 .tf2-acctrow .tf2-acct .a-txt b{hyphens:manual;-webkit-hyphens:manual}
@media (max-width:599px){
  html.tf2 .tf2-sheet .tf2-hubacct{margin-top:2px;padding-top:8px}
  html.tf2 .tf2-acctrow.hub .tf2-acct{min-height:46px;padding-block:5px}
  html.tf2 .tf2-acctrow.hub .tf2-acct .a-txt b{line-height:1.15}
}

/* ===== 04g (2026-10-05) — ADD-ONS per category: included · left · buy more (any quantity) ===== */
html.tf2 .tf2ad .tf2s-explain{margin:0 0 10px}
html.tf2 .tf2ad-list{display:flex;flex-direction:column;gap:8px}
html.tf2 .tf2ad-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--tf2-line2);background:var(--tf2-surf)}
html.tf2 .tf2ad-row .ad-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.tf2 .tf2ad-row .ad-main b{font-size:15px;font-weight:800;color:#fff}
html.tf2 .tf2ad-row .ad-main s,html.tf2 .tf2ad-sum s{text-decoration:none;font-size:12px;color:var(--tf2-mut2);line-height:1.35}
html.tf2 .tf2ad-row .ad-kv,html.tf2 .tf2ad-sum{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:13px;color:var(--tf2-mut)}
html.tf2 .tf2ad-row .ad-kv i,html.tf2 .tf2ad-sum i{font-style:normal;color:var(--tf2-mut2)}
html.tf2 .tf2ad-row .ad-buy{flex:0 0 auto;width:auto;min-height:44px;margin:0;padding:8px 16px;font-size:14px;white-space:nowrap}
html.tf2 .tf2ad-sum{padding:12px 14px;margin:0 0 16px;border-radius:14px;background:var(--tf2-surf);border:1px solid var(--tf2-line2)}
html.tf2 .tf2ad-sum s{flex-basis:100%}
html.tf2 .tf2ad-step{display:flex;align-items:stretch;gap:8px;margin:6px 0 10px}
html.tf2 .tf2ad-step .st-b{flex:0 0 52px;min-height:52px;border-radius:14px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:#fff;font-size:24px;font-weight:700;cursor:pointer}
html.tf2 .tf2ad-step .st-in{flex:1;min-width:0;min-height:52px;border-radius:14px;border:1px solid var(--tf2-line2);background:rgba(0,0,0,.25);color:#fff;font:800 22px/1 inherit;text-align:center;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
html.tf2 .tf2ad-step .st-in::-webkit-outer-spin-button,html.tf2 .tf2ad-step .st-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
html.tf2 .tf2ad-pre{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
html.tf2 .tf2ad-pre button{flex:1 1 0;min-width:56px;min-height:40px;border-radius:999px;border:1px solid var(--tf2-line2);background:transparent;color:var(--tf2-mut);font-weight:700;cursor:pointer}
html.tf2 .tf2ad-pre button.on{background:var(--tf2-viosoft);border-color:transparent;color:#fff}
html.tf2 .tf2ad-lines{margin:0 0 12px}
html.tf2 .tf2ad-lines small{font-weight:500;color:var(--tf2-mut2);font-size:11.5px}
html.tf2 #tf2addon #tf2adgo{margin-top:14px}
@media (max-width:359px){ html.tf2 .tf2ad-row{flex-wrap:wrap} html.tf2 .tf2ad-row .ad-buy{width:100%} }

/* ===== 04h (2026-10-05) — MUSIC VIDEO STUDIO, two tracks (Stub) — tf2-mv.js ===== */
html.tf2 #tf2mv{position:fixed;inset:0;z-index:9999;background:linear-gradient(180deg,var(--tf2-bg),var(--tf2-bg2));color:var(--tf2-txt)}
html.tf2 #tf2mv button{font-family:'Heebo',system-ui,sans-serif}
html.tf2 #tf2mv img{display:block}
html.tf2 .mv-wrap{display:flex;flex-direction:column;gap:12px}
html.tf2 .mv-demo{font-size:.74rem;line-height:1.4;color:var(--tf2-champ);border:1px dashed rgba(233,201,139,.45);background:rgba(233,201,139,.06);border-radius:12px;padding:8px 10px}
html.tf2 .mv-prog{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--tf2-mut)}
html.tf2 .mv-prog .bar{flex:1;height:6px;border-radius:99px;background:var(--tf2-surf2);overflow:hidden}
html.tf2 .mv-prog .bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--tf2-vio2),var(--tf2-vio));transition:width .3s}
html.tf2 .mv-tracks{display:grid;gap:12px}
html.tf2 .mv-track{position:relative;display:flex;flex-direction:column;text-align:start;padding:0;border-radius:22px;overflow:hidden;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);cursor:pointer}
html.tf2 .mv-track .mv-tim{height:132px;overflow:hidden;position:relative}
html.tf2 .mv-track .mv-tim img{width:100%;height:100%;object-fit:cover;filter:saturate(1.05)}
html.tf2 .mv-track .mv-tim:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,8,12,0) 40%,rgba(17,20,29,1))}
html.tf2 .mv-track .mv-tx{position:relative;margin-top:-34px;padding:0 16px 16px;display:flex;flex-direction:column;gap:4px}
html.tf2 .mv-track .mv-ti{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));box-shadow:0 10px 24px rgba(110,91,255,.45);margin-bottom:6px}
html.tf2 .mv-track .mv-ti svg{stroke:#fff;width:22px;height:22px}
html.tf2 .mv-track b{font:900 1.18rem/1.15 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-track s{text-decoration:none;color:var(--tf2-mut);font-size:.86rem;line-height:1.4}
html.tf2 .mv-chip{display:flex;align-items:center;gap:8px;align-self:flex-start;padding:7px 12px;border-radius:999px;background:var(--tf2-viosoft);color:#fff;font:700 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-chip svg{width:16px;height:16px;stroke:var(--tf2-vio)}
html.tf2 .mv-adv{margin-top:8px;border-top:1px solid var(--tf2-line);padding-top:10px}
html.tf2 .mv-adv summary{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--tf2-mut2);font:700 .84rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:40px;list-style:none}
html.tf2 .mv-adv summary::-webkit-details-marker{display:none}
html.tf2 .mv-adv summary svg{width:16px;height:16px}
html.tf2 .mv-adv button{display:block;width:100%;text-align:start;min-height:44px;margin-top:6px;padding:10px 12px;border-radius:12px;border:1px solid var(--tf2-line);background:transparent;color:var(--tf2-mut);font-weight:700;cursor:pointer}
html.tf2 .mv-lab{font:800 .82rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-mut);margin-top:4px}
html.tf2 .mv-sub{margin:-6px 2px 0}
html.tf2 .mv-songs{display:flex;flex-direction:column;gap:8px}
html.tf2 .mv-song{display:flex;align-items:center;gap:12px;padding:8px;border-radius:16px;border:1px solid var(--tf2-line);background:var(--tf2-surf);color:var(--tf2-txt);text-align:start;cursor:pointer}
html.tf2 .mv-song img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex:0 0 auto}
html.tf2 .mv-song span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
html.tf2 .mv-song b{font:800 .98rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;overflow-wrap:anywhere}
html.tf2 .mv-song s{text-decoration:none;color:var(--tf2-mut2);font-size:.78rem}
html.tf2 .mv-song .mv-ok{width:26px;height:26px;border-radius:50%;border:1.5px solid var(--tf2-line2);display:grid;place-items:center;flex:0 0 auto}
html.tf2 .mv-song.on{border-color:rgba(139,123,255,.75);background:linear-gradient(180deg,rgba(123,110,255,.18),rgba(123,110,255,.05))}
html.tf2 .mv-song.on .mv-ok{background:var(--tf2-vio);border-color:transparent}
html.tf2 .mv-song .mv-ok svg{width:15px;height:15px;stroke:#fff}
html.tf2 .mv-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html.tf2 .mv-opts.col{grid-template-columns:1fr}
html.tf2 .mv-opt{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:12px;border-radius:18px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);text-align:start;cursor:pointer;min-width:0}
html.tf2 .mv-opts.col .mv-opt{flex-direction:row;align-items:center}
html.tf2 .mv-opt img{width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--tf2-line2)}
html.tf2 .mv-opt .ph{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--tf2-viosoft);flex:0 0 auto}
html.tf2 .mv-opt .ph svg{stroke:var(--tf2-vio)}
html.tf2 .mv-opt span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
html.tf2 .mv-opt b{font:800 .95rem/1.2 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-opt s{text-decoration:none;color:var(--tf2-mut2);font-size:.76rem;line-height:1.35}
html.tf2 .mv-opt.on{border-color:rgba(139,123,255,.8);box-shadow:0 0 0 2px rgba(139,123,255,.35);background:linear-gradient(180deg,rgba(123,110,255,.18),rgba(123,110,255,.05))}
html.tf2 .mv-opt.on img{border-color:var(--tf2-vio)}
html.tf2 .mv-tip{margin:0}
html.tf2 .mv-perm{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;border:1px solid rgba(139,123,255,.4);background:var(--tf2-viosoft);font-size:.88rem;line-height:1.4;cursor:pointer}
html.tf2 .mv-perm input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--tf2-vio);margin-top:1px}
html.tf2 .mv-seg{display:flex;flex-wrap:wrap;gap:8px}
html.tf2 .mv-seg button,html.tf2 .mv-chips button{flex:1 1 auto;min-height:46px;padding:8px 14px;border-radius:14px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-mut);font-weight:700;cursor:pointer}
html.tf2 .mv-chips{display:flex;flex-wrap:wrap;gap:8px}
html.tf2 .mv-chips button{flex:0 0 auto;min-height:40px;border-radius:999px}
html.tf2 .mv-seg button.on,html.tf2 .mv-chips button.on{background:var(--tf2-viosoft);border-color:rgba(139,123,255,.75);color:#fff}
html.tf2 .mv-chat{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:16px;border:1px solid var(--tf2-line2);background:var(--tf2-surf)}
html.tf2 .mv-msg{max-width:88%;padding:9px 12px;border-radius:14px;font-size:.88rem;line-height:1.45}
html.tf2 .mv-msg.u{align-self:flex-end;background:var(--tf2-viosoft);color:#fff}
html.tf2 .mv-msg.d{align-self:flex-start;background:var(--tf2-surf2);color:var(--tf2-txt)}
html.tf2 .mv-ask{display:flex;gap:8px;align-items:flex-end}
html.tf2 .mv-ask textarea,html.tf2 .mv-sc textarea{flex:1;min-width:0;resize:vertical;min-height:52px;padding:10px 12px;border-radius:12px;border:1px solid var(--tf2-line2);background:rgba(0,0,0,.25);color:#fff;font:500 .92rem/1.4 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-ask button{min-height:48px;padding:0 16px;border-radius:12px;border:0;background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));color:#fff;font-weight:800;cursor:pointer}
html.tf2 .mv-an{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:36px 8px}
html.tf2 .mv-an b{font:900 1.1rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-an s{text-decoration:none;color:var(--tf2-mut);font-size:.86rem}
html.tf2 .mv-spin{width:46px;height:46px;border-radius:50%;border:4px solid var(--tf2-surf2);border-top-color:var(--tf2-vio);animation:mvspin 1s linear infinite}
@keyframes mvspin{to{transform:rotate(360deg)}}
html.tf2 .mv-card,html.tf2 .mv-sum{padding:14px;border-radius:18px;border:1px solid var(--tf2-line2);background:linear-gradient(180deg,var(--tf2-surf2),var(--tf2-surf));display:flex;flex-direction:column;gap:8px}
html.tf2 .mv-ch{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
html.tf2 .mv-ch b{font:900 1.02rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-kv{display:flex;justify-content:space-between;gap:10px;font-size:.88rem;color:var(--tf2-mut)}
html.tf2 .mv-kv b{color:#fff;text-align:end}
html.tf2 .mv-story span{font-size:.8rem;color:var(--tf2-mut2)}
html.tf2 .mv-story p{margin:2px 0 0;font-size:.95rem;line-height:1.45;color:#fff}
html.tf2 .mv-conc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
html.tf2 .mv-conc button{display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:16px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);cursor:pointer;text-align:start;min-width:0}
html.tf2 .mv-conc img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px}
html.tf2 .mv-conc b{font:800 .78rem/1.25 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;padding:0 2px 2px;overflow-wrap:anywhere}
html.tf2 .mv-conc button.on{border-color:var(--tf2-vio);box-shadow:0 0 0 2px rgba(139,123,255,.45)}
html.tf2 .mv-scenes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html.tf2 .mv-sc{display:flex;gap:10px;padding:8px;border-radius:16px;border:1px solid var(--tf2-line);background:var(--tf2-surf)}
html.tf2 .mv-sc .th{position:relative;flex:0 0 auto;width:84px;height:112px;border-radius:12px;overflow:hidden;background:var(--tf2-surf2)}
html.tf2 .mv-sc .th>img{width:100%;height:100%;object-fit:cover}
html.tf2 .mv-sc .th .tm{position:absolute;bottom:4px;inset-inline-start:4px;font:700 .64rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:rgba(0,0,0,.6);padding:2px 5px;border-radius:6px}
html.tf2 .mv-sc .me,html.tf2 .mv-player .me{position:absolute;top:5px;inset-inline-end:5px;display:flex;align-items:center;gap:4px}
html.tf2 .mv-sc .me img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--tf2-vio)}
html.tf2 .mv-sc .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
html.tf2 .mv-sc q{font:800 .9rem/1.35 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;quotes:none}
html.tf2 .mv-sc p{margin:0;font-size:.82rem;line-height:1.4;color:var(--tf2-mut)}
html.tf2 .mv-sc p small{color:var(--tf2-vio);font-weight:800}
html.tf2 .mv-sc .ac{display:flex;gap:6px;margin-top:auto;flex-wrap:wrap}
html.tf2 .mv-sc .ac button{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:6px 10px;border-radius:10px;border:1px solid var(--tf2-line2);background:transparent;color:var(--tf2-txt);font-size:.78rem;font-weight:700;cursor:pointer}
html.tf2 .mv-sc .ac svg{width:14px;height:14px}
html.tf2 .mv-tell{min-height:48px;border-radius:14px;border:1px dashed rgba(139,123,255,.55);background:rgba(123,110,255,.06);color:#fff;font-weight:700;cursor:pointer;padding:8px 12px}
html.tf2 .mv-sum b{font:900 .95rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-sum span{font-size:.86rem;color:var(--tf2-mut);line-height:1.45}
html.tf2 .mv-sum .tf2mock{align-self:flex-start}
html.tf2 .mv-foot{position:sticky;bottom:calc(98px + env(safe-area-inset-bottom,0px));z-index:3;display:flex;flex-direction:column;gap:6px;margin-top:6px}
html.tf2 .mv-foot .mv-go{position:static}
html.tf2 .mv-hint{text-align:center;font-size:.78rem;color:var(--tf2-mut2);background:var(--tf2-bg2);border-radius:8px;padding:2px 6px;align-self:center}
html.tf2 .mv-rbar{width:100%;max-width:320px;height:8px;border-radius:99px;background:var(--tf2-surf2);overflow:hidden;margin-top:6px}
html.tf2 .mv-rbar i{display:block;height:100%;background:linear-gradient(90deg,var(--tf2-vio2),var(--tf2-vio));transition:width .35s}
html.tf2 .mv-rth{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:8px}
html.tf2 .mv-rth span{width:40px;height:52px;border-radius:8px;overflow:hidden;opacity:.25;border:1px solid var(--tf2-line2);transition:opacity .3s}
html.tf2 .mv-rth span.done{opacity:1}
html.tf2 .mv-rth span.now{opacity:.7;border-color:var(--tf2-vio)}
html.tf2 .mv-rth img{width:100%;height:100%;object-fit:cover}
html.tf2 .mv-ready{display:flex;align-items:center;gap:8px;font:900 1.05rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-ready svg{width:22px;height:22px;stroke:var(--tf2-ok)}
html.tf2 .mv-player{position:relative;width:100%;max-width:420px;align-self:center;border-radius:20px;overflow:hidden;background:#000;border:1px solid var(--tf2-line2)}
html.tf2 .mv-player.ar916{aspect-ratio:9/16;max-height:62vh;width:auto}
html.tf2 .mv-player.ar169{aspect-ratio:16/9}
html.tf2 .mv-player.ar11{aspect-ratio:1/1}
html.tf2 .mv-player>img{width:100%;height:100%;object-fit:cover;animation:mvken 1.6s ease-out both}
@keyframes mvken{from{transform:scale(1.08);opacity:.6}to{transform:scale(1);opacity:1}}
html.tf2 .mv-player .me{top:10px;inset-inline-end:10px;background:rgba(0,0,0,.55);padding:3px 8px 3px 3px;border-radius:99px}
html.tf2 .mv-player .me img{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--tf2-vio)}
html.tf2 .mv-player .me i{font-style:normal;font:700 .74rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-player .cap{position:absolute;left:8%;right:8%;bottom:64px;text-align:center;font:900 1.05rem/1.3 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.9),0 0 2px #000}
html.tf2 .mv-player .pp{position:absolute;bottom:12px;inset-inline-start:12px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer}
html.tf2 .mv-player .pp svg{width:18px;height:18px;fill:#000;stroke:#000}
html.tf2 .mv-player .tc{position:absolute;bottom:22px;inset-inline-end:12px;font:700 .74rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:8px}
html.tf2 .mv-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 4px;scrollbar-width:none}
html.tf2 .mv-strip button{flex:0 0 auto;width:104px;display:flex;flex-direction:column;gap:3px;padding:4px;border-radius:12px;border:1px solid var(--tf2-line);background:var(--tf2-surf);color:var(--tf2-txt);cursor:pointer;text-align:start}
html.tf2 .mv-strip img{width:100%;height:70px;object-fit:cover;border-radius:9px}
html.tf2 .mv-strip span{font:700 .66rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-mut2)}
html.tf2 .mv-strip s{text-decoration:none;font-size:.7rem;line-height:1.3;color:var(--tf2-mut);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
html.tf2 .mv-strip button.on{border-color:var(--tf2-vio);box-shadow:0 0 0 2px rgba(139,123,255,.4)}
html.tf2 .mv-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:.9rem;color:var(--tf2-mut)}
html.tf2 .mv-tog{min-height:40px;min-width:76px;border-radius:999px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-mut);font-weight:800;cursor:pointer}
html.tf2 .mv-tog.on{background:var(--tf2-viosoft);color:#fff;border-color:rgba(139,123,255,.75)}
html.tf2 .mv-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
html.tf2 .mv-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:8px 12px;border-radius:14px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);font-weight:800;cursor:pointer}
html.tf2 .mv-btn svg{width:16px;height:16px}
html.tf2 .mv-btn.primary{background:linear-gradient(135deg,var(--tf2-vio2),var(--tf2-vio));border:0;color:#fff}
html.tf2 .mv-btn.ghost{background:transparent;border-style:dashed}
@media (min-width:768px){ html.tf2 .mv-tracks{grid-template-columns:1fr 1fr} html.tf2 .mv-track .mv-tim{height:180px} }
@media (min-width:1100px){ html.tf2 #tf2mv{inset-inline-start:252px} html.tf2 .mv-foot{bottom:16px} }
@media (orientation:landscape) and (max-height:500px) and (max-width:1099px){ html.tf2 .mv-foot{position:relative;bottom:auto} }
/* fix (2026-10-05): when the + tab is active, `.tf2-dock a.on svg` turned the + violet-on-violet (looked faded/disabled) */
.tf2-dock a.on .tf2-fab svg{stroke:#fff}
/* fix: the fixed ♿ tab (left edge) covered controls in the full-screen studios on phones → keep a gutter for it */
@media (max-width:560px){ html.tf2 #tf2mv .tf2c-wrap,html.tf2 #tf2create .tf2c-wrap{padding-left:46px} }
/* MV player: play button and time code on opposite physical corners (time code is LTR text) */
html.tf2 .mv-player .pp{left:12px;right:auto;inset-inline-start:auto}
html.tf2 .mv-player .tc{right:12px;left:auto;inset-inline-end:auto}
html.tf2 .mv-song s em{font-style:normal;color:var(--tf2-vio);font-weight:800}

/* ===== 04i (2026-10-05) — self-explaining choices (Create) + clip start screen (MV) ===== */
html.tf2 .tf2c-choices{display:flex;flex-direction:column;gap:10px}
html.tf2 .tf2c-choice{display:flex;align-items:center;gap:12px;padding:8px;border-radius:18px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);text-align:start;cursor:pointer;font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-choice img{width:72px;height:72px;border-radius:14px;object-fit:cover;flex:0 0 auto}
html.tf2 .tf2c-choice .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.tf2 .tf2c-choice b{display:flex;align-items:center;gap:7px;font:900 1.02rem/1.2 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-choice b i{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--tf2-viosoft)}
html.tf2 .tf2c-choice b i svg{width:15px;height:15px;stroke:var(--tf2-vio)}
html.tf2 .tf2c-choice s{text-decoration:none;color:var(--tf2-mut);font-size:.84rem;line-height:1.4}
html.tf2 .tf2c-choice.on{border-color:rgba(139,123,255,.75);box-shadow:0 0 0 2px rgba(139,123,255,.35)}
html.tf2 .tf2c-chosen{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--tf2-viosoft);border:1px solid rgba(139,123,255,.45)}
html.tf2 .tf2c-chosen .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));flex:0 0 auto}
html.tf2 .tf2c-chosen .ic svg{stroke:#fff;width:20px;height:20px}
html.tf2 .tf2c-chosen .tx{flex:1;display:flex;flex-direction:column}
html.tf2 .tf2c-chosen s{text-decoration:none;font-size:.74rem;color:var(--tf2-mut)}
html.tf2 .tf2c-chosen b{font:900 1.05rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2c-chosen button{min-height:40px;padding:6px 14px;border-radius:999px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:#fff;font:700 .84rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer}
html.tf2 .mv-hero{position:relative;border-radius:20px;overflow:hidden;height:170px;border:1px solid var(--tf2-line2)}
html.tf2 .mv-hero img{width:100%;height:100%;object-fit:cover}
html.tf2 .mv-hero .cap{position:absolute;left:0;right:0;bottom:14px;text-align:center;font:900 1rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;text-shadow:0 2px 10px #000}
html.tf2 .mv-how{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
html.tf2 .mv-how li{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;background:var(--tf2-surf);border:1px solid var(--tf2-line)}
html.tf2 .mv-how .n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:linear-gradient(135deg,var(--tf2-vio),var(--tf2-vio2));color:#fff;font:900 .9rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-how b{font:800 .98rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-empty{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:16px;border:1px dashed var(--tf2-line2);background:var(--tf2-surf)}
html.tf2 .mv-empty b{font:800 .98rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-empty s{text-decoration:none;color:var(--tf2-mut);font-size:.86rem}
html.tf2 .mv-empty .r{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
html.tf2 .mv-change{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:18px;border:1px solid rgba(139,123,255,.35);background:rgba(123,110,255,.07)}
html.tf2 .mv-change b{font:900 .98rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .mv-change s{text-decoration:none;color:var(--tf2-mut);font-size:.86rem;line-height:1.45}
html.tf2 .mv-you{margin-top:6px !important;color:var(--tf2-champ) !important;font-weight:700}

/* ===== 04j (2026-10-05) — Billing v7: three wallets + any-amount top-up ===== */
html.tf2 .tf2w-lead{margin:0 0 10px}
html.tf2 .tf2w-list{display:flex;flex-direction:column;gap:10px}
html.tf2 .tf2w{display:flex;flex-direction:column;gap:6px;padding:14px;border-radius:18px;border:1px solid var(--tf2-line2);background:linear-gradient(180deg,var(--tf2-surf2),var(--tf2-surf))}
html.tf2 .tf2w .w-top{display:flex;align-items:center;gap:8px}
html.tf2 .tf2w .w-ic{font-size:1.25rem}
html.tf2 .tf2w .w-nm{font:900 1.05rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;flex:1}
html.tf2 .tf2w .w-bal{display:flex;align-items:baseline;gap:6px}
html.tf2 .tf2w .w-bal b{font:900 2rem/1 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;font-variant-numeric:tabular-nums}
html.tf2 .tf2w .w-bal span{color:var(--tf2-mut);font-size:.92rem}
html.tf2 .tf2w .w-inc{font-size:.84rem;color:var(--tf2-mut)}
html.tf2 .tf2w .w-cost summary{cursor:pointer;font:700 .84rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-vio);min-height:36px;display:flex;align-items:center}
html.tf2 .tf2w .w-cost ul{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
html.tf2 .tf2w .w-cost li{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--tf2-line);font-size:.8rem;color:var(--tf2-mut)}
html.tf2 .tf2w .w-cost li b{color:#fff}
html.tf2 .tf2w .w-buy{margin-top:4px}
html.tf2 .tf2w-keep{margin:10px 0}
html.tf2 .tf2ad-step .st-usd{flex:1;min-width:0;display:flex;align-items:center;border-radius:14px;border:1px solid var(--tf2-line2);background:rgba(0,0,0,.25);padding-inline-start:14px}
html.tf2 .tf2ad-step .st-usd span{font:900 22px 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-mut)}
html.tf2 .tf2ad-step .st-usd .st-in{border:0;background:transparent}
@media (max-width:359px){ html.tf2 .tf2w .w-cost ul{grid-template-columns:1fr} }
html.tf2 .tf2p-tier .tf2b-feats li.no{color:var(--tf2-mut2)}
html.tf2 .tf2p-tier .tf2b-feats li.no::before{content:"—";border:0;transform:none;width:auto;height:auto;top:0;color:var(--tf2-mut2)}
/* v7: wallet names in the account chips may be long (ru/es/nl/tr) → wrap to 2 lines, never cut */
html.tf2 .ac-chip s{white-space:normal !important;overflow:visible !important;text-overflow:clip !important;line-height:1.2;text-align:center;font-size:11px}
/* v7.1 wallet selector + inline top-up */
html.tf2 .tf2w-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 12px}
html.tf2 .tf2w-seg button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;min-height:72px;border-radius:16px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-mut);cursor:pointer;font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2w-seg button span{font-size:1.3rem}
html.tf2 .tf2w-seg button b{font:800 .8rem/1.2 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-align:center;overflow-wrap:anywhere}
html.tf2 .tf2w-seg button.on{border-color:var(--tf2-vio);background:linear-gradient(180deg,rgba(123,110,255,.28),rgba(123,110,255,.08));color:#fff;box-shadow:0 0 0 2px rgba(139,123,255,.4)}
html.tf2 .tf2w .w-cl{margin-top:6px}
html.tf2 .tf2w .w-costs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
html.tf2 .tf2w .w-costs li{display:flex;justify-content:space-between;gap:8px;padding:7px 10px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid var(--tf2-line);font-size:.8rem;color:var(--tf2-mut)}
html.tf2 .tf2w .w-costs li b{color:#fff}
html.tf2 .tf2w-buy{margin-top:10px;border-color:rgba(139,123,255,.45)}
html.tf2 .ac-chip.on{border-color:var(--tf2-vio)}
@media (max-width:359px){ html.tf2 .tf2w .w-costs{grid-template-columns:1fr} }
/* v7.2 — demo view (with/without plan), buy-by toggle, buy-by-items list */
html.tf2 .tf2w-view{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 10px;font-size:.78rem;color:var(--tf2-champ)}
html.tf2 .tf2w-view button,html.tf2 .tf2w-by button{min-height:36px;padding:6px 12px;border-radius:999px;border:1px solid var(--tf2-line2);background:transparent;color:var(--tf2-mut);font:700 .8rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;cursor:pointer}
html.tf2 .tf2w-view button.on,html.tf2 .tf2w-by button.on{background:var(--tf2-viosoft);border-color:rgba(139,123,255,.75);color:#fff}
html.tf2 .tf2w-by{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 0 6px}
html.tf2 .tf2w-by button{border-radius:12px;min-height:44px;line-height:1.2}
html.tf2 .tf2w-items{display:flex;flex-direction:column;gap:6px}
html.tf2 .tf2w-items .it{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;border:1px solid var(--tf2-line);background:rgba(255,255,255,.02)}
html.tf2 .tf2w-items .t{flex:1;min-width:0;display:flex;flex-direction:column}
html.tf2 .tf2w-items .t b{font:800 .9rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2w-items .t s{text-decoration:none;font-size:.74rem;color:var(--tf2-mut2)}
html.tf2 .tf2w-items .q{display:flex;align-items:center;gap:8px}
html.tf2 .tf2w-items .q button{width:40px;height:40px;border-radius:12px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:#fff;font-size:20px;cursor:pointer}
html.tf2 .tf2w-items .q button:disabled{opacity:.35;cursor:default}
html.tf2 .tf2w-items .q b{min-width:22px;text-align:center;font:900 1rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
/* v7.3 — "How do you want to pay?" two big cards */
html.tf2 .tf2w-pay{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:2px 0 14px}
html.tf2 .tf2w-pay button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:start;padding:12px;border-radius:16px;border:1px solid var(--tf2-line2);background:var(--tf2-surf);color:var(--tf2-txt);cursor:pointer;font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;min-height:96px}
html.tf2 .tf2w-pay .pi{font-size:1.4rem}
html.tf2 .tf2w-pay b{font:900 .98rem/1.2 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
html.tf2 .tf2w-pay s{text-decoration:none;font-size:.76rem;line-height:1.35;color:var(--tf2-mut)}
html.tf2 .tf2w-pay button.on{border-color:var(--tf2-vio);background:linear-gradient(180deg,rgba(123,110,255,.26),rgba(123,110,255,.07));box-shadow:0 0 0 2px rgba(139,123,255,.4)}
html.tf2 .tf2w-buy{margin-top:0;margin-bottom:10px}
/* v8 price list: $ next to each cost, one item per row so names + prices never squeeze */
html.tf2 .tf2w .w-costs{grid-template-columns:1fr}
html.tf2 .tf2w .w-costs li b{white-space:nowrap}
html.tf2 .tf2w .w-costs .w-usd{font-style:normal;font-weight:800;color:#a394ff;margin-inline-start:8px}
/* ===== 04k Music Studio re-layout (tf2-music.js, Stub) — one header, one tab bar, no duplicates ===== */
html.tf2 #music .tf2mus{display:block!important;max-width:760px;margin:0 auto}
html.tf2 #music .tf2mus > .tf-mus-side{display:none!important}
html.tf2 #music .tf2mus > .tf-mus-content{min-width:0}
html.tf2 #music .tf2mu-head{margin:0 0 16px}
html.tf2 #music .tf2mu-head .mu-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
html.tf2 #music .tf2mu-head .mu-t{min-width:0;flex:1 1 220px}
html.tf2 #music .tf2mu-head h1{margin:0;font-size:1.55rem;font-weight:900;color:#fff;letter-spacing:-.01em}
html.tf2 #music .tf2mu-head p{margin:4px 0 0;color:var(--tf2-mut,#a9b1c7);font-size:.92rem;line-height:1.45}
html.tf2 #music .tf2mu-head .mu-wal{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:9px 14px;border-radius:14px;border:1px solid rgba(163,148,255,.35);background:rgba(125,107,255,.10);color:#fff;font:inherit;font-size:.82rem;cursor:pointer;text-align:start}
html.tf2 #music .tf2mu-head .mu-wal b{color:#a394ff;font-weight:800}
html.tf2 #music .tf2mu-head .mu-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--tf2-line,#262b3d)}
html.tf2 #music .tf2mu-head .mu-tabs button{min-height:46px;padding:8px 6px;border:0;border-radius:12px;background:transparent;color:var(--tf2-mut,#a9b1c7);font:inherit;font-weight:800;font-size:.88rem;cursor:pointer;line-height:1.2}
html.tf2 #music .tf2mu-head .mu-tabs button.on{background:linear-gradient(135deg,#7d6bff,#9d8cff);color:#fff;box-shadow:0 6px 18px rgba(125,107,255,.35)}
/* home: keep title + box + quick ideas; hide duplicates (showcase = same as chips, empty banner, song→video card = Clip tab) */
html.tf2 #music .tf2mus .tf-mus-vhome .tf-mus-bantitle,html.tf2 #music .tf2mus .tf-mus-vhome .tf-mus-bansub{display:none}
html.tf2 #music .tf2mus .tf-mus-vhome .tf-mus-s2vhome,html.tf2 #music .tf2mus .tf-mus-vhome .tf-mus-vbanner,
html.tf2 #music .tf2mus .tf-mus-vhome .tf-mus-sechead,html.tf2 #music .tf2mus .tf-mus-vhome .tf-mus-show{display:none!important}
html.tf2 #music .tf2mus .tf2mu-lab{margin:16px 2px 8px;font-size:.8rem;font-weight:800;color:var(--tf2-mut,#a9b1c7)}
/* producer chat: modes folded */
html.tf2 #music .tf2mus .tf-mus-hero{flex-wrap:wrap}
html.tf2 #music .tf2mus .tf2mu-more{margin:4px 0 10px;border:1px solid var(--tf2-line,#262b3d);border-radius:12px;padding:8px 12px;background:rgba(255,255,255,.02)}
html.tf2 #music .tf2mus .tf2mu-more summary{cursor:pointer;font-weight:800;font-size:.85rem;color:#c9d3e6}
html.tf2 #music .tf2mus .tf2mu-more summary s{text-decoration:none;font-weight:500;color:var(--tf2-mut,#a9b1c7);margin-inline-start:6px;font-size:.78rem}
html.tf2 #music .tf2mus .tf2mu-more .tf-mus-modes{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:560px){ html.tf2 #music .tf2mus{padding-left:46px} html.tf2 #music .tf2mu-head h1{font-size:1.35rem} html.tf2 #music .tf2mu-head .mu-wal{flex-direction:row;align-items:center;gap:10px;width:100%;justify-content:space-between} }
html.tf2 #music .tf2mu-head .mu-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.82rem}
html.tf2 #music .tf2mu-head .mu-tabs button i{font-style:normal;font-size:1.1rem;line-height:1}
html.tf2 #music .tf2mu-head .mu-tabs button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
html.tf2 #music .tf2mu-head .mu-tabs button span{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15;text-align:center;overflow-wrap:normal;hyphens:manual}
html.tf2 .tf2ad-step .st-cr{display:flex;align-items:center;justify-content:center}
html.tf2 .tf2ad-step .st-cr b{font-size:1.6rem;font-weight:900;color:#fff}
/* ===== 04l language switch on every screen (tf2-lang.js) ===== */
.tf2lang-btn{display:inline-flex;align-items:center;gap:5px;height:36px;padding:0 10px;border-radius:12px;border:1px solid rgba(163,148,255,.35);background:rgba(125,107,255,.10);color:#e8e6ff;font:800 12px/1 'Heebo',system-ui,sans-serif;cursor:pointer;flex:0 0 auto;letter-spacing:.02em}
.tf2lang-btn svg{flex:0 0 auto}
html.tf2 .tf2c-head .tf2lang-btn{margin-inline-start:auto}
html.tf2 .tf2b-head{align-items:center}
html.tf2 .tf2b-head>div{flex:1 1 auto;min-width:0}
#tf2home .top-r .tf2lang-btn{height:34px;padding:0 8px}
#tf2langs{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:flex-end;justify-content:center}
#tf2langs .tl-dim{position:absolute;inset:0;background:rgba(4,4,10,.62);backdrop-filter:blur(3px)}
#tf2langs .tl-panel{position:relative;width:min(520px,100%);max-height:82vh;overflow:auto;background:#12131c;border:1px solid #2a2f45;border-radius:22px 22px 0 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom,0px));box-shadow:0 -10px 40px rgba(0,0,0,.5)}
@media(min-width:700px){#tf2langs{align-items:center} #tf2langs .tl-panel{border-radius:22px}}
#tf2langs .tl-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:#fff}
#tf2langs .tl-head b{display:flex;align-items:center;gap:8px;font:900 18px 'Heebo',system-ui,sans-serif}
#tf2langs .tl-x{width:38px;height:38px;border-radius:12px;border:1px solid #2a2f45;background:transparent;color:#fff;font-size:16px;cursor:pointer}
#tf2langs .tl-list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#tf2langs .tl-list button{min-height:46px;padding:8px 12px;border-radius:12px;border:1px solid #2a2f45;background:rgba(255,255,255,.03);color:#e9ecf5;font:700 15px 'Heebo',system-ui,sans-serif;cursor:pointer;text-align:start;display:flex;align-items:center;justify-content:space-between}
#tf2langs .tl-list button.on{border-color:#7d6bff;background:rgba(125,107,255,.18);color:#fff}
#tf2langs .tl-list i{font-style:normal;color:#a394ff}
/* home header fits phones with the language button (Tuvia 2026-10-05) */
#tf2home .top{gap:8px;min-width:0}
#tf2home .top-r{min-width:0;flex-wrap:nowrap}
@media(max-width:440px){
  #tf2home .brand{font-size:1.08rem;white-space:nowrap}
  #tf2home .top-r{gap:6px}
  html.tf2 #tf2home .tf2-ico{width:34px;height:34px}
  #tf2home .av{width:32px;height:32px;flex:0 0 auto}
  #tf2home .top-r .tf2lang-btn{height:32px;padding:0 7px;gap:4px}
  #tf2home .cr.sm{padding:4px 8px}
}
@media(max-width:380px){ #tf2home .top-r .tf2lang-btn span{display:none} }
/* small phones: the credits pill duplicates the Billing card right below it → hide it so the header (incl. language) fits */
@media(max-width:400px){ #tf2home .top-r .cr.sm{display:none} }
@media(max-width:340px){ #tf2home .brand{font-size:.98rem} html.tf2 #tf2home .tf2-ico{width:32px;height:32px} }

/* Tuvia msg 7524: clips are NOT part of the monthly plan — separate charge (lock marker) */
html.tf2 .tf2b-feats li.no.lock{color:var(--tf2-mut2)}
html.tf2 .tf2p-tier .tf2b-feats li.no.lock::before{content:"🔒";font-size:11px;top:1px}

/* Clip gate (Tuvia msg 7531): locked "Song clip" tab + explain sheet */
html.tf2 #music .mu-tabs [data-mt="clip"].locked{opacity:.75}
html.tf2 #music .mu-tabs [data-mt="clip"].locked span{color:var(--tf2-mut2,#9aa0b8)}
#tf2clipgate{position:fixed;inset:0;z-index:100050;display:flex;align-items:flex-end;justify-content:center}
#tf2clipgate .cg-dim{position:absolute;inset:0;background:rgba(5,6,14,.66);backdrop-filter:blur(3px)}
#tf2clipgate .cg-panel{position:relative;width:100%;max-width:440px;margin:0 12px 14px;background:#141428;border:1px solid rgba(163,148,255,.3);border-radius:22px;padding:22px 18px 16px;text-align:center;color:#eceaff;font-family:'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;box-shadow:0 20px 60px rgba(0,0,0,.55)}
#tf2clipgate .cg-ic{font-size:30px;margin-bottom:6px}
#tf2clipgate b{display:block;font-size:18px;font-weight:800;margin-bottom:8px}
#tf2clipgate p{margin:0 0 16px;font-size:14px;line-height:1.55;color:#c9c6e8}
#tf2clipgate button{display:block;width:100%;border-radius:14px;padding:13px 10px;font:800 15px/1.2 'Heebo',system-ui,sans-serif;cursor:pointer;border:0}
#tf2clipgate .cg-buy{background:linear-gradient(135deg,#7d6bff,#a394ff);color:#fff;margin-bottom:8px}
#tf2clipgate .cg-later{background:transparent;color:#b9b5dc;border:1px solid rgba(163,148,255,.25)}

/* iPhone Safari (Tuvia msg 7535): "vh" = the TALL viewport (toolbars hidden), so a 92vh sheet started
   above the visible screen and its title was cut. dvh = the space actually visible right now. */
@supports (height:100dvh){ @media (max-width:767px){
  html.tf2 .tf2-sheet{max-height:calc(100dvh - 10px)}
  html.tf2 .tf2b-panel{max-height:94dvh}
  html.tf2:has(body > #tf2bill) .tf2b-panel,html.tf2:has(body > .tf2b-second) .tf2b-panel{max-height:calc(100dvh - 52px)}
  html.tf2 .tf2b-second .tf2b-panel{min-height:min(84dvh,740px)}
  #tf2langs .tl-panel{max-height:82dvh}
  html.tf2 .mv-player.ar916{max-height:62dvh}
  html.tf2 #tf2create{--tf2c-mh:50dvh}
}}

/* Inner pages (music etc.), phone: the legacy top bar pushed the ⚡ credits pill and the songs chip off the
   left edge (Tuvia msg 7535). Songs left + "buy more" already sit in the Music header → hide that chip here,
   and tighten the bar so the credits pill stays fully visible. */
@media (max-width:767px){
  html.tf2 .site-header .tf-billing-songchip{display:none !important}
  html.tf2 .site-header .header-inner{gap:6px !important;padding-inline:10px !important}
  html.tf2 .site-header #creditsSlot{flex:0 1 auto;min-width:0}
}
@media (max-width:400px){
  html.tf2 .site-header .brand{font-size:15px !important}
  html.tf2 .site-header .tf-lang{padding:3px 4px !important}
  html.tf2 .site-header .tf-lang-sel{max-width:68px}
  html.tf2 .site-header #creditsSlot .tf-billing-badge.tf-billing-pulse{padding:6px 8px !important;min-width:0 !important}
  html.tf2 .site-header .tf-billing-pulse .tf2mock{display:none}
  html.tf2 .site-header #tfActBell{width:34px !important;min-width:34px}
}
@media (max-width:340px){
  html.tf2 .site-header .brand{font-size:0 !important}
  html.tf2 .site-header .brand .brand-hg{font-size:20px}
}
html.tf2 .site-header #creditsSlot .tf-billing-badge{flex-shrink:0}
html.tf2 #music .tf-mus-sechead{flex-wrap:wrap;row-gap:8px}
html.tf2 #music .tf-mus-sechead > *{min-width:0}

/* ===== 04m Music — pro studio look (Tuvia msg 7541) ===== */
html.tf2 #music .tf2mus .tf2mu-hero{position:relative;margin:4px 0 6px;padding:18px 16px 16px;border-radius:24px;overflow:hidden;
  background:radial-gradient(120% 90% at 100% 0%,rgba(125,107,255,.32),transparent 60%),radial-gradient(90% 80% at 0% 100%,rgba(236,72,153,.18),transparent 60%),linear-gradient(180deg,#171631,#100f22);
  border:1px solid rgba(163,148,255,.28);box-shadow:0 18px 50px -20px rgba(125,107,255,.55)}
html.tf2 #music .tf2mu-hero .mh-k{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:800;letter-spacing:.04em;color:#cfc8ff;background:rgba(125,107,255,.16);border:1px solid rgba(163,148,255,.3);padding:4px 10px;border-radius:999px}
html.tf2 #music .tf2mu-hero .mh-k i{width:7px;height:7px;border-radius:50%;background:#7ef0b5;box-shadow:0 0 0 3px rgba(126,240,181,.18)}
html.tf2 #music .tf2mu-hero h2{margin:10px 0 12px;font:900 1.45rem/1.15 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;letter-spacing:-.02em}
html.tf2 #music .tf2mu-hero .tf-mus-hbox{display:block!important;margin:0!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important}
html.tf2 #music .tf2mu-hero textarea{display:block;width:100%;min-height:92px;box-sizing:border-box;resize:none;border-radius:16px!important;border:1px solid rgba(163,148,255,.3)!important;background:rgba(6,6,16,.55)!important;color:#fff!important;padding:13px 14px!important;font:500 15px/1.5 'Heebo',system-ui,sans-serif!important}
html.tf2 #music .tf2mu-hero textarea:focus{outline:none;border-color:#a394ff!important;box-shadow:0 0 0 3px rgba(125,107,255,.25)}
html.tf2 #music .tf2mu-hero .mh-pick{margin:12px 0 14px;display:flex;flex-direction:column;gap:8px}
html.tf2 #music .tf2mu-hero .mp-row{display:flex;align-items:center;gap:8px;min-width:0}
html.tf2 #music .tf2mu-hero .mp-lab{flex:0 0 auto;min-width:58px;font-size:.74rem;font-weight:800;color:#a9a3d6}
html.tf2 #music .tf2mu-hero .mp-pills{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px 0}
html.tf2 #music .tf2mu-hero .mp-pills::-webkit-scrollbar{display:none}
html.tf2 #music .tf2mu-hero .mp-pill{flex:0 0 auto;border:1px solid rgba(163,148,255,.25);background:rgba(255,255,255,.04);color:#ddd9ff;border-radius:999px;padding:6px 12px;font:700 .8rem/1.2 'Heebo',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transition:.15s}
html.tf2 #music .tf2mu-hero .mp-pill.on{background:linear-gradient(135deg,#7d6bff,#a394ff);border-color:transparent;color:#fff;box-shadow:0 6px 16px -6px rgba(125,107,255,.9)}
html.tf2 #music .tf2mu-hero .tf-mus-hgo{display:block;width:100%;padding:15px!important;border-radius:16px!important;font-size:16px!important}
html.tf2 #music .tf2mus .tf2mu-lab.mp-sec,html.tf2 #music .tf2mu-recent .mr-head b{display:block;margin:22px 2px 10px;font:900 1.05rem 'Heebo',system-ui,sans-serif;color:#fff}
html.tf2 #music .tf2mus .tf-mus-starts.mp-insp{display:flex!important;grid-template-columns:none!important;gap:10px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin:0 -2px;scroll-snap-type:x mandatory}
html.tf2 #music .tf2mus .tf-mus-starts.mp-insp::-webkit-scrollbar{display:none}
html.tf2 #music .tf2mus .tf-mus-starts.mp-insp .tf-mus-start{flex:0 0 132px;height:150px;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:4px;text-align:start;
  padding:12px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.08)!important;background-size:cover!important;background-position:center!important;color:#fff!important;font:800 .86rem/1.25 'Heebo',system-ui,sans-serif!important;scroll-snap-align:start;box-shadow:0 10px 24px -14px rgba(0,0,0,.8);white-space:normal}
html.tf2 #music .tf2mus .tf-mus-starts.mp-insp .tf-mus-start .e{font-size:1.25rem}
html.tf2 #music .tf2mu-recent .mr-head{display:flex;align-items:baseline;justify-content:space-between}
html.tf2 #music .tf2mu-recent .mr-head button{background:none;border:0;color:#a394ff;font:800 .82rem 'Heebo',system-ui,sans-serif;cursor:pointer}
html.tf2 #music .tf2mu-recent .mr-row{display:flex;gap:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
html.tf2 #music .tf2mu-recent .mr-row::-webkit-scrollbar{display:none}
html.tf2 #music .tf2mu-recent .mr-card{flex:0 0 112px;background:none;border:0;padding:0;text-align:start;cursor:pointer;color:#fff}
html.tf2 #music .tf2mu-recent .mr-art{position:relative;display:block;width:112px;height:112px;border-radius:16px;background-size:cover;background-position:center;box-shadow:0 10px 24px -12px rgba(0,0,0,.8)}
html.tf2 #music .tf2mu-recent .mr-art i{position:absolute;inset-inline-end:8px;bottom:8px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;background:#fff;color:#111;box-shadow:0 4px 12px rgba(0,0,0,.4)}
html.tf2 #music .tf2mu-recent .mr-t{display:block;margin-top:7px;font:700 .82rem/1.3 'Heebo',system-ui,sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* My songs: compact pro list rows (cover · title · actions) instead of giant cards */
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-grid{display:flex!important;flex-direction:column;gap:10px}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-gcard{display:grid!important;grid-template-columns:76px 1fr;grid-template-areas:"art title" "art sub" "art row" "mkv mkv" "pl pl";column-gap:12px;row-gap:2px;align-items:center;padding:10px!important;border-radius:18px!important}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-art{grid-area:art;width:76px!important;height:76px!important;aspect-ratio:auto!important;border-radius:14px!important;margin:0!important;align-self:start}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-gtitle{grid-area:title;margin:0!important;font-size:.98rem!important;align-self:end}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-gsub{grid-area:sub;margin:0!important;font-size:.74rem!important}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-grow{grid-area:row;margin:4px 0 0!important;justify-content:flex-start!important}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-gmkv{grid-area:mkv;margin-top:10px!important;padding:10px!important;font-size:13.5px!important}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-player{grid-area:pl;margin-top:8px}
html.tf2 #music .tf2mus .tf-mus-vlib .tf-mus-covhint{font-size:12px}
html.tf2 #music .tf2mus .tf-mus-gmkv.mp-locked{background:rgba(255,255,255,.04)!important;color:#bdb7e6!important;border:1px dashed rgba(163,148,255,.4)!important;box-shadow:none!important}

/* legacy toasts sat on top of the main buttons (e.g. "Create song") → show them at the top, under the bar */
@media (max-width:767px){ html.tf2 .tf-billing-toasts{top:calc(64px + env(safe-area-inset-top,0px)) !important;bottom:auto !important} }
/* style / mood / voice pills scroll sideways → fade the edge so cut words read as "more" */
html.tf2 #music .tf2mu-hero .mp-pills{-webkit-mask-image:linear-gradient(to left,transparent 0,#000 22px);mask-image:linear-gradient(to left,transparent 0,#000 22px);padding-inline-end:18px}
html[dir="rtl"].tf2 #music .tf2mu-hero .mp-pills{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 22px);mask-image:linear-gradient(to right,transparent 0,#000 22px)}

/* ===== Create — recommended ideas gallery (Tuvia msg 7544) ===== */
html.tf2 .tf2c-gal{margin:22px 0 8px}
html.tf2 .tf2c-gal .g-h b{display:block;font:900 1.05rem 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tf2-txt,#fff)}
html.tf2 .tf2c-gal .g-h s{display:block;text-decoration:none;margin-top:3px;font-size:.78rem;color:var(--tf2-mut,#a9b1c7)}
html.tf2 .tf2c-gal .g-grid{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
html.tf2 .tf2c-gal .g-card{position:relative;display:block;aspect-ratio:3/4;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);padding:0;cursor:pointer;background:#141428;text-align:start;box-shadow:0 12px 26px -16px rgba(0,0,0,.9);transition:transform .15s}
html.tf2 .tf2c-gal .g-card:active{transform:scale(.98)}
html.tf2 .tf2c-gal .g-card img,html.tf2 .tf2c-gal .g-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
html.tf2 .tf2c-gal .g-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,6,16,0) 40%,rgba(6,6,16,.9))}
html.tf2 .tf2c-gal .g-k{position:absolute;z-index:1;top:8px;inset-inline-start:8px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px 3px 6px;border-radius:999px;background:rgba(10,10,24,.62);backdrop-filter:blur(6px);color:#e6e2ff;font:700 .66rem/1.2 'Heebo',system-ui,sans-serif}
html.tf2 .tf2c-gal .g-k i svg{width:12px;height:12px;stroke:#b9adff;fill:none;stroke-width:2;display:block}
html.tf2 .tf2c-gal .g-t{position:absolute;z-index:1;inset-inline:10px;bottom:10px;color:#fff;font:800 .86rem/1.3 'Heebo',system-ui,sans-serif;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media (min-width:768px){ html.tf2 .tf2c-gal .g-grid{grid-template-columns:repeat(4,1fr)} }

/* ===== Sign-in / sign-up — welcoming showcase (tf2-auth.js, Tuvia msg 7544) — look only, auth.js unchanged ===== */
html.tf2 #tfAuthOverlay{background:rgba(5,5,14,.78)!important;backdrop-filter:blur(8px);padding:10px!important;overflow-y:auto}
html.tf2 #tfAuthCard{position:relative;flex-direction:column!important;max-width:430px!important;padding:0!important;overflow:hidden;border-radius:26px!important;
  background:linear-gradient(180deg,#14122b,#0c0b18)!important;border:1px solid rgba(163,148,255,.28)!important;box-shadow:0 30px 90px rgba(0,0,0,.7),0 0 0 1px rgba(125,107,255,.08)!important;max-height:calc(100dvh - 20px);overflow-y:auto}
html.tf2 #tfAuthCard .tf-auth-media{display:none!important}
html.tf2 .tf2auth-hero{position:relative;flex:0 0 auto;height:262px;overflow:hidden}
html.tf2 .tf2auth-hero .ah-reel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transform:scale(1.06);transition:opacity 1.1s ease,transform 4.2s ease}
html.tf2 .tf2auth-hero .ah-reel img.on{opacity:1;transform:scale(1)}
html.tf2 .tf2auth-hero .ah-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,11,24,.15) 0%,rgba(12,11,24,.05) 35%,rgba(20,18,43,.92) 80%,#14122b 100%)}
html.tf2 .tf2auth-hero .ah-brand{position:absolute;top:14px;inset-inline-start:14px;padding:6px 12px;border-radius:999px;background:rgba(10,10,24,.55);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:#fff;font:900 .9rem 'Heebo',system-ui,sans-serif}
html.tf2 .tf2auth-hero .ah-brand b{color:#e7c98a}
html.tf2 .tf2auth-hero .ah-txt{position:absolute;inset-inline:18px;bottom:12px;text-align:center}
html.tf2 .tf2auth-hero .ah-txt b{display:block;font:900 1.32rem/1.2 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(0,0,0,.6)}
html.tf2 .tf2auth-hero .ah-txt p{margin:6px 0 10px;font-size:.86rem;line-height:1.45;color:#d9d5f5}
html.tf2 .tf2auth-hero .ah-txt ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
html.tf2 .tf2auth-hero .ah-txt li{padding:5px 10px;border-radius:999px;background:rgba(125,107,255,.18);border:1px solid rgba(163,148,255,.32);color:#eceaff;font:700 .74rem/1.2 'Heebo',system-ui,sans-serif;white-space:nowrap}
html.tf2 #tfAuthCard .tf-auth-form{padding:16px 22px 22px!important;flex:1 1 auto}
html.tf2 #tfAuthCard h3{font-size:20px!important}
html.tf2 #tfAuthCard .tf-sub{margin-bottom:16px!important}
html.tf2 #tfAuthClose{top:14px!important;inset-inline-end:14px!important;width:34px;height:34px;border-radius:50%!important;background:rgba(10,10,24,.55)!important;backdrop-filter:blur(8px);color:#fff!important;border:1px solid rgba(255,255,255,.14)!important}
html.tf2 #tfAuthCard input{background:rgba(255,255,255,.04)!important;border-color:rgba(163,148,255,.22)!important;border-radius:14px!important}
html.tf2 #tfAuthCard input:focus,html.tf2 #tfAuthCard input:focus-visible{border-color:#7d6bff!important;box-shadow:0 0 0 3px rgba(125,107,255,.22)}
html.tf2 #tfAuthBtn{background:linear-gradient(135deg,#7d6bff,#a394ff)!important;color:#fff!important;box-shadow:0 12px 30px -10px rgba(125,107,255,.9)!important;padding:14px!important;font-size:16px!important}
html.tf2 #tfAuthToggle{color:#b4a8ff!important}
html.tf2 #tfAuthToggle:focus-visible,html.tf2 #tfAuthForgot:focus-visible,html.tf2 #tfAuthClose:focus-visible,html.tf2 #tfAuthBtn:focus-visible{outline-color:#a394ff!important}
@media (max-width:480px){ html.tf2 #tfAuthOverlay{align-items:flex-start!important} html.tf2 .tf2auth-hero{height:236px} }
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2auth-hero .ah-reel img{transition:none;transform:none} }
html.tf2 .tf2auth-hero .ah-reel img{object-position:center 28%}
@media (max-height:720px){ html.tf2 .tf2auth-hero{height:200px} html.tf2 .tf2auth-hero .ah-txt p{display:none} html.tf2 #tfAuthCard .tf-sub{margin-bottom:12px!important} html.tf2 #tfAuthCard .tf-in{margin-bottom:9px!important} }

/* ===== Sign-in showcase v2 — moving wall of real HD result clips (Tuvia msg 7564) ===== */
html.tf2 .tf2auth-hero{height:min(340px,42dvh);min-height:230px;background:#0c0b18}
html.tf2 .tf2auth-hero .ah-wall{position:absolute;top:-70px;bottom:-70px;inset-inline:-14%;display:flex;gap:8px;transform:rotate(-7deg);pointer-events:none}
html.tf2 .tf2auth-hero .ah-col{flex:1 1 0;overflow:hidden;position:relative}
html.tf2 .tf2auth-hero .ah-track{display:flex;flex-direction:column;gap:8px;animation:tf2ahUp 26s linear infinite;will-change:transform}
html.tf2 .tf2auth-hero .ah-c2 .ah-track{animation-name:tf2ahDown;animation-duration:32s}
html.tf2 .tf2auth-hero .ah-c3 .ah-track{animation-duration:22s}
html.tf2 .tf2auth-hero .ah-tile{position:relative;aspect-ratio:9/13;border-radius:16px;overflow:hidden;background:#1a1833;box-shadow:0 10px 26px -12px rgba(0,0,0,.9);border:1px solid rgba(255,255,255,.07)}
html.tf2 .tf2auth-hero .ah-tile video{width:100%;height:100%;object-fit:cover;display:block}
@keyframes tf2ahUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 4px))}}
@keyframes tf2ahDown{from{transform:translateY(calc(-50% - 4px))}to{transform:translateY(0)}}
html.tf2 .tf2auth-hero .ah-fade{background:radial-gradient(120% 70% at 50% 0%,rgba(12,11,24,0) 40%,rgba(12,11,24,.35) 75%),linear-gradient(180deg,rgba(12,11,24,.35) 0%,rgba(12,11,24,0) 22%,rgba(12,11,24,0) 42%,rgba(20,18,43,.88) 74%,#14122b 100%)}
html.tf2 .tf2auth-hero .ah-brand,html.tf2 .tf2auth-hero .ah-txt{z-index:2}
html.tf2 .tf2auth-hero .ah-txt b{font-size:1.42rem}
html.tf2 .tf2auth-hero .ah-txt li{background:rgba(20,18,43,.6);backdrop-filter:blur(8px)}
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2auth-hero .ah-track{animation:none} }
@media (max-height:720px){ html.tf2 .tf2auth-hero{height:210px;min-height:0} }
html.tf2 .tf2auth-hero .ah-wall{inset-inline:-18%;gap:7px}
html.tf2 .tf2auth-hero .ah-track{gap:7px}
html.tf2 .tf2auth-hero .ah-c4 .ah-track{animation-name:tf2ahDown;animation-duration:28s}
html.tf2 .tf2auth-hero .ah-tile{border-radius:13px}
@media (max-height:720px){ html.tf2 .tf2auth-hero .ah-fade{background:linear-gradient(180deg,rgba(12,11,24,.3) 0%,rgba(12,11,24,.15) 25%,rgba(20,18,43,.9) 62%,#14122b 100%)} }

/* ===== Sign-in v3 — cinematic single video, restrained (Tuvia msg 7575, research of top AI apps) ===== */
html.tf2 #tfAuthCard{background:#0b0a10!important;border-color:rgba(255,255,255,.08)!important}
html.tf2 #tfAuthCard::after{content:"";position:absolute;inset-inline:10%;top:min(360px,41dvh);height:220px;background:radial-gradient(closest-side,rgba(125,107,255,.16),rgba(125,107,255,0));pointer-events:none;z-index:0}
html.tf2 .tf2auth-hero{height:min(400px,45dvh);min-height:250px;background:#0b0a10}
html.tf2 .tf2auth-hero .ah-cine video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;opacity:0;transform:scale(1.05);transition:opacity 1.2s ease,transform 6s ease}
html.tf2 .tf2auth-hero .ah-cine video.on{opacity:1;transform:scale(1)}
html.tf2 .tf2auth-hero .ah-fade{background:linear-gradient(180deg,rgba(11,10,16,.45) 0%,rgba(11,10,16,0) 18%,rgba(11,10,16,0) 45%,rgba(11,10,16,.82) 78%,#0b0a10 100%)!important}
html.tf2 .tf2auth-hero .ah-brand{background:rgba(11,10,16,.45);border-color:rgba(255,255,255,.14)}
html.tf2 .tf2auth-hero .ah-brand b{color:#fff}
html.tf2 .tf2auth-hero .ah-tag{position:absolute;z-index:2;top:62px;inset-inline-start:14px;display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;background:rgba(11,10,16,.42);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.88);font:600 .7rem/1.2 'Heebo',system-ui,sans-serif;letter-spacing:.02em}
html.tf2 .tf2auth-hero .ah-tag i{width:6px;height:6px;border-radius:50%;background:#a394ff;box-shadow:0 0 10px #7d6bff}
html.tf2 .tf2auth-hero .ah-txt{bottom:6px;inset-inline:22px}
html.tf2 .tf2auth-hero .ah-txt b{font-size:clamp(1.55rem,6.6vw,1.95rem)!important;line-height:1.12;letter-spacing:-.02em;text-shadow:0 2px 24px rgba(0,0,0,.55)}
html.tf2 .tf2auth-hero .ah-txt p{display:block!important;margin:8px 0 0;color:rgba(255,255,255,.7);font-size:.9rem}
html.tf2 #tfAuthCard h3{font-size:17px!important;color:rgba(255,255,255,.92)}
html.tf2 #tfAuthBtn{background:#7d6bff!important;box-shadow:0 10px 28px -12px rgba(125,107,255,.9)!important;border-radius:14px!important}
html.tf2 #tfAuthCard input{border-radius:12px!important;background:rgba(255,255,255,.035)!important;border-color:rgba(255,255,255,.1)!important}
@media (max-height:720px){ html.tf2 .tf2auth-hero{height:230px;min-height:0} html.tf2 .tf2auth-hero .ah-txt p{display:none!important} html.tf2 #tfAuthCard::after{top:200px} }
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2auth-hero .ah-cine video{transition:none;transform:none} }

/* ===== Sign-in v4 — "your selfie -> what TimeFace made" story (Tuvia msg 7582/7585) ===== */
html.tf2 .tf2auth-hero .ah-story .ah-s{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
html.tf2 .tf2auth-hero .ah-story .ah-s.on{opacity:1}
html.tf2 .tf2auth-hero .ah-story .ah-s>video,html.tf2 .tf2auth-hero .ah-story .ah-s>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transform-origin:center 30%;transition:transform 5.5s ease-out}
html.tf2 .tf2auth-hero .ah-story .ah-s.on>video,html.tf2 .tf2auth-hero .ah-story .ah-s.on>img{transform:scale(1)}
html.tf2 .tf2auth-hero .ah-bars{position:absolute;z-index:3;top:8px;inset-inline:14px;display:flex;gap:4px}
html.tf2 .tf2auth-hero .ah-bars i{flex:1;height:2.5px;border-radius:2px;background:rgba(255,255,255,.25);overflow:hidden;position:relative}
html.tf2 .tf2auth-hero .ah-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:var(--o,left)}
html[dir=rtl].tf2 .tf2auth-hero .ah-bars i::after{--o:right}
html.tf2 .tf2auth-hero .ah-bars i.done::after{transform:scaleX(1)}
html.tf2 .tf2auth-hero .ah-bars i.run::after{animation:tf2ahBar 4.6s linear forwards}
@keyframes tf2ahBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.tf2 .tf2auth-hero .ah-brand{top:20px}
html.tf2 .tf2auth-hero .ah-pair{position:absolute;z-index:2;top:66px;inset-inline-start:14px;display:flex;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .6s ease .35s,transform .6s ease .35s}
html.tf2 .tf2auth-hero .ah-s.on .ah-pair{opacity:1;transform:none}
html.tf2 .tf2auth-hero .ah-me{position:relative;width:62px;height:80px;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.9);box-shadow:0 10px 24px rgba(0,0,0,.55);transform:rotate(-4deg)}
html.tf2 .tf2auth-hero .ah-me img{width:100%;height:100%;object-fit:cover;display:block}
html.tf2 .tf2auth-hero .ah-me em{position:absolute;inset-inline:0;bottom:0;padding:2px 0 3px;text-align:center;font:700 .6rem/1.2 'Heebo',system-ui,sans-serif;font-style:normal;color:#fff;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.7))}
html.tf2 .tf2auth-hero .ah-arr{font-style:normal;color:#fff;font-size:1.1rem;text-shadow:0 1px 8px rgba(0,0,0,.6)}
html.tf2 .tf2auth-hero .ah-kind{padding:6px 12px;border-radius:999px;background:rgba(125,107,255,.9);color:#fff;font:800 .74rem/1.2 'Heebo',system-ui,sans-serif;box-shadow:0 8px 20px -6px rgba(125,107,255,.9)}
html.tf2 #tfAuthClose{top:20px!important}
@media (max-height:720px){ html.tf2 .tf2auth-hero .ah-me{width:48px;height:62px} html.tf2 .tf2auth-hero .ah-pair{top:60px} }
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2auth-hero .ah-story .ah-s>video,html.tf2 .tf2auth-hero .ah-story .ah-s>img{transition:none;transform:none} }
@media (max-height:720px){ html.tf2 .tf2auth-hero{height:250px} html.tf2 .tf2auth-hero .ah-txt b{font-size:1.4rem!important} }

html.tf2 #tfAuthClose{z-index:5!important}

/* ===== Sign-in v5 — ONE screen: whole character (contain over its own blur) + headline + form (Tuvia msg 7597) ===== */
html.tf2 #tfAuthCard{display:flex!important;flex-direction:column!important;height:min(900px,calc(100dvh - 20px));overflow-y:auto!important}
html.tf2 .tf2auth-hero{flex:1 1 auto;height:auto!important;min-height:200px!important}
html.tf2 .tf2auth-hero .ah-story .ah-s>.ah-bg{position:absolute;inset:-30px;width:calc(100% + 60px);height:calc(100% + 60px);object-fit:cover;filter:blur(24px) saturate(1.25) brightness(.72);transform:none!important;transition:none!important}
html.tf2 .tf2auth-hero .ah-story .ah-s>.ah-fg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain!important;object-position:center bottom!important;transform:scale(1.03);transition:transform 5.5s ease-out;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
html.tf2 .tf2auth-hero .ah-story .ah-s.on>.ah-fg{transform:scale(1)}
html.tf2 .tf2auth-hero .ah-fade{background:linear-gradient(180deg,rgba(11,10,16,.5) 0%,rgba(11,10,16,0) 16%,rgba(11,10,16,0) 80%,#0b0a10 100%)!important}
html.tf2 .tf2auth-hero .ah-txt{display:none}
html.tf2 .tf2auth-hero .ah-pair{top:62px}
html.tf2 .tf2auth-hero .ah-me{width:64px;height:84px}
html.tf2 #tfAuthCard .ah-head{flex:0 0 auto;position:relative;z-index:1;text-align:center;padding:8px 22px 0;margin-top:-6px}
html.tf2 #tfAuthCard .ah-head b{display:block;font:900 1.32rem/1.18 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:#fff;letter-spacing:-.015em}
html.tf2 #tfAuthCard .ah-head p{margin:6px auto 0;max-width:340px;font:600 .8rem/1.4 'Heebo',system-ui,sans-serif;color:#c9c2ff}
html.tf2 #tfAuthCard .tf-auth-form{flex:0 0 auto!important;padding:10px 22px 16px!important;justify-content:flex-start!important}
html.tf2 #tfAuthCard h3{display:none!important}
html.tf2 #tfAuthCard .tf-sub{margin:0 0 10px!important;font-size:12.5px!important}
html.tf2 #tfAuthCard input{padding-top:11px!important;padding-bottom:11px!important}
html.tf2 #tfAuthCard .tf-in{margin-bottom:8px!important}
html.tf2 #tfAuthBtn{padding:13px!important}
html.tf2 #tfAuthCard::after{display:none}
@media (max-height:700px){ html.tf2 #tfAuthCard .tf-sub{display:none!important} html.tf2 #tfAuthCard .ah-head b{font-size:1.15rem} html.tf2 #tfAuthCard .ah-head p{font-size:.74rem;margin-top:3px} html.tf2 #tfAuthCard input{padding-top:9px!important;padding-bottom:9px!important} html.tf2 .tf2auth-hero .ah-me{width:50px;height:66px} html.tf2 .tf2auth-hero .ah-pair{top:56px} }

/* ===== Create — top banner that rotates by itself (Tuvia msg 7607; research: Higgsfield/Kling/Hailuo) ===== */
html.tf2 .tf2c-page{--hc:#7d6bff;background:radial-gradient(120% 50% at 50% 0%,color-mix(in srgb,var(--hc) 22%,transparent),transparent 70%),var(--tf2-bg,#0b0a14);transition:background .6s ease}
html.tf2 .tf2c-hero{position:relative;width:100%;aspect-ratio:6/5;max-height:46dvh;border-radius:22px;overflow:hidden;margin:4px 0 16px;background:#111;box-shadow:0 22px 50px -22px var(--hc),0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .6s ease}
html.tf2 .tf2c-hero .hz-s{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;opacity:0;transition:opacity .6s ease;text-align:start;display:block;width:100%;height:100%}
html.tf2 .tf2c-hero .hz-s.on{opacity:1;z-index:1}
html.tf2 .tf2c-hero .hz-s>img,html.tf2 .tf2c-hero .hz-s>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;transform:scale(1);transition:transform 5.5s ease-out}
html.tf2 .tf2c-hero .hz-s.on>img{transform:scale(1.06)}
html.tf2 .tf2c-hero .hz-fade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 45%,rgba(0,0,0,.82) 100%)}
html.tf2 .tf2c-hero .hz-tx{position:absolute;inset-inline:16px;bottom:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
html.tf2 .tf2c-hero .hz-tx em{font-style:normal;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:var(--hc);color:#fff;font:800 .7rem/1.2 'Heebo',system-ui,sans-serif;box-shadow:0 6px 16px -6px var(--hc)}
html.tf2 .tf2c-hero .hz-tx em i svg{width:12px;height:12px;stroke:#fff;fill:none;stroke-width:2;display:block}
html.tf2 .tf2c-hero .hz-tx b{color:#fff;font:900 1.45rem/1.15 'Heebo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:-.015em;text-shadow:0 2px 18px rgba(0,0,0,.5);max-width:92%}
html.tf2 .tf2c-hero .hz-cta{margin-top:4px;padding:10px 16px;border-radius:999px;background:#fff;color:#111;font:800 .82rem/1.1 'Heebo',system-ui,sans-serif;box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
html.tf2 .tf2c-hero .hz-bars{position:absolute;z-index:3;top:10px;inset-inline:14px;display:flex;gap:4px}
html.tf2 .tf2c-hero .hz-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);position:relative;overflow:hidden}
html.tf2 .tf2c-hero .hz-bars i::after{content:"";position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}
html[dir=rtl].tf2 .tf2c-hero .hz-bars i::after,html.tf2 .tf2c-page[dir=rtl] .tf2c-hero .hz-bars i::after{transform-origin:right}
html.tf2 .tf2c-hero .hz-bars i.done::after{transform:scaleX(1)}
html.tf2 .tf2c-hero .hz-bars i.run::after{animation:tf2ahBar 5s linear forwards}
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2c-hero .hz-s>img{transition:none;transform:none} }

/* ===== Create result — share to socials (Tuvia msg 7619) ===== */
html.tf2 .tf2c-share{margin:14px 0 6px;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(125,107,255,.14),rgba(255,0,80,.08));border:1px solid rgba(163,148,255,.25)}
html.tf2 .tf2c-share .sh-h b{display:block;font:900 1.02rem 'Heebo',system-ui,sans-serif;color:#fff}
html.tf2 .tf2c-share .sh-h s{display:block;text-decoration:none;margin-top:3px;font-size:.76rem;line-height:1.4;color:#c9c2ff}
html.tf2 .tf2c-share .sh-row{margin-top:12px;display:flex;gap:10px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
html.tf2 .tf2c-share .sh-row::-webkit-scrollbar{display:none}
html.tf2 .tf2c-share .sh-b{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;width:62px;padding:0;border:0;background:none;cursor:pointer;color:#e9e6ff;font:700 .64rem/1.2 'Heebo',system-ui,sans-serif}
html.tf2 .sh-i,html.tf2 .tf2share .sh-ic{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;box-shadow:0 8px 18px -8px rgba(0,0,0,.8)}
html.tf2 .sh-i svg,html.tf2 .tf2share .sh-ic svg{width:26px;height:26px}
html.tf2 .sh-tt .sh-i,html.tf2 .tf2share .sh-tt{background:#000;box-shadow:inset 0 0 0 2px #25f4ee,0 0 0 2px #fe2c55}
html.tf2 .sh-ig .sh-i,html.tf2 .tf2share .sh-ig{background:radial-gradient(circle at 30% 107%,#fdf497 0,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
html.tf2 .sh-wa .sh-i,html.tf2 .tf2share .sh-wa{background:#25d366}
html.tf2 .sh-fb .sh-i,html.tf2 .tf2share .sh-fb{background:#1877f2}
html.tf2 .sh-yt .sh-i,html.tf2 .tf2share .sh-yt{background:#ff0033}
html.tf2 .sh-sc .sh-i,html.tf2 .tf2share .sh-sc{background:#fffc00}
html.tf2 .sh-more .sh-i,html.tf2 .tf2share .sh-more{background:rgba(255,255,255,.12)}
html.tf2 .sh-tt .sh-i{order:0}
html.tf2 .tf2share{position:fixed;inset:0;z-index:2147483000;background:rgba(5,5,14,.72);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:16px}
html.tf2 .tf2share .sh-card{width:100%;max-width:420px;background:#14122b;border:1px solid rgba(163,148,255,.3);border-radius:22px;padding:22px 20px 18px;text-align:center;color:#fff;box-shadow:0 30px 80px rgba(0,0,0,.7)}
html.tf2 .tf2share .sh-ic{margin:0 auto 10px}
html.tf2 .tf2share b{display:block;font:900 1.1rem 'Heebo',system-ui,sans-serif}
html.tf2 .tf2share p{margin:8px 0 10px;font-size:.88rem;line-height:1.5;color:#d6d2f5}
html.tf2 .tf2share code{display:inline-block;padding:4px 10px;border-radius:8px;background:rgba(125,107,255,.2);color:#cfc7ff;font:700 .85rem ui-monospace,monospace}
html.tf2 .tf2share .sh-ok{display:block;width:100%;margin-top:14px;padding:13px;border:0;border-radius:14px;background:#7d6bff;color:#fff;font:800 1rem 'Heebo',system-ui,sans-serif;cursor:pointer}

/* ===== Create — add from several places (Tuvia msg 7630) + join explainer ===== */
html.tf2 .tf2src{position:fixed;inset:0;z-index:2147483000;background:rgba(5,5,14,.72);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center}
html.tf2 .tf2src .sr-card{width:100%;max-width:480px;max-height:86dvh;overflow-y:auto;background:#14122b;border:1px solid rgba(163,148,255,.3);border-radius:24px 24px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));color:#fff;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
html.tf2 .tf2src .sr-grab{width:40px;height:4px;border-radius:2px;background:rgba(255,255,255,.25);margin:0 auto 12px}
html.tf2 .tf2src .sr-t{display:block;font:900 1.15rem 'Heebo',system-ui,sans-serif}
html.tf2 .tf2src .sr-s{display:block;text-decoration:none;margin:4px 0 14px;font-size:.8rem;color:#c9c2ff}
html.tf2 .tf2src .sr-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html.tf2 .tf2src .sr-opts button{display:flex;align-items:center;gap:10px;padding:14px 12px;border-radius:16px;border:1px solid rgba(163,148,255,.3);background:rgba(125,107,255,.12);color:#fff;font:800 .86rem/1.25 'Heebo',system-ui,sans-serif;cursor:pointer;text-align:start}
html.tf2 .tf2src .sr-opts span{flex:0 0 auto;width:34px;height:34px;border-radius:11px;background:#7d6bff;display:grid;place-items:center}
html.tf2 .tf2src .sr-opts svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}
html.tf2 .tf2src .sr-mine-h{margin:16px 0 8px;font:900 .95rem 'Heebo',system-ui,sans-serif}
html.tf2 .tf2src .sr-mine-h i{font-style:normal;font-weight:600;font-size:.74rem;color:#a9a3d6;margin-inline-start:6px}
html.tf2 .tf2src .sr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
html.tf2 .tf2src .sr-it{position:relative;aspect-ratio:3/4;border-radius:12px;overflow:hidden;border:2px solid transparent;padding:0;background:#222;cursor:pointer}
html.tf2 .tf2src .sr-it img,html.tf2 .tf2src .sr-it video{width:100%;height:100%;object-fit:cover;display:block}
html.tf2 .tf2src .sr-it.on{border-color:#a394ff;box-shadow:0 0 0 2px rgba(125,107,255,.5)}
html.tf2 .tf2src .sr-ck{position:absolute;top:6px;inset-inline-end:6px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:rgba(0,0,0,.35);color:#fff;font:900 .75rem/20px 'Heebo',system-ui,sans-serif;text-align:center}
html.tf2 .tf2src .sr-it.on .sr-ck{background:#7d6bff}
html.tf2 .tf2src .sr-add{position:sticky;bottom:0;display:block;width:100%;margin-top:14px;padding:14px;border:0;border-radius:14px;background:#7d6bff;color:#fff;font:800 1rem 'Heebo',system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 26px -10px rgba(125,107,255,.9)}
html.tf2 .tf2src .sr-add[disabled]{opacity:.45;cursor:default}
html.tf2 .tf2c-jx{display:flex;align-items:center;justify-content:center;gap:6px;margin:-2px 0 14px}
html.tf2 .tf2c-jx>span{width:42px;height:56px;border-radius:9px;background-size:cover;background-position:center 25%;display:grid;place-items:center;color:#fff;font:900 .95rem 'Heebo',system-ui,sans-serif;text-shadow:0 1px 6px rgba(0,0,0,.8);box-shadow:0 0 0 1px rgba(255,255,255,.15)}
html.tf2 .tf2c-jx>i{font-style:normal;font:900 1rem 'Heebo',system-ui,sans-serif;color:#a394ff}
html.tf2 .tf2c-jx>span.long{width:96px;display:flex;gap:0;overflow:hidden;box-shadow:0 0 0 2px #7d6bff}
html.tf2 .tf2c-jx>span.long em{flex:1;height:100%;background-size:cover;background-position:center 25%}

/* ===== Music — cover-flow "now playing" reel (Tuvia msg 7650) ===== */
html.tf2 .tf2flow{--hc:#7d6bff;position:relative;margin:4px 0 18px;padding:18px 0 16px;border-radius:26px;overflow:hidden;background:#0b0a14;box-shadow:0 24px 60px -26px var(--hc),0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .6s ease}
html.tf2 .tf2flow .fl-bg{position:absolute;inset:-40px;z-index:0}
html.tf2 .tf2flow .fl-bg img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.4) brightness(.45);transform:scale(1.2)}
html.tf2 .tf2flow::after{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(80% 60% at 50% 35%,transparent,rgba(8,7,16,.75)),linear-gradient(180deg,transparent 60%,rgba(8,7,16,.85))}
html.tf2 .tf2flow .fl-stage{position:relative;z-index:1;height:min(300px,40dvh);perspective:900px;display:flex;justify-content:center;align-items:center}
html.tf2 .tf2flow .fl-card{position:absolute;width:52%;max-width:220px;aspect-ratio:3/4;padding:0;border:0;border-radius:20px;overflow:hidden;background:#111;cursor:pointer;transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .6s ease;box-shadow:0 18px 40px -14px rgba(0,0,0,.9)}
html.tf2 .tf2flow .fl-card video{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
html.tf2 .tf2flow .fl-card .fl-sh{position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.12),transparent 30%,transparent 70%,rgba(0,0,0,.45));pointer-events:none}
html.tf2 .tf2flow .fl-card:not(.on) .fl-sh{background:rgba(8,7,16,.45)}
html.tf2 .tf2flow .fl-card.on{box-shadow:0 0 0 2px rgba(255,255,255,.85),0 22px 50px -12px var(--hc)}
html.tf2 .tf2flow .fl-now{position:relative;z-index:1;display:flex;align-items:center;gap:12px;margin:14px 16px 0;padding:10px 14px;border-radius:18px;background:rgba(255,255,255,.08);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.12)}
html.tf2 .tf2flow .fl-vinyl{flex:0 0 auto;width:46px;height:46px;border-radius:50%;overflow:hidden;position:relative;background:#000;box-shadow:0 0 0 3px #111,0 0 0 4px rgba(255,255,255,.2);animation:tf2spin 6s linear infinite}
html.tf2 .tf2flow .fl-vinyl img{width:100%;height:100%;object-fit:cover}
html.tf2 .tf2flow .fl-vinyl::after{content:"";position:absolute;inset:40%;border-radius:50%;background:#0b0a14;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
@keyframes tf2spin{to{transform:rotate(360deg)}}
html.tf2 .tf2flow .fl-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
html.tf2 .tf2flow .fl-meta s{text-decoration:none;font:700 .66rem/1.2 'Heebo',system-ui,sans-serif;color:var(--hc);letter-spacing:.04em;text-transform:uppercase;filter:brightness(1.3)}
html.tf2 .tf2flow .fl-title{font:900 1.02rem/1.2 'Heebo',system-ui,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tf2 .tf2flow .fl-prog{height:3px;border-radius:2px;background:rgba(255,255,255,.2);overflow:hidden}
html.tf2 .tf2flow .fl-prog i{display:block;height:100%;width:100%;background:var(--hc);transform-origin:left;animation:tf2prog 5.2s linear forwards;filter:brightness(1.3)}
html[dir=rtl].tf2 .tf2flow .fl-prog i{transform-origin:right}
@keyframes tf2prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
html.tf2 .tf2flow .fl-eq{flex:0 0 auto;display:flex;align-items:flex-end;gap:3px;height:26px}
html.tf2 .tf2flow .fl-eq i{width:4px;border-radius:2px;background:var(--hc);filter:brightness(1.4);animation:tf2eq 1s ease-in-out infinite}
html.tf2 .tf2flow .fl-eq i:nth-child(2){animation-delay:-.4s}html.tf2 .tf2flow .fl-eq i:nth-child(3){animation-delay:-.7s}html.tf2 .tf2flow .fl-eq i:nth-child(4){animation-delay:-.2s}html.tf2 .tf2flow .fl-eq i:nth-child(5){animation-delay:-.55s}
@keyframes tf2eq{0%,100%{height:20%}50%{height:100%}}
html.tf2 .tf2flow .fl-cta{position:relative;z-index:1;display:block;width:calc(100% - 32px);margin:12px 16px 0;padding:13px;border:0;border-radius:14px;background:#fff;color:#111;font:900 .95rem 'Heebo',system-ui,sans-serif;cursor:pointer;box-shadow:0 10px 26px -10px var(--hc)}
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2flow .fl-vinyl,html.tf2 .tf2flow .fl-eq i{animation:none} }

/* ===== Music v3 — moving wall of singer tiles (Tuvia msg 7655) ===== */
html.tf2 .tf2mwall{position:relative;height:min(360px,46dvh);margin:4px 0 18px;border-radius:26px;overflow:hidden;background:#0b0a14;box-shadow:0 0 0 1px rgba(255,255,255,.07),0 24px 60px -30px rgba(125,107,255,.9)}
html.tf2 .tf2mwall .mw-grid{position:absolute;top:-70px;bottom:-70px;inset-inline:-12%;display:flex;gap:8px;transform:rotate(-6deg)}
html.tf2 .tf2mwall .mw-col{flex:1 1 0;overflow:hidden}
html.tf2 .tf2mwall .mw-track{display:flex;flex-direction:column;gap:8px;animation:tf2ahUp 24s linear infinite;will-change:transform}
html.tf2 .tf2mwall .mw-c2 .mw-track{animation-name:tf2ahDown;animation-duration:30s}
html.tf2 .tf2mwall .mw-c3 .mw-track{animation-duration:20s}
html.tf2 .tf2mwall .mw-t{position:relative;display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;border-radius:16px;overflow:hidden;background:#151326;cursor:pointer;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 12px 26px -12px rgba(0,0,0,.9)}
html.tf2 .tf2mwall .mw-t video{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}
html.tf2 .tf2mwall .mw-l{position:absolute;inset-inline:6px;bottom:6px;padding:4px 8px;border-radius:999px;background:color-mix(in srgb,var(--tc) 82%,#000);color:#fff;font:800 .64rem/1.2 'Heebo',system-ui,sans-serif;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 6px 14px -6px var(--tc)}
html.tf2 .tf2mwall .mw-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(11,10,20,.55) 0%,rgba(11,10,20,0) 22%,rgba(11,10,20,0) 70%,rgba(11,10,20,.92) 100%)}
html.tf2 .tf2mwall .mw-cap{position:absolute;inset-inline:16px;bottom:14px;text-align:center;pointer-events:none}
html.tf2 .tf2mwall .mw-cap b{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(11,10,20,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.14);color:#fff;font:800 .82rem/1.3 'Heebo',system-ui,sans-serif}
@media (prefers-reduced-motion:reduce){ html.tf2 .tf2mwall .mw-track{animation:none} }
html.tf2 .tf2mwall .mw-grid{inset-inline:-10%;gap:7px}
html.tf2 .tf2mwall .mw-track{gap:7px}
html.tf2 .tf2mwall .mw-c4 .mw-track{animation-name:tf2ahDown;animation-duration:26s}
html.tf2 .tf2mwall .mw-t{border-radius:13px}
html.tf2 .tf2mwall .mw-l{font-size:.56rem;padding:3px 6px;inset-inline:4px;bottom:4px}
html.tf2 .tf2src .sr-empty{grid-column:1/-1;padding:22px 10px;text-align:center;color:#c9c2ff;font:700 .85rem/1.5 'Heebo',system-ui,sans-serif}
html.tf2 .tf2c-go{box-shadow:0 10px 26px -12px rgba(125,107,255,.9),0 -16px 22px 8px rgba(11,10,20,.92)!important} /* floating Create bar no longer shows chips/text sliding underneath it */

/* ===== msg 7669: honest "Soon" labels (features without a backend) + receipts-by-email ===== */
html.tf2 .tf2soon{display:inline-block;margin-inline-start:8px;padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#d9d4ff;font:800 .62rem/1.4 'Heebo',system-ui,sans-serif;font-style:normal;vertical-align:middle}
html.tf2 .tf2c-choice.soon{opacity:.62}
html.tf2 .tf2c-choice.soon img{filter:grayscale(.6)}
html.tf2 .tf2c-next button.soon{opacity:.55;position:relative}
html.tf2 .tf2c-next button.soon .tf2soon{position:absolute;top:-8px;inset-inline-end:-4px;margin:0;font-size:.55rem;padding:1px 6px;background:#2a2550}
html.tf2 .tf2inv-mail{display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:16px;background:rgba(125,107,255,.1);border:1px solid rgba(163,148,255,.28)}
html.tf2 .tf2inv-mail .im-ic{font-size:1.6rem;line-height:1}
html.tf2 .tf2inv-mail b{display:block;color:#fff;font:800 .95rem/1.45 'Heebo',system-ui,sans-serif}
html.tf2 .tf2inv-mail s{display:block;text-decoration:none;margin-top:4px;color:#c9c2ff;font:600 .82rem/1.45 'Heebo',system-ui,sans-serif}

/* ===== msg 7669: desktop — create screens use the width (2 columns), not a narrow phone column ===== */
@media (min-width:1100px){
  html.tf2 #tf2create .tf2c-wrap{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:32px;align-items:start}
  html.tf2 #tf2create .tf2c-wrap>*{grid-column:1}
  html.tf2 #tf2create .tf2c-wrap>.tf2c-hero{grid-column:1/-1;aspect-ratio:auto;height:min(420px,48dvh);max-height:none}
  html.tf2 #tf2create .tf2c-wrap>.tf2c-gal{grid-column:2;grid-row:2/span 30;margin-top:0}
  html.tf2 #tf2create .tf2c-wrap>.tf2c-res{grid-column:1/-1;max-width:860px;justify-self:center;width:100%}
  html.tf2 #tf2create .tf2c-gal .g-grid{grid-template-columns:repeat(3,1fr)}
  html.tf2 #tf2create .tf2c-go{position:relative;bottom:auto}
}
@media (min-width:1100px){ html.tf2 #tf2create .tf2c-hero .hz-s>img,html.tf2 #tf2create .tf2c-hero .hz-s>video{object-position:center 38%} html.tf2 #tf2create .tf2c-wrap>.tf2c-hero{height:min(380px,44dvh)} }

/* ===== Billing v8 — calm Overview (Tuvia msg 7672) ===== */
html.tf2 .tf2ov-plan{margin:4px 0 16px;padding:16px;border-radius:20px;background:linear-gradient(160deg,rgba(125,107,255,.16),rgba(20,18,43,.6));border:1px solid rgba(163,148,255,.28)}
html.tf2 .tf2ov-plan .op-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
html.tf2 .tf2ov-plan s,html.tf2 .tf2ov-plan .op-rows s{display:block;text-decoration:none;color:#b9b2e8;font:700 .74rem/1.3 'Heebo',system-ui,sans-serif}
html.tf2 .tf2ov-plan .op-top b{display:block;margin-top:2px;color:#fff;font:900 1.35rem/1.2 'Heebo',system-ui,sans-serif}
html.tf2 .tf2ov-plan .op-rows{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
html.tf2 .tf2ov-plan .op-rows>div{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05)}
html.tf2 .tf2ov-plan .op-rows b{display:block;margin-top:3px;color:#fff;font:800 .95rem/1.3 'Heebo',system-ui,sans-serif}
html.tf2 .tf2ov-plan .op-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:14px}
html.tf2 .tf2ov-plan .op-acts .tf2b-btn{flex:1 1 auto;margin:0}
html.tf2 .tf2b-link{border:0;background:none;color:#b4a8ff;font:800 .85rem 'Heebo',system-ui,sans-serif;cursor:pointer;padding:6px 4px}
html.tf2 .tf2b-link.r{float:inline-end;font-size:.78rem;padding:0}
html.tf2 .tf2ov-bals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
html.tf2 .tf2ov-bals .ob-it{padding:12px 8px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center}
html.tf2 .tf2ov-bals .ob-it span{font-size:1.1rem}
html.tf2 .tf2ov-bals .ob-it b{display:block;color:#fff;font:900 1.3rem/1.2 'Heebo',system-ui,sans-serif;margin-top:4px}
html.tf2 .tf2ov-bals .ob-it s{display:block;text-decoration:none;color:#b9b2e8;font:700 .7rem/1.3 'Heebo',system-ui,sans-serif}
html.tf2 .tf2ov-incl{list-style:none;margin:0;padding:0;display:grid;gap:6px}
html.tf2 .tf2ov-incl li{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);color:#e9e6ff;font:700 .86rem/1.4 'Heebo',system-ui,sans-serif}
html.tf2 .tf2ov-incl li.no{color:#c9c2ff;opacity:.85}
html.tf2 .tf2ov-buy{display:grid;gap:8px}
html.tf2 .tf2ov-buy button{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.03);color:#fff;font:800 .9rem 'Heebo',system-ui,sans-serif;cursor:pointer;text-align:start}
html.tf2 .tf2ov-buy button b{flex:1}
html.tf2 .tf2ov-buy button i{font-style:normal;color:#b4a8ff;font-size:1.1rem}
html.tf2 .tf2ov-costs{display:grid;gap:10px}
html.tf2 .tf2ov-costs .oc-w{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08)}
html.tf2 .tf2ov-costs .oc-w>b{display:block;color:#fff;font:800 .88rem 'Heebo',system-ui,sans-serif;margin-bottom:6px}
html.tf2 .tf2ov-costs .oc-r{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-top:1px solid rgba(255,255,255,.06);color:#d6d2f5;font:600 .82rem 'Heebo',system-ui,sans-serif}
html.tf2 .tf2ov-costs .oc-r b{color:#fff;font-weight:900}
html.tf2 .tf2h-row .h-side{text-align:end;flex:0 0 auto}
html.tf2 .tf2h-row .h-side b{display:block;color:#fff;font:800 .88rem 'Heebo',system-ui,sans-serif}
html.tf2 .tf2h-row .h-side .h-mail{display:block;text-decoration:none;color:#9fd8b4;font:700 .7rem 'Heebo',system-ui,sans-serif;margin-top:2px}
@media (min-width:900px){ html.tf2 .tf2ov-costs{grid-template-columns:repeat(3,1fr)} html.tf2 .tf2ov-buy{grid-template-columns:repeat(3,1fr)} }
/* Billing v8 desktop: Overview / History use the full width in two balanced columns (no empty half) */
@media (min-width:1100px){
  html.tf2 .tf2b-scroll.tf2s.t-overview,html.tf2 .tf2b-scroll.tf2s.t-invoices{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;row-gap:4px}
  html.tf2 .tf2b-scroll.tf2s.t-overview > *,html.tf2 .tf2b-scroll.tf2s.t-invoices > *{grid-column:auto}
  html.tf2 .tf2b-scroll.tf2s.t-overview > .tf2b-mockban,html.tf2 .tf2b-scroll.tf2s.t-overview > .tf2b-note,html.tf2 .tf2b-scroll.tf2s.t-overview > .tf2lf,
  html.tf2 .tf2b-scroll.tf2s.t-invoices > .tf2b-note,html.tf2 .tf2b-scroll.tf2s.t-invoices > .tf2lf{grid-column:1 / -1}
  html.tf2 .tf2b-scroll.tf2s.t-overview > .tf2ov-plan{grid-row:span 2;align-self:stretch}
}
@media (min-width:1100px){ html.tf2 .tf2b-scroll.tf2s.t-overview > .tf2s-sec:has(.tf2ov-costs){grid-column:1 / -1} }

/* bug 8 (pre-prod QA): legacy panels opened from the new Home / Profile / Help (notifications, support chat,
   guides lightbox) rendered BEHIND #tf2home (z 9998) → "tap does nothing". Lift them above the tf2 shell. */
html.tf2 #tfActWrap{z-index:10060 !important}
html.tf2 #tfActToast{z-index:10061 !important}
html.tf2 .tf-support-panel{z-index:10060 !important}
html.tf2 .tf-xp-lb{z-index:10060 !important}