* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.5 "Segoe UI", system-ui, sans-serif; background: #f4f5f7; color: #1d2330; }
a { color: #2a5bd7; text-decoration: none; }
h1 { font-size: 20px; margin: 0 0 14px; }
h2 { font-size: 16px; margin: 0 0 10px; }
h2 small, small { color: #7a8394; font-weight: normal; }
code { font: 13px Consolas, monospace; background: #eef0f4; padding: 1px 5px; border-radius: 4px; }

header { display: flex; align-items: center; gap: 24px; padding: 12px 24px; background: #1d2330; color: #fff; }
header a { color: #c9d3ea; }
header nav { display: flex; gap: 16px; }
header .right { margin-left: auto; color: #9aa4b8; }
main { max-width: 1200px; margin: 0 auto; padding: 24px; }

.box { background: #fff; border: 1px solid #e1e4ea; border-radius: 8px; padding: 20px; margin-bottom: 16px; max-width: 640px; }
.box.nic { max-width: none; }
.box.mgmt { background: #fafbfc; }
.login { max-width: 340px; margin: 80px auto; }
label { display: block; margin-bottom: 12px; color: #4a5263; }
input, select, textarea { font: inherit; padding: 7px 10px; border: 1px solid #cdd2db; border-radius: 6px; background: #fff; }
.box label > input, .box label > select, .box label > textarea { display: block; width: 100%; margin-top: 4px; }
input[type=checkbox] { width: auto; display: inline; margin: 0; }
input.short { width: 64px; }
button { font: inherit; padding: 7px 14px; border: 0; border-radius: 6px; background: #2a5bd7; color: #fff; cursor: pointer; }
button:hover { filter: brightness(1.1); }
button.danger { background: #c9372c; }
button.link { background: none; color: #c9372c; padding: 0 4px; }
.hint { color: #7a8394; font-size: 13px; }

.flash { padding: 10px 14px; border-radius: 6px; margin-bottom: 10px; }
.flash.ok { background: #e3f4e8; color: #1c6b37; }
.flash.error { background: #fbe7e5; color: #9b2a20; }

.cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
.cards.three { grid-template-columns: repeat(3, 1fr); max-width: 720px; }
.card { background: #fff; border: 1px solid #e1e4ea; border-radius: 8px; padding: 14px 16px; color: #4a5263; }
.card b { display: block; font-size: 26px; color: #1d2330; }
.card.on { border-color: #2a5bd7; box-shadow: 0 0 0 1px #2a5bd7; }
.card.aktif b { color: #1c8a45; }
.card.pasif b { color: #7a8394; }
.card.bitti b { color: #c9372c; }
.card.yakin b { color: #d48806; }

.search { margin-bottom: 10px; }
.search input { width: 280px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px; background: #fff; border: 1px solid #e1e4ea; border-radius: 8px 8px 0 0; }
.bar label { margin: 0 12px 0 0; }
.bar input[type=number] { width: 80px; }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e4ea; margin-bottom: 16px; }
th, td { padding: 8px 10px; border-bottom: 1px solid #eef0f4; text-align: left; vertical-align: middle; }
th { background: #fafbfc; font-weight: 600; color: #4a5263; }
td.actions { white-space: nowrap; }
td.actions button { padding: 4px 9px; font-size: 13px; }
td.empty { text-align: center; color: #7a8394; padding: 24px; }
.err { color: #c9372c; cursor: help; }

.tag { padding: 2px 8px; border-radius: 10px; font-size: 12px; background: #eef0f4; }
.tag.aktif { background: #e3f4e8; color: #1c6b37; }
.tag.pasif { background: #eef0f4; color: #5b6475; }
.tag.bitti { background: #fbe7e5; color: #9b2a20; }
.tag.yakin { background: #fff4dc; color: #8a5a00; }

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.row label { margin: 0; }
form.inline { display: inline; }
.iplist { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px; margin: 8px 0 12px;
          max-height: 320px; overflow: auto; border: 1px solid #eef0f4; border-radius: 6px; padding: 8px; }
.iplist label { margin: 0; font: 13px Consolas, monospace; color: #1d2330; }
.iplist label.used { color: #a0a7b4; }
.iplist label.all { grid-column: 1 / -1; font-family: inherit; }