@import url("https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500;7..72,600&display=swap");
/* ZLVOX Community — dark Stockflow editorial theme (standalone). */
:root{
  --bg:#161210; --surface:#1d1813; --surface2:#241e18;
  --border:rgba(243,237,224,.13);
  --text:#f3ede0; --text2:rgba(243,237,224,.62); --text3:rgba(243,237,224,.38);
  --accent:#e07b26; --accent-d:#c05e0b; --green:#a3c95c; --red:#ff9a8a;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",system-ui,sans-serif;line-height:1.6}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--border);background:var(--surface);flex-wrap:wrap}
.logo{font-family:"Instrument Serif",Georgia,serif;font-size:26px;color:var(--text);letter-spacing:.5px}
.logo span{color:var(--accent)}
.nav{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--text)}
.nav-form{display:inline;margin:0}
.nav-link{background:none;border:0;color:var(--text);font:inherit;cursor:pointer;padding:0}
.nav-link:hover{text-decoration:underline}
.wrap{max-width:1060px;margin:0 auto;padding:28px 20px 60px}
.page-title{font-family:"Instrument Serif",Georgia,serif;font-size:40px;line-height:1.15;margin:8px 0}
.page-sub{color:var(--text2);margin-top:0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card-body{padding:10px 12px}
  .card-body h2{font-size:15px}
  .card-caption{font-size:13px}
  .author-row{gap:7px;flex-wrap:wrap}
  .post-date{font-size:12px}
  .like-btn{padding:4px 10px;font-size:13px}
  .comment-link{font-size:13px}
}
.card{background:var(--surface);border:1px solid var(--border);border-radius:3px;overflow:hidden}
.card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;background:var(--surface2)}
.card-body{padding:14px 16px}
.card-body h2{font-size:19px;margin:0 0 6px;line-height:1.3}
.card-body h2 a{color:var(--text)}
.card-caption{color:var(--text2);margin:0 0 8px}
.meta{color:var(--text3);font-size:13px;margin:6px 0}
.badge{display:inline-block;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:1px 10px;font-size:12px;color:var(--text2)}
.card-actions{display:flex;gap:12px;align-items:center;margin-top:10px}
.like-btn{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:5px 14px;cursor:pointer;font:inherit;font-size:14px;text-decoration:none;display:inline-block}
.like-btn.liked{background:var(--accent);border-color:var(--accent);color:#161210;font-weight:700}
.comment-link{color:var(--text2);font-size:14px}
.inline-form{display:inline;margin:0}
.form{max-width:560px}
.form label{display:block;margin:16px 0;font-weight:500}
.form input[type=text],.form input[type=email],.form input[type=password],.form textarea,.form input[type=file]{width:100%;margin-top:6px;padding:11px 12px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:3px;font:inherit}
.btn{background:var(--accent);color:#161210;border:0;padding:12px 24px;border-radius:3px;font-weight:700;cursor:pointer;font:inherit}
.btn:hover{background:var(--accent-d)}
.btn-small{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:3px;padding:6px 12px;cursor:pointer;font:inherit;font-size:13px}
.btn-danger{background:transparent;border:1px solid var(--red);color:var(--red);border-radius:3px;padding:6px 12px;cursor:pointer;font:inherit;font-size:13px}
.error{color:var(--red)}
.flash{background:var(--surface2);border:1px solid var(--accent);border-radius:3px;padding:12px 16px}
.empty{color:var(--text2)}
.form-note{color:var(--text2)}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:28px;color:var(--text2)}
.post-img{width:100%;max-height:640px;object-fit:contain;background:var(--surface2);border:1px solid var(--border);border-radius:3px}
.post-caption{font-size:18px;white-space:pre-wrap}
.post-actions{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}
.comments{margin-top:32px}
.comment{background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:14px 16px;margin:12px 0}
.comment p{margin:6px 0}
.mod-row{display:flex;gap:16px;background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:14px;margin:12px 0;align-items:flex-start;flex-wrap:wrap}
.mod-row img{width:110px;height:110px;object-fit:cover;border-radius:3px}
.mod-row>div{flex:1;min-width:220px}
.mod-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ad-slot{min-height:90px;border:1px dashed var(--border);border-radius:3px;margin:20px 0;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:13px}
.ad-slot:empty::after{content:"AdSense ad slot — paste your ad code here"}
.footer{border-top:1px solid var(--border);padding:22px;text-align:center;color:var(--text3);font-size:14px}

/* --- UI refresh v2: homepage feed + post page, premium SVG icons --- */
.icon{width:17px;height:17px;flex:none}
.icon-sm{width:15px;height:15px}
.feed-head{margin:6px 0 24px}
.feed-head .page-title{margin-bottom:2px}
.card{transition:transform .18s ease,border-color .18s ease}
.card:hover{transform:translateY(-3px);border-color:rgba(224,123,38,.55)}
.card-media{display:block}
.author-row{display:flex;align-items:center;gap:9px;margin:10px 0 2px}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--surface2);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;color:var(--text2);flex:none}
.avatar .icon{width:15px;height:15px}
.author-name{font-weight:500}
.author-name a{color:var(--text)}
.post-date{color:var(--text3);font-size:13px}
.card-actions{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.like-btn{display:inline-flex;align-items:center;gap:6px}
.like-btn.liked svg{fill:#161210;stroke:#161210}
.comment-link{display:inline-flex;align-items:center;gap:6px}
.comment-link:hover{color:var(--text);text-decoration:none}
.pager a{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:7px 16px;color:var(--text)}
.pager a:hover{text-decoration:none;border-color:var(--accent)}
.back-link{display:inline-flex;align-items:center;gap:7px;color:var(--text2);margin-bottom:18px;font-size:14px}
.back-link:hover{color:var(--accent);text-decoration:none}
.post-wrap{max-width:780px;margin:0 auto}
.post-card{background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden}
.post-card .post-img{border:0;border-radius:0;max-height:720px}
.post-body{padding:22px 24px 24px}
.post-title{font-family:"Instrument Serif",Georgia,serif;font-size:36px;line-height:1.15;margin:4px 0 6px}
.icon-btn{display:inline-flex;align-items:center;gap:7px;background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:7px 15px;cursor:pointer;font:inherit;font-size:14px}
.icon-btn:hover{border-color:var(--accent)}
.icon-btn.danger{border-color:rgba(255,154,138,.5);color:var(--red);background:transparent}
.icon-btn.small{padding:5px 12px;font-size:13px}
.comments h2{display:flex;align-items:center;gap:9px;font-size:22px}
.comment-head{display:flex;align-items:center;gap:9px}
.comment-body{margin:10px 0 4px}
.comment-del{margin-top:8px}
.btn{display:inline-flex;align-items:center;gap:8px}
.form input:focus,.form textarea:focus{border-color:var(--accent);outline:none}
@media (max-width:600px){.post-body{padding:16px}.post-title{font-size:28px}}

/* --- Admin profile: DP + verified tick --- */
.verified{width:18px;height:18px;vertical-align:-3px;margin-left:4px;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.avatar-lg{width:64px;height:64px}
.avatar-lg .icon{width:28px;height:28px}
.profile-head{display:flex;gap:16px;align-items:center;margin:8px 0 20px}
.profile-head .page-title{margin:0}
.profile-admin-name{font-size:20px}
.nav .avatar{width:26px;height:26px}
.nav .avatar .icon{width:13px;height:13px}
.nav-user{display:inline-flex;align-items:center;gap:7px}
.mt12{margin-top:12px}

/* --- Live search bar --- */
.search-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 8px 8px 18px;margin:18px 0 24px;transition:border-color .2s ease,box-shadow .2s ease}
.search-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,123,38,.15)}
.search-bar:focus-within .icon{color:var(--accent)}
.search-bar .icon{color:var(--text3);transition:color .2s ease}
.search-bar input{flex:1;background:none;border:0;color:var(--text);font:inherit;font-size:15px;outline:none;min-width:0}
.search-bar input::placeholder{color:var(--text3)}
.search-clear{color:var(--text2);font-size:22px;line-height:1}
.search-clear:hover{color:var(--text);text-decoration:none}
.search-btn{background:var(--accent);color:#161210;border:0;border-radius:999px;padding:9px 20px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;flex:none;transition:background .2s ease}
.search-btn:hover{background:var(--accent-d)}

/* --- Post body paragraphs (drop cap removed — clean reading style) ---
   .post-caption keeps pre-wrap so a caption rendered as ONE block still shows
   its line breaks; split paragraphs (.post-para) use normal wrapping. */
.post-caption,.post-caption .post-para{white-space:normal}
.post-para{margin:0 0 1.3em}
.post-para:last-child{margin-bottom:0}

/* =====================================================================
   POST PAGE — PREMIUM v3 (progress bar, media, meta chips, author card,
   replies, related, lightbox, toast)
   ===================================================================== */
html{scroll-behavior:smooth}
.read-progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent-d),var(--accent),#f4b26a);z-index:200;transition:width .08s linear;box-shadow:0 0 10px rgba(224,123,38,.6)}

.post-wrap{max-width:800px}
.status-banner{display:flex;gap:12px;align-items:flex-start;border-radius:8px;padding:14px 16px;margin-bottom:18px;border:1px solid var(--accent);background:rgba(224,123,38,.08)}
.status-banner .icon{width:20px;height:20px;color:var(--accent);margin-top:2px}
.status-banner strong{display:block;text-transform:capitalize}
.status-banner span{color:var(--text2);font-size:14px}
.status-rejected{border-color:rgba(255,154,138,.6);background:rgba(255,154,138,.08)}
.status-rejected .icon{color:var(--red)}

.post-card{border-radius:12px;box-shadow:0 18px 50px -24px rgba(0,0,0,.7)}
.post-media{position:relative;cursor:zoom-in;background:radial-gradient(120% 100% at 50% 0%,#2a221a 0%,var(--surface2) 70%);overflow:hidden}
.post-media .post-img{display:block;margin:0 auto;transition:transform .5s ease}
.post-media:hover .post-img{transform:scale(1.015)}
.media-expand{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:6px;background:rgba(22,18,16,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);border:1px solid var(--border);border-radius:999px;padding:7px 14px;font:inherit;font-size:13px;cursor:pointer;opacity:0;transform:translateY(6px);transition:all .2s ease}
.post-media:hover .media-expand,.media-expand:focus-visible{opacity:1;transform:none}
@media (hover:none){.media-expand{opacity:1;transform:none}}

.post-body{padding:26px 30px 28px}
.post-title{font-size:clamp(28px,4.4vw,36px);line-height:1.2;letter-spacing:-.1px;margin:0 0 14px}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding-bottom:18px;margin-bottom:22px;border-bottom:1px solid var(--border)}
.post-meta .author-row{margin:0;padding-right:6px}
.meta-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:4px 12px;font-size:13px;color:var(--text2)}
.meta-chip .icon{color:var(--text3)}
.meta-link:hover{color:var(--text);border-color:var(--accent);text-decoration:none}
.meta-link:hover .icon{color:var(--accent)}
.post-caption{font-family:"Literata",Georgia,"Times New Roman",serif;font-size:17.5px;line-height:1.85;font-weight:400;letter-spacing:.005em;color:rgba(243,237,224,.88);overflow-wrap:anywhere;text-wrap:pretty;-webkit-font-smoothing:antialiased}

/* Action toolbar */
.post-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--border)}
.actions-left,.actions-right{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.icon-btn{text-decoration:none;transition:all .18s ease}
.icon-btn:hover{text-decoration:none;transform:translateY(-1px);background:rgba(224,123,38,.1)}
.icon-btn.ghost{background:transparent}
.icon-btn.danger:hover{background:rgba(255,154,138,.1);border-color:var(--red)}
.like-btn{padding:7px 16px;transition:all .18s ease}
.like-btn:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-1px)}
.like-btn.liked svg{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
.icon-btn:focus-visible,.like-btn:focus-visible,.btn:focus-visible,.media-expand:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Author card */
.author-card{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin-top:20px}
.author-card-avatar .avatar{width:56px;height:56px}
.author-card-avatar .avatar .icon{width:24px;height:24px}
.author-card-info{flex:1;min-width:180px;display:flex;flex-direction:column;gap:2px}
.author-card-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.author-card-namerow{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.author-card-namerow .verified{margin-left:0}
.author-card-name{font-family:"Instrument Serif",Georgia,serif;font-size:24px;color:var(--text);line-height:1.2}
.author-card-stat{display:inline-flex;align-items:center;gap:6px;color:var(--text2);font-size:13px;margin-top:2px}

/* Replies */
.comments h2{font-size:24px;margin-bottom:16px}
.count-pill{background:var(--accent);color:#161210;border-radius:999px;font-family:"DM Sans",system-ui,sans-serif;font-size:13px;font-weight:700;padding:1px 10px}
.comment{border-radius:10px;padding:16px 18px;transition:border-color .2s ease,background .2s ease;scroll-margin-top:90px}
.comment:hover{border-color:rgba(243,237,224,.22)}
.comment:target{border-color:var(--accent);background:rgba(224,123,38,.07)}
.comment-body{line-height:1.7;overflow-wrap:anywhere}
.op-tag{background:rgba(224,123,38,.15);color:var(--accent);border:1px solid rgba(224,123,38,.4);border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:1px 8px}
.comment-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:1px dashed var(--border);border-radius:12px;padding:32px 16px;color:var(--text2)}
.empty-state p{margin:0}
.empty-icon{width:30px;height:30px;color:var(--text3)}

.reply-box{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;margin-top:20px;transition:border-color .2s ease,box-shadow .2s ease}
.reply-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,123,38,.14)}
.reply-box-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.reply-box textarea{width:100%;background:transparent;border:0;outline:none;resize:none;color:var(--text);font:inherit;line-height:1.6;min-height:84px}
.reply-box textarea::placeholder{color:var(--text3)}
.reply-box-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--border);padding-top:12px;margin-top:8px}
.char-count{font-size:13px;color:var(--text3)}
.char-count .hint{display:none}
@media (min-width:700px){.char-count .hint{display:inline}}
.login-cta{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px dashed var(--border);border-radius:12px;padding:18px 20px;margin-top:20px}
.login-cta .icon{width:20px;height:20px;color:var(--accent)}
.login-cta p{margin:0}

