/* ==========================================================================
   ToolSurf 2026 design layer — tools.toolsurf.com (aMember kei theme)
   Loaded LAST on every vertical-nav app page ($isAppPage in layout.phtml),
   after modern-premium.css, cart-premium.css, account-premium.css, app-dark.css
   and ts-tour.css. It unifies the app with www.toolsurf.com and
   api-use.toolsurf.com (same tokens, type, radii, buttons) and replaces the
   cool-blue dark palette with the warm one used on the other two properties.

   Rules of the road (see the toolsurf-claude-theme skill):
   - Never touch plan names, prices, checkout URLs or product data.
   - Everything below is additive; deleting this file + its <link> restores
     the previous look exactly.
   - `html.ts-account-dark` is the dark-mode hook; `body.toolsurf-vertical-nav`
     is every app page; `body.ts-account-body` is /member, /profile, /self-service.
   ========================================================================== */

body.toolsurf-vertical-nav {
  --ts-bg: #faf9f5; --ts-bg-alt: #f3f1eb; --ts-surface: #ffffff; --ts-surface-2: #fbfaf7;
  --ts-ink: #171412; --ts-ink-2: #4a423d; --ts-muted: #6f665f;
  --ts-border: #e6e1d8; --ts-border-strong: #d9d2c6;
  --ts-accent: #c6613f; --ts-accent-hover: #ad532f; --ts-accent-deep: #9f4f36; --ts-accent-soft: #fbeee6; --ts-accent-soft-2: #f6e0d2; --ts-accent-ink: #9f4f36;
  --ts-success: #2e7d4f; --ts-success-soft: #e8f4ec; --ts-warn: #a15c00; --ts-warn-soft: #fff4e0; --ts-danger: #b42318; --ts-danger-soft: #fdecea;
  --ts-logo-plate: #ffffff;
  --ts-shadow: 0 1px 2px rgba(23,20,18,.04), 0 6px 20px rgba(23,20,18,.05);
  --ts-shadow-lift: 0 14px 34px rgba(23,20,18,.10);
  --ts-sans: "Anthropic Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ts-r-sm: 6px; --ts-r-md: 10px; --ts-r-lg: 14px; --ts-r-xl: 20px;
}
html.ts-account-dark body.toolsurf-vertical-nav {
  --ts-bg: #141110; --ts-bg-alt: #1a1614; --ts-surface: #201b18; --ts-surface-2: #27211d;
  --ts-ink: #f4efe9; --ts-ink-2: #d8d0c8; --ts-muted: #a89e95;
  --ts-border: #39312c; --ts-border-strong: #4a403a;
  --ts-accent: #d9754f; --ts-accent-hover: #e48a67; --ts-accent-deep: #c6613f; --ts-accent-soft: rgba(217,117,79,.14); --ts-accent-soft-2: rgba(217,117,79,.26); --ts-accent-ink: #f0a184;
  --ts-success: #6fcf97; --ts-success-soft: rgba(111,207,151,.14); --ts-warn: #f2b45c; --ts-warn-soft: rgba(242,180,92,.14); --ts-danger: #f08a7c; --ts-danger-soft: rgba(240,138,124,.14);
  --ts-logo-plate: #eef1f2;
  --ts-shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.28);
  --ts-shadow-lift: 0 16px 40px rgba(0,0,0,.45);
}

/* --------------------------------------------------------------------------
   Canvas
   -------------------------------------------------------------------------- */
