/* ============================================================
   Fabavio — TikTok utility screens (2026-09-23)
   ------------------------------------------------------------
   View-layer stylesheet for the secondary (non-feed) screens:
   money (earnings / wallet / withdraw), library (vault, purchases,
   bookmarks, lists), studio, settings, checkout + bottom sheets,
   and auth alignment (register / password reset reuse the approved
   login's .fab-* design language).

   Loaded per-page via a plain <link> in each page's @section('styles'),
   AFTER the Minify block — so these rules win ties against the compiled
   theme. tiktok-theme.css itself is untouched.

   Tokens come from tiktok-theme.css:
     --tt-bg #050507, --tt-surface #14141A, --tt-surface-2 #1E1E24,
     --tt-line, --tt-text, --tt-text-2, --tt-text-3,
     --tt-violet #7C3CFF, --tt-coral #FF5C62
   ============================================================ */

/* ---------- Page primitives ---------- */

.tt-u-page {
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 48px);
  max-width: 980px;
  margin: 0 auto;
}
.tt-u-page-pad { padding: 16px 16px 0; }

.tt-u-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--tt-text);
  margin: 22px 0 10px;
}
.tt-u-section-title:first-child { margin-top: 0; }

.tt-u-head-spacer { width: 38px; flex: 0 0 38px; }

/* Compact primary action inside .tt-page-head (44px touch target via padding) */
.tt-u-head-btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 10px;
  flex-shrink: 0;
}

/* Stat cards: 2-up on phones, 4-up on desktop */
.tt-u-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}
@media (min-width: 768px) {
  .tt-u-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.tt-u-stat {
  background: var(--tt-surface);
  border: 1px solid var(--tt-line);
  border-radius: 14px;
  padding: 14px;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.tt-u-stat .tt-u-stat-label {
  font-size: 12px;
  color: var(--tt-text-3);
  font-weight: 600;
}
.tt-u-stat .tt-u-stat-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--tt-text);
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.tt-u-stat.tt-u-stat-accent { border-top: 3px solid var(--tt-violet); }

/* Period filter chips (scrollable row of links) */
.tt-u-period {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px 16px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tt-u-period::-webkit-scrollbar { display: none; }
.tt-u-period .tt-chip {
  min-height: 36px;
  text-decoration: none;
}

/* Wallet balance hero */
.tt-u-balance-hero {
  background: linear-gradient(135deg, #7C3CFF 0%, #5B21B6 55%, #3B1470 100%);
  border: 0;
  border-radius: 18px;
  padding: 20px;
  color: #fff;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.tt-u-balance-hero::after {
  content: "";
  position: absolute;
  right: -60px; top: -60px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22) 0%, transparent 70%);
  pointer-events: none;
}
.tt-u-balance-hero .tt-u-balance-label {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.tt-u-balance-hero .wallet-total-amount {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
.tt-u-balance-hero .tt-u-balance-copy {
  font-size: 13px;
  color: rgba(255,255,255,.82);
  margin: 8px 0 0;
}

/* Segmented deposit/withdraw tabs (markup stays .nav-pills) */
.tt-u-tabs.nav-pills {
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-line);
  border-radius: 14px;
  padding: 4px;
}
.tt-u-tabs.nav-pills .nav-link {
  border-radius: 10px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tt-text-2);
  font-weight: 600;
}
.tt-u-tabs.nav-pills .nav-link.active {
  background: #fff !important;
  color: #000 !important;
  font-weight: 700;
}

/* Tables on dark: visible striping + readable headers */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255,255,255,.028);
}
.table tfoot td, .table tfoot th {
  border-top: 2px solid var(--tt-line);
}

/* Progress bars on dark */
.progress {
  background-color: var(--tt-surface-2);
  border-radius: 999px;
}
.progress-bar {
  background-color: var(--tt-violet);
  border-radius: 999px;
}

/* ---------- Earnings ---------- */

