*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
}

:root {
  --bg: #f8f9fa;
  --bg-2: #ffffff;
  --bg-3: #f1f3f5;
  --bg-4: #e9ecef;
  --surface: #ffffff;
  --surface-hover: #f8f9fa;
  --text: #212529;
  --text-2: #6c757d;
  --text-3: #adb5bd;
  --border: #dee2e6;
  --border-2: #ced4da;
  --accent: #007bff;
  --accent-hover: #0056b3;
  --accent-soft: rgba(0, 123, 255, 0.1);
  --success: #28a745;
  --warning: #ffc107;
  --danger: #dc3545;
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --bottom-h: 60px;
  --max-w: 600px;
  --ease: 0.15s ease;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.08);
  --cp-bg: #f8fafc;
  --cp-surface: #ffffff;
  --cp-text: #0f172a;
  --cp-text-muted: #64748b;
  --cp-border: #e2e8f0;
  --cp-primary: #4f46e5;
  --cp-primary-hover: #4338ca;
  --cp-primary-light: #eef2ff;
  --cp-danger: #ef4444;
  --cp-danger-light: #fef2f2;
  --cp-success: #10b981;
  --cp-success-light: #ecfdf5;
  --cp-warning: #f59e0b;
  --cp-warning-light: #fffbeb;
  --cp-info: #0ea5e9;
  --cp-info-light: #f0f9ff;
  --cp-radius: 8px;
  --cp-radius-lg: 12px;
  --cp-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --cp-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  --cp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
  --cp-sidebar-w: 260px;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  background-color: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-bottom: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px));
}

body.body-guest-mode,
body.cl-app-conversation {
  padding-bottom: 0;
}

body.modal-open,
body.mobile-sb-open,
body.ov-h {
  overflow: hidden;
}

body:has(.acp-main-left-sidebar) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background-color: var(--cp-bg);
  color: var(--cp-text);
  font-size: 14px;
  line-height: 1.5;
  padding-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 0;
}

a {
  color: var(--accent);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:hover {
  text-decoration: underline;
}

button {
  cursor: pointer;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

input,
textarea,
select {
  font: inherit;
  font-size: 16px;
  color: inherit;
  -webkit-appearance: none;
  box-sizing: border-box;
  max-width: 100%;
}

svg {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  flex-shrink: 0;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  line-height: 1.25;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }
p { margin: 0 0 0.5rem; }

img,
video,
iframe {
  max-width: 100%;
}

body .main-content-container svg {
  max-width: 24px;
  max-height: 24px;
}

body .main-content-container img {
  max-width: 100%;
}

body .main-content-container .icon,
body .main-content-container .avatar {
  max-width: 80px;
  max-height: 80px;
}

.d-none,
.hidden { display: none !important; }

.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }

.justify-content-between { justify-content: space-between !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-wn { flex-wrap: nowrap !important; }
.flex-item { flex: 1; }

.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }

.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.col-red { color: var(--danger) !important; }
.col-accent { color: var(--accent) !important; }
.col-green { color: var(--success) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mt-0 { margin-top: 0 !important; }
.mt-10 { margin-top: 10px !important; }
.margin-0 { margin: 0 !important; }
.ml-auto { margin-left: auto !important; }
.mr-auto { margin-right: auto !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }

.p-0 { padding: 0 !important; }
.p-10 { padding: 10px !important; }
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.overflow-hidden { overflow: hidden !important; }
.pointer { cursor: pointer !important; }
.not-allowed { cursor: not-allowed !important; opacity: 0.6; }

.block-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.block-link:hover { text-decoration: none; }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 -4px;
}

.row > [class*="col-"] {
  min-width: 0;
  box-sizing: border-box;
}

.col-3, .col-4, .col-6, .col-12,
.col-md-3, .col-lg-3, .col-xl-3, .col-xxl-2 {
  padding: 0 4px;
  width: 100%;
}

.col-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
.col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.3333%; }
.col-6 { flex: 0 0 50%; max-width: 50%; width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  padding: 10px 18px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  color: var(--text);
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  transition: background-color var(--ease), border-color var(--ease);
  cursor: pointer;
  touch-action: manipulation;
}

.btn:active { opacity: 0.8; }
.btn:disabled,
.btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn.btn-block { display: flex; width: 100%; }
.btn.sm { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.btn.md { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.btn.lg { min-height: 48px; padding: 12px 24px; font-size: 15px; }

.btn-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  min-height: 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--text);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease), border-color var(--ease);
  touch-action: manipulation;
}

.btn-custom:active { opacity: 0.8; }
.btn-custom:disabled,
.btn-custom.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-custom.btn-block { display: flex; width: 100%; }
.btn-custom.sm { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.btn-custom.md { min-height: 44px; padding: 10px 20px; font-size: 14px; }
.btn-custom.lg { min-height: 48px; padding: 12px 24px; font-size: 15px; }
.btn-custom.main-inline { background: var(--accent); color: #ffffff; }
.btn-custom.main-inline:hover { background: var(--accent-hover); text-decoration: none; }
.btn-custom.main-outline { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-custom.main-outline:hover { background: var(--accent-soft); text-decoration: none; }
.btn-custom.main-gray,
.btn-custom.main-grey { background: var(--bg-3); color: var(--text); }
.btn-custom.main-gray:hover,
.btn-custom.main-grey:hover { background: var(--bg-4); text-decoration: none; }
.btn-custom.main-green { background: var(--success); color: #fff; }
.btn-custom.main-red { background: var(--danger); color: #fff; }
.btn-custom.main-red:hover { background: #c82333; text-decoration: none; }
.btn-custom.main-white { background: #ffffff; color: var(--text); border: 1px solid var(--border); }
.btn-custom.main-white:hover { background: var(--bg-3); text-decoration: none; }
.btn-custom.main-white-outline { background: transparent; color: #ffffff; border: 1px solid #ffffff; }
.btn-custom.main-white-outline:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }

.btn-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-group .btn {
  flex: 1;
  min-width: 0;
}

body:has(.acp-main-left-sidebar) .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--cp-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--ease);
  text-decoration: none;
  white-space: nowrap;
  height: 42px;
  min-height: auto;
}

body:has(.acp-main-left-sidebar) .btn:hover { text-decoration: none; }
body:has(.acp-main-left-sidebar) .btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2); }
body:has(.acp-main-left-sidebar) .btn-primary { background-color: var(--cp-primary); color: #fff; }
body:has(.acp-main-left-sidebar) .btn-primary:hover { background-color: var(--cp-primary-hover); }
body:has(.acp-main-left-sidebar) .btn-secondary { background-color: #f1f5f9; color: var(--cp-text); border-color: var(--cp-border); }
body:has(.acp-main-left-sidebar) .btn-secondary:hover { background-color: #e2e8f0; }
body:has(.acp-main-left-sidebar) .btn-md { padding: 6px 14px; font-size: 13px; height: 34px; }
body:has(.acp-main-left-sidebar) .btn-block { width: 100%; }

.form-group { margin-bottom: 18px; }
.form-group.no-mb { margin-bottom: 0 !important; }

.form-group label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.form-control {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  min-height: 48px;
  transition: border-color var(--ease);
}

.form-control:focus {
  border-color: var(--accent);
}

.form-control::placeholder { color: var(--text-3); }
.form-control:disabled { opacity: 0.6; cursor: not-allowed; background: var(--bg-3); }

textarea,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"] {
  box-sizing: border-box;
  max-width: 100%;
}

.form-info-label {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}

.invalid-main-feedback {
  font-size: 13px;
  color: var(--danger);
  margin-top: 6px;
  font-weight: 500;
}

.valid-main-feedback {
  font-size: 13px;
  color: var(--success);
  margin-top: 6px;
  font-weight: 500;
}

.form-tos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}

.form-tos input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.form-tos a {
  color: var(--accent);
  text-decoration: none;
}

.form-dropzone {
  border: 2px dashed var(--border-2);
  border-radius: var(--radius);
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-3);
  transition: border-color var(--ease);
  margin-bottom: 16px;
}

.form-dropzone:hover { border-color: var(--accent); }
.form-dropzone__icon svg { width: 32px; height: 32px; fill: var(--accent); }
.form-dropzone__body { font-size: 14px; color: var(--text-2); }
.form-dropzone__text { font-size: 14px; font-weight: 600; color: var(--text); word-break: break-all; }

.vue-dropdown-select { position: relative; }

.vue-dropdown-select .btn {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text);
  text-align: left;
  padding: 12px 16px;
  border-radius: var(--radius);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
}

.vue-dropdown-select .btn::after {
  content: '';
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-2);
}

.vue-dropdown-select .dropdown-menu {
  width: 100%;
  margin-top: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  max-height: 250px;
  overflow-y: auto;
}

.vue-dropdown-select .dropdown-item {
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.vue-dropdown-select .dropdown-item:hover { background: var(--surface-hover); }
.select-check-mark { color: var(--accent); font-weight: 700; }

.form-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
}

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

.form-check-input {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: var(--bg-4);
  transition: background-color var(--ease);
  border-radius: 28px;
}

.form-check-input:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  transition: transform var(--ease);
  border-radius: 50%;
}

.form-check-input:checked { background-color: var(--accent); }
.form-check-input:checked:before { transform: translateX(20px); }

.dropdown { position: relative; display: inline-block; }

.dropdown-toggle {
  cursor: pointer;
  touch-action: manipulation;
}

.dropdown-toggle::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 6px;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
  opacity: 0.7;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1060;
  display: none;
  min-width: 200px;
  max-width: calc(100vw - 24px);
  padding: 6px;
  margin: 6px 0 0;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.dropdown-menu.show { display: block; }

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border-radius: var(--radius-sm);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--ease);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: var(--surface-hover);
  color: var(--text);
  text-decoration: none;
}

.dropdown-item.active {
  color: var(--accent);
  background: var(--accent-soft);
}

.dropdown-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--text-2);
  flex-shrink: 0;
}

.post-list-item,
.timeline-posts-ls { overflow: visible !important; }

.ctrls-item { position: relative; }

.dropleft .dropdown-menu.dropdown-icons {
  position: absolute !important;
  inset: auto !important;
  bottom: 100% !important;
  right: 0 !important;
  left: auto !important;
  margin-bottom: 8px !important;
  transform: none !important;
  width: 250px;
  max-width: calc(100vw - 24px);
  z-index: 1060;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  display: none;
}

.dropleft .dropdown-menu.dropdown-icons.show { display: block; }

.dropdown-menu.dropdown-icons .dropdown-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  min-height: 44px;
  width: 100%;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background-color var(--ease);
}

.dropdown-menu.dropdown-icons .dropdown-item:hover { background: var(--surface-hover); }
.dropdown-menu.dropdown-icons .dropdown-item .flex-item { flex: 0 0 auto; }
.dropdown-menu.dropdown-icons .dropdown-item .flex-item:nth-child(2) {
  flex: 1 1 auto;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-menu.dropdown-icons .dropdown-item .dropdown-item-icon_adinfo { margin-left: auto; opacity: 0.5; }
.dropdown-menu.dropdown-icons .dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
  border: none;
}

.dropleft,
.dropdown-menu-holder {
  position: relative;
  display: inline-block;
}

.dropleft .dropdown-menu,
.dropdown-menu-holder .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  z-index: 1060;
  min-width: 200px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  margin-top: 4px;
}

.dropleft.is-open .dropdown-menu,
.dropdown.is-open .dropdown-menu,
.dropdown-menu-holder.is-open .dropdown-menu,
.dropdown-menu.show {
  display: block !important;
}

body:has(.acp-main-left-sidebar) .dropdown { display: inline-block; }
body:has(.acp-main-left-sidebar) .dropdown-toggle {
  cursor: pointer;
  color: var(--cp-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
body:has(.acp-main-left-sidebar) .dropdown-toggle:hover { color: var(--cp-text); }
body:has(.acp-main-left-sidebar) .dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 1000;
  min-width: 180px;
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow-lg);
  padding: 6px 0;
  margin-top: 4px;
  text-align: left;
}
body:has(.acp-main-left-sidebar) .dropdown-menu.show { display: block; }
body:has(.acp-main-left-sidebar) .dropdown-menu-right { right: 0; left: auto; }
body:has(.acp-main-left-sidebar) .dropdown-item {
  display: block;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--cp-text);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s;
}
body:has(.acp-main-left-sidebar) .dropdown-item:hover { background-color: #f1f5f9; text-decoration: none; }

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1060;
  display: block;
  max-width: 320px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
}

.popover.show { opacity: 1; pointer-events: auto; }

.popover .arrow {
  position: absolute;
  width: 12px;
  height: 12px;
  overflow: hidden;
}

.popover .arrow::before,
.popover .arrow::after {
  content: "";
  position: absolute;
  border: 6px solid transparent;
}

.popover .popover-header,
.popover .popover-body { padding: 0; }

.popover .popover-body {
  color: var(--text);
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 1070;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  overflow-y: auto;
  outline: 0;
  -webkit-overflow-scrolling: touch;
}

.modal.show { display: flex !important; }
.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 16px;
  background: var(--bg-2);
  color: var(--text);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: auto;
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 100%;
  background: var(--bg-2);
  color: var(--text);
  border-radius: var(--radius-lg);
  border: 0;
  box-shadow: none;
  outline: 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.modal-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
}

.modal-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

.dismiss-modal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-2);
  transition: background-color var(--ease);
  flex-shrink: 0;
}

.dismiss-modal:hover { background: var(--bg-3); color: var(--text); }

.modal-body {
  padding: 16px;
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

.modal-body.no-padding { padding: 0; }

.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  flex-wrap: wrap;
}

.modal-footer .btn { flex: 1; min-width: 0; }

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1065;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-backdrop.fade { opacity: 0; transition: opacity 0.15s linear; }
.modal-backdrop.show { opacity: 1; }

.modal.vh-center { display: none; }
.modal.vh-center.show {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.modal.vh-center .modal-dialog {
  position: relative;
  left: auto;
  right: auto;
  top: auto;
  bottom: auto;
  margin: 0;
  transform: none;
  max-width: 480px;
  width: 100%;
  pointer-events: auto;
}

.modal.vh-center.show .modal-dialog { transform: none; }
.modal.vh-center .modal-content {
  border-radius: var(--radius-lg);
  max-height: calc(100dvh - 32px);
}

.info-popup-modal .modal-body h4,
.confirm-actions-modal .modal-body h4 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
}

.info-popup-modal .modal-body p,
.confirm-actions-modal .modal-body p {
  margin: 0;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.info-popup-modal .modal-footer,
.confirm-actions-modal .modal-footer { flex-wrap: nowrap; }

.info-popup-modal .modal-footer .btn-custom,
.confirm-actions-modal .modal-footer .btn-custom { flex: 1; }

.modal-swift-pubbox .modal-dialog { max-width: 540px; }

.modal-balance-widget {
  background: var(--bg-3);
  padding: 16px;
  border-radius: var(--radius);
  text-align: center;
  margin-bottom: 16px;
}

.modal-balance-widget h3 { margin: 4px 0 0; font-size: 24px; color: var(--success); }

body:has(.acp-main-left-sidebar) .modal {
  z-index: 1050;
  background-color: rgba(15, 23, 42, 0.5);
}

body:has(.acp-main-left-sidebar) .modal-dialog { max-width: 600px; }
body:has(.acp-main-left-sidebar) .modal-content {
  background-color: var(--cp-surface);
  border-radius: var(--cp-radius-lg);
  box-shadow: var(--cp-shadow-lg);
}

.popup-ticket-modal .modal-dialog { max-width: 600px; }
.popup-ticket-modal .modal-header { padding: 20px 24px; border-bottom: 1px solid var(--cp-border); }
.popup-ticket-modal .modal-title { font-size: 18px; font-weight: 600; margin: 0; color: var(--cp-text); }
.popup-ticket-modal .modal-body { padding: 24px; }
.popup-ticket-modal .modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--cp-border);
  display: flex;
  justify-content: flex-end;
  background-color: #f8fafc;
}

.timeline-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 48px 20px;
  text-align: center;
  min-height: 280px;
  background: var(--bg-2);
}

.timeline-placeholder .icon__bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.timeline-placeholder .icon__bg svg { width: 32px; height: 32px; display: block; }
.timeline-placeholder .pl-message h4 { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--text); }
.timeline-placeholder .pl-message p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 320px;
}

.timeline-navbar {
  display: flex;
  width: 100%;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 52px;
  z-index: 40;
}

.timeline-navbar__item { flex: 1 1 0%; display: flex; }
.timeline-navbar__item a { display: flex; width: 100%; flex: 1; text-decoration: none; }

.timeline-navbar__item-btn {
  width: 100%;
  padding: 14px 0;
  min-height: 48px;
  background: transparent;
  border: none;
  color: var(--text-2);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  position: relative;
  transition: color var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline-navbar__item-btn:hover { background: var(--surface-hover); color: var(--text); }
.timeline-navbar__item-btn.active { color: var(--text); }
.timeline-navbar__item-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--accent);
  border-radius: 4px 4px 0 0;
}

.btn-flex-inner { display: inline-flex; align-items: center; justify-content: center; }

.go-back,
.go-forward {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--ease);
}

.go-back:hover,
.go-forward:hover { background: var(--bg-3); }
.go-back svg,
.go-forward svg { width: 20px; height: 20px; fill: currentColor; }

.user-list-item {
  display: flex;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  background: var(--bg-2);
  transition: background-color var(--ease);
}

.user-list-item:hover { background: var(--surface-hover); }
.user-list-item__avatar { width: 48px; height: 48px; flex-shrink: 0; }

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  position: relative;
}

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

.user-avatar-online::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 12px;
  height: 12px;
  background: var(--success);
  border: 2px solid var(--bg-2);
  border-radius: 50%;
}

