换成 ，所有行内操作（改密码/续费/删除）会全部失效。
所以这里保留 table/tr/td，只用 display 重排 —— JS 一行都不用改。
表头隐藏后，靠 td 上的 data-l 属性在每格上方显示字段名。
========================================================================== */
table.lcards{display:block;width:100%;min-width:0;overflow:visible;
border-collapse:separate;border-spacing:0}
table.lcards thead{display:none}
table.lcards tbody{
display:grid;gap:12px;min-width:0;
grid-template-columns:repeat(auto-fill,minmax(min(430px,100%),1fr));
}
table.lcards tbody tr{
display:flex;flex-wrap:wrap;align-items:flex-start;gap:9px 10px;
padding:12px 13px 11px;
background:var(--grpBg,#180c14);
border:1px solid var(--grpLine,#36203a);
border-radius:12px;
}
table.lcards tbody tr:hover{background:var(--btnHover,#3a2434)}
/* 已过期的号：边框染红，扫一眼就知道哪些要催续费 */
table.lcards tbody tr.is-over{border-color:#8a2a44}
table.lcards tbody tr.is-agent{box-shadow:inset 3px 0 0 var(--accent2,#ff87b0)}
/* td → 卡片里的「字段块」 */
table.lcards tbody td{
display:block;flex:1 1 190px;min-width:0;
padding:0;border-bottom:0;font-size:12px;vertical-align:top;
background:transparent !important;
}
/* 字段名：thead 隐藏了，用它告诉用户这格是什么 */
table.lcards tbody td[data-l]::before{
content:attr(data-l);display:block;
font-size:10px;font-weight:400;letter-spacing:.5px;
color:var(--muted,#8c7c88);margin:0 0 3px;
}
/* 名字和操作区不需要再重复一次字段名 */
table.lcards tbody td.nn-cell::before,
table.lcards tbody td.nn::before,
table.lcards tbody td.ops::before,
table.lcards tbody td.op::before{display:none}
/* 卡片头：名字 + 账号，独占一行。
★ 代卖表的名字格用的是 .nn，主播表用 .nn-cell —— 两个都要匹配，
漏了 .nn 的话代卖昵称会跟「状态」「卡余额」挤在同一行。 */
table.lcards tbody td.nn-cell,
table.lcards tbody td.nn{
order:0;flex:1 1 calc(100% - 76px);
padding-bottom:9px;margin-bottom:1px;
border-bottom:1px dashed var(--grpLine,#36203a);
}
/* ID：以前排在卡片最底部，被挤成一个只有 31px 宽的孤零零窄格，
还紧贴操作区上方那条虚线分隔线 —— 看着就像线把「ID」和号码压住了。
现在挪到卡片头、跟昵称同一行靠右显示成「ID 5」。
昵称右半边本来就是空的，让出这点宽度不影响排版。 */
table.lcards tbody td[data-l="ID"]{
order:1;flex:0 0 auto;opacity:.8;
padding-bottom:9px;border-bottom:1px dashed var(--grpLine,#36203a);
}
table.lcards tbody td[data-l="ID"]::before{display:inline;margin:0 4px 0 0}
table.lcards tbody td.nn-cell .nn{font-size:15px}
table.lcards tbody td.nn-cell .uu{margin-top:2px}
/* 卡片底：操作按钮独占一行，成组排列 */
table.lcards tbody td.ops,
table.lcards tbody td.op{
order:99;flex:0 0 100%;white-space:normal;
/* 旧表格规则 .card.wide .tbl .ops{max-width:150px} 特异性比这里高，
不显式解除的话操作列永远只有 150px，按钮被迫堆成竖条。 */
max-width:none;
position:static !important;box-shadow:none !important;
padding-top:10px;margin-top:1px;
border-top:1px dashed var(--grpLine,#36203a);
display:flex;flex-wrap:wrap;gap:6px;
}
table.lcards tbody td.ops .chip,
table.lcards tbody td.op .chip{margin:0}
/* 全局 button{width:100%} 会把卡片里每个按钮撑满整行，
于是「改房间名 / 改标识 / 改密码 / 删除」被压成一列竖条（实测高 181px）。
卡片里按钮是并排的 chip，宽度应随文字走。 */
table.lcards tbody .chip{width:auto;flex:0 0 auto;white-space:nowrap}
table.lcards tbody .exp-btns .chip{width:auto;flex:0 0 auto}
table.lcards tbody .exp-btns{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
/* ── 操作按钮按用途分开，避免一串同色按钮看错按错 ──
① 进画面的（代管设置 / 快捷改名 / 接口）：主色描边，最常用，放最前
② 改资料的（改房间名 / 改标识 / 改密码）：保持默认弱化样式
③ 删除：推到最右单独隔开并染红，手滑点到的代价最大 */
table.lcards tbody td.ops a.chip{
font-weight:600;
border-color:var(--accent2,#ff87b0);color:var(--accent2,#ff87b0);
background:transparent}
table.lcards tbody td.ops a.chip:hover{
background:var(--accent2,#ff87b0);color:#fff}
table.lcards tbody td.ops .chip.del{
margin-left:auto;
background:#2a1018;border-color:#8a1028;color:#ff9ab0;font-weight:600}
table.lcards tbody td.ops .chip.del:hover{background:#8a1028;color:#fff}
/* 窄屏按钮会换行，「推到最右」会让它孤零零吊在一行右侧，改回顺排 */
@media(max-width:520px){
table.lcards tbody td.ops .chip.del{margin-left:0}
}
/* 字段顺序：把常用的往前排，不常用的沉到底部 */
table.lcards tbody td[data-l="状态"] {order:2;flex:0 1 auto}
table.lcards tbody td[data-l="有效期"] {order:3;flex:2 1 250px}
table.lcards tbody td[data-l="卡余额"] {order:3;flex:2 1 220px}
table.lcards tbody td[data-l="展示链接"] {order:4}
table.lcards tbody td[data-l="欠款"] {order:4}
table.lcards tbody td[data-l="账上余额"] {order:5}
table.lcards tbody td[data-l="归属"] {order:5}
table.lcards tbody td[data-l="开号 / 有效"]{order:6}
table.lcards tbody td[data-l="取回密码"] {order:6}
table.lcards tbody td[data-l="动态"] {order:7}
table.lcards tbody td[data-l="存图/GIF"] {order:8}
table.lcards tbody td[data-l="存方案"] {order:9}
table.lcards tbody td[data-l="口令"] {order:10}
table.lcards tbody td[data-l="账号"] {order:11}
table.lcards tbody td[data-l="备注"] {order:12}
/* ID 的规则已移到上面「卡片头」处（跟昵称同行），这里不再重复定义，
否则后面这条会把 order 覆盖回卡片最底部。 */
/* 链接和按钮在窄卡片里要能折行，不然会顶破卡片 */
table.lcards tbody td[data-l="展示链接"] .link{
display:inline-block;max-width:100%;overflow-wrap:anywhere;
}
table.lcards tbody input.agnote{max-width:100%}
/* 空态：没有数据时那一格要占满整行，不要变成一个空卡片 */
table.lcards tbody tr:not([data-id]){
display:block;grid-column:1/-1;
background:transparent;border:0;padding:0;
}
table.lcards tbody tr:not([data-id]):hover{background:transparent}
/* 卡片化后不再需要「可左右滑动」提示 */
table.lcards + .scroll-hint,.scroll-hint:has(+ .table-scroll .lcards){display:none}
.table-scroll:has(> .lcards){overflow:visible}
/* 手机：卡片内字段改成单列，避免两个字段挤在一行看不清 */
@media(max-width:520px){
table.lcards tbody td,
table.lcards tbody td[data-l="有效期"],
table.lcards tbody td[data-l="卡余额"]{flex:1 1 100%}
}
/* 时效卡表：td 里是 width:100% 的输入框，表格的自动布局会被输入框的
默认最小宽度撑开（实测 1136 的卡片里表宽到 1474，右侧「删除」被挤出屏幕）。
改成固定布局后列宽听表头的，输入框跟着收，页面不再横向溢出。 */
#pl_tbl{table-layout:fixed}
#pl_tbl input[type="text"],#pl_tbl input[type="number"]{
min-width:0;max-width:100%;box-sizing:border-box}
/* 注意：不要给 #pl_tbl td 加 overflow:hidden —— 操作列一窄，
「保存 / 删除」会被裁掉一半，按钮看着像缺了一块。 */
#pl_tbl input[type="text"],#pl_tbl input[type="number"]{
min-width:0;max-width:100%;box-sizing:border-box}
/* 注意：不要给 #pl_tbl td 加 overflow:hidden —— 操作列一窄，
「保存 / 删除」会被裁掉一半，按钮看着像缺了一块。 */