/* ==================================================
   Moon Comic Theme
   Light: Lavender / Indigo
   Dark : MangaDex Style
================================================== */

:root{
    /*--mc-bg:#f7f8ff;*/
    --mc-bg:#958eb3;
    --mc-card:#ffffff;
    --mc-soft:#eef2ff;

    --mc-primary:#6366f1;
    --mc-secondary:#8b5cf6;

    --mc-text:#374151;
    --mc-border:#e5e7eb;

    --mc-dark-bg:#121212;
    --mc-dark-card:#1e1e1e;
    --mc-dark-soft:#2a2a2a;
}

/* Base */

/*body{
    background:var(--mc-bg);
    color:var(--mc-text);
}*/

body{
    background:#f7f8ff;
    position:relative;
}

body::before{
    content:'';

    position:fixed;
    inset:0;

    pointer-events:none;
    z-index:-1;

    background:

        radial-gradient(
            circle at 15% 15%,
            rgba(168,85,247,.30),
            transparent 25%
        ),

        radial-gradient(
            circle at 85% 10%,
            rgba(99,102,241,.25),
            transparent 25%
        ),

        radial-gradient(
            circle at 50% 90%,
            rgba(236,72,153,.15),
            transparent 35%
        );

    filter:blur(60px);
}

/* Logo */

.moon-icon{
    font-size:32px;
    color:var(--mc-secondary);
    filter:drop-shadow(0 0 8px rgba(139,92,246,.35));
}

