* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Noto Serif SC', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: linear-gradient(180deg, #000000 0%, #0a0a2a 10%, #1a1030 20%, #2a1540 30%, #4a2060 45%, #6a4090 60%, #9a80c0 75%, #c0b0e0 85%, #ffffff 92%);
    color: #1a1a1a;
    line-height: 1.8;
    min-height: 100vh;
    position: relative;
}

.stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 85%;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.stars::before,
.stars::after,
.stars .stars-top,
.stars .stars-mid,
.stars .stars-bottom {
    content: '';
    position: absolute;
}

.stars::before {
    width: 1px;
    height: 1px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        20px 10px white, 40px 25px white, 60px 15px white, 80px 35px white, 100px 20px white,
        120px 40px white, 140px 30px white, 160px 45px white, 180px 25px white, 200px 35px white,
        220px 50px white, 240px 30px white, 260px 45px white, 280px 20px white, 300px 40px white,
        320px 55px white, 340px 35px white, 360px 50px white, 380px 25px white, 400px 45px white,
        420px 60px white, 440px 40px white, 460px 55px white, 480px 30px white, 500px 50px white,
        520px 65px white, 540px 45px white, 560px 60px white, 580px 35px white, 600px 55px white,
        620px 70px white, 640px 50px white, 660px 65px white, 680px 40px white, 700px 60px white,
        720px 75px white, 740px 55px white, 760px 70px white, 780px 45px white, 800px 65px white,
        820px 80px white, 840px 60px white, 860px 75px white, 880px 50px white, 900px 70px white,
        920px 85px white, 940px 65px white, 960px 80px white, 980px 55px white, 1000px 75px white,
        1020px 90px white, 1040px 70px white, 1060px 85px white, 1080px 60px white, 1100px 80px white,
        1120px 95px white, 1140px 75px white, 1160px 90px white, 1180px 65px white, 1200px 85px white,
        1220px 100px white, 1240px 80px white, 1260px 95px white, 1280px 70px white, 1300px 90px white,
        1320px 105px white, 1340px 85px white, 1360px 100px white, 1380px 75px white, 1400px 95px white,
        1420px 110px white, 1440px 90px white, 1460px 105px white, 1480px 80px white, 1500px 100px white;
    animation: twinkle 2s infinite;
}

.stars::after {
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
        35px 30px white, 70px 50px white, 105px 35px white, 140px 60px white, 175px 45px white,
        210px 70px white, 245px 55px white, 280px 75px white, 315px 50px white, 350px 70px white,
        385px 80px white, 420px 60px white, 455px 80px white, 490px 55px white, 525px 75px white,
        560px 85px white, 595px 65px white, 630px 85px white, 665px 60px white, 700px 80px white,
        735px 90px white, 770px 70px white, 805px 90px white, 840px 65px white, 875px 85px white,
        910px 95px white, 945px 75px white, 980px 95px white, 1015px 70px white, 1050px 90px white,
        1085px 100px white, 1120px 80px white, 1155px 100px white, 1190px 75px white, 1225px 95px white,
        1260px 105px white, 1295px 85px white, 1330px 105px white, 1365px 80px white, 1400px 100px white;
    animation: twinkle 2.5s infinite;
    animation-delay: 0.3s;
}

.stars .stars-top {
    width: 6px;
    height: 6px;
    background: white;
    animation: twinkle 3s infinite;
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    box-shadow: 
        50px 40px white, 150px 60px white, 250px 45px white, 350px 70px white, 450px 50px white,
        550px 80px white, 650px 55px white, 750px 85px white, 850px 60px white, 950px 90px white,
        1050px 65px white, 1150px 95px white, 1250px 70px white, 1350px 100px white;
    animation-delay: 0.5s;
}

