/* =========================



   DtheG Comick - Mobile-first Dark UI (CSP-safe)



   ========================= */



:root{



  --bg:#0c1427; --panel:#0f1a33;



  --text:#eef3ff; --muted:#98a9c9;



  --primary:#5aa2ff; --primary-weak:#2a6eea;



  --border:rgba(255,255,255,.10); --shadow:0 10px 25px rgba(0,0,0,.35);



  --radius:16px; --container:1100px;



}




*{ box-sizing:border-box }



html,body{ height:100% }



body{



  margin:0; color:var(--text);



  background: linear-gradient(180deg, #0a1222, #0c1427 50%, #0b1120);



  font: 400 16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;



}



.container{ width:100%; max-width:var(--container); margin-inline:auto; padding:0 14px }




/* Appbar */



.appbar{



  position:sticky; top:0; z-index:1000; backdrop-filter:blur(12px);



  background:rgba(8,12,26,.75); border-bottom:1px solid var(--border);



}



.appbar__inner{ display:flex; gap:10px; align-items:center; padding:10px 0 }

.appbar__inner{ flex-wrap:wrap; }

.brand{ flex:0 0 auto; }

.appbar .search{ flex:1 1 220px; min-width:0; }

.appbar .btn-icon{ flex:0 0 auto; }



.brand{


  border:1px solid rgba(255,255,255,.18);


  background:linear-gradient(130deg,rgba(255,255,255,.08),rgba(255,255,255,.02));


  color:var(--text);


  font:inherit;


  font-size:18px;


  font-weight:700;


  letter-spacing:.1px;


  border-radius:999px;


  padding:8px 16px;


  display:flex;


  align-items:center;


  gap:10px;


  cursor:pointer;


  transition:box-shadow .2s ease,border-color .2s ease,background .2s ease;


  background-clip:padding-box;


  appearance:none;


}


.brand:focus-visible{ outline:2px solid var(--primary); outline-offset:4px }


.brand__logo{


  font-weight:800;


  background:linear-gradient(120deg,#fff,#c8dcff);


  -webkit-background-clip:text;


  color:transparent;


  letter-spacing:.3px;


}


.brand__label{ font-weight:600; color:var(--text) }


.brand__pill{


  font-size:11px;


  text-transform:uppercase;


  letter-spacing:.08em;


  padding:4px 10px;


  border-radius:999px;


  border:1px solid rgba(90,162,255,.5);


  color:var(--primary);


  background:rgba(90,162,255,.12);


}


.brand:hover{


  border-color:rgba(90,162,255,.5);


  box-shadow:0 8px 22px rgba(9,19,42,.55);


}


.brand--anime{


  border-color:rgba(90,162,255,.9);


  box-shadow:0 0 0 1px rgba(90,162,255,.45),0 14px 36px rgba(39,117,255,.35);


}


.brand--anime .brand__pill{


  background:var(--primary);


  color:#fff;


  border-color:transparent;


}

.brand--anime .brand__label--secondary{ color:#fff; font-weight:700; }

.brand--anime .brand__label--primary{ color:var(--muted); }


.brand__toggle{

  display:flex;

  align-items:center;

  gap:8px;

  white-space:nowrap;

}

.brand__swap-icon{

  font-size:12px;

  opacity:.7;

}

.brand__label--secondary{ color:var(--muted); }


.brand-flare{

  position:fixed;

  inset:0;

  display:grid;

  place-items:center;

  background:radial-gradient(circle at 40% 40%, rgba(90,162,255,.25), transparent 40%), rgba(5,9,18,.55);

  backdrop-filter: blur(6px);

  opacity:0;

  pointer-events:none;

  transition:opacity .22s ease;

  z-index:1500;

}

.brand-flare.show{ opacity:1; }

.brand-flare__content{

  background:rgba(10,16,32,.9);

  border:1px solid rgba(90,162,255,.35);

  border-radius:18px;

  padding:18px 20px;

  box-shadow:0 22px 60px rgba(0,0,0,.4);

  text-align:center;

  min-width:240px;

}

.brand-flare__logo{

  font-weight:800;

  letter-spacing:.1em;

  text-transform:uppercase;

  color:#dbe7ff;

}

.brand-flare__text{

  color:var(--muted);

  margin-top:6px;

  font-size:14px;

}




/* inline <style> geht auch, solange CSP externes CSS erlaubt */



@keyframes spin { to { transform: rotate(360deg); } }



@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }





/* Search + Suggest */



.search{



  position:relative; flex:1; display:flex; align-items:center; gap:8px;



  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));



  border:1px solid var(--border); padding:10px 12px; border-radius:14px;



}



.search:focus-within{ border-color:rgba(147,197,253,.6); box-shadow:0 0 0 3px rgba(147,197,253,.15) }



.search .icon{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; opacity:.85 }



.search input{ flex:1; background:transparent; border:0; outline:0; color:var(--text); font-size:15px }




/* Suggest dropdown */



.suggest{



  position:absolute; left:0; right:0; top:calc(100% + 8px); z-index:1200;



  background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow);



}



.suggest__item{



  display:flex; gap:10px; padding:8px 10px; width:100%; text-align:left; border:0;



  background:transparent; color:var(--text); cursor:pointer;



}



.suggest__item:hover{ background:rgba(255,255,255,.04) }



.suggest__thumb{ width:34px; height:44px; object-fit:cover; border-radius:6px; border:1px solid var(--border) }



