/* 表格 */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.panel-head{padding:15px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.panel-head .tt{font-family:var(--serif);font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px}
.search-box{position:relative}
.search-box input{height:38px;width:260px;padding:0 12px 0 36px;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-size:14px;transition:all .18s}
.search-box input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.search-box .ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--fg-3);pointer-events:none;display:grid;place-items:center}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:7px 13px;font-size:12.5px;font-weight:500;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg-2);cursor:pointer;transition:all .18s var(--ease)}
.chip:hover{border-color:var(--border-strong)}
.chip.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 22px;font-size:13px;border-bottom:1px solid var(--border);white-space:nowrap}
th{font-size:11px;font-weight:600;color:var(--fg-3);letter-spacing:.06em;background:var(--surface-2);position:sticky;top:0;z-index:1;text-transform:uppercase}
tbody tr{transition:background .12s;position:relative}
tbody tr:hover{background:var(--surface-2)}
tbody tr:hover td:first-child::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
td:first-child{position:relative}
.user-cell{display:flex;align-items:center;gap:11px}
.avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--bg-2),var(--border));color:var(--fg);display:grid;place-items:center;font-family:var(--serif);font-weight:700;font-size:14px;flex-shrink:0}
.user-cell .nick{font-weight:600}
.user-cell .uid{font-size:10.5px;color:var(--fg-3);font-family:var(--mono)}
.row-actions{display:flex;gap:6px}
.pagination{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-top:1px solid var(--border);font-size:13px;color:var(--fg-3)}
.page-nav{display:flex;gap:4px}
.page-btn{min-width:31px;height:31px;padding:0 8px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--fg-2);font-family:var(--mono);font-size:12px;transition:all .15s}
.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.page-btn.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.page-btn:disabled{opacity:.35;cursor:not-allowed}
.empty{padding:48px 20px;text-align:center;color:var(--fg-3);font-size:13px}
.empty .ico{font-size:30px;opacity:.4;margin-bottom:6px}

