:root{
  --bg: #0b1020;
  --card: rgba(255,255,255,.06);
  --card2: rgba(255,255,255,.09);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --stroke: rgba(255,255,255,.12);
  --accent: #6ee7ff;
  --accent2:#a78bfa;
  --danger:#ff6b6b;
  --ok:#4ade80;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background: var(--bg);
  color:var(--text);
}

/* keep the page uniformly dark; add a subtle accent only near the bottom */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 520px at 50% 110%, rgba(110,231,255,.10), transparent 60%),
    radial-gradient(900px 520px at 55% 115%, rgba(167,139,250,.10), transparent 62%);
  opacity:.55;
}

a{color:var(--accent); text-decoration:none}
a:hover{ text-decoration:none; filter: drop-shadow(0 0 10px rgba(167,139,250,.35)); }

.hidden{display:none !important}

.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px;
  background: rgba(11,16,32,.62);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--stroke);
}
.brand__title{font-weight:800; font-size:18px; letter-spacing:.2px}
.brand__subtitle{font-size:12px; color:var(--muted); margin-top:2px}
.topbar__right{display:flex; align-items:center; gap:10px}
.user-badge{
  padding:8px 12px;
  background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.14));
  border:1px solid var(--stroke);
  border-radius:999px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  font-size:13px;
}

/* Auth toggle chips */
.authswitch{display:flex;gap:10px;justify-content:center;margin:4px 0 14px;}
.chip{border:1px solid var(--stroke);background:rgba(255,255,255,.04);color:var(--text);padding:8px 12px;border-radius:999px;cursor:pointer;font-weight:700;}
.chip.active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);}

/* Profile key-value blocks */
.kv{display:flex;flex-direction:column;gap:10px;}
.kv__row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(255,255,255,.03);}
.divider{height:1px;background:rgba(255,255,255,.10);margin:14px 0;}

.container{max-width:1100px; margin:24px auto; padding:0 16px}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.card__subcard{
  margin: 0 18px 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.10);
}
.card__header{padding:18px 18px 8px}
.card__header.row{display:flex; align-items:flex-end; justify-content:space-between; gap:16px}
.rowgap{display:flex; align-items:center; gap:10px}
.card__header h1{margin:0; font-size:20px}
.card__header p{margin:6px 0 0; color:var(--muted); font-size:13px}

.panel{
  background: rgba(255,255,255,.05);
  border:1px solid var(--stroke);
  border-radius: 14px;
  padding:16px;
}
.panel h2{margin:0 0 12px; font-size:16px}

.muted{color:var(--muted)}
.msg{margin-top:10px; font-size:13px; color:var(--muted)}
.msg.ok{color:var(--ok)}
.msg.err{color:var(--danger)}

.tabs{
  display:flex; gap:10px; flex-wrap:wrap;
  margin-bottom:12px;
}
.tab{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius: 999px;
  cursor:pointer;
  transition: .15s ease;
}
.tab:hover{transform: translateY(-1px); background: rgba(255,255,255,.06)}
.tab.active{
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.16));
  border-color: rgba(110,231,255,.28);
}

.tabpane{display:none}
.tabpane.active{display:block}

/* Hidden tabs menu (burger) */
.tabbar{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:10px;
  margin: 8px 0 12px;
}
.tabbar__left{display:flex;align-items:center;gap:10px;}
.tabbar__right{display:flex;align-items:center;gap:10px;}
.tabbar__back.hidden,
.tabbar__menu.hidden{display:none !important;}

.tabbar__title{
  font-weight: 800;
  font-size: 16px;
}
.tabmenu{
  position: sticky;
  top: 10px;
  z-index: 50;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(20,20,25,.92);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  max-width: 820px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}
.tabmenu .tab{ width:auto; }

/* Fish guide */
.fish-controls{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.fish-admin{
  margin-top: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* ---------- Bonus Point ---------- */

.bp-top{ display:grid; grid-template-columns: 1fr 1.2fr 0.8fr; gap: 12px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: 14px; margin: 10px 0 14px; }
.bp-earned__value{ font-size: 22px; font-weight: 800; letter-spacing: 0.2px; display:flex; align-items:center; gap:8px; }
.bp-badge{ display:inline-flex; align-items:center; justify-content:center; padding: 2px 8px; border-radius: 999px; background: rgba(255,165,0,0.15); border: 1px solid rgba(255,165,0,0.25); font-size: 12px; font-weight: 700; }
.bp-mults{ display:flex; flex-direction:column; gap: 8px; }
.bp-multinfo{ margin-top: 2px; }

.bp-earned__max{ font-size: 14px; font-weight: 700; }
.bp-earned__value.is-x2, .bp-earned__value.is-x2 .bp-badge, .bp-earned__value.is-x2 .bp-earned__max{ color:#ffd95e; text-shadow: 0 0 10px rgba(255, 217, 94, 0.18); }
.bp-earned__value.is-x4, .bp-earned__value.is-x4 .bp-badge, .bp-earned__value.is-x4 .bp-earned__max{ color:#ff9f43; text-shadow: 0 0 12px rgba(255, 159, 67, 0.34), 0 0 24px rgba(255, 159, 67, 0.16); filter: saturate(1.08); }
.bp-multiplier{ color:#fff; transition: color .18s ease, text-shadow .18s ease, filter .18s ease; }
.bp-multiplier--x2{ color:#ffd95e; text-shadow: 0 0 10px rgba(255, 217, 94, 0.22); }
.bp-multiplier--x4{ color:#ff9f43; text-shadow: 0 0 12px rgba(255, 159, 67, 0.38), 0 0 22px rgba(255, 159, 67, 0.18); filter: saturate(1.08); }
.bp-total{ display:flex; flex-direction:column; gap: 6px; align-items:flex-end; }

.toggle{ display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.toggle input{ display:none; }
.toggle__ui{ width: 42px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.10); position: relative; transition: .2s; }
.toggle__ui::after{ content:""; position:absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 999px; background: rgba(255,255,255,0.7); transition: .2s; }
.toggle input:checked + .toggle__ui{ background: rgba(255,165,0,0.18); border-color: rgba(255,165,0,0.25); }
.toggle input:checked + .toggle__ui::after{ left: 21px; background: rgba(255,255,255,0.95); }
.toggle__text{ font-size: 13px; color: rgba(255,255,255,0.86); }

.bp-list{ display:flex; flex-direction:column; gap: 10px; }
.bp-controls{ display:flex; gap: 10px; margin: 0 0 12px; }
.bp-tabs{ display:flex; flex-wrap:wrap; gap: 8px; }
.bp-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }

.bp-card{ padding: 12px; border-radius: 14px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); display:flex; flex-direction:column; gap: 10px; }
.bp-card__top{ display:flex; gap: 10px; align-items:flex-start; }
.bp-card__icon{ width: 38px; height: 38px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); flex-shrink:0; }
.bp-card__meta{ min-width:0; }
.bp-card__title{ font-weight: 800; line-height: 1.2; }
.bp-card__sub{ font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }
.bp-card__note-row{ padding: 0 2px; }
.bp-card__note{ font-size: 11px; color: rgba(255,200,80,0.8); line-height: 1.35; }
.bp-card.is-blocked .bp-card__note{ color: rgba(255,100,100,0.85); }
.bp-card.is-blocked{ opacity: 0.55; filter: grayscale(0.3); }
.bp-card.is-blocked .bp-cbtn[data-inc]{ opacity: 0.25; cursor: not-allowed; }
.bp-card__bottom{ display:flex; justify-content:flex-end; }
.bp-card.is-x2{ border-color: rgba(255, 214, 102, 0.22); }
.bp-card.is-x4{ border-color: rgba(255, 153, 51, 0.28); box-shadow: 0 0 0 1px rgba(255, 153, 51, 0.08), 0 0 24px rgba(255, 153, 51, 0.14); }
.bp-reward{ color:#fff; transition: color .18s ease, text-shadow .18s ease, filter .18s ease; }
.bp-reward--x2{ color:#ffd95e; text-shadow: 0 0 10px rgba(255, 217, 94, 0.22); }
.bp-reward--x4{ color:#ff9f43; text-shadow: 0 0 12px rgba(255, 159, 67, 0.38), 0 0 22px rgba(255, 159, 67, 0.18); filter: saturate(1.08); }
.bp-reward-note{ color: rgba(255,255,255,0.46); font-weight: 600; }

.bp-cbtn[disabled]{ opacity: .4; cursor: not-allowed; }
/* BP Countdown Timer */
.bp-header-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.bp-header-row h1{ margin:0; }
.bp-countdown{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); font-size:13px; font-weight:700; white-space:nowrap; }
.bp-countdown__label{ color:rgba(255,255,255,0.55); font-weight:600; }
.bp-countdown__time{ color:#fff; font-variant-numeric:tabular-nums; letter-spacing:0.5px; font-size:14px; }

/* BP Done card - completed tasks are dimmed */
.bp-card.is-done{ opacity:0.42; filter:grayscale(0.35); }
.bp-card.is-done .bp-card__title{ color:rgba(255,255,255,0.6); }
/* Keep dec button fully clickable so user can undo accidental completion */
.bp-card.is-done .bp-cbtn[data-dec]{ opacity:1; cursor:pointer; }
.bp-card.is-done .bp-cbtn[data-inc][disabled]{ opacity:0.3; }

.bp-group{ padding: 0; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; }
.bp-group__title{ font-weight: 800; padding: 10px 12px; cursor:pointer; list-style:none; user-select:none; display:flex; align-items:center; justify-content:space-between; }
.bp-group__title::-webkit-details-marker{ display:none; }
.bp-group[open] .bp-group__title{ border-bottom: 1px solid rgba(255,255,255,0.06); }
.bp-group .bp-list{ padding: 10px 12px; }

.bp-row{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 10px 10px; border-radius: 12px; background: rgba(0,0,0,0.18); border: 1px solid rgba(255,255,255,0.06); }
.bp-left{ display:flex; align-items:center; gap: 10px; min-width: 0; }
.bp-icon{ width: 34px; height: 34px; border-radius: 10px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.bp-title{ font-weight: 700; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; }

.bp-right{ display:flex; align-items:center; gap: 10px; flex-shrink: 0; }
.bp-points{ font-weight: 800; color: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); font-size: 13px; }
.bp-counter{ display:flex; align-items:center; gap: 6px; }
.bp-cbtn{ width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); color: rgba(255,255,255,0.9); font-weight: 900; cursor:pointer; }
.bp-cbtn:active{ transform: translateY(1px); }
.bp-count{ min-width: 22px; text-align:center; font-weight: 800; color: rgba(255,255,255,0.88); }
.bp-limit{ color: rgba(255,255,255,0.45); font-size: 12px; }

@media (max-width: 820px){
  .bp-top{ grid-template-columns: 1fr; }
  .bp-total{ align-items:flex-start; }
}
.fish-admin__row{
  display:grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 10px;
  align-items: center;
}
.fish-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.fish-card{
  border-radius: 16px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.fish-card__top{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.fish-card__name{ font-weight: 800; }
.fish-card__place{ font-size: 12px; opacity: .75; margin-top: 6px; }

@media (max-width: 980px){
  .fish-admin__row{ grid-template-columns: 1fr; }
  .fish-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

.btn--sm{ padding:6px 10px; border-radius: 10px; font-size: 12px; }

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.field span{font-size:12px; color:var(--muted)}
input, select{
  width:100%;
  padding:10px 12px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
  color:var(--text);
  outline:none;
}
input:focus, select:focus{border-color: rgba(110,231,255,.45); box-shadow: 0 0 0 3px rgba(110,231,255,.12)}

.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:12px}
.grid2-span{grid-column: 1 / -1}

.btn{
  padding:10px 14px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  cursor:pointer;
  transition:.15s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,.08)}
.btn--primary{
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.20));
  border-color: rgba(110,231,255,.30);
}
.btn--ghost{background: transparent}
.btn--danger{border-color: rgba(255,107,107,.35); color: rgba(255,235,235,.95)}
.btn--danger:hover{background: rgba(255,107,107,.10)}

/* Global stats moderator delete button */
.xbtn{
  border:0;
  background:transparent;
  cursor:pointer;
  font-size:16px;
  line-height:1;
  padding:6px 8px;
  border-radius:10px;
  opacity:.8;
}
.xbtn:hover{opacity:1; background: rgba(255,107,107,.10)}

.tablewrap{overflow:auto; border-top:1px solid var(--stroke)}
.table{
  width:100%;
  border-collapse: collapse;
  min-width: 720px;
}
.table th, .table td{
  text-align:left;
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  vertical-align:middle;
  font-size:13px;
}
.table th{color:rgba(255,255,255,.75); font-weight:700; font-size:12px; letter-spacing:.2px}
.table tbody tr:hover{background: rgba(255,255,255,.04)}

/* Social-like footer under rows (last comment left, reactions right) */
.row-footer td{
  padding:10px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.10);
}
.row-footer__inner{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.row-footer__comment{
  min-width:0;
  flex:1;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.row-footer__actions{display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-shrink:0;}

/* Pager */
.pager{display:flex; gap:8px; justify-content:center; align-items:center; padding:12px 10px;}
.pager .pbtn{border:1px solid var(--stroke); background: rgba(255,255,255,.04); color:var(--text); padding:8px 10px; border-radius:12px; cursor:pointer; font-weight:700;}
.pager .pbtn:hover{background: rgba(255,255,255,.06)}
.pager .pbtn.active{background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22)}
.pager .psep{color: var(--muted); padding: 0 2px;}

.actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px 18px;
}
.pill{
  display:flex; gap:18px; flex-wrap:wrap;
  padding:10px 12px;
  border-radius: 999px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.14);
}

.search{min-width: 240px}

/* simple select style (used in Fish filters) */
.select{
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.14);
  color: var(--text);
}
.select:focus{outline:none; box-shadow: 0 0 0 2px rgba(120,200,255,0.14)}

.modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:flex-start; justify-content:center;
  overflow:auto;
  padding:24px 14px;
}
.modal__backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}
.modal__card{
  position:relative;
  width:min(520px, 94vw);
  max-height:calc(100vh - 48px);
  margin:auto 0;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.modal__card--wide{width:min(900px, 94vw)}
.modal__header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--stroke);
}
.modal__header h2{margin:0; font-size:16px}
.iconbtn{
  width:34px; height:34px;
  border-radius: 12px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  cursor:pointer;
  color:var(--text);
}
.modal__body{padding:16px; overflow:auto; -webkit-overflow-scrolling:touch;}
.modal__actions{display:flex; gap:10px; justify-content:flex-end; margin-top:10px}

/* Sale discussion thread */
.reactbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.reactbtn{
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--stroke);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  user-select:none;
}
.reactbtn.active{border-color: rgba(120,200,255,0.55); box-shadow: 0 0 0 2px rgba(120,200,255,0.12) inset;}

.thread__list{
  margin-top: 12px;
  max-height: min(52vh, 520px);
  overflow: auto;
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 10px;
  background: rgba(0,0,0,0.12);
}

.thread__msg{padding:10px 12px; border-radius: 14px; border:1px solid var(--stroke); background: rgba(255,255,255,0.04); margin: 8px 0;}
.thread__msg .meta{display:flex; gap:8px; align-items:baseline; justify-content:space-between;}
.thread__msg .who{font-weight:700;}
.thread__msg .txt{white-space:pre-wrap; margin-top:6px;}

.thread__composer{margin-top: 12px;}
.thread__composer textarea{width:100%; resize:vertical; min-height:70px;}

.stats-last-comment{margin-top:6px; font-size:12px; opacity:.9;}
.stats-row{cursor:pointer;}
.stats-row:hover{background: rgba(255,255,255,0.03);}

.pre{
  white-space: pre-wrap;
  background: rgba(0,0,0,.18);
  border:1px solid var(--stroke);
  border-radius: 14px;
  padding:14px;
  font-family: var(--mono);
  font-size:12px;
}

.footer{
  max-width:1100px;
  margin: 0 auto 26px;
  padding: 10px 16px 0;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:12px;
  color:var(--muted);
}

/* Bottom-right registered users counter */
.corner-badge{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:9999;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(10,12,18,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size:12px;
  line-height:1;
  color: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  user-select:none;
}
@media (max-width: 520px){
  .corner-badge{right:10px;bottom:10px;font-size:11px;padding:7px 9px;}
}
@media (max-width: 820px){
  .grid2{grid-template-columns:1fr}
  .footer{flex-direction:column}
  .table{min-width: 860px}
}

/* Dark theme form controls (Windows/Chromium selects can be hard to read) */
:root{ color-scheme: dark; }
select, option, input, textarea{
  background-color:#151821;
  color:#e8eaf0;
  border:1px solid rgba(255,255,255,0.12);
}
select:focus, input:focus, textarea:focus{
  outline:none;
  border-color:rgba(255,255,255,0.28);
  box-shadow:0 0 0 3px rgba(255,255,255,0.08);
}
select option{
  background-color:#151821;
  color:#e8eaf0;
}


/* --- Multi tackle picker --- */
.pickrow{
  display:flex;
  gap:10px;
  align-items:center;
}
.pickrow select{ flex:1; }
.btn--icon{
  width:44px;
  height:44px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.chips{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  font-size:13px;
}

/* Buyers (скупщики) */
.buyersSubtabs{display:flex;gap:8px;flex-wrap:wrap}
.buyersGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
@media (max-width: 900px){.buyersGrid{grid-template-columns:1fr}}
.buyersCard{border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.14);border-radius:16px;padding:14px}
.buyersCard h3{margin:0 0 6px 0;font-size:16px}
.buyersCard .small{font-size:12px;opacity:.75}
.buyersList{display:grid;grid-template-columns:1fr;gap:6px;margin-top:10px}
.buyersRow{display:flex;justify-content:space-between;gap:10px}
.buyersRow b{font-variant-numeric:tabular-nums}

/* Buyers form compact layout */
.buyersForm{display:flex;flex-direction:column;gap:8px}
.field--compact span{margin-bottom:4px}
.fieldRow{display:flex;align-items:center;gap:8px}
.fieldRow .suffix{opacity:.75}
.buyersUpdateTarget{margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}

/* Percent coloring */
.pct--low{color:#ff6b6b}
.pct--high{color:#66ff99}
.pct--eq{color:#ffffff}

.pctInput.pct--low{border-color:rgba(255,107,107,.6)}
.pctInput.pct--high{border-color:rgba(102,255,153,.6)}
.pctInput.pct--eq{border-color:rgba(255,255,255,.25)}
.chip button{
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: inherit;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.chip button:hover{
  background: rgba(255,255,255,0.08);
}


/* Profit per hour */
#profitPerHour{white-space:nowrap;}


/* ---------------- Site chat — modern redesign ---------------- */

.iconbtn{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.15);
  color: rgba(255,255,255,.88);
  border-radius: 12px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.iconbtn:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); }

/* --- Chat toggle button --- */
.chat-toggle-btn{
  position: relative;
}
.chat-toggle-icon{
  display: inline-block;
  transition: transform .2s;
}
.chat-toggle-btn:hover .chat-toggle-icon{ transform: scale(1.15); }

.chat-unread-badge{
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  background: #ef4444;
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  padding: 0 4px;
  text-align: center;
  border: 2px solid var(--bg, #0f0f14);
  animation: badge-pop .25s cubic-bezier(.36,.07,.19,.97);
  pointer-events: none;
}
.chat-unread-badge.pulse{
  animation: badge-pulse 1.2s ease-in-out infinite;
}
@keyframes badge-pop{
  0%{ transform: scale(0); }
  70%{ transform: scale(1.25); }
  100%{ transform: scale(1); }
}
@keyframes badge-pulse{
  0%,100%{ box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
  50%{ box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* --- Chat panel --- */
.chat{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 90;
  width: 340px;
  height: 420px;
  min-width: 280px;
  min-height: 240px;
  max-width: min(520px, calc(100vw - 24px));
  max-height: min(720px, calc(100vh - 24px));
  border-radius: 20px;
  background: rgba(14,14,20,.94);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 1px rgba(120,180,255,.06);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  resize: both;
  transition: box-shadow .2s;
}
.chat:focus-within{
  box-shadow: 0 32px 80px rgba(0,0,0,.65), 0 0 0 2px rgba(99,179,237,.25);
}

.chat--small{ width: 340px; height: 420px; }
.chat--big{ width: 440px; height: 580px; }

/* Entry animation */
.chat.chat-enter{
  animation: chat-slide-in .28s cubic-bezier(.21,1.02,.73,1) forwards;
}
@keyframes chat-slide-in{
  from{ opacity:0; transform: translateY(20px) scale(.96); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}

/* --- Header --- */
.chat__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  flex-shrink: 0;
}
.chat__title{
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.chat__title-icon{ font-size: 16px; }
.chat__online-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 2px rgba(52,211,153,.3);
  animation: online-pulse 2.4s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes online-pulse{
  0%,100%{ box-shadow: 0 0 0 2px rgba(52,211,153,.3); }
  50%{ box-shadow: 0 0 0 5px rgba(52,211,153,0); }
}
.chat__actions{
  display:flex;
  align-items:center;
  gap: 6px;
}

/* --- Messages area --- */
.chat__msgs{
  flex: 1 1 auto;
  padding: 12px 12px 6px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
.chat__msgs::-webkit-scrollbar{ width: 4px; }
.chat__msgs::-webkit-scrollbar-track{ background: transparent; }
.chat__msgs::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.12); border-radius: 2px; }
.chat__msgs::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.22); }

/* --- Message bubbles --- */
.chat__msg{
  display:flex;
  gap: 8px;
  margin: 0 0 10px;
  align-items:flex-end;
  animation: msg-in .18s ease-out;
}
@keyframes msg-in{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}
.chat__msg--me{ justify-content:flex-end; }
.chat__msg--me .chat__stack{ align-items:flex-end; }
.chat__msg--me .chat__meta{ justify-content:flex-end; }
.chat__msg--me .chat__bubble{
  background: linear-gradient(135deg, rgba(99,179,237,.22), rgba(167,139,250,.25));
  border-color: rgba(99,179,237,.30);
}
.chat__msg--me .avatar{ order:2; }
.chat__msg--me .chat__stack{ order:1; }

.chat__stack{
  display:flex;
  flex-direction:column;
  gap: 4px;
  max-width: 78%;
}
.chat__meta{
  display:flex;
  align-items:center;
  gap: 6px;
  color: rgba(255,255,255,.50);
  font-size: 11px;
  min-width: 0;
}
.chat__bubble{
  flex:none;
  max-width:100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  padding: 8px 12px;
  line-height: 1.45;
  word-break: break-word;
  transition: background .15s;
}
.chat__msg--me .chat__bubble{
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 4px;
}
.chat__bubble:hover{
  background: rgba(255,255,255,.09);
}
.chat__name{ font-weight: 700; }
.chat__text{ color: rgba(255,255,255,.90); word-break: break-word; }

/* day divider */
.chat__day-divider{
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.30);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 8px 0 14px;
}
.chat__day-divider::before,.chat__day-divider::after{
  content:'';
  flex:1;
  height:1px;
  background: rgba(255,255,255,.07);
}

/* --- Scroll to bottom button --- */
.chat__scroll-btn{
  position: absolute;
  bottom: 110px;
  right: 14px;
  background: rgba(99,179,237,.85);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  z-index: 5;
  transition: opacity .2s, transform .2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.chat__scroll-btn:hover{ background: rgba(99,179,237,1); transform: translateY(-2px); }

/* --- Mention popup --- */
.chat__mention-popup{
  position: absolute;
  bottom: 110px;
  left: 10px;
  right: 10px;
  background: rgba(18,18,28,.97);
  border: 1px solid rgba(99,179,237,.25);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 10;
  max-height: 160px;
  overflow-y: auto;
  padding: 4px;
}
.chat__mention-item{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s;
}
.chat__mention-item:hover,
.chat__mention-item.active{ background: rgba(99,179,237,.15); }
.chat__mention-item__name{ font-weight: 600; color: rgba(255,255,255,.9); }
.chat__mention-item__login{ color: rgba(255,255,255,.4); font-size: 11px; }

/* --- Format bar --- */
.chat__format-bar{
  display: flex;
  gap: 2px;
  padding: 4px 10px 2px;
  flex-shrink: 0;
}
.chat__fmt-btn{
  background: none;
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.55);
  border-radius: 8px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  line-height: 1.4;
}
.chat__fmt-btn:hover{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.18);
}
.chat__fmt-btn[data-fmt="mention"]{
  color: rgba(99,179,237,.8);
  border-color: rgba(99,179,237,.2);
}
.chat__fmt-btn[data-fmt="mention"]:hover{
  background: rgba(99,179,237,.12);
  color: rgba(99,179,237,1);
}

/* --- Input row --- */
.chat__inputrow{
  display:flex;
  gap: 8px;
  padding: 8px 10px 8px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.12);
  align-items: flex-end;
  flex-shrink: 0;
}
.chat__input{
  flex:1 1 auto;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 9px 13px;
  color: rgba(255,255,255,.92);
  outline: none;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  max-height: 80px;
  transition: border-color .15s, box-shadow .15s, background .15s;
  font-family: inherit;
}
.chat__input:focus{
  border-color: rgba(99,179,237,.45);
  box-shadow: 0 0 0 3px rgba(99,179,237,.10);
  background: rgba(255,255,255,.07);
}
.chat__input::placeholder{ color: rgba(255,255,255,.28); }
.chat__send-btn{
  flex-shrink: 0;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border: none;
  border-radius: 12px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  box-shadow: 0 4px 14px rgba(99,102,241,.35);
}
.chat__send-btn:hover{
  transform: scale(1.07) translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,102,241,.5);
  filter: brightness(1.1);
}
.chat__send-btn:active{ transform: scale(.95); }

.chat__hint{
  padding: 0 12px 6px;
  font-size: 11px;
  min-height: 16px;
  flex-shrink: 0;
}

/* --- Text formatting styles --- */
.chat-fmt-bold{ font-weight: 700; }
.chat-fmt-italic{ font-style: italic; }
.chat-fmt-code{
  font-family: 'Fira Code', 'Courier New', monospace;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .88em;
}
.chat-fmt-spoiler{
  background: rgba(255,255,255,.12);
  color: transparent;
  border-radius: 4px;
  padding: 1px 5px;
  cursor: pointer;
  transition: background .2s, color .2s;
  user-select: none;
}
.chat-fmt-spoiler.revealed{
  background: rgba(255,200,50,.12);
  color: inherit;
}
.chat-fmt-link{
  color: rgba(99,179,237,.9);
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}
.chat-fmt-link:hover{ color: rgba(99,179,237,1); }
.chat-fmt-mention{
  color: #60a5fa;
  font-weight: 700;
  background: rgba(96,165,250,.10);
  border-radius: 4px;
  padding: 1px 4px;
  cursor: pointer;
}
.chat-fmt-mention:hover{ background: rgba(96,165,250,.18); }
.chat__msg--mention-me .chat__bubble{
  border-color: rgba(96,165,250,.45) !important;
  background: rgba(96,165,250,.08) !important;
}

.tabmenu{
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
}

.tabmenu .tab{
  width: auto;
}
/* ---------- Sidebar / wiki navigation ---------- */

.overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(3px);
  z-index: 40;
  opacity: 1;
  transition: opacity .28s ease;
}
.overlay.hidden {
  display: block !important;
  opacity: 0;
  pointer-events: none;
}

/* ── Sidebar ── */
.sidebar{
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 290px;
  max-width: 86vw;
  background: linear-gradient(180deg, rgba(16,17,22,.99) 0%, rgba(12,13,18,.99) 100%);
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: 4px 0 40px rgba(0,0,0,.55), inset -1px 0 0 rgba(255,255,255,.04);
  z-index: 50;
  display: flex !important;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  transform: translateX(0);
  transition: transform .32s cubic-bezier(.32,.72,0,1);
}
.sidebar.hidden {
  transform: translateX(-105%) !important;
  pointer-events: none;
}

/* Brand */
.sidebar__brand {
  padding: 20px 18px 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  background: rgba(255,255,255,.015);
  position: relative;
  overflow: hidden;
}
.sidebar__brand::before {
  content: '';
  position: absolute;
  top: -30px; right: -20px;
  width: 120px; height: 120px;
  background: radial-gradient(circle, rgba(125,211,252,.08), transparent 70%);
  pointer-events: none;
}
.sidebar__logo {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: .3px;
}
.sidebar__tag {
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted);
  opacity: .6;
  letter-spacing: .04em;
}

/* Nav scroll area */
.sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 10px max(32px, env(safe-area-inset-bottom, 16px));
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.1) transparent;
}
.sidebar__nav::-webkit-scrollbar { width: 4px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 999px; }
.sidebar__nav::-webkit-scrollbar-track { background: transparent; }

/* Nav section groups */
.nav-section {
  margin-top: 6px;
}
.nav-section__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .45;
  padding: 10px 10px 6px;
  user-select: none;
}
.nav-section__items {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Navlink base */
.navlink {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 9px 11px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease;
  position: relative;
  overflow: hidden;
}
.navlink__icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.navlink__label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.navlink:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.07);
  color: var(--text);
}
.navlink:hover .navlink__icon {
  transform: scale(1.15);
}
.navlink:active {
  transform: scale(.98);
}

/* Active state */
.navlink.active {
  background: rgba(125,211,252,.1);
  border-color: rgba(125,211,252,.2);
  color: rgb(125,211,252);
  font-weight: 700;
}
.navlink.active::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: rgba(125,211,252,.8);
}
.navlink.active .navlink__icon {
  filter: drop-shadow(0 0 6px rgba(125,211,252,.5));
}

/* Home navlink — special */
.navlink--home {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--text);
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.06);
}
.navlink--profile {
  font-weight: 600;
  color: var(--text);
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.05);
  margin-bottom: 4px;
}
.navlink--profile:hover {
  background: rgba(167,139,250,.1);
  border-color: rgba(167,139,250,.2);
  color: #c4b5fd;
}

/* SPANK — violet accent */
.navlink--spank:hover {
  background: rgba(139,92,246,.1);
  border-color: rgba(139,92,246,.2);
  color: #c4b5fd;
}
.navlink--spank.active {
  background: rgba(139,92,246,.12);
  border-color: rgba(139,92,246,.25);
  color: #a78bfa;
}
.navlink--spank.active::before {
  background: rgba(139,92,246,.8);
}

/* Raffle — pink accent */
.navlink--raffle:hover {
  background: rgba(220,60,180,.1);
  border-color: rgba(220,60,180,.2);
  color: #f0abde;
}
.navlink--raffle.active {
  background: rgba(220,60,180,.12);
  border-color: rgba(220,60,180,.25);
  color: #f0abde;
}
.navlink--raffle.active::before {
  background: rgba(220,60,180,.8);
}

