:root {
  color-scheme: light;
  --bg: #f5f5f9;
  --surface: #ffffff;
  --surface-2: #f8f8fb;
  --text: #2f2b3d;
  --muted: #6f6b7d;
  --line: #e6e6ec;
  --border: var(--line);
  --primary: #7367f0;
  --primary-strong: #6558e8;
  --primary-soft: #eeecff;
  --success: #28c76f;
  --success-soft: #e4f8ed;
  --danger: #ea5455;
  --danger-soft: #fdeaea;
  --warning: #ff9f43;
  --warning-soft: #fff1e3;
  --blue: #00cfe8;
  --blue-soft: #e0f8fb;
  --shadow: 0 4px 18px rgba(47, 43, 61, .08);
  --sidebar: 260px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171725;
  --surface: #242333;
  --surface-2: #2b2a3b;
  --text: #e7e6ef;
  --muted: #aaa7b7;
  --line: #3a394b;
  --primary-soft: #373258;
  --success-soft: #244538;
  --danger-soft: #4a3036;
  --warning-soft: #4d3b2d;
  --blue-soft: #25444c;
  --shadow: 0 4px 18px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 14px; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: 22px; }
h2 { margin-bottom: 4px; font-size: 18px; }
h3 { margin-bottom: 4px; font-size: 15px; }
small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
hr { width: 100%; margin: 20px 0; border: 0; border-top: 1px solid var(--line); }
code, .mono { font-family: "SFMono-Regular", Consolas, monospace; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.positive { color: var(--success) !important; }
.negative { color: var(--danger) !important; }

.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; inset: 0 auto 0 0; z-index: 50; display: flex; width: var(--sidebar); flex-direction: column; padding: 20px 14px; background: var(--surface); border-right: 1px solid var(--line); transition: transform .22s ease; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-size: 18px; }
.brand-mark { display: inline-grid; width: 34px; height: 34px; place-items: center; flex: none; border-radius: 8px; color: #fff; background: var(--primary); font-weight: 800; box-shadow: 0 5px 12px rgba(115, 103, 240, .25); }
.sidebar-brand { padding: 0 8px 20px; }
.sidebar-label { padding: 12px 10px 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
.sidebar-nav { display: grid; gap: 3px; overflow: auto; }
.nav-item { display: flex; min-height: 42px; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 6px; color: var(--muted); font-weight: 600; transition: .18s ease; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { color: var(--text); background: var(--surface-2); }
.nav-item.active { color: #fff; background: var(--primary); box-shadow: 0 4px 12px rgba(115, 103, 240, .3); }
.nav-notif { min-width: 20px; margin-left: auto; padding: 2px 5px; border-radius: 10px; color: #fff; background: #ea5455; font-size: 10px; line-height: 16px; text-align: center; }
.nav-item.active .nav-notif { color: #ea5455; background: #fff; }
.portal-link { margin-top: auto; }
.sidebar-user { display: grid; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 9px; margin-top: 14px; padding: 12px 8px 0; border-top: 1px solid var(--line); }
.sidebar-user strong, .sidebar-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: 12px; }
.sidebar-user span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.sidebar-user a, .sidebar-user button { color: var(--muted); }
.logout-form { margin: 0; }
.logout-form button { display: grid; padding: 2px; border: 0; background: transparent; cursor: pointer; }
.sidebar-user svg { width: 17px; }
.avatar { display: inline-grid; width: 34px; height: 34px; place-items: center; flex: none; border-radius: 50%; color: var(--primary); background: var(--primary-soft); font-weight: 800; }
.main-shell { grid-column: 2; min-width: 0; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; min-height: 74px; align-items: center; gap: 12px; padding: 12px 28px; background: color-mix(in srgb, var(--bg) 84%, transparent); border-bottom: 1px solid transparent; backdrop-filter: blur(14px); }
.topbar-title { min-width: 0; margin-right: auto; }
.topbar-title h1 { margin: 1px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eyebrow { margin: 0; color: var(--primary); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.eyebrow.light { color: rgba(255,255,255,.72); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { display: inline-grid; width: 38px; height: 38px; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--surface); cursor: pointer; }
.icon-btn:hover { color: var(--primary); border-color: var(--primary); }
.notif-button { position: relative; }
.notif-button b { position: absolute; top: -6px; right: -7px; min-width: 18px; padding: 1px 4px; border: 2px solid var(--surface); border-radius: 10px; color: #fff; background: #ea5455; font-size: 9px; line-height: 14px; text-align: center; }
.icon-btn svg { width: 17px; height: 17px; }
.mobile-menu { display: none; }
.balance-chip { display: grid; min-width: 125px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.balance-chip span { color: var(--muted); font-size: 10px; text-transform: uppercase; }
.balance-chip strong { margin-top: 2px; }
.balance-chip.large { min-width: 170px; }
.content { width: min(100%, 1600px); margin: 0 auto; padding: 18px 28px 38px; }
.sidebar-overlay { display: none; }

.card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.section-head p:not(.eyebrow) { margin: 6px 0 0; color: var(--muted); font-size: 12px; }
.content-grid { display: grid; gap: 18px; }
.dashboard-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr); margin-top: 18px; }
.admin-dashboard-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); margin-top: 18px; }
.deposit-layout, .profile-grid, .admin-list-grid, .system-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.catalog-admin-grid { grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); margin-top: 18px; }

/* Glassmorphism Hero Card with Glowing Light Effects */
.hero-balance {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 160px;
  padding: 28px 36px;
  border-radius: 20px;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(109, 40, 217, 0.95) 0%, rgba(124, 58, 237, 0.9) 45%, rgba(79, 70, 229, 0.95) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 40px -8px rgba(124, 58, 237, 0.45), 0 0 25px rgba(192, 132, 252, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-balance:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 48px -6px rgba(124, 58, 237, 0.55), 0 0 35px rgba(192, 132, 252, 0.38), inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Multi-layered Glowing Orbs */
.hero-glow-1 {
  position: absolute;
  top: -80px;
  right: -50px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.6) 0%, rgba(168, 85, 247, 0.35) 45%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
}

.hero-glow-2 {
  position: absolute;
  bottom: -90px;
  left: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.55) 0%, rgba(99, 102, 241, 0.3) 50%, transparent 70%);
  filter: blur(45px);
  pointer-events: none;
}

/* Shimmer Light Reflection overlay */
.hero-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transform: skewX(-25deg);
  animation: heroShimmer 6s infinite ease-in-out;
  pointer-events: none;
}

@keyframes heroShimmer {
  0% { left: -100%; }
  25% { left: 200%; }
  100% { left: 200%; }
}

/* Left Content Column */
.hero-left {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  color: #f3e8ff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-chip svg {
  width: 13px;
  height: 13px;
  color: #e9d5ff;
}

.hero-amount {
  margin: 2px 0 6px;
  font-size: 38px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
}

.hero-user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}

.hero-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f472b6 0%, #a855f7 100%);
  color: #ffffff;
  font-weight: 800;
  font-size: 13px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-user-details strong {
  display: block;
  font-size: 13px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

.hero-user-details small {
  font-size: 11px;
  color: #e9d5ff;
}

.hero-admin-badge {
  padding: 3px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

/* Right Action Buttons Column */
.hero-right {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.hero-reseller-badge {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  min-height: 29px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 245, 191, .82);
  border-radius: 999px;
  color: #4b2b00;
  background: linear-gradient(135deg, #fff4b0 0%, #f9cb57 38%, #e59a22 72%, #ffd978 100%);
  box-shadow: 0 7px 18px rgba(59, 28, 0, .23), 0 0 18px rgba(255, 209, 91, .2), inset 0 1px 0 rgba(255, 255, 255, .78);
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .12em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}

.hero-reseller-badge::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -70%;
  left: -45%;
  width: 32%;
  height: 240%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .78), transparent);
  transform: rotate(24deg);
  animation: resellerBadgeShine 4.8s ease-in-out infinite;
}

.hero-reseller-badge svg {
  width: 13px;
  height: 13px;
  stroke-width: 2.4;
}

@keyframes resellerBadgeShine {
  0%, 62%, 100% { left: -45%; }
  78% { left: 118%; }
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.22s ease;
}

.hero-btn svg {
  width: 16px;
  height: 16px;
}

.hero-btn.primary {
  background: #ffffff;
  color: #6d28d9 !important;
  border: 1px solid #ffffff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.hero-btn.primary:hover {
  background: #fdf4ff;
  color: #5b21b6 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}

.hero-btn.glass {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.hero-btn.glass:hover {
  background: rgba(255, 255, 255, 0.28);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
.app-bonus-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid rgba(115,103,240,.28);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(115,103,240,.16), rgba(255,255,255,.92));
  box-shadow: var(--shadow);
}
.app-bonus-card h2 { margin: 2px 0 5px; font-size: 18px; }
.app-bonus-card p { margin: 0; color: var(--muted); font-size: 13px; }
.app-bonus-icon {
  display: grid;
  width: 50px;
  height: 50px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--primary), #8b5cf6);
  box-shadow: 0 12px 28px rgba(115,103,240,.28);
}
.app-bonus-icon svg { width: 24px; height: 24px; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.dashboard-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.metric-card { display: flex; min-width: 0; align-items: center; gap: 13px; padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.metric-card p { margin-bottom: 4px; color: var(--muted); font-size: 12px; }
.metric-card strong { display: block; overflow-wrap: anywhere; font-size: 18px; }
.metric-card div > span { color: var(--muted); font-size: 10px; }
.metric-icon { display: inline-grid; width: 42px; height: 42px; place-items: center; flex: none; border-radius: 7px; }
.metric-icon svg { width: 20px; }
.metric-icon.violet { color: var(--primary); background: var(--primary-soft); }
.metric-icon.green { color: var(--success); background: var(--success-soft); }
.metric-icon.amber { color: var(--warning); background: var(--warning-soft); }
.metric-icon.blue { color: #0894a5; background: var(--blue-soft); }

.btn { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid transparent; border-radius: 6px; color: var(--text); background: var(--surface-2); font-weight: 650; cursor: pointer; transition: .16s ease; }
.btn:hover { transform: translateY(-1px); filter: brightness(.98); }
.btn:disabled { cursor: not-allowed; opacity: .55; transform: none; }
.btn.is-loading { cursor: wait; opacity: .88; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { color: #fff; background: var(--primary); box-shadow: 0 3px 8px rgba(115, 103, 240, .25); }
.btn.primary:hover { background: var(--primary-strong); }
.btn.secondary { color: var(--text); border-color: var(--line); background: var(--surface); }
.btn.secondary:hover { color: var(--primary); border-color: var(--primary); }
.btn.success { color: #167a47; border-color: transparent; background: var(--success-soft); }
.btn.danger { color: #c73c3d; border-color: transparent; background: var(--danger-soft); }
.btn.light { color: #323044; background: #fff; }
.btn.text { min-height: auto; padding: 4px; color: var(--primary); background: transparent; }
.btn.tiny { min-height: 30px; padding: 5px 9px; font-size: 11px; }
.btn.full { width: 100%; }
.button-row, .card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.card-actions { padding-top: 13px; border-top: 1px solid var(--line); }
.card-actions form, .button-row form { margin: 0; }
.button-spinner { display: inline-block; width: 17px; height: 17px; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .7s linear infinite; }
@keyframes button-spin { to { transform: rotate(360deg); } }

.field { display: grid; gap: 6px; min-width: 0; color: var(--muted); font-size: 11px; font-weight: 650; }
.field.grow { flex: 1 1 240px; }
.field input, .field select, .copy-row input { width: 100%; min-height: 40px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 6px; outline: none; color: var(--text); background: var(--surface); }
.field input:focus, .field select:focus, .copy-row input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.field input:disabled { color: var(--muted); background: var(--surface-2); }
.stack-form { display: grid; gap: 14px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.check-field { display: flex; align-items: center; gap: 8px; color: var(--text); }
.check-field input { width: 18px; height: 18px; accent-color: var(--primary); }
.remember-login { justify-content: flex-start; font-size: 14px; cursor: pointer; }
.copy-row { display: flex; gap: 8px; }
.referral-card { grid-column: 1 / -1; display: grid; gap: 18px; overflow: hidden; }
.referral-rate { display: inline-grid; min-width: 68px; min-height: 68px; place-items: center; padding: 8px; border-radius: 50%; color: #fff; background: var(--primary); box-shadow: 0 8px 20px rgba(115, 103, 240, .28); font-size: 20px; font-weight: 800; }
.referral-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.referral-stats > div { min-width: 0; padding: 15px; border-right: 1px solid var(--line); }
.referral-stats > div:last-child { border-right: 0; }
.referral-stats span, .referral-stats strong { display: block; overflow-wrap: anywhere; }
.referral-stats span, .referral-share span { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.referral-stats strong { font-size: 16px; }
.point-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.point-actions-grid.single { grid-template-columns: 1fr; }
.point-action-card { display: grid; gap: 14px; align-content: start; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.point-action-card h3 { margin: 3px 0 6px; font-size: 18px; }
.point-action-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.point-action-card .btn { width: 100%; }
.point-action-card .btn:disabled { cursor: not-allowed; opacity: .55; box-shadow: none; }
.point-action-disabled { min-height: 100%; border-style: dashed; background: linear-gradient(135deg, var(--surface-2), var(--primary-soft)); }
.point-action-disabled-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 12px; color: var(--primary); background: var(--surface); box-shadow: var(--shadow); }
.point-action-disabled-icon svg { width: 23px; height: 23px; }
.referral-share { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border: 1px dashed var(--primary); border-radius: 8px; background: var(--primary-soft); }
.referral-share strong { display: block; color: var(--primary); font-size: 18px; letter-spacing: 0; }
.referral-note { display: flex; align-items: flex-start; gap: 9px; margin: 0; padding: 12px 14px; border-left: 3px solid var(--success); color: var(--muted); background: var(--success-soft); font-size: 11px; line-height: 1.6; }
.referral-note svg { width: 17px; height: 17px; flex: none; color: var(--success); }
.referral-history { display: grid; gap: 0; border-top: 1px solid var(--line); }
.referral-history .section-head { margin: 14px 0 6px; }
.referral-history > div:not(.section-head) { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.referral-history > div:last-child { border-bottom: 0; }
.referral-history span, .referral-history small { display: block; }
.referral-history small, .referral-history time { margin-top: 3px; color: var(--muted); font-size: 10px; }
.reseller-upgrade-card { display: grid; gap: 18px; overflow: hidden; }
.reseller-upgrade-hero { display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), #8b5cf6); box-shadow: 0 18px 48px rgba(115,103,240,.22); }
.reseller-upgrade-hero .eyebrow { color: rgba(255,255,255,.82); }
.reseller-upgrade-hero h2 { margin: 4px 0 6px; font-size: 24px; }
.reseller-upgrade-hero p { margin: 0; color: rgba(255,255,255,.86); line-height: 1.6; }
.reseller-upgrade-icon { display: grid; width: 58px; height: 58px; flex: none; place-items: center; border-radius: 16px; color: var(--primary); background: #fff; box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.reseller-upgrade-icon svg { width: 28px; height: 28px; }
.reseller-upgrade-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.reseller-upgrade-grid article { padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.reseller-upgrade-grid span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.reseller-upgrade-grid strong { font-size: 18px; }
.reseller-upgrade-warning { display: flex; align-items: flex-start; gap: 10px; margin: 0; line-height: 1.55; }
.reseller-upgrade-warning > svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.reseller-upgrade-warning strong { display: block; margin-bottom: 4px; color: inherit; }
.reseller-upgrade-warning p { margin: 0; color: inherit; font-size: 11px; }
.reseller-upgrade-ack { align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); font-size: 12px; line-height: 1.5; cursor: pointer; }
.reseller-upgrade-ack input { flex: none; margin-top: 1px; }
.reseller-price-compare { display: grid; gap: 12px; }
.reseller-price-list { display: grid; gap: 10px; }
.reseller-price-list article { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.reseller-price-list strong, .reseller-price-list span { display: block; }
.reseller-price-list span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.price-compare-values { display: flex; align-items: center; gap: 10px; flex: none; }
.price-compare-values small { display: grid; gap: 2px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; text-align: right; }
.price-compare-values b { color: var(--text); font-size: 13px; text-transform: none; }
.price-compare-values small:last-child b { color: var(--success); }
.price-compare-values svg { width: 16px; color: var(--primary); }
.settings-form { display: grid; gap: 18px; }
.settings-save { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; padding: 10px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(10px); box-shadow: var(--shadow); }
.provider-account-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.provider-settings-stack { display: grid; gap: 18px; }
.provider-account-card { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.provider-account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.provider-account-head h2 { margin: 2px 0 0; }
.provider-balance { display: grid; gap: 3px; padding: 17px; border: 1px solid color-mix(in srgb, var(--line) 75%, var(--primary) 25%); border-radius: 14px; background: var(--primary-soft); }
.provider-balance span, .provider-balance small, .provider-snapshot small { color: var(--muted); font-size: 11px; }
.provider-balance strong { overflow-wrap: anywhere; color: var(--primary); font-size: clamp(22px, 4vw, 31px); }
.provider-account-details { max-height: none; }
.provider-profile-error { display: flex; align-items: flex-start; gap: 11px; padding: 15px; border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line)); border-radius: 13px; background: color-mix(in srgb, var(--danger) 8%, var(--surface)); color: var(--danger); }
.provider-profile-error svg { flex: 0 0 auto; width: 20px; height: 20px; }
.provider-profile-error p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.provider-form-actions { justify-content: flex-end; padding-top: 2px; }
.provider-snapshot { justify-content: center; padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }

.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.order-filter-card { position: relative; z-index: 12; }
.order-toolbar { overflow: visible; }
.service-buttons-bar { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; margin: 12px 0 6px !important; max-height: 180px !important; overflow-y: auto !important; padding: 2px !important; }
.service-btn-chip { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 13px !important; border-radius: 9px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--text) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all 0.18s ease !important; user-select: none !important; }
.service-btn-chip:hover { border-color: var(--primary) !important; background: var(--surface-2) !important; color: var(--primary) !important; }
.service-btn-chip.active { border-color: var(--primary) !important; background: var(--primary) !important; color: #ffffff !important; box-shadow: 0 4px 12px rgba(115, 103, 240, 0.3) !important; }
.country-buttons-list { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 10px !important; max-height: 220px !important; overflow-y: auto !important; padding: 4px 2px !important; }
.country-btn-picker { display: flex !important; align-items: center !important; gap: 10px !important; padding: 9px 12px !important; border-radius: 9px !important; border: 1px solid var(--line) !important; background: var(--surface) !important; color: var(--text) !important; font-size: 13px !important; font-weight: 600 !important; text-align: left !important; cursor: pointer !important; transition: all 0.18s ease !important; user-select: none !important; }
.country-btn-picker:hover { border-color: var(--primary) !important; background: var(--surface-2) !important; color: var(--primary) !important; }
.country-btn-picker.active, .country-btn-picker.selected { border-color: var(--primary) !important; background: var(--primary-soft) !important; color: var(--primary) !important; font-weight: 700 !important; box-shadow: 0 2px 8px rgba(115, 103, 240, 0.2) !important; }
.country-btn-flag { font-size: 18px !important; line-height: 1 !important; flex-shrink: 0 !important; }
.country-btn-info { display: flex !important; flex-direction: column !important; min-width: 0 !important; }
.country-btn-info strong { font-size: 13px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.country-btn-info small { font-size: 10px !important; color: var(--muted) !important; margin-top: 1px !important; }
.order-builder-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr); align-items: start; gap: 18px; margin-top: 18px; }
.service-browser { min-height: 430px; }
.service-config { display: none; margin-top: 10px; min-height: 0; }
.service-config.active { display: block; }
.service-picker-list { display: grid; gap: 8px; }
.service-picker { display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(84px, auto) 18px; align-items: center; gap: 11px; width: 100%; min-height: 66px; padding: 11px; border: 1px solid var(--line); border-radius: 7px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; transition: .16s ease; }
.service-picker:hover, .service-picker.selected { border-color: var(--primary); background: var(--primary-soft); }
.service-picker svg { width: 16px; color: var(--muted); }
.service-picker-main, .service-picker-price { min-width: 0; }
.service-picker-main strong, .service-picker-main small, .service-picker-price strong, .service-picker-price small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-picker-main small, .service-picker-price small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.service-picker-price { justify-self: end; text-align: right; }
.service-picker-price strong { margin-top: 3px; color: var(--primary); font-size: 11px; }
.favorite-toggle { display: inline-grid; place-items: center; width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: var(--surface); cursor: pointer; transition: .16s ease; }
.favorite-toggle:hover { border-color: #f59e0b; color: #f59e0b; background: color-mix(in srgb, #f59e0b 9%, var(--surface)); }
.favorite-toggle.active { border-color: color-mix(in srgb, #f59e0b 68%, var(--line)); color: #f59e0b; background: color-mix(in srgb, #f59e0b 12%, var(--surface)); }
.favorite-toggle.active svg { fill: currentColor; }
.favorite-toggle:disabled { opacity: .55; cursor: wait; }
.detail-favorite-toggle { flex: 0 0 44px; }
.compact-detail-head { flex-direction: row !important; align-items: flex-start !important; }
.compact-detail-head > div { flex: 1; min-width: 0; }
.quantity-stepper { display: grid; grid-template-columns: 48px minmax(70px, 1fr) 48px; overflow: hidden; min-height: 50px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.quantity-stepper button { display: grid; place-items: center; border: 0; color: var(--primary); background: var(--primary-soft); cursor: pointer; }
.quantity-stepper button:hover:not(:disabled) { background: color-mix(in srgb, var(--primary) 18%, var(--surface)); }
.quantity-stepper button:disabled { color: var(--muted); opacity: .5; cursor: not-allowed; }
.quantity-stepper button svg { width: 19px; height: 19px; }
.quantity-stepper input { width: 100%; min-width: 0; border: 0 !important; border-right: 1px solid var(--line) !important; border-left: 1px solid var(--line) !important; border-radius: 0 !important; color: var(--text); background: var(--surface); text-align: center; font-size: 16px; font-weight: 800; appearance: textfield; }
.quantity-stepper input::-webkit-inner-spin-button, .quantity-stepper input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.confirm-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.confirm-summary > div { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2); }
.confirm-summary span, .confirm-summary strong { display: block; overflow-wrap: anywhere; }
.confirm-summary span { margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.confirm-summary strong { font-size: 12px; }
.modal-actions { justify-content: flex-end; margin-top: 18px; }
.service-card { display: grid; gap: 16px; padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.service-head { display: flex; min-width: 0; align-items: center; gap: 10px; }
.service-head h3, .service-head p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-head p { margin: 3px 0 0; color: var(--muted); font-size: 11px; }
.service-logo { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; flex: none !important; border-radius: 8px !important; color: var(--primary) !important; background: var(--primary-soft) !important; font-size: 12px !important; font-weight: 800 !important; overflow: hidden !important; pointer-events: none !important; user-select: none !important; -webkit-user-select: none !important; }
.service-logo img { width: 100% !important; height: 100% !important; object-fit: contain !important; pointer-events: none !important; user-select: none !important; -webkit-user-drag: none !important; border-radius: 6px !important; }
.service-logo-text { display: inline-block; font-weight: 800; font-size: 13px; line-height: 1; }
.service-form { display: grid; gap: 11px; }
.order-list, .deposit-list { display: grid; gap: 12px; margin-top: 18px; }
.order-bulk-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.order-bulk-buttons { flex: none; justify-content: flex-end; }
.order-bulk-buttons .btn { white-space: nowrap; }
.order-card, .deposit-card { padding: 17px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--shadow); }
.order-card.live-order { border-left: 3px solid var(--warning); }
.order-top, .deposit-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.deposit-top > div span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.order-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.order-meta > div { min-width: 0; }
.order-meta span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.order-meta strong { display: block; overflow-wrap: anywhere; font-size: 12px; }
.order-meta .otp { color: var(--success); font-size: 15px; }
.sms-box { margin: 0 0 12px; padding: 10px; border-radius: 6px; color: var(--text); background: var(--surface-2); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.qris-panel { display: grid; place-items: center; margin: 12px 0; padding: 14px; border: 1px dashed var(--line); border-radius: 7px; background: #fff; }
.qris-panel img, .qris-panel canvas { width: min(220px, 100%) !important; height: auto !important; }
.qris-panel p { margin: 6px 0 0; color: #6f6b7d; font-size: 11px; }
.crypto-payment-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--primary-soft) 45%, var(--surface))); }
.crypto-payment-panel > div { display: grid; gap: 3px; min-width: 0; }
.crypto-payment-panel span { color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.crypto-payment-panel strong { overflow-wrap: anywhere; }
.crypto-payment-panel p { grid-column: 1 / -1; margin: 2px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.crypto-cancel-note { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 11px 12px; border: 1px dashed color-mix(in srgb, var(--warning) 45%, var(--line)); border-radius: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; background: color-mix(in srgb, var(--warning) 7%, var(--surface)); }
.crypto-cancel-note svg { width: 16px; height: 16px; flex: none; color: var(--warning); }
@media (max-width: 520px) { .crypto-payment-panel { grid-template-columns: 1fr; } .crypto-payment-panel p { grid-column: auto; } }
.quick-amounts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.quick-amounts button { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface); cursor: pointer; }
.quick-amounts button:hover { color: var(--primary); border-color: var(--primary); }
.deposit-mode { display: grid; gap: 18px; }
.deposit-mode-tabs { display: inline-flex; width: fit-content; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.deposit-mode-tabs button { min-width: 88px; min-height: 42px; padding: 8px 16px; border: 0; border-radius: 7px; color: var(--muted); background: transparent; font: inherit; font-weight: 800; cursor: pointer; }
.deposit-mode-tabs button.active { color: #fff; background: var(--primary); box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 28%, transparent); }
.deposit-mode-tabs button:disabled { opacity: .45; cursor: not-allowed; }
.crypto-deposit-form { gap: 16px; }
.crypto-network-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 7px; }
.crypto-network-settings .check-field { min-height: 40px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface-2); }
.crypto-quote-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--primary-soft) 38%, var(--surface))); }
.crypto-quote-details > div { min-width: 0; padding: 9px; border-radius: 7px; background: color-mix(in srgb, var(--surface) 78%, transparent); }
.crypto-quote-details span, .crypto-quote-details strong { display: block; overflow-wrap: anywhere; }
.crypto-quote-details span { margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.crypto-quote-details strong { font-size: 12px; }
.crypto-receive { display: grid; gap: 4px; padding: 15px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 9px; background: var(--primary-soft); }
.crypto-receive span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.crypto-receive strong { color: var(--primary); font-size: 19px; }
.crypto-receive small, .crypto-catalog-note { color: var(--muted); font-size: 11px; line-height: 1.5; }
.crypto-catalog-note { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border: 1px dashed var(--line); border-radius: 8px; }
.crypto-catalog-note svg { width: 17px; height: 17px; flex: none; }
@media (max-width: 520px) { .deposit-mode-tabs { width: 100%; } .deposit-mode-tabs button { flex: 1; } .crypto-network-settings, .crypto-quote-details { grid-template-columns: 1fr; } }

.badge { display: inline-flex; min-height: 24px; align-items: center; justify-content: center; padding: 3px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.badge.success { color: #167a47; background: var(--success-soft); }
.badge.danger { color: #c73c3d; background: var(--danger-soft); }
.badge.warning { color: #b96a1c; background: var(--warning-soft); }
.badge.violet { color: var(--primary); background: var(--primary-soft); }
.badge.neutral { color: var(--muted); background: var(--surface-2); }
.badge.badge-news { color: #0284c7; background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.25); }
.badge.badge-info { color: #8b5cf6; background: rgba(139, 92, 246, 0.12); border: 1px solid rgba(139, 92, 246, 0.25); }
.badge.badge-update { color: #10b981; background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); }
.badge.badge-maintenance { color: #f59e0b; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.25); }
.badge.badge-pin { color: #ec4899; background: rgba(236, 72, 153, 0.12); border: 1px solid rgba(236, 72, 153, 0.25); }
.badge svg { width: 11px; height: 11px; margin-right: 4px; display: inline-block; vertical-align: -1px; }
.withdraw-account-lock { display: inline-flex; align-items: center; gap: 7px; width: fit-content; color: #167a47; font-size: 11px; font-weight: 800; }
.withdraw-account-lock.warning { color: #b96a1c; }
.withdraw-account-lock svg { width: 15px; height: 15px; }
.order-status-badge { gap: 5px; }
.order-status-icon { display: inline-grid; width: 11px; height: 11px; flex: none; place-items: center; }
.order-status-icon svg { width: 11px; height: 11px; margin: 0; display: block; }
.order-status-icon.spinning { animation: order-status-spin .8s linear infinite; }
@keyframes order-status-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .order-status-icon.spinning { animation-duration: 1.4s; } }
.recovery-code-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.recovery-code-grid code { display: block; padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; text-align: center; letter-spacing: .08em; background: var(--surface-2); }

.announcement-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important; gap: 20px !important; margin-top: 20px !important; }
.announcement-card { display: flex !important; flex-direction: column !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: var(--surface) !important; box-shadow: var(--shadow) !important; overflow: hidden !important; transition: transform .22s ease, box-shadow .22s ease !important; padding: 0 !important; margin: 0 !important; }
.announcement-card:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 24px -6px rgba(0,0,0,0.15) !important; border-color: rgba(139, 92, 246, 0.4) !important; }
.announcement-card.pinned { border: 1px solid rgba(236, 72, 153, 0.4) !important; background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 95%, #ec4899) 0%, var(--surface) 100%) !important; }
.announcement-banner { width: 100% !important; height: 200px !important; max-height: 200px !important; min-height: 200px !important; overflow: hidden !important; background: var(--surface-2) !important; position: relative !important; border-bottom: 1px solid var(--line) !important; flex: none !important; }
.announcement-banner img { width: 100% !important; height: 100% !important; max-height: 200px !important; min-height: 200px !important; object-fit: cover !important; object-position: center !important; display: block !important; transition: transform .3s ease !important; }
.announcement-banner-placeholder { width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 12%, var(--surface)) 0%, color-mix(in srgb, var(--surface-2) 90%, var(--primary-soft)) 100%) !important; }
.announcement-card:hover .announcement-banner img { transform: scale(1.05) !important; }
.announcement-body { padding: 20px !important; display: flex !important; flex-direction: column !important; flex: 1 !important; }
.announcement-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; margin-bottom: 12px !important; }
.badge-group { display: flex !important; align-items: center !important; gap: 6px !important; flex-wrap: wrap !important; }
.announcement-date { font-size: 11px !important; color: var(--muted) !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.announcement-date svg { width: 12px !important; height: 12px !important; }
.announcement-title { font-size: 16px !important; font-weight: 700 !important; line-height: 1.4 !important; margin: 0 0 10px !important; }
.announcement-title a { color: var(--text) !important; text-decoration: none !important; transition: color .15s !important; }
.announcement-title a:hover { color: var(--primary) !important; }
.announcement-snippet { font-size: 13px !important; color: var(--muted) !important; line-height: 1.6 !important; margin-bottom: 16px !important; flex: 1 !important; }
.announcement-footer { display: flex !important; align-items: center !important; justify-content: space-between !important; padding-top: 12px !important; border-top: 1px solid var(--line) !important; margin-top: auto !important; }
.announcement-views { font-size: 11px !important; color: var(--muted) !important; display: flex !important; align-items: center !important; gap: 4px !important; }
.announcement-views svg { width: 13px !important; height: 13px !important; }

.announcement-detail-card { padding: 28px !important; border-radius: 14px !important; }
.announcement-detail-banner { width: 100% !important; height: 320px !important; max-height: 320px !important; border-radius: 12px !important; overflow: hidden !important; margin: 18px 0 24px !important; background: var(--surface-2) !important; border: 1px solid var(--line) !important; }
.announcement-detail-banner img { width: 100% !important; height: 100% !important; max-height: 320px !important; object-fit: cover !important; object-position: center !important; display: block !important; }
.announcement-content-body { font-size: 14px; line-height: 1.7; color: var(--text); margin-top: 20px; }
.announcement-content-body p { margin-bottom: 14px; }
.announcement-content-body img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block; border: 1px solid var(--line); }
.announcement-content-body h1, .announcement-content-body h2, .announcement-content-body h3 { margin: 20px 0 10px; font-weight: 700; color: var(--text); }
.announcement-content-body ul, .announcement-content-body ol { padding-left: 20px; margin-bottom: 14px; }

.wysiwyg-form .field span { font-size: 13px !important; font-weight: 700 !important; color: var(--text) !important; margin-bottom: 4px !important; }
.wysiwyg-form .field input, .wysiwyg-form .field select { min-height: 48px !important; padding: 12px 16px !important; font-size: 14px !important; border-radius: 10px !important; border: 1px solid var(--line) !important; }
.wysiwyg-editor-wrap { border: 1px solid var(--line) !important; border-radius: 12px !important; overflow: hidden !important; background: var(--surface) !important; box-shadow: var(--shadow) !important; }
.wysiwyg-toolbar { display: flex !important; flex-wrap: wrap !important; gap: 6px !important; padding: 12px 14px !important; background: var(--surface-2) !important; border-bottom: 1px solid var(--line) !important; }
.wysiwyg-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 10px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; background: var(--surface) !important; color: var(--text) !important; cursor: pointer !important; font-size: 14px !important; font-weight: 700 !important; transition: all .18s ease !important; }
.wysiwyg-btn:hover { background: var(--primary) !important; color: #ffffff !important; border-color: var(--primary) !important; transform: translateY(-1px) !important; }
.wysiwyg-content { min-height: 360px !important; padding: 20px !important; outline: none !important; font-size: 15px !important; line-height: 1.7 !important; color: var(--text) !important; overflow-y: auto !important; background: var(--surface) !important; }
.wysiwyg-form .check-field { padding: 14px 16px !important; border: 1px solid var(--line) !important; border-radius: 10px !important; background: var(--surface-2) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; }
.wysiwyg-form .check-field input[type="checkbox"] { width: 20px !important; height: 20px !important; cursor: pointer !important; }
.wysiwyg-form .button-row .btn { min-height: 48px !important; padding: 12px 24px !important; font-size: 14px !important; font-weight: 700 !important; border-radius: 10px !important; }
.activity-list { display: grid; }
.activity-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.activity-row:last-child { border-bottom: 0; }
.activity-row strong, .activity-row span { display: block; }
.activity-row span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.activity-row b { font-size: 11px; }
.activity-icon { display: inline-grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; }
.activity-icon svg { width: 14px; }
.activity-icon.in { color: var(--success); background: var(--success-soft); }
.activity-icon.out { color: var(--danger); background: var(--danger-soft); }
.manage-list { display: grid; max-height: 680px; overflow: auto; }
.manage-row { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.manage-row:last-child { border-bottom: 0; }
.manage-row > div { min-width: 0; }
.manage-row strong, .manage-row span { display: block; overflow-wrap: anywhere; }
.manage-row span { margin-top: 3px; color: var(--muted); font-size: 10px; }
.user-inline { display: flex; align-items: center; gap: 9px; }

.table-wrap { width: 100%; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; }
th { color: var(--muted); background: var(--surface-2); font-size: 9px; font-weight: 800; text-transform: uppercase; }
td { font-size: 11px; }
td strong, td small { display: block; }
tbody tr:hover { background: var(--surface-2); }
.pagination-wrapper { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin-top: 22px !important; }
.pagination { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; margin: 0 !important; padding: 4px !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: var(--shadow) !important; }
.page-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 38px !important; height: 38px !important; padding: 0 10px !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--text) !important; background: var(--surface) !important; font-size: 13px !important; font-weight: 700 !important; text-decoration: none !important; transition: all 0.18s ease !important; cursor: pointer !important; user-select: none !important; }
.page-link:hover:not(.active):not(.disabled):not(.ellipsis) { border-color: var(--primary) !important; color: var(--primary) !important; background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface)) !important; transform: translateY(-1px) !important; }
.page-link.active { color: #ffffff !important; background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%) !important; border-color: rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 14px rgba(115, 103, 240, 0.38) !important; }
.page-link.prev-next { padding: 0 8px !important; color: var(--muted) !important; }
.page-link.prev-next svg { width: 18px !important; height: 18px !important; }
.page-link.disabled { opacity: 0.4 !important; cursor: not-allowed !important; background: var(--surface-2) !important; border-color: var(--line) !important; }
.page-link.ellipsis { border: none !important; background: transparent !important; color: var(--muted) !important; min-width: 28px !important; cursor: default !important; font-weight: 800 !important; letter-spacing: 0.1em !important; }
.pagination-summary { font-size: 12px !important; color: var(--muted) !important; font-weight: 500 !important; text-align: center !important; }
.pagination-summary strong { color: var(--text) !important; font-weight: 700 !important; }

.password-input-wrap { position: relative !important; display: flex !important; align-items: center !important; width: 100% !important; }
.password-input-wrap input { width: 100% !important; padding-right: 42px !important; }
.toggle-password-btn { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; padding: 0 !important; border: none !important; background: transparent !important; color: var(--muted) !important; cursor: pointer !important; border-radius: 6px !important; transition: all 0.18s ease !important; z-index: 2 !important; }
.toggle-password-btn:hover { color: var(--primary) !important; background: color-mix(in srgb, var(--primary-soft) 50%, transparent) !important; }
.toggle-password-btn svg { width: 18px !important; height: 18px !important; pointer-events: none !important; }
.code-box { margin-bottom: 15px; padding: 12px; border: 1px dashed var(--line); border-radius: 6px; color: var(--primary); background: var(--surface-2); font-family: Consolas, monospace; font-size: 11px; overflow-wrap: anywhere; user-select: all; }

.empty { display: grid; min-height: 180px; place-items: center; align-content: center; padding: 20px; color: var(--muted); text-align: center; }
.empty.compact { min-height: 100px; }
.empty svg { width: 32px; margin-bottom: 8px; }
.empty p { margin-bottom: 0; }
.alert { margin-bottom: 14px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.alert.success { color: #167a47; border-color: var(--success); background: var(--success-soft); }
.alert.danger { color: #c73c3d; border-color: var(--danger); background: var(--danger-soft); }
.alert.warning { color: #b96a1c; border-color: var(--warning); background: var(--warning-soft); }
.toast {
  position: fixed !important;
  top: 76px !important;
  right: 18px !important;
  bottom: auto !important;
  z-index: 9999 !important;
  display: flex !important;
  align-items: center !important;
  width: max-content !important;
  max-width: min(340px, calc(100vw - 24px)) !important;
  min-height: 44px !important;
  gap: 9px !important;
  padding: 8px 9px !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  background: color-mix(in srgb, var(--surface) 94%, transparent) !important;
  box-shadow: 0 8px 24px rgba(22, 22, 30, .16) !important;
  backdrop-filter: blur(12px) !important;
  opacity: 0 !important;
  transform: translateY(-8px) scale(.98) !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease !important;
  font-size: 12px !important;
}

.toast.show {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.toast-icon {
  display: grid !important;
  width: 27px !important;
  height: 27px !important;
  place-items: center !important;
  flex: none !important;
  border-radius: 8px !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
}
.toast-icon svg { width: 14px !important; height: 14px !important; stroke-width: 2.5 !important; }
.toast-message {
  min-width: 0 !important;
  max-width: 220px !important;
  overflow-wrap: anywhere !important;
  color: var(--text) !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}
.toast[data-type="danger"] { border-color: color-mix(in srgb, var(--danger) 34%, var(--line)) !important; }
.toast[data-type="danger"] .toast-icon { color: var(--danger) !important; background: var(--danger-soft) !important; }
.toast[data-type="success"] { border-color: color-mix(in srgb, var(--success) 34%, var(--line)) !important; }
.toast[data-type="success"] .toast-icon { color: var(--success) !important; background: var(--success-soft) !important; }
.toast[data-type="warning"] { border-color: color-mix(in srgb, var(--warning) 38%, var(--line)) !important; }
.toast[data-type="warning"] .toast-icon { color: var(--warning) !important; background: var(--warning-soft) !important; }

.toast-action {
  flex: 0 0 auto !important;
  padding: 5px 8px !important;
  border-radius: 7px !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: filter .16s ease !important;
}

.toast-action:hover { filter: brightness(.96) !important; }

.modal { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 30px); padding: 0; border: 1px solid var(--line); border-radius: 8px; color: var(--text); background: var(--surface); box-shadow: 0 16px 50px rgba(0,0,0,.25); }
.modal::backdrop { background: rgba(22,22,30,.55); backdrop-filter: blur(2px); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px; border-bottom: 1px solid var(--line); }
.modal-body { max-height: calc(100vh - 115px); padding: 18px; overflow: auto; }
.user-admin-modal { width: min(980px, calc(100vw - 24px)); }
.user-admin-modal .modal-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }
.user-modal-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); align-items: start; gap: 16px; }
.user-profile-panel, .user-editor-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.user-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.user-panel-heading .eyebrow { margin: 0 0 4px; }
.user-panel-heading h3 { margin: 0; font-size: 16px; }
.user-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; margin: 0; }
.user-detail-grid > div { min-width: 0; padding: 10px 0; border-top: 1px solid var(--line); }
.user-detail-grid dt { margin-bottom: 4px; color: var(--muted); font-size: 11px; font-weight: 700; }
.user-detail-grid dd { margin: 0; overflow-wrap: anywhere; font-size: 12px; font-weight: 650; line-height: 1.55; }
.user-detail-grid .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.user-editor-panel .stack-form { gap: 12px; }
.user-editor-panel hr { margin: 18px 0; border: 0; border-top: 1px solid var(--line); }
.user-role-readonly { display: block; min-height: 42px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-transform: capitalize; }
.user-modal-body > .alert { grid-column: 1 / -1; margin: 0; }
@media (max-width: 760px) {
  .user-modal-body { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .user-modal-body > .alert { grid-column: 1; }
  .user-profile-panel, .user-editor-panel { padding: 13px; }
}
@media (max-width: 440px) {
  .user-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .user-admin-modal .modal-head { padding: 14px; }
}
.info-popup-modal { width: min(620px, calc(100vw - 24px)); }
.info-popup-list { display: grid; gap: 14px; max-height: min(58vh, 520px); margin: -2px -2px 16px; padding: 2px 6px 2px 2px; overflow: auto; }
.info-popup-item { padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.info-popup-item:last-child { border-bottom: 0; }
.info-popup-image { display: block; overflow: hidden; margin: 0 0 14px; border-radius: 8px; background: var(--surface-2); }
.info-popup-image img { display: block; width: 100%; max-height: 210px; object-fit: cover; }
.info-popup-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.info-popup-meta small { display: inline-flex; margin: 0; }
.info-popup-title { margin: 0 0 8px; font-size: 15px; line-height: 1.4; }
.info-popup-title a { color: var(--text); }
.info-popup-text { margin: 0; color: var(--muted); line-height: 1.6; }
.info-popup-read { margin-top: 12px; }
.info-popup-modal .modal-actions { align-items: center; flex-wrap: wrap; }

.select2-container { font-size: 13px; }
.select2-container .select2-selection--single { height: 40px; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface); }
.select2-container .select2-selection--single .select2-selection__rendered { padding-left: 11px; color: var(--text); line-height: 38px; }
.select2-container .select2-selection--single .select2-selection__placeholder { color: var(--muted); }
.select2-container .select2-selection--single .select2-selection__arrow { height: 38px; }
.select2-dropdown { z-index: 120; border: 1px solid var(--line); border-radius: 6px; color: var(--text); background: var(--surface); box-shadow: var(--shadow); }
.select2-search--dropdown { padding: 8px; }
.select2-container .select2-search--dropdown .select2-search__field { min-height: 38px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; color: var(--text); background: var(--surface); }
.select2-results__option { padding: 9px 11px; }
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { color: #fff; background: var(--primary); }
.select2-container--default .select2-results__option--selected { background: var(--primary-soft); }
.select2-container--default.select2-container--focus .select2-selection--single { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

.auth-body {
  color: var(--text);
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 36%),
    radial-gradient(circle at 18% 88%, color-mix(in srgb, var(--blue) 7%, transparent), transparent 34%),
    var(--bg);
}
.install-body { background: #f5f5f9; }
.auth-shell { display: grid; grid-template-columns: minmax(340px, .9fr) minmax(430px, 1.1fr); min-height: 100vh; }
.auth-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; padding: 48px; color: #fff; background: #323044; }
.auth-brand h1 { max-width: 650px; margin-bottom: 14px; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; }
.auth-brand p { max-width: 600px; color: rgba(255,255,255,.68); line-height: 1.7; }
.auth-brand .brand { color: #fff; }
.auth-points { display: grid; gap: 10px; }
.auth-points span { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.78); }
.auth-points svg { width: 18px; }
.auth-panel { display: grid; width: min(100%, 540px); align-content: center; justify-self: center; padding: 36px; color: var(--text); }
.mobile-brand { display: none; margin-bottom: 30px; }
.auth-heading { margin-bottom: 24px; }
.auth-heading h2 { margin-top: 5px; font-size: 26px; }
.auth-heading p { color: var(--muted); }
.auth-switch { margin: 20px 0 0; color: var(--muted); text-align: center; }
html[data-theme="dark"] .auth-body {
  background:
    radial-gradient(circle at 78% 12%, rgba(115, 103, 240, .18), transparent 38%),
    radial-gradient(circle at 18% 88%, rgba(0, 207, 232, .08), transparent 36%),
    linear-gradient(145deg, #171725 0%, #1b1b2b 52%, #18232d 100%);
}
html[data-theme="dark"] .auth-panel .field input,
html[data-theme="dark"] .auth-panel .field select,
html[data-theme="dark"] .auth-panel .field textarea {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
html[data-theme="dark"] .auth-panel .google-btn {
  border-color: color-mix(in srgb, var(--primary) 16%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
.install-shell { display: grid; grid-template-columns: minmax(320px, .75fr) minmax(500px, 1.25fr); width: min(1180px, calc(100% - 32px)); min-height: calc(100vh - 32px); margin: 16px auto; overflow: hidden; border-radius: 8px; background: #323044; box-shadow: var(--shadow); }
.install-intro { display: flex; flex-direction: column; justify-content: center; padding: 40px; color: #fff; }
.install-intro h1 { margin: 18px 0 10px; font-size: 38px; }
.install-intro p { color: rgba(255,255,255,.7); line-height: 1.6; }
.check-list { display: grid; gap: 8px; margin-top: 22px; }
.check-item { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.8); }
.check-item span { display: inline-grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 800; }
.check-item.ok span { background: var(--success); }
.check-item.bad span { background: var(--danger); }
.install-form { align-self: stretch; padding: 34px; border-radius: 0; box-shadow: none; }
.install-form h3 { margin: 22px 0 10px; }
.result-icon { display: grid; width: 54px; height: 54px; place-items: center; border-radius: 50%; color: var(--success); background: var(--success-soft); font-size: 24px; }

@media (max-width: 1240px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .app-shell { display: block; }
  .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); z-index: 10005 !important; }
  .sidebar.open { transform: translateX(0); z-index: 10005 !important; }
  .main-shell { display: block; }
  .mobile-menu { display: inline-grid; }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 10000 !important; background: rgba(20,20,28,.45); }
  .sidebar-overlay.show { display: block; z-index: 10000 !important; }
  .dashboard-grid, .admin-dashboard-grid, .catalog-admin-grid, .order-builder-grid { grid-template-columns: 1fr; }
  .service-config { position: static; }
  .auth-shell { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .mobile-brand { display: inline-flex; }
  .auth-panel { min-height: 100vh; }
  .install-shell { grid-template-columns: 1fr; }
  .install-intro { padding: 28px; }
}

@media (max-width: 720px) {
  .topbar { min-height: 66px; padding: 10px 14px; }
  .content { padding: 12px 12px 28px; }
  .topbar-title .eyebrow, .balance-chip { display: none; }
  .topbar-title h1 { font-size: 17px; }
  .hero-balance { min-height: 140px; padding: 18px; }
  .hero-balance h2 { font-size: 26px; }
  .hero-right { gap: 8px; }
  .hero-reseller-badge { min-height: 27px; padding: 5px 9px; font-size: 8px; }
  .hero-btn { padding-right: 15px; padding-left: 15px; }
  .app-bonus-card { grid-template-columns: auto minmax(0, 1fr); }
  .app-bonus-card form { grid-column: 1 / -1; }
  .app-bonus-card .btn { width: 100%; }
  .metric-grid, .admin-metrics, .catalog-grid, .deposit-layout, .profile-grid, .admin-list-grid, .system-grid, .provider-account-grid, .form-grid.two, .form-grid.four { grid-template-columns: 1fr; }
  .metric-grid { gap: 10px; }
  .metric-card { padding: 13px; }
  .card { padding: 15px; }
  .section-head { align-items: stretch; flex-direction: column; }
  .section-head > .btn, .section-head > form .btn { width: 100%; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .btn { width: 100%; }
  .order-bulk-actions { width: 100%; }
  .order-bulk-buttons { display: grid; grid-template-columns: 1fr; width: 100%; }
  .order-bulk-buttons .btn { width: 100%; }
  .order-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .order-top { align-items: flex-start; }
  .service-head { max-width: calc(100% - 72px); }
  .quick-amounts { grid-template-columns: repeat(2, 1fr); }
  .service-picker { grid-template-columns: 40px minmax(0, 1fr) minmax(80px, auto) 18px; }
  .service-picker-price { grid-column: 3; justify-self: end; text-align: right; }
  .service-picker > svg { grid-column: 4; grid-row: 1; }
  .confirm-summary { grid-template-columns: 1fr; }
  .copy-row { flex-direction: column; }
  .referral-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .referral-stats > div:nth-child(2) { border-right: 0; }
  .referral-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .point-actions-grid { grid-template-columns: 1fr; }
  .referral-share { align-items: stretch; flex-direction: column; }
  .referral-share .btn { width: 100%; }
  .reseller-upgrade-hero { align-items: flex-start; flex-direction: column; padding: 18px; }
  .reseller-upgrade-grid { grid-template-columns: 1fr; }
  .reseller-price-list article { align-items: flex-start; flex-direction: column; }
  .price-compare-values { width: 100%; justify-content: space-between; }
  .price-compare-values small { text-align: left; }
  .auth-panel { width: 100%; padding: 24px 18px; }
  .install-shell { width: 100%; min-height: 100vh; margin: 0; border-radius: 0; }
  .install-form { padding: 22px 16px; }
}

/* Mobile polish: order builder should feel like an app, not a stretched accordion. */
.order-toolbar { align-items: stretch; }
.order-toolbar .field { align-self: start; }
.order-toolbar .field input { min-height: 44px; }
.order-filter-card .select2-container { max-width: 100%; }

@media (max-width: 640px) {
  .content { padding: 16px 12px 88px; }
  .topbar { gap: 10px; padding: 14px 12px; }
  .topbar-title .eyebrow { display: none; }
  .topbar-title h1 { font-size: 22px; }
  .topbar-actions { gap: 8px; }
  .balance-chip { display: none; }
  .card { border-radius: 12px; padding: 16px; }
  .section-head { align-items: flex-start; gap: 10px; }
  .section-head h2 { font-size: 22px; line-height: 1.15; }
  .section-head p { line-height: 1.35; }

  .order-toolbar { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px; }
  .order-toolbar .field { width: 100%; min-height: auto; }
  .order-toolbar .field input,
  .order-toolbar .field select,
  .order-toolbar .select2-container .select2-selection--single { min-height: 46px; height: 46px; }
  .order-toolbar .select2-container .select2-selection--single .select2-selection__rendered { line-height: 44px; }
  .order-toolbar .select2-container .select2-selection--single .select2-selection__arrow { height: 44px; }
  .select2-dropdown { max-width: calc(100vw - 24px); }

  .order-builder-grid { gap: 14px; margin-top: 14px; }
  .service-browser, .service-config { min-height: 0; }
  .favorite-toggle { width: 42px; }
  .service-picker-list { gap: 10px; }
  .service-picker { grid-template-columns: 38px minmax(0, 1fr) minmax(78px, auto) 16px; min-height: auto; padding: 12px; border-radius: 10px; }
  .service-picker-price { grid-column: 3; justify-self: end; text-align: right; }
  .service-picker > svg { grid-column: 4; grid-row: 1; }
  .confirm-summary { grid-template-columns: 1fr; }
  .modal { width: calc(100vw - 24px); max-width: calc(100vw - 24px); }
  .auth-panel { min-height: 100svh; padding: 26px 18px; }
}


@media (max-width: 640px) {
  .service-picker-main strong { font-size: 15px; }
  .service-picker-price small { margin-top: 0; }
  .service-picker-price strong { font-size: 12px; }
  .service-config { display: none; position: static; max-height: none; overflow: visible; border-radius: 12px; box-shadow: var(--shadow-sm); }
  .service-config.active { display: block; }
  .service-config-close { display: inline-grid; }
}

@media (min-width: 641px) {
  .service-config-close { display: none; }
}

/* v1.1.4 mobile order detail refinement */
.service-config.active {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.compact-detail-head { margin-bottom: 12px; }
.compact-detail-head h2 { font-size: 24px; }
.compact-order-form { gap: 10px; }
.service-config-hint {
  margin-top: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
@media (max-width: 640px) {
  .service-config.active { padding: 14px; box-shadow: none; }
  .compact-detail-head { margin-bottom: 10px; }
  .compact-detail-head h2 { font-size: 22px; }
  .compact-order-form { gap: 9px; }
  .compact-order-form .field input,
  .compact-order-form .field select { min-height: 42px; }
  .compact-order-form .btn { min-height: 46px; }
}

/* v1.1.5 polish */
.activity-icon, .metric-icon, .icon-btn, .result-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; }
.activity-icon svg, .metric-icon svg, .icon-btn svg { display: block; margin: 0 auto; flex: 0 0 auto; }
.activity-row { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; }
.activity-icon { width: 36px; height: 36px; }
.auth-divider { display: grid; place-items: center; margin: 10px 0; color: var(--muted); font-size: 12px; }
.auth-divider:before { content: ''; width: 100%; height: 1px; background: var(--line); grid-area: 1 / 1; }
.auth-divider span { grid-area: 1 / 1; background: var(--bg); padding: 0 10px; }
.google-btn { justify-content: center; }
.cf-turnstile { margin: 6px 0 2px; }
.ticket-row { align-items: flex-start; gap: 14px; }
.ticket-row p { margin: 8px 0 0; color: var(--muted); white-space: normal; }
.ticket-reply { margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.unread-ticket { border-left: 3px solid #ea5455; background: rgba(234, 84, 85, .04); }
.notif-label { display: inline-block !important; margin-left: 6px !important; padding: 2px 6px; border-radius: 10px; color: #fff !important; background: #ea5455; font-size: 9px !important; line-height: 14px; vertical-align: middle; }
.compact-form { margin-top: 12px; }
.compact-form textarea { min-height: 86px; }
@media (max-width: 640px) {
  .activity-row { grid-template-columns: 40px minmax(0,1fr) auto; }
  .activity-row b { text-align: right; }
}

.turnstile-box { margin: 8px 0 4px; min-height: 65px; }
.turnstile-warning, .turnstile-fallback { border: 1px solid #f59e0b; background: rgba(245, 158, 11, .12); color: #b45309; border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 14px; }

/* ==========================================================================
   ULTRA-LUXURY GLASSMORPHISM & NEON LIGHT DESIGN SYSTEM
   ========================================================================== */

/* Ambient Glowing Background Overlay */
body::before {
  content: "";
  position: fixed;
  top: -150px;
  right: -100px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(115, 103, 240, 0.15) 0%, rgba(115, 103, 240, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  bottom: -200px;
  left: -100px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 207, 232, 0.12) 0%, rgba(0, 207, 232, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* Glassmorphism Topbar with Glowing Border */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--surface) 75%, transparent) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, var(--primary) 30%) !important;
  box-shadow: 0 4px 20px -5px rgba(115, 103, 240, 0.08) !important;
}

/* Glassmorphism Cards & Glowing Aura */
.card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--primary) 25%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05), 0 0 1px 1px rgba(115, 103, 240, 0.1);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}

.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 55%, var(--line));
  box-shadow: 0 20px 45px -8px rgba(115, 103, 240, 0.2), 0 0 20px 2px rgba(115, 103, 240, 0.15);
}

/* Glowing Metrics & Stat Cards */
.metric-card {
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--primary) 20%);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.metric-card:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: var(--primary);
  box-shadow: 0 12px 30px -6px rgba(115, 103, 240, 0.22), 0 0 14px rgba(115, 103, 240, 0.15);
}

.metric-icon {
  box-shadow: 0 4px 14px rgba(115, 103, 240, 0.2);
}

/* Luxury Glass Buttons & Glowing Micro-Interactions */
.btn {
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn.primary {
  background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn.primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 26px rgba(115, 103, 240, 0.55), 0 0 18px rgba(115, 103, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  background: linear-gradient(135deg, #8176f4 0%, #685beb 100%);
}

.btn.secondary {
  border-color: color-mix(in srgb, var(--line) 80%, var(--primary) 20%);
  background: color-mix(in srgb, var(--surface-2) 75%, transparent);
  backdrop-filter: blur(10px);
}

.btn.secondary:hover {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.18);
  transform: translateY(-2px);
}

/* Form Fields Glass Focus Glow */
.field input, .field select, .field textarea {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, var(--primary) 15%);
  background: color-mix(in srgb, var(--surface) 92%, var(--surface-2));
  backdrop-filter: blur(10px);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: 0 0 0 4px rgba(115, 103, 240, 0.22), 0 4px 16px rgba(115, 103, 240, 0.12);
}

/* Hero Balance Glow Card */
.hero-balance {
  border-radius: 18px;
  background: linear-gradient(135deg, #323044 0%, #242232 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.35), 0 0 25px rgba(115, 103, 240, 0.2) !important;
}

/* ==========================================================================
   MINIMALIST & ELEGANT TICKET SYSTEM STYLING WITH NEON LIGHT ACCENTS
   ========================================================================== */
.ticket-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.25fr);
  gap: 22px;
  align-items: start;
}

.ticket-form-card, .ticket-list-card, .ticket-detail-card { min-width: 0; }

.ticket-form-card {
  position: sticky;
  top: 92px;
}

.ticket-form-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: -4px 0 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.ticket-form-note i { width: 16px; height: 16px; flex: 0 0 auto; color: var(--success); }

.ticket-category-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-soft) 65%, var(--surface));
  color: var(--primary);
  font-size: 11px;
  font-weight: 750;
}

.ticket-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.ticket-title-area { min-width: 0; }
.ticket-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ticket-subject { overflow-wrap: anywhere; }
.ticket-preview { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.55; overflow-wrap: anywhere; }

.ticket-status-badge {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  white-space: nowrap;
}

.ticket-status-badge time, .ticket-detail-title time, .admin-ticket-title time {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
}

.ticket-status-badge time i, .ticket-detail-title time i, .admin-ticket-title time i { width: 13px; height: 13px; }
.ticket-status-badge .btn { display: inline-flex; align-items: center; gap: 6px; }
.ticket-empty-state { min-height: 220px; justify-content: center; }
.ticket-back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; }
.ticket-back-row { margin-bottom: 2px; }
.ticket-detail-subject { margin: 8px 0 4px; }
.ticket-detail-status { display: flex; align-items: flex-start; }
.ticket-pending-badge { display: flex; align-items: flex-start; gap: 10px; padding: 13px 14px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 13px; line-height: 1.5; }
.ticket-pending-badge i { width: 17px; height: 17px; flex: 0 0 auto; }
.ticket-reply-divider { height: 1px; margin: 20px 0; border: 0; background: var(--line); }
.ticket-reply-submit { align-self: flex-start; }

.admin-ticket-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-ticket-header .user-info-area { display: flex; align-items: center; gap: 10px; min-width: 0; }
.admin-ticket-header .user-info-area > div { min-width: 0; overflow-wrap: anywhere; }
.admin-ticket-header .user-info-area small { color: var(--muted); font-weight: 500; }
.ticket-user-email { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.admin-ticket-status-area, .admin-ticket-header .ticket-status-area { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-ticket-list { margin-top: 14px; gap: 12px; }
.ticket-reply-actions { align-items: end; margin-top: 12px; }
.admin-ticket-title { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 14px; }
.admin-ticket-title > div { min-width: 0; }
.admin-ticket-title h3 { margin: 8px 0 4px; font-size: 18px; }
.admin-ticket-title .ticket-preview { max-width: 720px; margin: 0 0 6px; }
.admin-ticket-detail-card .ticket-thread { margin-top: 18px; }
.admin-ticket-filter .ticket-admin-toolbar { margin-top: 16px; }

.ticket-list-wrap, .admin-ticket-list {
  display: grid;
  gap: 16px;
}

.ticket-item-card, .admin-ticket-card {
  position: relative;
  overflow: hidden;
  padding: 20px 22px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--primary) 20%);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: 0 6px 20px -3px rgba(0, 0, 0, 0.05);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s ease;
}

.ticket-item-card:hover, .admin-ticket-card:hover {
  transform: translateY(-3px);
  border-color: rgba(115, 103, 240, 0.5);
  box-shadow: 0 14px 35px -6px rgba(115, 103, 240, 0.22), 0 0 15px rgba(115, 103, 240, 0.12);
}

.ticket-item-card.unread-ticket, .admin-ticket-card.unread-ticket {
  border-left: 4px solid #ea5455;
  background: linear-gradient(90deg, rgba(234, 84, 85, 0.08) 0%, color-mix(in srgb, var(--surface) 95%, transparent) 100%);
  box-shadow: 0 6px 22px -3px rgba(234, 84, 85, 0.2);
}

.ticket-code-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 85%, var(--primary) 15%);
  border: 1px solid color-mix(in srgb, var(--line) 75%, var(--primary) 25%);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  box-shadow: 0 2px 8px rgba(115, 103, 240, 0.12);
}

.ticket-subject {
  margin: 8px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.38;
}

.ticket-thread {
  display: grid;
  gap: 16px;
  margin: 20px 0;
}

.ticket-bubble {
  padding: 18px 20px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.65;
  position: relative;
  backdrop-filter: blur(12px);
  transition: transform 0.18s ease;
}

.ticket-bubble.user-bubble {
  background: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--line));
  box-shadow: 0 4px 18px rgba(115, 103, 240, 0.1);
}

.ticket-bubble.admin-bubble {
  background: color-mix(in srgb, var(--success-soft) 45%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--success) 30%, var(--line));
  box-shadow: 0 4px 18px rgba(40, 199, 111, 0.1);
}

.bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.bubble-head span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.bubble-head time {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

.bubble-content p {
  margin: 0;
  color: var(--text);
  word-break: break-word;
}

.notif-label {
  display: inline-flex !important;
  align-items: center;
  margin-left: 6px !important;
  padding: 3px 9px;
  border-radius: 999px;
  color: #fff !important;
  background: linear-gradient(135deg, #ea5455 0%, #ff6b6b 100%);
  box-shadow: 0 3px 12px rgba(234, 84, 85, 0.45);
  font-size: 9px !important;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  animation: pulseNotif 2s infinite ease-in-out;
}

@keyframes pulseNotif {
  0%, 100% { transform: scale(1); box-shadow: 0 3px 12px rgba(234, 84, 85, 0.45); }
  50% { transform: scale(1.05); box-shadow: 0 4px 18px rgba(234, 84, 85, 0.7); }
}

/* Glowing Neon Badges */
.badge.violet {
  box-shadow: 0 2px 10px rgba(115, 103, 240, 0.3);
}
.badge.success {
  box-shadow: 0 2px 10px rgba(40, 199, 111, 0.3);
}
.badge.warning {
  box-shadow: 0 2px 10px rgba(255, 159, 67, 0.3);
}

@media (max-width: 768px) {
  .ticket-grid {
    grid-template-columns: 1fr;
  }
  .ticket-form-card {
    position: static;
  }
  .admin-ticket-filter .ticket-admin-toolbar { display: grid !important; grid-template-columns: 1fr; }
  .ticket-header { grid-template-columns: minmax(0, 1fr) auto; }
  .toolbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .toolbar .field, .toolbar .field.grow {
    width: 100% !important;
    flex: none !important;
  }
  .toolbar .field input, .toolbar .field select {
    width: 100% !important;
    min-height: 40px !important;
    font-size: 13px !important;
    box-sizing: border-box !important;
  }
  .toolbar .btn {
    width: 100% !important;
    min-height: 40px !important;
    justify-content: center !important;
  }
  .announcement-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .announcement-detail-card {
    padding: 18px !important;
  }
}

@media (max-width: 560px) {
  .ticket-grid { gap: 14px; }
  .ticket-header { grid-template-columns: 1fr; }
  .ticket-status-badge { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .ticket-item-card, .admin-ticket-card { padding: 16px; }
  .ticket-detail-head { gap: 12px; }
  .ticket-detail-status { align-items: center; }
  .ticket-bubble { padding: 14px; border-radius: 13px; }
  .bubble-head { align-items: flex-start; flex-direction: column; gap: 4px; }
  .ticket-reply-submit { width: 100%; justify-content: center; }
  .admin-ticket-header { align-items: stretch; flex-direction: column; }
  .admin-ticket-header .ticket-status-area { justify-content: flex-start; }
  .admin-ticket-title { align-items: stretch; flex-direction: column; }
  .admin-ticket-title > .btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   ULTRA-LUXURY SIDEBAR MENU & NAVIGATION SYSTEM
   ========================================================================== */

/* Glassmorphic Sidebar Frame */
.sidebar {
  background: color-mix(in srgb, var(--surface) 86%, transparent) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  border-right: 1px solid color-mix(in srgb, var(--line) 70%, var(--primary) 30%) !important;
  box-shadow: 6px 0 35px -5px rgba(0, 0, 0, 0.06), 0 0 15px rgba(115, 103, 240, 0.05) !important;
  padding: 24px 16px !important;
}

/* Brand Logo Box Glow */
.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%) !important;
  box-shadow: 0 6px 22px rgba(115, 103, 240, 0.48), 0 0 15px rgba(115, 103, 240, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  font-size: 16px !important;
}

.brand {
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text) !important;
}

/* Sidebar Section Headers */
.sidebar-label {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  color: color-mix(in srgb, var(--primary) 70%, var(--muted)) !important;
  text-transform: uppercase !important;
  padding: 16px 12px 8px !important;
}

/* Sidebar Navigation Items */
.sidebar-nav {
  gap: 6px !important;
}

.nav-item {
  min-height: 46px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: var(--muted) !important;
  border: 1px solid transparent !important;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
}

.nav-item svg {
  width: 20px !important;
  height: 20px !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.22s ease !important;
}

.nav-item:hover {
  color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary-soft) 55%, var(--surface)) !important;
  border-color: color-mix(in srgb, var(--primary) 30%, transparent) !important;
  transform: translateX(4px) !important;
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.12) !important;
}

.nav-item:hover svg {
  transform: scale(1.15) rotate(-3deg) !important;
  color: var(--primary) !important;
}

/* Active Nav Item Glow & 3D Accent */
.nav-item.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #7367f0 0%, #5e50ee 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 24px -2px rgba(115, 103, 240, 0.52), 0 0 16px rgba(115, 103, 240, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  transform: translateX(3px) !important;
}

.nav-item.active svg {
  color: #ffffff !important;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, 0.4)) !important;
}

/* Sidebar User Profile Card */
.sidebar-user {
  margin-top: 18px !important;
  padding: 14px 12px !important;
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, var(--primary) 30%) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--surface-2) 60%, transparent) !important;
  backdrop-filter: blur(10px) !important;
}

.sidebar-user .avatar {
  box-shadow: 0 0 0 2px var(--primary-soft), 0 0 12px rgba(115, 103, 240, 0.3) !important;
}

/* Topbar Balance Chip Glow */
.balance-chip {
  padding: 8px 16px !important;
  border-radius: 12px !important;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--primary) 30%) !important;
  background: color-mix(in srgb, var(--surface) 90%, var(--primary-soft)) !important;
  backdrop-filter: blur(14px) !important;
  box-shadow: 0 4px 16px rgba(115, 103, 240, 0.1) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.balance-chip:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(115, 103, 240, 0.2) !important;
}

/* Floating Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .toast {
    top: 74px !important;
    left: auto !important;
    right: 12px !important;
    bottom: auto !important;
    width: max-content !important;
    max-width: calc(100vw - 24px) !important;
    transform: translateY(-8px) scale(.98) !important;
  }

  .toast.show {
    transform: translateY(0) scale(1) !important;
  }

  body.app-body {
    padding-bottom: 96px !important;
  }

  .mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: calc(100% - 28px) !important;
    max-width: 460px !important;
    z-index: 9999 !important;
    pointer-events: none !important;
    transition: opacity 0.22s ease, transform 0.22s ease !important;
  }

  /* Auto-hide floating bottom nav when mobile sidebar menu is opened */
  body.sidebar-open .mobile-bottom-nav,
  .sidebar.open ~ .mobile-bottom-nav,
  .sidebar.open ~ * .mobile-bottom-nav,
  .sidebar-overlay.show ~ .mobile-bottom-nav,
  .sidebar-overlay.show ~ * .mobile-bottom-nav {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, 45px) scale(0.92) !important;
  }

  .mobile-nav-bar {
    pointer-events: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    height: 62px !important;
    border-radius: 32px !important;
    box-shadow: 0 10px 32px rgba(47, 43, 61, 0.15), 0 2px 8px rgba(115, 103, 240, 0.1) !important;
    position: relative !important;
    padding: 0 8px !important;
    border: 1px solid rgba(220, 220, 245, 0.8) !important;
  }

  [data-theme="dark"] .mobile-nav-bar {
    background: rgba(43, 44, 64, 0.94) !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.45) !important;
  }

  .mobile-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    color: #828399 !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    padding: 4px 0 !important;
  }

  [data-theme="dark"] .mobile-nav-item {
    color: #9299b8 !important;
  }

  .mobile-nav-item i, .mobile-nav-item svg {
    width: 20px !important;
    height: 20px !important;
    margin-bottom: 2px !important;
    stroke-width: 2.2 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
  }

  .mobile-nav-item.active {
    color: #7367f0 !important;
    font-weight: 700 !important;
  }

  .mobile-nav-item.active i, .mobile-nav-item.active svg {
    color: #7367f0 !important;
    transform: translateY(-2px) scale(1.12) !important;
  }

  /* Raised Center FAB (Floating Action Button) */
  .mobile-nav-item.fab-item {
    position: relative !important;
    top: -14px !important;
  }

  .fab-circle {
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, #7367f0 0%, #8f85f3 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    box-shadow: 0 8px 22px rgba(115, 103, 240, 0.48) !important;
    border: 4px solid #ffffff !important;
    transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  }

  [data-theme="dark"] .fab-circle {
    border-color: #2b2c40 !important;
  }

  .fab-circle i, .fab-circle svg {
    width: 22px !important;
    height: 22px !important;
    color: #ffffff !important;
    margin-bottom: 0 !important;
    stroke-width: 2.3 !important;
  }

  .mobile-nav-item.fab-item:hover .fab-circle,
  .mobile-nav-item.fab-item.active .fab-circle {
    transform: scale(1.1) !important;
    box-shadow: 0 12px 26px rgba(115, 103, 240, 0.65) !important;
  }

  .mobile-nav-item.fab-item span {
    margin-top: 1px !important;
    font-size: 10px !important;
  }
}

/* Collapsible Server & Country Selection Cards */
.provider-picker-card,
.order-filter-card {
  position: relative !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
}

.provider-picker-card {
  margin-bottom: 18px !important;
}

.collapsible-head {
  cursor: pointer !important;
  user-select: none !important;
  transition: opacity 0.2s ease !important;
}

.collapsible-head:hover {
  opacity: 0.88 !important;
}

.collapse-head-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

.collapse-toggle-indicator {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--primary) 7%, var(--surface)) !important;
  color: var(--primary) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.collapse-toggle-indicator i,
