:root {
    --bg-primary: #0f0f1e;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #16213e;
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --accent-cyan: #00d9ff;
    --accent-purple: #a855f7;
    --border-color: #2a2a3e;
    --success: #10b981;
    --error: #ef4444;
    --radius: 12px;
    --shadow: 0 10px 40px rgba(0, 217, 255, 0.1);
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode — manual toggle only (see js/theme.js), not tied to OS
   preference, so the site's default identity stays the dark theme it was
   designed around. Same token set, different values, so every component
   that already uses var(--bg-primary) etc. just works without changes. */
:root[data-theme="light"] {
    --bg-primary: #f5f6fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef0f6;
    --text-primary: #16192b;
    --text-secondary: #5b6178;
    --accent-cyan: #0091b3;
    --accent-purple: #7c3aed;
    --border-color: #dde1ec;
    --success: #059669;
    --error: #dc2626;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

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

html {
    scroll-behavior: smooth;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    max-width: 100%;
    overflow-x: hidden;
}

/* Custom scrollbar — themed to match the site's dark/light palette instead
   of the OS default. `scrollbar-color`/`-width` covers Firefox; the
   ::-webkit-scrollbar rules cover Chrome/Edge/Safari. Applied on the root
   scroller (html/body) and any element with `.custom-scroll` (used for
   horizontally-scrolling containers like wide tables). */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-cyan) var(--bg-secondary);
}

/* Set on <body> while the mobile hamburger dropdown is open (js/site.js) so
   the page underneath can't scroll behind it — the dropdown is an overlay,
   not part of normal page flow, once expanded. */
body.mobile-menu-open {
    overflow: hidden;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
    border-radius: 999px;
    border: 2px solid var(--bg-secondary);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

.custom-scroll {
    overflow-x: auto;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Navigation */
.navbar {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 217, 255, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    max-width: 1400px;
    margin: 0 auto;
}

.nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--text-primary);
    transition: color var(--transition);
}

.nav-logo:hover {
    color: var(--accent-cyan);
}

.logo-icon {
    width: 32px;
    height: 32px;
}

.nav-menu {
    display: flex;
    gap: 2rem;
}

.nav-link {
    position: relative;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition);
    font-size: 0.95rem;
}

.nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -6px;
    height: 2px;
    background: var(--accent-cyan);
    transition: right 0.25s ease;
}

.nav-link:hover {
    color: var(--accent-cyan);
}

.nav-link:hover::after {
    right: 0;
}

a,
.a,
.auth-btn,
.btn,
.tag,
.footer-links a,
.footer-socials a {
    text-decoration: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav-actions a {
    text-decoration: none;
}

.auth-control {
    display: flex;
    align-items: center;
}

.nav-search {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.nav-search svg {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    pointer-events: none;
}

.nav-search input {
    width: 150px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 8px 14px 8px 34px;
    color: var(--text-primary);
    font-size: 0.85rem;
    transition: border-color var(--transition), width var(--transition);
}

.nav-search input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    width: 190px;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition), color var(--transition), transform var(--transition);
}

.theme-toggle svg {
    width: 17px;
    height: 17px;
}

.theme-toggle:hover {
    border-color: var(--accent-cyan);
    color: var(--accent-cyan);
    transform: translateY(-1px);
}

.currency-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.currency-switcher-icon {
    position: absolute;
    z-index: 2;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--text-secondary);
    pointer-events: none;
    transition: color var(--transition);
}

.currency-switcher select {
    position: relative;
    z-index: 1;
    appearance: none;
    -webkit-appearance: none;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-primary);
    padding: 8px 30px 8px 34px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300d9ff' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 13px;
    transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.currency-switcher select:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-1px);
}

.currency-switcher:hover .currency-switcher-icon,
.currency-switcher:focus-within .currency-switcher-icon {
    color: var(--accent-cyan);
}

.currency-switcher select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.15);
}

.currency-switcher select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

/* Marker placed at the top of pages that show prices (see js/currency.js
   renderSwitcher) — the switcher no longer lives in the navbar, so it only
   ever appears right above the priced content it actually affects. */
.currency-switcher-slot {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.5rem;
}

.currency-switcher-slot:empty {
    display: none;
}

.auth-btn-outline {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.account-menu {
    display: flex;
    align-items: center;
    gap: 0.9rem;
}

/* Mirrors the account-menu links into the mobile hamburger dropdown; see
   js/auth.js renderAuthControl(). Hidden on desktop, shown at 768px. */
.nav-menu-account {
    display: none;
}

.account-name {
    color: var(--text-secondary);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    display: inline-block;
    vertical-align: middle;
}

.account-menu button.auth-btn-outline {
    font: inherit;
}

#catalogAccountSlot:empty {
    display: none;
}

#catalogAccountSlot .account-chip {
    max-width: none;
}

#catalogAccountSlot .auth-btn-outline {
    padding: 10px 18px;
}

/* Replaces the old "Hi, {username}" text + separate Log Out button: a
   compact nickname + circular avatar chip that links straight to account
   settings (where sign-out now lives). Nicknames are capped at 8 characters
   server-side, and this chip caps the *name column* independently of that so
   even a full-width nickname can never push the navbar layout — the avatar
   circle is a fixed size regardless of what's next to it. */
