/* [T13] CTA dashboard —— 移动优先响应式。窄屏表格自动转卡片。 */
:root{
  --bg:#0f1216; --panel:#171c23; --line:#2a323d; --fg:#e6e9ee; --mut:#95a0ae;
  --acc:#4f9dff; --warn:#ffcc66; --err:#ff6b6b;
}
@media (prefers-color-scheme: light){
  :root{ --bg:#f5f6f8; --panel:#fff; --line:#e2e6ea; --fg:#1a1f26; --mut:#66707c; }
}
*{ box-sizing:border-box; }
body{ margin:0; font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--fg); }
a{ color:var(--acc); text-decoration:none; }

.topbar{ display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:var(--panel); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10; padding-top:max(12px,env(safe-area-inset-top)); }
.brand{ font-weight:700; color:var(--fg); letter-spacing:.3px; }
.logout{ display:flex; align-items:center; gap:10px; margin:0; }
.logout .who{ color:var(--mut); font-size:13px; }
.logout button{ background:transparent; color:var(--mut); border:1px solid var(--line);
  border-radius:8px; padding:5px 10px; font-size:13px; }

.wrap{ max-width:1100px; margin:0 auto; padding:16px; }
.page-h{ font-size:19px; margin:6px 0 14px; }
.flash{ background:var(--panel); border:1px solid var(--warn); color:var(--warn);
  padding:10px 12px; border-radius:10px; margin-bottom:14px; }

/* 首页卡片 */
.cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; }
.card{ display:block; background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:16px; color:var(--fg); transition:border-color .15s; }
.card:active,.card:hover{ border-color:var(--acc); }
.card-title{ font-weight:600; font-size:16px; margin-bottom:8px; }
.card-meta{ display:flex; flex-wrap:wrap; gap:10px; color:var(--mut); font-size:13px; }
.empty{ color:var(--mut); }

/* 登录 */
.login-card{ max-width:360px; margin:8vh auto 0; background:var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:24px; }
.login-card h1{ font-size:20px; margin:0 0 18px; text-align:center; }
.login-card label{ display:block; font-size:13px; color:var(--mut); margin-bottom:12px; }
.login-card input{ width:100%; margin-top:6px; padding:11px 12px; font-size:16px;
  background:var(--bg); color:var(--fg); border:1px solid var(--line); border-radius:10px; }
.login-card button{ width:100%; margin-top:6px; padding:12px; font-size:16px; font-weight:600;
  background:var(--acc); color:#fff; border:0; border-radius:10px; }
.err{ background:rgba(255,107,107,.12); color:var(--err); border:1px solid var(--err);
  padding:9px 11px; border-radius:10px; margin-bottom:14px; font-size:14px; text-align:center; }

/* 模块页 */
.mod-head{ display:flex; align-items:baseline; gap:12px; }
.back{ font-size:14px; }
.mod-meta{ display:flex; flex-wrap:wrap; gap:12px; color:var(--mut); font-size:13px; margin-bottom:10px; }
.mod-meta .warn{ color:var(--warn); }
.note{ background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; color:var(--mut); font-size:13px; margin-bottom:14px; }

/* 表格(宽屏)*/
.table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:12px; }
table.grid{ width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
table.grid th,table.grid td{ padding:5px 8px; border-bottom:1px solid var(--line); text-align:left; }
table.grid th{ background:var(--panel); position:sticky; top:0; color:var(--mut); font-weight:600; }
table.grid tbody tr:active{ background:rgba(79,157,255,.06); }
/* 长列折叠:截断 + 省略号,悬停(title)看全,尽量让所有列一屏排下 */
table.grid td.cell-wide{ max-width:104px; overflow:hidden; text-overflow:ellipsis; }

/* 窄屏:每行转卡片,td 前置 label */
@media (max-width:640px){
  .table-scroll{ border:0; overflow:visible; }
  table.grid{ white-space:normal; font-size:14px; }
  table.grid thead{ display:none; }
  table.grid tr{ display:block; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; margin-bottom:10px; padding:6px 12px; }
  table.grid td{ display:flex; justify-content:space-between; gap:16px; border:0;
    border-bottom:1px solid var(--line); padding:7px 0; }
  table.grid tr td:last-child{ border-bottom:0; }
  table.grid td::before{ content:attr(data-label); color:var(--mut); font-size:12px; flex:0 0 auto; }
  table.grid td{ text-align:right; }
  table.grid td.cell-wide{ max-width:none; overflow:visible; text-overflow:clip; white-space:normal; }
}