@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg0: #040714;
    --bg1: #0b1030;
    --bg2: #12183e;
    --bg3: #1d2457;
    --accent: #8c63ff;
    --accent2: #6b88ff;
    --pink: #d57cff;
    --accent-g: linear-gradient(90deg, #d57cff 0%, #8c63ff 44%, #6b88ff 100%);
    --link: #8494ff;
    --green: #1cb56b;
    --text: #ffffff;
    --text2: #aeb4da;
    --text3: #7b84b4;
    --card-border: rgba(150,170,255,0.14);
    --purple-glow: rgba(124,79,255,0.18);
  }

  html, body {
    height: 100%; min-height: 100%;
    background: var(--bg0);
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: none;
  }
  html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }

  /* ── Ambient background glow ── */
  body::before {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(ellipse 60% 40% at 30% 20%, rgba(80,50,200,0.18) 0%, transparent 70%),
      radial-gradient(ellipse 50% 35% at 80% 70%, rgba(40,80,200,0.12) 0%, transparent 70%),
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(20,20,80,0.4) 0%, transparent 60%);
  }
  body::after {
    content: '';
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%),
      radial-gradient(circle at 50% 0%, rgba(134,103,255,0.14), transparent 30%);
  }

  .screen {
    position: relative; z-index: 1;
    width: min(calc(100% - 22px), 438px);
    max-width: 438px; margin: 0 auto;
    min-height: 100dvh;
    display: flex; flex-direction: column;
    padding: 0 0 144px;
    background:
      linear-gradient(180deg, rgba(13,18,48,0.97), rgba(6,10,26,0.98)),
      radial-gradient(circle at 50% 0%, rgba(126,92,255,0.1), transparent 42%);
    border: 1px solid rgba(141,153,224,0.24);
    border-radius: 0;
    box-shadow:
      0 18px 70px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.06),
      inset 0 0 0 1px rgba(110,118,190,0.06);
    overflow-x: hidden;
  }

  /* ── Status bar ── */
  /* ── Top bar ── */
  .top-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 22px 18px;
  }
  .logo-row { display: flex; align-items: center; gap: 14px; }
  .logo-circle {
    width: 52px; height: 52px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #2a1f6e, #120c3a 70%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 22px rgba(124,79,255,0.55), inset 0 0 10px rgba(124,79,255,0.4);
    border: 1px solid rgba(150,110,255,0.5);
    flex-shrink: 0;
  }
  .logo-circle svg { width: 34px; height: 34px; }
  .logo-name { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
  .logo-sub { font-size: 14px; color: #b7bce0; margin-top: 2px; }
  .avatar-btn {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid rgba(124,79,255,0.38);
    overflow: hidden; cursor: pointer; position: relative;
    background: linear-gradient(160deg, #3a4a72, #222a44);
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(124,79,255,0.24);
  }
  .avatar-btn svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
  .online-dot {
    position: absolute; bottom: 1px; right: 1px;
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--green); border: 2px solid var(--bg0);
  }

  /* ── Balance card ── */
  .balance-card {
    margin: 0 22px 24px;
    background: linear-gradient(160deg, #1b184e 0%, #181546 46%, #121435 100%);
    border-radius: 24px; padding: 24px 24px 20px;
    position: relative; overflow: hidden;
    border: 1px solid rgba(128,110,255,0.28);
    box-shadow: 0 16px 40px rgba(21,16,60,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  }
  .balance-card::before {
    content: ''; position: absolute;
    top: -50px; right: -40px;
    width: 180px; height: 180px; border-radius: 50%;
    background: radial-gradient(circle, rgba(120,70,255,0.18), transparent 70%);
    z-index: 0;
  }
  .balance-card::after {
    content: ''; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(10,12,34,0.82) 0%, rgba(12,14,38,0.7) 24%, rgba(14,16,40,0.42) 44%, rgba(14,16,40,0.08) 64%, transparent 78%),
      radial-gradient(circle at 16% 18%, rgba(110,78,255,0.16), transparent 34%);
    pointer-events: none;
    z-index: 1;
  }
  .balance-top { min-height: 150px; }
  .balance-label { position: relative; z-index: 2; color: rgba(222,216,255,0.92); font-size: 15px; font-weight: 600; margin-bottom: 8px; text-shadow: 0 2px 14px rgba(0,0,0,0.32); }
  .balance-amount { position: relative; z-index: 2; font-size: 28px; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 18px; text-shadow: 0 4px 20px rgba(0,0,0,0.34); }
  .bonus-pill {
    display: inline-flex; align-items: center; gap: 8px;
    width: fit-content; min-height: 38px;
    background: linear-gradient(180deg, rgba(42,46,98,0.88), rgba(33,37,82,0.84));
    border: 1px solid rgba(170,150,255,0.18);
    border-radius: 15px; padding: 9px 15px 9px 13px;
    color: #ddd6ff; font-size: 14px; font-weight: 700;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 10px 24px rgba(18,20,52,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative; z-index: 2;
  }
  .bonus-pill .plus {
    width: 17px; height: 17px; border-radius: 50%;
    background: linear-gradient(135deg, #c978ff 0%, #7a8bff 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(146,99,255,0.35);
    flex-shrink: 0;
  }
  .wallet-3d {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    filter: saturate(1.04) brightness(1.02);
    object-fit: cover;
    object-position: 61.5% 35%;
    transform: scale(0.975);
    transform-origin: center center;
    pointer-events: none;
    z-index: 0;
  }

  /* ── Topup button (inside balance card) ── */
  .topup-btn {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 14px;
    background: linear-gradient(90deg, #d96bff 0%, #8a5cff 48%, #5b8dff 100%);
    border: none; border-radius: 18px; padding: 18px;
    color: #fff; font-size: 16px; font-weight: 800; cursor: pointer;
    box-shadow: 0 6px 26px rgba(140,80,255,0.45);
    transition: transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
    position: relative; overflow: hidden;
  }
  .topup-btn .bolt { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
  .topup-btn::before {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    transform: translateX(-100%);
    transition: transform 0.5s;
  }
  .topup-btn:hover::before { transform: translateX(100%); }
  .topup-btn:active { transform: scale(0.98); box-shadow: 0 2px 12px rgba(140,80,255,0.4); }

  /* ── Section header ── */
  .sec-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 26px 14px 20px;
  }
  .sec-title { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
  .sec-link { color: #8e8ff5; font-size: 12px; font-weight: 600; cursor: pointer; transition: color 0.2s; display:inline-flex; align-items:center; gap:3px; flex-shrink:0; white-space:nowrap; }
  .sec-link:hover { color: #8ab0ff; }

  /* ── Categories ── */
  .categories-scroll {
    display: flex; gap: 10px; padding: 0 20px 18px;
    overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
  }
  .categories-scroll.grabbing { cursor: grabbing; }
  .categories-scroll::-webkit-scrollbar { display: none; }

  .cat-card {
    flex: 0 0 calc((100% - 33px) / 4); min-width: 0;
    min-height: 160px;
    background: linear-gradient(180deg, rgba(19,27,60,0.96), rgba(14,21,47,0.96));
    border-radius: 20px; padding: 16px 10px 14px;
    display: flex; flex-direction: column; align-items: center; gap: 9px;
    border: 1px solid rgba(112,128,196,0.22);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    text-align: center;
  }
  .cat-card:hover {
    background: linear-gradient(180deg, rgba(24,32,69,0.98), rgba(16,23,50,0.98));
    border-color: rgba(177,110,255,0.58);
    box-shadow: inset 0 0 0 1px rgba(150,108,255,0.18), 0 0 20px rgba(134,92,255,0.16);
  }
  .cat-card.active {
    background: linear-gradient(180deg, rgba(29,26,74,0.98), rgba(18,22,54,0.98));
    border-color: rgba(177,110,255,0.85);
    box-shadow:
      0 0 0 1px rgba(177,110,255,0.55),
      0 0 18px rgba(134,92,255,0.3),
      inset 0 0 18px rgba(120,70,255,0.1);
  }
  .cat-icon {
    width: 52px; height: 52px; border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .cat-name { color: #f4f6ff; font-size: 14px; font-weight: 700; line-height: 1.2; }
  .cat-sub { color: #aeb4da; font-size: 11px; line-height: 1.28; margin-top: -1px; }

  /* ── Dots ── */
  .dots { display: flex; gap: 7px; justify-content: center; padding: 4px 0 20px; }
  .dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(165,160,220,0.34); transition: all 0.3s; }
  .dot.active { background: #8d63ff; width: 7px; border-radius: 50%; }

  /* ── Orders ── */
  .order-card {
    margin: 0 20px 12px;
    background: linear-gradient(180deg, rgba(17,24,54,0.96), rgba(14,19,45,0.96));
    border-radius: 20px; padding: 14px 16px;
    display: flex; align-items: center; gap: 13px;
    border: 1px solid rgba(108,128,196,0.2);
    cursor: pointer;
    transition: background 0.2s, transform 0.15s;
  }
  .order-chevron { flex-shrink: 0; margin-left: 2px; }
  .order-card:hover { background: linear-gradient(180deg, rgba(20,28,61,0.98), rgba(16,22,49,0.98)); transform: translateY(-1px); }
  .order-icon {
    width: 48px; height: 48px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .order-info { flex: 1; min-width: 0; }
  .order-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .order-user { color: #9ea7d0; font-size: 11px; margin-top: 1px; }
  .order-date { color: #8b93bf; font-size: 11px; margin-top: 4px; }
  .order-right { text-align: right; flex-shrink: 0; }
  .status-badge {
    display: inline-block; border-radius: 999px; padding: 6px 12px;
    font-size: 11px; font-weight: 700; margin-bottom: 8px;
  }
  .status-done { background: rgba(28,181,107,0.14); color: #35cf85; }
  .status-pending { background: rgba(255,170,0,0.13); color: #ffaa00; }
  .status-process { background: rgba(85,153,255,0.13); color: #73a5ff; }
  .order-price { font-size: 16px; font-weight: 800; letter-spacing: -0.02em; }

    /* ── Bottom navigation ── */
  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(calc(100% - 22px), 438px);
    background: linear-gradient(180deg, rgba(17,23,53,0.97), rgba(14,18,43,0.99));
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(119,133,204,0.2);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    display: flex; padding: 10px 10px 28px; z-index: 120;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.45);
  }
  .nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    cursor: pointer; padding: 8px 0 6px; margin: 0 4px; border-radius: 18px;
    transition: background 0.2s, opacity 0.2s;
  }
  .nav-item.active { background: linear-gradient(180deg, rgba(93,68,188,0.18), rgba(67,44,132,0.1)); }
  .nav-item:active { opacity: 0.7; }
  .nav-ico { position: relative; width: 24px; height: 24px; }
  .nav-ico svg { width: 24px; height: 24px; }
  .nav-lbl { font-size: 11px; font-weight: 500; color: #8b94bf; transition: color 0.2s; }
  .nav-item.active .nav-lbl { color: #a77cff; }
  /* ── Catalog screen ── */
  .catalog-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; padding: 0 14px 14px;
  }
  .catalog-item {
    background: rgba(255,255,255,0.04);
    border-radius: 18px; padding: 16px 14px;
    border: 1px solid var(--card-border);
    cursor: pointer; transition: all 0.2s;
  }
  .catalog-item:hover { background: rgba(255,255,255,0.08); transform: translateY(-2px); }
  .catalog-item-ico {
    width: 44px; height: 44px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
  }
  .catalog-item-name { font-size: 13px; font-weight: 700; margin-bottom: 3px; }
  .catalog-item-sub { font-size: 11px; color: var(--text3); }
  .catalog-item-price { font-size: 13px; font-weight: 700; color: var(--accent); margin-top: 8px; }

  /* ── Search bar ── */
  .search-bar {
    margin: 0 14px 16px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--card-border);
    border-radius: 16px; padding: 12px 16px;
    display: flex; align-items: center; gap: 10px;
    color: var(--text3); font-size: 14px; font-family: inherit;
    cursor: text;
  }

  /* ── Orders screen ── */
  .filter-row {
    display: flex; gap: 8px; padding: 0 14px 16px;
    overflow-x: auto; scrollbar-width: none;
  }
  .filter-row::-webkit-scrollbar { display: none; }
  .filter-chip {
    flex-shrink: 0; padding: 6px 14px; border-radius: 20px;
    border: 1px solid var(--card-border);
    font-size: 12px; font-weight: 600; color: var(--text3);
    cursor: pointer; transition: all 0.2s;
    background: transparent;
    font-family: inherit;
  }
  .filter-chip.active {
    background: rgba(124,79,255,0.18); color: #a88fff;
    border-color: rgba(124,79,255,0.4);
  }

  /* ── Cabinet screen ── */
  .profile-block {
    display: flex; flex-direction: column; align-items: center;
    padding: 24px 18px 18px;
  }
  .profile-avatar {
    width: 76px; height: 76px; border-radius: 50%;
    background: linear-gradient(160deg, #c8a070, #e0b882);
    position: relative; margin-bottom: 12px;
    border: 3px solid rgba(124,79,255,0.5);
    overflow: hidden;
  }
  .profile-avatar svg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
  .profile-name { font-size: 18px; font-weight: 800; margin-bottom: 3px; }
  .profile-id { font-size: 12px; color: var(--text3); }
  .profile-stats {
    display: flex; gap: 10px; padding: 0 14px 18px;
  }
  .stat-card {
    flex: 1; background: rgba(255,255,255,0.04);
    border-radius: 16px; padding: 14px 10px;
    text-align: center; border: 1px solid var(--card-border);
  }
  .stat-val { font-size: 18px; font-weight: 800; margin-bottom: 3px; }
  .stat-lbl { font-size: 10px; color: var(--text3); font-weight: 500; }
  .menu-list { padding: 0 14px; }
  .menu-item {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
    cursor: pointer;
  }
  .menu-item:last-child { border-bottom: none; }
  .menu-ico {
    width: 38px; height: 38px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .menu-text { flex: 1; }
  .menu-label { font-size: 14px; font-weight: 600; }
  .menu-sub { font-size: 11px; color: var(--text3); margin-top: 1px; }

  /* ── Utility ── */
  .page { display: none; flex-direction: column; }
  .page.active { display: flex; }
  .page, .page * {
    scrollbar-width: none;
  }
  .page::-webkit-scrollbar, .page *::-webkit-scrollbar { display: none; }

  /* animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .page.active > * { animation: fadeUp 0.3s ease both; }
  .page.active > *:nth-child(2) { animation-delay: 0.04s; }
  .page.active > *:nth-child(3) { animation-delay: 0.08s; }
  .page.active > *:nth-child(4) { animation-delay: 0.12s; }
  .page.active > *:nth-child(5) { animation-delay: 0.16s; }
  .page.active > *:nth-child(6) { animation-delay: 0.20s; }
  .page.active > *:nth-child(7) { animation-delay: 0.24s; }
  .page.active > *:nth-child(8) { animation-delay: 0.28s; }

  @keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 18px rgba(124,79,255,0.4); }
    50% { box-shadow: 0 0 32px rgba(124,79,255,0.7); }
  }
  .logo-circle { animation: pulse-glow 3s ease-in-out infinite; }

  /* Ripple */
  .ripple-host { position: relative; overflow: hidden; }
  .ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.18);
    transform: scale(0); animation: rippleAnim 0.55s linear;
    pointer-events: none;
  }
  @keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

  .divider { height: 1px; background: rgba(255,255,255,0.05); margin: 0 14px 16px; }

  /* ── Big page title ── */
  .page-title { font-size: 26px; font-weight: 800; padding: 4px 18px 14px; letter-spacing: -0.5px; }

  /* ── Chips row (filters) ── */
  .chips-row {
    display: flex; gap: 9px; padding: 0 14px 16px;
    overflow-x: auto; scrollbar-width: none;
  }
  .chips-row::-webkit-scrollbar { display: none; }
  .chip {
    flex-shrink: 0; padding: 9px 18px; border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 13px; font-weight: 600; color: var(--text2);
    cursor: pointer; transition: all 0.2s; background: transparent;
    font-family: inherit;
  }
  .chip.active {
    background: var(--accent); color: #fff; border-color: transparent;
    box-shadow: 0 4px 16px rgba(124,79,255,0.4);
  }

  /* ── Service list (catalog) ── */
  .svc-card {
    margin: 0 14px 11px;
    background: rgba(255,255,255,0.04);
    border-radius: 20px; padding: 14px 16px;
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--card-border);
    cursor: pointer; transition: background 0.2s, transform 0.15s;
  }
  .svc-card:hover { background: rgba(255,255,255,0.07); transform: translateY(-1px); }
  .svc-ico {
    width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
    background: linear-gradient(150deg, rgba(124,79,255,0.28), rgba(90,141,255,0.16));
    display: flex; align-items: center; justify-content: center;
  }
  .svc-info { flex: 1; min-width: 0; }
  .svc-name-row { display: flex; align-items: center; gap: 8px; }
  .svc-name { font-size: 15px; font-weight: 700; }
  .svc-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .hit-badge {
    background: rgba(124,79,255,0.25); color: #b59bff;
    font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 8px;
  }
  .svc-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
  .svc-price { font-size: 14px; font-weight: 700; }

  /* ── Cabinet compact balance ── */
  .balance-card.compact .balance-top { min-height: 102px; }
  .balance-card.compact .wallet-3d {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-position: 61% 37%;
    transform: scale(0.955);
    transform-origin: center center;
  }
  .topup-mini {
    display: inline-flex; align-items: center; gap: 8px;
    margin-top: 14px;
    background: linear-gradient(90deg, #8a5cff, #6d6bff);
    border: none; border-radius: 14px; padding: 11px 18px;
    color: #fff; font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: inherit; box-shadow: 0 4px 18px rgba(120,80,255,0.4);
    transition: transform 0.15s;
  }
  .topup-mini:active { transform: scale(0.97); }

  /* ── SMM module card ── */
  .smm-card {
    margin: 0 14px 18px;
    background: rgba(255,255,255,0.04);
    border-radius: 20px; padding: 16px;
    display: flex; align-items: center; gap: 14px;
    border: 1px solid var(--card-border);
    cursor: pointer; transition: background 0.2s;
  }
  .smm-card:hover { background: rgba(255,255,255,0.07); }
  .smm-ico {
    width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
    background: linear-gradient(150deg, rgba(90,141,255,0.3), rgba(60,200,255,0.14));
    display: flex; align-items: center; justify-content: center;
  }
  .smm-info { flex: 1; min-width: 0; }
  .smm-toprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .smm-title { font-size: 15px; font-weight: 700; }
  .smm-sub { font-size: 12px; color: var(--text3); margin-top: 4px; line-height: 1.45; white-space: nowrap; }
  .smm-badge {
    background: rgba(46,204,113,0.14); color: #2ecc71;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 10px;
    align-self: flex-start;
  }

  /* ── Cabinet menu list ── */
  .cab-menu { padding: 0 18px; }
  .cab-item {
    display: flex; align-items: center; gap: 15px;
    padding: 17px 0; border-bottom: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
  }
  .cab-item:last-child { border-bottom: none; }
  .cab-item .cab-ico { width: 24px; flex-shrink: 0; display: flex; }
  .cab-item .cab-label { flex: 1; font-size: 15px; font-weight: 500; }
  .new-badge {
    background: rgba(124,79,255,0.25); color: #b59bff;
    font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 8px;
  }

  /* ── Status: error ── */
  .status-error { background: rgba(255,80,80,0.14); color: #ff6b6b; }
  .status-work  { background: rgba(85,153,255,0.14); color: #5599ff; }

  /* ══════════ Bottom sheets (modals) ══════════ */
  .sheet-overlay {
    position: fixed; inset: 0; z-index: 420;
    background: rgba(3,4,16,0.62);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: flex-end; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
  }
  .sheet-overlay.open { opacity: 1; pointer-events: auto; }
  .sheet {
    width: 390px; max-width: 100%;
    background: linear-gradient(180deg, #0e1230, #090c22);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 28px 28px 0 0;
    padding: 22px 20px calc(26px + env(safe-area-inset-bottom));
    max-height: 92vh; overflow-y: auto; scrollbar-width: none;
    transform: translateY(100%); transition: transform 0.32s cubic-bezier(.2,.8,.25,1);
    box-shadow: 0 -16px 50px rgba(0,0,0,0.5);
  }
  .sheet::-webkit-scrollbar { display: none; }
  .sheet-overlay.open .sheet { transform: translateY(0); }
  .sheet-grip { width: 40px; height: 4px; border-radius: 3px; background: rgba(255,255,255,0.18); margin: 0 auto 16px; }
  .sheet-grip { cursor: ns-resize; touch-action: none; }
  .sheet-head { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 18px; }
  .sheet-title { font-size: 21px; font-weight: 800; }
  .field-label { font-size: 13px; color: var(--text2); margin: 16px 4px 8px; }
  .field-input {
    width: 100%; background: rgba(255,255,255,0.05);
    border: 1px solid var(--card-border); border-radius: 16px;
    padding: 16px; color: #fff; font-size: 15px; font-family: inherit;
    outline: none; transition: border-color 0.2s;
  }
  .field-input::placeholder { color: var(--text3); }
  .field-input:focus { border-color: rgba(124,79,255,0.5); }
  .input-suffix { position: relative; }
  .input-suffix span { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--text2); font-size: 15px; }

  /* checkout product */
  .co-product {
    display: flex; align-items: center; gap: 14px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
    border-radius: 18px; padding: 14px;
  }
  .co-product .svc-ico { width: 46px; height: 46px; }
  .co-product .co-name { font-size: 15px; font-weight: 700; }
  .co-product .co-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .co-product .co-price { margin-left: auto; font-size: 15px; font-weight: 700; }

  /* quantity stepper */
  .qty-row {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255,255,255,0.05); border: 1px solid var(--card-border);
    border-radius: 16px; padding: 6px;
  }
  .qty-btn {
    width: 46px; height: 44px; border-radius: 12px; border: none;
    background: rgba(255,255,255,0.06); color: #fff; font-size: 22px;
    cursor: pointer; font-family: inherit; transition: background 0.15s;
  }
  .qty-btn:active { background: rgba(124,79,255,0.3); }
  .qty-val {
    width: 100%;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    font-family: inherit;
  }
  .qty-val::-webkit-outer-spin-button,
  .qty-val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .qty-val[type=number] { -moz-appearance: textfield; appearance: textfield; }
  .qty-max { font-size: 12px; color: var(--text3); margin: 8px 4px 0; }

  /* pay stat boxes */
  .pay-stats { display: flex; gap: 12px; margin-top: 18px; }
  .pay-box {
    flex: 1; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
    border-radius: 16px; padding: 14px 16px;
  }
  .pay-box .pb-label { font-size: 12px; color: var(--text2); margin-bottom: 6px; }
  .pay-box .pb-val { font-size: 18px; font-weight: 800; }

  /* note row */
  .note-row { display: flex; align-items: center; gap: 12px; margin: 18px 2px; }
  .note-row .note-txt { font-size: 13px; color: var(--text2); line-height: 1.4; }

  /* big pay button */
  .pay-btn {
    width: 100%; border: none; border-radius: 18px; padding: 17px;
    background: linear-gradient(90deg, #8a5cff 0%, #7c4fff 45%, #d96bff 100%);
    color: #fff; font-size: 16px; font-weight: 700; cursor: pointer;
    font-family: inherit; box-shadow: 0 6px 26px rgba(140,80,255,0.45);
    transition: transform 0.15s; margin-top: 6px;
  }
  .pay-btn:active { transform: scale(0.98); }

  /* topup amount chips */
  .amt-chips { display: flex; gap: 10px; }
  .amt-chip {
    flex: 1; padding: 14px 4px; border-radius: 15px;
    background: rgba(255,255,255,0.05); border: 1px solid var(--card-border);
    color: var(--text); font-size: 14px; font-weight: 700; cursor: pointer;
    font-family: inherit; transition: all 0.18s; text-align: center;
  }
  .amt-chip.active { background: var(--accent); border-color: transparent; box-shadow: 0 4px 16px rgba(124,79,255,0.4); }

  /* payment methods */
  .pay-method {
    display: flex; align-items: center; gap: 14px; margin-top: 11px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--card-border);
    border-radius: 18px; padding: 15px; cursor: pointer; transition: all 0.2s;
  }
  .pay-method.selected { border-color: rgba(90,141,255,0.7); background: rgba(90,141,255,0.08); }
  .pay-method .pm-ico {
    width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
    background: rgba(90,141,255,0.14); display: flex; align-items: center; justify-content: center;
  }
  .pay-method .pm-name { font-size: 14px; font-weight: 700; }
  .pay-method .pm-sub { font-size: 12px; color: var(--text3); margin-top: 2px; }
  .pm-check {
    margin-left: auto; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
    background: #2f7fff; display: none; align-items: center; justify-content: center;
  }
  .pay-method.selected .pm-check { display: flex; }
  .instant-note { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 14px; font-size: 13px; color: var(--text2); }

  /* ══════════ Interactions (menus/filters/toasts) ══════════ */
  .search-input { flex:1; background:transparent; border:none; outline:none; color:#fff; font-size:14px; font-family:inherit; }
  .search-input::placeholder { color: var(--text3); }
  .empty-state { text-align:center; color:var(--text3); font-size:14px; padding:46px 20px; }

  .tx-row { display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.05); }
  .tx-row:last-child { border-bottom:none; }
  .tx-ico { width:40px; height:40px; border-radius:12px; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
  .tx-info { flex:1; min-width:0; }
  .tx-name { font-size:14px; font-weight:600; }
  .tx-date { font-size:11px; color:var(--text3); margin-top:2px; }
  .tx-amt { font-size:14px; font-weight:700; }
  .amt-pos { color:#2ecc71; }

  .setting-row { display:flex; align-items:center; gap:12px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px; }
  .setting-row:last-child { border-bottom:none; }
  .toggle { width:46px; height:27px; border-radius:14px; background:rgba(255,255,255,0.13); position:relative; cursor:pointer; transition:background .22s; flex-shrink:0; }
  .toggle::after { content:''; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .22s; box-shadow:0 1px 3px rgba(0,0,0,0.3); }
  .toggle.on { background:var(--accent); }
  .toggle.on::after { transform:translateX(19px); }

  .code-box { display:flex; align-items:center; gap:10px; background:rgba(124,79,255,0.1); border:1px dashed rgba(124,79,255,0.5); border-radius:16px; padding:14px 16px; margin-bottom:14px; }
  .code-val { flex:1; font-size:18px; font-weight:800; letter-spacing:1.5px; color:#b59bff; }
  .code-copy { background:var(--accent); border:none; color:#fff; border-radius:10px; padding:9px 15px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; }
  .code-copy:active { transform:scale(0.96); }

  .contact-btn { display:flex; align-items:center; gap:13px; width:100%; background:rgba(255,255,255,0.05); border:1px solid var(--card-border); border-radius:16px; padding:14px 15px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; margin-bottom:11px; transition:background .2s; }
  .contact-btn:hover { background:rgba(255,255,255,0.08); }
  .contact-ico { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .contact-btn .ca { margin-left:auto; }

  .link-row { display:flex; align-items:center; gap:12px; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.06); cursor:pointer; }
  .link-row:last-child { border-bottom:none; }
  .link-row .ll { flex:1; font-size:14px; font-weight:500; }

  .info-note { font-size:13px; color:var(--text2); line-height:1.5; margin:14px 2px; }
  .detail-row { display:flex; justify-content:space-between; align-items:center; padding:14px 0; border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px; }
  .detail-row:last-child { border-bottom:none; }
  .detail-row .dl { color:var(--text2); }
  .detail-row .dv { font-weight:700; }

  .sheet-actions { display:flex; gap:11px; margin-top:18px; }
  .btn-secondary { flex:1; background:rgba(255,255,255,0.06); border:1px solid var(--card-border); color:#fff; border-radius:16px; padding:15px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:background .2s; }
  .btn-secondary:hover { background:rgba(255,255,255,0.1); }
  .btn-primary { flex:1; background:linear-gradient(90deg,#8a5cff,#7c4fff 45%,#d96bff); border:none; color:#fff; border-radius:16px; padding:15px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
  .btn-primary:active, .btn-secondary:active { transform:scale(0.98); }

  .toast {
    position:fixed; left:50%; bottom:104px; transform:translateX(-50%) translateY(18px);
    background:rgba(22,26,58,0.97); border:1px solid rgba(124,79,255,0.45);
    color:#fff; font-size:14px; font-weight:600; padding:13px 20px; border-radius:14px;
    box-shadow:0 12px 34px rgba(0,0,0,0.55); opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s; z-index:320; max-width:320px; text-align:center;
  }
  .toast.show { opacity:1; transform:translateX(-50%) translateY(0); }