.moon-text{
    font-size:28px;
    font-weight:800;
    letter-spacing:.5px;
    background:linear-gradient(135deg,#6366f1,#a78bfa);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

@media(max-width:768px){
    .moon-icon{font-size:26px;}
    .moon-text{font-size:22px;}
}

/* Buttons */

.btn-primary{
    background:linear-gradient(135deg,#6366f1,#8b5cf6);
    border:none;
}

.btn-success{
    background:linear-gradient(135deg,#8b5cf6,#a78bfa);
    border:none;
}

.btn-danger{
    background:linear-gradient(135deg,#ec4899,#f472b6);
    border:none;
}

.btn-warning{
    background:linear-gradient(135deg,#fbbf24,#fde68a);
    border:none;
}

/* Cards */

.card,
.manga-info{
    background:#fff;
    border:none;
    border-radius:16px;
    padding:20px;
    box-shadow:0 8px 25px rgba(99,102,241,.08);
}

.card-header{
    background:#fff;
    border-bottom:1px solid var(--mc-border);
}

/* Slider */

/*.slider-rounded{
    border-radius:16px;
    overflow:hidden;
}

.slider-rounded{
    position:relative;

    border-radius:20px;
    overflow:hidden;

    background:#fff;

    padding:6px;

    box-shadow:
        0 15px 40px rgba(99,102,241,.18);
}*/


.slider-img{
    width:100%;
    aspect-ratio:16/6;
    object-fit:cover;
    border-radius:14px;
}

.slider-rounded{
    background:
        linear-gradient(#d4af37,#d4af37) top/100% 2px no-repeat,
        linear-gradient(#d4af37,#d4af37) bottom/100% 2px no-repeat,
        linear-gradient(#d4af37,#d4af37) left/2px 100% no-repeat,
        linear-gradient(#d4af37,#d4af37) right/2px 100% no-repeat;
}

.slider-rounded{
    position:relative;

    overflow:hidden;
    border-radius:20px;

    border:2px solid #d4af37;

    box-shadow:
        0 0 0 4px #f8f0c8,
        0 12px 30px rgba(0,0,0,.15);
}

.slider-rounded::before{
    content:'';

    position:absolute;

    top:8px;
    left:8px;

    width:64px;
    height:64px;

    z-index:20;

    background-repeat:no-repeat;
    background-size:contain;

    /*background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23d4af37'%3E%3Cpath d='M10 50 C10 20 20 10 50 10 L50 18 C25 18 18 25 18 50Z'/%3E%3Cpath d='M22 22 L40 30 L30 40Z'/%3E%3Cpath d='M28 12 C40 18 50 28 56 40 C46 34 34 24 28 12Z'/%3E%3C/g%3E%3C/svg%3E");*/
}

.slider-rounded::after{
    content:'';

    position:absolute;

    bottom:8px;
    right:8px;

    width:64px;
    height:64px;

    z-index:20;

    transform:rotate(180deg);

    background-repeat:no-repeat;
    background-size:contain;

    /*background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23d4af37'%3E%3Cpath d='M10 50 C10 20 20 10 50 10 L50 18 C25 18 18 25 18 50Z'/%3E%3Cpath d='M22 22 L40 30 L30 40Z'/%3E%3Cpath d='M28 12 C40 18 50 28 56 40 C46 34 34 24 28 12Z'/%3E%3C/g%3E%3C/svg%3E");*/
}

.dark-mode .slider-rounded{
    border-color:#bfa15a;

    box-shadow:
        0 0 0 4px #2b2414,
        0 12px 30px rgba(0,0,0,.35);
}

/* ==========================================
   Moon Comic Gothic Carousel Navigation
========================================== */

.carousel-control-prev-icon,
.carousel-control-next-icon{
    display:none;
}

.carousel-control-prev,
.carousel-control-next{
    width:90px;
    opacity:1;
}

/* Nút trái */

.carousel-control-prev::before{
    content:'❮';

    position:absolute;

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    font-weight:700;

    color:#7c5cff;

    border-radius:50%;

    background: transparent;

    border:2px solid #d4af37;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.15),
        0 0 25px rgba(212,175,55,.35);

    transition:.3s ease;
}

/* Nút phải */

.carousel-control-next::before{
    content:'❯';

    position:absolute;

    width:54px;
    height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    font-weight:700;

    color:#7c5cff;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #fffef9 0%,
            #f8f0c8 100%
        );

    border:2px solid #d4af37;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.15),
        0 0 25px rgba(212,175,55,.35);

    transition:.3s ease;
}

/* Hoa văn góc */

.carousel-control-prev::after,
.carousel-control-next::after{
    content:'❦';

    position:absolute;

    font-size:18px;

    color:#d4af37;

    text-shadow:
        0 0 8px rgba(212,175,55,.45);

    pointer-events:none;
}

.carousel-control-prev::after{
    top:8px;
    left:18px;
}

.carousel-control-next::after{
    top:8px;
    right:18px;
}

/* Hover */

.carousel-control-prev:hover::before,
.carousel-control-next:hover::before{
    transform:scale(1.1);

    color:#5b21b6;

    box-shadow:
        0 0 0 4px rgba(212,175,55,.2),
        0 0 35px rgba(212,175,55,.55);
}

/* Active */

.carousel-control-prev:active::before,
.carousel-control-next:active::before{
    transform:scale(.95);
}

/* Dark Mode */

.dark-mode .carousel-control-prev::before,
.dark-mode .carousel-control-next::before{
    background:
        radial-gradient(
            circle,
            #2c2c2c 0%,
            #1a1a1a 100%
        );

    border-color:#c8a85d;

    color:#d8cfff;

    box-shadow:
        0 0 0 4px rgba(200,168,93,.12),
        0 0 25px rgba(200,168,93,.25);
}

.dark-mode .carousel-control-prev::after,
.dark-mode .carousel-control-next::after{
    color:#c8a85d;
}

/* ==========================================
   MOON COMIC GOTHIC COVER FRAME
========================================== */

.manga-cover-card{
    position:relative;

    overflow:hidden;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #faf3d1,
            #fffef8
        );

    padding:5px;

    border:2px solid #d4af37;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.15),
        0 10px 25px rgba(0,0,0,.12);

    transition:.3s ease;
}

/* Hoa văn góc */

.manga-cover-card::before,
.manga-cover-card::after{
    content:'';

    position:absolute;

    z-index:20;

    font-size:18px;

    color:#d4af37;

    text-shadow:
        0 0 8px rgba(212,175,55,.4);

    pointer-events:none;
}

.manga-cover-card::before{
    top:6px;
    left:8px;
}

.manga-cover-card::after{
    bottom:6px;
    right:8px;
}

/* Ảnh */

.manga-cover-img{
    width:100%;
    aspect-ratio:2/3;

    object-fit:cover;

    display:block;

    border-radius:12px;

    transition:.35s ease;
}

/* Hover */

.manga-cover-card:hover{
    transform:translateY(-6px);

    box-shadow:
        0 0 0 3px rgba(212,175,55,.25),
        0 18px 35px rgba(0,0,0,.18);
}

.manga-cover-card:hover .manga-cover-img{
    transform:scale(1.04);
}

/* Dark Mode */

.dark-mode .manga-cover-card{
    background:
        linear-gradient(
            135deg,
            #252525,
            #1a1a1a
        );

    border-color:#c8a85d;

    box-shadow:
        0 0 0 3px rgba(200,168,93,.10),
        0 10px 25px rgba(0,0,0,.35);
}

.dark-mode .manga-cover-card::before,
.dark-mode .manga-cover-card::after{
    color:#c8a85d;
}

/* ==========================================
   MOON COMIC DETAIL COVER FRAME
========================================== */

.manga-detail-cover-wrap{
    position:relative;

    padding:6px;

    border-radius:20px;

    background:
        linear-gradient(
            135deg,
            #faf3d1,
            #fffef8
        );

    border:2px solid #d4af37;

    box-shadow:
        0 0 0 3px rgba(212,175,55,.15),
        0 12px 30px rgba(0,0,0,.12);
}

/* Viền trong */

.manga-detail-cover-wrap::before{
    content:'';

    position:absolute;

    top:8px;
    left:8px;
    right:8px;
    bottom:8px;

    border:1px solid rgba(212,175,55,.45);

    border-radius:14px;

    pointer-events:none;
}

/* Cover */

.manga-detail-cover{
    width:100%;

    display:block;

    border-radius:14px;
}

/* Hover nhẹ */

.manga-detail-cover-wrap:hover{
    box-shadow:
        0 0 0 3px rgba(212,175,55,.25),
        0 18px 35px rgba(0,0,0,.18);
}

/* Dark Mode */

.dark-mode .manga-detail-cover-wrap{
    background:
        linear-gradient(
            135deg,
            #252525,
            #1a1a1a
        );

    border-color:#c8a85d;

    box-shadow:
        0 0 0 3px rgba(200,168,93,.10),
        0 12px 30px rgba(0,0,0,.35);
}

.dark-mode .manga-detail-cover-wrap::before{
    border-color:rgba(200,168,93,.35);
}

/* Manga Grid */

.manga-cover-link{
    text-decoration:none;
}

.manga-cover-card{
    position:relative;
    overflow:hidden;
    border-radius:14px;
    transition:.3s;
}

.manga-cover-card:hover{
    transform:translateY(-4px);
}

.manga-cover-img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    transition:.4s;
}

.manga-cover-card:hover .manga-cover-img{
    transform:scale(1.05);
}

.cover-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    display:flex;
    align-items:flex-end;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.92),
        rgba(0,0,0,.65),
        transparent
    );
}

/*.cover-title{
    width:100%;
    padding:12px;
    color:#fff;
    font-size:14px;
    font-weight:700;
    line-height:1.4;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}*/
.cover-title{
    width:100%;
    padding:12px;

    color:#fff;
    font-size:15px;
    font-weight:700;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.chapter-stamp{
    position:absolute;
    top:10px;
    right:10px;

    width:50px;
    height:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:radial-gradient(
        circle at 30% 30%,
        #ff6b6b,
        #dc3545
    );

    color:#fff;
    font-size:18px;
    font-weight:900;

    text-shadow:
        0 2px 3px rgba(0,0,0,.4);

    /*box-shadow:
        0 5px 15px rgba(220,53,69,.5),
        inset 0 3px 8px rgba(255,255,255,.25);*/

    border:2px solid #fff;

    transform:rotate(12deg);
}

/* Manga Detail */

.manga-title{
    font-size:2rem;
    font-weight:800;
}

.manga-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.meta-item{
    background:var(--mc-soft);
    border:1px solid #e0e7ff;
    border-radius:12px;
    padding:12px;
}

.meta-label{
    color:#6b7280;
    font-size:13px;
}

.manga-detail-cover{
    width:100%;
    border-radius:16px;
}

.chapter-list-scroll{
    max-height:600px;
    overflow-y:auto;
}

.chapter-item{
    display:flex;
    justify-content:space-between;
    padding:12px 16px;
    text-decoration:none;
    color:inherit;
    border-bottom:1px solid #eee;
}

.chapter-item:hover{
    background:var(--mc-soft);
}

/* Description */

.description-collapse{
    max-height:120px;
    overflow:hidden;
    position:relative;
}

.description-collapse.has-fade:not(.expanded)::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:40px;
    background:linear-gradient(
        to bottom,
        rgba(247,248,255,0),
        rgba(247,248,255,1)
    );
}

.description-collapse.expanded{
    max-height:2000px;
}

/* Reader */

.reader-image{
    width:100%;
    max-width:800px;
    display:block;
    margin:0 auto;
}

/* Footer */

.site-footer{
    background:#fff;
}

/* Dark Mode */

.dark-mode{
    background:var(--mc-dark-bg);
    color:#e5e5e5;
}

.dark-mode .navbar,
.dark-mode .site-footer{
    background:#1a1a1a !important;
}

.dark-mode .card,
.dark-mode .manga-info{
    background:var(--mc-dark-card);
    color:#e5e5e5;
    box-shadow:none;
}

.dark-mode .card-header{
    background:var(--mc-dark-soft);
    color:#fff;
}

.dark-mode .meta-item{
    background:var(--mc-dark-soft);
    border-color:#3a3a3a;
}

.dark-mode .meta-label{
    color:#c4b5fd;
}

.dark-mode .chapter-item{
    border-color:#333;
}

.dark-mode .chapter-item:hover{
    background:#2a2a2a;
}

.dark-mode .form-control{
    background:#222;
    border-color:#444;
    color:#fff;
}

.dark-mode .page-link{
    background:#1e1e1e;
    border-color:#333;
    color:#fff;
}

.dark-mode .moon-icon{
    color:#ddd6fe;
}

.dark-mode .moon-text{
    background:linear-gradient(135deg,#fff,#c4b5fd);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.dark-mode .description-collapse.has-fade:not(.expanded)::after{
    background:linear-gradient(
        to bottom,
        rgba(30,30,30,0),
        rgba(30,30,30,1)
    );
}

.user-manga-link{
    color:inherit;
}

.cover-follow-badge{
    position:absolute;
    top:12px;
    left:12px;

    padding:8px 14px;

    background:rgba(255,255,255,.95);
    color:#e63946;

    font-size:13px;
    font-weight:800;
    line-height:1;

    border-radius:999px;

    box-shadow:
        0 4px 15px rgba(0,0,0,.15);

    z-index:20;
}

.dark-mode .cover-follow-badge{
    background:rgba(30,30,30,.95);
    color:#ff7b8a;
}

/* =========================
   Manga Detail
========================= */

.manga-detail-cover-wrap{
    position:relative;
    width:100%;
}

.manga-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:15px;
}

.manga-actions .btn{
    border-radius:12px;
    font-weight:600;
    padding:10px 18px;
}

/* =========================
   Theme Toggle
========================= */

.theme-toggle{
    position:fixed;
    right:20px;
    bottom:20px;

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:9999;

    background:linear-gradient(
        135deg,
        #6366f1,
        #8b5cf6
    );

    color:#fff;

    box-shadow:
        0 8px 25px rgba(99,102,241,.35);

    transition:.25s;
}

.theme-toggle:hover{
    transform:translateY(-2px);
}

.dark-mode .theme-toggle{
    background:linear-gradient(
        135deg,
        #2a2a2a,
        #3a3a3a
    );

    color:#ddd6fe;
}

/* =========================
   Back To Top
========================= */

#backToTop{
    position:fixed;
    right:20px;
    bottom:78px;

    width:48px;
    height:48px;

    border:none;
    border-radius:50%;

    display:none;

    align-items:center;
    justify-content:center;

    z-index:9999;

    box-shadow:
        0 8px 25px rgba(99,102,241,.25);

    transition:.25s;
}

#backToTop:hover{
    transform:translateY(-2px);
}

/* =========================
   Reader Navigation
========================= */

.reader-nav{
    position:fixed;

    left:50%;
    bottom:10px;

    transform:translateX(-50%);

    z-index:9999;

    display:flex;
    gap:8px;

    padding:8px;

    border-radius:14px;

    background:rgba(255,255,255,.92);

    backdrop-filter:blur(12px);

    box-shadow:
        0 4px 20px rgba(0,0,0,.15);
}

.reader-nav .btn{
    border-radius:10px;
}

.dark-mode .reader-nav{
    background:rgba(30,30,30,.95);
}

@media(max-width:768px){

    .reader-nav{
        padding:6px;
        gap:6px;
    }

    .reader-nav .btn{
        min-width:44px;
        height:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0;
    }

    .reader-nav .nav-text{
        display:none;
    }

    .reader-nav i{
        font-size:16px;
    }
}

/* slider */
.fire-indicators button{
                    width:24px !important;
                    height:24px !important;
                
                    background:transparent !important;
                    border:none !important;
                
                    text-indent:0 !important;
                
                    display:flex !important;
                    align-items:center;
                    justify-content:center;
                
                    opacity:.4;
                }
                
                .fire-indicators button::before{
                    content:"💧";
                    font-size:18px;
                    line-height:1;
                    color: blue;
                }
                
                .fire-indicators button.active{
                    opacity:1;
                    transform:scale(1.2);
                }
                
                .fire-indicators{
                    bottom:-50px !important;
                }

/* ajax search */

.search-results{
    position:absolute;
    top:100%;
    left:0;
    right:0;

    background:#fff;

    border-radius:12px;

    box-shadow:
        0 5px 20px rgba(0,0,0,.15);

    max-height:500px;

    overflow-y:auto;

    display:none;

    z-index:9999;
}

.search-item{
    display:flex;

    gap:10px;

    padding:10px;

    text-decoration:none;

    color:#333;

    transition:.2s;
}

.search-item:hover{
    background:#f5f5f5;
}

.search-item img{
    width:55px;

    height:75px;

    object-fit:cover;

    border-radius:6px;
}

.search-title{
    font-weight:600;

    margin-bottom:4px;
}

.search-empty{
    padding:15px;

    text-align:center;
}

@media(max-width:768px){

    .search-box{
        width:100%;
    }

    .search-box input{
        width:100% !important;
    }

}

/* nav */
            .moon-navbar{

    background:
        rgba(255,255,255,.92)
        !important;

    backdrop-filter:blur(20px);

    border-bottom:
        1px solid
        rgba(99,102,241,.08);
}

.navbar-tools{

    display:flex;

    align-items:center;

    gap:12px;
}

.search-box{

    position:relative;

    width:280px;
}

.search-input{

    width:100%;

    height:46px;

    border:none;

    border-radius:23px;

    padding:
        0 18px
        0 44px;

    background:#fff;

    box-shadow:
        0 5px 18px
        rgba(99,102,241,.10);

    transition:.25s;
}

.search-input:focus{

    outline:none;

    box-shadow:
        0 0 0 3px
        rgba(139,92,246,.15),

        0 8px 25px
        rgba(99,102,241,.18);
}

.search-icon{

    position:absolute;

    left:16px;
    top:50%;

    transform:
        translateY(-50%);

    color:#8b5cf6;
}

.moon-btn-account,
.moon-btn-logout{

    width:44px;
    height:44px;

    border-radius:14px;

    display:flex;

    align-items:center;
    justify-content:center;
}

.moon-btn-account{

    border:2px solid #8b5cf6;

    color:#8b5cf6;
}

.moon-btn-logout{

    background:
        linear-gradient(
            135deg,
            #ec4899,
            #ef4444
        );

    color:white;
}
@media(max-width:768px){

    .navbar-tools{

        width:100%;

        margin-top:12px;
    }

    .search-box{

        flex:1;
    }

    .moon-text{

        font-size:24px;
    }

}

.dark-mode .moon-btn-login{

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #a78bfa
        );

    color:#fff !important;
}

.moon-btn-login{

    height:44px;

    padding:0 20px;

    border:none;

    border-radius:14px;

    font-weight:600;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    color:#fff !important;

    display:flex;
    align-items:center;

    transition:.25s;
}

.moon-btn-login:hover{

    color:#fff !important;

    transform:translateY(-2px);

    box-shadow:
        0 8px 20px
        rgba(99,102,241,.35);
}

/* modal login register */
/* ===== ACCOUNT MODAL ===== */

.account-modal .modal-content{

    border:none;

    border-radius:24px;

    overflow:hidden;

    background:#ffffff;

    box-shadow:
        0 25px 50px rgba(0,0,0,.15);
}

.account-modal .modal-header{

    border:none;

    padding:24px 24px 12px;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    color:white;
}

.account-modal .modal-title{

    font-weight:700;
}

.account-modal .modal-body{

    padding:24px;
}

.account-modal .nav-tabs{

    border:none;

    background:#f5f3ff;

    border-radius:14px;

    padding:5px;
}

.account-modal .nav-link{

    border:none !important;

    border-radius:10px;

    color:#6b7280;

    font-weight:600;
}

.account-modal .nav-link.active{

    background:white;

    color:#6366f1;

    box-shadow:
        0 4px 12px rgba(99,102,241,.12);
}

.account-modal .form-control{

    height:48px;

    border:none;

    border-radius:14px;

    background:#f8fafc;

    padding:0 16px;

    box-shadow:
        inset 0 0 0 1px #e5e7eb;

    transition:.25s;
}

.account-modal .form-control:focus{

    background:white;

    box-shadow:
        0 0 0 3px rgba(139,92,246,.15);

    border:none;
}

.account-modal .btn-primary,
.account-modal .btn-success{

    height:48px;

    border:none;

    border-radius:14px;

    font-weight:700;
}

.account-modal .btn-primary{

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );
}

