:root{
  /* základ – tieto hodnoty sa prepisujú zo Settings */
  --link: #7c5cff;
  --primary: #7c5cff;
  --on-primary: #ffffff;
  --btn-radius: 12px;
  --menu-text-effective: var(--fg);

  /* pôvodné premenné */
  --bg: #ffffff;
  --fg: #111111;
  --muted: #666;
  --card: #f6f6f8;
  --border: #ddd;

  /* spätná kompatibilita – nech 'accent' a 'btn' berú nastavené akcenty */
  --accent: var(--link);
  --btn: var(--primary);
  --btn-fg: var(--on-primary);

  --chip: #ececff;
  --chip-fg: #333;

  --star-active: #f6c344;  /* zlatá hviezda */
  --star-muted: #bbb;
  --pepper-active: #e74c3c; /* čili */
  --pepper-muted: #bbb;

  --ribbon-shadow: rgba(0,0,0,.2);
}

/* Canonical header rules */
.head-line{ display:flex; align-items:center; gap:10px; justify-content:flex-end; }
.head-actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.head-search{ width: clamp(260px, 36vw, 520px); position: relative; }



.theme-dark{
  --bg: #0e0e12;
  --fg: #f2f2f4;
  --muted: #9aa0a6;
  --card: #17171c;
  --border: #2a2a33;
  --chip: #212135;
  --chip-fg: #d0d0ff;
  /* --btn-fg nechávame na --on-primary; neprepíname na #111 */
}

html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.muted{color:var(--muted)}
.container{max-width:1100px;margin:0 auto;padding:16px}

/* Topbar */
.topbar{overflow:visible;display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index: 10001;}
.brand{font-weight:700}
.brand .brand-link{color:var(--fg)}
.menu{display:flex;gap:10px;margin-left:auto}
.menu a{padding:6px 8px;border-radius:10px; color: var(--menu-text-effective); }
.menu a:hover{background:var(--card);text-decoration:none}
.burger{display:none}
@media (max-width:980px){
  .burger{display:inline-flex;flex-direction:column;gap:3px;background:transparent;border:0;cursor:pointer}
  .burger span{width:20px;height:2px;background:var(--fg)}
  .menu{display:none;position:absolute;right:12px;top:46px;background:var(--bg);border:1px solid var(--border);border-radius:12px;flex-direction:column;padding:8px;min-width:180px}
  .menu.open{display:flex}
}

/* Search */
.search{flex:1;max-width:420px;margin-left:8px;position:relative}
.search-input{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--fg)}
.suggest{ z-index: 10000; position:absolute;left:0;right:0;top:100%;background:var(--bg);border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.suggest.hidden{display:none}
.suggest a{display:block;padding:10px 12px;color:var(--fg)}
.suggest a:hover{background:var(--card);text-decoration:none}

/* Buttons & inputs */
.btn{
  background: var(--primary);
  color: var(--on-primary);
  border:0;
  border-radius: var(--btn-radius);
  padding:8px 12px;
  cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.1);
  font-weight:600
}
.btn:hover{opacity:.95}
.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--fg)}
.btn-ghost-sm{background:transparent;border:1px solid var(--border);color:var(--fg);border-radius:10px;padding:6px 8px}
.btn-icon{border:1px solid var(--border);background:transparent;border-radius:10px;padding:6px 8px}
.btn-icon.active{background:var(--card)}
.btn-add{display:inline-flex;align-items:center;gap:8px}
.link-like{background:transparent;border:0;color:var(--accent);cursor:pointer}

.input-text,.input-select,.input-textarea{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--bg);color:var(--fg)}
.input-textarea{min-height:120px}
.input-label{display:block;margin:8px 0}
.input-with-icon{position:relative}
.icon-search{width:18px;height:18px;position:absolute;right:10px;top:50%;transform:translateY(-50%);opacity:.6}

/* kompaktnejšie selecty a filtre */
.select-compact{padding-right:28px;min-width:150px}
.filter-search{max-width:260px}

