/* ==========================================================
   斗趣AI 官方商城 · luna 模板皮肤（深色沉稳版 v3）
   风格：深蓝底 + 玻璃卡片 + 品牌蓝点缀，静态质感、无动效霓虹
   用法：覆盖上传到 public/assets/luna/custom.css
   并将 resources/views/luna/layouts/_header.blade.php 中
   引用处的 ?v=1 改为 ?v=3（破除浏览器缓存）
   注意：主题 main.css 使用 .main .goods .picture 等高优先级
   选择器，本文件对应规则需保持同等或更高优先级。
   ========================================================== */

:root {
    --bg: #182338;
    --surface: #202e4a;
    --surface-2: #263654;
    --line: rgba(160, 196, 255, .18);
    --line-strong: rgba(160, 196, 255, .28);
    --text-1: #eaf1ff;
    --text-2: #b6c2d9;
    --text-3: #8b99b5;
    --muted: #6d7c99;
    --accent: #4da3ff;
    --grad: linear-gradient(135deg, #4189dd 0%, #1fb2cf 100%);
    --ring: rgba(77, 163, 255, .18);
    --shadow-md: 0 2px 8px rgba(6, 12, 26, .25), 0 12px 32px rgba(6, 12, 26, .28);
    --shadow-lg: 0 6px 16px rgba(6, 12, 26, .32), 0 20px 48px rgba(6, 12, 26, .38);
}

/* ---------- 全局 ---------- */
html, body { background: var(--bg); }
body {
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Microsoft YaHei", "Segoe UI", Arial, sans-serif !important;
    color: var(--text-2);
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(77, 163, 255, .30); color: #fff; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #24344f; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #31456a; }
::-webkit-scrollbar-track { background: transparent; }
a { transition: color .2s ease; }

/* ---------- 页面背景：深色 + 柔和光晕 + 细网格 ---------- */
.background {
    background-image:
        radial-gradient(1000px 480px at 85% -10%, rgba(60, 140, 231, .12), transparent 62%),
        radial-gradient(820px 420px at -8% 30%, rgba(77, 163, 255, .05), transparent 60%),
        radial-gradient(900px 460px at 50% 112%, rgba(96, 84, 255, .07), transparent 62%),
        linear-gradient(rgba(160, 196, 255, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(160, 196, 255, .04) 1px, transparent 1px),
        linear-gradient(180deg, #1d2a44 0%, var(--bg) 50%, #16203a 100%) !important;
    background-size: auto, auto, auto, 42px 42px, 42px 42px, auto !important;
    background-color: var(--bg) !important;
}

/* ---------- 头部 ---------- */
.header .header-box > a > img,
.header .header-box img {
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--line);
}
.header .header-box .info {
    font-size: 21px !important;
    font-weight: 800 !important;
    color: var(--text-1) !important;
    letter-spacing: 1.5px;
}
.header .header-box .query a {
    background-image: var(--grad) !important;
    background-color: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 1px;
    border-radius: 999px !important;
    box-shadow: 0 4px 14px rgba(6, 12, 26, .35) !important;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.header .header-box .query a:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(6, 12, 26, .42) !important;
}

/* ---------- 主卡片容器 ---------- */
.main-box {
    position: relative;
    background: rgba(18, 28, 48, .88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--line);
    border-radius: 20px !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}
/* 顶部静态细光线 */
.main-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(160, 196, 255, .32), transparent);
    pointer-events: none;
}

/* ---------- 公告 ---------- */
.main .title .tit,
.title p.tit,
.main .title,
.main .title-2,
.pay-title {
    color: var(--text-1) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: .5px;
}
.main .goods { border-top: 1px solid var(--line) !important; }
.tips {
    background: rgba(77, 163, 255, .08);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    padding: 12px 18px !important;
    margin: 4px 2px 2px;
}
/* 后台粘贴公告带入的内联黑底样式，强制覆盖 */
.tips p,
.tips p span {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-2) !important;
    font-size: 13.5px !important;
    font-family: inherit !important;
    line-height: 1.9 !important;
}

