:root{--canvas:#000;--surface:#f7f7f7;--ink:#252525;--muted:#656565;--line:#bebebe;--primary:#f7a20c;--gold:#f5d338;--cyan:#30c8f3;--mint:#02cda3;--night:#252536;--home-card:#262626;--light:#fff;--notice:#ffff00;--error:#bc2339;--field:#f7f8fa;--flag:#dff3ec;--shadow:0 2px 4px #0003}*{box-sizing:border-box}body{margin:0;background:var(--canvas);font-family:Arial,sans-serif;letter-spacing:0;color:var(--ink)}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;border:0;border-radius:4px}a{color:var(--primary)}.auth{max-width:350px;margin:20px auto;background:var(--surface);padding:44px 25px 30px;border-radius:4px;text-align:center}.logo{width:86px;height:92px;object-fit:contain;margin-bottom:20px}.tagline{font-weight:700;font-size:14px;margin:10px 0 15px}h1{font-size:34px;font-weight:400;margin:12px 0 24px}.flag{background:var(--flag);border:1px solid var(--line);border-radius:15px;display:flex;align-items:center;gap:10px;text-align:left;padding:12px;font-weight:700}.flag img{width:27px}.games{display:flex;justify-content:center;gap:8px;margin:26px 0 38px}.games img{width:40px;height:40px;object-fit:cover;border-radius:50%;box-shadow:var(--shadow)}.disclaimer{font-size:12px;margin:0 0 30px}.independent{font-size:12px;color:var(--muted);line-height:1.5;margin:20px 0 0}form{display:grid;gap:24px}input,select{width:100%;height:56px;border:1px solid var(--line);background:var(--field);border-radius:4px;padding:13px;color:var(--ink)}.primary{height:38px;color:var(--light);background:linear-gradient(100deg,var(--gold),var(--primary));box-shadow:var(--shadow);font-size:14px}.terms{display:flex;gap:8px;align-items:center;text-align:left;font-size:12px;color:var(--muted)}.terms input{width:18px;height:18px}.error{color:var(--error);font-size:13px;min-height:18px;line-height:1.4}.switch{margin-top:26px;font-size:14px}.switch a{display:block;margin:15px;font-weight:700}.sub{color:var(--mint);font-style:italic;font-size:14px}.home{width:min(360px,calc(100% - 32px));margin:16px auto;color:var(--light);font-size:14px}.top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}.identity{display:flex;align-items:center;gap:7px;min-width:0;color:var(--cyan);font-weight:700}.avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}.identity span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:8px;flex:none}.coin{border:1px solid var(--error);border-radius:20px;display:flex;align-items:center;gap:4px;padding:2px 6px;font-size:12px}.coin img{width:23px;height:23px}.exit{background:var(--cyan);color:var(--light);padding:7px;font-size:12px}.tools{display:grid;grid-template-columns:1fr 48px 1fr;gap:8px}.tools button,.tile{background:var(--home-card);color:var(--light);min-height:45px;font-weight:700}.tools button img{width:40px;height:40px;object-fit:contain}.pills{display:flex;margin:16px auto;justify-content:center}.pills button{background:var(--night);color:var(--cyan);padding:13px 20px;border:1px solid var(--line);border-radius:0}.pills button:first-child{border-radius:22px 0 0 22px;color:var(--mint)}.pills button:last-child{border-radius:0 22px 22px 0}.notice{border:2px solid var(--notice);background:var(--night);border-radius:9px;display:flex;align-items:center;gap:12px;padding:13px 10px;margin:15px 0}.notice span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tile{height:80px;display:grid;place-items:center}.tile img{width:64px;height:64px;object-fit:cover;border-radius:8px}.social{margin-top:20px;background:var(--night);padding:21px;display:flex;gap:18px;justify-content:center}.social img{width:30px;height:30px}.social button{background:transparent;padding:0}.account{margin-top:26px;border-top:1px solid var(--home-card);padding-top:16px;color:var(--muted);font-size:12px;text-align:center;line-height:1.5}dialog{background:var(--surface);color:var(--ink);border:0;border-radius:8px;width:min(360px,calc(100% - 32px));padding:32px 22px}dialog::backdrop{background:var(--canvas);opacity:.72}dialog h2{font-size:22px;margin:0 0 24px}#close-modal{position:absolute;right:9px;top:7px;background:transparent;font-size:25px;color:var(--ink)}.avatar-options{display:flex;flex-wrap:wrap;gap:8px}.avatar-options button{padding:3px;border:2px solid transparent;background:var(--field)}.avatar-options button[aria-pressed=true]{border-color:var(--primary)}.avatar-options img{width:38px;height:38px;border-radius:50%}.wallet-value{font-size:36px;color:var(--primary);margin:18px 0}.note{color:var(--muted);font-size:13px;line-height:1.5}button:disabled{opacity:.6;cursor:wait}@media(max-width:360px){.auth{margin:12px;width:calc(100% - 24px);padding:32px 20px}.home{width:calc(100% - 24px)}h1{font-size:30px}.tiles{gap:8px}.pills button{padding:13px 14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

:root{--store-start:#1e1e2f;--store-end:#2a2a4a;--store-gold:#ffd700;--store-cyan:#40c4ff;--store-muted:#bbb;--store-blue-fill:#40c4ff1a;--store-blue-border:#40c4ff4d;--store-gold-fill:#ffd7001a;--store-gold-border:#ffd7004d;--store-item-blue:#40c4ff33;--store-item-gold:#ffd70033;--store-item-green:#00ff0033;--store-green-border:#00ff0080;--store-item-shadow:0 4px 10px #0006;--store-page-shadow:0 6px 16px #0008;--store-red:#ff1744;--store-pink:#d81b60;--store-orange:#f90;--google-blue:#4285f4}
.identity[role=button]{cursor:pointer}.identity:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}.store-page{width:min(350px,calc(100% - 40px));margin:20px auto;padding:20px;color:var(--light);background:linear-gradient(135deg,var(--store-start),var(--store-end));border-radius:12px;box-shadow:var(--store-page-shadow);font-family:Arial,sans-serif;line-height:1.5;text-align:center}.store-page h1{color:var(--store-gold);font-size:34px;line-height:42px;font-weight:400;margin:0}.store-info{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:24px}.store-balance{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px;padding:5px 10px;background:var(--store-blue-fill);border:1px solid var(--store-blue-border);border-radius:8px;font-size:14px;font-weight:600;max-width:100%}.store-page strong{color:var(--store-cyan);overflow-wrap:anywhere}.store-balance img{width:26px;height:24px;object-fit:contain}.store-balance button{margin-left:8px;padding:4px 10px;background:linear-gradient(135deg,var(--store-gold),var(--store-orange));color:var(--ink);border-radius:8px;font-size:13px;font-weight:600}.store-user-info{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.store-user-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:100%}.store-user-info p{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:100%;padding:4px 8px;margin:0;background:var(--store-gold-fill);border:1px solid var(--store-gold-border);border-radius:6px;font-size:12px;color:var(--store-muted)}.store-items{display:flex;flex-direction:column;gap:12px}.store-page h2{font-size:20px;font-weight:500;color:var(--store-gold);line-height:32px;margin:0}.store-page .store-connect-title{color:var(--light);margin-top:16px}.store-item,.store-verification-item{display:block;width:100%;padding:8px;border:1px solid var(--store-gold-border);border-radius:10px;background:linear-gradient(90deg,var(--store-item-blue),var(--store-item-gold));box-shadow:var(--store-item-shadow);text-align:left;color:var(--store-cyan)}.store-item-link{display:flex;gap:8px;align-items:center;font-size:14px;font-weight:600;line-height:21px}.store-item-icon{width:18px;flex:none;display:flex;justify-content:center}.store-item-icon img{width:22px;height:22px}.store-item-name{flex:1;min-width:0;overflow-wrap:anywhere;text-align:center}.store-item-description{display:block;color:var(--store-muted);font-size:11px;font-weight:400;line-height:16.5px;margin:6px 0 0;text-align:center}.store-verification-item{background:linear-gradient(90deg,var(--store-item-blue),var(--store-item-green));border-color:var(--store-green-border)}.google-connect{display:flex;align-items:center;gap:10px;margin-top:16px;height:40px;padding:0 12px;background:var(--light);color:var(--ink);border:1px solid var(--line);font-size:14px;font-weight:500;max-width:100%}.google-mark{color:var(--google-blue);font-size:21px;font-weight:700}.apple-connect{margin-top:16px;width:100%;height:38px;background:var(--canvas);color:var(--light);font-size:14px}.store-page hr{width:100%;border:0;border-top:1px solid var(--line);margin:16px 0}.store-back{display:block;width:120px;min-height:37px;margin:24px auto 0;padding:6px 16px;background:linear-gradient(135deg,var(--store-red),var(--store-pink));color:var(--light);font-size:14px;font-weight:500}.store-item:hover{border-color:var(--store-cyan)}


:root{--balance-bg:#292838;--balance-field:#34334d;--balance-line:#444368;--balance-blue:#008cff;--balance-green:#00d000;--balance-muted:#b8b8c1}
.coin{color:var(--light);background:transparent}.tiles{margin-top:20px}.balance-page{width:min(350px,calc(100% - 40px));margin:40px auto;padding:24px 25px;background:linear-gradient(135deg,var(--store-start),var(--store-end));border-radius:16px;color:var(--light);font-size:14px;line-height:1.5}.balance-page h1{margin:0 0 28px;font-size:24px;font-weight:700;text-align:center;line-height:1.5}.balance-tabs{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:24px}.balance-tabs button{background:var(--balance-field);color:var(--light);padding:7px 14px}.balance-coin{display:flex;gap:6px;align-items:center;background:var(--balance-blue);border-radius:24px;padding:10px 14px;box-shadow:0 0 0 5px var(--store-blue-fill)}.balance-coin img{width:22px;height:22px}.balance-page form{display:flex;flex-direction:column;gap:12px;background:var(--balance-bg);padding:18px;border-radius:4px}.balance-id{display:flex;align-items:center;gap:12px;margin-bottom:6px}.balance-id label{flex:1;white-space:nowrap}.balance-id input{width:120px;height:40px;border:1px solid var(--balance-line);border-radius:8px}.balance-page input,.balance-page select{background:var(--balance-field);color:var(--light);font-size:14px;padding:10px}.balance-page select{height:40px;border:1px solid var(--store-gold);border-radius:8px}.balance-page label{font-size:16px;color:var(--balance-muted)}.balance-help{color:var(--balance-muted);font-size:14px;line-height:1.5;margin:10px 0}.balance-recipient{color:var(--balance-green);font-size:14px;overflow-wrap:anywhere;margin:6px 0}.balance-notice{margin:8px 0 2px;border:1px solid var(--balance-line);border-radius:10px;padding:10px;font-size:13px;text-align:center;background:var(--balance-field)}.balance-bonus{color:var(--primary);border:1px solid var(--store-gold-border);border-radius:8px;background:var(--store-gold-fill);padding:8px;margin-top:8px}.balance-limitation{font-size:12px;line-height:1.5;color:var(--balance-muted);margin:12px 0 0}.balance-confirm{width:100%;padding:10px;background:var(--store-gold);color:var(--ink);font-weight:600}.balance-back{display:block;margin:24px auto 0;width:110px;padding:10px;background:var(--store-red);color:var(--light)}.balance-history{font-size:14px;line-height:1.6}.balance-history p{margin:20px 0}#balance-selection{overflow-wrap:anywhere}

/* White homepage variant: original layout and artwork retained. */
body:has(.home),body:has(.auth){background:var(--light)}.home{color:var(--ink)}.home .identity{color:var(--google-blue)}.home .coin{color:var(--ink);border-color:var(--line)}.home .tools button,.home .tile{background:var(--surface);color:var(--ink);border:1px solid var(--line)}.home .social{background:var(--surface);border:1px solid var(--line)}.home .account{border-color:var(--line)}
/* White profile-store and balance-increase pages */
.store-page,.balance-page{background:#fff;color:var(--ink);box-shadow:0 2px 8px #00000014;border:1px solid var(--line)}
.store-page h1,.store-page h2{color:var(--ink)}
.store-page .store-connect-title{color:var(--ink)}
.store-page strong{color:#0b8ecb}
.store-balance{background:#f0f7ff;border-color:#bfe0f5}
.store-user-info p{color:var(--muted);background:#f7f8fa;border-color:var(--line)}
.store-item,.store-verification-item{background:#f7f9fb;border-color:var(--line);box-shadow:0 1px 3px #0000000d;color:var(--ink)}
.store-verification-item{background:#f6fbf7;border-color:#bfe3c6}
.store-item-description{color:var(--muted)}
.store-page hr{border-top-color:#e5e5e5}
.balance-page form{background:#f7f8fa}
.balance-page input,.balance-page select{background:#fff;color:var(--ink);border-color:var(--line)}
.balance-page label{color:var(--muted)}
.balance-help{color:var(--muted)}
.balance-recipient{color:#0a8a00}
.balance-notice{background:#f7f8fa;border-color:var(--line)}
.balance-limitation{color:var(--muted)}
.balance-tabs button{background:#f7f8fa;color:var(--ink);border:1px solid var(--line)}
.balance-coin{box-shadow:0 0 0 5px #eaf6ff}

/* Gamolla ID login: white phone-style screen (presentation only; local auth unchanged). */
.auth.vkid{max-width:430px;margin:0 auto;background:#fff;padding:64px 24px 40px;border-radius:0;min-height:100vh}
.auth.vkid .brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:40px}
.auth.vkid .brand-mark{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#ff7a00;color:#fff;font-size:25px;font-weight:700}
.auth.vkid .brand-mark.id{background:#0077ff;font-size:16px;letter-spacing:.5px}
.auth.vkid .brand-name{font-size:27px;font-weight:700;color:#000}
.auth.vkid .brand-x{color:#9a9a9e;font-size:20px}
.auth.vkid h1{font-size:26px;font-weight:500;color:#000;margin:0 0 30px}
.auth.vkid form{gap:14px}
.auth.vkid .phone-field{display:flex;align-items:center;gap:12px;border:1px solid #d9d9de;border-radius:14px;height:58px;padding:0 16px;background:#fff}
.auth.vkid .phone-field:focus-within{border-color:#ff7a00;box-shadow:0 0 0 3px #ff7a0022}
.auth.vkid .phone-flag{display:grid;place-items:center;flex:none}
.auth.vkid .phone-flag img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block}
.auth.vkid .phone-field input{border:0;background:transparent;height:100%;padding:0;font-size:17px}
.auth.vkid .phone-field input:focus{outline:0}
.auth.vkid input,.auth.vkid select{height:58px;border:1px solid #d9d9de;border-radius:14px;background:#fff;padding:0 16px;font-size:17px;color:#000}
.auth.vkid input:focus,.auth.vkid select:focus{outline:0;border-color:#ff7a00;box-shadow:0 0 0 3px #ff7a0022}
.auth.vkid .primary{height:58px;border-radius:14px;background:#ff7a00;color:#fff;font-size:18px;font-weight:600;box-shadow:none;margin-top:6px}
.auth.vkid .primary:hover{background:#f06f00}
.auth.vkid .primary:focus-visible{outline:3px solid #ff7a0055;outline-offset:2px}
.auth.vkid .license{font-size:14px;color:#8a8a8e;line-height:1.5;margin:20px 0 0}
.auth.vkid .license a{color:#ff7a00;text-decoration:none}
.auth.vkid .more{margin:16px 0 0}
.auth.vkid .more a{color:#8a8a8e;font-size:15px;text-decoration:none}
.auth.vkid .more a:hover{text-decoration:underline}
.auth.vkid .switch{margin-top:24px;font-size:14px;color:#8a8a8e}
.auth.vkid .switch a{display:inline;margin-left:6px;color:#ff7a00;font-weight:600}
.auth.vkid .terms{font-size:13px}
.auth.vkid .independent{margin-top:30px}
@media(max-width:360px){.auth.vkid{padding:48px 16px 32px}}

.auth.vkid .cc-pick{position:relative;flex:none;display:flex;align-items:center;gap:4px;font-size:17px;font-weight:600;padding-right:10px;border-right:1px solid #e3e3e8;height:60%}
.auth.vkid .cc-pick::after{content:'▾';font-size:12px;color:#888}
.auth.vkid .cc-pick select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;font-size:16px}
.auth.vkid .cc-show{white-space:nowrap}

.auth.vkid{position:relative}
.auth.vkid .lang-pick{position:absolute;top:12px;right:12px;display:flex;align-items:center;gap:4px;padding:6px 12px;border:1px solid #e3e3e8;border-radius:20px;background:#fff;font-size:14px;font-weight:600;white-space:nowrap;z-index:2}
.auth.vkid[dir=rtl] .lang-pick{right:auto;left:12px}
.auth.vkid .lang-pick select{position:absolute;inset:0;opacity:0;width:100%;cursor:pointer;font-size:16px}
/* premium brand animation v2 */
.auth.vkid .brand{display:flex;align-items:center;justify-content:center;gap:12px;height:52px;margin-bottom:40px;perspective:700px;animation:vfFloat 5s cubic-bezier(.45,0,.55,1) 1.2s infinite;will-change:transform}
.auth.vkid .brand>*{flex:none;align-self:center}
.auth.vkid .brand-mark{position:relative;overflow:hidden;width:46px;height:46px;border-radius:14px;animation:vfIn 1.1s cubic-bezier(.16,1,.3,1) both;box-shadow:0 10px 24px -8px #ff7a00aa,inset 0 1px 0 #ffffff55}
.auth.vkid .brand-mark.id{background:linear-gradient(145deg,#2b8cff,#0059d6);animation:vfInR 1.1s cubic-bezier(.16,1,.3,1) .12s both,vfPing 3.2s cubic-bezier(.22,1,.36,1) 1.9s infinite;box-shadow:0 10px 24px -8px #0066ffaa,inset 0 1px 0 #ffffff55}
.auth.vkid .idsvg{width:100%;height:100%;display:block}
.auth.vkid .idsvg .ring{transform-origin:24px 24px;animation:vfRing 3.2s cubic-bezier(.65,0,.35,1) 1.9s infinite}
.auth.vkid .brand-mark::after{content:'';position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 42%,#ffffffaa 50%,transparent 58%);transform:translateX(-110%);animation:vfShine 3.2s cubic-bezier(.65,0,.35,1) 1.3s infinite;pointer-events:none}
.auth.vkid .brand-mark.id::after{animation-delay:2.3s}
.auth.vkid .brand-name{font-size:27px;line-height:46px;height:46px;font-weight:800;letter-spacing:-.3px;background:linear-gradient(90deg,#111 0,#111 40%,#ff7a00 50%,#111 60%,#111 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vfFade 1s cubic-bezier(.16,1,.3,1) .25s both,vfText 3.2s ease-in-out 1.3s infinite}
.auth.vkid .brand-x{position:relative;width:40px;height:46px;display:grid;place-items:center;color:#a0a0a6;font-size:20px;line-height:1}
.auth.vkid .brand-x b{font-weight:400;display:block;animation:vfSpin 3.2s cubic-bezier(.65,0,.35,1) 1.3s infinite}
.auth.vkid .brand-x .beam{position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle,#fff 0,#ffc285 45%,#ff7a00 75%);box-shadow:0 0 14px 4px #ff7a0099;opacity:0;animation:vfBeam 3.2s cubic-bezier(.65,0,.35,1) 1.3s infinite;will-change:transform,opacity}
.auth.vkid .brand-x .beam.b2{animation-delay:1.45s;width:5px;height:5px;margin-top:-2.5px}
@keyframes vfIn{from{opacity:0;transform:translateX(-30px) rotateY(-60deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes vfInR{from{opacity:0;transform:translateX(30px) rotateY(60deg) scale(.7)}to{opacity:1;transform:none}}
@keyframes vfFade{from{opacity:0;filter:blur(6px);letter-spacing:4px}to{opacity:1;filter:none;letter-spacing:-.3px}}
@keyframes vfFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes vfShine{0%,50%{transform:translateX(-110%)}85%,100%{transform:translateX(110%)}}
@keyframes vfText{0%,30%{background-position:100% 0}70%,100%{background-position:0 0}}
@keyframes vfBeam{0%{opacity:0;transform:translateX(-8px) scale(.4)}20%{opacity:1;transform:translateX(4px) scale(1)}60%{opacity:1;transform:translateX(30px) scale(1)}80%,100%{opacity:0;transform:translateX(44px) scale(.3)}}
@keyframes vfSpin{0%,35%{transform:rotate(0);color:#a0a0a6}55%{transform:rotate(90deg) scale(1.25);color:#ff7a00}80%,100%{transform:rotate(180deg);color:#a0a0a6}}
@keyframes vfRing{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@keyframes vfPing{0%{box-shadow:0 10px 24px -8px #0066ffaa,0 0 0 0 #2b8cff77}60%,100%{box-shadow:0 10px 24px -8px #0066ffaa,0 0 0 14px #2b8cff00}}
@media (prefers-reduced-motion:reduce){.auth.vkid .brand,.auth.vkid .brand *{animation:none!important}.auth.vkid .brand-name{color:#111;background:none}}
.auth.vkid .brand-mark.logo{padding:0;margin:0;width:46px;height:46px;background:#ff7a00}
.auth.vkid .brand-mark.logo img{width:100%;height:100%;object-fit:cover;display:block}

/* ok.ru-style post-login feed (presentation only; actions unchanged). */
body:has(.home.okfeed){background:#f0f2f5}
.home.okfeed{width:100%;max-width:520px;margin:0 auto;padding:0 0 76px;color:#222;font-size:14px}
.okbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:8px;padding:8px 10px;background:linear-gradient(180deg,#f2811f,#ee7203);box-shadow:0 2px 6px #0003}
.okbar-brand{display:flex;align-items:center;gap:7px;background:transparent;color:#fff;font-weight:800;font-size:17px;padding:0}
.okbar-logo{width:30px;height:30px;border-radius:8px;object-fit:cover;box-shadow:0 1px 3px #0004}
.okbar-search{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:17px;background:#ffffffe6;color:#777;font-size:13px;text-align:left}
.okbar-search span{font-size:12px}
.okbar-icon{background:#ffffff22;border-radius:50%;width:34px;height:34px;font-size:15px;display:grid;place-items:center;flex:none}
.okstories{display:flex;gap:12px;overflow-x:auto;padding:12px 12px 4px;scrollbar-width:none}
.okstories::-webkit-scrollbar{display:none}
.okstory{display:flex;flex-direction:column;align-items:center;gap:5px;background:transparent;padding:0;flex:none;width:64px}
.okstory-img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2.5px solid #ee7203;padding:2px;background:#fff}
.okstory-me .okstory-img{border-color:#9ab0c6}
.okstory span{font-size:11px;color:#444;max-width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okcard{background:#fff;border-radius:12px;margin:10px 10px 0;box-shadow:0 1px 3px #0001a;overflow:hidden}
.okcard-head{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 6px}
.okcard-who{display:flex;align-items:center;gap:9px;background:transparent;padding:0;text-align:left;min-width:0}
.okcard-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none}
.okcard-names{display:flex;flex-direction:column;min-width:0}
.okcard-names strong{font-size:14px;color:#222;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.okcard-names small{font-size:12px;color:#8a8a8e}
.okcard-more{background:transparent;font-size:20px;color:#8a8a8e;padding:0 6px;line-height:1}
.okcard-media{position:relative;display:block;width:100%;padding:0;background:#000}
.okcard-img{width:100%;height:210px;object-fit:cover;display:block;opacity:.92}
.okcard-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#ee7203;color:#fff;font-weight:700;font-size:15px;padding:10px 22px;border-radius:24px;box-shadow:0 4px 14px #0006}
.okcard-body{padding:10px 14px;font-size:14px;line-height:1.45;color:#333}
.okcard-body p{margin:0}
.okcard-balance{display:flex;align-items:center;justify-content:space-between;gap:10px}
.okcard-balance-num{display:flex;align-items:center;gap:6px;font-size:18px;font-weight:800;color:#222}
.okcard-balance-num img{width:24px;height:24px}
.okcard-cta{background:#ee7203;color:#fff;font-weight:700;font-size:14px;padding:9px 16px;border-radius:20px}
.okcard-actions{display:flex;border-top:1px solid #f0f0f2;margin-top:4px}
.okcard-actions button{flex:1;background:transparent;padding:10px 0;font-size:13px;color:#65676b;display:flex;align-items:center;justify-content:center;gap:6px}
.okcard-actions button:active{background:#f5f6f8}
.okcard-social p{margin:0 0 10px}
.okcard-social .social{margin:0;background:transparent;padding:0;justify-content:flex-start;gap:14px}
.okcard-social .social img{width:34px;height:34px}
.home.okfeed .account{margin:18px 12px 0;border-top:0;color:#9a9a9e}
.oknav{position:fixed;bottom:0;left:0;right:0;z-index:6;display:flex;background:#fff;border-top:1px solid #e3e3e8;box-shadow:0 -2px 8px #0001;max-width:520px;margin:0 auto}
.oknav-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;padding:7px 0 6px;font-size:10.5px;color:#65676b}
.oknav-item span{font-size:19px}
.oknav-item.active{color:#ee7203;font-weight:700}
@media(min-width:521px){.oknav{left:50%;transform:translateX(-50%)}}
.oknav-item{white-space:nowrap;font-size:10px;padding:7px 2px 6px}
.oknav-item{font-size:9px;letter-spacing:-.2px}
.oknav-item span{font-size:18px}
/* VF-HOME-PREMIUM */
.okfeed .ic{width:22px;height:22px;flex:none;display:block}
.okfeed{animation:okIn .5s cubic-bezier(.2,.8,.2,1) both;-webkit-tap-highlight-color:transparent}
.okbar{backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 6px 24px -12px rgba(238,130,8,.55)}
.okbar-search{display:flex;align-items:center;gap:8px}.okbar-search .ic{width:18px;height:18px;opacity:.8}
.okbar-icon{position:relative;display:grid;place-items:center;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.okdot{position:absolute;top:6px;right:6px;width:8px;height:8px;border-radius:50%;background:#ff3b30;box-shadow:0 0 0 2px #fff;animation:okPulse 2s infinite}
#ok-bell .ic{transform-origin:50% 10%;animation:okRing 4s ease-in-out infinite}
.okstory{animation:okRise .55s cubic-bezier(.2,.8,.2,1) both}
.okstory:nth-child(2){animation-delay:.06s}.okstory:nth-child(3){animation-delay:.12s}.okstory:nth-child(4){animation-delay:.18s}
.okstory-img{transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.okcard{animation:okRise .6s cubic-bezier(.2,.8,.2,1) both;box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 30px -18px rgba(0,0,0,.25);transition:transform .3s,box-shadow .3s}
.okcard:nth-of-type(2){animation-delay:.1s}.okcard:nth-of-type(3){animation-delay:.18s}.okcard:nth-of-type(4){animation-delay:.26s}.okcard:nth-of-type(5){animation-delay:.34s}
.okcard-media{overflow:hidden;position:relative}.okcard-img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.okcard-media:hover .okcard-img,.okcard-media:active .okcard-img{transform:scale(1.05)}
.okcard-play{display:inline-flex;align-items:center;gap:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.okcard-play .ic{width:16px;height:16px}
.okcard-play::after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid currentColor;opacity:0;animation:okRingOut 2.4s ease-out infinite}
.okcard-cta{display:inline-flex;align-items:center;gap:4px;background-size:200% 100%;background-image:linear-gradient(110deg,#ff8a00 0%,#ffb347 45%,#ff8a00 90%);animation:okShine 3.5s linear infinite}.okcard-cta .ic{width:18px;height:18px}
.okcard-more{display:grid;place-items:center}
.okcard-actions button{display:inline-flex;align-items:center;gap:6px;transition:transform .2s cubic-bezier(.3,1.6,.5,1),color .2s}.okcard-actions .ic{width:19px;height:19px}
.okcard-actions button.on{color:#ee8208}.okcard-actions button.on .ic{animation:okPop .45s cubic-bezier(.3,1.8,.5,1)}
.oknav{backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px)}
.oknav-item span{display:grid;place-items:center;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.oknav-item.active span{transform:translateY(-2px)}.oknav-item.active span .ic{stroke-width:2.3}
.okfeed button:active{transform:scale(.94)}.okfeed .okcard:active{transform:none}
@keyframes okIn{from{opacity:0}to{opacity:1}}
@keyframes okRise{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
@keyframes okPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
@keyframes okRing{0%,86%,100%{transform:rotate(0)}89%{transform:rotate(14deg)}92%{transform:rotate(-12deg)}95%{transform:rotate(7deg)}}
@keyframes okRingOut{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes okShine{to{background-position:-200% 0}}
@keyframes okPop{0%{transform:scale(1)}40%{transform:scale(1.4) rotate(-10deg)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.okfeed *,.okfeed{animation:none!important;transition:none!important}}
/* VF-ACCOUNT-SHEET */
dialog.acc-modal{padding:0;border:0;border-radius:28px;width:min(420px,94vw);overflow:hidden;background:#fff;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:accIn .45s cubic-bezier(.2,.9,.2,1)}
dialog.acc-modal::backdrop{background:rgba(20,12,4,.45);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
dialog.acc-modal #close-modal{position:absolute;top:14px;right:14px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.25);color:#fff;border:0;backdrop-filter:blur(8px)}
.acc .ic{width:20px;height:20px;flex:none}
.acc-hero{position:relative;padding:34px 20px 22px;text-align:center;color:#fff;background:radial-gradient(120% 90% at 20% 0%,#ffb347 0%,#ff8a00 45%,#e45a00 100%);overflow:hidden}
.acc-hero::after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent,rgba(255,255,255,.18),transparent 30%);animation:accSpin 9s linear infinite}
.acc-hero>*{position:relative;z-index:1}
.acc-ava{position:relative;width:92px;height:92px;margin:0 auto 12px;border-radius:50%;padding:3px;background:linear-gradient(135deg,#fff,#ffe0b0);box-shadow:0 10px 30px -8px rgba(0,0,0,.45);animation:accFloat 4s ease-in-out infinite}
.acc-ava img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.acc-ava i{position:absolute;right:4px;bottom:4px;width:16px;height:16px;border-radius:50%;background:#2ecc71;border:3px solid #fff}
.acc-hero h2{margin:0;font-size:21px;font-weight:800;letter-spacing:.2px}
.acc-phone{margin:6px 0 12px;font-size:15px;opacity:.95;display:flex;justify-content:center;align-items:center;gap:6px}.acc-flag{font-size:20px}
.acc-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.22);font-weight:700;font-size:13px}.acc-badge .ic{width:15px;height:15px}
.acc-bal{margin:-14px 16px 0;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 12px 30px -12px rgba(0,0,0,.3)}
.acc-bal small{color:#8a8f98;font-size:12px}.acc-bal strong{display:block;font-size:22px}.acc-bal em{font-style:normal;font-size:14px;color:#ee8208}
.acc-bal button,.acc-out{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:14px;font-weight:700;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.acc-bal button{padding:10px 16px;color:#fff;background:linear-gradient(110deg,#ff8a00,#ffb347 45%,#ff8a00 90%);background-size:200% 100%;animation:okShine 3.5s linear infinite}
.acc-list{margin:16px;border-radius:18px;background:#f7f7f9;overflow:hidden}
.acc-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border-bottom:1px solid #ececf0;animation:okRise .5s both}.acc-row:last-child{border:0}
.acc-row .ic{color:#ee8208}.acc-row span{flex:1;color:#5b606a;font-size:14px}.acc-row b{font-size:14px}
.acc-row:nth-child(2){animation-delay:.05s}.acc-row:nth-child(3){animation-delay:.1s}.acc-row:nth-child(4){animation-delay:.15s}
.acc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 16px}
.acc-grid button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:0;border-radius:18px;background:#fff4e8;color:#c65f00;font-weight:700;font-size:13px;cursor:pointer;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.acc-grid .ic{width:24px;height:24px}
.acc-out{width:calc(100% - 32px);margin:14px 16px 18px;justify-content:center;padding:14px;background:#fff0ef;color:#e0352b}
.acc button:active{transform:scale(.94)}
@keyframes accIn{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
@keyframes accSpin{to{transform:rotate(360deg)}}
@keyframes accFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.acc *,dialog.acc-modal{animation:none!important}}
/* v3 home header + games row */
.vfbar{justify-content:space-between;padding:10px 14px}
.vflogo{position:relative;display:grid;place-items:center;width:40px;height:40px}
.vflogo .okbar-logo{position:relative;z-index:1;width:38px;height:38px;border-radius:11px;animation:vfFloat 3.2s ease-in-out infinite;box-shadow:0 6px 16px -6px #0006}
.vfhalo{position:absolute;inset:-5px;border-radius:15px;background:conic-gradient(from 0deg,#fff0,#fff9,#ffd27a,#fff0 60%);animation:vfSpin 3.5s linear infinite;filter:blur(1px);-webkit-mask:radial-gradient(circle,#0000 58%,#000 60%);mask:radial-gradient(circle,#0000 58%,#000 60%)}
.vfname{font-size:20px;font-weight:900;letter-spacing:.2px;background:linear-gradient(90deg,#fff 0%,#fff 40%,#ffe2a8 50%,#fff 60%,#fff 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:vfShine 4s ease-in-out infinite;text-shadow:none}
.vfname em{display:inline!important;color:#fff3dc;-webkit-text-fill-color:#fff3dc;font-style:normal;font-weight:700;font-size:14px;opacity:.85}
.vflang{display:flex;align-items:center;gap:5px;height:34px;padding:0 10px 0 9px;border-radius:17px;background:#ffffff2e;border:1px solid #ffffff55;color:#fff;font-weight:800;font-size:13px;backdrop-filter:blur(8px)}
.vflang .ic{width:15px;height:15px}
.vflang:active{transform:scale(.95)}
.lang-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.lang-grid button{display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:#f6f6f8;border:2px solid transparent;font-weight:700;color:#222;text-align:left}
.lang-grid button[aria-pressed=true]{border-color:#ee7203;background:#fff4ea}
.lang-grid .lf{font-size:22px}
.vfrow{align-items:flex-start;gap:14px;overflow:visible}
.okstory-me{position:relative}
.vfcam{position:absolute;top:38px;left:40px;width:22px;height:22px;border-radius:50%;background:#ee7203;color:#fff;display:grid;place-items:center;border:2px solid #fff;box-shadow:0 3px 8px -2px #ee720399;animation:vfPulse 2s ease-in-out infinite}
.vfcam svg{width:13px;height:13px}
.vfgames{flex:1;min-width:0;border-radius:18px;padding:6px 10px 6px;background:linear-gradient(135deg,#fff,#fff6ee);box-shadow:0 8px 24px -14px #ee720380,inset 0 0 0 1px #ee72031f}
.vfgames-head{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#ee7203;margin-bottom:4px}
.vfarrows{display:flex;font-style:normal}.vfarrows b{font-size:16px;line-height:1;animation:vfArrow 1.4s ease-in-out infinite;opacity:.2}
.vfarrows b:nth-child(2){animation-delay:.18s}.vfarrows b:nth-child(3){animation-delay:.36s}
.vfgames-list{display:flex;gap:12px}
.vfgame .okstory-img{box-shadow:0 6px 14px -8px #ee7203}
.vfgame:active .okstory-img{transform:scale(.92)}
@keyframes vfFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-4deg)}}
@keyframes vfSpin{to{transform:rotate(360deg)}}
@keyframes vfShine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
@keyframes vfPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes vfArrow{0%,100%{opacity:.2;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}
@media (prefers-reduced-motion:reduce){.vflogo .okbar-logo,.vfhalo,.vfname,.vfcam,.vfarrows b{animation:none}}
/* v4: games aligned, app profile, language sheet */
.vfrow{align-items:flex-start;gap:12px;padding-top:14px}
.vfgames{flex:none;position:relative;padding:4px 12px 2px;border-radius:999px 999px 999px 999px/40px}
.vfgames-head{position:absolute;top:-11px;left:50%;transform:translateX(-50%);margin:0;padding:2px 10px;border-radius:99px;background:linear-gradient(90deg,#ff8a00,#ffb347);color:#fff;font-size:10px;white-space:nowrap;box-shadow:0 4px 10px -4px #ee7203}
.vfgames-head .vfarrows b{font-size:12px}
.vfgames-list{gap:10px}
.vfgames .okstory{width:60px}
dialog.acc-modal{width:100vw;max-width:480px;height:100dvh;max-height:100dvh;margin:0 auto;border-radius:0;overflow-y:auto;background:#f3f4f7}
dialog.acc-modal #close-modal{top:10px;left:12px;right:auto;background:rgba(255,255,255,.22);font-size:0}
dialog.acc-modal #close-modal::before{content:"‹";font-size:30px;line-height:30px;color:#fff}
.acc-top{position:sticky;top:0;z-index:2;height:56px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;background:#ff8a00}
.acc-hero{padding:8px 20px 34px}
.acc-ava{border:0;cursor:pointer}
.acc-ava em{position:absolute;left:-2px;bottom:2px;width:28px;height:28px;border-radius:50%;background:#fff;color:#ee7203;display:grid;place-items:center;box-shadow:0 4px 10px -3px #0004}
.acc-ava em .ic{width:16px;height:16px}
.acc-name{margin:-18px 16px 0;position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 12px 30px -16px #0005}
.acc-name small{display:block;color:#8a8f98;font-size:12px}.acc-name strong{font-size:18px;word-break:break-word}.acc-name i{color:#b0b4bb;font-weight:600}
.acc-name button{flex:none;padding:9px 14px;border-radius:12px;background:#fff1e3;color:#d76a00;font-weight:800;border:0}
.acc-name-form{margin:10px 16px 0;display:flex;flex-wrap:wrap;gap:8px}
.acc-name-form input{flex:1;min-width:0;padding:12px 14px;border-radius:14px;border:2px solid #ffd2a6;font-size:16px;background:#fff}
.acc-name-form .primary{padding:0 16px;border-radius:14px;margin:0}
.acc-name-form .error{width:100%;margin:0;color:#d33;font-size:13px}
.acc-bio{margin:10px 16px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:14px 16px;border-radius:20px;background:#fff;box-shadow:0 12px 30px -16px #0005}
.acc-bio small{display:block;color:#8a8f98;font-size:12px;margin-bottom:2px}
.acc-bio strong{font-size:15px;font-weight:500;line-height:1.5;word-break:break-word;white-space:pre-wrap}
.acc-bio i{color:#b0b4bb;font-weight:600}
.acc-bio button{flex:none;padding:9px 14px;border-radius:12px;background:#fff1e3;color:#d76a00;font-weight:800;border:0}
.acc-bio-form{margin:10px 16px 0}
.acc-bio-input{width:100%;min-height:96px;padding:12px 14px;border-radius:14px;border:2px solid #ffd2a6;font-size:15px;background:#fff;resize:none;font-family:inherit;line-height:1.5;box-sizing:border-box}
.acc-bal{margin:12px 16px 0}
.acc-sec{margin:18px 22px 6px;font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:#9a9ea6}
.acc-list{margin:0 16px;background:#fff;box-shadow:0 6px 18px -14px #0004}
.acc-row{width:100%;background:transparent;border:0;border-bottom:1px solid #eef0f3;text-align:left;font:inherit;color:inherit}
.acc-row.tap{cursor:pointer}.acc-row.tap:active{background:#f6f6f8}
.acc-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;background:#fff1e3}
.acc-ico .ic{width:19px;height:19px}
.acc-k{flex:1;color:#2b2e33!important;font-size:15px!important}
.acc-row b{font-weight:600;color:#6b7079}
.acc-on{color:#22b26a}
.chev{width:18px;height:18px;color:#c3c6cc}
.acc-out{margin-top:20px}
.acc-foot{text-align:center;color:#b0b4bb;font-size:12px;margin:0 0 24px}
dialog.sheet-modal{margin:auto auto 0;width:100vw;max-width:520px;max-height:86dvh;padding:0;border:0;border-radius:26px 26px 0 0;background:#fff;box-shadow:0 -20px 60px -20px #0006;animation:lsUp .35s cubic-bezier(.2,.9,.2,1)}
dialog.sheet-modal::backdrop{background:rgba(15,10,5,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog.sheet-modal #close-modal{top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#f1f2f5;color:#555;font-size:20px;line-height:1}
.ls{padding:10px 18px calc(18px + env(safe-area-inset-bottom))}
.ls-grab{display:block;width:40px;height:5px;border-radius:3px;background:#dcdde2;margin:0 auto 12px}
.ls h2{margin:0;font-size:22px;font-weight:900}
.ls-sub{margin:2px 0 12px;color:#8a8f98;font-size:13px}
.ls-search{display:flex;align-items:center;gap:8px;padding:0 12px;height:42px;border-radius:14px;background:#f1f2f5;color:#8a8f98;margin-bottom:10px}
.ls-search svg{width:18px;height:18px}.ls-search input{flex:1;border:0;background:transparent;font-size:16px;outline:0;padding:0;margin:0}
.ls-list{max-height:56dvh;overflow-y:auto;border-radius:18px;background:#f7f8fa}
.ls-row{width:100%;display:flex;align-items:center;gap:12px;padding:12px 14px;border:0;border-bottom:1px solid #eceef2;background:transparent;text-align:left;font:inherit;color:#222;transition:background .2s}
.ls-row:last-child{border:0}.ls-row:active{background:#eef0f4}
.ls-flag{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:26px;background:#fff;box-shadow:0 3px 8px -4px #0004;overflow:hidden}
.ls-txt{flex:1;min-width:0;display:flex;flex-direction:column}.ls-txt b{font-size:16px}.ls-txt small{color:#8a8f98;font-size:12px}
.ls-radio{width:24px;height:24px;flex:none;border-radius:50%;border:2px solid #d2d4da;display:grid;place-items:center;color:transparent;transition:all .2s}
.ls-radio svg{width:15px;height:15px}
.ls-row[aria-pressed=true]{background:#fff4ea}
.ls-row[aria-pressed=true] .ls-radio{background:#ee7203;border-color:#ee7203;color:#fff;transform:scale(1.08)}
@keyframes lsUp{from{transform:translateY(100%)}to{transform:none}}
.acc-name-form[hidden]{display:none!important}
dialog.acc-modal{inset:0!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;padding:0!important;border-radius:0!important}
dialog.acc-modal #modal-body{padding:0!important;margin:0!important;max-width:520px;margin:0 auto!important}
dialog.acc-modal #close-modal{position:fixed;color:#fff}
.acc-ico{width:34px!important;max-width:34px;flex:0 0 34px!important}
.acc-ava em svg{width:16px;height:16px}
/* v5: fit-to-screen, games label between, photo upload */
html,body{overscroll-behavior:none}
.okfeed{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.okfeed .okcard,.okfeed .account{flex:none}
.okfeed .account{margin-top:auto;padding-bottom:84px;font-size:11px}
.vfrow{display:flex;align-items:center;gap:8px;padding:12px 12px 6px;overflow:visible}
.vfgames-head{position:static!important;transform:none!important;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 7px!important;margin:0 0 18px!important;border-radius:14px!important;font-size:10px!important;flex:none}
.vfgames-head .vfarrows{flex-direction:row}
.vfgames{padding:6px 10px 2px!important;border-radius:20px!important}
.okcard-me .okcard-body{padding-bottom:14px}
dialog.acc-modal{overflow:hidden!important}
.acc{height:100dvh;display:flex;flex-direction:column}
.acc-top{height:48px;flex:none}
.acc-hero{padding:4px 20px 26px!important}
.acc-ava{width:78px!important;height:78px!important;margin-bottom:8px!important}
.acc-hero h2{font-size:19px!important}.acc-phone{margin:3px 0 8px!important;font-size:14px!important}
.acc-badge{padding:4px 12px!important;font-size:12px!important}
.acc-name{padding:10px 14px!important}.acc-name strong{font-size:16px!important}
.acc-bal{margin-top:10px!important;padding:10px 14px!important}.acc-bal strong{font-size:19px!important}
.acc-sec{margin:12px 22px 4px!important}
.acc-row{padding:9px 14px!important}.acc-ico{width:30px!important;height:30px!important;flex-basis:30px!important}
.acc-out{margin:auto 16px calc(14px + env(safe-area-inset-bottom))!important;padding:12px!important;width:calc(100% - 32px)}
dialog.sheet-modal{max-height:92dvh;overflow:hidden}
.ls{display:flex;flex-direction:column;max-height:92dvh}
.ls-search{display:none}
.ls-sub{margin-bottom:10px}
.ls-list{max-height:none;overflow:visible;display:grid;grid-template-columns:1fr 1fr;gap:8px;background:transparent}
.ls-row{border:0!important;border-radius:16px;background:#f5f6f8;padding:10px;gap:9px}
.ls-flag{width:34px;height:34px;font-size:22px}
.ls-txt b{font-size:14px}.ls-txt small{font-size:11px}
.ls-radio{width:20px;height:20px}
.ap h2{margin-bottom:10px}
.ap-prev{position:relative;width:120px;height:120px;margin:0 auto 14px}
.ap-prev img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}
.ap-ring{position:absolute;inset:-5px;border-radius:50%;border:3px solid #ee7203;box-shadow:0 10px 30px -12px #ee7203}
.ap-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap-up{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border:0;border-radius:14px;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(110deg,#ff8a00,#ffb347)}
.ap-up.alt{background:#fff1e3;color:#d76a00}.ap-up svg{width:20px;height:20px}
.ap-or{text-align:center;color:#9a9ea6;font-size:12px;margin:12px 0 8px}
.ap-presets{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.ap-presets button{padding:0;border:3px solid transparent;border-radius:50%;background:none;aspect-ratio:1;overflow:hidden}
.ap-presets button[aria-pressed=true]{border-color:#ee7203}
.ap-presets img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.ap-bar{height:6px;border-radius:3px;background:#f1f2f5;margin-top:12px;overflow:hidden}.ap-bar i{display:block;height:100%;width:0;background:#ee7203;transition:width .2s}
.ap-save{width:100%;margin-top:12px!important;height:48px}
.ap .error{color:#d33;font-size:13px;text-align:center;margin:6px 0 0}
/* v5b: store + balance fit one screen */
body:has(.store-page),body:has(.balance-page){background:#f3f4f7}
.store-page,.balance-page{width:100%!important;max-width:480px;height:100dvh;margin:0 auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;padding:14px 16px calc(12px + env(safe-area-inset-bottom))!important;overflow:hidden;display:flex;flex-direction:column;box-sizing:border-box;background:#f3f4f7!important}
.store-page h1,.balance-page h1{margin:0 0 10px!important;font-size:22px!important;font-weight:900;text-align:left}
.store-page h2{margin:10px 0 6px!important;font-size:13px!important;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:#9a9ea6!important;text-align:left}
.store-page hr{display:none}
.store-info{background:#fff;border-radius:18px;padding:10px 12px;box-shadow:0 6px 18px -14px #0004}
.store-balance{margin:0 0 8px!important;padding:8px 10px!important;border-radius:14px!important;font-size:15px}
.store-user-info p{margin:0!important;padding:5px 9px!important;font-size:12px!important;border-radius:10px!important}
.store-user-info,.store-user-row{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start}
.store-items{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.store-items h2{grid-column:1/-1}
.store-item{margin:0!important;padding:12px 10px!important;border-radius:16px!important;background:#fff!important;border:0!important;box-shadow:0 6px 18px -14px #0004!important;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.store-item-link{display:flex!important;align-items:center;gap:8px;justify-content:flex-start!important}
.store-item-icon{position:static!important;width:30px;height:30px;border-radius:10px;background:#fff1e3;display:grid;place-items:center;font-size:16px}
.store-item-icon img{width:18px;height:18px}
.store-item-name{font-size:13px!important;line-height:1.2}
.store-item-description{font-size:11px!important;line-height:1.3;margin:0!important}
.store-back,.balance-back{margin-top:auto!important;width:100%;height:46px;border-radius:14px!important;font-weight:800}
.balance-tabs{margin:0 0 10px!important;display:flex;justify-content:space-between;align-items:center}
.balance-tabs button,.balance-coin{padding:8px 12px!important;font-size:13px!important;border-radius:12px!important}
.balance-page form{padding:12px!important;border-radius:18px;background:#fff!important;margin:0!important}
.balance-page form>*{margin-top:0!important;margin-bottom:8px!important}
.balance-id{display:flex;align-items:center;gap:10px}.balance-id input{width:110px;height:38px}
.balance-help{display:none}
.balance-recipient{font-size:13px}
.balance-notice{padding:8px!important;font-size:12px!important}.balance-bonus{margin-top:6px!important;padding:6px!important}
.balance-page select{height:42px;width:100%}
.balance-page label{font-size:13px}
.balance-limitation{font-size:11px!important;line-height:1.3}
.ls-list{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
.ls-row{min-width:0}.ls-txt b,.ls-txt small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.store-item-name{text-align:left!important}.store-item-description{text-align:left!important}
.store-page h2{margin:12px 0 2px!important}.store-info{margin-bottom:0}
.store-item-icon{background:none!important;width:auto!important;height:auto!important}
.si{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;box-shadow:0 6px 14px -6px var(--sc,#0005),inset 0 1px 0 #ffffff55;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.si svg{width:19px;height:19px}
.si-lock{background:linear-gradient(135deg,#ffb347,#ff7a00);--sc:#ff7a00}
.si-gender{background:linear-gradient(135deg,#a78bfa,#7c3aed);--sc:#7c3aed}
.si-name{background:linear-gradient(135deg,#34d399,#059669);--sc:#059669}
.si-photo{background:linear-gradient(135deg,#f472b6,#db2777);--sc:#db2777}
.si-tick{background:linear-gradient(135deg,#60a5fa,#2563eb);--sc:#2563eb}
.si-id{background:linear-gradient(135deg,#fbbf24,#d97706);--sc:#d97706}
.store-item{transition:transform .2s}.store-item:active{transform:scale(.97)}.store-item:active .si{transform:rotate(-8deg) scale(1.08)}
.store-item{animation:okRise .45s cubic-bezier(.2,.8,.2,1) both}
/* v6: white header, theme switch, premium nav, dark mode */
.vfbar{background:#ffffffeb!important;color:#1d1f24;box-shadow:0 1px 0 #0000000f,0 8px 24px -18px #0006!important;padding:8px 12px!important}
.vfme{display:flex;align-items:center;gap:9px;min-width:0;background:none;border:0;padding:0;color:inherit;text-align:left}
.vfme-img{width:40px;height:40px;flex:none;border-radius:50%;object-fit:cover;border:2px solid #ee7203;padding:1.5px;background:#fff}
.vfme-txt{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.vfme-txt b{font-size:15px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46vw}
.vfme-txt small{font-size:12px;color:#8a8f98;font-weight:600}
.vfright{display:flex;align-items:center;gap:8px;flex:none}
.vflang{background:#f3f4f7!important;border:1px solid #e6e8ec!important;color:#1d1f24!important}
.vftheme{position:relative;width:58px;height:32px;border-radius:16px;border:0;padding:0;background:linear-gradient(135deg,#bfe3ff,#ffd88a);box-shadow:inset 0 2px 6px #0002;overflow:hidden;transition:background .5s}
.vft-knob{position:absolute;top:3px;left:3px;width:26px;height:26px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 3px 8px -2px #0005;transition:transform .5s cubic-bezier(.5,1.6,.4,1),background .5s}
.vft-knob svg{position:absolute;width:16px;height:16px;transition:opacity .4s,transform .5s}
.vft-sun{color:#f59e0b}.vft-moon{color:#c7d2fe;opacity:0;transform:rotate(-90deg) scale(.5)}
.vft-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;transition:opacity .5s}.s1{left:12px;top:9px}.s2{left:20px;top:19px;width:2px;height:2px}
.vftheme[aria-checked=true]{background:linear-gradient(135deg,#1e1b4b,#312e81)}
.vftheme[aria-checked=true] .vft-knob{transform:translateX(26px);background:#3b3f73}
.vftheme[aria-checked=true] .vft-sun{opacity:0;transform:rotate(90deg) scale(.5)}
.vftheme[aria-checked=true] .vft-moon{opacity:1;transform:none}
.vftheme[aria-checked=true] .vft-star{opacity:1;animation:vfTw 1.6s ease-in-out infinite}
@keyframes vfTw{50%{opacity:.3}}
.oknav{background:#ffffffeb!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.oknav-item{display:flex;flex-direction:column;align-items:center;gap:3px;color:#8a8f98!important;background:none!important}
.oknav-item em{font-style:normal;font-size:11px;font-weight:700}
.nvi{width:42px;height:30px;border-radius:15px;display:grid;place-items:center;transition:background .3s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.nvi svg{width:23px;height:23px}
.oknav-item.active{color:#ee7203!important}
.oknav-item.active .nvi{background:linear-gradient(135deg,#ffedd8,#ffd9b0)}
.oknav-item.active .nvi svg{fill:#ee720322}
.oknav-item:active .nvi{transform:scale(.88)}
.nvi-gem svg{color:#1aa3e8;fill:#1aa3e81f}
.nvi-power svg{color:#e0352b}
/* dark */
html.dark{color-scheme:dark}
html.dark body,html.dark .okfeed,html.dark body:has(.store-page),html.dark .store-page,html.dark .balance-page,html.dark dialog.acc-modal{background:#0f1014!important;color:#e9eaee}
html.dark .vfbar,html.dark .oknav{background:#17181ee6!important;color:#e9eaee;box-shadow:0 1px 0 #ffffff12!important}
html.dark .vfme-img{background:#17181e}
html.dark .vflang{background:#23252d!important;border-color:#2f323b!important;color:#e9eaee!important}
html.dark .okcard,html.dark .acc-name,html.dark .acc-bio,html.dark .acc-bal,html.dark .acc-list,html.dark .store-info,html.dark .store-item,html.dark .balance-page form,html.dark dialog.sheet-modal,html.dark dialog:not(.acc-modal){background:#1a1b21!important;color:#e9eaee!important;box-shadow:0 8px 24px -16px #000!important}
html.dark .vfgames{background:linear-gradient(135deg,#1a1b21,#231b14)!important;box-shadow:inset 0 0 0 1px #ee720333!important}
html.dark .okstory span,html.dark .okcard-names strong,html.dark .okcard-balance-num,html.dark .acc-k,html.dark .ls-txt b,html.dark .ls h2,html.dark .store-page h1,html.dark .balance-page h1,html.dark .store-item-name,html.dark #modal-body h2,html.dark .lang-grid button{color:#e9eaee!important}
html.dark .ls-row,html.dark .ls-list{background:#23252d!important}html.dark .ls-row[aria-pressed=true]{background:#3a2614!important}
html.dark .ls-flag{background:#2b2d36}
html.dark .acc-row{border-color:#2a2c34!important}html.dark .acc-ico{background:#2c2118}html.dark .acc-bio small{color:#8d919b!important}
html.dark .acc-name button,html.dark .acc-bio button,html.dark .ap-up.alt{background:#2c2118!important}
html.dark .store-user-info p,html.dark .store-balance,html.dark .balance-notice,html.dark .balance-tabs button,html.dark .balance-page input,html.dark .balance-page select,html.dark .acc-name-form input,html.dark .acc-bio-input{background:#23252d!important;color:#e9eaee!important;border-color:#2f323b!important}
html.dark .balance-bonus{background:#2c2410!important}
html.dark .oknav-item.active .nvi{background:linear-gradient(135deg,#3a2614,#4a2c10)}
html.dark .acc-out{background:#2a1515!important}
html.dark .ls-grab{background:#3a3c45}html.dark dialog.sheet-modal #close-modal{background:#2b2d36;color:#ccc}
html.dark .account,html.dark .vfme-txt small,html.dark .ls-sub,html.dark .ls-txt small,html.dark .store-item-description,html.dark .okcard-names small{color:#8d919b!important}
html.dark .social{border-color:#2f323b!important}
html,body,.okcard,.vfbar,.oknav,.store-item,.acc-list{transition:background-color .4s,color .4s}
html.dark .okcard-social strong,html.dark .okcard-social p{color:#e9eaee!important}
/* ---- posts: composer bar, feed, composer sheet ---- */
.okfeed .vffeed{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding-bottom:84px}
.vfcomposer{display:flex;align-items:center;gap:10px;margin:6px 12px 8px;padding:9px 10px 9px 9px;border:0;border-radius:18px;background:#fff;box-shadow:0 1px 2px #0000000d,0 6px 18px -10px #ff7a0040;font:inherit;color:#8b8b92;text-align:left;cursor:pointer;flex:none}
.vfcomposer-img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.vfcomposer span{flex:1;font-size:15px}
.vfcomposer-photo{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#fff1e4,#ffe2c7);color:#ff7a00}
.vfcomposer-photo svg{width:21px;height:21px}
.vfpost .vfpost-text{margin:2px 14px 12px;font-size:15px;line-height:1.45;white-space:pre-wrap;word-break:break-word;color:inherit}
.vfpost-img{display:block;width:100%;max-height:420px;object-fit:cover;background:#f2f2f4}
.vfvis-mini svg{width:12px;height:12px;vertical-align:-2px;margin-right:3px}
.pc-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;background:#0000;transition:background .26s}
.pc-wrap.open{background:#0007}
.pc-card{width:100%;max-width:520px;height:calc(100dvh - 14px);background:#fff;border-radius:26px 26px 0 0;display:flex;flex-direction:column;padding:14px 18px calc(16px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.9,.25,1);box-shadow:0 -10px 40px #0003}
.pc-wrap.open .pc-card{transform:none}
.pc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.pc-me{display:flex;align-items:center;gap:10px;font-size:15px}
.pc-me-img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.pc-x{width:36px;height:36px;border:0;border-radius:50%;background:#f1efed;color:#333;display:grid;place-items:center}
.pc-x svg{width:18px;height:18px}
.pc-text{flex:1;min-height:90px;border:0;outline:0;resize:none;font:inherit;font-size:24px;line-height:1.35;color:#1d1d1f;background:transparent;padding:4px 0}
.pc-text::placeholder{color:#8e8e93}
.pc-hint{margin:-100px 0 70px;color:#8e8e93;font-size:15px;pointer-events:none;position:relative;top:44px}
.pc-hint[hidden]{display:none}
.pc-prev{position:relative;margin:6px 0 10px;flex:none}
.pc-prev img{display:block;max-height:30dvh;max-width:100%;border-radius:18px;object-fit:cover}
.pc-prev-x{position:absolute;top:8px;left:8px;width:30px;height:30px;border-radius:50%;border:0;background:#000a;color:#fff;display:grid;place-items:center}
.pc-prev-x svg{width:15px;height:15px}
.pc-meta{display:flex;align-items:center;justify-content:space-between;margin:6px 0 12px}
.pc-vis{display:flex;align-items:center;gap:7px;border:0;background:#f1efed;border-radius:12px;padding:10px 12px;font:inherit;font-size:15px;color:#555}
.pc-vis svg{width:19px;height:19px}.pc-vis svg:last-child{width:16px;height:16px}
.pc-count{color:#aaa;font-size:12px}
.pc-tools{display:flex;gap:10px;padding:12px 0;border-top:1px solid #f0eeec;border-bottom:1px solid #f0eeec}
.pc-tool{display:flex;align-items:center;gap:8px;border:0;border-radius:16px;background:#f1efed;color:#222;padding:14px 20px;font:inherit;font-size:15px;transition:transform .15s,background .2s}
.pc-tool svg{width:24px;height:24px}
.pc-tool:active{transform:scale(.93);background:#ffe7d1}
.pc-prog{height:4px;border-radius:4px;background:#f1efed;margin-top:10px;overflow:hidden}.pc-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff9a3c,#ff6a00);transition:width .2s}
.pc-act{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.pc-act button{border:0;border-radius:16px;padding:16px;font:inherit;font-size:17px;font-weight:600}
.pc-close{background:#f1efed;color:#222}
.pc-share{background:linear-gradient(135deg,#ff9a3c,#ff6a00);color:#fff;box-shadow:0 8px 20px -8px #ff6a00aa;transition:opacity .2s,transform .15s}
.pc-share:disabled{opacity:.45;box-shadow:none}
.pc-share.busy{opacity:.7}
.pc-act button:active{transform:scale(.96)}
.pc-vis-sheet{position:fixed;inset:0;z-index:60;background:#0000;display:flex;align-items:flex-end;justify-content:center;transition:background .25s}
.pc-vis-sheet.open{background:#0006}
.pc-vis-card{width:100%;max-width:520px;background:#fff;border-radius:24px 24px 0 0;padding:8px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(100%);transition:transform .28s cubic-bezier(.2,.9,.25,1)}
.pc-vis-sheet.open .pc-vis-card{transform:none}
.pc-grab{width:40px;height:5px;border-radius:3px;background:#ddd;margin:2px auto 10px}
.pc-vis-card h3{margin:0 6px 10px;font-size:18px}
.pc-vis-card button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:11px 6px;border-radius:14px;font:inherit;text-align:left;color:inherit}
.pc-vis-card button:active{background:#f6f4f2}
.pc-vis-ic{width:42px;height:42px;border-radius:13px;background:#fff1e4;color:#ff7a00;display:grid;place-items:center;flex:none}.pc-vis-ic svg{width:22px;height:22px}
.pc-vis-txt{flex:1;display:flex;flex-direction:column}.pc-vis-txt small{color:#8e8e93;margin-top:2px}
.pc-vis-ok{width:24px;height:24px;color:#ff7a00;opacity:0}.pc-vis-card .on .pc-vis-ok{opacity:1}
.pc-del{color:#e5322d!important;border-top:1px solid #f0eeec!important;border-radius:0!important;margin-top:4px}.pc-del .pc-vis-ic{background:#ffe9e8;color:#e5322d}
html.dark .vfcomposer,html.dark .pc-card,html.dark .pc-vis-card{background:#1b1c22;color:#e9eaee}
html.dark .pc-text{color:#f2f2f5}
html.dark .pc-x,html.dark .pc-vis,html.dark .pc-tool,html.dark .pc-close{background:#2a2b33;color:#e9eaee}
html.dark .pc-tools,html.dark .pc-del{border-color:#2a2b33!important}
html.dark .vfcomposer-photo,html.dark .pc-vis-ic{background:#3a2412}
html.dark .vfpost-img{background:#22232a}
/* ---- comments ---- */
.vfpost-foot{display:flex;padding:6px 8px 8px;border-top:1px solid #f0f0f2;margin-top:8px}
.vfpost-cm{display:flex;align-items:center;gap:7px;border:0;background:none;padding:8px 10px;border-radius:12px;font:inherit;font-size:14px;color:#6b6b72;cursor:pointer}
.vfpost-cm svg{width:20px;height:20px}.vfpost-cm b{background:#ff7a00;color:#fff;font-size:11px;border-radius:9px;padding:1px 7px;font-weight:700}
.vfpost-cm:active{background:#f4f2f0}
.cm-wrap{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-end;justify-content:center;background:#0000;transition:background .28s}
.cm-wrap.open{background:#0007}
.cm-card{width:100%;max-width:520px;height:calc(100dvh - 40px);background:#fff;border-radius:26px 26px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .34s cubic-bezier(.2,.9,.25,1);box-shadow:0 -10px 40px #0003;padding-top:8px;color:#1d1d1f}
.cm-wrap.open .cm-card{transform:none}
.cm-head{display:flex;align-items:center;justify-content:space-between;padding:2px 16px 10px;border-bottom:1px solid #f0eeec}
.cm-head h3{margin:0;font-size:18px}.cm-n{color:#ff7a00;margin-left:4px}
.cm-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px 6px;-webkit-overflow-scrolling:touch}
.cm-item{display:flex;gap:9px;margin-bottom:12px;animation:cmIn .3s cubic-bezier(.2,.8,.2,1) both}
.cm-item.cm-reply{margin-left:44px}.cm-item.cm-reply .cm-ava{width:28px;height:28px}
.cm-ava{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none}
.cm-main{min-width:0;flex:1}
.cm-bubble{display:inline-block;max-width:100%;background:#f2f2f5;border-radius:4px 18px 18px 18px;padding:8px 12px}
.cm-name{display:block;font-size:13px;margin-bottom:2px}
.cm-bubble p{margin:0;font-size:15px;line-height:1.38;white-space:pre-wrap;word-break:break-word}
.cm-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin:4px 0 0 4px;font-size:12px;color:#8e8e93}
.cm-meta button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#6b6b72;cursor:pointer}
.cm-meta .cm-del{color:#e5322d}.cm-edited{font-style:italic;margin-left:-8px}
.cm-new .cm-bubble{animation:cmFlash 1.4s ease}
@keyframes cmIn{from{opacity:0;transform:translateY(8px)}}
@keyframes cmFlash{0%{background:#ffe2c7}100%{background:#f2f2f5}}
.cm-empty{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#8e8e93;text-align:center}
.cm-empty svg{width:46px;height:46px;color:#ffb066;margin-bottom:4px}.cm-empty b{color:#333;font-size:16px}
.cm-loading{display:flex;gap:6px;justify-content:center;padding:40px}.cm-loading i{width:8px;height:8px;border-radius:50%;background:#ff9a3c;animation:cmDot 1s infinite}.cm-loading i:nth-child(2){animation-delay:.15s}.cm-loading i:nth-child(3){animation-delay:.3s}
@keyframes cmDot{50%{opacity:.25;transform:scale(.7)}}
.cm-bar{border-top:1px solid #f0eeec;padding:8px 12px calc(10px + env(safe-area-inset-bottom));background:inherit}
.cm-ctx{display:flex;align-items:center;gap:8px;background:#fff4ea;border-radius:12px;padding:6px 8px 6px 10px;margin-bottom:8px;font-size:13px;color:#7a4a1c}
.cm-ctx-ic svg{width:16px;height:16px;color:#ff7a00;display:block}.cm-ctx-txt{flex:1}
.cm-ctx-x{width:24px;height:24px;border:0;border-radius:50%;background:#ffe2c7;color:#7a4a1c;display:grid;place-items:center}.cm-ctx-x svg{width:12px;height:12px}
.cm-input{display:flex;align-items:flex-end;gap:8px}
.cm-me{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none;margin-bottom:3px}
.cm-field{flex:1;display:flex;align-items:flex-end;background:#f2f2f5;border-radius:20px;padding:4px 4px 4px 14px;min-height:40px}
.cm-field textarea{flex:1;border:0;outline:0;background:transparent;resize:none;font:inherit;font-size:16px;line-height:1.35;padding:6px 0;max-height:110px;color:inherit}
.cm-emo-btn{width:32px;height:32px;border:0;background:none;color:#8e8e93;display:grid;place-items:center;flex:none}.cm-emo-btn svg{width:24px;height:24px}
.cm-send{width:40px;height:40px;border:0;border-radius:50%;background:linear-gradient(135deg,#ff9a3c,#ff6a00);color:#fff;display:grid;place-items:center;flex:none;transition:transform .15s,opacity .2s;box-shadow:0 6px 16px -6px #ff6a00aa}
.cm-send svg{width:19px;height:19px;margin-left:2px}.cm-send:disabled{opacity:.35;box-shadow:none}.cm-send:active{transform:scale(.9)}
.cm-emo{margin:8px -12px 0;border-top:1px solid #f0eeec}
.cm-emo-tabs{display:flex;overflow-x:auto;padding:4px 6px;gap:2px;scrollbar-width:none}
.cm-emo-tabs button{flex:none;width:40px;height:36px;border:0;background:none;border-radius:10px;font-size:21px;opacity:.55;transition:opacity .15s,background .15s}
.cm-emo-tabs button.on{opacity:1;background:#fff1e4}
.cm-emo-grid{height:min(250px,32dvh);overflow-y:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr));padding:4px 8px;overscroll-behavior:contain}
.cm-emo-grid button{border:0;background:none;font-size:27px;height:44px;border-radius:10px;line-height:1;transition:transform .12s}
.cm-emo-grid button:active{transform:scale(1.35);background:#f4f2f0}
.cm-emo-none{grid-column:1/-1;text-align:center;color:#aaa}
html.dark .cm-card{background:#16171c;color:#e9eaee}
html.dark .cm-bubble,html.dark .cm-field{background:#24252c}
html.dark .cm-head,html.dark .cm-bar,html.dark .cm-emo,html.dark .vfpost-foot{border-color:#2a2b33}
html.dark .cm-meta button{color:#b0b0b8}html.dark .cm-empty b{color:#e9eaee}
html.dark .cm-ctx{background:#3a2412;color:#ffd2a8}html.dark .cm-emo-tabs button.on{background:#3a2412}
html.dark .vfpost-cm{color:#b0b0b8}html.dark .vfpost-cm:active{background:#24252c}
@keyframes cmFlashD{0%{background:#5a3412}100%{background:#24252c}}html.dark .cm-new .cm-bubble{animation-name:cmFlashD}
.cm-ctx[hidden],.cm-emo[hidden]{display:none!important}
/* ---- likes ---- */
.vfpost-like{display:flex;align-items:center;gap:6px;border:0;background:none;padding:8px 10px;border-radius:12px;font:inherit;font-size:14px;font-weight:600;color:#6b6b72}
.vfpost-like i{width:22px;height:22px;display:block}.vfpost-like svg{width:22px;height:22px;display:block}
.vfpost-like.on{color:#ff2d55}.vfpost-like.pop i{animation:likePop .45s cubic-bezier(.2,1.6,.4,1)}
@keyframes likePop{0%{transform:scale(.6)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
.vf-ub,.cm-ava-b{border:0;background:none;padding:0;display:block;flex:none;cursor:pointer}
[data-user]{cursor:pointer}
/* ---- full-screen pages ---- */
.vpage{position:fixed;inset:0;z-index:70;background:#f4f4f7;color:#1d1d1f;display:flex;flex-direction:column;max-width:520px;margin:0 auto;transform:translateX(100%);transition:transform .32s cubic-bezier(.2,.9,.25,1);box-shadow:-10px 0 30px #0002}
.vpage.open{transform:none}
.vp-bar{display:flex;align-items:center;gap:6px;padding:calc(8px + env(safe-area-inset-top)) 8px 8px;background:#fffffff0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid #ececf0;flex:none}
.vp-title{flex:1;text-align:center;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vp-ic{width:40px;height:40px;border:0;border-radius:50%;background:none;color:#1d1d1f;display:grid;place-items:center;flex:none}.vp-ic svg{width:23px;height:23px}.vp-ic:active{background:#0000000d}
.vp-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
.vp-hero{position:relative;background:#fff;padding:0 16px 16px;text-align:center;border-radius:0 0 26px 26px;box-shadow:0 6px 20px -14px #0003}
.vp-cover{height:96px;margin:0 -16px;background:radial-gradient(circle at 20% 0,#ffc58a,transparent 60%),linear-gradient(135deg,#ff9a3c,#ff5e3a 60%,#ff2d55);border-radius:0 0 26px 26px}
.vp-ava-wrap{width:104px;height:104px;margin:-52px auto 8px;border-radius:50%;padding:4px;background:linear-gradient(135deg,#ffb066,#ff2d55);box-shadow:0 10px 24px -10px #ff5e3a99;animation:vpFloat 4s ease-in-out infinite}
.vp-ava{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;display:block;background:#fff}
@keyframes vpFloat{50%{transform:translateY(-3px)}}
.vp-hero h2{margin:4px 0 2px;font-size:22px}.vp-status{margin:2px 0 6px;color:#6b6b72;font-size:14px}.vp-bio{margin:0 auto 8px;max-width:420px;color:#3c3c43;font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word}
.vp-chip{display:inline-block;background:#fff1e4;color:#c45a00;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px;margin:2px 0}
.vp-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:14px 0 4px;background:#f7f7f9;border-radius:18px;padding:10px 4px}
.vp-stats button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit;color:inherit;padding:2px 0;border-radius:12px}.vp-stats button:active{background:#0000000a}
.vp-stats b{font-size:19px}.vp-stats span{font-size:12px;color:#8e8e93}
.vp-acts{display:flex;gap:10px;margin-top:14px}
.vp-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:15px;padding:13px 10px;font:inherit;font-size:15px;font-weight:600;transition:transform .15s,opacity .2s}
.vp-btn svg{width:20px;height:20px}.vp-btn:active{transform:scale(.96)}.vp-btn.busy{opacity:.6;pointer-events:none}
.vp-pri{background:linear-gradient(135deg,#ff9a3c,#ff6a00);color:#fff;box-shadow:0 8px 20px -8px #ff6a00aa}
.vp-sec{background:#f1efed;color:#1d1d1f}.vp-sec[aria-disabled=true]{opacity:.55}
.vp-danger{background:#ffe9e8;color:#e5322d}
.vp-note{margin:10px 0 0;font-size:13px;color:#8e8e93}
.vp-tabhead{display:flex;align-items:center;justify-content:center;gap:8px;margin:16px 0 8px;font-weight:600;color:#6b6b72}.vp-tabhead svg{width:18px;height:18px}
.vp-posts .okcard{margin-left:10px;margin-right:10px}
.vp-empty{padding:30px 0}
.vp-rows{padding:8px 0}
.vp-row{display:flex;align-items:center;gap:10px;background:#fff;margin:0 10px 8px;padding:10px 12px;border-radius:16px;animation:cmIn .3s both}
.vp-row-who{flex:1;display:flex;align-items:center;gap:12px;border:0;background:none;font:inherit;color:inherit;text-align:left;min-width:0}
.vp-row-who b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vp-row-ava{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none}
.vp-mini{border:0;border-radius:12px;padding:8px 14px;font:inherit;font-size:13px;font-weight:600;background:#f1efed;color:#1d1d1f;flex:none}
.vp-mini.on{background:linear-gradient(135deg,#ff9a3c,#ff6a00);color:#fff}.vp-mini-d{background:#ffe9e8;color:#e5322d}
.vp-sheet{z-index:80}
/* ---- chat ---- */
.nvi{position:relative}.nv-badge{position:absolute;top:-6px;right:-10px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#ff2d55;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2px #fff;animation:likePop .4s}
.ch-start-h{margin:14px 16px 8px;font-size:13px;font-weight:600;color:#8e8e93;text-transform:uppercase;letter-spacing:.04em}
.ch-start{display:flex;gap:14px;overflow-x:auto;padding:0 16px 10px;scrollbar-width:none}
.ch-start button{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:6px;width:66px;font:inherit;font-size:12px;color:inherit}
.ch-start span{max-width:66px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ch-start-ava{width:60px;height:60px;border-radius:50%;object-fit:cover;padding:2px;background:linear-gradient(135deg,#ffb066,#ff2d55)}
.ch-row{display:flex;align-items:center;gap:12px;width:100%;border:0;background:#fff;padding:11px 14px;font:inherit;color:inherit;text-align:left;border-bottom:1px solid #f0f0f3;animation:cmIn .3s both}
.ch-row:active{background:#f7f5f3}
.ch-ava{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none}
.ch-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.ch-mid b{font-size:16px}
.ch-mid small{color:#8e8e93;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ch-mid em{font-style:normal;color:#b0b0b8}
.ch-row.unread .ch-mid small{color:#1d1d1f;font-weight:600}
.ch-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}.ch-side time{font-size:12px;color:#8e8e93}
.ch-side i{min-width:20px;height:20px;border-radius:10px;background:#ff7a00;color:#fff;font-size:11px;font-style:normal;font-weight:700;display:grid;place-items:center;padding:0 6px}
.ch-lock svg{width:15px;height:15px;color:#b0b0b8}
.ch-empty{padding:60px 30px}
.ch-who{flex:1;display:flex;align-items:center;justify-content:center;gap:9px;border:0;background:none;font:inherit;color:inherit;min-width:0}
.ch-who .vp-title{flex:none;max-width:60vw}.ch-hava{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block}
.vp-conv{background:linear-gradient(180deg,#fff7f0,#f4f4f7)}
.ch-msgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:12px 12px 8px;display:flex;flex-direction:column;gap:4px}
.ch-day{text-align:center;margin:10px 0 6px}.ch-day span{background:#0000000d;color:#6b6b72;font-size:12px;padding:4px 12px;border-radius:12px}
.ch-msg{max-width:78%;padding:8px 12px 6px;border-radius:20px;position:relative;animation:chIn .25s cubic-bezier(.2,.9,.3,1.2) both;box-shadow:0 1px 1px #0000000d}
.ch-msg p{margin:0;font-size:15.5px;line-height:1.38;white-space:pre-wrap;word-break:break-word}
.ch-msg.them{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.ch-msg.me{align-self:flex-end;background:linear-gradient(135deg,#ff9a3c,#ff6a00);color:#fff;border-bottom-right-radius:6px}
.ch-meta{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-size:11px;opacity:.7;margin-top:2px}
.ch-tk svg{width:15px;height:15px;display:block}.ch-tk.read{opacity:1;color:#fff}
@keyframes chIn{from{opacity:0;transform:translateY(6px) scale(.96)}}
.ch-input-bar{background:#fffffff2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.ch-locked{display:flex;align-items:center;gap:10px;background:#f1efed;border-radius:14px;padding:12px 14px;color:#6b6b72;font-size:14px}.ch-locked svg{width:20px;height:20px;flex:none}
.ch-locked[hidden],.cm-input[hidden]{display:none}
html.dark .vpage{background:#0f1014;color:#e9eaee}
html.dark .vp-bar,html.dark .ch-input-bar{background:#16171cf0;border-color:#24252c}
html.dark .vp-ic{color:#e9eaee}
html.dark .vp-hero,html.dark .vp-row,html.dark .ch-row{background:#1b1c22;border-color:#24252c}html.dark .vp-bio{color:#c9cbd3}
html.dark .vp-ava{border-color:#1b1c22}
html.dark .vp-stats{background:#24252c}html.dark .vp-sec,html.dark .vp-mini,html.dark .ch-locked{background:#2a2b33;color:#e9eaee}
html.dark .vp-conv{background:linear-gradient(180deg,#1a140f,#0f1014)}
html.dark .ch-msg.them{background:#24252c}html.dark .ch-row.unread .ch-mid small{color:#fff}
html.dark .ch-day span{background:#ffffff14;color:#b0b0b8}
html.dark .nv-badge{box-shadow:0 0 0 2px #16171c}
html.dark .vp-chip{background:#3a2412;color:#ffb066}
/* ---- fullscreen game / live-rooms frame ---- */
.gframe{position:fixed;inset:0;z-index:9000;background:#000;opacity:0;transition:opacity .22s ease}
.gframe.open{opacity:1}
.gframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.gframe-back{position:absolute;top:14px;left:14px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:#ffffffee;color:#1a120b;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px -4px #0008;cursor:pointer}
.gframe-back svg{width:22px;height:22px}
.gframe-back:active{transform:scale(.92)}
html.dark .gframe-back{background:#2a2b33ee;color:#e9eaee}

/* login method tabs */
.auth.vkid .auth-tabs{display:flex;gap:4px;padding:4px;margin:0 0 12px;border-radius:14px;background:color-mix(in srgb,currentColor 7%,transparent)}
.auth.vkid .auth-tabs button{flex:1;border:0;background:transparent;color:inherit;opacity:.65;font:600 14px/1 system-ui,sans-serif;padding:11px 8px;border-radius:10px;cursor:pointer;transition:background .25s,opacity .25s,box-shadow .25s}
.auth.vkid .auth-tabs button.on{opacity:1;background:var(--card,#fff);box-shadow:0 2px 10px rgba(0,0,0,.12)}
html.dark .auth.vkid .auth-tabs button.on{background:#2a2d33}
.auth.vkid .field-hint{display:block;margin:-4px 2px 8px;font-size:12px;opacity:.6}

/* profile: keep every section reachable */
dialog.acc-modal .acc{height:100dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
dialog.acc-modal .acc>*{flex-shrink:0}
.acc-out{margin:16px 16px calc(18px + env(safe-area-inset-bottom))!important}
.acc-ph-form{display:flex;flex-direction:column;gap:8px}
.acc-ph-form .phone-field{display:flex;gap:6px}.acc-ph-form .phone-field input{flex:1;min-width:0}
.acc-ph-form input{padding:12px;border-radius:12px;border:1px solid #e3e4e8;font-size:15px}
dialog.legal-modal{padding:0;border:0;width:100vw;max-width:560px;height:100dvh;max-height:100dvh;margin:0 auto;border-radius:0;overflow:hidden;background:#fff}
.legal{display:flex;flex-direction:column;height:100dvh}
.legal-top{padding:16px 56px;text-align:center;font-weight:800;border-bottom:1px solid #eee}
.legal iframe{flex:1;width:100%;border:0;background:#fff}
dialog.legal-modal #close-modal{position:absolute!important;top:8px!important;left:10px!important;right:auto!important;z-index:3}

.vfacc-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:12px 0 4px;padding:12px 14px;border-radius:14px;border:1.5px solid #ff8a00;background:#fff7ee;color:#c25e00;font-weight:800;font-size:14.5px;cursor:pointer}
.vfacc-btn img{width:26px;height:26px;border-radius:50%}
.vfacc-btn:active{transform:scale(.97)}
.vfold{text-align:center;padding:8px 4px}.vfold img{width:64px;height:64px;border-radius:50%}
.vfold h2{margin:8px 0 4px}.vfold p{font-size:13.5px;color:#666;margin:0 0 12px}
.vfold form{display:flex;flex-direction:column;gap:10px}.vfold input{padding:13px;border-radius:12px;border:1px solid #e3e4e8;font-size:15px}
html.dark .vfacc-btn{background:#2a1c0e;color:#ffb35c}
.tg-login{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;padding:13px 16px;border:0;border-radius:14px;background:linear-gradient(135deg,#2aabee,#229ed9);color:#fff;font:600 15px/1.2 inherit;box-shadow:0 8px 22px -10px #229ed9;cursor:pointer;transition:transform .15s ease,filter .15s ease}
.tg-login svg{width:20px;height:20px}
.tg-login:active{transform:scale(.97);filter:brightness(.95)}
#tg-id,#tg-code{display:grid;gap:10px}
#tg-bot{text-align:center;color:#229ed9}

.vfpost-staffdel{color:#e5322d}.vfpost-staffdel svg{width:20px;height:20px}

.oktopi{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border-bottom:1px solid #ecebe9;position:relative;z-index:5}
.oktopi button{position:relative;background:none;border:0;padding:6px;color:#8a8a8f;cursor:pointer;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.oktopi>button{color:#333}.oktopi svg{width:28px;height:28px}.oktopi-mid{display:flex;gap:18px}
.oktopi button:active{transform:scale(.92)}
.oktopi-badge{position:absolute;top:0;right:-6px;width:auto;min-width:19px;height:19px;padding:0 4px;box-sizing:border-box;line-height:19px;border-radius:10px;display:block!important;text-align:center;background:#26b14b;color:#fff;font-size:11px;font-style:normal;font-weight:700;box-shadow:0 0 0 2px #fff}
.oktopi-search{padding:8px 14px;background:#fff;border-bottom:1px solid #ecebe9}.oktopi-search input{width:100%;box-sizing:border-box;border:1px solid #e3e2e0;border-radius:18px;padding:9px 14px;font-size:15px;background:#f6f5f3;color:inherit}
@media(max-width:380px){.oktopi-mid{gap:10px}.oktopi svg{width:26px;height:26px}}
html.dark .oktopi,html.dark .oktopi-search{background:#16171c;border-color:#2a2b33}html.dark .oktopi>button{color:#e8e8ea}html.dark .oktopi button{color:#a3a3ab}html.dark .oktopi-search input{background:#202128;border-color:#2a2b33}html.dark .oktopi-badge{box-shadow:0 0 0 2px #16171c}

.okadd-row{padding:16px 16px 8px;background:transparent}
.okadd{display:flex;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;width:72px;-webkit-tap-highlight-color:transparent}
.okadd i{width:64px;height:64px;border-radius:50%;background:#ebe7e3;color:#2b2b2b;display:grid;place-items:center;transition:transform .2s}
.okadd i svg{width:30px;height:30px}.okadd:active i{transform:scale(.92)}
.okadd span{font-size:15px;color:#2b2b2b}
html.dark .okadd i{background:#2a2b33;color:#e9eaee}html.dark .okadd span{color:#e9eaee}