/* ===== 捷选画册共享CSS ===== */
/* 9个模板共用：色板变量/reset/masonry/模式抽屉/画廊/分享弹窗/登录弹窗/骨架屏/响应式 */
/* ===== 主题色板变量 ===== */
:root{
  /* 基础色板（定义原始色值，applyTheme() 会覆盖这些） */
  --p-accent:#003D99;--p-dark:#1A1A1A;--p-secondary:#6B7588;--p-muted:#C1C7D2;--p-border:#E5E5EA;--p-surface:#F7F8FA;--p-card:#FFFFFF;--p-danger:#E8734A;--p-placeholder:#EEF0F4;--p-warm:#B8860B;
  /* 强调色 RGB 分量（用于 rgba 变体） */
  --accent-rgb:0,61,153;--warm-rgb:184,134,11;--card-rgb:255,255,255;--surface-rgb:247,248,250;
  /* 语义色 */
  --text-primary:var(--p-dark);--text-accent:var(--p-accent);--text-secondary:var(--p-secondary);--text-muted:var(--p-muted);--text-on-accent:#fff;--text-danger:var(--p-danger);--text-warm:var(--p-warm);
  --bg-page:var(--p-surface);--bg-card:var(--p-card);--bg-accent:var(--p-accent);--bg-accent-subtle:rgba(var(--accent-rgb),.06);--bg-placeholder:var(--p-placeholder);--bg-warm-subtle:rgba(var(--warm-rgb),.08);
  --border-default:var(--p-border);--border-accent:var(--p-accent);
  --btn-primary-bg:var(--p-accent);--btn-primary-text:#fff;--btn-primary-shadow:rgba(var(--accent-rgb),.25);
  --badge-accent-bg:rgba(var(--accent-rgb),.1);--badge-accent-bg-strong:rgba(var(--accent-rgb),.12);
  /* 详情页背景扩展 */
  --bg-media:#000;--bg-overlay-btn:rgba(255,255,255,.7);--bg-thumb-strip:var(--p-dark);--bg-modal-mask:rgba(0,0,0,.5);--text-on-dark:#fff;
  /* 圆角体系 */
  --radius-xs:4px;--radius-sm:6px;--radius-md:8px;--radius-card:12px;--radius-btn-lg:10px;--radius-panel:16px;
  /* 阴影 */
  --shadow-card:0 1px 3px rgba(0,0,0,.05);
  /* 字体token */
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-serif:'Noto Serif SC','Georgia','Times New Roman',serif;
  /* 详情页字号 */
  --fs-price:26px;--fs-title:20px;--fs-section:14px;--fs-body:13px;--fs-caption:12px;--fs-micro:11px;
  /* 详情页布局 */
  --max-width-detail:480px;--det-padding:20px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Serif SC',sans-serif;background:var(--bg-page);color:var(--text-primary)}
button{cursor:pointer;border:none;background:none;font:inherit}
img,video{display:block}
.lk{color:var(--text-accent)}.bg-lk{background:var(--bg-accent)}
.co{color:var(--text-primary)}.bg-co{background:var(--bg-accent)}
.masonry{column-count:2;column-gap:0}
.masonry.single-col{column-count:1}
@media(min-width:768px){.masonry{column-count:3;column-gap:8px}.mi{padding:0 4px 10px}}
@media(min-width:1024px){.masonry{column-count:4;column-gap:10px}.mi{padding:0 5px 12px}}
.mi{break-inside:avoid;padding:0 5px 10px}
@keyframes fi{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fi{animation:fi .3s ease forwards}
.tm{position:fixed;top:48px;left:50%;transform:translateX(-50%);background:var(--bg-accent);color:var(--btn-primary-text);padding:10px 24px;border-radius:20px;font-size:13px;z-index:9999;animation:ti 1.8s ease forwards}
@keyframes ti{0%{opacity:0;transform:translateX(-50%) translateY(-10px)}8%{opacity:1;transform:translateX(-50%) translateY(0)}75%{opacity:1}100%{opacity:0;transform:translateX(-50%) translateY(-10px)}}
.nsb::-webkit-scrollbar{display:none}.nsb{-ms-overflow-style:none;scrollbar-width:none}
.safe-b{padding-bottom:env(safe-area-inset-bottom,0px)}
/* ===== 模式切换抽屉 ===== */
.mode-drawer-mask{position:fixed;inset:0;z-index:9990;background:rgba(0,0,0,.35);display:none;opacity:0;transition:opacity .25s}
.mode-drawer-mask.open{display:block;opacity:1}
.mode-drawer{position:fixed;top:0;right:-260px;width:260px;height:100%;z-index:9991;background:var(--bg-card);box-shadow:-4px 0 20px rgba(0,0,0,.1);transition:right .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column}
.mode-drawer.open{right:0}
.mode-drawer .md-header{padding:20px 20px 12px;border-bottom:1px solid var(--border-default)}
.mode-drawer .md-header h3{font-size:15px;font-weight:700;color:var(--text-primary)}
.mode-drawer .md-header p{font-size:11px;color:var(--text-secondary);margin-top:2px}
.mode-drawer .md-list{flex:1;overflow-y:auto;padding:8px 0}
.mode-drawer .md-item{display:flex;align-items:center;gap:12px;padding:14px 20px;cursor:pointer;transition:background .15s}
.mode-drawer .md-item:active{background:var(--bg-page)}
.mode-drawer .md-item.active{background:var(--bg-accent-subtle)}
.mode-drawer .md-item .md-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.mode-drawer .md-item .md-text{flex:1}
.mode-drawer .md-item .md-text .md-name{font-size:14px;font-weight:600;color:var(--text-primary)}
.mode-drawer .md-item .md-text .md-desc{font-size:11px;color:var(--text-secondary);margin-top:1px}
.mode-drawer .md-item .md-check{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-default);flex-shrink:0;display:flex;align-items:center;justify-content:center}
.mode-drawer .md-item.active .md-check{border-color:var(--bg-accent);background:var(--bg-accent)}
.mode-drawer .md-item.active .md-check::after{content:'✓';color:var(--btn-primary-text);font-size:10px;font-weight:700}
/* 模式标签按钮 *//* 模式标签按钮 */
.mode-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:var(--radius-sm);background:var(--bg-accent-subtle);color:var(--text-accent);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
.mode-tag:active{background:var(--badge-accent-bg-strong)}
.mode-tag svg{width:12px;height:12px}
/* Gallery overlay */
.gallery-overlay{position:fixed;inset:0;z-index:9999;background:#000;display:none;flex-direction:column}
.gallery-overlay.open{display:flex}
.gallery-overlay .g-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(0,0,0,.5);flex-shrink:0}
.gallery-overlay .g-hd span{color:#fff;font-size:14px}
.gallery-overlay .g-hd button{color:#fff;background:none;border:none;font-size:14px;cursor:pointer}
.gallery-overlay .g-body{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery-overlay .g-body::-webkit-scrollbar{display:none}
.gallery-overlay .g-body .g-slide{min-width:100%;display:flex;align-items:center;justify-content:center;scroll-snap-align:start}
.gallery-overlay .g-body .g-slide img,.gallery-overlay .g-body .g-slide video{max-width:100%;max-height:100%;object-fit:contain}
.gallery-overlay .g-footer{display:flex;justify-content:center;gap:6px;padding:12px;background:rgba(0,0,0,.5);flex-shrink:0}
.gallery-overlay .g-footer .g-dot{width:6px;height:6px;border-radius:3px;background:rgba(255,255,255,.4);transition:all .2s}
.gallery-overlay .g-footer .g-dot.active{width:16px;background:#fff}
.gallery-overlay .g-hint{text-align:center;padding:8px 16px;background:rgba(0,0,0,.5);font-size:11px;color:rgba(255,255,255,.6);flex-shrink:0}
.gallery-overlay .g-hint span{margin:0 8px}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* ===== Responsive: Tablet & Desktop ===== */
@media(min-width:768px){
  .masonry{column-count:3!important;column-gap:10px!important}
  .mi{padding:0 6px 14px!important}
  #homeMain{max-width:960px!important;margin:0 auto!important}
  header>div{max-width:960px!important;margin:0 auto!important}
}
@media(min-width:1024px){
  .masonry{column-count:4!important;column-gap:12px!important}
  .mi{padding:0 8px 16px!important}
  #homeMain{max-width:1200px!important}
  header>div{max-width:1200px!important}
}
/* Share image modal */
.share-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:var(--bg-modal-mask)}
.share-modal.open{display:flex}
.share-modal .card{background:var(--bg-card);border-radius:var(--radius-card);padding:20px;width:320px;max-width:88vw;box-shadow:0 8px 32px rgba(0,0,0,.15);display:flex;flex-direction:column;align-items:center}
.share-modal .card .card-title{font-size:15px;font-weight:600;color:var(--text-primary);margin-bottom:12px;text-align:center}
.share-modal .card .card-img{width:100%;border-radius:var(--radius-md);overflow:hidden;background:var(--bg-page)}
.share-modal .card .card-img img{width:100%;display:block}
.share-modal .card .card-close{width:100%;padding:10px;margin-top:10px;background:var(--bg-page);border:none;border-radius:var(--radius-md);font-size:13px;color:var(--text-primary);cursor:pointer}
/* Login modal */
.login-overlay{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.35)}
.login-overlay.open{display:flex}
.login-overlay .panel{background:var(--bg-card);border-radius:var(--radius-card);padding:28px 24px 20px;width:300px;max-width:85vw;box-shadow:0 8px 32px rgba(0,0,0,.12)}
.login-overlay .panel .login-title{font-size:16px;font-weight:600;color:var(--text-primary);text-align:center;margin-bottom:16px}
.login-overlay .panel .login-input{width:100%;padding:10px 14px;border:1px solid var(--border-default);border-radius:var(--radius-md);font-size:14px;outline:none;margin-bottom:10px;background:var(--bg-page)}
.login-overlay .panel .login-input:focus{border-color:var(--border-accent);background:var(--bg-card)}
.login-overlay .panel .login-btn{width:100%;padding:12px;background:var(--btn-primary-bg);color:var(--btn-primary-text);border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer}
.login-overlay .panel .login-btn:active{opacity:.85}
.login-overlay .panel .login-err{font-size:12px;color:var(--text-danger);text-align:center;margin-top:6px;display:none}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.img-skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--bg-page) 50%,var(--surface) 75%);background-size:400px 100%;animation:shimmer 1.5s ease-in-out infinite}
/* ===== 详情页(renderDetail)共享CSS类 ===== */
/* 标签/徽章（材质/风格/分类） */
.det-tag{padding:4px 10px;border-radius:var(--radius-sm);font-size:var(--fs-caption);font-weight:500}
.det-tag-accent{color:var(--text-accent);background:rgba(var(--accent-rgb),.1)}
.det-tag-muted{color:var(--text-secondary);background:var(--bg-placeholder)}
/* 圆形叠加按钮（返回/编辑/分享） */
.det-circle-btn{width:36px;height:36px;border-radius:50%;background:var(--bg-overlay-btn);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* 缩略图项 */
.det-thumb{width:52px;height:52px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;cursor:pointer;position:relative}
/* 编辑输入框 */
.det-edit-input{padding:6px 8px;background:var(--bg-page);border:1px solid var(--border-default);border-radius:var(--radius-sm);font-size:var(--fs-body)}
/* 规格行 */
.det-spec-row{display:flex;padding:10px 0}
.det-spec-key{width:70px;color:var(--text-secondary);font-size:var(--fs-body)}
.det-spec-val{flex:1;font-size:var(--fs-body);font-weight:500}
/* 卡片区块（规格参数/多规格） */
.det-card{background:var(--bg-card);border-radius:var(--radius-card);padding:4px 16px;box-shadow:var(--shadow-card)}
.det-section-title{font-size:var(--fs-section);font-weight:700;color:var(--text-accent)}
/* 删除小圆钮（缩略图上的×） */
.det-del-btn{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--text-secondary);color:var(--text-on-dark);border-radius:50%;font-size:12px;display:flex;align-items:center;justify-content:center;line-height:1;z-index:2}
/* 添加缩略图按钮 */
.det-add-thumb{width:52px;height:52px;border-radius:var(--radius-sm);border:2px dashed var(--text-muted);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px;color:var(--text-muted);flex-shrink:0;cursor:pointer}
/* 底部固定按钮栏 */
.det-bottom-bar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:var(--max-width-detail);padding:12px var(--det-padding) 20px;padding-bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--bg-card);border-top:1px solid var(--border-default);display:flex;gap:10px;z-index:50;box-sizing:border-box}
/* 详情页主按钮 */
.det-btn-primary{flex:1;padding:14px;background:var(--bg-accent);color:var(--text-on-dark);border:none;border-radius:var(--radius-btn-lg);font-size:15px;font-weight:600;cursor:pointer}
/* 编辑模式规格行 */
.det-edit-spec-row{display:flex;padding:8px 0;border-bottom:1px solid var(--bg-placeholder)}
.det-edit-spec-del{color:var(--text-secondary);font-size:18px;padding:0 8px;line-height:1}
/* 多规格SKU行 */
.det-sku-row{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--bg-page);border-radius:var(--radius-md);margin-bottom:3px}
.det-sku-key{font-size:var(--fs-body);color:var(--text-primary)}
.det-sku-price{font-size:var(--fs-body);font-weight:600;color:var(--text-secondary)}
/* 多规格分组标签 */
.det-pkg-label{font-size:var(--fs-caption);font-weight:600;color:var(--text-accent);background:rgba(var(--accent-rgb),.1);padding:2px 8px;border-radius:var(--radius-sm);display:inline-block;margin-bottom:6px}
/* 图文详情编辑操作按钮 */
.det-img-op-btn{padding:2px 10px;border:1px solid var(--border-default);border-radius:4px;background:var(--bg-card);font-size:var(--fs-micro);cursor:pointer}
.det-img-op-del{border-color:var(--text-secondary);color:var(--text-secondary)}
/* ===== 详情页PC端专属样式 ===== */
/* 手机端：单列，沿用 --max-width-detail */
.det-wrap{max-width:var(--max-width-detail);margin:0 auto}
/* PC端顶部导航栏：手机端隐藏 */
.det-header{display:none}
/* 面包屑：手机端隐藏 */
.det-breadcrumb{display:none}
/* 主图区：固定1:1正方形，cover填满（建议上传1:1图片） */
.det-main-img{aspect-ratio:1/1;background:var(--bg-media)}
/* 缩略图条：手机端横向（class用于PC端覆盖） */
.det-thumb-strip{}
/* 图片叠加操作层：手机端显示 */
.det-overlay-btns{}
/* 主图左右箭头：手机端隐藏 */
.det-arrow{display:none}
/* PC端：≥768px */
@media(min-width:768px){
  /* 顶部导航栏：品牌名在上行，面包屑在下行靠左 */
  .det-header{display:flex;flex-direction:column;padding:0 24px;position:sticky;top:0;z-index:40;background:rgba(var(--surface-rgb),.96);backdrop-filter:blur(20px)}
  .det-hdr-top{display:flex;align-items:center;justify-content:space-between;height:48px}
  .det-hdr-brand{display:flex;align-items:center;gap:8px;cursor:pointer}
  .det-hdr-name{font-weight:700;color:var(--text-primary);font-size:16px;letter-spacing:2px}
  .det-hdr-actions{display:flex;align-items:center;gap:12px}
  .det-hdr-btn{padding:6px 14px;border-radius:var(--radius-sm);font-size:var(--fs-caption);font-weight:600;cursor:pointer;color:var(--text-accent);background:var(--bg-accent-subtle);border:none}
  /* 面包屑：分隔线下方靠左 */
  .det-breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--fs-caption);height:32px;border-top:1px solid var(--border-default);padding-top:6px}
  .det-breadcrumb a{color:var(--text-accent);text-decoration:none}
  .det-breadcrumb a:hover{text-decoration:underline}
  .det-bc-sep{color:var(--text-muted);margin:0 2px}
  .det-bc-current{color:var(--text-secondary);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* 左右分栏——黄金分割：左38% 右62%，左栏限最大514px */
  .det-wrap{max-width:1200px;flex-direction:row!important;align-items:flex-start;gap:32px;padding:24px 24px 0}
  .det-media-col{flex:0 0 38%;max-width:514px;position:sticky;top:88px}
  /* 右栏：PC端加大内边距，卡片间距更舒适 */
  .det-info-col{flex:0 0 62%;min-width:300px;padding:24px 32px!important}
  /* 卡片间距：PC端加大 */
  .det-card{margin-bottom:16px}
  /* 主图：PC端沿用手机端1:1比例 */
  .det-main-img{background:var(--bg-page)}
  /* 主图左右切换箭头：PC端显示 */
  .det-arrow{display:flex;position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.8);backdrop-filter:blur(4px);border:none;cursor:pointer;align-items:center;justify-content:center;color:var(--text-primary);z-index:5}
  .det-arrow:hover{background:rgba(255,255,255,.95)}
  .det-arrow-prev{left:8px}
  .det-arrow-next{right:8px}
  /* 缩略图：PC端沿用手机端横向（不覆盖） */
  .det-thumb{width:56px;height:56px}
  /* 规格价格：手机端默认折叠，PC端默认展开 */
  #pkgBody{display:block!important}
  /* 图片叠加操作层：PC端隐藏（操作在header） */
  .det-overlay-btns{display:none!important}
  /* 底部栏：PC端隐藏 */
  .det-bottom-bar{display:none!important}
  .det-placeholder{display:none}
}
@media(min-width:1024px){
  .det-wrap{max-width:1400px;gap:48px}
}