/* ===========================================================================
 * v2-dashboard-pro.css
 *
 * Able Pro–inspired admin layout for the XFileSharing Pro USER dashboard.
 * Scoped under body.v2. Loaded LAST in main.html so it wins the cascade
 * over v2-tokens.css, v2-public.css and v2-dashboard.css.
 *
 * Light theme by default. Dark mode opt-in via body.v2.theme-dark (TBD).
 * =========================================================================== */

/* ---------------------------------------------------------------------------
 * 0. Tokens — force a clean Able Pro light palette and override the auto
 *    @media (prefers-color-scheme: dark) block from v2-tokens.css.
 * --------------------------------------------------------------------------- */
body.v2 {
  --background: 220 20% 97%;          /* page surface — soft cool grey */
  --foreground: 222 47% 11%;          /* main text — slate-900 */

  --card: 0 0% 100%;                  /* card surface — pure white */
  --card-foreground: 222 47% 11%;

  --popover: 0 0% 100%;
  --popover-foreground: 222 47% 11%;

  --muted: 220 14% 96%;               /* slate-100 */
  --muted-foreground: 220 9% 46%;     /* slate-500 */

  --subtle: 220 20% 98%;              /* slate-50 */

  --border: 220 13% 91%;              /* slate-200 */
  --input:  220 13% 91%;
  --ring:   0 72% 51%;

  --primary: 0 72% 51%;               /* keep XFS red */
  --primary-hover: 0 72% 45%;
  --primary-foreground: 0 0% 100%;

  --secondary: 220 14% 96%;
  --secondary-foreground: 222 47% 11%;

  --accent: 220 14% 96%;
  --accent-foreground: 222 47% 11%;

  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;

  --success: 142 71% 45%;
  --success-foreground: 0 0% 100%;

  --warning: 38 92% 50%;
  --warning-foreground: 28 92% 18%;

  --info:    216 90% 55%;
  --info-foreground: 0 0% 100%;

  /* extras */
  --sidebar-w: 16.5rem;
  --topbar-h:  4rem;
  --content-max: 1320px;
  --radius-card: 0.875rem;
}

/* explicitly neutralize the dark @media from v2-tokens.css */
@media (prefers-color-scheme: dark) {
  body.v2 {
    --background: 220 20% 97%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --muted: 220 14% 96%;
    --muted-foreground: 220 9% 46%;
    --subtle: 220 20% 98%;
    --border: 220 13% 91%;
    --input:  220 13% 91%;
    --secondary: 220 14% 96%;
    --secondary-foreground: 222 47% 11%;
    --accent: 220 14% 96%;
    --accent-foreground: 222 47% 11%;
  }
}

/* ---------------------------------------------------------------------------
 * 1. Page shell
 * --------------------------------------------------------------------------- */
html, body.v2 {
  background: hsl(var(--background)) !important;
}
body.v2 {
  font-family: 'Somar Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  color: hsl(var(--foreground)) !important;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

/* defensive: when dashboard.css is NOT loaded (user side), recreate sensible defaults */
body.v2 *, body.v2 *::before, body.v2 *::after { box-sizing: border-box; }
body.v2 .custom-scrollbar { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
body.v2 .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
body.v2 .custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 999px; }
body.v2 .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }
body.v2 .icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  border: none;
  background: transparent;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0;
}
body.v2 .icon-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
body.v2 a { color: hsl(var(--foreground)); text-decoration: none; transition: color .15s ease; }
body.v2 a:hover { color: hsl(var(--primary)); }
body.v2 input, body.v2 select, body.v2 textarea, body.v2 button { font-family: inherit; }

body.v2 main {
  min-height: 100vh;
  background: hsl(var(--background));
  padding-left: 0;
}
@media (min-width: 1200px) {
  body.v2 main { padding-left: var(--sidebar-w); }
}
body.v2 main > .container-fluid {
  max-width: var(--content-max);
  padding: 1.75rem 1.75rem 4rem;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  body.v2 main > .container-fluid { padding: 1.25rem 1rem 3rem; }
}

/* ---------------------------------------------------------------------------
 * 2. Sidebar — used by both navpanel.html (admin) and navpanel_v2.html (user)
 * --------------------------------------------------------------------------- */
body.v2 .navpanel,
body.v2 .v2-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border));
  padding: 1.125rem 0.75rem 1rem;
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 0 0 transparent;
}

/* brand block at top of sidebar */
body.v2 .navpanel .logo,
body.v2 .v2-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem 1rem;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}
body.v2 .navpanel .logo img,
body.v2 .v2-sidebar-brand img { height: 1.625rem; width: auto; }
body.v2 .v2-sidebar-brand .v2-logo-text {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  color: hsl(var(--foreground));
}
body.v2 .v2-sidebar-brand .v2-logo-mark {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(0 72% 38%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  position: relative;
}
body.v2 .v2-sidebar-brand .v2-logo-mark::before {
  content: "X";
  font-size: 0.95rem;
}

/* close button on mobile */
body.v2 .v2-sidebar-close,
body.v2 .navpanel-close {
  position: absolute;
  top: 0.625rem;
  right: 0.625rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* section labels */
body.v2 .navpanel-section-label,
body.v2 .v2-sidebar-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 1rem 0.875rem 0.375rem;
  opacity: 0.85;
}

/* nav rows */
body.v2 .navpanel-menu .nav-item { margin: 0.0625rem 0; }
body.v2 .navpanel-menu .nav-link,
body.v2 .v2-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.6875rem;
  padding: 0.5rem 0.6875rem;
  border-radius: 0.5rem;
  color: hsl(220 9% 38%);
  font-size: 0.875rem;
  font-weight: 500;
  background: transparent;
  transition: background .15s ease, color .15s ease;
  position: relative;
  text-decoration: none;
}
body.v2 .navpanel-menu .nav-link::after { display: none; }
body.v2 .navpanel-menu .has-submenu::after {
  content: "";
  display: inline-block;
  margin-left: auto;
  width: 0.375rem;
  height: 0.375rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  transition: transform .15s ease;
}
body.v2 .navpanel-menu .has-submenu.active::after { transform: rotate(45deg); }
body.v2 .navpanel-menu .has-submenu::before { display: none; }

body.v2 .navpanel-menu .nav-link:hover,
body.v2 .v2-sidebar-link:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
body.v2 .navpanel-menu .nav-link.active,
body.v2 .v2-sidebar-link.active {
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--primary));
  font-weight: 600;
}
body.v2 .navpanel-menu .nav-link.active::before,
body.v2 .v2-sidebar-link.active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.4375rem;
  bottom: 0.4375rem;
  width: 3px;
  background: hsl(var(--primary));
  border-radius: 0 3px 3px 0;
}
body.v2 .navpanel-icon,
body.v2 .v2-sidebar-link svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  color: inherit;
}
body.v2 .navpanel-menu .nav-link svg { width: 1.0625rem; height: 1.0625rem; }

/* submenu */
body.v2 .navpanel-submenu {
  margin: 0.0625rem 0 0.25rem 1.875rem;
  padding-left: 0.625rem;
  border-left: 1px solid hsl(var(--border));
}
body.v2 .navpanel-submenu .nav-link {
  padding: 0.3125rem 0.625rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .navpanel-submenu .nav-link.text-white {
  color: hsl(var(--primary)) !important;
  background: transparent;
  font-weight: 600;
}
body.v2 .navpanel-submenu .nav-link.text-white::before {
  content: "";
  display: inline-block;
  width: 0.25rem;
  height: 0.25rem;
  background: hsl(var(--primary));
  border-radius: 50%;
  margin-right: 0.5rem;
}

/* Adminpanel / Userpanel pill switcher */
body.v2 .navpanel .navpanel-tabs.nav-fill {
  background: hsl(var(--muted));
  border-radius: 0.625rem;
  padding: 0.25rem;
  gap: 0.125rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0.25rem 1rem;
}
body.v2 .navpanel .navpanel-tabs.nav-fill .nav-link {
  text-align: center;
  background: transparent;
  border: none;
  padding: 0.4375rem 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  border-radius: 0.4375rem;
}
body.v2 .navpanel .navpanel-tabs.nav-fill .nav-link.active {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px hsl(220 13% 50% / 0.15);
}
body.v2 .navpanel .navpanel-tabs.nav-fill .nav-link::after { display: none; }

/* sidebar nav body */
body.v2 .v2-sidebar-nav,
body.v2 .navpanel .tab-content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  overflow-y: auto;
}
body.v2 .v2-sidebar-section { display: flex; flex-direction: column; gap: 0.0625rem; }

/* footer */
body.v2 .v2-sidebar-footer,
body.v2 .navpanel > .text-muted.small {
  margin-top: auto;
  padding: 1rem 0.75rem 0;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground)) !important;
}
body.v2 .v2-sidebar-skin {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.6875rem;
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  margin-bottom: 0.5rem;
}
body.v2 .v2-sidebar-skin:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
body.v2 .v2-sidebar-copyright { padding: 0 0.6875rem; font-size: 0.6875rem; }
body.v2 .v2-sidebar-copyright a { color: hsl(var(--muted-foreground)); }

/* sidebar drawer on small screens */
@media (max-width: 1199.98px) {
  body.v2 .navpanel,
  body.v2 .v2-sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
  }
  body.v2 .navpanel.open,
  body.v2 .navpanel.show,
  body.v2 .v2-sidebar.open,
  body.v2 .v2-sidebar.show {
    transform: translateX(0);
    box-shadow: 0 25px 50px -12px hsl(222 47% 11% / 0.25);
  }
  body.v2 .v2-sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: hsl(222 47% 11% / 0.4);
    z-index: 199;
  }
}

/* ---------------------------------------------------------------------------
 * 3. Topbar — header_cp.html
 * --------------------------------------------------------------------------- */
body.v2 .header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: hsl(var(--card) / 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid hsl(var(--border));
  margin: 0;
}
@media (min-width: 1200px) {
  body.v2 .header { padding-left: var(--sidebar-w); }
}
body.v2 .header > .container-fluid,
body.v2 .header > .container,
body.v2 .topbar-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.75rem;
}
@media (max-width: 991.98px) {
  body.v2 .header > .container-fluid,
  body.v2 .header > .container,
  body.v2 .topbar-inner { padding: 0 1rem; }
}
body.v2 .topbar-inner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--topbar-h);
}
body.v2 .topbar-left,
body.v2 .topbar-right {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
body.v2 .topbar-right { margin-left: auto; }

/* hamburger */
body.v2 .topbar-burger {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.v2 .topbar-burger:hover { background: hsl(var(--muted)); }
@media (min-width: 1200px) { body.v2 .topbar-burger { display: none; } }

/* topbar logo (mobile) */
body.v2 .topbar-logo img { height: 1.5rem; }

/* mini stat chips on topbar */
body.v2 .topbar-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
body.v2 .topbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.6875rem;
  border-radius: 999px;
  background: hsl(var(--muted));
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
body.v2 .topbar-chip b,
body.v2 .topbar-chip strong { color: hsl(var(--foreground)); font-weight: 700; }
body.v2 .topbar-chip svg { color: hsl(var(--primary)); }
body.v2 .topbar-chip.success { background: hsl(var(--success) / 0.10); color: hsl(142 71% 28%); }
body.v2 .topbar-chip.success b { color: hsl(142 71% 24%); }
body.v2 .topbar-chip.premium {
  background: linear-gradient(135deg, hsl(38 95% 56%), hsl(28 92% 50%));
  color: #fff;
}
body.v2 .topbar-chip.premium b { color: #fff; }
body.v2 .topbar-chip.premium svg { color: #fff; }
@media (max-width: 991.98px) {
  body.v2 .topbar-chips { display: none; }
}

/* user dropdown trigger */
body.v2 .topbar-user {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3125rem 0.625rem 0.3125rem 0.3125rem;
  border-radius: 999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  text-decoration: none;
}
body.v2 .topbar-user:hover { background: hsl(var(--muted)); }
body.v2 .topbar-avatar {
  width: 1.875rem;
  height: 1.875rem;
  border-radius: 50%;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(0 72% 38%));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}
body.v2 .topbar-user-name { line-height: 1; }
@media (max-width: 575.98px) {
  body.v2 .topbar-user-name { display: none; }
  body.v2 .topbar-user { padding: 0.1875rem; }
}

/* language flag button */
body.v2 .header-lang .icon-btn {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.v2 .header-lang .icon-btn:hover { background: hsl(var(--muted)); }
body.v2 .header-lang .icon-btn img { width: 1.125rem; height: auto; border-radius: 2px; }

/* ---------------------------------------------------------------------------
 * 4. Card primitive
 * --------------------------------------------------------------------------- */
body.v2 .pp-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  padding: 1.375rem 1.375rem;
}
body.v2 .pp-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 1.125rem 1.375rem;
  border-bottom: 1px solid hsl(var(--border));
}
body.v2 .pp-card-header h6,
body.v2 .pp-card-header h5,
body.v2 .pp-card-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}
body.v2 .pp-card-header small,
body.v2 .pp-card-header .pp-card-sub {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .pp-card-body { padding: 1.375rem; }
body.v2 .pp-card-footer {
  padding: 1rem 1.375rem;
  border-top: 1px solid hsl(var(--border));
  background: hsl(var(--subtle));
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}

/* keep legacy .block/.card looking like a pp-card */
body.v2 main .block,
body.v2 main .card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  padding: 1.375rem;
}
body.v2 main .block.p-0,
body.v2 main .card.p-0 { padding: 0; }
body.v2 main .card-header {
  background: transparent;
  border-bottom: 1px solid hsl(var(--border));
  padding: 1rem 1.375rem;
  font-weight: 600;
  font-size: 0.9375rem;
}
body.v2 main .card-body { padding: 1.375rem; }
body.v2 main .card-footer {
  background: hsl(var(--subtle));
  border-top: 1px solid hsl(var(--border));
  padding: 1rem 1.375rem;
}

/* ---------------------------------------------------------------------------
 * 5. Page heading row
 * --------------------------------------------------------------------------- */
body.v2 .page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
body.v2 .page-heading h1,
body.v2 .page-heading h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
}
body.v2 .page-heading .breadcrumb {
  margin: 0.25rem 0 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .page-heading .breadcrumb a { color: hsl(var(--muted-foreground)); }
body.v2 .page-heading .breadcrumb a:hover { color: hsl(var(--primary)); }
body.v2 .page-heading .breadcrumb .sep { opacity: 0.4; }
body.v2 .page-heading .breadcrumb .current { color: hsl(var(--foreground)); font-weight: 500; }
body.v2 .page-heading .actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* legacy .top-bar should look like page-heading too */
body.v2 .top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0;
  background: transparent;
  border: none;
  margin: 0 0 1.5rem;
}
body.v2 .top-bar h5,
body.v2 .top-bar h1,
body.v2 .top-bar h2 {
  margin: 0 0 0.125rem;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}
