/* ============================================================
   QQX 授权后台 — 与客户端同一套设计语言
   中性灰阶 + 单一强调色 + 细线分隔 + 信息密度优先
   ============================================================ */

:root{
  --c-900:#0e1013;
  --c-850:#121417;
  --c-800:#16181c;
  --c-750:#1a1d21;
  --c-700:#1e2126;
  --c-650:#23262c;
  --c-600:#2a2e35;
  --c-550:#333841;

  --t-100:#e9ebef;
  --t-200:#c4c9d2;
  --t-300:#9aa1ac;
  --t-400:#767d89;
  --t-500:#585e68;

  --accent:#3f7ce0;
  --accent-hi:#5090f0;
  --accent-dim:rgba(63,124,224,.14);

  --ok:#3fa06a;
  --warn:#c9902f;
  --err:#c85a54;

  --r:4px;
  --font:-apple-system,"Segoe UI Variable Text","Segoe UI","Microsoft YaHei UI","Microsoft YaHei",sans-serif;
  --mono:"Cascadia Mono","Consolas",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

/* 弹层打开时锁住背景，避免手机端背景跟着滑、也避免滚动条占位 */
body.modal-open{overflow:hidden}

body{
  background:var(--c-800);
  color:var(--t-200);
  font-family:var(--font);
  font-size:13px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--c-600);border:3px solid transparent;background-clip:padding-box;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:var(--c-550);background-clip:padding-box}

.hidden{display:none !important}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.2px}

/* ==================== 登录 ==================== */

.login-wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.login-box{
  width:100%;
  max-width:340px;
}

.login-brand{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:26px;
}

.mark{
  width:22px;height:22px;
  display:grid;place-items:center;
  background:var(--accent);
  color:#fff;
  font-size:12px;font-weight:700;
  border-radius:3px;
  letter-spacing:-.5px;
  flex:none;
}

.login-brand h1{
  font-size:15px;
  font-weight:600;
  color:var(--t-100);
  letter-spacing:.2px;
}

.login-sub{
  font-size:12px;
  color:var(--t-400);
  margin-top:-18px;
  margin-bottom:22px;
}

.field-label{
  display:block;
  font-size:11.5px;
  color:var(--t-400);
  margin:0 0 6px;
}

.input{
  width:100%;
  height:32px;
  padding:0 10px;
  background:var(--c-900);
  border:1px solid var(--c-600);
  border-radius:var(--r);
  color:var(--t-100);
  font-family:inherit;
  font-size:12.5px;
  outline:none;
  transition:border-color .12s;
}
.input::placeholder{color:var(--t-500)}
.input:focus{border-color:var(--accent)}
.input.mono{font-family:var(--mono)}

.field{margin-bottom:14px}

.login-err{
  min-height:18px;
  font-size:11.5px;
  color:#d97570;
  margin-top:2px;
}

/* ==================== 按钮 ==================== */

.btn{
  height:30px;
  padding:0 14px;
  border-radius:var(--r);
  border:1px solid transparent;
  font-family:inherit;
  font-size:12.5px;
  cursor:pointer;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  transition:background .12s,border-color .12s,color .12s;
}
.btn:disabled{opacity:.45;cursor:default}

.btn-solid{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:500}
.btn-solid:hover:not(:disabled){background:var(--accent-hi);border-color:var(--accent-hi)}

.btn-line{background:var(--c-750);border-color:var(--c-600);color:var(--t-200)}
.btn-line:hover:not(:disabled){background:var(--c-700);border-color:var(--c-550)}