.account-modal .btn-success{

    background:
        linear-gradient(
            135deg,
            #8b5cf6,
            #a78bfa
        );
}

.dark-mode .account-modal .modal-content{

    background:#1e1e1e;

    color:#f3f4f6;

    box-shadow:
        0 25px 50px rgba(0,0,0,.45);
}

.dark-mode .account-modal .modal-header{

    background:
        linear-gradient(
            135deg,
            #4f46e5,
            #7c3aed
        );
}

.dark-mode .account-modal .btn-close{

    filter:invert(1);
}

.dark-mode .account-modal .nav-tabs{

    background:#2a2a2a;
}

.dark-mode .account-modal .nav-link{

    color:#9ca3af;
}

.dark-mode .account-modal .nav-link.active{

    background:#353535;

    color:#c4b5fd;
}

.dark-mode .account-modal .form-control{

    background:#2a2a2a;

    color:white;

    box-shadow:
        inset 0 0 0 1px #444;
}

.dark-mode .account-modal .form-control::placeholder{

    color:#9ca3af;
}

.dark-mode .account-modal .form-control:focus{

    background:#2f2f2f;

    box-shadow:
        0 0 0 3px rgba(124,92,255,.18);
}

.dark-mode .account-modal .alert-danger{

    background:#3b1d1d;

    color:#fca5a5;

    border:none;
}