.user-list-item__data { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.user-data__body-topline {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.flex-item-left { flex: 1; min-width: 0; }
.user-data__name a {
  font-weight: 700;
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  display: inline-flex;
}
.user-data__name a:hover { text-decoration: underline; }

.user-data__stats {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 4px;
}

.stats-item span:first-child { color: var(--text); font-weight: 700; margin-right: 4px; }
.user-data__ctrls button { white-space: nowrap; }
.user-data__about {
  margin-top: 6px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.4;
  word-wrap: break-word;
}
.user-data__about a { color: var(--accent); text-decoration: none; }

.timeline-data-loader {
  padding: 20px 16px;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid var(--border);
}

.timeline-data-loader__btn {
  background: var(--bg-3);
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 10px 24px;
  min-height: 44px;
  border-radius: var(--radius-full);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ease);
  width: 100%;
  max-width: 280px;
}

.timeline-data-loader__btn:hover:not(:disabled) { background: var(--surface-hover); }
.timeline-data-loader__btn:disabled {
  color: var(--text-2);
  background: var(--bg-2);
  cursor: default;
}

.main-preloader-holder {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
}

.main-preloader .loading img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.main-content-container {
  position: relative;
  max-width: var(--max-w);
  min-height: 100vh;
  margin: 0 auto;
  background: var(--bg-2);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.main-content-container.guest-mode { border: 0; padding-bottom: 0; }

.main-content-container-inner {
  position: relative;
  display: block;
  min-height: 100vh;
}

.timeline-container-wrapper {
  position: relative;
  min-height: calc(100vh - var(--bottom-h));
  background: var(--bg-2);
}

.timeline-container-inner { min-height: inherit; }

.spa-preloader {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
}

.spa-preloader-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--bg-2);
  border-radius: 50%;
  box-shadow: var(--shadow);
  color: var(--accent);
}

.left-sb-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 1030;
  width: 280px;
  max-width: 82vw;
  background: var(--bg-2);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(-100%);
  transition: transform 0.2s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.left-sb-container.show { transform: translateX(0); }

.sidebar__inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 12px 8px;
}

.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar__nav-group { display: flex; flex-direction: column; gap: 2px; }
.sidebar__nav-group_collapse { display: none; }
.sidebar__nav-group_collapse.open { display: flex; }

.sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
  text-decoration: none;
}

.sidebar__nav-item:hover { background: var(--surface-hover); text-decoration: none; }
.sidebar__nav-item.active { background: var(--accent-soft); color: var(--accent); }
.sidebar__nav-item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: inherit;
}
.sidebar__nav-item .icon svg { width: 22px; height: 22px; }
.sidebar__nav-item .text {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.sidebar__nav-item .text a {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.sidebar__nav-item .text a:hover { text-decoration: none; }
.sidebar__nav-item .wallet { color: var(--text-2); font-weight: 500; font-size: 13px; }
.sidebar__nav-item-devider { height: 1px; margin: 8px 16px; background: var(--border); }

.sidebar__footer {
  padding: 12px 4px 4px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}

.sb-open-overlay {
  position: fixed;
  inset: 0;
  z-index: 1025;
  background: rgba(0, 0, 0, 0.4);
}

.right-sb-container { display: none; }

.mobile-bottom-navbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-bottom-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  max-width: var(--max-w);
  height: var(--bottom-h);
  padding: 0 4px;
}

.navbar-ctrl {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 44px;
  color: var(--text-2);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: color var(--ease);
  flex: 1;
  max-width: 64px;
  touch-action: manipulation;
}

.navbar-ctrl:hover { color: var(--text); }
.navbar-ctrl.active { color: var(--accent); }
.navbar-ctrl svg,
.navbar-ctrl i { width: 24px; height: 24px; display: block; }
.navbar-ctrl .info-indicators { position: absolute; top: 4px; right: 10px; margin: 0; }

.info-indicators {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: #ffffff;
  background: var(--accent);
  border-radius: var(--radius-full);
}

.info-indicators:empty { display: none; }

.main-footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 4px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}

.footer-nav-item { color: var(--text-2); }
.footer-nav-item a { color: var(--text-2); text-decoration: none; transition: color var(--ease); }
.footer-nav-item a:hover { color: var(--accent); text-decoration: underline; }
.footer-nav-item.dropdown .dropdown-toggle { color: var(--text-2); cursor: pointer; }
.footer-nav-item .dropdown-menu { left: 0; right: auto; max-height: 260px; overflow-y: auto; }

.footer-nav-get-apps { display: flex; align-items: center; gap: 8px; }
.footer-nav-get-apps svg { width: 20px; height: 20px; fill: var(--text-2); }
.footer-nav-get-apps a:hover svg { fill: var(--text); }

.user-name-holder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.user-name-holder__name { font-weight: 700; color: inherit; }
.user-name-holder__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--accent);
  flex-shrink: 0;
}
.user-name-holder__badge svg { width: 16px; height: 16px; }

.jq-toast-wrap {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  width: 320px;
  max-width: calc(100vw - 32px);
}

.jq-toast-wrap.top-right { top: 16px; right: 16px; }
.jq-toast-wrap.top-left { top: 16px; left: 16px; }
.jq-toast-wrap.bottom-right { bottom: calc(16px + var(--bottom-h)); right: 16px; }
.jq-toast-wrap.bottom-left { bottom: calc(16px + var(--bottom-h)); left: 16px; }

.jq-toast-single {
  position: relative;
  padding: 12px 36px 12px 16px;
  margin: 0 0 10px;
  background: var(--bg-2);
  color: var(--text);
  font-size: 14px;
  line-height: 1.4;
  border-radius: var(--radius);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow);
  pointer-events: all;
}

.jq-toast-single.jq-icon-success { border-left-color: var(--success); }
.jq-toast-single.jq-icon-error { border-left-color: var(--danger); }
.jq-toast-single.jq-icon-warning { border-left-color: var(--warning); }

.jq-toast-single .close-jq-toast-single {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
  color: var(--text-2);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--ease);
}

.jq-toast-single .close-jq-toast-single:hover { opacity: 1; }

.right-sidebar { display: flex; flex-direction: column; width: 100%; }
.right-sidebar__header { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.sidebar-searchbar { width: 100%; }

.sidebar-searchbar__input {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
}

.sidebar-searchbar__input .form-control {
  padding-left: 44px;
  padding-right: 44px;
  min-height: 44px;
  font-size: 15px;
  border-radius: var(--radius-full);
  background: var(--bg-3);
}

.keyword-input__left-icon,
.keyword-input__right-icon,
.keyword-input__right-spinner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-2);
  width: 20px;
  height: 20px;
}

.keyword-input__left-icon { left: 14px; pointer-events: none; }
.keyword-input__right-icon {
  right: 10px;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  transition: background-color var(--ease);
}
.keyword-input__right-icon:hover { background: var(--bg-4); color: var(--text); }
.keyword-input__right-spinner { right: 14px; color: var(--accent); pointer-events: none; }
.keyword-input__left-icon svg,
.keyword-input__right-icon svg,
.keyword-input__right-spinner svg { width: 18px; height: 18px; fill: currentColor; }

.sidebar-searchbar__result {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.search-result { display: flex; flex-direction: column; max-height: 400px; overflow-y: auto; }
.search-result__body { display: flex; flex-direction: column; }
.search-result__list { display: flex; flex-direction: column; }
.search-result__list-item {
  display: block;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--ease);
}
.search-result__list-item:hover { background: var(--surface-hover); }
.search-result__list-item a { display: block; text-decoration: none; color: inherit; }

.result-item-data {
  display: flex;
  padding: 12px 14px;
  gap: 12px;
  align-items: center;
}

.result-item-data__avatar { width: 40px; height: 40px; flex-shrink: 0; }
.result-item-data__avatar .avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
}
.result-item-data__avatar .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.result-item-data__data { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.result-item-data__topline {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-item-data__botline { font-size: 12px; color: var(--text-2); }
.search-result__footer { padding: 8px; border-top: 1px solid var(--border); }
.search-result__footer.disabled { opacity: 0.5; pointer-events: none; }

.right-sidebar__ads { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.right-sidebar__body { display: flex; flex-direction: column; padding: 12px 0; }
.sidebar-content { padding: 0 16px; margin-bottom: 16px; }
.sidebar-content__header { font-size: 18px; font-weight: 800; color: var(--text); padding: 8px 0 12px; }
.sidebar-content__body { display: flex; flex-direction: column; }
.sidebar-content__footer { padding: 8px 0 0; font-size: 14px; }
.sidebar-content__footer a { color: var(--accent); text-decoration: none; font-weight: 500; }
.sidebar-content__footer a:hover { text-decoration: underline; }
.sidebar-content-empty { font-size: 13px; color: var(--text-2); line-height: 1.5; padding: 8px 0; }

.sidebar-users { display: flex; flex-direction: column; gap: 12px; }
.sidebar-users__item { display: flex; gap: 12px; align-items: center; }
.sidebar-users__item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-3);
  position: relative;
}
.sidebar-users__item-avatar a { display: block; width: 100%; height: 100%; }
.sidebar-users__item-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-users__item-avatar-online::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border: 2px solid var(--bg-2);
  border-radius: 50%;
}
.sidebar-users__item-data { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sidebar-users__item-name a { color: var(--text); text-decoration: none; }
.sidebar-users__item-name a:hover { text-decoration: underline; }
.sidebar-users__item-followers { font-size: 12px; color: var(--text-2); }

.sidebar-hashtags { display: flex; flex-direction: column; gap: 4px; }
.sidebar-hashtags__item a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  transition: background-color var(--ease);
}
.sidebar-hashtags__item a:hover { background: var(--surface-hover); text-decoration: none; }
.sidebar-hashtags__item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--accent);
  flex-shrink: 0;
}
.sidebar-hashtags__item .icon svg { width: 18px; height: 18px; fill: currentColor; }
.sidebar-hashtags__item .text {
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.right-sidebar__footer { padding: 12px 16px; border-top: 1px solid var(--border); }

.user-infobox {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
}
.user-infobox__header { position: relative; height: 96px; }
.user-infobox__header .cover { position: absolute; inset: 0; overflow: hidden; background: var(--bg-3); }
.user-infobox__header .cover img { width: 100%; height: 100%; object-fit: cover; }
.user-infobox__header .avatar {
  position: absolute;
  bottom: -28px;
  left: 16px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-2);
  background: var(--bg-3);
}
.user-infobox__header .avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-infobox__body { padding: 36px 16px 12px; }
.user-data { display: flex; flex-direction: column; gap: 8px; }
.user-data__name a { display: flex; flex-direction: column; gap: 2px; color: var(--text); text-decoration: none; }
.user-data__name a:hover { text-decoration: none; }
.user-data__name a > span:last-child { font-size: 13px; color: var(--text-2); }
.user-data__counter { display: flex; gap: 16px; flex-wrap: wrap; }
.counter-item { display: inline-flex; gap: 4px; font-size: 13px; }
.counter-item a { display: inline-flex; gap: 4px; text-decoration: none; }
.counter-item a:hover { text-decoration: underline; }
.counter-item span:first-child { font-weight: 700; color: var(--text); }
.counter-item span:last-child { color: var(--text-2); }
.user-data__bio { font-size: 14px; color: var(--text); line-height: 1.5; word-break: break-word; }
.user-infobox__footer { padding: 12px 16px 16px; border-top: 1px solid var(--border); }

