:root{
  --bg:#0b0f14;          /* Tiefes Dunkel */
  --panel:#131a22;       /* Karten/Paneele */
  --muted:#9fb3c8;       /* Sekundärtext */
  --text:#e8f0f7;        /* Primärtext */
  --acc:#4da3ff;         /* Akzent */
  --acc-2:#7cf29a;       /* Zweit-Akzent */
  --border:#1f2a36;      /* feine Linien */
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --radius:14px;
  --transition: all 0.2s ease;
}
@media (prefers-color-scheme: light){
  :root{ 
    --bg:#f5f7fb; 
    --panel:#ffffff; 
    --text:#0b0f14; 
    --muted:#435469; 
    --border:#e8eef5; 
    --shadow:0 10px 30px rgba(0,0,0,.08);
  }
  body{ 
    background-image: 
      radial-gradient(1200px 1200px at 80% -200px, rgba(77,163,255,.15), transparent), 
      radial-gradient(900px 900px at -100px 120%, rgba(124,242,154,.12), transparent);
  }    
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  line-height:1.45;
  background-image: 
    radial-gradient(1200px 1200px at -20% -200px, rgba(77,163,255,.18), transparent), 
    radial-gradient(900px 900px at 120% 120%, rgba(124,242,154,.13), transparent);
}
a{color:inherit; text-decoration:none;}

/* Layout */
.container{max-width:1100px; margin-inline:auto; padding:24px;}
header{display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:24px;}
.brand{display:flex; gap:14px; align-items:center}
.logo{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, #4da3ff, #7cf29a); box-shadow:var(--shadow); font-weight:900; color:#0b0f14; transition:var(--transition);}
.logo:hover{transform:scale(1.05);}
.title h1{margin:0; font-size:clamp(22px, 2.4vw, 30px)}
.title p{margin:4px 0 0; color:var(--muted); font-size:14px}

.actions{display:flex; gap:10px; flex-wrap:wrap}
.chip{background:transparent; border:1px solid var(--border); color:var(--text); padding:10px 12px; border-radius:999px; display:flex; align-items:center; gap:8px; transition:var(--transition);}
.chip:hover{background:rgba(255,255,255,0.05);}
.chip kbd{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; background: #0b1520; border:1px solid var(--border); padding:1px 6px; border-radius:6px; color:var(--muted)}
.admin-btn{border-style:dashed; font-weight:600}

/* Toolbar */
.toolbar{margin-top:18px; background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:14px; display:grid; gap:10px; grid-template-columns:1fr auto auto; align-items:center; box-shadow:var(--shadow); transition:var(--transition);}
@media (max-width:700px){ .toolbar{grid-template-columns:1fr;}}
.toolbar:focus-within{box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 0 2px var(--acc);}

.input{position:relative}
.input input{
  width:100%; background:#0f1620; border:1px solid var(--border); color:var(--text); padding:12px 14px 12px 40px; border-radius:10px; outline:none; transition:var(--transition);
}
.input input:focus{border-color:var(--acc); box-shadow:0 0 0 2px rgba(77,163,255,0.2);}
.input .icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); opacity:.6}

.select, .btn{
  appearance:none; background:#0f1620; border:1px solid var(--border); color:var(--text); padding:12px 14px; border-radius:10px; outline:none; cursor:pointer; font-weight:600; transition:var(--transition);
}
.select:focus, .btn:focus{border-color:var(--acc); box-shadow:0 0 0 2px rgba(77,163,255,0.2);}
.btn{ background: linear-gradient(180deg, rgba(77,163,255,.18), rgba(77,163,255,.1)); border:1px solid #2a4668 }
.btn:hover{background: linear-gradient(180deg, rgba(77,163,255,.25), rgba(77,163,255,.15)); transform:translateY(-1px);}
.btn.secondary{ background:transparent; border:1px dashed var(--border); font-weight:500 }
.btn.secondary:hover{background:rgba(255,255,255,0.05);}

/* Grid */
.grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:16px; margin-top:18px }
@media (max-width:950px){ .grid{grid-template-columns: repeat(2, minmax(0,1fr));}}
@media (max-width:620px){ .grid{grid-template-columns: 1fr;}}

