/* ===========================================
   SANSAN — Quiet Luxury v3.0
   =========================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
--bg:#f6f3ee;--bg-alt:#f0ece5;--bg-card:#ffffff;
--bg-glass:rgba(246,243,238,.78);--bg-glass-border:rgba(0,0,0,.06);
--text:#1c1a18;--text-light:#7a756d;--text-lighter:#b0aaa0;
--gold:#c49b5e;--gold-light:#dfc9a0;--gold-subtle:rgba(196,155,94,.08);
--gold-glow:rgba(196,155,94,.15);
--border:#e8e2d8;--border-light:#efeae2;
--shadow:rgba(0,0,0,.04);--shadow-float:rgba(0,0,0,.07);
--serif:'Noto Serif SC','Cormorant Garamond','Songti SC',Georgia,serif;
--sans:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;
--ease:cubic-bezier(.25,.1,.25,1);--ease-out:cubic-bezier(.22,1,.36,1);
--mw-content:740px;--mw-page:1440px;--nav-h:56px;--radius:6px;--radius-sm:4px;
}


html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--sans);font-weight:400;background:var(--bg);color:var(--text);line-height:1.75;min-height:100vh;overflow-x:hidden;transition:background .5s var(--ease),color .5s var(--ease)}
::selection{background:var(--gold);color:#fff}
/* subtle noise texture */body::before{content:quote();position:fixed;inset:0;pointer-events:none;z-index:9997;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.9%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27 opacity=%270.02%27/%3E%3C/svg%3E");background-size:256px 256px}
::-webkit-scrollbar{width:3px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--text-lighter);border-radius:2px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ─── Preloader ─── */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s var(--ease-out),visibility .7s var(--ease-out)}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader-s{font-family:var(--serif);font-size:2.75rem;letter-spacing:.08em;font-weight:300;opacity:0;animation:prelIn 1s var(--ease-out) .1s forwards}
.preloader-s .g{color:var(--gold)}
.preloader-s .r{color:var(--text)}
.preloader-bar{width:0;height:1px;margin-top:.85rem;background:linear-gradient(90deg,transparent,var(--gold-light),transparent);animation:prelBar 1.2s var(--ease-out) .3s forwards}
.preloader-sub{font-size:.6875rem;color:var(--text-lighter);letter-spacing:.28em;margin-top:.75rem;opacity:0;animation:prelIn .8s var(--ease-out) .6s forwards}
@keyframes prelIn{to{opacity:1}}
@keyframes prelBar{to{width:120px}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes heroLine{from{width:0;opacity:0}to{width:40px;opacity:1}}

@keyframes heroReveal{0%{opacity:0;transform:translateY(20px);filter:blur(4px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes cardIn{0%{opacity:0;transform:translateY(28px) scale(.97)}60%{transform:translateY(-2px) scale(1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dotB{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}

/* --- Header --- */
.header{position:fixed;top:0;left:0;right:0;z-index:100;height:var(--nav-h);background:rgba(246,243,238,.85);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--border-light);transition:transform .4s var(--ease-out)}
.header.hidden{transform:translateY(-100%)}
.header-inner{max-width:var(--mw-page);margin:0 auto;padding:0 28px;height:100%;display:flex;align-items:center;justify-content:space-between}
.site-title{font-family:var(--serif);font-size:1.125rem;letter-spacing:.16em;color:var(--gold);font-weight:500;transition:all .3s var(--ease);position:relative;display:inline-block}
.site-title::after{content:"";position:absolute;bottom:-2px;left:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-out)}.site-title:hover{opacity:1}.site-title:hover::after{transform:scaleX(1);transform-origin:left}
.header-nav{display:flex;align-items:center;gap:0}
.nav-item{font-size:.8125rem;letter-spacing:.05em;color:var(--text-light);font-weight:400;padding:6px 14px;transition:color .3s var(--ease);position:relative}
.nav-item::after{content:"";position:absolute;bottom:2px;left:10px;right:10px;height:1.5px;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .3s var(--ease-out)}.nav-item:hover{color:var(--text)}.nav-item:hover::after,.nav-item.active::after{transform:scaleX(1)}
.nav-item.active{color:var(--gold)}
.header-actions{display:flex;align-items:center;gap:8px}
.menu-btn{display:none;width:28px;height:28px;flex-direction:column;justify-content:center;gap:5px}
.menu-btn span{display:block;width:100%;height:1.5px;background:var(--text);border-radius:1px;transition:all .3s var(--ease-out)}
.menu-btn.open span:first-child{transform:translateY(3.25px) rotate(45deg)}
.menu-btn.open span:last-child{transform:translateY(-3.25px) rotate(-45deg)}

/* ─── Mobile Nav ─── */
.mobile-nav{position:fixed;inset:0;z-index:99;pointer-events:none;visibility:hidden;transition:visibility .35s}
.mobile-nav.open{pointer-events:auto;visibility:visible}
.mobile-nav-bg{position:absolute;inset:0;background:rgba(28,26,24,.5);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .35s}
.mobile-nav.open .mobile-nav-bg{opacity:1}
.mobile-nav-links{position:absolute;top:0;right:0;bottom:0;width:300px;max-width:90vw;background:var(--bg);padding:5.5rem 1.5rem 2rem;display:flex;flex-direction:column;gap:2px;transform:translateX(100%);transition:transform .35s var(--ease-out);overflow-y:auto}
.mobile-nav.open .mobile-nav-links{transform:translateX(0)}
.mobile-link{font-size:.82rem;letter-spacing:.04em;color:var(--text-light);padding:10px 14px;border-radius:6px;transition:all .25s;display:flex;align-items:center;justify-content:space-between}
.mobile-link:hover{color:var(--text);background:rgba(196,155,94,.06)}

/* ─── Page ─── */
.page{min-height:100vh;padding-top:var(--nav-h);opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.page.active{opacity:1;transform:translateY(0)}
.page.exit{opacity:0;transform:translateY(-10px)}

/* ═══════════════════════════════════════
   HOME
   ═══════════════════════════════════════ */
.hero{position:relative;z-index:1;padding:5rem 28px 3rem;text-align:center;overflow:hidden}
.hero::before{content:'';position:absolute;top:-40%;left:50%;translate:-50% 0;width:600px;height:600px;background:radial-gradient(ellipse,var(--gold-glow) 0%,transparent 65%);pointer-events:none}
.hero-line{width:40px;height:1px;background:var(--gold);margin:0 auto 1.75rem;animation:heroLine 1.2s var(--ease-out) .3s both}
.hero .hero-title{font-family:var(--serif);font-size:3.5rem;font-weight:400;letter-spacing:.22em;color:var(--text);line-height:1.15;display:inline-flex;align-items:baseline;gap:0;animation:heroReveal 1s var(--ease-out) .15s both;transition:letter-spacing .6s var(--ease-out)}
.hero-gold{color:var(--gold);font-weight:500;font-size:1.15em;position:relative;display:inline-block;transition:text-shadow .6s var(--ease-out)}
.hero-gold::after{content:'';position:absolute;right:-3px;top:15%;height:70%;width:1px;background:var(--gold-light);opacity:.25}
.hero-title-rest{font-weight:300;letter-spacing:.18em;padding-left:6px;display:inline-flex;gap:0}
.hero-title-rest span{display:inline-block;opacity:0;transform:translateY(12px);animation:heroLetterIn .6s var(--ease-out) calc(.4s + var(--i,0) * .08s) forwards}
@keyframes heroLetterIn{to{opacity:1;transform:translateY(0)}}
/* --- Panel fade transition --- */
@keyframes fadeSlideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-18px)}}
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
.l-panel-fade{animation:fadeSlideOut .3s ease forwards}
.l-panel-in{animation:fadeSlideIn .3s ease forwards}
.hero:hover .hero-title{letter-spacing:.28em}
.hero:hover .hero-gold{text-shadow:0 0 30px rgba(196,155,94,.2)}
.hero .hero-desc{margin-top:1.25rem;font-size:.875rem;color:var(--text-lighter);letter-spacing:.06em;font-weight:300;max-width:420px;margin-left:auto;margin-right:auto;line-height:1.9;animation:heroReveal 1s var(--ease-out) .7s both}
.hero-divider{display:flex;justify-content:center;align-items:center;gap:8px;margin:.9rem auto .7rem;animation:heroReveal 1s var(--ease-out) .35s both}
.hero-divider span{display:block;width:24px;height:1px;background:var(--gold-light);opacity:.6}
.hero-tagline{font-family:var(--serif);font-size:.9375rem;letter-spacing:.22em;color:var(--text-light);font-weight:300;line-height:1.6;animation:heroReveal 1s var(--ease-out) .5s both}
.hero-ornament{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:.9rem;animation:heroReveal 1s var(--ease-out) .6s both}
.hero-ornament span{display:block;width:32px;height:1px;background:linear-gradient(90deg,transparent,var(--border));opacity:.5}
.hero-ornament .hero-dot{width:auto;height:auto;background:none;font-size:.5rem;color:var(--gold-light);opacity:.7;letter-spacing:0}


.content-wrap{max-width:var(--mw-page);margin:0 auto;padding:0 28px 3rem;display:grid;grid-template-columns:1fr 300px;gap:2.5rem}
.main-content{min-width:0}
.section-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.22em;color:var(--gold);margin-bottom:.5rem;font-weight:500}
.section-title{font-family:var(--serif);font-size:1.5rem;font-weight:400;letter-spacing:.04em;color:var(--text);margin-bottom:1.5rem}
.grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem}

.post-card{background:var(--bg-card);border-radius:6px;overflow:hidden;cursor:pointer;border:1px solid var(--border-light);display:flex;flex-direction:column;opacity:0;transform:translateY(24px);transition:transform .8s cubic-bezier(.22,1,.36,1),opacity .8s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),border-color .4s var(--ease-out);transition-delay:var(--card-delay,.1s);will-change:transform,opacity;box-shadow:0 1px 3px var(--shadow)}
.post-card.card-visible{opacity:1;transform:translateY(0)}

