/* lieslese — library UI on top of weltsein.css tokens */

@import url('https://fonts.googleapis.com/css2?family=PT+Mono&display=swap');


textarea, html body textarea,html body,html,html body p,html body span,input,div, html body div,  html body   span,  html body   applet,  html body   object,  html body   iframe,  html body   h1,  html body   h2,  html body   h3,  html body   h4,  html body   h5,  html body   h6,  html body   p,  html body   blockquote,  html body   pre,  html body   a,  html body   abbr,  html body   acronym,  html body   address,  html body   big,  html body   cite,  html body   code,  html body   del,  html body   dfn,  html body   em,  html body   img,  html body   ins,  html body   kbd,  html body   q,  html body   s,  html body   samp,  html body   small,  html body   strike,  html body   strong,  html body   sub,  html body   sup,  html body   tt,  html body   var,  html body   b,  html body   u,  html body   i,  html body   center,  html body   dl,  html body   dt,  html body   dd,  html body   ol,  html body   ul,  html body   li,  html body   fieldset,  html body   form,  html body   label,  html body   legend,  html body   table,  html body   caption,  html body   tbody,  html body   tfoot,  html body   thead,  html body   tr,  html body   th,  html body   td,  html body   article,  html body   aside,  html body   canvas,  html body   details,  html body   embed,  html body   figure,  html body   figcaption,  html body   footer,  html body   header,  html body   hgroup,  html body   menu,  html body   nav,  html body   output,  html body   ruby,  html body   section,  html body   summary,  html body   time,  html body   mark,  html body   audio,  html body   video, html #readability-page-1

.pt-mono-regular {
  font-family: "PT Mono", "Aptos Mono" , monospace  !important ; 
}



 
html main { 
  max-width: 90%; 
}html .hero p {
  max-width: 80%;
}

html a{
  color: #965707; 
}html a:hover{
  color: #ec5d17; 
}

#theme-toggle{display:none;} 

html  .modal { 
  background: rgba(255, 211, 179, 0.44); 
}
 
html .btn-primary {
  background: #8b5b00;
  border-color: #d73b3b;
  color: #fff;
}

  html body {
  background: linear-gradient(90deg, #2A1200 0%, #51270a 65%, #6f360d 100%) !important;
    background-color: rgba(0, 0, 0, 0);
  background-color: transparent !important;
}

a:hover img {
  filter: saturate(2)hue-rotate(190deg);
}
.btn-primary:hover {
  background: #ec5d17  !important ;
  border-color: #f25d5d  !important ;
  color: #fff;
}

.muted { color: var(--text-muted); }
.small { font-size: 0.82rem; }
.mt { margin-top: 1.4rem; }
main { padding-bottom: 4rem; }



.btn { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem;
  padding: 0.45rem 0.8rem; border: 1px solid var(--border); border-radius: 4px;
  background: var(--bg); color: var(--text); cursor: pointer; text-decoration: none; line-height: 1.2; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn-sm { font-size: 0.72rem; padding: 0.3rem 0.6rem; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-light); border-color: var(--brand-light); color: #fff; }
.btn-danger:hover { border-color: #b3453a; color: #b3453a; }

.header-controls { display: flex; gap: 0.4rem; align-items: center; }
.theme-toggle { background: none; border: 1px solid var(--border); border-radius: 4px; width: 34px; height: 34px;
  cursor: pointer; color: var(--text); font-size: 1rem; }
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }

/* hero */
.hero { text-align: center; padding: 2.5rem 0 2rem; border-bottom: 1px solid var(--border); margin-bottom: 2rem; }
.hero h1 { font-family: 'JetBrains Mono', monospace; margin: 0 0 0.6rem; }
.hero p { max-width: 42ch; margin: 0 auto 1.4rem; }
.open-actions { display: flex; justify-content: center; gap: 0.6rem; }

.lib-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.filter-bar { display: flex; gap: 0.4rem; }
.filter-bar input[type=search], .filter-bar select, #custom-css, .form-group input, .form-group textarea, textarea {
  padding: 0.45rem 0.6rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg);
  color: var(--text); font-family: inherit; font-size: 0.9rem; }
.filter-bar input[type=search] { min-width: 220px; }

/* book grid */
.book-grid { display: grid; gap: 1.6rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.book-cell { display: flex; flex-direction: column; }
.book-cover-link { position: relative; display: block; aspect-ratio: 2/3; background: var(--bg-secondary);
  border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.book-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.progress-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(0,0,0,0.15); }
.progress-bar > span { display: block; height: 100%; background: var(--brand); }
.book-title-btn { text-align: left; background: none; border: none; padding: 0; margin-top: 0.5rem; cursor: pointer;
  font-size: 0.82rem; color: var(--text); line-height: 1.25; font-family: inherit;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.book-title-btn:hover { color: var(--brand); }
.book-author { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.1rem; }
.empty { text-align: center; padding: 3rem 1rem; }

/* drag & drop hint */
.drop-hint { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand) 12%, var(--bg)); border: 3px dashed var(--brand);
  font-family: 'JetBrains Mono', monospace; color: var(--brand); font-size: 1.2rem; }
.drop-hint.show { display: flex; }

/* modals */
.modal { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,0.45); display: flex;
  align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; }
.modal[hidden] { display: none; }
.modal-card { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 1.6rem;
  max-width: 640px; width: 100%; }
.modal-card h2 { margin-top: 0; }
.modal-close { margin-top: 1.4rem; }

/* detail */
.detail-head { display: flex; gap: 1.4rem; }
.detail-cover { width: 130px; border-radius: 4px; border: 1px solid var(--border); align-self: flex-start; }
.detail-actions { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.editor-tools { display: flex; gap: 0.6rem; align-items: center; margin: 0.8rem 0; }
.form-group { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; }
.form-group label { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-muted); }
.form-group input { width: 100%; }
.form-row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.form-row .form-group { flex: 1; }

.notebook-head { display: flex; justify-content: space-between; align-items: baseline; }
.export-links { font-size: 0.78rem; display: flex; gap: 0.6rem; }
.anno-list { list-style: none; padding: 0; margin: 1rem 0; }
.anno-item { border-left: 3px solid var(--anno-color, var(--border)); padding: 0.3rem 0 0.3rem 0.9rem; margin-bottom: 0.9rem; }
.anno-quote { font-style: italic; }
.anno-note { font-size: 0.85rem; color: var(--text-muted); margin-top: 0.3rem; }

/* settings */
.theme-picker { display: flex; flex-direction: column; gap: 0.5rem; }
.theme-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.9rem; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--border); }
.swatch-weltsein { background: #4a7a3f; } .swatch-weltsein-blau { background: #3f6a7a; }
#custom-css { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; }

/* toast */
#toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%) translateY(2rem);
  background: var(--text); color: var(--bg); padding: 0.5rem 1rem; border-radius: 6px; font-size: 0.85rem;
  opacity: 0; pointer-events: none; transition: 0.2s; z-index: 70; }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.site-footer { text-align: center; }
.site-footer a { color: var(--brand); }

@media (max-width: 600px) {
  .filter-bar input[type=search] { min-width: 130px; }
  .book-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
  .detail-head { flex-direction: column; }
}