@charset "UTF-8";
:root {
    color-scheme:dark;
    --bg:#090a11;
    --primary:#ad51ff;
    --primary-dark:#7022db;
    --lime:#c1ff37;
    --success:#36ed92;
    --warning:#f4c84b;
    --danger:#ff6a82;
    --text-primary:#f5f4fb;
    --text-secondary:#bbbad3;
    --text-dim:#83839f;
    --border-subtle:#28273e;
    --radius-sm:8px;
    --sidebar-width:244px;
    font:14px Inter,"Segoe UI",Arial,sans-serif
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text-primary);
    line-height:1.5;
    -webkit-font-smoothing:antialiased
}
body::before {
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background:radial-gradient(ellipse at 87% -15%,#6b1be123,transparent 44%),radial-gradient(ellipse at 100% 110%,#6115bd16,transparent 40%)
}
button,input,select,textarea {
    font:inherit
}
button {
    cursor:pointer
}
button:disabled {
    opacity:.5;
    cursor:wait
}
a {
    color:inherit;
    text-decoration:none
}
button,h1,h2,h3,h4,p,dl,dd {
    margin:0
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible {
    outline:2px solid var(--lime);
    outline-offset:4px
}
::selection {
    background:#8b32dc;
    color:#fff
}
::-webkit-scrollbar {
    width:6px;
    height:6px
}
::-webkit-scrollbar-thumb {
    background:#3e365a;
    border-radius:8px
}
.icon {
    width:20px;
    height:20px;
    flex-shrink:0;
    fill:none;
    stroke:currentColor;
    stroke-width:1.65;
    stroke-linecap:round;
    stroke-linejoin:round;
    vertical-align:middle
}
.icon-sprite {
    position:absolute;
    width:0;
    height:0;
    overflow:hidden
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.skip-link {
    position:fixed;
    top:-80px;
    left:16px;
    padding:12px 20px;
    background:var(--lime);
    color:#111;
    z-index:100;
    border-radius:8px
}
.skip-link:focus {
    top:12px
}
.sidebar {
    position:fixed;
    z-index:30;
    inset:0 auto 0 0;
    width:var(--sidebar-width);
    display:flex;
    flex-direction:column;
    padding:18px 13px 0;
    border-right:1px solid #39234e;
    background:radial-gradient(ellipse at 0 100%,#6e1bdd1f,transparent 55%),#0b0c16
}
.sidebar::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(130deg,transparent 65%,#6e21c811 65%,transparent 78%);
    pointer-events:none
}
.brand-section {
    display:flex;
    align-items:center;
    flex-direction:column;
    position:relative;
    margin:0 0 26px
}
.brand-logo {
    width:160px;
    height:142px;
    object-fit:contain
}
.brand-badge {
    display:inline-flex;
    align-items:center;
    padding:3px 13px;
    background:#7118bf24;
    border:1px solid #842fe07a;
    border-radius:20px;
    color:#e9d4ff;
    font-size:10px;
    font-weight:700;
    letter-spacing:.8px
}
.nav-menu {
    display:flex;
    flex-direction:column;
    gap:10px;
    position:relative
}
.nav-item {
    position:relative;
    display:flex;
    align-items:center;
    gap:15px;
    min-height:53px;
    padding:12px 17px;
    width:100%;
    text-align:left;
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:#c3c1df;
    font-size:13px;
    transition:background .18s,color .18s
}
.nav-item .icon {
    width:24px;
    height:24px
}
.nav-item:hover {
    background:#8c3bff10;
    color:#fff
}
.nav-item.active {
    background:linear-gradient(110deg,#6d08cc,#400e87);
    border-color:#9c3bff82;
    color:#fff;
    box-shadow:inset 0 0 22px #a123f626,0 5px 24px #6100b91a;
    font-weight:600
}
.nav-item.active::before {
    content:"";
    position:absolute;
    inset:0 auto 0 -1px;
    width:4px;
    border-radius:8px 0 0 8px;
    background:var(--lime);
    box-shadow:0 0 12px #b9fa3544
}
.sidebar-footer {
    margin-top:auto;
    padding-top:36px;
    position:relative
}
.system-status {
    display:flex;
    align-items:center;
    gap:12px;
    padding:17px 10px;
    border-top:1px solid var(--border-subtle)
}
.status-dot {
    width:9px;
    height:9px;
    background:var(--text-dim);
    border-radius:50%;
    box-shadow:0 0 0 5px #88889d14;
    flex-shrink:0
}
.system-status[data-state="online"] .status-dot {
    background:var(--success);
    box-shadow:0 0 0 5px #24eb8b15,0 0 14px #24eb8b28
}
.system-status[data-state="offline"] .status-dot {
    background:var(--danger)
}
.system-status strong {
    display:block;
    font-size:12px;
    font-weight:500
}
.system-status span:not(.status-dot) {
    display:block;
    font-size:10px;
    color:var(--text-dim);
    margin-top:2px
}
.admin-profile {
    display:flex;
    gap:11px;
    align-items:center;
    padding:17px 6px 21px;
    border-top:1px solid var(--border-subtle)
}
.admin-avatar {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex-shrink:0;
    background:radial-gradient(circle at 35% 20%,#9d4ee8,#2b0e4a 75%);
    border:1px solid #a04ee1;
    border-radius:50%;
    color:var(--lime);
    font-size:14px;
    font-weight:800;
    box-shadow:0 0 0 4px #9d4ae312
}
.admin-profile strong {
    display:block;
    font-size:12px
}
.admin-profile span {
    color:var(--text-dim);
    display:block;
    font-size:11px;
    margin-top:2px
}
.admin-profile .icon-button {
    margin-left:auto
}
.main-wrapper {
    margin-left:var(--sidebar-width);
    min-height:100vh;
    padding:27px 28px 30px;
    outline:none
}
.topbar {
    display:flex;
    justify-content:space-between;
    gap:18px;
    align-items:center;
    margin-bottom:23px
}
.breadcrumb {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    color:var(--text-dim);
    margin-bottom:8px
}
.breadcrumb-slash {
    color:#55536e
}
#breadcrumbCurrent {
    color:#e8e4f7;
    font-weight:500
}
.page-title {
    font-size:34px;
    font-weight:730;
    line-height:1.15;
    letter-spacing:-.9px
}
.page-subtitle {
    font-size:13px;
    color:var(--text-secondary);
    margin-top:8px
}
.topbar-actions {
    display:flex;
    gap:10px;
    align-items:center;
    flex-shrink:0
}
.date-chip {
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:11px 12px;
    border:1px solid var(--border-subtle);
    background:#0e0e19b3;
    border-radius:8px;
    font-size:12px;
    white-space:nowrap
}
.date-chip .icon {
    width:16px;
    height:16px;
    color:var(--text-secondary)
}
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:42px;
    padding:10px 17px;
    border:1px solid transparent;
    border-radius:8px;
    font-size:12px;
    font-weight:600;
    white-space:nowrap;
    transition:filter .18s,background .18s,border-color .18s
}
.btn-primary {
    color:#182009;
    background:var(--lime);
    border-color:#d1ff75;
    box-shadow:0 0 22px #b2ff2c12
}
.btn-primary:hover {
    filter:brightness(1.09);
    box-shadow:0 0 22px #b2ff2c25
}
.btn-secondary {
    color:#e3def6;
    background:#12111f;
    border-color:#4e426f
}
.btn-secondary:hover {
    background:#211333;
    border-color:#9d51e3
}
.btn-danger {
    color:var(--danger);
    background:#fc5b7f12;
    border-color:#fc5b7f3b
}
.btn-danger:hover {
    background:#fc5b7f26
}
.btn-sm {
    padding:6px 10px;
    min-height:30px;
    font-size:10px
}
.btn-sm .icon {
    width:14px;
    height:14px
}
.icon-button,.text-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:none;
    border:0;
    color:var(--primary)
}
.icon-button {
    width:32px;
    height:32px;
    border-radius:7px;
    color:var(--text-secondary);
    flex-shrink:0
}
.icon-button:hover {
    background:#9539ef1c;
    color:#fff
}
.text-button {
    padding:4px 0;
    font-size:11px;
    font-weight:500
}
.text-button .icon {
    width:16px;
    height:16px
}
.text-button:hover {
    color:#d5a0ff
}
.mobile-menu,.sidebar-scrim {
    display:none
}
.tab-pane {
    display:none
}
.tab-pane.active {
    display:block;
    animation:fade-in .2s ease
}
@keyframes fade-in {
    from {
        opacity:.4;
        transform:translateY(3px)
    }
    to {
        opacity:1;
        transform:translateY(0)
    }
}
.metrics-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:14px;
    margin-bottom:18px
}
.metric-card {
    position:relative;
    display:flex;
    align-items:center;
    gap:16px;
    padding:19px 17px;
    min-height:109px;
    border:1px solid #3e3159;
    border-radius:10px;
    background:linear-gradient(120deg,#16112066,#0b0d18cc);
    overflow:hidden
}
.metric-icon {
    display:grid;
    place-items:center;
    color:#ad47ff;
    background:radial-gradient(circle at 50% 50%,#6e15d158,#4d00af30);
    width:51px;
    height:54px;
    flex-shrink:0;
    border:1px solid #7422c780;
    border-radius:9px;
    box-shadow:0 0 20px #7700ff14,inset 0 0 16px #5d03aa2b
}
.metric-icon .icon {
    width:29px;
    height:29px;
    filter:drop-shadow(0 0 5px #ae29ff60)
}
.metric-content {
    position:relative;
    z-index:1;
    min-width:0
}
.metric-title {
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.25px;
    color:var(--text-secondary);
    font-weight:500
}
.metric-value {
    font-size:29px;
    line-height:1.25;
    letter-spacing:-.5px;
    font-weight:730;
    margin:3px 0;
    font-variant-numeric:tabular-nums;
    white-space:nowrap
}
#statRevenue {
    font-size:clamp(20px,1.9vw,29px)
}
.metric-sub {
    font-size:10px;
    color:var(--text-dim)
}
.metric-accent {
    position:absolute;
    right:-20px;
    bottom:-30px;
    width:110px;
    height:70px;
    border-radius:50%;
    background:#7b22dd11;
    filter:blur(15px)
}
.overview-grid {
    display:grid;
    grid-template-columns:minmax(0,1.85fr) minmax(295px,1fr);
    gap:16px;
    align-items:start
}
.panel-card {
    min-width:0;
    border:1px solid #35294e;
    border-radius:11px;
    background:linear-gradient(125deg,#12111e9c,#0b0d18d9);
    padding:17px
}
.panel-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:15px
}
.panel-card-title {
    display:flex;
    gap:11px;
    align-items:center;
    font-size:16px;
    font-weight:650;
    letter-spacing:-.25px
}
.panel-card-title>.icon {
    color:var(--primary);
    width:23px;
    height:23px;
    filter:drop-shadow(0 0 6px #8f27ff44)
}
.panel-actions {
    display:flex;
    gap:13px;
    align-items:center
}
.panel-actions .muted {
    border-right:1px solid var(--border-subtle);
    padding-right:13px
}
.muted {
    font-size:10px;
    color:var(--text-dim);
    white-space:nowrap
}
.catalog-panel {
    grid-column:1;
    grid-row:1
}
.activity-panel {
    grid-column:2;
    grid-row:1
}
.recent-panel {
    grid-column:1;
    grid-row:2
}
.stock-summary {
    grid-column:2;
    grid-row:2
}
.table-responsive {
    overflow-x:auto;
    width:100%;
    border:1px solid #25243b;
    border-radius:8px;
    scrollbar-width:thin
}
.table-custom {
    width:100%;
    border-collapse:collapse;
    font-size:11px;
    text-align:left
}
.table-custom th {
    padding:9px 13px;
    background:#171729;
    font-size:10px;
    font-weight:500;
    color:#c1bbde;
    white-space:nowrap
}
.table-custom td {
    padding:12px 13px;
    border-top:1px solid #26243b;
    color:#cac7df;
    white-space:nowrap
}
.table-custom tr:hover td {
    background:#7533b708
}
.table-custom td strong {
    color:#eeeafa;
    font-weight:600
}
.catalog-table td {
    padding:7px 10px;
    height:66px
}
.catalog-table th {
    padding:9px 10px
}
.catalog-table th:nth-child(3),.catalog-table th:nth-child(4),.catalog-table td:nth-child(3),.catalog-table td:nth-child(4) {
    text-align:center
}
.catalog-table td:nth-child(3),.catalog-table td:nth-child(4) {
    font-size:14px;
    font-weight:650;
    color:#f2edff
}
.catalog-table tr.featured {
    background:linear-gradient(90deg,#51158a3d,#651f9a19);
    box-shadow:inset 3px 0 #b241ff
}
.game-cell {
    display:flex;
    align-items:center;
    gap:13px
}
.game-cell strong {
    display:block;
    font-size:12px;
    line-height:1.3
}
.game-cell small {
    display:block;
    color:var(--text-dim);
    font-size:10px;
    margin-top:5px
}
.game-art {
    width:80px;
    height:40px;
    flex-shrink:0;
    border-radius:6px;
    background-image:url('/static/img/catalog-art.png');
    background-size:1003.2px 564.6px;
    background-repeat:no-repeat;
    background-color:#292036;
    overflow:hidden
}
.game-CB111 {
    background-position:-182px -222px
}
.game-BLOODSTRIKE {
    background-position:-182px -264px
}
.game-FORGE_ROBLOX {
    background-position:-182px -307px
}
.game-WARDOGS {
    background-position:-182px -351px
}
.game-default {
    background-image:none;
    display:grid;
    place-items:center;
    color:var(--primary)
}
.badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid #55506b;
    border-radius:8px;
    color:var(--text-secondary);
    padding:4px 8px;
    font-size:10px;
    font-weight:500;
    white-space:nowrap
}
.badge::before {
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:currentColor;
    flex-shrink:0
}
.badge-active {
    color:var(--success);
    background:#12da6710;
    border-color:#1dce6466
}
.badge-unused,.badge-maintenance {
    color:#b867ff;
    border-color:#7a2bca5c;
    background:#791dca0d
}
.badge-expired,.badge-coming_soon {
    color:var(--warning);
    border-color:#af8a2f66;
    background:#ac840b0c
}
.badge-banned {
    color:var(--danger);
    background:#e63b6512;
    border-color:#e63b6560
}
.code-pill {
    display:inline-block;
    font-family:"Cascadia Code",Consolas,monospace;
    font-size:10px;
    background:#8d41c311;
    border:1px solid #58347566;
    color:#d7c4ed;
    border-radius:5px;
    padding:3px 6px
}
button.code-pill {
    cursor:copy
}
.activity-list {
    position:relative;
    min-height:253px
}
.activity-item {
    position:relative;
    display:grid;
    grid-template-columns:43px 33px minmax(0,1fr);
    gap:11px;
    padding:11px 0 15px 14px
}
.activity-item::before {
    content:"";
    position:absolute;
    width:7px;
    height:7px;
    border:2px solid #a441ff;
    border-radius:50%;
    top:18px;
    left:-3px;
    background:#6a20a9;
    box-shadow:0 0 0 4px #a338ff12;
    z-index:1
}
.activity-item::after {
    content:"";
    position:absolute;
    top:28px;
    bottom:-14px;
    width:1px;
    background:#7339a9;
    left:1px
}
.activity-item:last-child::after {
    display:none
}
.activity-time {
    font-size:10px;
    color:var(--text-dim);
    padding-top:6px
}
.activity-icon {
    display:grid;
    place-items:center;
    width:33px;
    height:35px;
    border:1px solid #562b80;
    border-radius:7px;
    color:#b674f5;
    background:#6c28ab13
}
.activity-icon .icon {
    width:19px;
    height:19px
}
.activity-item strong {
    display:block;
    font-size:11px;
    font-weight:550;
    color:#e5dfef;
    line-height:1.5;
    overflow-wrap:anywhere
}
.activity-item small {
    display:block;
    margin-top:4px;
    font-size:9px;
    color:var(--text-dim)
}
.panel-footnote {
    font-size:9px;
    color:var(--text-dim);
    padding-top:10px;
    border-top:1px solid var(--border-subtle)
}
.recent-table td {
    padding:9px 12px;
    height:43px
}
.recent-table .badge {
    border:0;
    background:none;
    padding-left:0
}
.recent-key {
    display:flex;
    align-items:center;
    gap:9px;
    color:#e5e0f3;
    font-weight:600
}
.recent-key .icon-button {
    width:22px;
    height:24px
}
.recent-key .icon {
    width:13px;
    height:13px
}
.compact-filter {
    display:inline-flex;
    align-items:center;
    gap:9px;
    border:1px solid #4b3d68;
    border-radius:7px;
    padding:6px 9px
}
.compact-filter>.icon {
    width:16px;
    height:16px;
    color:var(--text-secondary)
}
.compact-filter select {
    border:0;
    outline-offset:8px;
    color:#d4cee8;
    background:#10111c;
    font-size:11px
}
.panel-bottom-link {
    display:flex;
    margin-left:auto;
    margin-top:12px;
    font-size:10px
}
.stock-summary-body {
    display:flex;
    gap:28px;
    align-items:center;
    justify-content:center;
    padding:6px 0 5px
}
.stock-donut {
    --donut:#292439;
    width:132px;
    height:132px;
    border-radius:50%;
    flex-shrink:0;
    background:var(--donut);
    display:grid;
    place-items:center;
    transform:rotate(-90deg)
}
.stock-donut>div {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    width:88px;
    height:88px;
    border-radius:50%;
    background:#0f0f1b;
    transform:rotate(90deg)
}
.stock-donut strong {
    font-size:29px;
    font-weight:700
}
.stock-donut span {
    color:var(--text-dim);
    font-size:10px
}
.stock-legend {
    flex:1;
    max-width:155px
}
.stock-legend>div {
    border-bottom:1px solid var(--border-subtle);
    padding:7px 0
}
.stock-legend>div:last-child {
    border:0
}
.stock-legend dt {
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--text-secondary);
    font-size:10px
}
.stock-legend dd {
    font-size:20px;
    line-height:1.1;
    margin:3px 0 0 18px;
    font-weight:650
}
.legend-dot {
    display:inline-block;
    width:10px;
    height:10px;
    border-radius:50%;
    background:#9e32f5
}
.legend-dot.active {
    background:var(--lime)
}
.legend-dot.other {
    background:#4c4665
}
.empty-state {
    padding:28px 14px!important;
    text-align:center;
    color:var(--text-dim)!important;
    font-size:11px;
    white-space:normal!important
}
.table-filters {
    display:flex;
    gap:9px;
    align-items:center;
    justify-content:flex-end;
    flex:1
}
.stock-layout {
    display:grid;
    grid-template-columns:minmax(250px,1fr) minmax(0,2fr);
    gap:18px;
    align-items:start
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px
}
.form-group {
    margin-bottom:17px
}
.form-label {
    display:block;
    color:#c5bfd8;
    font-size:11px;
    font-weight:500;
    margin-bottom:8px
}
.form-control {
    width:100%;
    min-height:39px;
    background:#0b0c15;
    color:var(--text-primary);
    border:1px solid #393149;
    border-radius:7px;
    padding:9px 11px;
    outline:none;
    transition:border-color .2s,box-shadow .2s
}
.form-control::placeholder {
    color:#68677f
}
.form-control:focus {
    border-color:#a44ce9;
    box-shadow:0 0 0 3px #a438ee14
}
select.form-control {
    padding-right:24px
}
.products-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px
}
.product-card {
    display:flex;
    flex-direction:column;
    gap:17px;
    border:1px solid #3b2b53;
    border-radius:11px;
    background:linear-gradient(135deg,#181121,#0e101b);
    padding:20px;
    min-width:0
}
.product-card-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px
}
.product-game {
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:10px;
    color:var(--text-dim)
}
.product-title {
    font-size:20px;
    margin:5px 0
}
.product-desc {
    font-size:12px;
    color:var(--text-secondary);
    min-height:36px
}
.product-stats {
    display:flex;
    gap:25px;
    padding:12px 0;
    border-top:1px solid var(--border-subtle);
    border-bottom:1px solid var(--border-subtle);
    font-size:11px;
    color:var(--text-secondary)
}
.product-stats strong {
    color:#fff;
    margin-left:7px
}
.price-list {
    background:#090b1555;
    padding:12px;
    border:1px solid var(--border-subtle);
    border-radius:8px
}
.price-list h4 {
    font-size:11px;
    color:var(--primary);
    margin-bottom:10px
}
.price-row {
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:8px;
    font-size:11px
}
.price-row label {
    flex:1
}
.price-row input {
    width:85px;
    min-height:30px;
    padding:5px 7px;
    text-align:right;
    color:var(--lime)
}
.price-list>.btn {
    width:100%;
    margin-top:13px
}
.modal-overlay {
    position:fixed;
    inset:0;
    z-index:70;
    display:none;
    align-items:center;
    justify-content:center;
    background:#030309c4;
    backdrop-filter:blur(8px);
    padding:20px
}
.modal-overlay.active {
    display:flex
}
.modal-card {
    width:440px;
    max-width:100%;
    max-height:calc(100dvh - 40px);
    overflow-y:auto;
    background:linear-gradient(145deg,#191323,#0d0f18);
    border:1px solid #7644a7;
    border-radius:14px;
    padding:25px;
    box-shadow:0 20px 100px #34006e52;
    animation:fade-in .15s ease
}
.modal-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:22px
}
.modal-title {
    font-size:22px;
    letter-spacing:-.5px
}
.modal-close {
    width:30px;
    height:30px;
    padding:0;
    font-size:25px;
    line-height:1;
    border:0;
    border-radius:5px;
    color:#aaa1c1;
    background:transparent
}
.modal-close:hover {
    color:white;
    background:#7829b333
}
body.modal-open {
    overflow:hidden
}
.toast-container {
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:100;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
    max-width:min(420px,calc(100vw - 32px))
}
.toast {
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px 17px;
    background:#191424;
    border:1px solid #74459a;
    border-radius:9px;
    box-shadow:0 8px 28px #0006;
    color:#ece6f6;
    font-size:12px;
    overflow-wrap:anywhere;
    max-width:100%;
    animation:fade-in .2s ease
}
.toast-success {
    border-left:3px solid var(--lime)
}
.toast-error {
    border-left:3px solid var(--danger)
}
.toast-success>.icon {
    color:var(--lime)
}
.toast-error>.icon {
    color:var(--danger)
}
.login-body {
    display:grid;
    min-height:100dvh;
    place-items:center;
    padding:28px 20px;
    background:radial-gradient(ellipse at 15% 10%,#4d11802b,transparent 50%),radial-gradient(ellipse at 100% 100%,#4d18872b,transparent 50%),#090a11
}
.login-body::before {
    background-image:linear-gradient(#8e42d206 1px,transparent 1px),linear-gradient(90deg,#8e42d206 1px,transparent 1px);
    background-size:56px 56px;
    z-index:0
}
.login-card {
    position:relative;
    width:420px;
    max-width:100%;
    border:1px solid #63348b;
    border-radius:16px;
    background:linear-gradient(145deg,#16101fcc,#0b0e18f5);
    padding:31px 38px 25px;
    box-shadow:0 0 100px #630aa414
}
.login-header {
    text-align:center;
    margin-bottom:29px
}
.login-logo {
    display:block;
    width:155px;
    height:136px;
    object-fit:contain;
    margin:-5px auto 0
}
.login-title {
    font-size:25px;
    margin-top:26px;
    letter-spacing:-.65px;
    font-weight:650
}
.login-subtitle {
    color:var(--text-dim);
    margin-top:7px;
    font-size:11px
}
.login-card .form-control {
    min-height:44px
}
.login-card>div:last-of-type:not(.login-header) {
    font-size:9px!important;
    letter-spacing:1px
}
@media(min-width:1700px) {
    .main-wrapper {
        padding:32px 35px
    }
    .metric-card {
        min-height:124px
    }
    .catalog-table td {
        height:76px
    }
    .activity-list {
        min-height:291px
    }
    .activity-item {
        padding-bottom:23px
    }
    .stock-summary-body {
        padding:12px 0
    }
}
@media(max-width:1450px) {
    :root {
        --sidebar-width:220px
    }
    .sidebar {
        padding-left:10px;
        padding-right:10px
    }
    .nav-item {
        font-size:12px;
        gap:12px;
        padding-left:14px
    }
    .main-wrapper {
        padding:25px 22px
    }
    .metric-card {
        padding:16px 12px;
        gap:11px
    }
    .metric-icon {
        width:42px;
        height:47px
    }
    .metric-icon .icon {
        width:25px;
        height:25px
    }
    .metric-title,.metric-sub {
        font-size:9px
    }
    .date-chip {
        display:none
    }
    .panel-card {
        padding:14px
    }
    .panel-card-title {
        font-size:14px;
        gap:8px
    }
    .panel-card-title>.icon {
        width:20px;
        height:20px
    }
    .game-art {
        width:65px
    }
    .game-cell {
        gap:9px
    }
    .game-cell strong {
        font-size:11px
    }
    .game-cell small {
        font-size:9px
    }
    .catalog-table td,.catalog-table th {
        padding-left:8px;
        padding-right:8px
    }
    .panel-actions {
        gap:8px
    }
    .panel-actions .muted {
        display:none
    }
    .stock-summary-body {
        gap:17px
    }
    .stock-donut {
        width:116px;
        height:116px
    }
    .stock-donut>div {
        width:78px;
        height:78px
    }
}
@media(max-width:1150px) {
    .overview-grid {
        grid-template-columns:minmax(0,1.6fr) minmax(275px,1fr)
    }
    .game-art {
        width:48px
    }
    .catalog-table .badge {
        font-size:9px;
        padding:4px 6px;
        gap:4px
    }
    .game-cell small {
        max-width:105px;
        text-overflow:ellipsis;
        overflow:hidden
    }
    .metric-card {
        gap:8px
    }
    .metric-icon {
        width:34px;
        height:42px
    }
    .metric-icon .icon {
        width:22px
    }
    .metric-value {
        font-size:25px
    }
    .metric-title,.metric-sub {
        font-size:8px
    }
    .table-filters {
        width:100%;
        max-width:none;
        flex-wrap:wrap;
        justify-content:flex-start
    }
    .stock-layout {
        grid-template-columns:1fr
    }
    .page-title {
        font-size:30px
    }
    .topbar-actions {
        gap:7px
    }
    .topbar-actions .btn {
        padding:10px 12px
    }
}
@media(max-width:1000px) {
    .overview-grid {
        grid-template-columns:minmax(0,1fr)
    }
    .catalog-panel,.activity-panel,.recent-panel,.stock-summary {
        grid-column:1;
        grid-row:auto
    }
    .catalog-panel {
        order:0
    }
    .recent-panel {
        order:1
    }
    .activity-panel {
        order:2
    }
    .stock-summary {
        order:3
    }
    .activity-list {
        min-height:0
    }
    .activity-item {
        grid-template-columns:55px 33px minmax(0,1fr)
    }
    .metrics-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .metric-title,.metric-sub {
        font-size:10px
    }
    .metric-card {
        gap:15px;
        padding:17px
    }
    .metric-icon {
        width:43px;
        height:46px
    }
    .game-art {
        width:80px
    }
    .game-cell strong {
        font-size:12px
    }
    .game-cell small {
        max-width:none
    }
    .stock-summary-body {
        justify-content:flex-start;
        gap:35px
    }
    .stock-legend {
        max-width:220px
    }
    .topbar {
        flex-wrap:wrap
    }
    .topbar-actions {
        width:100%;
        justify-content:flex-start
    }
    .date-chip {
        display:inline-flex;
        margin-right:auto
    }
    .products-grid {
        grid-template-columns:1fr
    }
}
@media(max-width:760px) {
    :root {
        --sidebar-width:244px
    }
    .main-wrapper {
        margin-left:0;
        padding:20px 16px 28px
    }
    .sidebar {
        transform:translateX(-100%);
        transition:transform .2s ease;
        overflow-y:auto
    }
    body.nav-open .sidebar {
        transform:translateX(0)
    }
    .sidebar-scrim {
        position:fixed;
        inset:0;
        background:#0009;
        backdrop-filter:blur(4px);
        border:0;
        z-index:25
    }
    body.nav-open .sidebar-scrim {
        display:block
    }
    .mobile-menu {
        display:inline-flex;
        width:26px;
        height:26px;
        margin-right:2px
    }
    .breadcrumb {
        margin-bottom:9px
    }
    .page-title {
        font-size:31px
    }
    .page-subtitle {
        font-size:12px
    }
    .topbar {
        gap:17px;
        margin-bottom:20px
    }
    .topbar-actions {
        gap:9px
    }
    .date-chip {
        font-size:10px;
        padding:10px
    }
    .btn {
        font-size:11px;
        padding:10px 13px
    }
    .nav-item {
        font-size:13px
    }
    .brand-section {
        margin-bottom:20px
    }
    .metrics-grid {
        gap:10px
    }
    .metric-card {
        padding:15px 12px;
        gap:11px;
        min-height:103px
    }
    .metric-title,.metric-sub {
        font-size:9px
    }
    .metric-value,#statRevenue {
        font-size:26px
    }
    .panel-card {
        padding:13px
    }
    .catalog-table {
        min-width:490px
    }
    .recent-table {
        min-width:465px
    }
    .game-art {
        width:65px
    }
    .panel-card-title {
        font-size:14px
    }
    .text-button {
        font-size:10px
    }
    .panel-actions {
        gap:0
    }
    .table-filters .form-control {
        flex:1 1 140px;
        width:auto!important;
        max-width:none!important
    }
    .toast-container {
        right:16px;
        bottom:16px
    }
    .form-grid {
        grid-template-columns:1fr;
        gap:0
    }
    .panel-card-header {
        flex-wrap:wrap
    }
}
@media(max-width:420px) {
    .metric-icon {
        width:34px;
        height:39px
    }
    .metric-icon .icon {
        width:22px
    }
    .metric-card {
        gap:8px;
        padding:12px 10px
    }
    .metric-title,.metric-sub {
        font-size:8px
    }
    .metric-value,#statRevenue {
        font-size:23px
    }
    .topbar-actions .date-chip {
        width:100%;
        justify-content:flex-start;
        border:0;
        padding:0;
        background:none
    }
    .topbar-actions {
        flex-wrap:wrap
    }
    .topbar-actions .btn {
        flex:1
    }
    .stock-summary-body {
        gap:22px
    }
    .login-card {
        padding:24px
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}
.row-actions {
    display:flex;
    align-items:center;
    gap:6px
}
.brand-logo {
    width:250px;
    height:155px;
    object-fit:cover
}
.login-logo {
    width:230px;
    height:155px;
    object-fit:cover
}
.table-custom {
    font-size:12px
}
.table-custom th {
    font-size:11px
}
.game-cell strong {
    font-size:14px
}
.game-cell small {
    font-size:11px
}
.panel-card-title {
    font-size:18px
}
.activity-item strong {
    font-size:12px
}
.metric-sub {
    font-size:11px
}
.metric-title {
    font-size:11px
}
.sidebar::after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:156px;
    height:180px;
    pointer-events:none;
    opacity:.3;
    background:linear-gradient(145deg,transparent 48%,#8723b65c 48.2%,transparent 48.5%),linear-gradient(#7b28b312 1px,transparent 1px),linear-gradient(90deg,#7b28b312 1px,transparent 1px);
    background-size:auto,36px 36px,36px 36px
}
@media(max-width:1450px) {
    .metric-title,.metric-sub {
        font-size:10px
    }
    .panel-card-title {
        font-size:16px
    }
    .game-cell strong {
        font-size:12px
    }
    .game-cell small {
        font-size:10px
    }
}
@media(max-width:1150px) {
    .metric-title,.metric-sub {
        font-size:9px
    }
    .panel-card-title {
        font-size:14px
    }
}
@media(max-width:760px) {
    .metric-title,.metric-sub {
        font-size:9px
    }
    .game-cell strong {
        font-size:12px
    }
    .game-cell small {
        font-size:10px
    }
    .table-custom {
        font-size:11px
    }
}
@media(max-width:420px) {
    .metric-title,.metric-sub {
        font-size:8px
    }
}
@media(max-width:420px) {
    .metric-title {
        font-size:9px
    }
    .metric-sub {
        font-size:9px
    }
}