/* Flash */
.flash-stack{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.flash{padding:10px 12px;border-radius:12px}
.flash.success{background:#d1fae5;color:#065f46}
.flash.danger{background:#fee2e2;color:#7f1d1d}
.flash.warning{background:#fff7ed;color:#7c2d12}

/* Layout helpers */
.row-ctrl{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:8px 0 12px}
.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.inline{display:inline-flex;gap:8px;align-items:center}
.gap-12{gap:12px}
.mt-2{margin-top:8px}
.mt-6{margin-top:12px}
.pad{padding:12px}

/* Cards grid */
.grid{display:grid;grid-template-columns:repeat( auto-fill, minmax(220px, 1fr) );gap:14px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.title{font-weight:700;padding:8px 10px 0}
.meta{padding:0 10px 8px;color:var(--muted);font-size:14px}
.row-between{display:flex;align-items:center;justify-content:space-between}

/* Cover block + transparent fallback */
.cover{position:relative;padding-top:150%;overflow:hidden;border-bottom:1px solid var(--border);background:transparent}
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover.placeholder{background:transparent}

/* Fallback bez farby – stred titulku cez flex */
.cover-fallback{
  position:absolute; inset:0;
  width:100%; height:100%;
  background:transparent;
  padding:12px;
  z-index:1;
}
.cover-overlay-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:.45; filter:grayscale(1);
  z-index:0;
}
.cover-fallback-title{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  max-width:82%;
  text-align:center;
  font-weight:800;
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.6);
  line-height:1.25;
  word-break:break-word;
  margin:0;
  padding:0 4px;
  z-index:2;
  pointer-events:none;
}

/* Corner ribbon nad obálkou */
.corner-ribbon{position:absolute;top:8px;left:0;width:0;height:0;border-top:22px solid var(--gc, #777);border-right:22px solid transparent;z-index:3;filter:drop-shadow(0 2px 2px var(--ribbon-shadow))}
.cover-link{position:relative;display:block}

/* Read badge/pill */
.read-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #660e0e;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  z-index: 4;
}
.read-pill {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 20px; height: 20px;
  background: #660e0e;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  margin-left: 6px;
}

/* Tags & chips */
.tag{display:inline-block;background:var(--chip);color:var(--chip-fg);border-radius:999px;padding:2px 8px;margin:2px 2px 0 0;white-space:nowrap;border:1px solid var(--border)}
.rating-chip{display:inline-block;background:var(--chip);color:var(--chip-fg);border-radius:8px;padding:2px 6px;margin-left:6px;font-size:12px}

/* small numeric badge */
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:22px;padding:0 8px;border-radius:999px;background:var(--chip);color:var(--chip-fg);font-weight:700}

/* Table */
.table{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:14px;overflow:hidden}
.table th,.table td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}
.table thead th{background:var(--card)}
.cell-title a{font-weight:700}

/* Modal */
.modal{position:fixed;inset:0;display:none;z-index:2000}
.modal.open{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:2000}
.modal-dialog{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:16px;max-width:520px;margin:8vh auto;padding:12px;z-index:2001;outline:none}
.modal-head{display:flex;align-items:center;justify-content:space-between}
.modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.rate-row{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:10px 0}
.rate-row .hint{color:var(--muted);font-size:12px}

/* Klikateľné ★/🌶 v modale */
#rate-modal .stars button,
#rate-modal .peppers button{
  background:transparent;border:0;font-size:22px;line-height:1;cursor:pointer;opacity:.7;padding:4px 6px;transition:transform .08s ease, opacity .08s ease;
}
#rate-modal .stars button.active{opacity:1;color:var(--star-active);transform:scale(1.06)}
#rate-modal .peppers button{filter:grayscale(1)}
#rate-modal .peppers button.active{opacity:1;filter:none;transform:scale(1.06)}

/* Detail – rating block icons (colored) */
.icon-stars{display:inline-block;font-size:18px;vertical-align:middle}
.icon-stars .on{color:var(--star-active)}
.icon-stars .off{color:var(--star-muted)}
.icon-peppers{display:inline-block;font-size:18px;vertical-align:middle}
.icon-peppers .on{color:var(--pepper-active)}
.icon-peppers .off{color:var(--pepper-muted)}

/* Book detail */
.book-detail{display:grid;grid-template-columns:240px 1fr;gap:16px;margin:12px 0 18px;align-items:flex-start}
.cover-lg-wrap{position:relative}
.cover-lg{width:100%;padding-top:150%;background-position:center;background-size:cover;border-radius:16px;border:1px solid var(--border);overflow:hidden;background-color:transparent}
.placeholder-xl{border-radius:16px;border:1px solid var(--border);position:relative;background:transparent}
.cover-overlay{position:absolute;inset:0}
.cover-title{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
  color:#fff;
  font-weight:800;
  text-align:center;
  text-shadow:0 3px 10px rgba(0,0,0,.55);
  line-height:1.3;
}

.info div{margin:4px 0}

/* Cards (alternatíva – ak používaš book-card) */
.book-card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.cover-wrap{position:relative}
.cover-wrap img{display:block;width:100%;height:auto}
.cover-wrap .cover-fallback{display:block;opacity:.85}
.read-flag{position:absolute;top:8px;right:8px;background:rgba(0,0,0,.6);color:#fff;border-radius:10px;padding:2px 6px;font-size:12px;z-index:4}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(3, minmax(0,1fr));gap:10px;margin:10px 0}
.stat{display:block;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px;text-align:center;color:inherit}
.stat:hover{text-decoration:none;background:transparent}
.stat-num{font-size:28px;font-weight:800}
.stat-label{color:var(--muted)}

/* ==== FORCE TRANSPARENT COVERS (grid aj detail) ==== */
.cover,
.cover-lg,
.cover-fallback,
.placeholder-xl {
  background-color: transparent !important;
  background-image: inherit;
}

/* (len na mriežke) dekor pod obálkou – čisto vizuálne */
.cover::after,
.cover-lg::after {
  content: "";
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  height: 22px;
  background: url("{{ url_for('static', filename='cover.png') }}") center/cover no-repeat;
  opacity: .35;
  pointer-events: none;
}

/* červené papričky všade */
.rating-block .pep { font-size: 18px; opacity:.35; color:#bbb; }
.rating-block .pep.on { opacity:1; color:#e74c3c; }

/* farba a tvar odznaku "prečítané" pri obálke */
.read-badge{
  background:#660e0e !important;
  width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
}

/* modal – papričky červené pri aktívnom stave */
#rate-modal .peppers button.active { color:#e74c3c; filter:none; opacity:1; transform:scale(1.05); }

/* ==== Theme-aware farba fallback titulku na obálke ==== */
.theme-dark .cover-fallback-title{
  color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.65);
}
.theme-light .cover-fallback-title{
  color:#111;
  text-shadow:0 1px 0 rgba(255,255,255,.6), 0 0 1px rgba(0,0,0,.15);
}

/* ==== Autocomplete ==== */
.ac-list{
  position:absolute; z-index:1000; background:var(--bg);
  border:1px solid var(--border); border-radius:12px; padding:4px;
  box-shadow:0 10px 22px rgba(0,0,0,.18); max-height:240px; overflow:auto; min-width:220px;
}
.ac-list > div{
  padding:.45rem .6rem; border-radius:8px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer;
}
.ac-list > div:hover{ background:var(--card); }

/* ==== Autor karty ==== */
.author-card{padding:10px;gap:10px}
.author-head{display:flex;align-items:center;gap:10px;padding:8px 10px 0}
.author-head .avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--chip-fg);font-weight:800}
.author-head .name{font-weight:800}
.author-stats{display:flex;gap:8px;align-items:center;padding:8px 10px 12px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--chip);color:var(--chip-fg);border-radius:10px;padding:4px 8px;border:1px solid var(--border)}

