/* ═══════════════════════════════════════════════════════════════════════
   QRLab 深色主题 CSS
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 设计变量 ──────────────────────────────────────────────────────────── */
:root{
  --bg:#0a0c12;
  --surface:#10131c;
  --panel:#151924;
  --panel2:#1b2030;
  --panel3:#232938;
  --line:#262d3f;
  --line2:#323a50;
  --fg:#e6eaf5;
  --fg2:#b4bccf;
  --dim:#757d95;
  --acc:#3b6fff;
  --acc2:#6b90ff;
  --acc3:#1a4adc;
  --ok:#2fbf71;
  --warn:#e0a82e;
  --err:#e25050;
  --radius:12px;
  --radius-sm:8px;
  --shadow:0 6px 24px rgba(0,0,0,.4);
  --shadow-lg:0 14px 44px rgba(0,0,0,.55);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(59,111,255,.06), transparent),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(59,111,255,.03), transparent);
  color:var(--fg);
  font:13.5px/1.6 -apple-system,"PingFang SC","Helvetica Neue",sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ── 顶部栏 ──────────────────────────────────────────────────────────── */
.top{
  height:48px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; border-bottom:1px solid var(--line);
  background:rgba(16,19,28,.85); backdrop-filter:blur(16px);
  position:fixed; top:0; left:0; right:0; z-index:100;
}
.brand{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:620}
.brand .logo{color:var(--acc2); font-size:17px}
.brand em{font-style:normal; font-weight:400; color:var(--dim); font-size:12px}
.stat{color:var(--dim); font-size:11.5px; font-variant-numeric:tabular-nums}

/* ── 布局 ────────────────────────────────────────────────────────────── */
.wrap{
  display:grid;
  grid-template-columns:minmax(340px,1fr) minmax(380px,460px);
  gap:10px; padding:58px 10px 10px;
  align-items:start;
  height:100vh;
}
@media(max-width:880px){.wrap{grid-template-columns:1fr; height:auto; overflow:auto}}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.preview-panel{
  padding:12px; display:flex; flex-direction:column; gap:10px;
  position:sticky; top:58px;
  max-height:calc(100vh - 68px);
}
.controls{
  max-height:calc(100vh - 68px);
  overflow-y:auto;
  padding:2px 0 8px;
}
@media(max-width:880px){.controls{max-height:none}}

/* 滚动条样式 */
.controls::-webkit-scrollbar{width:6px}
.controls::-webkit-scrollbar-track{background:transparent}
.controls::-webkit-scrollbar-thumb{background:var(--line2); border-radius:3px}
.controls::-webkit-scrollbar-thumb:hover{background:var(--dim)}

/* ── 预览台 ──────────────────────────────────────────────────────────── */
.stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:260px; border-radius:var(--radius-sm); padding:14px;
  background:
    linear-gradient(45deg,#1a1e2e 25%,transparent 25%,transparent 75%,#1a1e2e 75%),
    linear-gradient(45deg,#1a1e2e 25%,#151926 25%,#151926 75%,#1a1e2e 75%);
  background-size:18px 18px; background-position:0 0,9px 9px;
  border:1px solid var(--line);
  transition:border-color .15s, box-shadow .15s;
}
.stage.dragover{
  border-color:var(--acc);
  box-shadow:0 0 0 3px rgba(59,111,255,.15), inset 0 0 30px rgba(59,111,255,.08);
}
.stage.dragover .stage-drop-hint{opacity:1}
#preview{
  max-width:100%; max-height:46vh; border-radius:6px; display:block;
  box-shadow:0 8px 24px rgba(0,0,0,.5);
  background:#fff;
}
.stage-drop-hint{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  font-size:10.5px; color:var(--dim); opacity:.5;
  pointer-events:none; white-space:nowrap;
  background:rgba(10,12,18,.7); padding:3px 10px; border-radius:10px;
  backdrop-filter:blur(4px);
  transition:opacity .15s;
}
.stage:hover .stage-drop-hint{opacity:.8}
.spinner{
  position:absolute; width:22px; height:22px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.1); border-top-color:var(--acc2);
  animation:spin .6s linear infinite; opacity:0; transition:opacity .12s; pointer-events:none;
}
.spinner.on{opacity:1}
@keyframes spin{to{transform:rotate(360deg)}}

