:root {
--crimson:#8B0000;--crimson-light:#C41E3A;--crimson-bright:#E8192C;
--gold:#D4AF37;--gold-light:#F5C842;--gold-dim:#8B7536;
--void:#050508;--dark:#0A0A12;--dark2:#0F0F1A;--dark3:#141420;
--dark4:#1A1A2E;--dark5:#20203A;
--text:#E8E0D0;--text-dim:#9A8E7C;--text-muted:#5C5448;
--border:rgba(212,175,55,0.15);--border-bright:rgba(212,175,55,0.4);
--red-glow:rgba(139,0,0,0.3);
--sidebar-w:220px;--bottom-nav-h:64px;
--transition:cubic-bezier(0.25,0.46,0.45,0.94);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;background:var(--void);color:var(--text);min-height:100vh;overflow-x:hidden;}
::-webkit-scrollbar{width:4px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--crimson);border-radius:2px;}
/* PAGE SYSTEM */
.page{display:none;min-height:100vh;position:relative;z-index:1;}
.page.active{display:flex;}
/* OVERLAY MODALS */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.85);z-index:200;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-overlay.open{display:flex;}
.modal-box{background:var(--dark2);border:1px solid var(--border-bright);border-radius:16px;width:90%;max-width:400px;padding:32px 28px;position:relative;}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-dim);font-size:20px;cursor:pointer;}
.modal-logo{font-family:'Cinzel Decorative',cursive;font-size:20px;font-weight:900;background:linear-gradient(135deg,var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;margin-bottom:4px;}
.modal-sub{text-align:center;font-size:11px;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;margin-bottom:24px;}
.modal-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:24px;}
.modal-tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s;font-family:'Cinzel',serif;}
.modal-tab.active{color:var(--gold-light);border-bottom-color:var(--gold);}
.form-group{margin-bottom:16px;}
.form-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block;}
.form-input{width:100%;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:14px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;}
.form-input:focus{border-color:var(--gold-dim);}
.form-input::placeholder{color:var(--text-muted);}
.btn-full{width:100%;padding:12px;border-radius:8px;border:none;font-size:14px;font-weight:600;font-family:'Cinzel',serif;cursor:pointer;letter-spacing:1px;transition:all 0.2s;}
.btn-crimson{background:linear-gradient(135deg,var(--crimson),var(--crimson-light));color:white;}
.btn-crimson:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--red-glow);}
.form-divider{text-align:center;font-size:12px;color:var(--text-muted);margin:16px 0;}
.btn-gold-outline{background:transparent;color:var(--gold-light);border:1px solid var(--gold-dim);}
.btn-gold-outline:hover{background:rgba(212,175,55,0.1);}
.form-error{color:#ff6b6b;font-size:12px;margin-top:4px;display:none;}
.user-id-box{background:var(--dark3);border:1px solid var(--border-bright);border-radius:8px;padding:12px;text-align:center;margin-top:16px;}
.user-id-label{font-size:10px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:4px;}
.user-id-value{font-size:18px;font-weight:700;font-family:'Cinzel',serif;color:var(--gold-light);letter-spacing:3px;}
/* DESKTOP */
@media(min-width:768px){
.page{padding-left:var(--sidebar-w);}
.mobile-bottom-nav{display:none!important;}
.desktop-sidebar{display:flex!important;}
.mobile-topbar{display:none!important;}
.desktop-topbar{display:flex!important;}
}
@media(max-width:767px){
.page{padding-bottom:var(--bottom-nav-h);flex-direction:column;}
.desktop-sidebar{display:none!important;}
.mobile-bottom-nav{display:flex!important;}
.desktop-topbar{display:none!important;}
.mobile-topbar{display:flex!important;}
}
/* SIDEBAR */
.desktop-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:var(--dark2);border-right:1px solid var(--border);flex-direction:column;z-index:100;}
.sidebar-logo{padding:24px 20px 20px;border-bottom:1px solid var(--border);}
.sidebar-logo .logo-text{font-family:'Cinzel Decorative',cursive;font-size:22px;font-weight:900;background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--crimson-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:3px;}
.sidebar-logo .logo-sub{font-size:9px;color:var(--text-muted);letter-spacing:4px;text-transform:uppercase;margin-top:2px;}
.sidebar-nav{flex:1;padding:16px 0;overflow-y:auto;}
.nav-section-title{font-size:9px;color:var(--text-muted);letter-spacing:3px;text-transform:uppercase;padding:12px 20px 4px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 20px;cursor:pointer;color:var(--text-dim);font-size:13px;font-weight:500;transition:all 0.2s;border-left:2px solid transparent;}
.nav-item:hover{color:var(--text);background:rgba(212,175,55,0.05);}
.nav-item.active{color:var(--gold-light);border-left-color:var(--gold);background:rgba(212,175,55,0.08);}
.nav-icon{width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:14px;}
.nav-badge{margin-left:auto;background:var(--crimson);color:white;font-size:9px;padding:2px 6px;border-radius:8px;font-weight:600;}
.sidebar-bottom{padding:16px 20px;border-top:1px solid var(--border);}
.user-mini{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px;border-radius:8px;transition:background 0.2s;}
.user-mini:hover{background:var(--dark4);}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--crimson),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white;flex-shrink:0;}
.user-info-name{font-size:12px;font-weight:600;color:var(--text);}
.user-info-id{font-size:10px;color:var(--text-muted);font-family:'Cinzel',serif;}
.sidebar-login-btn{width:100%;padding:10px;border-radius:8px;background:linear-gradient(135deg,var(--crimson),var(--crimson-light));border:none;color:white;font-size:12px;font-weight:600;font-family:'Cinzel',serif;cursor:pointer;letter-spacing:1px;margin-top:8px;}
.coin-display{display:flex;align-items:center;gap:6px;background:rgba(212,175,55,0.1);border:1px solid var(--border-bright);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--gold-light);margin-top:8px;}
/* MOBILE TOPBAR */
.mobile-topbar{position:sticky;top:0;height:56px;background:rgba(10,10,18,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);align-items:center;justify-content:space-between;padding:0 16px;z-index:50;flex-shrink:0;}
.topbar-logo{font-family:'Cinzel Decorative',cursive;font-size:16px;font-weight:900;background:linear-gradient(135deg,var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.topbar-right{display:flex;align-items:center;gap:8px;}
.topbar-btn{width:36px;height:36px;border-radius:50%;background:var(--dark3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--text-dim);}
.topbar-coin{display:flex;align-items:center;gap:4px;background:rgba(212,175,55,0.12);border:1px solid var(--border-bright);border-radius:16px;padding:4px 8px;font-size:11px;font-weight:600;color:var(--gold-light);max-width:88px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
@media(max-width:420px){.topbar-logo{font-size:14px;}.topbar-right{gap:6px;}.topbar-btn{width:34px;height:34px;}}
/* DESKTOP TOPBAR */
.desktop-topbar{position:fixed;left:var(--sidebar-w);right:0;top:0;height:60px;background:rgba(10,10,18,0.97);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);align-items:center;gap:16px;padding:0 24px;z-index:90;}
.topbar-title{font-family:'Cinzel',serif;font-size:16px;font-weight:600;color:var(--text);letter-spacing:1px;}
.search-bar{flex:1;max-width:320px;position:relative;}
.search-bar input{width:100%;background:var(--dark3);border:1px solid var(--border);border-radius:8px;padding:8px 12px 8px 36px;color:var(--text);font-size:13px;font-family:'Inter',sans-serif;outline:none;transition:border-color 0.2s;}
.search-bar input:focus{border-color:var(--gold-dim);}
.search-bar input::placeholder{color:var(--text-muted);}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:14px;}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px;}
.topbar-vip-badge{background:linear-gradient(135deg,var(--gold-dim),var(--gold));color:var(--void);font-size:10px;font-weight:800;font-family:'Cinzel',serif;letter-spacing:1px;padding:4px 10px;border-radius:4px;}
.topbar-coins-d{display:flex;align-items:center;gap:6px;background:rgba(212,175,55,0.1);border:1px solid var(--border-bright);border-radius:20px;padding:6px 14px;font-size:13px;font-weight:600;color:var(--gold-light);cursor:pointer;}
.avatar-d{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--crimson),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:white;cursor:pointer;border:2px solid var(--border-bright);}
.topbar-login-btn{background:linear-gradient(135deg,var(--crimson),var(--crimson-light));color:white;border:none;padding:8px 18px;border-radius:8px;font-size:12px;font-weight:600;font-family:'Cinzel',serif;cursor:pointer;letter-spacing:1px;}
/* BOTTOM NAV */
.mobile-bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:var(--dark2);border-top:1px solid var(--border);justify-content:space-around;align-items:center;z-index:100;}
.bot-nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:8px 12px;border-radius:8px;color:var(--text-muted);min-width:56px;}
.bot-nav-item.active{color:var(--gold);}
.bot-nav-icon{font-size:20px;}
.bot-nav-label{font-size:10px;font-weight:500;}
.bot-add-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--crimson),var(--crimson-light));display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:22px;color:white;box-shadow:0 0 20px var(--red-glow);transform:translateY(-8px);}
/* MAIN */
.main-content{flex:1;overflow-y:auto;position:relative;}
@media(min-width:768px){.main-content{padding-top:60px;}}
.mobile-discover-search{display:none;padding:8px 12px;border-bottom:1px solid var(--border);background:rgba(10,10,18,0.98);}
@media(max-width:767px){.mobile-discover-search{display:block;}}
/* HERO */
.hero-banner{position:relative;height:320px;overflow:hidden;background:var(--dark);}
@media(min-width:768px){.hero-banner{height:420px;}}
.hero-bg{position:absolute;inset:0;background:linear-gradient(135deg,rgba(139,0,0,0.6) 0%,transparent 60%),linear-gradient(to right,rgba(0,0,0,0.8) 0%,transparent 50%);z-index:1;}
.hero-artwork{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;overflow:hidden;}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0.6;}
.hero-content{position:absolute;bottom:0;left:0;right:0;padding:24px;z-index:2;background:linear-gradient(to top,rgba(5,5,8,0.95) 0%,transparent 100%);}
@media(min-width:768px){.hero-content{padding:32px 40px;}}
.hero-tag{display:inline-flex;align-items:center;gap:4px;background:var(--crimson);color:white;font-size:8px;font-weight:700;font-family:'Cinzel',serif;letter-spacing:0.8px;padding:2px 6px;border-radius:3px;margin-bottom:8px;line-height:1;}
.hero-title{font-family:'Cinzel Decorative',cursive;font-size:clamp(18px,4vw,32px);font-weight:700;color:white;line-height:1.2;margin-bottom:8px;text-shadow:0 0 30px rgba(139,0,0,0.5);}
.hero-desc{font-size:13px;color:rgba(232,224,208,0.7);margin-bottom:16px;max-width:400px;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.hero-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.btn-primary{background:linear-gradient(135deg,var(--crimson),var(--crimson-light));color:white;border:none;padding:10px 22px;border-radius:6px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;transition:all 0.2s;}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px var(--red-glow);}
.btn-outline{background:transparent;color:var(--gold-light);border:1px solid var(--gold-dim);padding:10px 22px;border-radius:6px;font-size:13px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;}
/* SECTION */
.section{padding:24px 16px;}
@media(min-width:768px){.section{padding:28px 32px;}}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.section-title{font-family:'Cinzel',serif;font-size:14px;font-weight:600;color:var(--text);letter-spacing:1px;text-transform:uppercase;}
.section-link{font-size:12px;color:var(--gold-dim);cursor:pointer;}
/* MANGA CARDS */
.scroll-row{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.scroll-row::-webkit-scrollbar{display:none;}
.manga-card{flex-shrink:0;width:120px;cursor:pointer;position:relative;transition:transform 0.2s;}
@media(min-width:768px){.manga-card{width:150px;}}
.manga-card:hover{transform:translateY(-3px);}
.manga-thumb{width:100%;aspect-ratio:3/4;border-radius:8px;overflow:hidden;position:relative;background:var(--dark3);border:1px solid var(--border);}
.manga-thumb img{width:100%;height:100%;object-fit:cover;}
.manga-rank{position:absolute;top:0;left:0;width:32px;height:36px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--gold-light);font-family:'Cinzel',serif;border-radius:0 0 10px 0;background:linear-gradient(135deg,rgba(5,5,8,0.97) 0%,rgba(30,10,10,0.97) 100%);border-right:1px solid rgba(212,175,55,0.3);border-bottom:1px solid rgba(212,175,55,0.3);letter-spacing:-0.5px;z-index:2;}
.manga-rank[data-r="1"]{background:linear-gradient(135deg,#3d1a00,#7a3600);color:#FFD700;border-color:rgba(255,215,0,0.5);font-size:15px;text-shadow:0 0 10px rgba(255,200,0,0.8);}
.manga-rank[data-r="2"]{background:linear-gradient(135deg,#1a1a2e,#2d2d45);color:#C0C0C0;border-color:rgba(192,192,192,0.4);text-shadow:0 0 8px rgba(192,192,192,0.6);}
.manga-rank[data-r="3"]{background:linear-gradient(135deg,#2a1000,#5c2800);color:#CD7F32;border-color:rgba(205,127,50,0.4);text-shadow:0 0 8px rgba(205,127,50,0.6);}
.top10-crown-icon{display:inline-flex;align-items:center;margin-right:6px;}
.manga-info{padding:6px 2px;}
.manga-title{font-size:11px;font-weight:600;color:var(--text);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.manga-meta{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:10px;color:var(--text-dim);}
.manga-rating{color:var(--gold);}
/* GRID */
.manga-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(min-width:500px){.manga-grid{grid-template-columns:repeat(4,1fr);}}
@media(min-width:768px){.manga-grid{grid-template-columns:repeat(5,1fr);gap:16px;}}
@media(min-width:1024px){.manga-grid{grid-template-columns:repeat(6,1fr);}}
/* GENRE CHIPS */
.genre-filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:16px;scrollbar-width:none;}
.genre-filters::-webkit-scrollbar{display:none;}
.genre-chip{flex-shrink:0;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--border);color:var(--text-dim);background:transparent;transition:all 0.2s;}
.genre-chip.active{background:var(--crimson);border-color:var(--crimson);color:white;}
/* DETAIL PAGE */
.detail-cover-wrapper{position:relative;height:280px;overflow:hidden;}
@media(min-width:768px){.detail-cover-wrapper{height:360px;}}
.detail-cover-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,var(--void) 100%);z-index:1;}
.detail-cover-img{width:100%;height:100%;object-fit:cover;object-position:center top;opacity:0.5;}
.detail-info{position:relative;z-index:2;padding:0 16px 16px;margin-top:-60px;}
@media(min-width:768px){.detail-info{padding:0 32px 24px;}}
.detail-cover-small{width:90px;height:120px;border-radius:8px;overflow:hidden;border:2px solid var(--border-bright);margin-bottom:12px;flex-shrink:0;}
.detail-cover-small img{width:100%;height:100%;object-fit:cover;}
.detail-header{display:flex;gap:16px;align-items:flex-end;}
.detail-meta{flex:1;}
.detail-title{font-family:'Cinzel Decorative',cursive;font-size:clamp(14px,3vw,24px);font-weight:700;color:white;margin-bottom:8px;}
.detail-stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.detail-stat{font-size:12px;color:var(--text-dim);}
.detail-stat span{color:var(--gold-light);font-weight:600;}
.detail-actions{display:flex;gap:10px;flex-wrap:wrap;}
/* CHAPTER LIST */
.chapter-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background 0.2s;}
@media(min-width:768px){.chapter-item{padding:12px 32px;}}
.chapter-item:hover{background:rgba(212,175,55,0.04);}
.chapter-thumb{width:50px;height:50px;border-radius:6px;background:var(--dark3);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.chapter-info{flex:1;min-width:0;}
.chapter-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chapter-meta{font-size:11px;color:var(--text-muted);}
.chapter-free{font-size:10px;font-weight:700;color:#22c55e;font-family:'Cinzel',serif;letter-spacing:1px;}
.chapter-lock{font-size:11px;color:var(--gold-dim);}
/* LIBRARY */
.lib-item{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;}
@media(min-width:768px){.lib-item{padding:12px 32px;}}
.lib-cover{width:60px;height:80px;border-radius:6px;overflow:hidden;flex-shrink:0;border:1px solid var(--border);}
.lib-cover img{width:100%;height:100%;object-fit:cover;}
.lib-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:4px;}
.lib-progress{font-size:11px;color:var(--text-muted);margin-bottom:6px;}
.lib-progress-bar{height:3px;background:var(--dark4);border-radius:2px;overflow:hidden;}
.lib-progress-fill{height:100%;background:linear-gradient(90deg,var(--crimson),var(--gold));border-radius:2px;transition:width 0.3s;}
.lib-continue{font-size:12px;color:var(--gold-light);margin-top:8px;}
/* COIN SHOP */
.coin-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:0 16px;}
@media(min-width:500px){.coin-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:768px){.coin-grid{grid-template-columns:repeat(4,1fr);padding:0 32px;}}
.coin-pkg{background:var(--dark2);border:1px solid var(--border);border-radius:12px;padding:16px 12px;text-align:center;cursor:pointer;transition:all 0.2s;position:relative;}
.coin-pkg:hover{border-color:var(--gold-dim);transform:translateY(-2px);}
.coin-pkg.popular{border-color:var(--gold);background:rgba(212,175,55,0.05);}
.pkg-badge{position:absolute;top:-8px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--void);font-size:8px;font-weight:800;padding:2px 8px;border-radius:10px;white-space:nowrap;font-family:'Cinzel',serif;}
.pkg-icon{height:44px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.pkg-amount{font-size:20px;font-weight:700;color:var(--gold-light);}
.pkg-bonus{font-size:10px;color:#22c55e;min-height:16px;}
.pkg-price{font-size:16px;font-weight:600;color:var(--text);margin:4px 0 8px;}
/* VIP */
.vip-banner{background:linear-gradient(135deg,#1a0a00,#2a1500,#1a0a00);border:1px solid var(--gold-dim);border-radius:16px;padding:24px;margin:16px;position:relative;overflow:hidden;}
@media(min-width:768px){.vip-banner{margin:24px 32px;padding:32px;}}
.vip-title{font-family:'Cinzel Decorative',cursive;font-size:clamp(18px,4vw,28px);font-weight:900;background:linear-gradient(135deg,var(--gold-light),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px;}
.vip-perks{list-style:none;margin:16px 0;}
.vip-perks li{padding:6px 0;font-size:13px;color:var(--text-dim);}
.vip-perks li::before{content:"✦ ";color:var(--gold);}
.vip-price{font-size:28px;font-weight:700;color:var(--gold-light);}
.vip-price small{font-size:14px;color:var(--text-muted);}
/* PROFILE */
.profile-header{padding:24px 16px;text-align:center;}
@media(min-width:768px){.profile-header{padding:32px;}}
.profile-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--crimson),var(--gold-dim));display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:white;margin:0 auto 12px;border:3px solid var(--border-bright);}
.profile-name{font-size:20px;font-weight:700;color:var(--text);font-family:'Cinzel',serif;}
.profile-id{font-size:12px;color:var(--text-muted);letter-spacing:2px;margin-top:4px;}
.profile-stats{display:flex;justify-content:center;gap:32px;margin-top:16px;}
.profile-stat{text-align:center;}
.profile-stat-val{font-size:20px;font-weight:700;color:var(--gold-light);}
.profile-stat-label{font-size:11px;color:var(--text-muted);}
.profile-menu-item{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;color:var(--text-dim);font-size:14px;}
@media(min-width:768px){.profile-menu-item{padding:14px 32px;}}
.profile-menu-item:hover{background:rgba(212,175,55,0.04);}
.profile-menu-icon{font-size:18px;}
.profile-menu-arrow{margin-left:auto;color:var(--text-muted);}
.profile-id-box{background:var(--dark3);border:1px solid var(--border-bright);border-radius:10px;padding:14px;margin:16px;display:flex;align-items:center;gap:12px;}
@media(min-width:768px){.profile-id-box{margin:16px 32px;}}
.profile-id-label{font-size:10px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;}
.profile-id-value{font-size:16px;font-weight:700;color:var(--gold-light);font-family:'Cinzel',serif;letter-spacing:2px;}
/* ADMIN */
.admin-layout{display:flex;flex:1;flex-direction:row;}@media(max-width:767px){.admin-layout{flex-direction:column;}}
.admin-sidebar-inner{width:210px;background:var(--dark3);border-right:1px solid var(--border);padding:8px 0;flex-shrink:0;overflow-y:auto;}
@media(max-width:767px){.admin-sidebar-inner{width:100%;border-right:none;border-bottom:1px solid var(--border);display:flex!important;overflow-x:auto;padding:6px;gap:4px;flex-wrap:nowrap;}}
.admin-nav-item{padding:9px 14px;cursor:pointer;font-size:12px;color:var(--text-dim);border-left:2px solid transparent;transition:all 0.2s;display:flex;align-items:center;gap:8px;white-space:nowrap;}
@media(max-width:767px){.admin-nav-item{border-left:none;border-radius:8px;padding:7px 12px;font-size:11px;flex-shrink:0;}}
.admin-nav-item.active{color:var(--gold-light);border-left-color:var(--gold);background:rgba(212,175,55,0.08);}@media(max-width:767px){.admin-nav-item.active{border-left:none;background:rgba(212,175,55,0.15);border-radius:8px;}}
.admin-nav-item:hover{color:var(--text);background:rgba(255,255,255,0.03);}
.admin-main{flex:1;overflow-y:auto;}
.admin-stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px;}
@media(min-width:600px){.admin-stat-grid{grid-template-columns:repeat(4,1fr);}}
.admin-stat-card{background:var(--dark3);border:1px solid var(--border);border-radius:10px;padding:16px;}
.admin-stat-val{font-size:22px;font-weight:700;color:var(--gold-light);}
.admin-stat-label{font-size:11px;color:var(--text-muted);margin-top:4px;}
.admin-table{width:100%;border-collapse:collapse;font-size:12px;}
.admin-table th{text-align:left;padding:8px 12px;color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border);}
.admin-table td{padding:8px 12px;border-bottom:1px solid rgba(212,175,55,0.06);color:var(--text-dim);}
.admin-badge{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:700;}
.badge-admin{background:rgba(139,0,0,0.3);color:#ff8080;border:1px solid var(--crimson);}
.badge-vip{background:rgba(212,175,55,0.2);color:var(--gold-light);border:1px solid var(--gold-dim);}
.badge-user{background:rgba(255,255,255,0.05);color:var(--text-dim);border:1px solid var(--border);}
.admin-id-tag{background:var(--dark4);padding:2px 6px;border-radius:4px;font-family:'Cinzel',serif;font-size:10px;color:var(--gold-dim);}
.admin-section-title{font-family:'Cinzel',serif;font-size:14px;color:var(--text);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border);}
/* SVG ICONS */
.svg-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.svg-icon svg{width:100%;height:100%;fill:currentColor;}
/* SCROLL ROW WRAPPER */
.scroll-row-wrap{position:relative;}
.scroll-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:10;width:36px;height:36px;border-radius:50%;background:rgba(10,10,18,0.92);border:1px solid var(--border-bright);color:var(--gold-light);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;backdrop-filter:blur(6px);}
.scroll-btn:hover{background:var(--crimson);border-color:var(--crimson);color:white;}
.scroll-btn.left{left:-12px;}
.scroll-btn.right{right:-12px;}
@media(max-width:767px){.scroll-btn.left{left:0;}.scroll-btn.right{right:0;}}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--dark3);border:1px solid var(--border-bright);border-radius:8px;padding:10px 20px;font-size:13px;color:var(--text);opacity:0;transition:all 0.3s;z-index:300;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
@media(min-width:768px){.toast{bottom:24px;}}
/* READER */
.reader-page{background:#000;flex-direction:column;}
.reader-header{position:sticky;top:0;background:rgba(0,0,0,0.9);padding:12px 16px;display:flex;align-items:center;gap:12px;z-index:10;}
.reader-title{font-size:13px;color:var(--text);flex:1;}
.reader-content{max-width:800px;margin:0 auto;padding:0 0 80px;}
.reader-page-img{width:100%;display:block;}
/* NOTIFICATIONS */
.notif-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--border);transition:background 0.2s;}
@media(min-width:768px){.notif-item{padding:14px 32px;}}
.notif-item.unread{background:rgba(212,175,55,0.03);}
.notif-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.notif-text{font-size:13px;color:var(--text);}
.notif-time{font-size:11px;color:var(--text-muted);margin-top:4px;}
.unread-dot{width:8px;height:8px;border-radius:50%;background:var(--crimson);flex-shrink:0;margin-top:4px;}
/* ID BADGE */
.id-role-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;font-family:'Cinzel',serif;}
.role-owner{background:linear-gradient(135deg,#4a0080,#800080);color:#e0aaff;border:1px solid #9b59b6;}
.role-admin{background:rgba(139,0,0,0.4);color:#ff8080;border:1px solid var(--crimson);}
.role-vip{background:rgba(212,175,55,0.2);color:var(--gold-light);border:1px solid var(--gold-dim);}
.role-user{background:rgba(255,255,255,0.05);color:var(--text-muted);border:1px solid var(--border);}
/* ============================================================
CAROUSEL DRAG-TO-SCROLL UPGRADE
============================================================ */
/* Scroll row wrapper - positioning context for arrows */
.scroll-row-wrap {
position: relative;
margin: 0 -4px;
padding: 0 4px;
}
/* Arrow buttons - subtle by default, vivid on hover */
.scroll-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(10,10,18,0.55);
border: 1px solid rgba(212,175,55,0.2);
color: rgba(212,175,55,0.4);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(8px);
opacity: 0.4;
}
.scroll-btn:hover {
background: var(--crimson);
border-color: var(--crimson-light);
color: white;
opacity: 1;
transform: translateY(-50%) scale(1.08);
box-shadow: 0 0 18px var(--red-glow);
}
.scroll-row-wrap:hover .scroll-btn { opacity: 0.85; }
.scroll-btn.left { left: -14px; }
.scroll-btn.right { right: -14px; }
@media(max-width:767px){
.scroll-btn { width:30px;height:30px;opacity:0.3; }
.scroll-btn.left { left: 0; }
.scroll-btn.right { right: 0; }
}
/* Drag cursor states */
.scroll-row.dragging { cursor: grabbing !important; user-select: none; }
.scroll-row { cursor: grab; scroll-behavior: smooth; }
/* ============================================================
HOME PAGE NEW SECTIONS
============================================================ */
/* Section dividers with glow accent */
.section-divider {
height: 1px;
background: linear-gradient(to right, transparent, var(--border-bright), transparent);
margin: 0 16px;
}
@media(min-width:768px){ .section-divider { margin: 0 32px; } }
/* Trending Now — fire badge */
.trend-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, #ff4500, #ff6a00);
color: white;
font-size: 9px;
font-weight: 800;
font-family: 'Cinzel', serif;
letter-spacing: 1px;
padding: 2px 7px;
border-radius: 3px;
}
/* New Releases — green badge */
.new-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 9px;
font-weight: 700;
color: #22c55e;
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.25);
padding: 1px 6px;
border-radius: 3px;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
/* Genre cards grid — Janrlar bo'yicha */
.genre-showcase-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 0;
}
@media(min-width:500px){ .genre-showcase-grid { grid-template-columns: repeat(4, 1fr); } }
@media(min-width:768px){ .genre-showcase-grid { grid-template-columns: repeat(6, 1fr); gap: 14px; } }
.genre-card {
position: relative;
aspect-ratio: 1/1;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--border);
transition: transform 0.25s var(--transition), box-shadow 0.25s;
background: var(--dark3);
}
.genre-card:hover {
transform: translateY(-4px) scale(1.02);
box-shadow: 0 8px 30px rgba(0,0,0,0.5), 0 0 0 1px var(--border-bright);
}
.genre-card-bg {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
}
.genre-card-bg svg {
width: 52px;
height: 52px;
opacity: 0.85;
filter: drop-shadow(0 0 14px currentColor);
transition: transform 0.3s, opacity 0.3s;
}
.genre-card:hover .genre-card-bg svg {
transform: scale(1.15);
opacity: 1;
}
/* Premium drag hint — fade edge masks */
.scroll-row-wrap::before,
.scroll-row-wrap::after {
content: '';
position: absolute;
top: 0;
bottom: 8px;
width: 24px;
pointer-events: none;
z-index: 5;
}
.scroll-row-wrap::before {
left: 0;
background: linear-gradient(to right, var(--void), transparent);
}
.scroll-row-wrap::after {
right: 0;
background: linear-gradient(to left, var(--void), transparent);
}
.genre-card-overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(5,5,8,0.92) 0%, rgba(5,5,8,0.3) 60%, transparent 100%);
}
.genre-card-label {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 600;
color: var(--text);
text-align: center;
letter-spacing: 0.5px;
}
@media(min-width:768px){ .genre-card-label { font-size: 12px; padding: 10px; } }
/* Wide featured card for "O'zbekistonda Mashhur" */
.uzbek-popular-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media(min-width:600px){ .uzbek-popular-grid { grid-template-columns: repeat(3,1fr); } }
@media(min-width:768px){ .uzbek-popular-grid { grid-template-columns: repeat(4,1fr); gap:14px; } }
.featured-wide-card {
grid-column: 1 / -1;
position: relative;
height: 160px;
border-radius: 12px;
overflow: hidden;
cursor: pointer;
border: 1px solid var(--border);
transition: transform 0.25s;
background: var(--dark3);
}
@media(min-width:768px){ .featured-wide-card { height: 200px; } }
.featured-wide-card:hover { transform: translateY(-2px); }
.featured-wide-card img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.55;
}
.featured-wide-info {
position: absolute;
inset: 0;
display: flex;
align-items: flex-end;
padding: 16px;
background: linear-gradient(to right, rgba(5,5,8,0.9) 40%, transparent 100%);
}
.featured-wide-title {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(14px, 3vw, 22px);
font-weight: 700;
color: white;
text-shadow: 0 2px 12px rgba(0,0,0,0.8);
margin-bottom: 4px;
}
.featured-wide-sub {
font-size: 12px;
color: var(--gold-light);
display: flex;
align-items: center;
gap: 6px;
}
/* Recommendation card — wider with description */
.rec-card {
flex-shrink: 0;
width: 160px;
cursor: pointer;
position: relative;
transition: transform 0.2s;
}
@media(min-width:768px){ .rec-card { width: 200px; } }
.rec-card:hover { transform: translateY(-4px); }
.rec-card .manga-thumb { border-radius: 10px; }
.rec-card-why {
font-size: 10px;
color: var(--gold-dim);
margin-top: 4px;
font-style: italic;
}
/* Section accent line */
.section-title-accent {
display: inline-flex;
align-items: center;
gap: 8px;
}
.section-title-accent::before {
content: '';
display: inline-block;
width: 3px;
height: 16px;
background: linear-gradient(to bottom, var(--gold), var(--crimson));
border-radius: 2px;
}
/* Uzbek popular section flag badge */
.uzb-flag-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
font-weight: 700;
color: #22c55e;
padding: 2px 6px;
border-radius: 3px;
background: rgba(0,120,50,0.15);
border: 1px solid rgba(0,170,70,0.25);
font-family: 'Cinzel', serif;
}
/* Glow separator between major sections */
.section-glow-sep {
height: 1px;
margin: 0 32px;
background: radial-gradient(ellipse 60% 100% at 50% 50%, rgba(212,175,55,0.25), transparent);
}
/* ============================================================
UZ TOP — O'ZBEKISTONDA MASHHUR (Premium Rewrite)
============================================================ */
/* ── Section wrapper ───────────────────────────────────────── */
.uztop-section {
padding: 28px 16px 36px;
position: relative;
}
@media(min-width:768px){ .uztop-section { padding: 36px 32px 48px; } }
/* ── Section heading ───────────────────────────────────────── */
.uztop-heading {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
gap: 12px;
}
.uztop-title-group {
display: flex;
align-items: center;
gap: 10px;
}
.uztop-flag-icon {
font-size: 22px;
line-height: 1;
filter: drop-shadow(0 0 6px rgba(255,255,255,0.3));
}
.uztop-title-text {
font-family: 'Cinzel', serif;
font-size: clamp(13px, 2vw, 17px);
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 50%, var(--crimson-light) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.uztop-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: linear-gradient(135deg, rgba(139,0,0,0.6), rgba(196,30,58,0.4));
border: 1px solid rgba(212,175,55,0.4);
border-radius: 4px;
padding: 3px 9px;
font-family: 'Cinzel', serif;
font-size: 9px;
font-weight: 800;
color: var(--gold-light);
letter-spacing: 2px;
text-transform: uppercase;
box-shadow: 0 0 12px rgba(139,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.05);
}
.uztop-see-all {
font-size: 12px;
color: var(--gold-dim);
cursor: pointer;
white-space: nowrap;
transition: color 0.2s;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.uztop-see-all:hover { color: var(--gold-light); }
/* ── Cinematic Hero Banner ─────────────────────────────────── */
.uztop-hero {
position: relative;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
margin-bottom: 14px;
height: 220px;
border: 1px solid rgba(212,175,55,0.15);
transition: transform 0.3s var(--transition), box-shadow 0.3s;
background: var(--dark3);
}
@media(min-width:500px){ .uztop-hero { height: 260px; } }
@media(min-width:768px){ .uztop-hero { height: 320px; margin-bottom: 18px; } }
@media(min-width:1024px){ .uztop-hero { height: 360px; } }
.uztop-hero:hover {
transform: translateY(-3px);
box-shadow:
0 20px 60px rgba(0,0,0,0.7),
0 0 0 1px rgba(212,175,55,0.3),
0 0 40px rgba(139,0,0,0.25);
}
/* Cover image */
.uztop-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 15%;
opacity: 0.55;
transition: opacity 0.4s, transform 0.5s;
}
.uztop-hero:hover .uztop-hero-img {
opacity: 0.65;
transform: scale(1.03);
}
/* Layered cinematic overlays */
.uztop-hero-overlay-base {
position: absolute;
inset: 0;
background:
linear-gradient(to right, rgba(5,5,8,0.97) 0%, rgba(5,5,8,0.6) 45%, rgba(5,5,8,0.15) 100%),
linear-gradient(to top, rgba(5,5,8,0.98) 0%, transparent 55%);
z-index: 2;
}
/* Crimson atmospheric glow — left side */
.uztop-hero-glow-l {
position: absolute;
inset: 0;
background: radial-gradient(ellipse 55% 80% at 5% 60%, rgba(139,0,0,0.45) 0%, transparent 65%);
z-index: 3;
pointer-events: none;
}
/* Gold rim light — top edge */
.uztop-hero-glow-t {
position: absolute;
top: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(to right, transparent, rgba(212,175,55,0.6) 40%, rgba(212,175,55,0.6) 60%, transparent);
z-index: 6;
}
/* Particle dots — pure CSS, subtle depth */
.uztop-hero-particles {
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
overflow: hidden;
}
.uztop-hero-particles::before,
.uztop-hero-particles::after {
content: '';
position: absolute;
border-radius: 50%;
animation: uzParticleFloat 6s ease-in-out infinite alternate;
}
.uztop-hero-particles::before {
width: 120px; height: 120px;
left: 8%; top: 20%;
background: radial-gradient(circle, rgba(212,175,55,0.08) 0%, transparent 70%);
animation-delay: 0s;
}
.uztop-hero-particles::after {
width: 200px; height: 200px;
left: 2%; bottom: 5%;
background: radial-gradient(circle, rgba(139,0,0,0.12) 0%, transparent 70%);
animation-delay: -3s;
}
@keyframes uzParticleFloat {
0% { transform: translateY(0) scale(1); opacity: 0.6; }
100% { transform: translateY(-18px) scale(1.1); opacity: 1; }
}
/* Content positioned over overlays */
.uztop-hero-content {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 20px 20px 20px;
z-index: 5;
display: flex;
flex-direction: column;
gap: 6px;
}
@media(min-width:768px){ .uztop-hero-content { padding: 28px 36px; gap: 8px; } }
.uztop-hero-eyebrow {
display: flex;
align-items: center;
gap: 8px;
}
.uztop-hero-rank-pill {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--crimson);
color: white;
font-size: 9px;
font-weight: 800;
font-family: 'Cinzel', serif;
letter-spacing: 1.5px;
padding: 3px 8px;
border-radius: 3px;
}
.uztop-hero-rank-num {
background: rgba(255,255,255,0.18);
padding: 1px 5px;
border-radius: 2px;
font-size: 10px;
}
.uztop-hero-title {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(16px, 3.5vw, 32px);
font-weight: 900;
line-height: 1.15;
background: linear-gradient(135deg, #FFFFFF 0%, var(--gold-light) 55%, var(--gold) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: none;
letter-spacing: 0.5px;
max-width: 600px;
}
.uztop-hero-meta {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.uztop-hero-stat {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: rgba(232,224,208,0.7);
}
.uztop-hero-stat svg { flex-shrink: 0; }
.uztop-hero-stat-val { color: var(--gold-light); font-weight: 600; }
.uztop-hero-actions {
display: flex;
gap: 10px;
margin-top: 4px;
}
.uztop-hero-btn-read {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light));
color: white;
border: none;
padding: 9px 20px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
font-family: 'Cinzel', serif;
cursor: pointer;
letter-spacing: 0.5px;
transition: all 0.2s;
box-shadow: 0 4px 16px rgba(139,0,0,0.4);
}
.uztop-hero-btn-read:hover {
transform: translateY(-1px);
box-shadow: 0 6px 24px rgba(139,0,0,0.6);
}
.uztop-hero-btn-save {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(212,175,55,0.08);
color: var(--gold-light);
border: 1px solid rgba(212,175,55,0.35);
padding: 9px 18px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
font-family: 'Cinzel', serif;
cursor: pointer;
letter-spacing: 0.5px;
transition: all 0.2s;
}
.uztop-hero-btn-save:hover {
background: rgba(212,175,55,0.16);
border-color: rgba(212,175,55,0.6);
}
/* ── 4-Card Grid ────────────────────────────────────────────── */
.uztop-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
@media(min-width:768px){
.uztop-grid {
grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
}
/* Premium card — override .manga-card for this section */
.uztop-card {
position: relative;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
background: var(--dark3);
border: 1px solid var(--border);
transition: transform 0.25s var(--transition), box-shadow 0.25s, border-color 0.25s;
}
.uztop-card:hover {
transform: translateY(-5px);
border-color: rgba(212,175,55,0.45);
box-shadow:
0 12px 36px rgba(0,0,0,0.55),
0 0 0 1px rgba(212,175,55,0.2),
0 0 20px rgba(139,0,0,0.15);
}
/* Rank badge */
.uztop-card-rank {
position: absolute;
top: 0; left: 0;
width: 30px; height: 30px;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
color: white;
font-family: 'Cinzel', serif;
border-radius: 0 0 10px 0;
z-index: 3;
box-shadow: 2px 2px 8px rgba(0,0,0,0.4);
}
/* Thumb */
.uztop-card-thumb {
width: 100%;
aspect-ratio: 3/4;
overflow: hidden;
position: relative;
}
.uztop-card-thumb img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 0.4s var(--transition);
}
.uztop-card:hover .uztop-card-thumb img { transform: scale(1.06); }
/* Hover gold shimmer overlay */
.uztop-card-thumb::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(139,0,0,0.25) 0%, transparent 60%);
opacity: 0;
transition: opacity 0.3s;
}
.uztop-card:hover .uztop-card-thumb::after { opacity: 1; }
/* Info */
.uztop-card-info {
padding: 8px 10px 10px;
background: linear-gradient(to bottom, var(--dark3), var(--dark2));
}
.uztop-card-title {
font-size: 11px;
font-weight: 600;
color: var(--text);
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-bottom: 5px;
transition: color 0.2s;
}
.uztop-card:hover .uztop-card-title { color: var(--gold-light); }
.uztop-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
}
.uztop-card-rating {
display: inline-flex;
align-items: center;
gap: 3px;
font-size: 11px;
font-weight: 600;
color: var(--gold);
}
.uztop-card-views {
font-size: 10px;
color: var(--text-muted);
display: flex;
align-items: center;
gap: 3px;
}
/* ============================================================
AZURA PREMIUM UPGRADES — Admin + PromoCode + Chapter Form
============================================================ */
/* Form input focus glow */
.form-input:focus {
border-color: var(--gold-dim) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
}
/* Coin shop promo input glow */
#promo-code-input:focus {
box-shadow: 0 0 0 3px rgba(212,175,55,0.1);
}
/* PDF Dropzone hover */
#pdf-dropzone:hover {
border-color: rgba(212,175,55,0.5) !important;
background: rgba(212,175,55,0.06) !important;
}
/* Admin section title shared style */
.admin-section-title {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: var(--text);
display: flex;
align-items: center;
gap: 8px;
}
/* Chapter access type button hover */
#ch-access-free:hover, #ch-access-vip:hover, #ch-access-coin:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Pending row pulse for new items */
@keyframes rowPulse {
0% { background: rgba(234,179,8,0.08); }
50% { background: rgba(234,179,8,0.03); }
100% { background: transparent; }
}
.chapter-pending-new {
animation: rowPulse 2s ease-out forwards;
}
/* Promo result slide in */
@keyframes promoSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
#promo-result[style*="block"], #promo-result:not([style*="none"]) {
animation: promoSlideIn 0.25s ease-out;
}
/* Manhwa type pills */
.nm-type-pill-active {
border-color: var(--crimson-light) !important;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light)) !important;
color: white !important;
}
/* ============================================================
AZURA ADMIN PANEL — CSS UPGRADE v3.0
Bu kodni azura.css ga qo'shing (oxiriga paste qiling)
============================================================ */
/* ── Upload Zone ── */
.upload-zone-inner {
transition: all 0.2s;
}
/* Muqova upload hover effekt */
[id$="-cover-zone"]:hover,
[id$="-banner-zone"]:hover,
[id$="-img-zone"]:hover {
border-color: rgba(212,175,55,0.55) !important;
background: rgba(212,175,55,0.07) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.06);
}
/* ── Orqaga tugmasi (Back Button) ── */
#azura-back-btn {
animation: backBtnFadeIn 0.25s ease-out both;
}
@keyframes backBtnFadeIn {
from { opacity: 0; transform: translateX(-8px); }
to { opacity: 1; transform: translateX(0); }
}
/* Mobil uchun orqaga tugmasi */
@media (max-width: 767px) {
#azura-back-btn {
top: 64px !important;
left: 12px !important;
padding: 7px 12px !important;
}
}
/* ── Admin Banner Card hover ── */
.banner-admin-card {
transition: border-color 0.2s, transform 0.2s;
}
.banner-admin-card:hover {
transform: translateY(-2px);
border-color: rgba(212,175,55,0.35) !important;
}
/* ── Admin stat cards ── */
.admin-stat-card {
transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.admin-stat-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}
/* ── Admin nav active glow ── */
.admin-nav-item.active {
position: relative;
}
.admin-nav-item.active::before {
content: '';
position: absolute;
left: 0; top: 20%; bottom: 20%;
width: 2px;
background: linear-gradient(180deg, var(--gold-light), var(--crimson-light));
border-radius: 2px;
box-shadow: 0 0 8px var(--gold-dim);
}
/* ── Chapter pending row pulse (yaqinda qo'shilgan) ── */
@keyframes chPulse {
0% { background: rgba(234,179,8,0.10); }
50% { background: rgba(234,179,8,0.04); }
100% { background: transparent; }
}
.chapter-pending-new {
animation: chPulse 2.5s ease-out forwards;
}
/* ── Modal scroll styling ── */
#azura-edit-modal > div::-webkit-scrollbar { width: 4px; }
#azura-edit-modal > div::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 2px; }
#azura-edit-modal > div::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 2px; }
/* ── Genre progress bar animate ── */
@keyframes barGrow {
from { width: 0 !important; }
}
.genre-bar {
animation: barGrow 0.8s cubic-bezier(0.4,0,0.2,1) both;
}
/* ── Form input extra style ── */
.form-input:focus {
border-color: var(--gold-dim) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
}
select:focus {
border-color: var(--gold-dim) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
outline: none;
}
textarea:focus {
border-color: var(--gold-dim) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.08);
outline: none;
}
/* ── Banner active toggle button ── */
#bn-active-toggle {
transition: background 0.25s;
}
/* ── Admin tezkor harakatlar ── */
.admin-quick-action {
transition: background 0.2s, border-color 0.2s;
}
.admin-quick-action:hover {
background: rgba(212,175,55,0.08) !important;
border-color: var(--border) !important;
}
/* ── PDF dropzone drag active ── */
#pdf-dropzone.drag-active {
border-color: var(--gold) !important;
background: rgba(212,175,55,0.08) !important;
box-shadow: 0 0 0 3px rgba(212,175,55,0.1);
}
/* ── Table row hover ── */
.admin-table tbody tr {
transition: background 0.15s;
}
.admin-table tbody tr:hover {
background: rgba(212,175,55,0.04);
}
/* ── Manhwa type pill active (add form) ── */
.nm-type-pill-active {
border-color: var(--crimson-light) !important;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light)) !important;
color: white !important;
}
/* ── Upload preview frame ── */
#nm-cover-preview,
#nm-banner-preview,
#edit-cover-preview {
border: 2px solid var(--border-bright);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
animation: previewFadeIn 0.3s ease-out;
}
@keyframes previewFadeIn {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}
/* ── Mobile responsiveness for admin content ── */
@media (max-width: 767px) {
.admin-layout {
flex-direction: column;
}
.admin-sidebar-inner {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 8px;
border-right: none;
border-bottom: 1px solid var(--border);
overflow-x: auto;
white-space: nowrap;
}
.admin-nav-item {
padding: 6px 10px;
font-size: 11px;
border-radius: 6px;
border-left: none !important;
flex-shrink: 0;
}
.admin-nav-item.active {
background: rgba(212,175,55,0.12);
color: var(--gold-light);
}
.admin-nav-item.active::before {
display: none;
}
}
/* ── Revenue shimmer on hover ── */
.revenue-stat:hover {
box-shadow: 0 6px 24px rgba(139,0,0,0.2);
transform: translateY(-2px);
transition: all 0.2s;
}
/* ── Promo result slide animation ── */
@keyframes promoSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
AZURA v4 — YANGI STILLAR
1. Back tugmasi (faqat bitta, premium ko'rinish)
2. Detail Admin Panel
3. Chapter item yangilangan ko'rinish
============================================================ */
/* Back button - fixed, yaratiladi JS orqali */
#azura-single-back-btn {
font-family: 'Cinzel', serif !important;
}
/* Detail Admin Panel */
#detail-admin-panel {
animation: slideUpFade 0.3s cubic-bezier(.4,0,.2,1);
}
@keyframes slideUpFade {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
/* Chapter item - ochiq holat */
.chapter-item .chapter-free {
font-size: 10px;
font-weight: 700;
padding: 4px 9px;
border-radius: 5px;
background: rgba(34,197,94,0.15);
color: #22c55e;
border: 1px solid rgba(34,197,94,0.3);
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
}
/* Detail add/edit modal overlay animatsiyasi */
#detail-add-chapter-modal,
#detail-edit-ch-modal {
animation: modalIn 0.25s cubic-bezier(.4,0,.2,1);
}
@keyframes modalIn {
from { opacity: 0; }
to { opacity: 1; }
}
#detail-add-chapter-modal > div,
#detail-edit-ch-modal > div {
animation: modalSlide 0.28s cubic-bezier(.4,0,.2,1);
}
@keyframes modalSlide {
from { opacity: 0; transform: translateY(20px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Chapter "Ochiq" badge */
.chapter-open-badge {
display: flex;
align-items: center;
gap: 4px;
font-size: 10px;
padding: 4px 8px;
border-radius: 5px;
background: rgba(34,197,94,0.12);
color: #22c55e;
border: 1px solid rgba(34,197,94,0.25);
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
/* Detail admin chapters list scrollbar */
#detail-admin-chapters-list::-webkit-scrollbar {
width: 4px;
}
#detail-admin-chapters-list::-webkit-scrollbar-track {
background: rgba(255,255,255,0.03);
border-radius: 2px;
}
#detail-admin-chapters-list::-webkit-scrollbar-thumb {
background: rgba(212,175,55,0.25);
border-radius: 2px;
}
#detail-admin-chapters-list::-webkit-scrollbar-thumb:hover {
background: rgba(212,175,55,0.45);
}
/* Mobile uchun back tugma - topbar ichida chiqmasin */
@media (max-width: 767px) {
#azura-single-back-btn {
top: 14px !important;
left: 12px !important;
}
}
/* ============================================================
PREMIUM TOP 10 RANK BADGE UPGRADES
============================================================ */
/* Rank 1 — Gold crown glow */
.manga-rank[data-r="1"]::after {
content: '';
position: absolute;
inset: 0;
border-radius: 0 0 10px 0;
background: radial-gradient(ellipse at 50% 0%, rgba(255,215,0,0.35), transparent 70%);
pointer-events: none;
}
/* Rank 2 — Silver shimmer */
.manga-rank[data-r="2"]::after {
content: '';
position: absolute;
inset: 0;
border-radius: 0 0 10px 0;
background: radial-gradient(ellipse at 50% 0%, rgba(200,200,220,0.2), transparent 70%);
pointer-events: none;
}
/* Rank 3 — Bronze gleam */
.manga-rank[data-r="3"]::after {
content: '';
position: absolute;
inset: 0;
border-radius: 0 0 10px 0;
background: radial-gradient(ellipse at 50% 0%, rgba(205,127,50,0.25), transparent 70%);
pointer-events: none;
}
/* Top 10 section title — crown + gold glow */
.top10-crown-icon svg {
filter: drop-shadow(0 0 8px rgba(212,175,55,0.8));
}
/* Scroll row — disable scroll-behavior smooth for drag (momentum handled by JS) */
.scroll-row {
scroll-behavior: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
/* Genre card hover glow ring */
.genre-card:hover {
transform: translateY(-5px) scale(1.04);
box-shadow:
0 12px 40px rgba(0,0,0,0.7),
0 0 0 1px var(--border-bright),
0 0 24px rgba(139,0,0,0.25);
}
/* Genre label glow on hover */
.genre-card:hover .genre-card-label {
color: var(--gold-light);
}
/* Scroll row edge fade masks — don't show on section padding edge */
@media(min-width:768px) {
.scroll-row-wrap::before { background: linear-gradient(to right, var(--void) 0%, transparent 100%); }
.scroll-row-wrap::after { background: linear-gradient(to left, var(--void) 0%, transparent 100%); }
}
@media(max-width:767px) {
.scroll-row-wrap::before,
.scroll-row-wrap::after { width: 16px; }
}
/* ============================================================
PREMIUM READER PAGE — azura.css additions
============================================================ */
/* ── Page base ─────────────────────────────────────────────── */
.reader-page {
background: #000;
flex-direction: column;
position: relative;
min-height: 100vh;
overflow: hidden;
}
/* ── Header ────────────────────────────────────────────────── */
.rdr-header {
position: fixed;
top: 0; left: 0; right: 0;
height: 54px;
background: rgba(3,2,8,0.96);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(212,175,55,0.12);
display: flex;
align-items: center;
gap: 10px;
padding: 0 14px;
z-index: 200;
transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.3s;
}
.rdr-header.hidden {
transform: translateY(-100%);
opacity: 0;
}
.rdr-back-btn {
width: 38px; height: 38px;
border-radius: 50%;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.2);
color: rgba(212,175,55,0.8);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.rdr-back-btn:hover {
background: rgba(139,0,0,0.6);
border-color: rgba(212,175,55,0.4);
color: var(--gold-light);
}
.rdr-back-btn svg { width:18px; height:18px; fill:currentColor; }
.rdr-title-group {
flex: 1;
min-width: 0;
}
.rdr-manhwa-name {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
color: var(--text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5px;
}
.rdr-chapter-name {
font-size: 10px;
color: var(--text-muted);
margin-top: 1px;
}
.rdr-chat-toggle-btn {
position: relative;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(139,0,0,0.25);
border: 1px solid rgba(196,30,58,0.4);
color: rgba(212,175,55,0.8);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.25s;
}
.rdr-chat-toggle-btn:hover, .rdr-chat-toggle-btn.active {
background: rgba(139,0,0,0.7);
border-color: rgba(212,175,55,0.5);
color: var(--gold-light);
box-shadow: 0 0 16px rgba(139,0,0,0.5);
}
.rdr-chat-toggle-btn svg { width:18px; height:18px; fill:currentColor; }
.rdr-chat-badge {
position: absolute;
top: -2px; right: -2px;
min-width: 16px; height: 16px;
background: var(--crimson-bright);
color: #fff;
font-size: 9px; font-weight: 800;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
padding: 0 3px;
border: 1px solid #000;
font-family: 'Inter', sans-serif;
}
/* ── Progress bar ───────────────────────────────────────────── */
.rdr-progress-wrap {
position: fixed;
top: 54px; left: 0; right: 0;
height: 2px;
background: rgba(255,255,255,0.05);
z-index: 199;
}
.rdr-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--crimson), var(--gold));
transition: width 0.1s linear;
box-shadow: 0 0 8px rgba(212,175,55,0.5);
}
/* ── Body / scroll area ─────────────────────────────────────── */
.rdr-body {
margin-top: 56px;
overflow-y: auto;
overflow-x: hidden;
height: calc(100vh - 56px);
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
}
/* ── Panels container ────────────────────────────────────────── */
.rdr-panels {
max-width: 720px;
margin: 0 auto;
padding: 0 0 24px;
}
/* Individual comic panel */
.rdr-panel {
display: block;
width: 100%;
user-select: none;
-webkit-user-drag: none;
}
.rdr-panel img {
width: 100%;
display: block;
line-height: 0;
}
/* Placeholder panel (when no real images) */
.rdr-panel-placeholder {
width: 100%;
aspect-ratio: 3/4;
background: linear-gradient(180deg, var(--dark2) 0%, var(--dark3) 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
border-bottom: 1px solid rgba(212,175,55,0.06);
position: relative;
overflow: hidden;
}
.rdr-panel-placeholder::before {
content: '';
position: absolute;
inset: 0;
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 20px,
rgba(212,175,55,0.015) 20px,
rgba(212,175,55,0.015) 21px
);
}
.rdr-panel-placeholder-num {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(48px, 12vw, 96px);
font-weight: 900;
color: rgba(212,175,55,0.06);
position: absolute;
user-select: none;
pointer-events: none;
}
.rdr-panel-placeholder-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
z-index: 1;
}
.rdr-panel-placeholder-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(139,0,0,0.2);
border: 1px solid rgba(139,0,0,0.4);
display: flex; align-items: center; justify-content: center;
}
.rdr-panel-placeholder-icon svg { width:28px; height:28px; fill:rgba(212,175,55,0.4); }
.rdr-panel-placeholder-label {
font-family: 'Cinzel', serif;
font-size: 11px;
color: rgba(212,175,55,0.3);
letter-spacing: 2px;
text-transform: uppercase;
}
/* ── Chapter navigation footer ──────────────────────────────── */
.rdr-chapter-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 28px 20px 48px;
max-width: 720px;
margin: 0 auto;
}
.rdr-nav-btn {
display: flex;
align-items: center;
gap: 7px;
padding: 12px 20px;
border-radius: 10px;
background: rgba(212,175,55,0.07);
border: 1px solid rgba(212,175,55,0.2);
color: rgba(212,175,55,0.7);
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.25s;
flex-shrink: 0;
}
.rdr-nav-btn:hover {
background: rgba(139,0,0,0.5);
border-color: rgba(212,175,55,0.4);
color: var(--gold-light);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(139,0,0,0.35);
}
.rdr-nav-btn:disabled {
opacity: 0.25;
pointer-events: none;
}
.rdr-nav-btn svg { width:16px; height:16px; fill:currentColor; }
.rdr-chapter-pill {
font-family: 'Cinzel', serif;
font-size: 11px;
color: var(--text-muted);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 20px;
padding: 6px 14px;
white-space: nowrap;
}
/* ── Floating Chat Panel ─────────────────────────────────────── */
.rdr-chat-panel {
position: fixed;
bottom: 0;
right: 0;
width: 320px;
height: 460px;
background: rgba(6,4,14,0.97);
border: 1px solid rgba(212,175,55,0.18);
border-bottom: none;
border-right: none;
border-radius: 14px 0 0 0;
display: flex;
flex-direction: column;
z-index: 300;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: -4px -4px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(139,0,0,0.15) inset;
transform: translateY(100%) translateX(0);
opacity: 0;
transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.3s;
overflow: hidden;
}
.rdr-chat-panel.open {
transform: translateY(0);
opacity: 1;
}
@media(max-width:767px) {
.rdr-chat-panel {
width: 100%;
height: 55vh;
border-radius: 14px 14px 0 0;
border-left: 1px solid rgba(212,175,55,0.18);
border-right: 1px solid rgba(212,175,55,0.18);
right: 0; left: 0;
bottom: 0;
}
}
/* Chat top accent line */
.rdr-chat-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--crimson), var(--gold), var(--crimson));
}
.rdr-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px 10px;
border-bottom: 1px solid rgba(212,175,55,0.1);
flex-shrink: 0;
margin-top: 2px;
}
.rdr-chat-header-left {
display: flex;
align-items: center;
gap: 7px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
color: var(--gold-light);
letter-spacing: 0.5px;
}
.rdr-online-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px #22c55e;
animation: rdr-pulse 2s infinite;
}
@keyframes rdr-pulse {
0%,100% { opacity:1; }
50% { opacity:0.4; }
}
.rdr-online-count {
font-size: 10px;
color: var(--text-muted);
font-family: 'Inter', sans-serif;
font-weight: 400;
}
.rdr-chat-close {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
}
.rdr-chat-close:hover {
background: rgba(139,0,0,0.5);
color: #fff;
}
.rdr-chat-close svg { width:14px; height:14px; fill:currentColor; }
/* Messages list */
.rdr-chat-messages {
flex: 1;
overflow-y: auto;
padding: 10px 12px;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
}
.rdr-chat-messages::-webkit-scrollbar { width: 3px; }
.rdr-chat-messages::-webkit-scrollbar-track { background: transparent; }
.rdr-chat-messages::-webkit-scrollbar-thumb { background: var(--crimson); border-radius: 2px; }
/* Individual message */
.rdr-msg {
display: flex;
flex-direction: column;
gap: 3px;
animation: rdr-msg-in 0.25s cubic-bezier(.4,0,.2,1);
}
@keyframes rdr-msg-in {
from { opacity:0; transform: translateY(8px); }
to { opacity:1; transform: translateY(0); }
}
.rdr-msg-header {
display: flex;
align-items: center;
gap: 7px;
}
.rdr-msg-avatar {
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 10px;
font-weight: 700;
color: #fff;
flex-shrink: 0;
font-family: 'Cinzel', serif;
}
.rdr-msg-username {
font-size: 10px;
font-weight: 700;
color: var(--gold-dim);
font-family: 'Cinzel', serif;
}
.rdr-msg-username.is-own {
color: var(--crimson-light);
}
.rdr-msg-time {
font-size: 9px;
color: var(--text-muted);
margin-left: auto;
}
.rdr-msg-bubble {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 4px 10px 10px 10px;
padding: 7px 10px;
font-size: 12px;
color: var(--text);
line-height: 1.5;
word-break: break-word;
margin-left: 29px;
}
.rdr-msg.own .rdr-msg-bubble {
background: rgba(139,0,0,0.3);
border-color: rgba(196,30,58,0.25);
border-radius: 10px 4px 10px 10px;
color: rgba(232,224,208,0.95);
}
.rdr-msg.system .rdr-msg-bubble {
background: rgba(212,175,55,0.06);
border-color: rgba(212,175,55,0.12);
border-radius: 6px;
text-align: center;
color: var(--gold-dim);
font-size: 10px;
font-style: italic;
margin-left: 0;
}
/* Input area */
.rdr-chat-input-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px 14px;
border-top: 1px solid rgba(212,175,55,0.1);
flex-shrink: 0;
}
.rdr-chat-input {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 20px;
padding: 9px 14px;
color: var(--text);
font-size: 12px;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.2s;
}
.rdr-chat-input:focus { border-color: rgba(212,175,55,0.4); }
.rdr-chat-input::placeholder { color: var(--text-muted); }
.rdr-chat-send {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light));
border: none;
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.2s;
}
.rdr-chat-send:hover {
transform: scale(1.1);
box-shadow: 0 4px 16px rgba(139,0,0,0.5);
}
.rdr-chat-send svg { width:16px; height:16px; fill:currentColor; }
/* ── Scroll-to-top FAB ───────────────────────────────────────── */
.rdr-scroll-top {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(80px);
opacity: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(3,2,8,0.9);
border: 1px solid rgba(212,175,55,0.3);
color: rgba(212,175,55,0.7);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 150;
transition: all 0.3s cubic-bezier(.4,0,.2,1);
backdrop-filter: blur(8px);
}
.rdr-scroll-top.visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
.rdr-scroll-top:hover { background: rgba(139,0,0,0.8); color: var(--gold-light); }
.rdr-scroll-top svg { width:18px; height:18px; fill:currentColor; }
/* ═══════════════════════════════════════════════════════════
AZURA v4.0 — PATCH OVERRIDES
═══════════════════════════════════════════════════════════ */
/* Reader page — full viewport, no padding */
#page-reader.page,
#page-reader.page.active {
padding-left: 0 !important;
padding-bottom: 0 !important;
height: 100vh;
overflow: hidden;
background: #050208;
flex-direction: column;
display: none;
}
#page-reader.page.active {
display: flex;
}
/* Desktop: reader takes full width even with sidebar */
@media (min-width: 768px) {
#page-reader.page,
#page-reader.page.active {
padding-left: 0 !important;
margin-left: 0 !important;
left: 0 !important;
width: 100vw !important;
position: fixed !important;
inset: 0 !important;
z-index: 50;
}
}
/* Detail back button — premium overrides */
#azura-single-back-btn {
font-family: 'Cinzel', serif !important;
z-index: 9999 !important;
}
/* Chapter item — WebP badge */
.chapter-meta .webp-badge {
color: #22c55e;
font-size: 9px;
font-weight: 700;
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.25);
border-radius: 3px;
padding: 1px 4px;
margin-left: 4px;
}
/* Chapter list empty state */
#chapter-list .ch-empty {
padding: 36px 20px;
text-align: center;
}
/* Fix: topbar on detail page — prevent double back buttons */
#page-detail .mobile-topbar .topbar-btn:first-child,
#page-detail .desktop-topbar .topbar-btn:first-child {
/* ensure no legacy arrow buttons show */
}
/* rdr-body — when chat active on desktop, shrink reading area */
@media (min-width: 641px) {
body.rdr-chat-active #rdr-body {
right: 320px;
transition: right 0.35s cubic-bezier(.4,0,.2,1);
}
body.rdr-chat-active .rdr-progress-wrap {
right: 320px;
transition: right 0.35s cubic-bezier(.4,0,.2,1);
}
}
/* Crimson glow ambient on reader */
#page-reader::before {
content: '';
position: fixed;
top: 0; left: 0; right: 0;
height: 200px;
background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139,0,0,0.18) 0%, transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Panel image lazy load fade-in */
.rdr-panel img {
opacity: 0;
transition: opacity 0.4s ease;
}
.rdr-panel img.loaded,
.rdr-panel img[src]:not([src=""]) {
opacity: 1;
}
/* Subtle scanline overlay on panels */
.rdr-panels::after {
content: '';
position: fixed;
inset: 0;
background: repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0,0,0,0.015) 2px,
rgba(0,0,0,0.015) 4px
);
pointer-events: none;
z-index: 1;
opacity: 0.5;
}
/* ═══════════════════════════════════════════════════════════════
AZURA PREMIUM v5.0 — Dark Fantasy UI Overhaul
Admin Panel · VIP · Profile · 18+ · Global Polish
═══════════════════════════════════════════════════════════════ */
/* ── Extra CSS Variables ────────────────────────────────────── */
:root {
--ruby:#C41E3A; --ruby-glow:rgba(196,30,58,0.35);
--obsidian:#08080F; --void2:#060610;
--gold-bright:#FFD700; --gold-pale:#F0D878;
--adult-rose:#C0476A; --adult-rose-glow:rgba(192,71,106,0.3);
--adult-deep:#1A0510;
--glass:rgba(255,255,255,0.03);
--glass-border:rgba(255,255,255,0.07);
--panel-bg:linear-gradient(145deg,rgba(12,8,20,0.98),rgba(18,10,28,0.98));
}
/* ════════════════════════════════════════════
GLOBAL POLISH — Scrollbars, Selections
════════════════════════════════════════════ */
::selection { background:rgba(196,30,58,0.35); color:#fff; }
::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--crimson),var(--gold-dim)); border-radius:4px; }
/* ════════════════════════════════════════════
DETAIL PAGE — ADMIN CONTROL PANEL (PREMIUM)
════════════════════════════════════════════ */
#detail-admin-panel {
margin: 0 16px 24px !important;
border-radius: 18px !important;
overflow: hidden !important;
border: 1px solid rgba(212,175,55,0.22) !important;
background: var(--panel-bg) !important;
box-shadow: 0 16px 60px rgba(139,0,0,0.25), 0 0 0 1px rgba(212,175,55,0.06), inset 0 1px 0 rgba(255,255,255,0.04) !important;
position: relative;
animation: panelReveal 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes panelReveal {
from { opacity:0; transform:translateY(12px); }
to { opacity:1; transform:translateY(0); }
}
@media(min-width:768px) {
#detail-admin-panel { margin: 0 32px 32px !important; }
}
/* Shimmer line on top of panel */
#detail-admin-panel::before {
content:'';
position:absolute; top:0; left:0; right:0; height:2px;
background: linear-gradient(90deg, transparent, var(--crimson-light), var(--gold), var(--crimson-light), transparent);
background-size: 200% 100%;
animation: shimmerBar 3s linear infinite;
z-index:2;
}
@keyframes shimmerBar {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* Panel header */
.dap-header {
background: linear-gradient(90deg, rgba(139,0,0,0.35) 0%, rgba(212,175,55,0.08) 60%, transparent 100%);
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(212,175,55,0.15);
}
.dap-title-group { display:flex; align-items:center; gap:10px; }
.dap-icon {
width:32px; height:32px; border-radius:9px;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light));
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 12px rgba(196,30,58,0.4);
}
.dap-title { font-family:'Cinzel',serif; font-size:13px; font-weight:700; color:var(--gold-light); }
.dap-subtitle { font-size:10px; color:var(--text-muted); margin-top:1px; }
.dap-role-pill {
font-size:9px; padding:3px 10px; border-radius:20px;
font-weight:800; font-family:'Cinzel',serif; letter-spacing:1px;
}
.dap-role-pill.owner {
background:rgba(212,175,55,0.18); color:var(--gold-light);
border:1px solid rgba(212,175,55,0.4);
box-shadow: 0 0 12px rgba(212,175,55,0.15);
}
.dap-role-pill.admin {
background:rgba(233,30,140,0.15); color:#e91e8c;
border:1px solid rgba(233,30,140,0.35);
}
/* Stats row */
.dap-stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dap-stat {
text-align:center; padding:10px 8px;
background:rgba(255,255,255,0.025); border-radius:10px;
border:1px solid rgba(255,255,255,0.06);
transition: border-color 0.2s, background 0.2s;
}
.dap-stat:hover { border-color:rgba(212,175,55,0.25); background:rgba(212,175,55,0.05); }
.dap-stat-val { font-size:18px; font-weight:700; font-family:'Cinzel',serif; }
.dap-stat-lbl { font-size:9px; color:var(--text-muted); margin-top:3px; text-transform:uppercase; letter-spacing:1px; }
/* Action grid */
.dap-actions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
padding: 14px 16px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
@media(min-width:500px) { .dap-actions { grid-template-columns: repeat(4, 1fr); } }
.dap-action-btn {
display:flex; flex-direction:column; align-items:center; gap:6px;
padding:12px 8px; border-radius:12px;
cursor:pointer; transition:all 0.2s;
border:1px solid rgba(255,255,255,0.08);
background:rgba(255,255,255,0.03);
font-size:10px; font-family:'Cinzel',serif; font-weight:700;
color:var(--text-dim); text-align:center; line-height:1.2;
}
.dap-action-btn:hover { transform:translateY(-2px); }
.dap-action-btn.red { border-color:rgba(196,30,58,0.4); }
.dap-action-btn.red:hover { background:rgba(139,0,0,0.25); color:var(--crimson-light); box-shadow:0 6px 20px rgba(139,0,0,0.3); }
.dap-action-btn.gold { border-color:rgba(212,175,55,0.35); }
.dap-action-btn.gold:hover { background:rgba(212,175,55,0.12); color:var(--gold-light); box-shadow:0 6px 20px rgba(212,175,55,0.2); }
.dap-action-btn.blue { border-color:rgba(86,204,242,0.3); }
.dap-action-btn.blue:hover { background:rgba(86,204,242,0.1); color:#56CCF2; }
.dap-action-btn.green { border-color:rgba(34,197,94,0.3); }
.dap-action-btn.green:hover { background:rgba(34,197,94,0.1); color:#22c55e; }
.dap-action-icon {
width:36px; height:36px; border-radius:10px;
display:flex; align-items:center; justify-content:center;
flex-shrink:0; margin-bottom:2px;
}
.dap-action-btn.red .dap-action-icon { background:linear-gradient(135deg,rgba(139,0,0,0.5),rgba(196,30,58,0.3)); }
.dap-action-btn.gold .dap-action-icon { background:linear-gradient(135deg,rgba(212,175,55,0.2),rgba(245,200,66,0.1)); }
.dap-action-btn.blue .dap-action-icon { background:rgba(86,204,242,0.1); }
.dap-action-btn.green .dap-action-icon { background:rgba(34,197,94,0.1); }
/* Chapter management table in detail admin */
.dap-chapters { padding: 0 16px 16px; }
.dap-ch-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:10px;
}
.dap-ch-title { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:2px; font-family:'Cinzel',serif; }
.dap-ch-count { font-size:9px; background:rgba(212,175,55,0.1); color:var(--gold-dim); padding:2px 8px; border-radius:8px; border:1px solid rgba(212,175,55,0.2); }
.dap-chapter-row {
display:flex; align-items:center; gap:8px;
padding:9px 12px; border-radius:10px;
background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05);
margin-bottom:5px; transition:all 0.2s;
}
.dap-chapter-row:hover { border-color:rgba(212,175,55,0.2); background:rgba(212,175,55,0.03); }
.dap-ch-num { font-size:9px; color:var(--gold-dim); min-width:26px; font-family:'Cinzel',serif; font-weight:700; }
.dap-ch-title-text { flex:1; font-size:11px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dap-ch-access { font-size:9px; min-width:36px; text-align:center; padding:2px 6px; border-radius:6px; font-weight:700; }
.dap-ch-access.free { background:rgba(34,197,94,0.1); color:#22c55e; border:1px solid rgba(34,197,94,0.2); }
.dap-ch-access.vip { background:rgba(212,175,55,0.12); color:var(--gold); border:1px solid rgba(212,175,55,0.25); }
.dap-ch-access.coin { background:rgba(234,179,8,0.1); color:#eab308; border:1px solid rgba(234,179,8,0.2); }
.dap-ch-actions { display:flex; gap:4px; flex-shrink:0; }
.dap-ch-btn {
width:26px; height:26px; border-radius:7px; border:none;
cursor:pointer; display:flex; align-items:center; justify-content:center;
transition:all 0.15s; font-size:11px;
}
.dap-ch-btn.edit { background:rgba(212,175,55,0.1); color:var(--gold-light); border:1px solid rgba(212,175,55,0.25); }
.dap-ch-btn.edit:hover { background:rgba(212,175,55,0.25); }
.dap-ch-btn.del { background:rgba(139,0,0,0.15); color:#ff8080; border:1px solid rgba(139,0,0,0.3); }
.dap-ch-btn.del:hover { background:rgba(139,0,0,0.35); }
.dap-ch-btn.vis { background:rgba(86,204,242,0.08); color:#56CCF2; border:1px solid rgba(86,204,242,0.2); }
.dap-ch-btn.vis:hover { background:rgba(86,204,242,0.18); }
/* ════════════════════════════════════════════
VIP PAGE — LUXURY REDESIGN
════════════════════════════════════════════ */
/* VIP Hero Banner */
.vip-hero {
position:relative; overflow:hidden;
padding: 40px 20px 36px;
margin: 16px 16px 0;
border-radius: 20px;
background: linear-gradient(145deg, #100800, #1e1000, #100800);
border: 1px solid rgba(212,175,55,0.3);
box-shadow: 0 20px 60px rgba(139,0,0,0.3), 0 0 80px rgba(212,175,55,0.05), inset 0 1px 0 rgba(255,215,0,0.08);
}
@media(min-width:768px) { .vip-hero { margin:24px 32px 0; padding:48px 40px 44px; } }
.vip-hero::before {
content:'';
position:absolute; top:0; left:0; right:0; bottom:0;
background: radial-gradient(ellipse 80% 60% at 50% -20%, rgba(212,175,55,0.12) 0%, transparent 65%),
radial-gradient(ellipse 40% 50% at 90% 100%, rgba(139,0,0,0.15) 0%, transparent 60%);
pointer-events:none;
}
/* Animated particles */
.vip-hero::after {
content:'';
position:absolute; inset:0;
background-image:
radial-gradient(1.5px 1.5px at 15% 25%, rgba(212,175,55,0.4), transparent),
radial-gradient(1px 1px at 60% 70%, rgba(212,175,55,0.25), transparent),
radial-gradient(1.5px 1.5px at 85% 15%, rgba(255,215,0,0.3), transparent),
radial-gradient(1px 1px at 40% 90%, rgba(212,175,55,0.2), transparent);
animation: vipParticle 8s ease-in-out infinite alternate;
pointer-events:none;
}
@keyframes vipParticle {
0% { opacity:0.5; transform:translateY(0); }
100% { opacity:1; transform:translateY(-6px); }
}
.vip-eyebrow {
font-size:10px; letter-spacing:5px; text-transform:uppercase;
color:var(--gold-dim); margin-bottom:12px; font-family:'Cinzel',serif;
display:flex; align-items:center; gap:8px;
}
.vip-eyebrow::before, .vip-eyebrow::after {
content:''; flex:1; height:1px;
background:linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent);
max-width:60px;
}
.vip-crown-icon {
display:block; text-align:center; margin-bottom:12px;
filter: drop-shadow(0 0 20px rgba(212,175,55,0.6));
animation: crownPulse 3s ease-in-out infinite;
}
@keyframes crownPulse {
0%,100% { filter:drop-shadow(0 0 16px rgba(212,175,55,0.5)); transform:translateY(0); }
50% { filter:drop-shadow(0 0 28px rgba(212,175,55,0.8)); transform:translateY(-3px); }
}
.vip-main-title {
font-family:'Cinzel Decorative',cursive; font-size:clamp(28px,6vw,48px);
font-weight:900; text-align:center; margin-bottom:6px;
background:linear-gradient(135deg, var(--gold-pale), var(--gold-light), var(--gold), #C8A200);
-webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
letter-spacing:4px;
text-shadow: none;
filter: drop-shadow(0 0 30px rgba(212,175,55,0.4));
}
.vip-tagline {
text-align:center; font-size:11px; color:var(--gold-dim);
letter-spacing:3px; text-transform:uppercase; margin-bottom:28px;
}
/* VIP Perks grid */
.vip-perks-grid {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
margin-bottom:28px;
}
@media(min-width:600px) { .vip-perks-grid { grid-template-columns:repeat(3,1fr); } }
.vip-perk-item {
display:flex; align-items:center; gap:10px;
padding:12px 14px; border-radius:12px;
background:rgba(212,175,55,0.05); border:1px solid rgba(212,175,55,0.12);
transition:all 0.25s;
}
.vip-perk-item:hover { border-color:rgba(212,175,55,0.3); background:rgba(212,175,55,0.1); transform:translateY(-1px); }
.vip-perk-icon { font-size:20px; flex-shrink:0; }
.vip-perk-label { font-size:11px; color:var(--text-dim); font-weight:500; line-height:1.3; }
/* Price block */
.vip-price-block {
display:flex; flex-direction:column; align-items:center; gap:6px;
margin-bottom:24px;
}
.vip-price-amount {
font-size:42px; font-weight:900; font-family:'Cinzel',serif;
color:var(--gold-light); line-height:1;
text-shadow: 0 0 40px rgba(212,175,55,0.5);
}
.vip-price-period { font-size:12px; color:var(--text-muted); letter-spacing:2px; }
.vip-price-badge {
background:var(--crimson); color:white; font-size:9px; font-weight:700;
padding:3px 10px; border-radius:20px; letter-spacing:1px;
font-family:'Cinzel',serif;
}
/* VIP CTA button */
.vip-cta-btn {
width:100%; padding:16px; border-radius:14px; border:none;
font-size:15px; font-weight:800; font-family:'Cinzel',serif; cursor:pointer;
letter-spacing:2px; text-transform:uppercase; transition:all 0.3s;
background:linear-gradient(135deg, #8B0000 0%, var(--crimson-light) 40%, #C41E3A 60%, #8B0000 100%);
color:white;
box-shadow: 0 8px 32px rgba(139,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.2);
position:relative; overflow:hidden;
}
.vip-cta-btn::before {
content:'';
position:absolute; top:0; left:-100%; width:100%; height:100%;
background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
transition:left 0.5s;
}
.vip-cta-btn:hover { transform:translateY(-2px); box-shadow:0 12px 40px rgba(139,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.35); }
.vip-cta-btn:hover::before { left:100%; }
/* VIP Titles carousel — drag-scroll */
.vip-carousel-section {
padding: 24px 16px;
}
@media(min-width:768px) { .vip-carousel-section { padding:28px 32px; } }
.vip-carousel-label {
font-family:'Cinzel',serif; font-size:13px; font-weight:600;
color:var(--text); letter-spacing:2px; text-transform:uppercase;
display:flex; align-items:center; gap:10px;
margin-bottom:16px;
}
.vip-carousel-label::after {
content:''; flex:1; height:1px;
background:linear-gradient(90deg, rgba(212,175,55,0.3), transparent);
}
.vip-drag-row {
display:flex; gap:14px;
overflow-x:auto; padding-bottom:10px;
scroll-behavior:smooth;
scrollbar-width:none; -webkit-overflow-scrolling:touch;
cursor:grab;
user-select:none;
}
.vip-drag-row:active { cursor:grabbing; }
.vip-drag-row::-webkit-scrollbar { display:none; }
/* Larger VIP cards */
.vip-card {
flex-shrink:0; width:140px; cursor:pointer; position:relative;
transition:transform 0.25s;
}
@media(min-width:768px) { .vip-card { width:165px; } }
.vip-card:hover { transform:translateY(-4px) scale(1.02); }
.vip-card-thumb {
width:100%; aspect-ratio:3/4; border-radius:10px; overflow:hidden;
background:var(--dark3); position:relative;
border:1px solid rgba(212,175,55,0.2);
box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 0 1px rgba(212,175,55,0.08);
}
.vip-card-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vip-card-crown {
position:absolute; top:6px; right:6px;
background:linear-gradient(135deg, rgba(212,175,55,0.9), rgba(139,0,0,0.8));
border-radius:6px; padding:3px 6px;
font-size:8px; font-weight:800; color:white; font-family:'Cinzel',serif;
letter-spacing:0.5px;
}
.vip-card-overlay {
position:absolute; bottom:0; left:0; right:0; padding:10px 8px 8px;
background:linear-gradient(to top, rgba(5,5,8,0.95) 0%, transparent 100%);
}
.vip-card-title {
font-size:11px; font-weight:600; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vip-card-rating {
font-size:9px; color:var(--gold-dim);
display:flex; align-items:center; gap:3px; margin-top:3px;
}
/* ════════════════════════════════════════════
PROFILE PAGE — PREMIUM REDESIGN
════════════════════════════════════════════ */
.profile-hero-wrap {
position:relative; overflow:hidden;
background:linear-gradient(145deg, #0a050f, #120818, #0a050f);
padding-bottom:0;
}
.profile-hero-bg {
position:absolute; inset:0;
background:
radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,0,0,0.2) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 80% 80%, rgba(212,175,55,0.06) 0%, transparent 60%);
pointer-events:none;
}
.profile-hero-bg::after {
content:''; position:absolute; bottom:0; left:0; right:0; height:80px;
background:linear-gradient(to top, var(--void), transparent);
}
.profile-banner-ring {
position:relative; margin:32px auto 0;
width:96px; height:96px; display:flex; align-items:center; justify-content:center;
}
.profile-banner-ring::before {
content:''; position:absolute; inset:-4px;
border-radius:50%;
background:conic-gradient(var(--crimson), var(--gold), var(--crimson-light), var(--gold-light), var(--crimson));
animation:ringRotate 6s linear infinite;
}
.profile-banner-ring::after {
content:''; position:absolute; inset:-2px; border-radius:50%; background:var(--void);
}
@keyframes ringRotate { to { transform:rotate(360deg); } }
.profile-avatar-new {
position:relative; z-index:2;
width:88px; height:88px; border-radius:50%;
background:linear-gradient(135deg, var(--crimson), var(--gold-dim));
display:flex; align-items:center; justify-content:center;
font-size:32px; font-weight:700; color:white;
border:3px solid rgba(10,10,18,1);
}
.profile-name-new {
font-family:'Cinzel',serif; font-size:22px; font-weight:700; color:var(--text);
text-align:center; margin-top:14px; letter-spacing:1px;
}
.profile-uid-new {
font-size:11px; color:var(--text-muted); text-align:center;
letter-spacing:3px; margin-top:4px; font-family:'Cinzel',serif;
}
/* VIP / role badge on profile */
.profile-role-badge-wrap { display:flex; justify-content:center; margin-top:10px; gap:8px; }
.profile-vip-badge {
display:inline-flex; align-items:center; gap:5px;
background:linear-gradient(135deg, rgba(212,175,55,0.15), rgba(245,200,66,0.08));
border:1px solid rgba(212,175,55,0.35); border-radius:20px;
padding:5px 14px; font-size:10px; font-weight:800;
font-family:'Cinzel',serif; letter-spacing:1px; color:var(--gold-light);
}
/* Stats ribbon */
.profile-stats-ribbon {
display:flex; justify-content:center; gap:0;
margin:20px 16px 0; border-radius:14px; overflow:hidden;
border:1px solid rgba(255,255,255,0.06);
background:rgba(255,255,255,0.025);
}
.profile-stat-cell {
flex:1; padding:16px 8px; text-align:center;
position:relative;
}
.profile-stat-cell:not(:last-child)::after {
content:''; position:absolute; right:0; top:20%; bottom:20%;
width:1px; background:rgba(255,255,255,0.08);
}
.profile-stat-cell-val {
font-size:22px; font-weight:800; font-family:'Cinzel',serif;
color:var(--gold-light);
}
.profile-stat-cell-label { font-size:10px; color:var(--text-muted); margin-top:3px; letter-spacing:1px; }
/* Unique ID card */
.profile-uid-card {
margin:16px; border-radius:14px;
background:linear-gradient(135deg, rgba(20,14,30,0.9), rgba(28,18,40,0.9));
border:1px solid rgba(212,175,55,0.18);
padding:16px 18px; display:flex; align-items:center; gap:14px;
}
@media(min-width:768px) { .profile-uid-card { margin:16px 32px; } }
.profile-uid-card-icon {
width:40px; height:40px; border-radius:10px; flex-shrink:0;
background:linear-gradient(135deg, rgba(212,175,55,0.15), rgba(212,175,55,0.05));
border:1px solid rgba(212,175,55,0.2);
display:flex; align-items:center; justify-content:center;
}
.profile-uid-card-lbl { font-size:9px; color:var(--text-muted); letter-spacing:2px; text-transform:uppercase; }
.profile-uid-card-val { font-size:15px; font-weight:700; color:var(--gold-light); font-family:'Cinzel',serif; letter-spacing:2px; margin-top:3px; }
.profile-uid-copy {
margin-left:auto; width:34px; height:34px; border-radius:8px; flex-shrink:0;
background:rgba(212,175,55,0.08); border:1px solid rgba(212,175,55,0.2);
display:flex; align-items:center; justify-content:center; cursor:pointer;
transition:all 0.2s; color:var(--gold-dim);
}
.profile-uid-copy:hover { background:rgba(212,175,55,0.18); color:var(--gold-light); }
/* Profile menu — premium cards */
.profile-menu-section {
padding: 0 16px; margin-bottom: 8px;
}
@media(min-width:768px) { .profile-menu-section { padding:0 32px; } }
.profile-menu-section-title {
font-size:9px; color:var(--text-muted); letter-spacing:3px;
text-transform:uppercase; font-family:'Cinzel',serif;
padding:16px 0 8px;
}
.profile-menu-card {
display:flex; align-items:center; gap:14px;
padding:14px 16px; border-radius:12px; cursor:pointer;
background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.05);
color:var(--text-dim); font-size:13px; margin-bottom:6px;
transition:all 0.2s; position:relative; overflow:hidden;
}
.profile-menu-card:hover {
border-color:rgba(212,175,55,0.2); background:rgba(212,175,55,0.04);
color:var(--text); transform:translateX(2px);
}
.profile-menu-card.danger { color:var(--crimson-light); }
.profile-menu-card.danger:hover { border-color:rgba(196,30,58,0.3); background:rgba(139,0,0,0.08); }
.profile-menu-card.vip-item { border-color:rgba(212,175,55,0.15); }
.profile-menu-card.vip-item:hover { border-color:rgba(212,175,55,0.35); background:rgba(212,175,55,0.06); }
.profile-menu-card.admin-item { border-color:rgba(196,30,58,0.2); }
.profile-menu-card.admin-item:hover { background:rgba(139,0,0,0.08); }
.profile-menu-card-icon {
width:36px; height:36px; border-radius:10px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
transition:all 0.2s;
}
.profile-menu-card:hover .profile-menu-card-icon { transform:scale(1.1); }
.profile-menu-card-icon.library { background:rgba(86,204,242,0.1); color:#56CCF2; }
.profile-menu-card-icon.coin { background:rgba(212,175,55,0.1); color:var(--gold); }
.profile-menu-card-icon.vip { background:rgba(212,175,55,0.12); color:var(--gold-light); }
.profile-menu-card-icon.admin { background:rgba(196,30,58,0.12); color:var(--crimson-light); }
.profile-menu-card-icon.logout { background:rgba(139,0,0,0.1); color:var(--crimson-light); }
.profile-menu-card-arrow { margin-left:auto; color:var(--text-muted); font-size:18px; transition:transform 0.2s; }
.profile-menu-card:hover .profile-menu-card-arrow { transform:translateX(3px); }
.profile-menu-card-badge {
font-size:9px; padding:2px 8px; border-radius:8px;
font-weight:700; font-family:'Cinzel',serif;
background:linear-gradient(135deg, var(--crimson), var(--crimson-light));
color:white; margin-left:auto; margin-right:6px;
}
/* ════════════════════════════════════════════════════════════════
AX SYSTEM — 18+ PREMIUM DARK FANTASY — COMPLETELY SEPARATE
Deep Black · Strong Crimson Red · Metallic Gold · Luxury Void
════════════════════════════════════════════════════════════════ */
/* ── AX Root Variables ── */
#page-adult {
--ax-void: #030107;
--ax-obsidian: #07030E;
--ax-obsidian2: #0B0514;
--ax-obsidian3: #0F071A;
--ax-blood: #6B0010;
--ax-crimson: #9B0A1A;
--ax-crimson-b: #C41E3A;
--ax-crimson-glow:rgba(155,10,26,0.45);
--ax-gold: #C9963A;
--ax-gold-b: #D4AF37;
--ax-gold-bright: #F0C84A;
--ax-gold-glow: rgba(201,150,58,0.35);
--ax-gold-dim: #7A5C20;
--ax-text: #EDE0D0;
--ax-text-dim: #A08070;
--ax-text-muted: #5A3C40;
--ax-border: rgba(155,10,26,0.30);
--ax-border-gold: rgba(201,150,58,0.35);
--ax-separator: rgba(155,10,26,0.20);
}
/* ── GATE OUTER ── */
.ax-gate-outer {
position: relative;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 40px 20px;
background:
radial-gradient(ellipse 60% 50% at 50% 0%, rgba(155,10,26,0.18) 0%, transparent 70%),
radial-gradient(ellipse 40% 60% at 80% 80%, rgba(100,0,30,0.10) 0%, transparent 60%),
var(--ax-void);
overflow: hidden;
}
.ax-gate-outer::before {
content: '';
position: absolute; inset: 0;
background:
repeating-linear-gradient(
0deg,
transparent,
transparent 80px,
rgba(155,10,26,0.03) 80px,
rgba(155,10,26,0.03) 81px
);
pointer-events: none;
}
/* Floating particles */
.ax-gate-particles {
position: absolute; inset: 0; pointer-events: none;
}
.ax-gate-particles span {
position: absolute;
font-family: 'Cinzel', serif;
color: var(--ax-gold-b);
animation: axFloat 6s ease-in-out infinite alternate;
}
@keyframes axFloat {
from { transform: translateY(0) rotate(0deg); opacity: 0.12; }
to { transform: translateY(-18px) rotate(10deg); opacity: 0.22; }
}
/* ── GATE CARD ── */
.ax-gate-card {
position: relative;
width: 100%; max-width: 420px;
background: linear-gradient(160deg, #0A0212, #100418, #08030F);
border: 1px solid var(--ax-border);
border-radius: 24px;
padding: 44px 36px 40px;
text-align: center;
box-shadow:
0 0 0 1px rgba(155,10,26,0.12),
0 30px 80px rgba(0,0,0,0.7),
0 0 120px rgba(100,0,20,0.12),
inset 0 1px 0 rgba(201,150,58,0.10);
overflow: hidden;
}
.ax-gate-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--ax-crimson-b), var(--ax-gold-b), var(--ax-crimson-b), transparent);
}
.ax-gate-card::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, rgba(155,10,26,0.4), transparent);
}
/* Red glow orb */
.ax-gate-orb {
position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(155,10,26,0.18) 0%, transparent 70%);
pointer-events: none;
animation: axOrbPulse 4s ease-in-out infinite;
}
@keyframes axOrbPulse {
0%,100% { opacity:0.6; transform:translateX(-50%) scale(1); }
50% { opacity:1; transform:translateX(-50%) scale(1.15); }
}
/* ── GATE SEAL ── */
.ax-gate-seal {
position: relative;
width: 90px; height: 90px;
margin: 0 auto 24px;
display: flex; align-items: center; justify-content: center;
}
.ax-gate-seal-ring {
position: absolute; border-radius: 50%;
border: 1px solid var(--ax-crimson);
animation: axSpin 12s linear infinite;
}
.ax-gate-seal-ring--outer {
inset: 0;
border-color: rgba(155,10,26,0.50);
animation-duration: 16s;
}
.ax-gate-seal-ring--inner {
inset: 10px;
border-color: rgba(201,150,58,0.35);
animation-direction: reverse;
animation-duration: 10s;
}
.ax-gate-seal-ring--outer::before,
.ax-gate-seal-ring--outer::after,
.ax-gate-seal-ring--inner::before {
content: '◆';
position: absolute; font-size: 7px;
color: var(--ax-crimson-b); top: -5px; left: 50%; transform: translateX(-50%);
}
.ax-gate-seal-ring--inner::before {
color: var(--ax-gold);
top: auto; bottom: -5px; left: 50%; transform: translateX(-50%);
}
@keyframes axSpin { to { transform: rotate(360deg); } }
.ax-gate-seal-core {
width: 54px; height: 54px; border-radius: 50%;
background: radial-gradient(circle, rgba(155,10,26,0.25) 0%, rgba(4,0,8,0.9) 70%);
border: 1px solid rgba(155,10,26,0.4);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 20px rgba(155,10,26,0.3), inset 0 0 12px rgba(155,10,26,0.15);
}
/* ── GATE EYEBROW ── */
.ax-gate-eyebrow {
display: flex; align-items: center; gap: 10px;
justify-content: center;
font-size: 9px; font-family: 'Cinzel', serif;
color: var(--ax-text-muted); letter-spacing: 4px;
text-transform: uppercase; margin-bottom: 14px;
}
.ax-gate-eyebrow-line {
display: block; flex: 1; max-width: 40px; height: 1px;
background: linear-gradient(90deg, transparent, var(--ax-crimson));
}
.ax-gate-eyebrow-line:last-child {
background: linear-gradient(90deg, var(--ax-crimson), transparent);
}
/* ── GATE TITLE ── */
.ax-gate-title {
font-family: 'Cinzel Decorative', cursive;
font-size: 26px; font-weight: 900;
color: var(--ax-text); line-height: 1.2;
margin-bottom: 20px;
text-shadow: 0 0 40px rgba(155,10,26,0.4);
}
.ax-gate-title-accent {
background: linear-gradient(135deg, var(--ax-crimson-b), var(--ax-gold-b));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── GATE DIVIDER ── */
.ax-gate-divider {
display: flex; align-items: center; gap: 10px;
margin: 0 auto 20px; max-width: 200px;
}
.ax-gate-divider-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(155,10,26,0.4));
}
.ax-gate-divider:last-child .ax-gate-divider-line {
background: linear-gradient(90deg, rgba(155,10,26,0.4), transparent);
}
.ax-gate-divider-diamond {
font-size: 8px; color: var(--ax-gold); flex-shrink: 0;
}
/* ── GATE DESCRIPTION ── */
.ax-gate-desc {
font-size: 13px; line-height: 1.9;
color: var(--ax-text-dim);
margin-bottom: 24px;
}
.ax-gate-desc strong { color: var(--ax-gold-b); font-weight: 600; }
/* ── VIP REQUIRED BADGE ── */
.ax-gate-vip-req {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 18px; border-radius: 50px;
background: rgba(201,150,58,0.10);
border: 1px solid rgba(201,150,58,0.30);
color: var(--ax-gold-b);
font-size: 10px; font-family: 'Cinzel', serif;
font-weight: 700; letter-spacing: 2px;
margin-bottom: 20px;
}
/* ── GATE BENEFITS ── */
.ax-gate-benefits {
margin: 0 auto 28px; max-width: 260px; text-align: left;
}
.ax-gate-benefit {
display: flex; align-items: center; gap: 10px;
font-size: 11px; color: var(--ax-text-dim);
padding: 5px 0;
}
.ax-gate-benefit-dot {
width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0;
background: var(--ax-crimson-b);
box-shadow: 0 0 6px var(--ax-crimson-b);
}
/* ── GATE CTA BUTTON ── */
.ax-gate-cta {
display: flex; align-items: center; justify-content: center; gap: 9px;
width: 100%; padding: 15px 24px;
background: linear-gradient(135deg, var(--ax-crimson), #7A0015, var(--ax-blood));
border: 1px solid rgba(155,10,26,0.6);
border-radius: 12px;
color: #F5E0D8; font-family: 'Cinzel', serif;
font-size: 13px; font-weight: 700; letter-spacing: 2px;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 8px 30px rgba(155,10,26,0.4), 0 0 0 1px rgba(201,150,58,0.08);
margin-bottom: 16px;
}
.ax-gate-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 40px rgba(155,10,26,0.55), 0 0 0 1px rgba(201,150,58,0.15);
background: linear-gradient(135deg, var(--ax-crimson-b), #8B0019, var(--ax-blood));
}
.ax-gate-cta:active { transform: translateY(0); }
/* ── AGE WARNING ── */
.ax-gate-age-warning {
display: inline-flex; align-items: center; gap: 6px;
font-size: 9px; font-family: 'Cinzel', serif;
color: var(--ax-text-muted); letter-spacing: 2px;
text-transform: uppercase;
}
/* ══════════════════════════════════════════
AX — HERO BANNER (Content Screen)
══════════════════════════════════════════ */
.ax-hero {
position: relative; overflow: hidden;
padding: 40px 20px 32px;
background: linear-gradient(165deg, #07030E 0%, #100416 40%, #08030C 100%);
border-bottom: 1px solid var(--ax-border);
}
@media(min-width:768px) { .ax-hero { padding: 56px 40px 48px; } }
.ax-hero::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 60% at 50% 0%, rgba(155,10,26,0.22) 0%, transparent 65%),
radial-gradient(ellipse 40% 40% at 90% 80%, rgba(100,0,20,0.12) 0%, transparent 60%);
pointer-events: none;
}
.ax-hero::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--ax-crimson-b), var(--ax-gold), var(--ax-crimson-b), transparent);
}
.ax-rune {
position: absolute; font-family: 'Cinzel', serif;
color: var(--ax-gold-b); pointer-events: none;
animation: axFloat 7s ease-in-out infinite alternate;
}
.ax-hero-badges {
display: flex; align-items: center; gap: 10px;
margin-bottom: 18px; position: relative; z-index: 1;
}
.ax-18-badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 6px;
background: rgba(155,10,26,0.25);
border: 1px solid rgba(155,10,26,0.55);
color: #E03050; font-size: 11px;
font-family: 'Cinzel', serif; font-weight: 900;
letter-spacing: 1px;
box-shadow: 0 0 12px rgba(155,10,26,0.25);
}
/* Small variant for topbar */
.ax-18-badge-sm {
display: inline-flex; align-items: center;
padding: 2px 8px; border-radius: 5px;
background: rgba(155,10,26,0.20);
border: 1px solid rgba(155,10,26,0.45);
color: #E03050; font-size: 11px;
font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: 1px;
}
.ax-vip-crown-pill {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: 20px;
background: rgba(201,150,58,0.12);
border: 1px solid rgba(201,150,58,0.32);
color: var(--ax-gold-b);
font-size: 9px; font-family: 'Cinzel', serif;
font-weight: 700; letter-spacing: 2px;
}
.ax-hero-title {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(22px, 5vw, 32px); font-weight: 900;
color: var(--ax-text); line-height: 1.25;
margin-bottom: 14px; position: relative; z-index: 1;
text-shadow: 0 0 40px rgba(155,10,26,0.3);
}
.ax-hero-title-gold {
background: linear-gradient(135deg, var(--ax-gold-bright), var(--ax-gold), var(--ax-gold-b));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.ax-hero-sub {
font-size: 12px; line-height: 1.8;
color: var(--ax-text-dim); max-width: 420px;
position: relative; z-index: 1;
}
/* ══════════════════════════════════════════
AX — FILTER CHIPS
══════════════════════════════════════════ */
.ax-filters {
display: flex; gap: 8px; padding: 16px 20px;
overflow-x: auto; scrollbar-width: none;
background: var(--ax-obsidian2);
border-bottom: 1px solid var(--ax-separator);
}
.ax-filters::-webkit-scrollbar { display: none; }
.ax-filter-chip {
flex-shrink: 0;
padding: 7px 16px; border-radius: 20px;
border: 1px solid rgba(155,10,26,0.28);
background: rgba(155,10,26,0.06);
color: var(--ax-text-muted);
font-size: 11px; font-family: 'Cinzel', serif;
font-weight: 600; cursor: pointer;
transition: all 0.22s; letter-spacing: 0.5px;
white-space: nowrap;
}
.ax-filter-chip:hover {
border-color: rgba(155,10,26,0.5);
color: var(--ax-text-dim);
background: rgba(155,10,26,0.10);
}
.ax-filter-chip.active {
background: linear-gradient(135deg, rgba(155,10,26,0.30), rgba(100,0,20,0.25));
border-color: rgba(155,10,26,0.60);
color: #E8B0B0;
box-shadow: 0 0 12px rgba(155,10,26,0.20);
}
/* ══════════════════════════════════════════
AX — SPOTLIGHT CARD
══════════════════════════════════════════ */
.ax-spotlight {
position: relative; overflow: hidden;
margin: 0; height: 200px; cursor: pointer;
}
@media(min-width:768px) { .ax-spotlight { height: 280px; } }
.ax-spotlight:hover .ax-spotlight-read-btn { background: rgba(201,150,58,0.25); }
.ax-spotlight-bg-img {
position: absolute; inset: 0;
background-size: cover; background-position: center;
background-color: var(--ax-obsidian3);
transition: transform 0.6s ease;
}
.ax-spotlight:hover .ax-spotlight-bg-img { transform: scale(1.03); }
.ax-spotlight-scrim {
position: absolute; inset: 0;
background: linear-gradient(90deg,
rgba(7,3,14,0.92) 0%, rgba(7,3,14,0.65) 55%, rgba(7,3,14,0.20) 100%);
}
.ax-spotlight-content {
position: relative; z-index: 2;
padding: 24px 20px; height: 100%;
display: flex; flex-direction: column; justify-content: center;
max-width: 60%;
}
.ax-spotlight-label {
display: flex; align-items: center; gap: 7px;
font-size: 9px; font-family: 'Cinzel', serif;
color: var(--ax-gold-b); letter-spacing: 3px;
text-transform: uppercase; margin-bottom: 10px;
}
.ax-spotlight-label-dot {
width: 5px; height: 5px; border-radius: 50%;
background: var(--ax-gold-b);
box-shadow: 0 0 6px var(--ax-gold);
animation: axDotPulse 2s infinite;
}
@keyframes axDotPulse {
0%,100% { opacity:1; } 50% { opacity:0.4; }
}
.ax-spotlight-title {
font-family: 'Cinzel', serif; font-size: 18px;
font-weight: 700; color: var(--ax-text);
margin-bottom: 8px; line-height: 1.3;
text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
@media(min-width:768px) { .ax-spotlight-title { font-size: 22px; } }
.ax-spotlight-desc {
font-size: 11px; color: var(--ax-text-dim);
line-height: 1.6; margin-bottom: 14px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ax-spotlight-footer {
display: flex; align-items: center; gap: 12px;
}
.ax-spotlight-rating {
display: flex; align-items: center; gap: 4px;
color: var(--ax-gold-b); font-size: 11px; font-weight: 600;
}
.ax-spotlight-read-btn {
padding: 6px 16px; border-radius: 6px;
background: rgba(155,10,26,0.30);
border: 1px solid rgba(155,10,26,0.55);
color: #F0C0C0; font-family: 'Cinzel', serif;
font-size: 10px; font-weight: 700; letter-spacing: 1px;
cursor: pointer; transition: all 0.2s;
}
.ax-spotlight-read-btn:hover {
background: rgba(155,10,26,0.50);
border-color: rgba(155,10,26,0.8);
}
.ax-spotlight-cover-thumb {
position: absolute; right: 0; top: 0; bottom: 0;
width: 38%; pointer-events: none;
}
.ax-spotlight-cover-thumb img {
width: 100%; height: 100%;
object-fit: cover; object-position: center top;
opacity: 0.5;
mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, black 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 30%, black 100%);
}
/* ══════════════════════════════════════════
AX — CONTENT SECTIONS & ROWS
══════════════════════════════════════════ */
.ax-section { padding: 22px 16px 4px; }
@media(min-width:768px) { .ax-section { padding: 28px 32px 8px; } }
.ax-section-head {
display: flex; align-items: center;
justify-content: space-between; margin-bottom: 14px;
}
.ax-section-title {
display: flex; align-items: center; gap: 9px;
font-family: 'Cinzel', serif; font-size: 12px;
font-weight: 700; color: var(--ax-text-dim);
letter-spacing: 2px; text-transform: uppercase;
}
.ax-section-dot {
width: 7px; height: 7px; border-radius: 50%;
background: var(--ax-crimson-b);
box-shadow: 0 0 8px var(--ax-crimson-b);
flex-shrink: 0;
}
.ax-section-all {
font-size: 10px; font-family: 'Cinzel', serif;
color: var(--ax-text-muted); cursor: pointer;
transition: color 0.2s; letter-spacing: 1px;
}
.ax-section-all:hover { color: var(--ax-gold); }
/* Horizontal scroll row */
.ax-row {
display: flex; gap: 10px;
overflow-x: auto; padding-bottom: 12px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
cursor: grab;
}
.ax-row:active { cursor: grabbing; }
.ax-row::-webkit-scrollbar { display: none; }
/* ── AX CARD ── */
.ax-card {
flex-shrink: 0; width: 120px;
scroll-snap-align: start;
cursor: pointer; transition: transform 0.25s;
}
@media(min-width:768px) { .ax-card { width: 150px; } }
.ax-card:hover { transform: translateY(-5px); }
.ax-card-thumb {
width: 100%; aspect-ratio: 2/3;
border-radius: 10px; overflow: hidden;
position: relative;
background: var(--ax-obsidian3);
border: 1px solid var(--ax-border);
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
transition: box-shadow 0.25s, border-color 0.25s;
}
.ax-card:hover .ax-card-thumb {
box-shadow: 0 10px 30px rgba(155,10,26,0.30);
border-color: rgba(155,10,26,0.40);
}
.ax-card-thumb img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.4s ease;
}
.ax-card:hover .ax-card-thumb img { transform: scale(1.06); }
.ax-card-thumb::before {
content: '';
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to top, rgba(7,3,14,0.88) 0%, transparent 50%);
}
.ax-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
z-index: 2; padding: 10px 8px 8px;
}
.ax-card-title {
font-size: 10px; font-weight: 600;
color: var(--ax-text); overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
margin-bottom: 3px;
}
.ax-card-rating {
display: flex; align-items: center; gap: 3px;
font-size: 9px; color: var(--ax-gold);
}
/* Hot badge */
.ax-card-badge-hot {
position: absolute; top: 7px; left: 7px; z-index: 3;
padding: 2px 7px; border-radius: 4px;
background: rgba(155,10,26,0.75);
border: 1px solid rgba(155,10,26,0.9);
color: #FFB0B0; font-size: 8px;
font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 1px;
}
/* New badge */
.ax-card-badge-new {
position: absolute; top: 7px; left: 7px; z-index: 3;
padding: 2px 7px; border-radius: 4px;
background: rgba(201,150,58,0.20);
border: 1px solid rgba(201,150,58,0.55);
color: var(--ax-gold-b); font-size: 8px;
font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.5px;
}
/* ── DIVIDER ── */
.ax-divider {
display: flex; align-items: center; gap: 12px;
padding: 8px 24px 4px; margin: 8px 0;
}
.ax-divider-line {
flex: 1; height: 1px;
background: linear-gradient(90deg, transparent, rgba(155,10,26,0.25));
}
.ax-divider:nth-child(2) .ax-divider-line:last-child {
background: linear-gradient(90deg, rgba(155,10,26,0.25), transparent);
}
.ax-divider-sym { font-size: 8px; color: var(--ax-gold-dim); flex-shrink: 0; }
/* ── ADMIN BTN ── */
.ax-admin-btn {
display: flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 8px;
background: rgba(155,10,26,0.15);
border: 1px solid rgba(155,10,26,0.40);
color: #C08090; font-size: 10px;
font-family: 'Cinzel', serif; font-weight: 700;
cursor: pointer; letter-spacing: 1px;
transition: all 0.2s;
}
.ax-admin-btn:hover {
background: rgba(155,10,26,0.28);
border-color: rgba(155,10,26,0.65);
color: #F0C0C0;
}
/* Navigation indicator for 18+ */
.nav-18-dot {
width: 5px; height: 5px; border-radius: 50%;
background: #C41E3A; margin-left: 4px;
animation: adultDot 2s ease-in-out infinite;
}
/* ════════════════════════════════════════════
ADMIN PANEL — DETAIL QUICK PANELS
════════════════════════════════════════════ */
/* VIP/Coin toggle chips */
.access-chip-row { display:flex; gap:6px; flex-wrap:wrap; }
.access-chip {
padding:5px 14px; border-radius:20px; font-size:10px;
font-family:'Cinzel',serif; font-weight:700; cursor:pointer;
border:1px solid rgba(255,255,255,0.12); background:rgba(255,255,255,0.04);
color:var(--text-dim); transition:all 0.2s;
}
.access-chip.active-free { background:rgba(34,197,94,0.15); color:#22c55e; border-color:rgba(34,197,94,0.4); }
.access-chip.active-vip { background:rgba(212,175,55,0.15); color:var(--gold-light); border-color:rgba(212,175,55,0.4); }
.access-chip.active-coin { background:rgba(234,179,8,0.12); color:#eab308; border-color:rgba(234,179,8,0.35); }
/* Number input styled */
.dap-input {
background:var(--dark3); border:1px solid var(--border); border-radius:8px;
padding:8px 12px; color:var(--text); font-size:13px;
font-family:'Inter',sans-serif; outline:none; width:100%; transition:border-color 0.2s;
}
.dap-input:focus { border-color:var(--gold-dim); }
/* Chapter add modal overlay */
.dap-modal-overlay {
position:fixed; inset:0; z-index:250; background:rgba(0,0,0,0.88);
backdrop-filter:blur(6px); display:flex; align-items:flex-end; justify-content:center;
animation:fadeIn 0.2s ease;
}
@media(min-width:600px) { .dap-modal-overlay { align-items:center; } }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
.dap-modal {
width:100%; max-width:480px; max-height:90vh; overflow-y:auto;
background:linear-gradient(145deg, #0e0818, #160c24);
border:1px solid rgba(212,175,55,0.2);
border-radius:20px 20px 0 0; padding:24px;
animation:slideUp 0.3s cubic-bezier(.4,0,.2,1);
box-shadow:0 -20px 60px rgba(139,0,0,0.3);
}
@media(min-width:600px) { .dap-modal { border-radius:20px; animation:scaleUp 0.3s cubic-bezier(.4,0,.2,1); } }
@keyframes slideUp { from{transform:translateY(40px);opacity:0;} to{transform:translateY(0);opacity:1;} }
@keyframes scaleUp { from{transform:scale(0.95);opacity:0;} to{transform:scale(1);opacity:1;} }
.dap-modal-header {
display:flex; align-items:center; justify-content:space-between;
margin-bottom:20px; padding-bottom:16px;
border-bottom:1px solid rgba(255,255,255,0.06);
}
.dap-modal-title { font-family:'Cinzel',serif; font-size:15px; font-weight:700; color:var(--gold-light); }
.dap-modal-close {
width:30px; height:30px; border-radius:8px; background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08); cursor:pointer; color:var(--text-dim);
display:flex; align-items:center; justify-content:center; font-size:16px;
transition:all 0.15s;
}
.dap-modal-close:hover { background:rgba(139,0,0,0.2); color:var(--crimson-light); }
.dap-form-group { margin-bottom:16px; }
.dap-form-label { font-size:10px; color:var(--text-muted); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:6px; display:block; font-family:'Cinzel',serif; }
.dap-save-btn {
width:100%; padding:13px; border-radius:12px; border:none;
font-size:13px; font-weight:700; font-family:'Cinzel',serif; cursor:pointer;
letter-spacing:1px; transition:all 0.2s;
background:linear-gradient(135deg, var(--crimson), var(--crimson-light));
color:white; box-shadow:0 6px 24px rgba(139,0,0,0.4);
margin-top:8px;
}
.dap-save-btn:hover { transform:translateY(-1px); box-shadow:0 10px 32px rgba(139,0,0,0.5); }
/* ════════════════════════════════════════════
GLOBAL UI POLISH
════════════════════════════════════════════ */
/* Premium section separator */
.section-glow-sep-v2 {
height:1px; margin:8px 16px;
background:linear-gradient(90deg, transparent, rgba(212,175,55,0.15), rgba(139,0,0,0.1), transparent);
}
@media(min-width:768px) { .section-glow-sep-v2 { margin:8px 32px; } }
/* Smooth page transitions */
.page { transition:opacity 0.15s ease; }
.page.active { animation:pageIn 0.2s ease; }
@keyframes pageIn { from{opacity:0.7;} to{opacity:1;} }
/* Premium toast */
#toast {
background: linear-gradient(135deg, rgba(14,10,22,0.97), rgba(22,14,32,0.97)) !important;
border: 1px solid rgba(212,175,55,0.25) !important;
border-radius: 12px !important;
box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.03) !important;
font-family:'Cinzel',serif !important;
letter-spacing:0.5px !important;
}
/* Drag-scroll cursor on all scroll rows */
.scroll-row[data-drag="true"] { cursor:grab; }
.scroll-row[data-drag="true"]:active { cursor:grabbing; }
/* Global hover glow on manga cards */
.manga-card:hover .manga-thumb {
border-color: rgba(212,175,55,0.35);
box-shadow: 0 8px 24px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.12);
}
/* ════════════════════════════════════════════════════════════════
AZURA — READER PAGE v2 · Full Premium Dark Fantasy Reader
════════════════════════════════════════════════════════════════ */
/* Reader page: fullscreen, deep black */
.reader-page {
display: none;
flex-direction: column;
width: 100%;
height: 100dvh;
background: #060609;
overflow: hidden;
position: relative;
}
.reader-page.active { display: flex; }
/* ── Progress bar ──────────────────────────────────────── */
.rdr-progress-wrap {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
background: rgba(255,255,255,0.06);
z-index: 200;
overflow: visible;
}
.rdr-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #8B0000, #C41E3A, #D4AF37);
transition: width 0.3s ease;
border-radius: 0 2px 2px 0;
position: relative;
}
.rdr-progress-bar::after {
content:'';
position:absolute;
right: -2px; top: -2px;
width: 7px; height: 7px;
border-radius: 50%;
background: #D4AF37;
box-shadow: 0 0 8px rgba(212,175,55,0.8);
}
.rdr-progress-glow {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 0%;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.25));
pointer-events: none;
transition: width 0.3s ease;
}
/* ── Header bar ──────────────────────────────────────── */
.rdr-header {
position: fixed;
top: 3px; left: 0; right: 0;
height: 52px;
display: flex;
align-items: center;
gap: 8px;
padding: 0 8px 0 4px;
background: linear-gradient(180deg, rgba(4,4,8,0.98) 0%, rgba(4,4,8,0.88) 75%, transparent 100%);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
z-index: 150;
transition: opacity 0.3s, transform 0.3s;
border-bottom: 1px solid rgba(139,0,0,0.12);
}
.rdr-header.hidden {
opacity: 0;
transform: translateY(-100%);
pointer-events: none;
}
/* Back button */
.rdr-back-btn {
width: 38px; height: 38px;
border-radius: 10px;
border: 1px solid rgba(139,0,0,0.35);
background: rgba(139,0,0,0.12);
color: rgba(255,255,255,0.75);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.18s;
}
.rdr-back-btn:hover {
background: rgba(139,0,0,0.28);
border-color: rgba(212,175,55,0.4);
color: var(--gold, #D4AF37);
box-shadow: 0 0 14px rgba(139,0,0,0.35);
}
.rdr-back-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* Title group */
.rdr-title-group {
flex: 1;
min-width: 0;
overflow: hidden;
}
.rdr-manhwa-name {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
color: rgba(212,175,55,0.9);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.5px;
line-height: 1.2;
}
.rdr-chapter-name {
font-size: 10px;
color: rgba(255,255,255,0.4);
font-family: 'Inter', sans-serif;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.3;
margin-top: 1px;
}
/* Header controls group */
.rdr-header-controls {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
/* Prev/Next header buttons */
.rdr-header-nav {
width: 32px; height: 32px;
border-radius: 50%;
border: 1px solid rgba(139,0,0,0.3);
background: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.45);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.18s;
}
.rdr-header-nav:hover:not(:disabled) {
background: rgba(139,0,0,0.25);
border-color: rgba(212,175,55,0.4);
color: rgba(212,175,55,0.9);
box-shadow: 0 0 10px rgba(139,0,0,0.3);
}
.rdr-header-nav:disabled { opacity: 0.2; cursor: not-allowed; }
.rdr-header-nav svg { width: 16px; height: 16px; fill: currentColor; }
/* Chat toggle button */
.rdr-chat-toggle-btn {
width: 36px; height: 36px;
border-radius: 10px;
border: 1px solid rgba(212,175,55,0.25);
background: rgba(212,175,55,0.07);
color: rgba(212,175,55,0.75);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
position: relative;
transition: all 0.18s;
}
.rdr-chat-toggle-btn:hover, .rdr-chat-toggle-btn.active {
background: rgba(212,175,55,0.15);
border-color: rgba(212,175,55,0.5);
color: var(--gold, #D4AF37);
box-shadow: 0 0 14px rgba(212,175,55,0.2);
}
.rdr-chat-toggle-btn svg { width: 16px; height: 16px; fill: currentColor; }
.rdr-chat-badge {
position: absolute;
top: -4px; right: -4px;
min-width: 16px; height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--crimson, #8B0000);
color: #fff;
font-size: 9px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 6px rgba(139,0,0,0.6);
border: 1px solid rgba(0,0,0,0.4);
}
/* ── Main body ──────────────────────────────────────── */
.rdr-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
padding-top: 55px; /* header height */
background: #060609;
/* Hardware acceleration for buttery scroll */
-webkit-overflow-scrolling: touch;
will-change: scroll-position;
}
.rdr-body::-webkit-scrollbar { width: 2px; }
.rdr-body::-webkit-scrollbar-thumb { background: rgba(139,0,0,0.4); border-radius:2px; }
/* ── Comic panels ──────────────────────────────────── */
.rdr-panels {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 0;
padding-bottom: 8px;
}
/* Each panel */
.rdr-panel {
width: 100%;
max-width: 720px;
display: block;
position: relative;
line-height: 0;
background: #060609;
margin: 0 auto;
}
.rdr-panel img {
width: 100%;
height: auto;
display: block;
image-rendering: -webkit-optimize-contrast;
transition: opacity 0.3s ease;
}
.rdr-panel img.loading { opacity: 0.3; }
.rdr-panel img.loaded { opacity: 1; }
/* Panel loading shimmer */
.rdr-panel-placeholder {
width: 100%;
aspect-ratio: 3/4;
background: linear-gradient(135deg, #0d0d18, #111120);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
.rdr-panel-placeholder::after {
content:'';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent 0%, rgba(139,0,0,0.08) 40%,
rgba(212,175,55,0.06) 50%,
rgba(139,0,0,0.08) 60%, transparent 100%);
background-size: 200% 100%;
animation: rdrShimmer 1.6s ease infinite;
}
@keyframes rdrShimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
/* ── Chapter nav footer ──────────────────────────── */
.rdr-chapter-nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 20px 16px 28px;
max-width: 720px;
margin: 0 auto;
width: 100%;
}
.rdr-nav-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
border-radius: 10px;
border: 1px solid rgba(139,0,0,0.35);
background: rgba(139,0,0,0.1);
color: rgba(255,255,255,0.65);
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
letter-spacing: 0.5px;
white-space: nowrap;
}
.rdr-nav-btn:hover:not(:disabled) {
background: rgba(139,0,0,0.22);
border-color: rgba(212,175,55,0.4);
color: rgba(212,175,55,0.9);
box-shadow: 0 4px 16px rgba(139,0,0,0.3);
}
.rdr-nav-btn:disabled { opacity: 0.2; cursor: not-allowed; }
.rdr-nav-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.rdr-chapter-pill {
font-family: 'Cinzel', serif;
font-size: 11px;
color: rgba(212,175,55,0.7);
white-space: nowrap;
padding: 8px 14px;
border-radius: 20px;
border: 1px solid rgba(212,175,55,0.18);
background: rgba(212,175,55,0.05);
letter-spacing: 0.5px;
text-align: center;
}
/* ── Floating Chat Panel ──────────────────────────── */
.rdr-chat-panel {
position: fixed;
right: 0; top: 55px; bottom: 0;
width: 300px;
background: linear-gradient(180deg, rgba(8,6,14,0.97) 0%, rgba(10,7,18,0.98) 100%);
border-left: 1px solid rgba(139,0,0,0.2);
display: flex;
flex-direction: column;
z-index: 140;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
box-shadow: -8px 0 32px rgba(0,0,0,0.5);
}
.rdr-chat-panel.open {
transform: translateX(0);
}
/* When chat is open, shrink reading area on desktop */
@media (min-width: 768px) {
.rdr-body.chat-open {
padding-right: 300px;
transition: padding-right 0.3s cubic-bezier(0.4,0,0.2,1);
}
}
/* Mobile: bottom sheet style */
@media (max-width: 767px) {
.rdr-chat-panel {
right: 0; left: 0;
top: auto; bottom: 0;
width: 100%;
height: 60vh;
border-left: none;
border-top: 1px solid rgba(139,0,0,0.25);
border-radius: 20px 20px 0 0;
transform: translateY(100%);
box-shadow: 0 -8px 40px rgba(0,0,0,0.6);
}
.rdr-chat-panel.open { transform: translateY(0); }
}
.rdr-chat-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid rgba(212,175,55,0.1);
background: linear-gradient(90deg, rgba(139,0,0,0.15), transparent);
flex-shrink: 0;
}
.rdr-chat-header-left {
display: flex;
align-items: center;
gap: 6px;
font-family: 'Cinzel', serif;
font-size: 11px;
color: rgba(212,175,55,0.85);
font-weight: 600;
letter-spacing: 0.5px;
}
.rdr-online-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34,197,94,0.7);
flex-shrink: 0;
animation: pulse-dot 2s ease infinite;
}
@keyframes pulse-dot {
0%,100% { box-shadow: 0 0 4px rgba(34,197,94,0.7); }
50% { box-shadow: 0 0 10px rgba(34,197,94,0.9); }
}
.rdr-online-count { font-size: 9px; color: rgba(255,255,255,0.35); font-family:'Inter',sans-serif; font-weight:400; }
.rdr-chat-close {
width: 26px; height: 26px;
border-radius: 50%;
border: 1px solid rgba(255,255,255,0.08);
background: transparent;
color: rgba(255,255,255,0.4);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.rdr-chat-close:hover { background: rgba(139,0,0,0.2); color: rgba(255,255,255,0.8); }
.rdr-chat-close svg { width: 13px; height: 13px; fill: currentColor; }
.rdr-chat-messages {
flex: 1;
overflow-y: auto;
padding: 12px;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
}
.rdr-chat-messages::-webkit-scrollbar { width: 2px; }
.rdr-chat-messages::-webkit-scrollbar-thumb { background:rgba(139,0,0,0.35); }
/* Chat message bubbles */
.rdr-msg {
display: flex;
flex-direction: column;
gap: 3px;
animation: msgSlide 0.2s ease;
}
@keyframes msgSlide {
from { opacity:0; transform:translateY(6px); }
to { opacity:1; transform:translateY(0); }
}
.rdr-msg-username {
font-size: 10px;
font-weight: 600;
color: rgba(212,175,55,0.75);
font-family: 'Cinzel', serif;
letter-spacing: 0.3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
.rdr-msg-username.is-own { color: #C41E3A; }
.rdr-msg-bubble {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 4px 12px 12px 12px;
padding: 7px 10px;
font-size: 12px;
color: rgba(255,255,255,0.78);
font-family: 'Inter', sans-serif;
line-height: 1.5;
word-break: break-word;
}
.rdr-msg-bubble.own-bubble {
border-radius: 12px 4px 12px 12px;
background: linear-gradient(135deg, rgba(139,0,0,0.25), rgba(196,30,58,0.15));
border-color: rgba(139,0,0,0.35);
color: rgba(255,255,255,0.9);
}
.rdr-msg-bubble.system-bubble {
background: transparent;
border: 1px solid rgba(212,175,55,0.15);
border-radius: 8px;
color: rgba(212,175,55,0.5);
font-size: 10px;
text-align: center;
font-family: 'Cinzel', serif;
letter-spacing: 0.3px;
}
.rdr-msg-time {
font-size: 9px;
color: rgba(255,255,255,0.2);
font-family: 'Inter', sans-serif;
margin-left: auto;
}
.rdr-chat-input-wrap {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 12px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(0,0,0,0.3);
flex-shrink: 0;
}
.rdr-chat-input {
flex: 1;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(139,0,0,0.25);
border-radius: 10px;
padding: 8px 12px;
color: rgba(255,255,255,0.8);
font-size: 12px;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.15s;
}
.rdr-chat-input:focus { border-color: rgba(212,175,55,0.35); }
.rdr-chat-input::placeholder { color: rgba(255,255,255,0.2); }
.rdr-chat-send {
width: 34px; height: 34px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, #8B0000, #C41E3A);
color: #fff;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
flex-shrink: 0;
transition: all 0.18s;
box-shadow: 0 2px 10px rgba(139,0,0,0.4);
}
.rdr-chat-send:hover {
background: linear-gradient(135deg, #C41E3A, #D4AF37);
box-shadow: 0 4px 16px rgba(139,0,0,0.5);
transform: scale(1.04);
}
.rdr-chat-send svg { width: 14px; height: 14px; fill: currentColor; }
/* ══ DESKTOP — wider panels, chat always visible on right ══ */
@media (min-width: 768px) {
/* Reading area shifts left to give space for always-open chat */
.rdr-body {
right: 320px; /* chat width */
transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
}
/* Chat is always visible on desktop — no toggle needed */
.rdr-chat-panel {
transform: translateX(0) !important;
}
/* Hide chat toggle on desktop since chat is always shown */
#rdr-chat-toggle {
display: none !important;
}
/* Wider panels on desktop */
.rdr-panels { max-width: 800px; }
.rdr-panel { max-width: 800px; }
.rdr-chapter-nav { max-width: 800px; }
.rdr-back-btn { width: 40px; height: 40px; }
/* Header shifts left too */
.rdr-header {
right: 320px;
transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
}
.rdr-progress-wrap {
right: 320px;
transition: right 0.3s cubic-bezier(0.4,0,0.2,1);
}
}
/* ══ LARGE DESKTOP — even wider panels ══ */
@media (min-width: 1200px) {
.rdr-body { right: 340px; }
.rdr-header { right: 340px; }
.rdr-progress-wrap { right: 340px; }
.rdr-chat-panel { width: 340px; }
.rdr-panels { max-width: 900px; }
.rdr-panel { max-width: 900px; }
.rdr-chapter-nav { max-width: 900px; }
}
/* ══ MOBILE — reset right offsets ══ */
@media (max-width: 767px) {
.rdr-body { right: 0 !important; }
.rdr-header { right: 0 !important; }
.rdr-progress-wrap { right: 0 !important; }
/* Show chat toggle on mobile */
#rdr-chat-toggle { display: flex !important; }
}
/* ══ PDF CONVERSION OVERLAY ══ */
.rdr-convert-overlay {
position: fixed;
inset: 0;
background: rgba(3,2,8,0.92);
z-index: 500;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(8px);
}
.rdr-convert-box {
background: linear-gradient(160deg, #0d0a18, #0a0712);
border: 1px solid rgba(139,0,0,0.45);
border-radius: 20px;
padding: 36px 40px 32px;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
min-width: 280px;
box-shadow: 0 0 60px rgba(139,0,0,0.25), 0 0 120px rgba(139,0,0,0.1);
}
.rdr-convert-icon {
width: 60px; height: 60px;
border-radius: 50%;
background: rgba(139,0,0,0.15);
border: 1px solid rgba(139,0,0,0.4);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 0 24px rgba(139,0,0,0.25);
animation: rdr-convert-pulse 1.5s ease infinite;
}
@keyframes rdr-convert-pulse {
0%,100% { box-shadow: 0 0 24px rgba(139,0,0,0.25); }
50% { box-shadow: 0 0 40px rgba(196,30,58,0.5); }
}
.rdr-convert-icon svg { width: 28px; height: 28px; fill: rgba(212,175,55,0.7); }
.rdr-convert-title {
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
color: rgba(212,175,55,0.9);
letter-spacing: 1px;
}
.rdr-convert-status {
font-size: 12px;
color: rgba(255,255,255,0.45);
font-family: 'Inter', sans-serif;
text-align: center;
}
.rdr-convert-bar-wrap {
width: 220px;
height: 4px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
overflow: hidden;
}
.rdr-convert-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #8B0000, #C41E3A, #D4AF37);
border-radius: 2px;
transition: width 0.2s ease;
box-shadow: 0 0 10px rgba(196,30,58,0.6);
}
.rdr-convert-pct {
font-family: 'Cinzel', serif;
font-size: 13px;
color: rgba(212,175,55,0.7);
letter-spacing: 1px;
}
/* ══ CHAT PREMIUM UPGRADES ══ */
.rdr-chat-glow-line {
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #8B0000 20%, #C41E3A 50%, #D4AF37 65%, #8B0000 80%, transparent);
border-radius: 0 0 2px 2px;
z-index: 1;
}
.rdr-chat-members-pill {
display: flex; align-items: center; gap: 4px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 10px;
padding: 3px 8px;
font-size: 9px;
color: rgba(212,175,55,0.6);
font-family: 'Inter', sans-serif;
font-weight: 600;
}
/* My avatar mini in input */
.rdr-chat-avatar-mini {
width: 28px; height: 28px;
border-radius: 50%;
background: linear-gradient(135deg, #8B0000, #D4AF37);
color: #fff;
font-size: 11px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: 'Inter', sans-serif;
border: 1px solid rgba(212,175,55,0.3);
}
/* Message avatars */
.rdr-msg-header {
display: flex;
align-items: center;
gap: 6px;
}
.rdr-msg-avatar {
width: 22px; height: 22px;
border-radius: 50%;
font-size: 10px; font-weight: 700;
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
font-family: 'Inter', sans-serif;
}
/* PDF upload button in header */
.rdr-upload-btn {
background: rgba(212,175,55,0.07) !important;
border-color: rgba(212,175,55,0.25) !important;
color: rgba(212,175,55,0.6) !important;
}
.rdr-upload-btn:hover {
background: rgba(212,175,55,0.15) !important;
color: rgba(212,175,55,0.9) !important;
}
/* ════════════════════════════════════════════════════════════════
DETAIL PAGE — Premium Back Button + Desktop Layout Fix
════════════════════════════════════════════════════════════════ */
/* ══ detail-back-btn: removed — back button injected by JS (_injectDetailBackBtn / azura-single-back-btn) ══ */
/* Desktop detail page improvements */
@media (min-width: 768px) { /* Detail page desktop: wider cover, two-column info */
#page-detail .detail-cover-wrapper {
max-height: 380px;
}
#page-detail .detail-info {
padding: 24px 32px;
}
#page-detail .detail-header {
gap: 24px;
}
#page-detail .detail-cover-small {
width: 130px;
height: 190px;
flex-shrink: 0;
border-radius: 14px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 0 1px rgba(212,175,55,0.15);
}
#page-detail .detail-title {
font-size: 22px;
}
#page-detail .detail-actions {
margin-top: 16px;
}
/* Chapter list desktop: two columns */
#chapter-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding: 0 32px 32px;
}
/* Admin panel desktop */
#detail-admin-panel {
margin: 0 32px 32px !important;
}
/* Section padding desktop */
#page-detail .section {
padding: 0 32px 16px;
}
#page-detail .section:first-of-type {
padding-top: 16px;
}
}
@media (min-width: 1200px) {
#page-detail .detail-info {
padding: 28px 48px;
}
#page-detail .detail-cover-small {
width: 150px;
height: 220px;
}
#page-detail .detail-title {
font-size: 26px;
}
#chapter-list {
grid-template-columns: repeat(3, 1fr);
padding: 0 48px 32px;
}
#page-detail .section {
padding: 0 48px 16px;
}
#detail-admin-panel {
margin: 0 48px 32px !important;
}
}
/* ═══════════════════════════════════════════════════════
AZURA AUTH MODAL — PREMIUM DARK FANTASY
(Eski .modal-* klasslari saqlanib qoldi, yangi .azura-* qo'shildi)
═══════════════════════════════════════════════════════ */
@keyframes authOverlayIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes authBoxIn {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes shimmerGold {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
@keyframes crimsonPulse {
0%,100% { box-shadow: 0 0 18px rgba(185,28,28,0.35), 0 0 40px rgba(185,28,28,0.12); }
50% { box-shadow: 0 0 30px rgba(185,28,28,0.60), 0 0 60px rgba(185,28,28,0.22); }
}
@keyframes goldPulseAuth {
0%,100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes idAppearAuth {
from { opacity: 0; transform: scale(0.88); }
to { opacity: 1; transform: scale(1); }
}
@keyframes spinAuth {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* — Overlay — */
#auth-modal { animation: authOverlayIn 0.35s ease; }
/* — Modal Box — */
.azura-modal-box {
position: relative;
width: 92%;
max-width: 420px;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
background: linear-gradient(160deg, rgba(25,5,5,0.98) 0%, rgba(10,5,15,0.99) 50%, rgba(5,5,10,1) 100%);
border: 1px solid rgba(234,179,8,0.22);
border-radius: 20px;
padding: 36px 28px 28px;
animation: authBoxIn 0.4s cubic-bezier(0.22,1,0.36,1);
box-shadow:
0 0 0 1px rgba(185,28,28,0.15),
0 8px 32px rgba(0,0,0,0.9),
0 0 80px rgba(185,28,28,0.08),
inset 0 1px 0 rgba(234,179,8,0.10),
inset 0 -1px 0 rgba(185,28,28,0.08);
}
.azura-modal-box::-webkit-scrollbar { width: 3px; }
.azura-modal-box::-webkit-scrollbar-thumb { background: rgba(185,28,28,0.5); border-radius: 2px; }
.azura-modal-box::before {
content: '';
position: absolute;
top: 12px; left: 12px;
width: 40px; height: 40px;
border-top: 2px solid rgba(234,179,8,0.5);
border-left: 2px solid rgba(234,179,8,0.5);
border-radius: 4px 0 0 0;
pointer-events: none;
}
.azura-modal-box::after {
content: '';
position: absolute;
bottom: 12px; right: 12px;
width: 40px; height: 40px;
border-bottom: 2px solid rgba(234,179,8,0.5);
border-right: 2px solid rgba(234,179,8,0.5);
border-radius: 0 0 4px 0;
pointer-events: none;
}
/* — Close — */
.azura-close {
position: absolute;
top: 14px; right: 14px;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
background: rgba(185,28,28,0.12);
border: 1px solid rgba(185,28,28,0.30);
border-radius: 8px;
color: rgba(220,180,180,0.8);
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
z-index: 10;
line-height: 1;
}
.azura-close:hover {
background: rgba(185,28,28,0.35);
border-color: rgba(185,28,28,0.7);
color: #fff;
transform: rotate(90deg);
box-shadow: 0 0 12px rgba(185,28,28,0.4);
}
/* — Logo — */
.azura-modal-logo { text-align: center; margin-bottom: 2px; }
.azura-modal-logo-text {
display: inline-block;
font-family: 'Cinzel Decorative', cursive;
font-size: 26px;
font-weight: 900;
letter-spacing: 6px;
background: linear-gradient(135deg, #EAB308 0%, #F5C842 40%, #EAB308 60%, #D4AF37 100%);
background-size: 400px auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: shimmerGold 3s infinite linear, goldPulseAuth 2.5s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(234,179,8,0.3));
}
.azura-modal-sub {
text-align: center;
font-size: 9px;
letter-spacing: 4px;
text-transform: uppercase;
color: rgba(185,28,28,0.8);
margin-bottom: 6px;
font-family: 'Cinzel', serif;
}
.azura-divider-line {
width: 100%;
height: 1px;
margin: 12px 0 20px;
background: linear-gradient(90deg, transparent 0%, rgba(234,179,8,0.15) 20%, rgba(185,28,28,0.4) 50%, rgba(234,179,8,0.15) 80%, transparent 100%);
position: relative;
}
.azura-divider-line::before {
content: '✦';
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%,-50%);
color: rgba(234,179,8,0.6);
font-size: 10px;
background: rgba(10,5,15,0.99);
padding: 0 8px;
}
/* — Tabs — */
.azura-tabs {
display: flex; gap: 6px;
margin-bottom: 24px;
background: rgba(0,0,0,0.4);
border: 1px solid rgba(234,179,8,0.1);
border-radius: 12px;
padding: 4px;
}
.azura-tab {
flex: 1;
padding: 10px 6px;
text-align: center;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: rgba(200,180,150,0.5);
cursor: pointer;
border-radius: 9px;
transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
user-select: none;
}
.azura-tab.active {
background: linear-gradient(135deg, rgba(185,28,28,0.7), rgba(120,10,10,0.8));
color: #F5C842;
box-shadow: 0 2px 12px rgba(185,28,28,0.4), inset 0 1px 0 rgba(234,179,8,0.2);
text-shadow: 0 0 8px rgba(234,179,8,0.4);
}
.azura-tab:not(.active):hover {
background: rgba(185,28,28,0.12);
color: rgba(200,180,150,0.8);
}
/* — Form — */
.azura-form-group { margin-bottom: 16px; }
.azura-label {
display: flex; align-items: center; gap: 6px;
font-size: 10px;
font-family: 'Cinzel', serif;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(234,179,8,0.7);
margin-bottom: 7px;
}
.azura-label-icon { font-size: 11px; opacity: 0.8; }
.azura-input {
width: 100%;
background: rgba(5,3,8,0.8);
border: 1px solid rgba(234,179,8,0.12);
border-radius: 10px;
padding: 11px 14px;
color: #E8E0D0;
font-size: 14px;
font-family: 'Inter', sans-serif;
outline: none;
transition: all 0.25s;
box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
}
.azura-input::placeholder { color: rgba(120,100,80,0.5); }
.azura-input:focus {
border-color: rgba(185,28,28,0.6);
box-shadow: 0 0 0 3px rgba(185,28,28,0.1), inset 0 2px 6px rgba(0,0,0,0.4);
background: rgba(8,3,5,0.9);
}
.azura-input:focus::placeholder { color: rgba(120,100,80,0.3); }
.azura-error {
display: none;
color: #ff6b6b;
font-size: 11px;
margin-top: 5px;
padding-left: 2px;
font-family: 'Inter', sans-serif;
}
.azura-error.show { display: block; animation: authBoxIn 0.2s ease; }
/* — Primary Button — */
.azura-btn-primary {
width: 100%;
padding: 13px;
border-radius: 10px;
border: none;
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
cursor: pointer;
background: linear-gradient(135deg, #B91C1C 0%, #991B1B 40%, #7F1D1D 100%);
color: #FEF3C7;
position: relative;
overflow: hidden;
transition: all 0.25s;
box-shadow: 0 4px 16px rgba(185,28,28,0.35), inset 0 1px 0 rgba(255,255,255,0.1);
animation: crimsonPulse 3s ease-in-out infinite;
margin-top: 6px;
}
.azura-btn-primary::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(234,179,8,0.08) 50%, transparent 100%);
opacity: 0; transition: opacity 0.3s;
}
.azura-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(185,28,28,0.55); }
.azura-btn-primary:hover::before { opacity: 1; }
.azura-btn-primary:active { transform: translateY(0); }
.azura-btn-loading { pointer-events: none; opacity: 0.7; }
.azura-btn-loading::after {
content: '';
display: inline-block;
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spinAuth 0.6s linear infinite;
vertical-align: middle;
margin-left: 8px;
}
/* — Separator — */
.azura-separator { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; }
.azura-separator-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(234,179,8,0.15), transparent); }
.azura-separator-text { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: rgba(150,130,100,0.6); font-family: 'Cinzel', serif; white-space: nowrap; }
/* — Social Buttons — */
.azura-social-row { display: flex; gap: 8px; margin-bottom: 4px; }
.azura-social-btn {
flex: 1;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
padding: 10px 6px;
border-radius: 10px;
border: 1px solid rgba(234,179,8,0.12);
background: rgba(0,0,0,0.5);
color: rgba(220,200,170,0.85);
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.25s;
position: relative; overflow: hidden;
}
.azura-social-btn::after { content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity 0.25s; }
.azura-social-btn:hover { transform: translateY(-2px); }
.azura-social-btn.google { border-color: rgba(66,133,244,0.25); }
.azura-social-btn.google::after { background: linear-gradient(135deg, rgba(66,133,244,0.10), rgba(52,168,83,0.08)); }
.azura-social-btn.google:hover { border-color: rgba(66,133,244,0.50); box-shadow: 0 4px 16px rgba(66,133,244,0.20); }
.azura-social-btn.google:hover::after { opacity: 1; }
.azura-social-btn.yandex { border-color: rgba(255,204,0,0.20); }
.azura-social-btn.yandex::after { background: linear-gradient(135deg, rgba(255,50,50,0.10), rgba(255,204,0,0.08)); }
.azura-social-btn.yandex:hover { border-color: rgba(255,204,0,0.45); box-shadow: 0 4px 16px rgba(255,50,50,0.20); }
.azura-social-btn.yandex:hover::after { opacity: 1; }
.azura-social-btn.telegram { border-color: rgba(0,136,204,0.25); }
.azura-social-btn.telegram::after { background: linear-gradient(135deg, rgba(0,136,204,0.12), rgba(40,160,220,0.06)); }
.azura-social-btn.telegram:hover { border-color: rgba(0,136,204,0.55); box-shadow: 0 4px 16px rgba(0,136,204,0.25); }
.azura-social-btn.telegram:hover::after { opacity: 1; }
.azura-social-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 6px; position: relative; z-index: 1; }
.azura-social-label { font-size: 9px; letter-spacing: 0.5px; position: relative; z-index: 1; font-weight: 600; }
/* — Unique ID Box — */
.azura-id-box {
display: none;
margin-top: 18px;
background: linear-gradient(135deg, rgba(5,3,8,0.95), rgba(10,5,5,0.98));
border: 1px solid rgba(234,179,8,0.35);
border-radius: 12px;
padding: 16px 14px;
text-align: center;
box-shadow: 0 0 20px rgba(234,179,8,0.08), inset 0 1px 0 rgba(234,179,8,0.1);
}
.azura-id-box.show { display: block; animation: idAppearAuth 0.4s cubic-bezier(0.22,1,0.36,1); }
.azura-id-label { font-size: 9px; font-family: 'Cinzel', serif; letter-spacing: 3px; text-transform: uppercase; color: rgba(150,130,90,0.8); margin-bottom: 8px; }
.azura-id-value {
font-family: 'Cinzel', serif;
font-size: 20px; font-weight: 700; letter-spacing: 4px;
background: linear-gradient(135deg, #EAB308, #F5C842, #D4AF37);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
filter: drop-shadow(0 0 6px rgba(234,179,8,0.4));
}
.azura-id-note { font-size: 10px; color: rgba(100,80,60,0.8); margin-top: 8px; line-height: 1.5; }
.azura-id-copy-btn {
display: inline-flex; align-items: center; gap: 5px;
margin-top: 10px; padding: 5px 14px;
background: rgba(234,179,8,0.1);
border: 1px solid rgba(234,179,8,0.3);
border-radius: 6px;
color: rgba(234,179,8,0.8);
font-size: 10px; font-family: 'Cinzel', serif; letter-spacing: 1px;
cursor: pointer; transition: all 0.2s;
}
.azura-id-copy-btn:hover { background: rgba(234,179,8,0.2); color: #F5C842; }
/* — Security & Footer — */
.azura-security {
display: flex; align-items: center; justify-content: center; gap: 5px;
margin-top: 14px; font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase;
color: rgba(80,100,80,0.7); font-family: 'Cinzel', serif;
}
.azura-footer-note { text-align: center; font-size: 10px; color: rgba(90,75,60,0.7); margin-top: 16px; line-height: 1.5; }
.azura-footer-note a { color: rgba(185,28,28,0.7); text-decoration: none; cursor: pointer; }
.azura-footer-note a:hover { color: rgba(185,28,28,1); }
/* ═══════════════════════════════════════════════════════════
DETAIL PAGE — ADMIN CONTROL PANEL (TABBED)
═══════════════════════════════════════════════════════════ */
/* Panel wrapper */
#detail-admin-panel {
margin: 0 16px 32px;
border-radius: 18px;
overflow: hidden;
border: 1px solid rgba(212,175,55,0.22);
background: linear-gradient(160deg, rgba(12,8,20,0.99) 0%, rgba(18,10,28,0.99) 100%);
box-shadow: 0 10px 50px rgba(139,0,0,0.18), 0 0 0 1px rgba(212,175,55,0.05);
}
/* Panel header */
.dap-header {
background: linear-gradient(90deg, rgba(120,0,0,0.5) 0%, rgba(212,175,55,0.14) 100%);
padding: 14px 18px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(212,175,55,0.18);
}
.dap-header-left { display: flex; align-items: center; gap: 10px; }
.dap-header-icon {
width: 32px; height: 32px;
border-radius: 10px;
background: linear-gradient(135deg, var(--crimson), var(--crimson-light));
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(139,0,0,0.5);
}
.dap-header-title {
font-family: 'Cinzel', serif;
font-size: 13px; font-weight: 700;
background: linear-gradient(90deg, var(--gold-light), var(--gold));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
letter-spacing: 1px;
}
.dap-header-sub { font-size: 9px; color: var(--text-muted); margin-top: 1px; }
.dap-role-badge {
padding: 3px 10px; border-radius: 20px;
font-size: 9px; font-weight: 700;
font-family: 'Cinzel', serif; letter-spacing: 1px;
}
.dap-role-badge.owner {
background: rgba(212,175,55,0.18);
color: var(--gold);
border: 1px solid rgba(212,175,55,0.35);
}
.dap-role-badge.admin {
background: rgba(233,30,140,0.12);
color: #e91e8c;
border: 1px solid rgba(233,30,140,0.3);
}
/* Tab bar */
.dap-tabs {
display: flex;
border-bottom: 1px solid rgba(212,175,55,0.1);
background: rgba(0,0,0,0.2);
}
.dap-tab {
flex: 1;
padding: 11px 8px;
font-family: 'Cinzel', serif;
font-size: 9px; font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-muted);
text-align: center;
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.22s;
display: flex; align-items: center; justify-content: center; gap: 5px;
white-space: nowrap;
}
.dap-tab:hover { color: var(--text-dim); background: rgba(212,175,55,0.04); }
.dap-tab.active {
color: var(--gold-light);
border-bottom-color: var(--gold);
background: rgba(212,175,55,0.07);
}
.dap-tab svg { width: 12px; height: 12px; fill: currentColor; flex-shrink: 0; }
/* Tab content */
.dap-body { padding: 18px; }
.dap-tab-pane { display: none; }
.dap-tab-pane.active { display: block; }
/* ─── Tab 1: Bob qo'shish ─── */
.dap-content-type-filter {
display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.dap-ctype-btn {
padding: 5px 12px;
border-radius: 20px;
border: 1px solid var(--border);
background: var(--dark4);
color: var(--text-dim);
font-family: 'Cinzel', serif;
font-size: 9px; font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.18s;
}
.dap-ctype-btn:hover { border-color: rgba(212,175,55,0.3); color: var(--text); }
.dap-ctype-btn.active {
background: linear-gradient(135deg, rgba(139,0,0,0.5), rgba(196,30,58,0.3));
border-color: rgba(196,30,58,0.6);
color: white;
box-shadow: 0 2px 10px rgba(139,0,0,0.3);
}
.dap-form-grid { display: grid; grid-template-columns: 80px 1fr; gap: 10px; margin-bottom: 12px; }
.dap-form-group { margin-bottom: 12px; }
.dap-label {
display: block; font-size: 9px; color: var(--text-muted);
letter-spacing: 2px; text-transform: uppercase;
font-family: 'Cinzel', serif; margin-bottom: 5px;
}
.dap-input {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 8px;
padding: 9px 12px;
color: var(--text);
font-size: 12px;
font-family: 'Inter', sans-serif;
outline: none;
transition: border-color 0.2s;
}
.dap-input:focus { border-color: rgba(212,175,55,0.45); }
.dap-input::placeholder { color: var(--text-muted); }
/* Access type buttons */
.dap-access-row { display: flex; gap: 8px; margin-bottom: 14px; }
.dap-access-btn {
flex: 1; padding: 8px 6px;
border-radius: 8px;
border: 1px solid rgba(212,175,55,0.2);
background: rgba(255,255,255,0.03);
color: var(--text-dim);
font-family: 'Cinzel', serif;
font-size: 9px; font-weight: 700;
cursor: pointer; transition: all 0.18s;
text-align: center;
}
.dap-access-btn:hover { border-color: rgba(212,175,55,0.4); color: var(--text); }
.dap-access-btn.active-free { background: rgba(34,197,94,0.15); border-color: #22c55e; color: #4ade80; }
.dap-access-btn.active-vip { background: rgba(212,175,55,0.15); border-color: var(--gold); color: var(--gold-light); }
.dap-access-btn.active-coin { background: rgba(234,179,8,0.15); border-color: #eab308; color: #facc15; }
/* PDF Upload zone */
.dap-pdf-zone {
border: 2px dashed rgba(212,175,55,0.2);
border-radius: 10px;
padding: 20px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: rgba(212,175,55,0.02);
margin-bottom: 14px;
}
.dap-pdf-zone:hover { border-color: rgba(212,175,55,0.45); background: rgba(212,175,55,0.06); }
.dap-pdf-zone.has-file { border-color: rgba(139,0,0,0.5); background: rgba(139,0,0,0.07); }
.dap-pdf-icon { font-size: 28px; margin-bottom: 6px; }
.dap-pdf-text { font-size: 11px; color: var(--text-dim); }
.dap-pdf-sub { font-size: 9px; color: var(--text-muted); margin-top: 3px; }
/* Submit btn */
.dap-submit-btn {
width: 100%;
padding: 12px;
border-radius: 10px;
border: none;
background: linear-gradient(135deg, var(--crimson) 0%, var(--crimson-light) 100%);
color: white;
font-family: 'Cinzel', serif;
font-size: 12px; font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.22s;
display: flex; align-items: center; justify-content: center; gap: 8px;
box-shadow: 0 4px 18px rgba(139,0,0,0.35);
}
.dap-submit-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(139,0,0,0.5);
}
/* ─── Tab 2: Boblar ro'yxati ─── */
.dap-chapters-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; }
.dap-chapters-table th {
font-size: 8px; color: var(--text-muted);
text-transform: uppercase; letter-spacing: 2px;
font-family: 'Cinzel', serif;
padding: 0 10px 8px; text-align: left;
border-bottom: 1px solid rgba(212,175,55,0.1);
}
.dap-ch-row {
background: rgba(255,255,255,0.03);
border-radius: 8px;
transition: all 0.18s;
}
.dap-ch-row:hover { background: rgba(212,175,55,0.05); }
.dap-ch-row td {
padding: 9px 10px;
font-size: 11px; color: var(--text-dim);
vertical-align: middle;
}
.dap-ch-row td:first-child { border-radius: 8px 0 0 8px; }
.dap-ch-row td:last-child { border-radius: 0 8px 8px 0; }
.dap-ch-num {
font-family: 'Cinzel', serif; font-size: 10px;
color: var(--gold-dim); font-weight: 700; min-width: 28px;
}
.dap-ch-title { color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dap-access-tag {
display: inline-flex; align-items: center; gap: 3px;
padding: 2px 7px; border-radius: 10px;
font-size: 8px; font-weight: 700; font-family: 'Cinzel', serif;
}
.dap-access-tag.free { background: rgba(34,197,94,0.12); color: #4ade80; border: 1px solid rgba(34,197,94,0.25); }
.dap-access-tag.vip { background: rgba(212,175,55,0.12); color: var(--gold-light); border: 1px solid rgba(212,175,55,0.25); }
.dap-access-tag.coin { background: rgba(234,179,8,0.12); color: #facc15; border: 1px solid rgba(234,179,8,0.25); }
.dap-ch-actions { display: flex; gap: 4px; }
.dap-btn-edit, .dap-btn-del {
padding: 4px 8px; border-radius: 6px;
font-size: 10px; cursor: pointer; transition: all 0.15s; border: 1px solid;
}
.dap-btn-edit { background: rgba(212,175,55,0.1); border-color: rgba(212,175,55,0.3); color: var(--gold-light); }
.dap-btn-edit:hover { background: rgba(212,175,55,0.25); }
.dap-btn-del { background: rgba(139,0,0,0.15); border-color: rgba(139,0,0,0.4); color: #ff8080; }
.dap-btn-del:hover { background: rgba(139,0,0,0.35); }
.dap-empty-state {
text-align: center; padding: 28px 16px;
border: 1px dashed rgba(212,175,55,0.15); border-radius: 10px;
}
.dap-empty-icon { font-size: 32px; margin-bottom: 8px; }
.dap-empty-text { font-size: 12px; color: var(--text-muted); }
.dap-empty-sub { font-size: 10px; color: var(--text-muted); opacity: 0.6; margin-top: 4px; }
/* ─── Tab 3: VIP/Coin sozlamalari ─── */
.dap-vip-ch-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.02);
margin-bottom: 8px;
transition: all 0.18s;
}
.dap-vip-ch-item:hover { border-color: rgba(212,175,55,0.25); }
.dap-vip-ch-num { font-family: 'Cinzel', serif; font-size: 10px; color: var(--gold-dim); min-width: 30px; font-weight: 700; }
.dap-vip-ch-title { flex: 1; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dap-vip-select {
background: var(--dark4); border: 1px solid rgba(212,175,55,0.2);
border-radius: 6px; padding: 5px 8px;
color: var(--text); font-size: 10px;
font-family: 'Cinzel', serif; cursor: pointer; outline: none;
}
.dap-coin-input {
width: 60px; background: var(--dark4);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 6px; padding: 5px 8px;
color: var(--text); font-size: 10px; outline: none;
font-family: 'Inter', sans-serif;
}
/* ─── Tab 4: Jadval (Schedule) ─── */
.dap-schedule-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: 10px;
border: 1px solid var(--border);
background: rgba(255,255,255,0.02);
margin-bottom: 8px;
}
.dap-schedule-date {
background: var(--dark4); border: 1px solid rgba(212,175,55,0.2);
border-radius: 6px; padding: 5px 8px;
color: var(--text); font-size: 10px; outline: none;
font-family: 'Inter', sans-serif;
color-scheme: dark;
}
/* Stats row in admin panel */
.dap-stats-row {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.06);
margin-top: 14px;
}
.dap-stat-card {
text-align: center; padding: 10px 8px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
border: 1px solid var(--border);
}
.dap-stat-val { font-size: 16px; font-weight: 700; font-family: 'Cinzel', serif; }
.dap-stat-lbl { font-size: 9px; color: var(--text-muted); margin-top: 2px; letter-spacing: 1px; }
/* Desktop: wider admin panel */
@media (min-width: 768px) {
#detail-admin-panel { margin: 0 32px 32px !important; }
.dap-form-grid { grid-template-columns: 90px 1fr; }
.dap-tabs .dap-tab { font-size: 10px; padding: 12px 10px; }
}
@media (min-width: 1200px) {
#detail-admin-panel { margin: 0 48px 32px !important; }
}
/* ═══════════════════════════════════════════════════════════════
18+ VIP PREMIUM SECTION — ULTRA DARK FANTASY
Deep crimson void, blood gold, forbidden darkness
═══════════════════════════════════════════════════════════════ */
/* Enhanced variables for 18+ realm */
:root {
--abyss: #020205;
--void-deep: #06010A;
--blood: #6B0000;
--blood-light: #9B0A1A;
--blood-bright: #C41230;
--blood-glow: rgba(155,10,26,0.5);
--scarlet: #FF1744;
--obsidian: #080810;
--obsidian2: #0C0C18;
--obsidian3: #100A16;
--obisidian4: #160C1E;
--forbidden-gold: #C9963A;
--forbidden-gold-bright: #F0B840;
--forbidden-gold-glow: rgba(201,150,58,0.4);
--rose-deep: #8B1A3A;
--rose-bright: #D4245A;
--rose-glow: rgba(212,36,90,0.4);
--petal: #FF4D7A;
--adult-bg: #070209;
--adult-border: rgba(155,10,26,0.35);
--adult-border-bright: rgba(201,150,58,0.45);
--adult-text: #E8D8D0;
--adult-text-dim: #9A7878;
--adult-text-muted: #5C3840;
}
/* ── 18+ Page background ──────────────────────────────────────── */
#page-adult {
background: var(--abyss);
}
#page-adult .main-content {
background:
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(155,10,26,0.18) 0%, transparent 60%),
radial-gradient(ellipse 40% 30% at 10% 90%, rgba(106,0,0,0.12) 0%, transparent 50%),
radial-gradient(ellipse 50% 40% at 90% 20%, rgba(139,26,58,0.10) 0%, transparent 50%),
var(--abyss);
}
/* ── Premium Age Verification Gate ───────────────────────────── */
.adult-gate {
display: flex; flex-direction: column; align-items: center;
justify-content: center; padding: 60px 24px;
min-height: 70vh; text-align: center;
position: relative;
}
.adult-gate::before {
content: '';
position: absolute; inset: 0;
background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(155,10,26,0.15) 0%, transparent 70%);
pointer-events: none;
}
/* Lock icon redesign */
.adult-gate-lock-wrap {
position: relative; margin-bottom: 28px;
width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center;
}
.adult-gate-lock-glow {
position: absolute; inset: -12px;
border-radius: 50%;
background: radial-gradient(circle, rgba(155,10,26,0.35) 0%, transparent 70%);
animation: lockPulse 3s ease-in-out infinite;
}
@keyframes lockPulse {
0%, 100% { opacity: 0.5; transform: scale(0.9); }
50% { opacity: 1; transform: scale(1.1); }
}
.adult-gate-lock-ring {
position: absolute; inset: 0;
border-radius: 50%;
border: 1px solid rgba(201,150,58,0.3);
animation: ringRotate 8s linear infinite;
}
.adult-gate-lock-ring::before {
content: '';
position: absolute; top: -3px; left: 50%; transform: translateX(-50%);
width: 6px; height: 6px; border-radius: 50%;
background: var(--forbidden-gold-bright);
box-shadow: 0 0 8px var(--forbidden-gold-glow);
}
@keyframes ringRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.adult-gate-lock-icon {
width: 70px; height: 70px;
background: radial-gradient(135deg, rgba(155,10,26,0.5), rgba(6,1,10,0.9));
border: 1px solid rgba(155,10,26,0.6);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 28px;
box-shadow: 0 0 30px rgba(155,10,26,0.4), inset 0 0 20px rgba(0,0,0,0.5);
position: relative; z-index: 1;
}
/* Gate title */
.adult-gate-eyebrow {
font-size: 9px; letter-spacing: 6px; text-transform: uppercase;
color: var(--blood-light); margin-bottom: 8px;
font-family: 'Cinzel', serif;
}
.adult-gate-title {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(22px, 5vw, 32px);
font-weight: 900;
background: linear-gradient(135deg, var(--forbidden-gold-bright), var(--forbidden-gold), var(--blood-bright));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 16px;
letter-spacing: 2px;
line-height: 1.2;
}
.adult-gate-sub {
font-size: 13px; color: var(--adult-text-dim);
line-height: 1.8; max-width: 360px; margin-bottom: 28px;
}
.adult-gate-divider {
width: 120px; height: 1px;
background: linear-gradient(90deg, transparent, rgba(201,150,58,0.5), transparent);
margin: 0 auto 28px;
}
.adult-vip-required {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(201,150,58,0.08);
border: 1px solid rgba(201,150,58,0.3);
border-radius: 8px; padding: 10px 20px;
font-size: 12px; font-weight: 700; color: var(--forbidden-gold);
font-family: 'Cinzel', serif; letter-spacing: 1px;
margin-bottom: 24px;
}
.vip-cta-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; max-width: 280px; padding: 14px 28px;
background: linear-gradient(135deg, var(--blood), var(--blood-light), var(--rose-deep));
border: none; border-radius: 10px;
color: white; font-size: 13px; font-weight: 700;
font-family: 'Cinzel', serif; letter-spacing: 2px;
cursor: pointer; transition: all 0.3s;
box-shadow: 0 4px 24px rgba(155,10,26,0.5);
position: relative; overflow: hidden;
}
.vip-cta-btn::before {
content: ''; position: absolute; inset: 0;
background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%);
transform: translateX(-100%); transition: transform 0.5s;
}
.vip-cta-btn:hover::before { transform: translateX(100%); }
.vip-cta-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(155,10,26,0.6);
}
/* ── 18+ Hero Banner (VIP view) ───────────────────────────────── */
.adult-hero-banner {
padding: 36px 20px 32px;
background: linear-gradient(160deg, var(--void-deep), var(--obsidian3), var(--blood) 200%);
position: relative; overflow: hidden;
border-bottom: 1px solid var(--adult-border);
}
@media(min-width:768px) { .adult-hero-banner { padding: 52px 40px 44px; } }
.adult-hero-banner::before {
content: '';
position: absolute; inset: 0;
background:
radial-gradient(ellipse 70% 80% at 80% 50%, rgba(201,150,58,0.08) 0%, transparent 60%),
radial-gradient(ellipse 50% 60% at 10% 50%, rgba(155,10,26,0.2) 0%, transparent 60%);
pointer-events: none;
}
.adult-hero-banner::after {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--blood-light), var(--forbidden-gold-bright), var(--blood-light), transparent);
}
/* Floating rune particles */
.adult-rune-particle {
position: absolute;
font-family: 'Cinzel', serif; font-size: 18px;
color: rgba(201,150,58,0.08);
pointer-events: none;
animation: runeFloat 8s ease-in-out infinite;
}
@keyframes runeFloat {
0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.05; }
50% { transform: translateY(-20px) rotate(10deg); opacity: 0.12; }
}
.adult-badge-row {
display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
position: relative; z-index: 1;
}
.adult-18-badge {
background: rgba(155,10,26,0.3);
border: 1px solid rgba(155,10,26,0.6);
border-radius: 6px; padding: 3px 10px;
font-size: 12px; font-weight: 900;
color: var(--petal); font-family: 'Cinzel', serif;
letter-spacing: 2px;
box-shadow: 0 0 12px rgba(155,10,26,0.3);
}
.adult-vip-pill {
display: inline-flex; align-items: center; gap: 5px;
background: rgba(201,150,58,0.12);
border: 1px solid rgba(201,150,58,0.4);
border-radius: 20px; padding: 3px 10px;
font-size: 9px; font-weight: 800; color: var(--forbidden-gold-bright);
font-family: 'Cinzel', serif; letter-spacing: 2px;
}
.adult-hero-title {
font-family: 'Cinzel Decorative', cursive;
font-size: clamp(20px, 4.5vw, 36px);
font-weight: 900; line-height: 1.2;
background: linear-gradient(135deg, var(--forbidden-gold-bright) 0%, var(--petal) 50%, var(--forbidden-gold) 100%);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 12px; position: relative; z-index: 1;
letter-spacing: 1px;
}
.adult-hero-sub {
font-size: 12px; color: var(--adult-text-dim);
line-height: 1.8; max-width: 500px;
position: relative; z-index: 1;
}
/* Category filters */
.adult-filters {
display: flex; gap: 8px; overflow-x: auto;
padding: 16px 20px 4px;
scrollbar-width: none;
}
.adult-filters::-webkit-scrollbar { display: none; }
.adult-filter-chip {
flex-shrink: 0; padding: 6px 14px;
border-radius: 20px; font-size: 10px; font-weight: 700;
font-family: 'Cinzel', serif; letter-spacing: 1px;
cursor: pointer; transition: all 0.2s;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.1);
color: var(--adult-text-dim);
}
.adult-filter-chip.active,
.adult-filter-chip:hover {
background: rgba(155,10,26,0.2);
border-color: rgba(155,10,26,0.5);
color: var(--petal);
}
/* ── Section headers ─────────────────────────────────────────── */
.adult-grid-section { padding: 22px 16px 4px; }
@media(min-width:768px) { .adult-grid-section { padding: 28px 32px 8px; } }
.adult-section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 14px;
}
.adult-section-title {
display: flex; align-items: center; gap: 8px;
font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
color: var(--adult-text); letter-spacing: 1px;
}
.adult-section-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--rose-bright);
box-shadow: 0 0 8px var(--rose-glow);
animation: adultDot 2.5s ease-in-out infinite;
}
@keyframes adultDot { 0%,100%{ opacity:0.5; } 50%{ opacity:1; box-shadow:0 0 14px var(--rose-glow); } }
.adult-section-see-all {
font-size: 10px; color: var(--forbidden-gold);
font-family: 'Cinzel', serif; cursor: pointer;
opacity: 0.7; transition: opacity 0.2s;
}
.adult-section-see-all:hover { opacity: 1; }
/* ── Adult Cards ─────────────────────────────────────────────── */
.adult-scroll-row {
display: flex; gap: 12px;
overflow-x: auto; overflow-y: hidden;
padding-bottom: 16px; cursor: grab;
scrollbar-width: none;
}
.adult-scroll-row::-webkit-scrollbar { display: none; }
.adult-scroll-row:active { cursor: grabbing; }
.adult-card {
flex-shrink: 0; width: 130px; cursor: pointer;
transition: transform 0.25s, filter 0.25s;
position: relative;
}
@media(min-width:768px) { .adult-card { width: 155px; } }
.adult-card:hover { transform: translateY(-5px); }
.adult-card:hover .adult-card-thumb {
box-shadow: 0 8px 30px rgba(155,10,26,0.5);
}
.adult-card-thumb {
width: 100%; aspect-ratio: 2/3;
border-radius: 10px;
background: var(--obsidian3);
overflow: hidden; position: relative;
border: 1px solid rgba(155,10,26,0.25);
transition: box-shadow 0.25s;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.adult-card-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.35s; filter: brightness(0.9) saturate(1.1);
}
.adult-card:hover .adult-card-thumb img { transform: scale(1.06); }
/* 18+ watermark */
.adult-card-thumb::before {
content: '18+';
position: absolute; top: 8px; left: 8px; z-index: 2;
background: rgba(155,10,26,0.85);
color: white; font-size: 8px; font-weight: 900;
font-family: 'Cinzel', serif; letter-spacing: 1px;
padding: 2px 6px; border-radius: 4px;
border: 1px solid rgba(255,255,255,0.15);
}
/* Genre tag */
.adult-card-genre {
position: absolute; top: 8px; right: 8px; z-index: 2;
background: rgba(6,1,10,0.75);
border: 1px solid rgba(201,150,58,0.3);
border-radius: 4px; padding: 2px 5px;
font-size: 7px; font-weight: 700; color: var(--forbidden-gold);
font-family: 'Cinzel', serif; letter-spacing: 1px;
text-transform: uppercase;
}
.adult-card-overlay {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(6,1,10,0.97) 0%, rgba(6,1,10,0.7) 50%, transparent 100%);
padding: 28px 8px 8px;
}
.adult-card-title {
font-size: 10px; font-weight: 600; color: var(--adult-text);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: 'Cinzel', serif; letter-spacing: 0.3px;
}
.adult-card-rating {
font-size: 9px; color: var(--petal);
display: flex; align-items: center; gap: 3px; margin-top: 3px;
}
/* ── New/Hot badge variants ───────────────────────────────────── */
.adult-card-badge-new {
position: absolute; top: 8px; right: 8px; z-index: 3;
background: linear-gradient(135deg, var(--blood-light), var(--rose-deep));
color: white; font-size: 7px; font-weight: 900;
font-family: 'Cinzel', serif; letter-spacing: 1px;
padding: 2px 6px; border-radius: 4px;
text-transform: uppercase;
box-shadow: 0 2px 8px rgba(155,10,26,0.5);
}
.adult-card-badge-hot {
position: absolute; top: 8px; right: 8px; z-index: 3;
background: linear-gradient(135deg, var(--forbidden-gold), var(--blood-light));
color: white; font-size: 7px; font-weight: 900;
font-family: 'Cinzel', serif; letter-spacing: 1px;
padding: 2px 6px; border-radius: 4px;
text-transform: uppercase;
}
/* ── Section divider ─────────────────────────────────────────── */
.adult-section-divider {
height: 1px; margin: 0 20px;
background: linear-gradient(90deg, transparent, rgba(155,10,26,0.3), rgba(201,150,58,0.15), rgba(155,10,26,0.3), transparent);
}
/* ── Featured spotlight card ─────────────────────────────────── */
.adult-spotlight {
margin: 24px 16px 8px;
border-radius: 14px;
background: linear-gradient(135deg, var(--obsidian3), var(--obisidian4));
border: 1px solid var(--adult-border);
overflow: hidden; position: relative;
cursor: pointer; transition: all 0.3s;
}
@media(min-width:768px) { .adult-spotlight { margin: 28px 32px 8px; } }
.adult-spotlight:hover {
border-color: rgba(201,150,58,0.3);
box-shadow: 0 8px 40px rgba(155,10,26,0.3);
}
.adult-spotlight-inner {
display: flex; gap: 0; min-height: 140px;
}
.adult-spotlight-cover {
width: 100px; flex-shrink: 0;
background: var(--obsidian);
position: relative; overflow: hidden;
}
.adult-spotlight-cover img {
width: 100%; height: 100%; object-fit: cover;
filter: brightness(0.85) saturate(1.2);
}
.adult-spotlight-cover::after {
content: '';
position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
background: linear-gradient(to right, transparent, var(--obsidian3));
}
.adult-spotlight-info {
flex: 1; padding: 18px 16px; position: relative;
}
.adult-spotlight-label {
font-size: 8px; letter-spacing: 4px; text-transform: uppercase;
color: var(--rose-bright); font-family: 'Cinzel', serif;
margin-bottom: 6px;
}
.adult-spotlight-title {
font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
color: var(--adult-text); margin-bottom: 8px; line-height: 1.3;
}
.adult-spotlight-desc {
font-size: 11px; color: var(--adult-text-dim); line-height: 1.7;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.adult-spotlight-meta {
display: flex; align-items: center; gap: 10px; margin-top: 12px;
}
.adult-spotlight-rating {
font-size: 10px; color: var(--forbidden-gold);
display: flex; align-items: center; gap: 3px;
}
.adult-spotlight-read-btn {
padding: 5px 14px; border-radius: 6px;
background: rgba(155,10,26,0.3);
border: 1px solid rgba(155,10,26,0.5);
color: var(--petal); font-size: 10px; font-weight: 700;
font-family: 'Cinzel', serif; cursor: pointer;
letter-spacing: 1px; transition: all 0.2s;
}
.adult-spotlight-read-btn:hover {
background: rgba(155,10,26,0.5);
box-shadow: 0 2px 12px rgba(155,10,26,0.4);
}
/* ── Topbar for adult page ───────────────────────────────────── */
#page-adult .mobile-topbar,
#page-adult .desktop-topbar {
background: rgba(6,1,10,0.97);
border-bottom-color: rgba(155,10,26,0.3);
}
/* ═══════════════════════════════════════════════════════════════
18+ ADMIN PANEL — OWNER & AUTHORIZED ADMINS ONLY
═══════════════════════════════════════════════════════════════ */
/* ── Full-screen 18+ Admin overlay ──────────────────────────── */
.adult-admin-overlay {
display: none;
position: fixed; inset: 0; z-index: 300;
background: rgba(2,2,5,0.97);
backdrop-filter: blur(8px);
flex-direction: column;
overflow: hidden;
}
.adult-admin-overlay.open { display: flex; }
/* Top chrome */
.aap-topbar {
height: 56px; flex-shrink: 0;
display: flex; align-items: center; gap: 12px;
padding: 0 20px;
background: var(--obsidian);
border-bottom: 1px solid var(--adult-border-bright);
position: relative;
}
.aap-topbar::after {
content: '';
position: absolute; bottom: -1px; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--blood-light), var(--forbidden-gold-bright), var(--blood-light), transparent);
}
.aap-logo-wrap {
display: flex; align-items: center; gap: 8px;
}
.aap-logo-icon {
width: 30px; height: 30px; border-radius: 8px;
background: linear-gradient(135deg, var(--blood), var(--rose-deep));
display: flex; align-items: center; justify-content: center;
font-size: 14px;
box-shadow: 0 0 12px rgba(155,10,26,0.4);
}
.aap-logo-text {
font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
background: linear-gradient(135deg, var(--forbidden-gold-bright), var(--petal));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text; letter-spacing: 2px;
}
.aap-role-chip {
padding: 3px 10px; border-radius: 4px;
font-size: 8px; font-weight: 800; letter-spacing: 2px;
font-family: 'Cinzel', serif;
}
.aap-role-chip.owner {
background: rgba(201,150,58,0.15);
border: 1px solid rgba(201,150,58,0.5);
color: var(--forbidden-gold-bright);
}
.aap-role-chip.admin {
background: rgba(155,10,26,0.15);
border: 1px solid rgba(155,10,26,0.5);
color: var(--petal);
}
.aap-close-btn {
margin-left: auto;
width: 34px; height: 34px; border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: var(--adult-text-dim); font-size: 16px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.2s;
flex-shrink: 0;
}
.aap-close-btn:hover { background: rgba(155,10,26,0.2); color: var(--petal); border-color: rgba(155,10,26,0.4); }
/* Layout */
.aap-body {
display: flex; flex: 1; overflow: hidden;
min-height: 0;
}
/* Sidebar */
.aap-sidebar {
width: 200px; flex-shrink: 0;
background: var(--obsidian2);
border-right: 1px solid var(--adult-border);
display: flex; flex-direction: column;
overflow-y: auto; overflow-x: hidden;
}
@media(max-width:767px) {
.aap-sidebar { width: 56px; }
.aap-nav-label { display: none; }
.aap-nav-section { display: none; }
.aap-nav-item { justify-content: center; padding: 12px; }
}
.aap-nav-section {
font-size: 8px; letter-spacing: 3px; text-transform: uppercase;
color: var(--adult-text-muted); padding: 14px 16px 4px;
font-family: 'Cinzel', serif;
}
.aap-nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px; cursor: pointer;
color: var(--adult-text-dim); font-size: 12px; font-weight: 500;
transition: all 0.2s; border-left: 2px solid transparent;
position: relative;
}
.aap-nav-item:hover {
color: var(--adult-text);
background: rgba(155,10,26,0.06);
}
.aap-nav-item.active {
color: var(--petal);
background: rgba(155,10,26,0.12);
border-left-color: var(--rose-bright);
}
.aap-nav-item svg { flex-shrink: 0; opacity: 0.85; }
.aap-nav-badge {
margin-left: auto;
background: var(--blood-light); color: white;
font-size: 8px; padding: 1px 5px; border-radius: 8px; font-weight: 700;
}
/* Main content */
.aap-main {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: 20px 16px;
background: var(--adult-bg);
}
@media(min-width:768px) { .aap-main { padding: 24px 24px; } }
/* ── Stat cards row ──────────────────────────────────────────── */
.aap-stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
gap: 10px; margin-bottom: 22px;
}
.aap-stat-card {
background: var(--obsidian2);
border: 1px solid var(--adult-border);
border-radius: 12px; padding: 16px 14px;
text-align: center; transition: all 0.2s;
position: relative; overflow: hidden;
}
.aap-stat-card:hover {
border-color: rgba(155,10,26,0.4);
transform: translateY(-2px);
}
.aap-stat-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--stat-color, var(--blood-light));
opacity: 0.6;
}
.aap-stat-icon { font-size: 20px; margin-bottom: 6px; }
.aap-stat-val {
font-size: 20px; font-weight: 800;
font-family: 'Cinzel', serif;
color: var(--stat-color, var(--petal));
}
.aap-stat-label {
font-size: 9px; color: var(--adult-text-muted);
margin-top: 3px; letter-spacing: 1px; text-transform: uppercase;
}
/* ── Section titles ──────────────────────────────────────────── */
.aap-section-title {
font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
color: var(--adult-text); margin-bottom: 14px;
display: flex; align-items: center; gap: 8px;
}
.aap-section-title::before {
content: '';
width: 3px; height: 16px; border-radius: 2px;
background: linear-gradient(to bottom, var(--blood-bright), var(--rose-bright));
}
/* ── Content table ───────────────────────────────────────────── */
.aap-table-wrap {
background: var(--obsidian2);
border: 1px solid var(--adult-border);
border-radius: 12px; overflow: hidden;
margin-bottom: 20px;
}
.aap-table-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--adult-border);
background: rgba(0,0,0,0.3);
}
.aap-table-head-title {
font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
color: var(--forbidden-gold);
}
.aap-table-add-btn {
margin-left: auto;
display: flex; align-items: center; gap: 5px;
padding: 6px 14px; border-radius: 7px;
background: rgba(155,10,26,0.2);
border: 1px solid rgba(155,10,26,0.5);
color: var(--petal); font-size: 10px; font-weight: 700;
font-family: 'Cinzel', serif; cursor: pointer; transition: all 0.2s;
letter-spacing: 1px;
}
.aap-table-add-btn:hover { background: rgba(155,10,26,0.35); }
.aap-content-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.15s;
}
.aap-content-row:last-child { border-bottom: none; }
.aap-content-row:hover { background: rgba(155,10,26,0.05); }
.aap-content-thumb {
width: 44px; height: 60px; border-radius: 6px;
overflow: hidden; flex-shrink: 0;
background: var(--obsidian); position: relative;
border: 1px solid rgba(155,10,26,0.2);
}
.aap-content-thumb img { width:100%; height:100%; object-fit:cover; }
.aap-content-thumb-placeholder {
width:100%; height:100%;
display:flex; align-items:center; justify-content:center;
background: linear-gradient(135deg, var(--obsidian3), var(--obsidian));
font-size:16px;
}
.aap-content-meta { flex: 1; min-width: 0; }
.aap-content-title {
font-size: 12px; font-weight: 600; color: var(--adult-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-family: 'Cinzel', serif; margin-bottom: 3px;
}
.aap-content-sub {
font-size: 10px; color: var(--adult-text-muted);
display: flex; align-items: center; gap: 8px;
}
.aap-content-status {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px; border-radius: 8px;
font-size: 8px; font-weight: 700; font-family: 'Cinzel', serif;
}
.aap-content-status.active {
background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3);
color: #4ade80;
}
.aap-content-status.hidden {
background: rgba(155,10,26,0.1); border: 1px solid rgba(155,10,26,0.3);
color: var(--petal);
}
.aap-content-status.vip {
background: rgba(201,150,58,0.1); border: 1px solid rgba(201,150,58,0.3);
color: var(--forbidden-gold);
}
.aap-content-actions { display: flex; gap: 5px; flex-shrink: 0; }
.aap-action-icon-btn {
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.15s; font-size: 12px;
}
.aap-action-icon-btn.edit {
background: rgba(201,150,58,0.1);
border: 1px solid rgba(201,150,58,0.25);
color: var(--forbidden-gold);
}
.aap-action-icon-btn.edit:hover { background: rgba(201,150,58,0.25); }
.aap-action-icon-btn.del {
background: rgba(155,10,26,0.1);
border: 1px solid rgba(155,10,26,0.3);
color: var(--petal);
}
.aap-action-icon-btn.del:hover { background: rgba(155,10,26,0.3); }
.aap-action-icon-btn.view {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: var(--adult-text-dim);
}
.aap-action-icon-btn.view:hover { background: rgba(255,255,255,0.1); }
/* ── Add / Edit Modal ────────────────────────────────────────── */
.aap-modal-overlay {
display: none;
position: fixed; inset: 0; z-index: 400;
background: rgba(2,2,5,0.92);
backdrop-filter: blur(6px);
align-items: center; justify-content: center;
padding: 16px;
}
.aap-modal-overlay.open { display: flex; }
.aap-modal {
background: var(--obsidian2);
border: 1px solid var(--adult-border-bright);
border-radius: 14px;
width: 100%; max-width: 480px;
max-height: 90vh; overflow-y: auto;
position: relative;
box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 40px rgba(155,10,26,0.2);
}
.aap-modal::before {
content: '';
position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(90deg, transparent, var(--blood-light), var(--forbidden-gold-bright), var(--blood-light), transparent);
}
.aap-modal-header {
display: flex; align-items: center; gap: 10px;
padding: 18px 20px 14px;
border-bottom: 1px solid var(--adult-border);
}
.aap-modal-header-icon {
width: 32px; height: 32px; border-radius: 8px;
background: linear-gradient(135deg, var(--blood), var(--rose-deep));
display: flex; align-items: center; justify-content: center;
font-size: 14px;
box-shadow: 0 0 10px rgba(155,10,26,0.4);
}
.aap-modal-title {
font-family: 'Cinzel', serif; font-size: 14px; font-weight: 700;
background: linear-gradient(135deg, var(--forbidden-gold-bright), var(--petal));
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
}
.aap-modal-close {
margin-left: auto;
width: 30px; height: 30px; border-radius: 6px;
background: none; border: 1px solid rgba(255,255,255,0.1);
color: var(--adult-text-dim); font-size: 14px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.2s; flex-shrink: 0;
}
.aap-modal-close:hover { background: rgba(155,10,26,0.2); color: var(--petal); }
.aap-modal-body { padding: 18px 20px 20px; }
/* Form elements */
.aap-form-row { margin-bottom: 14px; }
.aap-form-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px;
color: var(--adult-text-muted); margin-bottom: 6px; display: block;
font-family: 'Cinzel', serif;
}
.aap-form-input, .aap-form-select, .aap-form-textarea {
width: 100%;
background: rgba(0,0,0,0.4);
border: 1px solid var(--adult-border);
border-radius: 8px; padding: 9px 12px;
color: var(--adult-text); font-size: 13px;
font-family: 'Inter', sans-serif;
outline: none; transition: border-color 0.2s;
color-scheme: dark;
}
.aap-form-input:focus,
.aap-form-select:focus,
.aap-form-textarea:focus { border-color: rgba(155,10,26,0.6); }
.aap-form-input::placeholder,
.aap-form-textarea::placeholder { color: var(--adult-text-muted); }
.aap-form-textarea { resize: vertical; min-height: 80px; }
.aap-form-select { cursor: pointer; }
.aap-form-row-2 {
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.aap-form-hint {
font-size: 10px; color: var(--adult-text-muted);
margin-top: 4px; line-height: 1.5;
}
/* Genre chips in form */
.aap-genre-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aap-genre-chip {
padding: 4px 10px; border-radius: 12px; font-size: 9px; font-weight: 700;
font-family: 'Cinzel', serif; cursor: pointer; transition: all 0.15s;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: var(--adult-text-muted);
}
.aap-genre-chip.selected {
background: rgba(155,10,26,0.2);
border-color: rgba(155,10,26,0.5);
color: var(--petal);
}
/* Save / Cancel buttons */
.aap-form-actions {
display: flex; gap: 10px; margin-top: 18px;
}
.aap-btn-save {
flex: 1; padding: 12px;
background: linear-gradient(135deg, var(--blood), var(--blood-light));
border: none; border-radius: 9px;
color: white; font-size: 12px; font-weight: 700;
font-family: 'Cinzel', serif; cursor: pointer;
letter-spacing: 2px; transition: all 0.2s;
box-shadow: 0 4px 16px rgba(155,10,26,0.4);
}
.aap-btn-save:hover {
transform: translateY(-1px);
box-shadow: 0 6px 22px rgba(155,10,26,0.55);
}
.aap-btn-cancel {
flex: 1; padding: 12px;
background: transparent;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 9px; color: var(--adult-text-dim);
font-size: 12px; font-weight: 600;
font-family: 'Cinzel', serif; cursor: pointer;
transition: all 0.2s;
}
.aap-btn-cancel:hover { background: rgba(255,255,255,0.05); }
/* ── Access manager table (user VIP access) ──────────────────── */
.aap-access-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid rgba(255,255,255,0.04);
transition: background 0.15s;
}
.aap-access-row:hover { background: rgba(255,255,255,0.02); }
.aap-access-avatar {
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--blood), var(--rose-deep));
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 700; color: white;
}
.aap-access-name {
flex: 1; min-width: 0;
}
.aap-access-username {
font-size: 12px; font-weight: 600; color: var(--adult-text);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aap-access-uid {
font-size: 9px; color: var(--adult-text-muted);
font-family: 'Cinzel', serif; letter-spacing: 1px;
}
.aap-access-toggle {
display: flex; align-items: center; gap: 6px;
cursor: pointer;
}
.aap-toggle-switch {
width: 36px; height: 20px; border-radius: 10px;
background: rgba(255,255,255,0.1);
position: relative; transition: background 0.25s;
border: 1px solid rgba(255,255,255,0.15);
flex-shrink: 0;
}
.aap-toggle-switch.on {
background: rgba(155,10,26,0.5);
border-color: rgba(155,10,26,0.7);
}
.aap-toggle-knob {
position: absolute; top: 2px; left: 2px;
width: 14px; height: 14px; border-radius: 50%;
background: white; transition: transform 0.25s;
box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.aap-toggle-switch.on .aap-toggle-knob { transform: translateX(16px); }
.aap-toggle-label {
font-size: 10px; font-weight: 700;
font-family: 'Cinzel', serif; letter-spacing: 1px;
color: var(--adult-text-dim);
}
/* ── Empty state ─────────────────────────────────────────────── */
.aap-empty {
text-align: center; padding: 40px 20px;
border: 1px dashed rgba(155,10,26,0.2);
border-radius: 12px; margin: 10px 0;
}
.aap-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: 0.5; }
.aap-empty-text { font-size: 13px; color: var(--adult-text-muted); font-family: 'Cinzel', serif; }
/* ── Search bar in admin ─────────────────────────────────────── */
.aap-search {
display: flex; align-items: center; gap: 0;
background: rgba(0,0,0,0.4);
border: 1px solid var(--adult-border);
border-radius: 9px; overflow: hidden;
margin-bottom: 14px;
}
.aap-search-icon { padding: 0 10px; color: var(--adult-text-muted); font-size: 14px; }
.aap-search input {
flex: 1; background: none; border: none; outline: none;
padding: 9px 10px 9px 0; color: var(--adult-text);
font-size: 13px; font-family: 'Inter', sans-serif;
}
.aap-search input::placeholder { color: var(--adult-text-muted); }
/* ── Quick action cards in dashboard ─────────────────────────── */
.aap-quick-actions {
display: grid; grid-template-columns: repeat(2,1fr); gap: 10px;
margin-bottom: 20px;
}
@media(min-width:768px) { .aap-quick-actions { grid-template-columns: repeat(4,1fr); } }
.aap-quick-card {
background: var(--obsidian2);
border: 1px solid var(--adult-border);
border-radius: 12px; padding: 16px 12px;
text-align: center; cursor: pointer;
transition: all 0.2s; position: relative; overflow: hidden;
}
.aap-quick-card:hover {
border-color: rgba(155,10,26,0.4);
background: rgba(155,10,26,0.06);
transform: translateY(-2px);
}
.aap-quick-card::before {
content: '';
position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
background: linear-gradient(90deg, var(--blood), var(--forbidden-gold-bright), var(--blood));
opacity: 0; transition: opacity 0.2s;
}
.aap-quick-card:hover::before { opacity: 1; }
.aap-quick-icon { font-size: 24px; margin-bottom: 8px; }
.aap-quick-label {
font-size: 11px; font-weight: 700; font-family: 'Cinzel', serif;
color: var(--adult-text); letter-spacing: 0.5px;
}
.aap-quick-sub { font-size: 9px; color: var(--adult-text-muted); margin-top: 2px; }
/* Trigger button in sidebar nav */
.nav-item-18plus {
position: relative;
}
.nav-item-18plus .nav-18-admin-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--rose-bright);
box-shadow: 0 0 6px var(--rose-glow);
animation: adultDot 2s ease-in-out infinite;
flex-shrink: 0;
}
/* Admin panel trigger button in admin panel */
.aap-open-btn {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 16px; border-radius: 8px;
background: linear-gradient(135deg, rgba(155,10,26,0.25), rgba(139,26,58,0.2));
border: 1px solid rgba(155,10,26,0.45);
color: var(--petal); font-size: 11px; font-weight: 700;
font-family: 'Cinzel', serif; cursor: pointer; transition: all 0.2s;
letter-spacing: 1px;
}
.aap-open-btn:hover {
background: rgba(155,10,26,0.35);
box-shadow: 0 3px 14px rgba(155,10,26,0.35);
}
/* ── Confirm delete dialog ───────────────────────────────────── */
.aap-confirm-overlay {
display: none;
position: fixed; inset: 0; z-index: 500;
background: rgba(2,2,5,0.9);
align-items: center; justify-content: center;
}
.aap-confirm-overlay.open { display: flex; }
.aap-confirm-box {
background: var(--obsidian2);
border: 1px solid rgba(155,10,26,0.6);
border-radius: 14px; padding: 28px 24px;
width: 90%; max-width: 340px; text-align: center;
box-shadow: 0 20px 50px rgba(0,0,0,0.7), 0 0 30px rgba(155,10,26,0.2);
}
.aap-confirm-icon { font-size: 36px; margin-bottom: 12px; }
.aap-confirm-title {
font-family: 'Cinzel', serif; font-size: 15px; font-weight: 700;
color: var(--petal); margin-bottom: 8px;
}
.aap-confirm-text {
font-size: 12px; color: var(--adult-text-dim); line-height: 1.7;
margin-bottom: 22px;
}
.aap-confirm-actions { display: flex; gap: 10px; }
.aap-confirm-del {
flex: 1; padding: 10px;
background: linear-gradient(135deg, var(--blood), var(--blood-light));
border: none; border-radius: 8px;
color: white; font-size: 12px; font-weight: 700;
font-family: 'Cinzel', serif; cursor: pointer;
box-shadow: 0 3px 12px rgba(155,10,26,0.4);
}
.aap-confirm-cancel {
flex: 1; padding: 10px;
background: transparent;
border: 1px solid rgba(255,255,255,0.15);
border-radius: 8px; color: var(--adult-text-dim);
font-size: 12px; font-weight: 600; font-family: 'Cinzel', serif; cursor: pointer;
}
/* ── Nav item 18+ admin in sidebar ───────────────────────────── */
@media(min-width:768px) {
.aap-sidebar { width: 210px; }
}
/* ════════════════════════════════════════════════════════
18+ ADMIN PANEL v3.0 — New Elements
Security Gate · Content Types · PDF→WebP · Gallery Upload
════════════════════════════════════════════════════════ */
/* Security Gate */
.aap-security-gate {
position: absolute; inset: 0; z-index: 999;
background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(155,10,26,0.15) 0%, rgba(8,6,12,0.98) 100%);
display: flex; align-items: center; justify-content: center;
}
.aap-gate-box {
text-align: center; padding: 40px 32px;
background: linear-gradient(135deg, rgba(20,14,28,0.97), rgba(12,8,18,0.99));
border: 1px solid rgba(155,10,26,0.45); border-radius: 20px;
box-shadow: 0 0 60px rgba(155,10,26,0.2), 0 0 120px rgba(0,0,0,0.8);
max-width: 340px; width: 90%;
animation: gateSlideIn 0.4s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes gateSlideIn {
from { opacity: 0; transform: scale(0.9) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeOut {
to { opacity: 0; transform: scale(0.95); }
}
.aap-gate-icon { font-size: 48px; margin-bottom: 14px; animation: gatePulse 2s ease infinite; }
@keyframes gatePulse { 0%,100%{filter:drop-shadow(0 0 8px rgba(255,77,122,0.4))} 50%{filter:drop-shadow(0 0 20px rgba(255,77,122,0.7))} }
.aap-gate-title { font-family: 'Cinzel Decorative', serif; font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 6px; }
.aap-gate-sub { font-size: 11px; color: var(--adult-text-muted); margin-bottom: 16px; }
.aap-gate-badge {
display: inline-block; padding: 4px 14px; border-radius: 20px;
font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
margin-bottom: 8px; letter-spacing: 2px;
}
.aap-gate-badge.owner { background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(201,150,58,0.15)); border: 1px solid rgba(212,175,55,0.4); color: var(--gold); }
.aap-gate-badge.admin { background: linear-gradient(135deg, rgba(155,10,26,0.2), rgba(139,26,58,0.15)); border: 1px solid rgba(155,10,26,0.4); color: var(--petal); }
.aap-gate-uid { font-size: 10px; color: var(--adult-text-muted); font-family: 'Cinzel', serif; letter-spacing: 1px; margin-bottom: 22px; }
.aap-gate-enter-btn {
display: flex; align-items: center; gap: 8px; justify-content: center;
width: 100%; padding: 12px 24px; border-radius: 10px; cursor: pointer;
background: linear-gradient(135deg, var(--blood), rgba(155,10,26,0.8));
border: 1px solid rgba(155,10,26,0.6); color: #fff;
font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700; letter-spacing: 2px;
margin-bottom: 10px; transition: all 0.2s;
}
.aap-gate-enter-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(155,10,26,0.4); }
.aap-gate-cancel-btn {
background: none; border: none; color: var(--adult-text-muted); font-size: 11px;
cursor: pointer; font-family: 'Cinzel', serif; letter-spacing: 1px;
transition: color 0.2s;
}
.aap-gate-cancel-btn:hover { color: var(--petal); }
/* Topbar improvements */
.aap-logo-version { font-size: 9px; color: rgba(155,10,26,0.6); font-family: 'Cinzel', serif; margin-left: 6px; align-self: flex-end; margin-bottom: 2px; }
.aap-topbar-center { display: flex; align-items: center; gap: 8px; flex: 1; padding: 0 12px; }
.aap-topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.aap-logged-as-text { font-size: 11px; color: #5C3840; font-family: 'Cinzel', serif; }
.aap-topbar-icon-btn {
width: 30px; height: 30px; border-radius: 6px; border: 1px solid rgba(155,10,26,0.2);
background: rgba(155,10,26,0.08); color: var(--adult-text-muted); cursor: pointer;
display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.aap-topbar-icon-btn:hover { background: rgba(155,10,26,0.2); color: var(--petal); }
/* Content Type Pills */
.aap-ctype-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.aap-ctype-pill {
padding: 5px 12px; border-radius: 20px; font-size: 11px; font-family: 'Cinzel', serif;
border: 1px solid rgba(255,255,255,0.1); color: var(--adult-text-muted);
background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.2s;
user-select: none;
}
.aap-ctype-pill:hover { border-color: rgba(155,10,26,0.4); color: var(--adult-text); }
.aap-ctype-pill.selected {
background: linear-gradient(135deg, rgba(155,10,26,0.25), rgba(139,26,58,0.18));
border-color: rgba(155,10,26,0.6); color: var(--petal);
box-shadow: 0 0 8px rgba(155,10,26,0.2);
}
.aap-ctype-pill.exclusive.selected {
background: linear-gradient(135deg, rgba(255,77,122,0.2), rgba(155,10,26,0.15));
border-color: rgba(255,77,122,0.5); color: #FF4D7A;
}
/* Type filter bar */
.aap-type-filter-bar { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; }
.aap-type-filter-pill {
padding: 4px 10px; border-radius: 16px; font-size: 10px; font-family: 'Cinzel', serif;
border: 1px solid rgba(255,255,255,0.08); color: var(--adult-text-muted);
background: transparent; cursor: pointer; transition: all 0.18s;
}
.aap-type-filter-pill:hover { border-color: rgba(255,255,255,0.2); color: var(--adult-text); }
.aap-type-filter-pill.active {
background: rgba(155,10,26,0.2); border-color: rgba(155,10,26,0.5);
color: var(--petal);
}
/* Content type mini badge */
.aap-ctype-mini { font-size: 9px; padding: 1px 6px; border-radius: 8px; background: rgba(255,255,255,0.05); }
/* Cover Upload Zone */
.aap-cover-upload-zone {
width: 100%; min-height: 120px; border-radius: 12px;
border: 2px dashed rgba(155,10,26,0.35); background: var(--obsidian2);
cursor: pointer; transition: all 0.2s; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.aap-cover-upload-zone:hover, .aap-cover-upload-zone.drag {
border-color: rgba(155,10,26,0.6); background: rgba(155,10,26,0.05);
}
.aap-cover-upload-inner {
text-align: center; padding: 20px; pointer-events: none; width: 100%; height: 100%;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.aap-cover-upload-icon { font-size: 28px; margin-bottom: 6px; }
.aap-cover-upload-label { font-size: 12px; color: var(--adult-text); font-family: 'Cinzel', serif; margin-bottom: 4px; }
.aap-cover-upload-hint { font-size: 10px; color: var(--adult-text-muted); }
/* PDF Drop Zone */
.aap-pdf-drop-zone {
width: 100%; min-height: 100px; border-radius: 12px;
border: 2px dashed rgba(155,10,26,0.35); background: rgba(155,10,26,0.03);
cursor: pointer; transition: all 0.2s; overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.aap-pdf-drop-zone:hover, .aap-pdf-drop-zone.drag {
border-color: rgba(212,175,55,0.5); background: rgba(212,175,55,0.04);
}
.aap-pdf-drop-inner { text-align: center; padding: 18px; pointer-events: none; }
.aap-pdf-drop-icon { font-size: 28px; margin-bottom: 6px; }
.aap-pdf-drop-label { font-size: 12px; color: var(--adult-text); font-family: 'Cinzel', serif; margin-bottom: 4px; }
.aap-pdf-drop-sub { font-size: 10px; color: var(--adult-text-muted); }
/* PDF Progress Overlay */
.aap-pdf-progress-overlay {
display: none; position: fixed; inset: 0; z-index: 99999;
background: rgba(4,3,8,0.92); align-items: center; justify-content: center;
backdrop-filter: blur(8px);
}
.aap-pdf-progress-overlay.open { display: flex; }
.aap-pdf-progress-box {
background: linear-gradient(135deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(155,10,26,0.4); border-radius: 18px; padding: 36px 32px;
text-align: center; max-width: 360px; width: 90%;
box-shadow: 0 0 80px rgba(155,10,26,0.25);
animation: gateSlideIn 0.3s cubic-bezier(0.16,1,0.3,1) both;
}
.aap-pdf-progress-icon { font-size: 36px; margin-bottom: 12px; animation: gatePulse 1.5s ease infinite; }
.aap-pdf-progress-title { font-family: 'Cinzel Decorative', serif; font-size: 14px; color: #fff; margin-bottom: 6px; }
.aap-pdf-progress-sub { font-size: 11px; color: var(--adult-text-muted); margin-bottom: 18px; min-height: 16px; }
.aap-pdf-progress-track {
width: 100%; height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px;
overflow: hidden; margin-bottom: 8px;
}
.aap-pdf-progress-fill {
height: 100%; width: 0%; border-radius: 3px;
background: linear-gradient(90deg, var(--blood), #FF4D7A, var(--blood));
background-size: 200% 100%;
transition: width 0.3s ease;
animation: progressShine 2s linear infinite;
}
@keyframes progressShine { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
.aap-pdf-progress-pct { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; color: var(--petal); margin-bottom: 4px; }
.aap-pdf-progress-pages { font-size: 10px; color: var(--adult-text-muted); }
/* Chapter add card */
.aap-chapter-add-card {
background: var(--obsidian2); border: 1px solid var(--adult-border);
border-radius: 14px; padding: 20px; max-width: 600px;
}
.aap-ch-step {
display: flex; gap: 14px; align-items: flex-start; margin-bottom: 20px;
}
.aap-ch-step-num {
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, var(--blood), rgba(155,10,26,0.6));
border: 1px solid rgba(155,10,26,0.5);
display: flex; align-items: center; justify-content: center;
font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700; color: #fff;
flex-shrink: 0; margin-top: 2px;
}
.aap-ch-step-content { flex: 1; min-width: 0; }
/* Access pills */
.aap-access-pill {
padding: 5px 14px; border-radius: 20px; font-size: 11px; font-family: 'Cinzel', serif;
border: 1px solid rgba(255,255,255,0.1); color: var(--adult-text-muted);
background: rgba(255,255,255,0.03); cursor: pointer; transition: all 0.15s;
}
.aap-access-pill.active {
background: rgba(155,10,26,0.2); border-color: rgba(155,10,26,0.5); color: var(--petal);
}
/* Content type breakdown */
.aap-ctype-breakdown {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.aap-ctype-stat {
flex: 1; min-width: 90px; background: var(--obsidian2);
border: 1px solid var(--adult-border); border-radius: 10px; padding: 10px 12px;
cursor: pointer; transition: all 0.18s; text-align: center;
}
.aap-ctype-stat:hover { border-color: rgba(155,10,26,0.35); transform: translateY(-1px); }
.aap-ctype-stat-label { font-size: 10px; color: var(--adult-text-muted); margin-bottom: 4px; }
.aap-ctype-stat-val { font-family: 'Cinzel', serif; font-size: 20px; font-weight: 700; }
/* Chapter action btn */
.aap-action-icon-btn.ch {
background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2);
color: #22c55e; font-size: 12px; cursor: pointer;
width: 28px; height: 28px; border-radius: 6px;
display: flex; align-items: center; justify-content: center; transition: all 0.15s;
}
.aap-action-icon-btn.ch:hover { background: rgba(34,197,94,0.2); }
/* Add form card */
.aap-add-form-card {
background: var(--obsidian2); border: 1px solid var(--adult-border);
border-radius: 14px; padding: 22px; max-width: 560px;
}
/* Responsive tweaks */
@media(max-width: 767px) {
.aap-ctype-pills { gap: 4px; }
.aap-ctype-pill { font-size: 10px; padding: 4px 9px; }
.aap-type-filter-bar { gap: 4px; }
.aap-chapter-add-card { padding: 14px; }
.aap-ch-step { gap: 10px; margin-bottom: 16px; }
.aap-add-form-card { padding: 16px; }
.aap-gate-box { padding: 28px 20px; }
}
/* ════════════════════════════════════════════════════════
18+ ADMIN PANEL v3.1 ADDITIONS
Video Upload · Activity Log · Bulk Actions · Checkboxes
════════════════════════════════════════════════════════ */
/* Video Upload Zone */
.aap-video-upload-zone {
width: 100%; min-height: 130px; border-radius: 12px;
border: 2px dashed rgba(56,189,248,0.3); background: var(--obsidian2);
cursor: pointer; transition: all 0.2s; overflow: hidden;
display: flex; align-items: center; justify-content: center;
padding: 8px;
}
.aap-video-upload-zone:hover, .aap-video-upload-zone.drag {
border-color: rgba(56,189,248,0.55); background: rgba(56,189,248,0.04);
}
.aap-video-upload-inner {
text-align: center; padding: 16px; pointer-events: none; width: 100%;
}
.aap-video-upload-icon { font-size: 28px; margin-bottom: 6px; }
.aap-video-upload-label { font-size: 12px; color: var(--adult-text); font-family: 'Cinzel', serif; margin-bottom: 4px; }
.aap-video-upload-hint { font-size: 10px; color: var(--adult-text-muted); }
/* Row Checkboxes — Premium */
.aap-row-checkbox {
position: relative; display: inline-flex; align-items: center;
width: 20px; height: 20px; cursor: pointer; flex-shrink: 0; margin-right: 10px;
}
.aap-row-checkbox input {
position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; margin: 0;
}
.aap-checkbox-mark {
position: relative; width: 18px; height: 18px; border-radius: 5px;
border: 1.5px solid rgba(155,10,26,0.35); background: rgba(12,8,18,0.6);
transition: all 0.15s;
}
.aap-row-checkbox input:checked + .aap-checkbox-mark {
background: linear-gradient(135deg, var(--blood), rgba(155,10,26,0.8));
border-color: rgba(155,10,26,0.8);
box-shadow: 0 0 6px rgba(155,10,26,0.4);
}
.aap-row-checkbox input:checked + .aap-checkbox-mark::after {
content: '✓'; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); color: #fff; font-size: 12px; font-weight: 700;
}
.aap-content-row.selected {
background: rgba(155,10,26,0.08) !important;
box-shadow: inset 3px 0 0 var(--blood);
}
.aap-select-all-row { padding: 8px 12px !important; gap: 8px !important; background: rgba(155,10,26,0.04); }
/* Bulk Action Bar */
.aap-bulk-bar {
display: none; align-items: center; justify-content: space-between;
padding: 10px 14px; margin-bottom: 12px;
background: linear-gradient(135deg, rgba(155,10,26,0.15), rgba(139,26,58,0.1));
border: 1px solid rgba(155,10,26,0.4); border-radius: 10px;
animation: bulkSlideIn 0.25s cubic-bezier(0.16,1,0.3,1) both;
}
.aap-bulk-bar.active { display: flex; }
@keyframes bulkSlideIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.aap-bulk-count-wrap {
display: flex; align-items: center; gap: 8px;
font-family: 'Cinzel', serif; font-size: 12px; color: var(--petal);
}
.aap-bulk-check {
width: 22px; height: 22px; border-radius: 50%;
background: var(--blood); color: #fff; display: inline-flex;
align-items: center; justify-content: center; font-size: 12px; font-weight: 700;
}
.aap-bulk-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.aap-bulk-btn {
padding: 6px 12px; border-radius: 7px; font-size: 10px;
font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 1px;
cursor: pointer; transition: all 0.15s; border: 1px solid;
}
.aap-bulk-btn.hide { background: rgba(240,184,64,0.1); border-color: rgba(240,184,64,0.3); color: #F0B840; }
.aap-bulk-btn.show { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: #22c55e; }
.aap-bulk-btn.delete { background: rgba(155,10,26,0.15); border-color: rgba(155,10,26,0.4); color: var(--petal); }
.aap-bulk-btn.cancel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: var(--adult-text-muted); }
.aap-bulk-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
/* Activity Log */
.aap-log-list {
max-height: 400px; overflow-y: auto;
border-top: 1px solid rgba(255,255,255,0.05);
}
.aap-log-list::-webkit-scrollbar { width: 4px; }
.aap-log-list::-webkit-scrollbar-thumb { background: rgba(155,10,26,0.3); border-radius: 2px; }
.aap-log-row {
display: flex; gap: 10px; align-items: flex-start;
padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,0.04);
}
.aap-log-row:last-child { border-bottom: none; }
.aap-log-icon {
width: 28px; height: 28px; border-radius: 7px;
display: flex; align-items: center; justify-content: center;
font-size: 13px; border: 1px solid; flex-shrink: 0;
}
.aap-log-body { flex: 1; min-width: 0; }
.aap-log-msg {
font-size: 11px; color: var(--adult-text); margin-bottom: 3px;
overflow: hidden; text-overflow: ellipsis; line-height: 1.4;
}
.aap-log-meta {
display: flex; justify-content: space-between; gap: 8px;
font-size: 9px; color: var(--adult-text-muted); font-family: 'Cinzel', serif;
}
.aap-log-actor { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.aap-log-time { flex-shrink: 0; letter-spacing: 0.5px; }
@media(max-width: 767px) {
.aap-bulk-bar { flex-direction: column; align-items: stretch; gap: 8px; }
.aap-bulk-actions { justify-content: space-between; }
.aap-bulk-btn { flex: 1; text-align: center; }
.aap-video-upload-zone { min-height: 110px; }
}
/* ════════════════════════════════════════════════════════
AZURA BANNER SYSTEM v4.0 — Premium Dark Fantasy
Image + Video Banners · Mute Toggle · 5 Slots · Dismissible
════════════════════════════════════════════════════════ */
.azura-banner-slot {
width: 100%;
padding: 14px 16px;
max-width: 100%;
box-sizing: border-box;
animation: bnSlotFade 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes bnSlotFade {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.azura-banner-slot.reader-between-wrap {
padding: 8px 0;
margin: 4px 0;
}
@media(min-width:768px) {
.azura-banner-slot { padding: 18px 24px; }
}
.azura-banner-carousel {
position: relative;
width: 100%;
aspect-ratio: 21 / 7;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(135deg, #0a0710, #15101e);
border: 1px solid rgba(212,175,55,0.18);
box-shadow:
0 8px 32px rgba(0,0,0,0.55),
0 0 40px rgba(139,0,0,0.08),
inset 0 1px 0 rgba(255,255,255,0.04);
max-height: 320px;
}
@media(max-width: 640px) {
.azura-banner-carousel { aspect-ratio: 16 / 9; border-radius: 12px; }
}
.bn-slide {
position: absolute;
inset: 0;
opacity: 0;
transform: scale(1.015);
transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.bn-slide.bn-slide-active {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.azura-banner-item {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
cursor: default;
}
.azura-banner-media {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
background: #0a0710;
}
.azura-banner-overlay {
position: absolute; inset: 0;
display: flex; align-items: flex-end;
padding: 14px 16px 14px;
pointer-events: none;
}
.azura-banner-overlay[style*="cursor: pointer"] { pointer-events: auto; }
.azura-banner-gradient {
position: absolute; inset: 0;
background:
linear-gradient(180deg,
transparent 0%,
rgba(8,6,12,0) 45%,
rgba(8,6,12,0.5) 75%,
rgba(8,6,12,0.85) 100%),
radial-gradient(ellipse 80% 60% at 0% 100%, rgba(139,0,0,0.18), transparent 60%);
pointer-events: none;
}
.azura-banner-content {
position: relative;
z-index: 2;
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
width: 100%;
}
.azura-banner-title {
font-family: 'Cinzel Decorative', serif;
font-size: 14px;
font-weight: 700;
color: #fff;
text-shadow: 0 2px 12px rgba(0,0,0,0.8);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.25;
}
@media(min-width:640px) {
.azura-banner-title { font-size: 17px; }
}
@media(min-width:1024px) {
.azura-banner-title { font-size: 20px; }
}
.azura-banner-cta {
padding: 7px 14px;
border-radius: 8px;
font-size: 11px;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 1.5px;
background: linear-gradient(135deg, rgba(212,175,55,0.95), rgba(201,150,58,0.8));
color: #0a0710;
border: 1px solid rgba(212,175,55,0.6);
cursor: pointer;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(212,175,55,0.25);
transition: all 0.2s;
}
.azura-banner-cta:hover { transform: translateY(-1px); filter: brightness(1.1); box-shadow: 0 6px 16px rgba(212,175,55,0.4); }
/* Controls — top-right */
.azura-banner-controls {
position: absolute;
top: 10px; right: 10px;
z-index: 5;
display: flex;
gap: 6px;
}
.bn-control-btn {
width: 34px; height: 34px;
border-radius: 8px;
background: rgba(8, 6, 12, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.85);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
font-size: 13px;
transition: all 0.18s;
}
.bn-control-btn:hover {
background: rgba(155,10,26,0.5);
border-color: rgba(255,77,122,0.5);
color: #fff;
}
.bn-mute-btn.muted { color: rgba(255,255,255,0.65); }
.bn-mute-btn:not(.muted) {
background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(201,150,58,0.15));
border-color: rgba(212,175,55,0.5);
color: var(--gold-light, #F0D068);
}
@media(max-width: 640px) {
.bn-control-btn { width: 30px; height: 30px; font-size: 12px; }
}
/* Dots */
.azura-banner-dots {
position: absolute;
bottom: 10px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 6px;
z-index: 4;
padding: 5px 10px;
background: rgba(8,6,12,0.5);
backdrop-filter: blur(6px);
border-radius: 20px;
}
.bn-dot {
width: 7px; height: 7px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
border: none; padding: 0; cursor: pointer;
transition: all 0.2s;
}
.bn-dot.active {
background: var(--gold, #D4AF37);
width: 20px;
border-radius: 4px;
}
/* Dismissing animation */
.azura-banner-item.bn-dismissing {
animation: bnDismiss 0.25s cubic-bezier(0.55, 0, 0.45, 1) forwards;
}
@keyframes bnDismiss {
to { opacity: 0; transform: scale(0.95); filter: blur(2px); }
}
/* Reader-between — smaller, cozy */
.reader-between-wrap .azura-banner-item {
aspect-ratio: 16 / 6;
max-height: 180px;
border-radius: 10px;
max-width: 900px;
margin: 0 auto;
}
.reader-between-wrap .azura-banner-title { font-size: 13px; }
/* ════════════════════════════════════════════════════════
BANNER ADMIN UI v4.0
════════════════════════════════════════════════════════ */
.banner-admin-header {
display: flex; align-items: flex-end; justify-content: space-between;
gap: 14px; margin-bottom: 18px; flex-wrap: wrap;
}
.banner-admin-stats { display: flex; gap: 8px; }
.bas-pill {
font-size: 10px; font-family: 'Cinzel', serif; letter-spacing: 1px;
padding: 5px 12px; border-radius: 20px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--border, rgba(255,255,255,0.08));
color: var(--text-muted, rgba(255,255,255,0.5));
}
.bas-pill.active {
background: rgba(34,197,94,0.12);
border-color: rgba(34,197,94,0.35);
color: #22c55e;
}
.banner-add-card {
background: linear-gradient(135deg, rgba(20,16,32,0.98), rgba(14,10,20,0.98));
border: 1px solid var(--border-bright, rgba(212,175,55,0.2));
border-radius: 16px;
overflow: hidden;
margin-bottom: 24px;
box-shadow: 0 8px 40px rgba(139,0,0,0.15);
}
.bac-head {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(90deg, rgba(139,0,0,0.35), rgba(212,175,55,0.1));
padding: 14px 20px;
border-bottom: 1px solid rgba(212,175,55,0.22);
font-family: 'Cinzel', serif; font-size: 13px; font-weight: 700;
color: var(--gold-light, #F0D068);
letter-spacing: 1px;
}
.bac-body { padding: 18px 20px 20px; }
.bac-row { margin-bottom: 14px; }
.bac-label {
display: block; margin-bottom: 6px;
font-family: 'Cinzel', serif;
font-size: 10.5px; font-weight: 600;
color: var(--gold-dim, #8B5D1C);
letter-spacing: 1.2px; text-transform: uppercase;
}
.bac-input {
width: 100%;
background: var(--dark3, rgba(20,14,28,0.5));
border: 1px solid rgba(212,175,55,0.2);
border-radius: 8px;
padding: 10px 12px;
color: var(--text, #fff);
font-size: 12px;
outline: none;
font-family: 'Inter', system-ui, sans-serif;
transition: border-color 0.15s;
}
.bac-input:focus { border-color: rgba(212,175,55,0.5); }
.bac-input::placeholder { color: rgba(255,255,255,0.3); }
.bac-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-bottom: 14px;
}
@media(min-width: 640px) { .bac-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }
.bac-footer-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
}
.bac-toggle-row { display: flex; align-items: center; gap: 10px; }
.bac-toggle-switch {
width: 40px; height: 22px; border-radius: 12px;
background: rgba(255,255,255,0.1);
border: 1px solid var(--border, rgba(255,255,255,0.08));
cursor: pointer; position: relative;
transition: background 0.2s;
}
.bac-toggle-switch.on {
background: linear-gradient(135deg, var(--crimson, #8B0000), var(--crimson-light, #A52424));
border-color: rgba(165,36,36,0.5);
}
.bac-toggle-knob {
position: absolute; top: 2px; left: 2px;
width: 16px; height: 16px; border-radius: 50%;
background: #fff;
transition: left 0.2s;
}
.bac-toggle-switch.on .bac-toggle-knob { left: 20px; }
.bac-submit-btn {
padding: 12px 24px;
border-radius: 10px;
background: linear-gradient(135deg, var(--crimson, #8B0000), rgba(139,0,0,0.8));
border: 1px solid rgba(165,36,36,0.5);
color: #fff;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 2px;
cursor: pointer;
transition: all 0.2s;
flex: 1;
min-width: 180px;
}
.bac-submit-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,0,0,0.4); filter: brightness(1.1); }
/* Media drop zone (supports image + video) */
.bn-media-drop-zone {
width: 100%;
min-height: 160px;
border-radius: 12px;
border: 2px dashed rgba(212,175,55,0.25);
background: rgba(212,175,55,0.03);
cursor: pointer;
transition: all 0.2s;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.bn-media-drop-zone:hover, .bn-media-drop-zone.drag {
border-color: rgba(212,175,55,0.55);
background: rgba(212,175,55,0.06);
}
.bn-media-preview {
text-align: center;
padding: 20px;
width: 100%;
min-height: 160px;
display: flex; flex-direction: column; align-items: center; justify-content: center;
pointer-events: none;
}
.bn-media-preview:has(img), .bn-media-preview:has(video) { padding: 0; min-height: 160px; }
.bn-media-drop-icon { font-size: 34px; margin-bottom: 8px; opacity: 0.7; }
.bn-media-drop-label { font-size: 13px; color: var(--text, #fff); font-family: 'Cinzel', serif; margin-bottom: 4px; }
.bn-media-drop-hint { font-size: 10px; color: var(--text-muted, rgba(255,255,255,0.5)); }
/* Slot-grouped banner cards */
.banner-slot-group {
margin-bottom: 22px;
background: var(--dark2, rgba(14,10,20,0.8));
border: 1px solid var(--border, rgba(255,255,255,0.05));
border-radius: 14px;
overflow: hidden;
}
.banner-slot-group-head {
padding: 12px 16px;
background: linear-gradient(90deg, rgba(139,0,0,0.12), transparent);
border-bottom: 1px solid rgba(212,175,55,0.12);
display: flex; align-items: center; gap: 10px;
font-family: 'Cinzel', serif;
font-size: 12px; font-weight: 700;
color: var(--gold-light, #F0D068);
letter-spacing: 1.2px;
}
.bsg-icon { font-size: 15px; }
.bsg-label { flex: 1; }
.bsg-count {
font-size: 10px; padding: 2px 9px; border-radius: 10px;
background: rgba(212,175,55,0.1);
border: 1px solid rgba(212,175,55,0.25);
color: var(--gold, #D4AF37);
}
.banner-slot-empty {
padding: 20px;
text-align: center;
color: var(--text-muted, rgba(255,255,255,0.4));
font-size: 11px;
font-style: italic;
}
.banner-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
gap: 12px;
padding: 14px;
}
.banner-admin-card {
background: var(--dark3, rgba(20,14,28,0.6));
border: 1px solid var(--border, rgba(255,255,255,0.06));
border-radius: 12px;
overflow: hidden;
transition: all 0.2s;
}
.banner-admin-card:hover {
border-color: rgba(212,175,55,0.3);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.ba-thumb {
height: 100px;
background: var(--dark4, rgba(10,7,14,0.8));
overflow: hidden;
position: relative;
}
.ba-thumb img, .ba-thumb video { width: 100%; height: 100%; object-fit: cover; }
.ba-type-badge {
position: absolute; top: 6px; left: 6px;
font-size: 9px; font-family: 'Cinzel', serif; font-weight: 700; letter-spacing: 0.8px;
padding: 3px 8px; border-radius: 4px;
background: rgba(8,6,12,0.85);
backdrop-filter: blur(4px);
color: #fff;
border: 1px solid rgba(255,255,255,0.1);
}
.ba-type-badge.video { color: #38bdf8; border-color: rgba(56,189,248,0.3); }
.ba-type-badge.image { color: var(--gold, #D4AF37); border-color: rgba(212,175,55,0.3); }
.ba-status-badge {
position: absolute; top: 6px; right: 6px;
font-size: 9px; padding: 3px 8px; border-radius: 4px;
background: rgba(0,0,0,0.75); backdrop-filter: blur(4px);
font-family: 'Cinzel', serif; letter-spacing: 0.8px;
}
.ba-status-badge.on { color: #22c55e; background: rgba(34,197,94,0.25); border: 1px solid rgba(34,197,94,0.5); }
.ba-status-badge.off { color: rgba(255,255,255,0.5); border: 1px solid rgba(255,255,255,0.1); }
.ba-body { padding: 10px 12px; }
.ba-title {
font-size: 12px; font-weight: 600; color: var(--text, #fff);
margin-bottom: 6px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ba-slot-row, .ba-link-row {
font-size: 10px; color: var(--text-muted, rgba(255,255,255,0.5));
margin-bottom: 4px;
display: flex; align-items: center; gap: 5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ba-slot-icon { font-size: 12px; }
.ba-order-row {
display: flex; align-items: center; gap: 4px;
margin: 6px 0 8px;
padding: 4px 8px;
background: rgba(212,175,55,0.05);
border-radius: 6px;
border: 1px solid rgba(212,175,55,0.12);
}
.ba-order-btn {
width: 22px; height: 22px;
border-radius: 5px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.2);
color: var(--gold-light, #F0D068);
cursor: pointer;
font-size: 10px;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.ba-order-btn:hover { background: rgba(212,175,55,0.18); }
.ba-order-num {
flex: 1; text-align: center;
font-family: 'Cinzel', serif;
font-size: 11px; font-weight: 700;
color: var(--gold, #D4AF37);
letter-spacing: 1px;
}
.ba-actions {
display: flex; gap: 4px;
}
.ba-btn {
flex: 1;
font-size: 10px; padding: 5px 6px;
border-radius: 6px;
cursor: pointer;
font-weight: 700;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
transition: all 0.15s;
}
.ba-btn-toggle.on { border: 1px solid rgba(234,179,8,0.4); background: rgba(234,179,8,0.1); color: #eab308; }
.ba-btn-toggle.off { border: 1px solid rgba(34,197,94,0.4); background: rgba(34,197,94,0.1); color: #22c55e; }
.ba-btn-edit { border: 1px solid var(--gold-dim, rgba(212,175,55,0.3)); background: rgba(212,175,55,0.1); color: var(--gold-light, #F0D068); }
.ba-btn-del { border: 1px solid var(--crimson, #8B0000); background: rgba(139,0,0,0.2); color: #ff8080; flex: 0 0 38px; }
.ba-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
/* ════════════════════════════════════════════════════════
BANNER EDIT MODAL
════════════════════════════════════════════════════════ */
.bn-edit-overlay {
display: none;
position: fixed; inset: 0;
z-index: 10000;
background: rgba(4,3,8,0.82);
backdrop-filter: blur(8px);
align-items: center; justify-content: center;
padding: 16px;
overflow-y: auto;
}
.bn-edit-overlay.open { display: flex; animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.bn-edit-box {
width: 100%; max-width: 540px;
background: linear-gradient(135deg, rgba(20,14,28,0.98), rgba(14,10,20,0.99));
border: 1px solid rgba(212,175,55,0.25);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 0 80px rgba(139,0,0,0.2);
animation: bnEditSlide 0.3s cubic-bezier(0.16, 1, 0.3, 1);
max-height: calc(100vh - 32px);
overflow-y: auto;
}
@keyframes bnEditSlide { from { opacity: 0; transform: translateY(20px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.bn-edit-header {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
background: linear-gradient(90deg, rgba(139,0,0,0.3), rgba(212,175,55,0.08));
border-bottom: 1px solid rgba(212,175,55,0.22);
}
.bn-edit-header-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: linear-gradient(135deg, var(--crimson, #8B0000), rgba(139,0,0,0.7));
display: flex; align-items: center; justify-content: center;
font-size: 14px; color: #fff;
}
.bn-edit-header-title {
flex: 1;
font-family: 'Cinzel Decorative', serif;
font-size: 14px; font-weight: 700;
color: var(--gold-light, #F0D068);
letter-spacing: 1px;
}
.bn-edit-close {
width: 30px; height: 30px;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 13px;
transition: all 0.15s;
}
.bn-edit-close:hover { background: rgba(155,10,26,0.2); color: #fff; }
.bn-edit-body { padding: 18px 20px 20px; }
.bn-edit-media-preview-box {
width: 100%;
aspect-ratio: 16 / 7;
background: var(--dark4, #0a0710);
border-radius: 10px;
overflow: hidden;
position: relative;
border: 1px solid rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
}
.bn-edit-media-label {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 6px;
background: linear-gradient(to top, rgba(8,6,12,0.85), transparent);
font-size: 10px;
font-family: 'Cinzel', serif;
color: rgba(255,255,255,0.7);
text-align: center;
}
.bn-edit-media-empty { color: rgba(255,255,255,0.4); font-size: 12px; font-style: italic; }
.bn-edit-change-row { margin-top: 8px; }
.bn-edit-change-btn {
display: inline-block;
padding: 8px 14px;
border-radius: 8px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.22);
color: var(--gold-light, #F0D068);
font-family: 'Cinzel', serif;
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.bn-edit-change-btn:hover { background: rgba(212,175,55,0.15); }
.bn-edit-active-row {
display: flex; align-items: center; gap: 10px;
padding: 10px 0;
cursor: pointer;
}
.bn-edit-active-row input { display: none; }
.bn-edit-active-mark {
width: 38px; height: 22px;
border-radius: 12px;
background: rgba(255,255,255,0.1);
border: 1px solid var(--border, rgba(255,255,255,0.08));
position: relative;
transition: background 0.2s;
flex-shrink: 0;
}
.bn-edit-active-mark::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%; background: #fff;
transition: left 0.2s;
}
.bn-edit-active-row input:checked + .bn-edit-active-mark {
background: linear-gradient(135deg, var(--crimson, #8B0000), var(--crimson-light, #A52424));
border-color: rgba(165,36,36,0.5);
}
.bn-edit-active-row input:checked + .bn-edit-active-mark::after { left: 18px; }
.bn-edit-actions {
display: flex; gap: 8px;
margin-top: 14px;
}
.bn-edit-cancel, .bn-edit-save {
flex: 1;
padding: 11px;
border-radius: 8px;
font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.2s;
border: 1px solid;
}
.bn-edit-cancel { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.6); }
.bn-edit-cancel:hover { background: rgba(255,255,255,0.08); color: #fff; }
.bn-edit-save { background: linear-gradient(135deg, var(--crimson, #8B0000), rgba(139,0,0,0.8)); border-color: rgba(165,36,36,0.55); color: #fff; }
.bn-edit-save:hover { filter: brightness(1.15); box-shadow: 0 4px 16px rgba(139,0,0,0.3); }
/* ════════════════════════════════════════════════════════
ADMIN PANEL MOBILE HAMBURGER + SIDEBAR
════════════════════════════════════════════════════════ */
.admin-mobile-hamburger {
display: none;
position: fixed;
top: 14px; left: 14px;
z-index: 1002;
width: 42px; height: 42px;
border-radius: 10px;
background: rgba(8,6,12,0.92);
backdrop-filter: blur(8px);
border: 1px solid rgba(212,175,55,0.3);
cursor: pointer;
padding: 0;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
transition: all 0.2s;
}
.admin-mobile-hamburger.show { display: flex; }
.admin-mobile-hamburger span {
display: block;
width: 18px; height: 2px;
background: var(--gold-light, #F0D068);
border-radius: 2px;
transition: all 0.2s;
}
.admin-mobile-hamburger:hover { border-color: rgba(212,175,55,0.55); }
.admin-mobile-backdrop {
position: fixed; inset: 0;
background: rgba(4,3,8,0.75);
backdrop-filter: blur(4px);
z-index: 998;
opacity: 0;
transition: opacity 0.22s;
}
.admin-mobile-backdrop.show { opacity: 1; }
/* Mobile: slide-in sidebar */
@media (max-width: 767px) {
#adult-admin-panel .aap-sidebar,
#page-admin .admin-sidebar {
position: fixed;
top: 0; bottom: 0; left: 0;
width: 240px !important;
z-index: 1001;
transform: translateX(-100%);
transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 6px 0 30px rgba(0,0,0,0.6);
}
#adult-admin-panel .aap-sidebar.mobile-open,
#page-admin .admin-sidebar.mobile-open {
transform: translateX(0);
}
#adult-admin-panel .aap-sidebar .aap-nav-label,
#adult-admin-panel .aap-sidebar .aap-nav-section {
display: block !important;
}
#adult-admin-panel .aap-sidebar .aap-nav-item {
padding: 10px 14px !important;
justify-content: flex-start !important;
}
/* Leave room for hamburger */
.aap-topbar { padding-left: 64px !important; }
.aap-main { padding: 16px 14px !important; }
}
/* ════════════════════════════════════════════════════════
GENERAL MOBILE OPTIMIZATION PASS
════════════════════════════════════════════════════════ */
/* Bigger touch targets */
@media (max-width: 767px) {
.bot-nav-item, .topbar-btn, .btn-primary, .btn-outline {
min-height: 42px;
}
.nav-item, .sidebar-nav .nav-item { min-height: 40px; }
.chapter-item { min-height: 56px; }
/* Manga carousel — snap + bigger */
.manga-row, [id$='-row'] {
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.manga-card { scroll-snap-align: start; }
/* Buttons — tap feedback */
button:not(:disabled):active,
.btn-primary:active,
.btn-outline:active,
.manga-card:active {
transform: scale(0.97);
transition: transform 0.08s;
}
/* Disable double-tap zoom */
button, a, .manga-card, .nav-item, .bot-nav-item, .chapter-item {
touch-action: manipulation;
}
/* Modals: fill more screen */
.aap-modal, .azura-modal-box, .bn-edit-box {
max-height: calc(100vh - 16px);
}
/* Content row: show less, let title breathe */
.aap-content-title { font-size: 12px; line-height: 1.3; }
.aap-content-sub { flex-wrap: wrap; }
/* Topbar: simpler on mobile */
.mobile-topbar .topbar-logo { font-size: 15px; }
/* Reader: bigger tap zones */
.rdr-header-nav, .rdr-back-btn {
min-width: 42px; min-height: 42px;
}
.rdr-chat-send { min-width: 42px; min-height: 42px; }
/* Hero action buttons — ensure they don't cramp */
.hero-actions { gap: 8px; }
.hero-actions button { flex: 1; min-width: 0; }
/* Detail actions — wrap nicely */
.detail-actions { flex-wrap: wrap; }
.detail-actions button { flex: 1 1 48%; }
/* Banner admin cards — full width */
.banner-cards-grid { grid-template-columns: 1fr; gap: 10px; padding: 10px; }
.banner-admin-header { flex-direction: column; align-items: stretch; gap: 10px; }
.bac-footer-row { flex-direction: column; align-items: stretch; }
.bac-submit-btn { width: 100%; min-width: 0; }
/* 18+ add form card: full width */
.aap-add-form-card { padding: 14px; }
.aap-form-row-2 { grid-template-columns: 1fr; }
}
/* Even smaller screens (≤ 380px) */
@media (max-width: 380px) {
.azura-banner-title { font-size: 13px; }
.azura-banner-cta { padding: 6px 10px; font-size: 10px; letter-spacing: 1px; }
.manga-thumb { min-height: 140px; }
.chapter-title { font-size: 12px; }
.section-title { font-size: 13px; }
.aap-content-title { font-size: 11.5px; }
}
/* Landscape phones: tighter */
@media (max-height: 480px) and (orientation: landscape) {
.azura-banner-carousel { aspect-ratio: 21 / 5; max-height: 180px; }
.mobile-topbar { padding-top: max(env(safe-area-inset-top, 0px), 8px); }
}
/* iOS safe-area — notch-aware */
@supports (padding: max(0px)) {
.mobile-topbar { padding-top: max(env(safe-area-inset-top, 8px), 8px); }
.mobile-bottom-nav {
padding-bottom: max(env(safe-area-inset-bottom, 0px), 4px);
}
.admin-mobile-hamburger { top: max(env(safe-area-inset-top, 14px), 14px); }
}
/* Focus outlines — keyboard users */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
outline: 2px solid rgba(212,175,55,0.55);
outline-offset: 2px;
}
/* Smooth scroll on anchors + reduce motion respect */
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
.bn-slide { transition: opacity 0.1s !important; }
}
/* Scrollbar polish (webkit) */
.aap-main::-webkit-scrollbar,
.admin-main::-webkit-scrollbar,
.main-content::-webkit-scrollbar {
width: 6px;
}
.aap-main::-webkit-scrollbar-thumb,
.admin-main::-webkit-scrollbar-thumb,
.main-content::-webkit-scrollbar-thumb {
background: rgba(212,175,55,0.2);
border-radius: 3px;
}
.aap-main::-webkit-scrollbar-thumb:hover,
.admin-main::-webkit-scrollbar-thumb:hover,
.main-content::-webkit-scrollbar-thumb:hover {
background: rgba(212,175,55,0.4);
}
/* ════════════════════════════════════════════════════════
AZURA v5.0 — PDF Progress · Home Extras · Command Palette · Mobile Sheet
════════════════════════════════════════════════════════ */
/* ── Universal PDF→WebP progress overlay ── */
.azura-pdf-progress-overlay {
display: none;
position: fixed; inset: 0;
z-index: 99999;
background: rgba(4,3,8,0.93);
backdrop-filter: blur(10px);
align-items: center; justify-content: center;
padding: 16px;
}
.azura-pdf-progress-overlay.open { display: flex; animation: fadeIn .18s ease; }
.azpp-box {
background: linear-gradient(135deg, rgba(20,14,28,0.99), rgba(10,6,14,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 20px;
padding: 40px 32px;
text-align: center;
max-width: 380px;
width: 100%;
box-shadow: 0 0 80px rgba(139,0,0,0.25), 0 0 120px rgba(0,0,0,0.6);
animation: gateSlideIn 0.3s cubic-bezier(0.16,1,0.3,1);
}
.azpp-icon {
font-size: 38px;
margin-bottom: 14px;
animation: azppPulse 1.4s ease-in-out infinite;
filter: drop-shadow(0 0 12px rgba(212,175,55,0.5));
}
@keyframes azppPulse {
0%,100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.08); opacity: 0.85; }
}
.azpp-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 15px; font-weight: 700;
color: #fff;
letter-spacing: 1.5px;
margin-bottom: 6px;
}
.azpp-sub {
font-size: 11.5px; color: rgba(255,255,255,0.55);
margin-bottom: 22px; min-height: 16px;
}
.azpp-track {
width: 100%; height: 8px;
background: rgba(255,255,255,0.06);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
border: 1px solid rgba(212,175,55,0.1);
}
.azpp-fill {
height: 100%; width: 0%;
border-radius: 4px;
background: linear-gradient(90deg, #8B0000, #D4AF37, #FF4D7A, #8B0000);
background-size: 300% 100%;
animation: azppShine 2.5s linear infinite;
transition: width .35s cubic-bezier(0.22,1,0.36,1);
box-shadow: 0 0 12px rgba(212,175,55,0.4);
}
@keyframes azppShine { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
.azpp-pct {
font-family: 'Cinzel', serif;
font-size: 24px; font-weight: 700;
color: #D4AF37;
margin-bottom: 4px;
letter-spacing: 2px;
text-shadow: 0 0 20px rgba(212,175,55,0.5);
}
.azpp-pages {
font-size: 10.5px;
color: rgba(255,255,255,0.45);
font-family: 'Cinzel', serif;
letter-spacing: 1px;
}
/* ── Continue Reading card ── */
.continue-card { position: relative; }
.continue-card .manga-thumb { position: relative; overflow: hidden; }
.continue-play-overlay {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.2s;
background: linear-gradient(180deg, transparent 45%, rgba(8,6,12,0.75) 100%);
}
.continue-card:hover .continue-play-overlay { opacity: 1; }
.continue-play-btn {
width: 46px; height: 46px; border-radius: 50%;
background: linear-gradient(135deg, rgba(212,175,55,0.95), rgba(201,150,58,0.85));
color: #0a0710; font-size: 18px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 24px rgba(212,175,55,0.5), 0 0 40px rgba(212,175,55,0.35);
transform: scale(0.85);
transition: transform 0.2s;
}
.continue-card:hover .continue-play-btn { transform: scale(1); }
.continue-progress-strip {
position: absolute; bottom: 0; left: 0; right: 0;
height: 3px;
background: rgba(0,0,0,0.5);
z-index: 3;
}
.continue-progress-fill {
height: 100%;
background: linear-gradient(90deg, #D4AF37, #FF4D7A);
box-shadow: 0 0 8px rgba(212,175,55,0.6);
transition: width 0.3s;
}
/* ── Home Quick Stats bar ── */
.quick-stats-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
padding: 14px 16px;
margin: 6px 0;
}
@media(min-width: 768px) {
.quick-stats-bar { padding: 18px 24px; gap: 14px; }
}
.qs-item {
background: linear-gradient(135deg, rgba(20,14,28,0.7), rgba(14,10,20,0.5));
border: 1px solid rgba(212,175,55,0.12);
border-radius: 12px;
padding: 12px 10px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
.qs-item:hover {
border-color: rgba(212,175,55,0.35);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.qs-item::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(ellipse at top, rgba(212,175,55,0.08), transparent 60%);
opacity: 0; transition: opacity 0.2s;
}
.qs-item:hover::before { opacity: 1; }
.qs-icon { font-size: 20px; margin-bottom: 4px; }
.qs-val {
font-family: 'Cinzel', serif;
font-size: 18px; font-weight: 700;
color: #D4AF37;
margin-bottom: 2px;
line-height: 1;
position: relative; z-index: 1;
}
.qs-label {
font-size: 9.5px;
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
letter-spacing: 0.8px;
text-transform: uppercase;
position: relative; z-index: 1;
}
.qs-vip-badge {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(201,150,58,0.15));
border: 1px solid rgba(212,175,55,0.4);
color: #D4AF37;
font-weight: 700;
letter-spacing: 0.5px;
}
.qs-vip-cta {
font-size: 10px;
padding: 3px 10px;
border-radius: 10px;
background: linear-gradient(135deg, #8B0000, rgba(139,0,0,0.8));
border: 1px solid rgba(165,36,36,0.5);
color: #fff;
font-weight: 700;
cursor: pointer;
letter-spacing: 1px;
}
@media(max-width: 380px) {
.quick-stats-bar { grid-template-columns: repeat(2, 1fr); }
}
/* ════════════════════════════════════════════════════════
COMMAND PALETTE (Cmd+K)
════════════════════════════════════════════════════════ */
.cmd-palette-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100000;
background: rgba(4,3,8,0.7);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
padding: 80px 20px 20px;
justify-content: center;
align-items: flex-start;
}
.cmd-palette-overlay.open { display: flex; animation: fadeIn .14s ease; }
.cmd-palette-box {
width: 100%;
max-width: 580px;
background: linear-gradient(180deg, rgba(20,14,28,0.98), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.25);
border-radius: 16px;
box-shadow: 0 20px 80px rgba(0,0,0,0.7), 0 0 40px rgba(212,175,55,0.1);
overflow: hidden;
animation: cmdSlideDown 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cmdSlideDown { from { opacity: 0; transform: translateY(-16px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.cmd-palette-search {
display: flex; align-items: center; gap: 10px;
padding: 14px 18px;
border-bottom: 1px solid rgba(212,175,55,0.12);
color: rgba(212,175,55,0.6);
}
.cmd-palette-search input {
flex: 1;
background: none;
border: none;
outline: none;
color: #fff;
font-size: 14px;
font-family: 'Inter', system-ui, sans-serif;
}
.cmd-palette-search input::placeholder { color: rgba(255,255,255,0.3); }
.cmd-palette-hint {
font-size: 9px;
padding: 3px 8px;
border-radius: 4px;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
letter-spacing: 1px;
}
.cmd-palette-results {
max-height: 420px;
overflow-y: auto;
padding: 8px 0;
}
.cmd-palette-results::-webkit-scrollbar { width: 4px; }
.cmd-palette-results::-webkit-scrollbar-thumb { background: rgba(212,175,55,0.2); border-radius: 2px; }
.cmd-group { padding: 4px 0; }
.cmd-group + .cmd-group { border-top: 1px solid rgba(255,255,255,0.04); margin-top: 4px; padding-top: 8px; }
.cmd-group-label {
padding: 6px 18px;
font-family: 'Cinzel', serif;
font-size: 9.5px;
color: rgba(212,175,55,0.55);
letter-spacing: 1.5px;
text-transform: uppercase;
}
.cmd-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 18px;
cursor: pointer;
transition: background 0.1s;
}
.cmd-item:hover, .cmd-item.selected {
background: linear-gradient(90deg, rgba(212,175,55,0.1), rgba(139,0,0,0.05));
}
.cmd-item.selected { box-shadow: inset 3px 0 0 #D4AF37; }
.cmd-item-icon {
width: 28px; height: 28px;
border-radius: 7px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.15);
display: flex; align-items: center; justify-content: center;
font-size: 13px;
flex-shrink: 0;
}
.cmd-item-label { flex: 1; font-size: 13px; color: #fff; }
.cmd-item-sub { font-size: 11px; color: rgba(212,175,55,0.6); }
.cmd-empty {
padding: 40px 20px; text-align: center;
color: rgba(255,255,255,0.35);
font-size: 12px;
}
.cmd-palette-foot {
display: flex; gap: 14px; justify-content: center;
padding: 10px 18px;
border-top: 1px solid rgba(255,255,255,0.04);
background: rgba(0,0,0,0.25);
}
.cmd-palette-foot span {
font-size: 10px;
color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif;
display: inline-flex; align-items: center; gap: 5px;
}
.cmd-palette-foot kbd {
display: inline-block;
padding: 1px 6px;
background: rgba(212,175,55,0.1);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 4px;
color: #D4AF37;
font-size: 10px;
font-family: 'Cinzel', serif;
}
/* ════════════════════════════════════════════════════════
MOBILE BOTTOM SHEET (premium drawer)
════════════════════════════════════════════════════════ */
.azura-mobile-menu-btn {
display: none;
position: fixed;
top: calc(env(safe-area-inset-top, 0) + 12px);
right: 14px;
z-index: 999;
width: 42px; height: 42px;
border-radius: 12px;
background: rgba(20,14,28,0.85);
backdrop-filter: blur(10px);
border: 1px solid rgba(212,175,55,0.25);
cursor: pointer;
padding: 0;
flex-direction: column;
justify-content: center; align-items: center;
gap: 4px;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
transition: all 0.2s;
}
.azura-mobile-menu-btn span {
display: block;
width: 18px; height: 2px;
background: #D4AF37;
border-radius: 2px;
transition: all 0.22s;
}
.azura-mobile-menu-btn:hover { border-color: rgba(212,175,55,0.5); }
@media(max-width: 767px) {
.azura-mobile-menu-btn { display: flex; }
}
.mobile-sheet-overlay {
position: fixed; inset: 0;
z-index: 10000;
pointer-events: none;
}
.mobile-sheet-overlay.open { pointer-events: auto; }
.mobile-sheet-backdrop {
position: absolute; inset: 0;
background: rgba(4,3,8,0.6);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity 0.28s cubic-bezier(0.16,1,0.3,1);
}
.mobile-sheet-overlay.open .mobile-sheet-backdrop { opacity: 1; }
.mobile-sheet-panel {
position: absolute;
bottom: 0; left: 0; right: 0;
max-height: 88vh;
background: linear-gradient(180deg, rgba(20,14,28,0.98), rgba(12,8,18,0.99));
border-top: 1px solid rgba(212,175,55,0.22);
border-radius: 22px 22px 0 0;
transform: translateY(100%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 -8px 40px rgba(0,0,0,0.7);
overflow-y: auto;
padding-bottom: env(safe-area-inset-bottom, 0);
}
.mobile-sheet-overlay.open .mobile-sheet-panel { transform: translateY(0); }
.mobile-sheet-handle {
width: 40px; height: 4px;
background: rgba(255,255,255,0.2);
border-radius: 2px;
margin: 10px auto 6px;
}
.mobile-sheet-header {
display: flex; align-items: center; justify-content: space-between;
padding: 6px 20px 14px;
border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mobile-sheet-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px; font-weight: 700;
color: #D4AF37;
letter-spacing: 3px;
text-shadow: 0 0 20px rgba(212,175,55,0.4);
}
.mobile-sheet-close {
width: 34px; height: 34px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 14px;
}
.mobile-sheet-body { padding: 18px 20px 24px; }
.ms-user {
display: flex; align-items: center; gap: 12px;
padding: 14px;
background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(139,0,0,0.04));
border: 1px solid rgba(212,175,55,0.18);
border-radius: 14px;
margin-bottom: 18px;
}
.ms-user-avatar {
width: 46px; height: 46px;
border-radius: 50%;
background: linear-gradient(135deg, #8B0000, #C41E3A);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 15px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 12px rgba(139,0,0,0.4);
}
.ms-user-info { flex: 1; min-width: 0; }
.ms-user-name {
font-size: 14px; font-weight: 700;
color: #fff;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ms-user-uid {
font-size: 10px; color: rgba(255,255,255,0.45);
font-family: 'Cinzel', serif; letter-spacing: 1px;
margin-top: 2px;
}
.ms-user-vip {
display: inline-block;
margin-top: 4px;
font-size: 10px;
padding: 2px 8px;
border-radius: 10px;
background: rgba(212,175,55,0.2);
border: 1px solid rgba(212,175,55,0.4);
color: #D4AF37;
font-weight: 700;
}
.ms-user-coin {
padding: 6px 12px;
border-radius: 20px;
background: rgba(212,175,55,0.1);
border: 1px solid rgba(212,175,55,0.25);
color: #D4AF37;
font-size: 11px; font-weight: 700;
font-family: 'Cinzel', serif;
white-space: nowrap;
}
.ms-login-prompt {
display: flex; align-items: center; gap: 12px;
padding: 14px;
background: rgba(212,175,55,0.06);
border: 1px dashed rgba(212,175,55,0.3);
border-radius: 14px;
margin-bottom: 18px;
cursor: pointer;
color: #D4AF37;
font-family: 'Cinzel', serif;
font-size: 13px;
}
.ms-login-icon { font-size: 22px; }
.ms-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.ms-item {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 14px 8px;
color: rgba(255,255,255,0.8);
cursor: pointer;
transition: all 0.15s;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-align: center;
}
.ms-item:hover, .ms-item:active {
background: rgba(212,175,55,0.08);
border-color: rgba(212,175,55,0.25);
transform: scale(0.97);
}
.ms-item.admin {
background: rgba(139,0,0,0.08);
border-color: rgba(139,0,0,0.25);
}
.ms-item-icon { font-size: 22px; }
.ms-item-label {
font-size: 10.5px;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
line-height: 1.2;
}
.ms-actions {
display: flex; flex-direction: column; gap: 6px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.ms-action {
display: flex; align-items: center; gap: 12px;
padding: 12px 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
color: rgba(255,255,255,0.8);
font-family: 'Cinzel', serif;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.ms-action:hover { background: rgba(212,175,55,0.06); }
.ms-action.logout { color: #ff8080; }
.ms-action.logout:hover { background: rgba(139,0,0,0.1); }
/* ════════════════════════════════════════════════════════════════════
AZURA MOBILE DESIGN v6.0 — SINGLE SOURCE OF TRUTH
Premium, clean, consistent. No duplicates.
════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
/* ═══ Base ═══ */
html, body {
font-size: 14px;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
}
/* Hide desktop sidebar & topbar on mobile */
.sidebar, .desktop-topbar { display: none !important; }
/* Hide the old floating hamburger — we now use in-topbar button */
.azura-mobile-menu-btn { display: none !important; }
/* Page scroll container */
.page { padding: 0; }
.main-content {
padding: 0 0 96px 0 !important;
max-width: 100%;
}
/* ═══ MOBILE TOPBAR — refined ═══ */
.mobile-topbar {
display: flex !important;
position: sticky;
top: 0;
z-index: 100;
padding: max(env(safe-area-inset-top, 0), 8px) 14px 10px !important;
height: auto !important;
background: rgba(8, 5, 12, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(212, 175, 55, 0.1);
align-items: center;
justify-content: space-between;
gap: 10px;
}
.mobile-topbar .topbar-logo {
font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
font-weight: 700 !important;
font-size: 17px !important;
letter-spacing: 4px;
color: #D4AF37;
text-shadow: 0 0 24px rgba(212, 175, 55, 0.4);
background: linear-gradient(135deg, #F0D068 0%, #D4AF37 50%, #8B5D1C 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.mobile-topbar .topbar-right {
display: flex;
align-items: center;
gap: 6px;
}
.mobile-topbar .topbar-btn {
width: 38px; height: 38px;
min-width: 38px; min-height: 38px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.8);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.18s cubic-bezier(0.16,1,0.3,1);
padding: 0;
}
.mobile-topbar .topbar-btn:active {
transform: scale(0.92);
background: rgba(212,175,55,0.12);
border-color: rgba(212,175,55,0.3);
}
.mobile-topbar .topbar-coin {
display: flex; align-items: center; gap: 4px;
padding: 7px 11px;
border-radius: 20px;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(201,150,58,0.1));
border: 1px solid rgba(212,175,55,0.3);
color: #F0D068;
font-size: 12px;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
white-space: nowrap;
transition: all 0.18s;
}
.mobile-topbar .topbar-coin:active { transform: scale(0.95); filter: brightness(1.15); }
/* Hamburger menu button — distinctive */
.mobile-topbar-menu-btn {
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,0,0,0.15)) !important;
border: 1px solid rgba(212,175,55,0.35) !important;
color: #F0D068 !important;
}
.mobile-topbar-menu-btn:active {
background: linear-gradient(135deg, rgba(212,175,55,0.35), rgba(139,0,0,0.25)) !important;
}
/* ═══ HERO BANNER ═══ */
.hero-banner {
margin: 12px 14px;
border-radius: 18px;
min-height: 280px;
max-height: 340px;
overflow: hidden;
position: relative;
}
.hero-banner .hero-content {
padding: 16px 18px !important;
}
.hero-banner .hero-title,
#hero-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
font-size: 22px !important;
font-weight: 700 !important;
line-height: 1.1 !important;
letter-spacing: 0.5px !important;
color: #fff !important;
text-shadow: 0 2px 16px rgba(0,0,0,0.9);
margin-bottom: 6px !important;
}
.hero-banner .hero-desc,
#hero-desc {
font-size: 11.5px !important;
line-height: 1.45;
color: rgba(255,255,255,0.75);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 14px;
}
.hero-banner .hero-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 10px;
padding: 4px 9px;
border-radius: 12px;
background: linear-gradient(135deg, #8B0000, #C41E3A);
color: #fff;
font-weight: 700;
letter-spacing: 1px;
margin-bottom: 10px;
}
.hero-banner .hero-meta {
font-size: 11px;
color: rgba(255,255,255,0.6);
margin-bottom: 14px;
}
.hero-banner .hero-actions {
display: flex;
gap: 8px;
}
.hero-banner .hero-actions button {
flex: 1;
padding: 11px 14px !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 1.5px;
border-radius: 10px !important;
}
/* ═══ SECTIONS ═══ */
.section {
padding: 16px 0 !important;
margin: 0;
}
.section-header {
padding: 0 14px !important;
margin-bottom: 12px !important;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.section-title {
font-family: 'Cinzel', serif !important;
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: 1.5px !important;
color: #D4AF37 !important;
text-transform: uppercase;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.section-link {
font-size: 11px !important;
color: rgba(212,175,55,0.7) !important;
white-space: nowrap;
font-family: 'Cinzel', serif;
}
.section-glow-sep {
margin: 8px 14px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(212,175,55,0.3), transparent);
}
/* ═══ MANGA CAROUSEL ═══ */
.manga-row {
display: flex;
gap: 10px !important;
padding: 2px 14px !important;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-padding-left: 14px;
}
.manga-row::-webkit-scrollbar { display: none; }
.manga-card {
flex: 0 0 126px !important;
width: 126px !important;
scroll-snap-align: start;
cursor: pointer;
}
.manga-card.top10,
.manga-card[data-top10="1"] {
flex: 0 0 148px !important;
width: 148px !important;
}
.manga-thumb {
width: 100%;
aspect-ratio: 2/3;
min-height: 0 !important;
border-radius: 12px;
overflow: hidden;
position: relative;
background: linear-gradient(180deg, rgba(20,14,28,0.8), rgba(14,10,20,0.9));
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.manga-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.25s;
}
.manga-card:active .manga-thumb img {
transform: scale(0.96);
}
.manga-title {
font-size: 12px !important;
line-height: 1.25;
margin-top: 8px !important;
padding: 0 2px;
font-weight: 600;
color: rgba(255,255,255,0.9);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.manga-sub {
font-size: 10px;
color: rgba(255,255,255,0.45);
margin-top: 2px;
padding: 0 2px;
}
.manga-rating {
position: absolute;
top: 6px; right: 6px;
padding: 3px 7px;
border-radius: 10px;
background: rgba(0,0,0,0.7);
backdrop-filter: blur(4px);
color: #F0D068;
font-size: 10px;
font-weight: 700;
display: flex;
align-items: center;
gap: 2px;
}
.top10-rank {
position: absolute;
top: 6px; left: 6px;
font-family: 'Cinzel Decorative', serif;
font-size: 22px;
font-weight: 900;
color: #fff;
text-shadow: 0 2px 10px rgba(0,0,0,0.9), 0 0 20px rgba(212,175,55,0.5);
line-height: 1;
}
/* ═══ HOME QUICK STATS (compact, premium) ═══ */
.quick-stats-bar {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
gap: 6px !important;
padding: 0 14px !important;
margin: 14px 0 6px !important;
}
.qs-item {
padding: 10px 4px !important;
border-radius: 12px !important;
background: linear-gradient(180deg, rgba(20,14,28,0.7), rgba(14,10,20,0.5)) !important;
border: 1px solid rgba(212,175,55,0.1) !important;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
cursor: pointer;
transition: transform 0.15s, border-color 0.15s;
}
.qs-item:active { transform: scale(0.96); border-color: rgba(212,175,55,0.3) !important; }
.qs-icon { font-size: 18px !important; margin-bottom: 2px !important; }
.qs-val {
font-family: 'Cinzel', serif !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #D4AF37 !important;
line-height: 1 !important;
margin: 1px 0 !important;
}
.qs-label {
font-size: 8.5px !important;
letter-spacing: 0.8px !important;
text-transform: uppercase;
color: rgba(255,255,255,0.5) !important;
font-family: 'Cinzel', serif;
}
.qs-vip-badge {
font-size: 10px !important;
padding: 1px 6px !important;
line-height: 1.3;
}
.qs-vip-cta {
font-size: 9px !important;
padding: 2px 8px !important;
}
/* ═══ CONTINUE READING ═══ */
.continue-card .manga-thumb {
border: 1px solid rgba(212,175,55,0.2);
}
.continue-play-overlay {
opacity: 1 !important;
background: linear-gradient(180deg, transparent 50%, rgba(8,6,12,0.8) 100%) !important;
}
.continue-play-btn {
width: 38px !important;
height: 38px !important;
font-size: 14px !important;
transform: scale(1) !important;
}
/* ═══ BOTTOM NAV — floating, premium ═══ */
.mobile-bottom-nav,
nav.mobile-bottom-nav {
display: flex !important;
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 90;
padding: 8px 12px max(env(safe-area-inset-bottom, 0), 10px) !important;
background: linear-gradient(180deg, rgba(8,5,12,0.82), rgba(4,2,8,0.96));
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-top: 1px solid rgba(212,175,55,0.12);
justify-content: space-around;
align-items: stretch;
gap: 4px;
}
.bot-nav-item {
flex: 1;
display: flex !important;
flex-direction: column !important;
align-items: center;
justify-content: center;
gap: 3px !important;
padding: 6px 4px !important;
min-height: 52px !important;
color: rgba(255,255,255,0.5) !important;
cursor: pointer;
transition: color 0.2s;
position: relative;
border-radius: 10px;
}
.bot-nav-item:active { transform: scale(0.94); }
.bot-nav-item.active {
color: #D4AF37 !important;
}
.bot-nav-item.active::before {
content: '';
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
width: 28px;
height: 3px;
background: linear-gradient(90deg, transparent, #D4AF37, transparent);
border-radius: 2px;
box-shadow: 0 0 10px rgba(212,175,55,0.6);
}
.bot-nav-icon svg {
width: 22px !important;
height: 22px !important;
transition: transform 0.2s;
}
.bot-nav-item.active .bot-nav-icon svg {
transform: translateY(-1px);
filter: drop-shadow(0 0 6px rgba(212,175,55,0.6));
}
.bot-nav-label {
font-size: 10px !important;
font-weight: 500 !important;
letter-spacing: 0.3px !important;
font-family: 'Inter', system-ui, sans-serif;
}
/* ═══ MOBILE SEARCH BAR ═══ */
#mobile-search-bar {
padding: 10px 14px !important;
background: rgba(8,5,12,0.96) !important;
backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(212,175,55,0.15) !important;
}
#mobile-search-input {
width: 100%;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(212,175,55,0.2) !important;
border-radius: 12px !important;
padding: 10px 40px !important;
color: #fff !important;
font-size: 13px;
outline: none;
transition: border-color 0.2s;
}
#mobile-search-input:focus {
border-color: rgba(212,175,55,0.5) !important;
background: rgba(255,255,255,0.06) !important;
}
/* ═══ DETAIL PAGE ═══ */
#page-detail .main-content {
padding-bottom: 120px !important;
}
.detail-hero {
padding: 16px 14px !important;
}
.detail-cover {
width: 110px !important;
height: 160px !important;
border-radius: 12px !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
.detail-info {
padding: 14px 14px 0 !important;
}
.detail-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif !important;
font-size: 19px !important;
line-height: 1.2 !important;
margin-bottom: 6px !important;
}
.detail-meta {
font-size: 11px !important;
gap: 8px;
flex-wrap: wrap;
}
.detail-genres {
margin: 10px 0;
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.detail-genre {
font-size: 10px !important;
padding: 4px 10px !important;
border-radius: 14px;
}
.detail-desc {
font-size: 12.5px !important;
line-height: 1.5 !important;
margin: 10px 0 14px !important;
}
.detail-actions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-bottom: 14px;
}
.detail-actions button {
padding: 12px !important;
font-size: 12px !important;
border-radius: 10px;
}
/* Chapter list */
.chapter-item {
padding: 14px 12px !important;
min-height: 64px !important;
border-radius: 12px;
margin: 0 14px 6px !important;
background: linear-gradient(180deg, rgba(20,14,28,0.5), rgba(14,10,20,0.4));
border: 1px solid rgba(255,255,255,0.04) !important;
display: flex;
align-items: center;
gap: 10px;
}
.chapter-item:active {
transform: scale(0.98);
border-color: rgba(212,175,55,0.25) !important;
}
.chapter-thumb {
width: 44px !important;
height: 44px !important;
border-radius: 8px;
flex-shrink: 0;
}
.chapter-title {
font-size: 13px !important;
font-weight: 600 !important;
color: rgba(255,255,255,0.95);
}
.chapter-meta {
font-size: 10.5px !important;
color: rgba(255,255,255,0.45);
margin-top: 2px;
}
.chapter-free {
font-size: 10px !important;
padding: 3px 8px !important;
border-radius: 10px;
}
.chapter-lock {
font-size: 10px !important;
padding: 4px 9px !important;
border-radius: 10px;
background: rgba(212,175,55,0.12);
border: 1px solid rgba(212,175,55,0.3);
color: #D4AF37;
white-space: nowrap;
}
/* ═══ GENRE PAGE ═══ */
#genre-filters {
padding: 0 14px !important;
display: flex;
gap: 6px !important;
flex-wrap: wrap;
}
.genre-chip {
font-size: 11px !important;
padding: 7px 13px !important;
border-radius: 18px !important;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.7);
cursor: pointer;
transition: all 0.15s;
}
.genre-chip.active {
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,0,0,0.1)) !important;
border-color: rgba(212,175,55,0.5) !important;
color: #F0D068 !important;
}
/* Discover grid */
.discover-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
padding: 12px 14px;
}
.discover-grid .manga-card {
flex: none !important;
width: 100% !important;
}
/* ═══ READER ═══ */
.rdr-header {
padding: max(env(safe-area-inset-top, 0), 6px) 10px 8px !important;
height: auto !important;
background: rgba(4,2,8,0.92) !important;
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(212,175,55,0.08) !important;
}
.rdr-back-btn,
.rdr-header-prev,
.rdr-header-next,
.rdr-upload-trigger {
width: 38px !important;
height: 38px !important;
min-width: 38px;
min-height: 38px;
border-radius: 10px;
}
.rdr-chapter-pill {
font-size: 11px !important;
padding: 6px 12px !important;
}
.rdr-body {
padding-bottom: max(env(safe-area-inset-bottom, 0), 20px) !important;
}
.rdr-panels {
padding: 0 !important;
gap: 0 !important;
}
.rdr-panel img,
.rdr-page {
width: 100%;
border-radius: 0;
display: block;
}
/* ═══ MODALS (full-screen on mobile) ═══ */
.azura-modal-box,
.aap-modal,
.bn-edit-box {
width: 100% !important;
max-width: 100% !important;
max-height: 94vh !important;
border-radius: 20px 20px 0 0 !important;
margin-top: auto !important;
margin-bottom: 0 !important;
}
/* ═══ BANNERS ═══ */
.azura-banner-slot { padding: 10px 14px !important; }
.azura-banner-carousel {
aspect-ratio: 16/9 !important;
border-radius: 14px !important;
}
.azura-banner-title {
font-size: 13.5px !important;
-webkit-line-clamp: 2;
}
.azura-banner-overlay { padding: 10px 12px !important; }
.azura-banner-controls {
top: 8px !important;
right: 8px !important;
gap: 4px !important;
}
.bn-control-btn {
width: 30px !important;
height: 30px !important;
font-size: 11px !important;
}
.azura-banner-cta {
font-size: 10px !important;
padding: 6px 10px !important;
letter-spacing: 1px;
}
/* ═══ TOASTS ═══ */
.toast {
bottom: 88px !important;
left: 14px !important;
right: 14px !important;
width: auto !important;
max-width: none !important;
font-size: 12.5px !important;
padding: 12px 16px !important;
border-radius: 12px;
}
/* ═══ Profile, Library, Coinshop, VIP — generic polish ═══ */
.profile-avatar-picker {
gap: 6px;
padding: 0 14px;
}
.coinshop-grid,
.vip-tier-grid {
grid-template-columns: 1fr !important;
gap: 12px;
padding: 0 14px;
}
.coinshop-card,
.vip-tier-card {
padding: 16px !important;
border-radius: 14px !important;
}
/* Library tabs */
.library-tabs {
padding: 0 14px;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
}
.library-tabs::-webkit-scrollbar { display: none; }
/* Hide the floating command palette hint on mobile */
.cmd-k-hint { display: none !important; }
}
/* Very small screens (≤ 380px) */
@media (max-width: 380px) {
.hero-banner .hero-title, #hero-title { font-size: 19px !important; }
.manga-card { flex: 0 0 114px !important; width: 114px !important; }
.manga-card.top10 { flex: 0 0 134px !important; width: 134px !important; }
.qs-val { font-size: 13px !important; }
.qs-icon { font-size: 15px !important; }
.bot-nav-label { font-size: 9px !important; }
.section-title { font-size: 13px !important; letter-spacing: 1px !important; }
.mobile-topbar .topbar-logo { font-size: 15px !important; letter-spacing: 3px; }
.mobile-topbar .topbar-btn { width: 34px; height: 34px; min-width: 34px; min-height: 34px; }
.mobile-topbar .topbar-coin { padding: 6px 9px; font-size: 11px; }
}
/* Landscape phone */
@media (max-height: 480px) and (orientation: landscape) and (max-width: 900px) {
.hero-banner { min-height: 200px; max-height: 240px; }
.mobile-bottom-nav { padding: 4px 12px 4px !important; }
.bot-nav-item { min-height: 42px !important; }
.bot-nav-icon svg { width: 18px !important; height: 18px !important; }
.bot-nav-label { font-size: 9px !important; }
.azura-banner-carousel { aspect-ratio: 21/7 !important; max-height: 150px; }
}
/* ── Tablet/desktop refinements ── */
@media(min-width: 1200px) {
.manga-card { width: 160px; flex: 0 0 160px; }
.manga-thumb { min-height: 220px; }
.hero-title { font-size: 42px !important; letter-spacing: 1.5px; }
.section { padding: 20px 0; }
.section-title { font-size: 18px !important; }
/* Desktop-only keyboard hint badge */
.cmd-k-hint {
position: fixed;
bottom: 20px; right: 20px;
padding: 8px 12px;
background: rgba(20,14,28,0.9);
backdrop-filter: blur(8px);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 20px;
color: rgba(212,175,55,0.7);
font-size: 11px;
font-family: 'Cinzel', serif;
letter-spacing: 1px;
cursor: pointer;
z-index: 100;
animation: cmdHintFade 0.4s ease 2s both;
}
@keyframes cmdHintFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
/* Larger desktop screens — max content width */
@media(min-width: 1400px) {
.main-content {
max-width: 1400px;
margin: 0 auto;
}
.hero-wrap, .hero { margin: 0 24px; border-radius: 24px; }
}
/* Ultra-wide (1800+) — centered reader */
@media(min-width: 1800px) {
.rdr-panels, .rdr-panel, img.rdr-page {
max-width: 920px !important;
margin: 0 auto !important;
}
}
/* ── Scrollbar polish on all pages ── */
body::-webkit-scrollbar, .rdr-body::-webkit-scrollbar { width: 8px; }
body::-webkit-scrollbar-track, .rdr-body::-webkit-scrollbar-track { background: rgba(10,7,14,0.6); }
body::-webkit-scrollbar-thumb, .rdr-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(212,175,55,0.3), rgba(139,0,0,0.3));
border-radius: 4px;
}
body::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(212,175,55,0.5), rgba(139,0,0,0.5)); }
/* ── Page transitions ── */
.page { transition: opacity 0.2s ease; }
.page:not(.active) { opacity: 0; pointer-events: none; }
.page.active { opacity: 1; }
/* ════════════════════════════════════════════════════════════════════
AZURA PREMIUM STORE v2.0
Coin · VIP · Bundle · Bonus (unified store page)
════════════════════════════════════════════════════════════════════ */
/* Hero header */
.store-hero {
position: relative;
margin: 14px 14px 0;
border-radius: 20px;
overflow: hidden;
background: linear-gradient(135deg, #1a0a3b, #0a0514);
padding: 28px 22px 22px;
border: 1px solid rgba(212, 175, 55, 0.25);
box-shadow: 0 8px 40px rgba(139, 0, 0, 0.25), inset 0 1px 0 rgba(255,255,255,0.04);
}
.store-hero-bg {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 20% 30%, rgba(212,175,55,0.15), transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 80%, rgba(139,0,0,0.25), transparent 60%),
radial-gradient(ellipse 80% 40% at 50% 0%, rgba(124,58,237,0.15), transparent 70%);
pointer-events: none;
}
.store-hero-content { position: relative; z-index: 1; text-align: center; }
.store-hero-label {
font-size: 10px;
letter-spacing: 3px;
color: rgba(212, 175, 55, 0.7);
font-family: 'Cinzel', serif;
font-weight: 700;
margin-bottom: 6px;
}
.store-hero-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 26px;
font-weight: 700;
letter-spacing: 4px;
background: linear-gradient(135deg, #F0D068 0%, #D4AF37 40%, #8B5D1C 80%, #D4AF37 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
margin-bottom: 4px;
}
.store-hero-sub {
font-size: 11px;
color: rgba(255,255,255,0.5);
letter-spacing: 1.5px;
font-family: 'Cinzel', serif;
text-transform: uppercase;
}
.store-hero-balance {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 16px;
padding: 9px 16px;
background: rgba(212, 175, 55, 0.12);
border: 1px solid rgba(212, 175, 55, 0.35);
border-radius: 24px;
cursor: pointer;
transition: all 0.2s;
}
.store-hero-balance:hover { background: rgba(212, 175, 55, 0.2); transform: translateY(-1px); }
.store-balance-icon { font-size: 16px; }
.store-balance-label { font-size: 11px; color: rgba(255,255,255,0.6); font-family: 'Cinzel', serif; letter-spacing: 1px; }
.store-balance-val {
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
color: #F0D068;
letter-spacing: 1px;
}
/* Store Tabs */
.store-tabs {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 6px;
padding: 14px;
position: sticky;
top: 0;
z-index: 10;
background: linear-gradient(180deg, rgba(4,2,8,0.95), rgba(4,2,8,0.85) 80%, transparent);
backdrop-filter: blur(12px);
}
.store-tab {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 12px 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
color: rgba(255,255,255,0.6);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
font-family: 'Cinzel', serif;
}
.store-tab:hover { background: rgba(212,175,55,0.06); border-color: rgba(212,175,55,0.2); }
.store-tab.active {
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,0,0,0.1));
border-color: rgba(212,175,55,0.5);
color: #F0D068;
box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
transform: translateY(-1px);
}
.store-tab-icon { font-size: 20px; }
.store-tab-label { font-size: 10px; letter-spacing: 1px; font-weight: 700; }
/* Content wrapper */
.store-content {
padding: 0 14px 100px;
transition: opacity 0.15s;
}
/* Generic grid for cards */
.store-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 6px;
}
@media(min-width: 640px) {
.store-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media(min-width: 960px) {
.store-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Base card */
.store-card {
position: relative;
background: linear-gradient(180deg, rgba(20,14,28,0.85), rgba(12,8,18,0.95));
border: 1px solid rgba(212,175,55,0.15);
border-radius: 16px;
padding: 18px 14px;
text-align: center;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.store-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top, rgba(212,175,55,0.1), transparent 70%);
opacity: 0;
transition: opacity 0.25s;
pointer-events: none;
}
.store-card:hover, .store-card:active {
border-color: rgba(212,175,55,0.45);
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0,0,0,0.6), 0 0 20px rgba(212,175,55,0.08);
}
.store-card:hover::before, .store-card:active::before { opacity: 1; }
.store-card.popular {
border-color: rgba(212,175,55,0.5);
box-shadow: 0 0 30px rgba(212,175,55,0.15);
}
.store-card.best-value {
border-color: rgba(255, 77, 122, 0.5);
box-shadow: 0 0 30px rgba(255, 77, 122, 0.15);
}
/* Badge */
.store-badge {
position: absolute;
top: 8px;
left: 50%;
transform: translateX(-50%);
font-size: 9px;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 1.2px;
padding: 3px 10px;
border-radius: 12px;
white-space: nowrap;
z-index: 2;
}
.store-badge.popular {
background: linear-gradient(135deg, #D4AF37, #8B5D1C);
color: #0a0710;
box-shadow: 0 2px 12px rgba(212,175,55,0.5);
}
.store-badge.best-value {
background: linear-gradient(135deg, #FF4D7A, #8B0000);
color: #fff;
box-shadow: 0 2px 12px rgba(255, 77, 122, 0.5);
}
/* ── Coin package card ── */
.coin-pkg-card { padding-top: 30px; }
.store-card-icon-wrap {
position: relative;
margin-bottom: 8px;
}
.coin-pkg-big {
font-family: 'Cinzel', serif;
font-size: 28px;
font-weight: 700;
color: #F0D068;
line-height: 1;
text-shadow: 0 0 20px rgba(212,175,55,0.3);
}
.coin-pkg-ico {
font-size: 20px;
margin-top: 4px;
filter: drop-shadow(0 2px 8px rgba(212,175,55,0.4));
}
.store-bonus {
font-size: 10px;
color: #22c55e;
font-weight: 700;
margin-bottom: 6px;
}
/* ── VIP card ── */
.vip-grid {
grid-template-columns: 1fr;
}
@media(min-width: 640px) {
.vip-grid { grid-template-columns: repeat(3, 1fr); }
}
.vip-card {
padding: 24px 16px 18px;
background: linear-gradient(180deg, rgba(26,10,59,0.3), rgba(12,8,18,0.95));
border-color: var(--vip-color, rgba(212,175,55,0.25));
}
.vip-card.popular { border-color: rgba(212,175,55,0.5); }
.vip-card.best-value { border-color: rgba(255,77,122,0.5); }
.vip-crown {
width: 52px;
height: 52px;
margin: 0 auto 10px;
border-radius: 50%;
background: linear-gradient(135deg, var(--vip-color, #D4AF37), rgba(139,93,28,0.5));
display: flex;
align-items: center;
justify-content: center;
color: #0a0710;
box-shadow: 0 4px 20px rgba(212,175,55,0.3);
}
.vip-name {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 4px;
letter-spacing: 1px;
}
.vip-days {
font-size: 12px;
color: var(--vip-color, #D4AF37);
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 14px;
}
.vip-perks {
text-align: left;
margin-bottom: 14px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.05);
}
.vip-perk {
font-size: 11px;
color: rgba(255,255,255,0.75);
padding: 3px 0;
font-family: 'Inter', system-ui, sans-serif;
}
.vip-status-banner {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border-radius: 14px;
margin-bottom: 14px;
}
.vip-status-banner.active {
background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.05));
border: 1px solid rgba(34,197,94,0.3);
}
.vip-status-banner.inactive {
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
}
.vsb-icon {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}
.vip-status-banner.active .vsb-icon { background: rgba(34,197,94,0.25); color: #22c55e; border: 1px solid rgba(34,197,94,0.5); }
.vip-status-banner.inactive .vsb-icon { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.4); border: 1px solid rgba(255,255,255,0.1); }
.vsb-title { font-size: 13px; font-weight: 700; color: #fff; font-family: 'Cinzel', serif; }
.vsb-sub { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* ── Bundle card ── */
.store-bundle-intro {
text-align: center;
margin-bottom: 16px;
padding: 10px;
}
.sbi-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #D4AF37;
letter-spacing: 2px;
margin-bottom: 4px;
}
.sbi-sub {
font-size: 11px;
color: rgba(255,255,255,0.5);
}
.bundle-card {
padding: 22px 16px 18px;
border-color: var(--bundle-color, rgba(212,175,55,0.25));
}
.bundle-icon {
font-size: 38px;
margin-bottom: 8px;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
}
.bundle-name {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
letter-spacing: 0.8px;
}
.bundle-desc {
font-size: 11px;
color: rgba(255,255,255,0.6);
margin-bottom: 12px;
line-height: 1.4;
}
.bundle-includes {
text-align: left;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.05);
margin-bottom: 14px;
}
.bundle-item {
font-size: 11px;
color: rgba(255,255,255,0.75);
padding: 3px 0;
font-family: 'Inter', system-ui, sans-serif;
}
/* ── Price & Buy button ── */
.store-price {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: #fff;
margin-bottom: 10px;
letter-spacing: 0.5px;
}
.store-btn-buy {
width: 100%;
padding: 11px;
border-radius: 10px;
background: linear-gradient(135deg, #8B0000, #C41E3A);
border: none;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.2s;
box-shadow: 0 4px 14px rgba(139,0,0,0.35);
}
.store-btn-buy:hover, .store-btn-buy:active {
filter: brightness(1.15);
box-shadow: 0 6px 20px rgba(139,0,0,0.5);
transform: translateY(-1px);
}
.store-btn-buy.vip-btn { background: linear-gradient(135deg, #D4AF37, #8B5D1C); color: #0a0710; box-shadow: 0 4px 14px rgba(212,175,55,0.35); }
.store-btn-buy.vip-btn:hover { box-shadow: 0 6px 20px rgba(212,175,55,0.5); }
.store-btn-buy.bundle-btn { background: linear-gradient(135deg, #8B5CF6, #5B3BB5); box-shadow: 0 4px 14px rgba(139,92,246,0.35); }
.store-btn-buy.bundle-btn:hover { box-shadow: 0 6px 20px rgba(139,92,246,0.5); }
/* ── Bonus tab cards ── */
.bonus-card {
padding: 24px;
margin-bottom: 14px;
background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(139,0,0,0.05));
border-color: rgba(212,175,55,0.35);
}
.bonus-glow {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(212,175,55,0.15) 0%, transparent 40%);
animation: bonusGlow 4s ease-in-out infinite;
pointer-events: none;
}
@keyframes bonusGlow {
0%, 100% { opacity: 0.5; transform: scale(1); }
50% { opacity: 1; transform: scale(1.1); }
}
.bonus-content { position: relative; z-index: 1; text-align: center; }
.bonus-icon-big {
font-size: 52px;
margin-bottom: 10px;
filter: drop-shadow(0 4px 20px rgba(212,175,55,0.4));
animation: bonusBounce 2s ease-in-out infinite;
}
@keyframes bonusBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.bonus-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #F0D068;
margin-bottom: 4px;
letter-spacing: 1.5px;
}
.bonus-desc {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-bottom: 18px;
}
.bonus-claim-btn {
padding: 12px 28px;
border-radius: 24px;
border: none;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
transition: all 0.2s;
}
.bonus-claim-btn.ready {
background: linear-gradient(135deg, #D4AF37, #8B5D1C);
color: #0a0710;
box-shadow: 0 6px 20px rgba(212,175,55,0.4);
}
.bonus-claim-btn.ready:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(212,175,55,0.55); }
.bonus-claim-btn.waiting {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
color: rgba(255,255,255,0.5);
cursor: not-allowed;
}
/* ── Promo card ── */
.promo-card { padding: 0; overflow: hidden; margin-bottom: 14px; }
.promo-strip { height: 3px; background: linear-gradient(90deg, #8B0000, #D4AF37, #8B0000); }
.promo-content { padding: 18px; }
.promo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.promo-icon {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,93,28,0.15));
border: 1px solid rgba(212,175,55,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
flex-shrink: 0;
}
.promo-title {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: #F0D068;
letter-spacing: 1px;
}
.promo-sub { font-size: 10px; color: rgba(255,255,255,0.5); margin-top: 2px; }
.promo-input-row { display: flex; gap: 8px; margin-bottom: 10px; }
.promo-input {
flex: 1;
background: rgba(212,175,55,0.05);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 10px;
padding: 12px 14px;
color: #fff;
font-size: 13px;
font-family: 'Cinzel', serif;
letter-spacing: 2px;
outline: none;
text-transform: uppercase;
transition: border-color 0.2s;
}
.promo-input:focus { border-color: rgba(212,175,55,0.5); }
.promo-apply-btn {
padding: 12px 18px;
border-radius: 10px;
background: linear-gradient(135deg, #8B0000, #C41E3A);
border: none;
color: #fff;
font-size: 11px;
font-weight: 700;
font-family: 'Cinzel', serif;
cursor: pointer;
letter-spacing: 1px;
white-space: nowrap;
transition: all 0.2s;
box-shadow: 0 3px 14px rgba(139,0,0,0.3);
}
.promo-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(139,0,0,0.45); }
.promo-result {
display: none;
padding: 10px 14px;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
text-align: center;
transition: all 0.3s;
}
.promo-hint {
margin-top: 10px;
padding: 8px 12px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.07);
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: rgba(255,255,255,0.5);
}
/* ── Invite card ── */
.invite-card {
padding: 24px;
text-align: center;
background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(12,8,18,0.95));
}
.invite-icon { font-size: 38px; margin-bottom: 10px; }
.invite-title {
font-family: 'Cinzel', serif;
font-size: 14px;
color: #fff;
margin-bottom: 4px;
letter-spacing: 1px;
}
.invite-desc { font-size: 11px; color: rgba(255,255,255,0.55); margin-bottom: 16px; }
.invite-btn {
padding: 10px 20px;
border-radius: 20px;
background: linear-gradient(135deg, #8B5CF6, #5B3BB5);
border: none;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
box-shadow: 0 4px 14px rgba(139,92,246,0.35);
}
/* ════════════════════════════════════════════════════════════════════
AUTO-HIDE NAVIGATION (scroll behavior)
════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
.mobile-topbar {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-bottom-nav, nav.mobile-bottom-nav {
transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
/* When scrolling down, hide */
body.nav-auto-hidden .mobile-topbar {
transform: translateY(-100%);
}
body.nav-auto-hidden .mobile-bottom-nav,
body.nav-auto-hidden nav.mobile-bottom-nav {
transform: translateY(100%);
}
}
/* ════════════════════════════════════════════════════════════════════
BOTTOM NAV CENTER BUTTON — premium floating $
════════════════════════════════════════════════════════════════════ */
.bot-add-btn {
width: 56px !important;
height: 56px !important;
border-radius: 50%;
background: linear-gradient(135deg, #C41E3A, #8B0000);
color: #fff;
display: flex !important;
align-items: center;
justify-content: center;
box-shadow: 0 6px 24px rgba(196, 30, 58, 0.55), 0 0 0 4px rgba(4, 2, 8, 1), 0 0 20px rgba(255, 77, 122, 0.3);
margin-top: -20px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
flex-shrink: 0;
}
.bot-add-btn::before {
content: '';
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(from 0deg, #D4AF37, #8B0000, #C41E3A, #D4AF37);
opacity: 0;
transition: opacity 0.3s;
z-index: -1;
animation: botBtnSpin 4s linear infinite;
}
@keyframes botBtnSpin { to { transform: rotate(360deg); } }
.bot-add-btn:hover::before, .bot-add-btn.active::before { opacity: 0.6; }
.bot-add-btn.active {
background: linear-gradient(135deg, #D4AF37, #8B5D1C);
color: #0a0710;
box-shadow: 0 6px 24px rgba(212, 175, 55, 0.55), 0 0 0 4px rgba(4, 2, 8, 1), 0 0 24px rgba(240, 208, 104, 0.4);
}
.bot-add-btn:active { transform: scale(0.92); }
.bot-add-btn svg { width: 26px !important; height: 26px !important; }
/* ════════════════════════════════════════════════════════════════════
v6.1 — DESKTOP FIXES & CONSISTENCY
════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
/* Detail page: ensure cover-info layout is solid */
#page-detail .detail-info { margin-top: -80px; padding-top: 0; }
#page-detail .detail-header {
display: flex;
align-items: flex-end;
gap: 24px;
}
#page-detail .detail-cover-small {
width: 150px !important;
height: 220px !important;
border-radius: 16px;
box-shadow: 0 16px 48px rgba(0,0,0,0.7);
}
#page-detail .detail-meta {
flex: 1;
padding-bottom: 8px;
}
#page-detail .detail-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 28px !important;
margin-bottom: 8px;
text-shadow: 0 2px 20px rgba(0,0,0,0.7);
}
#page-detail .detail-stats {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-size: 13px;
}
#page-detail .detail-actions {
display: flex;
gap: 12px;
margin-top: 16px;
flex-wrap: wrap;
}
#page-detail .detail-actions button {
min-width: 140px;
padding: 11px 20px !important;
}
#page-detail #chapter-list {
margin-top: 12px;
}
/* Reader on desktop — centered, max-width */
#page-reader .rdr-body {
background: linear-gradient(180deg, #0a0710, #050308);
}
#page-reader .rdr-panels {
max-width: 880px;
margin: 0 auto;
padding: 16px;
}
#page-reader .rdr-panel,
#page-reader img.rdr-page {
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
margin-bottom: 8px;
}
/* Adult page on desktop — better spacing */
#page-adult .ax-card {
transition: transform 0.2s, box-shadow 0.2s;
}
#page-adult .ax-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(196, 30, 58, 0.25);
}
/* Universal page width cap on huge screens */
#page-home .main-content,
#page-discover .main-content,
#page-library .main-content,
#page-coinshop .main-content,
#page-vip .main-content,
#page-notifications .main-content,
#page-profile .main-content,
#page-detail .main-content {
width: 100%;
}
}
/* Massive screens — center main content */
@media (min-width: 1600px) {
#page-home .main-content > *,
#page-discover .main-content > *,
#page-library .main-content > *,
#page-detail .main-content > * {
max-width: 1400px;
margin-left: auto;
margin-right: auto;
}
}
/* ════════════════════════════════════════════════════════════════════
FIX: Hide stray azura-mobile-menu-btn that may be floating around
════════════════════════════════════════════════════════════════════ */
.azura-mobile-menu-btn { display: none !important; }
/* ════════════════════════════════════════════════════════════════════════
AZURA v7.0 — PREMIUM FEATURE EXPANSION
24 new features: toasts, skeletons, hover preview, achievements, kb help, etc
════════════════════════════════════════════════════════════════════════ */
/* ── Premium Toast System ──────────────────────────────────── */
.azura-toast-host {
position: fixed;
top: max(env(safe-area-inset-top, 16px), 16px);
right: 16px;
z-index: 100001;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
max-width: calc(100vw - 32px);
}
@media (max-width: 767px) {
.azura-toast-host {
top: auto;
bottom: max(env(safe-area-inset-bottom, 80px), 80px);
left: 16px;
right: 16px;
}
}
.azura-toast {
display: flex;
align-items: center;
gap: 12px;
background: linear-gradient(135deg, rgba(20,14,28,0.97), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.25);
border-radius: 14px;
padding: 12px 14px 14px 14px;
min-width: 280px;
max-width: 380px;
pointer-events: auto;
position: relative;
overflow: hidden;
box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 24px rgba(212,175,55,0.08);
transform: translateX(120%);
opacity: 0;
transition: transform 0.32s cubic-bezier(0.16,1,0.3,1), opacity 0.25s;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.azura-toast.show { transform: translateX(0); opacity: 1; }
.azura-toast.hide { transform: translateX(120%); opacity: 0; }
@media (max-width: 767px) {
.azura-toast { transform: translateY(120%); min-width: 0; max-width: 100%; }
.azura-toast.show { transform: translateY(0); }
.azura-toast.hide { transform: translateY(120%); }
}
.azt-icon {
width: 32px; height: 32px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 16px;
font-weight: 700;
flex-shrink: 0;
}
.azura-toast-info { border-color: rgba(56,189,248,0.3); }
.azura-toast-info .azt-icon { background: rgba(56,189,248,0.15); color: #38bdf8; border: 1px solid rgba(56,189,248,0.4); }
.azura-toast-success { border-color: rgba(34,197,94,0.35); }
.azura-toast-success .azt-icon { background: rgba(34,197,94,0.18); color: #22c55e; border: 1px solid rgba(34,197,94,0.5); }
.azura-toast-error { border-color: rgba(255,77,122,0.35); }
.azura-toast-error .azt-icon { background: rgba(255,77,122,0.18); color: #ff4d7a; border: 1px solid rgba(255,77,122,0.5); }
.azura-toast-warning { border-color: rgba(240,184,64,0.35); }
.azura-toast-warning .azt-icon { background: rgba(240,184,64,0.18); color: #f0b840; border: 1px solid rgba(240,184,64,0.5); }
.azura-toast-gold { border-color: rgba(212,175,55,0.5); }
.azura-toast-gold .azt-icon {
background: linear-gradient(135deg, rgba(212,175,55,0.3), rgba(139,93,28,0.2));
color: #F0D068;
border: 1px solid rgba(212,175,55,0.6);
box-shadow: 0 0 16px rgba(212,175,55,0.2);
}
.azt-msg {
flex: 1;
font-size: 13px;
color: rgba(255,255,255,0.9);
line-height: 1.4;
font-family: 'Inter', system-ui, sans-serif;
}
.azt-close {
width: 24px; height: 24px;
border-radius: 6px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.5);
font-size: 11px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: all 0.15s;
}
.azt-close:hover { background: rgba(255,77,122,0.15); color: #ff4d7a; }
.azt-progress {
position: absolute;
bottom: 0; left: 0;
height: 2px;
width: 100%;
background: linear-gradient(90deg, rgba(212,175,55,0.4), rgba(212,175,55,0.8));
border-radius: 0 2px 2px 0;
}
.azura-toast-success .azt-progress { background: linear-gradient(90deg, rgba(34,197,94,0.4), #22c55e); }
.azura-toast-error .azt-progress { background: linear-gradient(90deg, rgba(255,77,122,0.4), #ff4d7a); }
.azura-toast-info .azt-progress { background: linear-gradient(90deg, rgba(56,189,248,0.4), #38bdf8); }
/* Hide old toast system */
.toast { display: none !important; }
/* ── Loading Skeleton ──────────────────────────────────────── */
.azura-skeleton-wrap {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
padding: 14px;
}
.skel-card {
display: flex;
flex-direction: column;
gap: 6px;
}
.skel-thumb {
aspect-ratio: 2/3;
border-radius: 12px;
background: rgba(255,255,255,0.04);
}
.skel-line {
height: 11px;
border-radius: 4px;
background: rgba(255,255,255,0.04);
width: 90%;
}
.skel-line.short { width: 60%; }
.skel-row {
display: flex; align-items: center; gap: 12px;
padding: 10px 0;
}
.skel-avatar {
width: 44px; height: 44px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
flex-shrink: 0;
}
.skel-flex { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.shimmer {
position: relative;
overflow: hidden;
}
.shimmer::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg,
transparent,
rgba(212,175,55,0.06),
rgba(212,175,55,0.12),
rgba(212,175,55,0.06),
transparent);
animation: shimmerSlide 1.6s linear infinite;
}
@keyframes shimmerSlide {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* ── Manhwa Hover Preview ─────────────────────────────────── */
.manhwa-hover-preview {
position: fixed;
z-index: 9999;
width: 320px;
background: linear-gradient(180deg, rgba(18,12,24,0.98), rgba(10,7,14,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 40px rgba(139,0,0,0.15);
opacity: 0;
transform: translateY(8px) scale(0.96);
transition: opacity 0.22s, transform 0.22s cubic-bezier(0.16,1,0.3,1);
pointer-events: none;
backdrop-filter: blur(12px);
}
.manhwa-hover-preview.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.mhp-cover {
position: relative;
height: 180px;
overflow: hidden;
background: linear-gradient(135deg, #14101e, #0a0710);
}
.mhp-cover img {
width: 100%; height: 100%;
object-fit: cover;
filter: brightness(0.85);
}
.mhp-rating {
position: absolute;
top: 10px; right: 10px;
padding: 4px 10px;
background: rgba(0,0,0,0.75);
backdrop-filter: blur(8px);
border-radius: 14px;
color: #F0D068;
font-size: 12px;
font-weight: 700;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.mhp-body { padding: 14px 16px 16px; }
.mhp-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
font-weight: 700;
color: #fff;
margin-bottom: 6px;
line-height: 1.2;
}
.mhp-meta {
display: flex; gap: 6px; flex-wrap: wrap;
margin-bottom: 8px;
}
.mhp-tag {
font-size: 10px;
padding: 3px 8px;
border-radius: 10px;
background: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.65);
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.mhp-desc {
font-size: 11.5px;
color: rgba(255,255,255,0.6);
line-height: 1.5;
margin-bottom: 10px;
}
.mhp-genres { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px; }
.mhp-genre {
font-size: 9.5px;
padding: 3px 8px;
border-radius: 10px;
background: rgba(212,175,55,0.1);
color: rgba(212,175,55,0.8);
border: 1px solid rgba(212,175,55,0.2);
}
.mhp-actions { display: flex; gap: 6px; }
.mhp-btn {
flex: 1;
padding: 9px;
border-radius: 8px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.15s;
border: 1px solid;
}
.mhp-btn.primary {
background: linear-gradient(135deg, #8B0000, #C41E3A);
border-color: rgba(165,36,36,0.5);
color: #fff;
}
.mhp-btn.primary:hover { filter: brightness(1.15); }
.mhp-btn.outline {
background: transparent;
border-color: rgba(212,175,55,0.35);
color: #F0D068;
}
.mhp-btn.outline:hover { background: rgba(212,175,55,0.08); }
@media (max-width: 1023px) { .manhwa-hover-preview { display: none !important; } }
/* ── Achievement Popup ────────────────────────────────────── */
.achievement-popup {
position: fixed;
top: 80px;
left: 50%;
transform: translateX(-50%) translateY(-30px) scale(0.9);
z-index: 100002;
background: linear-gradient(135deg, rgba(20,12,30,0.98), rgba(40,20,50,0.99));
border: 1px solid rgba(212,175,55,0.5);
border-radius: 18px;
padding: 16px 22px;
display: flex;
align-items: center;
gap: 14px;
min-width: 320px;
box-shadow: 0 16px 60px rgba(0,0,0,0.8), 0 0 80px rgba(212,175,55,0.25);
opacity: 0;
transition: opacity 0.4s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
overflow: hidden;
}
.achievement-popup.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.achievement-popup.hide { opacity: 0; transform: translateX(-50%) translateY(-20px) scale(0.95); }
.ach-pop-glow {
position: absolute;
inset: -30%;
background: radial-gradient(ellipse, rgba(212,175,55,0.25) 0%, transparent 60%);
animation: achGlow 2s ease-in-out infinite;
pointer-events: none;
}
@keyframes achGlow {
0%,100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.15); }
}
.ach-pop-icon {
width: 52px; height: 52px;
font-size: 30px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(212,175,55,0.25), rgba(139,93,28,0.15));
border: 1px solid rgba(212,175,55,0.5);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
z-index: 1;
}
.ach-pop-body { z-index: 1; }
.ach-pop-label {
font-family: 'Cinzel', serif;
font-size: 9px;
letter-spacing: 2.5px;
color: rgba(212,175,55,0.7);
margin-bottom: 4px;
font-weight: 700;
}
.ach-pop-name {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
font-weight: 700;
color: #F0D068;
margin-bottom: 2px;
letter-spacing: 0.5px;
}
.ach-pop-desc {
font-size: 11px;
color: rgba(255,255,255,0.65);
}
/* ── Keyboard Help Overlay ────────────────────────────────── */
.kb-help-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 100003;
background: rgba(4,2,8,0.7);
backdrop-filter: blur(12px);
align-items: center;
justify-content: center;
padding: 20px;
cursor: pointer;
}
.kb-help-overlay.open { display: flex; animation: fadeIn 0.2s; }
.kb-help-box {
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 18px;
width: 100%;
max-width: 480px;
max-height: 80vh;
overflow-y: auto;
cursor: default;
animation: cmdSlideDown 0.25s cubic-bezier(0.16,1,0.3,1);
}
.kb-help-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(212,175,55,0.15);
}
.kb-help-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
color: #F0D068;
letter-spacing: 1.5px;
}
.kb-help-close {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 13px;
}
.kb-help-body { padding: 16px 20px 20px; }
.kb-section-title {
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 2px;
color: rgba(212,175,55,0.6);
margin: 12px 0 8px;
font-weight: 700;
text-transform: uppercase;
}
.kb-section-title:first-child { margin-top: 0; }
.kb-row {
display: flex; align-items: center; gap: 10px;
padding: 8px 0;
border-bottom: 1px solid rgba(255,255,255,0.04);
}
.kb-row span {
flex: 1;
font-size: 12px;
color: rgba(255,255,255,0.75);
}
.kb-row kbd {
display: inline-block;
min-width: 28px;
text-align: center;
padding: 3px 8px;
background: linear-gradient(180deg, rgba(40,30,60,0.5), rgba(20,15,30,0.7));
border: 1px solid rgba(212,175,55,0.3);
border-bottom-width: 2px;
border-radius: 5px;
color: #F0D068;
font-size: 10px;
font-family: 'Cinzel', serif;
font-weight: 700;
box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}
/* ── Scroll-to-top button ─────────────────────────────────── */
.azura-scroll-top {
position: fixed;
bottom: max(env(safe-area-inset-bottom, 100px), 100px);
right: 16px;
z-index: 95;
width: 48px; height: 48px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(20,14,28,0.95), rgba(12,8,18,0.98));
border: 1px solid rgba(212,175,55,0.4);
color: #F0D068;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transform: translateY(20px) scale(0.8);
transition: opacity 0.3s, transform 0.3s cubic-bezier(0.16,1,0.3,1);
pointer-events: none;
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
backdrop-filter: blur(8px);
padding: 0;
}
.azura-scroll-top.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.azura-scroll-top:hover {
border-color: rgba(212,175,55,0.7);
color: #fff;
transform: translateY(-2px) scale(1.05);
box-shadow: 0 12px 32px rgba(212,175,55,0.3);
}
.stt-orbit {
position: absolute;
inset: -2px;
border-radius: 50%;
background: conic-gradient(from 0deg, transparent 0%, rgba(212,175,55,0.6) 25%, transparent 50%);
z-index: -1;
opacity: 0;
animation: sttSpin 3s linear infinite;
transition: opacity 0.3s;
}
.azura-scroll-top:hover .stt-orbit { opacity: 1; }
@keyframes sttSpin { to { transform: rotate(360deg); } }
@media (min-width: 768px) {
.azura-scroll-top { bottom: 24px; right: 24px; width: 52px; height: 52px; }
}
/* ── Bookmark animation ───────────────────────────────────── */
.bm-pulse { animation: bmPulse 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes bmPulse {
0% { transform: scale(1); }
40% { transform: scale(1.25); }
100% { transform: scale(1); }
}
.bm-heart {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -50%);
font-size: 24px;
color: #ff4d7a;
pointer-events: none;
animation: bmHeartFly 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
z-index: 10;
}
@keyframes bmHeartFly {
0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
20% { opacity: 1; transform: translate(-50%, -50%) scale(1.4); }
100% { opacity: 0; transform: translate(-50%, -180%) scale(0.6); }
}
/* ── Page Transitions ─────────────────────────────────────── */
/* page-transitioning class disabled — caused UI freeze when navigate() threw errors */
/*
body.page-transitioning .page.active {
opacity: 0.4;
filter: blur(2px);
transition: opacity 0.15s, filter 0.15s;
}
*/
.page {
transition: opacity 0.2s ease, filter 0.2s ease;
}
.page.active {
animation: pageEnter 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pageEnter {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Mobile menu sheet polish ─────────────────────────────── */
@media (max-width: 767px) {
.mobile-sheet-panel {
/* Improve scroll behavior */
overscroll-behavior: contain;
}
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v8.0 — 25+ FEATURES CSS
════════════════════════════════════════════════════════════════════════ */
/* ── Splash Screen ─────────────────────────────────────────── */
.azura-splash {
position: fixed; inset: 0;
z-index: 999999;
background: radial-gradient(ellipse at center, #1a0a3b 0%, #0a0710 50%, #000 100%);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 14px;
transition: opacity 0.5s ease;
}
.azura-splash.hide { opacity: 0; pointer-events: none; }
.splash-logo {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 48px;
font-weight: 900;
letter-spacing: 12px;
background: linear-gradient(135deg, #F0D068 0%, #D4AF37 50%, #8B5D1C 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 60px rgba(212,175,55,0.4);
animation: splashLogoIn 0.8s cubic-bezier(0.16,1,0.3,1);
}
.splash-tagline {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 4px;
color: rgba(212,175,55,0.5);
text-transform: uppercase;
animation: splashLogoIn 1s 0.2s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes splashLogoIn {
from { opacity: 0; transform: translateY(15px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.splash-spinner {
width: 36px; height: 36px;
border-radius: 50%;
border: 2px solid rgba(212,175,55,0.15);
border-top-color: #D4AF37;
animation: splashSpin 0.8s linear infinite;
margin-top: 16px;
}
@keyframes splashSpin { to { transform: rotate(360deg); } }
/* ── PWA Install Banner ─────────────────────────────────── */
.pwa-install-banner {
position: fixed;
bottom: 90px;
left: 16px; right: 16px;
z-index: 99998;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(20,14,28,0.97), rgba(40,20,50,0.98));
border: 1px solid rgba(212,175,55,0.4);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 32px rgba(212,175,55,0.15);
transform: translateY(120%);
transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
backdrop-filter: blur(16px);
}
.pwa-install-banner.show { transform: translateY(0); }
.pwa-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, #D4AF37, #8B5D1C);
color: #0a0710;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
box-shadow: 0 4px 14px rgba(212,175,55,0.4);
}
.pwa-text { flex: 1; min-width: 0; }
.pwa-title {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: #F0D068;
letter-spacing: 0.5px;
}
.pwa-sub {
font-size: 10.5px;
color: rgba(255,255,255,0.55);
margin-top: 2px;
}
.pwa-btn {
padding: 8px 14px;
border-radius: 10px;
background: linear-gradient(135deg, #8B0000, #C41E3A);
border: none;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
}
.pwa-close {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.5);
font-size: 12px;
cursor: pointer;
}
@media(min-width: 768px) {
.pwa-install-banner { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
}
/* ── Global Search ──────────────────────────────────────── */
.global-search-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100005;
background: rgba(4,2,8,0.65);
backdrop-filter: blur(14px);
align-items: flex-start;
justify-content: center;
padding: 80px 16px 16px;
}
.global-search-overlay.open { display: flex; animation: fadeIn 0.18s; }
.gs-box {
width: 100%; max-width: 600px;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 18px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 60px rgba(212,175,55,0.1);
animation: cmdSlideDown 0.25s cubic-bezier(0.16,1,0.3,1);
}
.gs-input-wrap {
display: flex; align-items: center; gap: 12px;
padding: 16px 18px;
border-bottom: 1px solid rgba(212,175,55,0.15);
color: rgba(212,175,55,0.6);
}
.gs-input-wrap input {
flex: 1;
background: none; border: none; outline: none;
color: #fff; font-size: 16px;
font-family: 'Inter', system-ui, sans-serif;
}
.gs-input-wrap input::placeholder { color: rgba(255,255,255,0.3); }
.gs-clear {
width: 26px; height: 26px;
border-radius: 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.5);
cursor: pointer;
font-size: 11px;
}
.gs-results { max-height: 56vh; overflow-y: auto; padding: 8px 0; }
.gs-section { padding: 6px 0; }
.gs-section + .gs-section { border-top: 1px solid rgba(255,255,255,0.04); margin-top: 4px; padding-top: 8px; }
.gs-section-title {
padding: 8px 18px;
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 1.5px;
color: rgba(212,175,55,0.55);
text-transform: uppercase;
}
.gs-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 18px;
cursor: pointer;
transition: background 0.1s;
}
.gs-item:hover, .gs-item.selected {
background: linear-gradient(90deg, rgba(212,175,55,0.1), rgba(139,0,0,0.05));
box-shadow: inset 3px 0 0 #D4AF37;
}
.gs-thumb {
width: 38px; height: 52px;
border-radius: 6px;
background: linear-gradient(135deg, #14101e, #0a0710);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
overflow: hidden;
}
.gs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gs-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(212,175,55,0.08);
border: 1px solid rgba(212,175,55,0.15);
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.gs-label {
flex: 1;
font-size: 13.5px;
color: rgba(255,255,255,0.9);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gs-label mark {
background: rgba(212,175,55,0.25);
color: #F0D068;
padding: 1px 3px;
border-radius: 3px;
}
.gs-rating {
font-size: 11px;
color: #F0D068;
font-family: 'Cinzel', serif;
font-weight: 700;
}
.gs-remove {
width: 22px; height: 22px;
background: none; border: none;
color: rgba(255,255,255,0.3);
font-size: 12px;
cursor: pointer;
border-radius: 4px;
}
.gs-remove:hover { background: rgba(255,77,122,0.15); color: #ff4d7a; }
.gs-empty { padding: 40px 20px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px; }
/* ── Floating Action Button ─────────────────────────────── */
.azura-fab {
position: fixed;
bottom: 90px;
right: 16px;
z-index: 90;
width: 52px; height: 52px;
border-radius: 50%;
background: linear-gradient(135deg, #C41E3A, #8B0000);
color: #fff;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 8px 24px rgba(196,30,58,0.5), 0 0 28px rgba(255,77,122,0.25);
transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
}
.azura-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 32px rgba(196,30,58,0.65); }
.azura-fab:active { transform: scale(0.94); }
@media (max-width: 767px) {
.azura-fab { display: none; } /* Use bottom nav instead */
}
@media (min-width: 768px) {
.azura-fab { bottom: 90px; right: 24px; }
}
/* When scroll-to-top is showing, lift fab up */
.azura-scroll-top.show ~ .azura-fab,
body:has(.azura-scroll-top.show) .azura-fab {
bottom: 154px;
}
/* ── Pull-to-Refresh ───────────────────────────────────── */
.pull-to-refresh-indicator {
position: fixed;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(20,14,28,0.95);
border: 1px solid rgba(212,175,55,0.4);
color: #D4AF37;
display: flex; align-items: center; justify-content: center;
z-index: 200;
opacity: 0;
transition: top 0.2s, opacity 0.2s;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
backdrop-filter: blur(8px);
}
.pull-to-refresh-indicator.refreshing {
top: 60px !important;
opacity: 1 !important;
animation: ptrSpin 0.8s linear infinite;
}
@keyframes ptrSpin { to { transform: translateX(-50%) rotate(360deg); } }
/* ── Reader Themes ─────────────────────────────────────── */
body.reader-theme-sepia #page-reader .rdr-body {
background: linear-gradient(180deg, #2a1f12, #1a1408);
}
body.reader-theme-oled #page-reader .rdr-body {
background: #000;
}
body.reader-theme-light #page-reader .rdr-body {
background: linear-gradient(180deg, #f5f0e8, #e8dfd0);
}
body.reader-theme-light #page-reader .rdr-panel,
body.reader-theme-light #page-reader img.rdr-page {
filter: brightness(1) contrast(1);
}
/* ── Settings Modal ─────────────────────────────────────── */
.azura-settings-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100004;
background: rgba(4,2,8,0.7);
backdrop-filter: blur(14px);
align-items: center; justify-content: center;
padding: 20px;
}
.azura-settings-overlay.open { display: flex; animation: fadeIn 0.2s; }
.azs-box {
width: 100%; max-width: 540px;
max-height: 86vh;
overflow-y: auto;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 20px;
box-shadow: 0 24px 70px rgba(0,0,0,0.8);
animation: cmdSlideDown 0.28s cubic-bezier(0.16,1,0.3,1);
}
.azs-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
border-bottom: 1px solid rgba(212,175,55,0.15);
position: sticky; top: 0;
background: linear-gradient(180deg, rgba(20,14,28,0.98), rgba(12,8,18,0.95));
backdrop-filter: blur(8px);
z-index: 1;
}
.azs-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #F0D068;
letter-spacing: 1.5px;
}
.azs-close {
width: 34px; height: 34px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
cursor: pointer;
}
.azs-body { padding: 18px 22px 24px; }
.azs-section { margin-bottom: 22px; }
.azs-section-title {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 1.5px;
color: rgba(212,175,55,0.65);
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
}
.azs-pills {
display: flex; flex-wrap: wrap; gap: 6px;
}
.azs-pill {
padding: 8px 14px;
border-radius: 20px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.7);
font-family: 'Cinzel', serif;
font-size: 12px;
cursor: pointer;
transition: all 0.15s;
}
.azs-pill:hover { border-color: rgba(212,175,55,0.3); }
.azs-pill.active {
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,0,0,0.1));
border-color: rgba(212,175,55,0.5);
color: #F0D068;
}
.azs-range {
width: 100%;
height: 6px;
border-radius: 3px;
appearance: none;
background: rgba(255,255,255,0.08);
outline: none;
}
.azs-range::-webkit-slider-thumb {
appearance: none;
width: 18px; height: 18px;
border-radius: 50%;
background: linear-gradient(135deg, #D4AF37, #8B5D1C);
border: 2px solid #0a0710;
cursor: pointer;
box-shadow: 0 0 12px rgba(212,175,55,0.4);
}
.azs-range-val {
text-align: center;
margin-top: 6px;
color: #F0D068;
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
}
.azs-action-btn {
width: 100%;
padding: 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(212,175,55,0.15), rgba(139,93,28,0.08));
border: 1px solid rgba(212,175,55,0.3);
color: #F0D068;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.15s;
}
.azs-action-btn:hover { background: rgba(212,175,55,0.22); }
.azs-actions-row { display: flex; gap: 8px; }
.azs-actions-row .azs-action-btn { flex: 1; }
.azs-avatar-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
}
.azs-avatar-pick {
aspect-ratio: 1;
border-radius: 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
font-size: 20px;
cursor: pointer;
transition: all 0.15s;
}
.azs-avatar-pick:hover { background: rgba(212,175,55,0.08); transform: scale(1.05); }
.azs-avatar-pick.active {
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,0,0,0.1));
border-color: rgba(212,175,55,0.55);
transform: scale(1.08);
box-shadow: 0 0 14px rgba(212,175,55,0.25);
}
@media(max-width: 480px) {
.azs-avatar-grid { grid-template-columns: repeat(6, 1fr); }
}
/* ── J/K Focus Ring ─────────────────────────────────────── */
.jk-focus {
outline: 2px solid #D4AF37;
outline-offset: 4px;
border-radius: 14px;
box-shadow: 0 0 30px rgba(212,175,55,0.35);
}
/* ── Star Rating Widget ─────────────────────────────────── */
.azura-rating-widget {
background: linear-gradient(135deg, rgba(20,14,28,0.5), rgba(12,8,18,0.6));
border: 1px solid rgba(212,175,55,0.18);
border-radius: 14px;
padding: 16px;
text-align: center;
margin: 12px 0;
}
.azr-label {
font-family: 'Cinzel', serif;
font-size: 11px;
color: rgba(212,175,55,0.6);
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 10px;
}
.azr-stars {
display: flex; justify-content: center; gap: 6px;
margin-bottom: 10px;
}
.azr-star {
width: 36px; height: 36px;
background: none;
border: none;
color: rgba(255,255,255,0.2);
font-size: 28px;
cursor: pointer;
transition: all 0.15s;
padding: 0;
line-height: 1;
}
.azr-star:hover { color: #F0D068; transform: scale(1.15); }
.azr-star.active { color: #D4AF37; text-shadow: 0 0 12px rgba(212,175,55,0.5); }
.azr-stats {
font-size: 11px;
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
}
/* ── Heatmap ───────────────────────────────────────────── */
.heatmap-title {
font-family: 'Cinzel', serif;
font-size: 12px;
color: rgba(212,175,55,0.7);
letter-spacing: 1px;
margin-bottom: 10px;
}
.heatmap-grid {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 3px;
margin-bottom: 8px;
}
.heatmap-cell {
aspect-ratio: 1;
border-radius: 3px;
background: rgba(255,255,255,0.04);
}
.heatmap-cell.active {
background: linear-gradient(135deg, #D4AF37, #8B5D1C);
box-shadow: 0 0 6px rgba(212,175,55,0.3);
}
.heatmap-legend {
display: flex; align-items: center;
justify-content: flex-end;
gap: 4px;
font-size: 10px;
color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif;
}
.heatmap-legend .heatmap-cell {
width: 10px; height: 10px;
aspect-ratio: 1;
}
/* ── Image blur-up loading ──────────────────────────────── */
img.img-loading {
filter: blur(8px);
opacity: 0.6;
transition: filter 0.4s ease, opacity 0.4s ease;
}
img.img-loaded {
filter: blur(0);
opacity: 1;
}
/* ── Comment styles ─────────────────────────────────────── */
.azura-comments {
padding: 16px;
}
.azc-input-row {
display: flex; gap: 8px; margin-bottom: 14px;
}
.azc-input {
flex: 1;
padding: 10px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 10px;
color: #fff;
font-size: 13px;
outline: none;
}
.azc-submit {
padding: 10px 16px;
background: linear-gradient(135deg, #8B0000, #C41E3A);
border: none;
color: #fff;
border-radius: 10px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
cursor: pointer;
}
.azc-item {
background: rgba(20,14,28,0.5);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 8px;
}
.azc-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 6px;
}
.azc-avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #8B0000, #C41E3A);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
}
.azc-name {
font-size: 12.5px; color: #F0D068;
font-weight: 700; font-family: 'Cinzel', serif;
}
.azc-time {
font-size: 10px;
color: rgba(255,255,255,0.4);
margin-left: auto;
}
.azc-text {
font-size: 13px;
color: rgba(255,255,255,0.85);
line-height: 1.5;
}
.azc-actions {
display: flex; gap: 8px;
margin-top: 8px;
align-items: center;
}
.azc-like {
display: flex; align-items: center; gap: 4px;
padding: 4px 10px;
border-radius: 16px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6);
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.azc-like.liked {
background: rgba(255,77,122,0.15);
border-color: rgba(255,77,122,0.4);
color: #ff4d7a;
}
/* ── Premium scrollbar globally ───────────────────────── */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(212,175,55,0.25), rgba(139,0,0,0.25));
border-radius: 4px;
border: 2px solid transparent;
background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, rgba(212,175,55,0.5), rgba(139,0,0,0.5));
background-clip: padding-box;
}
* { scrollbar-color: rgba(212,175,55,0.3) transparent; scrollbar-width: thin; }
/* ── Mobile FAB position fix ──────────────────────────── */
@media(max-width: 767px) {
/* Push FAB above bottom nav when shown */
.azura-fab { bottom: 110px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AZURA v9.0 — PAYMENTS + REAL CHAT + IMMERSIVE READER
═══════════════════════════════════════════════════════════════════════════ */
/* ── Payment Dialog ─────────────────────────────────────── */
.azura-pay-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100010;
background: rgba(4,2,8,0.85);
backdrop-filter: blur(16px);
align-items: center;
justify-content: center;
padding: 16px;
}
.azura-pay-overlay.open { display: flex; animation: fadeIn 0.22s ease; }
.azp-box {
width: 100%; max-width: 520px; max-height: 92vh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.35);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 60px rgba(212,175,55,0.15);
display: flex;
flex-direction: column;
animation: cmdSlideDown 0.32s cubic-bezier(0.16,1,0.3,1);
}
.azp-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(212,175,55,0.18);
background: linear-gradient(90deg, rgba(139,0,0,0.15), rgba(212,175,55,0.08));
flex-shrink: 0;
}
.azp-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
color: #F0D068;
letter-spacing: 1.5px;
}
.azp-close {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-size: 12px; cursor: pointer;
}
.azp-body {
padding: 20px;
overflow-y: auto;
}
.azp-summary {
background: linear-gradient(135deg, rgba(139,0,0,0.18), rgba(212,175,55,0.08));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 14px;
padding: 16px;
text-align: center;
margin-bottom: 18px;
}
.azp-sum-label {
font-size: 10px;
letter-spacing: 2px;
color: rgba(212,175,55,0.65);
font-family: 'Cinzel', serif;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 6px;
}
.azp-sum-name {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #fff;
margin-bottom: 4px;
}
.azp-sum-price {
font-size: 22px;
font-family: 'Cinzel', serif;
font-weight: 700;
color: #F0D068;
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.azp-sum-id {
font-size: 10px;
color: rgba(255,255,255,0.4);
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}
.azp-section { margin-bottom: 18px; }
.azp-section-title {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 1.5px;
color: rgba(212,175,55,0.7);
margin-bottom: 10px;
text-transform: uppercase;
font-weight: 700;
}
.azp-method-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
cursor: pointer;
margin-bottom: 8px;
transition: all 0.15s;
}
.azp-method-card:hover {
background: rgba(212,175,55,0.06);
border-color: rgba(212,175,55,0.3);
transform: translateY(-1px);
}
.azp-method-ico {
width: 38px; height: 38px;
border-radius: 10px;
background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(139,93,28,0.15));
border: 1px solid rgba(212,175,55,0.3);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.azp-method-info { flex: 1; min-width: 0; }
.azp-method-name {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
color: #F0D068;
margin-bottom: 2px;
}
.azp-method-num {
font-family: 'Courier New', monospace;
font-size: 13px;
color: #fff;
letter-spacing: 1px;
margin-bottom: 2px;
}
.azp-method-holder {
font-size: 10px;
color: rgba(255,255,255,0.45);
}
.azp-method-copy { font-size: 16px; opacity: 0.4; }
.azp-input, .azp-textarea {
width: 100%;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(212,175,55,0.2);
border-radius: 10px;
padding: 10px 14px;
color: #fff;
font-size: 13px;
outline: none;
font-family: 'Inter', system-ui, sans-serif;
transition: border-color 0.15s;
margin-bottom: 8px;
}
.azp-input:focus, .azp-textarea:focus { border-color: rgba(212,175,55,0.5); }
.azp-textarea { resize: vertical; min-height: 70px; max-height: 140px; }
.azp-info-box {
display: flex; gap: 10px;
padding: 12px 14px;
background: rgba(56,189,248,0.06);
border: 1px solid rgba(56,189,248,0.2);
border-radius: 12px;
margin-bottom: 18px;
}
.azp-info-icon {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(56,189,248,0.15);
color: #38bdf8;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
flex-shrink: 0;
}
.azp-info-text {
font-size: 11.5px;
color: rgba(255,255,255,0.75);
line-height: 1.5;
}
.azp-info-text b { color: #F0D068; font-family: 'Courier New', monospace; }
.azp-actions {
display: flex; gap: 8px;
}
.azp-cancel, .azp-confirm {
flex: 1;
padding: 13px;
border-radius: 12px;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
border: 1px solid;
transition: all 0.18s;
}
.azp-cancel {
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
.azp-confirm {
background: linear-gradient(135deg, #B91C1C, #8B0000);
border-color: rgba(185,28,28,0.55);
color: #fff;
box-shadow: 0 6px 20px rgba(185,28,28,0.35);
}
.azp-confirm:hover { transform: translateY(-1px); filter: brightness(1.12); }
/* ── Admin Payments Panel ─────────────────────────────── */
.apg-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 8px;
margin-bottom: 14px;
}
.apg-stat {
padding: 12px 14px;
border-radius: 10px;
text-align: center;
background: rgba(20,14,28,0.5);
border: 1px solid rgba(255,255,255,0.06);
}
.apg-stat.pending { border-color: rgba(240,184,64,0.3); background: rgba(240,184,64,0.06); }
.apg-stat.approved { border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.06); }
.apg-stat.rejected { border-color: rgba(255,77,122,0.3); background: rgba(255,77,122,0.06); }
.apg-stat.total { border-color: rgba(212,175,55,0.4); background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(139,0,0,0.05)); }
.apg-stat-val {
font-family: 'Cinzel', serif;
font-size: 22px;
font-weight: 700;
color: #fff;
line-height: 1;
margin-bottom: 4px;
}
.apg-stat.pending .apg-stat-val { color: #f0b840; }
.apg-stat.approved .apg-stat-val { color: #22c55e; }
.apg-stat.rejected .apg-stat-val { color: #ff4d7a; }
.apg-stat.total .apg-stat-val { color: #F0D068; }
.apg-stat-lbl {
font-size: 10px;
letter-spacing: 1px;
color: rgba(255,255,255,0.5);
text-transform: uppercase;
font-family: 'Cinzel', serif;
}
.apg-tabs {
display: flex; gap: 6px;
margin-bottom: 14px;
overflow-x: auto;
}
.apg-tab {
padding: 8px 14px;
border-radius: 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
color: rgba(255,255,255,0.6);
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
cursor: pointer;
white-space: nowrap;
display: flex; align-items: center; gap: 6px;
}
.apg-tab span {
padding: 1px 6px;
border-radius: 8px;
background: rgba(212,175,55,0.15);
color: #F0D068;
font-size: 9px;
}
.apg-tab.active {
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(139,0,0,0.08));
border-color: rgba(212,175,55,0.4);
color: #F0D068;
}
.apg-list {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
@media(min-width: 768px) { .apg-list { grid-template-columns: repeat(2, 1fr); } }
.apg-empty {
text-align: center;
padding: 40px;
color: rgba(255,255,255,0.4);
font-size: 12px;
}
.apg-order {
background: linear-gradient(180deg, rgba(20,14,28,0.6), rgba(14,10,20,0.5));
border: 1px solid rgba(255,255,255,0.08);
border-radius: 14px;
padding: 14px;
transition: all 0.18s;
}
.apg-order:hover { border-color: rgba(212,175,55,0.25); }
.apg-order-head {
display: flex; align-items: center; gap: 10px;
margin-bottom: 10px; padding-bottom: 10px;
border-bottom: 1px solid rgba(255,255,255,0.05);
flex-wrap: wrap;
}
.apg-order-type {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
color: #fff;
flex: 1; min-width: 80px;
}
.apg-order-amount {
font-family: 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: #F0D068;
}
.apg-badge {
font-size: 10px;
padding: 3px 9px;
border-radius: 10px;
letter-spacing: 0.5px;
font-family: 'Cinzel', serif;
font-weight: 700;
}
.apg-badge.pending { background: rgba(240,184,64,0.15); border: 1px solid rgba(240,184,64,0.4); color: #f0b840; }
.apg-badge.approved { background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.4); color: #22c55e; }
.apg-badge.rejected { background: rgba(255,77,122,0.15); border: 1px solid rgba(255,77,122,0.4); color: #ff4d7a; }
.apg-order-body { font-size: 11.5px; }
.apg-order-row {
display: flex; align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.apg-order-row span { color: rgba(255,255,255,0.5); white-space: nowrap; }
.apg-order-row b { color: rgba(255,255,255,0.9); }
.apg-order-note {
margin-top: 6px;
padding: 8px 10px;
background: rgba(255,255,255,0.03);
border-left: 2px solid rgba(212,175,55,0.4);
border-radius: 4px;
font-size: 11px;
color: rgba(255,255,255,0.7);
line-height: 1.4;
}
.apg-order-reject {
margin-top: 6px;
padding: 8px 10px;
background: rgba(255,77,122,0.08);
border-left: 2px solid #ff4d7a;
border-radius: 4px;
font-size: 11px;
color: #ff4d7a;
}
.apg-order-actions {
display: flex; gap: 6px;
margin-top: 12px;
padding-top: 12px;
border-top: 1px solid rgba(255,255,255,0.05);
}
.apg-btn {
flex: 1;
padding: 9px;
border-radius: 8px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
border: 1px solid;
transition: all 0.15s;
}
.apg-btn.approve {
background: linear-gradient(135deg, rgba(34,197,94,0.25), rgba(34,197,94,0.15));
border-color: rgba(34,197,94,0.5);
color: #22c55e;
}
.apg-btn.reject {
background: linear-gradient(135deg, rgba(255,77,122,0.18), rgba(139,0,0,0.1));
border-color: rgba(255,77,122,0.45);
color: #ff4d7a;
}
.apg-btn:hover { transform: translateY(-1px); filter: brightness(1.15); }
.adm-nav-badge {
display: none;
margin-left: auto;
padding: 1px 7px;
border-radius: 8px;
background: linear-gradient(135deg, #B91C1C, #8B0000);
color: #fff;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
}
/* ── My Orders Modal ──────────────────────────────────── */
.myord-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100009;
background: rgba(4,2,8,0.78);
backdrop-filter: blur(14px);
align-items: center;
justify-content: center;
padding: 16px;
}
.myord-overlay.open { display: flex; animation: fadeIn 0.2s; }
.myord-box {
width: 100%; max-width: 540px;
max-height: 84vh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 20px;
overflow: hidden;
display: flex; flex-direction: column;
animation: cmdSlideDown 0.28s cubic-bezier(0.16,1,0.3,1);
}
.myord-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid rgba(212,175,55,0.15);
flex-shrink: 0;
}
.myord-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
color: #F0D068;
letter-spacing: 1.5px;
}
.myord-close {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-size: 12px; cursor: pointer;
}
.myord-body { padding: 16px 20px; overflow-y: auto; }
.myord-empty {
text-align: center; padding: 40px;
color: rgba(255,255,255,0.4); font-size: 13px;
}
.myord-card {
background: rgba(20,14,28,0.5);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px;
padding: 12px 14px;
margin-bottom: 8px;
}
.myord-card.approved { border-color: rgba(34,197,94,0.25); }
.myord-card.rejected { border-color: rgba(255,77,122,0.25); opacity: 0.7; }
.myord-card-head {
display: flex; align-items: center; justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.myord-name {
font-family: 'Cinzel', serif;
font-size: 13px; font-weight: 700;
color: #fff;
}
.myord-status {
font-size: 10px;
padding: 3px 9px;
border-radius: 10px;
font-family: 'Cinzel', serif;
font-weight: 700;
}
.myord-status.pending { background: rgba(240,184,64,0.15); color: #f0b840; }
.myord-status.approved { background: rgba(34,197,94,0.15); color: #22c55e; }
.myord-status.rejected { background: rgba(255,77,122,0.15); color: #ff4d7a; }
.myord-meta {
display: flex; justify-content: space-between;
font-size: 11px;
color: rgba(255,255,255,0.5);
}
.myord-reject {
margin-top: 6px;
font-size: 11px;
color: #ff4d7a;
}
.profile-orders-card {
margin: 14px 16px;
}
.prof-myord-btn {
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(212,175,55,0.1), rgba(139,0,0,0.05));
border: 1px solid rgba(212,175,55,0.25);
border-radius: 14px;
color: #fff;
cursor: pointer;
transition: all 0.2s;
}
.prof-myord-btn:hover {
border-color: rgba(212,175,55,0.5);
transform: translateY(-1px);
}
.prof-myord-icon {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(212,175,55,0.18);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
.prof-myord-text { flex: 1; text-align: left; }
.prof-myord-title {
font-family: 'Cinzel', serif;
font-size: 13px; font-weight: 700;
color: #F0D068;
}
.prof-myord-sub {
font-size: 10.5px;
color: rgba(255,255,255,0.5);
margin-top: 2px;
}
.prof-myord-arrow {
font-size: 22px;
color: rgba(212,175,55,0.5);
}
/* ── Real-time Chat Improvements ──────────────────────── */
.chat-empty {
text-align: center;
padding: 40px 20px;
color: rgba(255,255,255,0.4);
}
.chat-empty-ico {
font-size: 36px;
margin-bottom: 10px;
opacity: 0.5;
}
.chat-empty-title {
font-family: 'Cinzel', serif;
font-size: 13px;
color: rgba(212,175,55,0.6);
margin-bottom: 4px;
}
.chat-empty-sub {
font-size: 11px;
color: rgba(255,255,255,0.35);
}
.chat-msg {
display: flex;
gap: 8px;
padding: 6px 12px;
margin-bottom: 4px;
transition: background 0.2s;
}
.chat-msg.flash {
background: rgba(212,175,55,0.08);
border-radius: 10px;
animation: chatFlash 1s ease;
}
@keyframes chatFlash {
0%, 100% { background: rgba(212,175,55,0.18); }
50% { background: rgba(212,175,55,0.06); }
}
.chat-msg.mine { flex-direction: row-reverse; }
.chat-msg-avatar {
width: 30px; height: 30px;
border-radius: 50%;
background: linear-gradient(135deg, #B91C1C, #8B0000);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
flex-shrink: 0;
}
.chat-msg.owner-msg .chat-msg-avatar { background: linear-gradient(135deg, #EAB308, #8B5D1C); }
.chat-msg.admin-msg .chat-msg-avatar { background: linear-gradient(135deg, #F0D068, #B91C1C); }
.chat-msg-bubble {
flex: 1; max-width: 80%;
background: rgba(20,14,28,0.6);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
padding: 8px 12px;
position: relative;
}
.chat-msg.mine .chat-msg-bubble {
background: linear-gradient(135deg, rgba(185,28,28,0.18), rgba(139,0,0,0.12));
border-color: rgba(185,28,28,0.3);
}
.chat-msg-head {
display: flex; align-items: center; gap: 5px;
margin-bottom: 4px;
}
.chat-msg-name {
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
color: #F0D068;
}
.chat-vip-badge {
font-size: 8px;
padding: 1px 5px;
border-radius: 4px;
background: linear-gradient(135deg, #EAB308, #8B5D1C);
color: #0a0710;
font-weight: 700;
letter-spacing: 0.5px;
}
.chat-owner-badge {
font-size: 8px;
padding: 1px 5px;
border-radius: 4px;
background: linear-gradient(135deg, #F0D068, #B91C1C);
color: #fff;
font-weight: 700;
letter-spacing: 0.5px;
}
.chat-admin-badge {
font-size: 8px;
padding: 1px 5px;
border-radius: 4px;
background: rgba(56,189,248,0.25);
color: #38bdf8;
border: 1px solid rgba(56,189,248,0.4);
font-weight: 700;
letter-spacing: 0.5px;
}
.chat-msg-reply {
display: block;
padding: 6px 8px;
margin-bottom: 6px;
background: rgba(255,255,255,0.04);
border-left: 2px solid rgba(212,175,55,0.4);
border-radius: 4px;
font-size: 10.5px;
color: rgba(255,255,255,0.6);
cursor: pointer;
line-height: 1.3;
}
.chat-msg-reply b { color: #F0D068; }
.chat-msg-reply:hover { background: rgba(255,255,255,0.06); }
.chat-msg-text {
font-size: 13px;
color: rgba(255,255,255,0.92);
line-height: 1.45;
word-wrap: break-word;
font-family: 'Inter', system-ui, sans-serif;
}
.chat-msg-text a { color: #38bdf8; text-decoration: underline; }
.chat-msg-meta {
display: flex;
align-items: center;
gap: 6px;
margin-top: 4px;
}
.chat-msg-time {
font-size: 9px;
color: rgba(255,255,255,0.35);
font-family: 'Cinzel', serif;
}
.chat-msg-action {
background: none;
border: none;
color: rgba(255,255,255,0.4);
cursor: pointer;
font-size: 12px;
padding: 2px 4px;
border-radius: 4px;
transition: all 0.15s;
}
.chat-msg-action:hover {
background: rgba(212,175,55,0.1);
color: #F0D068;
}
.chat-msg-reactions {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 6px;
}
.chat-reaction {
display: inline-flex;
align-items: center;
gap: 3px;
padding: 2px 7px;
border-radius: 12px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
font-size: 11px;
cursor: pointer;
transition: all 0.15s;
}
.chat-reaction:hover { transform: scale(1.05); }
.chat-reaction.mine {
background: rgba(212,175,55,0.18);
border-color: rgba(212,175,55,0.4);
}
.chat-reaction b {
color: #F0D068;
font-size: 10px;
font-weight: 700;
font-family: 'Cinzel', serif;
}
.chat-emoji-picker {
position: absolute;
bottom: -40px;
left: 12px;
z-index: 50;
display: flex; flex-wrap: wrap;
gap: 2px;
padding: 6px 8px;
background: rgba(20,14,28,0.98);
border: 1px solid rgba(212,175,55,0.3);
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,0.6);
max-width: 220px;
animation: cmdSlideDown 0.18s ease;
}
.cep-btn {
background: none; border: none;
font-size: 18px;
width: 28px; height: 28px;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s;
}
.cep-btn:hover {
background: rgba(212,175,55,0.1);
transform: scale(1.2);
}
.chat-input-emoji-picker {
display: flex; flex-wrap: wrap;
gap: 2px;
padding: 8px;
background: rgba(20,14,28,0.98);
border: 1px solid rgba(212,175,55,0.3);
border-radius: 12px 12px 0 0;
border-bottom: none;
margin-bottom: -1px;
}
.chat-input-emoji-picker button {
background: none; border: none;
font-size: 20px;
width: 36px; height: 36px;
border-radius: 6px;
cursor: pointer;
transition: all 0.12s;
}
.chat-input-emoji-picker button:hover {
background: rgba(212,175,55,0.1);
transform: scale(1.15);
}
.chat-reply-context {
display: none;
align-items: stretch;
gap: 0;
background: rgba(212,175,55,0.06);
border-top: 1px solid rgba(212,175,55,0.2);
padding: 0;
animation: chatReplyIn 0.2s ease;
}
.chat-reply-context.show { display: flex; }
@keyframes chatReplyIn {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.crc-bar {
width: 3px;
background: linear-gradient(180deg, #F0D068, #B91C1C);
}
.crc-content {
flex: 1; min-width: 0;
padding: 8px 12px;
}
.crc-name {
font-size: 10px;
color: #F0D068;
font-family: 'Cinzel', serif;
font-weight: 700;
}
.crc-preview {
font-size: 11px;
color: rgba(255,255,255,0.55);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crc-cancel {
width: 28px;
background: none; border: none;
color: rgba(255,255,255,0.5);
font-size: 12px;
cursor: pointer;
flex-shrink: 0;
}
.rdr-chat-input-emoji {
width: 32px; height: 32px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
font-size: 16px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.rdr-chat-input-emoji:hover {
background: rgba(212,175,55,0.1);
border-color: rgba(212,175,55,0.3);
}
/* ── Reader IMMERSIVE MODE ─────────────────────────── */
body.reader-immersive .rdr-header {
transform: translateY(-100%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
}
body.reader-immersive .rdr-chapter-nav {
transform: translateY(110%);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), opacity 0.3s;
}
body.reader-immersive .rdr-progress-wrap {
opacity: 0.3;
}
body.reader-immersive .rdr-chat-toggle-btn {
opacity: 0.4;
}
body:not(.reader-immersive) .rdr-header,
body:not(.reader-immersive) .rdr-chapter-nav {
transform: translateY(0);
opacity: 1;
transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), opacity 0.25s;
}
/* On reader, hide global FAB / scroll-to-top to keep clean */
#page-reader.active ~ .azura-fab,
body:has(#page-reader.active) .azura-fab,
body:has(#page-reader.active) .azura-scroll-top,
body:has(#page-reader.active) #azura-mobile-menu-btn {
display: none !important;
}
/* Hide bottom nav on reader (already done elsewhere but ensure) */
#page-reader.active ~ .mobile-bottom-nav,
body:has(#page-reader.active) .mobile-bottom-nav {
display: none !important;
}
/* When chat is open, dim the reader content slightly */
body:has(.rdr-chat-panel.open) .rdr-panels {
filter: brightness(0.92);
}
/* Reader page tap zones — visual hint on first load */
@keyframes readerTapHint {
0%, 100% { opacity: 0; }
10%, 30% { opacity: 0.3; }
}
/* ── Mobile-specific reader tweaks ────────────────────── */
@media (max-width: 767px) {
.rdr-chat-panel.open {
height: 88vh !important;
border-radius: 22px 22px 0 0 !important;
}
.rdr-chat-messages { padding-bottom: 60px; }
/* Immersive: tap shows controls briefly */
body.reader-immersive .rdr-progress-wrap { opacity: 0.5; }
/* Make tap area for revealing UI */
.rdr-body { position: relative; }
/* My Orders button on profile — full-width */
.profile-orders-card { margin: 12px 14px; }
}
@media (min-width: 768px) {
.rdr-chat-panel { right: 0; height: 100vh !important; }
}
/* Tap to reveal hint shown briefly on reader open */
.rdr-tap-hint {
position: fixed;
bottom: 30px; left: 50%;
transform: translateX(-50%);
padding: 8px 16px;
background: rgba(20,14,28,0.85);
backdrop-filter: blur(8px);
border: 1px solid rgba(212,175,55,0.3);
border-radius: 20px;
color: rgba(212,175,55,0.8);
font-size: 11px;
font-family: 'Cinzel', serif;
letter-spacing: 1px;
z-index: 50;
animation: rdrTapHintFade 4s ease forwards;
}
@keyframes rdrTapHintFade {
0% { opacity: 0; transform: translate(-50%, 10px); }
20%, 70% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -10px); pointer-events: none; }
}
/* ═══════════════════════════════════════════════════════════════════════════
AZURA v10.0 — TELEGRAM + COIN HISTORY + PROMOS + PROFILE + ADMIN STATS
═══════════════════════════════════════════════════════════════════════════ */
/* ── Telegram Modal ──────────────────────────────────── */
.tg-modal-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100012;
background: rgba(4,2,8,0.78);
backdrop-filter: blur(14px);
align-items: center; justify-content: center;
padding: 16px;
}
.tg-modal-overlay.open { display: flex; animation: fadeIn 0.2s; }
.tg-modal-box {
width: 100%; max-width: 540px;
max-height: 86vh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(56,189,248,0.3);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 60px rgba(56,189,248,0.1);
display: flex; flex-direction: column;
animation: cmdSlideDown 0.32s cubic-bezier(0.16,1,0.3,1);
}
.tg-modal-header {
display: flex; align-items: center; gap: 12px;
padding: 16px 20px;
background: linear-gradient(90deg, rgba(56,189,248,0.12), rgba(212,175,55,0.05));
border-bottom: 1px solid rgba(56,189,248,0.2);
flex-shrink: 0;
}
.tg-modal-title-wrap { display: flex; align-items: center; gap: 12px; flex: 1; }
.tg-modal-icon {
width: 36px; height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #38bdf8, #1e88e5);
color: #fff;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.tg-modal-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 14px;
color: #fff;
letter-spacing: 0.5px;
}
.tg-modal-sub {
font-size: 11px;
color: rgba(56,189,248,0.7);
margin-top: 2px;
}
.tg-modal-close {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.5);
font-size: 13px; cursor: pointer;
}
.tg-modal-body {
padding: 14px 20px 20px;
overflow-y: auto;
}
.tg-empty {
padding: 40px 20px;
text-align: center;
}
.tg-empty-ico { font-size: 48px; margin-bottom: 10px; opacity: 0.5; }
.tg-empty-title {
font-family: 'Cinzel', serif;
font-size: 13px;
color: rgba(255,255,255,0.6);
margin-bottom: 4px;
}
.tg-empty-sub { font-size: 11px; color: rgba(255,255,255,0.35); }
.tg-channel-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(20,14,28,0.5);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 14px;
margin-bottom: 8px;
transition: all 0.18s;
}
.tg-channel-card:hover {
border-color: rgba(56,189,248,0.3);
transform: translateY(-1px);
}
.tg-channel-card.subbed {
background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(20,14,28,0.5));
border-color: rgba(34,197,94,0.25);
}
.tg-ch-avatar {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #38bdf8, #1e88e5);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
flex-shrink: 0;
overflow: hidden;
}
.tg-ch-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tg-ch-info { flex: 1; min-width: 0; }
.tg-ch-name {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 2px;
display: flex; align-items: center; gap: 6px;
}
.tg-ch-meta {
font-size: 10.5px;
color: rgba(255,255,255,0.5);
display: flex; gap: 6px;
}
.tg-ch-meta a {
color: #38bdf8;
text-decoration: none;
}
.tg-ch-meta a:hover { text-decoration: underline; }
.tg-ch-desc {
margin-top: 4px;
font-size: 11px;
color: rgba(255,255,255,0.55);
line-height: 1.4;
}
.tg-ch-btn {
padding: 8px 14px;
border-radius: 10px;
background: linear-gradient(135deg, #38bdf8, #1e88e5);
border: none;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.8px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.15s;
box-shadow: 0 4px 12px rgba(56,189,248,0.25);
}
.tg-ch-btn:hover { transform: translateY(-1px); }
.tg-ch-btn.subbed {
background: rgba(34,197,94,0.15);
border: 1px solid rgba(34,197,94,0.4);
color: #22c55e;
box-shadow: none;
cursor: default;
}
/* ── Telegram Admin Panel ────────────────────────────── */
.tg-add-card {
background: linear-gradient(135deg, rgba(20,16,32,0.98), rgba(14,10,20,0.98));
border: 1px solid rgba(56,189,248,0.25);
border-radius: 16px;
overflow: hidden;
margin-bottom: 16px;
}
.tg-add-head {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(90deg, rgba(56,189,248,0.15), rgba(212,175,55,0.05));
padding: 12px 18px;
border-bottom: 1px solid rgba(56,189,248,0.2);
font-family: 'Cinzel', serif;
font-size: 12px; font-weight: 700;
color: #38bdf8;
letter-spacing: 1px;
}
.tg-add-body { padding: 16px 18px; }
.tg-add-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 12px;
}
.tg-add-row { display: flex; flex-direction: column; }
.tg-add-row.tg-add-full { grid-column: 1 / -1; }
.tg-add-row label {
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 1px;
color: var(--gold-dim, #8B5D1C);
margin-bottom: 5px;
text-transform: uppercase;
}
@media(max-width: 640px) { .tg-add-grid { grid-template-columns: 1fr; } }
.tg-add-toggle-row {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
}
.tg-toggle-label {
display: flex; align-items: center; gap: 8px;
cursor: pointer;
flex: 1;
}
.tg-toggle-label input { display: none; }
.tg-toggle-vis {
width: 36px; height: 20px;
border-radius: 10px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.08);
position: relative;
transition: background 0.2s;
}
.tg-toggle-vis::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 50%;
background: #fff;
transition: left 0.2s;
}
.tg-toggle-label input:checked + .tg-toggle-vis {
background: linear-gradient(135deg, #38bdf8, #1e88e5);
border-color: rgba(56,189,248,0.5);
}
.tg-toggle-label input:checked + .tg-toggle-vis::after { left: 18px; }
.tg-toggle-label span:last-child {
font-size: 11px;
color: rgba(255,255,255,0.7);
font-family: 'Cinzel', serif;
}
.tg-channels-list { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tg-admin-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: var(--dark3, rgba(20,14,28,0.6));
border: 1px solid var(--border, rgba(255,255,255,0.06));
border-radius: 12px;
transition: all 0.18s;
}
.tg-admin-card.inactive { opacity: 0.5; }
.tg-admin-card:hover { border-color: rgba(56,189,248,0.3); }
.tg-sync-badge {
display: inline-block;
font-size: 9px;
padding: 1px 6px;
border-radius: 6px;
background: rgba(212,175,55,0.18);
border: 1px solid rgba(212,175,55,0.35);
color: #F0D068;
letter-spacing: 0.5px;
}
.tg-admin-actions { display: flex; gap: 4px; flex-shrink: 0; }
/* ── Coin Transaction History Modal ────────────────── */
.cx-modal-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100013;
background: rgba(4,2,8,0.78);
backdrop-filter: blur(14px);
align-items: center; justify-content: center;
padding: 16px;
}
.cx-modal-overlay.open { display: flex; animation: fadeIn 0.2s; }
.cx-modal-box {
width: 100%; max-width: 540px;
max-height: 86vh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.3);
border-radius: 20px;
overflow: hidden;
display: flex; flex-direction: column;
animation: cmdSlideDown 0.32s cubic-bezier(0.16,1,0.3,1);
}
.cx-modal-header {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px;
background: linear-gradient(90deg, rgba(212,175,55,0.15), rgba(139,0,0,0.05));
border-bottom: 1px solid rgba(212,175,55,0.2);
flex-shrink: 0;
}
.cx-modal-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
color: #F0D068;
letter-spacing: 1.2px;
flex: 1;
}
.cx-modal-balance {
padding: 5px 10px;
border-radius: 14px;
background: rgba(212,175,55,0.18);
border: 1px solid rgba(212,175,55,0.35);
color: #F0D068;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
}
.cx-modal-close {
width: 30px; height: 30px;
border-radius: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-size: 12px; cursor: pointer;
}
.cx-modal-body {
padding: 12px 16px 16px;
overflow-y: auto;
}
.cx-empty { padding: 40px; text-align: center; color: rgba(255,255,255,0.4); font-size: 13px; }
.cx-row {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 10px;
margin-bottom: 6px;
}
.cx-row-icon {
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(212,175,55,0.1);
border: 1px solid rgba(212,175,55,0.2);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
flex-shrink: 0;
}
.cx-row.spend .cx-row-icon { background: rgba(255,77,122,0.1); border-color: rgba(255,77,122,0.25); }
.cx-row.earn .cx-row-icon, .cx-row.bonus .cx-row-icon, .cx-row.gift .cx-row-icon { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.25); }
.cx-row-info { flex: 1; min-width: 0; }
.cx-row-desc {
font-size: 12.5px;
color: rgba(255,255,255,0.85);
margin-bottom: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cx-row-time {
font-size: 10.5px;
color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif;
}
.cx-row-amount {
font-family: 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
flex-shrink: 0;
white-space: nowrap;
}
.cx-row-amount.positive { color: #22c55e; }
.cx-row-amount.negative { color: #ff4d7a; }
/* ── Profile Extras Grid ──────────────────────────── */
.prof-extras-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
padding: 14px 16px;
margin-top: 14px;
}
@media(min-width: 768px) { .prof-extras-grid { grid-template-columns: repeat(4, 1fr); } }
.prof-x-btn {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
background: linear-gradient(135deg, rgba(20,14,28,0.7), rgba(14,10,20,0.6));
border: 1px solid rgba(255,255,255,0.05);
border-radius: 12px;
color: #fff;
cursor: pointer;
text-align: left;
transition: all 0.18s;
}
.prof-x-btn:hover {
border-color: rgba(212,175,55,0.3);
transform: translateY(-2px);
background: linear-gradient(135deg, rgba(20,14,28,0.85), rgba(14,10,20,0.75));
}
.prof-x-icon {
width: 38px; height: 38px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
flex-shrink: 0;
}
.prof-x-text { flex: 1; min-width: 0; }
.prof-x-title {
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
color: #fff;
margin-bottom: 1px;
}
.prof-x-sub {
font-size: 10px;
color: rgba(255,255,255,0.4);
}
/* ── Telegram Home Banner ──────────────────────────── */
.tg-home-banner {
display: flex;
align-items: center;
gap: 12px;
margin: 12px 14px;
padding: 14px 16px;
background: linear-gradient(135deg, rgba(56,189,248,0.12), rgba(20,14,28,0.7));
border: 1px solid rgba(56,189,248,0.3);
border-radius: 16px;
cursor: pointer;
transition: all 0.2s;
}
.tg-home-banner:hover {
border-color: rgba(56,189,248,0.55);
transform: translateY(-1px);
}
.tgh-icon {
width: 44px; height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #38bdf8, #1e88e5);
display: flex; align-items: center; justify-content: center;
font-size: 22px;
flex-shrink: 0;
}
.tgh-text { flex: 1; min-width: 0; }
.tgh-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 14px;
color: #38bdf8;
margin-bottom: 2px;
}
.tgh-sub {
font-size: 11px;
color: rgba(255,255,255,0.6);
}
.tgh-btn {
padding: 8px 14px;
background: linear-gradient(135deg, #38bdf8, #1e88e5);
color: #fff;
border: none;
border-radius: 10px;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
cursor: pointer;
flex-shrink: 0;
}
/* ── Admin Stats Row (dashboard) ───────────────────── */
.admin-stats-row {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
margin-bottom: 14px;
}
@media(min-width: 768px) { .admin-stats-row { grid-template-columns: repeat(6, 1fr); } }
.ast-card {
padding: 10px 12px;
background: linear-gradient(180deg, rgba(20,14,28,0.7), rgba(14,10,20,0.5));
border: 1px solid rgba(212,175,55,0.15);
border-radius: 10px;
text-align: center;
}
.ast-card.vip { border-color: rgba(212,175,55,0.4); background: linear-gradient(180deg, rgba(212,175,55,0.08), rgba(14,10,20,0.5)); }
.ast-card.pending { border-color: rgba(240,184,64,0.35); }
.ast-card.revenue { border-color: rgba(34,197,94,0.35); background: linear-gradient(180deg, rgba(34,197,94,0.08), rgba(14,10,20,0.5)); }
.ast-val {
font-family: 'Cinzel', serif;
font-size: 20px;
font-weight: 700;
color: #F0D068;
line-height: 1;
margin-bottom: 4px;
}
.ast-card.vip .ast-val { color: #F0D068; }
.ast-card.revenue .ast-val { color: #22c55e; }
.ast-card.pending .ast-val { color: #f0b840; }
.ast-lbl {
font-size: 9.5px;
letter-spacing: 0.5px;
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
}
/* ── Subscribe Button on Detail ────────────────────── */
.detail-sub-btn {
padding: 10px 16px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.1);
border-radius: 10px;
color: rgba(255,255,255,0.7);
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.15s;
}
.detail-sub-btn[data-subbed="1"] {
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(139,93,28,0.1));
border-color: rgba(212,175,55,0.5);
color: #F0D068;
}
.detail-sub-btn:hover { transform: translateY(-1px); }
/* ── Login/Register polish ─────────────────────────── */
.azura-input:focus { border-color: #B91C1C !important; box-shadow: 0 0 0 3px rgba(185,28,28,0.15); outline: none; }
.azura-btn-loading { opacity: 0.7; pointer-events: none; }
.azura-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.azura-error.show {
animation: errorShake 0.4s ease;
}
@keyframes errorShake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-6px); }
50% { transform: translateX(6px); }
75% { transform: translateX(-3px); }
}
/* ── Global Responsive Fixes ───────────────────────── */
* { box-sizing: border-box; }
body { overflow-x: hidden; }
.page { max-width: 100vw; }
.main-content { max-width: 100%; box-sizing: border-box; }
img, video, canvas { max-width: 100%; height: auto; display: block; }
button { -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) {
/* All buttons min 38px tall on mobile */
button, .btn-primary, .btn-outline {
min-height: 38px;
padding: 8px 14px;
}
/* Modal padding fixes */
.azura-modal-box,
.aap-modal,
.azp-box, .myord-box, .cx-modal-box, .tg-modal-box,
.azura-settings-overlay .azs-box,
.global-search-overlay .gs-box,
.cmd-palette-box, .kb-help-box {
width: 100% !important;
max-width: calc(100vw - 16px) !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v11.0 — UNIFIED BULK PDF UPLOADER + MICRO FIXES
════════════════════════════════════════════════════════════════════════ */
/* ── Bulk Uploader Modal ─────────────────────────── */
.bulk-uploader-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100020;
background: rgba(4,2,8,0.85);
backdrop-filter: blur(16px);
align-items: center; justify-content: center;
padding: 16px;
}
.bulk-uploader-overlay.open { display: flex; animation: fadeIn 0.22s ease; }
.bu-box {
width: 100%; max-width: 720px;
max-height: 92vh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(12,8,18,0.99));
border: 1px solid rgba(212,175,55,0.35);
border-radius: 22px;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 60px rgba(212,175,55,0.12);
display: flex; flex-direction: column;
animation: cmdSlideDown 0.32s cubic-bezier(0.16,1,0.3,1);
}
.bu-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 22px;
background: linear-gradient(90deg, rgba(139,0,0,0.18), rgba(212,175,55,0.08));
border-bottom: 1px solid rgba(212,175,55,0.25);
flex-shrink: 0;
}
.bu-title-wrap { flex: 1; }
.bu-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #F0D068;
letter-spacing: 1.5px;
margin-bottom: 3px;
}
.bu-subtitle {
font-size: 11px;
color: rgba(255,255,255,0.55);
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.bu-close {
width: 34px; height: 34px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-size: 14px; cursor: pointer;
transition: all 0.15s;
}
.bu-close:hover { background: rgba(255,77,122,0.1); color: #ff4d7a; border-color: rgba(255,77,122,0.3); }
.bu-body {
padding: 18px 22px 8px;
overflow-y: auto;
flex: 1;
}
.bu-row { margin-bottom: 14px; }
.bu-label {
display: block;
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 1.5px;
color: rgba(212,175,55,0.7);
margin-bottom: 6px;
font-weight: 700;
text-transform: uppercase;
}
.bu-input {
width: 100%;
padding: 11px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 10px;
color: #fff;
font-size: 13px;
outline: none;
font-family: 'Inter', system-ui, sans-serif;
transition: border-color 0.15s;
}
.bu-input:focus { border-color: rgba(212,175,55,0.55); box-shadow: 0 0 0 3px rgba(212,175,55,0.08); }
select.bu-input {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 38px;
cursor: pointer;
}
/* Drop zone */
.bu-dropzone {
position: relative;
border: 2px dashed rgba(212,175,55,0.35);
border-radius: 16px;
padding: 32px 20px;
background: linear-gradient(135deg, rgba(212,175,55,0.04), rgba(139,0,0,0.03));
cursor: pointer;
transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
margin-bottom: 14px;
min-height: 160px;
}
.bu-dropzone:hover {
border-color: rgba(212,175,55,0.6);
background: linear-gradient(135deg, rgba(212,175,55,0.08), rgba(139,0,0,0.05));
transform: translateY(-1px);
}
.bu-dropzone.dragover {
border-color: #D4AF37;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(139,0,0,0.08));
box-shadow: 0 0 32px rgba(212,175,55,0.25);
transform: scale(1.01);
}
.bu-drop-content { text-align: center; }
.bu-drop-icon {
display: inline-flex;
align-items: center; justify-content: center;
width: 80px; height: 80px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(212,175,55,0.18), rgba(139,93,28,0.12));
border: 1px solid rgba(212,175,55,0.35);
color: #F0D068;
margin-bottom: 12px;
box-shadow: 0 8px 24px rgba(212,175,55,0.12);
}
.bu-drop-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
color: #F0D068;
letter-spacing: 0.8px;
margin-bottom: 4px;
}
.bu-drop-sub {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-bottom: 8px;
}
.bu-drop-sub a {
color: #F0D068;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.bu-drop-sub a:hover { color: #fff; }
.bu-drop-hint {
display: inline-block;
margin-top: 6px;
padding: 5px 12px;
background: rgba(56,189,248,0.08);
border: 1px solid rgba(56,189,248,0.25);
border-radius: 14px;
font-size: 10.5px;
color: rgba(56,189,248,0.85);
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
/* Settings */
.bu-settings {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
@media (max-width: 640px) { .bu-settings { grid-template-columns: 1fr; } }
.bu-setting {
display: flex; flex-direction: column;
gap: 6px;
}
.bu-setting label {
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 1px;
color: rgba(212,175,55,0.65);
font-weight: 700;
text-transform: uppercase;
}
.bu-pills {
display: flex; gap: 4px;
}
.bu-pill {
flex: 1;
padding: 9px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 9px;
color: rgba(255,255,255,0.65);
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.15s;
}
.bu-pill:hover { border-color: rgba(212,175,55,0.3); }
.bu-pill.active {
background: linear-gradient(135deg, rgba(185,28,28,0.25), rgba(139,0,0,0.15));
border-color: rgba(185,28,28,0.55);
color: #fff;
box-shadow: 0 4px 14px rgba(185,28,28,0.2);
}
/* Queue */
.bu-queue-wrap {
background: rgba(20,14,28,0.5);
border: 1px solid rgba(212,175,55,0.18);
border-radius: 14px;
padding: 12px 14px;
margin-bottom: 12px;
}
.bu-queue-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 10px;
}
.bu-queue-title {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: #F0D068;
letter-spacing: 0.5px;
}
.bu-queue-status {
margin-left: 8px;
font-size: 11px;
color: rgba(255,255,255,0.6);
font-weight: 400;
}
.bu-queue-actions { display: flex; gap: 6px; }
.bu-mini-btn {
padding: 5px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: rgba(255,255,255,0.6);
font-size: 10.5px;
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.15s;
}
.bu-mini-btn:hover { background: rgba(255,77,122,0.12); color: #ff4d7a; border-color: rgba(255,77,122,0.3); }
/* Overall progress */
.bu-progress-overall {
position: relative;
height: 8px;
background: rgba(255,255,255,0.04);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.bu-progress-bar {
height: 100%;
background: linear-gradient(90deg, #B91C1C 0%, #D4AF37 50%, #F0D068 100%);
transition: width 0.3s ease;
border-radius: 4px;
box-shadow: 0 0 12px rgba(212,175,55,0.4);
}
.bu-progress-pct {
position: absolute;
top: -22px; right: 0;
font-size: 10px;
color: rgba(212,175,55,0.7);
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.5px;
}
/* Queue list */
.bu-queue-list {
max-height: 320px;
overflow-y: auto;
display: flex; flex-direction: column;
gap: 6px;
}
.bu-queue-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 10px;
transition: all 0.2s;
}
.bu-queue-item.converting {
border-color: rgba(56,189,248,0.4);
background: rgba(56,189,248,0.04);
}
.bu-queue-item.done {
border-color: rgba(34,197,94,0.4);
background: rgba(34,197,94,0.04);
}
.bu-queue-item.error {
border-color: rgba(255,77,122,0.4);
background: rgba(255,77,122,0.04);
}
.bu-qi-thumb {
width: 36px; height: 36px;
border-radius: 9px;
background: rgba(212,175,55,0.1);
border: 1px solid rgba(212,175,55,0.2);
display: flex; align-items: center; justify-content: center;
font-size: 16px;
font-weight: 700;
color: #F0D068;
flex-shrink: 0;
}
.bu-queue-item.converting .bu-qi-thumb {
color: #38bdf8;
background: rgba(56,189,248,0.15);
border-color: rgba(56,189,248,0.3);
animation: spinSlow 1.5s linear infinite;
}
.bu-queue-item.done .bu-qi-thumb {
color: #22c55e;
background: rgba(34,197,94,0.15);
border-color: rgba(34,197,94,0.4);
}
.bu-queue-item.error .bu-qi-thumb {
color: #ff4d7a;
background: rgba(255,77,122,0.15);
border-color: rgba(255,77,122,0.4);
}
@keyframes spinSlow { to { transform: rotate(360deg); } }
.bu-qi-body {
flex: 1; min-width: 0;
}
.bu-qi-name {
font-size: 12px;
color: rgba(255,255,255,0.85);
margin-bottom: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
}
.bu-qi-meta {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px;
color: rgba(255,255,255,0.5);
flex-wrap: wrap;
}
.bu-qi-num {
width: 56px;
padding: 3px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(212,175,55,0.25);
border-radius: 5px;
color: #F0D068;
font-size: 11px;
font-weight: 700;
text-align: center;
outline: none;
font-family: 'Cinzel', serif;
}
.bu-qi-num:focus { border-color: rgba(212,175,55,0.5); }
.bu-qi-title {
flex: 1; min-width: 100px;
padding: 3px 7px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 5px;
color: rgba(255,255,255,0.85);
font-size: 11px;
outline: none;
font-family: 'Inter', system-ui, sans-serif;
}
.bu-qi-title:focus { border-color: rgba(212,175,55,0.4); }
.bu-qi-size {
white-space: nowrap;
color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif;
}
.bu-qi-progress {
height: 3px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
margin-top: 6px;
overflow: hidden;
}
.bu-qi-progress-bar {
height: 100%;
background: linear-gradient(90deg, #38bdf8, #1e88e5);
transition: width 0.2s;
}
.bu-qi-error {
margin-top: 4px;
font-size: 10.5px;
color: #ff4d7a;
}
.bu-qi-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bu-qi-remove {
width: 26px; height: 26px;
border-radius: 7px;
background: rgba(255,77,122,0.08);
border: 1px solid rgba(255,77,122,0.2);
color: #ff4d7a;
font-size: 11px;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.bu-qi-remove:hover { background: rgba(255,77,122,0.18); }
/* Footer */
.bu-footer {
display: flex; gap: 8px;
padding: 14px 22px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(12,8,18,0.6);
flex-shrink: 0;
}
.bu-cancel, .bu-submit {
padding: 12px;
border-radius: 12px;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
border: 1px solid;
transition: all 0.18s;
text-transform: uppercase;
}
.bu-cancel {
flex: 0 0 auto;
padding-left: 22px; padding-right: 22px;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
.bu-cancel:hover { background: rgba(255,255,255,0.08); }
.bu-submit {
flex: 1;
background: linear-gradient(135deg, #B91C1C, #8B0000);
border-color: rgba(185,28,28,0.55);
color: #fff;
box-shadow: 0 6px 20px rgba(185,28,28,0.35);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.bu-submit:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.12);
box-shadow: 0 8px 26px rgba(185,28,28,0.5);
}
.bu-submit:disabled {
opacity: 0.4;
cursor: not-allowed;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.3);
box-shadow: none;
}
.bu-spinner {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #fff;
border-radius: 50%;
animation: spinSlow 0.8s linear infinite;
}
/* Admin "Add chapter" button (on detail page + 18+ panel) */
.azura-admin-add-ch-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: calc(100% - 28px);
margin: 12px 14px;
padding: 13px 16px;
background: linear-gradient(135deg, rgba(185,28,28,0.18), rgba(212,175,55,0.08));
border: 1px dashed rgba(212,175,55,0.5);
border-radius: 14px;
color: #F0D068;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s;
}
.azura-admin-add-ch-btn:hover {
background: linear-gradient(135deg, rgba(185,28,28,0.3), rgba(212,175,55,0.15));
border-color: rgba(212,175,55,0.7);
border-style: solid;
transform: translateY(-1px);
box-shadow: 0 8px 24px rgba(185,28,28,0.25);
}
/* ── Touch active states for cards (mobile) ──────────── */
.touch-active {
transform: scale(0.97);
transition: transform 0.1s ease;
}
/* ── Mobile uploader tweaks ──────────────────────────── */
@media (max-width: 767px) {
.bu-box {
max-height: 96vh;
margin: 0;
border-radius: 18px 18px 0 0;
align-self: flex-end;
}
.bulk-uploader-overlay {
align-items: flex-end;
padding: 0;
}
.bu-header { padding: 14px 16px; }
.bu-body { padding: 14px 16px 8px; }
.bu-footer { padding: 12px 16px; }
.bu-dropzone { padding: 24px 14px; min-height: 130px; }
.bu-drop-icon { width: 56px; height: 56px; }
.bu-drop-icon svg { width: 32px; height: 32px; }
.bu-drop-title { font-size: 14px; }
.bu-queue-list { max-height: 240px; }
.bu-qi-meta { gap: 6px; }
.bu-qi-title { min-width: 80px; }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v12.0 — READER PREMIUM REDESIGN (DESKTOP + MOBILE IDENTICAL)
Override all old reader styles — clean, distraction-free, premium.
════════════════════════════════════════════════════════════════════════ */
/* ── Reader page = full viewport, above EVERYTHING ──────── */
#page-reader {
position: fixed !important;
inset: 0 !important;
z-index: 9000 !important;
background: #050208 !important;
display: none !important;
flex-direction: column !important;
padding: 0 !important;
margin: 0 !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
max-width: 100vw !important;
overflow: hidden !important;
}
#page-reader.active { display: flex !important; }
/* Hide sidebar + bottom-nav + topbar when reader is open */
body:has(#page-reader.active) .sidebar,
body:has(#page-reader.active) .mobile-bottom-nav,
body:has(#page-reader.active) .mobile-topbar,
body:has(#page-reader.active) #azura-fab,
body:has(#page-reader.active) #azura-stt {
display: none !important;
}
/* ── Floating back button — top-left, premium glass ───── */
.rdr-floating-back {
position: fixed !important;
top: max(env(safe-area-inset-top, 14px), 14px);
left: 14px;
z-index: 9100 !important;
width: 40px;
height: 40px;
border-radius: 12px;
background: rgba(10, 7, 18, 0.72);
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(234, 179, 8, 0.28);
color: #EAB308;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.25);
padding: 0;
}
.rdr-floating-back:hover {
background: rgba(20, 14, 28, 0.92);
border-color: rgba(234, 179, 8, 0.55);
color: #F0D068;
transform: translateX(-1px);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.7), 0 0 18px rgba(234, 179, 8, 0.18);
}
.rdr-floating-back:active { transform: scale(0.94); }
.rdr-floating-back svg {
width: 18px;
height: 18px;
fill: currentColor;
transition: transform 0.15s;
}
.rdr-floating-back:hover svg { transform: translateX(-2px); }
/* ── Progress bar — thin, top of screen ───────────────── */
.rdr-progress-wrap {
position: fixed !important;
top: 0;
left: 0;
right: 0;
height: 2px;
z-index: 9050 !important;
background: rgba(255, 255, 255, 0.04);
pointer-events: none;
}
.rdr-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 50%, #F0D068 100%);
transition: width 0.25s ease;
box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}
.rdr-progress-glow {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 30px;
background: linear-gradient(90deg, transparent, #F0D068);
filter: blur(4px);
opacity: 0.6;
}
/* ── Header — center title, right controls, NO back button (it's floating) ── */
.rdr-header {
position: fixed !important;
top: 0;
left: 0;
right: 0;
z-index: 9080 !important;
display: flex !important;
align-items: center;
gap: 10px;
padding: 14px 14px 14px 64px; /* 64px left = space for floating back btn */
padding-top: max(env(safe-area-inset-top, 14px), 14px);
background: linear-gradient(180deg, rgba(5, 2, 8, 0.94) 0%, rgba(5, 2, 8, 0.7) 70%, transparent 100%);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
pointer-events: auto;
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
border: none !important;
}
.rdr-back-btn { display: none !important; } /* old back btn hidden */
.rdr-title-group {
flex: 1;
min-width: 0;
text-align: center;
padding: 0 8px;
}
.rdr-manhwa-name {
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
color: rgba(234, 179, 8, 0.62);
text-transform: uppercase;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rdr-chapter-name {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rdr-header-controls {
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.rdr-header-nav,
.rdr-chat-toggle-btn {
width: 38px !important;
height: 38px !important;
border-radius: 10px !important;
background: rgba(10, 7, 18, 0.72) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(234, 179, 8, 0.18) !important;
color: rgba(234, 179, 8, 0.85) !important;
display: flex !important;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.18s;
padding: 0 !important;
flex-shrink: 0;
position: relative;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.rdr-header-nav:hover:not(:disabled),
.rdr-chat-toggle-btn:hover {
background: rgba(20, 14, 28, 0.9) !important;
border-color: rgba(234, 179, 8, 0.45) !important;
color: #F0D068 !important;
transform: translateY(-1px);
}
.rdr-header-nav:active,
.rdr-chat-toggle-btn:active { transform: scale(0.94); }
.rdr-header-nav:disabled {
opacity: 0.25 !important;
cursor: not-allowed !important;
}
.rdr-header-nav svg,
.rdr-chat-toggle-btn svg {
width: 16px !important;
height: 16px !important;
fill: currentColor !important;
}
.rdr-chat-badge {
position: absolute;
top: -4px;
right: -4px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: linear-gradient(135deg, #B91C1C, #8B0000);
color: #fff;
font-size: 9px;
font-family: 'Cinzel', serif;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #050208;
box-shadow: 0 2px 8px rgba(185, 28, 28, 0.6);
}
/* ── Main reader body — center 880px, vertical scroll ─── */
.rdr-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
height: 100%;
background: linear-gradient(180deg, #0a0710 0%, #050208 100%);
scroll-behavior: smooth;
padding-top: 70px; /* space for header */
padding-bottom: 80px; /* space for chapter nav */
}
.rdr-body::-webkit-scrollbar { width: 4px; }
.rdr-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(234, 179, 8, 0.35), rgba(185, 28, 28, 0.35));
border-radius: 2px;
}
/* ── Panels — vertical scroll, centered, max 880px ───── */
.rdr-panels {
max-width: 880px;
margin: 0 auto;
padding: 8px 8px 16px;
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
}
.rdr-panel,
.rdr-panels img,
img.rdr-page {
width: 100% !important;
max-width: 100%;
height: auto !important;
display: block;
background: #000;
border-radius: 4px;
margin: 0 auto;
user-select: none;
-webkit-user-drag: none;
}
/* Empty state */
.rdr-panels:empty::before {
content: 'Sahifalar yuklanmoqda…';
display: block;
text-align: center;
padding: 80px 20px;
color: rgba(234, 179, 8, 0.4);
font-family: 'Cinzel', serif;
font-size: 12px;
letter-spacing: 1px;
}
/* ── Chapter nav — bottom centered ──────────────────── */
.rdr-chapter-nav {
position: fixed !important;
bottom: 0;
left: 0;
right: 0;
z-index: 9080 !important;
display: flex !important;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 16px;
padding-bottom: max(env(safe-area-inset-bottom, 14px), 14px);
background: linear-gradient(0deg, rgba(5, 2, 8, 0.94) 0%, rgba(5, 2, 8, 0.7) 70%, transparent 100%);
backdrop-filter: blur(16px);
transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s;
}
.rdr-nav-btn {
display: flex !important;
align-items: center;
gap: 8px;
padding: 11px 18px !important;
border-radius: 12px !important;
background: rgba(10, 7, 18, 0.85) !important;
backdrop-filter: blur(12px);
border: 1px solid rgba(234, 179, 8, 0.25) !important;
color: rgba(234, 179, 8, 0.92) !important;
font-family: 'Cinzel', serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 1.2px !important;
cursor: pointer;
transition: all 0.18s;
text-transform: uppercase;
}
.rdr-nav-btn:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.25), rgba(20, 14, 28, 0.9)) !important;
border-color: rgba(234, 179, 8, 0.55) !important;
color: #F0D068 !important;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(185, 28, 28, 0.2);
}
.rdr-nav-btn:disabled {
opacity: 0.3 !important;
cursor: not-allowed !important;
}
.rdr-nav-btn svg {
width: 14px !important;
height: 14px !important;
fill: currentColor !important;
}
.rdr-chapter-pill {
padding: 10px 16px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(139, 0, 0, 0.12));
border: 1px solid rgba(234, 179, 8, 0.4);
color: #F0D068;
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
white-space: nowrap;
flex-shrink: 0;
}
/* ── Floating Chat Panel — desktop right, mobile bottom ── */
.rdr-chat-panel {
position: fixed !important;
z-index: 9090 !important;
background: linear-gradient(180deg, rgba(20, 14, 28, 0.97), rgba(8, 5, 12, 0.99)) !important;
border-left: 1px solid rgba(234, 179, 8, 0.28);
display: flex !important;
flex-direction: column;
transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1) !important;
pointer-events: none;
opacity: 0;
}
.rdr-chat-panel.open {
pointer-events: auto;
opacity: 1;
}
/* DESKTOP — right side panel */
@media (min-width: 768px) {
.rdr-chat-panel {
top: 0;
right: 0;
bottom: 0;
width: 380px;
height: 100vh;
height: 100dvh;
transform: translateX(100%) !important;
box-shadow: -16px 0 60px rgba(0, 0, 0, 0.7);
}
.rdr-chat-panel.open {
transform: translateX(0) !important;
}
}
/* MOBILE — bottom sheet */
@media (max-width: 767px) {
.rdr-chat-panel {
bottom: 0;
left: 0;
right: 0;
height: 86vh;
height: 86dvh;
border-radius: 22px 22px 0 0;
border-left: none;
border-top: 1px solid rgba(234, 179, 8, 0.28);
transform: translateY(100%) !important;
box-shadow: 0 -16px 60px rgba(0, 0, 0, 0.7);
}
.rdr-chat-panel.open {
transform: translateY(0) !important;
}
}
/* ── Convert overlay — when uploading PDF mid-reading ── */
.rdr-convert-overlay {
position: fixed !important;
inset: 0;
z-index: 9200 !important;
background: rgba(5, 2, 8, 0.92);
backdrop-filter: blur(18px);
display: flex !important;
align-items: center;
justify-content: center;
padding: 20px;
}
.rdr-convert-box {
width: 100%;
max-width: 380px;
background: linear-gradient(180deg, rgba(20, 14, 28, 0.99), rgba(12, 8, 18, 0.99));
border: 1px solid rgba(234, 179, 8, 0.4);
border-radius: 20px;
padding: 28px 24px;
text-align: center;
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.85);
}
.rdr-convert-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.2), rgba(139, 0, 0, 0.1));
border: 1px solid rgba(234, 179, 8, 0.4);
color: #F0D068;
margin-bottom: 14px;
animation: rdrConvSpin 2s linear infinite;
}
.rdr-convert-icon svg { width: 32px; height: 32px; fill: currentColor; }
@keyframes rdrConvSpin {
to { transform: rotate(360deg); }
}
.rdr-convert-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 16px;
color: #F0D068;
letter-spacing: 1.5px;
margin-bottom: 6px;
}
.rdr-convert-status {
font-size: 12px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 14px;
font-family: 'Cinzel', serif;
}
.rdr-convert-bar-wrap {
height: 6px;
background: rgba(255, 255, 255, 0.06);
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.rdr-convert-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 100%);
transition: width 0.3s ease;
box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}
.rdr-convert-pct {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: #EAB308;
letter-spacing: 1px;
}
/* ── IMMERSIVE MODE — auto-hide UI after 2.5s idle ───── */
body.reader-immersive .rdr-header,
body.reader-immersive .rdr-chapter-nav {
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
}
body.reader-immersive .rdr-chapter-nav {
transform: translateY(100%);
}
body.reader-immersive .rdr-floating-back {
opacity: 0.3;
transform: scale(0.85);
}
body.reader-immersive .rdr-floating-back:hover {
opacity: 1;
transform: scale(1);
}
body.reader-immersive .rdr-progress-wrap {
opacity: 0.4;
}
/* ── Mobile reader tweaks — IDENTICAL layout to desktop ── */
@media (max-width: 767px) {
.rdr-floating-back {
width: 38px;
height: 38px;
top: max(env(safe-area-inset-top, 12px), 12px);
left: 12px;
}
.rdr-header {
padding: 12px 12px 12px 60px;
padding-top: max(env(safe-area-inset-top, 12px), 12px);
gap: 6px;
}
.rdr-manhwa-name { font-size: 9px; }
.rdr-chapter-name { font-size: 12px; }
.rdr-header-nav,
.rdr-chat-toggle-btn {
width: 36px !important;
height: 36px !important;
}
.rdr-header-nav svg,
.rdr-chat-toggle-btn svg {
width: 14px !important;
height: 14px !important;
}
.rdr-body {
padding-top: 64px;
padding-bottom: 76px;
}
.rdr-panels {
padding: 4px 4px 12px;
gap: 2px;
}
.rdr-chapter-nav {
padding: 10px 12px;
padding-bottom: max(env(safe-area-inset-bottom, 10px), 10px);
gap: 6px;
}
.rdr-nav-btn {
padding: 10px 14px !important;
font-size: 10px !important;
flex: 0 1 auto;
}
.rdr-nav-btn span,
.rdr-nav-btn:not(:has(svg + *))::after {
/* hide button labels on small phones, show only icons */
}
.rdr-chapter-pill {
padding: 8px 14px;
font-size: 10px;
}
}
/* Very small phones — hide button text, keep only arrows */
@media (max-width: 480px) {
.rdr-nav-btn {
padding: 10px !important;
width: 40px;
height: 40px;
font-size: 0 !important;
overflow: hidden;
}
.rdr-nav-btn svg {
width: 18px !important;
height: 18px !important;
}
}
/* ── Tap-to-toggle UI hint (first time) ──────────────── */
.rdr-tap-hint {
position: fixed;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
z-index: 9070;
padding: 10px 18px;
background: rgba(10, 7, 18, 0.85);
backdrop-filter: blur(14px);
border: 1px solid rgba(234, 179, 8, 0.35);
border-radius: 24px;
color: rgba(234, 179, 8, 0.85);
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 1px;
pointer-events: none;
animation: rdrTapHintFade 4s ease forwards;
}
@keyframes rdrTapHintFade {
0% { opacity: 0; transform: translate(-50%, 14px); }
20%, 60% { opacity: 1; transform: translate(-50%, 0); }
100% { opacity: 0; transform: translate(-50%, -10px); }
}
/* ══ v12.0 fallback: body.on-reader (no :has() support) ══ */
body.on-reader .sidebar,
body.on-reader .mobile-bottom-nav,
body.on-reader .mobile-topbar,
body.on-reader #azura-fab,
body.on-reader #azura-stt {
display: none !important;
}
body.on-reader { overflow: hidden !important; }
/* Ensure reader page truly covers EVERYTHING */
body.on-reader #page-reader {
z-index: 9000 !important;
position: fixed !important;
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v13.0 — NEW CHAPTER SYSTEM (premium modal + chapter cards)
════════════════════════════════════════════════════════════════════════ */
/* ── Modal Overlay ─────────────────────────────────────── */
.az-ch-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100050;
background: rgba(4,2,8,0.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
align-items: center; justify-content: center;
padding: 14px;
}
.az-ch-overlay.open {
display: flex;
animation: azChFadeIn 0.24s ease;
}
@keyframes azChFadeIn { from { opacity: 0; } to { opacity: 1; } }
/* ── Modal Box ─────────────────────────────────────────── */
.az-ch-box {
width: 100%;
max-width: 720px;
max-height: 92vh;
max-height: 92dvh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(8,5,12,0.99));
border: 1px solid rgba(234,179,8,0.4);
border-radius: 22px;
display: flex;
flex-direction: column;
overflow: hidden;
box-shadow:
0 24px 80px rgba(0,0,0,0.85),
0 0 60px rgba(234,179,8,0.15),
0 0 0 1px rgba(255,255,255,0.04) inset;
animation: azChSlideUp 0.36s cubic-bezier(0.16,1,0.3,1);
}
@keyframes azChSlideUp {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ── Header ────────────────────────────────────────────── */
.az-ch-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(90deg, rgba(185,28,28,0.18), rgba(234,179,8,0.08));
border-bottom: 1px solid rgba(234,179,8,0.25);
flex-shrink: 0;
}
.az-ch-title-wrap { flex: 1; min-width: 0; }
.az-ch-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #F0D068;
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.az-ch-subtitle {
font-size: 11px;
color: rgba(255,255,255,0.55);
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.az-ch-close {
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6);
font-size: 14px;
cursor: pointer;
flex-shrink: 0;
transition: all 0.15s;
}
.az-ch-close:hover {
background: rgba(255,77,122,0.12);
color: #ff4d7a;
border-color: rgba(255,77,122,0.3);
}
/* ── Body (scrollable) ─────────────────────────────────── */
.az-ch-body {
padding: 18px 22px;
overflow-y: auto;
flex: 1;
}
.az-ch-body::-webkit-scrollbar { width: 6px; }
.az-ch-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(234,179,8,0.3), rgba(185,28,28,0.3));
border-radius: 3px;
}
/* ── Section ───────────────────────────────────────────── */
.az-ch-section {
margin-bottom: 18px;
}
.az-ch-step {
display: flex; align-items: center; gap: 8px;
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 1.2px;
color: rgba(234,179,8,0.75);
margin-bottom: 10px;
font-weight: 700;
text-transform: uppercase;
}
.az-ch-step span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(234,179,8,0.25), rgba(185,28,28,0.18));
border: 1px solid rgba(234,179,8,0.45);
color: #F0D068;
font-size: 10px;
font-weight: 900;
flex-shrink: 0;
}
/* ── Content type pills ────────────────────────────────── */
.az-ch-types {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
@media(max-width: 640px) {
.az-ch-types { grid-template-columns: repeat(3, 1fr); }
}
@media(max-width: 380px) {
.az-ch-types { grid-template-columns: repeat(2, 1fr); }
}
.az-ch-type-btn {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 11px 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: rgba(255,255,255,0.6);
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.18s;
}
.az-ch-type-ico { font-size: 18px; }
.az-ch-type-btn:hover {
background: rgba(234,179,8,0.06);
border-color: rgba(234,179,8,0.3);
color: rgba(255,255,255,0.85);
}
.az-ch-type-btn.active {
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(185,28,28,0.1));
border-color: rgba(234,179,8,0.55);
color: #F0D068;
box-shadow: 0 4px 16px rgba(234,179,8,0.18);
}
/* ── Select / Input ────────────────────────────────────── */
.az-ch-select, .az-ch-input {
width: 100%;
padding: 11px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(234,179,8,0.25);
border-radius: 10px;
color: #fff;
font-size: 13px;
outline: none;
font-family: 'Inter', system-ui, sans-serif;
transition: border-color 0.15s, box-shadow 0.15s;
}
.az-ch-select:focus, .az-ch-input:focus {
border-color: rgba(234,179,8,0.55);
box-shadow: 0 0 0 3px rgba(234,179,8,0.1);
}
.az-ch-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 18px;
padding-right: 38px;
cursor: pointer;
}
/* ── Drop zone ─────────────────────────────────────────── */
.az-ch-dropzone {
border: 2px dashed rgba(234,179,8,0.35);
border-radius: 14px;
padding: 26px 18px;
background: linear-gradient(135deg, rgba(234,179,8,0.04), rgba(185,28,28,0.03));
cursor: pointer;
transition: all 0.22s cubic-bezier(0.16,1,0.3,1);
text-align: center;
}
.az-ch-dropzone:hover {
border-color: rgba(234,179,8,0.6);
background: linear-gradient(135deg, rgba(234,179,8,0.07), rgba(185,28,28,0.05));
}
.az-ch-dropzone.dragover {
border-color: #EAB308;
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(185,28,28,0.08));
box-shadow: 0 0 28px rgba(234,179,8,0.25);
transform: scale(1.01);
}
.az-ch-drop-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px; height: 64px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(139,93,28,0.12));
border: 1px solid rgba(234,179,8,0.35);
color: #F0D068;
margin-bottom: 10px;
box-shadow: 0 6px 20px rgba(234,179,8,0.12);
}
.az-ch-drop-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 14px;
color: #F0D068;
letter-spacing: 0.6px;
margin-bottom: 4px;
}
.az-ch-drop-sub {
font-size: 11.5px;
color: rgba(255,255,255,0.6);
margin-bottom: 6px;
}
.az-ch-drop-sub a {
color: #F0D068;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 2px;
}
.az-ch-drop-sub a:hover { color: #fff; }
.az-ch-drop-hint {
display: inline-block;
padding: 4px 10px;
margin-top: 4px;
background: rgba(56,189,248,0.08);
border: 1px solid rgba(56,189,248,0.22);
border-radius: 12px;
font-size: 10px;
color: rgba(56,189,248,0.85);
font-family: 'Cinzel', serif;
letter-spacing: 0.4px;
}
/* ── Access pills ──────────────────────────────────────── */
.az-ch-access {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
}
.az-ch-pill {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: rgba(255,255,255,0.65);
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.15s;
}
.az-ch-pill-ico { font-size: 14px; }
.az-ch-pill:hover {
border-color: rgba(234,179,8,0.3);
color: rgba(255,255,255,0.85);
}
.az-ch-pill.active {
background: linear-gradient(135deg, rgba(185,28,28,0.28), rgba(139,0,0,0.18));
border-color: rgba(185,28,28,0.55);
color: #fff;
box-shadow: 0 4px 14px rgba(185,28,28,0.22);
}
.az-ch-pill[data-access="vip"].active,
.az-ch-pill[data-ed-access="vip"].active {
background: linear-gradient(135deg, rgba(234,179,8,0.28), rgba(139,93,28,0.18));
border-color: rgba(234,179,8,0.55);
color: #F0D068;
box-shadow: 0 4px 14px rgba(234,179,8,0.22);
}
.az-ch-pill[data-access="coin"].active,
.az-ch-pill[data-ed-access="coin"].active {
background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(30,136,229,0.12));
border-color: rgba(56,189,248,0.5);
color: #38bdf8;
}
/* ── Coin price row ────────────────────────────────────── */
.az-ch-coin-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
padding: 10px 12px;
background: rgba(56,189,248,0.06);
border: 1px solid rgba(56,189,248,0.2);
border-radius: 10px;
}
.az-ch-coin-row label {
font-family: 'Cinzel', serif;
font-size: 11px;
color: #38bdf8;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
}
.az-ch-input-num {
width: 70px;
padding: 7px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(56,189,248,0.3);
border-radius: 7px;
color: #fff;
font-size: 13px;
font-weight: 700;
text-align: center;
outline: none;
font-family: 'Cinzel', serif;
}
.az-ch-coin-presets {
display: flex;
gap: 4px;
flex-wrap: wrap;
}
.az-ch-preset {
padding: 5px 9px;
background: rgba(56,189,248,0.1);
border: 1px solid rgba(56,189,248,0.25);
border-radius: 6px;
color: #38bdf8;
font-size: 10px;
font-weight: 700;
cursor: pointer;
font-family: 'Cinzel', serif;
}
.az-ch-preset:hover { background: rgba(56,189,248,0.18); }
/* ── Schedule toggle ───────────────────────────────────── */
.az-ch-toggle {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 12px;
color: rgba(255,255,255,0.7);
font-family: 'Cinzel', serif;
letter-spacing: 0.4px;
}
.az-ch-toggle input { display: none; }
.az-ch-toggle-vis {
width: 38px; height: 22px;
border-radius: 12px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.08);
position: relative;
transition: all 0.2s;
flex-shrink: 0;
}
.az-ch-toggle-vis::after {
content: '';
position: absolute;
top: 2px; left: 2px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
transition: left 0.2s;
}
.az-ch-toggle input:checked + .az-ch-toggle-vis {
background: linear-gradient(135deg, #B91C1C, #EAB308);
border-color: rgba(234,179,8,0.5);
}
.az-ch-toggle input:checked + .az-ch-toggle-vis::after { left: 18px; }
/* ── Queue ─────────────────────────────────────────────── */
.az-ch-queue {
background: rgba(20,14,28,0.55);
border: 1px solid rgba(234,179,8,0.18);
border-radius: 14px;
padding: 12px 14px;
margin-top: 8px;
}
.az-ch-queue-head {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 10px;
}
.az-ch-queue-title {
font-family: 'Cinzel', serif;
font-size: 13px;
color: #F0D068;
letter-spacing: 0.5px;
}
.az-ch-queue-title b { color: #fff; }
.az-ch-queue-status {
font-size: 11px;
color: rgba(255,255,255,0.5);
margin-left: auto;
}
.az-ch-mini-btn {
padding: 5px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 7px;
color: rgba(255,255,255,0.6);
font-size: 10.5px;
font-family: 'Cinzel', serif;
cursor: pointer;
transition: all 0.15s;
}
.az-ch-mini-btn:hover {
background: rgba(255,77,122,0.12);
color: #ff4d7a;
border-color: rgba(255,77,122,0.3);
}
/* ── Overall progress ──────────────────────────────────── */
.az-ch-overall-bar {
position: relative;
height: 8px;
background: rgba(255,255,255,0.04);
border-radius: 4px;
overflow: hidden;
margin-bottom: 12px;
}
.az-ch-overall-fill {
height: 100%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 50%, #F0D068 100%);
transition: width 0.3s ease;
box-shadow: 0 0 10px rgba(234,179,8,0.4);
border-radius: 4px;
}
.az-ch-overall-pct {
position: absolute;
top: -22px; right: 0;
font-size: 10px;
color: rgba(234,179,8,0.7);
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.5px;
}
/* ── Queue list ────────────────────────────────────────── */
.az-ch-queue-list {
max-height: 300px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 6px;
}
.az-ch-qi {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 11px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px;
transition: all 0.18s;
}
.az-ch-qi.converting {
border-color: rgba(56,189,248,0.4);
background: rgba(56,189,248,0.04);
}
.az-ch-qi.done {
border-color: rgba(34,197,94,0.4);
background: rgba(34,197,94,0.04);
}
.az-ch-qi.error {
border-color: rgba(255,77,122,0.4);
background: rgba(255,77,122,0.04);
}
.az-ch-qi-icon {
width: 32px; height: 32px;
border-radius: 8px;
background: rgba(234,179,8,0.1);
border: 1px solid rgba(234,179,8,0.2);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: 700;
color: #F0D068;
flex-shrink: 0;
}
.az-ch-qi-icon.converting {
color: #38bdf8;
background: rgba(56,189,248,0.15);
border-color: rgba(56,189,248,0.3);
animation: azChSpin 1.4s linear infinite;
}
.az-ch-qi-icon.done {
color: #22c55e;
background: rgba(34,197,94,0.15);
border-color: rgba(34,197,94,0.4);
}
.az-ch-qi-icon.error {
color: #ff4d7a;
background: rgba(255,77,122,0.15);
border-color: rgba(255,77,122,0.4);
}
@keyframes azChSpin { to { transform: rotate(360deg); } }
.az-ch-qi-body { flex: 1; min-width: 0; }
.az-ch-qi-name {
font-size: 12px;
color: rgba(255,255,255,0.85);
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
}
.az-ch-qi-meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 10.5px;
color: rgba(255,255,255,0.5);
flex-wrap: wrap;
}
.az-ch-qi-meta label {
display: flex;
align-items: center;
gap: 4px;
font-family: 'Cinzel', serif;
color: rgba(234,179,8,0.7);
}
.az-ch-qi-num {
width: 56px;
padding: 3px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(234,179,8,0.25);
border-radius: 5px;
color: #F0D068;
font-size: 11px;
font-weight: 700;
text-align: center;
outline: none;
font-family: 'Cinzel', serif;
}
.az-ch-qi-num:focus { border-color: rgba(234,179,8,0.5); }
.az-ch-qi-title {
flex: 1; min-width: 100px;
padding: 3px 7px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 5px;
color: rgba(255,255,255,0.85);
font-size: 11px;
outline: none;
font-family: 'Inter', system-ui, sans-serif;
}
.az-ch-qi-title:focus { border-color: rgba(234,179,8,0.4); }
.az-ch-qi-size {
white-space: nowrap;
color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif;
font-size: 10px;
}
.az-ch-qi-prog {
height: 3px;
background: rgba(255,255,255,0.06);
border-radius: 2px;
margin-top: 5px;
overflow: hidden;
}
.az-ch-qi-prog-fill {
height: 100%;
background: linear-gradient(90deg, #38bdf8, #1e88e5);
transition: width 0.2s;
border-radius: 2px;
}
.az-ch-qi-prog-text {
font-size: 10px;
color: #38bdf8;
margin-top: 3px;
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.az-ch-qi-err {
margin-top: 4px;
font-size: 10.5px;
color: #ff4d7a;
}
.az-ch-qi-actions { display: flex; gap: 4px; flex-shrink: 0; }
.az-ch-qi-rm {
width: 26px; height: 26px;
border-radius: 7px;
background: rgba(255,77,122,0.08);
border: 1px solid rgba(255,77,122,0.2);
color: #ff4d7a;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.az-ch-qi-rm:hover { background: rgba(255,77,122,0.18); }
/* ── Footer ────────────────────────────────────────────── */
.az-ch-footer {
display: flex;
gap: 10px;
padding: 14px 22px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(8,5,12,0.7);
flex-shrink: 0;
}
.az-ch-cancel, .az-ch-submit {
padding: 13px;
border-radius: 12px;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
border: 1px solid;
transition: all 0.18s;
text-transform: uppercase;
}
.az-ch-cancel {
flex: 0 0 auto;
padding-left: 22px; padding-right: 22px;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
.az-ch-cancel:hover { background: rgba(255,255,255,0.08); }
.az-ch-submit {
flex: 1;
background: linear-gradient(135deg, #B91C1C, #8B0000);
border-color: rgba(185,28,28,0.55);
color: #fff;
box-shadow: 0 6px 20px rgba(185,28,28,0.35);
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.az-ch-submit:hover:not(:disabled) {
transform: translateY(-1px);
filter: brightness(1.12);
box-shadow: 0 8px 26px rgba(185,28,28,0.5);
}
.az-ch-submit:disabled {
opacity: 0.4;
cursor: not-allowed;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.3);
box-shadow: none;
}
.az-ch-spin {
display: inline-block;
width: 13px; height: 13px;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #fff;
border-radius: 50%;
animation: azChSpin 0.8s linear infinite;
}
/* ── Chapter cards (detail page) ──────────────────────── */
.az-ch-item {
position: relative;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(20,14,28,0.7), rgba(14,10,20,0.5));
border: 1px solid rgba(234,179,8,0.18);
border-radius: 12px;
margin-bottom: 6px;
cursor: pointer;
transition: all 0.2s;
}
.az-ch-item:hover {
border-color: rgba(234,179,8,0.45);
background: linear-gradient(135deg, rgba(234,179,8,0.06), rgba(14,10,20,0.5));
transform: translateY(-1px);
}
.az-ch-item .ch-num {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 13px;
color: #F0D068;
font-weight: 700;
letter-spacing: 1px;
white-space: nowrap;
min-width: 60px;
}
.az-ch-item .ch-info { flex: 1; min-width: 0; }
.az-ch-item .ch-title {
font-size: 13px;
color: rgba(255,255,255,0.9);
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: 'Inter', system-ui, sans-serif;
font-weight: 500;
}
.az-ch-item .ch-meta {
font-size: 10.5px;
color: rgba(255,255,255,0.45);
font-family: 'Cinzel', serif;
}
.az-ch-item .ch-badges { display: flex; gap: 4px; }
.az-ch-badge {
padding: 3px 9px;
border-radius: 12px;
font-size: 10px;
font-family: 'Cinzel', serif;
font-weight: 700;
letter-spacing: 0.5px;
white-space: nowrap;
}
.az-ch-badge.free {
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.3);
color: #22c55e;
}
.az-ch-badge.vip {
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(139,93,28,0.1));
border: 1px solid rgba(234,179,8,0.45);
color: #F0D068;
}
.az-ch-badge.coin {
background: rgba(56,189,248,0.12);
border: 1px solid rgba(56,189,248,0.35);
color: #38bdf8;
}
/* ── Admin actions on chapter card ─────────────────── */
.ch-admin-actions {
display: flex;
gap: 4px;
margin-left: 6px;
}
.ch-admin-btn {
width: 28px; height: 28px;
border-radius: 7px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(234,179,8,0.25);
color: #F0D068;
font-size: 11px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}
.ch-admin-btn:hover {
background: rgba(234,179,8,0.15);
border-color: rgba(234,179,8,0.5);
transform: translateY(-1px);
}
.ch-admin-btn.danger {
border-color: rgba(255,77,122,0.3);
color: #ff4d7a;
}
.ch-admin-btn.danger:hover {
background: rgba(255,77,122,0.15);
border-color: rgba(255,77,122,0.5);
}
/* ── Reader page-failed placeholder ────────────────── */
.rdr-page-failed {
background: rgba(255,77,122,0.08);
border: 1px dashed rgba(255,77,122,0.3);
color: #ff4d7a;
padding: 40px 20px;
text-align: center;
font-family: 'Cinzel', serif;
font-size: 12px;
border-radius: 6px;
margin: 4px 0;
}
/* ── Mobile uploader tweaks ──────────────────────────── */
@media (max-width: 767px) {
.az-ch-overlay {
align-items: flex-end;
padding: 0;
}
.az-ch-box {
max-height: 96vh;
max-height: 96dvh;
border-radius: 18px 18px 0 0;
}
.az-ch-header { padding: 14px 16px; }
.az-ch-body { padding: 14px 16px; }
.az-ch-footer { padding: 12px 16px; }
.az-ch-dropzone { padding: 22px 14px; }
.az-ch-drop-icon { width: 52px; height: 52px; }
.az-ch-drop-icon svg { width: 32px; height: 32px; }
.az-ch-drop-title { font-size: 13px; }
.az-ch-queue-list { max-height: 240px; }
.az-ch-qi-meta { gap: 6px; }
.az-ch-qi-title { min-width: 80px; }
.az-ch-types { grid-template-columns: repeat(3, 1fr); }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — UNIFIED CHAPTER SYSTEM (premium modal)
════════════════════════════════════════════════════════════════════════ */
.az-cm-overlay {
display: none;
position: fixed; inset: 0;
z-index: 100060;
background: rgba(4,2,8,0.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
align-items: center; justify-content: center;
padding: 14px;
}
.az-cm-overlay.open { display: flex; animation: azCmFadeIn 0.24s ease; }
@keyframes azCmFadeIn { from { opacity: 0; } to { opacity: 1; } }
.az-cm-box {
width: 100%; max-width: 720px;
max-height: 92vh;
background: linear-gradient(180deg, rgba(20,14,28,0.99), rgba(8,5,12,0.99));
border: 1px solid rgba(234,179,8,0.4);
border-radius: 22px;
display: flex; flex-direction: column;
overflow: hidden;
box-shadow: 0 24px 80px rgba(0,0,0,0.85), 0 0 60px rgba(234,179,8,0.15);
animation: azCmSlideUp 0.36s cubic-bezier(0.16,1,0.3,1);
}
@keyframes azCmSlideUp {
from { opacity: 0; transform: translateY(28px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.az-cm-header {
display: flex; align-items: center; justify-content: space-between;
padding: 18px 22px;
background: linear-gradient(90deg, rgba(185,28,28,0.18), rgba(234,179,8,0.08));
border-bottom: 1px solid rgba(234,179,8,0.25);
flex-shrink: 0;
}
.az-cm-title-wrap { flex: 1; min-width: 0; }
.az-cm-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px; color: #F0D068;
letter-spacing: 1.5px; margin-bottom: 4px;
}
.az-cm-subtitle {
font-size: 11px; color: rgba(255,255,255,0.55);
font-family: 'Cinzel', serif; letter-spacing: 0.5px;
}
.az-cm-close {
width: 36px; height: 36px; border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
color: rgba(255,255,255,0.6); font-size: 14px; cursor: pointer;
flex-shrink: 0; transition: all 0.15s;
}
.az-cm-close:hover { background: rgba(255,77,122,0.12); color: #ff4d7a; }
.az-cm-body { padding: 18px 22px; overflow-y: auto; flex: 1; }
.az-cm-body::-webkit-scrollbar { width: 6px; }
.az-cm-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(234,179,8,0.3), rgba(185,28,28,0.3));
border-radius: 3px;
}
.az-cm-section { margin-bottom: 18px; }
.az-cm-step {
display: flex; align-items: center; gap: 8px;
font-family: 'Cinzel', serif; font-size: 11px;
letter-spacing: 1.2px; color: rgba(234,179,8,0.75);
margin-bottom: 10px; font-weight: 700; text-transform: uppercase;
}
.az-cm-step span {
display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; border-radius: 50%;
background: linear-gradient(135deg, rgba(234,179,8,0.25), rgba(185,28,28,0.18));
border: 1px solid rgba(234,179,8,0.45);
color: #F0D068; font-size: 10px; font-weight: 900;
}
.az-cm-types {
display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
}
@media(max-width: 640px) { .az-cm-types { grid-template-columns: repeat(3, 1fr); } }
@media(max-width: 380px) { .az-cm-types { grid-template-columns: repeat(2, 1fr); } }
.az-cm-type-btn {
padding: 10px 6px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
color: rgba(255,255,255,0.6);
font-family: 'Cinzel', serif; font-size: 10px; font-weight: 700;
letter-spacing: 0.5px; cursor: pointer; transition: all 0.18s;
}
.az-cm-type-btn:hover { background: rgba(234,179,8,0.06); border-color: rgba(234,179,8,0.3); color: rgba(255,255,255,0.85); }
.az-cm-type-btn.active {
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(185,28,28,0.1));
border-color: rgba(234,179,8,0.55); color: #F0D068;
box-shadow: 0 4px 16px rgba(234,179,8,0.18);
}
.az-cm-input {
width: 100%; padding: 11px 14px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(234,179,8,0.25);
border-radius: 10px; color: #fff; font-size: 13px;
outline: none; font-family: 'Inter', system-ui, sans-serif;
transition: border-color 0.15s;
}
.az-cm-input:focus { border-color: rgba(234,179,8,0.55); box-shadow: 0 0 0 3px rgba(234,179,8,0.1); }
select.az-cm-input {
appearance: none; -webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat; background-position: right 12px center;
background-size: 18px; padding-right: 38px; cursor: pointer;
}
/* Format selection — premium 3-card layout */
.az-cm-formats {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.az-cm-fmt-btn {
position: relative;
padding: 14px 10px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
color: rgba(255,255,255,0.7);
font-family: 'Cinzel', serif;
cursor: pointer; transition: all 0.18s;
text-align: center;
}
.az-cm-fmt-btn:hover {
background: rgba(234,179,8,0.06);
border-color: rgba(234,179,8,0.3);
}
.az-cm-fmt-btn.active {
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(185,28,28,0.08));
border-color: rgba(234,179,8,0.6);
box-shadow: 0 4px 18px rgba(234,179,8,0.2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.az-cm-fmt-ico { font-size: 22px; margin-bottom: 4px; }
.az-cm-fmt-name {
font-size: 13px; font-weight: 700; color: #F0D068;
letter-spacing: 1px; margin-bottom: 3px;
}
.az-cm-fmt-desc {
font-size: 10px; color: rgba(255,255,255,0.55);
line-height: 1.3;
}
.az-cm-fmt-desc b { color: #22c55e; }
.az-cm-fmt-recommended {
position: absolute; top: 6px; right: 8px;
color: #F0D068; font-size: 11px; font-weight: 900;
text-shadow: 0 0 8px rgba(234,179,8,0.5);
}
/* Drop zone */
.az-cm-dropzone {
border: 2px dashed rgba(234,179,8,0.35);
border-radius: 14px; padding: 26px 18px;
background: linear-gradient(135deg, rgba(234,179,8,0.04), rgba(185,28,28,0.03));
cursor: pointer; transition: all 0.22s; text-align: center;
}
.az-cm-dropzone:hover {
border-color: rgba(234,179,8,0.6);
background: linear-gradient(135deg, rgba(234,179,8,0.07), rgba(185,28,28,0.05));
}
.az-cm-dropzone.dragover {
border-color: #EAB308;
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(185,28,28,0.08));
box-shadow: 0 0 28px rgba(234,179,8,0.25);
}
.az-cm-drop-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 50%;
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(139,93,28,0.12));
border: 1px solid rgba(234,179,8,0.35);
color: #F0D068; margin-bottom: 10px; font-size: 26px;
box-shadow: 0 6px 20px rgba(234,179,8,0.12);
}
.az-cm-drop-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 14px; color: #F0D068;
letter-spacing: 0.6px; margin-bottom: 4px;
}
.az-cm-drop-sub { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-bottom: 6px; }
.az-cm-drop-sub a { color: #F0D068; cursor: pointer; text-decoration: underline; }
.az-cm-drop-hint {
display: inline-block; padding: 4px 10px; margin-top: 4px;
background: rgba(56,189,248,0.08);
border: 1px solid rgba(56,189,248,0.22);
border-radius: 12px; font-size: 10px;
color: rgba(56,189,248,0.85); font-family: 'Cinzel', serif;
}
/* Access pills */
.az-cm-access { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.az-cm-pill {
padding: 10px 8px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px; color: rgba(255,255,255,0.65);
font-family: 'Cinzel', serif; font-size: 11px; font-weight: 700;
cursor: pointer; transition: all 0.15s;
}
.az-cm-pill:hover { border-color: rgba(234,179,8,0.3); color: rgba(255,255,255,0.85); }
.az-cm-pill.active {
background: linear-gradient(135deg, rgba(185,28,28,0.28), rgba(139,0,0,0.18));
border-color: rgba(185,28,28,0.55); color: #fff;
}
.az-cm-pill[data-access="vip"].active, .az-cm-pill[data-ed="vip"].active {
background: linear-gradient(135deg, rgba(234,179,8,0.28), rgba(139,93,28,0.18));
border-color: rgba(234,179,8,0.55); color: #F0D068;
}
.az-cm-pill[data-access="coin"].active, .az-cm-pill[data-ed="coin"].active {
background: linear-gradient(135deg, rgba(56,189,248,0.22), rgba(30,136,229,0.12));
border-color: rgba(56,189,248,0.5); color: #38bdf8;
}
.az-cm-coin-row {
display: flex; align-items: center; gap: 8px;
margin-top: 10px; padding: 10px 12px;
background: rgba(56,189,248,0.06);
border: 1px solid rgba(56,189,248,0.2);
border-radius: 10px;
}
.az-cm-coin-row label {
font-family: 'Cinzel', serif; font-size: 11px;
color: #38bdf8; font-weight: 700; white-space: nowrap;
}
.az-cm-input-num {
width: 70px; padding: 7px 10px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(56,189,248,0.3);
border-radius: 7px; color: #fff;
font-size: 13px; font-weight: 700;
text-align: center; outline: none; font-family: 'Cinzel', serif;
}
.az-cm-coin-presets { display: flex; gap: 4px; flex-wrap: wrap; }
.az-cm-preset {
padding: 5px 9px;
background: rgba(56,189,248,0.1);
border: 1px solid rgba(56,189,248,0.25);
border-radius: 6px; color: #38bdf8;
font-size: 10px; font-weight: 700;
cursor: pointer; font-family: 'Cinzel', serif;
}
/* Queue */
.az-cm-queue {
background: rgba(20,14,28,0.55);
border: 1px solid rgba(234,179,8,0.18);
border-radius: 14px; padding: 12px 14px; margin-top: 8px;
}
.az-cm-queue-head {
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.az-cm-queue-title {
font-family: 'Cinzel', serif; font-size: 13px;
color: #F0D068; letter-spacing: 0.5px;
}
.az-cm-queue-title b { color: #fff; }
.az-cm-queue-status {
font-size: 11px; color: rgba(255,255,255,0.5); margin-left: auto;
}
.az-cm-mini-btn {
padding: 5px 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 7px; color: rgba(255,255,255,0.6);
font-size: 10.5px; font-family: 'Cinzel', serif;
cursor: pointer; transition: all 0.15s;
}
.az-cm-mini-btn:hover {
background: rgba(255,77,122,0.12); color: #ff4d7a;
border-color: rgba(255,77,122,0.3);
}
.az-cm-overall-bar {
position: relative; height: 8px;
background: rgba(255,255,255,0.04);
border-radius: 4px; overflow: hidden; margin-bottom: 12px;
}
.az-cm-overall-fill {
height: 100%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 50%, #F0D068 100%);
transition: width 0.3s ease;
box-shadow: 0 0 10px rgba(234,179,8,0.4);
border-radius: 4px;
}
.az-cm-overall-pct {
position: absolute; top: -22px; right: 0;
font-size: 10px; color: rgba(234,179,8,0.7);
font-family: 'Cinzel', serif; font-weight: 700;
}
.az-cm-queue-list {
max-height: 280px; overflow-y: auto;
display: flex; flex-direction: column; gap: 6px;
}
.az-cm-qi {
display: flex; align-items: center; gap: 10px;
padding: 9px 11px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.05);
border-radius: 9px; transition: all 0.18s;
}
.az-cm-qi.converting { border-color: rgba(56,189,248,0.4); background: rgba(56,189,248,0.04); }
.az-cm-qi.done { border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.04); }
.az-cm-qi.error { border-color: rgba(255,77,122,0.4); background: rgba(255,77,122,0.04); }
.az-cm-qi-icon {
width: 32px; height: 32px; border-radius: 8px;
background: rgba(234,179,8,0.1);
border: 1px solid rgba(234,179,8,0.2);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700; color: #F0D068; flex-shrink: 0;
}
.az-cm-qi-icon.converting {
color: #38bdf8; background: rgba(56,189,248,0.15);
border-color: rgba(56,189,248,0.3);
animation: azCmSpin 1.4s linear infinite;
}
.az-cm-qi-icon.done {
color: #22c55e; background: rgba(34,197,94,0.15);
border-color: rgba(34,197,94,0.4);
}
.az-cm-qi-icon.error {
color: #ff4d7a; background: rgba(255,77,122,0.15);
border-color: rgba(255,77,122,0.4);
}
@keyframes azCmSpin { to { transform: rotate(360deg); } }
.az-cm-qi-body { flex: 1; min-width: 0; }
.az-cm-qi-name {
font-size: 12px; color: rgba(255,255,255,0.85);
margin-bottom: 4px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap;
}
.az-cm-qi-meta {
display: flex; align-items: center; gap: 8px;
font-size: 10.5px; color: rgba(255,255,255,0.5); flex-wrap: wrap;
}
.az-cm-qi-meta label {
display: flex; align-items: center; gap: 4px;
font-family: 'Cinzel', serif; color: rgba(234,179,8,0.7);
}
.az-cm-qi-num {
width: 56px; padding: 3px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(234,179,8,0.25);
border-radius: 5px; color: #F0D068;
font-size: 11px; font-weight: 700;
text-align: center; outline: none; font-family: 'Cinzel', serif;
}
.az-cm-qi-title {
flex: 1; min-width: 100px; padding: 3px 7px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 5px; color: rgba(255,255,255,0.85);
font-size: 11px; outline: none;
}
.az-cm-qi-size {
white-space: nowrap; color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif; font-size: 10px;
}
.az-cm-qi-prog {
height: 3px;
background: rgba(255,255,255,0.06);
border-radius: 2px; margin-top: 5px; overflow: hidden;
}
.az-cm-qi-prog-fill {
height: 100%;
background: linear-gradient(90deg, #38bdf8, #1e88e5);
transition: width 0.2s; border-radius: 2px;
}
.az-cm-qi-prog-text {
font-size: 10px; color: #38bdf8; margin-top: 3px;
font-family: 'Cinzel', serif;
}
.az-cm-qi-err {
margin-top: 4px; font-size: 10.5px; color: #ff4d7a;
}
.az-cm-qi-rm {
width: 26px; height: 26px; border-radius: 7px;
background: rgba(255,77,122,0.08);
border: 1px solid rgba(255,77,122,0.2);
color: #ff4d7a; font-size: 11px; cursor: pointer;
}
.az-cm-qi-rm:hover { background: rgba(255,77,122,0.18); }
.az-cm-footer {
display: flex; gap: 10px; padding: 14px 22px;
border-top: 1px solid rgba(255,255,255,0.05);
background: rgba(8,5,12,0.7); flex-shrink: 0;
}
.az-cm-cancel, .az-cm-submit {
padding: 13px; border-radius: 12px;
font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
letter-spacing: 1.5px; cursor: pointer; border: 1px solid;
transition: all 0.18s; text-transform: uppercase;
}
.az-cm-cancel {
flex: 0 0 auto; padding-left: 22px; padding-right: 22px;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.1);
color: rgba(255,255,255,0.6);
}
.az-cm-cancel:hover { background: rgba(255,255,255,0.08); }
.az-cm-submit {
flex: 1;
background: linear-gradient(135deg, #B91C1C, #8B0000);
border-color: rgba(185,28,28,0.55); color: #fff;
box-shadow: 0 6px 20px rgba(185,28,28,0.35);
display: flex; align-items: center; justify-content: center; gap: 8px;
}
.az-cm-submit:hover:not(:disabled) {
transform: translateY(-1px); filter: brightness(1.12);
box-shadow: 0 8px 26px rgba(185,28,28,0.5);
}
.az-cm-submit:disabled {
opacity: 0.4; cursor: not-allowed;
background: rgba(255,255,255,0.04);
border-color: rgba(255,255,255,0.06);
color: rgba(255,255,255,0.3); box-shadow: none;
}
.az-cm-spin {
display: inline-block; width: 13px; height: 13px;
border: 2px solid rgba(255,255,255,0.25);
border-top-color: #fff; border-radius: 50%;
animation: azCmSpin 0.8s linear infinite;
}
/* Chapter cards on detail */
.az-cm-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(20,14,28,0.7), rgba(14,10,20,0.5));
border: 1px solid rgba(234,179,8,0.18);
border-radius: 12px; margin-bottom: 6px;
cursor: pointer; transition: all 0.2s;
}
.az-cm-item:hover {
border-color: rgba(234,179,8,0.45);
background: linear-gradient(135deg, rgba(234,179,8,0.06), rgba(14,10,20,0.5));
transform: translateY(-1px);
}
.az-cm-item .ch-num {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 13px; color: #F0D068; font-weight: 700;
letter-spacing: 1px; white-space: nowrap; min-width: 60px;
}
.az-cm-item .ch-info { flex: 1; min-width: 0; }
.az-cm-item .ch-title {
font-size: 13px; color: rgba(255,255,255,0.9);
margin-bottom: 2px; overflow: hidden;
text-overflow: ellipsis; white-space: nowrap; font-weight: 500;
}
.az-cm-item .ch-meta {
font-size: 10.5px; color: rgba(255,255,255,0.45);
font-family: 'Cinzel', serif;
}
.az-cm-item .ch-badges { display: flex; gap: 4px; }
.az-cm-badge {
padding: 3px 9px; border-radius: 12px;
font-size: 10px; font-family: 'Cinzel', serif;
font-weight: 700; letter-spacing: 0.5px; white-space: nowrap;
}
.az-cm-badge.free {
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.3);
color: #22c55e;
}
.az-cm-badge.vip {
background: linear-gradient(135deg, rgba(234,179,8,0.18), rgba(139,93,28,0.1));
border: 1px solid rgba(234,179,8,0.45);
color: #F0D068;
}
.az-cm-badge.coin {
background: rgba(56,189,248,0.12);
border: 1px solid rgba(56,189,248,0.35);
color: #38bdf8;
}
.ch-admin-actions { display: flex; gap: 4px; margin-left: 6px; }
.ch-admin-btn {
width: 28px; height: 28px; border-radius: 7px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(234,179,8,0.25);
color: #F0D068; font-size: 11px; cursor: pointer;
}
.ch-admin-btn:hover {
background: rgba(234,179,8,0.15);
border-color: rgba(234,179,8,0.5);
}
.ch-admin-btn.danger {
border-color: rgba(255,77,122,0.3); color: #ff4d7a;
}
.ch-admin-btn.danger:hover {
background: rgba(255,77,122,0.15); border-color: rgba(255,77,122,0.5);
}
.az-cm-add-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: calc(100% - 28px); margin: 12px 14px;
padding: 13px 16px;
background: linear-gradient(135deg, rgba(185,28,28,0.18), rgba(212,175,55,0.08));
border: 1px dashed rgba(212,175,55,0.5);
border-radius: 14px; color: #F0D068;
font-family: 'Cinzel', serif; font-size: 12px; font-weight: 700;
letter-spacing: 1.5px; text-transform: uppercase;
cursor: pointer; transition: all 0.2s;
}
.az-cm-add-btn:hover {
background: linear-gradient(135deg, rgba(185,28,28,0.3), rgba(212,175,55,0.15));
border-color: rgba(212,175,55,0.7); border-style: solid;
transform: translateY(-1px);
}
/* Reader — PDF + image pages */
.rdr-loading {
text-align: center; padding: 40px;
color: rgba(234,179,8,0.6);
font-family: 'Cinzel', serif; font-size: 13px;
}
.rdr-page-failed {
background: rgba(255,77,122,0.08);
border: 1px dashed rgba(255,77,122,0.3);
color: #ff4d7a; padding: 40px 20px;
text-align: center; font-family: 'Cinzel', serif;
border-radius: 6px; margin: 4px 0;
}
.rdr-pdf-page-wrap {
margin: 0 auto 4px; max-width: 100%;
display: flex; justify-content: center;
}
.rdr-pdf-canvas {
max-width: 100%; height: auto; display: block;
}
/* Mobile uploader tweaks */
@media (max-width: 767px) {
.az-cm-overlay { align-items: flex-end; padding: 0; }
.az-cm-box {
max-height: 96vh; border-radius: 18px 18px 0 0;
}
.az-cm-header { padding: 14px 16px; }
.az-cm-body { padding: 14px 16px; }
.az-cm-footer { padding: 12px 16px; }
.az-cm-formats { grid-template-columns: 1fr; }
.az-cm-fmt-btn { padding: 12px; display: flex; align-items: center; gap: 12px; text-align: left; }
.az-cm-fmt-ico { font-size: 22px; margin-bottom: 0; }
.az-cm-fmt-name { font-size: 12px; margin-bottom: 0; }
.az-cm-fmt-desc { font-size: 9.5px; }
.az-cm-types { grid-template-columns: repeat(3, 1fr); }
}
/* Hide ALL legacy chapter system elements */
#azura-pdf-progress-overlay { display: none !important; }
#azura-bulk-uploader { display: none !important; }
#az-ch-modal { display: none !important; }
#azura-admin-add-ch-btn,
#aap-bulk-btn { display: none !important; }
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — NEW READER OVERLAY (replaces old #page-reader)
════════════════════════════════════════════════════════════════════════ */
.az-rdr-overlay {
position: fixed; inset: 0;
z-index: 99999;
background: #050208;
display: flex; flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);
overflow: hidden;
}
.az-rdr-overlay.open {
opacity: 1;
pointer-events: auto;
}
.az-rdr-back {
position: fixed;
top: max(env(safe-area-inset-top, 14px), 14px);
left: 14px;
z-index: 100001;
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(10, 7, 18, 0.78);
backdrop-filter: blur(14px) saturate(160%);
border: 1px solid rgba(234, 179, 8, 0.3);
color: #EAB308;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.22s;
padding: 0;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55);
}
.az-rdr-back:hover {
background: rgba(20, 14, 28, 0.92);
border-color: rgba(234, 179, 8, 0.6);
color: #F0D068;
box-shadow: 0 8px 28px rgba(234, 179, 8, 0.2);
}
.az-rdr-back:active { transform: scale(0.94); }
.az-rdr-progress-wrap {
position: fixed;
top: 0; left: 0; right: 0;
height: 2px;
background: rgba(255, 255, 255, 0.04);
z-index: 100000;
pointer-events: none;
}
.az-rdr-progress-bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 50%, #F0D068 100%);
transition: width 0.25s ease;
box-shadow: 0 0 8px rgba(234, 179, 8, 0.5);
}
.az-rdr-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100000;
display: flex; align-items: center; gap: 10px;
padding: 14px 14px 14px 64px;
padding-top: max(env(safe-area-inset-top, 14px), 14px);
background: linear-gradient(180deg, rgba(5, 2, 8, 0.94) 0%, rgba(5, 2, 8, 0.7) 70%, transparent 100%);
backdrop-filter: blur(16px);
}
.az-rdr-title-group { flex: 1; min-width: 0; text-align: center; }
.az-rdr-mw-name {
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
color: rgba(234, 179, 8, 0.62);
text-transform: uppercase;
margin-bottom: 2px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.az-rdr-ch-name {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 14px;
font-weight: 700;
color: #fff;
letter-spacing: 0.5px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.az-rdr-controls {
display: flex; gap: 6px; flex-shrink: 0;
}
.az-rdr-nav {
width: 38px; height: 38px;
border-radius: 10px;
background: rgba(10, 7, 18, 0.78);
backdrop-filter: blur(12px);
border: 1px solid rgba(234, 179, 8, 0.2);
color: rgba(234, 179, 8, 0.85);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.18s;
padding: 0;
}
.az-rdr-nav:hover:not(:disabled) {
background: rgba(20, 14, 28, 0.92);
border-color: rgba(234, 179, 8, 0.5);
color: #F0D068;
}
.az-rdr-nav:active { transform: scale(0.94); }
.az-rdr-nav:disabled { opacity: 0.25; cursor: not-allowed; }
.az-rdr-body {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
width: 100%;
background: linear-gradient(180deg, #0a0710 0%, #050208 100%);
scroll-behavior: smooth;
padding-top: 70px;
padding-bottom: 80px;
}
.az-rdr-body::-webkit-scrollbar { width: 4px; }
.az-rdr-body::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, rgba(234, 179, 8, 0.35), rgba(185, 28, 28, 0.35));
border-radius: 2px;
}
.az-rdr-pages {
max-width: 880px;
margin: 0 auto;
padding: 8px 8px 16px;
display: flex; flex-direction: column;
gap: 4px;
width: 100%;
}
.az-rdr-page {
width: 100% !important;
max-width: 100%;
height: auto !important;
display: block;
background: #000;
border-radius: 4px;
margin: 0 auto;
user-select: none;
-webkit-user-drag: none;
}
.az-rdr-pdf-wrap {
margin: 0 auto;
display: flex; justify-content: center;
}
.az-rdr-pdf-canvas {
max-width: 100%;
height: auto;
}
.az-rdr-loading {
text-align: center;
padding: 80px 20px;
color: rgba(234, 179, 8, 0.5);
font-family: 'Cinzel', serif;
font-size: 12px;
letter-spacing: 1px;
}
.az-rdr-failed {
background: rgba(255, 77, 122, 0.08);
border: 1px dashed rgba(255, 77, 122, 0.3);
color: #ff4d7a;
padding: 40px 20px;
text-align: center;
font-family: 'Cinzel', serif;
border-radius: 6px;
margin: 4px 0;
}
.az-rdr-footer {
position: fixed;
bottom: 0; left: 0; right: 0;
z-index: 100000;
display: flex; align-items: center; justify-content: center;
gap: 10px;
padding: 14px 16px;
padding-bottom: max(env(safe-area-inset-bottom, 14px), 14px);
background: linear-gradient(0deg, rgba(5, 2, 8, 0.94) 0%, rgba(5, 2, 8, 0.7) 70%, transparent 100%);
backdrop-filter: blur(16px);
}
.az-rdr-nav-btn {
display: flex; align-items: center; gap: 8px;
padding: 11px 18px;
border-radius: 12px;
background: rgba(10, 7, 18, 0.85);
backdrop-filter: blur(12px);
border: 1px solid rgba(234, 179, 8, 0.25);
color: rgba(234, 179, 8, 0.92);
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
cursor: pointer;
transition: all 0.18s;
text-transform: uppercase;
}
.az-rdr-nav-btn:hover:not(:disabled) {
background: linear-gradient(135deg, rgba(185, 28, 28, 0.25), rgba(20, 14, 28, 0.9));
border-color: rgba(234, 179, 8, 0.55);
color: #F0D068;
transform: translateY(-1px);
}
.az-rdr-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.az-rdr-pill {
padding: 10px 16px;
border-radius: 22px;
background: linear-gradient(135deg, rgba(234, 179, 8, 0.18), rgba(139, 0, 0, 0.12));
border: 1px solid rgba(234, 179, 8, 0.4);
color: #F0D068;
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.2px;
white-space: nowrap;
}
/* Hide UI on body when reader open */
body.on-az-reader { overflow: hidden; }
body.on-az-reader .sidebar,
body.on-az-reader .mobile-bottom-nav,
body.on-az-reader .mobile-topbar,
body.on-az-reader #azura-fab,
body.on-az-reader #azura-stt {
display: none !important;
}
/* Mobile */
@media (max-width: 767px) {
.az-rdr-back {
width: 38px; height: 38px;
top: max(env(safe-area-inset-top, 12px), 12px);
left: 12px;
}
.az-rdr-header {
padding: 12px 12px 12px 60px;
gap: 6px;
}
.az-rdr-mw-name { font-size: 9px; }
.az-rdr-ch-name { font-size: 12px; }
.az-rdr-nav { width: 36px; height: 36px; }
.az-rdr-body { padding-top: 64px; padding-bottom: 76px; }
.az-rdr-pages { padding: 4px; gap: 2px; }
.az-rdr-footer { padding: 10px 12px; gap: 6px; }
.az-rdr-nav-btn { padding: 10px 14px; font-size: 10px; }
}
@media (max-width: 480px) {
.az-rdr-nav-btn { padding: 10px; width: 40px; height: 40px; font-size: 0; overflow: hidden; }
}
/* Hide ALL legacy chapter-system & reader elements (safety net) */
#page-reader,
.reader-page,
#azura-pdf-progress-overlay,
#azura-bulk-uploader,
#az-ch-modal,
#azura-admin-add-ch-btn,
#aap-bulk-btn,
.azpp-box,
.azura-pdf-progress-overlay {
display: none !important;
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 FIX — Force inactive pages to hide completely
════════════════════════════════════════════════════════════════════════ */
/* Inactive pages must be COMPLETELY hidden (not just transparent) */
.page:not(.active) {
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
.page.active {
display: flex !important;
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — Detail page admin mini-panel (replaces old DAP)
════════════════════════════════════════════════════════════════════════ */
.dap-mini-panel {
margin: 14px;
background: linear-gradient(135deg, rgba(20,14,28,0.88), rgba(8,5,12,0.92));
border: 1px solid rgba(234,179,8,0.28);
border-radius: 14px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.dap-mini-head {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px;
background: linear-gradient(90deg, rgba(139,0,0,0.18), rgba(234,179,8,0.06));
border-bottom: 1px solid rgba(234,179,8,0.18);
}
.dap-mini-icon {
width: 32px; height: 32px;
border-radius: 9px;
background: linear-gradient(135deg, var(--crimson, #B91C1C), var(--crimson-light, #DC2626));
display: flex; align-items: center; justify-content: center;
color: #fff;
flex-shrink: 0;
}
.dap-mini-text { flex: 1; min-width: 0; }
.dap-mini-title {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: var(--gold-light, #F0D068);
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.dap-mini-sub {
font-size: 10px;
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
letter-spacing: 0.4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dap-mini-add-btn {
padding: 10px 16px;
border-radius: 10px;
background: linear-gradient(135deg, var(--crimson, #B91C1C), var(--crimson-dark, #8B0000));
border: 1px solid rgba(234,179,8,0.3);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: all 0.18s;
box-shadow: 0 4px 14px rgba(139,0,0,0.3);
}
.dap-mini-add-btn:hover {
transform: translateY(-1px);
filter: brightness(1.1);
box-shadow: 0 6px 20px rgba(139,0,0,0.45);
}
.dap-mini-info {
padding: 12px 18px;
font-size: 11px;
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
letter-spacing: 0.3px;
line-height: 1.5;
}
/* Hide ALL old DAP elements (safety net) */
#dap-tabs,
#dap-pane-add,
#dap-pane-list,
#dap-pane-vip,
#dap-pane-sched,
.dap-chapters-table,
.dap-vip-ch-item,
.dap-schedule-item,
.dap-empty-state {
display: none !important;
}
/* Mobile */
@media (max-width: 640px) {
.dap-mini-head { flex-wrap: wrap; gap: 10px; padding: 12px 14px; }
.dap-mini-add-btn { width: 100%; padding: 12px; font-size: 12px; }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — Modal select dark dropdown fix + adult page polish
════════════════════════════════════════════════════════════════════════ */
/* Force dark theme on modal selects (was showing white system dropdown) */
.az-cm-input,
select.az-cm-input {
color: #fff !important;
background-color: rgba(20, 14, 28, 0.95) !important;
}
.az-cm-input option,
select.az-cm-input option {
background: #14092a !important;
color: #fff !important;
padding: 8px;
}
.az-cm-input option:checked,
.az-cm-input option:hover {
background: linear-gradient(135deg, #B91C1C, #8B0000) !important;
color: #fff !important;
}
.az-cm-input option:disabled {
color: rgba(255, 255, 255, 0.4) !important;
font-style: italic;
}
/* Enhanced 18+ adult card grid (used in cleaned-up adult page) */
#adult-content-body .ax-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
@media (max-width: 480px) {
#adult-content-body .ax-grid {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
}
/* Coin Shop polish — better tab spacing on mobile */
@media (max-width: 640px) {
.azura-store-tabs,
[class*="store-tab"],
[class*="ach-tab"] {
gap: 4px !important;
}
.store-tab,
[class*="store-tab-btn"] {
padding: 9px 10px !important;
font-size: 11px !important;
}
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — Coin Shop polish (desktop + mobile)
════════════════════════════════════════════════════════════════════════ */
/* Refined store hero — balanced spacing */
.store-hero {
padding: 24px 20px !important;
margin: 0 14px;
border-radius: 16px;
}
.store-hero-title {
font-size: 22px !important;
letter-spacing: 1.5px !important;
}
.store-hero-sub {
font-size: 12px !important;
opacity: 0.7;
}
/* Tabs row - more compact on mobile, larger on desktop */
.store-tabs {
padding: 12px 14px !important;
gap: 8px !important;
}
.store-tab {
padding: 14px 8px !important;
border-radius: 14px !important;
}
.store-tab-icon { font-size: 22px !important; }
.store-tab-label { font-size: 10px !important; letter-spacing: 1px !important; }
/* Smooth content transitions */
.store-content {
animation: storeFadeIn 0.32s ease;
}
@keyframes storeFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Premium VIP tab cards - keep crimson theme */
.store-content [class*="vip-card"],
.store-content .vip-pkg-card {
border-radius: 16px !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.store-content [class*="vip-card"]:hover,
.store-content .vip-pkg-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 36px rgba(139, 0, 0, 0.35) !important;
}
/* Mobile - larger tap targets, single column */
@media (max-width: 480px) {
.store-hero { padding: 20px 16px !important; }
.store-hero-title { font-size: 18px !important; }
.store-hero-sub { font-size: 11px !important; }
.store-tabs { padding: 10px 12px !important; gap: 6px !important; }
.store-tab { padding: 11px 6px !important; }
.store-tab-icon { font-size: 18px !important; }
.store-tab-label { font-size: 9px !important; }
.store-content { padding: 0 12px 80px !important; }
}
/* Desktop - wider hero, larger spacing */
@media (min-width: 960px) {
.store-hero {
padding: 32px 28px !important;
margin: 0 20px;
}
.store-hero-title { font-size: 26px !important; }
.store-hero-sub { font-size: 13px !important; }
.store-tabs { max-width: 640px; margin: 0 auto; padding: 16px !important; }
.store-tab { padding: 16px 10px !important; }
.store-tab-icon { font-size: 24px !important; }
.store-content { padding: 0 20px 100px !important; max-width: 1200px; margin: 0 auto; }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — HERO SLIDER (auto-rotating manhwa showcase)
════════════════════════════════════════════════════════════════════════ */
.az-slider {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
background: #050208;
border-radius: 0 0 16px 16px;
margin-bottom: 12px;
}
@media (min-width: 768px) { .az-slider { height: 440px; border-radius: 16px; margin: 0 14px 14px; width: calc(100% - 28px); } }
@media (min-width: 1200px) { .az-slider { height: 500px; } }
/* Slides */
.az-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.8s ease;
cursor: pointer;
}
.az-slide.active { opacity: 1; z-index: 1; }
.az-slide img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Dark overlay */
.az-slider-overlay {
position: absolute; inset: 0; z-index: 2;
background:
linear-gradient(0deg, rgba(5,2,8,0.95) 0%, rgba(5,2,8,0.5) 35%, transparent 65%),
linear-gradient(90deg, rgba(5,2,8,0.7) 0%, transparent 50%);
pointer-events: none;
}
/* Content (title, meta, buttons) */
.az-slider-content {
position: absolute;
bottom: 48px; left: 24px; right: 120px;
z-index: 3;
}
@media (max-width: 767px) { .az-slider-content { bottom: 40px; left: 16px; right: 16px; } }
.az-slider-tag {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
background: linear-gradient(135deg, rgba(185,28,28,0.85), rgba(139,0,0,0.85));
border-radius: 14px;
color: #fff;
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
margin-bottom: 8px;
}
.az-slider-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 28px;
font-weight: 900;
color: #fff;
letter-spacing: 1px;
line-height: 1.15;
margin-bottom: 6px;
text-shadow: 0 2px 16px rgba(0,0,0,0.6);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 640px) { .az-slider-title { font-size: 22px; } }
@media (max-width: 400px) { .az-slider-title { font-size: 18px; } }
.az-slider-meta {
font-family: 'Cinzel', serif;
font-size: 12px;
color: rgba(234,179,8,0.85);
letter-spacing: 0.8px;
margin-bottom: 12px;
}
.az-slider-actions { display: flex; gap: 8px; }
.az-slider-actions .btn-primary,
.az-slider-actions .btn-outline {
padding: 10px 20px !important;
font-size: 12px !important;
border-radius: 10px !important;
}
/* Dots */
.az-slider-dots {
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex; gap: 6px;
}
.az-slider-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.3);
border: none;
cursor: pointer;
transition: all 0.3s;
padding: 0;
}
.az-slider-dot.active {
width: 24px;
border-radius: 4px;
background: linear-gradient(135deg, #B91C1C, #EAB308);
box-shadow: 0 0 8px rgba(234,179,8,0.5);
}
/* Arrow buttons */
.az-slider-arr {
position: absolute;
top: 50%; transform: translateY(-50%);
z-index: 4;
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(10,7,18,0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(234,179,8,0.2);
color: #F0D068;
font-size: 22px;
cursor: pointer;
transition: all 0.2s;
display: flex; align-items: center; justify-content: center;
}
.az-slider-prev { left: 10px; }
.az-slider-next { right: 10px; }
.az-slider-arr:hover {
background: rgba(20,14,28,0.85);
border-color: rgba(234,179,8,0.5);
box-shadow: 0 4px 16px rgba(234,179,8,0.2);
}
@media (max-width: 640px) {
.az-slider-arr { width: 34px; height: 34px; font-size: 18px; }
.az-slider-prev { left: 6px; }
.az-slider-next { right: 6px; }
}
/* Admin gear button */
.az-slider-admin-btn {
position: absolute;
top: 10px; right: 10px;
z-index: 5;
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(10,7,18,0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(234,179,8,0.3);
color: #F0D068;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.az-slider-admin-btn:hover {
background: rgba(20,14,28,0.9);
border-color: rgba(234,179,8,0.6);
box-shadow: 0 4px 16px rgba(234,179,8,0.3);
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — FOOTER (site-wide bottom section)
════════════════════════════════════════════════════════════════════════ */
.az-footer {
background: linear-gradient(180deg, rgba(8,5,12,0.98), rgba(4,2,6,0.99));
border-top: 1px solid rgba(234,179,8,0.15);
padding-bottom: 80px; /* for mobile bottom nav */
margin-top: 40px;
}
/* Desktop: footer respects sidebar */
@media (min-width: 769px) {
.az-footer {
margin-left: var(--sidebar-w, 250px);
}
}
.az-footer-inner {
max-width: 1200px;
margin: 0 auto;
padding: 40px 24px 20px;
}
.az-footer-top {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 40px;
margin-bottom: 32px;
}
@media (max-width: 768px) {
.az-footer-top { grid-template-columns: 1fr; gap: 28px; }
}
/* Brand */
.az-footer-brand { max-width: 300px; }
.az-footer-logo {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 28px;
font-weight: 900;
color: #F0D068;
letter-spacing: 3px;
margin-bottom: 4px;
text-shadow: 0 2px 12px rgba(234,179,8,0.3);
}
.az-footer-slogan {
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 3px;
color: rgba(185,28,28,0.75);
text-transform: uppercase;
margin-bottom: 12px;
}
.az-footer-desc {
font-size: 12px;
color: rgba(255,255,255,0.45);
line-height: 1.7;
}
/* Columns */
.az-footer-cols {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
@media (max-width: 640px) {
.az-footer-cols { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
.az-footer-col-title {
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: rgba(234,179,8,0.7);
margin-bottom: 12px;
text-transform: uppercase;
}
.az-footer-link {
display: block;
font-size: 12px;
color: rgba(255,255,255,0.55);
margin-bottom: 8px;
cursor: pointer;
transition: color 0.15s;
text-decoration: none;
}
.az-footer-link:hover { color: #F0D068; }
/* Socials */
.az-footer-socials { display: flex; gap: 8px; }
.az-footer-social {
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(234,179,8,0.2);
display: flex; align-items: center; justify-content: center;
color: rgba(234,179,8,0.7);
transition: all 0.2s;
text-decoration: none;
}
.az-footer-social:hover {
background: rgba(234,179,8,0.12);
border-color: rgba(234,179,8,0.5);
color: #F0D068;
transform: translateY(-2px);
}
/* Bottom bar */
.az-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.06);
flex-wrap: wrap;
gap: 10px;
}
.az-footer-copy {
font-size: 11px;
color: rgba(255,255,255,0.35);
font-family: 'Cinzel', serif;
letter-spacing: 0.5px;
}
.az-footer-badge {
display: flex; align-items: center; gap: 6px;
font-family: 'Cinzel', serif;
font-size: 10px;
color: rgba(234,179,8,0.5);
letter-spacing: 1.5px;
}
.az-footer-badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 6px rgba(34,197,94,0.5);
animation: azFooterPulse 2s ease infinite;
}
@keyframes azFooterPulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — NEW RELEASES (MangaLab style) + CONTINUE READING
════════════════════════════════════════════════════════════════════════ */
/* ── New Releases Grid ─────────────────────────────────── */
.az-new-releases {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0 14px;
}
.az-nr-item {
display: flex;
align-items: center;
gap: 14px;
padding: 12px 14px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.04);
border-radius: 12px;
cursor: pointer;
transition: all 0.2s;
}
.az-nr-item:hover {
background: rgba(234,179,8,0.04);
border-color: rgba(234,179,8,0.2);
transform: translateX(3px);
}
.az-nr-cover {
width: 52px;
height: 72px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
border: 1px solid rgba(234,179,8,0.15);
}
.az-nr-info {
flex: 1;
min-width: 0;
}
.az-nr-title {
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
color: #fff;
margin-bottom: 3px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.az-nr-chapter {
font-size: 11px;
color: #22c55e;
font-weight: 600;
margin-bottom: 2px;
}
.az-nr-chapter span {
display: inline-block;
padding: 1px 6px;
background: rgba(34,197,94,0.12);
border: 1px solid rgba(34,197,94,0.25);
border-radius: 6px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.5px;
color: #22c55e;
margin-right: 4px;
}
.az-nr-time {
font-size: 10px;
color: rgba(255,255,255,0.4);
font-family: 'Cinzel', serif;
letter-spacing: 0.3px;
white-space: nowrap;
}
.az-nr-arrow {
color: rgba(234,179,8,0.4);
font-size: 16px;
flex-shrink: 0;
transition: color 0.15s;
}
.az-nr-item:hover .az-nr-arrow { color: #F0D068; }
@media (min-width: 768px) {
.az-new-releases {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
}
/* ── Continue Reading Card ─────────────────────────────── */
.az-continue-section { /* shown/hidden by JS */ }
.az-continue-card {
margin: 0 14px;
}
.az-cont-wrap {
display: flex;
gap: 18px;
padding: 18px;
background: linear-gradient(135deg, rgba(20,14,28,0.88), rgba(8,5,12,0.92));
border: 1px solid rgba(234,179,8,0.28);
border-radius: 16px;
overflow: hidden;
position: relative;
transition: all 0.25s;
}
.az-cont-wrap:hover {
border-color: rgba(234,179,8,0.5);
box-shadow: 0 8px 32px rgba(185,28,28,0.2);
}
.az-cont-cover {
width: 120px;
height: 170px;
border-radius: 10px;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 6px 20px rgba(0,0,0,0.5);
border: 1px solid rgba(234,179,8,0.2);
}
.az-cont-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
.az-cont-label {
font-family: 'Cinzel', serif;
font-size: 10px;
letter-spacing: 1.5px;
color: rgba(234,179,8,0.6);
text-transform: uppercase;
margin-bottom: 4px;
}
.az-cont-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
font-weight: 900;
color: #fff;
margin-bottom: 4px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.az-cont-chapter {
font-size: 12px;
color: rgba(255,255,255,0.6);
margin-bottom: 12px;
font-family: 'Cinzel', serif;
}
.az-cont-progress-wrap {
height: 4px;
background: rgba(255,255,255,0.08);
border-radius: 2px;
overflow: hidden;
margin-bottom: 14px;
}
.az-cont-progress-bar {
height: 100%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 100%);
border-radius: 2px;
transition: width 0.5s ease;
box-shadow: 0 0 6px rgba(234,179,8,0.4);
}
.az-cont-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 12px;
background: linear-gradient(135deg, #B91C1C, #8B0000);
border: 1px solid rgba(234,179,8,0.3);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.2s;
box-shadow: 0 4px 16px rgba(185,28,28,0.35);
}
.az-cont-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(185,28,28,0.55), 0 0 18px rgba(185,28,28,0.3);
filter: brightness(1.15);
}
@media (max-width: 640px) {
.az-cont-wrap { gap: 12px; padding: 14px; }
.az-cont-cover { width: 90px; height: 130px; }
.az-cont-title { font-size: 15px; }
}
/* ── Trending Now (differentiated with fire glow) ──────── */
#trending-now-row .manga-card {
border: 1px solid rgba(255,106,0,0.15);
}
#trending-now-row .manga-card:hover {
border-color: rgba(255,106,0,0.35);
box-shadow: 0 8px 24px rgba(255,106,0,0.15);
}
/* ── Ko'p O'qilayotgan (differentiated with crimson glow) ── */
#trending-row .manga-card {
border: 1px solid rgba(185,28,28,0.12);
}
#trending-row .manga-card:hover {
border-color: rgba(185,28,28,0.35);
box-shadow: 0 8px 24px rgba(185,28,28,0.2);
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — PROMO BANNER CAROUSEL (MangaLab style)
════════════════════════════════════════════════════════════════════════ */
.az-promo {
position: relative;
width: calc(100% - 28px);
margin: 12px 14px;
height: 260px;
border-radius: 16px;
overflow: hidden;
background: #050208;
border: 1px solid rgba(234,179,8,0.12);
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
@media (min-width: 768px) {
.az-promo { height: 340px; }
}
@media (min-width: 1200px) {
.az-promo { height: 400px; }
}
/* Slides */
.az-promo-slide {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.7s ease;
}
.az-promo-slide.active {
opacity: 1;
z-index: 1;
}
.az-promo-slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Dots */
.az-promo-dots {
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
z-index: 4;
display: flex;
gap: 6px;
}
.az-promo-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
border: none;
cursor: pointer;
transition: all 0.3s;
padding: 0;
}
.az-promo-dot.active {
width: 24px;
border-radius: 4px;
background: linear-gradient(135deg, #B91C1C, #EAB308);
box-shadow: 0 0 8px rgba(234,179,8,0.5);
}
/* Arrows */
.az-promo-arr {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 4;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(10,7,18,0.6);
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.15);
color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
}
.az-promo:hover .az-promo-arr { opacity: 1; }
.az-promo-prev { left: 10px; }
.az-promo-next { right: 10px; }
.az-promo-arr:hover {
background: rgba(20,14,28,0.85);
border-color: rgba(234,179,8,0.4);
color: #F0D068;
}
/* Admin gear btn */
.az-promo-admin-btn {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
width: 34px;
height: 34px;
border-radius: 10px;
background: rgba(10,7,18,0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(234,179,8,0.3);
color: #F0D068;
font-size: 15px;
cursor: pointer;
transition: all 0.2s;
}
.az-promo-admin-btn:hover {
background: rgba(20,14,28,0.92);
border-color: rgba(234,179,8,0.6);
box-shadow: 0 4px 14px rgba(234,179,8,0.25);
}
/* Mobile arrows always visible (no hover on touch) */
@media (max-width: 767px) {
.az-promo-arr { opacity: 0.6; width: 32px; height: 32px; font-size: 16px; }
.az-promo-prev { left: 6px; }
.az-promo-next { right: 6px; }
.az-promo { margin: 8px 10px; height: 200px; }
}
/* ── Admin modal extras ──────────────────────────────────── */
.az-promo-add-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.az-promo-add-row {
display: flex;
flex-direction: column;
gap: 6px;
}
.az-promo-add-row label {
font-family: 'Cinzel', serif;
font-size: 11px;
letter-spacing: 0.8px;
color: rgba(234,179,8,0.7);
font-weight: 700;
}
.az-promo-drop {
border: 2px dashed rgba(234,179,8,0.3);
border-radius: 12px;
padding: 16px;
cursor: pointer;
transition: all 0.2s;
min-height: 80px;
}
.az-promo-drop:hover,
.az-promo-drop.dragover {
border-color: rgba(234,179,8,0.6);
background: rgba(234,179,8,0.05);
}
.az-promo-preview-empty {
text-align: center;
color: rgba(255,255,255,0.4);
font-size: 13px;
padding: 20px;
}
.az-promo-admin-item {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 10px;
margin-bottom: 6px;
}
.az-promo-admin-thumb {
width: 80px;
height: 48px;
border-radius: 8px;
object-fit: cover;
flex-shrink: 0;
border: 1px solid rgba(234,179,8,0.15);
}
.az-promo-admin-info {
flex: 1;
min-width: 0;
}
.az-promo-admin-title {
font-size: 12px;
color: #fff;
font-weight: 600;
margin-bottom: 2px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.az-promo-admin-link {
font-size: 10px;
color: rgba(234,179,8,0.6);
font-family: 'Cinzel', serif;
}
.az-promo-admin-del {
width: 30px;
height: 30px;
border-radius: 8px;
background: rgba(255,77,122,0.08);
border: 1px solid rgba(255,77,122,0.2);
color: #ff4d7a;
font-size: 13px;
cursor: pointer;
flex-shrink: 0;
}
.az-promo-admin-del:hover {
background: rgba(255,77,122,0.18);
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — PREMIUM CONTINUE READING (cinematic cards)
════════════════════════════════════════════════════════════════════════ */
.az-cont-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.az-cont-wrap {
display: flex;
gap: 18px;
padding: 18px;
background: linear-gradient(135deg, rgba(20,14,28,0.92), rgba(8,5,12,0.95));
border: 1px solid rgba(234,179,8,0.2);
border-radius: 16px;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.az-cont-wrap::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 0% 50%, rgba(185,28,28,0.08) 0%, transparent 60%);
pointer-events: none;
transition: opacity 0.3s;
opacity: 0;
}
.az-cont-wrap:hover {
transform: translateY(-4px);
border-color: rgba(234,179,8,0.45);
box-shadow:
0 12px 40px rgba(185,28,28,0.25),
0 0 30px rgba(234,179,8,0.08);
}
.az-cont-wrap:hover::before { opacity: 1; }
.az-cont-cover-wrap {
position: relative;
flex-shrink: 0;
}
.az-cont-cover {
width: 115px;
height: 165px;
border-radius: 12px;
object-fit: cover;
border: 1px solid rgba(234,179,8,0.25);
box-shadow: 0 8px 24px rgba(0,0,0,0.5);
transition: transform 0.3s;
}
.az-cont-wrap:hover .az-cont-cover { transform: scale(1.03); }
.az-cont-cover-glow {
position: absolute;
bottom: -8px;
left: 10%;
width: 80%;
height: 20px;
background: radial-gradient(ellipse, rgba(185,28,28,0.4) 0%, transparent 70%);
filter: blur(8px);
pointer-events: none;
}
.az-cont-body {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
gap: 4px;
}
.az-cont-label {
font-family: 'Cinzel', serif;
font-size: 9px;
letter-spacing: 2px;
color: rgba(234,179,8,0.55);
text-transform: uppercase;
}
.az-cont-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 17px;
font-weight: 900;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1.2;
}
.az-cont-chapter {
font-size: 11px;
color: rgba(255,255,255,0.55);
font-family: 'Cinzel', serif;
letter-spacing: 0.4px;
margin-bottom: 6px;
}
.az-cont-progress-wrap {
position: relative;
height: 5px;
background: rgba(255,255,255,0.06);
border-radius: 3px;
overflow: hidden;
margin-bottom: 10px;
}
.az-cont-progress-bar {
height: 100%;
background: linear-gradient(90deg, #B91C1C 0%, #EAB308 100%);
border-radius: 3px;
transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 8px rgba(234,179,8,0.5);
}
.az-cont-progress-pct {
position: absolute;
top: -18px;
right: 0;
font-size: 9px;
font-family: 'Cinzel', serif;
color: rgba(234,179,8,0.6);
font-weight: 700;
letter-spacing: 0.5px;
}
.az-cont-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 11px 22px;
border-radius: 11px;
background: linear-gradient(135deg, #B91C1C, #8B0000);
border: 1px solid rgba(234,179,8,0.25);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
text-transform: uppercase;
transition: all 0.25s;
box-shadow: 0 4px 16px rgba(185,28,28,0.35);
align-self: flex-start;
}
.az-cont-btn:hover {
transform: translateY(-2px);
box-shadow:
0 8px 28px rgba(185,28,28,0.55),
0 0 20px rgba(185,28,28,0.3);
filter: brightness(1.15);
}
/* Desktop: horizontal cards */
@media (min-width: 768px) {
.az-cont-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
gap: 14px;
}
}
/* Mobile */
@media (max-width: 640px) {
.az-cont-wrap { gap: 12px; padding: 14px; }
.az-cont-cover { width: 85px; height: 125px; border-radius: 10px; }
.az-cont-title { font-size: 14px; }
.az-cont-btn { padding: 10px 16px; font-size: 10px; }
}
/* ── Hide old eski slider CSS if any ────────────────────── */
.az-slider { display: none !important; }
/* v15 fix: hide promo arrows and dots (removed from JS) */
.az-promo-arr, .az-promo-dots, .az-promo-dot,
.az-promo-prev, .az-promo-next { display: none !important; }
/* Promo admin btn — smaller, top-right corner only */
.az-promo-admin-btn {
position: absolute !important;
top: 8px !important; right: 8px !important;
z-index: 5 !important;
width: 32px !important; height: 32px !important;
border-radius: 50% !important;
background: rgba(10,7,18,0.75) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(234,179,8,0.3) !important;
color: #F0D068 !important;
font-size: 14px !important;
cursor: pointer !important;
opacity: 0;
transition: opacity 0.2s !important;
}
.az-promo:hover .az-promo-admin-btn { opacity: 1; }
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — READER ENHANCEMENTS (auto-hide, end card, page counter)
════════════════════════════════════════════════════════════════════════ */
/* Auto-hide header/footer on scroll */
.az-rdr-header.az-rdr-hidden {
transform: translateY(-100%) !important;
opacity: 0 !important;
pointer-events: none !important;
}
.az-rdr-footer.az-rdr-hidden {
transform: translateY(100%) !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Loading animation */
.az-rdr-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 80px 20px;
color: rgba(234,179,8,0.5);
font-family: 'Cinzel', serif;
font-size: 13px;
letter-spacing: 1px;
}
.az-rdr-loading-icon {
font-size: 40px;
animation: azRdrBounce 1s ease infinite;
}
@keyframes azRdrBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* End of chapter card */
.az-rdr-end-card {
text-align: center;
padding: 48px 24px;
margin: 20px auto;
max-width: 400px;
background: linear-gradient(180deg, rgba(20,14,28,0.95), rgba(8,5,12,0.98));
border: 1px solid rgba(234,179,8,0.3);
border-radius: 20px;
box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.az-rdr-end-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px; height: 56px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(34,197,94,0.2), rgba(34,197,94,0.05));
border: 2px solid rgba(34,197,94,0.5);
color: #22c55e;
font-size: 24px;
font-weight: 900;
margin-bottom: 14px;
}
.az-rdr-end-title {
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 18px;
color: #F0D068;
letter-spacing: 1.5px;
margin-bottom: 4px;
}
.az-rdr-end-sub {
font-size: 12px;
color: rgba(255,255,255,0.5);
font-family: 'Cinzel', serif;
margin-bottom: 20px;
}
.az-rdr-end-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: 14px;
background: linear-gradient(135deg, #B91C1C, #8B0000);
border: 1px solid rgba(234,179,8,0.3);
color: #fff;
font-family: 'Cinzel', serif;
font-size: 13px;
font-weight: 700;
letter-spacing: 1.2px;
cursor: pointer;
transition: all 0.25s;
box-shadow: 0 6px 24px rgba(185,28,28,0.4);
}
.az-rdr-end-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(185,28,28,0.6);
filter: brightness(1.15);
}
/* Page counter pill — shows "3/25" */
.az-rdr-pill {
font-variant-numeric: tabular-nums;
min-width: 60px;
text-align: center;
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — BANNER SLOTS (05-banner.js)
Reads from admin system (azura_banners_v4). Slot-based display.
════════════════════════════════════════════════════════════════════════ */
.az-bn-slot {
position: relative;
width: calc(100% - 28px);
margin: 8px 14px 12px;
border-radius: 14px;
overflow: hidden;
background: transparent;
cursor: pointer;
}
/* Single banner */
.az-bn-single {
width: 100%;
border-radius: 14px;
overflow: hidden;
}
/* Media (image/video) */
.az-bn-media {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border-radius: 14px;
max-height: 320px;
}
@media (max-width: 640px) {
.az-bn-media { max-height: 200px; }
}
@media (min-width: 1200px) {
.az-bn-media { max-height: 400px; }
}
/* Banner label overlay */
.az-bn-label {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 20px 16px 12px;
background: linear-gradient(0deg, rgba(5,2,8,0.85) 0%, transparent 100%);
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 15px;
font-weight: 700;
color: #fff;
letter-spacing: 0.8px;
pointer-events: none;
}
/* Carousel track */
.az-bn-track {
position: relative;
width: 100%;
}
.az-bn-slide {
display: none;
position: relative;
}
.az-bn-slide.active {
display: block;
animation: azBnFadeIn 0.6s ease;
}
@keyframes azBnFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Dots */
.az-bn-dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 3;
display: flex;
gap: 6px;
}
.az-bn-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(255,255,255,0.35);
border: none;
cursor: pointer;
padding: 0;
transition: all 0.3s;
}
.az-bn-dot.active {
width: 22px;
border-radius: 4px;
background: linear-gradient(90deg, #B91C1C, #EAB308);
box-shadow: 0 0 8px rgba(234,179,8,0.5);
}
/* Mobile */
@media (max-width: 640px) {
.az-bn-slot { margin: 8px 10px 10px; }
}
/* Promo karusel active (05-banner slot'lardan alohida tizim) */
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — BANNER DISPLAY (Module 05) — X dismiss, slots
════════════════════════════════════════════════════════════════════════ */
/* Banner wrapper */
.az-bn-wrap {
position: relative;
width: 100%;
border-radius: 14px;
overflow: hidden;
cursor: pointer;
}
/* X dismiss button */
.az-bn-x {
position: absolute;
top: 8px; right: 8px;
z-index: 10;
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(10, 7, 18, 0.7);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.7);
font-size: 16px;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s;
opacity: 0;
}
.az-bn-wrap:hover .az-bn-x,
.az-bn-slot:hover .az-bn-x { opacity: 1; }
.az-bn-x:hover {
background: rgba(185, 28, 28, 0.8);
color: #fff;
border-color: rgba(185, 28, 28, 0.6);
}
/* Mobile — always show X */
@media (max-width: 767px) {
.az-bn-x { opacity: 0.7; }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA v15 — IMMERSIVE READER + DETAIL BACK BUTTON
════════════════════════════════════════════════════════════════════════ */
/* Reader: back button — tiny, translucent, always accessible */
.az-rdr-back {
position: fixed !important;
top: max(env(safe-area-inset-top, 10px), 10px) !important;
left: 10px !important;
z-index: 100002 !important;
width: 36px !important; height: 36px !important;
border-radius: 50% !important;
background: rgba(10,7,18,0.4) !important;
backdrop-filter: blur(8px) !important;
border: 1px solid rgba(255,255,255,0.1) !important;
color: rgba(255,255,255,0.5) !important;
display: flex !important; align-items: center !important; justify-content: center !important;
cursor: pointer !important;
transition: all 0.3s !important;
opacity: 0.4 !important;
padding: 0 !important;
}
.az-rdr-back:hover,
.az-rdr-back.az-rdr-ui-show {
opacity: 1 !important;
background: rgba(10,7,18,0.8) !important;
border-color: rgba(234,179,8,0.4) !important;
color: #F0D068 !important;
}
/* Reader: header/footer hidden by default — shown on tap */
.az-rdr-header, .az-rdr-footer {
transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease !important;
}
.az-rdr-header.az-rdr-hidden {
transform: translateY(-100%) !important;
opacity: 0 !important;
pointer-events: none !important;
}
.az-rdr-footer.az-rdr-hidden {
transform: translateY(100%) !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Reader: pages — no gap, seamless reading */
.az-rdr-pages {
gap: 0 !important;
}
.az-rdr-page {
margin: 0 auto !important;
border-radius: 0 !important;
}
/* Reader: body full black bg */
.az-rdr-body {
background: #000 !important;
padding-top: 0 !important;
padding-bottom: 60px !important;
}
/* Reader: pill in header */
.az-rdr-pill {
padding: 6px 14px !important;
border-radius: 16px !important;
background: rgba(10,7,18,0.7) !important;
border: 1px solid rgba(234,179,8,0.25) !important;
color: #F0D068 !important;
font-family: 'Cinzel', serif !important;
font-size: 10px !important;
font-weight: 700 !important;
letter-spacing: 1px !important;
font-variant-numeric: tabular-nums !important;
min-width: 60px !important;
text-align: center !important;
}
/* Reader: footer pill */
.az-rdr-pill-bottom {
padding: 8px 16px;
border-radius: 18px;
background: linear-gradient(135deg, rgba(234,179,8,0.15), rgba(139,0,0,0.1));
border: 1px solid rgba(234,179,8,0.35);
color: #F0D068;
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
}
/* Reader: auto-scroll button */
.az-rdr-auto-btn { position: relative; }
.az-rdr-auto-btn.active {
background: linear-gradient(135deg, rgba(34,197,94,0.3), rgba(34,197,94,0.1)) !important;
border-color: rgba(34,197,94,0.5) !important;
color: #22c55e !important;
box-shadow: 0 0 12px rgba(34,197,94,0.3) !important;
}
.az-rdr-auto-btn.active::after {
content: '';
position: absolute;
top: -2px; right: -2px;
width: 6px; height: 6px;
border-radius: 50%;
background: #22c55e;
animation: azRdrPulse 1s ease infinite;
}
@keyframes azRdrPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.3); }
}
/* Reader: compact footer nav buttons */
.az-rdr-footer .az-rdr-nav-btn {
width: 40px !important;
height: 40px !important;
padding: 0 !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
}
/* ── Detail Page: Back Button ────────────────────────────── */
.az-detail-back {
position: fixed;
top: max(env(safe-area-inset-top, 12px), 12px);
left: 14px;
z-index: 1000;
width: 40px; height: 40px;
border-radius: 12px;
background: rgba(10,7,18,0.75);
backdrop-filter: blur(14px);
border: 1px solid rgba(234,179,8,0.25);
color: #F0D068;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
padding: 0;
box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}
.az-detail-back:hover {
background: rgba(20,14,28,0.92);
border-color: rgba(234,179,8,0.55);
box-shadow: 0 6px 24px rgba(234,179,8,0.15);
}
.az-detail-back:active { transform: scale(0.92); }
/* Desktop: detail back with sidebar offset */
@media (min-width: 769px) {
.az-detail-back { left: calc(var(--sidebar-w, 250px) + 14px); }
}
/* Hide detail back on non-detail pages */
#page-detail:not(.active) .az-detail-back { display: none; }
/* Detail: cover wrapper polish */
.detail-cover-wrapper {
position: relative;
min-height: 200px;
}
/* ════════════════════════════════════════════════════════════════════════
AZURA VIP STORE — Premium responsive redesign
Desktop + mobile uchun kuchaytirilgan VIP paket dizayni
════════════════════════════════════════════════════════════════════════ */
.az-vip-premium-wrap {
position: relative;
padding: 2px 0 28px;
}
.az-vip-premium-head {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
margin: 4px 0 18px;
padding: 22px 24px;
border: 1px solid rgba(212,175,55,0.18);
border-radius: 24px;
overflow: hidden;
background:
radial-gradient(circle at 8% 0%, rgba(212,175,55,0.16), transparent 34%),
radial-gradient(circle at 92% 18%, rgba(196,30,58,0.18), transparent 38%),
linear-gradient(135deg, rgba(18,10,28,0.96), rgba(6,4,10,0.98));
box-shadow: 0 18px 50px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
}
.az-vip-premium-head::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.04) 45%, transparent 70%);
pointer-events: none;
}
.az-vip-kicker {
margin-bottom: 7px;
font-family: 'Cinzel', serif;
font-size: 10px;
font-weight: 800;
letter-spacing: 2.4px;
color: var(--gold-light, #F5C842);
text-transform: uppercase;
}
.az-vip-head-left h2 {
margin: 0 0 8px;
font-family: 'Cinzel Decorative', 'Cinzel', serif;
font-size: clamp(22px, 3vw, 38px);
line-height: 1.1;
letter-spacing: 1.2px;
color: #fff5cf;
text-shadow: 0 0 28px rgba(212,175,55,0.22);
}
.az-vip-head-left p {
max-width: 680px;
margin: 0;
color: rgba(232,224,208,0.68);
font-size: 13px;
line-height: 1.65;
}
.az-vip-head-card {
min-width: 245px;
display: flex;
align-items: center;
gap: 13px;
padding: 14px 16px;
border-radius: 20px;
border: 1px solid rgba(212,175,55,0.28);
background: rgba(0,0,0,0.25);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.az-vip-head-crown {
width: 48px;
height: 48px;
border-radius: 16px;
display: grid;
place-items: center;
font-size: 24px;
background: linear-gradient(135deg, rgba(245,200,66,0.32), rgba(139,0,0,0.32));
border: 1px solid rgba(212,175,55,0.28);
}
.az-vip-head-card-label {
font-size: 10px;
color: rgba(232,224,208,0.55);
text-transform: uppercase;
letter-spacing: 1.6px;
}
.az-vip-head-card-title {
font-family: 'Cinzel', serif;
font-size: 16px;
font-weight: 900;
color: #F5C842;
margin-top: 2px;
}
.az-vip-head-card-sub {
margin-top: 3px;
font-size: 12px;
color: rgba(232,224,208,0.72);
}
.az-vip-status-pro {
margin: 0 0 16px !important;
padding: 14px 16px !important;
border-radius: 18px !important;
backdrop-filter: blur(10px);
}
.az-vip-benefit-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
margin-bottom: 18px;
}
.az-vip-benefit {
min-height: 78px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 13px 14px;
border-radius: 18px;
border: 1px solid rgba(212,175,55,0.13);
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
}
.az-vip-benefit span { font-size: 20px; line-height: 1; }
.az-vip-benefit b {
font-family: 'Cinzel', serif;
font-size: 12px;
color: #f7e5a7;
letter-spacing: .4px;
}
.az-vip-benefit small {
color: rgba(232,224,208,0.5);
font-size: 11px;
}
.az-vip-plan-grid.vip-grid {
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 18px !important;
align-items: stretch;
}
.az-vip-plan {
min-height: 410px;
display: flex;
flex-direction: column;
padding: 34px 18px 20px !important;
border-radius: 24px !important;
background:
radial-gradient(circle at 50% -8%, color-mix(in srgb, var(--vip-color, #D4AF37) 25%, transparent), transparent 34%),
radial-gradient(circle at 100% 100%, rgba(139,0,0,0.18), transparent 40%),
linear-gradient(180deg, rgba(18,10,28,0.98), rgba(5,3,10,0.99)) !important;
border: 1px solid color-mix(in srgb, var(--vip-color, #D4AF37) 45%, rgba(255,255,255,0.08)) !important;
box-shadow: 0 14px 46px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.045) !important;
isolation: isolate;
}
.az-vip-plan::after {
content: '';
position: absolute;
inset: 1px;
border-radius: 23px;
background: linear-gradient(135deg, rgba(255,255,255,0.07), transparent 35%, rgba(255,255,255,0.025));
pointer-events: none;
z-index: -1;
}
.az-vip-plan.popular { transform: translateY(-6px); }
.az-vip-plan:hover {
transform: translateY(-8px) scale(1.012) !important;
box-shadow: 0 22px 65px rgba(0,0,0,0.58), 0 0 42px color-mix(in srgb, var(--vip-color, #D4AF37) 25%, transparent) !important;
}
.az-vip-plan.popular:hover { transform: translateY(-12px) scale(1.014) !important; }
.az-vip-badge {
top: 12px !important;
padding: 5px 13px !important;
border-radius: 999px !important;
font-size: 9px !important;
letter-spacing: 1.25px !important;
}
.az-vip-card-glow {
position: absolute;
width: 190px;
height: 190px;
left: 50%;
top: -75px;
transform: translateX(-50%);
border-radius: 50%;
background: color-mix(in srgb, var(--vip-color, #D4AF37) 24%, transparent);
filter: blur(28px);
opacity: .45;
pointer-events: none;
}
.az-vip-crown {
width: 66px !important;
height: 66px !important;
margin-top: 2px !important;
margin-bottom: 14px !important;
border-radius: 22px !important;
color: #09060c !important;
box-shadow: 0 13px 28px color-mix(in srgb, var(--vip-color, #D4AF37) 30%, transparent), inset 0 1px 0 rgba(255,255,255,0.28) !important;
}
.az-vip-name {
font-size: 18px !important;
letter-spacing: .9px !important;
line-height: 1.2;
}
.az-vip-days {
margin-bottom: 16px !important;
font-size: 13px !important;
}
.az-vip-perks {
flex: 1;
margin: 0 0 16px !important;
padding: 13px 14px !important;
border-radius: 16px !important;
background: rgba(255,255,255,0.04) !important;
border: 1px solid rgba(255,255,255,0.07) !important;
}
.az-vip-perk {
display: flex;
align-items: flex-start;
gap: 8px;
font-size: 12px !important;
line-height: 1.35;
color: rgba(255,255,255,0.78) !important;
padding: 5px 0 !important;
}
.az-vip-perk span {
color: #22c55e;
font-weight: 900;
}
.az-vip-price-box { margin-top: auto; }
.az-vip-price {
font-size: 20px !important;
color: #fff1c0 !important;
text-shadow: 0 0 18px rgba(212,175,55,0.2);
}
.az-vip-price-box small {
display: block;
margin-top: 2px;
color: rgba(232,224,208,0.45);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
}
.az-vip-btn {
width: 100%;
margin-top: 14px !important;
padding: 13px 14px !important;
border-radius: 14px !important;
border: 1px solid color-mix(in srgb, var(--vip-color, #D4AF37) 55%, transparent) !important;
background: linear-gradient(135deg, color-mix(in srgb, var(--vip-color, #D4AF37) 90%, #111 10%), rgba(139,93,28,0.92)) !important;
color: #09060c !important;
font-size: 12px !important;
font-weight: 900 !important;
letter-spacing: 1.6px !important;
box-shadow: 0 12px 28px color-mix(in srgb, var(--vip-color, #D4AF37) 24%, transparent) !important;
}
.az-vip-btn:hover { filter: brightness(1.08); }
@media (max-width: 900px) {
.az-vip-premium-head { grid-template-columns: 1fr; padding: 20px; }
.az-vip-head-card { min-width: 0; width: 100%; }
.az-vip-benefit-row { grid-template-columns: repeat(2, 1fr); }
.az-vip-plan-grid.vip-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
.az-vip-plan.popular { transform: none; }
.az-vip-plan:hover,
.az-vip-plan.popular:hover { transform: translateY(-4px) !important; }
}
@media (max-width: 480px) {
.az-vip-premium-head { margin-top: 2px; padding: 18px 16px; border-radius: 20px; }
.az-vip-head-left h2 { font-size: 22px; }
.az-vip-head-left p { font-size: 12px; }
.az-vip-head-card { padding: 12px; border-radius: 17px; }
.az-vip-benefit-row { gap: 8px; }
.az-vip-benefit { min-height: 70px; padding: 10px; border-radius: 15px; }
.az-vip-benefit b { font-size: 11px; }
.az-vip-benefit small { font-size: 10px; }
.az-vip-plan { min-height: auto; padding: 32px 14px 16px !important; border-radius: 20px !important; }
.az-vip-crown { width: 58px !important; height: 58px !important; border-radius: 19px !important; }
.az-vip-name { font-size: 16px !important; }
.az-vip-price { font-size: 18px !important; }
}
/* ════════════════════════════════════════════════════════════════════════
AZURA VIP STORE — Mobile carousel fix
Telefon/kichik oynada VIP paketlar 1 ustun bo'lib cho'zilib ketmasin.
Endi paketlar gorizontal premium carousel bo'lib chiqadi.
════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
.az-vip-plan-grid.vip-grid {
display: grid !important;
grid-template-columns: none !important;
grid-auto-flow: column !important;
grid-auto-columns: minmax(230px, 72vw) !important;
gap: 14px !important;
overflow-x: auto !important;
overflow-y: visible !important;
padding: 8px 4px 18px !important;
scroll-snap-type: x mandatory;
scroll-padding-left: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.az-vip-plan-grid.vip-grid::-webkit-scrollbar {
height: 4px;
}
.az-vip-plan-grid.vip-grid::-webkit-scrollbar-track {
background: rgba(255,255,255,0.04);
border-radius: 999px;
}
.az-vip-plan-grid.vip-grid::-webkit-scrollbar-thumb {
background: rgba(212,175,55,0.45);
border-radius: 999px;
}
.az-vip-plan-grid.vip-grid::after {
content: '';
width: 8px;
}
.az-vip-plan {
width: auto !important;
min-width: 0 !important;
max-width: none !important;
scroll-snap-align: start;
}
.az-vip-plan.popular,
.az-vip-plan.best-value {
transform: none !important;
}
}
@media (max-width: 520px) {
.az-vip-premium-wrap {
padding-left: 0 !important;
padding-right: 0 !important;
}
.az-vip-plan-grid.vip-grid {
grid-auto-columns: minmax(210px, 70vw) !important;
gap: 12px !important;
margin-left: -2px;
margin-right: -2px;
}
.az-vip-plan {
min-height: 390px !important;
padding: 28px 14px 16px !important;
}
.az-vip-perks {
padding: 12px 13px !important;
}
}
@media (max-width: 390px) {
.az-vip-plan-grid.vip-grid {
grid-auto-columns: minmax(200px, 76vw) !important;
}
}