.theme-pink{
    --main:#ff4d9d;
    --sub:#ffc2df;
    --sub2:#fff4f9;
}

.theme-blue{
    --main:#55b6ff;
    --sub:#dff6ff;
    --sub2:#eef9ff;
}

.theme-purple{
    --main:#a96cff;
    --sub:#f0e4ff;
    --sub2:#f8f3ff;
}

.theme-yellow{
    --main:#f5b700;
    --sub:#fff3c7;
    --sub2:#fff9e5;
}

.theme-green{
    --main:#4fc56f;
    --sub:#dfffea;
    --sub2:#effff4;
}

.theme-red{
    --main:#ff5b5b;
    --sub:#ffe1e1;
    --sub2:#fff3f3;
}

.theme-orange{
    --main:#ff9f43;
    --sub:#ffe8cc;
    --sub2:#fff5e8;
}

.theme-mint{
    --main:#42c9a8;
    --sub:#dffbf4;
    --sub2:#f2fffb;
}

.theme-lavender{
    --main:#b38cff;
    --sub:#f0e7ff;
    --sub2:#faf7ff;
}

.theme-white{
    --main:#bbbbbb;
    --sub:#f5f5f5;
    --sub2:#ffffff;
}

.theme-black{
    --main:#444444;
    --sub:#dddddd;
    --sub2:#f5f5f5;
}

.theme-gold{
    --main:#d4a017;
    --sub:#fff3c4;
    --sub2:#fff9e6;
}

.theme-rainbow{
    --main:#ff66cc;
    --sub:#f7f3ff;
    --sub2:#ffffff;
}

.theme-rainbow .rainbow-text{
    background:
        linear-gradient(
            90deg,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.theme-rainbow .profile-name,
.theme-rainbow .diary-card h2{
    background:
        linear-gradient(
            90deg,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.theme-rainbow .profile-divider,
.theme-rainbow .diary-card{
    border-top:6px solid transparent;
    border-image:
        linear-gradient(
            90deg,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        ) 1;
}

.theme-rainbow .diary-link{
    background:
        linear-gradient(
            90deg,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        );

    color:white;
}

.theme-rainbow .diary-title{
    background:
        linear-gradient(
            90deg,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.theme-rainbow .album-header h2{
    background:linear-gradient(
        90deg,
        #ff66cc,
        #ff9966,
        #ffd966,
        #66cc66,
        #66ccff,
        #9966ff
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

.theme-rainbow .diary-content{
    border-left:6px solid transparent;

    border-image:
        linear-gradient(
            to bottom,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        ) 1;
}

.theme-rainbow .edit-button{
    background:linear-gradient(
        90deg,
        #ff66cc,
        #ff9966,
        #ffd966,
        #66cc66,
        #66ccff,
        #9966ff
    );

    color:white;
}

.theme-rainbow .nav-button{
    background:linear-gradient(
        90deg,
        #ff66cc,
        #ff9966,
        #ffd966,
        #66cc66,
        #66ccff,
        #9966ff
    );

    color:white;
}

.theme-rainbow .container h1{
    background:linear-gradient(
        90deg,
        #ff66cc,
        #ff9966,
        #ffd966,
        #66cc66,
        #66ccff,
        #9966ff
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    display:inline-block;
}

.theme-rainbow .chip{
    border:2px solid transparent;

    background:
        linear-gradient(white,white) padding-box,
        linear-gradient(
            90deg,
            #ff66cc,
            #ff9966,
            #ffd966,
            #66cc66,
            #66ccff,
            #9966ff
        ) border-box;
}

.theme-rainbow .post-body h2{
    background:linear-gradient(
        90deg,
        #ff66cc,
        #ff9966,
        #ffd966,
        #66cc66,
        #66ccff,
        #9966ff
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    display:inline-block;
}

.theme-rainbow .post-body a{
    background:linear-gradient(
        90deg,
        #ff66cc,
        #ff9966,
        #ffd966,
        #66cc66,
        #66ccff,
        #9966ff
    );

    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    font-weight:bold;
}


body{
    font-family:sans-serif;
}

.top-nav{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:center;
    margin-bottom:30px;
}

.top-nav a{
    background:white;
    padding:10px 18px;
    border-radius:999px;
    text-decoration:none;
    color:#444;
    font-weight:bold;
    box-shadow:
        0 4px 12px rgba(
            0,
            0,
            0,
            0.08
        );
}

.edit-button,
.delete-button,
.nav-button{
    display:inline-block;
    padding:12px 20px;
    border-radius:16px;
    text-decoration:none;
    font-weight:bold;
}

.bg-none{}

.bg-dots{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.9) 3px,
            transparent 4px
        ),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );
    background-size:24px 24px;
}

.bg-hearts{
    background:
        radial-gradient(circle at 25% 25%, rgba(255,192,203,0.35) 8%, transparent 8%);
    background-size:40px 40px;
}

.bg-stars{
    background:
        radial-gradient(circle, rgba(255,215,0,0.4) 5%, transparent 5%);
    background-size:34px 34px;
}

.bg-lace{
    background:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255,255,255,0.8) 0,
            rgba(255,255,255,0.8) 6px,
            transparent 6px,
            transparent 18px
        ),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );
}

.bg-glitter{
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.95) 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.9) 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.8) 2px, transparent 3px),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );
}

