*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0f0f0f;--bg2:#1a1a1a;--bg3:#242424;--accent:#e74c3c;--accent2:#c0392b;--text:#e0e0e0;--text2:#aaa;--text3:#666;--border:#2e2e2e;--radius:8px}
[data-theme="grey"]{--bg:#252525;--bg2:#303030;--bg3:#3a3a3a;--text:#e8e8e8;--text2:#bbb;--text3:#888;--border:#444}
[data-theme="light"]{--bg:#f0f0f0;--bg2:#ffffff;--bg3:#e4e4e4;--text:#1a1a1a;--text2:#555;--text3:#999;--border:#d0d0d0}
html,body{height:100%}
html{overflow-x:hidden}
body{background:var(--bg);color:var(--text);font-family:system-ui,sans-serif;min-height:100vh;line-height:1.6;transition:background .2s,color .2s;display:flex;flex-direction:column;padding-top:var(--header-h, 56px);overflow-x:hidden}
main.container{flex:1}
a{color:inherit;text-decoration:none}
img{display:block}

/* NAVBAR */
.navbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 20px;height:56px;display:flex;flex-direction:row;align-items:center;gap:14px;position:fixed;top:0;left:0;width:100%;z-index:100;flex-shrink:0}
.logo{display:flex;flex-direction:row;align-items:center;gap:10px;flex-shrink:0}
.logo img{height:38px;width:auto;display:block}
.logo-text{color:#ffffff !important;font-size:18px;font-weight:700;white-space:nowrap}
[data-theme="light"] .logo-text{color:#1a1a1a !important}
.nav-links{position:static;display:flex;align-items:center;gap:14px}
.navbar-left{display:flex;align-items:center;gap:14px;flex:1}
.nav-links{gap:2px!important}
.navbar-right{display:flex;align-items:center;gap:14px;flex:1;justify-content:flex-end}
.nav-links a{color:var(--text2);font-size:14px;white-space:nowrap;transition:color .2s;padding:6px 8px}
.nav-links a:hover{color:var(--text)}

/* SEARCH */
.search-form{display:flex;align-items:center;background:#000;border:1px solid #333;border-radius:20px;overflow:hidden;max-width:240px}
[data-theme="light"] .search-form{background:#ddd;border-color:#bbb}
[data-theme="grey"] .search-form{background:#1a1a1a;border-color:#555}
.search-input{background:transparent;border:none;color:var(--text);padding:7px 14px;font-size:14px;width:100%;outline:none}
.search-input::placeholder{color:#555}
[data-theme="light"] .search-input::placeholder{color:#aaa}
.search-btn{background:transparent;border:none;color:#666;padding:7px 12px;cursor:pointer;display:flex;align-items:center;transition:color .2s;flex-shrink:0}
.search-btn:hover{color:#aaa}

/* THEME */
.theme-toggle{display:flex;gap:3px;align-items:center;flex-shrink:0}
.theme-btn{background:none;border:1px solid var(--border);color:var(--text2);width:26px;height:26px;border-radius:50%;cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.theme-btn:hover,.theme-btn.active{border-color:var(--accent);background:var(--accent);color:#fff}

/* NAV AUTH */
.nav-auth{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav-user{font-size:14px;color:var(--text2);white-space:nowrap}

/* HAMBURGER */
.hamburger{display:none;background:none;border:none;color:var(--text);cursor:pointer;padding:4px;flex-direction:column;gap:5px}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s}
body.has-tabs-bar .mobile-menu{top:101px}.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);padding:16px;z-index:999;flex-direction:column;gap:12px}
.mobile-menu.open{display:flex}
.mobile-menu a{color:var(--text2);font-size:16px;padding:8px 0;border-bottom:1px solid var(--border)}
.mobile-menu a:last-child{border-bottom:none}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--radius);font-size:14px;cursor:pointer;border:none;transition:all .2s;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent2)}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text2)}.btn-outline:hover{border-color:var(--text2);color:var(--text)}
.btn-like{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:6px 14px;border-radius:20px;cursor:pointer;font-family:inherit}
.btn-like:hover,.btn-like.liked{border-color:var(--accent);color:var(--accent)}
.btn-sm{padding:4px 10px;font-size:13px}
.btn-fav{background:transparent;border:1px solid var(--border);color:var(--text2);padding:7px 16px;border-radius:var(--radius);cursor:pointer;font-family:inherit;font-size:14px;transition:all .2s}
.btn-fav.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* CONTAINER */
.container{width:100%;max-width:1750px;margin:0 auto;padding:24px 20px}
.section-title{font-size:18px;font-weight:600;margin-bottom:16px;padding-bottom:10px;border-bottom:2px solid var(--accent);display:inline-block}

/* LATEST */
.latest-list{display:flex;flex-direction:column;gap:8px}
.latest-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;display:flex;align-items:center;gap:10px;transition:background .2s;cursor:pointer;margin-bottom:8px}
.latest-item:hover,.latest-item:active{background:var(--bg3)}
.latest-thumb{width:100px;height:136px;object-fit:contain;border-radius:10px;background:var(--bg3);flex-shrink:0}
.latest-thumb-placeholder{width:100px;height:136px;background:var(--bg3);border-radius:10px;flex-shrink:0}
.latest-info{flex:1;min-width:0;display:flex;flex-direction:column}
.latest-comic{font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-chapter{font-size:18px;color:var(--accent);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.latest-date{font-size:11px;color:var(--text3);margin-top:3px}
.latest-stats{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;gap:4px;flex-shrink:0}
.comment-bubble{background:none!important;border:none!important;padding:0!important;margin:0!important;font-size:13px;color:var(--text2);text-decoration:none;white-space:nowrap;display:inline!important;box-shadow:none!important;border-radius:0!important}.stat-badge{font-size:17px;color:var(--text2);white-space:nowrap}

/* GRID */
.comics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.comic-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}
.comic-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.comic-card:active{transform:translateY(0)}
.comic-cover{width:100%;aspect-ratio:2/3;object-fit:contain;background:var(--bg3)}
.comic-cover-placeholder{width:100%;aspect-ratio:2/3;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:11px}
.comic-card-info{padding:8px}
.comic-card-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.comic-card-meta{font-size:11px;color:var(--text2)}

/* MANGA PAGE */
.manga-header{display:flex;gap:20px;margin-bottom:24px}
.manga-cover-wrap{flex-shrink:0}
.manga-cover{width:180px;border-radius:var(--radius);object-fit:cover}
.manga-cover-placeholder{width:180px;height:260px;background:var(--bg3);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;color:var(--text3)}
.manga-details{flex:1;min-width:0}
.manga-title{font-size:22px;font-weight:700;margin-bottom:8px}
.manga-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.manga-row-tag,.meta-tag{background:var(--bg3);border:1px solid var(--border);padding:3px 10px;border-radius:20px;font-size:12px;color:var(--text2)}
.manga-desc{color:var(--text2);font-size:14px;line-height:1.7}
.manga-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.chapters-header{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.chapters-count{font-size:13px;color:var(--text2)}
.chapters-list{display:flex;flex-direction:column;gap:5px}
.chapter-item{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:background .2s,opacity .2s}
.chapter-item:hover,.chapter-item:active{background:var(--bg3)}
.chapter-item.read{opacity:.4}.chapter-item.read:hover{opacity:.8}
.chapter-item.chapter-hidden-admin{border-color:#e74c3c;background:rgba(231,76,60,.1)}
.chapter-item.chapter-hidden-admin .chapter-label{color:#e74c3c}
.chapter-label{font-size:14px;font-weight:500}
.chapter-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.chapter-date{font-size:12px;color:var(--text3)}.chapter-likes{font-size:12px;color:var(--text2)}.chapter-rating{font-size:12px;color:#f1c40f}
.read-badge{font-size:11px;color:#2ecc71}

/* READER */
.reader-wrap{display:flex;align-items:flex-start}
.reader-sidebar{position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto;width:260px;background:var(--bg2);border-right:1px solid var(--border);flex-shrink:0;transition:width .25s,opacity .25s}
.reader-sidebar.collapsed{width:0;opacity:0;overflow:hidden}
.reader-sidebar-inner{width:260px;padding:14px}
.reader-sidebar-toggle{position:fixed;top:50%;transform:translateY(-50%);background:var(--bg2);border:1px solid var(--border);border-left:none;border-radius:0 6px 6px 0;padding:10px 5px;cursor:pointer;color:var(--text2);z-index:50;font-size:14px}
.reader-main{flex:1;min-width:0}
.sidebar-section{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.sidebar-section:last-child{border-bottom:none}
.sidebar-section h4{font-size:11px;color:var(--text3);margin-bottom:8px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.sidebar-nav-btns{display:flex;gap:6px;margin-bottom:8px}
.chapter-select-sidebar{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);padding:7px 10px;border-radius:var(--radius);font-size:13px;outline:none;margin-top:6px}
.mode-btns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:6px}
.dir-btns{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mode-btn,.dir-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text2);padding:6px 4px;border-radius:var(--radius);cursor:pointer;font-size:11px;text-align:center;transition:all .2s;font-family:inherit}
.mode-btn.active,.dir-btn.active,.mode-btn:hover,.dir-btn:hover{border-color:var(--accent);color:var(--accent)}
.dir-btns-wrap{display:none}.dir-btns-wrap.visible{display:block}
.reader-images{display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;min-height:200px}
.reader-images img{max-width:800px;width:100%;display:block}
.reader-images.fit-width img{max-width:100%}
.page-viewer{display:flex;justify-content:center;align-items:flex-start;gap:2px;padding:16px;min-height:400px;cursor:pointer;user-select:none}
.page-viewer img{max-height:calc(100vh - 120px);width:auto;max-width:100%;pointer-events:none}
.page-nav{display:flex;justify-content:center;align-items:center;gap:16px;padding:14px;background:var(--bg2);border-top:1px solid var(--border)}
.page-nav .page-info{font-size:14px;color:var(--text2);min-width:80px;text-align:center}
.page-nav-btn{background:var(--bg3);border:1px solid var(--border);color:var(--text);padding:8px 20px;border-radius:var(--radius);cursor:pointer;font-size:14px;font-family:inherit;transition:all .2s}
.page-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.page-nav-btn:disabled{opacity:.3;cursor:not-allowed}
.no-pages{text-align:center;padding:60px;color:var(--text3)}

/* COMMENTS */
.comments-section{max-width:800px;margin:0 auto;padding:24px 20px 60px}
.comments-title{font-size:18px;font-weight:600;margin-bottom:16px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.comment-form{margin-bottom:24px}
.comment-form textarea{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical;min-height:70px;outline:none}
.comment-form textarea:focus{border-color:var(--accent)}
.comment-form .form-footer{display:flex;justify-content:flex-end;margin-top:8px}
.comment{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:12px;margin-bottom:8px}
.comment-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
.comment-author{font-size:13px;font-weight:600;color:var(--accent)}
.comment-date{font-size:11px;color:var(--text3)}
.comment-body{font-size:14px;line-height:1.6;margin-bottom:8px;white-space:pre-wrap;word-break:break-word}
.comment-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.comment-like-btn{background:none;border:1px solid var(--border);color:var(--text3);cursor:pointer;font-size:12px;padding:3px 8px;border-radius:12px;transition:all .2s;display:flex;align-items:center;gap:4px;font-family:inherit}
.comment-like-btn:hover,.comment-like-btn.liked{border-color:var(--accent);color:var(--accent)}
.comment-reply-btn,.comment-delete-btn,.comment-ban-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:12px;padding:3px 8px;border-radius:4px;transition:color .2s;font-family:inherit}
.comment-reply-btn:hover{color:var(--text)}.comment-delete-btn:hover,.comment-ban-btn:hover{color:#e74c3c}
.comment-delete-btn{margin-left:auto}
.reply-form{display:none;margin-top:8px}.reply-form.open{display:block}
.reply-form textarea{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:8px 10px;font-size:13px;font-family:inherit;resize:vertical;min-height:60px;outline:none}
.reply-form .form-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.no-comments{color:var(--text3);font-size:14px;text-align:center;padding:20px}
.login-to-comment{color:var(--text3);font-size:14px;margin-bottom:16px}.login-to-comment a{color:var(--accent)}

/* CHAPTER ACTIONS */
.chapter-actions{max-width:800px;margin:0 auto;padding:12px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--bg2);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.star-rating{display:flex;gap:4px;align-items:center}
.star{font-size:22px;color:var(--text3);cursor:pointer;transition:color .15s;line-height:1}.star.active,.star:hover{color:#f1c40f}
.star-form{display:flex;align-items:center;gap:8px}.rating-value{font-size:13px;color:var(--text2)}

/* AUTH */
.auth-wrap{max-width:400px;margin:40px auto}
.auth-box{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:28px}
.auth-title{font-size:22px;font-weight:700;margin-bottom:20px;text-align:center}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:13px;color:var(--text2);margin-bottom:6px}
.form-control{width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;font-size:14px;font-family:inherit;transition:border-color .2s;outline:none}
.form-control:focus{border-color:var(--accent)}
textarea.form-control{resize:vertical;min-height:80px}
.form-submit{width:100%;padding:11px;font-size:15px;font-weight:600}
.auth-switch{text-align:center;margin-top:14px;font-size:13px;color:var(--text2)}.auth-switch a{color:var(--accent)}
.alert{padding:10px 14px;border-radius:var(--radius);margin-bottom:14px;font-size:14px}
.alert-error{background:rgba(231,76,60,.15);border:1px solid rgba(231,76,60,.3);color:#e74c3c}

/* HOME SIDEBAR */
.home-layout{display:flex;gap:24px;align-items:flex-start}
.home-main{flex:1;min-width:0;max-width:55%}.home-sidebar{width:280px;flex-shrink:0;position:sticky;top:76px;align-self:flex-start}
.sidebar-box{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:14px}
.sidebar-title{font-size:15px;font-weight:600;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.social-icons{display:flex;justify-content:center;gap:24px;margin-bottom:14px}
.social-icon{display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--text2);font-size:12px;transition:color .2s}.social-icon:hover{color:var(--text)}
.social-icon svg{width:30px;height:30px}
.sidebar-text{font-size:13px;color:var(--text2);line-height:1.6;text-align:center;margin-bottom:10px}
.support-icons{display:flex;justify-content:center;gap:14px;margin-top:10px}
.support-btn{display:flex;align-items:center;gap:6px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:7px 12px;color:var(--text2);font-size:13px;transition:all .2s}
.support-btn:hover{border-color:var(--accent);color:var(--text)}
.mcnally-box{font-size:12px;color:var(--text2);line-height:1.6;text-align:center}
.mcnally-box .code{color:var(--accent);font-weight:700;font-size:18px}.mcnally-box a{color:var(--accent)}

/* MISC */
.back-link{display:inline-flex;align-items:center;gap:6px;color:var(--text2);font-size:14px;margin-bottom:20px;transition:color .2s}.back-link:hover{color:var(--text)}
.footer{text-align:center;padding:24px;color:var(--text3);font-size:13px;border-top:1px solid var(--border);flex-shrink:0}
.empty-state{text-align:center;padding:60px;color:var(--text3)}

/* TABS */
.home-tabs{position:sticky;top:56px;z-index:1000;background:var(--bg1);margin:0 -20px;padding:0 20px;}.tab{padding:10px 20px;color:var(--text2);font-size:14px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .2s}
.tab:hover{color:var(--text)}.tab-active{color:var(--text);border-bottom-color:var(--accent)}

/* MOBILE */
@media(max-width:1400px){body{padding-top:var(--header-h, 96px)}.navbar-left,.navbar-right{display:contents}.navbar{flex-wrap:wrap;height:auto;padding:0 12px;align-items:center}.logo{order:1;height:56px;display:flex;align-items:center}.forum-ext-link{order:2;height:56px;display:inline-flex;align-items:center}.search-form{order:3;margin-left:auto}.theme-toggle{order:4;height:56px;display:flex;align-items:center}.nav-auth{order:5;height:56px;display:flex;align-items:center}.home-layout{margin-top:0!important}.home-main{max-width:100%;width:100%;margin:0 auto;padding-top:10px}.nav-links{position:relative;left:auto;transform:none;width:100%;justify-content:center;border-top:1px solid var(--border);height:40px;order:10}.nav-links a{font-size:13px;padding:0 10px}}

@media(max-width:768px){
  .container{padding:24px 12px}
  .home-layout{gap:0}
  .home-main{max-width:100%;width:100%}
  .navbar{padding:0 8px;gap:6px}
  .nav-links{display:none}.forum-ext-link{display:none!important}.nav-auth{display:none}.hamburger{margin-left:auto}.logo{order:1}.theme-toggle{order:2;margin:0 auto}.hamburger{order:3}
  .hamburger{display:flex}
  .theme-toggle{gap:2px}
  .theme-btn{width:22px;height:22px;font-size:10px}
  .search-form{max-width:120px}
  .nav-user{display:none}
  .container{padding:14px 12px}
  .comics-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
  .comic-card-info{padding:6px}
  .manga-header{flex-direction:column;gap:14px}
  .manga-cover,.manga-cover-placeholder{width:140px;margin:0 auto}
  .manga-title{font-size:20px}
  .latest-thumb,.latest-thumb-placeholder{width:80px;height:110px}
  .latest-comic{font-size:16px}
  .latest-chapter{font-size:14px;white-space:normal}
  .stat-badge{font-size:15px}
  .latest-item{padding:10px 12px;gap:10px}
  .auth-wrap{margin:20px auto;padding:0 12px}
  .auth-box{padding:20px}
  .home-layout{flex-direction:column}
  .home-sidebar{width:100%}
  /* Reader mobile */
  .reader-sidebar{width:220px}
  .reader-sidebar.collapsed{width:0}
  .reader-sidebar-inner{width:220px}
  .page-viewer{padding:8px}
  .page-viewer img{max-height:calc(100vh - 160px)}
  .chapter-item{padding:8px 12px}
  .chapter-right{gap:8px}
  .chapter-date{display:none}
  .comments-section{padding:16px 12px 40px}
  
}
@media(max-width:768px){.mobile-section-title{display:block!important}}
@media(max-width:480px){
  .latest-stats{flex-direction:row;align-items:center;justify-content:flex-start;margin-top:4px}
  .home-main{max-width:100%}
  .comics-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .manga-actions{flex-direction:column}
  .manga-actions .btn,.manga-actions .btn-fav{width:100%;justify-content:center}
  .search-form{display:none}
  .nav-auth .btn-outline{display:none}
}.new-badge{background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px;vertical-align:middle}
.manga-row-tag.status-en-cours,.meta-tag.status-en-cours{background:rgba(46,204,113,.15);border-color:#2ecc71;color:#2ecc71}
.manga-row-tag.status-termine,.meta-tag.status-termine{background:rgba(52,152,219,.15);border-color:#3498db;color:#3498db}
.manga-row-tag.status-pause,.meta-tag.status-pause{background:rgba(243,156,18,.15);border-color:#f39c18;color:#f39c18}
.manga-row-tag.status-abandonne,.meta-tag.status-abandonne{background:rgba(231,76,60,.15);border-color:#e74c3c;color:#e74c3c}