/* 基础重置 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; padding:0; font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans','PingFang SC','Microsoft YaHei',sans-serif; background: var(--bg); color: var(--text); font-size:16px; }
body { -webkit-font-smoothing: antialiased; line-height:1.45; }

:root {
  /* 调色板：柔和 / 极简 */
  --primary:#1a1a1a;
  --primary-hover:#2a2a2a;
  --primary-active:#0a0a0a;
  --bg:#fafbfc;
  --surface:#ffffff;
  --surface-alt:#f8f9fa;
  --line:#eaecef;
  --radius-xs:3px;
  --radius-sm:6px;
  --radius:10px;
  --radius-lg:16px;
  --text:#24292f;
  --text-soft:#656d76;
  --danger:#d1242f;
  --success:#1a7f37;
  --warn:#bf8700;
  --focus:#0969da;
  --shadow-sm:0 1px 2px rgba(31,35,40,.04);
  --shadow:0 1px 3px rgba(31,35,40,.06);
  --shadow-hover:0 2px 6px rgba(31,35,40,.08);
  --transition: .18s ease;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0f1419;
    --surface:#161b22;
    --surface-alt:#21262d;
    --line:#30363d;
    --text:#f0f6fc;
    --text-soft:#8b949e;
    --shadow-sm:0 1px 2px rgba(1,4,9,.24);
    --shadow:0 1px 3px rgba(1,4,9,.36);
    --shadow-hover:0 2px 6px rgba(1,4,9,.42);
  }
  body { color-scheme: dark; }
}

body.blocked { overflow:hidden; }

#desktop-block {
  position:fixed; inset:0; background:#111; color:#fff; display:none; align-items:center; justify-content:center; padding:2rem; text-align:center; z-index:9999;
}
#desktop-block.active { display:flex; }


.container { max-width:400px; margin:0 auto; padding:2rem 1.5rem 4rem; }
h1 { font-size:1.5rem; margin:0 0 .5rem; font-weight:600; text-align:center; color:var(--text); }
h2 { font-size:1.1rem; margin:1.5rem 0 .8rem; font-weight:500; }
p { line-height:1.5; color:var(--text-soft); }

/* 链接精简风格 */
a { color:var(--text-soft); text-decoration:none; position:relative; transition:var(--transition); }
a:hover { color:var(--primary); }
a:active { opacity:.7; }
a:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--radius-xs); }

form { background:var(--surface); padding:2rem 1.5rem; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); margin:1.5rem 0; }
form .field { margin-bottom:1.5rem; }
label { display:block; font-size:.72rem; font-weight:500; margin:0 0 .5rem; color:var(--text-soft); }
input[type=text],input[type=password],input[type=email] { width:100%; padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm); font-size:.95rem; background:var(--surface); color:var(--text); outline:none; transition: var(--transition); }
input[type=text]:focus,input[type=password]:focus,input[type=email]:focus { border-color:var(--focus); box-shadow:0 0 0 2px rgba(9,105,218,.12); }
input::placeholder { color:var(--text-soft); opacity:.6; }