body.bg-none{
    background:
        linear-gradient(
            135deg,
            var(--sub),
            #ffffff,
            var(--sub2)
        );
}

body.bg-dots{
    background:
        radial-gradient(
            circle,
            rgba(255,255,255,0.9) 3px,
            transparent 4px
        ),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );

    background-size:24px 24px;
}

body.bg-hearts{
    background:
        radial-gradient(
            circle at 25% 25%,
            rgba(255,192,203,0.35) 8%,
            transparent 8%
        ),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );

    background-size:40px 40px;
}

body.bg-stars{
    background:
        radial-gradient(
            circle,
            rgba(255,215,0,0.4) 5%,
            transparent 5%
        ),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );

    background-size:34px 34px;
}

body.bg-lace{
    background:
        repeating-radial-gradient(
            circle at 0 0,
            rgba(255,255,255,0.8) 0,
            rgba(255,255,255,0.8) 6px,
            transparent 6px,
            transparent 18px
        ),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );
}

body.bg-glitter{
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,1) 3px, transparent 4px),
        radial-gradient(circle at 70% 60%, rgba(255,182,193,0.9) 2px, transparent 3px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,1) 3px, transparent 4px),
        radial-gradient(circle at 80% 20%, rgba(255,215,0,0.7) 2px, transparent 3px),
        linear-gradient(
            135deg,
            #f8b8d8,
            #fff5fb,
            #ffd9ea
        );

    background-size:
        140px 140px,
        180px 180px,
        160px 160px,
        200px 200px,
        cover;
}

body.bg-ribbon{
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,0.7) 0 10px, transparent 10px),
        radial-gradient(circle at 80% 30%, rgba(255,255,255,0.6) 0 8px, transparent 8px),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );

    background-size:
        120px 120px,
        160px 160px,
        auto;
}