.cookie-alert {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}
.cookie-alert__inner { max-width: var(--max-w); margin: 0 auto; }
.cookie-message { display: flex; flex-direction: column; gap: 16px; }
.cookie-message .lp h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.cookie-message .lp p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.cookie-message .lp p a { color: var(--accent); text-decoration: underline; }
.cookie-message .rp { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-message .rp .btn-custom { flex: 1; min-width: 140px; }

.display-settings { display: flex; flex-direction: column; gap: 20px; }
.display-settings__header h4 { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.display-settings__header p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
.display-settings__body { display: flex; flex-direction: column; gap: 20px; }
.display-settings__group { display: flex; flex-direction: column; gap: 12px; }
.display-settings__group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.display-settings__options-list .row { margin: 0 -6px; }
.display-settings__options-list .row > [class*="col-"] { padding: 0 6px; margin-bottom: 12px; }

.options-li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color var(--ease);
  text-align: center;
}
.options-li:hover { border-color: var(--accent); background: var(--surface-hover); }
.options-li .active-color {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}
.options-li .active-color svg { width: 16px; height: 16px; }
.options-li .icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.options-li .emoji-icon { display: inline-flex; }
.options-li .emoji-icon svg { width: 36px; height: 36px; fill: currentColor; }
.options-li .name b { font-size: 12px; font-weight: 600; color: var(--text); }

.subscription-form { display: flex; flex-direction: column; }
.subscription-form__header { padding: 24px 16px 8px; display: flex; justify-content: center; }
.subscription-form__header .lp { display: flex; align-items: center; justify-content: center; }
.subscription-form__header .lp__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-2);
  background: var(--bg-3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscription-form__header .lp__avatar + .lp__avatar { margin-left: -20px; }
.subscription-form__header .lp__avatar img { width: 100%; height: 100%; object-fit: cover; }
.subscription-form__body { padding: 8px 20px 16px; text-align: center; }
.subscription-form__body h3 { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--text); }
.subscription-form__body p { margin: 0 0 16px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.subscription-price {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
}
.subscription-price__header {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.subscription-price__body { font-size: 20px; font-weight: 700; color: var(--text); }
.subscription-form__footer { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.subscription-form__footer .btn-group { width: 100%; }
.subscription-form__footer .btn-group .btn-custom { flex: 1; }
.subscription-form__footer > span { font-size: 12px; color: var(--text-2); text-align: center; }

.report-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; margin-bottom: 14px; }
.comment-input-holder { margin-top: 4px; }
.comment-input-holder textarea.form-control { min-height: 100px; resize: vertical; }

[data-app="announcement"] { display: block; width: 100%; }
.announcement-danger {
  margin: 12px 16px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--danger);
  background: rgba(220, 53, 69, 0.1);
  border: 1px solid rgba(220, 53, 69, 0.3);
  border-radius: var(--radius);
  text-align: center;
}

.share-post-modal .social-media-links {
display: grid;
  grid-template-columns: repeat(3, 1);
  gap: 8px;
  margin-bottom: 24px;
  padding: 0 4px;
}

.share-post-modal .social-media-links .link-item {
display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  padding: 12px 4px;
  background: var(--bg-3);
  border-radius: var(--radius);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  transition: background-color var(--ease);
  touch-action: manipulation;
  overflow: hidden;
}

.share-post-modal .social-media-links .link-item:hover {
background: var(--bg-4);
  text-decoration: none;
}

.share-post-modal .social-media-links .link-item svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.share-post-modal .social-media-links .link-item.twitter { color: #1DA1F2; }
.share-post-modal .social-media-links .link-item.facebook { color: #1877F2; }
.share-post-modal .social-media-links .link-item.linkedin { color: #0A66C2; }
.share-post-modal .social-media-links .link-item.pinterest { color: #E60023; }
.share-post-modal .social-media-links .link-item.reddit { color: #FF4500; }
.share-post-modal .social-media-links .link-item.whatsapp { color: #25D366; }
.share-post-modal .social-media-links .link-item.telegram { color: #0088cc; }
.share-post-modal .social-media-links .link-item.vkontakte { color: #4C75A3; }

.share-post-modal .raw-link { border-top: 1px solid var(--border); padding-top: 16px; }
.share-post-modal .raw-link p { font-size: 14px; color: var(--text-2); margin: 0 0 8px; font-weight: 500; }
.share-post-modal .link-input {
  display: flex;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 4px 4px 14px;
  overflow: hidden;
}
.share-post-modal .link-input input {
  flex: 1;
  background: transparent !important;
  border: none;
  color: var(--text) !important;
  font-size: 14px;
  outline: none;
  padding: 8px 0;
  min-width: 0;
}
.share-post-modal .clip-board-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.share-post-modal .clip-board-copy:hover { background: var(--accent-hover); }
.share-post-modal .clip-board-copy svg { width: 20px; height: 20px; fill: #fff; }
.share-post-modal .dismiss-modal svg { width: 20px; height: 20px; }
.share-post-modal .modal-body { padding: 20px 16px !important; }

@keyframes spin { to { transform: rotate(360deg); } }
.spinner-icon { display: inline-block; animation: spin 1s linear infinite; }

[data-app="black-hole"] { position: static; }
.cl-google-ads { display: flex; justify-content: center; overflow: hidden; }

.timeline-container {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--bottom-h));
  background: var(--bg-2);
}

.timeline-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  padding-top: env(safe-area-inset-top, 0px);
}

.timeline-header__botline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 12px;
  gap: 12px;
}

.timeline-header .lp,
.timeline-header .rp {
  display: flex;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.timeline-header .rp { justify-content: flex-end; }
.timeline-header .cp { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.timeline-header .cp img {
  height: 28px;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  display: block;
}
.timeline-header .lp.lp__avatar { gap: 12px; }

.nav-link-holder { display: inline-flex; align-items: center; min-width: 0; }
.nav-link-holder a {
  display: inline-block;
  color: var(--text);
  font-size: 20px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.nav-link-holder a:hover { text-decoration: none; }

.nav-link-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: var(--bg-3);
}
.nav-link-avatar a { display: block; width: 100%; height: 100%; }
.nav-link-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-link-avatar a.online::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border: 2px solid var(--bg-2);
  border-radius: 50%;
}

.user-name-holder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.user-name-holder__badge { flex-shrink: 0; }
.user-name-holder__badge svg { width: 14px; height: 14px; fill: var(--accent); }

.go-options {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.go-options:hover { background: var(--bg-3); }
.go-options__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: inherit;
}
.go-options__icon::after { display: none; }

.timeline-searchbar { padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.timeline-searchbar__form { width: 100%; }

.keyword-input { position: relative; width: 100%; display: flex; align-items: center; }
.keyword-input input {
  width: 100%;
  min-height: 46px;
  padding: 12px 44px;
  background: var(--bg-3);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  color: var(--text);
  font-size: 16px;
  outline: none;
  transition: border-color var(--ease);
}
.keyword-input input:focus { border-color: var(--accent); background: var(--bg-2); }
.keyword-input input::placeholder { color: var(--text-3); }

.keyword-input__left-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.keyword-input__left-icon svg { width: 18px; height: 18px; fill: currentColor; }
.keyword-input__right-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-2);
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 8px;
  margin-right: -8px;
  touch-action: manipulation;
}
.keyword-input__right-icon svg { width: 18px; height: 18px; fill: currentColor; }
.keyword-input__right-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  display: flex;
  align-items: center;
  pointer-events: none;
}
.keyword-input__right-spinner svg { width: 18px; height: 18px; }

.timeline-users-container { display: flex; flex-direction: column; background: var(--bg-2); }
.timeline-user-ls { display: flex; flex-direction: column; }
.timeline-hashtags-container { display: flex; flex-direction: column; background: var(--bg-2); }
.timeline-hashtags-ls { display: flex; flex-direction: column; }
.timeline-posts-container { padding-bottom: 24px; background: var(--bg-2); }
.timeline-posts-ls { display: flex; flex-direction: column; background: var(--bg-2); }
.timeline-posts-ls + .timeline-posts-ls { margin-top: 0; }

.post-list-item {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-list-item__alert {
  margin: -4px 0 4px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.post-list-item__header {
  font-size: 13px;
  color: var(--text-2);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  padding-left: 42px;
}

.publication-repost a { color: var(--text-2); text-decoration: none; }
.publication-repost a:hover { text-decoration: underline; }
.publication-repost { display: inline-flex; align-items: center; gap: 6px; }
.publication-repost__icon svg { width: 16px; height: 16px; fill: currentColor; }

.post-data { display: flex; gap: 12px; align-items: flex-start; width: 100%; }
.post-data__avatar { flex-shrink: 0; width: 42px; }

.avatar-holder {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  position: relative;
}
.avatar-holder img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-holder-online::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  background: var(--success);
  border: 2px solid var(--bg-2);
  border-radius: 50%;
}

.post-data__content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.post-data__content-hidden { margin-bottom: 12px; }

.soft-hidden-post {
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.soft-hidden-post .btn { flex-shrink: 0; margin-left: 12px; }

.post-data-layout { display: flex; flex-direction: column; width: 100%; gap: 6px; }

.post-data-layout__publisher {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

div.post-data-layout__publisher {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  width: 100%;
}

div.post-avatar {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
}

div.avatar-holder {
  display: block !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  background: var(--bg-3);
}

div.avatar-holder img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

div.post-username {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.post-username a {
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.post-username a:hover { text-decoration: underline; }

.post-time { color: var(--text-2); font-size: 13px; }

.post-data-layout__content {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.publication-text { margin-bottom: 8px; word-break: break-word; }
.publication-text a { color: var(--accent); text-decoration: none; }
.publication-title { font-size: 17px; font-weight: 700; margin-bottom: 6px; word-break: break-word; }

.lozad-media,
.publication-image,
.publication-video,
.publication-audio,
.publication-og__inner,
.collage-grid {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  margin-top: 8px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg-3) !important;
  box-sizing: border-box !important;
}

.lozad-media img,
.publication-image img,
.collage-grid__item img {
  width: 100% !important;
  max-height: 500px !important;
  object-fit: cover !important;
  display: block !important;
}

.publication-video video,
.publication-video .plyr,
.cl-plyr-video {
  width: 100% !important;
  max-height: 500px !important;
  aspect-ratio: 16 / 9 !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 !important;
  border: 0 !important;
}

.publication-audio audio,
.cl-plyr-audio {
  width: 100% !important;
  display: block !important;
  margin: 0 !important;
  border-radius: 16px !important;
}

.collage-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 2px !important;
}
.collage-grid.mb-2 { margin-bottom: 2px !important; }
.collage-grid.mt-2 { margin-top: 2px !important; }
.collage-grid__item {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  overflow: hidden !important;
  background: var(--bg-3) !important;
}
.image-collage-item { display: block; width: 100%; height: 100%; }
.collage-grid__item:only-child { grid-column: span 2; }
.collage-grid__item:only-child img { aspect-ratio: 16 / 9; }
.collage-grid.has-three-items > :first-child { grid-column: span 2; aspect-ratio: 2 / 1; }

.publication-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  position: relative;
}
.publication-image img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.lozad-media:not(.collage-grid) .lozad-media { width: 100%; border-radius: 16px; overflow: hidden; }
.fbox-media { display: block; width: 100%; height: 100%; }
.publication-audio { margin-top: 10px; }

.publication-poll {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-2);
}
.publication-poll__inner { display: flex; flex-direction: column; padding: 12px; gap: 8px; }
.publication-poll__option {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--bg-3);
  cursor: pointer;
  overflow: hidden;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  touch-action: manipulation;
}
.publication-poll__option:hover { background: var(--bg-4); }
.publication-poll__option.active { border-color: var(--accent); }

.bar-slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent-soft);
  z-index: 0;
  transition: width 0.2s ease;
}
.bar-icon,
.bar-text,
.bar-num { position: relative; z-index: 1; display: flex; align-items: center; }
.bar-icon { width: 20px; margin-right: 8px; color: var(--accent); flex-shrink: 0; }
.publication-poll__option:not(.active) .bar-icon { opacity: 0.5; }
.bar-text { flex: 1; font-size: 14px; color: var(--text); word-break: break-word; }
.bar-num { font-weight: 700; font-size: 13px; color: var(--accent); flex-shrink: 0; }
.publication-poll__total-votes { text-align: center; font-size: 12px; color: var(--text-2); margin-top: 4px; }

.publication-document { margin-top: 10px; }
.document-file {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  gap: 12px;
  min-height: 48px;
}
.document-file__icon { color: var(--accent); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.document-file__icon svg { width: 24px; height: 24px; }
.document-file__body {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.document-file__type { font-size: 11px; color: var(--text-2); font-weight: 600; flex-shrink: 0; }

.publication-og { margin-top: 10px; }
.publication-og__inner {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-2);
}
.publication-og__image img { width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.publication-og__description { padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.publication-og__description h5 { margin: 0; font-size: 14px; font-weight: 700; word-break: break-word; }
.publication-og__description p {
  margin: 0;
  font-size: 13px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.publication-og__description a { font-size: 12px; color: var(--accent); text-decoration: none; }
.publication-og__image { position: relative; }
.publication-og .video-play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: auto;
}
.publication-og .video-play-button__arrow svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }

.publication-paid {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-2);
  padding: 24px;
  text-align: center;
}
.publication-paid__header { display: flex; justify-content: center; margin-bottom: 12px; }
.pubowner-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px solid var(--bg-2);
  overflow: hidden;
  background: var(--bg-3);
}
.pubowner-avatar:nth-child(2) { margin-left: -16px; }
.pubowner-avatar img { width: 100%; height: 100%; object-fit: cover; }
.publication-paid__body h5 { margin: 0 0 4px; font-size: 16px; }
.publication-paid__body p { margin: 0 0 16px; font-size: 13px; color: var(--text-2); }

.publication-funding {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  background: var(--bg-2);
}
.publication-funding__header { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.funding-progress { height: 8px; background: var(--bg-4); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.funding-progress__bar { height: 100%; background: var(--success); border-radius: 4px; }
.funding-total { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-2); margin-bottom: 16px; }

.post-data-layout__date {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-2);
}
.publication-date span { color: var(--text-3); font-style: italic; margin-left: 4px; }
.post-reply a { color: var(--accent); text-decoration: none; font-weight: 600; }

.post-data-layout__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 4px;
  color: var(--text-2);
  gap: 4px;
}

.ctrls-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  min-height: 40px;
  min-width: 40px;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color var(--ease), background-color var(--ease);
  touch-action: manipulation;
}
.ctrls-item:hover { color: var(--accent); background: var(--accent-soft); }
.ctrls-item.liked { color: #f91880; }
.ctrls-item.liked:hover { background: rgba(249, 24, 128, 0.1); }
.ctrls-item.reposted { color: #00ba7c; }
.ctrls-item.reposted:hover { background: rgba(0, 186, 124, 0.1); }
.ctrls-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}
.ctrls-item__icon svg { width: 100%; height: 100%; fill: currentColor; }
.ctrls-item__inner-link { display: flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.ctrls-item__inner-link:hover { text-decoration: none; }
.ctrls-item.dropleft { position: relative; }
.ctrls-item .dropdown-toggle.ctrls-item__icon::after { display: none; }

.hashtag-list-item {
  display: block;
  border-bottom: 1px solid var(--border);
  transition: background-color var(--ease);
}
.hashtag-list-item:hover { background: var(--surface-hover); }
.hashtag-list-item .block-link {
  display: block;
  padding: 16px;
  min-height: 60px;
  text-decoration: none;
  color: var(--text);
}
.hashtag-data { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.hashtag-data__body { flex: 1; min-width: 0; }
.hashtag-data__body span:first-child {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hashtag-data__body span:last-child { display: block; font-size: 13px; color: var(--text-2); }
.hashtag-data__right-icon { color: var(--text-2); display: flex; align-items: center; flex-shrink: 0; }
.hashtag-data__right-icon svg { width: 20px; height: 20px; fill: currentColor; }

.user-data__body { display: flex; flex-direction: column; width: 100%; }
.flex-item-right { flex-shrink: 0; display: flex; align-items: center; }
.seach-query { color: var(--accent); font-weight: 700; }
.inline-icon { display: inline-flex; align-items: center; vertical-align: middle; }
.felx-item { flex: 1; }

.post-placeholder { padding: 20px 16px; }
.post-placeholder .d-flex { display: flex; align-items: center; gap: 12px; }
.post-placeholder .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text-2);
  flex-shrink: 0;
}
.post-placeholder .icon svg { width: 20px; height: 20px; fill: currentColor; }

.homepage { display: flex; flex-direction: column; }
.homepage__pubbox { padding: 12px 16px; border-bottom: 8px solid var(--bg-3); background: var(--bg-2); }
.homepage__swifts { border-bottom: 8px solid var(--bg-3); background: var(--bg-2); }

.swifts-slider { position: relative; padding: 12px 0 8px; }
.swifts-slider__footer { padding: 4px 12px 0; }
.swiper {
  position: relative;
  width: 100%;
  overflow: hidden;
  list-style: none;
  z-index: 1;
  touch-action: pan-y;
}
.swiper-wrapper {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.swiper-slide {
  flex-shrink: 0;
  position: relative;
  width: auto;
}
.swiper-scrollbar {
  position: relative;
  height: 3px;
  width: 100%;
  background: var(--border);
  border-radius: var(--radius-full);
  overflow: hidden;
  touch-action: none;
}
.swiper-scrollbar-drag {
  position: relative;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--accent);
  border-radius: var(--radius-full);
  cursor: grab;
}

.swift-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.swift-item__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  padding: 2.5px;
  border-radius: 50%;
  background: transparent;
}
.swift-item.active .swift-item__body { background: var(--accent); }
.swift-item__body.create-swift { padding: 0; background: transparent; border: 2px dashed var(--border-2); }
.swift-item__avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  border: 2px solid var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.swift-item__body.create-swift .swift-item__avatar { border: 0; background: var(--bg-2); }
.swift-item__avatar img { width: 100%; height: 100%; object-fit: cover; }
.add-ikon {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--accent);
  color: #ffffff;
  border-radius: 50%;
  border: 2px solid var(--bg-2);
  z-index: 2;
}
.add-ikon svg { width: 12px; height: 12px; }
.swift-item__footer {
  max-width: 68px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-2);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.timeline-pubbox-container { padding: 0; width: 100%; }
.timeline-pubbox { display: flex; flex-direction: column; width: 100%; gap: 12px; }
.timeline-pubbox__header { display: flex; gap: 12px; }
.timeline-pubbox__textinput { display: flex; gap: 12px; width: 100%; align-items: flex-start; }
.pubbox-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-3);
}
.pubbox-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pubbox-input { flex: 1; min-width: 0; }
.pubbox-input textarea {
  width: 100%;
  min-height: 48px;
  max-height: 300px;
  padding: 10px 0;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  outline: none;
  overflow-y: hidden;
}
.pubbox-input textarea::placeholder { color: var(--text-2); }

.timeline-pubbox__footer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-left: 54px;
}
.timeline-pubbox__footer-topline {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  width: 100%;
  gap: 0;
}
.timeline-pubbox__footer-topline > .ctrl-item:not(.text-length) {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: none;
}
.timeline-pubbox__footer-topline > .text-length { flex: 0; margin-left: auto; }
.timeline-pubbox__footer-botline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ctrl-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  color: var(--accent);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--ease), opacity var(--ease);
  touch-action: manipulation;
}
.ctrl-item:hover { background: var(--accent-soft); }
.ctrl-item:disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.ctrl-item svg { width: 20px; height: 20px; display: block; fill: currentColor; }
.ctrl-item.text-length {
  width: auto;
  padding: 0 8px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
}
.ctrl-item.text-length small { font-size: 13px; color: inherit; }
.ctrl-item.text-length .len-error { color: var(--danger) !important; font-weight: 700; }

.post-privacy { display: flex; align-items: center; }
.privacy-settings {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: var(--radius-full);
  transition: background-color var(--ease);
}
.privacy-settings:hover { background: var(--accent-soft); }
.privacy-settings .dropdown-toggle { display: inline-flex; align-items: center; gap: 6px; }
.privacy-settings .dropdown-toggle::after { display: none; }
.privacy-settings .icon svg { width: 16px; height: 16px; }

.post-publication .btn-custom {
  border-radius: var(--radius);
  padding: 8px 20px;
  font-size: 14px;
  min-height: 38px;
}

.pubbox-emoticons {
  display: flex;
  flex-direction: column;
  max-height: 260px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-2);
  margin-top: 10px;
}
.pubbox-emoticons__type-nav {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  scrollbar-width: none;
}
.pubbox-emoticons__type-nav::-webkit-scrollbar { display: none; }
.pubbox-emoticons__type-nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.pubbox-emoticons__type-nav-item.active { border-bottom-color: var(--accent); background: var(--accent-soft); }
.emoji_group_icon svg { width: 24px; height: 24px; }
.pubbox-emoticons__list { flex: 1; overflow-y: auto; padding: 8px; }
.pubbox-emoticons__list-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr));
  gap: 2px;
}
.pubbox-emoticons__list-group > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 22px;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.pubbox-emoticons__list-group > span:hover { background: var(--bg-3); }

.pubbox-images__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.pubbox-images__list-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1/1;
  border: 1px solid var(--border);
}
.pubbox-images__list-item img { width: 100%; height: 100%; object-fit: cover; }
.delete-preview {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.delete-preview svg { width: 14px; height: 14px; }

.pubbox-video__player { margin-top: 12px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.pubbox-audio,
.pubbox-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-3);
  border-radius: var(--radius);
  padding: 12px;
  margin-top: 12px;
}
.pubbox-document__body { display: flex; align-items: center; gap: 10px; }
.pubbox-document__icon svg { width: 24px; height: 24px; color: var(--accent); }
.pubbox-audio { padding: 8px 12px; }
.pubbox-audio audio { width: 100%; height: 36px; }

.pubbox-open-graph__data {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-top: 12px;
  background: var(--bg-2);
}
.pubbox-open-graph__image img { width: 100%; max-height: 200px; object-fit: cover; }
.pubbox-open-graph__description { padding: 12px; }
.pubbox-open-graph__description h5 { margin: 0 0 4px; font-size: 14px; word-break: break-word; }
.pubbox-open-graph__description p { margin: 0 0 4px; font-size: 12px; color: var(--text-2); word-break: break-word; }
.pubbox-open-graph__description a { font-size: 12px; color: var(--accent); }

.pubbox-poll {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
  background: var(--bg-2);
}
.pubbox-poll__header h4 { margin: 0 0 12px; font-size: 15px; }
.pubbox-poll__input-item { position: relative; margin-bottom: 8px; }
.pubbox-poll__input-item input {
  width: 100%;
  padding: 12px 50px 12px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  color: var(--text);
  font-size: 16px;
  outline: none;
}
.pubbox-poll__input-item small {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-2);
  pointer-events: none;
}
.delete-poll-option {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--danger);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.delete-poll-option:hover { background: rgba(220, 53, 69, 0.1); }
.pubbox-poll__footer { display: flex; justify-content: space-between; margin-top: 12px; align-items: center; }

.pubbox-donate {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pubbox-donate input {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--text);
  font-size: 16px;
  outline: none;
}

.post-list-advert {
  padding: 16px;
  border-bottom: 8px solid var(--bg-3);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.post-list-advert__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-2);
}
.post-list-advert__sponsor { display: flex; align-items: center; gap: 6px; }
.post-list-advert__sponsor-icon svg { width: 16px; height: 16px; }
.post-list-advert__body { display: flex; flex-direction: column; gap: 8px; }
.post-list-advert__text h4 { margin: 0 0 4px; font-size: 16px; }
.post-list-advert__text p { margin: 0; font-size: 14px; color: var(--text); }
.post-list-advert__image img { width: 100%; border-radius: var(--radius); object-fit: cover; max-height: 300px; }
.post-list-advert__footer {
  display: flex;
  gap: 16px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.timeline-edbox,
.timeline-donate { display: flex; flex-direction: column; gap: 16px; }

.swift-pubbox { display: flex; flex-direction: column; gap: 12px; }
.swift-pubbox__input { width: 100%; }
.swift-pubbox__input textarea {
  width: 100%;
  min-height: 80px;
  max-height: 200px;
  padding: 12px;
  border: 1px solid var(--border);
  background: var(--bg-3);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  outline: none;
  overflow-y: hidden;
}
.swift-pubbox__input textarea:focus { border-color: var(--accent); background: var(--bg-2); }
.swift-pubbox__input textarea::placeholder { color: var(--text-3); }
.swift-pubbox__emoticons { width: 100%; }
.swift-pubbox__image { display: flex; flex-direction: column; width: 100%; }
.swift-pubbox__video { display: flex; flex-direction: column; width: 100%; }

.pubbox-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-3);
  max-height: 400px;
}
.pubbox-image img { width: 100%; height: auto; max-height: 400px; object-fit: contain; display: block; }

