@charset "UTF-8";
/* ==========================================================================
   墨云阁商城 · 视觉层（大厂质感铁律）
   —— 类名与结构完全沿用，只换视觉：去边框 / luminance 分层 / 双环输入框
      / tabular-nums / text-wrap:pretty / 弹簧感动效曲线
   ========================================================================== */
:root{
    /* 品牌 */
    --accent:#c0392b; --accent-dark:#a93226; --accent-soft:#fdf1ee; --accent-line:#f2ddd9;

    /* 铁律1：明度阶梯，禁纯黑 */
    --bg:#f5f5f3;
    --paper:#fcfcfb;
    --lay-2:#ffffff;
    --lay-3:#f0f0ed;
    --lay-hover:#f7f7f4;

    /* 兼容旧变量名（内部仍被引用） */
    --border:#eceae7;
    --border-soft:#f2f1ee;

    /* 文字：带温度的近黑 */
    --text:#1c1c1b; --text-2:#5d5d59; --text-3:#8e8e88;

    --radius:14px; --radius-sm:12px;
    --shadow:0 1px 2px rgba(28,28,27,.04);
    --shadow-2:0 2px 4px rgba(28,28,27,.045), 0 14px 30px -22px rgba(28,28,27,.20);
    --shadow-hover:0 2px 6px rgba(28,28,27,.06), 0 18px 40px -22px rgba(192,57,43,.26);

    /* 铁律4/9 同款缓动 */
    --ease-out:cubic-bezier(.215,.61,.355,1);
    --ease-spring:cubic-bezier(.34,1.28,.64,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;font-size:15px}
body{
    margin:0;min-height:100vh;color:var(--text);background:var(--bg);
    font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",sans-serif;
    line-height:1.66;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--accent);text-decoration:none}
button{font:inherit;cursor:pointer}
input,select{font:inherit;color:var(--text)}
img{max-width:100%}
/* 铁律8：正文防孤字 */
p, .notice-body, .card-title, .form-note, .kv dd, .pick-body b{text-wrap:pretty}
/* 铁律6：数字防抖 */
.card-price, .goods-count, .hd-dot b, .pay-amount, .dlg-count, .kv dd, .stat-num{
    font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1
}
/* 铁律5：行内图标 */
svg{vertical-align:-0.125em}


/* ==========================================================================
   铁律3 · 暗色模式：明度阶梯 #0b0b0a / #151515 / #1a1a19 / #20201e
   字重整体 -40，防白字发胖
   ========================================================================== */
