/* ===== assets/style.css ===== */
:root{ --bg:#f6f7fb; --card:#fff; --txt:#111; --muted:#666; --line:#e5e7eb; }
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--txt); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; }
a{ color:#0d63ff; text-decoration:none; }
a:hover{ text-decoration:underline; }
.topbar{ position:sticky; top:0; background:var(--card); border-bottom:1px solid var(--line); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; }
.topbar .brand{ font-weight:700; }
.container{ max-width:1200px; margin:20px auto; padding:0 16px; }

.filters{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.filters input, .filters select{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.filters button{ padding:8px 12px; border:1px solid var(--line); border-radius:8px; background:#111; color:#fff; }
.filters .muted{ color:var(--muted); }

.meta{ display:flex; gap:16px; margin:6px 0 12px; color:var(--muted); }

.tablewrap{ overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:12px; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px 12px; border-bottom:1px solid var(--line); font-size:13px; text-align:left; vertical-align:top; }
th{ background:#fafafa; }
.mono{ font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; font-size:12px; }

.pagination{ display:flex; gap:8px; margin:16px 0; }
.pagination a{ padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); }

/* Login */
body.login{ display:grid; place-items:center; height:100vh; }
.card{ width:min(420px,92vw); background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px; }
.card h1{ margin:0 0 12px; }
.card .alert{ background:#fff3cd; color:#664d03; border:1px solid #ffecb5; padding:8px 10px; border-radius:8px; margin-bottom:10px; }
.card label{ display:block; font-size:12px; color:var(--muted); margin:12px 0 4px; }
.card input{ width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:8px; }
.card button{ margin-top:12px; width:100%; padding:10px 12px; border:0; border-radius:10px; background:#111; color:#fff; font-weight:600; }
.card .muted{ font-size:12px; color:var(--muted); margin-top:10px; display:block; }