*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --bg:#F5EFE0;--sf:#FFFDF7;--bd:#DDD0B0;--tx:#1E1408;--mu:#7A6840;
  --ac:#B8941F;--ac2:#8B6914;--al:#FDF6E3;
  --gd:linear-gradient(135deg,#C9A84C,#8B6914);
  --marble:linear-gradient(160deg,#FFFDF7 0%,#F5EFE0 40%,#EDE0C4 100%);
  --sh:0 2px 20px rgba(184,148,31,.12);--sh2:0 4px 32px rgba(184,148,31,.18);
  --fd:'Cormorant Garamond',serif;--fb:'Outfit',sans-serif;
}
html,body{height:100%;background:var(--bg);font-family:var(--fb);color:var(--tx);overflow-x:hidden;}
button{font-family:var(--fb);cursor:pointer;}
input,textarea{font-family:var(--fb);}
textarea{resize:none;}
img{display:block;}

#app{max-width:440px;margin:0 auto;min-height:100vh;background:var(--bg);position:relative;}
.screen{display:none;flex-direction:column;min-height:100vh;}
.screen.active{display:flex;}

/* AUTH */
#auth-screen{background:var(--marble);align-items:center;justify-content:center;padding:32px 24px;min-height:100vh;}
.auth-logo-wrap{margin-bottom:10px;animation:fadeUp .6s ease both;}
.auth-logo-img{width:160px;max-width:70vw;border-radius:50%;filter:drop-shadow(0 4px 20px rgba(184,148,31,.35));}
.auth-tag{font-size:11px;color:var(--mu);font-weight:500;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:36px;animation:fadeUp .5s .1s ease both;text-align:center;}
.auth-card{width:100%;background:var(--sf);border-radius:24px;padding:28px;border:1px solid var(--bd);box-shadow:var(--sh2);animation:fadeUp .5s .15s ease both;}
.auth-tabs{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:22px;}
.auth-tab{flex:1;padding:9px;border:none;background:transparent;font-size:13px;font-weight:500;color:var(--mu);border-radius:9px;transition:all .2s;}
.auth-tab.active{background:var(--sf);color:var(--tx);box-shadow:0 1px 5px rgba(184,148,31,.15);}
.field{margin-bottom:14px;}
.field label{display:block;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px;color:var(--mu);margin-bottom:5px;}
.field input,.field textarea{width:100%;padding:11px 14px;border:1.5px solid var(--bd);border-radius:12px;font-size:14px;color:var(--tx);background:var(--bg);outline:none;transition:border-color .2s,background .2s;}
.field input:focus,.field textarea:focus{border-color:var(--ac);background:var(--sf);}
.pass-wrap{position:relative;}
.pass-wrap input{padding-right:44px;}
.eye-btn{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--mu);display:flex;align-items:center;padding:4px;}
.btn-primary{width:100%;padding:14px;background:var(--gd);color:#fff;border:none;border-radius:14px;font-size:14px;font-weight:600;letter-spacing:.3px;transition:all .18s;box-shadow:0 4px 16px rgba(184,148,31,.3);}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);}
.btn-primary:active{transform:translateY(0);}
.btn-primary:disabled{opacity:.5;transform:none;cursor:not-allowed;}
.auth-err{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;border-radius:10px;padding:10px 13px;font-size:13px;margin-bottom:14px;}
.auth-note{font-size:11px;color:var(--mu);text-align:center;margin-top:14px;line-height:1.5;}
.forgot-link{font-size:11px;color:var(--ac);display:block;margin-top:-8px;margin-bottom:14px;cursor:pointer;background:none;border:none;width:100%;text-align:right;}

/* HEADER */
.hdr{position:sticky;top:0;z-index:40;background:rgba(245,239,224,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--bd);padding:10px 16px;display:flex;align-items:center;justify-content:space-between;}
.hdr-logo-img{height:36px;border-radius:50%;}
.hdr-right{display:flex;gap:8px;align-items:center;}
.logout-btn{padding:5px 12px;border:1.5px solid var(--bd);border-radius:20px;background:transparent;font-size:11px;font-weight:500;color:var(--mu);transition:all .15s;}
.logout-btn:hover{color:var(--ac);border-color:var(--ac);}

/* BOTTOM NAV */
.bnav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:440px;background:rgba(245,239,224,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--bd);display:flex;z-index:40;padding-bottom:env(safe-area-inset-bottom);}
.nav-btn{flex:1;padding:7px 4px 8px;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;font-size:10px;font-weight:700;letter-spacing:-.02em;color:#6f5a35;transition:transform .14s ease,color .15s ease,filter .15s ease;position:relative;-webkit-tap-highlight-color:transparent;}
.nav-btn img{width:52px;height:52px;object-fit:contain;display:block;filter:drop-shadow(0 2px 5px rgba(89,64,20,.10));transition:transform .15s ease,filter .15s ease,opacity .15s ease;pointer-events:none;user-select:none;}
.nav-btn .nav-label{position:relative;display:inline-block;line-height:1.05;}
.nav-btn.active{color:var(--ac);}
.nav-btn.active .nav-label::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:999px;background:currentColor;opacity:.95;}
.nav-btn:active{transform:scale(.965);}
.nav-btn:active img{transform:scale(.96);filter:drop-shadow(0 1px 3px rgba(89,64,20,.10));}
.nav-btn.active img{transform:scale(1.05);filter:drop-shadow(0 3px 7px rgba(89,64,20,.14));}

