/* Pen 风格覆盖：和 pen.ceo 主站同一套墨蓝 + 笔尖金。只改前台购卡页，接在主题 CSS 之后加载。 */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Noto+Serif+SC:wght@700;900&family=Noto+Sans+SC:wght@400;500;700&display=swap");

/* 主站只有深色，亮/暗两套变量都指向同一组 */
:root[data-theme] {
    --pen-ink: #0f1a30;
    --pen-ink-deep: #0a1324;
    --pen-nib: #c9a45c;
    --pen-nib-soft: #e3cf9f;
    --pen-paper: #e8e4da;
    --pen-mist: #93a0b8;
    --pen-rule: rgba(201, 164, 92, .22);
    --pen-serif: "Instrument Serif", "Noto Serif SC", serif;
    --pen-serif-sc: "Noto Serif SC", serif;
    --pen-sans: "Noto Sans SC", system-ui, sans-serif;

    --md-primary: #c9a45c;
    --md-primary-rgb: 201, 164, 92;
    --md-on-primary: #0f1a30;
    --uc-primary-deep: #c9a45c;
    --glass-bg: rgba(10, 19, 36, .72);
    --glass-bg-strong: rgba(10, 19, 36, .92);
    --glass-bg-soft: rgba(255, 255, 255, .025);
    --glass-border: rgba(201, 164, 92, .22);
    --glass-border-soft: rgba(201, 164, 92, .14);
    --glass-hi: none;
    --glass-filter: blur(14px);
    --glass-filter-strong: blur(18px);
    --glass-shadow: none;
    --glass-shadow-lg: 0 18px 40px rgba(0, 0, 0, .35);
    --uc-field-bg: rgba(255, 255, 255, .04);
    --uc-ink: #e8e4da;
    --uc-ink-med: #93a0b8;
    --uc-ink-dis: #66728a;
    --uc-focus: #c9a45c;
    --uc-focus-rgb: 201, 164, 92;
    color-scheme: dark;
}

/* 底色：去掉后台背景图，换成主站 hero 那道金色微光 */
:root[data-theme] body.uc-body {
    background: var(--pen-ink) !important;
    color: var(--pen-paper);
    font-family: var(--pen-sans);
    -webkit-font-smoothing: antialiased;
}
:root[data-theme] body.uc-body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(60% 50% at 78% 12%, rgba(201, 164, 92, .10), transparent 70%);
}
::selection { background: rgba(201, 164, 92, .35); }
a { color: inherit; }

/* ---------- 顶栏：主站那种贴顶细线条，不要胶囊浮条 ---------- */
.uc-topbar {
    padding: 0;
    background: rgba(15, 26, 48, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--pen-rule);
}
.shop-nav {
    height: 64px;
    padding: 0 16px;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}
.shop-brand { gap: 10px; color: var(--pen-nib); }
.shop-brand img { display: none; }
.shop-brand__name {
    font: 700 22px/1 var(--pen-serif-sc);
    letter-spacing: .01em;
    color: var(--pen-nib);
}
.shop-nav__item { color: var(--pen-mist); }
.shop-nav__item:hover { color: var(--pen-paper); background: transparent; }
.shop-nav__item.active {
    color: var(--pen-nib);
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--pen-nib);
    border-radius: 0;
}
.shop-search__box {
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid var(--pen-rule) !important;
    box-shadow: none !important;
}
.shop-search__box input { color: var(--pen-paper); }
.shop-search__box input::placeholder { color: var(--pen-mist); }
.shop-icon-btn { color: var(--pen-mist); }
.shop-icon-btn:hover { color: var(--pen-paper); }
/* 只有一套深色，切换按钮没意义 */
.shop-theme-btn { display: none !important; }

/* 胶囊按钮：主站 .btn.solid / .btn.ghost */
.shop-btn { border-radius: 999px; }
.shop-btn--primary {
    color: var(--pen-ink);
    background: var(--pen-nib);
    box-shadow: none;
}
.shop-btn--primary:hover { background: var(--pen-nib-soft); filter: none; }
.shop-btn--ghost {
    color: var(--pen-nib);
    background: transparent;
    border: 1px solid var(--pen-nib);
}
.shop-btn--ghost:hover { color: var(--pen-nib); background: rgba(201, 164, 92, .1); border-color: var(--pen-nib); }

.shop-lang__menu, .shop-user__menu, .shop-drawer {
    background: var(--pen-ink-deep) !important;
    border: 1px solid var(--pen-rule) !important;
}

/* ---------- 面板：去玻璃，留细金线 ---------- */
.panel {
    background: rgba(10, 19, 36, .55);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--pen-rule);
    border-radius: 20px;
    box-shadow: none;
}
.panel + .panel { margin-top: 24px; }
.panel-header {
    padding: 22px 24px 14px;
    border-bottom: 1px solid var(--pen-rule);
}
.panel-header .icon { display: none; }
.panel-title {
    font: 700 22px/1.2 var(--pen-serif-sc);
    color: var(--pen-paper);
    letter-spacing: .02em;
}
.panel-body {
    padding: 20px 24px 24px;
    color: var(--pen-mist);
    font-size: 15px;
    line-height: 1.85;
}
.panel-body b, .panel-body strong { color: var(--pen-nib); font-weight: 500; }
.panel-body a { color: var(--pen-nib); }

