:root {
    --bg: #0a1220;
    --panel: #151f31;
    --panel-2: #1d2940;
    --line: rgba(160, 184, 214, 0.14);
    --text: #edf3ff;
    --muted: #8d9ab3;
    --green: #10b981;
    --green-2: #0f9d74;
    --blue: #5b7cff;
    --blue-2: #7d5cff;
    --danger: #ff5b67;
    --shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    --radius: 22px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--text); }
body { position: relative; }
button, a, input, select { touch-action: manipulation; }

.login-body, .dashboard-body {
    background:
        radial-gradient(circle at 20% 20%, rgba(91, 124, 255, 0.18), transparent 28%),
        radial-gradient(circle at 80% 10%, rgba(138, 92, 246, 0.18), transparent 24%),
        radial-gradient(circle at 50% 80%, rgba(16, 185, 129, 0.09), transparent 26%),
        #08101b;
}

.nebula, .dashboard-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, black, transparent 85%);
    opacity: .45;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.login-panel {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(320px, 1.05fr) minmax(340px, 0.95fr);
    gap: 24px;
    align-items: stretch;
}

.login-card, .modal-card, .panel-card {
    background: linear-gradient(180deg, rgba(28,40,62,0.97), rgba(18,27,43,0.97));
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.login-card {
    width: 100%;
    padding: 32px;
}

.login-aside {
    padding: 0;
    border-radius: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    display: grid;
    align-content: start;
    gap: 18px;
}

.brand-mark { display: flex; justify-content: flex-start; margin-bottom: 4px; }
.brand-cube {
    width: 78px; height: 78px; border-radius: 18px;
    background: linear-gradient(135deg, #ffae28, #ff7a18 55%, #303a51 56%, #58657f);
    box-shadow: 0 18px 30px rgba(0,0,0,.25);
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: .82rem;
    color: #d7e5ff;
    background: rgba(91, 124, 255, 0.14);
    border: 1px solid rgba(91, 124, 255, 0.18);
}
.login-title { margin: 0; font-size: 3rem; line-height: 1.05; }
.login-subtitle { margin: 0; color: var(--muted); font-size: 1.05rem; line-height: 1.6; max-width: 48ch; }
.login-card-head { display: grid; gap: 10px; margin-bottom: 18px; }
.login-card-head h2 { margin: 0; font-size: 2rem; }
.login-card-head p { margin: 0; color: var(--muted); }
.status-pill {
    display: inline-flex;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.16);
    color: #c8ffe7;
    font-size: .8rem;
}
.login-feature-list { display: grid; gap: 14px; margin-top: 8px; }
.login-feature {
    display: grid;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(160, 184, 214, 0.1);
}
.login-feature strong { font-size: 1rem; }
.login-feature span { color: var(--muted); line-height: 1.5; }
.flash-error {
    margin-bottom: 16px; padding: 12px 14px; border-radius: 14px;
    background: rgba(255, 91, 103, 0.14); color: #ffd1d5; border: 1px solid rgba(255, 91, 103, 0.2);
}
.login-form { display: grid; gap: 14px; }
.login-form label { display: grid; gap: 8px; color: var(--muted); font-size: .92rem; }
.login-form input, .search-shell input, .table-search input {
    width: 100%; border: 1px solid var(--line); border-radius: 14px;
    background: #e8eef8; color: #0e1625; padding: 14px 15px; font-size: 1rem;
}
.primary-gradient, .refill-button {
    border: 0; border-radius: 14px; color: white; padding: 14px 18px; cursor: pointer;
    background: linear-gradient(90deg, var(--blue), var(--blue-2));
    font-weight: 600;
}
.login-footnote, .terms-row { margin-top: 14px; color: var(--muted); font-size: .9rem; display: flex; justify-content: center; gap: 8px; align-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: #53a4ff; display: inline-block; }

.dashboard-layout { max-width: 1480px; margin: 0 auto; padding: 18px; }
.topbar {
    display: flex; justify-content: space-between; align-items: center; gap: 18px;
    background: rgba(10, 17, 30, 0.6); border: 1px solid var(--line); border-radius: 22px; padding: 14px 18px;
    backdrop-filter: blur(12px); position: sticky; top: 12px; z-index: 5;
}
.topbar-left, .topbar-right, .top-nav { display: flex; align-items: center; gap: 12px; }
.logout-form { margin: 0; }
.topbar-logout { min-width: 110px; }
.settings-logout-form {
    margin-top: 18px;
    display: flex;
    justify-content: flex-end;
}
.settings-logout-standalone {
    margin-top: 8px;
}
.settings-logout-button {
    min-width: 180px;
}
.contact-owner-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    text-decoration: none;
    color: var(--text);
}
.telegram-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(47, 143, 255, 0.16);
    color: #d9efff;
    border: 1px solid rgba(47, 143, 255, 0.22);
    font-size: .86rem;
}
.telegram-badge::before {
    content: "✈";
    font-size: .9rem;
}
.brand-pill, .user-chip, .balance-chip, .top-nav a, .view-switch, .filter-pill, .icon-button {
    border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 14px;
}
.brand-pill { width: 44px; height: 44px; display: grid; place-items: center; font-weight: 700; color: #f8c44f; }
.top-nav a, .user-chip, .balance-chip, .view-switch, .filter-pill { padding: 11px 16px; text-decoration: none; }
.top-nav a.active {
    background: rgba(91,124,255,0.18);
    border-color: rgba(91,124,255,0.4);
    color: #a0c0ff;
    font-weight: 600;
}
.balance-chip { color: #c5d4ff; }
.refill-button { background: linear-gradient(180deg, #1ccf89, #0da972); }
.icon-button { width: 42px; height: 42px; cursor: pointer; }

.content { padding-top: 22px; display: grid; gap: 18px; }
.catalog-content { gap: 16px; }
.catalog-topline {
    height: 14px;
    font-size: .82rem;
    color: #d9e2ff;
    letter-spacing: .04em;
}
.catalog-toolbar {
    display: flex;
    gap: 14px;
    align-items: center;
}
.type-switch-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.catalog-subtoolbar {
    display: flex;
    justify-content: flex-start;
}
.category-select {
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 92px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
}
.mini-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.16);
    color: #c8ffe7;
    font-size: .8rem;
}
.mini-badge.muted {
    background: rgba(91, 124, 255, 0.12);
    border-color: rgba(91, 124, 255, 0.16);
    color: #d8e2ff;
}
.flash-success {
    margin-bottom: 16px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.14);
    color: #d7fff0;
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.action-feedback {
    margin-bottom: 4px;
}
.hero-strip { display: flex; gap: 14px; align-items: center; }
.search-shell { flex: 1; }
.search-shell input, .table-search input { background: rgba(23, 34, 53, 0.92); color: var(--text); }
.view-switch { background: #f8fafc; color: #172032; min-width: 114px; }
.filter-row { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.filter-pill { background: var(--panel); cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 42px; }
.filter-pill.active,
.view-switch.active {
    box-shadow: inset 0 0 0 1px rgba(116, 255, 180, 0.25), 0 0 0 1px rgba(116, 255, 180, 0.18);
    color: #dcffef;
    background: linear-gradient(180deg, #243756, #19273f);
}

.products-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px;
    width: 100%; overflow: hidden;
}
.product-card { min-width: 0; }
.product-card.filtered-out {
    display: none !important;
}
.product-card {
    position: relative; display: grid; gap: 14px; padding: 18px;
    background: linear-gradient(180deg, rgba(22,31,48,0.98), rgba(14,22,35,0.98));
    border: 1px solid var(--line); border-radius: 22px;
}
.product-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.product-thumb {
    width: 66px; height: 66px; border-radius: 16px;
    background: linear-gradient(135deg, #202b43, #101724);
    border: 1px solid var(--line);
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-thumb.has-image {
    background-color: #111827;
}
.product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-meta h3 { margin: 0 0 6px; font-size: 1.2rem; }
.product-meta p { margin: 0; color: var(--muted); min-height: 38px; }
.product-footer {
    display: flex;
    justify-content: flex-start;
}
.device-badge {
    display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #2f8fff; color: white; font-size: .78rem;
}
.device-badge.secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text);
}
.maintenance-tag {
    position: absolute; top: 18px; right: 18px; background: linear-gradient(180deg, #ff8069, #f44752);
    color: white; padding: 8px 12px; border-radius: 12px; font-size: .82rem; font-weight: 600;
}
.maintenance-tag.available {
    background: linear-gradient(180deg, #18c687, #0ca970);
}
.product-plans { display: grid; gap: 8px; }
.plan-row {
    display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px;
    background: rgba(255,255,255,0.04); border: 1px solid var(--line); border-radius: 14px;
}
.plan-row.interactive {
    width: 100%;
    cursor: pointer;
    color: var(--text);
    text-align: left;
}
.plan-row.interactive:hover {
    border-color: rgba(91, 124, 255, 0.4);
    transform: translateY(-1px);
}
.catalog-empty-card {
    min-height: 240px;
}
.hidden-state {
    display: none;
}
.owner-toolbar {
    display: flex;
    justify-content: flex-end;
}
.owner-add-button {
    min-width: 170px;
}
.product-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: flex-start;
}
.edit-product-button {
    padding: 8px 14px;
    font-size: .85rem;
    min-width: 80px;
    margin-left: 0;
    border-radius: 12px;
    flex-shrink: 0;
}
.modal-subtitle {
    margin-top: -4px;
    margin-bottom: 18px;
    color: var(--muted);
}
.plan-edit-grid {
    display: grid;
    grid-template-columns: 1fr 160px 140px;
    gap: 12px;
}
.delete-plan-button {
    align-self: end;
    min-height: 48px;
}
.new-plan-section {
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(160, 184, 214, 0.1);
}
.new-plan-section strong {
    font-size: .95rem;
}

.history-grid { display: grid; gap: 18px; }
.compact-history {
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
}
.panel-card { padding: 18px; }
.panel-head {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px;
}
.panel-head h2 { margin: 0; font-size: 1.2rem; }
.panel-total { text-align: right; color: var(--muted); }
.panel-total strong { display: block; color: #ecfffa; font-size: 1.25rem; margin-top: 4px; }
.table-shell, .purchase-list { display: grid; gap: 10px; }
.table-head, .table-row, .purchase-main, .purchase-actions {
    display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.table-row, .purchase-item {
    padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.empty-state {
    padding: 32px 20px;
    border: 1px dashed rgba(160, 184, 214, 0.22);
    border-radius: 18px;
    background: rgba(255,255,255,0.02);
    text-align: center;
}
.empty-state.small { padding: 20px 16px; }
.empty-state h3 { margin: 0 0 8px; }
.empty-state p { margin: 0; color: var(--muted); }
.stats-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.stat-box {
    padding: 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 16px;
}
.stat-box span, .purchase-date, .balance-after { color: var(--muted); font-size: .9rem; }
.stat-box strong { display: block; margin-top: 8px; font-size: 1.25rem; }
.license-preview {
    font-family: Consolas, monospace; padding: 12px 14px; border-radius: 14px;
    background: #0d1422; border: 1px solid rgba(255,255,255,0.05);
}
.purchase-key-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}
.purchase-key-row .license-preview { flex: 1; }
.copy-history-btn {
    border: 1px solid rgba(91,124,255,0.3);
    background: rgba(91,124,255,0.12);
    color: #c5d4ff;
    border-radius: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: .88rem;
    white-space: nowrap;
}
.copy-history-btn:hover { background: rgba(91,124,255,0.22); }
.purchase-item h3 { margin: 0; }
.purchase-price { color: #4ce09f; font-weight: 700; }
.secondary-button, .primary-soft, .primary-green {
    border: 0; border-radius: 14px; padding: 12px 16px; cursor: pointer; color: white;
}
.secondary-button { background: #4b5d78; }
.secondary-button.large { min-width: 160px; }
.primary-soft { background: #516782; min-width: 140px; }
.primary-green { background: linear-gradient(180deg, #18c687, #0ca970); min-width: 170px; }

.modal-overlay {
    position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2, 8, 15, 0.72);
    padding: 20px; z-index: 20;
}
.modal-overlay[hidden] {
    display: none !important;
}
.modal-card {
    position: relative; width: min(560px, 100%); padding: 26px;
    max-height: min(88vh, 920px);
    overflow-y: auto;
}
.modal-card.compact { width: min(540px, 100%); }
.modal-card.details { width: min(560px, 100%); }
.modal-card.stock-modal { width: min(860px, 100%); }
.modal-card.product-edit-modal {
    width: min(760px, 100%);
}
.modal-card h2 { margin: 0 0 16px; font-size: 2rem; }
.modal-close {
    position: absolute; top: 16px; right: 16px; border: 0; background: transparent; color: #a5b1c8; font-size: 2rem; cursor: pointer;
}
.voucher-box, .detail-grid code {
    display: block; padding: 16px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid var(--line);
}
.modal-card p { color: var(--muted); }
.modal-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.modal-actions.sticky-actions {
    position: sticky;
    bottom: 0;
    padding-top: 16px;
    padding-bottom: 8px;
    background: linear-gradient(180deg, rgba(21,31,49,0), rgba(21,31,49,0.96) 28%, rgba(21,31,49,1));
    z-index: 2;
}
.detail-grid { display: grid; gap: 18px; }
.detail-grid span { display: block; color: var(--muted); margin-bottom: 8px; }
.detail-grid strong { font-size: 1.08rem; }
.accent { color: #40d899; }
.textarea-shell {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #e8eef8;
    color: #0e1625;
    padding: 14px 15px;
    font-size: 1rem;
    resize: vertical;
    min-height: 120px;
}
.product-edit-form {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.modal-form-scroll {
    overflow-y: auto;
    max-height: calc(75vh - 160px);
    padding-right: 6px;
    display: grid;
    gap: 14px;
}
.stock-search-row {
    margin-bottom: 14px;
}
.stock-search-row input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(23, 34, 53, 0.92);
    color: var(--text);
    padding: 14px 15px;
    font-size: 1rem;
}
.stock-list-shell {
    display: grid;
    gap: 10px;
}
.stock-row {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: flex-start;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
}
.stock-row-main {
    display: grid;
    gap: 8px;
}
.stock-row-main code {
    font-family: Consolas, monospace;
    font-size: .96rem;
    color: #d8e2ff;
}
.stock-meta {
    color: var(--muted);
    font-size: .88rem;
}
.stock-delete-button {
    min-width: 92px;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (max-width: 980px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
    .login-panel { grid-template-columns: 1fr; }
    .login-title { font-size: 2.4rem; }
    .compact-history { grid-template-columns: 1fr; }
    .settings-grid { grid-template-columns: 1fr; }
    .stock-row { flex-direction: column; }
    .filter-row-5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .reseller-table-head { display: none; }
    .reseller-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (max-width: 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Layout */
    .dashboard-layout { padding: 10px; gap: 0; }
    .content { gap: 10px; padding-top: 10px; }
    .catalog-content { gap: 10px; }

    /* ── Topbar ── */
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 12px;
        position: static;          /* remove sticky on mobile — saves space */
        border-radius: 16px;
    }
    .topbar-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .brand-pill {
        width: 36px; height: 36px;
        font-size: .85rem;
        flex-shrink: 0;
    }
    .top-nav {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        flex: 1;
    }
    .top-nav a {
        padding: 8px 10px;
        font-size: .82rem;
        border-radius: 10px;
        flex: 1;
        text-align: center;
    }
    .topbar-right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        align-items: center;
    }
    .user-chip {
        grid-column: 1 / -1;
        padding: 8px 12px;
        font-size: .85rem;
        border-radius: 10px;
    }
    .balance-chip {
        padding: 8px 10px;
        font-size: .82rem;
        border-radius: 10px;
    }
    .refill-button {
        padding: 8px 10px;
        font-size: .82rem;
        border-radius: 10px;
    }
    .logout-form { display: contents; }
    .topbar-logout {
        padding: 8px 10px;
        font-size: .82rem;
        border-radius: 10px;
        min-width: 0;
        grid-column: 2;
    }
    /* Owner resellers button */
    .topbar-right a.secondary-button {
        padding: 8px 10px;
        font-size: .82rem;
        border-radius: 10px;
        text-align: center;
    }

    /* ── Filters ── */
    .catalog-topline { font-size: .75rem; height: auto; margin-bottom: 2px; }

    .catalog-toolbar {
        flex-direction: column;
        gap: 8px;
    }
    .search-shell { width: 100%; }
    .search-shell input { padding: 10px 12px; font-size: .92rem; }

    .type-switch-group {
        display: flex;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
    }
    .type-switch-group::-webkit-scrollbar { display: none; }
    .view-switch {
        padding: 8px 12px;
        font-size: .8rem;
        min-width: auto;
        white-space: nowrap;
        border-radius: 10px;
        flex-shrink: 0;
    }

    .catalog-subtoolbar { margin: 0; }
    .category-select { width: 100%; padding: 9px 12px; font-size: .88rem; }

    /* Status: 3 equal columns */
    .filter-row {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    /* Platform: 3 columns (wraps to next row naturally) */
    .filter-row-5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .filter-pill {
        padding: 8px 6px;
        font-size: .78rem;
        border-radius: 10px;
        text-align: center;
    }

    .owner-toolbar { margin: 4px 0; }
    .owner-add-button { width: 100%; padding: 10px; font-size: .9rem; }

    /* ── Product cards ── */
    .products-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .product-card {
        padding: 12px;
        gap: 10px;
        border-radius: 16px;
    }
    .product-header {
        gap: 10px;
    }
    .product-thumb {
        width: 52px; height: 52px;
        border-radius: 12px;
        flex-shrink: 0;
    }
    .product-meta h3 { font-size: .95rem; margin: 0 0 3px; }
    .product-meta p  { font-size: .82rem; margin: 0; }

    .maintenance-tag {
        top: 12px; right: 12px;
        padding: 5px 9px;
        font-size: .72rem;
        border-radius: 9px;
    }

    .product-footer {
        gap: 5px;
        flex-wrap: wrap;
    }
    .device-badge {
        padding: 4px 8px;
        font-size: .72rem;
        border-radius: 999px;
    }
    .edit-product-button {
        padding: 7px 10px;
        font-size: .78rem;
        min-width: 0;
        margin-left: 0;
        border-radius: 10px;
    }

    /* Plans */
    .plan-row {
        padding: 10px 12px;
        border-radius: 12px;
    }
    .plan-row span { font-size: .85rem; }
    .plan-row strong { font-size: .95rem; white-space: nowrap; }

    /* ── Points / history ── */
    .history-grid { gap: 10px; }
    .compact-history { grid-template-columns: 1fr; }
    .panel-card { padding: 14px; border-radius: 16px; }
    .panel-head h2 { font-size: 1.05rem; }
    .stats-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .stat-box { padding: 10px; border-radius: 12px; }
    .stat-box span { font-size: .78rem; }
    .stat-box strong { font-size: 1rem; margin-top: 4px; }
    .license-preview { font-size: .78rem; padding: 9px 11px; }
    .purchase-key-row { flex-direction: column; align-items: stretch; }
    .copy-history-btn { width: 100%; }

    /* ── Settings ── */
    .settings-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

    /* ── Modals ── */
    .modal-overlay { padding: 16px; align-items: center; }
    .modal-card {
        width: 100%;
        max-height: 92vh;
        border-radius: 20px;
        padding: 20px 16px 24px;
    }
    .modal-card.stock-modal { border-radius: 20px; }
    .modal-card h2 { font-size: 1.4rem; margin-bottom: 12px; }
    .modal-form-scroll { max-height: calc(80vh - 140px); }
    .modal-actions { gap: 8px; margin-top: 14px; }
    .modal-actions button { padding: 12px 14px; font-size: .9rem; }
    .confirm-row { flex-direction: column; align-items: flex-start; gap: 3px; }
    .confirm-row strong { text-align: left; }
    .confirm-row-inline { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; }
    .quantity-picker { justify-content: space-between; width: 100%; }

    /* ── Reseller table mobile ── */
    .reseller-row {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 12px;
    }
    .reseller-table-head { display: none; }
    .reseller-actions { flex-wrap: wrap; gap: 6px; }
    .reseller-actions .secondary-button,
    .reseller-actions .danger-button { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL PHONE  (max-width: 480px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {

    .dashboard-layout { padding: 8px; }

    /* Topbar: nav items smaller */
    .top-nav a { padding: 7px 8px; font-size: .78rem; }
    .topbar-right { grid-template-columns: 1fr 1fr; gap: 5px; }

    /* Filters: 2 cols for platform (5 items → 3+2) */
    .filter-row   { grid-template-columns: repeat(3, 1fr); gap: 5px; }
    .filter-row-5 { grid-template-columns: repeat(2, 1fr); gap: 5px; }
    .filter-pill  { padding: 7px 4px; font-size: .74rem; }

    /* Cards */
    .product-card { padding: 10px; gap: 8px; }
    .product-thumb { width: 46px; height: 46px; }
    .product-meta h3 { font-size: .88rem; }

    /* Stats */
    .stats-row { grid-template-columns: 1fr 1fr; gap: 6px; }

    /* Settings */
    .settings-grid { grid-template-columns: 1fr; }

    /* Plan row */
    .plan-row { padding: 9px 10px; }
    .plan-row span { font-size: .8rem; }
    .plan-row strong { font-size: .9rem; }

    /* Modal bottom sheet */
    .modal-overlay { padding: 12px; align-items: center; }
    .modal-card {
        border-radius: 18px;
        padding: 18px 14px 20px;
        max-height: 95vh;
    }

    /* Login */
    .login-shell { padding: 12px; }
    .login-card { padding: 22px 18px; }
    .login-title { font-size: 2rem; }
}


/* ── Additions / fixes — append to the bottom of reseller.css ─────────────── */

/* Filter rows: status row = 3 cols, platform row = 5 cols */
.filter-row { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; width: 100%; }
.filter-row-5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
.catalog-content { overflow: hidden; width: 100%; }

/* Plan buttons: disabled state for maintenance / out-of-stock */
.plan-row.plan-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}
.plan-row.plan-disabled:hover {
    border-color: var(--line);
    transform: none;
}

/* ── Confirm purchase modal ──────────────────────────────────────────────── */
.confirm-grid {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}
.confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
}
.confirm-row:last-child { border-bottom: none; }
.confirm-row span { color: var(--muted); font-size: .9rem; }
.confirm-row strong { font-size: 1rem; text-align: right; }
.confirm-row-price { background: rgba(91,124,255,0.07); }
.confirm-row-price strong { color: #7eb3ff; font-size: 1.15rem; }
.confirm-row-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
    padding: 0 4px;
}
.quantity-inline-row > span {
    color: var(--muted);
    font-size: .92rem;
}
.quantity-picker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,0.04);
}
.quantity-btn {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: rgba(91,124,255,0.16);
    color: #d9e6ff;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
}
.quantity-btn:hover { background: rgba(91,124,255,0.28); }
.quantity-picker strong { min-width: 18px; text-align: center; }
.inline-stock-note {
    color: var(--muted);
    font-size: .9rem;
}
.inline-stock-note strong { color: var(--text); }

.confirm-buy-btn {
    flex: 1;
    font-size: 1rem;
    padding: 14px 20px;
}

/* ── Invoice / receipt modal ─────────────────────────────────────────────── */
.invoice-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.invoice-header h2 { margin: 0; }
.invoice-checkmark {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #18c687, #0ca970);
    color: white;
    font-size: 1.4rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    box-shadow: 0 0 18px rgba(16,185,129,0.4);
}
.invoice-key-section {
    margin-top: 4px;
    margin-bottom: 4px;
    display: grid;
    gap: 10px;
}
.invoice-key-label {
    color: var(--muted);
    font-size: .88rem;
}
.invoice-key-box {
    font-family: Consolas, monospace;
    font-size: .95rem;
    padding: 14px 16px;
    border-radius: 14px;
    background: #0d1422;
    border: 1px solid rgba(91,124,255,0.25);
    color: #a5c8ff;
    word-break: break-all;
    user-select: all;
    white-space: pre-wrap;
}
.copy-key-btn {
    align-self: flex-start;
    border: 1px solid rgba(91,124,255,0.3);
    background: rgba(91,124,255,0.12);
    color: #c5d4ff;
    border-radius: 10px;
    padding: 9px 16px;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s;
}
.copy-key-btn:hover { background: rgba(91,124,255,0.22); }

/* Stock manage toolbar */
.stock-toolbar {
    display: grid;
    gap: 10px;
    margin-bottom: 14px;
}
.stock-filter-row {
    display: flex;
    gap: 8px;
}
.stock-filter-row .filter-pill {
    padding: 8px 14px;
    font-size: .88rem;
}

/* Stock row: sold variant */
.stock-row-sold { opacity: 0.6; }
.stock-status-badge {
    display: inline-flex;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    margin-right: 6px;
}
.badge-unused {
    background: rgba(16,185,129,0.18);
    color: #a7ffdb;
    border: 1px solid rgba(16,185,129,0.25);
}
.badge-sold {
    background: rgba(255,91,103,0.14);
    color: #ffd1d5;
    border: 1px solid rgba(255,91,103,0.2);
}

/* Plan section header inside edit modal */
.plan-section-header {
    margin-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--line);
}

/* 2-col plan grid (no delete button column) */
.plan-edit-grid-2col { grid-template-columns: 1fr 160px; }

/* Danger zone inside edit modal */
.danger-zone {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,91,103,0.2);
    display: flex;
    justify-content: flex-end;
}
.danger-button {
    border: 1px solid rgba(255,91,103,0.35);
    background: rgba(255,91,103,0.12);
    color: #ffa8ad;
    border-radius: 12px;
    padding: 10px 16px;
    cursor: pointer;
    font-size: .9rem;
}
.danger-button:hover { background: rgba(255,91,103,0.22); color: #ffd1d5; }

/* Responsive tweaks handled in main breakpoints above */

/* ── Reseller Management Page ───────────────────────────────────────────── */
.reseller-table { display: grid; gap: 10px; }
.reseller-table-head {
    display: grid;
    grid-template-columns: 1.8fr 1.8fr 1fr 0.8fr 0.8fr 1.4fr;
    gap: 12px;
    padding: 10px 16px;
    color: var(--muted);
    font-size: .85rem;
}
.reseller-row {
    display: grid;
    grid-template-columns: 1.8fr 1.8fr 1fr 0.8fr 0.8fr 1.4fr;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 16px;
}
.reseller-row-owner {
    border-color: rgba(91,124,255,0.3);
    background: rgba(91,124,255,0.06);
}
.reseller-name { display: grid; gap: 2px; }
.reseller-name strong { font-size: 1rem; }
.reseller-name small { color: var(--muted); font-size: .82rem; }
.reseller-balance { color: #4ce09f; font-weight: 700; }
.reseller-email { color: var(--muted); font-size: .9rem; word-break: break-all; }
.reseller-date { color: var(--muted); font-size: .88rem; }
.reseller-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.reseller-actions .secondary-button { padding: 8px 12px; font-size: .85rem; min-width: 0; }
.reseller-actions .danger-button { padding: 8px 12px; font-size: .85rem; }

/* Reseller mobile handled in main breakpoints above */

/* ── Product banner (full-width rectangle image) ────────────────────────── */
.product-card {
    padding: 0 !important;
    overflow: hidden;
    grid-template-rows: auto auto auto auto 1fr !important;
}
.product-banner {
    position: relative;
    width: 100%;
    height: 170px;
    background: linear-gradient(135deg, #1a2540, #0e1724);
    border-radius: 22px 22px 0 0;
    overflow: hidden;
    flex-shrink: 0;
}
.product-banner.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.product-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px 14px;
    gap: 5px;
}
.product-banner-overlay h3 {
    margin: 0;
    font-size: 1.1rem;
    color: white;
    text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 1px 3px rgba(0,0,0,1);
    display: flex;
    align-items: center;
    gap: 5px;
}
.product-desc {
    margin: 0;
    padding: 10px 14px 0;
    font-size: .82rem;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.product-badges {
    padding: 8px 14px 0;
}
.product-owner-actions {
    padding: 0 14px;
}
.product-plans {
    padding: 0 14px 14px;
}

@media (max-width: 768px) {
    .product-banner { height: 145px; }
    .product-banner-overlay h3 { font-size: 1rem; }
}

/* ── Features strip ─────────────────────────────────────────────────────── */
.features-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 8px;
}
.features-strip .feature-card:last-child {
    grid-column: 1 / -1;
    width: 100%;
}
.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 28px 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.feature-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, #9b3dff, #c840e0);
    font-size: 1.8rem;
    display: grid;
    place-items: center;
    box-shadow: 0 0 24px rgba(155,61,255,0.35);
}
.feature-card strong {
    font-size: .95rem;
    letter-spacing: .06em;
    color: var(--text);
}
.feature-card p {
    font-size: .82rem;
    color: var(--muted);
    margin: 0;
    line-height: 1.5;
}
@media (max-width: 640px) {
}

/* ── Buy Modal ───────────────────────────────────────────────────────────── */
.buy-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}
.buy-modal-header h2 { margin: 0; font-size: 1.3rem; }
.buy-modal-icon { font-size: 1.4rem; }

.buy-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
}
.buy-step {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    border: 2px solid var(--line);
    display: grid; place-items: center;
    font-weight: 700; font-size: .9rem;
    color: var(--muted);
    flex-shrink: 0;
    transition: all .2s;
}
.buy-step.active {
    background: linear-gradient(135deg, #9b3dff, #c840e0);
    border-color: transparent;
    color: white;
    box-shadow: 0 0 14px rgba(155,61,255,0.4);
}
.buy-step-line {
    flex: 1;
    height: 2px;
    background: var(--line);
}

.buy-section-label {
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    margin-bottom: 8px;
}
.buy-plan-select { width: 100%; margin-bottom: 12px; }

.buy-plan-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: rgba(91,124,255,0.08);
    border: 1px solid rgba(91,124,255,0.2);
    border-radius: 14px;
    margin-bottom: 4px;
    font-size: .9rem;
    color: var(--muted);
}

.buy-continue-btn {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981, #0ca970);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    margin-top: 14px;
    transition: opacity .15s;
}
.buy-continue-btn:hover { opacity: .88; }

.buy-qty-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--line);
    border-radius: 14px;
    margin-bottom: 12px;
}
.buy-qty-label { color: var(--muted); font-size: .9rem; }
.buy-qty-controls {
    display: flex;
    align-items: center;
    gap: 14px;
}
.buy-qty-controls strong { font-size: 1.1rem; min-width: 24px; text-align: center; }
.qty-btn {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(91,124,255,0.15);
    border: 1px solid rgba(91,124,255,0.3);
    color: #a0b8ff;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
}
.qty-btn:hover { background: rgba(91,124,255,0.28); }

.buy-total-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: rgba(16,185,129,0.07);
    border: 1px solid rgba(16,185,129,0.2);
    border-radius: 14px;
    margin-bottom: 12px;
}
.buy-price-green { color: #4ce09f; font-size: 1.15rem; }

.buy-confirm-btn {
    flex: 1;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #10b981, #0ca970);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}
.buy-confirm-btn:hover { opacity: .88; }

/* BUY button on product card */
/* BUY + Cart stacked */
.product-action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 0 14px 14px;
}
.buy-button {
    padding: 11px 14px;
    border-radius: 14px;
    background: rgba(16,185,129,0.18);
    border: 1px solid rgba(16,185,129,0.3);
    color: #6ee7b7;
    font-size: .92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s, transform .1s;
    letter-spacing: .03em;
}
.buy-button:hover { background: rgba(16,185,129,0.28); transform: translateY(-1px); }
.buy-button-disabled {
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--muted);
    cursor: not-allowed;
}
.cart-button {
    padding: 9px 14px;
    border-radius: 14px;
    background: rgba(91,124,255,0.08);
    border: 1px solid rgba(91,124,255,0.2);
    color: #8da8ff;
    font-size: .84rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.cart-button:hover { background: rgba(91,124,255,0.18); }

/* Plans preview (read-only list above BUY button) */
.product-plans-preview {
    display: grid;
    gap: 6px;
    padding: 0 14px;
}
.plan-preview-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: .85rem;
}
.plan-preview-row strong { color: #4ce09f; }

/* cart-button defined above in product-action-row */

/* ── Cart chip in topbar ─────────────────────────────────────────────────── */
.cart-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: rgba(91,124,255,0.12);
    border: 1px solid rgba(91,124,255,0.25);
    border-radius: 999px;
    color: #a0b8ff;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.cart-chip:hover { background: rgba(91,124,255,0.22); }
#cartCount {
    background: #5b7cff;
    color: white;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    padding: 0 5px;
}

/* ── Cart item rows ──────────────────────────────────────────────────────── */
.cart-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 12px;
}
.cart-item-info { display: grid; gap: 3px; }
.cart-item-info strong { font-size: .95rem; }
.cart-item-info span { color: var(--muted); font-size: .82rem; }
.cart-item-right { display: flex; align-items: center; gap: 10px; }
.cart-remove-btn {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(255,91,103,0.12);
    border: 1px solid rgba(255,91,103,0.25);
    color: #fca5a5;
    cursor: pointer;
    font-size: .85rem;
    display: grid; place-items: center;
}
.cart-remove-btn:hover { background: rgba(255,91,103,0.22); }

/* ── Cart result rows ────────────────────────────────────────────────────── */
.cart-result-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
}
.cart-result-ok { background: rgba(16,185,129,0.07); border-color: rgba(16,185,129,0.2); }
.cart-result-fail { background: rgba(255,91,103,0.07); border-color: rgba(255,91,103,0.2); }

/* ── Login page features strip ──────────────────────────────────────────── */
.login-features {
    margin-top: 32px;
    width: min(1120px, 100%);
}
.login-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ── VIP gold badge in login title ─────────────────────────────────────── */
.vip-gold {
    background: linear-gradient(135deg, #f5c842, #e0a800);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: .04em;
}

/* ── Login game image ────────────────────────────────────────────────────── */
.login-game-img {
    width: 100%;
    max-width: 340px;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    margin-bottom: 16px;
}

/* ── Reseller cards (replaces table on all screens) ─────────────────────── */
.reseller-cards { display: grid; gap: 12px; }
.reseller-card {
    padding: 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 16px;
    display: grid;
    gap: 10px;
}
.reseller-card-owner {
    border-color: rgba(91,124,255,0.3);
    background: rgba(91,124,255,0.06);
}
.reseller-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.reseller-card-info { display: grid; gap: 3px; flex: 1; min-width: 0; }
.reseller-card-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.reseller-card-name strong { font-size: 1rem; }
.reseller-card-balance {
    color: #4ce09f;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.reseller-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}
.reseller-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.reseller-card-actions .secondary-button,
.reseller-card-actions .danger-button {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 9px 10px;
    font-size: .82rem;
}

/* ── Purchase history new style ─────────────────────────────────────────── */
.purchase-item-new {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--line);
    border-radius: 14px;
}
.purchase-item-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}
.purchase-status-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
}
.purchase-item-info {
    display: grid;
    gap: 3px;
    min-width: 0;
}
.purchase-item-info strong {
    font-size: .95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.purchase-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.key-icon-btn {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(91,124,255,0.15);
    border: 1px solid rgba(91,124,255,0.3);
    color: #a0b8ff;
    font-size: 1rem;
    cursor: pointer;
    display: grid; place-items: center;
    transition: background .15s;
}
.key-icon-btn:hover { background: rgba(91,124,255,0.28); }
.key-modal-info {
    margin-bottom: 12px;
    color: var(--muted);
    font-size: .9rem;
}

/* ── Filter toggle button ────────────────────────────────────────────────── */
.catalog-toolbar {
    display: flex;
    gap: 12px;
    align-items: center;
}
.filter-toggle-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    color: var(--text);
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
    flex-shrink: 0;
}
.filter-toggle-btn:hover,
.filter-toggle-btn.filter-toggle-active {
    border-color: rgba(91,124,255,0.5);
    background: rgba(91,124,255,0.1);
    color: #a0b8ff;
}
.filter-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
    animation: slideDown .18s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.filter-panel-inner {
    display: grid;
    gap: 16px;
    padding: 18px;
}
.filter-group { display: grid; gap: 8px; }
.filter-group-label {
    font-size: .78rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}
.filter-chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.filter-chip {
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    color: var(--muted);
    font-size: .84rem;
    cursor: pointer;
    transition: all .15s;
}
.filter-chip:hover { border-color: rgba(91,124,255,0.4); color: var(--text); }
.filter-chip.active {
    background: rgba(91,124,255,0.18);
    border-color: rgba(91,124,255,0.45);
    color: #a0c0ff;
    font-weight: 600;
}
.filter-reset-btn {
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(255,91,103,0.1);
    border: 1px solid rgba(255,91,103,0.25);
    color: #fca5a5;
    font-size: .84rem;
    cursor: pointer;
}
.filter-reset-btn:hover { background: rgba(255,91,103,0.2); }

/* ── Mobile topbar-right fix ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .topbar-right {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: flex-end;
    }
    .role-chip {
        padding: 7px 12px;
        font-size: .78rem;
        border-radius: 999px;
        flex-shrink: 0;
    }
    .cart-chip {
        padding: 7px 10px;
        font-size: .8rem;
    }
    button.balance-chip {
        padding: 7px 10px;
        font-size: .8rem;
    }
    .balance-chip {
        padding: 7px 10px;
        font-size: .8rem;
    }
}

/* ── Sticky topbar on mobile ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .topbar {
        position: sticky !important;
        top: 8px !important;
        z-index: 99 !important;
    }
}

/* ── Maintenance overlay on banner ──────────────────────────────────────── */
.maintenance-banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    gap: 10px;
    z-index: 2;
    border-radius: 22px 22px 0 0;
}
.maintenance-banner-icon { font-size: 2.4rem; }
.maintenance-banner-text {
    font-size: 1.1rem;
    font-weight: 900;
    color: white;
    letter-spacing: .14em;
    background: linear-gradient(135deg, #ff5b67, #ff8069);
    padding: 8px 22px;
    border-radius: 999px;
    box-shadow: 0 0 20px rgba(255,91,103,0.5);
}

/* ── Maintenance blur on buy buttons ────────────────────────────────────── */
.maintenance-blur {
    filter: blur(3px);
    pointer-events: none;
    opacity: 0.5;
}

/* ── Topbar single row ───────────────────────────────────────────────────── */
.topbar-single-row {
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.topbar-single-row .top-nav {
    flex-wrap: wrap;
    gap: 6px;
}
.topbar-single-row .topbar-right {
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
}
@media (max-width: 768px) {
    .topbar-single-row { flex-direction: column !important; }
    .topbar-single-row .top-nav { justify-content: center; }
    .topbar-single-row .topbar-right { justify-content: center; }
}

/* ── Slideshow ───────────────────────────────────────────────────────────── */
.slideshow-container {
    position: relative;
    background: #0a1220;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16/9;
}
.slide {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    transform: translateX(100%);
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
}
.slide.active {
    transform: translateX(0);
    pointer-events: auto;
    z-index: 2;
}
.slide.leaving {
    transform: translateX(-100%);
    z-index: 1;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.slideshow-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    align-items: center;
    z-index: 10;
}
.slide-dot {
    width: 20px; height: 4px;
    border-radius: 999px;
    background: rgba(255,255,255,0.35);
    cursor: pointer;
    transition: all .3s ease;
}
.slide-dot.active {
    width: 36px;
    background: white;
    box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
@media (max-width: 768px) {
    .slideshow-container { aspect-ratio: 16/9; border-radius: 14px; }
}

/* ── Cursor fix ──────────────────────────────────────────────────────────── */
button, .buy-button, .cart-button, .filter-chip, .filter-toggle-btn,
.top-nav a, .balance-chip, .cart-chip, .role-chip, .plan-row.interactive,
.purchase-item-new, .reseller-card, .slide-dot, .copy-key-btn,
.copy-history-btn, .key-icon-btn, .qty-btn, .buy-continue-btn,
.buy-confirm-btn, .secondary-button, .danger-button, .primary-gradient,
.cart-remove-btn, .owner-add-button, .filter-reset-btn {
    cursor: pointer !important;
    user-select: none;
}

.product-banner, .product-card, .slideshow-container,
.purchase-item-new, .reseller-card {
    user-select: none;
}

/* ── New topbar with hamburger ───────────────────────────────────────────── */
.topbar-new {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    position: sticky;
    top: 8px;
    z-index: 100;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.brand-logo-img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    object-fit: contain;
    background: transparent;
}
.brand-logo-text {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: .02em;
}

.hamburger-btn {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 1.3rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .15s;
    flex-shrink: 0;
    position: relative;
    z-index: 101;
}
.hamburger-btn:hover { background: rgba(91,124,255,0.15); }

.hamburger-menu {
    position: absolute;
    top: 70px;
    right: 18px;
    width: 260px;
    z-index: 200;
    animation: slideDown .2s ease;
}
.hamburger-menu-inner {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    display: grid;
    gap: 4px;
}
.hamburger-user {
    padding: 8px 10px 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 4px;
}
.hamburger-divider {
    height: 1px;
    background: var(--line);
    margin: 6px 0;
}
.hamburger-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--text);
    font-size: .92rem;
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background .12s;
}
.hamburger-item:hover, .hamburger-item.active {
    background: rgba(91,124,255,0.12);
    color: #a0c0ff;
}
.hamburger-logout {
    color: #fca5a5;
}
.hamburger-logout:hover {
    background: rgba(255,91,103,0.12);
    color: #fca5a5;
}

/* Balance chip still needs id reference for JS */
#balanceChip { display: none; }
#cartChip { display: none; }

/* ── Search + Filter inline row ─────────────────────────────────────────── */
.search-filter-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.search-filter-row .search-shell { flex: 1; }

.filter-icon-btn {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--panel);
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 1.1rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    position: relative;
    transition: background .15s, border-color .15s;
}
.filter-icon-btn:hover,
.filter-icon-btn.filter-toggle-active {
    background: rgba(91,124,255,0.15);
    border-color: rgba(91,124,255,0.4);
}
.filter-icon-btn .filter-active-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5b7cff;
}

/* ── Copyright footer ───────────────────────────────────────────────────── */
.copyright-footer {
    text-align: center;
    padding: 20px;
    color: var(--muted);
    font-size: .78rem;
    opacity: 0.6;
}
.copyright-footer a {
    color: var(--muted);
    text-decoration: none;
}
.copyright-footer a:hover { color: var(--text); }

/* ── Login slideshow ─────────────────────────────────────────────────────── */
.login-slideshow {
    aspect-ratio: 16/9;
    border-radius: 18px;
    margin-top: -10px;
    margin-bottom: 8px;
}
.login-slideshow .slide img {
    object-fit: cover;
    object-position: center center;
}

/* ── Modern login card ───────────────────────────────────────────────────── */
.login-card-modern {
    padding: 32px 28px;
}
.login-logo-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.login-form-modern {
    display: grid;
    gap: 12px;
    margin-top: 20px;
}
.login-field {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 4px 16px 4px 12px;
    transition: border-color .15s;
}
.login-field:focus-within {
    border-color: rgba(91,124,255,0.5);
    background: rgba(91,124,255,0.06);
}
.login-field-icon { font-size: 1.1rem; flex-shrink: 0; }
.login-field input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    padding: 14px 0;
    outline: none;
}
.login-field input::placeholder { color: var(--muted); }
.login-submit-btn {
    width: 100%;
    padding: 15px;
    border-radius: 14px;
    background: linear-gradient(135deg, #5b7cff, #7d5cff);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    margin-top: 4px;
    letter-spacing: .03em;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 4px 20px rgba(91,124,255,0.3);
}
.login-submit-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Modal close fix ─────────────────────────────────────────────────────── */
.modal-card {
    position: relative;
}
.modal-close {
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    z-index: 999 !important;
    background: rgba(21,31,49,0.98) !important;
    border: 1px solid var(--line) !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 1.4rem !important;
    color: #a5b1c8 !important;
    cursor: pointer !important;
}
.modal-card {
    max-height: 88vh;
    overflow-y: auto;
    padding-top: 52px;
}

/* ── Logo shimmer animation ──────────────────────────────────────────────── */
.brand-logo-img {
    animation: logoShimmer 4s ease-in-out infinite;
}
@keyframes logoShimmer {
    0%, 70%  { filter: brightness(1) drop-shadow(0 0 0px transparent); }
    85%      { filter: brightness(1.4) drop-shadow(0 0 10px rgba(192, 132, 252, 0.8)); }
    100%     { filter: brightness(1) drop-shadow(0 0 0px transparent); }
}

/* ── Gradient text animation — Fluorite VIP ──────────────────────────────── */
.brand-logo-text {
    background: linear-gradient(
        90deg,
        #ffffff 0%,
        #c084fc 25%,
        #818cf8 50%,
        #c084fc 75%,
        #ffffff 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 3s linear infinite;
}
.brand-logo-text .vip-gold {
    background: linear-gradient(
        90deg,
        #f5c842 0%,
        #ffd700 25%,
        #ff9500 50%,
        #ffd700 75%,
        #f5c842 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientFlow 3s linear infinite;
}
@keyframes gradientFlow {
    0%   { background-position: 0% center; }
    100% { background-position: 200% center; }
}



.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleAnim .6s linear;
    pointer-events: none;
}
@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .5s ease, transform .5s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Shine efekt te BUY butoni ───────────────────────────────────────────── */
@keyframes buyShine {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.buy-button::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255,255,255,0.25) 50%,
        transparent 60%
    );
    background-size: 200% 100%;
    animation: buyShine 5s ease-in-out infinite;
    border-radius: inherit;
    pointer-events: none;
}
.buy-button {
    position: relative;
    overflow: hidden;
}

