@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* =========================================================
   IT Quiz Server-Panel – Design nach Mockup (itquiz-cyberpanel)
   Dashboard/Shell: aus dem Mockup. Auth- & Dateimanager-Teil unten ergänzt.
   ========================================================= */
:root{
  --bg:#f5f7fb;--side:#f7f8fc;--card:#fff;--ink:#172033;--muted:#697386;--line:#e1e6f0;
  --purple:#6047d9;--purple2:#8b4cf6;--soft:#efedff;--green:#16b77a;--yellow:#ffdf57;
  --shadow:0 8px 24px rgba(36,49,77,.08);--radius:16px;
  /* Aliase für Auth-/Dateimanager-Styles */
  --purple-soft:var(--soft);--line2:#d9dfeb;--ink2:#3a4356;--surface:#eef1f7;--ground:#f5f6fb;
  --good:var(--green);--good-soft:#e4f8ef;--bad:#ef4444;--bad-soft:#fdecec;--warn:#c48a00;
  --accent:var(--yellow);--shadow-sm:0 3px 10px rgba(36,49,77,.05);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:15px}
a{text-decoration:none;color:inherit}button{font:inherit}

/* ---------------- Shell ---------------- */
.app{display:grid;grid-template-columns:270px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:var(--side);border-right:1px solid var(--line);padding:20px 14px}
.brand,.top-brand{display:flex;align-items:center;gap:12px}
.brand{padding:0 10px 18px}
.brand-mark{display:grid;place-items:center;width:43px;height:43px;color:#fff;border-radius:11px;transform:rotate(45deg);background:linear-gradient(135deg,#7de0c6 0 38%,#f8dc42 38% 62%,#77b7f4 62%)}
.brand-mark i{transform:rotate(-45deg)}
.brand b,.top-brand b{display:block;font-size:20px}
.brand small,.top-brand small{color:var(--muted)}
.side-search{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--muted)}
.side-search input{border:0;outline:0;background:transparent;width:100%;font:inherit}
.server-card{display:flex;align-items:center;gap:14px;margin:12px 0 16px;padding:15px;background:transparent;border:1px solid var(--line);border-radius:13px}
.server-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--soft);color:var(--purple);font-size:20px}
.server-card strong{color:var(--purple)}
.server-card small{display:block;margin-top:4px;color:var(--muted)}
.navsec{padding:12px 10px 7px;color:#969dac;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.side nav{display:grid;gap:3px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:#626c7c;font-weight:500}
.nav:hover,.nav.on{background:#e9e8fb;color:#554bc3}
.nav.on{font-weight:700;box-shadow:inset 4px 0 #fff}
.nav.soon{opacity:.85}
.ni{width:22px;text-align:center}
.soon-t,.qa-soon{margin-left:auto;border-radius:99px;background:var(--yellow);color:#765d00;padding:2px 7px;font-size:9px;font-weight:800;text-transform:uppercase}

.content{min-width:0}
.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 36px;background:rgba(255,255,255,.95);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:4;backdrop-filter:blur(10px)}
.brand-mark.small{width:39px;height:39px}
.top-brand b{font-size:24px}
.tb-actions{display:flex;align-items:center;gap:12px}
.top-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);background:#fff;border-radius:12px;color:#667085;position:relative;cursor:pointer}
.top-icon:hover{border-color:var(--purple);color:var(--purple)}
.badge{position:absolute;right:-5px;top:-7px;background:#ef4444;color:#fff;border-radius:99px;padding:2px 6px;font-size:10px}
.tb-user{display:flex;align-items:center;gap:8px;font-weight:700}
.ava{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff}
.tb-logout{display:flex;gap:8px;align-items:center;color:#554bc3;font-weight:700;margin-left:6px}

.main{padding:34px 38px 55px;max-width:1500px}
.welcome{margin-bottom:22px}
.eyebrow{display:inline-block;border-left:4px solid var(--purple);padding-left:12px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.welcome h1{font-size:30px;margin:10px 0 6px}
.welcome p{margin:0;color:var(--muted)}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.qa{min-height:105px;display:flex;align-items:center;gap:15px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 3px 10px rgba(36,49,77,.04);transition:.15s}
.qa:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.qa-ic,.ins-ic{display:grid;place-items:center;border-radius:12px;flex:0 0 auto}
.qa-ic{width:48px;height:48px;font-size:20px}
.qa b{display:block;font-size:16px}
.qa small{display:block;margin-top:5px;color:var(--muted)}
.violet{background:#efedff;color:#5d4cdc}.blue{background:#e4efff;color:#4380d9}.green{background:#e4f8ef;color:#10a766}.amber{background:#fff5d8;color:#c48a00}

.hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;min-height:210px;margin-bottom:28px;padding:34px 38px;border-radius:18px;color:#fff;background:linear-gradient(120deg,#5526b7,#762ce6 55%,#934ef5);box-shadow:0 18px 35px rgba(91,45,190,.2)}
.hero h2{font-size:26px;margin:0 0 10px}
.hero p{max-width:760px;margin:0;line-height:1.7;color:#eee6ff}
.hero-actions{display:flex;gap:12px;margin-top:23px}
.hero-btn{display:inline-flex;align-items:center;gap:9px;border-radius:10px;padding:11px 18px;font-weight:700}
.hero-btn.primary{background:#fff;color:#5b35c5}
.hero-btn.ghost{border:1px solid rgba(255,255,255,.55)}
.hero-art{font-size:115px;opacity:.18;transform:rotate(-8deg);padding-right:20px}

.panel-sec{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px 30px;box-shadow:0 4px 12px rgba(36,49,77,.05);margin-bottom:26px}
.panel-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:22px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.panel-sec-h:before{content:"";width:4px;height:18px;border-radius:3px;background:var(--purple)}
.ov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ov{border:1px solid var(--line);border-radius:15px;padding:24px}
.ov-top{display:flex;justify-content:space-between;font-weight:700;color:#677082}
.ov-top b{color:var(--green)}
.ov-top b.warn{color:var(--warn)}.ov-top b.bad{color:var(--bad)}
.bar{height:9px;background:#e8ebf2;border-radius:99px;margin-top:20px;overflow:hidden}
.bar span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#21c78d,#12ab75)}
.bar span.warn{background:linear-gradient(90deg,#fbbf24,#d9880a)}
.bar span.bad{background:linear-gradient(90deg,#f87171,#dc2626)}
.ov p{color:var(--muted);margin:15px 0 0}
.ins-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ins-tile{display:flex;flex-direction:column;align-items:center;text-align:center;background:#f0f1fb;border-radius:14px;padding:22px}
.ins-ic{width:48px;height:48px;font-size:20px;margin-bottom:13px}
.ins-tile b{font-size:28px}
.ins-tile small{color:var(--muted);margin-top:8px}
.svc-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.svc{display:flex;align-items:center;gap:10px;background:#f5f6fb;border:1px solid var(--line);border-radius:11px;padding:13px}
.svc b{flex:1;overflow:hidden;text-overflow:ellipsis}
.svc small{color:var(--muted)}
.dot{width:9px;height:9px;border-radius:50%;background:#18b96e;box-shadow:0 0 0 3px #dff6ea;flex:0 0 auto}
.dot.down{background:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}

@media(max-width:1100px){.quick{grid-template-columns:repeat(2,1fr)}.svc-grid{grid-template-columns:repeat(3,1fr)}.ins-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.app{grid-template-columns:1fr}.side{position:static;height:auto}.top-brand{display:none}.topbar{padding:0 18px}.main{padding:24px 18px}.ov-grid,.ins-grid{grid-template-columns:1fr}.hero-art{display:none}}
@media(max-width:520px){.quick,.svc-grid{grid-template-columns:1fr}.tb-user,.top-icon{display:none}.hero{padding:28px 22px}.hero-actions{flex-direction:column}}

/* ---------------- Auth-Seiten (Login/2FA/Setup) ---------------- */
.authwrap{min-height:100vh;display:grid;place-items:center;padding:24px;position:relative;overflow:hidden}
.authwrap::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(460px 460px at 88% 8%,rgba(139,76,246,.14),transparent 70%),
             radial-gradient(360px 360px at 8% 92%,rgba(96,71,217,.12),transparent 72%)}
.authcard{position:relative;z-index:1;width:100%;max-width:400px;background:var(--card);border:1px solid var(--line);border-radius:22px;padding:34px 30px;box-shadow:var(--shadow)}
.authcard .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--ink);margin-bottom:22px;padding:0}
.authcard h1{font-size:23px;margin:0 0 6px}
.authcard .sub{color:var(--muted);font-size:13.5px;margin:0 0 18px}
.authcard label{display:block;font-size:12.5px;font-weight:700;color:var(--ink2);margin:14px 0 6px}
.authcard input{width:100%;border:1.6px solid var(--line2);border-radius:11px;padding:12px 14px;font:inherit;background:#fbfbfe;color:var(--ink);outline:none;transition:.14s}
.authcard input:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft);background:#fff}
.code-inp{text-align:center;font-size:26px;font-weight:800;letter-spacing:12px;padding-left:12px!important}
.btn{width:100%;margin-top:20px;border:0;border-radius:11px;padding:13px 16px;font:inherit;font-weight:800;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;cursor:pointer;transition:.14s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px rgba(96,71,217,.6)}
.err{background:var(--bad-soft);border:1px solid #f3c9c9;color:#a71d1d;border-radius:11px;padding:11px 13px;font-size:13px;font-weight:600;margin-bottom:6px}
.alt{text-align:center;margin:16px 0 0;font-size:13px}.alt a{color:var(--purple);font-weight:700}
.logo{display:inline-grid;place-items:center;width:34px;height:34px;color:#fff;border-radius:10px;transform:rotate(45deg);background:linear-gradient(135deg,#7de0c6 0 38%,#f8dc42 38% 62%,#77b7f4 62%)}
.logo i{transform:rotate(-45deg)}
.qrbox{display:grid;place-items:center;margin:6px 0 14px}
.qrbox #qr{padding:12px;background:#fff;border:1px solid var(--line2);border-radius:14px}
.qrbox #qr img{display:block}
.secret{text-align:center;font-family:'Courier New',monospace;font-weight:700;letter-spacing:2px;font-size:15px;background:var(--surface);border:1px dashed var(--line2);border-radius:11px;padding:11px;color:var(--ink);margin-bottom:4px;word-break:break-all}

/* ---------------- Dateimanager (nach Mockup) ---------------- */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;margin-bottom:24px}
.page-head h1{font-size:30px;margin:9px 0 6px}
.page-head p{margin:0;color:var(--muted)}
.crumbs{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#fff;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:13px;flex-wrap:wrap}
.crumbs a{color:var(--purple);font-weight:600}
.crumbs i{font-size:9px}
.flash{display:flex;align-items:center;gap:13px;padding:14px 16px;margin-bottom:20px;border-radius:12px}
.flash.good{background:#eaf8f1;border:1px solid #cceede;color:#087d4e}
.flash.bad{background:#fdecec;border:1px solid #f3c9c9;color:#b3261e}
.flash>i{font-size:20px}
.flash div{display:grid}
.flash small{margin-top:2px;color:#4b806a}
.flash.bad small{color:#b3261e}
.flash button{margin-left:auto;border:0;background:transparent;color:inherit;cursor:pointer}
.fm-panel,.editor-panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 4px 12px rgba(36,49,77,.05);overflow:hidden;margin-bottom:26px}
.fm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 22px;border-bottom:1px solid var(--line)}
.toolbar-main{display:flex;flex-wrap:wrap;gap:9px}
.action{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:#4f596b;border-radius:9px;padding:10px 14px;font-weight:700;cursor:pointer;text-decoration:none}
.action:hover{background:#f6f5ff;color:var(--purple)}
.action.primary{border-color:transparent;color:#fff;background:linear-gradient(135deg,#7046e5,#5735c7)}
.action.primary:hover{color:#fff}
.file-search{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#f8f9fc;border-radius:9px;padding:10px 12px;color:var(--muted);min-width:260px}
.file-search input{width:100%;border:0;outline:0;background:transparent;font:inherit}
.pathbar{display:flex;align-items:center;gap:10px;padding:12px 22px;background:#f8f9fc;border-bottom:1px solid var(--line);color:#657083;font-family:monospace}
.pathbar>i{color:var(--purple)}
.pathbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pathbar button{margin-left:auto;border:0;background:transparent;color:#687386;cursor:pointer}
.fm-table{overflow-x:auto}
.fm-row{min-width:900px;display:grid;grid-template-columns:minmax(250px,1.5fr) 90px 165px 85px 145px 180px;align-items:center;gap:12px;padding:13px 22px;border-top:1px solid #edf0f5;color:#657083}
.fm-row:first-child{border-top:0}
.fm-th{background:#fbfbfd;color:#8a93a2;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.fm-row:not(.fm-th):hover{background:#fafaff}
.fm-name{display:flex;align-items:center;gap:12px;color:var(--ink);font-weight:600;min-width:0}
.fm-name>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;flex:0 0 auto;background:#eef1f7;color:#7b8496}
.file-icon.folder{background:#efedff;color:#624bdc}
.file-icon.css{background:#e8f0ff;color:#3477db}
.file-icon.js{background:#fff3c7;color:#a97800}
.file-icon.link{background:#f4edff;color:#8447d9}
.file-icon.php{background:#ecebff;color:#514aba}
.file-icon.img{background:#e6f7ef;color:#12a56b}
.file-icon.code{background:#eaf0ff;color:#3f6fd8}
.mono{font-family:monospace;font-size:12px}
.muted{color:#8c95a5}
.fm-row code{padding:4px 7px;border-radius:6px;background:#f0f1f6;color:#535d70;font-family:monospace;font-size:12px}
.fm-actions{display:flex;justify-content:flex-end;gap:4px}
.fm-actions button,.fm-actions a{display:grid;place-items:center;width:31px;height:31px;border:0;border-radius:7px;background:transparent;color:#687386;cursor:pointer;text-decoration:none}
.fm-actions button:hover,.fm-actions a:hover{background:#efedff;color:var(--purple)}
.fm-actions .danger:hover{background:#ffe9e9;color:#d33}
.table-foot{display:flex;justify-content:space-between;padding:12px 22px;background:#fbfbfd;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
.editor-head{display:flex;justify-content:space-between;align-items:center;padding:20px 22px;border-bottom:1px solid var(--line)}
.editor-head>div{display:flex;align-items:center;gap:12px}
.editor-head h2{margin:0;font-size:18px}
.editor-head p{margin:3px 0 0;color:var(--muted);font-family:monospace;font-size:12px}
.editor-head>a{color:var(--purple);font-weight:700;font-size:13px;white-space:nowrap}
.editor-head>a i{margin-right:7px}
.editor-wrap{display:grid;grid-template-columns:52px 1fr;background:#161b29}
.line-numbers{padding:18px 12px;text-align:right;color:#687084;font:14px/1.7 monospace;border-right:1px solid #2a3142;user-select:none;overflow:hidden}
.editor-wrap textarea{min-height:360px;width:100%;resize:vertical;border:0;outline:0;padding:18px;background:#161b29;color:#e8ebf4;font:14px/1.7 monospace}
.editor-actions{display:flex;align-items:center;gap:9px;padding:15px 22px;border-top:1px solid var(--line)}
.editor-actions span{margin-left:auto;color:var(--muted);font-size:12px}
@media(max-width:800px){.page-head,.fm-toolbar{align-items:stretch;flex-direction:column}.file-search{min-width:0}.crumbs{align-self:flex-start}.editor-head{align-items:flex-start;gap:15px;flex-direction:column}}
/* ---------------- Monitoring (nach Mockup) ---------------- */
.chart-tabs{display:flex;align-items:center;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.chart-tabs span{margin-left:auto;color:var(--muted);font-size:12px}
.chart-tab{border:1px solid var(--line);background:#fff;color:var(--muted);border-radius:9px;padding:8px 13px;font-weight:700;cursor:pointer}
.chart-tab.active{background:var(--purple-soft);border-color:#dcd5fb;color:var(--purple)}
.chart-box{display:grid;grid-template-columns:48px 1fr;height:270px}
.chart-y{display:flex;flex-direction:column;justify-content:space-between;color:var(--muted);font-size:11px;padding:1px 8px 1px 0;text-align:right}
.chart-grid{position:relative;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 66px,var(--line) 67px),repeating-linear-gradient(to right,transparent 0,transparent 139px,rgba(230,225,245,.65) 140px);overflow:hidden}
.chart-grid svg{position:absolute;inset:0;width:100%;height:100%}
.chart-grid .area{fill:url(#area)}
.chart-grid .line{fill:none;stroke:var(--purple);stroke-width:4;vector-effect:non-scaling-stroke}
.chart-x{display:flex;justify-content:space-between;margin:9px 0 0 48px;color:var(--muted);font-size:11px}
.monitor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.monitor-panel{margin-bottom:0}
.alert-list,.event-list{display:grid;gap:10px}
.alert-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:13px}
.alert-item>span{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;flex:0 0 auto}
.alert-item.warning>span{background:#fdf3cf;color:#b8860b}
.alert-item.info>span{background:#e5f0fd;color:#2563eb}
.alert-item.good>span{background:#e4f8ef;color:#10a766}
.alert-item.crit>span{background:#fdecec;color:#dc2626}
.alert-item div{display:grid;gap:2px;flex:1;min-width:0}
.alert-item b{font-size:13px}
.alert-item small{color:var(--muted);font-size:11px}
.alert-item em{font-style:normal;font-size:9px;font-weight:800;text-transform:uppercase;border-radius:20px;padding:3px 8px;white-space:nowrap}
.alert-item.warning em{background:var(--accent);color:#7a5a00}
.alert-item.info em{background:#dbeafe;color:#1d4ed8}
.alert-item.good em{background:#d1fae5;color:#047857}
.alert-item.crit em{background:#fee2e2;color:#b91c1c}
.event-list>div{display:flex;align-items:flex-start;gap:13px;padding:10px 0;border-bottom:1px solid var(--line)}
.event-list>div:last-child{border-bottom:0}
.event-list time{background:var(--purple-soft);color:var(--purple);border-radius:8px;padding:5px 8px;font-size:11px;font-weight:800;white-space:nowrap}
.event-list span{display:grid;gap:2px;min-width:0}
.event-list b{font-size:13px}
.event-list small{color:var(--muted);font-size:11px}
.event-empty{color:var(--muted);font-size:13px;padding:6px 0}
@media(max-width:900px){.monitor-grid{grid-template-columns:1fr}.chart-tabs span{width:100%;margin-left:0}.chart-x span:nth-child(even){display:none}}
/* ---------------- Datenbanken (nach Mockup) ---------------- */
button.qa{font:inherit;text-align:left;cursor:pointer}
.db-hero{margin-bottom:26px}
.section-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}
.section-toolbar .panel-sec-h{margin-bottom:0}
.db-search{display:flex;align-items:center;gap:9px;min-width:250px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#f8f9fc;color:var(--muted)}
.db-search input{width:100%;border:0;outline:0;background:transparent;font:inherit}
.db-table{overflow-x:auto;border:1px solid var(--line);border-radius:13px}
.db-row{min-width:920px;display:grid;grid-template-columns:minmax(230px,1.4fr) 145px 95px 80px 105px 180px;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line);color:var(--muted);font-size:13px}
.db-row:first-child{border-top:0}
.db-th{background:var(--surface);font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#9299a8}
.db-row:not(.db-th):hover{background:#faf9ff}
.db-name{display:flex;align-items:center;gap:11px;color:var(--ink);min-width:0}
.db-name>span:last-child{display:grid;min-width:0}
.db-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.db-name small{color:var(--muted);font-size:10px}
.db-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:var(--purple-soft);color:var(--purple);flex:0 0 auto}
.status{display:inline-flex;align-items:center;gap:7px;font-weight:700}
.status i{width:8px;height:8px;border-radius:50%}
.status.online{color:var(--good)}
.status.online i{background:var(--good);box-shadow:0 0 0 3px var(--good-soft)}
.db-actions{display:flex;justify-content:flex-end;gap:4px}
.db-actions button,.db-actions a{display:grid;place-items:center;width:31px;height:31px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none}
.db-actions button:hover,.db-actions a:hover{background:var(--purple-soft);color:var(--purple)}
.db-actions .danger:hover{background:var(--bad-soft);color:var(--bad)}
.db-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.db-form{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.db-form label{display:grid;gap:6px}
.db-form label>span{font-size:11px;font-weight:800;color:var(--ink2)}
.db-form input,.db-form select{width:100%;border:1px solid var(--line2);border-radius:9px;padding:11px 12px;background:#fbfaff;color:var(--ink);font:inherit;outline:0}
.db-form input:focus,.db-form select:focus{border-color:var(--purple);box-shadow:0 0 0 3px var(--purple-soft)}
.db-primary{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:center;gap:8px;border:0;border-radius:10px;padding:11px 16px;background:linear-gradient(135deg,var(--purple2),var(--purple));color:#fff;font:inherit;font-weight:800;cursor:pointer}
.tool-list{display:grid;gap:9px}
.tool-list>a{display:flex;align-items:center;gap:12px;padding:11px;border:1px solid var(--line);border-radius:11px}
.tool-list>a:hover{border-color:#d7cff8;background:#faf9ff}
.tool-list>a>span:nth-child(2){display:grid;flex:1;min-width:0}
.tool-list small{color:var(--muted);font-size:10px}
.tool-list>a>i{color:var(--muted);font-size:11px}
.tool-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;flex:0 0 auto}
.mysql-status{display:grid;grid-template-columns:minmax(190px,1.4fr) repeat(4,1fr) auto;align-items:center;gap:12px}
.mysql-status>div:not(.svc){display:grid;gap:2px;padding:10px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px}
.mysql-status>div>span{color:var(--muted);font-size:10px}
.mysql-status>div>b{font-size:13px}
.mysql-status button{border:1px solid var(--line2);border-radius:9px;padding:10px 12px;background:#fff;color:var(--purple);font:inherit;font-size:11px;font-weight:800;cursor:pointer}
.mysql-status button i{margin-right:6px}
@media(max-width:900px){.db-two-col{grid-template-columns:1fr}.mysql-status{grid-template-columns:repeat(2,1fr)}.mysql-status .svc,.mysql-status button{grid-column:1/-1}.section-toolbar{align-items:stretch;flex-direction:column}.db-search{min-width:0}}
@media(max-width:560px){.db-form{grid-template-columns:1fr}.mysql-status{grid-template-columns:1fr}.mysql-status .svc,.mysql-status button{grid-column:auto}}

/* ---------------- Profil & MFA (nach Mockup) ---------------- */
.secure-pill{display:inline-flex;align-items:center;gap:7px;margin-bottom:10px;padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.18);font-size:11px;font-weight:800}.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.security-card{display:flex;align-items:center;gap:13px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.security-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:11px;background:var(--purple-soft);color:var(--purple);flex:0 0 auto}.security-icon.good{background:var(--good-soft);color:var(--good)}.security-card>div{display:grid;flex:1}.security-card small,.security-card p{color:var(--muted);font-size:10px}.security-card b{font-size:14px}.security-card p{margin:2px 0 0}.security-card>a,.security-card>button{border:0;background:transparent;color:var(--purple);font:inherit;font-size:11px;font-weight:800;cursor:pointer}.state{display:inline-flex;align-items:center;justify-content:center;border-radius:20px;padding:3px 8px;background:#eceef4;color:#636b7a;font-size:9px;font-weight:800;text-transform:uppercase;white-space:nowrap}.state.good{background:var(--good-soft);color:var(--good)}.state.warning{background:var(--warn-soft);color:var(--warn)}.mfa-columns{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:16px}.section-heading .panel-sec-h{margin-bottom:0}.small-primary{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:9px;padding:8px 11px;background:var(--purple);color:#fff;font:inherit;font-size:10px;font-weight:800;cursor:pointer}.method-list{display:grid;gap:10px}.method{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:11px}.method.active{border-color:#d3ebdd;background:#fbfffc}.method-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--good-soft);color:var(--good)}.method-icon.key{background:var(--purple-soft);color:var(--purple)}.method-icon.mail{background:#e5f0fd;color:#2563eb}.method>div{display:grid;flex:1}.method small,.method p{color:var(--muted);font-size:10px}.method p{margin:2px 0 0}.icon-btn{border:0;background:transparent;color:var(--muted);cursor:pointer}.outline-btn,.danger-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line2);border-radius:8px;padding:7px 10px;background:#fff;color:var(--purple);font:inherit;font-size:10px;font-weight:800;cursor:pointer}.danger-btn{color:var(--bad);border-color:#f4cccc}.device-card{border:1px solid var(--line);border-radius:12px;overflow:hidden}.device-top{display:flex;align-items:center;gap:12px;padding:16px;background:var(--surface)}.phone{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--purple-soft);color:var(--purple);font-size:20px}.device-top>div{display:grid;flex:1}.device-top small{color:var(--muted);font-size:10px}.device-card dl{margin:0;padding:8px 16px}.device-card dl>div{display:flex;justify-content:space-between;gap:20px;padding:9px 0;border-bottom:1px solid var(--line)}.device-card dl>div:last-child{border:0}.device-card dt{color:var(--muted);font-size:10px}.device-card dd{margin:0;font-size:11px;font-weight:700}.device-actions{display:flex;gap:8px;padding:13px 16px;border-top:1px solid var(--line)}.user-search{display:flex;align-items:center;gap:8px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:#f8f9fc;color:var(--muted)}.user-search input{border:0;outline:0;background:transparent;font:inherit;font-size:11px}.mfa-table{overflow-x:auto;border:1px solid var(--line);border-radius:12px}.mfa-row{min-width:900px;display:grid;grid-template-columns:minmax(210px,1.4fr) 115px 100px 150px 150px 80px;align-items:center;gap:12px;padding:12px 15px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}.mfa-row:first-child{border-top:0}.mfa-th{background:var(--surface);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.person{display:flex;align-items:center;gap:10px;color:var(--ink)}.person>span:last-child{display:grid}.person small{color:var(--muted);font-size:9px}.user-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--purple);color:#fff;font-size:10px;font-weight:800}.user-avatar.purple{background:#8561e7}.user-avatar.grey{background:#8a93a2}.row-actions{display:flex;justify-content:flex-end;gap:4px}.row-actions button{display:grid;place-items:center;width:29px;height:29px;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.row-actions button:hover{background:var(--purple-soft);color:var(--purple)}.session-list{display:grid}.session-list>div{display:flex;align-items:flex-start;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}.session-list>div:last-child{border:0}.session-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;flex:0 0 auto}.session-icon.success{background:var(--good-soft);color:var(--good)}.session-icon.blocked{background:var(--bad-soft);color:var(--bad)}.session-list>div>span:nth-child(2){display:grid;flex:1}.session-list small,.session-list p{color:var(--muted);font-size:9px}.session-list p{margin:2px 0 0}.session-list em{font-style:normal;font-size:9px;font-weight:800;color:var(--purple)}.option-list{display:grid;gap:9px}.option-list>a{display:flex;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);border-radius:11px}.option-list>a:hover{background:#faf9ff}.option-list>a>span:nth-child(2){display:grid;flex:1}.option-list small{color:var(--muted);font-size:9px}.option-list>a>i{color:var(--muted);font-size:10px}.option-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px}.toggle{width:34px;height:19px;border-radius:20px;background:#cfd3dc;padding:3px}.toggle i{display:block;width:13px;height:13px;border-radius:50%;background:#fff}.toggle.on{background:var(--good)}.toggle.on i{margin-left:15px}@media(max-width:1000px){.security-grid{grid-template-columns:1fr}.mfa-columns{grid-template-columns:1fr}}@media(max-width:650px){.section-heading{align-items:stretch;flex-direction:column}.user-search{width:100%}.device-card dl>div{flex-direction:column;gap:3px}}
button.option-item,button.method{font:inherit;text-align:left;width:100%;background:#fff;cursor:pointer}
.user-search{display:flex;align-items:center;gap:9px;min-width:230px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:#f8f9fc;color:var(--muted)}
.user-search input{width:100%;border:0;outline:0;background:transparent;font:inherit}
.mfa-hero .hero-art{font-size:120px}

/* ---------------- Logs & Aktivität (nach Mockup) ---------------- */
.activity-chart{height:220px;display:grid;grid-template-columns:38px 1fr}.chart-y{display:flex;flex-direction:column;justify-content:space-between;padding:0 8px 22px 0;text-align:right;color:var(--muted);font-size:10px}.bars{display:grid;grid-template-columns:repeat(8,1fr);align-items:end;gap:18px;padding:10px 20px 0;border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:repeating-linear-gradient(to bottom,transparent 0,transparent 48px,var(--line) 49px)}.bars div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px}.bars i{width:65%;max-width:48px;border-radius:7px 7px 2px 2px;background:linear-gradient(180deg,var(--purple2),var(--purple));box-shadow:0 5px 14px rgba(91,66,239,.18)}.bars span{height:15px;color:var(--muted);font-size:9px}.chart-legend{display:flex;justify-content:center;gap:20px;margin-top:15px;color:var(--muted);font-size:10px}.chart-legend span{display:flex;align-items:center;gap:6px}.chart-legend i{width:8px;height:8px;border-radius:50%}.purple-dot{background:var(--purple)}.green-dot{background:var(--good)}.red-dot{background:var(--bad)}.log-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.log-toolbar .panel-sec-h{margin:0}.log-actions{display:flex;flex-wrap:wrap;gap:6px}.filter{border:1px solid var(--line);border-radius:8px;padding:7px 10px;background:#fff;color:var(--muted);font:inherit;font-size:10px;font-weight:700;cursor:pointer}.filter.active{background:var(--purple-soft);border-color:#d8d0f8;color:var(--purple)}.filter-row{display:grid;grid-template-columns:minmax(230px,1fr) repeat(3,160px) auto;gap:8px;margin-bottom:14px}.filter-row label{display:flex;align-items:center;gap:8px}.filter-row label,.filter-row select,.filter-row button{border:1px solid var(--line);border-radius:9px;padding:9px 10px;background:#f8f9fc;color:var(--muted);font:inherit;font-size:10px}.filter-row input{width:100%;border:0;outline:0;background:transparent;font:inherit}.filter-row button{background:#fff;cursor:pointer}.log-table{overflow-x:auto;border:1px solid var(--line);border-radius:12px}.log-row{min-width:1120px;display:grid;grid-template-columns:100px 180px minmax(220px,1.25fr) minmax(170px,1fr) 125px 100px 32px;align-items:center;gap:12px;padding:11px 14px;border-top:1px solid var(--line);color:var(--muted);font-size:10px}.log-row:first-child{border-top:0}.log-row:not(.log-th):hover{background:#faf9ff}.log-row.warning-row{background:#fffdf7}.log-th{background:var(--surface);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}.log-row>span:first-child,.log-user>span,.event>span{display:grid}.log-row small{color:#969dad;font-size:8.5px}.log-user,.event{display:flex!important;align-items:center;gap:9px}.log-user>i{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;color:#fff;font-style:normal;font-weight:800}.user-a{background:var(--purple)}.user-mf{background:#8561e7}.user-su{background:#8791a2}.event-icon{display:grid!important;place-items:center;width:34px;height:34px;border-radius:9px;flex:0 0 auto}.event-icon.login{background:var(--good-soft);color:var(--good)}.event-icon.file{background:#e5f0fd;color:#2563eb}.event-icon.failed{background:var(--bad-soft);color:var(--bad)}.event-icon.db{background:var(--purple-soft);color:var(--purple)}.event-icon.folder{background:#fdf3cf;color:#ae7d00}.event-icon.logout{background:#eceef4;color:#657083}.path{font-family:monospace;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.log-status{justify-self:start;border-radius:20px;padding:3px 8px;font-size:8px;font-weight:800;text-transform:uppercase}.log-status.success{background:var(--good-soft);color:var(--good)}.log-status.info{background:#e5f0fd;color:#2563eb}.log-status.warning{background:var(--warn-soft);color:var(--warn)}.log-status.neutral{background:#eceef4;color:#657083}.more{border:0;background:transparent;color:var(--muted);cursor:pointer}.table-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 3px 0;color:var(--muted);font-size:10px}.table-footer div{display:flex;gap:4px}.table-footer button{display:grid;place-items:center;min-width:28px;height:28px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--muted)}.table-footer .active{background:var(--purple);color:#fff;border-color:var(--purple)}.log-columns{display:grid;grid-template-columns:1fr 1fr;gap:18px}.security-events{display:grid}.security-events>div{display:flex;align-items:center;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}.security-events>div:last-child{border:0}.risk{display:grid;place-items:center;width:38px;height:38px;border-radius:10px}.risk.high{background:var(--bad-soft);color:var(--bad)}.risk.medium{background:var(--warn-soft);color:var(--warn)}.risk.low{background:#e5f0fd;color:#2563eb}.security-events>div>span:nth-child(2){display:grid;flex:1}.security-events small,.security-events time{color:var(--muted);font-size:9px}.security-events em{font-style:normal;border-radius:20px;padding:3px 8px;background:var(--surface);font-size:8px;font-weight:800}.user-summary{display:grid;gap:12px}.user-summary>div{display:grid;grid-template-columns:36px 150px 1fr 36px;align-items:center;gap:10px}.summary-avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#fff;font-size:9px;font-weight:800}.summary-avatar.admin{background:var(--purple)}.summary-avatar.marco{background:#8561e7}.summary-avatar.support{background:#8791a2}.summary-avatar.system{background:#5d6778}.user-summary>div>span:nth-child(2){display:grid}.user-summary small{color:var(--muted);font-size:9px}.summary-bar{height:7px;border-radius:20px;background:var(--surface);overflow:hidden}.summary-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--purple2),var(--purple))}.settings-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.settings-grid>div{display:flex;align-items:center;gap:10px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:11px}.setting-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;flex:0 0 auto}.settings-grid>div>span:nth-child(2){display:grid;flex:1}.settings-grid small{color:var(--muted);font-size:8px}.outline-setting{border:1px solid var(--line2);border-radius:7px;background:#fff;color:var(--purple);font-size:8px;font-weight:800;padding:6px}.switch{width:34px;height:19px;border-radius:20px;background:#cfd3dc;padding:3px}.switch i{display:block;width:13px;height:13px;border-radius:50%;background:#fff}.switch.on{background:var(--good)}.switch.on i{margin-left:15px}@media(max-width:1100px){.filter-row{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:860px){.log-columns{grid-template-columns:1fr}.log-toolbar{align-items:flex-start;flex-direction:column}.bars{gap:7px}.chart-legend{flex-wrap:wrap}}@media(max-width:560px){.filter-row,.settings-grid{grid-template-columns:1fr}.user-summary>div{grid-template-columns:36px 1fr 40px}.summary-bar{display:none}}
.filter,.apply-filter,.page,.outline-setting{font:inherit;cursor:pointer}