:root{--bg:#0d1120;--panel:#171c30;--panel2:#222a48;--text:#f5f7ff;--muted:#9ca7c7;--accent:#705eff;--accent2:#947fff;--danger:#ff5c76;--line:#2b3456;--green:#42dc95}
*{box-sizing:border-box}html,body{margin:0;height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.screen{min-height:100vh}.center{display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 20% 15%,#38267b 0,transparent 32%),radial-gradient(circle at 80% 85%,#123862 0,transparent 30%),var(--bg)}
.auth-card{width:min(430px,100%);padding:30px;background:#171c30ee;border:1px solid var(--line);border-radius:28px;box-shadow:0 30px 80px #0008}.logo{font-size:52px}h1,h2,p{margin-top:0}.muted{color:var(--muted)}.small{font-size:13px}
.tabs{display:flex;gap:8px;margin:24px 0 16px}.tab,.nav,.icon-btn{border:0;background:transparent;color:var(--muted)}.tab{flex:1;padding:12px;border-radius:12px}.tab.active{background:var(--panel2);color:white}form{display:grid;gap:12px}input,textarea{width:100%;border:1px solid var(--line);background:#10162a;color:white;border-radius:14px;padding:13px 14px;outline:none}input:focus,textarea:focus{border-color:var(--accent)}
.primary,.danger{border:0;border-radius:14px;padding:13px 16px;color:white;font-weight:800}.primary{background:linear-gradient(135deg,var(--accent),var(--accent2))}.danger{background:#3b1822;color:#ff9aaa}.inline{width:auto}.secondary-space{margin-bottom:10px}
#appScreen{display:flex}.sidebar{width:245px;min-width:245px;border-right:1px solid var(--line);background:#11162a;padding:18px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}.brand{font-size:22px;font-weight:900;padding:10px 8px 24px}nav{display:grid;gap:7px}.nav{padding:12px 14px;text-align:left;border-radius:12px;position:relative}.nav.active,.nav:hover{background:var(--panel2);color:#fff}.badge{float:right;min-width:22px;height:22px;line-height:22px;text-align:center;padding:0 6px;border-radius:14px;background:#ff4c6a;color:white;font-size:12px;font-weight:900}.me-mini{margin-top:auto;padding:12px;background:var(--panel2);border-radius:16px}
.main{flex:1;min-width:0}.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;background:#0e1220e8;backdrop-filter:blur(12px);z-index:5}.topbar h2{margin:0;font-size:20px}.icon-btn{font-size:22px;display:none}.view{padding:18px;height:calc(100vh - 76px);overflow:auto}.panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:16px}.section-title{font-size:18px;font-weight:900;margin-bottom:12px}
.chat-layout{display:grid;grid-template-columns:330px 1fr;gap:14px;height:100%}.chat-list-panel,.chat-panel{height:100%;overflow:hidden}.chat-list{display:grid;gap:6px;overflow:auto;max-height:calc(100% - 36px)}.chat-item{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:13px;cursor:pointer}.chat-item:hover,.chat-item.active{background:var(--panel2)}.friend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px}.friend-card{display:grid;grid-template-columns:46px 1fr auto;align-items:center;gap:10px;padding:10px 11px;border-radius:14px;background:#151a2d;border:1px solid transparent}.friend-card:hover{background:var(--panel2);border-color:#303a61}.user-info{min-width:0}.user-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.username,.status{color:var(--muted);font-size:12px}.status.online{color:var(--green)}.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#353c64}.avatar.xxl{width:96px;height:96px;border:4px solid #fff5}.row-actions{display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}.mini{padding:7px 9px;border:0;border-radius:10px;background:var(--accent);color:white;font-size:12px}.mini.gray{background:#303955}.mini.red{background:#5a2030}.unread-dot{min-width:24px;height:24px;line-height:24px;text-align:center;border-radius:50%;background:var(--accent);font-size:12px;font-weight:900}
.chat-panel{padding:0}.empty{height:100%;display:grid;place-items:center;color:var(--muted)}#chatArea{height:100%;display:grid;grid-template-rows:auto 1fr auto auto auto}.chat-header{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.chat-head-info{flex:1}.chat-actions{display:flex;gap:6px}.messages{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:9px}.bubble{max-width:min(72%,540px);padding:10px 13px;border-radius:18px;background:var(--panel2);align-self:flex-start;overflow-wrap:anywhere}.bubble.me{align-self:flex-end;background:linear-gradient(135deg,#5c4eda,#7c6af4)}.bubble img{max-width:100%;max-height:380px;border-radius:12px;margin-top:5px;display:block}.meta{font-size:11px;color:#d8dcef;margin-top:4px;opacity:.8}.typing{height:20px;padding:0 16px;color:var(--muted);font-size:12px}.composer{display:grid;grid-template-columns:auto auto 1fr auto;gap:7px;padding:10px;border-top:1px solid var(--line)}.attach,.send{width:42px;height:42px;border:0;border-radius:12px;background:var(--panel2);color:#fff}.send{background:var(--accent)}.emoji-bar{padding:10px;border-top:1px solid var(--line);display:flex;gap:7px;flex-wrap:wrap;background:#12172a}.emoji-bar button{border:0;background:var(--panel2);border-radius:8px;font-size:21px;padding:5px 8px}
.search-row{display:flex;gap:8px;margin-bottom:14px}.noti-head{display:flex;justify-content:space-between;align-items:center}.noti-row{display:flex;gap:11px;align-items:center;padding:11px;border-radius:13px;margin-bottom:7px}.noti-row.unread{background:#222a48}.noti-time{font-size:11px;color:var(--muted);margin-top:3px}
#toast{position:fixed;right:22px;top:22px;z-index:200;display:none;align-items:center;gap:13px;min-width:320px;max-width:440px;padding:17px 18px;background:#252d4c;border:1px solid #465383;border-radius:18px;box-shadow:0 18px 55px #0008}.toast-icon{font-size:30px}
.impersonation{position:fixed;top:0;left:0;right:0;z-index:300;background:#8b4d12;color:#fff;padding:8px 14px;display:flex;align-items:center;justify-content:center;gap:12px}.impersonation button{border:0;border-radius:9px;padding:7px 10px;font-weight:800}
.profile-shell{max-width:780px;margin:auto}.profile-hero{min-height:210px;border-radius:26px;padding:25px;display:flex;align-items:flex-end;gap:18px;margin-bottom:14px;position:relative;overflow:hidden}.cover-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.profile-overlay{position:absolute;inset:0;background:linear-gradient(0deg,#000a,#0001)}.profile-hero>*:not(.cover-bg):not(.profile-overlay){position:relative;z-index:2}.profile-hero-text{padding-bottom:8px}.theme-violet{background:linear-gradient(135deg,#34216e,#735cff)}.theme-ocean{background:linear-gradient(135deg,#123f69,#19a3c7)}.theme-rose{background:linear-gradient(135deg,#6c2146,#e56091)}.theme-mint{background:linear-gradient(135deg,#194b43,#39b88d)}.theme-night{background:linear-gradient(135deg,#171827,#373a63)}.profile-actions{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px}.avatar-edit{padding:8px 10px;background:var(--panel2);border-radius:10px;cursor:pointer}.field{margin-bottom:13px}.field label{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.theme-choices{display:flex;gap:8px}.theme-choices button{font-size:22px;border:2px solid transparent;background:var(--panel2);border-radius:12px;padding:8px 12px}.theme-choices button.active{border-color:white}
.post-layout{max-width:720px;margin:auto;display:grid;gap:14px}.create-post textarea{margin-bottom:10px}.post-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.post-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:15px;margin-bottom:12px}.post-head{display:flex;gap:10px;align-items:center;margin-bottom:11px}.post-body{white-space:pre-wrap;line-height:1.5}.post-image{width:100%;max-height:520px;object-fit:cover;border-radius:16px;margin-top:10px}.post-actions{display:flex;gap:8px;margin-top:12px}.post-actions button{flex:1}.liked{background:#633e9f!important}.inline-comments{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}.comment-row{display:flex;gap:9px;margin:8px 0}.comment-row .avatar{width:34px;height:34px}.comment-body{background:var(--panel2);padding:8px 10px;border-radius:12px;flex:1}.comment-form{grid-template-columns:1fr auto;margin-top:10px}
.admin-wrap{max-width:1100px;margin:auto}.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.stat{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center}.stat b{display:block;font-size:28px}.stat span{color:var(--muted);font-size:12px}.admin-note{background:#422f16;border:1px solid #765424;color:#ffdfaa;padding:10px 12px;border-radius:12px;margin-bottom:12px}.admin-users{display:grid;gap:8px}.admin-user{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;padding:11px;background:#141a2e;border-radius:14px}.admin-meta{font-size:12px;color:var(--muted);line-height:1.55}
.modal{position:fixed;inset:0;z-index:150;background:#0009;display:grid;place-items:center;padding:20px}.modal-card{width:min(470px,100%);max-height:88vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:20px;position:relative}.modal-card.wide{width:min(760px,100%)}.modal-close{position:absolute;right:12px;top:12px;border:0;background:#303955;color:white;width:34px;height:34px;border-radius:10px}.profile-modal-card{padding:0;overflow:hidden}.public-cover{height:160px;background:linear-gradient(135deg,#34216e,#735cff);position:relative}.public-cover img{width:100%;height:100%;object-fit:cover}.public-profile-content{padding:0 20px 20px;text-align:center}.public-profile-content .avatar{width:92px;height:92px;margin-top:-46px;border:4px solid var(--panel);position:relative}.public-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}.media-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.media-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
@media(max-width:800px){
  body{overflow-x:hidden}.sidebar{position:fixed;left:-280px;z-index:50;transition:.2s;width:260px;min-width:260px}.sidebar.open{left:0}.icon-btn{display:block}.topbar{height:64px;padding:0 10px}.view{padding:8px;height:calc(100vh - 64px)}.chat-layout{grid-template-columns:1fr;height:100%;gap:8px}.chat-list-panel{height:100%;padding:10px}.chat-panel{position:fixed;inset:64px 0 0 0;z-index:20;border-radius:0;background:var(--panel);display:none}.chat-panel.mobile-open{display:block}.chat-panel.mobile-open #chatArea{display:grid!important}.chat-panel.mobile-open #emptyChat{display:none!important}.chat-item{padding:9px}.friend-grid{grid-template-columns:1fr}.bubble{max-width:86%}.chat-actions .label{display:none}.composer{grid-template-columns:auto auto 1fr auto;padding-bottom:max(10px,env(safe-area-inset-bottom))}#toast{left:10px;right:10px;top:10px;min-width:0}.profile-hero{min-height:190px;padding:18px}.profile-hero .avatar{width:82px;height:82px}.admin-stats{grid-template-columns:repeat(2,1fr)}.admin-user{grid-template-columns:42px 1fr}.admin-user .row-actions{grid-column:1/-1;justify-content:stretch}.admin-user .row-actions button{flex:1}.media-grid{grid-template-columns:repeat(2,1fr)}.post-layout{max-width:none}.impersonation{font-size:12px}}

/* ===== MyHome V5 custom popup ===== */
.confirm-card{width:min(390px,92vw);text-align:center;padding:26px}
.confirm-icon{font-size:44px;margin-bottom:8px}
.confirm-card h3{margin:4px 0 8px}
.confirm-actions{display:flex;gap:10px;justify-content:center;margin-top:18px}
.confirm-actions button{min-width:110px}

/* ===== Profile frame effects ===== */
.profile-frame{position:relative;display:inline-grid;place-items:center;width:112px;height:112px;border-radius:50%;flex:0 0 auto}
.profile-frame .avatar{position:relative;z-index:3}
.frame-none{}
.frame-glow::before,.frame-pulse::before,.frame-rainbow::before,.frame-sparkle::before,.frame-neon::before{
  content:"";position:absolute;inset:1px;border-radius:50%;z-index:1
}
.frame-glow::before{background:radial-gradient(circle,#8e7cff55 45%,#8e7cff 70%,transparent 74%);filter:blur(5px);animation:frameGlow 1.8s ease-in-out infinite alternate}
@keyframes frameGlow{from{transform:scale(.94);opacity:.55}to{transform:scale(1.08);opacity:1}}
.frame-pulse::before{border:4px solid #8d7bff;animation:framePulse 1.4s ease-out infinite}
.frame-pulse::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #c6bcff;animation:framePulse 1.4s .5s ease-out infinite}
@keyframes framePulse{0%{transform:scale(.84);opacity:1}100%{transform:scale(1.22);opacity:0}}
.frame-rainbow::before{inset:-4px;background:conic-gradient(#ff5c76,#ffd95c,#55e69d,#53b7ff,#8c6cff,#ff5c76);animation:spinFrame 2.2s linear infinite}
.profile-frame.frame-rainbow .avatar{border:5px solid var(--panel)}
@keyframes spinFrame{to{transform:rotate(360deg)}}
.frame-sparkle::before{inset:-5px;background:conic-gradient(from 45deg,transparent 0 10%,#fff 11% 12%,transparent 13% 31%,#ffd95c 32% 34%,transparent 35% 57%,#fff 58% 60%,transparent 61%);animation:spinFrame 3s linear infinite;filter:drop-shadow(0 0 8px #fff)}
.frame-neon::before{inset:-3px;border:3px solid #52f6ff;box-shadow:0 0 7px #52f6ff,0 0 16px #52f6ff,0 0 26px #a45cff;animation:neonBlink 1.7s ease-in-out infinite}
@keyframes neonBlink{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.7)}}

/* ===== Bio effects ===== */
.bio-effect-glow{text-shadow:0 0 7px currentColor,0 0 15px currentColor;animation:bioGlow 1.6s ease-in-out infinite alternate}
@keyframes bioGlow{from{opacity:.72}to{opacity:1}}
.bio-effect-wave{animation:bioWave 1.8s ease-in-out infinite}
@keyframes bioWave{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.bio-effect-shine{background:linear-gradient(90deg,#fff 20%,#9a8cff 45%,#fff 70%);background-size:220% auto;color:transparent;background-clip:text;-webkit-background-clip:text;animation:bioShine 2s linear infinite}
@keyframes bioShine{to{background-position:-220% center}}
.bio-effect-float{animation:bioFloat 2.2s ease-in-out infinite}
@keyframes bioFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.bio-effect-typing{display:inline-block;max-width:100%;overflow:hidden;white-space:nowrap;border-right:2px solid currentColor;animation:bioTyping 3.2s steps(22,end) infinite alternate,bioCaret .7s step-end infinite}
@keyframes bioTyping{from{width:0}to{width:100%}}@keyframes bioCaret{50%{border-color:transparent}}
.animated-bio-emoji{display:inline-block;margin-left:6px;animation:emojiBounce 1.2s ease-in-out infinite;transform-origin:center}
@keyframes emojiBounce{0%,100%{transform:translateY(0) scale(1) rotate(0)}35%{transform:translateY(-6px) scale(1.18) rotate(-8deg)}65%{transform:translateY(-2px) scale(1.08) rotate(7deg)}}

.decorate-box{border:1px solid var(--line);background:#12182b;border-radius:18px;padding:14px;margin:14px 0}
.effect-choices,.emoji-effect-choices{display:flex;gap:7px;flex-wrap:wrap}
.effect-choices button,.emoji-effect-choices button{border:1px solid var(--line);background:var(--panel2);color:#fff;border-radius:11px;padding:8px 10px}
.effect-choices button.active,.emoji-effect-choices button.active{border-color:#a99cff;box-shadow:0 0 0 2px #7768ff55;background:#35315c}
.bio-preview-card{background:#0e1426;border:1px dashed #3b466e;border-radius:13px;padding:12px;margin:10px 0}
.bio-preview{margin-top:7px;min-height:28px;font-weight:700}
.decoration-save{width:100%;margin-top:8px}

.public-profile-content .public-frame{margin:-56px auto 4px}.public-profile-content .public-frame .avatar{margin:0;border:4px solid var(--panel)}

/* MyHome V6.1 - contacts on classic profile */
.contact-box-v61{margin:16px 0;padding:14px;border:1px solid var(--line);background:#12182b;border-radius:16px}
.contact-title-v61{font-size:15px;margin-bottom:10px}
.contact-grid-v61{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.profile-contact-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.profile-contact-links a{display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border-radius:10px;background:#252e4c;color:#fff;text-decoration:none;border:1px solid #34416a;font-size:12px}
.profile-contact-links a:hover{border-color:#7c6cff}
@media(max-width:700px){.contact-grid-v61{grid-template-columns:1fr}}

/* ===== MyHome V7 ===== */
.contact-icon-preview-v7{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px;justify-content:center}
.contact-icon-v7{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;text-decoration:none;font-size:22px;border:1px solid #34416a;background:#202942;color:#fff}
.contact-icon-v7:hover{transform:translateY(-2px);border-color:#7c6cff}
.contact-discord{background:#5865f233}.contact-line{background:#06c75533}.contact-telegram{background:#229ed933}.contact-web{background:#5c6b8a44}
.friend-state-v7{font-size:11px;margin-top:2px;color:#ffcf7a}
.paste-preview{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line);background:#10172a}
.paste-preview img{width:58px;height:58px;object-fit:cover;border-radius:10px;border:1px solid #38466f}.paste-preview span{flex:1;color:#b9c5dd}.paste-preview button{border:0;background:#482032;color:white;width:32px;height:32px;border-radius:9px}
.message-actions-v7{display:flex;gap:4px;margin-top:5px;justify-content:flex-end}.message-actions-v7 button{border:0;background:#ffffff16;color:#fff;border-radius:7px;padding:3px 6px;font-size:10px}
.post-owner-actions-v7{margin:8px 0 0 auto;display:flex;gap:5px;justify-content:flex-end}.post-owner-actions-v7 button{border:0;background:#29334f;color:#fff;border-radius:8px;padding:5px 8px}
.post-video-v7{width:100%;max-height:580px;border-radius:16px;margin-top:10px;background:#000}
.call-card-v7{text-align:center;width:min(380px,92vw);padding:30px}.call-avatar-wrap{display:grid;place-items:center;margin-bottom:12px}.call-actions-v7{display:flex;gap:12px;justify-content:center;margin-top:24px}.call-accept,.call-end{border:0;border-radius:999px;padding:14px 20px;color:white;font-weight:800}.call-accept{background:#23b86b}.call-end{background:#d84b5f}
@media(max-width:800px){.contact-icon-v7{width:44px;height:44px}.paste-preview{padding-bottom:8px}}

/* ===== MyHome V8 ===== */
.chat-list-title-v8{display:flex;align-items:center;justify-content:space-between;gap:8px}.chat-list-title-v8 .section-title{margin-bottom:0}
.group-list-v8{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.group-item-v8{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:13px;cursor:pointer;background:#171d31}
.group-item-v8:hover,.group-item-v8.active{background:#283253}
.group-avatar-v8{width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#6d5dfc,#1dc9e8);display:grid;place-items:center;font-size:20px;font-weight:900}
#groupChatArea{height:100%;display:grid;grid-template-rows:auto 1fr auto auto}
.group-composer-v8{grid-template-columns:auto 1fr auto}
.group-msg-v8{max-width:min(76%,580px);padding:10px 12px;border-radius:16px;background:var(--panel2);align-self:flex-start}
.group-msg-v8.me{align-self:flex-end;background:linear-gradient(135deg,#5c4eda,#7c6af4)}
.group-sender-v8{font-size:11px;color:#87d7ff;font-weight:800;margin-bottom:4px}
.group-media-v8{max-width:100%;max-height:430px;border-radius:12px;display:block;margin-top:6px}
.group-file-card-v8{display:flex;align-items:center;gap:10px;margin-top:6px;padding:10px;border-radius:12px;background:#11182b}
.group-file-card-v8 a{color:#8fdfff;text-decoration:none;font-weight:800}
.group-actions-v8{display:flex;gap:5px;margin-top:5px;justify-content:flex-end}.group-actions-v8 button{border:0;background:#ffffff16;color:white;border-radius:7px;padding:3px 6px;font-size:10px}
.group-head-actions-v8{display:flex;gap:6px}.group-role-v8{font-size:11px;color:#ffd577}
.group-friend-choices-v8{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:310px;overflow:auto}
.group-choice-v8{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:12px;background:#12192b}
.group-choice-v8 input{width:auto}
.group-member-row-v8{display:flex;align-items:center;gap:10px;padding:9px;border-bottom:1px solid #293453}.group-member-row-v8 .user-info{flex:1}
.profile-back-btn-v8{position:absolute;left:12px;top:12px;z-index:3;border:0;background:#303955;color:#fff;border-radius:10px;padding:8px 11px}
.contact-icon-preview-v7 img{width:28px;height:28px;object-fit:contain;border-radius:7px}
.call-card-v7.ringing{box-shadow:0 0 0 2px #43d98b,0 0 35px #43d98b55}
@media(max-width:800px){
  .group-msg-v8{max-width:88%}
  #groupChatArea{height:100%}
  .group-friend-choices-v8{grid-template-columns:1fr}
}

/* ===== MyHome V8.2 — no browser native dialogs ===== */
.text-dialog-card{width:min(470px,94vw);padding:24px}
.dialog-icon-v82{font-size:38px;margin-bottom:8px}
.text-dialog-card h3{margin:0 0 6px}
.text-dialog-card textarea,.text-dialog-card input{margin-top:13px}
.dialog-actions-v82{display:flex;justify-content:flex-end;gap:9px;margin-top:14px}
@media(max-width:600px){.dialog-actions-v82{display:grid;grid-template-columns:1fr 1fr}.dialog-actions-v82 button{width:100%}}

/* ===== MyHome V8.4 Groups ===== */
.group-theme-violet{--group-accent:#755fff;--group-soft:#342a6d}
.group-theme-ocean{--group-accent:#19b9e8;--group-soft:#164d68}
.group-theme-mint{--group-accent:#37d49d;--group-soft:#174d42}
.group-theme-rose{--group-accent:#f06d9c;--group-soft:#632845}
.group-theme-orange{--group-accent:#ff9950;--group-soft:#65361f}
.group-theme-night{--group-accent:#7f8bb8;--group-soft:#252b45}
#groupChatArea[class*="group-theme-"] .group-msg-v8.me{background:linear-gradient(135deg,var(--group-soft),var(--group-accent))}
#groupChatArea[class*="group-theme-"] .send{background:var(--group-accent)}
#groupChatArea[class*="group-theme-"] .group-avatar-v8{background:linear-gradient(135deg,var(--group-soft),var(--group-accent))}
.group-lock-banner-v84{padding:8px 12px;text-align:center;background:#5b3919;color:#ffd7a1;border-bottom:1px solid #8f5a2c;font-size:12px}
.group-settings-modal-v84{max-width:760px}
.group-settings-grid-v84{display:grid;grid-template-columns:180px 1fr;gap:20px;margin-top:14px}
.group-settings-avatar-v84{display:flex;flex-direction:column;align-items:center;gap:12px}
.group-avatar-large-v84{width:130px;height:130px;border-radius:28px;background:linear-gradient(135deg,#6555e8,#16b8d7);display:grid;place-items:center;font-size:52px;overflow:hidden}
.group-avatar-large-v84 img{width:100%;height:100%;object-fit:cover}
.group-color-choices-v84{display:flex;gap:8px;flex-wrap:wrap}
.group-color-choices-v84 button{width:46px;height:42px;border-radius:11px;border:2px solid transparent;background:#202942;font-size:20px}
.group-color-choices-v84 button.active{border-color:#fff;box-shadow:0 0 0 2px #7969ff66}
.group-lock-toggle-v84{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:12px;background:#11182b;margin:12px 0}
.group-lock-toggle-v84 input{width:auto;margin-top:3px}
.group-role-help-v84{margin-top:18px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#11182b;display:grid;gap:7px;font-size:13px}
.group-role-select-v84{border:1px solid var(--line);background:#10162a;color:#fff;border-radius:9px;padding:6px 8px;font-size:12px}
.group-role-badge-v84{padding:4px 7px;border-radius:999px;background:#2d3658;color:#dce5ff;font-size:10px}
.group-locked-input-v84{opacity:.55;pointer-events:none}
.group-file-preview-list-v84{display:flex;gap:7px;flex-wrap:wrap;max-height:116px;overflow:auto}
.group-file-chip-v84{display:flex;align-items:center;gap:5px;background:#212a45;padding:6px 8px;border-radius:9px;font-size:11px}
.group-head-avatar-v84{width:44px;height:44px;border-radius:13px;object-fit:cover}
@media(max-width:800px){
  .group-settings-modal-v84{width:100%;max-width:none;height:min(92vh,760px);border-radius:20px 20px 0 0;align-self:end}
  .group-settings-grid-v84{grid-template-columns:1fr}
  .group-settings-avatar-v84{flex-direction:row;justify-content:flex-start}
  .group-avatar-large-v84{width:84px;height:84px;border-radius:20px;font-size:34px}
  #groupChatArea{position:absolute;inset:0;background:var(--panel);z-index:3}
  #groupChatHeader{position:sticky;top:0;z-index:4;background:var(--panel)}
  #groupMessages{padding-bottom:12px}
  .group-head-actions-v8{gap:4px}.group-head-actions-v8 .mini{padding:7px 8px}
}

/* MyHome V8.5 settings button fix */
.group-settings-btn-v85{
  background:linear-gradient(135deg,#6b5cff,#8676ff);
  box-shadow:0 0 12px #7565ff55;
  font-weight:800;
}
@media(max-width:520px){
  .group-settings-btn-v85 .label{display:none}
  .group-settings-btn-v85{min-width:34px;padding:7px 9px}
}

/* ===== MyHome V8.6 Group lock + roles ===== */
.group-lock-box-v86{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px;border:1px solid var(--line);border-radius:13px;background:#11182b;margin:12px 0}
.group-lock-box-v86.locked{border-color:#8b5b28;background:#2e2114}
.group-role-manage-v86{margin-top:18px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#10172a}
.group-role-manage-v86 h4{margin:0 0 4px}
.group-settings-members-v86{display:grid;gap:8px;margin-top:12px;max-height:300px;overflow:auto}
.group-settings-member-v86{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;padding:9px;border-radius:11px;background:#182039}
.group-settings-member-v86 .avatar{width:38px;height:38px}
.group-password-card-v86{width:min(420px,94vw);padding:24px}
@media(max-width:600px){
  .group-lock-box-v86{align-items:flex-start;flex-direction:column}
  .group-lock-box-v86 button{width:100%}
  .group-settings-member-v86{grid-template-columns:38px 1fr}
  .group-settings-member-v86 .group-role-select-v84,.group-settings-member-v86 .group-role-badge-v84{grid-column:1/-1;width:100%}
}

/* ===== MyHome V8.7 Brand / Login ===== */
.auth-v87{
  min-height:100vh;
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:28px;
  background:#06070b url("/brand/login-background.jpg") center/cover no-repeat;
}
.auth-bg-overlay-v87{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 24%,#05060ab8 72%,#020306f2 100%),
    linear-gradient(90deg,#05060bd8 0%,#07080cb0 30%,#09090da8 58%,#050509a8 100%);
  backdrop-filter:blur(1px);
}
.auth-top-brand-v87{
  position:absolute;left:30px;top:25px;z-index:2;
  width:250px;max-height:92px;object-fit:contain;object-position:left center;
  filter:drop-shadow(0 0 12px #ff253d55);
}
.auth-card-v87{
  width:min(500px,94vw);
  z-index:3;
  background:linear-gradient(180deg,#111219f5,#0b0c12f5);
  border:1px solid #8f2d38;
  border-radius:24px;
  padding:28px 34px 26px;
  box-shadow:
    0 0 0 1px #ff263c22 inset,
    0 0 24px #ff263c55,
    0 30px 80px #000c;
}
.auth-card-logo-v87{
  display:block;width:285px;max-width:85%;height:120px;object-fit:contain;margin:0 auto 4px;
  filter:drop-shadow(0 0 10px #ff324b55);
}
.auth-card-v87 h1{text-align:center;font-size:25px;margin:0 0 5px}
.auth-card-v87>p{text-align:center;margin-bottom:18px}
.auth-tabs-v87{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid #313542;border-radius:13px;overflow:hidden;background:#14161e;margin-bottom:18px}
.auth-tabs-v87 .tab{border-radius:0;padding:13px 10px;color:#aeb4c3;font-weight:800}
.auth-tabs-v87 .tab.active{
  color:#fff;
  background:linear-gradient(180deg,#ed263b,#9d1221);
  box-shadow:0 0 18px #f2263d66 inset,0 0 14px #ff294555;
}
.auth-form-v87{display:grid;gap:12px}
.auth-input-wrap-v87{
  display:grid;grid-template-columns:46px 1fr;align-items:center;
  min-height:54px;background:#12141c;border:1px solid #343846;border-radius:13px;overflow:hidden;
}
.auth-input-wrap-v87:focus-within{border-color:#ef3044;box-shadow:0 0 0 2px #e2263d22,0 0 15px #ea263c26}
.auth-input-wrap-v87>span{text-align:center;color:#c5cad6;font-size:18px}
.auth-input-wrap-v87 input{border:0!important;border-radius:0;background:transparent!important;padding-left:0;box-shadow:none!important}
.auth-main-btn-v87{
  margin-top:4px;min-height:54px;border:1px solid #fa4354;border-radius:13px;color:white;font-weight:900;font-size:16px;
  background:linear-gradient(180deg,#f02b41,#bd1527);
  box-shadow:0 0 16px #ef243c44 inset,0 0 15px #ff263c42;
}
.auth-main-btn-v87:hover{filter:brightness(1.12);transform:translateY(-1px)}
.auth-divider-v87{display:flex;align-items:center;gap:12px;margin:20px 0 12px;color:#747986;font-size:11px;letter-spacing:.2em}
.auth-divider-v87:before,.auth-divider-v87:after{content:"";height:1px;flex:1;background:#343843}
.auth-slogan-v87{text-align:center;color:#979daa;font-size:10px;letter-spacing:.28em}
.auth-side-copy-v87{
  position:absolute;left:6%;top:38%;z-index:2;color:white;
  font-family:"Segoe Script","Brush Script MT",cursive;font-size:34px;line-height:1.03;
  transform:rotate(-7deg);text-shadow:0 0 18px #000;
}
.auth-side-copy-v87:after{content:"";display:block;width:220px;height:5px;margin-top:12px;background:#e51c32;transform:rotate(-7deg);border-radius:99px}
.auth-est-v87{position:absolute;right:4%;bottom:4%;z-index:2;display:grid;gap:3px;color:#9ca0a9;font-size:11px;letter-spacing:.18em}
.auth-est-v87 b{color:#d2d3d8}
.brand-v87{padding:0 0 20px}
.brand-v87 img{width:190px;height:72px;object-fit:contain;object-position:left center;filter:drop-shadow(0 0 8px #ff263c33)}
.topbar-brand-v87{display:none;width:32px;height:32px;border-radius:8px;object-fit:cover;box-shadow:0 0 10px #ff2b4055}

/* Give the inside app a subtle red MyHome brand accent without replacing existing theme */
.sidebar{box-shadow:8px 0 40px #0004}
.brand-v87:after{content:"MORE THAN JUST CHAT";display:block;font-size:8px;letter-spacing:.24em;color:#8f96a8;margin:-13px 0 0 8px}
.nav.active{box-shadow:inset 3px 0 0 #ef2a40}
@media(max-width:980px){
  .auth-side-copy-v87{display:none}
  .auth-top-brand-v87{width:205px}
}
@media(max-width:800px){
  .auth-v87{padding:16px;background-position:62% center}
  .auth-bg-overlay-v87{background:linear-gradient(#05060ad9,#05060af2)}
  .auth-top-brand-v87{position:relative;left:auto;top:auto;width:210px;margin:0 auto 12px;align-self:end}
  .auth-v87{grid-template-rows:auto 1fr}
  .auth-card-v87{padding:22px 18px;border-radius:20px;align-self:start}
  .auth-card-logo-v87{width:230px;height:92px}
  .auth-card-v87 h1{font-size:22px}
  .auth-est-v87{display:none}
  .topbar-brand-v87{display:block}
  .brand-v87 img{width:180px}
}
@media(max-width:480px){
  .auth-v87{padding:10px}
  .auth-top-brand-v87{width:170px;height:65px;margin-bottom:4px}
  .auth-card-v87{width:100%;padding:18px 14px}
  .auth-card-logo-v87{width:200px;height:78px}
  .auth-tabs-v87 .tab{font-size:12px}
  .auth-input-wrap-v87{min-height:50px;grid-template-columns:40px 1fr}
}

/* ===== MyHome V8.8 login motion ===== */
.auth-v87{background-image:url("/brand/login-background-v88.png");background-position:center;background-size:cover;background-attachment:fixed}
.auth-bg-overlay-v87{background:linear-gradient(90deg,rgba(3,4,8,.25),rgba(3,4,8,.58) 43%,rgba(3,4,8,.38)),linear-gradient(0deg,rgba(2,3,7,.25),transparent 35%);backdrop-filter:none}
.auth-card-v87{position:relative;overflow:hidden;background:linear-gradient(145deg,rgba(11,12,18,.92),rgba(20,10,13,.88));border-color:rgba(255,57,75,.58);box-shadow:0 0 0 1px rgba(255,255,255,.035) inset,0 0 34px rgba(255,32,55,.22),0 35px 100px rgba(0,0,0,.65);backdrop-filter:blur(14px)}
.auth-card-v87:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,rgba(255,255,255,.035) 45%,transparent 65%);transform:translateX(-100%);animation:authShineV88 7s ease-in-out infinite}
@keyframes authShineV88{0%,65%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
.auth-main-btn-v87{position:relative;display:flex;justify-content:center;align-items:center;gap:10px;transition:.22s ease}
.auth-main-btn-v87.is-loading{cursor:wait;filter:saturate(.85);transform:none}
.login-spinner-v88{display:none;width:18px;height:18px;border:2px solid rgba(255,255,255,.32);border-top-color:#fff;border-radius:50%;animation:loginSpinV88 .7s linear infinite}
.auth-main-btn-v87.is-loading .login-spinner-v88{display:inline-block}
@keyframes loginSpinV88{to{transform:rotate(360deg)}}
.login-error-v88{margin-top:2px;padding:10px 12px;border-radius:10px;border:1px solid rgba(255,58,77,.5);background:rgba(116,12,26,.32);color:#ff9aa6;text-align:center;font-size:13px;animation:errorPopV88 .2s ease}
@keyframes errorPopV88{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.auth-card-v87.login-shake-v88{animation:loginShakeV88 .42s cubic-bezier(.36,.07,.19,.97);border-color:#ff2942;box-shadow:0 0 0 1px rgba(255,41,66,.32) inset,0 0 38px rgba(255,24,52,.48),0 35px 100px rgba(0,0,0,.65)}
@keyframes loginShakeV88{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(5px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.auth-input-wrap-v87.login-field-error-v88{border-color:#ff3049!important;box-shadow:0 0 0 2px rgba(255,36,64,.13),0 0 18px rgba(255,32,55,.22)}
@media(max-width:800px){.auth-v87{background-position:center top;background-attachment:scroll}.auth-card-v87{backdrop-filter:blur(10px)}}


/* ============================================================
   MyHome V8.9 — RED / BLACK / METAL APP THEME
   Matches the V8.8 login branding.
   ============================================================ */

:root{
  --bg:#07080c;
  --panel:#101218;
  --panel2:#171a22;
  --text:#f5f6f8;
  --muted:#989eaa;
  --accent:#e52339;
  --accent2:#ff3d50;
  --danger:#ff4055;
  --line:#2a2d35;
  --green:#42dc95;
  --mh-red:#e52339;
  --mh-red2:#ff3b4d;
  --mh-dark:#07080c;
  --mh-card:#11131a;
  --mh-metal:#b9bcc5;
}

/* Global app shell after login */
#appScreen{
  background:
    radial-gradient(circle at 85% 8%,#5f0b1428 0,transparent 34%),
    radial-gradient(circle at 8% 92%,#37081022 0,transparent 32%),
    linear-gradient(180deg,#08090d,#06070a);
}
.main{background:transparent}
.view{background:transparent}

/* Sidebar */
.sidebar{
  background:
    linear-gradient(180deg,#0c0e14f8,#08090ef8);
  border-right:1px solid #312229;
  box-shadow:10px 0 45px #0008,1px 0 0 #e5233914 inset;
}
.brand-v87{
  position:relative;
  border-bottom:1px solid #282a31;
  margin-bottom:10px;
}
.brand-v87 img{
  filter:drop-shadow(0 0 11px #f0233955);
}
.brand-v87:after{
  color:#8e929c;
}
.nav{
  color:#aeb2bd;
  border:1px solid transparent;
  transition:.18s ease;
}
.nav:hover{
  color:#fff;
  background:linear-gradient(90deg,#2a1117,#16181f);
  border-color:#4a252c;
  transform:translateX(2px);
}
.nav.active{
  color:#fff;
  background:
    linear-gradient(90deg,#721420cc,#2a1117cc 58%,#16181f);
  border:1px solid #8d2432;
  box-shadow:
    inset 3px 0 0 #ff3549,
    0 0 18px #df203436;
}
.badge{
  background:linear-gradient(180deg,#ff3d50,#bd1629);
  box-shadow:0 0 10px #ff314766;
}
.me-mini{
  background:linear-gradient(145deg,#14161d,#0c0e13);
  border:1px solid #2d3038;
  box-shadow:0 0 22px #0007;
}

/* Topbar */
.topbar{
  background:
    linear-gradient(180deg,#0d0f15f3,#090a0ff0);
  border-bottom:1px solid #31232a;
  box-shadow:0 8px 24px #0005;
}
.topbar h2{color:#fff}
.topbar-brand-v87{
  box-shadow:0 0 13px #ff2f4566;
}

/* Panels and cards */
.panel,
.post-card,
.modal-card,
.auth-card{
  background:
    linear-gradient(145deg,#14161d,#0d0f14);
  border-color:#2f323a;
  box-shadow:
    0 14px 36px #00045,
    inset 0 1px 0 #ffffff08;
}
.panel:hover{border-color:#3a3338}
.section-title{color:#f4f5f7}

/* Inputs */
input,textarea,select{
  background:#0b0d12!important;
  border-color:#343740!important;
  color:#f5f6f8!important;
}
input:focus,textarea:focus,select:focus{
  border-color:#e52a3e!important;
  box-shadow:0 0 0 2px #e52a3e24,0 0 14px #e52a3e24!important;
}
input::placeholder,textarea::placeholder{color:#747a86}

/* Buttons */
.primary{
  background:linear-gradient(180deg,#ef2d42,#bd1729);
  border:1px solid #ff4659;
  box-shadow:0 0 14px #ed263c34,inset 0 1px 0 #ffffff24;
}
.primary:hover{filter:brightness(1.1)}
.mini{
  background:linear-gradient(180deg,#df293d,#a91627);
  border:1px solid #f0394d;
  box-shadow:0 0 10px #e1283b2b;
}
.mini.gray{
  background:linear-gradient(180deg,#23262e,#171920);
  border:1px solid #353944;
}
.mini.red,.danger{
  background:linear-gradient(180deg,#8b1828,#54101b);
  border:1px solid #b42939;
  color:#ffdce1;
}
.icon-btn{color:#f1f2f4}

/* Friend cards / chat list */
.friend-card,
.chat-item,
.group-item-v8,
.admin-user{
  background:linear-gradient(145deg,#12141a,#0d0f14);
  border:1px solid #272a31;
}
.friend-card:hover,
.chat-item:hover,
.chat-item.active,
.group-item-v8:hover,
.group-item-v8.active{
  background:linear-gradient(90deg,#291116,#16181e);
  border-color:#76212e;
  box-shadow:0 0 14px #d61d3130;
}
.unread-dot{
  background:linear-gradient(180deg,#ff4053,#c31629);
  box-shadow:0 0 10px #ff334a55;
}

/* Direct chat */
.chat-panel{
  background:#0c0e13;
  border-color:#2d3038;
}
.chat-header{
  background:linear-gradient(180deg,#13151c,#0f1117);
  border-bottom-color:#292c34;
}
.messages{
  background:
    radial-gradient(circle at 100% 0,#6e0e1920,transparent 32%),
    linear-gradient(180deg,#0c0e13,#090a0e);
}
.bubble{
  background:linear-gradient(145deg,#20232b,#171a22);
  border:1px solid #2e323b;
  color:#f3f4f6;
}
.bubble.me{
  background:linear-gradient(135deg,#7e1725,#d22035);
  border:1px solid #ef3d50;
  box-shadow:0 0 13px #df223638;
}
.composer{
  background:#0e1016;
  border-top-color:#2a2d35;
}
.attach{
  background:#191c23;
  border:1px solid #30343d;
}
.send{
  background:linear-gradient(180deg,#f02c42,#b61426);
  box-shadow:0 0 13px #e5233950;
}
.emoji-bar{background:#0d0f15;border-top-color:#2b2e36}
.emoji-bar button{background:#1a1d24}

/* Group chat themes remapped to brand-compatible variants */
.group-theme-violet{--group-accent:#db243a;--group-soft:#601522}
.group-theme-ocean{--group-accent:#cf3345;--group-soft:#4b1821}
.group-theme-mint{--group-accent:#d34855;--group-soft:#522027}
.group-theme-rose{--group-accent:#ff5262;--group-soft:#6d1724}
.group-theme-orange{--group-accent:#e95f45;--group-soft:#63261e}
.group-theme-night{--group-accent:#9fa4b2;--group-soft:#2b2e37}
#groupChatArea[class*="group-theme-"]{
  background:#0b0d12;
}
.group-avatar-v8{
  background:linear-gradient(135deg,#741623,#e6273d);
  box-shadow:0 0 15px #e5233944;
}
.group-msg-v8{
  background:linear-gradient(145deg,#1f222a,#151820);
  border:1px solid #30343c;
}
.group-msg-v8.me{
  box-shadow:0 0 12px #e1233636;
}
.group-lock-banner-v84{
  background:#321218;
  color:#ffccd3;
  border-bottom-color:#6e1c28;
}

/* Profile */
.profile-hero{
  box-shadow:0 22px 55px #0008,0 0 18px #e5233923;
}
.theme-violet,
.theme-ocean,
.theme-rose,
.theme-mint{
  background:
    radial-gradient(circle at 75% 20%,#7c111d80,transparent 38%),
    linear-gradient(135deg,#2e0d12,#101218 62%,#090a0e);
}
.theme-night{
  background:linear-gradient(135deg,#161820,#090a0f);
}
.profile-card,
.decorate-box,
.decorate-box-v6,
.contact-box-v61{
  background:linear-gradient(145deg,#13151b,#0d0f14);
  border-color:#2d3038;
}
.theme-choices button,
.effect-choices button,
.emoji-effect-choices button{
  background:#171920;
  border-color:#30343d;
}
.theme-choices button.active,
.effect-choices button.active,
.emoji-effect-choices button.active{
  border-color:#ef3045;
  box-shadow:0 0 0 2px #d9233833,0 0 13px #e5233938;
}

/* Posts / comments */
.create-post,
.post-card{
  border-color:#2c2f37;
}
.post-actions .mini.gray:hover{
  border-color:#a92232;
  background:#2b1419;
}
.comment-body{
  background:#181b22;
  border:1px solid #2b2f37;
}
.liked{
  background:linear-gradient(180deg,#8b1928,#5b101a)!important;
  border-color:#d7293d!important;
}

/* Notifications */
.noti-row.unread{
  background:linear-gradient(90deg,#2b1116,#171920);
  border-left:3px solid #e52339;
}

/* Admin */
.admin-note{
  background:#2b1710;
  border-color:#6d3925;
  color:#ffd0af;
}
.stat{
  background:linear-gradient(145deg,#14161d,#0d0f14);
  border-color:#2d3038;
}
.stat b{color:#ff4356}

/* Modals / dialogs */
.modal{
  background:#000c;
  backdrop-filter:blur(7px);
}
.modal-card{
  border:1px solid #38323a;
  box-shadow:0 28px 80px #000d,0 0 22px #e5233924;
}
.modal-close,
.profile-back-btn-v8{
  background:#1d2027;
  border:1px solid #343842;
}
.confirm-card,
.text-dialog-card,
.group-password-card-v86{
  background:linear-gradient(145deg,#15171e,#0c0e13);
}
.confirm-icon,.dialog-icon-v82{
  filter:drop-shadow(0 0 10px #ef293e55);
}

/* Contact icons */
.contact-icon-v7{
  background:#14171e!important;
  border-color:#333740;
  box-shadow:0 0 11px #0007;
}
.contact-icon-v7:hover{
  border-color:#ea2a3e;
  box-shadow:0 0 16px #e5233945;
}

/* Scrollbars */
*{
  scrollbar-color:#7d1b29 #0b0d12;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a0c10}
::-webkit-scrollbar-thumb{
  background:linear-gradient(#7f1a29,#d2263b);
  border-radius:99px;
  border:2px solid #0a0c10;
}

/* App-wide subtle top red light */
#appScreen:before{
  content:"";
  position:fixed;
  z-index:0;
  top:0;left:245px;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#ff3348,transparent);
  box-shadow:0 0 16px #f12c4055;
  pointer-events:none;
}

/* Mobile theme */
@media(max-width:800px){
  #appScreen:before{left:0}
  .sidebar{
    background:linear-gradient(180deg,#0c0e14,#07080c);
    box-shadow:10px 0 45px #000d;
  }
  .topbar{
    background:#0b0d12f2;
    border-bottom-color:#39242b;
  }
  .chat-panel{
    background:#090b0f;
  }
  .chat-panel.mobile-open{
    box-shadow:0 0 0 1px #2b2e35 inset;
  }
}

/* Prevent old purple accents from showing in common controls */
.profile-tab-v6.active,
.group-settings-btn-v85{
  background:linear-gradient(180deg,#dc263a,#a81425)!important;
  border-color:#ef3c4f!important;
  box-shadow:0 0 14px #e5233940!important;
}

/* ===== MyHome V9.0 — same header logo before/after login ===== */
.auth-top-brand-v87{
  width:255px!important;
  height:auto!important;
  max-height:110px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 0 10px #ef263b45)!important;
}

.brand-v90{
  padding:6px 4px 18px!important;
  margin-bottom:10px!important;
}
.brand-v90 img{
  width:210px!important;
  height:auto!important;
  max-height:92px!important;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 0 9px #e8263a44)!important;
}
.brand-v90:after{display:none!important}

/* remove visual feel of the large square/app-icon branding inside app shell */
.topbar-brand-v90{
  width:118px!important;
  height:38px!important;
  border-radius:0!important;
  object-fit:contain!important;
  object-position:left center!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 6px #ef263b44);
}

@media(max-width:800px){
  .brand-v90 img{
    width:195px!important;
    max-height:84px!important;
  }
  .topbar-brand-v90{
    display:block!important;
    width:105px!important;
    height:34px!important;
  }
  .auth-top-brand-v87{
    width:205px!important;
  }
}
@media(max-width:480px){
  .auth-top-brand-v87{
    width:175px!important;
  }
}

/* MyHome V9.1 — remove duplicate logo at top-left of LOGIN.
   The background artwork already contains its own My Home branding. */
#authScreen .auth-top-brand-v87{
  display:none!important;
}

/* ===== MyHome V9.2 ===== */
/* No MyHome image logo after entering the app */
#appScreen .brand-v87,
#appScreen .brand-v90,
#appScreen .topbar-brand-v87,
#appScreen .topbar-brand-v90{
  display:none!important;
}
.sidebar{padding-top:14px!important}

/* Cinematic login transition */
.login-transition-v92{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(118,10,22,.32),transparent 34%),
    rgba(3,4,7,.92);
  backdrop-filter:blur(12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease;
}
.login-transition-v92.show{opacity:1;pointer-events:all}
.login-transition-card-v92{
  width:min(390px,88vw);
  padding:38px 28px 32px;
  text-align:center;
  border-radius:24px;
  border:1px solid rgba(255,57,76,.55);
  background:linear-gradient(160deg,rgba(22,23,29,.96),rgba(8,9,13,.98));
  box-shadow:0 0 0 1px rgba(255,255,255,.025) inset,0 0 35px rgba(229,35,57,.28),0 30px 80px #000;
  transform:scale(.92) translateY(12px);
  animation:loginCardInV92 .48s cubic-bezier(.2,.9,.2,1) forwards;
}
.login-ring-v92{
  width:86px;height:86px;margin:0 auto 22px;position:relative;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.08);
  box-shadow:0 0 25px rgba(229,35,57,.15);
}
.login-ring-v92:before{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:3px solid transparent;
  border-top-color:#ff3349;
  border-right-color:#b91528;
  filter:drop-shadow(0 0 7px #ff3349);
  animation:loginSpinV92 .78s linear infinite;
}
.login-ring-v92:after{
  content:"⌂";position:absolute;inset:0;display:grid;place-items:center;
  font-size:34px;font-weight:900;color:#f4f4f5;
  text-shadow:0 0 12px #ff2d43;
}
.login-title-v92{font-size:21px;font-weight:900;color:#fff;margin-bottom:7px}
.login-sub-v92{font-size:13px;color:#969ca8}
.login-dots-v92{display:flex;justify-content:center;gap:7px;margin-top:18px}
.login-dots-v92 i{
  width:7px;height:7px;border-radius:50%;background:#e52a3e;
  box-shadow:0 0 9px #ff3148;
  animation:loginDotV92 .9s ease-in-out infinite;
}
.login-dots-v92 i:nth-child(2){animation-delay:.14s}
.login-dots-v92 i:nth-child(3){animation-delay:.28s}
.login-transition-v92.success .login-ring-v92:before{animation:none;border-color:#ff3349}
.login-transition-v92.success .login-ring-v92:after{content:"✓";color:#fff}
.login-transition-v92.success .login-title-v92{color:#fff}
@keyframes loginSpinV92{to{transform:rotate(360deg)}}
@keyframes loginDotV92{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-7px);opacity:1}}
@keyframes loginCardInV92{to{transform:scale(1) translateY(0)}}
@media(max-width:800px){
  .sidebar{padding-top:10px!important}
  .login-transition-card-v92{padding:32px 20px 28px}
}

/* ===== MyHome V9.3 FIX ===== */

/* แก้ Chrome/Edge autofill ไม่ให้ช่อง Username กลายเป็นพื้นขาว */
#authScreen input:-webkit-autofill,
#authScreen input:-webkit-autofill:hover,
#authScreen input:-webkit-autofill:focus,
#authScreen input:-webkit-autofill:active{
  -webkit-text-fill-color:#f5f6f8!important;
  caret-color:#fff!important;
  -webkit-box-shadow:0 0 0 1000px #12141c inset!important;
  box-shadow:0 0 0 1000px #12141c inset!important;
  transition:background-color 9999s ease-out 0s!important;
  border:0!important;
}
#authScreen .auth-input-wrap-v87 input{
  background:#12141c!important;
  color:#f5f6f8!important;
}
#authScreen .auth-input-wrap-v87{
  background:#12141c!important;
}

/* โลโก้ด้านในแอป / หน้าแชท */
.app-brand-v93{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 8px 17px;
  margin-bottom:9px;
  border-bottom:1px solid #2d2429;
}
.app-brand-v93 img{
  width:48px;
  height:48px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 0 14px #ef263b45;
}
.app-brand-copy-v93{
  min-width:0;
  display:grid;
  gap:2px;
}
.app-brand-copy-v93 b{
  font-size:19px;
  color:#f4f5f7;
  letter-spacing:.01em;
}
.app-brand-copy-v93 span{
  font-size:7px;
  color:#9095a0;
  letter-spacing:.18em;
  white-space:nowrap;
}

/* Login animation ที่เห็นชัดและอยู่เหนือทุกอย่าง */
.login-transition-v92{
  z-index:2147483000!important;
}
.login-transition-v92.show{
  display:flex!important;
  opacity:1!important;
  visibility:visible!important;
}
.login-transition-card-v92{
  border-color:#ff3349!important;
  box-shadow:0 0 0 1px #ff40551c inset,0 0 42px #ff263c55,0 35px 100px #000!important;
}
.login-ring-v92:before{
  border-top-color:#ff4055!important;
  border-right-color:#ff4055!important;
}
@media(max-width:800px){
  .app-brand-v93{padding:6px 7px 13px}
  .app-brand-v93 img{width:42px;height:42px}
  .app-brand-copy-v93 b{font-size:17px}
}


/* ===== MyHome V9.5 — Red Room Chat UI ===== */
:root{
  --mh-red:#ef233c;
  --mh-red2:#a50e24;
  --mh-panel:#090b0f;
  --mh-line:#292d34;
}
body{background:#050609}
.app-shell,.app{background:#050609}
.sidebar{
  background:linear-gradient(180deg,#0b0d11 0%,#08090d 100%)!important;
  border-right:1px solid #35131a!important;
}
.sidebar .nav-item,.nav-item{
  border-radius:12px!important;
  transition:.18s ease!important;
}
.sidebar .nav-item.active,.nav-item.active{
  background:linear-gradient(90deg,rgba(239,35,60,.25),rgba(239,35,60,.06))!important;
  border:1px solid rgba(239,35,60,.75)!important;
  box-shadow:inset 3px 0 0 #ef233c,0 0 18px rgba(239,35,60,.13)!important;
}
.sidebar .nav-item:hover,.nav-item:hover{background:#171015!important}
.me-mini{
  background:linear-gradient(145deg,#11141a,#0b0d11)!important;
  border:1px solid #343840!important;
  border-radius:16px!important;
}

/* Main chat split */
#view-chat .chat-layout,
#view-chat .chat-grid,
.chat-layout{
  gap:0!important;
}
.chat-list-panel,.conversations-panel{
  background:linear-gradient(180deg,#0b0e13,#080a0e)!important;
  border-color:#2b2e35!important;
}
.chat-list-panel .friend-card,
.conversations-panel .friend-card,
.chat-list .friend-card{
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:12px 10px!important;
  transition:.16s ease!important;
}
.chat-list-panel .friend-card:hover,
.conversations-panel .friend-card:hover,
.chat-list .friend-card:hover{
  background:rgba(255,255,255,.035)!important;
}
.chat-list-panel .friend-card.active,
.conversations-panel .friend-card.active,
.chat-list .friend-card.active{
  background:linear-gradient(90deg,rgba(239,35,60,.22),rgba(239,35,60,.035))!important;
  border-left:2px solid #ef233c!important;
}

/* Approved empty-chat welcome treatment */
.chat-empty,.empty-chat,.chat-placeholder{
  position:relative!important;
  overflow:hidden!important;
  background:
    linear-gradient(90deg,rgba(4,5,8,.18),rgba(4,5,8,.38)),
    linear-gradient(180deg,rgba(5,6,9,.10),rgba(5,6,9,.62)),
    url("/myhome-welcome-redroom.webp") center/cover no-repeat!important;
}
.chat-empty::before,.empty-chat::before,.chat-placeholder::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 60% 38%,rgba(239,35,60,.12),transparent 32%),
    linear-gradient(180deg,transparent 55%,rgba(0,0,0,.36));
}
.chat-empty>*,
.empty-chat>*,
.chat-placeholder>*{position:relative;z-index:1}

/* If the existing placeholder is plain text, make it look intentional */
.chat-empty,.empty-chat,.chat-placeholder{
  color:#f4f4f5!important;
  text-shadow:0 2px 16px #000;
}
.chat-empty img,.empty-chat img,.chat-placeholder img{
  filter:drop-shadow(0 0 20px rgba(239,35,60,.22));
}
.chat-panel,.chat-window{
  background:#080a0e!important;
  border-color:#2b2e35!important;
}
.chat-header{
  background:rgba(8,10,14,.94)!important;
  border-bottom:1px solid #292d34!important;
}
.message-input-wrap,.composer{
  background:#0c0f14!important;
  border-color:#292d34!important;
}
button.primary,.btn-primary{
  background:linear-gradient(135deg,#ef233c,#b31329)!important;
  box-shadow:0 7px 22px rgba(239,35,60,.18)!important;
}

/* Desktop proportions */
@media(min-width:901px){
  .sidebar{width:205px!important}
  .chat-list-panel,.conversations-panel{width:340px!important;min-width:340px!important}
}
/* Mobile stays usable */
@media(max-width:900px){
  .chat-empty,.empty-chat,.chat-placeholder{
    background-position:center!important;
  }
}

/* ===== MyHome V9.6 ACTUAL chat redesign ===== */
#view-chats .chat-layout{
  grid-template-columns:330px minmax(0,1fr)!important;
  gap:12px!important;
}
#view-chats .chat-list-panel{
  min-width:0!important;
  width:auto!important;
  padding:12px!important;
  background:linear-gradient(180deg,#0b0d11,#080a0e)!important;
}
#view-chats .chat-panel{
  min-width:0!important;
  background:#07090c!important;
  padding:0!important;
  overflow:hidden!important;
}
.chat-list-title-v8{margin-bottom:10px}
.round-create-v96{
  width:36px!important;height:36px!important;padding:0!important;border-radius:50%!important;
  font-size:21px!important;
}
.chat-search-v96{
  height:43px;
  display:grid;
  grid-template-columns:34px 1fr;
  align-items:center;
  border:1px solid #2c3038;
  border-radius:13px;
  background:#12151a;
  margin-bottom:9px;
}
.chat-search-v96 span{text-align:center;font-size:22px;color:#9aa0ab}
.chat-search-v96 input{
  border:0!important;background:transparent!important;box-shadow:none!important;
  height:100%;padding:0 10px 0 0!important;font-size:12px!important;
}
.chat-filter-v96{display:flex;gap:7px;margin-bottom:9px;overflow:auto}
.chat-filter-v96 button{
  border:0;background:transparent;color:#8f95a0;padding:7px 9px;border-radius:9px;font-size:11px;white-space:nowrap;
}
.chat-filter-v96 button.active{
  color:#fff;background:linear-gradient(135deg,#ef233c,#b31229);
  box-shadow:0 0 13px rgba(239,35,60,.23);
}
#chatFriends .chat-item{
  border:0!important;
  border-bottom:1px solid rgba(255,255,255,.055)!important;
  border-radius:0!important;
  background:transparent!important;
  padding:11px 8px!important;
}
#chatFriends .chat-item:hover{background:rgba(255,255,255,.035)!important}
#chatFriends .chat-item.active{
  border-left:2px solid #ef233c!important;
  background:linear-gradient(90deg,rgba(239,35,60,.22),rgba(239,35,60,.03))!important;
}
#chatGroups .group-item-v8{
  border:0!important;border-radius:10px!important;margin-bottom:4px!important;
}

/* Exact empty state used by the real app */
#emptyChat.empty-chat-redroom-v96{
  position:relative;
  height:100%!important;
  min-height:540px;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(5,6,8,.24),rgba(5,6,8,.32)),
    linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.48)),
    url("/myhome-welcome-redroom.webp") center/cover no-repeat!important;
}
#emptyChat.empty-chat-redroom-v96.hidden{display:none!important}
#emptyChat.empty-chat-redroom-v96:before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 45%,rgba(239,35,60,.13),transparent 35%);
  pointer-events:none;
}
.welcome-v96{
  position:relative;z-index:1;
  width:min(650px,88%);
  text-align:center;
  padding:34px 28px;
  border-radius:28px;
  background:rgba(5,7,10,.24);
  backdrop-filter:blur(2px);
  text-shadow:0 2px 20px #000;
}
.welcome-logo-v96{
  width:142px;height:142px;object-fit:cover;border-radius:30px;
  box-shadow:0 0 34px rgba(239,35,60,.24);
}
.welcome-brand-v96{font-size:54px;font-weight:900;line-height:1;margin-top:10px;color:#e8e8ea}
.welcome-brand-v96 span{color:#ef233c}
.welcome-tag-v96{font-size:10px;letter-spacing:.44em;color:#a6a8af;margin:10px 0 26px}
.welcome-v96 h2{font-size:25px;margin:0 0 7px;color:#fff}
.welcome-v96 p{margin:0;color:#aeb1b8}
.welcome-actions-v96{
  display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-top:28px;
}
.welcome-actions-v96>div{
  padding:15px 8px;border:1px solid rgba(239,35,60,.23);
  border-radius:16px;background:rgba(43,11,17,.42);
  display:grid;gap:7px;color:#d8dae0;
}
.welcome-actions-v96 b{font-size:24px}
.welcome-actions-v96 span{font-size:11px}
.welcome-script-v96{
  margin-top:31px;
  font-family:"Segoe Script","Brush Script MT",cursive;
  font-size:23px;color:#ececef;transform:rotate(-4deg);
}
.welcome-script-v96:after{
  content:"";display:block;width:180px;height:3px;margin:7px auto 0;
  background:#ef233c;border-radius:99px;transform:rotate(-4deg);
}
@media(max-width:900px){
  #view-chats .chat-layout{grid-template-columns:1fr!important}
  #view-chats .chat-list-panel{width:auto!important}
  #emptyChat.empty-chat-redroom-v96{min-height:calc(100vh - 90px)}
  .welcome-actions-v96{grid-template-columns:repeat(2,1fr)}
  .welcome-brand-v96{font-size:42px}
}

/* ===== MyHome V9.7 — Restored Quick Profile ===== */
.me-mini-v97{
  cursor:pointer;
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  transition:.18s ease;
}
.me-mini-v97:hover{
  border-color:#7e2330!important;
  box-shadow:0 0 16px rgba(239,35,60,.18)!important;
}
.me-mini-v97 .avatar{width:40px;height:40px}
.me-mini-v97 .mini-presence-v97{
  font-size:10px;
  margin-top:2px;
  color:#a9afb9;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.me-mini-v97 .chev-v97{font-size:18px;color:#8e949f}

.quick-profile-menu-v97{
  position:absolute;
  left:14px;
  bottom:92px;
  width:320px;
  z-index:999;
  padding:14px;
  border:1px solid #4b222b;
  border-radius:18px;
  background:linear-gradient(145deg,#15171d,#090b0f);
  box-shadow:0 24px 65px #000d,0 0 24px rgba(239,35,60,.18);
}
.quick-profile-menu-v97:after{
  content:"";
  position:absolute;
  left:24px;bottom:-8px;
  width:16px;height:16px;
  background:#0b0d11;
  transform:rotate(45deg);
  border-right:1px solid #4b222b;
  border-bottom:1px solid #4b222b;
}
.quick-profile-head-v97{
  display:grid;
  grid-template-columns:52px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding-bottom:12px;
  border-bottom:1px solid #2a2d34;
}
.quick-profile-head-v97 .avatar{width:50px;height:50px}
.quick-profile-user-v97{display:grid;gap:2px;min-width:0}
.quick-profile-user-v97 b{font-size:16px}
.quick-profile-user-v97 span{font-size:12px;color:#9ba1ad}
.quick-profile-user-v97 small{
  color:#e1aab3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.quick-section-v97{padding:11px 0;border-bottom:1px solid #252831}
.quick-label-v97{font-size:11px;color:#8f95a0;margin-bottom:7px}
.presence-grid-v97{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.presence-grid-v97 button,
.quick-actions-v97 button{
  border:1px solid #30343c;
  background:#171a21;
  color:#f0f1f3;
  border-radius:10px;
  padding:9px 10px;
  text-align:left;
  font-size:12px;
}
.presence-grid-v97 button.active{
  border-color:#ef233c;
  background:linear-gradient(90deg,#4a121b,#211216);
  box-shadow:0 0 12px rgba(239,35,60,.22);
}
.quick-status-row-v97{display:grid;grid-template-columns:1fr auto;gap:6px}
.quick-status-row-v97 input{padding:9px 10px!important}
.quick-actions-v97{display:grid;gap:6px;padding-top:11px}
.quick-actions-v97 button:hover{
  border-color:#8b2734;
  background:#211419;
}
.quick-actions-v97 .dangerish-v97{
  color:#ff9baa;
  border-color:#6e2430;
  background:#2b1217;
}
.quick-qr-card-v97{text-align:center;width:min(390px,92vw)}
.quick-qr-box-v97{
  width:230px;height:230px;
  margin:16px auto;
  padding:12px;
  border-radius:18px;
  background:#fff;
  display:grid;
  place-items:center;
}
.quick-qr-box-v97 img{max-width:100%;max-height:100%}

@media(max-width:900px){
  .quick-profile-menu-v97{
    position:fixed;
    left:10px;right:10px;bottom:12px;
    width:auto;
    max-height:78vh;
    overflow:auto;
    border-radius:20px;
  }
  .quick-profile-menu-v97:after{display:none}
}

/* ===== MyHome V9.8 — animated idle chat background =====
   Shown ONLY while no friend/group chat is open.
*/
#emptyChat.empty-chat-redroom-v96{
  background:
    linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.52)),
    url("/myhome-idle-anime.gif") center center / cover no-repeat !important;
}
#emptyChat.empty-chat-redroom-v96::before{
  background:
    radial-gradient(circle at 50% 42%,rgba(0,0,0,0),rgba(0,0,0,.22) 72%,rgba(0,0,0,.46) 100%) !important;
}
/* Keep the welcome content readable without hiding the animation. */
#emptyChat .welcome-v96{
  background:rgba(5,7,10,.18) !important;
  backdrop-filter:blur(1px) !important;
}
@media (max-width:900px){
  #emptyChat.empty-chat-redroom-v96{
    background-position:center center !important;
  }
}

/* ===== MyHome V9.9 CLEAN IDLE =====
   Empty chat screen = background only. No logo, text, buttons or center card.
*/
#emptyChat.empty-chat-redroom-v96{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:540px !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow:hidden !important;
  background:
    url("/myhome-idle-anime.gif") center center / cover no-repeat !important;
}
#emptyChat.empty-chat-redroom-v96.hidden{
  display:none !important;
}
#emptyChat.empty-chat-redroom-v96::before,
#emptyChat.empty-chat-redroom-v96::after{
  content:none !important;
  display:none !important;
}
#emptyChat .welcome-v96,
#emptyChat .welcome-logo-v96,
#emptyChat .welcome-brand-v96,
#emptyChat .welcome-tag-v96,
#emptyChat .welcome-actions-v96,
#emptyChat .welcome-script-v96{
  display:none !important;
}
@media(max-width:900px){
  #emptyChat.empty-chat-redroom-v96{
    min-height:calc(100vh - 90px) !important;
    background-position:center center !important;
  }
}

/* ===== MyHome V10 — Admin Chat Background ===== */
.admin-chat-bg-v10{overflow:hidden}
.admin-bg-note-v10{
  margin:8px 0 14px;
  padding:11px 13px;
  border:1px solid #3c3035;
  border-radius:12px;
  background:#121419;
  color:#adb2bc;
  font-size:12px;
  line-height:1.65;
}
.admin-bg-note-v10 b{color:#fff}
.admin-bg-layout-v10{
  display:grid;
  grid-template-columns:minmax(280px,1.6fr) minmax(210px,.8fr);
  gap:16px;
  align-items:start;
}
.admin-bg-preview-wrap-v10{
  position:relative;
  min-height:250px;
  overflow:hidden;
  border-radius:16px;
  border:1px solid #353941;
  background:#07090c;
}
.admin-bg-preview-title-v10{
  position:absolute;
  z-index:2;
  top:10px;left:10px;
  padding:6px 9px;
  border-radius:8px;
  background:#000b;
  color:#fff;
  font-size:11px;
}
.admin-bg-preview-v10{
  width:100%;
  height:300px;
  display:block;
  object-fit:cover;
  background:#07090c;
}
.admin-bg-empty-v10{
  position:absolute;
  inset:0;
  z-index:1;
  display:grid;
  place-items:center;
  color:#7f8590;
  background:#090b0f;
}
.admin-bg-controls-v10{
  display:grid;
  gap:10px;
}
.admin-bg-upload-v10{
  min-height:46px;
  display:grid;
  place-items:center;
  padding:10px;
  cursor:pointer;
  color:#fff;
  border:1px dashed #6f2a35;
  border-radius:12px;
  background:#221217;
}
.admin-bg-upload-v10:hover{
  border-color:#ef3348;
  background:#2c131a;
}
.admin-bg-controls-v10 button{width:100%}

/* Dynamic idle background.
   JavaScript sets background-image from the admin setting. */
#emptyChat.empty-chat-redroom-v96{
  background-color:#07090c !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}

@media(max-width:800px){
  .admin-bg-layout-v10{grid-template-columns:1fr}
  .admin-bg-preview-v10{height:220px}
}


/* ===== MyHome V10.2 FINAL BACKGROUND FIX ===== */

/* Admin cards must never overlap */
#view-admin .admin-wrap{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}
#view-admin .admin-stats{
  flex:none !important;
  margin-bottom:0 !important;
}
#view-admin .panel{
  position:relative !important;
  flex:none !important;
  width:100% !important;
  margin:0 !important;
}
.admin-chat-bg-v10{
  min-height:auto !important;
  overflow:visible !important;
}
.admin-bg-preview-wrap-v10{
  min-width:0 !important;
}
.admin-bg-preview-v10{
  position:relative !important;
  z-index:1 !important;
}
.admin-bg-status-v102{
  padding:8px 10px;
  border-radius:9px;
  border:1px solid #244f38;
  background:#10251b;
  color:#9ee2b8;
  font-size:11px;
  line-height:1.4;
}
.admin-bg-status-v102.bad-v102{
  border-color:#6c2630;
  background:#291217;
  color:#ff9daa;
}

/* Idle area = background only. No old card, no overlay, no pseudo elements. */
#emptyChat.empty-chat-redroom-v96{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  overflow:hidden !important;
  background-color:#07090c !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
#emptyChat.empty-chat-redroom-v96.hidden{
  display:none !important;
}
#emptyChat.empty-chat-redroom-v96::before,
#emptyChat.empty-chat-redroom-v96::after{
  content:none !important;
  display:none !important;
}

/* Critical: at medium desktop widths the old mobile CSS hid the entire chat panel.
   Keep two-column chat visible from 601px upward, so the idle background can actually be seen. */
@media (min-width:601px) and (max-width:900px){
  #view-chats .chat-layout{
    grid-template-columns:minmax(220px,34%) minmax(0,1fr) !important;
    gap:8px !important;
  }
  #view-chats .chat-list-panel{
    height:100% !important;
  }
  #view-chats .chat-panel{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    height:100% !important;
    min-width:0 !important;
    z-index:auto !important;
    border-radius:16px !important;
  }
  #view-chats .chat-panel #emptyChat:not(.hidden){
    display:block !important;
  }
  #view-chats .chat-panel #chatArea:not(.hidden),
  #view-chats .chat-panel #groupChatArea:not(.hidden){
    display:grid !important;
  }
}

/* Real mobile: keep original full-screen chat behavior. */
@media (max-width:600px){
  .admin-bg-layout-v10{grid-template-columns:1fr !important}
  .admin-bg-preview-v10{height:210px !important}
}


/* ===== MyHome V10.3 — Admin layout + persistent background hard fix ===== */

/* Admin page: no overlapping cards, regardless of old CSS */
#view-admin{
  overflow:auto !important;
  height:calc(100vh - 76px) !important;
  padding:16px !important;
}
#view-admin .admin-wrap{
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  padding:0 0 32px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:16px !important;
  align-content:start !important;
}
#view-admin .admin-stats{
  position:static !important;
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
  width:100% !important;
  margin:0 !important;
}
#view-admin .panel,
#view-admin .admin-chat-bg-v10{
  position:static !important;
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  transform:none !important;
  inset:auto !important;
  overflow:hidden !important;
  clear:both !important;
}
#view-admin .admin-chat-bg-v10{
  padding:16px !important;
}
#view-admin .admin-bg-layout-v10{
  width:100% !important;
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 260px !important;
  gap:14px !important;
  align-items:start !important;
}
#view-admin .admin-bg-preview-wrap-v10{
  width:100% !important;
  min-width:0 !important;
  min-height:260px !important;
  height:320px !important;
}
#view-admin .admin-bg-preview-v10{
  width:100% !important;
  height:100% !important;
  min-height:260px !important;
  object-fit:cover !important;
}
#view-admin .admin-bg-controls-v10{
  min-width:0 !important;
  width:100% !important;
}
#view-admin .admin-users{
  width:100% !important;
  min-width:0 !important;
}

/* At widths like the screenshot, stack the preview and controls.
   This prevents the settings card from being squeezed or covering the next card. */
@media (max-width:1100px){
  #view-admin .admin-bg-layout-v10{
    grid-template-columns:1fr !important;
  }
  #view-admin .admin-bg-preview-wrap-v10{
    height:300px !important;
  }
  #view-admin .admin-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Desktop app with narrow browser window: keep sidebar and admin content separate */
@media (min-width:801px){
  #appScreen{
    align-items:stretch !important;
  }
  .sidebar{
    flex:0 0 245px !important;
    width:245px !important;
    min-width:245px !important;
    overflow:hidden !important;
  }
  .main{
    flex:1 1 auto !important;
    min-width:0 !important;
    width:calc(100% - 245px) !important;
  }
}

/* Mobile/tablet admin */
@media (max-width:800px){
  #view-admin{
    height:calc(100vh - 64px) !important;
    padding:10px !important;
  }
  #view-admin .admin-wrap{
    gap:12px !important;
    padding-bottom:24px !important;
  }
  #view-admin .admin-bg-layout-v10{
    grid-template-columns:1fr !important;
  }
  #view-admin .admin-bg-preview-wrap-v10{
    height:240px !important;
    min-height:240px !important;
  }
  #view-admin .admin-bg-preview-v10{
    min-height:240px !important;
  }
  #view-admin .admin-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* Idle chat background: only the chosen image/GIF, no overlays/cards. */
#emptyChat.empty-chat-redroom-v96{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  min-height:100% !important;
  padding:0 !important;
  margin:0 !important;
  overflow:hidden !important;
  background-color:#07090c !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
}
#emptyChat.empty-chat-redroom-v96::before,
#emptyChat.empty-chat-redroom-v96::after{
  display:none !important;
  content:none !important;
}


/* =========================================================
   MyHome V10.4 — ALL FIX
   1) Quick Profile is never clipped/covered
   2) Sidebar stays above main content
   3) Admin cards cannot overlap
   4) Empty-chat background stays visible on desktop/tablet
   ========================================================= */

/* ---------- QUICK PROFILE / SIDEBAR ---------- */
.sidebar{
  overflow:visible !important;
  z-index:1000 !important;
  isolation:isolate !important;
}
.main{
  position:relative !important;
  z-index:1 !important;
}
.quick-profile-menu-v97{
  position:fixed !important;
  left:14px !important;
  bottom:92px !important;
  width:min(320px,calc(100vw - 28px)) !important;
  max-height:calc(100vh - 115px) !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:99999 !important;
  transform:none !important;
  clip-path:none !important;
  contain:none !important;
}
.quick-profile-menu-v97:after{
  position:fixed !important;
  left:38px !important;
  bottom:84px !important;
  z-index:99998 !important;
}
.me-mini-v97{
  position:relative !important;
  z-index:1001 !important;
}

/* ---------- ADMIN LAYOUT ---------- */
#view-admin{
  position:relative !important;
  z-index:1 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
}
#view-admin .admin-wrap{
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
  width:100% !important;
  max-width:1180px !important;
  margin:0 auto !important;
  min-height:max-content !important;
}
#view-admin .admin-wrap > *{
  position:relative !important;
  inset:auto !important;
  float:none !important;
  clear:both !important;
  flex:0 0 auto !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  transform:none !important;
}
#view-admin .admin-stats{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:10px !important;
}
#view-admin .admin-chat-bg-v10{
  display:block !important;
  overflow:visible !important;
}
#view-admin .admin-bg-layout-v10{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 260px !important;
  gap:14px !important;
  align-items:start !important;
}
#view-admin .admin-bg-preview-wrap-v10{
  position:relative !important;
  width:100% !important;
  height:320px !important;
  min-height:320px !important;
  overflow:hidden !important;
}
#view-admin .admin-bg-preview-v10{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
}
#view-admin .admin-users{
  position:relative !important;
  z-index:1 !important;
}

/* ---------- EMPTY CHAT BACKGROUND ---------- */
#view-chats .chat-panel{
  position:relative !important;
  min-width:0 !important;
}
#emptyChat.empty-chat-redroom-v96{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  padding:0 !important;
  margin:0 !important;
  display:block !important;
  background-color:#07090c !important;
  background-size:cover !important;
  background-position:center center !important;
  background-repeat:no-repeat !important;
  overflow:hidden !important;
  z-index:0 !important;
}
#emptyChat.empty-chat-redroom-v96.hidden{
  display:none !important;
}
#emptyChat.empty-chat-redroom-v96::before,
#emptyChat.empty-chat-redroom-v96::after{
  display:none !important;
  content:none !important;
}
#chatArea,#groupChatArea{
  position:relative !important;
  z-index:1 !important;
  background:var(--panel) !important;
}

/* Tablet / narrow desktop: keep BOTH chat columns visible.
   Old max-width:800 rules used to hide the right chat panel. */
@media (min-width:601px) and (max-width:1100px){
  #view-chats .chat-layout{
    display:grid !important;
    grid-template-columns:minmax(210px,34%) minmax(0,1fr) !important;
    gap:8px !important;
    height:100% !important;
  }
  #view-chats .chat-list-panel{
    position:relative !important;
    display:block !important;
    height:100% !important;
    width:auto !important;
  }
  #view-chats .chat-panel{
    position:relative !important;
    inset:auto !important;
    display:block !important;
    height:100% !important;
    width:auto !important;
    border-radius:16px !important;
    z-index:1 !important;
  }
  #view-chats .chat-panel:not(.mobile-open) #emptyChat:not(.hidden){
    display:block !important;
  }

  #view-admin .admin-bg-layout-v10{
    grid-template-columns:1fr !important;
  }
  #view-admin .admin-stats{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* True phone layout only */
@media (max-width:600px){
  .quick-profile-menu-v97{
    left:10px !important;
    right:10px !important;
    bottom:78px !important;
    width:auto !important;
    max-height:calc(100vh - 95px) !important;
  }
  #view-admin .admin-bg-layout-v10{
    grid-template-columns:1fr !important;
  }
  #view-admin .admin-bg-preview-wrap-v10{
    height:230px !important;
    min-height:230px !important;
  }
}


/* =========================================================
   MyHome V11 — Readability + Modern Chat UI
   ========================================================= */

/* Global readability: previous UI was too small */
body{font-size:16px !important}
.sidebar,.main,.panel,.modal,.toast{font-size:15px}
.nav-item,.menu-item,.mini,.primary,button,input,textarea,select{
  font-size:14px !important;
}
.section-title,.chat-title,.group-title{
  font-size:17px !important;
}
.muted,.small{
  font-size:13px !important;
  line-height:1.45 !important;
}

/* Conversation list */
.chat-item .name,.friend-item .name,.group-item .name{
  font-size:15px !important;
  font-weight:700 !important;
}
.chat-item .preview,.friend-item .sub,.group-item .sub{
  font-size:13px !important;
}

/* Messages */
.message,.msg,.bubble,.message-bubble{
  font-size:16px !important;
  line-height:1.5 !important;
}
.message .time,.msg .time,.bubble .time,.message-meta{
  font-size:11px !important;
}
#messageInput,#groupMessageInput{
  font-size:16px !important;
  line-height:1.45 !important;
}

/* Hover toolbar foundation for reply/reaction/pin */
.message,.msg{
  position:relative !important;
}
.msg-tools-v11{
  display:none;
  position:absolute;
  top:-31px;
  right:6px;
  z-index:30;
  gap:4px;
  padding:4px;
  border:1px solid #343942;
  border-radius:10px;
  background:#101319;
  box-shadow:0 8px 25px #0008;
}
.message:hover .msg-tools-v11,.msg:hover .msg-tools-v11{
  display:flex;
}
.msg-tools-v11 button{
  min-width:28px;
  height:27px;
  padding:0 6px !important;
  border:0;
  border-radius:7px;
  background:transparent;
  cursor:pointer;
}
.msg-tools-v11 button:hover{background:#272c34}

/* Reply preview */
.reply-preview-v11{
  display:none;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-left:3px solid #ef3348;
  background:#14171d;
  font-size:13px;
}
.reply-preview-v11.active{display:flex}
.reply-preview-v11 .reply-text-v11{
  min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.reply-preview-v11 .reply-close-v11{
  border:0;background:transparent;font-size:18px!important;cursor:pointer;
}

/* Typing */
.typing-v11{
  min-height:18px;
  padding:0 12px 4px;
  font-size:12px;
  color:#9298a4;
}

/* Reactions */
.reactions-v11{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
}
.reaction-v11{
  padding:2px 7px;
  border:1px solid #343943;
  border-radius:999px;
  background:#171a20;
  font-size:12px;
  cursor:pointer;
}
.reaction-v11.mine{border-color:#ef3348;background:#2b151a}

/* Pinned/reply quote */
.reply-quote-v11{
  margin-bottom:5px;
  padding:5px 7px;
  border-left:2px solid #ef3348;
  border-radius:5px;
  background:#0003;
  font-size:12px;
  opacity:.9;
}
.pinned-v11::after{
  content:"📌";
  position:absolute;
  top:3px;
  right:4px;
  font-size:10px;
}

/* Voice recorder button state */
.recording-v11{
  animation:recordPulseV11 .9s infinite alternate;
}
@keyframes recordPulseV11{
  from{transform:scale(1)}
  to{transform:scale(1.08)}
}

/* Chat theme controls */
.chat-theme-panel-v11{
  display:grid;
  gap:10px;
}
.chat-theme-row-v11{
  display:grid;
  grid-template-columns:130px minmax(0,1fr);
  gap:10px;
  align-items:center;
}
.chat-theme-row-v11 input[type="range"]{width:100%}

@media(max-width:600px){
  body{font-size:16px !important}
  .message,.msg,.bubble,.message-bubble{font-size:16px !important}
  .msg-tools-v11{top:-29px}
}


/* =========================================================
   MyHome V11.1 — Premium Composer
   Mic | Emoji | Image | GIF | Message | Send
   No 0/2000 counter
   ========================================================= */

.composer-v111{
  position:relative !important;
  display:grid !important;
  grid-template-columns:58px 58px 58px 58px minmax(180px,1fr) 64px !important;
  align-items:center !important;
  gap:10px !important;
  padding:12px !important;
  min-height:84px !important;
  border:1px solid #303644 !important;
  border-radius:22px !important;
  background:
    linear-gradient(180deg,rgba(17,20,27,.98),rgba(8,11,16,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.025),
    0 10px 30px rgba(0,0,0,.24) !important;
}

.composer-v111 .composer-btn-v111{
  width:58px !important;
  height:58px !important;
  min-width:58px !important;
  display:grid !important;
  place-items:center !important;
  padding:0 !important;
  border:1px solid #303746 !important;
  border-radius:16px !important;
  color:#e8ebf2 !important;
  background:linear-gradient(180deg,#171c25,#10141b) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03) !important;
  cursor:pointer !important;
  transition:.18s ease !important;
}

.composer-v111 .composer-btn-v111:hover{
  transform:translateY(-1px) !important;
  border-color:#5b6476 !important;
  background:linear-gradient(180deg,#1d2330,#141922) !important;
}

.composer-v111 .composer-btn-v111 svg{
  width:26px !important;
  height:26px !important;
  fill:currentColor !important;
  display:block !important;
}

.composer-v111 .composer-btn-v111.gif-v111{
  font-size:16px !important;
  font-weight:900 !important;
  letter-spacing:.2px !important;
}

.composer-v111 .voice-v11{
  width:58px !important;
  height:58px !important;
  border-radius:16px !important;
  color:#fff !important;
  border-color:#ff2746 !important;
  background:
    linear-gradient(180deg,#ff2f52,#d80d31) !important;
  box-shadow:
    0 0 18px rgba(255,31,67,.25),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-size:0 !important;
}
.composer-v111 .voice-v11::before{
  content:"";
  width:26px;height:26px;
  display:block;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21H8v2h8v-2h-3v-3.07A7 7 0 0 0 19 11h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 14a3 3 0 0 0 3-3V5a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.93V21H8v2h8v-2h-3v-3.07A7 7 0 0 0 19 11h-2Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.composer-v111 .voice-v11.recording-v11::before{
  width:18px;height:18px;border-radius:4px;-webkit-mask:none;mask:none;background:#fff;
}

.composer-input-shell-v111{
  position:relative !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  min-height:58px !important;
  padding:0 18px !important;
  border:1px solid #4a5365 !important;
  border-radius:18px !important;
  background:#111620 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    0 0 0 0 rgba(255,34,67,0) !important;
  transition:.18s ease !important;
}
.composer-input-shell-v111:focus-within{
  border-color:#ef3348 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 0 0 3px rgba(239,51,72,.10) !important;
}

.composer-v111 #messageInput,
.composer-v111 #groupMessageInput{
  width:100% !important;
  min-width:0 !important;
  min-height:28px !important;
  max-height:128px !important;
  padding:10px 0 !important;
  margin:0 !important;
  border:0 !important;
  outline:0 !important;
  resize:none !important;
  background:transparent !important;
  color:#f4f6fb !important;
  font-size:16px !important;
  line-height:1.45 !important;
  box-shadow:none !important;
}
.composer-v111 #messageInput::placeholder,
.composer-v111 #groupMessageInput::placeholder{
  color:#82899a !important;
  opacity:1 !important;
}

.composer-v111 .send-v111{
  width:64px !important;
  height:58px !important;
  min-width:64px !important;
  border:1px solid #ff2646 !important;
  border-radius:18px !important;
  color:#fff !important;
  background:linear-gradient(180deg,#ff2d50,#d30c2f) !important;
  box-shadow:
    0 0 20px rgba(255,33,66,.25),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.composer-v111 .send-v111:hover{
  transform:translateY(-1px) scale(1.02) !important;
  background:linear-gradient(180deg,#ff3e5d,#e51538) !important;
}
.composer-v111 .send-v111 svg{
  width:29px !important;
  height:29px !important;
}

/* Hide all old visible counters around the composer */
.composer-v111 .char-count,
.composer-v111 .counter,
.composer-v111 [id*="Count"],
.composer-v111 [class*="count"]:not(.reaction-v11){
  display:none !important;
}

/* Make reply/typing align with the new composer */
.reply-preview-v11{
  margin:0 12px 8px !important;
  border-radius:10px !important;
}
.typing-v11{
  padding:0 14px 7px !important;
}

/* Responsive: preserve clean layout instead of crushing buttons */
@media(max-width:900px){
  .composer-v111{
    grid-template-columns:50px 50px 50px 50px minmax(130px,1fr) 56px !important;
    gap:7px !important;
    padding:9px !important;
    min-height:72px !important;
  }
  .composer-v111 .composer-btn-v111,
  .composer-v111 .voice-v11{
    width:50px !important;height:50px !important;min-width:50px !important;border-radius:14px !important;
  }
  .composer-v111 .send-v111{
    width:56px !important;height:50px !important;min-width:56px !important;border-radius:15px !important;
  }
  .composer-input-shell-v111{min-height:50px !important;border-radius:15px !important}
}
@media(max-width:620px){
  .composer-v111{
    grid-template-columns:44px 44px 44px 44px minmax(0,1fr) 50px !important;
    gap:5px !important;
    padding:7px !important;
    border-radius:16px !important;
  }
  .composer-v111 .composer-btn-v111,
  .composer-v111 .voice-v11{
    width:44px !important;height:44px !important;min-width:44px !important;border-radius:12px !important;
  }
  .composer-v111 .composer-btn-v111 svg{width:22px !important;height:22px !important}
  .composer-v111 .send-v111{
    width:50px !important;height:44px !important;min-width:50px !important;border-radius:13px !important;
  }
  .composer-input-shell-v111{
    min-height:44px !important;padding:0 12px !important;border-radius:13px !important;
  }
  .composer-v111 #messageInput,
  .composer-v111 #groupMessageInput{
    font-size:15px !important;
  }
}


/* =========================================================
   MyHome V11.2 — LONG COMPOSER FIX
   Keep controls compact, make text input long like reference.
   ========================================================= */

.composer-v111{
  width:100% !important;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:10px 12px !important;
  min-height:72px !important;
}

.composer-v111 .composer-btn-v111,
.composer-v111 .voice-v11{
  flex:0 0 46px !important;
  width:46px !important;
  min-width:46px !important;
  height:46px !important;
  border-radius:13px !important;
}

.composer-v111 .send-v111{
  flex:0 0 52px !important;
  width:52px !important;
  min-width:52px !important;
  height:46px !important;
  border-radius:14px !important;
}

.composer-input-shell-v111{
  flex:1 1 auto !important;
  width:auto !important;
  min-width:260px !important;
  max-width:none !important;
  min-height:46px !important;
  padding:0 15px !important;
  border-radius:14px !important;
}

.composer-v111 #messageInput,
.composer-v111 #groupMessageInput{
  display:block !important;
  flex:1 1 auto !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  min-height:26px !important;
  padding:8px 0 !important;
  font-size:16px !important;
}

/* Make sure the composer itself is not constrained by legacy input rows */
#chatArea .composer-v111,
#groupChatArea .composer-v111{
  grid-column:1 / -1 !important;
  max-width:none !important;
  margin:0 !important;
}

/* Desktop/tablet: the input should clearly dominate the bar */
@media (min-width:701px){
  .composer-input-shell-v111{
    min-width:320px !important;
  }
}

/* Narrow screens: still prioritize the input, while keeping controls usable */
@media (max-width:700px){
  .composer-v111{
    gap:6px !important;
    padding:8px !important;
  }
  .composer-v111 .composer-btn-v111,
  .composer-v111 .voice-v11{
    flex-basis:40px !important;
    width:40px !important;
    min-width:40px !important;
    height:40px !important;
  }
  .composer-v111 .send-v111{
    flex-basis:46px !important;
    width:46px !important;
    min-width:46px !important;
    height:40px !important;
  }
  .composer-input-shell-v111{
    min-width:120px !important;
    min-height:40px !important;
    padding:0 11px !important;
  }
}


/* =========================================================
   MyHome V11.3 — Composer / Sticker / GIF / Voice final
   ========================================================= */

/* Composer exists ONLY inside active chat areas */
#chatArea.hidden .composer-v113,
#groupChatArea.hidden .composer-v113,
#chatArea.hidden .media-picker-v113,
#groupChatArea.hidden .media-picker-v113{display:none !important}

.composer-v113{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  width:100% !important;
  padding:9px 10px !important;
  border-top:1px solid #2d3340 !important;
  background:#0b0e13 !important;
  box-sizing:border-box !important;
}
.composer-btn-v113{
  flex:0 0 42px !important;
  width:42px !important;height:42px !important;
  display:grid !important;place-items:center !important;
  padding:0 !important;
  border:1px solid #303746 !important;border-radius:12px !important;
  background:#151a22 !important;color:#eef1f6 !important;
  font-size:18px !important;cursor:pointer !important;
}
.composer-btn-v113:hover{border-color:#5a6270 !important;background:#1b212b !important}
.composer-btn-v113.mic-v113{
  background:linear-gradient(180deg,#ff3152,#d91233) !important;
  border-color:#ff3152 !important;color:#fff !important;
}
.composer-btn-v113.recording-v113{animation:recordPulseV113 .7s infinite alternate !important}
@keyframes recordPulseV113{to{box-shadow:0 0 0 7px rgba(255,40,73,.13);transform:scale(1.04)}}
.composer-btn-v113.gif-v113{font-size:12px !important;font-weight:900 !important}
.composer-input-shell-v113{
  flex:1 1 auto !important;min-width:160px !important;
  min-height:42px !important;
  display:flex !important;align-items:center !important;
  padding:0 14px !important;
  border:1px solid #465064 !important;border-radius:13px !important;
  background:#121722 !important;
}
.composer-input-shell-v113:focus-within{border-color:#ef3348 !important;box-shadow:0 0 0 3px rgba(239,51,72,.09) !important}
.composer-v113 #messageInput,.composer-v113 #groupMessageInput{
  width:100% !important;min-width:0 !important;
  border:0 !important;background:transparent !important;outline:0 !important;
  color:#f2f4f8 !important;font-size:16px !important;
  padding:9px 0 !important;box-shadow:none !important;
}
.send-v113{
  flex:0 0 48px !important;width:48px !important;height:42px !important;
  border:1px solid #ff3152 !important;border-radius:13px !important;
  color:#fff !important;background:linear-gradient(180deg,#ff3152,#d91233) !important;
  font-size:21px !important;cursor:pointer !important;
}

/* media picker */
.media-picker-v113{
  position:absolute !important;
  left:10px !important;bottom:70px !important;
  width:min(420px,calc(100% - 20px)) !important;
  max-height:320px !important;overflow:auto !important;
  z-index:300 !important;
  padding:10px !important;
  border:1px solid #343b49 !important;border-radius:16px !important;
  background:#10141b !important;
  box-shadow:0 18px 45px #000b !important;
}
.media-picker-tabs-v113{display:flex;gap:6px;margin-bottom:10px}
.media-picker-tabs-v113 button{
  padding:7px 12px !important;border-radius:9px !important;
  border:1px solid #333a47 !important;background:#171c25 !important;color:#cdd2dd !important;cursor:pointer;
}
.media-picker-tabs-v113 button.active{background:#30141b !important;border-color:#ef3348 !important;color:#fff !important}
.emoji-grid-v113{display:grid;grid-template-columns:repeat(8,1fr);gap:5px}
.emoji-grid-v113 button{
  height:38px;border:0;border-radius:8px;background:transparent;font-size:24px;cursor:pointer
}
.emoji-grid-v113 button:hover{background:#222833}
.sticker-grid-v113{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.sticker-item-v113{
  aspect-ratio:1/1;border:1px solid #2d3440;border-radius:12px;background:#090c10;padding:5px;overflow:hidden;cursor:pointer
}
.sticker-item-v113 img{width:100%;height:100%;object-fit:contain;display:block}

/* Voice preview lives INSIDE input shell; recording no longer auto-sends */
.voice-preview-v113{
  width:100% !important;display:flex !important;align-items:center !important;gap:8px !important;
}
.voice-preview-v113.hidden{display:none !important}
.hidden-during-voice-v113{display:none !important}
.voice-wave-v113{
  flex:1;display:flex;align-items:center;justify-content:center;gap:2px;height:32px;overflow:hidden
}
.voice-wave-v113 i{
  display:block;width:3px;min-height:5px;border-radius:999px;
  background:linear-gradient(180deg,#ff4561,#ef1739)
}
.voice-play-v113,.voice-clear-v113{
  width:30px;height:30px;border:0;border-radius:50%;background:#202631;color:#fff;cursor:pointer
}
.voice-clear-v113{color:#ff7287}
.voice-preview-v113 span{font-size:12px;color:#aeb5c3;min-width:35px}
.voice-msg-v113{display:flex;align-items:center;gap:8px;min-width:220px}
.voice-msg-v113 audio{height:36px;max-width:280px}

/* admin central sticker library */
.admin-sticker-upload-v113{
  display:grid;grid-template-columns:150px minmax(180px,1fr) 150px;gap:10px;align-items:center;margin:12px 0
}
.admin-sticker-upload-v113 select{
  height:42px;border:1px solid #343a47;border-radius:10px;background:#10141a;color:#fff;padding:0 10px
}
.admin-sticker-list-v113{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}
.admin-sticker-item-v113{
  display:grid;grid-template-columns:62px 1fr auto;gap:10px;align-items:center;
  padding:8px;border:1px solid #2e3541;border-radius:12px;background:#10141a;min-width:0
}
.admin-sticker-item-v113 img{width:62px;height:62px;object-fit:contain;border-radius:8px;background:#090b0f}
.admin-sticker-item-v113>div{min-width:0;overflow:hidden}
.admin-sticker-item-v113 .small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* keep picker positioned relative to actual chat areas */
#chatArea,#groupChatArea{position:relative !important}

/* old V11/legacy composer artifacts should not show */
#emojiBar{display:none !important}
.composer-v111{display:none !important}

@media(max-width:900px){
  .composer-v113{gap:6px !important;padding:7px !important}
  .composer-btn-v113{flex-basis:38px !important;width:38px !important;height:38px !important}
  .send-v113{flex-basis:44px !important;width:44px !important;height:38px !important}
  .composer-input-shell-v113{min-height:38px !important;padding:0 10px !important}
  .admin-sticker-list-v113{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .composer-btn-v113.image-v113{display:none !important}
  .composer-input-shell-v113{min-width:90px !important}
  .admin-sticker-upload-v113{grid-template-columns:1fr}
  .admin-sticker-list-v113{grid-template-columns:1fr}
  .sticker-grid-v113{grid-template-columns:repeat(3,1fr)}
}


/* =========================================================
   MyHome V11.5 — Animated Login Branding
   ========================================================= */

.auth-logo-motion-v115{
  position:relative !important;
  width:fit-content !important;
  max-width:100% !important;
  margin:0 auto 10px !important;
  overflow:hidden !important;
  border-radius:12px !important;
  animation:logoFloatV115 3.8s ease-in-out infinite !important;
  filter:drop-shadow(0 0 0 rgba(239,51,72,0));
}

.auth-logo-motion-v115 .auth-card-logo-v87{
  display:block !important;
  margin:0 !important;
  position:relative !important;
  z-index:1 !important;
  animation:
    logoPulseV115 2.8s ease-in-out infinite,
    logoMicroGlitchV115 8s steps(1,end) infinite !important;
  transform-origin:center !important;
  will-change:transform,filter !important;
}

.auth-logo-shine-v115{
  position:absolute !important;
  z-index:3 !important;
  top:-30% !important;
  bottom:-30% !important;
  width:32% !important;
  left:-42% !important;
  transform:skewX(-18deg) !important;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.03) 22%,
    rgba(255,255,255,.55) 50%,
    rgba(255,72,103,.18) 66%,
    transparent 100%
  ) !important;
  mix-blend-mode:screen !important;
  pointer-events:none !important;
  animation:logoShineSweepV115 4.6s ease-in-out infinite !important;
}

.auth-logo-scan-v115{
  position:absolute !important;
  z-index:2 !important;
  left:2% !important;
  right:2% !important;
  height:2px !important;
  top:12% !important;
  background:linear-gradient(90deg,transparent,#ff3554,rgba(255,255,255,.75),#ff3554,transparent) !important;
  box-shadow:0 0 12px rgba(255,38,73,.75) !important;
  opacity:0 !important;
  pointer-events:none !important;
  animation:logoScanV115 5.5s ease-in-out infinite !important;
}

.auth-card-v87 h1{
  animation:titleBreathV115 3.4s ease-in-out infinite !important;
}

.auth-live-line-v115{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  min-height:19px !important;
  margin:-2px 0 14px !important;
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.8px !important;
  color:#aeb5c3 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  overflow:hidden !important;
}

.auth-live-dot-v115{
  width:6px !important;
  height:6px !important;
  flex:0 0 6px !important;
  border-radius:50% !important;
  background:#ff3152 !important;
  box-shadow:0 0 10px rgba(255,49,82,.8) !important;
  animation:liveDotV115 1s ease-in-out infinite alternate !important;
}

.auth-live-caret-v115{
  width:2px !important;
  height:13px !important;
  background:#ff3152 !important;
  box-shadow:0 0 7px rgba(255,49,82,.65) !important;
  animation:caretBlinkV115 .72s steps(1,end) infinite !important;
}

.auth-side-copy-v87 > div{
  animation:sideWordFloatV115 4.5s ease-in-out infinite !important;
}
.auth-side-copy-v87 > div:nth-child(2){animation-delay:.25s !important}
.auth-side-copy-v87 > div:nth-child(3){animation-delay:.5s !important}
.auth-side-copy-v87 > div:nth-child(4){animation-delay:.75s !important}

.auth-main-btn-v87{
  position:relative !important;
  overflow:hidden !important;
}
.auth-main-btn-v87::after{
  content:"" !important;
  position:absolute !important;
  top:-40% !important;
  bottom:-40% !important;
  width:26% !important;
  left:-36% !important;
  transform:skewX(-18deg) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.33),transparent) !important;
  animation:loginBtnShineV115 3.8s ease-in-out infinite !important;
  pointer-events:none !important;
}

@keyframes logoFloatV115{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}
@keyframes logoPulseV115{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 rgba(255,38,73,0));transform:scale(1)}
  50%{filter:brightness(1.08) drop-shadow(0 0 11px rgba(255,38,73,.22));transform:scale(1.012)}
}
@keyframes logoShineSweepV115{
  0%,18%{left:-42%;opacity:0}
  28%{opacity:.9}
  50%{left:118%;opacity:.45}
  51%,100%{left:118%;opacity:0}
}
@keyframes logoScanV115{
  0%,70%{top:12%;opacity:0}
  74%{opacity:.85}
  86%{top:88%;opacity:.65}
  90%,100%{top:88%;opacity:0}
}
@keyframes logoMicroGlitchV115{
  0%,89%,91%,93%,100%{transform:translate(0,0)}
  90%{transform:translate(1px,-1px)}
  92%{transform:translate(-1px,1px)}
}
@keyframes titleBreathV115{
  0%,100%{text-shadow:0 0 0 rgba(255,49,82,0)}
  50%{text-shadow:0 0 14px rgba(255,49,82,.18)}
}
@keyframes liveDotV115{
  from{opacity:.35;transform:scale(.78)}
  to{opacity:1;transform:scale(1.18)}
}
@keyframes caretBlinkV115{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@keyframes sideWordFloatV115{
  0%,100%{transform:translateX(0);opacity:.82}
  50%{transform:translateX(5px);opacity:1}
}
@keyframes loginBtnShineV115{
  0%,38%{left:-36%;opacity:0}
  50%{opacity:.9}
  72%{left:118%;opacity:.25}
  73%,100%{left:118%;opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .auth-logo-motion-v115,
  .auth-logo-motion-v115 .auth-card-logo-v87,
  .auth-logo-shine-v115,
  .auth-logo-scan-v115,
  .auth-card-v87 h1,
  .auth-live-dot-v115,
  .auth-live-caret-v115,
  .auth-side-copy-v87 > div,
  .auth-main-btn-v87::after{
    animation:none !important;
  }
}


/* =========================================================
   MyHome V11.6 — Dynamic Login Background
   Parallax + Glow + Particles + Light streak + Mouse spotlight
   ========================================================= */

#authScreen{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
}

.auth-dynamic-v116{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}

.auth-dynamic-v116 > *{
  pointer-events:none !important;
}

.auth-parallax-bg-v116{
  position:absolute !important;
  inset:-5% !important;
  background:
    radial-gradient(circle at 25% 35%,rgba(255,38,72,.10),transparent 34%),
    radial-gradient(circle at 78% 22%,rgba(115,55,255,.10),transparent 30%),
    linear-gradient(125deg,rgba(255,255,255,.015),transparent 35%,rgba(255,40,73,.025) 65%,transparent) !important;
  transform:translate3d(var(--mx-v116,0px),var(--my-v116,0px),0) scale(1.03) !important;
  transition:transform .16s ease-out !important;
  animation:bgBreathV116 10s ease-in-out infinite !important;
}

.auth-glow-v116{
  position:absolute !important;
  width:420px !important;
  height:420px !important;
  border-radius:50% !important;
  filter:blur(75px) !important;
  opacity:.28 !important;
  mix-blend-mode:screen !important;
}

.glow-a-v116{
  left:-140px !important;
  top:12% !important;
  background:rgba(255,31,67,.46) !important;
  animation:glowFloatAV116 12s ease-in-out infinite !important;
}
.glow-b-v116{
  right:-150px !important;
  top:4% !important;
  background:rgba(112,49,255,.38) !important;
  animation:glowFloatBV116 14s ease-in-out infinite !important;
}
.glow-c-v116{
  left:42% !important;
  bottom:-220px !important;
  background:rgba(255,24,97,.22) !important;
  animation:glowFloatCV116 16s ease-in-out infinite !important;
}

.auth-light-streak-v116{
  position:absolute !important;
  width:46% !important;
  height:2px !important;
  opacity:0 !important;
  transform:rotate(-18deg) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),#ff3653,transparent) !important;
  box-shadow:0 0 16px rgba(255,37,70,.55) !important;
}

.streak-a-v116{
  left:-48% !important;
  top:28% !important;
  animation:streakMoveAV116 8.5s ease-in-out infinite !important;
}
.streak-b-v116{
  right:-52% !important;
  top:63% !important;
  transform:rotate(14deg) !important;
  animation:streakMoveBV116 11.5s ease-in-out infinite 2s !important;
}

#authParticlesV116{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:.68 !important;
}

.auth-mouse-glow-v116{
  position:absolute !important;
  width:320px !important;
  height:320px !important;
  border-radius:50% !important;
  background:radial-gradient(circle,rgba(255,56,90,.16),rgba(255,56,90,.06) 32%,transparent 70%) !important;
  filter:blur(10px) !important;
  transform:translate3d(-50%,-50%,0) !important;
  opacity:0 !important;
  transition:opacity .25s ease !important;
  mix-blend-mode:screen !important;
}

.auth-grain-v116{
  position:absolute !important;
  inset:-50% !important;
  opacity:.055 !important;
  background-image:
    repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.25) 0 1px,transparent 1px 3px) !important;
  background-size:4px 4px !important;
  animation:grainShiftV116 .45s steps(2,end) infinite !important;
}

.auth-vignette-v116{
  position:absolute !important;
  inset:0 !important;
  background:radial-gradient(circle at 50% 44%,transparent 36%,rgba(0,0,0,.18) 68%,rgba(0,0,0,.52) 100%) !important;
}

/* Keep login content above dynamic layers */
#authScreen .auth-side-copy-v87,
#authScreen .auth-card-v87,
#authScreen .auth-est-v87{
  position:relative !important;
  z-index:3 !important;
}

#authScreen .auth-bg-overlay-v87{
  z-index:1 !important;
}

/* subtle card depth and cursor-responsive shine */
.auth-card-v87{
  --tilt-x-v116:0deg;
  --tilt-y-v116:0deg;
  transform:
    perspective(1100px)
    rotateX(var(--tilt-x-v116))
    rotateY(var(--tilt-y-v116)) !important;
  transform-style:preserve-3d !important;
  transition:transform .16s ease-out,box-shadow .18s ease !important;
}
.auth-card-v87::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:inherit !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at var(--card-x-v116,50%) var(--card-y-v116,50%),
      rgba(255,255,255,.085),transparent 28%) !important;
  opacity:.75 !important;
  mix-blend-mode:screen !important;
}

@keyframes bgBreathV116{
  0%,100%{filter:brightness(1);opacity:.82}
  50%{filter:brightness(1.08);opacity:1}
}
@keyframes glowFloatAV116{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(90px,35px) scale(1.13)}
}
@keyframes glowFloatBV116{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-90px,50px) scale(1.12)}
}
@keyframes glowFloatCV116{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(25px,-65px) scale(1.18)}
}
@keyframes streakMoveAV116{
  0%,66%{left:-48%;opacity:0}
  70%{opacity:.75}
  88%{left:112%;opacity:.28}
  89%,100%{left:112%;opacity:0}
}
@keyframes streakMoveBV116{
  0%,72%{right:-52%;opacity:0}
  76%{opacity:.68}
  92%{right:110%;opacity:.2}
  93%,100%{right:110%;opacity:0}
}
@keyframes grainShiftV116{
  0%{transform:translate(0,0)}
  25%{transform:translate(-1%,1%)}
  50%{transform:translate(1%,-1%)}
  75%{transform:translate(.5%,1.2%)}
  100%{transform:translate(-.8%,-.6%)}
}

@media(max-width:700px){
  .auth-glow-v116{
    width:300px !important;
    height:300px !important;
    filter:blur(60px) !important;
  }
  .auth-mouse-glow-v116{display:none !important}
  .auth-card-v87{
    transform:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .auth-parallax-bg-v116,
  .auth-glow-v116,
  .auth-light-streak-v116,
  .auth-grain-v116{
    animation:none !important;
  }
}


/* =========================================================
   MyHome V11.7 — New user-provided login logo
   ========================================================= */
.auth-logo-motion-v115{
  width:min(330px,82vw) !important;
  height:min(330px,36vh) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 auto 8px !important;
  overflow:visible !important;
  border-radius:24px !important;
}
.auth-logo-motion-v115 .auth-card-logo-v87{
  width:100% !important;
  height:100% !important;
  max-width:330px !important;
  max-height:330px !important;
  object-fit:contain !important;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.55)) drop-shadow(0 0 18px rgba(255,32,55,.20)) !important;
}
.auth-logo-motion-v115::after{
  content:"" !important;
  position:absolute !important;
  left:10% !important;
  right:10% !important;
  bottom:4% !important;
  height:14px !important;
  border-radius:50% !important;
  background:rgba(255,28,51,.34) !important;
  filter:blur(14px) !important;
  z-index:0 !important;
  animation:logoFloorGlowV117 2.8s ease-in-out infinite !important;
}
.auth-logo-shine-v115{
  border-radius:28px !important;
}
.auth-card-v87 h1{
  margin-top:2px !important;
}
@keyframes logoFloorGlowV117{
  0%,100%{opacity:.35;transform:scaleX(.86)}
  50%{opacity:.8;transform:scaleX(1.05)}
}
@media(max-height:780px){
  .auth-logo-motion-v115{
    width:min(245px,68vw) !important;
    height:210px !important;
  }
}
@media(max-width:600px){
  .auth-logo-motion-v115{
    width:min(270px,72vw) !important;
    height:230px !important;
  }
}


/* =========================================================
   MyHome V11.8 — Login proportion + EST motion polish
   ========================================================= */

/* Smaller logo: the V11.7 version was too dominant. */
.auth-logo-motion-v115{
  width:min(245px,68vw) !important;
  height:min(245px,29vh) !important;
  margin:0 auto 4px !important;
}
.auth-logo-motion-v115 .auth-card-logo-v87{
  max-width:245px !important;
  max-height:245px !important;
}
.auth-card-v87 h1{
  margin-top:0 !important;
}

/* Bottom EST block */
.auth-est-v118{
  min-width:220px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:4px !important;
  user-select:none !important;
}

.est-line-v118{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:5px !important;
  min-height:18px !important;
  position:relative !important;
  white-space:nowrap !important;
}

.est-dot-v118{
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:#ff2b49 !important;
  box-shadow:
    0 0 5px rgba(255,43,73,.9),
    0 0 12px rgba(255,43,73,.55) !important;
  animation:estDotPulseV118 1.15s ease-in-out infinite alternate !important;
}

.est-label-v118{
  font-size:10px !important;
  font-weight:800 !important;
  letter-spacing:1.4px !important;
  color:#d7d9df !important;
  opacity:.78 !important;
}

.est-year-v118{
  position:relative !important;
  display:inline-block !important;
  overflow:hidden !important;
  font-size:11px !important;
  font-weight:900 !important;
  letter-spacing:1.7px !important;
  color:#fff !important;
  text-shadow:
    0 0 8px rgba(255,48,79,.45),
    0 0 16px rgba(255,32,67,.18) !important;
  animation:estYearPulseV118 2.4s ease-in-out infinite !important;
}
.est-year-v118::after{
  content:"" !important;
  position:absolute !important;
  inset:-25% auto -25% -45% !important;
  width:36% !important;
  transform:skewX(-18deg) !important;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent) !important;
  mix-blend-mode:screen !important;
  animation:estYearShineV118 3.4s ease-in-out infinite !important;
}

.est-side-line-v118{
  width:34px !important;
  height:1px !important;
  background:linear-gradient(90deg,#ff2c4b,transparent) !important;
  transform-origin:left center !important;
  animation:estLineGrowV118 2.7s ease-in-out infinite !important;
  box-shadow:0 0 7px rgba(255,44,75,.35) !important;
}

.chat-together-v118{
  position:relative !important;
  display:inline-block !important;
  overflow:hidden !important;
  font-size:9px !important;
  line-height:1.35 !important;
  font-weight:800 !important;
  letter-spacing:2.6px !important;
  color:#a9adb8 !important;
  text-transform:uppercase !important;
  white-space:nowrap !important;
  transform-origin:center !important;
  animation:
    chatSpreadV118 3.8s ease-in-out infinite,
    chatMicroGlitchV118 8s steps(1,end) infinite !important;
}
.chat-together-v118::after{
  content:attr(data-text) !important;
  position:absolute !important;
  inset:0 !important;
  color:#fff !important;
  clip-path:inset(0 100% 0 0) !important;
  text-shadow:0 0 8px rgba(255,40,72,.8) !important;
  animation:chatSweepV118 4.2s ease-in-out infinite !important;
  pointer-events:none !important;
}

.auth-est-v118:hover .chat-together-v118{
  color:#f1f2f5 !important;
  text-shadow:
    0 0 7px rgba(255,255,255,.22),
    0 0 13px rgba(255,40,72,.42) !important;
  animation-duration:2.2s,5s !important;
}
.auth-est-v118:hover .est-year-v118{
  color:#ff4965 !important;
  text-shadow:0 0 10px rgba(255,40,72,.85) !important;
}

@keyframes estDotPulseV118{
  from{opacity:.3;transform:scale(.72)}
  to{opacity:1;transform:scale(1.25)}
}
@keyframes estYearPulseV118{
  0%,100%{transform:translateY(0) scale(1);filter:brightness(1)}
  50%{transform:translateY(-1px) scale(1.035);filter:brightness(1.22)}
}
@keyframes estYearShineV118{
  0%,34%{left:-45%;opacity:0}
  44%{opacity:.85}
  68%{left:125%;opacity:.18}
  69%,100%{left:125%;opacity:0}
}
@keyframes estLineGrowV118{
  0%,100%{transform:scaleX(.48);opacity:.28}
  50%{transform:scaleX(1);opacity:.9}
}
@keyframes chatSpreadV118{
  0%,100%{letter-spacing:2.3px;transform:scaleX(.98);opacity:.63}
  50%{letter-spacing:4px;transform:scaleX(1.02);opacity:1}
}
@keyframes chatSweepV118{
  0%,28%{clip-path:inset(0 100% 0 0);opacity:0}
  38%{opacity:1}
  66%{clip-path:inset(0 0 0 0);opacity:.85}
  67%,100%{clip-path:inset(0 0 0 100%);opacity:0}
}
@keyframes chatMicroGlitchV118{
  0%,91%,93%,95%,100%{transform:translate(0,0) skewX(0)}
  92%{transform:translate(1px,-.4px) skewX(-3deg)}
  94%{transform:translate(-1px,.4px) skewX(2deg)}
}

/* keep the footer readable on short screens */
@media(max-height:760px){
  .auth-logo-motion-v115{
    width:min(205px,58vw) !important;
    height:185px !important;
  }
  .auth-logo-motion-v115 .auth-card-logo-v87{
    max-width:205px !important;
    max-height:185px !important;
  }
  .auth-est-v118{gap:2px !important}
}
@media(max-width:600px){
  .auth-logo-motion-v115{
    width:min(220px,60vw) !important;
    height:205px !important;
  }
  .auth-logo-motion-v115 .auth-card-logo-v87{
    max-width:220px !important;
    max-height:205px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .est-dot-v118,
  .est-year-v118,
  .est-year-v118::after,
  .est-side-line-v118,
  .chat-together-v118,
  .chat-together-v118::after{
    animation:none !important;
  }
}


/* MyHome V11.9 — transparent login emblem */
.auth-logo-motion-v115{
  width:min(225px,62vw) !important;
  height:min(225px,27vh) !important;
  background:transparent !important;
  overflow:visible !important;
}
.auth-logo-motion-v115 .auth-card-logo-v87{
  width:100% !important;
  height:100% !important;
  max-width:225px !important;
  max-height:225px !important;
  object-fit:contain !important;
  background:transparent !important;
  border-radius:0 !important;
  filter:
    drop-shadow(0 12px 18px rgba(0,0,0,.58))
    drop-shadow(0 0 11px rgba(255,29,55,.26)) !important;
}
@media(max-height:760px){
  .auth-logo-motion-v115{
    width:min(190px,55vw) !important;
    height:175px !important;
  }
  .auth-logo-motion-v115 .auth-card-logo-v87{
    max-width:190px !important;
    max-height:175px !important;
  }
}


/* =========================================================
   MyHome V12 — SPACE LOGIN
   Remove photographic background and replace it with a live
   black/red deep-space scene.
   ========================================================= */

/* Kill the old photo completely. */
#authScreen.auth-v87{
  background-image:none !important;
  background:#020207 !important;
}
#authScreen .auth-bg-overlay-v87{
  background:
    radial-gradient(circle at 50% 44%,rgba(19,7,31,.10),rgba(0,0,5,.42) 62%,rgba(0,0,3,.76) 100%) !important;
  opacity:1 !important;
  z-index:1 !important;
}

/* Hide the old decorative copy that belonged to the photo composition. */
#authScreen .auth-side-copy-v87{
  display:none !important;
}

.auth-space-v120{
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(ellipse at 50% 115%,rgba(100,10,38,.22),transparent 44%),
    radial-gradient(ellipse at 50% -20%,rgba(57,25,105,.18),transparent 45%),
    linear-gradient(180deg,#03020a 0%,#05030d 48%,#020207 100%) !important;
}

#authSpaceCanvasV120{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:.96 !important;
}

.space-nebula-v120{
  position:absolute !important;
  border-radius:50% !important;
  filter:blur(85px) !important;
  mix-blend-mode:screen !important;
  opacity:.20 !important;
  will-change:transform !important;
}
.nebula-red-v120{
  width:58vw !important;
  height:38vw !important;
  min-width:520px !important;
  min-height:340px !important;
  left:-18vw !important;
  top:28% !important;
  background:
    radial-gradient(ellipse,rgba(210,15,50,.68),rgba(103,0,28,.28) 40%,transparent 72%) !important;
  animation:spaceNebulaRedV120 18s ease-in-out infinite alternate !important;
}
.nebula-purple-v120{
  width:54vw !important;
  height:42vw !important;
  min-width:500px !important;
  min-height:390px !important;
  right:-17vw !important;
  top:-12% !important;
  background:
    radial-gradient(ellipse,rgba(88,35,170,.58),rgba(50,15,100,.22) 42%,transparent 73%) !important;
  animation:spaceNebulaPurpleV120 23s ease-in-out infinite alternate !important;
}
.nebula-gold-v120{
  width:35vw !important;
  height:25vw !important;
  min-width:330px !important;
  min-height:230px !important;
  left:36% !important;
  bottom:-15% !important;
  background:
    radial-gradient(ellipse,rgba(205,79,27,.34),rgba(121,20,36,.12) 46%,transparent 72%) !important;
  animation:spaceNebulaGoldV120 16s ease-in-out infinite alternate !important;
}

.space-horizon-v120{
  position:absolute !important;
  left:7% !important;
  right:7% !important;
  bottom:8% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(255,35,68,.12),rgba(255,85,100,.52),rgba(255,35,68,.12),transparent) !important;
  box-shadow:0 0 18px rgba(255,25,55,.25) !important;
  animation:spaceHorizonV120 4s ease-in-out infinite !important;
}

.space-mouse-glow-v120{
  position:absolute !important;
  width:390px !important;
  height:390px !important;
  border-radius:50% !important;
  opacity:0 !important;
  transform:translate(-50%,-50%) !important;
  background:radial-gradient(circle,rgba(112,55,255,.10),rgba(255,32,67,.055) 38%,transparent 70%) !important;
  filter:blur(10px) !important;
  mix-blend-mode:screen !important;
  transition:opacity .25s ease !important;
}

.space-vignette-v120{
  position:absolute !important;
  inset:0 !important;
  background:
    radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.20) 67%,rgba(0,0,0,.66) 100%) !important;
}

.space-grain-v120{
  position:absolute !important;
  inset:-30% !important;
  opacity:.035 !important;
  background-image:repeating-radial-gradient(circle at 0 0,rgba(255,255,255,.32) 0 1px,transparent 1px 4px) !important;
  background-size:5px 5px !important;
  animation:spaceGrainV120 .55s steps(2,end) infinite !important;
}

/* Glass login card for the new space background. */
#authScreen .auth-card-v87{
  background:
    linear-gradient(145deg,rgba(15,11,22,.88),rgba(8,8,14,.82)) !important;
  border:1px solid rgba(255,36,68,.58) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.62),
    0 0 32px rgba(255,24,58,.08),
    inset 0 1px 0 rgba(255,255,255,.045) !important;
  backdrop-filter:blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter:blur(18px) saturate(1.15) !important;
}

/* Keep all login content above the universe. */
#authScreen .auth-card-v87,
#authScreen .auth-est-v87{
  position:relative !important;
  z-index:3 !important;
}

/* Footer gets a small space beacon effect. */
#authScreen .auth-est-v118{
  text-shadow:0 0 10px rgba(255,40,72,.16) !important;
}

@keyframes spaceNebulaRedV120{
  0%{transform:translate3d(-3%,2%,0) scale(.94) rotate(-5deg);opacity:.14}
  100%{transform:translate3d(12%,-5%,0) scale(1.13) rotate(5deg);opacity:.28}
}
@keyframes spaceNebulaPurpleV120{
  0%{transform:translate3d(4%,-3%,0) scale(1);opacity:.13}
  100%{transform:translate3d(-11%,10%,0) scale(1.16);opacity:.25}
}
@keyframes spaceNebulaGoldV120{
  0%{transform:translate3d(-5%,5%,0) scale(.9);opacity:.08}
  100%{transform:translate3d(10%,-10%,0) scale(1.15);opacity:.18}
}
@keyframes spaceHorizonV120{
  0%,100%{opacity:.25;transform:scaleX(.82)}
  50%{opacity:.75;transform:scaleX(1)}
}
@keyframes spaceGrainV120{
  0%{transform:translate(0,0)}
  25%{transform:translate(-.8%,.7%)}
  50%{transform:translate(.7%,-.8%)}
  75%{transform:translate(.5%,.9%)}
  100%{transform:translate(-.6%,-.4%)}
}

@media(max-width:700px){
  .space-mouse-glow-v120{display:none !important}
  .space-nebula-v120{filter:blur(65px) !important}
}
@media(prefers-reduced-motion:reduce){
  .space-nebula-v120,.space-horizon-v120,.space-grain-v120{
    animation:none !important;
  }
}


/* =========================================================
   MyHome V12.1 — Solar System Space Scene
   ========================================================= */
.solar-system-v121{
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
  z-index:0 !important;
}

/* SUN — large but kept away from login card */
.sun-v121{
  position:absolute !important;
  width:clamp(170px,20vw,330px) !important;
  aspect-ratio:1 !important;
  left:-5vw !important;
  top:-7vw !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 36% 34%,#fff7c8 0 2%,#ffd44d 7%,#ff8a18 22%,#ff3b12 48%,#a90016 70%,#43000a 100%) !important;
  box-shadow:
    0 0 22px rgba(255,197,55,.95),
    0 0 58px rgba(255,75,25,.68),
    0 0 125px rgba(255,20,45,.40),
    0 0 220px rgba(255,25,45,.20) !important;
  animation:sunFloatV121 12s ease-in-out infinite alternate,sunPulseV121 3.2s ease-in-out infinite !important;
}
.sun-v121::before{
  content:"" !important;
  position:absolute !important;
  inset:-14% !important;
  border-radius:50% !important;
  background:
    repeating-conic-gradient(from 10deg,rgba(255,184,35,.0) 0 7deg,rgba(255,75,20,.22) 8deg 10deg,transparent 11deg 19deg) !important;
  filter:blur(8px) !important;
  animation:sunCoronaSpinV121 22s linear infinite !important;
}
.sun-v121::after{
  content:"" !important;
  position:absolute !important;
  inset:5% !important;
  border-radius:50% !important;
  background:
    radial-gradient(circle at 68% 32%,rgba(255,255,255,.42) 0 1%,transparent 2%),
    radial-gradient(circle at 30% 70%,rgba(120,0,10,.26) 0 4%,transparent 7%),
    radial-gradient(circle at 63% 66%,rgba(135,0,8,.22) 0 3%,transparent 6%),
    repeating-radial-gradient(circle at 30% 30%,rgba(255,215,80,.13) 0 3px,rgba(255,75,20,.05) 4px 8px) !important;
  mix-blend-mode:overlay !important;
  animation:sunSurfaceV121 8s linear infinite !important;
}
.sun-core-v121{
  position:absolute !important;
  inset:-8% !important;
  border-radius:50% !important;
  border:2px solid rgba(255,167,46,.22) !important;
  filter:blur(3px) !important;
}
.sun-flare-v121{
  position:absolute !important;
  border:4px solid rgba(255,80,25,.52) !important;
  border-left-color:transparent !important;
  border-bottom-color:transparent !important;
  border-radius:50% !important;
  filter:drop-shadow(0 0 8px rgba(255,55,20,.8)) !important;
}
.flare-one-v121{
  width:42% !important;height:30% !important;right:-21% !important;top:28% !important;
  transform:rotate(22deg) !important;
  animation:solarFlareV121 4.2s ease-in-out infinite !important;
}
.flare-two-v121{
  width:29% !important;height:22% !important;left:7% !important;bottom:-13% !important;
  transform:rotate(155deg) !important;
  animation:solarFlareV121 5.4s ease-in-out infinite reverse !important;
}

/* PLANETS */
.planet-v121{
  position:absolute !important;
  border-radius:50% !important;
  box-shadow:inset -14px -8px 24px rgba(0,0,0,.72),0 0 18px rgba(110,70,255,.12) !important;
  opacity:.86 !important;
  will-change:transform !important;
}
.planet-jupiter-v121{
  width:clamp(70px,8vw,125px) !important;
  aspect-ratio:1 !important;
  right:5.5vw !important;
  top:8.5vh !important;
  background:
    repeating-linear-gradient(172deg,#d7a575 0 8%,#8d563e 9% 14%,#e2bc8e 15% 24%,#724332 25% 29%,#c68c64 30% 40%) !important;
  animation:planetFloatJV121 16s ease-in-out infinite alternate !important;
}
.planet-jupiter-v121::after{
  content:"" !important;
  position:absolute !important;
  width:27% !important;height:13% !important;
  right:17% !important;top:58% !important;
  border-radius:50% !important;
  background:rgba(137,39,29,.74) !important;
  filter:blur(1px) !important;
}

.planet-saturn-v121{
  width:clamp(56px,6.5vw,100px) !important;
  aspect-ratio:1 !important;
  right:10vw !important;
  bottom:12vh !important;
  background:linear-gradient(160deg,#f2d19a,#ad7d48 45%,#6d452d 74%,#291a1b) !important;
  animation:planetFloatSV121 19s ease-in-out infinite alternate !important;
}
.saturn-ring-v121{
  position:absolute !important;
  width:175% !important;height:43% !important;
  left:-38% !important;top:29% !important;
  border:4px solid rgba(225,193,142,.72) !important;
  border-left-color:rgba(125,87,58,.34) !important;
  border-radius:50% !important;
  transform:rotate(-15deg) !important;
  box-shadow:0 0 8px rgba(230,184,125,.18) !important;
}

.planet-blue-v121{
  width:clamp(34px,3.5vw,58px) !important;
  aspect-ratio:1 !important;
  left:9vw !important;
  bottom:17vh !important;
  background:radial-gradient(circle at 34% 30%,#86ddff,#246dc2 38%,#173877 68%,#080f31) !important;
  box-shadow:inset -10px -8px 16px rgba(0,0,0,.7),0 0 18px rgba(55,130,255,.25) !important;
  animation:planetFloatBV121 14s ease-in-out infinite alternate !important;
}

.planet-red-v121{
  width:clamp(22px,2.5vw,42px) !important;
  aspect-ratio:1 !important;
  right:23vw !important;
  top:22vh !important;
  background:radial-gradient(circle at 35% 30%,#f28c65,#a7392c 42%,#5c181b 70%,#1e0b13) !important;
  animation:planetFloatRV121 11s ease-in-out infinite alternate !important;
}

/* Make planets feel behind the login card. */
#authScreen .auth-card-v87{z-index:4 !important}
#authScreen .auth-est-v87{z-index:4 !important}

@keyframes sunFloatV121{
  from{transform:translate3d(-8px,-5px,0) scale(.98)}
  to{transform:translate3d(16px,12px,0) scale(1.04)}
}
@keyframes sunPulseV121{
  0%,100%{filter:brightness(.92) saturate(1.05)}
  50%{filter:brightness(1.12) saturate(1.18)}
}
@keyframes sunCoronaSpinV121{to{transform:rotate(360deg)}}
@keyframes sunSurfaceV121{to{transform:rotate(-360deg)}}
@keyframes solarFlareV121{
  0%,100%{opacity:.18;transform:scale(.75) rotate(22deg)}
  50%{opacity:.8;transform:scale(1.18) rotate(22deg)}
}
@keyframes planetFloatJV121{
  from{transform:translate(0,0) rotate(-3deg)}
  to{transform:translate(-18px,20px) rotate(4deg)}
}
@keyframes planetFloatSV121{
  from{transform:translate(0,0) rotate(0)}
  to{transform:translate(-15px,-18px) rotate(3deg)}
}
@keyframes planetFloatBV121{
  from{transform:translate(0,0)}
  to{transform:translate(13px,-20px)}
}
@keyframes planetFloatRV121{
  from{transform:translate(0,0)}
  to{transform:translate(-12px,14px)}
}

@media(max-width:700px){
  .sun-v121{
    width:155px !important;
    left:-65px !important;
    top:-38px !important;
  }
  .planet-jupiter-v121{width:62px !important;right:3vw !important;top:12vh !important}
  .planet-saturn-v121{width:50px !important;right:5vw !important;bottom:10vh !important}
  .planet-blue-v121{width:30px !important;left:4vw !important}
  .planet-red-v121{display:none !important}
}
@media(prefers-reduced-motion:reduce){
  .sun-v121,.sun-v121::before,.sun-v121::after,.sun-flare-v121,.planet-v121{
    animation:none !important;
  }
}


/* =========================================================
   MyHome V12.2 — Galaxy Action Upgrade
   More planets, fireballs, spacecraft, orbital station
   ========================================================= */

.auth-space-v120{
  background:
    radial-gradient(circle at 14% 18%,rgba(255,25,65,.11),transparent 26%),
    radial-gradient(circle at 84% 15%,rgba(88,45,190,.13),transparent 30%),
    radial-gradient(circle at 76% 77%,rgba(20,70,170,.09),transparent 25%),
    radial-gradient(ellipse at 50% 115%,rgba(100,10,38,.25),transparent 44%),
    radial-gradient(ellipse at 50% -20%,rgba(57,25,105,.20),transparent 45%),
    linear-gradient(180deg,#020108 0%,#05020d 42%,#03020b 100%) !important;
}

/* extra moon bodies */
.moon-v122{
  position:absolute !important;
  border-radius:50% !important;
  box-shadow:
    inset -10px -12px 18px rgba(0,0,0,.65),
    0 0 14px rgba(255,255,255,.08) !important;
  opacity:.62 !important;
}
.moon-one-v122{
  width:42px !important;
  height:42px !important;
  left:20vw !important;
  top:16vh !important;
  background:
    radial-gradient(circle at 36% 32%,#e0dedb,#9b9693 46%,#514b4d 72%,#1e1b24) !important;
  animation:moonFloat1V122 18s ease-in-out infinite alternate !important;
}
.moon-two-v122{
  width:24px !important;
  height:24px !important;
  right:28vw !important;
  bottom:18vh !important;
  background:
    radial-gradient(circle at 35% 30%,#d8d0c7,#756e6d 52%,#26212a) !important;
  animation:moonFloat2V122 13s ease-in-out infinite alternate !important;
}

/* spacecraft */
.spacecraft-v122{
  position:absolute !important;
  width:92px !important;
  height:42px !important;
  z-index:1 !important;
  transform-origin:center !important;
  filter:
    drop-shadow(0 0 8px rgba(255,56,95,.32))
    drop-shadow(0 6px 8px rgba(0,0,0,.5)) !important;
  opacity:.92 !important;
}
.ship-one-v122{
  left:-140px !important;
  top:22vh !important;
  animation:shipFlyOneV122 15s linear infinite !important;
}
.ship-two-v122{
  right:-120px !important;
  top:67vh !important;
  transform:scale(.65) rotate(180deg) !important;
  animation:shipFlyTwoV122 21s linear infinite 4s !important;
}
.spacecraft-v122.mini-v122{
  width:70px !important;
  height:32px !important;
  opacity:.68 !important;
}

.ship-body-v122{
  position:absolute !important;
  left:22px !important;
  top:8px !important;
  width:50px !important;
  height:23px !important;
  border-radius:60% 28% 28% 60% !important;
  background:
    linear-gradient(180deg,#d4d9e7 0%,#73798a 48%,#2e3340 100%) !important;
  border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.22),
    inset 0 -4px 5px rgba(0,0,0,.35) !important;
}
.ship-body-v122::before{
  content:"" !important;
  position:absolute !important;
  width:17px !important;
  height:17px !important;
  border-radius:50% !important;
  left:4px !important;
  top:3px !important;
  background:radial-gradient(circle at 35% 32%,#9ff1ff,#3ea8ff 35%,#102044 70%) !important;
  box-shadow:0 0 9px rgba(77,198,255,.55) !important;
}
.ship-body-v122::after{
  content:"" !important;
  position:absolute !important;
  right:-13px !important;
  top:5px !important;
  width:18px !important;
  height:12px !important;
  clip-path:polygon(0 20%,100% 50%,0 80%) !important;
  background:linear-gradient(90deg,#777f90,#e8ecf5) !important;
}
.ship-wing-v122{
  position:absolute !important;
  width:31px !important;
  height:12px !important;
  left:35px !important;
  background:linear-gradient(90deg,#242a39,#a8afbd) !important;
  border:1px solid rgba(255,255,255,.15) !important;
}
.ship-wing-left-v122{
  top:3px !important;
  transform:skewX(-22deg) rotate(-11deg) !important;
}
.ship-wing-right-v122{
  bottom:2px !important;
  transform:skewX(22deg) rotate(11deg) !important;
}
.ship-window-v122{
  position:absolute !important;
  width:7px !important;
  height:7px !important;
  border-radius:50% !important;
  left:48px !important;
  top:15px !important;
  background:#ff3e68 !important;
  box-shadow:0 0 8px rgba(255,48,92,.9) !important;
}
.ship-engine-v122{
  position:absolute !important;
  width:36px !important;
  height:10px !important;
  left:-7px !important;
  top:15px !important;
  border-radius:50% !important;
  background:
    linear-gradient(90deg,transparent,rgba(83,177,255,.18),#7de7ff 52%,#fff 75%,rgba(255,76,115,.9) 100%) !important;
  filter:blur(2px) !important;
  animation:enginePulseV122 .26s ease-in-out infinite alternate !important;
}

/* orbital station */
.orbital-station-v122{
  position:absolute !important;
  width:120px !important;
  height:120px !important;
  right:16vw !important;
  top:34vh !important;
  opacity:.34 !important;
  transform:scale(.72) !important;
  animation:stationFloatV122 22s ease-in-out infinite alternate !important;
}
.station-core-v122{
  position:absolute !important;
  left:45px !important;
  top:45px !important;
  width:30px !important;
  height:30px !important;
  border-radius:50% !important;
  background:radial-gradient(circle at 35% 30%,#d8e2f7,#48506c 58%,#161927) !important;
  box-shadow:0 0 14px rgba(88,149,255,.24) !important;
}
.station-ring-v122{
  position:absolute !important;
  inset:16px !important;
  border-radius:50% !important;
  border:2px solid rgba(170,188,225,.5) !important;
}
.ring-a-v122{
  transform:rotateX(66deg) rotateZ(18deg) !important;
  animation:stationSpinAV122 8s linear infinite !important;
}
.ring-b-v122{
  transform:rotateY(68deg) rotateZ(-12deg) !important;
  animation:stationSpinBV122 10s linear infinite reverse !important;
}

/* ambient light streaks */
.auth-space-v120::before{
  content:"" !important;
  position:absolute !important;
  left:-20% !important;
  top:58% !important;
  width:140% !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,rgba(255,30,68,.08),rgba(255,60,95,.34),rgba(127,84,255,.17),transparent) !important;
  box-shadow:0 0 14px rgba(255,40,80,.18) !important;
  transform:rotate(-8deg) !important;
  animation:spaceBeamV122 7s ease-in-out infinite !important;
}

@keyframes moonFloat1V122{
  from{transform:translate(0,0)}
  to{transform:translate(16px,-18px)}
}
@keyframes moonFloat2V122{
  from{transform:translate(0,0)}
  to{transform:translate(-12px,11px)}
}
@keyframes shipFlyOneV122{
  0%{transform:translate3d(-120px,0,0) rotate(-4deg) scale(.9);opacity:0}
  8%{opacity:.9}
  45%{transform:translate3d(48vw,28px,0) rotate(2deg) scale(1);opacity:.95}
  80%{opacity:.9}
  100%{transform:translate3d(calc(100vw + 260px),-18px,0) rotate(-2deg) scale(.92);opacity:0}
}
@keyframes shipFlyTwoV122{
  0%{transform:translate3d(130px,0,0) scale(.62) rotate(180deg);opacity:0}
  12%{opacity:.7}
  55%{transform:translate3d(-55vw,-26px,0) scale(.66) rotate(176deg);opacity:.72}
  100%{transform:translate3d(calc(-100vw - 220px),18px,0) scale(.61) rotate(182deg);opacity:0}
}
@keyframes enginePulseV122{
  from{opacity:.55;transform:scaleX(.82)}
  to{opacity:1;transform:scaleX(1.15)}
}
@keyframes stationFloatV122{
  from{transform:translate(0,0) scale(.69) rotate(-2deg)}
  to{transform:translate(-22px,18px) scale(.76) rotate(3deg)}
}
@keyframes stationSpinAV122{to{transform:rotateX(66deg) rotateZ(378deg)}}
@keyframes stationSpinBV122{to{transform:rotateY(68deg) rotateZ(348deg)}}
@keyframes spaceBeamV122{
  0%,100%{opacity:.12;transform:translateX(-2%) rotate(-8deg)}
  50%{opacity:.6;transform:translateX(3%) rotate(-8deg)}
}

@media(max-width:700px){
  .ship-one-v122{top:16vh !important;animation-duration:18s !important}
  .ship-two-v122{display:none !important}
  .orbital-station-v122{right:0 !important;top:31vh !important;transform:scale(.48) !important}
  .moon-one-v122{left:13vw !important;top:22vh !important}
  .moon-two-v122{display:none !important}
}
@media(prefers-reduced-motion:reduce){
  .spacecraft-v122,.orbital-station-v122,.station-ring-v122,.ship-engine-v122,.moon-v122{
    animation:none !important;
  }
}


/* =========================================================
   MyHome V12.3 — COSMIC UNIVERSE
   Black hole / galaxy / Earth / supernova / warp / mothership
   satellite / UFO / astronaut / space lightning
   ========================================================= */
.black-hole-v123{
  position:absolute!important;right:2vw!important;top:25vh!important;width:150px!important;height:150px!important;
  border-radius:50%!important;opacity:.48!important;animation:bhFloatV123 20s ease-in-out infinite alternate!important;
}
.bh-core-v123{
  position:absolute!important;inset:31%!important;border-radius:50%!important;background:#000!important;
  box-shadow:0 0 18px #000,0 0 30px rgba(126,67,255,.55)!important;z-index:2!important;
}
.bh-disk-v123{
  position:absolute!important;inset:18%!important;border-radius:50%!important;
  border:9px solid rgba(148,88,255,.52)!important;border-left-color:rgba(255,66,94,.65)!important;
  border-right-color:rgba(80,150,255,.45)!important;filter:blur(2px) drop-shadow(0 0 10px rgba(135,75,255,.55))!important;
  transform:rotateX(68deg) rotateZ(-14deg)!important;animation:bhSpinV123 5s linear infinite!important;
}
.galaxy-v123{
  position:absolute!important;width:280px!important;height:115px!important;left:7vw!important;bottom:5vh!important;
  border-radius:50%!important;opacity:.22!important;filter:blur(1px)!important;
  background:
    radial-gradient(ellipse at center,#fff 0 2%,#b28cff 5%,rgba(94,50,190,.65) 14%,rgba(60,25,130,.22) 35%,transparent 68%),
    repeating-conic-gradient(from 0deg,rgba(150,100,255,.24) 0 8deg,transparent 9deg 22deg)!important;
  box-shadow:0 0 50px rgba(95,52,210,.24)!important;transform:rotate(-13deg)!important;
  animation:galaxySpinV123 35s linear infinite!important;
}
.earth-v123{
  position:absolute!important;width:86px!important;height:86px!important;left:7vw!important;top:57vh!important;border-radius:50%!important;
  background:
    radial-gradient(circle at 29% 27%,rgba(255,255,255,.34),transparent 8%),
    radial-gradient(ellipse at 38% 38%,#59a85a 0 12%,transparent 13%),
    radial-gradient(ellipse at 62% 59%,#4e9c52 0 15%,transparent 16%),
    radial-gradient(circle at 35% 32%,#38a9e8,#1768b5 48%,#0b2b69 72%,#020714)!important;
  box-shadow:inset -22px -12px 27px rgba(0,0,0,.82),0 0 0 2px rgba(82,186,255,.14),0 0 24px rgba(54,151,255,.28)!important;
  animation:earthFloatV123 17s ease-in-out infinite alternate!important;
}
.earth-cloud-v123{
  position:absolute!important;inset:9%!important;border-radius:50%!important;
  background:repeating-linear-gradient(18deg,transparent 0 13px,rgba(255,255,255,.14) 14px 16px,transparent 17px 25px)!important;
  animation:earthCloudV123 14s linear infinite!important;
}
.satellite-v123{
  position:absolute!important;width:100px!important;height:42px!important;left:-130px!important;top:38vh!important;
  opacity:.7!important;animation:satelliteFlyV123 24s linear infinite 6s!important;
}
.sat-body-v123{position:absolute!important;left:39px!important;top:10px!important;width:22px!important;height:22px!important;border-radius:4px!important;background:linear-gradient(#d5dbea,#52596d)!important;box-shadow:0 0 8px rgba(100,170,255,.35)!important}
.sat-panel-v123{position:absolute!important;top:8px!important;width:34px!important;height:26px!important;border:1px solid rgba(120,180,255,.55)!important;background:repeating-linear-gradient(90deg,#102653 0 7px,#1d4c88 8px 10px)!important}
.sat-panel-v123.left-v123{left:0!important}.sat-panel-v123.right-v123{right:0!important}
.mothership-v123{
  position:absolute!important;width:250px!important;height:70px!important;left:-310px!important;top:10vh!important;opacity:.32!important;
  border-radius:50%!important;background:linear-gradient(180deg,#8d94a7,#242937 48%,#080b12 70%)!important;
  clip-path:polygon(8% 55%,25% 25%,75% 25%,95% 55%,74% 76%,25% 76%)!important;
  filter:drop-shadow(0 0 18px rgba(80,135,255,.25))!important;animation:mothershipFlyV123 38s linear infinite 12s!important;
}
.mother-core-v123{position:absolute!important;width:68px!important;height:18px!important;left:91px!important;top:14px!important;border-radius:50% 50% 20% 20%!important;background:rgba(90,190,255,.45)!important;box-shadow:0 0 14px rgba(80,190,255,.55)!important}
.mother-light-v123{position:absolute!important;left:35px!important;right:35px!important;bottom:13px!important;height:3px!important;background:linear-gradient(90deg,transparent,#ff3154,#5ac8ff,#ff3154,transparent)!important;box-shadow:0 0 10px rgba(255,50,90,.6)!important;animation:motherLightV123 1.3s ease-in-out infinite!important}
.ufo-v123{position:absolute!important;width:55px!important;height:20px!important;right:-80px!important;top:46vh!important;opacity:0!important;animation:ufoFlyV123 29s linear infinite 17s!important}
.ufo-v123:before{content:""!important;position:absolute!important;left:16px!important;top:0!important;width:23px!important;height:11px!important;border-radius:50% 50% 25% 25%!important;background:rgba(92,213,255,.62)!important;box-shadow:0 0 8px rgba(75,220,255,.55)!important}
.ufo-v123 span{position:absolute!important;left:4px!important;top:8px!important;width:47px!important;height:9px!important;border-radius:50%!important;background:#747b89!important;box-shadow:0 5px 12px rgba(255,42,80,.45)!important}
.astronaut-v123{position:absolute!important;width:28px!important;height:45px!important;right:24vw!important;bottom:9vh!important;opacity:0!important;animation:astroDriftV123 36s ease-in-out infinite 21s!important}
.astro-head-v123{position:absolute!important;left:6px!important;top:0!important;width:17px!important;height:17px!important;border-radius:50%!important;background:radial-gradient(circle at 40% 35%,#80d9ff,#28364c 55%,#e3e7ef 58% 72%,#777e8b 73%)!important}
.astro-body-v123{position:absolute!important;left:5px!important;top:16px!important;width:19px!important;height:24px!important;border-radius:7px!important;background:linear-gradient(135deg,#f0f1f3,#707785)!important}
.space-lightning-v123{
  position:absolute!important;right:4vw!important;top:5vh!important;width:34vw!important;height:38vh!important;opacity:0!important;
  background:linear-gradient(112deg,transparent 45%,rgba(166,105,255,.0) 46%,rgba(198,150,255,.85) 48%,rgba(110,70,255,.0) 50%,transparent 52%)!important;
  filter:blur(.5px) drop-shadow(0 0 12px rgba(130,70,255,.8))!important;mix-blend-mode:screen!important;
}
.space-lightning-v123.active{animation:spaceLightningFlashV123 .48s steps(2,end)!important}
.supernova-v123{
  position:absolute!important;width:18px!important;height:18px!important;border-radius:50%!important;left:78%!important;top:18%!important;opacity:0!important;
  background:#fff!important;box-shadow:0 0 20px #fff,0 0 50px #ff9c5b,0 0 100px #ff3157,0 0 180px rgba(130,70,255,.7)!important;
}
.supernova-v123.active{animation:supernovaBurstV123 2.8s ease-out!important}
.warp-flash-v123{
  position:absolute!important;inset:0!important;opacity:0!important;pointer-events:none!important;
  background:radial-gradient(circle at center,rgba(255,255,255,.2),rgba(95,75,255,.08) 22%,transparent 62%)!important;
}
.warp-flash-v123.active{animation:warpFlashV123 1.7s ease-out!important}

@keyframes bhFloatV123{to{transform:translate(-15px,18px) scale(1.06)}}
@keyframes bhSpinV123{to{transform:rotateX(68deg) rotateZ(346deg)}}
@keyframes galaxySpinV123{to{transform:rotate(347deg)}}
@keyframes earthFloatV123{to{transform:translate(16px,-15px) rotate(6deg)}}
@keyframes earthCloudV123{to{transform:rotate(360deg)}}
@keyframes satelliteFlyV123{0%{transform:translate(-120px,0) rotate(-8deg);opacity:0}10%{opacity:.7}100%{transform:translate(calc(100vw + 260px),-95px) rotate(22deg);opacity:0}}
@keyframes mothershipFlyV123{0%{transform:translateX(-320px) scale(.8);opacity:0}12%{opacity:.28}55%{opacity:.38}100%{transform:translateX(calc(100vw + 620px)) scale(1.08);opacity:0}}
@keyframes motherLightV123{50%{filter:brightness(1.8);opacity:.55}}
@keyframes ufoFlyV123{0%{transform:translate(100px,0) rotate(0);opacity:0}10%{opacity:.55}48%{transform:translate(-52vw,-90px) rotate(-8deg);opacity:.65}100%{transform:translate(calc(-100vw - 180px),60px) rotate(5deg);opacity:0}}
@keyframes astroDriftV123{0%,5%{opacity:0;transform:translate(0,0) rotate(0)}15%{opacity:.35}55%{opacity:.48}90%{opacity:.2}100%{opacity:0;transform:translate(-190px,-120px) rotate(95deg)}}
@keyframes spaceLightningFlashV123{0%,100%{opacity:0}20%{opacity:.75}35%{opacity:.08}50%{opacity:.9}70%{opacity:.18}}
@keyframes supernovaBurstV123{0%{opacity:0;transform:scale(.2)}8%{opacity:1;transform:scale(1)}25%{opacity:1;transform:scale(2.4)}60%{opacity:.38;transform:scale(6)}100%{opacity:0;transform:scale(12)}}
@keyframes warpFlashV123{0%{opacity:.75;transform:scale(.65)}40%{opacity:.18;transform:scale(1.08)}100%{opacity:0;transform:scale(1.3)}}

@media(max-width:700px){
  .black-hole-v123{width:95px!important;height:95px!important;right:-18px!important;top:29vh!important}
  .galaxy-v123{width:180px!important;height:75px!important}
  .earth-v123{width:58px!important;height:58px!important;left:2vw!important}
  .mothership-v123{width:160px!important;height:50px!important}
  .satellite-v123{transform:scale(.7)!important}
  .astronaut-v123{display:none!important}
}

/* MyHome V13 Login */
.auth-password-wrap-v130{padding-right:46px!important}
.password-eye-v130{position:absolute!important;right:9px!important;top:50%!important;transform:translateY(-50%)!important;width:34px!important;height:34px!important;border:0!important;border-radius:9px!important;background:rgba(255,255,255,.035)!important;color:#ccc!important;cursor:pointer!important;display:grid!important;place-items:center!important;font-size:16px!important}
.password-eye-v130:hover,.password-eye-v130.is-visible{background:rgba(255,43,79,.12)!important;color:#fff!important}
.auth-help-row-v130{display:flex!important;justify-content:flex-end!important;margin:-3px 1px 7px!important}
.forgot-link-v130{border:0!important;background:none!important;color:#aaa!important;font-size:12px!important;cursor:pointer!important;padding:2px 0!important}
.forgot-link-v130:hover{color:#ff4b6c!important;text-decoration:underline!important}
.system-version-v130{margin-top:7px!important;font-size:10px!important;letter-spacing:1.8px!important;color:rgba(255,255,255,.36)!important;text-align:center!important}
.forgot-modal-v130{position:fixed!important;inset:0!important;z-index:99999!important;display:grid!important;place-items:center!important;padding:20px!important}
.forgot-modal-v130.hidden{display:none!important}
.forgot-backdrop-v130{position:absolute!important;inset:0!important;background:rgba(0,0,0,.76)!important;backdrop-filter:blur(9px)!important}
.forgot-card-v130{position:relative!important;z-index:1!important;width:min(410px,94vw)!important;padding:28px!important;border-radius:22px!important;background:linear-gradient(145deg,rgba(18,14,24,.97),rgba(7,7,12,.96))!important;border:1px solid rgba(255,50,83,.42)!important;box-shadow:0 28px 80px rgba(0,0,0,.72),0 0 35px rgba(255,35,70,.10)!important;color:#fff!important}
.forgot-card-v130 h2{margin:7px 0 6px!important;text-align:center!important;font-size:23px!important}
.forgot-card-v130 p{margin:0 0 20px!important;text-align:center!important;font-size:13px!important;color:#aaa6b0!important;line-height:1.5!important}
.forgot-icon-v130{font-size:34px!important;text-align:center!important}
.forgot-close-v130{position:absolute!important;right:13px!important;top:11px!important;width:32px!important;height:32px!important;border:0!important;border-radius:50%!important;background:rgba(255,255,255,.05)!important;color:#bbb!important;font-size:22px!important;cursor:pointer!important}
.forgot-input-v130{position:relative!important;display:flex!important;align-items:center!important;gap:10px!important;margin:10px 0!important;padding:0 12px!important;min-height:48px!important;border-radius:12px!important;background:rgba(255,255,255,.045)!important;border:1px solid rgba(255,255,255,.09)!important}
.forgot-input-v130 input{width:100%!important;border:0!important;outline:0!important;background:transparent!important;color:#fff!important;font-size:14px!important}
.forgot-secondary-v130{width:100%!important;margin-top:9px!important;border:0!important;background:none!important;color:#aaa!important;cursor:pointer!important;font-size:12px!important}
.forgot-status-v130{margin-top:12px!important;padding:9px 11px!important;border-radius:10px!important;font-size:12px!important;text-align:center!important;background:rgba(255,255,255,.045)!important;color:#ddd!important}
.forgot-status-v130.error{background:rgba(255,35,65,.08)!important;color:#ff8da1!important}
.forgot-status-v130.success{background:rgba(58,220,142,.08)!important;color:#85eab9!important}
.login-error-v88.locked-v130{color:#ffb366!important}
.login-lock-countdown-v130{font-variant-numeric:tabular-nums!important}


/* =========================================================
   MyHome V13.1 — Password eye position FIX
   Keep the eye icon inside the password field on the right.
   ========================================================= */
.auth-input-wrap-v87.auth-password-wrap-v130,
.forgot-input-v130.auth-password-wrap-v130{
  position:relative !important;
  padding-right:52px !important;
}

.auth-password-wrap-v130 .password-eye-v130{
  position:absolute !important;
  right:10px !important;
  top:50% !important;
  bottom:auto !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  margin:0 !important;
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  padding:0 !important;
  z-index:3 !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1 !important;
  font-size:15px !important;
}

.auth-password-wrap-v130 .password-eye-v130:hover,
.auth-password-wrap-v130 .password-eye-v130.is-visible{
  background:rgba(255,45,80,.08) !important;
}

.auth-password-wrap-v130 input{
  padding-right:4px !important;
}


/* =========================================================
   MyHome V13.2 — Wrong-password feedback + performance
   ========================================================= */

/* Remove all spacecraft / flying vehicle decorations. */
.spacecraft-v122,
.orbital-station-v122,
.satellite-v123,
.mothership-v123,
.ufo-v123,
.astronaut-v123{
  display:none !important;
  animation:none !important;
}

/* Strong, visible login failure feedback. */
#authScreen .auth-card-v87.login-shake-v132{
  animation:loginShakeV132 .52s cubic-bezier(.36,.07,.19,.97) both !important;
  border-color:rgba(255,48,75,.95) !important;
  box-shadow:
    0 28px 70px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,35,65,.45),
    0 0 34px rgba(255,25,55,.25) !important;
}
#loginForm .auth-input-wrap-v87.login-field-error-v132{
  animation:loginFieldErrorV132 .46s ease both !important;
  border-color:rgba(255,55,78,.88) !important;
  box-shadow:0 0 0 3px rgba(255,35,60,.08),0 0 16px rgba(255,35,60,.09) !important;
}
#loginErrorV88.login-error-pop-v132{
  animation:loginErrorPopV132 .34s ease both !important;
}

@keyframes loginShakeV132{
  0%,100%{transform:translate3d(0,0,0)}
  15%{transform:translate3d(-10px,0,0) rotate(-.35deg)}
  30%{transform:translate3d(9px,0,0) rotate(.3deg)}
  45%{transform:translate3d(-7px,0,0) rotate(-.22deg)}
  60%{transform:translate3d(6px,0,0) rotate(.18deg)}
  75%{transform:translate3d(-3px,0,0)}
}
@keyframes loginFieldErrorV132{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  50%{transform:translateX(4px)}
  75%{transform:translateX(-2px)}
}
@keyframes loginErrorPopV132{
  0%{opacity:0;transform:translateY(-4px) scale(.96)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

/* Lighter background rendering without losing the cosmic scene. */
.space-grain-v120{display:none !important}
.nebula-gold-v120{display:none !important}
.galaxy-v123{opacity:.15 !important}
.black-hole-v123{opacity:.38 !important}

@media(max-width:700px){
  .galaxy-v123,.moon-two-v122,.planet-red-v121{display:none !important}
}


/* =========================================================
   MyHome V13.3 — Larger forgot-password UI
   ========================================================= */
.forgot-link-v130{
  font-size:15px !important;
  font-weight:700 !important;
  padding:6px 2px !important;
  color:#d9d6de !important;
}
.forgot-link-v130:hover{
  color:#ff496b !important;
  text-shadow:0 0 10px rgba(255,45,82,.28) !important;
}
.auth-help-row-v130{
  margin:1px 2px 10px !important;
}
.forgot-card-v130{
  width:min(470px,95vw) !important;
  padding:32px !important;
}
.forgot-card-v130 h2{
  font-size:26px !important;
}
.forgot-card-v130 p{
  font-size:14px !important;
}


/* =========================================================
   MyHome V13.4 — LIGHT COSMIC LOGIN
   Reduce GPU-heavy effects while preserving space identity.
   ========================================================= */

/* Remove expensive/decorative layers */
.black-hole-v123,
.galaxy-v123,
.space-lightning-v123,
.supernova-v123,
.warp-flash-v123,
.space-mouse-glow-v120,
.space-grain-v120,
.space-horizon-v120,
.nebula-gold-v120,
.moon-one-v122,
.moon-two-v122,
.planet-red-v121,
.orbital-station-v122,
.spacecraft-v122,
.satellite-v123,
.mothership-v123,
.ufo-v123,
.astronaut-v123{
  display:none !important;
  animation:none !important;
}

/* Keep only two soft nebula layers and make blur cheaper */
.nebula-red-v120,
.nebula-purple-v120{
  filter:blur(42px) !important;
  opacity:.12 !important;
  animation-duration:34s !important;
}

/* Sun: keep it, but remove expensive rotating corona/surface layers */
.sun-v121{
  animation:sunFloatV121 22s ease-in-out infinite alternate !important;
  box-shadow:
    0 0 24px rgba(255,110,30,.45),
    0 0 70px rgba(255,35,50,.20) !important;
}
.sun-v121::before,
.sun-v121::after,
.sun-flare-v121{
  display:none !important;
  animation:none !important;
}

/* Keep Jupiter / Saturn / Earth but slow movement */
.planet-jupiter-v121{animation-duration:30s !important}
.planet-saturn-v121{animation-duration:34s !important}
.planet-blue-v121{display:none !important}
.earth-v123{animation-duration:32s !important}
.earth-cloud-v123{animation:none !important}

/* Lighter glass card */
#authScreen .auth-card-v87{
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
  box-shadow:
    0 20px 48px rgba(0,0,0,.52),
    0 0 20px rgba(255,24,58,.055) !important;
}

/* Login feedback stays strong */
#authScreen .auth-card-v87.login-shake-v132{
  backdrop-filter:blur(8px) !important;
  -webkit-backdrop-filter:blur(8px) !important;
}

@media(max-width:700px){
  .nebula-purple-v120{display:none !important}
  .earth-v123{display:none !important}
  .planet-jupiter-v121{opacity:.62 !important}
  .planet-saturn-v121{opacity:.62 !important}
}


/* ================= MyHome V14 Owner Control Center ================= */
.owner-control-v14{position:fixed;inset:0;z-index:100000;background:#070708;color:#f5f5f7;font-family:inherit}
.owner-control-v14.hidden{display:none!important}.owner-shell-v14{height:100%;display:grid;grid-template-columns:240px 1fr}
.owner-side-v14{background:linear-gradient(180deg,#0d0d10,#080809);border-right:1px solid #26262b;padding:20px 14px;display:flex;flex-direction:column;min-height:0}
.owner-brand-v14{display:flex;gap:11px;align-items:center;padding:4px 8px 22px}.owner-mark-v14{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:#e51e38;box-shadow:0 0 22px #e51e3844;font-weight:900}.owner-brand-v14 b{font-size:17px}.owner-brand-v14 small{display:block;font-size:9px;letter-spacing:2px;color:#777;margin-top:2px}
#ownerNavV14{display:grid;gap:5px;overflow:auto}#ownerNavV14 button,.owner-exit-v14{border:0;background:transparent;color:#9c9ca5;text-align:left;padding:11px 13px;border-radius:10px;font-weight:700;cursor:pointer;font-size:13px}#ownerNavV14 button:hover,#ownerNavV14 button.active{background:#e51e3815;color:#fff}#ownerNavV14 button.active{box-shadow:inset 3px 0 #e51e38}.owner-exit-v14{margin-top:auto;border:1px solid #29292e;color:#ccc}
.owner-main-v14{min-width:0;overflow:auto;background:radial-gradient(circle at 80% 0,#40101822,transparent 35%),#09090b}.owner-top-v14{height:82px;border-bottom:1px solid #242428;display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;background:#09090be8;backdrop-filter:blur(10px);z-index:2}.owner-top-v14 small{font-size:9px;color:#e51e38;letter-spacing:2px}.owner-top-v14 h2{margin:3px 0 0;font-size:20px}.owner-status-v14{display:flex;align-items:center;gap:9px;font-size:11px;color:#999}.owner-status-v14 i{width:7px;height:7px;border-radius:50%;background:#2ed573;box-shadow:0 0 10px #2ed573}.owner-status-v14 b{color:#fff;border-left:1px solid #333;padding-left:10px}
.owner-content-v14{padding:26px;max-width:1500px;margin:auto}.owner-cards-v14{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:14px;margin-bottom:14px}.owner-cards-v14 article,.owner-panel-v14,.owner-empty-v14{background:linear-gradient(145deg,#111115,#0c0c0f);border:1px solid #26262c;border-radius:15px;padding:18px;box-shadow:0 16px 35px #0004}.owner-cards-v14 small{display:block;color:#8d8d96;font-size:11px}.owner-cards-v14 strong{display:block;font-size:30px;margin:7px 0}.owner-cards-v14 em{font-style:normal;font-size:10px;color:#777}.good{color:#2ed573!important}.owner-grid-v14{display:grid;grid-template-columns:1fr 1.4fr;gap:14px}.owner-panel-v14 h3{margin:0 0 16px;font-size:14px}.owner-pill-v14{font-size:9px;border:1px solid #34343a;border-radius:20px;padding:5px 8px;color:#888}.owner-pill-v14.on{border-color:#245b3c;color:#2ed573;background:#12301f55}
.owner-health-v14{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.owner-health-v14.big{grid-template-columns:repeat(3,1fr)}.owner-health-v14>div{background:#08080a;border:1px solid #202024;border-radius:11px;padding:13px}.owner-health-v14 small{display:block;color:#707079;font-size:9px;letter-spacing:.8px}.owner-health-v14 b{display:block;margin-top:5px;font-size:15px}
.owner-table-wrap-v14{overflow:auto;border:1px solid #25252a;border-radius:12px}.owner-table-wrap-v14 table{width:100%;border-collapse:collapse;min-width:650px}.owner-table-wrap-v14 th,.owner-table-wrap-v14 td{text-align:left;padding:11px 12px;border-bottom:1px solid #1e1e22;font-size:11px}.owner-table-wrap-v14 th{color:#777;background:#0a0a0c;font-size:9px;text-transform:uppercase}.owner-table-wrap-v14 td small{display:block;color:#606069;margin-top:3px}.owner-mini-v14{border:1px solid #54242b;background:#281014;color:#ff8290;border-radius:7px;padding:6px 9px;cursor:pointer;font-size:10px}.owner-tools-v14{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.owner-tools-v14 input{width:min(430px,70%);background:#101014;border:1px solid #303037;color:#fff;padding:11px 13px;border-radius:10px;outline:none}.owner-tools-v14 input:focus{border-color:#e51e38}.owner-tools-v14 span,.owner-muted-v14,.owner-empty-v14 p{color:#777;font-size:11px}.owner-empty-v14{text-align:center;padding:70px 20px}.owner-empty-v14 b{font-size:18px}.owner-loading-v14{padding:60px;text-align:center;color:#777}
.owner-entry-v14{position:fixed;right:18px;bottom:18px;z-index:9998;border:1px solid #5e252e;background:#150b0d;color:#fff;border-radius:12px;padding:10px 14px;box-shadow:0 10px 30px #0008,0 0 18px #e51e3822;cursor:pointer;font-weight:800}.owner-entry-v14:hover{border-color:#e51e38;background:#251014}
@media(max-width:850px){.owner-shell-v14{grid-template-columns:70px 1fr}.owner-brand-v14 div,#ownerNavV14 span,.owner-exit-v14{font-size:0}.owner-brand-v14{justify-content:center;padding-inline:0}.owner-mark-v14{width:36px}.owner-side-v14{padding-inline:8px}#ownerNavV14 button{text-align:center;font-size:17px}.owner-cards-v14{grid-template-columns:repeat(2,1fr)}.owner-grid-v14{grid-template-columns:1fr}.owner-health-v14.big{grid-template-columns:repeat(2,1fr)}.owner-status-v14 b{display:none}.owner-content-v14{padding:14px}.owner-top-v14{padding:0 15px}}
@media(max-width:520px){.owner-cards-v14{grid-template-columns:1fr 1fr}.owner-cards-v14 strong{font-size:24px}.owner-health-v14,.owner-health-v14.big{grid-template-columns:1fr 1fr}.owner-entry-v14 span{display:none}}

/* MyHome V14.2 — Correct integrated backend tabs */
.owner-entry-v14,.owner-control-v14{display:none!important}
.admin-head-v142{display:flex;justify-content:space-between;align-items:end;margin:0 0 14px}
.admin-head-v142 small{color:#ff2c49;font-size:9px;letter-spacing:2px;font-weight:900}
.admin-head-v142 h2{margin:3px 0 0;font-size:22px}
.admin-head-v142>span{font-size:9px;color:#999;border:1px solid #303038;background:#111116;padding:7px 10px;border-radius:999px}
.admin-tabs-v142{display:flex;gap:7px;overflow-x:auto;padding:0 0 14px;margin-bottom:14px;border-bottom:1px solid #2b2c32}
.admin-tabs-v142 button{flex:0 0 auto;border:1px solid #303139;background:#111218;color:#a2a4ad;border-radius:9px;padding:9px 12px;font-size:11px;font-weight:800;cursor:pointer}
.admin-tabs-v142 button.active,.admin-tabs-v142 button:hover{color:#fff;border-color:#f02a49;background:#301119;box-shadow:0 0 15px #f02a4924}
.admin-cards-v142{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.admin-cards-v142 article,.admin-panel-v142{background:#111218;border:1px solid #303139;border-radius:14px;padding:16px}
.admin-cards-v142 small{display:block;color:#8b8e98;font-size:10px}.admin-cards-v142 b{display:block;color:#ff2948;font-size:28px;margin:5px 0}.admin-cards-v142 span{font-size:9px;color:#777}.admin-live-v142{color:#3cdb88!important}
.admin-grid-v142{display:grid;grid-template-columns:1fr 1fr;gap:10px}.admin-panel-v142 h3{margin:0 0 13px;font-size:14px}
.admin-health-v142{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.admin-health-v142.wide{grid-template-columns:repeat(3,1fr)}.admin-health-v142>div{background:#0a0b0f;border:1px solid #262830;border-radius:10px;padding:12px}.admin-health-v142 small{display:block;color:#777b85;font-size:9px}.admin-health-v142 b{display:block;margin-top:4px;font-size:14px}
.admin-table-v142{overflow:auto;border:1px solid #292b32;border-radius:11px}.admin-table-v142 table{width:100%;border-collapse:collapse;min-width:620px}.admin-table-v142 th,.admin-table-v142 td{text-align:left;padding:10px;border-bottom:1px solid #202228;font-size:11px}.admin-table-v142 th{font-size:9px;color:#777;background:#0a0b0f}.admin-table-v142 td small{display:block;color:#666;margin-top:3px}.admin-pill-v142{font-size:9px;color:#888}.admin-pill-v142.on{color:#3cdb88}.admin-logout-v142{border:1px solid #5c2730;background:#251015;color:#ff8796;border-radius:7px;padding:6px 8px;font-size:9px;cursor:pointer}
.admin-search-v142{width:min(430px,80%);background:#101116;border:1px solid #30323a;color:#fff;padding:10px 12px;border-radius:9px;margin-bottom:10px}
.admin-empty-v142{text-align:center;padding:50px 15px;color:#777;background:#101116;border:1px solid #292b31;border-radius:14px}
#adminLegacySettingsV142>.admin-stats{display:none!important}
#adminLegacySettingsV142.hidden{display:none!important}
#adminLegacySettingsV142:not(.hidden){display:block!important}
@media(max-width:800px){.admin-cards-v142{grid-template-columns:repeat(2,1fr)}.admin-grid-v142{grid-template-columns:1fr}.admin-health-v142.wide{grid-template-columns:repeat(2,1fr)}}

/* MyHome V14.3 functional admin extras */
.admin-error-v143{padding:28px;border:1px solid #5a2630;background:#1d0d11;border-radius:12px;color:#ff98a5}
.admin-error-v143 p{color:#aaa;font-size:11px}.admin-error-v143 button{border:1px solid #ff2c49;background:#2a1016;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.admin-owner-tag-v143{font-size:9px;color:#ffcf66;border:1px solid #5c4b1f;padding:5px 7px;border-radius:999px}
.admin-imp-v143{border:1px solid #3a3c45;background:#17181e;color:#ddd;border-radius:7px;padding:6px 8px;font-size:9px;cursor:pointer}
.admin-imp-v143:hover{border-color:#ff2c49;color:#fff}
.admin-security-list-v143,.admin-log-list-v143{display:grid;gap:7px}
.admin-security-list-v143>div,.admin-log-list-v143>div{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;background:#0b0c10;border:1px solid #24262d;border-radius:9px;padding:10px}
.admin-security-list-v143 span,.admin-log-list-v143 span{font-size:10px;color:#aaa}.admin-security-list-v143 b,.admin-log-list-v143 b{font-size:10px}.admin-security-list-v143 small,.admin-log-list-v143 small{font-size:9px;color:#666}
.admin-ann-v143{width:100%;min-height:120px;resize:vertical;background:#0b0c10;border:1px solid #30323a;color:#fff;border-radius:10px;padding:12px;outline:none}.admin-ann-v143:focus{border-color:#ff2c49}
.admin-ann-actions-v143{display:flex;gap:8px;margin-top:10px}
.admin-cards-v142{grid-template-columns:repeat(4,minmax(120px,1fr))}
@media(max-width:900px){.admin-cards-v142{grid-template-columns:repeat(2,1fr)}}

/* MyHome V14.5 stable admin */
.admin-loading-v145{padding:44px;text-align:center;color:#8b8e98;background:#101116;border:1px solid #292b31;border-radius:13px}

/* MyHome V14.6 — Admin profile visibility */
.admin-user-cell-v146{display:flex;align-items:center;gap:10px;min-width:190px}
.admin-avatar-btn-v146{width:38px;height:38px;flex:0 0 38px;border-radius:50%;padding:0;border:1px solid #3b3d45;background:#15161b;overflow:hidden;cursor:pointer;box-shadow:0 0 0 2px #0006}
.admin-avatar-btn-v146:hover{border-color:#ff2c49;box-shadow:0 0 14px #ff2c4933}
.admin-avatar-btn-v146 img{width:100%;height:100%;object-fit:cover;display:block}
.admin-mini-stats-v146{display:flex;gap:8px;flex-wrap:wrap}.admin-mini-stats-v146 span{font-size:9px;color:#aaa;background:#111218;border:1px solid #2c2e35;padding:5px 7px;border-radius:7px}
.admin-actions-v146{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.admin-view-v146{border:1px solid #353740;background:#14151a;color:#ddd;border-radius:7px;padding:6px 8px;font-size:9px;cursor:pointer}
.admin-view-v146:hover{border-color:#ff2c49;color:#fff}
.admin-profile-modal-v146{position:fixed;inset:0;z-index:120000;background:#000b;display:grid;place-items:center;padding:18px;backdrop-filter:blur(5px)}
.admin-profile-modal-v146.hidden{display:none!important}
.admin-profile-card-v146{position:relative;width:min(560px,96vw);max-height:90vh;overflow:auto;background:#0e0f13;border:1px solid #343640;border-radius:18px;box-shadow:0 30px 80px #000b}
.admin-profile-close-v146{position:absolute;right:12px;top:12px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid #ffffff24;background:#0a0b0dcc;color:#fff;cursor:pointer}
.admin-profile-cover-v146{height:150px;background:radial-gradient(circle at 70% 20%,#7a1737 0,#28101a 35%,#101116 75%);background-size:cover;background-position:center;position:relative}
.admin-profile-cover-shade-v146{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,#0e0f13 100%)}
.admin-profile-body-v146{padding:0 20px 20px}
.admin-profile-avatar-v146{width:86px;height:86px;border-radius:50%;object-fit:cover;border:4px solid #0e0f13;box-shadow:0 0 0 1px #40434c;margin-top:-44px;position:relative;z-index:2;background:#15161b}
.admin-profile-title-v146{margin-top:8px}.admin-profile-title-v146 h3{margin:0 0 3px;font-size:21px}.admin-profile-title-v146>span:not(.admin-pill-v142){display:block;color:#888;font-size:10px;margin-bottom:7px}
.admin-profile-info-v146{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:14px}.admin-profile-info-v146>div{background:#0a0b0e;border:1px solid #24262d;border-radius:10px;padding:11px}.admin-profile-info-v146 small{display:block;color:#777;font-size:9px}.admin-profile-info-v146 b{display:block;margin-top:4px;font-size:11px;word-break:break-word}
.admin-profile-bio-v146{margin-top:10px;background:#0a0b0e;border:1px solid #24262d;border-radius:10px;padding:11px}.admin-profile-bio-v146 small{color:#777;font-size:9px}.admin-profile-bio-v146 p{margin:5px 0 0;color:#ddd;font-size:11px;white-space:pre-wrap}
.admin-profile-links-v146{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px}.admin-profile-links-v146 a{font-size:9px;color:#ff8392;text-decoration:none;border:1px solid #5e2631;background:#231015;padding:6px 8px;border-radius:8px}
.admin-profile-bottom-v146{display:flex;justify-content:flex-end;margin-top:14px}
@media(max-width:620px){.admin-profile-info-v146{grid-template-columns:1fr}.admin-user-cell-v146{min-width:165px}}

/* MyHome V14.7 — Realtime Admin */
.admin-realtime-badge-v147{margin-left:auto;margin-right:8px;display:inline-flex;align-items:center;gap:6px;border:1px solid #3b3d45;background:#111217;color:#777;border-radius:999px;padding:6px 9px;font-size:9px;font-weight:900;letter-spacing:.6px}
.admin-realtime-badge-v147 i{width:7px;height:7px;border-radius:50%;background:#666}
.admin-realtime-badge-v147.live{color:#45df8f;border-color:#245f3f;background:#0d2117}
.admin-realtime-badge-v147.live i{background:#42e28f;box-shadow:0 0 10px #42e28f;animation:adminLivePulseV147 1.4s ease-in-out infinite}
@keyframes adminLivePulseV147{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.15)}}


/* ===== MyHome V15 Public Feelings Feed / Anonymous / Post Detail ===== */
.feed-v15{max-width:760px}
.create-post-v15{padding:18px;border-color:#34232a;background:linear-gradient(180deg,#161217,#0e0f14)}
.feed-title-v15{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:14px}
.public-feed-badge-v15{white-space:nowrap;border:1px solid #4a3039;background:#23141a;color:#ff9aa7;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}
.create-post-v15 textarea{min-height:110px;resize:vertical;background:#0b0c11;border:1px solid #33272c;font-size:15px;line-height:1.55}
.anonymous-toggle-v15{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin:10px 0 14px;padding:12px;border-radius:14px;border:1px solid #362a31;background:#101116}
.anon-switch-v15{position:relative;width:46px;height:26px;display:block}.anon-switch-v15 input{opacity:0;width:0;height:0}.anon-switch-v15 span{position:absolute;inset:0;border-radius:30px;background:#34343c;cursor:pointer;transition:.2s}.anon-switch-v15 span:before{content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;border-radius:50%;background:#fff;transition:.2s}.anon-switch-v15 input:checked+span{background:#bd1830;box-shadow:0 0 14px #e9274655}.anon-switch-v15 input:checked+span:before{transform:translateX(20px)}
.post-card{position:relative;overflow:hidden}.post-head{justify-content:space-between}.post-head-author-v15{display:flex;gap:10px;align-items:center;min-width:0}.post-head-author-v15>div:last-child{min-width:0}.post-owner-actions-v7{margin-left:auto;position:static!important;display:flex;gap:6px}.post-owner-actions-v7 button{border:1px solid #393942;background:#15161c;border-radius:9px;padding:6px 8px;cursor:pointer}
.post-anonymous-v15{border-color:#4a3038;background:linear-gradient(180deg,#171217,#101116)}.post-anonymous-v15:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#f23950,#7b1829)}
.anonymous-avatar-v15{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:21px;background:#25171d;border:1px solid #5f3440;box-shadow:0 0 16px #e02c4930;flex:0 0 auto}.anon-name-v15{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.anon-badge-v15{font-size:10px;color:#ff9aa8;border:1px solid #683542;background:#2b171e;padding:2px 6px;border-radius:999px}.anonymous-note-v15{margin:2px 0 12px;padding:9px 10px;border-left:2px solid #a72a3f;background:#25141a;color:#c8a9b0;border-radius:0 10px 10px 0;font-size:12px;line-height:1.45}
.post-body{font-size:15px;line-height:1.65}.post-actions{border-top:1px solid #292a31;padding-top:10px}.post-actions .liked{background:#6e1d2c!important;border-color:#b82c43!important}.empty-feed-v15{text-align:center;display:grid;gap:6px;padding:35px}.empty-feed-v15>div{font-size:35px}.empty-feed-v15 span{color:var(--muted);font-size:13px}
.post-detail-layout-v15{max-width:760px;margin:0 auto;padding-bottom:40px}.post-detail-back-v15{border:0;background:transparent;color:#d7d8df;font-weight:800;padding:8px 2px 14px;cursor:pointer}.post-detail-back-v15:hover{color:#ff5368}.post-detail-card-v15{margin-bottom:14px}.post-comments-panel-v15{padding:16px}.post-comments-title-v15{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:11px;margin-bottom:8px}.comment-thread-v15{padding:5px 0}.comment-row-v15{align-items:flex-start}.comment-row-v15 .avatar{width:38px;height:38px;cursor:pointer}.comment-wrap-v15{flex:1;min-width:0}.comment-row-v15 .comment-body{display:inline-block;max-width:100%;padding:9px 12px;background:#191a21;border:1px solid #292b34;border-radius:14px}.comment-meta-v15{display:flex;gap:12px;align-items:center;padding:3px 8px;color:#7f8491;font-size:11px}.comment-reply-btn-v15{border:0;background:transparent;color:#b9bdc7;font-weight:800;padding:0;cursor:pointer;font-size:11px}.comment-reply-btn-v15:hover{color:#ff5368}.comment-reply-v15{margin-left:46px;position:relative}.comment-reply-v15:before{content:"";position:absolute;left:-24px;top:-8px;width:18px;height:23px;border-left:1px solid #393b45;border-bottom:1px solid #393b45;border-radius:0 0 0 11px}.comment-reply-v15 .avatar{width:31px;height:31px}.comment-reply-v15 .comment-body{background:#14151b}.reply-target-v15{margin:9px 0 -2px;display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border:1px solid #5b303b;background:#25141a;color:#f0bdc5;border-radius:10px;font-size:12px}.reply-target-v15 button{border:0;background:transparent;color:#fff;cursor:pointer}.comment-form-v15{display:grid!important;grid-template-columns:1fr auto!important;gap:8px;position:sticky;bottom:0;padding-top:12px;background:linear-gradient(transparent,#111218 25%)}.comment-form-v15 input{min-width:0}.no-comments-v15{text-align:center;color:#b6b9c2;padding:28px 10px}.no-comments-v15 span{font-size:12px;color:#767b88}
@media(max-width:600px){.feed-title-v15{display:block}.public-feed-badge-v15{display:inline-block;margin-top:8px}.create-post-v15{padding:13px}.anonymous-toggle-v15{align-items:flex-start}.post-detail-layout-v15{padding:0 2px 30px}.post-comments-panel-v15{padding:12px}.comment-reply-v15{margin-left:32px}.comment-form-v15{padding-bottom:max(8px,env(safe-area-inset-bottom))}}


/* =========================================================
   MyHome V16 — larger typography + social/profile/notify/call
   ========================================================= */
/* V16.1: increase readability without globally rescaling legacy layouts. */
.user-name,.section-title{font-size:15px}
.post-body{font-size:16px;line-height:1.7}
.bubble{font-size:15px;line-height:1.55}
.nav{font-size:14px}
.topbar h2{font-size:20px}
.profile-card label,.profile-card input,.profile-card textarea,.profile-card button,.profile-card select{font-size:14px}
.profile-card .muted,.profile-card .small{font-size:12px}

.comment-form-v15{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center}
.comment-anon-v16{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:8px 10px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035);cursor:pointer}
.anonymous-comment-v16 .comment-body{border-color:rgba(160,120,255,.28)}
.comment-frame-v16{width:42px;height:42px;flex:0 0 auto}.comment-frame-v16 .avatar{width:100%;height:100%}

.chat-notify-stack-v16{position:fixed;right:22px;top:78px;z-index:10050;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:min(390px,calc(100vw - 28px))}
.chat-notify-v16{pointer-events:auto;width:100%;display:grid;grid-template-columns:56px 1fr 20px;align-items:center;gap:12px;text-align:left;padding:12px 14px;border-radius:18px;border:1px solid rgba(255,70,90,.35);background:rgba(18,19,24,.96);box-shadow:0 18px 55px rgba(0,0,0,.45);color:#fff;transform:translateX(120%);opacity:0;transition:.25s ease;cursor:pointer}
.chat-notify-v16.show{transform:translateX(0);opacity:1}.chat-notify-copy-v16{min-width:0;display:flex;flex-direction:column}.chat-notify-copy-v16 span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#c8cbd3;font-size:.9rem}.chat-notify-arrow-v16{font-size:1.6rem;color:#ff5067}
.notify-float-frame-v16{width:50px;height:50px}.notify-float-frame-v16 img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.noti-click-v16{cursor:pointer;display:grid;grid-template-columns:48px 1fr 18px;align-items:center;gap:12px}.noti-click-v16:hover{background:rgba(255,255,255,.05)}.notify-avatar-frame-v16{width:44px;height:44px}.notify-avatar-frame-v16 img{width:100%;height:100%}.noti-open-v16{font-size:1.5rem;color:#999}

.notification-sound-v16{margin:18px 0;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.025)}
.sound-settings-row-v16{display:flex;gap:10px;margin-top:12px;align-items:center}.sound-settings-row-v16 select{flex:1;min-width:0}.sound-upload-v16{display:inline-flex;margin-top:10px}

.profile-modal-card{width:min(980px,94vw)!important;max-height:92vh!important;overflow:auto!important}.public-profile-posts-v16{padding:0 20px 24px}.public-posts-head-v16{display:flex;justify-content:space-between;gap:12px;align-items:end;margin:14px 0}.public-posts-head-v16 b{font-size:1.18rem}.public-posts-head-v16 span{font-size:.9rem;color:#9296a3}.public-post-list-v16{display:grid;gap:14px}.public-post-list-v16 .post-card{margin:0}

.call-shell-v16.call-connected-v16{background:transparent;pointer-events:none}.call-shell-v16.call-connected-v16 .call-card-v16{pointer-events:auto;position:fixed;width:310px;max-width:calc(100vw - 20px);right:18px;bottom:18px;left:auto;top:auto;margin:0;z-index:10100;border-radius:22px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.55);transition:width .2s,height .2s,transform .2s}
.call-shell-v16.call-connected-v16 .call-avatar-wrap .avatar{width:78px;height:78px}.call-shell-v16.call-connected-v16 h2{font-size:1.05rem;margin:8px 0 2px}.call-shell-v16.call-connected-v16 .call-actions-v16{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}.call-drag-handle-v16{display:none;cursor:move;user-select:none;color:#9296a3;font-size:.85rem;justify-content:center;gap:8px}.call-shell-v16.call-connected-v16 .call-drag-handle-v16{display:flex}.call-timer-v16{font-variant-numeric:tabular-nums;font-weight:800;font-size:1.25rem;margin:4px 0 8px}
.call-shell-v16.call-expanded-v16{background:rgba(0,0,0,.72);pointer-events:auto;display:flex;align-items:center;justify-content:center}.call-shell-v16.call-expanded-v16 .call-card-v16{position:relative!important;left:auto!important;top:auto!important;right:auto!important;bottom:auto!important;width:min(560px,92vw)!important;padding:32px!important}.call-shell-v16.call-expanded-v16 .call-avatar-wrap .avatar{width:150px;height:150px}.call-shell-v16.call-expanded-v16 h2{font-size:1.7rem}.call-shell-v16.call-expanded-v16 .call-drag-handle-v16{display:none}
.call-log-bubble-v16{background:rgba(83,87,100,.18)!important;border:1px solid rgba(255,255,255,.08)!important}.call-log-v16{display:flex;gap:10px;align-items:center}.call-log-icon-v16{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,70,90,.15);font-size:1.2rem}

@media(max-width:700px){.comment-form-v15{grid-template-columns:1fr auto}.comment-anon-v16{grid-column:1/-1}.chat-notify-stack-v16{right:12px;top:64px}.call-shell-v16.call-connected-v16 .call-card-v16{right:10px;bottom:10px;width:270px}.sound-settings-row-v16{flex-direction:column;align-items:stretch}.public-posts-head-v16{align-items:flex-start;flex-direction:column}}


/* =========================================================
   MyHome V16.1 — regression/layout fixes
   ========================================================= */
#view-profile .profile-card{overflow:visible}
#view-profile .profile-hero{min-height:168px}
#view-profile .profile-actions{flex-wrap:wrap}
#view-profile .field input,#view-profile .field textarea,#view-profile select{min-height:42px}
#view-profile textarea{min-height:88px}
#view-profile .decoration-save,#view-profile #saveProfile,#view-profile #logoutBtn{font-size:14px}
#view-profile .notification-sound-v16{font-size:14px}
.chat-notify-v16{font-size:14px}
.comment-form-v15 input{font-size:14px}
.call-shell-v16.call-connected-v16 .call-card-v16{max-height:min(520px,calc(100vh - 24px));overflow:auto}
@media(max-width:900px){#view-profile .profile-card{padding:14px}.profile-modal-card{width:min(96vw,980px)!important}}


/* =========================================================
   MyHome V16.2 — full-screen own profile
   ========================================================= */
#publicProfileModal.self-full-profile-v162{z-index:9999!important;inset:0!important;padding:0!important;background:#07090e!important;place-items:stretch!important}
#publicProfileModal.self-full-profile-v162 .profile-modal-card{width:100%!important;max-width:none!important;height:100dvh!important;max-height:none!important;border:0!important;border-radius:0!important;margin:0!important;overflow:auto!important;background:#080a10!important}
#publicProfileModal.self-full-profile-v162 .public-cover{height:clamp(190px,31vh,360px)!important}
#publicProfileModal.self-full-profile-v162 .public-profile-content,#publicProfileModal.self-full-profile-v162 .public-profile-posts-v16{width:min(920px,calc(100% - 28px));margin-left:auto;margin-right:auto}
#publicProfileModal.self-full-profile-v162 .profile-back-btn-v8{position:fixed!important;z-index:4;left:18px;top:18px}
#publicProfileModal.self-full-profile-v162 .modal-close{position:fixed!important;z-index:4;right:18px;top:18px}
@media(max-width:720px){#publicProfileModal.self-full-profile-v162 .public-profile-content,#publicProfileModal.self-full-profile-v162 .public-profile-posts-v16{width:calc(100% - 18px)}#publicProfileModal.self-full-profile-v162 .public-cover{height:210px!important}}


/* MyHome V16.3 — sticker/presence/call polish */
.bubble.sticker-bubble-v163{background:transparent!important;background-image:none!important;box-shadow:none!important;border:0!important;padding:2px 4px!important;overflow:visible!important}
.bubble.sticker-bubble-v163.me{background:transparent!important}
.bubble.sticker-bubble-v163 .chat-sticker-v163{width:min(190px,46vw)!important;height:auto!important;max-width:190px!important;max-height:190px!important;object-fit:contain!important;margin:0!important;border-radius:0!important}
.group-msg-v8.group-sticker-bubble-v163{background:transparent!important;border:0!important;box-shadow:none!important;padding:2px!important}
.group-sticker-v163{width:min(190px,46vw);height:auto;max-height:190px;object-fit:contain;display:block}
@media(max-width:700px){.bubble.sticker-bubble-v163 .chat-sticker-v163,.group-sticker-v163{width:min(160px,45vw)!important;max-width:160px!important;max-height:160px!important}}


/* =========================================================
   MyHome V16.4 — chat bottom / picker auto-close / profile top-layer
   ========================================================= */
#publicProfileModal.profile-top-layer-v164{
  position:fixed!important;
  inset:0!important;
  z-index:150000!important;
  background:rgba(0,0,0,.82)!important;
  padding:18px!important;
  display:grid!important;
  place-items:center!important;
  isolation:isolate!important;
}
#publicProfileModal.profile-top-layer-v164.hidden{display:none!important}
#publicProfileModal.profile-top-layer-v164:not(.self-full-profile-v162) .profile-modal-card{
  width:min(980px,calc(100vw - 36px))!important;
  max-width:980px!important;
  max-height:calc(100dvh - 36px)!important;
  margin:0!important;
  position:relative!important;
  z-index:1!important;
  overflow:auto!important;
}
#publicProfileModal.profile-top-layer-v164.self-full-profile-v162{padding:0!important;place-items:stretch!important}
@media(max-width:720px){
  #publicProfileModal.profile-top-layer-v164{padding:8px!important}
  #publicProfileModal.profile-top-layer-v164:not(.self-full-profile-v162) .profile-modal-card{
    width:calc(100vw - 16px)!important;
    max-height:calc(100dvh - 16px)!important;
  }
}
\n\n/* ============================================================\n   V16.5 — realtime unread badges + group modal overlay fix\n   ============================================================ */\n.chat-filter-v96 button{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;white-space:nowrap}\n.chat-filter-count-v165,.group-unread-badge-v165{\n  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;\n  border-radius:999px;background:#ef233c;color:#fff;font-size:10px;font-weight:900;line-height:1;\n  box-shadow:0 0 0 1px #ff667866,0 3px 10px #ef233c38;flex:0 0 auto\n}\n.group-unread-badge-v165{margin-left:auto;min-width:21px;height:21px;font-size:11px}\n/* Group dialogs must cover the whole app, including the high-z-index sidebar. */\n#createGroupModal,#groupSettingsModal,#groupMembersModal,#groupPasswordModal{\n  position:fixed!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;\n  width:100vw!important;height:100dvh!important;z-index:160000!important;\n  display:grid!important;place-items:center!important;padding:20px!important;background:rgba(0,0,0,.76)!important;\n  overflow:auto!important;isolation:isolate!important\n}\n#createGroupModal.hidden,#groupSettingsModal.hidden,#groupMembersModal.hidden,#groupPasswordModal.hidden{display:none!important}\n#createGroupModal .modal-card,#groupSettingsModal .modal-card,#groupMembersModal .modal-card,#groupPasswordModal .modal-card{\n  position:relative!important;z-index:1!important;margin:auto!important;max-width:calc(100vw - 40px)!important;max-height:calc(100dvh - 40px)!important;\n  overflow:auto!important;box-sizing:border-box!important\n}\n@media(max-width:700px){\n  #createGroupModal,#groupSettingsModal,#groupMembersModal,#groupPasswordModal{padding:10px!important;align-items:end!important}\n  #createGroupModal .modal-card,#groupSettingsModal .modal-card,#groupMembersModal .modal-card,#groupPasswordModal .modal-card{\n    width:100%!important;max-width:none!important;max-height:92dvh!important;border-radius:20px 20px 0 0!important\n  }\n}\n