/* STORIES */
.stories-wrap{background:var(--sf);border-bottom:1px solid var(--bd);padding:16px 0 14px;}

.challenge-hub-wrap{background:var(--sf);border-bottom:1px solid var(--bd);padding:10px 16px 12px;}
.challenge-hub{background:linear-gradient(180deg,rgba(255,255,255,.70),rgba(246,241,230,.90));border:1px solid rgba(201,188,160,.58);border-radius:30px;padding:10px 12px 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;box-shadow:0 1px 0 rgba(255,255,255,.72) inset,0 8px 18px rgba(125,101,43,.04);}
.challenge-hub-btn{position:relative;border:none;background:transparent;border-radius:22px;padding:4px 6px 4px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .14s ease, filter .18s ease, opacity .18s ease;overflow:hidden;}
.challenge-hub-btn::before{content:"";position:absolute;inset:3px;border-radius:20px;background:radial-gradient(circle at top,rgba(255,255,255,.30),rgba(255,255,255,0) 60%);opacity:0;transition:opacity .18s ease;pointer-events:none;}
.challenge-hub-btn:hover::before,.challenge-hub-btn:focus-visible::before{opacity:1;}
.challenge-hub-btn:active{transform:scale(.965);}
.challenge-hub-btn.pressed{transform:scale(.955);filter:brightness(.98);}
.challenge-hub-btn img{width:min(14.5vw,68px);max-width:68px;min-width:58px;aspect-ratio:1/1;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 6px 12px rgba(81,56,19,.08));user-select:none;}
.challenge-hub-label{font-size:14px;line-height:1.02;font-weight:800;letter-spacing:-.03em;color:#4c3718;text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.35);}
.challenge-hub-btn .tap-glow{position:absolute;inset:auto 22% 8px;height:14px;border-radius:999px;background:radial-gradient(circle,rgba(193,151,56,.18),rgba(193,151,56,0) 72%);opacity:0;transform:scale(.7);pointer-events:none;}
.challenge-hub-btn.pressed .tap-glow{opacity:1;transform:scale(1);transition:transform .18s ease,opacity .18s ease;}
@media (max-width:380px){
  .challenge-hub-wrap{padding:8px 10px 10px;}
  .challenge-hub{padding:8px 10px 7px;border-radius:26px;gap:4px;}
  .challenge-hub-btn{padding:4px 3px 3px;gap:5px;}
  .challenge-hub-label{font-size:13px;}
  .challenge-hub-btn img{width:min(18vw,60px);max-width:60px;min-width:50px;}
}

.stories-row{display:flex;gap:14px;overflow-x:auto;padding:10px 16px 4px;scrollbar-width:none;}
.stories-row::-webkit-scrollbar{display:none;}
.story-item{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;flex-shrink:0;}
.story-avatar{width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:24px;font-weight:600;color:#fff;transition:transform .15s;position:relative;flex-shrink:0;overflow:visible;isolation:isolate;z-index:0;}
.story-avatar-media{position:absolute;inset:0;border-radius:50%;overflow:hidden;display:flex;align-items:center;justify-content:center;background:inherit;}
.story-avatar-media img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.story-avatar-media span{display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.story-avatar:hover{transform:scale(1.06);}
.story-avatar.has-ring{box-shadow:0 0 0 2px #fff;}
.story-avatar.has-ring::before,.profile-story-avatar.has-ring::before,.avatar.has-story-ring::before{content:"";position:absolute;inset:-5px;border-radius:inherit;padding:3px;background:conic-gradient(from 210deg,#7b5410 0deg,#f7dfa0 55deg,#d4a91f 115deg,#8c6513 195deg,#f0d27a 260deg,#6f4d10 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;box-shadow:0 0 12px rgba(212,169,31,.38),0 0 20px rgba(247,223,160,.18);pointer-events:none;z-index:-1;}
.story-avatar.has-ring.ring-seen::before,.profile-story-avatar.has-ring.ring-seen::before,.avatar.has-story-ring.ring-seen::before{background:conic-gradient(from 210deg,#87909d 0deg,#eef2f7 55deg,#c1c9d4 115deg,#747d89 195deg,#f7f9fc 260deg,#7c8592 360deg);box-shadow:0 0 12px rgba(177,187,199,.34),0 0 20px rgba(238,242,247,.16);}
.story-avatar.add-story{background:var(--al)!important;border:2px dashed var(--ac)!important;color:var(--ac);font-size:26px;}

.story-name{font-size:11px;color:var(--mu);font-weight:500;max-width:86px;text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.story-type-icons{display:flex;gap:4px;align-items:center;justify-content:center;margin-top:2px;min-height:14px;}
.story-type-icon{font-size:11px;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.18));}
.story-add-badge{position:absolute;right:-12px;bottom:-9px;width:32px;height:32px;border:3px solid #fff;border-radius:50%;background:linear-gradient(135deg,#F6D86B,#C99812);color:#5F3A00;display:flex;align-items:center;justify-content:center;font-size:22px;line-height:1;font-weight:800;box-shadow:0 8px 18px rgba(30,20,8,.34);cursor:pointer;z-index:4;}
.story-add-badge:hover{transform:scale(1.05);}

/* FEED */
.feed{flex:1;padding-bottom:72px;}
.post-card{background:var(--sf);border-bottom:1px solid var(--bd);animation:fadeUp .25s ease both;}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;}
.avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:17px;font-weight:600;color:#fff;flex-shrink:0;cursor:pointer;transition:transform .15s;overflow:visible;position:relative;isolation:isolate;}
.avatar:hover{transform:scale(1.05);}
.avatar.lg{width:74px;height:74px;font-size:30px;}
.avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.post-meta{flex:1;}
.post-author{font-size:18px;font-weight:700;cursor:pointer;transition:color .15s;line-height:1.2;}
.post-author:hover{color:var(--ac);}
.post-time{font-size:15px;color:var(--mu);font-weight:500;margin-top:3px;line-height:1.15;}
.post-img{width:100%;max-height:440px;object-fit:cover;}
.post-video{width:100%;max-height:440px;object-fit:cover;}
.post-body{padding:10px 14px 8px;font-size:15.5px;line-height:1.68;font-weight:350;}
.post-actions{display:flex;gap:2px;padding:6px 10px 12px;}
.action-btn{display:flex;align-items:center;gap:8px;padding:7px 12px;border-radius:20px;border:none;background:transparent;font-size:14.5px;color:#D8B24A;font-weight:700;transition:all .15s;}
.action-btn:hover{background:var(--bg);color:#F2C94C;}
.action-btn.liked{color:#F2C94C;}

/* NEW POST */
#new-screen{padding-bottom:80px;}
.new-wrap{padding:18px 16px;}
.new-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.new-head h2{font-size:22px;font-weight:700;letter-spacing:-.3px;}
.img-preview{position:relative;border-radius:14px;overflow:hidden;margin-bottom:12px;}
.img-preview img,.img-preview video{width:100%;max-height:300px;object-fit:cover;}
.img-remove{position:absolute;top:10px;right:10px;width:30px;height:30px;background:rgba(0,0,0,.5);border-radius:50%;border:none;color:#fff;font-size:14px;display:flex;align-items:center;justify-content:center;}
.media-btns{display:flex;gap:8px;margin-bottom:12px;}
.add-media-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:11px;border:1.5px dashed var(--bd);border-radius:12px;background:transparent;font-size:13px;color:var(--mu);transition:all .15s;}
.add-media-btn:hover{border-color:var(--ac);color:var(--ac);background:var(--al);}

/* PROFILE */
.profile-header{background:var(--sf);border-bottom:1px solid var(--bd);padding:20px 16px 16px;}
.profile-top{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.profile-info h2{font-size:22px;font-weight:700;line-height:1;letter-spacing:-.3px;}
.profile-info p{font-size:11px;color:var(--mu);margin-top:3px;font-weight:300;}
.profile-bio{font-size:13px;line-height:1.6;font-weight:300;color:var(--mu);padding:4px 0 6px;}
.profile-bio-top{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.streak-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:rgba(184,148,31,.12);border:1px solid rgba(184,148,31,.26);font-size:12px;font-weight:700;color:var(--ac);white-space:nowrap;}
.streak-pill.sm{font-size:11px;padding:4px 9px;}
.post-submeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px;}
.post-sep{width:4px;height:4px;border-radius:50%;background:rgba(110,85,46,.28);}
.hot-story .story-avatar-media{background:radial-gradient(circle at 30% 30%, #f7dfa0 0%, #d4a91f 48%, #5a3a0f 100%);}
.hot-story .story-avatar-media span{font-size:28px;filter:drop-shadow(0 3px 8px rgba(0,0,0,.22));}
.story-hot-badge{position:absolute;right:-1px;top:-1px;min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:linear-gradient(135deg,#f6d574,#b88912);border:2px solid var(--sf);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#2f2209;box-shadow:0 8px 18px rgba(184,148,31,.28);}
.profile-fields{display:flex;flex-wrap:wrap;gap:8px;padding:6px 0 10px;}
.profile-field-tag{background:var(--al);border:1px solid var(--bd);border-radius:20px;padding:5px 12px;font-size:12px;color:var(--mu);display:flex;align-items:center;gap:5px;}
.profile-field-tag span{font-weight:500;color:var(--tx);}
.profile-stats{display:flex;gap:24px;padding-top:4px;}
.stat-item{text-align:center;}
.stat-num{font-family:var(--fd);font-size:24px;font-weight:600;line-height:1;}
.stat-lbl{font-size:10px;color:var(--mu);font-weight:400;margin-top:2px;}
.edit-bio-btn{margin-top:10px;padding:7px 16px;border:1.5px solid var(--bd);border-radius:20px;background:transparent;font-size:12px;color:var(--mu);transition:all .15s;}
.edit-bio-btn:hover{border-color:var(--ac);color:var(--ac);}
.back-btn{padding:4px 8px;border:none;background:transparent;font-size:20px;color:var(--mu);margin-bottom:4px;}
.avatar-upload-wrap{position:relative;cursor:pointer;display:inline-block;}
.avatar-edit-badge{position:absolute;bottom:0;right:0;width:22px;height:22px;background:var(--gd);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--sf);}

/* MESSAGES */
#tab-messages{background:var(--bg);flex-direction:column;}
.messages-wrap{display:flex;flex-direction:column;min-height:100%;padding-bottom:80px;}
.dm-list{display:flex;flex-direction:column;padding:10px 14px 0;gap:10px;}
.dm-thread-card{display:flex;align-items:center;gap:12px;background:var(--sf);border:1px solid var(--bd);border-radius:18px;padding:12px 14px;box-shadow:var(--sh);}
.dm-thread-meta{flex:1;min-width:0;}
.dm-thread-top{display:flex;align-items:center;gap:8px;}
.dm-thread-name{font-size:15px;font-weight:700;color:var(--tx);}
.dm-thread-time{margin-left:auto;font-size:11px;color:var(--mu);}
.dm-thread-preview{font-size:13px;color:var(--mu);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dm-thread-badge{min-width:36px;height:22px;border-radius:999px;background:var(--gd);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 8px;}
.dm-empty{padding:32px 20px;color:var(--mu);text-align:center;font-size:13px;line-height:1.6;}
.dm-composer{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:1px solid var(--bd);background:var(--sf);}
.dm-composer input{flex:1;padding:12px 16px;border-radius:22px;border:1.5px solid var(--bd);background:var(--bg);font-size:14px;outline:none;}
.dm-composer input:focus{border-color:var(--ac);}
.dm-messages{flex:1;overflow-y:auto;padding:8px 14px 12px;display:flex;flex-direction:column;gap:10px;background:linear-gradient(180deg, rgba(250,246,238,.85), rgba(245,239,227,.95));}
.dm-bubble{max-width:82%;padding:12px 14px;border-radius:18px;font-size:14px;line-height:1.5;box-shadow:var(--sh);word-break:break-word;}
.dm-bubble.me{margin-left:auto;background:linear-gradient(135deg,#b8941f,#8b6b17);color:#fff;border-bottom-right-radius:6px;}
.dm-bubble.other{margin-right:auto;background:var(--sf);color:var(--tx);border:1px solid var(--bd);border-bottom-left-radius:6px;}
.dm-bubble-time{font-size:11px;opacity:.7;margin-top:6px;}
.dm-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--bd);background:var(--sf);}
.dm-head-title{display:flex;flex-direction:column;min-width:0;}
.dm-head-title strong{font-size:16px;}
.dm-head-title span{font-size:12px;color:var(--mu);}
.dm-story-reply-btn,.story-like-btn{position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));border:none;border-radius:999px;backdrop-filter:blur(12px);display:flex;align-items:center;gap:8px;padding:11px 14px;font-size:13px;font-weight:800;z-index:8;box-shadow:0 14px 30px rgba(0,0,0,.24);isolation:isolate;}
.story-like-btn{left:14px;background:rgba(15,10,4,.58);color:#fff;}
.story-like-btn.liked{background:linear-gradient(135deg,#e7c765,#b88912);color:#2b1f09;}
.dm-story-reply-btn{right:14px;background:rgba(255,255,255,.92);color:#5b4316;}
.story-like-count{font-weight:800;letter-spacing:.01em;}

/* MODALS */
.overlay{position:fixed;inset:0;background:rgba(30,20,8,.55);z-index:60;display:none;align-items:flex-end;justify-content:center;animation:fadeIn .2s ease;}
#dm-overlay{z-index:82;}
.overlay.open{display:flex;}
.modal{width:100%;max-width:440px;background:var(--sf);border-radius:24px 24px 0 0;padding:20px 20px calc(20px + env(safe-area-inset-bottom));max-height:88vh;display:flex;flex-direction:column;animation:slideUp .28s cubic-bezier(.32,1,.23,1);}
.modal-handle{width:38px;height:4px;background:var(--bd);border-radius:2px;margin:0 auto 18px;}
.modal-title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:16px;}
.comments-list{flex:1;overflow-y:auto;margin-bottom:14px;display:flex;flex-direction:column;gap:12px;}
.comment-item{display:flex;gap:10px;align-items:flex-start;}
.comment-bubble{background:var(--bg);border-radius:16px;padding:11px 14px;flex:1;}
.comment-author{font-size:14px;font-weight:700;margin-bottom:4px;cursor:pointer;}
.comment-text{font-size:15px;font-weight:350;line-height:1.58;word-break:break-word;}
.comment-time{font-size:12px;color:var(--mu);margin-top:6px;}
.mention{color:inherit;font-weight:700;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px;font-size:1.04em;}
.comment-input-wrap{position:relative;flex:1;}
.comment-input-row{display:flex;gap:8px;align-items:center;}
.comment-input-row input{width:100%;padding:13px 16px;border:1.5px solid var(--bd);border-radius:24px;font-size:16px;background:var(--bg);outline:none;transition:border-color .2s;}
.comment-input-row input:focus{border-color:var(--ac);}
.comment-close-btn,.dm-close-btn{appearance:none;border:none;background:transparent;color:var(--tx);font-size:24px;line-height:1;padding:6px 4px;cursor:pointer;opacity:.72;}
.comment-close-btn:hover,.dm-close-btn:hover{opacity:1;}
.mention-suggestions{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:#fff;border:1px solid var(--bd);border-radius:18px;box-shadow:0 16px 36px rgba(0,0,0,.12);padding:8px;display:none;max-height:220px;overflow:auto;z-index:30;}
.mention-suggestions.open{display:block;}
.mention-suggestion{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:transparent;border-radius:14px;cursor:pointer;text-align:left;}
.mention-suggestion:hover,.mention-suggestion.active{background:#f7f3ea;}
.mention-suggestion .avatar{width:34px;height:34px;font-size:13px;flex:0 0 34px;}
.mention-suggestion-meta{display:flex;flex-direction:column;min-width:0;}
.mention-suggestion-name{font-size:14px;font-weight:700;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mention-suggestion-sub{font-size:12px;color:var(--mu);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.comment-item .avatar{width:42px;height:42px;font-size:14px;}
.comment-author{font-size:15px;}
.comment-text{font-size:16px;line-height:1.45;}
.comment-time{font-size:13px;}
.dm-composer{position:relative;}
.dm-composer input{font-size:16px;}
.dm-bubble{white-space:pre-wrap;}
.send-btn{width:40px;height:40px;border-radius:50%;background:var(--gd);border:none;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

/* STORY VIEW */
.story-modal{position:relative;background:#000;color:#fff;border-radius:0;width:100%;height:100%;max-width:none;padding:calc(14px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom));animation:fadeIn .2s ease;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.story-progress-row{position:absolute;top:calc(8px + env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:4px;margin-bottom:0;z-index:4;}
.story-progress-seg{flex:1;height:4px;background:rgba(255,255,255,.22);border-radius:999px;overflow:hidden;backdrop-filter:blur(2px);}
.story-progress-fill{height:100%;background:var(--ac);border-radius:2px;width:0%;}
.story-progress-fill.done{width:100%;}
.story-progress-fill.active{}
@keyframes storyProg{from{width:0%}to{width:100%}}
.story-head{display:none;}
.story-user-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:18px;font-weight:600;border:2px solid var(--ac);flex-shrink:0;overflow:hidden;}
.story-user-av img{width:100%;height:100%;object-fit:cover;}
.story-username{font-size:16px;font-weight:700;}
.story-time{font-size:11px;opacity:.4;margin-left:auto;}
.story-close{background:transparent;border:none;color:rgba(255,255,255,.6);font-size:22px;padding:0 4px;margin-left:8px;}
.story-text{font-size:24px;font-weight:400;line-height:1.55;opacity:.98;max-width:86vw;margin:0 auto;padding:32px 24px;text-align:center;text-shadow:0 2px 18px rgba(0,0,0,.35);}
.story-video{width:100%;height:100%;border-radius:0;margin:0;max-height:none;object-fit:contain;background:#000;}
.story-media-wrap{position:relative;flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:#000;}
.story-tap-zone{position:absolute;top:0;bottom:0;width:34%;z-index:3;background:transparent;border:none;}
.story-tap-zone.left{left:0;}
.story-tap-zone.right{right:0;}
.story-tap-zone.center{left:33%;width:34%;}
.story-close-hotspot{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:44px;height:44px;border:none;background:transparent;z-index:5;opacity:.02;}
.story-delete-btn{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px;width:44px;height:44px;border:none;background:rgba(0,0,0,.34);color:#fff;border-radius:999px;padding:0;font-size:0;z-index:7;backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.18);display:flex;align-items:center;justify-content:center;}
.story-delete-btn svg{width:18px;height:18px;stroke:currentColor;}
.story-delete-btn:hover{background:rgba(0,0,0,.34);}
.story-close-hotspot:focus{outline:none;}
.story-viewer-meta{position:absolute;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));right:14px;z-index:4;display:flex;align-items:center;gap:10px;pointer-events:none;opacity:0;transition:opacity .18s;}
.story-viewer-meta.show{opacity:1;}
.story-viewer-meta .story-user-av{width:38px;height:38px;border-width:2px;}
.story-viewer-meta .story-username{font-size:15px;font-weight:700;}
.story-viewer-meta .story-time{font-size:11px;opacity:.7;margin-left:0;}
.story-hint-close{margin-left:auto;font-size:12px;opacity:.7;}
.profile-story-avatar{cursor:pointer;position:relative;overflow:visible;isolation:isolate;z-index:0;}
.profile-story-avatar.has-ring{box-shadow:0 0 0 2px #fff;}
.avatar.has-story-ring{box-shadow:0 0 0 2px #fff;}
.post-more-btn{margin-left:auto;border:none;background:transparent;color:var(--ac);font-size:22px;line-height:1;padding:4px 6px;border-radius:10px;cursor:pointer;}
.post-more-btn:hover{background:var(--al);}

/* ADD STORY */
.story-type-btns{display:flex;gap:8px;margin-bottom:16px;}
.story-type-btn{flex:1;padding:10px;border:1.5px solid var(--bd);border-radius:12px;background:transparent;font-size:13px;font-weight:500;color:var(--mu);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;}
.story-type-btn.active{border-color:var(--ac);color:var(--ac);background:var(--al);}

/* UPLOAD PROGRESS */
.upload-progress-wrap{margin-top:12px;display:none;}
.upload-progress-wrap.visible{display:block;}
.upload-progress-bar-bg{height:6px;background:var(--bd);border-radius:4px;overflow:hidden;}
.upload-progress-bar-fill{height:100%;background:var(--gd);border-radius:4px;width:0%;transition:width .15s;}
.upload-progress-label{font-size:11px;color:var(--mu);margin-top:5px;text-align:center;}

/* PWA */
.pwa-overlay{position:fixed;inset:0;background:rgba(30,20,8,.6);z-index:80;display:none;align-items:flex-end;justify-content:center;}
.pwa-overlay.open{display:flex;}
.pwa-card{width:100%;max-width:440px;background:var(--sf);border-radius:24px 24px 0 0;padding:28px 24px calc(32px + env(safe-area-inset-bottom));animation:slideUp .32s cubic-bezier(.32,1,.23,1);}
.pwa-icon{width:72px;height:72px;border-radius:18px;overflow:hidden;margin:0 auto 16px;box-shadow:var(--sh2);}
.pwa-icon img{width:100%;height:100%;object-fit:cover;}
.pwa-title{font-size:22px;font-weight:700;text-align:center;margin-bottom:6px;letter-spacing:-.3px;}
.pwa-sub{font-size:13px;color:var(--mu);text-align:center;line-height:1.6;margin-bottom:24px;font-weight:300;}
.pwa-steps{background:var(--al);border:1px solid var(--bd);border-radius:16px;padding:16px;margin-bottom:20px;}
.pwa-step{display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.5;}
.pwa-step+.pwa-step{margin-top:12px;}
.pwa-step-num{width:24px;height:24px;border-radius:50%;background:var(--gd);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.pwa-btn-install{width:100%;padding:14px;background:var(--gd);color:#fff;border:none;border-radius:14px;font-size:14px;font-weight:600;box-shadow:0 4px 16px rgba(184,148,31,.3);margin-bottom:10px;}
.pwa-btn-skip{width:100%;padding:10px;background:transparent;border:none;font-size:13px;color:var(--mu);}

/* EMPTY / LOADING */
.empty-state{text-align:center;padding:60px 24px;}
.empty-ico{font-size:44px;margin-bottom:14px;}
.empty-state h3{font-family:var(--fd);font-size:26px;font-weight:600;margin-bottom:8px;}
.empty-state p{font-size:13px;font-weight:300;color:var(--mu);line-height:1.6;}
#loading{position:fixed;inset:0;background:var(--marble);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;}
#loading img{width:320px;max-width:80vw;border-radius:50%;margin-bottom:16px;filter:drop-shadow(0 4px 20px rgba(184,148,31,.35));}
#loading p{font-size:12px;color:var(--mu);font-weight:300;letter-spacing:.5px;}

@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* ===== ADMIN PANEL ===== */
#tab-admin{background:var(--bg);}
.admin-wrap{padding:16px;padding-bottom:80px;}
.admin-title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px;}
.admin-sub{font-size:12px;color:var(--mu);margin-bottom:18px;font-weight:300;}
.admin-search{width:100%;padding:10px 14px;border:1.5px solid var(--bd);border-radius:12px;font-size:14px;color:var(--tx);background:var(--sf);outline:none;margin-bottom:14px;}
.admin-search:focus{border-color:var(--ac);}
.user-card{background:var(--sf);border:1px solid var(--bd);border-radius:16px;padding:14px 16px;margin-bottom:10px;}
.user-card-top{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.user-card-info{flex:1;}
.user-card-name{font-size:14px;font-weight:600;line-height:1.2;}
.user-card-meta{font-size:11px;color:var(--mu);margin-top:2px;}
.user-card-fields{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px;}
.user-card-field{font-size:11px;background:var(--al);border:1px solid var(--bd);border-radius:10px;padding:3px 9px;color:var(--mu);}
.user-card-field span{color:var(--tx);font-weight:500;}
.user-card-actions{display:flex;gap:8px;}
.admin-btn{flex:1;padding:8px;border-radius:10px;border:1.5px solid var(--bd);background:transparent;font-size:12px;font-weight:500;color:var(--mu);transition:all .15s;}
.admin-btn:hover{border-color:var(--ac);color:var(--ac);}
.admin-btn.danger{border-color:#FECACA;color:#B91C1C;}
.admin-btn.danger:hover{background:#FEF2F2;}
.admin-badge{display:inline-block;font-size:10px;padding:2px 7px;border-radius:8px;font-weight:600;background:var(--al);color:var(--ac);border:1px solid var(--bd);margin-left:6px;}
.admin-stats-row{display:flex;gap:10px;margin-bottom:18px;}
.admin-stat{flex:1;background:var(--sf);border:1px solid var(--bd);border-radius:14px;padding:12px;text-align:center;}
.admin-stat-num{font-family:var(--fd);font-size:26px;font-weight:600;color:var(--ac);}
.admin-stat-lbl{font-size:10px;color:var(--mu);margin-top:2px;}
.reset-modal-wrap{padding:4px 0;}

.dm-context-chip.open{display:inline-flex !important;}
.dm-context-chip b{color:var(--tx);}
.dm-thread-story-context,.dm-bubble-story-context{margin-top:8px;display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--bg);border:1px solid var(--bd);min-width:0;cursor:pointer;}
.dm-thread-story-thumb,.dm-bubble-story-thumb{width:42px;height:42px;border-radius:12px;overflow:hidden;background:linear-gradient(135deg,#e9dcc0,#c9af6b);display:flex;align-items:center;justify-content:center;flex:0 0 42px;font-size:18px;color:#5b4316;font-weight:800;}
.dm-thread-story-thumb img,.dm-bubble-story-thumb img{width:100%;height:100%;object-fit:cover;}
.dm-thread-story-meta,.dm-bubble-story-meta{min-width:0;display:flex;flex-direction:column;}
.dm-thread-story-label,.dm-bubble-story-kicker{font-size:11px;font-weight:800;color:var(--ac);text-transform:uppercase;letter-spacing:.06em;}
.dm-thread-story-title,.dm-bubble-story-title{font-size:13px;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ===== COMMUNITY CHAT FIXED / PREMIUM LITE ===== */
#tab-community-chat{display:none;flex-direction:column;min-height:100vh;background:linear-gradient(180deg,#f4eee1 0%,#efe7d9 100%) !important;position:relative;z-index:50;}
#tab-community-chat .community-chat-wrap{display:flex;flex-direction:column;min-height:100vh;background:transparent;}
#tab-community-chat .community-chat-header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(244,238,225,.96);border-bottom:1px solid rgba(122,104,64,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
#tab-community-chat .community-chat-back-btn,
#tab-community-chat .community-chat-menu-btn{width:42px;height:42px;border:1.5px solid rgba(122,104,64,.22);border-radius:14px;background:linear-gradient(180deg,#fffdf8,#ebe2cf);color:#5e4a23;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(73,51,14,.10);flex:0 0 42px;}
#tab-community-chat .community-chat-group-avatar{width:50px;height:50px;border-radius:18px;background:linear-gradient(135deg,#7a5c24,#b78c3b);color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 10px 24px rgba(73,51,14,.18);flex:0 0 50px;}
#tab-community-chat .community-chat-header-text{display:flex;flex-direction:column;min-width:0;flex:1;}
#tab-community-chat .community-chat-header-text strong{font-size:20px;font-weight:800;letter-spacing:-.02em;color:#2f2413;}
#tab-community-chat .community-chat-header-text span{font-size:13px;color:#74674b;margin-top:2px;}
#tab-community-chat .community-chat-status{margin:12px 16px 0;padding:10px 14px;border-radius:14px;background:#f7f1e4;border:1px solid #ddd1b4;color:#6e6246;font-size:13px;font-weight:700;}
#tab-community-chat .community-chat-status.is-ok{background:#eef8ee;border-color:#b9ddbb;color:#2e6b37;}
#tab-community-chat .community-chat-status.is-error{background:#fff0f0;border-color:#e8b4b4;color:#922b2b;}
#tab-community-chat .community-chat-status.is-muted{background:#f5f1e6;border-color:#ddd1b4;color:#6e6246;}
#tab-community-chat .community-chat-messages{flex:1;overflow-y:auto;padding:14px 16px 120px;display:flex;flex-direction:column;background:radial-gradient(circle at top, rgba(255,255,255,.35), transparent 35%), transparent;}
#tab-community-chat .community-chat-day-divider{display:flex;align-items:center;justify-content:center;margin:8px 0 14px;}
#tab-community-chat .community-chat-day-divider span{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;background:rgba(173,154,118,.24);border:1px solid rgba(122,104,64,.14);font-size:11px;font-weight:700;color:#6d5d40;}
#tab-community-chat .community-chat-row{display:flex;align-items:flex-end;gap:10px;margin-bottom:14px;}
#tab-community-chat .community-chat-row.is-own{flex-direction:row-reverse;}
#tab-community-chat .community-chat-row.is-flash{animation:communityChatFlash 1.2s ease;}
#tab-community-chat .community-chat-avatar{width:38px !important;height:38px !important;min-width:38px !important;max-width:38px !important;max-height:38px !important;border-radius:999px;overflow:hidden;flex:0 0 38px;background:linear-gradient(135deg,#8d7a4e,#c4a74f);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;box-shadow:0 6px 18px rgba(0,0,0,.08);cursor:pointer;}
#tab-community-chat .community-chat-avatar img{width:100% !important;height:100% !important;min-width:100% !important;max-width:100% !important;object-fit:cover;display:block;}
#tab-community-chat .community-chat-bubble-wrap{max-width:min(82%, 560px);display:flex;flex-direction:column;gap:5px;min-width:0;}
#tab-community-chat .community-chat-row.is-own .community-chat-bubble-wrap{align-items:flex-end;}
#tab-community-chat .community-chat-meta{display:flex;align-items:center;gap:8px;padding:0 4px;}
#tab-community-chat .community-chat-row.is-own .community-chat-meta{justify-content:flex-end;}
#tab-community-chat .community-chat-name{border:none;background:none;padding:0;margin:0;font-size:12px;font-weight:800;color:#3b2d17;cursor:pointer;}
#tab-community-chat .community-chat-time{font-size:11px;color:#8a7b5e;}
#tab-community-chat .community-chat-bubble{background:rgba(255,255,255,.95);border:1px solid rgba(164,145,107,.22);border-radius:20px 20px 20px 8px;padding:12px 14px;box-shadow:0 10px 24px rgba(0,0,0,.05);}
#tab-community-chat .community-chat-row.is-own .community-chat-bubble{background:linear-gradient(135deg,#6f4a1f,#a97b31);color:#fff;border-color:transparent;border-radius:20px 20px 8px 20px;}
#tab-community-chat .community-chat-text{font-size:15px;line-height:1.45;word-break:break-word;white-space:normal;}
#tab-community-chat .community-chat-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
#tab-community-chat .community-chat-action-btn{border:none;background:rgba(122,104,64,.10);padding:6px 10px;border-radius:999px;font-size:11px;font-weight:800;color:#6b5935;}
#tab-community-chat .community-chat-row.is-own .community-chat-action-btn{background:rgba(255,255,255,.16);color:#fff;}
#tab-community-chat .community-chat-action-btn.is-admin{background:rgba(145,34,34,.10);color:#8d2f2f;}
#tab-community-chat .community-chat-row.is-own .community-chat-action-btn.is-admin{background:rgba(255,255,255,.2);color:#fff;}
#tab-community-chat .community-chat-quoted{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;border:none;background:rgba(122,104,64,.08);padding:9px 10px;border-radius:12px;margin:0 0 10px;color:inherit;}
#tab-community-chat .community-chat-row.is-own .community-chat-quoted{background:rgba(255,255,255,.18);}
#tab-community-chat .community-chat-quoted strong{font-size:11px;opacity:.92;margin-bottom:3px;}
#tab-community-chat .community-chat-quoted span{font-size:12px;opacity:.82;line-height:1.35;}
#tab-community-chat .community-chat-reply-bar{display:flex;align-items:flex-start;gap:10px;margin:12px 16px 0;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.7);border:1px solid rgba(122,104,64,.18);}
#tab-community-chat .community-chat-reply-content{flex:1;min-width:0;}
#tab-community-chat .community-chat-reply-label{font-size:11px;font-weight:800;color:#7a6840;text-transform:uppercase;letter-spacing:.04em;}
#tab-community-chat .community-chat-reply-text{font-size:13px;color:#453520;line-height:1.35;margin-top:2px;}
#tab-community-chat .community-chat-reply-close{border:none;background:transparent;color:#7a6840;font-size:20px;line-height:1;padding:0 2px;}
#tab-community-chat .community-chat-composer{position:sticky;bottom:0;display:flex;align-items:center;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid rgba(122,104,64,.14);background:rgba(255,255,255,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
#tab-community-chat .community-chat-composer input{flex:1;min-width:0;padding:14px 16px;border-radius:22px;border:1.5px solid rgba(122,104,64,.22);background:var(--sf);font-size:16px;outline:none;}
#tab-community-chat .community-chat-composer input:focus{border-color:#b8941f;}
#tab-community-chat .community-chat-send-btn{padding:13px 16px;border:none;border-radius:16px;background:linear-gradient(135deg,#8a6327,#b8941f);color:#fff;font-size:13px;font-weight:800;opacity:.55;min-width:72px;}
#tab-community-chat .community-chat-send-btn:not(:disabled){opacity:1;}
#tab-community-chat .community-chat-send-btn:disabled{cursor:not-allowed;}
#tab-community-chat .community-chat-empty{margin:auto 0;text-align:center;padding:24px 12px 40px;color:#7d7157;}
#tab-community-chat .community-chat-empty-icon{font-size:42px;margin-bottom:12px;}
#tab-community-chat .community-chat-empty-title{font-size:18px;font-weight:700;color:#2f2413;margin-bottom:8px;}
#tab-community-chat .community-chat-empty-subtitle{font-size:14px;line-height:1.55;}
#tab-community-chat .community-chat-note{padding:0 16px 14px;color:#5e5238;font-size:12px;line-height:1.45;background:rgba(255,255,255,.88);}
#tab-community-chat .community-chat-admin-menu{position:absolute;top:62px;right:16px;z-index:20;display:flex;flex-direction:column;gap:6px;padding:10px;border-radius:16px;background:rgba(255,255,255,.98);border:1px solid rgba(122,104,64,.18);box-shadow:0 16px 36px rgba(0,0,0,.12);}
#tab-community-chat .community-chat-admin-menu button{border:none;background:#f5efe1;color:#4a391d;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:700;text-align:left;white-space:nowrap;}
.challenge-hub-btn{position:relative;}
.challenge-hub-badge{position:absolute;top:2px;right:14px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,#d14b4b,#9f1f1f);color:#fff;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(90,16,16,.25);border:2px solid rgba(255,253,247,.92);z-index:2;}
@keyframes communityChatFlash{0%,100%{transform:none;box-shadow:none;}35%{transform:scale(1.01);box-shadow:0 0 0 8px rgba(184,148,31,.10);}}