html[data-theme="dark"]{
    --bg:#0b0b0a;
    --paper:#151515;
    --lay-2:#1a1a19;
    --lay-3:#20201e;
    --lay-hover:#232321;
    --border:#262624;
    --border-soft:#1e1e1d;

    --text:#ececeb;
    --text-2:#a3a39d;
    --text-3:#78786f;

    --accent:#e26d5c;
    --accent-dark:#f08373;
    --accent-soft:#2a1b18;
    --accent-line:#3a2622;

    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 2px 6px rgba(0,0,0,.45), 0 16px 36px -22px rgba(0,0,0,.8);
    --shadow-hover:0 3px 8px rgba(0,0,0,.5), 0 20px 44px -22px rgba(226,109,92,.28);

    /* 铁律3：字重全降 40 */
    --w-body:360;
    --w-med:460;
    --w-strong:560;
}
/* 暗色下正文/标题字重（原来写死的 650/700 走变量） */
html[data-theme="dark"] body{font-weight:360}
html[data-theme="dark"] .hd-brand b,
html[data-theme="dark"] .hero-copy h1,
html[data-theme="dark"] .card-price,
html[data-theme="dark"] .pay-amount,
html[data-theme="dark"] .notice-wallet b,
html[data-theme="dark"] .panel-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .hd-nav a.on{font-weight:560}
html[data-theme="dark"] .hd{background:rgba(11,11,10,.82);box-shadow:0 1px 0 rgba(255,255,255,.045)}
html[data-theme="dark"] .card-cover{
    background:linear-gradient(140deg,#241b19 0%, #1c1c1b 55%, #171716 100%);
    color:rgba(226,109,92,.30)}
html[data-theme="dark"] .card-ini{color:rgba(226,109,92,.30)}
html[data-theme="dark"] .card-cover .badge{background:rgba(26,26,25,.86);color:var(--text-2)}
html[data-theme="dark"] .card-wm{background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
html[data-theme="dark"] .card-wm .wm-logo{background:rgba(255,255,255,.85)}
html[data-theme="dark"] .mask{background:rgba(0,0,0,.6)}
html[data-theme="dark"] .dialog{box-shadow:0 28px 70px rgba(0,0,0,.7)}
html[data-theme="dark"] .toast{box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05)}
html[data-theme="dark"] .search:focus-within{box-shadow:inset 0 0 0 1px rgba(226,109,92,.6), 0 0 0 4px rgba(226,109,92,.18)}
html[data-theme="dark"] .form-row input:focus{box-shadow:inset 0 0 0 1px rgba(226,109,92,.6), 0 0 0 4px rgba(226,109,92,.18)}
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-sm.btn-primary,
html[data-theme="dark"] .hd-login,
html[data-theme="dark"] .btn-ghost2{color:#16100f}
html[data-theme="dark"] .pay-qr{background:#fff}
html[data-theme="dark"] .tabbar{background:rgba(21,21,20,.96);box-shadow:0 -1px 0 rgba(255,255,255,.05)}
html[data-theme="dark"] .toast.error{color:#f0907f}
html[data-theme="dark"] .toast.success{color:#7fc48a}

/* 主题切换按钮 */
.theme-btn{
    width:34px;height:34px;border:0;border-radius:999px;background:var(--lay-2);
    box-shadow:0 1px 2px rgba(28,28,27,.05);cursor:pointer;display:grid;place-items:center;
    color:var(--text-2);transition:background .24s var(--ease-out), color .24s var(--ease-out), transform .3s var(--ease-spring);
    flex:0 0 auto;
}
.theme-btn:hover{background:var(--lay-hover);color:var(--accent)}
.theme-btn:active{transform:scale(.94)}
.theme-btn svg{width:16px;height:16px;fill:currentColor;vertical-align:0}
html[data-theme="dark"] .theme-btn i{transform:rotate(180deg)}
.theme-btn i{display:block;transition:transform .5s var(--ease-out)}

/* 铁律4 · 公告流式打字 */
.typing-on .ch{
    display:inline;
    opacity:0;filter:blur(6px);
    animation:typeIn .09s cubic-bezier(.215,.61,.355,1) forwards;
    animation-delay:calc(var(--i) * 30ms);
}
@keyframes typeIn{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}
.typing-caret{display:inline-block;width:2px;height:1em;vertical-align:-.14em;margin-left:1px;
    background:var(--accent);border-radius:2px;animation:caretBlink 1s steps(2) infinite}
@keyframes caretBlink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){
    .typing-on .ch{animation:none!important;opacity:1!important;filter:none!important}
    .typing-caret{display:none}
}


/* ==========================================================================
   复刻博客 .tool-btn / .theme-toggle（同尺寸同交互）
   ========================================================================== */
.tool-btn{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;padding:0;
    background:transparent;border:1px solid transparent;border-radius:10px;
    cursor:pointer;color:var(--text-2);
    transition:background-color .2s, border-color .2s, color .2s, transform .15s;
    flex:0 0 auto;
}
.tool-btn:hover{background:var(--accent-soft);color:var(--accent)}
.tool-btn:active{transform:scale(.92)}
.tool-btn svg{display:block;flex-shrink:0;max-width:none;max-height:none}
.theme-toggle .icon-sun,.theme-toggle .icon-moon{transition:transform .3s}
.theme-toggle:hover .icon-sun{transform:rotate(30deg)}
.theme-toggle:hover .icon-moon{transform:rotate(-15deg)}
html[data-theme="dark"] .tool-btn:hover{background:var(--lay-3);color:var(--accent)}

/* 品牌 logo（博客同款明暗双版本） */
.brand-logo{width:150px;height:auto;display:block;filter:drop-shadow(0 8px 24px rgba(28,28,27,.10))}
.brand-logo.is-dark{display:none}
html[data-theme="dark"] .brand-logo.is-light{display:none}
html[data-theme="dark"] .brand-logo.is-dark{display:block}

/* ---------------- 顶栏（无边框，靠明度 + 模糊浮起） ---------------- */
.hd{
    position:sticky;top:0;z-index:60;height:60px;
    background:rgba(245,245,243,.82);backdrop-filter:saturate(180%) blur(14px);
    box-shadow:0 1px 0 rgba(28,28,27,.045);
}
.hd-in{max-width:1200px;height:100%;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:22px}
.hd-brand{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.hd-brand img.site-logo{width:30px;height:30px;border-radius:50%;display:block;flex:0 0 auto}
/* 博客同款：明暗双 logo 按主题切换 */
.hd-brand .logo-for-dark{display:none!important}
html[data-theme="dark"] .hd-brand .logo-for-light{display:none!important}
html[data-theme="dark"] .hd-brand .logo-for-dark{display:block!important}
.hd-brand b{font-size:16px;font-weight:650;color:var(--text);letter-spacing:.01em;white-space:nowrap}
.hd-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto}
.hd-nav a{
    position:relative;font-size:14px;color:var(--text-2);padding:0 12px;height:60px;
    display:flex;align-items:center;transition:color .24s var(--ease-out);
}
.hd-nav a:hover{color:var(--accent)}
.hd-nav a.on{color:var(--accent);font-weight:560}
.hd-nav a.on:after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--accent);border-radius:2px}
.hd-right{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
.hd-login{
    background:var(--accent);color:#fff;font-size:13px;font-weight:560;
    padding:8px 17px;border-radius:10px;transition:background .24s var(--ease-out),transform .3s var(--ease-spring);
}
.hd-login:hover{background:var(--accent-dark);color:#fff}
.hd-login:active{transform:scale(.975)}
.hd-dot{
    display:flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;
    background:var(--lay-2);box-shadow:var(--shadow-1, 0 1px 2px rgba(28,28,27,.05));
    font-size:12.5px;color:var(--text-2);transition:background .24s var(--ease-out);
}
.hd-dot:hover{background:var(--lay-hover)}
.hd-dot b{color:var(--accent);font-size:14px}
.hd-dot em{font-style:normal;font-size:11.5px;color:var(--accent);opacity:.85}
.hd-back{
    font-size:12.5px;color:var(--text-3);padding:6px 13px;border-radius:999px;
    background:var(--lay-2);box-shadow:0 1px 2px rgba(28,28,27,.05);transition:.24s var(--ease-out);
}
.hd-back:hover{color:var(--accent);background:var(--lay-hover)}

/* ---------------- 布局 ---------------- */
.wrap{max-width:1200px;margin:0 auto;padding:20px 20px 40px}
.panel{background:var(--paper);border-radius:var(--radius);padding:20px 22px;box-shadow:var(--shadow)}
.panel-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:620;color:var(--text);margin-bottom:12px}
.panel-title .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:0 0 auto}

/* ---------------- Hero ---------------- */
.hero{display:grid;grid-template-columns:1fr 340px;gap:16px;margin-bottom:16px}
.hero-main{
    position:relative;overflow:hidden;background:var(--paper);border-radius:var(--radius);
    padding:38px 34px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow);
}
.hero-main:before{
    content:"";position:absolute;right:-80px;top:-120px;width:340px;height:340px;border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(192,57,43,.055) 0%, rgba(192,57,43,0) 70%);
    pointer-events:none;
}
.hero-copy{flex:1 1 auto;min-width:0;position:relative}
.hero-tag{font-size:12px;color:var(--accent);letter-spacing:.2em;font-weight:600}
.hero-copy h1{margin:10px 0 8px;font-size:31px;line-height:1.32;font-weight:700;letter-spacing:-.01em}
.hero-copy p{margin:0 0 20px;font-size:13.5px;color:var(--text-2)}
.hero-acts{display:flex;gap:10px;flex-wrap:wrap}
.hero-logo{flex:0 0 auto;width:150px;display:flex;align-items:center;justify-content:center}
.hero-logo img{width:150px;height:auto;filter:drop-shadow(0 8px 24px rgba(28,28,27,.10))}
.hero-logo .brand-logo{width:150px}