.account-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 4px 10px 4px 4px;
    border-radius: 999px;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.12));
    color: var(--text-primary);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
    max-width: 190px;
}

.account-chip:hover {
    border-color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.08);
    text-decoration: none;
}

.account-chip-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #05070d;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-chip-name {
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}

.account-chip-mobile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.account-chip-mobile .account-chip-avatar {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
}

.search-toggle, .cart-btn, .auth-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
}

.search-toggle svg, .cart-btn svg {
    width: 24px;
    height: 24px;
}

.search-toggle:hover, .cart-btn:hover, .auth-btn:hover {
    color: var(--accent-cyan);
}

.cart-count {
    background: var(--accent-purple);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
}

.auth-btn {
    padding: 8px 16px;
    border: 1px solid var(--accent-cyan);
    border-radius: var(--radius);
    color: var(--accent-cyan);
    font-weight: 600;
    text-decoration: none;
}

.auth-btn:hover {
    background: rgba(0, 217, 255, 0.1);
    text-decoration: none;
}

.admin-link {
    color: var(--accent-purple);
}

.search-bar {
    padding: 1rem 2rem;
    display: flex;
    gap: 10px;
}

.search-bar input {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 12px 16px;
    color: var(--text-primary);
    font-size: 1rem;
}

.search-bar input::placeholder {
    color: var(--text-secondary);
}

.search-bar input:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

.search-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 1.5rem;
}

.mobile-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-secondary);
    margin: 5px 0;
    transition: background var(--transition);
}

/* Hero Section */
.hero {
    padding: 6rem 2rem;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.hero-cta {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.btn {
    padding: 14px 32px;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-primary);
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 217, 255, 0.3);
}

.btn-secondary {
    background: transparent;
    border: 2px solid var(--accent-cyan);
    color: var(--accent-cyan);
}

.btn-secondary:hover {
    background: rgba(0, 217, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(0, 217, 255, 0.15);
}

.trust-indicators {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color);
}

.trust-item {
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.trust-item strong {
    display: block;
    font-size: 1.5rem;
    color: var(--accent-cyan);
    margin-bottom: 0.5rem;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-graphic {
    width: 100%;
    max-width: 400px;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

.hero-graphic-block {
    transform-origin: center;
    transform-box: fill-box;
    animation: blockPulse 4s ease-in-out infinite;
}

@keyframes blockPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.94); }
}

.hero-graphic-ring {
    transform-origin: 200px 200px;
    animation: ringSpin 18s linear infinite;
}

.hero-graphic-ring-reverse {
    animation-direction: reverse;
    animation-duration: 12s;
}

@keyframes ringSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Features */
.features-section {
    padding: 5rem 2rem 1rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2rem;
}

.feature-card {
    text-align: center;
    padding: 2rem 1.5rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 217, 255, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
}

.feature-card h3 {
    margin-bottom: 0.6rem;
}

.feature-card p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
}

.feature-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 217, 255, 0.08);
    color: var(--accent-cyan);
}

.feature-icon svg {
    width: 28px;
    height: 28px;
}

.feature-icon-bolt {
    animation: boltFlicker 3s ease-in-out infinite;
}

@keyframes boltFlicker {
    0%, 92%, 100% { filter: drop-shadow(0 0 0 transparent); }
    95% { filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.7)); color: #fff; }
}

.feature-icon-check {
    stroke-dasharray: 12;
    stroke-dashoffset: 12;
    animation: drawCheck 2.5s ease-in-out infinite;
}

@keyframes drawCheck {
    0%, 40% { stroke-dashoffset: 12; }
    60%, 100% { stroke-dashoffset: 0; }
}

.feature-icon-code:hover .feature-icon-bracket-left {
    transform: translateX(-3px);
}

.feature-icon-code:hover .feature-icon-bracket-right {
    transform: translateX(3px);
}

.feature-icon-bracket-left,
.feature-icon-bracket-right {
    transition: transform var(--transition);
}

.feature-icon-chat {
    animation: chatBounce 3.5s ease-in-out infinite;
}

@keyframes chatBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Products Grid */
.products-section {
    padding: 6rem 2rem;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
}

.products-toolbar {
    margin-bottom: 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.filters {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

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

.filter-group label {
    font-weight: 600;
    color: var(--text-primary);
}

.filter-group select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 10px 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color var(--transition);
}

.filter-group select:hover,
.filter-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

.product-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow);
}

.product-image {
    width: 100%;
    height: 200px;
    background: var(--bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.product-image svg {
    width: 80%;
    height: 80%;
}

.product-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-category {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin-bottom: 0.5rem;
}

.product-card h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.product-description {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
    flex: 1;
}

.product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    border-top: 1px solid var(--border-color);
    padding-top: 1rem;
}

.product-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.product-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.85rem;
}

.product-rating .stars {
    color: #fbbf24;
}

.add-to-cart-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    border: none;
    border-radius: 8px;
    color: var(--bg-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}

.add-to-cart-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgba(0, 217, 255, 0.3);
}

/* Search Results */
.search-results {
    padding: 4rem 2rem;
    background: var(--bg-secondary);
}

