: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__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,.45);
  backdrop-filter: blur(2px);
  z-index: 40;
}

.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 310px;
  max-width: 86vw;
  background: rgba(20,22,27,.98);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 40px rgba(0,0,0,.45);
  z-index: 50;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 14px;
}

.sidebar__brand{ padding: 10px 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); flex-shrink: 0; }
.sidebar__logo{ font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.sidebar__tag{ margin-top: 4px; font-size: 12px; }

.sidebar__nav{
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 6px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.sidebar__nav::-webkit-scrollbar{ width: 8px; }
.sidebar__nav::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.18); border-radius: 999px; }
.sidebar__nav::-webkit-scrollbar-track{ background: transparent; }
.navlink{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  color: inherit;
  cursor: pointer;
}
.navlink:hover{ background: rgba(255,255,255,.07); }
.navlink.active{ background: rgba(125,211,252,.12); border-color: rgba(125,211,252,.25); }
.navlink--group{ font-weight: 700; }
.navgroup{ padding-top: 4px; }
.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);
}

.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 ---------- */
.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:grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(0, 1fr);
  gap:14px;
  padding: 0 18px 18px;
  align-items:stretch;
}
.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;
}
.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; }

/* 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-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.raffle-header {
  text-align: center;
  margin-bottom: 24px;
}

.raffle-title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--accent, #e44);
  margin: 0 0 4px;
  letter-spacing: .02em;
}

.raffle-subtitle {
  margin: 0;
  font-size: .95rem;
}

/* Grid: main card + winners card */
.raffle-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

@media (max-width: 680px) {
  .raffle-grid { grid-template-columns: 1fr; }
}

/* Cards */
.raffle-card {
  background: var(--card-bg, #1c1c2e);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Warning (no telegram) */
.raffle-warn {
  background: rgba(255,180,0,.12);
  border: 1px solid rgba(255,180,0,.35);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: .9rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

/* Prize boxes */
.raffle-prizes {
  display: flex;
  gap: 12px;
}

.raffle-prize-box {
  flex: 1;
  background: var(--card-bg2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 12px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.raffle-prize-box--per {
  background: rgba(100,220,120,.07);
  border-color: rgba(100,220,120,.2);
}

.raffle-prize-amount {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}

.raffle-prize-label {
  font-size: .75rem;
  color: var(--text-muted, #888);
  text-align: center;
}

/* Participants */
.raffle-participants {
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.raffle-part-icon { font-size: 1.1rem; }

/* Join button */
.raffle-join-btn {
  width: 100%;
  font-size: 1.05rem;
  padding: 12px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

/* Already in */
.raffle-already {
  text-align: center;
  background: rgba(80,220,100,.12);
  border: 1px solid rgba(80,220,100,.3);
  border-radius: 12px;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #5ddf7a;
}

/* Offline */
.raffle-offline {
  text-align: center;
  padding: 12px 0;
  font-size: .95rem;
}

/* Countdown */
.raffle-countdown-label {
  text-align: center;
  font-size: .8rem;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.raffle-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.raffle-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--card-bg2, rgba(255,255,255,.05));
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 64px;
}

.raffle-cd-unit span {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  color: #fff;
}

.raffle-cd-unit small {
  font-size: .65rem;
  color: var(--text-muted, #888);
  text-transform: lowercase;
  margin-top: 2px;
}

.raffle-cd-sep {
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--accent, #e44);
  line-height: 1;
  margin-bottom: 12px;
}

/* Finished */
.raffle-finished {
  text-align: center;
  padding: 12px;
  font-size: .95rem;
  background: rgba(150,150,200,.08);
  border-radius: 10px;
}

/* Winners card */
.raffle-card--winners {
  gap: 14px;
}

.raffle-winners-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
}

.raffle-winner-content {
  background: var(--card-bg2, rgba(255,255,255,.04));
  border: 1px solid var(--border, rgba(255,255,255,.07));
  border-radius: 10px;
  padding: 16px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.raffle-winner-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.raffle-winner-prize {
  font-size: 1.25rem;
  font-weight: 800;
  color: #f0c040;
}

.raffle-winner-id {
  font-size: .85rem;
  color: var(--text-muted, #aaa);
}

.raffle-winner-no {
  font-size: .9rem;
  color: var(--text-muted, #888);
  text-align: center;
  margin: auto 0;
}

.raffle-archive-btn {
  align-self: flex-start;
  font-size: .85rem;
}

.raffle-info-note {
  font-size: .78rem;
  line-height: 1.4;
  margin-top: 4px;
}

/* Archive panel */
.raffle-archive-panel {
  margin-top: 28px;
  background: var(--card-bg, #1c1c2e);
  border: 1px solid var(--border, rgba(255,255,255,.08));
  border-radius: 16px;
  padding: 20px;
}

.raffle-archive-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.raffle-archive-header h3 {
  margin: 0;
  font-size: 1.05rem;
}

.raffle-archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 400px;
  overflow-y: auto;
}

.raffle-archive-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1fr;
  gap: 8px;
  background: var(--card-bg2, rgba(255,255,255,.04));
  border-radius: 8px;
  padding: 10px 14px;
  font-size: .85rem;
  align-items: center;
}

.raffle-archive-row .ra-date { color: var(--text-muted, #888); }
.raffle-archive-row .ra-prize { font-weight: 700; color: #f0c040; }
.raffle-archive-row .ra-parts { color: var(--text-muted, #aaa); }
.raffle-archive-row .ra-winner { font-weight: 600; }
.raffle-archive-row .ra-no-winner { color: var(--text-muted, #888); font-style: italic; }

@media (max-width: 520px) {
  .raffle-archive-row {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}


/* ============================================================
   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 навлинк розыгрышей — выделяем цветом */
.navlink--raffle {
  background: rgba(220,60,180,.07) !important;
  border-color: rgba(220,60,180,.2) !important;
}
.navlink--raffle:hover {
  background: rgba(220,60,180,.14) !important;
}
.navlink--raffle.active {
  background: rgba(220,60,180,.18) !important;
  border-color: rgba(220,60,180,.4) !important;
  color: #f080d0 !important;
}

/* 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 — prevent overlap on small screens */
.sidebar__nav {
  padding-bottom: max(32px, env(safe-area-inset-bottom, 16px));
}


/* ============================================================
   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;
}

/* 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); }


/* ============================================================
   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); }

/* ============================================================
   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;
}

/* 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); }