/* 兑换码 */
.codes-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:18px;align-items:start}
@media(max-width:1100px){.codes-grid{grid-template-columns:1fr}}
.code-form{padding:22px}
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--fg-2);margin-bottom:8px;letter-spacing:.02em}
.form-label .req{color:var(--accent);margin-left:2px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.plan-opt{position:relative;padding:13px 15px;border:1px solid var(--border);border-radius:10px;background:var(--bg);cursor:pointer;transition:all .18s var(--ease)}
.plan-opt:hover{border-color:var(--border-strong)}
.plan-opt input{position:absolute;opacity:0}
.plan-opt.selected{border-color:var(--accent);background:var(--accent-soft)}
.plan-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft)} /* 默认选中也显示高亮（无需 JS 加 class） */
.plan-opt:has(input:checked) .pn{color:var(--accent-2)}
.plan-opt .pn{font-weight:700;font-size:13px;font-family:var(--serif)}
.plan-opt .pd{font-size:11px;color:var(--fg-3);margin-top:3px}
.plan-opt.selected .pn{color:var(--accent-2)}
.input{height:40px;padding:0 12px;width:100%;border:1px solid var(--border);border-radius:9px;background:var(--bg);font-size:14px;transition:all .18s}
.input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.qty-stepper{display:flex;align-items:center}
.qty-stepper button{width:40px;height:40px;border:1px solid var(--border);background:var(--bg);color:var(--fg-2);font-size:17px;transition:all .15s}
.qty-stepper button:hover{background:var(--accent-soft);color:var(--accent-2)}
.qty-stepper button:first-child{border-radius:9px 0 0 9px}
.qty-stepper button:last-child{border-radius:0 9px 9px 0;border-left:none}
.qty-stepper input{width:62px;height:40px;text-align:center;border:1px solid var(--border);border-left:none;border-right:none;background:var(--bg);font-size:15px;font-weight:600}
.gen-btn{width:100%;height:42px;justify-content:center;font-size:14px;font-weight:600}
.gen-result{margin-top:18px;padding:15px;border-radius:10px;background:var(--bg-2);border:1px dashed var(--border-strong);display:none}
.gen-result.show{display:block;animation:fadeUp .3s var(--ease)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.gen-result-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.gen-result-head .ttl{font-size:12px;color:var(--fg-3)}
.gen-result-head .ttl b{color:var(--success);font-family:var(--mono)}
.gen-list{font-family:var(--mono);font-size:13px;max-height:190px;overflow-y:auto;display:flex;flex-direction:column;gap:5px}
.gen-list .code-line{padding:7px 11px;background:var(--surface);border-radius:7px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-left:2px solid var(--success)}
.gen-list .code-line span{word-break:break-all}
.copy-btn{width:30px;height:30px;border-radius:7px;display:grid;place-items:center;color:var(--fg-3);transition:all .15s}
.copy-btn:hover{background:var(--bg-2);color:var(--accent-2)}
.code-list{display:flex;flex-direction:column;overflow-y:auto} /* 高度由 pages.css max-height 控制（自适应+上限滚动） */
.code-item{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:14px;align-items:center;padding:13px 22px;border-bottom:1px solid var(--border);transition:background .15s}
.code-item:hover{background:var(--surface-2)}
.code-item:last-child{border-bottom:none}
.code-item .c-code{font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.02em}
.code-item .c-plan{font-size:12px;color:var(--fg-2);margin-top:2px}
.code-item .c-meta{font-size:11px;color:var(--fg-3);font-family:var(--mono);text-align:right}

/* 过期快捷选择 */
.exp-pick{display:flex;gap:6px;flex-wrap:wrap}
.exp-opt{padding:7px 13px;font-size:12.5px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg-2);cursor:pointer;transition:all .18s var(--ease)}
.exp-opt:hover{border-color:var(--border-strong)}
.exp-opt.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
/* 状态总览面板（兑换码页） */
.status-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow);margin-bottom:18px}
.status-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:600px){.status-cards{grid-template-columns:1fr}}
.status-card{display:flex;align-items:baseline;justify-content:center;gap:8px;padding:12px 10px;border-radius:10px;border:1px solid var(--border);background:var(--bg);transition:all .18s var(--ease)}
.status-card b{font-family:var(--mono);font-size:22px;line-height:1}
.status-card span{font-size:12px;color:var(--fg-3)}
.status-card:hover{border-color:var(--accent)}
.status-card.active{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.status-card.active span{color:var(--bg-2);opacity:.75}
.status-card.s-unused b{color:var(--success)}
.status-card.s-used b{color:var(--info)}
.status-card.s-void b{color:var(--danger)}
.status-card.active b{color:inherit}
.status-plans{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--border)}
.plan-chip{padding:7px 13px;font-size:12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-2);color:var(--fg-2);transition:all .15s}
.plan-chip b{font-family:var(--mono);margin-left:4px}
.plan-chip.low{border-color:var(--danger);color:var(--danger);background:color-mix(in srgb,var(--danger-soft) 45%,var(--surface))}
.plan-chip.warn{border-color:var(--warning);color:var(--warning)}
/* 批量操作 */
.batch-bar{display:none;align-items:center;justify-content:space-between;gap:10px;padding:11px 22px;background:var(--accent-soft);border-bottom:1px solid var(--border);flex-wrap:wrap}
.batch-bar.show{display:flex}
.batch-bar .cnt{font-size:13px;font-weight:600}
.code-item .cb{width:19px;height:19px;border-radius:5px;border:1.5px solid var(--border-strong);background:var(--surface);flex:none;display:grid;place-items:center;cursor:pointer;transition:all .15s}
.code-item .cb svg{width:12px;height:12px;stroke:#fff;opacity:0}
.code-item.sel .cb{background:var(--accent);border-color:var(--accent)}
.code-item.sel .cb svg{opacity:1}
.code-item.sel{background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface))}
.select-all{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--fg-2);cursor:pointer;padding:5px 10px;border-radius:7px;border:1px solid var(--border);background:var(--bg);transition:all .15s}
.select-all:hover{border-color:var(--accent)}
.select-all .cb{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--border-strong);background:var(--surface);display:grid;place-items:center;flex:none}
.select-all .cb svg{width:11px;height:11px;stroke:#fff;opacity:0}
.select-all.on .cb{background:var(--accent);border-color:var(--accent)}
.select-all.on .cb svg{opacity:1}

/* 登录 */
.login-mask{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--bg)}
.bg-grain.lg{z-index:101}
.login-card{position:relative;z-index:102;width:100%;max-width:390px;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:38px 32px;box-shadow:var(--shadow-lg);text-align:center}
.login-card .logo{width:56px;height:56px;display:grid;place-items:center;margin:0 auto 16px}
.login-card .logo img{width:52px;height:52px;object-fit:contain;display:block}
.login-card h2{font-family:var(--serif);font-size:21px;margin-bottom:5px}
.login-card p{color:var(--fg-3);font-size:13px;margin-bottom:22px}
.login-input{width:100%;height:46px;padding:0 14px;border:1px solid var(--border);border-radius:11px;background:var(--bg-2);font-size:15px;margin-bottom:13px;text-align:center;letter-spacing:.05em;transition:all .18s}
.login-input:focus{outline:none;border-color:var(--accent);background:var(--surface)}
.login-btn{width:100%;height:48px;border-radius:11px;font-size:16px;font-weight:700}
.login-hint{font-size:11px;color:var(--fg-3);margin-top:16px;line-height:1.7}

