:root {
    --bg: #0f1419;
    --panel: #1a2229;
    --card: #212a32;
    --muted: #8a9ba8;
    --accent: #00c8ff;
    --accent-glow: rgba(0, 200, 255, 0.3);
    --round: 16px;
    --padding: 16px;
    --text: #e6eef2;
    --rare: #ff4757;
    --epic: #9c88ff;
    --legendary: #fbc531;
    --success: #44bd32;
    --gold: #ffd700;
    --silver: #c0c0c0;
    --bronze: #cd7f32;
    --main-gradient: linear-gradient(135deg, #00c8ff, #0099ff);
    --danger-gradient: linear-gradient(135deg, #ff4757, #ff3838);
    --success-gradient: linear-gradient(135deg, #44bd32, #2ecc71);
    --premium-gradient: linear-gradient(135deg, #fbc531, #e1b12c);
}

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

body {
    font-family: 'Segoe UI', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow-x: hidden;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 200, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(155, 136, 255, 0.05) 0%, transparent 20%);
}

.app {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 80px;
    position: relative;
}

h2 {
    color: white;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 800;
}

.subtitle {
    color: var(--muted);
    font-size: 14px;
}