:root{ --ph:rgba(28,23,48,.24); --soft:#EDE7DA; --paper:#F4F0E8; --glow:#FFE9C2; --card:#FFFFFF; --line:#DED7CA; --line-2:#EAE4D8; --txt:#1C1730; --dim:#6C6480; --dim-2:#9A93A8; --amber:#F2B33D; --amber-d:#C98A16; --amber-accent:var(--amber-d); --rose:#E8425F; --green:#2FA97F; --sel-bg:#FBF1DC; --chip-bg:#FFF6E3; --vis-on-bg:#EAF5F0; /* bare r,g,b triplets so hairlines/scrims/shadows can carry their own alpha via rgba(var(...),a) and still flip base color between themes */ --ink-rgb:28,23,48; --paper-rgb:244,240,232; --umber-rgb:60,45,20; --vn:300px; /* Safe area insets kept in sync by app.js (Telegram.WebApp.safeAreaInset / contentSafeAreaInset) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); /* kept in sync with Telegram.WebApp.viewportStableHeight by app.js; falls back to 100dvh outside Telegram (plain browser testing) or before the first viewportChanged event */ --app-h:100dvh; /* Telegram theme fallbacks — exposed for interop only. doira's own --amber/--paper/etc. are the brand and are never rebound to Telegram.WebApp.themeParams. */ --tg-link-color:#2481CC; --tg-button-color:var(--amber); --tg-button-text-color:#2A1B00; } /* doira's own dark palette — same hues as light, re-tuned for a dark background. Driven by Telegram.WebApp.colorScheme via [data-theme] on (see app.js); the prefers-color-scheme block below is only a fallback for out-of-Telegram testing. */ :root[data-theme="dark"]{ --ph:rgba(244,240,232,.30); --soft:#241F35; --paper:#15121E; --glow:#3A2C12; --card:#211C31; --line:#372F4A; --line-2:#2B2540; --txt:#F2EEE6; --dim:#A79FC2; --dim-2:#7A7296; --amber-accent:#F7C464; --rose:#FF6B85; --green:#3DC495; --sel-bg:#3A2E14; --chip-bg:#332811; --vis-on-bg:#16352C; --ink-rgb:244,240,232; --paper-rgb:21,18,30; --umber-rgb:0,0,0; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ph:rgba(244,240,232,.30); --soft:#241F35; --paper:#15121E; --glow:#3A2C12; --card:#211C31; --line:#372F4A; --line-2:#2B2540; --txt:#F2EEE6; --dim:#A79FC2; --dim-2:#7A7296; --amber-accent:#F7C464; --rose:#FF6B85; --green:#3DC495; --sel-bg:#3A2E14; --chip-bg:#332811; --vis-on-bg:#16352C; --ink-rgb:244,240,232; --paper-rgb:21,18,30; --umber-rgb:0,0,0; } } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;text-size-adjust:100%} html,body{height:100%;overflow:hidden;overscroll-behavior-y:none} body{margin:0;color:var(--txt);background:var(--paper); font-family:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:17px;line-height:1.45;overscroll-behavior:none;overscroll-behavior-y:none;-webkit-font-smoothing:antialiased; -webkit-user-select:none;-webkit-touch-callout:none} input,textarea{-webkit-user-select:text;-webkit-touch-callout:default} button,a,[onclick]{touch-action:manipulation} button{font:inherit;color:inherit;border:0;background:none;cursor:pointer} input{font:inherit} /* height (not min-height): pins the shell to exactly Telegram's reported viewport so oversized content scrolls inside a region below (.page, .regbody, .stagewrap, .overlay, ...) instead of growing #app past the visible area and forcing the whole page to scroll. */ #app{max-width:460px;margin:0 auto;height:var(--app-h,100dvh);display:flex;flex-direction:column; position:relative;overflow:hidden;overscroll-behavior-y:none; background:radial-gradient(96% 46% at 50% 0%,var(--glow) 0%,transparent 64%),var(--paper)} .screens-wrap{position:relative;flex:1 1 0;min-height:0;width:100%;overflow:hidden} .screen{position:absolute;inset:0;display:none;flex-direction:column;width:100%;height:100%; overflow:hidden;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden} .screen.on{display:flex;z-index:2} /* Oynalar almashinuvi — silliq slayd animatsiyasi */ .slide-in-from-right{ display:flex!important;z-index:3; animation:scrSlideInRight .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } .slide-out-to-left{ display:flex!important;z-index:1; animation:scrSlideOutLeft .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } .slide-in-from-left{ display:flex!important;z-index:3; animation:scrSlideInLeft .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } .slide-out-to-right{ display:flex!important;z-index:1; animation:scrSlideOutRight .32s cubic-bezier(.25,1,.5,1) forwards; pointer-events:none; } @keyframes scrSlideInRight{ from{transform:translate3d(100%,0,0)} to{transform:translate3d(0,0,0)} } @keyframes scrSlideOutLeft{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-100%,0,0)} } @keyframes scrSlideInLeft{ from{transform:translate3d(-100%,0,0)} to{transform:translate3d(0,0,0)} } @keyframes scrSlideOutRight{ from{transform:translate3d(0,0,0)} to{transform:translate3d(100%,0,0)} } /* doira */ .vnwrap{position:relative;width:var(--vn);height:var(--vn);margin:0 auto;flex:none} .vnwrap.md{--vn:200px} .vnwrap.sm{--vn:120px} .vnwrap.xs{--vn:66px} .vn{position:absolute;inset:6px;border-radius:50%;overflow:hidden;background:#E9E2D5; display:grid;place-items:center} .vn video{width:100%;height:100%;object-fit:cover;display:block;transform:scaleX(-1)} #live{transform:scaleX(-1)} .vn .glyph{font-size:calc(var(--vn)/2.5);font-weight:700;letter-spacing:-.04em; color:rgba(255,255,255,.96);position:relative;z-index:2} .blobs{position:absolute;inset:-28%;filter:blur(26px)} .blob{position:absolute;width:72%;height:72%;border-radius:50%; animation:drift 9s ease-in-out infinite alternate} .blob:nth-child(2){right:0;bottom:0;animation-duration:11s;animation-direction:alternate-reverse} @keyframes drift{from{transform:translate(-8%,-6%) scale(1)}to{transform:translate(14%,10%) scale(1.18)}} .ring{position:absolute;inset:0;transform:rotate(-90deg)} .ring circle{fill:none;stroke-width:3.5;stroke-linecap:round} .ring .track{stroke:rgba(var(--ink-rgb),.10)} .ring .prog{stroke:var(--amber);stroke-dasharray:0 1000} .vnwrap.rec .ring .prog{stroke:var(--rose);stroke-dasharray:none} .vn-badge{position:absolute;bottom:0;left:50%;transform:translateX(-50%); background:var(--card);border:1px solid var(--line);border-radius:99px;padding:7px 16px; font-size:14px;font-weight:600;color:var(--dim);white-space:nowrap; box-shadow:0 2px 10px rgba(var(--umber-rgb),.07)} .vn-badge.live{color:var(--rose);border-color:rgba(232,66,95,.32)} .vn-badge.live::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%; background:var(--rose);margin-right:7px;vertical-align:1px;animation:pulse 1.1s infinite} @keyframes pulse{50%{opacity:.25}} .vn-sound{position:absolute;bottom:6px;right:6px;width:38px;height:38px;border-radius:50%; background:rgba(28,23,48,.68);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border:1.5px solid rgba(255,255,255,.28);color:#fff;display:grid;place-items:center; cursor:pointer;z-index:15;box-shadow:0 4px 14px rgba(0,0,0,.28); transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,border-color .2s ease} .vn-sound:hover{transform:scale(1.08);background:rgba(28,23,48,.84)} .vn-sound:active{transform:scale(.88)} .vn-sound svg{width:19px;height:19px;display:block;pointer-events:none} .vn-sound.muted{background:rgba(232,66,95,.82);border-color:rgba(255,255,255,.35);animation:soundPulse 2.4s ease-in-out infinite} @keyframes soundPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}} .vnwrap.xs .vn-sound, .vnwrap.xs2 .vn-sound, .vnwrap.sm .vn-sound{display:none} /* welcome */ #sc-welcome{align-items:center; padding:calc(36px + var(--safe-top)) 26px calc(44px + var(--safe-bottom)); text-align:center} .hero{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center; width:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain} .aura{position:relative;display:grid;place-items:center} .aura::before,.aura::after{content:"";position:absolute;width:200px;height:200px;border-radius:50%; border:1.5px solid rgba(201,138,22,.42);animation:halo 3.6s ease-out infinite} .aura::after{animation-delay:1.8s} @keyframes halo{from{transform:scale(.92);opacity:.8}to{transform:scale(1.4);opacity:0}} h1.brand{font-size:42px;font-weight:800;letter-spacing:-.045em;margin:8px 0 0;line-height:1;flex:none} .lede{color:var(--dim);max-width:30ch;margin:24px auto 0;font-size:17px} .kicker{font-size:24px;font-weight:700;letter-spacing:-.03em;line-height:1.25; margin:16px auto 0;max-width:20ch} /* tugmalar */ .btn{display:block;width:100%;padding:19px;border-radius:20px;background:var(--amber); color:#2A1B00;font-weight:700;font-size:18px;transition:transform .12s ease; box-shadow:0 3px 0 var(--amber-d)} .btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--amber-d)} .btn.ghost{background:transparent;color:var(--dim);border:1.5px solid var(--line); font-weight:600;box-shadow:none} .btn.ghost:active{transform:scale(.98)} .btn.danger{background:transparent;color:var(--rose);border:1.5px solid rgba(232,66,95,.3);box-shadow:none} .btn.danger:active{transform:scale(.97)} .btn.danger.solid{background:var(--rose);border-color:var(--rose);color:#fff; box-shadow:0 3px 0 #B32A43} .btn.danger.solid:active{transform:translateY(2px);box-shadow:0 1px 0 #B32A43} .btn[disabled]{opacity:.5;pointer-events:none} .stack{display:flex;flex-direction:column;gap:11px;width:100%} .stack.two{flex-direction:row;gap:10px} .stack.two .btn{flex:1;white-space:nowrap;padding-left:8px;padding-right:8px} .stack.two .btn.ghost{flex:1} .stack.two .btn.narrow{flex:.62} .btn{display:flex;align-items:center;justify-content:center;gap:9px} .ar{width:9px;height:9px;flex:none;border-top:2.5px solid currentColor; border-right:2.5px solid currentColor;transition:transform .2s ease} .ar.next{transform:rotate(45deg)} .ar.back{transform:rotate(-135deg)} .spacer{flex:1;min-height:26px} /* anketa */ #sc-reg{padding:calc(22px + var(--safe-top)) 26px calc(38px + var(--safe-bottom))} .steps{display:flex;gap:6px;padding:8px 0 20px;flex:none} .steps i{flex:1;height:4px;border-radius:3px;background:var(--line); position:relative;overflow:hidden} .steps i::after{content:"";position:absolute;inset:0;background:var(--amber); transform:scaleX(0);transform-origin:left center; transition:transform .38s cubic-bezier(.25,1,.5,1)} .steps i.done::after{transform:scaleX(1)} .steps i.avail{cursor:pointer} .steps i.avail:hover{opacity:.8} .stepin{animation:stepin .32s cubic-bezier(.2,.9,.3,1)} .stepin-forward{animation:stepSlideFwd .32s cubic-bezier(.25,1,.5,1)} .stepin-backward{animation:stepSlideBwd .32s cubic-bezier(.25,1,.5,1)} @keyframes stepin{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes stepSlideFwd{from{opacity:0;transform:translate3d(36px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} @keyframes stepSlideBwd{from{opacity:0;transform:translate3d(-36px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}} .q{font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1.26; margin:0 auto 20px;text-align:center;max-width:19ch} .q-sub{color:var(--dim);font-size:16px;margin:-12px auto 24px;max-width:30ch; text-align:center} .regbody::-webkit-scrollbar,.rlist::-webkit-scrollbar,.clist::-webkit-scrollbar, .page::-webkit-scrollbar,.hero::-webkit-scrollbar,.stagewrap::-webkit-scrollbar, .overlay::-webkit-scrollbar{width:0;height:0} .regbody,.rlist,.clist,.page,.hero,.stagewrap,.overlay{scrollbar-width:none;-ms-overflow-style:none} .regbody{flex:1 1 0;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden; min-height:0;height:0;overscroll-behavior:contain;padding:4px 6px 16px;margin:0 -6px; -webkit-mask-image:linear-gradient(#000 94%,transparent); mask-image:linear-gradient(#000 94%,transparent)} .regfoot{flex:none;padding-top:16px;padding-bottom:10px;background:var(--paper);position:relative;z-index:2} .fl{display:inline-block;width:26px;height:19px;border-radius:3px;flex:none; box-shadow:0 0 0 1px rgba(var(--ink-rgb),.14);vertical-align:-3px;background-size:cover} .grp{background:var(--soft);border-radius:18px;padding:10px 16px;margin:0 0 9px; transition:background .25s ease,box-shadow .25s ease,transform .16s ease} #placebox{margin:0} .grp:focus-within{box-shadow:inset 0 0 0 1.5px rgba(242,179,61,.55),0 2px 8px rgba(var(--umber-rgb),.06)} .grp.done{background:var(--sel-bg);box-shadow:inset 0 0 0 1.5px rgba(242,179,61,.5)} .grp .k{font-size:12.5px;font-weight:600;color:var(--dim-2);line-height:1.3} .grp .field,.grp .sel-btn,.grp .gsel{width:100%;background:transparent;border:0; padding:0;margin:1px 0 0;font-size:22px;font-weight:700;color:var(--txt); letter-spacing:-.02em;line-height:1.32;text-align:left;outline:none;appearance:none} .grp .field::placeholder{color:var(--ph);font-weight:700} .grp .sel-btn{display:flex;align-items:center;gap:12px;transition:transform .15s ease,opacity .15s ease} .grp .sel-btn:active{transform:scale(.98)} .grp .sel-btn.ph{color:var(--ph)} .grp .sel-btn .chev{margin-left:auto;width:9px;height:9px;flex:none; border-right:2.5px solid var(--dim);border-bottom:2.5px solid var(--dim); transform:translateY(-3px) rotate(45deg);transition:transform .25s cubic-bezier(.25,1,.5,1)} .grp .gsel{display:flex;align-items:center;gap:18px} .grp .gsel button{padding:0;font-size:22px;font-weight:700;line-height:1.32; letter-spacing:-.02em;color:var(--ph);transition:color .2s ease,transform .2s cubic-bezier(.34,1.56,.64,1)} .grp .gsel button:hover{color:var(--dim)} .grp .gsel button:active{transform:scale(.92)} .grp .gsel button[aria-pressed="true"]{color:var(--txt);transform:scale(1.04)} .grp .gsel .sep{width:5px;height:5px;border-radius:50%;background:rgba(var(--ink-rgb),.18);flex:none} .grp.open{background:var(--sel-bg);box-shadow:inset 0 0 0 1.5px rgba(242,179,61,.5)} .grp.open .sel-btn .chev{transform:translateY(2px) rotate(225deg)} .rlist{max-height:min(200px,30vh);overflow-y:auto;overscroll-behavior:contain; margin:10px -16px -4px;padding:0 16px; border-top:1px solid rgba(var(--ink-rgb),.09);animation:rlistSlideIn .25s cubic-bezier(.2,.9,.3,1)} @keyframes rlistSlideIn{from{opacity:0;transform:translate3d(0,-8px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .rlist button{display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:12px 0;font-size:17.5px;font-weight:600;color:var(--dim); border-bottom:1px solid rgba(var(--ink-rgb),.07); transition:color .15s ease,transform .15s ease,background-color .15s ease} .rlist button:active{transform:scale(.98)} .rlist button:last-child{border-bottom:0} .rlist.plain{margin:10px 0 0;padding:0;border-top:1px solid var(--line-2)} .editrow{display:flex;align-items:center;gap:8px;margin-top:1px} .okbtn{width:28px;height:28px;border-radius:9px;background:var(--card); border:1px solid var(--line);color:var(--txt);display:grid;place-items:center;flex:none; transition:transform .18s cubic-bezier(.34,1.56,.64,1),background-color .18s ease,border-color .18s ease} .okbtn:hover{transform:scale(1.1);border-color:var(--amber)} .okbtn:active{transform:scale(.88);background:var(--sel-bg)} .okbtn svg{width:14px;height:14px} .rlist button[aria-selected="true"]{color:var(--amber-accent);font-weight:700} .catgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px} .catlist,.intentlist{display:flex;flex-direction:column;gap:9px} .cat{display:flex;align-items:center;justify-content:center;background:var(--soft); border-radius:16px;min-height:56px;padding:14px 10px;font-size:16.5px;font-weight:700; letter-spacing:-.02em;line-height:1.2;color:var(--dim);text-align:center; transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease,color .2s ease} .catlist .cat,.intent{justify-content:flex-start;text-align:left;padding:16px 18px} .intent{display:flex;align-items:center;background:var(--soft); border-radius:16px;min-height:56px;font-size:16.5px;font-weight:700; letter-spacing:-.02em;line-height:1.2;color:var(--dim); transition:transform .2s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease,color .2s ease} .cat:hover,.intent:hover{transform:translateY(-1px)} .cat:active,.intent:active{transform:scale(.93)} .cat[aria-pressed="true"],.intent[aria-pressed="true"]{background:var(--sel-bg);color:var(--amber-accent); box-shadow:inset 0 0 0 2px var(--amber),0 2px 8px rgba(var(--umber-rgb),.08);transform:none} .bio{width:100%;background:transparent;border:0;outline:none;resize:none; font-size:17px;font-weight:600;line-height:1.45;color:var(--txt);margin-top:3px; min-height:70px;font-family:inherit} .bio:focus,.bio:focus-visible{outline:none;box-shadow:none} .bio::placeholder{color:var(--ph);font-weight:600} .recwrap{position:relative;display:flex;justify-content:center;align-items:center} .recbar{display:flex;gap:10px;justify-content:center;margin-top:18px} .recbar button{flex:1;display:flex;align-items:center;justify-content:center;gap:9px; padding:15px 18px;border-radius:18px;font-size:16.5px;font-weight:700; border:1.5px solid var(--line);background:var(--card);color:var(--dim); transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease} .recbar button:hover{transform:translateY(-1px)} .recbar button:active{transform:translateY(2px) scale(.97)} .recbar button[disabled],.recbar button:disabled{opacity:.5;pointer-events:none;cursor:default;transform:none;box-shadow:none} .recbar button.go{background:var(--amber);border-color:var(--amber);color:#2A1B00; box-shadow:0 3px 0 var(--amber-d),0 4px 12px rgba(var(--umber-rgb),.12)} .recbar button.go:hover{filter:brightness(1.04);transform:translateY(-1px); box-shadow:0 4px 0 var(--amber-d),0 6px 16px rgba(var(--umber-rgb),.16)} .recbar button.go:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 var(--amber-d)} .recbar button.stop{background:var(--rose);border-color:var(--rose);color:#fff; box-shadow:0 3px 0 #B32A43,0 4px 12px rgba(232,66,95,.25)} .recbar button.stop:active{transform:translateY(2px) scale(.97);box-shadow:0 1px 0 #B32A43} .camico{position:relative;width:20px;height:20px;border-radius:50%; border:2px solid currentColor;flex:none} .camico::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px; border-radius:50%;background:currentColor;transform:translate(-50%,-50%)} .stopico{width:12px;height:12px;border-radius:3px;background:currentColor;flex:none; animation:recpulse 1.1s infinite} @keyframes recpulse{50%{opacity:.3}} .biocount{text-align:right;font-size:12px;font-weight:600;color:var(--dim-2);margin-top:2px} .chips{display:flex;flex-wrap:wrap;gap:11px;margin-top:12px} .chip{padding:15px 26px;border-radius:99px;border:2px solid var(--line); font-weight:600;font-size:18px;background:var(--card); transition:transform .2s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,background-color .2s ease,color .2s ease,box-shadow .2s ease} .chip:hover{transform:translateY(-1px)} .chip:active{transform:scale(.93)} .chip.sm{padding:11px 18px;font-size:16px} .chip[aria-pressed="true"]{border-color:var(--amber);background:var(--chip-bg);color:var(--amber-accent); box-shadow:0 3px 10px rgba(242,179,61,.2);transform:scale(1.03)} .hintlist{color:var(--dim);font-size:15px;margin:22px 0 0;padding-left:20px} .hintlist li{margin:6px 0} .err{color:var(--rose);font-size:15px;font-weight:600;min-height:22px;margin-top:10px} /* tanlash oynasi — pastdan chiquvchi silliq drawer */ .sheet{position:absolute;inset:0;z-index:80;display:flex;flex-direction:column;background:var(--paper); transform:translate3d(0,100%,0);visibility:hidden; transition:transform .35s cubic-bezier(.25,1,.5,1),visibility .35s ease; will-change:transform} .sheet.on{visibility:visible;transform:translate3d(0,0,0)} .sheet-head{display:flex;align-items:center;gap:14px;padding:calc(26px + var(--safe-top)) 22px 12px} .sheet-head h3{font-size:28px;font-weight:800;letter-spacing:-.03em;margin:0} .sheet-head .x{margin-left:auto;font-size:26px;color:var(--dim);line-height:1; transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .15s ease} .sheet-head .x:hover{color:var(--txt);transform:scale(1.15)} .sheet-head .x:active{transform:scale(.85) rotate(90deg)} .searchwrap{position:relative;margin:4px 22px 8px} .searchwrap::before{content:"";position:absolute;left:16px;top:50%; width:13px;height:13px;border:2px solid var(--dim-2);border-radius:50%; transform:translateY(-60%);pointer-events:none} .searchwrap::after{content:"";position:absolute;left:27px;top:50%; width:7px;height:2px;background:var(--dim-2);border-radius:2px; transform:translateY(4px) rotate(45deg);transform-origin:left center;pointer-events:none} .csearch{width:100%;background:var(--card);border:2px solid var(--line); border-radius:16px;padding:13px 16px 13px 44px;font-size:17px;font-weight:600; color:var(--txt);outline:none;transition:border-color .2s ease,box-shadow .2s ease} .csearch:focus{border-color:var(--amber);box-shadow:0 0 0 3.5px rgba(242,179,61,.22)} .clist{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 22px calc(38px + var(--safe-bottom))} .citem{display:flex;align-items:center;gap:14px;width:100%;padding:15px 2px; border-bottom:1px solid var(--line-2);font-size:18px;font-weight:600;text-align:left; transition:transform .18s cubic-bezier(.25,1,.5,1),color .15s ease,background-color .15s ease} .citem:active{transform:scale(.98);background:rgba(var(--ink-rgb),.03)} .citem .fl{width:32px;height:23px} .citem[aria-selected="true"]{color:var(--amber-accent)} .citem[aria-selected="true"]::after{content:"✓";margin-left:auto;font-weight:800} /* koʻrish */ .topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(20px + var(--safe-top)) 20px 10px} .topbar .name{font-weight:800;font-size:22px;letter-spacing:-.03em} .mengamos-tab{border:none;background:var(--soft);color:var(--dim);padding:8px 16px;font-size:13.5px;font-weight:700;border-radius:99px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:background .2s ease,color .2s ease,box-shadow .2s ease} .mengamos-tab.on{background:var(--amber-accent);color:#fff;box-shadow:0 2px 8px rgba(242,179,61,.3)} .browse-tabs{display:flex;gap:8px;align-items:center} .mengamos-bar{position:relative;flex:none;z-index:40;padding:2px 0 6px} .mengamos-chips+.mengamos-chips{padding-top:0} .explore-sep{flex:none;width:1px;height:20px;background:var(--line)} .mengamos-chips{display:flex;gap:7px;align-items:center;padding:4px 20px 8px;overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch} .mengamos-chips::-webkit-scrollbar{display:none} .explore-chip{border:1px solid var(--line);background:var(--card);color:var(--dim);border-radius:99px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .18s ease;display:inline-flex;align-items:center;gap:4px;flex:none;-webkit-tap-highlight-color:transparent} .explore-chip:active{transform:scale(.95)} .explore-chip.on{background:var(--amber-accent);border-color:var(--amber-accent);color:#fff;box-shadow:0 2px 8px rgba(242,179,61,.3)} .counter{color:var(--dim-2);font-size:14px;font-weight:600} .stagewrap{flex:1 1 0;min-height:0;display:flex;flex-direction:column; justify-content:center;padding:4px 22px 0;overflow-y:auto;overscroll-behavior:contain} .card{position:relative;display:flex;flex-direction:column;align-items:center; animation:cardEnter .35s cubic-bezier(.2,.9,.3,1)} .card-report{position:absolute;top:0;right:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--card);border:1px solid var(--line);color:var(--dim);cursor:pointer;z-index:10;transition:all .15s ease} .card-report:active{transform:scale(.92);color:var(--rose,#ef4444)} .overlay-report{position:absolute;top:calc(14px + var(--safe-top));right:16px;z-index:70} @keyframes cardEnter{from{opacity:0;transform:scale(.9) translate3d(0,16px,0)}to{opacity:1;transform:scale(1) translate3d(0,0,0)}} .card.leave{animation:leave .22s ease forwards} .card.leave-like{animation:leaveLike .28s cubic-bezier(.25,1,.5,1) forwards} .card.leave-pass{animation:leavePass .28s cubic-bezier(.25,1,.5,1) forwards} @keyframes leave{to{opacity:0;transform:scale(.94) translateY(-10px)}} @keyframes leaveLike{to{opacity:0;transform:translate3d(120%,0,0) rotate(16deg) scale(.94)}} @keyframes leavePass{to{opacity:0;transform:translate3d(-120%,0,0) rotate(-16deg) scale(.94)}} .who{margin-top:22px;text-align:center} .who h2{font-size:30px;font-weight:800;letter-spacing:-.04em;margin:0;line-height:1.05} .who .meta{color:var(--dim);font-size:17px;margin-top:4px} .who .tags{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px} .tag{background:var(--card);border:1px solid var(--line);border-radius:99px; padding:8px 16px;font-size:15px;color:var(--dim)} .about-txt{color:var(--dim);font-size:16px;margin:12px auto 0;max-width:29ch;line-height:1.45} .likedme svg{width:17px;height:17px} .likedme{display:inline-flex;align-items:center;gap:7px;margin-top:14px;color:var(--rose); font-size:15px;font-weight:700;background:rgba(232,66,95,.09);border-radius:99px;padding:8px 16px} .actions{display:flex;align-items:center;justify-content:center;gap:18px;padding:18px 0 12px} .act{width:68px;height:68px;border-radius:50%;display:grid;place-items:center; background:var(--card);border:1.5px solid var(--line);font-size:28px; box-shadow:0 4px 14px rgba(var(--umber-rgb),.1); transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease,border-color .2s ease,color .2s ease} .act:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 8px 22px rgba(var(--umber-rgb),.16)} .act:active{transform:scale(.88);box-shadow:0 2px 6px rgba(var(--umber-rgb),.08)} .act.video{width:68px;height:68px;color:var(--amber-accent);border-color:var(--amber);background:var(--card); box-shadow:0 4px 14px rgba(var(--umber-rgb),.1)} .act.video:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 8px 22px rgba(242,179,61,.3);border-color:var(--amber)} .act.video:active{transform:scale(.88);box-shadow:0 2px 6px rgba(242,179,61,.15)} .act.love{width:82px;height:82px;background:var(--rose);border-color:var(--rose); color:#fff;box-shadow:0 6px 22px rgba(232,66,95,.36)} .act.love:hover{transform:scale(1.09) translateY(-3px);box-shadow:0 10px 28px rgba(232,66,95,.46)} .act.love:active{transform:scale(.88);box-shadow:0 3px 10px rgba(232,66,95,.2)} #b-pass:hover{color:var(--rose);border-color:rgba(232,66,95,.4);background:rgba(232,66,95,.06)} .act.small{width:56px;height:56px;font-size:21px} .empty{text-align:center;padding:40px 26px;color:var(--dim)} .empty h2{color:var(--txt);font-size:28px;font-weight:800;margin:0 0 10px;letter-spacing:-.03em} nav{display:flex;border-top:1px solid var(--line);background:rgba(var(--paper-rgb),.92); backdrop-filter:blur(10px);padding:12px 14px calc(18px + var(--safe-bottom))} nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0; color:var(--dim-2);font-size:12.5px;font-weight:600;position:relative;transition:color .2s ease} nav button:active{transform:scale(.94)} nav button .ic{display:block;line-height:0} nav button .ic svg{width:24px;height:24px} nav button.on{color:var(--amber-accent)} nav button .dot{position:absolute;top:2px;left:calc(50% + 13px);width:9px;height:9px; border-radius:50%;background:var(--rose)} .page{flex:1 1 0;min-height:0;height:0;overflow-y:auto;overscroll-behavior:contain; padding:calc(26px + var(--safe-top)) 24px calc(36px + var(--safe-bottom))} .page h2.title{font-size:32px;font-weight:800;letter-spacing:-.04em;margin:0 0 6px} .page .sub{color:var(--dim);font-size:16px;margin:0 0 24px} .seg{display:flex;background:var(--soft);border-radius:99px;padding:4px;margin-bottom:18px;position:relative} .seg button{flex:1;padding:10px 4px;border-radius:99px;font-size:14px;font-weight:600; color:var(--dim-2);position:relative;z-index:2;transition:color .25s ease,transform .15s ease} .seg button:active{transform:scale(.96)} .seg button.on{color:var(--txt);font-weight:700} .seg-pill{position:absolute;top:4px;bottom:4px;width:calc(50% - 4px);border-radius:99px; background:var(--card);box-shadow:0 2px 6px rgba(var(--umber-rgb),.12); transition:transform .3s cubic-bezier(.25,1,.5,1);z-index:1} .seg[data-tab="0"] .seg-pill{transform:translate3d(0,0,0)} .seg[data-tab="1"] .seg-pill{transform:translate3d(100%,0,0)} .seg-content{animation:segFadeIn .28s cubic-bezier(.25,1,.5,1)} @keyframes segFadeIn{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .seg .n{font-size:12px;opacity:.65;margin-left:3px} .mini{display:flex;gap:8px;flex:none} .mini button{width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line); background:var(--card);font-size:17px;color:var(--dim);display:grid;place-items:center; transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,border-color .18s ease} .mini button:hover{transform:scale(1.12);box-shadow:0 3px 10px rgba(var(--umber-rgb),.12)} .mini button:active{transform:scale(.88)} .mini button svg{width:19px;height:19px} .hand{transform-origin:60% 88%;animation:wave 2s ease-in-out infinite} @keyframes wave{0%,60%,100%{transform:rotate(0deg)}12%{transform:rotate(-16deg)} 24%{transform:rotate(16deg)}36%{transform:rotate(-12deg)}48%{transform:rotate(10deg)}} .halo2{position:relative} .halo2::after{content:"";position:absolute;inset:-6px;border-radius:50%; border:2px solid currentColor;animation:halo2 2s ease-out infinite;pointer-events:none} .mini button.love{color:#fff} .mini button.love.halo2::after{border-color:var(--rose)} .mini button.sent.halo2::after{border-color:var(--green)} @keyframes halo2{0%,100%{opacity:.22;transform:scale(.92)}50%{opacity:.8;transform:scale(1.14)}} .mini button.love{background:var(--rose);border-color:var(--rose);color:#fff} .mini button.sent{background:var(--green);border-color:var(--green);color:#fff} .bdg{font-size:12px;font-weight:700;border-radius:99px;padding:4px 10px;flex:none} .bdg.m{display:inline-flex;align-items:center;gap:5px;background:var(--green);color:#fff; box-shadow:0 2px 6px rgba(47,169,127,.32)} .bdg.m svg{width:11px;height:11px} .bdg.w{background:var(--soft);color:var(--dim-2)} .bdg.x{background:rgba(232,66,95,.12);color:var(--rose)} .seg .nw{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px; border-radius:99px;background:var(--rose);color:#fff;font-size:11.5px;font-weight:800; margin-left:5px;vertical-align:1px} .msgprev{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .msgprev .q{color:var(--rose);font-weight:800;flex:none} .switch2{display:flex;gap:6px;background:var(--soft);border-radius:99px;padding:3px; margin:22px auto 0;width:fit-content} .switch2{width:100%;max-width:300px} .switch2 button{flex:1;padding:9px 8px;border-radius:99px;font-size:13.5px;font-weight:600; color:var(--dim-2);white-space:nowrap;transition:transform .15s ease,color .2s ease,background-color .2s ease} .switch2 button:active{transform:scale(.96)} .switch2 button.on{background:var(--card);color:var(--txt);font-weight:700; box-shadow:0 1px 4px rgba(var(--umber-rgb),.12)} .row{display:flex;align-items:center;gap:14px;background:var(--card); border:1px solid var(--line);border-radius:18px;padding:12px 14px;margin-bottom:9px; transition:transform .2s cubic-bezier(.25,1,.5,1),box-shadow .2s ease,border-color .2s ease; animation:rowEnter .3s cubic-bezier(.2,.9,.3,1) backwards} @keyframes rowEnter{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}} .row:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(var(--umber-rgb),.07)} .row .rname{font-weight:700;font-size:19px;letter-spacing:-.02em} .row .rmeta{color:var(--dim);font-size:15px} .row .grow{flex:1;min-width:0} .pill{background:var(--amber);color:#2A1B00;font-weight:700;font-size:15px;padding:11px 20px; border-radius:99px;box-shadow:0 2px 0 var(--amber-d),0 3px 8px rgba(var(--umber-rgb),.1); transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .18s ease,filter .18s ease} .pill:hover{filter:brightness(1.04);transform:translateY(-1px) scale(1.02); box-shadow:0 3px 0 var(--amber-d),0 6px 14px rgba(var(--umber-rgb),.15)} .pill:active{transform:translateY(2px) scale(.96);box-shadow:0 0 0 var(--amber-d)} .me-head{display:flex;flex-direction:column;align-items:center;padding:8px 0 22px} .me-head h2{font-size:32px;font-weight:800;letter-spacing:-.04em;margin:22px 0 2px} .me-head .meta{color:var(--dim);font-size:18px} .dl{border-top:1px solid var(--line-2)} .dl .item{display:flex;justify-content:space-between;gap:16px;padding:16px 0; border-bottom:1px solid var(--line-2);align-items:center} .dl .k{color:var(--dim);font-size:16px;flex:none} .dl .v{font-weight:700;text-align:right;overflow-wrap:anywhere;font-size:17px} .dl .v.edit{color:var(--amber-accent);cursor:pointer} .vids{display:flex;gap:10px;justify-content:center;margin:4px 0 2px} .vids>div{position:relative;text-align:center;flex:1;min-width:0;max-width:106px; transition:transform .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer} .vids>div:active{transform:scale(.95)} .vnwrap.xs2{--vn:92px;cursor:pointer;margin:0 auto} .vids .pick-on .vn{box-shadow:0 0 0 3px var(--green)} .tick{position:absolute;right:0;bottom:30px;width:26px;height:26px;border-radius:50%; background:var(--green);color:#fff;display:grid;place-items:center;z-index:3; border:2px solid var(--paper);box-shadow:0 2px 8px rgba(47,169,127,.35); animation:tickPop .35s cubic-bezier(.34,1.56,.64,1) forwards} @keyframes tickPop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}} .tick svg{width:13px;height:13px} .vids .cap2{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--dim-2)} .editdot{position:absolute;top:0;right:0;width:28px;height:28px;border-radius:50%; background:var(--card);border:1px solid var(--line);display:grid;place-items:center; box-shadow:0 2px 8px rgba(var(--umber-rgb),.12);z-index:3; transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s ease} .editdot:hover{transform:scale(1.12);box-shadow:0 3px 12px rgba(var(--umber-rgb),.18)} .editdot:active{transform:scale(.9)} .editdot .pen{width:14px;height:14px;opacity:.7} .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;align-items:start} .mcell{position:relative;background:var(--soft);border-radius:16px;padding:10px 14px;min-width:0; transition:transform .2s cubic-bezier(.25,1,.5,1),background-color .2s ease,box-shadow .2s ease;cursor:pointer} .mcell:hover{background:var(--line-2)} .mcell.dd{z-index:20;border-radius:16px 16px 0 0} .mcell.wide.dd{border-radius:16px} .ddown{position:absolute;left:0;right:0;top:100%;background:var(--soft); border-radius:0 0 16px 16px;padding:0 14px 10px;z-index:20; box-shadow:0 16px 32px rgba(var(--umber-rgb),.18); animation:ddownIn .25s cubic-bezier(.2,.9,.3,1) forwards;transform-origin:top center} @keyframes ddownIn{from{opacity:0;transform:scaleY(.9) translateY(-6px)}to{opacity:1;transform:scaleY(1) translateY(0)}} .mcell.wide.dd .ddown{position:static;left:auto;right:auto;top:auto;background:transparent; box-shadow:none;padding:12px 0 2px;border-radius:0;animation:none} .ddown .rlist.plain{margin:0;max-height:230px} .mcell.wide.dd .ddown .rlist.plain{max-height:220px} #mepage{padding-bottom:calc(110px + var(--safe-bottom))} .mcell-head{min-width:0} .mtext{width:100%;border:0;border-bottom:2px solid var(--amber);background:transparent; font:inherit;font-size:17px;font-weight:600;letter-spacing:-.02em;color:var(--txt); line-height:1.45;padding:2px 0 6px;margin-top:2px;outline:none;resize:none; font-family:inherit;min-height:64px;box-shadow:none;-webkit-appearance:none;appearance:none; -webkit-tap-highlight-color:transparent;overflow-y:auto} .mtext:focus,.mtext:focus-visible{outline:none!important;box-shadow:none!important;border:0!important;border-bottom:2px solid var(--amber)!important} .mcell.wide,.mcell.open{grid-column:1/-1} .mcell.open{background:var(--card);box-shadow:0 4px 16px rgba(var(--umber-rgb),.1)} .mcell .ck{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600; color:var(--dim-2);line-height:1.3} .mcell .ck .pen{width:13px;height:13px;margin-left:auto} .gopt{font-size:17.5px;font-weight:700;letter-spacing:-.02em;color:var(--ph);padding:0} .gopt.on{color:var(--txt)} .gdot{display:inline-block;width:4px;height:4px;border-radius:50%; background:rgba(var(--ink-rgb),.2);margin:0 9px;vertical-align:3px} .csearch2{width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:12px; padding:9px 12px;font:inherit;font-size:15px;font-weight:600;color:var(--txt); outline:none;margin-top:8px} .tagok{display:flex;justify-content:flex-end;margin-top:10px} .mcell .cv{font-size:17.5px;font-weight:700;letter-spacing:-.02em;margin-top:1px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .mcell.open .cv{white-space:normal} .mrow{border-bottom:1px solid var(--line-2);padding:13px 0} .mrow .top{display:flex;align-items:center;gap:12px} .mrow .lbl{color:var(--dim);font-size:15px} .mrow .val{margin-left:auto;font-weight:700;font-size:16px;text-align:right; overflow-wrap:anywhere} .mrow .val.acc{color:var(--amber-accent)} .minp{flex:1;min-width:0;border:0;border-bottom:2px solid var(--amber);background:transparent; font:inherit;font-size:17.5px;font-weight:700;letter-spacing:-.02em;color:var(--txt); padding:0 0 2px;font-family:inherit;resize:none} .minp:focus,.minp:focus-visible{outline:none;box-shadow:none} .pen{width:16px;height:16px;flex:none;color:var(--dim-2);opacity:.6} .mchips{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px} .mchip{padding:9px 15px;border-radius:99px;border:1.5px solid var(--line);background:var(--card); font-size:15px;font-weight:600;color:var(--dim); transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s ease,background-color .2s ease,color .2s ease} .mchip:active{transform:scale(.93)} .mchip[aria-pressed="true"]{border-color:var(--amber);background:var(--chip-bg);color:var(--amber-accent);transform:scale(1.03)} .sw{display:inline-block;width:48px;height:28px;border-radius:99px; background:var(--line);position:relative;flex:none;vertical-align:middle; transition:background-color .25s cubic-bezier(.25,1,.5,1);cursor:pointer} .sw[aria-pressed="true"]{background:var(--green)} .sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%; background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18); transition:transform .28s cubic-bezier(.34,1.56,.64,1)} .sw[aria-pressed="true"]::after{transform:translateX(20px)} .vis{display:flex;align-items:center;gap:12px;border-radius:16px;padding:13px 15px; margin-top:18px;background:var(--vis-on-bg); transition:background .25s ease,transform .2s cubic-bezier(.34,1.56,.64,1);cursor:pointer} .vis:active{transform:scale(.98)} .vis.off{background:var(--soft)} .vis .ic{width:36px;height:36px;border-radius:50%;background:var(--green);color:#fff; display:grid;place-items:center;flex:none} .vis.off .ic{background:var(--dim-2)} .vis .ic svg{width:17px;height:17px} .vis .tx{flex:1;min-width:0} .vis .t1{font-size:15.5px;font-weight:700;letter-spacing:-.01em} .vis .t2{font-size:13px;color:var(--dim)} .note{color:var(--dim-2);font-size:13.5px;line-height:1.5;margin-top:22px} .overlay{position:absolute;inset:0;background:rgba(var(--paper-rgb),.96);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);display:grid;place-items:safe center;overflow-y:auto;overscroll-behavior:contain; z-index:60;padding:calc(38px + var(--safe-top)) 30px calc(46px + var(--safe-bottom)); text-align:center;opacity:0;visibility:hidden;transform:scale(1.02); transition:opacity .28s ease,transform .28s cubic-bezier(.25,1,.5,1),visibility .28s ease} .overlay.on{opacity:1;visibility:visible;transform:scale(1)} .overlay.on > div{animation:overlayContentIn .38s cubic-bezier(.2,.9,.3,1) forwards} @keyframes overlayContentIn{from{opacity:0;transform:scale(.92) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}} .match-circles{display:flex;justify-content:center;align-items:center;height:170px;position:relative;width:100%} .match-circles .vnwrap{--vn:140px;position:absolute;left:50%;top:50%;margin:0} .match-circles .a{animation:slideA .7s cubic-bezier(.3,1.4,.5,1) forwards} .match-circles .b{animation:slideB .7s cubic-bezier(.3,1.4,.5,1) forwards} .match-circles .single{animation:slideSingle .7s cubic-bezier(.3,1.4,.5,1) forwards} @keyframes slideA{from{transform:translate(-50%,-50%) translateX(-150px);opacity:0}to{transform:translate(-50%,-50%) translateX(-50px);opacity:1}} @keyframes slideB{from{transform:translate(-50%,-50%) translateX(150px);opacity:0}to{transform:translate(-50%,-50%) translateX(50px);opacity:1}} @keyframes slideSingle{from{transform:translate(-50%,-50%) scale(.7);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .match-heart{position:absolute;left:50%;top:50%;z-index:5;color:var(--rose);opacity:0;width:46px;height:46px; animation:pop .5s cubic-bezier(.2,1.6,.4,1) .55s forwards} @keyframes pop{from{transform:translate(-50%,-50%) scale(0)}to{transform:translate(-50%,-50%) scale(1);opacity:1}} .overlay h2{font-size:38px;font-weight:800;letter-spacing:-.04em;margin:28px 0 8px} .overlay p{color:var(--dim);margin:0 0 30px;max-width:26ch;font-size:17px} .bioclip{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;cursor:pointer} .biomodal{position:absolute;inset:0;display:grid;place-items:safe center;overflow-y:auto; overscroll-behavior:contain;padding:calc(28px + var(--safe-top)) 24px calc(32px + var(--safe-bottom));z-index:75; background:rgba(28,23,48,.38);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease} .biomodal.on{opacity:1;visibility:visible} .biobox{background:var(--card);border-radius:24px;padding:22px 20px 18px;width:100%; max-width:320px;text-align:left;box-shadow:0 20px 50px rgba(28,23,48,.28); transform:scale(.88) translateY(18px);transition:transform .3s cubic-bezier(.34,1.4,.64,1)} .biomodal.on .biobox{transform:scale(1) translateY(0)} .biobox .bt2{font-size:12.5px;font-weight:700;color:var(--dim-2);margin-bottom:8px} .biobox .bx{font-size:16.5px;line-height:1.5;color:var(--txt);max-height:46vh;overflow-y:auto} .biobox .bc{margin-top:18px;width:100%;padding:13px;border-radius:15px;background:var(--soft); font-weight:700;font-size:15px;color:var(--dim);transition:transform .16s ease,background-color .16s ease} .biobox .bc:active{transform:scale(.96);background:var(--sel-bg)} .toast{position:absolute;left:50%;bottom:calc(112px + var(--safe-bottom));transform:translate3d(-50%,20px,0) scale(.92); background:var(--txt);color:var(--paper);border-radius:18px;padding:14px 22px; font-size:15.5px;font-weight:600;opacity:0;pointer-events:none; transition:opacity .28s cubic-bezier(.25,1,.5,1),transform .28s cubic-bezier(.34,1.56,.64,1); z-index:95;max-width:88vw;text-align:center;box-shadow:0 8px 24px rgba(var(--umber-rgb),.24)} .toast.on{opacity:1;transform:translate3d(-50%,0,0) scale(1)} @media (max-width:400px){:root{--vn:270px}} @media (max-height:740px){ :root{--vn:230px} .who{margin-top:14px} .who h2{font-size:26px} .actions{padding:14px 0 8px;gap:14px} .act{width:58px;height:58px;font-size:24px} .act.video{width:58px;height:58px} .act.love{width:70px;height:70px} } @media (max-height:650px){ :root{--vn:190px} .who{margin-top:8px} .who h2{font-size:22px} .who .meta{font-size:14px} .about-txt{margin-top:4px;font-size:13px} .actions{padding:10px 0 6px;gap:10px} .act{width:50px;height:50px;font-size:20px} .act.video{width:50px;height:50px} .act.love{width:60px;height:60px} } @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} :focus-visible{outline:2px solid var(--amber-accent);outline-offset:3px;border-radius:6px} .field:focus,.field:focus-visible{outline:none}