.pubbox-video {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: #000;
}
.cl-plyr-video { width: 100%; }
.cl-plyr-video .plyr {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 400px;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.cl-plyr-video .plyr video { width: 100%; height: 100%; object-fit: contain; display: block; }

.swift-pubbox__ctrls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  width: 100%;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.swift-pubbox__ctrls .ctrl-item { flex: 0 0 auto; }
.swift-pubbox__ctrls .ctrl-item.text-length { margin-left: auto; }
.swift-pubbox__publisher { width: 100%; }
.swift-pubbox__publisher .btn-custom {
  border-radius: var(--radius);
  padding: 10px 20px;
  font-size: 14px;
  min-height: 44px;
}

.plyr {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 60vh;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  margin-top: 10px;
  cursor: pointer;
}
.plyr__video-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.plyr video { width: 100%; height: 100%; object-fit: contain; display: block; }
.plyr__sr-only,
.plyr__controls { display: none !important; }
.plyr__control--overlaid {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  border: 2px solid rgba(255, 255, 255, 0.9);
  pointer-events: auto;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.plyr__control--overlaid:hover { background: rgba(0, 0, 0, 0.8); }
.plyr__control--overlaid svg { width: 24px; height: 24px; fill: #fff; margin-left: 4px; }
.plyr__control--overlaid span { display: none !important; }
.plyr.playing .plyr__control--overlaid { opacity: 0; pointer-events: none; }
.plyr:not(.playing) .plyr__control--overlaid { opacity: 1; }

.plyr--audio {
  aspect-ratio: auto !important;
  max-height: none !important;
  height: 56px !important;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  margin-top: 10px;
  cursor: default;
  overflow: hidden;
}
.plyr--audio .plyr__control--overlaid { display: none !important; }
.plyr--audio .plyr__controls {
  display: flex !important;
  position: relative !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 100% !important;
  width: 100% !important;
  padding: 0 16px !important;
  background: transparent !important;
  gap: 12px !important;
  z-index: 10;
}
.plyr--audio .plyr__control {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  background: var(--accent) !important;
  border-radius: 50% !important;
  color: #fff !important;
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}
.plyr--audio .plyr__control:hover { background: var(--accent-hover) !important; }
.plyr--audio .plyr__control svg {
  width: 18px !important;
  height: 18px !important;
  fill: #fff !important;
  display: block !important;
  margin: 0 !important;
}
.plyr--audio .plyr__progress {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  min-width: 0;
  position: relative;
  height: 24px;
}
.plyr--audio .plyr__progress__buffer,
.plyr--audio .plyr__progress__value { display: none !important; }
.plyr--audio .plyr__progress input[type="range"] {
  -webkit-appearance: none !important;
  width: 100% !important;
  height: 4px !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 2px !important;
  outline: none !important;
  margin: 0 !important;
  cursor: pointer;
}
.plyr--audio .plyr__progress input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent) !important;
  cursor: pointer;
}
.plyr--audio .plyr__time {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 12px !important;
  color: var(--text-2) !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.plyr--audio .plyr__time:last-of-type { display: none !important; }
.plyr--audio .plyr__volume,
.plyr--audio .plyr__menu,
.plyr--audio .plyr__control[data-plyr="restart"],
.plyr--audio .plyr__control[data-plyr="rewind"],
.plyr--audio .plyr__control[data-plyr="fast-forward"] { display: none !important; }

.swift-player {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: none;
  align-items: center;
  justify-content: center;
  background: #000;
  color: #fff;
}
.swift-player.show { display: flex; }
.swift-player__body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
}
.swift-data {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.swift-data__header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 32px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65), transparent);
  pointer-events: none;
}
.swift-data__header > * { pointer-events: auto; }
.swift-data__header-topline { display: flex; gap: 3px; margin-bottom: 10px; }
.swift-timebar {
  flex: 1;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-full);
  overflow: hidden;
  cursor: pointer;
}
.swift-timebar > span {
  display: block;
  height: 100%;
  background: #fff;
  border-radius: var(--radius-full);
}
.swift-data__header-botline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.swift-publisher { display: flex; align-items: center; gap: 10px; flex: 1; }
.swift-publisher__avatar { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.swift-publisher__avatar img { width: 100%; height: 100%; object-fit: cover; }
.swift-publisher__username a { display: flex; flex-direction: column; color: #fff; text-decoration: none; }
.swift-publisher__username a > span:first-child { font-size: 14px; font-weight: 700; }
.swift-publisher__username a > span:last-child { font-size: 11px; opacity: 0.75; }
.swift-controls { display: flex; gap: 4px; }
.swift-controls__item {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.swift-controls__item:hover { background: rgba(255, 255, 255, 0.15); }
.swift-controls__item svg { width: 20px; height: 20px; }
.swift-data__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  overflow: hidden;
}
.swift-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.swift-media__image img,
.swift-media__video video { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.swift-data__footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 3;
  padding: 48px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}
.swift-data__desc { font-size: 14px; line-height: 1.4; margin-bottom: 10px; word-break: break-word; }
.swift-data__views-total {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  cursor: pointer;
}
.swift-data__views-total .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}
.swift-data__views-total .icon svg { width: 14px; height: 14px; fill: currentColor; }
.swift-data__views-total .text { display: inline-flex; }
.swift-data__views {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  max-height: 60%;
  background: rgba(0, 0, 0, 0.94);
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
  overflow: hidden;
}
.swift-views { display: flex; flex-direction: column; max-height: inherit; }
.swift-views__header {
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.swift-views__header .flex-item-right { cursor: pointer; }
.swift-views__list { flex: 1; overflow-y: auto; padding: 4px 0; }
.swift-views__list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #fff;
  text-decoration: none;
}
.swift-views__list-item .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.swift-views__list-item .avatar img { width: 100%; height: 100%; object-fit: cover; }
.swift-views__list-item .userdata { display: flex; flex-direction: column; min-width: 0; }
.swift-views__list-item .username__name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.swift-views__list-item .username__time { font-size: 12px; color: rgba(255, 255, 255, 0.7); margin-top: 2px; }
.swift-player__nav-ctrl {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.swift-player__nav-ctrl:hover { background: rgba(0, 0, 0, 0.7); }
.swift-player__nav-ctrl.prev { left: 10px; }
.swift-player__nav-ctrl.next { right: 10px; }
.swift-player__close {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 10;
  width: 44px;
  height: 44px;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.swift-player__close:hover { background: rgba(0, 0, 0, 0.8); }
.swift-player__close svg { width: 22px; height: 22px; }

.timeline-alert-container { display: block; width: 100%; }
.timeline-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(0, 123, 255, 0.3);
  border-radius: 12px;
  width: 100%;
  box-sizing: border-box;
}
.timeline-alert_info { background: var(--accent-soft); border-color: rgba(0, 123, 255, 0.3); }
.timeline-alert_align-center { align-items: center; }
.timeline-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.timeline-alert__icon svg { width: 20px; height: 20px; fill: currentColor; }
.timeline-alert__text {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}
.timeline-alert__text a { color: var(--accent); font-weight: 700; text-decoration: none; }
.timeline-alert__text a:hover { text-decoration: underline; }

.stat-page-content {
  padding: 24px 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  word-break: break-word;
}
.stat-page-content h4 {
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.stat-page-content h4:first-child { margin-top: 0; }
.stat-page-content p { margin-bottom: 16px; }
.stat-page-content ul { padding-left: 20px; margin-bottom: 16px; }
.stat-page-content li { margin-bottom: 8px; }
.stat-page-content strong { color: var(--text); font-weight: 600; }
.stat-page-content a { color: var(--accent); text-decoration: none; }
.stat-page-content a:hover { text-decoration: underline; }

.user-data-container {
  display: block;
  width: 100%;
  padding: 24px 16px;
  margin: 0 auto;
  max-width: var(--max-w);
}
.user-data-section {
  width: 100%;
  display: block;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  background: var(--bg-2);
  border: 1px solid var(--border);
  overflow: hidden;
}
.user-data-header {
  width: 100%;
  display: block;
  padding: 16px;
  background: var(--bg-3);
  border-bottom: 1px solid var(--border);
}
.user-data-header h3 {
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  padding: 0;
  margin: 0;
  font-weight: 700;
}
.user-data-body { display: block; width: 100%; padding: 20px; }
.user-cover { width: 100%; display: block; position: relative; margin-bottom: 48px; }
.user-cover > img { width: 100%; height: 150px; object-fit: cover; border-radius: var(--radius); }
.user-cover .user-avatar {
  position: absolute;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  bottom: -30px;
  left: 20px;
  overflow: hidden;
  border: 4px solid var(--bg-2);
  background: var(--bg-2);
}
.user-cover .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.user-name { width: 100%; display: block; margin-bottom: 20px; text-align: center; }
.user-name h3 {
  color: var(--text);
  font-size: 22px;
  line-height: 1.3;
  padding: 0;
  margin: 0 0 8px 0;
  font-weight: 700;
}
.user-name p { color: var(--text-2); font-size: 14px; line-height: 1.5; padding: 0; margin: 0; }
.user-info { width: 100%; display: block; overflow-x: auto; }
.user-info table { width: 100%; border-collapse: collapse; }
.user-info td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  vertical-align: middle;
}
.user-info tr:last-child td { border-bottom: none; }
.info-label {
  display: block;
  width: 100%;
  text-align: right;
  font-size: 14px;
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
}
.info-value {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
}
.badge-primary { background: var(--accent-soft); color: var(--accent); }
.badge-success { background: rgba(40, 167, 69, 0.15); color: var(--success); }
.badge-dark { background: var(--bg-3); color: var(--text-2); }
.user-wallet-history { width: 100%; display: block; max-height: 400px; overflow-y: auto; }
.user-wallet-history .history-record {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.user-wallet-history .history-record:last-child { margin-bottom: 0; border-bottom: none; padding-bottom: 0; }
.user-wallet-history .history-record .lp .icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border-radius: 50%;
  color: var(--text-2);
}
.user-wallet-history .history-record .lp .icon svg { width: 18px; height: 18px; fill: currentColor; }
.user-wallet-history .history-record .mp { flex: 1; }
.user-wallet-history .history-record .mp .amount { font-size: 15px; font-weight: 700; }
.user-wallet-history .history-record .mp .trans-info p { font-size: 12px; color: var(--text-2); margin: 2px 0 0; }
.user-wallet-history .history-record .rp time { font-size: 12px; color: var(--text-3); }
.user-connections { width: 100%; display: block; max-height: 500px; overflow-y: auto; }
.user-connections .list-item {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
  margin-bottom: 12px;
  gap: 12px;
}
.user-connections .list-item:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.user-connections .list-item .avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--bg-3);
}
.user-connections .list-item .avatar img { width: 100%; height: 100%; object-fit: cover; }
.user-connections .list-item .user-info-holder { flex: 1; min-width: 0; }
.user-connections .list-item .user-data h4 {
  font-size: 14px;
  margin: 0;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-connections .list-item .user-data a {
  display: block;
  text-decoration: none;
  color: var(--text-2);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-connections .list-item .user-data p { font-size: 13px; line-height: 1.4; margin: 4px 0 0; color: var(--text-2); }

.posts-ls { width: 100%; display: flex; flex-direction: column; }
.posts-ls .post-list-item {
  width: 100%;
  display: block;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
}
.posts-ls .post-list-item:last-child { border-bottom: none; }
.posts-ls .post-list-item-header {
  width: 100%;
  display: flex;
  margin-bottom: 8px;
  padding-left: 42px;
}
.posts-ls .post-list-item-header .publication-repost { display: inline-flex; align-items: center; gap: 6px; }
.posts-ls .post-list-item-header .publication-repost svg { width: 14px; height: 14px; fill: var(--text-2); }
.posts-ls .post-list-item-header .publication-repost a {
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
  font-weight: 600;
}
.posts-ls .post-list-item-content {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 12px;
}
.posts-ls .post-list-item-content .publisher-avatar { width: 42px; flex-shrink: 0; }
.posts-ls .post-list-item-content .publisher-avatar .avatar-holder {
  display: block;
  overflow: hidden;
  width: 42px;
  height: 42px;
  background: var(--bg-3);
  border-radius: 50%;
}
.posts-ls .post-list-item-content .publisher-avatar .avatar-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.posts-ls .post-list-item-content .publication-data { flex: 1; min-width: 0; }
.posts-ls .post-list-item-content .publication-data-inner { width: 100%; }
.posts-ls .post-list-item-content .publication-target { margin-top: 4px; }
.posts-ls .post-list-item-content .publication-target .post-reply span { font-size: 13px; color: var(--text-2); }
.posts-ls .post-list-item-content .publication-target .post-reply span a { color: var(--accent); text-decoration: none; }
.posts-ls .post-list-item-content .publisher-info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.posts-ls .post-list-item-content .publisher-info .lp a {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.posts-ls .post-list-item-content .publisher-info .lp a b { font-size: 15px; color: var(--text); font-weight: 700; }
.posts-ls .post-list-item-content .publisher-info .lp a span { font-size: 13px; color: var(--text-2); }
.posts-ls .post-list-item-content .publisher-info .rp span.posted-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-3);
}
.posts-ls .post-list-item-content .publisher-info .rp span.posted-time svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}
.posts-ls .post-list-item-content .publication-content { width: 100%; margin-top: 8px; }
.posts-ls .post-list-item-content .publication-content .publication-text { width: 100%; margin-bottom: 8px; }
.posts-ls .post-list-item-content .publication-content .publication-text p {
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  color: var(--text);
  word-break: break-word;
}
.posts-ls .post-list-item-content .publication-content .publication-media { width: 100%; }
.posts-ls .post-list-item-content .publication-content .publication-image {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-3);
  position: relative;
  aspect-ratio: 16 / 9;
}
.posts-ls .post-list-item-content .publication-content .publication-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.posts-ls .post-list-item-content .publication-content .publication-images-slider .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -4px;
}
.posts-ls .post-list-item-content .publication-content .publication-images-slider .col-sm-4 {
  padding: 0 4px;
  width: 33.33%;
  margin-bottom: 8px;
}
.posts-ls .post-list-item-content .publication-content .publication-poll-data {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 12px;
  background: var(--bg-3);
}
.posts-ls .post-list-item-content .publication-content .poll-option-bar {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--bg-4);
  margin-bottom: 8px;
  overflow: hidden;
}
.posts-ls .post-list-item-content .publication-content .poll-option-bar:last-child { margin-bottom: 0; }
.posts-ls .post-list-item-content .publication-content .poll-option-bar .bar-icon svg {
  width: 16px;
  height: 16px;
  fill: var(--accent);
}
.posts-ls .post-list-item-content .publication-content .poll-option-bar .bar-text {
  flex: 1;
  font-size: 14px;
  margin-left: 8px;
  color: var(--text);
}
.posts-ls .post-list-item-content .publication-content .poll-option-bar .bar-num b {
  font-size: 13px;
  color: var(--accent);
  font-weight: 700;
}
.posts-ls .post-list-item-content .publication-content .poll-option-bar .bar-slider {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--accent-soft);
  z-index: 0;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-3);
  margin-top: 8px;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-image {
  width: 100px;
  min-width: 100px;
  background: var(--bg-4);
  border-right: 1px solid var(--border);
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-image .og-image-holder {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-image .og-icon-holder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-url-data {
  flex: 1;
  padding: 12px;
  min-width: 0;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-url-data h5 {
  margin: 0 0 4px;
  font-size: 14px;
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-url-data p {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--text-2);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.posts-ls .post-list-item-content .publication-content .publication-og-data-inner .og-url-data a {
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
}

.thread-chain,
.thread-data,
.thread-replys { background: var(--bg-2); }
.timeline-posts-ls-group {
  position: relative;
  border-left: 2px solid var(--border);
  margin-left: 32px;
  padding-left: 12px;
}
.timeline-posts-ls-group-inner { display: flex; flex-direction: column; }
.show-thread { display: block; padding: 12px 16px; background: var(--bg-2); border-top: 1px solid var(--border); }
.show-thread a { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); text-decoration: none; font-size: 14px; font-weight: 600; }
.show-thread .icon svg { width: 16px; height: 16px; fill: currentColor; }

.timeline-header__botline .nav-link-holder a {
  color: var(--text) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}
.timeline-header .cp img {
  height: 24px !important;
  width: auto !important;
  max-width: 100px !important;
  object-fit: contain !important;
}

.chats { display: flex; flex-direction: column; background: var(--bg-2); }
.chat-contacts { display: flex; flex-direction: column; width: 100%; }
.contacts-list__item {
  display: block;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  transition: background-color var(--ease);
}
.contacts-list__item:hover { background: var(--surface-hover); }
.contacts-list__item.hidden { display: none !important; }
.contacts-list__item .block-link { display: block; text-decoration: none; color: var(--text); }
.contact-data {
  display: flex;
  padding: 12px 16px;
  gap: 12px;
  align-items: center;
  min-height: 76px;
}
.contact-data__avatar { width: 50px; height: 50px; flex-shrink: 0; position: relative; }
.contact-data__avatar .user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
}
.contact-data__avatar .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-data__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.contact-data__body-topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.contact-data__body-midline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 8px;
}
.last-message {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.last-message.unseen-message { color: var(--text); font-weight: 600; }
.new-message { flex-shrink: 0; }
.new-message .badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
}

body.cl-app-conversation { overflow: hidden; }
.timeline-container[data-app="conversation"] {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  overflow: hidden;
  z-index: 5;
}
.timeline-container[data-app="conversation"] > .timeline-header { flex-shrink: 0; }
.timeline-container[data-app="conversation"] > #vue-conversation-app {
  flex: 1;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
}
.conversation { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--bg-2); overflow: hidden; }
.conversation__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.conversation-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}
.load-old-btn {
  align-self: center;
  margin-bottom: 16px;
  background: var(--bg-3);
  color: var(--accent);
  border: 1px solid var(--border);
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.load-old-btn:hover { background: var(--bg-4); }
.chat-bottom-spacer { height: 20px; flex-shrink: 0; }
.conversation-messages__item {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  margin-bottom: 4px;
  position: relative;
}
.conversation-messages__item.left { align-self: flex-start; }
.conversation-messages__item.right { align-self: flex-end; align-items: flex-end; }
.message-data { display: flex; align-items: center; gap: 8px; width: 100%; }
.right .message-data { flex-direction: row-reverse; }
.message-data__body {
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
  max-width: 100%;
  min-width: 0;
}
.left .message-data__body { background: var(--bg-3); color: var(--text); border-bottom-left-radius: 4px; }
.right .message-data__body { background: var(--accent); color: #ffffff; border-bottom-right-radius: 4px; }
.message-text { word-wrap: break-word; word-break: break-word; white-space: pre-wrap; }
.message-media img {
  max-width: 250px;
  max-height: 300px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  margin: -4px 0;
}
.message-media video {
  max-width: 250px;
  max-height: 300px;
  border-radius: 12px;
  background: #000;
  display: block;
  margin: -4px 0;
}
.message-media .cl-plyr-video { width: 250px; max-width: 100%; border-radius: 12px; overflow: hidden; }
.message-media .cl-plyr-video .plyr { border-radius: 12px; margin: 0; aspect-ratio: 16 / 9; max-height: 200px; }
.message-media .cl-plyr-video .plyr video { border-radius: 0; margin: 0; }
.message-audio { width: 100%; }
.message-audio .cl-plyr-audio { width: 100%; max-width: 260px; }
.message-audio .plyr--audio { margin-top: 0; }
.right .message-media img,
.right .message-media video,
.right .message-media .cl-plyr-video { border-bottom-right-radius: 4px; }
.left .message-media img,
.left .message-media video,
.left .message-media .cl-plyr-video { border-bottom-left-radius: 4px; }
.chat-gift-message { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; }
.gift-big { font-size: 48px; line-height: 1; }
.gift-text { font-size: 12px; font-weight: 600; opacity: 0.9; }
.message-data__ctrls { opacity: 0; transition: opacity var(--ease); display: flex; align-items: center; }
.conversation-messages__item:hover .message-data__ctrls { opacity: 1; }
.message-data__ctrls .dropdown {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}
.message-data__ctrls .dropdown-toggle {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  border-radius: 50%;
  color: var(--text-2);
  cursor: pointer;
  touch-action: manipulation;
}
.message-data__ctrls .dropdown-toggle::after { display: none; }
.message-data__ctrls .dropdown-toggle svg { width: 16px; height: 16px; }
.message-time { font-size: 11px; color: var(--text-3); margin-top: 4px; padding: 0 4px; }
.right .message-time { text-align: right; }
.conversation__footer {
  flex-shrink: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
}
.timeline-container[data-app="conversation"] .conversation__footer { position: static; }
.message-input { display: flex; align-items: flex-end; gap: 8px; width: 100%; }
.message-input-cont {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  background: var(--bg-3);
  border-radius: 24px;
  padding: 6px 12px;
  min-height: 44px;
}
.message-input__field { flex: 1; min-width: 0; display: flex; }
.message-input textarea {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 16px;
  line-height: 1.4;
  resize: none;
  outline: none;
  max-height: 100px;
  padding: 8px 0;
  margin: 0;
}
.message-input textarea::placeholder { color: var(--text-2); }
.message-input__ctrl {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--ease);
  flex-shrink: 0;
  touch-action: manipulation;
}
.message-input__ctrl:hover { background: var(--accent-soft); }
.message-input__ctrl svg { width: 22px; height: 22px; fill: currentColor; }
.message-input__ctrl[type="submit"] { background: var(--accent); color: #fff; }
.message-input__ctrl[type="submit"]:disabled {
  background: var(--bg-4);
  color: var(--text-3);
  cursor: not-allowed;
}
.message-input__ctrl.ml-auto { margin-left: 0; }
.message-audio-recstat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  padding: 0 12px;
  gap: 12px;
}
.wave-animation {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 24px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.wave-animation__item {
  width: 3px;
  background: var(--accent);
  border-radius: 2px;
  flex-shrink: 0;
}
.record-timer {
  font-size: 14px;
  font-weight: 700;
  color: var(--danger);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.ghost-form {
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
body.cl-app-conversation .chat-gift-btn {
  position: absolute;
  left: 16px;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.chat-gift-btn {
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  z-index: 90;
  touch-action: manipulation;
}
.chat-gift-btn:active { opacity: 0.8; }
.gift-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100vw - 32px);
  max-width: 400px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s;
}
.gift-panel.show { opacity: 1; visibility: visible; }
.gift-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}
.gift-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-3);
  color: var(--text-2);
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.gift-close:hover { background: var(--bg-4); color: var(--text); }
.gift-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px;
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.gift-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 8px;
  text-align: center;
}
.gift-icon { font-size: 32px; margin-bottom: 8px; }
.gift-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.gift-price { font-size: 11px; color: var(--accent); font-weight: 600; margin-bottom: 12px; }
.gift-send {
  width: 100%;
  min-height: 34px;
  padding: 6px 0;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.gift-send:hover { background: var(--accent-hover); }

.notifications { display: flex; flex-direction: column; background: var(--bg-2); min-height: 50vh; }
.notifications-list { display: flex; flex-direction: column; }
.notifications-list__item {
  display: flex;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-2);
  transition: background-color var(--ease);
  position: relative;
}
.notifications-list__item:hover { background: var(--surface-hover); }
.notif-data { display: flex; gap: 12px; width: 100%; align-items: flex-start; }
.notifications-list__item-avatar { width: 48px; height: 48px; flex-shrink: 0; }
.notifications-list__item-avatar .user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
}
.notifications-list__item-avatar .user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.notifications-list__item-data { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.notifications-data {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  gap: 12px;
}
.notifications-data__body { flex: 1; min-width: 0; word-break: break-word; }
.notifications-data__body a { text-decoration: none; color: var(--text); display: block; }
.notifications-data__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  line-height: 1.4;
  margin-bottom: 4px;
}
.user-name-holder__name { font-weight: 700; color: var(--text); }
.notif-text { color: var(--text-2); word-wrap: break-word; }
.notif-text.unseen { color: var(--text); font-weight: 500; }
.notifications-data__midline { margin-top: 4px; }
.notif-time { font-size: 13px; color: var(--text-3); }
.notifications-data__ctrls { display: flex; align-items: flex-start; justify-content: flex-end; flex-shrink: 0; }
.notif-ctrls { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.notif-ctrls__delete { display: flex; }
.btn-custom-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color var(--ease), color var(--ease);
  color: var(--text-3);
  touch-action: manipulation;
  margin-top: -8px;
  margin-right: -8px;
}
.btn-custom-icon:hover { background: rgba(220, 53, 69, 0.1); color: var(--danger); }
.btn-custom-icon svg { width: 18px; height: 18px; fill: currentColor; }
.notif-controls { margin-top: 8px; }

