@property --glass-rim-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 120deg;
}

html{min-width:320px}body{min-width:320px}[hidden]{display:none!important}button,a,input,textarea,select{font-family:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid rgba(30,216,126,.25);outline-offset:2px}

/* Landing and authentication */
.section-shell,footer{max-width:1240px}.site-header{max-width:none}.header-actions .button-small{white-space:nowrap}.mobile-menu button.button{min-height:52px}
.home-login-button,.mobile-header-login,.mobile-menu-login{border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;cursor:pointer}.home-login-button{min-height:42px;padding:0 16px;border:1px solid rgba(7,17,13,.1);border-radius:12px;color:#102018;background:rgba(255,255,255,.7);box-shadow:0 7px 18px rgba(11,43,26,.06),inset 0 1px 0 #fff;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.home-login-button:hover{border-color:rgba(30,216,126,.4);box-shadow:0 10px 23px rgba(20,154,87,.12),inset 0 1px 0 #fff;transform:translateY(-1px)}.home-login-button svg,.mobile-header-login svg,.mobile-menu-login svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.mobile-header-login{display:none}.mobile-menu-login{min-height:52px;margin-top:15px;border:1px solid rgba(255,255,255,.17);border-radius:14px;color:white;background:rgba(255,255,255,.07);font-size:14px}
@media(max-width:820px){.site-header{gap:10px}.mobile-header-login{min-height:40px;margin-left:auto;padding:0 13px;display:inline-flex;border:1px solid rgba(8,39,22,.1);border-radius:12px;color:#0b2317;background:rgba(255,255,255,.76);box-shadow:0 7px 18px rgba(11,43,26,.07);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.menu-button{margin-left:0}.mobile-menu-login svg{width:19px;height:19px}}
@media(max-width:390px){.mobile-header-login{width:40px;padding:0}.mobile-header-login span{display:none}}
.modal-backdrop{z-index:999999!important;padding:24px;background:radial-gradient(circle at 18% 10%,rgba(30,216,126,.16),transparent 30%),rgba(2,12,7,.76);backdrop-filter:blur(18px) saturate(125%);-webkit-backdrop-filter:blur(18px) saturate(125%)}
body.modal-open .home-sticky-cta,
body.auth-modal-open .home-sticky-cta,
.modal-backdrop.open ~ .home-sticky-cta,
.modal-backdrop.open + .home-sticky-cta,
.auth-modal-backdrop.show ~ .home-sticky-cta,
.auth-modal-backdrop.active ~ .home-sticky-cta,
body:has(.modal-backdrop.open) .home-sticky-cta,
body:has(.auth-modal-backdrop.show) .home-sticky-cta,
body:has(.auth-modal-backdrop.active) .home-sticky-cta,
body:has(#cloud-onboarding-modal.active) .home-sticky-cta,
body:has(#cloud-onboarding-modal:not([hidden])) .home-sticky-cta,
body:has(.login-modal:not([hidden])) .home-sticky-cta{display:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateX(-50%) translateY(140px)!important}
.login-modal{width:min(900px,calc(100% - 32px));height:min(650px,calc(100dvh - 48px));max-height:none;padding:0;display:grid;grid-template-columns:minmax(300px,.9fr) minmax(390px,1.1fr);overflow:hidden;border:1px solid rgba(255,255,255,.65);border-radius:30px;background:#f9fbf8;box-shadow:0 45px 120px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.9)}
.modal-close{width:36px;height:36px;top:17px;right:17px;z-index:5;display:grid;place-items:center;border:1px solid rgba(9,34,21,.08);border-radius:50%;color:#5e6c65;background:rgba(255,255,255,.72);font-size:21px;line-height:1;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.auth-showcase{padding:38px;position:relative;overflow:hidden;display:flex;flex-direction:column;color:white;background:radial-gradient(circle at 82% 13%,rgba(30,216,126,.35),transparent 27%),linear-gradient(150deg,#06120c,#0a2819 68%,#123c27)}
.auth-showcase::before{content:"";width:320px;height:320px;position:absolute;left:-160px;bottom:-170px;border:1px solid rgba(146,255,197,.13);border-radius:50%;box-shadow:inset 0 0 0 45px rgba(255,255,255,.018),inset 0 0 0 90px rgba(255,255,255,.018)}
.auth-showcase::after{content:"";width:150px;height:150px;position:absolute;right:-55px;top:155px;border:1px solid rgba(146,255,197,.13);border-radius:50%;box-shadow:inset 0 0 0 28px rgba(255,255,255,.018)}
.auth-brand,.auth-mobile-brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}.auth-brand{position:relative;z-index:1}.auth-brand strong,.auth-mobile-brand strong{font:800 16px "Manrope",sans-serif}.auth-brand i,.auth-mobile-brand i{color:#1ed87e;font-style:normal}.auth-showcase-copy{margin:auto 0 30px;position:relative;z-index:1}.auth-kicker,.auth-heading>span{display:block;margin-bottom:13px;color:#8ff1bd;font-size:9px;font-weight:800;letter-spacing:.14em}.auth-showcase-copy h2{margin:0 0 15px;font:800 clamp(28px,3vw,39px)/1.03 "Manrope",sans-serif;letter-spacing:-.055em}.auth-showcase-copy p{max-width:310px;margin:0;color:#96aaa0;font-size:12px;line-height:1.7}.auth-benefits{position:relative;z-index:1;display:grid;gap:10px}.auth-benefits span{display:flex;align-items:center;gap:9px;color:#c4d1cb;font-size:10px;font-weight:600}.auth-benefits i{width:20px;height:20px;display:grid;place-items:center;border-radius:7px;color:#062415;background:#1ed87e;font-size:9px;font-style:normal}.auth-mini-card{margin-top:28px;padding:15px;position:relative;z-index:1;display:grid;gap:4px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.065);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);backdrop-filter:blur(12px)}.auth-mini-card small{color:#7f988b;font-size:7px;font-weight:800;letter-spacing:.12em}.auth-mini-card strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-mini-card>span{margin-top:7px;display:flex;align-items:center;gap:6px;color:#91a79c;font-size:8px}.auth-mini-card>span i{width:6px;height:6px;border-radius:50%;background:#1ed87e;box-shadow:0 0 0 3px rgba(30,216,126,.12)}
.auth-panel{min-width:0;padding:40px 38px 25px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.auth-mobile-brand{display:none}.auth-tabs{position:static;margin:0 0 28px;padding:4px;border-radius:13px;background:#ebf0ec}.auth-tabs button{padding:11px;border-radius:10px;font-size:10px}.auth-tabs button.active{background:#07110d}.auth-intent{margin:-13px 0 21px;padding:11px 13px}.auth-heading{margin-bottom:24px}.auth-heading>span{margin-bottom:9px;color:#0b9e58}.auth-heading h2{margin:0 0 8px;font:800 clamp(20px,2.2vw,25px)/1.15 "Manrope",sans-serif;letter-spacing:-.035em;white-space:nowrap}.auth-heading p{margin:0;color:#728078;font-size:12px;line-height:1.55}.auth-form label{margin-top:14px;gap:7px;color:#44534b;font-size:10px}.auth-input{min-height:48px;display:flex;align-items:center;border:1px solid rgba(9,39,23,.11);border-radius:12px;background:white;box-shadow:inset 0 1px 0 rgba(255,255,255,.8);transition:border-color .2s,box-shadow .2s}.auth-input:focus-within{border-color:#2ad580;box-shadow:0 0 0 4px rgba(30,216,126,.11)}.auth-input>span{width:43px;flex:0 0 43px;color:#7d8983;text-align:center;font-size:14px}.login-modal .auth-input input{min-width:0;padding:13px 4px;border:0;background:transparent;box-shadow:none!important;font-size:12px}.password-toggle{padding:8px 11px;border:0;color:#0a9653;background:transparent;font-size:9px;font-weight:800;cursor:pointer}.forgot-link{margin-top:10px;font-size:10px}.modal-submit{min-height:48px;margin:21px 0 13px;border-radius:12px;font-size:11px}.auth-message{min-height:12px;margin:10px 0 -8px}.auth-legal{display:block;margin-top:3px;color:#89948e;font-size:8px;line-height:1.6;text-align:center}.auth-legal a{color:#53625a;font-weight:700}
.auth-input>span svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.auth-mobile-points{display:none}
.login-modal[data-auth-mode="forgot"] .auth-tabs{display:none}.login-modal[data-auth-mode="forgot"] .auth-heading{margin-top:25px}

/* Desktop application layouts */
.dashboard-main{width:calc(100% - 247px);max-width:none}.dashboard-grid{align-items:stretch}.panel,.stats-grid article,.links-section,.settings-section{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}.quick-panel form{max-width:100%}.link-copy{min-width:0}.link-copy a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.link-meta{flex-wrap:wrap}.table-wrap{border-radius:12px}
.action-card{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}.verification-card{text-align:left}.action-kicker{margin:24px 0 -10px!important;color:#0b9e58!important;font-size:10px!important;font-weight:800;letter-spacing:.12em}.verification-progress{height:5px;margin-top:25px;overflow:hidden;border-radius:999px;background:#dce7e0}.verification-progress i{width:42%;height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#1ed87e,#8ef0bc);animation:verification-slide 1.1s ease-in-out infinite}.verification-progress.complete i{width:100%;animation:none}.action-icon.error{color:#8b2525;background:#ffdada}.action-primary{padding:13px 17px;border-radius:11px;color:#062414!important;background:#1ed87e;text-decoration:none!important}
@keyframes verification-slide{0%{transform:translateX(-110%)}100%{transform:translateX(260%)}}
@keyframes mobile-nav-green-glow {
  0% {
    filter: drop-shadow(0 0 0 rgba(5, 150, 105, 0));
  }
  52% {
    filter: drop-shadow(0 0 9px rgba(16, 185, 129, 0.48));
  }
  100% {
    filter: drop-shadow(0 0 1px rgba(5, 150, 105, 0.12));
  }
}
@keyframes mobile-nav-green-shift {
  0% {
    color: var(--mobile-nav-idle-color, #0f172a);
    text-shadow: none;
  }
  52% {
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.34);
  }
  100% {
    color: #059669;
    text-shadow: 0 0 2px rgba(5, 150, 105, 0.12);
  }
}

@media (min-width:761px) and (max-width:1180px){
  .sidebar{width:210px}.dashboard-main{width:calc(100% - 222px);margin-left:222px;padding:36px 28px 70px}.dashboard-grid{grid-template-columns:1fr}.quick-panel{order:-1}.stats-grid{gap:10px}.stats-grid article{padding:19px}.admin-stats{grid-template-columns:repeat(3,1fr)}
}

@media (min-width:1181px){
  .dashboard-main{padding-right:max(45px,calc((100vw - 1540px)/2 + 45px))}.analytics-panel,.quick-panel{min-width:0}
}

/* Mobile glass dock elements hidden on desktop */
.dock-indicator, .dock-melt-window, .mobile-glass-track, .mobile-tab-color-overlay { display: none !important; }
@media (min-width: 761px) {
  .mobile-glass-track,
  .mobile-tab-color-overlay {
    display: none !important;
  }
  .sidebar nav .mobile-tab-link {
    width: 100% !important;
    padding: 12px 13px !important;
    border: 0 !important;
    border-radius: 11px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    color: #8fa39a !important;
    background: transparent !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transform: none !important;
    box-shadow: none !important;
    text-align: left !important;
  }
  .sidebar nav .mobile-tab-link:hover,
  .sidebar nav .mobile-tab-link.active {
    color: white !important;
    background: rgba(255, 255, 255, 0.07) !important;
  }
  .sidebar nav .mobile-tab-link.active {
    color: #10b981 !important;
    background: rgba(16, 185, 129, 0.12) !important;
  }
  .sidebar nav .mobile-tab-link .mobile-tab-icon {
    width: 20px !important;
    height: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #75a38b !important;
    font-size: 15px !important;
    text-align: center !important;
    border-radius: 0 !important;
    background: transparent !important;
    filter: none !important;
    transform: none !important;
    animation: none !important;
  }
  .sidebar nav .mobile-tab-link.active .mobile-tab-icon {
    color: #10b981 !important;
  }
  .sidebar nav .mobile-tab-link .mobile-tab-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    filter: none !important;
  }
  .sidebar nav .mobile-tab-link .mobile-tab-label {
    display: inline !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    animation: none !important;
    color: inherit !important;
  }
}
.sidebar nav button span{display:grid;place-items:center;color:#87b79e!important}.sidebar nav button svg{width:19px;height:19px;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.sidebar nav button.active span,.sidebar nav button:hover span{color:#8ff1bd!important}
.sidebar-bottom:not(:has(a:not([hidden]))){display:none}
.link-actions .link-action{width:38px;height:38px;border:1px solid rgba(11,48,29,.08);border-radius:12px;display:grid;place-items:center;color:#3d5147;background:linear-gradient(145deg,#fff,#f0f6f2);box-shadow:0 6px 16px rgba(12,52,31,.07),inset 0 1px 0 #fff;transition:transform .18s ease,color .18s ease,background .18s ease,box-shadow .18s ease}.link-actions .link-action svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.link-actions .link-action:hover{color:#087a45;background:linear-gradient(145deg,#ecfff4,#dff7e9);box-shadow:0 9px 22px rgba(18,174,96,.14),inset 0 1px 0 #fff;transform:translateY(-2px)}.link-actions .qr-action svg{fill:currentColor;stroke:none}.link-actions .delete-link:hover{color:#c33b3b!important;background:linear-gradient(145deg,#fff7f7,#ffe9e9)!important}
.analytics-panel{min-width:0;overflow:hidden}.analytics-filters{display:flex;align-items:center;gap:7px}.analytics-filters select,.analytics-filters input{width:auto;height:36px;padding:0 10px;border:1px solid rgba(10,45,27,.09);border-radius:10px;color:#43534b;background:rgba(255,255,255,.86);font-size:9px;font-weight:750}.analytics-chart-scroll{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#b5c8bd transparent}.analytics-chart-scroll .dashboard-chart,.analytics-chart-scroll .chart-labels{min-width:520px}.analytics-breakdowns{width:100%;min-width:0;margin-top:28px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.analytics-breakdowns>section{min-width:0;padding:16px;border:1px solid rgba(10,45,27,.07);border-radius:16px;background:rgba(248,252,249,.8)}.breakdown-head{margin-bottom:13px;display:grid;gap:2px}.breakdown-head span{font-size:10px;font-weight:800}.breakdown-head small{color:#8a978f;font-size:8px}.breakdown-list{min-width:0;display:grid;gap:10px}.breakdown-item{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px}.breakdown-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:9px;color:#087a45;background:#e5f7ed;font-size:12px;font-weight:900}.breakdown-item>div{min-width:0;display:grid;gap:5px}.breakdown-item strong{overflow:hidden;color:#405047;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.breakdown-item i{height:4px;overflow:hidden;border-radius:99px;background:#e2ebe5}.breakdown-item i b{height:100%;display:block;border-radius:inherit;background:linear-gradient(90deg,#1ed87e,#8ceebb)}.breakdown-item em{color:#66766e;font-size:9px;font-style:normal;font-weight:800}.breakdown-empty{padding:20px 4px;color:#8a978f;font-size:9px;text-align:center}.account-actions-panel{grid-column:1/-1}.account-actions-panel>p{max-width:470px;color:#7b8981;font-size:10px;line-height:1.6}.profile-logout-button{width:100%;margin-top:18px;padding:13px 14px;border:1px solid rgba(187,56,56,.12);border-radius:14px;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;color:#7f2929;background:linear-gradient(145deg,#fffafa,#fff0f0);cursor:pointer;text-align:left}.profile-logout-button>svg{width:20px;height:20px;padding:8px;box-sizing:content-box;border-radius:11px;background:#ffe0e0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.profile-logout-button span{display:grid;gap:2px}.profile-logout-button strong{font-size:10px}.profile-logout-button small{color:#a16c6c;font-size:8px}.profile-logout-button i{font-style:normal;font-weight:900}
@media (max-width:760px){
  body{padding-bottom:env(safe-area-inset-bottom)}
  .dashboard-main{width:100%!important;margin-left:0!important;padding:24px 14px calc(118px + env(safe-area-inset-bottom))}
  
  /* Mobile Bottom Dock - Clean, static 4-column bar (No slider, no logo) */
  .dash-brand,
  .sidebar .dash-brand,
  .sidebar-cloud-switch-card,
  .sidebar-admin-footer,
  .sidebar-bottom,
  .sidebar-arix-card {
    display: none !important;
  }

  .sidebar {
    position: fixed !important;
    z-index: 1200 !important;
    inset: auto 0 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    display: block !important;
    pointer-events: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
    transform: none !important;
    animation: none !important;
    overflow: visible !important;
  }

  .sidebar nav.mobile-tab-bar-inner {
    touch-action: none !important;
    pointer-events: auto !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 8px 10px max(12px, env(safe-area-inset-bottom, 10px)) !important;
    overflow: visible !important;
    background:
      linear-gradient(130deg, rgba(255, 255, 255, 0.92) 0%, rgba(248, 252, 250, 0.82) 54%, rgba(236, 253, 245, 0.88) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-bottom: 0 !important;
    border-radius: 26px 26px 0 0 !important;
    box-shadow:
      0 -8px 30px rgba(15, 23, 42, 0.08),
      0 12px 32px rgba(15, 23, 42, 0.08),
      inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
      inset 0 2px 6px rgba(255, 255, 255, 0.12),
      inset 1px 0 0 rgba(255, 255, 255, 0.3),
      inset -1px 0 0 rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(24px) saturate(160%) contrast(1.02) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) contrast(1.02) !important;
    transition: --glass-rim-angle 85ms linear !important;
  }

  .sidebar nav.mobile-tab-bar-inner::after {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    border-radius: inherit !important;
    padding: 1px !important;
    content: '' !important;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.05) 35%, rgba(221, 239, 255, 0.2) 65%, rgba(255, 255, 255, 0.35)) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
  }

  .mobile-glass-track {
    position: absolute !important;
    top: 8px !important;
    bottom: max(12px, env(safe-area-inset-bottom, 10px)) !important;
    left: 10px !important;
    right: 10px !important;
    pointer-events: none !important;
    z-index: 1 !important;
    display: block !important;
  }

  .mobile-glass-selection {
    display: block !important;
    width: calc((100% - 12px) / 4) !important;
    height: 100% !important;
    position: relative !important;
    transform: translateX(calc(var(--mobile-active-index, 0) * (100% + 4px))) !important;
    transition: transform 250ms cubic-bezier(0.22, 0.72, 0.24, 1) !important;
    will-change: transform !important;
  }

  .mobile-tab-bar-inner[data-pressing='true'],
  .mobile-tab-bar-inner:active {
    --mobile-active-scale-x: 1.08 !important;
    --mobile-active-scale-y: 1.08 !important;
    --mobile-active-lift-y: -3px !important;
  }

  .mobile-glass-lens {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 999px !important;
    display: block !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.44) 54%, rgba(236, 253, 245, 0.62) 100%) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95) !important;
    box-shadow:
      0 6px 18px rgba(5, 150, 105, 0.16),
      0 2px 5px rgba(15, 23, 42, 0.05),
      inset 0 2px 2px rgba(255, 255, 255, 0.98),
      inset 0 -2px 3px rgba(5, 150, 105, 0.12),
      inset 1.5px 0 2px rgba(255, 255, 255, 0.8),
      inset -1.5px 0 2px rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(14px) saturate(170%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(170%) !important;
    transform: translate3d(0, var(--mobile-active-lift-y, 0px), 0) scale(var(--mobile-active-scale-x, 1), var(--mobile-active-scale-y, 1)) !important;
    transform-origin: center !important;
    transition: transform 230ms cubic-bezier(0.2, 0.78, 0.22, 1), background 190ms ease, box-shadow 190ms ease !important;
    will-change: transform !important;
    backface-visibility: hidden !important;
  }

  .mobile-tab-bar-inner[data-pressing='true'] .mobile-glass-lens {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.48) 56%, rgba(236, 253, 245, 0.68)) !important;
  }

  .mobile-glass-lens::before {
    position: absolute !important;
    z-index: 3 !important;
    inset: 0 !important;
    padding: 1.5px !important;
    border-radius: inherit !important;
    content: '' !important;
    background: conic-gradient(from var(--glass-rim-angle, 120deg), rgba(213, 224, 239, 0.2), rgba(255, 255, 255, 0.95), rgba(16, 185, 129, 0.45), rgba(255, 255, 255, 0.35), rgba(250, 252, 255, 0.9), rgba(205, 216, 232, 0.3), rgba(213, 224, 239, 0.2)) !important;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    -webkit-mask-composite: xor !important;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
    mask-composite: exclude !important;
    pointer-events: none !important;
  }

  .mobile-tab-bar-inner[data-dragging='true'] .mobile-glass-selection {
    transition: none !important;
  }

  .mobile-tab-bar-inner[data-pressing='true'] .mobile-glass-lens,
  .mobile-tab-bar-inner:active .mobile-glass-lens {
    transition-duration: 130ms !important;
    transition-timing-function: cubic-bezier(0.22, 0.72, 0.24, 1) !important;
  }

  .mobile-tab-bar-inner[data-dragging='true'] .mobile-glass-lens {
    transition: none !important;
  }

  .mobile-tab-color-overlay {
    display: none !important;
  }

  .sidebar nav .mobile-tab-link {
    grid-row: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 4px 2px !important;
    color: #0f172a !important;
    text-decoration: none !important;
    border-radius: 999px !important;
    pointer-events: auto !important;
    position: relative !important;
    z-index: 3 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    transition: color 130ms cubic-bezier(0.22, 0.8, 0.28, 1) !important;
    will-change: color !important;
    -webkit-tap-highlight-color: transparent !important;
  }


  .sidebar nav .mobile-tab-icon {
    width: 24px !important;
    height: 24px !important;
    display: grid !important;
    color: currentColor !important;
    border-radius: 50% !important;
    place-items: center !important;
    transition:
      color 130ms cubic-bezier(0.22, 0.8, 0.28, 1),
      transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }

  .sidebar nav .mobile-tab-icon svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.1 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.08)) !important;
  }

  .sidebar nav .mobile-tab-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    margin-top: 4px !important;
    color: inherit !important;
    transition: color 130ms ease !important;
  }

  .sidebar nav .mobile-tab-link.active {
    color: #059669 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .sidebar nav .mobile-tab-link.active .mobile-tab-label {
    color: #059669 !important;
    font-weight: 800 !important;
    animation: mobile-nav-green-shift 460ms cubic-bezier(0.22, 0.8, 0.28, 1) both !important;
  }

  .sidebar nav .mobile-tab-link.active .mobile-tab-icon {
    color: #059669 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
    animation: mobile-nav-green-glow 460ms cubic-bezier(0.22, 0.8, 0.28, 1) both !important;
  }

  /* Solid filled WhatsApp Green Home icon with crisp white door */
  .sidebar nav .mobile-tab-link.active[data-view-button="overview"] svg path:first-child {
    fill: #059669 !important;
    stroke: #059669 !important;
  }

  .sidebar nav .mobile-tab-link.active[data-view-button="overview"] svg path:last-child {
    stroke: #ffffff !important;
    fill: #ffffff !important;
    stroke-width: 1.6 !important;
  }

  .sidebar nav .mobile-tab-link.active .mobile-tab-icon svg {
    filter: none !important;
  }

  .sidebar nav .mobile-tab-link:active {
    transform: none !important;
  }

  .sidebar nav .mobile-tab-link:active .mobile-tab-icon {
    transform: none !important;
  }

  .sidebar nav .mobile-tab-link:focus-visible {
    outline: 2px solid #059669 !important;
    outline-offset: 2px !important;
  }
  .link-actions{padding-left:0!important;gap:8px;overflow-x:auto;scrollbar-width:none}.link-actions::-webkit-scrollbar{display:none}.link-actions .link-action{width:42px;height:42px;flex:0 0 42px;border-radius:14px}.link-actions .link-action svg{width:18px;height:18px}
  .dash-header{padding:0 3px}.dash-header h1{line-height:1.04}.verification-banner{margin-top:22px;border-radius:18px}.stats-grid article,.panel,.links-section,.settings-section{border-radius:22px}.link-card{border-radius:17px}.edit-modal{max-height:calc(100dvh - 28px);overflow:auto}
  .dash-toast{right:50%;bottom:calc(100px + env(safe-area-inset-bottom));transform:translate(50%,10px);white-space:nowrap}.dash-toast.show{transform:translate(50%,0)}

  /* Admin mobile dock */
  body:has(.admin-panel) aside{
    width:calc(100% - 24px);height:68px;left:12px;bottom:calc(10px + env(safe-area-inset-bottom));padding:7px;gap:6px;
    border:1px solid rgba(255,255,255,.75);border-radius:24px;background:rgba(244,250,246,.72);box-shadow:0 18px 50px rgba(3,25,13,.2);backdrop-filter:blur(26px) saturate(170%);-webkit-backdrop-filter:blur(26px) saturate(170%)
  }
  body:has(.admin-panel) aside button{height:100%;border-radius:17px;color:#607068;text-align:center}
  body:has(.admin-panel) aside button.active{color:#062b18;background:rgba(30,216,126,.72)}
}

@media (max-width:580px){
  .hero{text-align:left!important}.hero h1{font-size:clamp(45px,13vw,58px);text-align:left!important}.hero-copy{min-width:0;text-align:left!important}.hero-copy *{text-align:left!important}.hero-lede{text-align:left!important;margin-inline:0!important}.claim-input-wrap{overflow:hidden}.claim-input-wrap input{min-width:0}.legal-page{margin-top:55px}.legal-page h1{font-size:44px}.action-card{padding:34px 26px;border-radius:26px}.action-card h1{font-size:30px}.footer-links{gap:30px 20px}
  .modal-backdrop{padding:12px 10px;display:flex!important;align-items:center!important;justify-content:center!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;background:radial-gradient(circle at 50% 0,rgba(30,216,126,.22),transparent 38%),rgba(2,12,7,.82);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
  .login-modal{width:100%;max-width:440px;height:auto;max-height:calc(100dvh - 24px);max-height:calc(100svh - 24px);margin:auto;display:flex!important;flex-direction:column!important;grid-template-columns:1fr;overflow:hidden;border:1px solid rgba(255,255,255,.66);border-radius:26px;transform:none!important;box-shadow:0 28px 90px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.9)}
  .modal-backdrop.open .login-modal{transform:none!important}
  .login-modal::before{display:none}.auth-showcase{display:none!important}.auth-panel{flex:1 1 auto!important;min-height:0!important;max-height:100%!important;padding:22px 18px calc(22px + env(safe-area-inset-bottom));overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior:contain!important;scrollbar-width:thin;background:linear-gradient(160deg,#fbfdfb,#f0f6f2)}.auth-mobile-brand{margin:0 45px 18px 0;display:flex}.auth-mobile-brand .brand-mark{width:40px;height:40px;border-radius:13px}.auth-mobile-brand>div{display:grid;gap:2px}.auth-mobile-brand>div>small{color:#849189;font-size:8px;text-align:left}.auth-tabs{margin-bottom:18px;padding:4px;border:1px solid rgba(8,39,22,.06);border-radius:14px;background:#e7eee9}.auth-tabs button{min-height:42px;border-radius:11px;font-size:11px}.auth-heading{margin-bottom:15px}.auth-heading>span{margin-bottom:6px}.auth-heading h2{font-size:21px;line-height:1.15;letter-spacing:-.03em}.auth-heading p{font-size:11px}.auth-form label{margin-top:10px;font-size:10px}.auth-input{min-height:52px;height:52px;padding:4px 6px 4px 5px!important;border-radius:15px;overflow:hidden!important;box-shadow:0 7px 18px rgba(10,45,27,.045),inset 0 1px 0 #fff}.auth-input>span{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;flex:0 0 40px!important;border-radius:11px;margin:0!important}.login-modal .auth-input input{height:100%!important;font-size:14px;padding:0 6px!important}.password-toggle{min-width:52px;height:38px;margin-right:2px;border-radius:10px;background:#edf8f2}.forgot-link{width:100%;margin-top:10px;padding:8px;border:1px solid rgba(8,39,22,.08);border-radius:10px;background:rgba(255,255,255,.64);text-align:center}.modal-submit{min-height:50px;margin:15px 0 10px;border-radius:14px;font-size:12.5px;box-shadow:0 12px 27px rgba(20,190,105,.22);flex-shrink:0}.modal-close{top:15px;right:15px;width:36px;height:36px;background:#edf3ef}.auth-intent{margin:-7px 0 15px;border-radius:13px}.auth-legal{padding-bottom:2px}.auth-mobile-points{margin-top:9px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.auth-mobile-points span{padding:6px 8px;border-radius:999px;color:#547064;background:#e7f5ed;font-size:7px;font-weight:800}
  .analytics-filters{width:100%;margin-top:12px;display:grid;grid-template-columns:1fr 1.4fr}.analytics-filters select,.analytics-filters input{width:100%;height:42px}.analytics-panel .panel-head{display:block}.analytics-chart-scroll .dashboard-chart,.analytics-chart-scroll .chart-labels{min-width:620px}.analytics-breakdowns{grid-template-columns:1fr}.account-actions-panel{grid-column:auto}
}

@media (min-width:581px) and (max-height:720px){
  .login-modal{height:calc(100dvh - 30px)}.auth-panel{padding-top:31px}.auth-showcase{padding:31px}.auth-showcase-copy{margin-top:auto}.auth-heading{margin-bottom:18px}.auth-form label{margin-top:10px}.modal-submit{margin-top:15px}
}

@media (prefers-reduced-transparency:reduce){
  .sidebar,.panel,.stats-grid article,.links-section,.settings-section,.action-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}

/* ==========================================================================
   INTERACTIVE CURSOR GLOW & CARD SPOTLIGHT SYSTEM
   ========================================================================== */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 440px;
  height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 176, 80, 0.22) 0%, rgba(30, 216, 126, 0.12) 32%, rgba(30, 216, 126, 0.04) 55%, transparent 70%);
  pointer-events: none;
  z-index: 99999;
  transform: translate3d(-1000px, -1000px, 0);
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: transform;
}

@media (max-width: 820px) {
  .cursor-glow {
    display: none !important;
  }
}

/* Dynamic Card Spotlight illumination */
.what-is-card,
.feature-card,
.phone-card,
.price-card,
.mini-analytics,
.stats-grid article {
  position: relative;
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}

.what-is-card::after,
.feature-card::after,
.price-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.5px;
  background: radial-gradient(320px circle at var(--spot-x, -500px) var(--spot-y, -500px), rgba(0, 176, 80, 0.4), transparent 65%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
}

.what-is-card:hover::after,
.feature-card:hover::after,
.price-card:hover::after {
  opacity: 1;
}

/* Navigation Badge Pill */
.nav-badge-pill {
  font-size: 9px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #10b965, #00b050) !important;
  color: #ffffff !important;
  padding: 2px 7px !important;
  border-radius: 99px !important;
  letter-spacing: 0.4px !important;
  text-transform: uppercase !important;
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1.1 !important;
  box-shadow: 0 2px 6px rgba(16, 185, 101, 0.35) !important;
  vertical-align: middle !important;
}
.mobile-menu a .nav-badge-pill {
  margin-left: 10px !important;
  font-size: 11px !important;
  padding: 3px 9px !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   SOCIAL AUTHENTICATION & SMART 1-CLICK AUTO-LOGIN
   ========================================================================== */
.social-auth-group {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 14px 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.social-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  flex: 1 1 0px !important;
  width: 0 !important;
  min-width: 0 !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 16px !important;
  border-radius: 13px !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-sizing: border-box !important;
  background: #ffffff !important;
  border: 1px solid #d9e2dc !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff !important;
  color: #1a2820 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
.social-btn svg {
  display: block;
  flex-shrink: 0;
}
.social-btn:hover,
.social-btn:focus-visible {
  background: #f4f8f5 !important;
  border-color: #b5cbbe !important;
  color: #07110d !important;
  box-shadow: 0 4px 14px rgba(10, 45, 27, 0.08) !important;
  transform: translateY(-1px);
}
.social-btn:active {
  transform: scale(0.98);
}

/* ==========================================================================
   DYNAMIC CLOUD API THEME FOR AUTH MODAL (PREMIUM HIGH-TECH STYLING)
   ========================================================================== */
.login-modal[data-auth-context="cloud"] .auth-showcase {
  padding: 36px 32px 30px;
  background: radial-gradient(circle at 85% 12%, rgba(16, 185, 129, 0.45), transparent 32%),
              radial-gradient(circle at 10% 88%, rgba(5, 150, 105, 0.3), transparent 38%),
              linear-gradient(155deg, #020c06 0%, #051e13 55%, #0a301e 100%);
  border-right: 1px solid rgba(52, 211, 153, 0.15);
}

.login-modal[data-auth-context="cloud"] .auth-brand strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.login-modal[data-auth-context="cloud"] #auth-brand-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(52, 211, 153, 0.38);
  color: #34d399;
  font-size: 10px;
  font-weight: 800;
  font-style: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.login-modal[data-auth-context="cloud"] #auth-showcase-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6ee7b7;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: 10px;
}

.login-modal[data-auth-context="cloud"] .auth-showcase-copy h2 {
  font: 800 clamp(24px, 2.3vw, 29px)/1.12 "Manrope", sans-serif;
  letter-spacing: -0.045em;
  color: #ffffff;
  margin: 0 0 12px;
  word-break: normal;
  hyphens: none;
}

.login-modal[data-auth-context="cloud"] .auth-showcase-copy p {
  color: #9db2a7;
  font-size: 12px;
  line-height: 1.62;
  margin: 0;
  max-width: 290px;
}

.login-modal[data-auth-context="cloud"] .auth-benefits {
  margin: 22px 0 20px;
  display: grid;
  gap: 11px;
}

.login-modal[data-auth-context="cloud"] .auth-benefits span {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #d1fae5;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.login-modal[data-auth-context="cloud"] .auth-benefits i {
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #10b981;
  color: #021a10;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(16, 185, 129, 0.32);
}

.login-modal[data-auth-context="cloud"] .auth-mini-card {
  margin-top: auto;
  padding: 13px 15px;
  border: 1px solid rgba(52, 211, 153, 0.22);
  border-radius: 16px;
  background: rgba(3, 20, 12, 0.68);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 6px;
}

.login-modal[data-auth-context="cloud"] .auth-mini-card small {
  color: #6ee7b7;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.login-modal[data-auth-context="cloud"] .auth-mini-card strong {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(52, 211, 153, 0.16);
  color: #f0fdf4;
  font-family: 'JetBrains Mono', monospace, sans-serif;
  font-size: 11px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.login-modal[data-auth-context="cloud"] .auth-mini-card strong::before {
  content: "POST";
  display: inline-block;
  font-size: 8px;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.18);
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.login-modal[data-auth-context="cloud"] .auth-mini-card > span {
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #a7f3d0;
  font-size: 9px;
  font-weight: 600;
}

.login-modal[data-auth-context="cloud"] .auth-mini-card > span i {
  width: 7px;
  height: 7px;
  min-width: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28);
  animation: cloudPulse 2s infinite ease-in-out;
}

@keyframes cloudPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.28); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1); }
}

/* Auth Divider */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 12px 0 14px;
  color: #798a81;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #dce4df;
}
.auth-divider span {
  padding: 0 10px;
}