/* ── Sidebar open animation — stagger items ── */
@keyframes navItemIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.sidebar:not(.hidden) .navlink,
.sidebar:not(.hidden) .nav-section__label {
  animation: navItemIn .3s both;
}
.sidebar:not(.hidden) .sidebar__nav > .navlink:nth-child(1) { animation-delay: .04s; }
.sidebar:not(.hidden) .sidebar__nav > .navlink:nth-child(2) { animation-delay: .08s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink { animation-delay: .11s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .nav-section__label { animation-delay: .09s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink:nth-child(1) { animation-delay: .12s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink:nth-child(2) { animation-delay: .14s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink:nth-child(3) { animation-delay: .16s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink:nth-child(4) { animation-delay: .18s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink:nth-child(5) { animation-delay: .20s; }
.sidebar:not(.hidden) .nav-section:nth-child(3) .navlink:nth-child(6) { animation-delay: .22s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .nav-section__label { animation-delay: .21s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .navlink:nth-child(1) { animation-delay: .23s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .navlink:nth-child(2) { animation-delay: .25s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .navlink:nth-child(3) { animation-delay: .27s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .navlink:nth-child(4) { animation-delay: .29s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .navlink:nth-child(5) { animation-delay: .31s; }
.sidebar:not(.hidden) .nav-section:nth-child(4) .navlink:nth-child(6) { animation-delay: .33s; }
.sidebar:not(.hidden) .nav-section:nth-child(5) .nav-section__label { animation-delay: .30s; }
.sidebar:not(.hidden) .nav-section:nth-child(5) .navlink:nth-child(1) { animation-delay: .32s; }
.sidebar:not(.hidden) .nav-section:nth-child(5) .navlink:nth-child(2) { animation-delay: .34s; }
.sidebar:not(.hidden) .nav-section:nth-child(5) .navlink:nth-child(3) { animation-delay: .36s; }
.sidebar:not(.hidden) .nav-section:nth-child(5) .navlink:nth-child(4) { animation-delay: .38s; }

/* Legacy compat — keep old classes working */
.navlink--group { font-weight: 600; }
.navgroup { padding-top: 2px; }
.navsection-label {
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); opacity: .45;
  padding: 10px 10px 4px; user-select: none;
}
.navgroup__hint { margin: 6px 10px 0; font-size: 12px; }

/* ---------- Pages ---------- */
.page{ display:none; }
.page.active{ display:block; }

/* home */
.homegrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .homegrid{ grid-template-columns: 1fr; }
}
.homecard{
  width: 100%;
  text-align: left;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  cursor: pointer;
}
.homecard:hover{ background: rgba(255,255,255,.06); }
.homecard--disabled{ opacity: .55; cursor: default; }
.homecard__icon{ font-size: 22px; }
.homecard__title{ font-weight: 800; margin-top: 6px; }
.homecard__text{ margin-top: 6px; font-size: 13px; }

/* fishing tabs row */
.tabsrow{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 14px;
}
.tabsrow .tab{
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.tabsrow .tab.active{
  background: rgba(125,211,252,.12);
  border-color: rgba(125,211,252,.25);
}

/* Fish guide */
.fish-controls{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}
.fish-admin{
  margin-top: 12px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

/* =====================
   Home (Artis-like)
   ===================== */

.home{ display:flex; flex-direction:column; gap:16px; }

.hero{
  position:relative;
  overflow:hidden;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.hero__bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 280px at 20% 20%, rgba(125,211,252,.18), transparent 60%),
    radial-gradient(700px 260px at 80% 10%, rgba(167,139,250,.16), transparent 55%),
    radial-gradient(700px 320px at 60% 90%, rgba(34,197,94,.10), transparent 60%);
  filter: blur(0px);
}
.hero__content{ position:relative; padding: 22px; }
.hero__badge{
  display:inline-flex; align-items:center; gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  font-weight: 700;
  font-size: 12px;
}
.hero__title{ margin: 14px 0 8px; font-size: 28px; line-height: 1.15; }
.hero__subtitle{ max-width: 820px; margin: 0 0 14px; }
.hero__actions{ display:flex; gap:10px; flex-wrap:wrap; }
.hero__meta{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.hero__meta .dot{ display:inline-flex; align-items:center; gap:8px; }

.homegrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px){
  .homegrid{ grid-template-columns: 1fr; }
  .hero__title{ font-size: 24px; }
}

.hcard{
  --hcard-glow-a: rgba(125,211,252,.10);
  --hcard-glow-b: rgba(167,139,250,.08);
  --hcard-bg: rgba(255,255,255,.03);
  --hcard-hover: rgba(255,255,255,.055);
  --hcard-border: rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid var(--hcard-border);
  background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.015)), var(--hcard-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.hcard:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02)), var(--hcard-hover); box-shadow: 0 10px 24px rgba(0,0,0,.16); }
.hcard__icon{
  width: 42px; height: 42px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  font-size: 20px;
}
.hcard__body{ flex: 1; min-width:0; }
.hcard__title{ font-weight: 800; }
.hcard__text{ margin-top: 2px; font-size: 13px; }
.hcard__chev{ opacity:.7; font-size: 22px; margin-left: 4px; }
.hcard--ghost{ cursor: default; }
.hcard--ghost:hover{ transform:none; border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.03); }

.hcard{
  position:relative;
  overflow:hidden;
}
.hcard::before{
  content:"";
  position:absolute; inset:-2px;
  background:
    radial-gradient(420px 160px at 20% 20%, var(--hcard-glow-a), transparent 60%),
    radial-gradient(360px 140px at 80% 30%, var(--hcard-glow-b), transparent 55%);
  opacity: .9;
  transition: opacity .15s ease;
  pointer-events:none;
}
.hcard:hover::before{ opacity: 1; }

.hcard--fishing{
  --hcard-glow-a: rgba(56,189,248,.12);
  --hcard-glow-b: rgba(14,165,233,.08);
  --hcard-bg: rgba(56,189,248,.028);
  --hcard-hover: rgba(56,189,248,.05);
  --hcard-border: rgba(56,189,248,.14);
}
.hcard--rent{
  --hcard-glow-a: rgba(74,222,128,.12);
  --hcard-glow-b: rgba(16,185,129,.08);
  --hcard-bg: rgba(74,222,128,.028);
  --hcard-hover: rgba(74,222,128,.05);
  --hcard-border: rgba(74,222,128,.14);
}
.hcard--trucker{
  --hcard-glow-a: rgba(251,191,36,.11);
  --hcard-glow-b: rgba(245,158,11,.08);
  --hcard-bg: rgba(251,191,36,.028);
  --hcard-hover: rgba(251,191,36,.05);
  --hcard-border: rgba(251,191,36,.13);
}
.hcard--bp{
  --hcard-glow-a: rgba(251,146,60,.12);
  --hcard-glow-b: rgba(249,115,22,.08);
  --hcard-bg: rgba(251,146,60,.028);
  --hcard-hover: rgba(251,146,60,.05);
  --hcard-border: rgba(251,146,60,.13);
}
.hcard--ach{
  --hcard-glow-a: rgba(168,85,247,.10);
  --hcard-glow-b: rgba(139,92,246,.07);
  --hcard-bg: rgba(168,85,247,.025);
  --hcard-hover: rgba(168,85,247,.045);
  --hcard-border: rgba(168,85,247,.12);
}
.hcard--raffle{
  --hcard-glow-a: rgba(220,60,180,.13);
  --hcard-glow-b: rgba(180,40,220,.09);
  --hcard-bg: rgba(220,60,180,.03);
  --hcard-hover: rgba(220,60,180,.06);
  --hcard-border: rgba(220,60,180,.18);
}
.hcard--soft{
  --hcard-glow-a: rgba(148,163,184,.08);
  --hcard-glow-b: rgba(100,116,139,.06);
  --hcard-bg: rgba(148,163,184,.02);
  --hcard-hover: rgba(148,163,184,.04);
  --hcard-border: rgba(148,163,184,.10);
}
.hcard--spank{
  --hcard-glow-a: rgba(139,92,246,.14);
  --hcard-glow-b: rgba(168,85,247,.09);
  --hcard-bg: rgba(139,92,246,.03);
  --hcard-hover: rgba(139,92,246,.06);
  --hcard-border: rgba(139,92,246,.18);
}

/* Home section divider */
.home-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .55;
  padding: 18px 4px 8px;
  user-select: none;
}
.homegrid--useful {
  grid-template-columns: 1fr;
}
.hcard__kicker--spank { color: rgba(196,181,253,.9); }

.homesocials{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin: 14px 0 22px;
}
.socialtile{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)), radial-gradient(120px 60px at 20% 30%, var(--glass, rgba(255,255,255,.08)), transparent 60%);
  color: inherit;
  text-decoration: none;
  font-weight: 800;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.socialtile:hover{
  transform: translateY(-1px);
  border-color: rgba(125,211,252,.25);
  background: rgba(125,211,252,.06);
}


.socialtile--tg{ --glass: rgba(34,158,217,.28); border-color: rgba(34,158,217,.35); }
.socialtile--yt{ --glass: rgba(255,0,0,.22); border-color: rgba(255,0,0,.30); }
.socialtile--tw{ --glass: rgba(145,70,255,.22); border-color: rgba(145,70,255,.30); }


.homecard h2{ margin:0; }
.homeServers__total{ text-align:right; }
.homeServers__big{ font-size: 26px; font-weight: 900; }

.serversGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1100px){ .serversGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px){ .serversGrid{ grid-template-columns: 1fr; } }

.serverCard{
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  cursor: pointer;
  user-select: none;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.serverCard:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.04); }
.serverCard__top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.serverCard__name{ font-weight: 900; }
.serverCard__num{ font-variant-numeric: tabular-nums; font-weight: 800; }
.serverBar{
  height: 8px;
  margin-top: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  overflow:hidden;
}
.serverBar > i{ display:block; height:100%; width:0%; background: rgba(125,211,252,.55); }
.serverCard__sub{ margin-top: 8px; display:flex; justify-content:space-between; gap:10px; font-size: 12px; }
.serverCard__ip{ opacity:.8; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

.homeServers__foot{ margin-top: 10px; }


/* Hide tabs we keep for routing (e.g., profile opened from user badge) */
.tab--hidden{display:none !important;}

/* Percent bars (Fishing -> Удочки) */
.pct{display:flex; align-items:center; gap:10px; min-width: 160px;}
.pct__track{flex:1; height:8px; border-radius:999px; background: rgba(255,255,255,.08); overflow:hidden; border:1px solid rgba(255,255,255,.10);}
.pct__fill{height:100%; border-radius:999px; background: linear-gradient(90deg, rgba(110,231,255,.85), rgba(167,139,250,.75)); box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;}
.pct__label{font-variant-numeric: tabular-nums; font-weight:800; font-size:12px; color: rgba(255,255,255,.86); min-width:42px; text-align:right;}
#tab-rods .table td{vertical-align:middle;}
#tab-rods .table th:nth-child(n+3), #tab-rods .table td:nth-child(n+3){white-space:nowrap;}
@media (max-width: 860px){
  .pct{min-width: 120px;}
}

/* Fishing -> Полезное */
.useful-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  padding: 0 18px 18px;
}
@media (max-width: 860px){
  .useful-grid{grid-template-columns: 1fr;}
}
.setcard{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  border-radius: 16px;
  overflow:hidden;
}
.setcard__head{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.08));
}
.setcard__head h2{margin:0; font-size:14px;}
.setcard__meta{margin-top:4px; font-size:12px; color: var(--muted);}
.setcard__body{padding:12px 14px; display:flex; flex-direction:column; gap:10px;}
.setrow{display:grid; grid-template-columns: 92px 1fr; gap:10px; align-items:center;}
.setrow--top{align-items:flex-start;}
.setlabel{color: var(--muted); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.4px;}
.setvalue{font-size:13px; line-height:1.35;}
.setnote{font-size:12px; line-height:1.55;}

.user-badge--clickable{cursor:pointer; user-select:none;}


/* --- Hover glow + no underline (requested) --- */
a, a:hover, a:focus { text-decoration: none; }
.btn:hover, .btn:focus-visible,
.tile:hover, .tile:focus-visible,
.socialtile:hover, .socialtile:focus-visible,
.serverCard__head:hover, .serverCard__head:focus-visible{
  box-shadow: 0 0 0 2px rgba(167,139,250,.35), 0 10px 40px rgba(0,0,0,.35);
}


/* --- Server cards: expandable details --- */
.serverCard{ padding:0; overflow:hidden; cursor: default; }
.serverCard__head{
  width:100%;
  padding:12px;
  background: transparent;
  border:0;
  color: inherit;
  text-align:left;
  cursor:pointer;
  display:block;
}
.serverCard__chev{ transition: transform .18s ease; opacity:.8; }
.serverCard.is-open .serverCard__chev{ transform: rotate(180deg); }
.serverCard__details{
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .22s ease, opacity .18s ease;
}
.serverCard.is-open .serverCard__details{ max-height: 260px; opacity: 1; }
.serverDetails__row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding: 6px 0;
}
.serverDetails__row code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.miniBtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: inherit;
  text-decoration:none;
  font-weight: 800;
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.miniBtn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }

/* ---------- Achievements ---------- */

/* Hero */
.ach-hero {
  position: relative; overflow: hidden;
  border-radius: 20px 20px 0 0;
  padding: 24px 22px 20px;
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(250,204,21,.14), transparent 50%),
    radial-gradient(700px 240px at 100% 0%, rgba(167,139,250,.12), transparent 45%),
    rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.09); border-bottom: none;
}
.ach-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 600px 180px at 50% 120%, rgba(250,204,21,.06), transparent 60%);
  pointer-events: none;
}
.ach-hero__content { position: relative; z-index: 1; }
.ach-hero__top { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.ach-hero__title { display:flex; align-items:center; gap:14px; }
.ach-hero__icon {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:26px; border-radius:16px;
  background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.24); flex-shrink:0;
}
.ach-hero__title h1 { margin:0; font-size:22px; }
.ach-hero__sub { margin:3px 0 0; font-size:13px; color:rgba(255,255,255,.5); }

/* Stats bar */
.ach-stats { display:flex; gap:10px; flex-wrap:wrap; }
.ach-stat {
  display:flex; align-items:center; gap:8px;
  background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:9px 14px; font-size:13px;
}
.ach-stat__num { font-size:20px; font-weight:900; color:#fde68a; line-height:1; }
.ach-stat__label { color:rgba(255,255,255,.5); font-size:12px; }

/* Toolbar */
.ach__tools {
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  background: rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.08);
  border-top: none; border-radius: 0; padding: 12px 18px;
}
.ach__search { flex:1; min-width:180px; max-width:420px; }
.ach__filters { display:flex; gap:6px; flex-wrap:wrap; }
.ach__filter-btn {
  padding:5px 13px; border-radius:999px; font-size:12px; font-weight:700; cursor:pointer;
  border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.75); transition: all .15s ease;
}
.ach__filter-btn:hover { background:rgba(255,255,255,.10); color:#fff; }
.ach__filter-btn.active { background:rgba(250,204,21,.18); border-color:rgba(250,204,21,.4); color:#fde68a; }
.ach__hint { font-size:12px; color:rgba(255,255,255,.4); margin-left:auto; white-space:nowrap; }

/* Groups */
.ach__groups { padding: 0 14px 18px; display:flex; flex-direction:column; gap:12px; }

.achgroup { border-radius:16px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.03); overflow:hidden; }
.achgroup summary { list-style:none; cursor:pointer; user-select:none; padding:14px 16px; display:flex; align-items:center; gap:12px; }
.achgroup summary::-webkit-details-marker { display:none; }
.achgroup__icon { font-size:20px; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.achgroup__icon--public  { background:rgba(99,211,255,.12); border:1px solid rgba(99,211,255,.2); }
.achgroup__icon--events  { background:rgba(250,204,21,.12); border:1px solid rgba(250,204,21,.2); }
.achgroup__icon--hidden  { background:rgba(167,139,250,.12); border:1px solid rgba(167,139,250,.2); }
.achgroup__info { flex:1; min-width:0; }
.achgroup__title { font-weight:800; font-size:14px; }
.achgroup__sub { font-size:11px; color:rgba(255,255,255,.45); margin-top:2px; }
.achgroup__right { display:flex; align-items:center; gap:8px; margin-left:auto; }
.achgroup__count {
  font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12); background:rgba(0,0,0,.28); color:rgba(255,255,255,.65);
}
.achgroup__chevron { font-size:10px; color:rgba(255,255,255,.35); transition:transform .2s ease; }
.achgroup[open] .achgroup__chevron { transform: rotate(180deg); }
.achgroup[open] summary { border-bottom:1px solid rgba(255,255,255,.07); background:rgba(0,0,0,.15); }

/* Grid */
.achlist { padding:12px; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:10px; }

.achitem {
  position:relative; border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.18);
  padding:13px 14px;
  display:flex; flex-direction:column; gap:6px;
  transition: transform .13s ease, box-shadow .13s ease, border-color .13s ease;
}
.achitem:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.18); box-shadow:0 10px 28px rgba(0,0,0,.36); }

/* Penalty item */
.achitem--penalty { border-color:rgba(239,68,68,.18); background:rgba(239,68,68,.05); }
.achitem--penalty:hover { border-color:rgba(239,68,68,.32); }

/* Unavailable — badge below title, not overlapping */
.achitem--na { opacity:.58; }
.achitem__na-badge {
  display:inline-flex; align-items:center; gap:4px;
  font-size:10px; font-weight:800; color:rgba(255,80,80,.85);
  background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.22);
  border-radius:999px; padding:2px 9px; align-self:flex-start;
  white-space:nowrap; flex-shrink:0;
}

.achitem__header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.achitem__title { font-weight:800; font-size:13px; line-height:1.35; flex:1; }
.achitem__desc { font-size:12px; color:rgba(255,255,255,.65); line-height:1.5; }
.achitem__footer { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px; }

.achreward {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:800; padding:4px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(0,0,0,.18));
  color:#fde68a; white-space:normal; word-break:break-word; flex-shrink:1;
}
.achreward--item { color:#c4b5fd; border-color:rgba(167,139,250,.2); background:rgba(167,139,250,.08); }
.achreward--penalty { color:#f87171; border-color:rgba(239,68,68,.2); background:rgba(239,68,68,.08); }
.achreward--dp { color:#34d399; border-color:rgba(52,211,153,.2); background:rgba(52,211,153,.08); }

.achempty { padding:16px; color:rgba(255,255,255,.45); font-size:13px; text-align:center; }

@media (max-width:860px) {
  .achlist { grid-template-columns:1fr; }
  .ach__tools { flex-direction:column; align-items:stretch; }
  .ach__search { max-width:none; }
  .ach__hint { margin-left:0; }
  .ach-stats { gap:8px; }
}


/* ---------- Profiles / avatars ---------- */
.user-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; overflow:hidden; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(110,231,255,.25), rgba(167,139,250,.25));
  color:#fff; font-weight:800; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar--xs{ width:22px; height:22px; font-size:10px; }
.avatar--sm{ width:34px; height:34px; font-size:12px; }
.avatar--lg{ width:72px; height:72px; font-size:24px; }
.avatar--xl{ width:96px; height:96px; font-size:30px; }
.userlink{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  background: rgba(255,255,255,.04); color:var(--text);
  padding:4px 10px; cursor:pointer; font-weight:700;
}
.userlink:hover{ background: rgba(255,255,255,.08); }
.profile-settings{ display:flex; gap:14px; align-items:center; margin-bottom:10px; }
.profile-settings__side{ flex:1 1 auto; }
.profile-avatar-preview{ display:flex; align-items:center; justify-content:center; min-width:84px; }
.profile-hero{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.profile-hero__name{ font-size:22px; font-weight:800; }
.profile-hero__login{ color:var(--muted); margin-top:4px; }

/* ---------- Chat refresh (see main chat block above) ---------- */
.chat__msg--me .chat__bubble{
  background: linear-gradient(135deg, rgba(99,179,237,.22), rgba(167,139,250,.25));
  border-color: rgba(99,179,237,.30);
}
@media (max-width: 720px){
  .profile-settings{ flex-direction:column; align-items:flex-start; }
  .chat{ right:10px; bottom:10px; width: calc(100vw - 20px); max-width:none; }
  .chat__stack{ max-width:85%; }
}


/* ---------- Rich profile cosmetics ---------- */
.panel--soft{
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
}
.field textarea{
  width:100%;
  min-height:96px;
  resize:vertical;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:12px 14px;
}
.name-decor{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.name-decor__text{ font-weight:800; min-width:0; word-break:break-word; }
.profile-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);
}
.svg-icon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.svg-icon svg{ width:1em; height:1em; display:block; fill:currentColor; }
.svg-icon--nick{ font-size:16px; }
.avatar-stack{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; }
.svg-icon--avatar{ font-size:16px; padding:3px 6px; border-radius:999px; background: rgba(255,255,255,.06); }
.user-badge{ align-items:center; }
.user-badge .name-decor__text{ font-size:14px; }
.user-badge__online{ opacity:.78; font-size:12px; }
.userlink{ flex-wrap:wrap; }
.profile-hero__name .name-decor__text{ font-size:22px; }
.thread__msg .meta{ align-items:center; }

/* --- Users page / public profile wall --- */
.users-toolbar{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin:0 0 14px; flex-wrap:wrap; }
.users-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.user-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.user-card__top{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.user-card__meta{ min-width:0; }
.user-card__name .userlink{ padding:0; }
.user-card__stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.user-card__stats > div{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.03); }
.profile-public-actions{ margin:14px 0; }
.wall-form textarea{ width:100%; min-height:86px; resize:vertical; margin:10px 0; }
.wall-form__actions{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.wall-list{ display:flex; flex-direction:column; gap:10px; }
.wall-comment{ padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.wall-comment__meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.wall-comment__text{ white-space:pre-wrap; word-break:break-word; }
.pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pager--bottom{ margin-top:16px; }
#pubProfileLikeBtn.active{ border-color:rgba(255,120,160,.45); box-shadow:0 0 0 1px rgba(255,120,160,.2) inset; }
.row-footer__comment .userlink{ vertical-align:middle; }
.thread__msg .txt{ white-space:pre-wrap; word-break:break-word; }

/* ---------- Profile live preview ---------- */
#pfLivePreview{display:block;}
.profile-preview-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  background:rgba(20,25,40,.55);
  overflow:hidden;
}
.profile-preview-head{display:flex;align-items:center;gap:12px;}
.profile-preview-meta{min-width:0;}
.profile-preview-name{font-weight:800;font-size:18px;line-height:1.15;margin-bottom:2px;word-break:break-word;}
.profile-preview-login{font-size:12px;opacity:.75;}
.profile-preview-hint{margin-top:10px;font-size:11px;opacity:.5;text-align:center;}
.profile-preview-divider{height:1px;background:rgba(255,255,255,.08);margin:12px 0 10px;}
.profile-preview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:4px;}
.profile-preview-stat{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:10px;background:rgba(255,255,255,.04);text-align:center;}
.profile-preview-stat__icon{font-size:13px;}
.profile-preview-stat b{font-size:13px;font-weight:800;line-height:1;}
.profile-preview-stat span:last-child{font-size:9px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.04em;}
.tg-bind-cta{
  appearance:none; border:1px solid rgba(255,120,120,.20); cursor:pointer;
  background:linear-gradient(180deg, rgba(160,48,64,.22), rgba(110,28,40,.18));
  color:rgba(255,232,236,.96); height:42px; padding:0 14px; border-radius:14px;
  font-weight:700; font-size:13px; letter-spacing:.01em;
  box-shadow:0 10px 28px rgba(72,14,24,.22);
  transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.tg-bind-cta:hover{transform:translateY(-1px); border-color:rgba(255,138,138,.28); background:linear-gradient(180deg, rgba(170,54,72,.24), rgba(118,32,44,.20));}
.tg-bind-cta.hidden{display:none}

/* Bell */
.notif-root{position:relative; display:flex; align-items:center; gap:8px; flex-wrap:nowrap;}
.notif-bell{
  position:relative; width:42px; height:42px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color:#fff; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.notif-bell:hover{transform:translateY(-1px); border-color:rgba(255,255,255,.22);}
.notif-bell--active{border-color:rgba(99,102,241,.5); box-shadow:0 0 0 3px rgba(99,102,241,.15), 0 8px 24px rgba(0,0,0,.22);}
.notif-bell__icon{font-size:19px; line-height:1; transition:transform .2s;}
.notif-bell--active .notif-bell__icon{animation:bell-ring .4s ease;}
@keyframes bell-ring{0%{transform:rotate(0)}25%{transform:rotate(14deg)}50%{transform:rotate(-12deg)}75%{transform:rotate(8deg)}100%{transform:rotate(0)}}
.notif-bell__count{
  position:absolute; top:-6px; right:-5px; min-width:20px; height:20px; padding:0 5px;
  border-radius:999px; background:#ff4d6d; color:#fff; font-size:11px; font-weight:900;
  display:grid; place-items:center; box-shadow:0 4px 12px rgba(255,77,109,.45);
  border:2px solid rgba(10,14,24,.9);
}
.notif-bell__count.hidden{display:none}

/* Panel */
.notif-panel{
  position:absolute; right:0; top:54px; width:min(94vw, 400px); z-index:80;
  background:rgba(10,14,24,.97); border:1px solid rgba(255,255,255,.12); border-radius:20px;
  box-shadow:0 24px 64px rgba(0,0,0,.55); overflow:hidden;
  animation:notif-in .18s ease;
}
@keyframes notif-in{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.notif-panel.hidden{display:none}

.notif-panel__head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.notif-panel__head-left{display:flex; align-items:center; gap:8px;}
.notif-panel__title{font-weight:900; font-size:14px;}
.notif-unread-badge{
  font-size:10px; font-weight:800; padding:2px 7px; border-radius:999px;
  background:rgba(99,102,241,.2); border:1px solid rgba(99,102,241,.35); color:#a5b4fc;
}
.notif-unread-badge.hidden{display:none}
.notif-panel__head-actions{display:flex; align-items:center; gap:4px;}
.notif-action-btn{
  font-size:11px; font-weight:700; padding:4px 10px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.65); transition:all .13s; white-space:nowrap;
}
.notif-action-btn:hover{background:rgba(255,255,255,.12); color:#fff;}
.notif-action-btn--danger{color:rgba(248,113,113,.75); border-color:rgba(239,68,68,.18);}
.notif-action-btn--danger:hover{background:rgba(239,68,68,.12); color:#f87171;}
.notif-action-btn.hidden{display:none}

/* List */
.notif-list{max-height:60vh; overflow-y:auto; padding:8px; display:flex; flex-direction:column; gap:6px;}
.notif-list::-webkit-scrollbar{width:4px;}
.notif-list::-webkit-scrollbar-track{background:transparent;}
.notif-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:999px;}
.notif-empty{padding:32px 16px; text-align:center; color:rgba(255,255,255,.3); font-size:13px;}

/* Item */
.notif-item{
  display:flex; align-items:flex-start; gap:10px;
  padding:10px 12px; border-radius:14px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  position:relative; transition:background .13s, border-color .13s;
}
.notif-item--unread{background:rgba(99,102,241,.10); border-color:rgba(99,102,241,.22);}
.notif-item--news{cursor:pointer;}
.notif-item--news:hover{background:rgba(52,211,153,.08); border-color:rgba(52,211,153,.2);}

.notif-item__icon-col{display:flex; flex-direction:column; align-items:center; gap:4px; flex-shrink:0;}
.notif-kind-icon{
  width:32px; height:32px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:15px; border:1px solid transparent; flex-shrink:0;
}
.notif-avatar{flex-shrink:0; margin-top:2px;}

.notif-item__body{min-width:0; flex:1; display:flex; flex-direction:column; gap:3px;}
.notif-item__text{font-size:13px; line-height:1.4; color:rgba(255,255,255,.85); word-break:break-word;}
.notif-item__news-title{font-size:12px; font-weight:700; color:#fff; background:rgba(52,211,153,.08); border:1px solid rgba(52,211,153,.15); border-radius:8px; padding:4px 8px; margin-top:2px;}
.notif-item__excerpt{font-size:12px; color:rgba(255,255,255,.55); line-height:1.4;}
.notif-item__time{font-size:11px; color:rgba(255,255,255,.3); margin-top:2px;}

.notif-item__dot{
  width:7px; height:7px; border-radius:50%; background:#818cf8;
  flex-shrink:0; margin-top:4px;
  box-shadow:0 0 6px rgba(99,102,241,.6);
}
.flash-focus{outline:2px solid rgba(124,156,255,.95)!important; box-shadow:0 0 0 6px rgba(124,156,255,.18)!important; transition:all .2s ease}


.modal__body{min-height:0;}
#publicProfileModal .modal__card{width:min(760px, 96vw);}
#publicProfileModal .modal__body{min-height:0; overflow:auto; overscroll-behavior:contain;}

.topbar__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.award-list{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0;}
.award-list--compact{gap:8px;}
.award-chip{display:inline-flex; align-items:flex-start; gap:8px; padding:8px 12px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 24px rgba(0,0,0,.14); max-width:100%;}
.award-chip__icon{font-size:18px; line-height:1; margin-top:1px;}
.award-chip__body{display:flex; flex-direction:column; min-width:0; max-width:min(100%, 360px);}
.award-chip__title{font-weight:800; line-height:1.1; overflow-wrap:anywhere;}
.award-chip__desc{font-size:12px; color:var(--muted); line-height:1.2; overflow-wrap:anywhere;}
.award-chip__meta{font-size:11px; color:var(--muted); line-height:1.2; margin-top:4px; overflow-wrap:anywhere;}

.admin-layout{display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:16px;}
.admin-toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.admin-users-list{display:flex; flex-direction:column; gap:10px; max-height:70vh; overflow:auto;}
.admin-user-card{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); cursor:pointer;}
.admin-user-card.active{border-color:rgba(124,156,255,.42); box-shadow:0 0 0 1px rgba(124,156,255,.24) inset;}
.admin-user-card__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.admin-user-card__ban{font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,77,109,.16); border:1px solid rgba(255,77,109,.26);}
.admin-user-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap;}
.admin-user-head__title{font-size:22px; font-weight:900;}
.admin-actions-row{display:flex; gap:10px; flex-wrap:wrap; align-items:end;}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px;}
@media (max-width: 900px){ .admin-layout{grid-template-columns:1fr;} .grid2{grid-template-columns:1fr;} }


.profile-awards-panel{margin-top:4px;}
.profile-awards-wrap .awards{margin-top:0;}
.profile-settings{align-items:flex-start;gap:18px;flex-wrap:wrap;}
.profile-settings__side{flex:1 1 320px;min-width:280px;}
.profile-avatar-preview{flex:0 0 auto;}

.profile-awards-wrap .award-list{margin-top:0;}
.profile-awards-wrap .award-chip{max-width:min(100%, 520px);}
#adminSelectedAwards .award-chip{max-width:min(100%, 420px);}

.profile-shell{display:flex; flex-direction:column; gap:16px;}
.profile-top-card{
  display:flex; gap:16px; align-items:center; padding:16px 18px; border-radius:22px;
  border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.profile-top-card__meta{min-width:0; display:flex; flex-direction:column; gap:6px;}
.profile-top-card__name{font-size:28px; font-weight:900; line-height:1.05; word-break:break-word;}
.profile-top-card__login{font-size:14px; color:var(--muted);}
.profile-top-card__stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.profile-mini-stat{min-width:120px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.profile-mini-stat span{display:block; font-size:12px; color:var(--muted); margin-bottom:4px;}
.profile-mini-stat b{font-size:16px;}
.profile-tabs{display:flex; gap:10px; flex-wrap:wrap;}
.profile-tab{
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:#fff;
  border-radius:999px; padding:10px 16px; font-weight:800; cursor:pointer; transition:.18s ease;
}
.profile-tab:hover{transform:translateY(-1px); background:rgba(255,255,255,.06);}
.profile-tab.active{background:linear-gradient(135deg, rgba(106,190,255,.24), rgba(167,139,250,.20)); border-color:rgba(124,156,255,.34); box-shadow:0 10px 24px rgba(0,0,0,.16);}
.profile-tabpanel{display:none;}
.profile-tabpanel.active{display:block;}
.profile-grid{align-items:start;}

@media (max-width: 900px){
  .profile-top-card{align-items:flex-start; flex-direction:column;}
  .profile-top-card__name{font-size:24px;}
}


.admin-visits-box{display:flex; flex-direction:column; gap:16px;}
.admin-visits__stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.metric-card{padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));}
.metric-card__label{font-size:12px; color:var(--muted); margin-bottom:6px;}
.metric-card__value{font-size:28px; font-weight:900; line-height:1.1;}
.metric-card__value--sm{font-size:20px;}
.admin-visits__chartWrap,.admin-visits__hours{padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);}
.admin-visits__chartTitle{font-weight:800; margin-bottom:12px;}
.admin-visits__chart{display:flex; align-items:flex-end; gap:8px; overflow-x:auto; padding-bottom:4px;}
.admin-visits__barCol{min-width:42px; display:flex; flex-direction:column; align-items:center; gap:6px;}
.admin-visits__bar{width:100%; border-radius:12px 12px 6px 6px; background:linear-gradient(180deg, rgba(124,156,255,.9), rgba(124,156,255,.35)); border:1px solid rgba(124,156,255,.28);}
.admin-visits__barValue{font-size:12px; font-weight:700; color:var(--muted);}
.admin-visits__barLabel{font-size:11px; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.02em; min-height:52px;}
.admin-visits__hoursGrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;}
.hour-chip{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); display:flex; justify-content:space-between; gap:10px; align-items:center;}
.hour-chip.active{border-color:rgba(124,156,255,.42); background:rgba(124,156,255,.12); box-shadow:0 0 0 1px rgba(124,156,255,.18) inset;}
.hour-chip span{color:var(--muted); font-size:12px;}
.hour-chip b{font-size:14px;}
@media (max-width: 980px){
  .admin-visits__stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin-visits__hoursGrid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width: 640px){
  .admin-visits__stats{grid-template-columns:1fr;}
  .admin-visits__hoursGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


:root{
  --app-height: 100vh;
  --tg-bg: transparent;
  --tg-text: transparent;
  --tg-hint: transparent;
  --tg-button: transparent;
  --tg-button-text: transparent;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

body{
  min-height: var(--app-height);
}

.tg-auth{margin-top:14px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);}
.tg-auth__text{font-weight:700; margin-bottom:8px;}

.is-telegram body{
  padding-bottom: calc(16px + var(--safe-bottom));
}
.is-telegram .topbar{
  padding-top: calc(12px + var(--safe-top));
}
.is-telegram .container{
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}
.is-telegram .card, .is-telegram .panel, .is-telegram .sidebar{
  background: color-mix(in srgb, var(--bg) 88%, var(--tg-section-bg, transparent) 12%);
}

@media (max-width: 980px){
  .container{padding:12px;}
  .topbar{padding:14px 12px; align-items:flex-start; flex-direction:column;}
  .topbar__right{width:100%; justify-content:flex-end;}
  .brand__title{font-size:20px;}
  .brand__subtitle{font-size:12px; max-width:none;}
  .tabbar{position:sticky; top:8px; z-index:20; padding:8px 10px; border-radius:16px; background:rgba(15,17,22,.88); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08);}
  .tabsrow{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
  .tabsrow::-webkit-scrollbar{display:none;}
  .tabsrow .tab{white-space:nowrap; flex:0 0 auto;}
  .row{flex-wrap:wrap;}
  .grid2{grid-template-columns:1fr;}
  .actions{flex-direction:column; align-items:stretch;}
  .actions > *{width:100%;}
  .chat{width:min(100%, 420px); right:12px; bottom:12px;}
}

@media (max-width: 720px){
  body{font-size:14px;}
  .container{padding:10px;}
  .topbar{position:sticky; top:0; z-index:30; border-radius:0 0 18px 18px; margin:0 -10px 10px; padding:12px 10px;}
  .topbar__right{gap:8px;}
  .user-badge{max-width:100%;}
  .sidebar{width:min(92vw, 360px); padding:12px 10px calc(16px + var(--safe-bottom));}
  .tabbar__title{font-size:15px;}
  .hero{padding:18px 14px;}
  .hero__title{font-size:24px; line-height:1.08;}
  .hero__actions{display:grid; grid-template-columns:1fr; gap:10px;}
  .hero__actions .btn{width:100%;}
  .hero__meta{display:grid; grid-template-columns:1fr; gap:6px;}
  .hcard{padding:14px;}
  .chat{left:10px; right:10px; width:auto; bottom:10px; max-height:min(72vh, 560px);}
  .chat.chat--big{top:calc(60px + var(--safe-top)); bottom:10px; max-height:none;}
  .modal__card{width:min(100vw - 20px, 760px); max-height:calc(var(--app-height) - 20px - var(--safe-top) - var(--safe-bottom));}
  .table{min-width:640px;}
  .profile-top-card{padding:14px;}
  .profile-mini-stat{min-width:calc(50% - 6px);}
  .admin-user-head__title{font-size:20px;}
}

@media (max-width: 520px){
  .brand__subtitle{display:none;}
  .btn, .chip, .tab, input, select{font-size:14px;}
  .card{border-radius:16px;}
  .panel{padding:14px;}
  .homegrid{gap:10px;}
  .hcard__title{font-size:16px;}
  .profile-top-card__name{font-size:22px;}
  .profile-top-card__stats{display:grid; grid-template-columns:1fr 1fr;}
  .profile-mini-stat{min-width:0;}
  .notif-panel{right:0; left:auto; width:min(92vw, 360px);}
  .tg-bind-cta{width:100%; justify-content:center;}
}

/* Telegram auth/link */
.tg-widget-wrap{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.tg-widget-wrap iframe{max-width:100%}
.tg-auth{display:grid;gap:10px}

/* ---------- HowTo / Start playing ---------- */
.howto-page{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.howto-breadcrumb{
  font-size:14px;
  padding:4px 4px 0;
}
.howto-hero{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(38,255,122,.12), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(140,92,255,.18), transparent 52%),
    linear-gradient(135deg, rgba(7,18,18,.92), rgba(13,18,39,.96));
  border:1px solid rgba(69,255,157,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.howto-hero__glow{
  content:"";
  position:absolute;
  inset:auto auto -120px -120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,255,127,.18), transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}
.howto-hero__content{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
  gap:26px;
  padding:30px;
}
.howto-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:#baffd3;
  background:rgba(38,255,122,.08);
  border:1px solid rgba(38,255,122,.16);
}
.howto-title{
  margin:0;
  font-size: clamp(34px, 5vw, 56px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.howto-lead{
  max-width:820px;
  margin:16px 0 0;
  font-size:20px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}
.howto-benefits{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap:14px;
  margin-top:26px;
}
.howto-benefit{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.howto-benefit__label{
  color:rgba(255,255,255,.56);
  font-size:13px;
  margin-bottom:6px;
}
.howto-benefit__value{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.03em;
}
.howto-benefit__value--small{
  font-size:18px;
  line-height:1.35;
}
.howto-copy{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(159,110,255,.28);
  background:linear-gradient(135deg, rgba(141,95,255,.96), rgba(190,77,255,.92));
  color:#fff;
  border-radius:20px;
  padding:14px 18px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(111,59,255,.30);
}
.howto-copy.is-copied{
  transform:translateY(1px);
  box-shadow:0 10px 24px rgba(56,255,149,.20);
}
.howto-copy__code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.15);
}
.howto-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.howto-action{
  min-height:50px;
  padding-inline:18px;
}
.howto-hero__right{
  display:flex;
  align-items:center;
  justify-content:center;
}
.howto-promo-card{
  width:100%;
  min-height:100%;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(136,98,255,.32);
  background:linear-gradient(180deg, rgba(17,22,46,.92), rgba(13,15,28,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.howto-promo-card__badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, #ff644f, #ff3d54);
  color:#fff;
  font-weight:900;
  font-size:12px;
  margin-bottom:18px;
}
.howto-promo-card__icon{font-size:52px;line-height:1;margin-bottom:14px}
.howto-promo-card__title{font-size:28px;font-weight:900;line-height:1.1}
.howto-promo-card__text{margin-top:14px;color:rgba(255,255,255,.72);line-height:1.6}
.howto-promo-card__link{
  display:block;
  margin-top:18px;
  word-break:break-all;
  color:#97f5ff;
  font-weight:700;
}
.howto-section__title{
  margin:0 0 14px;
  font-size:22px;
}
.howto-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}
.howto-step{
  padding:22px;
  min-height:260px;
  background:linear-gradient(180deg, rgba(12,17,34,.96), rgba(11,13,24,.94));
  border-radius:24px;
}
.howto-step__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:30px;
}
.howto-step__icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:rgba(38,255,122,.08);
  border:1px solid rgba(38,255,122,.16);
}
.howto-step:nth-child(2) .howto-step__icon{
  background:rgba(57,133,255,.12);
  border-color:rgba(57,133,255,.20);
}
.howto-step:nth-child(3) .howto-step__icon{
  background:rgba(173,87,255,.10);
  border-color:rgba(173,87,255,.18);
}
.howto-step:nth-child(4) .howto-step__icon{
  background:rgba(255,170,61,.10);
  border-color:rgba(255,170,61,.18);
}
.howto-step__num{
  font-size:54px;
  font-weight:900;
  line-height:1;
  color:rgba(80,129,255,.25);
}
.howto-step h3{
  margin:0 0 12px;
  font-size:20px;
}
.howto-step p{
  margin:0;
  color:rgba(255,255,255,.65);
  line-height:1.6;
}
.howto-step__link{
  display:inline-flex;
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(57,133,255,.20);
  background:rgba(57,133,255,.10);
  color:#7cb7ff;
  font-weight:800;
}
.howto-promo-help{
  padding:24px;
  border-radius:26px;
}
.howto-promo-help__head h2{margin:0;font-size:34px}
.howto-promo-help__head p{margin:8px 0 0}
.howto-methods{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.howto-method{
  padding:20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.howto-method__icon{font-size:30px;margin-bottom:12px}
.howto-method h3{margin:0 0 10px;font-size:20px}
.howto-method p{margin:0;color:rgba(255,255,255,.68);line-height:1.6}

@media (max-width: 1100px){
  .howto-steps{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 860px){
  .howto-hero__content,
  .howto-methods{grid-template-columns:1fr;}
  .howto-title{font-size:38px;}
  .howto-lead{font-size:17px;}
  .howto-benefits{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .howto-steps{grid-template-columns:1fr;}
  .howto-copy{width:100%;justify-content:center;flex-wrap:wrap;text-align:center;}
  .howto-actions > *{flex:1 1 100%;justify-content:center;}
  .howto-promo-help__head h2{font-size:28px;}
}

/* ---------- Fishing refresh: rods + useful ---------- */
.fish-card{ overflow:hidden; }
.fish-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  margin-bottom:10px;
  border-radius:999px;
  border:1px solid rgba(110,231,255,.20);
  background: linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.08));
  color: rgba(226,240,255,.92);
  font-size:12px;
  font-weight:800;
  letter-spacing:.24px;
  text-transform:uppercase;
}
.fish-hero{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  background:
    radial-gradient(1200px 300px at 0% 0%, rgba(110,231,255,.10), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(167,139,250,.11), transparent 42%);
}
.fish-hero h1{ margin-bottom:8px; }
.fish-hero__meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  min-width: 260px;
}
.fish-stat{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}
.fish-stat span{
  display:block;
  color: var(--muted);
  font-size:12px;
  margin-bottom:4px;
}
.fish-stat b{
  font-size:20px;
  line-height:1;
}
.fish-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 0 18px 16px;
}
.fish-quicklink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:700;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.fish-quicklink:hover{
  transform: translateY(-1px);
  border-color: rgba(110,231,255,.26);
  background: rgba(110,231,255,.08);
}
.fish-miniinfo{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  padding: 0 18px 18px;
}
.fish-miniinfo--stack{ grid-template-columns: 1fr 1fr; }
.fish-tip{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  line-height:1.55;
}
.fish-tip--strong{
  background: linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.08));
  border-color: rgba(110,231,255,.18);
}
.fish-block{
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
    rgba(0,0,0,.16);
}
.fish-block__head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:12px;
}
.fish-block__head h2{
  margin:0 0 6px 0;
}
.fish-badges,
.fish-namecell__tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.fish-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:11px;
  line-height:1;
  color: rgba(255,255,255,.82);
  text-transform:uppercase;
  letter-spacing:.22px;
}
.fish-badge--accent{
  background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.16));
  border-color: rgba(110,231,255,.30);
  color:#f3fbff;
}
.fish-note{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  line-height:1.5;
}
.fish-tablewrap{
  border-top: 0;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.fish-table{
  min-width: 900px;
}
.fish-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background: rgba(16,20,28,.94);
  backdrop-filter: blur(10px);
}
.fish-table tbody tr:hover{
  background: rgba(110,231,255,.045);
}
.fish-namecell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 168px;
}
.fish-namecell__title{
  font-weight:800;
  font-size:13px;
}
.fish-weight,
.fish-softpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.fish-softpill--alt{
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.18);
}
.fish-pct{
  min-width: 150px;
}
.fish-advice{
  background:
    radial-gradient(700px 180px at 0% 0%, rgba(110,231,255,.10), transparent 50%),
    rgba(255,255,255,.03);
}
.fish-advice h2{
  margin:0 0 8px 0;
}
.mechanics-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding: 0 18px 18px;
}
.mechanic-card{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.mechanic-card h3{
  margin:0 0 8px 0;
  font-size:15px;
}
.mechanic-card p{
  margin:0;
  color: rgba(255,255,255,.78);
  line-height:1.5;
  font-size:13px;
}
.fish-times h2{ margin:0 0 8px 0; }
.fish-timegrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}
.useful-grid{
  gap:16px;
}
.setcard{
  position:relative;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  box-shadow: 0 16px 36px rgba(0,0,0,.20);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.setcard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 20px 44px rgba(0,0,0,.24);
}
.setcard__head{
  position:relative;
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.setcard__head h2{
  margin:0 0 6px 0;
  font-size:17px;
}
.setcard__badge{
  display:inline-flex;
  margin-bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.24px;
}
.setcard__body{
  gap:12px;
  padding:14px 16px 16px;
}
.setrow{
  grid-template-columns: 88px 1fr;
  gap:12px;
  align-items:flex-start;
}
.setvalue{ line-height:1.5; }
.setnote{
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.setcard--starter .setcard__head{ background: linear-gradient(135deg, rgba(110,231,255,.14), rgba(110,231,255,.05)); }
.setcard--trophy .setcard__head{ background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(167,139,250,.06)); }
.setcard--trolling .setcard__head{ background: linear-gradient(135deg, rgba(45,212,191,.16), rgba(59,130,246,.06)); }
.setcard--shore .setcard__head{ background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(249,115,22,.06)); }
.setcard--spin .setcard__head{ background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(110,231,255,.05)); }
.setcard--light .setcard__head{ background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(192,132,252,.08)); }

