/* Telegram auth UI kit.
 * The `ui-*` classes are the reusable component layer. The utility aliases
 * below keep the existing auth views small while they migrate to the kit.
 */

:root {
  --ui-bg: var(--tg-theme-bg-color, var(--tg-bg, #ffffff));
  --ui-text: var(--tg-theme-text-color, var(--tg-text, #111111));
  --ui-hint: var(--tg-theme-hint-color, var(--tg-hint, #707579));
  --ui-link: var(--tg-theme-link-color, var(--tg-link, #3390ec));
  --ui-button: var(--tg-theme-button-color, var(--tg-btn, #3390ec));
  --ui-button-text: var(--tg-theme-button-text-color, var(--tg-btn-text, #ffffff));
  --ui-surface: var(--tg-theme-secondary-bg-color, var(--tg-secondary-bg, #f0f0f0));
  --ui-danger: #d93737;
  --ui-border: color-mix(in srgb, var(--ui-text) 22%, transparent);
  --ui-radius-pill: 999px;
  --ui-transition: 160ms ease;
}

@layer reset, components, utilities;

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    min-height: 100%;
    padding: 0;
  }

  body {
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  button,
  input {
    font: inherit;
  }

  button {
    -webkit-tap-highlight-color: transparent;
  }

  #root {
    height: 100%;
    min-height: 100%;
    width: 100%;
  }
}

.app-shell {
  align-items: center;
  display: flex;
  height: var(--app-height, 100dvh);
  justify-content: center;
  max-width: 100%;
  min-height: var(--app-height, 100dvh);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 max(16px, env(safe-area-inset-right), var(--tg-content-safe-right, 0px), var(--tg-safe-right, 0px)) max(16px, env(safe-area-inset-bottom), var(--tg-content-safe-bottom, 0px), var(--tg-safe-bottom, 0px)) max(16px, env(safe-area-inset-left), var(--tg-content-safe-left, 0px), var(--tg-safe-left, 0px));
  width: 100%;
}

.app-shell > * {
  max-width: 100%;
  min-width: 0;
}

@layer components {
  .dashboard {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .dashboard__balance {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding: 20px 16px;
    text-align: center;
  }

  .dashboard__topbar { align-items: center; display: flex; justify-content: space-between; margin-bottom: 8px; min-height: 42px; }
  .dashboard { align-self: flex-start; padding-top: 10px; }
  .dashboard__profile { align-items: center; display: flex; gap: 10px; min-width: 0; }
  .dashboard__profile img,
  .dashboard__profile > span { background: var(--ui-surface); border-radius: 50%; flex: 0 0 auto; height: 34px; object-fit: cover; width: 34px; }
  .dashboard__profile > span { align-items: center; color: var(--ui-hint); display: inline-flex; font-size: 14px; justify-content: center; }
  .dashboard__profile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dashboard__support { align-items: center; background: transparent !important; border: 0; border-radius: 0; color: var(--ui-text) !important; display: flex; height: 36px; justify-content: center; padding: 0; width: 36px; }
  .dashboard__support svg { height: 28px; width: 28px; }
  .dashboard__support:disabled { color: var(--ui-hint); opacity: .55; }

  .dashboard__label,
  .dashboard__balance small,
  .dashboard__hint {
    color: var(--ui-hint);
    font-size: 13px;
  }

  .dashboard__balance strong {
    font-size: clamp(40px, 12vw, 58px);
    letter-spacing: -.06em;
    line-height: 1;
    margin: 10px 0 5px;
  }

  .dashboard__balance strong > svg { height: 32px; width: 32px; }

  .star-icon { display: inline-block; object-fit: contain; vertical-align: -.08em; }
  .star-icon--balance { height: .72em; width: .72em; }
  .star-icon--transaction { height: 1em; width: 1em; }

  .dashboard__actions {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, 1fr);
  }

  .dashboard__actions button {
    align-items: center;
    background: var(--ui-surface);
    border: 0;
    border-radius: 14px;
    color: var(--ui-text);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    justify-content: center;
    line-height: 1.2;
    min-height: 48px;
  }

  .action-icon { flex: 0 0 auto; height: 18px; width: 18px; }

  .dashboard.dashboard .dashboard__actions > button:first-child,
  .dashboard.dashboard .dashboard__actions > button:nth-child(2) { background: var(--tg-theme-button-color, var(--ui-button)) !important; color: var(--tg-theme-button-text-color, var(--ui-button-text)) !important; }
  .dashboard.dashboard .dashboard__actions > button:nth-child(3):not(:disabled) { background: #e6b325 !important; color: #241b05 !important; }
  .dashboard.dashboard .dashboard__actions > button:nth-child(4):not(:disabled) { background: #ef8b2c !important; color: #ffffff !important; }
  .dashboard.dashboard .dashboard__actions > button:disabled { background: color-mix(in srgb, var(--tg-theme-text-color, var(--ui-text)) 16%, var(--tg-theme-bg-color, var(--ui-bg))) !important; color: color-mix(in srgb, var(--tg-theme-text-color, var(--ui-text)) 78%, var(--tg-theme-bg-color, var(--ui-bg))) !important; cursor: not-allowed; opacity: 1; }

  .dashboard__section h2 { color: var(--ui-hint); font-size: 13px; font-weight: 600; margin: 0 0 8px; }
  .dashboard__list { border: 1px solid var(--ui-border); border-radius: 14px; height: 296px; overflow: hidden; }
  .dashboard__transaction { align-items: center; border-bottom: 1px solid var(--ui-border); display: flex; gap: 0; justify-content: space-between; min-height: 52px; padding: 8px 14px; text-align: left; }
  .dashboard__transaction:last-child { border-bottom: 0; }
  .dashboard.dashboard .dashboard__transaction > span { align-items: center !important; background: color-mix(in srgb, var(--tg-theme-text-color, var(--ui-text)) 9%, transparent) !important; border-radius: 50%; color: var(--tg-theme-hint-color, var(--ui-hint)) !important; display: inline-flex !important; flex: 0 0 auto; font-size: 20px; height: 30px; justify-content: center !important; width: 30px; }
  .dashboard.dashboard .dashboard__transaction > span.is-positive { background: #31a35722 !important; color: #29934e !important; }
  .dashboard.dashboard .dashboard__transaction > span.is-negative { background: #d84b4b22 !important; color: #d84b4b !important; }
  .dashboard__transaction > strong { font-size: 14px; white-space: nowrap; }
  .dashboard.dashboard .dashboard__transaction-copy { align-items: flex-start !important; display: flex !important; flex: 1; flex-direction: column; gap: 2px; margin: 0 10px; text-align: left !important; }
  .dashboard__transaction-copy strong { font-size: 14px; }
  .dashboard__transaction-copy small { color: var(--ui-hint); font-size: 11px; }
  .dashboard__empty { color: var(--ui-hint); font-size: 13px; padding: 22px 14px; text-align: center; }
  .dashboard__loading { align-items: center; display: flex; justify-content: center; min-height: 84px; }
  .dashboard__more { border-top: 1px solid var(--ui-border); color: var(--ui-hint); font-size: 12px; margin: 0; padding: 10px 14px; text-align: center; }
  .dashboard__hint { margin: -10px 0 0; text-align: center; }
  .withdraw-view h1 { font-size: 22px; letter-spacing: -.03em; margin: 0 0 10px; }
  .withdraw-view p { color: var(--ui-hint); font-size: 14px; line-height: 1.45; margin: 0; }
  .tgs-animation { height: 132px; margin: 0 auto 14px; width: 132px; }
  .tgs-animation svg { display: block; height: 100%; width: 100%; }
  .withdraw-view__fallback { display: flex; gap: 8px; margin-top: 24px; }
  .withdraw-view__fallback button { background: color-mix(in srgb, var(--ui-text) 8%, transparent); border: 0; border-radius: 12px; color: var(--ui-text); cursor: pointer; flex: 1; min-height: 44px; }
  .withdraw-view__fallback button:last-child { background: var(--ui-button); color: var(--ui-button-text); }
  .dashboard__modal-backdrop { align-items: center; background: #0006; display: flex; inset: 0; justify-content: center; padding: 16px; position: fixed; z-index: 50; }
  .dashboard__modal { background: var(--ui-bg); border-radius: 18px; max-width: 340px; padding: 22px; width: 100%; }
  .dashboard__modal h2 { font-size: 18px; margin: 0 0 8px; }
  .dashboard__modal p { color: var(--ui-hint); font-size: 14px; line-height: 1.45; margin: 0; }
  .dashboard__modal-actions { display: flex; gap: 8px; margin-top: 20px; }
  .dashboard__modal-actions button { background: color-mix(in srgb, var(--ui-text) 8%, transparent); border: 0; border-radius: 11px; color: var(--ui-text); cursor: pointer; flex: 1; min-height: 42px; }
  .dashboard__modal-actions button:last-child { background: var(--ui-button); color: var(--ui-button-text); }

  .ui-shell {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: var(--app-height, 100dvh);
    padding: 16px;
  }

  .ui-stack {
    display: flex;
    flex-direction: column;
  }

  .ui-button {
    align-items: center;
    background: var(--ui-button);
    border: 0;
    border-radius: var(--ui-radius-pill);
    color: var(--ui-button-text);
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    min-height: 44px;
    padding: 12px 24px;
    transition: filter var(--ui-transition), opacity var(--ui-transition), transform var(--ui-transition);
  }

  .ui-button:hover:not(:disabled) {
    filter: brightness(.96);
  }

  .ui-button:active:not(:disabled) {
    transform: scale(.985);
  }

  .ui-button:disabled {
    cursor: not-allowed;
    opacity: .52;
  }

  .ui-button--text {
    background: transparent;
    color: var(--ui-link);
    min-height: auto;
    padding: 4px 8px;
  }

  .ui-field {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text);
    font-size: 13px;
    min-height: 32px;
    outline: 0;
    padding: 5px 8px;
    text-align: center;
    transition: border-color var(--ui-transition);
    width: 100%;
  }

  .ui-field:focus {
    border-bottom-color: var(--ui-link);
  }

  .ui-field:disabled {
    opacity: .55;
  }

  .ui-error {
    color: var(--ui-danger);
    font-size: 11px;
    line-height: 1.35;
    text-align: center;
  }

  .ui-muted {
    color: var(--ui-hint);
  }

  .ui-spinner {
    animation: ui-spin .8s linear infinite;
    flex: 0 0 auto;
    height: 16px;
    width: 16px;
  }

  @keyframes ui-spin {
    to { transform: rotate(360deg); }
  }
}

@layer utilities {
  .fixed { position: fixed; }
  .inset-0 { inset: 0; }
  .z-50 { z-index: 50; }
  .relative { position: relative; }
  .block { display: block; }
  .hidden { display: none; }
  .flex { display: flex; }
  .w-full { width: 100%; }
  .h-24 { height: 6rem; }
  .h-4, .w-4 { height: 1rem; width: 1rem; }
  .min-h-screen { min-height: var(--app-height, 100dvh); }
  .max-w-xs { max-width: 20rem; }
  [class~="max-w-[280px]"] { max-width: 280px; }
  [class~="max-w-[320px]"] { max-width: 320px; }
  [class~="max-w-[420px]"] { max-width: 420px; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .mt-3 { margin-top: .75rem; }
  .mt-6 { margin-top: 1.5rem; }
  .mb-2 { margin-bottom: .5rem; }
  .mb-3 { margin-bottom: .75rem; }
  .mb-4 { margin-bottom: 1rem; }
  .mb-6 { margin-bottom: 1.5rem; }
  .p-4 { padding: 1rem; }
  .px-2 { padding-left: .5rem; padding-right: .5rem; }
  .px-4 { padding-left: 1rem; padding-right: 1rem; }
  .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
  .py-2 { padding-bottom: .5rem; padding-top: .5rem; }
  .py-3 { padding-bottom: .75rem; padding-top: .75rem; }
  [class~="py-[5px]"] { padding-bottom: 5px; padding-top: 5px; }
  [class~="py-[8px]"] { padding-bottom: 8px; padding-top: 8px; }
  .text-center { text-align: center; }
  .text-xs { font-size: 12px; }
  .text-sm { font-size: 14px; }
  [class~="text-[10px]"] { font-size: 10px; }
  [class~="text-[11px]"] { font-size: 11px; }
  [class~="text-[13px]"] { font-size: 13px; }
  .font-normal { font-weight: 400; }
  .font-medium { font-weight: 500; }
  .font-bold { font-weight: 700; }
  .leading-snug { line-height: 1.375; }
  .rounded-full { border-radius: var(--ui-radius-pill); }
  .items-center { align-items: center; }
  .justify-center { justify-content: center; }
  .flex-col { flex-direction: column; }
  .gap-2 { gap: .5rem; }
  .gap-3 { gap: .75rem; }
  .opacity-50 { opacity: .5; }
  .object-contain { object-fit: contain; }
  .select-none { user-select: none; }
  .pointer-events-none { pointer-events: none; }
  .transition-colors { transition: background-color var(--ui-transition), border-color var(--ui-transition), color var(--ui-transition), opacity var(--ui-transition); }
  .hover\:underline:hover { text-decoration: underline; }
  .disabled\:opacity-50:disabled { opacity: .5; }
  .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
  .bg-transparent { background-color: transparent; }
  .border-b { border-bottom-style: solid; border-bottom-width: 1px; }
  .border-gray-400 { border-bottom-color: var(--ui-border); }
  .focus\:outline-none:focus { outline: 0; }
  .focus\:border-blue-500:focus { border-bottom-color: var(--ui-link); }
  .animate-spin { animation: ui-spin .8s linear infinite; }
}

@media (min-width: 640px) {
  .sm\:p-6 { padding: 1.5rem; }
  .sm\:mt-8 { margin-top: 2rem; }
  .sm\:mb-6 { margin-bottom: 1.5rem; }
  .sm\:mb-8 { margin-bottom: 2rem; }
  [class~="sm:max-w-[300px]"] { max-width: 300px; }
  [class~="sm:max-w-[380px]"] { max-width: 380px; }
  .sm\:h-28 { height: 7rem; }
  [class~="sm:text-[11px]"] { font-size: 11px; }
  [class~="sm:text-[13px]"] { font-size: 13px; }
  [class~="sm:text-[15px]"] { font-size: 15px; }
  .sm\:px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (min-width: 768px) {
  .md\:p-8 { padding: 2rem; }
  .md\:mt-10 { margin-top: 2.5rem; }
  .md\:mb-8 { margin-bottom: 2rem; }
  .md\:mb-10 { margin-bottom: 2.5rem; }
  [class~="md:max-w-[420px]"] { max-width: 420px; }
  .md\:h-32 { height: 8rem; }
  .md\:text-base { font-size: 16px; }
  .md\:text-sm { font-size: 14px; }
}