:root{
  --bg:#f7f7f5; --card:#fff; --ink:#1a1a1a; --muted:#6b6b6b;
  --line:#e3e3df; --accent:#2f5fe0; --ok:#1f8a4c; --bad:#c0392b;
  --radius:10px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
main{max-width:860px; margin:0 auto; padding:20px 16px 60px}

.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 16px; background:var(--card); border-bottom:1px solid var(--line);
}
.brand{font-weight:700; font-size:18px; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent)}
.top nav{display:flex; gap:16px}
.top nav a{color:var(--ink); text-decoration:none; font-size:15px}
.top nav a:hover{color:var(--accent)}
.quiet{color:var(--muted) !important}

h1{font-size:24px; margin:0 0 4px}
h2{font-size:18px; margin:28px 0 10px}
.sub{color:var(--muted); margin:0 0 22px}

.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px; margin-bottom:12px;
}
.card.link{display:block; color:inherit; text-decoration:none}
.card.link:hover{border-color:var(--accent)}

.row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.name{font-weight:600}
.meta{color:var(--muted); font-size:14px}

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  font-size:13px; background:#eef1fb; color:var(--accent);
}
.badge.warn{background:#fdf0e6; color:#9a5b1a}
.badge.ok{background:#e8f5ec; color:var(--ok)}

label{display:block; margin:14px 0 6px; font-weight:600; font-size:15px}
input[type=text],input[type=password],textarea,select{
  width:100%; padding:10px 12px; font:inherit; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:8px;
}
textarea{min-height:160px; resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid var(--accent); outline-offset:-1px}

.btn{
  display:inline-block; padding:10px 18px; font:inherit; font-weight:600;
  color:#fff; background:var(--accent); border:0; border-radius:8px;
  cursor:pointer; text-decoration:none;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent; color:var(--accent); border:1px solid var(--accent)}

.err{background:#fdecea; color:var(--bad); padding:10px 12px; border-radius:8px; margin:12px 0}
.empty{color:var(--muted); text-align:center; padding:40px 0}

.narrow{max-width:380px; margin:60px auto}