/* ============================================================
   CHOVY 面板样式
   桌面端完整表格；手机端横向滚动 + 固定列宽（不换行错位）
   ============================================================ */
:root{
  --bg:#0d1117; --panel:#161b22; --line:#30363d;
  --text:#e6edf3; --muted:#8b949e; --subtle:#6e7681;
  --accent:#58a6ff; --ok:#3fb950; --warn:#d29922; --bad:#f85149;
  --radius:10px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:100%}
html,body{width:100%}
body{
  background:var(--bg); color:var(--text);
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",
       "PingFang SC",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:var(--accent);text-decoration:none}
a:active{opacity:.7}

/* ---------------- 顶栏 ---------------- */
.top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;background:var(--panel);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:20;
}
.top h1{font-size:15px;font-weight:600;white-space:nowrap}
.top .who{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px;
  flex-wrap:wrap;min-width:0}
.top .sp{flex:1;min-width:8px}

/* ---------------- 布局 ---------------- */
.wrap{max-width:1440px;margin:0 auto;padding:14px}
.card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;margin-bottom:14px;
}
.card h2{font-size:14px;font-weight:600;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* ---------------- 统计 ---------------- */
.stat{
  display:grid;gap:10px;margin-bottom:14px;
  grid-template-columns:repeat(auto-fit,minmax(104px,1fr));
}
.stat>div{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius);padding:12px;
}
.stat .n{font-size:20px;font-weight:700;line-height:1.2}
.stat .l{color:var(--muted);font-size:11px;margin-top:2px}

/* ---------------- 表单 ---------------- */
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
input,select,button,textarea{
  font:inherit;border-radius:8px;border:1px solid var(--line);
  background:#0d1117;color:var(--text);outline:none;
  font-size:16px;   /* iOS 小于 16px 会放大页面 */
}
input,select{padding:9px 11px;min-height:40px}
textarea{padding:10px;line-height:1.5;
  font-family:ui-monospace,Consolas,monospace;font-size:13px}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
