/* ============================================================
   AusPro Shop Theme
   与 www.aus123.com 落地页统一：深色战术 HUD 风格
   近黑底 + 翡翠绿/青渐变 + 玻璃拟态卡片
   ============================================================ */
:root {
    --ap-bg: #05070a;
    --ap-bg2: #0a0e13;
    --ap-panel: rgba(255, 255, 255, 0.03);
    --ap-panel2: rgba(255, 255, 255, 0.055);
    --ap-line: rgba(255, 255, 255, 0.09);
    --ap-brand: #2ee6a6;
    --ap-brand2: #22d3ee;
    --ap-accent: #f5a524;
    --ap-text: #eaf4f1;
    --ap-text2: #9eb4af;
    --ap-text3: #6b807a;
}

/* ---------- 页面底色 + 网格 + 光晕 ---------- */
body {
    background-color: var(--ap-bg) !important;
    color: var(--ap-text) !important;
}
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(1000px 600px at 80% -5%, rgba(46, 230, 166, 0.10), transparent 60%),
        radial-gradient(820px 520px at 4% 12%, rgba(34, 211, 238, 0.07), transparent 60%),
        linear-gradient(rgba(46, 230, 166, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(46, 230, 166, 0.04) 1px, transparent 1px);
    background-size: auto, auto, 56px 56px, 56px 56px;
}

/* ---------- 通用文字 ---------- */
h1, h2, h3, h4, h5, h6 { color: #ffffff !important; }
.text-muted, .text-secondary { color: var(--ap-text2) !important; }
.text-dark { color: var(--ap-text) !important; }
a { color: var(--ap-brand); }
a:hover { color: var(--ap-brand2); }

/* ---------- 导航 ---------- */
.navbar-acg {
    background: rgba(5, 7, 10, 0.72) !important;
    backdrop-filter: blur(16px) saturate(140%);
    border-bottom: 1px solid rgba(46, 230, 166, 0.18) !important;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.45) !important;
}
.navbar-acg .navbar-brand,
.navbar-acg .navbar-brand span,
.navbar-acg .nav-link { color: var(--ap-text2) !important; }
.navbar-acg .nav-link:hover { color: var(--ap-brand) !important; background: rgba(46, 230, 166, 0.07) !important; }
.navbar-acg .nav-icon { color: var(--ap-brand) !important; }
.navbar-acg .navbar-toggler { border-color: rgba(46, 230, 166, 0.3) !important; }
.navbar-acg .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.6); }
.navbar-acg .form-control,
.navbar-acg .input-group-text {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: var(--ap-line) !important;
    color: var(--ap-text) !important;
}
.user-info-box .text-dark, #username { color: var(--ap-text) !important; }

/* ---------- 面板 ---------- */
.panel {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)) !important;
    border: 1px solid rgba(46, 230, 166, 0.16) !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.42) !important;
    color: var(--ap-text) !important;
}
.panel-header {
    background: rgba(46, 230, 166, 0.05) !important;
    border-bottom: 1px solid rgba(46, 230, 166, 0.14) !important;
}
.panel-title { color: #ffffff !important; }
.panel-body { color: var(--ap-text) !important; }

/* ---------- 商品卡片 ---------- */
.acg-card {
    background: rgba(255, 255, 255, 0.032) !important;
    border: 1px solid var(--ap-line) !important;
    border-radius: 14px !important;
    color: var(--ap-text) !important;
    transition: all 0.3s !important;
}
.acg-card:hover {
    background: var(--ap-panel2) !important;
    border-color: rgba(46, 230, 166, 0.45) !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.5) !important;
}
.acg-card .goods-title { color: #ffffff !important; }
.acg-card .price { color: var(--ap-brand) !important; }
.acg-card .stat-bottom, .acg-card .stat-row { color: var(--ap-text2) !important; }
.item-message { color: var(--ap-text3) !important; }

/* ---------- 徽章 ---------- */
.badge-soft {
    background: rgba(255, 255, 255, 0.07) !important;
    color: var(--ap-text2) !important;
}
.badge-soft-success { background: rgba(46, 230, 166, 0.14) !important; color: var(--ap-brand) !important; }
.badge-soft-primary { background: rgba(34, 211, 238, 0.14) !important; color: var(--ap-brand2) !important; }
.badge-soft-info { background: rgba(245, 165, 36, 0.14) !important; color: var(--ap-accent) !important; }
.badge-money { background: rgba(46, 230, 166, 0.12) !important; color: var(--ap-brand) !important; }

/* ---------- 分类/规格 chip ---------- */
.chip, .sku {
    background: rgba(255, 255, 255, 0.045) !important;
    border: 1px solid var(--ap-line) !important;
    color: var(--ap-text) !important;
}
.chip.is-primary, .sku.is-primary {
    background: linear-gradient(135deg, var(--ap-brand), var(--ap-brand2)) !important;
    border-color: transparent !important;
    color: #04120c !important;
}

/* ---------- 表单 ---------- */
.form-control, .form-select, .form-check-input {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--ap-line) !important;
    color: var(--ap-text) !important;
}
.form-control:focus, .form-select:focus {
    border-color: rgba(46, 230, 166, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(46, 230, 166, 0.12) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.form-control::placeholder { color: var(--ap-text3) !important; }
.form-label, label, .form-check-label { color: var(--ap-text2) !important; }
.input-group-text {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: var(--ap-line) !important;
    color: var(--ap-text2) !important;
}

/* ---------- 按钮 ---------- */
.btn-primary {
    background: linear-gradient(135deg, var(--ap-brand), var(--ap-brand2)) !important;
    border: none !important;
    color: #04120c !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 22px rgba(46, 230, 166, 0.26) !important;
}
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 12px 30px rgba(46, 230, 166, 0.45) !important; }
.btn-outline-secondary, .btn-outline-primary {
    background: transparent !important;
    border-color: rgba(46, 230, 166, 0.4) !important;
    color: var(--ap-brand) !important;
}
.btn-outline-secondary:hover, .btn-outline-primary:hover {
    background: rgba(46, 230, 166, 0.1) !important;
    color: var(--ap-brand) !important;
}
.btn-secondary, .btn-light {
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: var(--ap-line) !important;
    color: var(--ap-text) !important;
}

/* ---------- 表格（用户中心） ---------- */
.table { color: var(--ap-text) !important; }
.table > thead th {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--ap-text2) !important;
    border-color: var(--ap-line) !important;
}
.table > tbody td, .table > tbody th { border-color: rgba(255, 255, 255, 0.07) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(255, 255, 255, 0.02) !important; }
.table-hover > tbody > tr:hover > * { background: rgba(46, 230, 166, 0.06) !important; }

