:root {
    --bg: #111317;
    --panel: #1b1e24;
    --text: #e8e8ea;
    --muted: #9a9ca3;
    --accent: #e5a00d;
    --error: #ff6b6b;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
}

/* Notch und Home-Leiste freihalten */
.page {
    padding: max(12px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
             max(12px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

.boot { display: grid; place-items: center; height: 100vh; color: var(--muted); }

h1 { font-size: 20px; margin: 0 0 8px; }
h2 { font-size: 16px; margin: 16px 0 8px; color: var(--muted); font-weight: 600; }

textarea {
    width: 100%; min-height: 90px; background: var(--panel); color: var(--text);
    border: 1px solid #333; border-radius: 8px; padding: 8px; font-size: 14px;
}

button {
    background: var(--accent); color: #111; border: 0; border-radius: 8px;
    padding: 9px 14px; font-size: 15px; font-weight: 600; margin: 6px 6px 0 0;
}
button.secondary { background: #2b2f37; color: var(--text); }

.error { color: var(--error); margin: 8px 0; white-space: pre-wrap; }
.muted { color: var(--muted); }

.stats {
    background: var(--panel); border-radius: 8px; padding: 8px 10px; margin: 8px 0;
    font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5;
    white-space: pre-wrap;
}

.lib {
    display: block; width: 100%; text-align: left; background: var(--panel); color: var(--text);
    font-weight: 400; margin: 0 0 6px;
}
.lib small { color: var(--muted); display: block; }

.grid-row { display: grid; gap: 6px; padding-bottom: 6px; }

.tile { position: relative; background: #22252c; border-radius: 6px; overflow: hidden; }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 5px; font-size: 11px;
    background: linear-gradient(transparent, rgba(0,0,0,.85));
}

#blazor-error-ui {
    background: #5a1d1d; color: #fff; bottom: 0; display: none; left: 0;
    padding: 10px 16px; position: fixed; width: 100%; z-index: 1000;
}
#blazor-error-ui .dismiss { position: absolute; right: 12px; top: 8px; cursor: pointer; }
#blazor-error-ui a { color: #fff; }