.collapse-toggle-indicator svg {
  width: 17px !important;
  height: 17px !important;
  stroke-width: 2.5 !important;
}

@media (max-width: 860px) {
  .provider-picker-card {
    margin-bottom: 14px !important;
  }

  .collapsible-head .collapse-head-tools {
    width: 100% !important;
    justify-content: space-between !important;
  }
}

.provider-picker-wrapper,
.country-picker-wrapper {
  max-height: 1200px !important;
  opacity: 1 !important;
  overflow: hidden !important;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-top 0.25s ease !important;
}

.provider-picker-card.collapsed .provider-picker-wrapper,
.order-filter-card.collapsed .country-picker-wrapper {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  pointer-events: none !important;
}

.provider-picker-card.collapsed .section-head,
.order-filter-card.collapsed .section-head {
  margin-bottom: 0 !important;
}

/* Custom Input Field Invalid State */
.input-invalid,
input.input-invalid,
select.input-invalid,
textarea.input-invalid {
  border-color: #ff4d49 !important;
  box-shadow: 0 0 0 3.5px rgba(255, 77, 73, 0.22) !important;
  animation: inputShake 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}

@keyframes inputShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-5px); }
  40%, 60% { transform: translateX(5px); }
}

/* Modern Custom Field Tooltip Alert */
.custom-field-tooltip {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 14px !important;
  background: rgba(234, 84, 85, 0.96) !important;
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: 0 8px 24px rgba(234, 84, 85, 0.35) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  animation: tooltipPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  pointer-events: none !important;
  line-height: 1.3 !important;
}

