@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --bg: #EEF1F6;
  --surface: #FFFFFF;
  --surface-2: #F3F5F9;
  --border: #DCE3EC;
  --border-strong: #C3CEDC;
  --text: #16181D;
  --text-dim: #5B6472;
  --text-faint: #93A0AF;
  --pink: #E30613;
  --purple: #0A2472;
  --orange: #FF9D00;
  --orange-text: #A85E00;
  --vkblue: #3B5998;
  --btn-primary: #2D81E0;
  --btn-primary-hover: #2570C4;
  --radius: 12px;
}

[data-theme="dark"]{
  --bg: #0D0D10;
  --surface: #17171B;
  --surface-2: #202024;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.16);
  --text: #EDEDEF;
  --text-dim: #9A9AA3;
  --text-faint: #66666D;
  --pink: #5B8DEF;
  --purple: #2FBF9F;
  --orange: #E8B04B;
  --orange-text: #E8B04B;
  --vkblue: #8FA6D6;
  --btn-primary: #4C8DFF;
  --btn-primary-hover: #6BA0FF;
  --radius: 14px;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
}

[data-theme="dark"] body{
  background-image: radial-gradient(circle at 15% -10%, rgba(91,141,239,0.10), transparent 45%),
                     radial-gradient(circle at 85% 0%, rgba(47,191,159,0.08), transparent 40%);
}

a{ color: inherit; text-decoration: none; }

.mono{ font-family: 'JetBrains Mono', monospace; }
.hint{ font-size: 0.84rem; color: var(--text-dim); margin: 0 0 0.6rem; }

