/* Quick News drawer — isolated from the main portal styles. */
html.qn-lock,
html.qn-lock body { overflow: hidden !important; }

.qn-news-trigger { position: relative !important; }
.qn-unread-badge {
  position: absolute;
  top: -5px;
  right: -7px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  background: #f2c400;
  color: #0b0b0b;
  border: 2px solid #111;
  font: 800 10px/1 Arial, sans-serif;
  letter-spacing: 0;
  z-index: 8;
  pointer-events: none;
  box-shadow: 0 2px 12px rgba(0,0,0,.45);
}
.qn-unread-badge[hidden] { display: none !important; }

.qn-wrap {
  position: fixed;
  inset: 0;
  z-index: 50000;
  display: flex;
  justify-content: flex-end;
  visibility: hidden;
  pointer-events: none;
  font-family: Arial, Helvetica, sans-serif;
}
.qn-wrap.is-open { visibility: visible; pointer-events: auto; }
.qn-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.68);
  opacity: 0;
  transition: opacity .18s ease;
  backdrop-filter: blur(2px);
}
.qn-wrap.is-open .qn-backdrop { opacity: 1; }
.qn-drawer {
  position: relative;
  width: min(680px, 52vw);
  min-width: 520px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  color: #f1f1ee;
  background:
    radial-gradient(circle at 88% 0%, rgba(242,196,0,.06), transparent 28%),
    linear-gradient(180deg, #15191b 0%, #101315 100%);
  border-left: 1px solid rgba(242,196,0,.28);
  box-shadow: -28px 0 80px rgba(0,0,0,.62);
  transform: translateX(102%);
  transition: transform .22s ease;
  overflow: hidden;
}
.qn-wrap.is-open .qn-drawer { transform: translateX(0); }
.qn-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.qn-kicker {
  color: #f2c400;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .17em;
  margin-bottom: 3px;
}
.qn-title {
  color: #f4f0e6;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 34px;
  line-height: .95;
  letter-spacing: .045em;
}
.qn-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font: 300 35px/1 Arial, sans-serif;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
}
.qn-close:hover { color: #fff; background: rgba(255,255,255,.06); }
.qn-subhead {
  flex: 0 0 auto;
  min-height: 42px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 24px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.qn-new-count {
  color: #101010;
  background: #f2c400;
  border-radius: 999px;
  padding: 4px 8px;
  font-weight: 900;
  font-size: 9px;
  letter-spacing: .08em;
}
.qn-new-count[hidden] { display:none !important; }
.qn-feed {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px 34px;
  scrollbar-width: thin;
  scrollbar-color: rgba(242,196,0,.45) transparent;
}
.qn-loading,.qn-error,.qn-empty {
  max-width: 520px;
  margin: 90px auto;
  padding: 24px;
  text-align: center;
  color: rgba(255,255,255,.6);
  border: 1px dashed rgba(242,196,0,.25);
  border-radius: 14px;
}
.qn-error { color:#ffd5d5; }
.qn-new-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 4px 12px;
  color: #f2c400;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}
.qn-new-divider::before,.qn-new-divider::after { content:''; height:1px; background:rgba(242,196,0,.32); flex:1; }
.qn-new-divider span { white-space: nowrap; }
.qn-post {
  position: relative;
  margin: 0 0 13px;
  padding: 15px;
  background: linear-gradient(180deg, rgba(31,36,39,.98), rgba(23,27,29,.98));
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 13px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
}
.qn-post.is-unread { border-color: rgba(242,196,0,.33); }
.qn-post-head { display:flex; align-items:center; gap:10px; min-width:0; }
.qn-avatar {
  width: 38px; height:38px; border-radius:50%; overflow:hidden; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  background:#0c0d0d; border:1px solid rgba(242,196,0,.38);
}
.qn-avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.qn-avatar--brand { color:#f2c400; font-size:10px; font-weight:900; }
.qn-avatar--fallback { font-size:20px; }
.qn-post-author { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 10px; }
.qn-post-author strong { color:#f6f3ec; font-size:13px; }
.qn-post-author span { color:rgba(255,255,255,.42); font-size:10px; }
.qn-dot { width:8px; height:8px; flex:0 0 auto; margin-left:auto; border-radius:50%; background:#f2c400; box-shadow:0 0 12px rgba(242,196,0,.55); }
.qn-post-text { margin:11px 0 0 48px; color:#e7e8e8; font-size:14px; line-height:1.48; overflow-wrap:anywhere; }
.qn-post-text a,.qn-comment-body a { color:#f2c400; text-decoration:underline; text-decoration-color:rgba(242,196,0,.45); text-underline-offset:2px; }
.qn-post-text a:hover,.qn-comment-body a:hover { color:#ffe45c; }
.qn-post-media {
  margin:12px 0 0 48px;
  display:grid;
  gap:4px;
  overflow:hidden;
  border-radius:10px;
  background:#080909;
}
.qn-post-media--1 { grid-template-columns:1fr; }
.qn-post-media--2 { grid-template-columns:1fr 1fr; }
.qn-post-media--3,.qn-post-media--4 { grid-template-columns:1fr 1fr; }
.qn-media-btn { position:relative; appearance:none; border:0; padding:0; background:#090909; cursor:zoom-in; min-height:130px; overflow:hidden; }
.qn-post-media--1 .qn-media-btn { min-height:220px; max-height:430px; }
.qn-media-btn img { display:block; width:100%; height:100%; min-height:130px; max-height:300px; object-fit:cover; }
.qn-post-media--1 .qn-media-btn img { min-height:220px; max-height:430px; object-fit:contain; }
.qn-more-media { position:absolute; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.58); color:white; font-size:28px; font-weight:800; }
.qn-post-foot { margin:12px 0 0 48px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.qn-reactions { display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
.qn-react,.qn-comments-toggle,.qn-comment-react-chip,.qn-comment-react-add,.qn-comment-del {
  appearance:none; border:1px solid rgba(255,255,255,.10); background:rgba(255,255,255,.045); color:rgba(255,255,255,.73); cursor:pointer;
}
.qn-react { min-height:28px; border-radius:999px; padding:3px 8px; display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.qn-react b { font-size:10px; font-weight:700; color:rgba(255,255,255,.55); }
.qn-react:hover,.qn-react.is-on { border-color:rgba(242,196,0,.4); background:rgba(242,196,0,.1); }
.qn-comments-toggle { border:0; background:transparent; font-size:11px; white-space:nowrap; padding:5px; }
.qn-comments-toggle:hover,.qn-comments-toggle.is-open { color:#f2c400; }
.qn-comments-zone { margin:0 0 0 48px; }
.qn-comments-panel { margin-top:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08); }
.qn-comments-loading,.qn-comments-empty { padding:12px 4px; color:rgba(255,255,255,.43); font-size:11px; }
.qn-comment { position:relative; padding:10px 0; display:grid; grid-template-columns:32px minmax(0,1fr); gap:9px; border-bottom:1px solid rgba(255,255,255,.055); }
.qn-comment:last-child { border-bottom:0; }
.qn-comment .qn-avatar { width:30px; height:30px; }
.qn-comment-main { min-width:0; }
.qn-comment-meta { display:flex; align-items:center; gap:7px; flex-wrap:wrap; color:rgba(255,255,255,.38); font-size:9px; }
.qn-comment-meta strong { color:#f0f0ed; font-size:11px; }
.qn-role--admin,.qn-role--moderator,.qn-role--tester { color:#0b0b0b; background:#f2c400; padding:2px 5px; border-radius:4px; font-weight:900; font-size:7px; letter-spacing:.05em; }
.qn-comment-body { margin-top:4px; color:#d9dbdb; font-size:12px; line-height:1.45; overflow-wrap:anywhere; }
.qn-comment-sticker img { width:auto; height:auto; max-width:150px; max-height:120px; margin-top:7px; object-fit:contain; }
.qn-comment-media { margin-top:7px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; max-width:360px; }
.qn-comment-media button { appearance:none; border:0; padding:0; background:#080909; border-radius:7px; overflow:hidden; cursor:zoom-in; }
.qn-comment-media img { display:block; width:100%; height:110px; object-fit:cover; }
.qn-comment-reacts { display:flex; align-items:center; gap:4px; margin-top:7px; flex-wrap:wrap; position:relative; }
.qn-comment-react-chip,.qn-comment-react-add { min-height:23px; border-radius:999px; padding:2px 7px; font-size:10px; }
.qn-comment-react-chip.is-on { border-color:rgba(242,196,0,.4); background:rgba(242,196,0,.1); }
.qn-comment-react-menu { position:absolute; left:0; top:28px; z-index:5; display:flex; gap:3px; padding:6px; border-radius:9px; background:#080a0b; border:1px solid rgba(242,196,0,.28); box-shadow:0 10px 28px rgba(0,0,0,.5); }
.qn-comment-del { margin-left:auto; border:0; background:transparent; font-size:9px; color:rgba(255,255,255,.35); padding:2px 4px; }
.qn-comment-del:hover { color:#ff9b9b; }
.qn-composer { margin-top:10px; padding:10px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.07); border-radius:10px; }
.qn-input { width:100%; min-height:58px; max-height:180px; resize:vertical; box-sizing:border-box; border:0; outline:0; background:transparent; color:#f1f1ed; font:12px/1.45 Arial,sans-serif; }
.qn-input::placeholder { color:rgba(255,255,255,.3); }
.qn-compose-tools { display:flex; align-items:center; gap:5px; margin-top:7px; position:relative; }
.qn-tool,.qn-send {
  appearance:none; min-width:30px; min-height:30px; border-radius:7px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.04); color:#ddd; cursor:pointer;
}
.qn-tool:hover { border-color:rgba(242,196,0,.3); }
.qn-tool[disabled] { opacity:.35; cursor:not-allowed; }
.qn-send { margin-left:auto; min-width:82px; background:#f2c400; border-color:#f2c400; color:#111; font-weight:900; font-size:10px; letter-spacing:.06em; }
.qn-send:hover { filter:brightness(1.06); }
.qn-compose-status { min-height:15px; padding-top:5px; color:#ffb3b3; font-size:9px; }
.qn-login-note { padding:11px 12px; margin-top:10px; border:1px dashed rgba(242,196,0,.28); border-radius:9px; color:rgba(255,255,255,.52); font-size:11px; }
.qn-login-note a { color:#f2c400; }
.qn-picker { margin-top:7px; border-radius:10px; border:1px solid rgba(242,196,0,.2); background:#0d0f10; padding:8px; max-height:230px; overflow:auto; }
.qn-emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:4px; }
.qn-emoji { appearance:none; border:0; border-radius:6px; background:transparent; font-size:20px; padding:5px; cursor:pointer; }
.qn-emoji:hover { background:rgba(255,255,255,.07); }
.qn-sticker-packs { display:flex; gap:5px; overflow-x:auto; padding-bottom:7px; }
.qn-sticker-pack { appearance:none; border:1px solid rgba(255,255,255,.09); border-radius:999px; background:rgba(255,255,255,.04); color:#aaa; padding:5px 9px; font-size:9px; white-space:nowrap; cursor:pointer; }
.qn-sticker-pack.is-on { color:#111; background:#f2c400; border-color:#f2c400; font-weight:800; }
.qn-sticker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }
.qn-pick-sticker { appearance:none; border:0; border-radius:8px; min-height:72px; background:rgba(255,255,255,.035); padding:5px; cursor:pointer; }
.qn-pick-sticker img { width:100%; height:68px; object-fit:contain; }
.qn-pick-sticker:hover { background:rgba(242,196,0,.08); }
.qn-no-stickers { color:rgba(255,255,255,.45); padding:10px; font-size:10px; }
.qn-selected-sticker { display:flex; align-items:center; gap:8px; margin-top:7px; padding:6px 8px; border:1px solid rgba(242,196,0,.2); border-radius:8px; width:max-content; max-width:100%; }
.qn-selected-sticker img { width:54px; height:54px; object-fit:contain; }
.qn-clear-sticker { border:0; background:transparent; color:#aaa; cursor:pointer; }
.qn-file-preview { display:flex; gap:5px; margin-top:7px; flex-wrap:wrap; }
.qn-photo { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; background:#080909; border:1px solid rgba(255,255,255,.08); }
.qn-photo img { width:100%; height:100%; object-fit:cover; }
.qn-remove-file { position:absolute; right:3px; top:3px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(0,0,0,.8); color:#fff; cursor:pointer; }
.qn-toast { position:fixed; right:28px; bottom:24px; z-index:51000; max-width:360px; padding:10px 14px; border-radius:9px; background:#191d1f; color:#eee; border:1px solid rgba(242,196,0,.35); box-shadow:0 12px 35px rgba(0,0,0,.48); font:11px/1.35 Arial,sans-serif; }
.qn-lightbox { position:fixed; inset:0; z-index:52000; display:grid; place-items:center; background:rgba(0,0,0,.9); padding:28px; cursor:zoom-out; }
.qn-lightbox img { max-width:min(1100px,96vw); max-height:92vh; object-fit:contain; box-shadow:0 24px 80px rgba(0,0,0,.6); }

@media (max-width: 900px) {
  .qn-drawer { width:min(720px, 88vw); min-width:0; }
}
@media (max-width: 620px) {
  .qn-drawer { width:100vw; min-width:0; border-left:0; }
  .qn-head { padding:17px 15px 10px; }
  .qn-title { font-size:29px; }
  .qn-subhead { padding:9px 15px; }
  .qn-feed { padding:10px 8px 24px; }
  .qn-post { padding:12px 10px; border-radius:11px; }
  .qn-post-text,.qn-post-media,.qn-post-foot,.qn-comments-zone { margin-left:0; }
  .qn-post-text { margin-top:10px; }
  .qn-post-media { margin-top:10px; }
  .qn-post-foot { margin-top:10px; }
  .qn-comments-zone { margin-top:0; }
  .qn-media-btn,.qn-media-btn img { min-height:115px; }
  .qn-post-media--1 .qn-media-btn,.qn-post-media--1 .qn-media-btn img { min-height:180px; }
  .qn-emoji-grid { grid-template-columns:repeat(7,1fr); }
  .qn-sticker-grid { grid-template-columns:repeat(4,1fr); }
  .qn-toast { left:12px; right:12px; bottom:14px; max-width:none; }
}
/* Small structural fallbacks for composer markup. */
.qn-tool.is-locked { opacity:.38; }
.qn-file-preview > div { position:relative; width:72px; height:72px; border-radius:8px; overflow:hidden; background:#080909; border:1px solid rgba(255,255,255,.08); }
.qn-file-preview > div > img { width:100%; height:100%; object-fit:cover; display:block; }
.qn-file-preview > div > button { position:absolute; right:3px; top:3px; width:20px; height:20px; border:0; border-radius:50%; background:rgba(0,0,0,.82); color:#fff; cursor:pointer; }
.qn-file-preview > div > span { position:absolute; left:4px; bottom:4px; padding:2px 4px; border-radius:4px; background:rgba(0,0,0,.75); color:#fff; font-size:8px; font-weight:900; }
.qn-picker .qn-sticker-packs { display:flex; flex-direction:column; gap:10px; overflow:visible; padding:0; }
.qn-picker section.qn-sticker-pack { display:block; border:0; border-radius:0; background:transparent; color:#ddd; padding:0; white-space:normal; cursor:default; }
.qn-picker section.qn-sticker-pack > div:first-child { margin:0 0 6px; color:rgba(255,255,255,.5); font-size:9px; font-weight:800; letter-spacing:.05em; }
.qn-picker section.qn-sticker-pack .qn-sticker-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:5px; }

/* ===== Quick News Stage 2 refinements ===== */
.qn-wrap {
  font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.qn-title {
  font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 34px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .02em;
}
.qn-kicker {
  font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-weight: 900;
}

/* Telegram-like media album: media first, edge-to-edge, without empty black gutters. */
.qn-post-media {
  margin: 12px -15px 0 -15px;
  width: auto;
  display: grid;
  gap: 2px;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
.qn-media-btn {
  min-height: 0;
  height: 100%;
  border: 0 !important;
  border-radius: 0;
  background: #090909;
}
.qn-media-btn img,
.qn-post-media--1 .qn-media-btn img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}
.qn-post-media--1 {
  display: block;
}
.qn-post-media--1 .qn-media-btn {
  width: 100%;
  min-height: 0;
  max-height: 520px;
}
.qn-post-media--1 .qn-media-btn img {
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
}
.qn-post-media--2 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 260px;
}
.qn-post-media--3 {
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 149px 149px;
  height: 300px;
}
.qn-post-media--3 .qn-media-btn:first-child {
  grid-row: 1 / 3;
}
.qn-post-media--4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 159px 159px;
  height: 320px;
}
.qn-post-text {
  margin-top: 12px;
}

/* No pill outlines around reactions / emoji buttons. */
.qn-react,
.qn-comment-react-chip,
.qn-comment-react-add {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.qn-react {
  padding: 3px 4px;
  border-radius: 0;
}
.qn-react:hover,
.qn-react.is-on,
.qn-comment-react-chip.is-on {
  border: 0 !important;
  background: transparent !important;
  color: #f2c400;
}
.qn-react:hover,
.qn-comment-react-chip:hover,
.qn-comment-react-add:hover {
  transform: translateY(-1px);
}
.qn-emoji-grid button,
.qn-comment-react-menu button {
  appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0;
  cursor: pointer;
}
.qn-emoji-grid button {
  min-height: 38px;
  padding: 4px;
  font-size: 22px;
}
.qn-emoji-grid button:hover,
.qn-comment-react-menu button:hover {
  background: rgba(255,255,255,.045) !important;
}

/* Contenteditable comment input + custom emoji. */
.qn-input[contenteditable="true"] {
  min-height: 58px;
  max-height: 180px;
  overflow-y: auto;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
}
.qn-input[contenteditable="true"]:empty::before {
  content: attr(data-placeholder);
  color: rgba(255,255,255,.30);
  pointer-events: none;
}
.qn-inline-emoji {
  display: inline-block;
  width: 1.35em;
  height: 1.35em;
  object-fit: contain;
  vertical-align: -.28em;
  margin: 0 .03em;
}
.qn-inline-emoji--editor {
  cursor: default;
  user-select: none;
}
.qn-picker-label {
  margin: 2px 2px 7px;
  color: rgba(255,255,255,.38);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .09em;
}
.qn-picker-label--custom {
  margin-top: 12px;
  color: #f2c400;
}
.qn-custom-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
}
.qn-custom-emoji-pick {
  appearance: none;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  min-width: 0;
  aspect-ratio: 1;
  padding: 3px;
  cursor: pointer;
}
.qn-custom-emoji-pick img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.qn-custom-emoji-pick:hover {
  background: rgba(255,255,255,.045) !important;
}

/* Gallery viewer with arrows. */
.qn-lightbox {
  display: grid;
  grid-template-columns: minmax(52px, 1fr) minmax(0, auto) minmax(52px, 1fr);
  align-items: center;
  cursor: default;
  outline: 0;
}
.qn-lb-stage {
  position: relative;
  grid-column: 2;
  display: grid;
  place-items: center;
  min-width: 0;
}
.qn-lightbox .qn-lb-stage img {
  max-width: min(1100px, 82vw);
  max-height: 90vh;
  object-fit: contain;
}
.qn-lb-close,
.qn-lb-arrow {
  appearance: none;
  border: 0;
  background: rgba(0,0,0,.45);
  color: rgba(255,255,255,.9);
  cursor: pointer;
  z-index: 2;
}
.qn-lb-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font: 300 34px/1 Arial,sans-serif;
}
.qn-lb-arrow {
  width: 54px;
  height: 74px;
  border-radius: 14px;
  font: 300 56px/1 Arial,sans-serif;
  justify-self: center;
}
.qn-lb-prev { grid-column: 1; }
.qn-lb-next { grid-column: 3; }
.qn-lb-arrow:hover,
.qn-lb-close:hover { background: rgba(255,255,255,.10); }
.qn-lb-count {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(0,0,0,.65);
  color: rgba(255,255,255,.85);
  font-size: 10px;
  pointer-events: none;
}

@media (max-width: 620px) {
  .qn-title { font-size: 29px; }
  .qn-post-media {
    margin-left: -10px;
    margin-right: -10px;
  }
  .qn-post-media--2 { grid-template-rows: 190px; }
  .qn-post-media--3 { grid-template-rows: 109px 109px; height: 220px; }
  .qn-post-media--4 { grid-template-rows: 119px 119px; height: 240px; }
  .qn-custom-emoji-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .qn-lightbox { padding: 12px; grid-template-columns: 44px minmax(0,auto) 44px; }
  .qn-lightbox .qn-lb-stage img { max-width: 78vw; max-height: 86vh; }
  .qn-lb-arrow { width: 40px; height: 58px; font-size: 42px; }
  .qn-lb-close { top: 10px; right: 10px; }
}

/* Three landscape images: same visual rhythm as the Telegram album reference — one wide image, two below. */
.qn-post-media--3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 210px 150px;
  height: 362px;
}
.qn-post-media--3 .qn-media-btn:first-child {
  grid-column: 1 / 3;
  grid-row: 1;
}
@media (max-width: 620px) {
  .qn-post-media--3 { grid-template-rows: 145px 105px; height: 252px; }
}


/* ===== Quick News Stage 3 ===== */
/* Exactly the same display face/rhythm as the main HUB heading. */
.qn-title {
  font-family: var(--noir-display, 'Tektur'), 'Tektur', sans-serif !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase;
}
.qn-kicker {
  font-family: var(--noir-display, 'Tektur'), 'Tektur', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
}
@supports ((-webkit-mask-image: linear-gradient(#000,#000)) or (mask-image: linear-gradient(#000,#000))) {
  html.lmx-noirbar .qn-title {
    -webkit-mask-image: var(--noir-wear, linear-gradient(#000,#000));
    mask-image: var(--noir-wear, linear-gradient(#000,#000));
  }
}

/* Comment reactions stay quiet until the reader actually asks for them. */
.qn-comment-reacts {
  margin-top: 4px !important;
  min-height: 18px;
  gap: 5px !important;
  align-items: center;
}
.qn-comment-react-chip {
  padding: 0 2px !important;
  font-size: 10px !important;
  line-height: 18px !important;
  color: rgba(255,255,255,.58) !important;
  opacity: .9;
}
.qn-comment-react-chip.is-on { color:#f2c400 !important; }
.qn-comment-react-add {
  width: 20px !important;
  height: 18px !important;
  padding: 0 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  color: rgba(255,255,255,.28) !important;
  opacity: .45;
}
.qn-comment:hover .qn-comment-react-add,
.qn-comment-react-add:focus { opacity: .9; color:rgba(255,255,255,.72) !important; }
.qn-comment-react-menu[hidden] { display:none !important; }
.qn-comment-react-menu {
  top: 21px !important;
  left: -4px !important;
  gap: 1px !important;
  padding: 4px 6px !important;
  border-radius: 9px !important;
}
.qn-comment-react-menu button { width:31px; height:31px; padding:2px !important; font-size:18px; }

/* Videos are streamed, not preloaded, and use the same Telegram-like album grid. */
.qn-media-video { position:relative; overflow:hidden; }
.qn-media-video video {
  display:block;
  width:100%;
  height:100%;
  min-height:0;
  object-fit:cover;
  background:#050505;
}
.qn-post-media--1 .qn-media-video { max-height:none; }
.qn-post-media--1 .qn-media-video video { width:100%; height:auto; max-height:540px; object-fit:contain; }

.qn-load-more {
  display:flex;
  justify-content:center;
  padding:18px 8px 28px;
  color:rgba(255,255,255,.34);
  font:700 9px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.09em;
}

@media (max-width:620px) {
  .qn-title { font-size:34px !important; }
}

/* ===== Quick News Stage 4: NEWS | CHAT ===== */
.qn-subhead--tabs{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:9px;padding-bottom:9px;
}
.qn-tabs{display:flex;align-items:center;gap:4px;min-width:0}
.qn-tab{
  appearance:none;border:0;background:transparent;color:rgba(255,255,255,.44);cursor:pointer;
  padding:10px 12px 9px;font:800 14px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.07em;
  border-bottom:2px solid transparent;
}
.qn-tab:hover{color:rgba(255,255,255,.82)}
.qn-tab.is-active{color:#f2c400;border-bottom-color:#f2c400}
.qn-new-count{display:inline-flex;margin-left:4px;min-width:18px;height:18px;padding:0 5px;align-items:center;justify-content:center;border-radius:9px;background:#f2c400;color:#111;font:900 8px/1 var(--sans,Arial,sans-serif)}
.qn-new-count[hidden]{display:none!important}
.qn-subhint{margin-left:auto;color:rgba(255,255,255,.38);font-size:10px}
.qn-post-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.qn-discuss{
  appearance:none;border:0;background:transparent;color:rgba(242,196,0,.7);cursor:pointer;padding:5px 3px;
  font:800 8px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.06em;white-space:nowrap;
}
.qn-discuss:hover{color:#f2c400}

.qn-item-tools{margin-left:auto;display:flex;align-items:center;gap:2px;opacity:.28;transition:opacity .12s}
.qn-comment:hover .qn-item-tools,.qn-chat-msg:hover .qn-item-tools{opacity:.8}
.qn-item-tools button{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;padding:1px 3px;font-size:12px;line-height:1}
.qn-item-tools button:hover{color:#f2c400}
.qn-inline-edit{margin-top:5px}
.qn-edit-input{min-height:52px;border:1px solid rgba(242,196,0,.25);border-radius:7px;padding:8px 9px;background:#0b0d0e;color:#e8e8e5;font-size:12px;line-height:1.45;outline:none;white-space:pre-wrap}
.qn-edit-input:focus{border-color:rgba(242,196,0,.6)}
.qn-inline-edit-actions{display:flex;gap:6px;margin-top:6px}
.qn-inline-edit-actions button{appearance:none;border:1px solid rgba(255,255,255,.12);border-radius:5px;background:#111416;color:#ddd;padding:5px 8px;font:800 7px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.06em;cursor:pointer}
.qn-inline-edit-actions button:first-child{background:#f2c400;border-color:#f2c400;color:#111}

.qn-chat-shell{min-height:100%;display:flex;flex-direction:column;padding:4px 14px 18px}
.qn-chat-list{display:flex;flex-direction:column;gap:0;min-height:120px}
.qn-chat-msg{display:grid;grid-template-columns:34px minmax(0,1fr);gap:9px;padding:11px 3px;border-bottom:1px solid rgba(255,255,255,.055)}
.qn-chat-msg .qn-avatar{width:32px;height:32px}
.qn-chat-main{min-width:0}
.qn-chat-meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:rgba(255,255,255,.44);font-size:11px;min-width:0}
.qn-chat-meta strong{color:#f0f0ed;font-size:14px}
.qn-chat-body{margin-top:6px;color:#e8e8e5;font-size:15px;line-height:1.55;overflow-wrap:anywhere;white-space:normal}
.qn-chat-body a{color:#f2c400;text-decoration:underline;text-decoration-color:rgba(242,196,0,.45);text-underline-offset:2px}
.qn-chat-msg.is-service-agent{background:linear-gradient(90deg,rgba(242,196,0,.035),transparent 56%)}
.qn-chat-news-ref{display:block;width:min(100%,420px);margin:6px 0 2px;padding:7px 9px;text-align:left;border:0;border-left:2px solid rgba(242,196,0,.7);background:rgba(242,196,0,.045);color:#e9e6dc;cursor:pointer}
.qn-chat-news-ref span{display:block;color:#f2c400;font:800 9px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.08em;margin-bottom:4px}
.qn-chat-news-ref b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:600}
.qn-chat-older{align-self:center;appearance:none;border:0;background:transparent;color:rgba(242,196,0,.65);cursor:pointer;padding:12px;font:800 8px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.07em}
.qn-chat-empty{padding:38px 8px;text-align:center;color:rgba(255,255,255,.45);font-size:14px}
.qn-chat-composer{position:sticky;bottom:-18px;z-index:4;margin-top:auto;padding-top:10px;padding-bottom:10px;background:linear-gradient(180deg,rgba(20,23,24,0),#141718 15%,#141718)}
.qn-chat-context{position:relative;margin:0 0 7px;padding:7px 28px 7px 9px;border-left:2px solid #f2c400;background:rgba(242,196,0,.06);border-radius:0 5px 5px 0;overflow:hidden}
.qn-chat-context span{display:block;color:#f2c400;font:800 7px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.08em;margin-bottom:3px}
.qn-chat-context b{display:block;color:rgba(255,255,255,.76);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qn-chat-context button{position:absolute;right:5px;top:5px;border:0;background:transparent;color:rgba(255,255,255,.45);cursor:pointer;font-size:15px}

@media(max-width:620px){
  .qn-subhint{display:none}
  .qn-tab{font-size:13px;padding-inline:9px}
  .qn-post-foot{align-items:flex-start;gap:6px}
  .qn-post-actions{gap:4px;flex-wrap:wrap}
  .qn-discuss{font-size:7px}
  .qn-chat-shell{padding-left:8px;padding-right:8px}
  .qn-chat-msg{grid-template-columns:30px minmax(0,1fr)}
}


/* ===== Quick News Stage 5: readable chat, replies, reactions ===== */
.qn-chat-reply-badge{
  display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-left:4px;
  border-radius:10px;background:#f2c400;color:#101112;font:900 10px/1 Arial,sans-serif;vertical-align:1px;
}
.qn-chat-reply-badge[hidden]{display:none!important}
.qn-chat-composer .qn-input{font-size:15px;line-height:1.5;min-height:68px}
.qn-chat-msg{padding-top:14px;padding-bottom:14px}
.qn-chat-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px;min-height:26px}
.qn-chat-reply-btn{appearance:none;border:0;background:transparent;color:rgba(255,255,255,.46);cursor:pointer;padding:4px 0;font:800 9px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.055em}
.qn-chat-reply-btn:hover{color:#f2c400}
.qn-chat-reacts{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto}
.qn-chat-react-chip,.qn-chat-react-add{appearance:none;border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;color:rgba(255,255,255,.68);cursor:pointer;padding:2px 1px;font-size:16px;line-height:1.2}
.qn-chat-react-chip b{font:700 11px/1 Arial,sans-serif;color:rgba(255,255,255,.56);margin-left:3px}
.qn-chat-react-chip.is-on b{color:#f2c400}
.qn-chat-react-add{font-size:18px;color:rgba(255,255,255,.42)}
.qn-chat-react-menu{position:absolute;right:0;bottom:30px;z-index:12;display:flex;align-items:center;gap:3px;padding:5px 7px;border:1px solid rgba(242,196,0,.35);border-radius:8px;background:#0b0d0e;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.qn-chat-react-menu[hidden]{display:none!important}
.qn-chat-react-menu button{appearance:none;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:4px;cursor:pointer;font-size:20px;line-height:1}
.qn-chat-reply-ref,.qn-chat-replying{position:relative;display:block;width:min(100%,460px);margin:7px 0 3px;padding:8px 10px;text-align:left;border:0;border-left:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.035);color:#e9e6dc;border-radius:0 5px 5px 0;overflow:hidden}
button.qn-chat-reply-ref{cursor:pointer}
.qn-chat-reply-ref:hover{background:rgba(255,255,255,.055);border-left-color:#f2c400}
.qn-chat-reply-ref span,.qn-chat-replying span{display:block;color:#f2c400;font:800 9px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.06em;margin-bottom:4px}
.qn-chat-reply-ref b,.qn-chat-replying b{display:block;color:rgba(255,255,255,.68);font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qn-chat-replying{width:100%;box-sizing:border-box;margin:0 0 7px;border-left-color:#f2c400;background:rgba(242,196,0,.055)}
.qn-chat-replying button{position:absolute;right:6px;top:5px;border:0;background:transparent;color:rgba(255,255,255,.45);cursor:pointer;font-size:16px}
.qn-chat-msg.is-flash{animation:qnChatFlash 1.25s ease}
@keyframes qnChatFlash{0%,100%{background:transparent}35%{background:rgba(242,196,0,.10)}}
@media(max-width:620px){
  .qn-chat-body{font-size:15px;line-height:1.52}
  .qn-chat-meta{font-size:11px}.qn-chat-meta strong{font-size:14px}
  .qn-chat-reply-btn{font-size:9px}
}

/* ===== Stage 6: reply navigator ===== */
.qn-chat-replies-jump{position:sticky;top:4px;z-index:8;align-self:flex-end;margin:2px 2px 10px auto;appearance:none;border:1px solid rgba(242,196,0,.38);border-radius:999px;background:#151819;color:#f2c400;padding:9px 12px;font:900 10px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.05em;cursor:pointer;box-shadow:0 7px 20px rgba(0,0,0,.35)}
.qn-chat-replies-jump b{display:inline-flex;min-width:20px;height:20px;margin-left:6px;align-items:center;justify-content:center;border-radius:999px;background:#f2c400;color:#111;font:900 11px/1 Arial,sans-serif}
.qn-chat-replies-jump:hover{background:#1d2021}

/* Stage 11: Telegram-like spoiler blocks */
.qn-spoiler{display:inline-flex;align-items:center;max-width:100%;margin:1px 2px;padding:2px 7px;border:0;border-radius:7px;background:rgba(242,196,0,.10);color:#d8d1b8;font:inherit;line-height:1.45;vertical-align:baseline;cursor:pointer;text-align:left}
.qn-spoiler-label{font-size:10px;font-weight:800;letter-spacing:.06em;color:#f2c400;white-space:nowrap}
.qn-spoiler-text{display:none;color:inherit}
.qn-spoiler.is-open{background:rgba(255,255,255,.055);padding:2px 6px}
.qn-spoiler.is-open .qn-spoiler-label{display:none}
.qn-spoiler.is-open .qn-spoiler-text{display:inline}
.qn-spoiler-tool span{font-size:10px;font-weight:800}

/* Stage 12 — supergroup rooms + profile links */
.qn-chat-author-link{color:inherit;text-decoration:none;display:inline-flex;align-items:center}
.qn-chat-author-link:hover strong{color:#f2c400;text-decoration:underline;text-underline-offset:3px}
.qn-room-switcher{position:sticky;top:0;z-index:9;margin:0 -2px 10px;padding:6px 2px 8px;background:linear-gradient(180deg,#141718 82%,rgba(20,23,24,0))}
.qn-room-current{width:100%;display:grid;grid-template-columns:42px minmax(0,1fr) 24px;align-items:center;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:#0e1112;color:#eee;text-align:left;padding:9px 10px;cursor:pointer}
.qn-room-current>span:nth-child(2){min-width:0}.qn-room-current b{display:block;font:900 13px/1.15 var(--noir-display,'Tektur',sans-serif);letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qn-room-current small{display:block;margin-top:4px;color:rgba(255,255,255,.43);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qn-room-current i{font-style:normal;color:#f2c400;font-size:18px;text-align:center}
.qn-room-avatar{width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,196,0,.45);overflow:hidden;display:flex;align-items:center;justify-content:center;background:#0a0c0d;color:#f2c400;font:900 18px/1 var(--noir-display,'Tektur',sans-serif);flex:0 0 38px}.qn-room-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.qn-room-menu{position:absolute;left:2px;right:2px;top:64px;z-index:20;border:1px solid rgba(242,196,0,.28);border-radius:10px;background:#0b0d0e;box-shadow:0 18px 42px rgba(0,0,0,.55);overflow:hidden;max-height:360px;overflow-y:auto}.qn-room-menu[hidden]{display:none!important}
.qn-room-option{width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;border:0;border-bottom:1px solid rgba(255,255,255,.055);background:transparent;color:#eee;text-align:left;padding:10px 12px;cursor:pointer}.qn-room-option:last-child{border-bottom:0}.qn-room-option:hover,.qn-room-option.is-active{background:rgba(242,196,0,.065)}.qn-room-option.is-active .qn-room-copy b{color:#f2c400}.qn-room-copy{min-width:0}.qn-room-copy b{display:block;font-size:13px}.qn-room-copy small{display:block;margin-top:3px;color:rgba(255,255,255,.42);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qn-room-option em{min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:#f2c400;color:#111;display:flex;align-items:center;justify-content:center;font:900 11px/1 Arial,sans-serif;font-style:normal}
@media(max-width:650px){.qn-room-current{grid-template-columns:38px minmax(0,1fr) 20px}.qn-room-avatar{width:34px;height:34px;flex-basis:34px}.qn-room-menu{top:60px}}

/* ===== Quick News Stage 13: supergroup room list ===== */
.qn-room-list-screen{padding:10px 14px 22px;min-height:100%}
.qn-room-list-head{display:flex;align-items:end;justify-content:space-between;gap:12px;padding:8px 2px 12px;border-bottom:1px solid rgba(255,255,255,.07)}
.qn-room-list-head strong{font:900 16px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.06em;color:#f2c400}
.qn-room-list-head span{color:rgba(255,255,255,.4);font-size:11px}
.qn-room-list{display:flex;flex-direction:column}
.qn-room-list-item{width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;border:0;border-bottom:1px solid rgba(255,255,255,.06);background:transparent;color:#eee;text-align:left;padding:14px 4px;cursor:pointer}
.qn-room-list-item:hover{background:rgba(242,196,0,.045)}
.qn-room-list-item .qn-room-avatar{width:44px;height:44px;flex-basis:44px}
.qn-room-list-item .qn-room-copy b{font-size:15px;color:#f2f2ef}
.qn-room-list-item .qn-room-copy small{font-size:11px;white-space:normal}
.qn-room-locked{color:rgba(242,196,0,.72)!important;margin-top:5px!important;font-weight:700}
.qn-room-counters{display:flex;align-items:center;gap:5px;justify-self:end;flex-wrap:wrap;max-width:120px;justify-content:flex-end}
.qn-room-counters em,.qn-room-counters b,.qn-room-counters i{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;font:900 10px/1 Arial,sans-serif;font-style:normal}
.qn-room-counters em{background:#f2c400;color:#111}
.qn-room-counters b{background:#2f9fe8;color:#fff}
.qn-room-counters i{background:rgba(255,255,255,.09);color:#f0f0ed;border:1px solid rgba(255,255,255,.12)}
.qn-room-head{position:sticky;top:0;z-index:8;display:grid;grid-template-columns:36px 42px minmax(0,1fr) auto;align-items:center;gap:10px;margin:0 -2px 10px;padding:7px 2px 9px;background:linear-gradient(180deg,#141718 82%,rgba(20,23,24,0));border-bottom:1px solid rgba(255,255,255,.06)}
.qn-room-back{width:32px;height:32px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:#0e1112;color:#f2c400;font-size:20px;cursor:pointer}
.qn-room-head .qn-room-copy b{font:900 14px/1.15 var(--noir-display,'Tektur',sans-serif)}
.qn-room-head .qn-room-copy small{font-size:10px}
.qn-room-readonly{font:900 8px/1 var(--noir-display,'Tektur',sans-serif);letter-spacing:.06em;color:#111;background:#f2c400;border-radius:999px;padding:6px 8px}
.qn-room-readonly-note{margin:14px 0 0;border:1px dashed rgba(242,196,0,.28);border-radius:10px;padding:12px;color:rgba(255,255,255,.58);font-size:12px;line-height:1.45;text-align:center}
@media(max-width:620px){.qn-room-list-item{grid-template-columns:42px minmax(0,1fr) auto}.qn-room-list-item .qn-room-avatar{width:38px;height:38px;flex-basis:38px}.qn-room-head{grid-template-columns:34px 38px minmax(0,1fr)}.qn-room-readonly{grid-column:2/4;justify-self:start}.qn-room-counters{max-width:88px}}

/* === Stage 14: quizzes, chat ranking, dating moderation, visible own reactions === */
/* A player's own reaction must be unmistakable, not just a tiny colour change. */
.qn-react.is-on {
  background: rgba(242,196,0,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(242,196,0,.52), 0 0 16px rgba(242,196,0,.08) !important;
  border-radius: 999px !important;
  padding: 3px 8px !important;
  color: #f2c400 !important;
}
.qn-react.is-on b { color:#f2c400 !important; }
.qn-comment-react-chip.is-on {
  background: rgba(242,196,0,.14) !important;
  box-shadow: inset 0 0 0 1px rgba(242,196,0,.48) !important;
  border-radius: 999px !important;
  padding: 0 6px !important;
  color:#f2c400 !important;
  opacity:1 !important;
}
.qn-chat-react.is-on,
.qn-chat-react-btn.is-on {
  background:rgba(242,196,0,.13) !important;
  border-color:rgba(242,196,0,.52) !important;
  color:#f2c400 !important;
}

.qn-ranking-screen { padding:18px; max-width:920px; margin:0 auto; }
.qn-ranking-prize { border:1px solid rgba(242,196,0,.35); background:linear-gradient(145deg,rgba(242,196,0,.075),rgba(255,255,255,.018)); border-radius:16px; padding:18px 20px; margin-bottom:14px; }
.qn-ranking-prize strong { display:block; color:#f2c400; font-family:var(--noir-display,'Tektur'),sans-serif; font-size:15px; letter-spacing:.055em; text-transform:uppercase; }
.qn-ranking-prize p { margin:8px 0 0; color:rgba(255,255,255,.76); line-height:1.5; white-space:pre-wrap; }
.qn-ranking-periods { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 14px; }
.qn-ranking-periods button { min-height:38px; border:1px solid rgba(255,255,255,.12); border-radius:10px; background:#111214; color:rgba(255,255,255,.58); font:700 11px var(--noir-display,'Tektur'),sans-serif; letter-spacing:.06em; cursor:pointer; }
.qn-ranking-periods button.is-on { border-color:rgba(242,196,0,.65); color:#f2c400; background:rgba(242,196,0,.08); }
.qn-ranking-list { display:grid; gap:8px; }
.qn-ranking-row { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:11px; min-height:66px; padding:9px 12px; border:1px solid rgba(255,255,255,.09); border-radius:12px; background:#101113; }
.qn-ranking-row.is-top { border-color:rgba(242,196,0,.33); }
.qn-ranking-place { text-align:center; font:900 17px var(--noir-display,'Tektur'),sans-serif; color:rgba(255,255,255,.58); }
.qn-ranking-row.is-top .qn-ranking-place { color:#f2c400; }
.qn-ranking-agent { display:flex; align-items:center; min-width:0; gap:10px; color:#fff; text-decoration:none; }
.qn-rank-avatar { width:40px; height:40px; border-radius:50%; overflow:hidden; flex:0 0 40px; border:1px solid rgba(242,196,0,.35); background:#08090a; display:grid; place-items:center; font-weight:900; color:#f2c400; }
.qn-rank-avatar img { width:100%; height:100%; object-fit:cover; }
.qn-ranking-agent-copy { min-width:0; }
.qn-ranking-agent-copy b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qn-ranking-agent-copy small { display:block; margin-top:3px; color:rgba(255,255,255,.44); font-size:10px; }
.qn-ranking-score { text-align:right; color:#f2c400; font:900 18px var(--noir-display,'Tektur'),sans-serif; }
.qn-ranking-score small { display:block; color:rgba(255,255,255,.4); font:600 9px system-ui,sans-serif; letter-spacing:.08em; }
.qn-ranking-empty,.qn-ranking-loading { padding:36px 12px; text-align:center; color:rgba(255,255,255,.48); }
.qn-ranking-rules { margin-top:14px; padding:11px 13px; border-radius:10px; background:rgba(255,255,255,.025); color:rgba(255,255,255,.44); font-size:10px; line-height:1.55; }

.qn-quiz-card { margin:8px 0 4px; padding:13px; border:1px solid rgba(242,196,0,.3); border-radius:12px; background:linear-gradient(145deg,rgba(242,196,0,.055),rgba(0,0,0,.12)); }
.qn-quiz-kicker { color:#f2c400; font:800 10px var(--noir-display,'Tektur'),sans-serif; letter-spacing:.08em; margin-bottom:7px; }
.qn-quiz-question { color:#fff; font-weight:800; line-height:1.4; margin-bottom:10px; white-space:pre-wrap; }
.qn-quiz-options { display:grid; gap:6px; }
.qn-quiz-option { width:100%; text-align:left; min-height:38px; border:1px solid rgba(255,255,255,.12); border-radius:9px; background:rgba(0,0,0,.18); color:rgba(255,255,255,.82); padding:8px 10px; cursor:pointer; }
.qn-quiz-option:not(:disabled):hover { border-color:rgba(242,196,0,.42); background:rgba(242,196,0,.06); }
.qn-quiz-option.is-selected { border-color:rgba(255,255,255,.36); }
.qn-quiz-option.is-correct { border-color:rgba(100,210,128,.62); background:rgba(74,185,104,.12); color:#baf2c8; }
.qn-quiz-option.is-wrong { border-color:rgba(236,86,86,.58); background:rgba(236,86,86,.1); color:#ffb3b3; }
.qn-quiz-option:disabled { cursor:default; }
.qn-quiz-result { margin-top:9px; padding-top:9px; border-top:1px solid rgba(255,255,255,.08); font-size:11px; line-height:1.5; color:rgba(255,255,255,.68); }
.qn-quiz-result.is-correct { color:#a8e9b8; }
.qn-quiz-result.is-wrong { color:#ffc0c0; }
.qn-quiz-explanation { display:block; margin-top:4px; color:rgba(255,255,255,.58); }

.qn-social-links { display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.qn-social-link { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:5px 9px; border:1px solid rgba(242,196,0,.32); border-radius:8px; color:#f2c400; background:rgba(242,196,0,.05); text-decoration:none; font-size:10px; font-weight:800; }
.qn-social-link:hover { background:rgba(242,196,0,.1); }
.qn-room-dating { color:#f2c400 !important; }
.qn-dating-form,.qn-dating-locked,.qn-dating-pending { margin:10px 12px 12px; padding:14px; border:1px solid rgba(242,196,0,.25); border-radius:12px; background:#101113; }
.qn-dating-form-head strong,.qn-dating-locked strong,.qn-dating-pending strong { display:block; color:#f2c400; font:800 12px var(--noir-display,'Tektur'),sans-serif; letter-spacing:.055em; }
.qn-dating-form-head span,.qn-dating-locked p,.qn-dating-pending p { display:block; margin:5px 0 0; color:rgba(255,255,255,.58); font-size:11px; line-height:1.45; }
.qn-dating-text { width:100%; min-height:90px; margin-top:11px; resize:vertical; box-sizing:border-box; border:1px solid rgba(255,255,255,.11); border-radius:9px; background:#090a0b; color:#fff; padding:10px; font:inherit; }
.qn-dating-social-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:9px; }
.qn-dating-social-grid label span { display:block; margin-bottom:4px; color:rgba(255,255,255,.5); font-size:9px; font-weight:800; text-transform:uppercase; }
.qn-dating-social-grid input { width:100%; box-sizing:border-box; min-height:36px; border:1px solid rgba(255,255,255,.11); border-radius:8px; background:#090a0b; color:#fff; padding:7px 8px; }
.qn-dating-safe { margin-top:9px; padding:8px 9px; border-radius:8px; background:rgba(242,196,0,.055); color:rgba(255,255,255,.56); font-size:10px; line-height:1.45; }
.qn-dating-rejected { margin-top:9px; color:#ffb1b1; font-size:10px; }
.qn-dating-submit,.qn-dating-locked button { min-height:36px; margin-top:10px; padding:0 13px; border:1px solid rgba(242,196,0,.55); border-radius:8px; background:rgba(242,196,0,.08); color:#f2c400; font:800 10px var(--noir-display,'Tektur'),sans-serif; cursor:pointer; }
.qn-dating-status { margin-top:6px; min-height:14px; color:rgba(255,255,255,.55); font-size:10px; }

@media(max-width:720px){
  .qn-ranking-screen{padding:12px 10px}.qn-ranking-row{grid-template-columns:42px minmax(0,1fr) auto;padding:8px}.qn-rank-avatar{width:34px;height:34px;flex-basis:34px}.qn-ranking-agent-copy small{display:none}.qn-ranking-score{font-size:15px}
  .qn-dating-social-grid{grid-template-columns:1fr}.qn-ranking-prize{padding:14px}.qn-quiz-card{padding:11px}
}
.qn-social-links a { display:inline-flex; align-items:center; gap:5px; min-height:30px; padding:5px 9px; border:1px solid rgba(242,196,0,.32); border-radius:8px; color:#f2c400; background:rgba(242,196,0,.05); text-decoration:none; font-size:10px; font-weight:800; }
.qn-social-links a:hover { background:rgba(242,196,0,.1); }
.qn-social-links a span { color:rgba(255,255,255,.65); font-weight:600; }
.qn-quiz-result span,.qn-quiz-result p { display:block; margin:4px 0 0; }
/* Stage 14 selector aliases matching the existing chat/ranking markup. */
.qn-chat-react-chip.is-on { background:rgba(242,196,0,.13) !important; box-shadow:inset 0 0 0 1px rgba(242,196,0,.48) !important; border-radius:999px !important; padding:2px 6px !important; color:#f2c400 !important; }
.qn-ranking-periods button.is-active { border-color:rgba(242,196,0,.65); color:#f2c400; background:rgba(242,196,0,.08); }
.qn-rank-place { text-align:center; font:900 17px var(--noir-display,'Tektur'),sans-serif; color:rgba(255,255,255,.58); }
.qn-ranking-row.is-top .qn-rank-place { color:#f2c400; }
.qn-rank-agent { display:flex; align-items:center; min-width:0; gap:10px; color:#fff; }
.qn-rank-agent>span:last-child { min-width:0; }
.qn-rank-agent b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qn-rank-agent small { display:block; margin-top:3px; color:rgba(255,255,255,.44); font-size:10px; }
.qn-rank-points { text-align:right; color:#f2c400; font:900 18px var(--noir-display,'Tektur'),sans-serif; }
.qn-ranking-head { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:11px; padding:0 12px 7px; color:rgba(255,255,255,.34); font-size:9px; font-weight:800; letter-spacing:.08em; }
.qn-ranking-head span:last-child{text-align:right}
.qn-quiz-hint{margin-top:8px;color:rgba(255,255,255,.4);font-size:10px}
@media(max-width:720px){.qn-ranking-head{grid-template-columns:42px minmax(0,1fr) auto;padding-left:8px;padding-right:8px}.qn-rank-agent small{display:none}.qn-rank-points{font-size:15px}}

/* ===== Видео в альбоме: превью-плитка + полный показ в просмотрщике ===== */
.qn-media-video--tile { cursor: zoom-in; }
.qn-media-video--tile video { pointer-events: none; object-fit: cover; }
.qn-media-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; padding-left: 3px; box-sizing: border-box;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: 18px; line-height: 1; pointer-events: none;
}
.qn-lightbox .qn-lb-stage video {
  display: block; width: auto; height: auto;
  max-width: min(1100px, 82vw); max-height: 90vh;
  object-fit: contain; background: #000;
}
.qn-lightbox .qn-lb-stage [hidden] { display: none !important; }
@media (max-width: 620px) {
  .qn-lightbox .qn-lb-stage video { max-width: 78vw; max-height: 86vh; }
  .qn-media-play { width: 38px; height: 38px; font-size: 15px; }
}