:root{
    --bg:#12130f;
    --surface:#1a1b15;
    --surface-2:#21221b;
    --border:#34352a;
    --text:#ede8dc;
    --text-muted:#948f7d;
    --accent:#e8a33d;
    --accent-soft:rgba(232,163,61,0.14);
    --tag:#6b8f71;
    --tag-soft:rgba(107,143,113,0.16);
    --danger:#b5483d;
    --radius:3px;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;height:100%;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Lora', serif;
    -webkit-font-smoothing:antialiased;
  }
  .mono{ font-family:'Space Mono', monospace; }
  button, input, textarea{ font-family:inherit; }
  button{ cursor:pointer; }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

  .app{
    display:flex;
    height:100vh;
    /* dvh se počítá z reálně viditelné výšky (bez adresního řádku prohlížeče),
       vh z celé výšky obrazovky. Prohlížeče, co dvh neznají, řádek ignorují
       a zůstane jim 100vh výše – je to jen vylepšení, ne nutná podmínka. */
    height:100dvh;
    overflow:hidden;
  }

  /* ---------- Sidebar ---------- */
  .sidebar{
    width:300px;
    flex-shrink:0;
    background:var(--surface);
    border-right:1px solid var(--border);
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .brand{
    padding:20px 18px 14px;
    border-bottom:1px solid var(--border);
  }
  .brand h1{
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:20px;
    margin:0 0 2px;
    letter-spacing:0.02em;
  }
  .brand p{
    margin:0;
    font-size:12px;
    color:var(--text-muted);
    font-family:'Space Mono', monospace;
  }
  .search-wrap{
    padding:14px 16px;
    border-bottom:1px solid var(--border);
  }
  .search-wrap input{
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text);
    padding:8px 10px;
    border-radius:var(--radius);
    font-family:'Space Mono', monospace;
    font-size:13px;
  }
  .search-wrap input::placeholder{ color:var(--text-muted); }

  .tree-scroll{
    flex:1;
    overflow-y:auto;
    padding:10px 8px;
  }
  ul.tree, ul.tree ul{
    list-style:none;
    margin:0;
    padding-left:0;
  }
  ul.tree ul{
    margin-left:11px;
    padding-left:11px;
    border-left:1px solid var(--border);
  }
  .node-row{
    display:flex;
    align-items:center;
    gap:4px;
    padding:5px 8px;
    border-radius:var(--radius);
    font-family:'Space Mono', monospace;
    font-size:13.5px;
    color:var(--text);
    cursor:pointer;
    white-space:nowrap;
  }
  .node-row:hover{ background:var(--surface-2); }
  .node-row.active{ background:var(--accent-soft); color:var(--accent); }
  .node-row.dim{ opacity:0.32; }
  .twisty{
    width:14px; height:14px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--text-muted);
    transform:rotate(0deg);
    transition:transform .15s ease;
  }
  .twisty.open{ transform:rotate(90deg); }
  .twisty svg{ width:9px; height:9px; }
  .node-name{ overflow:hidden; text-overflow:ellipsis; }
  .leaf-dot{ width:14px; display:flex; justify-content:center; color:var(--text-muted); font-size:10px; flex-shrink:0;}

  .tags-panel{
    border-top:1px solid var(--border);
    padding:14px 16px 18px;
  }
  .tags-panel h2{
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--text-muted);
    margin:0 0 8px;
    font-weight:400;
  }
  .tag-cloud{ display:flex; flex-wrap:wrap; gap:6px; }
  .tag-chip{
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    padding:3px 8px;
    border-radius:12px;
    background:var(--tag-soft);
    color:var(--tag);
    border:1px solid transparent;
  }
  .tag-chip.clickable{ cursor:pointer; }
  .tag-chip.active{ border-color:var(--tag); background:var(--tag); color:#0e1a10; }

  /* ---------- Main ---------- */
  .main{
    flex:1;
    overflow-y:auto;
    padding:34px 44px 60px;
  }
  .crumb{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:10px;
  }
  .crumb b{ color:var(--text); font-weight:400; }
  .topic-tags{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:26px; }
  .topic-tags .tag-chip{ display:flex; align-items:center; gap:6px; }
  .tag-remove{ background:none; border:none; color:inherit; padding:0; font-size:12px; line-height:1; opacity:0.6; }
  .tag-remove:hover{ opacity:1; }
  .add-tag-btn{
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    color:var(--text-muted);
    background:none;
    border:1px dashed var(--border);
    border-radius:12px;
    padding:3px 9px;
  }
  .add-tag-btn:hover{ color:var(--accent); border-color:var(--accent); }
  .add-tag-input{
    font-family:'Space Mono', monospace;
    font-size:11.5px;
    background:var(--surface-2);
    border:1px solid var(--accent);
    border-radius:12px;
    padding:3px 9px;
    color:var(--text);
    width:110px;
  }

  .tabs{
    display:flex;
    gap:2px;
    border-bottom:1px solid var(--border);
    margin-bottom:20px;
  }
  .tab{
    font-family:'Space Mono', monospace;
    font-size:13px;
    color:var(--text-muted);
    background:none;
    border:none;
    padding:10px 4px;
    margin-right:22px;
    border-bottom:2px solid transparent;
    position:relative;
    top:1px;
  }
  .tab .count{ color:var(--text-muted); font-size:11px; }
  .tab.active{ color:var(--text); border-bottom-color:var(--accent); }
  .tab.active .count{ color:var(--accent); }

  .resource-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:22px; }
  .resource-card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:14px 16px;
    display:flex;
    justify-content:space-between;
    gap:14px;
  }
  .resource-card .rc-title{ font-weight:600; margin:0 0 4px; font-size:15.5px; }
  .resource-card .rc-body{ margin:0; color:var(--text-muted); font-size:14px; line-height:1.5; }
  .resource-card a{ color:var(--accent); text-decoration:none; word-break:break-all; }
  .resource-card a:hover{ text-decoration:underline; }
  .rc-meta{ font-family:'Space Mono', monospace; font-size:11px; color:var(--text-muted); margin-top:8px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
  .platform-badge{
    font-family:'Space Mono', monospace;
    font-size:10.5px;
    padding:2px 7px;
    border-radius:10px;
    color:#0e1a10;
  }
  .rc-edit{
    background:none; border:none; color:var(--text-muted);
    font-size:13px; flex-shrink:0; align-self:flex-start;
  }
  .rc-edit:hover{ color:var(--accent); }
  .rc-delete{
    background:none; border:none; color:var(--text-muted);
    font-size:13px; flex-shrink:0; align-self:flex-start;
  }
  .rc-delete:hover{ color:var(--danger); }
  .empty-state{
    border:1px dashed var(--border);
    border-radius:var(--radius);
    padding:26px;
    color:var(--text-muted);
    font-size:14px;
    margin-bottom:22px;
  }

  .add-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:16px;
  }
  .add-panel-head{
    font-family:'Space Mono', monospace;
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:12px;
  }
  .field{ margin-bottom:10px; }
  .field label{ display:block; font-family:'Space Mono', monospace; font-size:11px; color:var(--text-muted); margin-bottom:4px; }
  .field input[type=text], .field input[type=url], .field textarea{
    width:100%;
    background:var(--bg);
    border:1px solid var(--border);
    color:var(--text);
    padding:8px 10px;
    border-radius:var(--radius);
    font-family:'Lora', serif;
    font-size:14px;
    resize:vertical;
  }
  .field input[type=file]{ font-size:13px; color:var(--text-muted); }
  .doc-mode{ display:flex; gap:14px; margin-bottom:10px; font-family:'Space Mono', monospace; font-size:12px; color:var(--text-muted); }
  .doc-mode label{ display:flex; align-items:center; gap:6px; cursor:pointer; }
  .submit-btn{
    background:var(--accent);
    border:none;
    color:#1d1400;
    font-family:'Space Mono', monospace;
    font-weight:700;
    font-size:13px;
    padding:9px 16px;
    border-radius:var(--radius);
  }
  .submit-btn:hover{ filter:brightness(1.08); }

  .mobile-toggle{ display:none; }

  /* Responzivní pravidla pro mobil jsou schválně na jednom místě, na konci
     souboru (hledej "MOBIL A DOTYKOVÁ ZAŘÍZENÍ") – ať se nerozlézají po celém
     souboru a nerozcházejí se, jako se to stalo tady předtím (tenhle blok
     přepisoval jen display:block, ale .app si nesl height:100vh;overflow:hidden
     z pravidla výše dál, takže na mobilu nešlo scrollovat přes výšku obrazovky). */

  @media (prefers-reduced-motion: reduce){
    *{ transition:none !important; }
  }
  .node-row{ position:relative; }