/* Related */
.related{margin-top:40px}
.related h2{display:flex;align-items:center;gap:9px;font-size:22px;margin-bottom:14px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.related-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:10px;overflow:hidden;color:var(--text);transition:transform .18s ease,border-color .18s ease}
.related-card:hover{transform:translateY(-3px);border-color:rgba(224,123,38,.55);text-decoration:none}
.related-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--surface2)}
.related-card span{display:block;padding:10px 12px;font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:300;background:rgba(10,8,6,.94);display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .2s ease;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px;box-shadow:0 20px 80px rgba(0,0,0,.7)}
.lb-close{position:absolute;top:16px;right:16px;width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer}
.lb-close:hover{border-color:var(--accent);color:var(--accent)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* Back to top + toast */
.to-top{position:fixed;right:20px;bottom:24px;width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#161210;border:0;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45);opacity:0;visibility:hidden;transform:translateY(10px);transition:all .25s ease;z-index:150}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--accent-d)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--accent);color:var(--text);border-radius:999px;padding:10px 18px;font-size:14px;opacity:0;pointer-events:none;transition:all .25s ease;z-index:400}
.toast .icon{color:var(--green)}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:600px){
  .post-body{padding:18px 16px 20px}
  .post-title{font-size:27px}
  .post-caption{font-size:16.5px;line-height:1.8}
  .actions-left,.actions-right{width:100%}
  .actions-right{justify-content:flex-start}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .related-card:nth-child(3){display:none}
  .author-card{padding:16px}
  .author-card .icon-btn{width:100%;justify-content:center}
  .to-top{right:14px;bottom:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   ENHANCED FEED (appended after v3 — hero, trending, sort tabs, saved,
   list view, pager numbers). v3's read-progress / to-top / toast above
   are kept as-is; this block does NOT redefine them.
   ===================================================================== */
.icon-xs{width:12px;height:12px}
mark{background:rgba(224,123,38,.35);color:inherit;border-radius:2px;padding:0 1px}
.hero{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:26px 28px;margin:6px 0 20px;flex-wrap:wrap}
.hero-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.hero .page-title{margin:6px 0 4px}
.hero-stats{display:flex;gap:18px;margin-top:12px;flex-wrap:wrap}
.stat{display:inline-flex;align-items:center;gap:7px;color:var(--text2);font-size:14px}
.stat strong{color:var(--text)}
.hero-cta{flex:none}
.search-ico{display:inline-flex;position:relative;align-items:center}
.search-ico .spin{display:none;position:absolute;inset:0;animation:pvspin 1s linear infinite}
.search-bar.is-loading .search-ico .spin{display:block}
.search-bar.is-loading .search-ico svg:first-child{opacity:0}
@keyframes pvspin{to{transform:rotate(360deg)}}
.search-clear{background:none;border:0;cursor:pointer;padding:0;display:inline-flex;align-items:center}
.kbd{border:1px solid var(--border);border-bottom-width:2px;border-radius:5px;padding:1px 7px;font-family:inherit;font-size:12px;color:var(--text3);flex:none}
.trending{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:2px 0 4px}
.trending-label{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;font-weight:700}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}
.tag-chip{border:1px solid var(--border);background:var(--surface);border-radius:999px;padding:5px 13px;color:var(--text2);font-size:13px}
.tag-chip:hover{color:var(--accent);border-color:var(--accent);text-decoration:none}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:20px 0 14px}
.result-summary{color:var(--text2);font-size:14px}
.result-summary strong{color:var(--text)}
.clear-link{display:inline-flex;align-items:center;gap:5px;margin-left:10px;color:var(--text2)}
.clear-link:hover{color:var(--text);text-decoration:none}
.toolbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sort-tabs{display:flex;gap:6px;flex-wrap:wrap}
.sort-tabs a{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;border:1px solid var(--border);color:var(--text2);font-size:13px}
.sort-tabs a:hover{text-decoration:none;border-color:var(--accent)}
.sort-tabs a.active{background:var(--accent);border-color:var(--accent);color:#161210;font-weight:700}
.tool-btn{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:6px 13px;cursor:pointer;font:inherit;font-size:13px}
.tool-btn.active{border-color:var(--accent);color:var(--accent)}
.mini-count{background:var(--surface2);border-radius:999px;padding:1px 7px;font-size:12px}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden}
.view-toggle button{background:none;border:0;color:var(--text2);padding:7px 11px;cursor:pointer;display:flex;align-items:center}
.view-toggle button.active{background:var(--surface2);color:var(--text)}
#search-results.is-loading{opacity:.55}
.card-media-wrap{position:relative}
.chip-new{position:absolute;top:10px;left:10px;background:var(--accent);color:#161210;font-size:12px;font-weight:700;border-radius:999px;padding:3px 10px;display:inline-flex;gap:4px;align-items:center}
.save-btn{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:rgba(22,18,16,.65);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.save-btn svg{width:16px;height:16px}
.save-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#161210}
.copy-btn{background:none;border:0;color:var(--text2);cursor:pointer;display:inline-flex;padding:2px}
.copy-btn:hover{color:var(--text)}
.copy-btn svg{width:17px;height:17px}
#search-results.show-saved .card{display:none}
#search-results.show-saved .card.is-saved{display:block}
#search-results.view-list .grid{grid-template-columns:1fr}
#search-results.view-list .card{display:flex}
#search-results.view-list .card-media-wrap{flex:0 0 260px}
#search-results.view-list .card-media,#search-results.view-list .card-media img{height:100%}
#search-results.view-list .card img{aspect-ratio:auto}
#search-results.view-list.show-saved .card.is-saved{display:flex}
.saved-empty{text-align:center;color:var(--text2);padding:30px 10px}
.pg-nums{display:flex;gap:6px;align-items:center}
.pg-num{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 8px;border-radius:999px;border:1px solid var(--border);color:var(--text)}
.pg-num:hover{text-decoration:none;border-color:var(--accent)}
.pg-num.current{background:var(--accent);border-color:var(--accent);color:#161210;font-weight:700}
.pg-gap{color:var(--text3)}
.pg-nav.disabled{opacity:.45;pointer-events:none}
.empty-state.big{text-align:center;padding:48px 20px}
.empty-state.big h3{margin:12px 0 4px}
.empty-state.big p{color:var(--text2)}
.empty-state.big .empty-icon{width:44px;height:44px}
.fab{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:50%;background:var(--accent);color:#161210;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.4);z-index:40}
.fab:hover{text-decoration:none}
.fab svg{width:22px;height:22px}
.fab ~ .to-top{bottom:84px}
@media (max-width:600px){
  .hero{padding:20px}
  .toolbar{flex-direction:column;align-items:flex-start}
  #search-results.view-list .card{flex-direction:column}
  #search-results.view-list .card-media-wrap{flex:none;width:100%}
  .kbd{display:none}
}

/* =====================================================================
   PREMIUM TOPBAR (sticky, glass blur, pill nav, accent CTA)
   ===================================================================== */
.topbar{position:sticky;top:0;z-index:100;background:rgba(29,24,19,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(243,237,224,.08),0 12px 32px -20px rgba(0,0,0,.8);padding:12px 24px}
.logo{display:inline-flex;align-items:baseline;font-size:28px}
.logo:hover{text-decoration:none}
.logo-dot{color:var(--accent)}
.logo .logo-tag{font-family:"DM Sans",system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text2);border:1px solid var(--border);border-radius:999px;padding:4px 9px;margin-left:10px;align-self:center}
.nav{gap:8px}
.nav-pill{display:inline-flex;align-items:center;gap:7px;color:var(--text2);border:1px solid transparent;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:500;transition:all .18s ease}
.nav-pill:hover{color:var(--text);background:var(--surface2);border-color:var(--border);text-decoration:none}
.nav-pill.active{color:var(--text);background:var(--surface2);border-color:rgba(224,123,38,.5)}
.nav-pill .icon{width:15px;height:15px}
.nav-pill.nav-cta{background:var(--accent);border-color:var(--accent);color:#161210;font-weight:700}
.nav-pill.nav-cta:hover{background:var(--accent-d);border-color:var(--accent-d);color:#161210}
.nav-pill.nav-cta.active{box-shadow:0 0 0 3px rgba(224,123,38,.25)}
.nav-user{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:4px 13px 4px 4px;color:var(--text);font-size:14px;font-weight:500}
.nav-user:hover{text-decoration:none;border-color:rgba(224,123,38,.55)}
.nav-user .avatar{width:26px;height:26px}
.nav-user .avatar .icon{width:13px;height:13px}
.nav-logout{display:inline-flex;align-items:center;gap:7px;background:none;border:1px solid transparent;color:var(--text2);border-radius:999px;padding:7px 13px;font:inherit;font-size:14px;cursor:pointer;transition:all .18s ease}
.nav-logout:hover{color:var(--red);border-color:rgba(255,154,138,.4)}
.nav-logout .icon{width:15px;height:15px}
@media (max-width:640px){
  .topbar{padding:10px 14px}
  .logo{font-size:24px}
  .logo .logo-tag{display:none}
  .nav{gap:6px}
  .nav-pill{padding:6px 11px;font-size:13px}
  .nav-user-name{display:none}
  .nav-user{padding:4px}
}

/* =====================================================================
   CREATE PAGE — premium UI/UX (dropzone, counters, live preview, tips)
   ===================================================================== */
.create-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.create-main{min-width:0}
.create-form .field{margin:20px 0}
.field-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
.field-head label,.field-label{font-weight:500}
.create-form input[type=text],.create-form textarea{width:100%;padding:11px 12px;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:3px;font:inherit}
.create-form input[type=text]:focus,.create-form textarea:focus{border-color:var(--accent);outline:none}
.count{font-size:13px;color:var(--text3);flex:none}
.count.near{color:var(--accent)}
.count.full{color:var(--red)}
.field-hint{color:var(--text3);font-size:13px;margin:6px 0 0}
.dropzone{position:relative;border:1.5px dashed var(--border);border-radius:8px;padding:24px 20px;text-align:center;cursor:pointer;background:var(--surface);transition:border-color .2s ease,background .2s ease}
.dropzone:hover,.dropzone.drag{border-color:var(--accent);background:rgba(224,123,38,.06)}
.dropzone:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dropzone input{display:block;margin:14px auto 0}
.dropzone.js input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.dz-empty .icon{width:34px;height:34px;color:var(--accent);margin:0 auto 8px}
.dz-empty strong{display:block;font-size:16px}
.dz-empty span{display:block;color:var(--text2);font-size:14px;margin-top:2px}
.dz-empty .dz-meta{font-size:13px;color:var(--text3);margin-top:8px}
.dz-preview img{max-width:100%;max-height:320px;object-fit:contain;margin:0 auto;display:block;border-radius:3px}
.dz-info{display:flex;justify-content:center;gap:12px;color:var(--text2);font-size:13px;margin-top:10px;flex-wrap:wrap;overflow-wrap:anywhere}
.dz-remove{margin-top:12px;background:none;border:1px solid rgba(255,154,138,.5);color:var(--red);border-radius:999px;padding:5px 14px;cursor:pointer;font:inherit;font-size:13px}
.dz-remove:hover{background:rgba(255,154,138,.1)}
.dz-error{color:var(--red);font-size:14px;margin-top:8px}
.field-error{color:var(--red);font-size:14px;margin-top:6px}
.tag-suggest{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px}
.tag-suggest-label{color:var(--text3);font-size:13px}
.tag-suggest button{background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:999px;padding:4px 12px;cursor:pointer;font:inherit;font-size:13px}
.tag-suggest button:hover{color:var(--accent);border-color:var(--accent)}
.btn-lg{padding:14px 28px;font-size:16px}
.create-form .btn:disabled{opacity:.65;cursor:wait}
.preview-card{position:sticky;top:84px}
.preview-label{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);display:block;margin-bottom:10px}
.preview-media{background:var(--surface2);min-height:200px;display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:14px;padding:12px}
.preview-media img{width:100%;max-height:420px;object-fit:contain;display:block}
.preview-empty{text-align:center}
.tips{margin-top:18px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:16px 18px}
.tips strong{display:block;margin-bottom:6px}
.tips ul{margin:6px 0 0;padding-left:18px;color:var(--text2);font-size:14px}
.tips li{margin:4px 0}
@media (max-width:900px){
  .create-layout{grid-template-columns:1fr}
  .preview-card{position:static}
}

/* =====================================================================
   AUTH PAGES (login / register)
   ===================================================================== */
.auth-wrap{max-width:460px;margin:24px auto 0}
.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:30px 30px 26px;box-shadow:0 18px 50px -24px rgba(0,0,0,.7)}
.auth-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.auth-title{font-family:"Instrument Serif",Georgia,serif;font-size:36px;line-height:1.15;margin:0 0 6px}
.auth-sub{color:var(--text2);margin:0 0 22px}
.auth-error{background:rgba(255,154,138,.1);border:1px solid rgba(255,154,138,.5);color:var(--red);border-radius:6px;padding:11px 14px;margin:0 0 12px;font-size:14px}
.auth-form .field{margin:16px 0}
.auth-form label{display:block;font-weight:500;margin-bottom:6px}
.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=password]{width:100%;padding:12px 13px;background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:6px;font:inherit}
.auth-form input:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px rgba(224,123,38,.14)}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:46px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--text3);cursor:pointer;padding:6px;display:flex}
.pw-toggle:hover{color:var(--text)}
.pw-toggle .icon{width:18px;height:18px}
.auth-form .btn{width:100%;justify-content:center;padding:13px;margin-top:8px;font-size:16px}
.auth-switch{text-align:center;color:var(--text2);font-size:14px;margin:18px 0 0}
.pw-meter{height:6px;background:var(--surface2);border-radius:999px;margin-top:10px;overflow:hidden}
.pw-meter i{display:block;height:100%;border-radius:999px;transition:width .25s ease,background .25s ease}
.pw-meter-label{font-size:13px;color:var(--text3);margin:6px 0 0}
.pw-meter-label b{font-weight:700}
.pw-weak{color:var(--red)}
.pw-fair{color:var(--accent)}
.pw-good{color:#f4b26a}
.pw-strong{color:var(--green)}
@media (max-width:520px){.auth-card{padding:24px 20px}}

/* =====================================================================
   ADMIN PROFILE (dashboard, stats, members, my posts, announcement)
   ===================================================================== */
.announce-bar{background:var(--accent);color:#161210;text-align:center;font-weight:700;padding:10px 16px;font-size:14px}
.stat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:18px 0}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px}
.stat-card b{font-size:28px;display:block;line-height:1.1}
.stat-card span{color:var(--text2);font-size:13px}
a.stat-card{color:inherit;text-decoration:none}
a.stat-card:hover{border-color:var(--accent)}
.quick-actions{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 0}
a.btn-small,a.btn-danger{text-decoration:none;display:inline-block}
.admin-section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;margin:22px 0}
.admin-section h2{font-family:"Instrument Serif",Georgia,serif;font-size:26px;margin:0 0 14px}
.admin-section .form{max-width:640px}
.check-line{display:flex;gap:8px;align-items:center;font-weight:500;margin:14px 0}
.check-line input{width:auto}
.dp-preview{width:120px;height:120px;border-radius:50%;object-fit:cover;border:1px solid var(--border);display:none;margin:10px 0}
.cover-current{width:100%;max-height:220px;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;margin-bottom:14px}
.cover-preview{width:100%;max-height:180px;object-fit:cover;border-radius:8px;display:none;margin:10px 0}
.profile-cover{border-radius:12px;overflow:hidden;margin:0 0 18px;border:1px solid var(--border)}
.profile-cover img{width:100%;max-height:280px;object-fit:cover;display:block}
.profile-bio{color:var(--text2);white-space:pre-wrap;max-width:640px;margin:0 0 4px}
.social-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.member-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.member-meta{flex:1;min-width:0}
.member-meta small{display:block;color:var(--text3);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badge-blocked{background:rgba(255,154,138,.15);color:var(--red);border:1px solid rgba(255,154,138,.5);border-radius:999px;padding:1px 9px;font-size:12px;font-weight:700;margin-left:6px}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.admin-section{padding:18px 16px}.member-row{flex-wrap:wrap}}

