/* Layout and components shared by every tab: header, buttons, tables, status dots, log viewer, toast. */
:root { --bg:#0a0d14; --panel:#121620; --panel2:#161b26; --line:#222836; --text:#e6e8ee; --dim:#8a92a3;
        --green:#3fb950; --red:#f85149; --yellow:#d29922; --blue:#58a6ff; --grey:#6e7681; }
* { box-sizing: border-box; }
body { margin:0; background:radial-gradient(1200px 500px at 15% -10%, #16213a 0%, transparent 60%), var(--bg); background-attachment:fixed;
       color:var(--text); font:13.5px/1.4 Inter,-apple-system,system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
header { position:sticky; top:0; z-index:5; backdrop-filter:blur(12px); background:#0f131cd9 !important; }
header h1 { background:linear-gradient(90deg,#fff,#9db4ff); -webkit-background-clip:text; background-clip:text; color:transparent; font-size:16px !important; }
.card { box-shadow:0 10px 40px #0006; border-radius:14px !important; }
tr.group td { border-left:3px solid #3b5bdb; }
tbody tr:not(.group) td { transition:background .12s; }
a { color:var(--blue); text-decoration:none; } a:hover { text-decoration:underline; }
.wrap { max-width:1500px; margin:0 auto; padding:0 20px; }

header { border-bottom:1px solid var(--line); background:var(--panel); }
header .wrap { display:flex; align-items:center; gap:14px; height:56px; flex-wrap:wrap; }
header h1 { font-size:15px; margin:0; font-weight:600; letter-spacing:.2px; }
.pill { font-size:12px; padding:2px 10px; border-radius:999px; background:#1f2733; border:1px solid var(--line); color:var(--dim); }
.pill b { color:var(--text); font-weight:600; }
.pill.ok b { color:var(--green); }
/* Local dev tab: its title, how many services are up, and the start / restart / stop all buttons */
.lhead { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
.lhead h2.sect { margin:0; }
.lhead .hint { color:var(--dim); font-size:12px; }
.sp { flex:1; }

button { background:#202632; color:var(--text); border:1px solid #2f3645; border-radius:8px; padding:6px 13px;
         font:inherit; font-size:12.5px; font-weight:500; cursor:pointer; white-space:nowrap; transition:background .12s, border-color .12s, color .12s, transform .08s;
         display:inline-flex; align-items:center; gap:6px; }
button:hover:not(:disabled) { background:#2a3140; }
button:active:not(:disabled) { transform:scale(.94); }
button:disabled { opacity:.3; cursor:default; }
button svg, .ib svg { width:15px; height:15px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
button.primary { background:linear-gradient(135deg,#238636,#2ea043); border-color:#2ea043; color:#fff; }
button.primary:hover:not(:disabled) { background:linear-gradient(135deg,#2ea043,#3fb950); }
button.danger { color:#ff8b85; }
button.danger:hover:not(:disabled) { background:#4a1c1f; border-color:var(--red); }
.ib { width:32px; height:32px; padding:0; justify-content:center; background:transparent; border-color:transparent; color:var(--dim); }
.ib:hover:not(:disabled) { background:#262d3b; border-color:#323a4c; color:var(--text); }
.ib.start { color:var(--green); } .ib.start:hover:not(:disabled) { background:#12301c; border-color:#1f5a30; color:#56d364; }
.ib.restart { color:var(--blue); } .ib.restart:hover:not(:disabled) { background:#122339; border-color:#264060; color:#79b8ff; }
.ib.stop { color:var(--red); } .ib.stop:hover:not(:disabled) { background:#3a181b; border-color:#6b2327; color:#ff7b72; }
.ib.logs:hover:not(:disabled) { color:#d2a8ff; background:#231a33; border-color:#3d2d5c; }
.ib.fill { fill:currentColor; }
.ib.fill svg { fill:currentColor; stroke:none; }

main { padding:18px 0 40px; }
.card { background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
table { width:100%; border-collapse:collapse; table-layout:fixed; }
col.c-name { width:auto; } col.c-status { width:150px; } col.c-port { width:64px; } col.c-pid { width:84px; }
col.c-up { width:84px; } col.c-env { width:250px; } col.c-auto { width:176px; } col.c-act { width:152px; }
select { background:#0d1117; color:var(--text); border:1px solid #30363d; border-radius:6px; padding:3px 6px; font:inherit; font-size:12.5px; max-width:118px; }
select:disabled { opacity:.7; }
.env { display:flex; align-items:center; gap:7px; }
.env .file { font-family:ui-monospace,Menlo,monospace; font-size:12px; }
.chip.db { flex:none; }
.chip.db.local { color:var(--yellow); border-color:#5a4a1d; }
.chip.db.remote { color:#7ee787; border-color:#1f4a2c; }
.chip.warn { color:var(--yellow); border-color:#5a4a1d; }
th, td { padding:0 12px; height:46px; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
         border-bottom:1px solid var(--line); vertical-align:middle; }
thead th { height:34px; color:var(--dim); font-weight:500; font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
           background:var(--panel2); }
tr.group td { height:30px; background:var(--panel2); color:var(--dim); font-size:11.5px; font-weight:600;
              text-transform:uppercase; letter-spacing:.07em; border-top:1px solid var(--line); }
tbody tr:not(.group):hover td { background:#181d28; }
tbody tr:last-child td { border-bottom:none; }
.dim { color:var(--dim); }

.name { display:flex; align-items:center; gap:8px; min-width:0; }
.name strong { font-weight:600; flex:none; }
.name .link { font-size:12px; flex:none; }
.chip { font-size:11px; padding:1px 8px; border-radius:999px; border:1px solid var(--line); color:var(--dim); flex:none; }
.chip.pub { color:var(--blue); border-color:#264060; max-width:300px; overflow:hidden; text-overflow:ellipsis; }
.note { color:var(--dim); font-size:12px; flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.85; }

.st { display:inline-flex; align-items:center; gap:8px; font-weight:500; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--grey); flex:none; }
.up .dot { background:var(--green); box-shadow:0 0 7px var(--green); } .up .st { color:var(--green); }
.down .dot { background:var(--red); } .down .st { color:#ff8b85; }
.crashed .dot { background:var(--red); box-shadow:0 0 7px var(--red); } .crashed .st { color:#ff8b85; }
.starting .dot, .no-port .dot { background:var(--yellow); animation:pulse 1.2s infinite; } .starting .st, .no-port .st { color:var(--yellow); }
.external .dot { background:var(--blue); } .external .st { color:var(--blue); }
@keyframes pulse { 50% { opacity:.35; } }

label.t { display:inline-flex; align-items:center; gap:5px; color:var(--dim); font-size:12px; margin-right:10px; cursor:pointer; }
label.t input { accent-color:#2f81f7; margin:0; }
.acts { display:flex; gap:6px; }

#logs { display:none; margin-top:18px; }
#logs .bar { display:flex; gap:10px; align-items:center; padding:8px 12px; border-bottom:1px solid var(--line); background:var(--panel2); }
#logs .bar input[type=text] { background:#0d1117; border:1px solid #30363d; color:var(--text); border-radius:6px; padding:4px 8px; width:220px; font:inherit; }
#logfile { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
#logbody { height:46vh; overflow:auto; padding:8px 12px; font:12px/1.55 ui-monospace,Menlo,monospace; white-space:pre-wrap; word-break:break-all; background:#0b0e14; }
.l-err { color:#ff7b72; } .l-warn { color:#e3b341; } .l-dash { color:var(--blue); }

#toast { position:fixed; right:16px; bottom:16px; background:#202632; border:1px solid #2f3645; padding:8px 14px; border-radius:8px; display:none; box-shadow:0 6px 20px #0008; }