/* Layout refinements layered on the approved OTPBlast palette. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
html { scroll-padding-top: 94px; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:where(a,button,input,select,textarea,[role="button"],[tabindex="0"]):focus-visible {
  outline: 2px solid var(--accent-orange);
  outline-offset: 3px;
}
:where(input,select,textarea) { max-width:100%; min-width:0; }
:where(.header-left,.header-right,.dashboard-grid,.order-card,.right-column,.admin-panel,.admin-layout,.workspace-card,.provider-admin-card) { min-width:0; }
.main-header { gap:12px; }
.header-right { gap:12px; min-width:0; }
.header-left { min-width:0; }
.header-right > * { flex-shrink:0; }
#user-nav-container { min-width:0; }
.user-btn { max-width:200px; }
.user-name { max-width:95px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.user-capsule { position:relative; }
.user-menu-chevron { font-size:.75rem; color:var(--text-muted); }
.profile-menu {
  display:none; position:absolute; top:calc(100% + 12px); right:0;
  width:min(290px,calc(100vw - 24px)); z-index:330;
  padding:8px; background:var(--bg-secondary);
  border:1px solid var(--border-highlight); border-radius:var(--radius-md);
  box-shadow:var(--shadow-lg); animation:dropdown-pop .2s cubic-bezier(.16,1,.3,1);
}
.profile-menu.show {display:block;}
.profile-menu-heading {display:flex; flex-direction:column; gap:4px; padding:12px; border-bottom:1px solid var(--border-color); margin-bottom:5px; overflow-wrap:anywhere;}
.profile-menu-heading strong {font-size:.95rem;}
.profile-menu-heading small {color:var(--text-secondary); font-size:.8rem;}
.profile-menu a,.profile-menu button {display:flex; width:100%; text-decoration:none; align-items:center; gap:10px; text-align:left; background:transparent; border:0; color:var(--text-primary); padding:11px 12px; border-radius:var(--radius-sm); cursor:pointer; font-size:.88rem; font-weight:600;}
.profile-menu a:hover,.profile-menu button:hover {background:var(--bg-tertiary);color:var(--accent-orange);}
.profile-menu button {border-top:1px solid var(--border-color);margin-top:3px;}
.theme-toggle-btn,.btn-drawer-toggle,.drawer-close-btn { flex-shrink:0; }
.theme-toggle-btn { font-size:1rem; }
.currency-dropdown { max-width:calc(100vw - 24px); max-height:min(65vh,420px); overflow-y:auto; }
.currency-option {min-height:42px; gap:8px;}
.currency-option.selected {background:var(--bg-tertiary);color:var(--accent-orange);}
.drawer-nav-item {min-height:44px;}
.drawer-user-card {overflow-wrap:anywhere;}
body.drawer-visible {overflow:hidden;}
.nav-drawer {width:min(320px,calc(100vw - 20px)); height:100dvh;}
.drawer-header,.drawer-footer {flex-shrink:0;}
.drawer-nav-list {overscroll-behavior:contain;}
.workspace-card,.balance-summary,.admin-stat-card,.provider-admin-card {height:100%;}
.dashboard-page,.admin-panel {min-width:0;}
#toast-container {max-width:calc(100vw - 32px);pointer-events:none;}
#toast-container > * {max-width:100%;overflow-wrap:anywhere;}
.table-scroll { width:100%; min-width:0; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; border-radius:var(--radius-sm); }
.table-scroll:focus-visible {outline:2px solid var(--accent-orange);outline-offset:1px;}
.admin-layout .custom-table {width:100%; border-collapse:collapse;}
.admin-layout .custom-table td,.admin-layout .custom-table th {vertical-align:middle;}
.admin-layout .services-table-header-row {gap:12px;}
.admin-layout .services-table-header-row > div:last-child {min-width:0;flex-wrap:wrap;}
.admin-layout .search-service-admin {max-width:100%;}
.admin-layout .override-stock-box,.admin-layout .p-field,.admin-layout .p-input {min-width:0;}
.admin-layout .admin-nav-tab {justify-content:center;}
.admin-layout .custom-table button {min-height:34px;}
.provider-tabs .provider-tab,.picker-item,.quick-app-pill {touch-action:manipulation;}
.dropdown-menu-popover {overscroll-behavior:contain; scrollbar-width:thin; max-height:min(380px,60dvh);}
.dropdown-menu-popover .picker-item {min-height:44px; gap:8px;}
.dropdown-menu-popover .picker-item-left {min-width:0;}
.dropdown-menu-popover .picker-item-left span {overflow-wrap:anywhere;}
.select-box-trigger[aria-expanded="true"] {border-color:var(--accent-red);}
.modal-overlay {overscroll-behavior:contain;}
.modal-content-card {max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;}
.hero-actions {flex-wrap:wrap;}
@media (max-width:1300px) {
  .main-header {padding-inline:20px;}
  .header-nav {gap:2px;}
  .header-nav .nav-link {padding-inline:10px;font-size:.82rem;}
  .balance-label {font-size:.6rem;letter-spacing:0;}
  .header-right {gap:8px;}
}
@media (max-width:1120px) {
  .main-header {padding-inline:16px;}
  .header-nav {display:none;}
  .admin-layout .admin-tabs-nav {flex-wrap:wrap;overflow-x:visible;}
  .admin-layout .admin-nav-tab {flex:1 1 auto;}
  .dashboard-container,.admin-layout {padding-inline:20px;}
}
@media (max-width:720px) {
  .main-header {height:64px; gap:8px; padding-inline:12px;}
  .header-left {gap:9px;}
  .header-right {gap:8px;}
  .brand-icon {width:36px;height:36px;border-radius:10px;}
  .brand-name {font-size:1.18rem;}
  .btn-drawer-toggle,.theme-toggle-btn {width:38px;height:38px;}
  .currency-btn {height:38px; padding:6px 8px;gap:4px;}
  #currency-current-symbol {display:none;}
  .balance-capsule {padding:4px 6px 4px 10px;gap:6px;}
  .balance-info .balance-label {font-size:.56rem;}
  .balance-value {font-size:.74rem;}
  .balance-capsule .btn-topup {padding:6px 8px;font-size:.72rem;}
  .user-btn {width:38px;height:38px; padding:4px;justify-content:center;}
  .user-btn .user-name,.user-btn .role-badge,.user-menu-chevron {display:none;}
  .user-avatar {width:28px;height:28px;flex-shrink:0;}
  .admin-tag {display:none;}
  .admin-layout .admin-tabs-nav {flex-wrap:nowrap;}
  .admin-layout .admin-nav-tab {justify-content:flex-start;}
  .ticker-wrap {height:34px;}
  .dashboard-container,.admin-layout {padding:20px 14px 40px;}
  .dashboard-grid {gap:16px;}
  .order-card,.active-numbers-card,.override-engine-card {padding:18px;}
  .provider-tabs {gap:4px;}
  .provider-tab .p-name {font-size:.78rem;}
  .price-tier-header {gap:8px;}
  .workspace-heading {gap:10px;}
  .workspace-heading .workspace-public-link {white-space:normal;}
  .modal-overlay {padding:12px;align-items:center;}
  .modal-content-card {padding:25px 18px 20px;}
  .info-cards-grid {grid-template-columns:1fr;}
  .hero-banner {padding:25px 20px;}
  .hero-title {font-size:clamp(1.6rem,6vw,2.2rem);}
  .hero-actions > * {flex:1 1 auto;justify-content:center;}
}
@media (max-width:440px) {
  .main-header {gap:6px;padding-inline:10px;}
  .header-left {gap:6px;}
  .header-right {gap:6px;}
  .brand-name {font-size:1.04rem;}
  .main-header .brand-name {display:none;}
  .brand-icon {width:32px;height:32px;font-size:1.04rem;}
  .btn-drawer-toggle,.theme-toggle-btn,.user-btn {width:34px;height:34px;}
  .currency-btn {height:34px;font-size:.72rem;padding:5px 6px;}
  .balance-capsule {padding:4px 7px;}
  .balance-capsule .btn-topup {display:none;}
  .balance-label {font-size:.55rem;}
  .balance-value {font-size:.7rem;}
  .user-btn .user-avatar {width:25px;height:25px;}
  .two-col-row {grid-template-columns:1fr;}
  .popular-quick-grid {grid-template-columns:repeat(4,minmax(0,1fr));}
  .payment-methods-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-container,.admin-layout {padding-inline:12px;}
  .admin-stats-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin-stat-card {padding:12px;}
  .admin-stat-card .val {font-size:1.15rem;}
}
@media (max-width:360px) {
  .balance-capsule {padding:4px 6px;}
  #currency-current-code {font-size:.68rem;}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  #bg-canvas {display:none;}
}

/* Compact forms on phones without changing the approved card style. */
@media(max-width:540px) {
  .auth-page-container {padding:20px 12px;min-height:calc(100dvh - 70px);align-items:flex-start;}
  .auth-card {padding:24px 18px;max-width:100%;}
  .setup-wrap {padding:16px 12px;}
  .setup-card {padding:24px 18px;}
  .admin-layout .services-table-header-row > div:last-child {width:100%;justify-content:flex-start;}
  .admin-layout .search-service-admin {flex:1 1 180px;}
}

