/* ============================================
   BLATNOYLOL — VK 2010-2012 + TYURYAGA
   Реконструкция олдового ВКонтакте (~2010-2011)
   ============================================ */

/* ---------- RESET ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
a { color: #2b587a; text-decoration: none; }
a:hover { text-decoration: underline; color: #ff0000; }
img { display: block; }

/* ============================================
   ICONS (inline SVG via background-image)
   Все иконки в стиле VK 2010 (синие, монохром)
   и Тюряги (золото/коричневый).
   ============================================ */
.ico {
    display: inline-block;
    width: 12px; height: 12px;
    background: no-repeat center / contain;
    vertical-align: -1px;
    flex-shrink: 0;
}
.ico-14 { width: 14px; height: 14px; }
.ico-16 { width: 16px; height: 16px; vertical-align: -3px; }
.ico-18 { width: 18px; height: 18px; vertical-align: -4px; }
.ico-22 { width: 22px; height: 22px; vertical-align: -5px; }
.ico-32 { width: 32px; height: 32px; }
.ico-48 { width: 48px; height: 48px; }

/* === Search loupe (gray) === */
.ico-search { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><circle cx='5' cy='5' r='3.5' stroke='%23999' fill='none' stroke-width='1.5'/><line x1='8' y1='8' x2='11' y2='11' stroke='%23999' stroke-width='1.5'/></svg>"); }

/* === Check (verified VK) === */
.ico-check { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 8 L6 12 L14 3' stroke='%235b7ca0' fill='none' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }

/* === Camera (photos) === */
.ico-camera { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='4' width='14' height='10' rx='1' fill='%235b7ca0'/><rect x='5' y='2' width='6' height='3' fill='%235b7ca0'/><circle cx='8' cy='9' r='3' fill='%23dae2ea'/><circle cx='8' cy='9' r='1.5' fill='%235b7ca0'/></svg>"); }

/* === Video / Film === */
.ico-video { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='3' width='11' height='10' fill='%235b7ca0'/><polygon points='12,6 15,3 15,13 12,10' fill='%235b7ca0'/></svg>"); }

/* === Music note === */
.ico-music { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6 12 a2 2 0 1 1 2 -2 V3 L13 2 V10 a2 2 0 1 1 2 -2' fill='none' stroke='%235b7ca0' stroke-width='1.5'/><circle cx='6' cy='12' r='2' fill='%235b7ca0'/><circle cx='13' cy='10' r='2' fill='%235b7ca0'/></svg>"); }

/* === Envelope === */
.ico-mail { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='3' width='14' height='10' fill='%235b7ca0'/><polyline points='1,3 8,9 15,3' fill='none' stroke='%23fff' stroke-width='1.5'/></svg>"); }

/* === Users (friends) === */
.ico-users { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='5' cy='5' r='2.5' fill='%235b7ca0'/><path d='M1 13 a4 4 0 0 1 8 0 Z' fill='%235b7ca0'/><circle cx='11' cy='5.5' r='2' fill='%235b7ca0'/><path d='M8 13 a4 4 0 0 1 7 0 Z' fill='%235b7ca0'/></svg>"); }

/* === Group / Building === */
.ico-group { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='3' width='12' height='11' fill='%235b7ca0'/><rect x='4' y='5' width='2' height='2' fill='%23fff'/><rect x='7' y='5' width='2' height='2' fill='%23fff'/><rect x='10' y='5' width='2' height='2' fill='%23fff'/><rect x='4' y='9' width='2' height='2' fill='%23fff'/><rect x='7' y='9' width='2' height='3' fill='%23fff'/><rect x='10' y='9' width='2' height='2' fill='%23fff'/></svg>"); }

/* === Note (pencil) === */
.ico-note { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 12 L2 14 L4 14 L13 5 L11 3 Z' fill='%235b7ca0'/><path d='M11 3 L13 5' stroke='%23fff' stroke-width='1'/></svg>"); }

/* === Pin / Map === */
.ico-pin { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 1 a5 5 0 0 0 -5 5 c0 4 5 9 5 9 s5 -5 5 -9 a5 5 0 0 0 -5 -5 Z' fill='%235b7ca0'/><circle cx='8' cy='6' r='2' fill='%23fff'/></svg>"); }

/* === Calendar (events) === */
.ico-calendar { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='3' width='14' height='11' fill='%235b7ca0'/><rect x='1' y='3' width='14' height='3' fill='%23375f88'/><rect x='3' y='8' width='2' height='2' fill='%23fff'/><rect x='6' y='8' width='2' height='2' fill='%23fff'/><rect x='9' y='8' width='2' height='2' fill='%23fff'/><rect x='12' y='8' width='2' height='2' fill='%23fff'/></svg>"); }

/* === Star / news === */
.ico-news { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='2' width='14' height='12' fill='%235b7ca0'/><rect x='3' y='4' width='10' height='1.5' fill='%23fff'/><rect x='3' y='7' width='10' height='1' fill='%23fff'/><rect x='3' y='9' width='10' height='1' fill='%23fff'/><rect x='3' y='11' width='6' height='1' fill='%23fff'/></svg>"); }

/* === Bookmark === */
.ico-book { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 2 V14 L8 11 L13 14 V2 Z' fill='%235b7ca0'/></svg>"); }

/* === Settings (gear) === */
.ico-gear { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 2 L9 4 L11 3 L11 5 L13 5 L12 7 L14 8 L12 9 L13 11 L11 11 L11 13 L9 12 L8 14 L7 12 L5 13 L5 11 L3 11 L4 9 L2 8 L4 7 L3 5 L5 5 L5 3 L7 4 Z' fill='%235b7ca0'/><circle cx='8' cy='8' r='2' fill='%23dae2ea'/></svg>"); }

/* === Application icon (puzzle) === */
.ico-app { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 3 H7 V5 a1 1 0 0 0 2 0 V3 H14 V8 H12 a1 1 0 0 0 0 2 H14 V14 H2 V10 H4 a1 1 0 0 0 0 -2 H2 Z' fill='%235b7ca0'/></svg>"); }

/* === Gift === */
.ico-gift { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='6' width='14' height='8' fill='%23a33121'/><rect x='1' y='6' width='14' height='1.5' fill='%23801010'/><rect x='7' y='4' width='2' height='10' fill='%23f5c636'/><path d='M8 5 C5 5 5 2 8 4 C11 2 11 5 8 5' fill='%23f5c636' stroke='%23a33121' stroke-width='0.5'/></svg>"); }

/* === Padlock === */
.ico-lock { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 7 V5 a3 3 0 0 1 6 0 V7' stroke='%23ccc' fill='none' stroke-width='1.5'/><rect x='3' y='7' width='10' height='8' fill='%23999' rx='1'/><circle cx='8' cy='11' r='1.5' fill='%23333'/></svg>"); }

/* === Chains === */
.ico-chain { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><ellipse cx='5' cy='5' rx='3' ry='2' fill='none' stroke='%23999' stroke-width='1.5' transform='rotate(45 5 5)'/><ellipse cx='11' cy='11' rx='3' ry='2' fill='none' stroke='%23999' stroke-width='1.5' transform='rotate(45 11 11)'/></svg>"); }

/* === Syringe === */
.ico-syringe { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><line x1='2' y1='14' x2='10' y2='6' stroke='%23ccc' stroke-width='1.5'/><rect x='8' y='4' width='5' height='4' fill='%23999' transform='rotate(-45 8 4)'/><line x1='13' y1='1' x2='15' y2='3' stroke='%23666' stroke-width='2'/></svg>"); }

/* === Money (coin) === */
.ico-money { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23f5c636' stroke='%23a87838' stroke-width='1.5'/><text x='8' y='12' text-anchor='middle' font-family='serif' font-weight='bold' font-size='10' fill='%23805818'>₽</text></svg>"); }

/* === Lightning (charge) === */
.ico-bolt { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='9,1 3,9 7,9 6,15 13,7 9,7' fill='%23f5c636' stroke='%23a87838' stroke-width='1'/></svg>"); }

/* === Star (authority) === */
.ico-star { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='8,1 10,6 15,6 11,9 13,14 8,11 3,14 5,9 1,6 6,6' fill='%23f5c636' stroke='%23a87838' stroke-width='0.8'/></svg>"); }

/* === Cigarette === */
.ico-cigar { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='1' y='7' width='12' height='3' fill='%23f0e0c0' stroke='%23805818' stroke-width='0.5'/><rect x='10' y='7' width='3' height='3' fill='%23a87838'/><circle cx='14' cy='8.5' r='1' fill='%23ff5030'/><path d='M14 4 Q15 6 14 7' stroke='%23999' fill='none' stroke-width='0.8' opacity='0.6'/></svg>"); }

/* === Card (shuffle) === */
.ico-card { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='2' width='8' height='12' fill='%23fff' stroke='%23805818' transform='rotate(-8 7 8)'/><rect x='5' y='2' width='8' height='12' fill='%23fff' stroke='%23805818' transform='rotate(8 9 8)'/><text x='9' y='10' text-anchor='middle' font-family='serif' font-weight='bold' font-size='8' fill='%23a33121'>♠</text></svg>"); }

/* === Loop (repeat) === */
.ico-loop { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8 a5 5 0 1 1 5 5' fill='none' stroke='%23805818' stroke-width='2'/><polygon points='6,11 8,13 6,15' fill='%23805818'/></svg>"); }

/* === Trash === */
.ico-trash { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='3' y='4' width='10' height='10' fill='%23805818'/><rect x='5' y='2' width='6' height='2' fill='%23805818'/><rect x='5' y='6' width='1' height='6' fill='%23f5c636'/><rect x='7' y='6' width='1' height='6' fill='%23f5c636'/><rect x='9' y='6' width='1' height='6' fill='%23f5c636'/><rect x='11' y='6' width='1' height='6' fill='%23f5c636'/></svg>"); }

/* === Radio === */
.ico-radio { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='2' y='10' width='28' height='18' fill='%235a3a20' stroke='%231a0e08' stroke-width='1'/><rect x='4' y='12' width='12' height='6' fill='%23f5e0c0'/><circle cx='22' cy='15' r='2' fill='%23f5c636'/><circle cx='26' cy='15' r='2' fill='%23f5c636'/><circle cx='8' cy='23' r='2.5' fill='%231a0e08'/><circle cx='15' cy='23' r='2.5' fill='%231a0e08'/><line x1='22' y1='10' x2='28' y2='2' stroke='%23805818' stroke-width='1.5'/></svg>"); }

/* === Box (cigs pack) === */
.ico-box { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='5' y='8' width='22' height='20' fill='%23d4a060' stroke='%23805818' stroke-width='1.5'/><rect x='5' y='8' width='22' height='5' fill='%23a33121'/><text x='16' y='22' text-anchor='middle' font-family='serif' font-weight='bold' font-size='8' fill='%23801010'>БЕЛОМОР</text></svg>"); }

/* === Crown === */
.ico-crown { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='2,22 6,8 12,16 16,6 20,16 26,8 30,22' fill='%23f5c636' stroke='%23805818' stroke-width='1.5'/><rect x='2' y='22' width='28' height='4' fill='%23d4a060' stroke='%23805818' stroke-width='1'/><circle cx='6' cy='8' r='2' fill='%23a33121' stroke='%23805818'/><circle cx='16' cy='6' r='2.5' fill='%23a33121' stroke='%23805818'/><circle cx='26' cy='8' r='2' fill='%23a33121' stroke='%23805818'/></svg>"); }

/* === Satellite / antenna === */
.ico-sat { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 12 a6 6 0 0 1 12 0 Z' fill='%235b7ca0' stroke='%232b587a' stroke-width='1'/><line x1='8' y1='12' x2='8' y2='4' stroke='%232b587a' stroke-width='1.5'/><path d='M5 4 a3 3 0 0 1 6 0' fill='none' stroke='%232b587a' stroke-width='1'/></svg>"); }

/* === Telegram (paper plane in circle) === */
.ico-tg { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><circle cx='12' cy='12' r='11' fill='%23229ED9'/><path d='M5.5 11.8 L17.5 6.5 C18 6.3 18.4 6.7 18.3 7.2 L16.4 17 C16.3 17.6 15.6 17.8 15.1 17.4 L11.5 14.7 L9.7 16.4 C9.5 16.6 9.2 16.5 9.1 16.3 L9.1 13.5 L15.5 8 L7.5 12.7 L5.5 12.1 C5 11.95 5 11.85 5.5 11.8 Z' fill='%23fff'/></svg>"); }

/* === Cloud (soundcloud) === */
.ico-cloud { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 12 a3 3 0 0 1 0 -5 a4 4 0 0 1 8 0 a2.5 2.5 0 0 1 0 5 Z' fill='%23ff5030' stroke='%23a01010' stroke-width='0.8'/></svg>"); }

/* === Scroll (malyava) === */
.ico-scroll { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='2' width='12' height='12' fill='%23f5e0c0' stroke='%23805818' stroke-width='1'/><line x1='4' y1='5' x2='12' y2='5' stroke='%23805818' stroke-width='0.5'/><line x1='4' y1='8' x2='12' y2='8' stroke='%23805818' stroke-width='0.5'/><line x1='4' y1='11' x2='10' y2='11' stroke='%23805818' stroke-width='0.5'/></svg>"); }

/* === Speaker === */
.ico-speaker { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><polygon points='2,6 5,6 9,2 9,14 5,10 2,10' fill='%23805818'/><path d='M11 5 a4 4 0 0 1 0 6' fill='none' stroke='%23805818' stroke-width='1.5'/><path d='M13 3 a7 7 0 0 1 0 10' fill='none' stroke='%23805818' stroke-width='1.5'/></svg>"); }

/* === Question mark (help) === */
.ico-qmark { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23d4a060' stroke='%231a0e08' stroke-width='1'/><text x='8' y='12' text-anchor='middle' font-family='serif' font-weight='bold' font-size='11' fill='%231a0e08'>?</text></svg>"); }

/* === X close === */
.ico-x { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='7' fill='%23c44030' stroke='%23801010' stroke-width='1'/><path d='M4 4 L12 12 M12 4 L4 12' stroke='%23fff' stroke-width='2'/></svg>"); }

/* === Mask (anonymous) === */
.ico-mask { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M2 5 a6 4 0 0 1 12 0 V9 a6 5 0 0 1 -12 0 Z' fill='%231a0e08'/><circle cx='5.5' cy='8' r='1.5' fill='%23f5e0c0'/><circle cx='10.5' cy='8' r='1.5' fill='%23f5e0c0'/></svg>"); }

/* === Cell door (camera) === */
.ico-cell { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect x='4' y='4' width='24' height='26' fill='%235e2419' stroke='%231a0e08' stroke-width='1'/><rect x='6' y='6' width='6' height='22' fill='%231a0e08'/><rect x='14' y='6' width='4' height='22' fill='%231a0e08'/><rect x='20' y='6' width='6' height='22' fill='%231a0e08'/><circle cx='25' cy='17' r='1' fill='%23f5c636'/></svg>"); }

/* === Watchtower (prohodnaya) === */
.ico-tower { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='12,4 20,4 22,10 10,10' fill='%23805818'/><rect x='10' y='10' width='12' height='4' fill='%231a0e08'/><polygon points='8,14 24,14 26,30 6,30' fill='%23a87838' stroke='%23805818' stroke-width='1'/><rect x='14' y='20' width='4' height='10' fill='%231a0e08'/></svg>"); }

/* === Tree (dvor) === */
.ico-tree { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><polygon points='16,2 24,12 20,12 26,20 22,20 28,28 4,28 10,20 6,20 12,12 8,12' fill='%23568045' stroke='%232a4020' stroke-width='1'/><rect x='14' y='28' width='4' height='3' fill='%23805818'/></svg>"); }

/* === Mini icons (small inline) === */
.ico-online {
    width: 8px; height: 8px;
    background: #58a830;
    border: 1px solid #386a18;
    border-radius: 50%;
    display: inline-block;
}

/* ============================================
   BODY — DARK BLUE BACKGROUND (VK 2010)
   ============================================ */
.vk-body {
    font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
    font-size: 11px;
    color: #000;
    background: #edeef0;
    min-width: 980px;
    min-height: 100vh;
    padding-bottom: 60px;
}

/* ============================================
   LOADING
   ============================================ */
.vk-loading {
    position: fixed; inset: 0;
    background: #45688e;
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .5s ease;
}
.vk-loading.hidden { opacity: 0; pointer-events: none; }
.vk-loading-inner { text-align: center; color: #fff; }
.vk-loading-logo {
    font-family: Tahoma, sans-serif;
    font-size: 38px; font-weight: bold;
    letter-spacing: 4px;
    color: #fff;
    margin-bottom: 10px;
}
.vk-loading-logo b {
    background: #fff; color: #45688e;
    padding: 0 6px;
    border: 1px solid #2b587a;
    margin-right: 0;
}
.vk-loading-text { font-size: 12px; margin-bottom: 18px; }
.vk-loading-bar {
    width: 360px; height: 12px;
    background: #2b587a;
    border: 1px solid #1a3a5a;
    margin: 0 auto;
    overflow: hidden;
}
.vk-loading-bar-fill {
    width: 0%; height: 100%;
    background: linear-gradient(to bottom, #b8d4f0, #6f92bd);
    animation: loadbar 2s ease-out forwards;
}
@keyframes loadbar { to { width: 100%; } }
.vk-loading-sub { font-size: 11px; margin-top: 14px; color: #b8d4f0; }

/* ============================================
   HEADER (top blue bar — VK 2010)
   ============================================ */
.vk-header {
    background: #45688e;
    border-bottom: 1px solid #2b587a;
    height: 32px;
    position: relative;
    z-index: 1000;
}
.vk-header-inner {
    width: 940px;
    margin: 0 auto;
    height: 32px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 6px;
}

/* === Logo "B contakte" === */
.vk-logo {
    display: flex; align-items: center;
    color: #fff !important;
    font-weight: bold;
    font-size: 14px;
    height: 28px;
    cursor: pointer;
    text-decoration: none !important;
    font-family: Tahoma, sans-serif;
}
.vk-logo:hover { opacity: 0.9; }
.vk-logo-icon {
    display: inline-block;
    width: 19px; height: 19px;
    background: #fff;
    color: #45688e;
    text-align: center;
    line-height: 19px;
    font-size: 14px;
    margin-right: 0;
    font-weight: bold;
    font-family: Tahoma, sans-serif;
    border: 1px solid #fff;
}
.vk-logo-text {
    color: #fff;
    letter-spacing: 0;
    text-transform: lowercase;
    font-weight: bold;
    margin-left: 1px;
}

.vk-search {
    margin-left: 4px;
}
.vk-search input {
    background: #fff;
    border: 1px solid #2b587a;
    padding: 3px 8px 3px 22px;
    width: 200px;
    font-family: inherit;
    font-size: 11px;
    height: 21px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><circle cx='5' cy='5' r='3.5' stroke='%23999' fill='none' stroke-width='1.5'/><line x1='8' y1='8' x2='11' y2='11' stroke='%23999' stroke-width='1.5'/></svg>");
    background-repeat: no-repeat;
    background-position: 6px 50%;
    outline: none;
}

.vk-header-nav {
    margin-left: auto;
    display: flex;
    gap: 14px;
    align-items: center;
}
.vk-header-nav a {
    color: #fff !important;
    font-size: 11px;
    text-decoration: none;
    padding: 2px 4px;
}
.vk-header-nav a:hover { text-decoration: underline; color: #d4e1f0 !important; }

/* ============================================
   PAGE GRID
   ============================================ */
.vk-page {
    width: 940px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 14px;
    padding: 8px 0;
}

/* ============================================
   SIDEBAR (на тёмно-синем фоне body)
   ============================================ */
.vk-sidebar {
    font-size: 11px;
    color: #818c99;
    padding: 4px 6px;
}
.vk-menu {
    list-style: none;
    margin-bottom: 12px;
}
.vk-menu-item {
    position: relative;
    padding: 1px 0;
    line-height: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vk-menu-item a {
    color: #2b587a !important;
    text-decoration: none;
    flex: 1;
}
.vk-menu-item a:hover { text-decoration: underline; color: #ff0000 !important; }
.vk-menu-item.active a {
    color: #000 !important;
    font-weight: bold;
}
.vk-menu-item.highlight a { font-weight: bold; }
.vk-menu-item.active-sub a {
    font-weight: bold;
    color: #000 !important;
}
.vk-menu-item.app-current a {
    color: #000 !important;
    background: #dae2ea;
    font-weight: bold;
    padding: 1px 4px;
    display: block;
    margin: 0 -4px;
}

.vk-menu-side {
    color: #818c99;
    font-size: 10px;
    margin-left: 8px;
}
.vk-menu-badge {
    color: #fff;
    background: #ff7050;
    padding: 0 4px;
    font-size: 10px;
    font-weight: bold;
    line-height: 13px;
    border-radius: 2px;
}

.vk-menu-secondary { padding-top: 2px; }
.vk-menu-apps { padding-top: 2px; }

/* sidebar ads — these stay light-bgrnd like real VK */
.vk-ad-block {
    background: #f5f5e8;
    border: 1px solid #c4bd9a;
    padding: 6px;
    margin-bottom: 8px;
    font-size: 10px;
    color: #000;
}
.vk-ad-title {
    color: #2b587a;
    font-weight: bold;
    margin-bottom: 4px;
    line-height: 1.3;
}
.vk-ad-image {
    width: 100%;
    height: 80px;
    background: #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}
.vk-ad-image .ico { width: 60px; height: 60px; }
.vk-ad-image img {
    width: 100%; height: 100%; object-fit: cover;
    position: relative; z-index: 1;
}
.vk-ad-image.empty {
    background:
        repeating-linear-gradient(
            45deg,
            #e1e7ed 0 8px,
            #d3dae4 8px 16px
        );
}
.vk-ad-image.empty::after {
    content: 'место под мем';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818c99;
    font-size: 11px;
    font-style: italic;
}
.vk-ad-image:hover { filter: brightness(1.05); }
.vk-ad-desc {
    color: #444;
    line-height: 1.3;
    margin-bottom: 4px;
}
.vk-ad-source {
    color: #818c99;
    font-size: 9px;
}
.vk-sidebar-footer {
    text-align: center;
    color: #818c99;
    font-size: 10px;
    margin-top: 4px;
}
.vk-sidebar-footer a { color: #2b587a !important; }

/* ============================================
   CONTENT (white block on dark blue body)
   ============================================ */
.vk-content {
    background: #fff;
    border: 1px solid #d3dae4;
    min-height: 600px;
}

.vk-content-block { padding: 0; }

/* profile header */
.vk-profile-header {
    background: #dae2ea;
    border-bottom: 1px solid #c5d2e0;
    padding: 5px 10px;
    display: flex; justify-content: space-between; align-items: center;
}
.vk-profile-name {
    font-size: 13px;
    font-weight: bold;
    color: #000;
    font-family: Tahoma, sans-serif;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vk-profile-suffix { color: #2b587a; }
.vk-online {
    background: #f5c636;
    color: #5a3f10;
    font-size: 10px;
    padding: 1px 6px;
    text-transform: lowercase;
    font-weight: bold;
    border: 1px solid #d4a020;
}

/* profile body */
.vk-profile-body {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 14px;
    padding: 12px;
}

/* photo block */
.vk-profile-photo {
    width: 200px;
}
.vk-photo-frame {
    width: 200px;
    height: 200px;
    overflow: hidden;
    background: #ccc;
    border: 1px solid #d3dae4;
    margin-bottom: 8px;
}
.vk-photo-frame img {
    width: 100%; height: 100%; object-fit: cover;
}

.vk-btn-primary {
    display: block;
    width: 100%;
    background: linear-gradient(to bottom, #6f92bd 0%, #587da5 100%);
    border: 1px solid #2b587a;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    padding: 4px 0;
    cursor: pointer;
    margin-bottom: 4px;
}
.vk-btn-primary:hover { background: linear-gradient(to bottom, #7fa5d4 0%, #6a8fb5 100%); }
.vk-btn-primary:active { background: #587da5; }

.vk-other-actions {
    color: #2b587a;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    user-select: none;
    padding: 2px 0;
}
.vk-other-actions:hover { text-decoration: underline; }
.vk-caret { font-size: 8px; color: #2b587a; }
.vk-actions-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background: #fff;
    border: 1px solid #818c99;
    box-shadow: 1px 2px 4px rgba(0,0,0,0.2);
    z-index: 100;
    margin-top: 2px;
}
.vk-actions-dropdown.open { display: block; }
.vk-actions-dropdown a {
    display: block;
    padding: 4px 8px;
    color: #2b587a;
    border-bottom: 1px solid #f0f2f5;
}
.vk-actions-dropdown a:last-child { border-bottom: none; }
.vk-actions-dropdown a:hover {
    background: #5b7ca0;
    color: #fff;
    text-decoration: none;
}

.vk-photo-counter {
    background: #f5f5e8;
    border: 1px solid #c4bd9a;
    text-align: center;
    padding: 3px;
    margin: 6px 0;
    font-size: 11px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
}
.vk-counter-num {
    font-weight: bold;
    color: #5a3f10;
}

.vk-send-gift {
    background: #fff;
    border: 1px solid #d3dae4;
    padding: 3px 6px;
    cursor: pointer;
    margin-bottom: 10px;
    color: #2b587a;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vk-send-gift:hover { background: #f0f2f5; text-decoration: underline; }

.vk-side-block {
    margin-top: 10px;
}
.vk-side-block-title {
    background: #dae2ea;
    border-top: 1px solid #c5d2e0;
    border-bottom: 1px solid #c5d2e0;
    padding: 3px 6px;
    color: #2b587a;
    font-weight: bold;
    display: flex; justify-content: space-between;
    margin-bottom: 6px;
}
.vk-side-block-link {
    color: #818c99;
    font-weight: normal;
    display: flex;
    gap: 3px;
    align-items: center;
}
.vk-photo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
}
.vk-photo-thumb {
    width: 100%;
    aspect-ratio: 1;
    background: #d3dae4;
    color: #818c99;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    position: relative;
}
.vk-photo-thumb .ico { opacity: 0.7; }
.vk-photo-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    position: relative; z-index: 1;
}
.vk-photo-thumb.empty {
    background:
        repeating-linear-gradient(
            45deg,
            #e1e7ed 0 6px,
            #d3dae4 6px 12px
        );
}
.vk-photo-thumb.empty::after {
    content: 'фото';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #818c99;
    font-size: 10px;
}
.vk-photo-grid.friends { gap: 4px; grid-template-columns: repeat(3, 1fr); }
.vk-friend-thumb {
    text-align: center;
    color: #2b587a;
    font-size: 10px;
    text-decoration: none !important;
    display: block;
}
.vk-friend-thumb img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border: 1px solid #d3dae4;
    margin-bottom: 2px;
}
.vk-friend-thumb span { display: block; line-height: 1.2; }
.vk-friend-thumb:hover { text-decoration: underline; }

/* info table */
.vk-profile-info { flex: 1; }
.vk-info-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}
.vk-info-table td {
    padding: 2px 6px 2px 0;
    vertical-align: top;
    line-height: 1.4;
}
.vk-info-label {
    color: #818c99;
    width: 130px;
    white-space: nowrap;
}
.vk-info-toggle {
    color: #2b587a;
    font-size: 11px;
    display: inline-block;
    margin: 6px 0 14px 0;
}

/* ============================================
   WALL
   ============================================ */
.vk-wall { margin-top: 8px; }
.vk-wall-header {
    background: #dae2ea;
    border-top: 1px solid #c5d2e0;
    border-bottom: 1px solid #c5d2e0;
    padding: 3px 8px;
    display: flex; justify-content: space-between;
    color: #2b587a;
}
.vk-wall-header b { color: #000; }
.vk-wall-count { color: #818c99; font-weight: normal; margin-left: 6px; }
.vk-wall-link { color: #818c99; font-size: 10px; }

.vk-wall-newpost {
    background: #f7f8fa;
    border-bottom: 1px solid #d3dae4;
    padding: 6px 8px;
    display: flex;
    gap: 6px;
}
.vk-wall-input {
    flex: 1;
    border: 1px solid #d3dae4;
    background: #fff;
    padding: 3px 6px;
    font-family: inherit;
    font-size: 11px;
}
.vk-wall-postbtn {
    background: linear-gradient(to bottom, #6f92bd 0%, #587da5 100%);
    border: 1px solid #2b587a;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
    padding: 0 12px;
    cursor: pointer;
}

.vk-wall-posts { padding: 0; }
.vk-wall-post {
    border-bottom: 1px solid #f0f2f5;
    padding: 8px;
    display: flex;
    gap: 8px;
}
.vk-wall-avatar img {
    width: 50px; height: 50px;
    object-fit: cover;
    border: 1px solid #d3dae4;
}
.vk-wall-avatar .vk-avatar-fallback {
    width: 50px; height: 50px;
    background: #5b7da8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 1px solid #d3dae4;
    font-size: 18px;
}
.vk-wall-body { flex: 1; }
.vk-wall-author {
    font-weight: bold;
    color: #2b587a;
    margin-right: 6px;
}
.vk-wall-text {
    color: #000;
    line-height: 1.4;
}
.vk-wall-meta {
    margin-top: 4px;
    color: #818c99;
    font-size: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vk-wall-like {
    margin-left: 12px;
    color: #5b7ca0;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* tiny heart for like */
.vk-heart {
    display: inline-block;
    width: 10px; height: 10px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 14 C2 10 1 5 4 3 C6 2 8 4 8 5 C8 4 10 2 12 3 C15 5 14 10 8 14 Z' fill='%235b7ca0'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -1px;
}

/* ============================================
   APP BREADCRUMBS + TOOLBAR
   ============================================ */
.vk-app-breadcrumbs {
    background: #dae2ea;
    border-top: 1px solid #c5d2e0;
    border-bottom: 1px solid #c5d2e0;
    padding: 4px 10px;
    color: #2b587a;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 4px;
}
.vk-app-breadcrumbs a {
    color: #2b587a;
    text-decoration: underline;
}
.vk-bc-sep { color: #818c99; margin: 0 4px; }

.vk-app-toolbar {
    padding: 5px 10px;
    background: #f7f8fa;
    border-bottom: 1px solid #d3dae4;
    font-size: 11px;
}
.vk-app-toolbar a {
    color: #2b587a;
    margin-right: 4px;
}
.vk-tb-sep {
    color: #d3dae4;
    margin: 0 4px;
}

/* ============================================
   APP CONTAINER
   ============================================ */
.vk-app-container { padding: 6px 10px 10px 10px; }

.vk-app-titlebar {
    background: linear-gradient(to bottom, #dee5ed 0%, #c5d2e0 100%);
    border: 1px solid #818c99;
    padding: 3px 6px;
    color: #2b587a;
    font-weight: bold;
    display: flex; align-items: center; gap: 8px;
    font-size: 11px;
}
.vk-app-arrow {
    background: #fff;
    border: 1px solid #818c99;
    width: 18px; height: 18px;
    text-align: center; line-height: 16px;
    cursor: pointer;
    color: #2b587a;
}
.vk-app-title { flex: 1; }
.vk-app-plus, .vk-app-lk {
    background: #fff;
    border: 1px solid #818c99;
    padding: 1px 6px;
    cursor: pointer;
    color: #2b587a;
    font-weight: bold;
}
.vk-app-plus { width: 18px; text-align: center; padding: 0; line-height: 18px; }

/* ============================================
   ============= TYURYAGA  =====================
   ============================================ */
.tyuryaga {
    border: 1px solid #1a0e08;
    background:
        repeating-linear-gradient(
            transparent 0,
            transparent 38px,
            rgba(0,0,0,0.08) 38px,
            rgba(0,0,0,0.08) 39px
        ),
        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.4) 0%, transparent 60%),
        linear-gradient(to bottom, #4d2b16 0%, #3d2817 100%);
    color: #f0d8b8;
    user-select: none;
    position: relative;
    font-family: 'Trebuchet MS', Tahoma, sans-serif;
}

/* --- top stat bar --- */
.ty-statbar {
    background: linear-gradient(to bottom, #2a1810 0%, #1a0e08 100%);
    border-bottom: 2px solid #b08c4c;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #f5e0c0;
    flex-wrap: wrap;
}
.ty-stat {
    background: linear-gradient(to bottom, #5a3a20 0%, #3a2410 100%);
    border: 1px solid #1a0e08;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    padding: 3px 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 2px;
    min-height: 22px;
}
.ty-stat-val { font-weight: bold; color: #ffd870; }
.ty-stat-nick {
    flex: 1;
    min-width: 220px;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}
.ty-stat-nick > * { display: block; }
.ty-stat-text {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap: 6px;
}
.ty-stat-text b { color: #ffd870; }
.ty-level { font-size: 10px; color: #b89878; }
.ty-xp-bar {
    width: 100%;
    height: 6px;
    background: #1a0e08;
    border: 1px solid #b08c4c;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
    border-radius: 2px;
    overflow: hidden;
}
.ty-xp-fill {
    height: 100%;
    width: 35%;
    background: linear-gradient(to bottom, #f5c636 0%, #d49810 100%);
    transition: width .3s ease;
}
.ty-stat-action {
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    border: 1px solid #1a0e08;
    color: #2a1810;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    padding: 1px 6px;
    cursor: pointer;
    margin-left: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.ty-stat-action:hover { background: linear-gradient(to bottom, #e5b070 0%, #b88848 100%); }
.ty-stat-action:active { transform: translateY(1px); }

.ty-stat-help { margin-left: auto; display: flex; gap: 4px; }
.ty-help-btn {
    background: transparent;
    border: none;
    width: 20px; height: 20px;
    cursor: pointer;
    padding: 0;
}
.ty-help-btn .ico { width: 18px; height: 18px; }

/* --- main scene --- */
.ty-scene {
    display: grid;
    grid-template-columns: 80px 1fr 200px;
    min-height: 380px;
    background: #3d2817;
}

/* nychki (left) */
.ty-nychki {
    background: linear-gradient(to right, #2a1810 0%, #1a0e08 100%);
    border-right: 2px solid #b08c4c;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.ty-nychki-title {
    color: #f5c636;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    font-size: 11px;
    margin-bottom: 4px;
}
.ty-nychki-arrow {
    width: 50px; height: 22px;
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    border: 1px solid #1a0e08;
    color: #2a1810;
    font-weight: bold;
    cursor: pointer;
    border-radius: 2px;
    font-size: 11px;
}
.ty-nychki-arrow:hover { background: linear-gradient(to bottom, #e5b070 0%, #b88848 100%); }

.ty-nychki-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 0;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: #b08c4c #1a0e08;
    max-height: calc(7 * 48px);
}
.ty-nychki-list::-webkit-scrollbar { width: 4px; }
.ty-nychki-list::-webkit-scrollbar-track { background: #1a0e08; }
.ty-nychki-list::-webkit-scrollbar-thumb { background: #b08c4c; border-radius: 2px; }
.ty-nychka {
    position: relative;
    width: 44px; height: 44px;
    background: radial-gradient(circle at 30% 30%, #f5d460 0%, #c89020 50%, #6a4810 100%);
    border: 2px solid #1a0e08;
    border-radius: 50%;
    box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(255,255,255,0.3),
        0 1px 2px rgba(0,0,0,0.6);
    cursor: pointer;
    transition: transform 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2a1810;
    font-weight: bold;
    font-size: 12px;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.2);
    flex-shrink: 0;
    font-family: 'Times New Roman', serif;
}
.ty-nychka::before {
    /* coin rim */
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(101, 60, 16, 0.6);
    border-radius: 50%;
    pointer-events: none;
}
.ty-nychka:hover {
    transform: scale(1.1);
    box-shadow:
        inset 0 -2px 4px rgba(0,0,0,0.5),
        inset 0 2px 4px rgba(255,255,255,0.3),
        0 0 8px #f5c636;
}
.ty-nychka.active {
    background: radial-gradient(circle at 30% 30%, #ff7050 0%, #c43020 50%, #6a1010 100%);
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    animation: nychkaPulse 1s ease-in-out infinite;
}
@keyframes nychkaPulse {
    0%, 100% { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3), 0 0 6px #ff7050; }
    50% { box-shadow: inset 0 -2px 4px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.3), 0 0 16px #ff9070; }
}
.ty-nychka-num {
    position: absolute;
    bottom: -3px; right: -3px;
    background: #1a0e08;
    color: #f5c636;
    font-size: 9px;
    padding: 1px 3px;
    border-radius: 2px;
    border: 1px solid #b08c4c;
    line-height: 1;
}
.ty-nychka-tip {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
    background: #1a0e08;
    color: #f5e0c0;
    border: 1px solid #b08c4c;
    padding: 3px 6px;
    font-size: 10px;
    white-space: nowrap;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ty-nychka:hover .ty-nychka-tip { opacity: 1; }

.ty-nychki-trash {
    width: 36px; height: 36px;
    background: linear-gradient(to bottom, #4a3020 0%, #2a1810 100%);
    border: 1px solid #b08c4c;
    color: #f5c636;
    cursor: pointer;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* zek area (center) */
.ty-zek-area {
    position: relative;
    overflow: hidden;
    background: #4d2b16;
}
.ty-cell-bg {
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 76px,
            rgba(0,0,0,0.3) 76px,
            rgba(0,0,0,0.3) 80px
        ),
        repeating-linear-gradient(
            0deg,
            #7a2e20 0,
            #7a2e20 28px,
            #5e2419 28px,
            #5e2419 30px
        );
    opacity: 0.5;
}
.ty-cell-poster {
    position: absolute;
    top: 18px;
    left: 30px;
    width: 100px;
    background: #f5e0c0;
    color: #2a1810;
    padding: 4px 6px;
    text-align: center;
    transform: rotate(-3deg);
    box-shadow: 1px 2px 4px rgba(0,0,0,0.5);
    font-family: 'Times New Roman', serif;
}
.ty-cell-poster-year {
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #2a1810;
    margin-bottom: 2px;
}
.ty-cell-poster-text { font-size: 9px; }

.ty-cell-bed {
    position: absolute;
    bottom: 30px;
    right: 60px;
    width: 160px;
    height: 24px;
    background: linear-gradient(to bottom, #d4a878 0%, #a87838 100%);
    border: 1px solid #2a1810;
    transform: rotate(-2deg);
    opacity: 0.7;
}
.ty-cell-radio {
    position: absolute;
    bottom: 60px;
    left: 20px;
    width: 36px; height: 36px;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.6));
    animation: radioBob 4s ease-in-out infinite;
}
.ty-cell-radio .ico { width: 100%; height: 100%; }
@keyframes radioBob { 50% { transform: translateY(-4px); } }

.ty-zek {
    position: absolute;
    top: 30px; bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ty-zek img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 8px 12px rgba(0,0,0,0.6))
        contrast(1.05)
        saturate(1.1);
    border: 4px solid #b08c4c;
    background: #1a0e08;
    box-shadow:
        inset 0 0 24px rgba(0,0,0,0.4),
        0 4px 16px rgba(0,0,0,0.7);
    transition: transform 0.3s ease;
}
.tyuryaga.playing .ty-zek img {
    animation: zekBreath 2s ease-in-out infinite;
}
@keyframes zekBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.ty-zek-speech {
    position: absolute;
    top: -16px;
    left: 60%;
    background: #f5e0c0;
    color: #2a1810;
    padding: 6px 10px;
    border: 2px solid #1a0e08;
    border-radius: 6px;
    font-size: 11px;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    max-width: 180px;
    text-align: center;
    font-weight: bold;
}
.ty-zek-speech::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 20px;
    width: 0; height: 0;
    border: 6px solid transparent;
    border-top: 10px solid #1a0e08;
}
.ty-zek-speech::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: 22px;
    width: 0; height: 0;
    border: 4px solid transparent;
    border-top: 8px solid #f5e0c0;
    z-index: 1;
}

.ty-now-playing-overlay {
    position: absolute;
    bottom: 8px;
    left: 8px; right: 8px;
    background: linear-gradient(to bottom, rgba(26,14,8,0.95) 0%, rgba(58,36,16,0.95) 100%);
    border: 1px solid #b08c4c;
    padding: 4px 8px;
    font-size: 11px;
    color: #f5e0c0;
    display: flex;
    gap: 6px;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ty-np-label { color: #f5c636; font-weight: bold; flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.ty-np-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* right panel */
.ty-right-panel {
    background: linear-gradient(to left, #2a1810 0%, #1a0e08 100%);
    border-left: 2px solid #b08c4c;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ty-koresha {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ty-koresh {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(to bottom, #5a3a20 0%, #3a2410 100%);
    border: 1px solid #b08c4c;
    padding: 2px 4px;
    color: #f5e0c0 !important;
    text-decoration: none !important;
    border-radius: 2px;
}
.ty-koresh:hover {
    background: linear-gradient(to bottom, #6a4a30 0%, #4a3420 100%);
    text-decoration: none !important;
}
.ty-koresh img {
    width: 26px; height: 26px;
    object-fit: cover;
    border: 1px solid #1a0e08;
}
.ty-koresh-icon {
    width: 26px; height: 26px;
    background: linear-gradient(to bottom right, #d4a060 0%, #a87838 100%);
    color: #2a1810;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid #1a0e08;
}
.ty-koresh-icon .ico { width: 18px; height: 18px; }
.ty-koresh-icon.tg {
    background: #fff;
    border: 1px solid #1a0e08;
    padding: 0;
}
.ty-koresh-icon.tg .ico { width: 24px; height: 24px; }
.ty-koresh-label {
    font-size: 10px;
    font-weight: bold;
    color: #f5e0c0;
}

.ty-zone-map {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: linear-gradient(to bottom right, #5a3a20 0%, #3a2410 100%);
    border: 1px solid #b08c4c;
    padding: 6px;
}
.ty-zone-loc {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    border: 1px solid #1a0e08;
    color: #2a1810 !important;
    font-weight: bold;
    padding: 4px;
    text-decoration: none !important;
    font-size: 11px;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.ty-zone-loc:hover { background: linear-gradient(to bottom, #e5b070 0%, #b88848 100%); }
.ty-zone-loc.active {
    background: linear-gradient(to bottom, #f5c636 0%, #d49810 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.5),
        0 0 8px #f5c636;
}
.ty-zone-loc .ico { flex-shrink: 0; }

.ty-srochnyaki {
    background: linear-gradient(to bottom, rgba(40,20,10,0.8) 0%, rgba(20,10,5,0.8) 100%);
    border: 1px solid #b08c4c;
    padding: 6px;
    color: #f5e0c0;
    font-size: 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.ty-sr-title {
    color: #f5c636;
    font-weight: bold;
    text-align: center;
    margin-bottom: 4px;
    font-size: 11px;
    border-bottom: 1px solid #b08c4c;
    padding-bottom: 2px;
}
.ty-sr-list {
    list-style: none;
    flex: 1;
}
.ty-sr-item {
    padding: 2px 0;
    border-bottom: 1px dotted rgba(176,140,76,0.4);
    color: #f5e0c0;
    transition: all .3s;
}
.ty-sr-item.done {
    text-decoration: line-through;
    color: #888;
    opacity: 0.7;
}
.ty-sr-btn {
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    border: 1px solid #1a0e08;
    color: #2a1810;
    font-family: inherit;
    font-weight: bold;
    padding: 3px;
    cursor: pointer;
    margin-top: 4px;
    border-radius: 2px;
}

/* --- bottom controls --- */
.ty-bottom {
    background: linear-gradient(to bottom, #2a1810 0%, #1a0e08 100%);
    border-top: 2px solid #b08c4c;
    padding: 6px;
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.ty-controls {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(to bottom, #5a3a20 0%, #3a2410 100%);
    border: 1px solid #b08c4c;
    padding: 5px 8px;
    border-radius: 2px;
}
.ty-ctrl-btn {
    min-width: 30px; height: 26px;
    padding: 0 4px;
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    border: 1px solid #1a0e08;
    color: #2a1810;
    cursor: pointer;
    font-size: 13px;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ty-ctrl-btn:hover { background: linear-gradient(to bottom, #e5b070 0%, #b88848 100%); }
.ty-ctrl-btn:active, .ty-ctrl-btn.active {
    background: linear-gradient(to bottom, #a87838 0%, #d4a060 100%);
    transform: translateY(1px);
}
.ty-ctrl-btn .ico { width: 16px; height: 16px; }
.ty-play { font-size: 15px; }

.ty-progress-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 200px;
}
.ty-progress-bar {
    flex: 1;
    height: 14px;
    background: #1a0e08;
    border: 1px solid #b08c4c;
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.6);
    border-radius: 2px;
    overflow: hidden;
}
.ty-progress-fill {
    height: 100%; width: 0%;
    background: linear-gradient(to bottom, #f5c636 0%, #d49810 100%);
    transition: width 0.1s linear;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}
.ty-progress-time {
    color: #f5c636;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    min-width: 80px;
    text-align: right;
    font-weight: bold;
}

.ty-volume-wrap {
    display: flex; align-items: center; gap: 4px;
    color: #f5c636;
}
.ty-vol-slider {
    width: 70px;
    accent-color: #d4a060;
}

/* rozysk poster */
.ty-rozysk {
    width: 160px;
    background:
        repeating-linear-gradient(
            -45deg,
            #d4b58a 0px,
            #d4b58a 4px,
            #c8a878 4px,
            #c8a878 6px
        );
    border: 2px solid #2a1810;
    padding: 6px;
    color: #2a1810;
    font-size: 10px;
    text-align: center;
    box-shadow:
        2px 2px 0 rgba(0,0,0,0.3),
        inset 0 0 12px rgba(0,0,0,0.2);
    transform: rotate(-1.5deg);
    position: relative;
}
.ty-rozysk-stamp {
    background: #a33121;
    color: #fff;
    font-weight: bold;
    font-family: Impact, 'Arial Black', sans-serif;
    letter-spacing: 4px;
    padding: 2px;
    transform: rotate(2deg);
    border: 2px dashed #fff;
    margin-bottom: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.ty-rozysk-text {
    line-height: 1.3;
    margin-bottom: 4px;
}
.ty-rozysk-btn {
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    border: 1px solid #2a1810;
    color: #2a1810;
    font-family: inherit;
    font-weight: bold;
    padding: 2px 12px;
    cursor: pointer;
    border-radius: 2px;
}

/* ============================================
   LYRICS
   ============================================ */
.ty-after-app {
    margin-top: 10px;
}
.ty-lyrics-block {
    background: #f7e8c8;
    border: 1px solid #b08c4c;
    color: #2a1810;
    font-family: 'Courier New', monospace;
}
.ty-lyrics-header {
    background: linear-gradient(to bottom, #d4a060 0%, #a87838 100%);
    color: #2a1810;
    padding: 4px 8px;
    font-weight: bold;
    border-bottom: 1px solid #b08c4c;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ty-lyrics-body {
    padding: 12px 14px;
    white-space: pre-wrap;
    line-height: 1.45;
    font-size: 12px;
    min-height: 60px;
    max-height: 300px;
    overflow-y: auto;
}
.ty-lyrics-body em { color: #888; font-style: italic; }
.ty-lyrics-section {
    color: #a33121;
    font-weight: bold;
    display: block;
    padding-top: 8px;
}

/* ============================================
   APP FOOTER LINKS
   ============================================ */
.vk-app-bottom-links {
    border-top: 1px solid #d3dae4;
    padding: 6px 12px;
    text-align: center;
    font-size: 11px;
    color: #818c99;
    background: #f7f8fa;
}
.vk-mini-link {
    color: #2b587a;
    margin: 0 8px;
}
.vk-counter-ext {
    float: right;
    color: #818c99;
}

/* ============================================
   FOOTER
   ============================================ */
.vk-footer {
    width: 940px;
    margin: 14px auto 0;
    padding: 10px 8px;
    text-align: center;
    font-size: 11px;
    color: #818c99;
    line-height: 1.6;
}
.vk-footer a {
    color: #2b587a !important;
    margin: 0 8px;
}
.vk-footer a:hover { color: #ff0000 !important; }
.vk-footer-copyright {
    margin-top: 6px;
    color: #818c99;
}
.vk-footer-author {
    margin-top: 4px;
    font-size: 10px;
    color: #a0a8b4;
}

/* ============================================
   NOTICE DIALOG (как VK Confirm)
   ============================================ */
.vk-notice {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99000;
    align-items: center;
    justify-content: center;
}
.vk-notice.open { display: flex; }
.vk-notice-inner {
    width: 380px;
    background: #fff;
    border: 1px solid #818c99;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    animation: noticeIn 0.18s ease-out;
}
@keyframes noticeIn {
    from { transform: translateY(-30px) scale(0.95); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}
.vk-notice-header {
    background: #45688e;
    color: #fff;
    padding: 4px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vk-notice-title { font-weight: bold; font-size: 11px; }
.vk-notice-close {
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 12px;
    padding: 0 4px;
}
.vk-notice-body {
    padding: 16px;
    font-size: 12px;
    line-height: 1.5;
    min-height: 60px;
}
.vk-notice-footer {
    padding: 8px;
    background: #f0f2f5;
    border-top: 1px solid #d3dae4;
    text-align: right;
}
.vk-notice-footer .vk-btn-primary {
    width: auto;
    padding: 4px 14px;
    display: inline-block;
}

/* ============================================
   ETAP (kernel panic)
   ============================================ */
.vk-etap {
    display: none;
    position: fixed;
    inset: 0;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0,0,0,0.2) 0,
            rgba(0,0,0,0.2) 2px,
            transparent 2px,
            transparent 4px
        ),
        radial-gradient(ellipse at center, #4d2b16 0%, #1a0e08 100%);
    z-index: 99500;
    align-items: center;
    justify-content: center;
    color: #f5e0c0;
    text-align: center;
    font-family: 'Courier New', monospace;
}
.vk-etap.active { display: flex; animation: etapIn .4s; }
@keyframes etapIn { from { opacity: 0; } to { opacity: 1; } }

.vk-etap-inner {
    max-width: 600px;
    padding: 30px;
    border: 3px double #b08c4c;
    background: rgba(26,14,8,0.85);
}
.vk-etap-stamp {
    font-family: Impact, sans-serif;
    color: #a33121;
    font-size: 48px;
    letter-spacing: 8px;
    border: 4px dashed #a33121;
    padding: 8px 20px;
    display: inline-block;
    margin-bottom: 20px;
    transform: rotate(-2deg);
    background: rgba(255,255,255,0.05);
}
.vk-etap-title {
    color: #f5c636;
    font-size: 24px;
    margin-bottom: 14px;
    font-weight: bold;
}
.vk-etap-text {
    font-size: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}
.vk-etap-codes {
    font-size: 11px;
    color: #b89878;
    background: rgba(0,0,0,0.4);
    padding: 8px;
    border: 1px solid #b08c4c;
    margin-bottom: 16px;
    text-align: left;
}
.vk-etap-progress {
    font-size: 14px;
    margin-bottom: 8px;
    color: #f5c636;
}
.vk-etap-bar {
    height: 20px;
    background: #1a0e08;
    border: 1px solid #b08c4c;
    overflow: hidden;
}
.vk-etap-bar-fill {
    height: 100%; width: 0%;
    background: linear-gradient(to bottom, #f5c636 0%, #a33121 100%);
    transition: width 0.2s ease;
}

/* ============================================
   FLYING ICONS
   ============================================ */
.flying-icon {
    position: fixed;
    bottom: 0;
    z-index: 50;
    pointer-events: none;
    animation: flyUp linear forwards;
    text-shadow: 0 0 6px rgba(245,198,54,0.6);
}
.flying-icon .ico { width: 24px; height: 24px; }
@keyframes flyUp {
    0% { transform: translateY(0) rotate(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateY(-110vh) rotate(540deg); opacity: 0; }
}

/* ============================================
   MOBILE
   ============================================ */
@media (max-width: 1000px) {
    .vk-body { min-width: 0; padding-bottom: 20px; }
    .vk-header-inner { width: 100%; padding: 0 6px; }
    .vk-search input { width: 120px; }
    .vk-header-nav { gap: 8px; }
    .vk-page {
        width: 100%;
        grid-template-columns: 1fr;
        padding: 6px;
    }
    .vk-sidebar { display: none; }
    .vk-profile-body { grid-template-columns: 1fr; }
    .vk-profile-photo { width: 100%; max-width: 280px; margin: 0 auto; }
    .vk-photo-frame { width: 100%; height: auto; aspect-ratio: 1; max-height: 280px; }
    .ty-scene {
        grid-template-columns: 70px 1fr 160px;
        min-height: 320px;
    }
    .ty-zek { width: 90%; }
    .ty-statbar { flex-wrap: wrap; gap: 4px; }
    .ty-stat-nick { min-width: 100%; }
    .ty-bottom { flex-direction: column; }
    .ty-rozysk { width: 100%; }
    .ty-progress-wrap { min-width: 100px; }
    .vk-footer { width: 100%; }
}

@media (max-width: 600px) {
    .vk-header-nav a { font-size: 10px; }
    .vk-search input { width: 90px; }
    .ty-scene { grid-template-columns: 60px 1fr; }
    .ty-right-panel {
        grid-column: 1 / 3;
        grid-row: 2;
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 2px solid #b08c4c;
    }
    .ty-koresha { flex-direction: row; flex-wrap: wrap; width: 100%; }
    .ty-zone-map { flex-direction: row; width: 100%; }
    .ty-srochnyaki { width: 100%; }
    .ty-controls { flex-wrap: wrap; }
    .ty-progress-wrap { min-width: 100%; order: 99; }
}