:root { --t: #00b4b4; --td: #007a7a; --bg: #f4fbfb; --row: #f0fafa; --bd: #cceaea; --tx: #1c2b2b; --mu: #6b7f7f; --warn: #c0392b; --wbg: #fdecea; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tx); background: var(--bg); }
a { color: var(--td); }
header.top { display: flex; align-items: center; gap: 24px; padding: 8px 20px; background: #fff; border-bottom: 2px solid var(--t); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; font-size: 17px; color: var(--tx); text-decoration: none; }
.brand span { color: var(--t); }
header nav { display: flex; gap: 4px; flex-wrap: wrap; }
header nav a { padding: 6px 10px; border-radius: 6px; text-decoration: none; color: var(--tx); }
header nav a.on { background: var(--t); color: #fff; }
header nav a.soon { color: #b0bcbc; cursor: default; }
header .who { margin-left: auto; color: var(--mu); }
main { padding: 16px 20px; max-width: 1500px; margin: 0 auto; }
h1 { font-size: 22px; margin: 6px 0 14px; }
h2 { font-size: 15px; margin: 0 0 10px; color: var(--td); }
.muted { color: var(--mu); } .small { font-size: 12px; } .mono { font-family: ui-monospace, Consolas, monospace; }
.r { text-align: right; } .neg { color: var(--warn); } .warn { color: var(--warn); }
.card { background: #fff; border: 1px solid var(--bd); border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.flash { padding: 8px 12px; border-radius: 6px; margin-bottom: 10px; background: #e6f7f7; border: 1px solid var(--bd); }
.flash.err { background: var(--wbg); border-color: #f2b8b1; color: var(--warn); }
.toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.toolbar input[type=text], .toolbar input[name=q] { flex: 1; min-width: 240px; }
input, select, textarea, button { font: inherit; padding: 6px 8px; border: 1px solid var(--bd); border-radius: 6px; background: #fff; }
button, .btn { background: var(--t); color: #fff; border-color: var(--t); cursor: pointer; text-decoration: none; padding: 6px 12px; border-radius: 6px; display: inline-block; }
button.primary { background: var(--td); }
.btn.small { padding: 2px 8px; font-size: 12px; margin-left: 8px; }
.btns button { background: #fff; color: var(--tx); }
.btns button.on { background: var(--t); color: #fff; }
table.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--bd); }
table.grid th, table.grid td { padding: 5px 8px; border-bottom: 1px solid var(--bd); text-align: left; vertical-align: top; }
table.grid thead th { background: var(--row); cursor: pointer; user-select: none; position: sticky; top: 46px; }
table.grid tbody tr:hover { background: var(--row); cursor: pointer; }
table.grid tr.inactive td { color: #a0adad; }
#tbl tr.low td:nth-child(5) { color: var(--warn); }
#tbl th, #tbl td { white-space: nowrap; }
#tbl td.nm { max-width: 520px; overflow: hidden; text-overflow: ellipsis; }
table.grid.small { font-size: 12px; } table.grid.small tbody tr:hover { cursor: default; }
table.kv th { text-align: left; color: var(--mu); font-weight: 500; padding: 3px 12px 3px 0; white-space: nowrap; }
table.kv td { padding: 3px 0; }
.tag { display: inline-block; font-size: 10px; padding: 0 5px; border-radius: 8px; background: var(--row); color: var(--td); border: 1px solid var(--bd); }
.tag.warn { color: var(--warn); background: var(--wbg); border-color: #f2b8b1; }
.pager { display: flex; gap: 6px; align-items: center; justify-content: center; margin: 12px; flex-wrap: wrap; }
.pager .btn.small { margin-left: 0; } .pager .btn.disabled { background: var(--row); color: var(--mu); border-color: var(--bd); cursor: default; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tile { background: #fff; border: 1px solid var(--bd); border-left: 4px solid var(--t); border-radius: 8px; padding: 12px 14px; }
.tile .v { font-size: 22px; font-weight: 700; } .tile .l { color: var(--mu); font-size: 12px; }
.tile.warn { border-left-color: var(--warn); }
.form label { display: block; margin-bottom: 10px; } .form label input, .form label textarea { width: 100%; }
.form .row { display: flex; gap: 12px; } .form .row label { flex: 1; }
.form .checks label { display: flex; gap: 6px; align-items: center; } .form .checks input { width: auto; }
.inline { display: inline-flex; gap: 6px; margin-top: 8px; }
.crumbs { margin: 0 0 6px; color: var(--mu); }
.login-body { display: grid; place-items: center; min-height: 100vh; }
.login { width: 340px; } .login h1 { text-align: center; } .login h1 span { color: var(--t); }
.login label { display: block; margin-bottom: 12px; } .login input, .login select { width: 100%; margin-top: 4px; }
.login button { width: 100%; }
.result { border-left: 4px solid var(--td); }
.spinner { display:inline-block; width:14px; height:14px; border:2px solid var(--bd); border-top-color: var(--t); border-radius:50%; animation: spin 1s linear infinite; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
pre { white-space: pre-wrap; background: var(--row); padding: 8px; border-radius: 6px; }
.picker { position:absolute; z-index:20; background:#fff; border:1px solid var(--bd); border-radius:6px; box-shadow:0 4px 14px rgba(0,0,0,.12); max-height:320px; overflow:auto; min-width:360px; }
.picker .pick { padding:5px 8px; cursor:pointer; font-size:12px; } .picker .pick:hover { background: var(--row); }
.tag.ok, .ok { color:#1e7d3a; } .tag.ok { background:#e9f7ee; border-color:#bfe6cc; }
button.small { padding:2px 8px; font-size:12px; }
table.grid tr.nocost td:nth-child(2) { background: var(--wbg); }
a.tog { display:inline-block; min-width:26px; text-align:center; padding:0 5px; border-radius:8px; background: var(--t); color:#fff; text-decoration:none; font-size:11px; font-weight:700; }
table.grid tr.child td { background: #fafefe; } table.grid tr.child td:first-child { padding-left: 22px; } .indent { color: var(--mu); margin-right: 4px; }
table.grid tr.diffrow td { background: #fff7e6; } table.grid tr.todo td:nth-child(6) { background: #f7f7f7; }