/* ---------- top bar ---------- */
.topbar{
  position: sticky; top: 0; z-index: 10;
  padding: 0.6rem 0;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar-inner{
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  position: relative;
}
.topbar-logo-slot{ flex-shrink: 0; }
.topbar-center-slot{
  flex: 1; min-width: 0; max-width: 700px; overflow: visible;
  display:flex; align-items:center; gap: 0.6rem;
}
.topbar-right{
  display:flex; align-items:center; justify-content:flex-end; gap: 0.75rem; white-space: nowrap;
}
.logo{
  font-family: 'Unbounded', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  color: var(--purple);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.searchform{
  flex: 0 1 243px; min-width: 140px; max-width: 351px; display:flex; align-items:stretch;
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.searchform input,
#topSearchInput{
  flex: 1; min-width: 0;
  background: var(--surface-2);
  border: none;
  padding: 0.7rem 1rem;
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
}
.searchform input:focus,
#topSearchInput:focus{ outline: none; border: none; }
.search-submit-btn{
  flex-shrink: 0; border: none; background: var(--surface-2); color: var(--text-dim);
  padding: 0; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 0.78rem; font-weight: 500; cursor: pointer; font-family: 'Inter', sans-serif;
  display:flex; align-items:center; justify-content:center;
  transition: max-width 0.15s ease, opacity 0.15s ease, padding 0.15s ease;
}
.searchform.has-query .search-submit-btn{
  max-width: 90px; opacity: 1; padding: 0 0.9rem; border-left: 1px solid var(--border);
}
.search-submit-btn:hover{ background: var(--surface); color: var(--text); }

.tb-player-wrap{
  position: relative; display:flex; align-items:center; gap: 0.5rem;
  flex: 1 1 auto; min-width: 0;
}
.tb-player{
  display: none; align-items: center; gap: 0.6rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.35rem 1rem 0.35rem 0.6rem; max-width: 640px; flex: 1 1 auto; min-width: 0;
}
.tb-player.active{ display: flex; }

.tb-side-btn{
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 4px; border: none; cursor: pointer;
  background: transparent; color: var(--text-faint); font-size: 0.72rem;
  display:flex; align-items:center; justify-content:center; padding: 0;
}
.tb-side-btn:hover:not(:disabled){ color: var(--text); }
.tb-side-btn:disabled{ opacity: 0.3; cursor: default; }

.tb-queue-panel{
  display: none; position: absolute; top: 100%; left: 0; margin-top: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 0.4rem; width: 360px; max-height: 340px; overflow-y: auto;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); z-index: 15;
  scrollbar-width: none; -ms-overflow-style: none;
}
.tb-queue-panel::-webkit-scrollbar{ display: none; }
.tb-player-wrap:hover .tb-queue-panel.has-items{ display: block; }
.tb-queue-item{
  display:flex; align-items:center; gap: 0.5rem; padding: 0.35rem; border-radius: 8px; cursor: pointer;
}
.tb-queue-item:hover{ background: var(--surface-2); }
.tb-queue-item.is-current{ background: var(--surface-2); }
.tb-queue-item.is-current .tb-queue-title{ color: var(--purple); }
.tb-queue-playing-badge{ flex-shrink: 0; color: var(--purple); font-size: 0.9rem; }
.tb-queue-cover{
  width: 30px; height: 30px; border-radius: 6px; overflow: hidden; background: var(--surface-2);
  flex-shrink: 0; display:flex; align-items:center; justify-content:center; font-size: 0.75rem;
}
.tb-queue-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.tb-queue-info{ flex: 1; min-width: 0; }
.tb-queue-title{
  font-size: 0.78rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-queue-artist{
  font-size: 0.68rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tb-queue-more{
  display:block; width:100%; background:none; border:none; cursor:pointer;
  color: var(--text-dim); font-size: 0.76rem; padding: 0.4rem; text-align:center;
}
.tb-queue-more:hover{ color: var(--text); background: var(--surface-2); border-radius: 8px; }
.tb-cover{
  position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 8px;
  overflow: hidden; background: var(--surface); display:flex; align-items:center; justify-content:center; font-size: 0.85rem;
}
.tb-cover img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.tb-play-overlay{
  position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 8px;
  background: rgba(0,0,0,0); color: #fff; font-size: 0.65rem; cursor: pointer; outline: none;
  display:flex; align-items:center; justify-content:center; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.tb-player:hover .tb-play-overlay{ opacity: 1; background: rgba(0,0,0,0.45); }
.tb-player.playing .tb-play-overlay{ opacity: 1; background: rgba(0,0,0,0.45); }

.tb-info{ flex: 1; min-width: 0; display:flex; flex-direction: column; justify-content: center; gap: 1px; }
.tb-title{
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-artist{
  font-size: 0.7rem; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-seek{
  width: 100%; margin-top: 3px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
.tb-player:hover .tb-seek{ opacity: 1; pointer-events: auto; }

.tb-meta{ position: relative; flex-shrink: 0; width: 50px; height: 34px; display:flex; align-items:center; justify-content:flex-end; }
.tb-duration, .tb-timer{
  font-size: 0.68rem; color: var(--text-dim); white-space: nowrap;
}
.tb-timer{ display: none; }
.tb-player.playing .tb-duration{ display: none; }
.tb-player.playing .tb-timer{ display: inline-block; }

.tb-hover-stack{
  display: none; flex-direction: column; align-items: center; gap: 2px;
  position: absolute; inset: 0; justify-content: center; background: var(--surface-2);
}
.tb-player:hover .tb-duration,
.tb-player:hover .tb-timer{ visibility: hidden; }
.tb-player:hover .tb-hover-stack{ display: flex; }

.tb-volume{ width: 46px; flex-shrink: 0; }
.tb-save-btn{
  background: none; border: none; color: var(--text-dim); font-size: 1.35rem; font-weight: 800;
  cursor: pointer; flex-shrink: 0; padding: 0; line-height: 1; outline: none;
}
.tb-save-btn:hover{ color: var(--purple); }
.tb-save-btn.saved{ color: var(--purple); }

.mini-player-close{
  display: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-faint);
  font-size: 0.7rem; cursor:pointer; flex-shrink: 0; align-items:center; justify-content:center;
}
.tb-player.active + .mini-player-close{ display: flex; }
.mini-player-close:hover{ color: var(--pink); border-color: var(--pink); }

.logout-link{ color: var(--text-dim); font-size: 0.85rem; flex-shrink: 0; }
.logout-link:hover{ color: var(--pink); }

.topbar .handle-chip{
  display:flex; align-items:center; gap: 0.4rem;
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 0.3rem 0.7rem 0.3rem 0.4rem; border-radius: 999px; font-size: 0.85rem;
  cursor: pointer; color: var(--text); font-family: 'Inter', sans-serif;
}
.topbar .handle-chip .chevron{ color: var(--text-faint); font-size: 0.7rem; }
.profile-menu-wrap{ position: relative; }
.profile-menu{
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px;
  min-width: 190px; padding: 0.4rem; display: none; flex-direction: column;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25); z-index: 30;
}
.profile-menu.open{ display: flex; }
.profile-menu a{
  padding: 0.55rem 0.7rem; border-radius: 6px; font-size: 0.86rem; color: var(--text);
}
.profile-menu a:hover{ background: var(--surface-2); color: var(--pink); }
.menu-sep{ height: 1px; background: var(--border); margin: 0.3rem 0.2rem; }
.theme-toggle-item{
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 0.55rem 0.7rem; border-radius: 6px; font-size: 0.86rem; color: var(--text); font-family: inherit;
}
.theme-toggle-item:hover{ background: var(--surface-2); color: var(--pink); }

.avatar-tile{
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  display:flex; align-items:center; justify-content:center; font-size: 1rem; flex-shrink:0;
  overflow: hidden;
}
.avatar-tile.lg{ width: 52px; height: 52px; border-radius: 12px; font-size: 1.7rem; }
.avatar-tile.xl{ width: 96px; height: 96px; border-radius: 50%; font-size: 3rem; }
.avatar-tile.sm{ width: 24px; height: 24px; border-radius: 6px; font-size: 0.85rem; }
.avatar-tile.circle{ border-radius: 50%; }
.avatar-tile.has-image{ padding: 0; }
.avatar-tile img{ width: 100%; height: 100%; object-fit: cover; display: block; }



/* ---------- layout ---------- */
.app-shell{
  display: grid;
  grid-template-columns: 210px minmax(0, 600px) 1fr;
  gap: 1.5rem;
  max-width: 900px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
  align-items: start;
}
.app-shell.no-sidebar{ display:block; max-width: none; padding: 0; }
.app-shell.no-sidebar .page{ margin: 0 auto; max-width: 420px; }
.sidebar{ grid-column: 1; position: sticky; top: 76px; }
.sidebar a{
  display:block; width: 150px; max-width: 100%; padding: 0.45rem 0.75rem; border-radius: 8px; font-size: 0.9rem;
  color: var(--text-dim); margin-bottom: 0.15rem; font-weight: 500; box-sizing: border-box;
}
.notif-badge{
  display:inline-flex; align-items:center; justify-content:center; min-width: 18px; height: 18px;
  padding: 0 0.3rem; border-radius: 999px; background: var(--pink); color: #fff;
  font-size: 0.68rem; font-weight: 700; font-family: 'JetBrains Mono', monospace;
}
.sidebar a:hover{ background: var(--surface-2); color: var(--text); }
.sidebar a.active{ background: var(--surface-2); color: var(--text); font-weight: 700; }
.page{ grid-column: 2; min-width: 0; }
.flash{
  padding: 0.6rem 0.9rem; border-radius: 10px; font-size: 0.86rem; margin-bottom: 1rem;
  background: color-mix(in srgb, var(--pink) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--pink) 35%, transparent);
  color: var(--pink);
}

@media (min-width: 761px) and (max-width: 1010px){
  .app-shell{ grid-template-columns: 150px minmax(0, 400px) 1fr; }
  .sidebar a{ font-size: 0.85rem; padding: 0.55rem 0.6rem; }
}

@media (max-width: 760px){
  .app-shell{ display: block; padding: 1rem 0.75rem 4rem; }
  .sidebar{ position: static; width: 100%; display:flex; gap: 0.4rem; overflow-x: auto; padding-bottom: 0.25rem; margin-bottom: 0.5rem; }
  .sidebar a{ white-space: nowrap; margin-bottom: 0; }
  .page{ max-width: none; width: 100%; }
  .topbar-inner{ display:flex; flex-wrap: wrap; gap: 0.5rem; }
  .topbar-logo-slot{ width: auto; }
  .topbar-center-slot{ order: 3; flex-basis: 100%; max-width: none; }
  .topbar-right{ margin-left: auto; }
}

/* ---------- tabs ---------- */
.tabs-loose{ display:flex; align-items:center; gap: 1.1rem; margin-bottom: 0.9rem; }
.tabs-loose a{
  font-size: 0.92rem; font-weight: 500; color: var(--text-dim); padding: 0.35rem 0;
}
.tabs-loose a.active{
  background: var(--text); color: var(--surface); padding: 0.35rem 0.8rem; border-radius: 999px; font-weight: 600;
}

/* ---------- composer (twitter-style trigger + modal) ---------- */
.composer-fab{
  display:inline-flex; align-items:center; gap: 0.6rem; width: auto; max-width: 100%;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.55rem 1.1rem 0.55rem 0.55rem; margin-bottom: 0.9rem; cursor: pointer;
  color: var(--text-dim); font-family: 'Inter', sans-serif; font-size: 0.88rem; text-align: left;
}
.composer-fab:hover{ border-color: var(--purple); color: var(--text); }

.composer-overlay{
  position: fixed; inset: 0; background: rgba(10,10,14,0.6);
  display: none; align-items: flex-start; justify-content: center;
  padding: 8vh 1rem 1rem; z-index: 50;
}
.composer-overlay.open{ display:flex; }

.simple-modal-overlay{
  position: fixed; inset: 0; background: rgba(10,10,14,0.6);
  display: none; align-items: flex-start; justify-content: center;
  padding: 12vh 1rem 1rem; z-index: 60;
}
.simple-modal-overlay.open{ display:flex; }
.simple-modal{
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  width: 100%; max-width: 380px; padding: 0.85rem;
}
.simple-modal form{ display:flex; gap: 0.5rem; margin-top: 0.6rem; }
.simple-modal input[type="text"]{
  flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.5rem 0.9rem; color: var(--text); font-size: 0.86rem;
}
.simple-modal input[type="text"]:focus{ outline: none; }
.composer-modal{
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  width: 100%; max-width: 480px; padding: 0.75rem 0.85rem; max-height: 84vh; overflow-y: auto;
}
.composer-modal-head{
  display:flex; align-items:center; justify-content: space-between; margin-bottom: 0.6rem;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem;
}
.modal-close{ background:none; border:none; color: var(--text-dim); font-size: 1rem; cursor:pointer; }
.modal-close:hover{ color: var(--pink); }
.composer-text-wrap{ position: relative; }
.composer-modal textarea{
  width: 100%; min-height: 90px; max-height: 320px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-family: 'Inter', sans-serif; font-size: 0.92rem; line-height: 1.5; resize: none; overflow-y: auto;
  padding: 0.7rem 2.4rem 0.7rem 0.8rem;
  scrollbar-width: none; -ms-overflow-style: none;
}
.composer-modal textarea::-webkit-scrollbar{ display: none; }
.composer-modal textarea:focus{ outline: none; box-shadow: none; border-color: var(--border); }
.composer-emoji-btn{ position: absolute; top: 6px; right: 6px; }
.composer-media-row{ margin-top: 0.55rem; }
.char-count{ font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; color: var(--text-faint); white-space: nowrap; }

.composer-bottom-row{ display:flex; align-items:center; justify-content: space-between; gap: 0.75rem; margin-top: 0.5rem; }
.composer-bottom-left{ display:flex; align-items:center; gap: 0.5rem; }
.composer-bottom-right{ display:flex; align-items:center; gap: 0.75rem; }

.tool-btn{
  width: 30px;
  height: 30px;

  border-radius: 7px;

  background: transparent;
  border: 1px solid transparent;

  font-size: 0.95rem;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; padding: 0; margin: 0; line-height: 1; vertical-align: middle; font-family: inherit;

  color: var(--text-dim);

  transition: background 0.12s ease, color 0.12s ease;
}

.tool-btn:hover{
  background: var(--surface-2);
  color: var(--text);
  border-color: transparent;
}

.tool-btn:active{
  transform: scale(0.96);
}

/* compact variant (как в VK actions row) */
.tool-btn.labeled{
  height: 28px;
  padding: 0 0.55rem;

  width: auto;

  font-size: 0.75rem;
  font-weight: 500;

  border-radius: 7px;
  gap: 0.35rem;
}
.tool-btn i{ font-style: normal; display:flex; align-items:center; justify-content:center; line-height: 1; }

/* floating emoji popover, positioned near the emoji trigger (VK-style) */
.emoji-panel{
  display: none; flex-wrap: wrap; gap: 0.3rem;
  position: absolute; top: 34px; left: 0; z-index: 15;
  width: 260px; max-height: 190px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.6rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  scrollbar-width: none; -ms-overflow-style: none;
}
.emoji-panel::-webkit-scrollbar{ display: none; }
.emoji-panel.open{ display: flex; }
.emoji-pick{
  width: 32px; height: 32px; background: none; border: none; border-radius: 6px;
  font-size: 1.15rem; cursor: pointer;
}

.post-head-right{ display:flex; align-items:center; gap: 0.4rem; margin-left: auto; }
.post-more-wrap{ position: relative; }
.post-more-btn{ font-size: 1.1rem; letter-spacing: 1px; }
.more-menu{
  display: none; flex-direction: column; min-width: 160px; z-index: 15;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 0.35rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}
.more-menu.open{ display: flex; }
.more-menu-item{
  background: none; border: none; text-align: left; padding: 0.5rem 0.6rem; border-radius: 7px;
  font-size: 0.84rem; color: var(--text); cursor: pointer; font-family: 'Inter', sans-serif;
}
.more-menu-item:hover{ background: var(--surface-2); }
.more-menu-item.danger{ color: var(--pink); }
.emoji-pick:hover{ background: var(--surface-2); }

/* ---------- media preview in composer ---------- */
.media-preview-grid{
  display: none; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; margin-top: 0.6rem;
}
.media-preview-grid:not(:empty){ display: grid; }
.preview-item{ position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1/1; background: var(--surface-2); }
.preview-item img, .preview-item video{ width: 100%; height: 100%; object-fit: cover; display: block; }
.preview-remove{
  position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 0.7rem; cursor: pointer;
  display:flex; align-items:center; justify-content:center; padding: 0;
}
.preview-item{ cursor: grab; }
.preview-item.dragging{ opacity: 0.4; }
.preview-item.drag-over{ outline: 2px solid var(--purple); outline-offset: -2px; }
.audio-preview-item{ cursor: grab; }
.audio-preview-item.dragging{ opacity: 0.4; }
.audio-preview-item.drag-over{ outline: 2px solid var(--purple); outline-offset: -2px; }
.audio-preview-list{ display: none; flex-direction: column; gap: 6px; margin-top: 0.5rem; }
.audio-preview-list:not(:empty){ display: flex; }
.audio-preview-item{
  display:flex; align-items:center; justify-content: space-between; gap: 0.5rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.4rem 0.6rem;
  font-size: 0.82rem;
}
.audio-preview-name{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-remove-inline{ background: none; border: none; color: var(--pink); cursor: pointer; font-size: 0.8rem; flex-shrink: 0; padding: 0; }

/* ---------- media inside a posted post ---------- */
.post-media-grid{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px;
  border-radius: 12px; overflow: hidden; margin-bottom: 0.7rem;
}
.post-media-grid img, .post-media-grid video{ width: 100%; height: 200px; object-fit: cover; display: block; border-radius: 8px; }
.post-media-grid img{ cursor: zoom-in; }
.post-media-grid.count-1{ grid-template-columns: 1fr; background: var(--surface-2); }
.post-media-grid.count-1 img, .post-media-grid.count-1 video{
  height: auto; max-height: 520px; width: 100%; object-fit: contain;
}
.post-media-grid.count-3 > :first-child{ grid-column: span 2; }
.post-media-grid.count-5 > :nth-child(5){ grid-column: span 2; }

.media-play-icon{
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.55); color: #fff;
  display:flex; align-items:center; justify-content:center; font-size: 1.1rem; cursor: pointer; pointer-events: none;
}
.media-tile video{ cursor: pointer; }

.post-audio-list{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 0.7rem; }
.audio-item{
  display:flex; flex-direction: column; gap: 0.35rem;
  background: transparent; border: 1px solid transparent; border-radius: 10px;
  padding: 0.5rem 0.7rem; transition: background 0.15s, border-color 0.15s;
}
.audio-item:hover{ background: var(--surface-2); border-color: var(--border); }
.audio-item-row{ display:flex; align-items:center; gap: 0.6rem; cursor: pointer; }
.audio-item-actions-row{ display:flex; justify-content: flex-end; }
.audio-item-play{
  width: 34px; height: 34px; border-radius: 50%; background: #2f2f8f; color: #fff; border: none;
  flex-shrink: 0; font-size: 0.85rem; cursor: pointer; display:flex; align-items:center; justify-content:center;
}
[data-theme="dark"] .audio-item-play{ background: var(--pink); }
.audio-name{
  flex: 1; min-width: 0; font-size: 0.84rem; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.audio-item-body{ flex: 1; min-width: 0; display:flex; flex-direction: column; gap: 4px; }
.audio-item-body .audio-name{ flex: none; }
.audio-item-seek{
  display: none; width: 100%; accent-color: var(--pink); cursor: pointer;
}
.is-playing .audio-item-seek{ display: block; }

/* ---------- VK-style music card ---------- */
.music-card{
  position: relative;
  display:flex; align-items:center; gap: 0.6rem;
  height: 52px; padding: 0 0.5rem; max-width: 450px;
  border-radius: 10px; cursor: pointer; transition: background 0.15s ease;
}
.music-card:hover{ background: var(--surface-2); }
.music-cover{
  position: relative; flex-shrink: 0; width: 38px; height: 38px; border-radius: 8px;
  overflow: hidden; background: var(--surface-2); display:flex; align-items:center; justify-content:center;
}
.music-cover img{ width:100%; height:100%; object-fit:cover; display:block; }
.music-cover-fallback{ font-size: 1.05rem; opacity: 0.6; }
.music-play-overlay{
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px;
  background: rgba(0,0,0,0); color: #fff; font-size: 0.85rem; border: none;
  display:flex; align-items:center; justify-content:center; opacity: 0; transition: opacity 0.15s ease, background 0.15s ease;
}
.music-card:hover .music-play-overlay{ opacity: 1; background: rgba(0,0,0,0.4); }
.music-card.is-playing .music-play-overlay{ opacity: 1; background: rgba(0,0,0,0.4); }
[data-theme="dark"] .music-play-overlay{ background: rgba(0,0,0,0); }
[data-theme="dark"] .music-card:hover .music-play-overlay,
[data-theme="dark"] .music-card.is-playing .music-play-overlay{ background: rgba(0,0,0,0.4); }

.music-info{ flex: 1; min-width: 0; display:flex; flex-direction: column; justify-content: center; gap: 1px; }
.music-title{
  font-size: 0.82rem; font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.music-artist{
  font-size: 0.7rem; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* thin fill-bar sliders, no round thumb — used for both progress and volume */
.bar-slider{
  -webkit-appearance: none; appearance: none; height: 3px; border-radius: 3px; cursor: pointer;
  outline: none; border: none; padding: 0; margin: 0; vertical-align: middle;
  background: linear-gradient(to right, var(--purple) 0%, var(--border-strong) 0%);
}
.bar-slider::-webkit-slider-runnable-track{
  -webkit-appearance: none; height: 3px; border-radius: 3px; background: transparent; border: none;
}
.bar-slider::-moz-range-track{ background: transparent; height: 3px; border-radius: 3px; border: none; }
.bar-slider::-webkit-slider-thumb{
  -webkit-appearance: none; width: 0; height: 0; background: transparent; border: none; box-shadow: none;
  margin-top: 0;
}
.bar-slider::-moz-range-thumb{ width: 0; height: 0; border: none; background: transparent; }
.bar-slider::-moz-focus-outer{ border: 0; }
.bar-slider:focus{ outline: none; }

.music-progress-slider.bar-slider{
  width: 100%; height: 2px; flex-shrink: 0; margin-top: 3px;
  opacity: 0; pointer-events: none; transition: opacity 0.15s ease;
}
/* progress only appears while this track is actually playing — hover alone does nothing when idle */
.music-card.is-playing .music-progress-slider{ opacity: 1; pointer-events: auto; }

.music-meta{ position: relative; flex-shrink: 0; width: 46px; height: 34px; display:flex; align-items:center; justify-content:flex-end; }
.music-duration{
  font-size: 0.7rem; color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
.music-timer{
  font-size: 0.7rem; color: var(--text-dim); white-space: nowrap; display: none;
}
/* while playing: duration is replaced by a live elapsed timer */
.music-card.is-playing .music-duration{ display: none; }
.music-card.is-playing .music-timer{ display: block; }

/* hovering: whatever was showing (duration or timer) is covered by
   the save button — and, if a track is actually playing, the volume
   slider appears right underneath it */
.music-hover-controls{
  display: none; flex-direction: column; align-items: center; gap: 3px;
  position: absolute; inset: 0; width: 100%; justify-content: center;
  background: var(--surface-2);
}
.music-card:hover .music-duration,
.music-card:hover .music-timer{ visibility: hidden; }
.music-card:hover .music-hover-controls{ display: flex; }
.music-hover-controls .music-volume-slider{ display: none; }
.music-card.is-playing:hover .music-hover-controls .music-volume-slider{ display: block; }

.music-save-btn{
  width: 22px; height: 18px; border-radius: 0; padding: 0; border: none; cursor: pointer;
  background: transparent; color: var(--text-dim); font-size: 1.3rem; font-weight: 700; line-height: 1;
  display:flex; align-items:center; justify-content:center; flex-shrink: 0;
}
.music-save-btn:hover{ color: var(--purple); }
.music-save-btn.saved{ color: var(--purple); }
.music-volume-slider.bar-slider{ width: 100%; height: 2px; flex-shrink: 0; }

.library-audio-wrap{ margin-bottom: 0.4rem; }
.library-audio-uploader{ display:block; margin: 0 0 0.15rem 0.5rem; font-size: 0.7rem; }

.btn{
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  border: none; border-radius: 10px; padding: 0 14px; height: 34px; font-weight: 600; font-size: 0.81rem;
  cursor: pointer; font-family: 'Inter', sans-serif; line-height: 1; vertical-align: middle; margin: 0;
  background: var(--btn-primary); color: #fff; transition: background 0.15s ease;
}
.btn:hover{ background: var(--btn-primary-hover); filter: none; }
.btn.ghost{
  background: transparent; border: 1px solid var(--border-strong); color: var(--text);
}
.btn.ghost:hover{ border-color: var(--btn-primary); color: var(--btn-primary); background: var(--surface-2); }
.btn.sm{ padding: 0 11px; height: 30px; font-size: 0.76rem; }

/* ---------- post card ---------- */
.post{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.feed-posts .post{ max-width: calc(100% - 106px); }
.profile-posts .post{ margin-left: 106px; max-width: calc(100% - 106px); }
.load-more-posts-btn{ display:block; width: 100%; text-align:center; margin-top: 0.6rem; }
.feed-posts + .load-more-posts-btn{ max-width: calc(100% - 106px); }
.profile-posts + .load-more-posts-btn{ margin-left: 106px; max-width: calc(100% - 106px); }
@media (max-width: 600px){
  .feed-posts .post{ max-width: none; }
  .profile-posts .post{ margin-left: 0; max-width: none; }
  .feed-posts + .load-more-posts-btn{ max-width: none; }
  .profile-posts + .load-more-posts-btn{ margin-left: 0; max-width: none; }
  .notif-row{ max-width: none; }
}
.vote-row{ display:flex; align-items:center; gap: 1rem; }
.like-btn, .dislike-btn{
  background: none; border: none; cursor: pointer; color: var(--text-faint); line-height: 1;
  padding: 0; display:flex; align-items:center; gap: 0.35rem; font-size: 0.85rem;
  font-family: 'Inter', sans-serif; transition: color 0.15s;
}
.like-btn:hover{ color: color-mix(in srgb, var(--pink) 70%, var(--text-faint)); }
.like-btn.liked{ color: var(--pink); }
.like-btn.liked:hover{ color: color-mix(in srgb, var(--pink) 80%, black); }
.dislike-btn:hover{ color: var(--text-dim); }
.dislike-btn.disliked{ color: var(--text); }
.dislike-btn.disliked:hover{ color: color-mix(in srgb, var(--text) 70%, black); }
.vote-count{ font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: inherit; }
.post-head{ display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.handle-tag{
  font-family: 'Inter', sans-serif; font-size: 0.86rem; font-weight: 600;
  background: none; color: var(--vkblue); padding: 0;
}
.timestamp{ font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; color: var(--text-faint); margin-left: auto; }
.post-text{ font-size: 0.96rem; line-height: 1.55; white-space: pre-wrap; word-break: break-word; margin-bottom: 0.6rem; }
.mention-link{ color: var(--vkblue); font-weight: 500; }
.mention-link:hover{ text-decoration: underline; }
.post-foot{ display:flex; align-items:center; gap: 1rem; }
.link-btn{
  background:none; border:none; cursor:pointer; color: var(--vkblue); font-size: 0.82rem; font-family: 'Inter', sans-serif; padding: 0;
}
.link-btn:hover{ color: var(--pink); }

/* ---------- comments ---------- */
.comment-body{ background: var(--surface); padding: 0; flex: 1; }
.comment-meta{ font-size: 0.72rem; color: var(--text-dim); margin-bottom: 0.1rem; }
.comment-author-link{ color: var(--text); font-size: 0.8rem; }
.comment-author-link:hover{ color: var(--purple); }
.comment-meta b{ color: var(--text); }
.comment-text{ font-size: 0.86rem; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.comment-form{ display:block; margin-top: 0.6rem; }
.comment-form textarea{
  width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.5rem 0.9rem; color: var(--text); font-size: 0.84rem;
  font-family: 'Inter', sans-serif; resize: none; overflow-y: auto; min-height: 34px; max-height: 200px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.comment-form textarea::-webkit-scrollbar{ display: none; }
.comment-form textarea:focus{ outline: none; box-shadow: none; border-color: var(--border); }
.comment-form-toolbar{ display:flex; align-items:center; gap: 0.6rem; margin-top: 0.5rem; }
.comment-media-preview{ margin-top: 0.5rem; }

/* ---------- empty state ---------- */
.empty{
  text-align:center; padding: 3rem 1rem; color: var(--text-dim);
}
.empty .big{ font-size: 2rem; margin-bottom: 0.5rem; }

/* ---------- auth pages ---------- */
.auth-wrap{ max-width: 380px; margin: 2.5rem auto; padding: 0 1rem; text-align:center; }
.auth-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.75rem; margin-top: 1.5rem; text-align: left;
}
.tagline{ font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: var(--text-dim); margin-top: 0.4rem; }
.auth-choice{ display:flex; flex-direction: column; gap: 0.75rem; }
.auth-choice .btn{ width: 100%; }
.password-field{ position: relative; }
.password-field input{ padding-right: 2.4rem; }
.password-toggle{
  position: absolute; right: 0.3rem; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; background: none; cursor: pointer;
  color: var(--text-dim); display:flex; align-items:center; justify-content:center;
}
.password-toggle:hover{ color: var(--text); }
.password-toggle .eye-slash{
  display: none; position: absolute; width: 17px; height: 1.5px; background: currentColor;
  transform: rotate(-45deg); border-radius: 2px;
}
.password-toggle.showing .eye-slash{ display: block; }
label{ display:block; font-size: 0.8rem; color: var(--text-dim); margin: 0.9rem 0 0.3rem; }
input[type=text], input[type=password]{
  width: 100%; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 0.6rem 0.75rem; color: var(--text); font-size: 0.92rem;
}
input[type=text]:focus, input[type=password]:focus{ outline: none; border-color: var(--purple); }
.auth-card .btn{ width: 100%; margin-top: 1.25rem; padding: 0.65rem; }
.switch-link{ text-align:center; margin-top: 1rem; font-size: 0.85rem; color: var(--text-dim); }
.switch-link a{ color: var(--pink); font-weight: 500; }

/* ---------- search results / profile ---------- */
.user-row{
  display:flex; align-items:center; gap: 0.75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.75rem 1rem; margin-bottom: 0.6rem;
}
.user-row .uinfo{ flex:1; min-width:0; }
.user-row .uname{ font-weight: 500; font-size: 0.95rem; word-break: break-word; overflow-wrap: break-word; }
.user-row .ubio{ font-size: 0.8rem; color: var(--text-dim); word-break: break-word; overflow-wrap: break-word; }

.profile-head-wrap{ display:flex; gap: 1.1rem; align-items:flex-start; margin-bottom: 1.5rem; }
.profile-avatar-block{ flex-shrink: 0; padding-top: 0.2rem; }
.profile-composer-row{ display:flex; gap: 1.1rem; margin-bottom: 1.75rem; }
.profile-avatar-spacer{ flex-shrink: 0; width: 96px; }
.profile-composer-col{ flex: 1; min-width: 0; }
.create-post-trigger{ width: fit-content; display: block; margin: 0 auto; }
.profile-card{
  flex: 1; min-width: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.25rem;
}
.profile-card-top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 0.75rem; }
.profile-actions-col{ display:flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.profile-stats{ display:flex; gap: 1.25rem; margin-top: 0.4rem; font-size: 0.82rem; color: var(--text-dim); }
.profile-stats a{ color: var(--text-dim); }
.profile-stats a:hover{ color: var(--pink); }
.profile-stats b{ color: var(--text); font-family: 'JetBrains Mono', monospace; }

.profile-name{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.2rem; margin-bottom: 0.15rem; line-height: 1.25; word-break: break-word; overflow-wrap: break-word; }
.profile-handle-row{ display:flex; align-items:center; gap: 0.3rem; margin-bottom: 0.35rem; color: var(--text-dim); font-size: 0.85rem; }
.profile-bio-row{ display:flex; align-items:baseline; gap: 0.5rem; font-size: 0.86rem; color: var(--text-dim); margin-bottom: 0.3rem; word-break: break-word; overflow-wrap: break-word; }
.edit-link{ background:none; border:none; color: var(--vkblue); font-size: 0.78rem; cursor:pointer; padding:0; flex-shrink:0; }
.edit-link:hover{ color: var(--pink); }
.profile-meta-row{ font-size: 0.82rem; color: var(--text-dim); margin-top: 0.6rem; display:flex; align-items:center; gap: 0.4rem; }
.city-dot{ color: var(--purple); flex-shrink: 0; }
.profile-links-row{ display:flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; }
.social-chip{
  display:inline-flex; align-items:center; gap: 0.35rem; border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 0.2rem 0.5rem; font-size: 0.8rem; color: var(--text);
}
.social-chip:hover{ border-color: var(--purple); }
.social-chip .chip-label{
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; border: 1px solid var(--border-strong);
  border-radius: 4px; padding: 0 0.3rem; color: var(--text-dim);
}
.edit-profile-form{
  display:none; margin-top: 0.85rem; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.8rem 0.9rem 0.9rem;
}
.edit-profile-form.open{ display:block; }
.edit-profile-form label{ margin: 0.55rem 0 0.2rem; font-size: 0.76rem; }
.edit-profile-form label:first-child{ margin-top: 0; }
.edit-profile-form input{ padding: 0.45rem 0.6rem; font-size: 0.85rem; }


/* ---------- badges ---------- */
.admin-badge{
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 500;
  color: var(--text-dim); margin-left: 0.3rem; vertical-align: middle;
}
.banned-badge{
  font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 500;
  background: color-mix(in srgb, var(--pink) 14%, transparent); color: var(--pink); padding: 0.08rem 0.4rem; border-radius: 999px;
  margin-left: 0.3rem; vertical-align: middle;
}
.link-btn.danger{ color: var(--pink); }
.link-btn.danger:hover{ color: #ff6b6b; }
.btn.ghost.danger{ border-color: color-mix(in srgb, var(--pink) 40%, transparent); color: var(--pink); }
.btn.ghost.danger:hover{ background: color-mix(in srgb, var(--pink) 10%, transparent); }

/* ---------- settings / admin ---------- */
.section-title{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.15rem; margin: 0 0 1.25rem; }

.settings-layout{ display:flex; gap: 1.5rem; align-items: flex-start; }
.settings-menu{ flex-shrink: 0; width: 190px; display:flex; flex-direction: column; gap: 0.3rem; }
.settings-menu-btn{
  display:block; width: 100%; text-align: left; box-sizing: border-box;
  background: transparent; border: none; color: var(--text-dim);
  border-radius: 8px; padding: 0.45rem 0.75rem; font-size: 0.9rem; font-weight: 500; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.settings-menu-btn:hover{ background: var(--surface-2); color: var(--text); }
.settings-menu-btn.active{ background: var(--surface-2); color: var(--text); font-weight: 700; }
.settings-content{ flex: 1; min-width: 0; }
.settings-block-title{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem; margin: 1.4rem 0 0.75rem; }
.settings-block-title:first-child{ margin-top: 0; }
.settings-block{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.settings-block h3{ font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.92rem; margin: 0 0 0.75rem; }
.avatar-settings-preview{ margin-bottom: 0.9rem; }
.avatar-upload-form{ display:flex; align-items:center; gap: 0.5rem; margin-bottom: 0.5rem; }
.avatar-upload-form form{ margin: 0; display:flex; }
.avatar-grid{ display:flex; flex-wrap: wrap; gap: 0.5rem; }
.avatar-pick{
  width: 44px; height: 44px; border-radius: 10px; font-size: 1.3rem;
  background: var(--surface-2); border: 1px solid var(--border); cursor: pointer;
}
.avatar-pick:hover{ border-color: var(--purple); }
.avatar-pick.selected{ border-color: var(--pink); background: color-mix(in srgb, var(--pink) 10%, transparent); }

.report-row{
  border-bottom: 1px solid var(--border); padding: 0.75rem 0;
}
.report-row:last-child{ border-bottom: none; }
.report-meta{ font-size: 0.8rem; color: var(--text-dim); margin-bottom: 0.3rem; }
.report-reason{ font-size: 0.85rem; color: var(--pink); margin-bottom: 0.3rem; }
.report-post-text{
  font-size: 0.86rem; background: var(--surface-2); border-radius: 8px; padding: 0.5rem 0.7rem;
  margin-bottom: 0.6rem; white-space: pre-wrap; word-break: break-word;
}
.report-actions{ display:flex; gap: 0.5rem; }

/* ---------- media library ---------- */
.media-search{ display:flex; gap: 0.5rem; margin-bottom: 0.5rem; }
.media-search input{
  flex:1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.5rem 1rem; color: var(--text); font-size: 0.88rem;
}
.media-search input:focus{ outline: none; }
.library-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.library-video-item{ position: relative; border-radius: 10px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.library-video-item video{ width: 100%; height: 110px; object-fit: cover; display: block; background: #000; cursor: pointer; }
.library-item-meta{ padding: 0.4rem 0.5rem; display:flex; flex-direction: column; gap: 4px; }
.library-item-meta .mono{ font-size: 0.72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.library-item-meta .hint{ font-size: 0.7rem; margin: 0; }
.library-audio-item{ margin-bottom: 0.6rem; }

/* ---------- save-to-library buttons ---------- */
.media-tile{ position: relative; }
.tile-more-wrap{ position: absolute; top: 6px; right: 6px; z-index: 2; }
.tile-more-btn{
  width: 22px; height: 22px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(20,20,24,0.45); color: rgba(255,255,255,0.75); font-size: 0.9rem;
  display:flex; align-items:center; justify-content:center; opacity: 0.55; transition: opacity 0.15s ease;
}
.tile-more-btn:hover{ opacity: 1; background: rgba(20,20,24,0.7); }
.save-overlay-btn{
  position: absolute; top: 6px; right: 6px;
  border-radius: 999px; border: none; cursor: pointer; white-space: nowrap;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; padding: 0.3rem 0.6rem;
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.media-tile:hover .save-overlay-btn, .media-tile:focus-within .save-overlay-btn{ opacity: 1; pointer-events: auto; }
.save-overlay-btn.saved{ background: color-mix(in srgb, var(--pink) 70%, rgba(0,0,0,0.6)); }

.audio-item-info{ flex: 1; min-width: 0; display:flex; flex-direction: column; gap: 2px; }
.audio-item-info .audio-name{ flex: none; }
.save-inline-btn{
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; cursor:pointer;
  font-size: 0.7rem; padding: 0.25rem 0.55rem; flex-shrink: 0; white-space: nowrap; color: var(--text);
  opacity: 0; pointer-events: none; transition: opacity 0.15s;
}
.audio-item:hover .save-inline-btn{ opacity: 1; pointer-events: auto; }
.save-inline-btn.saved{ border-color: var(--pink); color: var(--pink); }
.btn.ghost.saved{ border-color: var(--pink); color: var(--pink); }

/* ---------- lightbox ---------- */
.lightbox-overlay{
  position: fixed; inset: 0; background: rgba(5,5,8,0.9); display:none;
  align-items: center; justify-content: center; z-index: 80; padding: 2rem;
}
.lightbox-overlay.open{ display:flex; }
.lightbox-overlay img{ max-width: 100%; max-height: 100%; border-radius: 8px; }
.lightbox-nav{
  position: fixed; top: 0; bottom: 0; width: 15vw; min-width: 90px; max-width: 180px;
  border: none; cursor: pointer; background: transparent; color: rgba(255,255,255,0.5);
  font-size: 2.6rem; display:flex; align-items:center; z-index: 85;
  transition: background 0.15s ease, color 0.15s ease;
}
.lightbox-nav-prev{ left: 0; justify-content: flex-start; padding-left: 1.25rem; }
.lightbox-nav-next{ right: 0; justify-content: flex-end; padding-right: 1.25rem; }
.lightbox-nav:hover{ background: rgba(255,255,255,0.08); color: #fff; }
.lightbox-overlay video{ max-width: 100%; max-height: 100%; border-radius: 8px; }

/* ---------- on-site confirm modal ---------- */
.confirm-overlay{
  position: fixed; inset: 0; background: rgba(5,5,8,0.6); display:none;
  align-items: center; justify-content: center; z-index: 90; padding: 1rem;
}
.confirm-overlay.open{ display:flex; }
.confirm-modal{
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 1.25rem 1.4rem; max-width: 320px; width: 100%; text-align: center;
}
.confirm-modal p{ font-size: 0.92rem; margin: 0 0 1.1rem; color: var(--text); }
.confirm-actions{ display:flex; gap: 0.6rem; justify-content: center; }
.confirm-danger{ background: var(--pink); }

@media (max-width: 480px){
  .tb-player-wrap{ flex-basis: 100%; }
  .tb-player{ max-width: none; }
}

/* ---------- privacy settings ---------- */
.privacy-form{ display:flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.privacy-option{ display:flex; align-items:center; gap: 0.5rem; font-size: 0.88rem; cursor: pointer; }

/* ---------- latest audio on profile ---------- */


/* ---------- load more comments ---------- */
.load-more-comments{ display:block; margin-bottom: 0.5rem; font-size: 0.8rem; }

/* ---------- edit post ---------- */
.edit-post-form{ display:none; margin-bottom: 0.6rem; }
.edit-post-form.open{ display:block; }
.edit-post-form textarea{
  width: 100%; min-height: 80px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.92rem;
  padding: 0.6rem 0.7rem; resize: vertical;
}
.edit-post-form textarea:focus{ outline: none; }
.edit-post-actions{ display:flex; gap: 0.5rem; justify-content: flex-end; margin-top: 0.5rem; }

.comment-edit-form{ display:none; margin-top: 0.4rem; }
.comment-edit-form.open{ display:block; }
.comment-edit-form textarea{
  width: 100%; min-height: 50px; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.84rem;
  padding: 0.5rem 0.7rem; resize: none;
}
.comment-edit-form textarea:focus{ outline: none; }
.comment-edit-actions{ display:flex; gap: 0.4rem; justify-content: flex-end; margin-top: 0.35rem; }

.edit-existing-media{ display:flex; flex-wrap: wrap; gap: 6px; margin-top: 0.5rem; }
.edit-media-thumb{
  position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); flex-shrink: 0;
}
.edit-media-thumb img, .edit-media-thumb video{ width:100%; height:100%; object-fit:cover; display:block; }
.edit-media-thumb.edit-media-audio{
  width: auto; max-width: 160px; height: 34px; display:flex; align-items:center; padding: 0 1.6rem 0 0.5rem;
  font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.edit-media-remove{
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,0.6); color: #fff; font-size: 0.6rem; cursor: pointer; z-index: 2;
  display:flex; align-items:center; justify-content:center;
}
.edit-media-remove input{ position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.edit-media-remove:has(input:checked){ background: var(--pink); }
.edit-media-thumb:has(input:checked){ opacity: 0.35; }
.edit-media-add-row{ display:flex; gap: 0.5rem; margin-top: 0.5rem; }

/* ---------- latest comment preview ---------- */
.latest-comment-preview{ margin-bottom: 0.6rem; }
.latest-comment-preview .comment{ padding: 0; }

/* ---------- admin quick actions on profile ---------- */
.admin-quick-actions{
  display:flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.9rem;
  padding-top: 0.75rem; border-top: 1px dashed var(--border);
}

/* ---------- avatar as a lightbox trigger ---------- */
.avatar-lightbox-trigger{ background:none; border:none; padding:0; cursor: zoom-in; display:block; }

/* ---------- report media (admin) ---------- */
.report-media-grid{ display:flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0.6rem; }
.report-media-grid img, .report-media-grid video{
  width: 90px; height: 70px; object-fit: cover; border-radius: 6px; background: #000;
}
.report-media-audio{
  display:flex; align-items:center; padding: 0 0.5rem; background: var(--surface-2);
  border-radius: 6px; font-size: 0.75rem;
}

/* ---------- single media page ---------- */
.media-view-block{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }

/* ---------- audio row reflects mini-player play state ---------- */
.is-playing .audio-item-play{ background: var(--text); }
.is-playing .audio-name{ color: var(--pink); }

/* ---------- soft-deleted post placeholder ---------- */
.post-deleted-placeholder{
  display:none; align-items:center; justify-content: space-between; gap: 1rem;
  background: color-mix(in srgb, var(--pink) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--pink) 35%, transparent);
  border-radius: var(--radius); padding: 1rem 1.1rem; color: var(--pink); font-size: 0.9rem;
}
.post-deleted-placeholder .link-btn{ color: var(--pink); font-weight: 600; }

/* ---------- avatar edit actions (profile + settings) ---------- */
.avatar-edit-actions{ display:none; }
.avatar-edit-actions.open{ display:flex; flex-direction: column; align-items: stretch; gap: 0.4rem; margin-top: 0.75rem; width: 96px; }
.avatar-edit-actions form{ margin: 0; }
.avatar-edit-actions .btn{ width: 100%; }
.avatar-preview-inline{ display:none; }
.avatar-preview-inline.show{ display:block; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.avatar-preview-inline img{ width:100%; height:100%; object-fit:cover; }
.avatar-settings-preview{ margin-bottom: 0.5rem; }

/* ---------- inline composer (profile pages, always expanded, no fab/modal) ---------- */
.composer-inline-wrap{ margin-bottom: 1.75rem; }
.composer-inline-wrap .composer-modal{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.1rem; max-width: none;
}

/* ---------- audio picker modal ---------- */
.audio-picker-overlay{
  position: fixed; inset: 0; background: rgba(5,5,8,0.6); display:none;
  align-items: center; justify-content: center; z-index: 60; padding: 1rem;
}
.audio-picker-overlay.open{ display:flex; }
.audio-picker-modal{
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  width: 100%; max-width: 400px; padding: 1.1rem 1.2rem; max-height: 80vh; overflow-y: auto;
}
.audio-picker-list{ display:flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; min-height: 40px; }
.audio-picker-item{
  display:flex; align-items:center; justify-content: space-between; gap: 0.6rem;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 0.5rem 0.7rem;
}
.audio-picker-item .audio-name{ flex: 1; min-width: 0; }
.audio-picker-item.attached{ opacity: 0.5; pointer-events: none; }
.audio-picker-foot{ display:flex; align-items:center; justify-content: space-between; margin-top: 0.75rem; gap: 0.5rem; }

/* ---------- comments: unified list, replies, media ---------- */
.comments-block{ margin-bottom: 0.7rem; }
.comments-list.collapsed .comment:not(:last-child){ display: none; }
.comment{ display:flex; gap: 0.55rem; padding: 0.45rem 0; align-items: flex-start; }
.comment-avatar{ flex-shrink: 0; width: 30px !important; height: 30px !important; font-size: 0.95rem !important; border-radius: 8px !important; }
.comment-actions{ display:flex; gap: 0.75rem; margin-top: 0.25rem; }
.reply-link{
  background:none; border:none; padding:0; cursor:pointer;
  color: var(--text-faint); font-size: 0.72rem; font-family: 'Inter', sans-serif;
}
.reply-link:hover{ color: var(--pink); }
.comment-media-list{ display:flex; flex-wrap: wrap; gap: 8px; margin: 0.5rem 0; }
.comment-media-list .music-card{ flex-basis: auto; width: 100%; max-width: 336px; padding-left: 0; }
.comment-media-thumb{
  width: 88px; height: 88px; object-fit: cover; border-radius: 10px; cursor: pointer; background: #000;
  display: block;
}
.comment-media-video{ position: relative; overflow: hidden; }
.comment-media-video video{ width: 100%; height: 100%; object-fit: cover; display: block; }

/* a single attached photo/video fills the comment's width at its own
   natural aspect ratio, instead of being cropped into a small square */
.comment-media-list:has(> :only-child) > .comment-media-thumb{
  width: 100%; max-width: 100%; height: auto; max-height: 420px; object-fit: contain; background: var(--surface-2);
}
.comment-media-list:has(> :only-child) > .comment-media-video{ width: 100%; height: auto; max-height: 420px; }
.comment-media-list:has(> :only-child) > .comment-media-video video{ width: 100%; height: auto; max-height: 420px; object-fit: contain; }

.media-play-icon.small{ width: 28px; height: 28px; font-size: 0.75rem; }

/* ---------- delete button next to the post timestamp ---------- */


/* ---------- saved photo/video album (VK-style grid, no post links) ---------- */
.saved-photo-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-bottom: 1.5rem;
}
.saved-photo-tile{
  position: relative; aspect-ratio: 1/1; border-radius: 10px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--border);
}
.saved-photo-tile img, .saved-photo-tile video{
  width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in;
}
.saved-video-tile video{ cursor: pointer; }
.saved-video-name{
  position: absolute; left: 0; right: 0; bottom: 0; padding: 0.3rem 0.5rem;
  background: linear-gradient(0deg, rgba(0,0,0,0.7), transparent);
  color: #fff; font-size: 0.68rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.comment-media-audio-chip{
  width: 100%; height: 100%; display:flex; align-items:center; justify-content:center;
  padding: 0.3rem; font-size: 0.66rem; text-align: center; background: var(--surface-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- volume button + popover slider (used anywhere audio plays) ---------- */
.audio-volume-slider{ width: 120px; height: 27px; accent-color: var(--purple); cursor: pointer; }

/* ---------- lightbox bottom action bar ---------- */
.lightbox-content{
  position: relative;
  display:flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
}
.lightbox-content img, .lightbox-content video{
  max-width: 100%; max-height: 78vh; border-radius: 8px; display:block;
}
.lightbox-bar{
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3;
  display:flex; align-items:center; justify-content: space-between; gap: 0.6rem;
  opacity: 0; transition: opacity 0.15s ease; pointer-events: none;
}
.lightbox-content:hover .lightbox-bar{ opacity: 1; pointer-events: auto; }
.lightbox-bar .tool-btn.labeled{ background: rgba(20,20,24,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.25); }
.lightbox-bar .tool-btn.labeled:hover{ background: rgba(20,20,24,0.75); }
.lightbox-bar .tool-btn.labeled.saved{ background: rgba(20,20,24,0.55); color: #fff; border-color: rgba(255,255,255,0.25); }
.lightbox-bar .tile-more-btn{ background: rgba(20,20,24,0.55); color: rgba(255,255,255,0.85); opacity: 1; }
.lightbox-bar .tile-more-btn:hover{ background: rgba(20,20,24,0.75); }
.lightbox-more-wrap{ position: relative; top: auto; right: auto; }

/* ---------- scroll-to-top strip: lives only in the empty margin to the
   left of the centered content, so it never overlaps the sidebar ---------- */
.scroll-top-strip{
  display: none; position: fixed; top: 0; bottom: 0; left: 0;
  width: min(15vw, calc(50vw - 450px));
  border: none; cursor: pointer; background: transparent; color: var(--text-faint);
  font-size: 1.4rem; align-items: center; justify-content: center; opacity: 0;
  z-index: 40; transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.scroll-top-strip.visible{ display: flex; }
.scroll-top-strip.visible:hover{ opacity: 1; background: var(--surface-2); color: var(--text); }
@media (max-width: 1010px){
  .scroll-top-strip{ display: none !important; }
}

/* ---------- notifications ---------- */
.notif-row{
  max-width: calc(100% - 106px);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.85rem 1rem; margin-bottom: 0.7rem;
}
.notif-meta{ font-size: 0.78rem; color: var(--text-dim); margin-bottom: 0.35rem; }
.notif-meta b{ color: var(--text); }
.notif-text{
  font-size: 0.9rem; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  margin-bottom: 0.5rem; color: var(--text);
}
.notif-link{ font-size: 0.8rem; color: var(--vkblue); font-weight: 500; }
.notif-link:hover{ text-decoration: underline; }

/* ---------- blocked users list ---------- */
.blocked-users-list{ display:flex; flex-direction: column; gap: 0.5rem; }
.blocked-user-row{
  display:flex; align-items:center; justify-content: space-between; gap: 0.6rem;
  padding: 0.5rem 0.7rem; background: var(--surface-2); border-radius: 8px;
}
.blocked-user-row a{ color: var(--text); font-weight: 500; }
.blocked-user-row a:hover{ color: var(--purple); }

/* ---------- login devices list ---------- */
.device-list{ display:flex; flex-direction: column; gap: 0.5rem; }
.device-row{
  padding: 0.6rem 0.8rem; background: var(--surface-2); border-radius: 8px;
}
.device-main{ font-weight: 600; font-size: 0.86rem; margin-bottom: 0.15rem; }
.device-meta{ font-size: 0.76rem; color: var(--text-dim); }

/* ---------- restricted profile view for someone blocked by the owner ---------- */
.profile-blocked-card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2.5rem 1.5rem; text-align: center; display:flex; flex-direction: column; align-items: center;
}

@media (max-width: 640px){
  .settings-layout{ flex-direction: column; }
  .settings-menu{ width: 100%; flex-direction: row; flex-wrap: wrap; }
}

/* ---------- avatar crop modal ---------- */
.crop-modal-overlay{
  display:none; position:fixed; inset:0; background: rgba(10,10,14,0.65);
  align-items:center; justify-content:center; z-index: 70;
}
.crop-modal-overlay.open{ display:flex; }
.crop-modal{
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 0.9rem; width: 340px; max-width: 92vw;
}
.crop-stage{
  position: relative; width: 300px; height: 300px; max-width: 100%; margin: 0.75rem auto;
  overflow: hidden; border-radius: 12px; background: #000; cursor: grab; touch-action: none;
}
.crop-stage:active{ cursor: grabbing; }
.crop-stage img{
  position: absolute; top: 0; left: 0; transform-origin: 0 0; user-select: none; pointer-events: none;
}
.crop-frame{
  position: absolute; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%);
  border-radius: 50%; box-shadow: 0 0 0 2000px rgba(0,0,0,0.55); border: 2px solid #fff; pointer-events: none;
}
#cropZoom{ width: 100%; margin-top: 0.3rem; accent-color: var(--purple); }
.crop-modal-actions{ display:flex; justify-content:flex-end; gap: 0.5rem; margin-top: 0.7rem; }

/* ---------- "show new posts" banner ---------- */
.new-posts-banner{
  display:none; align-items:center; gap: 0.6rem; width: 100%;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: 0.7rem 1rem; margin-bottom: 0.7rem; cursor: pointer; color: var(--purple); font-weight: 600;
  font-family: 'Inter', sans-serif; font-size: 0.88rem;
}
.new-posts-banner:hover{ border-color: var(--purple); }
.new-posts-avatars{ display:flex; }
.new-posts-avatar{
  width: 26px; height: 26px; margin-left: -8px; border: 2px solid var(--surface); font-size: 0.8rem;
}
.new-posts-avatar:first-child{ margin-left: 0; }

.pending-removal{ opacity: 0.4; filter: grayscale(1); }

/* ---------- search page ---------- */
.page-search-form{ display:flex; gap: 0.5rem; margin-bottom: 1rem; }
.page-search-form input[type="text"]{
  flex: 1; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px;
  padding: 0.55rem 1rem; color: var(--text); font-family: 'Inter', sans-serif; font-size: 0.9rem;
}
.page-search-form input[type="text"]:focus{ outline: none; }

.search-layout{ display:flex; gap: 1.5rem; align-items: flex-start; }
.search-results{ flex: 1; min-width: 0; }
.search-filters{
  flex-shrink: 0; width: 190px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.9rem;
}
.search-filters-title{ font-weight: 700; font-size: 0.85rem; margin-bottom: 0.6rem; }
.search-filter-link{
  display:block; padding: 0.35rem 0.5rem; border-radius: 6px; font-size: 0.85rem;
  color: var(--text-dim); margin-bottom: 0.1rem;
}
.search-filter-link:hover{ background: var(--surface-2); color: var(--text); }
.search-filter-link.active{ background: var(--surface-2); color: var(--purple); font-weight: 600; }
@media (max-width: 700px){
  .search-layout{ flex-direction: column; }
  .search-filters{ width: 100%; }
}