.suggest__title{ font-size:14px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Search Panel */
.search-panel{
  background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  display:grid;
  gap:12px;
  box-shadow:var(--shadow);
}
.search-panel__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.search-panel__input{
  flex:1 1 260px;
  min-width:220px;
}
.search-panel__filters{
  display:grid;
  gap:12px;
}
@media (min-width: 900px){
  .search-panel__filters{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
.search-filter{
  background:rgba(255,255,255,.02);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:8px;
}
.search-filter__label{
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--muted);
}
.search-author{
  display:flex;
  align-items:center;
  gap:8px;
}
.search-tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-height:120px;
  overflow:auto;
  padding-right:4px;
}
.search-tag{
  font-size:12px;
  border-radius:999px;
}
.search-suggest{
  margin-top:6px;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(12,12,16,.96);
  max-height:190px;
  overflow:auto;
}
.search-suggest__item{
  display:block;
  width:100%;
  padding:6px 10px;
  text-align:left;
  background:transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
}
.search-suggest__item:hover{ background:rgba(255,255,255,.06) }
.suggest__more{ font-weight:700 }
.btn--icon{
  width:34px;
  height:34px;
  padding:0;
  display:grid;
  place-items:center;
  border-radius:10px;
}
.btn--sm{
  padding:8px 12px;
  font-size:13px;
}
.select--sm{
  padding:4px 8px;
  font-size:12px;
  border-radius:8px;
}
.item__title{ font-weight:700 }




/* Icons/Buttons */



.icon{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2; flex:0 0 auto }



.btn-icon{



  display:grid; place-items:center; width:42px; height:42px; border-radius:12px;



  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03)); border:1px solid var(--border);



}



.btn{



  background:var(--primary); color:#061022; border:0; padding:10px 14px; border-radius:12px;



  font-weight:700; cursor:pointer;



}



.btn:hover{ background:var(--primary-weak) }



.btn[disabled]{ opacity:.6; cursor:not-allowed }



.btn--ghost{ background:transparent; color:var(--text); border:1px solid var(--border) }




/* View & Sections */



.view{ padding:16px 0 calc(160px + env(safe-area-inset-bottom)) }



.section{ margin:10px 0 18px }



.section__head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px }



.section__title{ font-weight:800; font-size:18px }



.hscroll{ display:flex; gap:10px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x proximity }



.hscroll::-webkit-scrollbar{ height:6px }



.hscroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:6px }




/* Skeletons */



.skeleton-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px }



@media (min-width:640px){ .skeleton-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }



.skeleton{



  height:0; padding-bottom:133.33%; border-radius:14px; position:relative; overflow:hidden;



  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02)); border:1px solid var(--border);



}



.skeleton::after{



  content:""; position:absolute; inset:0;



  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);



  transform:translateX(-100%); animation:shim 1.1s infinite;



}



@keyframes shim{ to{ transform:translateX(100%) } }




.avatar{width:28px;height:28px;border-radius:999px;object-fit:cover;margin-right:8px;display:block}




/* ---------- TOP SHEET (slides from top, over images) ---------- */



.top-sheet{



  position:fixed; left:0; right:0; top:0;



  transform:translateY(-100%); transition:transform .25s ease;



  background:rgba(18,18,18,.98); backdrop-filter:blur(6px);



  border-bottom:1px solid #333; box-shadow:0 8px 24px rgba(0,0,0,.35);



  z-index:1100; max-height:70vh; display:flex; flex-direction:column;



}



.top-sheet.show{ transform:translateY(0) }



.top-sheet__header{



  display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center; padding:10px 12px;



}



.top-sheet__body{ padding:8px 12px; max-height:calc(70vh - 52px); overflow:auto }



#readerTopToggle.btn{ font-size:16px; line-height:1; padding:6px 10px }




/* Cards */



.manga-grid{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px }



@media (min-width:640px){ .manga-grid{ grid-template-columns: repeat(6, minmax(0,1fr)); } }



.card{



  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));



  border:1px solid var(--border); border-radius:14px; overflow:hidden; text-align:left; cursor:pointer;



  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;



}



.card:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.16); box-shadow:var(--shadow) }



.card__img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block }



.card__body{ padding:9px }



.card__title{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }



.card__meta{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }




/* Detail-Header */



.manga-head{ display:grid; grid-template-columns: 82px 1fr; gap:12px; align-items:start }



@media (min-width:520px){ .manga-head{ grid-template-columns:100px 1fr } }



.manga-head__media .card__img{ width:100%; border-radius:12px }



.manga-head__actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px }



.tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px }



.tag{



  font-size:11px; padding:4px 8px; border-radius:999px;



  border:1px solid var(--border); background:rgba(255,255,255,.04);



}




/* Chapter list */



.chapter-list{ display:grid; gap:8px }



.chapter-item{



  display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px;



  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03)); border:1px solid var(--border);



}



.chapter-item:hover{ background:rgba(255,255,255,.05) }



.chapter-item.active{


  outline:2px solid var(--primary);


  background:rgba(90,162,255,.12);


  box-shadow:0 0 0 2px rgba(90,162,255,.08);


}



.chapter-num{



  min-width:34px; height:34px; border-radius:10px; display:grid; place-items:center;



  background:rgba(90,162,255,.15); color:#d7e7ff; font-weight:800; font-size:12px;



}



.chapter-title{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600 }



.chapter-meta{ font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap }



.pill{ display:inline-block; padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--border); font-size:12px }
.pill--provider-filter{ cursor:pointer; }
.pill--active{
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.35);
  color: #fff;
}
.pill--danger{
  background: rgba(255, 80, 80, .18);
  border-color: rgba(255, 80, 80, .45);
  color: #ffd1d1;
}



.pill--provider{



  display:inline-block; margin-right:6px; font-size:11px; padding:2px 6px; border-radius:10px;



  background:#222; color:#fff; vertical-align:middle;



}