/* ---------- 卡片/模态框等通用容器 ---------- */
.card, .modal-content, .dropdown-menu, .offcanvas {
    background: #0b1016 !important;
    border: 1px solid var(--ap-line) !important;
    color: var(--ap-text) !important;
}
.card-header { background: rgba(255, 255, 255, 0.04) !important; border-bottom: 1px solid var(--ap-line) !important; }
.dropdown-item { color: var(--ap-text2) !important; }
.dropdown-item:hover { background: rgba(46, 230, 166, 0.1) !important; color: var(--ap-brand) !important; }
.modal-header, .modal-footer { border-color: var(--ap-line) !important; }
.list-group-item { background: rgba(255, 255, 255, 0.02) !important; border-color: var(--ap-line) !important; color: var(--ap-text) !important; }

/* ---------- 用户中心 ---------- */
.uc-body { background-color: var(--ap-bg) !important; color: var(--ap-text) !important; }
.uc-drawer { background: rgba(9, 13, 18, 0.96) !important; color: var(--ap-text) !important; border-color: rgba(46, 230, 166, 0.16) !important; }
.uc-drawer__link { color: var(--ap-text2) !important; }
.uc-drawer__link:hover, .uc-drawer__link.is-active { background: rgba(46, 230, 166, 0.09) !important; color: var(--ap-brand) !important; }
.uc-drawer__gtitle { color: var(--ap-brand) !important; }

/* ---------- 页脚 ---------- */
footer, .footer {
    background: rgba(5, 7, 10, 0.82) !important;
    border-top: 1px solid rgba(46, 230, 166, 0.16) !important;
    color: var(--ap-text2) !important;
}
footer a, .footer a { color: var(--ap-text2) !important; }
footer a:hover, .footer a:hover { color: var(--ap-brand) !important; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: #05070a; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--ap-brand), var(--ap-brand2)); border-radius: 4px; }
::selection { background: var(--ap-brand); color: #04120c; }


/* ---------- 商品封面：透明/深字封面在深色卡片上会看不清，给封面区浅色底 ---------- */
.acg-thumb {
    background-color: #e9eef0 !important;
    border-radius: 14px 14px 0 0 !important;
}
.acg-card.acg-cover .acg-thumb,
.item-cover { background-color: #e9eef0 !important; }


/* ============================================================
   下单页组件：购买数量 / 图形验证码 / 付款方式（深色主题下保证对比）
   ============================================================ */
/* 购买数量 */
.qty-group {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    overflow: hidden;
}
.qty-group .form-control,
.qty-group input[type="number"] {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
.change-num-sub, .change-num-add {
    background: rgba(46, 230, 166, 0.14) !important;
    color: var(--ap-brand) !important;
    border: none !important;
    font-weight: 700 !important;
}
.change-num-sub:hover, .change-num-add:hover { background: rgba(46, 230, 166, 0.28) !important; color: #04120c !important; }

/* 图形验证码（来源图为透明底，必须给浅底才能看清） */
.captcha-img {
    background-color: #ffffff !important;
    border-radius: 8px !important;
    cursor: pointer;
}
.captcha-input { color: #ffffff !important; }

/* 付款方式 */
.cash-pay { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 12px !important; }
.pay-list { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-list .pay {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-radius: 10px !important;
    color: var(--ap-text) !important;
    padding: 8px 14px !important;
    text-decoration: none;
}
.pay-list .pay span { color: var(--ap-text) !important; }
.pay-list .pay img { width: 22px; height: 22px; }
.pay-list .pay:hover { background: rgba(46, 230, 166, 0.12) !important; border-color: rgba(46, 230, 166, 0.5) !important; }
.pay-list .pay.is-primary, .pay-list .pay.active { background: rgba(46, 230, 166, 0.16) !important; border-color: var(--ap-brand) !important; }