.account-wallet,
.wallet-add,
.wallet-send,
.wallet-withdrawal,
.pro-pay-wrapper {
  padding: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.account-wallet { display: flex; flex-direction: column; gap: 16px; }
.account-wallet__status,
.account-wallet__history { display: flex; flex-direction: column; gap: 16px; }
.wallet-withdrawal { display: flex; flex-direction: column; gap: 16px; }
.wallet-withdrawal__balance { display: flex; flex-direction: column; }
.wallet-withdrawal__form { display: flex; flex-direction: column; }
.account-wallet__card,
.wallet-add__form,
.pro-card,
.wallet-send__form {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.account-wallet__card-title,
.pro-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.walleticon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  flex-shrink: 0;
}
.walleticon svg,
.walleticon i { width: 22px; height: 22px; fill: currentColor; }
.wallet-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 12px;
}
.wallet-balance__amount { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wallet-balance__amount span:first-child {
  font-size: 36px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}
.wallet-balance__amount span:last-child { font-size: 13px; color: var(--text-2); }
.wallet-balance__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  flex-shrink: 0;
  opacity: 0.8;
}
.wallet-balance__icon svg { width: 40px; height: 40px; fill: currentColor; }
.wallet-footer__text { font-size: 13px; color: var(--text-2); line-height: 1.5; margin-bottom: 16px; }
.wallet-footer__ctrls { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.wallet-footer__ctrls-item { flex: 1 1 0; min-width: 110px; display: flex; text-decoration: none; }
.wallet-footer__ctrls-item:hover { text-decoration: none; }
.wallet-footer__ctrls-item .btn {
  flex: 1;
  width: 100%;
  min-height: 44px;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
}
.wallet-footer__ctrls .btn-custom.main-grey { border: 1px solid var(--border-2); background: transparent; color: var(--text); }
.account-wallet__history-topline { margin: 24px 0 16px; }
.account-wallet__history-topline h4 { font-size: 18px; font-weight: 700; color: var(--text); margin: 0; }
.wallet-transactions { display: flex; flex-direction: column; }
.wallet-transactions__item {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.wallet-transactions__item:last-child { border-bottom: none; }
.wallet-transactions__item .lp { flex-shrink: 0; margin-right: 4px; }
.lp__icon { display: flex; align-items: center; justify-content: center; }
.txn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.txn-credit { background: var(--success); }
.txn-debit { background: var(--danger); }
.wallet-transactions__item .rp { flex: 1; min-width: 0; }
.mp__amount {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
  gap: 8px;
  flex-wrap: wrap;
}
.mp__amount .flex-item-left { min-width: 0; word-break: break-word; }
.mp__amount .flex-item-left s { color: var(--text-3); }
.mp__amount .flex-item-right { font-size: 12px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.mp__text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  margin-bottom: 4px;
  word-break: break-word;
}
.mp__status {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  margin-top: 4px;
}
.mp__status_pending { background: rgba(255, 193, 7, 0.15); color: var(--warning); }
.mp__status_declined { background: rgba(220, 53, 69, 0.15); color: var(--danger); }
.form-divider { height: 1px; background: var(--border); margin: 20px 0; }
.form-paymethods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.form-paymethods__item {
  display: flex;
  align-items: center;
  padding: 12px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--ease), border-color var(--ease);
  min-height: 56px;
  touch-action: manipulation;
}
.form-paymethods__item:hover { background: var(--surface-hover); }
.form-paymethods__item .paym-logo {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  flex-shrink: 0;
}
.form-paymethods__item .paym-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.form-paymethods__item .paym-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-paymethods__item .paym-checkmark { color: var(--text-3); display: flex; flex-shrink: 0; }
.form-paymethods__item .paym-checkmark svg { width: 18px; height: 18px; fill: currentColor; }
.form-paymethods__item.active { border-color: var(--accent); background: var(--accent-soft); }
.form-paymethods__item.active .paym-checkmark { color: var(--accent); }
.recipients-search-input { position: relative; }
.recipients-search-input input { font-size: 16px; }
.recipients-search-input .input-spinner {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  display: flex;
  pointer-events: none;
}
.recipients-search-input .input-spinner svg { width: 18px; height: 18px; }
.recipients-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 4px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  max-height: 250px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.recipients-list__body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 8px;
}
.recipients-list__item {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
  cursor: pointer;
  transition: background-color var(--ease);
  min-height: 64px;
  touch-action: manipulation;
}
.recipients-list__item:hover { background: var(--surface-hover); }
.recipients-list__item-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.recipients-list__item-avatar img { width: 100%; height: 100%; object-fit: cover; }
.recipients-list__item-username { display: flex; flex-direction: column; min-width: 0; }
.recipients-list__item-username .user-name-holder {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recipients-list__item-username .username {
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wallet-banktrans {
  padding: 16px;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.wallet-banktrans__requisites,
.wallet-banktrans__alert,
.wallet-banktrans__form {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.bank-requisites {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
}
.bank-requisites__account-bank-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
  word-break: break-word;
}
.upi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  margin-bottom: 20px;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
#qrContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin: 0 auto;
  width: 100%;
  max-width: 220px;
}
#qrContainer a {
  color: #000;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  margin-bottom: 10px;
  text-decoration: none;
  word-break: break-all;
}
.pro-pay-wrapper { color: var(--text); }
.pro-card { background: var(--bg-2); }
.pro-btn-group { display: flex; gap: 12px; flex-wrap: wrap; }
.pro-main-btn {
  flex: 1;
  min-width: 140px;
  min-height: 48px;
  padding: 14px;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  color: #fff;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.pro-btn-upi { background: var(--accent); }
.pro-btn-upi:hover { background: var(--accent-hover); }
.pro-btn-net { background: var(--success); }
.pro-instruction-list {
  margin: 0;
  padding-left: 20px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.6;
}
.pro-instruction-list li { margin-bottom: 8px; }
.pro-faq-item { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.pro-faq-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.pro-faq-q { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; }
.pro-faq-a { font-size: 13px; color: var(--text-2); line-height: 1.5; }
.pro-modal-box {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pro-modal-box.show { display: flex; }
.pro-modal-dialog {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 20px;
  border-radius: 20px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.pro-modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
  text-align: center;
}
.pro-qr-container {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 15px 0;
}
#qrContainer canvas,
#qrContainer img { border-radius: 12px; display: block; max-width: 100%; height: auto; }
.pro-bank-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}
.pro-bank-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  gap: 12px;
}
.pro-bank-row:last-child { border-bottom: none; padding-bottom: 0; }
.pro-bank-label { color: var(--text-2); flex-shrink: 0; }
.pro-bank-value {
  color: var(--text);
  font-weight: 700;
  text-align: right;
  word-break: break-word;
}
.pro-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  padding: 14px;
  margin-top: 10px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--ease);
  touch-action: manipulation;
}
.pro-action-btn:hover { background: var(--accent-hover); color: #fff; text-decoration: none; }
.pro-action-btn-secondary { background: var(--bg-3); color: var(--text); }
.pro-action-btn-secondary:hover { background: var(--bg-4); color: var(--text); }

.gallery-container[data-app="gallery"] {
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
  min-width: 0;
}
[data-app="gallery"] .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}
[data-app="gallery"] .gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}
[data-app="gallery"] .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-app="gallery"] .gallery-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
}
[data-app="gallery"] .gallery-item:hover .gallery-overlay { opacity: 1; }
[data-app="gallery"] .gallery-stat {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
[data-app="gallery"] .gallery-stat svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; }
[data-app="gallery"] .gallery-load-more {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
[data-app="gallery"] .gallery-load-more .btn {
  min-width: 180px;
  min-height: 44px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}
[data-app="gallery"] .gallery-load-more .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.podcast-container[data-app="podcast"] {
  max-width: 900px;
  margin: 0 auto;
  padding: 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-sizing: border-box;
  min-width: 0;
}
[data-app="podcast"] .podcast-header { margin-bottom: 20px; color: var(--text); }
[data-app="podcast"] .podcast-header h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
[data-app="podcast"] .podcast-header .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-app="podcast"] .podcast-header .icon svg { width: 22px; height: 22px; fill: var(--accent); color: var(--accent); }
[data-app="podcast"] .podcast-header p { margin: 6px 0 0; font-size: 14px; color: var(--text-2); line-height: 1.5; }
[data-app="podcast"] .podcast-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
[data-app="podcast"] .podcast-load-more {
  display: flex;
  justify-content: center;
  padding: 24px 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
[data-app="podcast"] .podcast-load-more .btn {
  min-width: 180px;
  min-height: 44px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 600;
  background: var(--accent);
  border: none;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  touch-action: manipulation;
}
[data-app="podcast"] .podcast-load-more .btn:disabled { opacity: 0.6; cursor: not-allowed; }
[data-app="podcast"] .podcast-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  background: var(--bg-2);
  cursor: pointer;
  transition: background-color var(--ease);
  box-sizing: border-box;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
[data-app="podcast"] .podcast-item:hover { background: var(--surface-hover); }
[data-app="podcast"] .podcast-cover {
  width: 15%;
  min-width: 4.5rem;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--bg-4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
[data-app="podcast"] .podcast-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
[data-app="podcast"] .podcast-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-app="podcast"] .podcast-placeholder .icon { display: inline-flex; align-items: center; justify-content: center; }
[data-app="podcast"] .podcast-placeholder .icon svg { width: 1.5rem; height: 1.5rem; fill: var(--text-3); color: var(--text-3); }
[data-app="podcast"] .podcast-info { flex: 1; min-width: 0; }
[data-app="podcast"] .podcast-author {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 0.25rem;
  min-width: 0;
}
[data-app="podcast"] .podcast-author img {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 1.5rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
[data-app="podcast"] .podcast-author span {
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-2);
  min-width: 0;
}
[data-app="podcast"] .podcast-title {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.125rem;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
  word-break: break-word;
}
[data-app="podcast"] .podcast-text {
  font-size: 0.75rem;
  line-height: 1.2;
  opacity: 0.85;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-2);
}
[data-app="podcast"] .empty-state {
  padding: 50px 20px;
  text-align: center;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}
[data-app="podcast"] .empty-state .icon {
  display: block;
  margin-bottom: 12px;
  color: var(--accent);
  text-align: center;
}
[data-app="podcast"] .empty-state .icon svg { width: 34px; height: 34px; fill: currentColor; display: inline-block; }

body.reels-page {
  overflow: hidden !important;
  background: #000 !important;
  padding-bottom: 0 !important;
}
body.reels-page .mobile-bottom-navbar { display: none !important; }

.reels-container {
  position: fixed;
  inset: 0;
  background: #000;
  overflow: hidden;
  z-index: 999;
  display: flex;
  flex-direction: column;
}
.reels-content { position: relative; flex: 1; min-height: 0; width: 100%; overflow: hidden; }
#current-reel,
#next-reel { position: relative; width: 100%; height: 100%; }
.reels-container .reel-item {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  background: #000;
  overflow: hidden;
}
.reels-container .reel-video { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.reels-container .reel-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  display: block;
}
.reel-top-home {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  left: 16px;
  z-index: 10;
}
.reel-top-home a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
}
.reel-top-home svg,
.reel-top-home i { width: 22px; height: 22px; fill: currentColor; }
.reel-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 80px calc(24px + env(safe-area-inset-bottom, 0px)) 20px;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%);
  z-index: 5;
  pointer-events: none;
}
.reel-info > * { pointer-events: auto; }
.reel-user { display: flex; align-items: center; margin-bottom: 10px; }
.reel-user img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 10px;
  object-fit: cover;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}