#tab-rods .table td,
#tab-useful .table td{ vertical-align: middle; }
#tab-rods .table th:nth-child(n+3),
#tab-rods .table td:nth-child(n+3){ white-space: nowrap; }

@media (max-width: 980px){
  .fish-hero,
  .fish-block__head{
    flex-direction:column;
  }
  .fish-hero__meta{
    grid-template-columns: repeat(4, minmax(0,1fr));
    min-width: 0;
    width:100%;
  }
  .mechanics-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .fish-timegrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 860px){
  .fish-miniinfo,
  .fish-miniinfo--stack,
  .mechanics-grid{
    grid-template-columns: 1fr;
  }
  .fish-hero__meta{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .fish-pct{
    min-width: 124px;
  }
  .fish-table{
    min-width: 760px;
  }
  .setrow{
    grid-template-columns: 1fr;
    gap:6px;
  }
}


/* ---------- Fishing useful expansion ---------- */
.useful-page{ overflow:visible; }
.useful-quicknav{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:12px;
  padding:0 18px 18px;
}
.useful-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-height:92px;
  padding:14px 14px 13px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  background: linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.useful-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.20);
  box-shadow: 0 16px 38px rgba(0,0,0,.24);
}
.useful-tile__icon{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
  font-size:20px;
}
.useful-tile__title{
  font-weight:850;
  letter-spacing:.2px;
}
.useful-tile__text{
  font-size:12px;
  line-height:1.35;
  color: var(--muted);
}
.useful-tile--gear{ background: linear-gradient(145deg, rgba(110,231,255,.16), rgba(167,139,250,.08)); }
.useful-tile--ach{ background: linear-gradient(145deg, rgba(250,204,21,.16), rgba(245,158,11,.08)); }
.useful-tile--tour{ background: linear-gradient(145deg, rgba(251,191,36,.16), rgba(236,72,153,.08)); }
.useful-tile--license{ background: linear-gradient(145deg, rgba(196,181,253,.16), rgba(99,102,241,.08)); }
.useful-tile--transport{ background: linear-gradient(145deg, rgba(45,212,191,.16), rgba(14,165,233,.08)); }
.useful-tile--buyers{ background: linear-gradient(145deg, rgba(74,222,128,.16), rgba(16,185,129,.08)); }
.useful-tile--zones{ background: linear-gradient(145deg, rgba(96,165,250,.16), rgba(34,197,94,.08)); }
.useful-tile--sets{ background: linear-gradient(145deg, rgba(244,114,182,.16), rgba(167,139,250,.08)); }
.useful-callout{
  margin:0 18px 18px;
  border-color: rgba(110,231,255,.16);
  background: linear-gradient(135deg, rgba(110,231,255,.08), rgba(167,139,250,.06));
}
.useful-callout h2{ margin:0 0 8px; }
.useful-block,
.useful-split > .useful-block{ scroll-margin-top: 90px; }
.useful-block{ padding:0 18px 18px; }
.useful-block--tight{ padding-bottom:18px; }
.useful-block--balanced{ display:flex; flex-direction:column; min-width:0; }
.useful-block__head{
  display:grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr);
  align-items:start;
  gap:12px 18px;
  margin-bottom:14px;
}
.useful-block__head h2{ margin:0; }
.useful-block__head p{
  margin:2px 0 0;
  max-width:none;
  text-align:left;
}
.useful-block__head--tight{
  grid-template-columns: 1fr;
  margin-bottom:12px;
}
.useful-split{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:18px;
  padding:0 18px;
  align-items:start;
}

.info-panel{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:0;
  height:auto;
}

.useful-block--balanced{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.useful-split + .useful-split{
  margin-top: 6px;
}
.useful-block--balanced .info-panel{
  flex:1 1 auto;
}
.useful-split--top{ padding-bottom:0; }
.useful-split--zones{ padding:0; }
.useful-card-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:14px;
  align-items:stretch;
}
.useful-card-grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.useful-card-grid--buyers{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
}
.info-card,
.info-panel,
.zone-card,
.stack-card{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.info-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  height:100%;
  min-width:0;
}
.info-card__icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  font-size:20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.info-card h3,
.info-panel h3,
.zone-card h3,
.stack-card h3{ margin:0; }
.info-card p,
.info-panel p,
.zone-card p,
.stack-card p{ margin:0; line-height:1.55; }
.info-card--accent{ background: linear-gradient(135deg, rgba(110,231,255,.12), rgba(167,139,250,.06)); }
.info-card--good{ background: linear-gradient(135deg, rgba(74,222,128,.14), rgba(16,185,129,.08)); }
.info-panel{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  height:100%;
  min-width:0;
}
.info-panel--warning{ background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(239,68,68,.06)); }
.stack-list{ display:flex; flex-direction:column; gap:12px; }
.stack-card{ padding:14px 16px; }
.stack-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.stack-card--mystery{ background: linear-gradient(135deg, rgba(167,139,250,.14), rgba(0,0,0,.18)); }
.reward-chip{
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  font-size:12px;
  font-weight:800;
}
.reward-chip--ghost{ background: rgba(0,0,0,.20); }
.mini-list{
  margin:0;
  padding-left:18px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.mini-list--compact{ gap:6px; }
.useful-tipbox{
  margin-top:14px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(110,231,255,.06));
}
.useful-tipbox p{ margin:0; line-height:1.55; }
.zone-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin-bottom:14px;
}
.zone-card{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.zone-card__icon{
  width:46px;
  height:46px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.zone-card--fresh{ background: linear-gradient(135deg, rgba(96,165,250,.10), rgba(34,197,94,.06)); }
.zone-card--sea{ background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(59,130,246,.06)); }
.zone-card--reef{ background: linear-gradient(135deg, rgba(34,197,94,.12), rgba(251,191,36,.08)); }
.zone-chip{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  font-size:12px;
  font-weight:800;
}
.zone-chip--bad{ background: rgba(239,68,68,.12); }
.zone-chip--mid{ background: rgba(245,158,11,.12); }
.zone-chip--good{ background: rgba(34,197,94,.14); }
.useful-timechips{ gap:8px; margin-top:12px; }
@media (max-width: 1180px){
  .useful-quicknav{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .useful-quicknav,
  .useful-card-grid--3,
  .useful-card-grid--buyers,
  .zone-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .useful-block__head{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  .useful-split,
  .useful-quicknav,
  .useful-card-grid,
  .useful-card-grid--3,
  .useful-card-grid--buyers,
  .zone-grid{ grid-template-columns: 1fr; }
  .useful-block__head,
  .useful-block__head--tight{ grid-template-columns: 1fr; }
}

/* ---------- Profiles / avatars ---------- */
.user-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; overflow:hidden; flex:0 0 auto;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(110,231,255,.25), rgba(167,139,250,.25));
  color:#fff; font-weight:800; box-shadow: 0 8px 24px rgba(0,0,0,.28);
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.avatar--xs{ width:22px; height:22px; font-size:10px; }
.avatar--sm{ width:34px; height:34px; font-size:12px; }
.avatar--lg{ width:72px; height:72px; font-size:24px; }
.avatar--xl{ width:96px; height:96px; font-size:30px; }
.userlink{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid rgba(255,255,255,.10); border-radius:999px;
  background: rgba(255,255,255,.04); color:var(--text);
  padding:4px 10px; cursor:pointer; font-weight:700;
}
.userlink:hover{ background: rgba(255,255,255,.08); }
.profile-settings{ display:flex; gap:14px; align-items:center; margin-bottom:10px; }
.profile-settings__side{ flex:1 1 auto; }
.profile-avatar-preview{ display:flex; align-items:center; justify-content:center; min-width:84px; }
.profile-hero{ display:flex; gap:14px; align-items:center; margin-bottom:14px; }
.profile-hero__name{ font-size:22px; font-weight:800; }
.profile-hero__login{ color:var(--muted); margin-top:4px; }

/* ---------- Chat refresh (see main chat block above) ---------- */
.chat__msg--me .chat__bubble{
  background: linear-gradient(135deg, rgba(99,179,237,.22), rgba(167,139,250,.25));
  border-color: rgba(99,179,237,.30);
}
@media (max-width: 720px){
  .profile-settings{ flex-direction:column; align-items:flex-start; }
  .chat{ right:10px; bottom:10px; width: calc(100vw - 20px); max-width:none; }
  .chat__stack{ max-width:85%; }
}


/* ---------- Rich profile cosmetics ---------- */
.panel--soft{
  background: rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
}
.field textarea{
  width:100%;
  min-height:96px;
  resize:vertical;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: var(--text);
  padding:12px 14px;
}
.name-decor{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.name-decor__text{ font-weight:800; min-width:0; word-break:break-word; }
.profile-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700;
  border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06);
}
.svg-icon{ display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; }
.svg-icon svg{ width:1em; height:1em; display:block; fill:currentColor; }
.svg-icon--nick{ font-size:16px; }
.avatar-stack{ display:inline-flex; flex-direction:column; align-items:center; gap:4px; }
.svg-icon--avatar{ font-size:16px; padding:3px 6px; border-radius:999px; background: rgba(255,255,255,.06); }
.user-badge{ align-items:center; }
.user-badge .name-decor__text{ font-size:14px; }
.user-badge__online{ opacity:.78; font-size:12px; }
.userlink{ flex-wrap:wrap; }
.profile-hero__name .name-decor__text{ font-size:22px; }
.thread__msg .meta{ align-items:center; }

/* --- Users page / public profile wall --- */
.users-toolbar{ display:flex; gap:12px; justify-content:space-between; align-items:center; margin:0 0 14px; flex-wrap:wrap; }
.users-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.user-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:14px; box-shadow:0 10px 24px rgba(0,0,0,.18); }
.user-card__top{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.user-card__meta{ min-width:0; }
.user-card__name .userlink{ padding:0; }
.user-card__stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.user-card__stats > div{ display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.03); }
.profile-public-actions{ margin:14px 0; }
.wall-form textarea{ width:100%; min-height:86px; resize:vertical; margin:10px 0; }
.wall-form__actions{ display:flex; justify-content:flex-end; margin-bottom:10px; }
.wall-list{ display:flex; flex-direction:column; gap:10px; }
.wall-comment{ padding:12px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); }
.wall-comment__meta{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.wall-comment__text{ white-space:pre-wrap; word-break:break-word; }
.pager{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.pager--bottom{ margin-top:16px; }
#pubProfileLikeBtn.active{ border-color:rgba(255,120,160,.45); box-shadow:0 0 0 1px rgba(255,120,160,.2) inset; }
.row-footer__comment .userlink{ vertical-align:middle; }
.thread__msg .txt{ white-space:pre-wrap; word-break:break-word; }

/* ---------- Profile live preview ---------- */
#pfLivePreview{display:block;}
.profile-preview-card{
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  background:rgba(20,25,40,.55);
  overflow:hidden;
}
.profile-preview-head{display:flex;align-items:center;gap:12px;}
.profile-preview-meta{min-width:0;}
.profile-preview-name{font-weight:800;font-size:18px;line-height:1.15;margin-bottom:2px;word-break:break-word;}
.profile-preview-login{font-size:12px;opacity:.75;}
.profile-preview-hint{margin-top:10px;font-size:11px;opacity:.5;text-align:center;}


.flash-focus{outline:2px solid rgba(124,156,255,.95)!important; box-shadow:0 0 0 6px rgba(124,156,255,.18)!important; transition:all .2s ease}


.modal__body{min-height:0;}
#publicProfileModal .modal__card{width:min(760px, 96vw);}
#publicProfileModal .modal__body{min-height:0; overflow:auto; overscroll-behavior:contain;}

.topbar__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}

.award-list{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 0;}
.award-list--compact{gap:8px;}
.award-chip{display:inline-flex; align-items:flex-start; gap:8px; padding:8px 12px; border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); box-shadow:0 10px 24px rgba(0,0,0,.14); max-width:100%;}
.award-chip__icon{font-size:18px; line-height:1; margin-top:1px;}
.award-chip__body{display:flex; flex-direction:column; min-width:0; max-width:min(100%, 360px);}
.award-chip__title{font-weight:800; line-height:1.1; overflow-wrap:anywhere;}
.award-chip__desc{font-size:12px; color:var(--muted); line-height:1.2; overflow-wrap:anywhere;}
.award-chip__meta{font-size:11px; color:var(--muted); line-height:1.2; margin-top:4px; overflow-wrap:anywhere;}

.admin-layout{display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:16px;}
.admin-toolbar{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.admin-users-list{display:flex; flex-direction:column; gap:10px; max-height:70vh; overflow:auto;}
.admin-user-card{padding:12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); cursor:pointer;}
.admin-user-card.active{border-color:rgba(124,156,255,.42); box-shadow:0 0 0 1px rgba(124,156,255,.24) inset;}
.admin-user-card__top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start;}
.admin-user-card__ban{font-size:12px; padding:4px 8px; border-radius:999px; background:rgba(255,77,109,.16); border:1px solid rgba(255,77,109,.26);}
.admin-user-head{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:12px; flex-wrap:wrap;}
.admin-user-head__title{font-size:22px; font-weight:900;}
.admin-actions-row{display:flex; gap:10px; flex-wrap:wrap; align-items:end;}
.grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-bottom:12px;}
@media (max-width: 900px){ .admin-layout{grid-template-columns:1fr;} .grid2{grid-template-columns:1fr;} }


.profile-awards-panel{margin-top:4px;}
.profile-awards-wrap .awards{margin-top:0;}
.profile-settings{align-items:flex-start;gap:18px;flex-wrap:wrap;}
.profile-settings__side{flex:1 1 320px;min-width:280px;}
.profile-avatar-preview{flex:0 0 auto;}

.profile-awards-wrap .award-list{margin-top:0;}
.profile-awards-wrap .award-chip{max-width:min(100%, 520px);}
#adminSelectedAwards .award-chip{max-width:min(100%, 420px);}

.profile-shell{display:flex; flex-direction:column; gap:16px;}
.profile-top-card{
  display:flex; gap:16px; align-items:center; padding:16px 18px; border-radius:22px;
  border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}
.profile-top-card__meta{min-width:0; display:flex; flex-direction:column; gap:6px;}
.profile-top-card__name{font-size:28px; font-weight:900; line-height:1.05; word-break:break-word;}
.profile-top-card__login{font-size:14px; color:var(--muted);}
.profile-top-card__stats{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;}
.profile-mini-stat{min-width:120px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);}
.profile-mini-stat span{display:block; font-size:12px; color:var(--muted); margin-bottom:4px;}
.profile-mini-stat b{font-size:16px;}
.profile-tabs{display:flex; gap:10px; flex-wrap:wrap;}
.profile-tab{
  border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.04); color:#fff;
  border-radius:999px; padding:10px 16px; font-weight:800; cursor:pointer; transition:.18s ease;
}
.profile-tab:hover{transform:translateY(-1px); background:rgba(255,255,255,.06);}
.profile-tab.active{background:linear-gradient(135deg, rgba(106,190,255,.24), rgba(167,139,250,.20)); border-color:rgba(124,156,255,.34); box-shadow:0 10px 24px rgba(0,0,0,.16);}
.profile-tabpanel{display:none;}
.profile-tabpanel.active{display:block;}
.profile-grid{align-items:start;}

@media (max-width: 900px){
  .profile-top-card{align-items:flex-start; flex-direction:column;}
  .profile-top-card__name{font-size:24px;}
}


.admin-visits-box{display:flex; flex-direction:column; gap:16px;}
.admin-visits__stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px;}
.metric-card{padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));}
.metric-card__label{font-size:12px; color:var(--muted); margin-bottom:6px;}
.metric-card__value{font-size:28px; font-weight:900; line-height:1.1;}
.metric-card__value--sm{font-size:20px;}
.admin-visits__chartWrap,.admin-visits__hours{padding:14px 16px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03);}
.admin-visits__chartTitle{font-weight:800; margin-bottom:12px;}
.admin-visits__chart{display:flex; align-items:flex-end; gap:8px; overflow-x:auto; padding-bottom:4px;}
.admin-visits__barCol{min-width:42px; display:flex; flex-direction:column; align-items:center; gap:6px;}
.admin-visits__bar{width:100%; border-radius:12px 12px 6px 6px; background:linear-gradient(180deg, rgba(124,156,255,.9), rgba(124,156,255,.35)); border:1px solid rgba(124,156,255,.28);}
.admin-visits__barValue{font-size:12px; font-weight:700; color:var(--muted);}
.admin-visits__barLabel{font-size:11px; color:var(--muted); writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.02em; min-height:52px;}
.admin-visits__hoursGrid{display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;}
.hour-chip{padding:10px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.03); display:flex; justify-content:space-between; gap:10px; align-items:center;}
.hour-chip.active{border-color:rgba(124,156,255,.42); background:rgba(124,156,255,.12); box-shadow:0 0 0 1px rgba(124,156,255,.18) inset;}
.hour-chip span{color:var(--muted); font-size:12px;}
.hour-chip b{font-size:14px;}
@media (max-width: 980px){
  .admin-visits__stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .admin-visits__hoursGrid{grid-template-columns:repeat(4,minmax(0,1fr));}
}
@media (max-width: 640px){
  .admin-visits__stats{grid-template-columns:1fr;}
  .admin-visits__hoursGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


:root{
  --app-height: 100vh;
  --tg-bg: transparent;
  --tg-text: transparent;
  --tg-hint: transparent;
  --tg-button: transparent;
  --tg-button-text: transparent;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

body{
  min-height: var(--app-height);
}

.tg-auth{margin-top:14px; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04);}
.tg-auth__text{font-weight:700; margin-bottom:8px;}

.is-telegram body{
  padding-bottom: calc(16px + var(--safe-bottom));
}
.is-telegram .topbar{
  padding-top: calc(12px + var(--safe-top));
}
.is-telegram .container{
  padding-left: max(12px, var(--safe-left));
  padding-right: max(12px, var(--safe-right));
}
.is-telegram .card, .is-telegram .panel, .is-telegram .sidebar{
  background: color-mix(in srgb, var(--bg) 88%, var(--tg-section-bg, transparent) 12%);
}

@media (max-width: 980px){
  .container{padding:12px;}
  .topbar{padding:14px 12px; align-items:flex-start; flex-direction:column;}
  .topbar__right{width:100%; justify-content:flex-end;}
  .brand__title{font-size:20px;}
  .brand__subtitle{font-size:12px; max-width:none;}
  .tabbar{position:sticky; top:8px; z-index:20; padding:8px 10px; border-radius:16px; background:rgba(15,17,22,.88); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.08);}
  .tabsrow{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px; scrollbar-width:none;}
  .tabsrow::-webkit-scrollbar{display:none;}
  .tabsrow .tab{white-space:nowrap; flex:0 0 auto;}
  .row{flex-wrap:wrap;}
  .grid2{grid-template-columns:1fr;}
  .actions{flex-direction:column; align-items:stretch;}
  .actions > *{width:100%;}
  .chat{width:min(100%, 420px); right:12px; bottom:12px;}
}

@media (max-width: 720px){
  body{font-size:14px;}
  .container{padding:10px;}
  .topbar{position:sticky; top:0; z-index:30; border-radius:0 0 18px 18px; margin:0 -10px 10px; padding:12px 10px;}
  .topbar__right{gap:8px;}
  .user-badge{max-width:100%;}
  .sidebar{width:min(92vw, 360px); padding:12px 10px calc(16px + var(--safe-bottom));}
  .tabbar__title{font-size:15px;}
  .hero{padding:18px 14px;}
  .hero__title{font-size:24px; line-height:1.08;}
  .hero__actions{display:grid; grid-template-columns:1fr; gap:10px;}
  .hero__actions .btn{width:100%;}
  .hero__meta{display:grid; grid-template-columns:1fr; gap:6px;}
  .hcard{padding:14px;}
  .chat{left:10px; right:10px; width:auto; bottom:10px; max-height:min(72vh, 560px);}
  .chat.chat--big{top:calc(60px + var(--safe-top)); bottom:10px; max-height:none;}
  .modal__card{width:min(100vw - 20px, 760px); max-height:calc(var(--app-height) - 20px - var(--safe-top) - var(--safe-bottom));}
  .table{min-width:640px;}
  .profile-top-card{padding:14px;}
  .profile-mini-stat{min-width:calc(50% - 6px);}
  .admin-user-head__title{font-size:20px;}
}

@media (max-width: 520px){
  .brand__subtitle{display:none;}
  .btn, .chip, .tab, input, select{font-size:14px;}
  .card{border-radius:16px;}
  .panel{padding:14px;}
  .homegrid{gap:10px;}
  .hcard__title{font-size:16px;}
  .profile-top-card__name{font-size:22px;}
  .profile-top-card__stats{display:grid; grid-template-columns:1fr 1fr;}
  .profile-mini-stat{min-width:0;}
  .notif-panel{right:0; left:auto; width:min(92vw, 360px);}
  .tg-bind-cta{width:100%; justify-content:center;}
}

/* Telegram auth/link */
.tg-widget-wrap{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:10px}
.tg-widget-wrap iframe{max-width:100%}
.tg-auth{display:grid;gap:10px}

/* ---------- HowTo / Start playing ---------- */
.howto-page{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.howto-breadcrumb{
  font-size:14px;
  padding:4px 4px 0;
}
.howto-hero{
  position:relative;
  overflow:hidden;
  border-radius:26px;
  background:
    radial-gradient(900px 400px at 0% 0%, rgba(38,255,122,.12), transparent 55%),
    radial-gradient(700px 380px at 100% 0%, rgba(140,92,255,.18), transparent 52%),
    linear-gradient(135deg, rgba(7,18,18,.92), rgba(13,18,39,.96));
  border:1px solid rgba(69,255,157,.18);
  box-shadow: 0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
}
.howto-hero__glow{
  content:"";
  position:absolute;
  inset:auto auto -120px -120px;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(23,255,127,.18), transparent 68%);
  filter:blur(10px);
  pointer-events:none;
}
.howto-hero__content{
  position:relative;
  display:grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, .9fr);
  gap:26px;
  padding:30px;
}
.howto-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:10px;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  color:#baffd3;
  background:rgba(38,255,122,.08);
  border:1px solid rgba(38,255,122,.16);
}
.howto-title{
  margin:0;
  font-size: clamp(34px, 5vw, 56px);
  line-height:1.02;
  letter-spacing:-.03em;
}
.howto-lead{
  max-width:820px;
  margin:16px 0 0;
  font-size:20px;
  line-height:1.55;
  color:rgba(255,255,255,.82);
}
.howto-benefits{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap:14px;
  margin-top:26px;
}
.howto-benefit{
  padding:18px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.howto-benefit__label{
  color:rgba(255,255,255,.56);
  font-size:13px;
  margin-bottom:6px;
}
.howto-benefit__value{
  font-size:30px;
  font-weight:900;
  letter-spacing:-.03em;
}
.howto-benefit__value--small{
  font-size:18px;
  line-height:1.35;
}
.howto-copy{
  margin-top:18px;
  display:inline-flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(159,110,255,.28);
  background:linear-gradient(135deg, rgba(141,95,255,.96), rgba(190,77,255,.92));
  color:#fff;
  border-radius:20px;
  padding:14px 18px;
  font-size:18px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 18px 40px rgba(111,59,255,.30);
}
.howto-copy.is-copied{
  transform:translateY(1px);
  box-shadow:0 10px 24px rgba(56,255,149,.20);
}
.howto-copy__code{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:88px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(255,255,255,.15);
}
.howto-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:18px;
}
.howto-action{
  min-height:50px;
  padding-inline:18px;
}
.howto-hero__right{
  display:flex;
  align-items:center;
  justify-content:center;
}
.howto-promo-card{
  width:100%;
  min-height:100%;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(136,98,255,.32);
  background:linear-gradient(180deg, rgba(17,22,46,.92), rgba(13,15,28,.96));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);
}
.howto-promo-card__badge{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:linear-gradient(135deg, #ff644f, #ff3d54);
  color:#fff;
  font-weight:900;
  font-size:12px;
  margin-bottom:18px;
}
.howto-promo-card__icon{font-size:52px;line-height:1;margin-bottom:14px}
.howto-promo-card__title{font-size:28px;font-weight:900;line-height:1.1}
.howto-promo-card__text{margin-top:14px;color:rgba(255,255,255,.72);line-height:1.6}
.howto-promo-card__link{
  display:block;
  margin-top:18px;
  word-break:break-all;
  color:#97f5ff;
  font-weight:700;
}
.howto-section__title{
  margin:0 0 14px;
  font-size:22px;
}
.howto-steps{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:16px;
}
.howto-step{
  padding:22px;
  min-height:260px;
  background:linear-gradient(180deg, rgba(12,17,34,.96), rgba(11,13,24,.94));
  border-radius:24px;
}
.howto-step__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:30px;
}
.howto-step__icon{
  width:54px;
  height:54px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  background:rgba(38,255,122,.08);
  border:1px solid rgba(38,255,122,.16);
}
.howto-step:nth-child(2) .howto-step__icon{
  background:rgba(57,133,255,.12);
  border-color:rgba(57,133,255,.20);
}
.howto-step:nth-child(3) .howto-step__icon{
  background:rgba(173,87,255,.10);
  border-color:rgba(173,87,255,.18);
}
.howto-step:nth-child(4) .howto-step__icon{
  background:rgba(255,170,61,.10);
  border-color:rgba(255,170,61,.18);
}
.howto-step__num{
  font-size:54px;
  font-weight:900;
  line-height:1;
  color:rgba(80,129,255,.25);
}
.howto-step h3{
  margin:0 0 12px;
  font-size:20px;
}
.howto-step p{
  margin:0;
  color:rgba(255,255,255,.65);
  line-height:1.6;
}
.howto-step__link{
  display:inline-flex;
  margin-top:16px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(57,133,255,.20);
  background:rgba(57,133,255,.10);
  color:#7cb7ff;
  font-weight:800;
}
.howto-promo-help{
  padding:24px;
  border-radius:26px;
}
.howto-promo-help__head h2{margin:0;font-size:34px}
.howto-promo-help__head p{margin:8px 0 0}
.howto-methods{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.howto-method{
  padding:20px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}
.howto-method__icon{font-size:30px;margin-bottom:12px}
.howto-method h3{margin:0 0 10px;font-size:20px}
.howto-method p{margin:0;color:rgba(255,255,255,.68);line-height:1.6}

@media (max-width: 1100px){
  .howto-steps{grid-template-columns:repeat(2, minmax(0,1fr));}
}
@media (max-width: 860px){
  .howto-hero__content,
  .howto-methods{grid-template-columns:1fr;}
  .howto-title{font-size:38px;}
  .howto-lead{font-size:17px;}
  .howto-benefits{grid-template-columns:1fr;}
}
@media (max-width: 640px){
  .howto-steps{grid-template-columns:1fr;}
  .howto-copy{width:100%;justify-content:center;flex-wrap:wrap;text-align:center;}
  .howto-actions > *{flex:1 1 100%;justify-content:center;}
  .howto-promo-help__head h2{font-size:28px;}
}

/* ---------- Fishing refresh: rods + useful ---------- */
.fish-card{ overflow:hidden; }
.fish-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  margin-bottom:10px;
  border-radius:999px;
  border:1px solid rgba(110,231,255,.20);
  background: linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.08));
  color: rgba(226,240,255,.92);
  font-size:12px;
  font-weight:800;
  letter-spacing:.24px;
  text-transform:uppercase;
}
.fish-hero{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  background:
    radial-gradient(1200px 300px at 0% 0%, rgba(110,231,255,.10), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(167,139,250,.11), transparent 42%);
}
.fish-hero h1{ margin-bottom:8px; }
.fish-hero__meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
  min-width: 260px;
}
.fish-stat{
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
}
.fish-stat span{
  display:block;
  color: var(--muted);
  font-size:12px;
  margin-bottom:4px;
}
.fish-stat b{
  font-size:20px;
  line-height:1;
}
.fish-quicknav{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding: 0 18px 16px;
}
.fish-quicklink{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight:700;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.fish-quicklink:hover{
  transform: translateY(-1px);
  border-color: rgba(110,231,255,.26);
  background: rgba(110,231,255,.08);
}
.fish-miniinfo{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  padding: 0 18px 18px;
}
.fish-miniinfo--stack{ grid-template-columns: 1fr 1fr; }
.fish-tip{
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.82);
  line-height:1.55;
}
.fish-tip--strong{
  background: linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.08));
  border-color: rgba(110,231,255,.18);
}
.fish-block{
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)),
    rgba(0,0,0,.16);
}
.fish-block__head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  margin-bottom:12px;
}
.fish-block__head h2{
  margin:0 0 6px 0;
}
.fish-badges,
.fish-namecell__tags{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.fish-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  font-size:11px;
  line-height:1;
  color: rgba(255,255,255,.82);
  text-transform:uppercase;
  letter-spacing:.22px;
}
.fish-badge--accent{
  background: linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.16));
  border-color: rgba(110,231,255,.30);
  color:#f3fbff;
}
.fish-note{
  margin-bottom:12px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.78);
  line-height:1.5;
}
.fish-tablewrap{
  border-top: 0;
  border-radius: 18px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.fish-table{
  min-width: 900px;
}
.fish-table thead th{
  position:sticky;
  top:0;
  z-index:1;
  background: rgba(16,20,28,.94);
  backdrop-filter: blur(10px);
}
.fish-table tbody tr:hover{
  background: rgba(110,231,255,.045);
}
.fish-namecell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width: 168px;
}
.fish-namecell__title{
  font-weight:800;
  font-size:13px;
}
.fish-weight,
.fish-softpill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.fish-softpill--alt{
  background: rgba(167,139,250,.08);
  border-color: rgba(167,139,250,.18);
}
.fish-pct{
  min-width: 150px;
}
.fish-advice{
  background:
    radial-gradient(700px 180px at 0% 0%, rgba(110,231,255,.10), transparent 50%),
    rgba(255,255,255,.03);
}
.fish-advice h2{
  margin:0 0 8px 0;
}
.mechanics-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
  padding: 0 18px 18px;
}
.mechanic-card{
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
}
.mechanic-card h3{
  margin:0 0 8px 0;
  font-size:15px;
}
.mechanic-card p{
  margin:0;
  color: rgba(255,255,255,.78);
  line-height:1.5;
  font-size:13px;
}
.fish-times h2{ margin:0 0 8px 0; }
.fish-timegrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  margin-top:14px;
}
.useful-grid{
  gap:16px;
}
.setcard{
  position:relative;
  border-radius: 20px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  box-shadow: 0 16px 36px rgba(0,0,0,.20);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.setcard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 20px 44px rgba(0,0,0,.24);
}
.setcard__head{
  position:relative;
  padding:16px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.setcard__head h2{
  margin:0 0 6px 0;
  font-size:17px;
}
.setcard__badge{
  display:inline-flex;
  margin-bottom:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.24px;
}
.setcard__body{
  gap:12px;
  padding:14px 16px 16px;
}
.setrow{
  grid-template-columns: 88px 1fr;
  gap:12px;
  align-items:flex-start;
}
.setvalue{ line-height:1.5; }
.setnote{
  margin-top:2px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.setcard--starter .setcard__head{ background: linear-gradient(135deg, rgba(110,231,255,.14), rgba(110,231,255,.05)); }
.setcard--trophy .setcard__head{ background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(167,139,250,.06)); }
.setcard--trolling .setcard__head{ background: linear-gradient(135deg, rgba(45,212,191,.16), rgba(59,130,246,.06)); }
.setcard--shore .setcard__head{ background: linear-gradient(135deg, rgba(251,191,36,.14), rgba(249,115,22,.06)); }
.setcard--spin .setcard__head{ background: linear-gradient(135deg, rgba(167,139,250,.15), rgba(110,231,255,.05)); }
.setcard--light .setcard__head{ background: linear-gradient(135deg, rgba(96,165,250,.12), rgba(192,132,252,.08)); }

#tab-rods .table td,
#tab-useful .table td{ vertical-align: middle; }
#tab-rods .table th:nth-child(n+3),
#tab-rods .table td:nth-child(n+3){ white-space: nowrap; }

@media (max-width: 980px){
  .fish-hero,
  .fish-block__head{
    flex-direction:column;
  }
  .fish-hero__meta{
    grid-template-columns: repeat(4, minmax(0,1fr));
    min-width: 0;
    width:100%;
  }
  .mechanics-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .fish-timegrid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 860px){
  .fish-miniinfo,
  .fish-miniinfo--stack,
  .mechanics-grid{
    grid-template-columns: 1fr;
  }
  .fish-hero__meta{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
  .fish-pct{
    min-width: 124px;
  }
  .fish-table{
    min-width: 760px;
  }
  .setrow{
    grid-template-columns: 1fr;
    gap:6px;
  }
}


/* ---------- Buyers redesign ---------- */

/* ════════════════════════════════════════
   FISH HERO — compact overrides
════════════════════════════════════════ */
.fish-hero{
  padding: 14px 18px 16px;
}
.fish-hero h1{
  font-size: 22px;
  margin-bottom: 4px;
}
.fish-hero .fish-kicker{
  margin-bottom: 6px;
}
.fish-hero > div > p.muted{
  font-size: 12.5px;
  line-height: 1.5;
  margin-top: 3px;
  max-width: 520px;
}
.fish-hero__meta{
  gap: 7px;
  min-width: 220px;
}
.fish-stat{
  padding: 9px 12px;
  border-radius: 14px;
}
.fish-stat span{
  font-size: 11px;
  margin-bottom: 2px;
}
.fish-stat b{
  font-size: 17px;
}
.fish-stat--sm b{
  font-size: 15px;
}

/* ════════════════════════════════════════
   BUYERS — compact redesign v2
════════════════════════════════════════ */
.buyers-hero--compact{
  padding: 12px 18px 14px;
  align-items: center;
}
.buyers-hero__title{
  font-size: 22px;
  margin: 4px 0 3px;
}
.buyers-hero__desc{
  font-size: 12.5px;
  max-width: 440px;
}
.fish-kicker--buyers{
  background: linear-gradient(135deg, rgba(74,222,128,.14), rgba(16,185,129,.08));
  border-color: rgba(74,222,128,.28);
  color: rgba(180,255,210,.95);
}
.buyersTopbar--v2{
  padding: 0 18px 16px;
  display: block;
}
.buyersControlRow{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  flex-wrap: wrap;
}
.buyersServerBlock{
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 260px;
}
.buyersServerBlock__label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.buyersServerPicker{
  display: flex;
  align-items: center;
  gap: 8px;
}
.buyersServerSelect{
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 32px 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.06) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(200,210,255,.55)' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .18s, background-color .18s;
  outline: none;
}
.buyersServerSelect:hover{
  border-color: rgba(74,222,128,.35);
  background-color: rgba(255,255,255,.09);
}
.buyersServerSelect:focus{
  border-color: rgba(74,222,128,.55);
  box-shadow: 0 0 0 3px rgba(74,222,128,.12);
  background-color: rgba(255,255,255,.09);
}
.buyersServerSelect option{
  background: #1a1f2e;
  color: #e2f0ff;
  font-weight: 600;
}
.buyersMonitorBtn--inline{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  flex-shrink: 0;
  font-size: 17px;
}
.buyersMonitorRow{
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  font-size: 12px;
  line-height: 1.4;
}
.buyersMonitorLabel--inline{
  font-size: 12px;
  margin: 0;
  display: inline;
}
.buyersMonitorTip{
  color: var(--muted);
  font-size: 11.5px;
}
.buyers-tg-link{
  color: rgba(110,231,255,.85);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px dashed rgba(110,231,255,.35);
  transition: color .15s, border-color .15s;
}
.buyers-tg-link:hover{
  color: #6ee7ff;
  border-color: rgba(110,231,255,.7);
}
.buyersInfoBlock{
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  align-self: flex-start;
  min-width: 180px;
}
.buyersInfoBlock__label{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.buyersInfoBlock__val{
  font-size: 13px;
  color: rgba(226,240,255,.85);
  line-height: 1.4;
}

.buyers-hero{
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(74,222,128,.12), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(16,185,129,.12), transparent 42%);
}
.buyers-hero__meta .fish-stat b{
  font-size:17px;
  line-height:1.15;
}
.buyersSubtabs--hero{
  padding-top:0;
  margin:-10px 18px 14px;
  position:relative;
  z-index:2;
}
.buyersPointChip{
  padding:10px 14px;
  font-weight:800;
  background: rgba(255,255,255,.05);
}
.buyersPointChip.active{
  border-color: rgba(74,222,128,.28);
  background: linear-gradient(135deg, rgba(74,222,128,.16), rgba(16,185,129,.10));
  box-shadow: 0 0 0 1px rgba(74,222,128,.14) inset;
}
.buyersTopbar{
  display:block;
  padding: 0 18px 18px;
}
.buyersServerRow{
  display:flex;
  gap:8px;
  align-items:center;
  width:100%;
}
.buyersServerRow select{
  flex:1;
  min-width:0;
}
.buyersMonitorBtn{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  font-size:16px;
  cursor:pointer;
  transition: background .18s, border-color .18s, transform .12s;
  line-height:1;
}
.buyersMonitorBtn:hover{
  background:rgba(255,255,255,.12);
  transform:scale(1.08);
}
.buyersMonitorBtn--active{
  background: rgba(250,204,21,.18);
  border-color: rgba(250,204,21,.55);
  box-shadow: 0 0 10px rgba(250,204,21,.25);
}
.buyersMonitorBtn--active:hover{
  background: rgba(250,204,21,.26);
}
.buyersMonitorLabel{
  margin-top:5px;
  font-size:11px;
  color: var(--muted);
  display:block;
}
.buyersMonitorLabel--active{
  color: #faca15;
}
.buyersServerField,
.buyersMetaCard,
.buyersHintCard{
  min-width:0;
}
.buyersServerField{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
.buyersServerField span{
  margin-bottom:8px;
  font-size:12px;
  color: var(--muted);
}
.buyersServerField select{ width:100%; }
.buyersMetaCard__title{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.28px;
  color: rgba(255,255,255,.72);
  font-weight:800;
}
.buyersGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  margin:0;
  padding: 0 18px 18px;
}
.buyersCard{
  display:flex;
  flex-direction:column;
  gap:12px;
  width:100%;
  text-align:left;
  appearance:none;
  -webkit-appearance:none;
  font: inherit;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border-radius:18px;
  padding:16px;
  color: inherit;
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.buyersCard:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}
.buyersCard.is-active{
  border-color: rgba(74,222,128,.28);
  background: linear-gradient(145deg, rgba(74,222,128,.12), rgba(16,185,129,.06));
  box-shadow: 0 0 0 1px rgba(74,222,128,.14) inset, 0 18px 40px rgba(0,0,0,.22);
}
.buyersCard__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.buyersCard__main{
  display:flex;
  align-items:flex-start;
  gap:12px;
  min-width:0;
}
.buyersCard__icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  border-radius:14px;
  font-size:20px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
}
.buyersCard h3{
  margin:0;
  font-size:16px;
}
.buyersCard__sub{
  margin-top:4px;
  font-size:12px;
  line-height:1.45;
  color: var(--muted);
}
.buyersCard__select{
  white-space:nowrap;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size:12px;
  font-weight:800;
}
.buyersCard.is-active .buyersCard__select{
  border-color: rgba(74,222,128,.24);
  background: rgba(74,222,128,.14);
}
.buyersCard__meta{
  font-size:12px;
  color: rgba(255,255,255,.74);
}
.buyersCard__stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:8px;
}
.buyersMetric{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.buyersMetric span{
  font-size:12px;
  color: rgba(255,255,255,.80);
}
.buyersMetric b{
  font-variant-numeric: tabular-nums;
  font-size:15px;
}
.buyersEditor{
  display:grid;
  grid-template-columns: minmax(240px, .9fr) minmax(0, 1.1fr);
  gap:14px;
  padding: 0 18px 18px;
  align-items:start;
}
.buyersEditor__info,
.buyersEditor__form{
  min-width:0;
}
.buyersEditor__info h2{
  margin:0;
}
.buyersEditor__legend{
  margin-top:4px;
}
.buyersEditor__form{
  border-radius:18px;
}
.buyersFormGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px 12px;
}
.buyersFormGrid label:last-child{
  grid-column: 1 / -1;
}
.buyersActions{
  margin-top:12px;
  align-items:center;
  gap:12px;
}
.buyersMonitorCard{
  flex-shrink:0;
}
.stats-top-list{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.stats-top-row{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  padding:5px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.04);
  transition:background .15s;
}
.stats-top-row:hover{ background:rgba(255,255,255,.08); }
.stats-top-rank{
  font-size:16px;
  width:24px;
  text-align:center;
  flex-shrink:0;
}
.stats-top-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stats-top-val{
  font-weight:600;
  flex-shrink:0;
  color:var(--accent,#a78bfa);
}
.buyersLogsCard{
  margin: 0 18px 18px;
  border-radius:18px;
}
.buyersLogsWrap{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.16);
}
.buyersLogsWrap .table tbody tr:hover{
  background: rgba(74,222,128,.05);
}
@media (max-width: 1180px){
  .buyersTopbar,
  .buyersGrid,
  .buyersEditor{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .buyersTopbar .buyersHintCard{
    grid-column: 1 / -1;
  }
}
@media (max-width: 860px){
  .buyersTopbar,
  .buyersGrid,
  .buyersEditor,
  .buyersFormGrid,
  .buyersCard__stats{
    grid-template-columns: 1fr;
  }
  .buyersLogsCard{
    margin-left:18px;
    margin-right:18px;
  }
  .buyers-hero__meta .fish-stat b{
    font-size:16px;
  }
}

/* ---------- Fishing refresh: fish + stats ---------- */
.fish-hero--fishguide{
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(59,130,246,.12), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(34,197,94,.10), transparent 42%);
}
.fish-hero--stats{
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(244,114,182,.12), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(168,85,247,.10), transparent 42%);
}
.fish-filtersBlock,
.fish-catalogBlock,
.stats-block{
  margin: 0 18px 18px;
}
.fish-controls--panel{
  margin-top:0;
}
.fish-grid--catalog{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
}
.fish-entry{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
  padding:16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  box-shadow: 0 14px 34px rgba(0,0,0,.18);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease, background .14s ease;
  cursor:pointer;
}
.fish-entry:hover{
  transform: translateY(-2px);
  border-color: rgba(110,231,255,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  background: linear-gradient(145deg, rgba(110,231,255,.10), rgba(167,139,250,.06));
}
.fish-entry__top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.fish-entry__name{
  font-size:16px;
  font-weight:800;
  line-height:1.2;
}
.fish-entry__place{
  margin-top:6px;
  font-size:13px;
  color: var(--muted);
  line-height:1.45;
}
.fish-entry__meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  min-height:28px;
}
.fish-entry__footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-top:auto;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}
.fish-entry__variants{
  color: rgba(255,255,255,.78);
  font-size:12px;
}
.fish-entry__cta{
  color:#f3fbff;
  font-weight:800;
  font-size:12px;
  letter-spacing:.2px;
}
.fish-entry__delete{
  flex:0 0 auto;
}
.fish-empty{
  grid-column:1 / -1;
  padding:28px 20px;
  text-align:center;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}
.fish-empty--table{
  margin:10px 0;
}
.fish-empty__icon{
  font-size:26px;
  margin-bottom:10px;
}
.fish-empty__title{
  font-size:16px;
  font-weight:800;
  margin-bottom:6px;
}
.stats-block__head{
  align-items:center;
}
.stats-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.stats-toolbar .search{
  min-width: min(100%, 320px);
}
.stats-summaryline{
  margin: -4px 0 12px;
}
.stats-tablewrap{
  border-radius:18px;
}
.stats-table{
  min-width: 1160px;
}
.stats-table tbody tr.stats-row:hover{
  background: rgba(244,114,182,.045);
}
.stats-setcell,
.stats-note{
  min-width:0;
  line-height:1.45;
}
.stats-note{
  color: rgba(255,255,255,.80);
}
.statmoney{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-weight:800;
  white-space:nowrap;
}
.statmoney--pos{
  color:#d6ffe8;
  border-color: rgba(74,222,128,.26);
  background: rgba(74,222,128,.12);
}
.statmoney--neg{
  color:#ffd8d8;
  border-color: rgba(248,113,113,.28);
  background: rgba(248,113,113,.12);
}
.statmoney--zero{
  color: rgba(255,255,255,.86);
}
.stats-footer td{
  background: rgba(255,255,255,.025);
}
@media (max-width: 1180px){
  .fish-grid--catalog{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px){
  .fish-filtersBlock,
  .fish-catalogBlock,
  .stats-block{
    margin-left:18px;
    margin-right:18px;
  }
  .stats-toolbar{
    width:100%;
    justify-content:stretch;
  }
  .stats-toolbar .search,
  .stats-toolbar .btn{
    width:100%;
  }
  .fish-grid--catalog{
    grid-template-columns: 1fr;
  }
}

/* ---------- Stats page width + compact totals ---------- */
@media (min-width: 1181px){
  #tab-stats .stats-page{
    width:min(1460px, calc(100vw - 32px));
    margin-left:50%;
    transform:translateX(-50%);
  }

  #tab-stats .fish-hero--stats .fish-hero__meta{
    grid-template-columns: repeat(4, minmax(132px, 1fr));
    min-width:min(100%, 640px);
  }
}

#tab-stats .fish-hero--stats .fish-stat span{
  white-space:nowrap;
}

#tab-stats .fish-hero--stats .fish-stat b{
  font-size:clamp(18px, 1.35vw, 22px);
}

#tab-stats .stats-table{
  min-width:1380px;
}

#statsTable th:nth-child(1),
#statsTable td:nth-child(1),
#statsTable th:nth-child(5),
#statsTable td:nth-child(5),
#statsTable th:nth-child(6),
#statsTable td:nth-child(6),
#statsTable th:nth-child(7),
#statsTable td:nth-child(7),
#statsTable th:nth-child(8),
#statsTable td:nth-child(8),
#statsTable th:nth-child(9),
#statsTable td:nth-child(9),
#statsTable th:nth-child(10),
#statsTable td:nth-child(10){
  white-space:nowrap;
}

#statsTable th:nth-child(1),
#statsTable td:nth-child(1){ min-width:118px; }
#statsTable th:nth-child(2),
#statsTable td:nth-child(2){ min-width:220px; }
#statsTable th:nth-child(3),
#statsTable td:nth-child(3){ min-width:240px; }
#statsTable th:nth-child(4),
#statsTable td:nth-child(4){ min-width:140px; }
#statsTable th:nth-child(11),
#statsTable td:nth-child(11){ min-width:240px; }


/* ---------- Fishing refresh: inventory + calculator + logs ---------- */
.fish-hero--inv{
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(250,204,21,.12), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(249,115,22,.10), transparent 42%);
}
.fish-hero--sell{
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(59,130,246,.12), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(110,231,255,.10), transparent 42%);
}
.fish-hero--logs{
  background:
    radial-gradient(1100px 320px at 0% 0%, rgba(34,197,94,.12), transparent 46%),
    radial-gradient(900px 300px at 100% 0%, rgba(16,185,129,.10), transparent 42%);
}
.inventory-block,
.sell-builder,
.sell-costs,
.logs-block{
  margin:0 18px 18px;
}
.inventory-block__head,
.logs-block__head{
  align-items:center;
}
.inventory-addbtn,
.sell-savebtn{
  white-space:nowrap;
}
.inventory-table,
.sell-table,
.logs-table{
  min-width:980px;
}
.inventory-tablewrap,
.sell-tablewrap,
.logs-tablewrap{
  border-radius:18px;
}
.inventory-type{
  min-width:104px;
}
.inventory-type--rod{
  background: linear-gradient(135deg, rgba(250,204,21,.16), rgba(249,115,22,.10));
  border-color: rgba(250,204,21,.24);
}
.inventory-type--reel{
  background: linear-gradient(135deg, rgba(96,165,250,.16), rgba(59,130,246,.10));
  border-color: rgba(96,165,250,.24);
}
.inventory-type--line{
  background: linear-gradient(135deg, rgba(167,139,250,.16), rgba(139,92,246,.10));
  border-color: rgba(167,139,250,.24);
}
.inventory-type--bait{
  background: linear-gradient(135deg, rgba(74,222,128,.16), rgba(16,185,129,.10));
  border-color: rgba(74,222,128,.24);
}
.inventory-remain,
.inventory-price,
.sell-remain,
.sell-price,
.logs-money{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  white-space:nowrap;
}
.inventory-remain{
  background: rgba(255,255,255,.05);
}
.table-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.sell-grid .field,
.inventory-block .field{
  min-width:0;
}
.sell-builder .chips{
  margin-top:10px;
}
.sell-builder .chip{
  background: rgba(110,231,255,.08);
  border-color: rgba(110,231,255,.18);
}
.sell-builder .pickrow select,
.sell-builder .field input{
  background: rgba(255,255,255,.04);
}
.sell-summarybar{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
  padding:0 18px 18px;
}
.sell-summarygrid{
  flex:1 1 auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:12px;
}
.sell-summarycard{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  padding:14px 16px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  box-shadow: 0 14px 34px rgba(0,0,0,.16);
}
.sell-summarycard span{
  font-size:12px;
  color: var(--muted);
}
.sell-summarycard b{
  font-size:18px;
  line-height:1.15;
}
.sell-summarycard--profit{
  background: linear-gradient(145deg, rgba(74,222,128,.10), rgba(16,185,129,.06));
}
.sell-msg{
  margin:0 18px 18px;
}
.sell-costCell .statmoney,
.logs-table .statmoney{
  min-width:92px;
}
.logs-table tbody tr:hover{
  background: rgba(34,197,94,.05);
}
.logs-table .stats-setcell{
  min-width:220px;
}
.logs-table td:nth-child(1),
.logs-table th:nth-child(1),
.logs-table td:nth-child(4),
.logs-table th:nth-child(4),
.logs-table td:nth-child(5),
.logs-table th:nth-child(5),
.logs-table td:nth-child(6),
.logs-table th:nth-child(6),
.logs-table td:nth-child(7),
.logs-table th:nth-child(7),
.logs-table td:nth-child(8),
.logs-table th:nth-child(8),
.logs-table td:nth-child(9),
.logs-table th:nth-child(9){
  white-space:nowrap;
}
.logs-table td:nth-child(1),
.logs-table th:nth-child(1){ min-width:118px; }
.logs-table td:nth-child(2),
.logs-table th:nth-child(2){ min-width:240px; }
.logs-table td:nth-child(3),
.logs-table th:nth-child(3){ min-width:140px; }
.logs-toolbar .search{
  min-width:min(100%, 320px);
}
.logs-table .btn--danger{
  white-space:nowrap;
}
@media (min-width: 1181px){
  #tab-inv .inv-page,
  #tab-sell .sell-page,
  #tab-logs .logs-page{
    width:min(1320px, calc(100vw - 32px));
    margin-left:50%;
    transform:translateX(-50%);
  }
}
@media (max-width: 980px){
  .sell-summarybar{
    flex-direction:column;
  }
}
@media (max-width: 860px){
  .inventory-block,
  .sell-builder,
  .sell-costs,
  .logs-block,
  .sell-msg{
    margin-left:18px;
    margin-right:18px;
  }
  .sell-summarygrid{
    grid-template-columns:1fr;
  }
  .inventory-block__head,
  .logs-block__head{
    align-items:flex-start;
  }
  .logs-toolbar,
  .logs-toolbar .search,
  .logs-toolbar .btn,
  .inventory-addbtn,
  .sell-savebtn{
    width:100%;
  }
}


/* ---------- Transport hub ---------- */
.transport-shell{
  overflow:hidden;
}
.transport-hero{
  align-items:stretch;
}
.transport-jumpnav{
  padding-top:0;
}
.transport-miniinfo{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.transport-section{
  margin-top:18px;
}
.transport-section__head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
  margin-bottom:14px;
}
.transport-section__head h2{
  margin:0;
}
.transport-section__head .muted{
  max-width:760px;
}
.transport-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.transport-entry,
.transport-insight{
  position:relative;
  padding:18px;
  border-radius:24px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)),
    rgba(0,0,0,.18);
  box-shadow:0 20px 40px rgba(0,0,0,.16);
}
.transport-entry::before,
.transport-insight::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:linear-gradient(135deg, rgba(110,231,255,.06), transparent 46%, rgba(167,139,250,.05));
}
.transport-entry > *,
.transport-insight > *{
  position:relative;
  z-index:1;
}
.transport-entry__top{
  display:flex;
  gap:14px;
  align-items:flex-start;
  margin-bottom:14px;
}
.transport-entry__icon{
  flex:0 0 auto;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  font-size:26px;
  background:linear-gradient(135deg, rgba(110,231,255,.16), rgba(167,139,250,.14));
  border:1px solid rgba(110,231,255,.18);
  box-shadow:0 14px 30px rgba(0,0,0,.18);
}
.transport-entry h3,
.transport-insight h3{
  margin:0 0 8px;
}
.transport-entry p,
.transport-insight p{
  margin:0;
  color:rgba(255,255,255,.82);
  line-height:1.6;
}
.transport-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:16px;
}
.transport-tags span,
.transport-source{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.86);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14px;
}
.transport-source--warn{
  border-color:rgba(255,187,107,.24);
  background:rgba(255,187,107,.10);
  color:#ffd7a1;
}
.transport-entry__actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.transport-insights{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}
.transport-entry--cars .transport-entry__icon,
.transport-insight--accent{
  background:
    linear-gradient(135deg, rgba(110,231,255,.14), rgba(167,139,250,.12)),
    rgba(255,255,255,.04);
}
.transport-entry--pass .transport-entry__icon,
.transport-entry--wheel .transport-entry__icon,
.transport-insight--warn{
  background:
    linear-gradient(135deg, rgba(255,191,107,.16), rgba(255,134,98,.10)),
    rgba(255,255,255,.04);
}
.transport-entry--heli .transport-entry__icon{
  background:
    linear-gradient(135deg, rgba(255,187,107,.18), rgba(239,68,68,.08));
  border-color:rgba(255,187,107,.22);
}
.transport-entry--water .transport-entry__icon{
  background:
    linear-gradient(135deg, rgba(56,189,248,.18), rgba(14,165,233,.08));
  border-color:rgba(56,189,248,.22);
}
@media (max-width: 960px){
  .transport-grid,
  .transport-insights,
  .transport-miniinfo{
    grid-template-columns:1fr;
  }
  .transport-section__head{
    flex-direction:column;
    align-items:flex-start;
  }
}
@media (max-width: 720px){
  .transport-entry,
  .transport-insight{
    padding:16px;
    border-radius:20px;
  }
  .transport-entry__top{
    flex-direction:column;
  }
  .transport-entry__actions .btn{
    width:100%;
    justify-content:center;
  }
  .transport-entry__actions{
    align-items:stretch;
  }
}


/* transport full tabs */
.transport-page--full{ display:block; }
.transport-full-shell{ overflow:hidden; }
.transport-full-hero{ align-items:flex-start; }
.transport-note-row{ display:grid; grid-template-columns:1.1fr 1fr; gap:12px; margin:16px 0 18px; }
.transport-tabs--css{ position:relative; padding-top: 16px; }
.transport-tabs--css > input{ position:absolute; opacity:0; pointer-events:none; }
.transport-tabsrow{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px; }
.transport-tabsrow .tab{ cursor:pointer; user-select:none; }
.transport-pane{ display:none; }
#transport-tab-cars:checked ~ .transport-pane--cars,
#transport-tab-bikes:checked ~ .transport-pane--bikes,
#transport-tab-containers:checked ~ .transport-pane--containers,
#transport-tab-passes:checked ~ .transport-pane--passes,
#transport-tab-wheel:checked ~ .transport-pane--wheel,
#transport-tab-heli:checked ~ .transport-pane--heli,
#transport-tab-water:checked ~ .transport-pane--water,
#transport-tab-tune:checked ~ .transport-pane--tune{ display:block; }
#transport-tab-cars:checked ~ .transport-tabsrow label[for="transport-tab-cars"],
#transport-tab-bikes:checked ~ .transport-tabsrow label[for="transport-tab-bikes"],
#transport-tab-containers:checked ~ .transport-tabsrow label[for="transport-tab-containers"],
#transport-tab-passes:checked ~ .transport-tabsrow label[for="transport-tab-passes"],
#transport-tab-wheel:checked ~ .transport-tabsrow label[for="transport-tab-wheel"],
#transport-tab-heli:checked ~ .transport-tabsrow label[for="transport-tab-heli"],
#transport-tab-water:checked ~ .transport-tabsrow label[for="transport-tab-water"],
#transport-tab-tune:checked ~ .transport-tabsrow label[for="transport-tab-tune"]{
  border-color: rgba(45,212,191,.38);
  background: linear-gradient(180deg, rgba(45,212,191,.18), rgba(45,212,191,.08));
  color: #ecfeff;
  box-shadow: 0 10px 30px rgba(45,212,191,.14);
}
.transport-box{ border:1px solid rgba(148,163,184,.14); background:linear-gradient(180deg, rgba(15,23,42,.82), rgba(10,14,24,.88)); }
.transport-box__head{ display:flex; justify-content:space-between; gap:16px; align-items:flex-start; margin-bottom:14px; }
.transport-box__head h2{ margin:2px 0 6px; }
.transport-raw{
  margin:0;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.12);
  background:linear-gradient(180deg, rgba(15,23,42,.78), rgba(9,14,25,.94));
  color:#dbeafe;
  font: 500 13px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space:pre-wrap;
  word-break:break-word;
  max-height:940px;
  overflow:auto;
}
.transport-raw::-webkit-scrollbar{ width:10px; height:10px; }
.transport-raw::-webkit-scrollbar-thumb{ background:rgba(148,163,184,.24); border-radius:999px; }
.transport-tune-tablewrap{ max-height:none; }
.transport-tune-table .transport-section-row td{
  background: rgba(45,212,191,.09);
  color:#d1fae5;
  font-weight:800;
}
@media (max-width: 980px){
  .transport-note-row{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
  .transport-raw{ font-size:12px; padding:14px; border-radius:16px; }
}


/* Transport tables + filters */
.transport-controls{
  display:grid;
  grid-template-columns:minmax(320px,1.35fr) minmax(210px,.8fr);
  gap:12px;
  align-items:end;
  margin:0 0 16px;
  border:1px solid rgba(148,163,184,.14);
  background:linear-gradient(180deg, rgba(15,23,42,.76), rgba(9,13,23,.82));
}
.transport-controls .field{ margin:0; }
.transport-controls__meta{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
  min-width:0;
}
.transport-controls__count{
  font-weight:800;
  font-size:14px;
}
.transport-controls__hint{
  color:rgba(255,255,255,.66);
  font-size:12px;
  line-height:1.45;
}
.transport-controls.is-disabled{
  opacity:.78;
}
.transport-controls.is-disabled input{
  pointer-events:none;
  opacity:.72;
}
.transport-data-tablewrap{
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.16);
}
.transport-data-table{
  min-width:1260px;
  width:max-content;
}
.transport-page--full .container,
.container:has(.transport-full-shell){
  max-width: 1600px;
}
.transport-data-table td{ vertical-align:top; }
.transport-namecell{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:260px;
}
.transport-namecell__title{
  font-weight:800;
  font-size:13px;
  line-height:1.35;
}
.transport-namecell__sub{
  color:rgba(255,255,255,.62);
  font-size:12px;
  line-height:1.45;
}
.transport-badge,
.transport-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  white-space:nowrap;
}
.transport-badge{
  justify-content:flex-start;
  background:linear-gradient(135deg, rgba(110,231,255,.10), rgba(167,139,250,.10));
  border-color:rgba(110,231,255,.18);
  color:rgba(232,244,255,.94);
}
.transport-pill--speed{
  background:linear-gradient(135deg, rgba(34,197,94,.12), rgba(16,185,129,.08));
  border-color:rgba(34,197,94,.20);
}
.transport-note{
  display:block;
  color:rgba(255,255,255,.66);
  line-height:1.5;
  min-width:220px;
}
.transport-data-table thead th.transport-th-sortable{
  cursor:pointer;
  user-select:none;
  transition:color .18s ease, background .18s ease, border-color .18s ease;
}
.transport-data-table thead th.transport-th-sortable::after{
  content:"↕";
  margin-left:8px;
  font-size:11px;
  color:rgba(255,255,255,.34);
}
.transport-data-table thead th.transport-th-sortable:hover{
  color:#ecfeff;
}
.transport-data-table thead th.transport-th-sortable.is-active{
  color:#ecfeff;
  background:rgba(34,197,94,.10);
}
.transport-data-table thead th.transport-th-sortable.is-active[data-dir="asc"]::after{
  content:"↑";
  color:#86efac;
}
.transport-data-table thead th.transport-th-sortable.is-active[data-dir="desc"]::after{
  content:"↓";
  color:#86efac;
}
.transport-inline-note{
  margin-bottom:12px;
}
.transport-empty{
  padding:18px 20px;
  border-radius:16px;
  border:1px dashed rgba(148,163,184,.24);
  background:rgba(255,255,255,.025);
  color:rgba(255,255,255,.70);
}
.transport-footnotes{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.transport-footnote{
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:rgba(255,255,255,.72);
  font-size:12px;
  line-height:1.45;
}
@media (max-width: 920px){
  .transport-controls{
    grid-template-columns:1fr;
    align-items:stretch;
  }
  .transport-data-table{
    min-width:1040px;
  }
}

/* =========================================================
   AUTH SCREEN — BP/Fishing style
   ========================================================= */

.auth-screen {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  z-index: 200;
  background: var(--bg, #0b1020);
}

/* Ambient glow orbs */
.auth-glow {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
}
.auth-glow--1 {
  width: 700px; height: 500px;
  top: -180px; left: -150px;
  background: radial-gradient(ellipse, rgba(110,231,255,0.14) 0%, transparent 70%);
}
.auth-glow--2 {
  width: 600px; height: 500px;
  bottom: -120px; right: -120px;
  background: radial-gradient(ellipse, rgba(167,139,250,0.14) 0%, transparent 70%);
}
.auth-glow--3 {
  width: 400px; height: 400px;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(59,130,246,0.07) 0%, transparent 70%);
}

/* Card */
.auth-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 410px;
  background: rgba(15,23,42,0.82);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 30px 28px 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow:
    0 40px 80px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 -1px 0 rgba(110,231,255,0.06) inset;
}

