/* DNKY Downloads – flaches Hell/Dunkel-Design (Vorlage: Prototyp der Spec) */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Farben ---------- */
:root[data-theme="light"] {
  color-scheme: light;
  --page: #f5f5f7; --nav: #fff; --card: #fff; --text: #1d1d1f; --muted: #6e6e73;
  --line: #e5e5ea; --field: #ededf0; --hover: #fafafa;
  --accent: #008b8b; --accent-text: #007a7a; --on-accent: #fff;
  --folder-bg: #e0f2f1; --folder-fg: #007a7a;
  --image-bg: #fdf3d0; --image-fg: #9a6b00;
  --video-bg: #ffe6dc; --video-fg: #c8501f;
  --plain-bg: #ededf0; --plain-fg: #6e6e73;
  --code-comment: #8e8e93; --code-key: #007a7a; --code-string: #c8501f;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #000; --nav: #000; --card: #1c1c1e; --text: #f5f5f7; --muted: #98989d;
  --line: #2c2c2e; --field: #2c2c2e; --hover: #242426;
  --accent: #40c8be; --accent-text: #40c8be; --on-accent: #00201f;
  --folder-bg: #0f3b39; --folder-fg: #40c8be;
  --image-bg: #3d3207; --image-fg: #ffd60a;
  --video-bg: #43200f; --video-fg: #ff8a65;
  --plain-bg: #2c2c2e; --plain-fg: #98989d;
  --code-comment: #6e6e73; --code-key: #40c8be; --code-string: #ff8a65;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--page);
  color: var(--text);
  min-height: 100vh;
}

