:root {
  --bg: #F8F6F6;
  --text: #0b1020;
  --muted: rgba(11, 16, 32, 0.45);
  --line: rgba(11, 16, 32, 0.10);
  --blue: #1f4eff;
  --radius: 999px;
  --tile-shadow: 1px 1px 3px rgba(0,0,0,0.10);
    /* Primary (blue) pill buttons: FOLLOW / JOIN / etc */
  --btn-blue-bg: #175cff;
  --btn-blue-text: #ffffff;
  --btn-blue-h: 37px;
  --btn-blue-min: 120px;
  --btn-blue-pad: 0 26px;
  --btn-blue-font: 14px;
  --btn-blue-weight: 400;
}

button, input, textarea, select {
  font: inherit;
  letter-spacing: inherit;
}

button, input, textarea, select {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;              /* чтобы input/button не уходили в дефолтный цвет */
}

button {
  -webkit-appearance: none;    /* Safari/Chrome иногда добавляют системный стиль */
  appearance: none;
}

html {
  height: 100%;
  background: var(--bg);
  /* overscroll-behavior-y: none; - removed: breaks scroll on Android */
}

body.auth {
  height: 100%;
}

body.auth {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-optical-sizing: auto;
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

/* Loader layout */
.loader-shell {
  height: 100%;
  position: relative;
}

.loader-center {
  height: 100%;
  display: grid;
  place-items: center;
}

.loader-logo {
  margin: 0;
  font-size: 100px;
  font-weight: 700;
  letter-spacing: -0.06em; /* logo -6% */
  line-height: 1;
}

/* bottom progress area */
.loader-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 140px;
  display: flex;
  justify-content: center;
}

.loader-bottom-inner {
  width: 640px;
  max-width: calc(100% - 64px);
}

.loader-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.loader-label {
  font-size: 16px;
  color: var(--muted);
}

.loader-percent {
  font-size: 16px;
  color: var(--muted);
}

.loader-bar {
  width: 100%;
  height: 9px;
  border-radius: var(--radius);
  background: rgba(11, 16, 32, 0.08);
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  border-radius: var(--radius);
  background: var(--blue);
}

/* subtle fade in */
.fade-in {
  opacity: 0;
  transform: translateY(6px);
  animation: fadeInUp 520ms ease forwards;
}

.fade-in-delay {
  opacity: 0;
  transform: translateY(6px);
  animation: fadeInUp 520ms ease forwards;
  animation-delay: 140ms;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* auth base */
.auth-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.auth-center {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ширина блока как у заголовка из Figma, держим компактно */
.auth-block {
  width: 520px;
  max-width: calc(100% - 64px);
  text-align: center;
}

/* typography */
.auth-logo {
  margin: 0 0 10px;
  font-size: 70px;         /* Figma */
  font-weight: 700;
  letter-spacing: -0.06em; /* logo -6% */
  line-height: 1;
  color: var(--text);
}

.auth-title {
  margin: 0 0 44px;
  font-size: 40px;         /* Figma */
  font-weight: 600;
  letter-spacing: -0.04em; /* -4% */
  line-height: 1.1;
  color: rgba(11, 16, 32, 0.65);
}

.auth-form {
  width: 100%;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.auth-label {
  width: 360px;
  max-width: 100%;
  text-align: left;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: rgba(11, 16, 32, 0.45);
}

.auth-input {
  width: 360px;
  max-width: 100%;
  height: 44px;
  border: none;
  border-bottom: 1px solid rgba(11, 16, 32, 0.10);
  outline: none;
  background: transparent;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(11, 16, 32, 0.90);
}

.auth-input:focus {
  border-bottom-color: rgba(31, 78, 255, 0.65);
}

.auth-help {
  width: 360px;
  max-width: 100%;
  margin: 0 0 18px;
  text-align: center;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(11, 16, 32, 0.45);
}

.auth-help--field {
  margin: 0;
}

/* кнопка */
.btn-primary {
  height: 52px;
  border: none;
  border-radius: 999px;
  padding: 0 28px;
  font-weight: 600;
  cursor: pointer;
}

/* Global blue button (use for all blue pill buttons in the app) */
.btn-blue {
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  padding: var(--btn-blue-pad);
  background: var(--btn-blue-bg);
  color: var(--btn-blue-text);
  font-size: var(--btn-blue-font);
  font-weight: var(--btn-blue-weight);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.btn-blue:disabled {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.auth-cta {
  width: 360px;
  max-width: 100%;
  font-size: 17px;         /* Figma */
  font-weight: 500;
  letter-spacing: -0.02em;
  background: #1f4eff;
  color: #ffffff;
}

.auth-cta:disabled {
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
}

.auth-footnote {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(11, 16, 32, 0.45);
}

.auth-link {
  color: #1f4eff;
  text-decoration: none;
  font-weight: 400;
}

.auth-input::placeholder {
  color: rgba(11, 16, 32, 0.45);
}

.auth-error {
  width: 360px;
  max-width: 100%;
  margin: 2px 0 10px;
  text-align: left;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #ff3b30;
  min-height: 18px;
}
.auth-block {
  background: #ffffff;
  border-radius: 20px;
  padding: 82px 62px;

  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);

  width: 100%;
  max-width: 420px;
}
.avatar-file {
  display: none;
}

.avatar-picker {
  display: flex;
  justify-content: center;
  margin: 24px 0 8px;
  cursor: pointer;
}

.avatar-circle {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  background: #e6e7ea;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  border: 2px dashed rgba(0,0,0,0.12);
}

.avatar-plus {
  font-size: 28px;
  line-height: 1;
  color: rgba(0,0,0,0.35);
}

.avatar-preview {
  position: absolute;
  inset: 0; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; 
  border-radius: 50%; 
  display: none;
}

.avatar-circle.has-image {
  border: none;
  background: transparent;
}
/* =========================
   HOME (desktop-only)
========================= */

.app-home {
  background: #F8F6F6;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  min-width: 1200px;
  /* height: 100vh; overflow: hidden; - removed: breaks mobile scroll */
}

.app-shell {
  max-width: 1728px;
  margin: 0 auto;
  padding: 24px 100px;
  min-height: 100vh; /* вместо height */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

/* top bar */
.home-topbar {
  display: grid;
  grid-template-columns: 260px 1fr 352px;
  align-items: center;
  gap: 50px;
  height: 72px;
  flex: 0 0 72px;
  position: sticky;
  top: 24px;
  z-index: 50;
}

/* AI mobile topbar buttons must NOT be visible on desktop */
.ai-topbar-btn{
  display: none;
}

.brand {
  font-size: 44px;
  font-weight: 700;
  color: #0b1020;
  letter-spacing: -0.06em;
}

/* search */
.search {
  position: relative;
  display: block;
  width: 800px;
  margin-left: -22px;
}

.search-input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 0;
  outline: none;
  background: #ffffff;
  padding: 0 18px 0 42px;
  font-size: 15px;
  color: #1b233a;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
}

.search-input::placeholder {
  color: rgba(75, 85, 99, 0.5);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  opacity: 0.5;
  background-color: #4b5563;
  -webkit-mask: url("../assets/icons/search.svg") center/contain no-repeat;
  mask: url("../assets/icons/search.svg") center/contain no-repeat;
}

/* top profile */
.top-profile {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.top-username {
  font-size: 17px;
  color: #4B5563;
  font-weight: 500;
}

.top-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}

/* main grid */
.home-grid {
  flex: 1;
  min-height: 0;
  
  display: grid;
  grid-template-columns: 260px 1fr 352px;
  gap: 50px;
  padding-top: 24px;
}

/* sidebar */
.home-sidebar {
  height: 100%;
}

.side-nav {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 10px;
}

.nav-item {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  text-decoration: none;
  color: rgb(75, 85, 99);
  font-size: 15px;
  font-weight: 500;
}

.nav-item:hover {
  background: rgba(0, 0, 0, 0.04);
}

.nav-item.is-active {
  background: #c7d6ff;
  color: #175cff;
}

.nav-ico {
  width: 15px;
  height: 15px;
  background: rgb(75, 85, 99);
}

.nav-ico-home {
  -webkit-mask: url("../assets/icons/home.svg") center/contain no-repeat;
  mask: url("../assets/icons/home.svg") center/contain no-repeat;
}

.nav-ico-community {
  -webkit-mask: url("../assets/icons/community.svg") center/contain no-repeat;
  mask: url("../assets/icons/community.svg") center/contain no-repeat;
}

.nav-ico-notifications {
  -webkit-mask: url("../assets/icons/notifications.svg") center/contain no-repeat;
  mask: url("../assets/icons/notifications.svg") center/contain no-repeat;
}

.nav-ico-profile {
  -webkit-mask: url("../assets/icons/profile.svg") center/contain no-repeat;
  mask: url("../assets/icons/profile.svg") center/contain no-repeat;
}

.nav-ico-settings {
  -webkit-mask: url("../assets/icons/settings.svg") center/contain no-repeat;
  mask: url("../assets/icons/settings.svg") center/contain no-repeat;
}

.nav-item.is-active .nav-ico {
  background: #175cff;
}

.nav-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  margin: 6px 0;
  border-radius: 999px;
}

.btn-post {
  margin-top: 15px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #175cff;
  color: #ffffff;
  font-weight: 400;
}

/* feed scroll only here */
.home-feed {
  width: 100%;
  height: auto;
  overflow: visible;
  display: flex;
  justify-content: center;
}

/* one centered column wrapper (same width as feed) */
.home-center {
  width: 100%;
  max-width: 815px;
}

.feed-grid {
  width: 100%;
  max-width: 815px;
  height: auto;
  overflow: visible;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  align-content: start;
}

/* =========================
   HOME: Creators row + tabs
========================= */

.creators-row {
  width: 100%;
  padding-top: 6px;
  margin-bottom: 26px;   /* было 10px — теперь больше воздуха как в Figma */
}

.creators-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #4B5563;
  margin-bottom: 14px;
}

.creators-list {
  display: flex;
  align-items: center;
  gap: 16px;
}

.creator-chip {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.creator-ava{
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;

  display: block;
  margin: 0;

  object-fit: cover;
  object-position: center;
  border-radius: 999px;
}

/* tabs like Profile/Events */
.home-tabs {
  display: flex;
  justify-content: center;   /* центр */
  align-items: center;
  gap: 50px;                 /* как в Profile/Events */

  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 8px;       /* как в Profile/Events */

  margin-top: 12px;
  margin-bottom: 22px;
}

.home-tab {
  border: 0;
  background: transparent;
  padding: 8px 2px;          /* как в Profile/Events */
  font-size: 15px;           /* как в Profile/Events */
  font-weight: 500;
  color: #A1A5AC;
  cursor: pointer;
  position: relative;
}

.home-tab.is-active {
  color: #4B5563;
}

.home-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;             /* как в Profile/Events */
  height: 2px;
  border-radius: 999px;
  background: #1E56FA;
}

.feed-sentinel {
  height: 1px;
  width: 100%;
  grid-column: 1 / -1;
}

.feed-spacer {
  width: 100%;
  grid-column: 1 / -1;
  height: 0px;
  pointer-events: none;
}

.feed-top-sentinel {
  height: 1px;
  width: 100%;
  grid-column: 1 / -1;
}

/* post card */
.post-card {
  width: 815px;
  height: 765px;
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  cursor: pointer;
  margin-bottom: 15px;
}

.post-media {
  width: 100%;
  height: 665px;
  overflow: hidden;
  background: #0b1020;
}

.post-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-meta {
  padding: 20px 27px;
  gap: 14px;
}

.post-title {
  font-size: 16px;
  font-weight: 600;
  color: #4B5563;
  margin-bottom: 15px;
}

.post-author {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
}

.post-author-ava {
  width: 35px;
  height: 35px;
  border-radius: 999px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.08); /* fallback если картинки нет */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

/* right column */
.home-right {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  padding: 16px;
}

.card-title {
  font-weight: 600;
  font-size: 17px;
  color: #4b5563;
  margin-bottom: 12px;
}

/* featured */
.featured-media {
  width: 100%;
  height: 200px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: rgba(0,0,0,0.04);
  object-fit: cover;
  display: block;
}

.featured-body {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 8px 12px;
  align-items: center;
}

.featured-name {
  font-size: 17px;
  font-weight: 500;
  color: #4B5563;
  grid-column: 1 / 3;
}

.featured-meta {
  font-size: 14px;
  color: #818892;
}

.btn-join {
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  padding: var(--btn-blue-pad);
  background: var(--btn-blue-bg);
  color: var(--btn-blue-text);
  font-size: var(--btn-blue-font);
  font-weight: var(--btn-blue-weight);
}

/* community widget */
.community-row {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 10px 0;
  cursor: pointer;
}

.community-row-title {
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
  margin-bottom: 4px;
}

.community-row-meta {
  font-size: 14px;
  color: #818892;
}

.row-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 999px;
}

body {
  margin: 0;
  overflow: hidden;

  /* app base */
  background: var(--bg);
  color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* iOS Safari: stop rubber-band from revealing different layer colors */
  /* Note: overscroll-behavior-y removed - breaks scroll on Android */
}

.home-scroll {
  height: 100vh;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.home-sidebar,
.home-right {
  position: sticky;
  top: 120px;
  align-self: start;
  height: fit-content;
}


/* =========================
   CREATE POST MODAL
========================= */

body.modal-open {
  overflow: hidden;
}

/* modal base */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* was 24px 0 */
}

/* Profile Edit: centered modal (same behavior as other modals) */
#profileEditModal.is-open{
  overflow-y: auto;
  overflow-x: hidden;

  /* center the panel in viewport */
  align-items: center;
  justify-content: center;

  /* small safe padding so it never touches edges */
  padding: 24px 0;
}

