:root {
  --orange: #f59e0b;
  --orange-dark: #d97706;
  --orange-light: #fef3c7;
  --orange-bg: #fff8f0;
  --text: #1e293b;
  --text-light: #64748b;
  --border: #e2e8f0;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; background:#f9fafb; color:var(--text); min-height:100vh; display:flex; flex-direction:column; }
#app { flex:1; }
.header { display:flex; align-items:center; justify-content:space-between; padding:0 28px; height:64px; background:rgba(255,255,255,0.9); backdrop-filter:blur(12px); border-bottom:1px solid rgba(0,0,0,0.06); position:sticky; top:0; z-index:100; }
.header-left { display:flex; align-items:center; gap:16px; }
.logo { display:flex; align-items:center; gap:8px; cursor:pointer; }
.logo-mark { width:28px; height:28px; background:var(--orange-light); border-radius:8px; display:flex; align-items:center; justify-content:center; }
.logo-icon-svg { width:18px; height:18px; color:var(--orange-dark); opacity:0.9; }
.logo-text { font-weight:700; font-size:1.5rem; letter-spacing:-0.5px; color:var(--text); }
.logo-sub { font-size:0.7rem; font-weight:400; color:var(--text-light); text-transform:uppercase; }
.user-area { display:flex; align-items:center; gap:12px; }
.btn { background:white; border:1px solid var(--border); padding:7px 18px; border-radius:20px; font-weight:500; cursor:pointer; font-size:0.85rem; transition:0.2s; color:var(--text); }
.btn-primary { background:var(--orange); color:white; border-color:var(--orange); font-weight:600; }
.btn-primary:hover { background:var(--orange-dark); }
.btn:hover { background:#fff8f0; border-color:var(--orange); }
.btn-sm { padding:5px 14px; font-size:0.8rem; }
.btn-download { background:#10b981; color:white; border-color:#10b981; }
.btn-download:hover { background:#059669; }
.home-toolbar { padding:16px 24px; max-width:1600px; margin:0 auto; }
.search-box { display:flex; align-items:center; background:white; border:2px solid var(--orange); border-radius:12px; padding:10px 16px; gap:8px; }
.search-box input { border:none; outline:none; width:100%; font-size:0.95rem; background:transparent; }
.search-box svg { width:1.25rem; height:1.25rem; flex-shrink:0; color:var(--orange); }
.products-container { padding:24px; columns:4; column-gap:20px; max-width:1600px; margin:0 auto; }
@media(max-width:1200px){ .products-container{columns:3;} }
@media(max-width:900px){ .products-container{columns:2;} }
.product-card { break-inside:avoid; margin-bottom:20px; border-radius:16px; overflow:hidden; background:white; box-shadow:0 1px 3px rgba(0,0,0,0.03); transition:0.25s; cursor:pointer; border:1px solid #f1f5f9; }
.product-card:hover { transform:translateY(-3px); }
.img-wrapper { aspect-ratio:3/4; overflow:hidden; background:#f8fafc; }
.img-wrapper img { width:100%; height:100%; object-fit:cover; display:block; }

/* ===== 图片保护加强 ===== */
/* 主页所有图片完全禁用交互，让点击事件穿透到父级，禁止长按和右键 */
.products-container .img-wrapper img,
.home-view .img-wrapper img {
  pointer-events: none;            /* 不接受任何鼠标/触摸事件 */
  -webkit-touch-callout: none;     /* iOS长按菜单 */
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* 详情页大图允许交互但禁止长按保存（由JS控制） */
.purchase-img-panel img {
  pointer-events: auto;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.login-page { position:fixed; top:0; left:0; width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:rgba(249,250,251,0.6); z-index:200; }
.auth-card { background:rgba(255,255,255,0.9); backdrop-filter:blur(20px); border-radius:28px; padding:44px 36px; width:380px; box-shadow:0 20px 40px rgba(0,0,0,0.05); display:flex; flex-direction:column; gap:24px; }
.input-field { padding:14px 16px; border-radius:14px; border:1px solid var(--border); background:white; font-size:1rem; outline:none; }
.input-field:focus { border-color:var(--orange); box-shadow:0 0 0 3px rgba(245,158,11,0.1); }
.purchase-page { max-width:1000px; margin:36px auto; display:flex; gap:36px; background:white; border-radius:24px; padding:36px; }
.purchase-img-panel { flex:1; max-width:45%; aspect-ratio:3/4; background:#f8fafc; border-radius:20px; overflow:hidden; position:relative; border:1px solid var(--border); }
.back-home-btn { position:absolute; top:14px; left:14px; background:rgba(255,255,255,0.9); padding:6px 16px; border-radius:20px; cursor:pointer; font-size:0.85rem; z-index:5; }
.purchase-details { flex:1; display:flex; flex-direction:column; gap:24px; }
.price-tag { display:block; background:#fff; border:2px solid var(--orange); color:var(--orange-dark); font-size:1.5rem; font-weight:700; border-radius:12px; padding:8px 20px; margin-bottom:16px; text-align:left; width:fit-content; }
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(15,23,42,0.2); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:300; }
.modal-content { background:rgba(255,255,255,0.95); backdrop-filter:blur(16px); border-radius:24px; padding:32px; width:90%; max-width:550px; display:flex; flex-direction:column; gap:22px; max-height:85vh; overflow-y:auto; }
.hidden { display:none!important; }
.floating-actions { position:fixed; bottom:28px; right:28px; display:flex; flex-direction:column; gap:16px; z-index:150; }
.float-btn { width:44px; height:44px; border-radius:50%; background:white; border:2px solid var(--orange); color:var(--orange); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:0.2s; }
.float-btn:hover { background:var(--orange-bg); }
.float-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; }
.contact-popup { position:absolute; bottom:60px; right:0; background:white; border-radius:20px; padding:20px; box-shadow:0 10px 30px rgba(0,0,0,0.08); border:1px solid var(--orange-light); display:none; flex-direction:column; align-items:center; gap:12px; min-width:200px; font-size:0.85rem; color:var(--text); z-index:160; }
.contact-popup.visible { display:flex; }
.contact-popup img { width:100px; height:100px; border-radius:12px; border:1px solid var(--border); }
.toast { position:fixed; top:20px; left:50%; transform:translateX(-50%); background:#1e293b; color:white; padding:10px 24px; border-radius:30px; font-size:0.9rem; z-index:9999; opacity:0; transition:opacity 0.3s; pointer-events:none; }
.toast.show { opacity:1; }
.admin-panel { padding:24px; max-width:1400px; margin:0 auto; }
.admin-tabs { display:flex; gap:12px; margin-bottom:24px; }
.admin-tab { padding:8px 20px; border-radius:20px; background:white; border:1px solid var(--border); cursor:pointer; font-size:0.9rem; }
.admin-tab.active { background:var(--orange); color:white; border-color:var(--orange); }
.admin-table { width:100%; border-collapse:collapse; background:white; border-radius:12px; overflow:hidden; margin:16px 0; font-size:0.8rem; }
.admin-table th, .admin-table td { padding:10px 12px; border-bottom:1px solid #f1f5f9; text-align:left; }
.admin-table th { background:#f8fafc; font-weight:600; }
.admin-section { background:white; border-radius:16px; padding:20px; margin-bottom:20px; border:1px solid var(--border); }
.admin-section h3 { margin-bottom:12px; color:var(--orange-dark); }
.admin-search-bar { display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.admin-search-bar input, .admin-search-bar select { flex:1; }
.toolbar-actions { display:flex; justify-content:flex-end; margin-bottom:16px; }
.editable-cell { cursor:pointer; background:#fffef7; border-radius:4px; padding:2px 4px; }
.editable-cell:hover { background:#fff2db; }
.visibility-toggle { cursor:pointer; background:none; border:none; font-size:1.2rem; }
.status-badge.on { color:#16a34a; font-weight:600; }
.status-badge.off { color:#dc2626; font-weight:600; }
.lock-icon { font-size:1.2rem; margin-left:4px; }
.global-footer { background:#fff; border-top:1px solid var(--border); padding:20px; text-align:center; font-size:0.8rem; color:var(--text-light); line-height:2; }
.global-footer a { color:var(--orange-dark); text-decoration:none; margin:0 8px; }
.police-icon { height:16px; vertical-align:middle; margin-right:4px; }
.consent-check { display:flex; align-items:center; gap:8px; margin:12px 0; }
.consent-check input[type="checkbox"] { width:18px; height:18px; }