@font-face { font-family: "NanumPen"; src: url("/fonts/NanumPenScript-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "NanumBrush"; src: url("/fonts/NanumBrushScript-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "Gaegu"; src: url("/fonts/Gaegu-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "HiMelody"; src: url("/fonts/HiMelody-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "PoorStory"; src: url("/fonts/PoorStory-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "GamjaFlower"; src: url("/fonts/GamjaFlower-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "MaShanZheng"; src: url("/fonts/MaShanZheng-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "ZhiMangXing"; src: url("/fonts/ZhiMangXing-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "LongCang"; src: url("/fonts/LongCang-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "LiuJianMaoCao"; src: url("/fonts/LiuJianMaoCao-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "LXGWWenKai"; src: url("/fonts/LXGWWenKai-Regular.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "JfOpenHuninn"; src: url("/fonts/jf-openhuninn.ttf") format("truetype"); font-display: block; }
@font-face { font-family: "ZCOOLKuaiLe"; src: url("/fonts/ZCOOLKuaiLe-Regular.ttf") format("truetype"); font-display: block; }
:root { --blue: #2f9ede; --blue-d: #1f7fb8; --bg: #f2f5f8; --card: #fff; --line: #dfe5ea; --text: #1d2a35; --muted: #7a8794; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Microsoft YaHei", "PingFang SC", "Malgun Gothic", system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 24px; padding: 0 20px; height: 54px; background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.brand { font-weight: 700; font-size: 17px; }
.whale { font-size: 20px; }
.brand-ico { height: 30px; width: auto; background: #fff; border-radius: 6px; padding: 2px 4px; vertical-align: middle; margin-right: 7px; box-sizing: content-box; }
.side-brand .brand-ico { height: 34px; }
.tabs { display: flex; gap: 4px; }
.tab { background: transparent; border: 0; color: #e8f4fc; padding: 8px 14px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.tab.active { background: rgba(255,255,255,.22); color: #fff; font-weight: 700; }
.engine { margin-left: auto; font-size: 12px; opacity: .9; }
.tabpane { display: none; }
.tabpane.active { display: flex; }
#tab-new { gap: 20px; padding: 20px; align-items: flex-start; flex-wrap: wrap; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; width: 520px; flex: none; }
.panel.wide { width: min(2000px, calc(100% - 36px)); margin: 20px auto; }
.step { padding: 12px 0 16px; border-bottom: 1px dashed var(--line); }
.step:last-child { border-bottom: 0; }
h2 { font-size: 16px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
h2 small { font-weight: 400; color: var(--muted); font-size: 12px; }
.num { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--blue); color: #fff; align-items: center; justify-content: center; font-size: 13px; }
.uploads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.upl { position: relative; display: block; border: 2px dashed #b9cfe0; border-radius: 10px; height: 130px; cursor: pointer; overflow: hidden; background: #f7fbfe; }
.upl:hover { border-color: var(--blue); }
.upl-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.upl-icon { font-size: 30px; }
.upl-title { font-weight: 700; }
.upl-hint { font-size: 12px; color: var(--muted); }
.upl-hint b { color: #c0392b; }
.upl-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.upl.has .upl-inner { display: none; }
.upl-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; font-size: 14px; cursor: pointer; line-height: 26px; padding: 0; }
.upl-x:hover { background: #c0392b; }
.upl.has .upl-preview { cursor: grab; }
.actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; cursor: pointer; color: var(--text); }
.btn:hover { border-color: var(--blue); color: var(--blue-d); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.btn.primary:hover { background: var(--blue-d); color: #fff; }
.btn.big { padding: 12px 20px; font-size: 16px; }
.btn.ghost { background: transparent; color: var(--muted); }
.btn:disabled { opacity: .5; cursor: wait; }
.status { font-size: 13px; color: var(--muted); }
.status.err { color: #c0392b; }
.status.ok { color: #1e8e3e; }
.warnings { margin: 8px 0 0; padding-left: 18px; color: #b7791f; font-size: 13px; }
.warnings:empty { display: none; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.grid .c2 { grid-column: span 2; }
.grid input, .grid select { font: inherit; font-size: 14px; color: var(--text); padding: 7px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.grid input:focus, .grid select:focus { outline: 2px solid #bfe0f5; border-color: var(--blue); }
.grid input.mono { font-family: Consolas, monospace; letter-spacing: .5px; }
details.mnp summary { cursor: pointer; color: var(--muted); font-size: 13px; }
details.mnp .grid { margin-top: 8px; }
/* 设置页分组折叠块 */
.setgrp { border: 1px solid var(--line); border-radius: 10px; margin: 12px 0; background: var(--card); overflow: hidden; }
.setgrp > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 15px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; background: #f6f8fa; user-select: none; }
.setgrp[open] > summary { border-bottom: 1px solid var(--line); }
.setgrp > summary::-webkit-details-marker { display: none; }
.setgrp > summary small { font-weight: 400; color: var(--muted); font-size: 12px; }
.setgrp > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.setgrp[open] > summary::after { transform: rotate(180deg); }
.setgrp > *:not(summary) { padding-left: 16px; padding-right: 16px; }
.setgrp > .grid { padding-top: 14px; padding-bottom: 14px; }
.setgrp > h3 { margin-top: 16px; }
.setgrp > .note { padding-top: 10px; padding-bottom: 10px; }
.consents { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.consents legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.consents label { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 12px; }
.sigrow { display: flex; gap: 14px; align-items: center; }
.sigbox { width: 220px; height: 80px; border: 1px solid var(--line); border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #fafcfe; }
.sigbox img { max-width: 200px; max-height: 70px; }
.sigbtns { display: flex; flex-direction: column; gap: 6px; }
.muted { color: var(--muted); font-size: 13px; }
.qrwrap { display: flex; gap: 14px; align-items: center; margin-top: 12px; padding: 12px; background: #f7fbfe; border-radius: 8px; }
.qrwrap #qrcode img, .qrwrap #qrcode canvas { width: 140px; height: 140px; }
.qrtext { font-size: 13px; line-height: 1.7; }
.qrtext code { font-size: 12px; }

/* preview */
.preview { flex: 1; min-width: 0; position: sticky; top: 74px; overflow: auto; max-height: calc(100vh - 94px); background: #e6ebf0; border-radius: 12px; padding: 16px; }
.upl.drag { border-color: var(--blue); background: #e6f3fb; border-style: solid; }
body.dragging .upl { border-color: var(--blue); }

/* records */
.search { width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; margin-bottom: 12px; }
.rectable { width: 100%; border-collapse: collapse; font-size: 13px; }
.rectable th, .rectable td { text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
.rectable th { color: var(--muted); font-weight: 600; font-size: 12px; }
.rectable td.mono { font-family: Consolas, monospace; }
.rectable .btn { padding: 4px 10px; font-size: 12px; margin-right: 4px; }
.stamp-preview { max-height: 90px; border: 1px solid var(--line); padding: 6px; border-radius: 8px; background: #fff; }
.note { margin-top: 18px; padding: 12px 14px; background: #f7fbfe; border-radius: 8px; font-size: 13px; line-height: 1.7; color: #4a5a68; }
.note code { background: #e9f2f8; padding: 1px 5px; border-radius: 4px; }

/* signature modal */
.modal { position: fixed; inset: 0; background: rgba(20,30,40,.6); z-index: 50; display: flex; align-items: center; justify-content: center; }
.modal[hidden], .qrwrap[hidden], [hidden] { display: none !important; }
.modal-inner { background: #fff; border-radius: 14px; padding: 16px; width: min(900px, 96vw); }
.modal-title { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.modal-title span { color: var(--blue-d); }
#sigCanvas { width: 100%; height: min(360px, 50vh); border: 2px dashed #b9cfe0; border-radius: 10px; background: #fff; display: block; }
.modal-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }

@media (max-width: 1100px) {
  #tab-new { flex-direction: column; }
  .panel { width: 100%; }
  .preview { position: static; max-height: none; width: 100%; }
}

.uploads.three { grid-template-columns: 1fr 1fr 1fr; }
.uploads.three .upl { height: 110px; }
.phone-row { margin-top: 12px; }
.phone-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.big-input { font-size: 18px !important; padding: 10px 12px !important; border: 2px solid var(--blue) !important; border-radius: 8px; font-family: Consolas, monospace; letter-spacing: 1px; }
.trgroup { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 12px; }
.trgroup legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.trgroup .grid { grid-template-columns: 1fr 1fr 1fr; }
.grid label .hint { font-weight: 400; color: #9aa7b3; font-size: 11px; margin-left: 4px; }

/* carrier bar */
/* step-by-step chooser (card type → carrier → business) */
.chooser { width: 100%; flex: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px 18px; }
.chooser h2 { font-size: 16px; margin: 6px 0 12px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; min-height: 22px; }
.crumbs:empty { display: none; }
.crumb { padding: 4px 12px; border-radius: 999px; background: #e8f4fc; color: var(--blue-d); border: 0; font-size: 14px; cursor: pointer; font-weight: 600; }
.crumb.cur { background: var(--blue); color: #fff; }
.crumb-sep { color: var(--muted); }
.crumb-reset { margin-left: auto; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer; color: var(--muted); }
.chooser.compact .cstep { display: none; }
.chooser.compact { padding: 10px 20px; }
.cards { display: flex; gap: 16px; flex-wrap: wrap; }
.card { width: 260px; padding: 22px 18px; border: 2px solid var(--line); border-radius: 14px; background: #fff; cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.card:hover:not(.disabled) { border-color: var(--blue); box-shadow: 0 4px 14px rgba(0,120,200,.15); }
.card.disabled { opacity: .5; cursor: not-allowed; }
.card-icon { font-size: 34px; }
.card-title { font-size: 20px; font-weight: 700; margin-top: 6px; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 4px; }
.carriers { display: flex; flex-wrap: wrap; gap: 10px; }
.carrier { padding: 14px 18px; min-width: 150px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; font-weight: 600; cursor: pointer; color: #333; text-align: left; }
.carrier:hover { border-color: var(--blue); }
.carrier.active { border-color: var(--blue); background: #e8f4fc; color: var(--blue-d); }
.modes { display: flex; flex-wrap: wrap; gap: 10px; }
.mode { flex: none; padding: 12px 18px; border: 2px solid var(--line); border-radius: 12px; background: #fff; font-size: 15px; cursor: pointer; color: #333; font-weight: 600; }
.mode:hover { border-color: var(--blue); }
.mode.form-btn { font-size: 15px; padding: 12px 18px; }
.mode.active { border-color: var(--blue); background: #e8f4fc; color: var(--blue-d); font-weight: 700; }
.mode.form-btn.nolayout { opacity: .55; }
.uploads.four { grid-template-columns: 1fr 1fr 1fr 1fr; }
.uploads.four .upl { height: 100px; }
.uploads.four .upl-icon { font-size: 22px; }
.uploads.four .upl-hint { display: none; }   /* 四格太窄会截断，提示改到下面统一一条 */
.shot-tip { margin: 8px 0 2px; padding: 9px 12px; background: #fff8e1; border: 1px dashed #f0c060; border-radius: 8px; font-size: 13px; color: #7a5600; line-height: 1.6; }
.shot-tip b { color: #c0392b; }
.shot-tip .k { color: #333; font-weight: 600; }
.note.warn { background: #fff7e6; color: #8a5a00; }
.panel h3 { margin: 22px 0 8px; font-size: 15px; }
.quick { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); max-width: 640px; }
.quick-title { font-weight: 600; margin-bottom: 6px; }
.quick textarea { width: 100%; box-sizing: border-box; font-size: 16px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; }
.quick-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.quick-hint { font-size: 12px; color: var(--muted); margin-top: 6px; line-height: 1.6; }

/* ===== 手机卡库存/补货 ===== */
#tab-cardstock.tabpane.active{display:block}
#tab-cnexpress.tabpane.active{display:block}
.ce-pending td{background:#fffaf2}
.ce-status{min-width:200px}
.ce-shipform{display:flex;flex-direction:column;gap:7px;max-width:260px}
.ce-filelbl{font-size:12px;color:#4a5568;display:flex;flex-direction:column;gap:4px;font-weight:600}
.ce-filelbl input[type=file]{font-weight:400;font-size:12px}
.ce-track{padding:7px 9px;border:1px solid #d6dbe4;border-radius:8px;font-size:13px}
.ce-thumb{display:inline-block;margin-top:6px}
.ce-thumb img{width:84px;height:84px;object-fit:cover;border-radius:8px;border:1px solid #e0e4ea}
.ce-cardtype{margin-top:6px;font-weight:700;color:#1565c0;background:#e8f1fd;border-radius:7px;padding:3px 8px;display:inline-block}
.ce-submitter{margin-top:4px;font-weight:600;color:#2e7d32}
.tk-kaika{margin:10px 0;padding-top:10px;border-top:1px dashed #e0e4ea}
.tk-kaika-ta{width:100%;box-sizing:border-box;font-size:13px;line-height:1.7;padding:8px 10px;border:1px solid #d6dbe4;border-radius:8px;resize:vertical;font-family:inherit}
.ce-assignform{display:flex;flex-direction:column;gap:7px;max-width:260px;margin-top:8px}
.ce-ctype,.ce-anote{padding:7px 9px;border:1px solid #d6dbe4;border-radius:8px;font-size:13px}
.ce-assignform+.ce-shipform{margin-top:10px;padding-top:10px;border-top:1px dashed #e0e4ea}
.cs-subnav{display:flex;gap:8px;margin:0 0 14px;flex-wrap:wrap}
.cs-pill{padding:7px 16px;border:1px solid #d7dde6;background:#fff;border-radius:999px;font-size:14px;cursor:pointer;color:#55606e}
.cs-pill.active{background:#2f9ede;border-color:#2f9ede;color:#fff;font-weight:600}
.cs-h3{margin:0 0 12px;font-size:15px}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px 14px;align-items:end}
.cs-grid .csf{display:flex;flex-direction:column;gap:4px;min-width:0}
.cs-grid .csf-wide{grid-column:1/-1}
.cs-grid .csf-btn{display:flex;align-items:flex-end}
.cs-grid .csf-btn .btn{width:100%}
.cs-grid .csf-sub{grid-column:1/-1;font-weight:600;font-size:13px;color:#44556a;margin:8px 0 -2px;padding-top:10px;border-top:1px solid #eef1f5}
.cs-grid label{font-size:12px;color:#6b7686}
.cs-grid input,.cs-grid select{width:100%;padding:8px 10px;border:1px solid #d7dde6;border-radius:8px;font-size:14px;box-sizing:border-box}
/* 输入框 / 下拉框 / 按钮统一 40px 高（Safari 的下拉框默认不吃 padding，会比输入框矮一截）；下拉框去掉系统外观，自画箭头 */
.cs-grid input,.cs-grid select{height:40px;line-height:normal;background-color:#fff;color:inherit}
.cs-grid select{-webkit-appearance:none;appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%236b7686%27 stroke-width=%271.5%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
.cs-grid .csf-btn .btn{height:40px;box-sizing:border-box}
.cs-grid .cs-roomother{margin-top:6px}
.cs-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px}
.cs-filter select{height:36px;padding:0 30px 0 10px;border:1px solid #d7dde6;border-radius:8px;font-size:14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%236b7686%27 stroke-width=%271.5%27/%3E%3C/svg%3E") no-repeat right 12px center;-webkit-appearance:none;appearance:none;min-width:130px}
.cs-filter .cs-fsum{margin-left:auto;font-size:13px;color:#6b7686}
.cs-invqty{width:72px;padding:5px 7px;border:1px solid #cfd6e0;border-radius:6px;font-size:14px;text-align:center}
.cs-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.cs-pending{background:#fff3e0;color:#b26a00}
.cs-confirmed{background:#e3f2fd;color:#1565c0}
.cs-shipped{background:#ede7f6;color:#5e35b1}
.cs-received{background:#e8f5e9;color:#2e7d32}
.cs-cancelled{background:#eceff1;color:#78909c}
.cs-who{font-size:11px;color:#8a94a6;margin-top:3px}
.cs-btns{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
.cs-qty{text-align:center;font-weight:700}
.cs-row-cancel{opacity:.55}

/* 核对信息：所有框同高、同一水平线；标题一行；下拉框和输入框外观一致 */
#infoGrid { gap: 14px 14px; align-items: end; }
#infoGrid label { justify-content: flex-end; gap: 5px; font-size: 12.5px; line-height: 1.3; }
#infoGrid input:not([type=checkbox]):not([type=radio]):not([type=hidden]), #infoGrid select {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 11px; font-size: 14.5px; line-height: 38px;
  border: 1px solid #d5dce6; border-radius: 8px; background-color: #fff; margin: 0; min-width: 0;
}
#infoGrid input[type=date] { -webkit-appearance: none; appearance: none; }
#infoGrid input[type=date]::-webkit-calendar-picker-indicator { margin-left: auto; opacity: .55; cursor: pointer; }
#infoGrid input[type=date]::-webkit-date-and-time-value { text-align: left; }
#infoGrid select {
  -webkit-appearance: none; appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a879a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
#infoGrid input::placeholder { color: #b3bcc8; }
#infoGrid .trgroup .grid, #infoGrid details.mnp .grid { gap: 14px; align-items: end; }
@media (max-width: 560px) { #infoGrid { grid-template-columns: 1fr; } #infoGrid .c2 { grid-column: auto; } }
#infoGrid .consents label { justify-content: flex-start; }
/* 生成：图片 / PDF 两个主按钮一样大 */
#btnExport, #btnPdf { width: 300px; max-width: 100%; justify-content: center; text-align: center; }

/* 签字二维码：复制二维码 / 复制链接 */
.qrbtns { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.qrcopied { display: block; color: #0f7a44; font-size: 12.5px; min-height: 1em; }
.qrtext code { display: block; color: #9aa7b3; word-break: break-all; margin-top: 2px; }
.rectable td.mono { white-space: nowrap; }

/* 手机卡库存记账 / 开通记录手机卡列 */
.cs-qty0{color:#c0392b;font-weight:700}
.cs-neg{color:#c0392b}.cs-pos{color:#1e8449}
.cs-invbtns{white-space:nowrap}
.ac-flat select.ac-sim,.inv-table select.ac-sim{min-width:132px!important;width:132px}
.ac-sim-warn{color:#c0392b;font-size:12px;white-space:nowrap}
.cs-num{text-align:center}
.cs-adjnote{font-size:11px;color:#888;font-weight:400;white-space:nowrap}
#csInvBody input.cs-count{width:84px;height:34px;text-align:center;border:1px solid #c8d3e0;border-radius:8px;background:#fff}
.plan-cands{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:8px 10px;border:1px dashed #e0a800;border-radius:10px;background:#fffbea}
.plan-cands .plan-cand{text-align:left;white-space:normal;height:auto;padding:6px 10px}
.plan-visa{color:#c0392b}