.currency-option {width:100%;text-align:left;background:transparent;border:0;}
.currency-option:focus-visible {outline:2px solid var(--accent-orange);outline-offset:-2px;}

/* Catalog filters and stars keep OTPBlast's existing card surfaces and accent colors. */
.catalog-picker-toolbar{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px 6px;background:var(--bg-card);}
.catalog-mode-btn{border:1px solid var(--border-color);border-radius:8px;padding:7px 10px;background:var(--bg-input);color:var(--text-secondary);font-size:.77rem;font-weight:700;cursor:pointer;min-height:36px;}
.catalog-mode-btn:hover,.catalog-mode-btn.active{color:var(--accent-orange);border-color:var(--accent-red);background:rgba(255,59,48,.08);}
.catalog-picker-count{padding:3px 12px 8px;font-size:.73rem;color:var(--text-muted);}
.catalog-empty{padding:18px 14px;color:var(--text-muted);font-size:.83rem;text-align:center;}
.picker-item .star-fav-btn{min-width:38px;min-height:38px;flex-shrink:0;}
.picker-item.tier-choice{justify-content:space-between;}
.picker-item .picker-item-right{flex-wrap:nowrap;}
.admin-catalog-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.admin-provider-filter{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;padding:9px 12px;max-width:100%;}
@media (max-width:640px){.catalog-picker-toolbar{padding-inline:8px;}.catalog-mode-btn{flex:1 1 auto;padding-inline:6px;}.admin-provider-filter{width:100%;}.admin-catalog-controls{width:100%;}.admin-catalog-controls .search-service-admin{flex:1;min-width:155px;}}

