:root { --bg:#14161a; --fg:#e7e9ee; --muted:#9aa3b2; --line:#2a2f39; --accent:#5b9dff; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg);
       font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
#dropzone { min-height:100vh; padding:2rem 1.25rem; max-width:60rem; margin:0 auto; }
#dropzone.drag-over { outline:2px dashed var(--accent); outline-offset:-1rem; }
h1 { font-size:1.5rem; margin:0 0 .25rem; letter-spacing:-.01em; }
.hint { color:var(--muted); margin:0 0 1.5rem; }
.linklike { background:none; border:none; color:var(--accent); font:inherit;
            padding:0; cursor:pointer; text-decoration:underline; }
.error { color:#ff8080; border:1px solid #6b2020; background:#2a1414;
         padding:.6rem .8rem; border-radius:6px; }
.files { list-style:none; padding:0; margin:0 0 1.5rem; }
.files li { display:flex; gap:.75rem; align-items:baseline; padding:.5rem .75rem;
            border:1px solid var(--line); border-radius:6px; margin-bottom:.4rem; }
.files .fname { font-weight:600; }
.files .fmeta { color:var(--muted); font-size:.875rem; }
.tiles { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit, minmax(14rem,1fr)); }
.tile { display:flex; flex-direction:column; gap:.35rem; padding:1.25rem;
        border:1px solid var(--line); border-radius:10px; text-decoration:none;
        color:inherit; background:#1a1d23; }
.tile:hover, .tile:focus-visible { border-color:var(--accent); }
.tile-name { font-weight:600; }
.tile-desc { color:var(--muted); font-size:.875rem; }
.tile.armed { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
/* Kafel jako cel zrzutu: wyraźnie widoczny, żeby było wiadomo, gdzie plik wyląduje. */
.tile.drag-over { border-color:var(--accent); background:#20293a;
                  box-shadow:0 0 0 2px var(--accent) inset; }
.tile.busy { opacity:.6; pointer-events:none; }
/* Narzędzie jeszcze niedostępne — kafel widoczny, ale wyraźnie nieaktywny. */
.tile[data-ready="0"] { opacity:.5; cursor:not-allowed; }
.tile[data-ready="0"]:hover { border-color:var(--line); }