/* ========== GLOBAL STYLES ========== */
:root {
    --primary: #075b5e;
    --primary-rgb: 7, 91, 94;
    --ink: #17242b;
    --paper: #f4f1ea;
    --success: #198754;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #0dcaf0;
    --dark: #212529;
    --light: #f8f9fa;
}

body {
    font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: radial-gradient(circle at 90% 0, rgba(234, 164, 74, .16), transparent 28rem), var(--paper);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.page-shell { padding-top: 1rem; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:2rem; margin-bottom:1.5rem; }
.page-heading h1 { font-family: Georgia, serif; font-size:clamp(2rem,4vw,3.4rem); line-height:1; margin:.25rem 0 .55rem; letter-spacing:-.04em; }
.page-heading p { color:#66747a; margin:0; max-width:45rem; }
.eyebrow { font-size:.72rem; letter-spacing:.16em; color:var(--primary); font-weight:800; }
.metric-card { position:relative; display:flex; flex-direction:column; min-height:145px; padding:1.35rem; border-radius:18px; background:#fff; color:var(--ink); box-shadow:0 8px 30px rgba(31,45,50,.07); overflow:hidden; }
.metric-card span { color:#758187; font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; }
.metric-card strong { font-family:Georgia,serif; font-size:1.8rem; margin-top:.6rem; }
.metric-card small { color:#899398; }
.metric-card>i { position:absolute; right:1rem; bottom:.5rem; font-size:3.6rem; color:rgba(var(--primary-rgb),.11); }
.data-card { border-radius:18px; overflow:hidden; }
.data-card .card-header { background:#fff; padding:1.1rem 1.25rem; border-bottom:1px solid #edf0f0; }
.data-card .card-header h5 { margin:0; font-family:Georgia,serif; }
.data-card thead th { background:#f8f7f3; padding:1rem; }
.data-card tbody td { padding:1rem; }
.avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:var(--primary); color:#fff; font-weight:800; }
.empty-state { text-align:center; color:#8b9599; padding:3rem!important; }
.empty-state>i { display:block; font-size:2rem; margin-bottom:.5rem; }
.form-card { border-radius:20px; }
.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(245px,1fr)); gap:1.2rem; }
.catalog-card { background:#fff; color:var(--ink); border-radius:20px; overflow:hidden; text-decoration:none; box-shadow:0 8px 30px rgba(31,45,50,.07); transition:.25s ease; }
.catalog-card:hover { color:var(--ink); transform:translateY(-5px); box-shadow:0 15px 38px rgba(31,45,50,.13); }
.catalog-cover { position:relative; height:160px; display:grid; place-items:center; background:linear-gradient(135deg,#d8e4df,#edf0e6); }
.catalog-cover img { width:100%; height:100%; object-fit:cover; }
.catalog-cover>i { font-size:3rem; color:var(--primary); }
.catalog-cover .badge { position:absolute; top:12px; right:12px; }
.catalog-card h5 { font-family:Georgia,serif; margin:.25rem 0; }
.catalog-card p { color:#7a8589; font-size:.9rem; min-height:2.7rem; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.btn-primary { --bs-btn-bg:var(--primary); --bs-btn-border-color:var(--primary); --bs-btn-hover-bg:#06494c; --bs-btn-hover-border-color:#06494c; }

.management-hero { position:relative; display:flex; justify-content:space-between; align-items:center; min-height:185px; padding:2rem 2.25rem; overflow:hidden; color:#fff; border-radius:24px; background:linear-gradient(120deg,#102d32 0%,#075b5e 58%,#1b7771 100%); box-shadow:0 16px 36px rgba(7,91,94,.2); }
.management-hero::after { content:""; position:absolute; width:330px; height:330px; right:-90px; top:-110px; border:1px solid rgba(255,255,255,.15); border-radius:50%; box-shadow:0 0 0 28px rgba(255,255,255,.04),0 0 0 58px rgba(255,255,255,.025); }
.management-hero h1 { position:relative; z-index:1; margin:.35rem 0 .5rem; font:700 clamp(2rem,4vw,3.2rem)/1 Georgia,serif; letter-spacing:-.04em; }
.management-hero p { position:relative; z-index:1; margin:0; color:rgba(255,255,255,.7); max-width:530px; }
.hero-mark { position:relative; z-index:1; display:grid; place-items:center; width:92px; height:92px; border:1px solid rgba(255,255,255,.24); border-radius:26px; color:#f0c477; background:rgba(255,255,255,.08); font-size:3rem; transform:rotate(8deg); }
.mini-stat { position:relative; min-height:118px; padding:1.25rem 1.4rem; overflow:hidden; border:1px solid rgba(23,36,43,.06); border-radius:18px; background:rgba(255,255,255,.86); box-shadow:0 8px 26px rgba(23,36,43,.06); }
.mini-stat span { display:block; color:#77858a; font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.mini-stat strong { display:block; margin-top:.5rem; color:var(--ink); font:700 2rem/1 Georgia,serif; }
.mini-stat strong small { font:600 .8rem 'Trebuchet MS',sans-serif; }
.mini-stat i { position:absolute; right:1.2rem; bottom:.7rem; color:rgba(7,91,94,.14); font-size:3rem; }
.app-loader { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; gap:1rem; background:rgba(13,31,36,.68); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .2s ease, visibility .2s ease; backdrop-filter:blur(8px); }
.app-loader.is-visible { opacity:1; visibility:visible; pointer-events:all; }
.loader-orbit { display:grid; place-items:center; width:62px; height:62px; border:2px solid rgba(240,196,119,.25); border-top-color:#f0c477; border-right-color:#75c7b2; border-radius:50%; color:#fff; font-size:1.35rem; animation:loaderSpin .8s linear infinite; }
.loader-copy { display:flex; flex-direction:column; color:#fff; }
.loader-copy strong { font:700 1.1rem Georgia,serif; letter-spacing:.16em; }
.loader-copy span { color:rgba(255,255,255,.7); font-size:.82rem; margin-top:.25rem; }
@keyframes loaderSpin { to { transform:rotate(360deg); } }

.users-hero { min-height:210px; }
.hero-actions { position:relative; z-index:2; display:flex; gap:.65rem; margin-top:1.25rem; }
.account-stat { position:relative; display:flex; align-items:center; gap:1rem; min-height:125px; padding:1.25rem 1.35rem; overflow:hidden; border-radius:20px; background:#fff; box-shadow:0 10px 28px rgba(23,36,43,.07); }
.account-stat::after { content:""; position:absolute; width:130px; height:130px; right:-36px; bottom:-62px; border-radius:50%; background:rgba(255,255,255,.14); }
.account-stat-teal { color:#fff; background:linear-gradient(135deg,#075b5e,#2b8980); }
.account-stat-blue { color:#fff; background:linear-gradient(135deg,#1c4961,#347b91); }
.account-stat-gold { color:#392a17; background:linear-gradient(135deg,#e2ae62,#f3cf8f); }
.account-stat span { display:block; font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; opacity:.75; }
.account-stat strong { display:block; margin:.35rem 0 .15rem; font:700 2rem/1 Georgia,serif; }
.account-stat strong em { font:600 .75rem 'Trebuchet MS',sans-serif; }
.account-stat small { opacity:.72; font-size:.76rem; }
.stat-symbol { display:grid; place-items:center; flex:none; width:50px; height:50px; border:1px solid rgba(255,255,255,.25); border-radius:15px; background:rgba(255,255,255,.13); font-size:1.35rem; }
.directory-card { overflow:hidden; border:1px solid rgba(23,36,43,.06); border-radius:24px; box-shadow:0 15px 40px rgba(23,36,43,.075); }
.directory-toolbar { display:flex; justify-content:space-between; align-items:center; padding:1.5rem 1.6rem 1.1rem; }
.section-kicker { color:#8a999d; font-size:.68rem; font-weight:800; letter-spacing:.16em; }
.directory-toolbar h2 { margin:.3rem 0 .15rem; font:700 1.7rem/1.15 Georgia,serif; letter-spacing:-.025em; }
.directory-toolbar p { margin:0; color:#879297; font-size:.86rem; }
.directory-tools { display:flex; align-items:center; gap:.6rem; }
.view-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .75rem; color:var(--primary); border:1px solid rgba(7,91,94,.13); border-radius:9px; background:#eff7f5; font-size:.78rem; font-weight:700; }
.role-tabs { display:flex; gap:.3rem; padding:0 1.6rem; border-bottom:1px solid #edf0f0; }
.role-tab { display:inline-flex; align-items:center; gap:.45rem; padding:.8rem 1rem; color:#718084; text-decoration:none; border-bottom:3px solid transparent; font-size:.84rem; font-weight:700; }
.role-tab b { display:grid; place-items:center; min-width:22px; height:22px; border-radius:7px; color:#647277; background:#edf1f0; font-size:.7rem; }
.role-tab:hover, .role-tab.active { color:var(--primary); border-bottom-color:#e2ae62; }
.role-tab.active b { color:#fff; background:var(--primary); }
.directory-filter { padding:1rem 1.6rem; background:#fbfcfb; border-bottom:1px solid #edf0f0; }
.search-field { position:relative; }
.search-field i { position:absolute; z-index:1; top:50%; left:1rem; color:#8a999d; transform:translateY(-50%); }
.search-field .form-control { padding-left:2.6rem; }
.directory-table { padding:0 .6rem; }
.directory-table thead th { padding:1rem .85rem; color:#819095; background:#fff; border-bottom:1px solid #edf0f0; font-size:.68rem; }
.directory-row td { padding:.95rem .85rem; border-bottom:1px solid #f0f3f2; }
.directory-row:last-child td { border-bottom:0; }
.directory-row.is-suspended { opacity:.58; }
.account-cell { display:flex; align-items:center; gap:.75rem; min-width:200px; }
.account-avatar { display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:14px; color:#fff; font-weight:800; }
.avatar-distributor { background:linear-gradient(135deg,#075b5e,#48a396); }
.avatar-customer { background:linear-gradient(135deg,#385c83,#79a7c9); }
.account-cell strong { display:block; color:#223237; font-size:.9rem; }
.account-cell small, .owner-line { display:block; margin-top:.25rem; color:#8b989c; font-size:.72rem; }
.role-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.38rem .6rem; border-radius:8px; font-size:.7rem; font-weight:800; }
.role-distributor { color:#075b5e; background:#e0f2ed; }
.role-customer { color:#385c83; background:#e8f0f8; }
.owner-line { padding-left:.2rem; white-space:nowrap; }
.wallet-cell { min-width:135px; }
.wallet-cell>strong { color:#1e3439; font-size:.86rem; }
.wallet-cell>strong small { color:#8a999d; font-size:.62rem; }
.wallet-track { width:100%; height:5px; margin:.45rem 0 .3rem; overflow:hidden; border-radius:9px; background:#e9efed; }
.wallet-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#075b5e,#e2ae62); }
.credit-note, .muted-note { color:#b37a2d; font-size:.67rem; }
.muted-note { color:#9aa5a8; }
.activity-cell strong { display:block; color:#223237; font:700 1.15rem Georgia,serif; }
.activity-cell small { color:#8a999d; font-size:.68rem; }
.status-chip { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-radius:99px; font-size:.7rem; font-weight:800; }
.status-chip>span { width:7px; height:7px; border-radius:50%; }
.status-active { color:#23765d; background:#e5f5ee; }.status-active>span { background:#35a777; }
.status-off { color:#777e82; background:#eef0f1; }.status-off>span { background:#9ca4a7; }
.action-dock { display:flex; justify-content:flex-end; gap:.3rem; }
.action-btn { display:grid; place-items:center; width:31px; height:31px; color:#6e7d81; border:1px solid #e2e9e7; border-radius:9px; background:#fff; text-decoration:none; transition:.18s ease; }
.action-btn:hover { color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:0 5px 12px rgba(23,36,43,.12); }
.action-view:hover { background:var(--primary); }.action-money:hover { background:#35a777; }.action-edit:hover { background:#347b91; }.action-more:hover { background:#6e7d81; }
.directory-pagination { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.5rem; color:#899598; border-top:1px solid #edf0f0; font-size:.75rem; }
.directory-pagination .pagination { margin:0; }
.directory-pagination .page-link { display:grid; place-items:center; width:32px; height:32px; padding:0; color:#718084; border:0; }
.directory-pagination .page-link.active { color:#fff; background:var(--primary); }
.directory-empty { padding:4rem 1rem; text-align:center; }
.empty-orb { display:grid; place-items:center; width:72px; height:72px; margin:0 auto 1rem; color:var(--primary); border-radius:22px; background:#e4f1ee; font-size:2rem; }
.directory-empty h3 { margin-bottom:.35rem; font:700 1.5rem Georgia,serif; }.directory-empty p { color:#899598; }

/* Customer storefront */
.store-hero { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:270px; padding:2.5rem 3rem; overflow:hidden; color:#fff; border-radius:26px; background:linear-gradient(118deg,#102d32,#075b5e 57%,#1c7771); box-shadow:0 18px 42px rgba(7,91,94,.2); }
.store-hero::before { content:""; position:absolute; width:470px; height:470px; right:-130px; top:-210px; border:1px solid rgba(255,255,255,.14); border-radius:50%; box-shadow:0 0 0 42px rgba(255,255,255,.035),0 0 0 86px rgba(255,255,255,.025); }
.store-hero h1 { position:relative; z-index:1; max-width:680px; margin:.4rem 0 .65rem; font:700 clamp(2.2rem,5vw,4rem)/.98 Georgia,serif; letter-spacing:-.055em; }.store-hero p { position:relative; z-index:1; max-width:570px; color:rgba(255,255,255,.7); font-size:1rem; }.store-hero-art { position:relative; z-index:1; display:flex; align-items:center; gap:.7rem; color:#f0c477; font:700 .8rem/1.1 'Trebuchet MS',sans-serif; letter-spacing:.12em; transform:rotate(-8deg); }.store-hero-art i { font-size:8rem; opacity:.85; }.store-hero-art span { color:rgba(255,255,255,.55); }.store-hero-art b { color:#f0c477; }
.customer-metric { position:relative; display:flex; align-items:center; justify-content:space-between; min-height:115px; padding:1.2rem 1.35rem; overflow:hidden; border-radius:18px; background:#fff; box-shadow:0 8px 24px rgba(23,36,43,.06); }.customer-metric>div { position:relative; z-index:1; }.customer-metric span { display:block; color:#7f8d91; font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }.customer-metric strong { display:block; margin:.4rem 0 .2rem; color:#1c3035; font:700 1.65rem/1 Georgia,serif; }.customer-metric strong small { font:600 .72rem 'Trebuchet MS',sans-serif; }.customer-metric small { color:#8f9a9d; font-size:.72rem; }.customer-metric>i { color:rgba(7,91,94,.12); font-size:3.5rem; }.balance-metric { color:#fff; background:linear-gradient(135deg,#075b5e,#2b8980); }.balance-metric span,.balance-metric strong,.balance-metric small { color:#fff; }.balance-metric span,.balance-metric small { opacity:.7; }.balance-metric>i { color:rgba(255,255,255,.22); }
.store-section,.recent-orders-panel,.products-section { padding:0 .25rem; }.section-intro { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; }.section-intro h2 { margin:.3rem 0 0; font:700 1.8rem/1.1 Georgia,serif; letter-spacing:-.03em; }.section-intro p { margin:.35rem 0 0; color:#899598; }.catalogue-count { color:#7c8b8f; font-size:.78rem; font-weight:700; }
.store-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:1.1rem; }.store-game-card { display:block; overflow:hidden; color:var(--ink); text-decoration:none; border:1px solid rgba(23,36,43,.07); border-radius:20px; background:#fff; box-shadow:0 8px 25px rgba(23,36,43,.055); transition:.25s ease; }.store-game-card:hover { color:var(--ink); transform:translateY(-6px); box-shadow:0 18px 35px rgba(23,36,43,.13); }.store-game-cover { position:relative; display:grid; place-items:center; height:190px; overflow:hidden; background:linear-gradient(135deg,#dce9e4,#f0efe8); }.store-game-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(8,32,36,.22)); }.store-game-cover img { width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }.store-game-card:hover .store-game-cover img { transform:scale(1.06); }.store-game-cover>i { color:var(--primary); font-size:4rem; }.play-pill { position:absolute; z-index:2; right:12px; bottom:12px; display:grid; place-items:center; width:34px; height:34px; color:#123036; border-radius:11px; background:#f0c477; }.store-game-info { display:flex; justify-content:space-between; align-items:center; padding:1.05rem 1.1rem 1.15rem; }.store-game-info small { color:#9aa5a8; font-size:.62rem; font-weight:800; letter-spacing:.13em; }.store-game-info h3 { margin:.3rem 0 .18rem; font:700 1.15rem Georgia,serif; }.store-game-info p { margin:0; color:#899598; font-size:.78rem; }.store-game-info>i { color:#9aa5a8; }
.recent-orders-panel { padding:1.45rem; border:1px solid rgba(23,36,43,.06); border-radius:22px; background:#fff; box-shadow:0 8px 25px rgba(23,36,43,.05); }.order-feed { border-top:1px solid #edf0f0; }.order-feed-row { display:flex; align-items:center; gap:.85rem; padding:1rem .25rem; color:var(--ink); text-decoration:none; border-bottom:1px solid #f0f3f2; transition:.18s ease; }.order-feed-row:hover { padding-left:.55rem; color:var(--primary); background:#fbfdfc; }.order-icon { display:grid; place-items:center; flex:none; width:36px; height:36px; color:var(--primary); border-radius:11px; background:#e4f1ee; }.order-main { min-width:0; flex:1; }.order-main strong,.order-main small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.order-main small { margin-top:.25rem; color:#899598; font-size:.7rem; }.order-total { font-weight:800; white-space:nowrap; }.order-feed-row>i { color:#a4afb1; }
.customer-empty { padding:4rem 1rem; text-align:center; border:1px dashed #cbd9d5; border-radius:20px; background:rgba(255,255,255,.5); }.customer-empty.compact { padding:2.5rem 1rem; border:0; }.customer-empty>i { display:block; margin-bottom:.7rem; color:#75a99c; font-size:3rem; }.customer-empty h3 { font:700 1.45rem Georgia,serif; }.customer-empty p { color:#899598; }
.store-breadcrumb { display:flex; align-items:center; gap:.6rem; margin-bottom:1rem; color:#899598; font-size:.8rem; }.store-breadcrumb a { color:var(--primary); text-decoration:none; font-weight:700; }.store-breadcrumb i { font-size:.65rem; }.game-hero { display:flex; align-items:stretch; min-height:230px; overflow:hidden; color:#fff; border-radius:24px; background:linear-gradient(120deg,#102d32,#075b5e 60%,#347b71); box-shadow:0 15px 36px rgba(7,91,94,.16); }.game-hero-image { display:grid; place-items:center; width:290px; overflow:hidden; background:rgba(0,0,0,.15); }.game-hero-image img { width:100%; height:100%; object-fit:cover; }.game-hero-image>i { font-size:5rem; color:#f0c477; }.game-hero-copy { padding:2rem 2.5rem; }.game-hero-copy h1 { margin:.35rem 0 .55rem; font:700 clamp(2.1rem,4vw,3.3rem)/1 Georgia,serif; }.game-hero-copy p { max-width:620px; color:rgba(255,255,255,.7); }.game-hero-meta { display:flex; flex-wrap:wrap; gap:1rem; margin-top:1.4rem; color:rgba(255,255,255,.78); font-size:.78rem; }.requirements-banner { display:flex; align-items:flex-start; gap:.8rem; margin-bottom:2rem; padding:1rem 1.2rem; color:#355a62; border:1px solid #cbe0df; border-radius:14px; background:#eaf5f3; }.requirements-banner>i { color:var(--primary); font-size:1.4rem; }.requirements-banner p { margin:.2rem 0 0; font-size:.8rem; }.product-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }.premium-product-card { position:relative; display:flex; flex-direction:column; min-height:260px; padding:1.35rem; overflow:hidden; border:1px solid rgba(23,36,43,.07); border-radius:20px; background:#fff; box-shadow:0 8px 25px rgba(23,36,43,.055); transition:.22s ease; }.premium-product-card:hover { transform:translateY(-4px); border-color:rgba(7,91,94,.35); box-shadow:0 16px 32px rgba(23,36,43,.11); }.product-topline { display:flex; justify-content:space-between; align-items:center; color:var(--primary); }.product-topline>i { display:grid; place-items:center; width:34px; height:34px; color:#075b5e; border-radius:10px; background:#e4f1ee; }.product-type { color:#8a999d; font-size:.62rem; font-weight:800; letter-spacing:.12em; }.premium-product-card h3 { margin:1.2rem 0 .4rem; font:700 1.15rem Georgia,serif; }.product-description { min-height:2.5rem; color:#899598; font-size:.78rem; }.product-price { display:flex; align-items:baseline; gap:.35rem; margin:1rem 0; }.product-price strong { color:var(--primary); font:700 2rem Georgia,serif; }.product-price span { color:#899598; font-size:.75rem; font-weight:700; }.product-footer { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:auto; padding-top:1rem; border-top:1px solid #edf0f0; }.product-footer>span { color:#4f8e72; font-size:.7rem; font-weight:700; }.insufficient { color:#a97937!important; }

/* Product shell and interaction polish */
.app-navbar { position:sticky; top:0; z-index:1030; min-height:72px; background:rgba(19,35,40,.96)!important; border-bottom:1px solid rgba(255,255,255,.08); box-shadow:0 8px 24px rgba(19,35,40,.14); backdrop-filter:blur(14px); }
.app-navbar .navbar-brand { display:inline-flex; align-items:center; gap:.55rem; font-family:Georgia,serif; letter-spacing:.16em; font-size:1.05rem; }
.app-navbar .navbar-brand i { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#122429; background:#e6ad63; font-size:1.1rem; }
.app-navbar .nav-link { position:relative; padding:.7rem .85rem!important; color:rgba(255,255,255,.68)!important; font-size:.9rem; transition:color .2s ease, background .2s ease; border-radius:10px; }
.app-navbar .nav-link:hover, .app-navbar .nav-link.active { color:#fff!important; background:rgba(255,255,255,.08); }
.app-navbar .nav-link.active::after { content:""; position:absolute; left:.85rem; right:.85rem; bottom:.25rem; height:2px; border-radius:9px; background:#e6ad63; }
.app-navbar .text-warning { color:#f0c477!important; background:rgba(230,173,99,.08); border-radius:10px; margin-right:.4rem; }
.main-content > .container-fluid.py-3 { max-width:1440px; }
.main-content > .container-fluid:not(.py-3) { max-width:1440px; }
.table { --bs-table-hover-bg:rgba(7,91,94,.045); }
.table thead th { white-space:nowrap; font-size:.72rem; letter-spacing:.08em; }
.table tbody tr { transition:background .18s ease, transform .18s ease; }
.table tbody tr:hover { transform:translateX(2px); }
.form-control, .form-select { background-color:rgba(255,255,255,.86); min-height:44px; }
.form-control:focus, .form-select:focus { border-color:#e0a75d; box-shadow:0 0 0 .22rem rgba(224,167,93,.18); }
.btn { transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform:translateY(-1px); box-shadow:0 6px 15px rgba(23,36,43,.11); }
.badge { letter-spacing:.02em; }
.footer { background:#132328!important; border-top:4px solid #e6ad63; }
.footer h5 { font-family:Georgia,serif; letter-spacing:.12em; }
.alert { box-shadow:0 8px 22px rgba(23,36,43,.06); }
.card-header { border-bottom-color:#edf0f0; }
.pagination .page-link { border-radius:9px!important; margin:0 .15rem; }

.main-content {
    flex: 1;
}

/* ========== LOGIN PAGE ========== */
.login-page {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.login-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    padding: 40px 30px;
    text-align: center;
}

.logo-container {
    font-size: 48px;
    margin-bottom: 10px;
}

.brand-title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
}

.brand-subtitle {
    font-size: 14px;
    opacity: 0.9;
    margin: 5px 0 0 0;
}

.login-body {
    padding: 35px 30px;
}

.btn-login {
    padding: 14px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
}

.login-help {
    padding-top: 15px;
    border-top: 1px solid #e9ecef;
}

/* ========== CARDS ========== */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.stat-card {
    border-left: 4px solid var(--primary);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

/* ========== BALANCE CARD ========== */
.balance-card {
    background: linear-gradient(135deg, #0d6efd 0%, #0099ff 100%);
    border: none;
    color: white;
}

.balance-icon {
    font-size: 42px;
    opacity: 0.3;
}

.balance-card-mini {
    border: none;
    border-radius: 12px;
}

/* ========== GAME CARDS ========== */
.game-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 2px solid transparent;
    transition: all 0.3s;
    cursor: pointer;
    text-decoration: none !important;
    color: inherit;
}

.game-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(13, 110, 253, 0.15);
}

.game-icon {
    font-size: 40px;
    color: var(--primary);
    margin-bottom: 12px;
}

.game-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 4px;
}

.game-products {
    font-size: 12px;
    color: #6c757d;
}

.game-arrow {
    margin-top: 10px;
    color: #adb5bd;
    font-size: 14px;
}

/* ========== PRODUCT CARDS ========== */
.product-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e9ecef;
    transition: all 0.2s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    border-color: var(--primary);
    box-shadow: 0 4px 16px rgba(13, 110, 253, 0.1);
}

.product-header {
    margin-bottom: 15px;
}

.product-name {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 8px;
}

.product-badge {
    margin-bottom: 10px;
}

.product-pricing {
    margin-bottom: 15px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    text-align: center;
}

.price-dzd {
    margin-top: 5px;
}

.price-amount {
    font-size: 28px;
    font-weight: 800;
    color: var(--primary);
}

.price-currency {
    font-size: 16px;
    color: #6c757d;
    font-weight: 500;
}

.product-action {
    margin-top: auto;
}

/* ========== STATUS BADGES ========== */
.status-completed {
    background-color: #d1edff !important;
    color: #0a3622 !important;
}

.status-pending_review {
    background-color: #fff3cd !important;
    color: #664d03 !important;
}

.status-failed {
    background-color: #f8d7da !important;
    color: #58151c !important;
}

.status-processing {
    background-color: #cff4fc !important;
    color: #055160 !important;
}

.status-pending {
    background-color: #e2e3e5 !important;
    color: #41464b !important;
}

/* ========== PURCHASE PAGE ========== */
.purchase-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.purchase-summary {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
}

.total-preview {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
    border: 2px solid var(--primary);
    border-radius: 10px;
}

/* ========== ORDER DETAIL ========== */
.order-detail-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}

.pubg-code-section {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    padding: 20px;
    border-radius: 12px;
    border: 2px dashed var(--success);
}

.code-display {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.code-text {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 2px;
    background: white;
    padding: 10px 20px;
    border-radius: 8px;
    flex: 1;
    text-align: center;
}

/* ========== PROFILE ========== */
.profile-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.profile-avatar {
    font-size: 80px;
    color: var(--primary);
    line-height: 1;
}

/* ========== ERROR PAGE ========== */
.error-page {
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-container {
    text-align: center;
    padding: 40px;
}

.error-icon {
    font-size: 80px;
    color: var(--danger);
    margin-bottom: 20px;
}

.error-code {
    font-size: 72px;
    font-weight: 800;
    color: var(--dark);
    margin: 0;
}

.error-title {
    font-size: 24px;
    color: #6c757d;
    margin: 10px 0;
}

.error-message {
    font-size: 16px;
    color: #adb5bd;
    margin-bottom: 30px;
}

/* ========== NAVBAR ========== */
.navbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-size: 22px;
    letter-spacing: 1px;
}

/* ========== FOOTER ========== */
.footer {
    margin-top: auto;
}

/* ========== TABLE STYLES ========== */
.table {
    font-size: 14px;
}

.table th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.5px;
    color: #6c757d;
}

/* ========== PAGINATION ========== */
.pagination .page-link {
    border: none;
    color: var(--primary);
    font-weight: 500;
}

.pagination .page-item.active .page-link {
    background-color: var(--primary);
    border-radius: 8px;
}

/* ========== BREADCRUMB ========== */
.breadcrumb {
    background: none;
    padding: 0;
    font-size: 14px;
}

/* ========== ALERTS ========== */
.alert {
    border: none;
    border-radius: 10px;
}

/* ========== BUTTONS ========== */
.btn {
    border-radius: 8px;
    font-weight: 500;
}

.btn-group .btn {
    border-radius: 6px !important;
}

/* ========== FORM CONTROLS ========== */
.form-control, .form-select {
    border-radius: 8px;
    border: 1px solid #dee2e6;
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.form-floating > .form-control {
    border-radius: 10px;
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card {
    animation: fadeIn 0.3s ease-out;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .page-heading { align-items:flex-start; flex-direction:column; gap:1rem; }
    .page-heading .btn { width:100%; }
    .app-navbar .navbar-nav { padding-top:.5rem; }
    .app-navbar .nav-link.active::after { display:none; }
    .page-shell { padding-left:.75rem; padding-right:.75rem; }
    .table { min-width:720px; }
    .card-header { gap:.75rem; }
    .management-hero { min-height:160px; padding:1.5rem; }
    .hero-mark { width:62px; height:62px; font-size:2rem; border-radius:18px; }
    .directory-toolbar { align-items:flex-start; flex-direction:column; gap:1rem; }
    .directory-tools { width:100%; justify-content:space-between; }
    .role-tabs { overflow-x:auto; padding:0 .75rem; }
    .role-tab { white-space:nowrap; }
    .directory-filter { padding:1rem .75rem; }
    .hero-actions { flex-wrap:wrap; }
    .store-hero { min-height:300px; padding:1.7rem; }.store-hero-art { position:absolute; right:-1rem; bottom:-1rem; opacity:.55; }.store-hero-art i { font-size:6rem; }.game-hero { flex-direction:column; }.game-hero-image { width:100%; height:145px; }.game-hero-copy { padding:1.5rem; }.section-intro { align-items:flex-start; flex-direction:column; }.order-feed-row { flex-wrap:wrap; }.order-feed-row .order-total { margin-left:3rem; }.product-grid { grid-template-columns:1fr; }
    .brand-title {
        font-size: 24px;
    }
    
    .price-amount {
        font-size: 22px;
    }
    
    .stat-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .game-card {
        padding: 15px;
    }
    
    .game-icon {
        font-size: 30px;
    }
}
.game-card {
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 0;
    transition: all 0.3s ease;
    background: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.game-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
    border-color: #0d6efd;
}

.game-image-wrapper {
    width: 100%;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 15px;
}

.game-image {
    max-width: 100%;
    max-height: 130px;
    object-fit: contain;
    border-radius: 8px;
}

.game-info {
    padding: 15px;
    text-align: center;
    flex-grow: 1;
}

.game-title {
    font-weight: 700;
    color: #212529;
    margin-bottom: 5px;
    font-size: 1rem;
}

.game-products {
    color: #6c757d;
    font-size: 0.85rem;
}

.game-arrow {
    display: none;
}

.analytics-strip { display:flex; align-items:center; gap:1.3rem; min-height:150px; padding:1.2rem; overflow:hidden; border-radius:22px; color:#fff; background:linear-gradient(120deg,#102d32,#075b5e 62%,#347b71); box-shadow:0 15px 34px rgba(7,91,94,.16); }.analytics-cover { display:grid; place-items:center; flex:none; width:122px; height:122px; overflow:hidden; border-radius:17px; background:rgba(0,0,0,.16); }.analytics-cover img { width:100%; height:100%; object-fit:cover; }.analytics-cover i { color:#f0c477; font-size:3.2rem; }.analytics-intro { flex:1; }.analytics-intro h2 { margin:.55rem 0 .25rem; font:700 1.75rem Georgia,serif; }.analytics-intro p { margin:0; color:rgba(255,255,255,.67); font-size:.82rem; }.pill-live { display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; color:#173b36; border-radius:99px; background:#b9e6d4; font-size:.68rem; font-weight:800; }.pill-live i { font-size:.42rem; }.analytics-quick { min-width:165px; padding:1rem; border-left:1px solid rgba(255,255,255,.16); }.analytics-quick span,.analytics-quick small { display:block; color:rgba(255,255,255,.55); font-size:.68rem; }.analytics-quick strong { display:block; margin:.4rem 0; font:700 1.3rem Georgia,serif; }.analytics-kpi { position:relative; min-height:112px; padding:1.15rem; overflow:hidden; border-radius:17px; background:#fff; box-shadow:0 8px 24px rgba(23,36,43,.06); }.analytics-kpi span { color:#849195; font-size:.69rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.analytics-kpi strong { display:block; margin-top:.45rem; color:#20363b; font:700 1.75rem Georgia,serif; }.analytics-kpi strong small { font:600 .68rem 'Trebuchet MS',sans-serif; }.analytics-kpi>i { position:absolute; right:1rem; bottom:.45rem; color:rgba(7,91,94,.13); font-size:2.9rem; }.analytics-kpi-gold { background:linear-gradient(135deg,#e2ae62,#f3cf8f); }.analytics-kpi-gold span,.analytics-kpi-gold strong { color:#392a17; }.chart-card { min-height:320px; overflow:hidden; border-radius:20px; }.chart-card .card-header { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.3rem; }.chart-card h5 { margin:.25rem 0 0; font:700 1.1rem Georgia,serif; }.chart-caption { color:#829095; font-size:.75rem; }.price-highlight { color:var(--primary); }.price-index { display:inline-flex; padding:.35rem .5rem; color:#77878a; border-radius:7px; background:#f2f6f5; font-size:.7rem; font-weight:700; }
@media (max-width: 768px) { .analytics-strip { align-items:flex-start; flex-wrap:wrap; padding:1rem; }.analytics-cover { width:75px; height:75px; }.analytics-intro h2 { font-size:1.35rem; }.analytics-quick { width:100%; border-top:1px solid rgba(255,255,255,.16); border-left:0; }.chart-card { min-height:280px; } }

/* Checkout finish */
.purchase-experience { overflow:hidden; border:0; box-shadow:0 18px 42px rgba(23,36,43,.1); }
.purchase-experience .card-header { padding:1.25rem 1.5rem; }
.purchase-experience .card-body { padding:2rem!important; }
.checkout-product { display:flex; align-items:center; gap:1rem; padding:1.1rem; border-radius:16px; background:#f0f7f4; }
.checkout-product::before { content:'OFFRE SELECTIONNEE'; display:grid; place-items:center; width:48px; height:48px; color:#fff; border-radius:14px; background:var(--primary); font-size:.55rem; font-weight:800; text-align:center; }
.checkout-product h5 { margin-bottom:.2rem; font:700 1.25rem Georgia,serif; }
.checkout-product h3 { margin:0; color:var(--primary); font:700 1.8rem Georgia,serif; }
.checkout-product p { margin-bottom:.35rem; }
.purchase-experience .form-control { background:#fff; }
.purchase-experience .total-preview { padding:1rem!important; border:1px solid rgba(7,91,94,.15); background:#f7fbf9!important; }
.purchase-experience button[type="submit"], .purchase-experience button[type="button"] { min-height:52px; font-weight:800; letter-spacing:.01em; }
.requirement-panel { padding:1.2rem; border:1px solid #cde1dd; border-radius:17px; background:#f1f8f6; }.requirement-panel>div>i { display:grid; place-items:center; width:38px; height:38px; color:#fff; border-radius:11px; background:var(--primary); }.requirement-panel h5 { margin:.1rem 0 .25rem; font:700 1.05rem Georgia,serif; }.requirement-panel p { margin:0; color:#7b8b8f; font-size:.78rem; }.requirement-option { display:flex; align-items:center; gap:.7rem; height:100%; padding:.8rem; border:1px solid #d9e6e2; border-radius:12px; background:#fff; cursor:pointer; transition:.18s ease; }.requirement-option:hover { border-color:#75a99c; box-shadow:0 5px 13px rgba(7,91,94,.08); }.requirement-option input:checked + span { color:var(--primary); }.requirement-option span { display:flex; flex-direction:column; }.requirement-option strong { font-size:.8rem; }.requirement-option small { margin-top:.2rem; color:#899598; font-size:.68rem; }