/* ── Parallax slideshow ──────────────────────────────────────────────────── */
.slideshow-container {
    overflow: hidden;
}
.slideshow-container .slide img {
    will-change: transform;
    height: 115%;
    top: -7.5%;
    position: relative;
}

/* ── Swipe to Buy ────────────────────────────────────────────────────────── */
.swipe-container {
    user-select: none;
    -webkit-user-select: none;
}
.swipe-track {
    position: relative;
    height: 56px;
    background: rgba(16,185,129,0.1);
    border: 1.5px solid rgba(16,185,129,0.3);
    border-radius: 999px;
    overflow: hidden;
    cursor: grab;
}
.swipe-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(16,185,129,0.3), rgba(16,185,129,0.5));
    border-radius: 999px;
    transition: width .05s linear;
}
.swipe-thumb {
    position: absolute;
    left: 4px; top: 4px;
    width: 48px; height: 48px;
    background: linear-gradient(135deg, #10b981, #0ca970);
    border-radius: 50%;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 15px rgba(16,185,129,0.4);
    cursor: grab;
    transition: left .05s linear;
    z-index: 2;
}
.swipe-thumb:active { cursor: grabbing; }
.swipe-arrow {
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
    animation: arrowPulse 1s ease-in-out infinite;
    line-height: 1;
}
@keyframes arrowPulse {
    0%, 100% { opacity: 1; transform: translateX(0); }
    50%       { opacity: 0.6; transform: translateX(3px); }
}
.swipe-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6ee7b7;
    font-size: .92rem;
    font-weight: 600;
    pointer-events: none;
    letter-spacing: .03em;
}
.swipe-track.swipe-success {
    background: rgba(16,185,129,0.3);
    border-color: rgba(16,185,129,0.6);
}

