:root{
  --ink:#0d1117; --muted:#5b6472; --faint:#8b94a3;
  --accent:#f26a1b;
  --ok:#12a150; --bad:#e0393e; --warn:#e08b00;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.78);
  --edge:rgba(15,23,42,.10);
  --edge-soft:rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(15,23,42,.05), 0 8px 24px rgba(15,23,42,.06);
  --code:rgba(15,23,42,.045);
  --r:16px;
}
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e9edf3; --muted:#98a3b3; --faint:#6b7583;
    --glass:rgba(30,36,46,.58);
    --glass-strong:rgba(34,41,52,.74);
    --edge:rgba(255,255,255,.10);
    --edge-soft:rgba(255,255,255,.06);
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.34);
    --code:rgba(255,255,255,.05);
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);min-height:100vh;
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(120vw 70vh at 12% -8%, rgba(242,106,27,.16), transparent 60%),
    radial-gradient(90vw 60vh at 96% 4%, rgba(64,132,255,.16), transparent 62%),
    radial-gradient(80vw 60vh at 50% 108%, rgba(120,80,220,.13), transparent 60%),
    #eef1f6;
  background-attachment:fixed;
}
@media (prefers-color-scheme: dark){
  body{background:
    radial-gradient(120vw 70vh at 12% -8%, rgba(242,106,27,.15), transparent 60%),
    radial-gradient(90vw 60vh at 96% 4%, rgba(56,110,220,.16), transparent 62%),
    radial-gradient(80vw 60vh at 50% 108%, rgba(110,70,210,.14), transparent 60%),
    #0a0d12;}
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:820px;margin:0 auto;padding:38px 20px 90px}
.narrow{max-width:400px}

h1{font-size:23px;line-height:1.2;margin:0;letter-spacing:-.022em;font-weight:640}
h2{font-size:14.5px;margin:0;font-weight:620;letter-spacing:-.012em}
.sub{color:var(--muted);margin:5px 0 0;font-size:13px}

/* -------------------------------------------------------------------- стекло */
.card{
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--edge);border-radius:var(--r);
  box-shadow:var(--shadow);padding:16px 18px;
}

header.top{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  margin-bottom:20px;flex-wrap:wrap;
}
header.top .who{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12.5px}

/* ----------------------------------------------------------- секции-гармошки */
details.fold{margin-top:14px}
details.fold > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:11px 16px;user-select:none;
  background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);
}
details.fold[open] > summary{border-radius:var(--r) var(--r) 0 0;border-bottom-color:transparent}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{
  content:"";width:7px;height:7px;margin-left:auto;
  border-right:1.8px solid var(--faint);border-bottom:1.8px solid var(--faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s;
}
details.fold[open] > summary::after{transform:rotate(225deg) translate(-2px,-2px)}
details.fold > summary .note{color:var(--faint);font-size:12px;font-weight:400}
details.fold > .card{border-radius:0 0 var(--r) var(--r);border-top:none;margin:0}

/* -------------------------------------------------------------- поля и формы */
label{display:block;font-size:11.5px;color:var(--muted);margin-bottom:14px;font-weight:500}
label > span.lab{display:block;margin-bottom:5px}
input,select{
  font:inherit;font-size:14px;width:100%;color:var(--ink);
  background:var(--glass-strong);border:1px solid var(--edge);
  border-radius:11px;padding:0 12px;height:38px;line-height:36px;
}
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1.3 5.5 5.7 10 1.3' fill='none' stroke='%238b94a3' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;
}
input::placeholder{color:var(--faint)}
input:focus,select:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3.5px color-mix(in srgb,var(--accent) 18%,transparent)}

form.add{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;margin:0}
form.add label{margin:0;flex:1 1 280px}
form.add label.s{flex:0 1 170px}
form.add button{height:38px}
form.quiet{margin:0}