.node-menu-btn{
  margin-left:auto;
  background:none; border:none;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:14px; padding:0 4px;
  opacity:0;
}
.node-row:hover .node-menu-btn, .node-menu-btn.open{ opacity:1; }
.node-menu-btn:hover{ color:var(--text); }
.node-menu{
  position:absolute; right:8px; top:26px; z-index:20;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--radius); min-width:180px;
  box-shadow:0 6px 18px rgba(0,0,0,0.35); padding:4px;
}
.node-menu button{
  display:block; width:100%; text-align:left;
  background:none; border:none; color:var(--text);
  font-family:'Space Mono', monospace; font-size:12.5px;
  padding:7px 9px; border-radius:var(--radius);
}
.node-menu button:hover{ background:var(--surface); }
.node-menu button.danger{ color:var(--danger); }
.node-menu-inline{ padding:6px 9px; }
.node-menu-inline input, .node-menu-inline select{
  width:100%; background:var(--bg); border:1px solid var(--border);
  color:var(--text); padding:6px 8px; border-radius:var(--radius);
  font-family:'Space Mono', monospace; font-size:12.5px;
}
.add-root-btn{
  margin:10px 8px 2px; background:none; border:1px dashed var(--border);
  color:var(--text-muted); font-family:'Space Mono', monospace;
  font-size:12px; padding:7px 10px; border-radius:var(--radius);
  width:calc(100% - 16px); text-align:left;
}
.add-root-btn:hover{ color:var(--accent); border-color:var(--accent); }