.dark-mode .account-modal .alert-success{

    background:#1d3b28;

    color:#86efac;

    border:none;
}

/* user profile */
.user-profile-card{

    display:flex;

    gap:20px;

    align-items:center;

    padding:24px;

    border-radius:24px;

    background:#fff;

    box-shadow:
        0 8px 25px
        rgba(99,102,241,.08);

    margin-bottom:25px;
}

.user-avatar{

    width:80px;
    height:80px;

    border-radius:50%;

    display:flex;

    align-items:center;
    justify-content:center;

    font-size:32px;

    font-weight:700;

    color:white;

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );
}

.user-avatar img{
    width:90px;
    height:90px;
    border-radius:50%;
    object-fit:cover;
    border:3px solid #fff;
}

.user-stats{

    display:flex;

    gap:12px;
}

.user-stat{

    padding:8px 16px;

    border-radius:999px;

    background:#f5f3ff;

    font-weight:600;
}

.history-item{

    display:flex;

    gap:15px;

    padding:12px;

    border-radius:16px;

    text-decoration:none;

    color:inherit;

    transition:.2s;
}

.history-item:hover{

    background:#f5f3ff;
}

.history-item img{

    width:70px;

    height:100px;

    object-fit:cover;

    border-radius:12px;
}

.history-info{

    display:flex;

    flex-direction:column;

    justify-content:center;
}