/* ==== Zoznamy karty ==== */
.list-card{padding:12px}
.list-head{display:flex;align-items:center;gap:10px}
.list-icon{font-size:20px}
.list-name{font-weight:800}
.list-meta{margin-top:8px;display:flex;align-items:center;justify-content:space-between}

/* ===== Page head pre knihy ===== */
.page-head { margin: 6px 0 12px; }
.head-row{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
}
.btn-add{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:16px;
}
.btn-add .plus-icon{ width:18px; height:18px; }

/* druhý riadok – filtre vpravo */
.filters-row{
  display:flex; align-items:center; justify-content:flex-end;
  gap:10px; flex-wrap:wrap; margin-top:10px;
}
.filters-form{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* vyhľadávanie – širšie pole bez placeholderu, lupa vpravo */
.search-compact{ width:min(620px, 65vw); position:relative; }
.search-compact .input-text{
  width:100%; padding-right:38px; /* miesto pre ikonu */
}
.search-compact .icon-search{ right:12px; }

/* kompaktné selecty (šírka podľa obsahu) */
.select-compact{
  width:auto; min-width:0; padding:8px 10px; border-radius:12px;
}

/* kompaktné prepínače zobrazenia */
.view-toggle .viewbtn{
  width:38px; height:38px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px;
}
.view-toggle .icon-24{ width:20px; height:20px; fill:currentColor; }
.view-toggle .btn-icon.active{
  background: var(--primary);
  color: var(--on-primary);
  border-color: transparent;
}

/* responzívne – na menších šírkach rozhoď na 2 riadky a 100% šírky vyhľadávania */
@media (max-width:980px){
  .filters-row{ justify-content:stretch; }
  .filters-form{ flex: 1 1 auto; }
  .search-compact{ width:100%; }
}

/* ===== Nové rozloženie hlavičky stránok s filtrami ===== */
.page-head { margin: 6px 0 12px; }
.head-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
}
/* Form ako 2 riadky: 1) vyhľadávanie, 2) filtre */
.filters-form{
  display:grid; gap:10px;
  grid-template-columns: 1fr;
}
.filters-line{
  display:flex; align-items:center; gap:10px; justify-content:flex-end; flex-wrap:wrap;
}