html.ts-account-dark { background-color: #141110 !important; }
html body.toolsurf-vertical-nav { background: var(--ts-bg) !important; background-color: var(--ts-bg) !important; color: var(--ts-ink) !important; font-family: var(--ts-sans) !important; font-size: 14.5px; overflow-x: hidden; padding-top: 0 !important; }
html body.toolsurf-vertical-nav.ts-account-body .pcoded-main-container,
html body.toolsurf-vertical-nav.ts-account-body .am-body-content,
html body.toolsurf-vertical-nav.ts-account-body .ts-account-shell,
html body.toolsurf-vertical-nav.ts-account-body .ts-account-content,
html body.toolsurf-vertical-nav.ts-account-body .am-coll-content,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .pcoded-main-container,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .am-body-content,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .ts-account-shell,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .ts-account-content,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .am-coll-content,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .pcoded-content,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .content-main.container,
html body.toolsurf-vertical-nav .content-main.container,
html body.toolsurf-vertical-nav .pcoded-main-container,
html body.toolsurf-vertical-nav .pcoded-content,
html body.toolsurf-vertical-nav .page-wrapper,
html body.toolsurf-vertical-nav .am-body-content,
html body.toolsurf-vertical-nav .am-content-page,
html body.ts-account-body .am-body-content,
html body.ts-account-body .pcoded-main-container,
html.ts-account-dark body.toolsurf-vertical-nav .content-main.container,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-main-container,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content,
html.ts-account-dark body.toolsurf-vertical-nav .am-body-content,
html.ts-account-dark body.ts-account-body .am-body-content,
html.ts-account-dark body.ts-account-body .pcoded-main-container { background: transparent !important; background-color: transparent !important; color: var(--ts-ink) !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html body.toolsurf-vertical-nav.ts-account-body .pcoded-main-container,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .pcoded-main-container { border: 0 !important; box-shadow: none !important; padding-top: 0 !important; }
html.ts-account-dark body.toolsurf-vertical-nav,
html.ts-account-dark body.toolsurf-vertical-nav .content-main { background: var(--ts-bg) !important; background-color: var(--ts-bg) !important; }
/* Bootstrap .row negative margins pushed every page 5px past the viewport on phones. */
body.toolsurf-vertical-nav .pcoded-content > .row,
body.toolsurf-vertical-nav .pcoded-content .row { margin-left: 0 !important; margin-right: 0 !important; }
body.toolsurf-vertical-nav .pcoded-content > .row > .col-sm-12,
body.toolsurf-vertical-nav .pcoded-content .row > .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; }
body.toolsurf-vertical-nav iframe { max-width: 100% !important; }
body.toolsurf-vertical-nav ::selection { background: var(--ts-accent-soft-2); }
body.toolsurf-vertical-nav :focus-visible { outline: 3px solid rgba(198,97,63,.35); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Sidebar
   -------------------------------------------------------------------------- */
html body.toolsurf-vertical-nav nav.pcoded-navbar,
html body.toolsurf-vertical-nav .pcoded-navbar,
html.ts-account-dark body.toolsurf-vertical-nav nav.pcoded-navbar,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-navbar { background: var(--ts-surface) !important; background-color: var(--ts-surface) !important; border-right: 1px solid var(--ts-border) !important; box-shadow: none !important; padding: 14px 12px !important; }
html body.toolsurf-vertical-nav .pcoded-navbar .navbar-wrapper,
html body.toolsurf-vertical-nav .pcoded-navbar .navbar-content,
html.ts-account-dark body.toolsurf-vertical-nav .navbar-wrapper,
html.ts-account-dark body.toolsurf-vertical-nav .navbar-content { background: transparent !important; background-color: transparent !important; box-shadow: none !important; padding: 0 !important; }
html.ts-account-dark body.toolsurf-vertical-nav nav.pcoded-navbar { box-shadow: none !important; }
/* Brand block: the logo was hidden on every app page (logged-out visitors on /page/packages saw a bare menu). */
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption { display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 4px 6px 14px !important; border-bottom: 1px solid var(--ts-border) !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption a.b-brand { display: flex !important; align-items: center !important; padding: 0 !important; background: transparent !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption img { height: 34px !important; width: auto !important; max-width: 100% !important; display: block !important; margin: 0 !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption img.ts-brand-dark { display: none !important; }
html.ts-account-dark body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption img.ts-brand-light { display: none !important; }
html.ts-account-dark body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption img.ts-brand-dark { display: block !important; }
body.toolsurf-vertical-nav.toolsurf-nav-collapsed ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption { padding: 2px 0 10px !important; }
body.toolsurf-vertical-nav.toolsurf-nav-collapsed ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption img { height: 22px !important; margin: 0 auto !important; object-fit: cover; object-position: left; width: 34px !important; }

html body.toolsurf-vertical-nav ul.pcoded-inner-navbar { gap: 2px !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item > .nav-link,
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item > button.nav-link { min-height: 42px !important; padding: 8px 10px !important; border-radius: var(--ts-r-md) !important; gap: 10px !important; background: transparent !important; box-shadow: none !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar .nav-link span.pcoded-mtext,
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar .nav-link .pcoded-mtext { font-family: var(--ts-sans) !important; font-size: 14px !important; font-weight: 600 !important; color: var(--ts-ink-2) !important; letter-spacing: 0 !important; text-transform: none !important; }
html body.toolsurf-vertical-nav .nav-link .pcoded-micon { width: 30px !important; height: 30px !important; min-width: 30px !important; border-radius: 8px !important; background: var(--ts-accent-soft) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; transform: none !important; }
html body.toolsurf-vertical-nav .nav-link .pcoded-micon svg.ts-nav-icon { width: 16px !important; height: 16px !important; }
html body.toolsurf-vertical-nav .nav-link:hover { background: var(--ts-bg-alt) !important; }
html body.toolsurf-vertical-nav .nav-link:hover .pcoded-mtext { color: var(--ts-ink) !important; }
html body.toolsurf-vertical-nav li.nav-item.active > a.nav-link,
html body.toolsurf-vertical-nav li.nav-item.active > .nav-link { background: var(--ts-accent-soft) !important; }
html body.toolsurf-vertical-nav li.nav-item.active > .nav-link .pcoded-mtext { color: var(--ts-accent-ink) !important; font-weight: 700 !important; }
html body.toolsurf-vertical-nav li.nav-item.active > .nav-link::before { display: none !important; }
html body.toolsurf-vertical-nav li.nav-item.active .pcoded-micon { background: var(--ts-accent) !important; }
html body.toolsurf-vertical-nav li.nav-item.active .pcoded-micon svg.ts-nav-icon *,
html body.toolsurf-vertical-nav li.nav-item.active .pcoded-micon svg.ts-nav-icon { stroke: #fff !important; }
/* external destinations get a small arrow */
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar .nav-link[target="_blank"] .pcoded-mtext::after { content: "\2197"; font-size: 11px; margin-left: 6px; color: var(--ts-muted); font-weight: 600; }
body.toolsurf-vertical-nav.toolsurf-nav-collapsed ul.pcoded-inner-navbar .nav-link[target="_blank"] .pcoded-mtext::after { display: none; }
/* Log out sits apart from the destinations */
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.ts-nav-logout { margin-top: 10px !important; padding-top: 10px !important; border-top: 1px solid var(--ts-border) !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.ts-nav-logout .pcoded-mtext { color: var(--ts-muted) !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.ts-nav-logout .pcoded-micon { background: var(--ts-bg-alt) !important; }
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.ts-nav-logout .pcoded-micon svg.ts-nav-icon,
html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.ts-nav-logout .pcoded-micon svg.ts-nav-icon * { stroke: var(--ts-muted) !important; }
html body.toolsurf-vertical-nav .ts-nav-theme-item .ts-nav-theme-toggle { width: 100% !important; }
html body.toolsurf-vertical-nav .nav-caret { color: var(--ts-muted) !important; }
html body.toolsurf-vertical-nav .nav-dropdown-menu { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-md) !important; box-shadow: var(--ts-shadow-lift) !important; }
html body.toolsurf-vertical-nav .nav-dropdown-menu .nav-link .pcoded-mtext { color: var(--ts-ink-2) !important; }
html body.toolsurf-vertical-nav .mobile-menu-toggle { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; color: var(--ts-accent) !important; box-shadow: var(--ts-shadow) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .mobile-menu-toggle { color: var(--ts-accent-ink) !important; }
html body.toolsurf-vertical-nav .mobile-menu-toggle .hamburger,
html body.toolsurf-vertical-nav .mobile-menu-toggle .hamburger::before,
html body.toolsurf-vertical-nav .mobile-menu-toggle .hamburger::after { background: currentColor !important; }

/* --------------------------------------------------------------------------
   Buttons, chips, forms (shared)
   -------------------------------------------------------------------------- */
body.toolsurf-vertical-nav .ts-button,
body.toolsurf-vertical-nav .ts-account-shell .ts-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px; min-height: 42px !important; padding: 0 18px !important; border-radius: var(--ts-r-md) !important; font-family: var(--ts-sans) !important; font-weight: 650 !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; border: 1px solid transparent !important; cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none !important; width: auto !important; }
body.toolsurf-vertical-nav .ts-button-primary,
body.toolsurf-vertical-nav .ts-account-shell .ts-button-primary { background: var(--ts-accent) !important; color: #fff !important; border-color: var(--ts-accent) !important; box-shadow: none !important; }
body.toolsurf-vertical-nav .ts-button-primary:hover,
body.toolsurf-vertical-nav .ts-account-shell .ts-button-primary:hover { background: var(--ts-accent-hover) !important; border-color: var(--ts-accent-hover) !important; color: #fff !important; }
body.toolsurf-vertical-nav .ts-button-secondary,
body.toolsurf-vertical-nav .ts-account-shell .ts-button-secondary,
body.toolsurf-vertical-nav .ts-account-shell .ts-theme-toggle,
body.toolsurf-vertical-nav .ts-account-shell .ts-tour-replay { background: var(--ts-surface) !important; color: var(--ts-ink) !important; border-color: var(--ts-border-strong) !important; box-shadow: none !important; }
body.toolsurf-vertical-nav .ts-button-secondary:hover,
body.toolsurf-vertical-nav .ts-account-shell .ts-button-secondary:hover,
body.toolsurf-vertical-nav .ts-account-shell .ts-theme-toggle:hover,
body.toolsurf-vertical-nav .ts-account-shell .ts-tour-replay:hover { border-color: var(--ts-accent) !important; color: var(--ts-accent-ink) !important; background: var(--ts-surface) !important; }
body.toolsurf-vertical-nav .ts-account-shell .ts-theme-toggle-dot { background: var(--ts-accent) !important; }
body.toolsurf-vertical-nav .ts-status-pill { border-radius: 999px !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: .03em !important; padding: 4px 9px !important; text-transform: none !important; }
body.toolsurf-vertical-nav .ts-status-pill.ts-status-active,
body.toolsurf-vertical-nav .ts-status-pill.ts-status-paid { background: var(--ts-success-soft) !important; color: var(--ts-success) !important; border: 0 !important; }

/* Password reveal buttons (account-premium.js adds them on every app page, but its CSS
   only loaded on account pages — on /aff/signup modern-premium turned them into
   full-width orange bars). */
body.toolsurf-vertical-nav .ts-pw-wrap { position: relative !important; display: block !important; }
body.toolsurf-vertical-nav .ts-pw-wrap > input { padding-right: 46px !important; }
body.toolsurf-vertical-nav .ts-pw-wrap button.ts-pw-reveal,
body.toolsurf-vertical-nav .am-body-content .ts-pw-wrap button.ts-pw-reveal,
body.toolsurf-vertical-nav .am-body-content .ts-pw-wrap button[type="button"].ts-pw-reveal { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; width: 34px !important; height: 34px !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; margin: 0 !important; background: transparent !important; color: var(--ts-muted) !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; text-transform: none !important; letter-spacing: 0 !important; }
body.toolsurf-vertical-nav .ts-pw-wrap button.ts-pw-reveal:hover { background: var(--ts-accent-soft) !important; color: var(--ts-accent-ink) !important; transform: translateY(-50%) !important; }

/* Generic aMember forms (/profile, /self-service, /aff/signup, /aff/member/*) */
body.toolsurf-vertical-nav .pcoded-content .am-form,
body.toolsurf-vertical-nav .pcoded-content form.am-form { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--ts-r-lg); padding: 22px 24px; box-shadow: var(--ts-shadow); max-width: 820px; }
body.toolsurf-vertical-nav .pcoded-content .am-form .am-row { display: block; padding: 0; margin: 0 0 16px; border: 0; }
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element-title,
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element { float: none !important; width: 100% !important; margin-left: 0 !important; text-align: left !important; padding: 0 !important; }
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element-title label { font-weight: 600; font-size: 13.5px; color: var(--ts-ink-2); }
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element-title .am-required { color: var(--ts-accent); }
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element-title .comment,
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element .comment,
body.toolsurf-vertical-nav .pcoded-content .am-form .am-description { font-size: 12.5px; color: var(--ts-muted); margin-top: 4px; text-align: left; }
body.toolsurf-vertical-nav .pcoded-content .am-form input[type="text"],
body.toolsurf-vertical-nav .pcoded-content .am-form input[type="email"],
body.toolsurf-vertical-nav .pcoded-content .am-form input[type="password"],
body.toolsurf-vertical-nav .pcoded-content .am-form input[type="number"],
body.toolsurf-vertical-nav .pcoded-content .am-form select,
body.toolsurf-vertical-nav .pcoded-content .am-form textarea { width: 100% !important; max-width: 520px; min-height: 42px; padding: 9px 12px !important; border: 1px solid var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; background: var(--ts-surface) !important; color: var(--ts-ink) !important; font-family: var(--ts-sans) !important; font-size: 14.5px !important; box-shadow: none !important; }
body.toolsurf-vertical-nav .pcoded-content .am-form input:focus,
body.toolsurf-vertical-nav .pcoded-content .am-form select:focus,
body.toolsurf-vertical-nav .pcoded-content .am-form textarea:focus { outline: none !important; border-color: var(--ts-accent) !important; box-shadow: 0 0 0 3px rgba(198,97,63,.18) !important; }
body.toolsurf-vertical-nav .pcoded-content .am-form input[type="submit"],
body.toolsurf-vertical-nav .pcoded-content .am-form button[type="submit"],
body.toolsurf-vertical-nav .pcoded-content .am-form input.am-cta-profile,
body.toolsurf-vertical-nav .pcoded-content .am-form input.am-cta-ss { width: auto !important; max-width: none; min-height: 42px; padding: 0 22px !important; border-radius: var(--ts-r-md) !important; background: var(--ts-accent) !important; background-image: none !important; color: #fff !important; border: 1px solid var(--ts-accent) !important; font-family: var(--ts-sans) !important; font-weight: 650 !important; font-size: 14px !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; cursor: pointer; margin-top: 6px; }
body.toolsurf-vertical-nav .pcoded-content .am-form input[type="submit"]:hover,
body.toolsurf-vertical-nav .pcoded-content .am-form input.am-cta-ss:hover { background: var(--ts-accent-hover) !important; transform: none !important; }
body.toolsurf-vertical-nav .pcoded-content .am-form fieldset { border: 0; padding: 0; margin: 0 0 8px; }
body.toolsurf-vertical-nav .pcoded-content .am-form legend { font-weight: 650; font-size: 15px; color: var(--ts-ink); padding: 0; margin: 4px 0 12px; }
body.toolsurf-vertical-nav .pcoded-content .am-form .am-element-title label + div,
body.toolsurf-vertical-nav .pcoded-content .am-form .am-change-pass-toggle { color: var(--ts-accent-ink); }
body.toolsurf-vertical-nav .pcoded-content .am-info,
body.toolsurf-vertical-nav .pcoded-content .am-flash,
body.toolsurf-vertical-nav .pcoded-content .am-error { border-radius: var(--ts-r-md) !important; font-size: 14px; }
body.toolsurf-vertical-nav .pcoded-content .am-flash,
body.toolsurf-vertical-nav .pcoded-content .am-info:not(:has(a[href*="payout"])) { background: var(--ts-accent-soft) !important; border: 1px solid var(--ts-accent-soft-2) !important; color: var(--ts-ink-2) !important; }
body.toolsurf-vertical-nav .pcoded-content .am-error { background: var(--ts-danger-soft) !important; border: 1px solid transparent !important; color: var(--ts-danger) !important; }
body.toolsurf-vertical-nav .pcoded-content table.am-grid,
body.toolsurf-vertical-nav .pcoded-content .am-common-table { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg); overflow: hidden; color: var(--ts-ink) !important; }
body.toolsurf-vertical-nav .pcoded-content table.am-grid th { background: var(--ts-bg-alt) !important; color: var(--ts-muted) !important; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
body.toolsurf-vertical-nav .pcoded-content table.am-grid td { border-color: var(--ts-border) !important; }
body.toolsurf-vertical-nav .pcoded-content .am-pagination a { color: var(--ts-accent-ink); }

/* --------------------------------------------------------------------------
   Member area (/member, /member/payment-history, /profile, /self-service)
   -------------------------------------------------------------------------- */
body.ts-account-body .ts-account-shell { max-width: 1180px; margin: 0 auto; }
body.ts-account-body .ts-account-shell .ts-account-hero,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-account-hero { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-xl) !important; box-shadow: var(--ts-shadow) !important; padding: 24px 26px !important; gap: 18px !important; }
body.ts-account-body .ts-account-shell .ts-account-eyebrow { font-family: var(--ts-sans) !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: .08em !important; text-transform: uppercase !important; color: var(--ts-accent-ink) !important; }
body.ts-account-body .ts-account-shell .ts-account-hero h1,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-account-hero h1 { font-family: var(--ts-sans) !important; font-size: 26px !important; font-weight: 650 !important; letter-spacing: 0 !important; color: var(--ts-ink) !important; margin: 4px 0 6px !important; }
body.ts-account-body .ts-account-shell .ts-account-hero p,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-account-hero p { color: var(--ts-muted) !important; font-size: 14.5px !important; margin: 0 !important; }
body.ts-account-body .ts-account-shell .ts-account-hero-actions { gap: 8px !important; }
body.ts-account-body .ts-account-shell .ts-account-overview { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; margin: 14px 0 !important; }
body.ts-account-body .ts-account-shell .ts-overview-card,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-overview-card { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; box-shadow: none !important; padding: 16px 18px !important; transition: border-color .15s, transform .15s; }
body.ts-account-body .ts-account-shell .ts-overview-card:hover { border-color: var(--ts-accent) !important; transform: translateY(-1px); }
body.ts-account-body .ts-account-shell .ts-overview-label,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-overview-label { font-family: var(--ts-sans) !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: .06em !important; text-transform: uppercase !important; color: var(--ts-muted) !important; }
body.ts-account-body .ts-account-shell .ts-overview-card strong,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-overview-card strong { font-size: 26px !important; font-weight: 700 !important; color: var(--ts-ink) !important; margin: 6px 0 2px !important; display: block; }
body.ts-account-body .ts-account-shell .ts-overview-card span:last-child,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-overview-card span:last-child { color: var(--ts-muted) !important; font-size: 12.5px !important; }
body.ts-account-body .ts-account-shell .ts-section-heading h2,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-section-heading h2 { font-family: var(--ts-sans) !important; font-size: 18px !important; font-weight: 650 !important; color: var(--ts-ink) !important; letter-spacing: 0 !important; }
body.ts-account-body .ts-account-shell .ts-account-block,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .ts-account-shell .ts-account-block { margin-top: 18px; background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-xl) !important; box-shadow: var(--ts-shadow) !important; padding: 20px 22px !important; }
body.ts-account-body .ts-account-shell .ts-account-block .am-block,
body.ts-account-body .ts-account-shell .ts-account-block [id^="member-main-"],
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .ts-account-shell .ts-account-block .am-block,
html.ts-account-dark body.toolsurf-vertical-nav.ts-account-body.ts-account-dark .ts-account-shell .ts-account-block [id^="member-main-"] { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
body.ts-account-body .ts-account-shell .ts-account-block .ts-section-heading { margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; }

/* Get-started panel for accounts with no products yet (member/main.phtml) */
body.ts-account-body .ts-account-shell .ts-getstarted { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--ts-r-xl); box-shadow: var(--ts-shadow); padding: 22px 26px; margin: 4px 0 18px; }
body.ts-account-body .ts-account-shell .ts-getstarted h2 { font-size: 18px; font-weight: 650; margin: 0 0 4px; color: var(--ts-ink); }
body.ts-account-body .ts-account-shell .ts-getstarted > p { color: var(--ts-muted); font-size: 14px; margin: 0 0 16px; }
body.ts-account-body .ts-account-shell .ts-getstarted-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
body.ts-account-body .ts-account-shell .ts-getstarted-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--ts-border); border-radius: var(--ts-r-lg); background: var(--ts-surface-2); color: var(--ts-ink); text-decoration: none; transition: border-color .15s, transform .15s; }
body.ts-account-body .ts-account-shell .ts-getstarted-card:hover { border-color: var(--ts-accent); transform: translateY(-1px); color: var(--ts-ink); }
body.ts-account-body .ts-account-shell .ts-getstarted-card .ts-gs-step { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--ts-accent); color: #fff; font-size: 12.5px; font-weight: 700; }
body.ts-account-body .ts-account-shell .ts-getstarted-card strong { font-size: 15px; font-weight: 650; }
body.ts-account-body .ts-account-shell .ts-getstarted-card span { font-size: 13px; color: var(--ts-muted); }
body.ts-account-body .ts-account-shell .ts-getstarted-card b { color: var(--ts-accent-ink); font-weight: 650; font-size: 13px; margin-top: auto; }

/* Tool search + resource cards */
body.ts-account-body .ts-account-shell .ts-tool-search { margin: 0 0 14px !important; }
body.ts-account-body .ts-account-shell .ts-tool-search input.ts-tool-search-input,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-tool-search input.ts-tool-search-input { min-height: 44px !important; border: 1px solid var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; background: var(--ts-surface) !important; color: var(--ts-ink) !important; font-family: var(--ts-sans) !important; font-size: 14.5px !important; box-shadow: none !important; }
body.ts-account-body .ts-account-shell .ts-tool-search input.ts-tool-search-input:focus { border-color: var(--ts-accent) !important; box-shadow: 0 0 0 3px rgba(198,97,63,.18) !important; }
body.ts-account-body .ts-account-shell .ts-tool-search .ts-tool-search-icon { color: var(--ts-muted) !important; }
body.ts-account-body .ts-account-shell .ts-resource-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important; gap: 12px !important; }
body.ts-account-body .ts-account-shell .ts-resource-card,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-resource-card { display: grid !important; grid-template-columns: 56px minmax(0, 1fr) !important; grid-template-areas: "media body" "actions actions" !important; gap: 10px 12px !important; align-items: center !important; padding: 14px !important; background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; box-shadow: none !important; position: relative; transition: border-color .15s, transform .15s, box-shadow .15s; }
body.ts-account-body .ts-account-shell .ts-resource-card:hover { border-color: var(--ts-border-strong) !important; transform: translateY(-2px); box-shadow: var(--ts-shadow-lift) !important; }
/* The tool search (account-premium.js initResourceFilter) hides non-matching cards with the `hidden`
   attribute; the grid rule above must not override it (2026-09-03 fix). */
body.ts-account-body .ts-account-shell .ts-resource-card[hidden],
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-resource-card[hidden] { display: none !important; }

body.ts-account-body .ts-account-shell .ts-resource-card.is-pinned { border-color: var(--ts-accent-soft-2) !important; background: var(--ts-surface) !important; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-product-media,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-resource-card .ts-product-media { grid-area: media; width: 56px !important; height: 56px !important; min-height: 0 !important; margin: 0 !important; padding: 6px !important; border-radius: 12px !important; border: 1px solid var(--ts-border) !important; background: var(--ts-logo-plate) !important; display: flex !important; align-items: center !important; justify-content: center !important; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-product-media img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; object-fit: contain !important; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-product-body { grid-area: body; padding: 0 !important; min-width: 0; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-product-title-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 4px !important; }
body.ts-account-body .ts-account-shell .ts-resource-card h3,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-resource-card h3 { font-family: var(--ts-sans) !important; font-size: 15px !important; font-weight: 650 !important; color: var(--ts-ink) !important; margin: 0 !important; line-height: 1.2 !important; padding-right: 28px; word-break: break-word; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-status-pill { font-size: 11px !important; padding: 3px 8px !important; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-product-actions { grid-area: actions; padding: 0 !important; margin: 0 !important; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-resource-actions a,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-resource-card .ts-resource-actions a { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px; width: 100% !important; min-height: 40px !important; padding: 0 14px !important; border-radius: var(--ts-r-md) !important; background: var(--ts-accent) !important; color: #fff !important; font-family: var(--ts-sans) !important; font-size: 13.5px !important; font-weight: 650 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; border: 1px solid var(--ts-accent) !important; box-shadow: none !important; transition: background .15s; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-resource-actions a::after { content: "\2192"; font-size: 14px; opacity: .85; }
body.ts-account-body .ts-account-shell .ts-resource-card .ts-resource-actions a:hover { background: var(--ts-accent-hover) !important; border-color: var(--ts-accent-hover) !important; }
body.ts-account-body .ts-account-shell .ts-resource-card button.ts-pin-btn,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-resource-card button.ts-pin-btn { position: absolute !important; top: 10px !important; right: 10px !important; width: 28px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; border: 1px solid var(--ts-border) !important; background: var(--ts-surface) !important; color: var(--ts-muted) !important; box-shadow: none !important; text-transform: none !important; }
body.ts-account-body .ts-account-shell .ts-resource-card button.ts-pin-btn:hover,
body.ts-account-body .ts-account-shell .ts-resource-card.is-pinned button.ts-pin-btn { background: var(--ts-accent-soft) !important; border-color: var(--ts-accent-soft-2) !important; color: var(--ts-accent-ink) !important; }
body.ts-account-body .ts-account-shell .ts-resource-card button.ts-pin-btn .fa { font-size: 12px !important; color: inherit !important; }

/* Member banners (inline-styled in layout.phtml; only !important reaches them) */
html body.toolsurf-vertical-nav .social-groups-banner { border-radius: var(--ts-r-xl) !important; padding: 20px 24px !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-deals-banner { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; box-shadow: var(--ts-shadow) !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-deals-banner h3 { color: var(--ts-ink) !important; font-size: 17px !important; font-weight: 650 !important; margin: 0 0 4px !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-deals-banner p { color: var(--ts-muted) !important; font-size: 14px !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-deals-banner .ts-deals-kicker { display: inline-block; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-accent-ink); margin-bottom: 6px; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-deals-banner a { border-radius: var(--ts-r-md) !important; padding: 10px 16px !important; font-size: 14px !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-promo-banner { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; box-shadow: var(--ts-shadow) !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-promo-banner h3 { color: var(--ts-ink) !important; font-size: 17px !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-promo-banner p { color: var(--ts-muted) !important; font-size: 14px !important; }
html body.toolsurf-vertical-nav .social-groups-banner.ts-promo-banner a[href*="page/packages"] { background: var(--ts-accent) !important; color: #fff !important; border-radius: var(--ts-r-md) !important; padding: 10px 16px !important; box-shadow: none !important; font-size: 14px !important; }
html body.toolsurf-vertical-nav #canva-trial-banner,
html body.toolsurf-vertical-nav #canva-coupon-banner { border-radius: var(--ts-r-xl) !important; box-shadow: var(--ts-shadow) !important; }
html body.toolsurf-vertical-nav #canva-trial-banner h3,
html body.toolsurf-vertical-nav #canva-coupon-banner h3 { text-shadow: none !important; font-weight: 650 !important; }
html body.toolsurf-vertical-nav #canva-trial-banner a#canva-trial-btn { border-radius: var(--ts-r-md) !important; font-weight: 650 !important; border: 0 !important; background: #171412 !important; box-shadow: none !important; }
/* Affiliate payout nag on the dashboard: demoted to a quiet inline note. */
html body.ts-account-body .am-info:has(a[href*="payout"]) { background: var(--ts-surface-2) !important; border: 1px dashed var(--ts-border-strong) !important; border-left: 1px dashed var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; color: var(--ts-muted) !important; font-size: 13px !important; padding: 10px 14px !important; margin: 10px 0 0 !important; box-shadow: none !important; }
html body.ts-account-body .am-info:has(a[href*="payout"])::before { display: none !important; }
html body.ts-account-body .am-info:has(a[href*="payout"]) a { color: var(--ts-accent-ink) !important; font-weight: 600 !important; }

/* Purchases page */
body.ts-account-body .ts-account-shell .ts-purchase-section,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-purchase-section { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-xl) !important; box-shadow: var(--ts-shadow) !important; padding: 20px 22px !important; }
body.ts-account-body .ts-account-shell .ts-invoice-card,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-invoice-card { background: var(--ts-surface-2) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; box-shadow: none !important; }
body.ts-account-body .ts-account-shell .ts-invoice-card h3 { font-family: var(--ts-sans) !important; font-size: 16px !important; color: var(--ts-ink) !important; }
body.ts-account-body .ts-account-shell .ts-invoice-date,
body.ts-account-body .ts-account-shell .ts-invoice-meta dt { color: var(--ts-muted) !important; font-size: 12px !important; text-transform: uppercase; letter-spacing: .05em; }
body.ts-account-body .ts-account-shell .ts-invoice-meta dd { color: var(--ts-ink) !important; }
body.ts-account-body .ts-account-shell .ts-invoice-products li { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-md) !important; color: var(--ts-ink) !important; }
body.ts-account-body .ts-account-shell .ts-empty-state,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-empty-state { background: var(--ts-surface-2) !important; border: 1px dashed var(--ts-border-strong) !important; border-radius: var(--ts-r-lg) !important; color: var(--ts-muted) !important; }
body.ts-account-body .ts-account-shell .ts-empty-state strong,
body.ts-account-body .ts-account-shell .ts-empty-state h3 { color: var(--ts-ink) !important; font-family: var(--ts-sans) !important; }
body.ts-account-body .ts-account-shell .ts-payment-toolbar input,
body.ts-account-body .ts-account-shell .ts-payment-toolbar select,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-payment-toolbar select { min-height: 40px; border: 1px solid var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; background: var(--ts-surface) !important; color: var(--ts-ink) !important; }
body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table,
html.ts-account-dark body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table { border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; overflow: hidden; background: var(--ts-surface) !important; }
body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table thead th,
body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table thead td,
html.ts-account-dark body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table thead td { background: var(--ts-bg-alt) !important; color: var(--ts-muted) !important; font-size: 11.5px !important; text-transform: uppercase; letter-spacing: .06em; }
body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table td,
html.ts-account-dark body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table tbody td { border-color: var(--ts-border) !important; color: var(--ts-ink) !important; background: transparent !important; }
body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table tbody tr:hover td,
html.ts-account-dark body.ts-account-body .pcoded-content .ts-account-shell table.ts-payment-table tbody tr:hover td { background: var(--ts-bg-alt) !important; }
body.ts-account-body .ts-account-shell a.ts-invoice-link,
html.ts-account-dark body.ts-account-body .ts-account-shell a.ts-invoice-link { color: var(--ts-accent-ink) !important; }
body.ts-account-body .ts-account-shell .ts-card-action-danger { color: var(--ts-danger) !important; }

/* --------------------------------------------------------------------------
   Buy page (/cart) and product pages (/cart/index/product/...)
   -------------------------------------------------------------------------- */
html.cart-overhaul-active body,
html body.cart-overhaul-active,
html body.page-cart { background: var(--ts-bg) !important; background-color: var(--ts-bg) !important; }
body.page-cart .ts-cart-container { max-width: 1180px; padding-bottom: 48px; }
body.page-cart .ts-hero { background: var(--ts-surface) !important; border: 1px solid var(--ts-border); border-radius: var(--ts-r-xl); box-shadow: var(--ts-shadow); color: var(--ts-ink); padding: 28px 26px; text-align: left; }
body.page-cart .ts-hero::before { display: none; }
body.page-cart .ts-hero h1 { color: var(--ts-ink); font-size: 26px; font-weight: 650; }
body.page-cart .ts-hero p { color: var(--ts-muted); margin: 0; font-size: 15px; }
body.page-cart .ts-trust-bar,
html.ts-account-dark body.page-cart .ts-trust-bar { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; box-shadow: none !important; padding: 12px 16px !important; gap: 12px 26px !important; margin-bottom: 18px !important; }
body.page-cart .ts-trust-item,
html.ts-account-dark body.page-cart .ts-trust-item { font-size: 13.5px !important; font-weight: 600 !important; color: var(--ts-ink-2) !important; }
body.page-cart .ts-trust-icon { color: var(--ts-accent) !important; font-size: 15px !important; }
body.page-cart .ts-control-bar { border-bottom: 0 !important; padding: 4px 0 !important; margin-bottom: 18px !important; }
body.page-cart .ts-control-bar .ts-cat-btn,
html.ts-account-dark body.page-cart .ts-control-bar .ts-cat-btn { padding: 7px 14px !important; border-radius: 999px !important; font-size: 13.5px !important; font-weight: 600 !important; background: var(--ts-surface) !important; border: 1px solid var(--ts-border-strong) !important; color: var(--ts-ink-2) !important; }
body.page-cart .ts-control-bar .ts-cat-btn.active,
html.ts-account-dark body.page-cart .ts-control-bar .ts-cat-btn.active { background: var(--ts-ink) !important; border-color: var(--ts-ink) !important; color: var(--ts-bg) !important; }
html.ts-account-dark body.page-cart .ts-control-bar .ts-cat-btn.active { color: #171412 !important; }
body.page-cart .ts-control-bar .ts-cat-btn:hover { border-color: var(--ts-accent) !important; color: var(--ts-accent-ink) !important; background: var(--ts-surface) !important; }
body.page-cart .ts-search-input,
html.ts-account-dark body.page-cart .ts-search-input,
html.ts-account-dark body.page-cart input#tsSearch.ts-search-input { height: 42px !important; border: 1px solid var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; background: var(--ts-surface) !important; color: var(--ts-ink) !important; box-shadow: none !important; }
body.page-cart .ts-search-input:focus { border-color: var(--ts-accent) !important; box-shadow: 0 0 0 3px rgba(198,97,63,.18) !important; }
body.page-cart .ts-grid { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)) !important; gap: 14px !important; }
body.page-cart .ts-card,
html.ts-account-dark body.page-cart .ts-card { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; box-shadow: none !important; }
body.page-cart .ts-card:hover { transform: translateY(-2px) !important; box-shadow: var(--ts-shadow-lift) !important; border-color: var(--ts-border-strong) !important; }
body.page-cart .ts-card-img-wrap,
html.ts-account-dark body.page-cart .ts-card-img-wrap { height: 112px !important; padding: 16px 22px !important; background: var(--ts-logo-plate) !important; border-bottom: 1px solid var(--ts-border) !important; }
body.page-cart .ts-card:hover .ts-card-img-wrap img { transform: none !important; }
body.page-cart .ts-card-body { padding: 14px 16px 16px !important; }
body.page-cart .ts-card-title,
html.ts-account-dark body.page-cart .ts-card-title { font-size: 15px !important; font-weight: 650 !important; color: var(--ts-ink) !important; margin: 0 0 8px !important; }
body.page-cart .ts-badge-cat { border-radius: 6px !important; background: rgba(23,20,18,.72) !important; font-size: 10px !important; letter-spacing: .04em !important; }
body.page-cart .ts-badge-save { border-radius: 999px !important; background: var(--ts-accent) !important; font-size: 11px !important; box-shadow: none !important; }
body.page-cart .ts-comp-price { font-size: 12.5px !important; color: var(--ts-muted) !important; }
body.page-cart .ts-actual-price { font-size: 18px !important; color: var(--ts-ink) !important; }
body.page-cart .ts-actual-price span { color: var(--ts-muted) !important; font-size: 12.5px !important; }
body.page-cart .ts-form-container .billing-plan-select,
html.ts-account-dark body.page-cart .ts-form-container .billing-plan-select,
html.ts-account-dark body.page-cart select.billing-plan-select { min-height: 40px !important; border: 1px solid var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; background: var(--ts-surface) !important; color: var(--ts-ink) !important; font-family: var(--ts-sans) !important; font-size: 13.5px !important; padding: 8px 10px !important; }
body.page-cart .am-body-content .ts-form-container input.am-cart-button-order,
body.page-cart .ts-form-container .am-cart-button-order,
body.page-cart .am-body-content input[type=button].am-cart-button-order { min-height: 40px !important; padding: 0 14px !important; border-radius: var(--ts-r-md) !important; background: var(--ts-accent) !important; color: #fff !important; font-family: var(--ts-sans) !important; font-size: 13.5px !important; font-weight: 650 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; border: 0 !important; }
body.page-cart .ts-form-container .am-cart-button-order:hover,
body.page-cart .am-body-content input[type=button].am-cart-button-order:hover { background: var(--ts-accent-hover) !important; transform: none !important; box-shadow: none !important; }
body.page-cart .ts-card input.am-cart-button-order:disabled { background: var(--ts-bg-alt) !important; color: var(--ts-muted) !important; }
body.page-cart .ts-no-results,
html.ts-account-dark body.page-cart .ts-no-results { background: var(--ts-surface) !important; border: 1px dashed var(--ts-border-strong) !important; border-radius: var(--ts-r-lg) !important; color: var(--ts-muted) !important; }
body.page-cart .ts-footer,
html.ts-account-dark body.page-cart .ts-footer { background: transparent !important; border-top: 1px solid var(--ts-border) !important; color: var(--ts-muted) !important; margin-top: 40px !important; }
body.page-cart .ts-footer a { color: var(--ts-ink-2) !important; }
/* seat counters (ts-stock) — keep their semantics, calm the type */
body.page-cart .ts-seat-title, body.page-cart .ts-seat-fact { font-family: var(--ts-sans) !important; }

/* Product detail card (/cart/index/product/id/N/c/) */
body.page-cart.cart-product-detail .am-cart-product,
body.page-cart .am-cart-product.am-cart-product-detail { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-xl) !important; box-shadow: var(--ts-shadow) !important; overflow: hidden; max-width: 860px; margin: 0 auto; text-align: left; }
body.page-cart .am-cart-product-content-title h2,
html.ts-account-dark body.page-cart .am-cart-product-content-title h2 { font-size: 22px !important; font-weight: 650 !important; color: var(--ts-ink) !important; text-align: left !important; padding: 20px 24px 0 !important; margin: 0 !important; text-transform: none !important; }
body.page-cart .am-cart-product-content-desc-img-wrapper,
body.page-cart .am-cart-product-page-image,
html.ts-account-dark body.page-cart .am-cart-product-content-desc-img-wrapper { height: auto !important; min-height: 160px; padding: 24px !important; background: var(--ts-logo-plate) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; margin: 16px 24px !important; }
body.page-cart .am-cart-product-content-desc-img-wrapper img { max-height: 96px !important; }
body.page-cart .am-cart-product-content-add-container,
html.ts-account-dark body.page-cart .am-cart-product-content-add-container { background: var(--ts-surface-2) !important; border-top: 1px solid var(--ts-border) !important; padding: 18px 24px 22px !important; display: flex !important; flex-direction: column; align-items: stretch !important; gap: 12px; }
body.page-cart .am-cart-product-content-terms,
html.ts-account-dark body.page-cart .am-cart-product-content-terms { font-size: 16px !important; font-weight: 650 !important; color: var(--ts-ink) !important; }
body.page-cart .am-cart-product-content-add-container .am-cart-product-content-buttons { margin-top: 4px; }
body.page-cart .am-cart-product-content-add-container input.am-cart-button-add,
body.page-cart .am-body-content .am-cart-product-content-add-container input[type=button] { min-height: 46px !important; border-radius: var(--ts-r-md) !important; background: var(--ts-accent) !important; color: #fff !important; font-family: var(--ts-sans) !important; font-size: 15px !important; font-weight: 650 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; border: 0 !important; width: 100% !important; }
body.page-cart .am-cart-product-content-add-container input.am-cart-button-add:hover { background: var(--ts-accent-hover) !important; transform: none !important; }
body.page-cart .am-cart-back-to-shopping,
body.page-cart a[href="/cart"]:not(.nav-link):not(.ts-cat-btn) { display: inline-flex; align-items: center; gap: 6px; margin: 14px auto 0; color: var(--ts-ink-2) !important; font-weight: 600; font-size: 14px; }
body.page-cart .am-cart-product-detail-note,
body.page-cart .ts-product-note { color: var(--ts-muted); font-size: 13.5px; }

/* --------------------------------------------------------------------------
   Packages page — sidebar + canvas only; the plan cards keep their own tokens.
   -------------------------------------------------------------------------- */
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper { background: var(--ts-bg) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .item,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .item.has-discount,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .term-box,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .guarantee-box,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .bundle-disclosure,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .trust-strip,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper summary,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .footer-terms,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .refund-disclaimer,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .appcenter-more { background: var(--ts-surface) !important; background-color: var(--ts-surface) !important; border-color: var(--ts-border) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .item.featured { border-color: var(--ts-accent) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .btn.btn-ghost,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper a.btn.btn-ghost,
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .btn-ghost { background: var(--ts-surface-2) !important; border-color: var(--ts-border-strong) !important; color: var(--ts-ink) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pricing-wrapper .tool-row { border-color: var(--ts-border) !important; }

/* --------------------------------------------------------------------------
   Affiliate pages
   -------------------------------------------------------------------------- */
body.toolsurf-vertical-nav .am-aff-dashboard .am-aff-header h1 { font-size: 26px; font-weight: 650; color: var(--ts-ink); }
body.toolsurf-vertical-nav .am-aff-dashboard .am-aff-header p { color: var(--ts-muted); }
body.toolsurf-vertical-nav .am-aff-dashboard .am-stat-card,
body.toolsurf-vertical-nav .am-aff-dashboard .am-premium-card,
body.toolsurf-vertical-nav .am-aff-dashboard .asset-item,
html.ts-account-dark body.toolsurf-vertical-nav .am-aff-dashboard .am-stat-card,
html.ts-account-dark body.toolsurf-vertical-nav .am-aff-dashboard .am-premium-card,
html.ts-account-dark body.toolsurf-vertical-nav .am-aff-dashboard .asset-item,
html.ts-account-dark body.toolsurf-vertical-nav .am-aff-dashboard .hero-link { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; border-radius: var(--ts-r-lg) !important; box-shadow: var(--ts-shadow) !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .hero-link { border-left: 4px solid var(--ts-accent) !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .am-stat-card .icon { background: var(--ts-accent-soft) !important; color: var(--ts-accent-ink) !important; border-radius: 10px !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .am-stat-card .label { color: var(--ts-muted) !important; letter-spacing: .06em; font-size: 11.5px !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .am-stat-card .value,
body.toolsurf-vertical-nav .am-aff-dashboard h3,
body.toolsurf-vertical-nav .am-aff-dashboard .asset-item h4 { color: var(--ts-ink) !important; }
body.toolsurf-vertical-nav .am-aff-dashboard p { color: var(--ts-muted) !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .asset-icon { background: var(--ts-accent-soft) !important; color: var(--ts-accent-ink) !important; }
body.toolsurf-vertical-nav .am-aff-dashboard #aff-link-input { min-height: 42px; border: 1px solid var(--ts-border-strong) !important; border-radius: var(--ts-r-md) !important; background: var(--ts-surface-2) !important; color: var(--ts-ink) !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .copy-btn,
body.toolsurf-vertical-nav .am-aff-dashboard button.copy-btn { width: auto !important; min-height: 42px; padding: 0 18px !important; border-radius: var(--ts-r-md) !important; background: var(--ts-accent) !important; color: #fff !important; font-family: var(--ts-sans) !important; font-weight: 650 !important; text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; display: inline-flex !important; align-items: center; gap: 8px; }
body.toolsurf-vertical-nav .am-aff-dashboard .am-btn-outline,
body.toolsurf-vertical-nav .am-aff-dashboard a.am-btn-outline { display: inline-flex !important; align-items: center; justify-content: center; min-height: 38px; padding: 0 16px !important; border-radius: var(--ts-r-md) !important; border: 1px solid var(--ts-border-strong) !important; background: var(--ts-surface) !important; color: var(--ts-ink) !important; font-weight: 650 !important; font-size: 13.5px !important; }
body.toolsurf-vertical-nav .am-aff-dashboard .am-btn-outline:hover { border-color: var(--ts-accent) !important; color: var(--ts-accent-ink) !important; background: var(--ts-surface) !important; }

/* --------------------------------------------------------------------------
   Dark-mode mop-up: anything app-dark.css painted in the old cool palette.
   -------------------------------------------------------------------------- */
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content h1,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content h2,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content h3,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content h4,
html.ts-account-dark body.toolsurf-vertical-nav .page-header-title h3 { color: var(--ts-ink) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="image"]),
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content select,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content textarea { background: var(--ts-bg-alt) !important; background-color: var(--ts-bg-alt) !important; border: 1px solid var(--ts-border-strong) !important; color: var(--ts-ink) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content input::placeholder,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content textarea::placeholder { color: var(--ts-muted) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content table,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content table.am-grid { background: var(--ts-surface) !important; color: var(--ts-ink) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content .am-info:not(:has(a[href*="payout"])),
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content .am-flash,
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content .am-flash-content { background: var(--ts-accent-soft) !important; border-color: var(--ts-accent-soft-2) !important; color: var(--ts-ink-2) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content .am-form,
html.ts-account-dark body.ts-account-body.ts-account-dark .am-form form { background: var(--ts-surface) !important; border-color: var(--ts-border) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .pcoded-content .am-form label,
html.ts-account-dark body.ts-account-body.ts-account-dark .am-form label { color: var(--ts-ink-2) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .social-groups-banner:not(.ts-deals-banner):not(.ts-promo-banner) { background: var(--ts-surface) !important; border: 1px solid var(--ts-border) !important; box-shadow: none !important; }
html.ts-account-dark body.toolsurf-vertical-nav .social-groups-banner h3 { color: var(--ts-ink) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .social-groups-banner p { color: var(--ts-muted) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .ts-card-img-wrap,
html.ts-account-dark body.ts-account-body .ts-account-shell .ts-product-media,
html.ts-account-dark body.toolsurf-vertical-nav .am-ss-product-desc-img-wrapper { background: var(--ts-logo-plate) !important; }
html.ts-account-dark body.toolsurf-vertical-nav .ts-tour-popover { background: var(--ts-surface); color: var(--ts-ink); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  body.ts-account-body .ts-account-shell .ts-account-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.ts-account-body .ts-account-shell .ts-getstarted-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  html body.toolsurf-vertical-nav { font-size: 14px; }
  body.ts-account-body .ts-account-shell .ts-account-hero { padding: 18px 18px !important; }
  body.ts-account-body .ts-account-shell .ts-account-hero h1 { font-size: 22px !important; }
  body.ts-account-body .ts-account-shell .ts-account-hero-actions .ts-button { flex: 1 1 auto; }
  body.ts-account-body .ts-account-shell .ts-account-overview { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.ts-account-body .ts-account-shell .ts-overview-card { padding: 14px !important; }
  body.ts-account-body .ts-account-shell .ts-overview-card strong { font-size: 22px !important; }
  body.ts-account-body .ts-account-shell .ts-resource-grid { grid-template-columns: 1fr !important; }
  html body.toolsurf-vertical-nav .social-groups-banner { padding: 16px 18px !important; }
  body.page-cart .ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  body.page-cart .ts-card-img-wrap { height: 88px !important; padding: 12px 16px !important; }
  body.page-cart .ts-card-body { padding: 12px !important; }
  body.toolsurf-vertical-nav .pcoded-content .am-form { padding: 16px; }
  html body.toolsurf-vertical-nav ul.pcoded-inner-navbar > li.nav-item.pcoded-menu-caption { display: block !important; }
}
@media (max-width: 480px) {
  body.page-cart .ts-grid { grid-template-columns: 1fr !important; }
  body.ts-account-body .ts-account-shell .ts-account-overview { grid-template-columns: 1fr 1fr !important; }
}