.search-results h2 {
    margin-bottom: 2rem;
}

.search-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 2rem;
}

/* Cart Sidebar */
.cart-sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 400px;
    height: 100vh;
    background: var(--bg-secondary);
    border-left: 1px solid var(--border-color);
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--transition);
}

.cart-sidebar.open {
    transform: translateX(0);
}

.cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-header h3 {
    font-size: 1.3rem;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition);
}

.close-btn:hover {
    color: var(--accent-cyan);
}

.cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.cart-item {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.cart-item-info h4 {
    margin-bottom: 0.5rem;
}

.cart-item-price {
    color: var(--accent-cyan);
    font-weight: 600;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-controls button {
    background: var(--bg-tertiary);
    border: none;
    color: var(--text-primary);
    width: 28px;
    height: 28px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}

.quantity-controls button:hover {
    background: var(--accent-cyan);
    color: var(--bg-primary);
}

.remove-btn {
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    font-weight: 600;
    transition: color var(--transition);
}

.remove-btn:hover {
    color: #dc2626;
}

.cart-footer {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.cart-totals {
    margin-bottom: 1rem;
}

.total-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    color: var(--text-secondary);
}

.total-row.total {
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

/* Modals */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal.active {
    display: flex;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 2rem;
    position: relative;
    max-width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition);
}

.modal-close:hover {
    color: var(--accent-cyan);
}

.modal-product {
    max-width: 900px;
}

.modal-auth {
    max-width: 500px;
}

.modal-checkout {
    max-width: 700px;
}

.modal-account {
    max-width: 800px;
}

.modal-thank-you {
    max-width: 600px;
}

.modal-categories {
    max-width: 800px;
}

/* Form Styles */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Auth Forms */
.auth-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border-color);
}

.auth-tab {
    flex: 1;
    padding: 1rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all var(--transition);
}

.auth-tab.active {
    color: var(--accent-cyan);
    border-bottom-color: var(--accent-cyan);
}

.auth-content {
    display: none;
}

.auth-content.active {
    display: block;
}

.form-error {
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.form-success {
    color: var(--success);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.form-success {
    color: var(--success);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

/* Product Details */
.product-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.product-details-image {
    width: 100%;
    height: 400px;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-details-image svg {
    width: 80%;
    height: 80%;
}

.product-details-info h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

.product-details-category {
    color: var(--accent-purple);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.product-details-rating {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 1rem 0;
    font-size: 0.95rem;
}

.product-details-rating .stars {
    color: #fbbf24;
}

.product-details-price {
    font-size: 2rem;
    color: var(--accent-cyan);
    font-weight: 700;
    margin: 1.5rem 0;
}

.product-details-stats {
    display: flex;
    gap: 2rem;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

.stat {
    flex: 1;
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

.product-details-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.tag {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.product-details-description {
    color: var(--text-secondary);
    line-height: 1.8;
    margin: 1.5rem 0;
}

.product-details-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.product-details-actions button {
    flex: 1;
}

/* Checkout Form */
.checkout-summary {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-tertiary);
    border-radius: var(--radius);
}

.checkout-summary h3 {
    margin-bottom: 1rem;
}

.checkout-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color);
}

.checkout-item-name {
    color: var(--text-secondary);
}

.checkout-item-price {
    color: var(--accent-cyan);
    font-weight: 600;
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid var(--border-color);
    font-size: 1.2rem;
    font-weight: 700;
}

/* Account Area */
.account-header {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.account-user-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.info-item {
    background: var(--bg-tertiary);
    padding: 1.5rem;
    border-radius: var(--radius);
}

.info-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    font-weight: 600;
}

.info-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.orders-section h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
}

.orders-table th {
    background: var(--bg-tertiary);
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border-color);
}

.orders-table td {
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.status-pending {
    background: rgba(251, 191, 36, 0.2);
    color: #fbbf24;
}

.status-paid,
.status-success {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.status-failed,
.status-canceled {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.status-refunded {
    background: rgba(168, 85, 247, 0.2);
    color: var(--accent-purple);
}

/* Thank You Page */
.thank-you-content {
    text-align: center;
    padding: 2rem 0;
}

.thank-you-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.thank-you-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--success);
}

.thank-you-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
}

.next-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    max-width: 900px;
    margin: 0 auto 2rem;
    text-align: left;
}

@media (max-width: 720px) {
    .next-steps-grid {
        grid-template-columns: 1fr;
    }
}

.next-step-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: transform var(--transition), border-color var(--transition);
}

.next-step-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-cyan);
}

.next-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #05070d;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.next-step-card h3 {
    margin-bottom: 0.4rem;
    font-size: 1.05rem;
}

.next-step-card p {
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.btn-small {
    padding: 8px 14px;
    font-size: 0.85rem;
}

.btn-discord {
    background: #5865f2;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
}

.btn-discord:hover {
    background: #4752c4;
    color: #fff;
    text-decoration: none;
}

.order-summary {
    max-width: 480px;
    margin: 0 auto 2rem;
    text-align: left;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 0 1.25rem;
}

.order-number {
    background: var(--bg-tertiary);
    padding: 1rem;
    border-radius: var(--radius);
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
}

.order-number-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.order-number-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent-cyan);
}