.post-card.card-visible{opacity:1;transform:translateY(0)}
.post-card:hover{transform:translateY(-8px);box-shadow:0 16px 48px var(--shadow-float);border-color:var(--gold);transition-duration:.35s}
.post-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--bg-alt);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-lighter);font-size:.75rem}
.post-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.post-card:hover .post-card-img img{transform:scale(1.05)}
.post-card-body{padding:1rem 1.25rem 1.25rem;flex:1;display:flex;flex-direction:column}
.post-card-cat{font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.35rem;font-weight:500}
.post-card-title{font-family:var(--serif);font-size:1rem;font-weight:400;line-height:1.4;margin-bottom:.5rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-card-excerpt{font-size:.8125rem;color:var(--text-light);line-height:1.65;margin-bottom:.75rem;flex:1}
.post-card-date{font-size:.6875rem;color:var(--text-lighter);font-feature-settings:'tnum';margin-top:auto}
@keyframes cardIn{0%{opacity:0;transform:translateY(24px)}60%{transform:translateY(-3px)}100%{opacity:1;transform:translateY(0)}}

/* ═══════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════ */
.sidebar{min-width:0}
.sidebar-section{margin-bottom:2rem;content-visibility:auto;contain-intrinsic-size:200px}
.sidebar-head{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);font-weight:500;padding-bottom:.6rem;margin-bottom:.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px}
.sidebar-head::after{content:'';flex:1;height:1px;background:var(--border)}
.search-wrap{position:relative}
.search-wrap input{width:100%;padding:9px 36px 9px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-alt);color:var(--text);font-size:.8125rem;font-family:var(--sans);outline:none;transition:all .3s var(--ease)}
.search-wrap input::placeholder{color:var(--text-lighter);font-weight:300}
.search-wrap input:focus{border-color:var(--gold-light);box-shadow:0 0 0 3px var(--gold-subtle);background:var(--bg-card)}
.search-wrap .search-icon{position:absolute;right:10px;top:50%;translate:0 -50%;color:var(--text-lighter);pointer-events:none}
.search-results{margin-top:8px;display:none;flex-direction:column;gap:4px;max-height:280px;overflow-y:auto}
.search-results.show{display:flex}
.search-result-item{padding:8px 10px;border-radius:var(--radius-sm);font-size:.8125rem;color:var(--text-light);cursor:pointer;transition:all .2s var(--ease)}
.search-result-item:hover{background:var(--gold-subtle);color:var(--text)}
.search-result-item .s-match{color:var(--gold)}
.search-empty{padding:12px 10px;font-size:.8125rem;color:var(--text-lighter);text-align:center}
.recent-item{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:.55rem 0;cursor:pointer;border-bottom:1px solid var(--border-light);transition:opacity .3s var(--ease)}
.recent-item:first-of-type{padding-top:0}
.recent-item:hover{opacity:.7}
.recent-item-title{font-family:var(--serif);font-size:.875rem;letter-spacing:.02em;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-item-date{font-size:.625rem;color:var(--text-lighter);white-space:nowrap;font-feature-settings:'tnum'}
.archive-item{display:flex;justify-content:space-between;align-items:center;padding:.45rem 0;border-bottom:1px solid var(--border-light);cursor:pointer;transition:opacity .3s var(--ease)}
.archive-item:hover{opacity:.7}
.archive-item-label{font-size:.875rem;font-family:var(--serif);letter-spacing:.04em}
.archive-item-count{font-size:.625rem;color:var(--text-lighter);background:var(--bg-alt);padding:1px 8px;border-radius:99px;font-feature-settings:'tnum'}
.cat-tags{display:flex;flex-wrap:wrap;gap:6px}
.cat-tag{padding:3px 12px;border-radius:99px;font-size:.6875rem;color:var(--text-light);background:var(--bg-alt);border:1px solid var(--border-light);cursor:pointer;transition:all .3s var(--ease)}
.cat-tag:hover{color:var(--gold);border-color:var(--gold-light);background:var(--gold-subtle)}
.sidebar-about{font-size:.875rem;color:var(--text-light);line-height:1.8}
.sidebar-about .gold-dot{display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--gold);margin:0 2px;vertical-align:middle}

/* ═══════════════════════════════════════
   FULL-WIDTH ARTICLE PAGE
   ═══════════════════════════════════════ */

/* Article page overrides padding-top (handled by article-wrap) */
.article-page{padding-top:0;display:flex;flex-direction:column}
.article-page.active{transform:translateY(0)}
.article-loading{display:flex;align-items:center;justify-content:center;height:calc(100vh - var(--nav-h))}

/* ─── Article Top Bar ─── */
.article-wrap{display:flex;flex-direction:column;height:calc(100vh - var(--nav-h))}

/* ─── Article Iframe ─── */
.article-iframe-wrap{flex:1;display:flex;min-height:0}
.article-frame{width:100%;border:none;display:block;height:100%}

/* ─── Floating overlay controls ─── */
.art-float{
position:fixed;z-index:101;top:64px;
display:flex;align-items:center;gap:6px;
font-size:.8125rem;color:var(--text-light);letter-spacing:.04em;
padding:7px 14px;border-radius:var(--radius-sm);
background:var(--bg-card);
border:1px solid var(--border-light);
cursor:pointer;transition:all .3s var(--ease-out);
opacity:0.55;pointer-events:auto;
}
.art-float svg{width:15px;height:15px}
.art-float-fs{left:12px;top:64px;right:auto}
.art-float-fs .fs-icon-exit{display:none}

.art-float:hover{opacity:1}
.art-float:focus-visible{opacity:1}
.art-float:hover{color:var(--text);border-color:var(--gold-light);background:var(--bg-card)}

.sansan-fullscreen .art-float{top:16px}
.sansan-fullscreen .art-float-fs{top:16px;left:12px;right:auto;opacity:0;pointer-events:auto}
.sansan-fullscreen .art-float-fs .fs-icon{display:none}
.sansan-fullscreen .art-float-fs .fs-icon-exit{display:block}

/* ═══════════════════════════════════════
   FULLSCREEN MODE — Only hides main nav
   ═══════════════════════════════════════ */
.sansan-fullscreen .header{transform:translateY(-100%)}
.sansan-fullscreen .footer{display:none}
.sansan-fullscreen .article-iframe-wrap{height:100vh}

/* ═══════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════ */
.footer{border-top:1px solid var(--border-light);padding:2rem 28px}
.footer-inner{max-width:var(--mw-page);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.footer-brand{font-family:var(--serif);font-size:.9375rem;letter-spacing:.14em;color:var(--text);opacity:.4}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:.6875rem;color:var(--text-lighter);transition:color .3s var(--ease);letter-spacing:.04em}
.footer-links a:hover{color:var(--text)}
.footer-copy{font-size:.6875rem;color:var(--text-lighter);font-feature-settings:'tnum'}

/* ═══════════════════════════════════════
   STATES
   ═══════════════════════════════════════ */
.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;gap:12px}
.loading-dots{display:flex;gap:5px}
.loading-dots span{width:5px;height:5px;border-radius:50%;background:var(--text-lighter);animation:dotB 1.4s ease-in-out infinite both}
.loading-dots span:nth-child(1){animation-delay:-.32s}
.loading-dots span:nth-child(2){animation-delay:-.16s}
.loading-dots span:nth-child(3){animation-delay:0s}
@keyframes dotB{0%,80%,100%{transform:scale(.6);opacity:.3}40%{transform:scale(1);opacity:1}}
.error-state{text-align:center;padding:4rem 2rem;color:var(--text-lighter)}
.error-state p{font-size:.875rem;margin-top:.5rem}

/* ═══════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════ */
/* ─── Content Loader ─── */
.content-spinner{width:28px;height:28px;border:1.5px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .8s linear infinite}
.content-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 0;gap:.75rem}

