.vw { padding: 96px 0 40px; }
.vw-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }

/* macOS Safari oynasi (yangi, ikki qatorli asboblar paneli) */
.vw .wrap { max-width: 1180px; }
.sf-win { border-radius: 26px; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.14), 0 30px 70px -14px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.1); }
.sf-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px 8px; background: #fff; }
html[data-theme="dark"] .sf-win, html[data-theme="dark"] .sf-bar { background: #1e1e20; }
.sf-lights { display: flex; gap: 8px; padding-right: 8px; flex: none; }
.sf-lights a, .sf-lights i { width: 13px; height: 13px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); }
.sf-lights .r { background: #ff5f57; } .sf-lights .y { background: #febc2e; } .sf-lights .g { background: #28c840; }
.sf-lights a:hover::after { content: '\00d7'; display: grid; place-items: center; height: 13px; font-size: 12px; line-height: 13px; color: rgba(80,0,0,.7); font-weight: 700; }
.sf-pill { display: inline-flex; align-items: center; height: 40px; border-radius: 999px; background: #fff; color: #2c2c2e; box-shadow: 0 2px 8px rgba(0,0,0,.1), 0 0 0 .5px rgba(0,0,0,.06); flex: none; }
html[data-theme="dark"] .sf-pill { background: #3a3a3d; color: #eee; }
.sf-grp { padding: 0 6px; gap: 2px; }
.sf-ic { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border: 0; background: transparent; color: inherit; border-radius: 999px; cursor: pointer; text-decoration: none; padding: 0; }
.sf-ic.sm { min-width: 26px; } .sf-ic.dim { opacity: .35; cursor: default; }
a.sf-ic:active, button.sf-ic:active { background: rgba(120,120,128,.18); }
.sf-sep { width: 1px; height: 18px; background: rgba(60,60,67,.25); }
.sf-addr { flex: 1; justify-content: space-between; padding: 0 10px; min-width: 0; font-weight: 500; font-size: .92rem; }
.sf-addr #vwHost { flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-urlrow { padding: 4px 18px 12px; background: #fff; }
html[data-theme="dark"] .sf-urlrow { background: #1e1e20; }
.sf-url { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 999px; border: 1px solid rgba(60,60,67,.22); background: #fafafa; font-size: .85rem; color: #2c2c2e; overflow: hidden; padding: 0 14px; }
html[data-theme="dark"] .sf-url { background: #2a2a2d; color: #eee; border-color: rgba(255,255,255,.14); }
.sf-url img { flex: none; } .sf-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-tab { display: none; }
.vw-frame { position: relative; height: calc(100vh - 230px); min-height: 520px; background: #fff; }
.vw-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.vw-load { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; gap: 8px; background: #fff; z-index: 1; }
.vw-load span { width: 10px; height: 10px; border-radius: 50%; background: #0088ff; animation: vwDot 1s infinite ease-in-out; }
.vw-load span:nth-child(2) { animation-delay: .15s; } .vw-load span:nth-child(3) { animation-delay: .3s; }
@keyframes vwDot { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }
.vw-note { color: var(--muted); font-size: .8rem; margin: 14px 4px 0; text-align: center; }
.vw-err { padding: 40px; text-align: center; }
@media (max-width: 760px) { .vw { padding-top: 78px; } .sf-win { border-radius: 18px; } .sf-bar { gap: 8px; padding: 12px 12px 6px; flex-wrap: nowrap; } .sf-lights, .sf-bar .sf-grp:nth-of-type(1), .sf-bar .sf-grp:nth-of-type(3) { display: none; } .sf-urlrow { padding: 4px 12px 10px; } .vw-frame { height: calc(100vh - 240px); } }

/* faqat Safari oynasi: butun sahifa */
body.vwp { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 28px; box-sizing: border-box; background: radial-gradient(1200px 700px at 15% 10%, #d9c9a8 0%, transparent 60%), radial-gradient(1000px 700px at 90% 90%, #8e8aa8 0%, transparent 60%), linear-gradient(135deg, #b9a98a, #6f6a86); font-family: Inter, -apple-system, system-ui, sans-serif; }
html[data-theme="dark"] body.vwp { background: radial-gradient(1200px 700px at 15% 10%, #3a3050 0%, transparent 60%), radial-gradient(1000px 700px at 90% 90%, #1d2a4a 0%, transparent 60%), linear-gradient(135deg, #1a1626, #0d1020); }
.vwp .sf-win { width: min(1240px, 100%); height: calc(100vh - 56px); display: flex; flex-direction: column; }
.vwp .vw-frame { flex: 1; height: auto; min-height: 0; }
.vwp .sf-bar, .vwp .sf-urlrow { flex: none; }
@media (max-width: 760px) { body.vwp { padding: 0; } .vwp .sf-win { height: 100vh; border-radius: 0; } .sf-bar { padding-top: max(12px, env(safe-area-inset-top)); } }

/* maqola ko'rinishi (faqat matn va rasm) */
.vwp .vw-frame { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.vw-art { max-width: 760px; margin: 0 auto; padding: 36px 24px 56px; color: #1d1d1f; }
html[data-theme="dark"] .vw-art { color: #f2f2f7; }
.vw-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: .78rem; color: #6e6e73; }
.vw-badge { background: #0b3fa8; color: #fff; font-weight: 700; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.vw-art h1 { font-family: 'Source Serif 4', Georgia, serif; font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 22px; text-transform: uppercase; }
.vw-hero { width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 22px; display: block; margin-bottom: 26px; box-shadow: 0 14px 40px rgba(0,0,0,.18); }
.vw-body p { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.12rem; line-height: 1.75; margin: 0 0 1.1em; }
.vw-by { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(60,60,67,.18); font-size: .9rem; color: #6e6e73; line-height: 1.6; }
.vw-by div:first-child { font-weight: 700; color: inherit; }
.vw-src { margin-top: 30px; padding: 16px 18px; border-radius: 16px; background: rgba(120,120,128,.1); font-size: .88rem; }
.vw-src a { color: #0088ff; font-weight: 600; text-decoration: none; }
.vw-src span { display: block; color: #6e6e73; margin-top: 4px; font-size: .8rem; }

.vw-tr { margin-top: 10px; font-size: .85rem; font-style: italic; color: #6e6e73; }

/* orqa fon: tog' illyustratsiyasi */
body.vwp, html[data-theme="dark"] body.vwp { background: #5b8db0 url("images/bg-mountain.webp") center / cover no-repeat fixed; }
html[data-theme="dark"] body.vwp::before { content: ''; position: fixed; inset: 0; background: rgba(8,12,28,.45); pointer-events: none; }
html[data-theme="dark"] body.vwp .sf-win { position: relative; }

/* o'qish tili almashtirgichi: maqola sahifalaridagi bilan bir xil (styles.css dan) */
/* ---------- O'QISH TILI (UZ / EN) ----------
   Faqat tanlangan tildagi blok ko'rinadi; almashtirgich read-lang.js'da.
   Ko'rinish: iOS 26 segmentli boshqaruvi — shisha kapsula yo'lak, ustida oq
   "suzuvchi" tanlov; bosilganda tanlov shaffof shisha linzaga aylanadi. */
html:not([data-read="en"]) [data-lang="en"],
html[data-read="en"] [data-lang="uz"] { display: none !important; }

.rl-dock {
  --rl-track: rgba(242,242,247,0.72);
  --rl-hair: rgba(0,0,0,0.06);
  --rl-thumb: #fff;
  --rl-text: #000;
  --rl-text-dim: rgba(60,60,67,0.72);
  position: fixed; right: 24px; bottom: 24px; z-index: 60;
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 3px; border-radius: 999px;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--rl-track);
  -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  box-shadow:
    inset 0 0 0 0.5px var(--rl-hair),
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 12px 40px -10px rgba(0,0,0,0.25),
    0 2px 8px rgba(0,0,0,0.06);
  touch-action: none; user-select: none; -webkit-user-select: none;
  transform: translateY(160%); opacity: 0;
  transition: transform .8s cubic-bezier(.22,1.3,.36,1), opacity .4s ease;
}
.rl-dock.in { transform: none; opacity: 1; }

.rl-dock button {
  position: relative; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-width: 112px; height: 36px; padding: 0 16px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: -0.015em;
  color: var(--rl-text-dim);
  transition: color .3s ease;
}
.rl-dock button[aria-checked="true"] { color: var(--rl-text); font-weight: 600; }
.rl-dock button:focus-visible { outline: 2px solid #0088ff; outline-offset: 1px; }
.rl-dock button img { width: 18px; height: 18px; display: block; transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.rl-dock button[aria-checked="true"] img { transform: scale(1.08); }

/* Oq tanlov (iOS: 0 3px 8px / 0 3px 1px soyalar) */
.rl-thumb {
  position: absolute; z-index: 1; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  transition: transform .55s cubic-bezier(.34,1.45,.64,1);
  will-change: transform;
}
.rl-thumb-in {
  display: block; width: 100%; height: 100%; border-radius: 999px;
  background: var(--rl-thumb);
  box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04), 0 0 0 0.5px rgba(0,0,0,0.04);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), background-color .25s ease, box-shadow .25s ease,
              -webkit-backdrop-filter .25s ease, backdrop-filter .25s ease;
}
.rl-dock[data-pos="en"] .rl-thumb { transform: translateX(100%); }
.rl-dock.dragging .rl-thumb { transition: none; }

/* Bosilgan holat: shisha linza */
.rl-dock.pressing .rl-thumb-in {
  transform: scale(1.12, 1.22);
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.6) brightness(1.08); backdrop-filter: blur(1.5px) saturate(1.6) brightness(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.85),
    inset 0 1px 6px rgba(255,255,255,0.6),
    inset 0 -2px 6px rgba(0,0,0,0.06),
    0 10px 24px -6px rgba(0,0,0,0.25);
}

html[data-theme="dark"] .rl-dock {
  --rl-track: rgba(44,44,46,0.72);
  --rl-hair: rgba(255,255,255,0.08);
  --rl-thumb: #636366;
  --rl-text: #fff;
  --rl-text-dim: rgba(235,235,245,0.6);
  box-shadow: inset 0 0 0 0.5px var(--rl-hair), inset 0 1px 0 rgba(255,255,255,0.08), 0 12px 40px -10px rgba(0,0,0,0.7);
}
html[data-theme="dark"] .rl-dock.pressing .rl-thumb-in { background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35), 0 10px 24px -6px rgba(0,0,0,0.6); }

@media (max-width: 640px) {
  .rl-dock { left: 16px; right: 16px; bottom: 16px; width: max-content; margin: 0 auto; }
  .rl-dock button { min-width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  .rl-dock, .rl-thumb, .rl-thumb-in, .rl-dock button img { transition: none; }
}


/* oddiy maqolalar: Safari oynasi ichida */
body.mw { display: flex; align-items: center; justify-content: center; font-family: Inter, -apple-system, system-ui, sans-serif; }
.mw .mw-scroll { background: var(--paper, #f7f4ee); color: var(--ink, #16181d); }
html[data-theme="dark"] .mw .mw-scroll { background: #121316; color: #edebe6; }
.mw .mw-scroll .mq-article-head { padding-top: 56px; }
.sf-ic.ok { color: #34c759; }

/* ===== Safari oynasi: real macOS kabi xatti-harakat (safari.js) ===== */
/* art fon */
body.vwp.has-art { background: #6f8fb0 !important; }
.mw-bg { position: fixed; inset: 0; z-index: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 2.2s ease; pointer-events: none; transform: scale(1.04); }
.mw-bg.on { opacity: 1; animation: mwDrift 22s ease-in-out both; }
@keyframes mwDrift { from { transform: scale(1.08) translate3d(0, 0, 0); } to { transform: scale(1.02) translate3d(-1%, -.5%, 0); } }
html[data-theme="dark"] body.vwp::before { z-index: 1; }
.vwp .sf-win { position: relative; z-index: 2; transition: width .45s cubic-bezier(.32,.72,0,1), height .45s cubic-bezier(.32,.72,0,1), border-radius .45s cubic-bezier(.32,.72,0,1), margin .45s cubic-bezier(.32,.72,0,1), transform .5s cubic-bezier(.32,.72,0,1), opacity .4s ease; }
.vwp .rl-dock { z-index: 60; }

/* ochilish / yopilish */
.sf-win.sf-open { animation: sfOpen .55s cubic-bezier(.2,.9,.25,1.05) both; }
@keyframes sfOpen { from { opacity: 0; transform: scale(.93) translateY(18px); } to { opacity: 1; transform: none; } }
.sf-win.sf-closing { transform: scale(.9) !important; opacity: 0 !important; transition: transform .26s cubic-bezier(.4,0,1,1), opacity .22s ease !important; }

/* yig'ish (minimize) va Dock belgisi */
.sf-win.sf-min { transform: translateY(70vh) scale(.06, .02); opacity: 0; pointer-events: none; transition: transform .55s cubic-bezier(.55,.05,.35,1), opacity .45s ease .1s; }
.mw-dockicon { position: fixed; left: 50%; bottom: 18px; z-index: 70; display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; border: 0; border-radius: 22px; font: 600 .85rem Inter, system-ui, sans-serif; color: #1d1d1f; background: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(22px) saturate(1.8); backdrop-filter: blur(22px) saturate(1.8); box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 0 0 .5px rgba(255,255,255,.7); cursor: pointer; transform: translate(-50%, 140%); transition: transform .5s cubic-bezier(.2,.9,.25,1.1); max-width: 80vw; }
.mw-dockicon.in { transform: translate(-50%, 0); }
.mw-dockicon:hover .mw-dockapp { transform: translateY(-4px) scale(1.08); }
.mw-dockapp { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(160deg, #4fb3ff, #0a64ff); box-shadow: 0 4px 10px rgba(0,80,255,.35); transition: transform .25s cubic-bezier(.3,1.5,.5,1); flex: none; }
.mw-dockicon > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* to'liq ekran */
.vwp .sf-win.sf-full { width: 100vw !important; height: 100vh !important; border-radius: 0 !important; margin: -28px; }

/* svetofor: guruhga olib borilganda belgilar ko'rinadi */
.sf-lights a, .sf-lights i { position: relative; cursor: pointer; transition: filter .15s; }
.sf-lights a:hover::after { content: none; }
.sf-lights a::before, .sf-lights i::before { position: absolute; inset: 0; display: grid; place-items: center; font: 700 10px/13px -apple-system, system-ui, sans-serif; color: rgba(0,0,0,.55); opacity: 0; transition: opacity .12s; }
.sf-lights .r::before { content: '\00d7'; font-size: 12px; }
.sf-lights .y::before { content: '\2212'; }
.sf-lights .g::before { content: '+'; }
.sf-lights:hover a::before, .sf-lights:hover i::before { opacity: 1; }
.sf-lights a:active, .sf-lights i:active { filter: brightness(.82); }

/* tugmalar bosilganda */
.sf-ic { transition: transform .15s ease, background .15s ease; }
.sf-ic:active { transform: scale(.88); }
.sf-grp[role=button]:active { transform: scale(.96); }
.sf-ic.spin svg { animation: mwSpin .6s cubic-bezier(.3,.6,.3,1); }
@keyframes mwSpin { to { transform: rotate(360deg); } }
.sf-addr { cursor: pointer; transition: box-shadow .2s ease, background .2s ease; }
.sf-addr.focus { box-shadow: 0 0 0 3px rgba(0,136,255,.35), 0 2px 8px rgba(0,0,0,.1); }

/* manzil qatori yig'ilishi */
.sf-urlrow { max-height: 70px; overflow: hidden; transition: max-height .35s cubic-bezier(.32,.72,0,1), padding .35s cubic-bezier(.32,.72,0,1), opacity .25s ease; }
.sf-win.compact .sf-urlrow { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; }

/* bildirishnoma */
.mw-toast { position: absolute; left: 50%; top: 118px; z-index: 30; transform: translate(-50%, -8px); opacity: 0; padding: 9px 16px; border-radius: 999px; font: 600 .82rem Inter, system-ui, sans-serif; color: #fff; background: rgba(30,30,32,.86); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: none; transition: opacity .2s ease, transform .3s cubic-bezier(.2,.9,.25,1.1); }
.mw-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* popover (tarix) */
.mw-pop { position: absolute; z-index: 40; width: 300px; max-height: 60vh; overflow: auto; padding: 8px; border-radius: 16px; background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(24px) saturate(1.8); backdrop-filter: blur(24px) saturate(1.8); box-shadow: 0 18px 50px rgba(0,0,0,.22), inset 0 0 0 .5px rgba(0,0,0,.08); transform-origin: 30px -10px; transform: scale(.9); opacity: 0; transition: transform .28s cubic-bezier(.2,.9,.25,1.1), opacity .18s ease; font-family: Inter, system-ui, sans-serif; }
html[data-theme="dark"] .mw-pop { background: rgba(44,44,46,.85); color: #f2f2f7; }
.mw-pop.on { transform: none; opacity: 1; }
.mw-pop h4 { margin: 6px 10px 8px; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #8e8e93; }
.mw-pop a { display: block; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: inherit; }
.mw-pop a:hover { background: rgba(0,136,255,.12); }
.mw-pop a b { display: block; font-size: .88rem; font-weight: 600; color: #1d1d1f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="dark"] .mw-pop a b { color: #f2f2f7; }
.mw-pop a span { font-size: .74rem; color: #8e8e93; }
.mw-pop p { margin: 10px; color: #8e8e93; font-size: .85rem; }
.mw-clear { width: calc(100% - 8px); margin: 6px 4px 2px; padding: 9px; border: 0; border-radius: 10px; background: rgba(255,59,48,.1); color: #ff3b30; font: 600 .82rem Inter, system-ui, sans-serif; cursor: pointer; }

/* yon panel */
.sf-bar { position: relative; z-index: 6; }
.sf-urlrow { position: relative; z-index: 6; }
.mw-side { position: absolute; z-index: 5; left: 0; top: 0; bottom: 0; width: 300px; padding: 116px 10px 14px; box-sizing: border-box; display: flex; flex-direction: column; background: rgba(246,246,248,.88); -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8); box-shadow: 1px 0 0 rgba(0,0,0,.08), 12px 0 40px rgba(0,0,0,.12); transform: translateX(-104%); transition: transform .42s cubic-bezier(.32,.72,0,1); font-family: Inter, system-ui, sans-serif; }
html[data-theme="dark"] .mw-side { background: rgba(36,36,38,.9); color: #f2f2f7; }
.sf-win.side-on .mw-side { transform: none; }
.sf-win.compact .mw-side { padding-top: 70px; }
.mw-side-h { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8e8e93; margin: 0 8px 8px; }
.mw-side-list { overflow-y: auto; display: grid; gap: 2px; }
.mw-side-list a { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center; padding: 7px; border-radius: 10px; text-decoration: none; color: inherit; transition: background .15s; }
.mw-side-list a:hover { background: rgba(120,120,128,.14); }
.mw-side-list a.on { background: rgba(0,136,255,.16); }
.mw-side-list img, .mw-noimg { width: 52px; height: 38px; object-fit: cover; border-radius: 7px; display: block; background: repeating-conic-gradient(#e9e2d0 0 25%, #6b4f3a 0 50%) 0 0 / 13px 13px; }
.mw-side-list b { display: block; font-size: .8rem; line-height: 1.25; font-weight: 600; color: #1d1d1f; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-theme="dark"] .mw-side-list b { color: #f2f2f7; }
.mw-side-list em { font-style: normal; font-size: .68rem; color: #8e8e93; }
.mw-side-load { color: #8e8e93; font-size: .85rem; margin: 8px; }
@media (max-width: 760px) { .mw-side { width: 86%; padding-top: 104px; } .mw-toast { top: 100px; } }
@media (prefers-reduced-motion: reduce) { .mw-bg.on { animation: none; } .sf-win, .mw-side, .mw-pop, .mw-dockicon { transition: none !important; animation: none !important; } }
body:has(.sf-win.sf-min) .rl-dock { opacity: 0 !important; pointer-events: none; }

/* ===== Genie, Dock va Liquid Glass (macOS 26/27 uslubi) ===== */
.sf-win.sf-min { visibility: hidden; opacity: 0; transition: none !important; transform: none; }
.mw-genie { position: fixed; inset: 0; z-index: 65; pointer-events: none; }
.mw-genie .sf-win { box-shadow: none !important; }

/* Dock: shisha panel va ilova belgisi */
.mw-dockicon { bottom: 10px; padding: 7px 9px; gap: 0; border-radius: 24px; background: rgba(255,255,255,.28); -webkit-backdrop-filter: blur(24px) saturate(1.9) brightness(1.08); backdrop-filter: blur(24px) saturate(1.9) brightness(1.08); box-shadow: inset 0 1px 1px rgba(255,255,255,.85), inset 0 0 0 .5px rgba(255,255,255,.55), 0 12px 34px rgba(0,0,0,.28); overflow: visible; transform: translate(-50%, 160%); }
.mw-dockicon.in { transform: translate(-50%, 0); }
.mw-dockapp { width: 54px; height: 54px; border-radius: 0; background: none; box-shadow: none; position: relative; }
.mw-dockapp img { width: 54px; height: 54px; display: block; filter: drop-shadow(0 4px 6px rgba(0,0,0,.25)); }
.mw-dockicon.ready .mw-dockapp::after { content: ''; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0,0,0,.55); }
.mw-dockicon:hover .mw-dockapp { transform: translateY(-8px) scale(1.18); }
.mw-docktitle { position: absolute; left: 50%; bottom: calc(100% + 16px); transform: translateX(-50%); padding: 5px 12px; border-radius: 10px; font-size: .78rem; color: #1d1d1f; background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 6px 18px rgba(0,0,0,.2); white-space: nowrap; max-width: 70vw; overflow: hidden; text-overflow: ellipsis; opacity: 0; pointer-events: none; transition: opacity .15s; }
.mw-dockicon:hover .mw-docktitle { opacity: 1; }

/* Liquid Glass: asboblar paneli kontent ustida suzadi, kontent ostidan o'tadi */
.vwp .sf-win { background: #fff; }
html[data-theme="dark"] .vwp .sf-win { background: #1e1e20; }
.vwp .sf-bar { position: absolute; top: 0; left: 0; right: 0; background: transparent !important; padding: 14px 16px 6px; z-index: 6; pointer-events: none; }
.vwp .sf-bar > * { pointer-events: auto; }
.vwp .sf-urlrow { position: absolute; top: 60px; left: 0; right: 0; background: transparent !important; padding: 2px 16px 10px; z-index: 6; pointer-events: none; }
.vwp .sf-urlrow > * { pointer-events: auto; }
.vwp .sf-win .vw-frame { padding-top: 108px; box-sizing: border-box; }
.vwp .sf-win::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 118px; z-index: 5; pointer-events: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 45%, transparent); mask-image: linear-gradient(#000 45%, transparent); background: linear-gradient(rgba(255,255,255,.6), rgba(255,255,255,0)); transition: height .35s cubic-bezier(.32,.72,0,1); }
html[data-theme="dark"] .vwp .sf-win::after { background: linear-gradient(rgba(30,30,32,.6), rgba(30,30,32,0)); }
.vwp .sf-win.compact::after { height: 70px; }
.vwp .sf-pill, .vwp .sf-url {
  background: rgba(255,255,255,.38);
  -webkit-backdrop-filter: blur(14px) saturate(2) brightness(1.06); backdrop-filter: blur(14px) saturate(2) brightness(1.06);
  border: 0;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.95), inset 0 -1px 1px rgba(255,255,255,.35), inset 0 0 0 .5px rgba(255,255,255,.6), 0 6px 18px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.07);
  transition: transform .35s cubic-bezier(.3,1.5,.5,1), box-shadow .2s ease, background .2s ease;
}
html[data-theme="dark"] .vwp .sf-pill, html[data-theme="dark"] .vwp .sf-url { background: rgba(60,60,66,.42); box-shadow: inset 0 1px 1px rgba(255,255,255,.22), inset 0 0 0 .5px rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.4); }
.vwp .sf-pill:active { transform: scale(1.05); }
.vwp .sf-url { height: 34px; }
.vwp .sf-win .mw-side { padding-top: 116px; }
@media (max-width: 760px) { .vwp .sf-urlrow { top: 56px; padding: 2px 10px 8px; } .vwp .sf-bar { padding: max(10px, env(safe-area-inset-top)) 10px 6px; } .vwp .sf-win .vw-frame { padding-top: 100px; } }
canvas.mw-genie { position: fixed; left: 0; top: 0; z-index: 65; pointer-events: none; visibility: hidden; }

/* Dock: macOS ilova belgisi (squircle, shaffof burchaklar, kulrang ramkasiz) */
.mw-dockicon { padding: 6px 8px 9px; border-radius: 20px; }
.mw-dockapp { width: 52px; height: 52px; border-radius: 23%; overflow: hidden; background: #fff; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.28); transform-origin: 50% 100%; transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.mw-dockapp img { width: 100%; height: 100%; display: block; filter: none; transform: scale(1.02); }
.mw-dockicon.ready .mw-dockapp::after { content: none; }
.mw-dockicon.ready::after { content: ''; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0,0,0,.6); }
html[data-theme="dark"] .mw-dockicon.ready::after { background: rgba(255,255,255,.8); }
/* Clear glass: panel ostidagi blur olib tashlandi, faqat juda yengil soya qoldi */
.vwp .sf-win::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(rgba(255,255,255,.28), rgba(255,255,255,0)); height: 90px; }
html[data-theme="dark"] .vwp .sf-win::after { background: linear-gradient(rgba(20,20,22,.3), rgba(20,20,22,0)); }

/* Qorong'i rejim: hamkor maqola oynasining ichi ham qorong'i bo'lsin (avval oq qolib, matn o'qilmasdi) */
html[data-theme="dark"] .vw-frame, html[data-theme="dark"] .vwp .vw-frame, html[data-theme="dark"] .vw-load { background: #1c1c1e; }
html[data-theme="dark"] .vw-art { color: #f2f2f7; }
html[data-theme="dark"] .vw-meta, html[data-theme="dark"] .vw-by, html[data-theme="dark"] .vw-src span { color: #a1a1a6; }
html[data-theme="dark"] .vw-by { border-top-color: rgba(255,255,255,.14); }
html[data-theme="dark"] .vw-src { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .vw-src a { color: #64b5ff; }
html[data-theme="dark"] .vw-err { color: #f2f2f7; }