/* Sticky Mobile CTA */
.sticky-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem 2rem;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
    z-index: 500;
}

.sticky-mobile-cta button {
    width: 100%;
}

/* Admin Link — styled as a small pill/button (not a plain text link like the
   other nav items) so it reads as a distinct, privileged action rather than
   just one more item crowding the signed-in nav cluster. */
.admin-link {
    padding: 8px 16px !important;
    border: 1px solid var(--accent-purple) !important;
    border-radius: var(--radius);
    color: var(--accent-purple) !important;
    font-size: 0.85rem;
    font-weight: 600;
}

.admin-link::after {
    display: none;
}

/* "Viewing as" indicator — shown in the sticky nav for the whole time an
   admin is impersonating another account (see js/admin.js Impersonate
   button), not just on the page where they clicked it, so it's impossible to
   forget which identity is currently active. */
.impersonation-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid #fbbf24;
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

.impersonation-exit-btn {
    padding: 6px 12px !important;
    font-size: 0.8rem;
    border-color: #fbbf24 !important;
    color: #fbbf24 !important;
}

.impersonation-exit-btn:hover {
    background: rgba(251, 191, 36, 0.12) !important;
}

.navbar-impersonating {
    border-bottom-color: #fbbf24;
    box-shadow: 0 2px 10px rgba(251, 191, 36, 0.15);
}

/* Responsive */
/* Between this and the 768px breakpoint below (which hides .account-menu
   entirely), the signed-in nav cluster is at its most cramped: the 4
   .nav-menu links plus, for an admin, "Hi, name" / "Downloads" / "Admin" /
   "Log out" all share one unwrapped row. Tightening gaps and the container's
   side padding here buys enough room that this middle range doesn't overflow
   before the mobile layout takes over. */
@media (max-width: 1150px) {
    .nav-container {
        padding: 1rem 1.25rem;
    }

    .nav-menu {
        gap: 1.1rem;
    }

    .account-menu {
        gap: 0.5rem;
    }

    .account-name {
        max-width: 90px;
    }
}

@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
    }

    .hero-text h1 {
        font-size: 2.5rem;
    }

    .product-details {
        grid-template-columns: 1fr;
    }

    .trust-indicators {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .nav-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        right: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-color);
        gap: 0;
        max-height: 0;
        padding: 0 1rem;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-8px);
        pointer-events: none;
        transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease, padding 0.3s ease;
    }

    .nav-menu.active {
        max-height: 600px;
        padding: 1rem;
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    .nav-menu .nav-link {
        padding: 0.75rem;
    }

    /* The signed-in account chip / Downloads / Admin cluster is too wide for
       the top bar on narrow screens, so it's hidden here and mirrored into
       the collapsible .nav-menu dropdown instead (see js/auth.js). */
    .nav-actions .account-menu {
        display: none;
    }

    .nav-menu-account {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--border-color);
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }

    .nav-menu-account .nav-link-button {
        background: none;
        border: none;
        width: 100%;
        text-align: left;
        font: inherit;
        cursor: pointer;
        color: var(--text-secondary);
    }

    .mobile-toggle {
        display: flex;
        min-width: 44px;
        min-height: 44px;
        align-items: center;
        justify-content: center;
    }

    .mobile-toggle span {
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .nav-menu.active ~ .nav-actions .mobile-toggle span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .nav-menu.active ~ .nav-actions .mobile-toggle span:nth-child(2) {
        opacity: 0;
    }

    .nav-menu.active ~ .nav-actions .mobile-toggle span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hero-text h1 {
        font-size: 2rem;
    }

    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .cart-sidebar {
        width: 100%;
    }

    .sticky-mobile-cta {
        display: block;
    }

    .hero-cta {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .account-user-info {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .nav-container {
        padding: 1rem;
    }

    .hero-text h1 {
        font-size: 1.5rem;
    }

    .products-grid {
        grid-template-columns: 1fr;
    }

    .modal-content {
        padding: 1.5rem;
    }

    .product-details-image {
        height: 250px;
    }

    .hero-graphic {
        display: none;
    }
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-cyan);
    font-size: 0.76rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem;
}

/* Homepage "Popular Game Libraries" — a fixed 3-column, 2-row layout for
   exactly 6 cards (rather than auto-fit's variable column count), so it
   reads as a deliberate curated set rather than "however many fit". */
.game-grid-popular {
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 900px) {
    .game-grid-popular {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .game-grid-popular {
        grid-template-columns: 1fr;
    }
}

.chip-bestseller {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: rgba(15, 15, 30, 0.75);
    backdrop-filter: blur(4px);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fbbf24;
    margin: 0;
}

.card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.btn-text-link {
    color: var(--accent-cyan);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color var(--transition);
}

.btn-text-link:hover {
    color: var(--accent-purple);
    text-decoration: underline;
}

.section-cta {
    text-align: center;
    margin-top: 2.5rem;
}

.section-cta p {
    margin-top: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.88rem;
}

.game-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}

.game-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent-cyan);
    box-shadow: var(--shadow);
}

.game-splash {
    position: relative;
    height: 170px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: end;
    justify-content: start;
    padding: 1rem;
    overflow: hidden;
}