.dark-mode .user-profile-card{

    background:#1e1e1e;
}

.dark-mode .user-stat{

    background:#2a2a2a;
}

.dark-mode .history-item:hover{

    background:#2a2a2a;
}

.user-tabs{

    gap:10px;

    border:none;
}

.user-tabs .nav-link{

    border:none;

    border-radius:999px;

    padding:10px 18px;

    color:#6366f1;

    font-weight:600;

    background:#f5f3ff;

    transition:.25s;
}

.user-tabs .nav-link.active{

    background:
        linear-gradient(
            135deg,
            #6366f1,
            #8b5cf6
        );

    color:white;
}

.user-tabs .badge{

    margin-left:6px;

    background:
        rgba(255,255,255,.25);

    color:inherit;
}

.dark-mode .user-tabs .nav-link{

    background:#2a2a2a;

    color:#c4b5fd;
}

.dark-mode .user-tabs .nav-link.active{

    background:
        linear-gradient(
            135deg,
            #7c5cff,
            #a78bfa
        );

    color:white;
}

.user-avatar{

    width:100px;
    height:100px;

    border-radius:50%;

    overflow:hidden;

    position:relative;

    cursor:pointer;
}

.user-avatar img{

    width:100%;
    height:100%;

    object-fit:cover;
}