.stars .stars-mid {
    width: 1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    box-shadow: 
        25px 120px white, 50px 140px white, 75px 125px white, 100px 150px white, 125px 130px white,
        150px 155px white, 175px 140px white, 200px 160px white, 225px 135px white, 250px 160px white,
        275px 170px white, 300px 150px white, 325px 175px white, 350px 145px white, 375px 170px white,
        400px 180px white, 425px 155px white, 450px 180px white, 475px 150px white, 500px 175px white,
        525px 185px white, 550px 160px white, 575px 185px white, 600px 155px white, 625px 180px white,
        650px 190px white, 675px 165px white, 700px 190px white, 725px 160px white, 750px 185px white,
        775px 195px white, 800px 170px white, 825px 195px white, 850px 165px white, 875px 190px white,
        900px 200px white, 925px 175px white, 950px 200px white, 975px 170px white, 1000px 195px white,
        1025px 205px white, 1050px 180px white, 1075px 205px white, 1100px 175px white, 1125px 200px white,
        1150px 210px white, 1175px 185px white, 1200px 210px white, 1225px 180px white, 1250px 205px white,
        1275px 215px white, 1300px 190px white, 1325px 215px white, 1350px 185px white, 1375px 210px white,
        1400px 220px white, 1425px 195px white, 1450px 220px white, 1475px 190px white, 1500px 215px white;
    animation: twinkle 2.8s infinite;
    animation-delay: 0.8s;
}

.stars .stars-bottom {
    width: 1px;
    height: 1px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 
        40px 230px white, 80px 260px white, 120px 240px white, 160px 270px white, 200px 250px white,
        240px 280px white, 280px 260px white, 320px 290px white, 360px 265px white, 400px 290px white,
        440px 300px white, 480px 275px white, 520px 300px white, 560px 270px white, 600px 295px white,
        640px 310px white, 680px 285px white, 720px 310px white, 760px 280px white, 800px 305px white,
        840px 320px white, 880px 295px white, 920px 320px white, 960px 290px white, 1000px 315px white,
        1040px 330px white, 1080px 305px white, 1120px 330px white, 1160px 300px white, 1200px 325px white,
        1240px 340px white, 1280px 315px white, 1320px 340px white, 1360px 310px white, 1400px 335px white;
    animation: twinkle 3.2s infinite;
    animation-delay: 1.2s;
}

@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.container {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
    padding: 140px 40px 80px;
}

.header {
    position: relative;
    display: block;
    margin-bottom: 60px;
}

.profile {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.profile-text {
    display: flex;
    flex-direction: column;
}

.name {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 400;
}

.nav {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 10;
    display: flex;
    gap: 28px;
}

.nav-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
    position: relative;
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
}

.nav-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s ease;
}

.nav-btn:hover {
    color: #fff;
}

.nav-btn.active {
    color: #fff;
}