@media(max-width:960px){
.content-wrap{grid-template-columns:1fr;gap:2.5rem}
.hero .hero-title{font-size:3.25rem}
.grid-3col{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
.header-inner{padding:0 16px}
.header-nav{display:none}
.menu-btn{display:flex}
.hero{padding:2rem 12px 1.25rem}
.hero::before{width:400px;height:400px}
.hero .hero-title{font-size:3rem}
.hero-ring-1{width:360px;height:360px}
.hero-ring-2{width:260px;height:260px}
.hero h1 em{font-size:1.5rem}
.hero p{font-size:1.125rem}
.hero-line{margin-bottom:1.25rem}
.content-wrap{padding:0 12px 1.5rem;grid-template-columns:1fr}
.section-title{font-size:1.25rem;margin-bottom:1rem}
.grid-3col{grid-template-columns:1fr;gap:.625rem}
.post-card{flex-direction:column}
.post-card-img{aspect-ratio:16/9;width:100%;min-height:auto;border-radius:6px 6px 0 0}
.post-card-body{padding:.75rem .875rem 1rem}
.post-card-title{font-size:.9375rem}
.post-card-excerpt{font-size:.8125rem;line-height:1.45}
.post-card-date{font-size:.6875rem}
.footer-inner{flex-direction:column;gap:4px;text-align:center}
.footer-links{gap:.75rem}
.sidebar-section{margin-bottom:.75rem}
}
@media(max-width:480px){
.hero{padding:2rem 12px 1.25rem}
.hero::before{width:200px;height:200px}
.hero .hero-title{font-size:3.25rem}
.hero h1 em{font-size:1.125rem}
.hero p{font-size:1.0625rem}
.section-title{font-size:1.125rem}
.grid-3col{grid-template-columns:1fr;gap:.5rem}
.post-card{flex-direction:column;border-radius:8px}
.post-card-img{aspect-ratio:16/9;width:100%;min-height:auto;border-radius:6px 6px 0 0;background:var(--bg-alt)}
.post-card-body{padding:.625rem .75rem .875rem}
.post-card-title{font-size:.875rem}
.post-card-excerpt{font-size:.8125rem;line-height:1.5}
.post-card-date{font-size:.6875rem}
.site-title{font-size:1rem}
}

@keyframes glowPulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.12)}}

/* --- Hero orbital rings with planets --- */
.hero-ring{position:absolute;border-radius:50%;top:50%;left:50%;pointer-events:none}
.hero-ring-track{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(196,155,94,.18)}
.hero-ring-1{width:520px;height:520px;animation:heroWobble1 28s ease-in-out infinite;transform:translate(-50%,-50%)}
.hero-ring-1 .hero-ring-track{animation:heroOrbit1 30s linear infinite}
.hero-ring-2{width:360px;height:360px;transform:translate(-50%,-50%)}
.hero-ring-2 .hero-ring-track{border-color:rgba(196,155,94,.12);animation:heroOrbit2 24s linear infinite reverse}
@keyframes heroWobble1{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}33%{transform:translate(-50%,-50%) rotate(4deg)}66%{transform:translate(-50%,-50%) rotate(-3deg)}}
@keyframes heroWobble2{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}33%{transform:translate(-50%,-50%) rotate(-3deg)}66%{transform:translate(-50%,-50%) rotate(4deg)}}
@keyframes heroOrbit1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes heroOrbit2{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-planet{position:absolute;width:9px;height:9px;border-radius:50%;top:-4.5px;left:calc(50% - 4.5px);pointer-events:none}
.hero-planet-1{background:#e8d5b0;box-shadow:0 0 14px rgba(196,155,94,.8),0 0 30px rgba(196,155,94,.35)}
.hero-planet-2{width:7px;height:7px;top:-3.5px;left:calc(50% - 3.5px);background:var(--gold);box-shadow:0 0 14px rgba(196,155,94,.9),0 0 36px rgba(196,155,94,.4)}
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-particle{position:absolute;border-radius:50%;background:var(--gold);pointer-events:none;opacity:0}
@keyframes heroFloat{
  0%,100%{transform:translate(0,0) scale(1);opacity:0}
  15%{opacity:.45}
  50%{transform:translate(0,-28px) scale(1.3);opacity:.5}
  85%{opacity:.35}
}
.hero-glow{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out);background:radial-gradient(500px circle at var(--gx,50%) var(--gy,30%),rgba(196,155,94,.12) 0%,rgba(196,155,94,.04) 30%,transparent 70%);z-index:0}
.hero-glow.active{opacity:1}

/* --- Hero title group & chop --- */
.hero-title-group{display:flex;align-items:center;justify-content:center;gap:0.75rem}
.hero-chop{width:40px;height:40px;background:#c43a31;color:#fff;font-size:1.125rem;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC',serif;border-radius:4px;opacity:0.85;transform:rotate(-2deg);flex-shrink:0;transition:transform 0.5s var(--ease-out),box-shadow 0.5s var(--ease-out);box-shadow:0 2px 8px rgba(196,58,49,0.15);cursor:pointer;line-height:1;position:relative}
.hero-chop:hover{transform:rotate(0deg) scale(1.05);box-shadow:0 4px 16px rgba(196,58,49,0.25)}

/* --- Hero orbital rings with planets --- */
.hero-ring{position:absolute;border-radius:50%;top:50%;left:50%;pointer-events:none}
.hero-ring-track{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(196,155,94,.18)}
.hero-ring-1{width:520px;height:520px;animation:heroWobble1 28s ease-in-out infinite;transform:translate(-50%,-50%)}
.hero-ring-1 .hero-ring-track{animation:heroOrbit1 30s linear infinite}
.hero-ring-2{width:360px;height:360px;transform:translate(-50%,-50%)}
.hero-ring-2 .hero-ring-track{border-color:rgba(196,155,94,.12);animation:heroOrbit2 24s linear infinite reverse}
@keyframes heroWobble1{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}33%{transform:translate(-50%,-50%) rotate(4deg)}66%{transform:translate(-50%,-50%) rotate(-3deg)}}
@keyframes heroWobble2{0%,100%{transform:translate(-50%,-50%) rotate(0deg)}33%{transform:translate(-50%,-50%) rotate(-3deg)}66%{transform:translate(-50%,-50%) rotate(4deg)}}
@keyframes heroOrbit1{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes heroOrbit2{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.hero-planet{position:absolute;width:9px;height:9px;border-radius:50%;top:-4.5px;left:calc(50% - 4.5px);pointer-events:none}
.hero-planet-1{background:#e8d5b0;box-shadow:0 0 14px rgba(196,155,94,.8),0 0 30px rgba(196,155,94,.35)}
.hero-planet-2{width:7px;height:7px;top:-3.5px;left:calc(50% - 3.5px);background:var(--gold);box-shadow:0 0 14px rgba(196,155,94,.9),0 0 36px rgba(196,155,94,.4)}
.hero-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-particle{position:absolute;border-radius:50%;background:var(--gold);pointer-events:none;opacity:0}
@keyframes heroFloat{
  0%,100%{transform:translate(0,0) scale(1);opacity:0}
  15%{opacity:.45}
  50%{transform:translate(0,-28px) scale(1.3);opacity:.5}
  85%{opacity:.35}
}
.hero-glow{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .6s var(--ease-out);background:radial-gradient(500px circle at var(--gx,50%) var(--gy,30%),rgba(196,155,94,.12) 0%,rgba(196,155,94,.04) 30%,transparent 70%);z-index:0}
.hero-glow.active{opacity:1}

/* --- Hero title group & chop --- */
.hero-title-group{display:flex;align-items:center;justify-content:center;gap:0.75rem}
.hero-chop{width:40px;height:40px;background:#c43a31;color:#fff;font-size:1.125rem;display:flex;align-items:center;justify-content:center;font-family:'Noto Serif SC',serif;border-radius:4px;opacity:0.85;transform:rotate(-2deg);flex-shrink:0;transition:transform 0.5s var(--ease-out),box-shadow 0.5s var(--ease-out);box-shadow:0 2px 8px rgba(196,58,49,0.15);cursor:pointer;line-height:1;position:relative}
.hero-chop:hover{transform:rotate(0deg) scale(1.05);box-shadow:0 4px 16px rgba(196,58,49,0.25)}

/* --- Hero content wrapper --- */
.hero-content{position:relative;z-index:1;max-width:560px;margin:0 auto}

/* --- Hero badge --- */
.hero-badge{display:inline-flex;align-items:center;gap:0.75rem;margin-bottom:1.5rem}
.hero-badge-line{display:block;width:28px;height:1px;background:var(--gold);opacity:0.35}
.hero-badge-text{font-size:0.75rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);font-weight:400}

.hero-scroll{display:inline-flex;flex-direction:column;align-items:center;gap:0.35rem;color:var(--text-lighter);font-size:0.6875rem;letter-spacing:0.15em;margin-top:1.5rem}
/* --- Hero sub (italic tagline) --- */
.hero-scroll::after{content:'';display:block;width:1px;height:20px;background:var(--text-lighter)}
@keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:0.5}50%{transform:translateY(6px);opacity:1}}

/* --- Home about section --- */
.home-about{padding:3rem 28px 4rem;text-align:center;border-top:1px solid var(--border-light);max-width:var(--mw-content);margin:0 auto}
.home-about p{font-size:0.9375rem;color:var(--text-light);line-height:1.9;font-weight:300}
.home-about p:first-child{margin-bottom:0.25rem}

/* --- Chop stamp interaction --- */
@keyframes chopStamp{0%{transform:rotate(-2deg) scale(1);box-shadow:0 2px 8px rgba(196,58,49,0.15)}10%{transform:rotate(-1deg) scale(0.82);box-shadow:0 1px 4px rgba(196,58,49,0.25)}25%{transform:rotate(2deg) scale(0.88)}40%{transform:rotate(-1deg) scale(0.85)}60%{transform:rotate(0deg) scale(0.94);box-shadow:0 3px 16px rgba(196,58,49,0.35)}80%{transform:rotate(-1deg) scale(1.02)}100%{transform:rotate(-2deg) scale(1);box-shadow:0 2px 8px rgba(196,58,49,0.15)}}
.hero-chop.stamping{animation:chopStamp 0.7s cubic-bezier(.22,1,.36,1) forwards}
.hero-chop::after{content:'';position:absolute;top:50%;left:50%;width:0;height:0;border:2px solid rgba(196,58,49,0);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;transition:none}
.hero-chop.stamping::after{animation:chopInkRing 0.7s ease-out forwards}
@keyframes chopInkRing{0%{width:0;height:0;border-color:rgba(196,58,49,0.5);border-width:3px;opacity:1}100%{width:80px;height:80px;border-color:rgba(196,58,49,0);border-width:1px;opacity:0}}

/* ─── Achievement ─── */
.ach-container{position:fixed;bottom:24px;right:24px;z-index:9998;display:flex;flex-direction:column-reverse;gap:10px;pointer-events:none}
.ach-toast{display:flex;align-items:stretch;width:340px;min-height:76px;background:rgba(30,28,26,.92);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden;transform:translateX(120%) scale(.9);opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;pointer-events:auto;box-shadow:0 8px 40px rgba(0,0,0,.3)}
.ach-toast.show{transform:translateX(0) scale(1);opacity:1}
.ach-toast.exit{transform:translateX(40%) scale(.95);opacity:0;transition-duration:.35s}
.ach-icon-wrap{width:68px;min-height:76px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(196,155,94,.18),rgba(196,155,94,.06));flex-shrink:0;border-right:1px solid rgba(255,255,255,.06)}
.ach-icon{font-size:1.75rem;line-height:1;filter:drop-shadow(0 0 6px rgba(196,155,94,.25))}
.ach-body{flex:1;padding:12px 16px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.ach-label{font-size:.5625rem;text-transform:uppercase;letter-spacing:.18em;color:#c49b5e;font-weight:500;margin-bottom:1px}
.ach-title{font-family:var(--serif);font-size:.875rem;font-weight:500;color:#f0ece6;line-height:1.3;letter-spacing:.02em}
.ach-desc{font-size:.6875rem;color:rgba(255,255,255,.5);line-height:1.4;margin-top:1px}
.ach-bar-wrap{height:2px;background:rgba(255,255,255,.08);margin:6px 12px 10px;border-radius:1px;overflow:hidden;flex-shrink:0}
.ach-bar{height:100%;background:#c49b5e;width:0;border-radius:1px;transition:width 3s linear}
.ach-toast.show .ach-bar{width:100%}
@media(max-width:480px){.ach-container{bottom:16px;right:16px;left:16px}.ach-toast{width:100%;min-height:68px}.ach-icon-wrap{width:56px;min-height:68px}.ach-icon{font-size:1.4rem}.ach-title{font-size:.8125rem}.ach-desc{font-size:.625rem}}

/* ─── Achievement mobile scale ─── */
@media(max-width:480px){
.ach-toast{width:280px;min-height:60px}
.ach-icon-wrap{width:52px;min-height:60px}
.ach-icon{font-size:1.3rem}
.ach-title{font-size:.8125rem}
.ach-label{font-size:.5rem}
.ach-desc{font-size:.625rem}
.ach-bar-wrap{margin:4px 10px 8px}
}

/* ═══ Custom Cursor (desktop) ═══ */

/* ═══ Click Ripple (mobile) ═══ */
  position: fixed; pointer-events: none; z-index: 99999;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold-light);
  transform: translate(-50%,-50%) scale(0);
  opacity: .35;
}
  0% { transform: translate(-50%,-50%) scale(0); opacity: .35; }
  100% { transform: translate(-50%,-50%) scale(3); opacity: 0; }
}

/* ─── Mobile link arrow ─── */
.mobile-link-arrow{font-size:.65rem;color:var(--gold-light);opacity:0;transition:all .3s;flex-shrink:0}
.mobile-link:hover .mobile-link-arrow{opacity:1}

/* ═══ Custom Cursor ═══ */

/* ═══ Custom Cursor ═══ */
@media (hover: hover) and (pointer: fine) {
    position: fixed; pointer-events: none; z-index: 99999;
    width: 10px; height: 10px;
    background: var(--gold);
    transform: translate(-50%,-50%) rotate(45deg);
    left: -100px; top: -100px;
    transition: width .2s ease, height .2s ease, background .2s ease, transform .2s ease;
    box-shadow: 0 0 12px rgba(196,155,94,.3);
  }
    width: 16px; height: 16px;
    background: var(--gold-light);
    transform: translate(-50%,-50%) rotate(45deg) scale(1.15);
    box-shadow: 0 0 20px rgba(196,155,94,.4);
  }
}

