
/* Modal UI - Dark Slate 900 look */
.tse-modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.55);
  display:none; align-items:center; justify-content:center;
  z-index:999999;
  padding:24px;
}
.tse-modal-backdrop.tse-open{ display:flex; }
.tse-modal{
  width:min(520px, 92vw);
  background:#0f172a; /* slate-900 */
  color:#e2e8f0; /* slate-200 */
  border-radius:32px;
  box-shadow:0 25px 80px rgba(0,0,0,.55);
  overflow:hidden;
  position:relative;
}
.tse-modal .tse-topbar{
  padding:18px 22px;
  font-weight:700;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#93c5fd;
  border-bottom:1px solid rgba(148,163,184,.16);
}
.tse-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:999px;
  border:none; cursor:pointer;
  background:#ef4444; color:white;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; line-height:1;
}
.tse-modal .tse-body{ padding:18px 22px 22px; }
.tse-cover{
  width:112px; height:148px; border-radius:14px;
  object-fit:cover;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:block; margin:14px auto 10px;
}
.tse-title{
  text-align:center; font-size:20px; font-weight:800; margin:10px 0 6px; color:#f8fafc;
}
.tse-author{
  text-align:center; font-size:16px; margin:0 0 14px; color:#38bdf8;
}
.tse-actions{
  display:flex; gap:10px; justify-content:space-between; margin:8px 0 14px;
}
.tse-pill{
  flex:1;
  border:none; cursor:pointer;
  background:#dc2626; color:white;
  border-radius:999px;
  padding:10px 12px;
  font-weight:800;
  display:flex; align-items:center; justify-content:center;
  gap:8px;
}
.tse-pill svg{ width:16px; height:16px; }
.tse-card{
  border:2px dashed rgba(148,163,184,.25);
  border-radius:18px;
  padding:16px;
  text-align:center;
  background:rgba(2,6,23,.22);
}
.tse-card .tse-badge{
  width:48px; height:48px; margin:0 auto 10px;
  border-radius:12px;
  background:#ef4444;
  display:flex; align-items:center; justify-content:center;
  font-weight:900;
}
.tse-desc{
  font-size:13px; line-height:1.65;
  color:#cbd5e1;
  margin:8px 0 0;
  max-height:90px;
  overflow:auto;
}
.tse-readnow{
  display:block;
  width:180px;
  margin:16px auto 4px;
  padding:14px 16px;
  border:none;
  border-radius:999px;
  background:#2563eb;
  color:white;
  font-weight:900;
  cursor:pointer;
  font-size:16px;
}
.tse-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  background:#111827;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.2);
  padding:10px 14px;
  border-radius:999px;
  font-size:13px;
  z-index:1000000;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.tse-toast.tse-show{ opacity:1; }

@media (max-width: 420px){
  .tse-actions{ flex-direction:column; }
  .tse-pill{ width:100%; }
}