.btn-danger{background:transparent;border-color:rgba(200,90,84,.45);color:#d97570}
.btn-danger:hover:not(:disabled){background:rgba(200,90,84,.12)}

.btn-sm{height:25px;padding:0 10px;font-size:11.5px}
.btn-block{width:100%}

.btn-text{
  border:0;background:transparent;color:var(--t-400);
  font-family:inherit;font-size:11.5px;cursor:pointer;padding:0;
}
.btn-text:hover{color:var(--t-200)}

.i{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ==================== 主框架 ==================== */

.shell{display:flex;min-height:100vh}

.sidebar{
  width:196px;
  flex:none;
  background:var(--c-850);
  border-right:1px solid var(--c-600);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.side-brand{
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 14px;
  border-bottom:1px solid var(--c-600);
}
.side-brand span{font-size:12.5px;font-weight:600;color:var(--t-100);letter-spacing:.2px}

.nav{padding:8px 8px;flex:1;overflow-y:auto}
.nav-item{
  display:flex;
  align-items:center;
  gap:9px;
  height:32px;
  padding:0 10px;
  border-radius:var(--r);
  color:var(--t-300);
  font-size:12.5px;
  cursor:pointer;
  user-select:none;
  transition:background .12s,color .12s;
  border:0;
  background:transparent;
  width:100%;
  text-align:left;
  font-family:inherit;
}
.nav-item:hover{background:var(--c-750);color:var(--t-100)}
.nav-item.active{background:var(--c-700);color:var(--t-100);font-weight:500}
.nav-item .dot{
  margin-left:auto;
  font-size:10.5px;
  font-family:var(--mono);
  color:var(--t-500);
  background:var(--c-700);
  padding:0 5px;
  border-radius:2px;
}
.nav-item.active .dot{background:var(--c-650);color:var(--t-300)}

.side-foot{
  flex:none;
  border-top:1px solid var(--c-600);
  padding:10px 14px;
  font-size:11px;
  color:var(--t-500);
  display:flex;
  flex-direction:column;
  gap:6px;
}
.side-foot b{color:var(--t-300);font-weight:500}
.side-foot .who{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ==================== 内容区 ==================== */

.main{flex:1;min-width:0;display:flex;flex-direction:column}

.topbar{
  height:48px;
  flex:none;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 20px;
  border-bottom:1px solid var(--c-600);
  background:var(--c-850);
  position:sticky;
  top:0;
  z-index:5;
}
.topbar h2{font-size:13.5px;font-weight:600;color:var(--t-100)}
.topbar .spacer{flex:1}
.topbar .hint{font-size:11.5px;color:var(--t-500)}

.page{padding:20px;flex:1;min-width:0}

/* ==================== 统计块 ==================== */

.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(128px,1fr));
  gap:1px;
  background:var(--c-600);
  border:1px solid var(--c-600);
  border-radius:var(--r);
  overflow:hidden;
  margin-bottom:20px;
}

.stat{
  background:var(--c-850);
  padding:12px 14px;
}
.stat-label{
  font-size:11px;
  color:var(--t-500);
  letter-spacing:.3px;
  margin-bottom:4px;
}
.stat-value{
  font-size:21px;
  font-weight:600;
  color:var(--t-100);
  font-family:var(--mono);
  letter-spacing:-.5px;
  line-height:1.2;
}
.stat-value.dim{color:var(--t-300)}
.stat-value.ok{color:#6ec292}
.stat-value.warn{color:#d3a352}
.stat-value.err{color:#d97570}

/* ==================== 面板 ==================== */

.panel{
  border:1px solid var(--c-600);
  border-radius:var(--r);
  background:var(--c-850);
  margin-bottom:16px;
  overflow:hidden;
}

.panel-head{
  height:40px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border-bottom:1px solid var(--c-600);
}
.panel-head h3{
  font-size:12.5px;
  font-weight:600;
  color:var(--t-200);
}
.panel-head .spacer{flex:1}

.panel-body{padding:14px}

/* ==================== 工具栏 ==================== */

.toolbar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  padding:10px 14px;
  border-bottom:1px solid var(--c-600);
  background:var(--c-850);
}
.toolbar .grow{flex:1;min-width:140px}

.search{
  height:28px;
  width:100%;
  padding:0 9px;
  background:var(--c-900);
  border:1px solid var(--c-600);
  border-radius:var(--r);
  color:var(--t-100);
  font-family:inherit;
  font-size:12px;
  outline:none;
}
.search::placeholder{color:var(--t-500)}
.search:focus{border-color:var(--accent)}

.select{
  height:28px;
  padding:0 24px 0 9px;
  background:var(--c-900);
  border:1px solid var(--c-600);
  border-radius:var(--r);
  color:var(--t-100);
  font-family:inherit;
  font-size:12px;
  outline:none;
  cursor:pointer;
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--t-400) 50%),linear-gradient(135deg,var(--t-400) 50%,transparent 50%);
  background-position:calc(100% - 12px) 12px,calc(100% - 8px) 12px;
  background-size:4px 4px,4px 4px;
  background-repeat:no-repeat;
}
.select:focus{border-color:var(--accent)}
.select option{background:var(--c-750);color:var(--t-100)}

/* ==================== 表格 ==================== */

.table-wrap{overflow-x:auto}

table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:12px;
}

thead th{
  text-align:left;
  padding:0 12px;
  height:30px;
  font-size:11px;
  font-weight:500;
  color:var(--t-400);
  background:var(--c-900);
  border-bottom:1px solid var(--c-600);
  white-space:nowrap;
  position:sticky;
  top:0;
  z-index:2;
}
thead th.nosort{cursor:default}

tbody td{
  padding:0 12px;
  height:34px;
  color:var(--t-200);
  border-bottom:1px solid var(--c-750);
  white-space:nowrap;
}
tbody tr:hover td{background:var(--c-750)}
tbody tr:last-child td{border-bottom:0}

td.key{
  font-family:var(--mono);
  font-size:11.5px;
  letter-spacing:.2px;
  color:var(--t-100);
  cursor:pointer;
}
td.key:hover{color:var(--accent-hi)}
td.dim{color:var(--t-400);font-size:11.5px}
td.num{font-family:var(--mono);font-size:11.5px}

td.ops{
  text-align:right;
  white-space:nowrap;
}
td.ops .btn-text{margin-left:10px}

.check{
  width:14px;height:14px;
  accent-color:var(--accent);
  cursor:pointer;
  vertical-align:middle;
}

/* 状态徽记 */
.tag{
  display:inline-block;
  font-size:10.5px;
  line-height:16px;
  padding:0 6px;
  border-radius:2px;
  background:var(--c-700);
  color:var(--t-400);
  letter-spacing:.2px;
}
.tag.unused{background:rgba(63,124,224,.15);color:#7ba7ea}
.tag.active{background:rgba(63,160,106,.16);color:#6ec292}
.tag.expired{background:rgba(201,144,47,.15);color:#d3a352}
.tag.revoked{background:rgba(200,90,84,.15);color:#d97570}

.dev{
  font-family:var(--mono);
  font-size:11px;
  color:var(--t-400);
}

/* 空状态 */
.empty{
  padding:44px 20px;
  text-align:center;
  color:var(--t-500);
  font-size:12.5px;
  line-height:1.7;
}

/* 分页 */
.pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 14px;
  border-top:1px solid var(--c-600);
  background:var(--c-850);
  font-size:11.5px;
  color:var(--t-400);
}
.pager-btns{display:flex;gap:6px;align-items:center}

/* ==================== 弹层 ==================== */

.modal-mask{
  position:fixed;
  inset:0;
  background:rgba(8,9,11,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:50;}

.modal{
  width:100%;
  max-width:420px;
  background:var(--c-850);
  border:1px solid var(--c-600);
  border-radius:6px;
  box-shadow:0 24px 60px -16px rgba(0,0,0,.8);
  overflow:hidden;
}
.modal.wide{max-width:640px}

.modal-head{
  height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 16px;
  border-bottom:1px solid var(--c-600);
}
.modal-head h3{font-size:13px;font-weight:600;color:var(--t-100)}

.modal-body{padding:16px;max-height:min(70vh,520px);overflow-y:auto}
.modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 16px;
  border-top:1px solid var(--c-600);
  background:var(--c-900);
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.form-grid .full{grid-column:1/-1}

/* 结果区（生成后显示卡密清单） */
.gen-result{
  margin-top:14px;
  border-top:1px solid var(--c-650);
  padding-top:12px;
}
.gen-result-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
  font-size:11.5px;
  color:var(--t-400);
}
.gen-list{
  max-height:180px;
  overflow-y:auto;
  background:var(--c-900);
  border:1px solid var(--c-600);
  border-radius:var(--r);
  padding:8px 10px;
  font-family:var(--mono);
  font-size:11.5px;
  line-height:1.75;
  color:var(--t-200);
  user-select:text;
  word-break:break-all;
}

/* ==================== Toast ==================== */

.toasts{
  position:fixed;
  right:20px;
  bottom:20px;
  display:flex;
  flex-direction:column;
  gap:7px;
  z-index:90;
  pointer-events:none;
}
.toast{
  min-width:180px;
  max-width:340px;
  padding:9px 13px;
  border-radius:var(--r);
  background:var(--c-650);
  border:1px solid var(--c-550);
  border-left:2px solid var(--t-500);
  color:var(--t-100);
  font-size:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.55);
  animation:tin .18s ease-out both;
}
.toast.ok{border-left-color:var(--ok)}
.toast.err{border-left-color:var(--err)}
.toast.warn{border-left-color:var(--warn)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ==================== 响应式 ==================== */

/* 窄桌面 / 平板竖屏：侧栏收成图标条 */
@media (max-width: 900px) and (min-width: 641px) {
  .sidebar { width: 56px; }
  .side-brand span,
  .nav-item span.label,
  .side-foot .who span,
  .nav-item .dot { display: none; }
  .nav-item { justify-content: center; padding: 0; }
  .side-foot { padding: 8px; font-size: 10px; }
}

@media (max-width: 900px) {
  .topbar { padding: 0 14px; }
  .page { padding: 14px; }
  .form-grid { grid-template-columns: 1fr; }
}

/* ==================== 手机（真正的底部标签栏） ==================== */

@media (max-width: 640px) {
  /* 侧栏改成底部标签栏 */
  .shell { flex-direction: column-reverse; }

  .sidebar{
    width:100%;
    height:auto;
    flex-direction:row;
    position:fixed;
    bottom:0;left:0;right:0;top:auto;
    border-right:0;
    border-top:1px solid var(--c-600);
    z-index:40;
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .side-brand,.side-foot{display:none}

  .nav{
    display:flex;
    flex-direction:row;
    padding:4px;
    gap:2px;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}

  .nav-item{
    flex:1 0 auto;
    flex-direction:column;
    height:auto;
    padding:7px 8px;
    gap:3px;
    min-width:58px;
    justify-content:center;
    border-radius:6px;
    position:relative;
  }
  .nav-item span.label{display:block;font-size:10.5px}
  .nav-item .dot{
    display:block;
    position:absolute;
    top:2px;right:6px;
    margin:0;
    font-size:9px;
    padding:0 4px;
    line-height:13px;
    min-width:13px;
    text-align:center;
  }

  .main{padding-bottom:66px;padding-top:env(safe-area-inset-top,0);min-height:100vh}

  .topbar{padding:0 12px;gap:8px;height:46px}
  .topbar h2{font-size:13px}
  .topbar .hint{display:none}

  .page{padding:12px}

  /* 统计块两列 */
  .stat-row{grid-template-columns:repeat(2,1fr);gap:1px;margin-bottom:12px}
  .stat{padding:10px 12px}
  .stat-value{font-size:18px}
  .stat-label{font-size:10.5px}

  /* 工具栏换行 */
  .toolbar{padding:9px 12px;gap:6px}
  .toolbar .grow{flex:1 1 100%}
  .search,.select{height:32px;font-size:12.5px}
  .select{flex:1 1 auto}
  .btn-sm{height:30px;padding:0 12px;font-size:12px}

  /* 表格横滑，保证列不被裁 */
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:600px}
  thead th{font-size:10.5px;padding:0 9px}
  tbody td{padding:0 9px;height:38px;font-size:11.5px}
  td.key{font-size:11px}

  /* 弹层底部式 */
  .modal-mask{padding:0;align-items:flex-end}
  .modal,.modal.wide{
    max-width:100%;
    width:100%;
    border-radius:10px 10px 0 0;
    border-bottom:0;
    max-height:92vh;
  }
  .modal-body{max-height:62vh;padding:14px}
  .modal-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))}
  .form-grid{grid-template-columns:1fr}
  .gen-list{max-height:150px}

  .login-wrap{padding:20px;align-items:flex-start;padding-top:12vh}
  .login-box{max-width:100%}

  .pager{flex-wrap:wrap;gap:8px}
  .toasts{right:12px;left:12px;bottom:76px}
  .toast{max-width:100%}
}

@media (max-width:380px){
  .nav-item{min-width:52px;padding:6px 5px}
  .nav-item span.label{font-size:10px}
  .stat-value{font-size:16px}
  .btn-sm{padding:0 9px;font-size:11.5px}
}