button{
  padding:9px 14px;min-height:40px;background:#21262d;
  cursor:pointer;transition:background .15s,transform .05s;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;
}
button:hover{background:#30363d}
button:active{transform:scale(.97)}
button.pri{background:#238636;border-color:#2ea043}
button.pri:hover{background:#2ea043}
button.ok-btn{background:#1f6f3f;border-color:#2ea043}
button.ok-btn:hover{background:#2ea043}
button.danger{background:#8b2c2c;border-color:#b03030}
button.danger:hover{background:#b03030}
input[type=checkbox]{width:18px;height:18px;min-height:18px;
  accent-color:var(--accent);cursor:pointer;padding:0;vertical-align:middle}
.btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:9px 12px;min-height:40px;border-radius:8px;
  border:1px solid var(--line);background:#21262d;
  color:var(--text);font-size:14px;cursor:pointer;text-decoration:none;
  white-space:nowrap;
}

/* 表单字段宽度（避免 flex 乱伸） */
.f-user{flex:0 1 140px;min-width:110px}
.f-pw{flex:0 1 150px;min-width:110px}
.f-tier{flex:1 1 200px;min-width:170px}
.f-num{flex:0 0 88px;width:88px}
.f-note{flex:1 1 140px;min-width:100px}
.f-search{flex:2 1 160px;min-width:140px}
.f-sel{flex:0 1 130px;min-width:110px}

/* ---------------- 表格 ---------------- */
.tablewrap{
  width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  border-radius:8px;
}
table{
  width:100%;border-collapse:collapse;font-size:13px;
  table-layout:fixed;      /* ★ 关键：固定列宽，内容不再撑破布局 */
}
th,td{
  text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);
  vertical-align:middle;
  overflow:hidden;         /* ★ 配合固定布局，超出部分截断 */
  text-overflow:ellipsis;
}
th{color:var(--muted);font-weight:500;font-size:11px;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tr:hover td{background:#1c2128}
tr:hover th{background:#1c2128}

/* ---- 列宽定义（两个表格共用）---- */
.c-chk{width:38px}
.c-key{width:250px}
.c-tier{width:76px}
.c-state{width:86px}
.c-exp{width:150px}
.c-agent{width:110px}
.c-acc{width:190px}
.c-pw{width:120px}
.c-credit{width:76px}
.c-cards{width:64px}
.c-time{width:142px}
.c-ip{width:126px}
.c-act{width:196px}
.agentlist .c-act{width:238px}

/* 卡号单元格：文本 + 复制按钮
   ★ td 保持 table-cell（不用 flex），否则会破坏 table-layout:fixed 列宽
     内部用 .keycell 这个 flex 容器排版 */
.cardlist td.cardkey{
  padding-right:8px;
}
.cardlist .keycell{
  display:flex;align-items:center;gap:6px;
  min-width:0;width:100%;
}
.cardlist .keytext{
  flex:1 1 auto;min-width:0;
  font-family:ui-monospace,Consolas,monospace;
  font-size:12.5px;letter-spacing:.01em;user-select:all;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cardlist .mini{
  flex:0 0 auto;padding:3px 8px;min-height:24px;font-size:11px;
  background:#21262d;border:1px solid var(--line);
  border-radius:6px;color:var(--muted);cursor:pointer;
  white-space:nowrap;line-height:1;
}
.cardlist .mini:hover{background:#30363d;color:var(--text)}

/* 代理账号单元格：长名字省略，不撑破 */
.agentlist td.acc-cell{overflow:visible}
.acc-name{
  font-weight:600;font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.acc-note{
  font-size:11px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.acc-sub{
  display:flex;align-items:center;gap:6px;
  font-size:11px;min-width:0;margin-top:2px;
}
.acc-sub a:first-child{
  flex:1 1 auto;min-width:0;
  font-family:ui-monospace,Consolas,monospace;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.acc-copy{flex:0 0 auto;font-size:11px;color:var(--muted)}
.acc-copy:hover{color:var(--accent)}

/* 操作列：横排不换行 */
.actions{
  white-space:nowrap;
  overflow:hidden;
}
.actions form{display:inline-block;margin:0 4px 0 0;vertical-align:middle}
.actions button{padding:6px 11px;min-height:32px;font-size:12px}
.actions a.btn-sm{
  display:inline-flex;align-items:center;
  padding:6px 11px;min-height:32px;font-size:12px;
  border:1px solid var(--line);border-radius:6px;
  background:#21262d;color:var(--text);margin-right:4px;
  vertical-align:middle;white-space:nowrap;
}
.in-delta{width:64px!important;min-height:32px;padding:5px 7px;font-size:12px}

/* ---------------- 标签 ---------------- */
.tag{display:inline-block;padding:2px 8px;border-radius:10px;
  font-size:11px;font-weight:600;white-space:nowrap}
.t-unused{background:#21262d;color:var(--muted)}
.t-active{background:#12331d;color:var(--ok)}
.t-paused{background:#3a2d0e;color:var(--warn)}
.t-expired{background:#2d1214;color:var(--bad)}
.t-banned{background:#2d1214;color:var(--bad)}
.tier{display:inline-block;padding:2px 8px;border-radius:4px;
  font-size:11px;font-weight:600;white-space:nowrap}
.pw{display:inline-block;min-width:56px;word-break:break-all}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:12px}
.small{font-size:12px}
.muted{color:var(--muted)}
.k{color:var(--muted);font-size:12px;line-height:1.7}

/* ---------------- 登录页 ---------------- */
.login{max-width:380px;margin:8vh auto;width:92%}
.login h2{font-size:17px;margin-bottom:6px}
.login input{width:100%;margin-bottom:10px}
.login button{width:100%;margin-top:6px}

/* ---------------- 提示 ---------------- */
.err{color:var(--bad);font-size:13px;margin-bottom:10px;
  padding:10px;background:#2d1214;border-radius:8px;line-height:1.5}
.ok{color:var(--ok)}
pre,textarea.out{background:#0d1117;border:1px solid var(--line);
  border-radius:8px;padding:10px;overflow:auto;
  font-size:12px;max-height:340px;width:100%}

/* ---------------- 折叠标题 ---------------- */
.foldhead{
  cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:8px;padding:2px 0;
}
.foldhead:hover{color:var(--accent)}
.foldarrow{
  display:inline-block;width:14px;
  transition:transform .18s ease;
  color:var(--muted);font-size:12px;
}
.foldhead.open .foldarrow{transform:rotate(90deg)}

/* ---------------- 详情页 ---------------- */
.keyhead{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.keyhead .keytext{
  font-family:ui-monospace,Consolas,monospace;
  font-size:15px;font-weight:600;word-break:break-all;
  user-select:all;flex:1;min-width:0;
}
.keyhead button{flex:0 0 auto;padding:6px 14px;min-height:32px;font-size:13px}

.kvtable th{
  width:110px;text-align:left;color:var(--muted);font-weight:500;
  padding:8px 10px;white-space:nowrap;background:transparent;
}
.kvtable td{padding:8px 10px}
.kvtable table{table-layout:auto}   /* 详情页不限宽，按内容排 */

/* ============================================================
   手机端：保持横向表格，靠固定列宽 + 横向滚动
   ============================================================ */
@media (max-width: 860px){
  .wrap{padding:10px}
  .card{padding:13px}
  .top{padding:10px 12px;gap:8px}
  .top h1{font-size:13px}
  .top .btn{padding:6px 10px;min-height:32px;font-size:12px}
  .top .who{font-size:11px}

  /* 表格：给最小宽度，靠横向滑动查看 */
  .tablewrap table{min-width:660px}
  .tablewrap.agentlist table{min-width:880px}
  th,td{padding:8px 8px;font-size:12px}
  th{font-size:10px}

  /* 列宽在手机上略收窄 */
  .c-key{width:228px}
  .c-exp{width:138px}
  .c-act{width:182px}
  .agentlist .c-act{width:216px}
  .c-time{width:130px}
  .c-ip{width:116px}
  .c-acc{width:176px}
  .c-pw{width:106px}

  .cardlist .keytext{font-size:12px}
  .cardlist .mini{padding:3px 7px;min-height:22px;font-size:10px}
  .actions button,.actions a.btn-sm{padding:5px 9px;min-height:28px;font-size:11px}
  .in-delta{width:56px!important;min-height:28px}

  /* 表单：宽度自适应，不强制竖排占满 */
  .row{gap:7px}
  .f-user,.f-pw{flex:1 1 46%}
  .f-tier{flex:1 1 100%}
  .f-search{flex:1 1 100%}
  .f-sel{flex:1 1 44%}
  .f-note{flex:1 1 100%}
  .row>button{flex:0 1 auto}

  /* 统计 3 列 */
  .stat{grid-template-columns:repeat(3,1fr);gap:8px}
  .stat>div{padding:9px}
  .stat .n{font-size:17px}
  .stat .l{font-size:10px}

  /* 详情页 */
  .keyhead .keytext{font-size:13px}
  .kvtable th{width:88px;font-size:12px;padding:7px 8px}
  .kvtable td{font-size:13px;padding:7px 8px}
}

/* 超小屏 */
@media (max-width: 400px){
  .stat{grid-template-columns:repeat(2,1fr)}
  .login{margin:4vh auto}
  .wrap{padding:8px}
  .card{padding:11px}
}

/* 横屏矮屏 */
@media (max-height: 500px){
  .login{margin:20px auto}
}

/* 打印 */
@media print{
  .top,button,.btn{display:none}
  body{background:#fff;color:#000}
  .card{border:1px solid #ccc}
}