/* Lucide-Icons (inline, stroke="currentColor") nehmen die Textfarbe an */
svg.lucide { display: block; stroke-width: 1.75; }
button, input { font: inherit; color: inherit; border: none; background: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Kopfzeile ---------- */
.nav { height: 52px; display: flex; align-items: center; border-bottom: 1px solid var(--line); background: var(--nav); }
.nav-inner, .main { width: 100%; max-width: 880px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.nav-inner { display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; margin-right: auto; white-space: nowrap; }
.brand-mark { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: var(--on-accent); }
.brand-mark svg.lucide { width: 14px; height: 14px; stroke-width: 2; }

.search { display: flex; align-items: center; gap: 8px; width: 220px; height: 32px; padding: 0 12px; border-radius: 16px; background: var(--field); color: var(--muted); font-size: 14px; }
.search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.search button { flex: none; display: grid; place-items: center; height: 32px; color: inherit; }
.search button:focus-visible { outline: none; }
.search svg { width: 15px; height: 15px; }
.search input { flex: 1; min-width: 0; height: 32px; color: var(--text); -webkit-appearance: none; appearance: none; }
.search input::placeholder { color: var(--muted); opacity: 1; }
.search input:focus-visible { outline: none; }
.search input::-webkit-search-decoration { -webkit-appearance: none; }

.theme { display: flex; flex: none; padding: 2px; border-radius: 16px; background: var(--field); }
.theme button { width: 30px; height: 28px; border-radius: 14px; display: grid; place-items: center; color: var(--muted); }
.theme button svg { width: 15px; height: 15px; }
.theme button[aria-pressed="true"] { background: var(--card); color: var(--text); }
:root[data-theme="dark"] .theme button[aria-pressed="true"] { background: #48484a; }

/* ---------- Inhalt ---------- */
.main { padding-top: 44px; padding-bottom: 56px; }
.crumb { font-size: 13px;color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumb a { color: var(--accent-text); }
.crumb svg { width: 12px; height: 12px; flex: none; }
h1 { margin-top: 10px; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -0.022em; overflow-wrap: anywhere; }
.meta { margin-top: 8px; font-size: 15px; color: var(--muted); }

/* ---------- Ordner ---------- */
.search-active { margin-top: 20px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.search-active a { color: var(--accent-text); font-weight: 500; }
.list { margin-top: 32px; background: var(--card); border-radius: 16px; overflow: hidden; }
.search-active + .list, .search-active + .note { margin-top: 12px; }
.row { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) 150px 84px 40px; align-items: center; column-gap: 14px; min-height: 60px; padding: 0 16px; border-bottom: 1px solid var(--line); cursor: pointer; }
.row:last-child { border-bottom: none; }
.row:hover { background: var(--hover); }
.row:hover .name { color: var(--accent-text); }
.name { display: block; font-size: 15px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Der Namens-Link deckt die ganze Zeile ab; der Laden-Knopf liegt darüber */
.name::after { content: ""; position: absolute; inset: 0; }
.name:focus-visible { outline: none; }
.name:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.row:first-child .name:focus-visible::after { border-radius: 16px 16px 0 0; }
.row:last-child .name:focus-visible::after { border-radius: 0 0 16px 16px; }
.row:only-child .name:focus-visible::after { border-radius: 16px; }
.sub { display: none; font-size: 13px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kind, .size { font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.size { text-align: right; font-variant-numeric: tabular-nums; }
.act { display: flex; justify-content: flex-end; }
.ico { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; }
.ico svg { width: 20px; height: 20px; }
.t-folder { background: var(--folder-bg); color: var(--folder-fg); }
.t-image { background: var(--image-bg); color: var(--image-fg); }
.t-video { background: var(--video-bg); color: var(--video-fg); }
.t-plain { background: var(--plain-bg); color: var(--plain-fg); }
.chev { color: var(--muted); padding-right: 7px; }
.chev svg { width: 16px; height: 16px; }
.round { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--field); color: var(--accent-text); display: grid; place-items: center; }
.round svg { width: 15px; height: 15px; stroke-width: 2; }
.round:hover { background: var(--accent); color: var(--on-accent); }

/* Hinweistext: leerer Ordner, keine Treffer, Fehlerseite */
.note { margin-top: 32px; padding: 48px 16px; background: var(--card); border-radius: 16px; text-align: center; font-size: 15px; color: var(--muted); }
.note a { color: var(--accent-text); font-weight: 500; }

/* ---------- Datei ---------- */
.file-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.file-head > div:first-child { min-width: 0; }
.file-head h1 { font-size: 32px; }
.buttons { display: flex; align-items: center; gap: 8px; flex: none; }
.btn { height: 36px; padding: 0 16px; border-radius: 18px; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.btn svg { width: 15px; height: 15px; stroke-width: 2; }
.btn.primary { background: var(--accent); color: var(--on-accent); }
.btn.quiet { background: var(--field); color: var(--text); }
.menu { position: relative; }
.menu-pop { display: none; position: absolute; right: 0; top: 44px; min-width: 250px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; z-index: 5; }
.menu.open .menu-pop { display: block; }
.menu-pop button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; font-size: 14px; }
.menu-pop button:hover { background: var(--field); }
.menu-pop small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }

.stage { position: relative; margin-top: 28px; background: var(--card); border-radius: 16px; overflow: hidden; display: grid; place-items: center; min-height: 440px; }
.stage img { display: block; max-width: 100%; max-height: 520px; padding: 40px; }
:root[data-theme="dark"] .stage:has(img) { background: #e5e5ea; }
.stage-note { padding: 24px; text-align: center; font-size: 15px; color: var(--muted); }
/* Ohne JavaScript ersetzt der noscript-Hinweis den Lade-Hinweis */
.stage:has(noscript .stage-note) > .stage-note { display: none; }
.no-preview { display: grid; justify-items: center; gap: 16px; padding: 24px; text-align: center; font-size: 15px; color: var(--muted); }
.no-preview svg { width: 56px; height: 56px; stroke-width: 1.5; }

/* Video: schwarze 16:9-Fläche, Player füllt sie */
.stage[data-kind="video"] { display: block; background: #000; aspect-ratio: 16 / 9; min-height: 0; }
.stage[data-kind="video"] video, .stage[data-kind="video"] .plyr { display: block; width: 100%; height: 100%; }
.stage[data-kind="video"] .stage-note { position: absolute; inset: 0; display: grid; place-items: center; color: #98989d; pointer-events: none; }
.plyr { --plyr-color-main: var(--accent); }
/* Solange ein Hinweis angezeigt wird, bleibt der Player verborgen (kein Überlappen mit dem Play-Knopf) */
.stage[data-kind="video"]:has(.stage-note) .plyr { visibility: hidden; }

/* Code: Quelltext mit Zeilennummern, scrollt in der Fläche */
.stage:has(pre) { display: block; place-items: normal; max-height: 560px; overflow: auto; }
pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; line-height: 1.65; padding: 20px 24px; counter-reset: ln; }
pre code { font: inherit; }
pre span.l { display: block; white-space: pre; }
pre span.l::before { counter-increment: ln; content: counter(ln); display: inline-block; width: 28px; margin-right: 20px; text-align: right; color: var(--code-comment); opacity: 0.7; }
.token.comment { color: var(--code-comment); }
.token.key, .token.atrule, .token.keyword, .token.property, .token.tag, .token.title { color: var(--code-key); }
.token.string, .token.attr-value, .token.number { color: var(--code-string); }

/* ---------- schmal ---------- */
@media (max-width: 640px) {
  .nav-inner, .main { padding-left: 16px; padding-right: 16px; }
  .search { width: 32px; padding: 0; justify-content: center; }
  .search input { display: none; }
  .nav:not(.is-open) .search button { width: 32px; }
  .search button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 16px; }
  .search:focus-within { outline: none; }
  /* Aufgeklappt: Suchfeld als zweite Zeile in voller Breite */
  .nav.is-open { height: auto; }
  .nav.is-open .nav-inner { flex-wrap: wrap; row-gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .nav.is-open .search { order: 1; width: 100%; padding: 0 12px; justify-content: flex-start; }
  .nav.is-open .search:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav.is-open .search button:focus-visible { outline: none; }
  .nav.is-open .search input { display: block; font-size: 16px; }
  .main { padding-top: 28px; }
  h1 { font-size: 30px; }
  .list, .note { margin-top: 24px; }
  .row { grid-template-columns: 36px minmax(0, 1fr) 40px; padding: 0 12px; }
  .kind, .size { display: none; }
  .sub { display: block; }
  .file-head { flex-direction: column; align-items: stretch; gap: 20px; }
  .file-head h1 { font-size: 24px; }
  .buttons .primary { flex: 1; justify-content: center; }
  .stage { min-height: 300px; margin-top: 20px; }
  .stage img { padding: 24px; }
  pre { font-size: 12px; padding: 16px; }
}