body.bg-sakura{
    background:
        radial-gradient(circle at 15% 20%, #ffc0cb 0 12px, transparent 13px),
        radial-gradient(circle at 75% 35%, #ffd9e8 0 10px, transparent 11px),
        radial-gradient(circle at 45% 75%, #ffeaf2 0 14px, transparent 15px),
        linear-gradient(135deg,#ffd6e7,#fff,#fff0f7);

    background-size:140px 140px;
}

body.bg-prism{
    background:
        linear-gradient(
            45deg,
            rgba(255,105,180,0.35),
            rgba(135,206,250,0.35),
            rgba(221,160,221,0.35),
            rgba(255,255,255,0.85)
        );

    background-size:300% 300%;
}

body.bg-aurora{
    background:
        linear-gradient(
            135deg,
            #ffd6e7,
            #d9f0ff,
            #efe0ff,
            #fff8ff
        );
}

.post-wrapper{
    background:white;
    border-radius:28px;
    padding:30px;
}

.post-wrapper.card-style-default{}

.post-wrapper.card-style-glass{
    backdrop-filter:blur(14px);
    background:rgba(255,255,255,0.72);
    border:1px solid rgba(255,255,255,0.55);
}

.post-wrapper.card-style-cute{
    border-radius:32px;
    box-shadow:0 12px 30px rgba(255,105,180,0.15);
}

.post-wrapper.card-style-idol{
    box-shadow:
        0 0 20px rgba(255,105,180,0.25),
        0 0 40px rgba(255,105,180,0.12);
}

.post-wrapper.card-style-luxury{
    border:2px solid gold;
    box-shadow:0 14px 36px rgba(0,0,0,0.15);
}

@keyframes idolGlow{
    0%,100%{
        box-shadow:
            0 0 12px rgba(255,105,180,0.20),
            0 0 24px rgba(255,182,193,0.14);
    }
    50%{
        box-shadow:
            0 0 22px rgba(255,105,180,0.35),
            0 0 48px rgba(255,182,193,0.25);
    }
}

.card-style-idol .post,
.card-style-idol .card,
.card-style-idol .container{
    animation:idolGlow 2.5s ease-in-out infinite;
}

@keyframes glassFloat{
    0%,100%{
        backdrop-filter:blur(10px);
    }
    50%{
        backdrop-filter:blur(16px);
    }
}

.card-style-glass .post,
.card-style-glass .card,
.card-style-glass .container{
    animation:glassFloat 3s ease-in-out infinite;
}

@keyframes luxuryGlow{
    0%,100%{
        box-shadow:
            0 0 10px rgba(212,175,55,0.15);
    }
    50%{
        box-shadow:
            0 0 24px rgba(212,175,55,0.35);
    }
}

.card-style-luxury .post,
.card-style-luxury .card,
.card-style-luxury .container{
    animation:luxuryGlow 3s ease-in-out infinite;
}

@keyframes glitterTwinkle{
    0%,100%{
        opacity:1;
    }
    50%{
        opacity:0.85;
    }
}

body.bg-glitter{
    animation:glitterTwinkle 2s infinite ease-in-out;
}

body.bg-glitter{
    background:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.95) 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(255,255,255,0.9) 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 80%, rgba(255,255,255,0.8) 2px, transparent 3px),
        linear-gradient(
            135deg,
            var(--sub),
            #fff,
            var(--sub2)
        );

    background-size:30px 30px;
    animation:glitterTwinkle 2s ease-in-out infinite;
}

@keyframes glitterTwinkle{
    0%,100%{
        filter:brightness(1);
    }
    50%{
        filter:brightness(1.12);
    }
}

@keyframes auroraMove{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

body.bg-aurora{
    background-size:200% 200%;
    animation:auroraMove 8s ease infinite;
}

@keyframes prismMove{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

body.bg-prism{
    background:
        linear-gradient(
            120deg,
            #ffd6f5,
            #d6f0ff,
            #fff8cc,
            #d9ffd9,
            #f0d9ff
        );
    background-size:300% 300%;
    animation:prismMove 10s ease infinite;
}

body.bg-sakura{
    position:relative;
    overflow-x:hidden;
    background:
        linear-gradient(
            135deg,
            #ffd6e7,
            #fff,
            #fff0f7
        );
}

body.bg-sakura::before{
    content:'';
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;

    background-image:
        radial-gradient(circle, rgba(255,192,203,0.9) 0 6px, transparent 7px),
        radial-gradient(circle, rgba(255,182,193,0.75) 0 5px, transparent 6px),
        radial-gradient(circle, rgba(255,228,235,0.9) 0 4px, transparent 5px);

    background-size:
        160px 160px,
        220px 220px,
        280px 280px;

    animation:sakuraFall 18s linear infinite;
    opacity:0.8;
}

@keyframes sakuraFall{
    0%{
        transform:translateY(-5%) translateX(0);
    }
    25%{
        transform:translateY(25vh) translateX(20px);
    }
    50%{
        transform:translateY(50vh) translateX(-20px);
    }
    75%{
        transform:translateY(75vh) translateX(18px);
    }
    100%{
        transform:translateY(110vh) translateX(-12px);
    }
}

.container,
.card,
.post-wrapper{
    position:relative;
    z-index:2;
}

.top-nav,
.navbar{
    position:relative;
    z-index:3;
}
:root,
.theme-pink{
    --text:#44313b;
    --muted:#8f7180;
    --border:#ffd6ea;
    --shadow:rgba(255,77,157,0.22);
}

.theme-blue{
    --text:#263f52;
    --muted:#6f8ba0;
    --border:#bfeaff;
    --shadow:rgba(85,182,255,0.22);
}

.theme-purple{
    --text:#3f3152;
    --muted:#85739c;
    --border:#dcc8ff;
    --shadow:rgba(169,108,255,0.22);
}

.theme-yellow{
    --text:#544322;
    --muted:#9a8350;
    --border:#ffe08a;
    --shadow:rgba(245,183,0,0.22);
}

.theme-green{
    --text:#274836;
    --muted:#6d927b;
    --border:#bff0cf;
    --shadow:rgba(79,197,111,0.22);
}

.theme-red{
    --text:#543030;
    --muted:#9a6d6d;
    --border:#ffc4c4;
    --shadow:rgba(255,91,91,0.22);
}

.theme-orange{
    --text:#543d25;
    --muted:#967958;
    --border:#ffd2a3;
    --shadow:rgba(255,159,67,0.22);
}

.theme-mint{
    --text:#25483f;
    --muted:#6b9589;
    --border:#b9f1e3;
    --shadow:rgba(66,201,168,0.22);
}

.theme-lavender{
    --text:#42354f;
    --muted:#89769e;
    --border:#decfff;
    --shadow:rgba(179,140,255,0.22);
}

.theme-white{
    --text:#333333;
    --muted:#777777;
    --border:#dddddd;
    --shadow:rgba(0,0,0,0.12);
}

.theme-black{
    --text:#222222;
    --muted:#666666;
    --border:#bbbbbb;
    --shadow:rgba(0,0,0,0.20);
}

.theme-gold{
    --text:#4f3f1d;
    --muted:#8f7a45;
    --border:#f1d27a;
    --shadow:rgba(212,160,23,0.24);
}

.theme-rainbow{
    --text:#3f3152;
    --muted:#85739c;
    --border:#ffd6f5;
    --shadow:rgba(255,102,204,0.22);
}

body{
    color:var(--text);
}

h1,
h2,
h3,
.profile-name,
.field-name,
.section-title,
.album-header h2,
.card h1,
.post-body h2,
.preview-title{
    color:var(--main) !important;
}

.meta,
.preview,
.empty,
.username,
.month,
.year,
.album-header p,
.diary-card p,
.sns-account,
.share-url,
.small,
.preview-text{
    color:var(--muted) !important;
}

.field,
.short-bio,
.diary-card,
.simple-profile,
.post,
.date-card,
.diary-content,
.current-bg-box,
.design-section{
    border-color:var(--border) !important;
    box-shadow:0 8px 24px var(--shadow) !important;
}

.diary-content,
.date-card,
.nav-button,
.edit-button,
.delete-button,
.chip{
    background:var(--sub2) !important;
}

.edit-button,
.nav-button,
.diary-link,
.album-button,
button{
    background:var(--main) !important;
    color:white !important;
}

a{
    color:var(--main);
}

.top-nav a,
.navbar a{
    color:var(--main) !important;
    border-color:var(--border) !important;
}

.sns-clean-card,
.profile-share-card,
.bg-template-card{
    border-color:var(--border) !important;
    box-shadow:0 8px 24px var(--shadow) !important;
}

.sns-service-name,
.share-title,
.bg-template-card span{
    color:var(--main) !important;
}

.sns-account,
.share-url,
.bg-template-card small{
    color:var(--muted) !important;
}

input,
textarea,
select{
    border-color:var(--border) !important;
}

input:focus,
textarea:focus,
select:focus{
    outline:none;
    border-color:var(--main) !important;
    box-shadow:0 0 0 3px var(--shadow) !important;
}

/* ========================================
   CureLink theme contrast fix
   テーマ色で文字が背景と同化する問題の修正
======================================== */

body{
    color:var(--text) !important;
}

/* 見出しはテーマ色 */
.profile-name,
.section-title,
.album-title,
.album-header h2,
.container > h1{
    color:var(--main) !important;
}

/* 日記タイトル・本文系は読みやすい通常文字色 */
.card h1,
.diary-title,
.diary-content,
.content,
.preview-text,
.post-body,
.post-body p,
.post-body .preview,
.field,
.short-bio,
.simple-profile,
.current-bg-box{
    color:var(--text) !important;
}

/* 説明・メタ情報は薄め */
.meta,
.preview,
.empty,
.username,
.month,
.year,
.album-header p,
.diary-card p,
.sns-account,
.share-url,
.small{
    color:var(--muted) !important;
}

/* ボタンは背景をテーマ色、文字は必ず白 */
.edit-button,
.nav-button,
.diary-link,
.album-button,
button[type="submit"]{
    background:var(--main) !important;
    color:#ffffff !important;
    border-color:var(--main) !important;
}

/* ボタン内のリンク文字も白固定 */
.edit-button *,
.nav-button *,
.diary-link *,
.album-button *{
    color:#ffffff !important;
}

/* 通常リンクはテーマ色。ただしボタン内は除外 */
a:not(.edit-button):not(.nav-button):not(.diary-link):not(.album-button){
    color:var(--main);
}

/* 本文エリアは淡い背景にして文字は濃く */
.diary-content{
    background:rgba(255,255,255,0.82) !important;
    color:var(--text) !important;
    border-left:6px solid var(--main) !important;
}

/* カード系は白ベースで読みやすく */
.card,
.container,
.post,
.simple-profile,
.diary-card{
    color:var(--text) !important;
}

/* テーマ色背景の上に乗る文字は白 */
.theme-button,
.main-button,
.primary-button{
    background:var(--main) !important;
    color:#ffffff !important;
}

/* ========================================
   背景パターン：さくら
   アップロード画像対応
======================================== */

body.bg-sakura::before{
    content:'';
    position:fixed;
    inset:-10%;
    pointer-events:none;
    z-index:1;

    background-image:
        var(
            --pattern-particle-image,
            radial-gradient(circle, rgba(255,192,203,0.9) 0 6px, transparent 7px),
            radial-gradient(circle, rgba(255,182,193,0.75) 0 5px, transparent 6px),
            radial-gradient(circle, rgba(255,228,235,0.9) 0 4px, transparent 5px)
        );

    background-repeat:repeat;
    background-size:120px 120px;
    opacity:0.72;

    animation:
        particleFloat 18s linear infinite,
        particleTwinkle 2.8s ease-in-out infinite;

    will-change:
        background-position,
        opacity,
        filter;
}

@keyframes particleFloat{
    0%{
        background-position:
            0 -120px;
    }

    100%{
        background-position:
            90px 100vh;
    }
}

@keyframes particleTwinkle{
    0%,100%{
        opacity:0.45;
        filter:brightness(1);
    }

    50%{
        opacity:0.85;
        filter:brightness(1.12);
    }
}

/* ========================================
   Common background particle effects
   bg-sakura / bg-stars / bg-snow
======================================== */

body.bg-sakura,
body.bg-stars,
body.bg-star,
body.bg-snow{
    --particle-main-size: 64px;
    --particle-sub-size: 42px;
    --particle-opacity-main: 0.36;
    --particle-opacity-sub: 0.18;
}

/* 前面の自然落下レイヤー */
body.bg-sakura::before,
body.bg-stars::before,
body.bg-star::before,
body.bg-snow::before{
    content:'';
    position:fixed;
    inset:-12%;
    pointer-events:none;
    z-index:1;

    background-repeat:repeat;
    background-position:
        20px -160px,
        140px -80px,
        260px -220px;

    opacity:var(--particle-opacity-main);
    filter:none;

    animation:particleNaturalFall 26s linear infinite;
    will-change:background-position;
}

/* 奥側のゆっくりレイヤー */
body.bg-sakura::after,
body.bg-stars::after,
body.bg-star::after,
body.bg-snow::after{
    content:'';
    position:fixed;
    inset:-12%;
    pointer-events:none;
    z-index:1;

    background-repeat:repeat;
    background-position:
        100px -220px,
        280px -120px;

    opacity:var(--particle-opacity-sub);
    filter:none;

    animation:particleNaturalFallSlow 38s linear infinite;
    will-change:background-position;
}

/* さくら */
body.bg-sakura::before{
    background-image:
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,172,205,0.9) 0 8px, transparent 9px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,192,215,0.7) 0 6px, transparent 7px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,220,235,0.8) 0 5px, transparent 6px));

    background-size:
        210px 210px,
        300px 300px,
        420px 420px;
}