body.v2 .top-bar .page-subtitle,
body.v2 .top-bar small,
body.v2 .top-bar .text-muted {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground)) !important;
}
body.v2 .top-bar .row { width: 100%; margin: 0; }
body.v2 .page-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
body.v2 .page-subtitle .sep { opacity: 0.4; }

/* ---------------------------------------------------------------------------
 * 6. Profile hero — clean white card, Able Pro style
 * --------------------------------------------------------------------------- */
body.v2 .profile-hero {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  color: hsl(var(--foreground));
  padding: 1.5rem 1.75rem;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.25rem;
  align-items: center;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}
body.v2 .profile-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  width: 6px;
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(0 72% 38%));
}
body.v2 .profile-hero-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, hsl(var(--primary)), hsl(0 72% 38%));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  box-shadow: 0 4px 12px hsl(0 72% 51% / 0.25);
  margin-left: 0.375rem;
}
body.v2 .profile-hero h1 {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
body.v2 .profile-hero .hero-meta {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
body.v2 .profile-hero .hero-meta .sep { opacity: 0.4; }
body.v2 .profile-hero .hero-meta b { color: hsl(var(--foreground)); font-weight: 600; }
body.v2 .profile-hero .hero-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
@media (max-width: 767.98px) {
  body.v2 .profile-hero {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    padding: 1.25rem;
  }
  body.v2 .profile-hero .hero-actions {
    display: none;
  }
}

/* status pills used by the hero */
body.v2 .pp-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
}
body.v2 .pp-pill.premium {
  background: linear-gradient(135deg, hsl(38 95% 56%), hsl(28 92% 50%));
  color: #fff;
  border-color: hsl(28 92% 45%);
}
body.v2 .pp-pill.success {
  background: hsl(var(--success) / 0.12);
  color: hsl(142 71% 28%);
  border-color: hsl(var(--success) / 0.30);
}
body.v2 .pp-pill.warning {
  background: hsl(var(--warning) / 0.15);
  color: hsl(28 92% 32%);
  border-color: hsl(var(--warning) / 0.35);
}
body.v2 .pp-pill.danger {
  background: hsl(var(--destructive) / 0.10);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.30);
}

/* ---------------------------------------------------------------------------
 * 7. Stat cards
 * --------------------------------------------------------------------------- */
body.v2 .stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}
body.v2 .stat-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  padding: 1.25rem 1.375rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  transition: box-shadow .15s ease, transform .15s ease;
}
body.v2 .stat-card:hover {
  box-shadow: 0 4px 12px hsl(222 47% 11% / 0.08);
  transform: translateY(-1px);
}
body.v2 .stat-card .stat-body { flex: 1; min-width: 0; }
body.v2 .stat-card .stat-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
}
body.v2 .stat-card .stat-value {
  font-size: 1.625rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: hsl(var(--foreground));
  line-height: 1.1;
  word-break: break-word;
}
body.v2 .stat-card .stat-value small {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-left: 0.25rem;
}
body.v2 .stat-card .stat-meta {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.375rem;
}
body.v2 .stat-card .stat-meta a {
  color: hsl(var(--primary));
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
body.v2 .stat-card .stat-meta a:hover { text-decoration: underline; }
body.v2 .stat-card .progress {
  margin-top: 0.5rem;
  height: 0.375rem;
  background: hsl(var(--muted));
  border-radius: 999px;
}
body.v2 .stat-card .progress-bar { background: hsl(var(--primary)); border-radius: 999px; }
body.v2 .stat-card .stat-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--primary));
}
body.v2 .stat-card .stat-icon.success { background: hsl(var(--success) / 0.12); color: hsl(142 71% 30%); }
body.v2 .stat-card .stat-icon.warning { background: hsl(var(--warning) / 0.15); color: hsl(32 92% 35%); }
body.v2 .stat-card .stat-icon.info    { background: hsl(var(--info) / 0.12); color: hsl(var(--info)); }
body.v2 .stat-card .stat-icon.danger  { background: hsl(var(--destructive) / 0.10); color: hsl(var(--destructive)); }

/* ---------------------------------------------------------------------------
 * 8. Quick-action cards (public link, affiliate, premium key)
 * --------------------------------------------------------------------------- */
body.v2 .qa-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}
body.v2 .qa-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  padding: 1.25rem 1.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  position: relative;
}
body.v2 .qa-card .qa-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
body.v2 .qa-card .qa-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.v2 .qa-card .qa-icon.info    { background: hsl(var(--info) / 0.10); color: hsl(var(--info)); }
body.v2 .qa-card .qa-icon.success { background: hsl(var(--success) / 0.12); color: hsl(142 71% 30%); }
body.v2 .qa-card .qa-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
body.v2 .qa-card .qa-link-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.4375rem 0.625rem;
}
body.v2 .qa-card .qa-link-row input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  padding: 0;
  outline: none;
  text-overflow: ellipsis;
}
body.v2 .qa-card .qa-copy {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.375rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
body.v2 .qa-card .qa-copy:hover { background: hsl(var(--primary)); color: #fff; border-color: hsl(var(--primary)); }

/* ---------------------------------------------------------------------------
 * 9. Tabs — clean text underline (Able Pro style)
 * --------------------------------------------------------------------------- */
body.v2 main .pp-tabs,
body.v2 main .block-tabs.account-tabs,
body.v2 main .nav.block-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  border-bottom: 1px solid hsl(var(--border));
  padding: 0 1.375rem;
  background: transparent;
  margin: 0;
}
body.v2 main .pp-tabs .nav-link,
body.v2 main .block-tabs .nav-link {
  position: relative;
  padding: 1rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  border-radius: 0;
}
body.v2 main .pp-tabs .nav-link::after,
body.v2 main .block-tabs .nav-link::after { display: none; }
body.v2 main .pp-tabs .nav-link:hover,
body.v2 main .block-tabs .nav-link:hover { color: hsl(var(--foreground)); background: transparent; }
body.v2 main .pp-tabs .nav-link.active,
body.v2 main .block-tabs .nav-link.active {
  color: hsl(var(--primary));
  background: transparent;
}
body.v2 main .pp-tabs .nav-link.active::before,
body.v2 main .block-tabs .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0.625rem;
  right: 0.625rem;
  bottom: -1px;
  height: 2px;
  background: hsl(var(--primary));
  border-radius: 2px 2px 0 0;
}

/* ---------------------------------------------------------------------------
 * 9b. Vertical icon-tab rail — Able-Pro-style "card" tabs for the My Account
 *     settings panel. Each tab is its own card (icon box + title + subtitle);
 *     active gets the primary fill. Below lg, the rail collapses into a
 *     horizontal scrollable strip so the content can use full width.
 * --------------------------------------------------------------------------- */
body.v2 .account-settings-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.25rem;
  align-items: start;
}
body.v2 .account-tabs-vertical {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  padding: 0;
  border: 0;
  background: transparent;
  position: sticky;
  top: 1rem;
}
body.v2 .account-tabs-vertical .nav-link {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  position: relative;
}
body.v2 .account-tabs-vertical .nav-link::before,
body.v2 .account-tabs-vertical .nav-link::after { display: none !important; }
body.v2 .account-tabs-vertical .nav-link .at-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
  transition: inherit;
}
body.v2 .account-tabs-vertical .nav-link .at-icon svg { width: 18px; height: 18px; }
body.v2 .account-tabs-vertical .nav-link .at-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
body.v2 .account-tabs-vertical .nav-link .at-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: inherit;
}
body.v2 .account-tabs-vertical .nav-link .at-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  margin-top: 2px;
}
body.v2 .account-tabs-vertical .nav-link:hover {
  border-color: hsl(var(--primary) / 0.35);
  color: hsl(var(--foreground));
}
body.v2 .account-tabs-vertical .nav-link:hover .at-icon {
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.30);
}
body.v2 .account-tabs-vertical .nav-link.active {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  box-shadow: 0 6px 18px -8px hsl(var(--primary) / 0.55);
}
body.v2 .account-tabs-vertical .nav-link.active .at-icon {
  background: hsl(0 0% 100% / 0.18);
  border-color: hsl(0 0% 100% / 0.25);
  color: hsl(var(--primary-foreground));
}
body.v2 .account-tabs-vertical .nav-link.active .at-sub {
  color: hsl(var(--primary-foreground) / 0.80);
}

body.v2 .account-settings-grid > .tab-content { min-width: 0; }
body.v2 .account-tab-header {
  display: block;
  margin-bottom: 1.25rem;
}
body.v2 .account-tab-header h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.125rem;
  color: hsl(var(--foreground));
}
body.v2 .account-tab-header p {
  margin: 0;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .account-section-heading {
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  margin: 1.5rem 0 0.75rem;
  font-weight: 600;
}
body.v2 .account-section-heading:first-child { margin-top: 0; }
body.v2 .account-section-divider { border-top: 1px solid hsl(var(--border)); margin: 1.25rem 0; }
body.v2 .account-danger-zone {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid hsl(var(--destructive) / 0.30);
  border-radius: 0.75rem;
  background: hsl(var(--destructive) / 0.04);
}
body.v2 .account-danger-zone .account-section-heading {
  color: hsl(var(--destructive));
  margin-top: 0;
}

@media (max-width: 991.98px) {
  body.v2 .account-settings-grid { grid-template-columns: 1fr; gap: 0.875rem; }
  /* Segmented-bar tab strip — even-distributed, icon-over-label, no description */
  body.v2 .account-tabs-vertical {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.375rem;
    overflow-x: visible;
    position: static;
    padding: 0.3125rem;
    background: hsl(var(--subtle));
    border: 1px solid hsl(var(--border));
    border-radius: 0.875rem;
  }
  body.v2 .account-tabs-vertical .nav-link {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    background: transparent;
    border: 0;
    border-radius: 0.625rem;
    text-align: center;
  }
  body.v2 .account-tabs-vertical .nav-link .at-icon {
    width: 30px; height: 30px;
    background: transparent;
    border-radius: 0.5rem;
  }
  body.v2 .account-tabs-vertical .nav-link .at-icon svg { width: 18px; height: 18px; }
  body.v2 .account-tabs-vertical .nav-link .at-text { gap: 0; }
  body.v2 .account-tabs-vertical .nav-link .at-title {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  body.v2 .account-tabs-vertical .nav-link .at-sub { display: none; }
  body.v2 .account-tabs-vertical .nav-link.active {
    background: hsl(var(--card));
    box-shadow: 0 1px 2px rgba(15,18,24,.08);
    color: hsl(var(--primary));
  }
  body.v2 .account-tabs-vertical .nav-link.active .at-icon {
    background: transparent;
    color: hsl(var(--primary));
  }
  body.v2 .account-tabs-vertical .nav-link.active .at-title { color: hsl(var(--primary)); }
}

/* ---------------------------------------------------------------------------
 * 10. Forms — clean Able Pro inputs and rows
 * --------------------------------------------------------------------------- */
body.v2 .form-control,
body.v2 .form-select {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--input));
  border-radius: 0.5rem;
  padding: 0.5625rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.v2 .form-control:focus,
body.v2 .form-select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
  outline: none;
}
body.v2 .form-control::placeholder { color: hsl(var(--muted-foreground)); }
body.v2 .form-control[readonly] { background: hsl(var(--subtle)); }
body.v2 .form-control:disabled,
body.v2 .form-select:disabled { background: hsl(var(--muted)); opacity: 0.7; cursor: not-allowed; }

body.v2 .form-label,
body.v2 label.form-label,
body.v2 .col-form-label {
  font-weight: 500;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  margin-bottom: 0.375rem;
}

/* compact horizontal "row label / control" inside the account settings tab */
body.v2 .settings-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
body.v2 .settings-row:last-child { border-bottom: none; }
body.v2 .settings-row > .settings-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
body.v2 .settings-row > .settings-label small { display: block; font-size: 0.75rem; color: hsl(var(--muted-foreground)); font-weight: 400; margin-top: 0.125rem; }
@media (max-width: 575.98px) {
  body.v2 .settings-row { grid-template-columns: 1fr; gap: 0.25rem; }
}

/* re-style the legacy `<div class="mb-3 row align-items-center"><label class="col-lg-4 …">` rows into Able Pro rows */
body.v2 .pp-card-body .mb-3.row.align-items-center,
body.v2 .pp-card-body > .mb-3.row {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid hsl(var(--border));
}
body.v2 .pp-card-body .mb-3.row.align-items-center > .col-form-label,
body.v2 .pp-card-body .mb-3.row > .col-form-label,
body.v2 .pp-card-body .mb-3.row .col-lg-4 {
  text-align: left !important;
  padding: 0 !important;
  flex: 0 0 auto;
  max-width: none;
}
body.v2 .pp-card-body .mb-3.row .col-lg-6 { flex: 1 1 auto; max-width: none; padding: 0; }
@media (max-width: 767.98px) {
  body.v2 .pp-card-body .mb-3.row.align-items-center,
  body.v2 .pp-card-body > .mb-3.row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
}

/* iOS-style switch (legacy .form-switcher) */
body.v2 .form-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
}
body.v2 .form-switcher input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.375rem;
  height: 1.3125rem;
  background: hsl(var(--border));
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .15s ease;
  flex-shrink: 0;
  border: none;
}
body.v2 .form-switcher input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 1.0625rem; height: 1.0625rem;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.2);
  transition: transform .15s ease;
}
body.v2 .form-switcher input[type="checkbox"]:checked { background: hsl(var(--primary)); }
body.v2 .form-switcher input[type="checkbox"]:checked::before { transform: translateX(1.0625rem); }

/* ---------------------------------------------------------------------------
 * 11. Buttons
 * --------------------------------------------------------------------------- */
