/* SAFE v2 Hybrid FULL + Search + Details (Collapsible) */
:root{--bg:#0b0c10;--card:#12141a;--ink:#e8ecf1;--muted:#9aa4b2;--accent:#3b82f6;--accent-2:#22c55e;--radius:14px;--pad:16px;--gap:14px;--maxw:1200px;--shadow:0 6px 24px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.12);--border:1px solid rgba(255,255,255,.06);color-scheme:dark;}
html,body {
  margin: 0;
  font: 14px/1.6 system-ui, sans-serif;
  color: #e8ecf1;
  background: linear-gradient(180deg, #1a1d24 0%, #101218 100%);
  /* 深灰渐变，比纯黑柔和 */
}

#__new_design_root{margin:0 auto;max-width:var(--maxw);padding:24px 18px 40px;display:flex;flex-direction:column;gap:14px;}

.nd-header{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.nd-title{font-size:20px;font-weight:700;letter-spacing:.2px;}
.nd-badge{font-size:12px;padding:4px 8px;border-radius:999px;color:#0b1117;background:linear-gradient(120deg,var(--accent),#6ee7b7);font-weight:700;box-shadow:var(--shadow);}
.nd-sub{color:var(--muted);font-size:12px;margin-left:8px;}

/* Toolbar (Search) */
/* 搜索框卡片 */
.nd-toolbar {
  background: #1f242d;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.nd-input{flex:1;min-width:220px;background:#0f1117;color:var(--ink);border:var(--border);border-radius:10px;padding:10px 12px;outline:none;}
.nd-btn2{background:#0f1117;color:var(--ink);border:var(--border);border-radius:10px;padding:10px 12px;cursor:pointer;}
.nd-btn2:hover{border-color:#2b3340;}

.nd-announce {
  background: rgba(250, 204, 21, 0.08); /* 淡黄色背景块 */
  padding: 8px;
  border-radius: 8px;
}

.nd-announce .nd-tag{background:#0f1117;color:#fcd34d;border:1px solid rgba(252,211,77,.2);padding:3px 8px;border-radius:999px;font-size:12px;}
.nd-announce-list{display:flex;gap:10px;flex-wrap:wrap;}

/* 会员整体卡片 */
.nd-member {
  background: #1f242d;              
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 顶部信息区 */
.nd-member-info {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.nd-member-name {
  font-weight: 600;
  color: #f1f5f9; /* 微亮白色，和背景对比更清晰 */
}

.nd-member-level {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(99,102,241,0.15);  /* 半透明蓝紫色 */
  color: #c7d2fe;
}

.nd-member-points {
  font-size: 12px;
  color: #93c5fd;
}

/* 操作按钮区 */
.nd-member-actions {
  display: flex;
  gap: 10px;
}

/* 会员按钮 */
.nd-btn {
  background: rgba(255,255,255,0.05); /* 半透明浅灰 */
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: all .2s ease;
}

.nd-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}


.nd-list{display:flex;flex-direction:column;gap:var(--gap);}
.nd-row {
  background: #1f242d; /* 比 body 稍亮的灰 */
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35); /* 柔和阴影 */
}

.nd-main{display:flex;flex-direction:column;gap:8px;}
.nd-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.nd-name{font-size:16px;font-weight:700;}
.nd-price{font-weight:800;letter-spacing:.2px;background:linear-gradient(120deg,#f97316,#facc15);-webkit-background-clip:text;background-clip:text;color:transparent;}
.nd-stock{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid rgba(16,185,129,.3);color:#86efac;background:rgba(16,185,129,.08);}
.nd-stock.low{border-color:rgba(234,179,8,.35);color:#fde68a;background:rgba(234,179,8,.08);} /* <10 */
.nd-stock.zero{border-color:rgba(239,68,68,.35);color:#fca5a5;background:rgba(239,68,68,.08);} /* 0 */
.nd-desc{color:#9aa4b2;}

/* Details block (collapsible) */
.nd-details-wrap{margin-top:6px;border-top:1px dashed rgba(255,255,255,.08);padding-top:6px;}
.nd-toggle{background:#0f1117;color:#cbd5e1;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px 10px;cursor:pointer;font-size:12px;}
.nd-toggle[aria-expanded="true"]{color:#e8ecf1;border-color:#2b3340;}
.nd-details{color:#aab3c2;font-size:13px;max-height:0;overflow:hidden;transition:max-height .25s ease;}
.nd-details.open{max-height:800px;} /* allow growth */
.nd-details p{margin:6px 0;}
.nd-details .k{color:#cbd5e1;margin-right:6px;}

.nd-cta{display:flex;flex-direction:column;gap:8px;align-items:flex-end;justify-content:space-between;}
.nd-actions{display:flex;gap:8px;}
.nd-buy{background:linear-gradient(120deg,var(--accent),var(--accent-2));border:none;color:#061018;padding:10px 14px;border-radius:12px;cursor:pointer;font-weight:800;box-shadow:var(--shadow);}
.nd-buy[disabled]{opacity:.5;cursor:not-allowed;filter:grayscale(0.3);}
.nd-buy:hover:not([disabled]){transform:translateY(-1px);}
.nd-order{position:relative;background:linear-gradient(180deg,#0f1117,#0e131a);color:#e6f0ff;border:1px dashed rgba(147,197,253,.35);border-radius:12px;padding:10px 14px;cursor:pointer;font-weight:700;}
.nd-order:hover{border-color:rgba(147,197,253,.6);}
.nd-order-icon{margin-right:6px;opacity:.9}

/* Modal */
.nd-modal-mask{position:fixed !important;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:2147483647;}
.nd-modal{width:92%;max-width:520px;background:#0e1118;border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.nd-modal-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.06);}
.nd-modal-ttl{font-weight:800;}
.nd-modal-bd{padding:16px;display:flex;flex-direction:column;gap:10px;}
.nd-field{display:flex;flex-direction:column;gap:6px;}
.nd-label{font-size:12px;color:#cbd5e1;}
.nd-text{background:#0b0f16;color:#e8ecf1;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 12px;outline:none;}
.nd-help{font-size:12px;color:#94a3b8;}
.nd-err{font-size:12px;color:#fca5a5;min-height:16px;}
.nd-modal-ft{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);}
.nd-btn-ghost{background:#0f1117;color:#e8ecf1;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px 12px;cursor:pointer;}
.nd-btn-solid{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#061018;border:none;border-radius:10px;padding:8px 12px;cursor:pointer;font-weight:800;}
.nd-btn-solid:disabled{opacity:.5;cursor:not-allowed;}

/* Footer */
.nd-footer-wrap{background:transparent;border-top:1px solid rgba(255,255,255,.06);}
.nd-footer {
  margin-top: 20px;
  text-align: center;
  color: #8c96a5;
  font-size: 12px;
}


/* 一条公告一行显示 + 支持 \n 换行 */
.nd-announce-list{display:flex;flex-direction:column;gap:6px;}
.nd-announce-item{display:block;line-height:1.6;white-space:pre-line;}


/* === 公告区域：左侧标签 + 右侧多行 === */
.nd-announce {
  display: flex;
  align-items: flex-start;   /* 顶部对齐 */
  gap: 8px;
}

.nd-announce .nd-tag {
  flex-shrink: 0;
  background: #facc15;       /* 黄色背景 */
  color: #111;               /* 黑色文字 */
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.nd-announce-list {
  display: flex;
  flex-direction: column;    /* 一条公告一行 */
  gap: 6px;
  white-space: pre-line;     /* 支持公告里用 \n 换行 */
}

.nd-announce-item {
  display: block;
  line-height: 1.6;
}

/* === Warm Theme Override (append to theme_safe.css) === */

/* 1) 全局色板：改为暖色深色系 */
:root{
  --bg: #120e0a;
  --card: #1a1410;
  --ink: #f6efe8;
  --muted: #c8b9ac;
  --accent: #fb923c;   /* 暖橙 */
  --accent-2: #f59e0b; /* 琥珀 */
  --shadow: 0 8px 28px rgba(84,42,15,.35), 0 2px 10px rgba(84,42,15,.25);
  --border: 1px solid rgba(255, 184, 122, .10);
}

/* 2) 背景从冷黑 → 暖棕渐变 */
html, body{
  color: var(--ink);
  background: radial-gradient(1200px 800px at 20% -10%, #22170f 0%, #17110c 40%, #120e0a 100%);
}

/* 3) 顶部徽章更暖 */
.nd-badge{
  color:#24160c;
  background: linear-gradient(120deg, #f59e0b, #fcd34d);
  box-shadow: var(--shadow);
}

/* 4) 工具栏/会员卡/列表卡片：统一暖棕底 + 暖色描边 */
.nd-toolbar,
.nd-member,
.nd-row{
  background: #1a1410;
  border: 1px solid rgba(255,184,122,.12);
  box-shadow: var(--shadow);
}

/* 输入与按钮：去冷黑，改暖棕 */
.nd-input, .nd-btn2, .nd-btn, .nd-text{
  background:#15100c;
  border:1px solid rgba(255,184,122,.12);
  color: var(--ink);
}
.nd-btn2:hover, .nd-btn:hover{ border-color: rgba(255,184,122,.28); }

/* 5) 商品标题/价格/库存：价格用橙金渐变，标题更醒目 */
.nd-name{ font-size:18px; letter-spacing:.2px; }
.nd-price{
  font-size:18px;
  font-weight:900;
  background: linear-gradient(120deg,#fb923c,#f59e0b,#fde68a);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* 库存胶囊：基色偏暖，低库存黄色更柔和 */
.nd-stock{
  border:1px solid rgba(250, 204, 21, .35);
  color:#fde68a;
  background: rgba(250, 204, 21, .07);
}
.nd-stock.low{
  border-color: rgba(245, 158, 11, .45);
  color: #fbbf24;
  background: rgba(245, 158, 11, .10);
}
.nd-stock.zero{
  border-color: rgba(239,68,68,.45);
  color:#fecaca; background: rgba(239,68,68,.10);
}

/* 6) 购买/订单按钮：暖橙金主按钮，更有层次 */
.nd-buy{
  background: linear-gradient(120deg,#fb923c,#f59e0b);
  color:#2b1606;
  text-shadow: 0 1px 0 rgba(255,255,255,.25);
  box-shadow: 0 8px 22px rgba(251,146,60,.28), 0 2px 8px rgba(245,158,11,.22);
}
.nd-buy:hover:not([disabled]){ transform: translateY(-1px) scale(1.01); }

.nd-order{
  background: linear-gradient(180deg,#17110c,#120e0a);
  border: 1px dashed rgba(251,146,60,.55);
  color:#ffe9cf;
}

/* 7) 卡片信息层次：悬停轻浮起，标题/价格更凸显 */
.nd-row{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.nd-row:hover{
  transform: translateY(-2px);
  border-color: rgba(255,184,122,.28);
  box-shadow: 0 10px 28px rgba(84,42,15,.45), 0 4px 12px rgba(84,42,15,.30);
}

/* 8) 详情折叠的切换按钮与分隔线改暖 */
.nd-details-wrap{ border-top:1px dashed rgba(255,184,122,.14); }
.nd-toggle{
  background:#15100c; color:#f1e6db;
  border:1px solid rgba(255,184,122,.20);
}
.nd-toggle[aria-expanded="true"]{ border-color: rgba(255,184,122,.35); }

/* 9) 公告条：改为琥珀色系，更温和 */
.nd-announce{
  background: rgba(245, 158, 11, .10);
  border: 1px solid rgba(245, 158, 11, .20);
}
.nd-announce .nd-tag{
  background:#fbbf24; color:#2b1606; border: none;
}

/* 10) 页脚字色微暖 */
.nd-footer{ color:#cbb8a8; }

/* 11) 次要文字色：去冷灰，改奶咖色调 */
.nd-desc, .nd-sub, .nd-help{ color:#d9c8bb; }