.admin-service-pages{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:12px;padding:16px 4px;font-size:.77rem;color:var(--text-secondary);}
.admin-service-pages button{background:var(--bg-input);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;cursor:pointer;min-height:36px;}
.admin-service-pages button:hover:not(:disabled){border-color:var(--accent-red);color:var(--accent-orange);}
.admin-service-pages button:disabled{opacity:.4;cursor:not-allowed;}
/* Wallet ledger uses the existing OTPBlast card palette and spacing. */
.wallet-activity-panel {margin-top:18px;min-width:0;}
.wallet-activity-head {display:flex;justify-content:space-between;align-items:start;gap:14px;flex-wrap:wrap;}
.wallet-activity-head h2 {margin:0 0 6px;}
.wallet-activity-head p {margin:0;}
.wallet-ledger {margin-top:16px;display:grid;gap:8px;}
.wallet-ledger-row,.wallet-hold-row {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:var(--radius-sm);min-width:0;}
.wallet-ledger-label,.wallet-ledger-change {display:flex;flex-direction:column;gap:4px;min-width:0;overflow-wrap:anywhere;}
.wallet-ledger-change {text-align:right;flex-shrink:0;}
.wallet-ledger-row small {font-size:.74rem;color:var(--text-muted);}
.wallet-ledger-row strong {font-size:.88rem;}
.wallet-hold-overview {margin-top:22px;padding-top:16px;border-top:1px solid var(--border-color);}
.wallet-hold-overview h3 {font-size:1rem;margin-bottom:10px;}
.wallet-hold-overview .wallet-hold-row + .wallet-hold-row {margin-top:8px;}
#wallet-load-more {margin-top:12px;}
@media(max-width:520px) {.wallet-ledger-row,.wallet-hold-row {padding:10px;gap:6px;}.wallet-ledger-row strong {font-size:.8rem;}.wallet-activity-head>.workspace-action {width:auto;}}


/* Keep live price menus above the help card on desktop and phones. */
#view-buy .order-card{
  position:relative!important;
  top:auto!important;
  overflow:visible!important;
  z-index:30;
}
#view-buy .buy-help-column{
  position:relative!important;
  z-index:1;
}
#view-buy .form-group{
  isolation:auto;
}
#view-buy .dropdown-menu-popover{
  z-index:1200;
}
#view-buy #tier-dropdown-popover{
  max-height:min(420px,55dvh);
  overscroll-behavior:contain;
}
@media(max-width:760px){
  #view-buy .order-card{z-index:30;}
  #view-buy .buy-help-column{z-index:1;}
  #view-buy #tier-dropdown-popover{
    max-height:min(360px,50dvh);
  }
}