/* Smart Remembered Account / Continue Card */
.remembered-account-card {
  margin: 12px 0 16px;
  padding: 16px 18px;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeInDown 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.remembered-google-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  padding: 4px 10px;
  border-radius: 20px;
  width: fit-content;
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}
.remembered-account-info {
  display: flex;
  align-items: center;
  gap: 14px;
}
.remembered-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.remembered-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10b965, #059669);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 2px solid #ffffff;
  flex-shrink: 0;
}
.remembered-avatar .avatar-fallback {
  position: relative;
  z-index: 1;
  font-size: 19px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  text-transform: uppercase;
  user-select: none;
}
.remembered-avatar img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
  border-radius: 50%;
  background: #ffffff;
  display: block;
}
.avatar-google-mini {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e2e8f0;
  z-index: 3;
}
.remembered-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}
.remembered-details strong {
  font-size: 15px;
  color: #0f172a;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.remembered-details small {
  font-size: 12.5px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.smart-continue-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 18px;
  background: #0f172a;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 700;
  border: none;
  border-radius: 13px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}
.smart-continue-btn:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.smart-continue-btn svg {
  flex-shrink: 0;
}
.smart-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.smart-switch-link {
  background: none;
  border: none;
  color: #64748b;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.15s ease;
  text-decoration: none;
}
.smart-switch-link:hover {
  color: #0f172a;
  background: #f1f5f9;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .remembered-account-card,
  #smart-remembered-card {
    display: none !important;
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* AI Certificate Laser Scanner - Universal Desktop & Mobile Hardware Acceleration */
@keyframes laserScanAnimation {
  0% {
    top: 4px;
    opacity: 0.85;
  }
  50% {
    top: calc(100% - 8px);
    opacity: 1;
  }
  100% {
    top: 4px;
    opacity: 0.85;
  }
}

@-webkit-keyframes laserScanAnimation {
  0% {
    top: 4px;
    opacity: 0.85;
  }
  50% {
    top: calc(100% - 8px);
    opacity: 1;
  }
  100% {
    top: 4px;
    opacity: 0.85;
  }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.2), inset 0 0 12px rgba(16, 185, 129, 0.05); }
  50% { box-shadow: 0 0 25px rgba(16, 185, 129, 0.45), inset 0 0 18px rgba(16, 185, 129, 0.12); }
}

