:root {
    color-scheme: dark;
    --sys-bg: #0b1014;
    --sys-surface: #121a20;
    --sys-surface-raised: #18232a;
    --sys-line: #2b3941;
    --sys-text: #edf4f6;
    --sys-muted: #a5b5bc;
    --sys-cyan: #55d6d0;
    --sys-blue: #58a6ff;
    --sys-green: #56d6a0;
    --sys-red: #ff777e;
    --sys-radius: 8px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", sans-serif;
}
html { min-height: 100%; background: var(--sys-bg); }
body { background-color: var(--sys-bg) !important; background-image: radial-gradient(ellipse at 50% -20%, rgba(49,105,116,.24), transparent 54%), linear-gradient(180deg,#0b1014,#10171c 58%,#0b1014) !important; color: var(--sys-text) !important; font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif !important; }
button,input,select,textarea { font: inherit; }
input,select,textarea { color: var(--sys-text); background: #0d151a; border: 1px solid var(--sys-line) !important; border-radius: 5px !important; }
input::placeholder,textarea::placeholder { color: #80929a; }
input:focus,select:focus,textarea:focus { outline: 2px solid rgba(85,214,208,.3); border-color: var(--sys-cyan) !important; }
button,.btn,.buy-btn { border-radius: 5px !important; transition: background-color .16s ease,border-color .16s ease,transform .16s ease; }
button:focus-visible,a:focus-visible { outline: 2px solid var(--sys-cyan); outline-offset: 2px; }
/* Storefront */
.container { max-width: 620px !important; padding-top: 30px !important; }
.title { color: #f5fbfc !important; background: none !important; -webkit-text-fill-color: currentColor !important; text-shadow: none !important; letter-spacing: 0 !important; }
.subtitle,.details-box { background: rgba(18,26,32,.92) !important; border: 1px solid var(--sys-line) !important; border-radius: var(--sys-radius) !important; }
.subtitle { color: #c1d0d5 !important; }
.kefu-btn { background: #18383d !important; border: 1px solid #2c7277 !important; box-shadow: none !important; }
.card { background: var(--sys-surface) !important; border: 1px solid var(--sys-line) !important; border-radius: var(--sys-radius) !important; backdrop-filter: none !important; }
.card:hover { border-color: var(--sys-cyan) !important; transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,.24) !important; }
.card-price { color: var(--sys-cyan) !important; }
.buy-btn { background: var(--sys-cyan) !important; color: #071314 !important; min-height: 44px; }
.buy-btn:hover { background: #7ce5df !important; }
.video-box { background: #182a32 !important; border: 1px solid #354a53; border-radius: var(--sys-radius) !important; box-shadow: none !important; }
.modal-card,.modal-header,.modal-footer,.qr-wrapper { background: var(--sys-surface) !important; }
.modal-card { border: 1px solid var(--sys-line) !important; border-radius: var(--sys-radius) !important; }
.modal-header { background: #17363a !important; }
/* Activation/settings UI */
.page-container { max-width: 700px !important; }
.header,.content-section,.top-box,.footer-actions { background: rgba(18,26,32,.96) !important; border: 1px solid var(--sys-line) !important; border-radius: var(--sys-radius) !important; backdrop-filter: none !important; }
.content-section.top-boxes { background: transparent !important; border: 0 !important; }
.header .expiry-date,.checkbox-item input[type="checkbox"]:checked + label { color: var(--sys-cyan) !important; }
.header-buttons .btn,.text-consult-link { background: #1a3037 !important; border-color: #31545b !important; border-radius: 5px !important; }
.checkbox-item { background: #0c1418 !important; border: 1px solid #26353c; border-radius: 5px !important; }
.footer-actions { border-radius: 0 !important; }
/* Recharge checkout/admin */
.wrap { width: min(100%,1120px) !important; }
.panel,.section { color: var(--sys-text) !important; background: var(--sys-surface) !important; border: 1px solid var(--sys-line) !important; border-radius: var(--sys-radius) !important; box-shadow: 0 16px 44px rgba(0,0,0,.2); }
.steps { background: #13262a !important; border-left-color: var(--sys-cyan) !important; border-radius: 4px !important; }
.account { background: #0d151a; border-color: var(--sys-line) !important; border-radius: 5px !important; }
.btn { background: #247d7d !important; color: #f7ffff !important; border-radius: 5px !important; }
.btn:hover { background: #2e9693 !important; }
.btn.secondary { background: #34434b !important; }
.alert { color: #ffc1c4 !important; background: #351f25 !important; }
.notice,.success { color: #bdf4dc !important; background: #142d25 !important; }
.muted { color: var(--sys-muted) !important; }
.section h2,.panel h2 { color: #e9f5f5; }
table { color: var(--sys-text); }
th { color: #c6d8dc; background: #1b282f !important; }
td,th { border-color: #2b3941 !important; }
tr:hover td { background: rgba(85,214,208,.035); }
a { color: #7edbd7; }
/* Admin tools */
.login-box,.container { color: var(--sys-text); }
body:has(.login-box) .login-box,body:has(.container > h2) .container { background: var(--sys-surface) !important; border: 1px solid var(--sys-line) !important; border-radius: var(--sys-radius) !important; box-shadow: 0 16px 44px rgba(0,0,0,.24) !important; }
.status-unused { background: #596971 !important; }
.status-active { background: #188b68 !important; }
.status-expired,.status-banned,.btn-delete { background: #a53c48 !important; }
.btn-move { background: #34434b !important; }
.category,.feature-item,.form-section { color: var(--sys-text); background: var(--sys-surface) !important; border-color: var(--sys-line) !important; border-radius: var(--sys-radius) !important; }
.category { padding: 16px; margin: 14px 0; border: 1px solid var(--sys-line); }
@media(max-width:700px) {
 .wrap { margin: 12px auto !important; padding: 10px !important; }
 .panel,.section { padding: 16px !important; }
 .grid { gap: 10px !important; }
 .cards-container { gap: 10px !important; }
 .card { padding: 16px 10px !important; }
 .card-price { font-size: 25px !important; }
 .page-container { padding: 12px !important; }
 .content-section { margin: 10px 0 !important; }
 .footer-actions { padding: 10px 12px !important; }
 table { min-width: 680px; }
 .section:has(table) { overflow-x: auto; }
 .grid { grid-template-columns: 1fr !important; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }