/* ═══════════════════════════════════════════════════════════
   ESSENCE COMPONENTS 2.0 — полная библиотека UI
   Зависит от: tokens.css + themes.css (подключены до)
   Никаких хардкодов цветов — только var(--...)
═══════════════════════════════════════════════════════════ */

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }

/* ── BODY ── */
/* body styling is in themes.css */

/* ══════════════════════════════════════════════════════════
   PAGE STRUCTURE
══════════════════════════════════════════════════════════ */

/* sidebar pill: left:8px + width:180px + 12px gap = 200px */
body .main {
  margin-left: 200px !important;
  min-height: 100vh;
  padding-top: 20px;
  position: relative;
  z-index: var(--z-content);
}
.main { padding-top: 20px; }

@media (max-width: 768px) {
  body .main { margin-left: 0 !important; padding-bottom: 74px; }
}

/* Nav-mode adaptations */
[data-nav="topbar"]        .main    { margin-left: 0 !important; }
[data-nav="topbar"]        .topbar  { left: 0; }
[data-nav="topbar"]        .topbar-toggle { display: none; }

[data-nav="sidebar-full"]  .main    { margin-left: var(--sidebar-w-expanded) !important; }
[data-nav="sidebar-full"]  .topbar  { left: var(--sidebar-w-expanded); }

@media (max-width: 768px) {
  [data-nav="topbar"]       .main { margin-left: 0 !important; }
  [data-nav="sidebar-full"] .main { margin-left: 0 !important; }
  [data-nav="sidebar-full"] .topbar { left: 0; }
}

.page-wrap {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-8) var(--sp-16);
}
.page-wrap.narrow { max-width: var(--content-narrow); }
.page-wrap.wide   { max-width: var(--content-wide); }

@media (max-width: 768px) {
  .page-wrap { padding: var(--sp-4) var(--sp-4) var(--sp-12); }
}

.page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page-hd-left  { display: flex; flex-direction: column; gap: var(--sp-1); }
.page-title    { font-size: var(--fs-2xl); font-weight: var(--fw-black); letter-spacing: -.5px; line-height: var(--lh-tight); }
.page-sub      { font-size: var(--fs-md); color: var(--t2); }
.page-actions  { display: flex; gap: var(--sp-2); flex-shrink: 0; align-items: center; flex-wrap: wrap; }

@media (max-width: 640px) {
  .page-hd { flex-direction: column; }
  .page-title { font-size: var(--fs-xl); }
}

/* ══════════════════════════════════════════════════════════
   SECTION BLOCKS
══════════════════════════════════════════════════════════ */

.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.section + .section { margin-top: var(--sp-4); }
.section-stack      { display: flex; flex-direction: column; gap: var(--sp-4); }

.section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: var(--sp-3);
}
.section-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-black);
  letter-spacing: -.2px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.section-title svg { width: 16px; height: 16px; stroke: var(--ac); fill: none; stroke-width: 2; }
.section-hd-actions { display: flex; gap: var(--sp-2); align-items: center; }

.section-body     { padding: var(--sp-5); }
.section-body.gap { display: flex; flex-direction: column; gap: var(--sp-4); }
.section-body.pad-0 { padding: 0; }

.section-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--border);
  background: var(--bg2);
}

/* ══════════════════════════════════════════════════════════
   ADMIN LAYOUT
══════════════════════════════════════════════════════════ */

.admin-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.admin-save-bar { display: flex; gap: var(--sp-2); }

.admin-tabs {
  display: flex;
  gap: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.admin-tab {
  flex: 1;
  padding: 9px var(--sp-4);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--t2);
  cursor: pointer;
  text-align: center;
  transition: var(--t-fast);
  border: none;
  background: none;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  text-decoration: none;
  white-space: nowrap;
}
.admin-tab:hover  { color: var(--text); }
.admin-tab.active { background: var(--bg2); color: var(--text); }
.admin-tab svg    { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  align-items: start;
}
@media (max-width: 900px) { .admin-grid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   DETAIL LAYOUT
══════════════════════════════════════════════════════════ */

.detail-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--sp-5);
  align-items: start;
}
.detail-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + var(--sp-6));
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.detail-content { min-width: 0; }

@media (max-width: 900px) {
  .detail-layout  { grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
}

/* Sidebar card (клан, профиль) */
.sidebar-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.sidebar-banner {
  height: 110px;
  background: var(--banner-1);
  position: relative;
  overflow: hidden;
}
.sidebar-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-avatar-wrap {
  position: absolute;
  bottom: -24px;
  left: var(--sp-4);
}
.sidebar-avatar {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  border: 3px solid var(--surface);
  overflow: hidden;
  background: var(--s2);
}
.sidebar-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sidebar-info    { padding: var(--sp-8) var(--sp-4) var(--sp-4); }
.sidebar-name    { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.sidebar-tag     { font-size: var(--fs-sm); color: var(--t2); margin-top: 2px; }
.sidebar-desc    { font-size: var(--fs-sm); color: var(--t2); margin-top: var(--sp-2); line-height: var(--lh-normal); }
.sidebar-stats   {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  border-top: 1px solid var(--border);
}
.sidebar-stat {
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-stat-label { font-size: 10px; font-weight: var(--fw-black); color: var(--t2); text-transform: uppercase; letter-spacing: .05em; }
.sidebar-stat-value { font-size: var(--fs-xl); font-weight: var(--fw-black); line-height: 1; }
.sidebar-actions {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}

/* ══════════════════════════════════════════════════════════
   PAGE TABS
══════════════════════════════════════════════════════════ */

.page-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-5);
  overflow-x: auto;
}
.page-tab {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-4);
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--t2); cursor: pointer;
  border: none; background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: inherit; transition: var(--t-fast);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}
.page-tab:hover  { color: var(--text); }
.page-tab.active { color: var(--ac); border-bottom-color: var(--ac); }
.page-tab svg    { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.tab-count {
  background: var(--border); color: var(--t2);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  padding: 1px 6px; border-radius: var(--r-full);
  min-width: 18px; text-align: center;
}
.tab-count.danger { background: var(--red); color: #fff; }

.sub-tabs {
  display: flex; gap: 2px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 3px;
  margin-bottom: var(--sp-4);
}
.sub-tab {
  flex: 1; padding: 7px var(--sp-3);
  border-radius: 6px;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--t2); cursor: pointer; text-align: center;
  transition: var(--t-fast); border: none; background: none;
  font-family: inherit; text-decoration: none; white-space: nowrap;
}
.sub-tab:hover  { color: var(--text); }
.sub-tab.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ══════════════════════════════════════════════════════════
   STAT STRIP
══════════════════════════════════════════════════════════ */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}
.stat-strip-item {
  padding: var(--sp-4) var(--sp-5);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--sp-1);
  transition: var(--t-fast);
}
.stat-strip-item:last-child { border-right: none; }
.stat-strip-item:hover      { background: var(--s2); }
.stat-strip-icon svg { width: 18px; height: 18px; stroke: var(--ac); fill: none; stroke-width: 2; }
.stat-strip-label    { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--t2); text-transform: uppercase; letter-spacing: .06em; }
.stat-strip-value    { font-size: var(--fs-3xl); font-weight: var(--fw-black); letter-spacing: -.5px; line-height: 1; }
.stat-strip-sub      { font-size: var(--fs-xs); color: var(--t2); }

@media (max-width: 768px) { .stat-strip { grid-template-columns: repeat(2, 1fr); } }

/* ══════════════════════════════════════════════════════════
   PODIUM (TOP-3)
══════════════════════════════════════════════════════════ */

.podium {
  display: flex; align-items: flex-end;
  justify-content: center; gap: var(--sp-3);
  padding: var(--sp-6) 0;
}
.podium-place { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.podium-place.p1 { order: 2; }
.podium-place.p2 { order: 1; }
.podium-place.p3 { order: 3; }
.podium-avatar { border-radius: 50%; border: 3px solid var(--border); object-fit: cover; }
.podium-place.p1 .podium-avatar { width: 80px; height: 80px; border-color: var(--color-gold); }
.podium-place.p2 .podium-avatar { width: 64px; height: 64px; border-color: #c0c0c0; }
.podium-place.p3 .podium-avatar { width: 56px; height: 56px; border-color: #cd7f32; }
.podium-num   { font-size: var(--fs-xl); font-weight: var(--fw-black); }
.podium-name  { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--t2); }
.podium-score { font-size: var(--fs-base); font-weight: var(--fw-black); color: var(--ac); }
.podium-base  {
  width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: var(--s2); border: 1px solid var(--border); border-bottom: none;
}
.podium-place.p1 .podium-base { height: 60px; }
.podium-place.p2 .podium-base { height: 44px; }
.podium-place.p3 .podium-base { height: 30px; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-family: inherit; font-size: var(--fs-base); font-weight: var(--fw-bold);
  cursor: pointer; border: none;
  transition: var(--t-fast);
  text-decoration: none; white-space: nowrap;
}
.btn:hover   { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active  { transform: none; filter: none; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn svg     { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

.btn-primary   { background: var(--ac); color: #fff; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--ac); filter: none; }
.btn-danger    { background: rgba(232,80,80,.12); color: var(--red); border: 1px solid rgba(232,80,80,.25); }
.btn-danger:hover { background: rgba(232,80,80,.2); filter: none; }
.btn-ghost     { background: transparent; color: var(--t2); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: var(--ac); filter: none; }
.btn-edit      { background: var(--acg); color: var(--ac); border: 1px solid var(--acb); }
.btn-success   { background: rgba(60,200,154,.12); color: var(--color-green); border: 1px solid rgba(60,200,154,.25); }
.btn-success:hover { background: rgba(60,200,154,.2); filter: none; }

.btn-sm { padding: 6px 12px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.btn-lg { padding: 12px 24px; font-size: var(--fs-md); border-radius: var(--r-md); }
.btn-w  { width: 100%; justify-content: center; }

.btn-icon {
  padding: 0; width: 34px; height: 34px;
  border-radius: var(--r-sm);
  justify-content: center;
}
.btn-icon.sm { width: 28px; height: 28px; border-radius: var(--r-xs); }

/* ══════════════════════════════════════════════════════════
   FORM CONTROLS
══════════════════════════════════════════════════════════ */

.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--t2); }
.form-hint  { font-size: var(--fs-sm); color: var(--t2); }
.req        { color: var(--red); }

.form-input {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  color: var(--text);
  font-family: inherit; font-size: var(--fs-md);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.form-input:focus {
  border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--acg);
}
.form-input::placeholder { color: var(--t2); opacity: .7; }
.form-input:disabled     { opacity: .5; cursor: not-allowed; }
textarea.form-input      { resize: vertical; min-height: 80px; line-height: var(--lh-normal); }
select.form-input        { cursor: pointer; }

.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-4); }
.span-full   { grid-column: 1 / -1; }
@media (max-width: 640px) { .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; } }

/* iOS toggle */
.toggle-row {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-3); padding: 4px 0;
}
.toggle-row-info  { display: flex; flex-direction: column; gap: 2px; }
.toggle-row-label { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.toggle-row-sub   { font-size: var(--fs-sm); color: var(--t2); }

.toggle { position: relative; width: 38px; height: 21px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track {
  position: absolute; inset: 0;
  background: var(--border); border-radius: var(--r-full);
  cursor: pointer; transition: var(--t-base);
}
.toggle input:checked + .toggle-track { background: var(--ac); }
.toggle-track::before {
  content: ''; position: absolute;
  left: 3px; top: 3px; width: 15px; height: 15px;
  border-radius: 50%; background: #fff;
  transition: var(--t-base); box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle input:checked + .toggle-track::before { transform: translateX(17px); }

/* Radio pair */
.radio-pair { display: flex; border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; }
.radio-pair-opt {
  flex: 1; padding: 8px var(--sp-4); text-align: center;
  font-size: var(--fs-base); font-weight: var(--fw-bold);
  color: var(--t2); cursor: pointer; transition: var(--t-fast);
  border: none; background: none; font-family: inherit;
  border-right: 1px solid var(--border);
}
.radio-pair-opt:last-child { border-right: none; }
.radio-pair-opt.active     { background: var(--acg); color: var(--ac); }

/* Radio items */
.radio-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.radio-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px var(--sp-4); border-radius: var(--r-sm);
  border: 1px solid var(--border); cursor: pointer; transition: var(--t-fast);
}
.radio-item:hover  { border-color: var(--acb); }
.radio-item.active { border-color: var(--acb); background: var(--acg); }
.radio-dot {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--border); transition: var(--t-fast);
  flex-shrink: 0; position: relative;
}
.radio-item.active .radio-dot { border-color: var(--ac); }
.radio-item.active .radio-dot::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ac);
}
.radio-text { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.radio-sub  { font-size: var(--fs-sm); color: var(--t2); }

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  position: relative; overflow: hidden;
}
.card-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-5) var(--sp-6) 0;
}
.card-title { font-size: var(--fs-md); font-weight: var(--fw-black); letter-spacing: -.3px; }
.card-body  { padding: var(--sp-5) var(--sp-6) var(--sp-6); }
.card-hd + .card-body { padding-top: var(--sp-4); }

.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: var(--t-base); position: relative; overflow: hidden;
}
.stat-card:hover { border-color: var(--ac); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-label { font-size: var(--fs-xs); font-weight: var(--fw-black); color: var(--t2); text-transform: uppercase; letter-spacing: .06em; }
.stat-num   { font-size: var(--fs-3xl); font-weight: var(--fw-black); margin-top: var(--sp-2); line-height: 1; }
.stat-icon  { margin-bottom: var(--sp-3); }
.stat-icon svg { width: 22px; height: 22px; stroke: var(--ac); fill: none; stroke-width: 2; }

.clan-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow: hidden;
  transition: var(--t-base); position: relative; cursor: pointer;
  text-decoration: none; display: block; color: inherit;
}
.clan-card:hover { border-color: var(--ac); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.clan-card-banner { height: 90px; background: var(--banner-1); position: relative; overflow: hidden; }
.clan-card-banner img { width: 100%; height: 100%; object-fit: cover; }
.clan-card-av {
  position: absolute; top: 68px; left: var(--sp-3);
  width: 40px; height: 40px;
  border-radius: var(--r-sm); border: 3px solid var(--surface);
  overflow: hidden; background: var(--s2); z-index: 1;
}
.clan-card-av img { width: 100%; height: 100%; object-fit: cover; }
.clan-card-body  { padding: var(--sp-5) var(--sp-3) var(--sp-3); padding-left: 60px; margin-top: var(--sp-2); }
.clan-card-name  { font-size: var(--fs-base); font-weight: var(--fw-black); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.clan-card-tag   { font-size: var(--fs-xs); color: var(--t2); font-weight: var(--fw-bold); margin-bottom: var(--sp-2); }
.clan-card-stats { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.clan-card-stat  { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--t2); }
.clan-card-stat svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */

.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead tr { border-bottom: 1px solid var(--border); }
.tbl th {
  padding: 10px var(--sp-4);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--t2); text-align: left; white-space: nowrap;
}
.tbl td {
  padding: 12px var(--sp-4);
  font-size: var(--fs-base);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover          { background: var(--s2); }
.tbl-num     { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); }
.tbl-center  { text-align: center; }
.tbl-actions { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; }

.perm-check svg, .perm-cross svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.perm-check { color: var(--color-green); }
.perm-cross { color: var(--t3); }

/* ══════════════════════════════════════════════════════════
   FILTERS & SEARCH
══════════════════════════════════════════════════════════ */

.filters-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.filter-chip {
  padding: 6px var(--sp-3);
  border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--t2); font-size: var(--fs-sm); font-weight: var(--fw-bold);
  cursor: pointer; transition: var(--t-fast); white-space: nowrap; font-family: inherit;
}
.filter-chip:hover  { border-color: var(--ac); color: var(--text); }
.filter-chip.active { background: var(--acg); border-color: var(--acb); color: var(--ac); }

.search-bar {
  display: flex; align-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 0 var(--sp-4);
  transition: var(--t-fast); flex: 1; max-width: 340px;
}
.search-bar:focus-within { border-color: var(--ac); box-shadow: 0 0 0 3px var(--ac3); }
.search-bar svg { width: 15px; height: 15px; stroke: var(--t2); fill: none; stroke-width: 2; flex-shrink: 0; }
.search-bar input {
  background: none; border: none; outline: none;
  font-size: var(--fs-base); color: var(--text);
  font-family: inherit; width: 100%; padding: 10px 0;
}
.search-bar input::placeholder { color: var(--t2); opacity: .7; }

/* ══════════════════════════════════════════════════════════
   PAGINATION
══════════════════════════════════════════════════════════ */

.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-1); padding: var(--sp-5) 0 0;
}
.pag-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--t2); font-size: var(--fs-base); font-weight: var(--fw-bold);
  cursor: pointer; transition: var(--t-fast);
  display: flex; align-items: center; justify-content: center; font-family: inherit;
}
.pag-btn:hover     { border-color: var(--ac); color: var(--text); }
.pag-btn.active    { background: var(--ac); border-color: var(--ac); color: #fff; }
.pag-btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.pag-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; }

/* ══════════════════════════════════════════════════════════
   BADGES & AVATARS
══════════════════════════════════════════════════════════ */

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--r-full);
  font-size: var(--fs-xs); font-weight: var(--fw-black);
}
.badge-ac      { background: var(--acg);               border: 1px solid var(--acb);               color: var(--ac); }
.badge-red     { background: rgba(232,80,80,.12);       border: 1px solid rgba(232,80,80,.25);       color: var(--red); }
.badge-yellow  { background: rgba(232,200,72,.12);      border: 1px solid rgba(232,200,72,.25);      color: var(--yellow); }
.badge-purple  { background: rgba(168,85,247,.12);      border: 1px solid rgba(168,85,247,.3);       color: var(--purple); }
.badge-green   { background: rgba(60,200,154,.12);      border: 1px solid rgba(60,200,154,.25);      color: var(--color-green); }
.badge-admin   { background: rgba(168,85,247,.12);      border: 1px solid rgba(168,85,247,.3);       color: var(--purple); }
.badge-mod     { background: rgba(60,200,154,.12);      border: 1px solid rgba(60,200,154,.25);      color: var(--color-green); }
.badge-premium { background: rgba(212,160,18,.12);      border: 1px solid rgba(212,160,18,.25);      color: var(--yellow); }

.av-wrap { position: relative; display: inline-block; flex-shrink: 0; }
.av      { border-radius: 50%; object-fit: cover; display: block; }
.av-sm   { width: 28px; height: 28px; }
.av-md   { width: 40px; height: 40px; }
.av-lg   { width: 64px; height: 64px; }
.av-xl   { width: 96px; height: 96px; }
.av-sq   { border-radius: var(--r-sm); }
.av-status { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--bg); }
.av-online  { background: var(--color-green); }
.av-afk     { background: var(--yellow); }
.av-dnd     { background: var(--red); }
.av-offline { background: var(--t2); opacity: .5; }

/* ══════════════════════════════════════════════════════════
   ALERTS & EMPTY STATES
══════════════════════════════════════════════════════════ */

.alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm);
  font-size: var(--fs-base); font-weight: var(--fw-semi); line-height: var(--lh-normal);
}
.alert svg  { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }
.alert-ok   { background: rgba(60,200,154,.1);  border: 1px solid rgba(60,200,154,.25); color: var(--color-green); }
.alert-err  { background: rgba(232,80,80,.1);   border: 1px solid rgba(232,80,80,.25);  color: var(--red); }
.alert-warn { background: rgba(232,200,72,.1);  border: 1px solid rgba(232,200,72,.25); color: var(--yellow); }
.alert-info { background: var(--acg);           border: 1px solid var(--acb);           color: var(--ac); }

.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-3); padding: 60px var(--sp-5); text-align: center;
}
.empty-icon {
  width: 64px; height: 64px; border-radius: var(--r-xl);
  background: var(--acg); border: 1px solid var(--acb);
  display: flex; align-items: center; justify-content: center;
  animation: _empty-float 2.8s ease-in-out infinite;
}
@keyframes _empty-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-7px); }
}
.empty-icon svg { width: 28px; height: 28px; stroke: var(--ac); fill: none; stroke-width: 2; }
.empty-title    { font-size: var(--fs-lg); font-weight: var(--fw-black); }
.empty-sub      { font-size: var(--fs-base); color: var(--t2); max-width: 280px; line-height: var(--lh-normal); }

/* ══════════════════════════════════════════════════════════
   ERROR PAGE (404 / 403 / 500)
══════════════════════════════════════════════════════════ */

.error-page {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-height: 60vh; gap: var(--sp-4);
  text-align: center; padding: var(--sp-8);
}
.error-code    { font-size: 96px; font-weight: var(--fw-black); color: var(--border); letter-spacing: -4px; line-height: 1; }
.error-title   { font-size: var(--fs-xl); font-weight: var(--fw-black); }
.error-sub     { font-size: var(--fs-md); color: var(--t2); max-width: 340px; line-height: var(--lh-normal); }
.error-actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; justify-content: center; }

/* ══════════════════════════════════════════════════════════
   PROGRESS & XP
══════════════════════════════════════════════════════════ */

.xp-bar-wrap { background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-full); height: 8px; overflow: hidden; }
.xp-bar      { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--ac), var(--purple)); transition: width .8s cubic-bezier(.16,1,.3,1); }

/* ══════════════════════════════════════════════════════════
   SKELETON & ANIMATIONS
══════════════════════════════════════════════════════════ */

/* Keyframes (shimmer, pagein, apdrop, online-ping) are defined in themes.css, not repeated here */
.skel {
  background: linear-gradient(90deg, var(--border) 25%, var(--s2) 50%, var(--border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
}

/* Reveal */
.e-reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1); }
.e-reveal.e-visible { opacity: 1; transform: translateY(0); }

/* Spotlight */
.stat-card, .clan-card { --sx: 50%; --sy: 50%; }
.stat-card::before, .clan-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(260px circle at var(--sx) var(--sy), rgba(255,255,255,.055), transparent 60%);
  opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 0;
}
.stat-card:hover::before, .clan-card:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   SEPARATOR & MISC
══════════════════════════════════════════════════════════ */

.sep    { height: 1px; background: var(--border); }
.sep.my { margin: var(--sp-4) 0; }

/* ══════════════════════════════════════════════════════════
   GLASS STYLE OVERRIDES
══════════════════════════════════════════════════════════ */

[data-style="glass"] .section,
[data-style="glass"] .card,
[data-style="glass"] .stat-card,
[data-style="glass"] .clan-card,
[data-style="glass"] .sidebar-card {
  background: rgba(255,255,255,.05) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-color: rgba(255,255,255,.1) !important;
}

/* ══════════════════════════════════════════════════════════
   SCROLLBAR (defined in themes.css)
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════════════════════ */

.text-ac      { color: var(--ac); }
.text-muted   { color: var(--t2); }
.text-red     { color: var(--red); }
.text-green   { color: var(--color-green); }
.text-yellow  { color: var(--yellow); }
.fw-bold      { font-weight: var(--fw-bold); }
.fw-black     { font-weight: var(--fw-black); }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.min-w-0      { min-width: 0; }
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-2        { gap: var(--sp-2); }
.gap-3        { gap: var(--sp-3); }
.gap-4        { gap: var(--sp-4); }

/* ══════════════════════════════════════════════════════════
   APP PANEL POSITIONING
══════════════════════════════════════════════════════════ */

/* App panel position (was inline in _base.html) */
.app-panel {
  position: fixed;
  left: calc(var(--sidebar-w) + 8px);
  bottom: 16px;
  top: auto;
  z-index: var(--z-dropdown);
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .hide-mobile  { display: none !important; }
  .admin-grid   { grid-template-columns: 1fr; }
  .detail-layout{ grid-template-columns: 1fr; }
  .detail-sidebar { position: static; }
}
@media (min-width: 769px) {
  .hide-desktop { display: none !important; }
}

/* ══════════════════════════════════════════════════════════
   ── PORTAL ──
══════════════════════════════════════════════════════════ */

/* Banner carousel */
.banner{position:relative;overflow:hidden;border-radius:var(--r-lg);margin-bottom:var(--sp-6);height:220px;}
.banner-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);height:100%;}
.banner-slide{min-width:100%;display:flex;align-items:center;padding:36px 40px;position:relative;overflow:hidden;}
.banner-content{position:relative;z-index:1;max-width:520px;}
.banner-tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--r-full);font-size:11px;font-weight:var(--fw-black);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.banner-title{font-size:28px;font-weight:var(--fw-black);letter-spacing:-.5px;margin-bottom:8px;line-height:1.1;}
.banner-desc{font-size:14px;opacity:.8;line-height:1.5;margin-bottom:18px;}
.banner-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:var(--r-sm);font-size:13px;font-weight:var(--fw-bold);text-decoration:none;transition:var(--t-fast);}
.banner-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.banner-arr{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);backdrop-filter:blur(4px);border:none;border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2;transition:var(--t-fast);}
.banner-arr:hover{background:rgba(0,0,0,.6);}
.banner-arr svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;}
.banner-arr-left{left:12px;}
.banner-arr-right{right:12px;}
.banner-dots{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:5px;z-index:2;}
.banner-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);cursor:pointer;transition:var(--t-base);}
.banner-dot.on{background:#fff;width:20px;border-radius:3px;}

/* Stat-strip color variants */
.stat-strip-item.color-g .stat-strip-value{color:var(--color-green);}
.stat-strip-item.color-b .stat-strip-value{color:var(--ac);}
.stat-strip-item.color-p .stat-strip-value{color:var(--purple);}
.stat-strip-item.color-y .stat-strip-value{color:var(--yellow);}

/* Top members */
.top-member{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);text-decoration:none;color:inherit;transition:var(--t-fast);}
.top-member:hover{border-color:var(--ac);background:var(--surface);}
.top-rank{font-size:20px;width:28px;text-align:center;flex-shrink:0;}
.top-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--border);}
.top-av img{width:100%;height:100%;object-fit:cover;}
.top-info{flex:1;min-width:0;}
.top-name{font-size:var(--fs-base);font-weight:var(--fw-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.top-sub{font-size:var(--fs-xs);color:var(--t2);}
.top-bal{font-size:var(--fs-base);font-weight:var(--fw-black);color:var(--yellow);flex-shrink:0;}

/* Member search */
.msearch-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;}
.msearch-row{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);}
.msearch-row svg{width:16px;height:16px;stroke:var(--t2);fill:none;stroke-width:2;flex-shrink:0;}
.msearch-input{flex:1;background:none;border:none;outline:none;font-size:var(--fs-md);color:var(--text);font-family:inherit;}
.msearch-input::placeholder{color:var(--t2);}
.msearch-results{padding:8px;}
.msearch-card{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:var(--r-sm);text-decoration:none;color:inherit;transition:var(--t-fast);}
.msearch-card:hover{background:var(--s2);}
.msearch-card img{width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.msearch-card-name{font-size:var(--fs-base);font-weight:var(--fw-bold);}
.msearch-card-tag{font-size:var(--fs-xs);color:var(--t2);}

/* News feed */
.news-card{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);}
.news-card:last-child{border-bottom:none;}
.news-type-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px;}
.dot-info{background:var(--ac);}
.dot-event{background:var(--purple);}
.dot-update{background:var(--color-green);}
.dot-warning{background:var(--red);}
.news-body{flex:1;min-width:0;}
.news-title{font-size:var(--fs-base);font-weight:var(--fw-bold);margin-bottom:4px;display:flex;align-items:center;gap:6px;}
.news-content{font-size:var(--fs-sm);color:var(--t2);line-height:var(--lh-normal);margin-bottom:6px;}
.news-meta{display:flex;align-items:center;gap:8px;font-size:var(--fs-xs);color:var(--t2);}
.news-type-badge{padding:2px 8px;border-radius:var(--r-full);font-size:10px;font-weight:var(--fw-black);}
.nbadge-info{background:var(--acg);color:var(--ac);}
.nbadge-event{background:rgba(168,85,247,.12);color:var(--purple);}
.nbadge-update{background:rgba(60,200,154,.12);color:var(--color-green);}
.nbadge-warning{background:rgba(232,80,80,.12);color:var(--red);}
.news-pinned-ico{color:var(--ac);}

/* Reviews */
.reviews-header{display:flex;align-items:center;gap:20px;padding:16px 0;margin-bottom:16px;border-bottom:1px solid var(--border);flex-wrap:wrap;}
.rev-score-block{display:flex;align-items:center;gap:12px;flex-shrink:0;}
.rev-avg{font-size:40px;font-weight:var(--fw-black);letter-spacing:-1px;}
.rev-stars-row{display:flex;gap:2px;margin-bottom:4px;}
.rev-star{font-size:16px;color:var(--yellow);}
.rev-star.empty{opacity:.25;}
.rev-total{font-size:var(--fs-sm);color:var(--t2);}
.rev-header-sep{width:1px;height:48px;background:var(--border);}
.rev-header-text{flex:1;min-width:160px;}
.rev-header-title{font-size:var(--fs-md);font-weight:var(--fw-black);margin-bottom:4px;}
.rev-header-sub{font-size:var(--fs-sm);color:var(--t2);}
.rev-write-btn{display:flex;align-items:center;gap:7px;padding:9px 18px;border-radius:var(--r-sm);background:var(--ac);color:#fff;font-size:var(--fs-base);font-weight:var(--fw-bold);border:none;cursor:pointer;transition:var(--t-fast);font-family:inherit;margin-left:auto;flex-shrink:0;}
.rev-write-btn:hover{filter:brightness(1.1);}
.rev-write-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:16px;}
.rev-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:16px;display:flex;flex-direction:column;gap:10px;}
.rev-card-head{display:flex;align-items:center;gap:10px;}
.rev-card-av{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--border);}
.rev-card-av img{width:100%;height:100%;object-fit:cover;}
.rev-card-name{font-size:var(--fs-base);font-weight:var(--fw-bold);}
.rev-card-date{font-size:var(--fs-xs);color:var(--t2);}
.rev-card-stars{display:flex;gap:2px;}
.rev-card-star{font-size:14px;color:var(--yellow);}
.rev-card-star.empty{opacity:.25;}
.rev-card-text{font-size:var(--fs-sm);color:var(--t2);line-height:var(--lh-normal);}
.rev-card-footer{display:flex;align-items:center;gap:8px;margin-top:auto;}
.rev-like-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--r-xs);border:1px solid var(--border);background:none;color:var(--t2);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:var(--t-fast);font-family:inherit;}
.rev-like-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.rev-like-btn.liked{color:var(--red);border-color:rgba(232,80,80,.3);}
.rev-like-btn.liked svg{fill:currentColor;}
.rev-del-btn{display:flex;align-items:center;padding:5px 8px;border-radius:var(--r-xs);border:1px solid transparent;background:none;color:var(--t2);cursor:pointer;transition:var(--t-fast);font-family:inherit;margin-left:auto;}
.rev-del-btn:hover{color:var(--red);border-color:rgba(232,80,80,.25);}
.rev-del-btn svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.rev-empty{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--t2);}
.rev-empty svg{stroke:currentColor;fill:none;opacity:.4;}
.rev-empty-text{font-size:var(--fs-base);font-weight:var(--fw-bold);}
.rev-pagination{display:flex;align-items:center;justify-content:center;gap:4px;}
.rev-page-btn{width:32px;height:32px;border-radius:var(--r-xs);border:1px solid var(--border);background:var(--surface);color:var(--t2);font-size:var(--fs-base);font-weight:var(--fw-bold);cursor:pointer;transition:var(--t-fast);font-family:inherit;}
.rev-page-btn:hover{border-color:var(--ac);color:var(--text);}
.rev-page-btn.on{background:var(--ac);border-color:var(--ac);color:#fff;}

/* Review modal */
.rev-modal-bg{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:var(--z-modal);padding:20px;}
.rev-modal-bg.open{display:flex;animation:pagein .2s ease;}
.rev-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:28px;width:400px;max-width:100%;}
.rev-modal-title{font-size:18px;font-weight:var(--fw-black);margin-bottom:4px;}
.rev-modal-sub{font-size:var(--fs-sm);color:var(--t2);margin-bottom:20px;}
.rev-modal-star-label{font-size:var(--fs-base);font-weight:var(--fw-bold);margin-bottom:10px;}
.rev-modal-stars{display:flex;gap:8px;margin-bottom:18px;}
.rev-modal-star{width:36px;height:36px;cursor:pointer;color:var(--border);transition:color var(--t-fast);}
.rev-modal-star.sel{color:var(--yellow);}
.rev-modal-star svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;}
.rev-modal-star.sel svg{fill:currentColor;}
.rev-textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 13px;color:var(--text);font-family:inherit;font-size:var(--fs-md);outline:none;resize:vertical;margin-bottom:10px;}
.rev-textarea:focus{border-color:var(--ac);}
.rev-modal-footer{display:flex;align-items:center;justify-content:space-between;}
.rev-char-count{font-size:var(--fs-sm);color:var(--t2);}
.rev-submit-btn{padding:9px 22px;border-radius:var(--r-sm);background:var(--ac);color:#fff;font-size:var(--fs-base);font-weight:var(--fw-bold);border:none;cursor:pointer;transition:var(--t-fast);font-family:inherit;}
.rev-submit-btn:hover{filter:brightness(1.1);}
.rev-submit-btn:disabled{opacity:.5;cursor:not-allowed;}

/* Portal two-column layout */
.portal-cols{display:grid;grid-template-columns:1fr 340px;gap:var(--sp-5);align-items:start;}
.portal-col-left{display:flex;flex-direction:column;gap:var(--sp-5);}
.portal-col-right{display:flex;flex-direction:column;gap:var(--sp-4);}
@media(max-width:900px){.portal-cols{grid-template-columns:1fr;}}

/* ══════════════════════════════════════════════════════════
   ── FAQ ──
══════════════════════════════════════════════════════════ */

/* Hero search bar */
.faq-hero{padding:48px 32px 36px;text-align:center;position:relative;z-index:1;}
.faq-hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:20px;background:var(--acg);border:1px solid var(--acb);color:var(--ac);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:20px;}
.faq-hero-badge svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.faq-hero-title{font-size:40px;font-weight:900;letter-spacing:-1px;line-height:1.1;margin-bottom:12px;}
.faq-hero-sub{font-size:15px;color:var(--t2);font-weight:500;max-width:480px;margin:0 auto 28px;line-height:1.6;}
.hero-search{max-width:540px;margin:0 auto;position:relative;}
.hero-search-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 20px 15px 50px;color:var(--text);font-family:inherit;font-size:15px;font-weight:500;outline:none;transition:.2s;box-shadow:0 8px 32px rgba(0,0,0,.3);}
.hero-search-input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acg),0 8px 32px rgba(0,0,0,.3);}
.hero-search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--t2);}
.hero-search-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;}
.search-kbd{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;color:var(--t2);background:var(--s2);border:1px solid var(--border);border-radius:5px;padding:2px 7px;pointer-events:none;letter-spacing:.02em;transition:opacity .15s;}
.hero-search-input:focus~.search-kbd{opacity:0;}

/* FAQ layout */
.faq-layout{display:grid;grid-template-columns:260px 1fr;gap:0;max-width:1200px;margin:0 auto;padding:0 32px 80px;position:relative;z-index:1;}
@media(max-width:800px){.faq-layout{grid-template-columns:1fr;}}
@media(max-width:640px){.faq-hero{padding:24px 16px 28px;}.faq-layout{padding:0 16px 60px;}}

/* FAQ sidebar nav */
.faq-nav{padding:20px 16px 40px;position:sticky;top:80px;height:fit-content;background:var(--bg2);border:1px solid var(--border);border-radius:16px;margin-right:24px;}
.cat-group{margin-bottom:6px;}
.cat-label{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.15em;padding:16px 12px 6px;}
.cat-btn{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:700;color:var(--t2);transition:.15s;border:1px solid transparent;}
.cat-btn:hover{background:var(--surface);color:var(--text);}
.cat-btn.on{background:var(--acg);color:var(--ac);border-color:var(--acb);}
.cat-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.cat-count{margin-left:auto;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;background:var(--s2);color:var(--t2);}
.cat-btn.on .cat-count{background:var(--acg);color:var(--ac);}

/* FAQ content area */
.faq-content{min-width:0;padding-left:8px;}
.cat-overview{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px;}
@media(max-width:600px){.cat-overview{grid-template-columns:1fr;}}
.cat-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:22px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;}
.cat-card::before{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--ac),transparent);opacity:0;transition:opacity .2s;pointer-events:none;}
.cat-card:hover::before{opacity:.6;}
.cat-card:hover{border-color:var(--ac);transform:translateY(-2px);background:var(--s2);}
.cat-card-icon{width:42px;height:42px;border-radius:12px;background:var(--acg);display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.cat-card-icon svg{width:20px;height:20px;stroke:var(--ac);fill:none;stroke-width:2;}
.cat-card-title{font-size:15px;font-weight:800;margin-bottom:5px;}
.cat-card-count{font-size:12px;color:var(--t2);font-weight:600;}

/* Article list */
.article-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.article-item{display:flex;align-items:center;gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;cursor:pointer;transition:.2s;}
.article-item:hover{border-color:var(--ac);background:var(--s2);}
.article-item-icon{width:36px;height:36px;border-radius:10px;background:var(--acg);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.article-item-icon svg{width:16px;height:16px;stroke:var(--ac);fill:none;stroke-width:2;}
.article-item-title{font-size:14px;font-weight:700;flex:1;}
.article-item-arrow{color:var(--t2);flex-shrink:0;}
.article-item-arrow svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}

/* Article reader */
.article-reader{display:none;}
.article-reader.open{display:block;}
.article-back{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--t2);cursor:pointer;font-size:13px;font-weight:700;margin-bottom:24px;transition:.15s;}
.article-back:hover{border-color:var(--ac);color:var(--ac);}
.article-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.article-hero{margin-bottom:28px;}
.article-cat-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:var(--acg);color:var(--ac);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;}
.article-title{font-size:32px;font-weight:900;letter-spacing:-.5px;line-height:1.1;margin-bottom:10px;}
.article-meta{font-size:13px;color:var(--t2);font-weight:500;}
.article-body{font-size:15px;line-height:1.8;color:var(--text);}
.article-body h2{font-size:20px;font-weight:800;margin:28px 0 12px;color:var(--text);}
.article-body h3{font-size:16px;font-weight:800;margin:22px 0 10px;color:var(--t2);}
.article-body p{margin-bottom:14px;color:var(--t2);}
.article-body ul,.article-body ol{margin:10px 0 14px 22px;}
.article-body li{margin-bottom:6px;color:var(--t2);}
.article-body strong{color:var(--text);font-weight:700;}
.article-body a{color:var(--ac);text-decoration:none;font-weight:600;}
.article-body a:hover{text-decoration:underline;}
.article-body blockquote{margin:16px 0;padding:14px 20px;background:var(--acg);border-left:3px solid var(--ac);border-radius:0 10px 10px 0;color:var(--t2);font-style:italic;}
.article-body code{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:2px 7px;font-family:monospace;font-size:13px;color:var(--ac);}
.article-body hr{border:none;border-top:1px solid var(--border);margin:24px 0;}

/* FAQ admin panel */
.faq-admin-panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px;}
.faq-admin-panel-title{font-size:13px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px;}
.faq-field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.faq-field label{font-size:12px;font-weight:700;color:var(--t2);}
.faq-field input,.faq-field textarea,.faq-field select{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:10px 13px;color:var(--text);font-family:inherit;font-size:13px;outline:none;transition:.15s;width:100%;}
.faq-field input:focus,.faq-field textarea:focus,.faq-field select:focus{border-color:var(--ac);}
.faq-field textarea{resize:vertical;min-height:100px;}
.faq-btn-row{display:flex;gap:8px;flex-wrap:wrap;}

/* Search results */
.search-results{margin-bottom:24px;}
.search-results-title{font-size:13px;font-weight:700;color:var(--t2);margin-bottom:12px;}
.no-results{text-align:center;padding:48px 20px;color:var(--t2);font-size:15px;font-weight:600;}

/* Breadcrumbs */
.breadcrumbs{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:var(--t2);margin-bottom:20px;flex-wrap:wrap;}
.breadcrumbs .bc-link{cursor:pointer;transition:.12s;}
.breadcrumbs .bc-link:hover{color:var(--ac);}
.breadcrumbs .bc-sep{color:var(--t2);font-size:11px;}
.breadcrumbs .bc-cur{color:var(--text);cursor:default;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
mark{background:var(--acg);color:var(--ac);border-radius:3px;padding:0 2px;font-weight:700;}

/* Staggered reveal animations */
@keyframes sreveal{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.cat-overview .cat-card{animation:sreveal .45s cubic-bezier(.22,1,.36,1) both;}
.cat-overview .cat-card:nth-child(1){animation-delay:.06s;}
.cat-overview .cat-card:nth-child(2){animation-delay:.11s;}
.cat-overview .cat-card:nth-child(3){animation-delay:.16s;}
.cat-overview .cat-card:nth-child(4){animation-delay:.21s;}
.article-list .article-item{animation:sreveal .35s cubic-bezier(.22,1,.36,1) both;}
.article-list .article-item:nth-child(1){animation-delay:.04s;}
.article-list .article-item:nth-child(2){animation-delay:.08s;}
.article-list .article-item:nth-child(3){animation-delay:.12s;}
.article-list .article-item:nth-child(4){animation-delay:.16s;}
.article-list .article-item:nth-child(5){animation-delay:.2s;}
.btn:active,.article-back:active{transform:scale(.96) translateY(1px) !important;}
.cat-btn:active{transform:scale(.97) !important;}
.article-item:active,.cat-card:active{transform:scale(.985) translateY(0) !important;}

/* FAQ glass overrides */
[data-style="glass"] .cat-card{background:rgba(255,255,255,.06);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.1);animation:none !important;}
[data-style="glass"] .article-item{background:rgba(255,255,255,.05);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:rgba(255,255,255,.09);animation:none !important;}
[data-style="glass"] .faq-nav{background:rgba(255,255,255,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.09);}

/* ══════════════════════════════════════════════════════════
   ── TICKETS ──
══════════════════════════════════════════════════════════ */

/* Guest block */
.guest-block{text-align:center;padding:80px 24px;}
.guest-icon{width:80px;height:80px;border-radius:20px;background:var(--acg);border:1px solid var(--acb);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;}
.guest-icon svg{width:40px;height:40px;stroke:var(--ac);fill:none;stroke-width:1.5;}
.guest-title{font-size:26px;font-weight:900;margin-bottom:8px;}
.guest-sub{font-size:15px;color:var(--t2);margin-bottom:28px;line-height:1.6;}
.btn-discord{display:inline-flex;align-items:center;justify-content:center;gap:11px;padding:14px 28px;border-radius:12px;background:#5865f2;color:#fff;text-decoration:none;font-size:14px;font-weight:700;transition:.2s;}
.btn-discord:hover{filter:brightness(1.1);transform:translateY(-1px);}

/* Ticket page header */
.ticket-page-hd{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;gap:16px;flex-wrap:wrap;}
.ticket-page-title{font-size:28px;font-weight:900;letter-spacing:-.5px;position:relative;z-index:1;}
.ticket-page-title span{background:linear-gradient(135deg,var(--ac),var(--purple));-webkit-background-clip:text;background-clip:text;color:transparent;}
.create-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border-radius:10px;background:linear-gradient(135deg,var(--ac),var(--purple));color:#fff;font-family:inherit;font-size:13px;font-weight:800;border:none;cursor:pointer;transition:.2s;box-shadow:0 4px 16px var(--acg);position:relative;z-index:1;}
.create-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.create-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.5;}

/* Floating decorations */
@keyframes ph-float-a{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes ph-float-b{0%,100%{transform:translateY(0) rotate(12deg)}50%{transform:translateY(-6px) rotate(20deg)}}
@keyframes ph-float-c{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}50%{transform:translateY(-11px) rotate(-5deg) scale(1.06)}}
.ph-deco{position:absolute;pointer-events:none;opacity:.11;color:var(--ac);}
.ph-deco svg{display:block;stroke:currentColor;fill:none;stroke-width:1.5;}
.ph-deco-1{right:260px;top:-12px;animation:ph-float-a 5.2s ease-in-out infinite;}
.ph-deco-2{right:160px;top:8px;animation:ph-float-b 4.4s ease-in-out infinite 1.1s;}
.ph-deco-3{right:360px;top:2px;animation:ph-float-c 6s ease-in-out infinite 0.5s;}
@media(max-width:700px){.ph-deco{display:none;}}

/* Filter tabs */
.filter-row{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap;align-items:center;}
.ftab{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--border);color:var(--t2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;}
.ftab:hover{border-color:var(--ac);color:var(--text);}
.ftab.on{background:var(--acg);border-color:var(--acb);color:var(--ac);}
.ftab svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;flex-shrink:0;}
.ftab-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;padding:0 4px;background:var(--ac);color:#fff;font-size:9px;font-weight:900;margin-left:2px;}
@media(max-width:640px){.filter-row{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;}.filter-row::-webkit-scrollbar{display:none;}}

/* Ticket cards */
.ticket-list{display:flex;flex-direction:column;gap:8px;}
.ticket-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 20px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:16px;}
.ticket-card:hover{border-color:var(--ac);transform:translateY(-1px);}
.ticket-card.answered{border-left:3px solid var(--ac);}
.tc-icon{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.tc-icon svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8;}
.tc-icon.open{background:rgba(110,95,248,.12);color:var(--ac);}
.tc-icon.answered{background:rgba(40,232,168,.12);color:#28e8a8;}
.tc-icon.closed{background:var(--s2);color:var(--t2);}
.tc-icon.snoozed{background:rgba(232,188,80,.12);color:var(--yellow);}
.tc-body{flex:1;min-width:0;}
.tc-subject{font-size:14px;font-weight:800;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tc-meta{font-size:12px;color:var(--t2);display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;}
.tc-category{padding:2px 8px;border-radius:10px;background:var(--s2);font-size:10px;font-weight:700;}
.tc-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0;}
.tc-status{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;}
.tc-status.open{background:rgba(110,95,248,.12);color:var(--ac);}
.tc-status.answered{background:rgba(40,232,168,.12);color:#28e8a8;}
.tc-status.closed{background:var(--s2);color:var(--t2);}
.tc-status.snoozed{background:rgba(232,188,80,.12);color:var(--yellow);}
.tc-time{font-size:11px;color:var(--t2);}

/* Admin banner */
.admin-banner{background:var(--acg);border:1px solid var(--acb);border-radius:14px;padding:14px 20px;margin-bottom:20px;display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;}
.admin-banner svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;color:var(--ac);flex-shrink:0;}

/* Detail view */
.detail-back{display:flex;align-items:center;gap:8px;color:var(--t2);font-size:13px;font-weight:700;cursor:pointer;margin-bottom:16px;width:fit-content;transition:.15s;}
.detail-back:hover{color:var(--text);}
.detail-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.ticket-detail-layout{display:grid;grid-template-columns:1fr 290px;gap:16px;align-items:start;}
@media(max-width:900px){.ticket-detail-layout{grid-template-columns:1fr;}}
.detail-main{border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;}
.detail-header{background:var(--surface);padding:20px 24px 16px;border-bottom:1px solid var(--border);}
.detail-subject{font-size:20px;font-weight:900;margin-bottom:10px;}
.detail-infobar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--t2);}
.d-badge{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;}
.d-badge.open{background:rgba(110,95,248,.12);color:var(--ac);}
.d-badge.answered{background:rgba(40,232,168,.12);color:#28e8a8;}
.d-badge.closed{background:var(--s2);color:var(--t2);}
.d-badge.snoozed{background:rgba(232,188,80,.12);color:var(--yellow);}
.detail-actions{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0;}
.action-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap;}
.action-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;flex-shrink:0;}
.action-btn:hover{border-color:var(--ac);color:var(--ac);}
.action-btn.danger{color:var(--red);border-color:rgba(240,72,120,.22);}
.action-btn.danger:hover{background:rgba(240,72,120,.08);}
.action-btn.success{color:#28e8a8;border-color:rgba(40,232,168,.22);}
.action-btn.success:hover{background:rgba(40,232,168,.08);}
.action-btn.warn{color:var(--yellow);border-color:rgba(232,188,80,.22);}
.action-btn.warn:hover{background:rgba(232,188,80,.08);}

/* Snooze popover */
.snooze-wrap{position:relative;}
.snooze-menu{position:absolute;top:calc(100% + 6px);left:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px;min-width:168px;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:300;display:none;}
.snooze-menu.open{display:block;animation:apdrop .15s ease;}
.snooze-opt{padding:7px 12px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:.1s;display:block;}
.snooze-opt:hover{background:var(--s2);color:var(--ac);}
.snooze-custom{display:flex;gap:5px;padding:7px 6px 4px;border-top:1px solid var(--border);margin-top:4px;}
.snooze-custom input{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:7px;padding:5px 8px;color:var(--text);font-family:inherit;font-size:12px;outline:none;min-width:0;}
.snooze-custom input:focus{border-color:var(--ac);}
.snooze-custom button{padding:5px 10px;border-radius:7px;background:var(--ac);border:none;color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}

/* Chat */
.chat-wrap{background:var(--bg);overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:10px;max-height:74vh;min-height:300px;}
.chat-wrap.drag-over{background:var(--s2);outline:2px dashed var(--ac);outline-offset:-6px;}
.msg-row{display:flex;align-items:flex-end;gap:8px;}
.msg-row.theirs{align-self:flex-start;max-width:76%;}
.msg-row.mine{align-self:flex-end;max-width:76%;}
.msg-row.system{align-self:center;max-width:100%;}
.msg-av{width:27px;height:27px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#fff;flex-shrink:0;}
.msg{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;}
.msg-row.mine .msg{align-items:flex-end;}
.msg-row.theirs .msg{align-items:flex-start;}
.msg-author{font-size:11px;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:5px;padding:0 2px;}
.msg-admin-badge{padding:1px 6px;border-radius:6px;background:var(--acg);color:var(--ac);font-size:9px;font-weight:900;}
.msg-bubble{padding:10px 14px;font-size:14px;line-height:1.65;word-break:break-word;}
.msg-row.theirs .msg-bubble{background:var(--surface);border:1px solid var(--border);border-radius:4px 14px 14px 14px;}
.msg-row.mine .msg-bubble{background:var(--s2);border:1px solid var(--border);border-radius:14px 4px 14px 14px;}
.msg-row.theirs.admin-msg .msg-bubble{background:var(--acg);border:1px solid rgba(110,95,248,.22);border-radius:4px 14px 14px 14px;}
.msg-row.mine.admin-msg .msg-bubble{background:var(--acg);border:1px solid rgba(110,95,248,.22);border-radius:14px 4px 14px 14px;}
.msg-row.system .msg-bubble{background:transparent;color:var(--t2);font-size:12px;text-align:center;border:none;padding:4px 8px;}
.msg-time{font-size:10px;color:var(--t2);padding:0 2px;}
.original-bubble{background:var(--s2);border:1px solid var(--border);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.65;color:var(--t2);max-width:100%;}
.original-label{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;}
.msg-attach-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:8px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.07);font-size:12px;font-weight:600;margin-top:5px;max-width:220px;}
.msg-attach-chip svg{flex-shrink:0;}
.msg-attach-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Reply bar */
.reply-bar{background:var(--surface);border-top:1px solid var(--border);padding:12px 16px;display:flex;gap:10px;align-items:flex-end;}
.attach-btn{width:38px;height:38px;border-radius:10px;background:var(--s2);border:1px solid var(--border);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;}
.attach-btn:hover{border-color:var(--ac);color:var(--ac);}
.reply-input-wrap{flex:1;display:flex;flex-direction:column;gap:6px;}
.file-previews{display:flex;gap:6px;flex-wrap:wrap;}
.file-chip{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:7px;background:var(--s2);border:1px solid var(--border);font-size:11px;font-weight:600;max-width:180px;}
.file-chip-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--t2);}
.file-chip-rm{cursor:pointer;color:var(--t2);font-size:11px;transition:.1s;flex-shrink:0;margin-left:2px;}
.file-chip-rm:hover{color:var(--red);}
.reply-input{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:.15s;resize:none;min-height:42px;max-height:120px;overflow-y:auto;line-height:1.5;width:100%;}
.reply-input:focus{border-color:var(--ac);}
.reply-input:disabled{opacity:.5;cursor:not-allowed;}
.send-btn{width:42px;height:42px;border-radius:10px;background:var(--ac);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s;}
.send-btn:hover{filter:brightness(1.1);}
.send-btn:disabled{opacity:.5;cursor:not-allowed;}
.send-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2.5;}
.closed-note{padding:14px;font-size:13px;color:var(--t2);text-align:center;width:100%;}

/* Ticket sidebar container */
.tickets-sidebar{display:flex;flex-direction:column;gap:12px;}

/* Ticket sidebar card */
.ticket-sidebar-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px;}
.tsc-title{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.12em;margin-bottom:10px;}
.tsc-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:7px;}
.tsc-row:last-child{margin-bottom:0;}
.tsc-label{color:var(--t2);font-weight:600;}
.tsc-val{font-weight:700;display:flex;align-items:center;gap:4px;}
.prev-tickets{display:flex;flex-direction:column;gap:5px;margin-top:8px;}
.prev-ticket{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;transition:.15s;text-decoration:none;}
.prev-ticket:hover{border-color:var(--ac);background:var(--s2);}
.prev-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.prev-dot.open{background:var(--ac);}
.prev-dot.answered{background:#28e8a8;}
.prev-dot.closed{background:var(--t3);}
.prev-dot.snoozed{background:var(--yellow);}
.prev-ticket-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.uic-av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;}
.uic-name{font-size:14px;font-weight:800;}
.uic-meta{font-size:11px;color:var(--t2);}
.uic-link-wrap{display:flex;align-items:center;gap:10px;margin-bottom:8px;text-decoration:none;color:var(--text);border-radius:9px;padding:5px;transition:.15s;cursor:pointer;}
.uic-link-wrap:hover{background:var(--s2);}
.msg-img-wrap{display:block;margin-top:6px;}
.msg-img{max-width:260px;max-height:240px;border-radius:10px;object-fit:contain;display:block;cursor:pointer;transition:.15s;}
.msg-img:hover{opacity:.88;}

/* Priority dropdown */
.prio-wrap{position:relative;margin-top:6px;}
.prio-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;width:100%;transition:.15s;text-align:left;}
.prio-btn:hover{border-color:var(--ac);}
.prio-btn-chevron{margin-left:auto;flex-shrink:0;}
.prio-dd{position:absolute;top:calc(100% + 4px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px;box-shadow:0 8px 28px rgba(0,0,0,.5);z-index:200;display:none;}
.prio-dd.open{display:block;animation:apdrop .15s ease;}
.prio-dd-opt{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;transition:.1s;}
.prio-dd-opt:hover{background:var(--s2);}

/* Ticket glass overrides */
[data-style="glass"] .detail-main{background:rgba(255,255,255,.04);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
[data-style="glass"] .ticket-sidebar-card{background:rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.09);}
[data-style="glass"] .detail-header,[data-style="glass"] .chat-wrap,[data-style="glass"] .reply-bar{background:transparent;}
[data-style="glass"] .ticket-card{background:rgba(255,255,255,.05);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.09);}

/* Create modal */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);z-index:500;display:none;align-items:center;justify-content:center;padding:24px;}
.modal-overlay.open{display:flex;animation:mfade .2s;}
@keyframes mfade{from{opacity:0}to{opacity:1}}
.create-modal{background:var(--surface);border:1px solid var(--border);border-radius:20px;width:100%;max-width:520px;overflow:hidden;}
[data-style="glass"] .create-modal{background:rgba(10,12,28,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.cm-head{padding:24px 28px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.cm-title{font-size:18px;font-weight:900;}
.cm-close{width:32px;height:32px;border-radius:8px;background:var(--s2);border:none;color:var(--t2);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;transition:.15s;}
.cm-close:hover{color:var(--text);}
.cm-body{padding:24px 28px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field label{font-size:12px;font-weight:700;color:var(--t2);}
.field input,.field textarea,.field select{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-family:inherit;font-size:14px;outline:none;transition:.15s;width:100%;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--acg);}
.field textarea{resize:vertical;min-height:110px;}
.field select option{background:var(--surface);}
.submit-btn{width:100%;padding:14px;border-radius:12px;background:linear-gradient(135deg,var(--ac),var(--purple));color:#fff;font-family:inherit;font-size:15px;font-weight:800;border:none;cursor:pointer;margin-top:4px;transition:.2s;box-shadow:0 6px 20px var(--acg);}
.submit-btn:hover{filter:brightness(1.1);transform:translateY(-1px);}
.submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* Quick replies panel */
.qr-wrap{position:relative;flex-shrink:0;}
.qr-btn{width:38px;height:38px;border-radius:10px;background:var(--s2);border:1px solid var(--border);color:var(--yellow);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.qr-btn:hover{border-color:var(--yellow);background:rgba(232,188,80,.1);}
.qr-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.qr-panel{position:absolute;bottom:calc(100% + 10px);left:0;width:340px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 16px 48px rgba(0,0,0,.6);z-index:400;display:none;overflow:hidden;}
.qr-panel.open{display:block;animation:apdrop .15s ease;}
.qr-panel-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;border-bottom:1px solid var(--border);}
.qr-panel-title{font-size:11px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;}
.qr-add-btn{display:flex;align-items:center;gap:4px;padding:5px 10px;border-radius:8px;background:var(--acg);border:none;color:var(--ac);font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;transition:.12s;}
.qr-add-btn:hover{filter:brightness(1.12);}
.qr-list{max-height:260px;overflow-y:auto;padding:6px;}
.qr-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;transition:.12s;border:1px solid transparent;}
.qr-item:hover{background:var(--s2);border-color:var(--border);}
.qr-item-body{flex:1;min-width:0;}
.qr-item-title{font-size:12px;font-weight:800;margin-bottom:2px;}
.qr-item-preview{font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.qr-item-ins{padding:4px 10px;border-radius:7px;background:var(--ac);border:none;color:#fff;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:.12s;}
.qr-item-ins:hover{filter:brightness(1.1);}
.qr-item-del{width:24px;height:24px;border-radius:6px;background:transparent;border:none;color:var(--t2);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.12s;}
.qr-item-del:hover{color:var(--red);background:rgba(240,72,120,.1);}
.qr-empty{text-align:center;padding:24px 16px;font-size:12px;color:var(--t2);line-height:1.6;}
.qr-form{padding:10px;border-top:1px solid var(--border);}
.qr-form input,.qr-form textarea{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;color:var(--text);font-family:inherit;font-size:12px;outline:none;margin-bottom:6px;transition:.15s;display:block;}
.qr-form input:focus,.qr-form textarea:focus{border-color:var(--ac);}
.qr-form textarea{resize:none;height:72px;}
.qr-form-btns{display:flex;gap:6px;justify-content:flex-end;}
.qr-form-save{padding:6px 14px;border-radius:8px;background:var(--ac);border:none;color:#fff;font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.qr-form-cancel{padding:6px 12px;border-radius:8px;background:var(--s2);border:1px solid var(--border);color:var(--t2);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;}

/* Rating card */
.rating-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 24px;text-align:center;width:100%;max-width:360px;margin:0 auto;}
.rating-title{font-size:15px;font-weight:900;margin-bottom:4px;}
.rating-sub{font-size:12px;color:var(--t2);margin-bottom:16px;}
.rating-stars{display:flex;justify-content:center;gap:6px;margin-bottom:14px;}
.rating-star{width:40px;height:40px;border-radius:10px;background:var(--s2);border:1px solid var(--border);color:var(--t2);cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;transition:.15s;font-family:inherit;}
.rating-star:hover,.rating-star.sel{color:var(--yellow);border-color:rgba(232,188,80,.4);background:rgba(232,188,80,.1);}
.rating-comment-inp{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:inherit;font-size:13px;outline:none;resize:none;height:72px;margin-bottom:12px;transition:.15s;}
.rating-comment-inp:focus{border-color:var(--ac);}
.rating-submit{padding:10px 28px;border-radius:10px;background:linear-gradient(135deg,var(--ac),var(--purple));color:#fff;font-family:inherit;font-size:13px;font-weight:800;border:none;cursor:pointer;transition:.2s;box-shadow:0 4px 16px var(--acg);}
.rating-submit:hover{filter:brightness(1.1);}
.rating-submit:disabled{opacity:.5;cursor:not-allowed;}
.rating-done-stars{font-size:26px;margin-bottom:6px;letter-spacing:2px;}
.rating-done-text{font-size:13px;font-weight:700;color:var(--t2);}
.rating-done-comment{font-size:12px;color:var(--t2);margin-top:6px;font-style:italic;}

/* Bottom nav (mobile) */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;height:58px;background:var(--bg2);border-top:1px solid var(--border);}
.bnav-items{display:flex;align-items:center;height:58px;}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px;text-decoration:none;color:var(--t2);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;transition:.15s;cursor:pointer;background:none;border:none;font-family:inherit;}
.bnav-item:hover,.bnav-item.active{color:var(--ac);}
.bnav-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;}
@media(max-width:640px){.bottom-nav{display:block;}}

/* ══════════════════════════════════════════════════════════
   ── ACTIVITY ──
══════════════════════════════════════════════════════════ */

/* Filter chips */
.filter-chip{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:700;cursor:pointer;border:1px solid var(--border);color:var(--t2);background:none;font-family:inherit;transition:.15s;}
.filter-chip:hover{color:var(--text);border-color:var(--acb);}
.filter-chip.active{background:var(--acg);border-color:var(--acb);color:var(--ac);}

/* Activity feed */
.feed{display:flex;flex-direction:column;gap:3px;}
.feed-date-sep{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;padding:16px 0 6px;}
.feed-item{display:flex;align-items:flex-start;gap:14px;padding:14px 16px;border-radius:14px;transition:.12s;position:relative;border:1px solid transparent;}
.feed-item:hover{background:var(--surface);border-color:var(--border);}
.feed-av{width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0;cursor:pointer;}
.feed-av img{width:100%;height:100%;object-fit:cover;}
.feed-body{flex:1;min-width:0;}
.feed-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px;}
.feed-user{font-size:13px;font-weight:800;cursor:pointer;text-decoration:none;color:var(--text);}
.feed-user:hover{color:var(--ac);}
.feed-action{font-size:13px;color:var(--t2);}
.feed-highlight{color:var(--text);font-weight:700;}
.feed-time{font-size:10px;color:var(--t2);margin-left:auto;flex-shrink:0;}
.feed-extra{font-size:12px;color:var(--t2);margin-top:3px;padding:7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:9px;display:inline-block;}
.feed-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.feed-icon svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
.fi-blue{background:rgba(77,142,255,.12);color:var(--ac);}
.fi-green{background:rgba(60,200,154,.12);color:#3cc89a;}
.fi-yellow{background:rgba(245,194,48,.12);color:var(--yellow);}
.fi-purple{background:rgba(155,111,245,.12);color:var(--purple);}
.fi-red{background:rgba(240,90,90,.12);color:var(--red);}
.fi-pink{background:rgba(255,107,156,.12);color:#ff6b9c;}

/* Refresh button */
.refresh-btn{display:flex;align-items:center;gap:7px;padding:9px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--t2);cursor:pointer;transition:.15s;font-family:inherit;}
.refresh-btn:hover{border-color:var(--ac);color:var(--text);}
.refresh-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;transition:transform .5s;}
.refresh-btn.spinning svg{transform:rotate(360deg);}

/* Activity empty state */
.act-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 24px;gap:14px;color:var(--t2);text-align:center;}
.act-empty-ico{width:68px;height:68px;border-radius:20px;background:var(--acg);border:1px solid var(--acb);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.act-empty-ico svg{width:30px;height:30px;stroke:var(--ac);fill:none;stroke-width:2;}
.act-empty-title{font-size:17px;font-weight:800;color:var(--text);}
.act-empty-sub{font-size:13px;color:var(--t2);text-align:center;max-width:300px;line-height:1.6;}

/* Activity skeleton */
@keyframes shimmer-act{from{background-position:-600px 0;}to{background-position:600px 0;}}
.act-skel{background:linear-gradient(90deg,var(--surface) 25%,var(--s2) 50%,var(--surface) 75%);background-size:600px 100%;animation:shimmer-act 1.4s infinite linear;border-radius:8px;}

/* Activity glass */
[data-style="glass"] .feed-item:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.1);}

/* ══════════════════════════════════════════════════════════
   ── CLAN DETAIL ──
══════════════════════════════════════════════════════════ */

/* Tab nav (used by JS switchTab — class .tab required) */
.tab         { display:flex;align-items:center;gap:7px;padding:10px 16px;font-size:var(--fs-base);font-weight:var(--fw-bold);color:var(--t2);cursor:pointer;border:none;background:none;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:inherit;transition:var(--t-fast);text-decoration:none;white-space:nowrap;flex-shrink:0; }
.tab:hover   { color:var(--text); }
.tab.active  { color:var(--ac);border-bottom-color:var(--ac); }
.tab svg     { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* Member role badges */
.member-role-badge { font-size:10px;font-weight:var(--fw-black);padding:3px 9px;border-radius:var(--r-full);white-space:nowrap; }
.role-owner   { background:rgba(255,215,0,.15);color:#ffd700; }
.role-officer { background:var(--acg);color:var(--ac); }
.role-member  { background:var(--s2);color:var(--t2); }

/* Action buttons (clan-actions JS builds these) */
.clan-action-btn       { padding:9px 18px;border-radius:var(--r-sm);font-size:var(--fs-base);font-weight:var(--fw-bold);border:none;cursor:pointer;transition:var(--t-fast);display:flex;align-items:center;gap:7px;white-space:nowrap;font-family:inherit; }
.clan-action-btn svg   { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; }
.action-primary        { background:var(--ac);color:#fff; }
.action-primary:hover  { filter:brightness(1.1); }
.action-secondary      { background:var(--s2);color:var(--text);border:1px solid var(--border); }
.action-secondary:hover{ border-color:var(--ac); }
.action-danger         { background:rgba(232,80,80,.1);color:var(--red);border:1px solid transparent; }
.action-danger:hover   { border-color:var(--red); }

/* Application cards (rendered by JS) */
.app-card  { background:var(--s2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;display:flex;align-items:flex-start;gap:12px; }
.app-av    { width:36px;height:36px;border-radius:50%;background:var(--border);overflow:hidden;flex-shrink:0; }
.app-av img{ width:100%;height:100%;object-fit:cover; }
.app-body  { flex:1;min-width:0; }
.app-user  { font-size:var(--fs-base);font-weight:var(--fw-bold); }
.app-msg   { font-size:var(--fs-sm);color:var(--t2);margin-top:3px;line-height:1.5; }
.app-time  { font-size:10px;color:var(--t2);margin-top:4px; }
.app-btns  { display:flex;gap:6px;flex-shrink:0; }
.app-accept{ padding:6px 14px;border-radius:var(--r-xs);background:rgba(60,200,154,.15);color:var(--color-green);border:1px solid rgba(60,200,154,.3);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:var(--t-fast);font-family:inherit; }
.app-accept:hover { background:rgba(60,200,154,.25); }
.app-reject{ padding:6px 14px;border-radius:var(--r-xs);background:rgba(232,80,80,.1);color:var(--red);border:1px solid rgba(232,80,80,.25);font-size:var(--fs-sm);font-weight:var(--fw-bold);cursor:pointer;transition:var(--t-fast);font-family:inherit; }
.app-reject:hover { background:rgba(232,80,80,.2); }

/* Log rows (rendered by JS) */
.log-row    { display:flex;align-items:flex-start;gap:10px;padding:10px 14px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm); }
.log-icon   { width:28px;height:28px;border-radius:var(--r-xs);background:var(--acg);display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.log-icon svg{ width:13px;height:13px;stroke:var(--ac);fill:none;stroke-width:2; }
.log-body   { flex:1;min-width:0; }
.log-action { font-size:var(--fs-sm);font-weight:var(--fw-bold); }
.log-detail { font-size:var(--fs-xs);color:var(--t2);margin-top:2px; }
.log-time   { font-size:10px;color:var(--t2);flex-shrink:0;white-space:nowrap; }

/* Upload zone */
.upload-zone { border:2px dashed var(--border);border-radius:var(--r-md);padding:16px;text-align:center;cursor:pointer;transition:var(--t-fast);position:relative;overflow:hidden; }
.upload-zone:hover { border-color:var(--ac); }
.upload-zone input { position:absolute;inset:0;opacity:0;cursor:pointer; }
.upload-zone svg   { width:24px;height:24px;stroke:var(--t2);fill:none;stroke-width:1.5; }
.upload-zone-text  { font-size:var(--fs-sm);color:var(--t2);margin-top:6px; }
.upload-preview    { width:100%;height:72px;object-fit:cover;border-radius:var(--r-xs);margin-top:8px;display:none; }

/* Member row management buttons */
.mem-btn { padding:5px 10px;border-radius:var(--r-xs);font-size:var(--fs-xs);font-weight:var(--fw-bold);border:1px solid var(--border);background:var(--s2);color:var(--t2);cursor:pointer;transition:var(--t-fast);display:flex;align-items:center;gap:4px;font-family:inherit; }
.mem-btn svg { width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2; }
.mem-btn:hover { border-color:var(--ac);color:var(--text); }
.mem-btn.danger:hover { border-color:var(--red);color:var(--red); }

/* ══════════════════════════════════════════════════════════
   ── PROFILE ──
══════════════════════════════════════════════════════════ */

/* Profile page horizontal padding (replaces former inline .main{padding:40px 32px}) */
.profile-header { background:var(--surface);border:1px solid var(--border);border-radius:20px;overflow:hidden;margin:40px 32px 24px;position:relative; }
.profile-banner { height:160px;background:linear-gradient(135deg,var(--ac),var(--purple));position:relative;overflow:hidden; }
.profile-banner-img { position:absolute;inset:0;background-size:cover;background-position:center; }
.profile-banner-overlay { position:absolute;inset:0;background:linear-gradient(to bottom,transparent 40%,rgba(0,0,0,.4)); }
.profile-info-row { padding:0 32px 24px;display:flex;align-items:flex-end;gap:20px;position:relative;overflow:hidden; }
.profile-av-wrap { margin-top:-48px;flex-shrink:0; }
.profile-av { width:96px;height:96px;border-radius:50%;border:4px solid var(--surface);overflow:hidden;background:var(--bg2);box-shadow:0 4px 16px rgba(0,0,0,.4); }
.profile-av img { width:100%;height:100%;object-fit:cover;display:block; }
.profile-meta { flex:1;min-width:0;padding-bottom:4px;overflow:hidden; }
.profile-name { font-size:26px;font-weight:900;letter-spacing:-.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.profile-status { font-size:13px;color:var(--t2);margin-top:5px;display:flex;align-items:center;gap:6px;min-width:0; }
.profile-status-text { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.profile-status-dot { width:8px;height:8px;border-radius:50%;background:#3cc89a;flex-shrink:0;position:relative; }
.profile-status-dot::after {
  content:'';position:absolute;inset:-3px;border-radius:50%;
  background:inherit;opacity:0.4;
  animation:_sdot-ring 2s ease-in-out infinite;
}
@keyframes _sdot-ring {
  0%,100%{transform:scale(1);opacity:0.4;}
  50%{transform:scale(2.2);opacity:0;}
}
.profile-tag { font-size:13px;color:var(--t2);font-family:monospace;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;max-width:100%;display:block; }
.profile-bio { font-size:13px;color:var(--t2);margin-top:8px;line-height:1.55;max-width:500px;word-break:break-word;overflow-wrap:break-word; }
.profile-badges { display:flex;flex-wrap:wrap;gap:7px;margin-top:10px; }
.profile-badges .badge { padding:4px 11px; }
.badge-user { background:var(--acg);border:1px solid var(--acb);color:var(--ac); }
.profile-actions { display:flex;gap:8px;padding-bottom:4px;flex-shrink:0; }

@media(max-width:600px){
  .profile-header { margin:16px 16px 16px; }
  .profile-info-row { padding:0 18px 20px;gap:14px;flex-wrap:wrap;align-items:flex-start; }
  .profile-av-wrap { margin-top:-40px; }
  .profile-av { width:80px;height:96px; }
  .profile-meta { width:calc(100% - 94px); }
  .profile-name { font-size:20px; }
  .profile-actions { width:100%;padding-top:4px; }
}

/* Profile grid */
.pg { display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 40px; }
@media(max-width:700px){ .pg { grid-template-columns:1fr;padding:0 16px 32px; } }
.pg .card { padding:24px; }
.card-full { grid-column:1/-1; }
.card-title { font-size:12px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-bottom:16px; }

.stat-row  { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.stat-item { background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:14px;text-align:center; }
.stat-val  { font-size:26px;font-weight:900;margin-bottom:3px; }
.stat-lbl  { font-size:12px;color:var(--t2);font-weight:600;text-transform:uppercase;letter-spacing:.08em; }

.pg .xp-bar-wrap { background:var(--bg2);border-radius:8px;height:10px;overflow:hidden;margin:10px 0 6px;position:relative;cursor:pointer;border:none; }
.xp-label        { display:flex;justify-content:space-between;font-size:13px;color:var(--t2); }
.xp-tooltip      { position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:7px 13px;font-size:12px;font-weight:700;white-space:nowrap;pointer-events:none;opacity:0;transition:.18s;box-shadow:0 6px 20px rgba(0,0,0,.45);z-index:10; }
.xp-tooltip::after { content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--border); }
.pg .xp-bar-wrap:hover .xp-tooltip { opacity:1; }

.roles { display:flex;flex-wrap:wrap;gap:7px; }
.role  { display:inline-flex;align-items:center;gap:6px;padding:5px 12px 5px 10px;border-radius:20px;font-size:12px;font-weight:700;background:var(--bg2);border:1px solid var(--border); }
.role-dot { width:10px;height:10px;border-radius:50%;flex-shrink:0; }

.pun-item  { display:flex;align-items:center;gap:12px;padding:11px 13px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:8px; }
.pun-type  { padding:3px 9px;border-radius:6px;font-size:11px;font-weight:700;flex-shrink:0; }
.pun-warn  { background:rgba(245,194,48,.12);color:var(--yellow);border:1px solid rgba(245,194,48,.25); }
.pun-mute  { background:var(--acg);color:var(--ac);border:1px solid var(--acb); }
.pun-ban   { background:rgba(240,90,90,.12);color:var(--red);border:1px solid rgba(240,90,90,.25); }
.pun-info  { flex:1;min-width:0; }
.pun-reason{ font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pun-meta  { font-size:12px;color:var(--t2);margin-top:3px; }
.empty     { padding:20px;text-align:center;color:var(--t2);font-size:14px; }

/* Edit panel */
.edit-overlay { position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);z-index:500;display:none;align-items:center;justify-content:center; }
.edit-overlay.open { display:flex;animation:edfadein .2s; }
@keyframes edfadein { from{opacity:0} to{opacity:1} }
.edit-modal { background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;width:480px;max-width:92vw;max-height:90vh;overflow-y:auto;position:relative; }
.edit-modal-title { font-size:18px;font-weight:900;margin-bottom:20px; }
.edit-close { position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:7px;background:var(--s2);border:none;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center; }
.edit-close svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5; }
.edit-field { margin-bottom:16px; }
.edit-label { font-size:12px;font-weight:700;color:var(--t2);margin-bottom:6px;display:block; }
.edit-input { width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:11px 14px;color:var(--text);font-family:'Montserrat',sans-serif;font-size:14px;outline:none;transition:.15s; }
.edit-input:focus { border-color:var(--ac); }
textarea.edit-input { resize:vertical;min-height:80px; }
.edit-colors { display:flex;flex-wrap:wrap;gap:8px;margin-top:6px; }
.edit-color  { width:32px;height:32px;border-radius:50%;cursor:pointer;border:3px solid transparent;transition:.15s;flex-shrink:0; }
.edit-color:hover,.edit-color.on { border-color:var(--text);transform:scale(1.1); }
.edit-save   { width:100%;padding:13px;border-radius:10px;background:var(--ac);color:#fff;font-family:'Montserrat',sans-serif;font-size:14px;font-weight:700;border:none;cursor:pointer;margin-top:8px;transition:.15s; }
.edit-save:hover { filter:brightness(1.1); }
.edit-banner-preview { width:100%;height:80px;border-radius:10px;margin-top:8px;background:linear-gradient(135deg,var(--ac),var(--purple));background-size:cover;background-position:center; }

/* Status picker in edit modal */
.status-pick-btn { display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--t2);font-family:'Montserrat',sans-serif;font-size:12px;font-weight:700;cursor:pointer;transition:.15s;text-align:left; }
.status-pick-btn:hover { border-color:var(--acb);color:var(--text); }
.status-pick-btn.on { background:var(--acg);border-color:var(--acb);color:var(--ac); }
.status-pick-dot { width:9px;height:9px;border-radius:50%;flex-shrink:0; }
.s-online      { background:#3cc89a; }
.s-afk         { background:var(--yellow); }
.s-gaming      { background:var(--purple); }
.s-looking_clan{ background:var(--ac); }
.s-dnd         { background:var(--red); }
.s-invisible   { background:var(--border); }

/* Role badges (profile) */
.role-badge { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700;background:color-mix(in srgb,var(--rb-color) 15%,transparent);color:var(--rb-color);border:1px solid color-mix(in srgb,var(--rb-color) 30%,transparent); }
.profile-tags-row { display:flex;flex-wrap:wrap;gap:6px;margin-top:8px; }
.profile-tag-disp { padding:4px 11px;border-radius:20px;font-size:11px;font-weight:700;background:var(--s2);border:1px solid var(--border);color:var(--t2); }

/* Skeleton shimmer */
@keyframes shimmer-prof { from{background-position:-600px 0} to{background-position:600px 0} }
.loading .stat-val { color:transparent!important;min-height:36px;min-width:50px;background:linear-gradient(90deg,var(--surface) 25%,var(--s2) 50%,var(--surface) 75%);background-size:600px 100%;animation:shimmer-prof 1.5s infinite linear;border-radius:6px;display:inline-block; }
.loading .stat-lbl { color:transparent!important;background:linear-gradient(90deg,var(--surface) 25%,var(--s2) 50%,var(--surface) 75%);background-size:600px 100%;animation:shimmer-prof 1.5s infinite linear;border-radius:4px;height:11px;display:block; }
.profile-name.skel-loading { color:transparent!important;background:linear-gradient(90deg,var(--surface) 25%,var(--s2) 50%,var(--surface) 75%);background-size:600px 100%;animation:shimmer-prof 1.5s infinite linear;border-radius:8px;min-width:180px;min-height:34px;display:inline-block; }

/* Profile empty state variants */
.empty-state-title { font-size:14px;font-weight:700;color:var(--t2); }
.empty-state-sub   { font-size:14px;color:var(--t2); }

/* Staggered card reveals */
@keyframes sreveal-pg { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.pg .card { animation:sreveal-pg .45s cubic-bezier(.22,1,.36,1) both; }
.pg .card:nth-child(1){ animation-delay:.06s }
.pg .card:nth-child(2){ animation-delay:.11s }
.pg .card:nth-child(3){ animation-delay:.16s }
.pg .card:nth-child(4){ animation-delay:.21s }

.edit-save:active { transform:scale(.96) translateY(1px)!important; }

/* Profile glass */
[data-style="glass"] .profile-header { background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.1); }
[data-style="glass"] .pg .card       { background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.1);animation:none!important; }
[data-style="glass"] .stat-item      { background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08); }
[data-style="glass"] .pun-item       { background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08); }
[data-style="glass"] .edit-modal     { background:rgba(0,0,0,.7);backdrop-filter:blur(20px);border-color:rgba(255,255,255,.1); }

/* ══════════════════════════════════════════════════════════
   ── FRIENDS ──
══════════════════════════════════════════════════════════ */

/* Friends page layout wrapper (adds body padding) */
.friends-page-body { padding:40px 32px; }
@media(max-width:640px){ .friends-page-body { padding:16px 16px 60px; } }

/* Friends page header */
.page-header { margin-bottom:28px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap; }

.friends-tabs { display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:4px;margin-bottom:24px;width:fit-content; }
.friends-tab  { padding:8px 18px;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;color:var(--t2);transition:.15s;border:none;background:none;font-family:inherit;display:flex;align-items:center;gap:6px; }
.friends-tab:hover  { color:var(--text); }
.friends-tab.active { background:var(--acg);color:var(--ac);border:1px solid var(--acb); }
.tab-badge { background:var(--red);color:#fff;font-size:10px;font-weight:800;border-radius:8px;padding:1px 5px;min-width:16px;text-align:center; }

/* Friends search bar (distinct from global .search-bar) */
.friends-search-bar   { display:flex;gap:10px;margin-bottom:24px; }
.friends-search-input { flex:1;background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:11px 16px;color:var(--text);font-family:'Montserrat',sans-serif;font-size:14px;outline:none;transition:.15s; }
.friends-search-input:focus { border-color:var(--ac); }
.friends-search-input::placeholder { color:var(--t2); }
.search-btn { padding:11px 20px;border-radius:11px;background:var(--ac);color:#fff;font-size:13px;font-weight:700;border:none;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:7px;white-space:nowrap; }
.search-btn:hover { filter:brightness(1.1); }
.search-btn svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2; }

/* Friends grid */
.friends-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px; }
.friend-card  { background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;display:flex;align-items:center;gap:14px;position:relative;transition:.15s; }
.friend-card:hover { border-color:rgba(77,142,255,.3);box-shadow:0 6px 24px rgba(0,0,0,.25); }
.friend-av    { width:48px;height:48px;border-radius:50%;border:2px solid var(--border);overflow:hidden;flex-shrink:0;position:relative; }
.friend-av img{ width:100%;height:100%;object-fit:cover; }
.friend-info  { flex:1;min-width:0; }
.friend-name  { font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.friend-status{ font-size:11px;color:var(--t2);margin-top:3px;display:flex;align-items:center;gap:5px; }
.status-dot   { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
.friend-actions { display:flex;gap:6px;flex-shrink:0; }
.icon-btn     { width:32px;height:32px;border-radius:8px;background:var(--s2);border:1px solid var(--border);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s; }
.icon-btn:hover { border-color:var(--ac);color:var(--text); }
.icon-btn.danger:hover { border-color:var(--red);color:var(--red); }
.icon-btn svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2; }

/* Request cards */
.req-list { display:flex;flex-direction:column;gap:10px; }
.req-card  { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px; }
.req-av    { width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0; }
.req-av img{ width:100%;height:100%;object-fit:cover; }
.req-info  { flex:1;min-width:0; }
.req-name  { font-size:13px;font-weight:800; }
.req-meta  { font-size:11px;color:var(--t2);margin-top:2px; }
.req-actions{ display:flex;gap:7px; }
.req-accept { padding:7px 14px;border-radius:8px;background:var(--ac);color:#fff;font-size:12px;font-weight:700;border:none;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:5px; }
.req-accept:hover { filter:brightness(1.1); }
.req-accept svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5; }
.req-decline{ padding:7px 12px;border-radius:8px;background:var(--s2);border:1px solid var(--border);color:var(--red);font-size:12px;font-weight:700;cursor:pointer;transition:.15s; }
.req-decline:hover { border-color:var(--red); }

/* Search results */
.search-results { display:flex;flex-direction:column;gap:10px;margin-top:4px; }
.search-result-card { background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;align-items:center;gap:14px; }
.sr-av    { width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0; }
.sr-av img{ width:100%;height:100%;object-fit:cover; }
.sr-info  { flex:1;min-width:0; }
.sr-name  { font-size:13px;font-weight:800; }
.sr-id    { font-size:11px;color:var(--t2); }
.add-btn  { padding:7px 14px;border-radius:8px;background:var(--acg);border:1px solid var(--acb);color:var(--ac);font-size:12px;font-weight:700;cursor:pointer;transition:.15s;display:flex;align-items:center;gap:5px; }
.add-btn:hover { background:var(--ac);color:#fff; }
.add-btn:disabled { opacity:.5;pointer-events:none; }
.add-btn svg { width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5; }
.pending-tag { padding:5px 10px;border-radius:7px;background:var(--s2);border:1px solid var(--border);font-size:11px;font-weight:700;color:var(--t2); }

/* Friends empty state */
.friends-empty { display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;gap:14px;color:var(--t2);text-align:center; }
.friends-empty-ico { width:68px;height:68px;border-radius:20px;background:var(--acg);border:1px solid var(--acb);display:flex;align-items:center;justify-content:center;margin-bottom:4px; }
.friends-empty-ico svg { width:30px;height:30px;stroke:var(--ac);fill:none;stroke-width:2; }
.friends-empty-title { font-size:17px;font-weight:800;color:var(--text); }
.friends-empty-sub   { font-size:13px;color:var(--t2);max-width:280px;line-height:1.6; }

/* Friends skeleton */
@keyframes shimmer-fr { from{background-position:-600px 0} to{background-position:600px 0} }
.fr-skel { background:linear-gradient(90deg,var(--surface) 25%,var(--s2) 50%,var(--surface) 75%);background-size:600px 100%;animation:shimmer-fr 1.4s infinite linear;border-radius:8px; }

/* Friends section header */
.friends-section-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:16px; }
.friends-section-title{ font-size:13px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em; }

/* Friends glass */
[data-style="glass"] .friend-card,[data-style="glass"] .req-card,[data-style="glass"] .search-result-card { background:rgba(255,255,255,.06);backdrop-filter:blur(14px);border-color:rgba(255,255,255,.1); }

@media(max-width:640px){ .friends-page { padding-bottom:60px; } }

/* ══════════════════════════════════════════════════════════
   ── TEAM ──
══════════════════════════════════════════════════════════ */

.team-wrap { max-width:1100px;margin:0 auto;padding:64px 24px 96px;position:relative;z-index:1; }

/* Hero */
.team-hero { text-align:center;margin-bottom:56px; }
.team-hero-eyebrow { display:inline-flex;align-items:center;gap:7px;background:var(--acg);border:1px solid var(--acb,var(--border));color:var(--ac);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:5px 14px;border-radius:100px;margin-bottom:22px; }
.team-hero-eyebrow svg { width:13px;height:13px;flex-shrink:0; }
.team-hero-title { font-size:clamp(38px,7vw,68px);font-weight:900;letter-spacing:-2px;line-height:.96;margin-bottom:18px; }
.team-hero-title span { background:linear-gradient(120deg,var(--ac),var(--purple,#8b5cf6));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text; }
.team-hero-sub { font-size:15px;color:var(--t2);max-width:420px;margin:0 auto;line-height:1.65; }

/* Org tree */
.tree-root { display:flex;flex-direction:column;align-items:center;gap:0; }

/* Owner node */
.owner-node { position:relative;width:100%;max-width:480px;background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:28px 28px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;overflow:visible; }
.owner-node::before { content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--ac),var(--purple,#8b5cf6));border-radius:22px 22px 0 0;pointer-events:none; }
.owner-node::after  { content:'';position:absolute;bottom:-32px;left:50%;transform:translateX(-50%);width:2px;height:32px;background:var(--border);pointer-events:none; }
.owner-node-glow { position:absolute;inset:0;background:linear-gradient(135deg,var(--acg),transparent 55%);border-radius:22px;pointer-events:none; }

/* Crown badge */
.owner-crown-wrap { position:relative;flex-shrink:0; }
.owner-crown-icon { position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--surface);border:1.5px solid var(--border);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--yellow,#f5c518);z-index:1; }
.owner-crown-icon svg { width:14px;height:14px; }

/* Owner avatar */
.owner-av-link { display:block;width:80px;height:80px;border-radius:50%;overflow:hidden;border:3px solid var(--ac);box-shadow:0 0 0 6px var(--acg),0 8px 28px rgba(0,0,0,.4);flex-shrink:0;text-decoration:none;transition:border-color .2s ease,box-shadow .2s ease; }
.owner-av-link:hover { border-color:var(--purple,#8b5cf6);box-shadow:0 0 0 6px var(--acg),0 8px 32px rgba(0,0,0,.5); }
.owner-av-link img { width:100%;height:100%;object-fit:cover;display:block; }
.owner-name-link { color:var(--text);text-decoration:none;font-size:18px;font-weight:900;letter-spacing:-.3px;transition:color .15s; }
.owner-name-link:hover { color:var(--ac); }
.owner-role-pill { display:inline-flex;align-items:center;gap:6px;background:var(--acg);border:1px solid var(--acb,var(--border));color:var(--ac);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;padding:4px 12px;border-radius:100px; }
.owner-role-pill svg { width:11px;height:11px; }
.owner-main-title { font-size:15px;font-weight:700;color:var(--text); }
.owner-desc { font-size:13px;color:var(--t2);line-height:1.6;max-width:400px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }

/* Responsibilities list (owner) */
.resp-list { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;width:100%;text-align:left; }
.resp-item { display:flex;align-items:center;gap:7px;font-size:12px;color:var(--t2);line-height:1.4; }
.resp-item svg { width:11px;height:11px;flex-shrink:0;color:var(--ac); }

/* Tag chips */
.team-tags { display:flex;flex-wrap:wrap;gap:6px;justify-content:center; }
.team-tag  { display:inline-flex;align-items:center;gap:5px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:3px 9px;font-size:11px;font-weight:700;color:var(--t2); }
.team-tag svg { width:11px;height:11px;flex-shrink:0;color:var(--ac); }

/* Org branches */
.org-branches-wrap { position:relative;display:flex;flex-direction:row;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:0;padding-top:32px;width:100%; }
.org-branches-wrap::before { content:'';position:absolute;top:0;left:var(--bar-l,12%);right:var(--bar-r,12%);height:0;border-top:2px solid var(--border);pointer-events:none; }
.org-branch { position:relative;display:flex;flex-direction:column;align-items:center;gap:12px; }
.org-branch::before { content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:28px;background:var(--border);pointer-events:none; }
.org-branch-hd { display:inline-flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:100px;padding:5px 14px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--t2);margin-top:28px;position:relative;z-index:1; }
.branch-dot { width:8px;height:8px;border-radius:50%;flex-shrink:0; }
.branch-count { background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:1px 7px;font-size:10px;color:var(--t2); }
.org-branch-cards { display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:flex-start; }

/* Member card */
.member-card { position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px;width:280px;min-width:0;overflow:hidden;display:flex;flex-direction:column;gap:10px;transition:transform .2s ease,box-shadow .2s ease; }
.member-card:hover { transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.3); }
.mc-head { display:flex;align-items:center;gap:10px; }
.mc-av-link { display:block;width:46px;height:46px;border-radius:50%;overflow:hidden;border:2px solid var(--border);background:var(--bg2);flex-shrink:0;text-decoration:none;transition:border-color .15s; }
.mc-av-link:hover { border-color:var(--ac); }
.mc-av-link img { width:100%;height:100%;object-fit:cover;display:block; }
.mc-info { flex:1;min-width:0; }
.mc-name { display:block;font-size:14px;font-weight:800;color:var(--text);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1px;transition:color .15s; }
.mc-name:hover { color:var(--ac); }
.mc-role { display:flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--ac);margin-top:3px; }
.mc-role svg { width:11px;height:11px;flex-shrink:0; }
.mc-desc { font-size:12px;color:var(--t2);line-height:1.55;overflow-wrap:break-word;word-break:break-word; }
.mc-resp { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px; }
.mc-resp li { display:flex;align-items:center;gap:6px;font-size:11px;color:var(--t2);line-height:1.35; }
.mc-resp li::before { content:'›';color:var(--ac);font-size:14px;line-height:1;flex-shrink:0; }
.mc-tags { display:flex;flex-wrap:wrap;gap:5px; }
.mc-tags .team-tags { justify-content:flex-start; }

/* Team edit btn */
.team-edit-btn { position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:7px;background:var(--bg2);border:1px solid var(--border);color:var(--t2);cursor:pointer;display:none;align-items:center;justify-content:center;transition:background .15s,color .15s,border-color .15s;padding:0;z-index:2; }
.team-edit-btn:hover { background:var(--acg);border-color:var(--acb,var(--border));color:var(--ac); }
.team-edit-btn svg { width:13px;height:13px; }
body.is-admin .team-edit-btn { display:flex; }

/* Team skeleton */
.team-skel { background:var(--bg2);border-radius:6px;animation:team-skel 1.4s ease-in-out infinite; }
.team-skel-circle { border-radius:50%; }
@keyframes team-skel { 0%,100%{opacity:.45;} 50%{opacity:.9;} }

/* Tags input in modal */
.tags-wrap { display:flex;flex-wrap:wrap;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:7px 10px;min-height:42px;cursor:text;transition:border-color .15s; }
.tags-wrap:focus-within { border-color:var(--ac); }
.tag-pill { display:inline-flex;align-items:center;gap:4px;background:var(--acg);border:1px solid var(--acb,var(--border));border-radius:6px;padding:3px 8px;font-size:11px;color:var(--ac);font-weight:700; }
.tag-pill button { background:none;border:none;color:inherit;cursor:pointer;padding:0;font-size:13px;line-height:1;opacity:.7;display:flex;align-items:center; }
.tag-pill button:hover { opacity:1; }
.tag-field { border:none;background:none;outline:none;color:var(--text);font-family:inherit;font-size:13px;min-width:90px;flex:1; }

/* Team empty state */
.team-empty { text-align:center;padding:72px 24px;color:var(--t2); }
.team-empty svg { width:44px;height:44px;margin:0 auto 16px;display:block;opacity:.35; }
.team-empty-title { font-size:15px;font-weight:700;color:var(--t2); }
.team-empty-sub   { font-size:13px;margin-top:6px; }

/* Team entrance animations */
.team-hero          { opacity:0;transform:translateY(20px);animation:t-up .5s ease forwards; }
.owner-node         { opacity:0;transform:translateY(20px);animation:t-up .5s ease .1s forwards; }
.org-branches-wrap  { opacity:0;transform:translateY(20px);animation:t-up .5s ease .2s forwards; }
@keyframes t-up { to { opacity:1;transform:none; } }

/* Team glass */
[data-style="glass"] .owner-node,[data-style="glass"] .member-card { background:rgba(255,255,255,.05);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:rgba(255,255,255,.08); }
[data-style="glass"] .tags-wrap { background:rgba(255,255,255,.04); }

/* Team mobile */
@media(max-width:700px){
  .org-branches-wrap::before,.org-branch::before { display:none; }
  .org-branches-wrap { flex-direction:column;align-items:center; }
  .org-branch { width:100%;max-width:420px; }
  .member-card { width:100%; }
  .owner-node::after { display:none; }
}
@media(max-width:480px){
  .team-wrap { padding:40px 16px 72px; }
  .team-hero-title { font-size:34px;letter-spacing:-1px; }
}

/* ══════════════════════════════════════════════════════════
   ── BATTLEPASS ──
══════════════════════════════════════════════════════════ */

/* Hero banner */
.bp-hero{border-radius:24px;overflow:hidden;padding:60px 48px;margin-bottom:40px;position:relative;background:linear-gradient(135deg,var(--bg) 0%,var(--bg2) 50%,var(--bg) 100%);border:1px solid var(--border);}
.bp-hero::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='grid' width='60' height='60' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 60 0 L 0 0 0 60' fill='none' stroke='rgba(79,140,255,0.06)' stroke-width='1'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='60' height='60' fill='url(%23grid)'/%3E%3C/svg%3E");opacity:.5;}
.bp-hero-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.bp-hero-left{flex:1;min-width:300px;}
.bp-season-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:20px;background:var(--acg);border:1px solid var(--acb);font-size:11px;font-weight:800;color:var(--ac);letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px;}
.bp-title{font-size:clamp(28px,5vw,48px);font-weight:900;letter-spacing:-1.5px;color:var(--text);margin-bottom:10px;}
.bp-title span{background:linear-gradient(135deg,var(--ac),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.bp-subtitle{font-size:14px;color:var(--t2);margin-bottom:28px;line-height:1.6;}
.bp-timer{display:flex;gap:16px;flex-wrap:wrap;}
.bp-timer-block{text-align:center;}
.bp-timer-num{font-size:28px;font-weight:900;color:var(--text);line-height:1;}
.bp-timer-label{font-size:10px;font-weight:700;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;margin-top:3px;}
.bp-timer-sep{font-size:24px;font-weight:900;color:var(--t2);padding-top:4px;}

/* Progress bar */
.bp-progress-wrap{flex:1;min-width:280px;}
.bp-prog-head{display:flex;justify-content:space-between;margin-bottom:10px;}
.bp-prog-label{font-size:12px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.1em;}
.bp-prog-val{font-size:14px;font-weight:900;color:var(--text);}
.bp-prog-bar{height:12px;background:var(--border);border-radius:99px;overflow:hidden;margin-bottom:8px;}
.bp-prog-fill{height:100%;background:linear-gradient(90deg,var(--ac),var(--purple));border-radius:99px;transition:width 1s cubic-bezier(.4,0,.2,1);}
.bp-prog-xp{font-size:12px;color:var(--t2);text-align:right;}
.bp-level-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:var(--surface);border:1px solid var(--border);margin-top:14px;}
.bp-level-num{font-size:20px;font-weight:900;color:var(--text);}
.bp-level-sub{font-size:11px;color:var(--t2);font-weight:700;}

/* Track */
.bp-track-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;}
.bp-track-title{font-size:18px;font-weight:900;}
.bp-track-legend{display:flex;gap:12px;}
.bp-track-leg-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--t2);}
.bp-track-leg-dot{width:10px;height:10px;border-radius:50%;}
.dot-free{background:var(--ac);}
.dot-premium{background:var(--yellow);}

.bp-track{overflow-x:auto;padding-bottom:8px;}
.bp-track-inner{display:flex;gap:0;min-width:max-content;position:relative;}
.bp-track-inner::before{content:'';position:absolute;top:50%;left:0;right:0;height:3px;background:var(--border);transform:translateY(-50%);z-index:0;}

.bp-node{display:flex;flex-direction:column;align-items:center;gap:8px;width:110px;position:relative;z-index:1;}
.bp-node-line{width:100%;height:3px;background:var(--border);position:absolute;top:50%;transform:translateY(-50%);z-index:0;}
.bp-node-line.done{background:var(--ac);}
.bp-node-circle{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;border:3px solid var(--border);background:var(--surface);transition:.2s;position:relative;z-index:1;cursor:pointer;}
.bp-node-circle:hover{transform:scale(1.1);}
.bp-node-circle.done{background:var(--acg);border-color:var(--ac);color:var(--ac);}
.bp-node-circle.current{background:var(--ac);border-color:var(--ac);color:var(--bg);box-shadow:0 0 0 4px var(--acg);}
.bp-node-circle.locked{background:var(--s2);color:var(--t2);}
.bp-node-circle.premium-node{border-color:var(--yellow);background:rgba(255,215,0,.08);}
.bp-node-circle.premium-node.done{background:rgba(255,215,0,.2);color:var(--yellow);}
.bp-node-level{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.05em;}
.bp-node-reward{font-size:10px;font-weight:700;color:var(--t2);text-align:center;max-width:90px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bp-node-type{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:2px 6px;border-radius:4px;}
.type-free{background:var(--acg);color:var(--ac);}
.type-premium{background:rgba(255,215,0,.15);color:var(--yellow);}

/* No season */
.no-season{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:100px 20px;text-align:center;min-height:60vh;}
.no-season-ico{width:80px;height:80px;border-radius:24px;background:var(--acg);border:1px solid var(--acb);display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.no-season-ico svg{width:38px;height:38px;stroke:var(--ac);fill:none;stroke-width:1.5;}
.no-season h2{font-size:24px;font-weight:900;color:var(--text);}
.no-season p{font-size:14px;color:var(--t2);max-width:340px;line-height:1.65;}
.no-season-hint{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;background:var(--acg);border:1px solid var(--acb);font-size:13px;font-weight:700;color:var(--ac);margin-top:4px;}
.no-season-hint svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}

@media(max-width:640px){
  .bp-hero{padding:32px 24px;}
  .bp-hero-content{flex-direction:column;}
}

/* ══════════════════════════════════════════════════════════
   ── SHOP ──
══════════════════════════════════════════════════════════ */

/* Topbar scroll */
.topbar.scrolled{background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(22px);border-bottom-color:var(--border);}

/* Balance pill (topbar inject) */
.bal-pill{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:700;color:var(--yellow);flex-shrink:0;}
.bal-pill svg{width:15px;height:15px;stroke:var(--yellow);fill:none;stroke-width:2;}

/* Shop hero */
.shop-hero{margin-bottom:32px;}
.shop-hero-title{font-size:32px;font-weight:900;letter-spacing:-.5px;margin-bottom:6px;}
.shop-hero-sub{font-size:14px;color:var(--t2);}
.section-label{font-size:10px;font-weight:800;color:var(--t2);text-transform:uppercase;letter-spacing:.13em;margin-bottom:12px;}

/* Shop layout */
.shop-layout{display:flex;align-items:flex-start;gap:24px;}
.shop-main{flex:1;min-width:0;order:1;}
.shop-sidebar{width:236px;flex-shrink:0;position:sticky;top:90px;order:2;}

/* Sidebar accordion */
.sb-acc{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-bottom:10px;}
.sb-acc-head{display:flex;align-items:center;gap:9px;padding:13px 15px;cursor:pointer;user-select:none;transition:.13s;}
.sb-acc-head:hover{background:var(--s2);}
.sb-acc-icon{width:15px;height:15px;stroke:var(--t2);fill:none;stroke-width:2;flex-shrink:0;}
.sb-acc-label{font-size:12px;font-weight:600;color:var(--text);flex:1;}
.sb-acc-arrow{width:13px;height:13px;stroke:var(--t2);fill:none;stroke-width:2;transition:transform .2s;flex-shrink:0;}
.sb-acc.open .sb-acc-arrow{transform:rotate(180deg);}
.sb-acc-body{display:none;padding:0 10px 10px;}
.sb-acc.open .sb-acc-body{display:block;}
.sb-acc-divider{height:1px;background:var(--border);margin:0 0 8px;}

/* Search */
.sb-search{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:8px 11px;transition:.15s;margin-bottom:0;}
.sb-search:focus-within{border-color:var(--ac);}
.sb-search svg{width:14px;height:14px;stroke:var(--t2);fill:none;stroke-width:2;flex-shrink:0;}
.sb-search input{background:none;border:none;outline:none;color:var(--text);font-family:'Montserrat',sans-serif;font-size:13px;width:100%;}
.sb-search input::placeholder{color:var(--t2);}

/* Category list */
.cat-list{display:flex;flex-direction:column;gap:1px;}
.cat-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);transition:.13s;border:none;background:none;width:100%;text-align:left;}
.cat-item:hover{color:var(--text);background:var(--s2);}
.cat-item.active{color:var(--ac);background:var(--acg);font-weight:600;}
.cat-item-icon{font-size:14px;line-height:1;flex-shrink:0;}
.cat-item-count{margin-left:auto;font-size:10px;font-weight:600;color:var(--t2);background:var(--bg2);border-radius:20px;padding:1px 7px;}
.cat-item.active .cat-item-count{background:var(--acg);color:var(--ac);}
.cat-item-svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}

/* Sort & type filters */
.sort-list{display:flex;flex-direction:column;gap:1px;}
.sort-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);transition:.13s;border:none;background:none;width:100%;text-align:left;}
.sort-item:hover{color:var(--text);background:var(--s2);}
.sort-item.active{color:var(--ac);background:var(--acg);font-weight:600;}
.sort-item svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.type-list{display:flex;flex-direction:column;gap:1px;}
.type-filter-item{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;color:var(--t2);transition:.13s;border:none;background:none;width:100%;text-align:left;}
.type-filter-item:hover{color:var(--text);background:var(--s2);}
.type-filter-item.active{color:var(--ac);background:var(--acg);font-weight:600;}
.type-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* Sort bar */
.sort-bar{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.sort-count{font-size:13px;font-weight:500;color:var(--t2);flex:1;}
.sort-count span{color:var(--text);font-weight:700;}

/* Items grid */
.items-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;}
.item-card.solo-last{max-width:var(--solo-w,276px);}
.item-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:.2s;cursor:pointer;position:relative;}
.item-card:hover{border-color:var(--acb);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.3);}
.item-card.disabled{opacity:.55;cursor:default;pointer-events:none;}
.item-img{width:100%;height:150px;object-fit:cover;display:block;background:var(--s2);}
.item-img-placeholder{width:100%;height:150px;background:linear-gradient(135deg,var(--s2),var(--bg2));display:flex;align-items:center;justify-content:center;font-size:40px;}
.item-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:6px;}
.item-badges{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:4px;}
.badge-role{background:rgba(160,85,247,.15);color:#a855f7;}
.badge-balance{background:rgba(232,192,72,.15);color:var(--yellow);}
.badge-nick{background:rgba(74,156,224,.15);color:var(--ac);}
.badge-custom{background:rgba(60,200,154,.15);color:#3cc89a;}
.badge-slot{background:rgba(252,165,0,.15);color:#f97316;}
.badge-real{background:rgba(232,80,80,.15);color:var(--red);}
.badge-one-time{background:var(--acg);color:var(--ac);}
.item-name{font-size:16px;font-weight:800;}
.item-desc{font-size:12px;color:var(--t2);line-height:1.5;flex:1;}
.item-footer{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
.item-price{font-size:18px;font-weight:900;color:var(--yellow);}
.item-price-real{font-size:14px;font-weight:700;color:var(--red);}
.item-price-free{font-size:14px;font-weight:700;color:#3cc89a;}
.item-stock{font-size:11px;color:var(--t2);}
.item-btn{padding:8px 16px;border-radius:9px;background:var(--ac);color:var(--bg);font-size:12px;font-weight:700;border:none;cursor:pointer;transition:.15s;white-space:nowrap;}
.item-btn:hover{filter:brightness(1.1);}
.item-btn.soon{background:var(--s2);color:var(--t2);cursor:default;}
.sold-out-overlay{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;border-radius:16px;}
.sold-out-label{font-size:14px;font-weight:800;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.1em;}

/* Empty state (shop) */
.empty-state-title{font-size:18px;font-weight:700;margin-bottom:6px;color:var(--text);}
.empty-state-sub{font-size:13px;}

/* Buy modal (shop-specific) */
.modal-header{padding:22px 24px 18px;border-bottom:1px solid var(--border);}
.modal-sub{font-size:12px;color:var(--t2);}
.modal-price-row{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:var(--bg2);border-radius:12px;margin-bottom:16px;border:1px solid var(--border);}
.modal-price-label{font-size:13px;color:var(--t2);font-weight:600;}
.modal-price-val{font-size:20px;font-weight:900;color:var(--yellow);}
.modal-price-val.free{color:#3cc89a;}
.promo-row{display:flex;gap:8px;margin-bottom:12px;}
.promo-input{flex:1;background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:10px 14px;color:var(--text);font-family:'Montserrat',sans-serif;font-size:13px;outline:none;transition:.15s;text-transform:uppercase;}
.promo-input:focus{border-color:var(--ac);}
.promo-input::placeholder{text-transform:none;color:var(--t2);}
.promo-btn{padding:10px 14px;border-radius:9px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:700;cursor:pointer;transition:.15s;white-space:nowrap;}
.promo-btn:hover{border-color:var(--ac);}
.promo-status{font-size:12px;font-weight:600;margin-bottom:12px;min-height:18px;}
.promo-ok{color:#3cc89a;}
.promo-err{color:var(--red);}
.bal-check{font-size:12px;color:var(--t2);margin-bottom:16px;}
.bal-check span{color:var(--yellow);font-weight:700;}
.bal-insufficient{color:var(--red)!important;}
.modal-footer{padding:4px 24px 22px;display:flex;flex-direction:column;gap:10px;}
.buy-btn{width:100%;padding:14px;border-radius:12px;background:var(--ac);color:var(--bg);font-size:15px;font-weight:800;border:none;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.buy-btn:hover{filter:brightness(1.1);}
.buy-btn:disabled{opacity:.5;cursor:not-allowed;filter:none;}
.cancel-btn{width:100%;padding:11px;border-radius:12px;background:var(--s2);color:var(--t2);font-size:13px;font-weight:700;border:none;cursor:pointer;transition:.15s;}
.cancel-btn:hover{background:var(--bg2);}

/* Success */
.success-anim{text-align:center;padding:16px 0;}
.success-ico{font-size:48px;margin-bottom:12px;animation:popin .4s cubic-bezier(.17,.67,.35,1.3);}
@keyframes popin{from{transform:scale(0)}to{transform:scale(1)}}
.success-title{font-size:18px;font-weight:900;margin-bottom:4px;color:#3cc89a;}
.success-detail{font-size:13px;color:var(--t2);}

/* Login popup */
.popup-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:1000;}
.popup-bg.open{display:flex;animation:mfadein .2s ease;}
@keyframes mfadein{from{opacity:0}to{opacity:1}}
.popup{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:36px;width:360px;max-width:90vw;text-align:center;position:relative;}
.popup-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:7px;background:var(--s2);border:none;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.popup-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5;}
.popup-logo{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,var(--ac),var(--purple));display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;color:var(--bg);margin:0 auto 14px;}
.popup-title{font-size:21px;font-weight:900;margin-bottom:6px;}
.popup-sub{font-size:13px;color:var(--t2);margin-bottom:22px;}

/* Mobile filter button */
.mob-filter-btn{display:none;align-items:center;gap:8px;padding:8px 16px;border-radius:10px;background:var(--surface);border:1px solid var(--border);font-size:13px;font-weight:700;cursor:pointer;color:var(--text);margin-bottom:14px;transition:.15s;width:fit-content;}
.mob-filter-btn:hover{border-color:var(--ac);color:var(--ac);}
.mob-filter-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}
@media(max-width:960px){
  .shop-sidebar{display:none;position:fixed;top:72px;right:0;bottom:0;width:260px;z-index:250;background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;padding:16px;box-shadow:-8px 0 24px rgba(0,0,0,.4);}
  .shop-sidebar.mob-open{display:block;}
  .mob-filter-btn{display:flex;}
}
@media(max-width:600px){
  .items-grid{grid-template-columns:1fr;}
  .shop-sidebar{width:100%;right:0;left:0;border-left:none;border-top:1px solid var(--border);top:auto;bottom:0;max-height:70vh;}
}

/* Premium */
.prem-active-bar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:12px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.2);margin-bottom:20px;font-size:13px;font-weight:700;color:var(--yellow);}
.prem-active-bar svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.prem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.prem-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px 24px;display:flex;flex-direction:column;gap:16px;position:relative;overflow:hidden;transition:.2s;}
.prem-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,.3);}
.prem-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--tier-color,var(--ac));}
.prem-card.active-tier{border-color:var(--tier-color,var(--ac));}
.prem-tier-header{display:flex;align-items:center;gap:10px;}
.prem-tier-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--tier-color,var(--ac)) 12%,transparent);flex-shrink:0;}
.prem-tier-icon svg{width:20px;height:20px;stroke:var(--tier-color,var(--ac));fill:none;stroke-width:2;}
.prem-tier-name{font-size:20px;font-weight:900;}
.prem-tier-badge{margin-left:auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--tier-color,var(--ac)) 15%,transparent);color:var(--tier-color,var(--ac));}
.prem-features{display:flex;flex-direction:column;gap:8px;flex:1;}
.prem-feat{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--t2);}
.prem-feat svg{width:14px;height:14px;stroke:#3cc89a;fill:none;stroke-width:2.5;flex-shrink:0;}
.prem-price-row{display:flex;align-items:baseline;gap:6px;}
.prem-price{font-size:26px;font-weight:900;color:var(--yellow);}
.prem-duration{font-size:12px;color:var(--t2);font-weight:600;}
.prem-buy-btn{width:100%;padding:13px;border-radius:12px;font-size:14px;font-weight:800;border:none;cursor:pointer;transition:.15s;font-family:'Montserrat',sans-serif;}
.prem-buy-btn:not(.active-btn):hover{filter:brightness(1.1);}
.prem-buy-btn.active-btn{background:var(--s2);color:var(--t2);cursor:default;}

/* ══════════════════════════════════════════════════════════
   ── LANDING ──
══════════════════════════════════════════════════════════ */

/* Landing-specific body overflow lock */
body:has(.landing-hero){overflow:hidden;}

/* Corner appearance button */
.corner-btn{position:fixed;bottom:32px;right:32px;z-index:300;display:flex;align-items:center;gap:10px;padding:0 20px 0 14px;height:48px;border-radius:14px;background:var(--surface);border:1px solid var(--border);color:var(--t2);cursor:pointer;transition:.2s;box-shadow:0 6px 24px rgba(0,0,0,.4);font-family:'Montserrat',sans-serif;font-size:13px;font-weight:700;white-space:nowrap;}
.corner-btn:hover{border-color:var(--ac);color:var(--text);box-shadow:0 8px 32px var(--acg);transform:translateY(-2px);}
.corner-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}

