:root {
    --bg-color: var(--tg-theme-bg-color, #ffffff);
    --text-color: var(--tg-theme-text-color, #222222);
    --hint-color: var(--tg-theme-hint-color, #a8a8a8);
    --link-color: var(--tg-theme-link-color, #2481cc);
    --button-color: var(--tg-theme-button-color, #2481cc);
    --button-text-color: var(--tg-theme-button-text-color, #ffffff);
    --secondary-bg-color: var(--tg-theme-secondary-bg-color, #f0f0f0);

    --success-color: #34c759;
    --danger-color: #ff3b30;
    --card-radius: 16px;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--secondary-bg-color);
    color: var(--text-color);
    display: flex;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
}

#app {
    width: 100%;
    max-width: 480px;
    min-height: 100vh;
    background-color: var(--bg-color);
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
    position: relative;
}

.hidden {
    display: none !important;
}

.view {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.w-100 {
    width: 100%;
}

.text-danger {
    color: var(--danger-color);
}

.text-success {
    color: var(--success-color);
}