.store-body { min-height: 100vh; }
.store-body h1,.store-body h2,.store-body h3 { font-weight: 400; }
.store-header-actions { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.store-button { display: inline-flex; justify-content: center; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid #3a3a3a; border-radius: 6px; background: #242424; font-size: 13px; line-height: 1.4; }
.store-button:hover { border-color: #737373; background: #2b2b2b; }
.store-button.primary { background: var(--accent); border-color: var(--accent); color: #10291a; }
.store-button.primary:hover { background: #81edac; }
.store-button:disabled { opacity: .55; }
.basket-link span { padding: 0 5px; color: var(--accent); }
.store-shell { max-width: 1120px; margin: auto; padding: 40px 28px 70px; }
.store-hero { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding: 24px 0 35px; }
.store-hero h1 { font-size: 36px; margin: 8px 0 12px; }
.store-hero p { color: #a5a5a5; max-width: 530px; font-size: 14px; margin: 0; }
.store-hero-art { width: 145px; height: 145px; padding: 24px; background: radial-gradient(ellipse,#54df921b,transparent 70%); }
.store-hero-art img { width: 100%; height: 100%; image-rendering: pixelated; }
.store-label { color: var(--accent); font-size: 11px; letter-spacing: 2px; }
.store-notice { display: flex; align-items: center; gap: 12px; padding: 13px 17px; background: #1b231e; color: #b3c9bb; border: 1px solid #2b3a30; border-radius: 7px; font-size: 12px; margin-bottom: 28px; }
.store-notice .status-dot { width: 7px; height: 7px; background: #e6c17b; border-radius: 50%; flex: 0 0 auto; }
.store-layout { display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 28px; align-items: start; }
.store-sidebar { position: sticky; top: 80px; }
.store-sidebar > small { display: block; color: #828282; font-size: 10px; letter-spacing: 1.5px; margin: 4px 0 14px 12px; }
.store-sidebar nav { display: grid; gap: 5px; }
.store-sidebar nav a { padding: 12px; color: #aaa; border: 1px solid transparent; border-radius: 6px; display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.store-sidebar nav a.active { color: var(--accent); border-color: #54df9230; background: #54df920d; }
.store-sidebar nav a:hover { color: #eee; background: #202020; }
.store-sidebar nav a span { color: #7d7d7d; font-size: 11px; }
.store-sidebar .sidebar-help { margin-top: 30px; padding: 16px 12px; border-top: 1px solid var(--line); font-size: 11px; color: #8c8c8c; line-height: 1.7; }
.sidebar-help a { display: block; color: var(--accent); margin-top: 8px; }
.store-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.store-section-head h2 { font-size: 20px; margin: 0 0 6px; }
.store-section-head p { color: #909090; font-size: 12px; margin: 0; }
.store-section-head input { max-width: 190px; width: 100%; padding: 10px; font-size: 12px; }
.package-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.package-card { background: #1b1b1b; border: 1px solid #2b2b2b; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s,transform .15s; }
.package-card:hover { border-color: #4e6958; transform: translateY(-2px); }
.package-art { width: 100%; height: 135px; background: radial-gradient(ellipse at 50% 100%,#54df9209,transparent 75%); display: grid; place-items: center; border-bottom: 1px solid #ffffff06; }
.package-art img { width: 85%; height: 104px; object-fit: contain; }
.package-art .fallback-art { width: 64px; height: 64px; }
.package-card-content { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.package-card .package-category { color: #888; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; }
.package-card h3 { font-size: 14px; line-height: 1.5; margin: 8px 0 10px; }
.package-card .package-summary { color: #999; font-size: 11px; min-height: 34px; line-height: 1.6; margin-bottom: 17px; }
.package-price { color: var(--accent); font-size: 19px; margin-top: auto; }
.package-price small { font-size: 9px; color: #919191; margin-left: 5px; }
.package-card .store-button { width: 100%; margin-top: 13px; font-size: 11px; padding: 9px; }
.store-bottom-note { margin: 30px 0 0; color: #777; font-size: 11px; line-height: 1.8; }
.store-footer { width: 100%; max-width: 1120px; margin: auto; padding: 25px 28px; flex-wrap: wrap; }
.store-footer > a { flex-shrink: 0; }
.store-footer > span { flex: 1 1 180px; }
.store-footer > a:last-of-type { margin-left: auto; }
.store-payment-notice { flex-basis: 100%; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); text-align: center; line-height: 1.8; }
.store-payment-notice a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.store-empty { padding: 55px 25px; text-align: center; border: 1px dashed #383838; border-radius: 8px; color: #999; font-size: 13px; }
.store-empty h2 { color: #ddd; font-size: 20px; }
.store-empty .store-button { margin-top: 10px; }
.store-dialog { width: min(600px,calc(100% - 30px)); max-height: 90vh; background: #1b1b1b; color: #eee; border: 1px solid #414141; border-radius: 10px; padding: 28px; }
.store-dialog::backdrop { background: #000b; backdrop-filter: blur(3px); }
.store-dialog .close-dialog { position: absolute; top: 10px; right: 12px; font-size: 23px; color: #aaa; }
.store-dialog img { display: block; width: 200px; height: 130px; object-fit: contain; margin: auto auto 20px; }
.store-dialog h2 { font-size: 24px; margin: 6px 0 14px; }
.store-description { color: #b9b9b9; white-space: pre-line; font-size: 13px; line-height: 1.9; }
.store-dialog .dialog-actions { margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.store-dialog .store-fineprint { font-size: 11px; color: #aaa; margin-top: 18px; }
.store-back { color: #999; font-size: 12px; display: inline-block; margin-bottom: 20px; }
.basket-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 24px; align-items: start; }
.basket-row { display: flex; align-items: center; padding: 20px 0; gap: 16px; border-bottom: 1px solid #303030; }
.basket-row img { width: 80px; height: 70px; object-fit: contain; }
.basket-row h3 { font-size: 14px; margin: 0 0 5px; }
.basket-row small { color: #999; font-size: 10px; }
.basket-row > div { flex: 1; }
.basket-row input { width: 58px; padding: 8px; }
.basket-row .remove-item { font-size: 11px; color: #aaa; padding: 8px 0; display: block; }
.basket-total { padding: 24px; background: #1b1b1b; border: 1px solid #303030; border-radius: 8px; }
.basket-total h2 { font-size: 17px; }
.basket-total p { font-size: 11px; color: #aaa; line-height: 1.8; }
.basket-total .total-line { display: flex; justify-content: space-between; margin: 22px 0; }
.basket-total .store-button { width: 100%; margin-bottom: 13px; }
.admin-shell { max-width: 1280px; }
.admin-title { display: flex; justify-content: space-between; align-items: center; margin: 0 0 26px; }
.admin-title h1 { font-size: 28px; margin: 5px 0; }
.admin-title p { color: #888; font-size: 11px; margin: 0; }
.admin-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-toolbar select { padding: 9px; font-size: 12px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.admin-metric { padding: 19px; border: 1px solid #303030; border-radius: 7px; background: #1b1b1b; }
.admin-metric > span { color: #999; font-size: 11px; display: block; }
.admin-metric strong { font-weight: 400; font-size: 26px; display: block; margin: 9px 0 4px; }
.admin-metric small { color: #888; font-size: 10px; }
.admin-panel { border: 1px solid #303030; background: #1b1b1b; border-radius: 8px; padding: 22px; margin-bottom: 20px; min-width: 0; }
.admin-panel h2 { font-size: 16px; margin: 0 0 8px; }
.admin-panel > p { font-size: 11px; color: #999; }
.admin-chart { width: 100%; height: 210px; display: block; overflow: visible; }
.chart-labels { display: flex; justify-content: space-between; color: #777; font-size: 10px; margin: 7px 0 0; }
.chart-legend { display: flex; gap: 20px; margin: 16px 0; font-size: 11px; }
.chart-legend span:first-child { color: var(--accent); }
.chart-legend span:last-child { color: #bb9bf0; }
.table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; font-size: 12px; }
.admin-table th { color: #888; font-weight: 400; font-size: 10px; padding: 12px 10px; border-bottom: 1px solid #383838; white-space: nowrap; }
.admin-table td { padding: 12px 10px; border-bottom: 1px solid #292929; }
.admin-table tr:last-child td { border: 0; }
.admin-table .mini-product { display: flex; align-items: center; gap: 12px; }
.mini-product img { width: 48px; height: 35px; object-fit: contain; }
.store-pill { font-size: 9px; padding: 4px 7px; border-radius: 4px; background: #54df9210; color: var(--accent); white-space: nowrap; }
.store-pill.archived { color: #aaa; background: #333; }
.admin-table button { color: var(--accent); font-size: 11px; }
.admin-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.admin-activity { display: grid; gap: 14px; padding: 10px 0; }
.admin-activity div { font-size: 12px; }
.admin-activity small { display: block; color: #888; font-size: 10px; margin-top: 4px; }
.admin-form { display: grid; gap: 17px; }
.paynow-details { margin-bottom: 20px; }
.admin-form label { display: grid; gap: 7px; font-size: 12px; color: #aaa; }
.admin-form input,.admin-form select,.admin-form textarea { width: 100%; padding: 10px; color: #eee; background: #242424; border: 1px solid #414141; border-radius: 5px; font: inherit; }
.admin-form textarea { min-height: 165px; resize: vertical; }
.admin-form .form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.admin-form .check-label { display: flex; align-items: center; gap: 10px; }
.admin-form .check-label input { width: 17px; height: 17px; accent-color: var(--accent); }
.form-error { color: #f5a19a; font-size: 12px; min-height: 18px; margin: 0; }
.login-panel { max-width: 430px; margin: 80px auto; }
.store-loading { padding: 100px 20px; text-align: center; color: #aaa; }
#store-toast { position: fixed; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 100; background: #244331; color: #e0ffe9; border: 1px solid #538469; border-radius: 7px; padding: 12px 20px; font-size: 12px; max-width: 90vw; display: none; }
#store-toast.visible { display: block; }
@media(max-width:1000px) { .package-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .admin-metrics { grid-template-columns: repeat(2,1fr); } .admin-two-col { grid-template-columns: 1fr; gap: 0; } }
@media(max-width:700px) { .store-shell { padding: 24px 16px 45px; } .store-hero { padding: 18px 0 28px; } .store-hero h1 { font-size: 28px; } .store-hero-art { display: none; } .store-layout { grid-template-columns: 1fr; gap: 22px; } .store-sidebar { position: static; } .store-sidebar nav { display: flex; flex-wrap: wrap; gap: 4px; } .store-sidebar nav a { padding: 8px 10px; } .store-sidebar > small,.sidebar-help { display: none; } .store-header-actions { gap: 10px; } .store-header-actions .discord-link { display: none; } .store-body .site-header { gap: 14px; padding: 0 14px; height: auto; min-height: 55px; flex-wrap: wrap; } .store-body .brand span { font-size: 19px; } .store-body .top-nav { gap: 13px; order: 3; width: 100%; padding: 0 0 10px; } .store-body .top-nav a { font-size: 12px; } .store-section-head { align-items: start; } .store-section-head input { width: 140px; } .package-card-content { padding: 13px; } .package-card h3 { font-size: 13px; } .package-art { height: 115px; } .package-art img { height: 85px; } .basket-layout { grid-template-columns: 1fr; } .basket-row { gap: 10px; } .basket-row img { width: 50px; } .admin-title { align-items: start; gap: 15px; } .admin-title h1 { font-size: 23px; } .admin-metric { padding: 15px; } .admin-metric strong { font-size: 23px; } .admin-panel { padding: 16px; } .admin-form .form-pair { grid-template-columns: 1fr; } .store-footer { padding: 20px 16px; gap: 16px; flex-wrap: wrap; } }
@media(prefers-reduced-motion:reduce) { .package-card { transition: none; } }
.commerce-search { display: flex; align-items: center; gap: 10px; margin: 18px 0; flex-wrap: wrap; }
.commerce-search input { padding: 10px 13px; min-width: 150px; flex: 1; }
.commerce-search select { padding: 10px; }
.commerce-search label { font-size: 12px; color: #aaa; }
.purchase-table small { display: block; color: #888; font-size: 10px; margin-top: 5px; }
.purchase-table td { vertical-align: top; line-height: 1.7; }
.customer-link { color: var(--accent); }
.purchase-pagination { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; font-size: 11px; color: #999; }
.purchase-pagination > div { display: flex; gap: 8px; }
.customer-title { display: flex; align-items: center; gap: 18px; margin-bottom: 24px; }
.customer-title h2 { margin: 5px 0; font-size: 25px; }
.customer-title small { color: #888; font-size: 10px; overflow-wrap: anywhere; }
.customer-avatar { width: 55px; height: 55px; background: #21372a; color: var(--accent); display: grid; place-items: center; font-size: 28px; border-radius: 8px; flex-shrink: 0; }
.customer-summary .admin-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); }
.customer-summary .admin-metric strong { font-size: 23px; }
.purchased-items { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 18px; }
.purchased-items > div { padding: 14px; background: #242424; border-radius: 5px; font-size: 12px; display: flex; justify-content: space-between; gap: 12px; }
.purchased-items strong { color: var(--accent); white-space: nowrap; font-weight: 400; }
.rank-picker { padding: 13px 18px; }
.rank-picker .commerce-search { margin: 0 0 10px; }
.rank-picker > p { margin: 0; font-size: 11px; }
@media(max-width:700px) { .purchased-items { grid-template-columns: 1fr; } .commerce-search input { width: 100%; } .customer-summary .admin-metric strong { font-size: 19px; } }
.promotion-meta { display: block; margin-top: 8px; color: var(--muted, #999); font-size: 11px; line-height: 1.6; }
.promotion-packages { border: 1px solid #383838; border-radius: 8px; max-height: 220px; overflow: auto; padding: 16px; }
.promotion-packages legend { font-size: 12px; padding: 0 8px; }
.promotion-packages .check-label { margin: 10px 0; }
.discount-saving { color: #54df92; }
.package-price del { color: #999; font-size: 13px; }
.gift-code { font-size: 13px; width: 100%; }
.discount-codes { margin-bottom: 24px; }
.payment-command { white-space: pre-wrap; overflow-wrap: anywhere; border: 1px solid #383838; background: #111; padding: 16px; border-radius: 8px; font-size: 13px; }

.store-hero-art img[src="/assets/dragsim.png"] { image-rendering: auto; }