.avatar-overlay{

    position:absolute;

    inset:0;

    background:rgba(
        0,0,0,.45
    );

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    opacity:0;

    transition:.2s;
}

.user-avatar:hover
.avatar-overlay{

    opacity:1;
}

.display-name-wrapper{

    display:flex;

    align-items:center;

    gap:10px;
}

.btn-edit-profile{

    border:none;

    background:none;

    opacity:.5;
}

.btn-edit-profile:hover{

    opacity:1;
}

.avatar-choice{

    cursor:pointer;

    transition:.2s;
}

.avatar-choice:hover{

    transform:scale(1.08);
}

.avatar-choice img{

    width:80px;
    height:80px;

    border-radius:50%;
}

.avatar-grid{

    display:grid;

    grid-template-columns:
        repeat(
            auto-fill,
            minmax(72px,1fr)
        );

    gap:16px;

    max-height:350px;

    overflow-y:auto;

    padding:5px;
}
#passwordModal
.modal-content{

    border:none;

    border-radius:24px;
}

#passwordModal
.form-control{

    border-radius:14px;

    height:48px;
}

.history-item{

    display:flex;

    align-items:center;

    gap:15px;
}

.history-info{

    flex:1;
}

.delete-history{

    flex-shrink:0;

    border-radius:50%;

    width:38px;

    height:38px;
}
.delete-history:hover{

    transform:scale(1.05);
}