.custom-field-tooltip::before {
  content: "" !important;
  position: absolute !important;
  bottom: 100% !important;
  left: 18px !important;
  border-width: 6px !important;
  border-style: solid !important;
  border-color: transparent transparent rgba(234, 84, 85, 0.96) transparent !important;
}

.custom-field-tooltip svg,
.custom-field-tooltip i {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  stroke-width: 2.4 !important;
  color: #ffffff !important;
}

.custom-field-tooltip.fade-out {
  opacity: 0 !important;
  transform: translateY(4px) !important;
  transition: all 0.22s ease !important;
}

@keyframes tooltipPop {
  0% { opacity: 0; transform: translateY(-6px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.provider-picker{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.provider-option{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:16px;border:1px solid var(--border);border-radius:14px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer}.provider-option span{display:grid;gap:3px}.provider-option small{color:var(--muted)}.provider-option>svg:last-child{opacity:0;color:var(--primary)}.provider-option.active{border-color:var(--primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--primary) 15%,transparent);background:color-mix(in srgb,var(--primary) 6%,var(--surface))}.provider-option.active>svg:last-child{opacity:1}.provider-option:disabled{opacity:.55;cursor:not-allowed}@media(max-width:640px){.provider-picker{grid-template-columns:1fr}}

/* Tur singkat satu kali untuk akun pengguna. */
body.guide-tour-open { overflow: hidden !important; }
.guide-tour-shade {
  position: fixed;
  z-index: 20000;
  background: rgba(15, 18, 32, .72);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  pointer-events: auto;
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.guide-tour-spotlight {
  position: fixed;
  z-index: 20001;
  border: 2px solid #8f85f3;
  border-radius: 17px;
  background: transparent;
  box-shadow: 0 0 0 4px rgba(143, 133, 243, .2), 0 12px 36px rgba(15, 18, 32, .28);
  pointer-events: auto;
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease;
}
.guide-tour-card {
  position: fixed;
  z-index: 20002;
  width: min(360px, calc(100vw - 24px));
  padding: 20px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--line));
  border-radius: 18px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(15, 18, 32, .34);
}
.guide-tour-card.is-centered { width: min(390px, calc(100vw - 32px)); text-align: center; }
.guide-tour-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.guide-tour-card.is-centered .guide-tour-head { justify-content: center; }
.guide-tour-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; color: var(--primary); background: var(--primary-soft); }
.guide-tour-icon svg { width: 21px; height: 21px; stroke-width: 2.35; }
.guide-tour-count { padding: 5px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 11px; font-weight: 800; }
.guide-tour-card.is-centered .guide-tour-count { position: absolute; top: 18px; right: 18px; }
.guide-tour-card h2 { margin: 0; font-size: 21px; line-height: 1.25; }
.guide-tour-card p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.guide-tour-dots { display: flex; align-items: center; gap: 5px; margin-top: 17px; }
.guide-tour-card.is-centered .guide-tour-dots { justify-content: center; }
.guide-tour-dots span { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 28%, transparent); transition: width .18s ease, background .18s ease; }
.guide-tour-dots span.active { width: 20px; background: var(--primary); }
.guide-tour-actions { display: grid; grid-template-columns: auto minmax(118px, 1fr); gap: 10px; margin-top: 18px; }
.guide-tour-actions .btn { min-height: 42px; }
@media (max-width: 520px) {
  .guide-tour-card { padding: 17px; border-radius: 16px; }
  .guide-tour-card h2 { font-size: 19px; }
  .guide-tour-actions { grid-template-columns: minmax(92px, auto) 1fr; }
}