/* ── Swipe Verify (blue theme) ───────────────────────────────────────────── */
.swipe-track-blue {
    background: rgba(91,124,255,0.1);
    border-color: rgba(91,124,255,0.3);
}
.swipe-fill-blue {
    background: linear-gradient(90deg, rgba(91,124,255,0.3), rgba(91,124,255,0.5));
}
.swipe-thumb-blue {
    background: linear-gradient(135deg, #5b7cff, #7d5cff);
    box-shadow: 0 4px 15px rgba(91,124,255,0.4);
}
.swipe-track-blue .swipe-label { color: #a0b8ff; }
.swipe-track-blue.swipe-success {
    background: rgba(91,124,255,0.25);
    border-color: rgba(91,124,255,0.6);
}

/* ── Verified badge ──────────────────────────────────────────────────────── */
.verified-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    font-size: .65rem;
    font-weight: 800;
    vertical-align: middle;
    margin-left: 5px;
    box-shadow: 0 0 6px rgba(59,130,246,0.5);
}

/* ── Verified badge image ─────────────────────────────────────────────────── */
.verified-badge-img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
    margin-left: 5px;
    filter: drop-shadow(0 0 4px rgba(59,130,246,0.6));
}

/* ── Product name row below banner ───────────────────────────────────────── */
.product-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 0;
    gap: 8px;
}
.product-title {
    margin: 0;
    font-size: 1rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Suspended badge ─────────────────────────────────────────────────────── */
.badge-suspended {
    background: rgba(255,165,0,0.12) !important;
    border-color: rgba(255,165,0,0.3) !important;
    color: #fbbf24 !important;
}

/* ── Reseller card actions — 2 kolona ────────────────────────────────────── */
.reseller-card-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    flex-wrap: unset !important;
}
.reseller-card-actions button {
    width: 100% !important;
    text-align: center !important;
    padding: 10px 4px !important;
    font-size: .78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    flex: unset !important;
    border-radius: 10px !important;
}