.pill--local{

  display:inline-block; margin-right:8px; font-size:11px; padding:2px 6px; border-radius:10px;

  background:rgba(90, 200, 120, 0.18); color:#c8f5d4; border:1px solid rgba(90, 200, 120, 0.35);

  text-transform:uppercase; letter-spacing:.04em;

}

.pill--download{
  display:inline-block; margin-right:6px; font-size:11px; padding:2px 6px; border-radius:10px;
  background:rgba(56, 189, 248, 0.16); color:#cfefff; border:1px solid rgba(56, 189, 248, 0.35);
}
.pill--queue{
  display:inline-block; margin-right:6px; font-size:11px; padding:2px 6px; border-radius:10px;
  background:rgba(255, 184, 77, 0.14); color:#ffe3b0; border:1px solid rgba(255, 184, 77, 0.35);
}
.chapter-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px;
}
.dl-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);
  color:#cfefff;
  cursor:pointer;
}
.dl-icon--busy{
  cursor:default;
  background:rgba(56, 189, 248, 0.12);
}
.dl-icon--done{
  cursor:default;
  background:rgba(34, 197, 94, 0.12);
  color:#bbf7d0;
  border-color:rgba(34, 197, 94, 0.35);
}
.dl-icon__glyph{
  font-size:14px;
  line-height:1;
}
.dl-icon .dl-ring{
  width:16px;
  height:16px;
}
.dl-ring{
  --pct:0%;
  width:14px;
  height:14px;
  border-radius:50%;
  background:conic-gradient(var(--primary) var(--pct), rgba(255,255,255,.15) 0);
  border:1px solid rgba(255,255,255,.2);
  position:relative;
  flex:0 0 auto;
}
.dl-ring::after{
  content:'';
  position:absolute;
  inset:2px;
  background:rgba(10,10,12,.9);
  border-radius:50%;
}
.dl-ring--pending{
  animation:spin 1.1s linear infinite;
  background:conic-gradient(var(--primary) 0 25%, rgba(255,255,255,.15) 0);
}




/* ---------- Reader ---------- */



.reader{



  display:block; max-width:980px; margin:0 auto; padding:56px 0 24px; line-height:0;



}



.page-img{



  width:100%; height:auto; display:block; margin:0; border-radius:0;



}



.sentinel{ height:64px }




/* Reader Topbar */



.readerbar{



  position:fixed; top:0; left:0; right:0; z-index:1100; display:grid; grid-template-columns:auto 1fr auto;



  gap:10px; align-items:center; padding:10px 14px; background:rgba(8,12,26,.85);



  border-bottom:1px solid var(--border); backdrop-filter:blur(12px);



}



.readerbar.hidden{ display:none }



.readerbar__center{ display:grid; gap:6px; justify-items:center }



.readerbar__right{ display:flex; gap:8px }



.readerbar select{



  background:rgba(255,255,255,.06); border:1px solid var(--border); color:var(--text);



  border-radius:10px; padding:8px 10px;



}




/* Bottom CTA (Prev | Chapters | Next) */



.reader-bottom{



  position:fixed; left:12px; right:12px; bottom:12px;



  display:flex; gap:8px; padding:8px;



  border-radius:12px; background:rgba(0,0,0,.75); color:#fff;



  backdrop-filter:blur(6px); box-shadow:0 -6px 18px rgba(0,0,0,.25);



  z-index:1050;



}



.reader-bottom.hidden{ display:none }



.reader-bottom .btn{ flex:1; min-width:0 }




/* Tap-Zones */



.tapzones{ position:fixed; inset:0; z-index:1005; display:grid; grid-template-columns:1fr 1fr }



.tapzones > div{ cursor:pointer }




/* Bottom Sheet (chapter list) */



.sheet__backdrop{



  position:fixed; inset:0; background:rgba(0,0,0,.55);



  opacity:0; pointer-events:none; transition:opacity .18s ease; z-index:1198;



}



.sheet__backdrop.show{ opacity:1; pointer-events:auto }



.sheet{



  position:fixed; left:0; right:0; bottom:0; z-index:1199;



  background:var(--panel); border-top-left-radius:16px; border-top-right-radius:16px;



  border:1px solid var(--border); transform:translateY(100%); transition:transform .22s ease;



  max-height:70vh; display:flex; flex-direction:column; box-shadow:0 -20px 40px rgba(0,0,0,.35);



}



.sheet.show{ transform:translateY(0) }



.sheet__header{



  display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:center;



  padding:12px 14px; border-bottom:1px solid var(--border);



}



.sheet__title{ font-weight:800 }



.sheet__body{ padding:10px 12px; overflow:auto; display:grid; gap:8px }




/* Selects */



.select{



  padding:6px 10px; border:1px solid #333; background:#121212; color:#eee; border-radius:8px;



}




/* Lazy fade */



img.lazy{ opacity:0; transform: translateY(4px); transition: opacity .25s ease, transform .25s ease }



img.lazy.loaded{ opacity:1; transform:none }




/* Bottom Tabs */



.tabs{



  position:fixed; bottom:0; left:0; right:0; z-index:1000;



  backdrop-filter:blur(12px); background:rgba(8,12,26,.78);



  border-top:1px solid var(--border);



  display:grid; grid-template-columns: repeat(4,1fr);



  padding-bottom: calc(8px + env(safe-area-inset-bottom));



}



.tab{



  display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center;



  padding:13px 8px 16px; color:var(--muted); font-weight:700; font-size:15px;



  position:relative; transition: color .18s ease;



}



.tab .icon{ width:28px; height:28px; opacity:.95 }



.tab::after{



  content:""; position:absolute; bottom:7px; height:3px; width:0; border-radius:2px; background:var(--primary);



  transition:width .18s ease;



}



.tab.active::after{ width:36px }



.tab:focus-visible{ outline:none; box-shadow: inset 0 0 0 3px rgba(147,197,253,.2) }




/* Modal / Lists / Inputs */



.list{ display:grid; gap:10px; margin-top:10px }



.item{



  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));



  border:1px solid var(--border); border-radius:12px; padding:12px; text-align:left;



}



.list--tight .item{ padding:8px 10px }


.admin-card details{


  margin-bottom:12px;


  background:rgba(255,255,255,.02);


  border:1px solid var(--border);


  border-radius:12px;


  padding:10px;


}


.admin-card details:last-child{ margin-bottom:0 }


.admin-card summary{


  font-weight:700;


  cursor:pointer;


  margin-bottom:8px;


}


.admin-user-row,


.admin-active-row{


  display:flex;


  align-items:center;


  justify-content:space-between;


  gap:10px;


}
.admin-download-row{


  display:flex;


  align-items:center;


  justify-content:space-between;


  gap:10px;


}
.admin-downloads__list{


  max-height:320px;


  overflow:auto;


}


.admin-user-email{ font-weight:700; }


.admin-code-row{


  display:flex;


  gap:10px;


  flex-wrap:wrap;


  align-items:center;


  margin:6px 0;


}


.btn--danger{


  border:1px solid #f87171;


  color:#f87171;


}


.btn--danger:hover{


  background:rgba(248,113,113,.15);


}


.modal{ position:fixed; inset:0; display:none; z-index:1200 }



.modal.show{ display:block }



.modal__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.55) }



.modal__dialog{ position:absolute; inset:0; display:grid; place-items:center; padding:16px }



.modal__dialog > div{



  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--border);



  border-radius:16px; padding:16px; box-shadow:var(--shadow); animation:pop .18s ease;



}



@keyframes pop{ from{ transform:scale(.98); opacity:0 } to{ transform:scale(1); opacity:1 } }



input[type="email"],input[type="password"],input[type="text"],textarea{



  width:100%; background:rgba(255,255,255,.06); border:1px solid var(--border);



  color:var(--text); border-radius:12px; padding:10px 12px; font-size:15px;



}



textarea{ min-height:72px; resize:vertical }



input:focus,textarea:focus{ outline:none; border-color:rgba(147,197,253,.6); box-shadow:0 0 0 3px rgba(147,197,253,.15) }




/* Toasts */



#toasts{



  position:fixed; left:50%; transform:translateX(-50%);



  bottom: calc(120px + env(safe-area-inset-bottom)); z-index:1300; display:grid; gap:8px;



}



.toast{



  background:rgba(12,18,36,.95); border:1px solid var(--border); color:var(--text);



  padding:10px 14px; border-radius:12px; box-shadow:var(--shadow);



  animation:toastIn .18s ease, toastOut .18s ease 2.2s forwards;



}



@keyframes toastIn{ from{opacity:0; transform:translate(-50%,4px)} to{opacity:1; transform:translate(-50%,0)} }



@keyframes toastOut{ to{opacity:0; transform:translate(-50%,6px)} }




/* Helpers */



.hidden{ display:none!important }



.in-reader .appbar{ display:none!important }



.in-reader .tabs{ display:none!important }




.text-lg{ font-size:18px; font-weight:800 }



.text-sm{ font-size:14px }



.muted{ color:var(--muted) }



.mt-2{ margin-top:8px } .mt-3{ margin-top:12px } .mb-2{ margin-bottom:8px } .mb-3{ margin-bottom:12px }




.row{ display:flex; gap:8px }



.row--wrap{ flex-wrap:wrap }



.grow{ flex:1 }




.w-100{ min-width:100% }



.cover-sm{ min-width:100px; max-width:120px; flex:0 0 auto }




/* ---- Reader Top Overlay (slim) ---- */



#readerTop.readerbar{



  position: fixed;



  top: 0; left: 0; right: 0;



  height: 52px;



  display: flex; align-items: center;



  gap: 10px; padding: 6px 10px;



  background: linear-gradient(to bottom, rgba(0,0,0,.75), rgba(0,0,0,.2));



  backdrop-filter: saturate(130%) blur(6px);



  z-index: 2147483643; /* ueber Content */



}



#readerTop.readerbar.hidden { transform: translateY(-100%); transition: transform .18s ease; }




#readerTop .readerbar__left,



#readerTop .readerbar__right { display: flex; align-items: center; gap: 10px; }



#readerTop .readerbar__center {


  display: flex;


  flex-direction: column;


  gap: 4px;


  flex: 1 1 auto;


  min-width: 0;


}



#readerTop .readerbar__right {


  flex: 0 0 auto;


}



#readerTop .reader-chapter-btn {


  position: relative;


  border: 0;


  background: none;


  color: inherit;


  cursor: pointer;


  padding: 4px 12px;


  border-radius: 999px;


  overflow: hidden;


  text-align: left;


  display: inline-flex;


  align-items: center;


  gap: 6px;


  font: inherit;


}



.reader-chapter-btn__text {


  position: relative;


  z-index: 1;


  display: inline-flex;


  align-items: center;


  gap: 6px;


}



.reader-progress {


  position: absolute;


  inset: 0;


  border-radius: 999px;


  background: rgba(255,255,255,.08);


  overflow: hidden;


  pointer-events: none;


}



.reader-progress__bar {


  position: absolute;


  inset: 0;


  background: linear-gradient(90deg,#59f18d,#29c2a3);


  transform-origin: left center;


  transform: scaleX(0);


  transition: transform .12s ease;


  opacity: .85;


}



.reader-progress__percent {


  font-size: 11px;


  font-weight: 700;


  letter-spacing: .04em;


  text-transform: uppercase;


  color: var(--muted);


}




#readerTop .readerbar__title {



  font-weight: 600;



  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;



  max-width: 100%;



}



#readerTop .readerbar__chapter { font-size: 12px; opacity: .85; }




/* kompakte Buttons */



#readerTop .btn, #readerTop .btn.btn--ghost {



  height: 32px; padding: 0 10px; border-radius: 999px; font-size: 13px;



}




/* sorgt dafuer, dass der Inhalt nicht unter der Leiste liegt */



body.in-reader { padding-top: 52px; }




/* optional: alle alten Overlays/Startmenues ausblenden */



#readerStartMenu { display: none !important; }




.tabsline {



  display:flex;



  gap:8px;



  flex-wrap:nowrap;          /* EINZEILIG */



  overflow-x:auto;           /* horizontal scrollen wenn zu lang */



  -webkit-overflow-scrolling:touch;



}



.tabsline .chip { flex:0 0 auto; }  /* nicht umbrechen/schrumpfen */




/* Haupt-Navigation */



#tabs {



  display: flex !important;



  flex-wrap: nowrap !important;   /* nie umbrechen */



  gap: 0;



}



#tabs .tab {



  flex: 1 1 0 !important;         /* alle gleich breit, duerfen schrumpfen */



  min-width: 0 !important;        /* erlaubt Schrumpfen statt Umbruch */



  white-space: nowrap;



}



#tabs .tab .label {               /* falls Label-Span vorhanden */



  overflow: hidden;



  text-overflow: ellipsis;



  white-space: nowrap;



}




/* Falls irgendwo alte Breiten erzwungen werden, neutralisieren: */



#tabs .tab { width: auto !important; }




.top-sheet .item { display:block; padding:8px 10px; border-radius:8px; }



.top-sheet .item:hover { background:#1a1a1a; }



.ellipsis { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }




/* Reader: Tabs & Appbar sicher ausblenden (ueberschreibt #tabs-Regel) */



.in-reader #tabs { display:none !important; }



.in-reader .appbar { display:none !important; } /* ist schon da - doppelt haelt besser */



/* ----------------------- Auth Experience ----------------------- */



body.auth-mode {


  background: radial-gradient(circle at top, rgba(53,78,209,0.35), transparent 55%), #050b1c;


  min-height: 100vh;


}



body.auth-mode .tabs,


body.auth-mode .appbar,


body.auth-mode #readerTop {


  opacity: 0;


  pointer-events: none;


  visibility: hidden;


}



body.auth-mode .view {


  padding-top: 0;


  max-width: none;


  width: 100%;


}



.auth-hero {


  position: relative;


  min-height: 100vh;


  padding: 32px 12px 64px;


  overflow: hidden;


  isolation: isolate;


}



@media (min-width: 768px) {


  .auth-hero {


    padding: 48px 24px 96px;


  }


}



.auth-hero__canvas {


  position: absolute;


  inset: 0;


  width: 100%;


  height: 100%;


  z-index: 0;


  pointer-events: none;


}



.auth-hero__glow {


  position: absolute;


  inset: 10%;


  background: radial-gradient(circle at top, rgba(255,68,125,.35), transparent 70%);


  filter: blur(60px);


  z-index: 0;


}



.auth-hero__layout {


  position: relative;


  z-index: 1;


  display: grid;


  gap: 20px;


  width: min(1180px, 100%);


  margin: 0 auto;


  grid-template-columns: minmax(0, 1fr);


}



@media (min-width: 900px) {


  .auth-hero__layout {


    grid-template-columns: repeat(2, minmax(0, 1fr));


  }


}



@media (min-width: 1280px) {


  .auth-hero__layout {


    grid-template-columns: 1.05fr 0.95fr 0.85fr;


  }


}



.auth-hero--solo .auth-hero__layout {


  grid-template-columns: minmax(0, 500px);


  justify-content: center;


}



.auth-card--solo {


  max-width: 520px;


  margin: 0 auto;


}



.auth-card {


  background: rgba(10, 13, 24, 0.82);


  border: 1px solid rgba(255,255,255,.08);


  border-radius: 20px;


  padding: 32px;


  box-shadow: 0 30px 80px rgba(0,0,0,.45);


  backdrop-filter: blur(18px);


  display: flex;


  flex-direction: column;


  gap: 18px;


}



.auth-hero__visual {


  background: rgba(10,15,35,.85);


  border: 1px solid rgba(255,255,255,.05);


  border-radius: 22px;


  padding: 34px;


  display: flex;


  flex-direction: column;


  gap: 18px;


  box-shadow: 0 44px 80px rgba(2,8,20,.65);


}



.auth-hero__badge {


  align-self: flex-start;


  padding: 6px 14px;


  border-radius: 999px;


  border: 1px solid rgba(255,255,255,.3);


  text-transform: uppercase;


  font-size: .75rem;


  letter-spacing: .2em;


}



.auth-hero__visual h1 {


  font-size: clamp(2rem, 4vw, 2.8rem);


  margin: 0;


  line-height: 1.15;


}



.auth-hero__visual p {


  color: rgba(255,255,255,.8);


  margin: 0;


  max-width: 560px;


  line-height: 1.5;


}



.auth-hero__stats {


  display: grid;


  grid-template-columns: repeat(auto-fit,minmax(140px,1fr));


  gap: 12px;


}



.auth-stat-card {


  background: rgba(255,255,255,.03);


  border-radius: 18px;


  padding: 16px;


  border: 1px solid rgba(255,255,255,.08);


}



.auth-stat-card strong {


  display: block;


  font-size: 2rem;


  margin-top: 6px;


}



.auth-stat-label {


  font-size: .85rem;


  color: rgba(255,255,255,.6);


  text-transform: uppercase;


  letter-spacing: .08em;


}



.auth-highlights {


  display: grid;


  grid-template-columns: repeat(auto-fit,minmax(160px,1fr));


  gap: 12px;


}



.auth-highlights div {


  background: rgba(255,255,255,.02);


  border-radius: 16px;


  padding: 12px;


  border: 1px solid rgba(255,255,255,.05);


  font-size: .9rem;


  display: flex;


  gap: 8px;


  align-items: flex-start;


  line-height: 1.4;


}



.auth-highlights span {


  font-size: 1.2rem;


}



.auth-card__head {


  display:flex;


  justify-content:space-between;


  align-items:center;


  gap:12px;


}



.auth-card--primary {


  animation: cardFloat 10s ease-in-out infinite;


}



.auth-card--side {


  max-height: 100%;


  overflow: hidden;


}



.auth-form {


  display: flex;


  flex-direction: column;


  gap: 14px;


}



.auth-intro {


  margin: 0 0 14px;


  color: rgba(255,255,255,.75);


  line-height: 1.5;


}



.auth-field {


  display: flex;


  flex-direction: column;


  gap: 4px;


}



.auth-field input,


.auth-select {


  background: rgba(255,255,255,.05);


  border: 1px solid rgba(255,255,255,.08);


  border-radius: 12px;


  padding: 12px 14px;


  color: inherit;


}



.auth-inline {


  display: flex;


  flex-wrap: wrap;


  gap: 12px;


  align-items: center;


  justify-content: space-between;


}



.auth-hint {


  font-size: 0.85rem;


  color: rgba(255,255,255,.6);


  margin: 0;


}



.profile-form {


  display: flex;


  flex-direction: column;


  gap: 12px;


}



.profile-form textarea {


  min-height: 96px;


}



.auth-pill-row {


  display:flex;


  gap:12px;


  flex-wrap:wrap;


  background:rgba(255,255,255,.02);


  border:1px solid rgba(255,255,255,.04);


  border-radius:14px;


  padding:10px;


}



.auth-switch {


  display: inline-flex;


  align-items: center;


  gap: 8px;


  font-size: 0.9rem;


  cursor: pointer;


}



.auth-switch input {


  width: 18px;


  height: 18px;


}



.auth-select {


  min-width: 140px;


}



.auth-stats {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(120px,1fr));


  gap: 12px;


  margin-top: 12px;


}



.auth-stat {


  background: rgba(255,255,255,.05);


  border-radius: 12px;


  padding: 12px;


  text-align: center;


}



.auth-stat strong {


  display: block;


  font-size: 1.4rem;


}



.auth-ticker {


  padding: 10px 14px;


  border-radius: 999px;


  background: rgba(255,255,255,.08);


  font-size: 0.9rem;


  margin-bottom: 12px;


  animation: tickerPulse 4s ease-in-out infinite;


}



.auth-quote {


  background: rgba(255,255,255,.03);


  border-radius: 16px;


  padding: 16px;


  font-style: italic;


  min-height: 120px;


}



.auth-feature-grid {


  display: grid;


  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));


  gap: 10px;


  margin-top: 14px;


}



.feature-chip {


  display: inline-flex;


  align-items: center;


  gap: 6px;


  background: rgba(255,255,255,.04);


  border: 1px solid transparent;


  border-radius: 999px;


  padding: 8px 12px;


  cursor: pointer;


  transition: all .2s ease;


  color: inherit;


}



.feature-chip__icon {


  font-size: 0.72rem;


  font-weight: 700;


  letter-spacing: .08em;


  padding: 2px 6px;


  border-radius: 999px;


  background: rgba(255,255,255,.08);


}



.feature-chip--active {


  border-color: rgba(255,255,255,.4);


  background: rgba(255,255,255,.12);


  box-shadow: 0 0 12px rgba(255,255,255,.2);


}



.auth-meta {


  margin-top: auto;


}



.auth-meta__list {


  list-style: none;


  padding: 0;


  margin: 12px 0 0;


  display: grid;


  gap: 6px;


}



.auth-meta__list li {


  display: flex;


  align-items: center;


  gap: 8px;


  font-size: 0.9rem;


}



.ghost-link {


  background: none;


  border: none;


  color: #b6c1ff;


  text-decoration: underline;


  cursor: pointer;


}



.pill {


  border-radius: 999px;


  border: 1px solid rgba(255,255,255,.3);


  background: rgba(255,255,255,.05);


  padding: 6px 12px;


  cursor: pointer;


}



.pill--ghost {


  border-color: rgba(255,255,255,.15);


}



.social-login {


  display: flex;


  gap: 10px;


  flex-wrap: wrap;


}



.social-login button {


  flex: 1;


  min-width: 90px;


  border-radius: 12px;


  border: 1px solid rgba(255,255,255,.15);


  background: rgba(255,255,255,.04);


  padding: 8px;


  color: inherit;


}


@keyframes cardFloat {


  0% { transform: translateY(0px); }


  50% { transform: translateY(-6px); }


  100% { transform: translateY(0px); }


}



@keyframes tickerPulse {


  0% { box-shadow: 0 0 20px rgba(255,255,255,.2); }


  50% { box-shadow: 0 0 5px rgba(255,255,255,.05); }


  100% { box-shadow: 0 0 20px rgba(255,255,255,.2); }


}



@media (max-width: 768px) {


  .auth-card {


    padding: 20px;


  }



  .auth-inline {


    flex-direction: column;


    align-items: flex-start;


  }



  .auth-pill-row {


    flex-direction: column;


  }


}



.eyebrow {


  text-transform: uppercase;


  letter-spacing: .3em;


  font-size: 0.72rem;


  color: rgba(255,255,255,.6);


}





.anime-hero{


  display:grid;


  gap:18px;


  padding:20px;


  border-radius:20px;


  border:1px solid var(--border);


  background:radial-gradient(circle at 0 0, rgba(90,162,255,.25), transparent 60%), linear-gradient(160deg, rgba(19,30,54,.95), rgba(8,12,24,.9));


  box-shadow:var(--shadow);


  overflow:hidden;


}


@media (min-width:768px){


  .anime-hero{ grid-template-columns:260px 1fr; align-items:center }


}


.anime-hero__media img{


  width:100%;


  border-radius:18px;


  object-fit:cover;


  box-shadow:0 16px 36px rgba(0,0,0,.35);


}


.anime-hero__title{


  font-size:26px;


  line-height:1.2;


  font-weight:800;


  margin-bottom:6px;


}


.anime-hero__meta{


  display:flex;


  flex-wrap:wrap;


  gap:10px;


  color:var(--muted);


  font-size:14px;


}


.anime-hero__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }


.anime-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px }


.anime-tag{


  font-size:11px;


  letter-spacing:.05em;


  padding:4px 10px;


  border-radius:999px;


  border:1px solid var(--border);


  background:rgba(255,255,255,.05);


}


.anime-row{ display:flex; gap:12px; overflow-x:auto; padding-bottom:6px }


.anime-row::-webkit-scrollbar{ height:6px }


.anime-row::-webkit-scrollbar-thumb{ background:rgba(90,162,255,.35); border-radius:6px }


.anime-card__meta{ font-size:12px; color:var(--muted); margin-top:4px }

.card__meta-row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px }

.anime-source{

  display:inline-flex;

  align-items:center;

  gap:6px;

  font-size:11px;

  padding:4px 8px;

  border-radius:999px;

  border:1px solid rgba(90,162,255,.35);

  color:#d5e6ff;

  background:rgba(90,162,255,.08);

}

.anime-source--pill{

  background:rgba(90,162,255,.14);

  border-color:transparent;

  color:#fff;

}

.anime-providers{

  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:12px;

}

.anime-provider{

  display:inline-flex;

  align-items:center;

  gap:8px;

  padding:8px 10px;

  border-radius:12px;

  border:1px solid var(--border);

  background:rgba(255,255,255,.03);

  font-size:13px;

}

.anime-provider__dot{

  width:8px;

  height:8px;

  border-radius:50%;

  background:rgba(255,255,255,.25);

}

.anime-provider--ok .anime-provider__dot{ background:#59f18d; box-shadow:0 0 0 4px rgba(89,241,141,.12); }

.anime-provider--down .anime-provider__dot{ background:#f87171; box-shadow:0 0 0 4px rgba(248,113,113,.12); }

.anime-provider__tier{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }


.anime-calendar{

  display:grid;

  gap:10px;

  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));

}

.anime-calendar__day{

  border:1px solid var(--border);

  border-radius:14px;

  background:rgba(255,255,255,.03);

  padding:10px;

}

.anime-calendar__head{

  display:flex;

  align-items:center;

  justify-content:space-between;

  margin-bottom:8px;

  font-weight:700;

}

.anime-calendar__dayname{ color:var(--text); }

.anime-calendar__date{ color:var(--muted); font-size:12px; }

.anime-calendar__list{ display:grid; gap:8px; }

.anime-calendar__item{

  width:100%;

  border:1px solid var(--border);

  background:rgba(255,255,255,.02);

  color:inherit;

  border-radius:10px;

  padding:8px 10px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  cursor:pointer;

}

.anime-calendar__item:hover{

  border-color:rgba(90,162,255,.6);

  background:rgba(90,162,255,.06);

}

.anime-calendar__title{ font-weight:700; font-size:13px; text-align:left; }

.anime-calendar__time{ font-size:12px; color:var(--muted); }


.anime-detail{


  margin-top:22px;


  border:1px solid var(--border);


  border-radius:18px;


  background:rgba(255,255,255,.02);


  padding:18px;


  display:grid;


  gap:18px;


}


@media (min-width:700px){


  .anime-detail{ grid-template-columns:220px 1fr }


}


.anime-detail img{ width:100%; border-radius:16px; object-fit:cover }


.anime-detail__body .anime-hero__title{ font-size:24px }


.anime-detail__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:12px }


.anime-episode-list{


  margin-top:16px;


  display:grid;


  gap:8px;


  max-height:320px;


  overflow:auto;


  padding-right:6px;


}


.anime-episode{


  display:flex;


  align-items:center;


  justify-content:space-between;


  gap:12px;


  padding:10px 14px;


  border-radius:12px;


  border:1px solid var(--border);


  background:rgba(255,255,255,.03);


  cursor:pointer;


  transition:background .2s ease,border-color .2s ease;


}


.anime-episode:hover{


  background:rgba(90,162,255,.08);


  border-color:rgba(90,162,255,.6);


}


.anime-episode__num{ font-weight:700; font-size:14px }


.anime-episode__open{ font-size:12px; color:var(--muted) }

#animeDetailRecommended{ margin-top:16px; }


.anime-search{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px }


.anime-search input{


  flex:1;


  min-width:200px;


  border-radius:12px;


  border:1px solid var(--border);


  background:rgba(255,255,255,.03);


  color:var(--text);


  padding:10px 12px;


}


