/* AsyrofOTP design system — shared frontend layer
   Visual-only layer. Keep existing page behavior and data contracts unchanged. */
:root {
  --aso-brand: #1769d2;
  --aso-brand-hover: #1058b8;
  --aso-brand-soft: #eaf2fc;
  --aso-ink: #17212f;
  --aso-muted: #657386;
  --aso-canvas: #f5f7fa;
  --aso-surface: #ffffff;
  --aso-line: #e2e8f0;
  --aso-radius-sm: 9px;
  --aso-radius-md: 13px;
  --aso-radius-lg: 18px;
  --aso-shadow-panel: 0 8px 28px rgba(23, 33, 47, .055);
  --aso-focus: 0 0 0 3px rgba(23, 105, 210, .2);
  --aso-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
[data-theme="dark"] {
  --aso-ink: #e8eef6;
  --aso-muted: #9aa9bb;
  --aso-canvas: #101722;
  --aso-surface: #182231;
  --aso-line: #2b394b;
  --aso-brand-soft: #1b3555;
  --aso-shadow-panel: 0 10px 28px rgba(0, 0, 0, .18);
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
body {
  font-family: var(--aso-font);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
:where(button, input, select, textarea) { font: inherit; }
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 0;
  box-shadow: var(--aso-focus);
}
:where(input, select, textarea) {
  border-radius: var(--aso-radius-sm);
  border-color: var(--aso-line);
}
:where(input, select, textarea)::placeholder { color: var(--aso-muted); opacity: .78; }
:where(button, .btn, [role="button"]) { -webkit-tap-highlight-color: transparent; }
:where(.card, .panel, .modal, .dropdown-menu, .popover, .stat-card) {
  box-shadow: var(--aso-shadow-panel);
}
:where(.card, .panel, .modal, .stat-card) { border-radius: var(--aso-radius-md); }
:where(.btn-primary, .btn.primary, .btn--primary, button[type="submit"]) {
  background-color: var(--aso-brand);
  border-color: var(--aso-brand);
}
:where(.btn-primary, .btn.primary, .btn--primary, button[type="submit"]):hover {
  background-color: var(--aso-brand-hover);
}
:where(table) { border-collapse: separate; border-spacing: 0; }
:where(th) { color: var(--aso-muted); font-weight: 650; }
:where(td, th) { border-color: var(--aso-line); }
:where(a) { text-underline-offset: .18em; }
:where(.sidebar, .topbar, .nav, .navbar) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
:where(.sidebar, .topbar) { border-color: var(--aso-line); }
:where(.sidebar .nav-item, .sidebar-nav a, .nav-menu a) {
  transition: background-color .16s ease, color .16s ease;
}
:where(.sidebar .nav-item:hover, .sidebar-nav a:hover) {
  background: var(--aso-brand-soft);
}
:where(.badge, .status-badge, .pill) { letter-spacing: .01em; }
img, svg { max-width: 100%; }
pre, code, .font-mono, .otp-code, .order-id, .transaction-id {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}
@media (max-width: 760px) {
  body { overflow-x: hidden; }
  :where(.main, main, .content, .page-content) { min-width: 0; }
  :where(table) { min-width: 620px; }
  :where(.table-wrap, .table-responsive, .table-container) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  :where(input, select, textarea) { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Admin operations interface */
html:has(#app){--bg:#101722;--surface:#182231;--surface-light:#202d3e;--border:#2b394b;--text-main:#e8eef6;--text-muted:#9aa9bb;--primary:#6aa6f5;--success:#42c995;--danger:#f07178;--warning:#e8b45d;--purple:#aa96ef;--radius:14px;--shadow:0 8px 24px rgba(0,0,0,.16)}
html:has(#app) body{background:var(--bg);background-image:none;color:var(--text-main);font-family:var(--aso-font)}
html:has(#app) .sidebar{background:#151f2d;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 30px rgba(0,0,0,.2);backdrop-filter:none}
html:has(#app) .logo-icon{background:var(--primary);color:#0b1727;border:0;box-shadow:none;border-radius:11px}
html:has(#app) .collapse-btn,html:has(#app) .icon-btn,html:has(#app) .theme-btn,html:has(#app) .mobile-toggle,html:has(#app) .logout-btn{background:var(--surface-light);color:var(--text-muted);border:1px solid var(--border);border-radius:10px;box-shadow:none}
html:has(#app) .nav-item{border:1px solid transparent;border-radius:10px;color:var(--text-muted);font-weight:550}
html:has(#app) .nav-item:hover{background:#202e40;color:var(--text-main)}
html:has(#app) .nav-item.active{color:#eaf3ff;background:#203b5d;border-color:#31577f;box-shadow:inset 3px 0 0 var(--primary)}
html:has(#app) .sidebar-footer{border-top:1px solid var(--border)}
html:has(#app) .user-avatar{background:#26364a;border:1px solid #3a4d65}
html:has(#app) .main{gap:18px;padding-top:18px}
html:has(#app) .topbar{background:transparent;border:0;border-bottom:1px solid var(--border);border-radius:0;box-shadow:none;padding:8px 2px 18px}
html:has(#app) .topbar h1{font-size:clamp(1.25rem,2vw,1.65rem);letter-spacing:-.035em}
html:has(#app) .stats{gap:12px}
html:has(#app) .stat{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:none;padding:17px 18px}
html:has(#app) .stat-label{font:600 .7rem var(--aso-font);color:var(--text-muted);letter-spacing:.055em}
html:has(#app) .stat-value{font:700 clamp(1.35rem,2.2vw,1.8rem) var(--aso-font);color:var(--text-main)}
html:has(#app) .stat:nth-child(n) .stat-value{color:var(--text-main)}
html:has(#app) .analytics-panel{background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:none;padding:19px}
html:has(#app) .analytics-controls{background:#111b29;border:1px solid var(--border)}
html:has(#app) .analytics-range.active{background:#294a70;color:#f1f6ff}
html:has(#app) .tabs{gap:6px;border-bottom:1px solid var(--border);padding:0 0 9px;scrollbar-width:thin}
html:has(#app) .tab{padding:8px 13px;background:transparent;color:var(--text-muted);border:1px solid transparent;border-radius:9px;box-shadow:none;font-size:.82rem;font-weight:600}
html:has(#app) .tab.active{background:#203b5d;color:#eaf3ff;border-color:#31577f;box-shadow:none;transform:none}
html:has(#app) .toolbar{margin-top:0}
html:has(#app) .search-bar,html:has(#app) .filter-select{background:var(--surface);border:1px solid var(--border);border-radius:10px;box-shadow:none}
html:has(#app) .search-bar input{color:var(--text-main);font-weight:450}
html:has(#app) #content{gap:11px}
html:has(#app) .card,html:has(#app) .tool-card{background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:none;padding:18px}
html:has(#app) .card-header{border-bottom:1px solid var(--border)}
html:has(#app) .card-title,html:has(#app) .tool-card h4{color:var(--text-main);font-weight:650}
html:has(#app) .badge{border:1px solid transparent;border-radius:6px;box-shadow:none;font:650 .68rem var(--aso-font)}
html:has(#app) .btn,html:has(#app) .page-btn{border:1px solid var(--border);border-radius:9px;background:var(--surface-light);color:var(--text-main);box-shadow:none;font-weight:600}
html:has(#app) .btn-primary{background:#2869b5;color:#fff;border-color:#397fcf}
html:has(#app) .btn-danger{background:#6f2d39;color:#ffecef;border-color:#87404b}
html:has(#app) .btn-success{background:#1e5948;color:#e7fff5;border-color:#28765d}
html:has(#app) .form-control{background:#111b29;color:var(--text-main);border:1px solid var(--border);border-radius:9px;font:450 .9rem var(--aso-font)}
html:has(#app) .modal,html:has(#app) .alert-box{background:var(--surface);border:1px solid var(--border);border-radius:15px;box-shadow:0 24px 70px rgba(0,0,0,.38)}
html:has(#app) .modal-header{border-bottom:1px solid var(--border)}
html:has(#app) .modal-close{background:#6f2d39;border:1px solid #87404b;box-shadow:none}
html:has(#app) table{width:100%;border-collapse:collapse}
html:has(#app) th{background:#141f2d;color:var(--text-muted);font:650 .7rem var(--aso-font);letter-spacing:.045em;text-transform:uppercase}
html:has(#app) td,html:has(#app) th{padding:11px 12px;border-bottom:1px solid var(--border)}
html:has(#app) tr:hover td{background:rgba(106,166,245,.045)}
@media(max-width:768px){html:has(#app) .main{padding:12px 12px 90px}html:has(#app) .topbar{position:static}html:has(#app) .stats{grid-template-columns:repeat(2,minmax(0,1fr))}html:has(#app) .stat{padding:14px}html:has(#app) .analytics-panel{padding:14px}}
@media(max-width:420px){html:has(#app) .stats{grid-template-columns:1fr 1fr;gap:8px}html:has(#app) .stat-value{font-size:1.2rem}}

/* Shared customer-facing token alignment */
:root {
  --p: var(--aso-brand);
  --p-ink: #fff;
  --bg: var(--aso-canvas);
  --surface: var(--aso-surface);
  --surface-2: #edf1f6;
  --border: var(--aso-line);
  --border-2: #c8d2df;
  --txt: var(--aso-ink);
  --txt2: #536276;
  --txt3: #78879a;
  --r-sm: var(--aso-radius-sm);
  --r: var(--aso-radius-md);
  --r-lg: var(--aso-radius-lg);
}
html[data-theme="dark"]:not(:has(#app)) {
  --p: #70adf7;
  --p-ink: #071626;
  --bg: #101722;
  --surface: #182231;
  --surface-2: #202d3e;
  --border: #2b394b;
  --border-2: #3b4b60;
  --txt: #e8eef6;
  --txt2: #aab8c9;
  --txt3: #8192a7;
}
html:not(:has(#app)) body { background-color: var(--bg); color: var(--txt); }
html:not(:has(#app)) :where(.card,.panel,.stat-card,.service-card,.order-card,.deposit-card,.profile-card,.auth-card) {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 5px 18px rgba(23,33,47,.045);
  border-radius: var(--aso-radius-md);
}
html[data-theme="dark"]:not(:has(#app)) :where(.card,.panel,.stat-card,.service-card,.order-card,.deposit-card,.profile-card,.auth-card) {
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
}
html:not(:has(#app)) :where(input,select,textarea,.form-control) {
  background-color: var(--surface);
  color: var(--txt);
  border-color: var(--border);
  border-radius: var(--aso-radius-sm);
}
html:not(:has(#app)) :where(.btn,.button,.btn-primary,.btn-glass) {
  min-height: 40px;
  border-radius: 10px;
  font-weight: 600;
}
html:not(:has(#app)) :where(.btn-primary,.btn.primary,.btn--primary,button[type="submit"]) {
  background: var(--p);
  border-color: var(--p);
  color: var(--p-ink);
}
html:not(:has(#app)) :where(.btn-primary,.btn.primary,.btn--primary,button[type="submit"]):hover {
  filter: brightness(.96);
}
html:not(:has(#app)) :where(.nav,.navbar,.topbar,.sidebar) {
  backdrop-filter: none;
}
html:not(:has(#app)) :where(.nav,.navbar,.topbar) {
  border-color: var(--border);
}
html:not(:has(#app)) :where(.nav-item.active,.sidebar-nav a.active) {
  background: var(--aso-brand-soft);
  color: var(--aso-brand);
}
html:not(:has(#app)) :where(.badge,.status-badge,.pill) {
  box-shadow: none;
}
@media (max-width: 760px) {
  html:not(:has(#app)) :where(.wrap,.container,.content,.main-content) {
    max-width: 100%;
    min-width: 0;
  }
}

/* Keep the admin theme isolated from customer-facing tokens */
html:has(#app) {
  --bg: #101722; --surface: #182231; --surface-light: #202d3e;
  --border: #2b394b; --text-main: #e8eef6; --text-muted: #9aa9bb;
  --primary: #6aa6f5; --success: #42c995; --danger: #f07178;
  --warning: #e8b45d; --purple: #aa96ef; --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,.16);
}

/* Authentication surfaces: restrained, clear form hierarchy */
html:not(:has(#app)):has(.auth-wrap) body { background: var(--bg); }
html:not(:has(#app)):has(.auth-wrap) .auth-wrap { max-width: 420px; gap: 18px; }
html:not(:has(#app)):has(.auth-wrap) .auth-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 15px;
  padding: clamp(22px,5vw,30px);
  box-shadow: 0 12px 34px rgba(23,33,47,.07);
}
html[data-theme="dark"]:not(:has(#app)):has(.auth-wrap) .auth-card {
  box-shadow: 0 16px 38px rgba(0,0,0,.2);
}
html:not(:has(#app)):has(.auth-wrap) .brand-mark {
  background: var(--aso-brand); color: #fff; border-radius: 9px;
}
html:not(:has(#app)):has(.auth-wrap) .auth-head h1 {
  font-size: clamp(1.35rem,4vw,1.55rem);
  letter-spacing: -.035em; font-weight: 700;
}
html:not(:has(#app)):has(.auth-wrap) .input-box input {
  min-height: 46px; border-radius: 9px;
  background: var(--bg); border-color: var(--border);
}
html:not(:has(#app)):has(.auth-wrap) .input-box input:focus {
  border-color: var(--aso-brand);
  box-shadow: 0 0 0 3px rgba(23,105,210,.14);
}
html:not(:has(#app)):has(.auth-wrap) .back-btn,
html:not(:has(#app)):has(.auth-wrap) .theme-btn {
  border-radius: 9px; background: var(--surface);
}
html:not(:has(#app)):has(.auth-wrap) :where(.btn,.submit-btn,.auth-submit,button[type="submit"]) {
  min-height: 46px; border-radius: 9px; font-weight: 650;
}
@media(max-width:480px) {
  html:not(:has(#app)):has(.auth-wrap) body { align-items: flex-start; padding: 72px 16px 24px; }
  html:not(:has(#app)):has(.auth-wrap) .auth-card { padding: 22px 18px; }
}

:root{--aso-success:#18794e;--aso-success-soft:#e8f5ed;--aso-warning:#9a6500;--aso-warning-soft:#fff4d9;--aso-danger:#c13f4a;--aso-danger-soft:#fdebed;--aso-purple:#7050c8;--aso-purple-soft:#f0ebff;--aso-orange:#b85b19;--aso-orange-soft:#fff0e4;--aso-info:#1769d2;--aso-info-soft:#eaf2fc;--success:var(--aso-success);--ok:var(--aso-success);--warning:var(--aso-warning);--warn:var(--aso-warning);--danger:var(--aso-danger);--err:var(--aso-danger);--purple:var(--aso-purple);--orange:var(--aso-orange);--info:var(--aso-info)}
html[data-theme="dark"]{--aso-success:#54d69b;--aso-success-soft:#153b30;--aso-warning:#f2c16b;--aso-warning-soft:#40321a;--aso-danger:#ff8088;--aso-danger-soft:#43242b;--aso-purple:#b6a3ff;--aso-purple-soft:#30284b;--aso-orange:#ffad75;--aso-orange-soft:#432d20;--aso-info:#80baff;--aso-info-soft:#1b3555}
html:has(#app){--success:#54d69b;--warning:#f2c16b;--danger:#ff8088;--purple:#b6a3ff;--orange:#ffad75;--info:#80baff}
:where(.status-success,.badge-success,.text-success,.success-text){color:var(--aso-success)}:where(.status-warning,.badge-warning,.text-warning,.warning-text){color:var(--aso-warning)}:where(.status-danger,.badge-danger,.text-danger,.danger-text,.text-error){color:var(--aso-danger)}:where(.status-purple,.badge-purple,.text-purple){color:var(--aso-purple)}:where(.status-orange,.badge-orange,.text-orange){color:var(--aso-orange)}
@view-transition{navigation:auto}::view-transition-old(root){animation:aso-out .16s ease both}::view-transition-new(root){animation:aso-in .24s cubic-bezier(.2,.7,.2,1) both}@keyframes aso-out{to{opacity:0;transform:translateY(3px) scale(.997)}}@keyframes aso-in{from{opacity:0;transform:translateY(7px) scale(.995)}to{opacity:1;transform:none}}body.aso-page-enter{animation:aso-in .24s ease both}body.aso-page-exit{animation:aso-out .15s ease both;pointer-events:none}
.aso-support{position:fixed;right:20px;bottom:22px;z-index:20000;font-family:var(--aso-font)}.aso-support-trigger{display:flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 17px;border:1px solid var(--aso-brand);border-radius:999px;background:var(--aso-brand);color:#fff;box-shadow:0 10px 30px rgba(23,105,210,.26);font:650 .88rem var(--aso-font);cursor:pointer;touch-action:manipulation;transition:transform .18s ease,box-shadow .18s ease}.aso-support-trigger:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(23,105,210,.32)}.aso-support-trigger svg{width:19px;height:19px;flex:none}.aso-support-panel{position:absolute;right:0;bottom:calc(100% + 12px);width:min(290px,calc(100vw - 32px));padding:13px;border:1px solid var(--aso-line);border-radius:17px;background:var(--aso-surface);color:var(--aso-ink);box-shadow:0 18px 55px rgba(10,20,35,.2);animation:aso-in .18s ease both}.aso-support-panel[hidden]{display:none}.aso-support-heading{margin:2px 4px 10px;font-size:.84rem;font-weight:750}.aso-support-link{display:flex;align-items:center;gap:11px;min-height:54px;padding:9px 10px;border:1px solid var(--aso-line);border-radius:12px;color:var(--aso-ink);text-decoration:none}.aso-support-link+.aso-support-link{margin-top:8px}.aso-support-link:hover{background:var(--aso-brand-soft);border-color:var(--aso-brand)}.aso-support-link svg{width:22px;height:22px;flex:none;color:var(--aso-brand)}.aso-support-link strong{display:block;font-size:.86rem}.aso-support-link small{display:block;margin-top:2px;color:var(--aso-muted);font-size:.72rem}@media(max-width:768px){.aso-support{right:14px;bottom:calc(88px + env(safe-area-inset-bottom,0px))}.aso-support-trigger{min-height:46px;padding:0 15px}}@media(prefers-reduced-motion:reduce){body.aso-page-enter,body.aso-page-exit,.aso-support-panel{animation:none!important}.aso-support-trigger,.aso-support-link{transition:none!important}}