:root {
  --bru-accent: #EC6E32;
  --bru-bg: #0b0b0b;
  --bru-surface: #111;
  --bru-card: #171717;
  --bru-text: #eee;
  --bru-muted: #aaa;
  --bru-radius: 14px;
  --bru-shadow: 0 10px 30px rgba(0,0,0,0.35);
  --bru-border: #222;

  /* velikosti: povečali XL */
  --tile: 220px;  /* default XL */
  --font: 1.1rem;
}
* { box-sizing: border-box; }
body { margin:0; background: var(--bru-bg); color: var(--bru-text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans'; font-size: var(--font); }

.bru-wrap.bru-full { min-height: 100vh; background: var(--bru-bg); color: var(--bru-text); }
.bru-topbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .9rem 1rem; background: linear-gradient(180deg, #151515, #0f0f0f);
  border-bottom: 1px solid var(--bru-border); position: sticky; top:0; z-index:10;
}
.bru-breadcrumbs { display:flex; align-items:center; gap:.25rem; flex-wrap:wrap; }
.bru-crumb { border: none; background: transparent; color: var(--bru-text); opacity:.9; font-weight:700; cursor:pointer; padding:.3rem .6rem; border-radius: 10px; }
.bru-crumb:hover { background: rgba(236,110,50,0.18); color:#fff; }
.bru-sep { color: #666; margin: 0 .25rem; }
.bru-right { display:flex; align-items:center; gap:.6rem; }
.bru-divider { display:inline-block; width:1px; height:28px; background:#2a2a2a; margin: 0 .25rem; }
.bru-search input[type="search"] { background:#0c0c0c; border:1px solid var(--bru-border); color:var(--bru-text); padding:.6rem .7rem; border-radius: 10px; width: 260px; outline:none; }
.bru-search input[type="search"]::placeholder { color:#777; }
.bru-btn { background: var(--bru-accent); color:#fff; border:0; padding:.7rem 1rem; border-radius:10px; cursor:pointer; font-weight:800; box-shadow: 0 8px 18px rgba(236,110,50,.32); }
.bru-btn:hover { transform: translateY(-1px); }
.bru-btn.ghost { background: transparent; border:1px solid var(--bru-border); color: #fff; box-shadow:none; }
.bru-btn.outline { background: transparent; border:1px solid var(--bru-accent); color: var(--bru-accent); box-shadow:none; }
.bru-btn.danger { background: #b3261e; box-shadow: 0 8px 18px rgba(179,38,30,.3); }
.bru-admin-actions { display:flex; align-items:center; gap:.5rem; }

.bru-viewsize { display:flex; gap:.25rem; }
.bru-size { background:#0c0c0c; border:1px solid var(--bru-border); color:#ddd; padding:.45rem .6rem; border-radius:8px; cursor:pointer; }
.bru-size.active, .bru-size:hover { border-color: var(--bru-accent); color:#fff; }

.bru-main { padding: 1rem; }
.bru-list { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:1rem; }
.bru-item { display:grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; grid-template-areas: "check thumb" "check text"; gap:.75rem; padding:1rem; background: var(--bru-card); border:1px solid var(--bru-border); border-radius: var(--bru-radius); text-decoration:none; color: var(--bru-text); transition: transform .08s ease, box-shadow .2s ease, border-color .2s ease; }
.bru-item:hover { transform: translateY(-2px); box-shadow: var(--bru-shadow); border-color:#333; }
.bru-item.selected { outline: 2px solid var(--bru-accent); }
.bru-check { grid-area: check; margin-top:.45rem; transform: scale(1.2); }
.bru-thumb { grid-area: thumb; width: var(--tile); height: var(--tile); border-radius: 14px; background:#0d0d0d; display:grid; place-items:center; overflow:hidden; border:1px solid var(--bru-border); }
.bru-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.bru-icon { color: var(--bru-accent); }
.bru-textwrap { grid-area: text; display:flex; flex-direction:column; }
.bru-name { font-weight:800; font-size: 1.1rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bru-meta { color: var(--bru-muted); font-size:1rem; margin-top:.2rem; }

.bru-dropzone { position: fixed; inset: 0; background: rgba(236,110,50,.08); border: 2px dashed var(--bru-accent); display:none; place-items:center; z-index: 1000; }
.bru-dropzone.show { display:grid; }
.bru-drop-inner { background: rgba(17,17,17,.95); padding: 2rem; border-radius: 16px; border:1px solid var(--bru-border); text-align:center; }
.bru-drop-icon { color: var(--bru-accent); display:grid; place-items:center; }
.bru-drop-text { margin-top:.5rem; font-weight:800; color:#fff; }

.bru-toast { position: fixed; right: 16px; bottom: 16px; background: #141414; border-left: 4px solid var(--bru-accent); padding: .9rem 1.1rem; border-radius: 10px; box-shadow: var(--bru-shadow); transition: opacity .25s ease; opacity: 0; max-width: 70vw; z-index: 9999; color:#fff; font-size:1.05rem; }
.bru-toast.error { border-left-color: #d33; }
.bru-toast.ok { border-left-color: #2b8a3e; }

dialog#bru-login-modal, dialog#bru-trash-modal, dialog#bru-lightbox, dialog#bru-history-modal { border: 1px solid var(--bru-border); border-radius: 12px; background: #111; color: var(--bru-text); padding: 1rem; }
.bru-modal { display:flex; flex-direction:column; gap:.6rem; }
.bru-modal h3 { margin:.25rem 0; }
.bru-modal input[type="password"] { background:#0c0c0c; border:1px solid var(--bru-border); color:var(--bru-text); padding:.6rem .7rem; border-radius: 10px; outline:none; }
.bru-modal-actions { display:flex; align-items:center; gap:.5rem; }
.bru-hint { color: var(--bru-muted); font-size:.95rem; }

.bru-searchinfo { background: #141414; border:1px solid var(--bru-border); padding:.5rem .7rem; border-radius:10px; }
.bru-trash-list { max-height: 60vh; overflow:auto; display:flex; flex-direction:column; gap:.5rem; }
.bru-trash-item { display:flex; align-items:center; justify-content:space-between; gap:.5rem; background:#161616; border:1px solid var(--bru-border); padding:.6rem .7rem; border-radius:10px; }
.bru-trash-name { font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bru-trash-actions { display:flex; gap:.4rem; }

/* Lightbox */
#bru-lightbox::backdrop { background: rgba(0,0,0,.7); }
.bru-lightbox-wrap { position: relative; }
#bru-lightbox-img { max-width: 90vw; max-height: 80vh; display:block; border-radius: 8px; }
.bru-lightbox-close { position:absolute; right:0; top:0; }

/* velikostne stopnje na <body> */
body.size-m { --tile: 120px; --font: 1rem; }
body.size-l { --tile: 170px; --font: 1.05rem; }
body.size-xl { --tile: 220px; --font: 1.1rem; }