body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, sans-serif;
}

body[data-theme="light"] {
    --bg: #f5f5f7;
    --card: rgba(255,255,255,0.92);
    --text: #121212;
    --muted: #6b6b80;
    --accent: #5865ff;
    --shadow: rgba(0,0,0,0.14);
}

body[data-theme="dark"] {
    --bg: #050509;
    --card: rgba(18,18,28,0.96);
    --text: #f7f7ff;
    --muted: #8f90a7;
    --accent: #8892ff;
    --shadow: rgba(0,0,0,0.75);
}

.shell {
    min-height: 100vh;
    background: radial-gradient(circle at top, #25253c, var(--bg));
    display: flex;
    flex-direction: column;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
}

.logo {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
}

.topnav {
    display: flex;
    gap: 10px;
}

.btn {
    padding: 9px 14px;
    border-radius: 14px;
    border: none;
    background: var(--card);
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 8px 22px var(--shadow);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.btn.primary {
    background: linear-gradient(135deg,#5865ff,#9b5dff);
    color: #fff;
}

.btn:active {
    transform: scale(0.95);
    box-shadow: 0 4px 12px var(--shadow);
}

.main {
    flex: 1;
    padding: 14px 18px 24px 18px;
    display: grid;
    grid-template-columns: 2fr 1.4fr 1.2fr;
    gap: 16px;
}

.card {
    background: var(--card);
    border-radius: 22px;
    padding: 18px 16px;
    box-shadow: 0 16px 38px var(--shadow);
    color: var(--text);
}

.card h1,
.card h2 {
    margin: 0 0 14px 0;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(160px,1fr));
    gap: 12px;
}

.package {
    border-radius: 18px;
    padding: 12px 10px;
    background: rgba(255,255,255,0.04);
    box-shadow: 0 10px 24px var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.package-selected {
    outline: 2px solid var(--accent);
}

.package-title {
    font-weight: 700;
    font-size: 14px;
}

.package-credits {
    font-size: 13px;
    color: var(--accent);
}

.package-bonus {
    font-size: 12px;
    color: #41ff70;
}

.package-price {
    margin-top: 4px;
    font-size: 14px;
    font-weight: 600;
}

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

.method {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
}

.method input {
    accent-color: var(--accent);
}

.method-badge {
    margin-left: auto;
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(88,101,255,0.12);
    color: var(--accent);
}

.shop-message {
    margin-top: 10px;
    font-size: 13px;
}

.shop-message.error {
    color: #ff7070;
}

.shop-message.success {
    color: #41ff70;
}

.shop-message.info {
    color: var(--muted);
}

.bank {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 13px;
}

.bank-name {
    font-weight: 600;
}

.bank-iban {
    font-family: monospace;
    font-size: 12px;
}

.transaction-box {
    margin-top: 12px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    font-size: 13px;
}

.transaction-code {
    margin-top: 4px;
    font-family: monospace;
    font-size: 14px;
}

.transaction-note {
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 960px) {
    .main {
        grid-template-columns: 1fr;
    }
}