/* ------------------------------------------------------------------- кнопки */
button{
  font:inherit;font-size:13px;font-weight:590;height:36px;padding:0 15px;
  border:1px solid var(--edge);border-radius:11px;
  background:var(--glass-strong);color:var(--ink);
  cursor:pointer;white-space:nowrap;transition:.13s;
}
button:hover{border-color:color-mix(in srgb,var(--ink) 22%,transparent)}
button.primary{background:var(--ink);color:#fff;border-color:transparent}
@media (prefers-color-scheme: dark){ button.primary{color:#0a0d12} }
button.primary:hover{opacity:.86}
button.primary[disabled]{opacity:.35;cursor:default}
button.ghost{border-color:transparent;background:none;color:var(--faint);padding:0 6px;
             font-weight:500}
button.ghost:hover{color:var(--bad)}
button.wide{width:100%;height:42px}
form.inline{display:inline}
.btns{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;align-items:center}

/* ------------------------------------------------------- реквизиты доступа */
.endpoint{display:grid;gap:8px;grid-template-columns:repeat(auto-fit,minmax(146px,1fr))}
.field{
  background:var(--code);border:1px solid var(--edge-soft);border-radius:11px;padding:8px 11px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  overflow-x:auto;white-space:nowrap;
}
.field .k{
  display:block;font-family:inherit;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--faint);margin-bottom:3px;
}

/* --------------------------------------------------------------- адреса */
.list{display:flex;flex-direction:column}
.node{border-bottom:1px solid var(--edge-soft)}
.node:last-child{border-bottom:none}
.node > summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;
  padding:11px 2px;user-select:none;
}
.node > summary::-webkit-details-marker{display:none}
.node .name{font-weight:590;font-size:14px;letter-spacing:-.01em;
            overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.node[open] .name{white-space:normal}
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)}
.dot.dirty{background:var(--warn)} .dot.unknown{background:var(--faint)}
.tags{display:flex;gap:5px;align-items:center;flex:0 0 auto}
.tag{
  font-size:9.5px;font-weight:700;letter-spacing:.07em;padding:3px 6px;border-radius:6px;
  border:1px solid transparent;white-space:nowrap;
}
.tag.port{background:var(--code);color:var(--muted);border-color:var(--edge-soft);
          font-family:ui-monospace,Menlo,monospace;letter-spacing:0;font-weight:600}
.tag.good{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.tag.medium{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.tag.bad{background:color-mix(in srgb,var(--bad) 15%,transparent);color:var(--bad)}
.tag.rev{background:color-mix(in srgb,#2f6fed 15%,transparent);color:#2f6fed}
@media (prefers-color-scheme: dark){ .tag.rev{color:#7aa5ff} }
.node .body{padding:2px 2px 14px;font-size:12.5px;color:var(--muted)}
.node .body dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0 0 10px}
.node .body dt{color:var(--faint);font-size:11.5px}
.node .body dd{margin:0;font-variant-numeric:tabular-nums}
.node .body .mono{font-family:ui-monospace,Menlo,monospace;font-size:11.5px;
                  word-break:break-all}
.empty{color:var(--muted);font-size:13px;padding:6px 2px}

/* --------------------------------------------------------------- порты */
.ports{width:100%;border-collapse:collapse}
.ports td{padding:6px 6px;border-bottom:1px solid var(--edge-soft);vertical-align:middle}
.ports tr:last-child td{border-bottom:none}
.ports .pnum{font-family:ui-monospace,Menlo,monospace;font-size:13px;width:70px}
.ports .ptitle input{height:32px;line-height:30px;font-size:13px;
                     background:transparent;border-color:transparent;padding:0 8px}
.ports .ptitle input:hover{border-color:var(--edge)}
.ports .pup{width:46%}
.ports .pup select{height:32px;line-height:30px;font-size:13px;
                   background-position:right 9px center;padding:0 26px 0 10px}
.ports .pdel{width:1%;text-align:right}

/* ------------------------------------------------------------------ прочее */
.flash{padding:11px 14px;border-radius:12px;margin-bottom:16px;font-size:13px;
       border:1px solid var(--edge);background:var(--glass);
       -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.flash.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.flash.err{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.hint{color:var(--faint);font-size:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--edge-soft)}
tr:last-child td{border-bottom:none}
th{color:var(--faint);font-weight:600;font-size:10px;text-transform:uppercase;
   letter-spacing:.06em}

#veil{position:fixed;inset:0;background:rgba(120,130,150,.18);
      -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
      display:none;align-items:center;justify-content:center;z-index:50}
#veil.on{display:flex}
#veil .box{display:flex;align-items:center;gap:11px;background:var(--glass-strong);
           -webkit-backdrop-filter:saturate(180%) blur(24px);
           backdrop-filter:saturate(180%) blur(24px);
           border:1px solid var(--edge);border-radius:14px;padding:13px 19px;
           font-size:13px;box-shadow:0 10px 34px rgba(15,23,42,.2)}
.spin{width:15px;height:15px;border-radius:50%;border:2px solid var(--edge);
      border-top-color:var(--accent);animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* значки состояния и действия в строке адреса */
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:7px;font-size:12px;font-weight:700;line-height:1;
  cursor:default;
}
.pill.good{background:color-mix(in srgb,var(--ok) 16%,transparent);color:var(--ok)}
.pill.medium{background:color-mix(in srgb,var(--warn) 20%,transparent);color:var(--warn)}
.pill.bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad)}
.pill.rev{background:color-mix(in srgb,#2f6fed 16%,transparent);color:#2f6fed;
          font-size:11.5px}
@media (prefers-color-scheme: dark){ .pill.rev{color:#8ab0ff} }
.acts{display:flex;gap:2px;flex:0 0 auto;margin-left:2px}
.icon{
  width:26px;height:26px;padding:0;border:none;background:none;color:var(--faint);
  font-size:13px;line-height:1;border-radius:7px;
}
.icon:hover{background:var(--code);color:var(--ink);border:none}
.icon.del:hover{color:var(--bad)}