/* Logo */
.auth-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.auth-logo__icon {
  width: 48px; height: 48px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(110,231,255,0.18), rgba(167,139,250,0.14));
  border: 1px solid rgba(110,231,255,0.24);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 20px rgba(110,231,255,0.10);
  flex-shrink: 0;
}
.auth-logo__text { display: flex; flex-direction: column; gap: 2px; }
.auth-logo__name {
  font-size: 18px;
  font-weight: 900;
  background: linear-gradient(135deg, #e2e8f0, rgba(110,231,255,0.9));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.3px;
}
.auth-logo__tag {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.38);
}

/* Segmented tabs */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 14px;
  padding: 4px;
  margin-bottom: 20px;
}
.auth-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
}
.auth-tab:hover { color: rgba(255,255,255,0.75); }
.auth-tab.active {
  background: linear-gradient(135deg, rgba(59,130,246,0.22), rgba(110,231,255,0.14));
  border: 1px solid rgba(110,231,255,0.28);
  color: rgba(255,255,255,0.96);
  box-shadow: 0 2px 12px rgba(59,130,246,0.15);
}

/* Form fields */
.auth-pane { display: flex; flex-direction: column; gap: 12px; }

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.auth-field__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.45);
}
.auth-input {
  width: 100%;
  padding: 11px 14px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}
.auth-input::placeholder { color: rgba(255,255,255,0.22); }
.auth-input:focus {
  border-color: rgba(110,231,255,0.40);
  box-shadow: 0 0 0 3px rgba(110,231,255,0.07);
}

/* Buttons */
.auth-btn {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all .18s ease;
  margin-top: 4px;
}
.auth-btn--primary {
  background: linear-gradient(135deg, #3b82f6, rgba(110,231,255,0.85));
  color: #fff;
  box-shadow: 0 4px 18px rgba(59,130,246,0.30);
}
.auth-btn--primary:hover {
  box-shadow: 0 6px 24px rgba(59,130,246,0.42);
  transform: translateY(-1px);
}
.auth-btn--secondary {
  background: linear-gradient(135deg, rgba(167,139,250,0.25), rgba(110,231,255,0.16));
  border: 1px solid rgba(167,139,250,0.32);
  color: rgba(255,255,255,0.92);
}
.auth-btn--secondary:hover {
  background: linear-gradient(135deg, rgba(167,139,250,0.35), rgba(110,231,255,0.24));
  transform: translateY(-1px);
}
.auth-btn--tg {
  background: linear-gradient(135deg, #0088cc, #00aae4);
  color: #fff;
  box-shadow: 0 4px 18px rgba(0,136,204,0.28);
}
.auth-btn--tg:hover { box-shadow: 0 6px 22px rgba(0,136,204,0.40); transform: translateY(-1px); }

/* Divider */
.auth-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0;
  color: rgba(255,255,255,0.22);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.08);
}

/* Telegram auth */
.tg-auth { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.tg-auth__text { font-size: 12px; color: rgba(255,255,255,0.42); text-align: center; }

/* Footer */
.auth-footer {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  text-align: center;
  font-size: 11px;
  color: rgba(255,255,255,0.25);
  line-height: 1.6;
}
.auth-footer a { color: rgba(110,231,255,0.55); text-decoration: none; }
.auth-footer a:hover { color: rgba(110,231,255,0.85); }

/* Messages */
#loginMsg, #regMsg, #tgLoginMsg, #tgWidgetLoginMsg {
  font-size: 12px;
  border-radius: 8px;
  padding: 8px 12px;
  min-height: 0;
  transition: all .2s;
}
.msg.ok { background: rgba(74,222,128,0.10); color: #4ade80; border: 1px solid rgba(74,222,128,0.20); }
.msg.err { background: rgba(239,68,68,0.10); color: #f87171; border: 1px solid rgba(239,68,68,0.20); }

@media (max-width: 440px) {
  .auth-card { padding: 24px 20px 20px; border-radius: 20px; }
}

/* =========================================================
   BP PAGE — redesigned
   ========================================================= */

.bp-page { display: flex; flex-direction: column; }

/* Hero */
.bp-hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  padding: 24px 22px 20px;
  background:
    radial-gradient(1100px 280px at 0% 0%, rgba(255,165,0,0.16), transparent 50%),
    radial-gradient(900px 260px at 100% 0%, rgba(167,139,250,0.13), transparent 45%),
    rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.09);
  border-bottom: none;
}
.bp-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 200px at 50% 120%, rgba(255,165,0,0.07), transparent 60%);
  pointer-events: none;
}
.bp-hero__content { position: relative; z-index: 1; }
.bp-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.bp-hero__title {
  display: flex;
  align-items: center;
  gap: 14px;
}
.bp-hero__emoji {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  border-radius: 16px;
  background: rgba(255,165,0,0.12);
  border: 1px solid rgba(255,165,0,0.22);
  flex-shrink: 0;
}
.bp-hero__title h1 { margin: 0; font-size: 22px; }
.bp-hero__sub { margin: 3px 0 0; font-size: 13px; color: rgba(255,255,255,0.5); }

/* Stats strip */
.bp-stats-strip {
  display: grid;
  grid-template-columns: 1fr 1.4fr 0.85fr;
  gap: 12px;
}
.bp-stat-card {
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-stat-card__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
}
.bp-stat-card__value {
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
}
.bp-stat-card__max { font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.45); }
.bp-stat-card__value.is-x2,
.bp-stat-card__value.is-x2 .bp-badge,
.bp-stat-card__value.is-x2 .bp-stat-card__max { color:#ffd95e; text-shadow: 0 0 10px rgba(255,217,94,0.18); }
.bp-stat-card__value.is-x4,
.bp-stat-card__value.is-x4 .bp-badge,
.bp-stat-card__value.is-x4 .bp-stat-card__max { color:#ff9f43; text-shadow: 0 0 12px rgba(255,159,67,0.34); }

/* Toggle pills */
.bp-toggles-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bp-toggle-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.bp-toggle-pill input { display: none; }
.bp-toggle-pill__track {
  width: 32px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.bp-toggle-pill__dot {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  transition: transform 0.2s, background 0.2s;
}
.bp-toggle-pill.is-on {
  border-color: rgba(255,165,0,0.32);
  background: rgba(255,165,0,0.08);
}
.bp-toggle-pill.is-on .bp-toggle-pill__track {
  background: rgba(255,165,0,0.55);
  border-color: rgba(255,165,0,0.4);
}
.bp-toggle-pill.is-on .bp-toggle-pill__dot {
  transform: translateX(14px);
  background: #fff;
}
.bp-toggle-pill__text {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,0.8);
}
.bp-mult-display {
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  margin-top: 2px;
}

/* Reset btn */
.bp-reset-btn {
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.65);
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  white-space: nowrap;
  align-self: flex-start;
}
.bp-reset-btn:hover { border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); color:#ff6b6b; }
.bp-reset-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* Set total row */
.bp-set-total-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  align-items: center;
}
.bp-set-total-input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.bp-set-total-input:focus { border-color: rgba(99,179,237,0.5); }
.bp-set-total-input::placeholder { color: rgba(255,255,255,0.3); }
.bp-set-total-btn:hover { border-color: rgba(99,179,237,0.4) !important; background: rgba(99,179,237,0.1) !important; color: #63b3ed !important; }


/* Body area */
.bp-body {
  padding: 18px 22px 24px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: none;
  border-radius: 0 0 20px 20px;
}

/* Tabs bar */
.bp-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}
.bp-tabs-bar .chip {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.09);
  transition: all 0.15s ease;
}
.bp-tabs-bar .chip.active {
  background: linear-gradient(135deg, rgba(110,231,255,0.15), rgba(167,139,250,0.13));
  border-color: rgba(110,231,255,0.32);
  color: rgba(255,255,255,0.95);
}

/* BP cards grid — refined */
#bpGrid.bp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.bp-card {
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.bp-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.14); box-shadow: 0 8px 24px rgba(0,0,0,0.2); }
.bp-card.is-x2 { border-color: rgba(255,214,102,0.22); }
.bp-card.is-x4 { border-color: rgba(255,153,51,0.28); box-shadow: 0 0 0 1px rgba(255,153,51,0.08), 0 0 24px rgba(255,153,51,0.14); }

/* Done cards */
.bp-card.is-done { opacity: 0.38; filter: grayscale(0.4); }
.bp-card.is-done .bp-card__title { color: rgba(255,255,255,0.55); }
.bp-card.is-done .bp-cbtn[data-dec] { opacity: 1; cursor: pointer; }
.bp-card.is-done .bp-cbtn[data-inc][disabled] { opacity: 0.25; }

@media (max-width: 680px) {
  .bp-stats-strip { grid-template-columns: 1fr; }
  .bp-hero { border-radius: 16px 16px 0 0; }
  .bp-body { border-radius: 0 0 16px 16px; }
  .auth-card { padding: 24px 20px; }
}

/* =========================================================
   TRANSPORT — Hero + Pill tabs redesign
   ========================================================= */

.transport-hero {
  position: relative;
  overflow: hidden;
  padding: 28px 24px 22px;
  background:
    radial-gradient(1100px 300px at 0% 0%, rgba(59,130,246,.18), transparent 50%),
    radial-gradient(900px 280px at 100% 0%, rgba(110,231,255,.12), transparent 45%),
    rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.transport-hero__bg {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 700px 200px at 50% 130%, rgba(59,130,246,.07), transparent 60%);
  pointer-events: none;
}
.transport-hero__content {
  position: relative; z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.transport-hero__title {
  display: flex;
  align-items: center;
  gap: 16px;
}
.transport-hero__icon {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(59,130,246,.2), rgba(110,231,255,.16));
  border: 1px solid rgba(110,231,255,.25);
  flex-shrink: 0;
  box-shadow: 0 8px 24px rgba(59,130,246,.12);
}
.transport-hero__kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: rgba(110,231,255,.7);
  margin-bottom: 4px;
}
.transport-hero__title h1 { margin: 0; font-size: 24px; }
.transport-hero__desc {
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(255,255,255,.5);
}
.transport-hero__stats {
  display: flex;
  gap: 12px;
  align-items: center;
}
.transport-hstat {
  text-align: center;
  padding: 10px 18px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  min-width: 70px;
}
.transport-hstat__val {
  font-size: 22px;
  font-weight: 900;
  color: rgba(110,231,255,.9);
  line-height: 1;
}
.transport-hstat__label {
  font-size: 11px;
  color: rgba(255,255,255,.45);
  margin-top: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .3px;
}

/* Search bar */
.transport-search-bar {
  padding: 16px 24px 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.transport-search-wrap {
  position: relative;
  flex: 1;
  min-width: 240px;
  max-width: 520px;
}
.transport-search-icon {
  position: absolute;
  left: 13px; top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  pointer-events: none;
  opacity: .6;
}
.transport-search-input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  color: inherit;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.transport-search-input::placeholder { color: rgba(255,255,255,.3); }
.transport-search-input:focus {
  border-color: rgba(110,231,255,.4);
  box-shadow: 0 0 0 3px rgba(110,231,255,.07);
}
.transport-search-hint {
  font-size: 12px;
  color: rgba(255,255,255,.38);
}

/* Pill tabs (replaces old tabsrow for transport) */
.transport-pills-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 14px 24px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.transport-pill-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.70);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s ease;
}
.transport-pill-tab:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.9);
}

/* Pill active state — driven by JS adding .is-active class */
.transport-pill-tab.is-active {
  background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(110,231,255,.16));
  border-color: rgba(110,231,255,.45);
  color: rgba(255,255,255,1);
  box-shadow: 0 0 0 1px rgba(110,231,255,.15) inset, 0 4px 14px rgba(59,130,246,.15);
}

/* Subcard headers - update to match new style */
.transport-box__head .fish-kicker {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(110,231,255,.65);
  margin-bottom: 4px;
}

@media (max-width: 720px) {
  .transport-hero__content { flex-direction: column; }
  .transport-hero__stats { align-self: flex-start; }
  .transport-search-bar { padding: 14px 16px 8px; }
  .transport-pills-row { padding: 12px 16px 0; gap: 6px; }
  .transport-pill-tab { font-size: 12px; padding: 8px 11px; }
}


/* ============================================================
   RAFFLE — Розыгрыши
   ============================================================ */

/* ════════════════════════════════════════════════════════════════
   RAFFLE PAGE — full redesign
   ════════════════════════════════════════════════════════════════ */

/* Page wrapper */
.rf-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ── Hero ── */
.rf-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  margin-bottom: 32px;
  padding: 56px 32px 48px;
  background: linear-gradient(135deg, #1a0a2e 0%, #2d1458 50%, #1a0a2e 100%);
  text-align: center;
  border: 1px solid rgba(168,85,247,.25);
}
.rf-hero__glow {
  position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none;
}
.rf-hero__glow--1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(168,85,247,.35), transparent 70%);
  top: -120px; left: -80px;
}
.rf-hero__glow--2 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(99,102,241,.3), transparent 70%);
  bottom: -100px; right: -60px;
}
.rf-hero__content { position: relative; z-index: 1; }
.rf-hero__badge {
  display: inline-block;
  background: rgba(168,85,247,.25);
  border: 1px solid rgba(168,85,247,.4);
  border-radius: 20px;
  padding: 4px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #c084fc;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.rf-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  margin: 0 0 12px;
  letter-spacing: -.01em;
}
.rf-hero__title-accent {
  background: linear-gradient(135deg, #a855f7, #6366f1, #ec4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rf-hero__sub {
  font-size: .95rem;
  color: rgba(255,255,255,.55);
  margin: 0;
}

/* ── Warnings ── */
.rf-warnings { margin-bottom: 16px; }

/* ── Main layout ── */
.rf-main {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 760px) { .rf-main { grid-template-columns: 1fr; } }

/* ── Draw card ── */
.rf-draw-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(168,85,247,.12), rgba(99,102,241,.08), rgba(30,30,50,.95));
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.rf-draw-card__shine {
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.6), rgba(99,102,241,.6), transparent);
}

/* ── Prize pool ── */
.rf-pool-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.rf-pool-box {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 18px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
  transition: border-color .2s;
}
.rf-pool-box:hover { border-color: rgba(168,85,247,.3); }
.rf-pool-box--main {
  background: rgba(168,85,247,.1);
  border-color: rgba(168,85,247,.25);
}
.rf-pool-box--per {
  background: rgba(99,102,241,.08);
  border-color: rgba(99,102,241,.2);
}
.rf-pool-box__icon { font-size: 1.8rem; line-height: 1; }
.rf-pool-box__amount {
  font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1;
  background: linear-gradient(135deg, #fff, #c084fc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.rf-pool-box__label { font-size: .72rem; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: .06em; }

/* ── Participants ── */
.rf-participants {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.04);
  border-radius: 10px; padding: 10px 14px;
  font-size: .9rem; color: rgba(255,255,255,.7);
}
.rf-participants__icon { font-size: 1.1rem; }
.rf-participants b { color: #c084fc; }

/* ── Join button ── */
.rf-join-btn {
  position: relative; overflow: hidden;
  width: 100%; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #a855f7, #6366f1);
  color: #fff; font-size: 1.05rem; font-weight: 800;
  padding: 16px 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  letter-spacing: .03em;
  box-shadow: 0 8px 32px rgba(168,85,247,.4);
  transition: transform .15s, box-shadow .15s;
}
.rf-join-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 40px rgba(168,85,247,.55); }
.rf-join-btn:active { transform: translateY(0); }
.rf-join-btn__icon { font-size: 1.2rem; }
.rf-join-btn__shine {
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: skewX(-20deg);
  animation: rfShine 3s infinite 1s;
}
@keyframes rfShine {
  0% { left: -100%; }
  30%, 100% { left: 150%; }
}

/* ── Already in ── */
.rf-already {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: rgba(52,211,153,.1);
  border: 1px solid rgba(52,211,153,.3);
  border-radius: 14px; padding: 14px;
  font-size: 1rem; font-weight: 700; color: #34d399;
}

/* ── Offline ── */
.rf-offline {
  text-align: center; padding: 16px; color: rgba(255,255,255,.55);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.rf-offline__icon { font-size: 2rem; }

/* ── Countdown ── */
.rf-countdown-wrap { text-align: center; }
.rf-countdown-label {
  font-size: .75rem; color: rgba(255,255,255,.45);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px;
}
.rf-countdown {
  display: flex; justify-content: center; align-items: center; gap: 12px;
}
.rf-cd-unit { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rf-cd-digit {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 12px;
  min-width: 64px; padding: 10px 8px;
  font-size: 2rem; font-weight: 900; color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: center;
  box-shadow: 0 4px 16px rgba(168,85,247,.15);
}
.rf-cd-label { font-size: .7rem; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; }
.rf-cd-sep { font-size: 2rem; font-weight: 900; color: rgba(168,85,247,.6); margin-bottom: 22px; }

/* ── Finished ── */
.rf-finished {
  text-align: center; padding: 14px;
  background: rgba(99,102,241,.1); border: 1px solid rgba(99,102,241,.25);
  border-radius: 12px; font-size: .95rem; color: rgba(255,255,255,.7);
}

/* ── Rules chips ── */
.rf-rules {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding-top: 4px; border-top: 1px solid rgba(255,255,255,.07);
}
.rf-rules__item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px; padding: 5px 12px;
  font-size: .78rem; color: rgba(255,255,255,.55);
}

/* ── Winners column ── */
.rf-winners-col {
  display: flex; flex-direction: column; gap: 14px;
}

/* ── Last winner card ── */
.rf-lw-card {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, rgba(251,191,36,.1), rgba(245,158,11,.06), rgba(30,30,50,.95));
  border: 1px solid rgba(251,191,36,.35);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.rf-lw-card__shine {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(251,191,36,.7), transparent);
}
.rf-lw-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(251,191,36,.15); border: 1px solid rgba(251,191,36,.3);
  border-radius: 20px; padding: 4px 14px;
  font-size: .72rem; font-weight: 700; color: #fbbf24;
  text-transform: uppercase; letter-spacing: .06em;
}
.rf-lw-prize {
  font-size: 2.2rem; font-weight: 900;
  background: linear-gradient(135deg, #fbbf24, #f59e0b, #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  line-height: 1;
}
.rf-lw-prize-label { font-size: .8rem; color: rgba(255,255,255,.45); margin-top: -6px; }
.rf-lw-winner {
  display: flex; align-items: center; gap: 12px;
  background: rgba(0,0,0,.25); border-radius: 12px;
  padding: 12px 16px; width: 100%; text-align: left;
}
.rf-lw-winner__icon { font-size: 1.6rem; }
.rf-lw-winner__label { font-size: .72rem; color: rgba(255,255,255,.45); margin-bottom: 2px; }
.rf-lw-winner__id { font-size: 1.1rem; font-weight: 800; color: #fff; }
.rf-lw-date { font-size: .75rem; color: rgba(255,255,255,.35); }
.rf-lw-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 32px 20px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px; color: rgba(255,255,255,.45);
}
.rf-lw-empty__icon { font-size: 2rem; }
.rf-lw-loading { padding: 32px; text-align: center; color: rgba(255,255,255,.4); }

/* ── Archive button ── */
.rf-archive-btn {
  width: 100%; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  color: rgba(255,255,255,.7); font-size: .9rem; font-weight: 600;
  padding: 12px; cursor: pointer; transition: background .15s, border-color .15s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.rf-archive-btn:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); color: #fff; }

/* ── Info note ── */
.rf-info-note {
  font-size: .78rem; color: rgba(255,255,255,.35); line-height: 1.5;
  background: rgba(255,255,255,.03); border-radius: 10px; padding: 10px 12px;
}

/* ── Archive panel ── */
.rf-archive-panel {
  margin-top: 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px; padding: 24px;
}
.rf-archive-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
}
.rf-archive-title { font-size: 1.1rem; font-weight: 700; color: #fff; margin: 0; }
.rf-archive-close {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; color: rgba(255,255,255,.6);
  font-size: .9rem; padding: 5px 12px; cursor: pointer; transition: background .12s;
}
.rf-archive-close:hover { background: rgba(255,255,255,.14); color: #fff; }
.rf-archive-list { display: flex; flex-direction: column; gap: 8px; }
.rf-arch-row {
  display: grid;
  grid-template-columns: 36px 100px 1fr auto 1fr;
  gap: 10px; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px; padding: 10px 14px;
  font-size: .88rem;
  transition: background .12s;
}
.rf-arch-row:hover { background: rgba(255,255,255,.07); }
.rf-arch-row__num { color: rgba(255,255,255,.3); font-size: .75rem; font-weight: 700; }
.rf-arch-row__date { color: rgba(255,255,255,.5); font-size: .8rem; }
.rf-arch-row__prize { font-weight: 800; color: #fbbf24; }
.rf-arch-row__parts { color: rgba(255,255,255,.45); font-size: .8rem; }
.rf-arch-winner { color: #34d399; font-weight: 700; font-size: .85rem; }
.rf-arch-no-winner { color: rgba(255,255,255,.3); font-style: italic; font-size: .8rem; }
@media (max-width: 600px) {
  .rf-arch-row { grid-template-columns: 30px 1fr 1fr; grid-template-rows: auto auto; }
  .rf-arch-row__parts, .rf-arch-row__num { display: none; }
}

/* ============================================================
   RAFFLE TOAST ALERT (красивые уведомления)
   ============================================================ */

.raffle-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 10000;
  min-width: 280px;
  max-width: calc(100vw - 32px);
  background: #1a1a2e;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.raffle-toast.raffle-toast--visible {
  opacity: 1;
  pointer-events: all;
  transform: translateX(-50%) translateY(0);
}

.raffle-toast__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.raffle-toast__icon {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}

.raffle-toast__text {
  font-size: .92rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  flex: 1;
}

.raffle-toast__actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Type variants */
.raffle-toast--warn  { border-top: 3px solid #f0a020; }
.raffle-toast--err   { border-top: 3px solid #e05050; }
.raffle-toast--ok    { border-top: 3px solid #40c060; }
.raffle-toast--info  { border-top: 3px solid #5090e0; }

/* Inline warnings on the raffle page */
.raffle-warnings-area {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.raffle-warn-banner {
  background: rgba(240,160,30,.08);
  border: 1px solid rgba(240,160,30,.3);
  border-left: 4px solid #f0a020;
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.raffle-warn-banner--err {
  background: rgba(220,60,60,.08);
  border-color: rgba(220,60,60,.3);
  border-left-color: #e05050;
}

.raffle-warn-banner__icon { font-size: 1.1rem; flex-shrink: 0; }
.raffle-warn-banner__text { flex: 1; font-size: .88rem; line-height: 1.4; }
.raffle-warn-banner__btn  { flex-shrink: 0; }


/* ============================================================
   RAFFLE — nav & hero extras
   ============================================================ */

/* Hero button раздел Розыгрыши */
.btn--raffle {
  background: linear-gradient(135deg, #9b1db5 0%, #d4226e 100%);
  color: #fff;
  border-color: rgba(220,60,180,.4);
  font-weight: 700;
}
.btn--raffle:hover {
  filter: brightness(1.12);
}

/* Sidebar навлинк розыгрышей — handled in main sidebar block above */

/* Tabbar кнопка розыгрышей */
.tabbar__raffle-btn {
  font-size: 1.15rem;
  position: relative;
}
/* пульсирующая точка — показываем когда розыгрыш активен */
.tabbar__raffle-btn.raffle-active::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d4226e;
  animation: rafflePulse 1.8s ease-in-out infinite;
}
@keyframes rafflePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(1.4); }
}

/* Sidebar scrollable fix handled above */


/* ============================================================
   PROFILE REDESIGN  (pf-*)
   ============================================================ */

/* Hero card */
.pf-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(110,231,255,.07), rgba(167,139,250,.07));
  border: 1px solid rgba(110,231,255,.12);
  margin-bottom: 20px;
}
@media (max-width: 600px) {
  .pf-hero { flex-direction: column; align-items: flex-start; gap: 14px; padding: 16px; }
}
.pf-hero__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.pf-hero__name { font-size: 26px; font-weight: 900; line-height: 1.1; word-break: break-word; }
.pf-hero__login { font-size: 13px; color: var(--muted); }
.pf-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }

.pf-stat-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  font-size: 13px;
}
.pf-stat-chip__icon { font-size: 14px; }
.pf-stat-chip__label { color: var(--muted); font-size: 11px; }
.pf-stat-chip b { font-size: 14px; font-weight: 800; }

/* Tabs */
.pf-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.pf-tab {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #fff;
  border-radius: 12px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: .18s ease;
}
.pf-tab:hover { background: rgba(255,255,255,.07); transform: translateY(-1px); }
.pf-tab.active {
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.16));
  border-color: rgba(124,156,255,.35);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}

/* Grid layouts */
.pf-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 800px) { .pf-grid-2 { grid-template-columns: 1fr; } }

.pf-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1000px) { .pf-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .pf-grid-4 { grid-template-columns: 1fr; } }

/* Content blocks */
.pf-block {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pf-block--highlight {
  background: rgba(110,231,255,.04);
  border-color: rgba(110,231,255,.14);
}
.pf-block__title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent, #6ee7ff);
  margin-bottom: 12px;
}
.pf-section-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--accent, #6ee7ff);
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Fields */
.pf-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}
.pf-field span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.pf-field input,
.pf-field textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #fff;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
  transition: border-color .15s;
  resize: vertical;
  font-family: inherit;
}
.pf-field input:focus,
.pf-field textarea:focus {
  border-color: var(--accent, #6ee7ff);
  background: rgba(255,255,255,.08);
}
.pf-field--file input[type="file"] {
  padding: 8px;
  font-size: 13px;
  cursor: pointer;
}

.pf-hint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.pf-btn-full { width: 100%; }

/* Dividers */
.pf-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: 14px 0;
}
.pf-divider--lg { margin: 22px 0; }

/* Key-value rows */
.pf-kv { display: flex; flex-direction: column; gap: 0; }
.pf-kv__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 14px;
  gap: 12px;
}
.pf-kv__row:last-child { border-bottom: none; }
.pf-kv__row span { color: var(--muted); font-size: 12px; flex-shrink: 0; }
.pf-kv__row b { text-align: right; word-break: break-word; }

/* Activity blocks */
.pf-activity-block {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
}
.pf-activity-block__head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 10px;
}

/* ── Activity blocks — scrollable lists ── */
.pf-activity-block .wall-list {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
.pf-activity-block .wall-list::-webkit-scrollbar { width: 4px; }
.pf-activity-block .wall-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
.pf-activity-block .wall-list::-webkit-scrollbar-track { background: transparent; }

/* ── XP level distribution header (leaderboard) ── */
.sw-lv-dist {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
}
.sw-lv-dist__title { font-size: 13px; font-weight: 700; flex-shrink: 0; }
.sw-lv-dist__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sw-lv-dist__chip {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid;
}
.sw-lv-dist__cnt {
  background: rgba(0,0,0,.2);
  border-radius: 20px;
  padding: 0 5px;
  font-size: 10px;
}

/* ── Mini XP progress bar inside leaderboard ucard ── */
.ucard__xp-mini {
  height: 2px;
  background: rgba(255,255,255,.06);
  border-radius: 2px;
  margin: -4px 0 8px;
  overflow: hidden;
}
.ucard__xp-bar {
  height: 100%;
  border-radius: 2px;
  transition: width .4s ease;
}

/* ── Toast description line ── */
.sw-toast__desc {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* Telegram status */
.pf-tg-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
}
.pf-tg-status--unlinked {
  background: rgba(220,60,60,.08);
  border: 1px solid rgba(220,60,60,.2);
  color: #f87070;
}
.pf-tg-status--linked {
  background: rgba(40,200,100,.08);
  border: 1px solid rgba(40,200,100,.2);
  color: #5ddf8a;
}
.pf-tg-status__icon { font-size: 16px; }

/* Preview box */
.pf-preview-box {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 14px;
  min-height: 60px;
}

/* Avatar upload row */
.pf-avatar-upload-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  margin-bottom: 4px;
}
.pf-avatar-upload-row .pf-field { flex: 1; margin-bottom: 0; }

/* Raffle toast — already defined; add this if not present */


/* ============================================================
   USERS PAGE REDESIGN  (ucard / upage-*)
   ============================================================ */

.upage-toolbar {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.upage-sorts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.upage-sort-btn {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s ease;
  white-space: nowrap;
}
.upage-sort-btn:hover { background: rgba(255,255,255,.08); transform: translateY(-1px); }
.upage-sort-btn.active {
  background: linear-gradient(135deg, rgba(110,231,255,.18), rgba(167,139,250,.15));
  border-color: rgba(124,156,255,.35);
}

.upage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}

/* User card */
.ucard {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 16px;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ucard:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,.28);
  border-color: rgba(110,231,255,.22);
}
.ucard__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ucard__info { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.ucard__name { font-size: 15px; font-weight: 700; overflow: hidden; min-width: 0; max-width: 100%; }
.ucard__name .userlink { padding: 0; font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.ucard__name .name-decor { flex-wrap: nowrap; overflow: hidden; max-width: 100%; min-width: 0; }
.ucard__name .name-decor__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }
.ucard__login { font-size: 12px; color: var(--muted); }
.ucard-static {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(110,231,255,.10);
  border: 1px solid rgba(110,231,255,.20);
  font-size: 11px;
  font-weight: 700;
  color: #6ee7ff;
  width: fit-content;
}
.ucard__divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin-bottom: 12px;
}
.ucard__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ucard__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  text-align: center;
}
.ucard__stat-icon { font-size: 14px; }
.ucard__stat b { font-size: 13px; font-weight: 800; line-height: 1; }
.ucard__stat-label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }


/* ============================================================
   PUBLIC PROFILE MODAL REDESIGN
   ============================================================ */

.pub-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 16px;
}
@media (max-width: 500px) { .pub-hero { flex-direction: column; align-items: flex-start; } }
.pub-hero__info { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pub-hero__name { font-size: 22px; font-weight: 900; overflow: hidden; min-width: 0; max-width: 100%; }
.pub-hero__name .name-decor { flex-wrap: nowrap; overflow: hidden; max-width: 100%; min-width: 0; }
.pub-hero__name .name-decor__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; min-width: 0; }
.pub-hero__login { font-size: 13px; color: var(--muted); }

.pub-static-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(110,231,255,.10);
  border: 1px solid rgba(110,231,255,.22);
  font-size: 12px;
  font-weight: 700;
  color: #6ee7ff;
  width: fit-content;
  margin-top: 2px;
}
.pub-banned {
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(220,60,60,.1);
  border: 1px solid rgba(220,60,60,.25);
  color: #f87070;
  font-size: 12px;
  font-weight: 600;
}

.pub-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 500px) { .pub-stats-row { grid-template-columns: repeat(2, 1fr); } }
.pub-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
}
.pub-stat__val { font-size: 15px; font-weight: 800; margin-bottom: 4px; word-break: break-all; }
.pub-stat__label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.pub-like-row { margin: 12px 0; }
.pub-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,120,160,.3);
  background: rgba(255,120,160,.06);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
}
.pub-like-btn:hover:not(:disabled) { background: rgba(255,120,160,.14); transform: scale(1.03); }
.pub-like-btn.active { background: rgba(255,120,160,.18); border-color: rgba(255,120,160,.5); }
.pub-like-btn:disabled { opacity: .5; cursor: default; }
.pub-like-btn__icon { font-size: 16px; }
.pub-like-btn__count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 12px;
}

.pub-wall { margin-top: 16px; }
.pub-wall__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 12px;
}
.pub-wall__count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-size: 12px;
  font-weight: 700;
}
.pub-wall__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.pub-wall__form textarea {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  color: #fff;
  padding: 10px 12px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  min-height: 70px;
  outline: none;
  transition: border-color .15s;
}
.pub-wall__form textarea:focus { border-color: var(--accent); }
.pub-wall__divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 18px 0 14px;
}
.pub-wall__empty {
  text-align: center;
  color: rgba(255,255,255,.35);
  font-size: 13px;
  padding: 24px 0;
}
.pw-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 8px 0 4px;
}
.pw-post--readonly .pw-post__header { margin-bottom: 6px; }

/* ═══════════════════════════════════════════════════
   WALL POST INTERACTIONS  — лайки / комментарии
═══════════════════════════════════════════════════ */

/* ── Post footer row ── */
.pw-post__footer { margin-top: 8px; padding: 0 16px 14px; }
.pw-post__actions-row { display: flex; align-items: center; gap: 6px; }