.earnings-chart { display: flex; align-items: flex-end; gap: 3px; height: 170px; padding: 0 2px; }
.earnings-chart .bar-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; height: 100%; }
.earnings-chart .bar-stack { display: flex; flex-direction: column-reverse; width: 100%; border-radius: 3px 3px 0 0; overflow: hidden; }
.earnings-chart .bar-stack .seg { width: 100%; min-height: 0; }
.earnings-chart .bar-zero { background: var(--tt-surface-2); border-radius: 2px; height: 2px; width: 100%; }
.earnings-chart .bar-label { font-size: 9px; color: var(--tt-text-3); text-align: center; margin-top: 3px; white-space: nowrap; overflow: hidden; }
.earnings-legend .legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.earnings-summary-card { border-left: 4px solid var(--tt-violet) !important; }

/* Studio CTR / retention colors, tuned for dark */
.ctr-good { color: #4ade80; } .ctr-ok { color: #fbbf24; } .ctr-low { color: var(--tt-text-3); }
.ret-high { color: #4ade80; } .ret-medium { color: #fbbf24; } .ret-low { color: var(--tt-coral); } .ret-unknown { color: var(--tt-text-3); }

/* ---------- Wallet / withdraw ---------- */

.tt-u-fees-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 13px;
  color: var(--tt-text-2);
}
.tt-u-fees-row .wallet-pending-amount { color: var(--tt-text); }

.withdrawals-form-wrapper .input-group-text ion-icon,
.deposit-amount-field .input-group-text ion-icon { font-size: 20px; }

/* Stack the two-column method/identifier row on phones (markup untouched) */
@media (max-width: 767.98px) {
  .withdrawals-form-wrapper > .input-group .d-flex.flex-row.w-100 {
    flex-wrap: wrap;
  }
  .withdrawals-form-wrapper > .input-group .d-flex.flex-row.w-100 > .form-group.w-50 {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.withdrawal-continue-btn.tt-btn,
.deposit-continue-btn.tt-btn {
  margin-top: 8px;
}

/* Saved payout account cards */
.tt-u-payout-card {
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-line) !important;
  border-radius: 14px;
}
.tt-u-payout-card .badge-primary { background: var(--tt-violet); }

/* Payout account preview strip inside the withdraw form */
.saved-payout-account-preview.card {
  background: var(--tt-surface-2) !important;
  border: 1px solid var(--tt-line) !important;
  border-radius: 12px;
}

/* ---------- Fan vault (My Purchases) ---------- */

.fan-vault-thumb { width: 100%; height: 150px; object-fit: cover; background: #0a0a0c; }
.fan-vault-thumb-placeholder {
  width: 100%; height: 150px;
  background: var(--tt-surface-2);
  display: flex; align-items: center; justify-content: center;
  color: var(--tt-text-3);
}
.fan-vault-card { overflow: hidden; position: relative; }
.tt-u-price-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
}

/* Purchase list rows (messages tab): clean dark rows, 44px+ targets */
.tt-u-purchase-row.list-group-item {
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: 14px 16px;
  min-height: 72px;
}
.tt-u-purchase-row .tt-u-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* ---------- Lists ---------- */

.list-link {
  color: var(--tt-text);
  transition: background .15s ease;
}
.list-link:hover { background: rgba(255,255,255,.04); color: var(--tt-text); text-decoration: none; }
.list-item hr { border-color: var(--tt-line); margin: 4px 0; }
.list-box-avatars-wrapper .user-avatar {
  width: 40px; height: 40px;
  border: 2px solid var(--tt-surface);
  margin-left: -10px;
}
.list-box-avatars-wrapper .user-avatar:first-child { margin-left: 0; }

.list-members-search-wrapper { background: var(--tt-bg); }
.list-members-search-field {
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-line);
  border-radius: 12px;
  padding: 4px 12px;
}
.list-members-search-icon { color: var(--tt-text-3); }
.list-members-search-input.form-control {
  background: transparent !important;
  border: 0 !important;
  min-height: 40px;
}

/* ---------- Media vault (creator library) ---------- */

.vault-page-header {
  background: rgba(5,5,7,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.vault-heading-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.vault-upload-button.tt-btn {
  min-height: 40px;
  padding: 0 16px;
  font-size: 14px;
}
.vault-upload-button.tt-btn ion-icon { font-size: 18px; }

/* ---------- Bookmarks ---------- */

.tt-u-hr { border-color: var(--tt-line); }
.bookmarks-menu-wrapper .card-settings { border-color: var(--tt-line); }
.bookmarks-nav .list-group-item {
  min-height: 52px;
  display: flex;
  align-items: center;
}
.bookmarks-nav .list-group-item.active {
  background: var(--tt-violet-soft) !important;
  color: #fff !important;
}
.bookmarks-nav .list-group-item.active ion-icon { color: var(--tt-violet); }

/* ---------- Settings ---------- */

.settings-menu .settings-nav .list-group-item {
  min-height: 52px;
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-weight: 600;
}
.settings-menu .settings-nav .list-group-item.active {
  background: var(--tt-violet-soft) !important;
  color: #fff !important;
  border-left: 3px solid var(--tt-violet);
}
.settings-menu .settings-nav .list-group-item ion-icon { font-size: 22px; }
.settings-content .tt-u-section-title { padding: 0 16px; }
@media (min-width: 768px) {
  .settings-content .tt-u-section-title { padding: 0; }
}

/* ---------- Checkout modal (visual polish only) ----------
   Money-logic safety: every id, name, data-* and JS hook is untouched.
   Only colors, spacing and button treatment change. */

.checkout-dialog .modal-content { max-height: 92dvh; }
.checkout-dialog .modal-body { overscroll-behavior: contain; }

.checkout-continue-btn {
  background: var(--tt-violet) !important;
  border: 0 !important;
  color: #fff !important;
  min-height: 50px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
}
.checkout-continue-btn:hover { background: #6E2BEA !important; color: #fff !important; }
.checkout-dialog .modal-footer { justify-content: stretch; padding: 14px 20px calc(env(safe-area-inset-bottom, 0px) + 14px); }

.checkout-payment-provider {
  background: var(--tt-surface-2);
  border: 1.5px solid var(--tt-line);
  border-radius: 12px;
  min-height: 64px;
  min-width: 64px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.checkout-payment-provider img { max-height: 26px; max-width: 84px; }
.checkout-payment-provider.selected {
  border-color: var(--tt-violet);
  box-shadow: 0 0 0 3px rgba(124,60,255,.28);
  background: var(--tt-violet-soft);
}
.checkout-payment-box-section h6 { color: var(--tt-text); }
.checkout-top-description { color: var(--tt-text-2); }
.jf-checkout-summary-taxes,
.taxes-details { color: var(--tt-text-2); font-size: 13px; }

/* ---------- Bottom sheets: dark surfaces, violet confirm ----------
   The app is always-dark now (tiktok-theme.css); bottom-sheets.css only
   switches under body.dark_mode, which is never set. These unconditional
   variable overrides bring the sheets in line on pages that load this
   stylesheet. Layout and JS hooks are untouched. */

.jf-sheet {
  --jf-sheet-bg: #14141A;
  --jf-sheet-ink: #FFFFFF;
  --jf-sheet-muted: rgba(255,255,255,.6);
  --jf-sheet-line: rgba(255,255,255,.09);
  --jf-sheet-option-hover: rgba(255,255,255,.06);
  --jf-sheet-handle: rgba(255,255,255,.28);
  --jf-sheet-shadow: 0 -8px 32px rgba(0,0,0,.6);
}
.jf-sheet-option { min-height: 52px; }
.jf-sheet-option-icon {
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-line);
}
.jf-sheet-divider { background: #000; }

.jf-checkout-provider {
  background: var(--tt-surface-2);
  border: 1.5px solid var(--tt-line);
  border-radius: 12px;
  min-height: 56px;
}
.jf-checkout-provider img { max-height: 24px; max-width: 78px; filter: none; }
.jf-checkout-provider[aria-checked="true"] {
  border-color: var(--tt-violet);
  box-shadow: 0 0 0 3px rgba(124,60,255,.28);
  background: var(--tt-violet-soft);
}
.jf-checkout-provider.jf-provider-disabled { opacity: .35; }
.jf-checkout-confirm {
  background: var(--tt-violet);
  border: 0;
  color: #fff;
  min-height: 50px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 16px;
  width: 100%;
}
.jf-checkout-confirm:hover:not(:disabled) { background: #6E2BEA; color: #fff; }
.jf-checkout-confirm:disabled { background: var(--tt-surface-2); color: var(--tt-text-3); }
.jf-checkout-summary {
  background: var(--tt-surface-2);
  border: 1px solid var(--tt-line);
  border-radius: 12px;
}
.jf-checkout-summary-row span { color: var(--tt-text-2); }
.jf-checkout-summary-row b { color: var(--tt-text); }
.jf-checkout-fixed-amount { color: var(--tt-text); font-weight: 700; font-size: 18px; }

/* ---------- Auth (shared login design language) ----------
   Extracted verbatim 2026-09-23 from auth/login.blade.php's inline <style>
   (approved design — DO NOT restyle). Register + password-reset pages reuse
   these classes so all auth screens match. login.blade.php now links this
   file instead of inlining the block; rendering is identical. */

.fab-login{min-height:100vh;display:flex;background:#0a0a0f;color:#f4f2ff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow-x:clip;}
.fab-login-form-col{flex:1 1 0;display:flex;align-items:center;justify-content:center;padding:56px 28px;position:relative;z-index:2;}
.fab-login-card{width:100%;max-width:400px;}
.fab-login-eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#a78bfa;margin-bottom:18px;}
.fab-login-title{font-size:34px;line-height:1.15;font-weight:800;letter-spacing:-.02em;margin:0 0 10px;}
.fab-login-sub{font-size:15px;color:#a1a1b3;margin:0 0 32px;line-height:1.55;}
.fab-field{margin-bottom:18px;}
.fab-label{display:block;font-size:13px;font-weight:600;color:#c9c6dd;margin-bottom:8px;}
.fab-input-wrap{position:relative;}
.fab-input{width:100%;background:#14141c;border:1px solid rgba(255,255,255,.1);border-radius:14px;color:#fff;font-size:15px;padding:14px 16px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.fab-input::placeholder{color:#5d5d72;}
.fab-input:focus{border-color:#7c3cff;box-shadow:0 0 0 4px rgba(124,60,255,.22);background:#17171f;}
.fab-input.is-invalid{border-color:#f43f5e;box-shadow:0 0 0 4px rgba(244,63,94,.15);}
.fab-input-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#6d6d85;pointer-events:none;display:flex;}
.fab-input.has-icon{padding-left:42px;}
.password-reveal-field{position:relative;}
.password-reveal-field .fab-input{padding-right:46px;}
/* Stronger selector beats the theme's .password-reveal-toggle regardless of load order */
.fab-login .password-reveal-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:#8a8a9e;padding:8px;cursor:pointer;border-radius:8px;line-height:0;height:auto;min-width:0;z-index:4;display:flex;align-items:center;justify-content:center;}
.fab-login .password-reveal-toggle:hover{color:#fff;background:rgba(255,255,255,.06);}
.fab-error{display:block;font-size:13px;color:#fb7185;margin-top:8px;}
.fab-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 22px;}
.fab-check{display:flex;align-items:center;gap:9px;font-size:14px;color:#b9b6cc;cursor:pointer;user-select:none;}
.fab-check input{appearance:none;width:18px;height:18px;border-radius:6px;border:1px solid rgba(255,255,255,.22);background:#14141c;cursor:pointer;position:relative;transition:all .15s ease;flex-shrink:0;margin:0;}
.fab-check input:checked{background:linear-gradient(135deg,#7c3cff,#a855f7);border-color:transparent;}
.fab-check input:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.fab-check input:focus-visible{box-shadow:0 0 0 4px rgba(124,60,255,.25);outline:none;}
.fab-link{font-size:14px;color:#a78bfa;text-decoration:none;font-weight:600;}
.fab-link:hover{color:#c4b5fd;text-decoration:underline;}
.fab-btn{width:100%;border:none;cursor:pointer;border-radius:14px;padding:15px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c3cff 0%,#a855f7 60%,#d946ef 100%);box-shadow:0 8px 24px -8px rgba(124,60,255,.55);transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;display:flex;align-items:center;justify-content:center;gap:10px;}
.fab-btn:hover{transform:translateY(-1px);filter:brightness(1.07);box-shadow:0 12px 32px -8px rgba(124,60,255,.65);}
.fab-btn:active{transform:translateY(0);}
.fab-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(124,60,255,.35);}
.fab-divider{display:flex;align-items:center;gap:14px;margin:26px 0;color:#6d6d85;font-size:13px;}
.fab-divider::before,.fab-divider::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09);}
.fab-signup{margin-top:28px;text-align:center;font-size:14px;color:#a1a1b3;}
.fab-signup a{color:#fff;font-weight:700;text-decoration:none;border-bottom:1px solid rgba(167,139,250,.5);padding-bottom:1px;}
.fab-signup a:hover{color:#c4b5fd;border-color:#c4b5fd;}
.social-login-links .strike{display:flex;align-items:center;gap:14px;margin:0 0 18px;color:#6d6d85;font-size:13px;}
.social-login-links .strike::before,.social-login-links .strike::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.09);}
.social-login-links .btn{display:flex !important;align-items:center;justify-content:center;gap:10px;width:100%;border-radius:12px !important;padding:12px !important;margin-bottom:12px;background:rgba(255,255,255,.04) !important;border:1px solid rgba(255,255,255,.12) !important;color:#e8e6f5 !important;font-weight:600;font-size:14px;transition:background .15s ease,transform .15s ease;}
.social-login-links .btn:hover{background:rgba(255,255,255,.09) !important;transform:translateY(-1px);}
.social-login-links .social-media-icon{width:20px;height:20px;}
.fab-login-visual{flex:1.25 1 0;position:relative;overflow:hidden;display:none;background:#0d0618;}
.fab-blob{position:absolute;border-radius:50%;filter:blur(90px);opacity:.75;animation:fab-drift 14s ease-in-out infinite alternate;}
.fab-blob-1{width:520px;height:520px;left:-140px;top:-120px;background:radial-gradient(circle,#7c3cff 0%,transparent 70%);}
.fab-blob-2{width:460px;height:460px;right:-120px;bottom:-140px;background:radial-gradient(circle,#d946ef 0%,transparent 70%);animation-delay:-5s;}
.fab-blob-3{width:340px;height:340px;left:38%;top:44%;background:radial-gradient(circle,#4f7cff 0%,transparent 70%);opacity:.5;animation-delay:-9s;}
@keyframes fab-drift{from{transform:translate(0,0) scale(1);}to{transform:translate(46px,34px) scale(1.08);}}
.fab-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%);}
.fab-visual-content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;padding:64px;max-width:560px;}
.fab-visual-badge{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#e9d5ff;background:rgba(124,60,255,.18);border:1px solid rgba(167,139,250,.35);padding:8px 14px;border-radius:999px;margin-bottom:26px;}
.fab-visual-badge .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 10px #4ade80;}
.fab-visual-title{font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-.025em;margin:0 0 18px;}
.fab-visual-title .grad{background:linear-gradient(120deg,#c4b5fd,#f0abfc);-webkit-background-clip:text;background-clip:text;color:transparent;}
.fab-visual-sub{font-size:16px;line-height:1.65;color:#c9c6dd;margin:0 0 34px;max-width:420px;}
.fab-visual-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.fab-visual-list li{display:flex;align-items:center;gap:14px;font-size:15px;color:#e8e6f5;font-weight:500;}
.fab-visual-list .tick{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(124,60,255,.2);border:1px solid rgba(167,139,250,.4);color:#c4b5fd;}
.fab-mobile-glow{display:none;}
.fab-visual-photo{position:absolute;inset:0;background-size:cover;background-position:center;}
.fab-visual-shade{position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,4,24,.82) 0%,rgba(10,4,24,.45) 55%,rgba(10,4,24,.75) 100%);}
@media (min-width:992px){.fab-login-visual{display:block;}}
@media (max-width:991.98px){
  .fab-mobile-glow{display:block;position:absolute;top:-180px;left:50%;transform:translateX(-50%);width:560px;height:380px;background:radial-gradient(ellipse,rgba(124,60,255,.35) 0%,transparent 70%);filter:blur(50px);pointer-events:none;}
  .fab-login-form-col{padding:72px 24px 48px;}
  .fab-login-title{font-size:30px;}
}
@media (prefers-reduced-motion:reduce){.fab-blob{animation:none;}}

/* Auth pages sit on layouts/no-nav (compact footer). Give the form column
   room to breathe on short screens. */
.fab-login .fab-login-form-col { padding-top: calc(56px + env(safe-area-inset-top, 0px)); }

/* TikTok-style underline tabs (keeps Bootstrap .nav-tabs markup/JS) */
.tt-u-tabs-line.nav-tabs {
  border-bottom: 1px solid var(--tt-line);
}
.tt-u-tabs-line.nav-tabs .nav-link {
  border: 0;
  color: var(--tt-text-3);
  font-weight: 600;
  padding: 12px 16px;
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}
.tt-u-tabs-line.nav-tabs .nav-link:hover { color: var(--tt-text-2); }
.tt-u-tabs-line.nav-tabs .nav-link.active {
  color: #fff;
  background: none;
  font-weight: 700;
}
.tt-u-tabs-line.nav-tabs .nav-link.active::after {
  content: "";
  position: absolute;
  left: 20%; right: 20%; bottom: -1px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .jf-sheet { transition: none; }
  .tt-u-period { scroll-behavior: auto; }
}

/* ---------- RTL ---------- */
[dir="rtl"] .tt-u-balance-hero::after { right: auto; left: -60px; }
[dir="rtl"] .tt-u-purchase-row .tt-u-avatar { margin-right: 0; }

/* ---------- TikTok money layer: global gold subscribe pill (2026-09-23) ----------
   Base component for elements/checkout/subscribe-pill.blade.php. Used in
   post-boxes (feed/profile/post pages) and the For You slide. The slide adds
   .tt-slide-subscribe for pager-specific sizing in tiktok-pager.css. */
:root {
  --tt-gold: #F5B942;
  --tt-gold-ink: #1A1206;
}
.tt-subscribe-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--tt-gold);
  color: var(--tt-gold-ink);
  font-weight: 700;
  font-size: 14px;
  border: 0;
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.tt-subscribe-pill:hover { color: var(--tt-gold-ink); text-decoration: none; }
.tt-subscribe-pill.is-disabled { opacity: .55; cursor: default; }

/* 2026-09-23: auth brand lockup (logo top-center on login/register) + clean auth footer. */
.fab-auth-brand{display:flex;justify-content:center;margin:0 0 30px;}
.fab-auth-brand a{display:inline-block;line-height:0;}
.fab-auth-logo{height:44px;width:auto;display:block;}
.fab-auth-footer{background:transparent;border-top:1px solid rgba(255,255,255,.08);}
.fab-auth-footer-inner{max-width:560px;margin:0 auto;padding:26px 24px calc(26px + env(safe-area-inset-bottom,0px));text-align:center;}
.fab-auth-copy{font-size:13px;color:#a1a1b3;margin:0 0 12px;}
.fab-auth-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;margin:0 0 16px;}
.fab-auth-links a{font-size:13px;font-weight:600;color:#c4b5fd;text-decoration:none;}
.fab-auth-links a:hover{color:#fff;text-decoration:underline;}
.fab-auth-meta{display:flex;justify-content:center;gap:14px;margin:0 0 14px;}
.fab-auth-age{font-size:12px;color:#71717e;margin:0;}
@media (prefers-reduced-motion:reduce){.fab-auth-brand a,.fab-auth-links a{transition:none;}}