:root {
    --ios-primary: #007aff;
    --ios-success: #34c759;
    --ios-warning: #ff9500;
    --ios-danger: #ff3b30;
    --ios-bg: #f2f2f7;
    --ios-card: #ffffff;
    --ios-text: #1c1c1e;
    --ios-muted: #8e8e93;
    --ios-border: #e5e5ea;
    --ios-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --ios-radius: 16px;
}

html, body, .ios-card, .game-card, .product-card, .payment-card, .step-card, .glass-header, .footer, .admin-sidebar, .admin-login-card, .form-control, .form-select, .input-group-text, .table, .btn {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

html[data-theme="dark"] {
    --ios-primary: #0a84ff;
    --ios-bg: #0d0d0d;
    --ios-card: #1c1c1e;
    --ios-text: #f2f2f7;
    --ios-muted: #a1a1a8;
    --ios-border: #2c2c2e;
    --ios-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
}

body { font-family: Inter, "SF Pro Display", system-ui, sans-serif; background: radial-gradient(circle at top right, #e9f3ff, transparent 45%), var(--ios-bg); color: var(--ios-text); }
.site-fade-in { animation: fade-in .3s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

html[data-theme="dark"] body {
    --bs-body-bg: #0d0d0d;
    --bs-body-color: #f2f2f7;
    --bs-border-color: #2c2c2e;
    --bs-secondary-color: #a1a1a8;
    --bs-tertiary-bg: #171719;
    --bs-secondary-bg: #1c1c1e;
    --bs-emphasis-color: #f2f2f7;
    background: radial-gradient(circle at top right, rgba(10, 132, 255, 0.2), transparent 40%), #0d0d0d;
}

html[data-theme="dark"] body,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] p,
html[data-theme="dark"] label,
html[data-theme="dark"] li,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] span,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .text-dark,
html[data-theme="dark"] .text-body,
html[data-theme="dark"] .text-body-emphasis,
html[data-theme="dark"] .dropdown-item,
html[data-theme="dark"] .list-group-item {
    color: var(--ios-text);
}

html[data-theme="dark"] a:not(.btn):not(.social-pill) {
    color: #7ab7ff;
}

html[data-theme="dark"] .ios-card,
html[data-theme="dark"] .game-card,
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .payment-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .table,
html[data-theme="dark"] .list-group-item,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content {
    background-color: var(--ios-card);
    border-color: var(--ios-border);
}

.site-topbar {
    background: linear-gradient(180deg, #1e2028, #171922);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.topbar-logo {
    color: #fff;
    font-size: 1.8rem;
    text-decoration: none;
    font-weight: 900;
    letter-spacing: .4px;
    transform: skewX(-12deg);
}

.topbar-pill {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .04);
    color: #fff;
    border-radius: 999px;
    min-height: 42px;
    padding: .45rem .78rem;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-weight: 600;
}

.topbar-currency { padding-inline: .75rem .85rem; }
.id-flag {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .5);
    background: linear-gradient(180deg, #d7001f 50%, #ffffff 50%);
    display: inline-block;
}

html[data-theme="dark"] .site-topbar {
    background: linear-gradient(180deg, #15161b, #111218);
}

.hero-frame {
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .14);
}

.hero-banner-link {
    position: relative;
    border-radius: 28px;
    overflow: hidden;
}

.hero-banner-img {
    width: 100%;
    aspect-ratio: 16 / 6.2;
    object-fit: cover;
    display: block;
}

.hero-banner-link::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13, 13, 13, .08), rgba(13, 13, 13, .16));
}

.ios-card, .game-card, .product-card, .payment-card, .step-card { background: var(--ios-card); border: 1px solid var(--ios-border); border-radius: var(--ios-radius); box-shadow: var(--ios-shadow); }
.game-card, .product-card, .payment-card { transition: transform .25s ease, box-shadow .25s ease; }
.game-card:hover, .product-card:hover, .payment-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 122, 255, .15); }

.step-card { padding: 1.15rem; }
.active-step { border-color: var(--ios-primary); }
.step-number { width: 30px; height: 30px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 122, 255, .1); color: var(--ios-primary); margin-right: .5rem; }
.choice-product:checked + div, .choice-payment:checked + div { border: 2px solid var(--ios-primary); border-radius: 12px; background: rgba(0, 122, 255, .06); }

.btn-ios { border-radius: 12px; padding: .65rem 1rem; font-weight: 600; }
.btn:active { transform: scale(.95); }

.section-title { font-size: 1.4rem; font-weight: 700; }
.feature-icon { width: 52px; height: 52px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; background: rgba(0, 122, 255, .1); color: var(--ios-primary); }