/* ---------------- login ---------------- */

.login-body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  min-height:100dvh;
  padding:24px;
  padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
          max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.login-wrap{ width:100%; max-width:380px; }
.login-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px 26px 24px;
}
.login-brand{ margin-bottom:22px; }
.login-brand h1{
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:22px;
  margin:0 0 3px;
  letter-spacing:0.02em;
}
.login-brand p{
  margin:0;
  font-size:12px;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
}
.login-error{
  background:rgba(181,72,61,0.14);
  border:1px solid var(--danger);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  padding:9px 11px;
  margin:0 0 16px;
}
.login-form .field input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:9px 10px;
  border-radius:var(--radius);
  font-family:'Space Mono', monospace;
  font-size:13.5px;
}
.login-form .submit-btn{ width:100%; margin-top:6px; }
.login-note{
  font-family:'Space Mono', monospace;
  font-size:11px;
  color:var(--text-muted);
  margin:12px 0 0;
  text-align:center;
}

/* ---------------- uživatelská lišta ---------------- */

.user-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 16px;
  border-top:1px solid var(--border);
  font-family:'Space Mono', monospace;
  font-size:11.5px;
}
.user-name{
  color:var(--text-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.logout-form{ margin:0; flex-shrink:0; }
.logout-btn{
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  padding:0;
  text-decoration:underline;
}
.logout-btn:hover{ color:var(--accent); }

/* ---------------- navigace nad stromem ---------------- */

.brand{ cursor:pointer; }
.brand:hover h1{ color:var(--accent); }

.nav{
  display:flex;
  flex-direction:column;
  padding:10px 8px 4px;
  gap:1px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:13px;
  padding:6px 10px;
  border-radius:var(--radius);
}
.nav-item:hover{ background:var(--surface-2); color:var(--text); }
.nav-item.active{ background:var(--accent-soft); color:var(--accent); }
.nav-badge{
  margin-left:auto;
  background:var(--accent);
  color:#1d1400;
  font-size:10.5px;
  font-weight:700;
  border-radius:9px;
  padding:1px 7px;
}
.tag-count{ opacity:0.5; font-size:10px; }

/* ---------------- hlavní panel ---------------- */

.page-title{
  font-family:'Lora', serif;
  font-size:32px;
  font-style:italic;
  font-weight:600;
  margin:0 0 14px;
  max-width:640px;
}
.section-head{
  font-family:'Space Mono', monospace;
  font-size:11px;
  font-weight:400;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin:30px 0 10px;
}
.muted-note{
  color:var(--text-muted);
  font-size:13.5px;
  margin:0 0 18px;
}
.link-btn{
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:12px;
  padding:6px 0;
  text-decoration:underline;
}
.link-btn:hover{ color:var(--accent); }

/* ---------------- přehled ---------------- */

.inbox-callout{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:13px;
  padding:12px 14px;
  margin-bottom:8px;
}
.inbox-callout:hover{ filter:brightness(1.12); }
.inbox-count{
  background:var(--accent);
  color:#1d1400;
  font-weight:700;
  border-radius:10px;
  padding:1px 9px;
}
.inbox-arrow{ margin-left:auto; color:var(--accent); }

.feed{ display:flex; flex-direction:column; gap:2px; }
.feed-item{
  border-bottom:1px solid var(--border);
  padding:12px 2px;
}
.feed-item:last-child{ border-bottom:none; }
.feed-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.feed-title{ font-weight:600; font-size:15.5px; }
.type-badge{
  font-family:'Space Mono', monospace;
  font-size:10.5px;
  padding:2px 7px;
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-muted);
  flex-shrink:0;
}
.feed-meta{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  color:var(--text-muted);
  margin-top:5px;
}
.feed-author{ color:var(--tag); }
.feed-genre{
  background:none;
  border:none;
  padding:0;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  text-decoration:underline;
}
.feed-genre:hover{ color:var(--accent); }
.feed-url{
  display:block;
  color:var(--accent);
  font-size:12.5px;
  text-decoration:none;
  margin-top:5px;
  word-break:break-all;
}
.feed-url:hover{ text-decoration:underline; }
.feed-body{ color:var(--text-muted); font-size:13.5px; line-height:1.5; margin:5px 0 0; }

.changes{ display:flex; flex-direction:column; gap:1px; }
.change-row{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  font-family:'Space Mono', monospace;
  font-size:12px;
  color:var(--text-muted);
  padding:6px 2px;
  border-bottom:1px solid var(--border);
}
.change-who{ color:var(--tag); flex-shrink:0; }
.change-what{ color:var(--text); flex:1; min-width:200px; }
.change-when{ flex-shrink:0; }

/* ---------------- historie ---------------- */

.history-list{ display:flex; flex-direction:column; gap:1px; }
.history-row{
  border-bottom:1px solid var(--border);
  border-left:2px solid transparent;
  padding:8px 2px 8px 10px;
}
.history-row.akce-create{ border-left-color:var(--tag); }
.history-row.akce-update{ border-left-color:var(--accent); }
.history-row.akce-delete{ border-left-color:var(--danger); }
.history-head{
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-wrap:wrap;
  font-family:'Space Mono', monospace;
  font-size:12px;
  color:var(--text-muted);
}
.history-detail{ margin-top:6px; }
.history-detail summary{
  font-family:'Space Mono', monospace;
  font-size:11px;
  color:var(--text-muted);
  cursor:pointer;
}
.history-detail summary:hover{ color:var(--accent); }
.history-detail pre{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:11.5px;
  color:var(--text-muted);
  padding:10px;
  margin:6px 0 0;
  overflow-x:auto;
  white-space:pre-wrap;
  word-break:break-word;
}

/* ---------------- karty zdrojů ---------------- */

.rc-left{ flex:1; min-width:0; }
.inbox-select{
  margin-top:10px;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:12px;
  padding:6px 8px;
  border-radius:var(--radius);
  max-width:100%;
}

/* ---------------- quick add ---------------- */

.quick-add-btn{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:40;
  background:var(--accent);
  color:#1d1400;
  border:none;
  border-radius:22px;
  font-family:'Space Mono', monospace;
  font-weight:700;
  font-size:14px;
  padding:12px 22px;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
}
.quick-add-btn:hover{ filter:brightness(1.08); }

.qa-overlay{
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(0,0,0,0.6);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:12vh 20px 20px;
}
.qa-box{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  width:100%;
  max-width:520px;
  /* Vlastní scroll uvnitř boxu, ne stránky – na mobilu s otevřenou klávesnicí
     se viditelná výška prudce zmenší a bez tohohle by tlačítko "Přidat" bylo
     mimo dosah a nešlo by se k němu ani doscrollovat (overlay je fixed). */
  max-height:min(80vh, 80dvh);
  overflow-y:auto;
}
.qa-title{
  font-family:'Space Mono', monospace;
  font-size:13px;
  font-weight:400;
  color:var(--text-muted);
  margin:0 0 12px;
}
.qa-input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:10px 12px;
  border-radius:var(--radius);
  font-family:'Lora', serif;
  font-size:15px;
  resize:vertical;
}
.qa-hint{
  font-family:'Space Mono', monospace;
  font-size:11.5px;
  color:var(--text-muted);
  margin:7px 0 12px;
}
.qa-select,
.qa-type-override{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  padding:8px 10px;
  border-radius:var(--radius);
}
.qa-type-label{
  display:block;
  font-size:12px;
  color:var(--text-muted);
  margin-bottom:4px;
  margin-top:10px;
}
.qa-actions{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
  flex-wrap:wrap;
}
.qa-actions .submit-btn{ margin-right:auto; }

