:root {
  --bg: #191b1d;
  --panel: #24272a;
  --panel-2: #303337;
  --text: #f4f6f7;
  --muted: #a8b1b7;
  --line: #3f4449;
  --accent: #59c293;
  --pink: #ff0a85;
  --orange: #ff8a00;
  --blue: #385d82;
}
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
a { color:inherit; }
.topbar { height:58px; background:var(--blue); display:flex; align-items:center; justify-content:space-between; padding:0 28px; font-weight:900; position:sticky; top:0; z-index:20; }
.topbar span { color:#73d1a2; }
.layout { display:grid; grid-template-columns:250px 1fr; min-height:calc(100vh - 58px); }
.sidebar { border-right:1px solid #111; background:#151719; padding:24px 18px; position:sticky; top:58px; height:calc(100vh - 58px); }
.navlink { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px; color:var(--muted); text-decoration:none; font-weight:800; margin-bottom:6px; }
.navlink.active, .navlink:hover { background:#24342e; color:#fff; }
.main { padding:28px; overflow:auto; }
.crumb { background:var(--panel-2); border-radius:6px; padding:14px 18px; margin-bottom:26px; color:#dce3e6; font-weight:800; }
h1 { font-size:44px; margin:0 0 24px; font-weight:850; }
.kpis { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:18px; }
.kpi-label { color:var(--muted); font-weight:800; font-size:13px; text-transform:uppercase; }
.kpi-value { font-size:36px; font-weight:950; margin-top:8px; }
.kpi-note { color:var(--accent); font-weight:850; margin-top:6px; }
.chart-grid { display:grid; grid-template-columns:2fr 1fr; gap:16px; margin-bottom:20px; }
.toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; margin:18px 0; flex-wrap:wrap; }
.btn, button { border:0; border-radius:6px; background:#4b4f54; color:#fff; padding:10px 14px; font-weight:850; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.btn-green { background:#51b789; }
.btn-pink { background:var(--pink); }
.search { display:flex; border-radius:6px; overflow:hidden; background:#fff; }
.search input { width:min(360px,72vw); border:0; padding:11px 12px; font:inherit; }
.search button { border-radius:0; background:#3c3f43; }
.table-wrap { overflow:auto; border:1px solid var(--line); border-radius:8px; }
table { width:100%; border-collapse:collapse; min-width:1060px; }
th, td { padding:13px 14px; text-align:left; white-space:nowrap; }
th { background:#1f2225; color:#e6ecef; font-size:14px; }
tr:nth-child(odd) td { background:#383b3e; }
tr:nth-child(even) td { background:#252729; }
td { color:#f3f3f3; font-weight:650; }
.muted { color:var(--muted); }
.pill { display:inline-flex; align-items:center; border-radius:999px; padding:4px 9px; background:#173f2d; color:#91e8ba; font-size:12px; font-weight:900; }
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; place-items:center; z-index:50; padding:20px; }
.modal.open { display:grid; }
.modal-card { width:min(720px,100%); background:#333638; border-radius:8px; border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.45); }
.modal-head, .modal-foot { padding:18px 22px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.modal-foot { border-top:1px solid var(--line); border-bottom:0; justify-content:flex-end; }
.modal-body { padding:28px; display:grid; grid-template-columns:160px 1fr; gap:12px 20px; }
.modal-body strong { text-align:right; }
.login-page { min-height:100vh; display:grid; grid-template-rows:58px 1fr auto; background:#202123; }
.login-card { width:min(520px, calc(100vw - 32px)); margin:auto; background:#303030; border-radius:8px; padding:44px; text-align:center; }
.avatar { width:120px; height:120px; border-radius:50%; background:#ddd; margin:0 auto 34px; }
.login-card input { width:100%; min-height:48px; border:0; border-radius:6px; margin-bottom:16px; padding:12px 14px; font:inherit; }
.login-footer { border-top:1px solid #454545; padding:22px; }
.login-footer a { color:#00d18f; text-decoration:none; font-weight:900; }
.notice { border-radius:6px; padding:12px 14px; margin-bottom:16px; font-weight:800; }
.notice.bad { background:#5a2222; color:#ffd4d4; }
.notice.ok { background:#163d2b; color:#a7f3c8; }
.form-card { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px; }
.form-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.form-grid label { color:var(--muted); font-weight:850; font-size:13px; }
.form-grid input,.form-grid select,.form-grid textarea { width:100%; min-height:42px; border:1px solid #4a5056; border-radius:6px; background:#151719; color:#fff; padding:10px; font:inherit; margin-top:6px; }
.form-grid textarea { min-height:92px; resize:vertical; }
.span-2 { grid-column:span 2; }
.span-3 { grid-column:span 3; }
.pipeline { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.pipe { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:14px; }
.pipe b { display:block; font-size:28px; margin-top:8px; }
@media (max-width:960px){ .form-grid,.pipeline{grid-template-columns:1fr}.span-2,.span-3{grid-column:auto} }
@media (max-width:960px){ .layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;display:flex;overflow:auto}.kpis,.chart-grid{grid-template-columns:1fr}.main{padding:18px}h1{font-size:34px} }