/* SparkPanel-aanvullingen op site.css */
.panel-main{padding:48px 0 80px;min-height:calc(100vh - 72px - 220px)}
.panel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.panel-head h1{font-size:clamp(28px,4vw,38px);margin:8px 0 0}
.svc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.svc{display:flex;flex-direction:column;gap:10px}
.svc h3{font-size:19px;margin:0}
.svc .meta{color:var(--muted);font-size:14px}
.badge{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 9px;border-radius:999px;border:1px solid var(--line2);color:var(--soft);width:fit-content}
.badge.active{color:var(--green);border-color:rgba(65,217,141,.4);background:rgba(65,217,141,.07)}
.badge.suspended{color:var(--spark);border-color:rgba(255,176,32,.4);background:rgba(255,176,32,.07)}
.badge.pending{color:var(--accent-l);border-color:rgba(46,155,255,.4)}
.empty{text-align:center;padding:60px 20px}
.alert{border:1px solid rgba(255,90,90,.45);background:rgba(255,90,90,.08);color:#ffb3b3;border-radius:12px;padding:12px 16px;margin-bottom:20px}
.userbox{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--soft)}
.userbox form{display:inline}
.linkbtn{background:none;border:0;color:var(--accent-l);font:inherit;cursor:pointer;padding:0}
.kv{display:grid;grid-template-columns:180px 1fr;gap:10px 18px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
.login-card{max-width:440px;margin:40px auto;text-align:center;padding:40px 32px}
.login-card .btn{width:100%;justify-content:center;margin-top:22px}
@media (max-width:700px){.kv{grid-template-columns:1fr}.kv dt{margin-top:8px}}
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.sp-row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.state{font:500 13px var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.state.running{color:var(--green)}.state.starting,.state.stopping{color:var(--spark)}.state.offline,.state.off{color:var(--muted)}.state.suspended{color:#ff8a8a}
.sp-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.sp-actions .btn{padding:10px 18px;font-size:14px}
.btn.danger{background:rgba(255,90,90,.08);border:1px solid rgba(255,90,90,.45);color:#ff9b9b}
.btn[disabled]{opacity:.45;pointer-events:none}
.meters{display:grid;gap:12px}
.meter{display:grid;grid-template-columns:90px 1fr;gap:4px 12px;align-items:center;font-size:14px;color:var(--soft)}
.meter b{text-align:right;font:500 13px var(--mono);color:var(--text)}
.meter i{grid-column:1/-1;height:6px;border-radius:999px;background:rgba(255,255,255,.06);overflow:hidden;display:block}
.meter em{display:block;height:100%;width:0;background:linear-gradient(90deg,#3aa2ff,#1d7df0);transition:width .6s}
code.copy{cursor:pointer;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:2px 7px;font:500 13.5px var(--mono)}
.console-card pre{background:#05080c;border:1px solid var(--line);border-radius:10px;height:380px;overflow:auto;padding:14px;margin:14px 0 10px;font:13px/1.45 var(--mono);color:#cfd6e0;white-space:pre-wrap;word-break:break-word}
.cmd{display:flex;gap:10px;align-items:center}
.cmd span{font:500 15px var(--mono);color:var(--accent-l)}
.cmd input{flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:11px 14px;color:var(--text);font:14px var(--mono)}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--panel);border:1px solid var(--line2);border-radius:10px;padding:12px 18px;opacity:0;transition:.25s;pointer-events:none;z-index:50}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:900px){.sp-grid{grid-template-columns:1fr}}

.eula-box{margin-bottom:16px;border-color:rgba(255,176,32,.45)!important;background:linear-gradient(180deg,rgba(255,176,32,.07),var(--panel) 60%)!important}
.console-card pre .sys{color:#ffb020}.console-card pre .sys.head{color:#ffd27a;font-weight:700}.console-card pre .sys.dim{color:#8a94a3}.console-card pre .sys.err{color:#ff8a8a}