/* ===================================================================
   Zaka Midnight Skin  —  dark premium overlay
   纯视觉层：不改结构、不动商品/价格/订单/后台
   =================================================================== */

/* ---------- 1. 全局调色板（Tailwind / 通用组件层） ---------- */
:root{
  --ui-bg-page:#07090e;
  --ui-bg-elevated:#0e131b;
  --ui-bg-soft:#131924;
  --ui-bg-muted:#18202c;
  --ui-bg-overlay:#080b11c9;
  --ui-bg-overlay-strong:#080b11f2;
  --ui-text-primary:#e8eefc;
  --ui-text-secondary:#a9b6cd;
  --ui-text-muted:#7a869b;
  --ui-text-on-accent:#ffffff;
  --ui-border:#ffffff14;
  --ui-border-strong:#ffffff2e;
  --ui-accent:#4f8cff;
  --ui-accent-hover:#7aa9ff;
  --ui-accent-soft:#4f8cff26;
  --ui-success:#3ddc97;
  --ui-success-soft:#3ddc9721;
  --ui-warning:#ffc857;
  --ui-warning-soft:#ffc85721;
  --ui-danger:#ff6470;
  --ui-danger-soft:#ff647021;
  --ui-info:#5ad1ff;
  --ui-info-soft:#5ad1ff21;
  --ui-focus-ring:#4f8cff5c;
  --ui-price-primary:#eef3ff;
  --ui-price-original:#78859b;
  --ui-price-promotion:#ff7a90;
  --ui-shadow-1:0 12px 30px -24px #000000d9;
  --ui-shadow-2:0 20px 46px -30px #000000e6;
  --ui-shadow-3:0 30px 70px -34px #000000f2;
  --ui-shadow-card:0 28px 64px -38px #000000e6;
  --ui-shadow-soft:0 14px 34px -28px #000000d9;
}

/* ---------- 2. 模板自身的 token（jianji 皮肤） ---------- */
.jianji-scope,
body.jianji-tokens,
.dark .jianji-scope,
.dark body.jianji-tokens{
  --bg:#07090e;
  --bg-warm:#0b1018;
  --surface:#0e131c;
  --surface-2:#141b26;
  --ink:#e8eefc;
  --ink-2:#a9b6cd;
  --ink-3:#7a869b;
  --border:#ffffff14;
  --border-strong:#ffffff2e;
  --red:#5b93ff;
  --red-strong:#8ab4ff;
  --red-soft:#4f8cff1f;
  --on-red:#ffffff;
  --gold:#f0b86e;
  --gold-strong:#ffd39b;
  --gold-soft:#3a2a14;
  --teal:#4fe0c0;
  --teal-strong:#7cf0d8;
  --teal-soft:#0f3a33;
  --success:#3ddc97;
  --warning:#ffc857;
  --danger:#ff6470;
  --shadow-sm:0 3px 12px #00000073;
  --shadow:0 12px 32px -20px #000000cc;
  --shadow-lg:0 28px 64px -36px #000000e6;
  --ring:0 0 0 3px #4f8cff45;
  --ui-danger-soft:#ff647021;
  --ui-info:var(--red);
  --ui-info-soft:var(--red-soft);
}

/* ---------- 3. 页面底色与氛围光 ---------- */
html{color-scheme:dark}

body{
  background-color:#07090e!important;
  background-image:
    radial-gradient(1200px 620px at 16% -18%, rgba(74,124,255,.20), transparent 62%),
    radial-gradient(900px 520px at 90% -8%, rgba(90,209,255,.10), transparent 66%),
    radial-gradient(1100px 700px at 50% 118%, rgba(124,96,255,.11), transparent 68%)!important;
  background-attachment:fixed!important;
  background-repeat:no-repeat!important;
  color:#e8eefc;
}