/* Bantuan ringkas pada halaman riwayat pesanan. */
.order-help-trigger { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 18px; align-items: center; gap: 11px; width: 100%; min-height: 62px; margin-top: 12px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 10px; color: var(--text); background: color-mix(in srgb, var(--primary) 4%, var(--surface)); box-shadow: var(--shadow); text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease, background .18s ease; }
.order-help-trigger:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, var(--surface)); transform: translateY(-1px); }
.order-help-trigger-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); }
.order-help-trigger-icon svg { width: 19px; height: 19px; }
.order-help-trigger-copy { min-width: 0; }
.order-help-trigger-copy strong, .order-help-trigger-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-help-trigger-copy strong { font-size: 13px; }
.order-help-trigger-copy small { margin-top: 3px; font-size: 10px; }
.order-help-trigger-count { display: inline-grid; min-width: 24px; height: 24px; place-items: center; padding: 0 7px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 10px; font-weight: 800; }
.order-help-trigger-arrow { width: 17px; height: 17px; color: var(--muted); }
.order-help-modal { width: min(610px, calc(100vw - 24px)); }
.order-help-modal-body { padding-top: 8px; }
.order-help-items { display: grid; }
.order-help-item { --help-tone: var(--primary); display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.order-help-item:last-child { border-bottom: 0; }
.order-help-item.tone-red { --help-tone: var(--danger); }
.order-help-item.tone-cyan { --help-tone: var(--blue); }
.order-help-item.tone-amber { --help-tone: var(--warning); }
.order-help-item.tone-green { --help-tone: var(--success); }
.order-help-item-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px; color: var(--help-tone); background: color-mix(in srgb, var(--help-tone) 12%, var(--surface)); }
.order-help-item-icon svg { width: 18px; height: 18px; }
.order-help-item-copy { min-width: 0; }
.order-help-item-copy h3 { margin: 1px 0 7px; color: var(--help-tone); font-size: 15px; line-height: 1.35; }
.order-help-item-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.order-help-item-copy a { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; color: var(--help-tone); font-size: 12px; font-weight: 800; }
.order-help-item-copy a svg { width: 14px; height: 14px; }
.order-help-footer { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--line)); border-radius: 8px; color: color-mix(in srgb, var(--blue) 75%, var(--text)); background: var(--blue-soft); }
.order-help-footer svg { width: 18px; height: 18px; margin-top: 1px; }
.order-help-footer p { margin: 0; font-size: 12px; line-height: 1.55; }