body.v2 .btn {
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  padding: 0.5625rem 1rem;
  line-height: 1.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid transparent;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
body.v2 .btn-sm { padding: 0.4375rem 0.75rem; font-size: 0.8125rem; }
body.v2 .btn-primary {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
body.v2 .btn-primary:hover {
  background: hsl(var(--primary-hover));
  border-color: hsl(var(--primary-hover));
  color: hsl(var(--primary-foreground));
}
body.v2 .btn-outline-primary {
  background: transparent;
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}
body.v2 .btn-outline-primary:hover {
  background: hsl(var(--primary));
  color: #fff;
}
body.v2 .btn-outline-secondary,
body.v2 .btn-outline-light {
  background: hsl(var(--card));
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
body.v2 .btn-outline-secondary:hover,
body.v2 .btn-outline-light:hover {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
body.v2 .btn-outline-danger {
  background: transparent;
  border-color: hsl(var(--destructive) / 0.5);
  color: hsl(var(--destructive));
}
body.v2 .btn-outline-danger:hover {
  background: hsl(var(--destructive));
  border-color: hsl(var(--destructive));
  color: #fff;
}
body.v2 .btn-success {
  background: hsl(var(--success));
  border-color: hsl(var(--success));
  color: #fff;
}
body.v2 .btn-success:hover { background: hsl(142 71% 38%); border-color: hsl(142 71% 38%); }
body.v2 .btn-warning {
  background: hsl(var(--warning));
  border-color: hsl(var(--warning));
  color: hsl(28 92% 18%);
}
body.v2 .btn-warning:hover { background: hsl(38 92% 43%); border-color: hsl(38 92% 43%); }
body.v2 .btn-danger {
  background: hsl(var(--destructive));
  border-color: hsl(var(--destructive));
  color: #fff;
}
body.v2 .btn-info {
  background: hsl(var(--info));
  border-color: hsl(var(--info));
  color: #fff;
}
body.v2 .btn-link { color: hsl(var(--primary)); padding: 0; }

body.v2 .submit-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 12. Badges (status pills)
 * --------------------------------------------------------------------------- */
body.v2 .badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid transparent;
  line-height: 1;
}
body.v2 .badge.bg-success {
  background: hsl(var(--success) / 0.12) !important;
  color: hsl(142 71% 28%) !important;
  border-color: hsl(var(--success) / 0.30);
}
body.v2 .badge.bg-warning {
  background: hsl(var(--warning) / 0.15) !important;
  color: hsl(28 92% 32%) !important;
  border-color: hsl(var(--warning) / 0.35);
}
body.v2 .badge.bg-danger {
  background: hsl(var(--destructive) / 0.10) !important;
  color: hsl(var(--destructive)) !important;
  border-color: hsl(var(--destructive) / 0.30);
}
body.v2 .badge.bg-info {
  background: hsl(var(--info) / 0.10) !important;
  color: hsl(var(--info)) !important;
  border-color: hsl(var(--info) / 0.30);
}
body.v2 .badge.bg-secondary {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  border-color: hsl(var(--border));
}
body.v2 .badge.bg-primary {
  background: hsl(var(--primary) / 0.10) !important;
  color: hsl(var(--primary)) !important;
  border-color: hsl(var(--primary) / 0.30);
}
body.v2 .badge.status-dot::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: currentColor;
  margin-right: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * 13. Alerts
 * --------------------------------------------------------------------------- */
body.v2 main .alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: 0.625rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  font-size: 0.875rem;
  margin-bottom: 1rem;
}
body.v2 main .alert > svg { flex-shrink: 0; margin-top: 0.125rem; }
body.v2 main .alert-success {
  background: hsl(var(--success) / 0.08);
  border-color: hsl(var(--success) / 0.3);
}
body.v2 main .alert-success svg { color: hsl(142 71% 32%); }
body.v2 main .alert-warning {
  background: hsl(var(--warning) / 0.08);
  border-color: hsl(var(--warning) / 0.3);
}
body.v2 main .alert-warning svg { color: hsl(28 92% 38%); }
body.v2 main .alert-danger,
body.v2 main .alert-error {
  background: hsl(var(--destructive) / 0.08);
  border-color: hsl(var(--destructive) / 0.3);
}
body.v2 main .alert-info {
  background: hsl(var(--info) / 0.08);
  border-color: hsl(var(--info) / 0.3);
}
body.v2 main .alert-info svg { color: hsl(var(--info)); }
body.v2 main .alert-primary {
  background: hsl(var(--primary) / 0.07);
  border-color: hsl(var(--primary) / 0.25);
  color: hsl(var(--foreground));
}
body.v2 main .alert-primary svg { color: hsl(var(--primary)); }
body.v2 main .alert-dismissible { padding-right: 2.75rem; }

/* ---------------------------------------------------------------------------
 * 14. Tables
 * --------------------------------------------------------------------------- */
body.v2 main .table {
  --bs-table-bg: transparent;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  margin: 0;
}
body.v2 main .table > thead {
  background: hsl(var(--subtle));
}
body.v2 main .table > thead th {
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  padding: 0.75rem 0.875rem;
  white-space: nowrap;
}
body.v2 main .table > tbody > tr > td {
  padding: 0.8125rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
  vertical-align: middle;
}
body.v2 main .table > tbody > tr:last-child > td { border-bottom: none; }
body.v2 main .table-hover > tbody > tr:hover > * { background: hsl(var(--muted) / 0.5); }
body.v2 main .table-rounded {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  overflow: hidden;
}
body.v2 main code {
  background: hsl(var(--muted));
  border-radius: 0.3125rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
}

/* sessions table extras */
body.v2 #active_sessions tr.active td:first-child::before {
  content: "";
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 50%;
  background: hsl(var(--success));
  margin-right: 0.5rem;
}
/* The current session row keeps the green dot marker but should NOT have the
   Bootstrap tinted background — the "ACTIVE NOW" pill in the Last-seen column
   is enough of a signal. !important here only to overpower Bootstrap's stock
   tr.active table-row background. */
body.v2 #active_sessions tr.active,
body.v2 #active_sessions tr.active > td { background: transparent !important; }

/* ---------------------------------------------------------------------------
 * 15. Profit-mode radio cards
 * --------------------------------------------------------------------------- */
body.v2 .earn-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}
body.v2 .earn-mode {
  position: relative;
  margin: 0;
  height: 100%;
}
/* Force every card-body in the grid to fill its grid row, so a card with one
   bullet line stays the same height as a card with two. */
body.v2 .earn-mode label { height: 100%; box-sizing: border-box; }
body.v2 .earn-mode input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.v2 .earn-mode label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding: 1.125rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
body.v2 .earn-mode label::before {
  content: "";
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  border: 2px solid hsl(var(--border));
  background: hsl(var(--card));
  align-self: flex-end;
  transition: border-color .15s ease, background .15s ease;
}
body.v2 .earn-mode input[type="radio"]:checked + label {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.04);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.08);
}
body.v2 .earn-mode input[type="radio"]:checked + label::before {
  border-color: hsl(var(--primary));
  background: radial-gradient(circle, hsl(var(--primary)) 45%, transparent 50%);
}
body.v2 .earn-mode input[type="radio"]:disabled + label {
  opacity: 0.55;
  cursor: not-allowed;
}
body.v2 .earn-mode strong {
  font-weight: 800;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}
body.v2 .earn-mode span { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; line-height: 1.5; }

/* Illustration block inside each profit-mode card. Sits at the top, picks up
   the brand tint when the radio is selected. */
body.v2 .earn-mode .earn-illu {
  width: 64px;
  height: 64px;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--subtle));
  align-self: flex-start;
  transition: background .15s ease, color .15s ease;
  margin-bottom: 0.25rem;
}
body.v2 .earn-mode .earn-illu svg { width: 32px; height: 32px; }
body.v2 .earn-mode input[type="radio"]:checked + label .earn-illu {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
}
/* Lift the radio dot into the top-right corner so the illustration owns the
   top edge of the card. */
body.v2 .earn-mode label { padding-top: 1.125rem; position: relative; }
body.v2 .earn-mode label::before {
  position: absolute;
  top: 1rem;
  right: 1rem;
  align-self: auto;
}

/* ---------------------------------------------------------------------------
 * 15b. Security row — Two-factor & account lock per-setting row.
 *      Each toggle/setting gets its own card-like row with icon + title +
 *      description on the left and the control + state pill on the right.
 * --------------------------------------------------------------------------- */
body.v2 .security-row {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  background: hsl(var(--card));
  margin-bottom: 0.625rem;
  transition: border-color .15s ease, background .15s ease;
}
body.v2 .security-row:hover { border-color: hsl(var(--primary) / 0.30); }
body.v2 .security-row:last-child { margin-bottom: 0; }
body.v2 .security-row__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--subtle));
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .security-row__icon svg { width: 18px; height: 18px; }
body.v2 .security-row__body { flex: 1; min-width: 0; }
body.v2 .security-row__title {
  font-weight: 600;
  font-size: 0.9375rem;
  color: hsl(var(--foreground));
  margin: 0;
  line-height: 1.3;
}
body.v2 .security-row__desc {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin: 0.125rem 0 0;
  line-height: 1.4;
}
body.v2 .security-row__ctrl {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
body.v2 .security-row__state {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
}
body.v2 .security-row__state--on   { background: hsl(142 71% 45% / 0.14); color: hsl(142 71% 28%); }
body.v2 .security-row__state--warn { background: hsl(38 92% 50% / 0.16);  color: hsl(28 80% 34%); }
/* Selects / inputs inside __ctrl should be compact but readable. */
body.v2 .security-row__ctrl .form-select,
body.v2 .security-row__ctrl .form-control { min-width: 11rem; max-width: 14rem; }
body.v2 .security-row__ctrl .input-group { min-width: 11rem; max-width: 14rem; }

/* ---------------------------------------------------------------------------
 * 15c. Minimal payout-destination card — used on My Account / Earnings tab.
 *      Single row: brand glyph · method + value · edit link.
 * --------------------------------------------------------------------------- */
body.v2 .pdest-min {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  background: hsl(var(--card));
  transition: border-color .15s ease;
}
body.v2 .pdest-min:hover { border-color: hsl(var(--primary) / 0.30); }
body.v2 .pdest-min__brand {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 0.625rem;
  background: hsl(var(--subtle));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: hsl(var(--muted-foreground));
}
body.v2 .pdest-min__brand img {
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}
body.v2 .pdest-min__body { flex: 1; min-width: 0; }
body.v2 .pdest-min__row1 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.125rem;
  line-height: 1;
}
body.v2 .pdest-min__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--muted-foreground) / 0.5);
  flex-shrink: 0;
}
body.v2 .pdest-min__dot--ok    { background: hsl(142 71% 45%); box-shadow: 0 0 0 3px hsl(142 71% 45% / 0.15); }
body.v2 .pdest-min__dot--warn  { background: hsl(38 92% 50%);  box-shadow: 0 0 0 3px hsl(38 92% 50% / 0.18); }
body.v2 .pdest-min__value {
  font-size: 0.9375rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  word-break: break-all;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
body.v2 .pdest-min__value--muted { color: hsl(var(--muted-foreground)); font-size: 0.8125rem; font-style: italic; font-weight: 400; }
body.v2 .pdest-min__edit {
  flex-shrink: 0;
  padding: 0.4rem 0.65rem;
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
body.v2 .pdest-min__edit:hover {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
}
body.v2[dir="rtl"] .pdest-min__edit svg,
[dir="rtl"] body.v2 .pdest-min__edit svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------------------
 * 16. Payment-method cards (my_payment_information.html)
 * --------------------------------------------------------------------------- */
body.v2 .pm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 1.125rem;
}
body.v2 .pm-card {
  position: relative;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  padding: 1.125rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.v2 .pm-card:hover { box-shadow: 0 4px 12px hsl(222 47% 11% / 0.08); }
body.v2 .pm-card.is-active {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.10);
}
body.v2 .pm-card .pm-active-pin {
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  background: hsl(var(--primary));
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}
body.v2 .pm-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  justify-content: space-between;
}
body.v2 .pm-card-head .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
body.v2 .pm-card-head strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: hsl(var(--foreground));
  display: block;
}
body.v2 .pm-card-head img { max-height: 2rem; width: auto; object-fit: contain; }
body.v2 .pm-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.75rem;
}
body.v2 .pm-card-meta .meta-pill {
  background: hsl(var(--muted));
  padding: 0.1875rem 0.5rem;
  border-radius: 999px;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
body.v2 .pm-card .pm-field { margin-bottom: 0.5rem; }
body.v2 .pm-card .pm-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  display: block;
  margin-bottom: 0.25rem;
}
body.v2 .pm-card .pm-field .text-muted { font-size: 0.6875rem; }

/* ---------------------------------------------------------------------------
 * 17. Payouts page (request_money.html)
 * --------------------------------------------------------------------------- */
body.v2 .payout-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}
body.v2 .payout-active-method {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.875rem 1.125rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  margin-bottom: 1rem;
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
}
body.v2 .payout-active-method .method-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: hsl(var(--primary) / 0.10);
  color: hsl(var(--primary));
  font-weight: 600;
  font-size: 0.75rem;
}

/* ===== Payout summary card (modern payment-card style) ===== */
body.v2 .payout-card {
  position: relative;
  background: linear-gradient(135deg, hsl(var(--card)) 0%, hsl(var(--subtle) / 0.5) 100%);
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  overflow: hidden;
  box-shadow: 0 2px 8px hsl(222 47% 11% / 0.04), 0 1px 2px hsl(222 47% 11% / 0.04);
}
body.v2 .payout-card.is-ready    { border-color: hsl(var(--primary) / 0.35); }
body.v2 .payout-card.is-incomplete { border-color: hsl(38 92% 50% / 0.55); }
body.v2 .payout-card.is-empty    { border-style: dashed; }
body.v2 .payout-card__band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1.125rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card));
}
body.v2 .payout-card__band-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
body.v2 .payout-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
body.v2 .payout-card__pill--ok    { background: hsl(142 71% 45% / 0.12); color: hsl(142 71% 32%); }
body.v2 .payout-card__pill--warn  { background: hsl(38 92% 50% / 0.15); color: hsl(28 80% 38%); }
body.v2 .payout-card__pill--muted { background: hsl(var(--muted) / 0.8); color: hsl(var(--muted-foreground)); }
body.v2 .payout-card__body {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.125rem 1.25rem 1.25rem;
}
body.v2 .payout-card__logo {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 0.625rem;
  background: hsl(var(--subtle));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  border: 1px solid hsl(var(--border));
}
body.v2 .payout-card__logo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 2.5rem;
  max-height: 2.5rem;
  object-fit: contain;
}
body.v2 .payout-card__main { flex: 1; min-width: 0; }
body.v2 .payout-card__title {
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
  margin-bottom: 0.25rem;
}
body.v2 .payout-card__sub {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .payout-card__sub--warn { color: hsl(28 80% 38%); font-weight: 600; }
body.v2 .payout-card__dl {
  margin: 0.5rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem;
}
body.v2 .payout-card__row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.8125rem;
  padding: 0.2rem 0;
  border-bottom: 1px dashed hsl(var(--border) / 0.6);
}
body.v2 .payout-card__row:last-child { border-bottom: 0; }
body.v2 .payout-card__row dt {
  flex-shrink: 0;
  min-width: 7.5rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  margin: 0;
}
body.v2 .payout-card__row dd {
  margin: 0;
  flex: 1;
  min-width: 0;
}
body.v2 .payout-card__row code {
  background: hsl(var(--muted) / 0.55);
  padding: 0.1rem 0.4rem;
  border-radius: 0.3rem;
  font-size: 0.8125rem;
  word-break: break-all;
  color: hsl(var(--foreground));
}
body.v2 .payout-card__cta {
  flex-shrink: 0;
  align-self: center;
}
@media (max-width: 575.98px) {
  body.v2 .payout-card__body { flex-wrap: wrap; }
  body.v2 .payout-card__cta { width: 100%; }
  body.v2 .payout-card__cta .btn { width: 100%; }
}