/* Vyhľadávanie v hlavičke – užšie (cca tretina–polka šírky) */
.head-search .input-text{ width:100%; padding-right:38px; }
.head-search .icon-search{ right:12px; }

/* Krátšie selecty + kompaktnejšie view tlačidlá */
.select-compact{ width:auto; min-width:0; padding:8px 10px; border-radius:12px; }
.view-toggle .viewbtn{
  width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:12px;
}
.view-toggle .icon-24{ width:20px; height:20px; fill:currentColor; }
.view-toggle .btn-icon.active{ background:var(--primary); color:var(--on-primary); border-color:transparent; }

/* Add tlačidlo – minimalistické plus */
.btn-add{ display:inline-flex; align-items:center; gap:10px; padding:10px 14px; border-radius:16px; }
.btn-add .plus-icon{ width:18px; height:18px; }

/* Mobile */
@media (max-width:980px){
  .head-row{ align-items:flex-start; }
  .filters-line{ justify-content:stretch; }
  
}

/* ===== Achievements – cards ===== */
.ach-row-title{margin:22px 0 10px;font-weight:900;font-size:20px}
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.ach-card{background:var(--card,#151515);border:1px solid var(--border,#2a2a2a);border-radius:18px;padding:16px 14px;box-shadow:0 10px 22px rgba(0,0,0,.22);display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;transition:transform .08s ease,box-shadow .08s ease}
.ach-card:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(0,0,0,.28)}
.ach-card.locked{opacity:.75;filter:grayscale(.9) contrast(.95)}
.ach-earned{position:absolute;top:8px;left:10px;font-size:11px;line-height:1;background:rgba(0,0,0,.35);padding:3px 7px;border-radius:999px;color:#fff}
.ach-icon{width:92px;height:92px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.04);position:relative;overflow:hidden}
.ach-icon img{max-width:80%;max-height:80%;object-fit:contain}
.ach-lock{position:absolute;right:6px;bottom:6px;font-size:16px;opacity:.9}
.ach-name{font-weight:900;text-align:center}
.ach-desc{color:var(--muted,#9aa0a6);font-size:13px;text-align:center;min-height:18px}
.ach-bar-wrap{width:100%;height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ach-bar{height:100%;width:0;background:var(--primary,#7c5cff);transition:width .25s ease}
.ach-numbers{font-size:12px;color:var(--muted,#9aa0a6);text-align:center}
.ach-card[title]{cursor:help}
@media (max-width:640px){.ach-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ============================= */
/* Dekoratívne KVETY pri dne     */
/* ============================= */
.bg-flowers{
  position: fixed;
  inset: auto 0 0 0;     /* dolu cez celú šírku */
  height: 30vh;
  pointer-events: none;
  z-index: 0;            /* pod obsahom */
}
.bg-flowers .flowers{
  position: absolute;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom;
  width: 50%;
  height: 100%;
  opacity: .9;
  filter: saturate(1) brightness(1);
}
.theme-dark .bg-flowers .flowers{ filter: saturate(.95) brightness(.9); }

/* default (mobile & tablet): iba LEFT + RIGHT */
.bg-flowers .flowers.left{
  left: 0;
  background-image: url("{{ url_for('static', filename='flower_left.png') }}");
  width: 55%;
}
.bg-flowers .flowers.right{
  right: 0;
  background-image: url("{{ url_for('static', filename='flower_right.png') }}");
  width: 55%;
}
.bg-flowers .flowers.center{ display:none; }

/* rezervácia miesta dole, aby kvety neprekrývali obsah */
main.container{ position: relative; z-index: 1; padding-bottom: clamp(120px, 18vh, 220px); }

/* notebook/desktop: pridaj stred + jemne zvýš výšku */
@media (min-width: 1024px){
  .bg-flowers{ height: 34vh; }
  .bg-flowers .flowers.center{
    display:block;
    left: 25%;
    right: 25%;
    width: 50%;
    background-image: url("{{ url_for('static', filename='flowers_middle.png') }}");
    background-position: bottom center;
  }
  .bg-flowers .flowers.left{ left: 0; width: 40%; }
  .bg-flowers .flowers.right{ right: 0; width: 40%; }
  main.container{ padding-bottom: clamp(160px, 22vh, 300px); }
}

/* 3D kniha – centrovanie na mobile (fallback, ak ho niekde nemáš) */
@media (max-width: 640px){
  .bd-col-left{ display:flex; justify-content:center; }
  .book3d-detail{ display:flex; justify-content:center; }
}


/* Non-overlapping header layout */
.btn-add{ flex:0 0 auto; }



/* === Header layout (scoped, authoritative) === */
.head-actions .head-actions .head-search .input-text{ width:100%; padding-right:38px; }
.head-actions .btn-add{ flex:0 0 auto; position:static; }



/* === Mobile/Tablet tweaks === */
@media (max-width: 600px){
  .topbar .search{ flex: 1 1 auto; min-width: 140px; }
  .topbar .search .search-input{ width: 58vw; max-width: 58vw; }
}

/* Rating modal: smaller on phones */
@media (max-width: 480px){
  .modal-dialog{ max-width: 92vw !important; margin: 6vh auto; padding: 10px; }
  .modal-head h3{ font-size: 16px; }
  .modal-body{ font-size: 14px; }
  .modal-body .stars button, .modal-body .peppers button{ width: 28px; height: 28px; font-size: 18px; }
  .rate-row{ grid-template-columns: 1fr auto 1fr; }
}

/* Lists/Authors cards: robust meta row */
.list-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.list-meta .chip{ flex: 1 1 auto; min-width: 0; }
.list-card .btn{ flex: 0 0 auto; }

.author-card .author-stats{ display:flex; align-items:center; justify-content:space-between; gap:8px; }

/* === Desktop grids back to 4 columns for Books & Wishlist === */
@media (min-width: 1200px){
  #books-grid, #wishlist-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* === Chip nowrap & alignment fixes (lists/authors) === */
.chip{ white-space: nowrap; line-height: 1; }
.list-meta .chip, .author-stats .chip{ display: inline-flex; align-items: center; gap: 6px; }
.list-meta .btn{ white-space: nowrap; }

/* Make sure meta rows never break awkwardly */
@media (max-width: 600px){
  .list-meta{ gap: 10px; }
}


/* === Mobile-only fixes: chips & meta rows for Authors/Lists === */
@media (max-width: 600px){
  /* Keep chips horizontal and compact */
  .chip{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap; line-height:1; font-size:12px; padding:6px 8px; }
  /* Authors: two chips (Books, Series) side-by-side */
  .author-card .author-stats{ display:grid; grid-template-columns: 1fr 1fr; gap:8px; align-items:center; }
  /* Lists: keep count chip and button on one line */
  .list-card .list-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:nowrap; }
  .list-card .list-meta .chip{ max-width: 60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .list-card .btn{ flex:0 0 auto; white-space:nowrap; }
}



/* === Scoped responsive grids (books/authors/wishlist only) === */
@media (max-width: 480px){
  #books-grid, #authors-grid, #wishlist-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width: 481px) and (max-width: 768px){
  #books-grid, #authors-grid, #wishlist-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1199px){
  #books-grid, #authors-grid, #wishlist-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}
@media (min-width: 1200px){
  #books-grid, #authors-grid, #wishlist-grid { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
}



/* === App grid responsiveness (scoped; forms unaffected) === */
@media (max-width: 480px){
  #authors-grid, #books-grid, #list-grid, #lists-grid, #wishlist-grid { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (min-width: 481px) and (max-width: 768px){
  #authors-grid, #books-grid, #list-grid, #lists-grid, #wishlist-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (min-width: 769px) and (max-width: 1199px){
  #authors-grid, #books-grid, #list-grid, #lists-grid, #wishlist-grid { grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}
@media (min-width: 1200px){
  #authors-grid, #books-grid, #list-grid, #lists-grid, #wishlist-grid { grid-template-columns: repeat(6, minmax(0,1fr)) !important; }
}



/* Overview (Prehľad) — 4 cards per row on mobile */


/* Overview desktop 5 cols */
@media (min-width: 1200px){
  #overview-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}


/* Books desktop 5 cols */
@media (min-width: 1200px){
  #books-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)) !important; }
}


/* Mobile menu default closed */
@media (max-width: 980px){
   /* keep flow */
  
}



/* Mobile menu dropdown vertically */
@media (max-width: 980px){
  header, .topbar{ position: relative; }
  
  
  
}



/* === Mobile menu: vertical dropdown under header, within viewport === */
@media (max-width: 980px){
  header, .topbar { position: relative; }
  
  
  
}



/* === FORCE: Mobile menu vertical dropdown under header === */
@media (max-width: 980px){
  header, .topbar { position: relative; }
  nav.menu
  nav.menu
  nav.menu
}



/* === Mobile menu: narrower right-aligned panel === */
@media (max-width: 980px){
  header nav.menu
}



/* === Mobile hardening: no horizontal panning === */
html, body { max-width: 100vw; overflow-x: hidden; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; display: block; }
.row, .grid, .inline, .flex, .topbar, .menu { min-width: 0; }
@media (max-width: 980px){
  .topbar{  }
  /* Dropdown menu never wider than viewport */
  .menu{ max-width: calc(100vw - 24px); box-sizing: border-box; }
}
/* When menu is open, lock page scroll (including sideways) */
body.menu-open { overflow: hidden !important; overscroll-behavior: contain; touch-action: pan-y; }





@media (min-width: 981px){
  .grid.books-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* === Books grid columns === */
/* Mobile & tablet (<=980px): 3 columns */
@media (max-width: 980px){
  .grid.books-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Desktop (>=981px): 5 columns */
@media (min-width: 981px){
  .grid.books-grid{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* # DETAIL PAGE TWEAKS */
@media (max-width: 980px){
  section.bd-grid{ grid-template-columns: 1fr !important; }
  section.bd-grid .bd-col-left{ align-items:center; }
  /* keep ratings split two columns but let it use full width */
  section.bd-grid .bd-col-right .ratings-split{ width: 100%; }
}

/* MENU FIX */
.burger{ z-index: 10001; }
@media (max-width: 980px){
  
  
  
}

/* Overview grid mobile 3 cols */
@media (max-width: 980px){
  #overview-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* MENU FINAL FIX */
.burger{ z-index: 10010; }
@media (max-width: 980px){
  header, .topbar{ position:sticky; top:0; }
  
  
}


/* === MOBILE HEADER LAYOUT FIX (applies to books & wishlist) === */
@media (max-width: 980px){
  .page-head .head-row{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
  .page-head .head-actions{ width:100%; }
  .page-head .head-actions .head-line{ width:100%; display:flex; align-items:center; gap:8px; }
  .page-head .head-actions .head-search{ flex:1; min-width:0; }
  .page-head .head-actions .head-search input{ width:100%; }
  .page-head .head-actions .btn.btn-add{ padding:10px 12px; }
  .page-head .filters-line{ width:100%; display:flex; gap:8px; flex-wrap:wrap; }
  .page-head .filters-line .input-select{ flex:1; min-width: 160px; }
}

/* === MENU (mobile) === */
@media (max-width: 980px){
  #main-menu{ display:none; position:absolute; left:12px; right:12px; top:calc(100% + 8px);
    background:var(--card); border:1px solid var(--border); border-radius:12px;
    box-shadow:0 16px 40px rgba(0,0,0,.45); transform:translateY(-8px); opacity:0;
    z-index: 10009; }
  #main-menu.open{ display:block !important; transform:translateY(0); opacity:1; }
}

@media (max-width: 980px){
  .topbar .menu{display:none
  width: min(62vw, 200px);}
}

@media (max-width: 980px){
  .topbar .menu.open{display:flex}
}

@media (max-width: 980px){
    font-size: 13.5px;
  .topbar .menu a{ display:flex; justify-content:flex-start; width:100%; }
}


/* >>> FORCE VERTICAL MOBILE DROPDOWN (right-aligned) <<< */
@media (max-width: 980px){
  .topbar .menu{
    display: none !important;
    position: absolute; right: 12px; top: calc(var(--tb-h) - 8px);
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    padding: 4px 6px; gap: 3px; z-index: 9999;
    width: clamp(140px, 60vw, 180px);
    max-height: 70vh; overflow-y: auto;
    flex-direction: column !important; align-items: stretch !important; white-space: normal;
    box-shadow: 0 18px 50px -20px rgba(0,0,0,.5);
  }
  .topbar .menu.open{ display: flex !important; }
  .topbar .menu a{
    display: flex !important; justify-content: flex-start !important; width: 100% !important;
    height: 34px; padding: 0 10px; border-radius: 10px; font-size: 13.5px;
  }
}


/* Make any stat/card fully clickable without double borders */
.stat{ position: relative; }
.stretched-link{
  position:absolute; inset:0; display:block; border:0; background:transparent; text-decoration:none;
}
.stretched-link:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:4px;
  border-radius:inherit;
}

/* genre bookmark SVG namiesto trojuholníka */
.genre-flag{
  position:absolute; top:8px; left:0;
  width:28px; height:28px; z-index:3;
  filter:drop-shadow(0 2px 2px var(--ribbon-shadow));
  pointer-events:none;
}

.corner-ribbon{display:none!important}

.genre-flag{position:absolute;top:8px;left:0;width:28px;height:28px;z-index:3;filter:drop-shadow(0 2px 2px var(--ribbon-shadow));pointer-events:none}

/* --- bigger genre bookmark --- */
.genre-flag{
  width:36px; height:36px;      /* bolo ~28px -> zväčšíme */
  top:6px; left:4px;            /* mierne prisunieme */
  z-index:3;
  filter:drop-shadow(0 2px 2px var(--ribbon-shadow));
  pointer-events:none;
}
@media (min-width: 768px){
  .genre-flag{ width:42px; height:42px; top:6px; left:4px; }
}

/* --- bookmark prisunutý k hornému kraju obálky --- */
.genre-flag{
  top: 0;              /* bolo ~6–8px, teraz úplne k okraju */
  left: 0;
  transform: translateY(-2px); /* jemne „zarezne“ do hornej hrany, pôsobí ako pravá záložka */
  /* ostatné vlastnosti (width/height/z-index/filter) nechávame */
}

/* ak máš väčší rozmer pre desktop, nechaj – len posun rovnaký */
@media (min-width: 768px){
  .genre-flag{ top: 0; left: 0; transform: translateY(-2px); }
}

/* --- tweak: bookmark ešte vyššie pri hrane --- */
.genre-flag{ top:0; left:0; transform: translateY(-6px) !important; }
@media (min-width:768px){
  .genre-flag{ transform: translateY(-7px) !important; }
}