.nav-btn.active::after {
    width: 100%;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.post-card {
    cursor: pointer;
    padding: 32px;
    background: linear-gradient(135deg, rgba(200, 210, 255, 0.85) 0%, rgba(180, 160, 220, 0.85) 50%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.post-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.post-title {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 16px;
    line-height: 1.4;
}

.post-excerpt {
    color: #555;
    font-size: 1.02rem;
    line-height: 1.9;
}

.section-title {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.8rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 32px;
}

.write-form {
    background: linear-gradient(135deg, rgba(200, 210, 255, 0.85) 0%, rgba(180, 160, 220, 0.85) 50%, rgba(255, 255, 255, 0.9) 100%);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.form-group {
    margin-bottom: 28px;
}

.form-group label {
    display: block;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    font-family: 'Noto Serif SC', 'Inter', sans-serif;
    font-size: 1.02rem;
    color: #1a1a1a;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #888;
    background: rgba(255, 255, 255, 0.8);
}

.form-group textarea {
    resize: vertical;
    line-height: 1.8;
}

.submit-btn {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    background: #1a1a1a;
    border: none;
    padding: 14px 40px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    background: #333;
    transform: translateY(-2px);
}

.back-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px 0;
    margin-bottom: 24px;
    transition: color 0.3s ease;
}

.back-btn:hover {
    color: #1a1a1a;
}

.post-detail {
    background: linear-gradient(135deg, rgba(200, 210, 255, 0.85) 0%, rgba(180, 160, 220, 0.85) 50%, rgba(255, 255, 255, 0.9) 100%);
    padding: 48px;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    margin-bottom: 48px;
    backdrop-filter: blur(10px);
}

.post-detail .post-date {
    margin-bottom: 16px;
}

.post-detail .post-title {
    font-size: 2.2rem;
    margin-bottom: 32px;
}

.post-content {
    font-size: 1.1rem;
    line-height: 2;
    color: #2a2a2a;
}

.post-content p {
    margin-bottom: 20px;
}

.post-content h2 {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin: 40px 0 16px;
    color: #1a1a1a;
}

.post-content h3 {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 32px 0 12px;
    color: #1a1a1a;
}

.post-content blockquote {
    border-left: 3px solid #1a1a1a;
    padding-left: 20px;
    margin: 28px 0;
    color: #555;
    font-style: italic;
}

.post-content code {
    background: rgba(255, 255, 255, 0.6);
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.95em;
}

.post-content pre {
    background: rgba(255, 255, 255, 0.6);
    padding: 20px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 28px 0;
}

.post-content pre code {
    background: none;
    padding: 0;
}

.post-content ul,
.post-content ol {
    margin: 16px 0;
    padding-left: 28px;
}

.post-content li {
    margin: 10px 0;
}

.comments-section {
    background: linear-gradient(135deg, rgba(200, 210, 255, 0.85) 0%, rgba(180, 160, 220, 0.85) 50%, rgba(255, 255, 255, 0.9) 100%);
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.comments-title {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 28px;
}

.comment-form {
    margin-bottom: 36px;
}

.comment-input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.comment-input-group input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

.comment-input-group input:focus {
    outline: none;
    border-color: #888;
    background: rgba(255, 255, 255, 0.8);
}

.comment-form textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-family: 'Noto Serif SC', 'Inter', sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    background: rgba(255, 255, 255, 0.6);
    margin-bottom: 12px;
    resize: vertical;
    transition: all 0.3s ease;
}

.comment-form textarea:focus {
    outline: none;
    border-color: #888;
    background: rgba(255, 255, 255, 0.8);
}

.comment-submit {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: #fff;
    background: #1a1a1a;
    border: none;
    padding: 10px 28px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.comment-submit:hover {
    background: #333;
}

.comments-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.comment {
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
}

.comment-author {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
}

.comment-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 10px;
}

.comment-text {
    color: #444;
    line-height: 1.7;
}

.admin-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.admin-item {
    padding: 24px;
    background: linear-gradient(135deg, rgba(200, 210, 255, 0.85) 0%, rgba(180, 160, 220, 0.85) 50%, rgba(255, 255, 255, 0.9) 100%);
    border-radius: 12px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(10px);
}

.admin-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.admin-item-title {
    font-family: 'Playfair Display', 'Noto Serif SC', serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a1a1a;
}

.admin-item-status {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 500;
}

.status-public {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-hidden {
    background: #fff3e0;
    color: #e65100;
}

.admin-item-date {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 14px;
}

.admin-item-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.admin-btn {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
}

.admin-btn-hide {
    background: #fff3e0;
    color: #e65100;
}

.admin-btn-hide:hover {
    background: #ffe0b2;
}

.admin-btn-show {
    background: #e8f5e9;
    color: #2e7d32;
}

.admin-btn-show:hover {
    background: #c8e6c9;
}

.admin-btn-delete {
    background: #ffebee;
    color: #c62828;
}

.admin-btn-delete:hover {
    background: #ffcdd2;
}

.admin-btn-edit {
    background: #e3f2fd;
    color: #1565c0;
}

.admin-btn-edit:hover {
    background: #bbdefb;
}

.post-card.hidden-indicator::before {
    content: '仅自己可见';
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    padding: 4px 10px;
    background: #fff3e0;
    color: #e65100;
    border-radius: 4px;
    margin-bottom: 12px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .container {
        padding: 160px 20px 60px;
    }

    .profile {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        top: 20px;
        left: 20px;
    }

    .avatar {
        width: 50px;
        height: 50px;
    }

    .nav {
        flex-direction: row;
        gap: 20px;
        top: 20px;
        right: 20px;
    }

    .name {
        font-size: 1.1rem;
    }

    .tagline {
        font-size: 0.85rem;
    }

    .nav-btn {
        font-size: 0.85rem;
    }

    .post-title {
        font-size: 1.4rem;
    }

    .post-detail .post-title {
        font-size: 1.8rem;
    }

    .post-detail,
    .comments-section,
    .write-form {
        padding: 28px;
    }

    .comment-input-group {
        flex-direction: column;
    }
}

.category-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-radius: 25px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

.filter-btn.active {
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a2e;
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.post-category {
    display: inline-block;
    font-size: 0.8rem;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(100, 150, 255, 0.3), rgba(150, 100, 255, 0.3));
    color: #e0e0ff;
    border-radius: 15px;
    margin-bottom: 15px;
    font-weight: 500;
    border: 1px solid rgba(150, 150, 255, 0.3);
}

.category-select {
    width: 100%;
    padding: 15px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transition: all 0.3s ease;
}

.category-select:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.category-select option {
    background: #2a2a4a;
    color: #fff;
}

.subsection-title {
    font-size: 1.2rem;
    color: #fff;
    margin: 25px 0 15px;
    font-weight: 600;
}

.category-management {
    margin-bottom: 30px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.category-input-group {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.category-input-group input {
    flex: 1;
    padding: 12px 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transition: all 0.3s ease;
}

.category-input-group input:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.category-input-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.category-name {
    font-size: 0.95rem;
    color: #fff;
    font-weight: 500;
}

.category-buttons {
    display: flex;
    gap: 8px;
}

.category-edit-btn {
    padding: 4px 12px;
    background: rgba(100, 150, 255, 0.2);
    color: #80a0ff;
    border: 1px solid rgba(100, 150, 255, 0.3);
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-edit-btn:hover {
    background: rgba(100, 150, 255, 0.4);
    border-color: rgba(100, 150, 255, 0.5);
}

.category-delete-btn {
    padding: 4px 12px;
    background: rgba(255, 100, 100, 0.2);
    color: #ff8080;
    border: 1px solid rgba(255, 100, 100, 0.3);
    border-radius: 15px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-delete-btn:hover {
    background: rgba(255, 100, 100, 0.4);
    border-color: rgba(255, 100, 100, 0.5);
}

.admin-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.admin-item-meta .post-category {
    margin-bottom: 0;
    font-size: 0.75rem;
    padding: 3px 10px;
}

.admin-item-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 15px;
}

.admin-category-select-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-category-select {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.admin-category-select:hover {
    border-color: rgba(100, 150, 255, 0.6);
    background: rgba(255, 255, 255, 0.12);
}

.admin-category-select:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.8);
    background: rgba(255, 255, 255, 0.15);
}

.admin-category-select option {
    background: #2a2a4a;
    color: #fff;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    backdrop-filter: blur(5px);
}

.modal-content {
    background: linear-gradient(135deg, rgba(40, 40, 80, 0.95), rgba(30, 30, 60, 0.95));
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    min-width: 350px;
    backdrop-filter: blur(20px);
}

.modal-title {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 25px;
    font-weight: 600;
}

.password-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.password-input:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.password-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.modal-buttons {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    justify-content: center;
}

.modal-buttons .submit-btn {
    flex: 1;
}

.password-management {
    margin-top: 30px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.password-change-group {
    margin-bottom: 15px;
}

.password-change-group input {
    width: 100%;
    padding: 12px 18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    font-size: 0.95rem;
    font-family: 'Inter', sans-serif;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.password-change-group input:focus {
    outline: none;
    border-color: rgba(100, 150, 255, 0.8);
    background: rgba(255, 255, 255, 0.1);
}

.password-change-group input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}