/* "How it works" tip block on the right side of payout tab */
body.v2 .payout-tip {
  display: flex;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--subtle) / 0.5);
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .payout-tip__icon {
  flex-shrink: 0;
  color: hsl(var(--primary));
  margin-top: 0.1rem;
}
body.v2 .payout-tip b {
  display: block;
  color: hsl(var(--foreground));
  margin-bottom: 0.4rem;
  font-size: 0.875rem;
}
body.v2 .payout-tip__steps {
  margin: 0;
  padding-left: 1.2rem;
  list-style: decimal;
}
body.v2 .payout-tip__steps li + li { margin-top: 0.25rem; }

/* ===== Payout destination card (right column of /request_money/)
   Concept: a modern, understated payment-method card. No method title
   text — the logo IS the identity. Big-enough logo to read at a glance,
   compact status pill, clean label/value rows, and an integrated footer
   that doesn't feel detached from the rest of the card. RTL-safe. ======== */
body.v2 .pdest {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,
                              hsl(var(--card)) 0%,
                              hsl(var(--subtle) / 0.55) 100%);
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  padding: 1.15rem 1.15rem 0.9rem;
  box-shadow: 0 1px 2px hsl(var(--foreground) / 0.04);
}
body.v2 .pdest--ok    { border-color: hsl(142 71% 45% / 0.3); }
body.v2 .pdest--warn  { border-color: hsl(38 92% 50% / 0.4); }
body.v2 .pdest--empty {
  background: hsl(var(--card));
  border-style: dashed;
}

body.v2 .pdest__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
/* Big, clean logo tile — the method's brand IS the title. */
body.v2 .pdest__brand {
  width: 5rem;
  height: 3.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  overflow: hidden;
  flex-shrink: 0;
  padding: 0.4rem 0.6rem;
}
body.v2 .pdest__brand img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}
body.v2 .pdest__brand--empty {
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground));
}
body.v2 .pdest__status {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: center;
}
body.v2 .pdest__status--ok    { background: hsl(142 71% 45% / 0.12); color: hsl(142 71% 28%); }
body.v2 .pdest__status--warn  { background: hsl(38 92% 50% / 0.14);  color: hsl(28 80% 34%); }
body.v2 .pdest__status--muted { background: hsl(var(--muted) / 0.7); color: hsl(var(--muted-foreground)); }

body.v2 .pdest__warn {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8125rem;
  color: hsl(220 9% 38%);
  background: hsl(var(--muted) / 0.6);
  border-radius: 0.5rem;
  padding: 0.6rem 0.75rem;
  margin-bottom: 0.85rem;
  line-height: 1.45;
}
body.v2 .pdest--warn .pdest__warn {
  color: hsl(28 80% 32%);
  background: hsl(38 92% 50% / 0.08);
}
body.v2 .pdest__warn svg { flex-shrink: 0; margin-top: 0.18rem; }

body.v2 .pdest__list {
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-direction: column;
}
body.v2 .pdest__pair {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}
body.v2 .pdest__pair:first-child { padding-top: 0.2rem; }
body.v2 .pdest__pair:last-child  { border-bottom: 0; padding-bottom: 0.2rem; }
body.v2 .pdest__pair dt {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin: 0;
  flex-shrink: 0;
}
body.v2 .pdest__pair dd {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  word-break: break-all;
  text-align: end;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
  min-width: 0;
}

/* Footer feels integrated, not detached: subtle background tint and
   matching border-radius on the inner corners. */
body.v2 .pdest__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.9rem -1.15rem -0.9rem;
  padding: 0.7rem 1.15rem;
  border-top: 1px solid hsl(var(--border) / 0.6);
  background: hsl(var(--subtle) / 0.4);
  border-radius: 0 0 0.875rem 0.875rem;
  gap: 0.5rem;
}
body.v2 .pdest__foot-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--muted-foreground));
}
body.v2 .pdest__change {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--primary));
  text-decoration: none;
  padding: 0.32rem 0.6rem;
  border-radius: 0.4rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border) / 0.7);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
body.v2 .pdest__change:hover {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.4);
}
/* RTL: flip the chevron in the Change button so it points "outward". */
body.v2[dir="rtl"] .pdest__change svg,
[dir="rtl"] body.v2 .pdest__change svg { transform: scaleX(-1); }
/* RTL: details rows align value at the start (logical end in RTL). */
body.v2[dir="rtl"] .pdest__pair dd,
[dir="rtl"] body.v2 .pdest__pair dd { text-align: start; }

/* ===== Activity-history per-type colors and pill labels ===== */
body.v2 .history-kind {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.55rem 0.22rem 0.4rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
/* Icon: no wrapping circle. The SVG inherits the pill's `color` (so
   payout=blue, gift=pink, premium=gold) and uses stroke=currentColor on
   its strokes. Removing the inner colored disk avoids the white-on-white
   regression and the icon is always visible regardless of cache state. */
body.v2 .history-kind__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  background: transparent;
}
body.v2 .history-kind__icon svg {
  color: currentColor;
  stroke: currentColor;
  fill: none;
}
body.v2 .history-kind--payout {
  background: hsl(217 91% 60% / 0.12);
  color: hsl(217 91% 50%);
}
body.v2 .history-kind--product {
  background: hsl(330 76% 56% / 0.12);
  color: hsl(330 76% 48%);
}
body.v2 .history-kind--premium {
  background: hsl(45 95% 50% / 0.15);
  color: hsl(30 85% 38%);
}
body.v2 tr.history-row--payout  td:first-child { border-left: 3px solid hsl(217 91% 60% / 0.7); }
body.v2 tr.history-row--product td:first-child { border-left: 3px solid hsl(330 76% 56% / 0.7); }
body.v2 tr.history-row--premium td:first-child { border-left: 3px solid hsl(45 95% 50% / 0.7); }
/* RTL: the type accent must sit on the row's START edge (the right side).
   The LTR border-left above would otherwise paint a stray bar mid-table. */
body.v2[dir="rtl"] tr.history-row--payout  td:first-child { border-left: 0; border-right: 3px solid hsl(217 91% 60% / 0.7); }
body.v2[dir="rtl"] tr.history-row--product td:first-child { border-left: 0; border-right: 3px solid hsl(330 76% 56% / 0.7); }
body.v2[dir="rtl"] tr.history-row--premium td:first-child { border-left: 0; border-right: 3px solid hsl(45 95% 50% / 0.7); }
/* Keep the timestamp on one line in the narrow first column (both dirs);
   the wrapper is .table-responsive so width overflow just scrolls. */
body.v2 tr.history-row--payout  td:first-child,
body.v2 tr.history-row--product td:first-child,
body.v2 tr.history-row--premium td:first-child { white-space: nowrap; }
body.v2 .payout-form-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  padding: 1.625rem;
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
}
body.v2 .payout-form-card .form-label {
  font-weight: 600;
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
body.v2 .payout-form-card .form-label small {
  font-weight: 400;
  color: hsl(var(--muted-foreground));
}
body.v2 .payout-form-card .input-group .form-control {
  font-size: 1.0625rem;
  font-weight: 700;
  text-align: center;
}

/* ---------------------------------------------------------------------------
 * 18. Lock strip
 * --------------------------------------------------------------------------- */
body.v2 .lock-strip {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 1rem;
  border-radius: 0.625rem;
  background: hsl(var(--warning) / 0.10);
  border: 1px solid hsl(var(--warning) / 0.30);
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  margin-bottom: 1rem;
}
body.v2 .lock-strip svg { color: hsl(28 92% 38%); flex-shrink: 0; }

/* ---------------------------------------------------------------------------
 * 19. Modal / dropdown polish
 * --------------------------------------------------------------------------- */
body.v2 .dropdown-menu {
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  box-shadow: 0 10px 15px -3px hsl(222 47% 11% / 0.10), 0 4px 6px -4px hsl(222 47% 11% / 0.08);
  padding: 0.375rem;
  min-width: 12rem;
  font-size: 0.875rem;
}
body.v2 .dropdown-item {
  border-radius: 0.4375rem;
  padding: 0.5rem 0.625rem;
  color: hsl(var(--foreground));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
body.v2 .dropdown-item:hover,
body.v2 .dropdown-item:focus {
  background: hsl(var(--muted));
  color: hsl(var(--foreground));
}
body.v2 .dropdown-divider { border-color: hsl(var(--border)); margin: 0.25rem 0; }

/* ---------------------------------------------------------------------------
 * 20. Empty space / divider
 * --------------------------------------------------------------------------- */
body.v2 hr { border-color: hsl(var(--border)); opacity: 1; }

/* ---------------------------------------------------------------------------
 * 21. Utility colors
 * --------------------------------------------------------------------------- */
body.v2 .text-success { color: hsl(142 71% 32%) !important; }
body.v2 .text-warning { color: hsl(28 92% 38%) !important; }
body.v2 .text-danger  { color: hsl(var(--destructive)) !important; }
body.v2 .text-primary { color: hsl(var(--primary)) !important; }
body.v2 .text-muted   { color: hsl(var(--muted-foreground)) !important; }
body.v2 .text-dark    { color: hsl(var(--foreground)) !important; }
body.v2 .border       { border-color: hsl(var(--border)) !important; }
body.v2 .bg-light     { background: hsl(var(--subtle)) !important; }
body.v2 .bg-white     { background: hsl(var(--card)) !important; }

/* progress bar default */
body.v2 .progress { background: hsl(var(--muted)); border-radius: 999px; }
body.v2 .progress-bar { background: hsl(var(--primary)); border-radius: 999px; }

/* ---------------------------------------------------------------------------
 * 20. Form sections — admin product / method edit forms
 * --------------------------------------------------------------------------- */
body.v2 .form-section {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
body.v2 .form-section-header {
  padding: 1rem 1.375rem;
  border-bottom: 1px solid hsl(var(--border));
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: hsl(var(--subtle));
}
body.v2 .form-section-header small {
  font-weight: 400;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}
body.v2 .form-section-body { padding: 1.25rem 1.375rem; }

/* ---------------------------------------------------------------------------
 * 21a. Admin product / payment-method card grid
 *      Used by /admin/products/ and /admin/methods/.
 * --------------------------------------------------------------------------- */
body.v2 .pm-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
body.v2 .pm-admin-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-card);
  box-shadow: 0 1px 2px hsl(222 47% 11% / 0.04);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  position: relative;
  cursor: grab;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body.v2 .pm-admin-card:hover {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 4px 12px hsl(222 47% 11% / 0.08);
}
body.v2 .pm-admin-card.is-disabled {
  background: hsl(var(--warning) / 0.06);
  border-color: hsl(var(--warning) / 0.30);
}
body.v2 .pm-admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
body.v2 .pm-admin-card h6 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  word-break: break-word;
}
body.v2 .pm-admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .pm-admin-meta .chip {
  background: hsl(var(--muted));
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-weight: 500;
}
body.v2 .pm-admin-meta .chip code {
  background: transparent;
  padding: 0;
  font-size: 0.75rem;
}
body.v2 .pm-admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(var(--border));
}
body.v2 .pm-admin-card img {
  flex-shrink: 0;
  width: 2.5rem !important;
  height: 2.5rem !important;
  max-width: 2.5rem !important;
  max-height: 2.5rem !important;
  object-fit: contain;
  border-radius: 0.375rem;
  background: hsl(var(--subtle));
  padding: 0.25rem;
}

/* ---------------------------------------------------------------------------
 * 21b. Premium plan radio cards (request_money "Buy premium" tab)
 * --------------------------------------------------------------------------- */
body.v2 .pp-plan {
  display: block;
  position: relative;
  cursor: pointer;
  margin: 0;
}
body.v2 .pp-plan .pp-plan-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.v2 .pp-plan-body {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 1.25rem 1.25rem;
  text-align: center;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
body.v2 .pp-plan-body:hover {
  border-color: hsl(var(--primary) / 0.5);
  box-shadow: 0 4px 12px hsl(222 47% 11% / 0.06);
}
body.v2 .pp-plan-role {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
body.v2 .pp-plan-days {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0.25rem 0;
}
body.v2 .pp-plan-price {
  font-size: 1.75rem;
  font-weight: 800;
  color: hsl(var(--primary));
  letter-spacing: -0.025em;
}
body.v2 .pp-plan-check {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .15s ease, transform .15s ease;
}
body.v2 .pp-plan-input:checked + .pp-plan-body {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.10);
  background: hsl(var(--primary) / 0.03);
}
body.v2 .pp-plan-input:checked + .pp-plan-body .pp-plan-check {
  opacity: 1;
  transform: scale(1);
}

/* ---------------------------------------------------------------------------
 * 21c. Product / gift card grid
 * --------------------------------------------------------------------------- */
body.v2 .pp-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.125rem;
}
body.v2 .pp-product-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
body.v2 .pp-product-card:hover {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 6px 18px hsl(222 47% 11% / 0.10);
  transform: translateY(-2px);
}
body.v2 .pp-product-img {
  width: 100% !important;
  max-width: 100% !important;
  height: 9rem !important;
  max-height: 9rem !important;
  object-fit: cover;
  background: hsl(var(--subtle));
  border-bottom: 1px solid hsl(var(--border));
  display: block;
}
body.v2 .pp-product-img.placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}
body.v2 .pp-product-body {
  padding: 1rem 1.125rem 1.125rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.v2 .pp-product-title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: hsl(var(--foreground));
}
body.v2 .pp-product-price {
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: hsl(var(--primary));
  margin: 0.125rem 0 0.5rem;
}
body.v2 .pp-product-desc {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.75rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.v2 .pp-product-btn { margin-top: auto; }
body.v2 .pp-denom-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 0.5rem;
}
body.v2 .pp-denom-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.625rem;
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  background: hsl(var(--subtle));
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
body.v2 .pp-denom-chip:hover {
  border-color: hsl(var(--primary));
}
body.v2 .pp-denom-chip.is-selected {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: #fff;
}
body.v2 .pp-denom-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Inline alert icon shown next to status badges in /request_money/'s
   Activity history when a row has admin info/rejection text. The
   surrounding <td> carries the actual tooltip — this just makes the
   alert state visible at a glance. */