body.bg-sakura::after{
    background-image:
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,192,215,0.55) 0 5px, transparent 6px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,220,235,0.45) 0 4px, transparent 5px));

    background-size:
        340px 340px,
        520px 520px;
}

/* 星 */
body.bg-stars::before,
body.bg-star::before{
    background-image:
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,230,120,0.9) 0 5px, transparent 6px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,255,255,0.8) 0 3px, transparent 4px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,210,90,0.6) 0 4px, transparent 5px));

    background-size:
        240px 240px,
        360px 360px,
        480px 480px;
}

body.bg-stars::after,
body.bg-star::after{
    background-image:
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,255,255,0.55) 0 3px, transparent 4px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,230,120,0.45) 0 4px, transparent 5px));

    background-size:
        420px 420px,
        620px 620px;
}

/* 雪 */
body.bg-snow::before{
    background-image:
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,255,255,0.95) 0 5px, transparent 6px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(230,248,255,0.8) 0 4px, transparent 5px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,255,255,0.65) 0 3px, transparent 4px));

    background-size:
        220px 220px,
        320px 320px,
        460px 460px;
}

body.bg-snow::after{
    background-image:
        var(--pattern-particle-image, radial-gradient(circle, rgba(255,255,255,0.55) 0 3px, transparent 4px)),
        var(--pattern-particle-image, radial-gradient(circle, rgba(230,248,255,0.45) 0 2px, transparent 3px));

    background-size:
        420px 420px,
        620px 620px;
}

