/* VPN Prox admin - flat, square design */
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: #f3f5f9; color: #0b1220; }
a { color: #0a7f70; text-decoration: underline; text-underline-offset: 3px; }
code { background: #e8edf5; padding: 1px 5px; font-size: 13px; }
.muted { color: #66738c; }

header.top { background: #0b1220; color: #fff; display: flex; align-items: center; gap: 24px; padding: 0 24px; flex-wrap: wrap; border-bottom: 3px solid #00c2a8; }
.brand { font-weight: 800; font-size: 18px; padding: 14px 0; }
.brand span { color: #00c2a8; font-weight: 600; }
header nav { display: flex; flex-wrap: wrap; }
header nav a { color: #c9d3e6; padding: 16px 14px; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -3px; }
header nav a:hover, header nav a.on { color: #fff; border-bottom-color: #fff; text-decoration: underline; }

main { max-width: 1180px; margin: 0 auto; padding: 24px; }
h1 { margin: 0 0 18px; font-size: 24px; }
h2 { font-size: 17px; margin: 28px 0 10px; padding-bottom: 6px; border-bottom: 1px solid #d5dce8; }

.flash { padding: 12px 14px; margin-bottom: 16px; border-left: 4px solid; background: #fff; }
.flash.ok { border-color: #22c55e; }
.flash.err { border-color: #ef4444; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.card { background: #fff; border: 1px solid #d5dce8; padding: 16px; }
.card .num { font-size: 28px; font-weight: 800; }
.card .lbl { color: #66738c; font-size: 13px; border-top: 1px solid #e3e8f0; margin-top: 6px; padding-top: 6px; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 170px; background: #fff; border: 1px solid #d5dce8; padding: 12px 12px 30px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.bar div { background: #00c2a8; min-height: 2px; }
.bar span { position: absolute; bottom: -22px; left: 0; right: 0; text-align: center; font-size: 11px; color: #66738c; }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #d5dce8; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #e3e8f0; vertical-align: middle; }
th { background: #eef2f8; font-size: 13px; }
tr.blocked td { background: #fff1f1; }
.nowrap { white-space: nowrap; }

.tag { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 700; color: #fff; }
.tag.ok { background: #22c55e; }
.tag.err { background: #ef4444; }
.tag.prem { background: #f59e0b; }
.tag.free { background: #64748b; }
.tag.muted { background: #94a3b8; }
textarea { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #b9c3d4; font: 13px/1.4 ui-monospace, Consolas, monospace; border-radius: 0; min-height: 90px; }
.copy { font: 14px ui-monospace, Consolas, monospace; background: #e8edf5; padding: 8px 10px; display: block; word-break: break-all; }

.actions { display: flex; gap: 10px; margin-bottom: 14px; align-items: center; }
.btn, button { display: inline-block; background: #0b1220; color: #fff; border: 2px solid #0b1220; padding: 9px 18px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; border-radius: 0; }
.btn:hover, button:hover { background: #00c2a8; border-color: #00c2a8; color: #0b1220; }
button.ghost { background: #fff; color: #0b1220; }
button.link { background: none; border: 0; padding: 0 0 0 10px; color: #0a7f70; text-decoration: underline; font-weight: 400; }
button.link.danger { color: #c62828; }
form.inline { display: inline; }

.form { background: #fff; border: 1px solid #d5dce8; padding: 18px; }
.form.narrow { max-width: 420px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px 18px; margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 600; color: #33405a; margin-bottom: 10px; }
label.check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
input:not([type=checkbox]) { display: block; width: 100%; margin-top: 4px; padding: 9px 10px; border: 1px solid #b9c3d4; font: inherit; border-radius: 0; background: #fff; }
input:focus { outline: 2px solid #00c2a8; border-color: #00c2a8; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: #00c2a8; }

.search { display: flex; gap: 8px; margin-bottom: 14px; max-width: 480px; }
.search input { margin: 0; }

body.center { display: flex; min-height: 100vh; align-items: center; justify-content: center; background: #0b1220; }
.box { background: #fff; width: 100%; max-width: 400px; padding: 28px; border-top: 4px solid #00c2a8; }
.box button { width: 100%; margin-top: 6px; }

@media (max-width: 700px) {
  main { padding: 14px; }
  table { display: block; overflow-x: auto; }
}