:root{
  --bg:#0a0c10; --surface:#12161d; --surface-2:#171c25; --line:#252c38;
  --accent:#ffb020; --accent-2:#ff5a36; --text:#e8ebf0; --muted:#8b94a3;
  --bs-body-bg:var(--bg); --bs-body-color:var(--text); --bs-border-color:var(--line);
  --bs-link-color:var(--accent); --bs-link-hover-color:#ffc95a;
}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif}
.site{min-height:100vh;display:flex;flex-direction:column}.site main{flex:1}
a,button,input,select,textarea,[tabindex]{scroll-margin-top:5rem}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex="-1"]:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.skip-link{position:fixed;z-index:1100;top:.75rem;left:.75rem;padding:.65rem 1rem;border-radius:.5rem;background:var(--accent);color:#14100a;font-weight:700;transform:translateY(-180%);transition:transform .15s ease}
.skip-link:focus{transform:translateY(0)}
h1,h2,h3,h4,.brand-text,.stat-n,.mini-v,.eyebrow{letter-spacing:.02em}
.brand-text{font-weight:800;text-transform:uppercase;letter-spacing:.08em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.text-accent{color:var(--accent)!important}
.link-accent{color:var(--accent);text-decoration:none}.link-accent:hover{color:#ffc95a;text-decoration:underline}
.btn-accent{--bs-btn-color:#14100a;--bs-btn-bg:var(--accent);--bs-btn-border-color:var(--accent);--bs-btn-hover-color:#14100a;--bs-btn-hover-bg:#ffc95a;--bs-btn-hover-border-color:#ffc95a;--bs-btn-active-bg:#e69c0e;--bs-btn-active-border-color:#e69c0e;--bs-btn-disabled-bg:var(--accent);--bs-btn-disabled-border-color:var(--accent);font-weight:700}
.site-nav{background:rgba(10,12,16,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);box-shadow:0 4px 18px rgba(0,0,0,.12)}
.site-nav .nav-link{color:var(--muted);font-weight:500}.site-nav .nav-link:hover,.site-nav .nav-link.active{color:var(--accent)}
.hero{background:radial-gradient(900px 400px at 85% -10%,rgba(255,90,54,.18),transparent 60%),radial-gradient(700px 400px at 0% 0%,rgba(255,176,32,.12),transparent 60%);border-bottom:1px solid var(--line)}
.eyebrow{display:inline-block;text-transform:uppercase;font-size:.78rem;font-weight:700;color:var(--accent);border:1px solid rgba(255,176,32,.4);border-radius:999px;padding:.25rem .75rem}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem .5rem}
.stat-n{font-size:1.4rem;font-weight:800;color:var(--accent)}.stat-l{font-size:.75rem;color:var(--muted);text-transform:uppercase}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.4rem}
.t-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1.2rem;color:var(--text);text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.t-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px rgba(255,176,32,.08);color:var(--text)}
.t-card:focus-visible{color:var(--text);border-color:var(--accent)}
.mini-l{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.mini-v{font-weight:700;font-size:1.05rem}
progress.slot-bar{width:100%;height:8px;border:0;border-radius:99px;overflow:hidden;background:var(--surface-2);accent-color:var(--accent);-webkit-appearance:none;appearance:none;display:block}
progress.slot-bar::-webkit-progress-bar{background:var(--surface-2);border-radius:99px}
progress.slot-bar::-webkit-progress-value{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}
progress.slot-bar::-moz-progress-bar{background:linear-gradient(90deg,var(--accent),var(--accent-2));border-radius:99px}
.room-box{background:#0d1a12;border:1px dashed #2f7a4d;border-radius:12px;padding:1rem}
.room-box .mini-v{font-size:1.4rem;font-family:ui-monospace,Menlo,Consolas,monospace;color:#7dffb0}
.side-sticky{top:80px}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-control,.form-select{background:var(--surface-2);border-color:var(--line)}
.form-control::placeholder{color:#a2aab7;opacity:1}
.form-control:focus,.form-select:focus{border-color:var(--accent);box-shadow:0 0 0 .2rem rgba(255,176,32,.15);background:var(--surface-2)}
.form-control[readonly]{background:#0e1218;color:#9ff0c0}
.lookup-msg{min-height:1.2em}
.location-panel{padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.location-panel #location-status{min-height:1.35rem}
.qr-box{background:#fff;border-radius:12px;padding:10px;max-width:220px;margin:0 auto}.qr-box svg{width:100%;height:auto;display:block}
.nav-pills .nav-link{color:var(--muted)}.nav-pills .nav-link.active{background:var(--accent);color:#14100a;font-weight:700}
.table{--bs-table-bg:transparent}
.table thead th{color:#b8c0cc;font-size:.76rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.table tbody tr{transition:background-color .15s ease}.table tbody tr:hover{--bs-table-bg:rgba(255,255,255,.025)}
.site-footer{border-top:1px solid var(--line);background:#07090c}
.social-link{color:var(--muted);font-size:1.3rem}.social-link:hover{color:var(--accent)}
.rules-text{color:#c9ced8;line-height:1.7}
.insider-heading{max-width:780px}
.insider-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.insider-card:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 30px rgba(255,176,32,.08)}
.insider-cover{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;overflow:hidden;background:var(--surface-2);color:var(--muted)}
.insider-cover img{display:block;width:100%;height:100%;object-fit:cover}
.insider-cover-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;color:var(--muted);font-size:.9rem}
.insider-cover-fallback .bi{font-size:2rem;color:var(--accent)}
.insider-article-header{max-width:850px}
.insider-article-cover{position:relative;overflow:hidden;max-height:620px;border-radius:14px;background:var(--surface-2)}
.insider-article-cover img{display:block;width:100%;height:auto;max-height:620px;object-fit:cover}
.article-body{max-width:780px;margin-inline:auto;color:#d8dde6;font-size:1.08rem;line-height:1.85;overflow-wrap:anywhere}
.article-body h2,.article-body h3,.article-body h4{color:var(--text);line-height:1.3;margin:2rem 0 .8rem}
.article-body a{color:var(--accent);text-decoration:underline;text-underline-offset:.15em}
.article-body blockquote{border-left:3px solid var(--accent);padding:.5rem 1rem;color:#c0c7d2;background:rgba(255,255,255,.025)}
.article-body figure{margin:1.5rem 0;text-align:center}
.article-body figure img{display:block;max-width:100%;height:auto;margin-inline:auto;border-radius:12px}
.article-body figcaption{margin-top:.5rem;color:var(--muted);font-size:.9rem}
.article-body .align-left{text-align:left}.article-body .align-center{text-align:center}.article-body .align-right{text-align:right}.article-body .align-justify{text-align:justify}
.article-editor{min-height:360px;max-height:65vh;overflow:auto;padding:1rem;border:1px solid var(--line);border-radius:.5rem;background:var(--surface-2);line-height:1.7}
.article-editor:focus{outline:3px solid rgba(255,176,32,.45);outline-offset:2px}
.article-editor img{max-width:100%;height:auto}
.article-editor figure{margin:1rem 0;text-align:center}
.article-editor figcaption{color:var(--muted);font-size:.9rem}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:.4rem}
.admin-cover-preview{max-width:420px}
.article-source{min-height:300px}
.chat-policy-list{color:#c9ced8;line-height:1.8}
.community-chat,.private-chat{min-height:360px}
.community-message-list,.private-message-list{display:flex;flex-direction:column;gap:.75rem;max-height:65vh;min-height:220px;overflow:auto;overscroll-behavior:contain;padding:.25rem}
.community-message,.private-message{max-width:95%;padding:.75rem 1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);overflow-wrap:anywhere}
.private-message.own-message{align-self:flex-end;border-color:rgba(255,176,32,.45)}
.chat-message-body{white-space:pre-wrap;overflow-wrap:anywhere}

/* Embedded Community report modal */
.yg-report-overlay{position:fixed;inset:0;z-index:2000;background:rgba(3,7,15,.82);backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:16px}
.yg-report-dialog{position:relative;width:min(100%,460px);max-height:90vh;overflow:auto;background:var(--surface-1,#111827);color:var(--text,#f8fafc);border:1px solid var(--line,#303746);border-radius:22px;padding:26px;box-shadow:0 24px 80px rgba(0,0,0,.5)}
.yg-report-close{position:absolute;right:14px;top:10px;border:0;background:transparent;color:inherit;font-size:30px;line-height:1;opacity:.75}
.yg-report-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,180,40,.14);color:var(--accent,#f5b428);font-size:25px;margin-bottom:14px}
.yg-report-dialog h2{font-size:1.35rem;font-weight:750;margin:0 35px 6px 0}
.yg-report-subtitle{color:var(--muted,#aab2c0);font-size:.92rem;margin-bottom:22px}
.yg-report-form label{display:block;font-weight:650;font-size:.9rem;margin:15px 0 7px}
.yg-report-form label span{font-weight:400;color:var(--muted,#aab2c0)}
.yg-report-form select,.yg-report-form textarea{width:100%;background:var(--surface-2,#1c2432);color:inherit;border:1px solid var(--line,#303746);border-radius:10px;padding:11px}
.yg-report-form select:focus,.yg-report-form textarea:focus{border-color:var(--accent,#f5b428);box-shadow:0 0 0 3px rgba(245,180,40,.15)}
.yg-report-count{text-align:right;font-size:.78rem;color:var(--muted,#aab2c0);margin-top:5px}
.yg-report-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.yg-report-actions button{min-height:44px;border-radius:10px}
.yg-report-status{font-size:.88rem;margin:12px 0 0;color:var(--muted,#aab2c0)}
@media(max-width:480px){.yg-report-dialog{padding:22px 18px;border-radius:18px}.yg-report-actions button{flex:1}}
.community-compose{border-top:1px solid var(--line);padding-top:1rem}
.private-compose{border-top:1px solid var(--line);padding-top:1rem}
.chat-image-input{max-width:340px}
.private-chat-image{display:block;width:min(320px,100%);height:auto;max-height:360px;object-fit:contain;border-radius:10px;background:#080a0d}
.friend-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;padding:.75rem 0;border-bottom:1px solid var(--line)}
.friend-row:last-child{border-bottom:0}
.chat-report-card{padding:1rem 0;border-bottom:1px solid var(--line)}
.chat-report-card:last-child{border-bottom:0}
.chat-report-message{margin:.75rem 0;padding:.75rem 1rem;border-left:3px solid var(--accent);background:var(--surface-2);white-space:pre-wrap;overflow-wrap:anywhere}
/* Admin */
.admin-top{background:#07090c;border-bottom:1px solid var(--line)}
.admin-side{background:var(--surface);border-right:1px solid var(--line);min-height:calc(100vh - 56px)}
.admin-side .nav-link{color:var(--muted);border-radius:8px;padding:.55rem .8rem}
.admin-side .nav-link:hover{color:var(--text);background:var(--surface-2)}
.admin-side .nav-link.active{color:#14100a;background:var(--accent);font-weight:700}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.5rem}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1rem}
.kpi .n{font-size:1.8rem;font-weight:800}
@media (max-width:767px){.admin-side{min-height:auto;border-right:0;border-bottom:1px solid var(--line)}.panel{padding:1.1rem}.site-footer .container{align-items:flex-start!important}}
.col-actions{min-width:260px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}

/* YG ESPORTS dashboard UI enhancements */
.dashboard-welcome {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 176, 32, .28);
  background: radial-gradient(ellipse at top right, rgba(255, 176, 32, .12), transparent 55%), var(--surface);
}
.dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
}
.dashboard-stat {
  padding: 1rem;
  border: 1px solid var(--line);
  transition: border-color .18s ease, transform .18s ease;
}
.dashboard-stat:hover {
  border-color: rgba(255, 176, 32, .48);
  transform: translateY(-2px);
}
.stat-icon {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  margin-bottom: .8rem;
  border-radius: .75rem;
  color: var(--accent);
  background: rgba(255, 176, 32, .10);
  font-size: 1.15rem;
}
.stat-number {
  margin-top: .2rem;
  font-size: clamp(1.6rem, 4vw, 2rem);
  line-height: 1.1;
  font-weight: 800;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.registration-card {
  border: 1px solid var(--line);
  transition: border-color .18s ease;
}
.registration-card:hover {
  border-color: rgba(255, 176, 32, .35);
}
@media (prefers-reduced-motion: reduce) {
  .dashboard-stat, .registration-card { transition: none; }
  .dashboard-stat:hover { transform: none; }
}

/* YG ESPORTS admin dashboard enhancements */
.admin-dashboard-welcome {
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 176, 32, .28);
  background: radial-gradient(ellipse at top right, rgba(255, 176, 32, .12), transparent 55%), var(--surface);
}
.admin-dashboard-eyebrow {
  display: inline-flex;
  align-items: center;
  color: var(--accent);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .1em;
}
.admin-dashboard-kpi {
  height: 100%;
  transition: border-color .18s ease, transform .18s ease;
}
.admin-dashboard-kpi:hover {
  border-color: rgba(255, 176, 32, .45);
  transform: translateY(-2px);
}
.admin-dashboard-kpi .mini-l {
  line-height: 1.4;
}
.admin-dashboard-kpi .n {
  margin-top: .35rem;
  font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
  .admin-dashboard-kpi { transition: none; }
  .admin-dashboard-kpi:hover { transform: none; }
}


/* Admin menu mobile alignment fix */
@media (max-width: 767px) {
  .admin-side > button[data-bs-target="#admin-navigation"] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto !important;
    min-width: 145px;
    text-align: left;
    margin-right: auto;
    margin-left: 0;
  }
}

/* Insider editor: custom insert-image modal */
.insider-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(3, 7, 15, .84);
  backdrop-filter: blur(7px);
}

.insider-image-dialog {
  position: relative;
  width: min(100%, 520px);
  max-height: 92vh;
  overflow-y: auto;
  padding: 26px;
  color: var(--text, #f8fafc);
  background: var(--surface-1, #111827);
  border: 1px solid var(--line, #303746);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
}

.insider-image-close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  color: var(--text, #f8fafc);
  background: var(--surface-2, #202938);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.insider-image-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  color: var(--accent, #ffb020);
  background: rgba(255, 176, 32, .12);
  border-radius: 14px;
  font-size: 24px;
}

.insider-image-dialog h2 {
  margin: 0 42px 6px 0;
  font-size: 1.4rem;
  font-weight: 700;
}

.insider-image-subtitle,
.insider-image-hint {
  color: var(--muted, #9ca3af);
  font-size: .9rem;
}

.insider-image-subtitle {
  margin-bottom: 22px;
}

.insider-image-form label {
  display: block;
  margin: 15px 0 7px;
  font-weight: 600;
  font-size: .92rem;
}

.insider-image-form label span {
  color: var(--muted, #9ca3af);
  font-weight: 400;
}

.insider-image-hint {
  margin: 7px 0 12px;
}

.insider-image-live-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  max-height: 280px;
  overflow: hidden;
  margin: 12px 0;
  border: 1px dashed var(--line, #303746);
  border-radius: 12px;
  background: var(--surface-2, #202938);
}

.insider-image-live-preview img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
}

.insider-image-preview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px;
  color: var(--muted, #9ca3af);
  text-align: center;
}

.insider-image-preview-empty[hidden],
.insider-image-live-preview img[hidden] {
  display: none !important;
}

.insider-image-preview-empty > i {
  font-size: 30px;
}

.insider-image-status {
  min-height: 1.4em;
  margin: 8px 0;
  color: var(--muted, #9ca3af);
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.insider-image-status.is-error {
  color: #ff8585;
}

.insider-image-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.insider-image-actions button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .insider-image-dialog {
    padding: 22px 17px;
    border-radius: 16px;
  }

  .insider-image-live-preview {
    min-height: 130px;
  }
}

/* Insider image modal — polished UI refresh */
.insider-image-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(9, 14, 28, .76);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

.insider-image-dialog {
  position: relative;
  width: min(100%, 540px);
  max-height: min(90dvh, 850px);
  overflow-y: auto;
  padding: 30px;
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 22px;
  background: #fff;
  color: #172033;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .32);
  animation: insider-modal-enter .2s ease-out;
}

@keyframes insider-modal-enter {
  from { opacity: 0; transform: translateY(12px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.insider-image-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f8fafc;
  color: #475569;
  font-size: 25px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.insider-image-close:hover {
  background: #e9eef5;
  color: #111827;
}

.insider-image-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-bottom: 17px;
  border-radius: 15px;
  background: #eef2ff;
  color: #4338ca;
  font-size: 27px;
}

.insider-image-dialog h2 {
  margin: 0 48px 8px 0;
  color: #111827;
  font-size: 25px;
  font-weight: 750;
  letter-spacing: -.6px;
}

.insider-image-dialog > p {
  margin: 0 0 24px;
  color: #64748b;
  font-size: 14px;
  line-height: 1.6;
}

.insider-image-form {
  display: grid;
  gap: 17px;
}

.insider-image-form label {
  display: grid;
  gap: 8px;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
}

.insider-image-form input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  border: 1px solid #dbe1ea;
  border-radius: 11px;
  outline: none;
  background: #fbfcfe;
  color: #172033;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  transition: border-color .15s, box-shadow .15s, background .15s;
}

.insider-image-form input::placeholder {
  color: #9aa5b5;
}

.insider-image-form input:focus {
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, .13);
}

.insider-image-live-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 170px;
  max-height: 290px;
  overflow: hidden;
  padding: 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 15px;
  background:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%),
    #f8fafc;
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}

.insider-image-live-preview img {
  display: block;
  max-width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 9px;
}

.insider-image-preview-empty {
  padding: 20px;
  color: #8491a4;
  font-size: 13px;
  text-align: center;
}

.insider-image-status {
  min-height: 18px;
  margin: -7px 0 0;
  color: #64748b;
  font-size: 12px;
  line-height: 1.5;
}

.insider-image-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 5px;
}

.insider-image-actions button {
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid #dbe1ea;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .15s, background .15s, box-shadow .15s;
}

.insider-image-actions button[type="submit"] {
  border-color: #4338ca;
  background: #4338ca;
  color: #fff;
  box-shadow: 0 5px 14px rgba(67, 56, 202, .2);
}

.insider-image-actions button[type="submit"]:hover:not(:disabled) {
  background: #3730a3;
  transform: translateY(-1px);
}

.insider-image-actions button:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}

.insider-image-actions button[data-cancel]:hover {
  background: #f1f5f9;
}

@media (max-width: 560px) {
  .insider-image-overlay {
    align-items: flex-end;
    padding: 0;
  }

  .insider-image-dialog {
    width: 100%;
    max-height: 92dvh;
    padding: 25px 19px max(22px, env(safe-area-inset-bottom));
    border-radius: 23px 23px 0 0;
    border-bottom: 0;
  }

  .insider-image-dialog h2 {
    font-size: 23px;
  }

  .insider-image-live-preview {
    min-height: 145px;
    max-height: 220px;
  }

  .insider-image-live-preview img {
    max-height: 195px;
  }

  .insider-image-actions button {
    flex: 1;
    padding: 0 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insider-image-dialog {
    animation: none;
  }
}

/* Article social sharing icons */
.article-share-icons{display:flex;flex-wrap:wrap;gap:.65rem;align-items:center}
.article-share-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border,rgba(255,255,255,.2));border-radius:50%;background:transparent;color:var(--text,#fff);font-size:1.25rem;text-decoration:none;cursor:pointer;transition:transform .15s ease,background-color .15s ease}
.article-share-icon:hover,.article-share-icon:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.1);color:var(--accent,#fff);outline-offset:3px}
.article-share-status{color:var(--muted,#aaa)}


/* YG ESPORTS custom confirmation modal */
.yg-confirm-backdrop {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(3, 8, 18, .78);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.yg-confirm-backdrop[hidden] { display: none !important; }
.yg-confirm-box {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 420px);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  margin: auto;
  padding: 26px;
  color: var(--text, #fff);
  background: var(--card, #18212b);
  border: 1px solid var(--border, #394653);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .48);
  animation: yg-confirm-enter .18s ease-out;
}
.yg-confirm-message {
  margin: 0 0 26px;
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.yg-confirm-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.yg-confirm-actions button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #64748b;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, filter .15s ease;
}
.yg-confirm-actions button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
.yg-confirm-actions button:focus-visible {
  outline: 2px solid var(--accent, #d4a843);
  outline-offset: 3px;
}
.yg-confirm-cancel { color: inherit; background: transparent; }
.yg-confirm-ok {
  color: #111;
  background: var(--accent, #d4a843);
  border-color: transparent !important;
}
@keyframes yg-confirm-enter {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .yg-confirm-box { padding: 22px 18px; border-radius: 16px; }
  .yg-confirm-actions button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .yg-confirm-box, .yg-confirm-actions button {
    animation: none;
    transition: none;
  }
}


/* YG ESPORTS Profile Redesign */
.profile-page { max-width: 1120px; }
.profile-hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(125deg, var(--surface) 0%, #1d1a13 100%);
  border-color: #514027;
}
.profile-hero::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  right: -70px;
  top: -90px;
  border: 1px solid rgb(255 176 32 / 18%);
  border-radius: 50%;
  pointer-events: none;
}
.profile-avatar {
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 176 32 / 40%);
  border-radius: 20px;
  background: rgb(255 176 32 / 9%);
  color: var(--accent);
  font-size: 2rem;
}
.profile-eyebrow {
  color: var(--accent);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  margin-bottom: .4rem;
}
.profile-stat {
  position: relative;
  overflow: hidden;
  background: linear-gradient(145deg, var(--surface), var(--surface-2));
}
.profile-stat-icon,
.profile-section-icon {
  color: var(--accent);
  font-size: 1.25rem;
}
.profile-stat-icon { margin-bottom: .65rem; }
.profile-stat-number {
  color: var(--text);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  margin-top: .2rem;
  font-variant-numeric: tabular-nums;
}
.profile-details dt,
.profile-details dd { overflow-wrap: anywhere; }
.profile-details dd { margin-bottom: .9rem; }
.profile-subcard {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(0 0 0 / 12%);
}
.profile-subcard .badge { white-space: normal; }
.profile-page .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgb(255 176 32 / 15%);
}
@media (max-width: 575px) {
  .profile-page { padding-left: 12px; padding-right: 12px; }
  .profile-hero { padding: 1rem; }
  .profile-avatar {
    width: 58px;
    height: 58px;
    flex-basis: 58px;
    border-radius: 16px;
    font-size: 1.6rem;
  }
  .profile-subcard { padding: .85rem; }
}

/* YG ESPORTS - Sign Up page visual refresh */
body:has(.yg-signup-card) .yg-signup-card {
  position: relative;
  overflow: hidden;
  padding: clamp(1.25rem, 4vw, 2rem);
  border: 1px solid rgba(255,176,32,.32);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at top right, rgba(255,176,32,.10), transparent 48%),
    linear-gradient(145deg, #151a23, #0f1218);
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}
.yg-signup-card h1 {
  font-weight: 850;
  letter-spacing: -.035em;
}
.yg-signup-card .form-label {
  color: #e8ebf0;
  font-size: .9rem;
  font-weight: 650;
  margin-bottom: .5rem;
}
.yg-signup-card .form-control {
  min-height: 48px;
  padding: .75rem .9rem;
  border-radius: 11px;
  background: #0b0e13;
  border-color: #303746;
  color: #f4f6fa;
}
.yg-signup-card .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .22rem rgba(255,176,32,.14);
}
.yg-signup-card .location-panel {
  padding: 1rem;
  border-radius: 14px;
  border-color: rgba(255,176,32,.24);
  background: rgba(5,8,13,.48);
}
.yg-signup-card .btn-accent {
  min-height: 49px;
  border-radius: 11px;
  box-shadow: 0 7px 22px rgba(255,176,32,.13);
  letter-spacing: .01em;
}
.yg-signup-card .form-text,
.yg-signup-card #location-status {
  color: #aeb7c5;
}
@media (max-width: 575px) {
  body:has(.yg-signup-card) .yg-signup-card {
    padding: 1.15rem;
    border-radius: 16px;
  }
}

/* ---- Navigation refresh ---- */
.site-nav .nav-link-hot{color:var(--accent);font-weight:700}
.site-nav .dropdown-menu{background:var(--surface-2);border:1px solid rgba(255,255,255,.1)}
.site-nav .dropdown-item{color:var(--text)}
.site-nav .dropdown-item:hover{background:rgba(255,255,255,.07);color:var(--accent)}
.admin-side .admin-nav-label{list-style:none;margin:1rem .8rem .25rem;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);opacity:.75}
.mobile-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1030;display:flex;background:rgba(10,12,16,.96);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.1);padding-bottom:env(safe-area-inset-bottom)}
.mobile-tabbar .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:.5rem .25rem;color:var(--muted);text-decoration:none;font-size:.68rem}
.mobile-tabbar .tab i{font-size:1.25rem;line-height:1}
.mobile-tabbar .tab.active{color:var(--accent);font-weight:700}
@media (max-width:991.98px){body.site{padding-bottom:4.5rem}}
.chat-new-pill{display:block;margin:.5rem auto 0;box-shadow:0 4px 14px rgba(0,0,0,.4)}

/* ===== Chat UI v2 (private chat) ===== */
.private-chat{padding:0;overflow:hidden;border-radius:18px}
.private-message-list{display:flex;flex-direction:column;gap:.4rem;padding:1rem .85rem;height:60vh;height:min(64dvh,600px);max-height:none;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.04),transparent 55%)}
.private-message{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;max-width:80%;margin:0;padding:.5rem .75rem .35rem;border:0;border-radius:18px 18px 18px 6px;background:var(--surface-2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.private-message.own-message{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--accent);color:#14100a}
.private-message > div.d-flex{display:contents!important}
.private-message strong{display:none}
.private-message .chat-message-body{order:1;margin:0!important;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}
.private-message > a{order:2;margin-top:.25rem}
.private-message time{order:3;align-self:flex-end;margin-top:.15rem;font-size:.68rem;opacity:.7;color:inherit!important}
.private-message [data-private-report]{order:4;align-self:flex-start;padding:0;font-size:.66rem;opacity:.5;text-decoration:none}
.private-message:hover [data-private-report]{opacity:1}
.private-chat-image{display:block;max-width:100%;height:auto;border-radius:12px}
.chat-day{align-self:center;margin:.5rem 0 .25rem;padding:.15rem .75rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:.72rem}
.private-chat > a.small{display:block;padding:.5rem 1rem}
.private-compose{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0!important;padding:.65rem .75rem;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.private-compose > div.d-flex{display:contents!important}
.private-compose textarea{order:2;flex:1 1 0;min-width:0;height:44px;min-height:44px;max-height:140px;margin:0!important;padding:.6rem 1rem;border-radius:22px;resize:none}
.private-compose label[for="private-image"]{order:1;flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text);font-size:0;cursor:pointer;margin:0}
.private-compose label[for="private-image"]::before{content:"+";font-size:1.7rem;line-height:1}
.private-compose label[for="private-image"].has-file{background:var(--accent);color:#14100a}
.private-compose .chat-image-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.private-compose button[type=submit]{order:3;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;font-size:0;background-repeat:no-repeat;background-position:center;background-size:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314100a'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E")}
.private-compose [data-chat-status]{order:4;flex:1 0 100%;min-height:1em;font-size:.72rem}

/* ===== Chat UI v2 (private chat) ===== */
.private-chat{padding:0;overflow:hidden;border-radius:18px}
.private-message-list{display:flex;flex-direction:column;gap:.4rem;padding:1rem .85rem;height:60vh;height:min(64dvh,600px);max-height:none;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.04),transparent 55%)}
.private-message{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;max-width:80%;margin:0;padding:.5rem .75rem .35rem;border:0;border-radius:18px 18px 18px 6px;background:var(--surface-2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.private-message.own-message{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--accent);color:#14100a}
.private-message > div.d-flex{display:contents!important}
.private-message strong{display:none}
.private-message .chat-message-body{order:1;margin:0!important;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.35}
.private-message > a{order:2;margin-top:.25rem}
.private-message time{order:3;align-self:flex-end;margin-top:.15rem;font-size:.68rem;opacity:.7;color:inherit!important}
.private-message [data-private-report]{order:4;align-self:flex-start;padding:0;font-size:.66rem;opacity:.5;text-decoration:none}
.private-message:hover [data-private-report]{opacity:1}
.private-chat-image{display:block;max-width:100%;height:auto;border-radius:12px}
.chat-day{align-self:center;margin:.5rem 0 .25rem;padding:.15rem .75rem;border-radius:999px;background:rgba(255,255,255,.08);color:var(--muted);font-size:.72rem}
.private-chat > a.small{display:block;padding:.5rem 1rem}
.private-compose{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0!important;padding:.65rem .75rem;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.private-compose > div.d-flex{display:contents!important}
.private-compose textarea{order:2;flex:1 1 0;min-width:0;height:44px;min-height:44px;max-height:140px;margin:0!important;padding:.6rem 1rem;border-radius:22px;resize:none}
.private-compose label[for="private-image"]{order:1;flex:0 0 44px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:var(--text);font-size:0;cursor:pointer;margin:0}
.private-compose label[for="private-image"]::before{content:"+";font-size:1.7rem;line-height:1}
.private-compose label[for="private-image"].has-file{background:var(--accent);color:#14100a}
.private-compose .chat-image-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.private-compose button[type=submit]{order:3;flex:0 0 44px;width:44px;height:44px;padding:0;border-radius:50%;font-size:0;background-repeat:no-repeat;background-position:center;background-size:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314100a'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E")}
.private-compose [data-chat-status]{order:4;flex:1 0 100%;min-height:1em;font-size:.72rem}

/* ===== Chat UI v2 (community) ===== */
.community-chat{padding:0;overflow:hidden;border-radius:18px}
.community-message-list{display:flex;flex-direction:column;gap:.4rem;padding:1rem .85rem;height:60vh;height:min(62dvh,600px);max-height:none;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.04),transparent 55%)}
.community-message{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;max-width:82%;margin:0;padding:.45rem .75rem .35rem;border:0;border-radius:18px 18px 18px 6px;background:var(--surface-2);color:var(--text);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.community-message.own-message{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--accent);color:#14100a}
.community-message > div.d-flex{display:contents!important}
.community-message strong{order:0;margin-bottom:.1rem;font-size:.78rem;color:var(--accent)}
.community-message.own-message strong{display:none}
.community-message .chat-message-body{order:1;margin:0!important;line-height:1.35}
.community-message time{order:3;align-self:flex-end;margin-top:.15rem;font-size:.68rem;opacity:.7;color:inherit!important}
.community-message [data-community-report]{order:4;align-self:flex-start;padding:0;font-size:.66rem;opacity:.5;text-decoration:none}
.community-message:hover [data-community-report]{opacity:1}
.community-chat > a.small{display:block;padding:.5rem 1rem}
.community-compose{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.5rem;margin:0!important;padding:.65rem .75rem;border-top:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.community-compose textarea{flex:1 1 0;min-width:0;height:44px;min-height:44px;max-height:140px;margin:0;padding:.6rem 1rem;border-radius:22px;resize:none}
.community-compose button[type=submit]{flex:0 0 44px;width:44px;height:44px;margin:0!important;padding:0;border-radius:50%;font-size:0;background-repeat:no-repeat;background-position:center;background-size:22px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2314100a'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E")}
.community-compose [data-chat-status]{flex:1 0 100%;margin:0!important;min-height:1em;font-size:.72rem}
@media (max-width:991.98px){
  .community-channels-nav{flex-direction:row!important;flex-wrap:nowrap!important;overflow-x:auto;gap:.4rem;padding-bottom:.25rem}
  .community-channels-nav .nav-link{white-space:nowrap;border-radius:999px;background:rgba(255,255,255,.06);padding:.35rem .9rem;font-size:.85rem}
  .community-channels-nav .nav-link.active{background:var(--accent);color:#14100a}
}

/* ===== Chat UI v3: WhatsApp-style composer + app-like scrolling ===== */
.private-chat,.community-chat{position:relative}
.chat-fit{display:flex;flex-direction:column}
.chat-fit .private-message-list,.chat-fit .community-message-list{flex:1 1 0;height:auto;min-height:0}
.chat-fit > a.small,.chat-fit > form{flex:0 0 auto}
.private-message-list,.community-message-list{scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.private-compose,.community-compose{position:relative;align-items:flex-end}
.wa-box{order:1;flex:1 1 0;min-width:0;display:flex;align-items:flex-end;padding:.2rem .35rem;border-radius:26px;background:var(--surface-2);border:1px solid rgba(255,255,255,.08)}
.wa-box:focus-within{border-color:rgba(255,255,255,.22)}
.wa-box textarea{order:0;flex:1 1 0;min-width:0;height:40px;min-height:40px;max-height:140px;margin:0!important;padding:.55rem .35rem;border:0;border-radius:0;background:transparent;box-shadow:none;color:var(--text);resize:none;outline:0}
.wa-box textarea:focus{background:transparent;box-shadow:none;color:var(--text)}
.wa-emoji,.wa-box label[for="private-image"]{flex:0 0 40px;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:0}
.wa-emoji{order:-1;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/%3E%3C/svg%3E")}
.wa-box label[for="private-image"]{order:1;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6h-1.5z'/%3E%3C/svg%3E")}
.wa-emoji::before,.wa-box label[for="private-image"]::before{content:"";display:block;width:24px;height:24px;font-size:0;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.wa-box label[for="private-image"].has-file{background:transparent;color:var(--accent)}
.emoji-panel{position:absolute;left:.75rem;right:.75rem;bottom:calc(100% - .35rem);max-width:340px;display:grid;grid-template-columns:repeat(8,1fr);gap:.15rem;padding:.5rem;border-radius:16px;background:var(--surface-2);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:5}
.emoji-panel[hidden]{display:none}
.emoji-item{border:0;background:transparent;font-size:1.4rem;line-height:1;padding:.3rem 0;border-radius:8px}
.emoji-item:active{background:rgba(255,255,255,.12)}

/* ===== Community hub: WhatsApp-style channel list ===== */
.channel-list{overflow:hidden;border-radius:18px}
.channel-list-title{padding:.9rem 1rem .4rem;font-weight:700;font-size:1.05rem}
.channel-row{display:flex;align-items:center;gap:.85rem;padding:.8rem 1rem;color:var(--text);text-decoration:none;border-top:1px solid rgba(255,255,255,.05)}
.channel-row:hover{background:rgba(255,255,255,.04);color:var(--text)}
.channel-row.active{background:rgba(255,255,255,.08)}
.ch-avatar{flex:0 0 52px;width:52px;height:52px;border-radius:50%;object-fit:cover;background:var(--surface-2)}
.ch-avatar-letter{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.3rem}
.ch-avatar-sm{flex-basis:42px;width:42px;height:42px;font-size:1.05rem}
.channel-main{flex:1 1 0;min-width:0}
.channel-top,.channel-bottom{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.channel-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-time{flex:0 0 auto;font-size:.74rem;color:var(--muted)}
.channel-time.unread{color:var(--accent)}
.channel-preview{color:var(--muted);font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-badge{flex:0 0 auto;min-width:22px;height:22px;padding:0 .4rem;border-radius:11px;background:var(--accent);color:#14100a;font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.chat-head{display:flex;align-items:center;gap:.7rem;padding:.6rem .85rem;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18)}
.chat-fit > .chat-head{flex:0 0 auto}
.chat-back{color:var(--text);font-size:1.3rem;line-height:1;text-decoration:none;padding:.25rem}
.chat-head-text{min-width:0;flex:1 1 0}
.chat-head-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head-sub{font-size:.75rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-rules{position:relative;flex:0 0 auto}
.chat-rules summary{list-style:none;cursor:pointer;color:var(--muted);font-size:1.25rem;line-height:1}
.chat-rules summary::-webkit-details-marker{display:none}
.chat-rules .rules-text{position:absolute;right:0;top:calc(100% + .4rem);width:min(320px,78vw);padding:.75rem;border-radius:12px;background:var(--surface-2);border:1px solid rgba(255,255,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.5);z-index:6}
.chat-readonly{padding:.8rem 1rem;text-align:center;color:var(--muted);font-size:.85rem;border-top:1px solid rgba(255,255,255,.08)}
@media (max-width:991.98px){.community-hub.has-channel .hub-top{display:none!important}}

/* friends page */
.friends-page{max-width:720px}
.f-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,176,32,.15);color:#ffb020;display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.fmenu{position:relative}
.fmenu summary{list-style:none;cursor:pointer;line-height:1.5}
.fmenu summary::-webkit-details-marker{display:none}
.fmenu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:160px;display:grid;gap:6px;padding:8px;background:#161a24;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5)}
.friends-page details>summary{cursor:pointer}

/* global search */
.site-nav .navbar-collapse{order:4}
.nav-search{order:3;width:100%;margin:.5rem 0 0;position:relative}
.nav-search input{background:var(--surface-2);border-color:var(--line);color:inherit}
.ss-box{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1050;max-height:70vh;overflow:auto;background:#161a24;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.5);padding:6px}
.ss-head{padding:8px 10px 4px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#ffb020}
.ss-item{display:flex;justify-content:space-between;gap:.5rem;padding:8px 10px;border-radius:8px;color:inherit;text-decoration:none}
.ss-item:hover,.ss-item:focus{background:rgba(255,255,255,.07)}
.ss-item small{color:#8b93a4}
.ss-none{padding:10px;color:#8b93a4}
@media (min-width:992px){.nav-search{order:2;width:280px;margin:0 1rem}.site-nav .navbar-collapse{order:3}}

/* chat fit: no 65vh cap on phones */
.chat-fit .private-message-list,.chat-fit .community-message-list{max-height:none}

/* article editor */
.editor-actions-sticky{position:sticky;bottom:0;z-index:20;padding:.6rem 0;background:rgba(10,12,16,.96);border-top:1px solid var(--line)}
@media (max-width:767px){
  .editor-toolbar{flex-wrap:nowrap!important;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.25rem}
  .editor-toolbar .btn{flex:0 0 auto;white-space:nowrap}
}