/* 自然な落下 */
@keyframes particleNaturalFall{
    0%{
        background-position:
            20px -160px,
            140px -80px,
            260px -220px;
    }

    25%{
        background-position:
            42px 18vh,
            110px 16vh,
            300px 10vh;
    }

    50%{
        background-position:
            8px 48vh,
            160px 46vh,
            235px 42vh;
    }

    75%{
        background-position:
            50px 78vh,
            120px 74vh,
            290px 70vh;
    }

    100%{
        background-position:
            22px 116vh,
            145px 112vh,
            260px 108vh;
    }
}

@keyframes particleNaturalFallSlow{
    0%{
        background-position:
            100px -220px,
            280px -120px;
    }

    25%{
        background-position:
            80px 14vh,
            310px 22vh;
    }

    50%{
        background-position:
            120px 48vh,
            250px 54vh;
    }

    75%{
        background-position:
            70px 82vh,
            300px 88vh;
    }

    100%{
        background-position:
            105px 122vh,
            275px 128vh;
    }
}

/* ========================================
   Reset old pseudo particle effects
   JS版パーティクルに統一するため旧エフェクトを停止
======================================== */

body.bg-sakura::before,
body.bg-sakura::after,
body.bg-stars::before,
body.bg-stars::after,
body.bg-star::before,
body.bg-star::after,
body.bg-snow::before,
body.bg-snow::after,
body.bg-hearts::before,
body.bg-hearts::after,
body.bg-ribbon::before,
body.bg-ribbon::after,
body.bg-glitter::before,
body.bg-glitter::after,
body.bg-prism::before,
body.bg-prism::after,
body.bg-aurora::before,
body.bg-aurora::after{
    content:none !important;
    display:none !important;
    animation:none !important;
    background:none !important;
}