/* Toast / Modal */
.toast-container{position:fixed;bottom:30px;right:30px;z-index:120;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--fg);color:var(--bg);padding:12px 18px;border-radius:10px;font-size:13px;font-weight:500;box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:9px;min-width:220px;animation:toastIn .3s var(--ease);border-left:3px solid var(--accent)}
.toast.success{border-left-color:var(--success)}
.toast.error{border-left-color:var(--danger)}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
.modal-mask{position:fixed;inset:0;background:rgba(30,22,10,.5);z-index:110;display:none;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:20px}
.modal-mask.show{display:flex;animation:fade .2s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:14px;max-width:430px;width:100%;padding:26px;box-shadow:var(--shadow-lg);animation:modalIn .25s var(--ease)}
@keyframes modalIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.modal h3{font-family:var(--serif);font-size:18px;margin-bottom:9px}
.modal p{color:var(--fg-2);font-size:13.5px;margin-bottom:20px;line-height:1.6}
.modal-actions{display:flex;justify-content:flex-end;gap:9px}

.tabbar{display:none}

/* 表内搜索框（兑换码/订单/发票统一） */
.table-search{height:30px;width:150px;padding:0 10px;font-size:12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--fg-2);transition:border-color .15s}
.table-search:focus{outline:none;border-color:var(--accent);width:190px}
.table-search::placeholder{color:var(--fg-3)}

/* 发票批量条（复用兑换码 batch-bar 视觉，无则自建） */
#invBatchBar{display:none;align-items:center;gap:10px;padding:10px 14px;border:1px solid var(--border);border-radius:10px;background:var(--surface-2)}
#invBatchBar.show{display:flex}

/* ── 自研日期选择器 ── */
.datepicker-pop{
  position:fixed;z-index:999;width:248px;background:var(--surface);
  border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.18);
  padding:12px;font-size:12.5px;
}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-lbl{font-weight:600;color:var(--fg);font-size:13px}
.dp-nav{width:26px;height:26px;border:1px solid var(--border);border-radius:7px;background:var(--bg);color:var(--fg-2);cursor:pointer;font-size:11px;line-height:1}
.dp-nav:hover{border-color:var(--accent);color:var(--accent)}
.dp-week{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--fg-3);margin-bottom:6px}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-cell{height:28px;display:flex;align-items:center;justify-content:center;border-radius:7px;cursor:pointer;color:var(--fg-2);transition:all .12s}
.dp-cell:hover{background:var(--bg-2)}
.dp-cell.sel{background:var(--accent);color:#fff;font-weight:600}
.dp-cell.today{border:1px solid var(--accent)}
.dp-cell.dis{color:var(--fg-3);opacity:.45;cursor:not-allowed}
.dp-cell.dis:hover{background:transparent}
.dp-empty{height:28px}
.dp-foot{display:flex;gap:8px;justify-content:flex-end;margin-top:10px;padding-top:10px;border-top:1px dashed var(--border)}
.dp-foot button{font-size:12px;padding:5px 12px;border-radius:7px;border:1px solid var(--border);background:var(--bg);color:var(--fg-2);cursor:pointer}
.dp-foot button:hover{border-color:var(--accent);color:var(--accent)}

/* ── 时间范围选择器（快捷项 + 日历区间，全后台共享） ── */
.rp-trigger{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;font-size:12px;
  border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--fg-2);cursor:pointer;
  transition:all .15s;font-family:var(--sans);white-space:nowrap}
.rp-trigger:hover{border-color:var(--accent);color:var(--accent)}
.rp-trigger .rp-trigger-label{font-weight:500}
.rp-pop{position:fixed;z-index:999;display:flex;width:470px;max-width:calc(100vw - 16px);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.2);overflow:hidden}
.rp-quick-col{width:116px;flex-shrink:0;padding:10px 8px;display:flex;flex-direction:column;gap:2px;
  border-right:1px solid var(--border);background:var(--bg-2)}
.rp-quick{height:30px;padding:0 10px;font-size:12px;text-align:left;border:none;border-radius:8px;
  background:transparent;color:var(--fg-2);cursor:pointer;transition:all .12s;font-family:var(--sans)}
.rp-quick:hover{background:var(--surface-2);color:var(--fg)}
.rp-quick.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.rp-cal{flex:1;padding:12px 14px;min-width:0}
.rp-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;padding-top:10px;border-top:1px dashed var(--border)}
.rp-preview{font-size:11.5px;color:var(--fg-3);font-family:var(--mono);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-clear{font-size:12px;padding:5px 12px;border-radius:7px;border:1px solid var(--border);background:var(--bg);color:var(--fg-2);cursor:pointer;flex-shrink:0}
.rp-clear:hover{border-color:var(--danger);color:var(--danger)}
/* 日历区间高亮（复用 .dp-cell）：起止实底、中间浅底、首尾半圆 */
.dp-cell.range-in{background:var(--accent-soft);border-radius:0}
.dp-cell.range-start{background:var(--accent);color:#fff;font-weight:600;border-radius:7px 0 0 7px}
.dp-cell.range-end{background:var(--accent);color:#fff;font-weight:600;border-radius:0 7px 7px 0}
.dp-cell.range-start.range-end{border-radius:7px}