.reel-user strong { font-size: 16px; font-weight: 700; }
.reel-caption {
  font-size: 14px;
  line-height: 1.4;
  color: #e7e9ea;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 100%;
}
.reel-actions {
  position: absolute;
  right: 12px;
  bottom: calc(100px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 24px;
  z-index: 6;
}
.reel-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.reel-action svg {
  width: 32px;
  height: 32px;
  fill: #fff;
}
.reel-action span {
  font-size: 13px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.reel-action.liked svg { fill: #f91880; }
.reel-action.liked span { color: #f91880; }
.reels-container .timeline-alert-container {
  position: absolute;
  top: calc(70px + env(safe-area-inset-top, 0px));
  left: 16px;
  right: 16px;
  z-index: 10;
  pointer-events: none;
  padding: 0;
  display: block;
}
.reels-container .timeline-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(0, 123, 255, 0.2);
  border: 1px solid rgba(0, 123, 255, 0.4);
  border-radius: 12px;
  pointer-events: auto;
}
.reels-container .timeline-alert__text { color: #fff; }

body.cl-app-guest,
body.cl-app-confirm_email,
body.cl-app-confirm_phone,
body.cl-app-confirm_registration {
  padding-bottom: 0;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  min-height: 100dvh;
}

body.cl-app-guest .main-content-container,
body.cl-app-guest .main-content-container-inner {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 100vh;
  min-height: 100dvh;
}

.welcome-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding-bottom: 80px;
}
.welcome-page__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.welcome-page__rp { display: flex; justify-content: center; width: 100%; }
.welcome-page__rp-inner { width: 100%; max-width: 460px; position: relative; }

.welcome-page-form {
  position: relative;
  padding: 48px 42px;
  border-radius: 28px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.welcome-page-form__header { text-align: center; margin-bottom: 32px; }
.welcome-page-form__header .logo { display: inline-block; }
.welcome-page-form__header .logo img {
  height: 52px;
  width: auto;
  object-fit: contain;
}
.welcome-page-form__header h1 {
  margin-top: 16px;
  color: var(--text);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
}
.welcome-page-form__body { width: 100%; }
.welcome-page-form .form-title { text-align: center; margin-bottom: 24px; }
.welcome-page-form .form-title h2 { color: var(--text); font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.welcome-page-form .form-title p { color: var(--text-2); font-size: 14px; line-height: 1.5; margin: 0; }
.welcome-page-form .form-group { margin-bottom: 20px; }
.welcome-page-form .form-group label {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
}
.welcome-page-form .form-control {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 16px;
  width: 100%;
  transition: border-color var(--ease);
}
.welcome-page-form .form-control::placeholder { color: var(--text-3); }
.welcome-page-form .form-control:focus {
  background: var(--bg-2);
  border-color: var(--accent);
  outline: none;
}
.welcome-page-form .password-ctrl { position: relative; display: flex; align-items: center; }
.welcome-page-form .password-ctrl input { padding-right: 48px; }
.welcome-page-form .password-ctrl button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color var(--ease);
}
.welcome-page-form .password-ctrl button:hover { color: var(--text); background: var(--bg-3); }
.welcome-page-form .password-ctrl button svg { width: 20px; height: 20px; fill: currentColor; }
.welcome-page-form .btn-custom.main-inline {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 600;
  font-size: 15px;
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.welcome-page-form .btn-custom.main-inline:hover:not(:disabled) {
  background: var(--accent-hover);
  text-decoration: none;
}
.welcome-page-form .btn-custom.main-inline:disabled { opacity: 0.6; cursor: not-allowed; }
.welcome-page-form .login-or-signup { display: flex; align-items: center; justify-content: center; margin: 20px 0; }
.welcome-page-form .login-or-signup::before,
.welcome-page-form .login-or-signup::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.welcome-page-form .login-or-signup span {
  padding: 0 16px;
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.welcome-page-form .oauth-login-providers { display: flex; flex-direction: column; gap: 12px; }
.welcome-page-form .social-login-btn a { display: block; text-decoration: none; }
.welcome-page-form .social-login-btn .btn-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  width: 100%;
  transition: opacity 0.2s;
}
.welcome-page-form .social-login-btn .btn-custom:hover { opacity: 0.9; text-decoration: none; }
.welcome-page-form .social-login-btn .btn-icon svg { width: 20px; height: 20px; fill: currentColor; }
.welcome-page-form .social-login-btn.google .btn-custom { background: #db4437; color: #ffffff; }
.welcome-page-form .social-login-btn.facebook .btn-custom { background: #1877f2; color: #ffffff; }
.welcome-page-form .social-login-btn.twitter .btn-custom { background: #1da1f2; color: #ffffff; }
.welcome-page-form .social-login-btn.linkedin .btn-custom { background: #0a66c2; color: #ffffff; }
.welcome-page-form .social-login-btn.discord .btn-custom { background: #5865f2; color: #ffffff; }
.welcome-page-form .social-login-btn.vkontakte .btn-custom { background: #4c75a3; color: #ffffff; }
.welcome-page-form .social-login-btn.instagram .btn-custom { background: #e1306c; color: #ffffff; }
.welcome-page-form .form-cta-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 14px;
  color: var(--text-2);
}
.welcome-page-form .form-cta-link a { color: var(--accent); font-weight: 600; text-decoration: none; }
.welcome-page-form .form-cta-link a:hover { text-decoration: underline; }
.welcome-page-form .form-tos {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  margin-bottom: 20px;
}
.welcome-page-form .form-tos .form-check { display: flex; align-items: flex-start; gap: 10px; }
.welcome-page-form .form-tos .form-check-input {
  position: static !important;
  float: none !important;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 2px 0 0 0 !important;
  transform: none !important;
  appearance: none;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  cursor: pointer;
}
.welcome-page-form .form-tos .form-check-input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
  background-size: 12px;
  background-position: center;
  background-repeat: no-repeat;
}
.welcome-page-form .form-tos .form-check-label { margin: 0; cursor: pointer; }
.welcome-page-form .form-tos a { color: var(--accent); text-decoration: none; }
.welcome-page-form .form-tos a:hover { text-decoration: underline; }
.welcome-page-form .invalid-main-feedback { color: var(--danger); font-size: 12px; font-weight: 500; margin-top: 6px; }
.welcome-page-form .valid-main-feedback { color: var(--success); font-size: 13px; margin-top: 6px; }

.welcome-page__footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 999;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 12px 0;
}
.welcome-page__footer .main-footer {
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
.welcome-page__footer .footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.welcome-page__footer .footer-nav-item,
.welcome-page__footer .footer-nav-item a {
  color: var(--text-2);
  font-size: 13px;
  text-decoration: none;
}
.welcome-page__footer .footer-nav-item a:hover { color: var(--accent); }

body.cl-app-confirm_email .timeline-container,
body.cl-app-confirm_phone .timeline-container,
body.cl-app-confirm_registration .timeline-container {
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
}
body.cl-app-confirm_email .timeline-header,
body.cl-app-confirm_phone .timeline-header,
body.cl-app-confirm_registration .timeline-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
}
body.cl-app-confirm_email .nav-link-holder a,
body.cl-app-confirm_phone .nav-link-holder a,
body.cl-app-confirm_registration .nav-link-holder a { color: var(--text); }

.confirm-email,
.confirm-phone,
.confirm-registration {
  padding: 24px 16px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
}
.confirm-email .timeline-placeholder,
.confirm-phone .timeline-placeholder,
.confirm-registration .timeline-placeholder {
  min-height: auto;
  padding: 32px 16px;
  background: transparent;
}
.confirm-email .timeline-placeholder h4,
.confirm-phone .timeline-placeholder h4,
.confirm-registration .timeline-placeholder h4 { color: var(--text); font-size: 20px; margin-bottom: 8px; }
.confirm-email .timeline-placeholder p,
.confirm-phone .timeline-placeholder p,
.confirm-registration .timeline-placeholder p { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.confirm-email .form-body,
.confirm-phone .form-body,
.confirm-registration .form-body {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 24px;
}
.confirm-email .form-group label,
.confirm-phone .form-group label,
.confirm-registration .form-group label {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}
.confirm-email .form-control,
.confirm-phone .form-control,
.confirm-registration .form-control {
  text-align: center;
  font-size: 28px;
  letter-spacing: 8px;
  font-weight: 700;
  padding: 12px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
}
.confirm-email .form-control:focus,
.confirm-phone .form-control:focus,
.confirm-registration .form-control:focus {
  border-color: var(--accent);
  background: var(--bg-2);
  outline: none;
}
.confirm-email .form-control::-webkit-outer-spin-button,
.confirm-email .form-control::-webkit-inner-spin-button,
.confirm-phone .form-control::-webkit-outer-spin-button,
.confirm-phone .form-control::-webkit-inner-spin-button,
.confirm-registration .form-control::-webkit-outer-spin-button,
.confirm-registration .form-control::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.confirm-email .btn-custom.main-inline,
.confirm-phone .btn-custom.main-inline,
.confirm-registration .btn-custom.main-inline {
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 12px;
  color: #ffffff;
  font-weight: 600;
  height: 48px;
  font-size: 15px;
  width: 100%;
}
.confirm-email .btn-custom.main-inline:hover:not(:disabled),
.confirm-phone .btn-custom.main-inline:hover:not(:disabled),
.confirm-registration .btn-custom.main-inline:hover:not(:disabled) {
  background: var(--accent-hover);
}

body.cl-app-earn_rewards {
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
  overflow: hidden;
  padding-bottom: 0;
}
body.cl-app-earn_rewards .main-content-container {
  background: transparent;
  border-left: 0;
  border-right: 0;
  box-shadow: none;
}
body.cl-app-earn_rewards .main-content-container-inner { min-height: 0; }
body.cl-app-earn_rewards .timeline-container-wrapper { min-height: 0; background: transparent; }
body.cl-app-earn_rewards .timeline-container-inner { min-height: 0; }
body.cl-app-earn_rewards .page-wrapper,
body.cl-app-earn_rewards .page-wrapper * { margin: 0; padding: 0; box-sizing: border-box; }
body.cl-app-earn_rewards .page-wrapper {
  min-height: 100vh;
  height: 100vh;
  padding: 62px 10px 10px;
  padding-bottom: calc(10px + var(--bottom-h) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
}
body.cl-app-earn_rewards .exchange-toolbar {
  position: fixed;
  inset: 0 0 auto 0;
  height: 58px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  z-index: 999;
}
body.cl-app-earn_rewards .toolbar-menu { width: 100%; display: flex; gap: 8px; }
body.cl-app-earn_rewards .page-wrapper button,
body.cl-app-earn_rewards .page-wrapper .toolbar-btn {
  cursor: pointer;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-3);
  color: var(--text);
  font-weight: 600;
  font-family: inherit;
  transition: background-color var(--ease);
}
body.cl-app-earn_rewards .toolbar-menu .toolbar-btn { flex: 1; height: 42px; font-size: 13px; }
body.cl-app-earn_rewards .toolbar-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
body.cl-app-earn_rewards .page-wrapper button:disabled {
  opacity: .6;
  cursor: not-allowed;
}
body.cl-app-earn_rewards .exchange-card {
  position: relative;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 18px;
}
body.cl-app-earn_rewards #watch-section { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
body.cl-app-earn_rewards #manage-section,
body.cl-app-earn_rewards #create-section { flex: 1; min-height: 0; overflow-y: auto; }
body.cl-app-earn_rewards .stats-card {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 12px;
}
body.cl-app-earn_rewards .stat { flex: 1; min-width: 0; }
body.cl-app-earn_rewards .stat small { display: block; margin-bottom: 3px; font-size: 11px; color: var(--text-2); }
body.cl-app-earn_rewards .stat strong {
  font-size: 18px;
  color: var(--text);
  word-break: break-word;
}
body.cl-app-earn_rewards .viewer-card {
  flex: 1;
  min-height: 0;
  height: calc(100vh - 340px);
  max-height: 56vh;
  padding: 6px;
  display: flex;
}
body.cl-app-earn_rewards .earn-card {
  flex-shrink: 0;
  min-height: 140px;
  padding: 10px 14px;
  background: var(--bg-2);
}
body.cl-app-earn_rewards #task-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  border: 0;
  border-radius: 14px;
  background: var(--bg-3);
  overflow: hidden;
}
body.cl-app-earn_rewards .earn-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
body.cl-app-earn_rewards .earn-value {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
}
body.cl-app-earn_rewards .earn-card small { font-size: 11px; color: var(--text-2); }
body.cl-app-earn_rewards .progress-bar-container {
  height: 4px;
  margin-top: 10px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg-3);
}
body.cl-app-earn_rewards #earn-progress-bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width .4s ease;
}
body.cl-app-earn_rewards #claim-button {
  width: 100%;
  height: 42px;
  margin-top: 10px !important;
  border-radius: 12px;
  background: var(--accent);
  border: 1px solid var(--accent);
  color: #fff;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background-color .15s;
}
body.cl-app-earn_rewards .page-wrapper input {
  width: 100%;
  padding: 12px 14px;
  outline: none;
  border-radius: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 14px;
}
body.cl-app-earn_rewards .page-wrapper input::placeholder { color: var(--text-3); }
body.cl-app-earn_rewards .page-wrapper input:focus {
  border-color: var(--accent);
  background: var(--bg-2);
}
body.cl-app-earn_rewards .delete-task-btn {
  padding: 8px 14px;
  border: none;
  border-radius: 10px;
  background: var(--danger);
  color: #fff;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}

body:has(.acp-main-left-sidebar) a {
  color: var(--cp-primary);
  text-decoration: none;
  transition: color 0.15s ease-in-out;
}
body:has(.acp-main-left-sidebar) a:hover { color: var(--cp-primary-hover); text-decoration: underline; }
body:has(.acp-main-left-sidebar) b,
body:has(.acp-main-left-sidebar) strong { font-weight: 600; color: var(--cp-text); }
body:has(.acp-main-left-sidebar) code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  background-color: #f1f5f9;
  color: #db2777;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}
body:has(.acp-main-left-sidebar) .text-message {
  background-color: #f8fafc;
  padding: 16px;
  border-radius: var(--cp-radius);
  border: 1px solid var(--cp-border);
  margin-bottom: 16px;
}
body:has(.acp-main-left-sidebar) .text-message h5 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cp-text);
}
body:has(.acp-main-left-sidebar) .text-message p {
  margin: 0;
  font-size: 14px;
  color: var(--cp-text);
  line-height: 1.6;
  word-break: break-word;
}
body:has(.acp-main-left-sidebar) .text-message table { margin-top: 12px; }

#waitme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}
.waitme-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--cp-border);
  border-top-color: var(--cp-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.acp-main-left-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--cp-sidebar-w);
  background-color: var(--cp-surface);
  border-right: 1px solid var(--cp-border);
  z-index: 1040;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}
.admin-info { padding: 20px; border-bottom: 1px solid var(--cp-border); }
.admin-info .user-info { display: flex; align-items: center; gap: 12px; }
.admin-info .avatar img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cp-border);
}
.admin-info .uname h5 { margin: 0; font-size: 15px; font-weight: 600; color: var(--cp-text); }
.admin-info .menu-ctrl { margin-left: auto; display: none; }
.admin-info .menu-ctrl .btn {
  color: var(--cp-text-muted);
  background: var(--cp-bg);
  border: 1px solid var(--cp-border);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.15s;
  padding: 0;
}
.admin-info .menu-ctrl .btn:hover { background: var(--cp-border); color: var(--cp-text); }

.menu-list {
  list-style: none;
  padding: 12px;
  overflow-y: auto;
  flex: 1;
  overscroll-behavior: contain;
}
.menu-list::-webkit-scrollbar { width: 6px; }
.menu-list::-webkit-scrollbar-thumb { background: var(--cp-border); border-radius: 4px; }
.menu-list-item { margin-bottom: 4px; }
.menu-list-item-link {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: var(--cp-radius);
  color: var(--cp-text-muted);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: background-color 0.15s;
}
.menu-list-item-link:hover { background-color: var(--cp-bg); color: var(--cp-text); text-decoration: none; }
.menu-list-item.active > .menu-list-item-link { background-color: var(--cp-primary-light); color: var(--cp-primary); }
.menu-list-item-link .icon { margin-right: 12px; display: flex; align-items: center; justify-content: center; }
.menu-list-item-link .text { flex: 1; }
.menu-list-item-link .chevron-down { transition: transform 0.2s; opacity: 0.6; }
.menu-list-item.open .chevron-down { transform: rotate(180deg); }
.submenu-list { display: none; padding-left: 36px; margin-top: 4px; margin-bottom: 8px; }
.menu-list-item.open .submenu-list { display: block; }
.submenu-list-item {
  display: block;
  padding: 8px 12px;
  color: var(--cp-text-muted);
  font-size: 13px;
  border-radius: var(--cp-radius);
  margin-bottom: 2px;
  min-height: 36px;
}
.submenu-list-item:hover { background-color: var(--cp-bg); color: var(--cp-text); text-decoration: none; }
.submenu-list-item.active { color: var(--cp-primary); font-weight: 600; }
.sb-footer {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--cp-text-muted);
  border-top: 1px solid var(--cp-border);
  background: var(--cp-surface);
}

.content {
  margin-left: var(--cp-sidebar-w);
  padding: 30px;
  min-height: 100vh;
  transition: margin-left 0.3s ease;
}
.main-content-block-ctrl { display: none; margin-bottom: 20px; }
.main-content-block-ctrl .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  cursor: pointer;
  box-shadow: var(--cp-shadow-sm);
  color: var(--cp-text);
  transition: background-color 0.2s;
}
.main-content-block-ctrl .btn:hover { background: var(--cp-bg); border-color: var(--cp-text-muted); }
.main-content-block-ctrl .btn svg,
.main-content-block-ctrl .btn i { width: 24px !important; height: 24px !important; font-size: 24px; }

.cp-app-container { max-width: 1400px; margin: 0 auto; }
.current-page-name { margin-bottom: 24px; }
.current-page-name h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--cp-text);
  margin: 0;
  letter-spacing: -0.5px;
}

body:has(.acp-main-left-sidebar) .row {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -12px;
  align-items: flex-start;
}
body:has(.acp-main-left-sidebar) [class*="col-"] {
  padding: 0 12px;
  width: 100%;
  margin-bottom: 24px;
  min-width: 0;
  box-sizing: border-box;
}

