.page-logs .page-intro{margin-bottom:18px}
.logs-shell{display:grid;grid-template-columns:minmax(260px,.34fr) minmax(0,1fr);gap:18px;align-items:start}
.logs-sidebar,.logs-main{min-width:0;background:rgba(14,34,58,.60)}
.logs-type-list{display:grid;gap:10px;margin-top:12px}
.logs-type-button{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);color:var(--text);padding:12px;cursor:pointer;transition:border-color .16s ease,background .16s ease,transform .16s ease}
.logs-type-button:hover{transform:translateY(-1px);border-color:rgba(109,178,255,.35)}
.logs-type-button.active{border-color:rgba(109,178,255,.42);background:rgba(53,167,255,.10);box-shadow:inset 0 0 0 1px rgba(53,167,255,.045)}
.logs-type-button strong{display:block;margin-bottom:4px}.logs-type-button small{display:block;color:var(--muted);line-height:1.35}.logs-type-badges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.logs-mini-badge{border:1px solid var(--line);border-radius:999px;padding:4px 7px;font-size:.72rem;color:var(--muted);background:rgba(255,255,255,.04)}.logs-mini-badge.live{border-color:rgba(47,255,178,.32);color:#b6ffe7}.logs-mini-badge.security{border-color:rgba(255,209,102,.34);color:#ffe2a3}
.logs-toolbar{display:grid;grid-template-columns:repeat(4,minmax(115px,1fr)) minmax(180px,1.3fr) auto;gap:10px;align-items:end;margin-bottom:12px}.logs-toolbar label{display:grid;gap:6px;font-size:.82rem;color:var(--muted);min-width:0}.logs-toolbar input,.logs-toolbar select{width:100%;min-width:0}.logs-search{min-width:0}.logs-policy{margin:8px 0 12px}.logs-result-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:10px 0 12px}.logs-result-meta{font-size:.9rem}.small-btn{padding:8px 11px;font-size:.82rem;white-space:nowrap}.logs-entry-container{border:1px solid rgba(109,178,255,.18);border-radius:18px;background:rgba(8,17,31,.34);padding:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)}.logs-entry-list{display:grid;gap:10px}.logs-entry{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);padding:12px 14px;overflow:hidden}.logs-entry.level-warning{border-color:rgba(255,209,102,.28)}.logs-entry.level-error,.logs-entry.level-critical{border-color:rgba(255,77,109,.32)}.logs-entry.level-security{border-color:rgba(255,158,66,.38)}.logs-entry-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.logs-time{font-size:.82rem;color:var(--muted)}.logs-level{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:4px 8px;font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.logs-level.info{color:#bfe7ff;border-color:rgba(53,167,255,.30);background:rgba(53,167,255,.08)}.logs-level.warning{color:#ffe2a3;border-color:rgba(255,209,102,.38);background:rgba(255,209,102,.09)}.logs-level.error,.logs-level.critical{color:#ffb3c0;border-color:rgba(255,77,109,.38);background:rgba(255,77,109,.09)}.logs-level.security{color:#ffd1a3;border-color:rgba(255,158,66,.42);background:rgba(255,158,66,.10)}.logs-entry p{margin:8px 0;color:var(--text)}.logs-entry-meta{display:flex;gap:8px;flex-wrap:wrap}.logs-entry-meta span{border:1px solid rgba(109,178,255,.15);border-radius:999px;padding:5px 8px;color:var(--muted);font-size:.78rem;background:rgba(255,255,255,.03)}.logs-details{margin-top:9px}.logs-details summary{cursor:pointer;color:var(--muted);font-size:.86rem}.logs-detail-panel{margin-top:8px;border:1px solid rgba(109,178,255,.18);border-radius:14px;background:rgba(0,0,0,.16);padding:8px;max-height:210px;overflow:auto;display:grid;gap:7px}.logs-detail-line{display:grid;grid-template-columns:minmax(120px,.32fr) minmax(0,1fr);gap:10px;align-items:start;border:1px solid rgba(109,178,255,.12);border-radius:10px;padding:7px 9px;background:rgba(255,255,255,.025);min-width:0}.logs-detail-line span{color:var(--muted);font-size:.82rem}.logs-detail-line strong{font-size:.86rem;text-align:left;word-break:break-word;color:var(--text)}.logs-empty{border:1px dashed rgba(109,178,255,.22);border-radius:16px;padding:16px;color:var(--muted);background:rgba(255,255,255,.025)}@media(max-width:1120px){.logs-shell{grid-template-columns:1fr}.logs-toolbar{grid-template-columns:1fr 1fr}.logs-toolbar .btn{justify-self:start}.logs-search{grid-column:1/-1}}@media(max-width:680px){.logs-toolbar{grid-template-columns:1fr}.logs-type-button{grid-template-columns:1fr}.logs-type-badges{justify-content:flex-start}.logs-entry-top{display:grid}.logs-entry-meta{display:grid}.logs-result-row{display:grid}.logs-detail-line{grid-template-columns:1fr}.logs-entry-container{padding:8px}}


/* unified log surface and source backgrounds */
.page-logs .logs-sidebar,
.page-logs .logs-main{
  background:rgba(14,34,58,.58);
  border-color:rgba(109,178,255,.20);
}
.page-logs .logs-type-button,
.page-logs .logs-type-button.active{
  background:rgba(255,255,255,.035);
  box-shadow:none;
}
.page-logs .logs-type-button.active{
  border-color:rgba(109,178,255,.55);
}
.page-logs .logs-type-button.active::before{
  content:"";
  width:4px;
  align-self:stretch;
  border-radius:999px;
  background:linear-gradient(180deg,var(--blue),var(--green));
  grid-row:1;
  grid-column:1;
  margin-right:4px;
}
.page-logs .logs-type-button.active > span:first-child{
  padding-left:10px;
}
.page-logs .logs-entry-container{
  border:1px solid rgba(109,178,255,.22);
  border-radius:20px;
  background:linear-gradient(180deg,rgba(10,24,43,.72),rgba(9,18,33,.66));
  padding:12px;
}
.page-logs .logs-entry{
  background:rgba(19,43,72,.66);
  border-color:rgba(109,178,255,.22);
}
.page-logs .logs-entry-list{
  gap:10px;
}
.page-logs .logs-detail-panel{
  display:block;
  max-height:190px;
  overflow:auto;
  border:1px solid rgba(109,178,255,.18);
  border-radius:14px;
  background:rgba(5,13,24,.42);
  padding:10px 12px;
}
.page-logs .logs-detail-panel pre{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  color:var(--text);
  font:inherit;
  line-height:1.55;
}
.page-logs .logs-detail-line{display:none}

/* final log background/layout correction */
.page-logs .logs-shell{
  align-items:start;
}
.page-logs .logs-sidebar,
.page-logs .logs-main{
  background:rgba(14,34,58,.58) !important;
}
.page-logs .logs-type-button{
  position:relative;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  grid-template-columns:none;
  background:rgba(255,255,255,.035) !important;
  min-height:88px;
  overflow:hidden;
}
.page-logs .logs-type-button.active{
  background:rgba(255,255,255,.035) !important;
  border-color:rgba(122,255,204,.45);
  box-shadow:inset 4px 0 0 rgba(122,255,204,.78), 0 0 0 1px rgba(122,255,204,.04);
}
.page-logs .logs-type-button.active::before{content:none !important;display:none !important}
.page-logs .logs-type-button.active > span:first-child{padding-left:0 !important}
.page-logs .logs-type-button > span:first-child{min-width:0;flex:1 1 auto}
.page-logs .logs-type-button strong,
.page-logs .logs-type-button small{overflow-wrap:anywhere;word-break:normal}
.page-logs .logs-type-badges{
  flex:0 0 auto;
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:flex-end;
  max-width:45%;
}
.page-logs .logs-mini-badge{white-space:nowrap}
.page-logs .logs-entry-container{
  background:transparent !important;
  border:1px solid rgba(109,178,255,.22);
  box-shadow:none !important;
}
.page-logs .logs-entry{
  background:rgba(19,43,72,.66) !important;
  border-color:rgba(109,178,255,.22) !important;
}
.page-logs .logs-detail-panel{
  background:rgba(5,13,24,.36) !important;
  border-color:rgba(109,178,255,.18) !important;
}
.page-logs #logs-toggle-all-details{
  visibility:hidden;
  pointer-events:none;
}
.page-logs #logs-toggle-all-details.is-visible{
  visibility:visible;
  pointer-events:auto;
}
@media(max-width:680px){
  .page-logs .logs-type-button{display:grid;grid-template-columns:1fr;min-height:0}
  .page-logs .logs-type-badges{max-width:none;justify-content:flex-start}
}
/* Weitere-laden Button sauber stylen */
.page-logs .logs-load-row{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  min-height:56px!important;
  margin-top:14px!important;
  padding:8px 0 2px!important;
}

