/* Only the signed-in customer shell. Native Xboard components retain their behavior. */
.sb-customer {
  --sb-ui-bg:#f3f6f3; --sb-ui-surface:#fff; --sb-ui-ink:#193c36;
  --sb-ui-muted:#526b62; --sb-ui-line:#d6e1da; --sb-ui-accent:#235e54;
  --sb-ui-hover:#e8f1eb; --sb-ui-button-ink:#fff; --sb-ui-button-hover:#194e45;
  color:var(--sb-ui-ink); color-scheme:light;
}
.dark .sb-customer {
  --sb-ui-bg:#122420; --sb-ui-surface:#1b302b; --sb-ui-ink:#edf2e9;
  --sb-ui-muted:#b3c7bd; --sb-ui-line:#3d584d; --sb-ui-accent:#a6d4c3;
  --sb-ui-hover:#28473c; --sb-ui-button-ink:#163b30; --sb-ui-button-hover:#bde2d4;
  color-scheme:dark;
}
.sb-customer ::selection{background:var(--sb-ui-accent);color:var(--sb-ui-button-ink)}
.sb-customer :is(a,button,[tabindex="0"]):focus-visible{outline:2px solid var(--sb-ui-accent);outline-offset:3px}
.sb-customer article>header{background:var(--sb-ui-surface)!important;color:var(--sb-ui-ink);border-bottom:1px solid var(--sb-ui-line);padding-inline:24px}
.sb-customer article>header i[role=button]{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border-radius:6px;margin-right:8px}
.sb-customer article>header i[role=button]:hover{background:var(--sb-ui-hover)}
.sb-customer article>header button{min-height:44px;--n-text-color:var(--sb-ui-ink)!important;--n-text-color-hover:var(--sb-ui-accent)!important}
.sb-customer .n-breadcrumb{--n-item-text-color:var(--sb-ui-muted)!important;--n-item-text-color-active:var(--sb-ui-ink)!important}
.sb-customer .sb-customer-sidebar{background:var(--sb-ui-surface);--n-color:var(--sb-ui-surface)!important;--n-border-color:var(--sb-ui-line)!important}
.sb-customer-sidebar h2{color:var(--sb-ui-ink)!important;font-size:16px;line-height:1.35;padding-inline:12px;overflow-wrap:anywhere}
.sb-customer [role=menu]{padding:8px 8px 24px;--n-item-height:44px!important;--n-item-text-color:var(--sb-ui-ink)!important;--n-item-icon-color:var(--sb-ui-muted)!important;--n-item-text-color-active:var(--sb-ui-accent)!important;--n-item-icon-color-active:var(--sb-ui-accent)!important;--n-item-color-active:var(--sb-ui-hover)!important;--n-item-text-color-hover:var(--sb-ui-ink)!important;--n-item-icon-color-hover:var(--sb-ui-accent)!important;--n-item-color-hover:var(--sb-ui-hover)!important}
.sb-customer .n-menu-item{margin-top:4px}
.sb-customer .n-menu-item-content{border-radius:6px;padding-left:14px!important}
.sb-customer .n-menu-item-content::before{inset:0!important;border:0!important;border-radius:6px}
.sb-customer .n-menu-item-group-title{color:var(--sb-ui-muted)!important;font-size:12px;padding-left:14px!important;margin-top:14px}
.sb-customer-content{background:var(--sb-ui-bg)!important;padding:28px!important;color:var(--sb-ui-ink);scroll-padding-top:24px}
.sb-customer-content>div:not(.n-back-top-placeholder),.sb-customer-heading{width:100%;max-width:1360px;margin-inline:auto}
.sb-customer-heading{display:block;margin-bottom:24px}
.sb-customer-heading h1{margin:0;font-size:26px;line-height:1.35;font-weight:650;letter-spacing:-.02em}
.sb-customer-heading p{margin:8px 0 0;max-width:72ch;font-size:14px;line-height:1.7;color:var(--sb-ui-muted)}
.sb-customer .n-card{--n-color:var(--sb-ui-surface)!important;--n-text-color:var(--sb-ui-ink)!important;--n-title-text-color:var(--sb-ui-ink)!important;--n-border-color:var(--sb-ui-line)!important;--n-border-radius:12px!important;--n-title-font-size:18px!important;--n-title-font-weight:600!important;--n-action-color:var(--sb-ui-surface)!important;border-radius:12px;box-shadow:none!important}
.sb-customer .n-card-header__main{min-width:0;overflow-wrap:anywhere}
.sb-customer .n-card__action{border-top:1px solid var(--sb-ui-line)}
.sb-customer article :is(.text-gray-500,.text-gray-400,.text-gray,.text-hex-666){color:var(--sb-ui-muted)!important}
.sb-customer article .n-button{--n-border-radius:6px!important;min-height:40px;--n-text-color:var(--sb-ui-ink)!important;--n-text-color-hover:var(--sb-ui-accent)!important}
.sb-customer article .n-button--primary-type{--n-color:var(--sb-ui-accent)!important;--n-color-hover:var(--sb-ui-button-hover)!important;--n-color-pressed:var(--sb-ui-button-hover)!important;--n-text-color:var(--sb-ui-button-ink)!important;--n-text-color-hover:var(--sb-ui-button-ink)!important;--n-text-color-pressed:var(--sb-ui-button-ink)!important;--n-border:1px solid var(--sb-ui-accent)!important;--n-border-hover:1px solid var(--sb-ui-button-hover)!important}
.sb-customer article .n-button--error-type{--n-text-color:#b52727!important}
.dark .sb-customer article .n-button--error-type{--n-text-color:#ff9f9f!important}
.sb-customer :is(article,.n-modal,.n-drawer) .n-input{--n-color:var(--sb-ui-surface)!important;--n-text-color:var(--sb-ui-ink)!important;--n-placeholder-color:var(--sb-ui-muted)!important;--n-border:1px solid var(--sb-ui-line)!important;--n-border-hover:1px solid var(--sb-ui-accent)!important;--n-border-focus:1px solid var(--sb-ui-accent)!important;--n-border-radius:6px!important;--n-height:44px!important;--n-caret-color:var(--sb-ui-accent)!important}
.sb-customer article .n-form-item-label{color:var(--sb-ui-ink)!important}
.sb-customer article .n-radio-group{--n-button-border-color-active:var(--sb-ui-accent)!important;--n-button-color-active:var(--sb-ui-surface)!important;--n-button-text-color-active:var(--sb-ui-ink)!important;--n-button-text-color:var(--sb-ui-ink)!important;--n-button-color:var(--sb-ui-surface)!important;--n-button-border-color:var(--sb-ui-line)!important;--n-height:auto!important;--n-button-padding:16px!important;--n-button-border-radius:12px!important;--n-button-border:1px solid var(--sb-ui-line)!important}
.sb-customer article .n-radio-group .n-radio-button:hover{border-color:var(--sb-ui-accent)!important}
.sb-customer article .n-radio-group .n-radio-button.n-radio-button--checked{border-color:var(--sb-ui-accent)!important;box-shadow:inset 0 0 0 1px var(--sb-ui-accent)!important}
.sb-customer article .n-data-table{--n-td-color:var(--sb-ui-surface)!important;--n-td-color-hover:var(--sb-ui-hover)!important;--n-th-color:var(--sb-ui-hover)!important;--n-th-text-color:var(--sb-ui-muted)!important;--n-td-text-color:var(--sb-ui-ink)!important;--n-border-color:var(--sb-ui-line)!important;--n-border-radius:12px!important;font-variant-numeric:tabular-nums}
.sb-customer article .n-data-table-th,.sb-customer article .n-data-table-td{padding:16px!important}
.sb-customer article .n-empty{--n-text-color:var(--sb-ui-muted)!important;padding:32px 16px}
.sb-customer article .n-list{--n-color:var(--sb-ui-surface)!important;--n-text-color:var(--sb-ui-ink)!important;--n-border-color:var(--sb-ui-line)!important}
.sb-customer article .n-list-item{padding-block:18px}
.sb-customer article .n-alert{border-radius:8px}
.sb-customer article .n-progress{--n-fill-color:var(--sb-ui-accent)!important;--n-text-color:var(--sb-ui-muted)!important;--n-rail-color:var(--sb-ui-line)!important}
.sb-customer[data-sb-customer-route=dashboard] .carousel-img{height:140px!important;min-height:140px!important;padding:22px!important}
.sb-customer[data-sb-customer-route=dashboard] .carousel-img h2{font-size:19px;line-height:1.4}
.sb-customer[data-sb-customer-route=dashboard] .carousel-img>div{max-width:85%}
.sb-customer[data-sb-customer-route=plan] .sb-customer-content>div>h2{display:none}
.sb-customer[data-sb-customer-route=plan] .card-container{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:24px!important;align-items:stretch}
.sb-customer[data-sb-customer-route=plan] .card-container{min-width:0;padding-inline:0}
/* Xboard wraps each card in .card-item; stretch that wrapper as well as the card. */
.sb-customer[data-sb-customer-route=plan] .card-container>.card-item{display:flex;min-width:0;max-width:100%}
.sb-customer[data-sb-customer-route=plan] .card-container>.card-item>.n-card{display:flex;flex-direction:column;align-self:stretch;width:100%!important;margin:0!important;min-width:0}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card__content{flex:1 1 auto;overflow-wrap:anywhere}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card__action{margin-top:auto;flex-shrink:0}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card-header{align-items:flex-start;flex-direction:column;gap:20px}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card-header__extra{margin-left:0!important;color:var(--sb-ui-ink);font-variant-numeric:tabular-nums}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card__content{font-size:14px;line-height:1.8}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card__content ul{padding-left:20px;margin-block:20px}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card__action .n-button{min-height:46px}
.sb-customer[data-sb-customer-route=knowledge] .n-card{margin-bottom:20px}
.sb-customer[data-sb-customer-route=profile] .n-card .n-form{max-width:560px}
@media(max-width:1000px){.sb-customer-content{padding:24px!important}.sb-customer[data-sb-customer-route=plan] .card-container{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
@media(max-width:700px){
  .sb-customer-content{padding:24px 16px!important}.sb-customer-heading{margin-bottom:22px}.sb-customer-heading h1{font-size:24px}
  .sb-customer article>header{padding-inline:8px}.sb-customer article>header i[role=button]{margin-right:0}
  .sb-customer .n-card{--n-padding-left:18px!important;--n-padding-top:18px!important;--n-padding-bottom:18px!important}
  .sb-customer article .n-button{min-height:44px}.sb-customer :is(article,.n-modal,.n-drawer) .n-input{--n-font-size:16px!important}
  .sb-customer article .n-data-table-th,.sb-customer article .n-data-table-td{padding:12px!important}
  .sb-customer[data-sb-customer-route=plan] .card-container{grid-template-columns:1fr;gap:16px}
  .sb-customer[data-sb-customer-route=dashboard] .carousel-img{height:126px!important;min-height:126px!important;padding:18px!important}
  .sb-customer[data-sb-customer-route=dashboard] .carousel-img h2{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.sb-customer :is(.fade-slide-enter-active,.fade-slide-leave-active,.n-card){transition:none!important;animation:none!important}}

/* Keep active/hover states legible even when Naive UI supplies inline theme variables. */
.sb-customer [role=menu] .n-menu-item-content--selected :is(.n-menu-item-content-header,.n-menu-item-content__icon){color:var(--sb-ui-accent)!important}
.sb-customer [role=menu] .n-menu-item-content:hover :is(.n-menu-item-content-header,.n-menu-item-content__icon){color:var(--sb-ui-accent)!important}
.sb-customer .n-drawer{--n-color:var(--sb-ui-surface)!important;--n-text-color:var(--sb-ui-ink)!important}
.sb-customer #sb-vpn-native{grid-column:1 / -1}
.sb-customer[data-sb-customer-route=plan] .card-container .n-card-header__main{font-size:18px}
.sb-customer[data-sb-customer-route=dashboard] .carousel-img{display:flex;justify-content:space-between}
.sb-customer[data-sb-customer-route=dashboard] .carousel-img :is(h2,h3,p){margin:0!important}
.sb-customer[data-sb-customer-route=dashboard] .carousel-img h3{font-size:13px!important;line-height:1.4}
.sb-customer .n-data-table .n-button{--n-padding:0 10px!important;--n-font-size:13px!important}

.sb-table-hint{display:none}

.sb-payment-methods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.sb-payment-method-card {
  border: 1px solid var(--sb-ui-line);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb-payment-method-card:hover {
  border-color: var(--sb-ui-accent);
  background: var(--sb-ui-hover);
}
.sb-payment-method-card input {
  margin: 0;
}
.sb-payment-method-card.selected {
  border-color: var(--sb-ui-accent);
  background: var(--sb-ui-hover);
}
.sb-customer[data-sb-customer-route=plan-detail] .space-y-5>.bg-gray-800{background:var(--sb-ui-surface)!important;color:var(--sb-ui-ink)!important;border:1px solid var(--sb-ui-line);border-radius:12px;padding:24px}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 .text-gray-300{color:var(--sb-ui-muted)}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 .border-b{border-color:var(--sb-ui-line)}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 input{min-width:0;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--sb-ui-line);border-radius:6px;color:var(--sb-ui-ink);background:var(--sb-ui-surface);font-size:16px;caret-color:var(--sb-ui-accent)}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 input::placeholder{color:var(--sb-ui-muted);opacity:1}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 input:focus-visible{outline:2px solid var(--sb-ui-accent);outline-offset:2px}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 .n-button--disabled{--n-opacity-disabled:1!important;--n-color-disabled:var(--sb-ui-hover)!important;--n-text-color-disabled:var(--sb-ui-muted)!important;--n-border-disabled:1px solid var(--sb-ui-line)!important}
.sb-customer[data-sb-customer-route=plan-detail] .bg-gray-800 .n-button--large-type{min-height:46px}

/* Table card style refactoring */
@media (max-width: 600px) {
  .n-data-table .n-data-table-table{display:block}
  .n-data-table .n-data-table-thead{display:none}
  .n-data-table .n-data-table-tbody{display:block}
  .n-data-table .n-data-table-tr{display:block;margin-bottom:12px;border:1px solid var(--sb-ui-line);padding:16px;border-radius:12px}
  .n-data-table .n-data-table-td{display:flex;justify-content:space-between;padding:8px 0;border-bottom:none!important}
  .n-data-table .n-data-table-td::before{content:attr(data-col);font-weight:bold;color:var(--sb-ui-ink-light)}
}

/* Mobile sticky checkout bar on plan-detail page */
@media(max-width: 700px) {
  .sb-customer[data-sb-customer-route=plan-detail] .sb-customer-content {
    padding-bottom: 96px !important;
  }
  .sb-customer[data-sb-customer-route=plan-detail] :is(.sb-checkout-summary, .space-y-5 > .bg-gray-800:has(.n-button--large-type))::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(72px + env(safe-area-inset-bottom, 0px));
    background: var(--sb-ui-surface);
    border-top: 1px solid var(--sb-ui-line);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
    z-index: 90;
    pointer-events: none;
  }
  .sb-customer[data-sb-customer-route=plan-detail] :is(.sb-checkout-summary, .space-y-5 > .bg-gray-800:has(.n-button--large-type)) > .py-3 {
    position: fixed !important;
    bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    left: 16px !important;
    right: auto !important;
    z-index: 95 !important;
    display: flex !important;
    align-items: baseline !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 44px !important;
    line-height: 44px !important;
  }
  .sb-customer[data-sb-customer-route=plan-detail] :is(.sb-checkout-summary, .space-y-5 > .bg-gray-800:has(.n-button--large-type)) > .py-3 > div:first-child {
    font-size: 13px !important;
    color: var(--sb-ui-muted) !important;
    margin: 0 !important;
  }
  .sb-customer[data-sb-customer-route=plan-detail] :is(.sb-checkout-summary, .space-y-5 > .bg-gray-800:has(.n-button--large-type)) > .py-3 > div:last-child {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--sb-ui-accent) !important;
    font-variant-numeric: tabular-nums !important;
  }
  .sb-customer[data-sb-customer-route=plan-detail] :is(.sb-checkout-summary, .space-y-5 > .bg-gray-800:has(.n-button--large-type)) > .n-button--large-type {
    position: fixed !important;
    bottom: max(14px, env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    left: auto !important;
    width: auto !important;
    min-width: 140px !important;
    height: 44px !important;
    min-height: 44px !important;
    z-index: 95 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15) !important;
  }
}