/* Card */
.card{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow); transition:var(--transition); position:relative; overflow:hidden;}
.card:hover{transform:translateY(-2px); box-shadow:0 15px 35px rgba(0,0,0,.4);}
.card::before{content:''; position:absolute; top:0; left:0; width:100%; height:4px; background:linear-gradient(90deg, var(--acc), var(--acc-2)); opacity:0.8;}
.badge{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--border); color:var(--muted); transition:var(--transition);}
.badge:hover{background:rgba(255,255,255,0.05);}
.name{font-size:18px; font-weight:800; letter-spacing:.2px; margin:0}
.desc{margin:0; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.meta{display:flex; flex-wrap:wrap; gap:10px; font-size:13px; color:var(--muted)}
.meta .dot{width:4px; height:4px; border-radius:999px; background:var(--border)}

.actions-row{display:flex; gap:10px; flex-wrap:wrap}
.download{flex:1; min-width:180px; text-align:center; text-decoration:none; background:linear-gradient(180deg, rgba(124,242,154,.32), rgba(124,242,154,.15)); border:1px solid #3c7a57; padding:12px 14px; border-radius:10px; font-weight:800; transition:var(--transition); color:var(--text); text-shadow:none;}
.download:hover{background:linear-gradient(180deg, rgba(124,242,154,.4), rgba(124,242,154,.22)); transform:translateY(-1px);}
.ghost{border:1px solid var(--border); padding:12px 14px; border-radius:10px; text-decoration:none; display:flex; gap:8px; align-items:center; color:var(--text); background:transparent; cursor:pointer; transition:var(--transition);}
.ghost:hover{background:rgba(255,255,255,0.05);}

.download-panel{margin-top:6px; border:1px dashed var(--border); border-radius:12px; padding:14px; background:#0f1620; display:flex; flex-direction:column; gap:12px; box-shadow:inset 0 0 10px rgba(0,0,0,0.15);}
.download-panel[hidden]{display:none !important;}
.download-panel__header{display:flex; justify-content:space-between; align-items:flex-start; gap:12px;}
.download-panel__title{margin:0; font-weight:700; font-size:15px;}
.download-panel__desc{margin:2px 0 0; font-size:13px; color:var(--muted);}
.download-panel .close-panel{padding:8px 10px; border-radius:999px; border:1px solid var(--border);}
.download-options{display:flex; flex-direction:column; gap:8px;}
.download-option{border:1px solid var(--border); border-radius:10px; padding:12px; display:flex; gap:12px; align-items:flex-start; text-decoration:none; background:rgba(255,255,255,0.02); transition:var(--transition);}
.download-option:hover{border-color:var(--acc); background:rgba(77,163,255,0.08); transform:translateY(-1px);}
.download-option__icon{font-size:20px; line-height:1;}
.download-option__body{display:flex; flex-direction:column; gap:2px; color:var(--text);}
.download-option__label{font-weight:700;}
.download-option__desc{font-size:13px; color:var(--muted);}

/* Admin Tools */
.admin-panel{margin-top:32px; border:1px solid var(--border); border-radius:16px; background:rgba(15,22,32,0.95); padding:20px; box-shadow:0 20px 40px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:20px;}
.admin-panel[hidden]{display:none;}
.admin-panel__header{display:flex; justify-content:space-between; align-items:flex-start; gap:14px;}
.admin-panel__header h2{margin:0; font-size:20px;}
.admin-panel__header p{margin:4px 0 0; color:var(--muted);}
.admin-panel__body{display:grid; gap:20px; grid-template-columns:1.1fr 0.9fr;}
@media (max-width:900px){.admin-panel__body{grid-template-columns:1fr;}}
.admin-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted);}
.admin-form input,
.admin-form textarea,
.admin-form select{background:#0b1520; border:1px solid var(--border); color:var(--text); border-radius:10px; padding:10px 12px; font-size:14px; font-family:inherit; transition:var(--transition);}
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus{border-color:var(--acc); box-shadow:0 0 0 2px rgba(77,163,255,0.2); outline:none;}
.form-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px;}
.form-grid .full-width{grid-column:1 / -1;}
@media (max-width:700px){.form-grid{grid-template-columns:1fr;}}
.downloads-group{margin-top:10px; border:1px dashed var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:12px;}
.downloads-group__header{display:flex; justify-content:space-between; align-items:center; gap:12px;}
.hint{margin:0; font-size:13px; color:var(--muted);}
.download-field{border:1px solid rgba(255,255,255,0.05); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:8px; background:rgba(0,0,0,0.15);}
.download-field__grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.download-field__grid .full-width{grid-column:1 / -1;}
@media (max-width:600px){.download-field__grid{grid-template-columns:1fr;}}
.download-field__actions{display:flex; justify-content:flex-end;}
.admin-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px;}
.admin-output{border:1px solid var(--border); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; background:#0b1520;}
.admin-output__actions{display:flex; flex-wrap:wrap; gap:8px;}
.admin-output textarea{width:100%; min-height:240px; border:1px solid var(--border); border-radius:12px; background:#050b12; color:var(--text); font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; padding:12px; resize:vertical;}

.more{font-size:13px; color:var(--muted)}
details{border-top:1px dashed var(--border); padding-top:10px}
code{background:#0b1520; border:1px solid var(--border); padding:2px 6px; border-radius:6px}

/* Footer */
footer{margin:36px 0 10px; color:var(--muted); font-size:13px; text-align:center}

/* Loading animation */
.loading{display:none; text-align:center; padding:20px; color:var(--muted);}
.loading.active{display:block;}
.loading-spinner{display:inline-block; width:20px; height:20px; border:2px solid rgba(77,163,255,0.3); border-radius:50%; border-top-color:var(--acc); animation:spin 1s ease-in-out infinite; margin-right:10px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Empty state */
.empty-state{text-align:center; padding:40px 20px; color:var(--muted);}
.empty-state svg{width:64px; height:64px; margin-bottom:16px; opacity:0.5;}

/* Statistics */
.stats{display:flex; gap:16px; margin:16px 0; flex-wrap:wrap; justify-content:center;}
.stat-item{background:var(--panel); border:1px solid var(--border); border-radius:var(--radius); padding:12px 16px; text-align:center; min-width:120px;}
.stat-value{font-size:24px; font-weight:700; color:var(--acc);}
.stat-label{font-size:12px; color:var(--muted); margin-top:4px;}

/* Toast */
.toast{position:fixed; bottom:20px; left:50%; transform:translateX(-50%) translateY(100px); background:var(--panel); border:1px solid var(--border); padding:12px 20px; border-radius:var(--radius); box-shadow:var(--shadow); z-index:1000; transition:transform 0.3s ease; color:var(--text);}
.toast.show{transform:translateX(-50%) translateY(0);}