:root{
  --bg:#f3f3f3; --card:#fff; --text:#111; --muted:#666; --line:#ddd;
  --btn:#111; --btnText:#fff; --ghost:#e9e9e9;
}
body.dark{
  --bg:#0e0e0e; --card:#1a1a1a; --text:#eee; --muted:#aaa; --line:#333;
  --btn:#2b2b2b; --btnText:#fff; --ghost:#222;
}
body{ margin:0; font-family:system-ui,sans-serif; background:var(--bg); color:var(--text); }
a{ color:inherit; }

.container{ max-width:1100px; margin:18px auto; padding:0 12px; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.topbar .left{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
h1{ font-size:20px; margin:0; }

.panel{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:14px;
}
.panel-top{ display:flex; justify-content:space-between; align-items:center; }

input, select, button, textarea{
  width:100%; box-sizing:border-box;
  padding:10px; margin-top:6px;
  border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--text);
}
textarea{ min-height:80px; }

button{ background:var(--btn); color:var(--btnText); cursor:pointer; border:none; margin-top:10px; }
button:hover{ opacity:.9; }
button.ghost{
  width:auto; padding:8px 10px; margin-top:0;
  background:var(--ghost); color:var(--text); border:1px solid var(--line);
}

.grid{ display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
@media (max-width:780px){ .grid{ grid-template-columns:1fr; } }

.table{ width:100%; border-collapse:collapse; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--card);
}
.table th, .table td{ padding:10px; border-bottom:1px solid var(--line); text-align:left; }
.table th{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.table tr:last-child td{ border-bottom:none; }

.badge{ padding:4px 8px; border-radius:999px; border:1px solid var(--line); display:inline-block; font-size:12px; text-decoration:none; }
.actions{ display:flex; gap:8px; flex-wrap:wrap; }
.actions a, .actions button{ width:auto; margin:0; padding:8px 10px; border-radius:10px; }
.actions a{ text-decoration:none; background:var(--ghost); border:1px solid var(--line); }
.muted{ color:var(--muted); }
.error{ color:#d33; }