/* =============================================
   DIAPER SLAVE — Clean 3-Theme System v4
   Mobile-first, no dual nav, bulletproof hamburger
   ============================================= */

/* ---- THEMES ---- */
[data-theme="pink"]{
    --bg:#FFF0F5;--bg2:#FFF5F8;--card:#FFFFFF;--nav-bg:#FFFFFF;--input-bg:#FFF5F8;
    --text:#333;--text2:#666;--muted:#999;
    --accent:#E91E8B;--accent2:#FF69B4;
    --gf:#FF69B4;--gt:#E91E8B;
    --border:#F0D0DE;--nav-border:#E91E8B;
    --shadow:rgba(233,30,139,.06);
    --link:#E91E8B;--link-h:#C4177A;
    --badge-bg:#FFF0F5;--badge-border:#F0D0DE;--badge-text:#E91E8B;
}
[data-theme="blue"]{
    --bg:#F0F8FF;--bg2:#F5FAFF;--card:#FFFFFF;--nav-bg:#FFFFFF;--input-bg:#F5FAFF;
    --text:#333;--text2:#666;--muted:#999;
    --accent:#4A90D9;--accent2:#87CEEB;
    --gf:#87CEEB;--gt:#4A90D9;
    --border:#C8DDF0;--nav-border:#4A90D9;
    --shadow:rgba(74,144,217,.06);
    --link:#4A90D9;--link-h:#3570A8;
    --badge-bg:#F0F8FF;--badge-border:#C8DDF0;--badge-text:#4A90D9;
}
[data-theme="dark"]{
    --bg:#1a1a2e;--bg2:#16213e;--card:#16213e;--nav-bg:#0f3460;--input-bg:#16213e;
    --text:#E0E0E0;--text2:#BBB;--muted:#888;
    --accent:#FF69B4;--accent2:#87CEEB;
    --gf:#FF69B4;--gt:#9B59B6;
    --border:#2a2a4a;--nav-border:#FF69B4;
    --shadow:rgba(0,0,0,.2);
    --link:#FF69B4;--link-h:#FF85C8;
    --badge-bg:rgba(255,105,180,.1);--badge-border:rgba(255,105,180,.3);--badge-text:#FF69B4;
}

/* ---- BASE ---- */
:root{--r:12px;--rs:8px;--fh:'Bubblegum Sans',cursive;--fb:'Nunito',sans-serif;--mw:1100px}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;overflow-x:hidden}
a{color:var(--link);text-decoration:none;transition:color .15s}
a:hover{color:var(--link-h)}
h1,h2,h3,h4{font-family:var(--fh);color:var(--accent);line-height:1.3}
h1{font-size:1.8rem;margin-bottom:.4rem}
h2{font-size:1.4rem;margin-bottom:.4rem}
h3{font-size:1.1rem}
img{max-width:100%;height:auto}
.container{max-width:var(--mw);margin:0 auto;padding:0 1rem}
.section{padding:1.5rem 0}
.section-desc{color:var(--text2);margin-bottom:1rem;font-size:.92rem}

/* ---- AFFIRMATION BAR ---- */
.affirmation-bar{
    background:var(--card);text-align:center;padding:.2rem .5rem;
    border-bottom:1px solid var(--border);font-family:var(--fh);
    color:var(--accent2);font-size:.72rem;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis;
}

/* ==================================================
   HEADER + NAV — Mobile first, single nav element
   ================================================== */
.site-header{
    background:var(--nav-bg);
    border-bottom:2px solid var(--nav-border);
    position:sticky;top:0;z-index:100;
}
.header-bar{
    max-width:var(--mw);margin:0 auto;
    display:flex;align-items:center;justify-content:space-between;
    height:50px;padding:0 .8rem;
}
.site-logo{
    display:flex;align-items:center;gap:.3rem;
    font-family:var(--fh);font-size:1.15rem;color:var(--accent);
    white-space:nowrap;
}
.header-right{display:flex;align-items:center;gap:.4rem}