/* Pengelolaan bantuan pada admin. */
.order-help-admin-grid { grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr); margin-top: 18px; }
.order-help-admin-preview { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto 17px; align-items: center; gap: 10px; min-height: 60px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--line)); border-radius: 9px; background: color-mix(in srgb, var(--primary) 5%, var(--surface)); }
.order-help-admin-preview > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }
.order-help-admin-preview > span svg, .order-help-admin-preview > svg { width: 17px; height: 17px; }
.order-help-admin-preview div { min-width: 0; }
.order-help-admin-preview strong, .order-help-admin-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.order-help-admin-preview b { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 6px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 10px; }
.order-help-admin-note { margin-top: 14px; }
.order-help-admin-row { align-items: center; gap: 16px; }
.order-help-admin-summary { display: flex; min-width: 0; flex: 1; align-items: flex-start; gap: 11px; }
.order-help-admin-summary > div { min-width: 0; }
.order-help-admin-summary strong, .order-help-admin-summary span, .order-help-admin-summary small { display: block; }
.order-help-admin-summary span { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.order-help-admin-summary small { margin-top: 5px; }
.order-help-admin-icon { --help-tone: var(--primary); display: grid !important; width: 36px; height: 36px; place-items: center; flex: none; margin: 0 !important; border-radius: 8px; color: var(--help-tone) !important; background: color-mix(in srgb, var(--help-tone) 12%, var(--surface)); }
.order-help-admin-icon.tone-red { --help-tone: var(--danger); }
.order-help-admin-icon.tone-cyan { --help-tone: var(--blue); }
.order-help-admin-icon.tone-amber { --help-tone: var(--warning); }
.order-help-admin-icon.tone-green { --help-tone: var(--success); }
.order-help-admin-icon svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .order-help-admin-grid { grid-template-columns: 1fr; }
  .order-help-admin-row { align-items: flex-start; flex-direction: column; }
  .order-help-admin-row > .button-row { width: 100%; }
}
@media (max-width: 480px) {
  .order-help-trigger { grid-template-columns: 36px minmax(0, 1fr) auto 16px; min-height: 56px; padding: 9px 11px; }
  .order-help-trigger-icon { width: 36px; height: 36px; }
  .order-help-trigger-copy small { max-width: 220px; }
  .order-help-modal .modal-head, .order-help-modal .modal-body { padding-left: 15px; padding-right: 15px; }
  .order-help-item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 15px 0; }
  .order-help-item-icon { width: 32px; height: 32px; }
  .order-help-item-copy h3 { font-size: 14px; }
  .order-help-item-copy p { font-size: 12px; }
}