/* =====================================================================
   PROFILE PAGE (Facebook-style: cover + overlapping avatar + tabs)
   ===================================================================== */
.profile-cover img{max-height:340px}
.profile-head-overlap{margin:-52px 0 0;padding:0 24px 4px;align-items:flex-end}
.avatar-xl{width:132px;height:132px;border:4px solid var(--bg);flex:none}
.avatar-xl .icon{width:56px;height:56px}
.profile-head-text{min-width:0}
.profile-head-overlap .profile-name{font-size:32px;line-height:1.1;margin:0}
.profile-meta{color:var(--text2);margin:6px 0 0}
.profile-bio{margin:0 0 16px}
.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 20px}
.profile-tabs{display:flex;gap:4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin:0 0 24px}
.tab-btn{background:none;border:0;border-bottom:3px solid transparent;color:var(--text2);font:inherit;font-weight:700;padding:12px 18px;cursor:pointer;margin-bottom:-1px}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-panel[hidden]{display:none}
.about-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:640px}
.about-card h2{font-family:"Instrument Serif",Georgia,serif;font-size:26px;margin:0 0 14px}
.about-rows{margin:18px 0 0}
.about-rows div{display:flex;gap:16px;padding:9px 0;border-top:1px solid var(--border)}
.about-rows dt{color:var(--text3);min-width:130px}
.about-rows dd{margin:0}
@media (max-width:700px){
  .profile-cover img{max-height:200px}
  .profile-head-overlap{margin-top:-36px;padding:0 12px 4px}
  .avatar-xl{width:96px;height:96px}
  .profile-head-overlap .profile-name{font-size:26px}
  .about-rows dt{min-width:100px}
}

/* =====================================================================
   MEMBER FEATURES (light theme, gallery, bell, badges, leaderboard,
   notifications, contest banner, hashtag links, extra images)
   ===================================================================== */
html.light{--bg:#f5f0e6;--surface:#fffdf7;--surface2:#ece4d3;--border:rgba(22,18,16,.14);--text:#221c15;--text2:rgba(34,28,21,.66);--text3:rgba(34,28,21,.42)}
html.light .topbar{background:rgba(255,253,247,.88);box-shadow:0 1px 0 rgba(22,18,16,.08),0 12px 32px -20px rgba(0,0,0,.25)}
html.light .post-caption{color:rgba(34,28,21,.9)}
html.light .comment:hover{border-color:rgba(22,18,16,.22)}
html.light .ico-sun{display:none}
html:not(.light) .ico-moon{display:none}
.theme-toggle{background:transparent;color:var(--text);font:inherit;cursor:pointer;display:inline-flex;align-items:center}
.theme-toggle .icon{width:18px;height:18px}
.nav-bell{position:relative}
.bell-count{position:absolute;top:-6px;right:-4px;background:var(--red);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 6px;line-height:1.4}
.gallery-thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gallery-thumb{border:2px solid transparent;padding:0;background:none;cursor:pointer;border-radius:6px;overflow:hidden}
.gallery-thumb.active{border-color:var(--accent)}
.gallery-thumb img{width:72px;height:72px;object-fit:cover;display:block}
.icon-btn.saved{border-color:var(--accent);color:var(--accent)}
.creator-badge{background:rgba(224,123,38,.15);color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:1px 10px;font-size:12px;font-weight:700;margin-left:8px;vertical-align:middle}
.leader-row,.notif-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--border)}
.leader-rank{font-family:"Instrument Serif",Georgia,serif;font-size:26px;width:32px;text-align:center;color:var(--text3)}
.leader-points{margin-left:auto;text-align:right;white-space:nowrap}
.leader-points b{font-size:20px}
.contest-banner{display:flex;align-items:stretch;justify-content:space-between;gap:14px 18px;flex-wrap:wrap;background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid rgba(224,123,38,.55);border-radius:12px;padding:14px 16px;margin:0 0 20px}
.contest-side{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap;flex:1 1 260px;justify-content:space-between}
.contest-banner.has-winner .contest-side{flex-direction:column;align-items:flex-start;justify-content:center;gap:10px}
.contest-theme{display:inline-flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.45;min-width:0}
.contest-theme .icon{margin-top:3px;color:var(--accent)}
.contest-theme strong{overflow-wrap:anywhere}
.contest-join{display:inline-flex;align-items:center;gap:7px;margin-left:auto;font-weight:700;background:var(--accent);color:#161210;border-radius:999px;padding:8px 16px;font-size:14px;transition:background .18s ease,transform .18s ease}
.contest-join:hover{background:var(--accent-d);color:#161210;text-decoration:none;transform:translateY(-1px)}
.contest-banner.has-winner .contest-join{margin-left:0}
.contest-winner-card{display:flex;align-items:center;gap:14px;flex:1 1 300px;min-width:0;color:var(--text);background:rgba(163,201,92,.08);border:1px solid rgba(163,201,92,.4);border-radius:10px;padding:10px;transition:border-color .18s ease,transform .18s ease}
.contest-winner-card:hover{text-decoration:none;border-color:var(--green);transform:translateY(-2px)}
.contest-winner-img{width:76px;height:76px;flex:none;object-fit:cover;border-radius:8px;background:var(--surface2)}
.contest-winner-info{display:flex;flex-direction:column;gap:2px;min-width:0}
.contest-winner-label{display:inline-flex;align-items:center;gap:6px;color:var(--green);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.contest-winner-title{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:22px;line-height:1.2;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.contest-winner-by{color:var(--text2);font-size:13px}
@media (max-width:600px){
  .contest-banner{padding:12px}
  .contest-winner-img{width:64px;height:64px}
  .contest-winner-title{font-size:19px}
  .contest-side,.contest-banner.has-winner .contest-side{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:10px}
  .contest-join,.contest-banner.has-winner .contest-join{width:100%;justify-content:center;min-height:44px;margin-left:0}
}
.extra-preview{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.extra-preview img{width:72px;height:72px;object-fit:cover;border-radius:6px;border:1px solid var(--border)}
.hash-link{color:var(--accent);text-decoration:none}
.hash-link:hover{text-decoration:underline}

/* =====================================================================
   PROFILE PAGE v3 (profile.php) — all selectors prefixed .pf-
   Immersive cover, sticky About sidebar, gallery / compact photo grid.
   The .pf-btn rules are shared with the settings page (.ms-).
   ===================================================================== */

/* Buttons (shared) */
.pf-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:999px;padding:9px 18px;min-height:40px;font:inherit;font-size:14px;font-weight:600;line-height:1;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;text-decoration:none;transition:background .18s ease,border-color .18s ease,color .18s ease}
.pf-btn:hover{border-color:var(--accent);text-decoration:none}
.pf-btn .icon{width:16px;height:16px}
.pf-btn-primary{background:var(--accent);border-color:var(--accent);color:#161210}
.pf-btn-primary:hover{background:var(--accent-d);border-color:var(--accent-d)}
.pf-btn-icon{width:40px;padding:0}
.pf-btn-following .pf-off{display:none}
.pf-btn-following .pf-on{display:inline-flex;align-items:center;gap:7px}
.pf-btn-following:hover,.pf-btn-following:focus-visible{border-color:rgba(255,154,138,.6);color:var(--red);background:rgba(255,154,138,.08)}
.pf-btn-following:hover .pf-on,.pf-btn-following:focus-visible .pf-on{display:none}
.pf-btn-following:hover .pf-off,.pf-btn-following:focus-visible .pf-off{display:inline}
.pf-btn:focus-visible,.pf-chip:focus-visible,.pf-seg button:focus-visible,.pf-post-link:focus-visible,.pf-own a:focus-visible,.pf-links a:focus-visible,.pf-glass:focus-visible,.pf-details summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.pf-follow-form{margin:0}

/* Hero */
.pf-hero{position:relative;height:clamp(200px,32vw,360px);border-radius:18px;overflow:hidden;background:var(--surface2);border:1px solid var(--border)}
.pf-hero img{width:100%;height:100%;object-fit:cover;display:block}
.pf-hero-empty{background:
  repeating-linear-gradient(135deg,transparent 0 16px,rgba(224,123,38,.07) 16px 17px),
  var(--surface2)}
.pf-hero-initial{position:absolute;left:50%;top:50%;transform:translate(-50%,-62%);font-family:"Instrument Serif",Georgia,serif;font-size:min(320px,48vw);line-height:1;color:var(--accent);opacity:.16;user-select:none}
.pf-hero-fade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,0) 52%,var(--bg) 100%);pointer-events:none}
.pf-glass{position:absolute;top:14px;right:14px;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font:inherit;font-size:13px;font-weight:600;color:#f3ede0;background:rgba(22,18,16,.55);border:1px solid rgba(243,237,224,.24);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;transition:background .18s ease}
.pf-glass:hover{background:rgba(22,18,16,.78)}
.pf-glass .icon{width:15px;height:15px}

/* Identity row */
.pf-ident{display:flex;align-items:flex-start;gap:24px;padding:0 28px;margin-top:-74px;position:relative}
.pf .pf-avatar,.pf-ident .pf-avatar{width:148px;height:148px;border:5px solid var(--bg);box-shadow:0 0 0 2px var(--accent);flex:none}
.pf-ident .pf-avatar .icon{width:60px;height:60px}
.pf-ident-text{flex:1;min-width:0;padding-top:88px}
.pf-name{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(34px,5vw,56px);line-height:1.05;overflow-wrap:anywhere}
.pf-name .verified{margin-left:0}
.pf-name .creator-badge{margin-left:2px;font-family:"DM Sans",system-ui,sans-serif}
.pf-stats{display:flex;flex-wrap:wrap;gap:4px 20px;margin:10px 0 0;color:var(--text2);font-size:15px}
.pf-stats b{color:var(--text);font-weight:700}
.pf-actions{display:flex;gap:8px;align-items:center;padding-top:94px;flex:none}

/* Body: sidebar + main */
.pf-body{display:grid;grid-template-columns:300px minmax(0,1fr);gap:32px;align-items:start;margin-top:30px}
.pf-aside{display:flex;flex-direction:column;gap:14px;position:sticky;top:84px}
.pf-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px}
.pf-box h2{margin:0 0 10px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:24px;line-height:1.2}
.pf-bio{margin:0;line-height:1.65;overflow-wrap:anywhere}
.pf-muted{margin:0;color:var(--text2);line-height:1.6}
.pf-links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0}
.pf-links a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:999px;padding:6px 13px;font-size:13px;color:var(--text2)}
.pf-links a:hover{color:var(--text);border-color:var(--accent);text-decoration:none}
.pf-links .icon{width:14px;height:14px}

