/* hostplane panel — design system 2.0 (sosprepc.sk tokens, self-hosted
   Space Grotesk variable font, layered dark surfaces) */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/space-grotesk-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/static/fonts/space-grotesk-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg:#0B0D12; --bg2:#0E1118; --surface:#12151C; --surface2:#161A23;
  --line:#232833; --line2:#2C3340; --ink:#E8EAF0; --mut:#8A93A5;
  --accent:#3E8BFF; --accent-deep:#2264C8;
  --ok:#2FD180; --warn:#FFB454; --crit:#FF7A8A;
  --r-lg:16px; --r-md:12px; --r-sm:8px;
  --shadow:0 16px 48px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35);
  --tr:.16s ease;
}
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--ink);
  font:15px/1.55 "Space Grotesk","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; }

/* ---- auth pages: centered card over a brand glow ---- */
body:has(> main.card) { display:grid; place-items:center;
  background:
    radial-gradient(50rem 30rem at 50% -10%, rgba(62,139,255,.14), transparent 60%),
    var(--bg); }
main.card { background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:2.4rem;
  width:min(28rem,92vw); box-shadow:var(--shadow); }

/* ---- app shell ---- */
.shell { display:grid; grid-template-columns:15.5rem 1fr; min-height:100vh;
  background:
    radial-gradient(70rem 40rem at 85% -20%, rgba(62,139,255,.07), transparent 60%),
    var(--bg); }
.side { border-right:1px solid var(--line);
  background:linear-gradient(180deg, var(--bg2), var(--bg));
  display:flex; flex-direction:column; padding:1.3rem 1rem; gap:1.6rem;
  position:sticky; top:0; height:100vh; }
.side nav { display:flex; flex-direction:column; gap:.2rem; }
.side nav a { color:var(--mut); text-decoration:none; padding:.55rem .8rem;
  border-radius:10px; font-size:.95rem; display:flex; align-items:center;
  gap:.65rem; transition:color var(--tr), background var(--tr); }
.side nav a svg { width:17px; height:17px; opacity:.75; }
.side nav a:hover { color:var(--ink); background:rgba(62,139,255,.07); }
.side nav a.on { color:var(--ink);
  background:linear-gradient(90deg, rgba(62,139,255,.18), rgba(62,139,255,.06));
  box-shadow:inset 2px 0 0 var(--accent); }
.side nav a.on svg { opacity:1; color:var(--accent); }
.side-foot { margin-top:auto; display:flex; flex-direction:column; gap:.7rem; }
.userchip { display:flex; align-items:center; gap:.6rem; padding:.5rem .6rem;
  border:1px solid var(--line); border-radius:12px; background:var(--surface); }
.avatar { width:30px; height:30px; border-radius:9px; display:grid;
  place-items:center; font-weight:600; font-size:.8rem; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-deep)); }
.userchip .who { display:flex; flex-direction:column; line-height:1.15; }
.userchip .who b { font-size:.85rem; font-weight:600; }
.userchip .who em { font-style:normal; color:var(--mut); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.08em; }
main.content { padding:2.1rem 2.6rem 3rem; max-width:76rem; width:100%; }

/* ---- brand ---- */
.brand { color:var(--ink); font-weight:600; display:flex; align-items:center;
  gap:.6rem; padding-left:.2rem; }
.brand.center { margin-bottom:1.3rem; color:var(--mut); }
.bname { letter-spacing:.02em; }
.morse { display:inline-flex; gap:3px; align-items:center; }
.morse i,.morse b { height:5px; border-radius:2px; background:var(--accent); display:block; }
.morse i { width:5px; } .morse b { width:15px; }

/* ---- page header ---- */
.pagehead { margin:0 0 1.6rem; }
.pagehead h1 { font-size:1.55rem; margin:0; letter-spacing:.01em; font-weight:600; }
.pagehead p { margin:.25rem 0 0; color:var(--mut); font-size:.92rem; }

/* ---- stat cards ---- */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem,1fr));
  gap:1rem; margin:0 0 1.6rem; }