.readout{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px; align-items:baseline;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:8px 11px; font-size:12px;
}
.readout .k{color:var(--dim); white-space:nowrap; font-size:11px}
.readout .v{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11.5px;
  word-break:break-all; line-height:1.4; color:var(--fg2);
}
.readout .v.dim{font-family:inherit; color:var(--dim); font-size:11.5px}

.actions{display:flex; gap:6px; flex-wrap:wrap}
.actions .btn{flex:1; min-width:90px; justify-content:center}

/* ── 按钮 ────────────────────────────────────────────────────────────── */
.btn{
  appearance:none; border:1px solid var(--line2); background:var(--panel2);
  color:var(--fg); padding:8px 13px; border-radius:var(--radius-sm);
  font-size:12.5px; font-weight:560; cursor:pointer; transition:.12s;
  font-family:inherit; display:inline-flex; align-items:center; gap:4px;
  text-decoration:none; white-space:nowrap;
}
.btn:hover{background:var(--panel3); border-color:var(--fg2); color:var(--fg)}
.btn:active{transform:translateY(1px)}
.btn.primary{
  background:linear-gradient(135deg,var(--acc),var(--acc3));
  border-color:var(--acc); color:#fff;
  box-shadow:0 2px 10px rgba(59,111,255,.3);
}
.btn.primary:hover{filter:brightness(1.08); box-shadow:0 4px 14px rgba(59,111,255,.4)}
.btn.small{padding:5px 10px; font-size:11.5px}
.btn.ghost{background:transparent; color:var(--dim); border-color:transparent}
.btn.ghost:hover{color:var(--fg); background:var(--panel3)}

/* ── file input 按钮（关键修复 v2）─────────────────────────────────────────
   label.file-btn 是可见按钮，input[type=file] 透明覆盖在上面。
   不用 display:none / hidden / opacity:0 + pointer-events:none（WKWebView 会吞事件）。
   改用：input 完全透明但尺寸铺满 label，z-index 在上，cursor:pointer，
   这样点击 label 实际是点击 input，WKWebView 原生支持。 */
.file-btn{
  position:relative; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  /* 不设 overflow:hidden，允许 input 自然覆盖 */
}
.file-btn input[type=file]{
  position:absolute; top:0; left:0; right:0; bottom:0;
  width:100%; height:100%;
  opacity:0;          /* 透明但可点击 */
  cursor:pointer;
  /* 关键：不设 pointer-events:none，不设 display:none，不设 hidden */
  z-index:2;
  font-size:0;
}

/* ── 折叠分组 ────────────────────────────────────────────────────────── */
details{border-bottom:1px solid var(--line)}
details:last-of-type{border-bottom:none}
summary{
  cursor:pointer; list-style:none; padding:9px 14px;
  font-weight:600; font-size:12.5px;
  display:flex; align-items:center; gap:7px; user-select:none;
  color:var(--fg2); transition:color .12s;
  position:sticky; top:0; background:var(--panel); z-index:5;
}
summary::-webkit-details-marker{display:none}
summary::before{
  content:"›"; color:var(--dim); transition:.15s;
  display:inline-block; font-size:16px; font-weight:300; line-height:1;
}
details[open] summary::before{transform:rotate(90deg); color:var(--acc2)}
details[open] summary{color:var(--fg)}
summary:hover{color:var(--fg)}
.grid{padding:1px 14px 12px; display:flex; flex-direction:column; gap:8px}

/* ── 表单行 ──────────────────────────────────────────────────────────── */
.row{display:grid; grid-template-columns:90px 1fr; gap:8px; align-items:center; font-size:12.5px}
[hidden]{display:none !important}
.row>span:first-child{color:var(--dim); font-size:12px}
.row b{color:var(--acc2); font-weight:600}

.chk{display:flex; align-items:center; gap:7px; font-size:12.5px; cursor:pointer; color:var(--fg2)}
.chk input{width:14px; height:14px; accent-color:var(--acc)}
.duo{display:flex; gap:6px}

/* ── 控件 ────────────────────────────────────────────────────────────── */
input[type=text],input[type=number],select,input[type=search]{
  width:100%; background:var(--surface); border:1px solid var(--line2);
  border-radius:var(--radius-sm); color:var(--fg); padding:7px 9px;
  font-size:12.5px; font-family:inherit; outline:none; transition:.12s;
}
input[type=text]::placeholder,input[type=number]::placeholder{color:var(--dim)}
input[type=text]:focus,input[type=number]:focus,select:focus{
  border-color:var(--acc); box-shadow:0 0 0 2.5px rgba(59,111,255,.12);
}
select{
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23757d95' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:28px; cursor:pointer;
}
input[type=color]{
  width:36px; height:28px; padding:2px; background:var(--surface);
  border:1px solid var(--line2); border-radius:6px; cursor:pointer;
}
input[type=range]{
  -webkit-appearance:none; width:100%; height:3px; border-radius:2px;
  background:var(--line2); outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--acc2); border:2px solid rgba(255,255,255,.12);
  cursor:pointer; box-shadow:0 2px 5px rgba(0,0,0,.4);
}
input[type=range]::-webkit-slider-thumb:hover{background:var(--acc)}