#profileEditModal .modal-panel.profile-edit-panel {
  margin: 0 auto;
}

/* backdrop */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* panel */
.modal-panel {
  position: relative;
  top: auto !important;
  margin-top: 0 !important;

  width: 520px;
  max-width: calc(100vw - 64px);

  height: auto;
  max-height: none;                /* было calc(100vh - 64px) */
}

/* modal box */
.cp-modal {
  width: 100%;
  height: auto;

  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.25);

  /* больше воздуха как в хайрезе */
  padding: 62px 34px 34px 34px;
  position: relative;
  box-sizing: border-box;

  overflow: visible;
}

/* back button */
.cp-back {
  background: none;
  border: none;
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  margin-bottom: 18px;
}

.cp-back-icon {
  width: 13px;
  height: 13px;
  background-color: #4B5563;
  -webkit-mask: url("../assets/icons/back-icon.svg") no-repeat center;
  mask: url("../assets/icons/back-icon.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.cp-back:hover {
  opacity: 0.7;
}

/* layout */
.cp-content{
  display: flex;
  flex-direction: column;
  gap: 24px; /* больше расстояния между секциями */
}

/* LEFT */
.cp-left,
.cp-right{
  width: 100%;
}

.cp-left-head {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* счетчик должен доходить до правого края контентной области (как media block) */
  padding-right: 0;

  margin-bottom: 0px;
}

.cp-left-title {
  font-size: 18px;
  font-weight: 600;
  color: #4B5563;
}

.cp-count {
  font-size: 14px;
  color: #A1A5AC;
}

/* upload zone */
.cp-media {
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;

  border-radius: 24px;
  position: relative;
  background: #F8FAFC;
  box-sizing: border-box;

  margin-top: 12px;

  /* ВАЖНО */
  overflow: visible;

  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
}

.cp-media.has-files {
  /* когда есть файлы, большая плашка исчезает */
  aspect-ratio: auto;
  height: auto;
  background: transparent;
  border: 0;

  /* и тень тоже убираем, чтобы остались только плитки */
  box-shadow: none;
}

.cp-media.has-files .cp-empty {
  display: none !important;
}

/* empty state */
.cp-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
}

.cp-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(11, 16, 32, 0.08);

  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cp-empty-icon::before {
  content: "";
  display: block;
  width: 22px;
  height: 22px;
  background-color: #1E56FA;
  -webkit-mask: url("../assets/icons/upload-icon.svg") no-repeat center;
  mask: url("../assets/icons/upload-icon.svg") no-repeat center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.cp-empty-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #4B5563;
}

.cp-empty-sub {
  font-size: 14px;
  color: rgba(75, 85, 99, 0.70);
}

/* grid */
.cp-grid {
  /* дефолт: пусть может жить внутри cp-media */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;

  padding: 0;
  margin: 0;
  box-sizing: border-box;

  align-content: start;
  justify-content: start;
  overflow: hidden;
}

/* пустое состояние: сетка лежит поверх области, но скрыта hidden-атрибутом */
.cp-media:not(.has-files) .cp-grid{
  position: absolute;
  inset: 16px; /* чтобы сетка, если вдруг показывается, имела внутренний отступ */
}

/* состояние с файлами: сетка становится контентом и задает высоту */
.cp-media.has-files .cp-grid{
  position: static;
  padding: 0;
}

/* tile */
.cp-tile {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,0.06);
  cursor: pointer;
}

.cp-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* delete */
.cp-del{
  position: absolute;
  top: 6px;
  right: 6px;

  width: 22px;
  height: 22px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;
  border: none;
  border-radius: 50%;

  background: rgba(0,0,0,0.6);
  color: #fff;

  font-size: 14px;
  line-height: 1; /* важно: больше не 22px */

  cursor: pointer;
}

.cp-del:hover {
  background: rgba(0,0,0,0.8);
}

/* add tile */
.cp-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background: #F8FAFC;

  border: 1px solid rgba(11, 16, 32, 0.10);
  /* текст “Add” */
  color: #1E56FA;
}

.cp-add-plus {
  font-size: 26px;
  margin-bottom: 4px;
  color: #1E56FA;
}

/* help text */
.cp-help {
  margin-top: 20px;
  font-size: 14px;
  color: #7f858f;
  text-align: center;
  width: 547px;
}

/* RIGHT */
.cp-right {
  width: 334px;
  display: flex;
  flex-direction: column;
}

/* больше воздуха между Title и Description */
.cp-right label[for="cpDesc"]{
  margin-top: 22px;
}

.cp-label {
  font-size: 16px;
  font-weight: 600;
  color: #4B5563;
  line-height: 1.2;
}

.cp-input {
  margin-top: 0;
  height: 44px;

  border: 0;
  border-bottom: 1px solid rgba(11, 16, 32, 0.10);
  border-radius: 0;

  padding: 0;
  font-size: 15px;
  font-weight: 500;

  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: transparent;
  color: #4B5563;
}

.cp-input::placeholder{
  color: rgba(75, 85, 99, 0.55);
  font-weight: 500;
}

.cp-input:focus,
.cp-textarea:focus {
  outline: none;
  border-color: #1F5CFF;
}

.cp-divider {
  height: 1px;
  background: #e5e5e5;
  margin: 36px 0;
}

