* { box-sizing: border-box; }
:root {
    --bg: #081015;
    --panel: #0f171d;
    --panel-2: #131d24;
    --text: #dce9f2;
    --muted: #8fa6b7;
    --line: #233240;
    --accent: #35d6a6;
    --accent-2: #69b8ff;
    --danger: #ff7676;
    --warning: #ffd479;
    --shadow: 0 15px 40px rgba(0,0,0,.35);
    --radius: 16px;
}
html, body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle at top, rgba(53,214,166,.08), transparent 35%), linear-gradient(180deg, #071015 0%, #091218 100%);
    color: var(--text);
    font: 15px/1.5 Inter, Segoe UI, Arial, sans-serif;
}
a { color: var(--accent-2); text-decoration: none; }
a:hover { opacity: .9; }
.site-shell { min-height: 100vh; }
.topbar {
    display:flex; align-items:center; justify-content:space-between; gap:20px;
    padding:18px 24px; border-bottom:1px solid rgba(255,255,255,.05); backdrop-filter:blur(8px);
    position:sticky; top:0; z-index:10; background:rgba(7, 16, 21, .92);
}
.brand { display:flex; align-items:center; gap:14px; }
.brand-mark {
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:#041014; font-weight:800; letter-spacing:.08em;
}
.brand-title { font-size:1.05rem; font-weight:700; }
.brand-subtitle { color:var(--muted); font-size:.84rem; }
.topnav { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.inline-form { display:inline; }
.link-button { border:0; background:transparent; color:var(--accent-2); cursor:pointer; font:inherit; }
.page-wrap { width:min(1220px, calc(100% - 32px)); margin:28px auto 80px; }
.panel {
    background:linear-gradient(180deg, rgba(19,29,36,.92), rgba(12,20,26,.96));
    border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px;
}
.hero-grid, .dashboard-grid, .feature-grid, .metric-grid, .catalog-grid, .upgrade-grid {
    display:grid; gap:18px;
}
.hero-grid { grid-template-columns:2fr 1fr; margin-bottom:18px; }
.dashboard-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.feature-grid, .catalog-grid, .upgrade-grid { grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.metric-grid { grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); margin-top:16px; }
.compact-grid { grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); }
.span-2 { grid-column: span 2; }
.hero-panel h1, .auth-card h1, .dashboard-grid h1 { margin:6px 0 10px; line-height:1.1; font-size:clamp(1.8rem, 3vw, 2.8rem); }
.hero-copy { max-width:720px; color:#c5d4de; }
.hero-actions, .section-actions { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.eyebrow { margin:0; color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.76rem; font-weight:700; }
.btn {
    display:inline-flex; align-items:center; justify-content:center; min-height:44px; border-radius:12px; padding:0 18px;
    border:1px solid var(--line); color:var(--text); background:rgba(255,255,255,.02); transition:.18s ease; cursor:pointer;
}
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:linear-gradient(135deg, rgba(53,214,166,.18), rgba(105,184,255,.16)); border-color:rgba(53,214,166,.4); }
.stat-list, .notification-list, .software-list, .process-list { list-style:none; padding:0; margin:0; }
.stat-list li, .notification-list li, .software-list li { display:flex; justify-content:space-between; gap:16px; border-bottom:1px solid rgba(255,255,255,.05); padding:12px 0; }
.notification-list li { flex-direction:column; }
.software-list li > div { display:grid; }
.feature-card, .metric-card { border-radius:14px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); padding:16px; }
.metric-card span, .muted, .software-list li span { color:var(--muted); }
.auth-wrap { display:grid; place-items:center; min-height:calc(100vh - 180px); }
.auth-card { width:min(560px, 100%); }
.form-grid, .compact-form { display:grid; gap:14px; margin-top:18px; }
.compact-form { margin-top:12px; }
.form-grid label { display:grid; gap:8px; }
input, button {
    min-height:46px; border-radius:12px; border:1px solid var(--line); background:rgba(0,0,0,.22); color:var(--text); padding:0 14px; outline:none;
}
button.btn { background:rgba(255,255,255,.02); }
input:focus { border-color:rgba(105,184,255,.5); box-shadow:0 0 0 3px rgba(105,184,255,.12); }
.flash { margin-bottom:16px; border-radius:12px; padding:14px 16px; border:1px solid; }
.flash-success { background:rgba(53,214,166,.08); border-color:rgba(53,214,166,.3); }
.flash-error { background:rgba(255,118,118,.08); border-color:rgba(255,118,118,.3); }
.data-table { width:100%; border-collapse:collapse; }
.data-table th, .data-table td { text-align:left; padding:12px 10px; border-bottom:1px solid rgba(255,255,255,.05); }
.data-table th { color:var(--muted); font-weight:600; }
.process-board { display:grid; gap:14px; }
.process-card { border-radius:14px; padding:16px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.02); }
.process-card__head, .process-card__meta { display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.process-card__meta { margin-top:10px; color:var(--muted); font-size:.92rem; }
.progress-bar { width:100%; height:10px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; margin-top:12px; }
.progress-bar span { display:block; height:100%; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
.status-completed { border-color:rgba(53,214,166,.25); }
.status-running { border-color:rgba(105,184,255,.25); }
.status-queued { border-color:rgba(255,212,121,.25); }
@media (max-width: 900px) {
    .hero-grid, .dashboard-grid { grid-template-columns:1fr; }
    .span-2 { grid-column:auto; }
    .topbar { padding:16px; }
}

.data-table{width:100%;border-collapse:collapse}.data-table th,.data-table td{padding:10px;border-bottom:1px solid rgba(255,255,255,.08);text-align:left}.stack-list{display:grid;gap:12px}.card-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(255,255,255,.02)}.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:#1b2a33;color:#cfe8ff;font-size:12px}.process-card .compact-form{margin-top:12px}