/* ---------------- markdown v poznámkách ---------------- */

.rc-body.md{ color:var(--text); }
.rc-body.md p{ margin:0 0 8px; color:var(--text-muted); font-size:14px; line-height:1.55; }
.rc-body.md p:last-child{ margin-bottom:0; }
.md-h{ font-family:'Lora', serif; font-size:16px; font-weight:600; margin:12px 0 6px; }
.md-h:first-child{ margin-top:0; }
.md-list{ margin:0 0 8px; padding-left:20px; color:var(--text-muted); font-size:14px; line-height:1.55; }
.md-quote{
  margin:0 0 8px;
  padding:2px 0 2px 12px;
  border-left:2px solid var(--border);
  color:var(--text-muted);
  font-style:italic;
}
.md-code{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:10px;
  margin:0 0 8px;
  overflow-x:auto;
  font-size:12.5px;
}
.md-inline-code{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:2px;
  padding:1px 5px;
  font-size:12.5px;
}

/* ---------------- dokumenty ---------------- */

.file-link{ color:var(--accent); text-decoration:none; word-break:break-all; }
.file-link:hover{ text-decoration:underline; }
.file-size{ color:var(--text-muted); font-family:'Space Mono', monospace; font-size:11.5px; }

/* ---------------- vložené přehrávače ---------------- */