button { cursor:pointer; font:inherit; border:none; padding:.85rem 1.1rem; border-radius:var(--radius-sm); background:var(--primary); color:#fff; font-weight:500; font-size:.9rem; width:100%; transition: var(--transition); display:inline-flex; align-items:center; justify-content:center; gap:.5rem; box-shadow:var(--shadow-sm); margin-top:.5rem; }
button:hover { background:var(--primary-hover); box-shadow:var(--shadow); }
button:active { background:var(--primary-active); box-shadow:var(--shadow-sm); }
button:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
button[disabled] { opacity:.5; cursor:not-allowed; }

.link-row { margin-top:1.5rem; font-size:.85rem; display:flex; gap:1rem; justify-content:center; align-items:center; }
.link-row a { padding:.3rem .5rem; border-radius:var(--radius-xs); line-height:1.3; color:var(--text-soft); }
.link-row a:hover { color:var(--primary); background:var(--surface-alt); }

.msg { margin-top:1rem; font-size:.8rem; line-height:1.4; font-weight:400; text-align:center; }
.msg.error { color:var(--danger); }
.msg.success { color:var(--success); }
.msg.warn { color:var(--warn); }

.top-bar { display:flex; align-items:center; justify-content:space-between; margin-bottom:.9rem; gap:.75rem; }
.top-bar h1 { margin:0; font-size:1.18rem; font-weight:600; }
.btn-text { background:var(--surface-alt); color:var(--primary); width:auto; padding:.5rem .85rem; font-size:.72rem; font-weight:600; border:1px solid var(--line); box-shadow:var(--shadow-sm); border-radius:var(--radius-xs); }
.btn-text:hover { background:var(--surface); }
.btn-text:active { background:var(--surface-alt); }

.card { background:var(--surface); border:1px solid var(--line); padding:1rem 1rem 1.25rem; border-radius:var(--radius); box-shadow:var(--shadow); transition:var(--transition); }
.card:hover { box-shadow:var(--shadow-hover); }

/* 验证券页面 */
.verify-form { display:flex; gap:.6rem; align-items:stretch; }
.verify-form input { flex:1; }

/* 扫码区域 */
.scan-area { text-align:center; margin:1.5rem 0; }
.scan-main { width:100%; padding:1.2rem 1.5rem; font-size:1rem; font-weight:600; background:var(--primary); border-radius:var(--radius); }
.log { margin-top:1.15rem; font-size:.7rem; background:linear-gradient(145deg,#111827,#1f2937); color:#cbd5e1; padding:.75rem .7rem .85rem; border-radius:var(--radius-sm); max-height:220px; overflow:auto; line-height:1.4; box-shadow:0 2px 6px -2px rgba(0,0,0,.5),0 4px 14px -4px rgba(0,0,0,.55); border:1px solid #253040; }
.log b { color:#fff; font-weight:600; }

/* 渐隐动画 */
.fade-in { animation:fade .5s cubic-bezier(.4,.14,.3,1); }
@keyframes fade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }

/* 小屏适配 */
@media (max-width:360px) {
  h1 { font-size:1.38rem; }
  button { font-size:.88rem; }
  .verify-form { flex-direction:column; }
  button.scan-inline { width:100%; }
}

/* 扫码覆盖层 */
#scanner-overlay { position:fixed; inset:0; background:rgba(10,15,25,.92); backdrop-filter: blur(10px) saturate(140%); display:none; flex-direction:column; align-items:center; padding:1.1rem .85rem 2.4rem; z-index:9998; overflow:auto; }
#scanner-overlay.active { display:flex; }
#scanner-overlay h2 { color:#fff; margin:.2rem 0 1.05rem; font-size:1.1rem; font-weight:600; letter-spacing:.5px; }
#scanner-overlay video { width:100%; max-width:480px; aspect-ratio:3/4; background:#000; border-radius:20px; object-fit:cover; box-shadow:0 4px 28px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.06); }
#scanner-overlay .actions { margin-top:1rem; display:flex; gap:.8rem; width:100%; max-width:480px; }
#scanner-overlay button { flex:1; }
#scanner-status { margin-top:.8rem; font-size:.7rem; color:#9ca3af; max-width:480px; width:100%; text-align:left; line-height:1.35; letter-spacing:.3px; }
#scanner-overlay .close-btn { background:#374151; border:1px solid #4b5563; box-shadow:var(--shadow-sm); }
#scanner-overlay .close-btn:hover { background:#445063; }
#scanner-overlay .torch-btn { background:#2563eb; box-shadow:var(--shadow-sm); }
#scanner-overlay .torch-btn.off { background:#334155; }

button.scan-inline { width:auto; flex:0 0 auto; background:#30363d; border:1px solid #3d444d; color:#fff; padding:.62rem .9rem; font-size:.7rem; font-weight:600; letter-spacing:.5px; }
button.scan-inline:hover { background:#3d444d; }
button.scan-inline:active { background:#2a3035; }

/* 细节微交互 */
input, button { will-change: transform, box-shadow; }
::selection { background: var(--primary); color:#fff; }

/* 券列表样式 */
.list-controls { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.list-controls select { padding:.5rem .7rem; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); font-size:.8rem; }
.status-text { font-size:.75rem; color:var(--text-soft); }
.coupon-list { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); margin-top:.75rem; }
.coupon-item { padding:.9rem 1rem; border-bottom:1px solid var(--line); cursor:pointer; transition:var(--transition); position:relative; }
.coupon-item:hover { background:var(--surface-alt); }
.coupon-item:last-child { border-bottom:none; }
.coupon-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.4rem; }
.coupon-id { font-size:.8rem; font-weight:500; color:var(--text); }
.service-name { font-size:.85rem; font-weight:600; color:var(--text); margin-bottom:.5rem; }
.description { font-size:.8rem; color:var(--text-soft); margin-bottom:.5rem; line-height:1.3; }
.coupon-status { font-size:.7rem; padding:.2rem .5rem; border-radius:12px; font-weight:500; }
.coupon-status.used { background:#fef2f2; color:var(--danger); }
.coupon-status.unused { background:#f0f9ff; color:var(--focus); }
.coupon-details { font-size:.7rem; color:var(--text-soft); line-height:1.4; }
.click-hint { font-size:.65rem; color:var(--text-soft); margin-top:.4rem; opacity:.7; }
.empty { padding:2rem; text-align:center; color:var(--text-soft); font-size:.85rem; }
.loading-more { padding:1rem; text-align:center; font-size:.75rem; color:var(--text-soft); }
.pagination { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-bottom:.75rem; }
.page-btn { width:auto; padding:.4rem .8rem; font-size:.75rem; background:var(--surface-alt); color:var(--text); border:1px solid var(--line); }
.page-btn:hover { background:var(--surface); }
.page-btn:disabled { opacity:.4; cursor:not-allowed; }
.page-info { font-size:.8rem; color:var(--text-soft); min-width:3rem; text-align:center; }

/* 券详情弹窗 */
.coupon-modal { position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); display:none; align-items:center; justify-content:center; padding:1rem; z-index:9999; }
.coupon-modal.active { display:flex; }
.coupon-modal-content { background:var(--surface); border-radius:var(--radius); padding:1.5rem; max-width:420px; width:100%; box-shadow:var(--shadow-hover); border:1px solid var(--line); }
.coupon-modal h3 { margin:0 0 1rem; font-size:1.1rem; font-weight:600; text-align:center; }
.coupon-info { margin-bottom:1.5rem; }
.info-row { display:flex; justify-content:space-between; padding:.5rem 0; border-bottom:1px solid var(--line); font-size:.85rem; }
.info-row:last-child { border-bottom:none; }
.info-row span:first-child { font-weight:500; color:var(--text-soft); white-space:nowrap; }
.info-row.desc-row { align-items:flex-start; justify-content:space-between; }
.info-row .desc-content { flex:1; margin-left:.5rem; word-wrap:break-word; text-align:right; }
.info-row .status-0 { color:var(--focus); font-weight:500; }
.info-row .status-1 { color:var(--danger); font-weight:500; }
.modal-actions { display:flex; gap:.75rem; }
.modal-btn { flex:1; padding:.7rem 1rem; border:none; border-radius:var(--radius-sm); font-size:.85rem; font-weight:500; cursor:pointer; transition:var(--transition); }
.modal-btn.cancel { background:var(--surface-alt); color:var(--text); border:1px solid var(--line); }
.modal-btn.cancel:hover { background:var(--line); }
.modal-btn.confirm { background:var(--primary); color:#fff; }
.modal-btn.confirm:hover { background:var(--primary-hover); }
.modal-btn.disabled { background:var(--surface-alt); color:var(--text-soft); cursor:not-allowed; border:1px solid var(--line); }

/* 滚动条优化 (仅支持浏览器) */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(0,0,0,.18); border-radius:20px; border:2px solid transparent; background-clip:content-box; }
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border:2px solid transparent; }
}