.cp-textarea {
  margin-top: 0;
  height: 110px;

  border-radius: 18px;
  border: 1px solid rgba(11, 16, 32, 0.10);
  background: #FFFFFF;

  padding: 14px 14px;
  resize: none;

  font-size: 15px;
  font-weight: 500;
  color: #4B5563;

  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cp-textarea::placeholder{
  color: rgba(75, 85, 99, 0.55);
  font-weight: 500;
}

.cp-fields{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 22px;      /* больше воздуха между Title и Description блоками */
  margin-top: 10px;
}

.cp-field{
  display: flex;
  flex-direction: column;
  gap: 10px;      /* расстояние между label и input */
}

/* labels hidden via .sr-only, keep for a11y */
.cp-label.sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* POST button */
.cp-post {
  width: 100%;
  height: 44px;

  border-radius: 999px;
  border: none;

  background: #175cff;
  color: #fff;

  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;

  cursor: pointer;

  margin-top: 16px;
}

.cp-divider{ display:none; }
.cp-right{ display:none; } /* больше не используется после правки home.html */
.cp-help{ display:none; }  /* в новом дизайне хелп-текст убираем */

.cp-post:disabled {
  opacity: 0.4;
  cursor: default;
}

.cp-media,
.cp-empty,
.cp-grid,
.cp-tile-add {
  cursor: pointer;
}

.cp-del,
.cp-post,
.cp-back {
  cursor: pointer;
}

.cp-tile img {
  cursor: pointer;
}

.cp-grid,
.cp-tile,
.cp-tile-add {
  box-sizing: border-box;
}

.page-center {
  height: 100%;
  min-height: 0;
}

/* =========================
   COMMUNITY (center only)
========================= */

.app-community .page-center {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.app-community .community-wrap {
  width: 100%;
  max-width: 815px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
  padding-bottom: 30px;
}

/* header */
.app-community .community-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-community .community-title {
  margin: 0;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #4B5563;
}

.app-community .community-subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
    color: rgba(75,85,99,0.72);
}

/* hero */
.app-community .community-hero {
  width: 815px;
  height: 348px;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
}

.app-community .community-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-community .community-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 10, 22, 1) 0%,
    rgba(10, 10, 22, 0.49) 34%,
    rgba(10, 10, 22, 0) 63%
  );
  pointer-events: none;
}

/* overlay */
.app-community .community-hero-overlay {
  width: 470px;
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 26px 26px 26px 26px;
}

/* copy frame (pill + title + desc share same width like Figma) */
.app-community .community-hero-copy {
  width: 420px;        /* ВАЖНО: это и есть ширина "текстового блока" */
  margin-top: 80px;    /* опускаем весь копи-блок ниже */
}

/* pill */
.app-community .community-pill {
  width: 70%;
  display: flex;
  align-items: center;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 400;

  color: rgba(255, 255, 255, 0.9);
  background: rgba(72, 85, 99, 0.2);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(10px);

  margin-bottom: 14px; /* расстояние от pill до заголовка */
}

/* title */
.app-community .community-hero-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #ffffff;
}

/* desc */
.app-community .community-hero-desc {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.45;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.78);
}

/* JOIN (fixed position) */
.app-community .community-hero-join {
  position: absolute;
  left: 26px;
  bottom: 27px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;
  height: 34px;
  padding: 0 35px;

  font-size: 14px;
  font-weight: 500;
  line-height: 34px;

  border: 0;
  border-radius: 999px;
  background: #175cff;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

/* tiles */
.app-community .community-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.app-community .community-tile {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 190px;
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform;
}

.app-community .community-tile:hover {
  transform: translateY(-1px);
}

.app-community .community-tile-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #c7d6ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-community .community-tile-icon img {
  width: 22px;
  height: 22px;
  display: block;
}

.app-community .community-tile-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #4B5563;
}

.app-community .community-tile-desc {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(75,85,99,0.72);
}

.app-community .community-tile-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: #175cff;
}

.app-community .community-tile-soon {
  margin-top: auto;
  font-size: 14px;
  font-weight: 700;
  color: rgba(0,0,0,0.35);
}

.app-community .community-tile.is-disabled {
  pointer-events: none;
  opacity: 0.55;
}

.app-community .is-muted {
  color: rgba(0,0,0,0.45) !important;
}

.app-community .community-tile-icon.is-muted {
  background: rgba(0,0,0,0.06);
}

/* activity */
.app-community .community-activity {
  margin-top: 35px;
}

.app-community .community-activity-title {
  margin: 0 0 10px 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #4B5563;
}

.app-community .community-activity-list {
  background: transparent;
}

.app-community .community-activity-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
}

.app-community .community-activity-avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  object-fit: cover;
  flex-shrink: 0;
  background: rgba(0,0,0,0.06);
}

.app-community .community-activity-content {
  min-width: 0;
  flex: 1;
}

.app-community .community-activity-text {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: #4B5563;
}

.app-community .community-activity-text a {
  color: #175cff;
  font-weight: 600;
  text-decoration: none;
}

.app-community .community-activity-time {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(75,85,99,0.62);
}

.app-community .community-activity-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
}

/* =========================
   PROFILE (center + right)
========================= */

.app-profile .page-center {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.app-profile .profile-wrap {
  width: 100%;
  max-width: 815px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 6px;
  padding-bottom: 30px;
}

.app-profile .profile-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.app-profile .profile-head-left {
  display: flex;
  gap: 24px;
  min-width: 0;
}

.app-profile .profile-avatar {
  width: 128px;
  height: 128px;
  aspect-ratio: 1 / 1;
  border-radius: 999px;
  background: #E4E6E8;
  object-fit: cover;
  flex-shrink: 0;
  object-position: center;
}

.app-profile .profile-head-meta {
  min-width: 0;
  padding-top: 2px;
}

.app-profile .profile-display {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #4B5563;
  line-height: 1.15;
  margin-top: 2px;
}

.app-profile .profile-username {
  margin-top: 6px;
  font-size: 15px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: #4B5563;
}

.app-profile .profile-bio {
  margin-top: 16px;
  max-width: 400px;
  letter-spacing: -0.02em;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
  color: #4B5563;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Mobile restyle uses this block, keep it hidden on desktop */
.app-profile .profile-counts{
  display: none;
}

.app-profile .profile-head-actions {
  margin-top: 37px;
  flex-shrink: 0;
  padding-top: 8px;
}

.app-profile .profile-btn {
  width: 120px;
  height: 37px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #1E56FA;
  border: none;
  border-radius: 999px;

  font-size: 14px;
  font-weight: 400;
  color: #ffffff;

  cursor: pointer;
  text-decoration: none;
}

.app-profile .profile-btn:hover {
  background: #1748d8;
}

.app-profile .profile-btn.is-primary {
  border: 0;
  background: #175cff;
  color: #ffffff;
}

.app-profile .profile-tabs {
  display: flex;
  gap: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 8px;
}

.app-profile .profile-tab {
  border: 0;
  background: transparent;
  padding: 8px 2px;
  font-size: 15px;
  font-weight: 500;
  color: #A1A5AC;
  cursor: pointer;
  position: relative;
}

.app-profile .profile-tab.is-active {
  color: #4B5563;
}

.app-profile .profile-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 999px;
  background: #1E56FA;
}

.app-profile .profile-content {
  min-height: 0;
}

/* reuse feed layout but keep safe width */
.app-profile .profile-list .feed-grid {
  margin-top: 2px;
}

/* Empty states */
.app-profile .profile-empty {
  width: 100%;
  max-width: 815px;
  box-sizing: border-box;

  background: #ffffff;
  border-radius: 18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  padding: 54px 24px;
  text-align: center;
}

.app-profile .profile-empty-ico {
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: #DEDEE0;
  background-image: url("../assets/icons/empty-posts.svg");
  background-repeat: no-repeat;
  background-position: center;  
  background-size: 50px 50px;
  margin: 0 auto 32px;
}

.app-profile .profile-empty-title {
  font-size: 20px;
  font-weight: 700;
  color: #7F858F;
  letter-spacing: -0.02em;  
}

.app-profile .profile-empty-sub {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 400;
  color: #7F858F;
}

.app-profile .profile-empty--compact {
  width: 100%;
  box-shadow: none;
  padding: 14px 12px;
  border: 1px solid rgba(0,0,0,0.08);
}

.app-profile .profile-empty--compact .profile-empty-ico {
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
}

/* Right column cards */
.app-profile .stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 12px;
}

.app-profile .stat-label {
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
}

.app-profile .stat-value {
  margin-top: 6px;
  font-size: 20px;
  font-weight: 700;
  color: #4B5563;
}

.app-profile .links-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.app-profile .link-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-profile .link-ico {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-profile .link-ico::before {
  content: "";
  width: 18px;
  height: 18px;
  background: #6F7782;
  -webkit-mask: url("../assets/icons/link.svg") center/contain no-repeat;
  mask: url("../assets/icons/link.svg") center/contain no-repeat;
}

.app-profile .link-text {
  min-width: 0;
  flex: 1;
}

.app-profile .link-label {
  font-size: 13px;
  font-weight: 500;
  color: rgba(0,0,0,0.45);
}

.app-profile .link-url {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: #175cff;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-profile .link-url:hover {
  text-decoration: underline;
}

/* profile edit small helpers */
.app-profile .profile-edit-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-profile .profile-edit-note,
.app-profile .profile-edit-next {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.55);
  line-height: 1.4;
}

.app-profile .profile-edit-back {
  font-size: 14px;
  font-weight: 700;
  color: #175cff;
  text-decoration: none;
}

.app-profile .profile-edit-back:hover {
  text-decoration: underline;
}

.app-profile .card-links .card-title {
  color: #4B5563;
}

.app-profile .card-stats .card-title {
  color: #4B5563;
}

/* =========================
   PROFILE EDIT MODAL
========================= */

.profile-edit-panel{
  width: min(635px, calc(100vw - 64px));
  max-width: 635px;

  /* height must come from content */
  height: auto;
  max-height: none;
}