/* ---------- 分类 ---------- */
.main .cate .cate-box {
    background: var(--surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--line);
    border-radius: 14px !important;
    padding: 14px 22px !important;
    min-width: 148px;
    margin: 0 12px 12px 0 !important;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.main .cate .cate-box:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
}
.main .cate .cate-box p {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #dbe6fa !important;
    margin-top: 0 !important;
    margin-bottom: 4px;
}
.main .cate .cate-box div {
    font-size: 12.5px !important;
    color: var(--text-3) !important;
    opacity: 1 !important;
}
.main .cate .cate-box-select,
.main .cate .cate-box-select:hover {
    background-image: var(--grad) !important;
    border-color: transparent !important;
    box-shadow: 0 6px 18px rgba(6, 12, 26, .4) !important;
}
.main .cate .cate-box-select p,
.main .cate .cate-box-select div { color: #fff !important; }
.main .cate .cate-box-select div { opacity: .85 !important; }

/* ---------- 商品列表 ---------- */
.goods-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    gap: 16px;
}
.main .goods .goods-box {
    position: relative;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.main .goods .goods-box:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong) !important;
    box-shadow: 0 10px 28px rgba(6, 12, 26, .45) !important;
}
/* HUD 边角（悬停显现，低饱和） */
.main .goods .goods-box::before,
.main .goods .goods-box::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 1px solid rgba(160, 196, 255, .38);
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
    z-index: 2;
}
.main .goods .goods-box::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.main .goods .goods-box::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.main .goods .goods-box:hover::before,
.main .goods .goods-box:hover::after { opacity: 1; }
.main .goods .picture {
    position: relative;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin: 0 !important;
    overflow: hidden;
}
/* 细微扫描线纹理 */
.main .goods .picture::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px);
    pointer-events: none;
}
.main .goods .picture img {
    display: block;
    width: 100% !important;
    height: 140px !important;
    object-fit: cover !important;
    border-radius: 0 !important;
    transition: transform .45s ease;
}
.main .goods .goods-box:hover .picture img { transform: scale(1.05); }
.main .goods .msg {
    display: block !important;
    padding: 14px 16px 16px;
}
.main .goods .msg .goods-name {
    font-size: 15.5px !important;
    font-weight: 600 !important;
    color: var(--text-1) !important;
    margin: 0 0 6px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.main .goods .msg .goods-price {
    font-size: 19px !important;
    font-weight: 800 !important;
    font-family: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    color: #7dbcff !important;
    letter-spacing: .3px;
    font-variant-numeric: tabular-nums;
}
.main .goods .msg .goods-price div {
    background: rgba(251, 99, 107, .14) !important;
    color: #ff8a91 !important;
    font-size: 12px;
    font-weight: 500;
    -webkit-text-fill-color: #ff8a91;
}
.main .goods .msg .goods-num { display: flex; align-items: center; margin-top: 10px; }
.main .goods .msg .goods-num div {
    display: block;
    flex: 1;
    width: auto !important;
    height: 5px;
    background: rgba(148, 184, 255, .12) !important;
    border-radius: 999px;
    overflow: hidden;
}
.main .goods .msg .goods-num div p {
    position: static;
    display: block;
    background: var(--grad) !important;
    border-radius: 999px;
}
.main .goods .msg .goods-num span {
    font-size: 12px !important;
    color: var(--text-3) !important;
    margin: 0 0 0 10px !important;
    white-space: nowrap;
}
/* 等宽数字 */
.price-num,
.main .goods .msg .goods-num span,
.main .cate .cate-box div {
    font-family: "Cascadia Mono", "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

/* ---------- 购买页 ---------- */
.main-box .goods-img img {
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.goods-msg .goods-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-1) !important;
    white-space: normal;
    overflow: visible;
}
.small-tips {
    display: inline-block;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 999px;
    margin-left: 8px;
    vertical-align: 2px;
}
.tips-green { background: rgba(18, 183, 106, .14) !important; color: #4ade9d !important; border: 1px solid rgba(18, 183, 106, .35); }
.tips-blue { background: rgba(77, 163, 255, .14) !important; color: #7dbcff !important; border: 1px solid rgba(77, 163, 255, .35); }
.tips-red { background: rgba(240, 68, 56, .14) !important; color: #ff8a91 !important; border: 1px solid rgba(240, 68, 56, .35); }

.price-sign { font-size: 16px !important; font-weight: 700 !important; color: var(--accent) !important; }
.price-num {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #7dbcff !important;
    letter-spacing: .5px;
}
.price-c, .price-c del { font-size: 13px !important; color: var(--muted) !important; }

.entry { display: flex; align-items: center; margin: 16px 0; }
.entry .l-msg {
    min-width: 88px;
    font-size: 14px !important;
    color: var(--text-2) !important;
    font-weight: 500;
}
.entry .input { flex: 1; display: flex; align-items: center; }
.entry .input input {
    width: 100%;
    height: 44px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: #1b2946;
    padding: 0 14px;
    font-size: 14px;
    color: var(--text-1);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.entry .input input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.entry .input input::placeholder { color: var(--muted); }
.entry .input .pay-num { width: 110px; flex: none; text-align: center; }
.entry .input .sub,
.entry .input .add { display: inline-flex; cursor: pointer; padding: 4px; opacity: .8; transition: opacity .2s ease; }
.entry .input .sub:hover,
.entry .input .add:hover { opacity: 1; }
.entry .input .sub svg,
.entry .input .add svg { width: 22px; height: 22px; }
.entry .input .sub svg path,
.entry .input .add svg path { fill: var(--text-3); }
.entry .input .sub:hover svg path,
.entry .input .add:hover svg path { fill: var(--accent); }
.captcha-img {
    height: 44px;
    margin-left: 12px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    cursor: pointer;
}

/* 支付方式 */
.pay-type {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px !important;
    margin: 0 12px 12px 0 !important;
    background: var(--surface-2);
    border: 1px solid var(--line-strong);
    border-radius: 12px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #c6d3ea !important;
    cursor: pointer;
    transition: all .2s ease;
}
.pay-type:hover { border-color: var(--accent); color: var(--accent) !important; }
.pay-type .icon { width: 20px; height: 20px; }
.pay-select,
.pay-select:hover {
    border-color: var(--accent) !important;
    color: #9ecbff !important;
    background: rgba(77, 163, 255, .12) !important;
    box-shadow: 0 0 0 3px var(--ring);
}

/* 购买按钮 */
.buy button,
.main-box .layui-btn {
    display: block;
    width: 100%;
    height: 50px;
    border: none;
    border-radius: 12px !important;
    background-image: var(--grad) !important;
    background-color: transparent !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 4px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(6, 12, 26, .38);
    transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.buy button:hover,
.main-box .layui-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 8px 22px rgba(6, 12, 26, .45);
}
.buy-prompt p {
    font-size: 12.5px !important;
    color: var(--muted) !important;
    text-align: center;
    margin-top: 12px;
}

/* 商品详情 */
.intro {
    font-size: 14.5px !important;
    color: var(--text-2) !important;
    line-height: 1.9 !important;
}
.intro img { max-width: 100%; border-radius: 12px; }

/* ---------- 订单查询页 ---------- */
.layui-card-body > p { font-size: 14px; color: var(--text-2); }
.layui-tab-title { border-bottom: 1px solid var(--line) !important; }
.layui-tab-title li { background: transparent; border-color: var(--line) !important; }
.layui-tab-title li a { color: var(--text-3) !important; font-size: 14px !important; }
.layui-tab-title li.layui-this { background: var(--surface-2); border-color: var(--line-strong) !important; }
.layui-tab-title li.layui-this a { color: var(--accent) !important; font-weight: 700 !important; }
.layui-tab-card { border: 1px solid var(--line) !important; box-shadow: none !important; }
.layui-tab-card > .layui-tab-title .layui-this { background: var(--surface-2) !important; }
/* 主题遗留的浅色分隔线，统一压暗（标题 div 的边框是模板内联样式，必须 !important） */
.main-box .title,
.pay-title { border-bottom: 1px solid var(--line) !important; }
.main-box .goods-msg .goods-name { border-bottom: 1px solid var(--line) !important; }
.pay { border-top: 1px solid var(--line) !important; }
.order-list { border-bottom: 1px solid var(--line) !important; }
.info-ui { color: var(--text-2) !important; }
.info-ui strong { color: var(--text-1) !important; }
.main-box input[type="text"],
.main-box input[type="number"],
.main-box input[type="password"],
.main-box textarea {
    border: 1px solid var(--line-strong) !important;
    border-radius: 10px !important;
    background: #1b2946 !important;
    color: var(--text-1) !important;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.main-box input[type="text"]:focus,
.main-box input[type="number"]:focus,
.main-box input[type="password"]:focus,
.main-box textarea:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--ring);
}

/* ---------- layui 弹层 ---------- */
.layui-layer {
    border-radius: 16px !important;
    border: 1px solid var(--line);
    background: var(--surface) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: hidden;
}
.layui-layer-title {
    background: var(--surface-2) !important;
    color: var(--text-1) !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--line) !important;
}
.layui-layer-content { color: var(--text-2) !important; }
.layui-layer-btn a {
    border-radius: 8px !important;
    background-image: var(--grad) !important;
    border: none !important;
}
.layui-layer-shade { background: rgba(4, 8, 16, .6) !important; }

/* ---------- 移动端悬浮按钮 ---------- */
.query-m a,
.order-m div {
    background: var(--surface-2) !important;
    border: 1px solid var(--line);
    color: var(--accent) !important;
    box-shadow: var(--shadow-md) !important;
    border-radius: 999px !important;
}
.query-m a span,
.order-m div span { color: var(--accent) !important; font-weight: 600; }

/* ---------- 页脚 ---------- */
.footer,
.footer div,
.footer p,
.footer a {
    font-size: 13px !important;
    color: var(--muted) !important;
}
.footer a:hover { color: var(--accent) !important; }

/* ---------- 静态质感细节（沉稳内敛，无动画） ---------- */
/* 公告标题前的静态小点 */
.title p.tit::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 8px;
    vertical-align: 1px;
    opacity: .8;
}
/* 主卡片低透明度 HUD 四角 */
.main-box::after {
    content: "";
    position: absolute;
    inset: 8px;
    pointer-events: none;
    opacity: .35;
    background:
        linear-gradient(90deg, rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) left top / 16px 1px no-repeat,
        linear-gradient(rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) left top / 1px 16px no-repeat,
        linear-gradient(90deg, rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) right top / 16px 1px no-repeat,
        linear-gradient(rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) right top / 1px 16px no-repeat,
        linear-gradient(90deg, rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) left bottom / 16px 1px no-repeat,
        linear-gradient(rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) left bottom / 1px 16px no-repeat,
        linear-gradient(90deg, rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) right bottom / 16px 1px no-repeat,
        linear-gradient(rgba(160, 196, 255, .55), rgba(160, 196, 255, .55)) right bottom / 1px 16px no-repeat;
}

/* ---------- 移动端适配 ---------- */
@media (max-width: 768px) {
    .header .header-box .info { font-size: 18px !important; }
    .goods-list { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
    .main .goods .picture img { height: 108px !important; }
    .entry { flex-wrap: wrap; }
    .entry .l-msg { min-width: 100%; margin-bottom: 6px; }
    .captcha-img { margin-left: 0; margin-top: 10px; }
}