.pf-details{padding:0}
.pf-details summary{display:flex;justify-content:space-between;align-items:center;list-style:none;cursor:pointer;padding:20px;border-radius:14px}
.pf-details summary::-webkit-details-marker{display:none}
.pf-details summary h2{margin:0}
.pf-details summary .icon{width:18px;height:18px;color:var(--text2);transition:transform .2s ease}
.pf-details[open] summary .icon{transform:rotate(180deg)}
.pf-rows{margin:0;padding:0 20px 8px}
.pf-rows>div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--border);font-size:14px}
.pf-rows dt{color:var(--text2)}
.pf-rows dd{margin:0;font-weight:600;text-align:right}

.pf-own{display:flex;flex-direction:column;gap:2px;padding:14px}
.pf-own h2{padding:6px 8px 2px;font-size:20px;margin:0 0 4px}
.pf-own a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;color:var(--text);font-size:14px}
.pf-own a:hover{background:var(--surface2);text-decoration:none}
.pf-own .icon{width:17px;height:17px;color:var(--accent)}

/* Toolbar */
.pf-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.pf-toolbar-l,.pf-toolbar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-section-title{margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:30px;line-height:1.1}
.pf-section-title span{font-family:"DM Sans",system-ui,sans-serif;font-size:14px;color:var(--text3);margin-left:6px}
.pf-chips{display:flex;gap:6px;flex-wrap:wrap}
.pf-chip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--border);border-radius:999px;padding:6px 14px;color:var(--text2);font:inherit;font-size:13px;cursor:pointer}
.pf-chip span{color:var(--text3);font-size:12px}
.pf-chip:hover{border-color:var(--accent);color:var(--text)}
.pf-chip.active{background:var(--surface2);border-color:var(--accent);color:var(--text)}
.pf-seg{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:3px;background:var(--surface)}
.pf-seg button{display:inline-flex;align-items:center;justify-content:center;background:none;border:0;border-radius:999px;padding:5px 14px;color:var(--text2);font:inherit;font-size:13px;cursor:pointer}
.pf-seg button:hover{color:var(--text)}
.pf-seg button.active{background:var(--accent);color:#161210;font-weight:700}
.pf-seg-icons button{padding:5px 9px}
.pf-seg-icons .icon{width:16px;height:16px}

/* Photo grid */
.pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.pf-grid.is-compact{grid-template-columns:repeat(4,1fr);gap:6px}
.pf-post{position:relative;border-radius:10px;overflow:hidden;background:var(--surface2);border:1px solid var(--border)}
.pf-post[hidden]{display:none}
.pf-grid.is-compact .pf-post{border-radius:6px}
.pf-post-link{position:relative;display:block;aspect-ratio:4/5;color:#f3ede0}
.pf-grid.is-compact .pf-post-link{aspect-ratio:1}
.pf-post-link:hover{text-decoration:none}
.pf-post-link img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.pf-post-link:hover img{transform:scale(1.04)}
.pf-post-noimg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text3)}
.pf-post-noimg .icon{width:34px;height:34px}
.pf-post-info{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:3px;padding:44px 14px 12px;background:linear-gradient(to top,rgba(14,10,7,.88),rgba(14,10,7,0));transition:opacity .2s ease}
.pf-post-title{font-family:"Instrument Serif",Georgia,serif;font-size:21px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.pf-post-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:rgba(243,237,224,.78)}
.pf-post-likes{display:inline-flex;align-items:center;gap:5px}
.pf-post-likes .icon{width:14px;height:14px}
.pf-grid.is-compact .pf-post-info{padding:30px 10px 8px;opacity:0}
.pf-grid.is-compact .pf-post-title{font-size:16px;-webkit-line-clamp:1}
.pf-grid.is-compact .pf-post-date{display:none}
.pf-grid.is-compact .pf-post-link:hover .pf-post-info,
.pf-grid.is-compact .pf-post-link:focus-visible .pf-post-info{opacity:1}
@media (hover:none){.pf-grid.is-compact .pf-post-info{opacity:1}}
.pf-status{position:absolute;top:10px;left:10px;border-radius:999px;padding:3px 11px;font-size:12px;font-weight:700;background:rgba(22,18,16,.78);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#f3ede0;border:1px solid rgba(243,237,224,.25)}
.pf-status-pending{border-color:var(--accent);color:#f4b26a}
.pf-status-rejected{border-color:rgba(255,154,138,.7);color:var(--red)}
.pf-empty-filter{text-align:center;color:var(--text2);padding:30px 10px}
.pf-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;border:1px dashed var(--border);border-radius:14px;padding:56px 20px}
.pf-empty>.icon{width:40px;height:40px;color:var(--text3)}
.pf-empty h2{margin:8px 0 0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:28px}
.pf-empty p{margin:0 0 14px;color:var(--text2);max-width:40ch}

/* Toast */
.pf-toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,16px);background:var(--surface2);border:1px solid var(--accent);color:var(--text);border-radius:999px;padding:10px 18px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;z-index:400}
.pf-toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:900px){
  .pf-body{grid-template-columns:1fr;gap:20px;margin-top:22px}
  .pf-aside{position:static}
  .pf-details summary{padding:16px 20px}
  .pf-grid.is-compact{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
  .pf-ident{flex-wrap:wrap;padding:0 4px;margin-top:-56px;gap:14px}
  .pf .pf-avatar,.pf-ident .pf-avatar{width:104px;height:104px;border-width:4px}
  .pf-ident .pf-avatar .icon{width:44px;height:44px}
  .pf-ident-text{flex:1 1 calc(100% - 120px);padding-top:64px}
  .pf-stats{gap:2px 14px;font-size:14px}
  .pf-actions{flex:1 1 100%;padding-top:0}
  .pf-actions .pf-follow-form,.pf-actions>.pf-btn{flex:1}
  .pf-actions .pf-btn{width:100%}
  .pf-glass span{display:none}
  .pf-glass{padding:9px}
  .pf-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .pf-grid.is-compact{grid-template-columns:repeat(3,1fr);gap:4px}
  .pf-post-title{font-size:18px}
  .pf-post-info{padding:36px 10px 10px}
  .pf-toolbar-r{width:100%;justify-content:space-between}
}
@media (min-width:901px){
  .pf-details summary{pointer-events:none;cursor:default}
  .pf-details summary .icon{display:none}
}

/* =====================================================================
   PROFILE SETTINGS (member-profile.php) — selectors prefixed .ms-
   Reuses .pf-btn / .pf-btn-primary from the profile page block.
   ===================================================================== */
.ms-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin:4px 0 22px}
.ms-head .page-title{margin:0 0 4px}
.ms-head .page-sub{margin:0;max-width:56ch}
.ms-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:28px;align-items:start}
.ms-main{display:flex;flex-direction:column;gap:20px;min-width:0}

.ms-alert{display:flex;gap:12px;align-items:flex-start;background:rgba(255,154,138,.09);border:1px solid rgba(255,154,138,.55);border-radius:12px;padding:14px 16px;margin:0 0 20px}
.ms-alert>.icon{width:20px;height:20px;color:var(--red);margin-top:2px}
.ms-alert strong{display:block;color:var(--red)}
.ms-alert ul{margin:4px 0 0;padding-left:18px;color:var(--text)}

.ms-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px}
.ms-card-head{margin:0 0 18px}
.ms-card-head h2{margin:0 0 4px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:26px;line-height:1.2}
.ms-card-head p{margin:0;color:var(--text2);font-size:14px}
.ms-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.pf-btn:disabled{opacity:.45;cursor:not-allowed}
.pf-btn:disabled:hover{border-color:var(--border)}
.pf-btn-primary:disabled:hover{border-color:var(--accent);background:var(--accent)}
.ms-danger{background:transparent;color:var(--red);border-color:rgba(255,154,138,.45)}
.ms-danger:hover{background:rgba(255,154,138,.09);border-color:var(--red)}
#dpRemove,#coverRemove{margin:0}

/* Hidden-but-focusable file inputs */
.ms-file{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.ms-file:focus-visible+.ms-pick .pf-btn,
.ms-file:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.ms-filename{color:var(--text3);font-size:13px;overflow-wrap:anywhere}
.ms-filename-block{margin:10px 0 0}
.ms-msg{margin:10px 0 0;color:var(--red);font-size:14px}
.ms-msg[hidden]{display:none}

/* Display picture */
.ms-dp{display:flex;gap:22px;align-items:center}
.ms-dp-stage{position:relative;width:112px;height:112px;border-radius:50%;overflow:hidden;flex:none;background:var(--surface2);border:2px solid var(--accent);display:flex;align-items:center;justify-content:center;transition:box-shadow .2s ease}
.ms-dp-stage.drag{box-shadow:0 0 0 5px rgba(224,123,38,.28)}
.ms-dp-stage img{width:100%;height:100%;object-fit:cover;display:block}
.ms-initial{font-family:"Instrument Serif",Georgia,serif;font-size:48px;line-height:1;color:var(--accent)}
.ms-dp-ctrl{display:flex;flex-direction:column;gap:12px;min-width:0}
.ms-pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.ms-pick .pf-btn{cursor:pointer}

/* Toggle switch */
.ms-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:14px;color:var(--text2)}
.ms-switch input{position:absolute;opacity:0;width:1px;height:1px}
.ms-switch-track{position:relative;width:38px;height:22px;border-radius:999px;background:var(--surface2);border:1px solid var(--border);flex:none;transition:background .18s ease,border-color .18s ease}
.ms-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text2);transition:transform .18s ease,background .18s ease}
.ms-switch input:checked+.ms-switch-track{background:var(--accent);border-color:var(--accent)}
.ms-switch input:checked+.ms-switch-track::after{transform:translateX(16px);background:#161210}
.ms-switch input:focus-visible+.ms-switch-track{outline:2px solid var(--accent);outline-offset:2px}

/* Cover photo */
.ms-cover-stage{position:relative;display:block;aspect-ratio:3/1;min-height:120px;border-radius:10px;overflow:hidden;cursor:pointer;background:var(--surface2);border:1.5px dashed var(--border);transition:border-color .2s ease,background .2s ease}
.ms-cover-stage:hover,.ms-cover-stage.drag{border-color:var(--accent)}
.ms-cover-stage.drag{background:rgba(224,123,38,.08)}
.ms-cover-media{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ms-cover-media img{width:100%;height:100%;object-fit:cover;display:block}
.ms-cover-empty{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--text2);font-size:14px;text-align:center;padding:12px}
.ms-cover-empty .icon{width:30px;height:30px;color:var(--accent);margin-bottom:4px}
.ms-cover-empty strong{color:var(--text);font-size:15px}
.ms-cover-chip{position:absolute;right:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;background:rgba(22,18,16,.74);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#f3ede0;border:1px solid rgba(243,237,224,.22);border-radius:999px;padding:6px 13px;font-size:13px}
.ms-cover-chip .icon{width:14px;height:14px}

/* Fields */
.ms-field{margin:0 0 16px}
.ms-field label{display:block;margin:0 0 6px;font-weight:500}
.ms-field-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.ms-field-head label{margin:0}
.ms-count{font-size:13px;color:var(--text3)}
.ms-count.near{color:var(--accent)}
.ms-input{width:100%;padding:12px 13px;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font:inherit;line-height:1.5;transition:border-color .18s ease,box-shadow .18s ease}
.ms-input::placeholder{color:var(--text3)}
.ms-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,123,38,.15)}
textarea.ms-input{resize:vertical;min-height:100px}
.ms-hint{margin:-4px 0 0;color:var(--text3);font-size:13px}

/* Live preview */
.ms-side{position:sticky;top:84px}
.ms-preview-title{margin:0 0 10px;font-weight:600;color:var(--text2);font-size:14px}
.ms-pv{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px -28px rgba(0,0,0,.7)}
.ms-pv-cover{height:104px;background:
  repeating-linear-gradient(135deg,transparent 0 14px,rgba(224,123,38,.07) 14px 15px),
  var(--surface2)}