.pe-modal{
  width: 100%;
  height: auto; /* was 100% */

  background: #ffffff;
  border-radius: 23px;

  /* more inner padding, but less empty bottom */
  padding: 44px 54px 44px;

  position: relative;
  box-sizing: border-box;

  overflow: visible; /* no inner clipping */
}

/* header: title left, close right */
.pe-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pe-head-title{
  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
}

/* reuse create-post X, but position like in Figma */
.pe-modal .cp-close{
  top: 18px;
  right: 18px;
}

/* content corridor */
.pe-inner{
  width: 547px;
  margin: 18px auto 0; /* was 34px */
  box-sizing: border-box;
}

/* centered avatar */
.pe-avatar-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 34px;
}

.pe-avatar{
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.pe-avatar.pe-avatar-lg{
  width: 140px;
  height: 140px;
}

.pe-change-link{
  margin-top: 14px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #175cff;
}

.pe-change-link:hover{
  text-decoration: underline;
}

/* fields */
.pe-field{
  display: flex;
  flex-direction: column;
  gap: 16px; /* was 14px */
}

.pe-field + .pe-field{
  margin-top: 34px; /* was 28px */
}

.pe-label{
  font-size: 15px;
  font-weight: 600;
  color: #4B5563;
}

.pe-input,
.pe-textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgba(75, 85, 99, 0.5);
  background: transparent;
  color: #4B5563;
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  outline: none;
}

.pe-input{
  height: 47px;
  border-radius: 999px;
  padding: 0 20px; /* was 16px */
  font-size: 14px;
}

.pe-textarea{
  height: 160px;
  border-radius: 20px;
  padding: 18px 20px; /* was 14px 16px */
  resize: none;
  font-size: 14px;
}

.pe-input:focus,
.pe-textarea:focus{
  border-color: rgba(31, 78, 255, 0.65);
}

/* footer + full width save */
.pe-footer{
  margin-top: 22px; /* slightly less, removes bottom dead space */
  display: flex;
  justify-content: center;
}

.pe-save{
  width: 100%;
  height: 44px; /* closer to POST button feel */
  border-radius: 999px;
  border: none;

  background: var(--btn-blue-bg);
  color: var(--btn-blue-text);

  font-size: 14px;
  font-weight: 500;      /* was 600 */

  cursor: pointer;
}

/* =========================
   EVENTS (center only)
========================= */

.app-events .page-center {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.app-events .events-wrap {
  width: 100%;
  max-width: 815px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
  padding-bottom: 30px;
}

/* hero */
.app-events .events-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-events .events-title {
  margin: 0;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #4B5563;
}

.app-events .events-subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  color: #7F858F;
}

/* tabs (копия логики и вида как в Profile) */
.app-events .events-tabs {
  display: flex;
  gap: 50px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-bottom: 8px;
}

.app-events .events-tab {
  border: 0;
  background: transparent;
  padding: 8px 2px;
  font-size: 15px;
  font-weight: 500;
  color: #A1A5AC;
  cursor: pointer;
  position: relative;
}

.app-events .events-tab.is-active {
  color: #4B5563;
  font-weight: 500;  
}

.app-events .events-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -9px;
  height: 2px;
  border-radius: 999px;
  background: #1E56FA;
}

/* =========================
   EVENTS: cards
========================= */

.app-events .events-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-top: 6px;
}

.app-events .event-card {
  display: grid;
  grid-template-columns: 316px 1fr;
  gap: 22px;
  align-items: start;
}

.app-events .event-media {
  width: 316px;
  height: 200px;
  border-radius: 18px;
  object-fit: cover;
  display: block;
}

.app-events .event-body {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 18px;
  align-items: stretch;
  padding-top: 4px;
}

.app-events .event-topline {
  grid-column: 1 / 3;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 18px;
}

.app-events .event-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 18px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.65);
}

.app-events .event-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.55);
}

.app-events .live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #175cff;
  box-shadow: 0 0 0 3px rgba(23, 92, 255, 0.16);
}

.app-events .event-muted {
  font-size: 12px;
  font-weight: 600;
  color: rgba(0,0,0,0.38);
}

.app-events .event-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: #4B5563;
}

.app-events .event-desc {
  margin: 10px 0 0 0;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 400;
  color: #7F858F;
  max-width: 330px;
}

.app-events .event-meta {
  margin-top: 25px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #4B5563;
}

.app-events .event-meta svg {
  width: 17px;
  height: 17px;
  color: #4B5563;
}

.app-events .btn-details {
  grid-column: 2 / 3;
  align-self: center;

  width: 120px;
  height: 37px;

  border-radius: 999px;
  border: 0;
  cursor: pointer;
  
  background: #175cff;
  color: #fff;

  font-size: 14px;
  font-weight: 400;
}

.app-events .btn-details.is-ended {
  background: rgba(0,0,0,0.18);
  color: rgba(0,0,0,0.45);
  cursor: default;
}

.app-events .event-card.is-ended .event-title,
.app-events .event-card.is-ended .event-desc,
.app-events .event-card.is-ended .event-meta,
.app-events .event-card.is-ended .event-topline {
  opacity: 0.45;
}

.app-events .event-card.is-ended .event-media {
  opacity: 0.85;
}

/* =========================
   TOOLS (center only)
========================= */

.app-tools .page-center {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.app-tools .tools-wrap {
  width: 100%;
  max-width: 815px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
  padding-bottom: 30px;
}

/* hero */
.app-tools .tools-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-tools .tools-title {
  margin: 0;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #4B5563;
}

.app-tools .tools-subtitle {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #7F858F;
}

/* grid */
.app-tools .tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 10px;
}

.app-tools .tool-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  padding: 20px;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  transition: transform 160ms ease, box-shadow 160ms ease;
  will-change: transform;  
}

.app-tools .tool-card:hover {
  transform: translateY(-1px);
}

.app-tools .tool-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(0,0,0,0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.app-tools .tool-ico img {
  width: 20px;
  height: 20px;
  display: block;
  filter: none;
}

.app-tools .tool-ico--yellow {
  background: #BCCDFE;
}

.app-tools .tool-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4B5563;
}

.app-tools .tool-desc {
  margin: 10px 0 0 0;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: #7F858F;
  max-width: 240px;
}

.app-tools .tool-btn {
  margin-top: auto;
  height: var(--btn-blue-h);
  border-radius: var(--radius);
  border: 0;
  padding: var(--btn-blue-pad);
  background: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.45);
  font-size: var(--btn-blue-font);
  font-weight: var(--btn-blue-weight);
  cursor: default;
  margin-left: auto;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.app-tools .tool-btn--primary {
  background: var(--btn-blue-bg);
  color: var(--btn-blue-text);
  cursor: pointer;
}

/* "Coming soon" cards look slightly muted */
.app-tools .tool-card.is-soon {
  opacity: 0.65;
}

/* =========================
   EVENT DETAILS (center + right, no left sidebar)
========================= */

.app-event-details .home-grid {
  grid-template-columns: 1fr 352px; /* убрали колонку под левое меню */
}

/* центрируем центральный контент как в остальных экранах */
.app-event-details .page-center {
  display: block;
  min-height: 0;
}

.app-event-details .event-details-center {
  width: 100%;
  max-width: 1033px; /* как ощущается в макете, можно подвинуть позже */
  padding-top: 6px;
  padding-bottom: 30px;
}

/* Back to Events */
.app-event-details .event-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(75, 85, 99, 0.8);
  text-decoration: none;
  margin-bottom: 25px;
}

.app-event-details .event-back:hover {
  opacity: 0.8;
}

.app-event-details .event-back-ico {
  width: 14px;
  height: 14px;
  background: rgba(75, 85, 99, 0.8);
  -webkit-mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
}

/* Back to Events (shared) */
.event-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(75, 85, 99, 0.8);
  text-decoration: none;
  margin-bottom: 25px;
}

.event-back:hover {
  opacity: 0.8;
}

.event-back-ico {
  width: 14px;
  height: 14px;
  background: rgba(75, 85, 99, 0.8);
  -webkit-mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
}

/* hero image */
.app-event-details .event-hero {
  width: 1126px;
  height: 633px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
}

.app-event-details .event-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* title */
.app-event-details .event-title {
  margin: 35px 0 35px 0;
  font-size: 41px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #4B5563;
}

/* about */
.app-event-details .event-about-title {
  font-size: 18px;
  font-weight: 600;
  color: #4B5563;
  margin-bottom: 10px;
}

.app-event-details .event-about-text {
  margin: 0 0 14px 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4B5563;
}

/* right column should NOT be a white card */
.app-event-details .event-side {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.app-event-details .event-side-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4B5563;
  margin-bottom: 35px;
}

.app-event-details .event-side-table {
  display: grid;
  gap: 18px;
  margin-bottom: 22px;
}

.app-event-details .event-side-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.app-event-details .event-side-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.90);
}

.app-event-details .event-side-value {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.65);
}

.app-event-details .event-side-joinRow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  margin: 6px 0 28px 0;
}

.app-event-details .event-join-btn {
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  padding: var(--btn-blue-pad);
  background: var(--btn-blue-bg);
  color: var(--btn-blue-text);
  font-size: var(--btn-blue-font);
  font-weight: var(--btn-blue-weight);
}

.app-event-details .event-join-meta {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.5);
  text-align: right;
}

.app-event-details .event-side-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  margin: 35px 0;
}

.app-event-details .event-side-subtitle {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4B5563;
  margin-bottom: 35px;
}

/* agenda */
.app-event-details .event-agenda {
  display: grid;
  gap: 18px;
}

.app-event-details .event-agenda-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
}

.app-event-details .event-agenda-name {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.90);
}

.app-event-details .event-agenda-time {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.65);
}

/* speakers */
.app-event-details .event-speakers {
  display: grid;
  gap: 18px;
}