.card {
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  box-shadow: var(--cp-shadow-sm);
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: fit-content;
}
.card .header { padding: 16px 24px; border-bottom: 1px solid var(--cp-border); background-color: #fcfcfd; }
.card .header h2 { margin: 0; font-size: 16px; font-weight: 600; color: var(--cp-text); }
.card .body { padding: 24px; flex: 1; }
.card .body.no-pb { padding-bottom: 0; }
.card .footer { padding: 16px 24px; border-top: 1px solid var(--cp-border); background-color: #fcfcfd; }
.footer__btns { display: flex; gap: 12px; }

body:has(.acp-main-left-sidebar) .form { width: 100%; }
body:has(.acp-main-left-sidebar) .form-group { margin-bottom: 20px; }
body:has(.acp-main-left-sidebar) .form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-text);
  margin-bottom: 8px;
}
body:has(.acp-main-left-sidebar) .form-line { position: relative; width: 100%; }
body:has(.acp-main-left-sidebar) .form-control,
body:has(.acp-main-left-sidebar) input[type="text"]:not([class]),
body:has(.acp-main-left-sidebar) input[type="password"]:not([class]),
body:has(.acp-main-left-sidebar) input[type="email"]:not([class]),
body:has(.acp-main-left-sidebar) input[type="number"]:not([class]) {
  display: block;
  width: 100%;
  padding: 10px 14px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--cp-text);
  background-color: #fff;
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  transition: border-color 0.15s ease-in-out;
  outline: none;
  min-height: auto;
}
body:has(.acp-main-left-sidebar) .form-control:focus,
body:has(.acp-main-left-sidebar) input[type="text"]:not([class]):focus,
body:has(.acp-main-left-sidebar) input[type="password"]:not([class]):focus,
body:has(.acp-main-left-sidebar) input[type="email"]:not([class]):focus,
body:has(.acp-main-left-sidebar) input[type="number"]:not([class]):focus {
  border-color: var(--cp-primary);
}
body:has(.acp-main-left-sidebar) .form-control:disabled { background-color: #f1f5f9; cursor: not-allowed; }
body:has(.acp-main-left-sidebar) textarea.form-control { resize: vertical; min-height: 100px; }
body:has(.acp-main-left-sidebar) .form-select { position: relative; }
body:has(.acp-main-left-sidebar) .form-select select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  height: 42px;
}
body:has(.acp-main-left-sidebar) .form-file-input {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 2px dashed var(--cp-border);
  padding: 20px;
  border-radius: var(--cp-radius);
  background: var(--cp-bg);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
  color: var(--cp-text-muted);
  font-weight: 500;
  width: 100%;
}
body:has(.acp-main-left-sidebar) .form-file-input:hover {
  border-color: var(--cp-primary);
  background: var(--cp-primary-light);
  color: var(--cp-primary);
}
body:has(.acp-main-left-sidebar) .form-file-input::after { content: "Click to select file"; }
body:has(.acp-main-left-sidebar) .form-control-file {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
body:has(.acp-main-left-sidebar) .form-file-input__icon { color: inherit; display: flex; align-items: center; }
body:has(.acp-main-left-sidebar) .info-feedback {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cp-text-muted);
  line-height: 1.4;
}
body:has(.acp-main-left-sidebar) .invalid-feedback {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--cp-danger);
  font-weight: 500;
}

body:has(.acp-main-left-sidebar) .regular-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
body:has(.acp-main-left-sidebar) .regular-table::-webkit-scrollbar { height: 6px; }
body:has(.acp-main-left-sidebar) .regular-table::-webkit-scrollbar-thumb {
  background: var(--cp-border);
  border-radius: 4px;
}
body:has(.acp-main-left-sidebar) .table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0;
  min-width: 800px;
}
body:has(.acp-main-left-sidebar) .table th,
body:has(.acp-main-left-sidebar) .table td {
  padding: 12px 16px;
  vertical-align: middle;
  border-bottom: 1px solid var(--cp-border);
  text-align: left;
  font-size: 14px;
  white-space: nowrap;
}
body:has(.acp-main-left-sidebar) .table thead th {
  background-color: #f8fafc;
  font-weight: 600;
  color: var(--cp-text-muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 2px solid var(--cp-border);
}
body:has(.acp-main-left-sidebar) .table-bordered th,
body:has(.acp-main-left-sidebar) .table-bordered td { border: 1px solid var(--cp-border) !important; }
body:has(.acp-main-left-sidebar) .table-hover tbody tr:hover { background-color: #f8fafc; }
body:has(.acp-main-left-sidebar) .table-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0 0;
}
body:has(.acp-main-left-sidebar) .pagination-ctrls {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--cp-radius);
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  color: var(--cp-text-muted);
  transition: background-color 0.15s;
}
body:has(.acp-main-left-sidebar) .pagination-ctrls:hover {
  background-color: var(--cp-bg);
  color: var(--cp-text);
  text-decoration: none;
}
body:has(.acp-main-left-sidebar) .pagination-ctrls.disabled { opacity: 0.4; pointer-events: none; }
body:has(.acp-main-left-sidebar) .empty-table { padding: 48px 24px; text-align: center; }
body:has(.acp-main-left-sidebar) .empty-table h4,
body:has(.acp-main-left-sidebar) .empty-table h5 {
  font-size: 18px;
  color: var(--cp-text);
  margin-bottom: 8px;
  font-weight: 600;
}
body:has(.acp-main-left-sidebar) .empty-table p {
  color: var(--cp-text-muted);
  font-size: 14px;
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

.user-info-holder { display: flex; align-items: center; gap: 12px; }
.avatar-holder { flex-shrink: 0; }
body:has(.acp-main-left-sidebar) .avatar-holder img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cp-border);
}
.uname-holder b { display: block; font-size: 14px; font-weight: 600; color: var(--cp-text); }
.uname-holder a { display: block; font-size: 12px; color: var(--cp-text-muted); margin-top: 2px; }
.user-name-holder.verified-badge {
  position: relative;
  padding-right: 20px;
  display: inline-flex;
  align-items: center;
}
.user-name-holder.verified-badge::after {
  content: "✓";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-color: var(--cp-primary);
  color: #fff;
  font-size: 10px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: bold;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  line-height: 1.2;
}
.badge.bg-red,
.bg-red { background-color: var(--cp-danger-light); color: var(--cp-danger); }
.badge.bg-green,
.bg-green { background-color: var(--cp-success-light); color: var(--cp-success); }
.badge.bg-blue,
.bg-blue { background-color: var(--cp-primary-light); color: var(--cp-primary); }
.badge.bg-orange,
.bg-orange { background-color: var(--cp-warning-light); color: var(--cp-warning); }
.badge.bg-grey,
.bg-grey { background-color: #f1f5f9; color: var(--cp-text-muted); }

.inline-alertbox-wrapper { margin-bottom: 24px; }
.inline-alertbox {
  display: flex;
  padding: 16px;
  border-radius: var(--cp-radius);
  border: 1px solid transparent;
  gap: 16px;
}
.inline-alertbox.info { background-color: var(--cp-info-light); border-color: #bae6fd; color: #0369a1; }
.inline-alertbox.warning { background-color: var(--cp-warning-light); border-color: #fde68a; color: #b45309; }
.inline-alertbox.danger { background-color: var(--cp-danger-light); border-color: #fecaca; color: #b91c1c; }
.inline-alertbox .icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
  color: inherit;
}
.inline-alertbox .alert-message { flex: 1; color: var(--cp-text); }
.inline-alertbox .alert-message h6 { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: inherit; }
.inline-alertbox .alert-message p { margin: 0; font-size: 13px; line-height: 1.6; color: inherit; }

.info-box {
  display: flex;
  align-items: center;
  padding: 24px;
  border-radius: var(--cp-radius-lg);
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  box-shadow: var(--cp-shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s;
  height: 100%;
}
.info-box:hover { transform: translateY(-2px); box-shadow: var(--cp-shadow); }
.info-box .icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  font-size: 24px;
  flex-shrink: 0;
}
.info-box .content .text {
  font-size: 13px;
  font-weight: 600;
  color: var(--cp-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-box .content .number {
  font-size: 28px;
  font-weight: 700;
  color: var(--cp-text);
  line-height: 1;
}
.info-box.bg-red .icon { background-color: var(--cp-danger-light); color: var(--cp-danger); }
.info-box.bg-blue .icon { background-color: var(--cp-primary-light); color: var(--cp-primary); }
.info-box.bg-light-green .icon { background-color: var(--cp-success-light); color: var(--cp-success); }
.info-box.bg-orange .icon { background-color: var(--cp-warning-light); color: var(--cp-warning); }
.info-box.bg-pink .icon { background-color: #fdf2f8; color: #db2777; }
.info-box.bg-indigo .icon { background-color: #e0e7ff; color: #4f46e5; }

.user-card {
  display: flex;
  align-items: center;
  padding: 16px;
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius-lg);
  gap: 16px;
  box-shadow: var(--cp-shadow-sm);
}
.user-card__avatar img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cp-border);
}
.user-card__name h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--cp-text); }
.user-card__name span { font-size: 13px; color: var(--cp-text-muted); }
.user-card__icon { margin-left: auto; color: var(--cp-text-muted); }

.form-switch-item {
  background-color: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  padding: 16px;
  margin-bottom: 16px;
  transition: border-color 0.2s;
}
.form-switch-item:hover { border-color: var(--cp-primary); }
.form-check-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  margin-bottom: 0;
  width: 100%;
  gap: 16px;
}
.form-check-label__text h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; color: var(--cp-text); }
.form-check-label__text p { margin: 0; font-size: 13px; color: var(--cp-text-muted); }
.switch { display: inline-block; vertical-align: middle; }
.switch label {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
  cursor: pointer;
}
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch .lever {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #cbd5e1;
  border-radius: 24px;
  transition: background-color 0.2s ease;
}
.switch .lever::before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch input:checked + .lever { background-color: var(--cp-primary); }
.switch input:checked + .lever::before { transform: translateX(20px); }

.select-box select {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--cp-border);
  background: #fff;
  font-size: 13px;
  color: var(--cp-text);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 80px;
  height: 32px;
}
.select-box select:focus { border-color: var(--cp-primary); }

body:has(.acp-main-left-sidebar) .user-info {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.popup-ticket-modal .user-info .avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--cp-border);
}
.popup-ticket-modal .user-info .uname h5 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--cp-text);
}
.popup-ticket-modal .user-info .uname a { font-size: 13px; color: var(--cp-text-muted); }

.banner-flag img { width: 24px; border-radius: 4px; display: block; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }

[dir="rtl"] .left-sb-container {
  left: auto;
  right: 0;
  border-right: 0;
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
}
[dir="rtl"] .left-sb-container.show { transform: translateX(0); }
[dir="rtl"] .dropdown-menu { right: auto; left: 0; }
[dir="rtl"] .jq-toast-single {
  border-left: 0;
  border-right: 4px solid var(--accent);
  padding: 12px 16px 12px 36px;
}
[dir="rtl"] .jq-toast-single.jq-icon-success { border-right-color: var(--success); }
[dir="rtl"] .jq-toast-single.jq-icon-error { border-right-color: var(--danger); }
[dir="rtl"] .jq-toast-single.jq-icon-warning { border-right-color: var(--warning); }
[dir="rtl"] .jq-toast-single .close-jq-toast-single { right: auto; left: 12px; }
[dir="rtl"] .go-options { direction: ltr; }
[dir="rtl"] .swift-player__close { right: auto; left: 10px; }
[dir="rtl"] .swift-player__nav-ctrl.prev { left: auto; right: 10px; }
[dir="rtl"] .swift-player__nav-ctrl.next { right: auto; left: 10px; }
[dir="rtl"] .delete-preview { right: auto; left: 8px; }
[dir="rtl"] .add-ikon { right: auto; left: -2px; }

@media (min-width: 576px) {
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
  .col-sm-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.3333%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  body:has(.acp-main-left-sidebar) .col-sm-4 { width: 33.3333%; }
  body:has(.acp-main-left-sidebar) .col-sm-6 { width: 50%; }
  body:has(.acp-main-left-sidebar) .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  :root { --max-w: 640px; }
  input,
  textarea,
  select { font-size: 15px; }
  .main-content-container { box-shadow: 0 0 24px rgba(0, 0, 0, 0.05); }
  .left-sb-container { width: 300px; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.3333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .row > .col-md-3 { width: 25%; }
  .cookie-message { flex-direction: row; align-items: center; justify-content: space-between; }
  .cookie-message .rp { flex-wrap: nowrap; }
  body:has(.acp-main-left-sidebar) .col-md-4 { width: 33.3333%; }
  body:has(.acp-main-left-sidebar) .col-md-5 { width: 41.6666%; }
  body:has(.acp-main-left-sidebar) .col-md-6 { width: 50%; }
  body:has(.acp-main-left-sidebar) .col-md-7 { width: 58.3333%; }
  body:has(.acp-main-left-sidebar) .col-md-8 { width: 66.6666%; }
  body:has(.acp-main-left-sidebar) .col-md-12 { width: 100%; }
}

@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
  .col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.3333%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .row > .col-lg-3 { width: 25%; }
  body:has(.acp-main-left-sidebar) .col-lg-3 { width: 25%; }
  body:has(.acp-main-left-sidebar) .col-lg-4 { width: 33.3333%; }
  body:has(.acp-main-left-sidebar) .col-lg-5 { width: 41.6666%; }
  body:has(.acp-main-left-sidebar) .col-lg-6 { width: 50%; }
  body:has(.acp-main-left-sidebar) .col-lg-7 { width: 58.3333%; }
  body:has(.acp-main-left-sidebar) .col-lg-9 { width: 75%; }
  body:has(.acp-main-left-sidebar) .col-lg-12 { width: 100%; }
}

@media (min-width: 1024px) {
  :root { --max-w: 680px; }
}

@media (min-width: 1200px) {
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
  .col-xl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.3333%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .row > .col-xl-3 { width: 25%; }
  body:has(.acp-main-left-sidebar) .col-xl-6 { width: 50%; }
  body:has(.acp-main-left-sidebar) .col-xl-12 { width: 100%; }
}

@media (min-width: 1400px) {
  .col-xxl-2 { flex: 0 0 16.666667%; max-width: 16.666667%; width: 16.6666%; }
  .col-xxl-3 { flex: 0 0 25%; max-width: 25%; width: 25%; }
  .col-xxl-4 { flex: 0 0 33.333333%; max-width: 33.333333%; width: 33.3333%; }
  .col-xxl-6 { flex: 0 0 50%; max-width: 50%; width: 50%; }
  .col-xxl-12 { flex: 0 0 100%; max-width: 100%; width: 100%; }
  .row > .col-xxl-2 { width: 16.66666667%; }
  body:has(.acp-main-left-sidebar) .col-xxl-3 { width: 25%; }
  body:has(.acp-main-left-sidebar) .col-xxl-4 { width: 33.3333%; }
  body:has(.acp-main-left-sidebar) .col-xxl-6 { width: 50%; }
}

@media (max-width: 991px) {
  body:has(.acp-main-left-sidebar) .acp-main-left-sidebar { transform: translateX(-100%); }
  body:has(.acp-main-left-sidebar).mobile-menu-open .acp-main-left-sidebar {
    transform: translateX(0);
    box-shadow: var(--cp-shadow-lg);
  }
  body:has(.acp-main-left-sidebar).mobile-menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    z-index: 1035;
  }
  body:has(.acp-main-left-sidebar) .content { margin-left: 0; padding: 20px 16px; }
  body:has(.acp-main-left-sidebar) .main-content-block-ctrl { display: block; }
  body:has(.acp-main-left-sidebar) .admin-info .menu-ctrl { display: block; }
  body:has(.acp-main-left-sidebar) .row { margin: 0 -8px; }
  body:has(.acp-main-left-sidebar) [class*="col-"] { padding: 0 8px; margin-bottom: 16px; }
  body:has(.acp-main-left-sidebar) .card .body { padding: 16px; }
  body:has(.acp-main-left-sidebar) .modal-dialog { margin: 20px auto; padding: 0 16px; }
  body:has(.acp-main-left-sidebar) .info-box { padding: 16px; }
  body:has(.acp-main-left-sidebar) .info-box .content .number { font-size: 24px; }
  .welcome-page-form { padding: 36px 24px; border-radius: 22px; }
  .welcome-page-form__header h1 { font-size: 1.5rem; }
}

@media (max-width: 768px) {
  .modal-dialog { margin: 16px; }
  .reel-actions { right: 12px; bottom: calc(110px + env(safe-area-inset-bottom, 0px)); gap: 22px; }
  .reel-info { right: 76px; padding: 16px 0 calc(20px + env(safe-area-inset-bottom, 0px)) 16px; background: transparent; }
  .reel-action svg { width: 30px; height: 30px; }
  .reel-action span { font-size: 12px; }
  .timeline-posts-ls-group { margin-left: 20px; padding-left: 8px; }
  .post-list-item { padding: 12px 14px; }
  .post-list-item__header { padding-left: 50px; }
  div.post-avatar,
  div.avatar-holder { flex: 0 0 38px !important; width: 38px !important; height: 38px !important; }
  .publication-text,
  .post-data-layout__content { font-size: 14px; }
  .ctrls-item { min-height: 38px; min-width: 38px; padding: 4px 8px; }
  [data-app="gallery"] .gallery-overlay { display: none; }
  .podcast-container[data-app="podcast"] { padding: 12px; }
  [data-app="podcast"] .podcast-header { margin-bottom: 16px; }
  [data-app="podcast"] .podcast-header h2 { font-size: 22px; }
  [data-app="podcast"] .podcast-header p { font-size: 13px; }
  [data-app="podcast"] .podcast-list { gap: 14px; }
  [data-app="podcast"] .podcast-item { padding: 0.5rem 0.75rem; gap: 0.625rem; }
  [data-app="podcast"] .podcast-cover { min-width: 3.75rem; }
  [data-app="podcast"] .podcast-author img { width: 1.375rem; height: 1.375rem; min-width: 1.375rem; }
  [data-app="podcast"] .podcast-title { font-size: 0.875rem; }
  body.cl-app-earn_rewards .page-wrapper {
    padding: 60px 8px 8px;
    padding-bottom: calc(8px + var(--bottom-h) + env(safe-area-inset-bottom, 0px));
    gap: 8px;
  }
  body.cl-app-earn_rewards .exchange-toolbar { height: 56px; padding: 8px; }
  body.cl-app-earn_rewards .toolbar-menu .toolbar-btn { height: 40px; font-size: 12px; }
  body.cl-app-earn_rewards .stats-card { padding: 10px; }
  body.cl-app-earn_rewards .stat strong { font-size: 16px; }
  body.cl-app-earn_rewards .viewer-card {
    flex: 1;
    height: calc(100vh - 320px);
    max-height: 54vh;
    padding: 4px;
  }
  body.cl-app-earn_rewards .earn-card { min-height: 136px; padding: 8px 12px; }
  body.cl-app-earn_rewards #task-frame { width: 100%; height: 100%; }
  body.cl-app-earn_rewards .earn-value { font-size: 16px; }
  body.cl-app-earn_rewards .page-wrapper input { font-size: 16px; }
}