/* Halaman maintenance mandiri. */
.maintenance-body {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow-x: hidden;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: linear-gradient(145deg, color-mix(in srgb, var(--primary) 7%, var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--blue) 6%, var(--bg)) 100%);
}
.maintenance-backdrop { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.maintenance-orb { position: absolute; border-radius: 50%; filter: blur(3px); opacity: .65; }
.maintenance-orb-one { top: -150px; left: -90px; width: 360px; height: 360px; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 32%, transparent), transparent 70%); }
.maintenance-orb-two { right: -150px; bottom: -180px; width: 440px; height: 440px; background: radial-gradient(circle, color-mix(in srgb, var(--blue) 25%, transparent), transparent 70%); }
.maintenance-grid { position: absolute; inset: 0; opacity: .28; background-image: linear-gradient(color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--primary) 10%, transparent) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at center, #000 12%, transparent 72%); }
.maintenance-shell { position: relative; z-index: 1; width: min(960px, 100%); }
.maintenance-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr); gap: 40px; align-items: center; overflow: hidden; padding: clamp(28px, 5vw, 58px); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--line)); border-radius: 28px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: 0 30px 90px rgba(47, 43, 61, .14); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.maintenance-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--primary), #9a8cff, var(--blue)); }
.maintenance-copy { position: relative; z-index: 2; }
.maintenance-brand { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 34px; color: var(--text); font-size: 18px; }
.maintenance-brand-mark { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #8a7ff5, var(--primary-strong)); box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 34%, transparent); font-weight: 900; }
.maintenance-status { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px; padding: 7px 11px; border: 1px solid color-mix(in srgb, var(--warning) 30%, var(--line)); border-radius: 999px; color: color-mix(in srgb, var(--warning) 80%, var(--text)); background: color-mix(in srgb, var(--warning) 10%, var(--surface)); font-size: 11px; font-weight: 800; }
.maintenance-status > span { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 15%, transparent); animation: maintenancePulse 1.8s ease-in-out infinite; }
.maintenance-kicker { margin: 0 0 8px; color: var(--primary); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.maintenance-copy h1 { max-width: 570px; margin: 0; font-size: clamp(32px, 5vw, 52px); line-height: 1.08; letter-spacing: -.045em; }
.maintenance-lead { max-width: 590px; margin: 18px 0 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.maintenance-highlights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 26px; }
.maintenance-highlight { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: color-mix(in srgb, var(--surface-2) 82%, transparent); }
.maintenance-highlight-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; color: var(--success); background: var(--success-soft); }
.maintenance-highlight-icon.blue { color: var(--blue); background: var(--blue-soft); }
.maintenance-highlight-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.maintenance-highlight strong, .maintenance-highlight small { display: block; }
.maintenance-highlight strong { font-size: 12px; }
.maintenance-highlight small { margin-top: 3px; font-size: 10px; line-height: 1.45; }
.maintenance-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.maintenance-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 9px; padding: 0 17px; border: 1px solid transparent; border-radius: 13px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.maintenance-button:hover { transform: translateY(-2px); }
.maintenance-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.maintenance-button.telegram { color: #fff; background: linear-gradient(135deg, #2aabee, #1787ca); box-shadow: 0 11px 24px rgba(42, 171, 238, .24); }
.maintenance-button.retry { color: var(--text); border-color: var(--line); background: var(--surface); }
.maintenance-button.retry:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line)); }
.maintenance-channel-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.maintenance-visual { position: relative; display: grid; min-height: 390px; place-items: center; }
.maintenance-visual-glow { position: absolute; width: 250px; height: 250px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--primary) 25%, transparent), transparent 69%); filter: blur(6px); }
.maintenance-ring { position: absolute; border: 1px dashed color-mix(in srgb, var(--primary) 30%, transparent); border-radius: 50%; animation: maintenanceSpin 24s linear infinite; }
.maintenance-ring::after { content: ""; position: absolute; top: 13%; right: 9%; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 16px var(--primary); }
.maintenance-ring.ring-one { width: 280px; height: 280px; }
.maintenance-ring.ring-two { width: 335px; height: 335px; animation-direction: reverse; animation-duration: 32s; opacity: .55; }
.maintenance-machine { position: relative; z-index: 2; width: 205px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 24%, var(--line)); border-radius: 24px; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 92%, var(--primary-soft)), var(--surface)); box-shadow: 0 24px 50px rgba(47, 43, 61, .2); transform: rotate(-3deg); }
.maintenance-machine-top { display: flex; gap: 6px; padding: 2px 2px 12px; }
.maintenance-machine-dot { width: 7px; height: 7px; border-radius: 50%; }
.maintenance-machine-dot.red { background: var(--danger); }.maintenance-machine-dot.amber { background: var(--warning); }.maintenance-machine-dot.green { background: var(--success); }
.maintenance-machine-screen { display: grid; gap: 10px; padding: 22px 18px; border-radius: 16px; background: color-mix(in srgb, var(--primary) 9%, var(--surface-2)); }
.maintenance-machine-screen span { height: 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 22%, var(--line)); }
.maintenance-machine-screen span:nth-child(1) { width: 76%; }.maintenance-machine-screen span:nth-child(2) { width: 100%; }.maintenance-machine-screen span:nth-child(3) { width: 55%; }
.maintenance-tool { position: absolute; right: -26px; bottom: -27px; display: grid; width: 82px; height: 82px; place-items: center; border: 8px solid var(--surface); border-radius: 25px; color: #fff; background: linear-gradient(145deg, #958afa, var(--primary-strong)); box-shadow: 0 15px 30px color-mix(in srgb, var(--primary) 30%, transparent); animation: maintenanceFloat 3.4s ease-in-out infinite; }
.maintenance-tool svg { width: 36px; height: 36px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.maintenance-progress { position: absolute; z-index: 3; right: 4px; bottom: 30px; width: 190px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--primary) 18%, var(--line)); border-radius: 14px; background: color-mix(in srgb, var(--surface) 92%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(10px); }
.maintenance-progress > span { display: block; height: 6px; overflow: hidden; border-radius: 999px; background: var(--primary-soft); }
.maintenance-progress b { display: block; width: 58%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--blue)); animation: maintenanceProgress 2.5s ease-in-out infinite alternate; }
.maintenance-progress small { margin-top: 8px; font-size: 10px; font-weight: 700; }
.maintenance-footer { margin: 16px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
@keyframes maintenancePulse { 0%, 100% { transform: scale(.85); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes maintenanceSpin { to { transform: rotate(360deg); } }
@keyframes maintenanceFloat { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-9px) rotate(-3deg); } }
@keyframes maintenanceProgress { from { width: 28%; } to { width: 86%; } }

@media (max-width: 780px) {
  .maintenance-card { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; }
  .maintenance-brand { margin-bottom: 25px; }
  .maintenance-copy h1 { font-size: clamp(30px, 9vw, 43px); }
  .maintenance-visual { order: -1; min-height: 220px; }
  .maintenance-ring.ring-one { width: 178px; height: 178px; }
  .maintenance-ring.ring-two { width: 220px; height: 220px; }
  .maintenance-machine { width: 142px; padding: 10px; border-radius: 18px; }
  .maintenance-machine-top { padding-bottom: 8px; }
  .maintenance-machine-screen { gap: 7px; padding: 15px 12px; border-radius: 12px; }
  .maintenance-machine-screen span { height: 7px; }
  .maintenance-tool { right: -21px; bottom: -22px; width: 60px; height: 60px; border-width: 6px; border-radius: 18px; }
  .maintenance-tool svg { width: 26px; height: 26px; }
  .maintenance-progress { right: calc(50% - 125px); bottom: -3px; width: 160px; }
}
@media (max-width: 520px) {
  .maintenance-body { padding-right: 12px; padding-left: 12px; }
  .maintenance-card { padding: 24px 18px; border-radius: 22px; }
  .maintenance-highlights { grid-template-columns: 1fr; }
  .maintenance-actions { display: grid; grid-template-columns: 1fr; }
  .maintenance-button { width: 100%; }
  .maintenance-lead { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .maintenance-status > span, .maintenance-ring, .maintenance-tool, .maintenance-progress b, .hero-reseller-badge::before { animation: none; }
}

/* Voucher saldo. */
.voucher-page-shell { width: 100%; max-width: 1080px; margin: 0 auto; }
.voucher-claim-history { margin-top: 18px; }
.voucher-redeem-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 18px;
  border-color: color-mix(in srgb, var(--primary) 24%, var(--line));
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 7%, var(--surface)), color-mix(in srgb, var(--blue) 4%, var(--surface)));
}
.voucher-redeem-copy { display: flex; align-items: center; gap: 14px; }
.voucher-redeem-copy h2 { margin: 3px 0 5px; font-size: 22px; }
.voucher-redeem-copy p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 12px; }
.voucher-redeem-icon { display: grid; width: 52px; height: 52px; place-items: center; flex: none; border-radius: 15px; color: var(--primary); background: var(--primary-soft); box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 14%, transparent); }
.voucher-redeem-icon svg { width: 25px; height: 25px; }
.voucher-redeem-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.voucher-redeem-form .btn { min-height: 40px; }
.voucher-redeem-form input { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: .05em; text-transform: uppercase; }
.voucher-admin-grid { grid-template-columns: minmax(290px, .8fr) minmax(0, 1.2fr); margin-bottom: 18px; }
.voucher-created-card { display: grid; grid-template-columns: auto minmax(180px, .45fr) minmax(320px, 1fr); gap: 16px; align-items: center; margin-bottom: 18px; border-color: color-mix(in srgb, var(--success) 35%, var(--line)); background: linear-gradient(135deg, color-mix(in srgb, var(--success) 8%, var(--surface)), var(--surface)); }
.voucher-created-icon { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: var(--success); background: var(--success-soft); }
.voucher-created-icon svg { width: 23px; height: 23px; }
.voucher-created-copy h2 { margin: 3px 0 0; font-size: 20px; }
.voucher-created-copy small { margin-top: 4px; }
.voucher-created-code { width: 100%; }
.voucher-created-code input { min-height: 44px; color: var(--text); background: var(--surface); font-size: 14px; font-weight: 800; letter-spacing: .06em; }
.voucher-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.voucher-stats > div { min-width: 0; padding: 17px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
.voucher-stats > div:nth-child(odd) { border-right: 1px solid var(--line); }
.voucher-stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.voucher-stats span, .voucher-stats strong { display: block; }
.voucher-stats span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.voucher-stats strong { margin-top: 6px; font-size: 17px; overflow-wrap: anywhere; }
.voucher-list-card .table-wrap { min-height: 140px; }

@media (max-width: 900px) {
  .voucher-redeem-card, .voucher-admin-grid { grid-template-columns: 1fr; }
  .voucher-created-card { grid-template-columns: auto minmax(0, 1fr); }
  .voucher-created-code { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .voucher-redeem-copy { align-items: flex-start; }
  .voucher-redeem-form { grid-template-columns: 1fr; }
  .voucher-redeem-form .btn { width: 100%; }
  .voucher-created-card { grid-template-columns: 1fr; }
  .voucher-created-code { grid-column: auto; flex-direction: column; }
  .voucher-created-code .btn { width: 100%; }
  .voucher-stats > div { padding: 14px; }
  .voucher-stats strong { font-size: 15px; }
}

/* Compact language picker. Kept in CSS so the menu stays usable if JS is late. */
.language-switcher { position: relative; }
.language-switcher:not([open]) > .language-menu { display: none !important; }
.language-switcher[open] > .language-menu {
  display: grid !important; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px;
  position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important;
  width: min(340px,calc(100vw - 24px)) !important; max-height: min(420px,calc(100vh - 130px));
  padding: 10px !important; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line) !important; border-radius: 18px !important;
  background: var(--surface) !important; box-shadow: 0 20px 55px rgba(32,29,55,.2) !important; z-index: 1200 !important;
}
.language-menu form { min-width: 0; margin: 0 !important; }
.language-menu .language-option {
  display: grid !important; grid-template-columns: 25px minmax(0,1fr) 18px; align-items: center; gap: 8px;
  width: 100% !important; min-height: 48px; padding: 8px 10px !important;
  border: 1px solid transparent !important; border-radius: 12px !important;
  color: var(--text) !important; background: transparent !important; text-align: left; cursor: pointer;
}
.language-menu .language-option > span { font-size: 20px; line-height: 1; }
.language-menu .language-option > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px !important; font-weight: 750 !important; }
.language-menu .language-option > svg,.language-menu .language-option > i { grid-column: 3; width: 16px !important; height: 16px !important; color: var(--primary); }
.language-menu .language-option:hover { border-color: var(--line) !important; background: var(--surface-2) !important; }
.language-menu .language-option.active { border-color: rgba(115,103,240,.2) !important; color: var(--primary) !important; background: var(--primary-soft) !important; }
[dir="rtl"] .language-switcher[open] > .language-menu { right: auto !important; left: 0 !important; }
[dir="rtl"] .language-menu .language-option { text-align: right; }
@media (max-width: 420px) {
  .language-switcher[open] > .language-menu { width: calc(100vw - 20px) !important; gap: 5px; padding: 8px !important; }
  .language-menu .language-option { min-height: 45px; padding: 7px 8px !important; gap: 6px; }
  .language-menu .language-option > b { font-size: 11px !important; }
}