.app-event-details .event-speaker {
  display: flex;
  gap: 12px;
  align-items: center;
}

.app-event-details .event-speaker-ava {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  flex-shrink: 0;
}

.app-event-details .event-speaker-name {
  font-size: 13px;
  font-weight: 700;
  color: rgba(75, 85, 99, 0.95);
}

.app-event-details .event-speaker-role {
  margin-top: 2px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(75, 85, 99, 0.60);
}

/* =========================
   POST DETAILS
========================= */

.app-post-details .home-grid {
  grid-template-columns: 1fr 352px;
}

.app-post-details .page-center {
  display: block;
}

.app-post-details .post-details-center {
  width: 100%;
  max-width: 1033px;
  padding-top: 6px;
  padding-bottom: 30px;
}

/* Back */
.app-post-details .post-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(75, 85, 99, 0.8);
  text-decoration: none;
  margin: 0 0 25px 0;
}

.app-post-details .post-back:hover { opacity: 0.8; }

.app-post-details .post-back-ico {
  width: 14px;
  height: 14px;
  background: rgba(75, 85, 99, 0.8);
  -webkit-mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
}

/* Media */
.app-post-details .post-media {
  width: 1126px;
  height: 633px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,0.06);
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  position: relative;
}

.app-post-details .post-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-post-details .post-media-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;          /* было 44 */
  height: 24px;         /* было 44 */
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-post-details .post-media-arrow.is-left { left: 12px; }
.app-post-details .post-media-arrow.is-right { right: 12px; }

/* arrow icon inside button */
.app-post-details .post-media-arrow-ico {
  width: 12px;
  height: 12px;
  background: #1E56FA;
  display: block;

  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.app-post-details .post-media-arrow.is-left .post-media-arrow-ico {
  -webkit-mask-image: url("../assets/icons/left-icon.svg");
  mask-image: url("../assets/icons/left-icon.svg");
}

.app-post-details .post-media-arrow.is-right .post-media-arrow-ico {
  -webkit-mask-image: url("../assets/icons/right-icon.svg");
  mask-image: url("../assets/icons/right-icon.svg");
}


/* dots */
.app-post-details .post-dots {
  width: 1126px;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 12px 0 22px 0;
}

.app-post-details .post-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: #A1A5AC;
}

.app-post-details .post-dot.is-active {
  background: #1E56FA;
}

/* title + text */
.app-post-details .post-title {
  margin: 35px 0 35px 0;
  font-size: 41px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: #4B5563;
}

.app-post-details .post-desc {
  margin: 0 0 28px 0;
  font-size: 15px;
  line-height: 1.55;
  color: #4B5563;
  max-width: 820px;
}

/* actions */
.app-post-details .post-actions {
  width: 1126px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
}

.app-post-details .post-actions-right {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* more icon */
.app-post-details .post-ico.is-more {
  -webkit-mask: url("../assets/icons/more-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/more-icon.svg") center / contain no-repeat;
}

/* dropdown */
.app-post-details .post-more-menu {
  position: absolute;
  right: 0;
  top: 34px;

  width: 200px;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid #E5E3E3;

  padding: 8px;
  display: none;
  z-index: 200;
}

.app-post-details .post-more-menu.is-open {
  display: grid;
  gap: 2px;
}

.app-post-details .post-more-item {
  height: 36px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 0 12px;
  text-align: left;

  font-size: 14px;
  font-weight: 500;
  color: #4B5563;

  cursor: pointer;
}

.app-post-details .post-more-item:hover {
  background: rgba(0,0,0,0.05);
}

.app-post-details .post-more-item:disabled {
  opacity: 0.45;
  cursor: default;
}

.app-post-details .post-more-delete {
  color: #ff3b30;
}


.app-post-details .post-actions-left {
  display: flex;
  align-items: center;
  gap: 24px;
}

.app-post-details .post-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #707782 !important;
  font-size: 13px;
  font-weight: 500;
}

.app-post-details .post-ico {
  width: 18px;
  height: 18px;
  background: #707782;
  display: inline-block;
}


/* like active */
.app-post-details .post-action.is-liked .post-ico.is-like {
  background: #1E56FA;
}

/* post action icons (reuse existing assets) */
.app-post-details .post-ico.is-like {
  -webkit-mask: url("../assets/icons/like-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/like-icon.svg") center / contain no-repeat;
}

.app-post-details .post-ico.is-comment {
  -webkit-mask: url("../assets/icons/comment-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/comment-icon.svg") center / contain no-repeat;
}

.app-post-details .post-ico.is-save {
  -webkit-mask: url("../assets/icons/save-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/save-icon.svg") center / contain no-repeat;
}

.app-post-details .post-ico.is-share {
  -webkit-mask: url("../assets/icons/share-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/share-icon.svg") center / contain no-repeat;
}


/* divider */
.app-post-details .post-divider {
  width: 1126px;
  height: 1px;
  background: rgba(0,0,0,0.10);
  border-radius: 999px;
  margin: 8px 0 26px 0;
}

/* discussion */
.app-post-details .post-section-title {
  font-size: 12px;
  font-weight: 700;
  color: rgba(75, 85, 99, 0.85);
  margin: 0 0 18px 0;
}

.app-post-details .post-comment {
  width: 1126px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.app-post-details .post-comment-ava {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
}

.app-post-details .post-comment-username {
  font-size: 13px;
  font-weight: 700;
  color: rgba(75, 85, 99, 0.95);
}

.app-post-details .post-comment-text {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(75, 85, 99, 0.70);
  line-height: 1.45;
  max-width: 900px;
}

.app-post-details .post-comment-actions {
  margin-top: 8px;
  display: flex;
  gap: 14px;
}

.app-post-details .post-comment-actions button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: rgba(75, 85, 99, 0.55);
}

/* right column */
.app-post-details .post-side {
  background: transparent;
  padding: 0;
}

.app-post-details .post-side-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4B5563;
  margin-bottom: 35px;
}

.app-post-details .post-creator {
  display: flex;
  gap: 12px;
  align-items: center;
}

.app-post-details .post-creator-ava {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(0,0,0,0.12);
}

.app-post-details .post-creator-name {
  font-size: 16px;
  font-weight: 600;
  color: #4B5563;
}

.app-post-details .post-creator-handle {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 400;
  color: #4B5563;
}

.app-post-details .post-creator-bio {
  margin: 25px 0 16px 0;
  font-size: 15px;
  font-weight: 400;
  color: #4B5563;
  line-height: 1.45;
  opacity: 85%;
}

.app-post-details .post-creator-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 28px;
}

.app-post-details .post-follow-btn {
  height: var(--btn-blue-h);
  min-width: var(--btn-blue-min);
  border-radius: var(--radius);
  border: 0;
  cursor: pointer;
  padding: var(--btn-blue-pad);
  background: var(--btn-blue-bg);
  color: var(--btn-blue-text);
  font-size: var(--btn-blue-font);
  font-weight: var(--btn-blue-weight);
}

.app-post-details .post-view-profile {
  font-size: 14px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.60);
  text-decoration: none;
}

.app-post-details .post-side-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  margin: 35px 0;
}

.app-post-details .post-more {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.app-post-details .post-more-card {
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 14px;
  overflow: hidden;
}

.app-post-details .post-more-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-post-details .post-comment-form {
  width: 1126px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px 0;
}

.app-post-details .post-comment-input {
  flex: 1;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #A1A5AC;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
  outline: none;
  background: #F8F6F6;
}

.app-post-details .post-comment-input::placeholder {
  color: #A5AAB1;
  font-weight: 500;
}

.app-post-details .post-comment-send {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: #1E56FA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.app-post-details .post-comment-send-ico {
  width: 14px;
  height: 14px;
  background: #ffffff;

  -webkit-mask: url("../assets/icons/send-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/send-icon.svg") center / contain no-repeat;
}

.app-post-details .post-comments {
  width: 1126px;
  display: grid;
  gap: 14px;
}

.app-post-details .post-comment-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.app-post-details .post-comment-ava {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
  flex-shrink: 0;
  overflow: hidden;
}

.post-comment-ava-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-post-details .post-comment-username {
  font-size: 15px;
  font-weight: 500;
  color: rgba(75, 85, 99, 0.90);
}

.app-post-details .post-comment-text {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
  line-height: 1.45;
}

/* fullscreen button */
.app-post-details .post-media-fullscreen {
  position: absolute;
  top: 14px;
  right: 14px;

  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* fullscreen icon */
.app-post-details .post-media-fullscreen-ico {
  width: 16px;
  height: 16px;
  background: #1E56FA;

  -webkit-mask: url("../assets/icons/fullscreen-icon.svg") center / contain no-repeat;
  mask: url("../assets/icons/fullscreen-icon.svg") center / contain no-repeat;
}

/* fullscreen overlay */
.app-post-details .post-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: rgba(0, 0, 0, 0.92);
  display: none;
  align-items: center;
  justify-content: center;

  cursor: zoom-out;
}

.app-post-details .post-fullscreen.is-active {
  display: flex;
}

.app-post-details .post-fullscreen-img {
  max-width: 96vw;
  max-height: 96vh;
  object-fit: contain;
}

/* =========================
   SETTINGS (center only)
========================= */

.app-settings .page-center {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.app-settings .settings-wrap {
  width: 100%;
  max-width: 815px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
  padding-bottom: 30px;
}

.app-settings .settings-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.app-settings .settings-title {
  margin: 0;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 6px;
  color: #4B5563;
}

.app-settings .settings-section {
  margin-top: 16px;
}

.app-settings .settings-section-title {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #4B5563;
}

.app-settings .settings-field {
  margin-top: 10px;
}

.app-settings .settings-field-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0,0,0,0.45);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.app-settings .settings-input {
  width: 100%;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #A1A5AC;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
  outline: none;
  background: #F8F6F6;
  box-sizing: border-box;
}

.app-settings .settings-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #175cff;
  text-decoration: none;
}