.game-splash::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 15, 30, 0.12), rgba(15, 15, 30, 0.72));
    z-index: 0;
}

.game-splash::after {
    content: attr(data-game);
    position: relative;
    z-index: 1;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    font-weight: 800;
    color: #fff;
    text-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/*
  Original CSS artwork per game — deliberately not stock photos or game
  screenshots (we don't hold rights to any studio's imagery). Each treatment
  uses that game's own genre and brand colors so the tile is recognizable at
  a glance instead of being an arbitrary, unrelated photo.
*/

.game-splash.arcane,
.game-cover-art.arcane {
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.12) 0 22px, transparent 22px 44px),
        repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.12) 0 22px, transparent 22px 44px),
        linear-gradient(160deg, #6fa83f 0%, #3f6b2b 45%, #6b4a2b 100%);
}

.game-splash.neon,
.game-cover-art.neon {
    background:
        radial-gradient(circle at 28% 24%, rgba(0, 217, 255, 0.4), transparent 55%),
        radial-gradient(circle at 76% 72%, rgba(168, 85, 247, 0.45), transparent 55%),
        linear-gradient(135deg, #1b1035 0%, #2c1a4d 60%, #1a0f2e 100%);
}

.game-splash.ruin,
.game-cover-art.ruin {
    background:
        linear-gradient(135deg, #e74c3c 0 25%, #3498db 25% 50%, #2ecc71 50% 75%, #f1c40f 75% 100%);
}

.game-splash.gta,
.game-cover-art.gta {
    background: linear-gradient(180deg, #2b1055 0%, #7c2f6e 40%, #e0653c 75%, #f7b733 100%);
}

.game-splash.valorant,
.game-cover-art.valorant {
    background:
        linear-gradient(135deg, transparent 47%, rgba(255, 70, 85, 0.55) 49%, rgba(255, 70, 85, 0.55) 51%, transparent 53%),
        linear-gradient(160deg, #1b1b24 0%, #2a0f14 60%, #150a0c 100%);
}

.game-splash.apex,
.game-cover-art.apex {
    background:
        radial-gradient(circle at 72% 28%, rgba(255, 140, 66, 0.5), transparent 50%),
        linear-gradient(145deg, #3a1220 0%, #802d1d 55%, #d2691e 100%);
}

.game-splash.pubg,
.game-cover-art.pubg {
    background:
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0 10px, transparent 10px 20px),
        linear-gradient(160deg, #4b5320 0%, #6b6b3a 50%, #8a8a4a 100%);
}

.game-splash.cod,
.game-cover-art.cod {
    background:
        linear-gradient(100deg, transparent 59%, rgba(220, 38, 38, 0.55) 61%, rgba(220, 38, 38, 0.55) 63%, transparent 65%),
        linear-gradient(160deg, #1a1a1d 0%, #2e2e33 55%, #101012 100%);
}

.game-splash.skyrim,
.game-cover-art.skyrim {
    background: linear-gradient(180deg, #0f2942 0%, #23577e 45%, #6fa8c9 80%, #cfe7f2 100%);
}

/* Fallback treatment for packs created from the admin dashboard, which don't
   have a bespoke hand-picked gradient the way the original nine do. */
.game-splash.custom,
.game-cover-art.custom {
    background:
        radial-gradient(circle at 30% 30%, rgba(0, 217, 255, 0.35), transparent 55%),
        radial-gradient(circle at 75% 70%, rgba(168, 85, 247, 0.4), transparent 55%),
        linear-gradient(150deg, #171730 0%, #232345 55%, #14131f 100%);
}

/* Services line (Discord Bots / Websites / SMM) — same hand-picked treatment
   as the original nine game packs, in their own brand-adjacent palettes. */
.game-splash.bots,
.game-cover-art.bots {
    background:
        radial-gradient(circle at 30% 25%, rgba(88, 101, 242, 0.55), transparent 55%),
        linear-gradient(150deg, #1a1c2e 0%, #232752 55%, #12131f 100%);
}

.game-splash.webdev,
.game-cover-art.webdev {
    background:
        radial-gradient(circle at 72% 30%, rgba(0, 217, 255, 0.4), transparent 55%),
        linear-gradient(150deg, #0d2230 0%, #124054 55%, #0a1620 100%);
}

.game-splash.smm,
.game-cover-art.smm {
    background:
        radial-gradient(circle at 28% 28%, rgba(236, 72, 153, 0.45), transparent 55%),
        radial-gradient(circle at 78% 72%, rgba(251, 146, 60, 0.4), transparent 55%),
        linear-gradient(150deg, #2b1220 0%, #401a2e 55%, #1a0e17 100%);
}

.game-cover-art {
    height: 320px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.game-cover-badge {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    text-transform: uppercase;
    text-align: center;
    padding: 0 1.5rem;
}

.game-card-body {
    padding: 1.5rem;
}

.chip {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    margin-bottom: 0.8rem;
    margin-right: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: rgba(0, 217, 255, 0.08);
    color: var(--accent-cyan);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.chip-new {
    background: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.4);
    color: var(--success);
}

.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 30, 0.55);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: transform var(--transition), background var(--transition), color var(--transition);
}

.wishlist-btn svg {
    width: 17px;
    height: 17px;
}

.wishlist-btn:hover {
    transform: scale(1.1);
    border-color: #ff5c7a;
}

.wishlist-btn.active {
    color: #ff5c7a;
    background: rgba(15, 15, 30, 0.75);
}

.wishlist-btn:active {
    transform: scale(0.92);
}

.card-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.4rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.cta-banner {
    padding: 3rem 2rem 6rem;
}

.cta-banner-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 2rem 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.08), rgba(168, 85, 247, 0.08));
}

.site-footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    padding: 3.5rem 0 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 2.5rem;
    padding-bottom: 3rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 700;
    font-size: 1.1rem;
}

.footer-logo .logo-icon {
    width: 26px;
    height: 26px;
}

.footer-brand p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    max-width: 32ch;
    line-height: 1.6;
}

.footer-socials {
    display: flex;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.footer-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 50%;
    color: var(--text-secondary);
    transition: color var(--transition), border-color var(--transition), transform var(--transition);
}

.footer-socials a svg {
    width: 17px;
    height: 17px;
}

.footer-socials a:hover {
    color: var(--accent-cyan);
    border-color: var(--accent-cyan);
    transform: translateY(-3px);
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.footer-col h4 {
    color: var(--text-primary);
    font-size: 0.8rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}

.footer-col a {
    color: var(--text-secondary);
    font-size: 0.9rem;
    transition: color var(--transition);
    width: fit-content;
}

.footer-col a:hover {
    color: var(--accent-cyan);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.5rem 0;
    border-top: 1px solid var(--border-color);
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 0.82rem;
}

.announcement-banner {
    background: linear-gradient(90deg, var(--accent-cyan), var(--accent-purple));
    color: var(--bg-primary);
    font-weight: 600;
    font-size: 0.9rem;
    animation: bannerSlideDown 0.3s ease both;
}

@keyframes bannerSlideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.announcement-banner-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.7rem 1rem;
    position: relative;
    text-align: center;
}

.announcement-banner-close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--bg-primary);
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity var(--transition);
}

.announcement-banner-close:hover {
    opacity: 1;
}

.maintenance-overlay {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 15, 30, 0.96);
    backdrop-filter: blur(6px);
    animation: fadeIn 0.3s ease both;
}

.maintenance-box {
    text-align: center;
    max-width: 420px;
    padding: 3rem 2rem;
}

.maintenance-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.maintenance-box h1 {
    margin-bottom: 0.75rem;
}

.maintenance-box p {
    color: var(--text-secondary);
}

.page-shell {
    padding: 4rem 2rem 6rem;
}

.page-header {
    max-width: 900px;
    margin: 0 auto 3rem;
    text-align: center;
}

.page-header h1 {
    font-size: clamp(2.3rem, 4vw, 3.4rem);
    margin-bottom: 0.8rem;
}

.page-header p {
    color: var(--text-secondary);
    font-size: 1.06rem;
}

.page-header .tech-stack {
    color: var(--accent-cyan);
    font-size: 0.95rem;
    font-weight: 500;
    margin-bottom: 0.8rem;
    display: block;
}

.breadcrumbs {
    max-width: 1200px;
    margin: 0 auto 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.breadcrumbs a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.cta-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-top: 1rem;
}

.cta-mini-row a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.auth-form-panel {
    max-width: 440px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 2rem;
}

.auth-form-panel .btn {
    width: 100%;
}

.auth-form-panel small {
    display: block;
    margin-top: 0.4rem;
    color: var(--text-secondary);
}

.auth-switch {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.auth-switch a {
    color: var(--accent-cyan);
    text-decoration: none;
}

.thank-you-box,
.not-found-box {
    max-width: 900px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 2rem;
}

/* 404 page — body becomes a full-height column so the slim footer sits at
   the bottom and the message box centers in whatever space is left below
   the fixed navbar, instead of hugging the top of the page. */
.notfound-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.notfound-shell {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(70px + 2rem) 2rem 3rem;
}

.footer-minimal {
    padding: 0;
}

.footer-minimal .footer-bottom {
    border-top: none;
}

.game-cover {
    max-width: 980px;
    margin: 0 auto 2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-secondary);
    box-shadow: var(--shadow);
}

.library-grid,
.script-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.script-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
}

.script-card:hover {
    border-color: rgba(0, 217, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

.script-card:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
}

.script-card.selected {
    border-color: var(--accent-cyan);
    background: rgba(0, 217, 255, 0.05);
}

.script-choice-row {
    cursor: pointer;
}

.script-choice-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.script-choice-row input {
    accent-color: var(--accent-cyan);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.script-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.script-toolbar-actions {
    display: flex;
    gap: 0.75rem;
}

.toolbar-btn {
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}

.toolbar-btn:hover {
    border-color: var(--accent-cyan);
}

.toolbar-btn:active {
    transform: scale(0.96);
}

.script-card h3 {
    margin-bottom: 0.8rem;
}

.script-card p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.script-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.script-price {
    color: var(--accent-cyan);
    font-weight: 700;
}

.script-group-heading {
    margin: 2.5rem 0 1.25rem;
}

.script-group-heading:first-of-type {
    margin-top: 0;
}

.script-group-heading h2 {
    font-size: 1.3rem;
    margin-bottom: 0.35rem;
}

.script-group-heading p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.plan-tag {
    display: inline-block;
    background: rgba(0, 217, 255, 0.15);
    color: var(--accent-cyan);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.page-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.pack-selection-total {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Checkout's three actions (keep shopping / pay with card / pay with
   crypto) render as buttons of very different text length by default —
   this forces them to the same box so none looks like an afterthought. */
.checkout-actions .btn {
    flex: 1 1 200px;
    max-width: 260px;
    text-align: center;
    box-sizing: border-box;
}

.btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.catalog-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.filter-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.filter-box select,
.filter-box input {
    width: 100%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 0.8rem 0.9rem;
}

.tag {
    display: inline-block;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.82rem;
}

/* .catalog-card now reuses the .game-card visual treatment (splash art,
   chip, card-meta) — see games.html/index.html — so it no longer needs its
   own background/padding/typography rules; only .catalog-card stays as a
   pure filter/search hook for js/site.js's bindCatalogFilters(). */

.checkout-box {
    max-width: 800px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    padding: 2rem;
}

.checkout-items {
    margin: 1.5rem 0;
}

.checkout-pack-row {
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
    padding: 1rem;
    margin-bottom: 1rem;
}

.code-preview-toggle {
    display: inline-block;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--accent-cyan);
    font-size: 0.78rem;
    font-family: 'Courier New', monospace;
    padding: 5px 10px;
    margin-bottom: 0.8rem;
    cursor: pointer;
    transition: border-color var(--transition);
}

.code-preview-toggle:hover {
    border-color: var(--accent-cyan);
}

.code-preview {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem;
    margin-bottom: 0.8rem;
    max-height: 220px;
    overflow: auto;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--text-secondary);
}

.star-picker {
    margin: 0.5rem 0;
}

.star-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: var(--border-color);
    cursor: pointer;
    padding: 2px;
    transition: color var(--transition), transform var(--transition);
}

.star-btn.filled {
    color: #fbbf24;
}

.star-btn:hover {
    transform: scale(1.15);
}

.review-comment {
    display: block;
    width: 100%;
    max-width: 500px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 12px;
    color: var(--text-primary);
    font-size: 0.85rem;
    margin-bottom: 0.75rem;
    resize: vertical;
    min-height: 60px;
}

.download-all-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: rgba(0, 217, 255, 0.05);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.download-all-hint {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}

.download-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

.download-info h4 {
    margin-bottom: 0.3rem;
}

.download-info small {
    color: var(--text-secondary);
}

.checkout-pack-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.checkout-pack-header h4 {
    margin-bottom: 0.2rem;
}

.checkout-pack-items {
    display: grid;
    gap: 0.5rem;
}

.checkout-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.checkout-item-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.item-remove-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--error);
    width: 24px;
    height: 24px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    transition: border-color var(--transition), color var(--transition);
}