/* Action buttons (like / comment / delete) — NOT .pw-btn to avoid toolbar conflict */
.pw-act-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.6); border-radius: 20px;
  padding: 5px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  line-height: 1;
}
.pw-act-btn:hover { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.18); }
.pw-act-btn--liked { background: rgba(255,80,100,.15); border-color: rgba(255,90,110,.4); color: #ff607a; }
.pw-act-btn--liked:hover { background: rgba(255,80,100,.25); }
.pw-act-btn__count { font-size: 12px; }
.pw-act-btn--del {
  margin-left: auto; background: none; border-color: transparent;
  color: rgba(255,255,255,.25); padding: 5px 8px;
}
.pw-act-btn--del:hover { background: rgba(255,60,60,.12); color: #ff6060; border-color: rgba(255,60,60,.25); }

/* ── Comments block ── */
.pw-post__comments-wrap {
  margin: 0 16px 14px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 12px;
}
.pw-comments-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }

.pw-comment { display: flex; gap: 10px; }
.pw-comment--reply { margin-left: 36px; }
.pw-comment__avatar { flex-shrink: 0; margin-top: 2px; }
.pw-comment__body {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 8px 12px;
}
.pw-comment__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.pw-comment__name { font-size: 13px; font-weight: 700; }
.pw-comment__date { font-size: 11px; color: rgba(255,255,255,.4); margin-left: auto; }
.pw-comment__text {
  font-size: 13px; line-height: 1.55; word-break: break-word;
  white-space: pre-wrap; color: rgba(255,255,255,.88);
}
.pw-comment__actions { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

/* Tiny comment action buttons */
.pw-cbtn {
  background: none; border: none; color: rgba(255,255,255,.35);
  font-size: 12px; cursor: pointer; padding: 2px 6px; border-radius: 6px;
  transition: color .12s, background .12s;
  display: inline-flex; align-items: center; gap: 3px;
}
.pw-cbtn:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.8); }
.pw-cbtn--liked { color: #ff607a !important; }
.pw-cbtn--del:hover { color: #ff6060; }

/* ── Comment form ── */
.pw-comment-form { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.pw-comment-form__row { display: flex; gap: 8px; align-items: flex-end; }
.pw-comment-input-wrap { flex: 1; position: relative; }
.pw-comment-input {
  width: 100%; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; color: #fff; padding: 8px 36px 8px 12px; font-size: 13px;
  font-family: inherit; resize: none; outline: none; min-height: 36px; max-height: 120px;
  transition: border-color .15s; box-sizing: border-box; line-height: 1.45;
}
.pw-comment-input:focus { border-color: rgba(125,211,252,.5); }
.pw-comment-input:disabled { opacity: .35; cursor: default; }
.pw-emoji-toggle {
  position: absolute; right: 8px; bottom: 8px;
  background: none; border: none; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0; opacity: .6; transition: opacity .12s;
}
.pw-emoji-toggle:hover { opacity: 1; }
.pw-comment-send {
  flex-shrink: 0; height: 36px; padding: 0 14px;
  font-size: 15px; line-height: 1; border-radius: 12px;
}
.pw-comment-msg { font-size: 12px; color: #ff6060; min-height: 14px; }
.pw-reply-bar {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; color: rgba(125,211,252,.8); cursor: pointer;
  padding: 3px 10px; background: rgba(125,211,252,.08);
  border-radius: 20px; margin-bottom: 2px;
}
.pw-reply-bar:hover { background: rgba(125,211,252,.15); }

/* ── Emoji tray ── */
.pw-emoji-tray {
  background: rgba(18,22,36,.97); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
  margin-top: 4px;
}
.pw-emoji-tray__tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.07); padding-bottom: 8px; }
.pw-emoji-tab {
  background: none; border: none; font-size: 17px; cursor: pointer;
  padding: 4px 6px; border-radius: 8px; opacity: .5; transition: opacity .1s, background .1s;
}
.pw-emoji-tab.active, .pw-emoji-tab:hover { opacity: 1; background: rgba(255,255,255,.08); }
.pw-emoji-tray__grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 1px; }
.pw-emoji-item {
  background: none; border: none; font-size: 19px; cursor: pointer;
  padding: 5px 3px; border-radius: 8px; line-height: 1; transition: background .1s; text-align: center;
}
.pw-emoji-item:hover { background: rgba(255,255,255,.1); }
.pw-loading-sm { font-size: 13px; color: rgba(255,255,255,.35); padding: 8px 0; }

/* ── pub wall header with link ── */
.pub-wall-section { padding: 4px 0; }
.pub-wall__hdr { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.pub-wall__badge { padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 12px; font-weight: 700; }
.pub-wall__open-link { margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 600; opacity: .8; }
.pub-wall__open-link:hover { opacity: 1; text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   USER PROFILE PAGE  /u/{username}
═══════════════════════════════════════════════════ */
/* uprofile-shell — managed by uprofile-page > uprofile-banner structure */
.uprofile-shell-legacy { padding: 0; overflow: hidden; }

.upr-hero {
  display: flex; gap: 20px; padding: 28px 28px 20px; align-items: flex-start;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.upr-hero__av { flex-shrink: 0; }
.upr-hero__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.upr-hero__name { font-size: 22px; font-weight: 800; }
.upr-hero__login { font-size: 14px; }
.upr-hero__actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

.upr-xp { margin-top: 4px; }
.upr-xp__label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 5px; }
.upr-xp__track { height: 6px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.upr-xp__fill { height: 100%; border-radius: 99px; transition: width .4s; }

.uprofile-panel { padding: 20px 24px; }
.uprofile-panel.hidden { display: none; }

.upr-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 16px; }

.upr-wall { display: flex; flex-direction: column; gap: 14px; }
.upr-wall-form {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px; padding: 16px;
}
.upr-wall-form__inner { display: flex; flex-direction: column; gap: 8px; }
.upr-wall-form__row { display: flex; align-items: center; justify-content: space-between; }


/* ═══════════════════════════════════════════════════════════════
   USER PROFILE PAGE /u/{username} — full redesign
   ═══════════════════════════════════════════════════════════════ */

/* Break out of .container to go full-width */
.uprofile-page {
  margin: -24px -16px 0;
  min-height: 60vh;
}
.uprofile-banner {
  height: 120px; position: relative; overflow: hidden;
  background: linear-gradient(135deg, #0d0b1e 0%, #1a0f38 40%, #0d1a35 100%);
}
.uprofile-banner__glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 100% at 25% 60%, rgba(139,92,246,.4) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 75% 40%, rgba(59,130,246,.25) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 50% 100%, rgba(168,85,247,.2) 0%, transparent 50%);
}
/* Shell sits over banner */
.uprofile-shell {
  max-width: 900px;
  margin: -36px auto 0;
  padding: 0 16px 48px;
  position: relative; z-index: 1;
}

/* Hero card */
.uprofile-hero-card {
  background: var(--card-bg, #161624);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.04);
}

/* ── Hero layout inside uprofile-hero-card ── */
.upr-hero-layout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  padding: 24px 28px 20px;
  align-items: flex-start;
}
@media (max-width: 640px) {
  .upr-hero-layout { grid-template-columns: 1fr; gap: 14px; padding: 18px 18px 14px; }
  .upr-hero-right { align-items: flex-start !important; flex-direction: row !important; flex-wrap: wrap !important; }
}

.upr-hero-avatar-wrap { flex-shrink: 0; position: relative; }
.upr-hero-avatar-wrap .avatar { border: 3px solid var(--av-border, rgba(255,255,255,.15)); }

/* avatar--hero size */
.avatar--hero { width: 88px !important; height: 88px !important; font-size: 28px !important; flex-shrink: 0; }

.upr-hero-center { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.upr-hero-name { font-size: 20px; font-weight: 800; line-height: 1.2; overflow: hidden; }
.upr-hero-login { font-size: 13px; color: rgba(255,255,255,.5); }


/* Skeleton */
.upr-skeleton { display: flex; gap: 20px; padding: 28px; align-items: flex-start; }
.upr-sk-avatar { width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,.07); flex-shrink: 0; animation: skelPulse 1.4s ease-in-out infinite; }
.upr-sk-lines { flex: 1; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.upr-sk-line { height: 14px; border-radius: 7px; background: rgba(255,255,255,.07); animation: skelPulse 1.4s ease-in-out infinite; }
.upr-sk-line--wide { width: 60%; }
.upr-sk-line--narrow { width: 30%; }
@keyframes skelPulse { 0%,100%{opacity:.5} 50%{opacity:1} }

/* Hero body */
.upr-hero-body { display: flex; gap: 20px; padding: 24px 28px 20px; align-items: flex-start; }
@media(max-width:600px){ .upr-hero-body{flex-direction:column;gap:14px;padding:18px 18px 14px} }
.upr-hero-left { display: flex; gap: 18px; align-items: flex-start; flex: 1; min-width: 0; }
.upr-hero-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; }
@media(max-width:600px){ .upr-hero-right{align-items:flex-start;flex-direction:row;flex-wrap:wrap} }

/* Avatar in hero */
.upr-hero-av { flex-shrink: 0; }
.upr-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.upr-name { font-size: 20px; font-weight: 800; line-height: 1.2; }
.upr-login { font-size: 13px; color: rgba(255,255,255,.5); }
.upr-status { display: flex; align-items: center; gap: 5px; font-size: 13px; color: rgba(255,255,255,.65); }
.upr-status__emoji { font-size: 16px; }
.upr-static-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: rgba(110,231,255,.8);
  background: rgba(110,231,255,.08); border: 1px solid rgba(110,231,255,.18);
  border-radius: 8px; padding: 3px 10px;
}

/* XP bar */
.upr-xp-bar { margin-top: 8px; }
.upr-xp-bar__track { height: 5px; background: rgba(255,255,255,.08); border-radius: 99px; overflow: hidden; }
.upr-xp-bar__fill { height: 100%; border-radius: 99px; transition: width .5s; }
.upr-xp-bar__labels { display: flex; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.4); margin-top: 3px; }

