/* TeleVK — the look of VK around 2010: a blue top bar, a plain text menu on the
   left, a pale page with white bordered blocks, rectangular buttons and
   avatars, dense information, thin dividers. No shadows, no rounded cards. */

:root {
  --blue: #45668e;
  --blue-light: #5c82ab;
  --blue-dark: #36597e;
  --link: #2b587a;
  --bg: #edeef0;
  --block: #fff;
  --line: #d3d9e0;
  --line-soft: #e7ebf0;
  --strip: #e4e9ef;
  --text: #1a1a1a;
  --muted: #7a8490;
  --danger: #a8443f;
  --font: Tahoma, Verdana, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 var(--font);
  overflow-x: hidden;
  overflow-wrap: anywhere;
}
h1, h2, h3, p, dl, dd { margin: 0; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid #7fa3c9; outline-offset: 1px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--muted); }
.small { font-size: 11px; }
.icon { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -2px; }

/* --- top bar ------------------------------------------------------------- */
.topbar { background: linear-gradient(#4f76a3, var(--blue)); border-bottom: 1px solid #2f4f73; color: #fff; }
.top-inner { max-width: 1000px; margin: 0 auto; height: 42px; padding: 0 10px; display: flex; align-items: center; gap: 12px; }
.brand { display: flex; align-items: center; gap: 7px; color: #fff; font-weight: bold; font-size: 16px; letter-spacing: .2px; width: 148px; flex: none; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: #fff; color: var(--blue); font: bold 13px/1 var(--font); border-radius: 3px; }
.top-search { display: flex; flex: 0 1 260px; min-width: 0; }
.top-search input { flex: 1; min-width: 0; height: 26px; padding: 0 8px; border: 1px solid #2f4f73; border-right: 0; background: #fff; color: var(--text); border-radius: 2px 0 0 2px; }
.top-search button { width: 30px; height: 26px; border: 1px solid #2f4f73; background: #dfe6ed; color: var(--blue); border-radius: 0 2px 2px 0; padding: 0; }
.top-me { margin-left: auto; display: flex; align-items: center; gap: 8px; background: none; border: 0; color: #fff; padding: 4px 0 4px 8px; max-width: 45%; }
.top-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; }
.demo-notice { background: #fff8d6; border-bottom: 1px solid #e3d48c; color: #6b5a14; text-align: center; padding: 5px 10px; font-size: 12px; }

/* --- layout and menu ------------------------------------------------------- */
.layout { max-width: 1000px; margin: 0 auto; padding: 12px 10px 20px; display: flex; gap: 12px; align-items: flex-start; }
main { flex: 1; min-width: 0; }
.sidenav { width: 148px; flex: none; }
.nav-list { display: flex; flex-direction: column; }
.nav-item { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 5px 8px; color: var(--link); border-radius: 2px; }
.nav-item:hover { background: #dfe5ec; text-decoration: none; }
.nav-item.active { background: #dbe2ea; font-weight: bold; color: #1f4666; }
.nav-short { display: none; }
.badge { background: #6383a8; color: #fff; font-size: 11px; font-weight: bold; padding: 0 5px; border-radius: 2px; }
.nav-note { margin-top: 14px; padding: 8px; border-top: 1px solid var(--line); color: #98a3af; font-size: 11px; line-height: 1.5; }
.footer { max-width: 1000px; margin: 0 auto; padding: 0 10px 24px; color: #98a3af; font-size: 11px; text-align: center; }

/* --- blocks ------------------------------------------------------------------ */
.block { background: var(--block); border: 1px solid var(--line); margin-bottom: 10px; padding: 10px 12px; }
.block-title { background: var(--strip); border-bottom: 1px solid var(--line); color: var(--blue); font-size: 12px; font-weight: bold; margin: -10px -12px 10px; padding: 5px 12px; }
.block-title a { color: var(--blue); }
.sub-head + .block-title, .hint + .block-title, form + .block-title { margin-top: 10px; border-top: 1px solid var(--line); }
.n { color: #8fa1b5; font-weight: normal; }
.sub-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.sub-head h1 { font-size: 16px; color: var(--blue); }
.empty { color: var(--muted); padding: 8px 0; }
.hint { color: var(--muted); font-size: 12px; margin-top: 8px; }
.block > p + p, .block > .notice + p, .block > dl + p { margin-top: 8px; }
.error { color: var(--danger); min-height: 0; }
.error:empty { display: none; }
.notice { background: #f7f3e3; border: 1px solid #e3d9ad; color: #5e5320; padding: 7px 10px; margin-bottom: 10px; }
.link { background: none; border: 0; padding: 0; color: var(--link); }
.link:hover { text-decoration: underline; }
.link:disabled { color: #a9b3be; cursor: default; text-decoration: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 28px; padding: 4px 14px; background: #e6ebf0; border: 1px solid #c2cad4; border-radius: 2px; color: var(--link); font-size: 12px; text-align: center; white-space: nowrap; }
.btn:hover { background: #dde4eb; text-decoration: none; }
.btn-primary { background: linear-gradient(#6d8fb3, #5e80a6); border-color: #456d96; color: #fff; box-shadow: inset 0 1px 0 #86a4c3; }
.btn-primary:hover { background: linear-gradient(#789abc, #6688ad); }
.btn-danger { background: #b8554f; border-color: #96403b; color: #fff; }
.btn-danger:hover { background: #c1605a; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-block { display: flex; width: 100%; }
.btn-wide { width: 100%; }

input, textarea { border: 1px solid #c0cad5; background: #fff; padding: 5px 7px; border-radius: 2px; width: 100%; }
textarea { resize: vertical; min-height: 44px; display: block; }
label { display: block; margin: 8px 0 3px; color: #56616d; font-size: 12px; }

/* --- avatars and pictures ------------------------------------------------------ */
.ava { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 2px; color: #fff; font-weight: bold; line-height: 1; user-select: none; vertical-align: middle; }
.ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ava-xs { width: 26px; height: 26px; font-size: 10px; }
.ava-s { width: 46px; height: 46px; font-size: 15px; }
.ava-m { width: 50px; height: 50px; font-size: 17px; }
.ava-l { width: 60px; height: 60px; font-size: 20px; }
.ava-xl { width: 200px; height: 200px; font-size: 64px; }
.tone-0 { background: #6b8cae; } .tone-1 { background: #8a79a8; } .tone-2 { background: #5f9a8d; }
.tone-3 { background: #b07f5a; } .tone-4 { background: #7f93a8; } .tone-5 { background: #a26b7a; }
.pic { display: block; position: relative; overflow: hidden; background: #dfe5eb; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic-missing::after { content: "нет изображения"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #8d98a5; font-size: 10px; text-align: center; padding: 2px; }
.thumb, .gift-cell, .story-tile, .post-media { border: 0; padding: 0; background: none; display: block; }

/* --- profile page ----------------------------------------------------------------- */
.page { display: flex; gap: 12px; align-items: flex-start; }
.page-left { width: 222px; flex: none; }
.page-right { flex: 1; min-width: 0; }
.avatar-block { padding: 10px; }
.avatar-pic button { border: 0; padding: 0; background: none; display: block; }
.actions { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.relation { color: var(--blue); font-weight: bold; font-size: 12px; }
.head h1 { font-size: 17px; line-height: 1.25; }
.tagline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 3px; }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); }
.tag-preview { color: #8a6a1f; }
.tag-closed { color: #7a5560; }
.tag .icon { width: 12px; height: 12px; }
.status { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.info { display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 5px 10px; }
.info dt { color: var(--muted); }
.counters { display: flex; background: var(--block); border: 1px solid var(--line); margin-bottom: 10px; }
.counter { flex: 1 1 0; min-width: 0; padding: 7px 2px; text-align: center; border-left: 1px solid var(--line-soft); }
.counter:first-child { border-left: 0; }
.counter:hover { background: #f4f6f9; text-decoration: none; }
.counter b { display: block; font-size: 16px; color: var(--link); }
.counter span { display: block; font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mini-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 6px; }
.mini-person { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; text-align: center; min-width: 0; }
.mini-person span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.mini-photos .pic, .gallery .pic { aspect-ratio: 1; }
.mini-gifts { display: flex; gap: 6px; }
.gift-pic { width: 60px; height: 60px; background: none; }
.gift-pic img { object-fit: contain; }
.gift-blank { display: flex; align-items: center; justify-content: center; color: #9db0c4; background: #eef2f6; }
.gift-blank .icon { width: 50%; height: 50%; }

.stories-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.story-tile { position: relative; flex: 0 0 96px; height: 150px; color: #fff; text-align: left; }
.story-pic { width: 96px; height: 150px; }
.story-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 5px 4px; font-size: 11px; line-height: 1.25; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); max-height: 60px; overflow: hidden; }
.story-pin { position: absolute; top: 4px; left: 4px; background: rgba(0, 0, 0, .55); font-size: 10px; padding: 0 4px; border-radius: 2px; }
.story-kind { position: absolute; top: 4px; right: 4px; background: rgba(0, 0, 0, .55); border-radius: 2px; padding: 1px 3px; }
.story-kind .icon { width: 11px; height: 11px; fill: currentColor; stroke: none; }

/* --- tabs and wall ------------------------------------------------------------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid #5e80a6; margin: 0 0 10px; overflow-x: auto; scrollbar-width: none; }
.wall > .tabs:first-child, .block > .tabs:first-child { margin-top: -2px; }
.tab { padding: 5px 11px; white-space: nowrap; color: var(--link); border-radius: 2px 2px 0 0; }
.tab:hover { background: #e1e7ee; text-decoration: none; }
.tab.active { background: #5e80a6; color: #fff; font-weight: bold; }
.tab.active .n { color: #cfdcea; }
.wall-lead { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.wall-lead:empty { display: none; }
.wall-lead-action { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.composer { background: #f3f5f8; border: 1px solid var(--line-soft); padding: 8px; margin-bottom: 8px; }
.composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.composer-foot .muted { margin-right: auto; }
.post { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.composer + .post, .wall-lead + .post, .tabs + div > .post:first-child, #wall-content > .post:first-child, .sub-head + .post { border-top: 0; }
.post-ava { flex: none; }
.post-body { flex: 1; min-width: 0; }
.post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.author { font-weight: bold; color: var(--link); }
.date { color: #98a3af; font-size: 11px; }
.source { color: #7b8794; font-size: 11px; margin-top: 1px; }
.source .icon { width: 11px; height: 11px; margin-right: 3px; }
.post-text { margin-top: 4px; white-space: normal; }
.post-media { position: relative; margin-top: 6px; max-width: 420px; width: 100%; }
.post-media .pic { aspect-ratio: 4 / 3; }
.play-mark { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.play-mark .icon { width: 44px; height: 44px; fill: currentColor; stroke: none; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
.post-actions { display: flex; gap: 12px; margin-top: 5px; font-size: 11px; }
.post-edit { margin-top: 6px; }
.signature-canvas { display: block; width: min(100%, 380px); aspect-ratio: 2 / 1; margin-top: 5px; background: #fbfcfd; border: 1px solid var(--line-soft); }
.more { padding-top: 8px; border-top: 1px solid var(--line-soft); }

/* --- lists: people, photos, gifts ------------------------------------------------------ */
.person-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.tabs + .person-row, .sub-head + .person-row, .block-title + .person-row { border-top: 0; }
.person-main { flex: 1; min-width: 0; }
.person-main .name { font-weight: bold; }
.person-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; margin-top: 8px; }
.gift-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin-top: 8px; }
.gift-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; background: #f6f8fa; border: 1px solid var(--line-soft); text-align: center; }
.gift-card:hover { background: #eef2f6; }
.gift-card .gift-pic { width: 72px; height: 72px; }
.gift-title { font-weight: bold; color: var(--link); }
.gift-detail { text-align: center; }
.gift-detail .info { text-align: left; max-width: 300px; margin: 10px auto; }
.gift-big { width: 120px; height: 120px; margin: 0 auto 8px; }
.find { display: flex; gap: 6px; }
.find input { flex: 1; min-width: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: #e6ebf0; border: 1px solid #c2cad4; padding: 2px 8px; border-radius: 2px; }
.options { display: flex; flex-direction: column; gap: 8px; }
.option { display: flex; gap: 8px; align-items: flex-start; margin: 0; color: var(--text); font-size: 13px; cursor: pointer; }
.option input { width: auto; margin: 3px 0 0; }
.option b { display: block; }
.option .muted { display: block; font-size: 12px; }

/* --- states ---------------------------------------------------------------------------- */
.state { text-align: center; padding: 34px 16px; }
.state h1 { font-size: 16px; color: var(--blue); margin-bottom: 8px; }
.state p { max-width: 460px; margin: 0 auto; color: #4d5661; }
.state-mark { color: #9db0c4; margin-bottom: 8px; }
.state-mark .icon { width: 40px; height: 40px; stroke-width: 1.5; }
.state-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.spinner { display: inline-block; width: 22px; height: 22px; border: 3px solid #cfd8e2; border-top-color: #5e80a6; border-radius: 50%; animation: spin .8s linear infinite; }
.loading p { margin-top: 8px; color: var(--muted); }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }
.closed { display: flex; gap: 14px; }
.closed-ava .ava { width: 120px; height: 120px; font-size: 40px; }
.closed-main { flex: 1; min-width: 0; }
.closed-main h1 { font-size: 17px; }
.closed-main p { margin-top: 8px; }
.closed-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

/* --- dialog ------------------------------------------------------------------------------ */
dialog { border: 1px solid #7f95ad; padding: 0; background: #fff; color: var(--text); width: min(460px, calc(100vw - 16px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
dialog.wide { width: min(760px, calc(100vw - 12px)); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--blue); color: #fff; padding: 7px 8px 7px 12px; }
.modal-head h2 { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-close { background: none; border: 0; color: inherit; font-size: 20px; line-height: 1; width: 28px; height: 28px; padding: 0; flex: none; opacity: .85; }
.modal-close:hover { opacity: 1; }
.modal-body { padding: 12px; }
.modal-body p + p { margin-top: 8px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 9px 12px; background: #f3f5f8; border-top: 1px solid var(--line); }
.pad { display: block; width: 100%; aspect-ratio: 2 / 1; margin-top: 8px; background: #fff; border: 1px solid #c0cad5; touch-action: none; cursor: crosshair; }
.pad-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 12px; }
.pad-spacer { flex: 1; }
.chip-color { width: 22px; height: 22px; padding: 0; border: 2px solid #fff; outline: 1px solid #c0cad5; background: var(--chip); border-radius: 2px; }
.chip-color.selected { outline: 2px solid #36597e; }
dialog.dark { background: #1c2026; color: #e6e9ee; border-color: #000; }
.viewer-head { display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; }
.viewer-head > span:first-child, .viewer-who { flex: 1; min-width: 0; }
.viewer-who small { display: block; color: #9fb0c4; font-size: 11px; }
.viewer-stage { display: flex; align-items: center; justify-content: center; min-height: 220px; background: #111418; }
.viewer-pic { background: none; }
.viewer-pic img, .viewer-video { display: block; max-width: 100%; max-height: 68vh; width: auto; height: auto; object-fit: contain; margin: 0 auto; }
.viewer-pic.pic-missing { width: 100%; height: 220px; }
.viewer-message { color: #c9d2dc; padding: 30px 16px; text-align: center; }
.viewer-caption { padding: 8px 12px 0; }
.viewer-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.viewer-foot .muted { color: #9fb0c4; text-align: center; }
dialog.dark .btn { background: #2b323b; border-color: #3d4651; color: #dfe6ee; }
#toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; max-width: min(440px, calc(100vw - 24px)); background: rgba(34, 40, 48, .94); color: #fff; padding: 8px 14px; border-radius: 3px; text-align: center; }

/* --- phones ---------------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body { font-size: 14px; }
  input, textarea { font-size: 16px; } /* no zoom on focus in iOS */
  .top-inner { height: 44px; gap: 8px; }
  .brand { width: auto; }
  .top-search { flex: 1 1 auto; }
  .top-search input, .top-search button { height: 30px; }
  .top-name { display: none; }
  .layout { display: block; padding: 0 0 16px; }
  .sidenav { width: auto; background: #fff; border-bottom: 1px solid var(--line); }
  /* All seven sections stay visible: the menu wraps into two short rows. */
  .nav-list { flex-direction: row; flex-wrap: wrap; }
  .tabs::-webkit-scrollbar { display: none; }
  .nav-item { flex: 1 0 auto; justify-content: center; padding: 7px 10px; white-space: nowrap; border-radius: 0; border-bottom: 2px solid transparent; }
  .nav-item.active { background: none; border-bottom-color: #5e80a6; }
  .nav-full, .nav-note { display: none; }
  .nav-short { display: inline; }
  main { padding: 8px 8px 0; }
  .btn { min-height: 34px; font-size: 13px; }
  .block { margin-bottom: 8px; }

  /* The two columns dissolve into one ordered grid: avatar beside the name. */
  .page { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
  .page-left, .page-right, .avatar-block { display: contents; }
  .page .block, .page .counters, .page .notice { margin-bottom: 0; grid-column: 1 / -1; }
  .avatar-pic { order: 1; grid-column: 1; border: 1px solid var(--line); background: #fff; padding: 3px; align-self: start; }
  .avatar-pic .ava-xl { width: 96px; height: 96px; font-size: 34px; }
  .page .head { order: 2; grid-column: 2; align-self: stretch; }
  .actions { order: 3; grid-column: 1 / -1; margin-top: 0; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .actions .btn-block { width: auto; flex: 1 1 140px; }
  .actions .hint, .actions .relation { flex: 1 1 100%; margin-top: 0; }
  .page .notice { order: 4; }
  .page .info-block { order: 5; }
  .counters { order: 6; }
  .page .stories-block { order: 7; }
  .page-left > .mini { order: 8; }
  .page .wall { order: 9; }
  .mini-people { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .mini-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .info { grid-template-columns: 104px minmax(0, 1fr); }
  .closed { flex-direction: row; }
  .closed-ava .ava { width: 84px; height: 84px; font-size: 28px; }
  .person-row { flex-wrap: wrap; }
  .person-actions { flex: 1 1 100%; justify-content: flex-start; padding-left: 70px; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer { padding-top: 8px; }
}