admin/deploy-felhom-compose
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restructured files, and updated for build outside

Browse Source
This commit is contained in:
authentik Default Admin
2026-02-13 19:10:35 +01:00
parent f72bb57eda
commit e9dde0a340
14 changed files with 347 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
controller/internal/web/templates.go
+540
View File
@@ -0,0 +1,540 @@
package web
// All HTML templates and CSS are embedded as Go strings.
// Compiled into the binary — zero external file dependencies at runtime.
// As the UI grows, switch to go:embed for easier editing.
const allTemplates = layoutTmpl + dashboardTmpl + stacksTmpl + loginTmpl + logsTmpl + deployTmpl
const layoutTmpl = `
{{define "layout_start"}}
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Title}} — Felhom</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<nav class="sidebar">
<div class="sidebar-header">
<h1 class="logo">☁ Felhom</h1>
<span class="customer-name">{{.CustomerName}}</span>
</div>
<ul class="nav-links">
<li><a href="/" class="{{if eq .Page "dashboard"}}active{{end}}">📊 Vezérlőpult</a></li>
<li><a href="/stacks" class="{{if eq .Page "stacks"}}active{{end}}">📦 Alkalmazások</a></li>
</ul>
<div class="sidebar-footer">
<span class="version">v{{.Version}}</span>
<a href="/logout" class="logout-link">Kijelentkezés ↗</a>
</div>
</nav>
<main class="content">
{{end}}
{{define "layout_end"}}
</main>
<script>
async function stackAction(name, action) {
const btn = event.currentTarget;
const origText = btn.textContent;
btn.disabled = true;
btn.textContent = 'Folyamatban...';
btn.classList.add('loading');
try {
const resp = await fetch('/api/stacks/' + name + '/' + action, {
method: 'POST',
headers: {'Content-Type': 'application/json'}
});
const data = await resp.json();
if (!data.ok) {
alert('Hiba: ' + (data.error || 'Ismeretlen hiba'));
btn.textContent = origText;
btn.disabled = false;
btn.classList.remove('loading');
return;
}
window.location.reload();
} catch (err) {
alert('Hálózati hiba: ' + err.message);
btn.textContent = origText;
btn.disabled = false;
btn.classList.remove('loading');
}
}
</script>
</body>
</html>
{{end}}
`
const dashboardTmpl = `
{{define "dashboard"}}
{{template "layout_start" .}}
<div class="page-header">
<h2>Vezérlőpult</h2>
<span class="domain-badge">{{.Domain}}</span>
</div>
<div class="stats-grid">
<div class="stat-card stat-running">
<div class="stat-value">{{.RunningCount}}</div>
<div class="stat-label">Futó alkalmazás</div>
</div>
<div class="stat-card stat-stopped">
<div class="stat-value">{{.StoppedCount}}</div>
<div class="stat-label">Leállítva</div>
</div>
<div class="stat-card stat-total">
<div class="stat-value">{{.TotalCount}}</div>
<div class="stat-label">Összes alkalmazás</div>
</div>
</div>
<h3>Alkalmazások állapota</h3>
<div class="stack-list">
{{range .Stacks}}
<div class="stack-card stack-state-{{stateColor .State}}">
<div class="stack-info">
<img class="stack-logo" src="{{logoURL .Meta.Slug}}"
alt="{{.Meta.DisplayName}}" onerror="this.onerror=function(){this.style.display='none'};this.src='{{logoPNGURL .Meta.Slug}}'">
<div>
<strong class="stack-name">{{.Meta.DisplayName}}</strong>
{{if .Meta.Description}}<span class="stack-desc">{{.Meta.Description}}</span>{{end}}
</div>
</div>
<div class="stack-actions">
<span class="stack-state-label">{{stateLabel .State}}</span>
{{if .Protected}}
<span class="badge badge-protected">🔒 Védett</span>
{{else if not .Deployed}}
<a href="/stacks/{{.Name}}/deploy" class="btn btn-sm btn-primary">🚀 Telepítés</a>
{{else}}
{{if eq (stateStr .State) "running"}}
<button class="btn btn-sm btn-warning" onclick="stackAction('{{.Name}}', 'restart')">↻</button>
<button class="btn btn-sm btn-danger" onclick="stackAction('{{.Name}}', 'stop')">■</button>
{{else}}
<button class="btn btn-sm btn-success" onclick="stackAction('{{.Name}}', 'start')">▶</button>
{{end}}
<a href="/stacks/{{.Name}}/logs" class="btn btn-sm btn-outline">📋</a>
{{end}}
</div>
</div>
{{else}}
<div class="empty-state">
<p>Nincs elérhető alkalmazás.</p>
</div>
{{end}}
</div>
{{template "layout_end" .}}
{{end}}
`
const stacksTmpl = `
{{define "stacks"}}
{{template "layout_start" .}}
<div class="page-header">
<h2>Alkalmazások</h2>
<span class="domain-badge">{{.Domain}}</span>
</div>
<div class="stack-grid">
{{range .Stacks}}
<div class="stack-detail-card stack-state-{{stateColor .State}}">
<div class="stack-detail-header">
<div class="stack-title-row">
<img class="stack-logo-lg" src="{{logoURL .Meta.Slug}}"
alt="" onerror="this.onerror=function(){this.style.display='none'};this.src='{{logoPNGURL .Meta.Slug}}'">
<div>
<h3>{{.Meta.DisplayName}}</h3>
{{if .Meta.Subdomain}}
<a class="subdomain-link" href="https://{{.Meta.Subdomain}}.{{$.Domain}}" target="_blank">
{{.Meta.Subdomain}}.{{$.Domain}} ↗
</a>
{{end}}
</div>
</div>
<span class="stack-state-badge state-{{stateColor .State}}">{{stateLabel .State}}</span>
</div>
{{if .Meta.Description}}
<p class="stack-detail-desc">{{.Meta.Description}}</p>
{{end}}
<div class="stack-meta-badges">
{{if .Meta.Resources.RAM}}<span class="meta-badge">💾 {{.Meta.Resources.RAM}}</span>{{end}}
{{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">🥧 Pi kompatibilis</span>{{end}}
{{if .Meta.Resources.NeedsHDD}}<span class="meta-badge">💿 HDD szükséges</span>{{end}}
</div>
{{if .Containers}}
<div class="container-list">
{{range .Containers}}
<div class="container-row">
<span class="container-name">{{.Name}}</span>
<span class="container-status state-text-{{stateColor .State}}">{{.Status}}</span>
</div>
{{end}}
</div>
{{end}}
<div class="stack-detail-actions">
{{if .Protected}}
<span class="badge badge-protected">🔒 Védett rendszerkomponens</span>
{{else if not .Deployed}}
<a href="/stacks/{{.Name}}/deploy" class="btn btn-primary">🚀 Telepítés</a>
<a href="{{appPageURL .Meta.Slug}}" target="_blank" class="btn btn-outline">ℹ️ Részletek</a>
{{else}}
{{if eq (stateStr .State) "running"}}
<button class="btn btn-success" onclick="stackAction('{{.Name}}', 'update')">⬆ Frissítés</button>
<button class="btn btn-warning" onclick="stackAction('{{.Name}}', 'restart')">↻ Újraindítás</button>
<button class="btn btn-danger" onclick="stackAction('{{.Name}}', 'stop')">■ Leállítás</button>
{{else}}
<button class="btn btn-success" onclick="stackAction('{{.Name}}', 'start')">▶ Indítás</button>
{{end}}
<a href="/stacks/{{.Name}}/logs" class="btn btn-outline">📋 Naplók</a>
<a href="{{appPageURL .Meta.Slug}}" target="_blank" class="btn btn-outline">ℹ️ Részletek</a>
{{end}}
</div>
</div>
{{end}}
</div>
{{template "layout_end" .}}
{{end}}
`
const deployTmpl = `
{{define "deploy"}}
{{template "layout_start" .}}
<div class="page-header">
<a href="/stacks" class="btn btn-sm btn-outline">← Vissza</a>
<h2>{{.Meta.DisplayName}} — Telepítés</h2>
</div>
<div class="deploy-container">
<div class="deploy-info">
<img class="deploy-logo" src="{{.LogoURL}}" alt="" onerror="this.onerror=function(){this.style.display='none'};this.src='{{.LogoPNGURL}}'">
<div>
<h3>{{.Meta.DisplayName}}</h3>
{{if .Meta.Description}}<p>{{.Meta.Description}}</p>{{end}}
<div class="stack-meta-badges">
{{if .Meta.Resources.RAM}}<span class="meta-badge">💾 {{.Meta.Resources.RAM}}</span>{{end}}
{{if .Meta.Resources.PiCompatible}}<span class="meta-badge meta-badge-ok">🥧 Pi kompatibilis</span>{{end}}
{{if .Meta.Resources.NeedsHDD}}<span class="meta-badge">💿 HDD szükséges</span>{{end}}
</div>
<a href="{{.AppPageURL}}" target="_blank" class="btn btn-sm btn-outline" style="margin-top:0.5rem">
ℹ️ Részletes leírás, képernyőképek
</a>
</div>
</div>
{{if .AlreadyDeployed}}
<div class="alert alert-info">
Ez az alkalmazás már telepítve van. Az alábbi beállítások csak olvashatók.
</div>
{{end}}
<form id="deploy-form" class="deploy-form">
{{if .AutoFields}}
<div class="form-section">
<h4>🔒 Automatikusan generált értékek</h4>
<p class="form-section-desc">Ezek az értékek automatikusan létrejönnek a telepítéskor.</p>
{{range .AutoFields}}
<div class="form-group form-group-auto">
<label>{{.Label}}</label>
<span class="auto-generated-badge">✓ Automatikusan generálva</span>
</div>
{{end}}
</div>
{{end}}
{{if .UserFields}}
<div class="form-section">
<h4>⚙️ Beállítások</h4>
{{range .UserFields}}
<div class="form-group">
<label for="field-{{.EnvVar}}">
{{.Label}}
{{if .Required}}<span class="required">*</span>{{end}}
{{if .LockedAfterDeploy}}<span class="locked-hint">🔒 telepítés után nem módosítható</span>{{end}}
</label>
{{if eq .Type "select"}}
<select id="field-{{.EnvVar}}" name="{{.EnvVar}}" class="form-control"
{{if $.AlreadyDeployed}}disabled{{end}}>
{{range .Options}}
<option value="{{.Value}}">{{.Label}}</option>
{{end}}
</select>
{{else if eq .Type "password"}}
<div class="input-with-button">
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
class="form-control" value="{{.Default}}"
placeholder="{{.Placeholder}}"
{{if $.AlreadyDeployed}}disabled{{end}}>
<button type="button" class="btn btn-sm btn-outline"
onclick="generatePassword('field-{{.EnvVar}}')">🎲 Generálás</button>
</div>
{{else if eq .Type "boolean"}}
<label class="toggle">
<input type="checkbox" id="field-{{.EnvVar}}" name="{{.EnvVar}}" value="true"
{{if $.AlreadyDeployed}}disabled{{end}}>
<span class="toggle-label">Igen</span>
</label>
{{else}}
<input type="text" id="field-{{.EnvVar}}" name="{{.EnvVar}}"
class="form-control" value="{{.Default}}"
placeholder="{{.Placeholder}}"
{{if .Required}}required{{end}}
{{if $.AlreadyDeployed}}disabled{{end}}>
{{end}}
{{if .Description}}
<span class="form-hint">{{.Description}}</span>
{{end}}
</div>
{{end}}
</div>
{{end}}
{{if not .AlreadyDeployed}}
<div class="deploy-actions">
<button type="submit" class="btn btn-primary btn-lg">🚀 Telepítés indítása</button>
<a href="/stacks" class="btn btn-outline">Mégsem</a>
</div>
{{end}}
</form>
</div>
<script>
function generatePassword(fieldId) {
const chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
let pass = '';
const arr = new Uint8Array(16);
crypto.getRandomValues(arr);
for (let i = 0; i < 16; i++) {
pass += chars[arr[i] % chars.length];
}
document.getElementById(fieldId).value = pass;
}
document.getElementById('deploy-form').addEventListener('submit', async function(e) {
e.preventDefault();
const btn = e.target.querySelector('[type=submit]');
const origText = btn.textContent;
btn.disabled = true;
btn.textContent = 'Telepítés folyamatban...';
const values = {};
const inputs = e.target.querySelectorAll('input, select');
inputs.forEach(function(el) {
if (el.name && !el.disabled) {
if (el.type === 'checkbox') {
values[el.name] = el.checked ? 'true' : 'false';
} else {
values[el.name] = el.value;
}
}
});
try {
const resp = await fetch('/api/stacks/{{.Stack.Name}}/deploy', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({values: values})
});
const data = await resp.json();
if (!data.ok) {
alert('Hiba: ' + data.error);
btn.textContent = origText;
btn.disabled = false;
return;
}
alert('Sikeres telepítés! ✓');
window.location.href = '/stacks';
} catch (err) {
alert('Hálózati hiba: ' + err.message);
btn.textContent = origText;
btn.disabled = false;
}
});
</script>
{{template "layout_end" .}}
{{end}}
`
const loginTmpl = `
{{define "login"}}
<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bejelentkezés — Felhom</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body class="login-body">
<div class="login-card">
<h1 class="logo">☁ Felhom</h1>
<p class="login-subtitle">{{.CustomerName}}</p>
{{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
<form method="POST" action="/login">
<div class="form-group">
<label for="password">Jelszó</label>
<input type="password" id="password" name="password" required autofocus
placeholder="Adja meg a jelszavát" class="form-control">
</div>
<button type="submit" class="btn btn-primary btn-full">Bejelentkezés</button>
</form>
<p class="login-footer">Felhom — Otthoni szerver kezelés<br>
<a href="https://felhom.eu" target="_blank">felhom.eu</a></p>
</div>
</body>
</html>
{{end}}
`
const logsTmpl = `
{{define "logs"}}
{{template "layout_start" .}}
<div class="page-header">
<a href="/stacks" class="btn btn-sm btn-outline">← Vissza</a>
<h2>{{.Stack.Meta.DisplayName}} — Naplók</h2>
</div>
<div class="logs-container">
<pre class="logs-output">{{.Logs}}</pre>
</div>
<div class="logs-actions">
<button class="btn btn-outline" onclick="window.location.reload()">🔄 Frissítés</button>
</div>
{{template "layout_end" .}}
{{end}}
`
// CSS is defined in a separate const for readability.
// Served at /static/style.css
const cssContent = `
:root {
--bg:#f8f9fa; --sidebar-bg:#1a1f36; --sidebar-text:#e2e8f0;
--card-bg:#fff; --text:#1a202c; --text-muted:#718096; --border:#e2e8f0;
--green:#38a169; --green-light:#c6f6d5; --red:#e53e3e; --red-light:#fed7d7;
--yellow:#d69e2e; --yellow-light:#fefcbf; --blue:#3182ce; --blue-light:#bee3f8;
--gray:#a0aec0; --gray-light:#edf2f7; --radius:8px; --shadow:0 1px 3px rgba(0,0,0,.1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
.sidebar{width:240px;background:var(--sidebar-bg);color:var(--sidebar-text);display:flex;flex-direction:column;position:fixed;height:100vh;overflow-y:auto}
.sidebar-header{padding:1.5rem;border-bottom:1px solid rgba(255,255,255,.1)}
.logo{font-size:1.5rem;font-weight:700;color:#fff}
.customer-name{display:block;font-size:.85rem;color:var(--gray);margin-top:.25rem}
.nav-links{list-style:none;padding:1rem 0;flex:1}
.nav-links a{display:block;padding:.75rem 1.5rem;color:var(--sidebar-text);text-decoration:none;font-size:.95rem;transition:background .15s}
.nav-links a:hover{background:rgba(255,255,255,.08)}
.nav-links a.active{background:rgba(255,255,255,.12);border-left:3px solid var(--blue)}
.sidebar-footer{padding:1rem 1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;align-items:center;font-size:.8rem}
.version{color:var(--gray)} .logout-link{color:var(--gray);text-decoration:none} .logout-link:hover{color:#fff}
.content{margin-left:240px;padding:2rem;flex:1;max-width:1200px}
.page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
.page-header h2{font-size:1.5rem;font-weight:600}
.domain-badge{background:var(--blue-light);color:var(--blue);padding:.25rem .75rem;border-radius:999px;font-size:.8rem;font-weight:500}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:2rem}
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border-left:4px solid var(--gray)}
.stat-running{border-left-color:var(--green)} .stat-stopped{border-left-color:var(--red)} .stat-total{border-left-color:var(--blue)}
.stat-value{font-size:2rem;font-weight:700} .stat-label{color:var(--text-muted);font-size:.85rem;margin-top:.25rem}
.stack-list{display:flex;flex-direction:column;gap:.5rem}
.stack-card{background:var(--card-bg);border-radius:var(--radius);padding:1rem 1.25rem;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:center;border-left:4px solid var(--gray)}
.stack-state-green{border-left-color:var(--green)} .stack-state-red{border-left-color:var(--red)} .stack-state-yellow{border-left-color:var(--yellow)} .stack-state-gray{border-left-color:var(--gray)}
.stack-info{display:flex;align-items:center;gap:.75rem}
.stack-logo{width:32px;height:32px;border-radius:6px;object-fit:contain;background:#1c2128;padding:4px}
.stack-logo-lg{width:48px;height:48px;border-radius:8px;object-fit:contain;background:#1c2128;padding:6px}
.stack-name{font-size:1rem} .stack-desc{display:block;font-size:.8rem;color:var(--text-muted)}
.stack-actions{display:flex;align-items:center;gap:.5rem} .stack-state-label{font-size:.8rem;color:var(--text-muted);margin-right:.5rem}
.stack-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1rem}
.stack-detail-card{background:var(--card-bg);border-radius:var(--radius);padding:1.25rem;box-shadow:var(--shadow);border-top:4px solid var(--gray)}
.stack-detail-card.stack-state-green{border-top-color:var(--green)} .stack-detail-card.stack-state-red{border-top-color:var(--red)}
.stack-detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}
.stack-title-row{display:flex;align-items:center;gap:.75rem}
.subdomain-link{font-size:.8rem;color:var(--blue);text-decoration:none} .subdomain-link:hover{text-decoration:underline}
.stack-state-badge{padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:600;white-space:nowrap}
.state-green{background:var(--green-light);color:var(--green)} .state-red{background:var(--red-light);color:var(--red)}
.state-yellow{background:var(--yellow-light);color:var(--yellow)} .state-gray{background:var(--gray-light);color:var(--gray)}
.state-text-green{color:var(--green)} .state-text-red{color:var(--red)}
.stack-detail-desc{color:var(--text-muted);font-size:.85rem;margin-bottom:.75rem}
.stack-meta-badges{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.meta-badge{background:var(--gray-light);color:var(--text-muted);padding:.15rem .5rem;border-radius:6px;font-size:.75rem}
.meta-badge-ok{background:var(--green-light);color:var(--green)}
.container-list{margin:.75rem 0} .container-list h4{font-size:.8rem;color:var(--text-muted);margin-bottom:.4rem}
.container-row{display:flex;justify-content:space-between;font-size:.8rem;padding:.2rem 0}
.container-name{font-family:monospace} .container-status{font-size:.75rem}
.stack-detail-actions{display:flex;gap:.5rem;margin-top:1rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.3rem;padding:.5rem 1rem;border:none;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:opacity .15s,transform .1s;text-decoration:none;color:#fff}
.btn:hover{opacity:.9} .btn:active{transform:scale(.97)} .btn:disabled{opacity:.5;cursor:not-allowed} .btn.loading{opacity:.6}
.btn-sm{padding:.3rem .6rem;font-size:.8rem} .btn-lg{padding:.65rem 1.5rem;font-size:1rem} .btn-full{width:100%;justify-content:center}
.btn-primary{background:var(--blue)} .btn-success{background:var(--green)} .btn-warning{background:var(--yellow);color:#1a202c} .btn-danger{background:var(--red)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)} .btn-outline:hover{background:var(--gray-light)}
.badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:999px;font-size:.75rem;font-weight:500}
.badge-protected{background:var(--gray-light);color:var(--text-muted)}
/* Deploy page */
.deploy-container{max-width:700px}
.deploy-info{display:flex;gap:1rem;align-items:flex-start;background:var(--card-bg);padding:1.25rem;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.5rem}
.deploy-logo{width:64px;height:64px;border-radius:12px;object-fit:contain;background:#1c2128;padding:8px;flex-shrink:0}
.deploy-info h3{font-size:1.2rem;margin-bottom:.25rem}
.deploy-info p{color:var(--text-muted);font-size:.9rem}
.deploy-form{background:var(--card-bg);padding:1.5rem;border-radius:var(--radius);box-shadow:var(--shadow)}
.form-section{margin-bottom:1.5rem}
.form-section h4{font-size:1rem;margin-bottom:.5rem}
.form-section-desc{color:var(--text-muted);font-size:.85rem;margin-bottom:.75rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.85rem;font-weight:500;margin-bottom:.4rem}
.form-group-auto{display:flex;justify-content:space-between;align-items:center;padding:.5rem .75rem;background:var(--gray-light);border-radius:6px}
.form-group-auto label{margin:0}
.auto-generated-badge{color:var(--green);font-size:.8rem;font-weight:500}
.form-control{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:6px;font-size:.9rem;background:#fff}
.form-control:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,130,206,.1)}
.form-control:disabled{background:var(--gray-light);cursor:not-allowed}
.input-with-button{display:flex;gap:.5rem}
.input-with-button .form-control{flex:1}
.form-hint{display:block;font-size:.8rem;color:var(--text-muted);margin-top:.25rem}
.required{color:var(--red)} .locked-hint{font-size:.75rem;color:var(--text-muted);font-weight:400;margin-left:.5rem}
.deploy-actions{display:flex;gap:.75rem;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--border)}
.alert{padding:.75rem;border-radius:6px;margin-bottom:1rem;font-size:.85rem}
.alert-error{background:var(--red-light);color:var(--red)} .alert-info{background:var(--blue-light);color:var(--blue)}
/* Logs */
.logs-container{background:#1a1f36;border-radius:var(--radius);padding:1rem;overflow-x:auto;margin-bottom:1rem}
.logs-output{color:#e2e8f0;font-family:'JetBrains Mono','Fira Code',monospace;font-size:.8rem;line-height:1.5;white-space:pre-wrap;word-break:break-all}
.logs-actions{display:flex;gap:.5rem}
.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}
.login-body{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(135deg,#1a1f36,#2d3748)}
.login-card{background:var(--card-bg);padding:2.5rem;border-radius:12px;box-shadow:0 4px 24px rgba(0,0,0,.15);width:100%;max-width:380px;text-align:center}
.login-card .logo{color:var(--text);margin-bottom:.25rem} .login-subtitle{color:var(--text-muted);margin-bottom:1.5rem}
.login-footer{margin-top:1.5rem;font-size:.75rem;color:var(--text-muted)} .login-footer a{color:var(--blue);text-decoration:none}
@media(max-width:768px){
.sidebar{width:100%;height:auto;position:relative}
.nav-links{display:flex;padding:0;overflow-x:auto} .nav-links a{padding:.5rem 1rem;white-space:nowrap}
.content{margin-left:0;padding:1rem} body{flex-direction:column}
.stack-card{flex-direction:column;align-items:flex-start;gap:.75rem} .stack-actions{width:100%;justify-content:flex-end}
.stack-grid{grid-template-columns:1fr} .stats-grid{grid-template-columns:repeat(3,1fr)}
.deploy-info{flex-direction:column}
}
`