:root{--bg:#f5f5f8;--card:#fff;--ink:#16151d;--muted:#757280;--line:#e8e6ed;--accent:#6d4aff;--soft:#eee9ff;--school:#fff7d8;--night:#0e1530}*{box-sizing:border-box}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--ink)}a{color:inherit;text-decoration:none}header{height:68px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100vw - 760px)/2));position:sticky;top:0;z-index:3}.brand{font-size:28px;font-weight:900;letter-spacing:-1.5px}.brand.big{font-size:46px;text-align:center;margin-bottom:8px}nav{display:flex;gap:18px;font-size:14px}main{max-width:760px;margin:28px auto;padding:0 18px}.welcome,.panel,.composer,.post,.mode-card{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:22px;margin-bottom:18px;box-shadow:0 8px 28px rgba(25,20,45,.04)}.welcome{display:flex;justify-content:space-between;align-items:center}.welcome h1{margin:3px 0;font-size:30px}.welcome p,.muted,small{color:var(--muted)}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.4px;color:var(--accent)}.avatar,.mini-avatar{display:grid;place-items:center;background:var(--soft);color:var(--accent);font-weight:800;border-radius:50%}.avatar{width:62px;height:62px;font-size:25px}.mini-avatar{width:42px;height:42px}.composer textarea{width:100%;border:0;resize:vertical;min-height:96px;font:inherit;font-size:17px;outline:none}.row{display:flex;justify-content:space-between;gap:12px;align-items:center}.row select,input,textarea{border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff}button,.family{border:0;border-radius:14px;padding:11px 16px;background:var(--accent);color:#fff;font-weight:750;cursor:pointer}.ghost{background:#f2f0f6;color:#47434f}.ghost.active{background:var(--soft);color:var(--accent)}.post-head{display:flex;gap:11px;align-items:center}.post-head small,.person small{display:block;margin-top:3px}.post-body{font-size:17px;line-height:1.55}.post-actions{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0;margin:12px 0}.comment{background:#f6f5f8;padding:10px 13px;border-radius:15px;margin:8px 0}.comment-form{display:flex;gap:8px;margin-top:10px}.comment-form input{flex:1}.mode-card{display:flex;gap:16px;background:var(--school)}.mode-icon{font-size:42px}.mode-card h2{margin:0 0 6px}.people{display:grid;gap:10px}.person{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid var(--line);border-radius:18px;padding:12px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}label{display:grid;gap:7px;font-weight:650}.auth{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#f0ebff,#faf9ff 55%,#f4f8ff)}.auth-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:30px;padding:30px;box-shadow:0 24px 70px rgba(44,29,90,.12)}.auth-card h1{text-align:center;margin-bottom:4px}.auth-card>p{text-align:center}.auth-card form{display:grid;gap:14px;margin-top:24px}.error,.success{padding:12px;border-radius:13px;margin:12px 0}.error{background:#ffe7e7;color:#8b2424}.success{background:#e6faee;color:#23663b}.sleep-screen{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 20%,#27345f,var(--night) 58%,#080d20);color:#fff;display:grid;place-items:center;overflow:hidden}.night{text-align:center;padding:28px;max-width:620px;animation:fadein 1.4s ease}.night.compact{max-width:520px}.moon{font-size:110px;line-height:1;animation:float 5s ease-in-out infinite}.stars{font-size:30px;letter-spacing:13px;opacity:.7;animation:twinkle 3s ease-in-out infinite}.night h1{font-size:42px;margin:22px 0 8px}.night p{opacity:.82;font-size:18px}.night strong{display:block;margin:25px 0}.family{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2)}@keyframes float{50%{transform:translateY(-8px)}}@keyframes twinkle{50%{opacity:.35}}@keyframes fadein{from{opacity:0;transform:translateY(12px)}}@media(max-width:620px){nav{gap:10px;font-size:12px}.grid2{grid-template-columns:1fr}.night h1{font-size:34px}.comment-form{flex-direction:column}}
.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.button{display:inline-block;border-radius:14px;padding:11px 16px;background:var(--accent);color:#fff;font-weight:750}.empty{padding:20px;border:1px dashed var(--line);border-radius:18px;color:var(--muted);text-align:center}.messages-layout{display:grid;grid-template-columns:220px 1fr;gap:18px;min-height:430px}.contacts{display:grid;align-content:start;gap:7px;border-right:1px solid var(--line);padding-right:14px}.contact{display:flex;gap:9px;align-items:center;padding:9px;border-radius:14px}.contact.selected{background:var(--soft);color:var(--accent);font-weight:750}.thread{display:flex;flex-direction:column;gap:8px;max-height:430px;overflow:auto;padding:8px 2px}.bubble{max-width:78%;padding:11px 13px;border-radius:17px;background:#f1f0f4;line-height:1.4}.bubble.mine{align-self:flex-end;background:var(--accent);color:#fff}.bubble.theirs{align-self:flex-start}.bubble small{display:block;font-size:10px;margin-top:5px;opacity:.7;color:inherit}.message-form{display:flex;gap:9px;margin-top:14px}.message-form textarea{flex:1;min-height:55px;resize:vertical}.profile-card{display:flex;gap:20px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:26px;padding:25px;margin-bottom:18px}.avatar.large{width:88px;height:88px;font-size:36px;flex:0 0 auto}.pill{display:inline-block;background:var(--soft);color:var(--accent);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:800}.safety-card,.notice{padding:14px 16px;border-radius:16px;margin:14px 0}.safety-card{background:#e9f8ef;color:#245f3a}.notice{background:#fff7d8;color:#6d5a18}.night-panel{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff}.night-panel .muted{color:rgba(255,255,255,.75)}.night-panel .person{border-color:rgba(255,255,255,.16)}@media(max-width:700px){header{height:auto;min-height:68px;align-items:flex-start;padding-top:16px;padding-bottom:12px;gap:12px}nav{flex-wrap:wrap;justify-content:flex-end}.messages-layout{grid-template-columns:1fr}.contacts{border-right:0;border-bottom:1px solid var(--line);padding-right:0;padding-bottom:12px;grid-template-columns:repeat(2,minmax(0,1fr))}.person{grid-template-columns:auto 1fr}.person>.actions,.person>form,.person>.button{grid-column:1/-1}.message-form{flex-direction:column}}

.media-picker{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--muted);margin:10px 0}.media-picker input{max-width:250px}.post-media{display:block;width:100%;max-height:520px;object-fit:cover;border-radius:18px;margin:12px 0;border:1px solid var(--line)}.danger{background:#b42318}.profile-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}.button-like{display:inline-block;border-radius:14px;padding:11px 16px;font-weight:750}.tabs,.chips,.weekday-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.day-check{display:flex;align-items:center;gap:5px;background:#f3f1f7;padding:8px 10px;border-radius:12px;font-size:13px}.day-check input{padding:0}.chip{display:flex;align-items:center;gap:6px;background:#f3f1f7;padding:5px 8px;border-radius:999px}.tiny{padding:3px 8px;border-radius:999px}.report-card{border:1px solid var(--line);border-radius:18px;padding:15px;background:#fff}.report-card p{line-height:1.5}hr{border:0;border-top:1px solid var(--line);margin:24px 0}
.avatar-img{object-fit:cover;overflow:hidden}.avatar.large.avatar-img{display:block}.media-row{display:flex;gap:14px;flex-wrap:wrap}.community-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.community-card{border:1px solid var(--line);border-radius:18px;padding:16px;background:#fff}.community-card strong{display:block;font-size:17px}.community-card small{display:block;margin:5px 0 8px}.community-card p{margin:0;line-height:1.45;color:var(--muted)}.danger-pill{background:#ffe7e7;color:#9f271f}.priority-high{border-color:#e59b94;box-shadow:0 0 0 3px rgba(180,35,24,.06)}.reported-content{padding:12px;border-radius:12px;background:#f6f5f8;margin:10px 0}.form-end{display:flex;align-items:end}@media(max-width:620px){.community-grid{grid-template-columns:1fr}.media-row{flex-direction:column}}


.feed-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin:0 0 1rem}.chip{padding:.5rem .75rem;border-radius:999px;background:#fff;border:1px solid #ddd;text-decoration:none;color:inherit}.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.story-card{background:#fff;border-radius:22px;padding:1rem;box-shadow:0 10px 30px rgba(0,0,0,.06)}.story-media{width:100%;max-height:420px;object-fit:cover;border-radius:18px}.chat-box{display:flex;flex-direction:column;gap:.75rem;margin:1rem 0}.chat-message{max-width:75%;background:#fff;padding:.75rem 1rem;border-radius:18px;box-shadow:0 5px 18px rgba(0,0,0,.05)}.chat-message.mine{align-self:flex-end;background:#f2efff}.chat-message p{margin:.3rem 0}.chat-compose{display:flex;gap:.5rem}.chat-compose input{flex:1}
.demo-mail{margin:14px 0;padding:14px;border:1px dashed var(--accent);border-radius:14px;background:var(--soft)}.demo-mail small{display:block;margin-top:8px}.shorts-feed{display:grid;gap:22px;max-width:520px;margin:0 auto}.short-card{background:#111;border-radius:26px;overflow:hidden;color:#fff;box-shadow:0 18px 45px rgba(0,0,0,.16)}.short-card video{display:block;width:100%;max-height:72vh;background:#000}.short-meta{display:flex;gap:12px;align-items:center;padding:14px}.short-meta p{margin:3px 0 0;color:#ddd}.notice a{text-decoration:underline;font-weight:800}

.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin:22px 0;flex-wrap:wrap}.pagination span{color:var(--muted,#666);font-size:.95rem}

.search-form{display:flex;gap:10px}.search-form input{flex:1}.search-post{box-shadow:none;margin:12px 0}.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}.stat-card{background:#f6f5f8;border:1px solid var(--line);border-radius:18px;padding:18px}.stat-card strong{display:block;font-size:28px}.stat-card span{display:block;color:var(--muted);margin-top:4px}@media(max-width:700px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-form{flex-direction:column}}

/* v1.4 */
.settings-list{display:grid;gap:10px}.check-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(127,127,127,.2);border-radius:12px}.check-row input{width:auto}.audit-list{display:grid;gap:8px}.audit-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(120px,1fr) auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(127,127,127,.18)}.audit-row small{opacity:.7}.audit-row span{word-break:break-word}@media(max-width:700px){.audit-row{grid-template-columns:1fr}.audit-row small{margin-top:-6px}}

.profile-verified{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;margin-left:.3rem!important;vertical-align:-3px!important;overflow:hidden!important;line-height:1!important}.profile-verified .profile-verified-svg{display:block!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;max-width:20px!important;max-height:20px!important;flex:0 0 20px!important}.profile-verified-child{color:#e53935!important}.profile-verified-adult{color:#25a55f!important}.profile-verified-public{color:#1877f2!important}
.public-name{font-weight:750}.reaction-picker{display:flex;gap:.35rem;flex-wrap:wrap;padding:.4rem 0}.reaction-picker button{font-size:1.35rem;min-width:2.55rem;padding:.4rem;border-radius:999px}.reaction-summary{display:flex;gap:.45rem;flex-wrap:wrap;font-size:.9rem}.verified-profile-card{border:1px solid #b7d8ff;border-radius:18px;padding:1rem;background:linear-gradient(180deg,#f8fcff,#fff)}

.mobile-bottom{display:none}@media(max-width:760px){body{padding-bottom:76px}.mobile-bottom{display:flex;position:fixed;z-index:50;left:0;right:0;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid #ddd;justify-content:space-around;padding:.45rem .2rem max(.45rem,env(safe-area-inset-bottom))}.mobile-bottom a{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-decoration:none;font-size:1.25rem}.mobile-bottom a span{font-size:.67rem}.post-head strong{display:flex;align-items:center}.reaction-picker{border-top:1px solid #eee;margin-top:.5rem;padding-top:.55rem}}

.call-screen{max-width:900px;margin:0 auto}.video-stage{position:relative;background:#111;border-radius:24px;overflow:hidden;min-height:320px}.video-stage #remote{width:100%;max-height:70vh;display:block}.video-stage #local{position:absolute;right:16px;bottom:16px;width:min(28%,180px);border-radius:16px;background:#222}.call-controls{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-top:1rem}.danger{background:#b42318!important;color:#fff!important}

/* BAPMU Messenger v1.8 */
.messenger-shell{max-width:1280px;margin:0 auto;padding:1rem}.messenger{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 110px);background:var(--card,#fff);border:1px solid #e7e7eb;border-radius:24px;overflow:hidden}.messenger-sidebar{border-right:1px solid #e7e7eb;padding:1rem}.messenger-title{display:flex;align-items:center;justify-content:space-between}.messenger-title h1{margin:.25rem 0}.messenger-title a,.icon-button{font-size:1.35rem;text-decoration:none}.chat-search{width:100%;box-sizing:border-box;border:0;background:#f2f3f5;border-radius:999px;padding:.8rem 1rem;margin:.6rem 0 1rem}.contacts{display:flex;flex-direction:column;gap:.25rem}.contact{display:flex;gap:.7rem;align-items:center;padding:.65rem;border-radius:14px;text-decoration:none}.contact.selected,.contact:hover{background:#f1f4ff}.contact>span:last-child{display:flex;flex-direction:column;min-width:0}.contact small{opacity:.68}.mini-avatar{position:relative}.online-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:#20a464;border:2px solid #fff;right:-1px;bottom:-1px}.chat-pane{display:flex;flex-direction:column;min-width:0;min-height:0}.chat-header{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid #e7e7eb}.chat-header h2{margin:0}.chat-header-actions{display:flex;align-items:center;gap:.35rem}.chat-header-actions form{margin:0}.chat-header-actions button,.icon-button{border:0;background:#f1f4ff;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;padding:0}.thread{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.4rem;min-height:380px;max-height:calc(100vh - 280px)}.bubble{max-width:min(72%,620px);padding:.6rem .8rem;border-radius:18px;background:#eee;align-self:flex-start}.bubble.mine{align-self:flex-end;background:#6757e8;color:#fff}.bubble small{display:block;font-size:.68rem;opacity:.7;margin-top:.25rem}.chat-media{display:block;max-width:min(100%,440px);max-height:420px;border-radius:14px;margin:.3rem 0}.typing-line{padding:0 1.2rem .35rem;font-size:.85rem;opacity:.7}.message-form.modern{position:relative;display:flex;align-items:flex-end;gap:.45rem;padding:.7rem 1rem;border-top:1px solid #e7e7eb}.message-form.modern textarea{flex:1;resize:none;min-height:42px;max-height:130px;border:0;background:#f2f3f5;border-radius:22px;padding:.72rem 1rem}.attach-button,.emoji-button,.send-button{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer}.emoji-button{border:0}.send-button{border:0}.emoji-tray{position:absolute;bottom:64px;left:54px;right:54px;background:#fff;border:1px solid #ddd;border-radius:16px;padding:.8rem;font-size:1.5rem;line-height:2;box-shadow:0 12px 40px rgba(0,0,0,.14)}.messenger-empty{margin:auto;text-align:center;padding:3rem}.messenger-empty>div{font-size:4rem}
@media(max-width:760px){.messenger-shell{padding:0}.messenger{display:block;border:0;border-radius:0;min-height:calc(100vh - 70px)}.messenger-sidebar{display:none}.chat-pane{min-height:calc(100vh - 70px)}.thread{max-height:none;min-height:0}.bubble{max-width:84%}.chat-header{position:sticky;top:0;background:#fff;z-index:3}.message-form.modern{position:sticky;bottom:0;background:#fff}.chat-media{max-height:320px}}

/* BAPMU v1.9 social/profile */
.profile-cover{height:260px;border-radius:24px 24px 0 0;overflow:hidden;background:#e8e9f1}.profile-cover img{width:100%;height:100%;object-fit:cover}.section-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}.album-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem;margin-top:1rem}.album-card{display:flex;flex-direction:column;gap:.35rem;text-decoration:none}.album-cover{aspect-ratio:1.3;background:#f0f1f5;border-radius:16px;display:grid;place-items:center;font-size:2rem;overflow:hidden}.album-cover img{width:100%;height:100%;object-fit:cover}.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem;margin-top:1rem}.photo-grid figure{margin:0}.photo-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:16px}.hashtags{display:flex;gap:.4rem;flex-wrap:wrap;margin:.4rem 0}.hashtags a{text-decoration:none;font-weight:700}.link-preview{display:flex;flex-direction:column;padding:.85rem;border:1px solid #e3e4eb;border-radius:14px;text-decoration:none;margin:.6rem 0;background:#fafbff}.poll-card{border:1px solid #e3e4eb;border-radius:16px;padding:.8rem;margin:.7rem 0}.poll-card form{margin:.35rem 0}.poll-option{width:100%;display:flex;justify-content:space-between}.shared-post{border:1px solid #ddd;border-radius:16px;padding:.85rem;margin:.7rem 0;background:#fafafa}.share-box{position:relative}.share-box form{padding:.6rem;background:#fff;border:1px solid #ddd;border-radius:12px;margin-top:.4rem}.composer-more{margin:.5rem 0}.composer-more summary{cursor:pointer;font-weight:700}.poll-compose{margin:.6rem 0}.inline-form{display:inline}.profile-actions form{display:inline}

/* BAPMU v2.0 platform surfaces */
.card-grid,.game-grid,.market-grid,.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1rem}
.feature-card,.game-card,.market-card,.live-card{border:1px solid #e5e6ec;border-radius:20px;padding:1rem;background:#fff;text-decoration:none;display:flex;flex-direction:column;gap:.45rem}
.game-card:hover,.feature-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,.08)}
.games-hero{padding:2rem 1rem;max-width:900px;margin:0 auto}.game-icon{font-size:3rem}.market-card img{width:100%;aspect-ratio:1.2;object-fit:cover;border-radius:16px}.market-card .button{margin-top:auto}
.live-pill{display:inline-flex;align-self:flex-start;background:#d92d20;color:#fff;border-radius:999px;padding:.2rem .55rem;font-weight:800;font-size:.76rem}.live-card video{width:100%;border-radius:14px;background:#111}.live-placeholder{aspect-ratio:16/9;background:#111;color:#fff;display:grid;place-items:center;border-radius:14px;padding:1rem;text-align:center}.stream-key{display:block;padding:.75rem;background:#111;color:#fff;border-radius:10px;overflow-wrap:anywhere;margin:.5rem 0}
.game-layout{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem}.game-stage{background:#fff;border:1px solid #e5e6ec;border-radius:24px;padding:1rem}.memory-board{display:grid;grid-template-columns:repeat(4,minmax(62px,1fr));gap:.7rem;max-width:620px;margin:1rem auto}.memory-card{aspect-ratio:1;border:0;border-radius:18px;font-size:2.2rem;background:#6757e8;color:#fff}.memory-card.open,.memory-card.matched{background:#f1f4ff;color:#111}.memory-card.matched{opacity:.7}.game-status{display:flex;justify-content:center;gap:1rem;align-items:center;flex-wrap:wrap}.leaderboard{align-self:start}.leader-row{display:grid;grid-template-columns:32px 1fr auto;gap:.4rem;padding:.5rem 0;border-bottom:1px solid #eee;align-items:center}
@media(max-width:800px){.game-layout{display:block}.leaderboard{margin-top:1rem}.memory-board{grid-template-columns:repeat(4,1fr);gap:.45rem}.memory-card{font-size:1.6rem}.mobile-bottom{overflow-x:auto;justify-content:flex-start;gap:.55rem}.mobile-bottom a{min-width:62px}}

/* BAPMU Farvekamp */
.social-game-feature{max-width:1100px;margin:0 auto 1rem;padding:1.2rem 1.4rem;border-radius:24px;background:linear-gradient(135deg,#f4efff,#eef7ff);display:flex;justify-content:space-between;align-items:center;gap:1rem}.color-game-shell{max-width:1200px;margin:0 auto;padding:1rem}.color-topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}.invite-grid{display:flex;flex-wrap:wrap;gap:.5rem}.big-game-button{margin-top:1rem;font-size:1.05rem;padding:.8rem 1.4rem}.game-player{display:flex;justify-content:space-between;padding:.65rem .75rem;border-bottom:1px solid #eee}.color-table{min-height:70vh;border-radius:28px;background:radial-gradient(circle at center,#316c52,#174535);padding:1rem;box-shadow:inset 0 0 70px rgba(0,0,0,.25);position:relative;color:#fff}.opponents{display:flex;justify-content:center;gap:1rem;flex-wrap:wrap;min-height:110px}.opponent{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:.5rem .8rem;border-radius:16px;background:rgba(0,0,0,.18)}.opponent.active-turn{outline:3px solid #fff}.opponent-avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#333;font-weight:800}.table-center{min-height:330px;display:flex;align-items:center;justify-content:center;gap:1.5rem;position:relative;flex-wrap:wrap}.turn-label{position:absolute;top:15px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.35);padding:.45rem .8rem;border-radius:999px;font-weight:800}.color-card,.deck-card{width:78px;aspect-ratio:2/3;border-radius:14px;border:5px solid rgba(255,255,255,.88);box-shadow:0 7px 15px rgba(0,0,0,.3);display:grid;place-items:center;font-size:1.8rem;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.4);transform-origin:center bottom}.color-card.violet{background:#7457e8}.color-card.blue{background:#2878d8}.color-card.green{background:#2b9b65}.color-card.orange{background:#e77b28}.color-card.wild{background:conic-gradient(#7457e8,#2878d8,#2b9b65,#e77b28,#7457e8)}.color-card.large{width:110px;font-size:2.5rem}.deck-card{background:#171925;text-align:center;font-size:.75rem;cursor:pointer}.deck-card.your-turn{outline:4px solid #ffd95a;animation:gamepulse 1.2s infinite}.player-hand{display:flex;justify-content:center;align-items:flex-end;gap:-10px;gap:.15rem;flex-wrap:wrap;padding:1rem}.player-hand .color-card{cursor:pointer;transition:transform .15s;margin-left:-12px}.player-hand .color-card:first-child{margin-left:0}.player-hand .color-card:hover{transform:translateY(-16px) rotate(0deg);z-index:3}.wild-chooser{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:.4rem;background:#fff;padding:.5rem;border-radius:999px;z-index:5}.wild-chooser button{font-size:1.5rem;border:0;background:transparent}.winner-banner{position:absolute;inset:40% auto auto 50%;transform:translate(-50%,-50%);z-index:8;background:#fff;color:#111;border-radius:20px;padding:1.2rem 2rem;font-size:1.5rem;font-weight:900;box-shadow:0 20px 60px rgba(0,0,0,.35)}@keyframes gamepulse{50%{transform:scale(1.05)}}@media(max-width:700px){.social-game-feature,.color-topbar{align-items:flex-start;flex-direction:column}.color-table{border-radius:0;min-height:calc(100vh - 90px)}.color-card{width:58px;border-width:3px;font-size:1.35rem}.color-card.large{width:82px}.player-hand{padding:.6rem}.table-center{min-height:260px}.opponents{gap:.4rem}.opponent{font-size:.75rem}.opponent-avatar{width:34px;height:34px}}

/* BAPMU v2.2 Games social layer */
.game-room-side{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:1rem}.game-chat{min-width:0}.game-chat-messages{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:.45rem;margin:.6rem 0}.game-chat-line{display:flex;flex-direction:column;padding:.45rem .6rem;border-radius:12px;background:#f5f6fa}.game-chat-line strong{font-size:.78rem}.game-emoji-row{display:flex;gap:.35rem;margin:.4rem 0}.game-emoji-row button{border:0;background:#f1f2f7;border-radius:999px;font-size:1.1rem}.quiz-shell{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem}.quiz-players{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin:1rem 0}.quiz-player{display:flex;justify-content:space-between;padding:.6rem .75rem;border:1px solid #e6e6ec;border-radius:14px}.quiz-player.me{outline:2px solid #6757e8}.quiz-question{padding:1rem;border-radius:20px;background:#f7f8ff}.quiz-answers{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}.quiz-answers button{padding:1rem;border-radius:16px}.tournament-bracket{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:1rem}.match-card{display:flex;flex-direction:column;gap:.3rem;padding:1rem;border:1px solid #e4e5eb;border-radius:16px}.now-playing{border:1px solid #d9d5ff;background:linear-gradient(135deg,#f8f6ff,#fff)}
@media(max-width:800px){.quiz-shell{display:block}.quiz-shell>.game-chat{margin-top:1rem}.quiz-answers{grid-template-columns:1fr}.game-chat-messages{max-height:180px}}

/* BAPMU v2.3 Games */
.match-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin:1rem 0}.match-buttons button{padding:1rem;border-radius:18px;font-size:1.05rem}.spectator-panel{max-width:950px;margin:1rem auto}.spectator-board{min-height:280px;display:flex;align-items:center;justify-content:center;gap:1rem;padding:1rem;border-radius:20px;background:#f6f7fb}.spectator-board canvas,#drawCanvas{width:100%;max-width:760px;aspect-ratio:760/460;background:#fff;border:2px solid #ddd;border-radius:18px;touch-action:none}.draw-shell{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:1rem}.achievement-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}.achievement-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.35rem;padding:1rem;border:1px solid #e4e5ec;border-radius:18px;background:linear-gradient(180deg,#fffdf2,#fff)}.achievement-card>div{font-size:2.2rem}.winner-banner.static{position:static;transform:none;display:inline-block;margin:1rem 0}.match-card form{display:flex;flex-direction:column;gap:.35rem;margin-top:.5rem}.tournament-bracket{align-items:start}
@media(max-width:820px){.draw-shell{display:block}.draw-shell>.game-chat{margin-top:1rem}.spectator-board{min-height:220px}}

/* BAPMU v2.4 Messenger */
.group-chat-shortcuts{border-bottom:1px solid #ececf1;margin-bottom:.5rem;padding-bottom:.5rem}.group-chat-shell{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:1rem}.group-thread{min-height:55vh;max-height:70vh;overflow-y:auto}.group-bubble strong{display:block;font-size:.78rem;margin-bottom:.2rem}.message-actions{display:flex;gap:.25rem;opacity:.65;margin-top:.25rem}.message-actions button{font-size:.75rem;padding:.2rem .35rem;border:0;border-radius:8px}.message-reactions{display:flex;gap:.25rem;flex-wrap:wrap}.message-reactions span{font-size:.75rem;background:rgba(0,0,0,.07);padding:.15rem .35rem;border-radius:999px}.reply-banner{padding:.45rem .7rem;border-left:3px solid #6757e8;background:#f5f3ff;margin:.4rem 0}.live-badge{display:inline-grid;place-items:center;min-width:18px;height:18px;border-radius:999px;padding:0 4px;background:#d93025;color:#fff;font-size:.7rem;font-weight:800}@media(max-width:800px){.group-chat-shell{display:block}.group-chat-shell>aside{margin-top:1rem}}

/* BAPMU v2.5 Feed 2.0 */
.post-gallery{display:grid;gap:.35rem;margin:.7rem 0;border-radius:18px;overflow:hidden}.post-gallery img,.post-gallery video{width:100%;height:100%;max-height:560px;object-fit:cover;background:#111}.post-gallery.count-2{grid-template-columns:1fr 1fr}.post-gallery.count-3,.post-gallery.count-4{grid-template-columns:1fr 1fr}.post-gallery.count-3>*:first-child{grid-row:span 2}.feed-controls .chip.active{font-weight:800;outline:2px solid currentColor}.feed-reason{opacity:.55}.comment-thread{margin-top:.45rem}.comment-thread.depth-1,.comment-thread.depth-2,.comment-thread.depth-3{margin-left:1.25rem;border-left:2px solid #ececf2;padding-left:.65rem}.comment-card{padding:.55rem .65rem;border-radius:14px;background:#f6f7f9}.comment-main{display:flex;gap:.35rem;flex-wrap:wrap;align-items:baseline}.comment-main strong{margin-right:.25rem}.comment-actions{display:flex;gap:.35rem;align-items:center;margin-top:.25rem}.comment-actions form,.comment-actions details{margin:0}.comment-actions button,.comment-actions summary{font-size:.75rem;border:0;background:transparent;cursor:pointer;padding:.2rem .3rem}.comment-reactions{display:flex;gap:.25rem;margin-top:.25rem}.comment-reactions span{font-size:.72rem;background:#fff;border:1px solid #e2e3e8;border-radius:999px;padding:.12rem .35rem}.reply-form{display:flex;gap:.35rem;margin-top:.35rem}.reply-form input{flex:1}.post-edit-box form{display:flex;flex-direction:column;gap:.4rem;padding:.6rem;border:1px solid #ddd;border-radius:12px;background:#fff}.post-edit-box textarea{min-height:100px}.history-current,.history-version{padding:.8rem;border:1px solid #e4e5eb;border-radius:14px;margin:.6rem 0}.history-version{background:#fafafa}.composer .media-row small{align-self:center;opacity:.65}
@media(max-width:700px){.post-gallery.count-2,.post-gallery.count-3,.post-gallery.count-4{grid-template-columns:1fr 1fr}.post-gallery img,.post-gallery video{max-height:320px}.comment-thread.depth-1,.comment-thread.depth-2,.comment-thread.depth-3{margin-left:.55rem;padding-left:.45rem}}

/* BAPMU v2.6 Communities, Events, Stories & Shorts */
.community-tools{display:grid;gap:.8rem}.community-tool-links,.community-files{display:flex;gap:.5rem;flex-wrap:wrap}.community-files a{padding:.45rem .65rem;border:1px solid #e2e3e9;border-radius:12px}.member-review{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.45rem 0}.member-review strong{margin-right:auto}.event-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:1rem}.event-card{background:#fff;border:1px solid #e3e4e9;border-radius:20px;padding:1rem}.event-date{font-size:1.05rem;font-weight:700}.event-comments{display:flex;flex-direction:column;gap:.35rem;margin:.6rem 0;padding-top:.5rem;border-top:1px solid #eee}.people-mini{display:flex;gap:.5rem;flex-wrap:wrap}.people-mini span{display:flex;align-items:center;gap:.3rem}.story-reel{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}.story-full{flex:0 0 min(390px,88vw);scroll-snap-align:center;background:#111;color:#fff;border-radius:24px;padding:.8rem;min-height:560px;display:flex;flex-direction:column}.story-full .story-media{width:100%;max-height:460px;object-fit:contain;border-radius:18px;background:#000}.story-owner{display:flex;align-items:center;gap:.45rem;margin-bottom:.5rem}.story-owner small{margin-left:auto}.story-reactions,.short-actions{display:flex;gap:.25rem;flex-wrap:wrap}.story-reactions form,.short-actions form{margin:0}.story-reactions button,.short-actions button{border:0;border-radius:999px;padding:.45rem .55rem;font-size:1.1rem}.reaction-summary{display:flex;gap:.35rem;flex-wrap:wrap;margin:.4rem 0}.reaction-summary span{font-size:.78rem;padding:.2rem .4rem;border-radius:999px;background:rgba(127,127,127,.18)}.shorts-page{max-width:900px}.shorts-snap{height:calc(100vh - 150px);overflow-y:auto;scroll-snap-type:y mandatory;border-radius:22px}.short-modern{height:100%;min-height:620px;scroll-snap-align:start;position:relative;background:#090909;border-radius:22px;overflow:hidden;margin-bottom:.5rem}.short-modern>video{width:100%;height:100%;object-fit:contain;background:#000}.short-overlay{position:absolute;left:0;right:0;bottom:0;padding:1rem;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.82))}.short-actions{justify-content:flex-end}@media(max-width:700px){.event-grid{grid-template-columns:1fr}.shorts-snap{height:calc(100vh - 120px)}.short-modern{min-height:560px}}

/* BAPMU v2.7 Search, Notifications, Pages & Creator */
.discovery-hero .search-form{display:grid;grid-template-columns:1fr auto auto;gap:.5rem}.recent-searches,.tag-cloud{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}.recent-searches form{margin:0}.notification-day{display:grid;gap:.45rem;margin:1rem 0}.notification-day h2{font-size:.85rem;opacity:.6}.notification-card{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.75rem;border-radius:16px;text-decoration:none}.notification-card:hover,.notification-card.unread{background:#f4f5f8}.notification-card.unread{font-weight:700}.notification-icon{font-size:1.3rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;background:#fff;border:1px solid #e5e6eb}.page-studio{margin:1rem 0;padding:1rem;border-radius:18px;background:#f7f7fa}.page-feed{display:grid;gap:.7rem;margin-top:1rem}.creator-post-row{display:flex;justify-content:space-between;gap:1rem;padding:.65rem 0;border-bottom:1px solid #eee;text-decoration:none}.analytics-bars{height:180px;display:flex;align-items:flex-end;gap:.25rem;overflow-x:auto;padding-top:1rem}.analytics-day{height:100%;min-width:24px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.2rem}.analytics-day span{display:block;width:14px;min-height:4px;background:currentColor;border-radius:8px 8px 2px 2px}.analytics-day small{font-size:.6rem;writing-mode:vertical-rl}@media(max-width:700px){.discovery-hero .search-form{grid-template-columns:1fr}.creator-post-row{flex-direction:column;gap:.2rem}}

/* BAPMU v2.8 Marketplace, Live & Trust */
.market-search{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}.market-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap;margin-top:.6rem}.market-actions form{margin:0}.live-social{margin-top:.7rem;padding-top:.7rem;border-top:1px solid #e6e6ea}.live-reactions{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}.live-reactions form{margin:0}.live-reactions button{border:0;border-radius:999px;font-size:1.05rem;padding:.35rem .5rem}.live-chat{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:.3rem;padding:.5rem 0}.live-chat div{padding:.35rem .5rem;border-radius:10px;background:#f5f5f7}

/* BAPMU v2.9 Security, Moderation & Jobs */
.session-list{display:grid;gap:.55rem}.session-card,.security-event{display:flex;justify-content:space-between;gap:.8rem;align-items:center;padding:.7rem;border:1px solid #e4e5ea;border-radius:14px}.session-card>div,.security-event{flex-wrap:wrap}.session-card small{display:block}.moderation-case{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,.55fr);gap:1rem;padding:1rem 0;border-bottom:1px solid #e6e6ea}.moderation-case form{display:flex;flex-direction:column;gap:.4rem}@media(max-width:760px){.moderation-case{grid-template-columns:1fr}.session-card{align-items:flex-start}}

/* BAPMU v3.0 Platform foundation */
.mobile-bottom-nav{display:none}.auth-shell{max-width:520px;margin:7vh auto;padding:1rem}.auth-card{display:grid;gap:.8rem}.auth-card form{display:grid;gap:.65rem}
@media(max-width:760px){body{padding-bottom:76px}.mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-top:1px solid #dedfe5;padding:max(.35rem,env(safe-area-inset-bottom)) .25rem .35rem}.mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:.1rem;text-decoration:none;font-size:1.25rem}.mobile-bottom-nav span{font-size:.62rem;font-weight:700}}

/* BAPMU v3.1 3D Avatar Studio */
.avatar-studio{display:grid;grid-template-columns:minmax(320px,1.1fr) minmax(280px,.9fr);gap:1.5rem}.avatar-studio form{display:grid;grid-template-columns:1fr 1fr;gap:.65rem}.avatar-studio form button{grid-column:1/-1}.avatar-stage{height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;perspective:900px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#fff,#e8e9f2);overflow:hidden;touch-action:none}.avatar-figure{--skin:#d9a27e;--hair:#5a3827;--top:#6078df;position:relative;width:180px;height:330px;transform-style:preserve-3d;transition:transform .08s linear}.avatar-head{position:absolute;width:112px;height:132px;left:34px;top:45px;border-radius:48% 48% 44% 44%;background:var(--skin);box-shadow:inset -8px -5px 15px rgba(0,0,0,.08)}.avatar-hair{position:absolute;z-index:2;width:122px;height:75px;left:29px;top:35px;border-radius:60px 60px 25px 25px;background:var(--hair)}.avatar-figure[data-hair="long"] .avatar-hair,.avatar-figure[data-hair="braids"] .avatar-hair{height:150px}.avatar-eye{position:absolute;top:55px;width:9px;height:12px;border-radius:50%;background:#27232a}.avatar-eye.left{left:30px}.avatar-eye.right{right:30px}.avatar-smile{position:absolute;left:45px;top:87px;width:24px;height:10px;border-bottom:3px solid #9b5159;border-radius:50%}.avatar-body{position:absolute;left:38px;top:166px;width:104px;height:105px;border-radius:30px 30px 16px 16px;background:var(--top)}.avatar-legs{position:absolute;left:52px;top:265px;width:76px;height:64px;border-left:26px solid #4c526b;border-right:26px solid #4c526b}.avatar-arm{position:absolute;z-index:3;right:18px;top:175px;width:25px;height:95px;border-radius:20px;background:var(--skin);transform-origin:50% 10%}.avatar-figure.wave .avatar-arm{animation:avatarWave 1s ease-in-out infinite alternate}.avatar-figure.clap .avatar-arm{animation:avatarClap .5s ease-in-out infinite alternate}.avatar-figure.dance{animation:avatarDance .8s ease-in-out infinite alternate}.avatar-figure.heart .avatar-arm{transform:rotate(-55deg)}@keyframes avatarWave{to{transform:rotate(-55deg) translateY(-12px)}}@keyframes avatarClap{to{transform:rotate(45deg) translateX(-35px)}}@keyframes avatarDance{to{transform:rotateY(15deg) rotateZ(4deg) translateY(-8px)}}.profile-avatar-trigger{position:relative;border:0;background:transparent;padding:0;cursor:pointer}.avatar-badge{position:absolute;right:-4px;bottom:2px;background:#20212a;color:#fff;border:2px solid #fff;border-radius:999px;padding:.18rem .35rem;font-size:.65rem;font-weight:800}.avatar-dialog{border:0;border-radius:26px;padding:0;max-width:min(440px,92vw);box-shadow:0 24px 80px rgba(0,0,0,.35)}.avatar-dialog::backdrop{background:rgba(15,16,22,.65);backdrop-filter:blur(6px)}.avatar-dialog .avatar-stage{width:min(420px,90vw);height:560px}.avatar-close{position:absolute;right:12px;top:12px;z-index:10;border:0;border-radius:50%;width:38px;height:38px;font-size:1.5rem}.profile-greeting .avatar-figure{animation-duration:.8s}@media(max-width:760px){.avatar-studio{grid-template-columns:1fr}.avatar-studio form{grid-template-columns:1fr}.avatar-stage{height:430px}}

/* BAPMU v3.2 Rooms & Together */
.rooms-hero{background:linear-gradient(135deg,#fff,#f0efff)}.room-create{display:grid;grid-template-columns:1fr auto auto;gap:.5rem}.room-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.7rem}.room-card{min-height:130px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.35rem;border:1px solid #e1e2e9;border-radius:20px;text-decoration:none;background:#fff}.room-type{font-size:2rem}.room-shell{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:1rem;max-width:1300px}.room-world{min-height:650px;background:radial-gradient(circle at 50% 45%,#fff,#eeeff7)}.avatar-circle{display:flex;justify-content:center;align-items:flex-end;gap:0;flex-wrap:wrap;min-height:380px}.room-avatar{width:150px;height:260px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.room-avatar .avatar-figure{margin:-65px}.room-activities{display:flex;justify-content:center;gap:.5rem;flex-wrap:wrap}.activity{padding:.7rem 1rem;border-radius:999px;border:1px solid #ddd;text-decoration:none;background:#fff}.room-chat{display:flex;flex-direction:column}.room-messages{display:flex;flex-direction:column;gap:.4rem;overflow:auto;max-height:520px;flex:1}.room-messages div{display:flex;flex-direction:column;padding:.5rem;background:#f5f5f8;border-radius:12px}.together-invite{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;padding:.7rem 0;border-bottom:1px solid #eee}.together-invite form{display:flex;gap:.35rem}.live-pill{font-size:.72rem;font-weight:800;padding:.35rem .55rem;border-radius:999px;background:#fff;border:1px solid #ddd}@media(max-width:800px){.room-shell{grid-template-columns:1fr}.room-create{grid-template-columns:1fr}.room-world{min-height:520px}.together-invite{grid-template-columns:auto 1fr}.together-invite form{grid-column:1/-1}}

/* BAPMU v3.3 Together Activities */
.activity-picker{position:relative}.activity-picker form{position:absolute;z-index:20;min-width:300px;padding:.7rem;background:#fff;border:1px solid #ddd;border-radius:16px;box-shadow:0 15px 40px rgba(0,0,0,.15);display:grid;gap:.4rem}.together-stage{min-width:min(520px,100%);padding:1rem 1.2rem;text-align:center;border-radius:22px;background:linear-gradient(135deg,#222536,#4c3c77);color:#fff}.together-stage a{color:inherit}.spatial-talk{margin:1rem auto 0;max-width:650px;display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:.75rem 1rem;background:rgba(255,255,255,.75);border:1px solid #ddd;border-radius:18px}.spatial-talk small{display:block}@media(max-width:760px){.spatial-talk{flex-direction:column;align-items:stretch}.activity-picker form{position:fixed;left:1rem;right:1rem;bottom:90px;min-width:0}}

/* BAPMU v3.4 Avatar interaction & multiplayer */
.room-emote-bar{display:flex;align-items:center;justify-content:center;gap:.35rem;flex-wrap:wrap;margin:1rem 0}.room-emote-bar form{margin:0}.room-emote-bar button{border:1px solid #ddd;background:#fff;border-radius:999px;font-size:1.15rem;padding:.45rem .6rem}.room-game{max-width:650px;margin:1rem auto;padding:1rem;background:rgba(255,255,255,.82);border:1px solid #ddd;border-radius:20px}.scoreboard{display:grid;gap:.35rem}.scoreboard div{display:flex;justify-content:space-between;padding:.45rem .6rem;background:#f3f3f7;border-radius:10px}

/* BAPMU v3.5 Embedded Room Games */
.room-game-picker{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.embedded-game-stage{padding:1rem;border-radius:22px;background:linear-gradient(145deg,#fff,#f5f3ff);border:1px solid #ded9ff;transition:transform .2s ease,box-shadow .2s ease}.embedded-game-stage.game-updated{transform:scale(1.01);box-shadow:0 10px 30px rgba(70,55,160,.16)}.embedded-game-title{font-size:1.35rem;font-weight:850;margin-bottom:.35rem}.embedded-game-actions{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:.7rem}.embedded-game-actions form{margin:0}.room-game .scoreboard div{transition:background .2s ease,transform .2s ease}.room-game .scoreboard div:has(strong){background:#fff}
@media(max-width:700px){.room-game-picker{align-items:stretch;flex-direction:column}.embedded-game-actions{display:grid;grid-template-columns:1fr 1fr}.embedded-game-actions button{width:100%}}

/* BAPMU v4.0 Worlds & Discovery */
.worlds-hero,.discover-hero{background:linear-gradient(135deg,#fff,#eef0ff)}.world-create,.discover-hero form{display:flex;gap:.5rem;flex-wrap:wrap}.world-grid,.discovery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}.world-card,.discovery-card{min-height:170px;padding:1rem;border-radius:22px;text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end}.theme-park{background:linear-gradient(#bce5ff,#b9e6b0)}.theme-space{background:radial-gradient(circle at 30% 20%,#5b5c94,#17192d);color:#fff}.theme-cozy{background:linear-gradient(135deg,#f4d7c1,#f6eadc)}.theme-arcade{background:linear-gradient(135deg,#20194a,#6c2f87);color:#fff}.theme-fantasy{background:linear-gradient(135deg,#b8d9d0,#dcc9ed)}.world-shell{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:1rem;max-width:1500px}.world-canvas{position:relative;min-height:720px;border-radius:28px;overflow:hidden;border:1px solid #ddd}.world-hud{position:absolute;z-index:50;left:1rem;right:1rem;top:1rem;display:flex;justify-content:space-between;pointer-events:none}.world-hud h1{margin:.1rem 0}.world-person{position:absolute;width:100px;height:170px;transform:translate(-50%,-70%);transition:left .35s linear,top .35s linear;z-index:20;text-align:center}.world-person .avatar-figure{transform:scale(.42);transform-origin:top center}.world-person strong{position:absolute;bottom:0;left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(255,255,255,.85);padding:.15rem .4rem;border-radius:999px;font-size:.7rem}.world-person.is-me strong{font-weight:900}.world-object{position:absolute;transform:translate(-50%,-50%);z-index:10;border:0;background:rgba(255,255,255,.85);border-radius:16px;padding:.45rem .65rem;box-shadow:0 6px 20px rgba(0,0,0,.12)}.world-object span{font-size:1.7rem;display:block}.world-builder form{display:grid;gap:.5rem}.discovery-card span{font-size:.75rem;font-weight:850;letter-spacing:.06em}.discovery-card h2{margin:.3rem 0}@media(max-width:900px){.world-shell{grid-template-columns:1fr}.world-canvas{min-height:600px}.world-hud{font-size:.75rem}.world-builder{order:-1}}

/* BAPMU v4.1 Room WebRTC & Watch Together */
.room-call-panel{max-width:760px;margin:1rem auto;padding:1rem;border:1px solid #dfe1e8;border-radius:20px;background:rgba(255,255,255,.88)}.room-call-panel small{display:block;margin-top:.2rem}.room-call-actions{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.7rem}.room-remote-media{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.5rem;margin-top:.7rem}.remote-peer{position:relative;min-height:100px;border-radius:16px;background:#171922;color:#fff;overflow:hidden;display:flex;align-items:flex-end;padding:.5rem}.remote-peer video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}.remote-peer strong,.remote-peer span{position:relative;z-index:2;background:rgba(0,0,0,.45);padding:.2rem .4rem;border-radius:999px}.remote-peer span{margin-left:auto}.watch-player{width:min(760px,100%);max-height:430px;background:#000;border-radius:18px;display:block;margin:.7rem auto}
@media(max-width:700px){.room-call-actions{display:grid;grid-template-columns:1fr 1fr}.room-call-actions button{width:100%}.room-remote-media{grid-template-columns:1fr 1fr}}

/* BAPMU v5.0 Facebook-parity surfaces */
.feature-form{display:grid;gap:.55rem;margin-top:.8rem}.feature-form input,.feature-form textarea,.feature-form select,.market-search input{width:100%}.feature-grid,.market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:.8rem;margin-top:1rem}.feature-card{display:flex;flex-direction:column;gap:.45rem}.feature-card>span{font-size:.78rem;font-weight:850;letter-spacing:.04em}.market-search{display:flex;gap:.5rem;margin:.8rem 0}.market-card{background:#fff;border:1px solid #e1e1e8;border-radius:20px;padding:.8rem}.market-photo{aspect-ratio:4/3;border-radius:15px;background:#f0f1f5;display:grid;place-items:center;font-size:3rem}.reels-page{background:#111;color:#fff}.reels-page header{background:#111}.reel-create{max-width:600px;margin:1rem auto;color:#222}.reel-feed{max-width:520px;margin:auto;display:grid;gap:1rem}.reel{position:relative;background:#000;border-radius:24px;overflow:hidden;min-height:70vh}.reel video{width:100%;height:70vh;object-fit:contain;background:#000}.reel-meta{padding:.8rem}.creator-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}.creator-stats>div{padding:1rem;border-radius:18px;background:#f5f5fa;text-align:center}.creator-stats strong,.creator-stats span{display:block}.creator-stats strong{font-size:1.5rem}.quick-links{display:flex;gap:.6rem;flex-wrap:wrap}.quick-links a{padding:.8rem 1rem;border-radius:14px;background:#f3f3f8;text-decoration:none}@media(max-width:700px){.creator-stats{grid-template-columns:1fr 1fr}.market-search{display:grid}.reel,.reel video{min-height:60vh;height:60vh}}

/* BAPMU v5.1 remaining parity categories */
.dating-deck{max-width:650px;margin:1rem auto;display:grid;gap:1rem}.dating-card{text-align:center}.dating-actions{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.campaign-list{display:grid;gap:.5rem}.campaign-list article{display:flex;justify-content:space-between;gap:1rem;padding:.75rem;border:1px solid #e2e3e8;border-radius:14px}.campaign-list small{display:block}.ai-shell{max-width:900px}.ai-thread{display:flex;flex-direction:column;gap:.65rem;max-height:60vh;overflow:auto;padding:.5rem 0}.ai-message{max-width:85%;padding:.75rem 1rem;border-radius:18px;background:#f1f2f6}.ai-message.role-user{margin-left:auto;background:#e8e5ff}.ai-message p{margin:.3rem 0 0}.ai-compose{display:grid;grid-template-columns:1fr auto;gap:.5rem}.ai-compose textarea{min-height:80px}@media(max-width:700px){.campaign-list article{flex-direction:column}.ai-compose{grid-template-columns:1fr}.dating-actions{grid-template-columns:1fr}}

/* =========================================================
   BAPMU v10 – Social Blue design system
   Familiar social-network clarity, with BAPMU's own identity.
   ========================================================= */
:root{
  --bg:#f0f2f5;
  --card:#ffffff;
  --ink:#1c1e21;
  --muted:#65676b;
  --line:#dddfe2;
  --accent:#1877f2;
  --accent-dark:#166fe5;
  --soft:#e7f3ff;
  --success:#42b72a;
  --danger:#e41e3f;
  --shadow:0 2px 8px rgba(0,0,0,.10);
}
body{background:var(--bg);color:var(--ink)}
header{height:60px;border-bottom:0;box-shadow:0 1px 8px rgba(0,0,0,.10);padding:0 max(16px,calc((100vw - 1180px)/2));}
.brand{color:var(--accent);font-weight:900;letter-spacing:-1.4px}
main{max-width:760px;margin:22px auto}
.panel,.composer,.post,.welcome,.profile-card,.community-card,.market-card{border-color:#e3e6ea;border-radius:12px;box-shadow:var(--shadow)}
button,.button,.family{background:var(--accent);border-radius:8px}
button:hover,.button:hover{background:var(--accent-dark)}
.ghost{background:#e4e6eb;color:#050505}.ghost:hover{background:#d8dadf}
input,textarea,select,.row select,.row input,.row textarea{border-color:#ccd0d5;border-radius:8px}
.pill{background:var(--soft);color:var(--accent);border-radius:999px}
.comment{background:#f0f2f5;border-radius:18px}
.bubble.mine{background:var(--accent)}
.story-card{border-radius:12px;box-shadow:var(--shadow)}
.mobile-bottom{box-shadow:0 -1px 8px rgba(0,0,0,.08)}
.stats-grid .stat-card{border-radius:10px;background:#f7f8fa}
.eyebrow{color:var(--accent)}

/* Animated pre-login landing page */
.landing-auth{
  min-height:100vh;overflow-x:hidden;position:relative;
  background:
    radial-gradient(circle at 8% 18%,rgba(24,119,242,.14),transparent 28%),
    radial-gradient(circle at 92% 82%,rgba(66,183,42,.10),transparent 25%),
    #f0f2f5;
}
.landing-shell{
  min-height:100vh;max-width:1120px;margin:0 auto;padding:70px 28px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:84px;align-items:center;position:relative;z-index:2;
}
.landing-brand{font-size:58px;line-height:.95;margin-bottom:22px;animation:landingIn .75s cubic-bezier(.2,.8,.2,1) both}
.landing-story h1{font-size:45px;line-height:1.05;letter-spacing:-1.6px;margin:0 0 18px;max-width:650px;animation:landingIn .8s .08s cubic-bezier(.2,.8,.2,1) both}
.landing-story>p{font-size:21px;line-height:1.48;color:#4b4f56;max-width:590px;margin:0;animation:landingIn .8s .16s both}
.social-login-card{width:100%;max-width:410px;border-radius:12px;padding:24px;box-shadow:0 12px 35px rgba(0,0,0,.14);animation:loginCardIn .8s .2s cubic-bezier(.2,.8,.2,1) both}
.social-login-card h2{text-align:left;font-size:22px;margin:0 0 18px}
.social-login-card form{margin-top:0}
.social-login-card input{font-size:17px;padding:14px}
.primary-login{font-size:18px;padding:13px}
.forgot-link{display:block;text-align:center;color:var(--accent);font-weight:650;margin:15px 0}
.auth-divider{height:1px;background:#dadde1;margin:20px 0;position:relative}.auth-divider span{display:none}
.create-account{display:block;width:max-content;margin:0 auto;background:var(--success);color:#fff;padding:12px 18px;border-radius:8px;font-weight:800}
.login-security{text-align:center!important;font-size:12px;color:var(--muted);margin:18px 0 0!important}
.landing-demo{height:210px;position:relative;margin-top:35px;max-width:570px}
.demo-card{position:absolute;background:#fff;border-radius:14px;padding:15px 18px;box-shadow:0 10px 28px rgba(0,0,0,.11);min-width:155px;display:grid;gap:4px}
.demo-card span{font-size:12px;color:var(--muted)}.d1{left:15px;top:35px;animation:floatCard 5s ease-in-out infinite}.d2{left:190px;top:95px;animation:floatCard 5.8s .7s ease-in-out infinite}.d3{left:365px;top:20px;animation:floatCard 5.3s 1.2s ease-in-out infinite}
.demo-avatar{position:absolute;width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:25px;box-shadow:0 8px 22px rgba(0,0,0,.12);z-index:2}
.a1{left:120px;top:10px;animation:avatarBounce 4.6s ease-in-out infinite}.a2{left:330px;top:105px;animation:avatarBounce 5s .6s ease-in-out infinite}.a3{left:475px;top:110px;animation:avatarBounce 4.8s 1.1s ease-in-out infinite}
.landing-orb{position:fixed;border-radius:50%;filter:blur(2px);opacity:.5;pointer-events:none}.orb-one{width:360px;height:360px;background:rgba(24,119,242,.10);left:-170px;top:-110px;animation:orbDrift 13s ease-in-out infinite}.orb-two{width:320px;height:320px;background:rgba(66,183,42,.08);right:-120px;bottom:-130px;animation:orbDrift 15s 2s ease-in-out infinite reverse}
.security-icon{font-size:52px;text-align:center;margin-bottom:8px}.security-setup{max-width:500px}
.recovery-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:16px 0}.recovery-grid code{display:block;background:#f0f2f5;padding:10px;border-radius:8px;text-align:center;font-weight:750}
.ai-search-answer{background:var(--soft);border:1px solid #cfe3ff;border-radius:12px;padding:16px}
.control-auth{min-height:100vh;display:grid;place-items:center;max-width:none;padding:20px;background:linear-gradient(145deg,#e7f3ff,#f0f2f5 50%,#f7fbff)}
.control-auth .panel{width:min(480px,100%);padding:28px}

@keyframes landingIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes loginCardIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}
@keyframes floatCard{50%{transform:translateY(-10px) rotate(.5deg)}}
@keyframes avatarBounce{50%{transform:translateY(-12px) scale(1.04)}}
@keyframes orbDrift{50%{transform:translate(35px,25px) scale(1.08)}}

@media(max-width:850px){
  .landing-shell{grid-template-columns:1fr;gap:28px;padding:40px 20px;text-align:center}
  .landing-story h1,.landing-story>p{margin-left:auto;margin-right:auto}
  .landing-login{display:flex;justify-content:center}.landing-demo{display:none}
  .landing-brand{font-size:50px}.landing-story h1{font-size:35px}
}
@media(prefers-reduced-motion:reduce){
  .landing-brand,.landing-story h1,.landing-story>p,.social-login-card,.demo-card,.demo-avatar,.landing-orb{animation:none!important}
}

/* BAPMU v10.1 – full-screen living social sky */
.landing-auth{background:linear-gradient(180deg,#dcecff 0%,#eef5ff 48%,#f0f2f5 100%);isolation:isolate}
.bapmu-sky{position:fixed;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.sky-glow{position:absolute;border-radius:50%;filter:blur(10px);opacity:.55}
.glow-a{width:52vw;height:52vw;left:-18vw;top:-25vw;background:rgba(24,119,242,.22);animation:skyBreath 12s ease-in-out infinite}
.glow-b{width:44vw;height:44vw;right:-16vw;bottom:-23vw;background:rgba(103,157,255,.18);animation:skyBreath 15s 2s ease-in-out infinite reverse}
.sky-cloud{position:absolute;width:240px;height:58px;border-radius:999px;background:rgba(255,255,255,.58);filter:blur(.2px);box-shadow:70px 14px 0 4px rgba(255,255,255,.42),130px -8px 0 -4px rgba(255,255,255,.48)}
.cloud-a{top:13%;left:-320px;animation:cloudTravel 34s linear infinite}
.cloud-b{top:49%;left:-360px;transform:scale(.72);opacity:.62;animation:cloudTravel 43s 8s linear infinite}
.cloud-c{top:76%;left:-300px;transform:scale(.5);opacity:.45;animation:cloudTravel 51s 18s linear infinite}
.sky-bubble,.sky-world{position:absolute;display:grid;place-items:center;background:rgba(255,255,255,.74);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);box-shadow:0 12px 35px rgba(24,70,130,.12);border:1px solid rgba(255,255,255,.75)}
.sky-bubble{width:54px;height:54px;border-radius:18px;font-size:24px}
.sky-world{width:68px;height:68px;border-radius:50%;font-size:29px}
.bubble-a{left:7%;top:69%;animation:skyFloat 7s ease-in-out infinite}
.bubble-b{right:8%;top:18%;animation:skyFloat 8.5s 1s ease-in-out infinite reverse}
.bubble-c{right:20%;bottom:11%;animation:skyFloat 9s 2s ease-in-out infinite}
.world-a{left:24%;top:14%;animation:skyFloatWide 10s ease-in-out infinite}
.world-b{right:34%;top:62%;animation:skyFloatWide 11.5s 1.5s ease-in-out infinite reverse}
.sky-horizon{position:absolute;left:-5%;right:-5%;bottom:-15%;height:38%;border-radius:50% 50% 0 0/35% 35% 0 0;background:linear-gradient(180deg,rgba(255,255,255,.34),rgba(255,255,255,.72));filter:blur(1px)}
.landing-shell{z-index:2}
.social-login-card{background:rgba(255,255,255,.88);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.82)}
.landing-story{filter:drop-shadow(0 1px 0 rgba(255,255,255,.65))}
@keyframes cloudTravel{from{translate:0 0}to{translate:calc(100vw + 720px) 0}}
@keyframes skyBreath{50%{transform:scale(1.1) translate(2vw,1.5vw);opacity:.72}}
@keyframes skyFloat{50%{transform:translateY(-22px) rotate(4deg)}}
@keyframes skyFloatWide{50%{transform:translate(18px,-25px) scale(1.05)}}
@media(max-width:700px){
 .sky-cloud{transform:scale(.62)} .cloud-b{transform:scale(.48)} .cloud-c{transform:scale(.38)}
 .sky-bubble{width:46px;height:46px;font-size:20px}.sky-world{width:56px;height:56px;font-size:24px}
 .bubble-a{left:3%;top:76%}.bubble-b{right:3%;top:9%}.world-a{left:8%;top:29%}.world-b{right:8%;top:68%}
}
@media(prefers-reduced-motion:reduce){
 .sky-glow,.sky-cloud,.sky-bubble,.sky-world{animation:none!important}
}

/* BAPMU v10.16 — professional public landing + legal center */
.landing-shell-pro{max-width:1180px;grid-template-columns:minmax(0,1.2fr) 410px;gap:76px;align-items:center}
.landing-kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;padding:7px 11px;border:1px solid rgba(109,74,255,.18);border-radius:999px;background:rgba(255,255,255,.54);font-size:11px;font-weight:850;letter-spacing:1.25px;color:#5942c8}
.landing-shell-pro .landing-story h1{font-size:54px;line-height:1.01;max-width:720px;letter-spacing:-2.3px}
.landing-lead{font-size:20px!important;max-width:680px!important;color:#3f4450!important}
.landing-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px;max-width:720px}
.landing-principles>div{padding:16px 15px;border:1px solid rgba(75,82,100,.10);border-radius:16px;background:rgba(255,255,255,.50);backdrop-filter:blur(8px)}
.landing-principles strong{display:block;font-size:14px;margin-bottom:5px}.landing-principles span{display:block;font-size:13px;line-height:1.4;color:#5b6070}
.landing-trust{font-size:14px!important;font-weight:700;color:#555b69!important;margin-top:18px!important}
.login-subtitle{text-align:left!important;margin:-10px 0 16px!important;color:var(--muted);font-size:14px}
.public-footer{position:relative;z-index:3;border-top:1px solid rgba(70,78,96,.12);background:rgba(255,255,255,.78);backdrop-filter:blur(16px)}
.public-footer-inner{max-width:1180px;margin:auto;padding:30px 22px 34px}.footer-brand{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}.footer-brand strong{font-size:25px;color:var(--accent);letter-spacing:-1px}.footer-brand span{font-size:13px;color:var(--muted)}
.footer-links{display:flex;gap:9px 18px;flex-wrap:wrap;font-size:13px}.footer-links a:hover{text-decoration:underline}.footer-meta{margin-top:18px;font-size:12px;color:var(--muted)}
.public-header{position:relative;max-width:none;padding:0 max(22px,calc((100vw - 1180px)/2));}.public-header-actions{display:flex;align-items:center;gap:14px;font-size:14px}.public-header-actions .button{padding:9px 14px}
.legal-body{background:linear-gradient(180deg,#f7f9ff,#f4f5f8 40%,#fff)}.legal-shell{max-width:850px;margin:46px auto 70px;padding:0 22px}.legal-back{display:inline-block;margin-bottom:32px;color:#565d6d;font-size:14px}.legal-shell h1{font-size:48px;line-height:1.04;letter-spacing:-1.8px;margin:9px 0 15px}.legal-lead{font-size:20px;line-height:1.55;color:#4e5565;max-width:760px}.legal-updated{font-size:13px;color:var(--muted);margin:14px 0 34px}.legal-section{padding:24px 0;border-top:1px solid #e2e5ec}.legal-section h2{font-size:22px;margin:0 0 12px}.legal-section p,.legal-section li{font-size:16px;line-height:1.7;color:#303644}.legal-section ul{padding-left:23px;margin:0}.legal-section li+li{margin-top:7px}
.legal-consent{grid-template-columns:auto 1fr;align-items:start;font-size:13px;font-weight:500;line-height:1.45}.legal-consent input{width:18px;height:18px;margin:1px 0 0;padding:0}.legal-consent a{color:var(--accent);text-decoration:underline}
.auth+.public-footer{width:100%}
@media(max-width:900px){.landing-shell-pro{grid-template-columns:1fr;gap:30px}.landing-shell-pro .landing-story h1{font-size:41px}.landing-principles{grid-template-columns:1fr}.public-footer-inner{padding-left:20px;padding-right:20px}.footer-brand{align-items:flex-start;flex-direction:column;gap:3px}.legal-shell h1{font-size:38px}}
body.auth .public-footer{width:100vw;align-self:end}


/* BAPMU v10.17 — refined professional landing */
body.landing-auth{min-height:100vh;background:#f5f8fc;color:#18202c;overflow-x:hidden;padding:0}
body.landing-auth .bapmu-sky{background:linear-gradient(135deg,#eef5ff 0%,#f8fbff 52%,#eef4fb 100%)}
body.landing-auth .sky-glow{opacity:.38;filter:blur(50px)}
body.landing-auth .glow-a{background:#b8d8ff}.landing-auth .glow-b{background:#d6e5ff}
body.landing-auth .sky-cloud{opacity:.22}
body.landing-auth .sky-horizon{opacity:.45}
.landing-shell-pro{width:min(1180px,calc(100% - 48px));max-width:1180px;min-height:calc(100vh - 126px);margin:0 auto;padding:64px 0 48px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:96px;align-items:center}
.landing-story{filter:none;max-width:690px}
.landing-brand{font-size:64px;line-height:.9;margin:0 0 30px;color:#1877f2;letter-spacing:-4px}
.landing-kicker{display:block;margin:0 0 12px;padding:0;border:0;background:none;color:#667085;font-size:12px;font-weight:800;letter-spacing:1.8px}
.landing-shell-pro .landing-story h1{margin:0 0 22px;font-size:58px;line-height:1.02;letter-spacing:-2.8px;color:#101828;max-width:680px}
.landing-lead{margin:0!important;max-width:650px!important;font-size:20px!important;line-height:1.58!important;color:#475467!important}
.landing-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:34px 0 0;max-width:690px}
.landing-points>div{display:flex;align-items:flex-start;gap:11px;min-width:0}
.point-mark{width:9px;height:9px;margin-top:6px;flex:0 0 auto;border-radius:50%;background:#1877f2;box-shadow:0 0 0 5px rgba(24,119,242,.10)}
.landing-points p{margin:0;min-width:0}.landing-points strong{display:block;font-size:14px;line-height:1.25;color:#1d2939}.landing-points small{display:block;margin-top:5px;font-size:13px;line-height:1.45;color:#667085}
.landing-trust{margin:28px 0 0!important;font-size:14px!important;font-weight:650!important;color:#667085!important}
.landing-login{display:flex;justify-content:flex-end}
.social-login-card{width:100%;max-width:440px;padding:34px 32px 30px;border:1px solid #e4e7ec;border-radius:18px;background:rgba(255,255,255,.96);box-shadow:0 20px 60px rgba(16,24,40,.10);backdrop-filter:blur(18px)}
.social-login-card h2{margin:0 0 7px;text-align:left;font-size:25px;letter-spacing:-.5px;color:#101828}.login-subtitle{text-align:left!important;margin:0 0 25px!important;color:#667085!important;font-size:14px!important}
.social-login-card form{gap:16px}.social-login-card label{gap:8px;font-size:14px;color:#344054}.social-login-card input{height:50px;padding:12px 14px;border:1px solid #d0d5dd;border-radius:10px;background:#fff;font-size:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}.social-login-card input:focus{outline:3px solid rgba(24,119,242,.12);border-color:#1877f2}
.primary-login{height:50px;border-radius:10px;font-size:16px}.forgot-link{margin:17px 0;color:#1877f2;font-size:14px}.auth-divider{margin:23px 0;background:#eaecf0}.create-account{padding:12px 19px;border-radius:10px;background:#2ea92b;font-size:14px}.login-security{margin:22px 0 0!important;font-size:11px!important;color:#98a2b3!important}
.public-footer{position:relative;z-index:3;width:100%;border-top:1px solid #e4e7ec;background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}
.public-footer-inner{width:min(1180px,calc(100% - 48px));max-width:1180px;margin:0 auto;padding:23px 0 25px}.footer-brand{display:flex;align-items:center;gap:12px;margin:0 0 13px}.footer-brand strong{font-size:18px;color:#1877f2;letter-spacing:-.6px}.footer-brand span{font-size:12px;color:#98a2b3}.footer-links{display:flex;gap:8px 22px;flex-wrap:wrap;font-size:12px;color:#667085}.footer-links a{transition:color .15s ease}.footer-links a:hover{color:#1877f2;text-decoration:none}.footer-meta{margin-top:12px;font-size:11px;color:#98a2b3}
@media(max-width:960px){.landing-shell-pro{grid-template-columns:1fr;gap:38px;min-height:auto;padding:46px 0}.landing-story{max-width:760px;margin:auto;text-align:center}.landing-login{justify-content:center}.landing-shell-pro .landing-story h1{font-size:48px;margin-left:auto;margin-right:auto}.landing-lead{margin-left:auto!important;margin-right:auto!important}.landing-points{margin-left:auto;margin-right:auto;text-align:left}.landing-brand{font-size:56px}.public-footer-inner{text-align:center}.footer-brand,.footer-links{justify-content:center}}
@media(max-width:640px){.landing-shell-pro{width:min(100% - 32px,1180px);padding:34px 0}.landing-shell-pro .landing-story h1{font-size:39px;letter-spacing:-1.8px}.landing-lead{font-size:17px!important}.landing-points{grid-template-columns:1fr;gap:15px;max-width:390px}.social-login-card{padding:27px 20px 24px;border-radius:16px}.public-footer-inner{width:min(100% - 32px,1180px)}.footer-brand{flex-direction:column;gap:2px}.footer-links{gap:9px 16px}}


/* BAPMU v10.23 — animated social world, CSS-only.
   No changes to login PHP logic or HTML structure. */
.landing-brand{text-transform:uppercase;font-weight:800;letter-spacing:-3.2px}
body.landing-auth .bapmu-sky{overflow:hidden;isolation:isolate}

/* The floating BAPMU social symbols are created entirely in CSS. */
body.landing-auth .bapmu-sky::before{
  content:"💬";
  position:absolute;
  left:8%;
  top:16%;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 55px rgba(24,119,242,.14);
  backdrop-filter:blur(14px);
  font-size:38px;
  z-index:1;
  animation:bapmuChatFloat 7s ease-in-out infinite;
}

body.landing-auth .bapmu-sky::after{
  content:"❤️";
  position:absolute;
  right:12%;
  top:13%;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:rgba(255,255,255,.68);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 18px 55px rgba(24,119,242,.12);
  backdrop-filter:blur(14px);
  font-size:31px;
  z-index:1;
  animation:bapmuHeartFloat 8.5s ease-in-out infinite;
}

/* Reuse the three existing cloud elements as animated social/game symbols. */
body.landing-auth .sky-cloud{
  width:76px!important;
  height:76px!important;
  min-width:76px;
  min-height:76px;
  display:grid!important;
  place-items:center;
  border-radius:24px!important;
  background:rgba(255,255,255,.67)!important;
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 18px 50px rgba(24,119,242,.11)!important;
  backdrop-filter:blur(13px);
  opacity:.88!important;
  filter:none!important;
  z-index:1;
  color:transparent;
  overflow:visible;
}

body.landing-auth .sky-cloud::before{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:initial;
  font-size:34px;
}

body.landing-auth .cloud-a{
  left:4%!important;
  top:auto!important;
  bottom:15%!important;
  animation:bapmuGameFloat 9s ease-in-out infinite!important;
}
body.landing-auth .cloud-a::before{content:"🎮"}

body.landing-auth .cloud-b{
  left:45%!important;
  right:auto!important;
  top:12%!important;
  width:62px!important;
  height:62px!important;
  min-width:62px;
  min-height:62px;
  border-radius:20px!important;
  animation:bapmuSmileFloat 10s ease-in-out infinite!important;
}
body.landing-auth .cloud-b::before{content:"😊";font-size:29px}

body.landing-auth .cloud-c{
  right:5%!important;
  left:auto!important;
  top:auto!important;
  bottom:18%!important;
  width:70px!important;
  height:70px!important;
  min-width:70px;
  min-height:70px;
  border-radius:22px!important;
  animation:bapmuWorldFloat 11s ease-in-out infinite!important;
}
body.landing-auth .cloud-c::before{content:"🌎";font-size:32px}

/* Existing glows move visibly behind the content. */
body.landing-auth .sky-glow{
  opacity:.52!important;
  filter:blur(42px)!important;
  animation:bapmuGlowTravel 12s ease-in-out infinite alternate!important;
}
body.landing-auth .glow-b{animation-duration:17s!important;animation-delay:-6s!important}
body.landing-auth .sky-horizon{animation:bapmuHorizon 10s ease-in-out infinite alternate!important}

@keyframes bapmuChatFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(38px,-24px,0) rotate(5deg)}
}
@keyframes bapmuHeartFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(4deg) scale(1)}
  50%{transform:translate3d(-30px,28px,0) rotate(-5deg) scale(1.08)}
}
@keyframes bapmuGameFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-5deg)}
  50%{transform:translate3d(42px,-34px,0) rotate(6deg)}
}
@keyframes bapmuSmileFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(5deg)}
  50%{transform:translate3d(-36px,30px,0) rotate(-7deg)}
}
@keyframes bapmuWorldFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  50%{transform:translate3d(-45px,-32px,0) rotate(6deg)}
}
@keyframes bapmuGlowTravel{
  from{transform:translate3d(-6%,4%,0) scale(.96)}
  to{transform:translate3d(10%,-8%,0) scale(1.18)}
}
@keyframes bapmuHorizon{
  from{transform:translateY(5px) scaleX(.98);opacity:.34}
  to{transform:translateY(-8px) scaleX(1.06);opacity:.60}
}

@media(max-width:800px){
  body.landing-auth .bapmu-sky::before{left:2%;top:8%;transform:scale(.78)}
  body.landing-auth .bapmu-sky::after{right:3%;top:8%;transform:scale(.78)}
  body.landing-auth .cloud-a{left:2%!important;bottom:8%!important}
  body.landing-auth .cloud-b{left:76%!important;top:36%!important}
  body.landing-auth .cloud-c{right:2%!important;bottom:8%!important}
}
@media(prefers-reduced-motion:reduce){
  body.landing-auth .bapmu-sky::before,
  body.landing-auth .bapmu-sky::after,
  body.landing-auth .sky-cloud,
  body.landing-auth .sky-glow,
  body.landing-auth .sky-horizon{animation:none!important}
}


/* ==========================================================
   BAPMU v10.25 — Unified Legal & Policy Experience
   One header, one content system and one footer across all
   public policy, privacy and safety pages.
   ========================================================== */

body.legal-body{
  min-height:100vh;
  margin:0;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at 8% 3%,rgba(24,119,242,.08),transparent 27rem),
    linear-gradient(180deg,#f8fbff 0,#f5f8fc 280px,#fff 720px);
  color:#182230;
}

.legal-public-header{
  position:relative;
  z-index:20;
  width:100%;
  border-bottom:1px solid #e4e7ec;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(18px);
}

.legal-header-inner{
  width:min(1180px,calc(100% - 48px));
  min-height:72px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.legal-logo{
  color:#1877f2;
  font-size:28px;
  line-height:1;
  font-weight:800;
  letter-spacing:-1.7px;
  text-decoration:none;
}

.legal-header-nav{
  display:flex;
  align-items:center;
  gap:10px;
}

.legal-login-link,
.legal-create-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px;
  border-radius:9px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
}

.legal-login-link{
  color:#344054;
}

.legal-login-link:hover{
  background:#f2f4f7;
  text-decoration:none;
}

.legal-create-link{
  color:#fff;
  background:#1877f2;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
}

.legal-create-link:hover{
  background:#166fe5;
  text-decoration:none;
}

.legal-page{
  flex:1;
  width:min(900px,calc(100% - 48px));
  margin:0 auto;
  padding:58px 0 84px;
}

.legal-hero{
  padding-bottom:38px;
}

.legal-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 0 36px;
  color:#667085;
  font-size:14px;
  font-weight:650;
  text-decoration:none;
}

.legal-back:hover{
  color:#1877f2;
  text-decoration:none;
}

.legal-label{
  margin:0 0 14px;
  color:#1877f2;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.5px;
  text-transform:uppercase;
}

.legal-page h1{
  max-width:820px;
  margin:0;
  color:#101828;
  font-size:52px;
  line-height:1.04;
  font-weight:780;
  letter-spacing:-2.6px;
}

.legal-lead{
  max-width:780px;
  margin:20px 0 0;
  color:#475467;
  font-size:20px;
  line-height:1.62;
}

.legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:21px;
  color:#98a2b3;
  font-size:12px;
  font-weight:550;
}

.legal-content{
  overflow:hidden;
  border:1px solid #e4e7ec;
  border-radius:18px;
  background:#fff;
  box-shadow:0 12px 38px rgba(16,24,40,.055);
}

.legal-section{
  margin:0;
  padding:30px 34px 32px;
  border:0;
  border-top:1px solid #eaecf0;
}

.legal-section:first-child{
  border-top:0;
}

.legal-section h2{
  margin:0 0 14px;
  color:#101828;
  font-size:21px;
  line-height:1.35;
  font-weight:750;
  letter-spacing:-.35px;
}

.legal-section p{
  margin:0;
  color:#475467;
  font-size:15.5px;
  line-height:1.78;
}

.legal-section p+p{
  margin-top:14px;
}

.legal-section ul{
  margin:0;
  padding:0;
  list-style:none;
}

.legal-section li{
  position:relative;
  margin:0;
  padding:0 0 0 24px;
  color:#475467;
  font-size:15.5px;
  line-height:1.72;
}

.legal-section li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1877f2;
  box-shadow:0 0 0 4px rgba(24,119,242,.09);
}

.legal-section li+li{
  margin-top:12px;
}

/* The exact same footer system used on the landing page. */
body.legal-body .public-footer{
  position:relative;
  z-index:3;
  width:100%;
  margin-top:auto;
  border-top:1px solid #e4e7ec;
  background:#fff;
  backdrop-filter:none;
}

body.legal-body .public-footer-inner{
  width:min(1180px,calc(100% - 48px));
  max-width:1180px;
  margin:0 auto;
  padding:25px 0 28px;
}

body.legal-body .footer-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 14px;
}

body.legal-body .footer-brand strong{
  color:#1877f2;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.75px;
}

body.legal-body .footer-brand span{
  color:#98a2b3;
  font-size:12px;
}

body.legal-body .footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:9px 22px;
  color:#667085;
  font-size:12px;
}

body.legal-body .footer-links a{
  color:inherit;
  text-decoration:none;
}

body.legal-body .footer-links a:hover{
  color:#1877f2;
  text-decoration:none;
}

body.legal-body .footer-meta{
  margin-top:13px;
  color:#98a2b3;
  font-size:11px;
}

@media(max-width:700px){
  .legal-header-inner{
    width:min(100% - 32px,1180px);
    min-height:64px;
  }

  .legal-logo{
    font-size:24px;
  }

  .legal-create-link{
    padding:0 12px;
  }

  .legal-page{
    width:min(100% - 32px,900px);
    padding:38px 0 58px;
  }

  .legal-back{
    margin-bottom:28px;
  }

  .legal-page h1{
    font-size:38px;
    letter-spacing:-1.7px;
  }

  .legal-lead{
    font-size:17px;
    line-height:1.58;
  }

  .legal-content{
    border-radius:14px;
  }

  .legal-section{
    padding:24px 21px 26px;
  }

  body.legal-body .public-footer-inner{
    width:min(100% - 32px,1180px);
    text-align:center;
  }

  body.legal-body .footer-brand{
    flex-direction:column;
    justify-content:center;
    gap:3px;
  }

  body.legal-body .footer-links{
    justify-content:center;
    gap:10px 16px;
  }
}


/* ==========================================================
   BAPMU v10.26 — Immersive Public Experience
   Login + Register + shared public visual system
   ========================================================== */

:root{
  --bapmu-blue:#2f7df4;
  --bapmu-blue-2:#4d8dff;
  --ink:#f7faff;
  --muted:#c3cee1;
  --panel:rgba(10,28,82,.58);
  --panel-border:rgba(255,255,255,.28);
  --field:rgba(14,40,102,.42);
}

body.public-auth{
  min-height:100vh;
  margin:0;
  color:var(--ink);
  background:
    radial-gradient(circle at 50% 110%,rgba(117,74,255,.35),transparent 34%),
    linear-gradient(180deg,#06113d 0%,#071b61 44%,#0b2575 72%,#131455 100%);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

.public-sky{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
  background:
    radial-gradient(circle at 14% 30%,rgba(34,155,255,.14),transparent 18%),
    radial-gradient(circle at 82% 24%,rgba(94,70,255,.16),transparent 20%);
}

.public-sky::before,
.public-sky::after{
  content:"";
  position:absolute;
  width:46vw;
  height:22vw;
  min-width:420px;
  min-height:180px;
  border-radius:50%;
  filter:blur(42px);
  opacity:.28;
  background:linear-gradient(90deg,rgba(183,93,255,.38),rgba(75,145,255,.18));
  bottom:-6%;
  left:-8%;
  animation:cloudBreathe 13s ease-in-out infinite alternate;
}

.public-sky::after{
  left:auto;
  right:-10%;
  bottom:4%;
  opacity:.22;
  animation-delay:-6s;
}

.public-glow{
  position:absolute;
  border-radius:50%;
  filter:blur(50px);
  width:420px;
  height:420px;
  background:rgba(45,128,255,.25);
  animation:glowTravel 15s ease-in-out infinite alternate;
}
.public-glow.glow-a{left:-8%;top:10%}
.public-glow.glow-b{right:-8%;top:12%;animation-delay:-7s}

.public-horizon{
  position:absolute;
  left:-10%;
  right:-10%;
  bottom:-6%;
  height:30%;
  background:linear-gradient(180deg,transparent,rgba(79,80,255,.16),rgba(145,72,255,.23));
  transform:perspective(500px) rotateX(68deg);
  transform-origin:bottom;
  animation:horizonPulse 12s ease-in-out infinite alternate;
}

.public-cloud{
  position:absolute;
  width:260px;
  height:70px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  filter:blur(1px);
  opacity:.32;
  animation:cloudDrift 24s ease-in-out infinite alternate;
}
.public-cloud.cloud-a{left:-60px;top:24%}
.public-cloud.cloud-b{right:4%;top:16%;animation-delay:-9s}
.public-cloud.cloud-c{left:36%;bottom:9%;animation-delay:-15s}

.float-icon{
  position:absolute;
  display:grid;
  place-items:center;
  width:76px;
  height:76px;
  border-radius:24px;
  background:linear-gradient(145deg,rgba(31,98,255,.30),rgba(83,42,196,.20));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 18px 55px rgba(0,16,70,.34), inset 0 1px 0 rgba(255,255,255,.18);
  backdrop-filter:blur(14px);
  font-size:34px;
  animation:floatCard 8s ease-in-out infinite;
}
.icon-chat{left:5%;top:17%}
.icon-heart{right:7%;top:18%;animation-delay:-2s}
.icon-game{left:4%;bottom:18%;animation-delay:-5s}
.icon-smile{right:5%;top:48%;animation-delay:-3s}
.icon-world{right:8%;bottom:12%;animation-delay:-7s}

.public-topbar{
  position:relative;
  z-index:4;
}
.public-topbar-inner{
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.public-wordmark{
  color:#4e91ff;
  font-size:27px;
  font-weight:900;
  letter-spacing:-1.7px;
  text-decoration:none;
}
.public-topbar nav{display:flex;gap:20px}
.public-topbar nav a{
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:650;
  text-decoration:none;
}
.public-topbar nav a:hover{color:#fff}

.public-auth-shell{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 48px));
  min-height:calc(100vh - 180px);
  margin:0 auto;
  padding:44px 0 74px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 440px;
  gap:90px;
  align-items:center;
}

.public-story{max-width:680px}
.public-eyebrow{
  display:block;
  margin-bottom:14px;
  color:#78a8ff;
  font-size:12px;
  letter-spacing:1.7px;
  font-weight:800;
}
.public-story h1{
  margin:0;
  font-size:61px;
  line-height:1.01;
  letter-spacing:-3px;
  color:#fff;
}
.public-lead{
  max-width:650px;
  margin:24px 0 0;
  color:#cbd6ea;
  font-size:20px;
  line-height:1.62;
}
.public-value-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:36px;
}
.public-value-grid article{
  padding:18px 17px 17px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:15px;
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(10px);
}
.public-value-grid article>span{
  color:#6ea5ff;
  font-size:11px;
  font-weight:800;
}
.public-value-grid h3{
  margin:7px 0 6px;
  font-size:15px;
}
.public-value-grid p{
  margin:0;
  color:#aab7cf;
  font-size:12px;
  line-height:1.48;
}

.glass-panel{
  border:1px solid var(--panel-border);
  background:linear-gradient(180deg,rgba(12,31,87,.69),rgba(8,29,78,.62));
  box-shadow:0 26px 90px rgba(0,5,40,.40), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px);
}

.auth-panel{
  width:100%;
  padding:34px 32px 31px;
  border-radius:24px;
}
.panel-brand{
  color:#4d8dff;
  text-align:center;
  font-size:25px;
  font-weight:900;
  letter-spacing:-1.2px;
  margin-bottom:18px;
}
.auth-panel h2,
.register-panel h1{
  margin:0;
  color:#fff;
  font-size:30px;
  line-height:1.15;
  letter-spacing:-.7px;
}
.auth-panel h2{text-align:center}
.panel-subtitle{
  margin:9px 0 25px;
  color:#c1cbe0;
  text-align:center;
  font-size:14px;
  line-height:1.55;
}

.auth-form{display:grid;gap:16px}
.auth-form label>span,
.field-label{
  display:block;
  margin-bottom:8px;
  color:#eef3ff;
  font-size:13px;
  font-weight:700;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="date"]{
  width:100%;
  height:50px;
  box-sizing:border-box;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.27);
  border-radius:10px;
  background:var(--field);
  color:#fff;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.auth-form input::placeholder{color:#a8b7d2}
.auth-form input:focus{
  border-color:#5a95ff;
  box-shadow:0 0 0 3px rgba(69,137,255,.14);
}
.auth-form input[type="date"]{color-scheme:dark}

.primary-action,
.secondary-action{
  min-height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:11px;
  font-weight:800;
  font-size:15px;
  text-decoration:none;
  cursor:pointer;
}
.primary-action{
  color:#fff;
  background:linear-gradient(180deg,#2d83ff,#1768eb);
  box-shadow:0 12px 30px rgba(22,91,220,.28);
}
.primary-action:hover{filter:brightness(1.06)}
.secondary-action{
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.18);
}
.centered-link{
  display:block;
  margin:17px 0;
  text-align:center;
  color:#6ea5ff;
}
.split-line{
  display:flex;
  align-items:center;
  gap:12px;
  margin:20px 0;
  color:#8797b7;
  font-size:11px;
}
.split-line::before,.split-line::after{content:"";height:1px;flex:1;background:rgba(255,255,255,.12)}
.security-note{
  margin:20px 0 0;
  color:#93a0bb;
  text-align:center;
  font-size:11px;
}

.register-shell{
  position:relative;
  z-index:2;
  width:min(760px,calc(100% - 32px));
  margin:0 auto;
  padding:38px 0 70px;
}
.register-panel{
  padding:38px 38px 34px;
  border-radius:28px;
}
.register-panel .panel-brand{
  font-size:38px;
  margin-bottom:28px;
}
.register-panel h1{
  text-align:center;
  font-size:38px;
}
.register-panel .public-eyebrow{text-align:center;margin-bottom:10px}
.register-panel .panel-subtitle{
  max-width:520px;
  margin:16px auto 30px;
  font-size:15px;
}

.register-form{
  gap:17px;
}
.upload-group{
  padding:17px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  background:rgba(255,255,255,.035);
}
.upload-group input[type="file"]{
  width:100%;
  color:#d4def0;
}
.upload-group input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.field-help{
  margin:12px 0 0;
  color:#aab7cf;
  font-size:12px;
  line-height:1.55;
}
.consent-row{
  display:grid!important;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:start;
  color:#d4def0;
  font-size:13px;
  line-height:1.5;
}
.consent-row input{margin-top:3px}
.consent-row a{color:#67a3ff}
.auth-switch{
  margin:24px 0 0;
  text-align:center;
  color:#9eacc5;
  font-size:13px;
}
.auth-switch a{color:#70a7ff}

body.public-auth .public-footer{
  position:relative;
  z-index:3;
  margin-top:0;
  border-top:1px solid rgba(255,255,255,.14);
  background:rgba(3,18,64,.82);
  backdrop-filter:blur(20px);
}
body.public-auth .public-footer-inner{
  width:min(1180px,calc(100% - 48px));
  max-width:1180px;
  margin:0 auto;
  padding:30px 0 32px;
}
body.public-auth .footer-brand strong{color:#4e91ff}
body.public-auth .footer-brand span,
body.public-auth .footer-links,
body.public-auth .footer-meta{color:#9ba9c4}
body.public-auth .footer-links a{color:#bac5d9}
body.public-auth .footer-links a:hover{color:#fff}

@keyframes floatCard{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  50%{transform:translate3d(24px,-22px,0) rotate(5deg)}
}
@keyframes glowTravel{
  from{transform:translate3d(-5%,3%,0) scale(.95)}
  to{transform:translate3d(9%,-6%,0) scale(1.16)}
}
@keyframes cloudDrift{
  from{transform:translateX(-24px)}
  to{transform:translateX(72px)}
}
@keyframes cloudBreathe{
  from{transform:scale(.95) translateY(0)}
  to{transform:scale(1.1) translateY(-18px)}
}
@keyframes horizonPulse{
  from{opacity:.45}
  to{opacity:.75}
}

@media(max-width:980px){
  .public-auth-shell{
    grid-template-columns:1fr;
    gap:42px;
    padding-top:26px;
  }
  .public-story{text-align:center;margin:auto}
  .public-story h1{font-size:49px}
  .public-lead{margin-left:auto;margin-right:auto}
  .public-value-grid{text-align:left}
  .auth-panel{max-width:470px;margin:auto}
}
@media(max-width:680px){
  .public-topbar nav{display:none}
  .public-auth-shell{width:min(100% - 28px,1180px)}
  .public-story h1{font-size:39px;letter-spacing:-1.9px}
  .public-lead{font-size:17px}
  .public-value-grid{grid-template-columns:1fr}
  .auth-panel{padding:27px 20px}
  .register-panel{padding:28px 20px}
  .register-panel .panel-brand{font-size:32px}
  .register-panel h1{font-size:31px}
  .float-icon{transform:scale(.74)}
  .icon-chat{left:-12px}
  .icon-heart{right:-14px}
  .icon-game{left:-20px}
  .icon-world{right:-18px}
}
@media(prefers-reduced-motion:reduce){
  .float-icon,.public-glow,.public-cloud,.public-horizon,.public-sky::before,.public-sky::after{animation:none!important}
}


/* ==========================================================
   BAPMU v10.27 — Mockup matched public experience
   ========================================================== */

body.mockup-public-page{
  min-height:100vh;
  margin:0;
  color:#fff;
  background:
    radial-gradient(circle at 50% 105%,rgba(105,64,255,.38),transparent 36%),
    linear-gradient(180deg,#050d2d 0%,#061a58 48%,#0b2578 76%,#13154d 100%);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}

.cosmic-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:0;
}

.cosmic-stars{
  position:absolute;
  inset:0;
  opacity:.75;
  background-image:
    radial-gradient(circle at 12% 18%,rgba(255,255,255,.9) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 8%,rgba(127,156,255,.9) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 67% 32%,rgba(137,128,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 30% 55%,rgba(255,255,255,.75) 0 1px,transparent 2px),
    radial-gradient(circle at 92% 61%,rgba(255,255,255,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 18% 74%,rgba(160,150,255,.8) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 54% 82%,rgba(255,255,255,.65) 0 1px,transparent 2px);
  animation:starTwinkle 6s ease-in-out infinite alternate;
}

.cosmic-glow{
  position:absolute;
  width:520px;
  height:520px;
  border-radius:50%;
  filter:blur(70px);
  opacity:.28;
  background:rgba(45,118,255,.55);
  animation:cosmicGlow 15s ease-in-out infinite alternate;
}
.glow-left{left:-190px;top:16%}
.glow-right{right:-220px;top:10%;animation-delay:-7s;background:rgba(94,58,255,.5)}

.cosmic-cloud{
  position:absolute;
  width:52vw;
  min-width:620px;
  height:290px;
  border-radius:50%;
  filter:blur(26px);
  opacity:.32;
  background:
    radial-gradient(ellipse at 28% 56%,rgba(184,102,255,.55),transparent 42%),
    radial-gradient(ellipse at 62% 44%,rgba(86,134,255,.45),transparent 44%);
  bottom:-60px;
  animation:cosmicCloud 16s ease-in-out infinite alternate;
}
.cloud-left{left:-15%}
.cloud-right{right:-18%;animation-delay:-8s;transform:scaleX(-1)}

.floating-card{
  position:absolute;
  width:92px;
  height:92px;
  display:grid;
  place-items:center;
  border-radius:27px;
  font-size:42px;
  background:linear-gradient(145deg,rgba(48,102,255,.25),rgba(80,31,185,.20));
  border:1px solid rgba(111,151,255,.48);
  box-shadow:
    0 22px 70px rgba(0,18,90,.42),
    inset 0 1px 0 rgba(255,255,255,.20),
    0 0 40px rgba(55,114,255,.14);
  backdrop-filter:blur(18px);
  animation:iconFloat 8s ease-in-out infinite;
}
.fc-chat{left:6%;top:12%}
.fc-heart{right:7%;top:15%;animation-delay:-1.5s}
.fc-game{left:5%;top:53%;animation-delay:-4s}
.fc-smile{right:5%;top:43%;animation-delay:-2.5s}
.fc-world{right:8%;top:65%;animation-delay:-6s}

.mockup-main{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 48px));
  margin:0 auto;
}

.register-main{
  min-height:calc(100vh - 100px);
  padding:56px 0 70px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.login-main{
  min-height:calc(100vh - 100px);
  padding:80px 0 90px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 540px;
  gap:100px;
  align-items:center;
}

.brand-intro{
  max-width:660px;
}
.brand-overline{
  display:block;
  color:#6da0ff;
  margin-bottom:15px;
  font-size:12px;
  font-weight:800;
  letter-spacing:1.8px;
}
.brand-intro h1{
  margin:0;
  color:#fff;
  font-size:66px;
  line-height:1.02;
  letter-spacing:-3.4px;
  text-shadow:0 8px 30px rgba(0,0,0,.24);
}
.brand-intro p{
  margin:24px 0 0;
  max-width:620px;
  color:#c6d1e5;
  font-size:20px;
  line-height:1.62;
}

.mockup-card{
  border:1px solid rgba(134,162,255,.52);
  background:
    linear-gradient(180deg,rgba(17,36,101,.77),rgba(7,27,78,.68));
  box-shadow:
    0 30px 100px rgba(0,8,55,.46),
    inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(24px);
}

.register-card{
  width:min(540px,100%);
  padding:40px 40px 34px;
  border-radius:30px;
}

.login-card{
  width:100%;
  box-sizing:border-box;
  padding:38px 34px 32px;
  border-radius:28px;
}

.mockup-logo{
  margin-bottom:18px;
  color:#3184ff;
  text-align:center;
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.5px;
}
.mockup-logo.large{
  margin-bottom:34px;
  font-size:50px;
  letter-spacing:-2.4px;
}

.mockup-card h1,
.mockup-card h2{
  margin:0;
  color:#fff;
  text-align:center;
  font-weight:760;
  letter-spacing:-1px;
}
.mockup-card h1{font-size:40px}
.mockup-card h2{font-size:31px}

.mockup-subtitle{
  margin:10px auto 28px;
  max-width:440px;
  color:#d2d9e8;
  text-align:center;
  font-size:15px;
  line-height:1.65;
}
.register-subtitle{
  margin-top:17px;
  margin-bottom:31px;
  font-size:16px;
}

.mockup-form{
  display:grid;
  gap:17px;
}

.mockup-form label>span,
.upload-title{
  display:block;
  margin:0 0 8px;
  color:#fff;
  font-size:14px;
  font-weight:700;
}

.mockup-form input[type="text"],
.mockup-form input[type="email"],
.mockup-form input[type="password"],
.mockup-form input[type="date"]{
  width:100%;
  height:52px;
  box-sizing:border-box;
  padding:0 16px;
  border:1px solid rgba(155,177,255,.38);
  border-radius:10px;
  background:rgba(13,44,105,.44);
  color:#fff;
  font-size:15px;
  outline:none;
}
.mockup-form input::placeholder{color:#aebcd3}
.mockup-form input[type="date"]{color-scheme:dark}
.mockup-form input:focus{
  border-color:#5e98ff;
  box-shadow:0 0 0 3px rgba(60,129,255,.15);
}

.mockup-upload{
  margin-top:1px;
}
.upload-box{
  padding:10px 12px;
  border:1px solid rgba(155,177,255,.34);
  border-radius:10px;
  background:rgba(13,44,105,.36);
}
.upload-box input[type="file"]{
  width:100%;
  color:#cfd8ea;
  font-size:13px;
}
.upload-box input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:9px 13px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:8px;
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
}
.mockup-upload p{
  margin:12px 0 0;
  color:#c3cee1;
  font-size:13px;
  line-height:1.6;
}

.mockup-check{
  display:grid!important;
  grid-template-columns:22px 1fr;
  gap:11px;
  align-items:start;
  color:#eef3ff;
  font-size:14px;
  line-height:1.5;
}
.mockup-check input{
  width:20px;
  height:20px;
  margin:2px 0 0;
  accent-color:#267dff;
}
.mockup-check a{color:#52a0ff}

.mockup-primary,
.mockup-secondary{
  min-height:52px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:800;
  text-decoration:none;
}
.mockup-primary{
  border:1px solid rgba(100,170,255,.65);
  color:#fff;
  background:linear-gradient(180deg,#2987ff,#1472ef);
  box-shadow:0 12px 30px rgba(0,72,202,.30);
  cursor:pointer;
}
.mockup-secondary{
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.mockup-primary:hover,
.mockup-secondary:hover{filter:brightness(1.07)}

.mockup-link{
  display:block;
  margin:17px 0;
  text-align:center;
  color:#5fa2ff;
  text-decoration:none;
  font-size:13px;
}
.mockup-divider{
  display:flex;
  align-items:center;
  gap:11px;
  margin:19px 0;
  color:#8394b7;
  font-size:10px;
}
.mockup-divider::before,
.mockup-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:rgba(255,255,255,.12);
}
.mockup-security,
.mockup-switch{
  margin:22px 0 0;
  color:#a8b4ca;
  text-align:center;
  font-size:12px;
}
.mockup-switch{
  margin-top:26px;
  font-size:14px;
}
.mockup-switch a{color:#5fa2ff}

.public-footer-rich{
  position:relative;
  z-index:3;
  width:min(1180px,calc(100% - 32px));
  margin:0 auto 24px;
  border:1px solid rgba(130,160,255,.35);
  border-radius:22px;
  background:rgba(5,24,70,.82);
  box-shadow:0 22px 70px rgba(0,7,45,.28);
  backdrop-filter:blur(20px);
  color:#d8e0ef;
}
.public-footer-grid{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:40px;
  padding:30px 38px 26px;
}
.public-footer-grid section{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.footer-logo{
  color:#3487ff;
  font-size:30px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.8px;
}
.public-footer-grid h3{
  margin:0 0 5px;
  color:#fff;
  font-size:13px;
}
.public-footer-grid p{
  margin:0;
  color:#aeb9cf;
  font-size:12px;
  line-height:1.55;
}
.public-footer-grid a{
  color:#c5d0e2;
  font-size:12px;
  text-decoration:none;
}
.public-footer-grid a:hover{color:#fff}
.public-footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:0 38px;
  padding:17px 0 20px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#98a7c2;
  font-size:11px;
}

@keyframes iconFloat{
  0%,100%{transform:translate3d(0,0,0) rotate(-4deg)}
  50%{transform:translate3d(25px,-24px,0) rotate(5deg)}
}
@keyframes cosmicGlow{
  from{transform:translate3d(-5%,4%,0) scale(.94)}
  to{transform:translate3d(9%,-7%,0) scale(1.15)}
}
@keyframes cosmicCloud{
  from{transform:translate3d(-2%,8px,0) scale(.96)}
  to{transform:translate3d(5%,-14px,0) scale(1.08)}
}
@keyframes starTwinkle{
  from{opacity:.45}
  to{opacity:.9}
}

@media(max-width:980px){
  .login-main{
    grid-template-columns:1fr;
    gap:45px;
    padding-top:45px;
  }
  .brand-intro{
    margin:auto;
    text-align:center;
  }
  .brand-intro h1{font-size:50px}
  .brand-intro p{margin-left:auto;margin-right:auto}
  .login-card{max-width:540px;margin:auto}
}
@media(max-width:760px){
  .mockup-main{width:min(100% - 28px,1180px)}
  .register-main{padding-top:32px}
  .register-card{padding:30px 21px 27px}
  .mockup-logo.large{font-size:39px}
  .mockup-card h1{font-size:32px}
  .brand-intro h1{font-size:40px;letter-spacing:-2px}
  .brand-intro p{font-size:17px}
  .floating-card{width:66px;height:66px;border-radius:20px;font-size:30px;opacity:.72}
  .fc-chat{left:-14px}
  .fc-heart{right:-15px}
  .fc-game{left:-17px}
  .fc-smile{right:-16px}
  .fc-world{right:-20px}
  .public-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:28px;
    padding:26px 24px 22px;
  }
  .footer-about{grid-column:1/-1}
  .public-footer-bottom{
    margin:0 24px;
    flex-direction:column;
    gap:7px;
  }
}
@media(max-width:480px){
  .public-footer-grid{grid-template-columns:1fr}
  .footer-about{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  .floating-card,.cosmic-glow,.cosmic-cloud,.cosmic-stars{animation:none!important}
}


/* ==========================================================
   BAPMU v10.28 — Professional balanced desktop composition
   Overrides v10.27 proportions without changing PHP logic.
   ========================================================== */

body.mockup-public-page{
  background:
    radial-gradient(circle at 50% 112%,rgba(103,68,255,.34),transparent 34%),
    radial-gradient(circle at 18% 24%,rgba(18,94,229,.18),transparent 24rem),
    radial-gradient(circle at 85% 28%,rgba(53,70,224,.18),transparent 25rem),
    linear-gradient(180deg,#061237 0%,#082066 51%,#0d2975 76%,#151653 100%);
}

/* More restrained background objects */
.floating-card{
  width:66px;
  height:66px;
  border-radius:20px;
  font-size:29px;
  opacity:.83;
  box-shadow:
    0 16px 44px rgba(0,18,90,.30),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 26px rgba(55,114,255,.10);
}
.fc-chat{left:7%;top:17%}
.fc-heart{right:8%;top:19%}
.fc-game{left:7%;top:61%}
.fc-smile{right:8%;top:48%}
.fc-world{right:9%;top:68%}

/* Main desktop layout: wide intro + compact login */
.login-main{
  width:min(1120px,calc(100% - 72px));
  min-height:680px;
  padding:48px 0 56px;
  grid-template-columns:minmax(520px,1fr) 390px;
  gap:74px;
  align-items:center;
}

.brand-intro{
  max-width:620px;
  padding-left:12px;
}

.brand-overline{
  margin-bottom:13px;
  font-size:11px;
  line-height:1.35;
  letter-spacing:1.55px;
}

.brand-intro h1{
  max-width:610px;
  font-size:49px;
  line-height:1.04;
  letter-spacing:-2.35px;
  text-wrap:balance;
}

.brand-intro p{
  max-width:575px;
  margin-top:21px;
  font-size:17px;
  line-height:1.62;
  color:#c8d3e8;
}

/* Login must read as a card, not take over the whole page */
.login-card{
  width:390px;
  max-width:100%;
  padding:28px 27px 25px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(14,34,92,.76),rgba(8,28,75,.68));
  box-shadow:
    0 24px 72px rgba(0,8,55,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

.login-card .mockup-logo{
  margin-bottom:13px;
  font-size:23px;
}

.login-card h2{
  font-size:25px;
  letter-spacing:-.55px;
}

.login-card .mockup-subtitle{
  margin:7px auto 20px;
  font-size:13px;
}

.login-card .mockup-form{
  gap:13px;
}

.login-card .mockup-form label>span{
  margin-bottom:6px;
  font-size:12px;
}

.login-card .mockup-form input[type="email"],
.login-card .mockup-form input[type="password"]{
  height:44px;
  padding:0 13px;
  font-size:13px;
  border-radius:9px;
}

.login-card .mockup-primary,
.login-card .mockup-secondary{
  min-height:44px;
  border-radius:9px;
  font-size:13px;
}

.login-card .mockup-link{
  margin:13px 0;
  font-size:12px;
}

.login-card .mockup-divider{
  margin:14px 0;
}

.login-card .mockup-security{
  margin-top:15px;
  font-size:10px;
}

/* Footer: compact, intentional and aligned with main content */
.public-footer-rich{
  width:min(1120px,calc(100% - 72px));
  margin:0 auto 22px;
  border-radius:18px;
}

.public-footer-grid{
  grid-template-columns:1.35fr .9fr 1fr 1fr;
  gap:30px;
  padding:23px 28px 20px;
}

.footer-logo{
  font-size:23px;
}

.public-footer-grid h3{
  font-size:12px;
}

.public-footer-grid p,
.public-footer-grid a{
  font-size:11px;
  line-height:1.5;
}

.public-footer-bottom{
  margin:0 28px;
  padding:13px 0 15px;
  font-size:10px;
}

/* Registration follows the same visual discipline */
.register-main{
  width:min(1120px,calc(100% - 72px));
  min-height:auto;
  padding:42px 0 54px;
}

.register-card{
  width:500px;
  padding:32px 34px 30px;
  border-radius:24px;
}

.register-card .mockup-logo.large{
  margin-bottom:23px;
  font-size:38px;
}

.register-card h1{
  font-size:31px;
  letter-spacing:-.8px;
}

.register-card .register-subtitle{
  margin:12px auto 24px;
  font-size:14px;
  line-height:1.55;
}

.register-card .mockup-form{
  gap:14px;
}

.register-card .mockup-form label>span,
.register-card .upload-title{
  margin-bottom:6px;
  font-size:13px;
}

.register-card .mockup-form input[type="text"],
.register-card .mockup-form input[type="email"],
.register-card .mockup-form input[type="password"],
.register-card .mockup-form input[type="date"]{
  height:46px;
  font-size:13px;
}

.register-card .mockup-upload p{
  margin-top:10px;
  font-size:12px;
  line-height:1.5;
}

.register-card .mockup-check{
  grid-template-columns:19px 1fr;
  gap:9px;
  font-size:12.5px;
  line-height:1.45;
}

.register-card .mockup-check input{
  width:17px;
  height:17px;
}

.register-card .mockup-primary{
  min-height:46px;
  font-size:13.5px;
}

.register-card .mockup-switch{
  margin-top:20px;
  font-size:12.5px;
}

/* Laptop widths similar to the user's screen */
@media (min-width:981px) and (max-width:1250px){
  .login-main{
    width:min(960px,calc(100% - 48px));
    grid-template-columns:minmax(430px,1fr) 360px;
    gap:52px;
  }
  .brand-intro h1{
    font-size:44px;
  }
  .brand-intro p{
    font-size:15.5px;
    max-width:500px;
  }
  .login-card{
    width:360px;
  }
  .public-footer-rich{
    width:min(960px,calc(100% - 48px));
  }
  .floating-card{
    width:58px;
    height:58px;
    font-size:25px;
  }
}

/* Tablet/mobile: no giant headline and no squeezed columns */
@media(max-width:980px){
  .login-main{
    width:min(720px,calc(100% - 32px));
    min-height:auto;
    grid-template-columns:1fr;
    gap:34px;
    padding:40px 0 46px;
  }

  .brand-intro{
    padding-left:0;
    text-align:center;
  }

  .brand-intro h1{
    max-width:650px;
    margin:0 auto;
    font-size:42px;
  }

  .brand-intro p{
    margin-left:auto;
    margin-right:auto;
  }

  .login-card{
    width:390px;
    margin:0 auto;
  }

  .public-footer-rich{
    width:min(720px,calc(100% - 32px));
  }
}

@media(max-width:680px){
  .brand-intro h1{
    font-size:35px;
  }

  .brand-intro p{
    font-size:15px;
  }

  .login-card{
    width:100%;
  }

  .register-main{
    width:min(100% - 28px,1120px);
  }

  .register-card{
    width:100%;
    padding:26px 19px 24px;
  }

  .public-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding:22px 20px 18px;
  }

  .public-footer-bottom{
    margin:0 20px;
  }
}


/* ==========================================================
   BAPMU v10.30 — Living day/night sky + balanced login
   ========================================================== */

body.living-public-page{
  min-height:100vh;
  margin:0;
  color:#fff;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#071a4f;
  overflow-x:hidden;
}

.living-sky{
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}

/* DAY */
.day-layer{
  position:absolute;
  inset:0;
  opacity:0;
  background:linear-gradient(180deg,#68b9ff 0%,#8fd1ff 40%,#d9efff 100%);
  animation:dayCycle 40s linear infinite;
}

.sun{
  position:absolute;
  right:11%;
  top:11%;
  width:96px;
  height:96px;
  border-radius:50%;
  background:radial-gradient(circle at 40% 40%,#fffbd8 0 18%,#ffd969 45%,#ffb52f 72%);
  box-shadow:
    0 0 38px rgba(255,220,91,.75),
    0 0 90px rgba(255,197,60,.45);
  animation:sunGlow 6s ease-in-out infinite alternate;
}

.day-cloud,
.night-cloud{
  position:absolute;
  border-radius:999px;
}

.day-cloud{
  height:72px;
  background:rgba(255,255,255,.58);
  box-shadow:
    55px -24px 0 8px rgba(255,255,255,.5),
    110px 2px 0 3px rgba(255,255,255,.46);
  filter:blur(.2px);
}

.day-cloud-a{width:190px;left:-220px;top:19%;animation:cloudDayA 34s linear infinite}
.day-cloud-b{width:230px;left:-280px;top:42%;animation:cloudDayB 42s linear infinite 8s}
.day-cloud-c{width:160px;left:-210px;top:66%;animation:cloudDayC 38s linear infinite 17s}

/* NIGHT */
.night-layer{
  position:absolute;
  inset:0;
  opacity:1;
  background:
    radial-gradient(circle at 72% 18%,rgba(102,125,255,.12),transparent 22rem),
    linear-gradient(180deg,#06102f 0%,#081b52 48%,#0a276a 78%,#13174e 100%);
  animation:nightCycle 40s linear infinite;
}

.moon{
  position:absolute;
  right:12%;
  top:12%;
  width:84px;
  height:84px;
  border-radius:50%;
  background:
    radial-gradient(circle at 36% 34%,rgba(255,255,255,.92) 0 20%,rgba(229,235,255,.82) 48%,rgba(198,210,242,.75) 74%);
  box-shadow:
    0 0 24px rgba(216,228,255,.35),
    0 0 65px rgba(178,199,255,.23);
  opacity:.82;
  animation:moonGlow 7s ease-in-out infinite alternate;
}

.star{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 7px rgba(255,255,255,.8);
  animation:twinkle 2.4s ease-in-out infinite alternate;
}
.star-1{left:9%;top:15%;animation-delay:.2s}
.star-2{left:22%;top:27%;animation-delay:.8s}
.star-3{left:37%;top:12%;animation-delay:1.2s}
.star-4{left:54%;top:30%;animation-delay:.5s}
.star-5{left:68%;top:19%;animation-delay:1.6s}
.star-6{left:81%;top:34%;animation-delay:.9s}
.star-7{left:15%;top:59%;animation-delay:1.3s}
.star-8{left:48%;top:69%;animation-delay:.4s}
.star-9{left:88%;top:62%;animation-delay:1.8s}

.night-cloud{
  height:74px;
  background:rgba(132,154,220,.10);
  box-shadow:
    60px -22px 0 10px rgba(132,154,220,.08),
    118px 4px 0 4px rgba(132,154,220,.07);
}
.night-cloud-a{width:200px;left:-230px;top:30%;animation:cloudNightA 46s linear infinite}
.night-cloud-b{width:260px;left:-310px;top:70%;animation:cloudNightB 52s linear infinite 16s}

/* Emojis float slowly in both day and night */
.living-public-page .floating-card{
  z-index:3;
  width:64px;
  height:64px;
  border-radius:20px;
  font-size:28px;
  opacity:.88;
  background:linear-gradient(145deg,rgba(40,102,255,.24),rgba(79,42,190,.17));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:
    0 16px 44px rgba(0,18,90,.28),
    inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter:blur(12px);
  animation:emojiDrift 12s ease-in-out infinite;
}
.living-public-page .fc-chat{left:7%;top:22%}
.living-public-page .fc-heart{right:8%;top:20%;animation-delay:-2s}
.living-public-page .fc-game{left:7%;top:63%;animation-delay:-5s}
.living-public-page .fc-smile{right:8%;top:49%;animation-delay:-3s}
.living-public-page .fc-world{right:10%;top:69%;animation-delay:-7s}

/* BALANCED LOGIN aligned to footer width */
.balanced-login-main{
  position:relative;
  z-index:2;
  width:min(1120px,calc(100% - 72px));
  min-height:690px;
  margin:0 auto;
  padding:54px 0 58px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:70px;
  align-items:center;
}

.balanced-story{
  max-width:610px;
  padding-left:10px;
}

.balanced-story .brand-overline{
  display:block;
  margin-bottom:13px;
  color:#78a8ff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.6px;
}

.balanced-story h1{
  margin:0;
  max-width:600px;
  color:#fff;
  font-size:48px;
  line-height:1.04;
  letter-spacing:-2.2px;
  text-shadow:0 8px 28px rgba(0,0,0,.22);
}

.balanced-story p{
  margin:21px 0 0;
  max-width:565px;
  color:#c7d2e7;
  font-size:16.5px;
  line-height:1.64;
}

.balanced-login-card{
  width:390px;
  box-sizing:border-box;
  padding:28px 27px 25px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(14,34,92,.76),rgba(8,28,75,.68));
  box-shadow:
    0 24px 72px rgba(0,8,55,.38),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* Footer matches same 1120px axis */
.living-public-page .public-footer-rich{
  width:min(1120px,calc(100% - 72px));
}

/* Register keeps its strong centered card */
.living-public-page .register-main{
  position:relative;
  z-index:2;
}

/* Motion */
@keyframes dayCycle{
  0%,42%{opacity:0}
  50%,92%{opacity:1}
  100%{opacity:0}
}
@keyframes nightCycle{
  0%,42%{opacity:1}
  50%,92%{opacity:0}
  100%{opacity:1}
}
@keyframes twinkle{
  from{opacity:.25;transform:scale(.8)}
  to{opacity:1;transform:scale(1.45)}
}
@keyframes moonGlow{
  from{opacity:.68;transform:scale(.98)}
  to{opacity:.9;transform:scale(1.03)}
}
@keyframes sunGlow{
  from{transform:scale(.98);box-shadow:0 0 34px rgba(255,220,91,.62),0 0 75px rgba(255,197,60,.34)}
  to{transform:scale(1.04);box-shadow:0 0 46px rgba(255,220,91,.84),0 0 110px rgba(255,197,60,.52)}
}
@keyframes cloudDayA{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 500px))}}
@keyframes cloudDayB{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 600px))}}
@keyframes cloudDayC{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 500px))}}
@keyframes cloudNightA{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 520px))}}
@keyframes cloudNightB{from{transform:translateX(0)}to{transform:translateX(calc(100vw + 640px))}}
@keyframes emojiDrift{
  0%,100%{transform:translate3d(0,0,0) rotate(-3deg)}
  50%{transform:translate3d(22px,-18px,0) rotate(4deg)}
}

@media(min-width:981px) and (max-width:1250px){
  .balanced-login-main{
    width:min(960px,calc(100% - 48px));
    grid-template-columns:minmax(430px,1fr) 360px;
    gap:54px;
  }
  .balanced-story h1{font-size:43px}
  .balanced-story p{font-size:15.5px}
  .balanced-login-card{width:360px}
  .living-public-page .public-footer-rich{width:min(960px,calc(100% - 48px))}
}

@media(max-width:980px){
  .balanced-login-main{
    width:min(720px,calc(100% - 32px));
    min-height:auto;
    grid-template-columns:1fr;
    gap:34px;
    padding:42px 0 48px;
  }
  .balanced-story{
    margin:auto;
    padding-left:0;
    text-align:center;
  }
  .balanced-story h1{
    margin:auto;
    font-size:39px;
  }
  .balanced-story p{
    margin-left:auto;
    margin-right:auto;
  }
  .balanced-login-card{
    width:390px;
    max-width:100%;
    margin:auto;
  }
  .living-public-page .public-footer-rich{width:min(720px,calc(100% - 32px))}
}

@media(prefers-reduced-motion:reduce){
  .day-layer,.night-layer,.sun,.moon,.star,.day-cloud,.night-cloud,.living-public-page .floating-card{
    animation:none!important;
  }
}


/* ==========================================================
   BAPMU v10.31 — readable daylight + unified policy pages
   ========================================================== */

/* The hero copy follows the same 40s day/night cycle as the sky. */
.balanced-story h1{
  animation:livingHeroHeading 40s linear infinite;
}
.balanced-story p{
  animation:livingHeroParagraph 40s linear infinite;
}
.balanced-story .brand-overline{
  animation:livingHeroOverline 40s linear infinite;
}

@keyframes livingHeroHeading{
  0%,42%,100%{
    color:#ffffff;
    text-shadow:0 8px 28px rgba(0,0,0,.24);
  }
  50%,92%{
    color:#102a4c;
    text-shadow:0 2px 14px rgba(255,255,255,.25);
  }
}
@keyframes livingHeroParagraph{
  0%,42%,100%{color:#c7d2e7}
  50%,92%{color:#294867}
}
@keyframes livingHeroOverline{
  0%,42%,100%{color:#78a8ff}
  50%,92%{color:#155fa8}
}

/* Add a very subtle readability veil behind copy in daylight,
   but keep the text block visually open rather than card-like. */
.balanced-story{
  position:relative;
  z-index:2;
}
.balanced-story::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-24px -30px;
  border-radius:28px;
  background:rgba(255,255,255,0);
  box-shadow:0 20px 60px rgba(24,76,130,0);
  backdrop-filter:blur(0);
  animation:storyDayVeil 40s linear infinite;
}
@keyframes storyDayVeil{
  0%,42%,100%{
    background:rgba(255,255,255,0);
    box-shadow:0 20px 60px rgba(24,76,130,0);
    backdrop-filter:blur(0);
  }
  50%,92%{
    background:rgba(255,255,255,.28);
    box-shadow:0 20px 60px rgba(24,76,130,.08);
    backdrop-filter:blur(7px);
  }
}

/* ------------------------------------------------------------------
   Unified public header for legal/policy pages
   ------------------------------------------------------------------ */
.living-public-header{
  position:relative;
  z-index:4;
  width:100%;
  padding:18px 0 0;
}

.living-header-inner{
  width:min(1120px,calc(100% - 72px));
  min-height:58px;
  margin:0 auto;
  padding:0 2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}

.living-header-logo{
  color:#4e91ff;
  font-size:25px;
  line-height:1;
  font-weight:900;
  letter-spacing:-1.5px;
  text-decoration:none;
  text-shadow:0 4px 18px rgba(0,0,0,.16);
}

.living-header-inner nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.living-header-inner nav a{
  min-height:38px;
  padding:0 13px;
  border-radius:9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.82);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  background:rgba(8,29,78,.15);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(9px);
}

.living-header-inner nav a.header-primary{
  color:#fff;
  background:rgba(30,112,242,.78);
  border-color:rgba(117,174,255,.4);
}

/* Header also remains readable on daytime sky */
.legal-living-page .living-header-logo,
.legal-living-page .living-header-inner nav a{
  animation:legalHeaderDayNight 40s linear infinite;
}
@keyframes legalHeaderDayNight{
  0%,42%,100%{
    color:#eaf2ff;
  }
  50%,92%{
    color:#143657;
  }
}

/* ------------------------------------------------------------------
   Unified legal page composition
   ------------------------------------------------------------------ */
.living-legal-main{
  position:relative;
  z-index:2;
  width:min(900px,calc(100% - 48px));
  margin:0 auto;
  padding:44px 0 64px;
}

.living-legal-hero{
  margin:0 0 25px;
  padding:28px 32px 30px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(13,37,96,.62),rgba(8,30,77,.49));
  box-shadow:0 24px 72px rgba(0,8,55,.24);
  backdrop-filter:blur(18px);
}

.living-back-link{
  display:inline-flex;
  align-items:center;
  margin-bottom:25px;
  color:#83afff;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.living-legal-label{
  display:block;
  margin:0 0 11px;
  color:#79aaff;
  font-size:11px;
  font-weight:800;
  letter-spacing:1.55px;
}

.living-legal-hero h1{
  margin:0;
  color:#fff;
  font-size:42px;
  line-height:1.08;
  letter-spacing:-1.7px;
}

.living-legal-hero>p{
  max-width:740px;
  margin:16px 0 0;
  color:#c7d3e7;
  font-size:16px;
  line-height:1.65;
}

.living-legal-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px;
  color:#93a5c3;
  font-size:11px;
}

.living-legal-card{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(10,33,88,.68),rgba(7,27,73,.62));
  box-shadow:0 26px 80px rgba(0,8,55,.30);
  backdrop-filter:blur(20px);
}

.living-legal-section{
  padding:27px 31px 29px;
  border-top:1px solid rgba(255,255,255,.10);
}

.living-legal-section:first-child{
  border-top:0;
}

.living-legal-section h2{
  margin:0 0 12px;
  color:#fff;
  font-size:20px;
  line-height:1.35;
  letter-spacing:-.3px;
}

.living-legal-section p{
  margin:0;
  color:#c4d0e4;
  font-size:14px;
  line-height:1.78;
}

.living-legal-section p+p{
  margin-top:13px;
}

.living-legal-section ul{
  margin:0;
  padding:0;
  list-style:none;
}

.living-legal-section li{
  position:relative;
  margin:0;
  padding-left:22px;
  color:#c4d0e4;
  font-size:14px;
  line-height:1.72;
}

.living-legal-section li+li{
  margin-top:10px;
}

.living-legal-section li::before{
  content:"";
  position:absolute;
  left:2px;
  top:.72em;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5e9bff;
  box-shadow:0 0 0 4px rgba(77,145,255,.11);
}

.living-legal-section a{
  color:#67a5ff;
}

/* Legal cards stay dark/glass in both day and night, matching login/register.
   This avoids the unreadable white-on-white problem. */
.legal-living-page .living-legal-hero,
.legal-living-page .living-legal-card{
  isolation:isolate;
}

/* Footer on every public page uses exactly same dimensions. */
.legal-living-page .public-footer-rich,
.living-public-page .public-footer-rich{
  width:min(1120px,calc(100% - 72px));
}

/* Keep footer rich styles high-specificity so old .legal-body rules cannot win. */
body.legal-living-page footer.public-footer-rich{
  position:relative;
  z-index:3;
  margin:0 auto 22px;
  border:1px solid rgba(130,160,255,.35);
  border-radius:18px;
  background:rgba(5,24,70,.82);
  box-shadow:0 22px 70px rgba(0,7,45,.28);
  backdrop-filter:blur(20px);
  color:#d8e0ef;
}

body.legal-living-page .public-footer-grid{
  display:grid;
  grid-template-columns:1.35fr .9fr 1fr 1fr;
  gap:30px;
  padding:23px 28px 20px;
}

body.legal-living-page .public-footer-grid section{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

body.legal-living-page .footer-logo{
  color:#3487ff;
  font-size:23px;
  line-height:1;
  font-weight:900;
}

body.legal-living-page .public-footer-grid h3{
  margin:0 0 5px;
  color:#fff;
  font-size:12px;
}

body.legal-living-page .public-footer-grid p,
body.legal-living-page .public-footer-grid a{
  margin:0;
  color:#b9c5d9;
  font-size:11px;
  line-height:1.5;
  text-decoration:none;
}

body.legal-living-page .public-footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin:0 28px;
  padding:13px 0 15px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#98a7c2;
  font-size:10px;
}

/* Laptop */
@media(min-width:981px) and (max-width:1250px){
  .living-header-inner,
  .legal-living-page .public-footer-rich{
    width:min(960px,calc(100% - 48px));
  }
}

/* Mobile */
@media(max-width:760px){
  .living-header-inner{
    width:min(100% - 32px,1120px);
  }

  .living-header-inner nav a:not(.header-primary){
    display:none;
  }

  .living-legal-main{
    width:min(100% - 32px,900px);
    padding:30px 0 48px;
  }

  .living-legal-hero{
    padding:23px 20px 24px;
    border-radius:18px;
  }

  .living-legal-hero h1{
    font-size:32px;
  }

  .living-legal-hero>p{
    font-size:14px;
  }

  .living-legal-card{
    border-radius:18px;
  }

  .living-legal-section{
    padding:23px 20px 25px;
  }

  .legal-living-page .public-footer-rich,
  .living-public-page .public-footer-rich{
    width:min(100% - 32px,1120px);
  }

  body.legal-living-page .public-footer-grid{
    grid-template-columns:1fr 1fr;
    gap:24px;
    padding:22px 20px 18px;
  }

  body.legal-living-page .footer-about{
    grid-column:1/-1;
  }

  body.legal-living-page .public-footer-bottom{
    margin:0 20px;
    flex-direction:column;
    gap:6px;
  }
}

@media(prefers-reduced-motion:reduce){
  .balanced-story h1,
  .balanced-story p,
  .balanced-story .brand-overline,
  .balanced-story::before,
  .legal-living-page .living-header-logo,
  .legal-living-page .living-header-inner nav a{
    animation:none!important;
  }
}


/* ==========================================================
   BAPMU v10.32 — daylight polish
   - no daylight box behind hero copy
   - headline locked to two elegant lines
   - clearly visible legal-page login/create controls
   ========================================================== */

/* No card/veil behind text during the day. */
.balanced-story::before{
  display:none!important;
  content:none!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  animation:none!important;
}

/* Two-line hero, visually wider and calmer. */
.balanced-story{
  max-width:680px;
  padding-left:0;
}

.balanced-story h1{
  max-width:680px;
  font-size:46px;
  line-height:1.055;
  letter-spacing:-2.1px;
}

.balanced-story h1 span{
  display:block;
  white-space:nowrap;
}

.balanced-story p{
  max-width:625px;
}

/* Let the left column have enough room on desktop. */
.balanced-login-main{
  grid-template-columns:minmax(610px,1fr) 390px;
  gap:62px;
}

/* Legal page top controls must remain visible on every sky state. */
.living-header-inner nav a{
  color:#ffffff!important;
  background:rgba(7,30,78,.68)!important;
  border:1px solid rgba(255,255,255,.32)!important;
  box-shadow:0 8px 24px rgba(0,18,70,.16);
  backdrop-filter:blur(14px);
  animation:none!important;
}

.living-header-inner nav a:hover{
  color:#ffffff!important;
  background:rgba(11,43,104,.82)!important;
  border-color:rgba(255,255,255,.46)!important;
}

.living-header-inner nav a.header-primary{
  color:#ffffff!important;
  background:linear-gradient(180deg,#3288ff,#176fe9)!important;
  border-color:rgba(123,181,255,.72)!important;
  box-shadow:0 9px 26px rgba(20,91,215,.28);
}

.living-header-inner nav a.header-primary:hover{
  background:linear-gradient(180deg,#4092ff,#2079ef)!important;
}

/* The BAPMU wordmark also keeps sufficient contrast in daytime. */
.legal-living-page .living-header-logo{
  color:#1768bd!important;
  text-shadow:0 1px 8px rgba(255,255,255,.35);
  animation:none!important;
}

/* Laptop sizing: preserve two lines without making the login card too large. */
@media(min-width:981px) and (max-width:1250px){
  .balanced-login-main{
    width:min(1000px,calc(100% - 48px));
    grid-template-columns:minmax(550px,1fr) 350px;
    gap:48px;
  }

  .balanced-story h1{
    font-size:41px;
    max-width:600px;
  }

  .balanced-story p{
    max-width:555px;
  }

  .balanced-login-card{
    width:350px;
  }
}

/* Small screens may wrap naturally rather than overflow. */
@media(max-width:980px){
  .balanced-story h1 span{
    white-space:normal;
  }

  .balanced-login-main{
    grid-template-columns:1fr;
  }
}

@media(max-width:680px){
  .balanced-story h1{
    font-size:34px;
  }
}


/* ==========================================================
   BAPMU v10.33 — alignment + identical header actions
   ========================================================== */

/* Login/landing content uses exactly the same outer width as footer. */
.balanced-login-main{
  width:min(1180px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  grid-template-columns:minmax(0,1fr) 390px!important;
  gap:56px!important;
  box-sizing:border-box!important;
}

.balanced-login-card{
  width:390px!important;
  max-width:100%!important;
  justify-self:end!important;
  box-sizing:border-box!important;
}

/* Legal header: Log ind and Opret konto are same component/size.
   Only the primary button keeps the brighter blue emphasis. */
.living-header-inner nav{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}

.living-header-inner nav a,
.living-header-inner nav a.header-primary{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:116px!important;
  height:44px!important;
  padding:0 20px!important;
  margin:0!important;
  border-radius:12px!important;
  font-weight:800!important;
  line-height:1!important;
  text-decoration:none!important;
  box-sizing:border-box!important;
  opacity:1!important;
  visibility:visible!important;
}

.living-header-inner nav a{
  color:#fff!important;
  background:#176fe9!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 7px 20px rgba(15,77,177,.20)!important;
}

.living-header-inner nav a.header-primary{
  color:#fff!important;
  background:#176fe9!important;
  border:1px solid rgba(255,255,255,.30)!important;
  box-shadow:0 7px 20px rgba(15,77,177,.20)!important;
}

.living-header-inner nav a:hover,
.living-header-inner nav a.header-primary:hover{
  background:#0f62d6!important;
}

/* Keep header content aligned to the same 1180px system. */
.living-header-inner{
  width:min(1180px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

@media(min-width:981px) and (max-width:1250px){
  .balanced-login-main{
    width:min(1000px,calc(100% - 48px))!important;
    grid-template-columns:minmax(0,1fr) 350px!important;
    gap:48px!important;
  }
  .balanced-login-card{
    width:350px!important;
  }
}

@media(max-width:980px){
  .balanced-login-main{
    grid-template-columns:1fr!important;
  }
  .balanced-login-card{
    justify-self:center!important;
  }
}


/* ==========================================================
   BAPMU v10.34 — hero position + legal header hard override
   ========================================================== */

/* Keep the login card where it is, but move only the left text further left. */
@media(min-width:981px){
  .balanced-story{
    position:relative!important;
    left:-52px!important;
  }
}

/* Compact registration card and upload dropdown v12.11 */
.register-public-page .register-card{width:min(500px,100%)!important;max-width:500px!important}
.register-public-page .register-upload-dropdown{overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.045)}
.register-public-page .register-upload-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;cursor:pointer;list-style:none;font-size:13px;font-weight:800}
.register-public-page .register-upload-dropdown>summary::-webkit-details-marker{display:none}
.register-public-page .register-upload-dropdown>summary:after{content:"⌄";font-size:18px;transition:transform .18s ease}
.register-public-page .register-upload-dropdown[open]>summary:after{transform:rotate(180deg)}
.register-public-page .register-upload-dropdown>summary small{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fb7df;font-weight:600}
.register-public-page .register-upload-dropdown .mockup-upload{margin:0;padding:14px 15px 15px!important;border:0!important;border-top:1px solid rgba(255,255,255,.14)!important;border-radius:0!important;background:transparent!important}
@media(max-width:700px){.register-public-page .register-card{width:100%!important;max-width:460px!important}.register-public-page .register-upload-dropdown>summary small{max-width:120px}}

/* Structured post extras shared by feed and profile */
.post-context{padding:0 18px 8px;color:#5f6c80;font-size:14px}.post-giphy{position:relative;max-width:100%;background:#0b0b0c}.post-giphy img{display:block;width:100%;max-height:560px;object-fit:contain}.post-giphy small{position:absolute;right:8px;bottom:7px;padding:3px 6px;border-radius:5px;background:rgba(0,0,0,.62);color:#fff;font-size:10px}

/* Registration gender field v12.12 */
.register-public-page .register-card .mockup-form select[name="gender"]{width:100%;height:46px;padding:0 14px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:#142d68;color:#fff;font:inherit;color-scheme:dark}
.register-public-page .register-card .mockup-form select[name="gender"]:focus{outline:2px solid rgba(77,157,255,.55);outline-offset:1px}

/* Verified parent contact stop v12.13 */
.parent-stop-page{background:radial-gradient(circle at 50% 10%,#173875,#071a4f 62%,#041133)!important}.parent-stop-card{width:min(500px,100%);text-align:center;border-color:rgba(99,163,255,.35);background:linear-gradient(180deg,rgba(18,45,101,.97),rgba(8,28,72,.98));color:#fff}.parent-stop-card>p{color:#c9d7ee;line-height:1.6}.parent-stop-icon{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 17px;border:3px solid #ffcb57;border-radius:50%;color:#ffcb57;font-size:35px;font-weight:900}.parent-contact-box{margin:24px 0;padding:22px;border:1px solid rgba(96,160,255,.42);border-radius:18px;background:rgba(39,91,178,.24)}.parent-contact-box small{display:block;color:#b8c9e6;font-weight:800}.parent-contact-box>a{display:block;margin:7px 0 15px;color:#fff;font-size:32px;font-weight:900;letter-spacing:.5px}.parent-contact-box p{margin:0 0 10px;color:#c9d7ee}.parent-contact-box>strong{display:inline-block;padding:10px 17px;border-radius:10px;background:#fff;color:#102c66;font-size:24px;letter-spacing:4px}.parent-stop-actions{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap}.parent-stop-actions>a:last-child{color:#b9c9e5;text-decoration:underline}

/* Legal/policy pages:
   override both generic header-link rules and old button variants. */
.legal-living-page .living-header .living-header-inner nav a,
.legal-living-page .living-header .living-header-inner nav a:link,
.legal-living-page .living-header .living-header-inner nav a:visited,
.legal-living-page .living-header .living-header-inner nav a.header-primary,
.legal-living-page .living-header .living-header-inner nav a.header-primary:link,
.legal-living-page .living-header .living-header-inner nav a.header-primary:visited{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:122px!important;
  min-width:122px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 18px!important;
  margin:0!important;
  border-radius:12px!important;
  color:#fff!important;
  background:#1877f2!important;
  border:1px solid #1877f2!important;
  box-shadow:0 8px 20px rgba(24,119,242,.24)!important;
  font-weight:800!important;
  font-size:15px!important;
  line-height:1!important;
  opacity:1!important;
  visibility:visible!important;
  filter:none!important;
  text-shadow:none!important;
  text-decoration:none!important;
}

.legal-living-page .living-header .living-header-inner nav a:hover,
.legal-living-page .living-header .living-header-inner nav a.header-primary:hover{
  color:#fff!important;
  background:#0f68df!important;
  border-color:#0f68df!important;
}

/* Do not let daytime theme wash out the legal header actions. */
body.day-mode.legal-living-page .living-header-inner nav a,
body.day-mode.legal-living-page .living-header-inner nav a.header-primary,
body.day.legal-living-page .living-header-inner nav a,
body.day.legal-living-page .living-header-inner nav a.header-primary,
html[data-theme="day"] .legal-living-page .living-header-inner nav a,
html[data-theme="day"] .legal-living-page .living-header-inner nav a.header-primary{
  color:#fff!important;
  background:#1877f2!important;
  border-color:#1877f2!important;
  opacity:1!important;
}

@media(max-width:980px){
  .balanced-story{
    left:0!important;
  }
}


/* BAPMU v10.35 — move policy-page header buttons slightly upward */
@media (min-width: 701px) {
  .legal-living-page .living-header .living-header-inner nav {
    transform: translateY(-8px) !important;
  }
}


/* ==========================================================
   BAPMU v10.36 — real policy-header repositioning
   Moves the header block itself upward instead of translating nav.
   ========================================================== */

.legal-living-page .living-public-header{
  padding-top:6px!important;
  margin-top:-12px!important;
}

.legal-living-page .living-header-inner{
  min-height:52px!important;
  align-items:center!important;
}

.legal-living-page .living-header-inner nav{
  transform:none!important;
  margin-top:0!important;
  position:relative!important;
  top:-4px!important;
}

@media(max-width:760px){
  .legal-living-page .living-public-header{
    margin-top:-6px!important;
    padding-top:4px!important;
  }

  .legal-living-page .living-header-inner nav{
    top:-2px!important;
  }
}


/* ==========================================================
   BAPMU v10.37 — policy header fine tune
   Buttons remain higher than original, but no longer clipped.
   ========================================================== */

.legal-living-page .living-public-header{
  margin-top:-4px!important;
  padding-top:10px!important;
  overflow:visible!important;
}

.legal-living-page .living-header-inner{
  min-height:58px!important;
  overflow:visible!important;
}

.legal-living-page .living-header-inner nav{
  top:0!important;
  transform:none!important;
  margin-top:0!important;
  overflow:visible!important;
}

@media(max-width:760px){
  .legal-living-page .living-public-header{
    margin-top:0!important;
    padding-top:8px!important;
  }
}


/* ==========================================================
   BAPMU v10.38 — automatic day/night cycle
   Day:   06:00–17:59
   Night: 18:00–05:59
   ========================================================== */

html.bapmu-day .living-page,
html.bapmu-day .legal-living-page,
body.bapmu-day,
html.bapmu-day body {
  --bapmu-period: day;
}

html.bapmu-night .living-page,
html.bapmu-night .legal-living-page,
body.bapmu-night,
html.bapmu-night body {
  --bapmu-period: night;
}

/* Smooth transition when the clock crosses 06:00 or 18:00. */
html.bapmu-day body,
html.bapmu-night body,
html.bapmu-day .living-sky,
html.bapmu-night .living-sky,
html.bapmu-day .living-hero,
html.bapmu-night .living-hero {
  transition:
    background-color 1.8s ease,
    background 1.8s ease,
    color 1.2s ease,
    border-color 1.2s ease,
    box-shadow 1.8s ease;
}


/* ==========================================================
   BAPMU v10.39 — Merry Christmas season
   Active automatically from 1 December through 1 January.
   Keeps the normal day/night schedule underneath.
   ========================================================== */

html.bapmu-christmas .living-sky::before,
html.bapmu-christmas .living-sky::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:4;
}

/* Soft festive bokeh */
html.bapmu-christmas .living-sky::before{
  background:
    radial-gradient(circle at 8% 14%,rgba(255,224,120,.85) 0 3px,transparent 5px),
    radial-gradient(circle at 18% 31%,rgba(255,72,72,.72) 0 3px,transparent 5px),
    radial-gradient(circle at 31% 12%,rgba(100,219,129,.72) 0 3px,transparent 5px),
    radial-gradient(circle at 46% 22%,rgba(255,224,120,.78) 0 3px,transparent 5px),
    radial-gradient(circle at 63% 13%,rgba(255,72,72,.72) 0 3px,transparent 5px),
    radial-gradient(circle at 78% 27%,rgba(100,219,129,.72) 0 3px,transparent 5px),
    radial-gradient(circle at 91% 16%,rgba(255,224,120,.82) 0 3px,transparent 5px);
  opacity:.8;
  filter:drop-shadow(0 0 7px rgba(255,226,139,.38));
  animation:christmasTwinkle 2.8s ease-in-out infinite alternate;
}

/* Snow */
html.bapmu-christmas .living-sky::after{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.94) 0 2px,transparent 2.5px),
    radial-gradient(circle,rgba(255,255,255,.72) 0 1.5px,transparent 2px),
    radial-gradient(circle,rgba(255,255,255,.58) 0 1px,transparent 1.5px);
  background-size:110px 110px, 170px 170px, 240px 240px;
  background-position:0 -120px, 45px -180px, 20px -260px;
  opacity:.7;
  animation:christmasSnow 16s linear infinite;
}

html.bapmu-christmas .moon,
html.bapmu-christmas .sun{
  box-shadow:
    0 0 38px rgba(255,233,158,.85),
    0 0 90px rgba(255,210,94,.42);
}

/* Seasonal tint for cards, still professional */
html.bapmu-christmas .mockup-card,
html.bapmu-christmas .balanced-login-card,
html.bapmu-christmas .register-card,
html.bapmu-christmas .living-legal-card,
html.bapmu-christmas .living-legal-hero,
html.bapmu-christmas .public-footer-rich{
  border-color:rgba(255,220,140,.28)!important;
  box-shadow:
    0 24px 72px rgba(0,8,55,.30),
    0 0 34px rgba(255,214,108,.08)!important;
}

/* Subtle Christmas accent on BAPMU wordmarks */
html.bapmu-christmas .mockup-logo,
html.bapmu-christmas .footer-logo,
html.bapmu-christmas .living-header-logo{
  text-shadow:
    0 0 12px rgba(255,225,135,.22),
    0 4px 18px rgba(0,0,0,.16);
}

/* Festive emoji cards get a faint warm outline */
html.bapmu-christmas .floating-card{
  border-color:rgba(255,224,154,.34)!important;
  box-shadow:
    0 16px 44px rgba(0,18,90,.26),
    0 0 22px rgba(255,215,120,.09),
    inset 0 1px 0 rgba(255,255,255,.16)!important;
}

@keyframes christmasTwinkle{
  from{opacity:.45;filter:drop-shadow(0 0 4px rgba(255,226,139,.24))}
  to{opacity:.95;filter:drop-shadow(0 0 10px rgba(255,226,139,.55))}
}

@keyframes christmasSnow{
  from{background-position:0 -120px,45px -180px,20px -260px}
  to{background-position:35px 100vh,80px 100vh,50px 100vh}
}

@media(prefers-reduced-motion:reduce){
  html.bapmu-christmas .living-sky::before,
  html.bapmu-christmas .living-sky::after{
    animation:none!important;
  }
}


/* ==========================================================
   BAPMU v10.40 — waving Christmas Santa
   Automatically exists only during Christmas season.
   ========================================================== */

.bapmu-christmas-santa{
  position:fixed;
  z-index:12;
  right:34px;
  bottom:30px;
  width:92px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.24));
  animation:santaGentleFloat 5s ease-in-out infinite;
}

.bapmu-christmas-santa .santa-body{
  display:block;
  font-size:68px;
  line-height:1;
}

.bapmu-christmas-santa .santa-wave{
  position:absolute;
  right:-5px;
  top:8px;
  display:block;
  font-size:31px;
  line-height:1;
  transform-origin:20% 85%;
  animation:santaWave 1.6s ease-in-out infinite;
}

@keyframes santaWave{
  0%,100%{transform:rotate(-12deg)}
  25%{transform:rotate(22deg)}
  50%{transform:rotate(-7deg)}
  75%{transform:rotate(26deg)}
}

@keyframes santaGentleFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

@media(max-width:700px){
  .bapmu-christmas-santa{
    right:14px;
    bottom:18px;
    width:72px;
    height:72px;
  }

  .bapmu-christmas-santa .santa-body{
    font-size:54px;
  }

  .bapmu-christmas-santa .santa-wave{
    right:-2px;
    top:6px;
    font-size:25px;
  }
}

@media(prefers-reduced-motion:reduce){
  .bapmu-christmas-santa,
  .bapmu-christmas-santa .santa-wave{
    animation:none!important;
  }
}


/* BAPMU v10.41 — Santa belongs under the login hero text */
body:has(.balanced-login-main) .bapmu-christmas-santa{
  position:absolute!important;
  z-index:5!important;
  right:auto!important;
  bottom:auto!important;
  left:calc(50% - 560px + 210px)!important;
  top:445px!important;
  width:100px!important;
  height:100px!important;
}

body:has(.balanced-login-main) .bapmu-christmas-santa .santa-body{
  font-size:74px!important;
}

body:has(.balanced-login-main) .bapmu-christmas-santa .santa-wave{
  font-size:32px!important;
}

@media(min-width:981px) and (max-width:1250px){
  body:has(.balanced-login-main) .bapmu-christmas-santa{
    left:calc(50% - 480px + 170px)!important;
    top:430px!important;
  }
}

@media(max-width:980px){
  body:has(.balanced-login-main) .bapmu-christmas-santa{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    margin:-24px auto 20px!important;
  }
}


/* ==========================================================
   BAPMU v10.43 — fixed clock-based day/night + full Santa
   ========================================================== */

/* STOP the old 40-second day/night crossfade completely. */
.day-layer,
.night-layer{
  animation:none!important;
  transition:opacity 1.4s ease!important;
}

/* Theme is now controlled ONLY by local browser clock via JS. */
html.bapmu-day .day-layer,
body.bapmu-day .day-layer{
  opacity:1!important;
}

html.bapmu-day .night-layer,
body.bapmu-day .night-layer{
  opacity:0!important;
}

html.bapmu-night .day-layer,
body.bapmu-night .day-layer{
  opacity:0!important;
}

html.bapmu-night .night-layer,
body.bapmu-night .night-layer{
  opacity:1!important;
}

/* Hero text follows the JS theme, not a timed animation. */
.balanced-story h1,
.balanced-story p,
.balanced-story .brand-overline{
  animation:none!important;
}

html.bapmu-day .balanced-story h1,
body.bapmu-day .balanced-story h1{
  color:#102a4c!important;
  text-shadow:0 2px 14px rgba(255,255,255,.24)!important;
}

html.bapmu-day .balanced-story p,
body.bapmu-day .balanced-story p{
  color:#294867!important;
}

html.bapmu-day .balanced-story .brand-overline,
body.bapmu-day .balanced-story .brand-overline{
  color:#155fa8!important;
}

html.bapmu-night .balanced-story h1,
body.bapmu-night .balanced-story h1{
  color:#fff!important;
  text-shadow:0 8px 28px rgba(0,0,0,.24)!important;
}

html.bapmu-night .balanced-story p,
body.bapmu-night .balanced-story p{
  color:#c7d2e7!important;
}

html.bapmu-night .balanced-story .brand-overline,
body.bapmu-night .balanced-story .brand-overline{
  color:#78a8ff!important;
}

/* Full-body Santa is part of the left hero column, UNDER the text. */
.balanced-story{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.bapmu-christmas-santa{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:118px!important;
  height:162px!important;
  margin:26px 0 0 120px!important;
  z-index:5!important;
  pointer-events:none;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.22));
  animation:santaBodyFloat 4.8s ease-in-out infinite;
}

/* Head */
.bapmu-christmas-santa .santa-head{
  position:absolute;
  left:35px;
  top:28px;
  width:50px;
  height:50px;
  border-radius:50%;
  background:#f2b27c;
  z-index:4;
}

.santa-eye{
  position:absolute;
  top:18px;
  width:4px;
  height:5px;
  border-radius:50%;
  background:#243146;
}
.eye-left{left:14px}
.eye-right{right:14px}

.santa-nose{
  position:absolute;
  left:22px;
  top:25px;
  width:7px;
  height:6px;
  border-radius:50%;
  background:#e88f69;
}

/* Beard */
.santa-beard{
  position:absolute;
  left:4px;
  top:31px;
  width:42px;
  height:31px;
  border-radius:45% 45% 55% 55%;
  background:#fff;
  box-shadow:
    -7px 3px 0 -2px #fff,
    7px 3px 0 -2px #fff;
}

/* Hat */
.santa-hat{
  position:absolute;
  left:30px;
  top:8px;
  width:57px;
  height:35px;
  border-radius:60% 60% 12px 12px;
  background:#df2f36;
  transform:rotate(-7deg);
  z-index:5;
}

.santa-hat::after{
  content:"";
  position:absolute;
  left:-3px;
  right:-3px;
  bottom:-5px;
  height:10px;
  border-radius:8px;
  background:#fff;
}

.santa-pom{
  position:absolute;
  right:-8px;
  top:-2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
}

/* Body */
.bapmu-christmas-santa .santa-body{
  position:absolute!important;
  left:28px!important;
  top:76px!important;
  width:64px!important;
  height:62px!important;
  border-radius:27px 27px 20px 20px!important;
  background:#d92f36!important;
  font-size:0!important;
  z-index:2;
}

.santa-belt{
  position:absolute;
  left:0;
  right:0;
  top:35px;
  height:9px;
  background:#252525;
}

.santa-buckle{
  position:absolute;
  left:27px;
  top:31px;
  width:13px;
  height:13px;
  border:3px solid #f3c840;
  box-sizing:border-box;
  z-index:3;
}

/* Arms */
.santa-arm{
  position:absolute;
  top:83px;
  width:18px;
  height:57px;
  border-radius:12px;
  background:#d92f36;
  transform-origin:50% 8px;
  z-index:1;
}

.santa-arm-left{
  left:22px;
  transform:rotate(20deg);
}

.santa-arm-right{
  right:18px;
  transform:rotate(-35deg);
}

.santa-mitten{
  position:absolute;
  left:1px;
  bottom:-7px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#fff;
}

.waving-arm{
  animation:santaArmWave 1.4s ease-in-out infinite;
}

/* Legs */
.santa-leg{
  position:absolute;
  top:132px;
  width:19px;
  height:25px;
  border-radius:7px;
  background:#c9262d;
  z-index:0;
}

.santa-leg-left{left:38px}
.santa-leg-right{right:38px}

.santa-boot{
  position:absolute;
  bottom:-7px;
  width:25px;
  height:11px;
  border-radius:8px 9px 4px 4px;
  background:#222;
}

.santa-leg-left .santa-boot{left:-9px}
.santa-leg-right .santa-boot{right:-9px}

@keyframes santaArmWave{
  0%,100%{transform:rotate(-42deg)}
  50%{transform:rotate(-82deg)}
}

@keyframes santaBodyFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

@media(max-width:980px){
  .bapmu-christmas-santa{
    margin:22px auto 0!important;
    align-self:center!important;
    transform:scale(.9);
    transform-origin:top center;
  }
}

@media(prefers-reduced-motion:reduce){
  .bapmu-christmas-santa,
  .waving-arm{
    animation:none!important;
  }
}


/* ==========================================================
   BAPMU v10.44 — Santa visibility fix
   Overrides the old v10.41 high-specificity absolute position.
   ========================================================== */

body:has(.balanced-login-main) .balanced-story{
  overflow:visible!important;
}

body:has(.balanced-login-main) .bapmu-christmas-santa{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;

  width:118px!important;
  height:162px!important;

  margin:26px 0 6px 125px!important;
  align-self:flex-start!important;

  z-index:8!important;
  overflow:visible!important;

  display:block!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Make sure the main row grows to contain Santa instead of footer covering him. */
body:has(.balanced-login-main) .balanced-login-main{
  height:auto!important;
  min-height:720px!important;
  overflow:visible!important;
  align-items:center!important;
}

/* Full-body parts must remain visible over all old emoji-Santa rules. */
body:has(.balanced-login-main) .bapmu-christmas-santa .santa-head,
body:has(.balanced-login-main) .bapmu-christmas-santa .santa-hat,
body:has(.balanced-login-main) .bapmu-christmas-santa .santa-arm,
body:has(.balanced-login-main) .bapmu-christmas-santa .santa-leg{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}

/* Restore full-body geometry if older rules try to style .santa-body as emoji. */
body:has(.balanced-login-main) .bapmu-christmas-santa .santa-body{
  position:absolute!important;
  left:28px!important;
  top:76px!important;
  width:64px!important;
  height:62px!important;
  display:block!important;
  border-radius:27px 27px 20px 20px!important;
  background:#d92f36!important;
  font-size:0!important;
  line-height:0!important;
  opacity:1!important;
}

/* Remove legacy separate waving emoji if one ever remains in cached markup. */
body:has(.balanced-login-main) .bapmu-christmas-santa > .santa-wave{
  display:none!important;
}

@media(min-width:981px) and (max-width:1250px){
  body:has(.balanced-login-main) .bapmu-christmas-santa{
    margin-left:100px!important;
  }

  body:has(.balanced-login-main) .balanced-login-main{
    min-height:700px!important;
  }
}

@media(max-width:980px){
  body:has(.balanced-login-main) .bapmu-christmas-santa{
    margin:24px auto 8px!important;
    align-self:center!important;
  }

  body:has(.balanced-login-main) .balanced-login-main{
    min-height:auto!important;
  }
}


/* ==========================================================
   BAPMU v10.47 — unified auth/recovery flow
   forgot.php + recover.php + reset.php
   ========================================================== */

.recovery-public-page{min-height:100vh}

.recovery-main{
  position:relative;
  z-index:2;
  width:min(1180px,calc(100% - 48px));
  min-height:690px;
  margin:0 auto;
  padding:56px 0 62px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.recovery-card{
  width:420px;
  max-width:100%;
  box-sizing:border-box;
  padding:34px 30px 30px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(14,34,92,.80),rgba(8,28,75,.72));
  border:1px solid rgba(155,177,255,.34);
  box-shadow:0 26px 78px rgba(0,8,55,.40),inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter:blur(22px);
}

.recovery-logo{
  margin-bottom:18px;
  font-size:31px;
  letter-spacing:-1.6px;
}

.recovery-card h1{
  margin:0;
  color:#fff;
  text-align:center;
  font-size:28px;
  line-height:1.15;
  letter-spacing:-.7px;
}

.recovery-subtitle{
  max-width:350px;
  margin:12px auto 24px;
  color:#c7d2e7;
  text-align:center;
  font-size:13px;
  line-height:1.62;
}

.recovery-form{gap:14px}

.recovery-form label>span{
  margin-bottom:6px;
  color:#fff;
  font-size:12px;
  font-weight:700;
}

.recovery-form input[type="email"],
.recovery-form input[type="password"]{
  width:100%;
  height:46px;
  box-sizing:border-box;
  padding:0 14px;
  border:1px solid rgba(155,177,255,.38);
  border-radius:10px;
  background:rgba(13,44,105,.44);
  color:#fff;
  font-size:13px;
  outline:none;
}

.recovery-form input::placeholder{color:#aebcd3}

.recovery-form input:focus{
  border-color:#5e98ff;
  box-shadow:0 0 0 3px rgba(60,129,255,.15);
}

.recovery-form .mockup-primary,
.recovery-login-button{
  min-height:46px;
  font-size:13px;
}

.recovery-success,
.recovery-error,
.recovery-demo{
  margin:0 0 18px;
  padding:12px 13px;
  border-radius:10px;
  font-size:12px;
  line-height:1.55;
}

.recovery-success{
  border:1px solid rgba(111,218,153,.34);
  background:rgba(27,111,70,.25);
  color:#e0f9e9;
}

.recovery-error{
  border:1px solid rgba(255,128,128,.32);
  background:rgba(126,32,48,.25);
  color:#ffe5e8;
}

.recovery-demo{
  border:1px solid rgba(110,165,255,.28);
  background:rgba(30,70,145,.24);
  color:#dce9ff;
}

.recovery-demo strong,
.recovery-demo small{display:block}

.recovery-demo a{
  display:inline-block;
  margin:6px 0;
  color:#78adff;
  font-weight:800;
}

.recovery-back{
  display:block;
  margin-top:20px;
  color:#6ea5ff;
  text-align:center;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}

.recovery-back:hover{color:#fff}

.recovery-login-button{
  margin-top:10px;
}

/* Keep recovery cards dark/readable in daylight as well. */
html.bapmu-day .recovery-card,
body.bapmu-day .recovery-card{
  background:linear-gradient(180deg,rgba(18,49,115,.90),rgba(9,37,92,.84));
}

/* Same footer axis as login/register/policy pages. */
.recovery-public-page .public-footer-rich{
  width:min(1180px,calc(100% - 48px));
}

@media(min-width:981px) and (max-width:1250px){
  .recovery-main,
  .recovery-public-page .public-footer-rich{
    width:min(1000px,calc(100% - 48px));
  }
}

@media(max-width:700px){
  .recovery-main{
    width:min(100% - 28px,1180px);
    min-height:auto;
    padding:40px 0 48px;
  }

  .recovery-card{
    width:100%;
    max-width:400px;
    padding:28px 20px 26px;
  }

  .recovery-public-page .public-footer-rich{
    width:min(100% - 32px,1180px);
  }
}


/* ==========================================================
   BAPMU v10.48 — true mobile layout
   Desktop remains unchanged. Mobile gets its own proportions.
   ========================================================== */

@media (max-width: 700px) {

  html,
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }

  body.living-public-page{
    min-height:100dvh;
  }

  /* ---------- Living background ---------- */
  .living-sky{
    width:100vw;
    max-width:100vw;
    overflow:hidden!important;
  }

  .living-public-page .floating-card{
    width:46px!important;
    height:46px!important;
    border-radius:15px!important;
    font-size:21px!important;
    opacity:.58!important;
    backdrop-filter:blur(8px);
  }

  .living-public-page .fc-chat{
    left:10px!important;
    top:25%!important;
  }

  .living-public-page .fc-heart{
    right:8px!important;
    top:18%!important;
  }

  .living-public-page .fc-game{
    left:12px!important;
    top:54%!important;
  }

  .living-public-page .fc-smile{
    right:8px!important;
    top:43%!important;
  }

  .living-public-page .fc-world{
    right:10px!important;
    top:65%!important;
  }

  .sun,
  .moon{
    width:62px!important;
    height:62px!important;
    right:8%!important;
    top:9%!important;
  }

  /* ---------- Login ---------- */
  .balanced-login-main{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    margin:0!important;
    padding:
      max(28px, env(safe-area-inset-top))
      16px
      34px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:22px!important;
    align-items:stretch!important;
    box-sizing:border-box!important;
  }

  .balanced-story{
    position:relative!important;
    left:auto!important;
    width:100%!important;
    max-width:560px!important;
    margin:0 auto!important;
    padding:0 6px!important;
    display:block!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  .balanced-story .brand-overline{
    margin:0 0 12px!important;
    font-size:10px!important;
    line-height:1.3!important;
    letter-spacing:1.45px!important;
  }

  .balanced-story h1{
    width:100%!important;
    max-width:100%!important;
    margin:0 auto!important;
    font-size:clamp(31px,9.1vw,39px)!important;
    line-height:1.04!important;
    letter-spacing:-1.5px!important;
    text-align:center!important;
  }

  .balanced-story h1 span{
    display:block!important;
    white-space:normal!important;
  }

  .balanced-story p{
    width:100%!important;
    max-width:510px!important;
    margin:16px auto 0!important;
    padding:0 4px!important;
    font-size:15px!important;
    line-height:1.55!important;
    text-align:center!important;
    box-sizing:border-box!important;
  }

  .balanced-login-card{
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    padding:26px 20px 24px!important;
    justify-self:auto!important;
    border-radius:22px!important;
    box-sizing:border-box!important;
  }

  .balanced-login-card .mockup-logo{
    margin-bottom:12px!important;
    font-size:27px!important;
  }

  .balanced-login-card h2{
    font-size:27px!important;
  }

  .balanced-login-card .mockup-subtitle{
    margin:8px auto 20px!important;
    font-size:13px!important;
  }

  .balanced-login-card .mockup-form{
    gap:13px!important;
  }

  .balanced-login-card .mockup-form label>span{
    font-size:13px!important;
  }

  .balanced-login-card .mockup-form input[type="email"],
  .balanced-login-card .mockup-form input[type="password"]{
    height:50px!important;
    font-size:16px!important; /* prevents iOS input zoom */
    border-radius:11px!important;
  }

  .balanced-login-card .mockup-primary,
  .balanced-login-card .mockup-secondary{
    min-height:48px!important;
    font-size:14px!important;
  }

  .balanced-login-card .mockup-link{
    margin:13px 0!important;
  }

  .balanced-login-card .mockup-security{
    margin-top:15px!important;
    font-size:10px!important;
  }

  /* ---------- Register ---------- */
  .register-main{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    margin:0!important;
    padding:
      max(26px, env(safe-area-inset-top))
      16px
      34px!important;
    box-sizing:border-box!important;
  }

  .register-card{
    width:100%!important;
    max-width:460px!important;
    margin:0 auto!important;
    padding:27px 20px 25px!important;
    border-radius:22px!important;
    box-sizing:border-box!important;
  }

  .register-card .mockup-logo.large{
    margin-bottom:18px!important;
    font-size:35px!important;
  }

  .register-card h1{
    font-size:29px!important;
  }

  .register-card .register-subtitle{
    margin:11px auto 21px!important;
    font-size:13px!important;
    line-height:1.5!important;
  }

  .register-card .mockup-form{
    gap:13px!important;
  }

  .register-card .mockup-form input[type="text"],
  .register-card .mockup-form input[type="email"],
  .register-card .mockup-form input[type="password"],
  .register-card .mockup-form input[type="date"]{
    height:49px!important;
    font-size:16px!important;
  }

  .register-card .mockup-check{
    font-size:12px!important;
  }

  /* ---------- Forgot / recover / reset ---------- */
  .recovery-main,
  .forgot-main{
    width:100%!important;
    max-width:100%!important;
    min-height:auto!important;
    margin:0!important;
    padding:
      max(34px, env(safe-area-inset-top))
      16px
      38px!important;
    box-sizing:border-box!important;
  }

  .recovery-card,
  .forgot-card{
    width:100%!important;
    max-width:430px!important;
    margin:0 auto!important;
    padding:28px 20px 25px!important;
    border-radius:22px!important;
    box-sizing:border-box!important;
  }

  .recovery-card h1,
  .forgot-card h1{
    font-size:27px!important;
  }

  .recovery-subtitle,
  .forgot-subtitle{
    font-size:13px!important;
    line-height:1.55!important;
  }

  .recovery-form input[type="email"],
  .recovery-form input[type="password"],
  .forgot-form input[type="email"]{
    height:50px!important;
    font-size:16px!important;
  }

  /* ---------- Legal / policy pages ---------- */
  .living-public-header{
    padding-top:max(7px,env(safe-area-inset-top))!important;
    margin-top:0!important;
  }

  .living-header-inner{
    width:100%!important;
    max-width:100%!important;
    min-height:54px!important;
    padding:0 14px!important;
    box-sizing:border-box!important;
  }

  .living-header-logo{
    font-size:21px!important;
  }

  .living-header-inner nav{
    gap:7px!important;
    top:0!important;
  }

  .legal-living-page .living-header .living-header-inner nav a,
  .legal-living-page .living-header .living-header-inner nav a.header-primary{
    width:auto!important;
    min-width:92px!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 12px!important;
    border-radius:10px!important;
    font-size:12px!important;
  }

  .living-legal-main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:22px 14px 38px!important;
    box-sizing:border-box!important;
  }

  .living-legal-hero,
  .living-legal-card{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  .living-legal-hero{
    padding:22px 18px 23px!important;
    border-radius:18px!important;
  }

  .living-legal-hero h1{
    font-size:30px!important;
    line-height:1.08!important;
  }

  .living-legal-hero>p{
    font-size:14px!important;
    line-height:1.58!important;
  }

  .living-legal-section{
    padding:22px 18px 24px!important;
  }

  .living-legal-section h2{
    font-size:19px!important;
  }

  .living-legal-section p,
  .living-legal-section li{
    font-size:13px!important;
    line-height:1.65!important;
  }

  /* ---------- Footer ---------- */
  .public-footer-rich,
  .living-public-page .public-footer-rich,
  .legal-living-page .public-footer-rich,
  .recovery-public-page .public-footer-rich,
  .forgot-public-page .public-footer-rich{
    width:calc(100% - 28px)!important;
    max-width:none!important;
    margin:0 14px calc(14px + env(safe-area-inset-bottom))!important;
    border-radius:18px!important;
    box-sizing:border-box!important;
  }

  .public-footer-grid,
  body.legal-living-page .public-footer-grid{
    grid-template-columns:1fr 1fr!important;
    gap:22px 18px!important;
    padding:22px 18px 18px!important;
  }

  .footer-about,
  body.legal-living-page .footer-about{
    grid-column:1 / -1!important;
  }

  .footer-logo{
    font-size:24px!important;
  }

  .public-footer-grid h3{
    font-size:12px!important;
  }

  .public-footer-grid p,
  .public-footer-grid a{
    font-size:11px!important;
  }

  .public-footer-bottom,
  body.legal-living-page .public-footer-bottom{
    margin:0 18px!important;
    padding:13px 0 16px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:5px!important;
    font-size:10px!important;
  }

  /* ---------- Christmas Santa ---------- */
  body:has(.balanced-login-main) .bapmu-christmas-santa{
    width:92px!important;
    height:128px!important;
    margin:18px auto 0!important;
    align-self:center!important;
    transform:scale(.78)!important;
    transform-origin:top center!important;
  }

}

/* Extra-small iPhones */
@media (max-width: 390px) {

  .balanced-login-main{
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .balanced-story h1{
    font-size:30px!important;
  }

  .balanced-story p{
    font-size:14px!important;
  }

  .balanced-login-card,
  .register-card,
  .recovery-card,
  .forgot-card{
    padding-left:17px!important;
    padding-right:17px!important;
  }

  .public-footer-grid,
  body.legal-living-page .public-footer-grid{
    grid-template-columns:1fr!important;
  }

  .footer-about,
  body.legal-living-page .footer-about{
    grid-column:auto!important;
  }
}

/* ==========================================================
   BAPMU v10.61 — platform-independent Danish flag
   ========================================================== */
.dk-flag{
  position:relative;
  display:inline-block;
  width:20px;
  height:14px;
  margin-left:5px;
  vertical-align:-2px;
  border-radius:2px;
  overflow:hidden;
  background:#c8102e;
  box-shadow:0 0 0 1px rgba(255,255,255,.10);
}
.dk-flag::before,
.dk-flag::after{
  content:"";
  position:absolute;
  background:#fff;
}
.dk-flag::before{
  left:6px;
  top:0;
  width:2px;
  height:100%;
}
.dk-flag::after{
  left:0;
  top:6px;
  width:100%;
  height:2px;
}


/* BAPMU Social Admin Layer */
.official-admin-badge{display:inline-flex;align-items:center;gap:.28rem;margin-left:.4rem;padding:.18rem .5rem;border-radius:999px;font-size:.72rem;font-weight:800;vertical-align:middle;background:rgba(88,78,190,.12);border:1px solid rgba(88,78,190,.28)}
.social-admin-panel{border:1px solid rgba(165,64,64,.28)!important;background:rgba(165,64,64,.045)!important}
.social-admin-actions{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin-top:.7rem}.social-admin-inline{display:inline-flex;margin:0}.social-admin-strip{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;padding:.45rem .6rem;margin:-.25rem 0 .5rem;border-radius:12px;background:rgba(165,64,64,.07);font-size:.78rem;font-weight:800}.social-admin-strip .danger,.social-admin-actions .danger{width:auto}.social-admin-inline button{margin:0}


/* BAPMU v10.87 — passkey setup readability
   setup-two-factor.php uses a permanently light auth card.
   Keep its heading and introductory copy dark regardless of global
   day/night or inherited authentication-theme text colours. */
body.auth .auth-card.security-setup,
body.auth .security-setup {
  color:#16151d !important;
}

body.auth .auth-card.security-setup h1,
body.auth .security-setup h1 {
  color:#16151d !important;
  -webkit-text-fill-color:#16151d !important;
  opacity:1 !important;
  text-shadow:none !important;
}

body.auth .auth-card.security-setup > p,
body.auth .security-setup > p {
  color:#55515f !important;
  -webkit-text-fill-color:#55515f !important;
  opacity:1 !important;
  text-shadow:none !important;
  line-height:1.55;
}


/* BAPMU v10.88 — recovery code readability + download */
body.auth .security-setup #codes,
body.auth .auth-card.security-setup #codes {
  color:#16151d !important;
}

body.auth .security-setup #codes h2,
body.auth .auth-card.security-setup #codes h2 {
  color:#16151d !important;
  -webkit-text-fill-color:#16151d !important;
  opacity:1 !important;
  text-shadow:none !important;
}

body.auth .security-setup #codes > p,
body.auth .auth-card.security-setup #codes > p {
  color:#55515f !important;
  -webkit-text-fill-color:#55515f !important;
  opacity:1 !important;
  text-shadow:none !important;
}

body.auth .security-setup .recovery-grid code,
body.auth .auth-card.security-setup .recovery-grid code {
  background:#f0f2f5 !important;
  color:#16151d !important;
  -webkit-text-fill-color:#16151d !important;
  border:1px solid #d9dce3;
  font-size:1rem;
  letter-spacing:.04em;
  opacity:1 !important;
  text-shadow:none !important;
}

.recovery-actions {
  display:grid;
  gap:10px;
  margin-top:16px;
}

.recovery-actions .button,
.recovery-actions button.button {
  width:100%;
  text-align:center;
  justify-content:center;
}

.recovery-download {
  background:#1877f2;
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
}

@media(max-width:520px){
  .recovery-grid{grid-template-columns:1fr}
}


/* =========================================================
   BAPMU v10.89 — Professional Social Feed
   A dedicated social app shell. Scoped to body.social-app so
   authentication and Control Center designs remain untouched.
   ========================================================= */
body.social-app{--social-blue:#1877f2;--social-blue-dark:#0f62d6;--social-bg:#f0f2f5;--social-card:#fff;--social-text:#1c1e21;--social-muted:#65676b;--social-border:#e4e6eb;--social-hover:#f2f3f5;--social-green:#31a24c;margin:0;background:var(--social-bg)!important;color:var(--social-text)!important;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif!important;line-height:1.35;min-height:100vh;padding-top:68px}
body.social-app *{box-sizing:border-box}body.social-app a{color:inherit;text-decoration:none}body.social-app button,body.social-app input,body.social-app textarea,body.social-app select{font:inherit}body.social-app img{max-width:100%}
.social-topbar{position:fixed!important;z-index:1200;top:0;left:0;right:0;height:68px;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(18px);border-bottom:1px solid var(--social-border);box-shadow:0 1px 3px rgba(0,0,0,.08);display:grid!important;grid-template-columns:minmax(280px,1fr) minmax(420px,600px) minmax(280px,1fr);align-items:center;padding:0 18px!important;margin:0!important;color:var(--social-text)!important}
.social-topbar-left,.social-topbar-actions{display:flex;align-items:center;gap:10px}.social-topbar-actions{justify-content:flex-end}.social-brand{display:flex;align-items:center;gap:8px;font-weight:800}.social-brand-mark{width:42px;height:42px;border-radius:13px;background:linear-gradient(145deg,#2c86ff,#1264dc);display:grid;place-items:center;color:#fff;font:800 29px/1 Georgia,serif;box-shadow:0 5px 15px rgba(24,119,242,.25)}.social-brand-word{font-size:22px;letter-spacing:-.7px;color:#1468d8}.social-search{height:42px;min-width:210px;max-width:330px;flex:1;background:#f0f2f5;border:1px solid transparent;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 14px;color:#65676b}.social-search:focus-within{background:#fff;border-color:#cfe0fa;box-shadow:0 0 0 3px rgba(24,119,242,.08)}.social-search input{border:0!important;background:transparent!important;outline:0!important;width:100%;padding:0!important;color:#1c1e21!important;box-shadow:none!important}.social-search input::placeholder{color:#65676b!important}
.social-topnav{height:100%;display:flex!important;align-items:stretch;justify-content:center;gap:4px;overflow:visible!important}.social-topnav a{min-width:82px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;position:relative;border-radius:8px;color:#65676b!important}.social-topnav a:hover{background:#f5f6f7}.social-topnav a.active{color:var(--social-blue)!important}.social-topnav a.active:after{content:"";height:3px;background:var(--social-blue);position:absolute;left:8px;right:8px;bottom:0;border-radius:3px 3px 0 0}.social-topnav span{font-size:24px;line-height:1}.social-topnav small{font-size:11px;font-weight:600}.top-action{width:42px;height:42px;border-radius:50%;background:#e4e6eb;display:grid;place-items:center;font-size:20px;position:relative}.top-action:hover{background:#d8dadf}.top-action b{position:absolute;right:-3px;top:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:10px;background:#e41e3f;color:#fff;font-size:10px;display:grid;place-items:center;border:2px solid #fff}.top-profile{display:flex;align-items:center;gap:8px;padding:5px 9px 5px 5px;border-radius:24px;font-weight:700}.top-profile:hover{background:#f0f2f5}.top-profile>span{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top-avatar,.sidebar-avatar,.composer-avatar,.post-avatar,.comment-avatar,.contact-avatar,.story-avatar{overflow:hidden;border-radius:50%;object-fit:cover;background:#dbe9fb;display:inline-grid;place-items:center;flex:0 0 auto}.top-avatar{width:34px!important;height:34px!important}.sidebar-avatar{width:44px!important;height:44px!important}.composer-avatar{width:44px!important;height:44px!important}.post-avatar{width:44px!important;height:44px!important}.comment-avatar{width:34px!important;height:34px!important}.contact-avatar{width:38px!important;height:38px!important}.story-avatar{width:54px!important;height:54px!important}.top-avatar img,.sidebar-avatar img,.composer-avatar img,.post-avatar img,.comment-avatar img,.contact-avatar img,.story-avatar img{width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important}
.social-layout{width:min(1500px,100%);margin:0 auto;display:grid;grid-template-columns:300px minmax(0,680px) 330px;gap:26px;justify-content:center;padding:24px 22px 60px}.social-left-sidebar,.social-right-sidebar{position:sticky;top:92px;align-self:start;max-height:calc(100vh - 110px);overflow:auto;scrollbar-width:none}.social-left-sidebar::-webkit-scrollbar,.social-right-sidebar::-webkit-scrollbar{display:none}.social-feed-column{min-width:0;width:100%;padding:0!important;margin:0!important;max-width:none!important}.sidebar-profile{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;margin-bottom:8px}.sidebar-profile:hover{background:#e4e6eb}.sidebar-profile div{min-width:0}.sidebar-profile strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-profile small{display:block;color:var(--social-muted);margin-top:2px}.sidebar-nav{display:grid!important;gap:2px!important;overflow:visible!important}.sidebar-nav>a{display:flex;align-items:center;gap:13px;padding:10px;border-radius:10px;min-height:52px}.sidebar-nav>a:hover{background:#e4e6eb}.sidebar-nav>a>span{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#e7f3ff;color:#1877f2;font-size:19px}.sidebar-nav>a>div{flex:1;min-width:0}.sidebar-nav strong{display:block;font-size:14px}.sidebar-nav small{display:block;color:var(--social-muted);font-size:12px;margin-top:2px}.sidebar-nav em{background:#e41e3f;color:#fff;min-width:22px;height:22px;border-radius:12px;padding:0 6px;display:grid;place-items:center;font-style:normal;font-size:11px}.sidebar-nav .admin-link>span{background:#f3e8ff;color:#7b2cbf}.sidebar-section{border-top:1px solid #d8dadf;margin-top:12px;padding-top:14px}.sidebar-section-head,.right-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.sidebar-section-head strong,.right-card-head strong{font-size:15px;color:#65676b}.sidebar-section-head a,.right-card-head a{font-size:12px;color:#1877f2!important}.mini-link{display:flex;align-items:center;gap:10px;padding:8px;border-radius:9px;font-size:13px;font-weight:600}.mini-link:hover{background:#e4e6eb}.mini-icon{width:32px;height:32px;background:#fff;border-radius:8px;display:grid;place-items:center;color:#1877f2}.sidebar-footer{display:flex;flex-wrap:wrap;gap:5px 8px;padding:16px 8px;color:#8a8d91;font-size:11px}.sidebar-footer a:hover{text-decoration:underline}
.social-card{background:var(--social-card)!important;border:1px solid rgba(0,0,0,.05)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(0,0,0,.10)!important;color:var(--social-text)!important}.feed-alert{background:#fff;border:1px solid #d7e6fb;border-left:4px solid #1877f2;border-radius:12px;padding:13px 15px;margin-bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:14px}.feed-alert div{display:flex;flex-direction:column;gap:2px}.feed-alert span{color:#65676b;font-size:13px}.feed-alert>a{color:#1877f2!important;font-weight:700}.success-alert{border-left-color:#31a24c}.error-alert{border-left-color:#e41e3f;color:#b42337}.school-state{display:flex;align-items:center;gap:16px;padding:22px;margin-bottom:16px}.school-state h2{margin:0 0 5px;font-size:20px}.school-state p{margin:0;color:#65676b}.school-state .mode-icon{font-size:30px}
.stories-rail{display:grid;grid-auto-flow:column;grid-auto-columns:108px;gap:9px;overflow-x:auto;padding:2px 2px 14px;scrollbar-width:none}.stories-rail::-webkit-scrollbar{display:none}.story-card{height:174px;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#e6f0fd,#fff);box-shadow:0 1px 3px rgba(0,0,0,.16);position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding:10px 7px;color:#1c1e21!important}.story-card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,119,242,.05),rgba(24,119,242,.18));transition:.2s}.story-card:hover:before{background:linear-gradient(180deg,rgba(24,119,242,.1),rgba(24,119,242,.25))}.story-card strong{position:relative;z-index:2;font-size:12px;text-align:center;line-height:1.2;max-width:95px}.story-avatar-wrap{position:absolute;z-index:2;top:18px;left:50%;transform:translateX(-50%);width:64px;height:64px;border:3px solid #1877f2;padding:2px;border-radius:50%;background:#fff}.story-avatar-wrap .story-avatar{width:54px!important;height:54px!important}.create-story .story-avatar-wrap{border-color:#fff;box-shadow:0 0 0 3px #1877f2}.create-story .story-avatar-wrap>span{position:absolute;right:-5px;bottom:-5px;width:25px;height:25px;border-radius:50%;background:#1877f2;color:#fff;border:3px solid #fff;display:grid;place-items:center;font-size:17px;font-weight:800}.story-placeholder-art{position:absolute;top:28px;font-size:38px}
.composer-card{padding:13px 15px;margin-bottom:14px}.composer-primary{display:flex;gap:10px;align-items:flex-start}.composer-primary textarea{flex:1;min-height:44px!important;max-height:180px;padding:11px 16px!important;border:0!important;border-radius:24px!important;background:#f0f2f5!important;color:#1c1e21!important;resize:none!important;outline:none!important;box-shadow:none!important;font-size:16px;line-height:1.4}.composer-primary textarea::placeholder{color:#65676b!important}.composer-divider{height:1px;background:#e4e6eb;margin:12px 0 8px}.composer-toolbar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.composer-tool{height:42px;border:0!important;background:transparent!important;border-radius:8px!important;color:#65676b!important;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 8px!important;cursor:pointer;font-size:13px!important}.composer-tool:hover{background:#f2f3f5!important}.composer-tool span{font-size:20px}.composer-tool:first-child span{color:#45bd62}.composer-tool:nth-child(2) span{color:#f3425f}.composer-tool:nth-child(3) span{color:#f7b928}.composer-tool input{display:none}.composer-more{margin-top:8px;border-top:1px solid #f0f2f5;padding-top:8px}.composer-more summary{color:#65676b;cursor:pointer;font-size:12px}.poll-compose{margin-top:9px;display:grid;gap:8px}.poll-compose input{background:#f5f6f7!important;border:1px solid #e4e6eb!important;color:#1c1e21!important}.composer-submit{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:10px}.composer-submit select{border:0;background:#f0f2f5;border-radius:9px;padding:8px 10px;color:#1c1e21}.composer-submit button{border:0;border-radius:8px;background:#1877f2;color:#fff;font-weight:700;padding:9px 22px;cursor:pointer}.composer-submit button:hover{background:#166fe5}
.feed-tabs{background:#fff;border-radius:12px;border:1px solid rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.08);display:flex;padding:5px;margin-bottom:14px;overflow-x:auto}.feed-tabs a{flex:1;min-width:86px;text-align:center;padding:10px 8px;border-radius:8px;color:#65676b!important;font-size:13px;font-weight:700;position:relative}.feed-tabs a:hover{background:#f2f3f5}.feed-tabs a.active{color:#1877f2!important;background:#eef5ff}.feed-list{display:grid;gap:14px}.post-card{overflow:visible!important;padding:0!important;margin:0!important}.post-header{display:flex;align-items:center;gap:10px;padding:14px 16px 8px}.post-author-avatar{display:flex}.post-author-meta{flex:1;min-width:0}.post-author-meta>a{display:inline-flex;max-width:100%;font-size:15px}.post-author-meta>a:hover{text-decoration:underline}.post-author-meta strong{font-size:15px}.post-author-meta span{display:block;color:#65676b;font-size:12px;margin-top:2px}.post-menu{position:relative}.post-menu>summary{list-style:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#65676b;font-weight:800;cursor:pointer;letter-spacing:1px}.post-menu>summary::-webkit-details-marker{display:none}.post-menu>summary:hover{background:#f0f2f5}.post-menu-popover{position:absolute;right:0;top:42px;width:210px;background:#fff;border:1px solid #e4e6eb;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.16);padding:7px;z-index:30}.post-menu-popover>a,.post-menu-popover>form button{display:block;width:100%;text-align:left;border:0!important;background:transparent!important;color:#1c1e21!important;border-radius:7px;padding:9px!important;font-size:13px!important}.post-menu-popover>a:hover,.post-menu-popover>form button:hover{background:#f2f3f5!important}.post-menu-popover .danger{color:#b42337!important}.menu-separator{height:1px;background:#e4e6eb;margin:4px 0}.admin-menu-label{display:block;padding:5px 9px 3px;color:#7b2cbf;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.post-copy{padding:4px 16px 12px;font-size:15.5px;line-height:1.48;white-space:normal;color:#1c1e21}.post-hashtags{padding:0 16px 10px;display:flex;gap:7px;flex-wrap:wrap}.post-hashtags a{color:#1877f2!important;font-weight:600}.post-link-preview{display:flex;flex-direction:column;background:#f0f2f5;border-top:1px solid #e4e6eb;border-bottom:1px solid #e4e6eb;padding:12px 16px}.post-link-preview small{text-transform:uppercase;font-size:10px;color:#65676b}.post-link-preview strong{margin-top:3px}.post-gallery{display:grid!important;gap:2px!important;background:#000;max-height:720px;overflow:hidden;border-radius:0!important;margin:0!important}.post-gallery img,.post-gallery video{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;border-radius:0!important;max-height:720px}.post-gallery.count-2{grid-template-columns:1fr 1fr}.post-gallery.count-3,.post-gallery.count-4{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(180px,1fr))}.post-gallery.count-3>*:first-child{grid-row:1/3}.modern-poll{margin:4px 16px 12px;border:1px solid #e4e6eb;border-radius:10px;padding:12px;display:grid;gap:7px}.modern-poll>strong{margin-bottom:3px}.modern-poll form{margin:0}.modern-poll .poll-option{width:100%;display:flex;justify-content:space-between;gap:10px;background:#f0f2f5!important;color:#1c1e21!important;border:1px solid #e4e6eb!important;border-radius:8px!important;padding:10px!important}.modern-shared{margin:4px 16px 12px;border:1px solid #e4e6eb;border-radius:10px;padding:12px}.post-engagement{min-height:40px;margin:0 16px;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#65676b;font-size:12px;border-bottom:1px solid #e4e6eb}.post-engagement .reaction-picker{margin:0!important}.post-engagement form{margin:0}.post-actionbar{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;padding:4px 10px}.post-actionbar>a,.post-actionbar>span,.post-actionbar>details>summary,.post-actionbar>form>button{height:38px!important;border:0!important;background:transparent!important;border-radius:7px!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#65676b!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;padding:0 5px!important;list-style:none!important}.post-actionbar>a:hover,.post-actionbar>span:hover,.post-actionbar>details>summary:hover,.post-actionbar>form>button:hover{background:#f0f2f5!important}.post-actionbar details summary::-webkit-details-marker{display:none}.post-actionbar form{margin:0}.share-box{position:relative}.share-box>form{position:absolute;z-index:20;top:42px;right:0;width:260px;background:#fff;padding:10px;border:1px solid #e4e6eb;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.14)}.share-box input{width:100%;background:#f0f2f5!important;color:#1c1e21!important;border:0!important;margin-bottom:7px}.share-box button{width:100%;background:#1877f2!important;color:#fff!important;border:0!important;border-radius:7px!important;padding:8px!important}.post-edit-box{margin:0 16px 10px;border-top:1px solid #e4e6eb;padding-top:8px}.post-edit-box summary{cursor:pointer;color:#65676b;font-size:12px}.post-edit-box textarea{width:100%;margin-top:7px;background:#f0f2f5!important;color:#1c1e21!important;border:0!important;border-radius:8px!important}.post-comments{padding:0 16px}.comment-thread{margin-top:7px!important}.comment-card{display:flex!important;align-items:flex-start!important;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}.comment-main{display:inline-flex!important;flex-direction:column!important;background:#f0f2f5!important;border-radius:16px!important;padding:8px 11px!important;max-width:calc(100% - 20px)!important;color:#1c1e21!important}.comment-main strong{font-size:12px}.comment-main span{font-size:13px;margin-top:1px}.comment-main small{font-size:10px;color:#65676b}.comment-actions{display:flex!important;gap:7px!important;margin:3px 0 0 10px!important;font-size:11px!important}.comment-actions button,.comment-actions summary{border:0!important;background:transparent!important;color:#65676b!important;padding:2px 3px!important;font-size:11px!important;cursor:pointer}.comment-reactions{margin-left:10px;font-size:10px;color:#65676b}.comment-thread.depth-1,.comment-thread.depth-2,.comment-thread.depth-3{margin-left:24px!important}.comment-composer{display:flex!important;align-items:center!important;gap:8px!important;padding:10px 16px 14px!important;margin:0!important}.comment-composer input[name=body]{flex:1!important;background:#f0f2f5!important;border:0!important;border-radius:20px!important;padding:9px 13px!important;color:#1c1e21!important;outline:none!important}.comment-composer input::placeholder{color:#65676b!important}.comment-composer button{width:34px!important;height:34px!important;border-radius:50%!important;border:0!important;background:#e7f3ff!important;color:#1877f2!important;padding:0!important;display:grid!important;place-items:center!important}.feed-empty{text-align:center;padding:34px!important;color:#65676b}.feed-empty>div{font-size:36px}.feed-empty h2{color:#1c1e21;margin:8px 0 4px}.primary-link{display:inline-flex;background:#1877f2;color:#fff!important;border-radius:8px;padding:9px 14px;font-weight:700}.sponsored-post{padding:16px!important;margin-bottom:14px!important}.post-label{font-size:10px;text-transform:uppercase;color:#65676b;letter-spacing:.08em;font-weight:800}.sponsored-post h2{margin:7px 0 4px}
.social-right-sidebar{display:grid;gap:14px}.right-card{padding:6px 0 12px;border-bottom:1px solid #d8dadf}.right-card-head{padding:3px 8px}.notification-mini{display:flex;gap:8px;align-items:flex-start;padding:9px 8px;border-radius:9px;font-size:12px}.notification-mini:hover{background:#e4e6eb}.notification-dot{width:7px;height:7px;border-radius:50%;background:#bcc0c4;margin-top:5px;flex:0 0 auto}.notification-dot.unread{background:#1877f2}.contact-row{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;min-width:0}.contact-row:hover{background:#e4e6eb}.contact-row>span:last-child{min-width:0;flex:1}.contact-row strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.contact-row small{display:block;color:#65676b;font-size:11px;margin-top:1px}.contact-avatar-wrap{position:relative;display:flex}.contact-avatar-wrap>i{position:absolute;right:-1px;bottom:0;width:10px;height:10px;border-radius:50%;background:#31a24c;border:2px solid #f0f2f5}.muted-right{font-size:12px;color:#65676b;padding:0 8px}.social-mobile-nav{display:none}
@media(max-width:1180px){.social-topbar{grid-template-columns:260px 1fr 260px}.social-topnav a{min-width:68px}.social-topnav small{display:none}.social-layout{grid-template-columns:250px minmax(0,680px);max-width:1020px}.social-right-sidebar{display:none}.social-brand-word{display:none}}
@media(max-width:900px){body.social-app{padding-top:62px;padding-bottom:68px}.social-topbar{height:62px;grid-template-columns:1fr auto;padding:0 12px!important}.social-topnav{display:none!important}.social-topbar-left{min-width:0}.social-search{min-width:0;max-width:none}.social-topbar-actions .top-profile span{display:none}.social-layout{display:block;padding:12px 10px 30px;max-width:700px}.social-left-sidebar{display:none}.social-feed-column{width:100%}.social-mobile-nav{position:fixed;z-index:1300;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid #e4e6eb;box-shadow:0 -2px 8px rgba(0,0,0,.06);padding-bottom:env(safe-area-inset-bottom)}.social-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#65676b!important}.social-mobile-nav a.active{color:#1877f2!important}.social-mobile-nav span{font-size:19px}.social-mobile-nav small{font-size:9px;font-weight:700}.mobile-bottom{display:none!important}}
@media(max-width:560px){.social-topbar-actions .top-action:first-child{display:none}.social-search input{font-size:14px}.social-brand-mark{width:38px;height:38px}.social-layout{padding:8px 0 24px}.social-card,.feed-alert,.feed-tabs{border-left:0!important;border-right:0!important;border-radius:0!important}.stories-rail{padding:4px 8px 12px;grid-auto-columns:96px}.story-card{height:154px}.composer-card{margin-bottom:8px}.feed-tabs{margin-bottom:8px}.feed-list{gap:8px}.post-copy{font-size:15px}.post-gallery.count-3,.post-gallery.count-4{grid-template-rows:repeat(2,minmax(130px,1fr))}.post-actionbar{grid-template-columns:repeat(4,1fr)}.post-actionbar>a,.post-actionbar>span,.post-actionbar>details>summary,.post-actionbar>form>button{font-size:11px!important}.composer-toolbar strong{font-size:11px}.top-profile{display:none}.social-topbar{grid-template-columns:1fr auto}.social-topbar-left{width:100%}.social-search{flex:1}.comment-thread.depth-1,.comment-thread.depth-2,.comment-thread.depth-3{margin-left:14px!important}}


/* =========================================================
   BAPMU v10.90 – Login brand carried into the social network
   Same visual identity as login.php, while keeping the social
   network background light and suitable for a feed.
   ========================================================= */
:root{
  --accent:#3184ff;
  --accent-dark:#246fe0;
  --soft:#eaf3ff;
  --brand-blue:#3184ff;
  --brand-blue-soft:#6da0ff;
  --brand-navy:#071b4e;
  --brand-navy-2:#112465;
  --brand-text:#17213b;
  --brand-muted:#68758d;
  --brand-border:rgba(49,132,255,.20);
  --brand-shadow:0 18px 50px rgba(7,27,78,.09);
}

body{
  color:var(--brand-text);
}

/* BAPMU wordmark – matches login identity */
.brand,
.social-brand,
.mockup-logo{
  color:var(--brand-blue) !important;
  font-weight:900 !important;
  letter-spacing:-1.5px !important;
}

/* Main navigation */
.social-topbar{
  border-bottom:1px solid rgba(49,132,255,.14) !important;
  box-shadow:0 4px 22px rgba(7,27,78,.055) !important;
}
.social-logo{
  color:var(--brand-blue) !important;
  font-weight:900 !important;
  letter-spacing:-1.7px !important;
}
.top-icon:hover,
.top-icon.active{
  color:var(--brand-blue) !important;
  background:var(--soft) !important;
}

/* Cards use the same soft, premium rounded language as login */
.social-card,
.story-card,
.composer-card,
.feed-card,
.left-profile-card,
.right-card{
  border:1px solid var(--brand-border) !important;
  border-radius:24px !important;
  box-shadow:var(--brand-shadow) !important;
}

/* Headings and small BAPMU labels */
.social-shell h1,
.social-shell h2,
.social-shell h3,
.social-shell strong{
  color:var(--brand-text);
}
.social-shell .eyebrow,
.social-shell .section-label,
.social-shell .brand-overline{
  color:var(--brand-blue-soft) !important;
  font-weight:800;
  letter-spacing:1.2px;
}

/* Primary actions mirror login button identity */
.social-shell button:not(.ghost):not(.danger):not(.admin-action),
.social-shell .button:not(.ghost):not(.danger),
.social-shell .primary-action{
  background:var(--brand-blue) !important;
  border-radius:12px !important;
  box-shadow:0 8px 22px rgba(49,132,255,.18);
}
.social-shell button:not(.ghost):not(.danger):not(.admin-action):hover,
.social-shell .button:not(.ghost):not(.danger):hover{
  background:var(--accent-dark) !important;
}

/* Composer and controls */
.social-shell textarea:focus,
.social-shell input:focus,
.social-shell select:focus{
  border-color:rgba(49,132,255,.58) !important;
  box-shadow:0 0 0 3px rgba(49,132,255,.10);
  outline:none;
}
.composer-avatar,
.social-avatar,
.story-avatar{
  box-shadow:0 0 0 3px #fff,0 0 0 5px rgba(49,132,255,.28);
}

/* Feed interaction colour */
.feed-action:hover,
.feed-action.active,
.reaction-active,
.social-link{
  color:var(--brand-blue) !important;
}
.feed-action:hover{
  background:var(--soft) !important;
}

/* Left/right navigation */
.side-link:hover,
.side-link.active{
  background:var(--soft) !important;
  color:var(--brand-blue) !important;
}

/* Keep feed background intentionally different from login */
body.social-home,
.social-page{
  background:#f4f6fa !important;
}

/* Mobile bottom navigation keeps the same BAPMU identity */
.mobile-social-nav{
  border-top:1px solid rgba(49,132,255,.16) !important;
  box-shadow:0 -8px 28px rgba(7,27,78,.07) !important;
}
.mobile-social-nav a.active{
  color:var(--brand-blue) !important;
}


/* ==========================================================
   BAPMU v10.92 — unified social app + family controls
   ========================================================== */
.ui-icon{width:22px;height:22px;display:block;flex:0 0 auto}
.social-page{background:#f4f6fa;color:#17213b;min-height:100vh}
.universal-topbar{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.universal-topbar .social-topnav a{min-width:72px}
.universal-topbar .social-topnav .ui-icon{width:23px;height:23px}
.universal-topbar .social-search .ui-icon{width:18px;height:18px;color:#73809a}
.app-launcher{position:relative}.app-launcher>summary{list-style:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#eef3fb;color:#24324d;cursor:pointer}.app-launcher>summary::-webkit-details-marker{display:none}.app-launcher[open]>summary{background:#e2efff;color:#3184ff}.launcher-menu{position:absolute;right:0;top:50px;width:300px;padding:12px;background:#fff;border:1px solid rgba(49,132,255,.18);border-radius:18px;box-shadow:0 22px 60px rgba(7,27,78,.18);display:grid;grid-template-columns:1fr 1fr;gap:8px}.launcher-menu a{display:flex;gap:10px;align-items:center;padding:12px;border-radius:12px;color:#17213b;text-decoration:none;font-weight:750}.launcher-menu a:hover{background:#eef5ff;color:#3184ff}.launcher-menu .ui-icon{width:20px;height:20px}
.standard-page{width:min(1180px,calc(100% - 32px));margin:28px auto 80px}.standard-page>section{margin-bottom:18px}.standard-page .panel,.standard-page .social-card{border:1px solid rgba(49,132,255,.14);border-radius:22px;background:#fff;box-shadow:0 14px 42px rgba(7,27,78,.07)}
.page-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px 30px;margin-bottom:20px;background:linear-gradient(135deg,#fff 0%,#f5f9ff 100%);border:1px solid rgba(49,132,255,.14);border-radius:24px;box-shadow:0 14px 42px rgba(7,27,78,.07)}.page-hero h1{margin:.2rem 0;font-size:2rem}.page-hero p{margin:0;color:#66738a}.page-hero.compact{padding:24px 28px}
.social-feature-hub{background:linear-gradient(135deg,#0d2864,#18499a);border-radius:24px;padding:22px;margin-bottom:18px;color:#fff;box-shadow:0 18px 48px rgba(7,27,78,.16)}.feature-hub-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:16px}.feature-hub-head h2{color:#fff!important;margin:3px 0 0}.feature-hub-head .eyebrow{color:#9fc7ff!important}.feature-hub-head>a{color:#cfe3ff;text-decoration:none;font-weight:700}.feature-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.feature-hub-card{display:flex;align-items:center;gap:13px;padding:14px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);border-radius:16px;text-decoration:none;color:#fff;transition:.18s ease}.feature-hub-card:hover{background:rgba(255,255,255,.16);transform:translateY(-1px)}.feature-hub-icon{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.13)}.feature-hub-icon .ui-icon{width:24px;height:24px}.feature-hub-card div{display:grid;gap:2px;min-width:0}.feature-hub-card strong{color:#fff!important}.feature-hub-card small{color:#c9d9f5;font-size:.82rem;line-height:1.35}.feature-arrow{margin-left:auto;font-size:1.2rem;color:#a9c9ff}
.sidebar-nav a>span>.ui-icon,.sidebar-nav a>span.ui-icon{width:21px;height:21px}.sidebar-nav a span:has(.ui-icon){display:grid;place-items:center}
.content-section{padding:24px}.modern-people-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.modern-person-card{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:15px;border:1px solid #e5eaf2;border-radius:16px;background:#fff}.person-avatar{width:54px;height:54px;border-radius:50%;object-fit:cover;background:#e9f2ff;color:#3184ff;display:grid;place-items:center;font-size:1.2rem;font-weight:850}.modern-person-card>div{display:grid;gap:3px}.modern-person-card a{text-decoration:none;color:#17213b}.modern-person-card small{color:#73809a}.person-card-actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}.person-card-actions form{margin:0}.empty-state{text-align:center;padding:46px 20px}.empty-state .empty-icon{width:48px;height:48px;margin:auto;color:#7d9ed0}.empty-state h3{margin:12px 0 4px}.empty-state p{color:#73809a}
.profile-edit-card{padding:26px}.profile-tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:18px 0 22px}.profile-tool-grid>a{display:flex;gap:12px;align-items:center;padding:15px;border:1px solid #e4eaf4;border-radius:15px;text-decoration:none;color:#17213b;background:#fbfdff}.profile-tool-grid>a:hover{border-color:#b9d3ff;background:#f3f8ff}.profile-tool-grid .ui-icon{width:24px;height:24px;color:#3184ff}.profile-tool-grid span{display:grid;gap:2px}.profile-tool-grid small{color:#73809a}.profile-edit-card form>label{display:grid;gap:7px;margin:14px 0;font-weight:700}.profile-edit-card input[type=file]{padding:12px;border:1px dashed #bfcce0;border-radius:12px;background:#f8fbff}.profile-edit-card input[type=text],.profile-edit-card input:not([type]),.profile-edit-card textarea{border-radius:12px;border:1px solid #dbe3ee;padding:12px 13px;background:#fff}.profile-edit-card textarea{min-height:100px}
.parent-dashboard{max-width:1100px}.parent-control-block{margin-top:22px;padding-top:20px;border-top:1px solid #e8edf4}.control-toggle-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:14px 0 20px}.control-toggle{display:flex!important;align-items:center;gap:12px;padding:14px;border:1px solid #e1e8f2;border-radius:15px;background:#fbfdff;cursor:pointer}.control-toggle input{width:20px;height:20px;accent-color:#3184ff}.control-toggle span{display:grid;gap:2px}.control-toggle small{color:#73809a;font-weight:500}.weekday-row{display:flex;gap:8px;flex-wrap:wrap}.day-check{padding:9px 12px!important;border:1px solid #dce4ef;border-radius:12px;background:#f8fbff;display:flex!important;align-items:center;gap:6px!important}.day-check input{accent-color:#3184ff}.feature-blocked{max-width:620px;margin:70px auto;padding:42px;text-align:center}.feature-blocked-icon{width:74px;height:74px;border-radius:22px;margin:0 auto 16px;display:grid;place-items:center;background:#eaf3ff;color:#3184ff}.feature-blocked-icon .ui-icon{width:36px;height:36px}.feature-blocked p{color:#66738a;max-width:480px;margin:8px auto 22px}.feature-blocked .button{margin:5px}
.modern-mobile-nav .ui-icon{width:21px;height:21px;margin:auto}.modern-mobile-nav a{font-size:.72rem;gap:3px}
/* Existing feature pages receive the same BAPMU polish */
.standard-page .rooms-hero,.standard-page .worlds-hero,.standard-page .together-hero,.standard-page .games-hero{border-radius:24px;background:linear-gradient(135deg,#0d2864,#245cc1);color:#fff;padding:28px}.standard-page .rooms-hero h1,.standard-page .worlds-hero h1,.standard-page .together-hero h1,.standard-page .games-hero h1{color:#fff}.standard-page .rooms-hero .eyebrow,.standard-page .worlds-hero .eyebrow,.standard-page .together-hero .eyebrow,.standard-page .games-hero .eyebrow{color:#aed0ff!important}
@media(max-width:980px){.universal-topbar .social-topnav{display:none}.universal-topbar .social-search{max-width:260px}.feature-hub-grid,.modern-people-grid,.control-toggle-grid,.profile-tool-grid{grid-template-columns:1fr}.standard-page{width:min(100% - 20px,760px)}.launcher-menu{right:-80px}}
@media(max-width:640px){.universal-topbar{padding:8px 10px}.universal-topbar .social-brand-word,.universal-topbar .top-profile span,.universal-topbar .social-search{display:none}.social-feature-hub{padding:16px;border-radius:18px}.feature-hub-grid{grid-template-columns:1fr}.feature-hub-head h2{font-size:1.2rem}.standard-page{margin-top:14px}.page-hero{padding:20px;align-items:flex-start;flex-direction:column}.launcher-menu{position:fixed;left:10px;right:10px;top:62px;width:auto}.content-section{padding:17px}}


/* ==========================================================
   BAPMU v10.93 — compact navigation + visible family schedules
   ========================================================== */

/* Hard dimensions avoid browser default 300x150 SVG sizing even if older
   rules from a previous stylesheet are still present in memory. */
.social-topbar svg.ui-icon,
.universal-topbar svg.ui-icon,
.social-topnav svg,
.top-action svg,
.app-launcher svg,
.social-search svg {
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
  min-width:22px !important;
  min-height:22px !important;
  display:block !important;
  flex:0 0 22px !important;
}

.social-search svg.ui-icon {
  width:17px !important;
  height:17px !important;
  max-width:17px !important;
  max-height:17px !important;
  min-width:17px !important;
  min-height:17px !important;
  flex-basis:17px !important;
}

.social-topbar,
.universal-topbar {
  height:64px !important;
  min-height:64px !important;
  padding:0 16px !important;
}

.social-topnav {
  gap:2px !important;
  overflow:hidden !important;
}

.social-topnav a,
.universal-topbar .social-topnav a {
  min-width:54px !important;
  max-width:72px !important;
  padding:0 8px !important;
  gap:2px !important;
}

.social-topnav small {
  font-size:10px !important;
  line-height:1 !important;
}

.social-brand-mark {
  width:38px !important;
  height:38px !important;
  font-size:26px !important;
}

.top-action,
.app-launcher>summary {
  width:38px !important;
  height:38px !important;
}

.top-avatar {
  width:32px !important;
  height:32px !important;
}

/* Parent / child schedule UI */
.parent-dashboard {
  max-width:1120px !important;
}
.parent-dashboard>.panel {
  padding:28px !important;
}
.child-switcher {
  margin:22px 0;
  padding:14px 16px;
  border:1px solid #e4eaf3;
  border-radius:16px;
  background:#f8fbff;
}
.child-switcher>span {
  display:block;
  margin-bottom:7px;
  color:#69768c;
  font-size:.8rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.child-switcher .pill.active {
  background:#3184ff !important;
  color:#fff !important;
}
.parent-child-head {
  display:flex;
  align-items:center;
  gap:14px;
  margin:20px 0 8px;
}
.parent-child-head h2 {
  margin:2px 0 3px;
}
.parent-child-head p {
  margin:0;
}
.schedule-grid,
.parent-feature-overview {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin:22px 0;
}
.schedule-card {
  border:1px solid #dfe7f2;
  border-radius:22px;
  padding:22px;
  background:#fff;
  box-shadow:0 12px 34px rgba(7,27,78,.06);
}
.schedule-card.school-card {
  background:linear-gradient(145deg,#fff,#f5f9ff);
  border-color:#cfe0fb;
}
.schedule-card.sleep-card {
  background:linear-gradient(145deg,#fff,#f7f4ff);
  border-color:#ddd3fb;
}
.schedule-card-head {
  display:flex;
  gap:13px;
  align-items:flex-start;
  margin-bottom:18px;
}
.schedule-card h2 {
  margin:3px 0 5px;
  font-size:1.35rem;
}
.schedule-card p {
  margin:0;
  color:#6e7a8e;
  line-height:1.45;
}
.schedule-icon {
  width:48px;
  height:48px;
  flex:0 0 48px;
  border-radius:15px;
  display:grid;
  place-items:center;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.04em;
  color:#fff;
  background:#3184ff;
  box-shadow:0 8px 20px rgba(49,132,255,.22);
}
.sleep-card .schedule-icon {
  background:#7557d6;
  box-shadow:0 8px 20px rgba(117,87,214,.20);
}
.time-pair {
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:end;
  gap:10px;
  margin-top:14px;
}
.time-pair label {
  margin:0 !important;
}
.time-pair label>span {
  font-size:.82rem;
  color:#657188;
}
.time-pair input[type=time] {
  width:100%;
  min-height:48px;
  font-size:1.1rem;
  font-weight:800;
  color:#18243a;
  background:#fff;
  border:1px solid #cfdae8;
}
.time-arrow {
  padding-bottom:14px;
  color:#8a96a8;
  font-size:1.25rem;
}
.schedule-summary,
.schedule-example {
  margin-top:15px;
  padding:11px 13px;
  border-radius:12px;
  background:rgba(49,132,255,.07);
  color:#52617a;
  font-size:.86rem;
  line-height:1.45;
}
.sleep-card .schedule-summary,
.sleep-card .schedule-example {
  background:rgba(117,87,214,.07);
}
.location-card {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin:20px 0;
  padding:18px 20px;
  border:1px solid #e3e9f1;
  border-radius:18px;
  background:#fbfcfe;
}
.location-card h3 {
  margin:3px 0;
}
.location-card p {
  margin:0;
}
.compact-grid {
  min-width:420px;
  margin:0 !important;
}
.parent-savebar {
  position:sticky;
  bottom:14px;
  z-index:20;
  margin-top:22px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid rgba(49,132,255,.22);
  border-radius:16px;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px);
  box-shadow:0 15px 40px rgba(7,27,78,.12);
}
.parent-savebar div {
  display:grid;
  gap:2px;
}
.parent-savebar span {
  color:#748096;
  font-size:.82rem;
}
.parent-empty {
  display:grid !important;
  gap:9px;
  justify-items:center;
  margin-top:18px;
}
.parent-empty span {
  color:#707d91;
}
.family-parent-cta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:20px 0;
  padding:17px 18px;
  border:1px solid #cfe0fb;
  border-radius:18px;
  background:linear-gradient(135deg,#f6faff,#fff);
}
.family-parent-cta>div {
  display:grid;
  gap:3px;
}
.family-parent-cta small {
  color:#6d7a90;
}

@media(max-width:1180px){
  .social-topbar {
    grid-template-columns:minmax(230px,1fr) auto minmax(210px,1fr) !important;
  }
  .social-topnav a,
  .universal-topbar .social-topnav a {
    min-width:46px !important;
    max-width:54px !important;
  }
  .social-topnav small {
    display:none !important;
  }
}
@media(max-width:980px){
  .social-topnav{display:none !important}
}
@media(max-width:760px){
  .schedule-grid,
  .parent-feature-overview {
    grid-template-columns:1fr;
  }
  .location-card,
  .family-parent-cta,
  .parent-savebar {
    align-items:stretch;
    flex-direction:column;
  }
  .compact-grid {
    min-width:0;
    width:100%;
  }
  .time-pair {
    grid-template-columns:1fr;
  }
  .time-arrow {
    display:none;
  }
  .parent-dashboard>.panel {
    padding:18px !important;
  }
}


/* ==========================================================
   BAPMU v10.94 — Messenger is a first-class social feature
   ========================================================== */
.messenger-top-action{
  color:#3184ff !important;
}
.messenger-top-action:hover{
  background:#eaf3ff !important;
}
@media(min-width:1181px){
  .universal-topbar .social-topnav a[href="messages.php"]{
    color:#526078 !important;
  }
  .universal-topbar .social-topnav a[href="messages.php"].active{
    color:#3184ff !important;
  }
}


/* ==========================================================
   BAPMU v10.96 — Facebook-style Like / reaction interaction
   ========================================================== */
.post-engagement{
  min-height:34px;
}
.facebook-reaction-summary{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:24px;
}
.facebook-reaction-summary.is-empty{min-height:0}
.summary-icons{
  display:flex;
  align-items:center;
}
.summary-reaction{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  border:2px solid #fff;
  font-size:14px;
  line-height:1;
  margin-left:-4px;
  box-shadow:0 1px 2px rgba(0,0,0,.12);
}
.summary-reaction:first-child{margin-left:0}
.summary-total{
  color:#65676b;
  font-size:.9rem;
}
.post-actionbar{
  overflow:visible !important;
}
.facebook-like-control{
  position:relative;
  flex:1 1 0;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.facebook-like-form{
  width:100%;
  margin:0 !important;
}
.facebook-like-button{
  width:100%;
  min-height:40px;
  display:flex !important;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  color:#65676b !important;
  box-shadow:none !important;
  font-weight:700 !important;
  cursor:pointer;
}
.facebook-like-button:hover{
  background:#f0f2f5 !important;
}
.facebook-like-control.has-reaction .facebook-like-button{
  color:#1877f2 !important;
}
.facebook-like-control.reaction-love .facebook-like-button,
.facebook-like-control.reaction-angry .facebook-like-button{
  color:#e41e3f !important;
}
.facebook-like-control.reaction-care .facebook-like-button,
.facebook-like-control.reaction-haha .facebook-like-button,
.facebook-like-control.reaction-wow .facebook-like-button,
.facebook-like-control.reaction-sad .facebook-like-button{
  color:#f7b125 !important;
}
.current-reaction{
  font-size:19px;
  line-height:1;
}
.like-thumb{
  width:20px;
  height:20px;
  display:grid;
  place-items:center;
  font-size:21px;
  line-height:1;
  transform:rotate(-12deg);
  color:inherit;
}
.facebook-reaction-picker{
  position:absolute;
  z-index:80;
  left:50%;
  bottom:calc(100% + 7px);
  transform:translate(-50%,10px) scale(.94);
  display:flex;
  align-items:flex-end;
  gap:2px;
  width:max-content;
  padding:6px 8px;
  margin:0 !important;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  background:#fff;
  box-shadow:0 4px 18px rgba(0,0,0,.20);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform-origin:50% 100%;
  transition:opacity .13s ease,transform .13s ease,visibility .13s ease;
}
.facebook-like-control:hover .facebook-reaction-picker,
.facebook-like-control:focus-within .facebook-reaction-picker,
.facebook-like-control.picker-open .facebook-reaction-picker{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
.facebook-reaction{
  width:40px !important;
  height:40px !important;
  min-width:40px !important;
  padding:0 !important;
  display:grid !important;
  place-items:center;
  border:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:transform .12s ease;
}
.facebook-reaction span{
  display:block;
  font-size:29px;
  line-height:1;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.12));
}
.facebook-reaction:hover,
.facebook-reaction:focus{
  transform:translateY(-8px) scale(1.25);
  outline:none;
}
.facebook-reaction:hover:after,
.facebook-reaction:focus:after{
  content:attr(title);
  position:absolute;
  top:-25px;
  padding:4px 7px;
  border-radius:999px;
  background:#1c1e21;
  color:#fff;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}
@media(max-width:640px){
  .facebook-reaction-picker{
    gap:0;
    padding:5px 6px;
  }
  .facebook-reaction{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
  }
  .facebook-reaction span{font-size:26px}
}


/* ==========================================================
   BAPMU v10.99 — polished floating reaction bar
   ========================================================== */

/* The like cell must never wrap or clip the picker. */
.post-actionbar,
.facebook-like-control{
  overflow:visible !important;
}
.facebook-like-control{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* One floating horizontal pill, hidden until hover/focus/long-press. */
.facebook-reaction-picker{
  position:absolute !important;
  z-index:9999 !important;
  left:50% !important;
  bottom:calc(100% + 10px) !important;
  transform:translate(-50%,12px) scale(.88) !important;
  transform-origin:50% 100% !important;

  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:3px !important;

  width:max-content !important;
  min-width:0 !important;
  max-width:none !important;
  height:54px !important;
  margin:0 !important;
  padding:5px 8px !important;

  border:1px solid rgba(0,0,0,.10) !important;
  border-radius:999px !important;
  background:#fff !important;
  box-shadow:
    0 8px 28px rgba(0,0,0,.18),
    0 2px 7px rgba(0,0,0,.10) !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  white-space:nowrap !important;

  transition:
    opacity .14s ease,
    transform .18s cubic-bezier(.2,.9,.2,1.25),
    visibility .14s ease !important;
}

/* Small invisible bridge prevents the bar disappearing while moving upward. */
.facebook-reaction-picker::after{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:-14px !important;
  height:16px !important;
  background:transparent !important;
}

.facebook-like-control:hover .facebook-reaction-picker,
.facebook-like-control:focus-within .facebook-reaction-picker,
.facebook-like-control.picker-open .facebook-reaction-picker{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translate(-50%,0) scale(1) !important;
}

/* Kill all inherited global blue button styling. */
.facebook-reaction-picker .facebook-reaction{
  position:relative !important;
  flex:0 0 42px !important;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  min-height:42px !important;
  max-width:42px !important;
  max-height:42px !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  margin:0 !important;
  padding:0 !important;

  border:0 !important;
  outline:0 !important;
  border-radius:50% !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:inherit !important;

  cursor:pointer !important;
  appearance:none !important;
  -webkit-appearance:none !important;

  transform:translateY(0) scale(1) !important;
  transition:
    transform .15s cubic-bezier(.2,.9,.2,1.35),
    filter .15s ease !important;
}

.facebook-reaction-picker .facebook-reaction span{
  display:block !important;
  width:auto !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;

  font-size:31px !important;
  line-height:1 !important;
  transform:scale(.94);
  transition:transform .15s cubic-bezier(.2,.9,.2,1.35) !important;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.14));
}

.facebook-reaction-picker .facebook-reaction:hover,
.facebook-reaction-picker .facebook-reaction:focus-visible{
  transform:translateY(-9px) scale(1.20) !important;
  background:transparent !important;
  box-shadow:none !important;
}

.facebook-reaction-picker .facebook-reaction:hover span,
.facebook-reaction-picker .facebook-reaction:focus-visible span{
  transform:scale(1.10) !important;
}

/* Compact tooltip above the hovered reaction. */
.facebook-reaction-picker .facebook-reaction::before{
  content:attr(title) !important;
  position:absolute !important;
  left:50% !important;
  bottom:calc(100% + 10px) !important;
  transform:translateX(-50%) translateY(4px) !important;

  padding:5px 8px !important;
  border-radius:999px !important;
  background:#1c1e21 !important;
  color:#fff !important;

  font-size:10px !important;
  font-weight:700 !important;
  line-height:1 !important;
  white-space:nowrap !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transition:opacity .12s ease,transform .12s ease !important;
}

.facebook-reaction-picker .facebook-reaction:hover::before,
.facebook-reaction-picker .facebook-reaction:focus-visible::before{
  opacity:1 !important;
  visibility:visible !important;
  transform:translateX(-50%) translateY(0) !important;
}

/* Disable the older tooltip implementation. */
.facebook-reaction-picker .facebook-reaction::after{
  content:none !important;
  display:none !important;
}

/* Main Like button remains a clean normal action row item. */
.facebook-like-button{
  min-height:40px !important;
  border:0 !important;
  border-radius:8px !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  color:#65676b !important;
}
.facebook-like-button:hover{
  background:#f0f2f5 !important;
}
.facebook-like-control.has-reaction .facebook-like-button{
  background:transparent !important;
}

/* Animated entrance for each emoji when the bar opens. */
.facebook-like-control:hover .facebook-reaction:nth-child(1),
.facebook-like-control:focus-within .facebook-reaction:nth-child(1),
.facebook-like-control.picker-open .facebook-reaction:nth-child(1){animation:bapmuReactionPop .20s .00s both}
.facebook-like-control:hover .facebook-reaction:nth-child(2),
.facebook-like-control:focus-within .facebook-reaction:nth-child(2),
.facebook-like-control.picker-open .facebook-reaction:nth-child(2){animation:bapmuReactionPop .20s .025s both}
.facebook-like-control:hover .facebook-reaction:nth-child(3),
.facebook-like-control:focus-within .facebook-reaction:nth-child(3),
.facebook-like-control.picker-open .facebook-reaction:nth-child(3){animation:bapmuReactionPop .20s .05s both}
.facebook-like-control:hover .facebook-reaction:nth-child(4),
.facebook-like-control:focus-within .facebook-reaction:nth-child(4),
.facebook-like-control.picker-open .facebook-reaction:nth-child(4){animation:bapmuReactionPop .20s .075s both}
.facebook-like-control:hover .facebook-reaction:nth-child(5),
.facebook-like-control:focus-within .facebook-reaction:nth-child(5),
.facebook-like-control.picker-open .facebook-reaction:nth-child(5){animation:bapmuReactionPop .20s .10s both}
.facebook-like-control:hover .facebook-reaction:nth-child(6),
.facebook-like-control:focus-within .facebook-reaction:nth-child(6),
.facebook-like-control.picker-open .facebook-reaction:nth-child(6){animation:bapmuReactionPop .20s .125s both}
.facebook-like-control:hover .facebook-reaction:nth-child(7),
.facebook-like-control:focus-within .facebook-reaction:nth-child(7),
.facebook-like-control.picker-open .facebook-reaction:nth-child(7){animation:bapmuReactionPop .20s .15s both}

@keyframes bapmuReactionPop{
  0%{opacity:0;transform:translateY(7px) scale(.72)}
  70%{opacity:1;transform:translateY(-2px) scale(1.06)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:640px){
  .facebook-reaction-picker{
    height:50px !important;
    gap:1px !important;
    padding:4px 6px !important;
  }
  .facebook-reaction-picker .facebook-reaction{
    flex-basis:38px !important;
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
    max-width:38px !important;
    max-height:38px !important;
  }
  .facebook-reaction-picker .facebook-reaction span{
    font-size:28px !important;
  }
}


/* ==========================================================
   BAPMU v11.00 — living / animated reactions
   ========================================================== */

/* Base animation is intentionally subtle. */
.facebook-like-control:hover .facebook-reaction.reaction-like span,
.facebook-like-control:focus-within .facebook-reaction.reaction-like span,
.facebook-like-control.picker-open .facebook-reaction.reaction-like span{
  animation:bapmuLikeAlive 1.45s .15s ease-in-out infinite;
}
.facebook-like-control:hover .facebook-reaction.reaction-love span,
.facebook-like-control:focus-within .facebook-reaction.reaction-love span,
.facebook-like-control.picker-open .facebook-reaction.reaction-love span{
  animation:bapmuLoveAlive 1.25s .10s ease-in-out infinite;
}
.facebook-like-control:hover .facebook-reaction.reaction-care span,
.facebook-like-control:focus-within .facebook-reaction.reaction-care span,
.facebook-like-control.picker-open .facebook-reaction.reaction-care span{
  animation:bapmuCareAlive 1.55s .20s ease-in-out infinite;
}
.facebook-like-control:hover .facebook-reaction.reaction-haha span,
.facebook-like-control:focus-within .facebook-reaction.reaction-haha span,
.facebook-like-control.picker-open .facebook-reaction.reaction-haha span{
  animation:bapmuHahaAlive 1.15s .12s ease-in-out infinite;
}
.facebook-like-control:hover .facebook-reaction.reaction-wow span,
.facebook-like-control:focus-within .facebook-reaction.reaction-wow span,
.facebook-like-control.picker-open .facebook-reaction.reaction-wow span{
  animation:bapmuWowAlive 1.30s .18s ease-in-out infinite;
}
.facebook-like-control:hover .facebook-reaction.reaction-sad span,
.facebook-like-control:focus-within .facebook-reaction.reaction-sad span,
.facebook-like-control.picker-open .facebook-reaction.reaction-sad span{
  animation:bapmuSadAlive 1.65s .18s ease-in-out infinite;
}
.facebook-like-control:hover .facebook-reaction.reaction-angry span,
.facebook-like-control:focus-within .facebook-reaction.reaction-angry span,
.facebook-like-control.picker-open .facebook-reaction.reaction-angry span{
  animation:bapmuAngryAlive 1.05s .12s ease-in-out infinite;
}

/* Hovering a specific reaction intensifies its movement slightly. */
.facebook-reaction-picker .facebook-reaction:hover span,
.facebook-reaction-picker .facebook-reaction:focus-visible span{
  animation-duration:.72s !important;
}

/* 👍 little approving hop */
@keyframes bapmuLikeAlive{
  0%,100%{transform:translateY(0) rotate(0deg) scale(.96)}
  35%{transform:translateY(-3px) rotate(-8deg) scale(1.04)}
  52%{transform:translateY(-1px) rotate(3deg) scale(1.01)}
  68%{transform:translateY(0) rotate(0) scale(.98)}
}

/* ❤️ heartbeat */
@keyframes bapmuLoveAlive{
  0%,100%{transform:scale(.94)}
  14%{transform:scale(1.10)}
  28%{transform:scale(.98)}
  42%{transform:scale(1.07)}
  58%{transform:scale(.95)}
}

/* 🥰 gentle cuddle sway */
@keyframes bapmuCareAlive{
  0%,100%{transform:translateY(0) rotate(0deg) scale(.96)}
  30%{transform:translateY(-2px) rotate(-4deg) scale(1.02)}
  62%{transform:translateY(-1px) rotate(4deg) scale(1.03)}
}

/* 😂 tiny laugh shake */
@keyframes bapmuHahaAlive{
  0%,100%{transform:translateY(0) rotate(0deg) scale(.96)}
  20%{transform:translateY(-2px) rotate(-4deg) scale(1.02)}
  40%{transform:translateY(0) rotate(4deg) scale(1.03)}
  60%{transform:translateY(-2px) rotate(-3deg) scale(1.02)}
  80%{transform:translateY(0) rotate(3deg) scale(.99)}
}

/* 😮 surprised pop */
@keyframes bapmuWowAlive{
  0%,100%{transform:translateY(0) scale(.94)}
  28%{transform:translateY(-4px) scale(1.09)}
  48%{transform:translateY(-1px) scale(1.02)}
  70%{transform:translateY(0) scale(.97)}
}

/* 😢 slow sad drop */
@keyframes bapmuSadAlive{
  0%,100%{transform:translateY(-1px) rotate(0deg) scale(.96)}
  42%{transform:translateY(2px) rotate(-3deg) scale(.98)}
  70%{transform:translateY(1px) rotate(2deg) scale(.97)}
}

/* 😡 impatient angry shake */
@keyframes bapmuAngryAlive{
  0%,100%{transform:translateX(0) rotate(0deg) scale(.97)}
  20%{transform:translateX(-2px) rotate(-3deg) scale(1.01)}
  40%{transform:translateX(2px) rotate(3deg) scale(1.02)}
  60%{transform:translateX(-2px) rotate(-2deg) scale(1.01)}
  80%{transform:translateX(2px) rotate(2deg) scale(.99)}
}

/* Accessibility: no continuous motion when the OS requests reduced motion. */
@media (prefers-reduced-motion: reduce){
  .facebook-reaction-picker .facebook-reaction span{
    animation:none !important;
    transition:none !important;
  }
}


/* ==========================================================
   BAPMU v11.01 — true animated SVG reactions
   The artwork itself changes: tears fall, hearts beat, eyes/mouth move.
   ========================================================== */
.facebook-reaction-picker .facebook-reaction > span{
  animation:none !important;
  display:none !important;
}
.reaction-art{
  width:38px !important;
  height:38px !important;
  display:block !important;
  overflow:visible !important;
  transform-origin:center !important;
}
.facebook-reaction:hover .reaction-art,
.facebook-reaction:focus-visible .reaction-art{
  transform:scale(1.12);
}
.reaction-art-current{
  width:21px !important;
  height:21px !important;
}
.reaction-art-summary{
  width:20px !important;
  height:20px !important;
}
.summary-reaction{
  padding:0 !important;
  overflow:visible !important;
}
.summary-reaction .reaction-art{
  width:20px !important;
  height:20px !important;
}

/* Like hand: actual hand tips upward */
.art-like-hand{
  transform-origin:31px 37px;
  animation:svgLikeHand 1.45s ease-in-out infinite;
}
@keyframes svgLikeHand{
  0%,100%{transform:rotate(0deg) translateY(0)}
  35%{transform:rotate(-9deg) translateY(-2px)}
  55%{transform:rotate(3deg) translateY(-1px)}
}

/* Love: the drawn heart itself beats */
.art-love-heart{
  transform-box:fill-box;
  transform-origin:center;
  animation:svgHeartBeat 1.1s ease-in-out infinite;
}
@keyframes svgHeartBeat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.18)}
  29%{transform:scale(.98)}
  43%{transform:scale(1.13)}
  60%{transform:scale(1)}
}

/* Care: heart breathes and arms hug inward */
.art-care-heart{
  transform-box:fill-box;
  transform-origin:center;
  animation:svgCareHeart 1.35s ease-in-out infinite;
}
.art-care-arms{
  transform-origin:32px 49px;
  animation:svgCareArms 1.35s ease-in-out infinite;
}
@keyframes svgCareHeart{
  0%,100%{transform:scale(.96)}
  50%{transform:scale(1.12)}
}
@keyframes svgCareArms{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.88)}
}

/* Haha: the blue tears visibly move away from the eyes */
.art-haha-tear-left{
  animation:svgHahaTearLeft 1.05s ease-in-out infinite;
}
.art-haha-tear-right{
  animation:svgHahaTearRight 1.05s .12s ease-in-out infinite;
}
@keyframes svgHahaTearLeft{
  0%{transform:translate(0,-2px) scale(.75);opacity:0}
  18%{opacity:1}
  60%{transform:translate(-3px,5px) scale(1);opacity:1}
  100%{transform:translate(-5px,9px) scale(.8);opacity:0}
}
@keyframes svgHahaTearRight{
  0%{transform:translate(0,-2px) scale(.75);opacity:0}
  18%{opacity:1}
  60%{transform:translate(3px,5px) scale(1);opacity:1}
  100%{transform:translate(5px,9px) scale(.8);opacity:0}
}

/* Wow: eyes grow and mouth opens/closes */
.art-wow-eyes{
  transform-origin:32px 25px;
  animation:svgWowEyes 1.3s ease-in-out infinite;
}
.art-wow-mouth{
  transform-origin:32px 42px;
  animation:svgWowMouth 1.3s ease-in-out infinite;
}
@keyframes svgWowEyes{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.16)}
  60%{transform:scale(1)}
}
@keyframes svgWowMouth{
  0%,100%{transform:scaleY(.82)}
  35%{transform:scaleY(1.18)}
  65%{transform:scaleY(.95)}
}

/* SAD: tear forms at eye, falls down cheek, disappears and starts again */
.art-sad-tear{
  transform-origin:19px 34px;
  animation:svgSadTear 1.65s cubic-bezier(.3,.05,.75,.95) infinite;
}
@keyframes svgSadTear{
  0%{transform:translateY(-2px) scale(.65);opacity:0}
  12%{opacity:1}
  28%{transform:translateY(1px) scale(.82);opacity:1}
  72%{transform:translateY(10px) scale(1);opacity:1}
  100%{transform:translateY(17px) scale(.72);opacity:0}
}

/* Angry: brows tense while steam pulses */
.art-angry-brows{
  transform-origin:32px 26px;
  animation:svgAngryBrows .9s ease-in-out infinite;
}
.art-angry-steam{
  animation:svgAngrySteam 1.1s ease-in-out infinite;
}
@keyframes svgAngryBrows{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2px)}
}
@keyframes svgAngrySteam{
  0%,100%{transform:translateY(2px);opacity:.35}
  45%{transform:translateY(-2px);opacity:1}
  80%{transform:translateY(-5px);opacity:.25}
}

/* Selected reaction in the Like button should not run at full intensity. */
.current-reaction .reaction-art-current *{
  animation-duration:2.2s !important;
}

@media(prefers-reduced-motion:reduce){
  .reaction-art *{
    animation:none !important;
  }
}


/* ==========================================================
   BAPMU v11.02 — polished glossy reaction artwork
   ========================================================== */
.facebook-reaction-picker{
  height:58px !important;
  padding:5px 9px !important;
  gap:4px !important;
}
.facebook-reaction-picker .facebook-reaction{
  flex-basis:44px !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  max-width:44px !important;
  max-height:44px !important;
}
.facebook-reaction-picker .reaction-art{
  width:42px !important;
  height:42px !important;
}
.facebook-reaction-picker .facebook-reaction:hover .reaction-art,
.facebook-reaction-picker .facebook-reaction:focus-visible .reaction-art{
  transform:translateY(-5px) scale(1.22) !important;
  filter:drop-shadow(0 8px 8px rgba(0,0,0,.20));
}
.reaction-art{
  transition:transform .16s cubic-bezier(.2,.9,.2,1.35),filter .16s ease !important;
}

/* actual inner-element animations */
.bapmu-like-hand{transform-origin:31px 37px;animation:bapmuGlossyLike 1.4s ease-in-out infinite}
.bapmu-love-heart{transform-box:fill-box;transform-origin:center;animation:bapmuGlossyHeart 1.1s ease-in-out infinite}
.bapmu-care-heart{transform-box:fill-box;transform-origin:center;animation:bapmuGlossyHeart 1.3s ease-in-out infinite}
.bapmu-care-arms{transform-origin:32px 49px;animation:bapmuGlossyHug 1.3s ease-in-out infinite}
.bapmu-haha-face{transform-origin:32px 32px;animation:bapmuGlossyLaugh .95s ease-in-out infinite}
.bapmu-haha-left{animation:bapmuLaughTearLeft 1.05s ease-in-out infinite}
.bapmu-haha-right{animation:bapmuLaughTearRight 1.05s .12s ease-in-out infinite}
.bapmu-wow-eyes{transform-origin:32px 27px;animation:bapmuWowEyes 1.25s ease-in-out infinite}
.bapmu-wow-mouth{transform-origin:32px 43px;animation:bapmuWowMouth 1.25s ease-in-out infinite}
.bapmu-sad-face{transform-origin:32px 34px;animation:bapmuSadFace 1.7s ease-in-out infinite}
.bapmu-sad-tear{transform-origin:19px 34px;animation:bapmuFallingTear 1.75s cubic-bezier(.2,.2,.75,1) infinite}
.bapmu-angry-brows{transform-origin:32px 27px;animation:bapmuAngryBrows .9s ease-in-out infinite}
.bapmu-angry-steam{animation:bapmuAngrySteam 1.05s ease-in-out infinite}

@keyframes bapmuGlossyLike{
  0%,100%{transform:rotate(0) translateY(0)}
  30%{transform:rotate(-10deg) translateY(-2px)}
  48%{transform:rotate(4deg) translateY(-1px)}
  65%{transform:rotate(0) translateY(0)}
}
@keyframes bapmuGlossyHeart{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.18)}
  28%{transform:scale(.98)}
  42%{transform:scale(1.12)}
  58%{transform:scale(1)}
}
@keyframes bapmuGlossyHug{
  0%,100%{transform:scaleX(1)}
  50%{transform:scaleX(.84)}
}
@keyframes bapmuGlossyLaugh{
  0%,100%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(-3deg) translateY(-1px)}
  50%{transform:rotate(3deg) translateY(1px)}
  75%{transform:rotate(-2deg) translateY(-1px)}
}
@keyframes bapmuLaughTearLeft{
  0%{transform:translate(0,-2px) scale(.65);opacity:0}
  16%{opacity:1}
  62%{transform:translate(-4px,5px) scale(1);opacity:1}
  100%{transform:translate(-7px,10px) scale(.7);opacity:0}
}
@keyframes bapmuLaughTearRight{
  0%{transform:translate(0,-2px) scale(.65);opacity:0}
  16%{opacity:1}
  62%{transform:translate(4px,5px) scale(1);opacity:1}
  100%{transform:translate(7px,10px) scale(.7);opacity:0}
}
@keyframes bapmuWowEyes{
  0%,100%{transform:scale(1)}
  35%{transform:scale(1.18)}
  65%{transform:scale(1)}
}
@keyframes bapmuWowMouth{
  0%,100%{transform:scaleY(.82)}
  35%{transform:scaleY(1.18)}
  68%{transform:scaleY(.94)}
}
@keyframes bapmuSadFace{
  0%,100%{transform:translateY(0)}
  55%{transform:translateY(1px)}
}
/* Tear clearly forms at the eye, travels down the cheek, fades, then restarts. */
@keyframes bapmuFallingTear{
  0%{transform:translateY(-3px) scale(.55);opacity:0}
  10%{transform:translateY(-1px) scale(.72);opacity:.85}
  24%{transform:translateY(1px) scale(.88);opacity:1}
  58%{transform:translateY(8px) scale(1);opacity:1}
  82%{transform:translateY(14px) scale(.86);opacity:.75}
  100%{transform:translateY(20px) scale(.60);opacity:0}
}
@keyframes bapmuAngryBrows{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2px)}
}
@keyframes bapmuAngrySteam{
  0%,100%{transform:translateY(3px);opacity:.25}
  42%{transform:translateY(-2px);opacity:1}
  78%{transform:translateY(-6px);opacity:.2}
}

@media(max-width:640px){
  .facebook-reaction-picker{
    height:53px !important;
    gap:2px !important;
  }
  .facebook-reaction-picker .facebook-reaction{
    flex-basis:39px !important;
    width:39px !important;
    height:39px !important;
    min-width:39px !important;
    min-height:39px !important;
    max-width:39px !important;
    max-height:39px !important;
  }
  .facebook-reaction-picker .reaction-art{
    width:37px !important;
    height:37px !important;
  }
}


/* ==========================================================
   BAPMU v12.00 — unified professional social application
   ========================================================== */
body.social-page,body.social-app{background:#f2f5fa!important;color:#17213b}.standard-page{width:min(1120px,calc(100% - 36px));margin:28px auto 70px}.standard-page>.panel,.standard-page>.social-card{border:1px solid rgba(49,132,255,.14);border-radius:22px;box-shadow:0 12px 35px rgba(7,27,78,.065)}
/* Notification popover */
.notification-popover{position:relative}.notification-popover>summary{list-style:none}.notification-popover>summary::-webkit-details-marker{display:none}.notification-popover-card{position:absolute;right:-42px;top:50px;width:min(390px,calc(100vw - 24px));max-height:520px;overflow:auto;padding:10px;border:1px solid #e3e8f1;border-radius:20px;background:#fff;box-shadow:0 22px 65px rgba(18,31,56,.22);z-index:10020}.notification-popover-head{display:flex;align-items:center;justify-content:space-between;padding:10px 10px 12px}.notification-popover-head strong{font-size:1.22rem}.notification-popover-head a{color:#3184ff;font-weight:700;font-size:.86rem}.notification-popover-item{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;padding:10px;border-radius:14px;color:#17213b}.notification-popover-item:hover{background:#f3f7fc}.notification-popover-item.unread{background:#edf5ff}.notification-popover-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#eaf3ff;font-size:19px}.notification-popover-item span:last-child{display:grid;gap:3px}.notification-popover-item strong{font-size:.9rem;line-height:1.35}.notification-popover-item small{font-size:.73rem;color:#758197}.notification-popover-footer{display:block;margin-top:5px;padding:10px;text-align:center;border-radius:12px;background:#eef5ff;color:#2475e7;font-weight:800}.notification-popover-empty{padding:22px;text-align:center;color:#718096}
/* Emoji popover */
.composer-tool-wrap,.message-emoji-wrap,.comment-input-wrap{position:relative}.bapmu-emoji-popover{position:absolute;z-index:10010;left:0;bottom:calc(100% + 8px);display:none;width:294px;padding:10px;grid-template-columns:repeat(7,1fr);gap:4px;border:1px solid #e1e7f0;border-radius:16px;background:#fff;box-shadow:0 16px 45px rgba(18,31,56,.18)}.bapmu-emoji-popover.open{display:grid}.bapmu-emoji-popover button{width:36px!important;height:36px!important;min-height:36px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;font-size:23px!important}.bapmu-emoji-popover button:hover{background:#f1f5fa!important;transform:scale(1.12)}.gif-tool>span,.gif-message-button{font-weight:900;color:#3184ff}.gif-message-button{display:grid;place-items:center;padding:0 8px;border-radius:10px;cursor:pointer}.gif-message-button:hover{background:#eaf3ff}.comment-input-wrap{flex:1;display:flex;align-items:center;background:#f0f2f5;border-radius:999px}.comment-input-wrap input{flex:1;border:0!important;background:transparent!important;box-shadow:none!important}.comment-emoji{border:0!important;background:transparent!important;box-shadow:none!important;color:#657188!important;font-size:20px!important;padding:6px 10px!important}
.bapmu-emoji-popover.emoji-picker-v2{display:none;grid-template:48px 22px minmax(0,1fr) 43px/1fr;gap:7px;width:360px;height:430px;max-height:min(430px,calc(100vh - 24px));padding:10px 10px 5px;overflow:hidden!important;border-radius:15px;background:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.bapmu-emoji-popover.emoji-picker-v2.open{display:grid}.emoji-picker-search{width:100%!important;height:38px!important;min-height:38px!important;padding:8px 13px!important;border:0!important;border-radius:999px!important;background:#f0f2f5!important;box-shadow:none!important;font-size:14px!important}.emoji-picker-label{align-self:end;padding:0 3px;color:#687386;font-size:12px}.emoji-picker-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-content:start;gap:2px;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 1px 8px}.emoji-picker-v2 .emoji-picker-grid button{display:grid!important;place-items:center!important;width:100%!important;height:36px!important;min-height:36px!important;border-radius:8px!important;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif!important;font-size:24px!important}.emoji-picker-empty{grid-column:1/-1;padding:35px 10px;color:#788398;text-align:center;font-size:13px}.emoji-picker-tabs{display:flex;align-items:center;justify-content:flex-start;gap:3px;min-width:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;border-top:1px solid #e4e8ee;padding:4px 1px 0}.emoji-picker-tabs::-webkit-scrollbar{display:none}.emoji-picker-v2 .emoji-picker-tabs button{position:relative;flex:0 0 32px;width:32px!important;height:34px!important;min-height:34px!important;scroll-snap-align:center;color:#6b7484!important;font-family:inherit!important;font-size:17px!important;transform:none!important}.emoji-picker-v2 .emoji-picker-tabs button:hover{background:#f0f2f5!important;transform:none!important}.emoji-picker-v2 .emoji-picker-tabs button.active{color:#1677ed!important}.emoji-picker-v2 .emoji-picker-tabs button.active::after{content:"";position:absolute;left:5px;right:5px;bottom:-5px;height:3px;border-radius:3px;background:#1677ed}@media(max-width:420px){.bapmu-emoji-popover.emoji-picker-v2{width:calc(100vw - 24px)!important}.emoji-picker-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.emoji-picker-v2 .emoji-picker-tabs button{flex-basis:31px;width:31px!important}}
.bapmu-emoji-field{position:relative;display:block}.bapmu-emoji-field>textarea,.bapmu-emoji-field>input{padding-right:46px!important}.bapmu-field-emoji-button{position:absolute;right:7px;bottom:7px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:#687386;font-size:21px;cursor:pointer}.bapmu-field-emoji-button:hover{background:#eeeaff;color:#6f51df}
/* Professional profile */
.profile-cover{height:330px;border-radius:0 0 22px 22px;overflow:hidden;background:linear-gradient(135deg,#dbeaff,#f5f8ff)}.profile-cover img{width:100%;height:100%;object-fit:cover}.profile-card{margin-top:-54px!important;position:relative;display:grid!important;grid-template-columns:auto 1fr auto!important;align-items:end!important;padding:0 28px 24px!important;background:#fff!important;border-radius:0 0 22px 22px!important}.profile-avatar-trigger .avatar.large{width:156px!important;height:156px!important;border:5px solid #fff!important;box-shadow:0 4px 14px rgba(0,0,0,.12)}.profile-card h1{font-size:2rem;margin:0 0 5px}.profile-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.profile-edit-card form{display:grid;grid-template-columns:1fr 1fr;gap:15px}.profile-edit-card form label:last-of-type{grid-column:1/-1}.profile-tool-grid{margin-bottom:22px}
/* Avatar studio */
.avatar-studio-pro{width:min(1180px,calc(100% - 36px));margin:28px auto 70px}.avatar-studio-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.avatar-studio-head h1{margin:4px 0 7px;font-size:2rem}.avatar-studio-head p{margin:0;color:#6a778d}.avatar-builder{display:grid;grid-template-columns:minmax(420px,1.05fr) minmax(380px,.95fr);gap:20px}.avatar-preview-panel,.avatar-options-panel{border:1px solid rgba(49,132,255,.15);border-radius:24px;background:#fff;box-shadow:0 18px 55px rgba(7,27,78,.08)}.avatar-preview-panel{overflow:hidden}.avatar-preview-backdrop{min-height:620px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#fff 0,#eef6ff 43%,#dce9f9 100%);position:relative}.avatar-preview-backdrop:after{content:"";position:absolute;left:12%;right:12%;bottom:42px;height:38px;border-radius:50%;background:rgba(44,63,94,.12);filter:blur(10px)}.avatar-pro-stage{width:100%;height:600px;display:grid;place-items:center;cursor:grab}.avatar-canvas{width:min(430px,90%);height:590px;display:grid;place-items:center;transition:transform .16s ease;transform-style:preserve-3d;z-index:2}.bapmu-avatar-svg{width:100%;height:100%;overflow:visible}.avatar-preview-note{display:grid;gap:3px;padding:16px 20px;border-top:1px solid #e7edf4}.avatar-preview-note span{font-size:.82rem;color:#778399}.avatar-options-panel{padding:20px}.avatar-category-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:18px}.avatar-category-tabs button{padding:10px 8px;background:#f3f6fa!important;color:#536179!important;border-radius:12px!important;box-shadow:none!important}.avatar-category-tabs button.active{background:#3184ff!important;color:#fff!important}.avatar-option-groups{display:grid;grid-template-columns:1fr 1fr;gap:13px}.avatar-option-group{margin:0!important}.avatar-option-group span{display:block;margin-bottom:5px;font-size:.78rem;font-weight:800;color:#68768d}.avatar-option-group select{width:100%;background:#f7f9fc}.avatar-savebar{margin-top:22px;padding-top:16px;border-top:1px solid #e7edf4;display:flex;align-items:center;justify-content:space-between;gap:14px}.avatar-savebar small{color:#7a8699}.av-glasses{fill:none;stroke:#373f4e;stroke-width:2.5}.av-cap{fill:#5574a9}.greeting-wave .av-arm-right{transform-origin:145px 190px;animation:avatarWave 1.25s ease-in-out infinite}.greeting-heart .av-arms{transform-origin:105px 210px;animation:avatarHeart 1.5s ease-in-out infinite}.greeting-clap .av-arm-left,.greeting-clap .av-arm-right{transform-origin:105px 205px;animation:avatarClap .8s ease-in-out infinite}.greeting-dance .avatar-character{transform-origin:105px 310px;animation:avatarDance 1.35s ease-in-out infinite}@keyframes avatarWave{0%,100%{transform:rotate(0)}45%{transform:rotate(-30deg)}}@keyframes avatarHeart{50%{transform:scale(.95)}}@keyframes avatarClap{50%{transform:translateX(7px)}}@keyframes avatarDance{25%{transform:rotate(-3deg) translateY(-3px)}75%{transform:rotate(3deg) translateY(-3px)}}
/* Help */.help-hero{padding:32px}.help-hero h1{font-size:2rem;margin:5px 0}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}.help-grid a{display:grid;gap:4px;padding:18px;border:1px solid #e1e8f1;border-radius:16px;background:#f9fbfe}.help-grid a:hover{border-color:#b9d3fb;background:#f2f7ff}.help-grid small{color:#748096}
/* Legacy logged-in pages now using shared app shell */
body>main:not(.social-feed-column):not(.messenger-shell):not(.avatar-studio-pro){max-width:1120px;margin-left:auto;margin-right:auto}
@media(max-width:850px){.notification-popover-card{position:fixed;left:12px;right:12px;top:70px;width:auto}.profile-cover{height:220px}.profile-card{grid-template-columns:1fr!important;margin-top:-35px!important;text-align:center;justify-items:center}.avatar-builder{grid-template-columns:1fr}.avatar-preview-backdrop{min-height:480px}.avatar-pro-stage{height:470px}.avatar-canvas{height:460px}.avatar-option-groups{grid-template-columns:1fr}.avatar-category-tabs{grid-template-columns:1fr 1fr}.help-grid{grid-template-columns:1fr}}

/* Modern BAPMU profile layout */
.profile-page{background:#eef3f9}.profile-shell{width:min(1180px,calc(100% - 32px));margin:0 auto 72px}.profile-hero{background:#fff;border-radius:0 0 22px 22px;box-shadow:0 1px 3px rgba(23,33,59,.1);overflow:visible}.profile-hero .profile-cover{height:390px;border-radius:0 0 20px 20px;background:linear-gradient(135deg,#dceaff,#f2edff)}.profile-cover-placeholder{width:100%;height:100%;display:grid;place-items:center;background:radial-gradient(circle at 25% 20%,rgba(255,255,255,.75),transparent 25%),linear-gradient(135deg,#d9eaff,#e8e1ff 55%,#c9f2ec)}.profile-cover-placeholder span{font-size:clamp(3rem,9vw,7rem);font-weight:900;letter-spacing:-.08em;color:rgba(70,93,155,.14)}.profile-header-main{display:grid;grid-template-columns:184px minmax(0,1fr) auto;gap:20px;align-items:end;padding:0 34px 22px}.profile-header-main .profile-avatar-trigger{margin-top:-92px;position:relative;z-index:2}.profile-header-main .profile-avatar-trigger .avatar.large{width:178px!important;height:178px!important;border:6px solid #fff!important;box-shadow:0 5px 20px rgba(19,31,56,.18)}.profile-identity{padding-top:18px;min-width:0}.profile-identity h1{margin:0;font-size:clamp(1.8rem,3vw,2.5rem);letter-spacing:-.035em}.profile-nickname,.profile-counts{margin:5px 0 0;color:#657188}.profile-nickname{font-size:1rem}.profile-counts strong{color:#17213b}.profile-actions{justify-content:flex-end;padding-bottom:6px}.profile-tabs{display:flex;align-items:stretch;gap:4px;min-height:58px;margin:0 34px;border-top:1px solid #e5eaf2}.profile-tabs>a,.profile-tabs>details>summary{display:flex;align-items:center;justify-content:center;min-width:82px;padding:0 15px;color:#657188!important;font-weight:750;cursor:pointer;list-style:none;border-bottom:3px solid transparent}.profile-tabs>a:hover,.profile-tabs>details>summary:hover{background:#f5f8fc;border-radius:10px}.profile-tabs>a.active{color:#5267d8!important;border-bottom-color:#5267d8}.profile-tabs>details{position:relative}.profile-tabs>details>summary::-webkit-details-marker{display:none}.profile-tabs>details>div{position:absolute;z-index:20;top:52px;left:0;width:170px;padding:7px;background:#fff;border:1px solid #e4eaf3;border-radius:12px;box-shadow:0 12px 35px rgba(20,31,55,.16)}.profile-tabs>details>div a{display:block;padding:10px;border-radius:8px}.profile-tabs>details>div a:hover{background:#f3f6fb}.profile-columns{display:grid;grid-template-columns:minmax(300px,390px) minmax(0,690px);gap:20px;justify-content:center;align-items:start;padding-top:22px}.profile-sidebar{display:grid;gap:16px;position:sticky;top:86px}.profile-section{padding:20px}.profile-section h2,.profile-post-manager h2{margin:0;font-size:1.28rem}.profile-bio{text-align:center;line-height:1.55;margin:12px 0 18px}.profile-facts{display:grid;gap:15px;list-style:none;padding:0;margin:17px 0 0}.profile-facts li{display:grid;grid-template-columns:28px 1fr;gap:9px;align-items:center}.profile-facts li>span{font-size:20px;filter:grayscale(.15)}.profile-facts div{display:grid;gap:2px}.profile-facts small,.profile-section-head small,.profile-empty-copy{color:#73809a}.profile-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.profile-section-head>a{color:#5267d8!important;font-weight:700}.profile-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:12px;overflow:hidden}.profile-photo-grid a{aspect-ratio:1;background:#edf2f8}.profile-photo-grid img{width:100%;height:100%;object-fit:cover}.profile-friend-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 9px}.profile-friend-grid>a{min-width:0;color:#17213b!important;font-size:12px}.profile-friend-grid .profile-friend-avatar{display:block;width:100%!important;height:auto!important;aspect-ratio:1;object-fit:cover;border-radius:10px!important;margin-bottom:6px}.profile-friend-grid strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-timeline{display:grid;gap:14px;min-width:0}.profile-timeline .composer-card,.profile-timeline .post-card{margin:0}.profile-post-manager{display:flex;justify-content:space-between;align-items:center;padding:16px 20px}.profile-post-manager p{margin:3px 0 0;color:#73809a;font-size:13px}.profile-feed{gap:14px}.profile-edit-collapsible{padding:0;overflow:hidden}.profile-edit-collapsible>summary{padding:18px 22px;font-weight:800;cursor:pointer}.profile-edit-collapsible[open]>summary{border-bottom:1px solid #e5eaf2}.profile-edit-collapsible>form,.profile-edit-collapsible>.error{margin:20px}.profile-admin-strip{display:flex;align-items:center;gap:14px;padding:14px 20px;margin:18px auto 0;max-width:1100px}.profile-admin-strip span{flex:1;color:#657188}
@media(max-width:900px){.profile-shell{width:min(100% - 20px,760px)}.profile-hero .profile-cover{height:280px}.profile-header-main{grid-template-columns:1fr;justify-items:center;text-align:center;gap:4px}.profile-header-main .profile-avatar-trigger{margin-top:-88px}.profile-actions{justify-content:center}.profile-tabs{overflow-x:auto;margin:0 12px}.profile-tabs>a,.profile-tabs>details>summary{min-width:76px;padding:0 11px}.profile-columns{grid-template-columns:1fr}.profile-sidebar{position:static;grid-template-columns:1fr 1fr}.profile-sidebar #about{grid-column:1/-1}}
@media(max-width:600px){.profile-shell{width:100%;margin-bottom:76px}.profile-hero{border-radius:0}.profile-hero .profile-cover{height:210px;border-radius:0}.profile-header-main{padding:0 16px 16px}.profile-header-main .profile-avatar-trigger{margin-top:-70px}.profile-header-main .profile-avatar-trigger .avatar.large{width:138px!important;height:138px!important}.profile-identity{padding-top:5px}.profile-actions{width:100%}.profile-actions>a,.profile-actions>form,.profile-actions>form button{flex:1}.profile-tabs{margin:0;padding:0 6px}.profile-tabs>a,.profile-tabs>details>summary{min-width:70px;font-size:13px;padding:0 8px}.profile-columns{padding-top:10px;gap:10px}.profile-sidebar{grid-template-columns:1fr;gap:10px}.profile-sidebar #about{grid-column:auto}.profile-section,.profile-post-manager{border-radius:0!important;border-left:0!important;border-right:0!important}.profile-composer .composer-toolbar strong{font-size:10px}.profile-edit-card form{grid-template-columns:1fr}.profile-edit-card form label:last-of-type{grid-column:auto}}

/* Profile polish v12.02 */
.profile-page .profile-shell{max-width:1180px!important}.profile-page .profile-hero{position:relative;z-index:2;background:#fff!important;border:0;box-shadow:0 2px 12px rgba(20,35,65,.09)}.profile-page .profile-header-main{min-height:104px;grid-template-columns:184px minmax(260px,1fr) max-content;align-items:end}.profile-page .profile-identity{align-self:center;padding-top:14px}.profile-page .profile-actions{display:flex!important;flex-flow:row nowrap!important;align-items:center!important;align-self:center;gap:9px;min-width:max-content;padding:14px 0 0}.profile-page .profile-actions>a,.profile-page .profile-actions button{display:inline-flex!important;align-items:center;justify-content:center;min-height:42px;min-width:max-content;white-space:nowrap;padding:10px 17px!important;border-radius:10px!important}.profile-page .profile-actions form{display:flex;margin:0}.profile-page .profile-columns{position:relative;z-index:1;grid-template-columns:370px minmax(0,690px);gap:22px}.profile-page .profile-sidebar{gap:18px}.profile-page .social-card{background:#fff!important;border:1px solid rgba(29,52,91,.08)!important;box-shadow:0 2px 8px rgba(23,40,72,.055)!important}.profile-page .profile-section{padding:22px 24px;border-radius:16px!important}.profile-page .profile-section h2,.profile-page .profile-post-manager h2{font-size:1.32rem;letter-spacing:-.02em}.profile-page .profile-facts{gap:17px}.profile-page .profile-facts li{grid-template-columns:30px minmax(0,1fr);gap:12px}.profile-page .profile-facts strong{font-size:15px}.profile-page .profile-facts small{font-size:13px}.profile-page .profile-photo-grid{border-radius:10px}.profile-page .profile-post-manager{min-height:82px;border-radius:16px!important;padding:17px 20px}.profile-page .composer-card{border-radius:16px!important;padding:16px 18px}.profile-page .post-card{border-radius:16px!important;overflow:hidden!important}.profile-page .post-header{padding:16px 18px 10px}.profile-page .post-copy{padding:8px 18px 16px;min-height:42px}.profile-page .post-actionbar{border-top:1px solid #e8ecf2;border-bottom:1px solid #e8ecf2;margin:0 16px;padding:5px 0}.profile-page #timeline,.profile-page #about,.profile-page #friends,.profile-page #photos{scroll-margin-top:92px}.profile-page .profile-edit-collapsible{border-radius:16px!important}
@media(max-width:1080px) and (min-width:901px){.profile-page .profile-header-main{grid-template-columns:170px 1fr}.profile-page .profile-actions{grid-column:2;justify-self:start;padding-top:0;padding-bottom:4px}.profile-page .profile-columns{grid-template-columns:340px minmax(0,1fr)}}
@media(max-width:900px){.profile-page .profile-header-main{grid-template-columns:1fr;min-height:0}.profile-page .profile-actions{justify-self:center;padding-top:8px}.profile-page .profile-columns{grid-template-columns:1fr}.profile-page .profile-sidebar{gap:12px}}
@media(max-width:600px){.profile-page .profile-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%;min-width:0}.profile-page .profile-actions>a,.profile-page .profile-actions form,.profile-page .profile-actions button{width:100%;min-width:0}.profile-page .profile-section{padding:19px 18px}.profile-page .post-card,.profile-page .composer-card,.profile-page .profile-edit-collapsible{border-radius:0!important;border-left:0!important;border-right:0!important}.profile-page .profile-post-manager{border-radius:0!important}}

/* Profile tabs are real routes while sharing the same profile header and data source. */
.profile-tab-about .profile-columns,.profile-tab-friends .profile-columns,.profile-tab-photos .profile-columns,.profile-tab-reels .profile-columns{grid-template-columns:minmax(0,900px)}
.profile-tab-about .profile-sidebar,.profile-tab-friends .profile-sidebar,.profile-tab-photos .profile-sidebar{position:static;display:block;width:100%}
.profile-tab-about .profile-sidebar #photos,.profile-tab-about .profile-sidebar #friends{display:none}
.profile-tab-about .profile-timeline>.profile-composer,.profile-tab-about .profile-timeline>.profile-post-manager,.profile-tab-about .profile-timeline>.profile-feed{display:none}
.profile-tab-friends .profile-sidebar #about,.profile-tab-friends .profile-sidebar #photos,.profile-tab-friends .profile-timeline{display:none}
.profile-tab-photos .profile-sidebar #about,.profile-tab-photos .profile-sidebar #friends,.profile-tab-photos .profile-timeline{display:none}
.profile-tab-friends .profile-friend-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
.profile-tab-photos .profile-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.profile-tab-reels .profile-sidebar,.profile-tab-reels .profile-timeline>.profile-composer,.profile-tab-reels .profile-timeline>.profile-post-manager,.profile-tab-reels .profile-timeline>.profile-feed,.profile-tab-reels .profile-timeline>.profile-edit-collapsible{display:none}
.profile-reels-panel{padding:22px}.profile-reels-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.profile-reels-grid article{overflow:hidden;border:1px solid #e4eaf3;border-radius:14px;background:#f7f9fc}.profile-reels-grid video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:#111}.profile-reels-grid p{margin:0;padding:12px}
.profile-edit-card label small,.register-child-alias small{display:block;color:#73809a;font-weight:500;line-height:1.4}
@media(max-width:700px){.profile-tab-friends .profile-friend-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-tab-photos .profile-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.profile-reels-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Compact social-profile structure shared by every profile route. */
.profile-page .profile-shell{width:min(1050px,calc(100% - 32px))!important}.profile-page .profile-hero .profile-cover{height:330px}.profile-page .profile-header-main{grid-template-columns:160px minmax(0,1fr) auto!important;padding:0 24px 18px!important}.profile-page .profile-header-main .profile-avatar-trigger{margin-top:-72px!important}.profile-page .profile-header-main .profile-avatar-trigger .avatar.large{width:150px!important;height:150px!important}.profile-page .profile-identity h1{font-size:clamp(1.65rem,2.5vw,2.15rem)}
.profile-discovery{margin:16px auto 0;padding:14px 16px;border-radius:15px!important}.profile-discovery-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.profile-discovery-head a{color:#5267d8!important;font-weight:750}.profile-discovery-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;overflow-x:auto}.profile-discovery-person{display:grid;grid-template-rows:auto auto auto;align-content:start;min-width:132px;overflow:hidden;border:1px solid #dfe5ee;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(23,40,72,.08)}.profile-discovery-person>a:first-child{display:grid;gap:7px;color:#17213b!important}.profile-discovery-avatar{display:block;width:100%!important;height:auto!important;aspect-ratio:1/1;object-fit:cover;border-radius:0!important;background:#edf2f8}.profile-discovery-person strong{display:block;padding:0 9px;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.profile-discovery-person small{padding:0 9px 8px;font-size:11px}.profile-discovery-person>.button{margin:0 8px 9px;padding:8px!important;text-align:center;border-radius:8px!important;font-size:12px}
.profile-tab-about .profile-sidebar #about{display:grid;grid-template-columns:210px minmax(0,1fr);column-gap:22px;align-items:start}.profile-tab-about .profile-sidebar #about>h2{grid-column:1/-1;margin-bottom:14px}.profile-tab-about .profile-about-nav{grid-column:1;grid-row:2/span 3;display:grid;align-content:start;gap:4px;padding-right:14px;border-right:1px solid #e4e9f1}.profile-about-nav a{padding:10px 12px;border-radius:8px;color:#627087!important;font-weight:650}.profile-about-nav a.active,.profile-about-nav a:hover{background:#edf3ff;color:#315ccf!important}.profile-tab-about .profile-bio,.profile-tab-about .profile-facts{grid-column:2}.profile-tab-about .profile-bio{text-align:left;margin-top:0}.profile-tab-about .profile-facts{grid-template-columns:1fr 1fr}.profile-tab-about .profile-facts li{padding:12px;border:1px solid #e7ebf2;border-radius:11px;background:#fbfcfe}
.profile-tab-friends .profile-section-head{align-items:center}.profile-friend-search{display:flex;gap:7px}.profile-friend-search input{width:220px;padding:9px 11px;border-radius:999px;background:#f0f3f7}.profile-friend-search button{padding:9px 13px;border-radius:9px}.profile-tab-friends .profile-friend-grid{grid-template-columns:1fr 1fr;gap:8px 18px}.profile-tab-friends .profile-friend-grid>a{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px;padding:8px;border-bottom:1px solid #edf0f5;font-size:14px}.profile-tab-friends .profile-friend-grid .profile-friend-avatar{width:72px!important;height:72px!important;margin:0;border-radius:9px!important}.profile-tab-friends .profile-friend-grid strong{font-size:14px}
.profile-tab-photos .profile-photo-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.profile-tab-photos .profile-photo-grid a{border-radius:8px;overflow:hidden}.profile-tabs{scrollbar-width:none}.profile-tabs::-webkit-scrollbar{display:none}
@media(max-width:900px){.profile-page .profile-header-main{grid-template-columns:1fr!important}.profile-discovery-row{grid-template-columns:repeat(6,132px)}.profile-tab-about .profile-sidebar #about{grid-template-columns:1fr}.profile-tab-about .profile-about-nav{grid-column:1;grid-row:auto;display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid #e4e9f1;padding:0 0 10px}.profile-tab-about .profile-bio,.profile-tab-about .profile-facts{grid-column:1}.profile-tab-about .profile-facts{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.profile-page .profile-shell{width:100%!important}.profile-page .profile-hero .profile-cover{height:205px}.profile-discovery{margin-top:8px;border-radius:0!important}.profile-tab-about .profile-facts{grid-template-columns:1fr}.profile-tab-friends .profile-section-head{display:grid}.profile-friend-search{width:100%}.profile-friend-search input{width:100%;min-width:0}.profile-tab-friends .profile-friend-grid{grid-template-columns:1fr}.profile-tab-photos .profile-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Dedicated profile routes must never inherit the timeline's 370px/690px columns. */
.profile-page.profile-tab-about .profile-columns,.profile-page.profile-tab-friends .profile-columns,.profile-page.profile-tab-photos .profile-columns,.profile-page.profile-tab-reels .profile-columns{display:grid!important;grid-template-columns:minmax(0,1fr)!important;width:100%!important;max-width:100%!important}
.profile-page.profile-tab-about .profile-sidebar,.profile-page.profile-tab-friends .profile-sidebar,.profile-page.profile-tab-photos .profile-sidebar{position:static!important;display:block!important;width:100%!important;max-width:none!important}
.profile-page.profile-tab-about .profile-timeline,.profile-page.profile-tab-reels .profile-timeline{width:100%!important;max-width:none!important}
.profile-page.profile-tab-about .profile-edit-collapsible{width:100%!important;margin-top:16px!important}

/* Interactive About sub-navigation. */
.profile-about-nav button{display:block!important;width:100%!important;min-height:42px!important;padding:10px 12px!important;border:0!important;border-radius:8px!important;background:transparent!important;color:#627087!important;text-align:left!important;font:inherit!important;font-weight:650!important;box-shadow:none!important}.profile-about-nav button.active,.profile-about-nav button:hover,.profile-about-nav button:focus-visible{background:#edf3ff!important;color:#315ccf!important}.profile-tab-about [data-about-group][hidden],.profile-tab-about [data-about-overview][hidden]{display:none!important}
@media(max-width:900px){.profile-about-nav button{width:auto!important;min-width:max-content!important}}
.profile-header-bio{max-width:620px;margin:6px 0 0;color:#364258;font-size:.92rem;line-height:1.4;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.profile-header-bio+.profile-counts{margin-top:6px}
@media(max-width:900px){.profile-header-bio{margin-left:auto;margin-right:auto;max-width:560px}}
.profile-header-location{display:flex;align-items:center;gap:6px;margin:6px 0 0;color:#59667c;font-size:.86rem;font-weight:650}.profile-header-location svg{width:15px!important;height:15px!important;min-width:15px!important;max-width:15px!important}.profile-header-location span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-header-location+.profile-counts{margin-top:6px}
@media(max-width:900px){.profile-header-location{justify-content:center}}
.profile-family-panel{grid-column:2;margin-top:18px;padding-top:18px;border-top:1px solid #e4e9f1}.profile-family-panel[hidden]{display:none!important}.profile-family-list{display:grid;gap:8px}.profile-family-list article{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0}.profile-family-avatar{width:48px!important;height:48px!important;border-radius:50%!important;object-fit:cover}.profile-family-list small{display:block;margin-top:2px}.profile-family-list form{display:flex;gap:6px}.profile-family-list button{padding:7px 10px!important;font-size:12px}.profile-family-add{margin-top:14px}.profile-family-add>summary{cursor:pointer;color:#315ccf;font-weight:750}.profile-family-add form{margin-top:12px;display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
@media(max-width:900px){.profile-family-panel{grid-column:1}.profile-family-add form{grid-template-columns:1fr}}

/* About page follows the supplied two-pane reference: navigation left, plain rows right. */
.profile-page.profile-tab-about #about{display:grid!important;grid-template-columns:220px minmax(0,1fr)!important;grid-template-rows:auto auto 1fr!important;column-gap:0!important;min-height:560px!important;padding:0!important;overflow:hidden!important}.profile-page.profile-tab-about #about>h2{grid-column:1!important;grid-row:1!important;margin:0!important;padding:20px 20px 8px!important}.profile-page.profile-tab-about .profile-about-nav{grid-column:1!important;grid-row:2/span 4!important;display:grid!important;align-content:start!important;gap:2px!important;padding:6px 10px 20px!important;border-right:1px solid #dfe4ec!important;border-bottom:0!important}.profile-page.profile-tab-about .profile-about-nav button{min-height:38px!important;padding:8px 10px!important;font-size:14px!important}.profile-page.profile-tab-about .profile-about-content-head{grid-column:2!important;grid-row:1!important;padding:20px 22px 8px!important}.profile-page.profile-tab-about .profile-about-content-head h3{margin:0!important;font-size:1rem!important}.profile-page.profile-tab-about .profile-bio{grid-column:2!important;margin:0!important;padding:14px 22px!important;text-align:left!important;font-size:15px!important}.profile-page.profile-tab-about .profile-facts{grid-column:2!important;display:block!important;margin:0!important;padding:4px 22px 24px!important}.profile-page.profile-tab-about .profile-facts li{display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important;min-height:64px!important;margin:0!important;padding:10px 0!important;border:0!important;border-radius:0!important;background:transparent!important}.profile-page.profile-tab-about .profile-facts li>span{display:grid!important;place-items:center!important;width:32px!important;height:32px!important;color:#273449!important}.profile-page.profile-tab-about .profile-facts strong{font-size:14px!important}.profile-page.profile-tab-about .profile-facts small{font-size:12px!important}.profile-page.profile-tab-about .profile-family-panel{grid-column:2!important;margin:0!important;padding:6px 22px 24px!important;border:0!important}.profile-page.profile-tab-about .profile-about-empty{grid-column:2!important;padding:18px 22px!important;color:#748096!important}.profile-page.profile-tab-about .profile-about-empty[hidden]{display:none!important}
@media(max-width:700px){.profile-page.profile-tab-about #about{grid-template-columns:1fr!important;grid-template-rows:auto auto auto!important;min-height:0!important}.profile-page.profile-tab-about #about>h2,.profile-page.profile-tab-about .profile-about-nav,.profile-page.profile-tab-about .profile-about-content-head,.profile-page.profile-tab-about .profile-bio,.profile-page.profile-tab-about .profile-facts,.profile-page.profile-tab-about .profile-family-panel,.profile-page.profile-tab-about .profile-about-empty{grid-column:1!important}.profile-page.profile-tab-about .profile-about-nav{grid-row:2!important;display:flex!important;overflow-x:auto!important;border-right:0!important;border-bottom:1px solid #dfe4ec!important;padding:6px 12px 10px!important}.profile-page.profile-tab-about .profile-about-content-head{grid-row:auto!important}.profile-page.profile-tab-about .profile-about-nav button{width:auto!important;min-width:max-content!important}}

/* Profile fixed-header clearance v12.03 */
body.profile-page{padding-top:68px!important;overflow-x:hidden!important}.profile-page .profile-header-main{grid-template-columns:170px minmax(260px,1fr) max-content;padding-top:0}.profile-page .profile-header-main .profile-avatar-trigger{margin-top:-64px!important}.profile-page .profile-header-main .profile-avatar-trigger .avatar.large{width:164px!important;height:164px!important}.profile-page .profile-hero{overflow-x:clip}.profile-page .profile-columns{max-width:1082px;margin-left:auto;margin-right:auto}.profile-page .social-topbar{isolation:isolate}
@media(max-width:1080px) and (min-width:901px){.profile-page .profile-header-main{grid-template-columns:160px 1fr}.profile-page .profile-header-main .profile-avatar-trigger{margin-top:-58px!important}.profile-page .profile-header-main .profile-avatar-trigger .avatar.large{width:154px!important;height:154px!important}}
@media(max-width:900px){body.profile-page{padding-top:62px!important}.profile-page .profile-header-main{grid-template-columns:1fr}.profile-page .profile-header-main .profile-avatar-trigger{margin-top:-56px!important}}
@media(max-width:600px){.profile-page .profile-header-main .profile-avatar-trigger{margin-top:-48px!important}.profile-page .profile-header-main .profile-avatar-trigger .avatar.large{width:132px!important;height:132px!important}}

/* Isolate the profile hero from the legacy global header rule. */
body.profile-page header.profile-hero{display:block!important;position:relative!important;top:auto!important;left:auto!important;right:auto!important;width:100%!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important;align-items:initial!important;justify-content:initial!important;overflow-x:clip;z-index:2}

/* Profile navigation and reaction overflow fixes v12.07 */
.profile-page .profile-tabs>details{display:flex!important;align-self:stretch;height:auto}.profile-page .profile-tabs>details>summary{height:100%;min-height:58px}.profile-page .post-card{overflow:visible!important}.profile-page .facebook-like-control{z-index:40!important}.profile-page .facebook-reaction-picker{left:0!important;right:auto!important;transform:translate(0,12px) scale(.88)!important;transform-origin:0 100%!important}.profile-page .facebook-like-control:hover .facebook-reaction-picker,.profile-page .facebook-like-control:focus-within .facebook-reaction-picker,.profile-page .facebook-like-control.picker-open .facebook-reaction-picker{transform:translate(0,0) scale(1)!important}
@media(max-width:600px){.profile-page .facebook-reaction-picker{position:fixed!important;left:8px!important;right:8px!important;bottom:76px!important;width:auto!important;justify-content:space-evenly!important;transform:translateY(12px) scale(.96)!important}.profile-page .facebook-like-control:hover .facebook-reaction-picker,.profile-page .facebook-like-control:focus-within .facebook-reaction-picker,.profile-page .facebook-like-control.picker-open .facebook-reaction-picker{transform:translateY(0) scale(1)!important}}

/* Public login/register alignment restoration v12.08 */
body.login-public-page,body.register-public-page{display:flex!important;flex-direction:column!important;min-height:100vh!important;background:#071a4f!important}.login-public-page .balanced-login-main{flex:1 0 auto!important;width:min(1180px,calc(100% - 48px))!important;max-width:1180px!important;min-height:660px!important;margin:0 auto!important;padding:54px 0!important;grid-template-columns:minmax(0,1fr) 390px!important;gap:64px!important;align-items:center!important}.login-public-page .balanced-story{position:static!important;left:auto!important;width:100%!important;max-width:610px!important;margin:0!important;padding:0!important;align-self:center!important}.login-public-page .balanced-login-card{width:390px!important;max-width:100%!important;margin:0!important;justify-self:end!important;align-self:center!important}.login-public-page .public-footer-rich,.register-public-page .public-footer-rich{position:relative!important;z-index:2;width:min(1180px,calc(100% - 48px))!important;margin:0 auto 24px!important;flex:0 0 auto!important}.register-public-page .register-main{position:relative!important;z-index:2;flex:1 0 auto!important;display:grid!important;place-items:center!important;width:100%!important;max-width:none!important;min-height:760px!important;margin:0!important;padding:48px 24px!important}.register-public-page .register-card{width:min(620px,100%)!important;max-width:620px!important;margin:0 auto!important}.register-public-page .mockup-upload{padding:14px;border:1px dashed rgba(255,255,255,.22);border-radius:12px;background:rgba(255,255,255,.045)}.register-public-page .mockup-upload input[type=file]{width:100%;margin-top:8px;color:#d5def0}.register-public-page .mockup-switch{text-align:center;margin:18px 0 0;color:#b9c6dc}.register-public-page .mockup-switch a{color:#75a9ff;font-weight:800}
@media(max-width:980px){.login-public-page .balanced-login-main{width:min(720px,calc(100% - 32px))!important;grid-template-columns:1fr!important;gap:30px!important;padding:40px 0 48px!important}.login-public-page .balanced-story{margin:0 auto!important;text-align:center!important}.login-public-page .balanced-login-card{justify-self:center!important;margin:0 auto!important}.login-public-page .public-footer-rich,.register-public-page .public-footer-rich{width:min(720px,calc(100% - 32px))!important}}
@media(max-width:700px){.login-public-page .balanced-login-main{width:100%!important;min-height:auto!important;padding:28px 16px 36px!important}.register-public-page .register-main{min-height:auto!important;padding:28px 16px 36px!important}.login-public-page .public-footer-rich,.register-public-page .public-footer-rich{width:calc(100% - 24px)!important;margin-bottom:12px!important}}
.register-name-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.register-name-row label{min-width:0}.register-name-row input{width:100%}@media(max-width:560px){.register-name-row{grid-template-columns:1fr}}

/* Login centered composition v12.09 */
@media(min-width:981px){
  .login-public-page .balanced-login-main{width:min(1040px,calc(100% - 64px))!important;max-width:1040px!important;grid-template-columns:minmax(0,560px) 400px!important;gap:60px!important}
  .login-public-page .balanced-story{max-width:540px!important}
  .login-public-page .balanced-story h1{max-width:520px!important;font-size:clamp(46px,3.4vw,54px)!important;line-height:1.05!important;letter-spacing:-1.6px!important}
  .login-public-page .balanced-story p{max-width:510px!important;font-size:17px!important;line-height:1.6!important}
  .login-public-page .balanced-login-card{width:400px!important;justify-self:start!important;transform:translateX(-24px)!important}
}

/* Final registration sizing v12.11 */
.register-public-page .register-card{width:min(500px,100%)!important;max-width:500px!important}
.register-public-page .register-upload-dropdown{overflow:hidden;border:1px solid rgba(255,255,255,.2);border-radius:12px;background:rgba(255,255,255,.045)}
.register-public-page .register-upload-dropdown>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 15px;cursor:pointer;list-style:none;font-size:13px;font-weight:800}
.register-public-page .register-upload-dropdown>summary::-webkit-details-marker{display:none}
.register-public-page .register-upload-dropdown>summary:after{content:"⌄";font-size:18px;transition:transform .18s ease}
.register-public-page .register-upload-dropdown[open]>summary:after{transform:rotate(180deg)}
.register-public-page .register-upload-dropdown>summary small{min-width:0;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#9fb7df;font-weight:600}
.register-public-page .register-upload-dropdown .mockup-upload{margin:0;padding:14px 15px 15px!important;border:0!important;border-top:1px solid rgba(255,255,255,.14)!important;border-radius:0!important;background:transparent!important}
@media(max-width:700px){.register-public-page .register-card{width:100%!important;max-width:460px!important}.register-public-page .register-upload-dropdown>summary small{max-width:120px}}
.page-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.button-icon{width:18px;height:18px;vertical-align:-4px}.birthdays-page{max-width:980px}.birthday-section{margin-bottom:18px}.birthday-list{display:grid;gap:4px}.birthday-person{display:grid;grid-template-columns:56px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px;border-radius:12px}.birthday-person:hover{background:var(--surface-soft,#f5f7fb)}.birthday-person>div{display:grid;gap:4px}.birthday-person small{color:var(--text-muted,#74809a)}@media(max-width:600px){.birthday-person{grid-template-columns:48px minmax(0,1fr)}.birthday-person>.button{grid-column:1/-1;width:100%}.page-hero-actions{width:100%}}

/* Shared social SVG sizing: never allow the browser's 300x150 SVG default. */
svg.notification-svg{display:block!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;max-width:18px!important;max-height:18px!important;flex:0 0 18px!important}
svg.feed-empty-icon{display:block!important;width:28px!important;height:28px!important;min-width:28px!important;min-height:28px!important;max-width:28px!important;max-height:28px!important;margin:auto}
svg.button-icon{display:inline-block!important;width:16px!important;height:16px!important;min-width:16px!important;min-height:16px!important;max-width:16px!important;max-height:16px!important;vertical-align:-3px}
.notification-popover-icon{overflow:hidden}.notification-popover-icon svg{width:18px!important;height:18px!important;min-width:18px!important;min-height:18px!important;max-width:18px!important;max-height:18px!important}
/* Public entry gate: keeps the existing living background and unlocks music by consent. */
html.bapmu-awaiting-entry .login-public-page .balanced-login-main,
html.bapmu-awaiting-entry .login-public-page .public-footer-rich {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.login-public-page .balanced-login-main,
.login-public-page .public-footer-rich {
  transition: opacity .48s ease, visibility .48s ease;
}
.bapmu-public-entry {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  transition: opacity .48s ease, transform .48s ease;
}
.bapmu-public-entry.is-leaving {
  opacity: 0;
  transform: scale(1.025);
}
.bapmu-public-entry-card {
  width: min(360px, 100%);
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 34px;
  border: 1px solid rgba(133, 177, 255, .36);
  border-radius: 28px;
  background: rgba(8, 31, 82, .82);
  box-shadow: 0 28px 90px rgba(0, 10, 45, .4);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #fff;
  pointer-events: auto;
}
.bapmu-public-entry-logo {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border-radius: 19px;
  background: linear-gradient(145deg, #55a3ff, #0876ef);
  box-shadow: 0 14px 34px rgba(4, 104, 245, .42);
  font: 700 54px/1 Georgia, serif;
}
.bapmu-public-entry-card strong {
  font-size: 28px;
  letter-spacing: -.5px;
}
.bapmu-public-entry-card button {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(135deg, #3e93ff, #0876ef);
  box-shadow: 0 12px 28px rgba(4, 104, 245, .32);
  color: #fff;
  font: inherit;
  font-size: 17px;
  font-weight: 850;
  cursor: pointer;
}
.bapmu-public-entry-card button:hover { transform: translateY(-1px); }
.bapmu-public-entry-card button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, .92);
  outline-offset: 4px;
}
@media (max-width: 520px) {
  .bapmu-public-entry-card { width: min(320px, 100%); padding: 28px 24px; }
}
/* Profile About v12.23: URL-routed two-pane layout and direct field editors */
.profile-tab-about .profile-columns{display:block;max-width:1260px;margin:24px auto}.profile-tab-about .profile-sidebar{width:100%;max-width:none}.profile-tab-about .profile-timeline{display:none}
.profile-about-card{display:grid;grid-template-columns:250px minmax(0,1fr);padding:0!important;min-height:620px;overflow:hidden;border:1px solid var(--border,#dfe5ef)}
.profile-about-sidebar{padding:26px 16px;border-right:1px solid var(--border,#dfe5ef)}.profile-about-sidebar h2{margin:0 12px 18px}.profile-about-nav{display:grid;gap:3px}.profile-about-nav a{display:block;padding:12px 14px;border-radius:9px;color:var(--muted,#596780);font-weight:650;text-decoration:none}.profile-about-nav a:hover{background:#f2f6fc}.profile-about-nav a.active{background:#e8f1ff;color:#1769df}
.profile-about-mobile-select{display:none}.profile-about-pane{padding:28px 34px;min-width:0}.profile-about-pane>h2{margin:0 0 28px;font-size:1.35rem}.profile-about-block{margin:0 0 30px}.profile-about-block>h3{font-size:1rem;margin:0 0 10px;color:var(--text,#16213b)}
.profile-info-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:13px;min-height:68px;padding:9px 4px;border-radius:10px}.profile-info-row:hover{background:#f7f9fc}.profile-info-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#1f6feb;background:#edf5ff}.profile-info-icon .ui-icon{width:21px;height:21px}.profile-info-copy{display:grid;gap:3px;min-width:0}.profile-info-copy strong{font-size:.98rem;overflow-wrap:anywhere}.profile-info-copy small{color:var(--muted,#68758d)}.profile-info-controls{display:flex;align-items:center;gap:5px}.profile-info-controls button,.profile-row-icon-button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:#536177}.profile-info-controls button:hover,.profile-row-icon-button:hover{background:#e9edf3}.profile-info-controls svg,.profile-row-icon-button svg{width:19px;height:19px}.profile-info-controls .visibility-icon{display:grid}.profile-info-controls .metadata-icon{width:18px;height:18px}
.profile-family-list article{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 4px}.profile-family-list form{display:flex;gap:6px}.profile-family-add summary{display:inline-flex;margin-top:10px;color:#1769df;font-weight:700;cursor:pointer}
.profile-family-heading{display:flex;align-items:center;justify-content:space-between;min-height:42px}.profile-family-heading h3{margin:0}.profile-family-add-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;background:transparent;color:#42526c}.profile-family-add-button:hover{background:#e9edf3}.profile-family-add-button svg{width:22px;height:22px}.profile-family-privacy{display:grid;place-items:center}.profile-family-response{display:flex;gap:6px}.profile-family-response button{padding:8px 11px}
.profile-family-candidates{display:grid;gap:5px;max-height:245px;overflow:auto;border:1px solid #e2e7ef;border-radius:13px;padding:6px}.profile-family-candidates>button{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;text-align:left;gap:10px;width:100%;padding:8px;border:2px solid transparent;border-radius:10px;background:transparent;color:inherit}.profile-family-candidates>button:hover{background:#f2f6fc}.profile-family-candidates>button.selected{border-color:#2478ed;background:#edf5ff}.profile-family-candidates span{display:grid}.profile-family-candidates small{font-weight:500}.profile-family-dialog footer{flex-wrap:wrap}.profile-family-dialog footer .danger{margin-right:auto}
.profile-field-dialog{width:min(520px,calc(100vw - 28px));padding:0;border:0;border-radius:18px;box-shadow:0 24px 80px #0b173144}.profile-field-dialog::backdrop{background:#10182a8c}.profile-field-dialog-shell{display:grid;gap:18px;padding:0 22px 22px}.profile-field-dialog header{display:flex;align-items:center;justify-content:space-between;margin:0 -22px;padding:18px 22px;border-bottom:1px solid #e4e8ef}.profile-field-dialog header h2{margin:0;font-size:1.25rem}.profile-field-dialog header button{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:#eef1f5;color:#526078}.profile-field-dialog label{display:grid;gap:8px;font-weight:700}.profile-field-dialog input,.profile-field-dialog textarea,.profile-field-dialog select{width:100%;box-sizing:border-box}.profile-field-dialog footer{display:flex;justify-content:flex-end;gap:10px}.profile-field-dialog [hidden]{display:none!important}
.profile-school-picker{display:grid;gap:10px}.profile-school-picker select{min-height:180px}
@media(max-width:760px){.profile-tab-about .profile-columns{margin:12px 0}.profile-about-card{display:block;min-height:0;border-radius:14px}.profile-about-sidebar{padding:18px;border-right:0;border-bottom:1px solid var(--border,#dfe5ef)}.profile-about-sidebar h2{margin:0 0 12px}.profile-about-nav{display:none}.profile-about-mobile-select{display:grid;gap:7px}.profile-about-mobile-select select{width:100%;min-height:48px}.profile-about-pane{padding:22px 18px}.profile-info-row{grid-template-columns:40px minmax(0,1fr) auto}.profile-info-controls{gap:0}}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Central BAPMU PostCard v1.0 */
.feed-list,.profile-feed,.context-post-list{width:100%;max-width:680px;margin-inline:auto}.postcard{padding:0!important;overflow:visible;border-radius:16px!important}.postcard-header{display:grid!important;grid-template-columns:44px minmax(0,1fr) 40px;gap:10px;align-items:start;height:auto!important;padding:16px 16px 8px;background:transparent!important;border:0!important;position:relative!important;top:auto!important;z-index:1!important}.postcard-avatar,.postcard .post-avatar{width:42px;height:42px;border-radius:50%;display:block}.postcard-author{min-width:0;display:flex;align-items:center;align-content:start;flex-wrap:wrap;gap:2px 6px}.postcard-name{display:inline-flex;align-items:center;gap:5px;font-size:.94rem;font-weight:700;line-height:1.25}.postcard-name .official-admin-badge{font-size:.66rem;padding:2px 6px;margin:0}.postcard-name .profile-verified-svg{width:17px;height:17px}.postcard-context{font-size:.88rem;color:var(--muted)}.postcard-meta{flex-basis:100%;display:flex;align-items:center;gap:5px;color:var(--muted);font-size:.78rem;line-height:1.3}.postcard-meta>span+span:before{content:'·';margin-right:5px}.postcard-meta .visibility-icon{display:inline-grid}.postcard-meta svg{width:14px;height:14px}.postcard-menu{justify-self:end;position:relative}.postcard-menu>summary{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;list-style:none;cursor:pointer}.postcard-menu>summary:hover{background:#eef1f5}.postcard-menu>summary svg{width:20px;height:20px}.postcard-menu .post-menu-popover{right:0;top:38px;min-width:240px;padding:8px;z-index:20}.postcard-menu .post-menu-popover form,.postcard-menu-editor form{display:grid;gap:8px}.postcard-menu-editor>summary{padding:9px;font-weight:700;cursor:pointer}.postcard-menu textarea{min-height:90px;resize:vertical}.postcard-privacy-form{border-top:1px solid var(--line);padding-top:8px}.postcard-copy{padding:6px 16px 12px;font-size:.97rem;line-height:1.45;white-space:normal}.postcard .post-hashtags{padding:0 16px 10px}.postcard-gallery{display:grid;margin:0;border-radius:0;overflow:hidden;gap:2px;background:#fff}.postcard-gallery>button{position:relative;padding:0;border:0;border-radius:0;background:#e8ebf0;min-height:220px;overflow:hidden}.postcard-gallery img,.postcard-gallery video{display:block;width:100%;height:100%;object-fit:cover}.postcard-gallery.count-1{grid-template-columns:1fr}.postcard-gallery.count-1>button{max-height:680px}.postcard-gallery.count-2{grid-template-columns:repeat(2,1fr)}.postcard-gallery.count-3{grid-template:repeat(2,220px)/repeat(2,1fr)}.postcard-gallery.count-3>button:first-child{grid-row:1/3}.postcard-gallery.count-4{grid-template:repeat(2,240px)/repeat(2,1fr)}.postcard-gallery.count-5plus{grid-template:repeat(2,230px)/repeat(6,1fr)}.postcard-gallery.count-5plus>button{grid-column:span 2;min-height:0}.postcard-gallery.count-5plus>button:nth-child(-n+2){grid-column:span 3}.postcard-gallery-more{position:absolute;inset:0;display:grid;place-items:center;background:#08101f8c;color:#fff;font-size:2.2rem;font-weight:700}.postcard-engagement{min-height:40px;margin:0 16px;padding:8px 0!important;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:.82rem}.postcard-actionbar{display:grid!important;grid-template-columns:repeat(3,1fr);min-height:44px;margin:0 16px;padding:3px 0!important;border-bottom:1px solid var(--line);gap:4px}.postcard-actionbar>form,.postcard-actionbar>a{display:flex;margin:0}.postcard-actionbar button,.postcard-actionbar>a{width:100%;min-height:36px;padding:6px 8px!important;border-radius:8px!important;display:flex!important;align-items:center;justify-content:center;gap:7px;background:transparent;color:var(--muted);font-size:.88rem;font-weight:650}.postcard-actionbar button:hover,.postcard-actionbar>a:hover{background:#eef1f5}.postcard-actionbar svg{width:19px!important;height:19px!important}.postcard-comments{padding:8px 16px 0}.postcard-more-comments{padding:3px 0;background:transparent;color:var(--muted);font-size:.84rem}.postcard-comment{display:grid;grid-template-columns:34px minmax(0,1fr);gap:7px;margin:7px 0}.postcard-comment.depth-1,.postcard-comment.depth-2{margin-left:30px}.postcard-comment-avatar{width:32px;height:32px;border-radius:50%}.postcard-comment-bubble{display:inline-flex;flex-direction:column;align-items:flex-start;width:fit-content;max-width:100%;padding:7px 10px;border-radius:15px;background:#f0f2f5;font-size:.86rem;line-height:1.35}.postcard-comment-bubble strong{font-size:.8rem}.postcard-comment-bubble .comment-giphy{max-width:220px;border-radius:9px;margin-top:5px}.postcard-comment-actions{display:flex;align-items:center;gap:10px;padding:2px 8px;color:var(--muted);font-size:.72rem}.postcard-comment-actions form{display:inline-flex}.postcard-comment-actions button,.postcard-comment-actions summary{padding:0;background:transparent;color:inherit;font-size:inherit;font-weight:650;cursor:pointer}.postcard-comment-actions details form{position:absolute;z-index:5;background:#fff;padding:8px;border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px #1112}.postcard-comment-composer{display:grid!important;grid-template-columns:34px minmax(0,1fr) 36px;align-items:center;gap:7px;padding:9px 16px 14px!important}.postcard-comment-composer .comment-avatar{width:32px!important;height:32px!important}.postcard-comment-composer .comment-input-wrap{min-height:38px!important;border-radius:20px!important}.postcard-comment-composer input[name=body]{height:38px!important;min-height:38px!important;padding:8px 76px 8px 13px!important;font-size:.86rem}.postcard-comment-composer button{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important}.postcard-comment-composer .comment-input-wrap .comment-gif-button,.postcard-comment-composer .comment-input-wrap .comment-emoji{width:30px!important;height:30px!important}.postcard-lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#07101aeb}.postcard-lightbox::backdrop{background:#07101aeb}.postcard-lightbox>button{position:fixed;right:18px;top:18px;width:44px;height:44px;border-radius:50%;z-index:2;font-size:1.7rem}.postcard-lightbox>div{width:100%;height:100%;display:grid;place-items:center;padding:50px}.postcard-lightbox img,.postcard-lightbox video{max-width:100%;max-height:100%;object-fit:contain}
@media(max-width:700px){.feed-list,.profile-feed,.context-post-list{max-width:none}.postcard{border-radius:10px!important}.postcard-header{padding:12px 12px 7px}.postcard-copy{padding:5px 12px 10px}.postcard-gallery.count-3{grid-template-rows:170px 170px}.postcard-gallery.count-4{grid-template-rows:180px 180px}.postcard-gallery.count-5plus{grid-template-rows:170px 170px}.postcard-engagement,.postcard-actionbar{margin-inline:12px}.postcard-comments{padding-inline:12px}.postcard-comment-composer{padding-inline:12px!important}.postcard-comment-composer input[name=body]{font-size:.82rem}.postcard-lightbox>div{padding:48px 8px}}
body.is-auth-embed{background:transparent!important;overflow:auto!important;min-height:0!important}body.is-auth-embed .living-sky,body.is-auth-embed .legal-footer{display:none!important}body.is-auth-embed .register-main,body.is-auth-embed .recovery-shell{min-height:0!important;padding:0!important;background:transparent!important}body.is-auth-embed .register-card,body.is-auth-embed .recovery-card{width:100%!important;max-width:none!important;margin:0!important;box-shadow:none!important;border:0!important;background:transparent!important;color:#fff!important}body.is-auth-embed input,body.is-auth-embed select{background:#071c46!important;color:#fff!important;border-color:#80adf044!important}body.is-auth-embed a{color:#82baff!important}