/* Language picker: stored in account/cookie, never exposed in the URL. */
.language-switcher { position: relative; z-index: 80; color: var(--text); }
.language-switcher summary { display: inline-flex; min-width: 58px; height: 42px; padding: 0 11px; align-items: center; justify-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 5px 16px rgba(47,43,61,.06); cursor: pointer; list-style: none; user-select: none; }
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary svg { width: 14px; height: 14px; color: var(--muted); transition: transform .18s ease; }
.language-switcher[open] summary svg { transform: rotate(180deg); }
.language-flag { font-size: 17px; line-height: 1; }
.language-current { font-size: 11px; font-weight: 850; letter-spacing: .04em; }
.language-menu { position: absolute; top: calc(100% + 9px); right: 0; width: min(265px, calc(100vw - 28px)); max-height: min(430px, 70vh); padding: 7px; overflow-y: auto; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: 0 18px 50px rgba(31,28,57,.2); }
.language-menu form { margin: 0; }
.language-option { display: grid; width: 100%; grid-template-columns: 25px minmax(0,1fr) 18px; gap: 9px; align-items: center; padding: 10px 11px; border: 0; border-radius: 10px; color: var(--text); background: transparent; font: inherit; text-align: left; cursor: pointer; }
.language-option:hover, .language-option.active { color: var(--primary); background: var(--primary-soft); }
.language-option b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.language-option svg { width: 15px; height: 15px; }
.auth-language-control, .maintenance-language-control { position: fixed; top: 18px; right: 18px; z-index: 1200; }
.auth-language-control .language-menu, .maintenance-language-control .language-menu { right: 0; }

