:root{
  --bg:#1f1f1f;
  --text:#fff;
  --primary:#0f6efd;
  --muted:#9aa0a6;
  --border:rgba(255,255,255,.06);
  --card:#131313;
  --container:1100px;
  --cell-w:118px;
  --cell-h:172px;
  --gap:8px;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text)}
.container{max-width:var(--container);margin:0 auto;padding:0 20px}

/* ---------- 页头 / 页脚 ---------- */
.site-header{background:var(--card);border-bottom:1px solid var(--border)}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.logo{font-weight:700;color:var(--primary);text-decoration:none;font-size:1.1rem}

.site-footer{padding:18px 0;color:var(--muted);text-align:center}

/* ---------- 首页：可拖拽卡片入口 ---------- */
.intro{color:var(--muted);text-align:center;margin:32px 0 8px}
.draggable-widget{position:absolute;width:180px;min-height:88px;background:var(--card);color:var(--text);border-radius:20px;box-shadow:0 18px 32px rgba(15,23,42,.18);display:flex;align-items:center;justify-content:center;cursor:grab;user-select:none;touch-action:none;z-index:10;text-decoration:none;font-weight:700;padding:20px 16px;text-align:center;line-height:1.2;transition:transform .2s ease,box-shadow .2s ease}
.draggable-widget:hover{transform:translateY(-2px)}
.draggable-widget.dragging{cursor:grabbing;transform:none;box-shadow:0 24px 38px rgba(15,23,42,.24)}
@media (max-width:640px){
  .draggable-widget{position:relative;top:auto;left:auto;transform:none;margin:16px auto 0;width:min(90%,240px);touch-action:auto}
}

/* ---------- 子页面共用样式 ---------- */
.table-wrap{padding:28px 20px}
.panel{background:var(--card);border-radius:10px;box-shadow:0 8px 30px rgba(15,23,42,.18);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:18px 20px;border-bottom:1px solid var(--border)}
.panel-head h1{margin:0;font-size:1.1rem}
.panel-head p{margin:4px 0 0}
.panel-tools{display:flex;gap:10px;align-items:center}
.panel-tools input{padding:8px 10px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--text)}
.panel-tools input:focus{outline:2px solid rgba(15,110,253,.4);border-color:transparent}
.action-btn{background:transparent;border:1px solid var(--border);padding:6px 10px;border-radius:6px;color:var(--primary);text-decoration:none;font-size:.9rem;cursor:pointer}
.action-btn:hover{border-color:var(--primary)}
.action-btn:disabled{opacity:.4;cursor:default}
.table-container{padding:16px}
.data-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--cell-w),var(--cell-w)));grid-auto-rows:var(--cell-h);gap:var(--gap);justify-content:start}
.cell{width:var(--cell-w);height:var(--cell-h);border-radius:6px;overflow:hidden;position:relative;border:1px solid var(--border);background:var(--bg)}
.cell-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:2}
.cell-img.zoomable{cursor:zoom-in}
.zoom-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;cursor:zoom-out}
.zoom-overlay img{position:fixed;object-fit:cover;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.6);will-change:left,top,width,height}
.zoom-lock{overflow:hidden}
.cell-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text);font-weight:700;font-size:.95rem;text-shadow:0 2px 6px rgba(0,0,0,.12);pointer-events:none;z-index:1}
.empty{grid-column:1/-1;padding:48px 0;text-align:center;color:var(--muted)}
.paging{display:flex;gap:12px;align-items:center}

/* ---------- 移动端：四列显示 ---------- */
@media (max-width:640px){
  .data-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:auto;gap:var(--gap)}
  .cell{width:100%;height:auto;aspect-ratio:59/86}
}
.small{font-size:.9rem;color:var(--muted)}