:root {
  --bg:#0b0e13; --card:#11161f; --text:#e9eef6; --muted:#a6b3c6;
  --okbg:#e8f5e9; --ok:#1b5e20; --warnbg:#fff8e1; --warn:#8d6e00;
  --border:#1e2633; --accent:#2493FF;
}

* { box-sizing: border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg); color:var(--text); font:14px/1.45 system-ui,Segoe UI,Roboto,Arial; }
.wrap { max-width:1100px; margin:40px auto; padding:0 16px; }

.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
h1 { font-size:22px; margin:0; }
.controls { display:flex; align-items:center; gap:8px; }
input[type="search"]{ width:280px; background:#0c1118; border:1px solid var(--border); color:var(--text);
  padding:8px 10px; border-radius:10px; outline:none; }
button { background:var(--accent); color:white; border:0; padding:8px 12px; border-radius:10px; cursor:pointer; }
button:hover { opacity:.9; }

.summary { margin-bottom:8px; color:var(--muted); }
.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.card { background:var(--card); padding:14px; border-radius:14px; border:1px solid var(--border); }
.name { font-weight:600; margin-bottom:6px; }
.domain { color:var(--muted); font-size:12px; margin-bottom:10px; word-break:break-all; }
.badge { display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid transparent; }
.badge.done  { background:var(--okbg);   color:var(--ok);   border-color:#a5d6a7; }
.badge.work  { background:var(--warnbg); color:var(--warn); border-color:#ffe082; }
.small { color:var(--muted); font-size:12px; margin-top:8px; }
.kpis { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; color:var(--muted); font-size:12px; }
.kpi { background:#0c1118; padding:4px 8px; border-radius:8px; border:1px solid var(--border); }
.foot { margin-top:10px; }