/* LocalLab identity: deep navy surfaces with a cyan -> violet -> magenta accent. */
:root{
  --bg:#05070f;
  --bg-glow-1:rgba(53,230,255,.16);
  --bg-glow-2:rgba(123,92,255,.18);
  --bg-glow-3:rgba(217,77,255,.12);
  --surface:rgba(16,24,39,.82);
  --surface-solid:#101827;
  --surface2:rgba(24,34,54,.9);
  --line:rgba(120,150,220,.16);
  --line-strong:rgba(140,175,255,.32);
  --text:#e6edfb;
  --muted:#8ea0c4;
  --strong:#ffffff;
  --cyan:#35e6ff;
  --blue:#4f8bff;
  --violet:#7b5cff;
  --magenta:#d94dff;
  --accent:#4fd8ff;
  --accent-soft:rgba(79,216,255,.12);
  --ok:#3ddc97;
  --warn:#f0b64a;
  --bad:#ff6b8a;
  --radius:16px;
  --gradient:linear-gradient(120deg,var(--cyan),var(--blue) 38%,var(--violet) 72%,var(--magenta));
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:var(--text);
  font:14px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:
    radial-gradient(1100px 620px at 12% -12%,var(--bg-glow-1),transparent 60%),
    radial-gradient(900px 560px at 92% 4%,var(--bg-glow-2),transparent 62%),
    radial-gradient(800px 520px at 60% 108%,var(--bg-glow-3),transparent 60%),
    var(--bg);
  background-attachment:fixed}
.hidden{display:none!important}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
code{background:rgba(10,18,32,.75);border:1px solid var(--line);border-radius:7px;padding:1px 6px;font-size:12px;color:#cfe3ff}
h1{margin:4px 0 2px;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.02em;color:var(--strong)}
h2{margin:0 0 10px;font-size:15px;color:var(--strong)}
.small{font-size:11px}
.muted{color:var(--muted)}
.error{color:var(--bad)}

/* login */
.login{display:grid;place-items:center;min-height:100vh;padding:24px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;backdrop-filter:blur(6px);box-shadow:0 18px 40px rgba(2,6,18,.45)}
.loginbox{width:min(430px,100%);display:grid;gap:14px;position:relative}
.loginbox::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:var(--gradient);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.brandline{display:flex;gap:12px;align-items:center}
.brandline strong{display:block;color:var(--strong);font-size:15px;letter-spacing:.01em}
.brandline small{display:block;color:var(--muted);font-size:10px;letter-spacing:.22em;text-transform:uppercase}
.mark{width:40px;height:40px;flex:none;filter:drop-shadow(0 0 10px rgba(90,170,255,.45))}

/* shell */
.layout{display:grid;grid-template-columns:238px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);
  background:linear-gradient(180deg,rgba(14,21,36,.92),rgba(8,12,22,.86));
  padding:18px 14px;display:flex;flex-direction:column;gap:16px;overflow:auto;backdrop-filter:blur(8px)}
.nav{display:grid;gap:3px}
.nav button{display:flex;justify-content:space-between;align-items:center;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;color:var(--muted);border-radius:11px;
  padding:9px 12px;cursor:pointer;font:inherit;position:relative;transition:color .15s,background .15s}
.nav button:hover{background:rgba(80,140,255,.08);color:var(--text)}
.nav button.active{color:var(--strong);background:linear-gradient(90deg,rgba(53,230,255,.14),rgba(123,92,255,.14));
  border-color:var(--line-strong)}
