/* SF24 Test Thank-You Page — premium order-confirmation matching cart/checkout DNA */

:root {
  --tty-ac: #7c3aed; --tty-ac2: #f58529;
  --tty-ag: rgba(124,58,237,.1);
  --tty-bg: #faf9f5; --tty-bd: #e7e7eb;
  --tty-tx: #1a1033; --tty-ts: #6b7280; --tty-tm: #9ca3af;
  --tty-fh: 'Rubik','Helvetica Neue',Arial,sans-serif;
  --tty-success: #10b981; --tty-success-d: #059669;
  --tty-final: #c2410c;
}

.sf24-tty-wrap { max-width:1100px; margin:0 auto; padding:24px 22px 60px; font-family:'Nunito',-apple-system,'Helvetica Neue',Arial,sans-serif; color:var(--tty-tx); position:relative; }

/* ── Confetti ── */
.sf24-tty-confetti { position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; }
.sf24-tty-confetti-piece { position:absolute; top:-20px; width:9px; height:14px; opacity:.85; border-radius:1.5px; animation:sf24-tty-confetti-fall linear forwards; }
@keyframes sf24-tty-confetti-fall { 0% { transform:translateY(-20px) rotate(0deg); opacity:1; } 100% { transform:translateY(110vh) rotate(720deg); opacity:0; } }
@media (prefers-reduced-motion: reduce) { .sf24-tty-confetti { display:none; } }