/* ---------- 分类：主站 .demo-tabs 那种描边胶囊 ---------- */
.chip {
    height: 40px;
    padding: 0 20px;
    color: var(--pen-mist);
    background: transparent;
    border: 1px solid var(--pen-rule);
    font-size: 15px;
}
.chip:hover { color: var(--pen-paper); border-color: var(--pen-nib); }
.chip.is-primary {
    color: var(--pen-ink);
    background: var(--pen-nib);
    border-color: var(--pen-nib);
    box-shadow: none;
}
.chip .chip-icon { display: none; }

/* ---------- 商品卡：主站 .plan 的细线卡片 ---------- */
.acg-card {
    border-radius: 16px;
    background: rgba(255, 255, 255, .02);
    border: 1px solid var(--pen-rule);
    box-shadow: none;
}
.item-card-cell:hover .acg-card {
    transform: translateY(-3px);
    border-color: rgba(201, 164, 92, .55);
    box-shadow: 0 0 0 1px rgba(201, 164, 92, .2), 0 18px 40px rgba(0, 0, 0, .35);
}
.acg-thumb { border-bottom: 1px solid var(--pen-rule); }
.acg-card > .acg-body { padding: 12px 14px 12px; gap: 6px; }
.goods-title { font: 500 15px/1.4 var(--pen-sans); color: var(--pen-paper); }
.stat-bottom { color: var(--pen-mist); font-size: 12px; }

/* 价格：主站 .price 的衬线金色数字 */
.price,
:root[data-theme="dark"] .price {
    font: 400 30px/1 var(--pen-serif);
    color: var(--pen-nib);
    font-variant-numeric: lining-nums;
}
.price .unit { font: 500 13px/1 var(--pen-sans); color: var(--pen-mist); margin-right: 3px; vertical-align: .9em; }
.item-buy .abacus .price, .abacus .price { font: 400 48px/1 var(--pen-serif); }
.item-buy .abacus .price .unit { font: 500 15px/1 var(--pen-sans); color: var(--pen-mist); vertical-align: 1.4em; }

/* 徽章统一成一种低调的金线小标签 */
.badge-soft,
.badge-soft-primary, .badge-soft-success, .badge-soft-info, .badge-soft-warning, .badge-soft-muted {
    color: var(--pen-nib) !important;
    background: rgba(201, 164, 92, .08) !important;
    border: 1px solid rgba(201, 164, 92, .22) !important;
}
.badge-soft-danger { color: #e88a8a !important; background: rgba(232, 138, 138, .08) !important; border: 1px solid rgba(232, 138, 138, .25) !important; }

.soldout-ribbon {
    background: var(--pen-nib);
    color: var(--pen-ink);
    border-top: 1px solid var(--pen-rule);
    border-bottom: 1px solid var(--pen-rule);
    box-shadow: none;
}
.acg-card.soldout { opacity: .5; filter: grayscale(.4); }

/* ---------- 商品详情 / 下单 ---------- */
.acg-cover { border: 1px solid var(--pen-rule); background: var(--pen-ink-deep); }
.item-buy > h4, h4 {
    font: 700 30px/1.25 var(--pen-serif-sc);
    color: var(--pen-paper);
    letter-spacing: .01em;
}
.buy-divider { background: var(--pen-rule); }
.form-label { color: var(--pen-mist); }

/* 宝贝类型 / SKU：选中铺金 */
.sku {
    padding: 10px 18px;
    border-radius: 999px;
    color: var(--pen-paper);
    background: transparent;
    border: 1px solid var(--pen-rule);
    font-size: 14px;
}
.sku:hover { border-color: var(--pen-nib); color: var(--pen-paper); }
.sku.is-primary { color: var(--pen-ink); background: var(--pen-nib); border-color: var(--pen-nib); }
.sku .badge-money { opacity: .75; }

.form-control, .form-select, .qty-group, .captcha-group input {
    color: var(--pen-paper) !important;
    background-color: rgba(255, 255, 255, .04) !important;
    border-color: var(--pen-rule) !important;
}
.form-control::placeholder { color: var(--uc-ink-dis) !important; }
.form-control:focus { border-color: var(--pen-nib) !important; box-shadow: 0 0 0 3px rgba(201, 164, 92, .15) !important; }

.btn-primary { border-radius: 999px !important; }
.cash-pay {
    border-radius: 16px !important;
    background: rgba(255, 255, 255, .02) !important;
    border: 1px solid var(--pen-rule) !important;
    box-shadow: none !important;
}
.qty-group input::-webkit-outer-spin-button,
.qty-group input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-group input { -moz-appearance: textfield; }
.btn-primary {
    color: var(--pen-ink) !important;
    background: var(--pen-nib) !important;
    border-color: var(--pen-nib) !important;
    box-shadow: none !important;
}
.btn-primary:hover { background: var(--pen-nib-soft) !important; border-color: var(--pen-nib-soft) !important; }

/* 弹层（付款、提示）也跟着变深 */
.layui-layer {
    background: var(--pen-ink-deep) !important;
    color: var(--pen-paper) !important;
    border: 1px solid var(--pen-rule) !important;
}
.layui-layer-title {
    background: transparent !important;
    color: var(--pen-paper) !important;
    border-bottom: 1px solid var(--pen-rule) !important;
}

footer { color: var(--pen-mist); border-top: 1px solid var(--pen-rule); }

:focus-visible { outline: 2px solid var(--pen-nib); outline-offset: 3px; }