:root {
      --bg: #F4F5F7;
      --card: #FFFFFF;
      --card-dark: #1A1D24;
      --text-primary: #1A1D24;
      --text-muted: #A0A7B3;
      --text-dim: #4E5563;
      --nav-inactive: #C0C6CF;
      --section-label: #A0A7B3;
      --resource-bg: #FFFFFF;
      --avatar-bg: #E8EAEF;
      --avatar-icon: #9098A3;
      --coin-icon-bg: #FFF5E0;
      --iron-bg: #ECEDF0;
      --iron-icon: #6B7180;
      --wood-bg: #E8F5E0;
      --wood-icon: #4A9B3A;
      --gold-bg: #FFF8DC;
      --gold-icon: #D4A017;
      --coal-bg: #E8E8EB;
      --coal-icon: #3E3E46;
      --bonus-chip-bg: #EEF7E8;
      --bonus-chip-text: #2F6B1F;
      --bonus-accent: #6FA63A;
      --bonus-accent-strong: #4C7D22;
      --bonus-button-shadow: rgba(111, 166, 58, 0.28);
      --crystal-card: #6C5CE7;
      --crystal-icon-bg: rgba(255, 255, 255, 0.15);
      --crystal-icon: #FFFFFF;
      --crystal-name: rgba(255, 255, 255, 0.6);
      --crystal-value: #FFFFFF;
      --tg-safe-top: 0px;
      --tg-safe-bottom: 0px;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        --bg: #0F1015;
        --card: #1C1F28;
        --card-dark: #0A0B0F;
        --text-primary: #E8EAEF;
        --text-muted: #5A6070;
        --text-dim: #3E4350;
        --nav-inactive: #3A3F4D;
        --section-label: #5A6070;
        --resource-bg: #1C1F28;
        --avatar-bg: #252830;
        --avatar-icon: #5A6070;
        --coin-icon-bg: #4B3510;
        --iron-bg: #353A47;
        --iron-icon: #A2ABBD;
        --wood-bg: #23361B;
        --wood-icon: #79C96A;
        --gold-bg: #4A360D;
        --gold-icon: #F0B52F;
        --coal-bg: #32343C;
        --coal-icon: #A3A7B4;
        --bonus-chip-bg: rgba(111, 166, 58, 0.18);
        --bonus-chip-text: #B8E38F;
        --bonus-accent: #89C24D;
        --bonus-accent-strong: #A7DB73;
        --bonus-button-shadow: rgba(137, 194, 77, 0.22);
        --crystal-card: #3D3480;
        --crystal-icon-bg: rgba(255, 255, 255, 0.15);
        --crystal-icon: #FFFFFF;
        --crystal-name: rgba(255, 255, 255, 0.55);
        --crystal-value: #FFFFFF;
      }
    }

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

    body {
      background: var(--bg);
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
      min-height: 100dvh;
      color: var(--text-primary);
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      transition: background 0.2s, color 0.2s;
    }

    .auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background:
        radial-gradient(circle at top, color-mix(in srgb, var(--bonus-accent) 18%, transparent), transparent 42%),
        color-mix(in srgb, var(--bg) 94%, rgba(0, 0, 0, 0.18));
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
    }

    .auth-overlay[hidden] {
      display: none;
    }

    .info-modal {
      position: fixed;
      inset: 0;
      z-index: 130;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(10, 12, 18, 0.34);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .info-modal[hidden] {
      display: none;
    }

    .info-modal-card {
      width: min(100%, 360px);
      padding: 24px 20px 20px;
      border-radius: 24px;
      background: color-mix(in srgb, var(--card) 94%, transparent);
      border: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
      box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
      text-align: center;
    }

    .info-modal-title {
      font-size: 22px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text-primary);
    }

    .info-modal-text {
      margin-top: 10px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--text-muted);
    }

    .info-modal-btn {
      width: 100%;
      margin-top: 18px;
      padding: 14px 16px;
      border: none;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--bonus-accent), var(--bonus-accent-strong));
      color: #FFFFFF;
      font-size: 14px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 10px 20px var(--bonus-button-shadow);
    }

    .auth-overlay-card {
      width: min(100%, 360px);
      padding: 26px 22px;
      border-radius: 24px;
      background: color-mix(in srgb, var(--card) 92%, transparent);
      border: 1px solid color-mix(in srgb, var(--text-muted) 14%, transparent);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
      text-align: center;
    }

    .auth-overlay-icon {
      width: 56px;
      height: 56px;
      margin: 0 auto 16px;
      border-radius: 18px;
      background: #FFF5E0;
      color: #D89008;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-overlay-icon svg {
      width: 24px;
      height: 24px;
    }

    .auth-overlay-title {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text-primary);
      margin-bottom: 8px;
    }

    .auth-overlay-text {
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-muted);
    }

    @media (prefers-color-scheme: dark) {
      .auth-overlay-icon {
        background: #2C2108;
        color: #F0A818;
      }
    }

    .test-mode-badge {
      position: fixed;
      top: 14px;
      right: 14px;
      z-index: 60;
      width: 38px;
      height: 38px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--card) 82%, transparent);
      border: 1px solid color-mix(in srgb, var(--text-muted) 18%, transparent);
      color: var(--text-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
      pointer-events: none;
    }

    .test-mode-badge[hidden] {
      display: none;
    }

    .test-mode-badge svg {
      width: 18px;
      height: 18px;
    }

    .screen {
      width: 100%;
      max-width: 440px;
      margin: 0 auto;
      padding: 0 20px calc(104px + var(--tg-safe-bottom));
      display: flex;
      flex-direction: column;
      min-height: 100dvh;
    }

    .status-bar {
      height: max(2px, var(--tg-safe-top));
      flex-shrink: 0;
    }

    /* Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 4px 0 22px;
    }

    .header-title {
      font-size: 23px;
      font-weight: 800;
      color: var(--text-primary);
      letter-spacing: -0.03em;
    }

    .header-avatar {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: var(--avatar-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .header-avatar svg {
      width: 20px;
      height: 20px;
      color: var(--avatar-icon);
    }

    /* Main currencies */
    .main-currencies {
      display: flex;
      gap: 12px;
      margin-bottom: 28px;
    }

    .main-card {
      flex: 1;
      border-radius: 20px;
      padding: 24px 20px;
      cursor: pointer;
      transition: transform 0.15s;
    }

    .main-card:active { transform: scale(0.97); }

    .main-card-icon {
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 16px;
    }

    .main-card-icon svg { width: 20px; height: 20px; }

    .main-card-name {
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
    }

    .main-card-value {
      font-size: 27px;
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1;
    }

    /* Coins */
    .main-card--coins { background: var(--card); }

    .main-card--coins .main-card-icon {
      background: var(--coin-icon-bg);
    }

    .main-card--coins .main-card-icon svg { color: #F0A818; }
    .main-card--coins .main-card-name { color: var(--text-muted); }
    .main-card--coins .main-card-value { color: var(--text-primary); }

    /* Crystals */
    .main-card--crystals { background: var(--crystal-card); }

    .main-card--crystals .main-card-icon {
      background: var(--crystal-icon-bg);
    }

    .main-card--crystals .main-card-icon svg { color: var(--crystal-icon); }
    .main-card--crystals .main-card-name { color: var(--crystal-name); }
    .main-card--crystals .main-card-value { color: var(--crystal-value); }

    .main-card-value-row {
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }

    .main-card--inactive {
      opacity: 0.95;
    }

    .main-card-coin-value {
      display: flex;
      align-items: center;
      gap: 3px;
      padding-bottom: 3px;
      font-size: 12px;
      font-weight: 600;
    }
    .main-card-coin-value svg {
      width: 13px; height: 13px;
      flex-shrink: 0;
    }
    .main-card--crystals .main-card-coin-value {
      color: rgba(255, 255, 255, 0.55);
    }
    .main-card--crystals .main-card-coin-value svg { color: #FFD97A; }

    /* Action buttons */
    .action-buttons {
      display: flex;
      gap: 12px;
      margin-bottom: 30px;
    }

    .action-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 0;
      border-radius: 16px;
      border: none;
      cursor: pointer;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      transition: opacity 0.15s;
    }

    .action-btn:active { opacity: 0.75; }

    .action-btn--disabled,
    .action-btn:disabled {
      opacity: 0.45;
      cursor: not-allowed;
      pointer-events: none;
    }

    .action-btn--send {
      background: var(--text-primary);
      color: var(--bg);
    }

    .action-btn--receive {
      background: var(--card);
      color: var(--text-primary);
      border: 2px solid var(--text-primary);
    }

    @media (prefers-color-scheme: dark) {
      .action-btn--send {
        background: #E8EAEF;
        color: #0F1015;
      }
      .action-btn--receive {
        background: transparent;
        color: var(--text-primary);
        border: 2px solid #3A3F4D;
      }
    }

    /* ── Bottom Sheet ───────────────────────────────── */
    .sheet-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.45);
      opacity: 0; pointer-events: none;
      transition: opacity 0.28s ease;
      z-index: 100;
    }
    .sheet-overlay.active { opacity: 1; pointer-events: all; }

    .notice-banner {
      margin-bottom: 16px;
      padding: 14px 16px;
      border-radius: 16px;
      background: var(--card);
      color: var(--text-dim);
      font-size: 13px;
      line-height: 1.45;
    }

    .notice-banner--error {
      background: #FEE2E2;
      color: #991B1B;
    }

    .notice-banner--success {
      background: #DCFCE7;
      color: #166534;
    }

    .notice-banner[hidden] {
      display: none;
    }

    .bottom-sheet {
      position: fixed; left: 0; right: 0; bottom: 0;
      background: var(--card);
      border-radius: 24px 24px 0 0;
      padding: 12px 20px 36px;
      transform: translateY(110%);
      transition: transform 0.32s cubic-bezier(.4,0,.2,1);
      z-index: 101;
      max-height: 92vh;
      overflow-y: auto;
    }
    .bottom-sheet.active { transform: translateY(0); }

    .bottom-sheet--full {
      top: 0;
      max-height: 100vh;
      border-radius: 0;
      padding-top: max(20px, env(safe-area-inset-top, 20px));
    }

    .sheet-handle {
      width: 36px; height: 4px;
      background: var(--text-dim);
      border-radius: 2px;
      margin: 0 auto 20px;
      opacity: 0.3;
    }

    .sheet-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }
    .sheet-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--text-primary);
    }
    .sheet-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: var(--avatar-bg);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted);
    }
    .sheet-close svg { display: block; }

    /* Field label */
    .field-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-muted);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    /* Custom select */
    .custom-select {
      position: relative;
      margin-bottom: 20px;
    }
    .custom-select-trigger {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 16px;
      background: var(--bg);
      border-radius: 14px;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: border-color 0.15s;
      user-select: none;
    }
    .custom-select-trigger.open { border-color: var(--text-primary); }
    .custom-select-trigger .select-arrow {
      margin-left: auto;
      color: var(--text-muted);
      transition: transform 0.2s;
    }
    .custom-select-trigger.open .select-arrow { transform: rotate(180deg); }

    .select-icon {
      width: 30px; height: 30px;
      border-radius: 8px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .select-label {
      font-size: 15px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .custom-select-options {
      position: absolute; top: calc(100% + 6px);
      left: 0; right: 0;
      background: var(--card);
      border-radius: 14px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.14);
      overflow-y: auto;
      z-index: 10;
      display: none;
    }
    .custom-select-options.open { display: block; }
    .select-option {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 16px;
      cursor: pointer;
      transition: background 0.12s;
    }
    .select-option:hover { background: var(--bg); }
    .select-option.selected { background: var(--bg); }
    .select-option-label {
      font-size: 15px;
      font-weight: 500;
      color: var(--text-primary);
    }

    /* Resource balance */
    .resource-balance-row {
      font-size: 13px;
      color: var(--text-muted);
      margin-top: -12px;
      margin-bottom: 20px;
      padding-left: 2px;
    }
    .resource-balance-row strong {
      color: var(--text-primary);
      font-weight: 600;
    }

    /* Amount row */
    .amount-row {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    .amount-input {
      flex: 1;
      padding: 14px 16px;
      background: var(--bg);
      border: 1.5px solid transparent;
      border-radius: 14px;
      font-size: 22px;
      font-weight: 700;
      font-family: inherit;
      color: var(--text-primary);
      outline: none;
      transition: border-color 0.15s;
    }
    .amount-input:focus { border-color: var(--text-primary); }
    .amount-input::placeholder { color: var(--text-muted); font-size: 18px; font-weight: 500; }
    .amount-input::-webkit-inner-spin-button,
    .amount-input::-webkit-outer-spin-button { -webkit-appearance: none; }
    .max-btn {
      padding: 14px 18px;
      border-radius: 14px;
      background: var(--bg);
      border: 1.5px solid var(--text-dim);
      font-size: 13px;
      font-weight: 700;
      font-family: inherit;
      color: var(--text-primary);
      cursor: pointer;
      white-space: nowrap;
      transition: opacity 0.15s;
    }
    .max-btn:active { opacity: 0.7; }

    /* Code input row */
    .code-field-row {
      display: flex;
      gap: 10px;
      margin-bottom: 8px;
    }
    .code-input {
      flex: 1;
      min-width: 0;
      box-sizing: border-box;
      padding: 16px;
      background: var(--bg);
      border: 1.5px solid transparent;
      border-radius: 14px;
      font-size: 22px;
      font-weight: 700;
      font-family: inherit;
      letter-spacing: 0.12em;
      color: var(--text-primary);
      text-align: center;
      outline: none;
      transition: border-color 0.2s;
    }
    .code-input:focus { border-color: var(--text-primary); }
    .code-input::placeholder { color: var(--text-muted); font-weight: 500; letter-spacing: 0.06em; font-size: 18px; }
    .code-input.valid   { border-color: #22C55E !important; }
    .code-input.invalid { border-color: #EF4444 !important; }

    .paste-btn {
      width: 54px;
      flex-shrink: 0;
      border-radius: 14px;
      background: var(--bg);
      border: 1.5px solid transparent;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      transition: opacity 0.15s;
    }
    .paste-btn:active { opacity: 0.7; }

    /* Validation message */
    .validation-msg {
      font-size: 13px;
      font-weight: 600;
      min-height: 20px;
      margin-bottom: 24px;
      padding-left: 2px;
    }
    .validation-msg.found    { color: #22C55E; }
    .validation-msg.notfound { color: #EF4444; }

    /* Sheet submit btn */
    .sheet-submit {
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      border: none;
      background: var(--text-primary);
      color: var(--bg);
      font-size: 16px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .sheet-submit:disabled { opacity: 0.3; cursor: not-allowed; }
    .sheet-submit:not(:disabled):active { opacity: 0.8; }
    @media (prefers-color-scheme: dark) {
      .sheet-submit { background: #E8EAEF; color: #0F1015; }
    }

    /* Receive sheet */
    .receive-hint {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.5;
      margin-bottom: 28px;
    }
    .receive-code-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 20px;
      background: var(--bg);
      border-radius: 16px;
      margin-bottom: 12px;
    }
    .receive-code {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.15em;
      color: var(--text-primary);
      font-family: inherit;
    }
    .copy-btn {
      width: 38px; height: 38px;
      border-radius: 10px;
      background: var(--card);
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-muted);
      flex-shrink: 0;
      transition: background 0.15s;
    }
    .copy-btn:active { background: var(--avatar-bg); }
    .copied-toast {
      font-size: 12px;
      color: var(--text-muted);
      text-align: center;
      height: 18px;
      margin-bottom: 24px;
      transition: opacity 0.2s;
    }
    .regen-btn {
      width: 100%;
      padding: 16px;
      border-radius: 16px;
      border: 1.5px solid var(--text-dim);
      background: transparent;
      color: var(--text-primary);
      font-size: 15px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .regen-btn:active { opacity: 0.7; }

    /* Confirm modal */
    .confirm-overlay {
      position: fixed; inset: 0;
      background: rgba(0,0,0,0.5);
      display: flex; align-items: center; justify-content: center;
      padding: 24px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s;
      z-index: 200;
    }
    .confirm-overlay.active { opacity: 1; pointer-events: all; }
    .confirm-box {
      background: var(--card);
      border-radius: 20px;
      padding: 24px;
      width: 100%;
      max-width: 320px;
      transform: scale(0.92);
      transition: transform 0.22s cubic-bezier(.4,0,.2,1);
    }
    .confirm-overlay.active .confirm-box { transform: scale(1); }
    .confirm-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 10px;
    }
    .confirm-text {
      font-size: 14px;
      color: var(--text-muted);
      line-height: 1.55;
      margin-bottom: 22px;
    }
    .confirm-actions {
      display: flex;
      gap: 10px;
    }
    .confirm-cancel {
      flex: 1;
      padding: 13px;
      border-radius: 12px;
      border: 1.5px solid var(--text-dim);
      background: transparent;
      color: var(--text-primary);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
    }
    .confirm-ok {
      flex: 1;
      padding: 13px;
      border-radius: 12px;
      border: none;
      background: #E53E3E;
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
    }

    /* Section label */
    .section-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--section-label);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 12px;
      padding-left: 4px;
    }

    /* Resources */
    .resources {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .resource-row {
      background: var(--resource-bg);
      border-radius: 14px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: transform 0.15s;
    }

    .resource-row:active { transform: scale(0.98); }

    .resource-row--disabled {
      cursor: default;
      opacity: 0.82;
    }

    .resource-row--disabled:active {
      transform: none;
    }

    .resource-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .resource-icon svg { width: 20px; height: 20px; }

    .resource-name {
      flex: 1;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
    }

    .resource-right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 3px;
    }

    .resource-value {
      font-size: 16px;
      font-weight: 700;
      color: var(--text-primary);
      letter-spacing: -0.02em;
    }

    .resource-coin-value {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }

    .resource-coin-value svg {
      width: 13px;
      height: 13px;
      color: #F0A818;
      flex-shrink: 0;
    }

    /* Resource colors */
    .resource-row--iron .resource-icon { background: var(--iron-bg); }
    .resource-row--iron .resource-icon svg { color: var(--iron-icon); }

    .resource-row--wood .resource-icon { background: var(--wood-bg); }
    .resource-row--wood .resource-icon svg { color: var(--wood-icon); }

    .resource-row--coal .resource-icon { background: var(--coal-bg); }
    .resource-row--coal .resource-icon svg { color: var(--coal-icon); }

    .resource-row--gold .resource-icon { background: var(--gold-bg); }
    .resource-row--gold .resource-icon svg { color: var(--gold-icon); }

    /* Bottom nav */
    .bottom-nav {
      position: fixed;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%);
      width: min(100%, 440px);
      padding: 14px 18px calc(14px + var(--tg-safe-bottom));
      display: flex;
      justify-content: space-around;
      align-items: center;
      background: color-mix(in srgb, var(--bg) 82%, transparent);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      border-top: 1px solid color-mix(in srgb, var(--text-muted) 16%, transparent);
      z-index: 20;
    }

    .nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .nav-item:active { opacity: 0.6; }

    .nav-item--disabled {
      opacity: 0.45;
      cursor: not-allowed;
    }

    .nav-item--disabled:active {
      opacity: 0.45;
    }

    .nav-item svg {
      width: 24px;
      height: 24px;
      color: var(--nav-inactive);
    }

    .nav-item--active svg { color: var(--text-primary); }

    .nav-label {
      font-size: 10px;
      font-weight: 600;
      color: var(--nav-inactive);
    }

    .nav-item--active .nav-label { color: var(--text-primary); }

    .nav-dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--text-primary);
      margin-top: -2px;
    }

    /* ── Pages ───────────────────────────────────────── */
    .page {
      display: none;
      flex: 1;
      padding-bottom: 24px;
    }
    .page.active {
        display: block;
        margin: 10px 10px 0 10px;
    }

    .feature-card {
      margin-top: 8px;
      padding: 18px;
      border-radius: 18px;
      background: var(--card);
    }

    .feature-card-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 6px;
    }

    .feature-card-text {
      font-size: 13px;
      line-height: 1.5;
      color: var(--text-muted);
    }

    .mechanics-card {
      margin-top: 4px;
      padding: 16px;
      border: 1px solid color-mix(in srgb, var(--bonus-accent) 18%, transparent);
      box-shadow: 0 10px 26px color-mix(in srgb, var(--bonus-button-shadow) 22%, transparent);
    }

    .mechanics-card-title {
      margin-bottom: 12px;
    }

    .mechanics-claim-btn {
      width: 100%;
      padding: 13px 14px;
      border: none;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--bonus-accent), var(--bonus-accent-strong));
      color: #fff;
      font-size: 13px;
      font-weight: 800;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 10px 20px var(--bonus-button-shadow);
      transition: transform 0.15s, opacity 0.15s, box-shadow 0.15s;
    }

    .mechanics-claim-btn:active:not(:disabled) {
      transform: translateY(1px);
      opacity: 0.92;
    }

    .mechanics-claim-btn:disabled {
      cursor: not-allowed;
      opacity: 0.5;
      box-shadow: none;
    }

    .mechanics-claim-btn--crystal {
      background: linear-gradient(135deg, #6C5CE7, #4C40AF);
      box-shadow: 0 10px 20px rgba(108, 92, 231, 0.26);
    }

    .mechanics-card-status {
      margin-top: 10px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-muted);
      line-height: 1.45;
    }

    .mechanics-card-status:empty {
      display: none;
    }

    .mechanics-btn-line {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      flex-wrap: wrap;
    }

    .mechanics-btn-main {
      white-space: nowrap;
    }

    .mechanics-btn-assets {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }

    .mechanics-btn-separator {
      font-size: 13px;
      font-weight: 700;
      opacity: 0.88;
    }

    .inline-asset {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      white-space: nowrap;
    }

    .inline-asset-icon {
      display: inline-flex;
      width: 14px;
      height: 14px;
    }

    .inline-asset-icon svg {
      width: 14px;
      height: 14px;
    }

    .inline-asset--coins .inline-asset-icon {
      color: #FFD97A;
    }

    .inline-asset--crystals .inline-asset-icon {
      color: #E7DEFF;
    }

    .leaderboard-card {
      padding: 16px;
    }

    .leaderboard-title {
      margin-bottom: 12px;
    }

    .leaderboard-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .leaderboard-empty {
      padding: 14px;
      border-radius: 14px;
      background: var(--bg);
      color: var(--text-muted);
      font-size: 13px;
      text-align: center;
    }

    .leaderboard-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--bonus-accent) 7%, var(--bg));
    }

    .leaderboard-rank {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #FFF5E0;
      color: #D89008;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      font-weight: 800;
      flex-shrink: 0;
    }

    .leaderboard-user {
      min-width: 0;
      flex: 1;
    }

    .leaderboard-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .leaderboard-balance {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      font-size: 13px;
      font-weight: 700;
    }

    .leaderboard-balance-item {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      color: #D89008;
      white-space: nowrap;
    }

    .leaderboard-balance-item--crystal {
      color: #6C5CE7;
    }

    .leaderboard-balance-icon {
      display: inline-flex;
      width: 14px;
      height: 14px;
    }

    .leaderboard-balance-icon svg {
      width: 14px;
      height: 14px;
    }

    @media (prefers-color-scheme: dark) {
      .leaderboard-rank {
        background: #2C2108;
        color: #F0A818;
      }

      .leaderboard-balance-item {
        color: #F0A818;
      }

      .leaderboard-balance-item--crystal {
        color: #A78BFA;
      }
    }

    @media (max-width: 480px) {
      .screen {
        padding-left: 18px;
        padding-right: 18px;
      }

      .header {
        padding-top: 0;
        padding-bottom: 18px;
      }

      .header-title {
        font-size: 22px;
      }

      /*.main-card {*/
      /*  min-height: 184px;*/
      /*}*/
    }

    @media (pointer: fine) {
      .screen {
        max-width: 400px;
        padding-left: 16px;
        padding-right: 16px;
      }

      .status-bar {
        height: 8px;
      }

      .header {
        padding-top: 2px;
        padding-bottom: 16px;
      }

      .header-title {
        font-size: 19px;
      }

      .main-currencies {
        gap: 10px;
        margin-bottom: 22px;
      }

      .main-card {
        padding: 20px 18px;
      }

      .main-card-name {
        font-size: 11px;
      }

      .main-card-value {
        font-size: 22px;
      }

      .action-btn {
        font-size: 12px;
        padding: 14px 0;
      }

      .section-label {
        font-size: 10px;
      }

      .resource-row {
        padding: 14px 16px;
      }

      .resource-icon {
        width: 38px;
        height: 38px;
      }

      .resource-name {
        font-size: 12px;
      }

      .resource-value {
        font-size: 14px;
      }

      .resource-coin-value {
        font-size: 10px;
      }

      .bottom-nav {
        width: min(100%, 400px);
      }

      .nav-label {
        font-size: 9px;
      }
    }

    /* ── History ─────────────────────────────────────── */
    .tx-filters {
      display: flex;
      gap: 8px;
      margin-bottom: 24px;
    }
    .tx-filter {
      padding: 7px 16px;
      border-radius: 20px;
      font-size: 13px;
      font-weight: 600;
      font-family: inherit;
      border: none;
      cursor: pointer;
      transition: all 0.15s;
    }
    .tx-filter.active {
      background: var(--text-primary);
      color: var(--bg);
    }
    .tx-filter:not(.active) {
      background: var(--card);
      color: var(--text-muted);
    }

    .tx-group { margin-bottom: 24px; }
    .tx-group-label {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 10px;
      padding-left: 4px;
    }

    .tx-list { display: flex; flex-direction: column; gap: 2px; }

    .tx-empty {
      padding: 18px 16px;
      border-radius: 14px;
      background: var(--card);
      color: var(--text-muted);
      font-size: 13px;
      font-weight: 500;
      text-align: center;
    }

    .tx-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 13px 16px;
      background: var(--card);
      border-radius: 14px;
      cursor: pointer;
      transition: transform 0.15s;
    }
    .tx-item:first-child { border-radius: 14px 14px 4px 4px; }
    .tx-item:last-child  { border-radius: 4px 4px 14px 14px; }
    .tx-item:only-child  { border-radius: 14px; }
    .tx-item:active { transform: scale(0.98); }

    .tx-icon {
      width: 38px; height: 38px;
      border-radius: 11px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .tx-icon svg { width: 18px; height: 18px; }

    .tx-icon--in       { background: #DCFCE7; color: #16A34A; }
    .tx-icon--out      { background: #FEE2E2; color: #DC2626; }
    .tx-icon--sell     { background: #DBEAFE; color: #2563EB; }
    .tx-icon--buy      { background: #FEF3C7; color: #D97706; }
    .tx-icon--crystal  { background: #EDE9FB; color: #6C5CE7; }
    .tx-icon--coin     { background: #FFF5E0; color: #F0A818; }

    @media (prefers-color-scheme: dark) {
      .tx-icon--in      { background: #21402B; color: #57E38D; }
      .tx-icon--out     { background: #442020; color: #FF8A8A; }
      .tx-icon--sell    { background: #1B3159; color: #82B8FF; }
      .tx-icon--buy     { background: #4A360D; color: #FFD05C; }
      .tx-icon--crystal { background: #34265F; color: #BA9BFF; }
      .tx-icon--coin    { background: #4B3510; color: #F0B52F; }
    }

    .tx-info { flex: 1; min-width: 0; }
    .tx-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .tx-sub {
      font-size: 12px;
      color: var(--text-muted);
      margin-top: 2px;
    }

    .tx-amount {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
      flex-shrink: 0;
    }
    .tx-amount-main {
      font-size: 15px;
      font-weight: 700;
      letter-spacing: -0.02em;
    }
    .tx-amount-main.positive { color: #16A34A; }
    .tx-amount-main.negative { color: var(--text-primary); }
    @media (prefers-color-scheme: dark) {
      .tx-amount-main.positive { color: #4ADE80; }
    }
    .tx-amount-sub {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 11px;
      font-weight: 600;
      color: var(--text-muted);
    }
    .tx-amount-sub svg { width: 11px; height: 11px; color: #F0A818; }