html,body{margin:0;padding:0;background:#e7e2d8;font-family:'Inter',sans-serif;}
*{-webkit-tap-highlight-color:transparent;}

.stage{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 0;
       background:radial-gradient(120% 120% at 50% 0%,#efe9dd 0%,#ddd6c8 100%);}

.phone{position:relative;width:375px;height:750px;background:#FDFBF7;border-radius:44px;
       box-shadow:0 30px 70px rgba(60,30,10,.35),0 0 0 11px #16110d,0 0 0 13px #2a211a;
       overflow:hidden;}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:26px;
       background:#16110d;border-bottom-left-radius:16px;border-bottom-right-radius:16px;z-index:60;}

.statusbar{position:absolute;top:0;left:0;right:0;height:42px;z-index:55;
             display:flex;align-items:flex-end;justify-content:space-between;
             padding:0 22px 5px;font-size:13px;font-weight:600;color:#3b2418;pointer-events:none;}
.statusbar .icons{display:flex;align-items:center;gap:5px;}

.screen{position:absolute;top:42px;bottom:66px;left:0;right:0;overflow-y:auto;overflow-x:hidden;
         -webkit-overflow-scrolling:touch;}
.screen::-webkit-scrollbar{display:none;}
.screen{scrollbar-width:none;}
.noscroll::-webkit-scrollbar{display:none;}
.noscroll{scrollbar-width:none;}

.bottomnav{position:absolute;bottom:0;left:0;right:0;height:66px;z-index:50;
             background:rgba(253,251,247,.94);backdrop-filter:blur(10px);
             border-top:1px solid #eadfce;display:flex;}
.navbtn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
         color:#a58b73;font-size:10.5px;font-weight:600;letter-spacing:.02em;transition:.2s;}
.navbtn.active{color:#7C2D12;}
.navbtn.active .dot{opacity:1;transform:scale(1);}
.navbtn .dot{width:5px;height:5px;border-radius:50%;background:#D97706;opacity:0;transform:scale(.2);
               transition:.25s;margin-top:1px;}

.imgwrap{position:relative;overflow:hidden;background:linear-gradient(135deg,#f0e7d8,#e6d7c2);}
.imgwrap .emoji{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
                 font-size:40px;opacity:.85;}
.imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}

.selo{display:inline-flex;align-items:center;gap:3px;font-size:8.5px;font-weight:700;letter-spacing:.06em;
        text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1.4px solid currentColor;}

.chiprow{display:flex;gap:10px;overflow-x:auto;padding:2px 20px 4px;}
.chiprow::-webkit-scrollbar{display:none;} .chiprow{scrollbar-width:none;}

.tab{display:none;} .tab.active{display:block;}
.fade{animation:fade .35s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.overlay{position:absolute;inset:0;z-index:80;display:none;}
.overlay.open{display:block;}
.overlay .backdrop{position:absolute;inset:0;background:rgba(30,15,8,.55);backdrop-filter:blur(2px);
                     animation:fade .25s ease;}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;overflow-y:auto;background:#FDFBF7;
         border-top-left-radius:26px;border-top-right-radius:26px;animation:slideUp .32s cubic-bezier(.2,.8,.2,1);}
.sheet::-webkit-scrollbar{display:none;} .sheet{scrollbar-width:none;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:none;}}
.grabber{width:42px;height:5px;border-radius:99px;background:#e2d4c0;margin:9px auto 4px;}

.toast{position:absolute;left:50%;bottom:82px;transform:translateX(-50%) translateY(20px);
         z-index:90;background:#15803D;color:#fff;font-size:12.5px;font-weight:600;padding:10px 16px;
         border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;
         transition:.3s;white-space:nowrap;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.badge{position:absolute;top:-6px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
         background:#D97706;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;
         justify-content:center;border:2px solid #FDFBF7;}
.stamp-bg{background-image:radial-gradient(circle at 10% 10%,rgba(255,255,255,.06) 0 1px,transparent 1px);
            background-size:14px 14px;}
.press{transition:transform .12s;} .press:active{transform:scale(.94);}