.ms-pv-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ms-pv-body{padding:0 18px 18px}
.ms-pv-avatar{width:76px;height:76px;border-radius:50%;overflow:hidden;margin-top:-38px;background:var(--surface2);border:3px solid var(--surface);box-shadow:0 0 0 2px var(--accent);display:flex;align-items:center;justify-content:center;position:relative}
.ms-pv-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.ms-pv-avatar .ms-initial{font-size:32px}
.ms-pv-name{margin:10px 0 0;font-family:"Instrument Serif",Georgia,serif;font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.ms-pv-bio{margin:6px 0 0;color:var(--text);font-size:14px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ms-pv-bio.is-empty{color:var(--text3)}
.ms-pv-links{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.ms-pv-links:empty{display:none}
.ms-pv-links span{border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:12px;color:var(--text2)}
.ms-pv-note{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;color:var(--accent);font-size:13px}
.ms-pv-note[hidden]{display:none}
.ms-pv-note .icon{width:15px;height:15px;margin-top:2px;flex:none}

@media (max-width:900px){
  .ms-layout{grid-template-columns:1fr}
  .ms-side{position:static;order:-1}
  .ms-pv-cover{height:84px}
}
@media (max-width:520px){
  .ms-card{padding:18px 16px}
  .ms-dp{flex-direction:column;align-items:flex-start}
  .ms-actions .pf-btn{flex:1 1 100%}
  .ms-head .pf-btn{width:100%}
}

/* =====================================================================
   HEADER + FOOTER v2 (inc/header.php, inc/footer.php)
   Selectors: .tb-* (top bar), .ft-* (footer). Overrides the older
   .topbar / .nav-pill rules, which are no longer used by the header.
   ===================================================================== */
body{min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;flex:1 0 auto}

/* Top bar */
.topbar{display:block;padding:10px 20px;transition:box-shadow .2s ease,background .2s ease}
.topbar.is-scrolled{box-shadow:0 1px 0 rgba(243,237,224,.1),0 16px 36px -18px rgba(0,0,0,.85)}
html.light .topbar.is-scrolled{box-shadow:0 1px 0 rgba(22,18,16,.1),0 16px 36px -18px rgba(0,0,0,.3)}
.tb-inner{display:flex;align-items:center;gap:14px;max-width:1100px;margin:0 auto}
.logo{display:inline-flex;align-items:center;gap:10px;font-size:28px;line-height:1;color:var(--text)}
.logo:hover{text-decoration:none}
.logo .logo-word{font-weight:400;letter-spacing:.5px}
.logo-mark{width:36px;height:36px;flex:none;border-radius:10px;box-shadow:0 6px 18px -8px rgba(224,123,38,.6);transition:transform .25s ease}
.logo:hover .logo-mark{transform:rotate(-6deg) scale(1.05)}
.logo .logo-tag{margin-left:2px}

.tb-nav{display:flex;align-items:center;gap:4px;flex:1;margin-left:14px}
.tb-link{position:relative;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;color:var(--text2);font-size:14px;font-weight:500;transition:color .18s ease,background .18s ease}
.tb-link:hover{color:var(--text);background:var(--surface2);text-decoration:none}
.tb-link .icon{width:15px;height:15px}
.tb-link.active{color:var(--text)}
.tb-link.active::after{content:"";position:absolute;left:50%;bottom:-11px;width:22px;height:3px;margin-left:-11px;border-radius:3px 3px 0 0;background:var(--accent)}

.tb-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.tb-cta{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:999px;background:var(--accent);border:1px solid var(--accent);color:#161210;font-size:14px;font-weight:700;transition:background .18s ease,transform .18s ease,box-shadow .18s ease}
.tb-cta:hover{background:var(--accent-d);border-color:var(--accent-d);color:#161210;text-decoration:none;transform:translateY(-1px)}
.tb-cta.active{box-shadow:0 0 0 3px rgba(224,123,38,.28)}
.tb-cta .icon{width:15px;height:15px}
.tb-ghost{padding:8px 14px;border-radius:999px;color:var(--text2);font-size:14px;font-weight:500}
.tb-ghost:hover{color:var(--text);background:var(--surface2);text-decoration:none}

.tb-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--border);color:var(--text2);cursor:pointer;padding:0;font:inherit;transition:color .18s ease,border-color .18s ease,background .18s ease}
.tb-icon:hover{color:var(--text);border-color:var(--accent);background:var(--surface2);text-decoration:none}
.tb-icon .icon{width:18px;height:18px}
.tb-bell .bell-count{top:-5px;right:-5px;border:2px solid var(--surface);padding:0 5px}
.tb-burger{display:none}
.tb-burger .icon path{transform-origin:center;transition:transform .2s ease,opacity .2s ease}
.tb-burger.is-open .bg-1{transform:translateY(5px) rotate(45deg)}
.tb-burger.is-open .bg-2{opacity:0}
.tb-burger.is-open .bg-3{transform:translateY(-5px) rotate(-45deg)}

.tb-icon:focus-visible,.tb-cta:focus-visible,.tb-link:focus-visible,.tb-ghost:focus-visible,.tb-user:focus-visible,.tb-item:focus-visible,.tb-panel-head:focus-visible,.ft a:focus-visible,.ft-up:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Account menu */
.tb-menu{position:relative}
.tb-user{display:inline-flex;align-items:center;gap:8px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px 10px 3px 3px;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .18s ease}
.tb-user:hover,.tb-user[aria-expanded="true"]{border-color:rgba(224,123,38,.6)}
.tb-user .avatar{width:30px;height:30px}
.tb-user .avatar .icon{width:15px;height:15px}
.tb-user>.icon{width:14px;height:14px;color:var(--text3);transition:transform .2s ease}
.tb-user[aria-expanded="true"]>.icon{transform:rotate(180deg)}
.tb-user .nav-user-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-panel{position:absolute;right:0;top:calc(100% + 12px);width:268px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 24px 60px -20px rgba(0,0,0,.75);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top right;transition:opacity .16s ease,transform .16s ease,visibility .16s;z-index:150}
.tb-panel.open{opacity:1;visibility:visible;transform:none}
.tb-panel-head{display:flex;align-items:center;gap:12px;padding:10px;margin-bottom:6px;border-radius:11px;background:var(--surface2);color:var(--text)}
.tb-panel-head:hover{text-decoration:none;background:rgba(224,123,38,.1)}
.tb-panel-head .avatar{width:44px;height:44px}
.tb-panel-head .avatar .icon{width:20px;height:20px}
.tb-panel-id{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.tb-panel-id strong{font-family:"Instrument Serif",Georgia,serif;font-size:20px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-panel-name{display:flex;align-items:center;gap:5px;min-width:0}
.tb-panel-name strong{min-width:0}
.tb-panel-name .verified{margin-left:0}
.tb-panel-id small{color:var(--text2);font-size:12.5px}
.tb-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 11px;border:0;border-radius:9px;background:none;color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer;transition:background .15s ease}
.tb-item:hover{background:var(--surface2);text-decoration:none}
.tb-item .icon{width:16px;height:16px;color:var(--text2)}
.tb-item:hover .icon{color:var(--accent)}
.tb-item-danger:hover{background:rgba(255,154,138,.1);color:var(--red)}
.tb-item-danger:hover .icon{color:var(--red)}
.tb-sep{height:1px;background:var(--border);margin:6px 4px}
.tb-logout-form{margin:0}

/* Announcement + flash */
.announce-bar{display:flex;align-items:center;justify-content:center;gap:9px;background:linear-gradient(90deg,var(--accent-d),var(--accent) 50%,var(--accent-d))}
.announce-bar .icon{width:16px;height:16px;flex:none}
.flash{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:12px 12px 12px 16px;margin-bottom:20px;animation:fade .25s ease}
.flash>.icon{width:18px;height:18px;color:var(--green);flex:none}
.flash>span{flex:1}
.flash-close{display:inline-flex;background:none;border:0;border-radius:50%;padding:6px;color:var(--text3);cursor:pointer}
.flash-close:hover{color:var(--text);background:var(--surface2)}
.flash-close .icon{width:15px;height:15px}

/* Footer */
.ft{position:relative;margin-top:40px;background:var(--surface);border-top:1px solid var(--border)}
.ft::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent);opacity:.55}
.ft-inner{max-width:1100px;margin:0 auto;padding:0 20px}
.ft-top{display:grid;grid-template-columns:1.5fr .8fr .9fr 1.4fr;gap:40px;padding:48px 0 36px}
.ft-brand .logo{margin-bottom:14px}
.ft-brand p{margin:0 0 16px;max-width:34ch;color:var(--text2);font-size:14.5px;line-height:1.65}
.ft-join{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:14px}
.ft-join .icon{width:16px;height:16px;transition:transform .2s ease}
.ft-join:hover{text-decoration:none;color:var(--text)}
.ft-join:hover .icon{transform:translateX(4px)}
.ft-col h3{margin:0 0 14px;font-size:14px;font-weight:700;color:var(--text)}
.ft-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ft-col a{color:var(--text2);font-size:14.5px;transition:color .15s ease}
.ft-col a:hover{color:var(--text);text-decoration:none}
.ft-rules li{display:flex;gap:11px;align-items:flex-start;color:var(--text2);font-size:14px;line-height:1.5}
.ft-rules .icon{width:18px;height:18px;color:var(--accent);margin-top:2px}
.ft-rules b{color:var(--text);font-weight:600}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 0 24px;border-top:1px solid var(--border);color:var(--text3);font-size:13.5px}
.ft-bottom p{margin:0}
.ft-up{display:inline-flex;align-items:center;gap:7px;background:transparent;border:1px solid var(--border);border-radius:999px;padding:7px 14px;color:var(--text2);font:inherit;font-size:13px;cursor:pointer;transition:all .18s ease}
.ft-up:hover{color:var(--text);border-color:var(--accent);background:var(--surface2)}
.ft-up .icon{width:14px;height:14px}

@media (max-width:900px){
  .ft-top{grid-template-columns:1fr 1fr;gap:32px 28px;padding:40px 0 28px}
  .ft-brand{grid-column:1/-1}
  .ft-rules{grid-column:1/-1}
}
@media (max-width:820px){
  .tb-burger{display:inline-flex}
  .tb-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px 14px 14px;background:var(--surface);border-bottom:1px solid var(--border);box-shadow:0 24px 40px -24px rgba(0,0,0,.7)}
  .tb-nav.open{display:flex;animation:fade .18s ease}
  .tb-link{padding:12px 14px;border-radius:10px;font-size:15px}
  .tb-link.active{background:var(--surface2)}
  .tb-link.active::after{display:none}
}
@media (max-width:520px){
  .topbar{padding:9px 12px}
  .tb-inner{gap:8px}
  .logo{font-size:24px}
  .logo-mark{width:32px;height:32px}
  .logo .logo-tag{display:none}
  .tb-actions{gap:6px}
  .tb-cta{padding:8px 11px}
  .tb-cta .icon+span{display:none}
  .tb-user .nav-user-name,.tb-user>.icon{display:none}
  .tb-user{padding:3px}
  .tb-panel{position:fixed;left:12px;right:12px;top:62px;width:auto}
  .ft-top{grid-template-columns:1fr}
  .ft-bottom{flex-direction:column;align-items:flex-start}
}

/* =====================================================================
   CREATE POST v2 (create.php) — selectors prefixed .cr-
   Reuses .pf-btn from the profile block and .ms-alert / .ms-danger from
   the settings block.
   ===================================================================== */
.cr-head{margin:4px 0 22px}
.cr-head .page-title{margin:0 0 4px}
.cr-head .page-sub{margin:0;max-width:60ch}
.cr-alert-note{margin:8px 0 0;color:var(--text2);font-size:14px}
.cr-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:start}
.cr-form{display:flex;flex-direction:column;gap:20px;min-width:0}

.cr-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px}
.cr-card-head{display:flex;gap:14px;align-items:flex-start;margin:0 0 22px}
.cr-step{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;flex:none;background:rgba(224,123,38,.14);border:1px solid rgba(224,123,38,.5);color:var(--accent);font-weight:700;font-size:14px;margin-top:2px}
.cr-card-head h2{margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:27px;line-height:1.2}
.cr-card-head p{margin:2px 0 0;color:var(--text2);font-size:14px}

.cr-field{margin:0 0 24px}
.cr-field:last-child{margin-bottom:0}
.cr-field-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 8px}
.cr-label{font-weight:600;font-size:15px}
.cr-label em{font-style:normal;font-weight:400;color:var(--text3)}
.cr-count{font-size:13px;color:var(--text3);white-space:nowrap}
.cr-count.near{color:var(--accent)}
.cr-count.full{color:var(--red)}
.cr-hint{margin:10px 0 0;color:var(--text3);font-size:13px}
.cr-error{margin:8px 0 0;color:var(--red);font-size:14px}
.cr-error[hidden],.cr-warn[hidden]{display:none}
.cr-warn{margin:10px 0 0;color:#f4b26a;font-size:14px}

.cr-input{display:block;width:100%;padding:12px 14px;background:var(--bg);border:1px solid var(--border);border-radius:10px;color:var(--text);font:inherit;line-height:1.55;transition:border-color .18s ease,box-shadow .18s ease}
.cr-input::placeholder{color:var(--text3)}
.cr-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,123,38,.16)}
textarea.cr-input{resize:vertical;min-height:150px}
.cr-title{font-family:"Instrument Serif",Georgia,serif;font-size:26px;line-height:1.25;padding:12px 15px}