/* ─── Hide floating buttons when iframe modal is open ─── */
.art-float-hidden .art-float{opacity:0;pointer-events:none;}

/* ─── Fullscreen exit hint ─── */
.fs-hint{position:fixed;top:68px;left:50%;transform:translateX(-50%);z-index:99999;background:rgba(28,26,24,.85);color:rgba(255,255,255,.9);padding:10px 22px;border-radius:8px;font-size:.75rem;letter-spacing:.04em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity .4s ease;pointer-events:none;font-family:var(--sans);border:1px solid rgba(255,255,255,.1)}
.fs-hint.sh{opacity:1}

/* ─── Nav Dropdown ─── */
.nav-dropdown{position:relative;cursor:pointer}
.nav-dropdown-trigger{display:flex;align-items:center;gap:2px;padding:0 12px;height:100%;font-size:.8125rem;color:var(--text-light);letter-spacing:.04em;transition:color .3s}
.nav-dropdown-trigger:hover{color:var(--text)}
.dd-arrow{font-size:.5rem;transition:transform .25s}
.nav-dropdown:hover .dd-arrow{transform:rotate(180deg)}
.nav-dropdown-menu{position:absolute;top:100%;left:0;min-width:130px;background:rgba(246,243,238,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-light);border-radius:8px;padding:6px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .25s;pointer-events:none;z-index:200}
.nav-dropdown:hover .nav-dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.nav-dropdown-item{display:block;padding:7px 14px;font-size:.68rem;color:var(--text-light);border-radius:4px;transition:all .2s;text-decoration:none}
.nav-dropdown-item:hover{background:rgba(196,155,94,.08);color:var(--text)}
.nav-dropdown-item.active{color:var(--gold);background:rgba(196,155,94,.1)}

/* ─── Login Button in Header ─── */
.nav-login-btn{font-size:.68rem;color:var(--text-light);text-decoration:none;padding:5px 14px;border:1px solid var(--border-light);border-radius:20px;transition:all .3s;margin-right:8px}
.nav-login-btn:hover{color:var(--gold);border-color:var(--gold-light);background:rgba(196,155,94,.06)}
.nav-profile-btn{font-size:.68rem;color:var(--gold);text-decoration:none;padding:5px 14px;border:1px solid rgba(196,155,94,.2);border-radius:20px;transition:all .3s;margin-right:8px;background:rgba(196,155,94,.06)}
.nav-profile-btn:hover{background:rgba(196,155,94,.12);border-color:var(--gold)}