.ai-scanner-active {
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid #10b981 !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(6, 78, 59, 0.04) 0%, rgba(16, 185, 129, 0.08) 100%) !important;
  animation: pulseGlow 2s infinite ease-in-out !important;
}

.ai-laser-beam {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, transparent 0%, rgba(16, 185, 129, 0.5) 15%, #10b981 50%, #34d399 75%, transparent 100%) !important;
  box-shadow: 0 0 15px 4px rgba(16, 185, 129, 0.9), 0 0 30px 6px rgba(52, 211, 153, 0.6) !important;
  animation: laserScanAnimation 1.5s ease-in-out infinite !important;
  -webkit-animation: laserScanAnimation 1.5s ease-in-out infinite !important;
  z-index: 25 !important;
  pointer-events: none !important;
  will-change: top !important;
  display: block !important;
}

.ai-laser-beam[hidden] {
  display: none !important;
}

.ai-scanner-grid-overlay {
  position: absolute;
  inset: 0;
  background-size: 16px 16px;
  background-image: 
    linear-gradient(to right, rgba(16, 185, 129, 0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(16, 185, 129, 0.08) 1px, transparent 1px);
  pointer-events: none;
  z-index: 2;
}

.ai-scan-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
  transition: all 0.3s ease;
}

.ai-scan-status-badge.scanning {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.ai-scan-status-badge.verified {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #10b981;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.ai-scan-status-badge.error {
  background: #fef2f2 !important;
  color: #b91c1c !important;
  border: 1px solid #ef4444 !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2) !important;
}

/* ==========================================================================
   META CLOUD API ONBOARDING WIZARD MODAL COMPONENT (GLOBAL)
   ========================================================= */
#cloud-onboarding-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: rgba(8, 20, 14, 0.82) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

#cloud-onboarding-modal[hidden] {
  display: none !important;
}

