:root{--p:#E91E63;--pd:#AD1457;--a:#FF9800;--al:#FFE0B2}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Segoe UI',Tahoma,sans-serif;background:linear-gradient(135deg,#fce4ec,#fff3e0,#f3e5f5);min-height:100vh;position:relative}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 30%,rgba(233,30,99,.06) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(156,39,176,.06) 0%,transparent 40%),radial-gradient(circle at 50% 50%,rgba(255,152,0,.04) 0%,transparent 50%);pointer-events:none;z-index:0}

/* App Install Banner */
.mobile-banner{display:none;background:linear-gradient(135deg,var(--pd),var(--p));color:#fff;padding:.6rem .8rem;align-items:center;gap:.6rem;position:relative;z-index:51;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.banner-icon{font-size:1.5rem;flex-shrink:0}
.banner-text{flex:1;line-height:1.3}.banner-text strong{display:block;font-size:.85rem}.banner-text span{font-size:.7rem;opacity:.9}
.banner-install{padding:.4rem 1rem;background:#fff;color:var(--pd);border:none;border-radius:20px;font-weight:800;font-size:.78rem;cursor:pointer;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.1)}
.banner-install:hover{background:var(--al)}
.banner-close{background:none;border:none;color:rgba(255,255,255,.6);font-size:1.2rem;cursor:pointer;flex-shrink:0;padding:0 .2rem}.banner-close:hover{color:#fff}

.main-header{background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;padding:.5rem .8rem;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;box-shadow:0 2px 10px rgba(0,0,0,.15);flex-wrap:wrap;gap:.3rem}
.header-left h1{font-size:1.2rem;font-weight:800}
.header-right{display:flex;align-items:center}
.hbtn-group{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.btn-h{padding:.3rem .6rem;background:rgba(255,255,255,.9);color:var(--pd);border:none;border-radius:5px;font-weight:700;font-size:.72rem;cursor:pointer}.btn-h:hover{background:#fff}
.btn-h-dm{position:relative}
.badge-dot{position:absolute;top:-3px;right:-3px;background:var(--a);color:#fff;border-radius:50%;width:13px;height:13px;font-size:.45rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.btn-h-out{padding:.3rem .6rem;background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:5px;font-weight:600;font-size:.7rem;cursor:pointer}
.btn-h-login{padding:.35rem .7rem;background:rgba(255,255,255,.95);color:var(--pd);border:none;border-radius:6px;font-weight:700;font-size:.75rem;cursor:pointer}
.btn-h-register{padding:.35rem .7rem;background:var(--a);color:#fff;border:none;border-radius:6px;font-weight:700;font-size:.75rem;cursor:pointer}
.lang-sel{padding:.2rem .3rem;border:1px solid rgba(255,255,255,.3);border-radius:4px;background:rgba(255,255,255,.15);color:#fff;font-size:.65rem;cursor:pointer}.lang-sel option{background:#333;color:#fff}

/* MODAL */
.modal-bg{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:200;display:flex;align-items:center;justify-content:center}

/* AUTH FULLSCREEN */
.auth-full{width:100%;height:100%;display:flex}
.auth-bg{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,#F3E5F5 0%,#FCE4EC 25%,#FFF3E0 50%,#F3E5F5 75%,#4A148C 100%)}
.auth-tree{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);width:55vw;max-width:600px;height:auto;z-index:1}
.abr{stroke-dasharray:400;stroke-dashoffset:400;animation:adraw 1.2s ease-out .5s forwards}
.abr2{stroke-dasharray:350;stroke-dashoffset:350;animation:adraw 1.2s ease-out .9s forwards}
.abr3{stroke-dasharray:300;stroke-dashoffset:300;animation:adraw 1s ease-out 1.2s forwards}
@keyframes adraw{to{stroke-dashoffset:0}}
.alvs{opacity:0;animation:afade 1.5s ease-out 1.5s forwards}
.arts{stroke-dasharray:1200;stroke-dashoffset:1200;animation:adraw 2.5s ease-out .8s forwards}
@keyframes afade{to{opacity:1}}
.auth-brand{position:absolute;top:10%;left:50%;transform:translateX(-50%);font-size:3rem;color:#fff;z-index:2;text-shadow:0 3px 20px rgba(0,0,0,.35);font-weight:800;opacity:0;animation:abrand 1s ease-out .3s forwards}
@keyframes abrand{from{opacity:0;transform:translateX(-50%) translateY(-15px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.auth-panel{width:420px;min-width:420px;background:linear-gradient(180deg,rgba(173,20,87,.88) 0%,rgba(173,20,87,.8) 6%,rgba(255,253,247,.96) 16%,rgba(255,253,247,.98) 100%);backdrop-filter:blur(12px);border-left:3px solid var(--a);overflow-y:auto;padding:1.5rem 1.6rem 2rem;position:relative;opacity:0;transform:translateX(100%);animation:apanel .7s ease-out 1.8s forwards}
@keyframes apanel{to{opacity:1;transform:translateX(0)}}
.auth-close-btn{position:absolute;top:.8rem;right:.8rem;background:none;border:none;font-size:1.5rem;color:rgba(255,255,255,.7);cursor:pointer;z-index:3}.auth-close-btn:hover{color:#fff}
.auth-title{font-size:1.5rem;color:#fff;margin-bottom:.8rem;font-weight:800}

.modal-box{background:#fff;border-radius:12px;width:420px;max-width:95%;max-height:85vh;overflow-y:auto;box-shadow:0 10px 40px rgba(0,0,0,.2)}
.modal-top{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1rem;border-bottom:1px solid #eee}.modal-top h3{color:var(--pd);font-size:.9rem}.modal-x{background:none;border:none;font-size:1.2rem;color:#999;cursor:pointer}
.modal-inner{padding:.8rem 1rem}
.fg{margin-bottom:.6rem}.fg label{display:block;color:#444;font-weight:600;font-size:.78rem;margin-bottom:.2rem}.fg .opt{color:#bbb;font-size:.68rem;font-weight:400}
.fg input,.fg select{width:100%;padding:.55rem .7rem;border:1.5px solid #ddd;border-radius:7px;font-size:.85rem;background:#fafafa}.fg input:focus,.fg select:focus{outline:none;border-color:var(--p);background:#fff}
.ferr{color:#d32f2f;font-size:.75rem;margin-bottom:.4rem;min-height:12px}
.btn-main{width:100%;padding:.65rem;border:2px solid var(--a);border-radius:8px;background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;font-size:.88rem;font-weight:700;cursor:pointer;margin-bottom:.4rem}
.btn-main:hover{opacity:.9}
.aform{display:none}.aform.show{display:block}
.btn-pick{flex:1;padding:.65rem;border:none;border-radius:8px;background:var(--p);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;margin-right:.4rem}.btn-pick-alt{background:var(--a);margin-right:0}
#regPick{display:flex;margin:.5rem 0}
.btn-back{background:none;border:none;color:var(--p);font-weight:600;font-size:.78rem;cursor:pointer;margin-top:.3rem}.btn-back:hover{text-decoration:underline}
.auth-tabs{display:flex;border-top:1px solid #eee;margin-top:.6rem;padding-top:.5rem}
.atab{flex:1;padding:.4rem;border:none;background:transparent;font-size:.78rem;font-weight:600;color:#999;cursor:pointer;border-bottom:2px solid transparent}.atab.active{color:var(--p);border-bottom-color:var(--p)}

/* PAGES */
.main-content{flex:1}
.page{display:none}.page.active{display:block}

/* FEED */
.feed-wrapper{max-width:600px;margin:0 auto;padding:1rem;position:relative;z-index:1}
.post-box{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(255,243,224,.9));border-radius:16px;padding:.8rem 1rem;margin-bottom:1rem;box-shadow:0 2px 12px rgba(233,30,99,.06),0 1px 4px rgba(0,0,0,.04);backdrop-filter:blur(8px);border:1px solid rgba(233,30,99,.08);transition:box-shadow .3s}
.post-box:hover{box-shadow:0 4px 18px rgba(233,30,99,.1),0 2px 6px rgba(0,0,0,.06)}
.post-box textarea{width:100%;padding:.45rem .65rem;border:1.5px solid #f0d0d8;border-radius:10px;font-size:.82rem;font-family:inherit;resize:none;margin-bottom:.4rem;background:rgba(255,255,255,.7)}.post-box textarea:focus{outline:none;border-color:var(--p);background:#fff}
.post-row{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap}
.btn-photo{padding:.3rem .6rem;background:linear-gradient(135deg,var(--p),var(--pd));color:#fff;border:none;border-radius:8px;font-size:.7rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-photo:hover{opacity:.9;transform:translateY(-1px)}
.file-name{font-size:.65rem;color:#999}
.privacy-label select{padding:.25rem .45rem;border:1px solid #f0d0d8;border-radius:6px;font-size:.7rem;background:rgba(255,255,255,.8)}
.btn-share{padding:.3rem .7rem;background:linear-gradient(135deg,var(--a),#F57C00);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:.72rem;cursor:pointer;margin-left:auto;transition:all .2s}.btn-share:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(255,152,0,.25)}

.feed-list{position:relative;z-index:1}
.feed-item{background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(252,228,236,.5));border-radius:14px;margin-bottom:.8rem;overflow:hidden;box-shadow:0 2px 10px rgba(233,30,99,.05),0 1px 3px rgba(0,0,0,.03);border:1px solid rgba(233,30,99,.06);transition:transform .2s,box-shadow .2s}
.feed-item:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(233,30,99,.08),0 2px 6px rgba(0,0,0,.04)}
.feed-head{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem}
.feed-av{width:36px;height:36px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.7rem;color:#999;overflow:hidden}.feed-av img{width:100%;height:100%;object-fit:cover}
.feed-name{font-weight:700;font-size:.88rem;color:#222}.feed-time{font-size:.65rem;color:#aaa;margin-left:auto}
.feed-priv{font-size:.55rem;color:var(--p);margin-left:.3rem}
.feed-img{width:100%;max-height:400px;object-fit:cover;cursor:pointer;display:block}
.feed-cap{padding:.6rem .9rem;font-size:.88rem;color:#333;line-height:1.4}
.feed-del{background:none;border:none;color:#ccc;font-size:.8rem;cursor:pointer;margin-left:.3rem;padding:.1rem .3rem;border-radius:4px}.feed-del:hover{color:var(--p);background:rgba(233,30,99,.08)}
.feed-coms{padding:0 .9rem .4rem}
.feed-com{padding:.2rem 0;font-size:.78rem;color:#555;border-bottom:1px solid #f5f5f5}.feed-com:last-child{border-bottom:none}.feed-com b{color:#222}
.feed-ci{display:flex;gap:.3rem;padding:.5rem .9rem;border-top:1px solid #eee}
.feed-ci input{flex:1;padding:.35rem .5rem;border:1.5px solid #ddd;border-radius:6px;font-size:.75rem}.feed-ci input:focus{outline:none;border-color:var(--p)}
.feed-ci button{padding:.35rem .6rem;background:var(--p);color:#fff;border:none;border-radius:6px;font-size:.68rem;font-weight:600;cursor:pointer}

/* TREE PAGE */
.tree-layout{display:flex;height:calc(100vh - 48px)}
.tree-sidebar{width:200px;min-width:200px;background:rgba(255,255,255,.9);border-right:1px solid rgba(0,0,0,.06);padding:.8rem 0;overflow-y:auto}
.tree-sidebar h3{padding:0 .8rem .5rem;color:var(--pd);font-size:.88rem}
.fam-item{padding:.5rem .8rem;cursor:pointer;font-size:.78rem;color:#555;border-left:3px solid transparent}.fam-item:hover{background:var(--al);border-left-color:var(--p)}.fam-item.active{background:var(--al);border-left-color:var(--p);font-weight:600;color:var(--pd)}
.tree-area{flex:1;overflow:auto;position:relative;padding:1rem;background:linear-gradient(180deg,#fce4ec,#fff3e0,#f3e5f5)}
.tree-code-tag{position:absolute;top:.6rem;right:.8rem;background:var(--a);color:#fff;padding:.15rem .5rem;border-radius:4px;font-size:.65rem;font-weight:700}
.branch-svg{position:absolute;top:0;left:0;pointer-events:none;z-index:1}
.tree-view{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;padding:.8rem 0 3rem;min-height:100%}
.empty-state{margin:auto;color:#bbb;font-size:.88rem}

/* TREE NODES */
.root-box{display:flex;align-items:center;gap:16px;padding:20px 36px;background:linear-gradient(135deg,var(--p),var(--pd));border-radius:4px;color:#fff;position:relative;box-shadow:0 4px 16px rgba(233,30,99,.25);border:3px solid var(--a)}
.rp{text-align:center}.rp-n{font-size:1.3rem;font-weight:900}.rp-s{font-size:.82rem;opacity:.9;font-weight:700}
.rp-h{font-size:1.2rem;color:var(--a);animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.rmb{position:absolute;right:-11px;top:50%;transform:translateY(-50%);width:20px;height:20px;background:#555;border-radius:50%;color:#fff;font-size:.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #fff;z-index:5}.rmb:hover{background:#333}

.ln{text-align:center;cursor:default;transition:transform .2s;position:relative}.ln.clk{cursor:pointer}.ln.clk:hover{transform:scale(1.03)}
.lb{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 24px 12px;min-width:140px;background:#fff;border:3px solid #bbb;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ln.clk:hover .lb{border-color:var(--p)}
.lb .nn{font-size:1rem;font-weight:900;color:#111;line-height:1.2}.lb .ns{font-size:.75rem;font-weight:700;color:#444}
.lb.sm{padding:12px 20px 10px;min-width:125px}.lb.sm .nn{font-size:.92rem}.lb.sm .ns{font-size:.7rem}
.lbg{position:absolute;top:-7px;right:-7px;width:18px;height:18px;background:var(--p);border-radius:50%;color:#fff;font-size:.55rem;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid #fff;z-index:5}.lbg.open{background:var(--pd)}
.lmb{position:absolute;bottom:-6px;left:-6px;width:16px;height:16px;background:#666;border-radius:50%;color:#fff;font-size:.48rem;display:flex;align-items:center;justify-content:center;border:2px solid #fff;cursor:pointer;z-index:5}.lmb:hover{background:#333}
.nph{width:28px;height:28px;border-radius:50%;object-fit:cover;border:2px solid var(--a);margin-bottom:2px;cursor:pointer}
.g1r{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}.g1c{display:flex;flex-direction:column;align-items:center;padding:0 3px}
.cr{display:flex;align-items:center;gap:5px}.ch{font-size:.9rem;color:var(--p);animation:pulse 2s ease-in-out infinite}
.clbl{font-size:.5rem;color:#bbb;font-weight:700;text-transform:uppercase;margin-top:6px;margin-bottom:2px}
.cri{display:flex;justify-content:center;gap:5px;flex-wrap:wrap}.cc{display:flex;flex-direction:column;align-items:center}

/* DM */
.dm-left{width:280px;min-width:280px;height:100%;border-right:1px solid #eee;display:flex;flex-direction:column;background:#fafafa}.dm-left-top{padding:.7rem .8rem;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--p),var(--pd))}.dm-left-top h3{color:#fff;font-size:.9rem}.dm-left-top .modal-x{color:rgba(255,255,255,.8);font-size:1.3rem;background:none;border:none;cursor:pointer}.dm-left-top .modal-x:hover{color:#fff}
#dmConversations{flex:1;overflow-y:auto}
.dci{padding:.55rem .65rem;cursor:pointer;border-bottom:1px solid #f8f8f8;display:flex;align-items:center;gap:.4rem}.dci:hover{background:var(--al)}.dci.act{background:var(--al)}
.dca{width:28px;height:28px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.6rem;color:#999;overflow:hidden;flex-shrink:0}.dca img{width:100%;height:100%;object-fit:cover}
.dcinf{flex:1;min-width:0}.dcn{font-weight:700;font-size:.72rem;color:#333}.dcl{font-size:.6rem;color:#aaa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dcur{width:6px;height:6px;background:var(--p);border-radius:50%}
.dm-right{flex:1;display:flex;flex-direction:column}.dm-right-top{padding:.7rem .8rem;border-bottom:1px solid #eee;font-weight:700;font-size:.9rem;color:#333;background:#f8f8f8}
.dm-msgs{flex:1;overflow-y:auto;padding:.8rem;background:#f5f5f0}.dm-empty{text-align:center;color:#ccc;margin-top:3rem;font-size:.85rem}
.dmb{max-width:70%;padding:.5rem .75rem;border-radius:12px;margin-bottom:.4rem;font-size:.85rem;line-height:1.35}.dms{background:var(--p);color:#fff;margin-left:auto;border-bottom-right-radius:3px}.dmr{background:#e8e8e0;color:#333;margin-right:auto;border-bottom-left-radius:3px}
.dmm{font-size:.55rem;opacity:.7;margin-top:2px}
.dm-input{padding:.6rem .8rem;border-top:1px solid #eee;background:#fff}.dm-time{display:flex;gap:.3rem;margin-bottom:.4rem}
.btn-sm{flex:1;padding:.35rem;border:none;border-radius:6px;background:var(--p);color:#fff;font-weight:600;font-size:.72rem;cursor:pointer}.btn-sm-alt{background:#666}
.dm-date{display:flex;gap:.25rem;margin-bottom:.25rem}.di{flex:1;padding:.25rem;border:1.5px solid #ddd;border-radius:5px;font-size:.68rem;text-align:center}
.dm-compose{display:flex;gap:.3rem}.dm-compose textarea{flex:1;padding:.35rem .45rem;border:1.5px solid #ddd;border-radius:6px;font-size:.78rem;font-family:inherit;resize:none}.dm-compose textarea:focus{outline:none;border-color:var(--p)}
.btn-send{padding:.35rem .65rem;background:var(--p);color:#fff;border:none;border-radius:6px;font-weight:700;font-size:.72rem;cursor:pointer}
.pv-img{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.4)}
.vv-vid{max-width:90vw;max-height:90vh;border-radius:8px;box-shadow:0 8px 40px rgba(0,0,0,.4)}

/* Feed video */
.feed-vid{width:100%;max-height:400px;display:block;background:#000}
.dm-media-msg img,.dm-media-msg video{max-width:200px;max-height:150px;border-radius:8px;cursor:pointer;display:block;margin-top:3px}

/* Profile modal */
.profile-box{max-width:450px}
.prof-header{text-align:center;padding:1rem}
.prof-avatar{width:80px;height:80px;border-radius:50%;object-fit:cover;border:3px solid var(--a);margin:0 auto .5rem}
.prof-avatar-placeholder{width:80px;height:80px;border-radius:50%;background:#eee;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:#bbb;margin:0 auto .5rem}
.prof-name{font-size:1.1rem;font-weight:800;color:#222}.prof-family{font-size:.78rem;color:#888;margin-top:.2rem}
.prof-info{padding:0 1rem 1rem}.prof-row{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid #f5f5f5;font-size:.82rem}.prof-row span:first-child{color:#888}.prof-row span:last-child{color:#333;font-weight:600}

/* Settings */
.setting-row{display:flex;align-items:center;gap:.6rem;padding:.6rem 0;flex-wrap:wrap}
.setting-row label{font-weight:600;font-size:.85rem;color:#333}
.setting-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--p)}
.setting-desc{font-size:.7rem;color:#999;width:100%}

/* DM media */
.btn-dm-media{background:none;border:none;font-size:1.1rem;cursor:pointer;padding:.2rem;flex-shrink:0}
.dm-media-preview{display:flex;align-items:center;gap:.3rem;padding:.2rem .5rem;font-size:.7rem;color:#888}

@media(max-width:768px){
    /* Header mobil */
    .main-header{padding:.4rem .5rem}
    .header-left h1{font-size:.9rem}
    .btn-h,.btn-h-login,.btn-h-register,.btn-h-out{font-size:.58rem;padding:.22rem .4rem}
    .lang-sel{font-size:.55rem;padding:.12rem .2rem}
    #treeBtns{display:none !important}

    /* Feed */
    .feed-wrapper{padding:.5rem .3rem}
    .post-box{padding:.5rem .6rem;border-radius:10px}
    .post-box textarea{font-size:.78rem;padding:.35rem .5rem}
    .post-row{gap:.2rem;flex-wrap:wrap}
    .btn-photo,.btn-share{font-size:.65rem;padding:.25rem .5rem}
    .privacy-label select{font-size:.62rem;padding:.2rem .3rem}
    .feed-item{border-radius:10px;margin-bottom:.5rem}
    .feed-head{padding:.45rem .5rem;gap:.3rem}
    .feed-av{width:28px;height:28px}
    .feed-name{font-size:.75rem}
    .feed-time{font-size:.52rem}
    .feed-img{max-height:250px}
    .feed-cap{padding:.4rem .5rem;font-size:.78rem}
    .feed-com{font-size:.68rem}
    .feed-ci{padding:.3rem .5rem;gap:.2rem}
    .feed-ci input{font-size:.65rem;padding:.25rem .35rem}
    .feed-ci button{font-size:.58rem;padding:.25rem .4rem}
    .feed-vid{max-height:220px}

    /* Tree */
    .tree-layout{flex-direction:column;height:auto;min-height:calc(100vh - 50px)}
    .tree-sidebar{width:100%;min-width:100%;border-right:none;border-bottom:1px solid #eee;max-height:120px;padding:.4rem 0}
    .tree-sidebar h3{font-size:.75rem;padding:0 .5rem .2rem}
    .fam-item{font-size:.68rem;padding:.3rem .5rem}
    .tree-area{padding:.5rem}
    .tree-code-tag{font-size:.52rem;top:.3rem;right:.4rem}
    .root-box{padding:10px 16px;gap:8px;flex-wrap:wrap;justify-content:center}
    .rp-n{font-size:.9rem}.rp-s{font-size:.62rem}.rp-h{font-size:.8rem}
    .lb{padding:8px 14px 6px;min-width:100px}.lb .nn{font-size:.78rem}.lb .ns{font-size:.58rem}
    .lb.sm{padding:7px 11px 5px;min-width:90px}.lb.sm .nn{font-size:.7rem}
    .g1r{gap:5px;margin-top:18px}
    .rmb{width:15px;height:15px;font-size:.4rem}
    .lmb{width:13px;height:13px;font-size:.38rem}
    .lbg{width:14px;height:14px;font-size:.45rem}
    .nph{width:22px;height:22px}

    /* Auth */
    .auth-full{flex-direction:column}
    .auth-bg{height:160px;flex:none}
    .auth-brand{font-size:1.8rem;top:15%}
    .auth-tree{width:85vw}
    .auth-panel{width:100%;min-width:100%;border-left:none;border-top:3px solid var(--a);animation:none;opacity:1;transform:none;padding:1rem .8rem 1.2rem}
    .auth-title{font-size:1.1rem}
    .fg input,.fg select{font-size:.78rem;padding:.45rem .55rem}
    .fg label{font-size:.72rem}

    /* Modals */
    .modal-box{width:96%;max-width:96%;border-radius:10px}
    .modal-top{padding:.5rem .7rem}
    .modal-inner{padding:.5rem .7rem}
    .btn-main{font-size:.8rem;padding:.55rem}
    .btn-pick{font-size:.72rem;padding:.5rem}

    /* DM mobil */
    #dmScreen>div{flex-direction:column!important}
    .dm-left{width:100%!important;min-width:100%!important;height:auto!important;max-height:40vh;border-right:none;border-bottom:1px solid #eee;flex-shrink:0}
    .dm-left-top{padding:.45rem .5rem}
    .dm-left-top h3{font-size:.78rem}
    .dci{padding:.4rem .5rem}
    .dca{width:24px;height:24px;font-size:.52rem}
    .dcn{font-size:.65rem}
    .dcl{font-size:.52rem}
    .dm-right{flex:1;min-height:0}
    .dm-right-top{font-size:.78rem;padding:.45rem .5rem}
    .dm-msgs{padding:.5rem}
    .dmb{font-size:.78rem;padding:.4rem .6rem;max-width:82%}
    .dm-input{padding:.45rem .5rem}
    .dm-compose textarea{font-size:.75rem;padding:.35rem .45rem}
    .btn-send{font-size:.68rem;padding:.32rem .5rem}
    .btn-sm{font-size:.62rem;padding:.28rem}
    .di{font-size:.62rem;padding:.22rem}
    .btn-dm-media{font-size:1rem}
    .dm-media-msg img,.dm-media-msg video{max-width:160px;max-height:110px}

    /* Profile */
    .profile-box{max-width:96%}
    .prof-avatar{width:55px;height:55px}
    .prof-avatar-placeholder{width:55px;height:55px;font-size:1.5rem}
    .prof-name{font-size:.9rem}
    .prof-row{font-size:.72rem}

    /* Settings */
    .setting-row label{font-size:.75rem}
    .setting-desc{font-size:.62rem}

    /* Photo/Video Viewer */
    .pv-img{max-width:95vw;max-height:85vh}
    .vv-vid{max-width:95vw;max-height:85vh}
}

/* PWA Standalone Mode */
@media(display-mode:standalone){
    .mobile-banner{display:none!important}
    body{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
    .main-header{padding-top:calc(.5rem + env(safe-area-inset-top))}
}