/* glitter 背景そのものの点滅も停止 */
body.bg-glitter{
    animation:none !important;
    filter:none !important;
}

/* ========================================
   Common floating background particles
   JS controlled particle layer
======================================== */

.bg-particle-layer{
    position:fixed;
    inset:0;
    z-index:1;
    pointer-events:none;
    overflow:hidden;
}

.bg-particle-item{
    position:absolute;
    top:-14vh;
    left:var(--particle-left, 50vw);

    width:var(--particle-size, 40px);
    height:var(--particle-size, 40px);

    object-fit:contain;
    opacity:var(--particle-opacity, 0.35);

    transform:
        translate3d(0, -14vh, 0)
        rotate(var(--particle-rotate-start, 0deg));

    animation:
        bgParticleFall
        var(--particle-duration, 28s)
        linear
        var(--particle-delay, 0s)
        infinite;

    will-change:transform, opacity;
}

@keyframes bgParticleFall{
    0%{
        transform:
            translate3d(0, -14vh, 0)
            rotate(var(--particle-rotate-start, 0deg));
        opacity:0;
    }

    10%{
        opacity:var(--particle-opacity, 0.35);
    }

    45%{
        transform:
            translate3d(
                var(--particle-sway-mid, 30px),
                45vh,
                0
            )
            rotate(var(--particle-rotate-mid, 120deg));
    }

    88%{
        opacity:var(--particle-opacity, 0.35);
    }

    100%{
        transform:
            translate3d(
                var(--particle-sway-end, -30px),
                114vh,
                0
            )
            rotate(var(--particle-rotate-end, 260deg));
        opacity:0;
    }
}

