:root { --accent:#2b6cb0; --danger:#b00; --bg:#f7f7f8; --line:#ddd; }
* { box-sizing: border-box; }
body { margin:0; font-family: system-ui, sans-serif; color:#222; background:var(--bg); }

.topbar { display:flex; align-items:center; gap:12px; background:#fff; border-bottom:1px solid var(--line);
  padding:10px 16px; position:sticky; top:0; z-index:20; }
.burger { font-size:22px; line-height:1; background:none; border:none; cursor:pointer; padding:4px 8px; }
.brand { font-weight:600; }

.overlay { position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none;
  transition:opacity .2s; z-index:25; }
.overlay.show { opacity:1; pointer-events:auto; }

.drawer { position:fixed; top:0; left:0; height:100%; width:250px; background:#fff; border-right:1px solid var(--line);
  transform:translateX(-100%); transition:transform .22s ease; z-index:30; display:flex; flex-direction:column; }
.drawer.open { transform:translateX(0); }
.drawer-head { font-weight:600; padding:16px; border-bottom:1px solid var(--line); }
.drawer ul { list-style:none; margin:0; padding:8px 0; flex:1; }
.drawer li a { display:block; padding:12px 16px; text-decoration:none; color:#222; }
.drawer li a:hover { background:var(--bg); }
.drawer-user { padding:12px 16px; border-top:1px solid var(--line); color:#666; font-size:13px; }

.content { max-width:900px; margin:0 auto; padding:24px 16px; }
h1 { margin-top:0; }

.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }

.btn { background:#fff; border:1px solid var(--line); border-radius:6px; padding:7px 12px; cursor:pointer; font-size:14px; }
.btn:hover { background:#f0f0f0; }
.btn.primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn.primary:hover { filter:brightness(1.05); }
.btn.danger { color:var(--danger); border-color:#e7b3b3; }
.inline { display:inline; }

.card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; margin-top:16px; }
.card.narrow { max-width:360px; }
form label { display:block; margin:10px 0; font-size:14px; }
form input, form select, form textarea { width:100%; padding:8px; border:1px solid var(--line); border-radius:6px;
  font-size:14px; margin-top:4px; font-family:inherit; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.list { width:100%; border-collapse:collapse; margin-top:16px; background:#fff; }
.list th, .list td { border:1px solid var(--line); padding:8px 10px; text-align:left; font-size:14px; }
.list th { background:#f0f0f0; }
.list td.actions, .list th.actions { white-space:nowrap; }

.badge { padding:2px 8px; border-radius:10px; font-size:12px; }
.badge.ok { background:#e3f5e3; color:#256b25; }
.badge.run { background:#fff3cd; color:#7a5b00; }
.badge.err { background:#fbe3e3; color:#9b1c1c; }

.muted { color:#777; } .small { font-size:13px; } .error { color:var(--danger); }
.ok-msg { color:#256b25; }

.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:40;
  align-items:flex-start; justify-content:center; padding:40px 16px; overflow:auto; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:10px; padding:24px; width:100%; max-width:560px; }
.modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }