.lit-shell{
  position:relative;
  padding:24px;
  border-radius:18px;
  overflow:hidden;
}

/* Background (you can swap this to a library-specific image later) */
.lit-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://brainwashingacademy.com/wp-content/uploads/2026/02/Libary-Interior.png");
  background-size:cover;
  background-position:center;
  transform:scale(1.02);
  z-index:0;
}

/* Readability overlay */
.lit-shell::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 15%, rgba(140,80,255,.30), rgba(0,0,0,.72) 55%, rgba(0,0,0,.88));
  z-index:0;
}

.lit-shell > *{ position:relative; z-index:1; }

.lit-head{ display:grid; gap:14px; margin-bottom:16px; }
.lit-title{ margin:0; font-size:28px; line-height:1.1; color:#fff; }

.lit-tabs{ display:flex; gap:10px; flex-wrap:wrap; }
.lit-tab{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
}
.lit-tab.is-active{
  background:rgba(160,90,255,.22);
  border-color:rgba(160,90,255,.55);
}

.lit-controls{ display:flex; gap:10px; align-items:center; }
.lit-search{
  width:min(520px, 100%);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.35);
  color:#fff;
}

.lit-grid{
  display:grid;
  gap:14px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}

.lit-card{
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.38);
  border-radius:16px;
  padding:14px;
  display:grid;
  gap:10px;
}

.lit-card__top{ display:grid; gap:8px; }
.lit-badge{
  display:inline-block;
  width:fit-content;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(160,90,255,.55);
  background:rgba(160,90,255,.14);
  color:#fff;
  font-size:12px;
  letter-spacing:.04em;
}
.lit-card__title{
  margin:0;
  color:#fff;
  font-size:16px;
}

.lit-card__actions{ display:flex; gap:10px; flex-wrap:wrap; }

.lit-btn{
  border:1px solid rgba(160,90,255,.55);
  background:rgba(160,90,255,.18);
  color:#fff;
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
  text-align:center;
}
.lit-btn--ghost{
  background:rgba(0,0,0,.25);
  border-color:rgba(255,255,255,.18);
}

.lit-loading,.lit-empty{
  padding:18px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:#fff;
}

/* Reader overlay */
.lit-reader{
  position:fixed;
  inset:0;
  display:none;
  z-index:9999;
}
.lit-reader.is-open{ display:block; }
.lit-reader__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
}
.lit-reader__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(980px, 92vw);
  height:min(86vh, 780px);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.65);
  overflow:hidden;
  display:grid;
  grid-template-rows:auto 1fr;
}

/* “Canvas” bar */
.lit-reader__bar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
}

.lit-reader__name{ color:#fff; font-weight:700; }
.lit-reader__sub{ color:rgba(255,255,255,.75); font-size:12px; margin-top:2px; }

.lit-reader__content{
  margin:0;
  padding:16px;
  overflow:auto;
  color:#fff;
  font-size:15px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word;
}