.hero-notice{background:var(--paper);border-radius:var(--radius);padding:20px 22px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.notice-body{font-size:13px;color:var(--text-2);line-height:1.9;flex:1 1 auto;max-height:210px;overflow:auto}
.notice-wallet{
    margin-top:14px;padding-top:14px;
    box-shadow:inset 0 1px 0 var(--border-soft);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.notice-wallet span{display:block;font-size:12px;color:var(--text-3)}
.notice-wallet b{font-size:20px;color:var(--accent);font-weight:660;font-variant-numeric:tabular-nums}
.mini-btn{
    font-size:12.5px;color:var(--accent);background:var(--accent-soft);
    border-radius:8px;padding:5px 13px;white-space:nowrap;transition:.22s var(--ease-out);border:0;
}
.mini-btn:hover{background:#fbe6e2}

/* ---------------- 按钮 ---------------- */
.btn{
    display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 21px;
    border-radius:10px;border:0;font-size:14px;font-weight:560;
    background:var(--lay-3);color:var(--text);
    transition:background .24s var(--ease-out), transform .3s var(--ease-spring), color .24s var(--ease-out);
}
.btn:hover{background:var(--lay-hover)}
.btn:active{transform:scale(.975)}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn-ghost{background:var(--lay-2);color:var(--text-2);box-shadow:0 1px 2px rgba(28,28,27,.05)}
.btn-ghost:hover{color:var(--accent);background:var(--lay-hover)}
.btn-block{width:100%}
.btn-sm{
    height:34px;padding:0 16px;border-radius:9px;border:0;background:var(--lay-3);
    color:var(--text-2);font-size:13px;transition:background .22s var(--ease-out),color .22s var(--ease-out),transform .3s var(--ease-spring);
}
.btn-sm:hover{background:var(--lay-hover);color:var(--accent)}
.btn-sm:active{transform:scale(.97)}
.btn-sm.btn-primary{background:var(--accent);color:#fff}
.btn-sm.btn-primary:hover{background:var(--accent-dark);color:#fff}
.btn:disabled,.btn-sm:disabled{opacity:.55;cursor:default}

/* ---------------- 商品区 ---------------- */
.goods-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.search{
    display:flex;align-items:center;gap:8px;flex:0 1 380px;height:40px;padding:0 14px;
    border-radius:999px;background:var(--lay-3);color:var(--text-3);
    transition:background .24s var(--ease-out), box-shadow .26s var(--ease-out);
}
.search:focus-within{
    background:var(--lay-2);
    /* 铁律2：双环 */
    box-shadow:inset 0 0 0 1px rgba(192,57,43,.55), 0 0 0 4px rgba(192,57,43,.13);
}
.search input{flex:1 1 auto;min-width:0;border:0;outline:none;background:transparent;font-size:13.5px}
.search input:-webkit-autofill{-webkit-text-fill-color:var(--text);
    transition:background-color 9999s ease-out 0s;box-shadow:inset 0 0 0 100px var(--lay-3)}
.goods-count{font-size:12.5px;color:var(--text-3)}
.goods-count b{color:var(--text-2);font-variant-numeric:tabular-nums}

.cat-tabs{
    display:flex;gap:2px;overflow-x:auto;margin-bottom:16px;scrollbar-width:none;
    box-shadow:inset 0 -1px 0 var(--border-soft);
}
.cat-tabs::-webkit-scrollbar{display:none}
.cat-tabs button{
    flex:0 0 auto;background:none;border:0;padding:0 14px 11px;font-size:13.5px;color:var(--text-2);
    position:relative;white-space:nowrap;transition:color .22s var(--ease-out);
}
.cat-tabs button:hover{color:var(--accent)}
.cat-tabs button.on{color:var(--accent);font-weight:560}
.cat-tabs button.on:after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2px;background:var(--accent);border-radius:2px}
.cat-tabs .cnt{font-size:11px;color:var(--text-3);margin-left:3px;font-variant-numeric:tabular-nums}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:14px}

.card{
    position:relative;display:flex;flex-direction:column;background:var(--lay-2);
    border-radius:var(--radius-sm);overflow:hidden;box-shadow:var(--shadow);
    transition:transform .34s var(--ease-out), box-shadow .34s var(--ease-out);
    cursor:pointer;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.card-cover{
    position:relative;height:104px;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(140deg, rgba(192,57,43,.075) 0%, #f6f5f1 55%, #f0efeb 100%);
    font-size:34px;font-weight:700;color:rgba(192,57,43,.32);letter-spacing:.02em;user-select:none;
}
.card-cover .badge{
    position:absolute;right:8px;top:8px;font-size:11px;padding:2px 9px;border-radius:9px;
    background:rgba(255,255,255,.92);color:var(--text-2);font-weight:500;z-index:3;
    backdrop-filter:blur(4px);
}
.card-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto}
.card-title{
    font-size:13.5px;font-weight:560;color:var(--text);line-height:1.5;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px;
}
.card-meta{font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:6px}
.card-price{font-size:17px;font-weight:660;color:var(--accent);line-height:1.2}
.card-price em{font-style:normal;font-size:11px;color:var(--text-3);font-weight:400;margin-left:2px}
.card-go{font-size:12px;color:var(--accent);background:var(--accent-soft);border-radius:8px;padding:4px 12px;white-space:nowrap}

/* 铁律1 + 水印 */
.card-mask{position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg,rgba(16,16,15,0) 46%,rgba(16,16,15,.42) 100%)}
.card-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card-ini{position:relative;z-index:1;font-size:34px;font-weight:700;color:rgba(192,57,43,.34)}
.card-wm{
    position:absolute;right:7px;bottom:7px;z-index:2;display:inline-flex;align-items:center;gap:4px;
    padding:2px 8px 2px 5px;border-radius:999px;font-size:10.5px;font-weight:560;line-height:1.6;
    color:#fff;background:rgba(16,16,15,.42);backdrop-filter:blur(5px);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.card-wm .wm-logo{width:13px;height:13px;border-radius:50%;display:block;flex:0 0 auto;
    background:rgba(255,255,255,.92);object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.3)}
.card-wm .wm-txt{font-style:normal;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.empty-state{text-align:center;padding:40px 10px;color:var(--text-3)}
.empty-state b{display:block;font-size:15px;color:var(--text-2);margin-bottom:6px}
.empty-state span{font-size:12.5px}

/* ---------------- 表单（铁律2：双环） ---------------- */
.form-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.form-row label{flex:0 0 84px;font-size:13.5px;color:var(--text-2)}
.form-row input{
    flex:1 1 auto;min-width:0;height:42px;padding:0 13px;border:0;border-radius:10px;
    outline:none;background:var(--lay-3);transition:background .24s var(--ease-out), box-shadow .26s var(--ease-out);
    font-size:13.5px;
}
.form-row input::placeholder{color:var(--text-3)}
.form-row input:hover{background:var(--lay-hover)}
.form-row input:focus{
    background:var(--lay-2);
    box-shadow:inset 0 0 0 1px rgba(192,57,43,.55), 0 0 0 4px rgba(192,57,43,.13);
}
.form-row .static{flex:1 1 auto;min-width:0;font-size:13px;color:var(--text-2);line-height:1.6;word-break:break-all}
.form-note{margin:2px 0 0;font-size:12px;color:var(--text-3)}
.track-panel{max-width:640px;margin:0 auto}
.track-panel .btn-block{margin-top:6px}

/* ---------------- 查询结果 ---------------- */
.result{margin-top:16px}
.result:empty{display:none}
.rcard{background:var(--lay-2);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:12px;box-shadow:var(--shadow)}
.rcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.rcard-top h4{margin:0;font-size:13.5px;font-weight:580;line-height:1.5;word-break:break-all}
.badge2{flex:0 0 auto;font-size:11.5px;padding:2px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-weight:500}
.bar{height:5px;background:var(--lay-3);border-radius:5px;overflow:hidden;margin:4px 0 12px}
.bar > i{display:block;height:100%;background:var(--accent);border-radius:5px;transition:width .5s var(--ease-out)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin:0;font-size:12.5px}
.kv dt{color:var(--text-3);font-size:11.5px;margin:0 0 1px}
.kv dd{margin:0;color:var(--text-2);word-break:break-all}
.kv > div{min-width:0}

/* ---------------- 弹窗 ---------------- */
.mask{position:fixed;inset:0;z-index:100;background:rgba(16,16,15,.42);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(2px)}
.mask[hidden]{display:none}
.dialog{
    width:100%;max-width:520px;background:var(--lay-2);border-radius:16px;
    box-shadow:0 24px 60px rgba(16,16,15,.22);display:flex;flex-direction:column;max-height:88vh;
    animation:pop .26s var(--ease-spring);
}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 12px;box-shadow:inset 0 -1px 0 var(--border-soft)}
.dialog-head h3{margin:0;font-size:15px;font-weight:600}
.dialog-close{border:0;background:none;font-size:20px;line-height:1;color:var(--text-3);padding:0 4px;transition:color .2s var(--ease-out)}
.dialog-close:hover{color:var(--accent)}
.dialog-body{padding:16px 20px;overflow:auto}
.dialog-body p{margin:0 0 12px;font-size:13px;color:var(--text-2);line-height:1.8}
.dialog-body[hidden]{display:none}
.dialog-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 20px 15px;box-shadow:inset 0 1px 0 var(--border-soft)}
.dlg-count{font-size:12.5px;color:var(--text-3)}
.dlg-actions{display:flex;gap:8px}

.pick{
    display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:10px;
    background:var(--lay-3);margin-bottom:8px;cursor:pointer;
    transition:background .22s var(--ease-out), box-shadow .26s var(--ease-out);
}
.pick:hover{background:var(--lay-hover)}
.pick:has(input:checked){background:var(--accent-soft);box-shadow:inset 0 0 0 1px rgba(192,57,43,.28)}
.pick input{margin:2px 0 0;width:15px;height:15px;accent-color:var(--accent);flex:0 0 auto}
.pick-body{min-width:0}
.pick-body b{display:block;font-size:13px;font-weight:560;line-height:1.55;word-break:break-all}
.pick-body em{display:block;font-style:normal;font-size:11.5px;color:var(--text-3);margin-top:3px}

.pay-box{text-align:center;padding:4px 0}
.pay-amount{font-size:32px;font-weight:700;color:var(--accent);line-height:1.2}
.pay-label{font-size:12.5px;color:var(--text-3);margin-bottom:4px}
.pay-qr{width:170px;height:170px;display:block;margin:14px auto;border-radius:10px;background:#fff;box-shadow:var(--shadow)}
.pay-link{font-size:12px;color:var(--text-3);word-break:break-all}
.pay-state{margin-top:8px;font-size:12.5px;color:var(--accent)}

/* ---------------- toast ---------------- */
.toast-wrap{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{
    background:var(--lay-2);border-radius:10px;box-shadow:0 8px 26px rgba(16,16,15,.14);
    padding:10px 15px;font-size:13px;color:var(--text-2);max-width:78vw;
    box-shadow:0 8px 26px rgba(16,16,15,.14), inset 0 0 0 1px rgba(28,28,27,.04);
    animation:pop .24s var(--ease-spring);
    position:relative;overflow:hidden;
}
.toast:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.toast.error{color:#a93226}
.toast.error:before{background:#c0392b}
.toast.success{color:#2f7d3a}
.toast.success:before{background:#3d8b4a}

/* ---------------- 广告轮播 ---------------- */
.hero-main.has-banner{padding:0;overflow:hidden;min-height:300px;display:block}
.carousel{position:relative;width:100%;height:100%;min-height:300px}
.carousel .slide{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease-out);pointer-events:none;display:block}
.carousel .slide.on{opacity:1;pointer-events:auto}
.carousel .slide img{width:100%;height:100%;object-fit:cover;display:block}
.carousel .slide-mask{position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(16,16,15,.42) 0%,rgba(16,16,15,.12) 45%,rgba(16,16,15,0) 72%),
               linear-gradient(0deg,rgba(16,16,15,.30) 0%,rgba(16,16,15,0) 45%)}
.carousel .slide-title{position:absolute;left:26px;bottom:24px;right:26px;color:#fff;font-size:20px;font-weight:650;
    text-shadow:0 2px 12px rgba(0,0,0,.35);letter-spacing:.01em;line-height:1.4}
.carousel .dots{position:absolute;right:18px;bottom:16px;display:flex;gap:6px;z-index:3}
.carousel .dot{width:7px;height:7px;border-radius:50%;border:0;background:rgba(255,255,255,.55);padding:0;transition:.26s var(--ease-out)}
.carousel .dot.on{background:#fff;width:18px;border-radius:4px}

/* ---------------- 底部 tabbar（仅手机显示） ---------------- */
.tabbar{display:none}


/* ==========================================================================
   Aura 描边光环（参考 daisyUI Aura：光沿元素边框跑动）
   —— 做法：conic-gradient 用 mask 抠成 2px 边框环，再旋转渐变角度
   —— 性能：只影响按钮大小的伪元素；只给主按钮；reduced-motion 自动静止
   —— 兼容：@property 不被支持时自动退化为静态描边（不报错、不丢样式）
   ========================================================================== */
@property --aura-a {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.aura,
.btn-primary:not(:disabled),
.hd-login{
    position:relative;
    isolation:isolate;
}

/* 边框光环本体：inset 负 2px 铺到按钮外沿，padding 2px 决定环的粗细 */
.aura::before,
.btn-primary:not(:disabled)::before,
.hd-login::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    padding:2px;                 /* ← 环的粗细 */
    background:conic-gradient(
        from var(--aura-a),
        rgba(192,57,43,.34) 0deg,        /* 常亮细边（品牌红，深浅底都可见） */
        rgba(192,57,43,.34) 44deg,
        rgba(255,138,110,.95) 68deg,     /* 光带 */
        rgba(255,217,194,1) 84deg,
        rgba(255,255,255,1) 90deg,
        rgba(255,217,194,1) 96deg,
        rgba(255,138,110,.95) 112deg,
        rgba(192,57,43,.34) 136deg,
        rgba(192,57,43,.34) 360deg
    );
    /* 抠出「内容盒之外」那一圈，即只有边框发光 */
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:1;
    animation:auraBorder 5s linear infinite;
}
@keyframes auraBorder{
    to{--aura-a:360deg}
}

/* 悬停时环更亮一点（不改变布局） */
.aura:hover::before,
.btn-primary:not(:disabled):hover::before,
.hd-login:hover::before{
    filter:brightness(1.12) saturate(1.06);
}

/* 小按钮：默认静止且透明，hover/聚焦才跑光（避免一屏十几个动画） */
.aura-hover{position:relative;isolation:isolate}
.aura-hover::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    padding:2px;
    background:conic-gradient(
        from var(--aura-a),
        rgba(192,57,43,.3) 0deg,
        rgba(192,57,43,.3) 44deg,
        rgba(255,138,110,.95) 76deg,
        rgba(255,255,255,1) 90deg,
        rgba(255,138,110,.95) 104deg,
        rgba(192,57,43,.3) 136deg,
        rgba(192,57,43,.3) 360deg
    );
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
    z-index:1;
    opacity:0;
    transition:opacity .24s var(--ease-out);
    animation:auraBorder 5s linear infinite;
    animation-play-state:paused;
}
.aura-hover:hover::before,
.aura-hover:focus-visible::before{
    opacity:1;
    animation-play-state:running;
}

/* 暗色：暖红描边 */
html[data-theme="dark"] .aura::before,
html[data-theme="dark"] .btn-primary:not(:disabled)::before,
html[data-theme="dark"] .hd-login::before,
html[data-theme="dark"] .aura-hover::before{
    background:conic-gradient(
        from var(--aura-a),
        rgba(226,109,92,.4) 0deg,
        rgba(226,109,92,.4) 44deg,
        rgba(255,176,150,1) 68deg,
        rgba(255,226,206,1) 84deg,
        rgba(255,255,255,1) 90deg,
        rgba(255,226,206,1) 96deg,
        rgba(255,176,150,1) 112deg,
        rgba(226,109,92,.4) 136deg,
        rgba(226,109,92,.4) 360deg
    );
}

/* 减弱动效：保留静态描边，不旋转 */
@media (prefers-reduced-motion:reduce){
    .aura::before,
    .btn-primary:not(:disabled)::before,
    .hd-login::before,
    .aura-hover::before{
        animation:none !important;
        opacity:1;
    }
}

/* ---------------- 空状态 ---------------- */
.empty-state[hidden]{display:none}

/* ---------------- 响应式（尺寸原样） ---------------- */
@media (max-width:960px){
    .hero{grid-template-columns:1fr}
    .hero-main{padding:26px 22px}
    .hero-copy h1{font-size:25px}
    .hero-logo{width:110px}
    .hero-logo img{width:110px}
    .hero-logo .brand-logo{width:110px}
    .grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
    .hero-main.has-banner{min-height:224px}
    .hero-main.has-banner .carousel,.hero-main.has-banner .carousel .slide{min-height:224px}
    .carousel .slide-title{font-size:17px;left:20px;right:20px;bottom:18px}
}
@media (max-width:640px){
    html{font-size:14.5px}
    body{padding-bottom:64px}
    .hd{height:54px}
    .hd-in{padding:0 12px;gap:10px}
    .hd-brand{flex:1 1 auto;min-width:0;margin-right:6px}
    .hd-brand img.site-logo{width:26px;height:26px}
    .hd-brand b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .hd-nav{display:none}
    .hd-back{display:none}
    .hd-login{font-size:12.5px;padding:7px 13px}
    .hd-dot span{display:none}
    .wrap{padding:12px 12px 24px}
    .panel{padding:16px 14px;border-radius:var(--radius-sm)}
    .hero{margin-bottom:12px}
    .hero-main{padding:20px 16px;gap:12px}
    .hero-main.has-banner{padding:0;min-height:172px}
    .hero-main.has-banner .carousel,.hero-main.has-banner .carousel .slide{min-height:172px}
    .carousel .slide-title{font-size:14.5px;left:14px;right:14px;bottom:14px}
    .carousel .dots{right:12px;bottom:11px}
    .carousel .dot{width:6px;height:6px}
    .carousel .dot.on{width:15px}
    .hero-copy h1{font-size:21px;margin:8px 0 6px}
    .hero-copy p{font-size:12.5px;margin-bottom:14px}
    .hero-tag{font-size:11px}
    .hero-logo{width:82px}
    .hero-logo img{width:82px}
    .hero-logo .brand-logo{width:82px}
    .hero-acts .btn{height:36px;padding:0 14px;font-size:13px}
    .hero-notice{padding:16px 14px}
    .notice-body{max-height:132px;font-size:12.5px;line-height:1.8}
    .search{flex:1 1 100%}
    .goods-head{gap:10px;margin-bottom:12px}
    .cat-tabs{margin-bottom:12px}
    .cat-tabs button{padding:0 11px 10px;font-size:13px}
    .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .card-cover{height:82px;font-size:26px}
    .card-ini{font-size:26px}
    .card-wm{font-size:9.5px;padding:1px 6px 1px 5px;right:6px;bottom:6px;max-width:82%;gap:3px}
    .card-wm .wm-logo{width:11px;height:11px}
    .card-body{padding:10px 10px 11px;gap:5px}
    .card-title{font-size:12.5px;min-height:37px}
    .card-meta{font-size:11px}
    .card-price{font-size:15.5px}
    .card-go{font-size:11.5px;padding:3px 10px}
    .form-row{flex-direction:column;align-items:stretch;gap:5px}
    .form-row label{flex:none;font-size:12.5px;color:var(--text-3)}
    .form-row input{height:44px}
    .kv{grid-template-columns:1fr}
    .dialog{max-width:none;max-height:92vh;border-radius:16px 16px 0 0;align-self:flex-end}
    .mask{align-items:flex-end;padding:0}
    .dialog-head{padding:14px 16px 11px}
    .dialog-body{padding:14px 16px}
    .dialog-foot{padding:10px 16px 16px;flex-direction:column;align-items:stretch;gap:8px}
    .dlg-actions{justify-content:flex-end}
    /* ==========================================================================
       底部导航：悬浮胶囊 pill navigation
       —— 共享滑动指示器（.tabbar::before 按 --tab-i 平移）
       —— 毛玻璃底 + 柔和投影，浮在内容之上而非贴边
       ========================================================================== */
    body{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
    .wrap{padding-bottom:calc(96px + env(safe-area-inset-bottom)) !important}

    .tabbar{
        display:flex;position:fixed;z-index:70;
        left:50%;transform:translateX(-50%);
        width:calc(100% - 28px);max-width:430px;
        bottom:calc(14px + env(safe-area-inset-bottom));
        height:62px;padding:6px;gap:2px;
        border-radius:999px;
        background:rgba(252,252,251,.86);
        backdrop-filter:blur(20px) saturate(180%);
        -webkit-backdrop-filter:blur(20px) saturate(180%);
        box-shadow:
            0 14px 36px -16px rgba(28,28,27,.34),
            0 2px 8px rgba(28,28,27,.06),
            inset 0 1px 0 rgba(255,255,255,.75),
            0 0 0 1px rgba(28,28,27,.045);
        transition:box-shadow .3s var(--ease-out), background .3s var(--ease-out);
    }
    /* 共享滑动指示器：4 等分，按当前索引平移 */
    .tabbar::before{
        content:"";position:absolute;top:6px;bottom:6px;left:6px;
        width:calc((100% - 12px - 6px) / 4);
        border-radius:999px;
        background:var(--accent);
        box-shadow:0 8px 20px -10px rgba(192,57,43,.7);
        transform:translateX(calc(var(--tab-i, 0) * (100% + 2px)));
        transition:transform .46s cubic-bezier(.215,.61,.355,1);
        pointer-events:none;
        z-index:0;
    }
    .tabbar .tb{
        position:relative;z-index:1;
        flex:1 1 0;min-width:0;height:100%;
        display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;
        border:0;background:none;border-radius:999px;cursor:pointer;
        color:var(--text-3);font-family:inherit;font-size:12.5px;font-weight:560;
        transition:color .3s var(--ease-out);
        -webkit-tap-highlight-color:transparent;
    }
    .tabbar .tb svg{display:block;flex:0 0 auto;opacity:.7;transition:opacity .26s var(--ease-out)}
    .tabbar .tb span{font-size:12px;letter-spacing:.01em;white-space:nowrap}
    /* 未选中：只显示图标；文字用 sr-only 隐藏（读屏软件仍可朗读，不会丢无障碍语义） */
    .tabbar .tb:not(.on) span{
        position:absolute;width:1px;height:1px;padding:0;margin:-1px;
        overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
    }
    /* 未选中时图标略放大，视觉更平衡 */
    .tabbar .tb:not(.on) svg{transform:scale(1.06)}
    .tabbar .tb svg{transition:opacity .26s var(--ease-out), transform .34s var(--ease-spring)}
    .tabbar .tb.on{color:#fff}
    .tabbar .tb.on svg{opacity:1}
    .tabbar .tb:not(.on):active{color:var(--accent);transform:scale(.97)}
    html[data-theme="dark"] .tabbar{
        background:rgba(21,21,20,.86);
        box-shadow:
            0 14px 36px -16px rgba(0,0,0,.8),
            0 2px 8px rgba(0,0,0,.4),
            inset 0 1px 0 rgba(255,255,255,.06),
            0 0 0 1px rgba(255,255,255,.06);
    }
    html[data-theme="dark"] .tabbar .tb.on{color:#16100f}
    html[data-theme="dark"] .tabbar::before{box-shadow:0 8px 20px -10px rgba(226,109,92,.6)}
}

/* 平板/桌面窄屏也不要出现全宽贴边（保险） */
@media (min-width:641px){
    .tabbar{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}