* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#f4f6f9; --card:#fff; --primary:#4a90e2; --primary-dark:#357abd;
  --primary-soft:#e8f1fc; --text:#2c3e50; --text-sub:#7b8a99;
  --border:#e6eaf0; --shadow:0 2px 12px rgba(0,0,0,.06); --radius:16px;
}
body { font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); min-height:100vh; padding:24px; }
.app { max-width:1400px; margin:0 auto; }

/* ===== 顶栏 ===== */
.header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.header h1 { font-size:22px; font-weight:600; }
.back { font-size:13px; color:var(--text-sub); text-decoration:none; padding:6px 12px; background:#fff; border-radius:8px; box-shadow:var(--shadow); }
.back:hover { background:var(--primary-soft); color:var(--primary); }

/* ===== 三栏布局 ===== */
.layout { display:grid; grid-template-columns:180px 1fr 360px; gap:18px; align-items:start; }
.sidenav { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:10px; position:sticky; top:20px; }
.nav-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:11px 12px; border:none; background:none; border-radius:10px; font-size:14px; color:var(--text-sub); cursor:pointer; font-family:inherit; transition:all .18s; margin-bottom:2px; }
.nav-item .ni-icon { font-size:15px; width:20px; text-align:center; }
.nav-item:hover { background:var(--bg); color:var(--text); }
.nav-item.active { background:var(--primary); color:#fff; font-weight:600; box-shadow:0 3px 8px rgba(74,144,226,.3); }

.content { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px; min-height:560px; }
.preview { background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; position:sticky; top:20px; }
.preview h3 { font-size:15px; margin-bottom:14px; }

/* ===== 面板 ===== */
.panel { display:none; animation:fade .25s ease; }
.panel.active { display:block; }
@keyframes fade { from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }
.panel h2 { font-size:19px; margin-bottom:6px; }
.desc { font-size:13px; color:var(--text-sub); margin-bottom:18px; line-height:1.6; }

/* ===== 表单 ===== */
label { display:block; font-size:13px; color:var(--text-sub); margin:12px 0 6px; }
.hint-label { color:var(--text-sub); }
textarea, input:not([type=color]):not([type=file]), select {
  width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:10px;
  font-size:14px; font-family:inherit; background:#fff; color:var(--text);
}
textarea { min-height:80px; resize:vertical; }
textarea:focus, input:focus, select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(74,144,226,.12); }
input[type=color] { width:46px; height:38px; border:1px solid var(--border); border-radius:10px; padding:3px; cursor:pointer; background:#fff; }

.opts { display:flex; gap:12px; }
.opts .opt { flex:1; min-width:0; }
.color-box { display:flex; align-items:center; gap:8px; }
.color-box span { font-size:12px; color:var(--text-sub); }

.file-label { display:flex; align-items:center; gap:6px; padding:11px 14px; background:var(--bg); border-radius:10px; cursor:pointer; font-size:13px; color:var(--text-sub); margin-top:12px; border:1px dashed var(--border); }
.file-label:hover { background:var(--primary-soft); color:var(--primary); border-color:var(--primary); }
.logo-preview { width:54px; height:54px; border-radius:10px; object-fit:cover; border:1px solid var(--border); margin-top:10px; display:none; }
.logo-preview.show { display:block; }

/* ===== 按钮 ===== */
.btn { padding:11px 20px; border:none; border-radius:10px; font-size:14px; cursor:pointer; font-family:inherit; transition:all .18s; }
.btn.primary { background:var(--primary); color:#fff; margin-top:18px; box-shadow:0 3px 8px rgba(74,144,226,.25); }
.btn.primary:hover { background:var(--primary-dark); }
.btn.ghost { background:var(--bg); color:var(--text-sub); }
.btn.ghost:hover { background:var(--primary-soft); color:var(--primary); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn.wide { width:100%; margin-top:0; }
.btn-row { display:flex; gap:10px; margin-top:12px; }
.btn-row.vertical { flex-direction:column; }

/* ===== 预览舞台 ===== */
.qr-stage { background:var(--bg); border-radius:12px; padding:18px; min-height:280px; display:flex; align-items:center; justify-content:center; text-align:center; }
.qr-stage canvas, .qr-stage img { max-width:100%; height:auto; border-radius:8px; background:#fff; }
.qr-stage .placeholder { color:var(--text-sub); font-size:13px; line-height:1.8; }
.out-meta { font-size:12px; color:var(--text-sub); margin:12px 2px 0; line-height:1.6; word-break:break-all; max-height:90px; overflow:auto; }

/* ===== 解码 ===== */
.decode-box { background:var(--bg); border:2px dashed var(--border); border-radius:12px; padding:28px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:all .2s; text-align:center; }
.decode-box:hover, .decode-box.dragover { background:var(--primary-soft); border-color:var(--primary); }
.drop-icon { font-size:34px; }
.drop-text { color:var(--text-sub); font-size:13px; }

/* ===== Toast ===== */
.toast { position:fixed; left:50%; bottom:34px; transform:translateX(-50%) translateY(20px); background:rgba(44,62,80,.94); color:#fff; padding:11px 22px; border-radius:10px; font-size:14px; opacity:0; pointer-events:none; transition:all .25s; z-index:99; max-width:88vw; text-align:center; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ===== 响应式 ===== */
@media (max-width:1024px) {
  .layout { grid-template-columns:150px 1fr; }
  .preview { grid-column:1 / -1; position:static; order:3; }
  .qr-stage { min-height:auto; }
  .qr-stage canvas, .qr-stage svg, .qr-stage img { max-width:280px; }
}
@media (max-width:640px) {
  body { padding:14px 12px; }
  .header h1 { font-size:18px; }
  .layout { grid-template-columns:1fr; gap:14px; }

  /* 导航：手机端改为点击展开的下拉选择器 */
  .sidenav { position:static; padding:8px; gap:0; box-shadow:var(--shadow); }
  .nav-item { display:none; width:100%; margin-bottom:0; padding:13px 14px; font-size:14px; border-radius:9px; }
  .nav-item.active { display:flex; }
  .sidenav.open .nav-item { display:flex; }
  .sidenav.open { padding-bottom:6px; }
  /* 触发项右侧的展开/收起箭头 */
  .nav-item.active::after { content:'▾'; margin-left:auto; font-size:13px; opacity:.85; }
  .sidenav.open .nav-item.active::after { content:'▴'; }

  .content { padding:18px 16px; min-height:auto; }
  .opts { flex-wrap:wrap; }
  .opts .opt { flex:1 1 40%; }
}