* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
       background: #14171c; color: #e6e9ee; }
header { display: flex; align-items: center; gap: 16px; padding: 10px 20px;
         background: #1c2129; border-bottom: 1px solid #2b3240; }
header h1 { font-size: 18px; margin: 0; }
header h1 a { color: #7fb4ff; text-decoration: none; }
header .spacer { flex: 1; }
main { padding: 20px; max-width: 1200px; margin: 0 auto; }
button, .btn { background: #2d6cdf; color: #fff; border: 0; border-radius: 6px;
         padding: 7px 14px; font-size: 14px; cursor: pointer; text-decoration: none;
         display: inline-block; }
button.secondary, .btn.secondary { background: #3a4354; }
button.danger { background: #b23b3b; }
button:disabled { opacity: .5; cursor: default; }
input, textarea, select { background: #0f1216; color: #e6e9ee; border: 1px solid #38404e;
         border-radius: 6px; padding: 7px 10px; font-size: 14px; }
textarea { width: 100%; min-height: 70px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #2b3240; font-size: 14px; vertical-align: top; }
.td-wersja { max-width: 180px; overflow-wrap: break-word; }
.td-zrodlo { width: 45%; min-width: 280px; }
.td-zrodlo .zr-text { white-space: pre-line; line-height: 1.45; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.thumb { position: relative; border: 1px solid #2b3240; border-radius: 6px; overflow: hidden;
         cursor: pointer; background: #000; aspect-ratio: 4/3; }
.thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb .badge { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,.7);
         padding: 1px 7px; border-radius: 10px; font-size: 12px; }
.thumb .badge.zero { color: #ff9a9a; }
.card { background: #1c2129; border: 1px solid #2b3240; border-radius: 8px;
        padding: 16px; margin-bottom: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.muted { color: #97a1b0; font-size: 13px; }
#login-box { max-width: 320px; margin: 100px auto; }
#login-box input { width: 100%; margin-bottom: 10px; }
dialog { background: #1c2129; color: #e6e9ee; border: 1px solid #38404e;
         border-radius: 10px; padding: 20px; min-width: 480px; }
dialog::backdrop { background: rgba(0,0,0,.6); }
.s3item { padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 14px; }
.s3item:hover { background: #2b3240; }
.s3item.sel { background: #2d6cdf; }
#toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
         background: #2d6cdf; padding: 10px 18px; border-radius: 8px; display: none; }