.app-settings .settings-link:hover {
  text-decoration: underline;
}

.app-settings .settings-rows {
  margin-top: 10px;
}

.app-settings .settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}

.app-settings .settings-row-title,
.app-settings .settings-row-k {
  font-size: 14px;
  font-weight: 500;
  color: rgba(0,0,0,0.65);
}

.app-settings .settings-row--2col {
  display: grid;
  grid-template-columns: 180px 1fr;
  justify-content: initial;
  gap: 16px;
  align-items: center;
}

.app-settings .settings-link-inline {
  font-size: 14px;
  font-weight: 500;
  color: #175cff;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-settings .settings-link-inline:hover {
  text-decoration: underline;
}

/* Switch */
.app-settings .switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
}

.app-settings .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.app-settings .switch .slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: rgba(0,0,0,0.18);
  transition: 140ms ease;
  border-radius: 999px;
}

.app-settings .switch .slider:before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #ffffff;
  transition: 140ms ease;
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

.app-settings .switch input:checked + .slider {
  background: #175cff;
}

.app-settings .switch input:checked + .slider:before {
  transform: translateX(20px);
}

.app-settings .settings-row--2col .settings-row-k {
  white-space: nowrap;
}

/* Logout */
.app-settings .btn-logout {
  margin-top: 6px;
  height: 34px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid #A1A5AC;
  background: transparent;
  color: #ff3b30;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

/* =========================
   NOTIFICATIONS (center only)
========================= */

.app-notifications .page-center {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.app-notifications .notif-wrap {
  width: 100%;
  max-width: 815px;
  display: flex;
  flex-direction: column;
  padding-top: 6px;
  padding-bottom: 30px;
}

.app-notifications .notif-title {
  margin: 0;
  font-size: 50px;
  line-height: 1.05;
  letter-spacing: -0.04em;
  font-weight: 700;
  margin-bottom: 22px;
  color: #4B5563;
}

.app-notifications .notif-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* item layout */
.app-notifications .notif-item {
  position: relative;
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px 12px 6px;
  border-radius: 999px;
}

.app-notifications .notif-left {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-notifications .notif-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-notifications .notif-text {
  font-size: 15px;
  line-height: 1.35;
  font-weight: 500;
  color: rgba(0,0,0,0.60);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.app-notifications .notif-user {
  color: #1E56FA;
  font-weight: 500;
  text-decoration: none;
}

.app-notifications .notif-user:hover {
  text-decoration: underline;
}

.app-notifications .notif-time {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0,0,0,0.45);
  white-space: nowrap;
}

/* unread pill */
.app-notifications .notif-item.is-unread::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #E3E7F7;
  z-index: -1;
  /* подставь сюда твою “готовую тень” если у тебя есть переменная/класс */
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
}

/* unread state for notifications nav item */
.nav-item[data-nav="notifications"].has-unread span {
  color: #1E56FA;
}

/* если иконка сделана через mask/background-color, это сработает */
.nav-item[data-nav="notifications"].has-unread .nav-ico-notifications {
  background-color: #FF5D5D;
}

/* notifications icon red if has unread (on any page) */
.nav-item.has-unread .nav-ico-notifications {
  background: #FF5D5D !important;
}

/* =============================
   Home Feed Skeleton
============================= */

:root {
  --skel: #E4E6E8;
  --skel-shine: rgba(255, 255, 255, 0.65);
}

@keyframes skel-shimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes skel-bg-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


.post-card.is-skeleton {
  pointer-events: none;
}

.post-card.is-skeleton .post-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--skel) !important;
}

/* ГЛАВНОЕ: прячем img железобетонно */
.post-card.is-skeleton .post-media img {
  opacity: 0 !important;
}

/* shimmer поверх превью */
.post-card.is-skeleton .post-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* Линия заголовка */
.post-card.is-skeleton .post-title {
  height: 14px;
  width: 70%;
  border-radius: 999px;
  background: var(--skel) !important;
  color: transparent !important;
  position: relative;
  overflow: hidden;
  margin-bottom: 15px; /* совпадает с твоим .post-title */
}

/* Автор */
.post-card.is-skeleton .post-author-ava {
  background-image: none !important;
  background: var(--skel) !important;
}

.post-card.is-skeleton .post-author-text {
  display: inline-block;
  height: 12px;
  width: 140px;
  border-radius: 999px;
  background: var(--skel) !important;
  color: transparent !important;
  position: relative;
  overflow: hidden;
}

/* shimmer поверх линий текста */
.post-card.is-skeleton .post-title::after,
.post-card.is-skeleton .post-author-text::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* =============================
   Profile Header Skeleton
============================= */

/* avatar skeleton: не прячем сам img, показываем серый круг через background */

.profile-header.is-skeleton .profile-display,
.profile-header.is-skeleton .profile-username,
.profile-header.is-skeleton .profile-bio {
  color: transparent !important;
}

/* универсальная линия */
.profile-header.is-skeleton .skel-line {
  display: block;
  background: var(--skel) !important;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.profile-header.is-skeleton .skel-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* размеры линий */
.profile-header.is-skeleton .skel-line--name { height: 18px; width: 220px; }
.profile-header.is-skeleton .skel-line--user { height: 14px; width: 140px; margin-top: 10px; }
.profile-header.is-skeleton .skel-line--bio1 { height: 12px; width: 320px; margin-top: 14px; }
.profile-header.is-skeleton .skel-line--bio2 { height: 12px; width: 260px; margin-top: 10px; }

/* =============================
   PROFILE AVATAR SKELETON (CORRECT)
   ============================= */

/* прячем img, пока skeleton */
.profile-header.is-skeleton .profile-avatar {
  visibility: hidden;
}

/* рисуем круг skeleton через родителя */
.profile-header.is-skeleton .profile-head-left {
  position: relative;
}

.profile-header.is-skeleton .profile-head-left::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: 128px;
  height: 128px;
  border-radius: 50%;

  background: var(--skel) !important; /* #E4E6E8 */
}

/* =============================
   POST DETAILS SKELETON
   идея: справа skeleton, слева только media + 1 line, всё ниже скрыто
============================= */

body.app-post-details.is-skeleton {
  pointer-events: none; /* как в Home skeleton */
}

/* LEFT: media skeleton */
body.app-post-details.is-skeleton .post-media {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: var(--skel) !important;
}

body.app-post-details.is-skeleton .post-media-img {
  opacity: 0 !important;
}

body.app-post-details.is-skeleton .post-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* во время skeleton убираем кликабельные элементы превью */
body.app-post-details.is-skeleton .post-media-arrow,
body.app-post-details.is-skeleton .post-media-fullscreen {
  display: none !important;
}

/* DOTS: серые точки */
body.app-post-details.is-skeleton #postDots {
  position: relative;
  min-height: 10px;
}

/* пока skeleton активен, настоящие точки (которые создает JS) не показываем */
body.app-post-details.is-skeleton #postDots {
  display: block !important; /* игнорируем dotsWrap.style.display = "flex" */
}

body.app-post-details.is-skeleton #postDots .post-dot {
  display: none !important;
}

body.app-post-details.is-skeleton #postDots::before {
  content: "";
  display: block;
  width: 96px;
  height: 6px;
  margin: 0 auto;
  border-radius: 999px;
  background:
    radial-gradient(circle at 3px 3px, var(--skel) 3px, transparent 4px)
    0 0 / 16px 6px repeat-x;
  opacity: 0.95;
}

/* ONE LINE under preview */
body.app-post-details.is-skeleton .post-below-skel {
  height: 38px;
  width: 560px;
  margin-top: 22px;
  border-radius: 999px;
  background: var(--skel) !important;
  position: relative;
  overflow: hidden;
}

body.app-post-details.is-skeleton .post-below-skel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* IMPORTANT: hide everything below preview on the left */
body.app-post-details.is-skeleton .post-title,
body.app-post-details.is-skeleton .post-desc,
body.app-post-details.is-skeleton .post-actions,
body.app-post-details.is-skeleton .post-discussion,
body.app-post-details.is-skeleton #postComments {
  display: none !important;
}

/* hide comment UI + divider полностью */
body.app-post-details.is-skeleton .post-divider,
body.app-post-details.is-skeleton .post-section-title,
body.app-post-details.is-skeleton .post-comment-form,
body.app-post-details.is-skeleton .post-comments {
  display: none !important;
}


/* RIGHT: creator skeleton */

body.app-post-details.is-skeleton .post-creator-ava {
  opacity: 0 !important;
}

body.app-post-details.is-skeleton .post-creator {
  position: relative;
}

body.app-post-details.is-skeleton .post-creator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--skel) !important;
}