.imgpick{display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.dim{color:var(--dim); font-size:11.5px}

code{
  background:var(--surface); border:1px solid var(--line); border-radius:6px;
  padding:4px 7px; display:block; word-break:break-all; font-size:11px; color:#9fc0ff;
}
code.inline{display:inline; padding:1px 4px; font-size:10.5px; border-radius:4px}

.tip{
  color:var(--dim); font-size:11px; margin:6px 0 0; line-height:1.6;
  padding:7px 9px; background:var(--surface); border:1px solid var(--line);
  border-radius:6px;
}
.tip.warn{border-color:rgba(224,168,46,.3); background:rgba(224,168,46,.06); color:#c49030}

/* ── 发票信息 / 发票模板 ──────────────────────────────────────────────── */
.invblock{display:flex; flex-direction:column; gap:8px}
.tpl-section-title{
  font-size:10.5px; font-weight:700; color:var(--dim);
  letter-spacing:.4px; text-transform:uppercase;
  padding:6px 0 2px; border-bottom:1px solid var(--line); margin-bottom:1px;
}

/* ── 全局拖拽/粘贴提示层 ──────────────────────────────────────────────── */
.drop-hint{
  position:fixed; inset:0; z-index:200;
  background:rgba(10,12,18,.75); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .18s;
}
.drop-hint.on{opacity:1; pointer-events:auto}
.drop-hint-inner{
  background:var(--panel2); border:2px dashed var(--acc); border-radius:16px;
  padding:32px 40px; text-align:center; box-shadow:var(--shadow-lg);
}
.drop-hint-icon{font-size:40px; margin-bottom:8px}
.drop-hint-text{font-size:15px; font-weight:600; color:var(--fg); margin-bottom:14px}
.drop-hint-choices{display:flex; gap:8px; justify-content:center}
.drop-hint-choices .btn{min-width:100px; justify-content:center}

/* ── 图库 ────────────────────────────────────────────────────────────── */
.gallery{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr));
  gap:7px; padding:2px 14px 8px;
}
.gallery .gi{
  position:relative; border-radius:7px; overflow:hidden;
  border:1px solid var(--line); aspect-ratio:1; cursor:pointer;
  background:var(--surface); transition:border-color .12s;
}
.gallery .gi:hover{border-color:var(--line2)}
.gallery .gi img{width:100%; height:100%; object-fit:cover; display:block}
.gallery .gi.on{outline:2px solid var(--acc); outline-offset:1px}
.gallery .gi .x{
  position:absolute; top:2px; right:2px; width:16px; height:16px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; font-size:10px;
  display:flex; align-items:center; justify-content:center;
  line-height:1; opacity:0; transition:.12s;
}
.gallery .gi:hover .x{opacity:1}
.gallery .empty{color:var(--dim); font-size:11.5px; grid-column:1/-1}

/* ── Toast ───────────────────────────────────────────────────────────── */
.toast{
  position:fixed; left:50%; bottom:20px; transform:translate(-50%,16px);
  background:var(--panel3); border:1px solid var(--line2); color:var(--fg);
  padding:9px 16px; border-radius:10px; font-size:12.5px;
  opacity:0; pointer-events:none; transition:.18s;
  box-shadow:0 8px 24px rgba(0,0,0,.5); z-index:300;
  max-width:80vw; white-space:nowrap;
}
.toast.on{opacity:1; transform:translate(-50%,0)}
.toast.err{border-color:rgba(226,80,80,.35); background:rgba(226,80,80,.08); color:#e88080}

/* ── 发票模板大图预览遮罩 ────────────────────────────────────────────── */
.tpl-preview-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:250;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); cursor:pointer;
}
.tpl-preview-overlay img{
  max-width:92vw; max-height:92vh; border-radius:8px;
  box-shadow:0 16px 48px rgba(0,0,0,.6);
}
.tpl-preview-overlay.hidden{display:none}