.embed-wrap{ margin-top:10px; }
.embed-play{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:12px;
  padding:7px 13px;
}
.embed-play:hover{ color:var(--accent); border-color:var(--accent); }
.embed-frame{
  width:100%;
  height:170px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  display:block;
}

/* ---------------- výsledky hledání ---------------- */

.result-genres{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:6px; }
.result-genre{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  padding:6px 11px;
}
.result-genre:hover{ border-color:var(--accent); color:var(--accent); }

/* ---------------- quick add: záložky a soubor ---------------- */

.qa-tabs{ display:flex; gap:18px; margin-bottom:12px; border-bottom:1px solid var(--border); }
.qa-tab{
  background:none;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  padding:6px 0 8px;
  position:relative;
  top:1px;
}
.qa-tab.active{ color:var(--text); border-bottom-color:var(--accent); }
.qa-file{
  width:100%;
  color:var(--text-muted);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  padding:10px 0;
}
.qa-filename-input{
  width:100%;
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  padding:9px 11px;
  border-radius:var(--radius);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  margin-top:4px;
}

/* ================================================================
   MOBIL A DOTYKOVÁ ZAŘÍZENÍ
   Všechna responzivní pravidla schválně na jednom místě, ať se nerozlézají
   po souboru. Dřívější verze měla dva neúplné @media bloky na různých
   místech – jeden přepsal jen .app{display:block}, ale nechal mu
   height:100vh;overflow:hidden z pravidla nahoře, takže obsah delší než
   obrazovka byl neviditelný a nešlo se k němu doscrollovat.
   ================================================================ */