/* name/handle/bio placeholders when empty */
body.app-post-details.is-skeleton .post-creator-name:empty,
body.app-post-details.is-skeleton .post-creator-handle:empty,
body.app-post-details.is-skeleton .post-creator-bio:empty {
  display: block;
  background: var(--skel) !important;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

body.app-post-details.is-skeleton .post-creator-name:empty {
  height: 14px;
  width: 190px;
  margin-left: 56px;
  margin-top: 4px;
}

body.app-post-details.is-skeleton .post-creator-handle:empty {
  height: 12px;
  width: 120px;
  margin-left: 56px;
  margin-top: 10px;
}

body.app-post-details.is-skeleton .post-creator-bio:empty {
  height: 12px;
  width: 260px;
  margin-top: 16px;
}

/* shimmer on right lines */
body.app-post-details.is-skeleton .post-creator-name:empty::after,
body.app-post-details.is-skeleton .post-creator-handle:empty::after,
body.app-post-details.is-skeleton .post-creator-bio:empty::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* follow + view profile become skeleton bars */
body.app-post-details.is-skeleton .post-follow-btn,
body.app-post-details.is-skeleton .post-view-profile {
  color: transparent !important;
  background: var(--skel) !important;
  border: none !important;
  box-shadow: none !important;
}

body.app-post-details.is-skeleton .post-follow-btn {
  width: 120px;
  height: 37px;
  border-radius: 999px;
}

body.app-post-details.is-skeleton .post-view-profile {
  width: 110px;
  height: 14px;
  border-radius: 999px;
}

/* RIGHT: More cards skeleton (if we inject .is-skeleton) */
body.app-post-details.is-skeleton .post-more-card.is-skeleton {
  background: var(--skel) !important;
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}

body.app-post-details.is-skeleton .post-more-card.is-skeleton img {
  opacity: 0 !important;
}

body.app-post-details.is-skeleton .post-more-card.is-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* =============================
   NOTIFICATIONS SKELETON
============================= */

.app-notifications.is-skeleton .notif-list {
  pointer-events: none;
}

/* одна цельная плашка, как skeleton в Home */
.app-notifications.is-skeleton .notif-item.is-skeleton {
  width: 100%;
  background: var(--skel) !important;
  position: relative;
  overflow: hidden;
}

/* shimmer должен быть на основной плашке (как в Home skeleton) */
.app-notifications.is-skeleton .notif-item.is-skeleton::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--skel-shine), transparent);
  transform: translateX(-120%);
  animation: skel-shimmer 1.1s infinite;
}

/* убираем голубую unread-подложку, чтобы не было синего фона */
.app-notifications.is-skeleton .notif-item.is-unread::before {
  background: transparent !important;
  box-shadow: none !important;
}

/* прячем содержимое внутри, чтобы не было "полосок", но размер карточки сохраняется */
.app-notifications.is-skeleton .notif-item.is-skeleton > * {
  visibility: hidden;
}

/* Post delete confirm */
.post-confirm {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  z-index: 9999;
}

.post-confirm.is-open {
  display: flex;
}

.post-confirm-card {
  width: 320px;
  background: #fff;
  border: 1px solid #A1A5AC;
  border-radius: 16px;
  padding: 18px;
  box-shadow: none;
}

.post-confirm-title {
  font-size: 16px;
  font-weight: 500;
  color: #4B5563;
  margin-bottom: 14px;
}

.post-confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.post-confirm-btn {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #D7DAE0;
  background: #fff;
  font-weight: 500;
  cursor: pointer;
}

.post-confirm-btn.is-danger {
  border: none;
  background: #FF5D5D;
  color: #fff;
}

.post-confirm-btn.is-cancel {
  color: #4B5563;
}

/* AI confirm input (reuse post-confirm modal) */
.ai-confirm-input {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid #D7DAE0;
  outline: none;

  font-size: 14px;
  font-weight: 500;
  color: #4B5563;
  background: #fff;

  margin: 0 0 14px 0;
}

.ai-confirm-input:focus {
  outline: none;
  border-color: #1E56FA;
}

.post-confirm-btn.is-primary {
  border: none;
  background: #1E56FA;
  color: #fff;
}

/* =========================
   SEARCH DROPDOWN (UPP)
========================= */

.search {
  position: relative; /* у тебя уже есть, оставляем */
}

.search-dd {
  position: absolute;
  top: 56px;
  left: 0;
  width: 860px;
  z-index: 200;
}

.search-dd-inner {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.10);
  padding: 18px 18px 14px 18px;
}

.search-dd-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-dd-title {
  font-size: 15px;
  font-weight: 600;
  color: #4B5563;
  margin-bottom: 2px;
}

.search-dd-divider {
  height: 1px;
  background: rgba(0,0,0,0.08);
  margin: 12px 0;
}

.search-dd-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.search-dd-item {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.search-dd-item:hover .search-dd-name,
.search-dd-item:hover .search-dd-post-title {
  text-decoration: underline;
}

.search-dd-ava {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  object-fit: cover;
}

.search-dd-name {
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
}

.search-dd-post {
  align-items: flex-start;
  gap: 12px;
}

.search-dd-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  flex: 0 0 72px;
}

.search-dd-post-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 4px;
}

.search-dd-post-title {
  font-size: 15px;
  font-weight: 500;
  color: #4B5563;
}

.search-dd-by {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-dd-mini-ava {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  object-fit: cover;
}

.search-dd-by-text {
  font-size: 13px;
  color: #4B5563;
  font-weight: 400;
}

.search-dd-empty {
  margin-top: 12px;
  font-size: 13px;
  color: #4B5563;
}

/* Skeleton */
.search-sk-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}

.search-sk-circle,
.search-sk-thumb,
.search-sk-mini-circle,
.search-sk-line {
  background: rgba(0,0,0,0.08);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}

.search-sk-circle {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  flex: 0 0 40px;
}

.search-sk-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  flex: 0 0 72px;
}

.search-sk-post {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.search-sk-post-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 8px;
}

.search-sk-sub {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-sk-mini-circle {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  flex: 0 0 18px;
}

.search-sk-line {
  height: 10px;
  border-radius: 999px;
}

.search-sk-line.w-180 { width: 180px; }
.search-sk-line.w-160 { width: 160px; }
.search-sk-line.w-120 { width: 120px; }

/* shimmer */
.search-sk-circle::after,
.search-sk-thumb::after,
.search-sk-mini-circle::after,
.search-sk-line::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.55) 50%,
    rgba(255,255,255,0) 100%
  );
  animation: searchShimmer 1.2s infinite;
}

@keyframes searchShimmer {
  to { transform: translateX(100%); }
}

/* -----------------------------
   Error state (card + retry)
------------------------------ */
.error-card {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.03);
  padding: 18px 18px 16px;
}

.error-card-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin: 0 0 6px;
}

.error-card-text {
  font-size: 15px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.70);
  margin: 0 0 14px;
  line-height: 1.35;
}

.error-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}

.error-retry-btn {
  height: 37px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.error-retry-btn:hover {
  background: rgba(255, 255, 255, 0.10);
}

/* =========================
   AI AGENT
========================= */

.ai-grid {
  grid-template-columns: 260px 1fr 352px; /* возвращаем 3 колонки как в Home/Profile */
  gap: 50px;
}

/* в AI тоже показываем правую колонку */
.app-ai .home-right {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
}

/* =========================
   AI MODE SELECTOR (right sidebar)
========================= */

.ai-mode {
  padding-top: 6px;
  text-align: left;
}

.ai-mode-title {
  font-size: 17px;
  line-height: 30px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 22px;
}

.ai-mode-option {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  margin-bottom: 28px;
}

.ai-mode-option:last-child {
  margin-bottom: 0;
}

.ai-mode-name {
  font-size: 16px;
  line-height: 26px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 6px;
}

.ai-mode-desc {
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: #7f858f;
  max-width: 240px;
}

.ai-mode-title,
.ai-mode-name,
.ai-mode-desc,
.ai-mode-left {
  text-align: left;
}

.ai-mode-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;

  border: 1px solid #C9CED6;
  background: #F8F6F6;

  position: relative;
  flex-shrink: 0;
}

.ai-mode-option.is-active .ai-mode-radio {
  border-color: #175cff;
}

.ai-mode-option.is-active .ai-mode-radio::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #175cff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/* left sidebar */
.ai-sidebar {
  padding-top: 6px;
}

.ai-side-head {
  padding: 0 2px 8px 2px;
}

.ai-side-title {
  font-size: 12px;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.55);
}

.ai-side-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.60);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 12px;
}

.ai-back:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ai-back-ico {
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/back-icon.svg") center/contain no-repeat;
}

.ai-side-spacer {
  height: 2px;
}

.ai-nav-row {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;

  /* IMPORTANT: make button text render exactly like normal text */
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #7F858F;

  -webkit-appearance: none;
  appearance: none;

  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-radius: 999px;
  text-align: left;
}

.ai-nav-row-static {
  cursor: default;
  font-size: 15px;
  font-weight: 500;   /* Medium */
  color: #7F858F;     /* Your Chats */
  padding: 12px 0 6px;
}

.ai-nav-row-static:hover {
  background: transparent;
}

.ai-nav-ico {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: #7F858F;
}

.ai-ico-new-chat {
  background: #7F858F; /* цвет иконки как текст */
  -webkit-mask: url("../assets/icons/new-chat-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/new-chat-icon.svg") center/contain no-repeat;
}

.ai-ico-your-chats {
  background: rgba(0, 0, 0, 0.55);
  -webkit-mask: url("../assets/icons/your-chats-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/your-chats-icon.svg") center/contain no-repeat;
}

.ai-threads {
  display: flex;
  flex-direction: column;
  gap: 5px;          /* больше воздуха между чатами */
  margin-top: 8px;   /* больше воздуха после "Your chats" */
  padding-left: 0;    /* убрали левый отступ полностью */
}

.ai-thread {
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 12px;
  text-align: left;
}

.ai-thread:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ai-thread.is-active {
  background: rgba(0, 0, 0, 0.04);
}

.ai-ico-chat {
  background: rgba(0, 0, 0, 0.55);
  -webkit-mask: url("../assets/icons/chat-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/chat-icon.svg") center/contain no-repeat;
}