/* Hero */
.landing-hero{position:relative;z-index:1;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px;text-align:center;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:20px;background:rgba(60,200,154,.1);border:1px solid rgba(60,200,154,.22);font-size:11px;font-weight:800;color:#3cc89a;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;animation:heroUp .7s .1s cubic-bezier(.16,1,.3,1) both;}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:#3cc89a;box-shadow:0 0 8px #3cc89a;flex-shrink:0;animation:dotPulse 1.8s ease-in-out infinite;}
.hero-title{font-size:clamp(30px,5.2vw,58px);font-weight:900;letter-spacing:-2px;line-height:1.1;margin-bottom:14px;animation:heroUp .7s .18s cubic-bezier(.16,1,.3,1) both;background:linear-gradient(to right,var(--text) 35%,var(--ac));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-title-main{display:inline;}
.hero-title-accent{display:inline;}
.hero-sub{max-width:440px;font-size:16px;font-weight:500;line-height:1.6;color:var(--text);opacity:.7;margin-bottom:44px;animation:heroUp .7s .26s cubic-bezier(.16,1,.3,1) both;}

/* Nav cards */
.hero-nav{width:100%;max-width:1100px;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;animation:heroUp .7s .36s cubic-bezier(.16,1,.3,1) both;}
@media(max-width:1100px){.hero-nav{grid-template-columns:repeat(3,1fr);max-width:700px;}}
@media(max-width:560px){.hero-nav{grid-template-columns:1fr 1fr;}}

.hnav-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:34px 20px 30px;background:var(--surface);border:1px solid var(--border);border-radius:20px;text-decoration:none;color:var(--text);transition:.22s;position:relative;overflow:hidden;min-height:172px;}
.hnav-card::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% -10%,var(--acg),transparent 65%);opacity:0;transition:.25s;}
.hnav-card:hover{border-color:var(--ac);transform:translateY(-6px);box-shadow:0 0 0 1px var(--ac),0 20px 48px var(--acg);}
.hnav-card:hover::after{opacity:1;}
.hnav-card:active{transform:scale(.97) translateY(0)!important;}