/* Cover dropzone */
.cr-drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:250px;border:1.5px dashed var(--border);border-radius:14px;background:var(--bg);cursor:pointer;overflow:hidden;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}
.cr-drop:hover{border-color:rgba(224,123,38,.7)}
.cr-drop.drag{border-color:var(--accent);background:rgba(224,123,38,.07);box-shadow:0 0 0 4px rgba(224,123,38,.18)}
.cr-drop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cr-drop input{display:block;margin:12px auto}
.cr-drop.js input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.cr-drop-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 20px;text-align:center}
.cr-drop-empty[hidden],.cr-drop-preview[hidden]{display:none}
.cr-drop-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(224,123,38,.12);color:var(--accent);margin-bottom:6px;transition:transform .2s ease}
.cr-drop:hover .cr-drop-ico{transform:translateY(-3px)}
.cr-drop-ico .icon{width:28px;height:28px}
.cr-drop-empty strong{font-size:17px}
.cr-drop-empty span:not(.cr-drop-ico){color:var(--text2);font-size:14px}
.cr-drop-preview{width:100%;cursor:default}
.cr-drop-preview img{display:block;width:100%;max-height:440px;object-fit:contain;background:#0e0b09}
.cr-drop-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface)}
.cr-drop-file{display:flex;flex-direction:column;min-width:0;flex:1 1 160px;line-height:1.35}
.cr-drop-file span:first-child{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-drop-file span:last-child{color:var(--text2);font-size:13px}
.cr-drop-bar .pf-btn{min-height:36px;padding:7px 14px;font-size:13px}

/* Extra images */
.cr-file{display:block;margin:0 0 10px;color:var(--text2)}
.cr-file.js{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;margin:0}
.cr-extras{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;border-radius:12px;transition:box-shadow .2s ease}
.cr-extras.drag{box-shadow:0 0 0 4px rgba(224,123,38,.2)}
.cr-thumb{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--surface2)}
.cr-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.cr-thumb-x{position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1px solid rgba(243,237,224,.28);background:rgba(22,18,16,.72);color:#f3ede0;cursor:pointer;padding:0;transition:background .15s ease}
.cr-thumb-x:hover{background:var(--red);color:#161210;border-color:var(--red)}
.cr-thumb-x .icon{width:13px;height:13px}
.cr-thumb-n{position:absolute;left:6px;bottom:6px;min-width:22px;padding:1px 7px;border-radius:999px;background:rgba(22,18,16,.72);color:#f3ede0;font-size:12px;font-weight:700;text-align:center}
.cr-add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;aspect-ratio:1;border:1.5px dashed var(--border);border-radius:10px;background:var(--bg);color:var(--text2);font:inherit;font-size:13px;cursor:pointer;transition:border-color .18s ease,color .18s ease}
.cr-add:hover{border-color:var(--accent);color:var(--text)}
.cr-add .icon{width:22px;height:22px;color:var(--accent)}
.cr-thumb-x:focus-visible,.cr-add:focus-visible,.cr-tag:focus-visible,.cr-draft button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Draft + hashtags */
.cr-draft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:-4px 0 18px;padding:9px 13px;border-radius:10px;background:rgba(224,123,38,.09);border:1px solid rgba(224,123,38,.35);color:var(--text2);font-size:14px}
.cr-draft[hidden]{display:none}
.cr-draft button{background:none;border:0;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.cr-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:14px}
.cr-tags-label{color:var(--text2);font-size:13px;margin-right:4px}
.cr-tag{background:transparent;border:1px solid var(--border);border-radius:999px;padding:5px 12px;color:var(--text2);font:inherit;font-size:13px;cursor:pointer;transition:all .15s ease}
.cr-tag:hover{border-color:var(--accent);color:var(--text)}
.cr-tag.on{background:rgba(224,123,38,.14);border-color:var(--accent);color:var(--text)}

/* Submit */
.cr-submit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cr-submit-btn{padding:13px 26px;font-size:15px;min-height:48px}
.cr-submit-btn .icon{width:17px;height:17px}
.cr-note{display:flex;align-items:center;gap:8px;margin:0;color:var(--text2);font-size:14px;flex:1 1 220px}
.cr-note .icon{width:16px;height:16px;color:var(--accent);flex:none}

/* Side: live preview, checklist, tips */
.cr-side{position:sticky;top:84px;display:flex;flex-direction:column;gap:14px}
.cr-pv{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 18px 50px -28px rgba(0,0,0,.7)}
.cr-pv-media{position:relative;background:var(--surface2);min-height:220px;display:flex;align-items:center;justify-content:center}
.cr-pv-media img{display:block;width:100%;max-height:420px;object-fit:cover}
.cr-pv-media img[hidden]{display:none}
.cr-pv-empty{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text3);font-size:14px;padding:30px 20px;text-align:center}
.cr-pv-empty[hidden]{display:none}
.cr-pv-empty .icon{width:32px;height:32px}
.cr-pv-status,.cr-pv-more{position:absolute;display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:4px 11px;font-size:12px;font-weight:700;color:#f3ede0;background:rgba(22,18,16,.74);border:1px solid rgba(243,237,224,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.cr-pv-status{top:10px;left:10px;border-color:rgba(224,123,38,.7);color:#f4b26a}
.cr-pv-status .icon{width:13px;height:13px}
.cr-pv-more{top:10px;right:10px}
.cr-pv-more[hidden]{display:none}
.cr-pv-body{padding:16px 18px 18px}
.cr-pv-body h2{margin:0 0 6px;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:25px;line-height:1.2;overflow-wrap:anywhere}
.cr-pv-caption{margin:0 0 14px;color:var(--text2);font-size:14px;line-height:1.6;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.is-empty{color:var(--text3)!important}
.cr-pv-author{display:flex;align-items:center;gap:8px;font-size:14px}
.cr-pv-author .author-name{font-weight:600}
.cr-pv-date{margin-left:auto;color:var(--text3);font-size:13px}

.cr-check{list-style:none;margin:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:14px;font-size:14px;color:var(--text2)}
.cr-check li{display:flex;align-items:center;gap:10px}
.cr-check em{font-style:normal;color:var(--text3)}
.cr-check-dot{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);color:transparent;flex:none;transition:all .2s ease}
.cr-check-dot .icon{width:12px;height:12px;stroke-width:3}
.cr-check li.done{color:var(--text)}
.cr-check li.done .cr-check-dot{background:var(--accent);border-color:var(--accent);color:#161210}

.cr-tips{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--text2)}
.cr-tips strong{display:block;color:var(--text);margin-bottom:6px}
.cr-tips ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}

@media (max-width:900px){
  .cr-layout{grid-template-columns:1fr}
  .cr-side{position:static}
}
@media (max-width:600px){
  .cr-card{padding:18px 16px}
  .cr-extras{grid-template-columns:repeat(2,1fr)}
  .cr-title{font-size:23px}
  .cr-submit{position:sticky;bottom:0;z-index:20;margin:0 -4px;padding:12px 4px;background:var(--bg);border-top:1px solid var(--border)}
  .cr-submit-btn{width:100%}
  .cr-note{display:none}
}

/* =====================================================================
   MOBILE RESPONSIVE v4 — global safety, header, footer, post page, forms
   (kept at the END of the file so it wins over earlier rules)
   ===================================================================== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{overflow-x:clip;min-height:100vh;min-height:100dvh}
img,svg,video,canvas,iframe{max-width:100%}
.wrap,.post-wrap{min-width:0}
h1,h2,h3,.post-title,.page-title,.card-body h2{overflow-wrap:anywhere}
pre,code,table{max-width:100%}
pre{overflow-x:auto}

/* Notch / home-indicator safe areas */
.topbar{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right));padding-top:max(10px,env(safe-area-inset-top))}
.ft-bottom{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
.to-top{right:max(14px,env(safe-area-inset-right));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))}
.toast{bottom:max(28px,calc(env(safe-area-inset-bottom) + 16px));max-width:calc(100vw - 32px)}
.toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Touch devices: comfortable tap targets */
@media (pointer:coarse){
  .icon-btn,.like-btn,.btn,.btn-small,.btn-danger,.search-btn,.ft-up{min-height:44px}
  .icon-btn.small{min-height:40px}
  .tb-icon{width:42px;height:42px}
  .tb-link,.tb-item{min-height:44px}
  .ft-col a{display:inline-block;padding:5px 0}
  .ft-col ul{gap:6px}
  .gallery-thumb img{width:64px;height:64px}
}

/* Phones & small tablets */
@media (max-width:820px){
  .tb-nav{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .tb-nav .tb-link{width:100%}
  .hero{padding:22px 20px}
}

@media (max-width:600px){
  /* base */
  .wrap{padding:18px 14px 48px}
  .page-title{font-size:30px}
  .hero{padding:18px 16px;gap:14px}
  .hero-cta{width:100%;justify-content:center}
  .search-bar{padding:6px 6px 6px 14px;margin:14px 0 18px}
  .search-btn{padding:9px 16px}
  .pager{gap:10px}
  .pager a{padding:9px 14px}
  .ad-slot{margin:16px 0;overflow:hidden}

  /* forms: 16px inputs stop iOS Safari from zooming on focus */
  input,select,textarea,.search-bar input,.reply-box textarea,.cr-input,.form input,.form textarea{font-size:16px}
  .form{max-width:100%}

  /* post page */
  .post-wrap{max-width:100%}
  .back-link{margin-bottom:12px}
  .post-card{border-radius:10px}
  .post-card .post-img{max-height:70vh;max-height:70dvh}
  .post-meta{gap:8px;padding-bottom:14px;margin-bottom:18px}
  .meta-chip{font-size:12.5px;padding:4px 10px}
  .gallery-thumbs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;margin:10px 14px 0;scrollbar-width:none}
  .gallery-thumbs::-webkit-scrollbar{display:none}
  .gallery-thumb{flex:none}

  .post-actions{margin-top:20px;padding-top:16px;gap:10px}
  .actions-left,.actions-right{display:flex;flex-wrap:wrap;gap:8px;width:100%}
  .actions-left>*,.actions-right>*{flex:1 1 calc(33.333% - 8px);min-width:0}
  .actions-right>*{flex-basis:calc(50% - 8px)}
  .actions-left .icon-btn,.actions-left .like-btn,.actions-right .icon-btn{width:100%;justify-content:center;padding-left:8px;padding-right:8px}
  .actions-left .inline-form,.actions-right .inline-form{display:block}

  .author-card{padding:14px;gap:12px}
  .author-card-avatar .avatar{width:48px;height:48px}
  .author-card-name{font-size:21px}
  .comments h2{font-size:21px}
  .comment{padding:13px 14px}
  .comment-head{flex-wrap:wrap}
  .comment-actions .icon-btn{flex:0 0 auto}
  .reply-box{padding:13px}
  .reply-box-foot{flex-direction:row}
  .reply-box-foot .btn{padding:10px 18px}
  .related{margin-top:32px}
  .lightbox{padding:10px}
  .lb-close{top:max(10px,env(safe-area-inset-top));right:10px}

  /* footer */
  .ft{margin-top:28px}
  .ft-inner{padding:0 16px}
  .ft-top{padding:32px 0 22px;gap:26px}
  .ft-brand p{max-width:none}
  .ft-bottom{gap:12px}
  .ft-up{align-self:flex-start}
}

/* Small phones (≤400px) — keep the header on one line */
@media (max-width:400px){
  .topbar{padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right))}
  .tb-inner{gap:6px}
  .logo{font-size:21px;gap:7px;min-width:0}
  .logo-mark{width:30px;height:30px;border-radius:9px}
  .tb-actions{gap:4px;min-width:0}
  .tb-icon{width:36px;height:36px}
  .tb-icon .icon{width:17px;height:17px}
  .tb-cta{padding:8px 10px}
  .post-title{font-size:25px}
  .post-body{padding:16px 14px 18px}
  .post-caption{font-size:16px}
  .actions-left>*{flex-basis:calc(50% - 8px)}
}
@media (max-width:340px){
  .logo .logo-word{display:none}
  .grid{gap:10px}
  .card-body{padding:8px 10px}
}

/* Landscape phones: don't let the sticky header eat the screen */
@media (max-height:480px) and (orientation:landscape){
  .topbar{position:static}
  .post-card .post-img{max-height:none}
}

/* =====================================================================
   ADMIN MODERATION v2 (admin.php) — selectors prefixed .am-
   ===================================================================== */
.am{max-width:960px;margin:0 auto}
.am-head{margin:6px 0 20px}
.am-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.am-head .page-title{margin:6px 0 4px}

/* Stats */
.am-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px}
.am-stat{position:relative;display:flex;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px;color:var(--text);transition:border-color .18s ease,transform .18s ease}
a.am-stat:hover{text-decoration:none;border-color:rgba(224,123,38,.55);transform:translateY(-2px)}
.am-stat b{font-size:30px;line-height:1.1;font-weight:700}
.am-stat span:not(.am-stat-ico){color:var(--text2);font-size:13px}
.am-stat-ico{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--surface2);color:var(--text2);margin-bottom:8px}
.am-stat-ico .icon{width:17px;height:17px}
.am-stat.is-hot{border-color:rgba(224,123,38,.5)}
.am-stat.is-hot .am-stat-ico{background:rgba(224,123,38,.15);color:var(--accent)}
.am-stat.is-alert{border-color:rgba(255,154,138,.5)}
.am-stat.is-alert .am-stat-ico{background:rgba(255,154,138,.14);color:var(--red)}

/* Jump links */
.am-tabs{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin:0 0 8px;padding:2px 0 6px}
.am-tabs::-webkit-scrollbar{display:none}
.am-tabs a{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--text2);font-size:14px;font-weight:500;transition:all .18s ease}
.am-tabs a:hover{color:var(--text);border-color:var(--accent);text-decoration:none}
.am-tabs em{font-style:normal;font-size:12px;font-weight:700;background:var(--surface2);border-radius:999px;padding:0 8px;color:var(--text)}

/* Sections */
.am-section{margin:28px 0 0;scroll-margin-top:84px}
.am-section-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.am-section-head h2{display:flex;align-items:center;gap:9px;margin:0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:28px;line-height:1.15}
.am-section-head h2 .icon{width:20px;height:20px;color:var(--accent)}
.am-count{background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:1px 11px;font-size:13px;font-weight:700;color:var(--text2)}
.am-count.is-hot{background:var(--accent);border-color:var(--accent);color:#161210}
.am-count.is-alert{background:var(--red);border-color:var(--red);color:#161210}
.am-hint{margin:0 0 12px;color:var(--text3);font-size:13.5px;line-height:1.55}
.am-hint code{background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:0 5px;font-size:12.5px}

/* Post cards */
.am-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:14px 16px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;transition:border-color .18s ease}
.am-card:hover{border-color:rgba(243,237,224,.24)}
.am-thumb{display:block;width:112px;height:112px;border-radius:9px;overflow:hidden;background:var(--surface2)}
.am-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.am-body{min-width:0}
.am-title{margin:0 0 4px;font-size:17px;line-height:1.3;font-weight:600;overflow-wrap:anywhere}
.am-title a{color:var(--text)}
.am-title a:hover{color:var(--accent);text-decoration:none}
.am-meta{margin:0 0 6px;color:var(--text3);font-size:13px;overflow-wrap:anywhere}
.am-meta strong{color:var(--text2);font-weight:600}
.am-excerpt{margin:0;color:var(--text2);font-size:14.5px;line-height:1.6;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.am-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 4px}
.am-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:3px 11px;font-size:12.5px;color:var(--text2);text-transform:capitalize}
.am-chip .icon{width:13px;height:13px}
.am-chip a{color:var(--text)}
.am-chip-alert{background:rgba(255,154,138,.12);border-color:rgba(255,154,138,.45);color:var(--red);text-transform:none}
.am-chip-win{background:rgba(163,201,92,.12);border-color:rgba(163,201,92,.45);color:var(--green);text-transform:none}
.am-st-approved{color:var(--green);border-color:rgba(163,201,92,.45)}
.am-st-pending{color:var(--accent);border-color:rgba(224,123,38,.5)}
.am-st-rejected{color:var(--red);border-color:rgba(255,154,138,.45)}

