/* =========================================================
   Global frontend card vertical spacing
   2026-08-19
   Goal: visual card-to-card vertical distance = 5px.
   Only vertical inter-card spacing is changed; card padding and
   horizontal grid spacing stay untouched.
   ========================================================= */
:root{ --page-card-v-gap:5px; }

/* Most frontend cards use .card or a *-card class.
   Reset only vertical outer margins so historical 14/16/18px
   margins do not stack with the new 5px spacing. */
.main-wrap :where(.card,[class*="-card"]){
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Block-flow adjacent cards. */
.main-wrap :where(.card,[class*="-card"]) + :where(.card,[class*="-card"]){
  margin-top:var(--page-card-v-gap) !important;
}

/* Grid/flex containers whose direct children are cards: change
   row gap only; column gap remains whatever each page defines. */
.main-wrap :has(> :where(.card,[class*="-card"])) {
  row-gap:var(--page-card-v-gap) !important;
}

/* Common visual-card classes that intentionally do not contain
   the word "card" in their class names. */
.main-wrap :where(.side-box,.uc-panel,.uc-topbar,.tj-box,.tj-form,.tj-hero,.twofa-faq,.twofa-info-card){
  margin-top:0 !important;
  margin-bottom:0 !important;
}
.main-wrap :where(.side-box,.uc-panel,.uc-topbar,.tj-box,.tj-form,.tj-hero,.twofa-faq,.twofa-info-card)
+ :where(.side-box,.uc-panel,.uc-topbar,.tj-box,.tj-form,.tj-hero,.twofa-faq,.twofa-info-card){
  margin-top:var(--page-card-v-gap) !important;
}

/* Page-specific wrappers that create the visible distance between
   nested card modules rather than between the cards themselves. */
.twofa-page .twofa-hero{ margin-bottom:var(--page-card-v-gap) !important; }
.twofa-page .twofa-seo-grid{ margin-bottom:var(--page-card-v-gap) !important; row-gap:var(--page-card-v-gap) !important; }
.uc-shell{ row-gap:var(--page-card-v-gap) !important; }
.uc-sidebar > * + *{ margin-top:var(--page-card-v-gap) !important; }
.uc-topbar + .uc-panel{ margin-top:var(--page-card-v-gap) !important; }

/* Browsers without :has() still get the adjacent-card rules above. */

/* =========================================================
   2026-08-19 R2: true 5px page-stack spacing + 5px card radius
   - Fix the large visible gaps between header ad / notice / main card.
   - Unify visual card containers to a 5px corner radius.
   - Do not alter pills/tags/buttons; only card-like surfaces.
   ========================================================= */
:root{
  --page-card-v-gap:5px;
  --page-card-radius:5px;
}

/* Top-level page stack: ad -> notice -> main content. */
body:not(.admin-body) > .main-wrap,
body:not(.admin-body) > .site-adslot-wrap{
  margin-top:var(--page-card-v-gap) !important;
  margin-bottom:var(--page-card-v-gap) !important;
}
body:not(.admin-body) > .site-notice-wrap{
  margin-top:0 !important;
  margin-bottom:var(--page-card-v-gap) !important;
}
body:not(.admin-body) > .site-notice-wrap .site-notice{
  margin-top:0 !important;
  margin-bottom:0 !important;
}

/* Frontend visual card surfaces. */
body:not(.admin-body) :where(
  .card,
  .main-card,
  .ad-card,
  .site-adslot-box,
  .site-notice,
  .twofa-hero-main,
  .twofa-tool-card,
  .twofa-seo-card,
  .twofa-faq,
  .twofa-info-card,
  .twofa-platform-inner,
  .twofa-platform-note,
  .twofa-shortlink-note,
  .sitepage-v2__hero,
  .sitepage-v2__toc-card,
  .sitepage-v2__section,
  .app-card,
  .app-hero,
  .blog-post-card,
  .blog-article-card,
  .blog-search-card,
  .blogger-card,
  .side-card,
  .side-box,
  .adpost-post-card,
  .adpost-article-card,
  .adpost-search-card,
  .adpost-blogger-card,
  .adpost-content-card,
  .adpost-side-box,
  .adpost-sort-card,
  .adpost-summary-box,
  .faq-card,
  .faq-side-card,
  .faq-tool-card,
  .faq-hero,
  .faq-bottom-links,
  .faq-breadcrumb,
  .faq-top-links,
  .faq-article,
  .idgen-panel,
  .desc-box,
  .download-box,
  .hot-card,
  .disclaimer-card,
  .rates-hero-copy,
  .rates-anchor-card,
  .rate-coin-card,
  .rates-info-card,
  .rates-doc-card,
  .rates-doc-hero,
  .rate-secret-card,
  .rate-key-list-card,
  .tool-appleid-card,
  .tool-date-card,
  .tool-panel,
  .tool-qr-box,
  .tool-u-result-box,
  .tool-fontimg-preview-box,
  .tj-box,
  .tj-card,
  .tj-hero,
  .tj-form,
  .tj-table-wrap,
  .uc-panel,
  .uc-topbar,
  .uc-sidebar-card,
  .uc-userbox,
  .user-card,
  .user-hero,
  .user-tip-card,
  .wallet-order-card,
  .wallet-pay-form-card,
  .wallet-pay-limit-card,
  .wallet-pay-hero,
  .wallet-pay-hero-main,
  .wallet-pay-method-box,
  .wallet-pay-amount-box,
  .footer-cta-card,
  .xz-card
){
  border-radius:var(--page-card-radius) !important;
}

/* Common page stacks whose visible cards previously kept 14-22px gaps. */
body:not(.admin-body) :where(
  .sitepage-v2__main,
  .twofa-seo-grid,
  .rates-info-grid,
  .rates-doc-grid,
  .rate-user-grid
){
  row-gap:var(--page-card-v-gap) !important;
}
.sitepage-v2__hero{ margin-bottom:var(--page-card-v-gap) !important; }
.sitepage-v2__main{ gap:var(--page-card-v-gap) !important; }
.rates-hero{ margin-bottom:var(--page-card-v-gap) !important; }
.rates-toolbar{ margin-bottom:var(--page-card-v-gap) !important; }
.rates-info-grid,.rates-doc-grid,.rate-user-grid{ margin-top:var(--page-card-v-gap) !important; margin-bottom:var(--page-card-v-gap) !important; }

/* Admin visual cards: this file is also loaded last in admin layout. */
.admin-body :where(
  .card,
  .admin-page-head,
  .admin-kpi,
  .admin-flash,
  .admin-surface,
  .admin-filter-card,
  .admin-stat-card,
  .admin-table-card,
  .admin-entry-card,
  .admin-settings-card,
  .admin-editor-card,
  .admin-simple-list-card,
  .admin-record-list-card,
  .admin-login-card,
  .admin-settings-block,
  .admin-note-box,
  .admin-danger-box,
  .admin-success-box,
  .admin-page-body > table,
  .admin-page-body > .table,
  .admin-page-body > form:not(.inline):not([style*="display:inline"]):not([style*="display:inline-block"]),
  .admin-page-body > .form
){
  border-radius:var(--page-card-radius) !important;
}

.admin-body .admin-page-head{
  margin-bottom:var(--page-card-v-gap) !important;
}
.admin-body .admin-settings-section + .admin-settings-section,
.admin-body .admin-settings-section > .admin-settings-block + .admin-settings-block{
  margin-top:var(--page-card-v-gap) !important;
}


/* =========================================================
   2026-08-19 R4: grid/flex card alignment correction
   The generic adjacent-card rule above is for normal block flow.
   In CSS Grid/Flex containers, row-gap already supplies the 5px
   distance. A second margin-top shifted every card except the first
   by another 5px, creating uneven tops and apparent height mismatch.
   ========================================================= */
.main-wrap .faq-list > .faq-card,
.main-wrap .faq-side > .faq-card,
.main-wrap .rates-grid > .rate-coin-card,
.main-wrap .rates-info-grid > .rates-info-card{
  margin-top:0 !important;
  margin-bottom:0 !important;
}