.cloud-modal-card {
  max-width: 660px !important;
  width: 100% !important;
  background: #ffffff !important;
  color: #07110d !important;
  border-radius: 22px !important;
  padding: 20px 24px !important;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  position: relative !important;
  max-height: 94vh !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  z-index: 1000000 !important;
  text-align: left !important;
}

.cloud-modal-card h2,
.cloud-modal-card h3,
.cloud-modal-card h4,
.cloud-modal-card label,
.cloud-modal-card strong {
  color: #0d2818 !important;
}

.cloud-modal-card .auth-close-button {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
  font-size: 20px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  z-index: 10 !important;
}

.cloud-modal-card .auth-close-button:hover {
  background: #e2e8f0 !important;
  color: #000000 !important;
  transform: scale(1.05) !important;
}

.cloud-modal-card .auth-input {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  min-height: 46px !important;
  padding: 0 12px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

.cloud-modal-card .auth-input > span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #64748b !important;
  margin-right: 6px !important;
}

.cloud-modal-card .auth-input:focus-within {
  border-color: #10b965 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 101, 0.15) !important;
  background: #ffffff !important;
}

.cloud-modal-card .auth-input:focus-within > span {
  color: #10b965 !important;
}

.cloud-modal-card .auth-input input,
.cloud-modal-card input[type="text"],
.cloud-modal-card input[type="email"],
.cloud-modal-card input[type="tel"],
.cloud-modal-card input[type="url"],
.cloud-modal-card input[type="password"] {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  color: #07110d !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 10px 4px !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
}