@media (max-width: 480px) {
  .posts-ls .post-list-item-content .publication-content .publication-images-slider .col-sm-4 { width: 50%; }
  .user-info td { padding: 8px; }
  .user-data-header h3 { font-size: 15px; }
  .info-label { font-size: 13px; }
  .info-value { font-size: 13px; }
  .welcome-page__body { padding: 16px 12px; }
  .welcome-page-form { padding: 28px 20px; }
  .welcome-page-form__header .logo img { height: 42px; }
  .welcome-page-form__header h1 { font-size: 1.35rem; }
  .welcome-page__footer .footer-nav { gap: 8px 12px; }
  .form-paymethods { grid-template-columns: 1fr; }
  .wallet-balance__amount span:first-child { font-size: 28px; }
  .wallet-footer__ctrls-item { min-width: 0; flex: 1 1 100%; }
  .wallet-footer__ctrls-item .btn { width: 100%; }
  .account-wallet,
  .wallet-add,
  .wallet-send,
  .wallet-withdrawal,
  .pro-pay-wrapper { padding: 12px; }
  .account-wallet__card,
  .wallet-add__form,
  .pro-card,
  .wallet-send__form { padding: 16px; border-radius: 16px; }
}

@media (max-width: 420px) {
  .timeline-pubbox__footer { margin-left: 0; }
  .swift-pubbox__ctrls { gap: 0; }
}

@media (max-width: 400px) {
  body { font-size: 14px; }
  .navbar-ctrl { width: 38px; height: 38px; max-width: 50px; }
  .navbar-ctrl svg { width: 20px; height: 20px; }
  .mobile-bottom-navbar-inner { padding: 0 2px; gap: 0; }
  .left-sb-container { width: 260px; }
  .modal-header { padding: 12px 14px; }
  .modal-body { padding: 14px; }
  .modal-footer { padding: 10px 14px; }
}

@media (max-width: 380px) {
  .timeline-header__botline { height: 48px; }
  .nav-link-holder a { font-size: 18px; }
  .swift-item__body { width: 60px; height: 60px; }
  .swift-item__footer { max-width: 64px; font-size: 10px; }
  .ctrl-item { width: 36px; height: 36px; }
  .ctrl-item svg { width: 18px; height: 18px; }
  .swift-pubbox__input textarea { font-size: 15px; }
  .reel-actions { right: 10px; bottom: calc(105px + env(safe-area-inset-bottom, 0px)); gap: 18px; }
  .reel-info { right: 68px; }
  .reel-action svg { width: 26px; height: 26px; }
  .reel-user img { width: 32px; height: 32px; }
  .reel-user strong { font-size: 14px; }
  .reel-caption { font-size: 13px; }
  .notifications-list__item { padding: 14px 12px; }
  .notifications-list__item-avatar { width: 42px; height: 42px; }
  .notif-text { font-size: 14px; }
  .gift-grid { grid-template-columns: repeat(2, 1fr); }
  .message-media img,
  .message-media video,
  .message-media .cl-plyr-video { width: 200px; max-width: 100%; }
  .message-data__body { font-size: 14px; padding: 8px 12px; }
  .message-input textarea { font-size: 16px; }
  .wallet-balance__amount span:first-child { font-size: 24px; }
  div.post-avatar,
  div.avatar-holder { flex: 0 0 34px !important; width: 34px !important; height: 34px !important; }
  .post-list-item__header { padding-left: 46px; }
  body.cl-app-earn_rewards .stat strong { font-size: 14px; }
  body.cl-app-earn_rewards .earn-value { font-size: 15px; }
  body.cl-app-earn_rewards .toolbar-menu .toolbar-btn { font-size: 11px; padding: 0 4px; }
  .timeline-searchbar .keyword-input input { min-height: 44px; }
}

@media (hover: none) {
  .message-data__ctrls { opacity: 0.6; }
  .conversation-messages__item:hover .message-data__ctrls { opacity: 1; }
}

.no-mb { margin-bottom: 0 !important; }

.affiliates {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
}

.affiliates__header {
  padding: 32px 20px 24px;
  text-align: center;
  border-bottom: 8px solid var(--bg-3);
}

.affiliates__header .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.affiliates__header .icon__bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 50%;
}

.affiliates__header .icon__bg svg {
  width: 32px;
  height: 32px;
  display: block;
}

.affiliates__header h4 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}

.affiliates__header p {
  margin: 0 auto;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  max-width: 440px;
}

.affiliates__header p b {
  color: var(--text);
  font-weight: 700;
}

.affiliates__header p span {
  display: inline-block;
  margin-top: 6px;
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.affiliates__header p span:hover {
  text-decoration: underline;
}

.affiliates__header .icon-2 {
  margin-top: 16px;
  color: var(--text-3);
}

.affiliates__header .icon-2 svg {
  width: 22px;
  height: 22px;
}

.affiliates__body {
  padding: 24px 20px;
  border-bottom: 8px solid var(--bg-3);
}

.affiliates__body-topline {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 12px;
  text-align: center;
}

.affiliates__body-midline {
  display: block;
  padding: 12px 16px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--text);
  word-break: break-all;
  text-align: center;
  margin-bottom: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.affiliates__body-botline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.social-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  text-decoration: none;
  transition: background-color var(--ease);
  cursor: pointer;
  touch-action: manipulation;
}

.social-link-btn:hover {
  background: var(--bg-4);
  text-decoration: none;
}

.social-link-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.social-link-btn__icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.social-link-btn.facebook { color: #1877f2; }
.social-link-btn.twitter { color: #1da1f2; }
.social-link-btn.whatsapp { color: #25d366; }
.social-link-btn.pinterest { color: #e60023; }
.social-link-btn.linkedin { color: #0a66c2; }

.social-link-btn.copy-link {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: rgba(0, 123, 255, 0.3);
}

.social-link-btn.copy-link:hover {
  background: rgba(0, 123, 255, 0.2);
}

.affiliates__footer {
  padding: 20px;
  border-bottom: 8px solid var(--bg-3);
}

.affiliates__footer-topline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.payout-request-cta {
  font-size: 14px;
  color: var(--text-2);
  text-align: center;
  margin-bottom: 4px;
  line-height: 1.5;
}

.affiliates__footer .btn-custom.btn-block {
  width: 100%;
}

.affiliates__payouts {
  padding: 20px;
}

.affiliates__payouts-title h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.affiliates-transactions {
  display: flex;
  flex-direction: column;
}

.affiliates-transactions__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.affiliates-transactions__item:last-child {
  border-bottom: none;
}

.affiliates-transactions__item .lp {
  flex-shrink: 0;
}

.affiliates-transactions__item .lp__icon img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 50%;
  display: block;
}

.affiliates-transactions__item .rp {
  flex: 1;
  min-width: 0;
}

.affiliates-transactions__item .mp__amount {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.affiliates-transactions__item .mp__amount .flex-item-right {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  white-space: nowrap;
}

.affiliates-transactions__item .mp__text {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  word-break: break-word;
}

.popup-modal-form {
  display: flex;
  flex-direction: column;
}

.affiliates-workflow .modal-body {
  padding: 20px 16px;
}

.affiliates-workflow-list .row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

.affiliates-workflow-list .col-12 {
  padding: 0;
  width: 100%;
  flex: 0 0 100%;
  max-width: 100%;
}

.list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.list-item__lp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}

.list-item__lp .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.list-item__lp .icon svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.list-item__mp {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  padding-top: 6px;
}

.list-item__mp b {
  color: var(--accent);
  font-weight: 700;
}

.profile-settings {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  padding-bottom: 24px;
}

.profile-settings__title {
  padding: 20px 16px 8px;
}

.profile-settings__title h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.profile-settings__link {
  display: block;
  text-decoration: none;
  color: var(--text);
  transition: background-color var(--ease);
  border-bottom: 1px solid var(--border);
}

.profile-settings__link:hover {
  background: var(--surface-hover);
  text-decoration: none;
}

.profile-settings__content {
  padding: 16px;
}

.profile-settings__content_no-padding {
  padding: 0;
}

.settings-form {
  width: 100%;
}

.settings-form .form-group {
  margin-bottom: 20px;
}

.settings-form .form-group.no-mb {
  margin-bottom: 0;
}

.settings-form .form-group.d-flex {
  display: flex;
}

.nav-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  min-height: 64px;
}

.nav-list-item .lp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--text);
}

.nav-list-item .lp svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.nav-list-item .mp {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.preview-value {
  font-size: 13px;
  color: var(--text-2);
  word-break: break-word;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.nav-list-item .rp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--text-3);
}

.nav-list-item .rp svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.col-grey {
  color: var(--text-2);
  font-weight: 400;
  font-size: 12px;
}

.form-toggle {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 64px;
}

.form-toggle__lp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--accent);
}

.form-toggle__lp svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.form-toggle__mp {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.form-toggle__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  word-break: break-word;
}

.form-toggle__desc {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
  word-break: break-word;
}

.form-toggle__rp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.form-toggle__rp .form-check {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  margin: 0;
}

.password-ctrl {
  position: relative;
  display: flex;
  align-items: center;
}

.password-ctrl input.form-control {
  padding-right: 48px;
}

.password-ctrl button.password-ctrl {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background-color var(--ease);
  padding: 0;
}

.password-ctrl button.password-ctrl:hover {
  color: var(--text);
  background: var(--bg-3);
}

.password-ctrl button.password-ctrl svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.padding-x-offset {
  padding-left: 16px;
  padding-right: 16px;
}

.timeline-navbar_border-top {
  border-top: 1px solid var(--border);
}

.ml-offset {
  margin-left: 8px;
}

.form-dropzone__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.form-dropzone__header {
  display: flex;
  justify-content: center;
}

.form-dropzone__footer {
  margin-top: 4px;
}

.user-data__subscription {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-2);
}

.user-data__subscription span:first-child {
  font-weight: 600;
  color: var(--text);
}

.user-profile {
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
}

.user-profile__header {
  position: relative;
}

.user-profile__header-cover {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
  background: var(--bg-3);
}

.user-profile__header-cover .image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

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

.user-profile__header-cover img.original-cover {
  width: 100%;
  height: auto;
  object-fit: contain;
  cursor: grab;
}

.user-profile__header-avatar {
  position: absolute;
  bottom: -48px;
  left: 16px;
  z-index: 2;
}

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bg-2);
  background: var(--bg-3);
  position: relative;
}

.profile-avatar .avatar-image {
  width: 100%;
  height: 100%;
  position: relative;
}

.profile-avatar .avatar-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.profile-avatar-online::after {
  content: '';
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 16px;
  height: 16px;
  background: var(--success);
  border: 3px solid var(--bg-2);
  border-radius: 50%;
  z-index: 3;
}

.upload-avatar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--ease);
  padding: 0;
}

.profile-avatar:hover .upload-avatar {
  opacity: 1;
}

.upload-avatar svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.cover-corrector {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.cover-corrector__body {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.cover-corrector__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color var(--ease);
  padding: 0;
}

.cover-corrector__btn:hover {
  background: rgba(0, 0, 0, 0.85);
}

.cover-corrector__btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.user-profile__inputs input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.user-profile__body {
  padding: 0 16px 16px;
}

.user-profile__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-height: 56px;
}

.user-profile__controls-item {
  display: flex;
  align-items: center;
}

.ctrl-single-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: background-color var(--ease);
  text-decoration: none;
}

.ctrl-single-btn:hover {
  background: var(--bg-4);
  text-decoration: none;
}

.ctrl-single-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.user-profile__controls-item .dropleft {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.user-profile__controls-item .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--text);
  cursor: pointer;
  transition: background-color var(--ease);
}

.user-profile__controls-item .dropdown-toggle::after {
  display: none;
}

.user-profile__controls-item .dropdown-toggle:hover {
  background: var(--bg-3);
}

.user-profile__controls-item .dropdown-toggle svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.user-profile__controls-item .dropdown-menu.dropdown-icons {
  top: 100% !important;
  bottom: auto !important;
  right: 0 !important;
  left: auto !important;
  margin-top: 6px !important;
  margin-bottom: 0 !important;
}

.user-profile__name {
  margin-top: 4px;
}

.user-profile__name h4 {
  margin: 0 0 2px;
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}

.user-profile__name > a {
  font-size: 14px;
  color: var(--text-2);
  text-decoration: none;
  display: inline-block;
}

.user-profile__name > a:hover {
  text-decoration: underline;
}

.user-profile__counter {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 12px;
}

.user-profile__counter .counter-item {
  display: inline-flex;
  gap: 4px;
  font-size: 14px;
  text-decoration: none;
  color: inherit;
}

.user-profile__counter .counter-item span:first-child {
  font-weight: 700;
  color: var(--text);
}

.user-profile__counter .counter-item span:last-child {
  color: var(--text-2);
}

.user-profile__bio {
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text);
  word-break: break-word;
}

.user-profile__bio-topline {
  margin-bottom: 6px;
}

.user-profile__bio-topline a {
  color: var(--accent);
  text-decoration: none;
}

.user-profile__bio-botline a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: none;
  word-break: break-all;
}

.user-profile__bio-botline a:hover {
  text-decoration: underline;
}

.user-profile__footer {
  padding: 16px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.profile-shortinfo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-shortinfo__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-2);
}

.profile-shortinfo__item .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--text-2);
  flex-shrink: 0;
}

.profile-shortinfo__item .icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.profile-shortinfo__item .text {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.profile-shortinfo__item .banner {
  flex-shrink: 0;
}

.profile-shortinfo__item .banner img {
  width: 20px;
  border-radius: 3px;
  display: block;
}

.profile-common-follows {
  display: flex;
  flex-direction: column;
}

.common-follows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.common-follows__title {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.4;
}

.common-follows__title strong {
  color: var(--text);
  font-weight: 700;
}

.common-follows__list {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.common-follows__item {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-3);
  border: 2px solid var(--bg-2);
  flex-shrink: 0;
}

.common-follows__item a {
  display: block;
  width: 100%;
  height: 100%;
}

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

.common-follows__item_total {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-2);
}

.profile-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.profile-socials__link {
  display: inline-flex;
  width: 36px;
  height: 36px;
  transition: opacity var(--ease);
  text-decoration: none;
}

.profile-socials__link:hover {
  opacity: 0.8;
  text-decoration: none;
}

.profile-socials__link svg {
  width: 100%;
  height: 100%;
  display: block;
}

.subscription-alert {
  margin: 16px;
  padding: 24px;
  text-align: center;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.subscription-alert__avatar {
  width: 64px;
  height: 64px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--bg-3);
  background: var(--bg-3);
}

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

.subscription-alert h5 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

.subscription-alert p {
  margin: 0 0 16px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.5;
}

.subscription-paid {
  margin: 16px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 12px;
}

.subscription-paid__avatar {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.subscription-paid__avatar .s-avatar,
.subscription-paid__avatar .c-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--bg-2);
  background: var(--bg-3);
}

.subscription-paid__avatar .c-avatar {
  margin-left: -12px;
}

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

.subscription-paid__text {
  flex: 1;
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
  word-break: break-word;
}

.image-wrapper {
  display: block;
  width: 100%;
  height: 100%;
}

.viewable {
  display: block;
}

.report-modal .report-reasons {
  margin-bottom: 8px;
}

@media (max-width: 480px) {
  .affiliates__header {
    padding: 24px 16px 20px;
  }
  .affiliates__header h4 {
    font-size: 18px;
  }
  .affiliates__body {
    padding: 20px 16px;
  }
  .affiliates__footer {
    padding: 16px;
  }
  .affiliates__payouts {
    padding: 16px;
  }
  .profile-settings__content {
    padding: 12px;
  }
  .nav-list-item {
    padding: 12px 14px;
    gap: 12px;
  }
  .preview-label {
    font-size: 14px;
  }
  .preview-value {
    font-size: 12px;
  }
  .form-toggle {
    padding: 12px 14px;
    gap: 12px;
  }
  .user-profile__header-cover {
    height: 160px;
  }
  .profile-avatar {
    width: 80px;
    height: 80px;
  }
  .user-profile__header-avatar {
    bottom: -40px;
    left: 12px;
  }
  .user-profile__name h4 {
    font-size: 20px;
  }
  .user-profile__controls {
    min-height: 48px;
  }
  .profile-socials__link {
    width: 32px;
    height: 32px;
  }
  .subscription-alert {
    margin: 12px;
    padding: 20px;
  }
  .subscription-paid {
    margin: 12px;
  }
}

@media (max-width: 380px) {
  .affiliates__header .icon__bg {
    width: 60px;
    height: 60px;
  }
  .affiliates__header .icon__bg svg {
    width: 26px;
    height: 26px;
  }
  .affiliates__header h4 {
    font-size: 17px;
  }
  .affiliates__body-midline {
    font-size: 13px;
    padding: 10px 12px;
  }
  .social-link-btn {
    width: 40px;
    height: 40px;
  }
  .user-profile__header-cover {
    height: 140px;
  }
  .profile-avatar {
    width: 72px;
    height: 72px;
  }
  .user-profile__header-avatar {
    bottom: -36px;
    left: 10px;
  }
  .user-profile__name h4 {
    font-size: 18px;
  }
  .common-follows__item {
    width: 28px;
    height: 28px;
  }
}