/* Krähenhort - Neon-Noir-Design (nach der Cardputer-Firmware Krähenauge).
   Wird in jeder Seite NACH deren eigenem <style> geladen und ueberschreibt Farben, Schrift
   und Bauteile. Dunkel = Neon Noir (Standard), hell = Neon Papier (Schalter oben rechts).
   Schrift ("Neon klar"): Lesetext in JetBrains Mono (OFL, static/fonts/LICENSE-jetbrains-mono.txt;
   --f-s / --f-m), die Pixel-Schrift Spleen (BSD, static/fonts/LICENSE-spleen.txt) nur noch fuer
   Wortmarke, Kartentitel und grosse Zahlen (--f-l / --f-px) - dort in ihren Rastergroessen
   16 / 24 / 48 px, sonst wird sie unscharf. */

@font-face { font-family: 'Spleen6'; src: url('/static/fonts/spleen-6x12.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Spleen8'; src: url('/static/fonts/spleen-8x16.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Spleen12'; src: url('/static/fonts/spleen-12x24.woff2') format('woff2'); font-display: swap; }
/* Ergaenzung fuer Zeichen, die Spleen fehlen - gleicher Name, nur dieser Zeichenbereich */
@font-face { font-family: 'Spleen6'; src: url('/static/fonts/spleen-plus-6x12.woff2') format('woff2'); unicode-range: U+2013-2014, U+2018-201E, U+2022, U+2026, U+20AC; }
@font-face { font-family: 'Spleen8'; src: url('/static/fonts/spleen-plus-8x16.woff2') format('woff2'); unicode-range: U+201A-201B, U+201E; }
@font-face { font-family: 'Spleen12'; src: url('/static/fonts/spleen-plus-12x24.woff2') format('woff2'); unicode-range: U+201A-201B, U+201E; }
/* JetBrains Mono, Latin-Teilmenge (Fontsource 5.3.0): Umlaute, ß, €, „“, –, … enthalten */
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrains-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/fonts/jetbrains-mono-600.woff2') format('woff2'); font-weight: 600 700; font-display: swap; }

/* ---------------------------------------------------------------- Neon Papier (hell) */
:root {
--f-s: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
--f-m: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
--f-l: 'Spleen12', ui-monospace, monospace;
--f-px: 'Spleen8', ui-monospace, monospace;

--bg: #eef2f5;
--text: #2b3440;
--text-muted: #4f5b69;
--text-faint: #6b7785;
--card-bg: #ffffff;
--border: #d3dbe3;
--border-strong: #b3c0cc;
--hover-bg: #e2edf1;
--heading: #05070a;
--btn-primary-bg: #008c9c;
--btn-primary-hover: #00707d;
--progress-bg: #d3dbe3;
--progress-fill: #008c9c;
--shadow: none;
--modal-bg: rgba(5, 7, 10, 0.85);

--nn-cy: #008c9c;
--nn-mg: #d4145a;
--nn-on: #ffffff;        /* Text auf Cyan */
--nn-bright: #05070a;
--nn-ok: #11804a;
--nn-warn: #b85a00;
--nn-err: #c8102e;
}

/* ------------------------------------------------------------ Neon Noir (dunkel) */
[data-theme="dark"] {
--bg: #05070a;
--text: #c8d5e2;
--text-muted: #a0b1c3;
--text-faint: #8193a8;
--card-bg: #0b1016;
--border: #1f2a37;
--border-strong: #2c3a4c;
--hover-bg: #0f1822;
--heading: #e8f6ff;
--btn-primary-bg: #05d9e8;
--btn-primary-hover: #6ff0f8;
--progress-bg: #1c2633;
--progress-fill: #05d9e8;
--shadow: none;
--modal-bg: rgba(0, 0, 0, 0.9);

--nn-cy: #05d9e8;
--nn-mg: #ff2a6d;
--nn-on: #000000;
--nn-bright: #e8f6ff;
--nn-ok: #39ff88;
--nn-warn: #ff8c1a;
--nn-err: #ff2a3a;
}

/* ------------------------------------------------------------------ Grundlagen */
html { -webkit-font-smoothing: antialiased; font-synthesis: none; }
body { font-family: var(--f-m); font-size: 16px; line-height: 1.4; }
/* Pixel-Schrift ohne Kantenglaettung, sonst verschwimmt sie */
.nn-wordmark, .nn-boot, .stat-value-big, .card h2, .card h3, .sidebar-card h3 { -webkit-font-smoothing: none; }
/* Grundschrift fuer Formularelemente mit Null-Spezifitaet: jede Regel der Seite (z.B. 12 px +
   Spleen 6x12) gewinnt, nur der Browser-Standard wird ersetzt */
:where(button, input, select, textarea) { font-family: var(--f-m); font-size: 16px; }
*, *::before, *::after { border-radius: 0 !important; }
::selection { background: var(--nn-cy); color: var(--nn-on); }
a { color: var(--nn-cy); }
h1, h2, h3, h4 { letter-spacing: 0; font-weight: normal; }

/* Karten: kantig, ohne Schatten, Titel in Magenta */
.card, .sidebar-card, .content-card, .actions-card, .storage-box, .modal-content,
.confirm-dialog, .upload-float-panel, .toast { box-shadow: none !important; }
.card h2, .card h3, .sidebar-card h3 { color: var(--nn-mg); text-transform: uppercase; font-family: var(--f-px) !important; font-size: 16px !important; letter-spacing: 1px; }

/* Kopfzeile mit cyaner Linie */
.header { border-bottom: 1px solid var(--nn-cy); }

/* Eingaben: aktive mit Magenta-Kante wie auf dem Cardputer */
input[type="text"], input[type="password"], input[type="search"], input:not([type]), select, textarea {
background: var(--card-bg); color: var(--nn-bright); border: 1px solid var(--border-strong);
}
input:focus, select:focus, textarea:focus {
outline: none; border-color: var(--nn-cy) !important; box-shadow: inset 3px 0 0 var(--nn-mg) !important;
}
input[type="checkbox"] {
appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex-shrink: 0; cursor: pointer;
border: 1px solid var(--border-strong); background: var(--card-bg); vertical-align: middle;
}
input[type="checkbox"]:checked { background: var(--nn-cy); border-color: var(--nn-cy); box-shadow: inset 0 0 0 3px var(--card-bg); }

/* Buttons: Umriss in Cyan, Hauptaktion gefuellt */
button, .btn-download, .btn-preview, .dropzone-buttons label, .upload-action-buttons button {
box-shadow: none !important;
}
.btn-primary, .login-card button[type="submit"] { background: var(--nn-cy) !important; color: var(--nn-on) !important; border: 1px solid var(--nn-cy) !important; }
.login-card button[type="submit"] { text-transform: uppercase; }
.btn-primary:hover, .login-card button[type="submit"]:hover { background: var(--card-bg) !important; color: var(--nn-cy) !important; }
.btn-restore { background: var(--nn-cy); color: var(--nn-on); }
.btn-danger-solid { background: var(--nn-err) !important; color: #000 !important; }

/* Balken segmentiert wie auf dem Cardputer */
.progress-bar-bg, .upload-file-bar-bg, .cpu-core-bar {
background: repeating-linear-gradient(90deg, var(--progress-bg) 0 3px, transparent 3px 5px) !important;
}
.progress-bar-fill, .upload-file-bar-fill, .cpu-core-bar-fill {
background: repeating-linear-gradient(90deg, var(--nn-cy) 0 3px, transparent 3px 5px) !important;
}
.progress-bar-fill.warning { background: repeating-linear-gradient(90deg, var(--nn-err) 0 3px, transparent 3px 5px) !important; }

/* Auswahl in Listen: cyaner Balken, Magenta-Kante */
.file-row.selected, .list-row.selected, tr.selected, .item-row.selected {
background: var(--nn-cy) !important; color: var(--nn-on) !important; box-shadow: inset 3px 0 0 var(--nn-mg);
}

/* Meldungen: Kante links statt Rundung */
.toast { border-left-width: 3px; }

/* ---------------------------------------------------------------- Wortmarke */
.nn-wordmark, h1.nn-wordmark, .login-card h1.nn-wordmark {
font-family: var(--f-l) !important; font-size: 48px !important; line-height: 1; color: var(--nn-bright) !important;
text-shadow: -3px 0 var(--nn-mg), 3px 0 var(--nn-cy); letter-spacing: 2px; margin: 0 0 6px;
}
.nn-wordmark.small, h1.nn-wordmark.small { font-size: 24px !important; text-shadow: -2px 0 var(--nn-mg), 2px 0 var(--nn-cy); letter-spacing: 1px; }
.nn-sub { color: var(--text-faint); font-family: var(--f-m); font-size: 16px; }

/* ---------------------------------------------------------------- Startbild (boot.js) */
.nn-boot {
position: fixed; inset: 0; z-index: 99999; background: var(--bg); color: var(--text); cursor: pointer;
font-family: var(--f-m); font-size: 16px; line-height: 1.25;
display: flex; align-items: center; justify-content: center; transition: opacity .25s steps(3);
}
.nn-boot-out { opacity: 0; }
.nn-boot-noise b { position: absolute; height: 1px; display: block; }
.nn-boot-main { text-align: center; visibility: hidden; }
.nn-boot-on .nn-boot-main { visibility: visible; }
.nn-boot-name {
position: relative; font-family: var(--f-l); font-size: 48px; line-height: 1; color: var(--nn-bright);
letter-spacing: 3px; text-shadow: -3px 0 var(--nn-mg), 3px 0 var(--nn-cy);
}
.nn-boot-jit .nn-boot-name { transform: translateX(3px); text-shadow: -6px 0 var(--nn-mg), 5px 0 var(--nn-cy); }
.nn-boot-sub { color: var(--text-faint); margin: 10px 0 24px; }
.nn-boot-bar { width: 260px; height: 12px; border: 1px solid var(--nn-cy); padding: 2px; margin: 0 auto; text-align: left; }
.nn-boot-bar i { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, var(--nn-cy) 0 3px, transparent 3px 5px); }
.nn-boot-line { width: 260px; margin: 10px auto 0; text-align: left; color: var(--nn-mg); min-height: 20px; }
.nn-boot-skip { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; color: var(--border-strong); font-family: var(--f-s); font-size: 12px; }

/* CORVUS-Version im Kopf (klein, unauffaellig) */
.nn-corvus { font-family: var(--f-s); font-size: 12px; color: var(--text-faint); }

/* ---------------------------------------------------------------- Lesbarkeit Desktop-Ansicht
   Nur die Desktop-Seite (index.html, erkennbar an .page-wrap) - Mobil/Login bleiben unberuehrt. */
body:has(.page-wrap) { font-size: 14px; }
body:has(.page-wrap) :is(button, a.btn, label.upload-label-btn, .file-size, .select-all-label, .sort-select, .storage-box,
.stat-label, .stat-sub, .stat-value, .backup-item-name, .backup-item-detail, .backup-item-badge, .dropzone,
.extract-zip-label, .pagination-info, .io-arrow, .nn-corvus, .storage-breakdown-note) { font-size: 13px !important; }
body:has(.page-wrap) :is(.storage-breakdown-row, .user-info, .breadcrumb, .io-value) { font-size: 14px !important; }

/* Upload/Ordner-Karten flacher, damit die Liste weiter oben beginnt */
.actions-card { padding: 14px 16px !important; }
.actions-card h3 { margin-bottom: 10px !important; }
.dropzone { padding: 10px 12px !important; }
.dropzone br { display: none; }

/* Listenzeilen: mehr Luft, Name hell, Groesse gedaempft, Magenta-Kante beim Ueberfahren */
.content-list li { padding: 10px 12px !important; }
.content-list li:hover { background: var(--hover-bg) !important; box-shadow: inset 3px 0 0 var(--nn-mg); }
.content-list .item-name { font-size: 14px !important; color: var(--nn-bright) !important; }
.content-list .file-size { color: var(--text-faint) !important; }
.content-list:not(.gallery-view) :is(.thumb-img, .file-icon) { width: 36px !important; height: 36px; }

/* Zeilen-Aktionen als Text-Knoepfe statt vier gleich lauter Kaesten; Loeschen gedaempft */
.content-list .btn-group :is(button, a.btn) {
background: transparent !important; border-color: transparent !important; color: var(--nn-cy) !important; padding: 6px 10px !important;
}
.content-list .btn-group :is(button, a.btn):hover { border-color: var(--nn-cy) !important; }
.content-list .btn-group .btn-danger { color: var(--text-faint) !important; }
.content-list .btn-group .btn-danger:hover { color: var(--nn-err) !important; border-color: var(--nn-err) !important; }