/* Shared UI typography normalization for Orisjay Enterprise pages. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-size: 13px !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
}

h1,
.h1 {
  font-size: 20px !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

h2,
.h2 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
}

h3,
.h3 {
  font-size: 16px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}

p,
label,
small,
td,
th,
li,
input,
select,
textarea,
button,
.btn,
.form-control,
.input,
.finput,
.fc,
.form-ctrl {
  letter-spacing: 0 !important;
}

input,
select,
textarea,
.form-control,
.input,
.finput,
.fc,
.form-ctrl {
  font-size: 13px !important;
}

button,
.btn,
.btn-save,
.btn-submit,
.btn-topup,
.fbtn,
.filter-btn,
.copy-btn {
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}

table,
td,
th,
.rtbl,
.ptable {
  font-size: 12.5px !important;
}

.pg-title,
.card-title,
.card-head,
.section-title,
.modal-title,
.drop-head h6,
.banner h1,
.banner h2,
.hero h1,
.hero h2,
.doc-hero h2,
.api-hero h2,
.afa-hero h2,
.bn-name,
.w-name,
.hero-name,
.site-title {
  letter-spacing: 0 !important;
}

.pg-title,
.card-title,
.section-title,
.modal-title,
.drop-head h6 {
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.banner h1,
.banner h2,
.hero h1,
.hero h2,
.doc-hero h2,
.api-hero h2,
.afa-hero h2,
.bn-name,
.w-name {
  font-size: 17px !important;
  line-height: 1.28 !important;
}

.hero-name,
.site-title {
  font-size: 18px !important;
  line-height: 1.25 !important;
}

.sc-val,
.stat strong {
  font-size: 18px !important;
  line-height: 1.2 !important;
}

.badge,
.status,
.badge-status,
.pill {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

@media (max-width: 600px) {
  body {
    font-size: 12.5px !important;
    overflow-x: hidden !important;
  }

  h1,
  .h1 {
    font-size: 18px !important;
  }

  h2,
  .h2 {
    font-size: 16.5px !important;
  }

  h3,
  .h3 {
    font-size: 15px !important;
  }

  .banner h1,
  .banner h2,
  .hero h1,
  .hero h2,
  .doc-hero h2,
  .api-hero h2,
  .afa-hero h2,
  .bn-name,
  .w-name {
    font-size: 16px !important;
  }

  .main,
  .content,
  main,
  .wrap {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .content,
  .wrap {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .tb {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px !important;
  }

  .tb-l,
  .tb-r,
  .top-actions,
  .nav,
  .share,
  .hero {
    min-width: 0 !important;
  }

  .pg-title,
  .brand span,
  .sb-un,
  .txn-desc,
  .card-title,
  .store-status,
  .hero-name,
  .site-title {
    min-width: 0 !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tbtn,
  .ham,
  .top-pill,
  .btn-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    border-radius: 12px !important;
  }

  .bal,
  .bal-pill {
    max-width: 118px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .grid,
  .form-grid,
  .wallet-grid,
  .two-col,
  .layout-grid,
  .checkout-grid,
  .api-grid,
  .store-grid {
    grid-template-columns: 1fr !important;
  }

  .sg3,
  .stats,
  .stat-grid,
  .quick-actions,
  .action-grid,
  .summary-grid,
  .dash-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .card,
  .stat,
  .sc,
  .hcard,
  .pm-btn,
  .mm-card,
  .dash-tile {
    border-radius: 14px !important;
  }

  .card,
  .stat,
  .sc,
  .hcard {
    max-width: 100% !important;
  }

  .card-head,
  .card-h {
    padding: 13px 14px !important;
  }

  .card-body,
  .card-b {
    padding: 14px !important;
  }

  input,
  select,
  textarea,
  .form-control,
  .input,
  .finput,
  .fc,
  .form-ctrl {
    max-width: 100% !important;
    min-height: 44px !important;
  }

  button,
  .btn,
  .btn-save,
  .btn-submit,
  .btn-topup,
  .fbtn,
  .filter-btn,
  .copy-btn {
    min-height: 42px !important;
    white-space: normal !important;
  }

  table {
    min-width: 560px;
  }

  .table-wrap,
  .table-responsive,
  .rtbl,
  .ptable,
  .orders-table,
  .txn-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .drop {
    max-width: calc(100vw - 24px) !important;
  }

  .wa-wrap {
    right: 14px !important;
    bottom: 82px !important;
  }
}

@media (max-width: 380px) {
  .sg3,
  .stats,
  .stat-grid,
  .quick-actions,
  .action-grid,
  .summary-grid,
  .dash-strip {
    grid-template-columns: 1fr !important;
  }

  .bal,
  .bal-pill {
    display: none !important;
  }
}

/* Screenshot-inspired visual refresh: clean SaaS dashboard surfaces with blue/purple accents. */
:root {
  --ui-bg-soft: #eef5ff;
  --ui-bg-panel: rgba(255, 255, 255, .94);
  --ui-bg-panel-2: #f8fbff;
  --ui-line-soft: #dce8f8;
  --ui-text-strong: #0f1f3d;
  --ui-text-muted: #64748b;
  --ui-blue: #0b73ff;
  --ui-indigo: #4f46e5;
  --ui-purple: #7c3aed;
  --ui-pink: #e11d72;
  --ui-green: #16a34a;
  --ui-gradient: linear-gradient(100deg, #075ed8 0%, #173bd6 42%, #7c20d6 72%, #e11d48 100%);
  --ui-shadow: 0 16px 38px rgba(15, 31, 61, .10), 0 3px 10px rgba(15, 31, 61, .06);
  --ui-shadow-sm: 0 8px 22px rgba(15, 31, 61, .08);
}

[data-theme="dark"] {
  --ui-bg-soft: #0a1020;
  --ui-bg-panel: rgba(17, 28, 47, .94);
  --ui-bg-panel-2: #111c2f;
  --ui-line-soft: #24344f;
  --ui-text-strong: #eaf1ff;
  --ui-text-muted: #9aa8bd;
  --ui-shadow: 0 16px 38px rgba(0, 0, 0, .28), 0 3px 10px rgba(0, 0, 0, .20);
  --ui-shadow-sm: 0 8px 22px rgba(0, 0, 0, .24);
}

body {
  background:
    radial-gradient(circle at 0 0, rgba(11, 115, 255, .12), transparent 32rem),
    linear-gradient(180deg, var(--ui-bg-soft), #f8fbff 55%, var(--ui-bg-soft)) !important;
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 0 0, rgba(59, 130, 246, .18), transparent 30rem),
    linear-gradient(180deg, #081021, #0d1527 55%, #081021) !important;
}

.sb,
.tb,
.top,
.card,
.stat,
.sc,
.hcard,
.mm-card,
.filter-row,
.empty-state,
.modal-box,
.drop,
.checkout-card,
.dash-tile,
.wallet-box,
.selected-box,
.quick-card,
.bundle,
.bundle-select-wrap,
.hist-item,
.side-menu a {
  background: var(--ui-bg-panel) !important;
  border-color: var(--ui-line-soft) !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

.tb,
.top {
  backdrop-filter: blur(14px);
}

.sb {
  box-shadow: 10px 0 30px rgba(15, 31, 61, .06) !important;
}

.sb-top img,
.brand img {
  background: #fff !important;
  border: 1px solid var(--ui-line-soft) !important;
  box-shadow: 0 8px 18px rgba(15, 31, 61, .08);
}

.na,
.di,
.wa-mi {
  border-radius: 10px !important;
}

.na i,
.card-title i,
.card-h i,
.slbl i,
.section-title i,
.pg-title i,
.d-ico i {
  color: var(--ui-blue);
}

.na:hover,
.di:hover,
.wa-mi:hover,
.sub-nav .na:hover {
  background: #edf5ff !important;
  color: var(--ui-text-strong) !important;
}

[data-theme="dark"] .na:hover,
[data-theme="dark"] .di:hover,
[data-theme="dark"] .wa-mi:hover,
[data-theme="dark"] .sub-nav .na:hover {
  background: rgba(59, 130, 246, .12) !important;
}

.na.active,
.tab.active,
.tab-btn.active {
  background: var(--ui-gradient) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(79, 70, 229, .24) !important;
}

.na.active i,
.tab.active i,
.tab-btn.active i {
  color: #fff !important;
}

.hero,
.banner,
.api-hero,
.doc-hero,
.afa-hero,
.ish-hero,
.conf-top {
  background: var(--ui-gradient) !important;
  border: 0 !important;
  border-radius: 16px !important;
  box-shadow: var(--ui-shadow) !important;
}

.hero::before,
.hero::after,
.banner::before,
.banner::after,
.api-hero::before,
.api-hero::after,
.doc-hero::before,
.doc-hero::after {
  opacity: .42 !important;
}

.card,
.stat,
.sc,
.hcard,
.mm-card,
.empty-state,
.modal-box {
  border-radius: 12px !important;
}

.card-head,
.card-h,
.modal-head,
.modal-hd,
.drop-head {
  background: linear-gradient(180deg, rgba(248, 251, 255, .96), rgba(255, 255, 255, .88)) !important;
  border-color: var(--ui-line-soft) !important;
}

[data-theme="dark"] .card-head,
[data-theme="dark"] .card-h,
[data-theme="dark"] .modal-head,
[data-theme="dark"] .modal-hd,
[data-theme="dark"] .drop-head {
  background: linear-gradient(180deg, rgba(22, 32, 53, .96), rgba(17, 28, 47, .90)) !important;
}

.stat i,
.sc-ico,
.quick-ic,
.d-ico,
.dash-tile i,
.u-av,
.sb-av {
  background: linear-gradient(135deg, rgba(11, 115, 255, .14), rgba(124, 58, 237, .18)) !important;
  color: var(--ui-indigo) !important;
}

.sc-val,
.stat strong,
.dash-tile strong,
.wallet-box strong {
  color: var(--ui-text-strong) !important;
}

.btn-primary,
.btn-save,
.btn-submit,
.btn-topup,
.filter-btn,
.copy-btn,
.btn:not(.btn-outline):not(.btn-light):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success),
button[type="submit"]:not(.btn-ghost):not(.btn-sub) {
  background: var(--ui-gradient) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(79, 70, 229, .20) !important;
}

input,
select,
textarea,
.form-control,
.input,
.finput,
.fc,
.form-ctrl,
.bundle-select {
  background: var(--ui-bg-panel-2) !important;
  border-color: var(--ui-line-soft) !important;
  border-radius: 10px !important;
  color: var(--ui-text-strong) !important;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.input:focus,
.finput:focus,
.fc:focus,
.form-ctrl:focus,
.bundle-select:focus {
  border-color: var(--ui-blue) !important;
  box-shadow: 0 0 0 3px rgba(11, 115, 255, .14) !important;
  outline: none !important;
}

.rtbl th,
.ptable th,
.tbl th,
.table th {
  background: #f0f6ff !important;
  color: var(--ui-text-muted) !important;
  border-color: var(--ui-line-soft) !important;
}

[data-theme="dark"] .rtbl th,
[data-theme="dark"] .ptable th,
[data-theme="dark"] .tbl th,
[data-theme="dark"] .table th {
  background: #16243b !important;
}

.rtbl td,
.ptable td,
.tbl td,
.table td {
  border-color: var(--ui-line-soft) !important;
}

.rtbl tr:hover td,
.ptable tr:hover td,
.tbl tr:hover td,
.table-hover tbody tr:hover td {
  background: rgba(11, 115, 255, .055) !important;
}

/* Orisjay bright identity layer: distinct clean-blue SaaS styling. */
[data-theme="light"] {
  --ui-bg-soft: #edf6ff;
  --ui-bg-panel: rgba(255, 255, 255, .97);
  --ui-bg-panel-2: #f6fbff;
  --ui-line-soft: #d8e9fb;
  --ui-text-strong: #0b1d3a;
  --ui-text-muted: #5b6f8e;
  --ui-blue: #0866ff;
  --ui-indigo: #1948d8;
  --ui-purple: #6d28d9;
  --ui-pink: #d91d68;
  --ui-gradient: linear-gradient(105deg, #0866ff 0%, #153dd4 42%, #6d28d9 74%, #d91d68 100%);
  --ui-shadow: 0 22px 52px rgba(19, 63, 138, .14), 0 8px 18px rgba(19, 63, 138, .08);
  --ui-shadow-sm: 0 12px 30px rgba(19, 63, 138, .10), 0 3px 8px rgba(19, 63, 138, .05);
}

[data-theme="light"] body {
  background:
    radial-gradient(circle at 8% 6%, rgba(8, 102, 255, .14), transparent 26rem),
    radial-gradient(circle at 92% 0%, rgba(109, 40, 217, .10), transparent 24rem),
    linear-gradient(180deg, #f7fbff 0%, #edf6ff 45%, #f9fcff 100%) !important;
  color: var(--ui-text-strong) !important;
}

[data-theme="light"] .main,
[data-theme="light"] .content,
[data-theme="light"] main,
[data-theme="light"] .wrap {
  background: transparent !important;
}

[data-theme="light"] .sb,
[data-theme="light"] .tb,
[data-theme="light"] .top {
  background: rgba(255, 255, 255, .92) !important;
  border-color: rgba(216, 233, 251, .92) !important;
  backdrop-filter: blur(18px) saturate(1.2) !important;
}

[data-theme="light"] .sb::before,
[data-theme="light"] .card::before,
[data-theme="light"] .top::before {
  background: var(--ui-gradient) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .stat,
[data-theme="light"] .sc,
[data-theme="light"] .hcard,
[data-theme="light"] .mm-card,
[data-theme="light"] .metric,
[data-theme="light"] .price-box,
[data-theme="light"] .store-admin .card,
[data-theme="light"] .checkout-card,
[data-theme="light"] .dash-tile,
[data-theme="light"] .wallet-box,
[data-theme="light"] .selected-box,
[data-theme="light"] .quick-card,
[data-theme="light"] .bundle,
[data-theme="light"] .hist-item,
[data-theme="light"] .filter-row,
[data-theme="light"] .modal-box,
[data-theme="light"] .drop {
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 252, 255, .94)) !important;
  border: 1px solid var(--ui-line-soft) !important;
  border-radius: 14px !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

[data-theme="light"] .card:hover,
[data-theme="light"] .sc:hover,
[data-theme="light"] .quick-card:hover,
[data-theme="light"] .bundle:hover {
  box-shadow: var(--ui-shadow) !important;
}

[data-theme="light"] .hero,
[data-theme="light"] .banner,
[data-theme="light"] .welcome,
[data-theme="light"] .api-hero,
[data-theme="light"] .doc-hero,
[data-theme="light"] .afa-hero,
[data-theme="light"] .ish-hero,
[data-theme="light"] .conf-top {
  background:
    radial-gradient(circle at 12% 20%, rgba(255, 255, 255, .24), transparent 14rem),
    linear-gradient(105deg, #075ed8 0%, #173bd6 44%, #6d28d9 78%, #d91d68 100%) !important;
  color: #fff !important;
  border-radius: 18px !important;
  box-shadow: var(--ui-shadow) !important;
}

[data-theme="light"] .hero p,
[data-theme="light"] .banner p,
[data-theme="light"] .welcome p,
[data-theme="light"] .api-hero p,
[data-theme="light"] .doc-hero p,
[data-theme="light"] .afa-hero p,
[data-theme="light"] .conf-top p {
  color: rgba(255, 255, 255, .82) !important;
}

[data-theme="light"] .card-head,
[data-theme="light"] .card-h,
[data-theme="light"] .price-head,
[data-theme="light"] .modal-head,
[data-theme="light"] .modal-hd,
[data-theme="light"] .drop-head {
  background: linear-gradient(180deg, #f8fbff, #ffffff) !important;
  border-bottom: 1px solid var(--ui-line-soft) !important;
}

[data-theme="light"] .sc-ic,
[data-theme="light"] .qa-ic,
[data-theme="light"] .qb-ic,
[data-theme="light"] .quick-ic,
[data-theme="light"] .dash-tile i,
[data-theme="light"] .d-ico,
[data-theme="light"] .feat-ic,
[data-theme="light"] .avatar,
[data-theme="light"] .sb-av {
  background: linear-gradient(135deg, rgba(8, 102, 255, .14), rgba(109, 40, 217, .16)) !important;
  border-color: rgba(8, 102, 255, .18) !important;
  color: #075ed8 !important;
}

[data-theme="light"] .btn,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-save,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-topup,
[data-theme="light"] .btn-sub,
[data-theme="light"] button[type="submit"] {
  border-radius: 12px !important;
}

[data-theme="light"] .btn:not(.sub):not(.secondary):not(.danger):not(.red):not(.amber):not(.green):not(.light),
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-save,
[data-theme="light"] .btn-submit,
[data-theme="light"] .btn-topup,
[data-theme="light"] .btn-sub,
[data-theme="light"] button[type="submit"]:not(.btn-ghost) {
  background: var(--ui-gradient) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 26px rgba(25, 72, 216, .22) !important;
}

[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea,
[data-theme="light"] .form-control,
[data-theme="light"] .input,
[data-theme="light"] .finput,
[data-theme="light"] .fc,
[data-theme="light"] .form-ctrl,
[data-theme="light"] .ir,
[data-theme="light"] .bundle-select {
  background: #f8fbff !important;
  border-color: #cfe4fb !important;
  color: var(--ui-text-strong) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #8aa0bd !important;
}

[data-theme="light"] .tbl th,
[data-theme="light"] .table th,
[data-theme="light"] .rtbl th,
[data-theme="light"] .ptable th {
  background: #eef6ff !important;
  color: #46607f !important;
}

[data-theme="light"] .tbl td,
[data-theme="light"] .table td,
[data-theme="light"] .rtbl td,
[data-theme="light"] .ptable td {
  background: rgba(255, 255, 255, .74) !important;
}

/* Bright auth page refresh. */
[data-theme="light"] .pl {
  background:
    radial-gradient(circle at 22% 8%, rgba(8, 102, 255, .13), transparent 22rem),
    radial-gradient(circle at 88% 18%, rgba(109, 40, 217, .13), transparent 22rem),
    linear-gradient(150deg, #f8fcff 0%, #edf6ff 46%, #ffffff 100%) !important;
}

[data-theme="light"] .pr {
  background:
    radial-gradient(circle at 10% 0%, rgba(8, 102, 255, .10), transparent 22rem),
    #ffffff !important;
  border-left: 1px solid var(--ui-line-soft) !important;
}

[data-theme="light"] .brand-logo,
[data-theme="light"] .mob-logo {
  background: var(--ui-gradient) !important;
  box-shadow: 0 14px 32px rgba(25, 72, 216, .20) !important;
}

[data-theme="light"] .badge {
  background: #eaf4ff !important;
  color: #075ed8 !important;
  border-color: #cfe4fb !important;
}

[data-theme="light"] .lc-h,
[data-theme="light"] .fw-h,
[data-theme="light"] .brand-name,
[data-theme="light"] .mob-name {
  color: #0b1d3a !important;
}

[data-theme="light"] .lc-sub,
[data-theme="light"] .fw-s,
[data-theme="light"] .brand-tag,
[data-theme="light"] .feat-tx,
[data-theme="light"] .trust-item,
[data-theme="light"] .bottom-note {
  color: #5b6f8e !important;
}

[data-theme="light"] .tab-bar {
  background: #eef6ff !important;
  border-color: #d8e9fb !important;
}

[data-theme="light"] .tab-btn:not(.active):hover {
  background: rgba(8, 102, 255, .08) !important;
  color: #0b1d3a !important;
}

[data-theme="light"] .theme-btn {
  background: rgba(255, 255, 255, .90) !important;
  border-color: #d8e9fb !important;
  color: #075ed8 !important;
}

/* Orisjay midnight mode: paired with the bright theme, not a fallback. */
[data-theme="dark"] {
  --ui-bg-soft: #081426;
  --ui-bg-panel: rgba(14, 27, 50, .94);
  --ui-bg-panel-2: #10233f;
  --ui-line-soft: rgba(130, 165, 220, .20);
  --ui-text-strong: #eef6ff;
  --ui-text-muted: #a5b7d1;
  --ui-blue: #4ea1ff;
  --ui-indigo: #7c8cff;
  --ui-purple: #a78bfa;
  --ui-pink: #fb7185;
  --ui-gradient: linear-gradient(105deg, #0b73ff 0%, #3156f6 42%, #8b5cf6 74%, #ec4899 100%);
  --ui-shadow: 0 22px 52px rgba(0, 0, 0, .38), 0 0 0 1px rgba(130, 165, 220, .06);
  --ui-shadow-sm: 0 12px 30px rgba(0, 0, 0, .28), 0 0 0 1px rgba(130, 165, 220, .05);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% 0%, rgba(78, 161, 255, .17), transparent 28rem),
    radial-gradient(circle at 92% 10%, rgba(167, 139, 250, .14), transparent 26rem),
    radial-gradient(circle at 50% 110%, rgba(236, 72, 153, .09), transparent 28rem),
    linear-gradient(180deg, #07111f 0%, #0b1729 52%, #07111f 100%) !important;
  color: var(--ui-text-strong) !important;
}

[data-theme="dark"] .sb,
[data-theme="dark"] .tb,
[data-theme="dark"] .top {
  background: rgba(10, 22, 42, .90) !important;
  border-color: rgba(130, 165, 220, .18) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
}

[data-theme="dark"] .card,
[data-theme="dark"] .stat,
[data-theme="dark"] .sc,
[data-theme="dark"] .hcard,
[data-theme="dark"] .mm-card,
[data-theme="dark"] .metric,
[data-theme="dark"] .price-box,
[data-theme="dark"] .checkout-card,
[data-theme="dark"] .dash-tile,
[data-theme="dark"] .wallet-box,
[data-theme="dark"] .selected-box,
[data-theme="dark"] .quick-card,
[data-theme="dark"] .bundle,
[data-theme="dark"] .hist-item,
[data-theme="dark"] .filter-row,
[data-theme="dark"] .modal-box,
[data-theme="dark"] .drop {
  background:
    linear-gradient(180deg, rgba(18, 35, 64, .96), rgba(12, 25, 48, .92)) !important;
  border: 1px solid rgba(130, 165, 220, .18) !important;
  border-radius: 14px !important;
  box-shadow: var(--ui-shadow-sm) !important;
}

[data-theme="dark"] .card-head,
[data-theme="dark"] .card-h,
[data-theme="dark"] .price-head,
[data-theme="dark"] .modal-head,
[data-theme="dark"] .modal-hd,
[data-theme="dark"] .drop-head {
  background: linear-gradient(180deg, rgba(22, 43, 78, .96), rgba(14, 29, 55, .92)) !important;
  border-bottom: 1px solid rgba(130, 165, 220, .18) !important;
}

[data-theme="dark"] .hero,
[data-theme="dark"] .banner,
[data-theme="dark"] .welcome,
[data-theme="dark"] .api-hero,
[data-theme="dark"] .doc-hero,
[data-theme="dark"] .afa-hero,
[data-theme="dark"] .ish-hero,
[data-theme="dark"] .conf-top {
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .16), transparent 14rem),
    linear-gradient(105deg, #075ed8 0%, #213ed7 42%, #6d28d9 78%, #c026d3 100%) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .08) !important;
}

[data-theme="dark"] .na:hover,
[data-theme="dark"] .di:hover,
[data-theme="dark"] .wa-mi:hover,
[data-theme="dark"] .sub-nav .na:hover {
  background: rgba(78, 161, 255, .12) !important;
  color: #eef6ff !important;
}

[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .input,
[data-theme="dark"] .finput,
[data-theme="dark"] .fc,
[data-theme="dark"] .form-ctrl,
[data-theme="dark"] .ir,
[data-theme="dark"] .bundle-select {
  background: rgba(8, 20, 38, .88) !important;
  border-color: rgba(130, 165, 220, .24) !important;
  color: #eef6ff !important;
  -webkit-text-fill-color: #eef6ff !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: rgba(165, 183, 209, .62) !important;
  -webkit-text-fill-color: rgba(165, 183, 209, .62) !important;
}

[data-theme="dark"] .tbl th,
[data-theme="dark"] .table th,
[data-theme="dark"] .rtbl th,
[data-theme="dark"] .ptable th {
  background: rgba(22, 43, 78, .92) !important;
  color: #b8c8df !important;
}

[data-theme="dark"] .tbl td,
[data-theme="dark"] .table td,
[data-theme="dark"] .rtbl td,
[data-theme="dark"] .ptable td {
  background: rgba(14, 27, 50, .70) !important;
  color: #e8f1ff !important;
}

[data-theme="dark"] .pl {
  background:
    radial-gradient(circle at 18% 8%, rgba(78, 161, 255, .18), transparent 22rem),
    radial-gradient(circle at 90% 20%, rgba(167, 139, 250, .14), transparent 22rem),
    linear-gradient(150deg, #07111f 0%, #0b1729 48%, #10233f 100%) !important;
}

[data-theme="dark"] .pr {
  background:
    radial-gradient(circle at 12% 0%, rgba(78, 161, 255, .11), transparent 22rem),
    #0b1729 !important;
}

[data-theme="dark"] .theme-btn {
  background: rgba(14, 27, 50, .88) !important;
  border-color: rgba(130, 165, 220, .24) !important;
  color: #eaf3ff !important;
}

/* Shared responsive shell fixes for client/admin topbars. */
.d-none {
  display: none !important;
}

@media (min-width: 576px) {
  .d-sm-inline {
    display: inline !important;
  }
}

.tb,
.tb-l,
.tb-r,
.top,
.top-actions {
  min-width: 0;
}

.pg-title,
.brand span,
.sb-un {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 767px) {
  .tb {
    left: 0 !important;
    min-height: 60px !important;
    height: auto !important;
    padding: 8px 12px !important;
    gap: 8px !important;
    overflow: visible !important;
  }

  .main {
    margin-left: 0 !important;
    padding-top: 60px !important;
  }

  .tb-l {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .pg-title {
    white-space: nowrap !important;
  }

  .tb-r {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  .tb-r .bal,
  .tb-r .admin-chip span,
  .tb-r .user-name,
  .tb-r .top-user-name,
  #userBtn .d-sm-inline,
  #userBtn .top-user-name,
  #userBtn .bi-chevron-down {
    display: none !important;
  }

  .tbtn,
  .ham {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 13px !important;
  }

  #userBtn {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  .drop {
    max-width: calc(100vw - 24px) !important;
  }

  #notifDrop {
    right: -52px !important;
    width: min(300px, calc(100vw - 24px)) !important;
  }

  #userDrop {
    right: 0 !important;
  }

  .content {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media (max-width: 380px) {
  .tb {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .tb-r {
    gap: 5px !important;
  }

  .tbtn,
  .ham,
  #userBtn {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
  }
}

/* Login strip panel override: support separate light and dark auth side themes. */
[data-theme="light"] .pl.strip-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(219, 234, 254, .98), transparent 19rem),
    linear-gradient(155deg, #f8fbff 0%, #eff6ff 48%, #dbeafe 100%) !important;
  color: #0f172a !important;
}

[data-theme="dark"] .pl.strip-panel {
  background:
    radial-gradient(circle at 0% 0%, rgba(37, 99, 235, .24), transparent 18rem),
    radial-gradient(circle at 110% 92%, rgba(225, 29, 72, .16), transparent 17rem),
    linear-gradient(155deg, #07111f 0%, #0b1729 52%, #10233f 100%) !important;
  color: #eaf3ff !important;
}

[data-theme="light"] .pl.strip-panel .strip-title,
[data-theme="light"] .pl.strip-panel .strip-feature strong {
  color: #0f172a !important;
}

[data-theme="dark"] .pl.strip-panel .strip-title,
[data-theme="dark"] .pl.strip-panel .strip-feature strong {
  color: #f8fbff !important;
}

[data-theme="light"] .pl.strip-panel .strip-copy,
[data-theme="light"] .pl.strip-panel .strip-feature small {
  color: #64748b !important;
}

[data-theme="dark"] .pl.strip-panel .strip-copy,
[data-theme="dark"] .pl.strip-panel .strip-feature small {
  color: #b8c8df !important;
}

[data-theme="dark"] .pl.strip-panel .strip-wrap {
  background:
    radial-gradient(circle at -12% 0%, rgba(37,99,235,.24), transparent 96px),
    radial-gradient(circle at 112% 100%, rgba(225,29,72,.18), transparent 128px),
    linear-gradient(180deg, rgba(16,35,63,.98) 0%, rgba(8,20,38,.98) 100%) !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.26) !important;
}

[data-theme="dark"] .pl.strip-panel .strip-wrap::before {
  background: rgba(59,130,246,.18) !important;
}

[data-theme="dark"] .pl.strip-panel .strip-wrap::after {
  background: rgba(225,29,72,.13) !important;
}

[data-theme="dark"] .pl.strip-panel .strip-ic {
  background: rgba(59,130,246,.13) !important;
  border-color: rgba(147,197,253,.28) !important;
}

[data-theme="dark"] .pl.strip-panel .strip-card {
  background: rgba(15,23,42,.62) !important;
  border-color: rgba(147,197,253,.22) !important;
}

[data-theme="dark"] .pl.strip-panel .strip-person {
  background: linear-gradient(135deg, rgba(30,64,175,.8), rgba(15,23,42,.9)) !important;
  color: #93c5fd !important;
}

[data-theme="dark"] .pl.strip-panel .strip-pot,
[data-theme="dark"] .pl.strip-panel .strip-pot::before {
  background: linear-gradient(180deg, #f8fbff 0%, #dbeafe 100%) !important;
}

[data-theme="light"] .pl.strip-panel .strip-person::after,
[data-theme="dark"] .pl.strip-panel .strip-person::after {
  content: '\2713' !important;
}
[data-validator="phone"].phone-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .12) !important;
}

[data-validator="phone"].phone-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .10) !important;
}

@media (max-width: 640px) {
  input[data-validator="phone"] {
    min-height: 44px;
    font-size: 16px !important;
  }
}