.history-item{
    display:flex;
    align-items:center;
    gap:12px;
}

.history-link{
    flex:1;

    display:flex;
    gap:12px;

    text-decoration:none;
    color:inherit;
}

.delete-history{
    flex-shrink:0;
}


/* Profile Modal Dark Mode */

.dark-mode #profileModal .modal-content,
.dark-mode #passwordModal .modal-content,
.dark-mode #avatarModal .modal-content{

    background: #23272f;

    color: #f8f9fa;

    border: 1px solid #343a40;
}

.dark-mode #profileModal .modal-header,
.dark-mode #profileModal .modal-footer,
.dark-mode #passwordModal .modal-header,
.dark-mode #passwordModal .modal-footer,
.dark-mode #avatarModal .modal-header{

    border-color: #343a40;
}

.dark-mode #profileModal .form-control,
.dark-mode #passwordModal .form-control{

    background: #2d333b;

    border: 1px solid #495057;

    color: #f8f9fa;
}

.dark-mode #profileModal .form-control:focus,
.dark-mode #passwordModal .form-control:focus{

    background: #2d333b;

    color: #f8f9fa;

    border-color: var(--bs-primary);

    box-shadow: none;
}

.dark-mode #profileModal .form-control::placeholder,
.dark-mode #passwordModal .form-control::placeholder{

    color: #adb5bd;
}

.dark-mode #profileModal .form-label,
.dark-mode #profileModal .form-check-label{

    color: #dee2e6;
}

.dark-mode #profileModal .text-muted{

    color: #adb5bd !important;
}

.dark-mode #profileModal .btn-close,
.dark-mode #passwordModal .btn-close,
.dark-mode #avatarModal .btn-close{

    filter: invert(1) grayscale(100%);
}