.stat { background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.05rem 1.15rem;
  transition:border-color var(--tr), transform var(--tr); }
.stat:hover { border-color:var(--line2); transform:translateY(-1px); }
.stat .lbl { display:flex; color:var(--mut); font-size:.78rem; text-transform:uppercase;
  letter-spacing:.08em; display:flex; align-items:center; gap:.45rem; }
.stat .lbl svg { width:15px; height:15px; color:var(--accent); }
.stat .val { display:block; font-size:1.9rem; font-weight:600; margin-top:.35rem;
  font-variant-numeric:tabular-nums; line-height:1.1; }
.stat .sub { display:block; color:var(--mut); font-size:.8rem; margin-top:.2rem; }
.stat.ok .val { color:var(--ok); } .stat.warn .val { color:var(--warn); }
.stat.crit .val { color:var(--crit); }

/* ---- panels ---- */
.panel { background:linear-gradient(180deg, var(--surface2), var(--surface));
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.1rem 1.25rem;
  margin:0 0 1.25rem; }
.panel > h2 { margin:.1rem 0 .7rem; }
.panelgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(20rem,1fr));
  gap:1.25rem; align-items:start; }
h2 { font-size:.82rem; margin:1.5rem 0 .5rem; color:var(--mut);
  text-transform:uppercase; letter-spacing:.1em; font-weight:600;
  display:flex; align-items:center; gap:.5rem; }
h2 .count { background:var(--line); color:var(--ink); border-radius:99px;
  padding:0 .5rem; font-size:.72rem; letter-spacing:0; }

/* ---- type + forms ---- */
label { display:block; margin:.85rem 0 .3rem; color:var(--mut); font-size:.9rem; }
input, select { width:100%; padding:.6rem .75rem; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--ink);
  font:inherit; transition:border-color var(--tr), box-shadow var(--tr); }
input:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(62,139,255,.22); }
button { margin-top:1.1rem; width:100%; padding:.62rem 1rem; border:0;
  border-radius:10px; background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  color:#fff; font:inherit; font-weight:600; cursor:pointer;
  transition:filter var(--tr), transform var(--tr); }
button:hover { filter:brightness(1.1); }
button:active { transform:translateY(1px); }
button.secondary { background:var(--line); color:var(--ink); }
button.secondary:hover { background:var(--line2); filter:none; }
button.ghost { background:transparent; color:var(--mut); border:1px solid var(--line);
  margin-top:0; padding:.45rem; font-size:.85rem; }
