:root {
    --bg:#0d1117; --bg2:#11161f; --card:#161c27; --line:#252d3a;
    --txt:#e6e9ed; --mut:#8a94a3; --acc:#10b981; --acc2:#34d399;
    --err:#f14668; --discord:#5865F2; --radius:14px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    margin:0; background:radial-gradient(1200px 600px at 50% -200px,#16203080,transparent),var(--bg);
    color:var(--txt); font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    line-height:1.55; min-height:100vh; display:flex; flex-direction:column;
}
.container { width:100%; max-width:880px; margin:0 auto; padding:0 1.2rem; }
main { flex:1; padding-bottom:3rem; }
h1,h2,h3 { line-height:1.2; }
a { color:var(--acc2); }

/* Topbar */
.topbar {
    display:flex; align-items:center; justify-content:space-between; gap:1rem;
    padding:.9rem 1.2rem; border-bottom:1px solid var(--line);
    background:#0d1117cc; backdrop-filter:blur(8px); position:sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--txt); font-size:1.1rem; }
.brand strong { color:var(--acc2); }
.brand-logo { display:flex; }
.topbar-user { display:flex; align-items:center; gap:.6rem; font-size:.9rem; color:var(--mut); }
.who { color:var(--txt); font-weight:600; }
.inline { display:inline; margin:0; }

/* Login-Screen */
.login-screen { display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 140px); padding:2rem 1.2rem; }
.login-box { width:100%; max-width:460px; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem 2rem; box-shadow:0 24px 70px #0006; }
.login-logo { display:inline-block; margin-bottom:1rem; }
.login-box h1 { font-size:1.8rem; margin:0 0 .6rem; }
.login-box .lead { margin:0 auto 1.6rem; max-width:380px; }
.login-box .btn { width:100%; }
.login-box .hint { margin-top:1rem; }

/* Hero */
.hero { text-align:center; padding:4rem 0 2.5rem; }
.hero h1 { font-size:2.4rem; margin:0 0 .6rem; background:linear-gradient(90deg,#fff,#9fe9c8); -webkit-background-clip:text; background-clip:text; color:transparent; }
.lead { font-size:1.15rem; color:var(--mut); max-width:560px; margin:0 auto 1.8rem; }

/* Sections */
section { margin-top:2.4rem; }
section h2 { font-size:1.4rem; margin:0 0 1.1rem; }

/* Steps */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.step { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.3rem; }
.step .num { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--acc); color:#06281a; font-weight:800; margin-bottom:.6rem; }
.step h3 { margin:.2rem 0 .4rem; font-size:1.05rem; }
.step p { margin:0; color:var(--mut); font-size:.92rem; }

/* Rules / FAQ */
.rules { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.rules li { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.8rem 1rem; }
details { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:.4rem 1rem; margin-bottom:.6rem; }
summary { cursor:pointer; font-weight:600; padding:.5rem 0; }
details p { color:var(--mut); margin:.2rem 0 .7rem; }

/* Cards / App */
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem; }
.app { display:grid; gap:1.4rem; }
.card h2 { margin:0 0 1rem; font-size:1.25rem; }
.field { display:block; font-size:.9rem; font-weight:600; margin-bottom:1rem; }
.field input { width:100%; padding:.7rem .8rem; margin-top:.35rem; border:1px solid var(--line); border-radius:9px; background:var(--bg2); color:var(--txt); font-size:1rem; }
.field input:focus { outline:none; border-color:var(--acc); }

/* Dropzone */
.dropzone { border:2px dashed var(--line); border-radius:var(--radius); padding:1.8rem; text-align:center; cursor:pointer; transition:.15s; background:var(--bg2); }
.dropzone:hover, .dropzone:focus, .dropzone.drag { border-color:var(--acc); background:#10b9810d; outline:none; }
.dz-icon { font-size:2rem; }
.dz-empty p { margin:.3rem 0; }
.dz-preview img { max-width:100%; max-height:240px; border-radius:10px; }
.dz-meta { color:var(--mut); font-size:.85rem; margin-top:.6rem; }
.hint { color:var(--mut); font-size:.82rem; }

/* Size + grid preview */
.size-row { display:flex; gap:1rem; align-items:flex-start; margin-top:1.2rem; }
.size-row .field { flex:0 0 110px; margin-bottom:0; }
.grid-preview {
    flex:1; display:grid; gap:0; align-self:center; max-width:200px; max-height:220px;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    background-color:#0b0e14; border-radius:4px;
}
.grid-preview.has-img { background-color:#000; }
.grid-preview span { background:#1f293755; border:1px solid var(--line); }
.grid-preview.has-img span { background:transparent; border:1px solid rgba(255,255,255,.35); }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border:none; border-radius:10px; padding:.8rem 1.2rem; font-size:1rem; font-weight:700; cursor:pointer; text-decoration:none; }
.btn-lg { padding:.95rem 1.6rem; font-size:1.05rem; }
.btn-primary { width:100%; margin-top:1.3rem; background:var(--acc); color:#06281a; }
.btn-primary:hover:not(:disabled) { filter:brightness(1.08); }
.btn-primary:disabled { opacity:.5; cursor:not-allowed; }
.btn-discord { background:var(--discord); color:#fff; }
.btn-discord:hover { filter:brightness(1.08); }
.link { background:none; border:none; color:var(--mut); text-decoration:underline; cursor:pointer; font:inherit; padding:0; }
.link:hover { color:var(--txt); }

/* Progress */
.progress { height:8px; background:var(--bg2); border-radius:6px; overflow:hidden; margin-top:1rem; }
.progress .bar { height:100%; width:0; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .15s; }

/* Messages */
.msg { padding:.75rem .95rem; border-radius:10px; font-size:.92rem; }
.msg.err { background:#f1466826; color:#ff8da3; border:1px solid var(--err); }
.msg.ok { background:#10b98126; color:#7be0a0; border:1px solid var(--acc); margin-top:1rem; }

/* Badge */
.badge { font-size:.7rem; padding:.15rem .5rem; border-radius:6px; background:#10b9812e; color:var(--acc2); border:1px solid var(--acc); text-transform:capitalize; }
.badge-ok { text-transform:none; }

/* Tabs / Kategorien */
.tabs { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.2rem; border-bottom:1px solid var(--line); }
.tab { appearance:none; background:none; border:none; border-bottom:2px solid transparent; color:var(--mut); font:inherit; font-size:.92rem; font-weight:600; padding:.7rem 1rem; cursor:pointer; border-radius:8px 8px 0 0; }
.tab:hover { color:var(--txt); background:var(--bg2); }
.tab.is-active { color:var(--acc2); border-bottom-color:var(--acc); }
.tab.tab-admin { margin-left:auto; }
.tab-panel { display:none; }
.tab-panel.is-active { display:block; }

/* Ziel-Info (verifizierter Account) */
.target-info { background:var(--bg2); border:1px solid var(--line); border-radius:9px; padding:.7rem .85rem; margin:0 0 1rem; font-size:.9rem; color:var(--txt); display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.field[hidden] { display:none; } /* [hidden] sonst von .field{display:block} überstimmt */

/* Maps grid */
.quota { font-size:.8rem; color:var(--mut); font-weight:400; }

/* "Limit erreicht" — Ausweg anbieten statt nur abweisen. Steht sowohl in der
   Fehlermeldung nach dem Upload als auch in der Kontingent-Zeile darueber. */
.shop-hint { margin-top:.45rem; font-size:.85rem; line-height:1.45; }
.shop-hint a { color:var(--acc2); font-weight:600; text-decoration:underline;
               text-underline-offset:2px; }
.shop-hint a:hover { color:var(--acc); }
.quota .shop-hint { display:block; margin-top:.25rem; font-size:.8rem; }
.maps-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.map-item { background:var(--bg2); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.map-item img { width:100%; aspect-ratio:1; object-fit:cover; display:block; background:#0b0e14; }
.map-item .map-meta { padding:.55rem .65rem; font-size:.78rem; color:var(--mut); display:flex; justify-content:space-between; align-items:center; gap:.4rem; }
.map-item .del { color:var(--err); }

/* Footer */
.footer { border-top:1px solid var(--line); padding:1.4rem 0; color:var(--mut); font-size:.85rem; text-align:center; }

@media (max-width:640px){
    .hero h1 { font-size:1.8rem; }
    .steps { grid-template-columns:1fr; }
    .size-row { flex-wrap:wrap; }
}

/* Buch-Editor. Das Bild-Tool hatte nur einzeilige Felder, deshalb hier
   textarea + Meta-Zeile ergaenzt (gleiche Tokens wie der Rest). */
.field textarea { width:100%; margin-top:.35rem; padding:.65rem .8rem; border-radius:10px;
                  background:var(--bg2); border:1px solid var(--line); color:var(--txt);
                  font:inherit; line-height:1.55; resize:vertical; min-height:9rem; }
.field textarea:focus { outline:none; border-color:var(--acc); }
.book-card .field { display:block; margin-bottom:1rem; }
#bookMeta { margin:.1rem 0 1.1rem; }