:root { --fg:#111; --bg:#fff; --muted:#666; --ok:#eaffea; --okb:#a7e8a7; --err:#fff1f1; --errb:#f5a3a3; --line:#eee; }
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg)}
.container{max-width:900px;margin:24px auto;padding:0 16px}
h1.title{font-size:28px;margin:6px 0 12px}
.small{color:var(--muted);font-size:12px}
.card{padding:18px;border:1px solid var(--line);border-radius:10px;margin:16px 0}
.center{text-align:center}
.msg{padding:10px 12px;border-radius:6px;margin:10px 0;border:1px solid}
.msg.ok{background:var(--ok);border-color:var(--okb)}
.msg.err{background:var(--err);border-color:var(--errb)}
input[type=text]{padding:8px;min-width:260px}
button,.btn{display:inline-block;padding:8px 14px;border-radius:8px;border:1px solid var(--line);cursor:pointer;text-decoration:none}
.btn:hover{filter:brightness(0.98)}
.btn.danger{border-color:#f0b3b3;background:#ffecec}
.table{width:100%;border-collapse:collapse;margin-top:14px}
.table th,.table td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.table .actions{white-space:nowrap}
.inline{display:inline-block;margin-right:8px}
.footer{border-top:1px solid var(--line);padding:16px 0;margin-top:24px}
.tabs{display:flex;gap:8px;margin-bottom:12px}
.tab{padding:8px 12px;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit}
.tab.active{background:#f7f7f7}
.badge{padding:2px 8px;border-radius:999px;font-size:12px;border:1px solid}
.badge.ok{background:var(--ok);border-color:var(--okb)}
.badge.err{background:var(--err);border-color:var(--errb)}
.pager{display:flex;gap:8px;align-items:center;margin-top:12px}