/* Hero stats (right side) */
.upr-hero-stats { display: flex; gap: 16px; }
.upr-hs { text-align: center; }
.upr-hs__val { font-size: 18px; font-weight: 800; color: #fff; }
.upr-hs__lbl { font-size: 11px; color: rgba(255,255,255,.45); }

/* Hero action buttons */
.upr-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.upr-btn {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; color: rgba(255,255,255,.8);
  font-size: 13px; font-weight: 600; padding: 7px 14px;
  cursor: pointer; transition: background .15s, border-color .15s;
  display: flex; align-items: center; gap: 6px;
}
.upr-btn:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.22); }
.upr-btn--like { min-width: 60px; justify-content: center; }
.upr-btn--liked { color: #f87171; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); }
.upr-btn:disabled { opacity: .4; cursor: default; }

/* Tabs */
.uprofile-tabs {
  display: flex; gap: 4px; padding: 0 20px 16px; flex-wrap: wrap;
}
.uprofile-tab {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: rgba(255,255,255,.5); font-size: 13px; font-weight: 600;
  padding: 8px 14px; cursor: pointer; border-radius: 8px;
  transition: color .15s, background .15s;
}
.uprofile-tab:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.uprofile-tab.active { color: #fff; background: rgba(99,102,241,.18); border-bottom-color: #6366f1; }
.uprofile-tab__icon { font-size: 14px; }
.uprofile-tab--ref { }

/* Panels */
.uprofile-panel { padding: 4px 24px 24px; }
.uprofile-panel.hidden { display: none; }

/* Info grid */
.upr-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.upr-info-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px; padding: 12px 14px;
}
.upr-info-card__icon { font-size: 1.4rem; flex-shrink: 0; }
.upr-info-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upr-info-card__label { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .05em; }
.upr-info-card__val { font-size: 14px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Awards */
.upr-awards-wrap { }
.upr-awards-header { font-size: 14px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.upr-awards-count { background: rgba(255,255,255,.1); border-radius: 20px; padding: 2px 8px; font-size: 12px; }
.upr-empty-panel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px; color: rgba(255,255,255,.35); }
.upr-empty-panel__icon { font-size: 2rem; }

/* Wall in profile */
.upr-wall-container { display: flex; flex-direction: column; gap: 0; }
.upr-wall-loading { display: flex; align-items: center; justify-content: center; padding: 32px; color: rgba(255,255,255,.4); }
.upr-wall-spinner { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,.1); border-top-color: #6366f1; border-radius: 50%; animation: spin .8s linear infinite; margin-right: 10px; }
@keyframes spin { to { transform: rotate(360deg); } }
.upr-wall-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px; text-align: center; color: rgba(255,255,255,.4); }
.upr-wall-empty__icon { font-size: 2.5rem; }
.upr-wall-empty__title { font-size: 15px; font-weight: 700; color: rgba(255,255,255,.6); }
.upr-wall-empty__sub { font-size: 13px; }
.upr-wall-error { padding: 20px; color: #f87171; font-size: 13px; }
.upr-feed { display: flex; flex-direction: column; gap: 0; }
.upr-login-prompt { display: flex; align-items: center; gap: 8px; padding: 16px 20px; font-size: 13px; color: rgba(255,255,255,.5); background: rgba(255,255,255,.03); border-radius: 12px; margin-bottom: 16px; }
.upr-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px; }
.upr-pager__btn { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: rgba(255,255,255,.7); font-size: 13px; padding: 7px 16px; cursor: pointer; transition: background .15s; }
.upr-pager__btn:hover:not(:disabled) { background: rgba(255,255,255,.13); }
.upr-pager__btn:disabled { opacity: .35; cursor: default; }
.upr-pager__info { font-size: 13px; color: rgba(255,255,255,.45); }

/* Composer card in profile wall */
.upr-composer-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 14px; margin-bottom: 16px; }
.upr-composer-card__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.upr-composer-card__av { flex-shrink: 0; }
.upr-composer-card__info { display: flex; flex-direction: column; gap: 2px; }
.upr-composer-card__name { font-size: 13px; font-weight: 700; }
.upr-composer-card__hint { font-size: 12px; color: rgba(255,255,255,.4); }
.upr-composer-editor { min-height: 60px; max-height: 200px; overflow-y: auto; outline: none; padding: 10px; font-size: 13px; line-height: 1.6; color: #fff; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(0,0,0,.2); word-break: break-word; }
.upr-composer-editor:empty::before { content: attr(data-placeholder); color: rgba(255,255,255,.3); pointer-events: none; font-style: italic; }
.upr-composer-card__footer { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.upr-send-btn { background: linear-gradient(135deg, #6366f1, #a855f7); border: none; border-radius: 10px; color: #fff; font-size: 13px; font-weight: 700; padding: 8px 18px; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: opacity .15s; }
.upr-send-btn:hover { opacity: .88; }

/* avatar--md — used in wall posts */
.avatar--md { width: 38px; height: 38px; font-size: 14px; }

/* upr-post layout — compact card style */
.upr-post {
  display: flex; gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s;
}
.upr-post:last-child { border-bottom: none; }
.upr-post:hover { background: rgba(255,255,255,.02); }
.upr-post__av-col { flex-shrink: 0; padding-top: 1px; }
.upr-post__av-line { display: none; }
.upr-post__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.upr-post__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.upr-post__author-block { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.upr-post__author-name { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upr-post__visitor-chip {
  font-size: 10px; color: rgba(255,255,255,.4);
  background: rgba(255,255,255,.06); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap;
}
.upr-post__owner-chip {
  font-size: 10px; color: rgba(110,231,255,.75);
  background: rgba(110,231,255,.08); border-radius: 999px;
  padding: 1px 7px; white-space: nowrap;
}
.upr-post__head-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.upr-post__time { font-size: 11px; color: rgba(255,255,255,.3); white-space: nowrap; }
.upr-post__del-btn {
  background: none; border: none; color: rgba(255,255,255,.2);
  font-size: 15px; cursor: pointer; padding: 0 2px; line-height: 1;
  transition: color .15s; border-radius: 4px;
}
.upr-post__del-btn:hover { color: #f87171; background: rgba(248,113,113,.1); }
.upr-post__body {
  font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,.82); word-break: break-word;
}
.upr-post__body img { max-width: 100%; border-radius: 8px; margin-top: 4px; display: block; }
.upr-post__reactions { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.upr-react-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px; padding: 3px 9px;
  font-size: 12px; color: rgba(255,255,255,.5);
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.upr-react-btn:hover { background: rgba(255,255,255,.09); color: #fff; border-color: rgba(255,255,255,.15); }
.upr-react-btn--liked { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.25); color: #f87171; }
.upr-react-btn__icon { font-size: 12px; line-height: 1; }
.upr-react-btn__count { font-weight: 700; font-size: 11px; }
.upr-react-btn__label { color: rgba(255,255,255,.35); font-size: 11px; }
.upr-post--visitor { }
.upr-post__gallery { margin-top: 6px; }
.upr-post__gallery img { max-width: 100%; border-radius: 10px; display: block; }
/* Comments section */
.upr-post__comments { display: flex; flex-direction: column; gap: 8px; padding: 10px 0 2px; border-top: 1px solid rgba(255,255,255,.05); margin-top: 4px; }
.upr-comment { display: flex; gap: 8px; align-items: flex-start; }
.upr-comment__body { flex: 1; min-width: 0; background: rgba(255,255,255,.04); border-radius: 10px; padding: 7px 11px; font-size: 12px; line-height: 1.5; }
.upr-comment__author { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.upr-comment__text { color: rgba(255,255,255,.75); word-break: break-word; }
.upr-comment-form { display: flex; gap: 8px; align-items: flex-end; padding-top: 4px; }
.upr-comment-input { flex: 1; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; padding: 7px 11px; font-size: 12px; color: #fff; outline: none; resize: none; font-family: inherit; min-height: 34px; max-height: 80px; }
.upr-comment-send { background: rgba(99,102,241,.18); border: 1px solid rgba(99,102,241,.35); border-radius: 8px; color: #a5b4fc; font-size: 12px; font-weight: 700; padding: 6px 12px; cursor: pointer; transition: background .15s; white-space: nowrap; }
.upr-comment-send:hover { background: rgba(99,102,241,.32); }

/* Error state */
.upr-error { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px; text-align: center; color: rgba(255,255,255,.5); }
.upr-error__icon { font-size: 3rem; }



/* ============================================================
   PROFILE — Static ID badge
   ============================================================ */
.pf-static-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  width: 100%;
  box-sizing: border-box;
}
.pf-static-badge--set {
  background: rgba(110,231,255,.08);
  border: 1px solid rgba(110,231,255,.22);
  color: #6ee7ff;
}
.pf-static-badge--unset {
  background: rgba(255,170,0,.07);
  border: 1px solid rgba(255,170,0,.2);
  color: #ffc940;
}


/* ═══════════════════════════ NEWS ═══════════════════════════ */

/* Hero */
.news-hero {
  position:relative; overflow:hidden;
  border-radius:20px 20px 0 0;
  padding:24px 22px 18px;
  background:
    radial-gradient(900px 260px at 0% 0%, rgba(14,165,233,.15), transparent 50%),
    radial-gradient(700px 240px at 100% 0%, rgba(139,92,246,.13), transparent 45%),
    rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09); border-bottom:none;
}
.news-hero__bg {
  position:absolute; inset:0;
  background:radial-gradient(ellipse 600px 160px at 50% 120%, rgba(14,165,233,.06), transparent 60%);
  pointer-events:none;
}
.news-hero__content { position:relative; z-index:1; }
.news-hero__title { display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.news-hero__icon {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:26px; border-radius:16px;
  background:rgba(14,165,233,.12); border:1px solid rgba(14,165,233,.24); flex-shrink:0;
}
.news-hero__title h1 { margin:0; font-size:22px; }
.news-hero__sub { margin:3px 0 0; font-size:13px; color:rgba(255,255,255,.5); }
.news-filters { display:flex; gap:6px; flex-wrap:wrap; }
.news-filter-tag {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; border-radius:999px; font-size:12px; font-weight:700;
  cursor:pointer; border:1px solid transparent; transition:all .15s;
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.12);
  color:rgba(255,255,255,.75);
}
.news-filter-tag:hover, .news-filter-tag.active { opacity:1; color:#fff; }

/* Feed */
.news-feed {
  background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.07);
  border-top:none; border-radius:0 0 20px 20px;
  padding:16px; display:flex; flex-direction:column; gap:12px;
}
.news-loading { display:flex; align-items:center; gap:10px; padding:24px; color:rgba(255,255,255,.45); justify-content:center; }
.news-spinner { width:20px; height:20px; border:2px solid rgba(255,255,255,.15); border-top-color:rgba(14,165,233,.7); border-radius:50%; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.news-empty { text-align:center; padding:40px 20px; color:rgba(255,255,255,.35); font-size:14px; }

/* Card */
.news-card {
  display:flex; flex-direction:column;
  border-radius:16px; border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.04);
  overflow:hidden; cursor:pointer;
  transition:transform .13s ease, border-color .13s ease, box-shadow .13s ease;
}
.news-card:hover { transform:translateY(-2px); border-color:rgba(255,255,255,.16); box-shadow:0 12px 32px rgba(0,0,0,.35); }
.news-card--pinned { border-color:rgba(250,204,21,.25); background:rgba(250,204,21,.04); }

.news-card__cover { width:100%; height:180px; object-fit:cover; display:block; }
.news-card__body { padding:14px 16px; flex:1; display:flex; flex-direction:column; gap:8px; }
.news-card__tags { display:flex; gap:5px; flex-wrap:wrap; }
.news-tag {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:800; padding:3px 9px; border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
}
.news-card__title { font-size:15px; font-weight:800; line-height:1.4; }
.news-card__summary { font-size:13px; color:rgba(255,255,255,.6); line-height:1.5; }
.news-card__footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:8px; border-top:1px solid rgba(255,255,255,.06); }
.news-card__meta { font-size:11px; color:rgba(255,255,255,.35); }
.news-card__stats { display:flex; align-items:center; gap:10px; }
.news-card__stat { display:flex; align-items:center; gap:4px; font-size:12px; color:rgba(255,255,255,.45); }
.news-card__like-btn {
  display:flex; align-items:center; gap:4px;
  background:none; border:1px solid rgba(255,255,255,.1); border-radius:999px;
  padding:3px 10px; font-size:12px; font-weight:700; cursor:pointer;
  color:rgba(255,255,255,.5); transition:all .15s;
}
.news-card__like-btn:hover { border-color:rgba(239,68,68,.4); color:#f87171; }
.news-card__like-btn.liked { border-color:rgba(239,68,68,.5); color:#f87171; background:rgba(239,68,68,.08); }
.news-card__pin { font-size:11px; color:#fde68a; }

/* Feed grid on wide screens */
@media(min-width:900px){
  .news-feed { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
  .news-card--pinned.news-card--wide { grid-column:1/-1; flex-direction:row; }
  .news-card--wide .news-card__cover { width:280px; height:auto; flex-shrink:0; }
}

/* Load more */
.news-loadmore-wrap { padding:16px; text-align:center; }

/* ── Modal / Reader ── */
.news-modal { position:fixed; inset:0; z-index:9000; display:flex; align-items:flex-start; justify-content:center; padding:20px 16px; overflow-y:auto; }
.news-modal.hidden { display:none; }
.news-modal__backdrop { position:fixed; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(4px); }
.news-modal__box {
  position:relative; z-index:1; width:100%; max-width:740px;
  background:var(--card-bg, #14161d); border:1px solid rgba(255,255,255,.1);
  border-radius:20px; overflow:hidden; margin:auto;
}
.news-modal__close {
  position:absolute; top:14px; right:14px; z-index:2;
  background:rgba(0,0,0,.4); border:1px solid rgba(255,255,255,.15);
  border-radius:50%; width:32px; height:32px; font-size:14px;
  cursor:pointer; color:#fff; display:flex; align-items:center; justify-content:center;
}
.news-modal__close:hover { background:rgba(255,255,255,.12); }

/* Reader content */
.news-reader {}
.news-reader__cover { width:100%; max-height:320px; object-fit:cover; display:block; }
.news-reader__body { padding:24px 28px 28px; }
.news-reader__tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:12px; }
.news-reader__title { font-size:22px; font-weight:900; line-height:1.35; margin:0 0 8px; }
.news-reader__meta { font-size:12px; color:rgba(255,255,255,.4); margin-bottom:16px; }
.news-reader__summary { font-size:15px; color:rgba(255,255,255,.65); margin-bottom:20px; line-height:1.6; border-left:3px solid rgba(14,165,233,.5); padding-left:14px; }
.news-reader__content {
  font-size:14px; line-height:1.75; color:rgba(255,255,255,.85);
}
.news-reader__content h2 { font-size:18px; font-weight:800; margin:24px 0 10px; }
.news-reader__content h3 { font-size:15px; font-weight:800; margin:20px 0 8px; }
.news-reader__content p { margin:0 0 12px; }
.news-reader__content a { color:#38bdf8; text-decoration:underline; }
.news-reader__content img { max-width:100%; border-radius:10px; margin:8px 0; }
.news-reader__content iframe { max-width:100%; border-radius:10px; margin:8px 0; aspect-ratio:16/9; width:100%; }
.news-reader__content blockquote { border-left:3px solid rgba(14,165,233,.5); margin:12px 0; padding:8px 14px; background:rgba(14,165,233,.06); border-radius:0 8px 8px 0; }
.news-reader__content code, .news-reader__content pre { background:rgba(0,0,0,.35); border-radius:6px; padding:2px 6px; font-family:monospace; font-size:13px; }
.news-reader__content pre { padding:12px 16px; overflow-x:auto; }
.news-reader__content ul, .news-reader__content ol { padding-left:20px; margin:8px 0; }
.news-reader__content hr { border:none; border-top:1px solid rgba(255,255,255,.1); margin:20px 0; }
.news-reader__footer { display:flex; align-items:center; gap:12px; margin-top:24px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.news-reader__like-btn {
  display:flex; align-items:center; gap:6px;
  background:rgba(239,68,68,.08); border:1px solid rgba(239,68,68,.25);
  border-radius:999px; padding:7px 18px; font-size:13px; font-weight:800;
  cursor:pointer; color:#f87171; transition:all .15s;
}
.news-reader__like-btn:hover { background:rgba(239,68,68,.16); }
.news-reader__like-btn.liked { background:rgba(239,68,68,.18); border-color:rgba(239,68,68,.5); }
.news-reader__views { font-size:12px; color:rgba(255,255,255,.35); }

/* ═══════════════════════ ADMIN NEWS ═══════════════════════ */
.admin-news-list { padding:12px 16px; display:flex; flex-direction:column; gap:8px; }
.admin-news-row {
  display:flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:12px; padding:10px 14px;
}
.admin-news-row__title { font-weight:700; font-size:13px; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.admin-news-row__meta { font-size:11px; color:rgba(255,255,255,.38); white-space:nowrap; }
.admin-news-row__badge {
  font-size:10px; font-weight:800; padding:2px 8px; border-radius:999px;
  background:rgba(16,185,129,.12); border:1px solid rgba(16,185,129,.25); color:#34d399;
}
.admin-news-row__badge--draft { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:rgba(255,255,255,.4); }
.admin-news-row__badge--pinned { background:rgba(250,204,21,.1); border-color:rgba(250,204,21,.25); color:#fde68a; }
.admin-news-row__actions { display:flex; gap:6px; flex-shrink:0; }
.admin-news-row__stat { font-size:11px; color:rgba(255,255,255,.35); display:flex; align-items:center; gap:3px; }

/* Editor */
.admin-news-editor { margin-top:0; border-top:1px solid rgba(255,255,255,.08); }
.admin-news-editor__header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; background:rgba(0,0,0,.18);
}
.admin-news-editor__htitle { font-weight:800; font-size:15px; }
.admin-news-editor__body {
  display:grid; grid-template-columns:1fr 280px; gap:0;
}
.admin-news-editor__main { padding:18px; display:flex; flex-direction:column; gap:12px; border-right:1px solid rgba(255,255,255,.08); }
.admin-news-editor__side { padding:16px; display:flex; flex-direction:column; gap:14px; background:rgba(0,0,0,.12); }
.admin-news-side-block { display:flex; flex-direction:column; gap:8px; }
.admin-news-side-block__title { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.8px; color:rgba(255,255,255,.4); }
.pf-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; }

.admin-news-cover-preview { margin-top:-4px; border-radius:10px; overflow:hidden; }
.admin-news-cover-preview img { width:100%; max-height:160px; object-fit:cover; display:block; border-radius:10px; }

/* Rich editor toolbar */
.admin-news-toolbar {
  display:flex; align-items:center; flex-wrap:wrap; gap:2px;
  padding:6px 8px; background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.1);
  border-bottom:none; border-radius:10px 10px 0 0;
}
.admin-news-toolbar button {
  background:none; border:none; border-radius:6px; padding:4px 8px;
  font-size:13px; cursor:pointer; color:rgba(255,255,255,.7);
  transition:background .12s, color .12s; min-width:28px;
}
.admin-news-toolbar button:hover { background:rgba(255,255,255,.1); color:#fff; }
.admin-news-toolbar__sep { width:1px; height:18px; background:rgba(255,255,255,.12); margin:0 3px; }
.admin-news-body {
  min-height:280px; max-height:520px; overflow-y:auto;
  padding:14px 16px;
  background:rgba(0,0,0,.2); border:1px solid rgba(255,255,255,.1);
  border-radius:0 0 10px 10px;
  font-size:14px; line-height:1.7; color:rgba(255,255,255,.85);
  outline:none;
}
.admin-news-body:focus { border-color:rgba(99,102,241,.4); }
.admin-news-body h2 { font-size:18px; margin:16px 0 8px; }
.admin-news-body h3 { font-size:15px; margin:14px 0 6px; }
.admin-news-body blockquote { border-left:3px solid rgba(14,165,233,.5); margin:10px 0; padding:8px 14px; background:rgba(14,165,233,.06); border-radius:0 8px 8px 0; }
.admin-news-body a { color:#38bdf8; }
.admin-news-body img { max-width:100%; border-radius:8px; }
.admin-news-body hr { border:none; border-top:1px solid rgba(255,255,255,.12); margin:16px 0; }

/* Tags editor */
.admin-news-tags-list { display:flex; flex-wrap:wrap; gap:5px; min-height:24px; }
.admin-news-tag-item {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:800; padding:3px 8px; border-radius:999px;
  cursor:default;
}
.admin-news-tag-item__del { cursor:pointer; opacity:.6; font-size:12px; margin-left:2px; }
.admin-news-tag-item__del:hover { opacity:1; }
.admin-news-tag-builder { display:flex; gap:5px; align-items:center; }
.admin-news-tag-emoji { width:44px !important; text-align:center; padding:0 6px !important; }
.admin-news-tag-color { width:36px; height:34px; border:1px solid rgba(255,255,255,.15); border-radius:8px; cursor:pointer; padding:2px; background:none; }
.admin-news-tag-presets { display:flex; gap:4px; flex-wrap:wrap; }
.news-tag-preset {
  font-size:11px; padding:3px 8px; border-radius:999px; cursor:pointer;
  border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.7); transition:all .13s;
}
.news-tag-preset:hover { background:rgba(255,255,255,.12); color:#fff; }

@media(max-width:860px){
  .admin-news-editor__body { grid-template-columns:1fr; }
  .admin-news-editor__main { border-right:none; border-bottom:1px solid rgba(255,255,255,.08); }
}

/* ============================================================
   PROFILE EXTENDED CUSTOMIZATION v2
   ============================================================ */

/* Status badge on pub profile / user cards */
.pub-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 12px;
  color: rgba(255,255,255,.85);
  width: fit-content;
  margin-top: 2px;
  backdrop-filter: blur(6px);
}
.pub-status__emoji { font-size: 14px; }

/* User card status */
.ucard__status {
  font-size: 11px;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 160px;
}

/* Rank medal on user card */
.ucard__medal {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
  pointer-events: none;
}
.ucard { position: relative; }

/* ============================================================
   ACHIEVEMENTS GRID — beautiful award cards
   ============================================================ */

.pf-achievements-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  margin-bottom: 24px;
}
.pf-achievements-hero__icon { font-size: 48px; filter: drop-shadow(0 0 16px rgba(255,215,0,.5)); }
.pf-achievements-hero__title { font-size: 22px; font-weight: 900; margin-bottom: 4px; }
.pf-achievements-hero__sub { font-size: 13px; color: var(--muted); }

.pf-awards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.pf-awards-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
  grid-column: 1 / -1;
}

.award-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1.5px solid var(--award-border, rgba(255,215,0,.35));
  box-shadow: 0 0 20px var(--award-glow, rgba(255,215,0,.12)), 0 4px 16px rgba(0,0,0,.2);
  transition: transform .18s ease, box-shadow .18s ease;
  overflow: hidden;
}
.award-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at top left, var(--award-glow, rgba(255,215,0,.08)), transparent 60%);
  pointer-events: none;
}
.award-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 32px var(--award-glow, rgba(255,215,0,.22)), 0 8px 24px rgba(0,0,0,.3);
}
.award-card__icon {
  font-size: 36px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--award-glow, rgba(255,215,0,.5)));
  line-height: 1;
}
.award-card__body { min-width: 0; flex: 1; }
.award-card__title { font-size: 15px; font-weight: 800; margin-bottom: 4px; line-height: 1.2; }
.award-card__desc { font-size: 12px; color: rgba(255,255,255,.7); line-height: 1.4; margin-bottom: 4px; }
.award-card__note { font-size: 11px; color: var(--muted); font-style: italic; margin-bottom: 4px; }
.award-card__date { font-size: 10px; color: var(--muted); }

/* ── Leaderboard rank badge on ucard ── */
.ucard--lb { cursor: pointer; }
.ucard__rank-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 1px 7px;
  line-height: 1.6;
}
.ucard__rank-badge--top {
  color: #fbbf24;
  background: rgba(251,191,36,.1);
  border-color: rgba(251,191,36,.25);
}

/* ── Compact award-card for profile achievements panel ── */
.award-card--compact {
  padding: 10px 12px;
  gap: 10px;
  border-radius: 12px;
}
.award-card--compact .award-card__icon { font-size: 24px; }
.award-card--compact .award-card__title { font-size: 13px; margin-bottom: 2px; }
.award-card--compact .award-card__desc { font-size: 11px; margin-bottom: 2px; }
.award-card--compact .award-card__date { font-size: 10px; }


/* ============================================================
   PUBLIC PROFILE — TABS
   ============================================================ */

.pub-tabs {
  display: flex;
  gap: 4px;
  margin: 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding-bottom: 0;
}
.pub-tab {
  padding: 8px 16px;
  border-radius: 10px 10px 0 0;
  border: none;
  background: none;
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: .15s ease;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pub-tab:hover { color: #fff; background: rgba(255,255,255,.05); }
.pub-tab.active {
  color: #fff;
  border-bottom-color: var(--accent, #6ee7ff);
  background: rgba(110,231,255,.06);
}

/* Awards panel inside pub profile */
.pub-awards-panel { padding-top: 4px; }
.pub-awards-panel.hidden { display: none; }
.pub-awards-title {
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pub-awards-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,215,0,.12);
  border: 1px solid rgba(255,215,0,.25);
  color: #ffd700;
  font-size: 12px;
}
.pub-awards-empty {
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: 14px;
}

.pub-wall-panel { padding-top: 4px; }
.pub-wall-panel.hidden { display: none; }

/* ============================================================
   USERS PAGE — SEARCH & HEADER upgrade
   ============================================================ */

.upage-header {
  margin-bottom: 20px;
}
.upage-header__title {
  font-size: 26px;
  font-weight: 900;
  margin-bottom: 4px;
  background: linear-gradient(135deg, #6ee7ff, #a78bfa);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.upage-header__sub { font-size: 13px; color: var(--muted); }

/* Improved ucard */
.ucard {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ucard:hover {
  transform: translateY(-4px) scale(1.01);
}

/* profile preview status */
.profile-preview-status {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Style panel status row */
.pf-status-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}
.pf-field--emoji {
  flex-shrink: 0;
  width: 80px;
}
.pf-field--emoji input {
  text-align: center;
  font-size: 18px;
}

/* ============================================================
   USERS PAGE HEADER SECTION
   ============================================================ */

#page-users .card__header {
  background: linear-gradient(135deg, rgba(110,231,255,.08), rgba(167,139,250,.08));
  border-bottom: 1px solid rgba(255,255,255,.07);
  border-radius: 16px 16px 0 0;
  padding: 24px 24px 20px;
}
#page-users .card__header h1 {
  font-size: 28px;
  font-weight: 900;
  background: linear-gradient(135deg, #6ee7ff, #a78bfa 60%, #ff7eb3);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}
#usersPageBox {
  padding: 18px 18px 18px;
}

/* ucard grid bigger on large screens */
@media (min-width: 900px) {
  .upage-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}
@media (min-width: 1400px) {
  .upage-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}

/* Award chip micro-glow on profile overview */
.profile-awards-wrap .award-chip {
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  border-color: rgba(255,215,0,.2);
  box-shadow: 0 0 12px rgba(255,215,0,.08);
  transition: box-shadow .18s, transform .18s;
}
.profile-awards-wrap .award-chip:hover {
  box-shadow: 0 0 20px rgba(255,215,0,.18);
  transform: translateY(-1px);
}


.pub-wall-pager { display:flex; align-items:center; justify-content:center; gap:12px; padding:6px 0; }


/* Fix long names in user cards, public profile and live preview */
.userlink{
  flex-wrap: nowrap;
  min-width: 0;
  max-width: 100%;
}
.name-decor{
  flex-wrap: nowrap;
  max-width: 100%;
}
.name-decor__text{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%;
}
.pub-hero__info,
.profile-preview-meta,
.profile-preview-card .pub-hero__info{
  min-width: 0;
  flex: 1;
}
.profile-preview-card .pub-hero__name,
.profile-preview-card .pub-hero__name .name-decor,
.profile-preview-card .pub-hero__name .name-decor__text{
  max-width: 100%;
}
.pf-preview-box .modal__card{
  width: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
}
.profile-preview-card--full .modal__body{
  padding: 16px;
}
.profile-preview-card__header{
  gap: 10px;
}
.profile-preview-card__badge{
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.profile-preview-tabs{
  pointer-events: none;
  opacity: .92;
}
.profile-preview-card .pub-stats-row{
  margin-top: 14px;
}
.profile-preview-card .pub-like-row{
  margin-top: 14px;
}


/* Bugfix: stable truncation for long names in users/profile cards */
.ucard,
.ucard__header,
.ucard__info,
.pub-hero,
.pub-hero__info,
.pub-hero__name,
.ucard__name{
  min-width:0;
}
.ucard__name .userlink,
.pub-hero__name .name-decor,
.pub-hero__name .userlink,
.ucard__name .name-decor{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  max-width:100%;
  flex-wrap:nowrap;
  overflow:hidden;
}
.ucard__name .name-decor__text,
.pub-hero__name .name-decor__text{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ucard__name .svg-icon,
.ucard__name .profile-badge,
.pub-hero__name .svg-icon,
.pub-hero__name .profile-badge{
  flex:0 0 auto;
}
.pub-hero__login,
.ucard__login,
.ucard__status,
.pub-status{
  min-width:0;
  max-width:100%;
}
.pub-status{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════
   FAMILIES PAGE
   ═══════════════════════════════════════════════════════════ */

.fam-hero{
  padding:22px 22px 12px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.fam-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:0 18px 14px;
}
.fam-toolbar .search{ flex:1; min-width:180px; }
.fam-toolbar .select{ min-width:160px; }

/* grid — одна колонка, широкие горизонтальные карточки */
/* grid — квадратные карточки */
.fam-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:12px;
  padding:0 18px 18px;
}

/* card */
.fam-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  cursor:default;
  transition: transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
.fam-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 40px rgba(0,0,0,.4);
}

/* цветная полоска сверху */
.fam-card__stripe{
  height:4px; width:100%; flex-shrink:0;
}

/* лого — по центру */
.fam-card__logo-wrap{
  display:flex; justify-content:center;
  padding:18px 16px 10px;
}
.fam-card__logo{
  width:64px; height:64px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid rgba(255,255,255,.18);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
}
.fam-card__logo--fallback{
  width:64px; height:64px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px; font-weight:900;
  border:2px solid rgba(255,255,255,.16);
  box-shadow:0 4px 16px rgba(0,0,0,.35);
}

/* основной контент */
.fam-card__body{
  flex:1;
  padding:0 14px 10px;
  display:flex; flex-direction:column; gap:5px;
  align-items:center; text-align:center;
}
.fam-card__top{
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.fam-card__name{
  font-weight:900; font-size:14px; line-height:1.3;
}
.fam-card__srv{
  font-size:10px; font-weight:700; padding:2px 8px;
  border-radius:999px; flex-shrink:0;
  background:rgba(255,255,255,.08); color:var(--muted);
  border:1px solid rgba(255,255,255,.10);
}
.fam-card__desc{
  font-size:11px; line-height:1.5; color:var(--muted);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.fam-card__tags{ display:flex; flex-wrap:wrap; gap:3px; justify-content:center; }
.fam-card__tags .fish-badge{ font-size:10px; padding:2px 6px; }

/* кнопки */
.fam-card__actions{
  display:flex; flex-direction:column; gap:6px;
  padding:0 12px 14px;
}
.fam-card__btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  padding:7px 12px; border-radius:10px; font-size:11px; font-weight:700;
  border:none; cursor:pointer; white-space:nowrap;
  transition:filter .15s, transform .12s;
  text-decoration:none; width:100%;
}
.fam-card__btn:hover{ filter:brightness(1.15); transform:scale(1.02); }
.fam-card__btn--discord{
  background: linear-gradient(135deg,#5865f2,#7289da);
  color:#fff;
  box-shadow:0 3px 10px rgba(88,101,242,.4);
}
.fam-card__btn--detail{
  background: linear-gradient(135deg,rgba(251,191,36,.18),rgba(217,119,6,.14));
  color:#fbbf24;
  border:1px solid rgba(251,191,36,.28);
}

/* цвета карточек — палитра акцентных градиентов для полосок и fallback */
.fam-card--c0 .fam-card__stripe{ background:linear-gradient(180deg,#6ee7ff,#3b82f6); }
.fam-card--c0 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(110,231,255,.22),rgba(59,130,246,.22)); color:#6ee7ff; }
.fam-card--c1 .fam-card__stripe{ background:linear-gradient(180deg,#a78bfa,#7c3aed); }
.fam-card--c1 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(124,58,237,.22)); color:#a78bfa; }
.fam-card--c2 .fam-card__stripe{ background:linear-gradient(180deg,#f472b6,#db2777); }
.fam-card--c2 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(244,114,182,.22),rgba(219,39,119,.22)); color:#f472b6; }
.fam-card--c3 .fam-card__stripe{ background:linear-gradient(180deg,#34d399,#059669); }
.fam-card--c3 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(52,211,153,.22),rgba(5,150,105,.22)); color:#34d399; }
.fam-card--c4 .fam-card__stripe{ background:linear-gradient(180deg,#fbbf24,#d97706); }
.fam-card--c4 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(251,191,36,.22),rgba(217,119,6,.22)); color:#fbbf24; }
.fam-card--c5 .fam-card__stripe{ background:linear-gradient(180deg,#fb923c,#ea580c); }
.fam-card--c5 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(251,146,60,.22),rgba(234,88,12,.22)); color:#fb923c; }
.fam-card--c6 .fam-card__stripe{ background:linear-gradient(180deg,#38bdf8,#0284c7); }
.fam-card--c6 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(56,189,248,.22),rgba(2,132,199,.22)); color:#38bdf8; }
.fam-card--c7 .fam-card__stripe{ background:linear-gradient(180deg,#f87171,#dc2626); }
.fam-card--c7 .fam-card__logo--fallback{ background:linear-gradient(135deg,rgba(248,113,113,.22),rgba(220,38,38,.22)); color:#f87171; }

/* detail modal */
.fam-detail__logo{
  width:72px; height:72px; border-radius:16px; object-fit:cover;
  border:2px solid rgba(255,255,255,.14);
}
.fam-detail__logo--fallback{
  width:72px; height:72px; border-radius:16px;
  background: linear-gradient(135deg, rgba(110,231,255,.22), rgba(167,139,250,.22));
  border:2px solid rgba(255,255,255,.14);
  display:flex; align-items:center; justify-content:center;
  font-size:30px; font-weight:900; color:var(--accent);
}
.fam-detail-desc{
  font-size:14px; line-height:1.65; color:var(--text);
  white-space:pre-line;
}

/* admin families */
.fam-admin-tabs{
  display:flex; gap:8px; padding:14px 18px 0;
}
.fam-admin-tab{
  padding:7px 16px; border-radius:999px; font-size:13px; font-weight:700; cursor:pointer;
  border:1px solid var(--stroke); background:rgba(255,255,255,.04); color:var(--text);
  transition:background .15s,border-color .15s;
}
.fam-admin-tab.active{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.25);
}
.fam-admin-pane{ display:none; padding:14px 18px 18px; }
.fam-admin-pane.active{ display:block; }
.fam-admin-row{
  display:flex; align-items:center; gap:12px;
  padding:12px; border-radius:14px;
  border:1px solid rgba(255,255,255,.09);
  background:rgba(255,255,255,.03);
  margin-bottom:8px;
}
.fam-admin-row__logo{
  width:48px; height:48px; border-radius:12px; object-fit:cover; flex-shrink:0;
  border:1px solid rgba(255,255,255,.10);
}
.fam-admin-row__logo--fallback{
  width:48px; height:48px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(135deg,rgba(110,231,255,.22),rgba(167,139,250,.22));
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:var(--accent);
}
.fam-admin-row__info{ flex:1; min-width:0; }
.fam-admin-row__name{ font-weight:800; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fam-admin-row__meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.fam-admin-row__actions{ display:flex; gap:6px; flex-shrink:0; }

/* status badge */
.fam-status{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11px; font-weight:700;
}
.fam-status--pending{ background:rgba(255,180,0,.14); color:#ffd460; border:1px solid rgba(255,180,0,.25); }
.fam-status--approved{ background:rgba(74,222,128,.12); color:#4ade80; border:1px solid rgba(74,222,128,.22); }
.fam-status--rejected{ background:rgba(255,107,107,.12); color:#ff6b6b; border:1px solid rgba(255,107,107,.22); }

/* required star */
.req{ color:var(--danger); }


.notif-bell--alt{background:rgba(167,139,250,.14);border-color:rgba(167,139,250,.26)}
.notif-bell--alt:hover{border-color:rgba(167,139,250,.45)}
.feedback-modal-card{width:min(760px, calc(100vw - 24px));}
.admin-feedback-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:16px;}
.admin-feedback-list{display:flex;flex-direction:column;gap:10px;max-height:780px;overflow:auto;}
.admin-feedback-item{width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;}
.admin-feedback-item.active{border-color:rgba(124,92,255,.55);box-shadow:0 0 0 3px rgba(124,92,255,.12);}
.admin-feedback-item__top,.admin-feedback-view__badges{display:flex;gap:8px;flex-wrap:wrap;}
.admin-feedback-item__title,.admin-feedback-view__title{font-weight:800;font-size:15px;line-height:1.35;}
.admin-feedback-item__meta,.admin-feedback-view__meta,.admin-feedback-item__extra{font-size:12px;color:var(--muted);}
.admin-feedback-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);}
.admin-feedback-pill--bug{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.24);color:#fda4af;}
.admin-feedback-pill--suggestion{background:rgba(52,211,153,.12);border-color:rgba(52,211,153,.22);color:#86efac;}
.admin-feedback-pill--status{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.22);color:#c7d2fe;}
.admin-feedback-view{display:flex;flex-direction:column;gap:12px;}
.admin-feedback-view__head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.admin-feedback-prop{font-size:13px;word-break:break-word;}
.admin-feedback-desc{white-space:pre-wrap;line-height:1.6;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);padding:14px;border-radius:14px;}
@media (max-width: 920px){.admin-feedback-layout{grid-template-columns:1fr}.admin-feedback-view__head{flex-direction:column;}}


.notif-svg-icon{width:18px;height:18px;display:block}
.notif-panel__tabs{display:flex;gap:8px;padding:12px 12px 0}
.notif-tab{flex:1;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text);border-radius:12px;padding:10px 12px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.notif-tab.active{background:rgba(124,92,255,.18);border-color:rgba(124,92,255,.42);box-shadow:0 0 0 2px rgba(124,92,255,.12)}
.notif-panel__section{padding-bottom:10px}
.notif-feedback-list{display:flex;flex-direction:column;gap:10px;max-height:280px;overflow:auto;padding:0 12px}
.notif-feedback-item{width:100%;text-align:left;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.notif-feedback-item.active{border-color:rgba(124,92,255,.5);box-shadow:0 0 0 3px rgba(124,92,255,.1)}
.notif-feedback-item__top,.notif-feedback-detail__badges{display:flex;gap:8px;flex-wrap:wrap}
.notif-feedback-item__title,.notif-feedback-detail__title{font-weight:800;line-height:1.35}
.notif-feedback-item__meta,.notif-feedback-detail__meta,.notif-feedback-item__reply{font-size:12px;color:var(--muted)}
.notif-feedback-detail{margin:12px;border-top:1px solid rgba(255,255,255,.08);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.notif-feedback-detail__replytitle{font-weight:800;margin-bottom:6px}
.notif-feedback-detail__replybox.hidden{display:none}

.logo-icon{width:20px;height:20px;vertical-align:middle;}
.logo{display:flex;align-items:center;gap:6px;}
/* ================================================================
   PAGE ENTRANCE ANIMATION
================================================================ */
@keyframes pageEnterUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page--entered {
  animation: pageEnterUp .32s cubic-bezier(.22,.68,0,1.2) both;
}
/* Stagger direct children for richer feel */
.page--entered > * {
  animation: pageEnterUp .35s cubic-bezier(.22,.68,0,1.2) both;
}
.page--entered > *:nth-child(1) { animation-delay: .02s; }
.page--entered > *:nth-child(2) { animation-delay: .06s; }
.page--entered > *:nth-child(3) { animation-delay: .10s; }
.page--entered > *:nth-child(4) { animation-delay: .14s; }
.page--entered > *:nth-child(5) { animation-delay: .18s; }
.page--entered > *:nth-child(n+6) { animation-delay: .20s; }

/* ================================================================
   SKELETON LOADERS
================================================================ */
@keyframes skelShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-page {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.skel-hero,
.skel-block {
  border-radius: 16px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.10) 50%,
    rgba(255,255,255,.05) 75%);
  background-size: 800px 100%;
  animation: skelShimmer 1.6s ease-in-out infinite;
}
.skel-hero {
  height: 120px;
  border-radius: 20px;
}
.skel-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.skel-block {
  height: 80px;
}
.skel-block--wide {
  height: 100px;
}

/* ================================================================
   TOAST NOTIFICATIONS
================================================================ */
#sw-toast-container {
  position: fixed;
  bottom: 28px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}
.sw-toast {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  background: rgba(20,22,28,.95);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(12px);
  max-width: 320px;
  transform: translateX(120%) scale(.9);
  opacity: 0;
  transition: transform .38s cubic-bezier(.32,.72,0,1), opacity .3s ease;
  pointer-events: auto;
}
.sw-toast--visible {
  transform: translateX(0) scale(1);
  opacity: 1;
}
.sw-toast--hiding {
  transform: translateX(120%) scale(.9);
  opacity: 0;
}
.sw-toast--ach { border-color: rgba(251,191,36,.3); }
.sw-toast--level { border-color: rgba(var(--sw-toast-color, 167,139,250),.4); }
.sw-toast__icon {
  font-size: 26px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(251,191,36,.5));
  animation: toastIconBounce .5s .15s cubic-bezier(.32,.72,0,1.5) both;
}
@keyframes toastIconBounce {
  from { transform: scale(.5) rotate(-20deg); }
  to   { transform: scale(1) rotate(0deg); }
}
.sw-toast__body { min-width: 0; }
.sw-toast__title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(251,191,36,.8);
  margin-bottom: 3px;
}
.sw-toast__sub {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}
.sw-toast__xp {
  font-size: 11px;
  font-weight: 800;
  color: #4ade80;
  background: rgba(74,222,128,.12);
  border: 1px solid rgba(74,222,128,.25);
  border-radius: 5px;
  padding: 1px 6px;
  margin-left: 4px;
}

/* ================================================================
   XP BAR
================================================================ */
.sw-xp__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
}
.sw-xp__level { font-weight: 800; }
.sw-xp__pts { font-weight: 700; color: var(--muted); font-size: 12px; }
.sw-xp__track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.sw-xp__fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.22,.68,0,1.2);
  box-shadow: 0 0 8px currentColor;
}
.sw-xp__sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 5px;
  opacity: .7;
}
#sw-xp-bar {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

/* ================================================================
   ACHIEVEMENT GRID
================================================================ */
#sw-ach-grid {
  /* scroll and display handled below */
  margin-top: 8px;
}
.sw-ach-item {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  padding: 12px 10px;
  text-align: center;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  cursor: default;
}
.sw-ach-item--done {
  border-color: rgba(251,191,36,.25);
  background: rgba(251,191,36,.06);
}
.sw-ach-item--done:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,.45);
  box-shadow: 0 6px 20px rgba(251,191,36,.12);
}
.sw-ach-item--locked { opacity: .45; }
.sw-ach-item__icon { font-size: 26px; margin-bottom: 6px; }
.sw-ach-item--done .sw-ach-item__icon {
  filter: drop-shadow(0 0 6px rgba(251,191,36,.5));
  animation: achIconPop .4s cubic-bezier(.32,.72,0,1.5) both;
}
@keyframes achIconPop {
  from { transform: scale(.6); }
  to   { transform: scale(1); }
}
.sw-ach-item__name {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 3px;
  color: var(--text);
}
.sw-ach-item__xp {
  font-size: 10px;
  color: var(--muted);
  opacity: .75;
}
.sw-ach-item--done .sw-ach-item__xp {
  color: #4ade80;
  opacity: 1;
  font-weight: 700;
}

/* ================================================================
   SITE LEVEL CHIP (in profile hero)
================================================================ */
.sw-level-chip {
  background: var(--lv-bg, rgba(125,211,252,.12)) !important;
  border-color: var(--lv-color, #7dd3fc) !important;
  border-width: 1.5px !important;
  gap: 6px !important;
  cursor: default;
  order: -1;
}
.sw-level-chip__num {
  font-size: 15px;
  font-weight: 900;
  color: var(--lv-color, #7dd3fc);
  line-height: 1;
  background: var(--lv-bg, rgba(125,211,252,.15));
  width: 24px; height: 24px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sw-level-chip__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--lv-color, #7dd3fc);
}
.sw-level-chip__xp {
  font-size: 10px;
  color: var(--muted);
  opacity: .7;
}

/* ── ucard inline level chip ── */
.ucard__level-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid currentColor;
  opacity: .9;
  margin-top: 1px;
  width: fit-content;
  transition: box-shadow .3s ease;
}
.ucard__level-chip--max {
  animation: sw-chip-pulse 2.5s ease-in-out infinite;
}
@keyframes sw-chip-pulse {
  0%, 100% { box-shadow: 0 0 6px #fde04788; }
  50%       { box-shadow: 0 0 16px #fde047cc; }
}

/* ── pub profile level chip ── */
.pub-level-chip {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid currentColor;
  margin-top: 2px;
  width: fit-content;
}
.pub-level-chip--max {
  animation: sw-chip-pulse 2.5s ease-in-out infinite;
}

/* ── flat achievement grid — 6 columns, scroll ── */
.sw-ach-flat-grid { display: none; } /* replaced by sw-cat-section */

/* ── Achievement scroll container ── */
#sw-ach-grid {
  display: block;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 6px;
  margin-top: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}
#sw-ach-grid::-webkit-scrollbar { width: 4px; }
#sw-ach-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 99px; }
#sw-ach-grid::-webkit-scrollbar-track { background: transparent; }

/* ── Category section ── */
.sw-cat-section { margin-bottom: 18px; }
.sw-cat-section:last-child { margin-bottom: 4px; }

.sw-cat-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.sw-cat-header__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  flex: 1;
}
.sw-cat-header__cnt {
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 1px 8px;
  color: var(--text);
  flex-shrink: 0;
}

/* ── Category item grid ── */
.sw-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  gap: 6px;
}

/* ── Achievement item (compact) ── */
.sw-ai {
  position: relative;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  padding: 8px 6px 7px;
  text-align: center;
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  cursor: default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.sw-ai--done {
  border-color: rgba(251,191,36,.2);
  background: rgba(251,191,36,.04);
}
.sw-ai--done:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,.38);
  box-shadow: 0 4px 14px rgba(251,191,36,.09);
}
.sw-ai--locked { opacity: .35; filter: grayscale(55%); }
.sw-ai--uncommon.sw-ai--done {
  border-color: rgba(167,139,250,.28);
  background: rgba(167,139,250,.06);
}
.sw-ai--uncommon.sw-ai--done:hover {
  border-color: rgba(167,139,250,.45);
  box-shadow: 0 4px 14px rgba(167,139,250,.13);
}
.sw-ai--rare.sw-ai--done {
  border-color: rgba(253,230,138,.32);
  background: linear-gradient(135deg, rgba(253,230,138,.07), rgba(251,146,60,.05));
}
.sw-ai--rare.sw-ai--done:hover {
  border-color: rgba(253,230,138,.5);
  box-shadow: 0 4px 16px rgba(253,230,138,.15);
}
.sw-ai__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.06) 50%, transparent 70%);
  pointer-events: none;
  animation: aiShine 3s ease-in-out infinite;
}
@keyframes aiShine { 0%,100%{opacity:0} 50%{opacity:1} }
.sw-ai__icon {
  font-size: 20px;
  line-height: 1;
  display: block;
  filter: drop-shadow(0 0 3px rgba(0,0,0,.3));
}
.sw-ai--done .sw-ai__icon { filter: drop-shadow(0 0 4px rgba(251,191,36,.35)); }
.sw-ai--rare.sw-ai--done .sw-ai__icon {
  filter: drop-shadow(0 0 6px rgba(253,230,138,.55));
  animation: rarePop .5s cubic-bezier(.32,.72,0,1.4) both;
}
.sw-ai__name {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.25;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}
.sw-ai__xp {
  font-size: 9px;
  font-weight: 700;
  color: #fbbf24;
  opacity: .8;
  line-height: 1;
}


/* ================================================================
   ACHIEVEMENT CATEGORIES
================================================================ */
.sw-ach-cat {
  margin-bottom: 20px;
}
.sw-ach-cat__label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  opacity: .6;
  padding: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sw-ach-cat__cnt {
  font-size: 10px;
  background: rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 1px 7px;
  opacity: 1;
  color: var(--text);
}
.sw-ach-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

/* ================================================================
   XP LEADERBOARD
================================================================ */
.sw-lb-wrap {
  margin: 0 0 20px;
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  overflow: hidden;
}
.sw-lb__head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.sw-lb__title {
  font-size: 14px;
  font-weight: 800;
}
.sw-lb__sub {
  font-size: 11px;
}
.sw-lb__list {
  display: flex;
  flex-direction: column;
}
.sw-lb__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .15s;
  font-size: 13px;
}
.sw-lb__row:last-child { border-bottom: none; }
.sw-lb__row:hover { background: rgba(255,255,255,.03); }
.sw-lb__row--top { background: rgba(251,191,36,.04); }
.sw-lb__row--top:hover { background: rgba(251,191,36,.07); }
.sw-lb__rank { width: 28px; text-align: center; font-size: 18px; flex-shrink: 0; }
.sw-lb__num { font-size: 13px; font-weight: 700; color: var(--muted); }
.sw-lb__name { flex: 1; font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-lb__level { font-size: 11px; font-weight: 700; flex-shrink: 0; }
.sw-lb__score { font-size: 12px; font-weight: 700; color: var(--muted); flex-shrink: 0; min-width: 70px; text-align: right; }

/* ================================================================
   TOAST (updated container id)
================================================================ */
#sw-toast-box {
  position: fixed;
  bottom: 28px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  pointer-events: none;
}

/* ================================================================
   ACHIEVEMENTS — FILTERS + SCROLL
================================================================ */
.sw-ach-block { display: flex; flex-direction: column; min-height: 0; }
.sw-ach-header { flex-shrink: 0; }

.sw-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  flex-shrink: 0;
}
.sw-filter-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.sw-filter-btn:hover { background: rgba(255,255,255,.09); color: var(--text); }
.sw-filter-btn--active {
  background: rgba(125,211,252,.12);
  border-color: rgba(125,211,252,.3);
  color: #7dd3fc;
}

/* Scrollable container — removed max-height, natural page scroll */
.sw-ach-scroll {
  padding-right: 0;
}

/* Category block */
.sw-ach-cat {
  margin-bottom: 18px;
}
.sw-ach-cat__label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  padding: 0 0 8px 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 0;
}
.sw-ach-cat__cnt {
  font-size: 10px;
  background: rgba(255,255,255,.07);
  border-radius: 20px;
  padding: 1px 7px;
  color: var(--text);
  font-weight: 700;
}
.sw-ach-cat__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 7px;
}

/* Achievement item */
.sw-ach-item {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.03);
  padding: 10px 8px;
  text-align: center;
  overflow: hidden;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  cursor: default;
}
.sw-ach-item--done {
  border-color: rgba(251,191,36,.22);
  background: rgba(251,191,36,.05);
}
.sw-ach-item--done:hover {
  transform: translateY(-2px);
  border-color: rgba(251,191,36,.4);
  box-shadow: 0 6px 18px rgba(251,191,36,.1);
}
.sw-ach-item--uncommon.sw-ach-item--done {
  border-color: rgba(167,139,250,.3);
  background: rgba(167,139,250,.07);
}
.sw-ach-item--uncommon.sw-ach-item--done:hover {
  border-color: rgba(167,139,250,.5);
  box-shadow: 0 6px 18px rgba(167,139,250,.15);
}
.sw-ach-item--rare.sw-ach-item--done {
  border-color: rgba(253,230,138,.35);
  background: linear-gradient(135deg, rgba(253,230,138,.08), rgba(251,146,60,.06));
}
.sw-ach-item--rare.sw-ach-item--done:hover {
  border-color: rgba(253,230,138,.55);
  box-shadow: 0 6px 22px rgba(253,230,138,.2);
}
.sw-ach-item--locked { opacity: .38; filter: grayscale(60%); }
.sw-ach-item__icon {
  font-size: 22px;
  margin-bottom: 5px;
  line-height: 1;
  display: block;
}
.sw-ach-item--done .sw-ach-item__icon {
  filter: drop-shadow(0 0 5px rgba(251,191,36,.4));
}
.sw-ach-item--rare.sw-ach-item--done .sw-ach-item__icon {
  filter: drop-shadow(0 0 7px rgba(253,230,138,.6));
  animation: rarePop .5s cubic-bezier(.32,.72,0,1.4) both;
}
@keyframes rarePop { from{transform:scale(.6)} to{transform:scale(1)} }
.sw-ach-item__name {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 3px;
}
.sw-ach-item__xp {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.2;
}
.sw-ach-item--done .sw-ach-item__xp { color: #4ade80; font-weight: 700; }

/* Rare shine effect */
.sw-ach-item__shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(253,230,138,.12) 60%, transparent 80%);
  animation: achShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes achShine {
  0%,100% { opacity: 0; transform: translateX(-100%); }
  50% { opacity: 1; transform: translateX(100%); }
}


/* ═══════════════════════════════════════════════════════════════
   PROFILE WALL — полная медиа-стена
   ═══════════════════════════════════════════════════════════════ */

/* Layout */
.pf-wall-layout{display:flex;flex-direction:column;gap:24px;padding:4px 0}

/* ── Composer ── */
.pw-composer{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden;position:relative;transition:border-color .2s}
.pw-composer:focus-within{border-color:rgba(139,92,246,.5)}
.pw-composer__header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 0}
.pw-composer__title{font-size:14px;font-weight:700;color:var(--text)}
.pw-char-count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pw-char-count.warn{color:rgba(251,191,36,.9)}
.pw-char-count.over{color:rgba(239,100,100,.9)}

/* Toolbar */
.pw-toolbar{display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:10px 12px 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.pw-toolbar__group{display:flex;align-items:center;gap:2px}
.pw-toolbar__sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 4px;flex-shrink:0}
.pw-btn{background:transparent;border:1px solid transparent;border-radius:8px;color:rgba(255,255,255,.7);cursor:pointer;min-width:30px;height:28px;padding:0 6px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1;white-space:nowrap}
.pw-btn--text{font-size:11px;font-weight:800;letter-spacing:.02em}
.pw-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.15);color:#fff}
.pw-btn.active{background:rgba(139,92,246,.25);border-color:rgba(139,92,246,.4);color:rgba(167,139,250,.95)}

/* Editor area */
.pw-editor{min-height:160px;max-height:500px;overflow-y:auto;outline:none;padding:14px 16px;font-size:14px;line-height:1.7;color:var(--text);word-break:break-word;caret-color:rgba(139,92,246,.9)}
.pw-editor:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;font-style:italic}
/* Rich content styles inside editor */
.pw-editor h2,.pw-post__body h2{font-size:17px;font-weight:800;margin:12px 0 6px;line-height:1.3}
.pw-editor h3,.pw-post__body h3{font-size:15px;font-weight:700;margin:10px 0 4px;line-height:1.3}
.pw-editor blockquote,.pw-post__body blockquote{border-left:3px solid rgba(139,92,246,.6);margin:10px 0;padding:6px 14px;color:rgba(255,255,255,.7);background:rgba(139,92,246,.08);border-radius:0 8px 8px 0;font-style:italic}
.pw-editor code,.pw-post__body code{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:1px 6px;font-family:ui-monospace,monospace;font-size:12.5px;color:rgba(167,139,250,.9)}
.pw-editor ul,.pw-post__body ul{padding-left:20px;margin:6px 0}
.pw-editor li,.pw-post__body li{margin:3px 0}
.pw-editor a,.pw-post__body a{color:rgba(139,92,246,.95);text-decoration:underline;text-underline-offset:3px}
.pw-editor a:hover,.pw-post__body a:hover{color:rgba(167,139,250,1)}
/* Images inside editor / post */
.pw-editor img:not(.wall-sticker),.pw-post__body img:not(.wall-sticker){max-width:min(100%,480px);border-radius:12px;margin:8px 0;display:block;cursor:zoom-in;border:1px solid rgba(255,255,255,.08);object-fit:contain;max-height:420px;background:rgba(0,0,0,.1)}

/* Drop overlay */
.pw-drop-overlay{display:none;position:absolute;inset:0;background:rgba(139,92,246,.18);border:2px dashed rgba(139,92,246,.7);border-radius:20px;z-index:10;align-items:center;justify-content:center;backdrop-filter:blur(2px)}
.pw-drop-overlay.active{display:flex}
.pw-drop-overlay__inner{font-size:20px;font-weight:800;color:rgba(167,139,250,.95);pointer-events:none}

/* Composer footer */
.pw-composer__footer{display:flex;justify-content:space-between;align-items:center;padding:10px 16px 14px;gap:10px}
.pw-hint{font-size:11.5px}

/* ── Emoji picker ── */
.pw-emoji-picker{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:1000;background:var(--card,#1e1e2e);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:10px;width:300px;box-shadow:0 12px 40px rgba(0,0,0,.7);animation:pw-picker-in .15s ease}
@keyframes pw-picker-in{from{opacity:0;transform:scale(.94) translateY(6px)}to{opacity:1;transform:none}}
.pw-emoji-picker__tabs{display:flex;gap:2px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.07);padding-bottom:8px}
.pw-emoji-picker__tab{background:none;border:none;font-size:16px;cursor:pointer;padding:4px 6px;border-radius:8px;opacity:.55;transition:opacity .15s,background .15s}
.pw-emoji-picker__tab.active,.pw-emoji-picker__tab:hover{opacity:1;background:rgba(255,255,255,.08)}
.pw-emoji-picker__grid{display:flex;flex-wrap:wrap;gap:2px;max-height:160px;overflow-y:auto}
.pw-emoji-picker__grid button{background:none;border:none;font-size:20px;cursor:pointer;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .12s;line-height:1}
.pw-emoji-picker__grid button:hover{background:rgba(255,255,255,.1)}

/* ── Upload progress ── */
.pw-upload-progress{display:none;height:3px;background:rgba(139,92,246,.2);border-radius:0 0 20px 20px;overflow:hidden}
.pw-upload-progress.active{display:block}
.pw-upload-progress__bar{height:100%;background:linear-gradient(90deg,rgba(139,92,246,.8),rgba(167,139,250,1));border-radius:4px;transition:width .25s}

/* ── Feed ── */
.pw-feed__header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pw-feed__title{font-size:15px;font-weight:800}
.pw-feed__count{font-size:13px}
.pw-list{display:flex;flex-direction:column;gap:14px}
.pw-loading{color:var(--muted);font-size:13px;padding:12px 0}

/* Post card */
.pw-post{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:18px;overflow:hidden;transition:border-color .2s}
.pw-post:hover{border-color:rgba(255,255,255,.13)}
.pw-post__header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px 0;gap:8px}
.pw-post__date{font-size:12px;color:var(--muted)}
.pw-post__actions{display:flex;gap:4px;flex-shrink:0}
.pw-post__del{background:transparent;border:none;color:rgba(239,100,100,.55);cursor:pointer;font-size:14px;padding:4px 8px;border-radius:10px;transition:all .15s;line-height:1}
.pw-post__del:hover{color:rgba(239,100,100,.95);background:rgba(239,68,68,.12)}
.pw-post__body{padding:10px 16px 14px;font-size:14px;line-height:1.7;word-break:break-word}
.pw-post__body p{margin:0 0 8px}
.pw-post__body p:last-child{margin-bottom:0}

/* Image gallery in post */
.pw-post__gallery{display:grid;gap:4px;padding:0 16px 14px}
.pw-post__gallery.g1{grid-template-columns:1fr}
.pw-post__gallery.g2{grid-template-columns:1fr 1fr}
.pw-post__gallery.g3{grid-template-columns:1fr 1fr 1fr}
.pw-post__gallery.g4{grid-template-columns:1fr 1fr}
.pw-post__gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;cursor:zoom-in;border:1px solid rgba(255,255,255,.07);transition:opacity .15s}
.pw-post__gallery.g1 img{height:auto;max-height:420px;max-width:min(100%,480px);object-fit:contain;background:rgba(0,0,0,.15);margin:0 auto;border-radius:12px}
.pw-post__gallery img:hover{opacity:.88}