/* Buttons */
.am-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--border)}
.am-form{display:block;margin:0}
.am-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--surface2);color:var(--text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .16s ease,border-color .16s ease,transform .16s ease,opacity .16s ease}
.am-btn:hover{text-decoration:none;transform:translateY(-1px);border-color:var(--accent)}
.am-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.am-btn .icon{width:15px;height:15px}
.am-ok{background:var(--accent);border-color:var(--accent);color:#161210}
.am-ok:hover{background:var(--accent-d);border-color:var(--accent-d);color:#161210}
.am-ghost{background:transparent}
.am-danger{background:transparent;border-color:rgba(255,154,138,.5);color:var(--red)}
.am-danger:hover{background:rgba(255,154,138,.1);border-color:var(--red)}
.am-sm{min-height:36px;padding:6px 12px;font-size:13px}
.am-btn.is-busy,.am-btn:disabled{opacity:.55;cursor:progress;transform:none}

/* Replies */
.am-reply{display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:13px 14px;margin-bottom:10px}
.am-reply-main{flex:1;min-width:0}
.am-reply-body{margin:0;line-height:1.65;overflow-wrap:anywhere}
.am-reply .am-form{flex:none}

/* Contest */
.am-panel{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:16px}
.am-winner-form label{display:block;margin:14px 0 6px;font-weight:600;font-size:14px}
.am-winner-row{display:flex;gap:10px;align-items:stretch}
.am-winner-row input{flex:1;min-width:0;padding:10px 14px;background:var(--bg);border:1px solid var(--border);border-radius:999px;color:var(--text);font:inherit;font-size:15px}
.am-winner-row input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(224,123,38,.15)}
.am-winner-form .am-hint{margin:10px 0 0}

/* Empty state */
.am-empty{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border:1px dashed var(--border);border-radius:12px;padding:28px 16px;color:var(--text2)}
.am-empty p{margin:0}
.am-empty-ico{width:30px;height:30px;color:var(--text3)}

html.light .am-card:hover{border-color:rgba(22,18,16,.24)}

/* Tablet */
@media (max-width:760px){
  .am-stats{grid-template-columns:repeat(2,1fr)}
}

/* Phones */
@media (max-width:600px){
  .am-head{margin-bottom:14px}
  .am-stat{padding:13px}
  .am-stat b{font-size:26px}
  .am-tabs{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .am-section{margin-top:22px}
  .am-section-head h2{font-size:24px}
  .am-card{grid-template-columns:80px minmax(0,1fr);gap:12px;padding:12px}
  .am-thumb{width:80px;height:80px;border-radius:8px}
  .am-title{font-size:16px}
  .am-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .am-actions .am-btn{width:100%;min-height:44px}
  .am-reply{flex-direction:column;gap:10px}
  .am-reply .am-form{width:100%}
  .am-reply .am-btn{width:100%;min-height:44px}
  .am-winner-row{flex-direction:column}
  .am-winner-row input{font-size:16px;padding:12px 16px}
  .am-winner-row .am-btn{width:100%;min-height:44px}
}
@media (max-width:360px){
  .am-card{grid-template-columns:64px minmax(0,1fr)}
  .am-thumb{width:64px;height:64px}
  .am-stat span:not(.am-stat-ico){font-size:12px}
}

/* =====================================================================
   NOTIFICATIONS v2 (notifications.php) — selectors prefixed .nt-
   ===================================================================== */
.nt{max-width:760px;margin:0 auto}
.nt-head{margin:6px 0 18px}
.nt-eyebrow{display:inline-flex;align-items:center;gap:7px;color:var(--accent);font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
.nt-head .page-title{margin:6px 0 4px}
.nt-new-count{color:var(--accent)}

/* Filter chips */
.nt-filters{display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 8px;margin-bottom:6px}
.nt-filters::-webkit-scrollbar{display:none}
.nt-chip{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--text2);font:inherit;font-size:14px;font-weight:500;cursor:pointer;transition:all .18s ease}
.nt-chip:hover{color:var(--text);border-color:var(--accent)}
.nt-chip.is-on{background:rgba(224,123,38,.14);border-color:var(--accent);color:var(--text)}
.nt-chip em{font-style:normal;font-size:12px;font-weight:700;background:var(--surface2);border-radius:999px;padding:0 8px;color:var(--text)}
.nt-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nt-chip .icon{width:14px;height:14px}

/* Groups + rows */
.nt-group{margin-top:18px}
.nt-group[hidden],.nt-row[hidden]{display:none}
.nt-group-title{margin:0 0 8px;font-family:"DM Sans",system-ui,sans-serif;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text3)}
.nt-list{display:flex;flex-direction:column;gap:8px}
.nt-row{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;transition:border-color .18s ease,background .18s ease}
.nt-row:hover{border-color:rgba(243,237,224,.24)}
.nt-row.is-new{background:linear-gradient(90deg,rgba(224,123,38,.11),var(--surface) 70%);border-color:rgba(224,123,38,.45)}
.nt-row.is-new::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}

