*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#0D2620;--card:#12332b;--line:#1e4a3f;--text:#EAF7F2;--mut:#8fb5aa;--acc:#00C9A7;--warn:#F59E0B;--err:#ef5350}
body{font-family:-apple-system,system-ui,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
.hidden{display:none!important}
.view{min-height:100vh}
.msg{min-height:1.2em;font-size:.85rem;color:var(--warn)}
.msg.ok{color:var(--acc)}

/* Login / 2FA */
.login-card{max-width:380px;margin:12vh auto;padding:28px;background:var(--card);border:1px solid var(--line);border-radius:16px;display:flex;flex-direction:column;gap:12px}
.login-card h1{font-size:1.4rem}.login-card h1 span{color:var(--acc)}
.login-card p{font-size:.85rem;color:var(--mut);line-height:1.5}
input,select,textarea{background:#0a1e19;border:1px solid var(--line);border-radius:10px;padding:11px 12px;color:var(--text);font-size:.95rem;width:100%}
input:focus,textarea:focus{outline:1px solid var(--acc)}
button{background:var(--acc);color:#06231c;border:none;border-radius:10px;padding:11px 14px;font-weight:700;font-size:.95rem;cursor:pointer}
button.sec{background:transparent;color:var(--acc);border:1px solid var(--acc)}
button.danger{background:var(--err);color:#fff}
button:disabled{opacity:.5}
.qr{display:flex;justify-content:center}
.qr img{background:#fff;padding:8px;border-radius:8px}
.secret{word-break:break-all;background:#0a1e19;padding:8px;border-radius:8px;font-size:.8rem;color:var(--acc)}

/* Header + Tabs */
header{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
header h1{font-size:1.05rem;margin-right:4px}
#tabs{display:flex;gap:4px;flex-wrap:wrap;flex:1}
#tabs button{background:transparent;color:var(--mut);font-weight:600;padding:8px 10px;border-radius:8px;font-size:.85rem}
#tabs button.active{background:#0a1e19;color:var(--acc)}
#btn-logout{background:transparent;color:var(--mut);font-size:1.1rem;padding:6px 10px}

main{padding:14px;max-width:1080px;margin:0 auto}

/* Bausteine */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.stat b{display:block;font-size:1.5rem;color:var(--acc)}
.stat span{font-size:.78rem;color:var(--mut)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.list{display:flex;flex-direction:column;gap:8px}
.item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;cursor:pointer}
.item:hover{border-color:var(--acc)}
.item h4{font-size:.95rem;margin-bottom:2px}
.item p{font-size:.8rem;color:var(--mut)}
.badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:.72rem;font-weight:700;background:#0a1e19;color:var(--acc)}
.badge.warn{color:var(--warn)}.badge.err{color:var(--err)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:4px 10px;font-size:.85rem}
.kv dt{color:var(--mut)}
textarea{min-height:80px;resize:vertical}
table{width:100%;border-collapse:collapse;font-size:.82rem}
td,th{padding:6px 8px;border-bottom:1px solid var(--line);text-align:left}
th{color:var(--mut);font-weight:600}
.right{margin-left:auto}
label.switch{display:flex;align-items:center;gap:10px;font-size:.9rem;cursor:pointer}
@media(max-width:640px){.kv{grid-template-columns:100px 1fr}}