.ai-thread-title {
  color: #4B5563;
  font-size: 15px;
  font-weight: 500;
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* center */
.ai-center {
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;

  /* важно: базово без верхнего паддинга, чтобы empty не прыгал */
  padding-top: 0;
  padding-bottom: 0;

  width: 815px;
  max-width: 815px;
  height: 100%;
  align-self: stretch;
  justify-self: start;
}

/* empty state: центрируем контент, без изменения паддингов */
.app-ai.is-empty .ai-center {
  justify-content: center;
}

/* chat state: добавляем внутренние отступы уже только когда есть сообщения */
.app-ai:not(.is-empty) .ai-center {
  justify-content: flex-start;
  padding-top: 52px;
  padding-bottom: 52px;
}

/* respect [hidden] for AI blocks */
.ai-empty[hidden],
.ai-messages[hidden] {
  display: none !important;
}

/* empty state */
.ai-empty {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.ai-empty-title {
  font-size: 46px;
  line-height: 1.1;
  font-weight: 700;
  color: rgba(55, 65, 81, 0.88);
  letter-spacing: -0.03em;
}

/* EMPTY: центрируем связку Title + Input как единый блок, без прыжков */
.app-ai.is-empty .ai-empty {
  margin-top: auto; /* забираем свободное место сверху */
}

.app-ai.is-empty .ai-composer {
  margin-top: 18px;
  margin-bottom: auto; /* забираем свободное место снизу */
  position: static; /* важно, чтобы sticky не включался в empty */
}

/* messages */
.ai-messages {
  width: 100%;
  max-width: 720px;
  margin: 0 auto; 
  flex: 1 1 auto;
  gap: 28px;
  display: flex;
  flex-direction: column;
  padding-bottom: 140px; /* запас под липкий инпут */
}

.ai-msg {
  width: 100%;
  display: flex;
}

.ai-msg-user {
  justify-content: flex-end;
  flex-direction: column;
  align-items: flex-end;
}

.ai-msg-assistant {
  justify-content: flex-start;
}

.ai-bubble {
  max-width: 800px;
  width: fit-content;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #4B5563;
}

.ai-bubble-user {
  max-width: min(640px, 100%);
  width: fit-content;
  display: inline-block;

  background: #ffffff;
  border-radius: 25px;
  padding: 10px 25px;
  border: 1px solid rgba(0, 0, 0, 0.06);

  overflow-wrap: anywhere;
  word-break: break-word;
}

.ai-bubble-assistant {
  width: 100%;
}

.ai-bubble-assistant b {
  font-weight: 700;
  color: rgba(17, 24, 39, 0.88);
}

.ai-composer {
  width: 100%;
  margin-top: 20px;
}

.app-ai:not(.is-empty) .ai-composer {
  margin-top: auto;
  position: sticky;
  bottom: 52px;
  padding-top: 20px;
}

.app-ai .ai-center {
  justify-content: center;
}

.app-ai:has(#aiMessages:not([hidden])) .ai-center {
  justify-content: flex-start;
}

.app-ai:has(#aiMessages:not([hidden])) .ai-composer {
  margin-top: auto;
  position: sticky;
  bottom: 28px;
  z-index: 20;
}

.app-ai:not(.is-empty) .ai-center {
  padding-bottom: 0;
}

.ai-input {
  width: 100%;
  position: relative;

  min-height: 44px;
  background: #ffffff;
  border-radius: 999px;
  box-shadow: var(--tile-shadow);

  display: flex;
  align-items: center;
  overflow: hidden;
}

.ai-input-field {
  width: 100%;
  height: 44px;
  min-height: 44px;
  max-height: 156px;

  padding: 16px 98px 12px 18px;
  line-height: 20px;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;

  box-sizing: border-box;
  border: 0;
  outline: none;
  resize: none;
  overflow-y: hidden;
  background: transparent;

  font-size: 15px;
  font-weight: 400;
  color: #1b233a;

  display: block;
}

.ai-input-field::placeholder {
  color: rgba(75, 85, 99, 0.5);
}

.ai-send {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);

  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;

  background: #175cff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ai-send:hover {
  background: #0f4de2;
}

.ai-send-ico {
  width: 16px;
  height: 16px;
  background: #ffffff;
  -webkit-mask: url("../assets/icons/send-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/send-icon.svg") center/contain no-repeat;
}

.ai-send.is-stop .ai-send-ico {
  width: 14px;
  height: 14px;
  background: #ffffff;
  -webkit-mask: url("../assets/icons/stop-icon.svg") center/contain no-repeat;
  mask: url("../assets/icons/stop-icon.svg") center/contain no-repeat;
}

/* AI attachments (image analysis) */
.ai-attachments {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px 0;
  padding: 0 6px;
}

.ai-attach-chip {
  position: relative;
  width: 74px;
  height: 54px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(17, 24, 39, 0.06);
  box-shadow: var(--tile-shadow);
}

.ai-attach-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* AI message images (history, like GPT) */
.ai-msg-images {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px 0;

  justify-content: flex-end;
  align-self: flex-end;
  max-width: min(640px, 100%);
}

.ai-msg-img {
  width: 140px;
  height: 100px;
  border-radius: 14px;
  overflow: hidden;
  display: block;
  background: rgba(17, 24, 39, 0.06);
  box-shadow: var(--tile-shadow);
}

.ai-msg-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ai-attach-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ai-attach-remove-ico {
  width: 12px;
  height: 12px;
  background: #111827;
  -webkit-mask: url("../assets/icons/close.svg") center/contain no-repeat;
  mask: url("../assets/icons/close.svg") center/contain no-repeat;
}

.ai-attach {
  position: absolute;
  right: 56px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  background: rgba(17, 24, 39, 0.06);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.ai-attach:hover {
  background: rgba(17, 24, 39, 0.10);
}

.ai-attach-ico {
  width: 16px;
  height: 16px;
  background: #4b5563;
  opacity: 0.75;
  -webkit-mask: url("../assets/icons/attach.svg") center/contain no-repeat;
  mask: url("../assets/icons/attach.svg") center/contain no-repeat;
  display: block;
}

.ai-loading {
  opacity: 0.65;
}

.ai-error {
  background: #2b2f36;
  border: 1px solid #3b414b;
  border-radius: 16px;
  padding: 14px 16px;
  color: #ffb4b4;
  font-size: 14px;
}

.ai-error-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.ai-error-sub {
  opacity: 0.8;
}

.ai-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.06);
}

.ai-codeblock {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.07);
  overflow-x: auto;
}

.ai-codeblock code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  white-space: pre;
}

.ai-h1 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 10px 0 6px;
}

.ai-h2 {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  margin: 10px 0 6px;
}

.ai-p { line-height: 1.55; }

.ai-spacer { height: 10px; }

.ai-h1 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  margin: 10px 0 6px;
}

.ai-h2 {
  font-weight: 700;
  font-size: 16px;
  line-height: 1.25;
  margin: 10px 0 6px;
}

.ai-h3 {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
  margin: 10px 0 6px;
}

.ai-ul,
.ai-ol {
  margin: 8px 0;
  padding-left: 22px;
}

.ai-ul li,
.ai-ol li {
  margin: 4px 0;
}

.ai-quote {
  margin: 10px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.05);
  border-left: 3px solid rgba(0,0,0,0.18);
}

.ai-hr {
  border: 0;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin: 12px 0;
}

.ai-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-thread-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
}

.ai-thread-row:hover {
  background: rgba(0, 0, 0, 0.04);
}

.ai-thread-row.is-active {
  background: rgba(0, 0, 0, 0.04);
}

.ai-thread-main {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-radius: 999px;
  text-align: left;
}

/* hide chat icons in thread list */
.ai-thread-main .ai-nav-ico {
  display: none;
}

.ai-thread-actions {
  display: inline-flex;
  gap: 6px;
  padding-right: 8px;
  opacity: 0;
  pointer-events: none;
}

.ai-thread-row:hover .ai-thread-actions {
  opacity: 1;
  pointer-events: auto;
}

.ai-thread-act {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.04);
}

.ai-thread-act:hover {
  background: rgba(0, 0, 0, 0.08);
}

/* icon inside button (uses your svg files) */
.ai-thread-act::before {
  content: "";
  width: 12px;
  height: 12px;
  display: block;

  background: #4B5563;

  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

/* rename icon */
.ai-thread-act-rename::before {
  -webkit-mask-image: url("../assets/icons/rename.svg");
  mask-image: url("../assets/icons/rename.svg");
}

/* delete button + icon */
.ai-thread-act-danger {
  background: rgba(255, 0, 0, 0.06);
}

.ai-thread-act-danger:hover {
  background: rgba(255, 0, 0, 0.12);
}

.ai-thread-act-danger::before {
  background: #FF3B30;
  -webkit-mask-image: url("../assets/icons/delete.svg");
  mask-image: url("../assets/icons/delete.svg");
}

/* visually hidden text for accessibility */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   EVENT DETAILS
   Mobile-only sections must be hidden on desktop
========================= */
.event-mobile-sections{
  display: none;
}

/* Profile: mobile stats block is hidden on desktop */
.profile-mobile-stats{
  display: none;
}

/* Create Post: close button */
.cp-close{
  position: absolute;
  top: 16px;
  right: 34px;

  width: 30px;
  height: 30px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 0;
  border-radius: 50%;

  /* круг */
  background: #F8FAFC;

  cursor: pointer;
}

.cp-close::before,
.cp-close::after{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #1F5CFF;
  transform-origin: center;
}

.cp-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.cp-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }

/* iOS tap highlight / grey square reset */
:root{
  -webkit-tap-highlight-color: transparent;
}

/* Only mobile: remove tap highlight + weird active flash on tappables */
@media (max-width: 900px){
  a, button, [role="button"], input, textarea, select, label, summary{
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  button, [role="button"]{
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    touch-action: manipulation;
  }

  a:focus, a:focus-visible,
  button:focus, button:focus-visible,
  [role="button"]:focus, [role="button"]:focus-visible{
    outline: none;
  }

  /* Kill default iOS grey flash (if any element gets it) */
  a:active, button:active, [role="button"]:active{
    background-color: transparent;
  }
}