.hnav-ico{width:62px;height:62px;border-radius:18px;background:var(--acg);border:1px solid var(--acb);display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;}
.hnav-ico svg{width:30px;height:30px;stroke:var(--ac);fill:none;stroke-width:2;}
.hnav-body{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;z-index:1;}
.hnav-title{font-size:15px;font-weight:800;white-space:nowrap;}
.hnav-desc{font-size:13px;color:var(--t2);text-align:center;line-height:1.45;}

/* Glass overrides (landing) */
[data-style="glass"] .hnav-card{background:rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:rgba(255,255,255,.1);}

/* Landing animations */
@keyframes dotPulse{0%,100%{opacity:1;box-shadow:0 0 8px #3cc89a;}50%{opacity:.35;box-shadow:none;}}
@keyframes heroUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}

/* Hide base topbar on landing */
body:has(.landing-hero) #topbar{display:none!important;}

/* ══════════════════════════════════════════════════════════
   ── MEDIA ──
══════════════════════════════════════════════════════════ */

/* Media filter tabs */
.media-filter-tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:5px;}
.media-filter-tab{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:700;color:var(--t2);cursor:pointer;transition:.15s;border:none;background:none;font-family:inherit;}
.media-filter-tab:hover{color:var(--text);}
.media-filter-tab.active{background:var(--acg);color:var(--ac);border:1px solid var(--acb);}

/* Submit button */
.btn-submit{display:flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;background:var(--ac);color:var(--bg);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;border:none;transition:.15s;}
.btn-submit:hover{filter:brightness(1.1);}
.btn-submit svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;}

/* Gallery grid */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.media-card{border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);transition:.22s;cursor:pointer;}
.media-card:hover{border-color:var(--ac);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,.35);}
.media-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--s2);}
.media-thumb-placeholder{width:100%;aspect-ratio:16/9;background:var(--s2);display:flex;align-items:center;justify-content:center;}
.media-thumb-placeholder svg{width:32px;height:32px;stroke:var(--t2);fill:none;stroke-width:1.5;}
.media-footer{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;}
.media-title{font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;}
.media-meta{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.like-btn{display:flex;align-items:center;gap:5px;padding:5px 10px;border-radius:8px;border:none;background:var(--s2);color:var(--t2);font-size:12px;font-weight:700;cursor:pointer;transition:.15s;font-family:inherit;}
.like-btn:hover{background:var(--acg);color:var(--ac);}
.like-btn.liked{background:rgba(255,77,77,.12);color:#ff4d4d;}
.like-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;}
.like-btn.liked svg{fill:currentColor;}
.media-type-badge{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;}
.badge-image{background:rgba(79,140,255,.15);color:var(--ac);}
.badge-video{background:rgba(155,111,245,.15);color:var(--purple);}
.badge-gif{background:rgba(60,200,154,.15);color:#3cc89a;}

/* Media empty */
.media-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:80px 20px;color:var(--t2);text-align:center;}
.media-empty-ico{width:72px;height:72px;border-radius:22px;background:var(--acg);border:1px solid var(--acb);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.media-empty-ico svg{width:32px;height:32px;stroke:var(--ac);fill:none;stroke-width:1.5;}
.media-empty h3{font-size:20px;font-weight:900;color:var(--text);}
.media-empty p{font-size:13px;max-width:300px;line-height:1.65;}

/* Load more */
.load-more-wrap{display:flex;justify-content:center;margin-top:28px;}
.btn-load{padding:11px 28px;border-radius:10px;background:var(--surface);border:1px solid var(--border);color:var(--text);font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:.15s;}
.btn-load:hover{border-color:var(--ac);}

/* Lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;display:none;align-items:center;justify-content:center;padding:24px;}
.lightbox.open{display:flex;}
.lb-close{position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);border:none;color:var(--text);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;}
.lb-close:hover{background:rgba(255,255,255,.2);}
.lb-img{max-width:92vw;max-height:88vh;border-radius:12px;object-fit:contain;}

/* Media submit modal (scoped to avoid conflict with global .modal-bg) */
.media-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:800;display:none;align-items:center;justify-content:center;}
.media-modal-bg.open{display:flex;}
.media-modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:28px;width:480px;max-width:95vw;position:relative;}
.media-modal-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:8px;background:var(--s2);border:none;color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.media-modal-close svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
.media-modal-title{font-size:18px;font-weight:900;margin-bottom:20px;}

/* Media skeleton */
@keyframes skel-media{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skel-media{background:linear-gradient(90deg,var(--surface) 25%,var(--s2) 50%,var(--surface) 75%);background-size:200% 100%;animation:skel-media 1.4s infinite;border-radius:8px;}

@media(max-width:640px){
  .gallery-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px;}
}