/* Kocehind social web. The public site and Control Center use their own themes. */
body.social-web {
  --bg: #100e19;
  --surface: #1a1727;
  --surface-2: #231e33;
  --text: #f6f3fc;
  --muted: #b2a9c2;
  --border: #363045;
  --accent: #ba9aff;
  --pink: #ff639d;
  --header-height: 68px;
  --feed-bar: 64px;
  --rail-width: 228px;
  --discovery-width: 0px;
  --bottom-nav: 0px;
  --page-padding: 30px;
  --feed-height: calc(100dvh - var(--header-height) - var(--feed-bar) - var(--bottom-nav));
  color-scheme: dark;
  background: radial-gradient(ellipse at 95% 0%, #211533 0, transparent 42rem), var(--bg);
}

.social-web .app-header {
  inset: 0 0 auto var(--rail-width);
  height: var(--header-height);
  justify-content: flex-start;
  gap: 18px;
  padding: 0 var(--page-padding);
  background: #100e19ee;
  border-color: var(--border);
}

.social-web .app-header .logo {
  position: absolute;
  inset-inline-start: calc(20px - var(--rail-width));
  min-height: 44px;
  gap: 10px;
}

.social-web .logo img {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  box-shadow: none;
}

.social-web .logo > .brand-wordmark {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: 24px;
  font-weight: 850;
  letter-spacing: -.055em;
  white-space: nowrap;
}

.brand-wordmark > span { color: var(--accent); }

.social-web #search-form {
  width: min(390px, 100%);
  min-height: 42px;
  max-width: none;
  flex: 0 1 390px;
  background: var(--surface);
  border-color: var(--border);
}

.social-web #search-form input {
  padding: 9px 14px;
  font-size: 14px;
}

.social-web #search-form input::placeholder { color: var(--muted); }

.social-web #search-form button {
  display: grid;
  place-items: center;
  min-width: 42px;
  color: var(--muted);
  padding: 0;
}

.social-web #search-form #search-close { display: none; }

.social-web #header-actions {
  margin-inline-start: auto;
  gap: 10px;
}

.social-web #header-actions .btn {
  min-height: 42px;
  font-size: 13px;
  padding: 8px 14px;
  white-space: nowrap;
}

.social-web #header-actions .header-upload {
  background: #28203b;
  color: #f4eaff;
  border-color: #53416f;
}

.header-profile {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}