button.ghost:hover { color:var(--ink); border-color:var(--line2); filter:none; }
button.danger { background:linear-gradient(180deg,#a03040,#7a2030); }

/* ---- tables ---- */
table { width:100%; border-collapse:separate; border-spacing:0; font-size:.9rem;
  margin:.4rem 0 .4rem; }
.panel table { margin:0; }
th, td { text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--line); }
tr:last-child td { border-bottom:0; }
th { color:var(--mut); font-weight:600; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.08em; }
td { transition:background var(--tr); }
table tr:hover td { background:rgba(62,139,255,.045); }
td .main { display:block; font-weight:500; }
td .meta { display:block; color:var(--mut); font-size:.78rem; margin-top:.1rem; }
.mono { display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:9px; font-weight:600; font-size:.8rem; color:var(--accent);
  background:rgba(62,139,255,.12); border:1px solid rgba(62,139,255,.25);
  margin-right:.6rem; vertical-align:middle; }
.cell { display:flex; align-items:center; }

/* ---- pills, dots, notices ---- */
.pill { padding:.14rem .6rem; border:1px solid var(--line); border-radius:99px;
  font-size:.78rem; font-weight:600; white-space:nowrap; }
.pill.ok { color:var(--ok); border-color:rgba(47,209,128,.35); background:rgba(47,209,128,.08); }
.pill.warn { color:var(--warn); border-color:rgba(255,180,84,.35); background:rgba(255,180,84,.08); }
.pill.crit { color:var(--crit); border-color:rgba(255,122,138,.35); background:rgba(255,122,138,.08); }
.dot { display:inline-block; width:8px; height:8px; border-radius:99px;
  margin-right:.45rem; vertical-align:1px; }
.dot.ok { background:var(--ok); box-shadow:0 0 8px rgba(47,209,128,.6); }
.dot.warn { background:var(--warn); box-shadow:0 0 8px rgba(255,180,84,.6); }
.dot.crit { background:var(--crit); box-shadow:0 0 8px rgba(255,122,138,.6); }
tr.warn td { color:var(--warn); } tr.crit td { color:var(--crit); }
.err { background:rgba(255,122,138,.09); border:1px solid rgba(255,122,138,.35);
  color:#ffb4c0; padding:.6rem .9rem; border-radius:10px; }
.okmsg { background:rgba(47,209,128,.09); border:1px solid rgba(47,209,128,.3);
  color:#7fe0a8; padding:.6rem .9rem; border-radius:10px; }
.muted { color:var(--mut); font-size:.85rem; }
.uri { word-break:break-all; }
.secretbox code { background:var(--bg); padding:.4rem .7rem; border-radius:10px;
  border:1px solid var(--line2); font-size:1.1rem; letter-spacing:.04em; }
.empty { text-align:center; color:var(--mut); padding:2.2rem 1rem; }
.empty svg { width:26px; height:26px; opacity:.5; display:block; margin:0 auto .5rem; }

/* ---- inline row actions ---- */
.actions { white-space:nowrap; text-align:right; }
.actions form { display:inline-flex; gap:.35rem; align-items:center; margin:0 0 0 .5rem; }
button.mini { width:auto; margin:0; padding:.3rem .7rem; font-size:.78rem;
  border-radius:8px; }
.mini-in { width:4.8rem; padding:.3rem .45rem; font-size:.78rem; border-radius:8px; }
.mini-ck { font-size:.72rem; color:var(--mut); display:inline-flex; gap:.25rem;
  align-items:center; }
.mini-ck input { width:auto; }

@media (max-width: 780px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; align-items:center;
    flex-wrap:wrap; gap:.8rem; }
  .side nav { flex-direction:row; flex-wrap:wrap; }
  .side-foot { margin-top:0; margin-left:auto; flex-direction:row; align-items:center; }
  main.content { padding:1.3rem; }
  .actions { text-align:left; }
}

/* ---- 15.3a-3 responsive round 2 ---- */
.panel { overflow-x:auto; }               /* tables scroll inside their panel */
@media (max-width: 640px) {
  main.card { padding:1.5rem 1.2rem; margin-top:4vh; }
  .pagehead h1 { font-size:1.3rem; }
  .stats { grid-template-columns:repeat(auto-fit, minmax(8.5rem,1fr)); gap:.7rem; }
  .stat { padding:.8rem .9rem; } .stat .val { font-size:1.5rem; }
  th, td { padding:.5rem .5rem; }
  .actions { white-space:normal; }
  .actions form { margin:.15rem .3rem .15rem 0; }
  main.content { padding:1rem .9rem 2rem; }
}
.qr { text-align:center; margin:.8rem 0; }
.qr img { border-radius:12px; border:6px solid #fff; background:#fff; }
.grantchip { display:inline-flex; align-items:center; gap:.2rem; margin:0 .35rem .25rem 0; }
.grantchip button { padding:.05rem .4rem; }
.grantadd { display:flex; gap:.3rem; align-items:center; margin-top:.35rem; flex-wrap:wrap; }
.grantadd .wv { width:auto; }
.formbox { max-width:34rem; }
.formbox button { max-width:100%; }
.panel td { word-break:break-word; }
td .pill { white-space:nowrap; }
.loglines { margin:0; font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--mut); white-space:pre-wrap; word-break:break-all; max-height:60vh; overflow:auto; }
.pagehead a { color:var(--mut); text-decoration:none; }
.pagehead a.on-tab { color:var(--accent); font-weight:600; }