.item-remove-btn:hover {
    border-color: var(--error);
    color: #dc2626;
}

.checkout-pack-total {
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--accent-cyan);
    text-align: right;
}

.checkout-total {
    display: flex;
    justify-content: space-between;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-size: 1.2rem;
    font-weight: 700;
}

.order-notes-row {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.order-notes-row label {
    font-weight: 600;
    font-size: 0.9rem;
}

.order-notes-row textarea {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
}

.order-notes-row small {
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.promo-row {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.promo-row input {
    flex: 1;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 14px;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.checkout-discount-row {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    color: var(--success);
    font-weight: 600;
}

.checkout-empty {
    color: var(--text-secondary);
    padding: 1rem 0;
}

.security-box {
    margin-top: 2rem;
}

.security-box h2 {
    margin-bottom: 1.5rem;
}

.security-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.security-row h3 {
    margin-bottom: 0.3rem;
}

.security-row p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.security-inline-form {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border-color);
    max-width: 420px;
}

.totp-secret {
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.9rem;
    margin: 0.75rem 0 1.25rem;
    word-break: break-all;
    display: inline-block;
}

.totp-setup-grid {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1.5rem;
    align-items: start;
    margin-bottom: 1.25rem;
}

.totp-setup-grid img {
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: #fff;
    padding: 8px;
}

@media (max-width: 560px) {
    .totp-setup-grid {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }
}

.recovery-codes-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    gap: 0.5rem;
    margin: 1rem 0;
    max-width: 420px;
}

.recovery-codes-list code {
    display: block;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-family: 'Courier New', monospace;
    letter-spacing: 0.04em;
    text-align: center;
}

@media (max-width: 768px) {
    .cta-banner-inner,
    .catalog-toolbar,
    .support-split {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .footer-brand {
        grid-column: 1 / -1;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .support-split {
        display: grid;
        grid-template-columns: 1fr;
    }

    .cta-mini-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Motion: page entrance, card stagger, and micro-interactions */

@media (prefers-reduced-motion: no-preference) {
    @keyframes fadeSlideIn {
        from { opacity: 0; transform: translateY(14px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .hero,
    .page-shell {
        animation: fadeSlideIn 0.5s ease both;
    }

    .game-card,
    .catalog-card,
    .script-card,
    .product-card,
    .checkout-pack-row,
    .support-card {
        animation: fadeSlideIn 0.45s ease both;
    }

    .game-grid > .game-card:nth-child(1), .library-grid > .game-card:nth-child(1) { animation-delay: 0.02s; }
    .game-grid > .game-card:nth-child(2), .library-grid > .game-card:nth-child(2) { animation-delay: 0.06s; }
    .game-grid > .game-card:nth-child(3), .library-grid > .game-card:nth-child(3) { animation-delay: 0.1s; }
    .game-grid > .game-card:nth-child(4), .library-grid > .game-card:nth-child(4) { animation-delay: 0.14s; }
    .game-grid > .game-card:nth-child(5), .library-grid > .game-card:nth-child(5) { animation-delay: 0.18s; }
    .game-grid > .game-card:nth-child(6), .library-grid > .game-card:nth-child(6) { animation-delay: 0.22s; }
    .game-grid > .game-card:nth-child(7), .library-grid > .game-card:nth-child(7) { animation-delay: 0.26s; }
    .game-grid > .game-card:nth-child(8), .library-grid > .game-card:nth-child(8) { animation-delay: 0.3s; }
    .game-grid > .game-card:nth-child(9), .library-grid > .game-card:nth-child(9) { animation-delay: 0.34s; }

    .script-grid > .script-card:nth-child(1) { animation-delay: 0.02s; }
    .script-grid > .script-card:nth-child(2) { animation-delay: 0.05s; }
    .script-grid > .script-card:nth-child(3) { animation-delay: 0.08s; }
    .script-grid > .script-card:nth-child(4) { animation-delay: 0.11s; }
    .script-grid > .script-card:nth-child(5) { animation-delay: 0.14s; }
    .script-grid > .script-card:nth-child(6) { animation-delay: 0.17s; }
    .script-grid > .script-card:nth-child(7) { animation-delay: 0.2s; }
    .script-grid > .script-card:nth-child(8) { animation-delay: 0.23s; }
    .script-grid > .script-card:nth-child(9) { animation-delay: 0.26s; }
    .script-grid > .script-card:nth-child(10) { animation-delay: 0.29s; }
}

.btn,
.auth-btn,
.cart-btn,
.tag,
.category-pill,
.script-choice-row input,
.mobile-toggle,
.remove-btn,
.item-remove-btn {
    transition: transform var(--transition), box-shadow var(--transition), color var(--transition), background var(--transition), border-color var(--transition), opacity var(--transition);
}

.btn:active,
.auth-btn:active,
.item-remove-btn:active,
.remove-btn:active {
    transform: scale(0.96);
}

.cart-btn {
    position: relative;
}

@keyframes cartCountBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.45); }
    100% { transform: scale(1); }
}

.cart-count-bump {
    animation: cartCountBump 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes btnPulse {
    0% { transform: scale(1); }
    40% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.btn-pulse {
    animation: btnPulse 0.32s ease;
}

/* Toast notifications */

.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    max-width: 320px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--accent-cyan);
    border-radius: var(--radius);
    padding: 0.9rem 1.25rem;
    color: var(--text-primary);
    font-size: 0.9rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transform: translateX(24px) scale(0.98);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-visible {
    opacity: 1;
    transform: translateX(0) scale(1);
}

.toast-leaving {
    opacity: 0;
    transform: translateX(24px) scale(0.98);
}

.toast-error {
    border-left-color: var(--error);
}

.toast-success {
    border-left-color: var(--success);
}

@media (max-width: 480px) {
    .toast-container {
        left: 16px;
        right: 16px;
        bottom: 16px;
        align-items: stretch;
    }

    .toast {
        max-width: none;
    }
}

/* Chat widget (js/chat-widget.js) — floating assistant available site-wide */
.sf-chat-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-purple));
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition);
}

.sf-chat-launcher:hover {
    transform: scale(1.08);
}

.sf-chat-panel {
    position: fixed;
    right: 24px;
    bottom: 92px;
    width: min(360px, calc(100vw - 48px));
    height: min(480px, calc(100vh - 140px));
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000;
}

.sf-chat-panel.sf-chat-open {
    display: flex;
}

.sf-chat-header {
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
}

.sf-chat-header button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.sf-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sf-chat-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.sf-chat-msg-user {
    align-self: flex-end;
    background: var(--accent-cyan);
    color: #04121a;
}

.sf-chat-msg-assistant {
    align-self: flex-start;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.sf-chat-msg-error {
    align-self: center;
    color: var(--error);
    font-size: 13px;
}

.sf-chat-input-row {
    display: flex;
    border-top: 1px solid var(--border-color);
}

.sf-chat-input-row input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-primary);
    padding: 12px;
    font-size: 14px;
}

.sf-chat-input-row input:focus {
    outline: none;
}

.sf-chat-input-row button {
    border: none;
    background: var(--accent-purple);
    color: #fff;
    padding: 0 18px;
    cursor: pointer;
    font-size: 14px;
}

.sf-chat-input-row button:disabled {
    opacity: 0.6;
    cursor: default;
}

@media (max-width: 480px) {
    .sf-chat-panel {
        right: 12px;
        left: 12px;
        width: auto;
    }

    .sf-chat-launcher {
        right: 16px;
        bottom: 16px;
    }
}