/* Theme dots */
.theme-dots{display:flex;gap:.25rem;align-items:center}
.tdot{
    width:18px;height:18px;border-radius:50%;border:2px solid var(--border);
    cursor:pointer;transition:all .2s;padding:0;font-size:0;
}
.tdot-pink{background:linear-gradient(135deg,#FF69B4,#E91E8B)}
.tdot-blue{background:linear-gradient(135deg,#87CEEB,#4A90D9)}
.tdot-dark{background:linear-gradient(135deg,#1a1a2e,#0f3460)}
.tdot.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:scale(1.15)}

/* Header buttons */
.header-btn{
    display:inline-flex;align-items:center;gap:.2rem;
    padding:.25rem .7rem;border-radius:50px;font-size:.78rem;font-weight:600;
    white-space:nowrap;transition:all .2s;
}
.header-btn-ghost{background:transparent;color:var(--text2);border:1.5px solid var(--border)}
.header-btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.header-btn-primary{background:linear-gradient(135deg,var(--gf),var(--gt));color:#fff;border:none}
.header-btn-primary:hover{opacity:.9;color:#fff}

/* Hamburger */
.hamburger{
    background:none;border:1.5px solid var(--border);border-radius:6px;
    width:34px;height:30px;cursor:pointer;padding:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.hamburger span{
    display:block;width:16px;height:2px;background:var(--text);border-radius:2px;
    transition:all .25s;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(4px,4px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px)}

/* NAV — HIDDEN by default (mobile first) */
.main-nav{
    display:none;
    flex-direction:column;
    background:var(--nav-bg);
    border-top:1px solid var(--border);
}
.main-nav.open{
    display:flex;
}
.main-nav a{
    display:block;padding:.65rem 1rem;
    color:var(--text2);font-size:.88rem;
    border-bottom:1px solid var(--border);
    transition:all .15s;
}
.main-nav a:hover{
    background:var(--bg2);color:var(--accent);
    padding-left:1.3rem;
}
.main-nav a:last-child{border-bottom:none}

/* Desktop-only elements hidden on mobile */
.desktop-only{display:none}
/* Mobile-only elements shown by default */
.mobile-only{display:block}

/* ==================================================
   DESKTOP — min-width 769px
   ================================================== */
@media(min-width:769px){
    .hamburger{display:none}
    .desktop-only{display:inline-flex}
    .mobile-only{display:none}

    /* Nav always visible on desktop, horizontal */
    .main-nav{
        display:flex !important;
        flex-direction:row;
        flex-wrap:wrap;
        justify-content:center;
        gap:0;
        border-top:none;
        border-bottom:1px solid var(--border);
        max-width:var(--mw);
        margin:0 auto;
        padding:0 .5rem;
    }
    .main-nav a{
        padding:.4rem .6rem;font-size:.8rem;
        border-bottom:none;border-radius:var(--rs);
        white-space:nowrap;
    }
    .main-nav a:hover{padding-left:.6rem;background:var(--bg2)}

    .header-bar{height:52px;padding:0 1rem}
    .site-logo{font-size:1.25rem}
}

/* ==================================================
   COMPONENTS
   ================================================== */

/* Buttons */
.btn{display:inline-block;padding:.5rem 1.2rem;border:none;border-radius:var(--rs);font-family:var(--fb);font-weight:600;font-size:.88rem;cursor:pointer;transition:all .2s;text-align:center}
.btn-primary{background:linear-gradient(135deg,var(--gf),var(--gt));color:#fff}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);color:#fff}
.btn-secondary{background:var(--card);color:var(--text);border:1px solid var(--border)}
.btn-secondary:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{padding:.6rem 1.5rem;font-size:.95rem}
.btn-block{display:block;width:100%}
.btn-sm{padding:.2rem .6rem;font-size:.78rem}
.btn-danger{background:#e74c3c;color:#fff}
.btn-danger:hover{background:#c0392b;color:#fff}

/* Hero */
.hero{background:var(--card);text-align:center;padding:2rem 1rem;border-bottom:1px solid var(--border)}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#16213e,#0f3460)}
.hero h1{font-size:1.8rem;margin-bottom:.3rem}
.hero-tagline{color:var(--accent2);font-size:.95rem;margin-bottom:1rem}
.hero-buttons{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}

/* Stats */
.stats-bar{background:var(--bg);padding:1rem 0;border-bottom:1px solid var(--border)}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:var(--mw);margin:0 auto;padding:0 .8rem}
.stat-item{
    text-align:center;background:var(--card);border:1px solid var(--border);
    border-radius:var(--r);padding:.6rem .3rem;box-shadow:0 2px 6px var(--shadow);
}
.stat-number{display:block;font-family:var(--fh);font-size:1.4rem;color:var(--accent);line-height:1.2}
.stat-label{color:var(--muted);font-size:.65rem;text-transform:uppercase;letter-spacing:.3px}
.stat-sub{display:block;color:var(--accent2);font-size:.58rem}
@media(min-width:769px){
    .stats-grid{grid-template-columns:repeat(5,1fr);gap:.7rem;padding:0 1rem}
    .stat-item{padding:.7rem .5rem}
    .stat-number{font-size:1.6rem}
    .stat-label{font-size:.72rem}
}

/* Spotlight */
.spotlight-section{padding:1.2rem 0}
.spotlight-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:769px){.spotlight-grid{grid-template-columns:1fr 1fr}}
.spotlight-card{
    background:var(--card);padding:1.1rem;border-radius:var(--r);
    border:2px solid var(--accent2);text-align:center;
    box-shadow:0 2px 8px var(--shadow);
}
.spotlight-avatar img,.spotlight-avatar .avatar-placeholder{
    width:70px;height:70px;border-radius:50%;object-fit:cover;
    border:3px solid var(--accent);margin:0 auto .4rem;display:block;
}
.avatar-lg{width:70px;height:70px;font-size:1.8rem}

/* Photo Grid */
.photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
@media(min-width:600px){.photo-grid{grid-template-columns:repeat(3,1fr);gap:.8rem}}
@media(min-width:900px){.photo-grid{grid-template-columns:repeat(4,1fr);gap:1rem}}
.photo-card{
    background:var(--card);border-radius:var(--r);overflow:hidden;
    border:1px solid var(--border);transition:transform .2s;
    box-shadow:0 2px 6px var(--shadow);
}
.photo-card:hover{transform:translateY(-2px)}
.photo-card img{width:100%;height:160px;object-fit:cover}
@media(min-width:600px){.photo-card img{height:190px}}
.photo-card-info{padding:.4rem .6rem;font-size:.78rem;display:flex;justify-content:space-between}
.photo-card-author{font-weight:600}
.photo-card-time{color:var(--muted);font-size:.7rem}

/* Feature / Shop Cards */
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:600px){.feature-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.feature-grid{grid-template-columns:repeat(4,1fr)}}
.feature-card{
    background:var(--card);padding:1rem;border-radius:var(--r);
    border:1px solid var(--border);text-align:center;
    transition:transform .2s,border-color .2s;box-shadow:0 2px 6px var(--shadow);
}
.feature-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.feature-icon{font-size:2rem;display:block;margin-bottom:.3rem}
.feature-card h3{margin-bottom:.3rem}
.feature-card p{color:var(--text2);font-size:.82rem}

/* User Badges */
.user-badge{
    display:inline-block;padding:.1rem .4rem;border-radius:20px;
    font-size:.65rem;font-weight:600;
    background:var(--badge-bg);color:var(--badge-text);
    border:1px solid var(--badge-border);margin:.1rem;white-space:nowrap;
}
.profile-badges,.member-badges,.spotlight-badges{margin:.2rem 0}

/* Forms */
.form-container{max-width:560px;margin:0 auto}
.form-container-sm{max-width:400px}
.form-group{margin-bottom:.9rem}
.form-group label{display:block;font-weight:600;margin-bottom:.2rem;font-size:.85rem}
.form-group input[type="text"],.form-group input[type="email"],
.form-group input[type="password"],.form-group textarea,.form-group select{
    width:100%;padding:.5rem .7rem;background:var(--input-bg);color:var(--text);
    border:1px solid var(--border);border-radius:var(--rs);
    font-family:var(--fb);font-size:.88rem;transition:border-color .2s;
}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{
    outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(233,30,139,.1);
}
.form-group small{color:var(--muted);font-size:.72rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.form-footer{text-align:center;margin-top:1rem;color:var(--text2)}

.role-selector{display:flex;gap:.6rem}
.role-option{cursor:pointer;flex:1}
.role-option input{display:none}
.role-card{
    display:flex;flex-direction:column;align-items:center;gap:.2rem;
    padding:.6rem;border:2px solid var(--border);border-radius:var(--r);
    transition:all .2s;background:var(--card);text-align:center;
}
.role-option input:checked+.role-card{border-color:var(--accent);background:var(--badge-bg)}
.role-icon{font-size:1.6rem}
.role-name{font-size:.8rem;font-weight:600}

.checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
@media(min-width:600px){.checkbox-grid{grid-template-columns:repeat(3,1fr)}}
.checkbox-option{
    display:flex;align-items:center;gap:.3rem;cursor:pointer;
    padding:.25rem .45rem;border-radius:var(--rs);
    background:var(--card);border:1px solid var(--border);
    font-size:.8rem;transition:all .15s;
}
.checkbox-option:hover{border-color:var(--accent2)}

.mood-selector{display:flex;gap:.3rem;flex-wrap:wrap}
.mood-option{cursor:pointer}
.mood-option input{display:none}
.mood-card{
    display:flex;flex-direction:column;align-items:center;
    padding:.3rem .5rem;border:2px solid var(--border);border-radius:var(--r);
    transition:all .2s;background:var(--card);font-size:1.1rem;min-width:44px;
}
.mood-card small{font-size:.55rem;color:var(--muted)}
.mood-option input:checked+.mood-card{border-color:var(--accent);background:var(--badge-bg)}

/* Alerts */
.alert{padding:.6rem 1rem;border-radius:var(--rs);margin:.7rem auto;max-width:var(--mw);font-size:.88rem}
.alert-success{background:rgba(110,207,110,.12);border:1px solid #6ecf6e;color:#4a9e4a}
.alert-error{background:rgba(255,107,107,.12);border:1px solid #ff6b6b;color:#d44}
[data-theme="dark"] .alert-success{color:#6ecf6e}
[data-theme="dark"] .alert-error{color:#ff6b6b}

/* Badge */
.badge{display:inline-block;padding:.1rem .5rem;border-radius:20px;font-size:.7rem;font-weight:600;background:var(--badge-bg);color:var(--badge-text);border:1px solid var(--badge-border)}
.badge-role{color:var(--accent);border-color:var(--accent)}

/* Profile */
.profile-header{display:flex;gap:1.2rem;align-items:flex-start;margin-bottom:1.2rem;flex-wrap:wrap}
.profile-avatar img,.profile-avatar .avatar-placeholder{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid var(--accent)}
.avatar-placeholder{display:flex;align-items:center;justify-content:center;background:var(--card);color:var(--accent);font-family:var(--fh);font-size:2.2rem}
.profile-meta{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin:.3rem 0}
.profile-joined{color:var(--muted);font-size:.8rem}
.profile-bio{margin-top:.4rem;color:var(--text2);font-size:.9rem}
.profile-tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:1rem;overflow-x:auto;scrollbar-width:none}
.profile-tabs::-webkit-scrollbar{display:none}
.tab{padding:.5rem .7rem;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap;font-size:.75rem;transition:all .15s}
.tab:hover{color:var(--text)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:500px){
    .profile-header{flex-direction:column;align-items:center;text-align:center}
    .profile-avatar img,.profile-avatar .avatar-placeholder{width:80px;height:80px}
}

/* Diary */
.diary-list{display:flex;flex-direction:column;gap:.8rem}
.diary-card{background:var(--card);padding:.9rem;border-radius:var(--r);border:1px solid var(--border);box-shadow:0 2px 6px var(--shadow);transition:border-color .2s}
.diary-card:hover{border-color:var(--accent2)}
.diary-card h3{font-size:1rem;margin-bottom:.1rem}
.diary-meta{color:var(--muted);font-size:.75rem;margin-bottom:.3rem}
.diary-single{max-width:800px;margin:0 auto}
.diary-body{margin:1rem 0;line-height:1.8}

/* Members */
.members-grid{display:grid;grid-template-columns:1fr;gap:.6rem}
@media(min-width:600px){.members-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){.members-grid{grid-template-columns:repeat(3,1fr)}}
.member-card{
    display:flex;align-items:center;gap:.6rem;
    background:var(--card);padding:.7rem;border-radius:var(--r);
    border:1px solid var(--border);transition:all .2s;box-shadow:0 2px 6px var(--shadow);
}
.member-card:hover{border-color:var(--accent);transform:translateY(-1px);color:var(--text)}
.member-avatar img,.member-avatar .avatar-placeholder{width:46px;height:46px;border-radius:50%;object-fit:cover}
.member-avatar .avatar-placeholder{font-size:1.1rem}
.member-info h3{font-size:.9rem;margin-bottom:.1rem}
.search-bar{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.search-bar input,.search-bar select{padding:.45rem .7rem;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:var(--rs);font-size:.85rem}
.search-bar input{flex:1;min-width:150px}

/* Comments */
.comments-section{margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--border)}
.comment-form{margin-bottom:1rem}
.comment-form textarea{width:100%;padding:.5rem .7rem;background:var(--input-bg);color:var(--text);border:1px solid var(--border);border-radius:var(--rs);font-family:var(--fb);margin-bottom:.3rem;resize:vertical;font-size:.85rem}
.comments-list{display:flex;flex-direction:column;gap:.5rem}
.comment-item{background:var(--card);padding:.6rem;border-radius:var(--rs);border:1px solid var(--border)}
.comment-meta{display:flex;gap:.4rem;align-items:center;margin-bottom:.2rem}
.comment-author{font-weight:700;color:var(--accent);font-size:.85rem}
.comment-time{color:var(--muted);font-size:.7rem}
.comment-body{color:var(--text2);font-size:.85rem}
.login-prompt{color:var(--muted);padding:.6rem 0}
.no-comments{color:var(--muted);font-style:italic}

/* Confessions */
.confession-form-wrap{background:var(--card);padding:1.2rem;border-radius:var(--r);border:1px solid var(--border);margin-bottom:1.2rem;box-shadow:0 2px 6px var(--shadow)}
.confession-card{
    background:var(--card);padding:.8rem;border-radius:var(--r);
    border:1px solid var(--border);margin-bottom:.6rem;
    border-left:3px solid var(--accent2);box-shadow:0 2px 6px var(--shadow);
}
.confession-card:hover{border-color:var(--accent)}
.confession-header{display:flex;align-items:center;gap:.4rem;margin-bottom:.3rem}
.confession-mood{font-size:1.1rem}
.confession-label{font-weight:600;color:var(--accent2);font-size:.75rem}
.confession-time{color:var(--muted);font-size:.7rem;margin-left:auto}
.confession-body{color:var(--text2);line-height:1.6;font-size:.85rem}

/* Tribute */
.tribute-grid{display:grid;grid-template-columns:1fr;gap:1rem}
@media(min-width:769px){.tribute-grid{grid-template-columns:1fr 1fr}}
.tribute-card{background:var(--card);padding:1.1rem;border-radius:var(--r);border:1px solid var(--border);box-shadow:0 2px 6px var(--shadow)}
.tribute-card h2{margin-bottom:.3rem;font-size:1.2rem}
.tribute-card-featured,.tribute-card-wide{grid-column:1/-1}
.highlight-email{color:var(--accent);font-size:.9rem}
.giftcard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.6rem}
@media(min-width:600px){.giftcard-grid{grid-template-columns:repeat(4,1fr)}}
.giftcard-item{
    background:var(--input-bg);padding:.4rem;border-radius:var(--rs);
    text-align:center;border:1px solid var(--border);
    color:var(--accent2);font-weight:600;font-size:.72rem;transition:all .2s;
}
.giftcard-item:hover{border-color:var(--accent);transform:translateY(-1px)}
.tribute-note{background:var(--card);padding:1.2rem;border-radius:var(--r);border:1px solid var(--accent);margin-top:1.2rem}
.tribute-note h3{margin-bottom:.4rem}

/* Empty State */
.empty-state{text-align:center;padding:2rem 1rem;background:var(--card);border-radius:var(--r);border:1px dashed var(--border);box-shadow:0 2px 6px var(--shadow)}
.empty-state p{color:var(--muted);margin-bottom:.5rem;font-size:.92rem}

/* Age Gate */
.age-gate-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.age-gate{padding:1rem}
.age-gate-card{background:var(--card);padding:2rem 1.5rem;border-radius:var(--r);border:1px solid var(--border);text-align:center;max-width:420px;box-shadow:0 4px 16px var(--shadow)}
.age-gate-card h1{margin-bottom:.3rem}
.age-gate-sub{color:var(--accent2);margin-bottom:.6rem;font-family:var(--fh)}
.age-gate-buttons{display:flex;gap:.6rem;justify-content:center;margin-top:1rem;flex-wrap:wrap}

/* Admin */
.admin-table-wrap{overflow-x:auto;margin-bottom:1.2rem}
.admin-table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--rs);overflow:hidden;font-size:.8rem}
.admin-table th,.admin-table td{padding:.5rem .6rem;text-align:left;border-bottom:1px solid var(--border)}
.admin-table th{background:var(--input-bg);font-weight:700;color:var(--accent)}
.admin-table tr:hover td{background:var(--badge-bg)}

/* Footer */
.site-footer{background:var(--card);border-top:1px solid var(--border);padding:1.2rem 0 .6rem;margin-top:2rem}
[data-theme="dark"] .site-footer{background:var(--nav-bg)}
.footer-container{max-width:var(--mw);margin:0 auto;padding:0 1rem}
.footer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media(min-width:769px){.footer-grid{grid-template-columns:repeat(4,1fr)}}
.footer-col h4{font-size:.9rem;margin-bottom:.4rem}
.footer-col a{display:block;color:var(--text2);padding:.1rem 0;font-size:.78rem}
.footer-col a:hover{color:var(--accent)}
.footer-col p{font-size:.78rem;color:var(--text2)}
.footer-small{color:var(--muted);font-size:.7rem;line-height:1.4}
.footer-tagline{text-align:center;padding:.6rem 0;font-family:var(--fh);font-size:.95rem;color:var(--accent2)}
.footer-bottom{text-align:center;padding-top:.5rem;border-top:1px solid var(--border);color:var(--muted);font-size:.72rem}

/* Welcome splash */
.welcome-splash{position:fixed;inset:0;background:rgba(26,26,46,.95);z-index:10000;display:flex;align-items:center;justify-content:center;transition:opacity .5s}
.welcome-splash.fade-out{opacity:0}
.welcome-content{text-align:center;animation:wBounce .6s ease-out}
.welcome-content h2{font-size:1.8rem;margin-bottom:.3rem}
.welcome-content p{color:var(--accent2);font-size:1rem}
@keyframes wBounce{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}

/* Floating emojis — desktop only */
.floating-emojis{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;display:none}
@media(min-width:769px){.floating-emojis{display:block}}
.floater{
    position:absolute;bottom:-50px;left:var(--x,50%);font-size:1.2rem;
    opacity:.08;animation:floatUp var(--dur,20s) var(--delay,0s) infinite linear;
}
@keyframes floatUp{
    0%{transform:translateY(0) rotate(0);opacity:0}
    8%{opacity:.08}92%{opacity:.08}
    100%{transform:translateY(-110vh) rotate(360deg);opacity:0}
}

/* ==================================================
   PHOTO DETAIL PAGE
   ================================================== */
.photo-detail{max-width:800px;margin:0 auto}
.photo-breadcrumb{margin-bottom:.8rem}
.photo-breadcrumb a{font-size:.85rem;color:var(--accent2)}
.photo-breadcrumb a:hover{color:var(--accent)}

.photo-main-wrap{
    background:var(--card);border-radius:var(--r);overflow:hidden;
    border:1px solid var(--border);box-shadow:0 4px 16px var(--shadow);
    margin-bottom:1rem;
}
.photo-main-img{width:100%;display:block;max-height:70vh;object-fit:contain;background:#000}

.photo-info-bar{
    background:var(--card);padding:1rem;border-radius:var(--r);
    border:1px solid var(--border);margin-bottom:1rem;box-shadow:0 2px 6px var(--shadow);
}
.photo-info-bar h1{font-size:1.3rem;margin-bottom:.2rem}
.photo-meta{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;font-size:.8rem;color:var(--muted)}
.photo-meta a{color:var(--accent)}
.photo-meta-sep{color:var(--border)}
.photo-description{margin-top:.6rem;color:var(--text2);font-size:.9rem;line-height:1.6}

/* Ratings */
.photo-ratings{
    background:var(--card);padding:1rem;border-radius:var(--r);
    border:1px solid var(--border);margin-bottom:1rem;box-shadow:0 2px 6px var(--shadow);
}
.photo-ratings h3{margin-bottom:.6rem;font-size:1rem}
.rating-form{display:flex;gap:.5rem;flex-wrap:wrap}
.rating-display{display:flex;gap:.5rem;flex-wrap:wrap}
.rating-btn{
    display:flex;flex-direction:column;align-items:center;gap:.15rem;
    padding:.6rem 1rem;border-radius:var(--r);
    background:var(--bg2);border:2px solid var(--border);
    cursor:pointer;transition:all .2s;font-family:var(--fb);
    min-width:85px;
}
.rating-btn:hover{border-color:var(--accent);transform:translateY(-2px)}
.rating-btn.voted{opacity:.7;cursor:default}
.rating-emoji{font-size:1.5rem}
.rating-label{font-size:.65rem;color:var(--muted);font-weight:600;text-transform:uppercase}
.rating-count{font-family:var(--fh);font-size:1.1rem;color:var(--accent)}
.rating-voted-msg{margin-top:.4rem;font-size:.78rem;color:var(--accent2)}
.rating-cute:hover,.rating-cute.voted{border-color:#FF69B4}
.rating-crinkle:hover,.rating-crinkle.voted{border-color:#87CEEB}
.rating-naughty:hover,.rating-naughty.voted{border-color:#9B59B6}

/* Prev/Next nav */
.photo-nav{
    display:flex;justify-content:space-between;gap:.5rem;
    margin-bottom:1rem;
}
.photo-nav-btn{
    display:inline-block;padding:.45rem 1rem;border-radius:var(--rs);
    font-size:.85rem;font-weight:600;transition:all .2s;
    background:var(--card);border:1px solid var(--border);color:var(--text2);
}
.photo-nav-btn:hover{border-color:var(--accent);color:var(--accent)}
.photo-nav-disabled{opacity:.3;cursor:default;pointer-events:none}

/* Poster card */
.photo-poster-card{
    display:flex;gap:.8rem;align-items:center;
    background:var(--card);padding:.8rem;border-radius:var(--r);
    border:1px solid var(--border);margin-bottom:1rem;box-shadow:0 2px 6px var(--shadow);
}
.poster-avatar img,.poster-avatar .avatar-placeholder{
    width:50px;height:50px;border-radius:50%;object-fit:cover;
    border:2px solid var(--accent);flex-shrink:0;
}
.poster-avatar .avatar-placeholder{
    display:flex;align-items:center;justify-content:center;
    background:var(--bg2);font-size:1.5rem;width:50px;height:50px;
}
.poster-info a{color:var(--accent)}
.poster-badges{margin:.2rem 0}
.poster-bio{color:var(--muted);font-size:.8rem;margin-top:.2rem}

/* Sparkle effect */
.sparkle-particle{position:fixed;pointer-events:none;font-size:1rem;z-index:9999;animation:sparkOut .7s ease-out forwards}
@keyframes sparkOut{0%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(var(--tx,30px),var(--ty,-30px)) scale(0);opacity:0}}