.category-tabs { display: flex; gap: .5rem; overflow-x: auto; }
.btn-tab { border-radius: 999px; border: 1px solid var(--ios-border); color: var(--ios-text); background: var(--ios-card); }
.btn-tab.active { background: var(--ios-primary); color: #fff; border-color: var(--ios-primary); }

.showcase-shell {
    background: linear-gradient(180deg, #ffffff, #f7f8fc);
    border-radius: 22px;
    border: 1px solid var(--ios-border);
    padding: 1.25rem;
}

.showcase-tabs .btn-tab {
    background: #eef1f6;
    border-color: #dfe3eb;
    color: var(--ios-text);
    font-weight: 700;
    padding: .4rem .95rem;
    white-space: nowrap;
}

.showcase-tabs .btn-tab.active {
    background: #ff7a00;
    border-color: #ff7a00;
    color: #fff;
}

.showcase-card {
    border-radius: 18px;
    background: var(--ios-card);
    border: 2px solid transparent;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
    transform-origin: center;
}

.showcase-card:hover {
    transform: translateY(-6px);
    border-color: #ff7a00;
    box-shadow: 0 12px 34px rgba(255, 122, 0, 0.22);
}

.showcase-card:active {
    transform: scale(.97);
}

.showcase-card.is-clicked {
    animation: showcase-click .32s ease;
    border-color: #ff7a00;
    box-shadow: 0 14px 36px rgba(255, 122, 0, 0.28);
}

@keyframes showcase-click {
    0% { transform: scale(1) rotate(0deg); }
    45% { transform: scale(.96) rotate(-1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

.showcase-media { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.showcase-media img { width: 100%; height: 100%; object-fit: cover; }

.showcase-meta { padding: .85rem .85rem .95rem; }
.showcase-title {
    color: var(--ios-text);
    font-size: 1.04rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.showcase-subtitle {
    color: var(--ios-muted);
    font-size: .88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.showcase-grid .game-item { animation-delay: calc(var(--i, 1) * 30ms); }

.footer { border-top: 1px solid var(--ios-border); background: #fff; }
.footer-links a { color: var(--ios-muted); text-decoration: none; }
.social-pill { width: 36px; height: 36px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ios-border); color: var(--ios-text); text-decoration: none; }
html[data-theme="dark"] .footer { background: #171719; }
html[data-theme="dark"] .showcase-shell {
    background: linear-gradient(180deg, #13151c, #0f1118);
    border-color: #272b34;
}
html[data-theme="dark"] .showcase-tabs .btn-tab {
    background: #1f222b;
    border-color: #2f3440;
    color: #f2f2f7;
}
html[data-theme="dark"] .showcase-card {
    background: #1b1e27;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
}
html[data-theme="dark"] .showcase-title { color: #fff; }
html[data-theme="dark"] .showcase-subtitle { color: #c7cad3; }

.top-toast { position: fixed; top: 70px; right: 16px; border-radius: 12px; padding: 10px 14px; z-index: 1060; box-shadow: var(--ios-shadow); }

.game-banner { max-height: 260px; object-fit: cover; }
.game-avatar { width: 80px; height: 80px; object-fit: cover; border-radius: 50px; }

.admin-body { background: #ecedf2; }
.admin-shell { display: flex; min-height: 100vh; }
.admin-sidebar { width: 260px; background: #fff; border-right: 1px solid var(--ios-border); position: sticky; top: 0; height: 100vh; }
.admin-sidebar .nav-link { border-radius: 10px; }
.admin-sidebar .nav-link:hover { background: rgba(0, 122, 255, .08); }
.admin-content { flex: 1; }
html[data-theme="dark"] .admin-body { background: #101012; }
html[data-theme="dark"] .admin-sidebar { background: #171719; }
html[data-theme="dark"] .admin-sidebar .nav-link { color: #f2f2f7; }

.admin-login-page { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(150deg, #007aff, #52a8ff); }
.admin-login-card { width: min(420px, 92vw); padding: 1.6rem; border-radius: 20px; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); box-shadow: var(--ios-shadow); }
html[data-theme="dark"] .admin-login-page { background: linear-gradient(150deg, #0d0d0d, #171719); }
html[data-theme="dark"] .admin-login-card { background: rgba(28, 28, 30, .92); border: 1px solid var(--ios-border); color: var(--ios-text); }

.theme-toggle {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1100;
    border: 1px solid var(--ios-border);
    background: var(--ios-card);
    color: var(--ios-text);
    border-radius: 999px;
    padding: .5rem .85rem;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    box-shadow: var(--ios-shadow);
    font-weight: 600;
}

html[data-theme="dark"] .table,
html[data-theme="dark"] .table > :not(caption) > * > * {
    color: var(--ios-text);
    border-color: var(--ios-border);
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text {
    background: #151517;
    color: var(--ios-text);
    border-color: var(--ios-border);
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-select::placeholder {
    color: var(--ios-muted);
}

html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .text-secondary,
html[data-theme="dark"] small {
    color: var(--ios-muted) !important;
}

.stagger-list > [class*="col"] { animation: fade-in .5s ease both; }
.skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: skeleton 1.2s ease infinite; border-radius: 12px; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

@media (max-width: 991px) {
    .admin-shell { flex-direction: column; }
    .admin-sidebar { width: 100%; height: auto; position: static; }
}

@media (max-width: 575.98px) {
    .topbar-logo { font-size: 1.45rem; }
    .topbar-pill { min-height: 38px; padding: .36rem .62rem; }
    .topbar-currency { font-size: .84rem; }
    .hero-frame,
    .hero-banner-link { border-radius: 20px; }
    .hero-banner-img { aspect-ratio: 16 / 8.5; }
    .showcase-shell { padding: .85rem; border-radius: 16px; }
    .showcase-tabs { gap: .35rem; }
    .showcase-tabs .btn-tab { font-size: .78rem; padding: .34rem .7rem; }
    .showcase-card { border-radius: 13px; }
    .showcase-meta { padding: .55rem .5rem .65rem; }
    .showcase-title { font-size: .82rem; }
    .showcase-subtitle { font-size: .72rem; }
}