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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--tg-theme-bg-color, #f5f5f5);
    color: var(--tg-theme-text-color, #212121);
    padding: 16px;
    min-height: 100vh;
}

.container {
    max-width: 420px;
    margin: 0 auto;
}

h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--tg-theme-text-color, #212121);
}

.greeting {
    font-size: 14px;
    color: var(--tg-theme-hint-color, #888);
    margin-bottom: 16px;
}

.card {
    background: var(--tg-theme-secondary-bg-color, #fff);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ── Wallet info ─────────────────────────────────────────── */

.wallet-info {
    font-size: 13px;
    color: var(--tg-theme-hint-color, #888);
    margin-bottom: 16px;
    word-break: break-all;
    padding: 10px 12px;
    background: var(--tg-theme-bg-color, #f5f5f5);
    border-radius: 8px;
}

.wallet-ok {
    color: #2e7d32;
    background: #e8f5e9;
}

/* ── Form fields ─────────────────────────────────────────── */

.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tg-theme-hint-color, #666);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

input {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--tg-theme-hint-color, #ddd);
    border-radius: 10px;
    font-size: 16px;
    color: var(--tg-theme-text-color, #212121);
    background: var(--tg-theme-bg-color, #fff);
    transition: border-color 0.2s;
    outline: none;
}

input:focus {
    border-color: var(--tg-theme-button-color, #d32f2f);
}

input:disabled {
    opacity: 0.5;
}

button {
    width: 100%;
    padding: 14px;
    margin-top: 4px;
    background: var(--tg-theme-button-color, #d32f2f);
    color: var(--tg-theme-button-text-color, #fff);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.2s;
    letter-spacing: 0.5px;
}

button:active {
    opacity: 0.85;
}

button:disabled {
    background: var(--tg-theme-hint-color, #bbb);
    cursor: not-allowed;
    opacity: 0.6;
}

/* ── Status ──────────────────────────────────────────────── */

.status {
    margin-top: 14px;
    font-size: 14px;
    color: var(--tg-theme-hint-color, #555);
    word-break: break-all;
    line-height: 1.4;
}

.status.ok  { color: #2e7d32; font-weight: 600; }
.status.err { color: #c62828; font-weight: 600; }

/* ── Wallet connect screen ───────────────────────────────── */

.wallet-connect {
    text-align: center;
    padding: 10px 0;
}

.wallet-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

.wallet-msg {
    font-size: 16px;
    font-weight: 600;
    color: var(--tg-theme-text-color, #212121);
    margin-bottom: 20px;
}

.wallet-btn {
    display: block;
    width: 100%;
    padding: 14px;
    margin-bottom: 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s;
    color: #fff;
}

.wallet-btn:active {
    opacity: 0.8;
}

.wallet-btn.tronlink {
    background: #2b5cff;
}

.wallet-btn.safepal {
    background: #4a45dc;
}

.wallet-btn.trustwallet {
    background: #3375bb;
}

.wallet-hint {
    font-size: 13px;
    color: var(--tg-theme-hint-color, #999);
    margin: 16px 0 10px;
}

.copy-btn {
    background: var(--tg-theme-bg-color, #f0f0f0);
    color: var(--tg-theme-text-color, #333);
    font-size: 14px;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--tg-theme-hint-color, #ddd);
    margin-top: 0;
}

/* ── Progress bar (mainnet simple mode) ─────────────────── */

.progress-wrap {
    background: var(--tg-theme-secondary-bg-color, #e8e8e8);
    border-radius: 99px;
    height: 10px;
    overflow: hidden;
    margin: 16px 0 12px;
}

.progress-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--tg-theme-button-color, #d32f2f);
    transition: width 0.6s ease;
}

.progress-bar.done   { background: #2e7d32; }
.progress-bar.failed { background: #c62828; }

.progress-text {
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    color: var(--tg-theme-hint-color, #555);
    margin: 0 0 8px;
}

.progress-text.ok  { color: #2e7d32; font-weight: 700; }
.progress-text.err { color: #c62828; font-weight: 700; }

/* ── Stepper ─────────────────────────────────────────────── */

.stepper {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 8px 0 20px;
}

.step-row {
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0.35;
    transition: opacity 0.3s;
}

.step-row.step-done,
.step-row.step-active { opacity: 1; }

.step-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    background: var(--tg-theme-secondary-bg-color, #e8e8e8);
    color: var(--tg-theme-hint-color, #888);
    transition: background 0.3s, color 0.3s;
}

.step-done .step-dot {
    background: #2e7d32;
    color: #fff;
}

.step-active .step-dot {
    background: var(--tg-theme-button-color, #d32f2f);
    color: #fff;
}

.step-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--tg-theme-text-color, #212121);
}

.step-active .step-label { font-weight: 700; }

.step-failed { opacity: 1; }
.step-failed .step-dot { background: #c62828; color: #fff; }

@keyframes spin {
    to { transform: rotate(360deg); }
}
.spin { display: inline-block; animation: spin 1s linear infinite; }

.tx-result {
    margin-top: 8px;
    padding: 14px;
    border-radius: 10px;
    text-align: center;
}

.tx-result.ok  { background: #e8f5e9; }
.tx-result.err { background: #ffebee; }

.tx-result p { font-weight: 600; margin-bottom: 8px; }
.tx-result.ok  p { color: #2e7d32; }
.tx-result.err p { color: #c62828; }

.txid-link {
    display: block;
    font-size: 11px;
    word-break: break-all;
    color: #1565c0;
    margin-bottom: 14px;
}

.btn-secondary {
    background: transparent;
    color: var(--tg-theme-link-color, #1565c0);
    border: 1px solid currentColor;
    font-size: 14px;
    padding: 10px 20px;
    width: auto;
}

/* ── Network badge ───────────────────────────────────────── */

.network-badge {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--tg-theme-hint-color, #aaa);
}