.cloud-modal-card select {
  background: #ffffff !important;
  border: 1.5px solid #cbd5e1 !important;
  border-radius: 12px !important;
  color: #07110d !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
  padding: 12px 14px !important;
  width: 100% !important;
}

.cloud-modal-card select:focus {
  border-color: #10b965 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 101, 0.15) !important;
}

.wizard-nav-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 20px !important;
  width: 100% !important;
}

.wizard-btn-back {
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 20px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1.5px solid #cbd5e1 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.2s ease !important;
  flex: 0 0 auto !important;
  min-width: 100px !important;
  margin: 0 !important;
  line-height: 1 !important;
}

.wizard-btn-back:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
  color: #000000 !important;
  transform: translateY(-1px) !important;
}

.wizard-btn-next {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 24px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  flex: 1 1 auto !important;
  margin: 0 !important;
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  letter-spacing: -0.2px !important;
  line-height: 1 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.wizard-btn-next:hover:not(:disabled) {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 28px rgba(16, 185, 129, 0.4) !important;
}

.wizard-btn-next:active:not(:disabled) {
  transform: translateY(0) scale(0.99) !important;
}

.wizard-btn-submit {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35) !important;
}

.wizard-btn-submit:hover:not(:disabled) {
  background: linear-gradient(135deg, #047857 0%, #059669 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 30px rgba(16, 185, 129, 0.45) !important;
}

.modal-choice-cards {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}

@media (max-width: 600px) {
  .modal-choice-cards {
    grid-template-columns: 1fr !important;
  }
}

.choice-card-option {
  border: 1.5px solid #e2e8f0 !important;
  background: #f8fafc !important;
  border-radius: 14px !important;
  padding: 14px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.choice-card-option:hover {
  border-color: #10b965 !important;
  background: #f0fdf4 !important;
}

.choice-card-option input[type="radio"] {
  margin-top: 3px !important;
  accent-color: #10b965 !important;
  cursor: pointer !important;
}

.meta-billing-box {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 18px !important;
  padding: 14px 16px !important;
  margin-bottom: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* 3D REALISTIC INTERACTIVE FLIP CREDIT CARD */
.flip-card-wrapper {
  perspective: 1200px !important;
  -webkit-perspective: 1200px !important;
  width: 100% !important;
  max-width: 320px !important;
  margin: 0 auto 12px !important;
  height: 195px !important;
  position: relative !important;
}

.flip-card-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  text-align: left !important;
  transition: transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important;
  -webkit-transition: -webkit-transform 0.65s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform-style: preserve-3d !important;
  -webkit-transform-style: preserve-3d !important;
  border-radius: 16px !important;
}

.flip-card-inner.flipped {
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
}

.card-face {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  background-color: #064e3b !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Front Face */
.card-face-front {
  background-color: #064e3b !important;
  background: radial-gradient(circle at 85% 15%, #15803d 0%, #064e3b 40%, #022c22 100%) !important;
  border: 1.5px solid rgba(110, 231, 183, 0.4) !important;
  box-shadow: 0 16px 36px rgba(2, 44, 34, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.4) !important;
  color: #ffffff !important;
  padding: 16px 18px !important;
  transform: rotateY(0deg) !important;
  -webkit-transform: rotateY(0deg) !important;
  z-index: 2 !important;
}

.card-glass-sheen {
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 60%) !important;
  pointer-events: none !important;
  transform: rotate(25deg) !important;
}

.card-top-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-chip-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.emv-chip {
  width: 38px !important;
  height: 27px !important;
  background: linear-gradient(135deg, #ffd700 0%, #d4af37 40%, #ffea70 70%, #aa8010 100%) !important;
  border: 1px solid #997300 !important;
  border-radius: 5px !important;
  position: relative !important;
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.emv-chip-line {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  height: 1px !important;
  background: rgba(0, 0, 0, 0.25) !important;
  transform: translateY(-50%) !important;
}

.card-partner-brand {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  background: rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #a7f3d0 !important;
  letter-spacing: 0.3px !important;
}

.card-number-display {
  font-family: 'DM Mono', monospace, courier !important;
  font-size: 16.5px !important;
  font-weight: 700 !important;
  letter-spacing: 2.2px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.6) !important;
  margin: 4px 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-bottom-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  position: relative !important;
  z-index: 2 !important;
}

.card-holder-col, .card-exp-col {
  display: flex !important;
  flex-direction: column !important;
}

.card-holder-col .card-label, .card-exp-col .card-label {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #6ee7b7 !important;
  letter-spacing: 0.9px !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
  display: block !important;
}

.card-face,
.card-face *:not(.card-cvv-box):not(#card-preview-cvv),
.card-face strong:not(.card-cvv-box):not(#card-preview-cvv),
.card-face small,
.card-face span:not(.card-cvv-box):not(#card-preview-cvv) {
  color: #ffffff !important;
}

.card-holder-col strong,
.card-holder-col #card-preview-name,
#card-preview-name {
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.4) !important;
  display: block !important;
  max-width: 145px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-exp-col strong,
.card-exp-col #card-preview-exp,
#card-preview-exp {
  font-family: 'DM Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 1px rgba(255, 255, 255, 0.4) !important;
  display: block !important;
}

.card-bank-badge {
  font-family: 'Plus Jakarta Sans', 'Manrope', sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 1px rgba(255, 255, 255, 0.5) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  max-width: 150px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.card-holo-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 4px !important;
}

.hologram-seal-wrapper {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0 0 2px rgba(255, 255, 255, 0.8) !important;
  border: 0.5px solid rgba(255, 255, 255, 0.6) !important;
}

.card-detected-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #047857 !important;
  background: #ecfdf5 !important;
  border: 1px solid #a7f3d0 !important;
  border-radius: 8px !important;
  padding: 4px 10px !important;
  margin-top: 6px !important;
}

.card-preview-logo-slot {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  min-width: 44px !important;
}

/* Back Face */
.card-face-back {
  background-color: #064e3b !important;
  background: radial-gradient(circle at 20% 80%, #15803d 0%, #064e3b 45%, #022c22 100%) !important;
  border: 1.5px solid rgba(110, 231, 183, 0.4) !important;
  box-shadow: 0 16px 36px rgba(2, 44, 34, 0.45), inset 0 1px 1.5px rgba(255, 255, 255, 0.4) !important;
  transform: rotateY(180deg) !important;
  -webkit-transform: rotateY(180deg) !important;
  padding: 0 !important;
  color: #ffffff !important;
  z-index: 1 !important;
}

.card-mag-stripe {
  width: 100% !important;
  height: 38px !important;
  background: linear-gradient(180deg, #18181b 0%, #09090b 100%) !important;
  margin-top: 16px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8) !important;
}

.card-cvv-section {
  padding: 10px 18px 0 !important;
}

.cvv-label {
  font-size: 8px !important;
  font-weight: 800 !important;
  color: #a7f3d0 !important;
  letter-spacing: 0.8px !important;
  text-transform: uppercase !important;
  display: block !important;
  margin-bottom: 3px !important;
  text-align: right !important;
}

.card-signature-bar {
  display: flex !important;
  align-items: center !important;
  background: #f1f5f9 !important;
  border-radius: 4px !important;
  height: 28px !important;
  overflow: hidden !important;
}

.sig-lines {
  flex: 1 1 auto !important;
  height: 100% !important;
  background: repeating-linear-gradient(45deg, #e2e8f0, #e2e8f0 4px, #f8fafc 4px, #f8fafc 8px) !important;
}

.card-signature-bar .card-cvv-box,
.card-cvv-box,
#card-preview-cvv {
  background: #ffffff !important;
  color: #000000 !important;
  -webkit-text-fill-color: #000000 !important;
  font-family: 'DM Mono', monospace !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  padding: 0 12px !important;
  min-width: 48px !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: 2.5px !important;
  border-left: 1.5px solid #cbd5e1 !important;
  font-style: italic !important;
  text-shadow: none !important;
}

.cvv-toggle-eye {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  padding: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  color: #64748b !important;
  border-radius: 6px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  z-index: 5 !important;
  outline: none !important;
}

.cvv-toggle-eye:hover {
  color: #0b9e58 !important;
  background: rgba(11, 158, 88, 0.08) !important;
}

.cvv-toggle-eye:focus-visible {
  box-shadow: 0 0 0 2px rgba(11, 158, 88, 0.3) !important;
}

.card-back-footer {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 18px 14px !important;
}

.card-back-disclaimer {
  font-size: 7.5px !important;
  color: #a7f3d0 !important;
  max-width: 190px !important;
  line-height: 1.35 !important;
  opacity: 0.9 !important;
}

/* Payment Networks Ribbon */
.brand-selector-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.brand-badges-group {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.brand-pill {
  background: #ffffff !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s ease !important;
}

.brand-pill.active {
  border-color: #10b965 !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 2px rgba(16, 185, 101, 0.25) !important;
  transform: translateY(-1px) !important;
}

/* ₹1 VERIFICATION GUARANTEE NOTE */
.card-verify-guarantee-box {
  background: #f0fdf4 !important;
  border: 1.5px solid #bbf7d0 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
  text-align: left !important;
}

.guarantee-header {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #166534 !important;
  margin-bottom: 3px !important;
}

.card-verify-guarantee-box p {
  font-size: 11.5px !important;
  color: #15803d !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.card-verify-guarantee-box strong {
  color: #14532d !important;
}

.trust-footer {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin-top: 12px !important;
  padding-top: 10px !important;
  border-top: 1px solid #e2e8f0 !important;
}

.trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #475569 !important;
}

.wizard-header-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(37, 211, 102, 0.12) !important;
  border: 1px solid rgba(37, 211, 102, 0.3) !important;
  padding: 5px 14px !important;
  border-radius: 99px !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  color: #103e2a !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.wizard-step-tracker {
  display: flex !important;
  gap: 6px !important;
  margin: 16px 0 24px !important;
}

.wizard-tracker-bar {
  flex: 1 !important;
  height: 5px !important;
  border-radius: 99px !important;
  background: rgba(10, 20, 16, 0.1) !important;
  transition: all 0.35s ease !important;
}

.wizard-tracker-bar.active {
  background: #25D366 !important;
  box-shadow: 0 0 10px rgba(37, 211, 102, 0.5) !important;
}

.modal-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

@media (max-width: 600px) {
  .modal-grid-2 {
    grid-template-columns: 1fr !important;
  }
}

/* WIZARD FLOATING TOAST NOTIFICATION */
.wizard-toast {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  border-radius: 14px !important;
  margin-bottom: 16px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  animation: toastSlideDown 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}

.wizard-toast[hidden],
.wizard-toast.hidden,
#cloud-wizard-toast[hidden] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@keyframes toastSlideDown {
  0% { transform: translateY(-12px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

.wizard-toast.error {
  background: #fef2f2 !important;
  border: 1.5px solid #ef4444 !important;
  color: #991b1b !important;
}

.wizard-toast.success {
  background: #f0fdf4 !important;
  border: 1.5px solid #22c55e !important;
  color: #166534 !important;
}

.wizard-toast-body {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
}

.wizard-toast-close {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  padding: 2px 6px !important;
  border-radius: 6px !important;
  opacity: 0.7 !important;
  transition: opacity 0.15s ease !important;
}
.wizard-toast-close:hover {
  opacity: 1 !important;
}

/* DROPZONE DRAG & DROP ACTIVE STATES */
#cert-dropzone.dropzone-dragover {
  border-color: #10b965 !important;
  background: #ecfdf5 !important;
  transform: scale(1.02) !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.35), inset 0 0 16px rgba(16, 185, 129, 0.15) !important;
}

/* INPUT VALIDATION STATE CLASSES */
.auth-input.input-has-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.auth-input.input-has-success {
  border-color: #10b965 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 101, 0.15) !important;
}

.country-flag-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  padding: 3px 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #1e293b !important;
}

/* SEQUENTIAL PROGRESSIVE FIELD LOCK STATES */
.cloud-modal-card .auth-input.field-locked,
.cloud-modal-card .auth-input:has(input:disabled) {
  background: #f8fafc !important;
  border-color: rgba(203, 213, 225, 0.7) !important;
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
  filter: grayscale(0.2);
  transition: all 0.2s ease;
}

.cloud-modal-card .auth-input.field-locked input,
.cloud-modal-card .auth-input input:disabled {
  cursor: not-allowed !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
  user-select: none !important;
}

.cloud-modal-card .auth-input.field-locked > span,
.cloud-modal-card .auth-input:has(input:disabled) > span {
  color: #94a3b8 !important;
}

.cloud-modal-card .auth-input.field-unlocked {
  background: #ffffff !important;
  opacity: 1 !important;
  cursor: text !important;
  transition: all 0.25s ease-out;
}

.cloud-modal-card select:disabled,
.cloud-modal-card select.field-locked {
  background: #f8fafc !important;
  border-color: rgba(203, 213, 225, 0.7) !important;
  opacity: 0.52 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  color: #94a3b8 !important;
  box-shadow: none !important;
  user-select: none !important;
}

.wizard-btn-submit:disabled,
#btn-submit-cloud-api:disabled,
.cloud-modal-card .wizard-btn-next:disabled,
.wizard-btn-next:disabled {
  background: #e2e8f0 !important;
  color: #94a3b8 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
  filter: none !important;
}

/* ==========================================================================
   WA LINK PRO CLOUD DASHBOARD — 100% MOBILE RESPONSIVE ENGINE
   ========================================================================== */

/* Mobile Backdrop for Sidebar */
.sidebar-mobile-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 95;
  display: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.sidebar-mobile-backdrop.show {
  display: block;
  opacity: 1;
}

@media (max-width: 900px) {
  .dashboard-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .dash-stream,
  .dash-sidebar-col {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  body.waba-body {
    overflow-x: hidden !important;
    width: 100vw !important;
    max-width: 100vw !important;
  }

  .waba-layout {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .waba-main {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
    flex: 1 1 auto !important;
  }

  .waba-content {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 10px 8px 60px !important;
  }

  .view-panel {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Sidebar Mobile Drawer */
  .waba-sidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -280px !important;
    width: 270px !important;
    min-width: 270px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 9999 !important;
    box-shadow: 10px 0 30px rgba(0, 0, 0, 0.4) !important;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), left 0.28s ease !important;
  }

  .waba-sidebar.open {
    left: 0 !important;
  }

  /* Top Navigation Bar */
  .waba-topbar {
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 14px !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }

  .mobile-topbar-apply-btn {
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }

  .topbar-left {
    gap: 6px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .sidebar-toggle-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
  }

  .project-selector-dropdown {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }

  .project-selector-dropdown .project-label {
    display: none !important;
  }

  .project-btn {
    padding: 4px 6px !important;
    font-size: 11px !important;
    max-width: 115px !important;
    min-width: 0 !important;
    gap: 4px !important;
  }

  .project-btn strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 75px;
    display: inline-block;
  }

  .api-status-badge {
    padding: 3px 6px !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
    gap: 4px !important;
  }

  .api-status-badge span:not(.status-dot) {
    display: none !important;
  }

  .api-status-badge .status-action-link {
    font-size: 9.5px !important;
    padding: 2px 5px !important;
    font-weight: 800 !important;
  }

  .topbar-right {
    gap: 5px !important;
    flex-shrink: 0 !important;
  }

  .plan-status-pill,
  .user-name,
  .topbar-link-pro-btn span {
    display: none !important;
  }

  .topbar-link-pro-btn {
    padding: 5px 8px !important;
    flex-shrink: 0 !important;
  }

  .explore-plans-btn {
    padding: 5px 8px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  .explore-plans-btn span {
    display: none !important;
  }

  .user-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  /* Cards in Dashboard */
  .welcome-header-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 12px !important;
    gap: 12px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .welcome-text h2 {
    font-size: 15.5px !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .welcome-text p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin-top: 4px !important;
  }

  .welcome-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .welcome-actions button {
    width: 100% !important;
    justify-content: center !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  .promo-banner-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .promo-badge {
    align-self: flex-start !important;
  }

  .promo-content h3 {
    font-size: 14.5px !important;
    line-height: 1.3 !important;
  }

  .promo-content p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .promo-cta-btn {
    width: 100% !important;
    text-align: center !important;
    height: 40px !important;
    font-size: 12.5px !important;
  }

  .coupon-offer-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .coupon-left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .coupon-left strong {
    font-size: 12.5px !important;
    display: block !important;
  }

  .coupon-left p {
    font-size: 11px !important;
    margin-top: 2px !important;
  }

  .coupon-right {
    width: 100% !important;
    display: flex !important;
    gap: 6px !important;
  }

  .coupon-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 40px !important;
    font-size: 12.5px !important;
  }

  .coupon-btn {
    height: 40px !important;
    font-size: 12px !important;
    flex-shrink: 0 !important;
    padding: 0 12px !important;
  }

  .onboarding-accordion-wrap {
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .onboarding-title-bar {
    padding: 12px 14px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .onboarding-title-bar h3 {
    font-size: 13.5px !important;
  }

  .step-progress-pill {
    font-size: 10px !important;
    padding: 2px 7px !important;
    flex-shrink: 0 !important;
  }

  .accordion-header {
    padding: 12px 14px !important;
    gap: 10px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .step-circle {
    width: 26px !important;
    height: 26px !important;
    font-size: 11.5px !important;
    min-width: 26px !important;
    flex-shrink: 0 !important;
  }

  .step-title-wrap {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .step-title-wrap strong {
    font-size: 12.5px !important;
    display: block !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
  }

  .step-title-wrap small {
    font-size: 10.5px !important;
    display: block !important;
    line-height: 1.3 !important;
    margin-top: 2px !important;
  }

  .step-status-tag {
    font-size: 9.5px !important;
    padding: 3px 6px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    margin-left: auto !important;
  }

  .accordion-body {
    padding: 12px 12px 16px !important;
    box-sizing: border-box !important;
  }

  .accordion-body p {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
  }

  .meta-fb-btn-wrap {
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .btn-facebook-connect,
  .btn-manual-waba {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  .meta-ads-promo-card {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 14px 12px !important;
    gap: 10px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .ads-card-left {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .ads-card-left h4 {
    font-size: 13.5px !important;
    margin-bottom: 2px !important;
  }

  .ads-card-left p {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .btn-ads-action {
    width: 100% !important;
    text-align: center !important;
    height: 40px !important;
    font-size: 12px !important;
  }

  .widget-card {
    padding: 14px 12px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cloud-status-banner-card {
    padding: 16px 14px !important;
    border-radius: 16px !important;
  }

  .cloud-status-timeline-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 12px 14px !important;
  }

  .cloud-timeline-step {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
  }

  .cloud-timeline-step:last-child {
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  .app-qr-card {
    text-align: center !important;
    padding: 18px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .app-qr-card .widget-head,
  .app-qr-card p {
    width: 100% !important;
    text-align: left !important;
  }

  .app-qr-card .qr-box {
    display: grid !important;
    place-items: center !important;
    margin: 12px auto !important;
    width: 140px !important;
    height: 140px !important;
    padding: 8px !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
  }

  .app-qr-card .qr-box img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .btn-app-download-link {
    width: 100% !important;
    justify-content: center !important;
    height: 38px !important;
    font-size: 11.5px !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   MODAL MOBILE PERFECTION (iOS, Android & Small Viewports)
   ========================================================================== */
@media (max-width: 768px) {
  #cloud-onboarding-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 99999 !important;
  }

  .cloud-modal-card {
    position: relative !important;
    padding: calc(env(safe-area-inset-top, 0px) + 38px) 18px calc(env(safe-area-inset-bottom, 0px) + 36px) !important;
    border-radius: 0 !important;
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    height: 100% !important;
    box-shadow: none !important;
    border: none !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  .wizard-top-nav-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
    position: relative !important;
    flex-shrink: 0 !important;
  }

  .cloud-modal-card .auth-close-button,
  .wizard-top-nav-bar .auth-close-button {
    position: static !important;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #475569 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .cloud-modal-card .auth-close-button:hover,
  .wizard-top-nav-bar .auth-close-button:hover {
    background: #e2e8f0 !important;
    color: #0f172a !important;
    transform: scale(1.05) !important;
  }

  .wizard-header-badge {
    font-size: 9.5px !important;
    padding: 4px 9px !important;
    white-space: nowrap !important;
  }

  .cloud-modal-card h2 {
    font-size: 18px !important;
    margin: 4px 0 !important;
    line-height: 1.25 !important;
  }

  #wizard-step-subtitle {
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .wizard-step-tracker {
    margin: 10px 0 14px !important;
    gap: 3px !important;
  }

  .wizard-tracker-bar {
    height: 4px !important;
  }

  .modal-grid-2 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
  }

  .modal-choice-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .choice-card-option {
    padding: 8px 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .auth-input,
  .cloud-modal-card .auth-input {
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .cloud-modal-card .auth-input input,
  .cloud-modal-card select,
  .cloud-modal-card textarea,
  .auth-input input,
  .auth-input select,
  input,
  select,
  textarea {
    font-size: 16px !important; /* 16px strictly prevents iOS Safari automatic focus zoom */
    width: 100% !important;
    min-width: 0 !important;
  }

  .cloud-modal-card select:not(#biz-country-code) {
    padding: 10px 12px !important;
    height: 46px !important;
    font-size: 16px !important;
  }

  .cloud-modal-card #phone-input-wrap,
  #phone-input-wrap {
    display: flex !important;
    align-items: stretch !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    height: 48px !important;
    min-height: 48px !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
  }

  .cloud-modal-card #phone-input-wrap:focus-within,
  #phone-input-wrap:focus-within {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
  }

  .cloud-modal-card select#biz-country-code,
  #biz-country-code {
    width: auto !important;
    min-width: 80px !important;
    max-width: 105px !important;
    height: 100% !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 6px 0 10px !important;
    border: none !important;
    background: transparent !important;
    color: #0f172a !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    outline: none !important;
  }

  .cloud-modal-card #phone-input-wrap input#biz-phone,
  #biz-phone {
    flex: 1 1 auto !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    padding: 0 12px !important;
    height: 100% !important;
    min-height: 46px !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* 3D Interactive Card Responsive Scaling on Mobile */
  .meta-billing-box {
    padding: 10px 8px !important;
    border-radius: 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .flip-card-wrapper {
    max-width: 300px !important;
    width: 100% !important;
    margin: 0 auto 12px !important;
  }

  .flip-card-inner {
    height: 170px !important;
  }

  .card-face {
    height: 170px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .card-chip-wrap svg {
    width: 15px !important;
    height: 15px !important;
  }

  .emv-chip {
    width: 28px !important;
    height: 22px !important;
  }

  .card-partner-brand {
    font-size: 8.5px !important;
    padding: 2px 5px !important;
  }

  .card-number-display {
    font-size: 13.5px !important;
    letter-spacing: 1px !important;
    margin: 6px 0 8px !important;
  }

  .card-label {
    font-size: 7px !important;
  }

  .card-holder-col strong {
    font-size: 9px !important;
    max-width: 100px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .card-exp-col strong {
    font-size: 9.5px !important;
  }

  .card-preview-logo-slot svg {
    max-width: 40px !important;
    height: 15px !important;
  }

  .card-mag-stripe {
    height: 30px !important;
    margin: 8px -12px 10px !important;
  }

  .card-signature-bar {
    height: 28px !important;
  }

  .brand-selector-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .brand-badges-group {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .brand-pill {
    padding: 3px 6px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .brand-pill svg {
    max-height: 16px !important;
    width: auto !important;
  }

  .wizard-nav-row {
    flex-direction: row !important;
    gap: 8px !important;
    margin-top: 16px !important;
    width: 100% !important;
  }

  .wizard-btn-back {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 14px !important;
    min-width: 78px !important;
    font-size: 13.5px !important;
    border-radius: 12px !important;
  }

  .wizard-btn-next,
  .wizard-btn-submit {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    flex: 1 1 auto !important;
  }

  .card-verify-guarantee-box {
    padding: 8px !important;
    border-radius: 8px !important;
  }

  .card-verify-guarantee-box p {
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  .trust-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    align-items: flex-start !important;
  }

  .trust-item {
    font-size: 10px !important;
  }
}

#phone-input-wrap {
  position: relative;
  display: flex !important;
  align-items: center !important;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
}

#phone-input-wrap select#biz-country-code {
  min-height: 42px;
  background-color: transparent;
  color: var(--ink, #15241c);
  font-weight: 700;
  font-size: 13px;
  border: none;
  outline: none;
  cursor: pointer;
  -webkit-appearance: menulist;
  appearance: menulist;
}

#phone-input-wrap input#biz-phone {
  min-height: 42px;
  background-color: transparent;
  color: var(--ink, #15241c);
  font-weight: 600;
  font-size: 13.5px;
  border: none;
  outline: none;
}

/* WhatsApp Live Chat Composer Override (Kill green focus-visible outline) */
#chat-composer-input,
#chat-composer-input:focus,
#chat-composer-input:focus-visible,
#chat-composer-input:active,
.composer-input-row,
.composer-input-row:focus,
.composer-input-row:focus-within,
.composer-input-row:focus-visible,
.composer-input-row input,
.composer-input-row input:focus,
.composer-input-row input:focus-visible,
.composer-input-row input:active {
  outline: none !important;
  outline-offset: 0 !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* ==========================================================================
   SYSTEM MAINTENANCE NOTICE BANNER (BOTH DASHBOARDS)
   ========================================================================== */
.system-maint-banner {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.75) 0%, rgba(255, 251, 235, 0.88) 100%);
  border: 1px solid rgba(245, 158, 11, 0.32);
  border-radius: 10px;
  padding: 7px 14px;
  color: #78350f;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.07);
  position: relative;
  z-index: 5;
  transition: opacity 0.2s ease;
}

.dashboard-main .system-maint-banner {
  margin: 12px 0 14px 0;
}

.waba-content .system-maint-banner {
  margin: 0 0 14px 0;
  max-width: 1400px;
}

body.is-chat-active .system-maint-banner {
  display: none !important;
}

.maint-banner-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.maint-pulse-dot {
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6);
  animation: maintPulse 2s infinite ease-in-out;
  flex-shrink: 0;
}

@keyframes maintPulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.6); }
  70% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.maint-icon {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  color: #b45309;
  flex-shrink: 0;
  display: block;
}

.maint-text {
  font-size: 12px;
  line-height: 1.4;
  color: #78350f;
  letter-spacing: -0.01em;
  flex: 1;
  min-width: 0;
  word-break: break-word;
  overflow-wrap: break-word;
}

.maint-text strong {
  font-weight: 800;
  color: #92400e;
  margin-right: 4px;
}

@media (max-width: 768px) {
  .system-maint-banner {
    padding: 7px 11px;
    border-radius: 9px;
  }
  .dashboard-main .system-maint-banner {
    margin: 10px 0 12px 0;
  }
  .waba-content .system-maint-banner {
    margin: 0 0 12px 0;
  }
  .maint-banner-inner {
    align-items: flex-start;
    gap: 7px;
  }
  .maint-pulse-dot {
    margin-top: 5px;
  }
  .maint-icon {
    margin-top: 2px;
  }
  .maint-text {
    font-size: 11.5px;
    line-height: 1.35;
  }
}

@media (max-width: 390px) {
  .system-maint-banner {
    padding: 6px 9px;
  }
  .maint-text {
    font-size: 11px;
    line-height: 1.3;
  }
}