.nav button.active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--gradient)}
.sidefoot{margin-top:auto;display:grid;gap:8px}
main{padding:26px clamp(18px,3vw,44px) 64px;min-width:0}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px}
.eyebrow{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
h1{background:linear-gradient(120deg,#ffffff,#cfe3ff 45%,#e6d6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* layout helpers */
.grid{display:grid;gap:12px}
.cols-4{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.card h3{margin:0 0 8px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.16em}
.metric{font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--strong)}
.metric.grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

/* tables */
table{width:100%;border-collapse:collapse}
th,td{padding:10px 11px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;font-size:13px}
th{color:var(--muted);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
tbody tr:hover{background:rgba(90,150,255,.05)}
tr:last-child td{border-bottom:none}
.tablewrap{border:1px solid var(--line);border-radius:12px;overflow:auto;background:rgba(9,14,26,.6)}
td .row.actions{gap:6px}
td .row.actions .btn{padding:5px 9px;font-size:12px}

/* controls */
button,input,select,textarea{font:inherit}
input,select,textarea{width:100%;background:rgba(9,14,26,.85);color:var(--text);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(90,170,255,.14)}
textarea{min-height:420px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;line-height:1.6;resize:vertical}
.btn{border:1px solid var(--line);background:rgba(24,34,54,.75);color:var(--text);
  border-radius:10px;padding:8px 13px;cursor:pointer;transition:transform .12s,border-color .15s,box-shadow .15s}
.btn:hover{border-color:var(--line-strong);box-shadow:0 0 0 3px rgba(90,170,255,.1)}
.btn:active{transform:translateY(1px)}
.btn.small{padding:5px 10px;font-size:12px}
.btn.primary{background:var(--gradient);border:none;color:#05070f;font-weight:600;
  box-shadow:0 6px 18px rgba(90,120,255,.28)}
.btn.primary:hover{box-shadow:0 8px 22px rgba(120,120,255,.36)}
.btn.danger{border-color:rgba(255,107,138,.42);color:#ffb3c4}
.btn.danger:hover{border-color:rgba(255,107,138,.7);box-shadow:0 0 0 3px rgba(255,107,138,.12)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}

/* status */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:7px;background:var(--muted)}
.dot.running,.dot.healthy{background:var(--ok);box-shadow:0 0 8px rgba(61,220,151,.7)}
.dot.exited,.dot.dead,.dot.created{background:var(--warn)}
.dot.unhealthy,.dot.restarting{background:var(--bad)}
.chip{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 10px;
  font-size:11px;color:var(--muted);background:rgba(12,20,36,.6)}
.chip.ok{border-color:rgba(61,220,151,.42);color:var(--ok)}
.chip.warn{border-color:rgba(240,182,74,.42);color:var(--warn)}
.chip.selectable{cursor:pointer;transition:border-color .15s,color .15s}
.chip.selectable:hover{border-color:var(--line-strong)}
.banner{border:1px solid rgba(240,182,74,.32);background:rgba(240,182,74,.09);color:var(--warn);
  border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:13px}
.banner.error{border-color:rgba(255,107,138,.34);background:rgba(255,107,138,.09);color:#ffb3c4}
pre{background:rgba(7,11,22,.9);border:1px solid var(--line);border-radius:12px;padding:13px;overflow:auto;
  font-size:12px;max-height:520px;margin:0;white-space:pre-wrap;word-break:break-word;color:#cfe3ff}
.toast{position:fixed;right:20px;bottom:20px;background:var(--surface-solid);border:1px solid var(--line-strong);
  border-radius:12px;padding:12px 15px;max-width:440px;box-shadow:0 18px 40px rgba(2,6,18,.6)}
.toast.error{border-color:rgba(255,107,138,.5)}
.filelist{display:grid;gap:6px}
.filelist button{text-align:left;background:transparent;border:1px solid transparent;color:var(--muted);
  border-radius:11px;padding:10px 12px;cursor:pointer;transition:background .15s,color .15s}
.filelist button:hover{background:rgba(80,140,255,.08);color:var(--text)}
.filelist button.active{border-color:var(--line-strong);color:var(--strong);
  background:linear-gradient(90deg,rgba(53,230,255,.12),rgba(123,92,255,.12))}
.secret{color:var(--muted)}
@media (max-width:820px){.layout{grid-template-columns:1fr}.side{position:static;height:auto}}