*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0f0f13;--surface:#16161d;--card:#1c1c26;--border:#2a2a38;
  --gold:#f5a623;--purple:#7c5cbf;--purple2:#9b7de0;
  --text:#e8e6f0;--muted:#7a7890;--red:#e74c3c;--green:#2ecc71;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:'Tajawal',sans-serif;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--purple);border-radius:4px}

/* TOPBAR */
.tll-topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 1.5rem;position:sticky;top:0;z-index:200}
.tll-top-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:1rem;height:62px}
.tll-logo{font-family:'Playfair Display',serif;font-size:1.35rem;font-weight:700;color:#fff;white-space:nowrap;margin-left:1rem;flex-shrink:0}
.tll-logo span{font-style:italic;color:var(--gold)}
.tll-search-box{flex:1;max-width:440px}
.tll-search-input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.55rem 1rem;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.9rem;outline:none;transition:border-color .2s}
.tll-search-input:focus{border-color:var(--purple)}
.tll-search-input::placeholder{color:var(--muted)}
.tll-nav-links{display:flex;gap:.2rem;margin-right:auto}
.tll-nav-links a{padding:.4rem .8rem;border-radius:6px;font-size:.88rem;color:var(--muted);transition:background .2s,color .2s}
.tll-nav-links a:hover,.tll-nav-links a.active{background:rgba(124,92,191,.15);color:var(--purple2)}
.tll-auth-btns{display:flex;gap:.6rem;flex-shrink:0}
.tll-btn-login{padding:.4rem 1rem;border-radius:7px;border:1px solid var(--border);font-size:.83rem;font-family:'Tajawal',sans-serif;color:var(--muted);background:none;cursor:pointer;transition:border-color .2s,color .2s}
.tll-btn-login:hover{border-color:var(--purple);color:var(--purple2)}
.tll-btn-reg{padding:.4rem 1rem;border-radius:7px;font-size:.83rem;font-family:'Tajawal',sans-serif;color:#fff;background:var(--purple);border:none;cursor:pointer;transition:background .2s}
.tll-btn-reg:hover{background:var(--purple2)}
.tll-btn-out{padding:.4rem 1rem;border-radius:7px;font-size:.83rem;color:var(--muted);border:1px solid var(--border)}

/* HERO SLIDER */
.tll-hero{position:relative;overflow:hidden;height:480px;background:var(--surface)}
.tll-slides-wrap{display:flex;height:100%;transition:transform .6s cubic-bezier(.4,0,.2,1)}
.tll-slide{min-width:100%;position:relative;display:flex;align-items:flex-end;flex-shrink:0}
.tll-s-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform 8s ease}
.tll-slide.is-on .tll-s-bg{transform:scale(1.04)}
.tll-s-ov{position:absolute;inset:0;background:linear-gradient(to left,rgba(15,15,19,.05) 0%,rgba(15,15,19,.5) 40%,rgba(15,15,19,.97) 75%)}
.tll-s-body{position:relative;z-index:2;padding:2.5rem 5vw 3rem;max-width:620px}
.tll-s-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.9rem}
.tll-tag{background:rgba(124,92,191,.25);border:1px solid rgba(124,92,191,.4);color:var(--purple2);font-size:.7rem;font-weight:500;padding:.22rem .65rem;border-radius:4px}
.tll-s-title{font-size:clamp(1.6rem,3.5vw,2.6rem);font-weight:800;line-height:1.2;color:#fff;margin-bottom:.7rem}
.tll-s-stats{display:flex;gap:1.2rem;margin-bottom:.9rem;font-size:.85rem}
.tll-stars{color:var(--gold);font-weight:700}
.tll-views{color:var(--muted)}
.tll-s-desc{font-size:.9rem;color:rgba(232,230,240,.65);line-height:1.75;margin-bottom:1.5rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.tll-s-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--gold);color:#1a1200;font-size:.85rem;font-weight:700;padding:.65rem 1.6rem;border-radius:8px;transition:background .2s}
.tll-s-cta:hover{background:#e8941a}
.tll-arr{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:40px;height:40px;border-radius:50%;background:rgba(22,22,29,.7);border:1px solid var(--border);color:var(--text);font-size:1.4rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.tll-arr:hover{background:var(--purple);border-color:var(--purple)}
.tll-arr-r{right:1.2rem}
.tll-arr-l{left:1.2rem}
.tll-dots{position:absolute;bottom:1.2rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem;z-index:10}
.tll-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.25);border:none;cursor:pointer;transition:background .25s,transform .25s}
.tll-dot.on{background:var(--gold);transform:scale(1.4)}

/* CONTAINER */
.tll-container{max-width:1400px;margin:0 auto;padding:0 1.5rem}

/* CATS */
.tll-cats{display:flex;gap:.5rem;flex-wrap:wrap;padding:.9rem 0 1.2rem}
.tll-cat{padding:.38rem 1rem;border-radius:20px;font-size:.78rem;font-weight:500;border:1px solid var(--border);color:var(--muted);background:none;cursor:pointer;font-family:'Tajawal',sans-serif;transition:all .2s}
.tll-cat:hover,.tll-cat.is-on{background:var(--purple);border-color:var(--purple);color:#fff}

/* MAIN GRID */
.tll-main-grid{display:grid;grid-template-columns:1fr 300px;gap:2rem;padding-bottom:3rem}

/* SECTION HEADER */
.tll-sec-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.2rem;padding-top:2rem}
.tll-sec-hd h2{font-size:1.1rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.5rem}
.tll-bar{display:inline-block;width:4px;height:1.1rem;background:var(--purple);border-radius:2px;flex-shrink:0}
.tll-more{font-size:.78rem;color:var(--purple2);border:1px solid rgba(124,92,191,.4);padding:.28rem .8rem;border-radius:6px;transition:background .2s}
.tll-more:hover{background:rgba(124,92,191,.15)}

/* NOVELS GRID */
.tll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1rem;margin-bottom:1rem}
.tll-ncard{display:block;border-radius:10px;overflow:hidden;transition:transform .25s;color:inherit;text-decoration:none}
.tll-ncard:hover{transform:translateY(-5px)}
.tll-ncover{position:relative;width:100%;padding-bottom:145%;background:var(--card);border-radius:10px;overflow:hidden;border:1px solid var(--border)}
.tll-ncover img{position:absolute;inset:0}
.tll-init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Playfair Display',serif;font-style:italic;font-size:5rem;font-weight:700;color:rgba(255,255,255,.1)}
.tll-nbadge{position:absolute;top:.5rem;right:.5rem;font-size:.6rem;font-weight:700;padding:.2rem .5rem;border-radius:4px}
.tll-b-hot{background:#e74c3c;color:#fff}
.tll-b-new{background:#2ecc71;color:#0a2e18}
.tll-b-trending{background:var(--gold);color:#1a1200}
.tll-nrat{position:absolute;bottom:.5rem;right:.5rem;background:rgba(15,15,19,.85);font-size:.7rem;font-weight:700;color:var(--gold);padding:.18rem .5rem;border-radius:4px}
.tll-nhov{position:absolute;inset:0;background:rgba(10,10,15,.75);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .25s;border-radius:10px;font-size:.78rem;font-weight:700;color:#fff;text-align:center;padding:.8rem}
.tll-ncard:hover .tll-nhov{opacity:1}
.tll-ninfo{padding:.6rem .1rem 0}
.tll-ntitle{font-size:.83rem;font-weight:700;color:var(--text);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:.2rem}
.tll-ngenre{font-size:.7rem;color:var(--purple2);font-weight:500}
.tll-nviews{font-size:.67rem;color:var(--muted);margin-top:.15rem}

/* LIST CARDS */
.tll-list-col{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.tll-lcard{display:flex;gap:1rem;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.9rem;transition:border-color .2s;color:inherit;text-decoration:none}
.tll-lcard:hover{border-color:var(--purple)}
.tll-lcover{width:68px;min-width:68px;height:98px;border-radius:7px;overflow:hidden;background:var(--surface);border:1px solid var(--border);position:relative;flex-shrink:0}
.tll-lcover img{position:absolute;inset:0}
.tll-lbody{flex:1}
.tll-ltitle{font-size:.93rem;font-weight:700;color:#fff;margin-bottom:.3rem;line-height:1.3}
.tll-lgenre{font-size:.7rem;color:var(--purple2);font-weight:500;margin-bottom:.4rem}
.tll-ldesc{font-size:.79rem;color:var(--muted);line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tll-lmeta{display:flex;gap:1rem;margin-top:.5rem;font-size:.7rem;color:var(--muted)}
.tll-lmeta .tll-stars{color:var(--gold);font-weight:700}

/* SIDEBAR RANKING */
.tll-sidebar{display:flex;flex-direction:column;gap:1.2rem;padding-top:2rem}
.tll-rank-box{background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.tll-rank-hd{padding:1rem 1.2rem;border-bottom:1px solid var(--border);font-size:.93rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:.5rem}
.tll-rank-hd::before{content:'';width:4px;height:1rem;background:var(--gold);border-radius:2px;display:inline-block}
.tll-ritem{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.2rem;border-bottom:1px solid var(--border);transition:background .2s;cursor:pointer}
.tll-ritem:last-child{border-bottom:none}
.tll-ritem:hover{background:rgba(124,92,191,.07)}
.tll-rnum{font-size:1.1rem;font-weight:800;width:22px;text-align:center;flex-shrink:0}
.tll-rnum.gold{color:var(--gold)}
.tll-rnum.silver{color:#b0b8c8}
.tll-rnum.bronze{color:#cd7f32}
.tll-rnum.normal{color:var(--muted)}
.tll-rcover{width:42px;min-width:42px;height:60px;border-radius:5px;overflow:hidden;background:var(--surface);border:1px solid var(--border);position:relative;flex-shrink:0}
.tll-rcover img{position:absolute;inset:0}
.tll-rinfo{flex:1;min-width:0}
.tll-rtitle{font-size:.81rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tll-rviews{font-size:.67rem;color:var(--muted)}
.tll-rstars{font-size:.68rem;color:var(--gold);font-weight:700}

/* SINGLE NOVEL */
.tll-single-hero{position:relative;min-height:400px;display:flex;align-items:flex-end;padding-top:5rem}
.tll-single-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(15,15,19,.98) 0%,rgba(15,15,19,.6) 60%,rgba(15,15,19,.25) 100%)}
.tll-single-wrap{position:relative;z-index:2;display:flex;gap:2.5rem;align-items:flex-end;padding-bottom:2.5rem}
.tll-single-cover{width:160px;min-width:160px;height:232px;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--card);position:relative;flex-shrink:0}
.tll-single-cover img{position:absolute;inset:0}
.tll-single-meta{flex:1}
.tll-single-title{font-size:clamp(1.6rem,3vw,2.8rem);font-weight:800;color:#fff;line-height:1.1;margin-bottom:.8rem}
.tll-single-stats{display:flex;gap:1.2rem;font-size:.85rem}
.tll-novel-content{max-width:820px;margin:2.5rem auto;padding:2rem;background:var(--card);border:1px solid var(--border);border-radius:12px;line-height:1.9;font-size:.95rem;color:var(--muted)}

/* ADS */
.tll-ad-block{width:100%;margin:.8rem 0;text-align:center}

/* FOOTER */
.tll-footer{background:var(--surface);border-top:1px solid var(--border);padding:3rem 1.5rem 1.5rem;margin-top:2rem}
.tll-footer-in{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:3rem;margin-bottom:2rem}
.tll-foot-brand p{font-size:.83rem;color:var(--muted);line-height:1.8;margin-top:.8rem}
.tll-foot-col h5{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.tll-foot-col a{display:block;font-size:.83rem;color:var(--muted);margin-bottom:.5rem;transition:color .2s}
.tll-foot-col a:hover{color:var(--text)}
.tll-foot-copy{max-width:1400px;margin:0 auto;border-top:1px solid var(--border);padding-top:1.2rem;display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted)}
.tll-sig{font-family:'Playfair Display',serif;font-style:italic;color:rgba(124,92,191,.45)}

/* AUTH MODAL */
.tll-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(4px);z-index:500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .25s}
.tll-modal-bg.open{opacity:1;pointer-events:auto}
.tll-modal-box{background:var(--card);border:1px solid var(--border);border-radius:16px;width:100%;max-width:380px;padding:2.2rem;position:relative;transform:translateY(20px);transition:transform .25s}
.tll-modal-bg.open .tll-modal-box{transform:translateY(0)}
.tll-modal-box h2{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:1.4rem;text-align:center}
.tll-modal-x{position:absolute;top:1rem;left:1rem;background:none;border:none;color:var(--muted);font-size:1.2rem;cursor:pointer}
.tll-minput{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:.65rem 1rem;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.88rem;outline:none;margin-bottom:.8rem;display:block;transition:border-color .2s}
.tll-minput:focus{border-color:var(--purple)}
.tll-minput::placeholder{color:var(--muted)}
.tll-modal-submit{width:100%;padding:.72rem;border-radius:8px;background:var(--purple);color:#fff;font-size:.9rem;font-weight:700;border:none;font-family:'Tajawal',sans-serif;cursor:pointer;transition:background .2s;margin-bottom:.8rem}
.tll-modal-submit:hover{background:var(--purple2)}
.tll-modal-sw{text-align:center;font-size:.8rem;color:var(--muted)}
.tll-modal-sw a{color:var(--purple2)}

/* RESPONSIVE */
@media(max-width:960px){
  .tll-main-grid{grid-template-columns:1fr}
  .tll-sidebar{display:none}
  .tll-nav-links{display:none}
  .tll-footer-in{grid-template-columns:1fr 1fr}
}
@media(max-width:580px){
  .tll-logo{font-size:1.1rem}
  .tll-grid{grid-template-columns:repeat(3,1fr)}
  .tll-hero{height:400px}
  .tll-footer-in{grid-template-columns:1fr}
  .tll-single-wrap{flex-direction:column;align-items:flex-start}
  .tll-single-cover{width:120px;height:174px}
}

/* TICKER TAG variant */
.tll-tag-r{background:rgba(231,76,60,.2);border-color:rgba(231,76,60,.4);color:#ff7675}

/* SECTIONS ITEMS in admin */
.tll-sec-item{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:.7rem;overflow:hidden}
.tll-sec-item-hd{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.2rem}
.tll-drag-handle{color:var(--muted);font-size:1.1rem;cursor:grab;margin-left:.2rem}

/* Search results */
#slider-search-results .tll-search-result:last-child{border-bottom:none}

/* PAGINATION */
.page-numbers{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);color:var(--muted);font-size:.85rem;margin:0 2px;transition:all .2s;text-decoration:none}
.page-numbers:hover{border-color:var(--purple);color:var(--purple2)}
.page-numbers.current{background:var(--purple);border-color:var(--purple);color:#fff}
.page-numbers.dots{border:none;width:auto}
nav.navigation ul{display:flex;list-style:none;justify-content:center;gap:.3rem;flex-wrap:wrap}
nav.navigation ul li a,nav.navigation ul li span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid var(--border);color:var(--muted);font-size:.85rem;transition:all .2s;text-decoration:none}
nav.navigation ul li.active span,nav.navigation ul li span.current{background:var(--purple);border-color:var(--purple);color:#fff}
nav.navigation ul li a:hover{border-color:var(--purple);color:var(--purple2)}

/* COMMENTS */
.comment-form input,.comment-form textarea{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:.65rem 1rem;color:var(--text);font-family:'Tajawal',sans-serif;font-size:.88rem;outline:none;width:100%;margin-bottom:.8rem;transition:border-color .2s}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--purple)}
.comment-form label{display:block;font-size:.75rem;color:var(--muted);margin-bottom:.3rem}
.comment-form input[type="submit"]{background:var(--purple);color:#fff;border:none;cursor:pointer;width:auto;padding:.65rem 1.5rem;font-weight:700;font-family:'Tajawal',sans-serif;transition:background .2s}
.comment-form input[type="submit"]:hover{background:var(--purple2)}
.comment-list{list-style:none;margin-bottom:1.5rem}
.comment-body{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:1rem 1.2rem;margin-bottom:.8rem}
.comment-author .fn{font-weight:700;color:#fff}
.comment-meta{font-size:.72rem;color:var(--muted);margin-bottom:.5rem}
.comment-content p{font-size:.88rem;color:var(--muted);line-height:1.7}