:root{
  --bg:#0f1116; --panel:#171a21; --panel2:#1e222b; --line:#2a2f3a;
  --text:#e7eaf0; --muted:#9aa3b2; --accent:#4f8cff; --accent2:#3a6fd8;
  --danger:#ff5c6c; --ok:#36d399;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
code{background:var(--panel2);padding:1px 6px;border-radius:5px;font-size:.9em}
a{color:var(--accent)}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* Topbar */
.topbar{
  position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:10px 18px;background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px}
.logo{color:var(--accent)}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.badge{font-size:12px;color:var(--muted);padding:4px 10px;border:1px solid var(--line);border-radius:20px}
.badge.ok{color:var(--ok);border-color:#1f5d44}
.badge.off{color:var(--muted)}
.user-menu{position:relative;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:8px}
.user-menu .role-tag{font-size:11px;padding:2px 7px;border-radius:8px;background:var(--panel2);border:1px solid var(--line)}

/* Panes */
.tabpane{padding:16px 18px 60px}

/* Toolbar */
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.toolbar input[type=search],.toolbar select{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:9px 12px;border-radius:9px;font-size:14px;outline:none;
}
.toolbar input[type=search]{min-width:220px;flex:1 1 220px;max-width:340px}
.toolbar select:focus,.toolbar input:focus{border-color:var(--accent)}
.stats{color:var(--muted);font-size:13px;margin-left:auto}

button,.btn-primary,.btn-small{font-family:inherit}
.ghost{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:9px 12px;border-radius:9px;cursor:pointer}
.ghost:hover{border-color:var(--accent)}
.btn-primary{
  display:inline-block;background:var(--accent);color:#fff;border:none;
  padding:10px 18px;border-radius:9px;cursor:pointer;text-decoration:none;font-size:14px;font-weight:600;
}
.btn-primary:hover{background:var(--accent2)}
.btn-small{background:var(--accent);color:#fff;padding:7px 12px;border-radius:7px;text-decoration:none;font-size:13px;border:none;cursor:pointer}
.ghost-small{background:rgba(255,255,255,.08);color:#fff}

/* Empty / hints */
.empty{max-width:620px;margin:50px auto;text-align:center;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:34px 28px}
.empty h2{margin:0 0 10px}
.empty p{text-align:left}
.empty .btn-primary{margin-top:10px}
.hint{background:#1d2740;border:1px solid #2c3b63;color:#bcd0ff;padding:10px 14px;border-radius:9px;margin-bottom:14px;font-size:13px;text-align:left}

/* Grid */
.grid{
  display:grid;gap:8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
}
.cell{position:relative;aspect-ratio:1/1;border-radius:10px;overflow:hidden;
  background:var(--panel2);cursor:pointer;border:1px solid var(--line)}
.cell img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .25s ease;opacity:0}
.cell img.loaded{opacity:1}
.cell:hover img{transform:scale(1.06)}
.cell .tag{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.6);
  color:#fff;font-size:11px;padding:2px 7px;border-radius:6px}
.cell .src{position:absolute;right:6px;top:6px;background:rgba(0,0,0,.6);
  color:#fff;font-size:10px;padding:2px 6px;border-radius:6px}
.cell .dl{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.62);
  color:#fff;width:30px;height:30px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;opacity:0;transition:opacity .15s;text-decoration:none;font-size:15px}
.cell:hover .dl{opacity:1}
.cell .meta{position:absolute;left:0;right:0;bottom:0;padding:16px 8px 6px;
  background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:11px;color:#dfe5f0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .15s}
.cell:hover .meta{opacity:1}

.more{text-align:center;margin-top:22px}
.more button{background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:11px 26px;border-radius:10px;cursor:pointer}
.more button:hover{border-color:var(--accent)}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(8,9,13,.95);
  display:flex;align-items:center;justify-content:center}
.lb-stage{max-width:90vw;max-height:82vh;display:flex;align-items:center;justify-content:center}
.lb-stage img,.lb-stage video{max-width:90vw;max-height:82vh;border-radius:8px}
.lb-close{position:absolute;top:16px;right:20px;background:none;border:none;color:#fff;
  font-size:26px;cursor:pointer}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);
  border:none;color:#fff;font-size:40px;width:58px;height:84px;cursor:pointer;border-radius:10px}
.lb-prev{left:18px}.lb-next{right:18px}
.lb-nav:hover{background:rgba(255,255,255,.18)}
.lb-bar{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.55);
  padding:9px 16px;border-radius:10px;max-width:90vw}
.lb-bar span{color:#dfe5f0;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src-badge{background:rgba(255,255,255,.12);padding:2px 8px;border-radius:8px;font-size:11px !important}

/* Album-Picker (Popover aus der Lightbox) */
.album-picker{position:fixed;z-index:80;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:10px;min-width:220px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.album-picker-list{max-height:220px;overflow-y:auto;margin-bottom:8px}
.album-picker-list label{display:flex;align-items:center;gap:8px;padding:6px 4px;font-size:14px;cursor:pointer}
.album-picker form{display:flex;gap:6px}
.album-picker input{flex:1;background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:7px 9px;border-radius:7px;outline:none;font-size:13px}
.album-picker button{background:var(--accent);color:#fff;border:none;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:13px}

/* Login / Registrierung */
.overlay{position:fixed;inset:0;z-index:60;background:rgba(10,11,15,.96);
  display:flex;align-items:center;justify-content:center}
.login-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:34px 30px;width:340px;text-align:center}
.login-box h1{margin:0 0 4px;font-size:22px}
.login-box p{margin:0 0 18px;color:var(--muted)}
.auth-form input{width:100%;padding:11px 13px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);margin-bottom:12px;outline:none}
.auth-form input:focus{border-color:var(--accent)}
.auth-form .btn-primary{width:100%;padding:11px;font-weight:600;margin-bottom:4px}
.pw-field{position:relative}
.pw-field input{padding-right:40px}
.pw-eye{position:absolute;right:6px;top:6px;bottom:6px;width:32px;background:none;border:none;
  color:var(--muted);cursor:pointer;font-size:15px;border-radius:6px}
.pw-eye:hover{color:var(--text);background:var(--line)}
.switch-mode{font-size:13px;margin-top:10px !important}
.err{color:var(--danger);font-size:13px;margin-top:6px;min-height:18px}

/* Toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:11px 18px;border-radius:10px;z-index:70;box-shadow:0 8px 24px rgba(0,0,0,.4)}

/* Admin-Panel (siehe admin-panel.js) */
.modal{position:fixed;inset:0;z-index:90;background:rgba(8,9,13,.7);align-items:center;justify-content:center}
.modal-content{background:var(--panel);border:1px solid var(--line);border-radius:14px;
  width:100%;max-width:900px;max-height:86vh;overflow-y:auto;padding:0}
.modal-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px;border-bottom:1px solid var(--line)}
.modal-header h2{margin:0;font-size:18px}
.modal-body{padding:18px 22px}
.close-btn{background:none;border:none;color:var(--text);font-size:22px;cursor:pointer}
.admin-tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.admin-tab-btn{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px}
.admin-tab-btn.active{color:var(--text);border-color:var(--accent)}
.admin-tab-content table{width:100%;border-collapse:collapse;font-size:13px}
.admin-tab-content th{text-align:left;padding:9px;color:var(--muted);border-bottom:1px solid var(--line);font-weight:600}
.admin-tab-content td{padding:9px;border-bottom:1px solid var(--line)}
.admin-tab-content input,.admin-tab-content select{
  background:var(--panel2);border:1px solid var(--line);color:var(--text);
  padding:8px 10px;border-radius:7px;outline:none;font-size:13px}
.admin-tab-content label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
.admin-status{padding:3px 9px;border-radius:20px;font-size:11px}
.admin-status.approved{color:var(--ok);background:#123b2c}
.admin-status.pending{color:#e8c468;background:#3a3220}
.admin-status.rejected,.admin-status.inactive{color:var(--muted);background:#2a2f3a}
.admin-btn{border:none;padding:5px 9px;border-radius:6px;cursor:pointer;font-size:12px;color:#fff}
.admin-btn.ok{background:#1f7a52}
.admin-btn.danger{background:#a83a45}
.admin-btn.info{background:var(--accent2)}

@media(max-width:640px){
  .topbar{flex-wrap:wrap;gap:10px}
  .stats{width:100%;margin-left:0}
  .grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
}