/* Pager */
.pw-pager{display:flex;align-items:center;gap:8px;margin-top:16px}

/* Lightbox */
.pw-lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:99999;align-items:center;justify-content:center;cursor:default}
.pw-lightbox.open{display:flex;animation:pwLbIn .18s ease}
@keyframes pwLbIn{from{opacity:0}to{opacity:1}}
.pw-lightbox img{max-width:94vw;max-height:92vh;border-radius:12px;object-fit:contain;box-shadow:0 24px 80px rgba(0,0,0,.8);pointer-events:none}
.pw-lightbox__close{position:absolute;top:18px;right:22px;background:rgba(255,255,255,.1);border:none;color:#fff;font-size:22px;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.pw-lightbox__close:hover{background:rgba(255,255,255,.22)}

/* ══════════════════════════════════════════════════════════════
   PROFILE WALL — полная медиа-стена
══════════════════════════════════════════════════════════════ */
.pf-wall-layout{display:flex;flex-direction:column;gap:24px}

/* ── Composer ─────────────────────────────────────────────── */
.pw-composer{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:18px 18px 14px;position:relative;transition:border-color .2s}
.pw-composer:focus-within{border-color:rgba(139,92,246,.45)}
.pw-composer__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.pw-composer__title{font-size:13px;font-weight:700;color:var(--muted)}
.pw-char-count{font-size:11px;color:var(--muted);transition:color .2s}
.pw-char-count--warn{color:rgba(251,191,36,.9)!important}
.pw-char-count--over{color:rgba(239,100,100,.9)!important}

/* Toolbar */
.pw-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:10px;padding:6px 8px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:12px}
.pw-toolbar__group{display:flex;align-items:center;gap:2px}
.pw-toolbar__sep{width:1px;height:20px;background:rgba(255,255,255,.1);margin:0 4px;flex-shrink:0}
.pw-btn{background:transparent;border:1px solid transparent;border-radius:8px;color:var(--text);cursor:pointer;padding:4px 8px;font-size:13px;line-height:1.4;transition:background .15s,border-color .15s,color .15s;min-width:28px;text-align:center}
.pw-btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.pw-btn--text{font-size:11px;font-weight:800;letter-spacing:.3px}
.pw-btn--active{background:rgba(139,92,246,.25)!important;border-color:rgba(139,92,246,.5)!important;color:rgba(167,139,250,1)!important}

/* Editor */
.pw-editor{min-height:100px;max-height:400px;overflow-y:auto;outline:none;font-size:14px;line-height:1.7;color:var(--text);word-break:break-word;padding:4px 2px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:10px}
.pw-editor:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;font-style:italic}
.pw-editor h2{font-size:18px;font-weight:800;margin:.6em 0 .3em;line-height:1.3}
.pw-editor h3{font-size:15px;font-weight:700;margin:.5em 0 .25em;line-height:1.3}
.pw-editor blockquote{border-left:3px solid rgba(139,92,246,.6);margin:8px 0;padding:6px 12px;background:rgba(139,92,246,.07);border-radius:0 8px 8px 0;font-style:italic;color:rgba(255,255,255,.75)}
.pw-editor code{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:1px 5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(134,239,172,1)}
.pw-editor ul,.pw-editor ol{padding-left:20px;margin:4px 0}
.pw-editor li{margin:2px 0}
.pw-editor a{color:rgba(139,92,246,.9);text-underline-offset:2px}
.pw-editor img:not(.wall-sticker){max-width:min(100%,480px);border-radius:10px;margin:6px 0;display:block;cursor:zoom-in;max-height:420px;object-fit:contain;background:rgba(0,0,0,.1)}

/* Drop overlay */
.pw-drop-overlay{position:absolute;inset:0;background:rgba(139,92,246,.18);border:2px dashed rgba(139,92,246,.6);border-radius:18px;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;border-radius:18px}
.pw-drop-overlay--active{opacity:1;pointer-events:all}
.pw-drop-overlay__inner{font-size:18px;font-weight:700;color:rgba(167,139,250,1)}

/* Footer */
.pw-composer__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:4px}
.pw-hint{font-size:11px}

/* Upload progress */
.pw-upload-progress{height:3px;background:rgba(139,92,246,.25);border-radius:99px;margin-bottom:8px;overflow:hidden;display:none}
.pw-upload-progress__bar{height:100%;background:rgba(139,92,246,.9);border-radius:99px;width:0%;transition:width .3s}

/* ── Feed ─────────────────────────────────────────────────── */
.pw-feed__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pw-feed__title{font-size:15px;font-weight:800}
.pw-feed__count{font-size:12px}
.pw-list{display:flex;flex-direction:column;gap:14px}
.pw-loading{color:var(--muted);font-size:13px;padding:16px 0;text-align:center}
.pw-empty{color:var(--muted);font-size:13px;padding:32px 0;text-align:center;border:1px dashed rgba(255,255,255,.1);border-radius:16px}

/* Post card */
.pw-post{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:16px;padding:16px;position:relative;transition:border-color .2s}
.pw-post:hover{border-color:rgba(255,255,255,.14)}
.pw-post__meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.pw-post__date{font-size:12px;color:var(--muted)}
.pw-post__actions{display:flex;gap:6px;opacity:0;transition:opacity .15s}
.pw-post:hover .pw-post__actions{opacity:1}
.pw-post__del{background:transparent;border:1px solid rgba(239,68,68,.25);color:rgba(239,100,100,.7);border-radius:8px;padding:3px 8px;cursor:pointer;font-size:12px;transition:all .15s}
.pw-post__del:hover{background:rgba(239,68,68,.15);border-color:rgba(239,68,68,.6);color:rgba(239,100,100,1)}
.pw-post__body{font-size:14px;line-height:1.7;word-break:break-word;color:var(--text)}
.pw-post__body h2{font-size:17px;font-weight:800;margin:.5em 0 .25em}
.pw-post__body h3{font-size:14px;font-weight:700;margin:.4em 0 .2em}
.pw-post__body blockquote{border-left:3px solid rgba(139,92,246,.6);margin:8px 0;padding:6px 12px;background:rgba(139,92,246,.07);border-radius:0 8px 8px 0;font-style:italic;color:rgba(255,255,255,.75)}
.pw-post__body code{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:1px 5px;font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(134,239,172,1)}
.pw-post__body a{color:rgba(139,92,246,.9);text-underline-offset:2px}
.pw-post__body img:not(.wall-sticker){max-width:min(100%,480px);border-radius:10px;margin:6px 0;display:block;cursor:zoom-in;max-height:420px;object-fit:contain;transition:opacity .2s;background:rgba(0,0,0,.1)}
.pw-post__body img:hover{opacity:.88}
.pw-post__body ul,.pw-post__body ol{padding-left:20px;margin:4px 0}

/* Pager */
.pw-pager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.06)}
.pw-pager__info{font-size:12px;color:var(--muted)}

/* Emoji picker */

.pw-color-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 160px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.pw-color-swatch {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.2);
  cursor: pointer;
  transition: transform .12s, border-color .12s;
}
.pw-color-swatch:hover { transform: scale(1.25); border-color: #fff; }
.pw-btn--color {
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(135deg,#f59e0b,#ef4444,#8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mention dropdown */
.pw-mention-drop {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 8px;
  width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.pw-mention-drop__label { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.pw-mention-drop__input {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px;
  color: var(--fg);
  font-size: 13px;
  padding: 6px 10px;
  outline: none;
}
.pw-mention-drop__input:focus { border-color: var(--accent,#6366f1); }
.pw-mention-drop__results { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.pw-mention-drop__item {
  display: flex; align-items: center; gap: 8px;
  background: none; border: none;
  padding: 6px 8px; border-radius: 7px;
  cursor: pointer; text-align: left; width: 100%;
  transition: background .12s;
}
.pw-mention-drop__item:hover { background: rgba(255,255,255,.08); }
.pw-mention-drop__nick { font-size: 13px; font-weight: 700; color: var(--accent,#6366f1); }
.pw-mention-drop__dn  { font-size: 12px; color: var(--muted); }
.pw-mention-drop__empty { font-size: 12px; color: var(--muted); padding: 4px 8px; }

/* Mention in post */
.wall-mention {
  color: var(--accent, #6366f1);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border-radius: 4px;
  padding: 0 2px;
  background: rgba(99,102,241,.12);
  transition: background .15s;
}
.wall-mention:hover { background: rgba(99,102,241,.25); }

/* Sticker picker */
.pw-sticker-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
  transform: none;
  z-index: 1000;
  background: var(--card-bg, #1a1a2e);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 10px;
  width: 340px;
  box-shadow: 0 12px 40px rgba(0,0,0,.6);
}
.pw-sticker-picker__tabs {
  display: flex; gap: 4px; margin-bottom: 8px; flex-wrap: wrap;
}
.pw-sticker-picker__tab {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  color: var(--fg, #fff);
  font-size: 12px;
  padding: 5px 12px;
  cursor: pointer;
  font-weight: 600;
  transition: background .12s;
}
.pw-sticker-picker__tab.active,
.pw-sticker-picker__tab:hover { background: rgba(99,102,241,.35); border-color: rgba(99,102,241,.6); color: #a78bfa; }
.pw-sticker-picker__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
}
.pw-sticker-picker__item {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  cursor: pointer;
  padding: 5px;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .1s;
}
.pw-sticker-picker__item:hover { background: rgba(99,102,241,.18); border-color: rgba(99,102,241,.4); transform: scale(1.06); }
.pw-sticker-picker__item img { width: 44px; height: 44px; object-fit: contain; }
.pw-sticker-picker__label { display: none; }
.pw-sticker-picker__empty { font-size: 12px; color: var(--muted, rgba(255,255,255,.5)); padding: 16px; text-align: center; line-height: 1.6; }
.pw-sticker-picker__empty code { background: rgba(0,0,0,.4); border-radius: 4px; padding: 1px 6px; font-size: 11px; color: #a78bfa; }

/* Emoji picker tabs update */
.pw-emoji-picker__tab { font-size: 18px; padding: 4px 6px; }

/* Code block in posts */
.pw-editor pre, .pw-post__body pre, .upr-post pre {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  overflow-x: auto;
  margin: 6px 0;
  white-space: pre-wrap;
}
.pw-editor code, .pw-post__body code, .upr-post code {
  background: rgba(0,0,0,.3);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #a5f3fc;
}
.pw-editor blockquote, .pw-post__body blockquote, .upr-post blockquote {
  border-left: 3px solid var(--accent,#6366f1);
  margin: 6px 0;
  padding: 4px 12px;
  color: rgba(255,255,255,.65);
  font-style: italic;
}

/* Sticker in post */
.wall-sticker { vertical-align: middle; margin: 2px; }

/* pw-btn--mention */
.pw-btn--mention {
  font-weight: 800;
  font-size: 15px;
  color: var(--accent, #6366f1);
}

/* ════════════════════════════════════════════════════════════════
   PROFILE — Referral block  (.upr-referral-block)
   ════════════════════════════════════════════════════════════════ */
.upr-referral-block {
  margin-top: 8px;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(168,85,247,.08));
  border: 1px solid rgba(99,102,241,.3);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upr-referral-block__title {
  font-size: 15px; font-weight: 700; color: var(--fg, #fff);
  display: flex; align-items: center; gap: 8px;
}
.upr-referral-block__desc {
  font-size: 13px; color: var(--muted, rgba(255,255,255,.55)); line-height: 1.5;
}
.upr-referral-block__row {
  display: flex; gap: 8px; align-items: center;
}
.upr-referral-block__input {
  flex: 1; min-width: 0;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: var(--fg, #fff);
  font-size: 12px;
  padding: 9px 12px;
  font-family: monospace;
  outline: none;
}
.upr-referral-block__copy {
  background: rgba(99,102,241,.3);
  border: 1px solid rgba(99,102,241,.5);
  border-radius: 8px;
  color: var(--fg, #fff);
  font-size: 13px;
  padding: 9px 16px;
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
  transition: background .15s;
  display: flex; align-items: center; gap: 6px;
}
.upr-referral-block__copy:hover { background: rgba(99,102,241,.5); }
.upr-referral-block__stat {
  font-size: 13px; color: var(--muted, rgba(255,255,255,.55));
  display: flex; align-items: center; gap: 6px;
}
.upr-referral-block__stat b { color: var(--fg, #fff); font-size: 15px; }
.upr-referral-block__list-title {
  font-size: 12px; color: var(--muted, rgba(255,255,255,.45));
  text-transform: uppercase; letter-spacing: .04em;
}
.upr-referral-block__list {
  display: flex; flex-direction: column; gap: 6px;
}
.upr-ref-row {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 8px;
  padding: 8px 12px;
}
.upr-ref-chip {
  font-size: 13px; font-weight: 600;
  color: var(--fg, #fff);
  cursor: pointer;
  transition: color .15s;
}
.upr-ref-chip:hover { color: #a78bfa; }
.upr-ref-date { font-size: 11px; color: var(--muted, rgba(255,255,255,.4)); }
.upr-referral-block__empty {
  font-size: 13px; color: var(--muted, rgba(255,255,255,.45));
  font-style: italic; padding: 8px 0;
  text-align: center;
}
.pf-referral-wrap { padding: 4px 0; }

/* ════════════════════════════════════════════════════════════════
   HOME — Recent wall posts feed  (.hrw-*)
   ════════════════════════════════════════════════════════════════ */
.hrw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: start;
}
@media (max-width: 780px) { .hrw-grid { grid-template-columns: 1fr; } }
@media (min-width: 481px) and (max-width: 780px) { .hrw-grid { grid-template-columns: repeat(2,1fr); } }

.hrw-loading, .hrw-empty {
  grid-column: 1/-1;
  text-align: center;
  padding: 32px;
  color: var(--muted);
  font-size: 13px;
}

.hrw-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .2s, transform .18s, box-shadow .2s;
  position: relative;
}
.hrw-card::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #a855f7);
  flex-shrink: 0;
}
.hrw-card:nth-child(2)::before { background: linear-gradient(90deg, #f59e0b, #ef4444); }
.hrw-card:nth-child(3)::before { background: linear-gradient(90deg, #10b981, #06b6d4); }
.hrw-card:hover {
  border-color: rgba(255,255,255,.2);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.3);
}

.hrw-card__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 0;
}

.hrw-av {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
  cursor: pointer;
}
.hrw-av--placeholder {
  background: linear-gradient(135deg, #6366f1, #a855f7);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255,255,255,.12);
}

.hrw-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hrw-card__name {
  font-size: 13px; font-weight: 700;
  color: var(--fg, #fff);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
  transition: color .15s;
}
.hrw-card__name:hover { color: #a78bfa; }
.hrw-card__time {
  font-size: 11px; color: var(--muted);
  display: flex; align-items: center; gap: 3px;
}

.hrw-card__body {
  font-size: 13px;
  color: rgba(255,255,255,.7);
  line-height: 1.55;
  padding: 9px 14px 0;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hrw-card__body--empty { color: var(--muted); font-style: italic; }

.hrw-card__gallery {
  padding: 8px 14px 0;
}
.hrw-card__gallery .pw-post__gallery {
  border-radius: 8px;
  overflow: hidden;
  max-height: 160px;
  padding: 0;
}
.hrw-card__gallery .pw-post__gallery img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  max-height: 160px; border-radius: 8px;
}

.hrw-card__footer {
  display: flex;
  gap: 8px;
  padding: 10px 14px 13px;
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 10px;
}

.hrw-like-btn, .hrw-comment-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  padding: 5px 13px;
  cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: all .15s;
  font-weight: 500;
}
.hrw-like-btn:hover { background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); color: #f87171; }
.hrw-like-btn--active { color: #f87171; border-color: rgba(239,68,68,.4); background: rgba(239,68,68,.1); }
.hrw-comment-btn:hover { background: rgba(99,102,241,.15); border-color: rgba(99,102,241,.3); color: #a78bfa; }

.pw-post__body img.wall-sticker, .pw-editor img.wall-sticker { display:inline !important; max-width:32px !important; max-height:32px !important; width:32px !important; height:32px !important; margin:1px !important; vertical-align:middle !important; border-radius:4px !important; object-fit:contain !important; background:none !important; border:none !important; }

/* ════════════════════════════════════════════════════════════════
   CHAT — Toolbar & composer upgrade
   ════════════════════════════════════════════════════════════════ */
.chat__composer {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 6px 10px 6px;
  gap: 5px;
}
.chat__toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: wrap;
}
.chat__tb-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.5);
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s, color .12s;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px;
}
.chat__tb-btn:hover { background: rgba(255,255,255,.1); color: var(--fg, #fff); }
.chat__tb-btn b { font-size: 13px; }
.chat__tb-btn i { font-size: 12px; }
.chat__tb-btn code { font-size: 10px; }
.chat__tb-sep {
  width: 1px; height: 16px;
  background: rgba(255,255,255,.1);
  margin: 0 2px;
}

/* Chat input as textarea */
.chat__inputrow {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  border: none;
  padding: 0;
  background: none;
}
.chat__input {
  flex: 1;
  resize: none;
  min-height: 32px;
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--fg, #fff);
  outline: none;
  font-family: inherit;
  line-height: 1.4;
  transition: border-color .15s;
}
.chat__input:focus { border-color: rgba(139,92,246,.5); }
.chat__input::-webkit-scrollbar { display: none; }

/* Chat picker positioning — opens above toolbar */
.chat-picker {
  bottom: calc(100% + 6px) !important;
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  transform: none !important;
  max-width: min(300px, 90vw);
}

/* Chat stickers in messages */
.chat-sticker {
  width: 32px !important;
  height: 32px !important;
  object-fit: contain !important;
  vertical-align: middle !important;
  display: inline !important;
  margin: 1px !important;
  border-radius: 4px !important;
}

/* ════════════════════════════════════════════════════════════════
   RAFFLE — DP (Donat Points) weekly draw additions
   ════════════════════════════════════════════════════════════════ */

/* Type badge on draw cards */
.rf-draw-card__type-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(99,102,241,.2); border: 1px solid rgba(99,102,241,.35);
  border-radius: 20px; padding: 4px 14px;
  font-size: .72rem; font-weight: 700; color: #a78bfa;
  text-transform: uppercase; letter-spacing: .06em;
  align-self: flex-start;
}

/* DP card — cyan/blue theme */
.rf-draw-card--dp {
  background: linear-gradient(145deg, rgba(6,182,212,.12), rgba(99,102,241,.08), rgba(30,30,50,.95));
  border-color: rgba(6,182,212,.3);
}
.rf-draw-card--dp .rf-draw-card__shine {
  background: linear-gradient(90deg, transparent, rgba(6,182,212,.5), rgba(99,102,241,.4), transparent);
}
.rf-draw-card__type-badge--dp {
  background: rgba(6,182,212,.18); border-color: rgba(6,182,212,.35); color: #67e8f9;
}

/* DP prize amount */
.rf-pool-box__amount--dp {
  background: linear-gradient(135deg, #67e8f9, #06b6d4, #fff);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* DP join button */
.rf-join-btn--dp {
  background: linear-gradient(135deg, #06b6d4, #6366f1);
  box-shadow: 0 8px 32px rgba(6,182,212,.35);
}
.rf-join-btn--dp:hover { box-shadow: 0 12px 40px rgba(6,182,212,.5); }

/* DP already in */
.rf-already--dp {
  background: rgba(6,182,212,.1); border-color: rgba(6,182,212,.3); color: #67e8f9;
}

/* DP countdown digits */
.rf-cd-digit--dp {
  border-color: rgba(6,182,212,.3);
  box-shadow: 0 4px 16px rgba(6,182,212,.12);
}

/* DP last winner inline */
.rf-lw-inline {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
}
.rf-lw-inline--dp {
  background: rgba(6,182,212,.07); border-color: rgba(6,182,212,.2);
}
.rf-lw-mini {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: .85rem; color: rgba(255,255,255,.7);
}
.rf-lw-mini--empty { color: rgba(255,255,255,.35); font-style: italic; }
.rf-lw-mini--dp .rf-lw-mini__badge { color: #67e8f9; font-size: .75rem; font-weight: 700; }
.rf-lw-mini__prize { font-weight: 800; color: #67e8f9; font-size: 1rem; }
.rf-lw-mini__id { color: rgba(255,255,255,.6); font-size: .82rem; }

/* Main layout when 2 draw cards side by side */
.rf-draws-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 760px) { .rf-draws-row { grid-template-columns: 1fr; } }

/* Admin raffle settings */

.admin-raffle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 4px;
}
@media (max-width: 600px) { .admin-raffle-grid { grid-template-columns: 1fr; } }
.admin-raffle-section {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
}
.admin-raffle-section__title {
  font-size: 13px; font-weight: 700;
  color: var(--fg, #fff);
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}


/* ── Raffle dual layout ($ left, DP right) ── */
.rf-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
@media (max-width: 680px) { .rf-dual { grid-template-columns: 1fr; } }

.rf-footer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* Make draw cards more compact */
.rf-draw-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, rgba(168,85,247,.12), rgba(99,102,241,.08), rgba(30,30,50,.95));
  border: 1px solid rgba(168,85,247,.3);
  border-radius: 18px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rf-pool-box--dp-main {
  background: rgba(6,182,212,.1);
  border: 1px solid rgba(6,182,212,.25);
  flex: 1; border-radius: 12px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}
.rf-pool-box--dp-info {
  background: rgba(99,102,241,.08);
  border: 1px solid rgba(99,102,241,.2);
  flex: 1; border-radius: 12px; padding: 12px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
}

/* Compact winner row inside draw card */
.rf-lw-compact {
  background: rgba(251,191,36,.08);
  border: 1px solid rgba(251,191,36,.2);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.rf-lw-compact--dp {
  background: rgba(6,182,212,.08);
  border-color: rgba(6,182,212,.2);
}
.rf-lw-compact__label {
  font-size: .7rem; color: rgba(255,255,255,.4);
  text-transform: uppercase; letter-spacing: .06em;
}
.rf-lw-compact__row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.rf-lw-compact__prize {
  font-size: 1.1rem; font-weight: 900; color: #fbbf24;
}
.rf-lw-compact__id {
  font-size: .82rem; color: rgba(255,255,255,.6);
}
.rf-lw-compact__date {
  font-size: .7rem; color: rgba(255,255,255,.3);
}

/* Force hero avatar size */
.upr-hero-avatar-wrap .avatar {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  max-width: 88px !important;
  font-size: 28px !important;
}
.upr-hero-avatar-wrap .avatar img {
  width: 88px !important;
  height: 88px !important;
  object-fit: cover !important;
}

/* =========================================================
   USER PROFILE PAGE — refresh 2026-03
   ========================================================= */
#page-user_profile{
  background:
    radial-gradient(900px 400px at 50% -10%, rgba(124,58,237,.18), transparent 60%),
    radial-gradient(700px 320px at 20% 0%, rgba(59,130,246,.10), transparent 55%);
}

.uprofile-page{
  padding: 18px 0 40px;
}

/* убираем спорную верхнюю полосу */
.uprofile-banner{
  display:none !important;
}

.uprofile-shell{
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 18px 40px;
}

.uprofile-hero-card{
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
    linear-gradient(135deg, rgba(12,16,34,.98) 0%, rgba(24,18,46,.98) 52%, rgba(10,18,34,.98) 100%);
  box-shadow:
    0 24px 60px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.04),
    0 0 0 1px rgba(255,255,255,.03);
  margin-bottom: 14px;
}

.uprofile-hero-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height: 140px;
  background:
    radial-gradient(500px 180px at 15% 0%, rgba(168,85,247,.22), transparent 70%),
    radial-gradient(440px 180px at 85% 0%, rgba(59,130,246,.18), transparent 70%),
    linear-gradient(90deg, rgba(124,58,237,.22), rgba(59,130,246,.12));
  pointer-events:none;
}

.upr-hero-layout{
  position:relative;
  z-index:1;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 24px;
  padding: 28px 30px 22px;
  align-items: center;
}

.upr-hero-avatar-wrap{
  padding: 8px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 16px 32px rgba(0,0,0,.25);
}

.upr-hero-avatar-wrap .avatar{
  border: 2px solid rgba(255,255,255,.18);
  box-shadow: 0 12px 24px rgba(0,0,0,.28);
}

.avatar--hero{
  width: 96px !important;
  height: 96px !important;
  font-size: 30px !important;
}

.upr-hero-center{ gap: 8px; }
.upr-hero-name{ font-size: 30px; font-weight: 900; letter-spacing: -.02em; }
.upr-hero-name .name-decor__text{ font-size: inherit; }
.upr-hero-login{ color: rgba(255,255,255,.52); font-size: 14px; }

.upr-status,
.upr-static-badge,
.pub-banned{
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  backdrop-filter: blur(8px);
}

.upr-status{ color: rgba(255,255,255,.78); }
.upr-static-badge{ color: #89e1ff; }
.pub-banned{ color:#ffb4b4; }

.upr-xp-bar{
  margin-top: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.035);
  border: 1px solid rgba(255,255,255,.08);
}
.upr-xp-bar__track{ height: 8px; background: rgba(255,255,255,.07); }
.upr-xp-bar__labels{ margin-top: 8px; font-size: 12px; }

.upr-hero-right{
  align-items: stretch;
  min-width: 260px;
}

.upr-hero-stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(72px, 1fr));
  gap: 10px;
}

.upr-hs{
  padding: 14px 10px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.upr-hs__val{ font-size: 22px; }
.upr-hs__lbl{ font-size: 11px; line-height: 1.35; }

.upr-hero-actions{
  justify-content: flex-end;
}

.upr-btn{
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.upr-btn:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
}
.upr-btn--liked{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.32);
}

.uprofile-tabs{
  position: sticky;
  top: 12px;
  z-index: 4;
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,12,24,.72);
  backdrop-filter: blur(14px);
  box-shadow: 0 16px 30px rgba(0,0,0,.22);
}

.uprofile-tab{
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 14px;
  color: rgba(255,255,255,.62);
  border: 1px solid transparent;
  background: transparent;
}

.uprofile-tab:hover{
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.90);
}

.uprofile-tab.active{
  color: #fff;
  border-color: rgba(139,92,246,.36);
  background: linear-gradient(180deg, rgba(139,92,246,.22), rgba(59,130,246,.14));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 24px rgba(76,29,149,.18);
}

.uprofile-panel{
  padding: 22px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(10,14,28,.78);
  box-shadow: 0 18px 44px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.025);
}
.uprofile-panel.hidden{ display:none !important; }

.upr-info-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.upr-info-card{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  min-height: 110px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
}
.upr-info-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.18);
}
.upr-info-card__label{ font-size: 12px; color: rgba(255,255,255,.50); margin-bottom: 6px; }
.upr-info-card__val{ font-size: 16px; font-weight: 800; line-height: 1.45; }

/* стена */
#uprWall{
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.018)),
    rgba(10,14,28,.84);
}

#uprWall .pw-composer,
#uprWall .pw-post,
#uprWall .upr-post,
#uprWall .upr-wall-top,
#uprWall .upr-wall-empty,
#uprWall .upr-wall-error{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

#uprWall .pw-composer{ padding: 18px; }
#uprWall .pw-toolbar{ background: rgba(255,255,255,.035); }
#uprWall .pw-editor{ min-height: 140px; }
#uprWall .pw-pager{ margin-top: 20px; }

.upr-post{
  display:grid;
  grid-template-columns: 56px minmax(0,1fr);
  gap: 16px;
  padding: 18px;
}
.upr-post__av-line{ display:none; }
.upr-post__head{ gap: 12px; margin-bottom: 12px; }
.upr-post__author-block{ gap: 10px; flex-wrap: wrap; }
.upr-post__author-name{ font-size: 15px; font-weight: 800; }
.upr-post__visitor-chip,
.upr-post__owner-chip{
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.05);
}
.upr-post__time{ color: rgba(255,255,255,.45); }
.upr-post__del-btn{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(239,68,68,.22);
  background: rgba(239,68,68,.08);
  color: #fca5a5;
}
.upr-post__body{ line-height: 1.75; }
.upr-post__reactions{ margin-top: 16px; gap: 8px; flex-wrap: wrap; }
.upr-react-btn{
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.045);
}
.upr-react-btn:hover{ background: rgba(255,255,255,.08); }
.upr-react-btn--liked{ border-color: rgba(239,68,68,.26); background: rgba(239,68,68,.10); }

#uprAwards .pf-awards-grid{
  gap: 14px;
}

@media (max-width: 900px){
  .upr-hero-layout{
    grid-template-columns: 1fr;
    align-items: flex-start;
  }
  .upr-hero-right{
    min-width: 0;
    width: 100%;
  }
  .upr-hero-actions{
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  .uprofile-shell{ padding: 0 12px 28px; }
  .uprofile-page{ padding-top: 12px; }
  .uprofile-hero-card{ border-radius: 24px; }
  .upr-hero-layout{ padding: 18px 16px 16px; gap: 16px; }
  .upr-hero-name{ font-size: 24px; }
  .upr-hero-stats{ grid-template-columns: repeat(3, 1fr); width: 100%; }
  .uprofile-tabs{ top: 8px; width: 100%; }
  .uprofile-tab{ flex: 1 1 calc(50% - 8px); justify-content: center; }
  .uprofile-panel{ padding: 16px; border-radius: 20px; }
  .upr-post{ grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════
   PROFILE STYLE TAB — redesign v2 2026-03
   ═══════════════════════════════════════════ */

/* Top preset bar */
.pf-style-topbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
}
.pf-style-topbar__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

/* 3-column settings grid */
.pf-style-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
@media (max-width: 1100px) { .pf-style-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .pf-style-grid { grid-template-columns: 1fr; } }

.pf-style-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Accordion sections */
.pf-accordion {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .2s;
}
.pf-accordion[open] { border-color: rgba(255,255,255,.12); }
.pf-accordion__head {
  cursor: pointer;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .01em;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  color: var(--text, #e2e8f0);
}
.pf-accordion__head::-webkit-details-marker { display: none; }
.pf-accordion__head::after {
  content: "›";
  margin-left: auto;
  font-size: 18px;
  opacity: .4;
  transition: transform .2s;
  line-height: 1;
}
.pf-accordion[open] .pf-accordion__head::after { transform: rotate(90deg); opacity: .7; }
.pf-accordion__body {
  padding: 0 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Color chips */
.pf-chips-label {
  font-size: 11px;
  color: var(--muted, #64748b);
  margin-top: 2px;
}
.pf-color-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-color-chip {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.12);
  cursor: pointer;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  flex-shrink: 0;
  padding: 0;
}
.pf-color-chip:hover { transform: scale(1.3); border-color: rgba(255,255,255,.5); }

/* Presets row */
.pf-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pf-preset {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 9px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  cursor: pointer;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.pf-preset:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }
.pf-preset--reset { color: var(--muted, #64748b); }
.pf-preset__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Bottom preview bar */
.pf-style-preview-bar {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 16px 18px 18px;
}
.pf-style-preview-bar__head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.pf-style-preview-bar__head .pf-hint { flex: 1; min-width: 0; }

/* Wide preview: horizontal card instead of mobile-narrow */
.pf-preview-box--wide .modal__card.profile-preview-card--full {
  max-width: 100% !important;
  width: 100% !important;
}
.pf-preview-box--wide .profile-preview-card__body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0 20px;
  align-items: start;
}
.pf-preview-box--wide .pub-hero { grid-column: 1 / -1; }
.pf-preview-box--wide .pub-tabs { display: none; }
.pf-preview-box--wide .pub-stats-row { grid-column: 1 / -1; }
.pf-preview-box--wide .pub-like-row { grid-column: 1 / -1; }
.pf-preview-box--wide .profile-preview-hint { grid-column: 1 / -1; }

/* ═══════════════════════════════════════════
   BRAND — clickable + hover glow (2026-03)
   ═══════════════════════════════════════════ */

.brand--btn {
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 6px 10px;
  border-radius: 14px;
  position: relative;
  overflow: hidden;
  transition:
    background .22s ease,
    box-shadow  .22s ease,
    transform   .18s cubic-bezier(.34,1.56,.64,1);
}

/* Subtle shimmer overlay on hover */
.brand--btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 20%,
    rgba(255,210,80,.10) 50%,
    transparent 80%
  );
  transform: translateX(-100%);
  transition: transform .5s ease;
  pointer-events: none;
  border-radius: inherit;
}

.brand--btn:hover::before {
  transform: translateX(100%);
}

.brand--btn:hover {
  background: rgba(255,210,80,.06);
  box-shadow:
    0 0 0 1px rgba(255,210,80,.18),
    0 0 18px rgba(255,180,0,.12),
    inset 0 0 12px rgba(255,210,80,.04);
  transform: scale(1.018);
}

.brand--btn:active {
  transform: scale(0.978);
  transition-duration: .08s;
}

/* Logo icon pulse on hover */
.brand--btn:hover .logo-icon {
  filter: drop-shadow(0 0 6px rgba(255,200,0,.75));
  animation: brand-star-pulse .6s ease infinite alternate;
}

@keyframes brand-star-pulse {
  from { filter: drop-shadow(0 0 4px rgba(255,200,0,.55)); }
  to   { filter: drop-shadow(0 0 10px rgba(255,220,0,.95)); }
}

/* Brand title text glow on hover */
.brand--btn:hover .brand__title {
  color: rgba(255,235,140,.96);
  text-shadow: 0 0 14px rgba(255,200,0,.35);
  transition: color .2s, text-shadow .2s;
}

/* Subtitle slides + fades in on hover */
.brand--btn .brand__subtitle {
  transition: color .2s, opacity .2s, transform .2s;
}
.brand--btn:hover .brand__subtitle {
  color: rgba(255,220,100,.55);
  transform: translateX(2px);
}

/* Click ripple */
.brand--btn:focus-visible {
  outline: 2px solid rgba(255,210,80,.45);
  outline-offset: 2px;
}