body.v2 .status-info-alert {
  vertical-align: -3px;
}
body.v2 td:hover .status-info-alert {
  transform: scale(1.08);
  transition: transform 0.12s ease-out;
}

/* Red "alert" variant for Bootstrap 5 tooltips. Triggered via
   data-bs-custom-class="tooltip-alert" — used on the Activity history
   status cell on /request_money/ so admin rejection/info text reads as
   a warning rather than a neutral hint. The arrow color must be set
   per-direction; Bootstrap puts .bs-tooltip-{top,bottom,start,end} on
   the same root element where our custom class lands. */
.tooltip-alert .tooltip-inner {
  background-color: #dc3545;
  color: #fff;
  font-weight: 500;
}
.tooltip-alert.bs-tooltip-top    .tooltip-arrow::before { border-top-color:    #dc3545; }
.tooltip-alert.bs-tooltip-bottom .tooltip-arrow::before { border-bottom-color: #dc3545; }
.tooltip-alert.bs-tooltip-start  .tooltip-arrow::before { border-left-color:   #dc3545; }
.tooltip-alert.bs-tooltip-end    .tooltip-arrow::before { border-right-color:  #dc3545; }
/* Auto-placement variants Bootstrap uses when data-bs-placement is "auto" */
.tooltip-alert.bs-tooltip-auto[data-popper-placement^="top"]    .tooltip-arrow::before { border-top-color:    #dc3545; }
.tooltip-alert.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: #dc3545; }
.tooltip-alert.bs-tooltip-auto[data-popper-placement^="left"]   .tooltip-arrow::before { border-left-color:   #dc3545; }
.tooltip-alert.bs-tooltip-auto[data-popper-placement^="right"]  .tooltip-arrow::before { border-right-color:  #dc3545; }

/* ---------------------------------------------------------------------------
 * 21cb. Captcha block (used by /payment_information/, /request_money/, /account/)
 * --------------------------------------------------------------------------- */
body.v2 .pp-captcha {
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  padding: 0.875rem 1rem;
}
/* Cloudflare invisible mode emits a zero-size, visibility:hidden widget
   container (.xfs-cf-invisible). When that's what fills the wrapper,
   the .pp-captcha chrome would just paint an empty box — collapse it. */
body.v2 .pp-captcha:has(.xfs-cf-invisible) {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
body.v2 .pp-captcha .form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
body.v2 .pp-captcha-row {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
  flex-wrap: wrap;
}
body.v2 .pp-captcha-widget {
  flex-shrink: 0;
  background: #fff;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.375rem 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: hsl(var(--foreground));
  display: inline-flex;
  align-items: center;
  user-select: none;
  min-height: 2.5rem;
  /* legacy captcha widgets that wrap text in a <div> with mixed inline
     styling are accommodated here. */
}
body.v2 .pp-captcha-widget * { vertical-align: middle; }
body.v2 .pp-captcha-row .form-control {
  flex: 1;
  min-width: 12rem;
  max-width: 24rem;
}

/* ---------------------------------------------------------------------------
 * 21cc. Admin-mode ribbon (admin viewing user pages)
 *       Render above the topbar; communicates clearly that the admin is in
 *       userpanel-view mode and offers a one-click escape back to /admin/.
 * --------------------------------------------------------------------------- */
body.v2 .admin-mode-ribbon {
  position: sticky;
  top: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 1.25rem;
  background: linear-gradient(90deg, hsl(220 25% 15%), hsl(220 25% 22%));
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
}
@media (min-width: 1200px) {
  body.v2 .admin-mode-ribbon { padding-left: calc(var(--sidebar-w) + 1.25rem); }
}
body.v2 .admin-mode-ribbon__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: hsl(0 0% 100% / 0.10);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}
body.v2 .admin-mode-ribbon__chip svg { color: hsl(0 0% 100% / 0.8); }
body.v2 .admin-mode-ribbon__back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  padding: 0.1875rem 0.5rem;
  border-radius: 0.375rem;
  transition: background .15s ease;
}
body.v2 .admin-mode-ribbon__back:hover { background: hsl(0 0% 100% / 0.12); color: #fff; }
/* push the header below the ribbon by clearing sticky offset */
body.v2 .admin-mode-ribbon + .header { top: 0; }

/* ---------------------------------------------------------------------------
 * 21cd. "Back to admin" tile in sidebar footer (admin only)
 * --------------------------------------------------------------------------- */
body.v2 .v2-sidebar-admin-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, hsl(220 25% 15%), hsl(220 30% 22%));
  color: #fff !important;
  text-decoration: none;
  margin-bottom: 0.5rem;
  font-size: 0.8125rem;
  transition: filter .15s ease;
}
body.v2 .v2-sidebar-admin-link:hover { filter: brightness(1.1); color: #fff !important; }
body.v2 .v2-sidebar-admin-icon {
  width: 1.75rem; height: 1.75rem;
  border-radius: 0.4375rem;
  background: hsl(0 0% 100% / 0.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
body.v2 .v2-sidebar-admin-label {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  font-weight: 600;
}
body.v2 .v2-sidebar-admin-label small {
  font-weight: 500;
  opacity: 0.7;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
 * 21d. Sidebar — kill ALL legacy dashboard.css bullets / chevrons / oversized
 *      icons. These rules need to win on admin pages where dashboard.css is
 *      loaded alongside v2-dashboard-pro.css.
 * --------------------------------------------------------------------------- */
/* legacy bullet dot before every submenu item */
body.v2 .navpanel-submenu .nav-link::before,
body.v2 .navpanel-submenu .nav-link:before { content: none !important; display: none !important; background: none !important; width: 0 !important; height: 0 !important; }
/* legacy chevron arrow on parent rows (we render our own caret via has-submenu::after) */
body.v2 .navpanel-menu .nav-link.has-submenu::before,
body.v2 .navpanel-menu .nav-link.has-submenu:before { content: none !important; display: none !important; }
/* legacy menu marker on list items (extra-defensive) */
body.v2 .v2-sidebar-link::marker,
body.v2 .navpanel-menu .nav-link::marker,
body.v2 .navpanel-submenu .nav-link::marker { content: none; }
/* legacy 40px-wide icon column → bring it back to a normal-sized icon */
body.v2 .navpanel-icon {
  min-width: 1.25rem !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
body.v2 .navpanel-icon svg {
  width: 1.0625rem !important;
  height: 1.0625rem !important;
}
/* legacy active-row inset shadow (right-side red bar) — replace with our left rail */
body.v2 .navpanel-menu .nav-link.active {
  box-shadow: none !important;
  background: hsl(var(--primary) / 0.10) !important;
  color: hsl(var(--primary)) !important;
}
/* legacy chevron after has-submenu — keep ours, hide legacy */
body.v2 .navpanel-menu .nav-link.has-submenu::after { background: none !important; }

/* legacy hover state from dashboard.css uses #fff text; we use foreground */
body.v2 .navpanel-menu .nav-link:hover,
body.v2 .navpanel-menu .nav-link:hover svg path { color: hsl(var(--foreground)) !important; fill: currentColor !important; }

/* legacy navpanel-tabs (the Adminpanel/Userpanel switcher) used dark surface */
body.v2 .navpanel .navpanel-tabs.nav-fill .nav-link { color: hsl(var(--muted-foreground)) !important; }
body.v2 .navpanel .navpanel-tabs.nav-fill .nav-link.active { color: hsl(var(--foreground)) !important; }

/* Some submenu items are wrapped in <div class="nav flex-column"> in
   navpanel.html. Make sure they inherit our padding, not legacy BS .nav row. */
body.v2 .navpanel-submenu .nav { display: flex; flex-direction: column; gap: 0; }
body.v2 .navpanel-submenu .nav .nav-link {
  padding: 0.3125rem 0.625rem !important;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground)) !important;
}
body.v2 .navpanel-submenu .nav .nav-link:hover { background: hsl(var(--muted)) !important; color: hsl(var(--foreground)) !important; }
body.v2 .navpanel-submenu .nav .nav-link.text-white {
  color: hsl(var(--primary)) !important;
  background: transparent !important;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 21e. Payment-method picker (compact cards) — /payment_information/
 * --------------------------------------------------------------------------- */

/* Category filter chips (modern pill-style tabs) */
body.v2 .pm-cat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed hsl(var(--border));
}
body.v2 .pm-cat-chip {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease, transform .1s ease;
  white-space: nowrap;
}
body.v2 .pm-cat-chip:hover {
  border-color: hsl(var(--primary) / 0.55);
  color: hsl(var(--foreground));
  background: hsl(var(--primary) / 0.04);
}
body.v2 .pm-cat-chip:active {
  transform: translateY(1px);
}
body.v2 .pm-cat-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.125rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1;
}
body.v2 .pm-cat-chip.is-active {
  background: hsl(var(--primary));
  color: #fff;
  border-color: hsl(var(--primary));
  box-shadow: 0 1px 2px hsl(var(--primary) / 0.25), 0 0 0 3px hsl(var(--primary) / 0.12);
}
body.v2 .pm-cat-chip.is-active .pm-cat-chip__count {
  background: rgba(255,255,255,0.22);
  color: #fff;
}
body.v2 .pm-empty-cat {
  text-align: center;
  padding: 2rem 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.625rem;
  background: hsl(var(--subtle) / 0.4);
}
body.v2 .pm-empty-cat svg { opacity: 0.4; }

body.v2 .pm-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}
body.v2 .pm-picker {
  display: block;
  margin: 0;
  cursor: pointer;
  position: relative;
}
body.v2 .pm-picker-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
body.v2 .pm-picker-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  background: hsl(var(--card));
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
  position: relative;
}
body.v2 .pm-picker:hover .pm-picker-body {
  border-color: hsl(var(--primary) / 0.55);
}
body.v2 .pm-picker-logo {
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
  overflow: hidden;
}
body.v2 .pm-picker-logo img {
  display: block;
  width: 100%  !important;
  height: 100% !important;
  max-width: 2.25rem !important;
  max-height: 2.25rem !important;
  object-fit: contain;
}
body.v2 .pm-picker-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
body.v2 .pm-picker-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v2 .pm-picker-min {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .pm-picker-min b { color: hsl(var(--foreground)); font-weight: 600; }
body.v2 .pm-picker-check {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: hsl(var(--primary));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity .15s ease, transform .15s ease;
}
body.v2 .pm-picker-saved {
  position: absolute;
  top: -0.55rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(135deg, hsl(var(--success, 142 71% 45%)), hsl(var(--success, 142 71% 38%)));
  color: #fff;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px hsl(var(--success, 142 71% 45%) / 0.35);
  z-index: 1;
}
body.v2 .pm-picker-input:checked + .pm-picker-body,
body.v2 .pm-picker.is-active .pm-picker-body {
  border-color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.04);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.10);
}
body.v2 .pm-picker-input:checked + .pm-picker-body .pm-picker-check,
body.v2 .pm-picker.is-active .pm-picker-body .pm-picker-check {
  opacity: 1;
  transform: scale(1);
}

/* method fields panel */
body.v2 .pm-fields { display: none; }
body.v2 .pm-fields.is-visible { display: block; }
body.v2 .pm-fields-empty {
  text-align: center;
  padding: 2.25rem 1rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}
body.v2 .pm-fields-empty svg { opacity: 0.4; }

/* ---------------------------------------------------------------------------
 * 21z. Layout integrity fixes
 *
 * Targeted corrections for residual dashboard-layout breakage reported on
 * /account/, /request_money/, /payment_information/. Each rule below
 * addresses a specific symptom — keep them surgical, not a rewrite.
 * --------------------------------------------------------------------------- */

/* Symptom: occasional 1-2px horizontal scrollbar at certain widths.
 * Cause: Bootstrap `.row`'s negative gutter margins peeking past
 *        `.container-fluid`'s padding when content has wide tables/<pre>.
 *        Constrain the container itself (not main — that would break
 *        position:sticky on the header & break flex children).
 */
body.v2 main > .container-fluid {
  width: 100%;
  overflow-x: clip;       /* `clip` doesn't create a new scroll context like `hidden` does */
}

/* Symptom: `.tab-content.pp-card-body` doubled the body padding (1.375rem)
 * even though the tab strip already sits 1.125rem from the top of the card.
 * Tighten the top padding so tab → panel transition is flush.
 */
body.v2 .pp-card > .tab-content.pp-card-body { padding-top: 1.125rem; }

/* Symptom: `.pp-card.p-0` containing tabs + content didn't round its
 * bottom corners cleanly because inner content lacked `border-radius`.
 * Force the last child of a .p-0 card to inherit rounding.
 */
body.v2 .pp-card.p-0 > *:last-child { border-radius: 0 0 var(--radius-card) var(--radius-card); }

/* Symptom: `.row .col-*` cards inside the payout tab had inconsistent
 * vertical gap when a column wrapped to its own row (Bootstrap default
 * gutter applies on both axes only with g-*). The forms use g-3 — good
 * — but reset any column padding override that legacy CSS may have set.
 */
body.v2 main .row > [class*="col-"] { padding-top: 0; padding-bottom: 0; }

/* Symptom: page-heading + the immediately-following .stat-grid had
 * compounding margins (1.5rem + 1.5rem). Collapse to a single gap.
 */
body.v2 .page-heading + .stat-grid { margin-top: 0; }
body.v2 .page-heading + .alert     { margin-top: -0.5rem; }

/* Symptom: sticky header sometimes covered focus rings from inputs near
 * the top of the page when keyboard-scrolled. Add scroll-margin so
 * focused inputs/anchors leave room for the header.
 */
body.v2 :target,
body.v2 input:focus,
body.v2 textarea:focus,
body.v2 select:focus { scroll-margin-top: calc(var(--topbar-h) + 0.75rem); }

/* Symptom: when the admin viewer ribbon is shown above the header, the
 * sticky header should sit BELOW the ribbon (not on top of it).
 */
body.v2 .admin-mode-ribbon + .header { top: 0; }

/* ---------------------------------------------------------------------------
 * 21ce. Admin sidebar (v2 style) — accordion submenus
 *       Admin pages now use `navpanel_admin_v2.html` which is built from the
 *       same `.v2-sidebar*` primitives as the user sidebar. The only extra
 *       piece needed beyond what v2-dashboard.css already defines is the
 *       expandable group block (Files / Users / Statistics) — a toggle row
 *       that looks like a `.v2-sidebar-link` plus an indented submenu list
 *       that hides until the toggle has `.open`. The server template renders
 *       `.open` server-side when the current op matches any submenu item
 *       (analogous to the legacy `style="display:block"` inline trick).
 * --------------------------------------------------------------------------- */
body.v2 .v2-sidebar-group-toggle {
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
body.v2 .v2-sidebar-group-toggle .v2-sidebar-chev {
  margin-left: auto;
  transition: transform .15s ease;
  opacity: .55;
}
body.v2 .v2-sidebar-group-toggle.open .v2-sidebar-chev { transform: rotate(90deg); }
body.v2 .v2-sidebar-submenu {
  display: none;
  flex-direction: column;
  gap: .05rem;
  padding-inline-start: .75rem;
  margin: .1rem 0 .35rem .9rem;
  border-inline-start: 1px solid hsl(var(--border));
}
body.v2 .v2-sidebar-submenu.open { display: flex; }
body.v2 .v2-sidebar-sublink {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .32rem .6rem;
  font-size: .8125rem;
  border-radius: .375rem;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  line-height: 1.3;
}
body.v2 .v2-sidebar-sublink:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--muted) / .6);
}
body.v2 .v2-sidebar-sublink.active {
  color: hsl(var(--primary));
  background: hsl(var(--primary) / .08);
  font-weight: 600;
}
/* Install Center "g_updates" badge — small pill aligned at the row end */
body.v2 .v2-sidebar-link .v2-sidebar-badge {
  margin-left: auto;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground, 0 0% 100%));
  border-radius: 999px;
  font-size: .6875rem;
  font-weight: 700;
  padding: .05rem .45rem;
  line-height: 1.3;
}
/* RTL: chevron in the group toggle points the same direction as the
   user sidebar's chevrons (the global `.pdest__change svg` flip rule
   already covers other chevrons; mirror it here for completeness). */
