/* ═══════════════════════════════════════════════════════════
   FRAMES v3 — global frame/card restyle
   All frames site-wide use:
     background: linear-gradient(180deg, #191a1c 0%, #121315 100%);
     border: 1px solid #303235;
   Loaded LAST so it overrides style.css + inline <style> blocks.
═══════════════════════════════════════════════════════════ */

:root {
  --bg-dark:   #000000;
  --bg-card:   #16171a;
  --bg-card2:  #1c1d20;
  --border:    #303235;
  --border2:   #3a3c40;
  --frame-bg:  linear-gradient(180deg, #191a1c 0%, #121315 100%);
  --frame-bg-hover: linear-gradient(180deg, #1e1f22 0%, #17181a 100%);
}

/* ── Page background — deep black with subtle depth ── */
body {
  background:
    radial-gradient(1100px 500px at 50% -10%, rgba(70,72,80,.08), transparent 60%),
    radial-gradient(900px 500px at 90% 110%, rgba(50,52,58,.06), transparent 60%),
    #000000 !important;
}

/* ── MAIN FRAME CLASSES (style.css vars-based) ── */
.home-logo-wrap, .dl-tab, .dl-empty, .dl-card,
.detail-header, .modal-box, .app-card,
.admin-header, .admin-section,
.hd-profile-card, .hd-desc-card, .hd-stat-card, .hd-action-btn,
.topup-section, .contact-hero, .contact-ch, .contact-form-card,
.ord-card, .od-modal-inner, .sp-section-header, .info-box {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* Elevated / inner frames */
.dl-card-banner, .dl-card-icon, .detail-icon, .stat-item,
.install-step, .app-logo-img, .fi-item,
.topup-pkg, .topup-input-wrap, .topup-method, .topup-bank-row {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.topup-pkg:hover, .topup-method:hover, .hd-action-btn:hover, .app-card:hover, .dl-card:hover {
  background: linear-gradient(180deg, #232427 0%, #1a1b1e 100%) !important;
  border-color: #45474c !important;
}

/* Form controls keep flat dark */
.form-input, .form-textarea, .admin-input {
  background: #161719 !important;
  border: 1px solid #303235 !important;
}
.form-input:focus, .form-textarea:focus, .admin-input:focus {
  border-color: #55585e !important;
}

/* ── INDEX: About strip + cards ── */
.about-strip {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.about-card {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.about-card:hover {
  background: linear-gradient(180deg, #232427 0%, #1a1b1e 100%) !important;
  border-color: #45474c !important;
}

/* ── INDEX: Topup promo v3 ── */
.tp3-wrap {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.tp3-head-right {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.tp3-feat {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.tp3-feat:hover {
  background: linear-gradient(180deg, #232427 0%, #1a1b1e 100%) !important;
  border-color: #45474c !important;
}
/* Keep the two big promo cards tinted, but align base tone */
.tp3-card-sim {
  background: linear-gradient(160deg, #191a1c 0%, #14201a 60%, #121315 100%) !important;
  border: 1px solid rgba(0,230,118,.3) !important;
}
.tp3-card-bank {
  background: linear-gradient(160deg, #191a1c 0%, #141a26 60%, #121315 100%) !important;
  border: 1px solid rgba(59,130,246,.3) !important;
}

/* ── WARRANTY page frames ── */
.wt-stat, .wt-card {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.wt-qa {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.wt-qa:hover { border-color: #45474c !important; }
.wt-modal {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.wt-prod-thumb {
  background: #1c1d20 !important;
  border: 1px solid #303235 !important;
}
/* Hero keeps red identity but aligned base */
.wt-hero {
  background: linear-gradient(160deg, #191a1c 0%, #241214 55%, #121315 100%) !important;
  border: 1px solid rgba(255,80,80,.3) !important;
}

/* ── HISTORY / RANKING / other v3 dashboards ── */
.hs-card, .hs-stat, .hs-table-card,
.rk-card, .rk-stat, .rk-hero, .rk-table-wrap,
.tu-card, .tu-panel {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* ── ANNOUNCEMENTS ── */
.ann-section, .ann-card, .ann-toolbar {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.ann-card:hover { border-color: #45474c !important; }

/* ── STORE / PRODUCT frames ── */
.sp-card, .store-card, .prod-card, .pkg-card {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.sp-card:hover, .store-card:hover, .prod-card:hover {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border-color: #45474c !important;
}

/* ── Generic table headers/rows on dark frames ── */
.wt-table th, .hs-table th, .rk-table th { border-bottom: 1px solid #303235 !important; }
.wt-table td, .hs-table td, .rk-table td { border-bottom: 1px solid #232427 !important; }

/* ── Welcome notice / chat widgets ── */
.wn-modal, .ai-chat-panel, .lc-panel {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* ── HISTORY page (hv3-*) ── */
.hv3-hdr, .hv3-stat, .hv3-table-wrap, .hv3-filterbar, .hv3-empty, .hv3-pagination {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.hv3-tab, .hv3-time-filter, .hv3-refresh-btn, .hv3-page-btn, .hv3-per-page {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.hv3-row { border-bottom: 1px solid #232427 !important; }
.hv3-thead { border-bottom: 1px solid #303235 !important; }

/* ── RANKING page (rk-*) ── */
.rk-hero, .rk-pod-card, .rk-list, .rk-my-pos, .rk-empty {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.rk-list-row { border-bottom: 1px solid #232427 !important; }
.rk-load-more-btn {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}

/* ── TOPUP page ── */
.topup-header, .topup-tabs {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.topup-tab, .tc-amount-btn {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.tc-amount-btn:hover, .topup-tab:hover {
  background: linear-gradient(180deg, #232427 0%, #1a1b1e 100%) !important;
  border-color: #45474c !important;
}
.tc-input, .topup-input {
  background: #161719 !important;
  border: 1px solid #303235 !important;
}

/* ═══════════════ PHASE 2 — full border coverage ═══════════════ */

/* Sidebar + topbar chrome */
.sidebar, .sb-brand-area {
  background: linear-gradient(180deg, #0c0d0e 0%, #000000 100%) !important;
  border-right: 1px solid #303235 !important;
}
.sb-balance-card, .sb-auth-area {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
  border-radius: 14px;
}
.sb-btn {
  border: 1px solid #303235 !important;
}
.topbar, .admin-topbar {
  background: linear-gradient(180deg, #101112 0%, #0a0b0c 100%) !important;
  border-bottom: 1px solid #303235 !important;
}
.topbar-search-wrap, .topbar-user, .topbar-user-drop, .topup-balance-pill {
  background: linear-gradient(180deg, #1e1f22 0%, #17181a 100%) !important;
  border: 1px solid #303235 !important;
}
.footer, footer.site-footer, .site-footer {
  background: linear-gradient(180deg, #101112 0%, #000000 100%) !important;
  border-top: 1px solid #303235 !important;
}

/* Auth pages */
.auth-card, .auth-portal-inner {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.auth-input, .auth-google-btn {
  background: #161719 !important;
  border: 1px solid #303235 !important;
}

/* Blog */
.blog-card, .blog-comment-form, .blog-search-wrap, .blog-load-more, .blog-tab-btn {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.blog-card:hover { border-color: #45474c !important; }

/* Announcements */
.ann-detail-modal, .ann-search-wrap, .ann-cat-btn {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* Contact v2 */
.ct2-ch-card, .ct2-faq, .ct2-form-card, .ct2-hero, .ct2-map-card {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* Comments / community */
.comment-form, .comment-item, .comment-card, .tiktok-embed-section {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* Topup extras */
.bank-notice, .topup-note, .topup-promo-section, .tud-balance-card, .tc-telco, .topup-error {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.tc-telco:hover { border-color: #45474c !important; }

/* Warranty extras */
.wt-form-input, .wt-resp-box {
  background: #161719 !important;
  border: 1px solid #303235 !important;
}

/* Welcome notice / chat */
.wn-body, .ac-messages, .ac-header {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.ac-input { background:#161719 !important; border:1px solid #303235 !important; }

/* Captcha + misc widgets */
.captcha-box, .vip-levelup-card {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}

/* ── Admin panel (admin.css + admin_v2.css) ── */
.adm-login-box, .adm-modal-box, .admin-stat-card, .admin-table-wrap,
.admin-form-section, .admin-app-card, .admin-app-list-item,
.ao-order-card, .ao-sum-card, .ao-item-box, .ao-status-form,
.adm-search-wrap, .ao-search-wrap, .upload-zone, .upload-preview,
.admin-delete-modal-box, .comment-card {
  background: linear-gradient(180deg, #191a1c 0%, #121315 100%) !important;
  border: 1px solid #303235 !important;
}
.adm-input, .adm-select, .adm-textarea, .admin-select, .admin-textarea {
  background: #161719 !important;
  border: 1px solid #303235 !important;
}
.admin-sidebar, .adm-sidebar {
  background: linear-gradient(180deg, #0c0d0e 0%, #000000 100%) !important;
  border-right: 1px solid #303235 !important;
}
.admin-main, .adm-main, .admin-content { background: transparent !important; }

/* Generic tabs & pills anywhere */
.dl-tab, .hv3-tab, .topup-tab, .blog-tab-btn, .ann-cat-btn {
  border: 1px solid #303235 !important;
}
.dl-tab.active, .hv3-tab.on, .topup-tab.tab-on {
  border-color: #55585e !important;
}

/* ========================================================================== 
   FRAMES v4 - unified surface system
   Every UI container uses only the requested neutral palette. Accent colors
   remain available for text, icons and active-state border highlights.
   ========================================================================== */
:root {
  --frame-surface: #151617;
  --frame-surface-deep: #121314;
  --frame-line: rgba(255, 255, 255, 0.055);
  --frame-line-hover: rgba(255, 255, 255, 0.055);
  --frame-fill: linear-gradient(145deg, #151617 0%, #121314 100%);
  --frame-fill-hover: linear-gradient(145deg, #151617 0%, #151617 48%, #121314 100%);
  --bg-card: #151617;
  --bg-card2: #121314;
  --border: rgba(255, 255, 255, 0.055);
  --border2: rgba(255, 255, 255, 0.055);
  --frame-bg: var(--frame-fill);
  --frame-bg-hover: var(--frame-fill-hover);
  --adm-card: #151617;
  --adm-surface: #121314;
  --adm-border: rgba(255, 255, 255, 0.055);
}

/* Primary page chrome */
.sidebar, .sb-brand-area, .topbar, .footer, footer.site-footer, .site-footer,
.admin-sidebar, .adm-sidebar, .admin-topbar, .adm-topbar {
  background: #121314 !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
}

/* Named frames used across the storefront and every account tab. */
.home-logo-wrap, .dl-tab, .dl-empty, .dl-card, .detail-header, .modal-box,
.app-card, .admin-header, .admin-section, .hd-profile-card, .hd-desc-card,
.hd-stat-card, .hd-action-btn, .topup-section, .contact-hero, .contact-ch,
.contact-form-card, .ord-card, .od-modal-inner, .sp-section-header, .info-box,
.about-strip, .about-card, .tp3-wrap, .tp3-head-right, .tp3-feat,
.tp3-card-sim, .tp3-card-bank, .wt-stat, .wt-card, .wt-qa, .wt-modal,
.wt-prod-thumb, .wt-hero, .hs-card, .hs-stat, .hs-table-card, .rk-card,
.rk-stat, .rk-hero, .rk-table-wrap, .tu-card, .tu-panel, .ann-section,
.ann-card, .ann-toolbar, .sp-card, .store-card, .prod-card, .pkg-card,
.wn-modal, .ai-chat-panel, .lc-panel, .hv3-hdr, .hv3-stat, .hv3-table-wrap,
.hv3-filterbar, .hv3-empty, .hv3-pagination, .hv3-tab, .hv3-time-filter,
.hv3-refresh-btn, .hv3-page-btn, .hv3-per-page, .rk-pod-card, .rk-list,
.rk-my-pos, .rk-empty, .rk-load-more-btn, .topup-header, .topup-tabs,
.topup-tab, .tc-amount-btn, .sb-balance-card, .sb-auth-area,
.topbar-search-wrap, .topbar-user, .topbar-user-drop, .topup-balance-pill,
.auth-card, .auth-portal-inner, .blog-card, .blog-comment-form,
.blog-search-wrap, .blog-load-more, .blog-tab-btn, .ann-detail-modal,
.ann-search-wrap, .ann-cat-btn, .ct2-ch-card, .ct2-faq, .ct2-form-card,
.ct2-hero, .ct2-map-card, .comment-form, .comment-item, .comment-card,
.tiktok-embed-section, .bank-notice, .topup-note, .topup-promo-section,
.tud-balance-card, .tc-telco, .topup-error, .wn-body, .ac-messages,
.ac-header, .captcha-box, .vip-levelup-card, .adm-login-box, .adm-modal-box,
.admin-stat-card, .admin-table-wrap, .admin-form-section, .admin-app-card,
.admin-app-list-item, .ao-order-card, .ao-sum-card, .ao-item-box,
.ao-status-form, .adm-search-wrap, .ao-search-wrap, .upload-zone,
.upload-preview, .admin-delete-modal-box, .stat-item, .install-step,
.dl-card-banner, .dl-card-icon, .detail-icon, .app-logo-img, .fi-item,
.topup-pkg, .topup-input-wrap, .topup-method, .topup-bank-row {
  background: var(--frame-fill) !important;
  border: 1px solid rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 10px 30px rgba(0, 0, 0, 0.16) !important;
}

/* Catch page-specific frame names while avoiding layout/root containers. */
:where(main, .site-main, .page-content, .adm-main) :where(
  [class$="-card"], [class$="-panel"], [class$="-box"],
  [class$="-modal"], [class$="-toolbar"], [class$="-tabs"],
  [class$="-table-wrap"], [class$="-section"]
) {
  background: var(--frame-fill) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 10px 30px rgba(0, 0, 0, 0.14);
}

/* Full-screen modal controllers are transparent shells, not content frames.
   Keeping them transparent prevents an inactive modal from covering the page. */
.pm-modal,
.od-modal,
.od2-modal {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Inputs and nested controls use the deeper tone to stay visually distinct. */
.form-input, .form-textarea, .admin-input, .auth-input, .auth-google-btn,
.tc-input, .topup-input, .wt-form-input, .wt-resp-box, .ac-input,
.adm-input, .adm-select, .adm-textarea, .admin-select, .admin-textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select, textarea {
  background: #121314 !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
}

/* Polished interaction: brighter neutral edge, no foreign surface colors. */
.app-card:hover, .dl-card:hover, .about-card:hover, .tp3-feat:hover,
.wt-qa:hover, .ann-card:hover, .sp-card:hover, .store-card:hover,
.prod-card:hover, .topup-pkg:hover, .topup-method:hover, .hd-action-btn:hover,
.tc-amount-btn:hover, .topup-tab:hover, .tc-telco:hover,
:where(main, .site-main, .page-content, .adm-main) :where(
  [class$="-card"], [class$="-panel"], [class$="-box"], [class$="-tab"]
):hover {
  background: var(--frame-fill-hover) !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

.dl-tab.active, .hv3-tab.on, .topup-tab.tab-on,
[role="tab"][aria-selected="true"], .tab.active, .tabs .active {
  background: #151617 !important;
  border-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
}

.wt-table th, .hs-table th, .rk-table th, .hv3-thead,
.wt-table td, .hs-table td, .rk-table td, .hv3-row, .rk-list-row {
  border-color: rgba(255, 255, 255, 0.055) !important;
}

/* ========================================================================== 
   PAGE CANVAS v5 - pure black page background
   Scope is intentionally limited to document/layout canvases. Cards, panels,
   tabs, forms and navigation surfaces keep the frame palette defined above.
   ========================================================================== */
html,
body,
body.adm-body,
body.auth-body,
.site-layout,
.site-main,
.page-content,
.adm-main,
.adm-content,
.admin-main,
.admin-content,
.admin-container,
.auth-wrap {
  background-color: #000000 !important;
}

body,
body.adm-body,
body.auth-body,
.site-layout,
.site-main,
.page-content,
.adm-main,
.adm-content,
.admin-main,
.admin-content,
.admin-container {
  background-image: none !important;
}

/* Remove artwork/glow overlays that tint the actual page canvas. */
.site-bg-gif,
.site-bg-img,
.site-bg-seam,
.site-bg-overlay,
.auth-mountains,
.auth-particles,
.auth-grid-lines,
.auth-portal {
  display: none !important;
  background: transparent !important;
}

body.auth-body::before,
body.auth-body::after,
body.adm-body::before,
body.adm-body::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
}

/* ========================================================================== 
   NAVIGATION BRAND v6 - logo-only identity with ambient particles
   ========================================================================== */
.sb-brand-area {
  min-height: 110px;
  padding: 12px 10px 10px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.sb-service-label {
  display: none !important;
}
.sb-brand-legacy,
.sb-brand-link,
.sb-brand-text {
  display: none !important;
}
.sb-logo-stage,
.adm-logo-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-decoration: none;
  overflow: hidden;
}
.sb-logo-stage {
  height: auto;
  border-radius: 18px;
  padding: 4px 0;
}
.sb-logo-main,
.adm-logo-main {
  position: relative;
  z-index: 3;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 5px 12px rgba(0,0,0,.85));
  transition: transform .35s ease, filter .35s ease;
}
.sb-logo-main {
  width: min(220px, 100%);
  height: auto;
  max-height: 110px;
  transform: scale(1);
}
.sb-logo-stage:hover .sb-logo-main,
.adm-logo-stage:hover .adm-logo-main {
  transform: scale(1.02);
  filter: drop-shadow(0 7px 16px rgba(0,0,0,.9)) brightness(1.08);
}
.sb-logo-aura,
.adm-logo-aura {
  position: absolute;
  z-index: 0;
  left: 8%; right: 8%; top: 22%; bottom: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 25% 55%, rgba(255,67,30,.18), transparent 40%),
    radial-gradient(circle at 75% 55%, rgba(31,145,255,.18), transparent 40%);
  filter: blur(14px);
  animation: navLogoAura 3.6s ease-in-out infinite;
}
.sb-logo-particles,
.adm-logo-particles {
  position: absolute;
  z-index: 2;
  inset: 6px 8px;
  pointer-events: none;
}
.sb-logo-particle,
.adm-logo-particle {
  --particle-color: #39b8ff;
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--particle-color);
  box-shadow: 0 0 5px var(--particle-color), 0 0 11px var(--particle-color);
  opacity: 0;
  animation: navLogoParticle 3.2s ease-in-out infinite;
}
.sb-logo-particle:nth-child(odd),
.adm-logo-particle:nth-child(odd) { --particle-color:#ff5b35; }
.sb-logo-particle:nth-child(3n),
.adm-logo-particle:nth-child(3n) { --particle-color:#f5f7ff; width:2px; height:2px; }
.sb-logo-particle.p1,.adm-logo-particle.p1{left:5%;top:70%;animation-delay:-.2s}.sb-logo-particle.p2,.adm-logo-particle.p2{left:12%;top:38%;animation-delay:-1.4s}.sb-logo-particle.p3,.adm-logo-particle.p3{left:21%;top:80%;animation-delay:-2.2s}.sb-logo-particle.p4,.adm-logo-particle.p4{left:31%;top:24%;animation-delay:-.8s}.sb-logo-particle.p5,.adm-logo-particle.p5{left:42%;top:72%;animation-delay:-2.7s}.sb-logo-particle.p6,.adm-logo-particle.p6{left:51%;top:20%;animation-delay:-1.8s}.sb-logo-particle.p7,.adm-logo-particle.p7{left:60%;top:78%;animation-delay:-.5s}.sb-logo-particle.p8,.adm-logo-particle.p8{left:69%;top:30%;animation-delay:-2.4s}.sb-logo-particle.p9,.adm-logo-particle.p9{left:78%;top:72%;animation-delay:-1.1s}.sb-logo-particle.p10,.adm-logo-particle.p10{left:88%;top:42%;animation-delay:-3s}.sb-logo-particle.p11,.adm-logo-particle.p11{left:94%;top:68%;animation-delay:-1.6s}.sb-logo-particle.p12,.adm-logo-particle.p12{left:55%;top:88%;animation-delay:-2s}.sb-logo-particle.p13{left:25%;top:50%;animation-delay:-1.2s}.sb-logo-particle.p14{left:74%;top:52%;animation-delay:-2.6s}
@keyframes navLogoParticle {
  0%,100% { opacity:0; transform:translate3d(0,8px,0) scale(.45); }
  25% { opacity:.95; }
  70% { opacity:.3; }
  80% { opacity:0; transform:translate3d(2px,-22px,0) scale(1.15); }
}
@keyframes navLogoAura {
  0%,100% { opacity:.55; transform:scale(.92); }
  50% { opacity:1; transform:scale(1.08); }
}

/* Airier navigation rhythm and a cleaner interaction edge. */
.sb-nav { gap: 5px !important; padding: 0 12px !important; }
.sb-item {
  min-height: 46px;
  padding: 8px 11px !important;
  border-radius: 12px !important;
}
.sb-item:hover { transform: translateX(2px); }
.sb-item-icon { width:32px !important; height:32px !important; border-radius:10px !important; }
.sb-section-label { padding:10px 20px 6px !important; }
.sb-divider { margin:8px 14px !important; }

/* Admin sidebar uses the exact same uploaded logo and no brand copy. */
.adm-logo-stage {
  height: 108px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255,255,255,.055);
}
.adm-logo-main {
  width: 210px;
  height: 120px;
  transform: scale(1.24);
}
.adm-brand { display:none !important; }
.adm-nav { padding-top:14px !important; }

/* Settings now exposes one focused, wide logo uploader only. */
.adm-panel:has([name="shop_brand_part1"]) {
  display:none !important;
}
.adm-panel.aujp-editor-panel {
  display:block !important;
}
.logo-only-settings > div:last-child > div:first-of-type {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
}
.logo-only-settings .logo-upload-card { padding:22px !important; }
.adm-user-avatar-custom { padding:0 !important; overflow:hidden; background:#121314 !important; }
.adm-user-avatar-custom img { width:100%; height:100%; object-fit:cover; display:block; }

@media (max-width: 768px) {
  .sb-brand-area { min-height:112px; padding:10px !important; }
  .sb-logo-stage { height:92px; }
  .sb-logo-main { width:220px; height:122px; transform:scale(1.23); }
  .sb-logo-stage:hover .sb-logo-main { transform:scale(1.27); }
  .sb-nav { padding-inline:10px !important; }
  .adm-logo-stage { height:98px; }
  .adm-logo-main { width:200px; height:112px; }
  .logo-only-settings > div:last-child > div:first-of-type { grid-template-columns:1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
  .sb-logo-particle,.adm-logo-particle,.sb-logo-aura,.adm-logo-aura { animation:none !important; }
  .sb-logo-particle,.adm-logo-particle { opacity:.55; }
}