/* ─── Mobile group label ─── */
.mobile-group-label{font-size:.82rem;color:#b0aaa0;letter-spacing:.06em;padding:16px 14px 4px;font-weight:400;border-bottom:1px solid var(--border-light,#efeae2);margin-bottom:4px}
.mobile-link.sub{font-size:.82rem;padding-left:24px;color:var(--text-light)}

/* ═══ Login / Register ═══ */
.l-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.l-card{display:flex;width:800px;max-width:100%;min-height:480px;background:#fff;border-radius:20px;box-shadow:0 8px 40px rgba(0,0,0,.04);overflow:hidden}
.l-left{width:44%;padding:48px 36px;display:flex;flex-direction:column;justify-content:space-between;position:relative}
.l-left::after{content:'';position:absolute;right:0;top:10%;height:80%;width:1px;background:linear-gradient(180deg,transparent,#e8e2d8,transparent)}
.l-right{flex:1;padding:48px 40px;display:flex;flex-direction:column;justify-content:center}
.l-brand{font-family:'Cormorant Garamond',serif;font-size:1.5rem;letter-spacing:.1em;color:#c49b5e;font-weight:300}
.l-brand span{color:#1c1a18}
.l-brand-sub{font-size:.55rem;color:#b0aaa0;letter-spacing:.06em;margin-top:2px;font-weight:300}
.l-quote{font-family:'Noto Serif SC',Georgia,serif;font-size:.85rem;font-weight:200;color:#b0aaa0;line-height:1.8;margin:0}
.l-quote cite{display:block;font-size:.58rem;margin-top:6px;color:#b0aaa0;font-style:normal}
.l-h{font-family:'Noto Serif SC',Georgia,serif;font-size:.92rem;font-weight:400;color:#1c1a18;margin-bottom:4px}
.l-sub{font-size:.6rem;color:#b0aaa0;margin-bottom:24px;line-height:1.6}
.l-f{margin-bottom:16px}
.l-f label{font-size:.54rem;color:#7a756d;letter-spacing:.05em;text-transform:uppercase;display:block;margin-bottom:4px}
.l-f input{width:100%;border:none;border-bottom:1.5px solid #e8e2d8;padding:8px 0;font-size:.75rem;font-family:var(--sans);outline:none;background:transparent;transition:border-color .25s;color:#1c1a18}
.l-f input:focus{border-color:#c49b5e}
.l-pw{display:flex;align-items:center;gap:6px}
.l-pw input{flex:1;border:none;border-bottom:1.5px solid #e8e2d8;padding:8px 0;font-size:.75rem;font-family:var(--sans);outline:none;background:transparent;color:#1c1a18;transition:border-color .25s}
.l-pw input:focus{border-color:#c49b5e}
.l-pwt{flex-shrink:0;background:none;border:none;color:#b0aaa0;cursor:pointer;font-size:.52rem;padding:4px 6px;transition:color .2s;font-family:var(--sans);border-radius:3px}
.l-pwt:hover{color:#7a756d;background:rgba(196,155,94,.08)}
.l-err{font-size:.54rem;color:#d45353;display:none;margin:4px 0;line-height:1.4}
.l-btn{width:100%;padding:10px 0;border:none;font-size:.7rem;cursor:pointer;transition:all .25s;font-family:var(--sans);border-radius:0;background:#1c1a18;color:#fff;margin-top:4px}
.l-btn.loading{position:relative;pointer-events:none}
.l-btn.loading::after{content:'';display:inline-block;width:12px;animation:btnDots 1s steps(3) infinite;margin-left:2px;text-align:left}
@keyframes btnDots{0%{content:''}33%{content:'.'}66%{content:'..'}100%{content:'...'}}

.l-btn:hover{background:#c49b5e;letter-spacing:.04em}
.l-ghost{background:none;color:#7a756d;font-size:.58rem;cursor:pointer;border:none;font-family:var(--sans);transition:color .2s;padding:0}
.l-ghost:hover{color:#1c1a18}
.l-fl{display:flex;justify-content:space-between;margin-top:12px}
.l-sep{text-align:center;font-size:.48rem;color:#b0aaa0;margin:14px 0;position:relative;letter-spacing:.1em}
.l-sep::after{content:'';position:absolute;top:50%;left:0;right:0;height:1px;background:#efeae2}
.l-sep span{background:#fff;padding:0 10px;position:relative;z-index:1}
.l-code{display:flex;gap:6px;justify-content:center;margin:16px 0}
.l-code input{width:38px;height:44px;text-align:center;font-size:1rem;padding:0;border:none;border-bottom:1.5px solid #e8e2d8;outline:none;background:transparent;transition:border-color .25s;font-family:'Noto Serif SC',Georgia,serif;color:#c49b5e}
.l-code-box input{width:42px;height:48px;border:1.5px solid #e8e2d8;border-radius:6px;background:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
.l-code-box input:focus{border-color:#c49b5e;box-shadow:0 0 0 3px rgba(196,155,94,.1),inset 0 1px 3px rgba(0,0,0,.04)}
.l-code input:focus{border-color:#c49b5e}
.l-code-box input{width:42px;height:48px;border:1.5px solid #e8e2d8;border-radius:6px;background:#fff;box-shadow:inset 0 1px 3px rgba(0,0,0,.04)}
.l-code-box input:focus{border-color:#c49b5e;box-shadow:0 0 0 3px rgba(196,155,94,.1),inset 0 1px 3px rgba(0,0,0,.04)}
.l-back{display:inline-block;font-size:.54rem;color:#b0aaa0;text-decoration:none;margin-top:18px;transition:color .2s}
.l-back:hover{color:#7a756d}
.l-foot{font-size:.48rem;color:#d0cac0;margin-top:24px;line-height:1.5}
.l-poem{font-family:'Noto Serif SC',Georgia,serif;font-size:.72rem;color:#b0aaa0;font-weight:200;line-height:2;text-align:center}
.l-bar{width:80px;height:2px;background:#e8e2d8;border-radius:2px;margin:20px auto;overflow:hidden}
.l-bar div{width:35%;height:100%;background:#c49b5e;border-radius:2px;animation:lS 1.2s ease-in-out infinite}
@keyframes lS{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
@media(max-width:680px){.l-card{flex-direction:column;min-height:auto;border-radius:16px}.l-left{width:100%;padding:32px 28px 20px;min-height:auto}.l-left::after{display:none}.l-right{padding:24px 28px 36px}.l-quote{font-size:.78rem}.l-code input{width:34px;height:40px}}




/* === Profile - Personal Space v2.1 (Desktop) === */
.p-wrap{min-height:calc(100vh - 56px);display:block;padding:0}
.p-page{max-width:960px;margin:0 auto;padding:0 24px 60px}

/* ── Cover Banner (full viewport width) ── */
.p-cover-wrap{width:100vw;margin-left:calc(-50vw + 50%);background:linear-gradient(135deg,rgba(196,155,94,.18) 0%,rgba(246,243,238,1) 55%,rgba(196,155,94,.06) 100%);overflow:hidden}
.p-cover{position:relative;max-width:960px;margin:0 auto;height:220px;overflow:hidden}
.p-cover::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(ellipse 60% 50% at 20% 40%,rgba(196,155,94,.06) 0%,transparent 70%),radial-gradient(ellipse 40% 40% at 80% 60%,rgba(196,155,94,.04) 0%,transparent 70%);pointer-events:none}
.p-cover::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(196,155,94,.15),transparent)}

/* ── Avatar ── */
.p-avatar-section{text-align:center;margin-top:-55px;position:relative;z-index:2}
.p-avatar-wrap{display:inline-block;position:relative;cursor:pointer;border-radius:50%}
.p-av{width:110px;height:110px;border-radius:50%;border:3px solid #f6f3ee;background:rgba(196,155,94,.08);display:flex;align-items:center;justify-content:center;font-size:2.8rem;color:#c49b5e;font-family:'Noto Serif SC',Georgia,serif;overflow:hidden;box-shadow:0 2px 16px rgba(0,0,0,.06);transition:box-shadow .3s,transform .3s;margin:0 auto}
.p-av:hover{box-shadow:0 4px 24px rgba(196,155,94,.2);transform:scale(1.02)}
.p-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.p-av-overlay{position:absolute;inset:3px;border-radius:50%;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s;color:#fff;font-size:.7rem;letter-spacing:.06em;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none}
.p-avatar-wrap:hover .p-av-overlay{opacity:1}

/* ── Header Info ── */
.p-header{text-align:center;margin-top:18px}
.p-name{font-family:'Noto Serif SC',Georgia,serif;font-size:1.5rem;color:#1c1a18;font-weight:400;letter-spacing:.06em}
.p-email{font-size:.7rem;color:#b0aaa0;margin-top:4px;font-weight:300}
.p-greet{font-size:.85rem;color:#c49b5e;font-weight:300;letter-spacing:.04em;margin-top:10px;font-family:'Noto Serif SC',Georgia,serif}

/* ── Stats ── */
.p-stats{display:flex;justify-content:center;gap:48px;margin-top:28px;padding:20px 0;border-top:1px solid #efeae2;border-bottom:1px solid #efeae2}
.p-stat-item{text-align:center}
.p-stat-num{font-family:'Cormorant Garamond',serif;font-size:1.8rem;color:#c49b5e;font-weight:200;line-height:1.2}
.p-stat-label{font-size:.5rem;color:#b0aaa0;letter-spacing:.08em;text-transform:uppercase;margin-top:3px;font-weight:400}

/* ── Bio ── */
.p-bio-section{max-width:560px;margin:24px auto 0;text-align:center}
.p-bio{font-size:.75rem;color:#7a756d;line-height:1.9;font-weight:300;font-family:'Noto Serif SC',Georgia,serif}

/* ── Actions ── */
.p-actions{display:flex;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap}
.p-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 24px;border-radius:8px;border:1px solid rgba(196,155,94,.15);font-size:.68rem;cursor:pointer;transition:all .3s;font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;background:transparent;color:#7a756d;letter-spacing:.04em}
.p-btn:hover{border-color:#c49b5e;color:#c49b5e;background:rgba(196,155,94,.04)}
.p-btn-primary{background:#c49b5e;color:#fff;border-color:#c49b5e}
.p-btn-primary:hover{background:rgba(196,155,94,.85);border-color:rgba(196,155,94,.85);color:#fff}
.p-btn-ghost{border-color:transparent;color:#b0aaa0;font-size:.62rem}
.p-btn-ghost:hover{border-color:rgba(212,83,83,.15);color:#d45353;background:rgba(212,83,83,.04)}
.p-btn-xs{padding:4px 12px;font-size:.5rem;border-radius:4px}

/* ── Achievements ── */
.p-ach-section{margin-top:44px}
.p-ach-title{text-align:center;font-size:.6rem;color:#b0aaa0;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;font-weight:400}
.p-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:12px}
.p-ach-item{position:relative;aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all .3s;max-width:82px;margin:0 auto;width:100%}
.p-ach-item.on{background:rgba(196,155,94,.06);border:1px solid rgba(196,155,94,.1)}
.p-ach-item.off{opacity:.2}
.p-ach-item.on:hover{background:rgba(196,155,94,.12);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,.04)}
.p-ach-icon{font-size:1.1rem;line-height:1}
.p-ach-label{font-size:.48rem;color:#1c1a18;text-align:center;line-height:1.2}

/* Achievement tooltip */
.p-ach-tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);background:rgba(28,26,24,.92);backdrop-filter:blur(8px);color:#fff;font-size:.5rem;padding:6px 10px;border-radius:6px;white-space:nowrap;pointer-events:none;opacity:0;transition:all .25s;z-index:50;font-family:'Inter',sans-serif;letter-spacing:.02em}
.p-ach-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:rgba(28,26,24,.92)}
.p-ach-item.on:hover .p-ach-tip{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Comments Section ── */
.p-comments{margin-top:44px}
.p-comments-title{text-align:center;font-size:.6rem;color:#b0aaa0;letter-spacing:.12em;text-transform:uppercase;margin-bottom:20px;font-weight:400}
.p-comment-empty{text-align:center;padding:24px 0;color:#b0aaa0;font-size:.65rem;font-weight:300}
.p-comment-card{background:rgba(255,255,255,.5);border:1px solid rgba(196,155,94,.06);border-radius:10px;padding:14px 18px;margin-bottom:10px;display:flex;align-items:flex-start;gap:12px;transition:background .2s}
.p-comment-card:hover{background:rgba(255,255,255,.8)}
.p-comment-body{flex:1;min-width:0}
.p-comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.p-comment-post{font-size:.5rem;color:#c49b5e;font-weight:400;text-decoration:none}
.p-comment-post:hover{text-decoration:underline}
.p-comment-date{font-size:.45rem;color:#b0aaa0}
.p-comment-text{font-size:.6rem;color:#1c1a18;line-height:1.6;font-weight:300;word-break:break-word}
.p-comment-del{flex-shrink:0;background:none;border:1px solid transparent;color:#b0aaa0;font-size:.5rem;cursor:pointer;padding:3px 8px;border-radius:4px;transition:all .2s;font-family:'Inter',sans-serif}
.p-comment-del:hover{color:#d45353;border-color:rgba(212,83,83,.15);background:rgba(212,83,83,.04)}

/* ── Edit Modal ── */
.p-edit-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:200;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;transition:opacity .35s var(--ease-out),visibility .35s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.p-edit-overlay.show{visibility:visible;opacity:1}
.p-edit-overlay.show .p-edit-modal{transform:scale(1) translateY(0)}
.p-edit-modal{background:#ffffff;border-radius:16px;padding:36px 32px 28px;width:420px;max-width:90vw;box-shadow:0 20px 60px rgba(0,0,0,.08);position:relative;transform:scale(.92) translateY(8px);transition:transform .35s var(--ease-out)}
.p-edit-title{text-align:center;font-family:'Noto Serif SC',Georgia,serif;font-size:1rem;color:#1c1a18;font-weight:400;margin-bottom:24px}
.p-edit-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1rem;color:#b0aaa0;cursor:pointer;padding:4px 8px;border-radius:4px;transition:color .2s;line-height:1}
.p-edit-close:hover{color:#1c1a18}
.p-fg{margin-bottom:16px}
.p-fg label{display:block;font-size:.58rem;color:#7a756d;margin-bottom:6px;letter-spacing:.04em}
.p-inp{width:100%;padding:8px 12px;border:1px solid #e8e2d8;border-radius:8px;font-size:.7rem;font-family:'Inter',-apple-system,'Segoe UI',system-ui,sans-serif;outline:none;background:#f6f3ee;color:#1c1a18;box-sizing:border-box;transition:border-color .25s,background .25s}
.p-inp:focus{border-color:#c49b5e;background:#fff}
.p-ta{resize:none;min-height:72px}
.p-edit-actions{display:flex;gap:8px;margin-top:20px}
.p-edit-actions .p-btn{flex:1;justify-content:center}

/* ── Loading & States ── */
.p-loading{display:flex;align-items:center;justify-content:center;min-height:50vh}
.p-spinner{width:32px;height:32px;border:2px solid #e8e2d8;border-top-color:#c49b5e;border-radius:50%;animation:pSpin .8s linear infinite}
@keyframes pSpin{to{transform:rotate(360deg)}}
.p-null{text-align:center;padding:60px 0;color:#b0aaa0}

/* ── Section divider ── */
.p-sep{display:flex;align-items:center;gap:12px;margin:32px 0 4px}
.p-sep .line{flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(196,155,94,.12),transparent)}
.p-sep .dot{font-family:'Cormorant Garamond',serif;font-size:.6rem;color:#c49b5e;font-weight:200;flex-shrink:0}

/* ── Responsive ── */
@media(max-width:768px){
.p-cover-wrap{margin-left:-16px;width:calc(100% + 32px)}
.p-cover{height:140px}
.p-page{padding:0 16px 40px}
.p-av{width:80px;height:80px;font-size:2rem}
.p-avatar-section{margin-top:-40px}
.p-name{font-size:1.15rem}
.p-stats{gap:24px;padding:16px 0}
.p-stat-num{font-size:1.4rem}
.p-ach-grid{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:8px}
.p-ach-item{max-width:66px}
.p-edit-modal{padding:28px 20px 24px}
.p-comment-card{padding:10px 14px;flex-direction:column;gap:6px}
.p-comment-del{align-self:flex-end}
}



  .profile-area, .user-panel {
    display: none !important;
  }
  .logged-in .mobile-nav {
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}



/* ============================================
   Mobile Profile - Ultimate Fix for Horizontal Overflow
   Fix: Right side blank space / horizontal scroll issue
   ============================================ */
@media(max-width:768px){
  /* ========== GLOBAL PREVENTION ========== */
  html, body{
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
  }
  
  /* ========== MAIN WRAPPER ========== */
  .p-wrap{
    min-height: calc(100vh - 56px);
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    width: 100% !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* ========== PAGE CONTAINER - CRITICAL FIX ========== */
  .p-page{
    padding: 0 16px 40px !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block !important;
    overflow-x: hidden !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  /* ========== COVER BANNER - MOST LIKELY CAUSE ========== */
  .p-cover-wrap{
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .p-cover{
    height: 160px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* ========== AVATAR SECTION ========== */
  .p-avatar-section{
    margin-top: -40px !important;
    position: relative !important;
    z-index: 10 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .p-av{
    width: 80px !important;
    height: 80px !important;
    font-size: 2rem !important;
    margin: 0 auto !important;
  }
  
  /* ========== USER INFO ========== */
  .p-header{
    text-align: center !important;
    margin-top: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
  }
  
  .p-name{
    font-size: 1.15rem !important;
  }
  
  /* ========== STATS ========== */
  .p-stats{
    gap: 24px !important;
    padding: 16px 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  
  .p-stat-num{
    font-size: 1.4rem !important;
  }
  
  /* ========== ACHIEVEMENTS GRID ========== */
  .p-section{
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }
  
  .p-ach-grid{
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .p-ach-item{
    max-width: 66px !important;
    box-sizing: border-box !important;
  }
  
  /* ========== COMMENTS ========== */
  .p-comment-card{
    padding: 10px 14px !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  
  .p-comment-del{
    align-self: flex-end !important;
  }
  
  /* ========== SAFETY HARDNESS - NO EXCEPTIONS ========== */
  .p-wrap *{
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }
  
  .p-wrap > *{
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Hide any rogue elements that might cause overflow */
  .p-wrap > :not(.p-page):not(script):not(style):not(link){
    display: none !important;
  }
  
  /* Kill all floats that cause layout issues */
  .p-wrap *, .p-page *{
    float: none !important;
    clear: none !important;
  }
  
  /* Prevent any transform that might shift elements */
  .p-wrap *, .p-page *{
    transform: none !important;
  }
}

/* ─── Back to Top ─── */
#backToTop{position:fixed;bottom:28px;right:28px;z-index:9997;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid var(--border-light);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-light);opacity:0;transform:translateY(16px) scale(.85);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),color .3s,box-shadow .3s;box-shadow:0 2px 10px rgba(0,0,0,.06);pointer-events:none}
#backToTop.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
#backToTop:hover{color:var(--gold);box-shadow:0 4px 18px var(--gold-glow);border-color:var(--gold-light)}
#backToTop svg{width:18px;height:18px}
@media(max-width:768px){#backToTop{bottom:20px;right:20px;width:36px;height:36px}}


/* ─── Page Transition Loader ─── */
.page-loader{position:fixed;top:0;left:0;right:0;z-index:9996;height:2px;pointer-events:none;opacity:0;transition:opacity .2s}
.page-loader.active{opacity:1}
.page-loader .pl-bar{height:100%;width:0;background:linear-gradient(90deg,var(--gold-light),var(--gold));border-radius:1px;transition:width .3s var(--ease-out)}
.page-loader .pl-bar.loading{width:60%}
.page-loader .pl-bar.done{width:100%;transition:width .15s}


/* ═══ Post List (Homepage Redesign) ═══ */
.post-list{display:flex;flex-direction:column;gap:2px;margin-bottom:2.5rem}
.post-list-item{display:flex;padding:14px 18px;border-radius:4px;cursor:pointer;transition:all .35s var(--ease-out);border-bottom:1px solid var(--border-light);opacity:0;transform:translateY(8px);animation:fadeUpItem .5s var(--ease-out) both;animation-delay:var(--item-delay,.1s)}
.post-list-item:last-child{border-bottom:none}
.post-list-item:hover{background:var(--gold-subtle);padding-left:22px;border-color:transparent}
@keyframes fadeUpItem{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.pli-body{flex:1;min-width:0}
.pli-cat{display:inline-block;font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:2px}
.pli-title{font-family:var(--serif);font-size:.95rem;font-weight:400;color:var(--text);line-height:1.4;margin-bottom:3px;transition:color .25s}
.post-list-item:hover .pli-title{color:var(--gold)}
.pli-excerpt{font-size:.7rem;color:var(--text-light);line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.pli-date{font-size:.6rem;color:var(--text-lighter);font-feature-settings:'tnum';margin-top:3px;display:inline-block}

/* ─── Enhanced page transitions ─── */
.page{transition:opacity .45s var(--ease-out),transform .45s var(--ease-out)}
.page.active{opacity:1;transform:translateY(0)}
.page.exit{opacity:0;transform:translateY(-8px) scale(.99);filter:blur(1px)}

/* ─── Hero scroll animation ─── */
.hero-scroll::after{animation:scrollBounce 2s ease-in-out infinite}

/* ─── Article loading shimmer ─── */
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}

/* ═══ Mobile Profile - Extra Fixes ═══ */
@media(max-width:768px){
  .p-page{max-width:100%!important;overflow:hidden!important}
  .p-cover-wrap{margin-left:0!important;width:100%!important}
  .p-cover{height:140px!important}
  .p-stats{justify-content:center!important;gap:20px!important}
  .p-stat-item{flex:0 0 auto!important;min-width:auto!important}
  .p-ach-grid{grid-template-columns:repeat(4,1fr)!important;gap:6px!important;padding:0!important;justify-items:center!important}
  .p-ach-item{max-width:60px!important;aspect-ratio:1!important;margin:0!important}
  .p-ach-icon{font-size:.95rem!important}
  .p-ach-label{font-size:.45rem!important}
  .p-ach-tip{font-size:.45rem!important;white-space:normal!important;max-width:120px!important}
  .p-btn{padding:6px 16px!important;font-size:.62rem!important}
  .p-comment-card{width:100%!important;margin:0 0 8px!important;padding:10px 12px!important}
  .p-comment-text{font-size:.58rem!important}
  /* Make edit modal full-width on mobile */
  .p-edit-overlay{align-items:flex-start;justify-content:center;padding:12vh 0 5vh;overflow-y:auto;backdrop-filter:none;-webkit-backdrop-filter:none}
  .p-edit-modal{width:95vw!important;max-width:95vw!important;padding:28px 20px 24px!important}
  .p-bio-section{max-width:100%!important;padding:0 4px!important}
  .p-bio{font-size:.72rem!important}
  /* Fix potential overflow from any element */
  .p-page *{max-width:100%!important;word-wrap:break-word!important}
}

/* ═══ Animations Enhancement ═══ */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* Hero entrance staggered */
.hero-badge{animation:slideDown .7s var(--ease-out) .1s both}
.hero-title-group{animation:fadeIn 1s var(--ease-out) .3s both}
.hero-desc{animation:slideUp .8s var(--ease-out) .5s both}
.hero-scroll{animation:fadeIn 1s var(--ease-out) 1s both}

/* Sidebar sections entrance */
.sidebar-section{animation:slideUp .6s var(--ease-out) both}
.sidebar-section:nth-child(1){animation-delay:.2s}
.sidebar-section:nth-child(2){animation-delay:.3s}
.sidebar-section:nth-child(3){animation-delay:.4s}
.sidebar-section:nth-child(4){animation-delay:.5s}
.sidebar-section:nth-child(5){animation-delay:.6s}

/* Preloader refinement */
.preloader-s .g,.preloader-s .r{display:inline-block}
.preloader.done .preloader-s .g,.preloader.done .preloader-s .r{animation:none}

/* Footer subtle entrance */
.footer{animation:slideUp .6s var(--ease-out) .3s both}

/* Article page smooth entrance */
.article-page .article-wrap{animation:fadeIn .5s var(--ease-out) .1s both}

/* ═══════════════════════════════════════
   MUSIC PLAYER
   ═══════════════════════════════════════ */
.music-player{position:fixed;bottom:28px;right:24px;left:auto;z-index:9995;pointer-events:none}
.music-btn{width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-light);cursor:pointer;display:flex;align-items:center;justify-content:center;pointer-events:auto;transition:all .35s var(--ease-out);box-shadow:0 2px 10px rgba(0,0,0,.06);position:relative;z-index:2}
.music-btn svg{width:17px;height:17px;transition:transform .35s var(--ease-out)}
.music-btn:hover{color:var(--gold);border-color:var(--gold-light);box-shadow:0 4px 18px var(--gold-glow);transform:scale(1.05)}
.music-btn.active{color:var(--gold);border-color:var(--gold-light);background:var(--gold-subtle);box-shadow:0 4px 18px var(--gold-glow)}
.music-btn.active svg{transform:rotate(30deg)}
.music-panel{position:absolute;bottom:calc(100% + 10px);left:auto;right:0;width:265px;background:rgba(246,243,238,.94);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-light);border-radius:10px;box-shadow:0 8px 32px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);pointer-events:auto;opacity:0;transform:translateY(8px) scale(.95);transform-origin:bottom right;transition:opacity .25s var(--ease-out),transform .28s cubic-bezier(.22,1,.36,1);visibility:hidden}
.music-panel.show{opacity:1;transform:translateY(0) scale(1);visibility:visible}
.mp-head{display:flex;align-items:center;gap:6px;padding:9px 10px 0}
.mp-badge{font-family:var(--serif);font-size:.68rem;color:var(--gold);line-height:1}
.mp-mode-label{font-size:.5rem;color:var(--text-lighter);flex:1;letter-spacing:.04em}
.mp-close{width:18px;height:18px;border-radius:50%;background:transparent;border:none;cursor:pointer;font-size:.5rem;color:var(--text-lighter);display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1}
.mp-close:hover{background:rgba(0,0,0,.05);color:var(--text)}
.mp-body{padding:6px 10px 9px}
.mp-title-wrap{overflow:hidden;margin-bottom:5px}
.mp-title-inner{white-space:nowrap;overflow:hidden}
.mp-title{font-family:var(--serif);font-size:.78rem;color:var(--text);letter-spacing:.02em;display:inline-block;transition:opacity .2s}
.mp-title-inner.scrolling .mp-title{animation:mpMarquee 7s linear infinite}
@keyframes mpMarquee{0%{transform:translateX(0)}8%{transform:translateX(0)}92%{transform:translateX(calc(var(--mp-scroll,0px) * -1))}100%{transform:translateX(calc(var(--mp-scroll,0px) * -1))}}
.mp-progress{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.mp-time{font-size:.52rem;color:var(--text-lighter);font-feature-settings:"tnum";min-width:26px;font-variant-numeric:tabular-nums;line-height:1}
.mp-time:last-child{text-align:right}
.mp-bar{flex:1;height:3px;background:var(--border);border-radius:2px;cursor:pointer;position:relative;transition:height .2s}
.mp-bar:hover{height:5px}
.mp-bar-fill{position:absolute;top:0;left:0;height:100%;background:var(--gold);border-radius:2px;pointer-events:none;transition:width .1s linear}
.mp-bar-thumb{position:absolute;top:50%;width:8px;height:8px;border-radius:50%;background:var(--gold);border:2px solid var(--bg-card);transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .2s}
.mp-bar:hover .mp-bar-thumb{opacity:1}
.mp-ctrl{display:flex;align-items:center;justify-content:center;gap:1px;margin-bottom:5px}
.mpc-btn{width:32px;height:30px;border-radius:50%;border:none;background:transparent;cursor:pointer;color:var(--text-light);display:flex;align-items:center;justify-content:center;transition:all .2s var(--ease);padding:0}
.mpc-btn svg{width:16px;height:16px}
.mpc-btn:hover{color:var(--gold);background:var(--gold-subtle)}
.mpc-btn:active{transform:scale(.88)}
.mpc-play{width:36px;height:34px;background:var(--gold-subtle);border:1px solid transparent;border-radius:50%}
.mpc-play:hover{background:var(--gold-subtle);border-color:var(--gold-light)}
.mpc-play svg{width:18px;height:18px}
.mpc-play .mpc-pause-icon rect{transition:opacity .2s}
.mp-playlist{max-height:0;overflow-y:auto;transition:max-height .3s var(--ease-out);margin-bottom:0}
.mp-playlist.show{max-height:152px;margin-bottom:5px}
.mp-playlist::-webkit-scrollbar{width:2px}
.mpl-item{display:flex;align-items:center;gap:6px;padding:4px 8px;border-radius:4px;cursor:pointer;transition:all .2s;font-size:.63rem;color:var(--text-light)}
.mpl-item:hover{background:var(--gold-subtle);color:var(--text)}
.mpl-item.active{color:var(--gold);background:rgba(196,155,94,.1);font-weight:500}
.mpl-num{font-size:.48rem;color:var(--text-lighter);min-width:12px;font-feature-settings:"tnum";line-height:1}
.mpl-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mp-foot{border-top:1px solid var(--border-light);padding-top:6px;margin-top:0}
.mp-foot a{font-size:.58rem;color:var(--text-lighter);text-decoration:none;display:block;text-align:center;padding:2px 0;transition:color .2s;letter-spacing:.02em;line-height:1.4}
.mp-foot a:hover{color:var(--gold)}
.music-player.mp-fs{opacity:0;pointer-events:none;transition:opacity .3s}

@media(max-width:768px){
  .music-player{bottom:calc(28px + env(safe-area-inset-bottom));right:14px;left:auto}
  .music-panel{width:232px;bottom:calc(100% + 8px);right:0;left:auto}
  .music-btn{width:36px;height:36px}
  .music-btn svg{width:15px;height:15px}
  .mp-title{font-size:.72rem}
  .mp-ctrl{gap:0}
  .mpc-btn{width:28px;height:26px}
  .mpc-btn svg{width:14px;height:14px}
  .mpc-play{width:32px;height:30px}
  .mpc-play svg{width:16px;height:16px}
  .mp-playlist.show{max-height:132px}
}
@media(max-width:480px){
  .music-player{bottom:calc(28px + env(safe-area-inset-bottom));right:10px;left:auto}
  .music-btn{width:30px;height:30px;flex-shrink:0}
  .music-btn svg{width:12px;height:12px}
  .music-panel{width:210px;bottom:calc(100% + 6px);right:-4px;left:auto}
}

/* Article page: hide footer */
body:has(.page.article-page.active) .footer{display:none}
/* Fix article page bottom blank */
.article-page{min-height:0!important}

/* Comment floating button (parent page) */
.cmt-floating-btn{display:none;width:40px;height:40px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-light);cursor:pointer;align-items:center;justify-content:center;transition:all .35s var(--ease-out);box-shadow:0 2px 10px rgba(0,0,0,.06);position:fixed;bottom:76px;right:24px;z-index:9995;pointer-events:auto;padding:0}
.cmt-floating-btn svg{width:17px;height:17px}
.cmt-floating-btn:hover{color:var(--gold);border-color:var(--gold-light);box-shadow:0 4px 18px var(--gold-glow);transform:scale(1.05)}
.cmt-floating-btn.show{display:flex}
@media(max-width:768px){
  .cmt-floating-btn{width:36px;height:36px;bottom:calc(72px + env(safe-area-inset-bottom));right:14px}
  .cmt-floating-btn svg{width:15px;height:15px}
}
@media(max-width:480px){
  .cmt-floating-btn{width:30px;height:30px;bottom:calc(66px + env(safe-area-inset-bottom));right:10px}
  .cmt-floating-btn svg{width:12px;height:12px}
}

/* ═══════════════════════════════════════
   COMMENT PANEL (parent page)
   ═══════════════════════════════════════ */
.cmt-panel{position:fixed;bottom:124px;right:24px;width:340px;max-height:60vh;background:rgba(246,243,238,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--border-light);border-radius:12px;box-shadow:0 8px 36px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.04);z-index:9994;display:flex;flex-direction:column;opacity:0;transform:translateY(12px) scale(.96);transform-origin:bottom right;transition:opacity .25s var(--ease-out),transform .28s cubic-bezier(.22,1,.36,1);visibility:hidden;pointer-events:none}
.cmt-panel.sh{opacity:1;transform:translateY(0) scale(1);visibility:visible;pointer-events:auto}
.cmt-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
.cmt-hd-title{font-size:.68rem;color:var(--text);letter-spacing:.04em;font-weight:500}
.cmt-hd-title .cmt-count{font-size:.55rem;color:var(--text-lighter);margin-left:4px;font-weight:400}
.cmt-close{width:22px;height:22px;border-radius:50%;background:transparent;border:none;cursor:pointer;font-size:.55rem;color:var(--text-lighter);display:flex;align-items:center;justify-content:center;transition:all .2s;padding:0;line-height:1}
.cmt-close:hover{background:rgba(0,0,0,.05);color:var(--text)}
.cmt-body{flex:1;overflow-y:auto;padding:10px 16px;min-height:80px}
.cmt-body::-webkit-scrollbar{width:2px}
.cmt-body::-webkit-scrollbar-thumb{background:var(--text-lighter);border-radius:2px}
.cmt-loading{text-align:center;padding:30px 0;font-size:.65rem;color:var(--text-lighter)}
.cmt-none{text-align:center;padding:30px 0;font-size:.65rem;color:var(--text-lighter);line-height:1.8}
.cmt-item{margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--border-light)}
.cmt-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}
.cmt-author{font-size:.65rem;font-weight:500;color:var(--text);line-height:1.4}
.cmt-date{font-size:.5rem;color:var(--text-lighter);margin:1px 0 4px}
.cmt-text{font-size:.63rem;color:var(--text-light);line-height:1.65;white-space:pre-wrap;word-break:break-word}
.cmt-reply-btn{font-size:.55rem;color:var(--gold);cursor:pointer;margin-top:3px;display:inline-block;transition:color .2s}
.cmt-reply-btn:hover{color:#b8894a}
.cmt-replies{margin-top:8px;margin-left:14px;padding-left:10px;border-left:2px solid var(--gold-light)}
.cmt-reply-item{margin-bottom:8px;padding-bottom:6px}
.cmt-reply-item:last-child{margin-bottom:0}
.cmt-reply-item .cmt-date{font-size:.48rem}

.cmt-reply-bar{display:none;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--gold-subtle);border-bottom:1px solid var(--border);font-size:.58rem;color:var(--text-light);flex-shrink:0}
.cmt-reply-bar button{background:none;border:none;color:var(--gold);cursor:pointer;font-size:.55rem;padding:2px 6px;border-radius:3px;transition:all .2s}
.cmt-reply-bar button:hover{background:rgba(196,155,94,.1)}

.cmt-foot{border-top:1px solid var(--border);padding:8px 12px 10px;background:var(--bg-alt);flex-shrink:0}
.cmt-foot-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.cmt-foot-row:last-child{margin-bottom:0}
.cmt-name-inp{flex:1;border:1px solid var(--border);border-radius:6px;padding:5px 10px;font-size:.6rem;font-family:var(--sans);outline:none;background:var(--bg-card);color:var(--text);transition:border-color .2s;height:28px}
.cmt-name-inp:focus{border-color:var(--gold-light)}
.cmt-name-inp::placeholder{color:var(--text-lighter);font-weight:300}
.cmt-auth-status{font-size:.55rem;color:var(--text-lighter);white-space:nowrap}
.cmt-login-link,.cmt-logout-link{color:var(--gold);text-decoration:none;font-size:.55rem}
.cmt-login-link:hover,.cmt-logout-link:hover{text-decoration:underline}
.cmt-logged-name{color:var(--text);font-weight:500}
.cmt-foot-input{align-items:flex-end}
.cmt-input{flex:1;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:.6rem;font-family:var(--sans);outline:none;background:var(--bg-card);color:var(--text);resize:none;transition:border-color .2s;line-height:1.5;min-height:28px}
.cmt-input:focus{border-color:var(--gold-light)}
.cmt-input::placeholder{color:var(--text-lighter);font-weight:300}
.cmt-send{width:32px;height:32px;border-radius:50%;border:none;background:var(--gold);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0}
.cmt-send:hover{background:#b8894a;transform:scale(1.05)}
.cmt-send svg{width:14px;height:14px}
.cmt-send:disabled{opacity:.5;cursor:default;transform:none}
.cmt-send.sending{opacity:.6}

@media(max-width:768px){
  .cmt-panel{right:14px;bottom:calc(116px + env(safe-area-inset-bottom));width:calc(100vw - 28px);max-height:50vh}
}
@media(max-width:480px){
  .cmt-panel{right:10px;bottom:calc(104px + env(safe-area-inset-bottom));width:calc(100vw - 20px);max-height:45vh}
}