/* ---------- 4. 顶部导航：毛玻璃 ---------- */
.jj-header{
  background:rgba(9,12,18,.82)!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.03),0 22px 46px -38px #000!important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
}
.jj-brand{color:#eaf1ff!important}
.jj-brand>span:last-child:after{
  height:3px;border-radius:3px;
  background:linear-gradient(90deg,#4f8cff,#8fd6ff)!important;
  opacity:.9;
}
.jj-brand img{filter:drop-shadow(0 6px 16px rgba(79,140,255,.45))}

.jj-action{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  color:#cfdbf1!important;
  box-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.jj-action:hover{
  background:rgba(79,140,255,.15)!important;
  border-color:rgba(91,147,255,.5)!important;
  color:#fff!important;
  transform:translateY(-1px);
}
.jj-cart-action{color:#cfdbf1!important}
.jj-orders-action{
  background:linear-gradient(135deg,#3f7dff,#6aa8ff)!important;
  border-color:rgba(150,190,255,.55)!important;
  color:#fff!important;
  box-shadow:0 12px 30px -14px rgba(63,125,255,.75)!important;
}

/* ---------- 5. 公告 ---------- */
.jj-notice{
  background:
    linear-gradient(120deg,rgba(79,140,255,.13),rgba(255,255,255,.015) 48%),
    rgba(255,255,255,.022)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  border-left:3px solid #5b93ff!important;
  border-radius:14px!important;
  color:#b9c6dc!important;
  box-shadow:0 26px 60px -48px #000!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.jj-notice a{color:#8ab4ff!important}

/* ---------- 6. 分类胶囊 ---------- */
.jj-chip{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#b9c6dc!important;
  box-shadow:none!important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.jj-chip:hover{
  background:rgba(79,140,255,.13)!important;
  border-color:rgba(91,147,255,.45)!important;
  color:#fff!important;
}
.jj-chip.active{
  background:linear-gradient(135deg,#2f6bff,#63a4ff)!important;
  border-color:rgba(150,190,255,.62)!important;
  color:#fff!important;
  box-shadow:0 12px 28px -14px rgba(47,107,255,.9)!important;
}
.jj-chip.active:after{background:rgba(255,255,255,.7)!important}

.jj-subcategories button{
  background:rgba(255,255,255,.03)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  color:#a9b6cd!important;
}
.jj-subcategories .active{
  background:rgba(79,140,255,.18)!important;
  border-color:rgba(91,147,255,.5)!important;
  color:#fff!important;
}

/* ---------- 7. 搜索框 ---------- */
.jj-search{
  background:rgba(255,255,255,.045)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.jj-search:focus-within{
  border-color:rgba(91,147,255,.6)!important;
  box-shadow:0 0 0 4px rgba(79,140,255,.14)!important;
}
.jj-search input{background:transparent!important;color:#e8eefc!important}
.jj-search input::placeholder{color:#6f7c91!important}
.jj-search-submit{
  background:linear-gradient(135deg,#3f7dff,#68a6ff)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:0 10px 24px -14px rgba(63,125,255,.85)!important;
}

/* ---------- 8. 商品分组卡片 ---------- */
.jj-product-group{
  background:rgba(255,255,255,.022)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  border-radius:16px!important;
  overflow:hidden;
  box-shadow:0 34px 76px -60px #000!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.jj-product-group h2>button{
  background:linear-gradient(100deg,rgba(79,140,255,.17),rgba(79,140,255,.035))!important;
  color:#dfe8ff!important;
  border-bottom:1px solid rgba(255,255,255,.07)!important;
  transition:background .2s ease;
}
.jj-product-group h2>button:hover{
  background:linear-gradient(100deg,rgba(79,140,255,.26),rgba(79,140,255,.07))!important;
}
.jj-product-group h2 svg{color:#8ab4ff!important}

/* ---------- 9. 商品行 ---------- */
.jj-product-row{
  background:transparent!important;
  box-shadow:none!important;
  border-radius:0!important;
  border-bottom:1px solid rgba(255,255,255,.045)!important;
  transition:background .18s ease,box-shadow .18s ease;
}
.jj-product-group .jj-product-row:last-child{border-bottom:none!important}
.jj-product-row:hover{
  background:rgba(79,140,255,.09)!important;
  box-shadow:inset 2px 0 0 rgba(91,147,255,.85)!important;
}
.jj-product-name h3,.jj-product-name a{color:#e6edfb!important}
.jj-product-name a:hover{color:#8ab4ff!important}
.jj-product-thumb{
  color:#4f8cff!important;
  filter:drop-shadow(0 6px 16px rgba(79,140,255,.35));
}
.jj-stock{
  background:rgba(61,220,151,.10)!important;
  border:1px solid rgba(61,220,151,.28)!important;
  color:#7bf0c0!important;
  box-shadow:none!important;
}
.jj-stock.is-out{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.10)!important;
  color:#8b96a8!important;
}
.jj-product-price strong{color:#f0f5ff!important;font-weight:700}
.jj-product-price del{color:#6f7c91!important}

/* ---------- 10. 按钮 ---------- */
.jj-buy{
  background:linear-gradient(135deg,#3f7dff,#6aa8ff)!important;
  color:#fff!important;
  border:1px solid rgba(150,190,255,.5)!important;
  box-shadow:0 12px 26px -14px rgba(63,125,255,.85)!important;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.jj-buy:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:0 16px 34px -14px rgba(63,125,255,.95)!important;
}
.jj-cart{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#cfdbf1!important;
  box-shadow:none!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.jj-cart:hover{
  background:rgba(79,140,255,.17)!important;
  border-color:rgba(91,147,255,.5)!important;
  color:#fff!important;
}
.jj-plus,.jj-floating-cart{
  background:rgba(13,18,27,.92)!important;
  border:1px solid rgba(91,147,255,.45)!important;
  color:#8ab4ff!important;
  box-shadow:0 16px 36px -18px rgba(63,125,255,.85)!important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.jj-button.jj-outline{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.12)!important;
  color:#cfdbf1!important;
}

/* ---------- 11. 页脚 ---------- */
.jj-footer{
  border-top:1px solid rgba(255,255,255,.06)!important;
  color:#6f7c91!important;
}
.jj-footer-top strong{color:#dfe8ff!important}
.jj-footer nav a,.jj-footer-tools>*{color:#8b98ad!important}
.jj-footer a:hover{color:#8ab4ff!important}
.jj-footer-tools select{
  background-color:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#cfdbf1!important;
}

/* ---------- 12. 弹窗 / 遮罩 ---------- */
.jj-overlay{
  background:rgba(3,5,9,.72)!important;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}
.jj-dialog{
  background:#0e131c!important;
  border:1px solid rgba(255,255,255,.09)!important;
  box-shadow:0 44px 96px -44px #000!important;
  color:#e8eefc!important;
}

/* ---------- 13. 表单与其它通用件 ---------- */
.jianji-scope :where(input,textarea,select){
  background-color:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.10);
  color:#e8eefc;
}
.jianji-scope :where(input,textarea)::placeholder{color:#6f7c91}
.jj-catalog-options select,.jj-footer-tools select{
  background-color:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  color:#cfdbf1!important;
}
.jj-pagination a,.jj-pagination button,.jj-pagination span{
  background:rgba(255,255,255,.04)!important;
  border-color:rgba(255,255,255,.09)!important;
  color:#b9c6dc!important;
}
.jj-empty,.jj-inline-error{
  background:rgba(255,255,255,.025)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  color:#a9b6cd!important;
}

/* ---------- 14. 细节 ---------- */
::selection{background:rgba(79,140,255,.35);color:#fff}
*{scrollbar-width:thin;scrollbar-color:#2a3444 transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#232c3a;border-radius:8px;border:2px solid #07090e}
::-webkit-scrollbar-thumb:hover{background:#33405a}

.jj-main :where(h1,h2,h3){letter-spacing:-.01em}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important;animation:none!important}
}

/* ---------- 15. 移动端收尾：给悬浮购物车留位 ---------- */
@media (max-width: 720px){
  .jj-catalog{padding-bottom:78px}
  .jj-footer{padding-bottom:84px}
  .jj-floating-cart{opacity:.92}
  .jj-floating-cart:active{opacity:1}
  .jj-product-group{border-radius:14px!important}
}