body.v2[dir="rtl"] .v2-sidebar-group-toggle .v2-sidebar-chev,
[dir="rtl"] body.v2 .v2-sidebar-group-toggle .v2-sidebar-chev {
  transform: scaleX(-1);
}
body.v2[dir="rtl"] .v2-sidebar-group-toggle.open .v2-sidebar-chev,
[dir="rtl"] body.v2 .v2-sidebar-group-toggle.open .v2-sidebar-chev {
  transform: scaleX(-1) rotate(90deg);
}

/* Symptom: tab-pane fade transition occasionally left `display:none`
 * inside `.fade` without `.show` causing a 0-height pane to push the
 * card body to collapse. Force min-height so the card never shrinks
 * to nothing during the transition.
 */
body.v2 .pp-card .tab-content { min-height: 6rem; }

/* ---------------------------------------------------------------------------
 * 21d. /files/ — premium file-manager redesign
 * ---------------------------------------------------------------------------
 * Consumer-cloud-storage feel (MediaFire / Dropbox / Mega / Proton Drive):
 *   - two-column shell: refined folder tree on the left, content on the right
 *   - toolbar with a primary Upload action, a wide modern search, and a
 *     storage stat on the right; all controls share the same height (40px)
 *   - file rows are interactive cards rendered as a borderless table; each
 *     row has a tinted type-tile and a two-line name/meta layout
 *   - per-row action icons reveal on hover for a calmer default state
 *   - empty state, drop overlay, and dropzone all share the same radius/feel
 *
 * Class prefixes:
 *   .files-*  → page shell (layout + sidebar)   — used by my_files.html
 *   .fm-*     → file-manager primitives (toolbar / table / row / icon-tile)
 */

/* ----- Shell ----- */
body.v2 .files-layout {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
body.v2 .files-main { min-width: 0; }

/* ----- Sidebar (folder tree) ----- */
body.v2 .files-tree {
  background: hsl(var(--card, 0 0% 100%));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  padding: 0.75rem 0.5rem;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
body.v2 .files-tree__header {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0.375rem 0.75rem 0.625rem;
}
body.v2 .files-tree__list { list-style: none; margin: 0; padding: 0; }
body.v2 .files-tree__link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  margin: 0.0625rem 0;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  text-decoration: none;
  line-height: 1.2;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body.v2 .files-tree__icon-wrap {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.4375rem;
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body.v2 .files-tree__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.v2 .files-tree__link:hover {
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
}
body.v2 .files-tree__link:hover .files-tree__icon-wrap {
  background: #fff;
  color: hsl(var(--primary));
}
body.v2 .files-tree__link.is-active {
  background: hsl(var(--primary) / 0.08);
  color: hsl(var(--primary));
  font-weight: 600;
}
body.v2 .files-tree__link.is-active .files-tree__icon-wrap {
  background: hsl(var(--primary));
  color: #fff;
}

/* ----- Toolbar ----- */
body.v2 .fm-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: hsl(var(--card, 0 0% 100%));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
body.v2 .fm-toolbar__primary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
body.v2 .fm-toolbar__search {
  flex: 1 1 240px;
  min-width: 200px;
}
body.v2 .fm-toolbar__meta {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* Consistent button heights inside the toolbar */
body.v2 .fm-toolbar .btn,
body.v2 .fm-toolbar .fm-search__input {
  height: 2.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
}
body.v2 .fm-toolbar .btn { padding: 0 1rem; gap: 0.5rem; border-radius: 0.5rem; }
body.v2 .fm-toolbar .btn-primary.fm-btn-upload {
  background: linear-gradient(180deg, hsl(var(--primary)), hsl(var(--primary-hover)));
  border-color: hsl(var(--primary-hover));
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.25), 0 0 0 1px hsl(var(--primary-hover)) inset;
  font-weight: 600;
}
body.v2 .fm-toolbar .btn-primary.fm-btn-upload:hover {
  filter: brightness(1.05);
}
body.v2 .fm-toolbar .fm-btn-secondary {
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
}
body.v2 .fm-toolbar .fm-btn-secondary:hover {
  background: #fff;
  border-color: hsl(var(--muted-foreground) / 0.4);
  color: hsl(var(--primary));
}

/* Modern search field */
body.v2 .fm-search {
  position: relative;
  display: block;
  margin: 0;
}
body.v2 .fm-search__icon {
  position: absolute;
  top: 50%;
  left: 0.875rem;
  transform: translateY(-50%);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
body.v2 .fm-search__input {
  width: 100%;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--subtle));
  border-radius: 0.5rem;
  padding: 0 0.875rem 0 2.375rem;
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
body.v2 .fm-search__input::placeholder { color: hsl(var(--muted-foreground)); }
body.v2 .fm-search__input:focus {
  border-color: hsl(var(--primary));
  background: #fff;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.12);
}

/* Toolbar meta: share link + storage usage */
body.v2 .fm-link-share {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.625rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease;
}
body.v2 .fm-link-share:hover {
  background: hsl(var(--subtle));
  color: hsl(var(--primary));
}
body.v2 .fm-usage {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  padding: 0 0.75rem;
  height: 2.5rem;
  line-height: 2.5rem;
  border-radius: 0.5rem;
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border));
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
body.v2 .fm-usage__primary {
  color: hsl(var(--foreground));
  font-weight: 600;
}
body.v2 .fm-usage__sep,
body.v2 .fm-usage__dot { color: hsl(var(--muted-foreground)); opacity: 0.6; }
body.v2 .fm-usage__secondary { color: hsl(var(--foreground)); font-weight: 500; }
body.v2 .fm-usage__files { color: hsl(var(--muted-foreground)); }

/* ----- File-manager table ----- */
/* Wrapper around the table. Uses `overflow: visible` so per-row dropdown
   menus don't get clipped. The remaining 6 columns fit comfortably on any
   reasonable viewport, and at <640px we hide secondary columns. If anything
   ever does overflow it falls through to the page-level scroll, which is
   styled with a thin modern scrollbar below. */
body.v2 .fm-tablewrap {
  width: 100%;
  position: relative;
  background: hsl(var(--card, 0 0% 100%));
  border: 1px solid hsl(var(--border));
  border-radius: 0.875rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Thin modern scrollbar (page-wide). Replaces the default chunky scrollbar
   on browsers that show one when the table or other content overflows. */
body.v2 .fm-tablewrap,
body.v2 main {
  scrollbar-width: thin;
  scrollbar-color: hsl(220 13% 80%) transparent;
}
body.v2 .fm-tablewrap::-webkit-scrollbar,
body.v2 main ::-webkit-scrollbar {
  height: 8px;
  width: 8px;
  background: transparent;
}
body.v2 .fm-tablewrap::-webkit-scrollbar-track,
body.v2 main ::-webkit-scrollbar-track { background: transparent; }
body.v2 .fm-tablewrap::-webkit-scrollbar-thumb,
body.v2 main ::-webkit-scrollbar-thumb {
  background-color: hsl(220 13% 86%);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}
body.v2 .fm-tablewrap:hover::-webkit-scrollbar-thumb,
body.v2 main :hover::-webkit-scrollbar-thumb {
  background-color: hsl(220 13% 75%);
}
body.v2 .fm-tablewrap::-webkit-scrollbar-thumb:hover,
body.v2 main ::-webkit-scrollbar-thumb:hover {
  background-color: hsl(220 13% 60%);
}
body.v2 .fm-tablewrap::-webkit-scrollbar-corner,
body.v2 main ::-webkit-scrollbar-corner { background: transparent; }

body.v2 .fm-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  /* No overflow:hidden here — per-row dropdowns need to escape the table.
     Rounded corners live on the .fm-tablewrap above; we just round the
     header / last-row cells so the inner backgrounds match the wrap. */
}
body.v2 .fm-table thead tr:first-child th:first-child { border-top-left-radius: 0.875rem; }
body.v2 .fm-table thead tr:first-child th:last-child  { border-top-right-radius: 0.875rem; }
body.v2 .fm-table tbody tr:last-child td:first-child  { border-bottom-left-radius: 0.875rem; }
body.v2 .fm-table tbody tr:last-child td:last-child   { border-bottom-right-radius: 0.875rem; }
body.v2 .fm-table thead th {
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  white-space: nowrap;
  text-align: left;
}
body.v2 .fm-table thead th a,
body.v2 .fm-table thead th .sort-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: color 0.12s ease;
}
body.v2 .fm-table thead th .sort-link:hover { color: hsl(var(--foreground)); }
body.v2 .fm-table thead th .sort-arrow {
  opacity: 0.85;
  color: hsl(var(--primary));
  flex-shrink: 0;
}
body.v2 .fm-table thead th.fm-col-num,
body.v2 .fm-table thead th.fm-col-actions { text-align: center; }
body.v2 .fm-table tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(220 14% 94%);
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  vertical-align: middle;
}
body.v2 .fm-table tbody tr:last-child td { border-bottom: 0; }

