@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

:root {
  --bg:#f5f6f8; --surface:#fff; --line:#e4e7ec; --text:#1f2733; --muted:#6b7482;
  --accent:#1c5fa8; --accent-soft:#e8f0f9; --sidebar:#0f1b2a; --sidebar-line:#1e2c3e;
  --green:#1a7f4b; --green-bg:#e4f4ec; --yellow:#8a6d1a; --yellow-bg:#faf3d9; --red:#b03234; --red-bg:#fbe9e9;
  --radius:8px; --shadow:0 1px 2px rgba(16,24,40,.05);
}
* { box-sizing: border-box; }
html { font-size: 13px; }
body { margin:0; font-family:'Inter',-apple-system,'Segoe UI',sans-serif; color:var(--text); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; }
h1 { font-size:1.35rem; font-weight:500; margin:0 0 .25rem; }
h2 { font-size:1.05rem; font-weight:500; margin:1.25rem 0 .5rem; }
.muted { color:var(--muted); }
.page-sub { color:var(--muted); margin-bottom:1.25rem; }

.app { display:flex; min-height:100vh; }
.main-col { flex:1; display:flex; flex-direction:column; min-width:0; }
.sidebar { width:220px; flex-shrink:0; background:var(--sidebar); color:#c6d0dc; }
.sidebar-head { padding:1.1rem 1rem .9rem; border-bottom:1px solid var(--sidebar-line); }
.brand-name { font-weight:600; color:#6aa5e0; letter-spacing:.02em; }
.nav { padding:.6rem 0; }
.nav a { display:block; padding:.42rem 1rem; color:#c6d0dc; text-decoration:none; font-size:.93rem; }
.nav a.active, .nav a:hover { background:#16283c; color:#fff; }

.topbar { display:flex; align-items:center; gap:.9rem; padding:.55rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--line); }
.topbar-user { margin-left:auto; display:flex; align-items:center; gap:.75rem; }
.topbar-name { color:var(--muted); }
.content { padding:1.5rem 1.75rem 2.5rem; max-width:1400px; }
.page-head { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.1rem 1.25rem; margin-bottom:1.25rem; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th { text-align:left; font-weight:500; color:var(--muted); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; padding:.5rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }

.badge { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.74rem; font-weight:500; }
.badge-gray { background:#eef0f3; color:#5a626e; } .badge-blue { background:var(--accent-soft); color:var(--accent); }
.badge-green { background:var(--green-bg); color:var(--green); } .badge-yellow { background:var(--yellow-bg); color:var(--yellow); } .badge-red { background:var(--red-bg); color:var(--red); }

.form-grid { display:grid; gap:.8rem; }
.form-grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.form-grid label { display:flex; flex-direction:column; gap:.25rem; font-size:.85rem; color:var(--muted); font-weight:500; }
.form-grid .span-all { grid-column:1/-1; }
input, select, textarea { font:inherit; color:var(--text); border:1px solid var(--line); border-radius:6px; padding:.45rem .6rem; background:#fff; }
textarea { min-height:70px; resize:vertical; }
.btn { display:inline-block; font:inherit; font-weight:500; border-radius:6px; padding:.45rem .95rem; cursor:pointer; border:1px solid transparent; text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-ghost { background:transparent; border-color:var(--line); color:var(--text); }
.btn-danger { background:var(--red-bg); color:var(--red); }
.btn-sm { padding:.25rem .6rem; font-size:.82rem; }

.alert { border-radius:6px; padding:.6rem .85rem; margin-bottom:1rem; font-size:.9rem; }
.alert-ok { background:var(--green-bg); color:var(--green); }
.alert-error { background:var(--red-bg); color:var(--red); }

.auth-page { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--sidebar); }
.auth-card { background:var(--surface); border-radius:10px; padding:2rem 2.25rem; width:100%; max-width:420px; box-shadow:0 10px 30px rgba(0,0,0,.35); margin:1rem; }
.auth-brand { font-size:1.4rem; margin-bottom:1rem; }