/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
:root {
  --bg: #0e1116;
  --panel: #161b22;
  --panel-2: #1b222b;
  --line: #232a33;
  --line-soft: #1e242c;
  --text: #cdd6e0;
  --muted: #7d8792;
  --dim: #59626d;
  --link: #3fb9b0;      /* "link up" teal — live connection */
  --link-glow: #3fb9b055;
  --act: #5b8def;       /* actions */
  --warn: #e0a458;      /* offline / attention */
  --danger: #e5534b;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Menlo, monospace;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }

/* ---- link status bar (hero) ------------------------------------------- */
.statusbar {
  display: flex; align-items: center; gap: 22px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #131820, #0e1116);
}
.brand { display: flex; align-items: baseline; gap: 10px; }
.brand b { font-weight: 650; letter-spacing: -0.01em; font-size: 15px; }
.brand span { color: var(--dim); font-size: 12px; }
.statusbar .metrics { margin-left: auto; display: flex; align-items: center; gap: 20px; font-family: var(--mono); font-size: 12.5px; }
.metric { color: var(--muted); }
.metric b { color: var(--text); font-weight: 600; }
.metric.live b { color: var(--link); }
.signout {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  border-radius: 6px; padding: 5px 10px; font-family: var(--mono); font-size: 11.5px; cursor: pointer;
}
.signout:hover { border-color: var(--danger); color: var(--danger); }

/* live dot */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--link); box-shadow: 0 0 0 0 var(--link-glow); animation: pulse 2.4s ease-out infinite; }
.dot.off { background: var(--warn); opacity: 0.55; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--link-glow); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .dot.on { animation: none; } }

/* ---- hub unreachable banner -------------------------------------------- */
.hub-banner {
  padding: 10px 26px;
  background: #2a1615;
  border-bottom: 1px solid var(--danger);
  color: #f2a49e;
  font-family: var(--mono);
  font-size: 12.5px;
}

/* ---- layout ----------------------------------------------------------- */
main { max-width: 1080px; margin: 0 auto; padding: 30px 26px 80px; }
.section-head { display: flex; align-items: baseline; gap: 12px; margin: 34px 2px 14px; }
.section-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); }
.section-head .count { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.section-head:first-child { margin-top: 6px; }

/* ---- machines board --------------------------------------------------- */
.board { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-gap: 12px; gap: 12px; }
.machine {
  border: 1px solid var(--line); border-radius: 10px; background: var(--panel);
  padding: 14px 15px; cursor: pointer; transition: border-color .12s, background .12s;
}
.machine:hover { border-color: #2f3a45; background: var(--panel-2); }
.machine.sel { border-color: var(--link); background: var(--panel-2); }
.machine .top { display: flex; align-items: center; gap: 9px; }
.machine .name { font-weight: 600; letter-spacing: -0.01em; }
.machine .name.editable { border-bottom: 1px dotted var(--dim); cursor: text; }
.machine .name.editable:hover { color: var(--link); border-color: var(--link); }
.machine .name-edit {
  font: inherit; font-weight: 600; letter-spacing: -0.01em; color: var(--text);
  background: var(--bg); border: 1px solid var(--act); border-radius: 5px;
  padding: 1px 5px; min-width: 0; width: 120px;
}
.machine .name-edit:focus { outline: none; }
.machine .plat { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; }
.machine .note-row { display: flex; gap: 6px; margin-top: 4px; align-items: center; }
.note-input {
  flex: 1 1; font-size: 12px; padding: 3px 8px; border: 1px solid #2a2f3a;
  border-radius: 4px; background: #12151c; color: #cfd6e4; outline: none;
}
.note-input:focus { border-color: #3d6ad6; }
.tip { font-weight: 600; color: #7fb0ff; }
.dom { color: #9aa4b8; font-size: 12px; }
.meta { margin-top: 9px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.machine .meta .tn { color: var(--link); }
.machine .meta .tn.zero { color: var(--dim); }
.machine .meta2 { margin-top: 6px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.machine .top .iconbtn { margin-left: 4px; width: 22px; height: 22px; font-size: 12px; flex-shrink: 0; }

/* ---- tunnels table ---------------------------------------------------- */
.tbl { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
.row { display: grid; grid-template-columns: 1.1fr 1.4fr 0.9fr 40px; align-items: center; grid-gap: 10px; gap: 10px; padding: 11px 15px; border-top: 1px solid var(--line-soft); }
.row:first-child { border-top: none; }
.row.head { background: var(--panel-2); color: var(--muted); font-size: 12px; }
.row .m { font-family: var(--mono); font-size: 12.5px; }
.route { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; }
.route .arrow { color: var(--dim); }
.route .pub { color: var(--link); }
.route .loc { color: var(--text); }
.pill { font-family: var(--mono); font-size: 11px; padding: 1px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--muted); }
.iconbtn { justify-self: end; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--dim); cursor: pointer; font-size: 14px; line-height: 1; }
.iconbtn:hover { border-color: var(--danger); color: var(--danger); }

/* ---- open-a-port composer -------------------------------------------- */
.composer { margin-top: 12px; border: 1px dashed var(--line); border-radius: 10px; padding: 14px 15px; background: #12171e; }
.composer .lead { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.composer .lead b { color: var(--text); font-weight: 600; }
.fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 11px; color: var(--dim); }
.field input, .field select {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
  padding: 8px 10px; font-family: var(--mono); font-size: 13px; min-width: 120px;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--act); }
.field.port input { width: 110px; min-width: 0; }

.btn {
  border: 1px solid var(--act); background: var(--act); color: #06101f; font-weight: 600;
  border-radius: 7px; padding: 8px 16px; cursor: pointer; font-size: 13px; height: 36px;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.err { color: var(--danger); font-family: var(--mono); font-size: 12px; margin-top: 8px; }
.dim { color: var(--dim); }

.token-reveal { display: flex; gap: 8px; margin-top: 10px; align-items: center; }
.token-reveal input {
  flex: 1 1; background: var(--bg); border: 1px solid var(--link); border-radius: 7px; color: var(--text);
  padding: 8px 10px; font-family: var(--mono); font-size: 13px;
}

/* ---- login -------------------------------------------------------------- */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card {
  width: 100%; max-width: 320px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); padding: 24px 22px; display: flex; flex-direction: column; gap: 14px;
}
.login-title { font-size: 15px; margin-bottom: 4px; }
.login-card .field { display: flex; flex-direction: column; gap: 5px; }
.login-card .field label { font-size: 12px; color: var(--dim); }
.login-card .field input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 7px; color: var(--text);
  padding: 9px 10px; font-family: var(--mono); font-size: 13px;
}
.login-card .field input:focus { outline: none; border-color: var(--act); }
.login-card .btn { width: 100%; }

/* ---- empty states ----------------------------------------------------- */
.empty { border: 1px dashed var(--line); border-radius: 10px; padding: 26px; text-align: center; color: var(--muted); }
.empty code { font-family: var(--mono); color: var(--text); background: var(--panel-2); padding: 2px 6px; border-radius: 5px; }

/* ---- terminal button ---- */
.termbtn {
  margin-top: 6px;
  padding: 4px 10px;
  background: #0c2820;
  color: #4ecca3;
  border: 1px solid #2a5a4a;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.termbtn:hover {
  background: #1a4a3a;
  border-color: #4ecca3;
}