body.v2 .fm-col-check   { width: 2.5rem; padding-left: 1.125rem !important; padding-right: 0.25rem !important; }
body.v2 .fm-col-size    { width: 6.25rem; color: hsl(var(--muted-foreground)); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.v2 .fm-col-date    { width: 7.5rem; color: hsl(var(--muted-foreground)); white-space: nowrap; font-variant-numeric: tabular-nums; }
body.v2 .fm-col-num     { width: 5.5rem; text-align: center; color: hsl(var(--muted-foreground)); font-variant-numeric: tabular-nums; }
body.v2 .fm-col-actions { width: 3.5rem; text-align: center; white-space: nowrap; padding-right: 0.75rem !important; }

/* Row hover — feels clickable */
body.v2 .fm-row { transition: background-color 0.12s ease, box-shadow 0.12s ease; }
body.v2 .fm-row:hover { background: hsl(220 14% 98%); }
body.v2 .fm-row:hover .fm-icon-btn--menu { color: hsl(var(--foreground)); }

/* Per-row 3-dots menu trigger — visible at low contrast, full contrast on hover */
body.v2 .fm-icon-btn--menu {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  color: hsl(220 9% 60%);
  padding: 0;
}
body.v2 .fm-icon-btn--menu:hover,
body.v2 .fm-icon-btn--menu[aria-expanded="true"] {
  background: hsl(220 14% 96%);
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}

/* The dropdown panel */
body.v2 .fm-row-menu__menu {
  --bs-dropdown-padding-y: 0.25rem;
  --bs-dropdown-min-width: 13.5rem;
  border-radius: 0.625rem;
  border-color: hsl(var(--border));
  box-shadow: 0 12px 32px -10px rgba(15, 23, 42, 0.18), 0 4px 8px rgba(15, 23, 42, 0.06);
  padding: 0.3125rem;
}
body.v2 .fm-menu-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  border-radius: 0.4375rem;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: 0;
  width: 100%;
  text-align: left;
}
body.v2 .fm-menu-item:hover,
body.v2 .fm-menu-item:focus {
  background: hsl(var(--subtle));
  color: hsl(var(--foreground));
}
body.v2 .fm-menu-item svg {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
body.v2 .fm-menu-item:hover svg { color: hsl(var(--foreground)); }
body.v2 .fm-menu-item--danger { color: #b91c1c; }
body.v2 .fm-menu-item--danger:hover {
  background: rgba(220, 38, 38, 0.08);
  color: #991b1b;
}
body.v2 .fm-menu-item--danger svg,
body.v2 .fm-menu-item--danger:hover svg { color: currentColor; }
body.v2 .fm-row-menu__menu .dropdown-divider {
  margin: 0.3125rem 0.25rem;
  border-color: hsl(var(--border));
  opacity: 0.7;
}

/* Toggle row inside menu — label + mini iOS switch on the right */
body.v2 .fm-menu-toggle {
  cursor: pointer;
  margin-bottom: 0;
}
body.v2 .fm-menu-toggle__label {
  flex: 1;
  min-width: 0;
}
body.v2 .form-switcher--mini input[type="checkbox"] {
  width: 1.875rem !important;
  height: 1.125rem !important;
  min-width: 1.875rem !important;
}
body.v2 .form-switcher--mini input[type="checkbox"]::before {
  width: 0.875rem !important;
  height: 0.875rem !important;
  top: 0.0625rem !important;
  left: 0.0625rem !important;
}
body.v2 .form-switcher--mini input[type="checkbox"]:checked::before {
  transform: translateX(0.75rem) !important;
}

/* Inline flag pills under the file title (Premium / Public) */
body.v2 .fm-flag {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.01em;
  vertical-align: 1px;
}
body.v2 .fm-flag--premium { background: rgba(245, 158, 11, 0.16); color: #b45309; }
body.v2 .fm-flag--public  { background: rgba(16, 185, 129, 0.16); color: #047857; }

/* Name cell — icon tile + two-line label */
body.v2 .fm-name-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  min-width: 0;
  max-width: 100%;
}
body.v2 .fm-name-cell:hover { color: hsl(var(--primary)); }
body.v2 .fm-name-text {
  display: inline-flex;
  flex-direction: column;
  min-width: 0;
  max-width: 38vw;
}
body.v2 .fm-title {
  font-weight: 600;
  color: hsl(var(--foreground));
  font-size: 0.9rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.v2 .fm-sub {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.25;
  margin-top: 0.125rem;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Date + downloads in the sub line — desktop has the dedicated columns,
   so we hide them by default and the mobile media query re-enables them. */
body.v2 .fm-sub__mobile { display: none; }

/* Tinted icon tile */
body.v2 .fm-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.375rem;
  height: 2.375rem;
  border-radius: 0.625rem;
  flex-shrink: 0;
  background: hsl(220 14% 96%);
  color: hsl(220 9% 46%);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04);
  transition: transform 0.12s ease;
}
body.v2 .fm-row:hover .fm-icon { transform: scale(1.04); }
body.v2 .fm-icon img { width: 1.25rem; height: 1.25rem; }
/* Type tints — soft pastel bg + saturated fg for icon stroke */
body.v2 .fm-icon--folder { background: linear-gradient(135deg, rgba(255, 196, 60, 0.18), rgba(245, 158, 11, 0.22)); color: #b45309; }
body.v2 .fm-icon--up     { background: hsl(220 14% 94%); color: hsl(220 9% 38%); }
body.v2 .fm-icon--image  { background: rgba(20, 184, 166, 0.14); color: #0d9488; }
body.v2 .fm-icon--video  { background: rgba(99, 102, 241, 0.14); color: #4f46e5; }
body.v2 .fm-icon--audio  { background: rgba(236, 72, 153, 0.14); color: #db2777; }
body.v2 .fm-icon--archive{ background: rgba(217, 119, 6, 0.16); color: #92400e; }
body.v2 .fm-icon--pdf    { background: rgba(220, 38, 38, 0.14); color: #b91c1c; }
body.v2 .fm-icon--doc    { background: rgba(37, 99, 235, 0.14); color: #1d4ed8; }
body.v2 .fm-icon--sheet  { background: rgba(16, 185, 129, 0.16); color: #047857; }
body.v2 .fm-icon--slides { background: rgba(249, 115, 22, 0.16); color: #c2410c; }
body.v2 .fm-icon--exec   { background: rgba(139, 92, 246, 0.16); color: #6d28d9; }
body.v2 .fm-icon--code   { background: rgba(71, 85, 105, 0.14); color: #334155; }
body.v2 .fm-icon--other  { background: hsl(220 14% 94%); color: hsl(220 9% 38%); }

/* Per-row tiny action buttons */
body.v2 .fm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.4375rem;
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: 1px solid transparent;
  text-decoration: none;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
body.v2 .fm-icon-btn:hover {
  background: #fff;
  border-color: hsl(var(--border));
  color: hsl(var(--foreground));
}
body.v2 .fm-icon-btn--danger:hover {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
  border-color: rgba(220, 38, 38, 0.25);
}

/* Chips + dash */
body.v2 .fm-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 999px;
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
}
body.v2 .fm-chip--warn { background: rgba(245, 158, 11, 0.14); color: #b45309; }
body.v2 .fm-dash { color: hsl(var(--muted-foreground)); }

/* Empty state */
body.v2 .fm-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3rem 1rem;
  color: hsl(var(--muted-foreground));
}
body.v2 .fm-empty svg {
  color: hsl(var(--muted-foreground));
  opacity: 0.4;
  margin-bottom: 0.75rem;
}
body.v2 .fm-empty__title {
  color: hsl(var(--foreground));
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
body.v2 .fm-empty__sub { font-size: 0.875rem; }

/* Folder-row tweaks: slightly emphasized title, count chip */
body.v2 .fm-row--folder .fm-title { font-weight: 600; }
body.v2 .fm-row--folder .fm-sub { color: hsl(var(--muted-foreground)); text-transform: none; }

/* Trashed-row meta column */
body.v2 .fm-trash-meta { color: hsl(var(--muted-foreground)); }

/* "Add files" dropzone inside the Upload modal */
body.v2 .files-dropzone {
  display: block;
  border: 2px dashed hsl(var(--border));
  border-radius: 0.75rem;
  padding: 2.25rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--subtle));
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
body.v2 .files-dropzone:hover {
  border-color: hsl(var(--primary));
  background: #fff;
  color: hsl(var(--foreground));
}
body.v2 .files-dropzone__title {
  margin-top: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}
body.v2 .files-dropzone__sub { margin-top: 0.25rem; }
body.v2 .files-upload-actions {
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
body.v2 .files-upload-actions .btn-link {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  font-weight: 500;
}
body.v2 .files-upload-actions .btn-link:hover {
  color: hsl(var(--primary));
}

/* Page-level drag-and-drop overlay */
#files-drop-overlay {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.55);
  pointer-events: none;
}
#files-drop-overlay.is-visible { display: flex; }
.files-drop-overlay__panel {
  background: #fff;
  border: 3px dashed hsl(var(--primary));
  border-radius: 1rem;
  padding: 2.5rem 3rem;
  text-align: center;
  color: hsl(var(--primary));
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.files-drop-overlay__title {
  margin-top: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: hsl(var(--foreground));
}
.files-drop-overlay__sub {
  color: hsl(var(--muted-foreground));
  margin-top: 0.25rem;
}

/* Cap layout width on very wide screens so empty whitespace doesn't dominate */
body.v2 .files-layout {
  max-width: 1400px;
  margin-inline: auto;
  width: 100%;
}

/* Tablet: stack sidebar above content, tighten table */
@media (max-width: 991.98px) {
  body.v2 .files-layout { grid-template-columns: 1fr; }
  body.v2 .files-tree {
    position: static;
    max-height: none;
  }
  body.v2 .files-tree__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
  }
  body.v2 .files-tree__link { padding: 0.4rem 0.625rem; font-size: 0.8125rem; }
  body.v2 .fm-toolbar__meta { margin-left: 0; width: 100%; justify-content: space-between; }
  body.v2 .fm-name-text { max-width: 28vw; }
}

/* Phones: drop secondary columns to keep the row readable */
@media (max-width: 640px) {
  body.v2 .fm-col-date,
  body.v2 .fm-col-num { display: none; }
  /* The hidden column data is folded into the filename's sub-line via
     .fm-sub__mobile (template-side), so we reveal it here on narrow
     viewports. Default state for desktop: hidden. */
  body.v2 .fm-sub__mobile { display: inline; }
  /* Keep the size column compact + always visible, AND respect the table
     card's right edge so the value doesn't bleed past the rounded border. */
  body.v2 .fm-col-size {
    width: 5rem; max-width: 5rem;
    text-align: right;
    padding-right: 1rem !important;      /* breathing room from card edge */
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  body.v2 .fm-table thead th.fm-col-size { padding-right: 1rem !important; }

  /* Hard-cap the table at the wrap width so nothing can overflow on the
     right — `table-layout: fixed` makes column widths obey the CSS instead
     of stretching to fit content. */
  body.v2 .fm-table { table-layout: fixed; }

  /* Constrain the name cell harder so the size never gets pushed off-screen.
     The +date+downloads in .fm-sub will ellipsize cleanly thanks to the
     existing overflow:hidden/text-overflow:ellipsis on .fm-sub. */
  body.v2 .fm-col-name { padding-right: 0.5rem !important; min-width: 0; }
  body.v2 .fm-name-text {
    max-width: none;             /* let it shrink with the flex container */
    min-width: 0;
    flex: 1 1 0;
  }
  body.v2 .fm-title {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 100%;
  }
  body.v2 .fm-icon { width: 2rem; height: 2rem; border-radius: 0.5rem; }
  body.v2 .fm-name-text { max-width: 56vw; }
  body.v2 .fm-toolbar { padding: 0.625rem; }
  /* Icon-only Upload Files + New folder buttons — labels eat 60% of the
     toolbar's horizontal real estate on a phone; the icons are
     self-explanatory and tooltips cover discoverability. */
  body.v2 .fm-toolbar .fm-toolbar__primary .btn {
    width: 2.5rem; height: 2.5rem; padding: 0;
    justify-content: center; gap: 0; border-radius: 0.625rem; flex-shrink: 0;
  }
  body.v2 .fm-toolbar .fm-toolbar__primary .btn span { display: none; }
  body.v2 .fm-toolbar .fm-toolbar__primary .btn svg { width: 18px; height: 18px; }
  body.v2 .fm-usage { font-size: 0.75rem; padding: 0 0.5rem; }
  body.v2 .fm-table tbody td { padding: 0.75rem 0.75rem; }
  body.v2 .fm-table thead th { padding: 0.625rem 0.75rem; }
}

/* ---------------------------------------------------------------------------
 * 22. Responsive
 * --------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  body.v2 main { padding-left: 0; }
  body.v2 .header { padding-left: 0; }
}
@media (max-width: 767.98px) {
  body.v2 .profile-hero { padding: 1.25rem; }
  body.v2 .stat-card { padding: 1rem; }
  body.v2 .pp-card,
  body.v2 main .block,
  body.v2 main .card { padding: 1rem; }
  body.v2 .pp-card-header,
  body.v2 .pp-card-body,
  body.v2 .pp-card-footer { padding: 1rem; }
  body.v2 .top-bar h5,
  body.v2 .top-bar h1,
  body.v2 .top-bar h2 { font-size: 1.25rem; }

  /* Payment-information picker: tighten on mobile */
  body.v2 .pm-picker-grid {
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
    gap: 0.5rem;
  }
  body.v2 .pm-picker-body { padding: 0.75rem 0.875rem; }
  body.v2 .pm-cat-chips {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    gap: 0.375rem;
  }
  body.v2 .pm-cat-chip {
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem;
  }
  body.v2 .pp-captcha-row { flex-direction: column; align-items: stretch; }
  body.v2 .pp-captcha-widget { align-self: flex-start; }
}

/* ---------------------------------------------------------------------------
 * 23. /files/ SPA bits — toasts, brand spinner, confirm modal, button
 *     loading state, list overlay, row transitions.
 *     All hung off the global window.FM helpers in /js/fm-app.js.
 * --------------------------------------------------------------------------- */

/* ---- Toast stack (top-right) ---- */
.fm-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10800;        /* above Bootstrap modal (1055) and most overlays */
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;  /* clicks pass through gaps; toasts re-enable below */
}
.fm-toast {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.6875rem 0.875rem;
  background: #fff;
  color: hsl(220 9% 20%);
  border: 1px solid hsl(220 14% 90%);
  border-left: 3px solid hsl(220 9% 60%);
  border-radius: 0.625rem;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, 0.25),
              0 4px 8px rgba(15, 23, 42, 0.06);
  font-size: 0.875rem;
  pointer-events: auto;
  transform: translateY(-6px);
  opacity: 0;
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.fm-toast.is-visible { transform: translateY(0); opacity: 1; }
.fm-toast__icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: hsl(220 9% 60%);
}
.fm-toast__msg  { flex: 1; min-width: 0; line-height: 1.35; word-break: break-word; }
.fm-toast__close {
  background: none; border: 0; padding: 0 0.25rem;
  font-size: 1.25rem; line-height: 1; color: hsl(220 9% 55%);
  cursor: pointer; align-self: flex-start;
}
.fm-toast__close:hover { color: hsl(220 9% 20%); }
.fm-toast--success { border-left-color: #16a34a; }
.fm-toast--success .fm-toast__icon { background: #16a34a; }
.fm-toast--error   { border-left-color: #ff5a6e; }
.fm-toast--error   .fm-toast__icon { background: #ff5a6e; }
.fm-toast--warn    { border-left-color: #f59e0b; }
.fm-toast--warn    .fm-toast__icon { background: #f59e0b; }
.fm-toast--info    { border-left-color: #2563eb; }
.fm-toast--info    .fm-toast__icon { background: #2563eb; }

/* ---- Brand spinner (#ff5a6e) ---- */
@keyframes fm-spin { to { transform: rotate(360deg); } }
.fm-btn-spinner,
.fm-overlay__spinner {
  display: inline-block;
  width: 1rem; height: 1rem;
  border: 2px solid rgba(255, 90, 110, 0.25);
  border-top-color: #ff5a6e;
  border-radius: 50%;
  animation: fm-spin 0.7s linear infinite;
  margin-left: 0.5rem;
  vertical-align: -0.15em;
}
.fm-overlay__spinner { width: 2rem; height: 2rem; border-width: 3px; margin: 0; }

/* ---- Button loading state ---- */
.btn.is-loading,
button.is-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
}

/* ---- Overlay over the file list while reloading ---- */
.fm-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(1px);
  border-radius: inherit;
  z-index: 5;
  opacity: 0;
  transition: opacity 0.16s ease;
}
.fm-overlay.is-visible { opacity: 1; }

/* ---- Confirm modal (built by FM.confirmModal) ---- */
.fm-confirm .modal-content {
  border-radius: 0.875rem;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
}
.fm-confirm__icon {
  width: 3.25rem; height: 3.25rem;
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}
.fm-confirm__icon--danger {
  background: rgba(255, 90, 110, 0.14);
  color: #ff5a6e;
}
.fm-confirm__title {
  font-weight: 600;
  font-size: 1.0625rem;
  color: hsl(var(--foreground));
  margin: 0;
}
.fm-confirm__body {
  margin-top: 0.5rem;
  color: hsl(var(--muted-foreground));
}
.fm-confirm__file strong {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  color: hsl(var(--foreground));
}

/* ---- Form / modal polish ---- */
.fm-modal .modal-content {
  border-radius: 0.875rem;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
}
.fm-modal .modal-header { border-bottom-color: hsl(var(--border)); }
.fm-modal__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
}
/* Hide the redundant "Edit file/folder" heading already shown in the modal
   title bar when file_form.html / folder_form.html are loaded into a modal. */
.fm-modal__body > .h5,
.fm-modal__body .block.admin-settings > .h5 {
  display: none;
}
.fm-modal__body .block.admin-settings {
  border: 0;
  padding: 0;
}
.fm-modal__body .settings-table {
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  overflow: hidden;
}
.fm-modal__body .settings-table td {
  vertical-align: middle;
  padding: 0.625rem 0.875rem;
}

/* ---- Row enter/leave + just-updated highlight ---- */
.fm-row {
  transition: background-color 0.16s ease, opacity 0.18s ease, transform 0.18s ease;
}
.fm-row.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
}
@keyframes fm-row-flash {
  0%   { background-color: rgba(255, 90, 110, 0.10); }
  100% { background-color: transparent; }
}
.fm-row.is-just-updated { animation: fm-row-flash 0.9s ease-out; }

/* Slight reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  .fm-toast, .fm-overlay, .fm-row,
  .fm-btn-spinner, .fm-overlay__spinner { transition: none; animation: none; }
}

/* ---------------------------------------------------------------------------
 * 24. Pagination (jQuery.paging output)
 *     The paging plugin emits raw <a> for clickable pages and <span> for the
 *     current page, no classes. dashboard.css styles these but only loads on
 *     /admin/. User-side /files/ uses the v2 stylesheets, so we restyle here.
 * --------------------------------------------------------------------------- */
body.v2 .paging {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem;
  padding: 1.25rem 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1;
  color: hsl(var(--muted-foreground));
}
body.v2 .paging:empty { display: none; }
body.v2 .paging a,
body.v2 .paging span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  background: #fff;
  color: hsl(var(--foreground));
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease, transform 0.12s ease;
}
body.v2 .paging a:hover {
  background: hsl(var(--subtle));
  border-color: hsl(220 13% 80%);
  color: hsl(var(--foreground));
}
body.v2 .paging a:active { transform: translateY(1px); }
body.v2 .paging span {
  /* current page */
  background: #ff5a6e;
  color: #fff;
  border-color: #ff5a6e;
  box-shadow: 0 4px 10px -3px rgba(255, 90, 110, 0.45);
  cursor: default;
}
body.v2 .paging .prev,
body.v2 .paging .next {
  padding: 0 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
body.v2 .paging .prev:hover,
body.v2 .paging .next:hover { color: hsl(var(--foreground)); }
/* "Fill" ellipsis from the paging format ('..') — render as a plain dot row,
   not an interactive button. */
body.v2 .paging a:not([href]):not(.prev):not(.next),
body.v2 .paging a:empty {
  border-color: transparent;
  background: transparent;
  cursor: default;
  pointer-events: none;
  color: hsl(var(--muted-foreground));
  min-width: 1.25rem;
  padding: 0 0.25rem;
}
body.v2 .paging small {
  margin-left: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
}

@media (max-width: 560px) {
  body.v2 .paging { gap: 0.25rem; padding-top: 1rem; }
  body.v2 .paging a,
  body.v2 .paging span { min-width: 1.75rem; height: 1.75rem; font-size: 0.75rem; }
  body.v2 .paging .prev,
  body.v2 .paging .next { padding: 0 0.5rem; }
}

/* ---------------------------------------------------------------------------
 * 25. Bottom bar — pagination (left) + Actions dropdown (right)
 * --------------------------------------------------------------------------- */
body.v2 .fm-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0 0.25rem;
}
body.v2 .fm-bottom-bar__paging {
  /* Override the centered default from the generic .paging rule above so
     the pagination sits flush on the left of the bottom bar. */
  flex: 1 1 auto;
  justify-content: flex-start;
  padding: 0;
}
body.v2 .fm-bottom-bar__controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

body.v2 .fm-bulk {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Selection counter chip — quiet when nothing selected, brand-tinted when
   the user has items selected. */
body.v2 .fm-selcount {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--subtle));
  border: 1px solid hsl(var(--border));
  border-radius: 999px;
  transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  white-space: nowrap;
}
body.v2 .fm-selcount.is-active {
  background: rgba(255, 90, 110, 0.10);
  border-color: rgba(255, 90, 110, 0.35);
  color: #b91c1c;
  font-weight: 600;
}

/* The single Actions button */
body.v2 .fm-actions-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.875rem;
  height: 2.25rem;
}
body.v2 .fm-actions-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
  border-color: hsl(var(--border));
  box-shadow: none;
}
body.v2 .fm-actions-btn:not(:disabled) {
  background: #ff5a6e;
  border-color: #ff5a6e;
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(255, 90, 110, 0.5);
}
body.v2 .fm-actions-btn:not(:disabled):hover {
  background: #ef4357;
  border-color: #ef4357;
}
body.v2 .fm-actions-btn svg {
  transition: transform 0.12s ease;
  flex-shrink: 0;
}
body.v2 .fm-actions-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* The dropdown panel itself reuses the row-menu styling from earlier (same
   font/padding/colors); we just give it a slightly wider min-width and add
   small section headings so visibility/organize/delete groups read cleanly. */
body.v2 .fm-actions-menu {
  --bs-dropdown-min-width: 16rem;
  border-radius: 0.625rem;
  border-color: hsl(var(--border));
  box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.25),
              0 6px 12px rgba(15, 23, 42, 0.06);
  padding: 0.375rem;
}
body.v2 .fm-actions-menu .dropdown-divider {
  margin: 0.375rem 0.25rem;
  border-color: hsl(var(--border));
  opacity: 0.7;
}
body.v2 .fm-actions-menu__heading {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
  padding: 0.4rem 0.625rem 0.25rem;
}
body.v2 .fm-actions-menu .fm-menu-item {
  font-size: 0.8125rem;
}
body.v2 .fm-actions-menu .fm-menu-item--danger { color: #b91c1c; }

/* ---------------------------------------------------------------------------
 * 26. Folder picker modal (Move / Copy destination)
 * --------------------------------------------------------------------------- */
body.v2 .fm-folder-picker .modal-content {
  border-radius: 0.875rem;
  box-shadow: 0 30px 60px -15px rgba(15, 23, 42, 0.35);
}
body.v2 .fm-folder-picker__hint {
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}
body.v2 .fm-folder-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 18rem;
  overflow-y: auto;
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
}
body.v2 .fm-folder-list li + li {
  border-top: 1px solid hsl(220 14% 94%);
}
body.v2 .fm-folder-list__item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  cursor: pointer;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  margin: 0;
  transition: background-color 0.1s ease;
}
body.v2 .fm-folder-list__item:hover { background: hsl(var(--subtle)); }
body.v2 .fm-folder-list__item input[type="radio"] { accent-color: #ff5a6e; flex-shrink: 0; }
body.v2 .fm-folder-list__item input[type="radio"]:checked + .fm-folder-list__icon { color: #ff5a6e; }
body.v2 .fm-folder-list__icon {
  display: inline-flex;
  width: 1.25rem;
  height: 1.25rem;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
body.v2 .fm-folder-list__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.v2 .fm-folder-list__item:has(input:checked) {
  background: rgba(255, 90, 110, 0.06);
}

/* Phones — pagination above, sticky action bar below.
   The action bar pins to the bottom of the viewport so the Actions menu
   stays one tap away even when the user is deep in a long file list.
   When NOTHING is selected we hide the controls row entirely (no point
   showing a disabled "No items selected" pill that just steals vertical
   space). It re-appears the moment .fm-selcount.is-active is set. */
@media (max-width: 560px) {
  body.v2 .fm-bottom-bar { gap: 0.5rem; padding-bottom: 0; }
  body.v2 .fm-bottom-bar__paging { justify-content: center; width: 100%; padding: 0.5rem 0 0.75rem; }

  /* Hide controls row when no selection — re-show when there is one. */
  body.v2 .fm-bottom-bar__controls { display: none; }
  body.v2 .fm-bottom-bar:has(.fm-selcount.is-active) .fm-bottom-bar__controls,
  body.v2 .fm-bottom-bar:has(.fm-selcount[data-count]:not([data-count="0"])) .fm-bottom-bar__controls {
    display: flex;
    /* FIXED to the viewport — stays pinned to the bottom of the screen no
     * matter where the user is scrolled. Centered horizontally via
     * left:50% + translateX(-50%) so width:max-content still works. */
    position: fixed;
    bottom: 0.875rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;                        /* above sidebar / chrome */
    width: max-content; max-width: calc(100vw - 1.5rem);
    margin: 0;
    padding: 0.375rem;
    background: hsl(222 47% 11% / .92);
    color: #fff;
    border-radius: 999px;
    border: 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 14px 30px rgba(15,18,24,.20);
    justify-content: center;
  }
  /* Inner group: count chip + Actions button as siblings, both the same
     visual weight, with a subtle gap. */
  body.v2 .fm-bulk { width: auto; gap: 0.375rem; align-items: center; }

  /* Both pills use the same height + padding + radius so they read as a
     matched pair inside the floating toast. */
  body.v2 .fm-bottom-bar__controls .fm-selcount,
  body.v2 .fm-bottom-bar__controls .fm-actions-btn {
    height: 2rem;
    padding: 0 0.875rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: none;
    line-height: 1;
    display: inline-flex; align-items: center; gap: 0.375rem;
    white-space: nowrap;
  }
  /* Count chip — translucent inside the dark toast. */
  body.v2 .fm-bottom-bar__controls .fm-selcount {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.18);
  }
  /* Actions button keeps brand red but loses its glow and over-width. */
  body.v2 .fm-bottom-bar__controls .fm-actions-btn {
    background: var(--mu-brand, hsl(var(--primary)));
    border: 0;
  }
  body.v2 .fm-bottom-bar__controls .fm-actions-btn svg { width: 12px; height: 12px; }
}

/* ---------------------------------------------------------------------------
 * 27. File-name rename widget (editable base + locked extension)
 *     Used inside the file-edit modal. The hidden input the form actually
 *     submits is kept in sync by a small script in file_form.html.
 * --------------------------------------------------------------------------- */
body.v2 .fm-name-edit {
  display: inline-flex;
  align-items: stretch;
  width: 100%;
  max-width: 28rem;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body.v2 .fm-name-edit:focus-within {
  border-color: #ff5a6e;
  box-shadow: 0 0 0 3px rgba(255, 90, 110, 0.12);
}
body.v2 .fm-name-edit__base {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0.4375rem 0.625rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  border-radius: 0;
}
body.v2 .fm-name-edit__base:focus { outline: none !important; }
body.v2 .fm-name-edit__ext {
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem;
  background: hsl(var(--subtle));
  color: hsl(var(--muted-foreground));
  border-left: 1px solid hsl(var(--border));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  font-weight: 600;
  user-select: none;
  cursor: not-allowed;
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * 15z. Account preference rows on mobile — stack icon+title / desc / control
 *      so the description doesn't get squeezed into 2-word columns.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body.v2 .security-row {
    display: grid;
    grid-template-columns: 38px 1fr;
    grid-template-areas:
      "icon  body"
      "ctrl  ctrl";
    gap: 0.5rem 0.75rem;
    align-items: start;
    padding: 0.875rem 1rem;
  }
  body.v2 .security-row__icon { grid-area: icon; }
  body.v2 .security-row__body { grid-area: body; }
  body.v2 .security-row__ctrl {
    grid-area: ctrl;
    width: 100%;
    margin-top: 0.125rem;
  }
  body.v2 .security-row__ctrl .form-select,
  body.v2 .security-row__ctrl .form-control,
  body.v2 .security-row__ctrl .input-group {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
  body.v2 .security-row__title { font-size: 0.9375rem; line-height: 1.25; }
  body.v2 .security-row__desc  { font-size: 0.8125rem; }
}

/* ---------------------------------------------------------------------------
 * 15z2. Payment-information fields — compact pill-cards with leading brand
 *       dot, label+value tightly stacked, width-capped so one field doesn't
 *       sprawl across the whole card. Auto-wraps into a multi-column grid
 *       when several fields are present.
 * --------------------------------------------------------------------------- */
body.v2 .pi-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: 0.625rem;
  max-width: 44rem;          /* never sprawl past 2 columns of pills */
}
body.v2 .pi-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  min-height: 3.25rem;
}
body.v2 .pi-field::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--primary));
  box-shadow: 0 0 0 4px hsl(var(--primary) / 0.12);
  transition: background .15s ease, box-shadow .15s ease;
}
/* Saved / filled — dot turns green when the input holds a value */
body.v2 .pi-field:has(.pi-field__input:not(:placeholder-shown))::before {
  background: hsl(142 71% 45%);
  box-shadow: 0 0 0 4px hsl(142 71% 45% / 0.14);
}
body.v2 .pi-field:focus-within {
  border-color: hsl(var(--primary) / 0.55);
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.10);
  background: hsl(var(--card));
}
body.v2 .pi-field__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body.v2 .pi-field__label,
body.v2 .pi-field__input {
  display: block;
  width: 100%;
  text-align: start;            /* respect document direction; no plaintext hack */
}
body.v2 .pi-field__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  margin: 0 0 1px;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
body.v2 .pi-field__input {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  height: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  box-shadow: none !important;
  line-height: 1.3;
}
body.v2 .pi-field__input:focus {
  outline: none;
  box-shadow: none !important;
}
body.v2 .pi-field__input::placeholder {
  color: hsl(var(--muted-foreground) / 0.55);
  font-weight: 400;
}
body.v2 .pi-field__input:disabled {
  color: hsl(var(--muted-foreground));
  -webkit-text-fill-color: hsl(var(--muted-foreground));
}
body.v2 .pi-field:has(.pi-field__input:disabled) {
  background: hsl(var(--subtle));
  border-style: dashed;
}
body.v2 .pi-field:has(.pi-field__input:disabled)::before {
  background: hsl(var(--muted-foreground) / 0.45);
  box-shadow: none;
}

/* =========================================================================
   RTL modal fixes (2026-06-10)
   ========================================================================= */
/* Bootstrap's LTR btn-close uses margin-left:auto; in RTL that pulls the X
   against the title instead of parking it at the far edge. Mirror it. */
body.v2[dir="rtl"] .modal-header .btn-close {
  margin: calc(-.5 * var(--bs-modal-header-padding-y)) auto calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x));
}
/* Filenames are inherently LTR artifacts: keep the rename row (editable base
   + locked extension chip) in LTR order on RTL pages so ".ai" doesn't
   bidi-flip into "ai." and the chip stays glued after the name. */
body.v2[dir="rtl"] .fm-name-edit { direction: ltr; }
body.v2 .fm-name-edit__ext { direction: ltr; unicode-bidi: isolate; }