/* ── HERO ── */
.sf24-tty-hero { position:relative; text-align:center; padding:46px 24px 36px; margin-bottom:28px; background:linear-gradient(135deg,#fff7ed 0%,#fff 35%,#fefce8 100%); border:1px solid rgba(245,133,41,.2); border-radius:24px; overflow:hidden; box-shadow:0 16px 44px -18px rgba(245,133,41,.32), inset 0 0 0 1px rgba(255,255,255,.7); }
.sf24-tty-hero-glow { position:absolute; top:-50%; left:50%; transform:translateX(-50%); width:120%; height:200%; background:radial-gradient(ellipse at center, rgba(245,133,41,.16), transparent 55%); pointer-events:none; z-index:0; }
.sf24-tty-hero > * { position:relative; z-index:1; }

.sf24-tty-hero-check { width:88px; height:88px; margin:0 auto 18px; }
.sf24-tty-hero-check svg { width:100%; height:100%; }
.sf24-tty-check-bg { fill:none; stroke:var(--tty-success); stroke-width:3.5; stroke-dasharray:226; stroke-dashoffset:226; animation:sf24-tty-check-circle .55s cubic-bezier(.5,0,.2,1) .15s forwards; }
.sf24-tty-check-mark { fill:none; stroke:var(--tty-success); stroke-width:5.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:sf24-tty-check-mark .35s cubic-bezier(.5,0,.2,1) .65s forwards; }
@keyframes sf24-tty-check-circle { to { stroke-dashoffset:0; } }
@keyframes sf24-tty-check-mark { to { stroke-dashoffset:0; } }

.sf24-tty-hero-title { font-family:var(--tty-fh); font-size:34px; font-weight:900; letter-spacing:-.025em; line-height:1.1; margin:0 0 10px; color:var(--tty-tx); }
.sf24-tty-hero-sub { font-size:15.5px; color:var(--tty-ts); margin:0 0 22px; line-height:1.5; max-width:520px; margin-left:auto; margin-right:auto; }

.sf24-tty-hero-meta { display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-bottom:18px; }
.sf24-tty-meta-pill { display:inline-flex; align-items:center; gap:8px; padding:9px 14px 9px 12px; background:rgba(255,255,255,.85); border:1px solid rgba(245,133,41,.22); border-radius:12px; font-size:13px; backdrop-filter:blur(4px); }
.sf24-tty-meta-label { font-size:10px; font-weight:800; color:var(--tty-tm); letter-spacing:.08em; text-transform:uppercase; }
.sf24-tty-meta-pill strong { font-family:var(--tty-fh); font-weight:800; color:var(--tty-tx); font-variant-numeric:tabular-nums; }
.sf24-tty-meta-total { color:var(--tty-final) !important; font-size:15px !important; }
.sf24-tty-meta-pill--mute { background:rgba(255,255,255,.55); }

.sf24-tty-hero-receipt { font-size:13px; color:var(--tty-ts); margin:0; }
.sf24-tty-hero-receipt strong { color:var(--tty-tx); font-weight:700; }

@media (max-width:640px) {
  .sf24-tty-hero { padding:36px 18px 28px; border-radius:18px; }
  .sf24-tty-hero-check { width:70px; height:70px; margin-bottom:14px; }
  .sf24-tty-hero-title { font-size:24px; }
  .sf24-tty-hero-sub { font-size:14px; }
  .sf24-tty-meta-pill { font-size:12.5px; padding:8px 12px 8px 10px; }
}

/* ── Layout ── */
.sf24-tty-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
@media (max-width:920px) { .sf24-tty-layout { grid-template-columns:1fr; gap:18px; } }
.sf24-tty-main { display:flex; flex-direction:column; gap:18px; min-width:0; }
.sf24-tty-side { display:flex; flex-direction:column; gap:14px; position:sticky; top:24px; }
@media (max-width:920px) { .sf24-tty-side { position:static; } }

/* ── Card base ── */
.sf24-tty-card { background:#fff; border:1px solid var(--tty-bd); border-radius:18px; padding:22px 22px 20px; box-shadow:0 4px 14px -8px rgba(15,15,17,.08); }
.sf24-tty-card-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.sf24-tty-card-title { font-family:var(--tty-fh); margin:0; font-size:17px; font-weight:900; letter-spacing:-.015em; color:var(--tty-tx); }
.sf24-tty-card-meta { font-size:12px; color:var(--tty-tm); }
.sf24-tty-card-sub { font-size:13px; color:var(--tty-ts); margin:0 0 14px; line-height:1.5; }

/* ── Steps timeline ── */
.sf24-tty-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; position:relative; }
.sf24-tty-steps::before { content:''; position:absolute; left:13px; top:14px; bottom:14px; width:2px; background:var(--tty-bd); border-radius:2px; }
.sf24-tty-step { display:flex; align-items:flex-start; gap:14px; position:relative; }
.sf24-tty-step-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:#fff; border:2px solid var(--tty-bd); color:var(--tty-tm); flex-shrink:0; position:relative; z-index:1; transition:all .25s; }
.sf24-tty-step.is-done .sf24-tty-step-icon { background:linear-gradient(135deg, var(--tty-success), var(--tty-success-d)); border-color:var(--tty-success-d); color:#fff; box-shadow:0 4px 12px -3px rgba(16,185,129,.4); }
.sf24-tty-step.is-active .sf24-tty-step-icon { background:linear-gradient(135deg, var(--tty-ac), #6d28d9); border-color:#6d28d9; color:#fff; box-shadow:0 4px 14px -3px rgba(124,58,237,.5); animation:sf24-tty-step-pulse 2.2s ease-in-out infinite; }
@keyframes sf24-tty-step-pulse { 0%,100% { box-shadow:0 4px 14px -3px rgba(124,58,237,.5), 0 0 0 0 rgba(124,58,237,.4); } 70% { box-shadow:0 4px 14px -3px rgba(124,58,237,.5), 0 0 0 8px rgba(124,58,237,0); } }
.sf24-tty-step-spin svg { animation:sf24-tty-spin 1.4s linear infinite; }
@keyframes sf24-tty-spin { to { transform:rotate(360deg); } }
.sf24-tty-step-body { display:flex; flex-direction:column; gap:3px; padding-top:3px; }
.sf24-tty-step-body strong { font-family:var(--tty-fh); font-size:14px; font-weight:800; color:var(--tty-tx); display:inline-flex; align-items:center; gap:8px; }
.sf24-tty-step.is-done .sf24-tty-step-body strong { color:var(--tty-success-d); }
.sf24-tty-step-body span { font-size:12.5px; color:var(--tty-ts); line-height:1.45; }
.sf24-tty-step-live { display:inline-flex; align-items:center; padding:2px 7px; background:#fee2e2; color:#b91c1c; font-size:9.5px; font-weight:900; letter-spacing:.08em; border-radius:5px; animation:sf24-tty-live-blink 1.4s ease-in-out infinite; }
@keyframes sf24-tty-live-blink { 0%,100% { opacity:1; } 50% { opacity:.5; } }

/* ── Items list ── */
.sf24-tty-items { list-style:none; margin:0 0 14px; padding:0; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--tty-bd); padding-bottom:14px; }
.sf24-tty-item { display:grid; grid-template-columns:54px 1fr auto; gap:14px; align-items:center; }
.sf24-tty-item-img { position:relative; width:54px; height:54px; border-radius:12px; overflow:hidden; background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(245,133,41,.04)); padding:6px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.sf24-tty-item-img img { width:100%; height:100%; object-fit:contain; }
.sf24-tty-item-qty { position:absolute; top:-5px; right:-5px; min-width:22px; height:22px; padding:0 6px; background:#1a1033; color:#fff; border-radius:999px; font-family:var(--tty-fh); font-size:11px; font-weight:900; line-height:22px; text-align:center; box-shadow:0 2px 6px rgba(0,0,0,.2); border:2px solid #fff; }
.sf24-tty-item-body { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sf24-tty-item-name { font-family:var(--tty-fh); font-size:14px; font-weight:700; line-height:1.3; color:var(--tty-tx) !important; text-decoration:none !important; letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf24-tty-item-name:hover { color:var(--tty-ac) !important; }
.sf24-tty-item-link { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; background:var(--tty-ag); border-radius:6px; color:var(--tty-ac); font-size:11px; font-weight:600; max-width:fit-content; }
.sf24-tty-item-link span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.sf24-tty-item-price { font-family:var(--tty-fh); font-size:14.5px; font-weight:800; color:var(--tty-tx); font-variant-numeric:tabular-nums; }

/* ── Totals ── */
.sf24-tty-totals { display:flex; flex-direction:column; gap:8px; }
.sf24-tty-totals-row { display:flex; align-items:center; justify-content:space-between; font-size:13.5px; color:var(--tty-ts); }
.sf24-tty-totals-row strong { color:var(--tty-tx); font-weight:700; font-variant-numeric:tabular-nums; }
.sf24-tty-totals-row--discount { color:var(--tty-success-d); }
.sf24-tty-totals-row--discount strong { color:var(--tty-success-d); }
.sf24-tty-totals-row--total { padding-top:8px; margin-top:4px; border-top:1px dashed var(--tty-bd); font-size:15px; }
.sf24-tty-totals-row--total strong { font-family:var(--tty-fh); font-size:20px; color:var(--tty-final); font-weight:800; }

/* ── Applied coupons (mirror cart pill) ── */
.sf24-tty-applied-coupons { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; }
.sf24-tty-applied-coupon { display:flex; align-items:center; gap:9px; padding:9px 11px 9px 9px; background:linear-gradient(135deg, rgba(16,185,129,.09), rgba(16,185,129,.05)); border:1px solid rgba(16,185,129,.3); border-radius:11px; position:relative; overflow:hidden; }
.sf24-tty-applied-coupon::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--tty-success), var(--tty-success-d)); }
.sf24-tty-applied-check { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg, var(--tty-success), var(--tty-success-d)); color:#fff; flex-shrink:0; box-shadow:0 3px 8px -2px rgba(16,185,129,.4); margin-left:4px; }
.sf24-tty-applied-code { font-family:"SF Mono", Monaco, monospace; font-size:11.5px; font-weight:800; color:#065f46; letter-spacing:.04em; padding:2px 7px; background:rgba(16,185,129,.15); border-radius:5px; flex-shrink:0; }
.sf24-tty-applied-saved { flex:1; min-width:0; font-size:12px; font-weight:600; color:#065f46; }
.sf24-tty-applied-saved strong { font-family:var(--tty-fh); font-size:13px; font-weight:900; color:var(--tty-success-d); padding-left:2px; font-variant-numeric:tabular-nums; }

/* ── Cashback earned banner ── */
.sf24-tty-cashback { display:flex; align-items:center; gap:12px; padding:14px 16px 14px 12px; background:linear-gradient(135deg, var(--tty-ac) 0%, #6d28d9 55%, #5b21b6 100%); color:#fff; border-radius:16px; box-shadow:0 12px 30px -10px rgba(124,58,237,.55), inset 0 1px 0 rgba(255,255,255,.18); position:relative; overflow:hidden; }
.sf24-tty-cashback::before { content:''; position:absolute; top:-50%; right:-15%; width:60%; height:200%; background:radial-gradient(ellipse at center, rgba(245,133,41,.32), transparent 55%); pointer-events:none; }
.sf24-tty-cashback > * { position:relative; z-index:1; }
.sf24-tty-cashback-coin { width:42px; height:42px; flex-shrink:0; }
.sf24-tty-cashback-coin-inner { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,#fde68a,#f59e0b 55%,#d97706); box-shadow:0 4px 12px -2px rgba(217,119,6,.55), inset 0 1px 2px rgba(255,255,255,.5); animation:sf24-tty-bob 2.6s ease-in-out infinite; }
@keyframes sf24-tty-bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-3px) rotate(3deg); } }
.sf24-tty-cashback-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; line-height:1.25; }
.sf24-tty-cashback-eyebrow { font-size:10px; font-weight:800; color:rgba(255,255,255,.8); letter-spacing:.1em; text-transform:uppercase; }
.sf24-tty-cashback-text { font-size:13.5px; color:rgba(255,255,255,.96); font-weight:600; }
.sf24-tty-cashback-text strong { font-family:var(--tty-fh); color:#fef3c7; font-size:16px; font-weight:900; padding-right:3px; font-variant-numeric:tabular-nums; }
.sf24-tty-cashback-cta { padding:8px 14px; background:rgba(255,255,255,.14); color:#fff !important; border:1px solid rgba(255,255,255,.25); border-radius:10px; font-size:12.5px; font-weight:800; text-decoration:none !important; transition:all .2s; flex-shrink:0; }
.sf24-tty-cashback-cta:hover { background:rgba(255,255,255,.24); transform:translateX(2px); }

/* ── Account prompt ── */
.sf24-tty-account { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.sf24-tty-account-icon { display:inline-flex; align-items:center; justify-content:center; width:46px; height:46px; border-radius:14px; background:linear-gradient(135deg, var(--tty-ac), #6d28d9); flex-shrink:0; box-shadow:0 8px 20px -6px rgba(124,58,237,.4); }
.sf24-tty-account-body { flex:1; min-width:200px; display:flex; flex-direction:column; gap:3px; }
.sf24-tty-account-body strong { font-family:var(--tty-fh); font-size:15px; font-weight:800; color:var(--tty-tx); }
.sf24-tty-account-body span { font-size:13px; color:var(--tty-ts); line-height:1.45; }
.sf24-tty-account-body em { font-style:normal; color:var(--tty-tx); font-weight:700; padding:1px 5px; background:var(--tty-ag); border-radius:4px; font-size:12px; }
.sf24-tty-account-cta { flex-shrink:0; }

/* ── Buttons ── */
.sf24-tty-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 18px; border:0; border-radius:12px; font-family:var(--tty-fh); font-size:13.5px; font-weight:800; cursor:pointer; text-decoration:none !important; transition:all .25s; outline:none; }
.sf24-tty-btn-primary { background:linear-gradient(135deg, var(--tty-ac) 0%, var(--tty-ac2) 100%); color:#fff !important; box-shadow:0 8px 20px -6px rgba(124,58,237,.4); }
.sf24-tty-btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 28px -8px rgba(124,58,237,.5); }

/* ── Cross-sell ── */
.sf24-tty-promo-tag { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; background:linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,133,41,.1)); color:#b45309; font-size:11px; font-weight:800; border-radius:7px; border:1px solid rgba(245,158,11,.3); letter-spacing:.02em; }
.sf24-tty-promo-tag strong { font-family:"SF Mono", Monaco, monospace; color:#92400e; padding:1px 5px; background:rgba(245,158,11,.2); border-radius:4px; font-size:10.5px; letter-spacing:.05em; }
.sf24-tty-xsell-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; }
.sf24-tty-xsell { display:flex; flex-direction:column; gap:8px; padding:14px; background:#fff; border:1.5px solid var(--tty-bd); border-radius:14px; text-decoration:none !important; color:var(--tty-tx) !important; transition:all .25s cubic-bezier(.34,1.4,.64,1); }
.sf24-tty-xsell:hover { transform:translateY(-3px); border-color:rgba(124,58,237,.3); box-shadow:0 12px 28px -10px rgba(124,58,237,.25); }
.sf24-tty-xsell-img { display:flex; align-items:center; justify-content:center; height:80px; padding:8px; background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(245,133,41,.04)); border-radius:10px; }
.sf24-tty-xsell-img img { max-height:100%; max-width:100%; object-fit:contain; }
.sf24-tty-xsell-name { font-family:var(--tty-fh); font-size:13px; font-weight:700; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf24-tty-xsell-cta { font-size:12.5px; font-weight:700; color:var(--tty-ac); margin-top:auto; }

/* ── Sidebar cards ── */
.sf24-tty-side-card { padding:18px 18px 16px; background:#fff; border:1px solid var(--tty-bd); border-radius:16px; }
.sf24-tty-side-card strong { display:block; font-family:var(--tty-fh); font-size:14px; font-weight:800; color:var(--tty-tx); margin-bottom:6px; }
.sf24-tty-side-card p { font-size:12.5px; color:var(--tty-ts); line-height:1.5; margin:0; }

.sf24-tty-guarantee { background:linear-gradient(135deg, rgba(16,185,129,.06), rgba(16,185,129,.02)); border-color:rgba(16,185,129,.3); position:relative; padding-left:54px; }
.sf24-tty-guarantee-icon { position:absolute; left:18px; top:18px; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; color:var(--tty-success-d); }

.sf24-tty-support-link { display:inline-flex; align-items:center; gap:7px; padding:8px 12px; margin-top:10px; background:var(--tty-bg); border:1px solid var(--tty-bd); border-radius:9px; font-size:12.5px; font-weight:700; color:var(--tty-tx) !important; text-decoration:none !important; transition:all .15s; width:100%; box-sizing:border-box; }
.sf24-tty-support-link:hover { background:#fff; border-color:var(--tty-ac); color:var(--tty-ac) !important; }
.sf24-tty-support-link svg { color:var(--tty-ac); flex-shrink:0; }
.sf24-tty-support-meta { display:block; margin-top:8px; font-size:11px; color:var(--tty-tm); text-align:center; }

.sf24-tty-share { background:linear-gradient(135deg, rgba(124,58,237,.05), rgba(245,133,41,.03)); border-color:rgba(124,58,237,.2); }
.sf24-tty-share-btn { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; margin-top:10px; padding:11px 14px; background:#fff; border:1.5px dashed var(--tty-ac); border-radius:11px; cursor:pointer; transition:all .15s; outline:none; }
.sf24-tty-share-btn:hover { background:rgba(124,58,237,.04); border-style:solid; }
.sf24-tty-share-code { font-family:"SF Mono", Monaco, monospace; font-size:13px; font-weight:900; color:var(--tty-ac); letter-spacing:.04em; }
.sf24-tty-share-action { font-size:11px; font-weight:700; color:var(--tty-tm); transition:color .15s; }
.sf24-tty-share-btn.is-copied { background:rgba(16,185,129,.08); border-color:var(--tty-success-d); }
.sf24-tty-share-btn.is-copied .sf24-tty-share-action { color:var(--tty-success-d); font-weight:800; }

/* ── Trust footer ── */
.sf24-tty-trust { display:flex; align-items:center; justify-content:center; gap:12px; padding:24px 16px; margin-top:28px; border-top:1px solid var(--tty-bd); flex-wrap:wrap; text-align:center; font-size:13px; color:var(--tty-ts); }
.sf24-tty-trust-stars { color:#f59e0b; letter-spacing:.05em; font-size:15px; }
.sf24-tty-trust strong { color:var(--tty-tx); font-weight:800; }

/* ── Empty state ── */
.sf24-tty-empty { text-align:center; padding:60px 20px; }
.sf24-tty-empty-icon { display:inline-flex; align-items:center; justify-content:center; width:80px; height:80px; border-radius:50%; background:var(--tty-bg); color:var(--tty-tm); margin-bottom:18px; }
.sf24-tty-empty h2 { font-family:var(--tty-fh); font-size:22px; font-weight:900; margin:0 0 8px; }
.sf24-tty-empty p { font-size:14px; color:var(--tty-ts); margin:0 0 22px; }

/* ── Hero: big prominent ORDER NUMBER ── */
.sf24-tty-hero-ordernum { display:inline-flex; flex-direction:column; align-items:center; gap:4px; margin:6px auto 18px; padding:14px 28px 16px; background:rgba(255,255,255,.85); border:1px solid rgba(245,133,41,.3); border-radius:18px; backdrop-filter:blur(6px); box-shadow:0 8px 22px -10px rgba(245,133,41,.4); }
.sf24-tty-hero-ordernum-label { font-size:10px; font-weight:900; color:var(--tty-tm); letter-spacing:.18em; text-transform:uppercase; }
.sf24-tty-hero-ordernum-value { font-family:var(--tty-fh); font-size:42px; font-weight:900; letter-spacing:-.04em; line-height:1; color:var(--tty-tx); font-variant-numeric:tabular-nums; background:linear-gradient(135deg, var(--tty-ac) 0%, var(--tty-ac2) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
@media (max-width:640px) {
  .sf24-tty-hero-ordernum { padding:11px 22px 13px; }
  .sf24-tty-hero-ordernum-value { font-size:32px; }
}

/* ── SMM order details — pills row ── */
.sf24-tty-item-smm { display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; }
.sf24-tty-smm-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 9px 4px 7px; border-radius:7px; font-size:11.5px; font-weight:600; line-height:1.3; max-width:100%; min-width:0; }
.sf24-tty-smm-pill svg { flex-shrink:0; }
.sf24-tty-smm-pill strong { font-family:var(--tty-fh); font-weight:800; font-variant-numeric:tabular-nums; }
.sf24-tty-smm-pill span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; max-width:240px; }

.sf24-tty-smm-pill--qty { background:rgba(124,58,237,.08); color:var(--tty-ac); }
.sf24-tty-smm-pill--qty strong { color:var(--tty-tx); }
.sf24-tty-smm-pill--link { background:rgba(59,130,246,.08); color:#1d4ed8; text-decoration:none !important; transition:background .15s; }
.sf24-tty-smm-pill--link:hover { background:rgba(59,130,246,.16); color:#1e40af !important; }
.sf24-tty-smm-pill--link span { font-family:"SF Mono", Monaco, monospace; font-size:10.5px; }
.sf24-tty-smm-pill--user { background:rgba(245,133,41,.1); color:#9a3412; }
.sf24-tty-smm-pill--user strong { color:#7c2d12; }
.sf24-tty-smm-pill--text { background:#f3f4f6; color:var(--tty-ts); }
.sf24-tty-smm-pill--photos { background:rgba(236,72,153,.08); color:#9d174d; }
.sf24-tty-smm-pill--photos strong { color:#831843; }
.sf24-tty-smm-pill--mentions { background:rgba(16,185,129,.08); color:#065f46; }
.sf24-tty-smm-pill--mentions strong { color:#064e3b; }

.sf24-tty-item-comment { margin-top:6px; padding:8px 11px; background:var(--tty-bg); border-left:2.5px solid var(--tty-ac); border-radius:0 7px 7px 0; font-size:12px; color:var(--tty-ts); line-height:1.5; }
.sf24-tty-item-comment-label { font-size:10px; font-weight:800; color:var(--tty-tm); letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:2px; }
.sf24-tty-item-comment em { font-style:italic; color:var(--tty-tx); }

/* ── Live SMM Delivery Status Block ── */
.sf24-tty-delivery { margin-top:10px; padding:11px 13px 12px; background:var(--tty-bg); border:1px solid var(--tty-bd); border-radius:11px; }
.sf24-tty-delivery-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.sf24-tty-delivery-status { display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; }
.sf24-tty-delivery-status strong { font-family:var(--tty-fh); font-weight:800; font-size:12px; }
.sf24-tty-delivery-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; position:relative; }

.sf24-tty-delivery--done { background:rgba(16,185,129,.06); border-color:rgba(16,185,129,.3); }
.sf24-tty-delivery--done .sf24-tty-delivery-status, .sf24-tty-delivery--done .sf24-tty-delivery-status strong { color:var(--tty-success-d); }
.sf24-tty-delivery--done .sf24-tty-delivery-dot { background:var(--tty-success); box-shadow:0 0 0 3px rgba(16,185,129,.18); }

.sf24-tty-delivery--live { background:linear-gradient(135deg, rgba(124,58,237,.05), rgba(245,133,41,.03)); border-color:rgba(124,58,237,.25); }
.sf24-tty-delivery--live .sf24-tty-delivery-status, .sf24-tty-delivery--live .sf24-tty-delivery-status strong { color:var(--tty-ac); }
.sf24-tty-delivery--live .sf24-tty-delivery-dot { background:var(--tty-ac); animation:sf24-tty-deliver-pulse 1.6s ease-in-out infinite; }
@keyframes sf24-tty-deliver-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(124,58,237,.5); } 70% { box-shadow:0 0 0 6px rgba(124,58,237,0); } }

.sf24-tty-delivery--wait { background:#fefce8; border-color:rgba(245,158,11,.3); }
.sf24-tty-delivery--wait .sf24-tty-delivery-status, .sf24-tty-delivery--wait .sf24-tty-delivery-status strong { color:#92400e; }
.sf24-tty-delivery--wait .sf24-tty-delivery-dot { background:#f59e0b; animation:sf24-tty-deliver-blink 1.4s ease-in-out infinite; }
@keyframes sf24-tty-deliver-blink { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.sf24-tty-delivery--warn { background:#fff7ed; border-color:rgba(245,133,41,.3); }
.sf24-tty-delivery--warn .sf24-tty-delivery-status, .sf24-tty-delivery--warn .sf24-tty-delivery-status strong { color:#c2410c; }
.sf24-tty-delivery--warn .sf24-tty-delivery-dot { background:var(--tty-ac2); }

.sf24-tty-delivery--err { background:#fef2f2; border-color:#fecaca; }
.sf24-tty-delivery--err .sf24-tty-delivery-status, .sf24-tty-delivery--err .sf24-tty-delivery-status strong { color:#b91c1c; }
.sf24-tty-delivery--err .sf24-tty-delivery-dot { background:#dc2626; }

.sf24-tty-delivery-aoi { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; padding:3px 8px 3px 6px; background:#fff; border:1px solid var(--tty-bd); border-radius:6px; }
.sf24-tty-delivery-aoi-label { font-size:9px; font-weight:900; color:var(--tty-tm); letter-spacing:.1em; text-transform:uppercase; }
.sf24-tty-delivery-aoi code { font-family:"SF Mono", Monaco, monospace; font-size:11px; font-weight:800; color:var(--tty-tx); padding:0; background:transparent; letter-spacing:.02em; }

.sf24-tty-delivery-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:9px; }
.sf24-tty-delivery-stat { display:flex; flex-direction:column; gap:2px; padding:8px 10px; background:#fff; border-radius:8px; }
.sf24-tty-delivery-stat-label { font-size:9.5px; font-weight:800; color:var(--tty-tm); letter-spacing:.06em; text-transform:uppercase; line-height:1; }
.sf24-tty-delivery-stat strong { font-family:var(--tty-fh); font-size:13px; font-weight:800; color:var(--tty-tx); font-variant-numeric:tabular-nums; line-height:1.2; }

.sf24-tty-delivery-bar { position:relative; height:5px; background:rgba(124,58,237,.12); border-radius:5px; overflow:hidden; margin-bottom:5px; }
.sf24-tty-delivery-bar-fill { display:block; height:100%; background:linear-gradient(90deg, var(--tty-ac), var(--tty-ac2)); border-radius:5px; transition:width .8s cubic-bezier(.34,1.56,.64,1); }
.sf24-tty-delivery--done .sf24-tty-delivery-bar-fill { background:linear-gradient(90deg, var(--tty-success), var(--tty-success-d)); }
.sf24-tty-delivery-pct { font-size:10.5px; font-weight:800; color:var(--tty-tm); text-align:right; }

.sf24-tty-delivery-pending { font-size:11.5px; color:var(--tty-ts); margin:0; line-height:1.45; padding:3px 0 0; }

@media (max-width:600px) { .sf24-tty-delivery-grid { grid-template-columns:1fr 1fr; } }

/* ── Aggregate progress (overall order completion) ── */
.sf24-tty-aggregate-badge { display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 9px; border-radius:999px; font-size:11.5px; font-weight:600; color:var(--tty-tx); }
.sf24-tty-aggregate-badge strong { font-family:var(--tty-fh); font-weight:900; font-variant-numeric:tabular-nums; }
.sf24-tty-aggregate-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }

.sf24-tty-aggregate-badge--completed { background:rgba(16,185,129,.1); color:var(--tty-success-d); }
.sf24-tty-aggregate-badge--completed .sf24-tty-aggregate-dot { background:var(--tty-success); box-shadow:0 0 0 3px rgba(16,185,129,.18); }
.sf24-tty-aggregate-badge--inprogress { background:linear-gradient(135deg, rgba(124,58,237,.08), rgba(245,133,41,.05)); color:var(--tty-ac); }
.sf24-tty-aggregate-badge--inprogress .sf24-tty-aggregate-dot { background:var(--tty-ac); animation:sf24-tty-deliver-pulse 1.6s ease-in-out infinite; }
.sf24-tty-aggregate-badge--partial { background:rgba(245,133,41,.1); color:#c2410c; }
.sf24-tty-aggregate-badge--partial .sf24-tty-aggregate-dot { background:var(--tty-ac2); }
.sf24-tty-aggregate-badge--queued, .sf24-tty-aggregate-badge--awaiting { background:#fefce8; color:#92400e; }
.sf24-tty-aggregate-badge--queued .sf24-tty-aggregate-dot, .sf24-tty-aggregate-badge--awaiting .sf24-tty-aggregate-dot { background:#f59e0b; animation:sf24-tty-deliver-blink 1.4s ease-in-out infinite; }
.sf24-tty-aggregate-badge--error { background:#fef2f2; color:#b91c1c; }
.sf24-tty-aggregate-badge--error .sf24-tty-aggregate-dot { background:#dc2626; }

.sf24-tty-aggregate-bar { position:relative; height:7px; background:rgba(124,58,237,.1); border-radius:7px; overflow:hidden; margin:0 0 18px; box-shadow:inset 0 1px 2px rgba(15,15,17,.06); }
.sf24-tty-aggregate-bar-fill { display:block; height:100%; border-radius:7px; transition:width 1s cubic-bezier(.34,1.56,.64,1); position:relative; overflow:hidden; }
.sf24-tty-aggregate-bar-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); transform:translateX(-100%); animation:sf24-tty-bar-shine 2.4s linear infinite; }
.sf24-tty-aggregate-bar-fill--completed { background:linear-gradient(90deg, var(--tty-success), var(--tty-success-d)); box-shadow:0 0 12px rgba(16,185,129,.4); }
.sf24-tty-aggregate-bar-fill--inprogress { background:linear-gradient(90deg, var(--tty-ac), var(--tty-ac2)); box-shadow:0 0 12px rgba(124,58,237,.45); }
.sf24-tty-aggregate-bar-fill--partial { background:linear-gradient(90deg, var(--tty-ac2), #c2410c); }
.sf24-tty-aggregate-bar-fill--queued, .sf24-tty-aggregate-bar-fill--awaiting { background:linear-gradient(90deg, #fbbf24, #f59e0b); }
.sf24-tty-aggregate-bar-fill--error { background:linear-gradient(90deg, #f87171, #dc2626); }
@keyframes sf24-tty-bar-shine { 0% { transform:translateX(-100%); } 100% { transform:translateX(200%); } }
@media (prefers-reduced-motion: reduce) { .sf24-tty-aggregate-bar-fill::after { animation:none; display:none; } }

/* Update step-live badge to handle the new % format */
.sf24-tty-step-live { font-family:var(--tty-fh); }

/* ── Auto-generated thank-you coupon — upgraded promo tag ── */
.sf24-tty-promo-tag { display:inline-flex; align-items:center; gap:8px; padding:6px 11px 6px 8px; background:linear-gradient(135deg, rgba(245,158,11,.15), rgba(245,133,41,.1)); color:#b45309; font-size:11.5px; font-weight:800; border-radius:9px; border:1px solid rgba(245,158,11,.32); letter-spacing:.01em; }
.sf24-tty-promo-pct { font-family:var(--tty-fh); font-size:12px; font-weight:900; color:#92400e; }
.sf24-tty-promo-divider { color:rgba(180,83,9,.35); font-weight:400; }
.sf24-tty-promo-code-wrap { display:inline-flex; align-items:center; gap:5px; }
.sf24-tty-promo-code-label { font-size:9px; font-weight:900; color:#92400e; letter-spacing:.12em; opacity:.6; }
.sf24-tty-promo-code { font-family:"SF Mono", Monaco, monospace; font-size:11px; font-weight:900; color:#92400e; padding:2px 7px; background:rgba(245,158,11,.22); border:1px dashed rgba(180,83,9,.45); border-radius:5px; letter-spacing:.05em; cursor:pointer; transition:all .15s; }
.sf24-tty-promo-code:hover { background:rgba(245,158,11,.32); border-style:solid; }
.sf24-tty-promo-code.is-copied { background:rgba(16,185,129,.18); color:var(--tty-success-d); border-color:var(--tty-success-d); }
.sf24-tty-promo-tag--expired { background:#f3f4f6; color:var(--tty-tm); border-color:var(--tty-bd); font-weight:600; padding:6px 11px; }

.sf24-tty-promo-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; padding:9px 12px; margin:0 0 14px; background:linear-gradient(135deg, rgba(245,158,11,.05), rgba(245,133,41,.03)); border:1px solid rgba(245,158,11,.2); border-radius:10px; font-size:11.5px; }
.sf24-tty-promo-copy { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:#fff; color:#92400e; border:1.5px solid rgba(245,158,11,.4); border-radius:8px; font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer; transition:all .15s; outline:none; }
.sf24-tty-promo-copy:hover { background:rgba(245,158,11,.08); border-color:#f59e0b; transform:translateY(-1px); }
.sf24-tty-promo-copy.is-copied { background:rgba(16,185,129,.1); border-color:var(--tty-success-d); color:var(--tty-success-d); }
.sf24-tty-promo-rules { color:#92400e; font-weight:600; }
.sf24-tty-promo-divider--rules { color:rgba(180,83,9,.3); }
.sf24-tty-promo-countdown { display:inline-flex; align-items:center; gap:5px; margin-left:auto; padding:4px 9px; background:rgba(245,158,11,.15); color:#92400e; border-radius:6px; font-weight:800; font-variant-numeric:tabular-nums; transition:background .25s, color .25s; }
.sf24-tty-promo-countdown svg { color:#b45309; }
.sf24-tty-promo-countdown.is-urgent { background:rgba(220,38,38,.1); color:#b91c1c; animation:sf24-tty-urgent-pulse 1s ease-in-out infinite; }
.sf24-tty-promo-countdown.is-urgent svg { color:#dc2626; }
.sf24-tty-promo-countdown.is-expired { background:#f3f4f6; color:var(--tty-tm); animation:none; }
@keyframes sf24-tty-urgent-pulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .sf24-tty-promo-countdown.is-urgent { animation:none; } }

/* WhatsApp support link — branded green icon (override the generic lila support-link svg) */
.sf24-tty-support-link--wa { gap:9px; }
.sf24-tty-wa-icon { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.sf24-tty-wa-icon svg { width:16px; height:16px; }
.sf24-tty-support-link--wa:hover { border-color:#25D366; color:#128C4F !important; background:rgba(37,211,102,.06); }

/* ── Target visualization (social platform card) ── */
.sf24-tty-target { display:flex; align-items:center; gap:12px; padding:11px 12px 11px 11px; margin-top:8px; border-radius:13px; text-decoration:none !important; color:#fff !important; transition:transform .25s, box-shadow .3s; position:relative; overflow:hidden; }
.sf24-tty-target:hover { transform:translateY(-2px); box-shadow:0 14px 32px -10px rgba(15,15,17,.32); }
.sf24-tty-target::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,255,255,.08) 0%, transparent 60%); pointer-events:none; }

.sf24-tty-target--instagram { background:linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); box-shadow:0 8px 22px -8px rgba(220,39,67,.45); }
.sf24-tty-target--tiktok { background:linear-gradient(135deg, #25F4EE 0%, #000 50%, #FE2C55 100%); box-shadow:0 8px 22px -8px rgba(254,44,85,.45); }
.sf24-tty-target--youtube { background:linear-gradient(135deg, #FF0000 0%, #cc0000 100%); box-shadow:0 8px 22px -8px rgba(255,0,0,.4); }
.sf24-tty-target--facebook { background:linear-gradient(135deg, #1877f2 0%, #0a5cc7 100%); box-shadow:0 8px 22px -8px rgba(24,119,242,.45); }
.sf24-tty-target--x { background:linear-gradient(135deg, #2a2a2a 0%, #000 100%); box-shadow:0 8px 22px -8px rgba(0,0,0,.5); }
.sf24-tty-target--spotify { background:linear-gradient(135deg, #1ed760 0%, #1aa34a 100%); box-shadow:0 8px 22px -8px rgba(30,215,96,.45); }

.sf24-tty-target-avatar { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,.18); flex-shrink:0; backdrop-filter:blur(4px); }
.sf24-tty-target-avatar svg { width:18px; height:18px; color:#fff; }
.sf24-tty-target-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; line-height:1.2; }
.sf24-tty-target-handle { font-family:var(--tty-fh); font-size:14px; font-weight:800; color:#fff; letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf24-tty-target-meta { font-size:10.5px; font-weight:700; color:rgba(255,255,255,.78); letter-spacing:.04em; text-transform:uppercase; }
.sf24-tty-target-arrow { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,.16); color:#fff; flex-shrink:0; transition:transform .25s; }
.sf24-tty-target:hover .sf24-tty-target-arrow { transform:translate(2px,-2px) scale(1.05); background:rgba(255,255,255,.26); }

/* Instagram post embed wrapper */
.sf24-tty-target--ig-embed { background:transparent; padding:0; box-shadow:none; margin-top:10px; max-width:100%; min-height:160px; }
.sf24-tty-target--ig-embed:hover { transform:none; box-shadow:none; }
.sf24-tty-target--ig-embed::before { display:none; }
.sf24-tty-target--ig-embed iframe { max-width:100% !important; }

/* Thumbnail variant — for YouTube / IG-future-thumbs (compact 60×60 thumb left) */
.sf24-tty-target--has-thumb { padding:8px 12px 8px 8px; }
.sf24-tty-target-thumb { position:relative; width:60px; height:60px; flex-shrink:0; border-radius:9px; overflow:hidden; background:rgba(0,0,0,.15); display:flex; align-items:center; justify-content:center; }
.sf24-tty-target-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.sf24-tty-target-play { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,.25) 70%); color:#fff; transition:transform .25s; }
.sf24-tty-target--has-thumb:hover .sf24-tty-target-play { transform:scale(1.1); }

/* Override IG-embed wrapper that was added before — no longer used, kill any leftovers */
.sf24-tty-target--ig-embed { display:none !important; }

/* ── TARGET v2: minimal white card with colored left stripe + brand-icon badge ── */
.sf24-tty-target { display:flex !important; align-items:center; gap:12px; padding:11px 12px 11px 16px; margin-top:8px; border-radius:11px; background:#fff !important; border:1px solid var(--tty-bd); color:var(--tty-tx) !important; text-decoration:none !important; transition:all .2s; position:relative; overflow:hidden; box-shadow:0 2px 8px -4px rgba(15,15,17,.08); }
.sf24-tty-target::before { display:none !important; }
.sf24-tty-target:hover { transform:translateY(-1px); box-shadow:0 8px 22px -8px rgba(15,15,17,.18); border-color:#cbcdd5; }

/* Left stripe — 5px solid bar with platform brand color */
.sf24-tty-target-stripe { position:absolute; left:0; top:0; bottom:0; width:5px; }
.sf24-tty-target--youtube .sf24-tty-target-stripe { background:#FF0000; }
.sf24-tty-target--instagram .sf24-tty-target-stripe { background:linear-gradient(180deg, #FCAF45 0%, #F77737 25%, #E1306C 50%, #C13584 75%, #5B51D8 100%); }
.sf24-tty-target--tiktok .sf24-tty-target-stripe { background:linear-gradient(180deg, #25F4EE 0%, #000 50%, #FE2C55 100%); }
.sf24-tty-target--facebook .sf24-tty-target-stripe { background:#1877f2; }
.sf24-tty-target--x .sf24-tty-target-stripe { background:#000; }
.sf24-tty-target--spotify .sf24-tty-target-stripe { background:#1ed760; }

/* 36×36 brand-color icon badge (override the previous ghost-on-gradient look) */
.sf24-tty-target .sf24-tty-target-avatar { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:9px; flex-shrink:0; backdrop-filter:none; }
.sf24-tty-target .sf24-tty-target-avatar svg { width:18px; height:18px; color:#fff; }
.sf24-tty-target--youtube .sf24-tty-target-avatar { background:#FF0000; }
.sf24-tty-target--instagram .sf24-tty-target-avatar { background:linear-gradient(135deg, #FCAF45, #F77737 30%, #E1306C 60%, #5B51D8 100%); }
.sf24-tty-target--tiktok .sf24-tty-target-avatar { background:#000; }
.sf24-tty-target--facebook .sf24-tty-target-avatar { background:#1877f2; }
.sf24-tty-target--x .sf24-tty-target-avatar { background:#000; }
.sf24-tty-target--spotify .sf24-tty-target-avatar { background:#1ed760; }

/* Body text — now dark on white */
.sf24-tty-target .sf24-tty-target-handle { font-family:var(--tty-fh); font-size:13.5px; font-weight:800; color:var(--tty-tx); letter-spacing:-.005em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sf24-tty-target .sf24-tty-target-meta { font-size:10px; font-weight:700; color:var(--tty-tm); letter-spacing:.06em; text-transform:uppercase; }

/* Arrow — neutral gray now */
.sf24-tty-target .sf24-tty-target-arrow { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:7px; background:#f3f4f6; color:var(--tty-ts); flex-shrink:0; transition:all .25s; }
.sf24-tty-target:hover .sf24-tty-target-arrow { background:var(--tty-bg); color:var(--tty-tx); transform:translate(2px,-2px); }

/* Kill the old thumb variant — minimalist look only */
.sf24-tty-target--has-thumb { padding:11px 12px 11px 16px; }
.sf24-tty-target-thumb { display:none !important; }

/* ── Invoice button in card head ── */
.sf24-tty-card-meta-row { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sf24-tty-invoice-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 9px; background:var(--tty-bg); border:1px solid var(--tty-bd); border-radius:8px; font-size:11.5px; font-weight:700; color:var(--tty-tx) !important; text-decoration:none !important; transition:all .15s; }
.sf24-tty-invoice-btn:hover { background:#fff; border-color:var(--tty-ac); color:var(--tty-ac) !important; transform:translateY(-1px); box-shadow:0 4px 10px -4px rgba(124,58,237,.25); }
.sf24-tty-invoice-btn svg { color:var(--tty-ac); flex-shrink:0; }

/* ── Invoice page (?view=invoice) ── */
.sf24-tty-invoice { max-width:780px; margin:0 auto; padding:30px 24px 60px; font-family:-apple-system,'Helvetica Neue',Arial,sans-serif; color:#1a1033; }
.sf24-tty-invoice-toolbar { display:flex; justify-content:space-between; align-items:center; gap:12px; padding-bottom:20px; margin-bottom:24px; border-bottom:1px solid #e7e7eb; }
.sf24-tty-invoice-print { display:inline-flex; align-items:center; gap:7px; padding:9px 16px; background:linear-gradient(135deg,#7c3aed,#f58529); color:#fff !important; border:0; border-radius:10px; font-family:inherit; font-size:13px; font-weight:800; cursor:pointer; box-shadow:0 8px 20px -6px rgba(124,58,237,.4); }
.sf24-tty-invoice-print:hover { transform:translateY(-1px); box-shadow:0 12px 26px -8px rgba(124,58,237,.5); }
.sf24-tty-invoice-back { font-size:13px; color:#6b7280 !important; text-decoration:none !important; font-weight:600; }
.sf24-tty-invoice-back:hover { color:#1a1033 !important; }

.sf24-tty-invoice-head { display:flex; justify-content:space-between; align-items:flex-start; gap:30px; margin-bottom:32px; }
.sf24-tty-invoice-brand strong { display:block; font-family:'Rubik',Arial,sans-serif; font-size:24px; font-weight:900; letter-spacing:-.02em; color:#1a1033; margin-bottom:6px; background:linear-gradient(135deg,#7c3aed,#f58529); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sf24-tty-invoice-brand span { display:block; font-size:12px; color:#6b7280; line-height:1.6; }
.sf24-tty-invoice-meta { text-align:right; min-width:200px; }
.sf24-tty-invoice-meta h1 { font-family:'Rubik',Arial,sans-serif; font-size:28px; font-weight:900; letter-spacing:-.02em; margin:0 0 12px; color:#1a1033; }
.sf24-tty-invoice-meta div { display:flex; justify-content:space-between; gap:14px; font-size:12px; padding:3px 0; }
.sf24-tty-invoice-meta span { color:#6b7280; }
.sf24-tty-invoice-meta strong { font-family:'SF Mono',Monaco,monospace; color:#1a1033; font-size:12.5px; }

.sf24-tty-invoice-bill { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:18px 20px; margin-bottom:24px; background:#faf9f5; border-radius:10px; }
.sf24-tty-invoice-bill h3 { font-family:'Rubik',Arial,sans-serif; font-size:11px; font-weight:900; color:#9ca3af; letter-spacing:.1em; text-transform:uppercase; margin:0 0 8px; }
.sf24-tty-invoice-bill p { margin:0 0 4px; font-size:13px; line-height:1.5; }
.sf24-tty-invoice-email { color:#6b7280; font-size:12px !important; }
.sf24-tty-invoice-paid { display:inline-block; margin-top:6px !important; padding:3px 10px; background:rgba(16,185,129,.12); color:#065f46; border:1px solid rgba(16,185,129,.3); border-radius:5px; font-size:11px !important; font-weight:900; letter-spacing:.08em; }

.sf24-tty-invoice-table { width:100%; border-collapse:collapse; font-size:13px; margin-bottom:24px; }
.sf24-tty-invoice-table th { padding:11px 14px; text-align:left; background:#1a1033; color:#fff; font-family:'Rubik',Arial,sans-serif; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.sf24-tty-invoice-table th.num, .sf24-tty-invoice-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.sf24-tty-invoice-table tbody td { padding:14px; border-bottom:1px solid #e7e7eb; vertical-align:top; }
.sf24-tty-invoice-table tbody td strong { display:block; font-weight:700; color:#1a1033; margin-bottom:3px; }
.sf24-tty-invoice-meta-line { font-size:11.5px; color:#6b7280; }
.sf24-tty-invoice-table tfoot td { padding:8px 14px; font-size:13px; color:#6b7280; }
.sf24-tty-invoice-table tfoot td.num { color:#1a1033; font-weight:700; }
.sf24-tty-invoice-table tfoot tr.discount td { color:#059669; }
.sf24-tty-invoice-table tfoot tr.discount td.num { color:#059669; font-weight:800; }
.sf24-tty-invoice-table tfoot tr.total td { padding-top:14px; border-top:2px solid #1a1033; font-family:'Rubik',Arial,sans-serif; font-size:15px; font-weight:900; color:#1a1033; }
.sf24-tty-invoice-table tfoot tr.total td.num { color:#c2410c; font-size:18px; }

.sf24-tty-invoice-foot { padding-top:20px; border-top:1px dashed #e7e7eb; font-size:12px; color:#6b7280; line-height:1.6; }
.sf24-tty-invoice-foot p { margin:0 0 8px; }
.sf24-tty-invoice-foot a { color:#7c3aed; }
.sf24-tty-invoice-tax { font-size:10.5px; color:#9ca3af; }

/* Print-only: hide toolbar, full page */
@media print {
  .sf24-tty-invoice-toolbar { display:none !important; }
  .sf24-tty-invoice { padding:0; max-width:none; }
  body { background:#fff !important; }
  /* Hide everything except invoice */
  .sf24-tty-wrap, .elementor-widget, header, footer, nav, .site-header, .site-footer { display:none !important; }
  .sf24-tty-invoice { display:block !important; }
}
@media (max-width:600px) {
  .sf24-tty-invoice-head { flex-direction:column; gap:20px; }
  .sf24-tty-invoice-meta { text-align:left; }
  .sf24-tty-invoice-bill { grid-template-columns:1fr; gap:16px; }
}

/* Download-PDF variant — slightly different tone so users see two distinct actions */
.sf24-tty-invoice-btn--dl { background:#fff; border-color:rgba(124,58,237,.3); }
.sf24-tty-invoice-btn--dl:hover { background:rgba(124,58,237,.06); }

/* ── Manual refresh button + meta ── */
.sf24-tty-status-actions { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sf24-tty-refresh-btn { display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 9px; background:transparent; border:1px solid var(--tty-bd); border-radius:8px; font-size:11.5px; font-weight:700; color:var(--tty-ts); cursor:pointer; transition:background-color .15s ease, color .15s ease, border-color .15s ease; outline:none; font-family:inherit; }
.sf24-tty-refresh-btn:hover:not(:disabled) { background:#f5f5f7; color:var(--tty-tx); border-color:#d4d6dd; }
.sf24-tty-refresh-btn:active:not(:disabled) { background:#ebebef; }
.sf24-tty-refresh-btn:focus-visible { outline:2px solid rgba(124,58,237,.35); outline-offset:2px; }
.sf24-tty-refresh-btn:disabled { cursor:wait; opacity:.55; }
.sf24-tty-refresh-btn svg { color:var(--tty-tm); transition:color .15s ease, transform .35s; }
.sf24-tty-refresh-btn:hover:not(:disabled) svg { color:var(--tty-tx); }
.sf24-tty-refresh-btn.is-loading svg { animation:sf24-tty-spin 1s linear infinite; }
.sf24-tty-refresh-meta { font-size:10.5px; color:var(--tty-tm); transition:color .25s; font-variant-numeric:tabular-nums; }
.sf24-tty-refresh-meta.is-fresh { color:var(--tty-success-d); font-weight:700; }
@media (max-width:560px) { .sf24-tty-refresh-label { display:none; } .sf24-tty-refresh-btn { padding:6px 8px; } }

/* ── Engagement-rate insights card ── */
.sf24-tty-er { position:relative; overflow:hidden; transition:border-color .35s; }
.sf24-tty-er-spark { display:inline-block; font-size:16px; margin-right:4px; animation:sf24-tty-er-pop 1.6s ease-in-out infinite; }
@keyframes sf24-tty-er-pop { 0%,100% { transform:scale(1); } 50% { transform:scale(1.18); } }
.sf24-tty-er-handle { font-family:'SF Mono', Monaco, monospace; font-size:12px; padding:3px 9px; background:linear-gradient(135deg, rgba(225,48,108,.1), rgba(91,81,216,.08)); color:#9d174d; border-radius:6px; font-weight:700; }

/* Hidden-attribute override — class-based display rules above outrank [hidden]'s display:none */
.sf24-tty-er-loading[hidden], .sf24-tty-er-result[hidden], .sf24-tty-er-fail[hidden], .sf24-tty-er-recos[hidden] { display:none !important; }

/* Loading skeleton */
.sf24-tty-er-loading { display:flex; align-items:center; gap:14px; padding:22px 4px; }
.sf24-tty-er-skeleton { display:inline-block; width:60px; height:60px; border-radius:50%; background:linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 50%, #f3f4f6 100%); background-size:200% 100%; animation:sf24-tty-er-shimmer 1.4s linear infinite; flex-shrink:0; }
.sf24-tty-er-loading-label { font-size:13px; color:var(--tty-tm); font-weight:600; }
@keyframes sf24-tty-er-shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }

/* Result */
.sf24-tty-er-headline { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:14px; }
.sf24-tty-er-rate { display:inline-flex; align-items:flex-end; line-height:1; font-family:var(--tty-fh); }
.sf24-tty-er-rate-num { font-size:52px; font-weight:900; letter-spacing:-.04em; color:var(--tty-tx); font-variant-numeric:tabular-nums; transition:color .35s; }
.sf24-tty-er-rate-pct { font-size:24px; font-weight:800; color:var(--tty-tm); margin-left:2px; padding-bottom:6px; }
.sf24-tty-er-rate-meta { display:flex; flex-direction:column; gap:5px; padding-bottom:6px; }
.sf24-tty-er-tier-pill { display:inline-flex; align-items:center; padding:3px 9px; background:rgba(124,58,237,.08); color:var(--tty-ac); border-radius:5px; font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; align-self:flex-start; }
.sf24-tty-er-followers { font-size:12.5px; color:var(--tty-ts); }
.sf24-tty-er-followers strong { font-family:var(--tty-fh); color:var(--tty-tx); font-variant-numeric:tabular-nums; }
.sf24-tty-er-rating { font-size:12.5px; color:var(--tty-ts); font-style:italic; }

.sf24-tty-er.is-critical .sf24-tty-er-rate-num { color:#dc2626; }
.sf24-tty-er.is-low .sf24-tty-er-rate-num { color:#c2410c; }
.sf24-tty-er.is-avg .sf24-tty-er-rate-num { color:#92400e; }
.sf24-tty-er.is-good .sf24-tty-er-rate-num { color:#059669; }
.sf24-tty-er.is-excellent .sf24-tty-er-rate-num { color:#10b981; }
.sf24-tty-er.is-critical { border-color:rgba(220,38,38,.3); }
.sf24-tty-er.is-good, .sf24-tty-er.is-excellent { border-color:rgba(16,185,129,.3); }

/* Gauge */
.sf24-tty-er-gauge { position:relative; height:8px; background:linear-gradient(90deg, rgba(220,38,38,.18) 0%, rgba(245,158,11,.18) 30%, rgba(16,185,129,.18) 70%, rgba(16,185,129,.25) 100%); border-radius:8px; overflow:visible; margin-bottom:9px; }
.sf24-tty-er-gauge-fill { display:block; height:100%; background:linear-gradient(90deg, #dc2626 0%, #f59e0b 40%, #10b981 80%); border-radius:8px; transition:width 1.2s cubic-bezier(.34,1.56,.64,1); position:relative; box-shadow:0 0 12px rgba(245,158,11,.4); }
.sf24-tty-er-gauge-marker { position:absolute; top:-4px; bottom:-4px; width:2px; background:#1a1033; border-radius:2px; transition:left 1.2s ease; box-shadow:0 0 0 2px #fff; }
.sf24-tty-er-gauge-marker::after { content:'avg'; position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; color:var(--tty-tm); letter-spacing:.05em; text-transform:uppercase; }
.sf24-tty-er-benchmark { font-size:11.5px; color:var(--tty-ts); padding:2px 0 4px; line-height:1.5; }
.sf24-tty-er-benchmark strong { color:var(--tty-tx); font-weight:700; }

/* Recommendations */
.sf24-tty-er-recos { margin-top:18px; padding-top:16px; border-top:1px dashed var(--tty-bd); animation:sf24-tty-er-fade .4s ease; }
@keyframes sf24-tty-er-fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
.sf24-tty-er-recos-title { display:flex; align-items:center; gap:8px; font-family:var(--tty-fh); margin:0 0 12px; font-size:13px; font-weight:900; color:var(--tty-tx); letter-spacing:-.005em; }
.sf24-tty-er-recos-ai-tag { margin-left:auto; font-size:9.5px; font-weight:900; color:#7c3aed; padding:3px 8px; background:rgba(124,58,237,.1); border-radius:5px; letter-spacing:.06em; text-transform:uppercase; }
.sf24-tty-er-recos-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:10px; }
.sf24-tty-er-reco { display:flex; gap:11px; padding:11px; background:#fff; border:1px solid var(--tty-bd); border-radius:11px; text-decoration:none !important; color:var(--tty-tx) !important; transition:all .25s cubic-bezier(.34,1.4,.64,1); }
.sf24-tty-er-reco:hover { transform:translateY(-2px); border-color:rgba(124,58,237,.3); box-shadow:0 10px 24px -10px rgba(124,58,237,.22); }
.sf24-tty-er-reco-img { display:flex; align-items:center; justify-content:center; width:46px; height:46px; flex-shrink:0; background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(245,133,41,.04)); border-radius:9px; padding:5px; }
.sf24-tty-er-reco-img img { max-width:100%; max-height:100%; object-fit:contain; }
.sf24-tty-er-reco-body { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.sf24-tty-er-reco-name { font-family:var(--tty-fh); font-size:13px; font-weight:800; color:var(--tty-tx); line-height:1.3; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.sf24-tty-er-reco-reason { font-size:11.5px; color:var(--tty-ts); line-height:1.55; display:block; overflow:visible; }
.sf24-tty-er-reco-cta { font-size:11.5px; font-weight:800; color:var(--tty-ac); margin-top:auto; padding-top:3px; }

/* Failure */
.sf24-tty-er-fail { display:flex; align-items:center; gap:9px; padding:14px 16px; background:#fef2f2; border:1px solid #fecaca; border-radius:11px; font-size:12.5px; color:#b91c1c; }
.sf24-tty-er-fail-icon { font-size:16px; }

/* ── ENGAGEMENT-RATE v2 — premium redesign with profile pic + stats grid ── */

/* Profile header — pic + name + handle + verified + tier */
.sf24-tty-er-profile { display:flex; align-items:center; gap:14px; padding:0 0 18px; margin-bottom:18px; border-bottom:1px solid var(--tty-bd); }
.sf24-tty-er-pic { position:relative; width:64px; height:64px; flex-shrink:0; border-radius:50%; overflow:hidden; padding:2px; background:linear-gradient(135deg, #FCAF45 0%, #F77737 25%, #E1306C 50%, #C13584 75%, #5B51D8 100%); }
.sf24-tty-er-pic-img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:3px solid #fff; box-sizing:border-box; }
.sf24-tty-er-pic-fallback { display:none; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:#1a1033; color:#fff; font-family:var(--tty-fh); font-size:24px; font-weight:900; border:3px solid #fff; box-sizing:border-box; }
.sf24-tty-er-profile-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sf24-tty-er-profile-name { display:inline-flex; align-items:center; gap:6px; font-family:var(--tty-fh); font-size:16px; font-weight:800; color:var(--tty-tx); letter-spacing:-.01em; }
.sf24-tty-er-profile-name strong { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:200px; }
.sf24-tty-er-verified { display:inline-flex; align-items:center; flex-shrink:0; }
.sf24-tty-er-verified[hidden] { display:none !important; }
.sf24-tty-er-profile-handle { font-size:13px; color:var(--tty-ts); font-family:'SF Mono', Monaco, monospace; font-weight:600; }
.sf24-tty-er-tier-pill { padding:5px 12px; background:linear-gradient(135deg, rgba(124,58,237,.1), rgba(245,133,41,.06)); color:var(--tty-ac); border:1px solid rgba(124,58,237,.2); border-radius:999px; font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; flex-shrink:0; align-self:flex-start; }

/* Hero rate display — replaces .sf24-tty-er-headline */
.sf24-tty-er-hero { display:flex; align-items:flex-end; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.sf24-tty-er-rate { display:inline-flex; align-items:flex-end; line-height:1; font-family:var(--tty-fh); }
.sf24-tty-er-rate-num { font-size:56px; font-weight:900; letter-spacing:-.04em; color:var(--tty-tx); font-variant-numeric:tabular-nums; transition:color .35s; }
.sf24-tty-er-rate-pct { font-size:24px; font-weight:800; color:var(--tty-tm); margin-left:3px; padding-bottom:8px; }
.sf24-tty-er-rate-meta { display:flex; flex-direction:column; gap:3px; padding-bottom:8px; min-width:0; flex:1; }
.sf24-tty-er-rating-label { font-family:var(--tty-fh); font-size:14px; font-weight:800; color:var(--tty-tx); letter-spacing:-.005em; }
.sf24-tty-er-rate-explain { font-size:11px; color:var(--tty-tm); font-weight:500; }

/* Reuse rating colors */
.sf24-tty-er.is-critical .sf24-tty-er-rate-num { color:#dc2626; }
.sf24-tty-er.is-critical .sf24-tty-er-rating-label { color:#dc2626; }
.sf24-tty-er.is-low .sf24-tty-er-rate-num { color:#c2410c; }
.sf24-tty-er.is-low .sf24-tty-er-rating-label { color:#c2410c; }
.sf24-tty-er.is-avg .sf24-tty-er-rate-num { color:#92400e; }
.sf24-tty-er.is-avg .sf24-tty-er-rating-label { color:#92400e; }
.sf24-tty-er.is-good .sf24-tty-er-rate-num { color:#059669; }
.sf24-tty-er.is-good .sf24-tty-er-rating-label { color:#059669; }
.sf24-tty-er.is-excellent .sf24-tty-er-rate-num { color:#10b981; }
.sf24-tty-er.is-excellent .sf24-tty-er-rating-label { color:#10b981; }

/* Stats grid */
.sf24-tty-er-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:8px; margin-top:18px; padding-top:16px; border-top:1px dashed var(--tty-bd); }
.sf24-tty-er-stat { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 10px; background:var(--tty-bg); border:1px solid var(--tty-bd); border-radius:11px; text-align:center; transition:transform .2s, border-color .2s; }
.sf24-tty-er-stat[hidden] { display:none !important; }
.sf24-tty-er-stat:hover { transform:translateY(-1px); border-color:rgba(124,58,237,.3); }
.sf24-tty-er-stat-icon { font-size:18px; line-height:1; margin-bottom:2px; }
.sf24-tty-er-stat-num { font-family:var(--tty-fh); font-size:18px; font-weight:900; color:var(--tty-tx); letter-spacing:-.01em; font-variant-numeric:tabular-nums; line-height:1.1; }
.sf24-tty-er-stat-label { font-size:10.5px; font-weight:700; color:var(--tty-tm); letter-spacing:.02em; line-height:1.3; }

@media (max-width:520px) {
  .sf24-tty-er-profile { gap:11px; padding-bottom:14px; margin-bottom:14px; }
  .sf24-tty-er-pic { width:54px; height:54px; }
  .sf24-tty-er-profile-name { font-size:14.5px; }
  .sf24-tty-er-profile-name strong { max-width:140px; }
  .sf24-tty-er-rate-num { font-size:44px; }
  .sf24-tty-er-rate-pct { font-size:20px; }
  .sf24-tty-er-stats { grid-template-columns:1fr 1fr; }
  .sf24-tty-er-tier-pill { font-size:9.5px; padding:4px 9px; }
}

/* ── ENGAGEMENT-RATE v3 — modern compact hero with side-by-side layout ── */

/* HERO CARD — gradient orb backdrop, profile left, big rate right */
.sf24-tty-er-hero-card { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px; align-items:center; padding:22px 22px 24px; margin:0 0 22px; background:linear-gradient(135deg, #fff 0%, #faf9ff 50%, #fff 100%); border:1px solid rgba(124,58,237,.12); border-radius:20px; overflow:hidden; box-shadow:0 8px 28px -12px rgba(124,58,237,.18); }
.sf24-tty-er-orb { position:absolute; top:-30%; right:-10%; width:220px; height:220px; background:radial-gradient(circle at center, rgba(225,48,108,.18) 0%, rgba(91,81,216,.12) 40%, transparent 70%); border-radius:50%; pointer-events:none; filter:blur(20px); }
.sf24-tty-er-hero-card > * { position:relative; z-index:1; }

/* LEFT: Profile (pic + info) */
.sf24-tty-er-hero-left { display:flex; align-items:center; gap:14px; min-width:0; }
.sf24-tty-er-pic { position:relative; width:68px; height:68px; flex-shrink:0; border-radius:50%; padding:2.5px; background:conic-gradient(from 45deg, #FCAF45, #F77737, #E1306C, #C13584, #5B51D8, #FCAF45); box-shadow:0 6px 18px -4px rgba(225,48,108,.4); }
.sf24-tty-er-pic-img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; border:2.5px solid #fff; box-sizing:border-box; background:#fff; }
.sf24-tty-er-pic-fallback { display:none; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; background:#1a1033; color:#fff; font-family:var(--tty-fh); font-size:26px; font-weight:900; border:2.5px solid #fff; box-sizing:border-box; }
.sf24-tty-er-profile-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sf24-tty-er-profile-name { display:inline-flex; align-items:center; gap:6px; font-family:var(--tty-fh); font-size:15.5px; font-weight:800; color:var(--tty-tx); letter-spacing:-.01em; }
.sf24-tty-er-profile-name strong { font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; }
.sf24-tty-er-verified { display:inline-flex; align-items:center; flex-shrink:0; }
.sf24-tty-er-verified[hidden] { display:none !important; }
.sf24-tty-er-profile-handle { font-size:12.5px; color:var(--tty-ts); font-family:'SF Mono', Monaco, monospace; font-weight:600; line-height:1.2; }
.sf24-tty-er-tier-pill { display:inline-flex; align-items:center; padding:3px 9px; background:linear-gradient(135deg, rgba(124,58,237,.12), rgba(225,48,108,.08)); color:var(--tty-ac); border:1px solid rgba(124,58,237,.22); border-radius:5px; font-size:9.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; align-self:flex-start; margin-top:3px; }

/* RIGHT: Big rate */
.sf24-tty-er-hero-right { text-align:right; padding-left:14px; border-left:1px solid rgba(124,58,237,.1); }
.sf24-tty-er-rate { display:inline-flex; align-items:flex-end; line-height:.95; font-family:var(--tty-fh); }
.sf24-tty-er-rate-num { font-size:46px; font-weight:900; letter-spacing:-.04em; color:var(--tty-tx); font-variant-numeric:tabular-nums; transition:color .35s; }
.sf24-tty-er-rate-pct { font-size:20px; font-weight:800; color:var(--tty-tm); margin-left:1px; padding-bottom:5px; }
.sf24-tty-er-rating-label { font-family:var(--tty-fh); font-size:13px; font-weight:800; color:var(--tty-tx); letter-spacing:-.005em; margin-top:3px; line-height:1.2; }
.sf24-tty-er-rate-explain { font-size:10.5px; color:var(--tty-tm); font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:2px; }

/* Rating colors — re-apply to v3 element */
.sf24-tty-er.is-critical .sf24-tty-er-rate-num, .sf24-tty-er.is-critical .sf24-tty-er-rating-label { color:#dc2626; }
.sf24-tty-er.is-low .sf24-tty-er-rate-num, .sf24-tty-er.is-low .sf24-tty-er-rating-label { color:#c2410c; }
.sf24-tty-er.is-avg .sf24-tty-er-rate-num, .sf24-tty-er.is-avg .sf24-tty-er-rating-label { color:#92400e; }
.sf24-tty-er.is-good .sf24-tty-er-rate-num, .sf24-tty-er.is-good .sf24-tty-er-rating-label { color:#059669; }
.sf24-tty-er.is-excellent .sf24-tty-er-rate-num, .sf24-tty-er.is-excellent .sf24-tty-er-rating-label { color:#10b981; }

/* Gauge wrap */
.sf24-tty-er-gauge-wrap { padding:0 4px; margin-bottom:18px; }

/* Stats — modern horizontal cards: icon LEFT, num+label RIGHT */
.sf24-tty-er-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:9px; padding-top:18px; border-top:1px dashed rgba(124,58,237,.15); }
.sf24-tty-er-stat { display:flex; align-items:center; gap:11px; padding:11px 13px; background:#fff; border:1px solid var(--tty-bd); border-radius:11px; transition:all .2s; }
.sf24-tty-er-stat[hidden] { display:none !important; }
.sf24-tty-er-stat:hover { border-color:rgba(124,58,237,.3); box-shadow:0 6px 18px -8px rgba(124,58,237,.18); transform:translateY(-1px); }
.sf24-tty-er-stat-icon { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex-shrink:0; border-radius:9px; }
.sf24-tty-er-stat-icon[data-icon="followers"]      { background:rgba(124,58,237,.1); color:var(--tty-ac); }
.sf24-tty-er-stat-icon[data-icon="likes"]          { background:rgba(225,48,108,.1); color:#E1306C; }
.sf24-tty-er-stat-icon[data-icon="comments"]       { background:rgba(59,130,246,.1); color:#3b82f6; }
.sf24-tty-er-stat-icon[data-icon="reels"]          { background:rgba(245,158,11,.1); color:#f59e0b; }
.sf24-tty-er-stat-icon[data-icon="reel-comments"]  { background:rgba(16,185,129,.1); color:#10b981; }
.sf24-tty-er-stat-body { display:flex; flex-direction:column; min-width:0; line-height:1.15; }
.sf24-tty-er-stat-num { font-family:var(--tty-fh); font-size:18px; font-weight:900; color:var(--tty-tx); letter-spacing:-.015em; font-variant-numeric:tabular-nums; }
.sf24-tty-er-stat-label { font-size:10.5px; font-weight:700; color:var(--tty-tm); letter-spacing:.02em; margin-top:2px; }

@media (max-width:560px) {
  .sf24-tty-er-hero-card { grid-template-columns:1fr; gap:16px; padding:18px; }
  .sf24-tty-er-hero-right { text-align:left; padding-left:0; padding-top:14px; border-left:0; border-top:1px solid rgba(124,58,237,.1); }
  .sf24-tty-er-pic { width:58px; height:58px; }
  .sf24-tty-er-rate-num { font-size:40px; }
  .sf24-tty-er-stats { grid-template-columns:1fr 1fr; }
}

/* ── ENGAGEMENT-RATE v4 — flexbox-based, bulletproof layout ── */

.sf24-tty-er-hero-card { display:flex !important; align-items:center; justify-content:space-between; gap:18px; flex-wrap:nowrap; padding:18px 22px !important; min-height:auto !important; }
.sf24-tty-er-hero-card .sf24-tty-er-orb { top:-50%; right:-20%; width:160px; height:160px; opacity:.65; }

.sf24-tty-er-hero-left { display:flex; align-items:center; gap:13px; min-width:0; flex:0 1 auto; }
.sf24-tty-er-hero-right { padding-left:18px !important; padding-top:0 !important; border-left:1px solid rgba(124,58,237,.15) !important; border-top:0 !important; text-align:right; flex:0 0 auto; min-width:140px; }

.sf24-tty-er-pic { width:60px !important; height:60px !important; }
.sf24-tty-er-pic-img, .sf24-tty-er-pic-fallback { border-width:2px !important; }

.sf24-tty-er-rate-num { font-size:38px !important; }
.sf24-tty-er-rate-pct { font-size:17px !important; padding-bottom:4px !important; }

/* Stats grid — fixed sensible columns (no auto-fit orphan-row issue) */
.sf24-tty-er-stats {
  display:grid !important;
  grid-template-columns:repeat(5, 1fr) !important;
  gap:8px !important;
  padding-top:16px !important;
}
.sf24-tty-er-stat { padding:10px 11px !important; gap:9px !important; }
.sf24-tty-er-stat-icon { width:32px !important; height:32px !important; border-radius:8px !important; }
.sf24-tty-er-stat-num { font-size:15.5px !important; }
.sf24-tty-er-stat-label { font-size:9.5px !important; }

@media (max-width:1100px) {
  .sf24-tty-er-stats { grid-template-columns:repeat(3, 1fr) !important; }
}
@media (max-width:700px) {
  .sf24-tty-er-hero-card { flex-direction:column !important; align-items:stretch !important; gap:14px !important; }
  .sf24-tty-er-hero-right { text-align:left !important; padding-left:0 !important; padding-top:14px !important; border-left:0 !important; border-top:1px solid rgba(124,58,237,.12) !important; }
  .sf24-tty-er-rate-num { font-size:34px !important; }
  .sf24-tty-er-stats { grid-template-columns:repeat(2, 1fr) !important; }
}

/* Tier pill more visible */
.sf24-tty-er-tier-pill { font-size:9px !important; padding:3px 8px !important; }

/* Profile counts row + bio */
.sf24-tty-er-profile-counts { display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--tty-ts); margin-top:2px; line-height:1.3; }
.sf24-tty-er-profile-counts strong { color:var(--tty-tx); font-family:var(--tty-fh); font-weight:800; font-variant-numeric:tabular-nums; }
.sf24-tty-er-counts-sep { color:var(--tty-tm); font-weight:400; }
.sf24-tty-er-bio { margin:6px 0 0; padding:0; font-size:11.5px; color:var(--tty-ts); line-height:1.45; max-width:380px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sf24-tty-er-bio[hidden] { display:none !important; }
@media (max-width:700px) { .sf24-tty-er-bio { -webkit-line-clamp:3; max-width:none; } }

/* ── ENGAGEMENT-RATE v5 — tighter hero, bigger profile pic ── */
.sf24-tty-er-hero-card { padding:14px 18px !important; gap:14px !important; }
.sf24-tty-er-pic { width:84px !important; height:84px !important; padding:3px !important; }
.sf24-tty-er-pic-img, .sf24-tty-er-pic-fallback { border-width:2.5px !important; }
.sf24-tty-er-hero-left { gap:14px !important; }
.sf24-tty-er-profile-info { gap:1px !important; }
.sf24-tty-er-profile-name { font-size:16px !important; }
.sf24-tty-er-profile-handle { font-size:12px !important; }
.sf24-tty-er-profile-counts { margin-top:1px !important; font-size:11px !important; }
.sf24-tty-er-bio { margin-top:4px !important; font-size:11.5px !important; -webkit-line-clamp:2; max-width:340px !important; }
.sf24-tty-er-tier-pill { margin-top:4px !important; }

.sf24-tty-er-hero-right { padding-left:14px !important; min-width:120px; }
.sf24-tty-er-rate-num { font-size:36px !important; }
.sf24-tty-er-rate-pct { font-size:16px !important; padding-bottom:3px !important; }
.sf24-tty-er-rating-label { font-size:12px !important; margin-top:2px !important; }
.sf24-tty-er-rate-explain { font-size:9.5px !important; margin-top:1px !important; }

@media (max-width:700px) {
  .sf24-tty-er-pic { width:72px !important; height:72px !important; }
  .sf24-tty-er-rate-num { font-size:32px !important; }
}

/* Post/Reel-specific insight block — appears when user submitted a post URL */
.sf24-tty-er-post { margin-top:18px; padding:14px 16px; border-radius:14px; background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(245,133,41,.04)); border:1px solid rgba(124,58,237,.18); }
.sf24-tty-er-post[hidden] { display:none !important; }
.sf24-tty-er-post-head { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.sf24-tty-er-post-icon { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:8px; background:linear-gradient(135deg, #833ab4 0%, #c026d3 50%, #fd1d1d 100%); color:#fff; flex-shrink:0; }
.sf24-tty-er-post-head strong { font-family:var(--tty-fh); font-size:13px; font-weight:900; color:var(--tty-tx); letter-spacing:-.005em; }
.sf24-tty-er-post-link { margin-left:auto; font-size:11.5px; font-weight:800; color:var(--tty-ac) !important; text-decoration:none !important; transition:color .15s; }
.sf24-tty-er-post-link:hover { color:#6d28d9 !important; text-decoration:underline !important; }
.sf24-tty-er-post-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:10px; }
.sf24-tty-er-post-stat { display:flex; flex-direction:column; gap:3px; padding:10px 12px; background:#fff; border-radius:10px; border:1px solid rgba(124,58,237,.12); }
.sf24-tty-er-post-stat--rate { background:linear-gradient(135deg, var(--tty-ac), #6d28d9); border:0; }
.sf24-tty-er-post-stat--rate .sf24-tty-er-post-stat-num { color:#fff; }
.sf24-tty-er-post-stat--rate .sf24-tty-er-post-stat-label { color:rgba(255,255,255,.85); }
.sf24-tty-er-post-stat-num { font-family:var(--tty-fh); font-size:18px; font-weight:900; color:var(--tty-tx); letter-spacing:-.02em; line-height:1.05; }
.sf24-tty-er-post-stat-pct { font-size:14px; opacity:.85; margin-left:1px; }
.sf24-tty-er-post-stat-label { font-size:10.5px; color:var(--tty-ts); font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.sf24-tty-er-post-insight { margin:0; font-size:12.5px; color:var(--tty-ts); line-height:1.5; padding:10px 12px; background:#fff; border-radius:9px; border-left:3px solid var(--tty-ac); }
@media (max-width: 540px) { .sf24-tty-er-post-stats { grid-template-columns:1fr 1fr; } }

/* ── Where you can grow — peer-comparison bars ── */
.sf24-tty-er-growth { margin-top:18px; padding-top:18px; border-top:1px dashed rgba(124,58,237,.18); }
.sf24-tty-er-growth[hidden] { display:none !important; }
.sf24-tty-er-growth-title { display:flex; align-items:center; gap:7px; font-family:var(--tty-fh); margin:0 0 14px; font-size:13px; font-weight:900; color:var(--tty-tx); letter-spacing:-.005em; }
.sf24-tty-er-growth-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:rgba(124,58,237,.1); color:var(--tty-ac); }
.sf24-tty-er-growth-bars { display:flex; flex-direction:column; gap:10px; }

.sf24-tty-er-growth-row { padding:10px 12px; border-radius:10px; background:#fff; border:1px solid var(--tty-bd); transition:border-color .2s; }
.sf24-tty-er-growth-row--strong { border-color:rgba(16,185,129,.25); background:linear-gradient(135deg, rgba(16,185,129,.04), #fff); }
.sf24-tty-er-growth-row--avg    { border-color:rgba(245,158,11,.22); background:linear-gradient(135deg, rgba(245,158,11,.03), #fff); }
.sf24-tty-er-growth-row--below  { border-color:rgba(220,38,38,.22); background:linear-gradient(135deg, rgba(220,38,38,.04), #fff); }

.sf24-tty-er-growth-head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:7px; }
.sf24-tty-er-growth-label { font-family:var(--tty-fh); font-size:12.5px; font-weight:800; color:var(--tty-tx); letter-spacing:-.005em; }
.sf24-tty-er-growth-status { font-size:10px; font-weight:900; padding:3px 9px; border-radius:5px; letter-spacing:.06em; text-transform:uppercase; flex-shrink:0; }
.sf24-tty-er-growth-row--strong .sf24-tty-er-growth-status { background:rgba(16,185,129,.15); color:var(--tty-success-d); }
.sf24-tty-er-growth-row--avg    .sf24-tty-er-growth-status { background:rgba(245,158,11,.15); color:#92400e; }
.sf24-tty-er-growth-row--below  .sf24-tty-er-growth-status { background:rgba(220,38,38,.12); color:#b91c1c; }

.sf24-tty-er-growth-bar { position:relative; height:6px; background:rgba(15,15,17,.06); border-radius:6px; overflow:hidden; margin-bottom:6px; }
.sf24-tty-er-growth-bar > span { display:block; height:100%; border-radius:6px; transition:width 1s cubic-bezier(.34,1.56,.64,1); }
.sf24-tty-er-growth-row--strong .sf24-tty-er-growth-bar > span { background:linear-gradient(90deg, var(--tty-success), var(--tty-success-d)); }
.sf24-tty-er-growth-row--avg    .sf24-tty-er-growth-bar > span { background:linear-gradient(90deg, #fbbf24, #f59e0b); }
.sf24-tty-er-growth-row--below  .sf24-tty-er-growth-bar > span { background:linear-gradient(90deg, #f87171, #dc2626); }

.sf24-tty-er-growth-meta { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:11px; color:var(--tty-tm); }
.sf24-tty-er-growth-pct strong { color:var(--tty-tx); font-family:var(--tty-fh); font-weight:900; font-variant-numeric:tabular-nums; }
.sf24-tty-er-growth-fix { font-size:11.5px; color:#92400e; font-weight:600; padding:3px 9px; background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25); border-radius:6px; }
.sf24-tty-er-growth-fix strong { color:#7c2d12; font-weight:800; }

/* AI analysis text block — premium quote-style */
.sf24-tty-er-analysis { display:flex; align-items:flex-start; gap:11px; padding:13px 14px; margin-bottom:14px; background:linear-gradient(135deg, rgba(124,58,237,.06), rgba(225,48,108,.04)); border-left:3px solid var(--tty-ac); border-radius:0 10px 10px 0; }
.sf24-tty-er-analysis[hidden] { display:none !important; }
.sf24-tty-er-analysis-icon { display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; flex-shrink:0; border-radius:8px; background:linear-gradient(135deg, var(--tty-ac), #6d28d9); color:#fff; box-shadow:0 4px 10px -3px rgba(124,58,237,.4); }
.sf24-tty-er-analysis p { margin:0; font-size:13px; line-height:1.55; color:var(--tty-tx); font-weight:500; letter-spacing:-.005em; }

/* Conditional growth headline modes */
.sf24-tty-er-growth-subline { margin:0 0 14px; font-size:12.5px; color:var(--tty-ts); line-height:1.5; }
.sf24-tty-er-growth[data-mode="crushing"] .sf24-tty-er-growth-title { color:var(--tty-success-d); }
.sf24-tty-er-growth[data-mode="crushing"] .sf24-tty-er-growth-icon { background:rgba(16,185,129,.12); color:var(--tty-success-d); }
.sf24-tty-er-growth[data-mode="priorities"] .sf24-tty-er-growth-title { color:#b91c1c; }
.sf24-tty-er-growth[data-mode="priorities"] .sf24-tty-er-growth-icon { background:rgba(220,38,38,.1); color:#dc2626; }
.sf24-tty-er-growth-icon { width:24px !important; height:24px !important; font-size:13px !important; }

/* Disable old analysis box (replaced by Variante C) */
.sf24-tty-er-analysis { display:none !important; }

/* Old "AI-picked" badge inside recos title — removed (now in pre-title) */
.sf24-tty-er-recos-ai-tag { display:none !important; }

/* ========== AI Insight Box — Variante C (Hybrid premium animated) ========== */
.sf24-ai-insight-card {
  background: white;
  border-radius: 16px;
  padding: 22px 24px;
  border: 1.5px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
}
.sf24-ai-insight-card[hidden] { display: none !important; }
.sf24-ai-insight-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(139,92,246,.05) 25%, rgba(236,72,153,.05) 50%, rgba(245,158,11,.05) 75%, transparent 100%);
  animation: sf24-sweep-right 5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sf24-sweep-right { 0%,100% { transform: translateX(0%); } 50% { transform: translateX(50%); } }

.sf24-ai-insight-content { position: relative; z-index: 1; }
.sf24-ai-insight-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.sf24-ai-insight-icon-wrap { position: relative; width: 44px; height: 44px; flex-shrink: 0; }
.sf24-ai-insight-icon-glow { position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(135deg, #8B5CF6, #EC4899); filter: blur(10px); opacity: .4; animation: sf24-glow-pulse 2s ease-in-out infinite; }
@keyframes sf24-glow-pulse { 0%,100% { opacity: .3; transform: scale(1); } 50% { opacity: .6; transform: scale(1.1); } }
.sf24-ai-insight-icon { position: relative; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(135deg, #8B5CF6 0%, #EC4899 100%); display: flex; align-items: center; justify-content: center; z-index: 1; }
.sf24-ai-insight-icon svg { width: 22px; height: 22px; color: #fff; animation: sf24-icon-float 3s ease-in-out infinite; }
@keyframes sf24-icon-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }

.sf24-ai-insight-titles { flex: 1; min-width: 0; }
.sf24-ai-insight-pre-title { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; background: linear-gradient(135deg, #8B5CF6, #EC4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: .6px; text-transform: uppercase; margin-bottom: 3px; }
.sf24-ai-insight-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,.6); animation: sf24-pulse-dot 1.5s ease-in-out infinite; flex-shrink: 0; }
@keyframes sf24-pulse-dot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: .5; } }
.sf24-ai-insight-main-title { font-family: var(--tty-fh); font-size: 15px; font-weight: 800; color: #1d1d1f; letter-spacing: -.01em; line-height: 1.2; }

.sf24-ai-insight-progress-line { height: 3px; background: #f2f2f7; border-radius: 2px; margin-bottom: 14px; overflow: hidden; position: relative; }
.sf24-ai-insight-progress-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #8B5CF6 0%, #EC4899 50%, #F59E0B 100%); background-size: 200% 100%; animation: sf24-progress-flow 3s linear infinite; border-radius: 2px; }
@keyframes sf24-progress-flow { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }

.sf24-ai-insight-text { font-size: 14.5px; color: #1d1d1f; line-height: 1.65; margin: 0 0 16px; opacity: 0; animation: sf24-fade-in .6s ease .3s forwards; }
@keyframes sf24-fade-in { to { opacity: 1; } }
.sf24-ai-insight-text .sf24-highlight { font-weight: 700; background: linear-gradient(135deg, #8B5CF6, #EC4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.sf24-ai-insight-footer { display: flex; align-items: center; justify-content: space-between; font-size: 12px; flex-wrap: wrap; gap: 10px; }
.sf24-ai-insight-tags { display: flex; gap: 7px; flex-wrap: wrap; }
.sf24-ai-insight-tag { padding: 4px 10px; background: rgba(139,92,246,.08); color: #8B5CF6; border-radius: 7px; font-weight: 600; font-size: 11px; }
.sf24-ai-insight-tag[hidden] { display: none !important; }
.sf24-ai-insight-tag strong { font-family: var(--tty-fh); font-weight: 800; color: #6d28d9; padding-right: 1px; }
.sf24-ai-insight-cta { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #8B5CF6 !important; cursor: pointer; text-decoration: none !important; transition: opacity .2s, transform .25s; font-size: 12px; }
.sf24-ai-insight-cta:hover { opacity: .75; transform: translateY(1px); }

@media (max-width: 600px) {
  .sf24-ai-insight-card { padding: 16px 18px; }
  .sf24-ai-insight-header { gap: 10px; margin-bottom: 12px; }
  .sf24-ai-insight-icon-wrap { width: 38px; height: 38px; }
  .sf24-ai-insight-icon svg { width: 18px; height: 18px; }
  .sf24-ai-insight-text { font-size: 13.5px; }
  .sf24-ai-insight-main-title { font-size: 14px; }
}
/* Animations stay on for everyone — only ensure text doesn't stay invisible if browser overrides */
@media (prefers-reduced-motion: reduce) {
  .sf24-ai-insight-text { opacity: 1 !important; }
}

/* Animated bouncing arrow on the CTA */
.sf24-ai-insight-cta-arrow { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:rgba(139,92,246,.12); transition:background .2s, transform .2s; animation:sf24-bounce-down 1.6s cubic-bezier(.5,0,.4,1) infinite; }
.sf24-ai-insight-cta:hover .sf24-ai-insight-cta-arrow { background:rgba(139,92,246,.22); animation-duration:.9s; }
@keyframes sf24-bounce-down {
  0%, 100% { transform:translateY(0); }
  20% { transform:translateY(-2px); }
  40% { transform:translateY(4px); }
  55% { transform:translateY(-1px); }
  70% { transform:translateY(2px); }
}

/* AI Insight Card — skeleton/loading state (shown before AI responds) */
.sf24-ai-insight-card.is-loading .sf24-ai-insight-text { display:none; }
.sf24-ai-insight-card.is-loading .sf24-ai-insight-footer { display:none; }
.sf24-ai-insight-card.is-loading::after {
  content:'AI is analyzing your profile…';
  display:block;
  font-size:13px;
  color:#8B5CF6;
  font-weight:600;
  letter-spacing:-.005em;
  margin-bottom:6px;
  position:relative;
  z-index:1;
}
.sf24-ai-insight-card.is-loading .sf24-ai-insight-content::after {
  content:'';
  display:block;
  height:10px;
  background:linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 30%, #f3f4f6 60%, #e5e7eb 100%);
  background-size:200% 100%;
  border-radius:5px;
  margin-top:8px;
  animation:sf24-ai-skel 1.4s linear infinite;
}
.sf24-ai-insight-card.is-loading .sf24-ai-insight-content::before {
  content:'';
  display:block;
  height:10px;
  width:80%;
  background:linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 30%, #f3f4f6 60%, #e5e7eb 100%);
  background-size:200% 100%;
  border-radius:5px;
  margin-top:4px;
  animation:sf24-ai-skel 1.4s linear infinite .15s;
}
@keyframes sf24-ai-skel { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }

/* ── "Recommended for you" — premium AI treatment with gradient title + animated badge ── */
.sf24-tty-er-recos-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 14px; flex-wrap:wrap; }
.sf24-tty-er-recos-title { display:inline-flex !important; align-items:center; gap:8px; font-family:var(--tty-fh); margin:0 !important; font-size:14px; font-weight:900; letter-spacing:-.005em; }
.sf24-tty-er-recos-title-text { background:linear-gradient(135deg, #8B5CF6, #EC4899 60%, #F59E0B); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.sf24-tty-er-recos-spark { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:7px; background:linear-gradient(135deg, #8B5CF6, #EC4899); color:#fff; box-shadow:0 4px 10px -3px rgba(139,92,246,.45); animation:sf24-spark-spin 6s linear infinite; }
@keyframes sf24-spark-spin { from { transform:rotate(0); } to { transform:rotate(360deg); } }
.sf24-tty-er-recos-spark svg { width:14px; height:14px; }

/* AI badge */
.sf24-tty-er-recos-aibadge { display:inline-flex; align-items:center; gap:6px; padding:5px 11px 5px 9px; background:rgba(139,92,246,.1); color:#7c3aed; border:1px solid rgba(139,92,246,.25); border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.sf24-tty-er-recos-aibadge-dot { width:7px; height:7px; border-radius:50%; background:#10b981; box-shadow:0 0 8px rgba(16,185,129,.7); animation:sf24-pulse-dot 1.5s ease-in-out infinite; }

/* Recommendation card — gradient border + ranked badge + staggered fade-in */
.sf24-tty-er-recos-grid { gap:11px !important; }
.sf24-tty-er-reco {
  position:relative;
  display:flex !important;
  gap:11px !important;
  padding:13px !important;
  border-radius:13px !important;
  text-decoration:none !important;
  color:var(--tty-tx) !important;
  border:1.5px solid transparent !important;
  background-image:
    linear-gradient(#fff, #fff),
    linear-gradient(135deg, rgba(139,92,246,.5) 0%, rgba(236,72,153,.4) 50%, rgba(245,158,11,.4) 100%) !important;
  background-origin:border-box !important;
  background-clip:padding-box, border-box !important;
  transition:transform .25s cubic-bezier(.34,1.4,.64,1), box-shadow .3s !important;
  opacity:0;
  transform:translateY(8px);
  animation:sf24-reco-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes sf24-reco-in { to { opacity:1; transform:translateY(0); } }
.sf24-tty-er-reco:hover { transform:translateY(-3px) !important; box-shadow:0 16px 36px -12px rgba(139,92,246,.35) !important; }
.sf24-tty-er-reco:hover .sf24-tty-er-reco-cta-arrow { transform:translateX(4px); }

/* Rank-Badge (1 / 2 / 3) — top-right corner */
.sf24-tty-er-reco-rank {
  position:absolute;
  top:-7px; right:-7px;
  width:22px; height:22px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:linear-gradient(135deg, #8B5CF6, #EC4899);
  color:#fff;
  font-family:var(--tty-fh);
  font-size:11px;
  font-weight:900;
  box-shadow:0 4px 10px -2px rgba(139,92,246,.5), 0 0 0 2px #fff;
  z-index:2;
}

/* Match-Pill (Best/Strong/Good match) */
.sf24-tty-er-reco-match {
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  background:linear-gradient(135deg, rgba(139,92,246,.12), rgba(236,72,153,.08));
  color:#7c3aed;
  border-radius:5px;
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
  align-self:flex-start;
  margin-bottom:2px;
}
.sf24-tty-er-reco-match svg { color:#EC4899; flex-shrink:0; }

/* CTA arrow animation */
.sf24-tty-er-reco-cta { display:inline-flex !important; align-items:center; gap:3px; }
.sf24-tty-er-reco-cta-arrow { display:inline-block; transition:transform .25s cubic-bezier(.34,1.56,.64,1); }

/* ── 🎁 Premium Gift Coupon Card — replaces the small promo-tag ── */
.sf24-tty-coupon-card { position:relative; padding:18px 20px 16px; margin:0 0 20px; border-radius:16px; background:linear-gradient(135deg, #fff7ed 0%, #fef3c7 50%, #fff7ed 100%); border:1.5px dashed rgba(245,158,11,.45); overflow:hidden; }
.sf24-tty-coupon-bg { position:absolute; top:-50%; right:-15%; width:240px; height:240px; background:radial-gradient(circle, rgba(245,158,11,.22) 0%, transparent 65%); border-radius:50%; pointer-events:none; }
.sf24-tty-coupon-shine { position:absolute; top:0; bottom:0; left:-100%; width:60%; background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform:skewX(-22deg); pointer-events:none; animation:sf24-coupon-shine 4.5s ease-in-out infinite 1s; }
@keyframes sf24-coupon-shine { 0%,55%,100% { left:-100%; } 75% { left:200%; } }
.sf24-tty-coupon-card > * { position:relative; z-index:1; }

.sf24-tty-coupon-head { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.sf24-tty-coupon-gift { font-size:34px; line-height:1; flex-shrink:0; animation:sf24-coupon-bob 2.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes sf24-coupon-bob { 0%,100% { transform:rotate(-6deg) scale(1); } 50% { transform:rotate(6deg) scale(1.1); } }
.sf24-tty-coupon-headline { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sf24-tty-coupon-eyebrow { font-size:10px; font-weight:900; color:#b45309; letter-spacing:.1em; text-transform:uppercase; }
.sf24-tty-coupon-title { font-family:var(--tty-fh); font-size:17px; font-weight:900; color:#1a1033; letter-spacing:-.015em; line-height:1.25; }
.sf24-tty-coupon-pct { background:linear-gradient(135deg,#f59e0b,#dc2626); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; font-size:20px; }

.sf24-tty-coupon-codebox { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#fff; border:1.5px solid rgba(245,158,11,.3); border-radius:11px; margin-bottom:12px; box-shadow:0 4px 12px -6px rgba(245,158,11,.25); flex-wrap:wrap; }
.sf24-tty-coupon-codeline { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.sf24-tty-coupon-codelabel { font-size:9.5px; font-weight:900; color:#9ca3af; letter-spacing:.12em; text-transform:uppercase; flex-shrink:0; }
.sf24-tty-coupon-code { font-family:"SF Mono", Monaco, monospace; font-size:14px; font-weight:900; color:#92400e; padding:5px 11px; background:linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,133,41,.12)); border:1.5px dashed rgba(180,83,9,.35); border-radius:7px; letter-spacing:.06em; cursor:pointer; transition:all .15s; user-select:all; }
.sf24-tty-coupon-code:hover { background:linear-gradient(135deg, rgba(245,158,11,.28), rgba(245,133,41,.18)); border-style:solid; }
.sf24-tty-coupon-code.is-copied { background:rgba(16,185,129,.15); color:var(--tty-success-d); border-color:var(--tty-success-d); }
.sf24-tty-coupon-copy { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; background:linear-gradient(135deg,#1a1033,#3b1d6b); color:#fff; border:0; border-radius:9px; font-family:inherit; font-size:11.5px; font-weight:800; cursor:pointer; transition:all .2s; outline:none; flex-shrink:0; box-shadow:0 4px 10px -3px rgba(26,16,51,.4); }
.sf24-tty-coupon-copy:hover { transform:translateY(-1px); box-shadow:0 8px 18px -4px rgba(26,16,51,.5); }
.sf24-tty-coupon-copy.is-copied { background:linear-gradient(135deg,#10b981,#059669); }

.sf24-tty-coupon-rules { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; color:#92400e; }
.sf24-tty-coupon-rules li { display:inline-flex; align-items:center; gap:6px; font-weight:600; }
.sf24-tty-coupon-rules strong { color:#7c2d12; font-weight:800; font-variant-numeric:tabular-nums; }
.sf24-tty-coupon-check { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#10b981,#059669); color:#fff; font-size:9px; font-weight:900; flex-shrink:0; }
.sf24-tty-coupon-rule-time strong { color:#b91c1c; }
.sf24-tty-coupon-rule-time strong.is-urgent { animation:sf24-coupon-urgent 1s ease-in-out infinite; }
@keyframes sf24-coupon-urgent { 0%,100% { color:#b91c1c; } 50% { color:#f97316; } }

.sf24-tty-coupon-card--expired { background:#f3f4f6; border-color:#d1d5db; padding:14px 18px; display:flex; align-items:center; gap:10px; }
.sf24-tty-coupon-card--expired .sf24-tty-coupon-gift { font-size:22px; animation:none; }
.sf24-tty-coupon-card--expired strong { color:var(--tty-tm); font-family:var(--tty-fh); font-size:13.5px; font-weight:700; }

@media (max-width:560px) {
  .sf24-tty-coupon-codebox { gap:8px; }
  .sf24-tty-coupon-codeline { width:100%; }
  .sf24-tty-coupon-copy { width:100%; justify-content:center; }
  .sf24-tty-coupon-title { font-size:15px; }
  .sf24-tty-coupon-pct { font-size:18px; }
}

/* Coupon card — soft glow on hover */
.sf24-tty-coupon-card { transition: box-shadow .35s ease, transform .25s ease, border-color .25s ease; }
.sf24-tty-coupon-card:hover { border-color: rgba(245,158,11,.7); box-shadow: 0 0 0 4px rgba(245,158,11,.12), 0 16px 38px -10px rgba(245,158,11,.45); transform: translateY(-2px); }
.sf24-tty-coupon-card:hover .sf24-tty-coupon-bg { opacity: 1.2; }

/* Floating "Copied!" toast above the copy button */
.sf24-tty-copy-toast { position: absolute; top: -28px; left: 50%; transform: translateX(-50%) translateY(6px); background: linear-gradient(135deg,#10b981,#059669); color: #fff; padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 800; letter-spacing: -.005em; box-shadow: 0 8px 16px -4px rgba(16,185,129,.5); opacity: 0; transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); pointer-events: none; white-space: nowrap; z-index: 5; }
.sf24-tty-copy-toast.is-shown { opacity: 1; transform: translateX(-50%) translateY(0); }
.sf24-tty-copy-toast::after { content: ''; position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%) rotate(45deg); width: 8px; height: 8px; background: #059669; }

/* Position-relative on copy button so toast can anchor */
.sf24-tty-coupon-copy { position: relative; }
.sf24-tty-coupon-copy.is-copied { background: linear-gradient(135deg,#10b981,#059669) !important; box-shadow: 0 6px 14px -3px rgba(16,185,129,.5) !important; }

/* Item layout v2 — price moves into title row, no more right column */
.sf24-tty-item { grid-template-columns: 54px 1fr !important; align-items: flex-start !important; }
.sf24-tty-item-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.sf24-tty-item-titlerow .sf24-tty-item-name { flex: 1; min-width: 0; -webkit-line-clamp: 2; }
.sf24-tty-item-titlerow .sf24-tty-item-price { flex-shrink: 0; padding-top: 1px; white-space: nowrap; font-size: 15px; font-weight: 800; }

/* AI math-recommended quantity pill — shows the SPECIFIC dose AI suggests */
.sf24-tty-er-reco-qty { display:flex; flex-direction:column; gap:1px; padding:7px 10px; margin:5px 0 2px; background:linear-gradient(135deg, rgba(139,92,246,.08), rgba(245,158,11,.06)); border:1px dashed rgba(139,92,246,.35); border-radius:8px; line-height:1.25; }
.sf24-tty-er-reco-qty-label { font-size:8.5px; font-weight:900; color:#7c3aed; letter-spacing:.12em; text-transform:uppercase; }
.sf24-tty-er-reco-qty strong { font-family:var(--tty-fh); font-size:14px; font-weight:900; background:linear-gradient(135deg,#8B5CF6,#EC4899); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.sf24-tty-er-reco-qty-dist { font-size:10.5px; color:var(--tty-ts); font-weight:600; margin-top:1px; }

/* Trust badges on AI-recommendations — surface behavior signals (rating, non-drop, sales) */
.sf24-tty-er-reco-badges { display:inline-flex; flex-wrap:wrap; gap:5px; margin:4px 0 2px; }
.sf24-tty-er-reco-badge { display:inline-flex; align-items:center; padding:2px 7px; font-size:9.5px; font-weight:800; letter-spacing:.04em; border-radius:5px; line-height:1.4; white-space:nowrap; }
.sf24-tty-er-reco-badge--top-rated { background:rgba(245,158,11,.15); color:#92400e; border:1px solid rgba(245,158,11,.35); }
.sf24-tty-er-reco-badge--rated     { background:rgba(245,158,11,.1);  color:#92400e; }
.sf24-tty-er-reco-badge--non-drop  { background:rgba(16,185,129,.12); color:var(--tty-success-d); border:1px solid rgba(16,185,129,.3); }
.sf24-tty-er-reco-badge--best-seller { background:linear-gradient(135deg, rgba(220,38,38,.12), rgba(245,133,41,.1)); color:#b91c1c; border:1px solid rgba(220,38,38,.25); }
.sf24-tty-er-reco-badge--popular   { background:rgba(139,92,246,.1); color:#6d28d9; }

/* AI Confidence-Score pill — top-left corner of recommendation card */
.sf24-tty-er-reco { position: relative; }
.sf24-tty-er-reco-confidence {
  position: absolute;
  top: 8px; left: 8px;
  display: inline-flex; align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--tty-fh);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  z-index: 2;
  backdrop-filter: blur(4px);
  border: 1px solid transparent;
}
.sf24-tty-er-reco-confidence--high { background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(16,185,129,.08)); color: #047857; border-color: rgba(16,185,129,.35); }
.sf24-tty-er-reco-confidence--mid  { background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(236,72,153,.08)); color: #7c3aed; border-color: rgba(139,92,246,.3); }
.sf24-tty-er-reco-confidence--low  { background: rgba(245,158,11,.14); color: #92400e; border-color: rgba(245,158,11,.3); }
.sf24-tty-er-reco-confidence::before { content: '✦ '; font-weight: 800; opacity: .8; }