/* 星・キラキラ系は少し発光感 */
body.bg-stars .bg-particle-item,
body.bg-glitter .bg-particle-item,
body.bg-prism .bg-particle-item,
body.bg-aurora .bg-particle-item{
    mix-blend-mode:screen;
}

/* 雪だけ少し柔らかく */
body.bg-snow .bg-particle-item{
    filter:drop-shadow(0 0 4px rgba(255,255,255,0.8));
}

.bg-particle-item{
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    padding:0 !important;
}

/* ========================================
   Mobile background visibility fix
   スマホ時に背景・パーティクルを見せる
======================================== */

@media (max-width: 768px){

    body{
        overflow-x:hidden;
        background-size:cover !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;
    }

    .profile-bg-layer{
        background-size:cover !important;
        background-position:center top !important;
        background-repeat:no-repeat !important;
    }

    .bg-particle-layer{
        z-index:2;
        opacity:1;
    }

    .container,
    .container.profile-card,
    .post-wrapper{
        width:calc(100% - 32px) !important;
        max-width:calc(100% - 32px) !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;

        background:rgba(255,255,255,0.78) !important;
        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);

        position:relative;
        z-index:3;
    }

    .simple-profile,
    .sns-clean-card,
    .profile-share-card,
    .diary-card,
    .date-card,
    .post,
    .diary-content,
    .current-bg-box{
        background:rgba(255,255,255,0.70) !important;
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
    }

    .top-nav,
    .navbar{
        position:relative;
        z-index:5;
    }
}