[dir="rtl"] body { direction: rtl; }
[dir="rtl"] .language-menu { right: auto; left: 0; }
[dir="rtl"] .language-option { text-align: right; }
[dir="rtl"] .auth-language-control, [dir="rtl"] .maintenance-language-control { right: auto; left: 18px; }
[dir="rtl"] .app-shell { grid-template-columns: minmax(0, 1fr) var(--sidebar); }
[dir="rtl"] .sidebar { left: auto; right: 0; }
[dir="rtl"] .sidebar { border-right: 0 !important; border-left: 1px solid var(--line) !important; }
[dir="rtl"] .main-shell { grid-column: 1; margin: 0; }
[dir="rtl"] .topbar-actions { margin-left: 0; margin-right: auto; }

@media (max-width: 900px) {
  [dir="rtl"] .main-shell { margin-right: 0; }
  [dir="rtl"] .sidebar { transform: translateX(105%); }
  [dir="rtl"] .sidebar.open { transform: translateX(0); }
  .topbar .language-current { display: none; }
  .topbar .language-switcher summary { min-width: 42px; padding: 0 8px; }
}

@media (max-width: 560px) {
  .auth-language-control, .maintenance-language-control { top: 10px; right: 10px; }
  [dir="rtl"] .auth-language-control, [dir="rtl"] .maintenance-language-control { right: auto; left: 10px; }
  .auth-language-control .language-switcher summary { background: color-mix(in srgb, var(--surface) 86%, transparent); }
}

/* Final language picker layout: prevents the first column from being pushed
   outside the viewport by legacy menu sizing rules. */
.language-switcher[open] > .language-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  gap: 7px !important;
  width: min(380px, calc(100vw - 24px)) !important;
  max-height: min(360px, calc(100vh - 110px)) !important;
  padding: 10px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border-radius: 16px !important;
}
.language-switcher > .language-menu > form {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
.language-switcher .language-option {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 8px 10px !important;
  grid-template-columns: 25px minmax(0, 1fr) 17px !important;
  gap: 7px !important;
}
.language-switcher .language-option > b {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 12px !important;
}

@media (max-width: 900px) {
  .topbar .language-switcher[open] > .language-menu {
    position: fixed !important;
    top: 82px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: min(330px, calc(100vh - 104px)) !important;
    z-index: 1600 !important;
  }
  [dir="rtl"] .topbar .language-switcher[open] > .language-menu {
    right: 12px !important;
    left: 12px !important;
  }
}

@media (max-width: 380px) {
  .language-switcher[open] > .language-menu { gap: 5px !important; padding: 8px !important; }
  .language-switcher .language-option { min-height: 45px !important; padding: 7px 8px !important; gap: 5px !important; }
  .language-switcher .language-option > b { font-size: 11px !important; }
}