.social-web .sidebar {
  inset: 0 auto 0 0;
  width: var(--rail-width);
  padding: calc(var(--header-height) + 12px) 14px 20px;
  background: linear-gradient(162deg, #211a31, #161321 58%, #171421);
  border-right: 1px solid var(--border);
  backdrop-filter: none;
  scrollbar-width: thin;
}

.social-web .sidebar nav { gap: 4px; }

.social-web .sidebar nav a {
  min-height: 46px;
  padding: 9px 12px;
  border: 1px solid transparent;
  gap: 11px;
  color: var(--muted);
}

.social-web .sidebar nav a.active {
  color: #f8f0ff;
  border-color: #594576;
  background: linear-gradient(100deg, #35274d, #2b203e);
  box-shadow: inset 3px 0 #b28aff;
}

.social-web .sidebar nav a.active svg { color: #ccafff; }
.social-web .sidebar nav a .nav-short { display: none; }
.social-web .sidebar-footer { color: var(--muted); }
.social-web .sidebar-footer p { color: var(--muted); margin: 4px 0 0; }
.social-web #sidebar-account { margin-top: 17px; }
.social-web #sidebar-account p { color: var(--muted); }
.social-web .account-mini { min-width: 0; overflow-wrap: anywhere; }
.social-web .nav-dot { background: #f48fce; box-shadow: none; }

.social-web #content {
  display: flow-root;
  min-height: calc(100dvh - var(--header-height) - var(--bottom-nav));
  margin: var(--header-height) var(--discovery-width) var(--bottom-nav) var(--rail-width);
  padding: 0 max(var(--page-padding), calc((100vw - var(--rail-width) - var(--discovery-width) - 1100px) / 2)) 28px;
}

.social-web[data-view="feed"] #content { padding-bottom: 0; }

.social-web .discovery-aside {
  display: none;
  inset: var(--header-height) 0 0 auto;
  width: var(--discovery-width);
  padding: 22px 22px 24px 0;
  background: none;
  border: 0;
  scrollbar-width: thin;
}

@media (min-width: 1180px) {
  .social-web[data-view="feed"] { --discovery-width: 294px; }
  .social-web[data-view="feed"] .discovery-aside { display: block; }
}

.discovery-panel {
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 18px;
}

.social-web .aside-title { align-items: center; gap: 6px; margin-bottom: 10px; }
.aside-title h2 { margin: 4px 0 0; font-size: 18px; color: var(--text); letter-spacing: -.025em; }
.trend-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #312343;
  color: var(--accent);
  font-size: 17px;
}
.social-web .trend { margin: 2px 0; padding: 8px 6px; min-height: 48px; }
.social-web .trend strong { overflow-wrap: anywhere; }
.social-web .trend small { color: var(--muted); }
.discovery-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 44px;
  margin-top: 8px;
  border-top: 1px solid var(--border);
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.social-web .download-note {
  margin-top: 14px;
  background: radial-gradient(ellipse at 90% 0%, #452653 0, transparent 85%), #21172e;
  border-color: #493556;
}

.social-web .btn.primary {
  background: linear-gradient(112deg, #6435c7, #962d8c);
  border-color: #b67bdd80;
  box-shadow: 0 6px 20px #1e0f3475;
}

.social-web .section-top { padding-top: 28px; }
.social-web .section-top h1 { font-size: clamp(25px, 3vw, 35px); }
.social-web .section-top p { font-size: 14px; }
.social-web .settings-panel,
.social-web .user-row {
  border-radius: 18px;
  background: var(--surface);
  box-shadow: none;
}
.social-web .settings-panel { max-width: 780px; }

.social-web .feed-header {
  height: var(--feed-bar);
  max-width: 650px;
}

#feed-view-cache { display: none !important; }
.social-web .feed-page { display: contents; }
.social-web .feed-loading-skeleton {
  height: var(--feed-height); min-height: var(--feed-height); max-width: 650px; margin: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) 64px; gap: 16px; align-items: center;
  padding: 12px 0 25px; scroll-snap-align: start;
}
.social-web .feed-skeleton-stage {
  position: relative; height: 100%; max-height: 840px; overflow: hidden; border-radius: 20px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  color: #c4b5fd; background: linear-gradient(145deg, #191525, #100e19 58%, #201832);
  border: 1px solid rgba(255,255,255,.07);
}
.social-web .feed-skeleton-stage::before {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(105deg, transparent 25%, rgba(255,255,255,.055) 48%, transparent 72%);
  animation: feed-skeleton-shimmer 1.35s ease-in-out infinite;
}
.social-web .feed-skeleton-stage strong,.social-web .feed-skeleton-stage small,.social-web .feed-skeleton-spinner { position: relative; z-index: 1; }
.social-web .feed-skeleton-stage strong { font-size: 14px; }
.social-web .feed-skeleton-stage small { color: #a69bb9; font-size: 12px; }
.social-web .feed-skeleton-spinner { width: 30px; height: 30px; border: 3px solid #a78bfa44; border-top-color: #b99aff; border-radius: 50%; animation: feed-skeleton-spin .8s linear infinite; }
.social-web .feed-skeleton-actions { display: grid; justify-items: center; gap: 22px; }
.social-web .feed-skeleton-actions i { width: 42px; height: 42px; border-radius: 50%; background: #292239; border: 1px solid #ffffff0d; }
.social-web .feed-page-loading { min-height: 72px; display: grid; place-items: center; color: var(--muted); font-size: 13px; }
@keyframes feed-skeleton-shimmer { to { transform: translateX(100%); } }
@keyframes feed-skeleton-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .social-web .feed-skeleton-stage::before,.social-web .feed-skeleton-spinner { animation: none; }
}
.social-web .feed-tabs { gap: 3px; }
.social-web .feed-tabs a { padding: 9px 15px; color: var(--muted); }
.social-web .feed-tabs a.active { background: #3c2d55; color: var(--text); box-shadow: none; }
.social-web .feed-header #refresh-feed { min-height: 40px; padding: 8px 12px; }
.social-web .feed-scroll { height: var(--feed-height); scrollbar-color: var(--border) transparent; }
.social-web .feed-scroll .post { height: var(--feed-height); min-height: var(--feed-height); }
.social-web .video-stage { box-shadow: 0 16px 44px #08061085; }
.social-web .post-actions button .circle { background: #231d32; }
.social-web .post-actions button.active .circle { background: #51253f; }
.social-web .comments-dialog { top: var(--header-height); height: calc(100dvh - var(--header-height)); background: #191525; }
.social-web .detail-view { height: calc(100dvh - var(--header-height) - var(--bottom-nav)); }
.social-web .detail-view .post { height: 100%; min-height: 0; }

.social-web .profile-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 18px;
  padding: 31px 30px 24px;
  margin: 24px 0 16px;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: radial-gradient(ellipse at 8% 0%, #49305c80, transparent 58%), var(--surface);
}

.social-web .profile-top { gap: 18px; align-items: center; }
.social-web .profile-top h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); line-height: 1.2; }
.social-web .profile-top h2 { margin: 5px 0 0; color: var(--muted); font-size: 14px; }
.social-web .profile-top .avatar {
  border: 3px solid transparent;
  background: linear-gradient(#272037, #272037) padding-box, linear-gradient(140deg, #85ceff, #a678ff 55%, #e88dd0) border-box;
  box-shadow: 0 0 0 3px #141121, 0 10px 28px #10092075;
}

.social-web .profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 390px);
  margin: 0;
  padding: 5px 4px;
  gap: 0;
  border-color: #433750;
  background: #120e1c65;
}

.social-web .profile-stats button {
  min-width: 0;
  min-height: 52px;
  border-radius: 9px;
  padding: 3px 5px;
  color: var(--muted);
}

.social-web .profile-stats button + button { border-left: 1px solid var(--border); }
.social-web .profile-stats strong { display: block; margin: 0; font-size: 19px; line-height: 1.2; }
.social-web .profile-bio { margin: 0; max-width: 66ch; }
.social-web .profile-links { margin: 0; }
.profile-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.social-web .profile-actions .btn, .social-web .profile-actions .icon-btn { min-height: 44px; }
.social-web .profile-actions .icon-btn { width: 44px; }
.social-web #profile-visitors:empty { display: none; }
.social-web .profile-visitors-button { margin: 0; }
.social-web .profile-tabs { margin-bottom: 14px; }
.social-web .profile-tab-list { gap: 8px; margin-bottom: 10px; }
.social-web .profile-tab-list a { padding-inline: 12px; justify-content: center; }
.profile-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.social-web .profile-filters a {
  min-height: 44px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.social-web .profile-filters a.active { background: #302448; color: #eee3ff; border-color: #73589b; }
.social-web #profile-posts .grid { gap: 9px; }
.social-web #profile-posts .grid-cover { border-radius: 11px; }
.social-web #profile-posts > .empty { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; }

.wallet-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.wallet-identity {
  min-width: 0;
  padding: 22px 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0, #49305b 0, transparent 75%), var(--surface);
}
.wallet-identity .avatar {
  width: 74px;
  height: 74px;
  font-size: 29px;
  border: 2px solid #a47af0;
}
.wallet-identity h2 { margin: 9px 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.wallet-identity p { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
.wallet-identity .btn { margin-top: 15px; }
.social-web .wallet-balances {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 16px;
}
.social-web .wallet-card { padding: 16px; gap: 8px; border-radius: 18px; }
.social-web .wallet-card.accent { background: radial-gradient(ellipse at 100% 0%, #5a3a49, transparent 85%), #282035; }
.social-web .wallet-card.earnings-card { background: radial-gradient(ellipse at 100% 0%, #412d58, transparent 85%), var(--surface); }
.social-web .wallet-card strong { font-size: clamp(21px, 2.35vw, 29px); font-variant-numeric: tabular-nums; }
.wallet-card-title { display: flex; justify-content: space-between; align-items: center; gap: 7px; color: var(--muted); font-weight: 650; }
.wallet-metric-icon {
  display: inline-grid;
  flex: 0 0 29px;
  place-items: center;
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: #382b4b;
  color: #d2b7ff;
}
.wallet-metric-icon svg { width: 16px; height: 16px; }
.wallet-metric-icon.coin { background: #543b29; color: #ffd88d; }
.social-web .wallet-card .btn { align-self: flex-start; min-height: 42px; font-size: 12px; padding-inline: 12px; }
.social-web .wallet-main .settings-panel { max-width: none; margin-bottom: 14px; }
.social-web .wallet-main .settings-panel h2 { margin-bottom: 5px; }
.social-web .wallet-main .settings-panel h2 + p { margin-top: 4px; }
.social-web .wallet-main .wallet-row:last-of-type { border-bottom: 0; }
.social-web .wallet-main .wallet-row { overflow-wrap: anywhere; }
.social-web .wallet-main #wallet-error:empty { display: none; }
.social-web .wallet-main #wallet-error { color: #ff9fbb; margin: 0 0 12px; }
.social-web .coin-packages { grid-template-columns: repeat(auto-fit, minmax(min(108px, 100%), 1fr)); gap: 8px; }
.social-web .coin-package {
  margin: 0;
  padding: 12px;
  border-color: #493c5b;
  background: #211b30;
}
.social-web .coin-package:has(input:checked) { background: #3c2b55; border-color: #b28aff; }
.social-web .coin-package:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.social-web .coin-package input { margin: 0; accent-color: var(--accent); justify-self: start; }
.social-web .coin-package strong { font-size: 15px; }
.social-web .coin-package span { color: var(--muted); }
.wallet-order-heading { justify-content: space-between; align-items: center; }
.wallet-empty { color: var(--muted); }

@media (min-width: 1160px) {
  .wallet-layout:has(.wallet-identity) { grid-template-columns: 184px minmax(0, 1fr); }
  .wallet-identity { position: sticky; top: calc(var(--header-height) + 18px); }
}

@media (min-width: 761px) and (max-width: 960px) {
  body.social-web { --rail-width: 76px; --page-padding: 22px; }
  .social-web .sidebar { padding-inline: 10px; }
  .social-web .app-header .logo { inset-inline-start: calc(20px - var(--rail-width)); }
  .social-web .logo > .brand-wordmark,
  .social-web .sidebar nav a .nav-text,
  .social-web #sidebar-account,
  .social-web .sidebar-footer { display: none; }
  .social-web .sidebar nav a { justify-content: center; padding-inline: 4px; }
  .social-web .nav-dot { position: absolute; inset: 9px 11px auto auto; margin: 0; }
}

@media (max-width: 1159px) {
  .wallet-identity { display: none; }
}

@media (max-width: 760px) {
  body.social-web {
    --header-height: calc(60px + env(safe-area-inset-top));
    --bottom-nav: calc(62px + env(safe-area-inset-bottom));
    --feed-bar: 52px;
    --rail-width: 0px;
    --page-padding: 14px;
    background: var(--bg);
  }
  .social-web .app-header { padding: env(safe-area-inset-top) 12px 0; gap: 6px; }
  .social-web .app-header .logo { position: static; margin-right: auto; gap: 6px; }
  .social-web .logo img { width: 29px; height: 29px; border-radius: 9px; }
  .social-web .logo > .brand-wordmark { font-size: 20px; }
  .social-web #header-actions { margin-inline-start: 0; gap: 6px; }
  .social-web #header-actions .header-profile,
  .social-web #header-actions .download-app,
  .social-web #header-actions .header-upload > span { display: none; }
  .social-web #header-actions .header-upload,
  .social-web #header-actions #login { min-height: 44px; }
  .social-web #header-actions .header-upload { width: 44px; min-width: 44px; padding: 0; }
  .social-web #header-actions #login { min-width: 60px; padding: 0 9px; font-size: 12px; }

  .social-web .app-header:not(.search-open) #search-form {
    display: flex;
    width: 44px !important;
    min-width: 44px;
    min-height: 44px;
    max-width: 44px !important;
    flex: 0 0 44px !important;
    border: 1px solid var(--border);
    border-radius: 50%;
  }
  .social-web .app-header:not(.search-open) #search-form input { display: none; }
  .social-web #search-form button { border: 0; padding: 0; }
  .social-web .app-header.search-open #search-form {
    position: absolute;
    inset: calc(env(safe-area-inset-top) + 8px) 10px auto;
    width: auto;
    max-width: none !important;
    min-height: 44px;
    border-radius: 18px;
    z-index: 2;
  }
  .social-web .app-header.search-open #search-form #search-close { display: grid; }
  .social-web .app-header.search-open #search-form input { display: block; padding-inline: 3px; font-size: 16px; }
  .social-web .app-header.search-open .logo,
  .social-web .app-header.search-open #header-actions { visibility: hidden; }

  .social-web .sidebar {
    inset: auto 0 0;
    width: 100%;
    height: var(--bottom-nav);
    overflow: visible;
    padding: 3px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
    border: 0;
    border-top: 1px solid var(--border);
    background: #15111feb;
    backdrop-filter: blur(16px);
    z-index: 25;
  }
  .social-web .sidebar nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; height: 100%; }
  .social-web .sidebar nav a {
    display: none;
    width: auto;
    min-height: 48px;
    padding: 3px 2px;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border-radius: 10px;
    text-align: center;
  }
  .social-web .sidebar nav a[data-mobile-nav] { display: flex; }
  .social-web .sidebar nav a .nav-text,
  .social-web #sidebar-account,
  .social-web .sidebar-footer { display: none; }
  .social-web .sidebar nav a .nav-short { display: block; font-size: 10px; line-height: 1.3; }
  .social-web .sidebar nav a svg { width: 22px; height: 22px; }
  .social-web .sidebar nav a.active { box-shadow: none; }
  .social-web .nav-dot { position: absolute; inset: 7px calc(50% - 14px) auto auto; margin: 0; width: 7px; height: 7px; }
  .social-web #toast { bottom: calc(var(--bottom-nav) + 9px); }

  .social-web .feed-header { padding-inline: 0; }
  .social-web .feed-tabs a { padding: 7px 11px; font-size: 12px; }
  .social-web .feed-header #refresh-feed { min-height: 44px; }
  .social-web .feed-header #refresh-feed span { display: none; }
  .social-web .feed-scroll { margin: 0 calc(-1 * var(--page-padding)); scrollbar-width: none; }
  .social-web .feed-loading-skeleton { grid-template-columns: minmax(0,1fr) 50px; padding: 0; gap: 10px; }
  .social-web .feed-skeleton-stage { border-radius: 0; border: 0; }
  .social-web .feed-skeleton-actions { gap: 18px; }
  .social-web .feed-skeleton-actions i { width: 40px; height: 40px; }
  .social-web .post {
    display: block;
    position: relative;
    padding: 0;
    min-height: var(--feed-height);
  }
  .social-web .video-stage { border: 0; border-radius: 0; }
  .social-web .video-overlay { padding: 35px 74px 9px 14px; bottom: 43px; }
  .social-web .post-actions {
    position: absolute;
    right: 9px;
    bottom: 57px;
    gap: clamp(5px, 1.4dvh, 12px);
    padding: 0;
  }
  .social-web .post-actions button .circle { width: 44px; height: 44px; background: #171020c9; }
  .social-web .post-actions button svg { width: 20px; height: 20px; }
  .social-web .post-actions .more-action { display: grid; place-items: center; min-width: 44px; min-height: 38px; }
  .social-web .player-controls { min-height: 38px; }
  .social-web .player-controls button { height: 32px; width: 32px; }
  .social-web .detail-view { margin: 0 calc(-1 * var(--page-padding)); }
  .social-web .comments-dialog {
    inset: auto 0 var(--bottom-nav);
    height: 52dvh;
    max-height: 65dvh;
    max-width: none;
    width: 100%;
    border-radius: 20px 20px 0 0;
  }
  .social-web.comments-open .post-actions,
  .social-web.comments-open .video-overlay { visibility: hidden; }
  .social-web .section-top { padding-top: 24px; }

  .social-web .profile-hero { margin-top: 12px; gap: 14px; padding: 22px 13px 16px; text-align: center; }
  .social-web .profile-top { flex-direction: column; gap: 11px; }
  .social-web .profile-top .profile-avatar-button .avatar { width: 86px; height: 86px; }
  .social-web .profile-stats { margin-inline: auto; }
  .social-web .profile-actions { justify-content: center; }
  .social-web .profile-actions .btn { padding-inline: 12px; }
  .social-web .profile-tab-list a { flex: 1; padding-inline: 7px; }
  .social-web .profile-filters a { padding-inline: 8px; gap: 4px; }
  .social-web .profile-tabs svg { width: 15px; height: 15px; }

  .social-web .wallet-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .social-web .wallet-card:last-child { grid-column: 1 / -1; }
  .social-web .wallet-card { padding: 12px; }
  .social-web .wallet-card strong { font-size: clamp(18px, 5vw, 25px); }
  .wallet-metric-icon { flex-basis: 22px; width: 22px; height: 22px; }
  .wallet-metric-icon svg { width: 13px; height: 13px; }
  .wallet-card-title { font-size: 12px; line-height: 1.3; }
  .social-web .wallet-main .coin-packages { grid-template-columns: repeat(auto-fit, minmax(min(86px, 100%), 1fr)); }
}

@media (max-width: 540px) {
  .social-web .live-room { height: calc(100dvh - var(--header-height) - var(--bottom-nav)); }
  .social-web .chat-layout { min-height: min(400px, 58dvh); }
}

.coin-options { padding: 0; margin: 14px 0 0; border: 0; }
.coin-options legend { padding: 0; font-weight: 700; }
.social-web .coin-options .coin-packages { margin: 9px 0 0; }