/* Avatar + type badge */
.nt-av{position:relative;flex:none}
.nt-av .avatar{width:46px;height:46px}
.nt-av .avatar .icon{width:20px;height:20px}
.nt-ico{position:absolute;right:-5px;bottom:-5px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:2px solid var(--surface);background:var(--surface2);color:var(--text2)}
.nt-ico .icon{width:11px;height:11px;stroke-width:2.6}
.nt-like{background:#ff9a8a;color:#161210}
.nt-comment{background:#7fb4e8;color:#161210}
.nt-approved{background:var(--green);color:#161210}
.nt-follow{background:var(--accent);color:#161210}

/* Text */
.nt-main{min-width:0}
.nt-text{margin:0 0 3px;line-height:1.5;overflow-wrap:anywhere}
.nt-actor{color:var(--text);font-weight:700}
.nt-actor:hover{color:var(--accent);text-decoration:none}
.nt-text .verified{width:15px;height:15px;vertical-align:-3px;margin:0 4px 0 3px}
.nt-post{color:var(--accent);font-weight:500}
.nt-time{display:inline-flex;align-items:center;gap:8px;color:var(--text3);font-size:13px}
.nt-new{background:var(--accent);color:#161210;border-radius:999px;padding:0 8px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* Right side */
.nt-thumb{display:block;width:52px;height:52px;border-radius:9px;overflow:hidden;background:var(--surface2);flex:none;transition:transform .18s ease}
.nt-thumb:hover{transform:scale(1.05)}
.nt-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.nt-view{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:7px 14px;color:var(--text);font-size:13px;font-weight:600;white-space:nowrap;transition:all .18s ease}
.nt-view:hover{border-color:var(--accent);background:rgba(224,123,38,.1);text-decoration:none}

/* Empty + footer */
.nt-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:16px;padding:44px 20px;margin-top:10px}
.nt-empty-ico{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(224,123,38,.12);color:var(--accent)}
.nt-empty-ico .icon{width:28px;height:28px}
.nt-empty h2{margin:6px 0 0;font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:28px}
.nt-empty p{margin:0 0 8px;max-width:38ch;color:var(--text2)}
.nt-none{text-align:center;color:var(--text2);padding:30px 0}
.nt-none[hidden]{display:none}
.nt-foot{text-align:center;color:var(--text3);font-size:13px;margin:26px 0 0}

html.light .nt-row:hover{border-color:rgba(22,18,16,.24)}

@media (max-width:600px){
  .nt-head{margin-bottom:14px}
  .nt-filters{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:14px}
  .nt-row{gap:12px;padding:11px 12px}
  .nt-av .avatar{width:42px;height:42px}
  .nt-thumb{width:46px;height:46px}
  .nt-text{font-size:14.5px}
  .nt-view{padding:6px 11px;font-size:12.5px}
  .nt-empty{padding:34px 16px}
}
@media (max-width:360px){
  .nt-row{grid-template-columns:auto minmax(0,1fr)}
  .nt-thumb,.nt-view{grid-column:2;justify-self:start}
  .nt-thumb{width:64px;height:64px}
}

/* Direct messages PREMIUM (2026-10-30) — replaces the first DM block. */
.nt-message{background:#c084fc;color:#161210}
.msg-thread{max-width:760px;margin:0 auto}
.msg-back{color:var(--text2)}
.msg-back:hover{color:var(--accent);text-decoration:none}
.msg-head{display:flex;align-items:center;gap:16px;background:linear-gradient(var(--surface),var(--surface)) padding-box,linear-gradient(135deg,rgba(224,123,38,.6),rgba(192,94,11,.15)) border-box;border:1px solid transparent;border-radius:20px;padding:16px 18px;margin-bottom:16px;box-shadow:0 10px 30px rgba(0,0,0,.25);flex-wrap:wrap}
.msg-head-av{flex:none;padding:3px;border-radius:50%;background:linear-gradient(135deg,#f0923c,#e07b26,#c05e0b)}
.msg-head-av .avatar{width:58px;height:58px;border:none}
.msg-head-av .avatar .icon{width:26px;height:26px}
.msg-head-id{flex:1;min-width:160px;display:flex;flex-direction:column;gap:2px;font-size:18px}
.msg-head-id a{color:var(--text)}
.msg-head-id small{color:var(--text3);font-size:12px;letter-spacing:.04em}
.msg-head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.msg-ghost-btn{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;padding:8px 14px;color:var(--text);font-size:13px;font-weight:600}
.msg-ghost-btn:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.msg-block-form{margin:0;flex:none}
.msg-search-wrap{margin-bottom:12px}
.msg-search{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:999px;padding:11px 18px;font:inherit}
.msg-search:focus{outline:2px solid var(--accent);outline-offset:0}
.msg-list-wrap{position:relative}
.msg-list{display:flex;flex-direction:column;gap:10px;max-height:600px;overflow-y:auto;padding:6px 4px 14px;scroll-behavior:smooth}
.msg-day{align-self:center;background:var(--surface2);border:1px solid var(--border);color:var(--text2);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;border-radius:999px;padding:4px 14px;margin:6px 0 2px}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.msg-bubble{max-width:76%;background:var(--surface2);border:1px solid var(--border);border-radius:18px;border-bottom-left-radius:6px;padding:11px 14px 8px;line-height:1.55;animation:msgIn .25s ease;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.msg-bubble.mine{margin-left:auto;background:linear-gradient(135deg,#f0923c,#e07b26);border-color:transparent;border-bottom-right-radius:6px;border-bottom-left-radius:18px;color:#161210}
.msg-text{display:block;white-space:pre-wrap;word-wrap:break-word}
.msg-meta{display:flex;align-items:center;gap:6px;justify-content:flex-end;margin-top:5px;font-size:11px;color:var(--text3)}
.msg-bubble.mine .msg-meta{color:rgba(22,18,16,.68)}
.msg-time{white-space:nowrap}
.msg-ticks{font-weight:700;letter-spacing:-1px}
.msg-del{background:none;border:none;color:inherit;opacity:.45;cursor:pointer;font-size:15px;line-height:1;padding:0 2px}
.msg-del:hover{opacity:1}
.msg-del.armed{opacity:1;color:#ff9a8a;font-size:12px;font-weight:700}
.msg-to-bottom{position:absolute;right:16px;bottom:16px;background:var(--accent);color:#161210;border:none;border-radius:999px;padding:9px 16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.msg-to-bottom:hover{background:var(--accent-d);color:#fff}
.msg-composer{display:flex;gap:10px;align-items:flex-end;margin-top:14px;background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:8px 8px 8px 18px}
.msg-composer:focus-within{border-color:var(--accent)}
.msg-composer textarea{flex:1;background:transparent;border:none;color:var(--text);font:inherit;resize:none;min-height:24px;max-height:140px;padding:10px 0;line-height:1.5}
.msg-composer textarea:focus{outline:none}
.msg-send{flex:none;width:46px;height:46px;border-radius:50%;border:none;background:linear-gradient(135deg,#f0923c,#e07b26);color:#161210;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease}
.msg-send:hover{transform:scale(1.06)}
.msg-send:disabled{opacity:.5;cursor:default;transform:none}
.msg-send svg{width:20px;height:20px}
.msg-hint{color:var(--text3);font-size:12px;margin:8px 0 0}
.msg-notice{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;color:var(--text2)}
.msg-empty{text-align:center;color:var(--text2);padding:44px 16px;background:var(--surface);border:1px dashed var(--border);border-radius:20px}
.msg-empty-ico{display:inline-flex;width:56px;height:56px;border-radius:50%;background:rgba(224,123,38,.14);color:var(--accent);align-items:center;justify-content:center;margin-bottom:10px}
.msg-empty-ico svg{width:26px;height:26px}
.msg-inbox{display:flex;flex-direction:column;gap:10px}
.msg-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:16px;color:var(--text);text-decoration:none;transition:transform .15s ease,border-color .15s ease}
.msg-row:hover{text-decoration:none;transform:translateY(-1px);border-color:rgba(243,237,224,.28)}
.msg-row-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.msg-row-top{display:flex;align-items:center;gap:8px}
.msg-row-top small{margin-left:auto;color:var(--text3);font-size:12px;white-space:nowrap}
.msg-row-excerpt{color:var(--text2);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-unread{background:var(--accent);color:#161210;font-size:12px;font-weight:700;border-radius:999px;padding:2px 9px;line-height:1.5;flex:none}
.tb-msg{position:relative}
@media (max-width:600px){
  .msg-bubble{max-width:86%}
  .msg-head{padding:14px}
  .msg-list{max-height:480px}
  .msg-head-actions{width:100%}
}

/* =====================================================================
   MESSAGING PREMIUM v2 (typing, replies, reactions, attachments, menu)
   ===================================================================== */

/* Inbox improvements */
.msg-inbox-toolbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.msg-inbox-toolbar .msg-search-wrap{flex:1;min-width:220px;margin:0}
.msg-inbox-tabs{display:inline-flex;border:1px solid var(--border);border-radius:999px;padding:3px;background:var(--surface)}
.msg-inbox-tabs a{padding:6px 14px;border-radius:999px;color:var(--text2);font-size:13px;font-weight:600;text-decoration:none}
.msg-inbox-tabs a.active{background:var(--accent);color:#161210}
.msg-inbox-tabs a:hover{text-decoration:none;color:var(--text)}
.msg-inbox-tabs a.active:hover{color:#161210}

.msg-row{position:relative;display:flex;align-items:center;gap:12px}
.msg-row.is-pinned{background:linear-gradient(90deg,rgba(224,123,38,.08),var(--surface) 60%);border-color:rgba(224,123,38,.4)}
.msg-row-link{display:flex;align-items:center;gap:14px;flex:1;min-width:0;color:var(--text);text-decoration:none;padding:2px 0}
.msg-row-link:hover{text-decoration:none}
.msg-row-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.msg-row-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.msg-row-top small{margin-left:auto;color:var(--text3);font-size:12px;white-space:nowrap}
.msg-row-active{color:var(--text3);font-size:12px;font-style:italic}
.msg-pin-dot,.msg-muted-dot{font-size:12px;line-height:1}

.msg-row-menu{position:relative;flex:none}
.msg-row-menu>summary{list-style:none;cursor:pointer;background:transparent;border:0;border-radius:50%;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;color:var(--text2);font-size:18px;line-height:1;user-select:none}
.msg-row-menu>summary::-webkit-details-marker{display:none}
.msg-row-menu>summary:hover{background:var(--surface2);color:var(--text)}
.msg-row-menu[open]>summary{background:var(--surface2);color:var(--text)}
.msg-row-menu-panel{position:absolute;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;min-width:170px;box-shadow:0 16px 40px -16px rgba(0,0,0,.7);z-index:50;display:flex;flex-direction:column;gap:2px}
.msg-row-menu-panel .msg-menu-form{margin:0}
.msg-row-menu-panel button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:9px 11px;color:var(--text);font:inherit;font-size:14px;cursor:pointer}
.msg-row-menu-panel button:hover{background:var(--surface2)}

/* Typing indicator */
.msg-typing{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-size:12px;font-style:italic;margin-top:2px}
.typing-dots{display:inline-flex;gap:3px}
.typing-dots span{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:typingBounce 1.2s infinite ease-in-out}
.typing-dots span:nth-child(2){animation-delay:.15s}
.typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}

/* Reply reference (quoted message above a bubble) */
.msg-reply-ref{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;background:rgba(224,123,38,.08);border:0;border-left:3px solid var(--accent);border-radius:8px;padding:6px 10px;margin:0 0 6px;cursor:pointer;font:inherit;color:inherit;transition:background .15s ease}
.msg-reply-ref:hover{background:rgba(224,123,38,.15)}
.msg-reply-name{font-size:12px;font-weight:700;color:var(--accent)}
.msg-reply-body{font-size:13px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.msg-bubble.mine .msg-reply-ref{background:rgba(22,18,16,.22);border-left-color:#161210}
.msg-bubble.mine .msg-reply-name{color:#161210}
.msg-bubble.mine .msg-reply-body{color:rgba(22,18,16,.7)}

/* Attachments */
.msg-attach{display:block;margin:0 0 6px;border-radius:10px;overflow:hidden;max-width:280px;background:var(--surface2)}
.msg-attach img{display:block;width:100%;height:auto;max-height:280px;object-fit:cover;transition:transform .3s ease}
.msg-attach:hover img{transform:scale(1.02)}

/* Reactions (on message) */
.msg-reactions{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 0}
.msg-react-pill{display:inline-flex;align-items:center;gap:4px;background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:1px 8px;font-size:12px;color:var(--text);cursor:pointer;font:inherit;line-height:1.6;transition:transform .12s ease,border-color .15s ease}
.msg-react-pill span:first-child{font-size:13px}
.msg-react-pill:hover{transform:translateY(-1px);border-color:var(--accent)}
.msg-react-pill.is-mine{background:rgba(224,123,38,.16);border-color:var(--accent)}
.msg-bubble.mine .msg-react-pill{background:rgba(22,18,16,.14);border-color:rgba(22,18,16,.25);color:#161210}
.msg-bubble.mine .msg-react-pill.is-mine{background:rgba(22,18,16,.28);border-color:#161210}

/* Quick-reaction bar (hover) */
.msg-reactions-bar{position:absolute;top:-18px;right:8px;display:flex;gap:2px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:3px;opacity:0;transform:translateY(4px) scale(.96);transition:all .16s ease;pointer-events:none;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);z-index:5}
.msg-bubble:hover .msg-reactions-bar,.msg-bubble:focus-within .msg-reactions-bar{opacity:1;transform:none;pointer-events:auto}
.msg-react-quick{background:none;border:0;font-size:15px;padding:3px 5px;border-radius:50%;cursor:pointer;line-height:1;transition:transform .12s ease}
.msg-react-quick:hover{transform:scale(1.25)}
.msg-bubble{position:relative}

/* Flash highlight when jumping to replied message */
.msg-bubble.is-flash{animation:replyFlash 1.2s ease}
@keyframes replyFlash{0%,100%{background-color:transparent}20%,60%{background-color:rgba(224,123,38,.24)}}
.msg-bubble.mine.is-flash{animation:replyFlashMine 1.2s ease}
@keyframes replyFlashMine{0%,100%{background-color:transparent}20%,60%{background-color:rgba(255,255,255,.28)}}

/* Reply / edit bar above composer */
.msg-reply-bar{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:12px;padding:10px 12px;margin:12px 0 0}
.msg-reply-bar[hidden]{display:none}
.msg-reply-bar-inner{display:flex;align-items:center;gap:10px}
.msg-reply-bar-inner>div{flex:1;min-width:0}
.msg-reply-bar-inner strong{display:block;color:var(--accent);font-size:12px;font-weight:700}
.msg-reply-bar-text{display:block;color:var(--text2);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-reply-cancel{background:transparent;border:1px solid var(--border);border-radius:50%;width:28px;height:28px;color:var(--text2);cursor:pointer;font-size:16px;line-height:1;flex:none}
.msg-reply-cancel:hover{border-color:var(--accent);color:var(--accent)}

/* Composer v2 */
.msg-composer{flex-direction:column;align-items:stretch;padding:10px 12px;border-radius:22px;gap:8px}
.msg-composer-row{display:flex;gap:6px;align-items:flex-end}
.msg-composer textarea{padding:8px 4px}
.msg-emoji-btn,.msg-attach-btn{background:transparent;border:1px solid transparent;color:var(--text2);border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:20px;flex:none;transition:all .15s ease;padding:0;line-height:1}
.msg-emoji-btn:hover,.msg-attach-btn:hover{background:var(--surface2);color:var(--text)}
.msg-emoji-picker{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;border-top:1px solid var(--border);max-height:200px;overflow-y:auto}
.msg-emoji-picker[hidden]{display:none}
.msg-emoji-picker button{background:none;border:0;padding:6px;font-size:20px;line-height:1;border-radius:8px;cursor:pointer;transition:background .12s ease,transform .12s ease}
.msg-emoji-picker button:hover{background:var(--surface2);transform:scale(1.12)}

/* Attachment preview inside composer */
.msg-attach-preview{position:relative;display:inline-block;margin:0 0 8px;max-width:220px;border-radius:10px;overflow:hidden;border:1px solid var(--border);align-self:flex-start}
.msg-attach-preview[hidden]{display:none}
.msg-attach-preview img{display:block;width:100%;max-height:160px;object-fit:cover}
.msg-attach-preview button{position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(22,18,16,.78);color:#f3ede0;cursor:pointer;font-size:15px;line-height:1}
.msg-attach-preview button:hover{background:var(--red);color:#161210}

/* Message edit badge */
.msg-edited{font-style:italic;opacity:.7;font-size:11px;margin-right:4px}

/* Per-message ⋯ menu button */
.msg-menu-btn{background:transparent;border:0;color:var(--text2);cursor:pointer;padding:0 4px;font-size:16px;line-height:1;opacity:0;transition:opacity .15s ease}
.msg-bubble:hover .msg-menu-btn,.msg-bubble:focus-within .msg-menu-btn{opacity:1}
.msg-menu-btn:hover{color:var(--text)}

/* Floating actions menu */
.msg-actions-menu{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;box-shadow:0 20px 50px -20px rgba(0,0,0,.75);z-index:500;display:flex;flex-direction:column;gap:2px;min-width:150px;animation:fade .15s ease}
.msg-actions-menu[hidden]{display:none}
.msg-actions-menu button{background:none;border:0;border-radius:8px;padding:9px 11px;color:var(--text);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.msg-actions-menu button:hover{background:var(--surface2)}
.msg-actions-menu button.is-danger{color:var(--red)}
.msg-actions-menu button.is-danger:hover{background:rgba(255,154,138,.1)}

/* Danger ghost button on chat header */
.msg-ghost-btn.is-danger{color:var(--red);border-color:rgba(255,154,138,.5)}
.msg-ghost-btn.is-danger:hover{background:rgba(255,154,138,.1);border-color:var(--red);color:var(--red)}

/* Search highlight */
.msg-text mark,.msg-reply-body mark{background:rgba(224,123,38,.45);color:var(--text);border-radius:3px;padding:0 2px}

/* Mobile tweaks */
@media (max-width:600px){
  .msg-inbox-toolbar{flex-direction:column;align-items:stretch}
  .msg-row-menu-panel{position:fixed;left:12px;right:12px;top:auto;bottom:12px}
  .msg-reactions-bar{top:-16px}
  .msg-composer{padding:8px 8px;border-radius:18px}
  .msg-emoji-picker{grid-template-columns:repeat(6,1fr)}
  .msg-attach-preview{max-width:160px}
  .msg-reply-bar-text{max-width:220px}
  .msg-menu-btn{opacity:.7}
  .msg-actions-menu{left:12px !important;right:12px;top:auto !important;bottom:12px;flex-direction:row;justify-content:center}
  .msg-actions-menu button{flex:1;text-align:center}
}

/* =====================================================================
   ULTRA PREMIUM MESSAGING DESIGN UPDATES
   ===================================================================== */

/* Glassmorphism Header */
.msg-head {
    background: rgba(29, 24, 19, 0.7) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(243, 237, 224, 0.1) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

/* Smooth Chat Bubbles */
.msg-bubble {
    border-radius: 18px 18px 18px 4px !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}

.msg-bubble.mine {
    border-radius: 18px 18px 4px 18px !important;
    background: linear-gradient(135deg, #f0923c, #e07b26) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(224, 123, 38, 0.25) !important;
    color: #161210 !important;
}

/* Make Text inside Mine readable */
.msg-bubble.mine .msg-text { color: #161210 !important; font-weight: 500; }
.msg-bubble.mine .msg-time, .msg-bubble.mine .msg-ticks { color: rgba(22, 18, 16, 0.7) !important; }

/* Beautiful Reaction Bar (Hover) */
.msg-reactions-bar {
    background: rgba(36, 30, 24, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(243, 237, 224, 0.15) !important;
    border-radius: 99px !important;
    padding: 4px 8px !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5) !important;
    transform: translateY(8px) scale(0.95) !important;
}

.msg-bubble:hover .msg-reactions-bar {
    transform: translateY(0) scale(1) !important;
}

.msg-react-quick {
    font-size: 18px !important;
    transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

.msg-react-quick:hover {
    transform: scale(1.4) translateY(-3px) !important;
}

/* Reaction Pills (Attached to message) */
.msg-react-pill {
    background: rgba(243, 237, 224, 0.08) !important;
    border: 1px solid rgba(243, 237, 224, 0.15) !important;
    border-radius: 99px !important;
    padding: 3px 10px !important;
    font-size: 13px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    transition: all 0.2s ease !important;
}

.msg-react-pill.is-mine {
    background: rgba(224, 123, 38, 0.2) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

.msg-bubble.mine .msg-react-pill {
    background: rgba(22, 18, 16, 0.15) !important;
    border-color: rgba(22, 18, 16, 0.2) !important;
    color: #161210 !important;
}

.msg-bubble.mine .msg-react-pill.is-mine {
    background: rgba(22, 18, 16, 0.3) !important;
    border-color: #161210 !important;
}

/* Typing Indicator Animation */
.msg-typing {
    color: var(--accent) !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.typing-dots span {
    width: 6px !important;
    height: 6px !important;
    background: var(--accent) !important;
    box-shadow: 0 0 5px var(--accent) !important;
}

/* Composer Box Glow */
.msg-composer {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    transition: all 0.3s ease !important;
}

.msg-composer:focus-within {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(224, 123, 38, 0.15) !important;
}

/* Send Button Gradient */
.msg-send {
    background: linear-gradient(135deg, #f0923c, #e07b26) !important;
    box-shadow: 0 4px 12px rgba(224, 123, 38, 0.3) !important;
}