@media (max-width: 760px){

  /* --- kořen layoutu: jeden scrollovatelný kontejner (stránka), ne tři
     vnořené (.app + .sidebar + .main) – vnořené scrollování je přesně to,
     co na mobilních prohlížečích nejčastěji dělá "nejde to scrollovat". */
  .app{
    display:block;
    height:auto;
    min-height:100vh;
    min-height:100dvh;
    overflow:visible;
    /* viewport-fit=cover (index.php) nechává appku kreslit až pod výřez displeje
       – bez tohohle by v landscape orientaci na telefonu s výřezem obsah
       zajížděl pod něj zleva/zprava. Na ostatních zařízeních jsou tyhle
       proměnné 0, takže se nic neděje. */
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
  .sidebar{
    width:auto;
    height:auto;
    overflow:visible;
    border-right:none;
    border-bottom:1px solid var(--border);
  }
  .main{
    overflow:visible;
    height:auto;
    padding:20px 16px calc(92px + env(safe-area-inset-bottom));
  }

  /* --- strom a tagy jako accordion, sbalené ve výchozím stavu ---
     Bez toho by na mobilu appka po přihlášení ukázala nejdřív celý strom
     žánrů a teprve pod ním hlavní obsah – u velkého stromu by se k přehledu
     muselo dlouho scrollovat. ".expanded" přidává/odebírá tlačítko dole. */
  .tree-scroll, .tags-panel{ display:none; }
  .sidebar.expanded .tree-scroll{
    display:block;
    max-height:50vh;
    max-height:50dvh;
    overflow-y:auto;
  }
  .sidebar.expanded .tags-panel{ display:block; }

  /* Pořadí prvků v sidebaru (sidebar zůstává flex column i na mobilu) –
     přepínací tlačítko patří hned pod navigaci, ne až za celým stromem,
     tagy a jménem uživatele, jak by vyšlo z pořadí v HTML. */
  .mobile-toggle{ order:1; }
  .add-root-btn{ order:2; }
  .tree-scroll{ order:3; }
  .tags-panel{ order:4; }
  .user-bar{ order:5; }

  .mobile-toggle{
    display:block;
    width:100%;
    text-align:left;
    background:var(--surface);
    border:none;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    color:var(--text-muted);
    font-family:'Space Mono', monospace;
    font-size:12.5px;
    padding:12px 16px;
  }

  /* --- dotykové cíle: myš má hover a jemný kurzor, prst ne. Prvky, co byly
     naladěné na hover (menu tečky u žánru, karty, taby), potřebují na mobilu
     větší plochu a viditelnost bez najetí myší, která na dotykovém displeji
     neexistuje. --- */
  .node-row{ padding:10px 8px; font-size:14.5px; }
  .node-menu-btn{
    opacity:1;               /* bez hoveru by "⋯" bylo neviditelné, i když funkční */
    font-size:19px;
    padding:6px 10px;
  }
  .nav-item{ padding:11px 10px; font-size:14px; }
  .tab{ padding:12px 6px; margin-right:18px; font-size:14px; }
  .tag-chip{ padding:5px 10px; font-size:12.5px; }
  .rc-delete{ font-size:17px; padding:8px 6px; }
  .add-tag-btn{ padding:5px 11px; }
  .embed-play{ padding:9px 15px; }

  /* --- žádný zoom při klepnutí do pole ---
     iOS Safari přiblíží celou stránku, když má zaostřené textové pole
     font-size menší než 16px. Bez týhle výjimky by po klepnutí do
     vyhledávání nebo do quick-add pole appka "poskočila" a přiblížila se. */
  .search-wrap input,
  .qa-input,
  .qa-select,
  .qa-filename-input,
  .add-tag-input,
  .node-menu-inline input,
  .node-menu-inline select,
  .inbox-select,
  .login-form .field input{
    /* .login-form .field input musí mít stejnou specificitu (3 třídy) jako
       pravidlo výše – ".login-form input" (2 třídy) by proti němu prohrálo
       bez ohledu na to, že je tohle pravidlo v souboru později. */
    font-size:16px;
  }

  .page-title{ font-size:24px; }
  .section-head{ margin:24px 0 8px; }

  /* change-what má na desktopu min-width:200px, aby se řádek nezhušťoval;
     na úzkém displeji (320–360px) by to samo o sobě nezpůsobilo vodorovné
     přetečení (flex-wrap řádek zalomí), ale zbytečně by to řádek natahovalo
     do výšky. Menší minimum = kompaktnější zalomení. */
  .change-what{ min-width:0; flex-basis:100%; }

  /* --- plovoucí tlačítko a modál quick add: respektovat výřez/domácí
     posuvník na iPhonu (env(safe-area-inset-*)), jinak tlačítko nebo dolní
     okraj modálu zůstávají schované pod ním. --- */
  .quick-add-btn{
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
  }
  .qa-overlay{
    align-items:flex-start;
    padding:6vh 12px calc(12px + env(safe-area-inset-bottom));
  }
  .qa-box{ padding:16px; }
}

/* Zařízení bez hoveru (dotyk) nezávisle na šířce obrazovky – tablet na šířku
   je širší než 760px, ale menu tečky u žánru by na něm zůstaly stejně
   neviditelné, dokud se do nich neklepne naslepo. */
@media (hover: none){
  .node-menu-btn{ opacity:1; }
}

/* ---------------- koš: filtr, hledání, hromadné akce ---------------- */

.inbox-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.inbox-filter-select,
.inbox-search{
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:12.5px;
  padding:7px 10px;
  border-radius:var(--radius);
}
.inbox-search{ flex:1; min-width:160px; }
.inbox-search::placeholder{ color:var(--text-muted); }

.rc-checkbox{
  flex-shrink:0;
  width:17px;
  height:17px;
  margin-top:2px;
  accent-color:var(--accent);
}

.bulk-bar{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  background:var(--accent-soft);
  border:1px solid var(--accent);
  border-radius:var(--radius);
  padding:10px 12px;
  margin-bottom:12px;
}
.bulk-count{
  font-family:'Space Mono', monospace;
  font-size:12px;
  color:var(--accent);
  font-weight:700;
}
.bulk-target-select{
  background:var(--bg);
  border:1px solid var(--border);
  color:var(--text);
  font-family:'Space Mono', monospace;
  font-size:12px;
  padding:6px 8px;
  border-radius:var(--radius);
}
.submit-btn.small{ padding:6px 12px; font-size:12px; }
.rc-delete-bulk{
  background:none;
  border:1px solid var(--danger);
  color:var(--danger);
  font-family:'Space Mono', monospace;
  font-size:12px;
  padding:6px 12px;
  border-radius:var(--radius);
  margin-left:auto;
}
.rc-delete-bulk:hover{ background:var(--danger); color:var(--text); }

@media (max-width: 760px){
  .inbox-search,
  .inbox-filter-select,
  .bulk-target-select{ font-size:16px; }   /* zabránit iOS zoomu při klepnutí */
  .rc-delete-bulk{ margin-left:0; }
}