.anime-search button{ white-space:nowrap }


.anime-search-results{ margin-top:18px }


.anime-empty{


  padding:18px;


  border:1px dashed var(--border);


  border-radius:14px;


  color:var(--muted);


  font-size:14px;


}


/* Anime Player */

.anime-player__backdrop{

  position:fixed; inset:0; background:rgba(0,0,0,.65); backdrop-filter:blur(6px);

}

.anime-player__dialog{

  position:fixed;

  inset:0;

  display:grid;

  place-items:center;

  pointer-events:none;

}

.anime-player__dialog > div{

  pointer-events:auto;

}

#animePlayer{

  position:fixed;

  inset:0;

  z-index:1600;

  opacity:0;

  visibility:hidden;

  transition:opacity .2s ease;

}

#animePlayer.show{

  opacity:1;

  visibility:visible;

}

#animePlayer .anime-player__dialog{

  padding:20px;

}

#animePlayer .anime-player__dialog > div{

  width:100%;

  max-width:900px;

  background:var(--panel);

  border:1px solid var(--border);

  border-radius:16px;

  box-shadow:0 30px 80px rgba(0,0,0,.55);

}

.anime-player__header{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding:14px 16px;

  border-bottom:1px solid var(--border);

}

.anime-player__title{ font-weight:800; }

.anime-player__body{ padding:12px 16px 16px; display:grid; gap:12px; }

.anime-player__video{

  width:100%;

  max-height:60vh;

  background:#000;

  border-radius:12px;

  border:1px solid var(--border);

}

.anime-player__iframe{

  width:100%;

  max-height:60vh;

  background:#000;

  border-radius:12px;

  border:1px solid var(--border);

}

.anime-player__meta{

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:12px;

  flex-wrap:wrap;

}

.anime-player__status{ color:var(--muted); font-size:14px; }

/* =========================
   Manga Theme Refresh + Novels
   ========================= */

:root{
  --bg:#0a0b11;
  --panel:#111827;
  --text:#f4f0e8;
  --muted:#a7b1c2;
  --primary:#ff7a18;
  --primary-weak:#ff9a3d;
  --accent:#37d0c3;
  --accent-2:#6aa5ff;
  --border:rgba(255,255,255,.12);
  --shadow:0 18px 50px rgba(0,0,0,.5);
  --radius:18px;
  --glow:0 0 0 1px rgba(255,122,24,.35),0 18px 40px rgba(255,122,24,.28);
}

body{
  background:
    radial-gradient(1000px 520px at 12% -10%, rgba(255,122,24,.1), transparent 62%),
    radial-gradient(820px 620px at 88% 8%, rgba(55,208,195,.1), transparent 60%),
    linear-gradient(180deg, #0a0d16 0%, #0c121f 55%, #0b0f1a 100%);
  font-family:"Sora","Trebuchet MS","Verdana",sans-serif;
  letter-spacing:.1px;
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  background:
    radial-gradient(60% 40% at 20% 5%, rgba(255,122,24,.08), transparent 60%),
    radial-gradient(55% 45% at 80% 15%, rgba(106,165,255,.08), transparent 60%);
  filter:blur(60px);
  opacity:.35;
  z-index:-2;
  animation:ambientDrift 32s ease-in-out infinite alternate;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    radial-gradient(circle at 70% 20%, rgba(255,255,255,.03), transparent 55%);
  background-size:28px 28px, 100% 100%;
  opacity:.18;
  mix-blend-mode:normal;
  pointer-events:none;
  z-index:-1;
}

@keyframes ambientDrift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(2%,1%,0) scale(1.05); }
}

@media (prefers-reduced-motion: reduce){
  body::before{ animation:none; }
}

.section__title{
  font-family:"Cinzel","Georgia","Times New Roman",serif;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.appbar{
  background:linear-gradient(180deg, rgba(10,12,22,.9), rgba(8,10,18,.72));
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.search{
  background:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.btn{
  background:linear-gradient(135deg, var(--primary), #ffb347);
  color:#1b0f06;
  box-shadow:var(--glow);
  transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover{
  transform:translateY(-1px);
  filter:brightness(1.04);
}

.btn--ghost{
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.2);
  color:var(--text);
  box-shadow:none;
}

.btn-icon{
  background:linear-gradient(150deg, rgba(255,255,255,.12), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.2);
}

.card{
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 28px rgba(0,0,0,.35);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,122,24,.35);
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}

.pill{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.18);
  color:var(--text);
}

.tabs{
  grid-template-columns: repeat(5,1fr);
  background:linear-gradient(180deg, rgba(8,10,18,.88), rgba(7,9,16,.96));
  border-top:1px solid rgba(255,255,255,.18);
}

.tab{
  color:var(--muted);
  font-weight:700;
}

.tab.active{
  color:var(--text);
}

.tab::after{
  background:linear-gradient(90deg, var(--primary), var(--accent-2));
}

.novel-panel{
  background:linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  padding:14px;
  display:grid;
  gap:12px;
  box-shadow:var(--shadow);
}

.novel-panel__bar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.novel-panel__input{
  flex:1 1 260px;
  min-width:200px;
}

.novel-reader{
  margin-top:12px;
  display:grid;
  gap:12px;
}

.novel-reader__text{
  white-space:pre-wrap;
  line-height:1.7;
  font-family:"Georgia","Times New Roman",serif;
  background:rgba(8,10,16,.6);
  border:1px solid rgba(255,255,255,.14);
  border-radius:14px;
  padding:16px;
}

.novel-chapter .chapter-actions .pill{
  background:rgba(255,122,24,.14);
  border-color:rgba(255,122,24,.4);
}