.page-logs #logs-load-more,
.page-logs .logs-load-more,
.page-logs .logs-load-row button{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:1px solid rgba(109,178,255,.42)!important;
  border-radius:14px!important;
  padding:10px 16px!important;
  min-height:40px!important;
  background:
    linear-gradient(180deg, rgba(53,167,255,.28), rgba(53,167,255,.14))!important;
  color:var(--text)!important;
  font:inherit!important;
  font-weight:800!important;
  cursor:pointer!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 8px 22px rgba(53,167,255,.10)!important;
}

.page-logs #logs-load-more:hover,
.page-logs .logs-load-more:hover,
.page-logs .logs-load-row button:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(122,255,204,.45)!important;
  background:
    linear-gradient(180deg, rgba(122,255,204,.24), rgba(53,167,255,.16))!important;
}

.page-logs #logs-load-more:active,
.page-logs .logs-load-more:active,
.page-logs .logs-load-row button:active{
  transform:translateY(0)!important;
}

/* 30T final: stabile Log-Toolbar-Buttons und Export/Detail-Toggle */
.page-logs .logs-stable-button,
.page-logs .logs-detail-toggle{
  min-width:138px;
  min-height:40px;
  white-space:nowrap;
}
.page-logs .logs-toolbar{
  align-items:end;
}
.page-logs .logs-result-row{
  gap:12px;
}
.page-logs #logs-toggle-all-details{
  visibility:visible;
}
.page-logs #logs-toggle-all-details:disabled{
  opacity:.5;
  pointer-events:none;
}
@media(max-width:760px){
  .page-logs .logs-stable-button,
  .page-logs .logs-detail-toggle{
    width:100%;
    min-width:0;
  }
}