/* =========================================================
   *  PAGINATION – GYORS OLDALVÁLTÓ LINKEK
   * =======================================================*/
  .quick-pages {
    display: inline-flex;
    gap: 4px;
    align-items: center;
  }
  
  .page-quick-link {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(255,255,255,.06);
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: 1px solid rgba(255,255,255,.08);
  }
  
  .page-quick-link:hover {
    background: rgba(255,255,255,.12);
    color: #ffd24d !important;
    border-color: rgba(255,193,7,.3);
    transform: translateY(-1px);
  }


  /* =========================================================
   *  TÖRÖLT POSZTOK / TÉMÁK
   * =======================================================*/
  .post.deleted,
  .thread.deleted,
  .cat-thread.deleted {
    background-color: #161616 !important;
    color: #bfbfbf !important;
    border-color: rgba(255,255,255,0.03) !important;
    box-shadow: none !important;
    filter: grayscale(30%) brightness(85%);
  }

  .post.deleted .postarea,
  .post.deleted .post-body,
  .thread.deleted .thread-aside,
  .cat-thread.deleted .ct-main {
    color: #9ea3a6 !important;
  }

  .post.deleted .ph-left-deleted i,
  .ct-deleted-icon i,
  .ct-deleted-wrap .ct-deleted-icon i {
    color: #ff6b6b !important;
  }

  .post.deleted .deleted-overlay,
  .thread.deleted .deleted-overlay {
    background: rgba(0,0,0,0.35);
  }

  .post.deleted img.avatar-img,
  .post.deleted .avatar-15,
  .post.deleted .avatar-16,
  .post.deleted .avatar-18 {
    opacity: 0.7 !important;
    filter: grayscale(60%);
  }

  .cat-thread.deleted { opacity: .55; filter: grayscale(.9); }
  .cat-thread.deleted .ct-title,
  .cat-thread.deleted .ct-meta,
  .cat-thread.deleted .thread-title {
    color: #9aa0a6;
  }
  .ct-deleted-icon {
    color: #c82333;
    margin-right: 6px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  .ct-deleted-wrap {
    display: flex;
    align-items: center;
    margin-right: 8px;
  }

  /* Popover témázás – dark fórum skin */
  .popover {
    background: linear-gradient(180deg, rgba(18,23,32,0.98), rgba(12,15,20,0.98));
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    min-width: 200px;
    border-radius: 10px;
  }
  .popover .popover-header {
    background: transparent;
    color: var(--text);
    border-bottom: none;
    padding: .5rem .75rem;
    font-weight: 700;
  }
  .popover .popover-body {
    padding: .6rem .75rem;
    color: var(--muted);
  }
  .popover .btn-pop-confirm,
  .popover .btn-pop-cancel {
    padding: .25rem .5rem;
    font-size: .85rem;
  }
  .popover .arrow::before,
  .popover .arrow::after {
    background: transparent;
    border-top-color: transparent !important;
    border-right-color: transparent !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
  }
  .popover.bs-popover-auto[x-placement^="top"] .arrow::after,
  .popover.bs-popover-top .arrow::after {
    border-top-color: rgba(12,15,20,0.98);
  }
  .popover.bs-popover-auto[x-placement^="bottom"] .arrow::after,
  .popover.bs-popover-bottom .arrow::after {
    border-bottom-color: rgba(12,15,20,0.98);
  }
  .popover.bs-popover-auto[x-placement^="left"] .arrow::after,
  .popover.bs-popover-left .arrow::after {
    border-left-color: rgba(12,15,20,0.98);
  }
  .popover.bs-popover-auto[x-placement^="right"] .arrow::after,
  .popover.bs-popover-right .arrow::after {
    border-right-color: rgba(12,15,20,0.98);
  }

  /* Delete buborék */
  .ph-left-deleted { display:inline-flex; align-items:center; margin-left:8px; }
  .deleted-control { display:inline-block; position:relative; }
  .delete-bubble {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: #0f1720;
    border: 1px solid var(--line);
    padding: .5rem;
    border-radius: 8px;
    min-width: 180px;
    box-shadow: 0 8px 24px rgba(0,0,0,.6);
    z-index: 2200;
  }
  .delete-bubble .small {
    display: block;
    margin-bottom: .35rem;
    color: var(--muted);
  }
  .delete-bubble .btn { margin-right: .35rem; }


  /* =========================================================
   *  SPOILER BLOKKOK
   * =======================================================*/
  .spoiler {
    border: 1px dashed rgba(255,255,255,0.06);
    border-radius: 8px;
    overflow: hidden;
    margin: 8px 0;
    position: relative;
  }
  .spoiler .spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: .5rem .75rem;
    color: var(--muted);
    font-weight: 600;
    cursor: pointer;
    gap: .5rem;
  }
  .spoiler .spoiler-toggle:hover {
    background: rgba(255,255,255,0.02);
  }
  .spoiler .spoiler-toggle::after {
    content: attr(data-spoiler-title);
    color: var(--muted);
    font-weight: 400;
    margin-left: auto;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0.85;
  }
  .spoiler .spoiler-toggle:not([data-spoiler-title])::after {
    content: "ez egy spoiler";
  }
  .spoiler .spoiler-content {
    padding: .6rem .75rem;
    background: rgba(0,0,0,0.03);
  }
  .spoiler .spoiler-content[hidden] {
    display: none !important;
  }

  /* TinyMCE editorben: legyen mindig látható a spoiler tartalom */
  .mce-content-body .spoiler .spoiler-content[hidden],
  .tox-edit-area .spoiler .spoiler-content[hidden],
  .tox-edit-area .spoiler .spoiler-content {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
  }
  .mce-content-body .spoiler .spoiler-toggle,
  .tox-edit-area .spoiler .spoiler-toggle {
    pointer-events: none;
    opacity: 0.95;
  }


  /* =========================================================
   *  PINNED TOPIC BOX + DATETIME INPUT
   * =======================================================*/
  .pinned-box {
    border: 1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding: 12px;
    border-radius: 8px;
  }

  .pinned-box > h3 {
    display: block;
    margin: -12px -12px 8px -12px;
    padding: 10px 12px;
    font-size: 0.95rem;
    font-weight: 600;
    background: rgba(0,0,0,0.18);
    border-bottom: 1px solid rgba(255,255,255,0.03);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
  }

  .pinned-threads .cat-thread,
  .pinned-threads .thread {
    background: transparent;
    border: none;
    padding: 6px 0;
  }

  .topic-icon .bi-pin-angle-fill {
    color: #ffd24d;
  }

  /* datetime-local input skinezése */
  input[type="datetime-local"].form-control {
    color: var(--text);
    padding-right: 3rem;
    background-color: rgba(255,255,255,0.02);
    border: 1px solid var(--ys-line, var(--line, rgba(255,255,255,.12)));
  }
  input[type="datetime-local"].form-control::-webkit-datetime-edit,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-fields-wrapper,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-text,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-month-field,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-day-field,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-year-field,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-hour-field,
  input[type="datetime-local"].form-control::-webkit-datetime-edit-minute-field {
    color: var(--text);
  }
  input[type="datetime-local"].form-control::-webkit-calendar-picker-indicator {
    transform: scale(1.6);
    margin-right: 6px;
    filter: drop-shadow(0 0 8px rgba(216,191,122,0.45)) saturate(140%);
    opacity: 1;
  }
  input[type="datetime-local"].form-control.no-native-indicator {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23e9ecf1' d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H5V9h14v9zM7 11h5v5H7z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
    padding-right: 3.2rem;
  }


  /* =========================================================
   *  UNREAD JELÖLÉS / THREAD FLAG-EK
   * =======================================================*/
  .ct-unread {
    display:inline-block;
    font-weight:700;
    font-size:0.72rem;
    padding:2px 8px;
    border-radius:999px;
    background:#ffc107;
    color:#111;
    margin-left:6px;
    vertical-align:middle;
  }
  .cat-thread.unread { box-shadow: 0 0 0 2px rgba(255,193,7,0.05); }
  .cat-thread .ct-title { font-weight: 400; }
  .cat-thread.unread .ct-title { font-weight: 700; }


  /* =========================================================
   *  KOMPAKT THREAD SOR (CATEGORY + HOT LIST)
   * =======================================================*/
  .cat-thread,
  .thread {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
  }

  .cat-thread .ct-icon,
  .thread .topic-icon,
  .thread .author-box > div[style*="position:relative"],
  .thread .avatar-18 {
    flex: 0 0 auto;
  }

  .cat-thread .ct-main,
  .thread .thread-title,
  .thread .thread-stats {
    flex: 1 1 auto;
    min-width: 0;
  }

  .cat-thread .ct-title,
  .thread .thread-title h3,
  .thread .thread-title a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cat-thread .ct-flags,
  .thread .thread-flags {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
  }

  .cat-thread .ct-side,
  .thread .thread-aside {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .cat-thread .ct-author .avatar-15 { vertical-align: middle; }

  @media (max-width: 768px) {
    .cat-thread,
    .thread {
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 8px;
    }
    .cat-thread .ct-main,
    .thread .thread-title {
      flex-basis: 100%;
      min-width: 0;
    }
    .cat-thread .ct-flags,
    .cat-thread .ct-side,
    .thread .thread-aside {
      margin-left: 0;
    }
  }


  /* =========================================================
   *  FORUM GRID + CATEGORY KÁRTYÁK
   * =======================================================*/
  .section {
    padding-block: clamp(18px,4vw,32px);
  }

  .forum-grid {
    display:grid;
    grid-template-columns: 1fr 320px;
    gap:16px;
  }
  @media (max-width:1199.98px) {
    .forum-grid { grid-template-columns:1fr; }
  }

  .home-cats { display:grid; gap:14px; }

  .cat-section {
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(255,255,255,.03);
    overflow:hidden;
    position:relative;
  }
  .cat-section::before {
    content:"";
    position:absolute;
    inset:0 auto 0 0;
    width:4px;
  /*  background:var(--cat); */
  }

  .cat-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    border-bottom:1px solid var(--line);
    background:rgba(255,255,255,.03);
  }
  .cat-title {
    display:flex;
    align-items:center;
   /*  gap:10px; */
    font-weight:800;
  }
  .cat-dot {
    width:12px;
    height:12px;
    border-radius:50%;
    background:var(--cat);
  }
  .cat-meta {
    color:var(--gold);
    font-size:.92rem;
  }

  .cat-body { padding:12px; }
  .cat-threads { display:grid; gap:8px; }

  .ct-icon {
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background: color-mix(in srgb, var(--cat) 18%, transparent);
    border:1px solid color-mix(in srgb, var(--cat) 55%, rgba(255,255,255,.18));
  }
  .ct-icon i {
    font-size:20px;
    line-height:1;
  }

  .ct-title {
    font-weight:700;
    margin:0;
    font-size:.98rem;
  }
  .ct-meta {
    color:var(--muted);
    font-size:.85rem;
    margin-top:4px;
  }
  .ct-stats {
    display:inline-grid;
    align-items:center;
    font-size:.8rem;
  }

  .ct-side {
    display:flex;
    align-items:center;
    gap:12px;
  }
  .ct-main span { font-size: 0.7rem; }

  /* mobil: ct-side lecsúszik alulra – ezt most már a flex @media is segíti */

  .ct-author {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:6px;
    width: 200px;
  }

  .author-mini { display:flex; align-items:center; gap:8px; }
  .avatar-15 { width:35px; height:35px; object-fit:cover; }
  .avatar-16 { width:45px; height:45px; object-fit:cover; }


  /* =========================================================
   *  HOME OLDALI THREAD KÁRTYÁK
   * =======================================================*/
  .thread {
    /* a layoutot a fenti flex rész viszi; itt a kártyastílus marad */
    padding:14px;
    border-radius:12px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
  }
  .thread:hover { background:rgba(255,255,255,.06); }

  .thread-title { margin:0; font-weight:800; }
  .thread-stats {
    display:flex;
    gap:6px;
    align-items:center;
    margin-top:6px;
  }
  .thread-aside { text-align:right; }

  .tags {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .tag {
    font-size:.8rem;
    border:1px solid var(--line);
    padding:.1rem .45rem;
    border-radius:999px;
    color:#cfd6e3;
  }

  .stat-chip {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    border-radius:10px;
  }

  .author-box { display:inline-flex; align-items:center; gap:8px; }
  .avatar-18 { width:50px; height:50px; object-fit:cover; }


  /* =========================================================
   *  TOPIC IKONOK (stackelt)
   * =======================================================*/
  #threadTitle {
    display:flex;
    align-items:center;
    gap:8px;
  }

  .topic-head {
    display:flex;
    align-items:center;
    gap:8px;
  }

  .topic-icon,
  .topic-icon-inner {
    position:relative;
    display:inline-block;
    width:24px;
    height:24px;
    vertical-align:middle;
    line-height:0;
  }

  .topic-icon i,
  .topic-icon-inner i {
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    font-size:20px;
    line-height:1;
    pointer-events:none;
    color:inherit;
  }

  .topic-icon i.b1,
  .topic-icon-inner i.b1 {
    transform:translate(-50%,-50%) translate(-2px,-4px);
    opacity:.95;
  }
  .topic-icon i.b2,
  .topic-icon-inner i.b2 {
    transform:scaleX(-1) translate(-50%,-50%) translate(15px,2px);
    opacity:.45;
  }


  /* =========================================================
   *  POSTER AVATAR + VIP + RANG BADGE
   * =======================================================*/
  .avatar {
    width:56px;
    height:56px;
    border-radius:12px;
    object-fit:cover;
    border:1px solid var(--line);
  }

  .vip {
    position: relative;
    display: inline-block;
    font-weight:900;
    letter-spacing: .6px;
    background: linear-gradient(180deg, #fff7d6 0%, #ffd36a 35%, #e5a80e 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5), 0 0 6px rgba(255,200,60,0.15);
    -webkit-text-stroke: 0.6px rgba(40,20,0,0.45);
  }
  .vip::before {
    content: '';
    position: absolute;
    left:0; right:0; top:0; bottom:0;
    pointer-events:none;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-140%) skewX(-12deg);
    filter: blur(10px);
    opacity: 0.9;
    mix-blend-mode: screen;
    animation: vip-shimmer 2600ms ease-in-out infinite;
  }

  .vip-avatar {
    position: relative;
    border-radius:12px;
    box-shadow: 0 0 12px rgba(255,215,0,0.22), 0 0 30px rgba(255,215,0,0.08);
    border:2px solid rgba(255,215,0,0.65);
  }
  .vip-avatar::after {
    content: "";
    position: absolute;
    inset:-6px;
    border-radius:18px;
    pointer-events:none;
    background:
      radial-gradient(circle at 10% 20%, rgba(255,255,255,0.9) 0px, rgba(255,255,255,0.0) 4px),
      radial-gradient(circle at 80% 70%, rgba(255,235,150,0.9) 0px, rgba(255,235,150,0.0) 5px);
    opacity: .0;
    animation: vip-avatar-sparkle 2500ms linear infinite;
  }

  @keyframes vip-shimmer {
    0%{ transform: translateX(-140%) skewX(-12deg); opacity:0; }
    20%{ opacity:0.8; }
    60%{ transform: translateX(120%) skewX(-12deg); opacity:0.6; }
    100%{ transform: translateX(140%) skewX(-12deg); opacity:0; }
  }

  @keyframes vip-avatar-sparkle {
    0%{ opacity:0; transform: scale(.95); }
    20%{ opacity:.9; transform: scale(1.02); }
    50%{ opacity:.3; transform: scale(1); }
    100%{ opacity:0; transform: scale(.98); }
  }

  .rank-badge {
    font-size:.75rem;
    border-radius:3px;
    border:1px solid var(--line);
    color:#c9ffd8;
    white-space:nowrap;
    padding: 2px 20px;
    width: 100%;
  }

  .rank-badge.fancy {
    --rb-color: #ffd36a;
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    padding:.18rem .5rem;
    border-radius:999px;
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
    border: 1px solid color-mix(in srgb, var(--rb-color) 40%, rgba(255,255,255,0.06));
    box-shadow: 0 4px 18px rgba(0,0,0,0.45),
                0 0 10px color-mix(in srgb, var(--rb-color) 30%, transparent);
    color: #fff;
    font-weight:700;
    font-size:.78rem;
  }
  .rank-badge.fancy .rb-logo {
    width:20px;
    height:20px;
    display:inline-grid;
    place-items:center;
    flex:0 0 20px;
    border-radius:6px;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.06));
  }
  .rank-badge.fancy .rb-logo img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .rank-badge.fancy .rb-label {
    color:var(--rb-color);
    font-weight:800;
    font-size:.78rem;
    text-shadow: 0 1px 0 rgba(0,0,0,.6);
  }
  .rank-badge.fancy .rb-icon {
    color:var(--rb-color);
    font-size:14px;
  }
  .rank-badge.fancy[data-outline="true"] {
    box-shadow: 0 0 8px color-mix(in srgb, var(--rb-color) 45%, transparent);
  }

  .post-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
  }
  .author {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:800;
  }
  .role {
    font-size:.72rem;
    padding:.05rem .4rem;
    border-radius:6px;
    border:1px solid var(--line);
    color:#c9ffd8;
  }
  .role.mod { color:#ffe08a; }

  .rank-badges {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    justify-content:center;
    width: 100%;
    isolation: isolate;
  }


  /* =========================================================
   *  CHIPEK, LINK SZÍNEK KATEGÓRIA SZERINT
   * =======================================================*/
  .subcat-chip {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    padding:.2rem .55rem;
    border-radius:999px;
    border:1px solid var(--line);
    background:rgba(255,255,255,.04);
    font-size:.85rem;
  }

  .stretched-link { display:contents; }

  .home-cats .cat-section a:not(.btn):not(.stretched-link) {
    color: var(--cat) !important;
  }
  .home-cats .cat-section a:hover {
    opacity:.95;
    text-decoration:underline;
  }
  .home-cats .cat-section .cat-title a,
  .home-cats .cat-section .ct-title,
  .home-cats .cat-section .thread .thread-title {
    color: var(--cat) !important;
  }

  .home-cats .cat-section .subcat-chip {
    color: var(--cat) !important;
    border-color: color-mix(in srgb, var(--cat) 65%, transparent);
    background:   color-mix(in srgb, var(--cat) 12%, transparent);
  }
  .home-cats .cat-section .subcat-chip:hover {
    background: color-mix(in srgb, var(--cat) 18%, transparent);
  }

  .ellipsis-1 {
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    text-align: right;
  }
  .ellipsis-2 {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size: 0.8rem;
    font-weight: 100;
  }

  .ct-sub2 {
    margin-top:8px;
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .subchip-2 {
    font-size:.82rem;
    border-style:dashed;
    padding:.15rem .5rem;
    display:inline-flex;
    align-items:center;
    gap:.35rem;
    margin-right: 0;
    width: 49%;
  }
  .subchip-icon .bi {
    font-size:14px;
    line-height:1;
    color: var(--cat);
  }


  /* =========================================================
   *  IKON BADGE + IKON GRID
   * =======================================================*/
  .icon-badge {
    display:inline-grid;
    place-items:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background: var(--cat);
    border: 1px solid var(--line);
  }
  .icon-badge .bi {
    font-size:18px;
    line-height:1;
    color:#0f1117;
  }
  .icon-badge.image {
    padding:4px;
    overflow:hidden;
    background:transparent;
  }
  .icon-badge.image .icon-img {
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:8px;
  }
  .icon-badge.sm {
    width:22px;
    height:22px;
    border-radius:6px;
  }
  .icon-badge.sm .bi {
    font-size:13px;
  }

  .icon-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:8px;
  }
  .icon-cell {
    border:1px solid var(--line);
    border-radius:10px;
    padding:8px;
    cursor:pointer;
    text-align:center;
    background:rgba(255,255,255,.03);
  }
  .icon-cell:hover { background:rgba(255,255,255,.06); }
  .icon-cell i {
    font-size:20px;
    display:block;
    margin-bottom:6px;
  }
  .icon-name {
    font-size:.8rem;
    color:#cfd6e3;
    word-break:break-all;
  }
  .icon-cell.active {
    outline:2px solid var(--cat,#7aa2f7);
  }


  /* =========================================================
   *  MODAL Z-INDEX
   * =======================================================*/
  .modal-backdrop.show ~ .modal-backdrop.show { z-index:1055; }
  .modal.show { z-index:1060; }


  /* =========================================================
   *  VIEWCATEGORY / VIEWTHREAD SZÍNEZÉS
   * =======================================================*/
  #viewCategory a:not(.btn):not(.stretched-link),
  #viewThread  a:not(.btn):not(.stretched-link),
  .breadcrumb-item.active{
    color: var(--cat) !important;
  }
  #viewCategory a:hover,
  #viewThread a:hover {
    opacity:.95;
    text-decoration:underline;
  }

  #viewCategory .ct-title,
  #viewCategory .thread .thread-title {
    color: var(--cat) !important;
  }
  .forum-grid.no-rightbar { grid-template-columns: 1fr; }

  /* =========================================================
  #viewThread .post {
    border-color: color-mix(in srgb, var(--cat) 40%, rgba(255,255,255,.18));
    background:   color-mix(in srgb, var(--cat) 10%, transparent);
  }
  #viewThread .post:hover {
    background: color-mix(in srgb, var(--cat) 16%, transparent);
  }
  #viewThread #threadTitle { color: var(--cat); }
   * =======================================================*/

  /* =========================================================
   *  THREAD HEADER (IKON + CÍM)
   * =======================================================*/
  #threadSection .cat-title .topic-icon { flex:0 0 auto; }
  #threadSection .cat-title a {
    display:inline-block;
    font-weight:800;
    font-size: 1.15rem;
    line-height:1.2;
    max-width: min(78vw, 1100px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
  }
  #threadSection .cat-title a:hover { text-decoration: underline; }
  #threadSection .cat-meta .stat-chip { padding: .2rem .5rem; }


  /* =========================================================
   *  POST LAYOUT – POSTER BALRA, TARTALOM JOBBRA
   * =======================================================*/
  .post {
    display:grid;
    grid-template-columns: 220px 1fr;
    border-radius:12px;
    background:rgba(255,255,255,.03);
    margin-bottom: 30px;
  }

  .post-header,
  .post-footer {
    grid-column: 1 / -1;
  }

  .post-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 14px;
    border-bottom:1px dashed var(--line);
  }
  .post-header .ph-left {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:300;
  }
  .post-header .ph-right {
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--muted);
    font-size:.9rem;
  }
  .post-number {
    font-variant-numeric: tabular-nums;
    font-weight:600;
  }
  a.permalink {
    color:var(--muted);
    text-decoration:none;
  }
  a.permalink:hover {
    opacity:.9;
    text-decoration:underline;
  }

  .post-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    padding:10px 14px;
    margin-top:8px;
    border-top:1px dashed var(--line);
  }
  .post-actions {
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }

  @media (max-width:768px) {
    .post { grid-template-columns: 1fr; }
    .poster { order:1; }
    .postarea { order:2; }
    .post-footer {
      flex-wrap:wrap;
      row-gap:8px;
      flex-direction:column;
    }
  }

  .poster {
    border:1px solid var(--line);
    background:rgb(0 0 0 / 31%);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    padding:15px;
    position: relative;
    overflow: visible;
  }
  
  .avatar-wrap-x1 {
    position:relative;
    width:45px;
    height:45px;
  }
  .avatar-wrap {
    position:relative;
    width:150px;
    height:150px;
  }
  .avatar-frame {
    position:relative;
    width:100%;
    height:100%;
    border-radius:16px;
    padding:8px;
    background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    box-shadow: 0 6px 18px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.04);
    display:flex;
    align-items:center;
    justify-content:center;
    /* overflow:hidden; */
  }

   .avatar-frame-img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: translate(-50%, -50%); /* középre tolás */
    border-radius: 16px;       
    }

  .avatar-frame .avatar-xl {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 97%;
    height: 97%;
    border-radius: 16px;
    object-fit: cover;
    display: block;
    transform: translate(-50%, -50%); /* középre tolás */
  }
  .avatar-frame .avatar-inner-border {
    position:absolute;
    inset:8px;
    border-radius:10px;
    pointer-events:none;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.18) inset,
                0 6px 12px rgba(0,0,0,0.45);
  }

  .online-dot {
    position:absolute;
    right:10px;
    bottom:10px;
    width:14px;
    height:14px;
    border-radius:50%;
    background:#9ca3af;
    border:2px solid #0f1117;
  }
  .online-dot.on { background:#22c55e; }

  .poster-name {
    font-weight:800;
    text-align:center;
  }

  .poster-meta {
    width:100%;
    display:grid;
    gap:6px;
  }
  .poster-meta .row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:.85rem;
    color:var(--muted);
    border-bottom:1px dashed rgba(255,255,255,.08);
    padding-bottom:4px;
  }
  .poster-meta .row:last-child {
    border-bottom:0;
    padding-bottom:0;
  }

  .poster-stats .stat-chip {
    padding:.15rem .45rem;
    font-size:.8rem;
  }

  .poster-stats {
    display:grid;
    gap:4px;
    width:100%;
  }
  .stat-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 2px 20px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--line);
    font-size: .6rem;
  }
  .stat-row .label { color:var(--muted); }

  .poster-actions {
    display:flex;
    gap:.5rem;
    justify-content:flex-end;
    align-items:center;
    flex-wrap:wrap;
  }

  .icon-btn {
    border:1px solid var(--btn-border,#d0d7de);
    background:var(--btn-bg,#fff);
    border-radius:999px;
    padding:.20rem 0.25rem;
    line-height:1;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    font-size:.2rem;
  }
  .icon-btn.ccolor {
    color: #e9ecf1;
    border-color: #e9ecf1;
    background: #f0fff400;
  }
  .icon-btn:hover { background:#f6f8fa; }
  .icon-btn .bi { font-size:0.7rem; }
  .icon-btn.danger {
    color:#b42318;
    border-color:#f1c2bf;
    background:#fff5f5;
  }
  .icon-btn.warn {
    color:#a15c00;
    border-color:#ffd8a8;
    background:#fff7e6;
  }
  .icon-btn.success {
    color:#116329;
    border-color:#b7e1c1;
    background:#f0fff4;
  }


  /* Jobb hasáb: postarea */
  .postarea {
    position: relative;
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:14px;
    padding-bottom:28px;
  }
  .postarea .post-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .postarea .author {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:800;
  }
  .postarea .post-body { line-height:1.6; }

  .postarea pre {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--line);
    padding: 10px;
    border-radius: 8px;
    overflow: auto;
  }
  .postarea pre code {
    display:block;
    white-space: pre;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size:.9rem;
  }
  .postarea blockquote.reply-quote {
    border-left: 3px solid var(--line);
    padding-left: 10px;
    margin:.5rem 0;
    opacity:.95;
  }

  .postarea .edited-info {
    position: absolute;
    right: 14px;
    bottom: 0;
    font-size: .85rem;
    color: var(--muted);
    white-space: nowrap;
    max-width: calc(100% - 28px);
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .post-foot-right {
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:flex-end;
  }
  .post-tags {
    display:flex;
    gap:6px;
    flex-wrap:wrap;
  }
  .post-footer .tag {
    border-color: color-mix(in srgb, var(--cat) 60%, transparent);
    background:   color-mix(in srgb, var(--cat) 12%, transparent);
    color: var(--cat) !important;
  }

  @media (max-width: 768px) {
    .postarea {
      padding-bottom: 0;
    }
    .postarea .edited-info {
      position: static;
      display: block;
      text-align: right;
      margin-top: 6px;
      white-space: normal;
    }
    .post-foot-right { align-items:flex-start; }
  }


  /* =========================================================
   *  TINYMCE / REPLY BOX
   * =======================================================*/
  .tox-tinymce {
    border:1px solid var(--line) !important;
    border-radius:12px !important;
  }
  .tox .tox-editor-header,
  .tox .tox-menubar,
  .tox .tox-toolbar {
    background: rgba(255,255,255,.03) !important;
    border-color: var(--line) !important;
  }
  .tox .tox-statusbar { display:none !important; }

  .reply-box {
    margin-top: 8px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
	background: var(--surface);
	border: 1px solid var(--line);
	box-shadow: var(--shadow); 
  }

  #replyBox .tox-tinymce { min-height: 220px; }
  #viewNew  .tox-tinymce { min-height: 380px; }


  /* =========================================================
   *  LOCKED LINK + BANNED MEGJELENÍTÉS
   * =======================================================*/
  .post-footer .edited-info {
    color:var(--muted);
    font-size:.85rem;
  }

  .locked-link {
    color: #9ca3af;
    cursor: not-allowed;
    border-bottom: 1px dotted rgba(255,255,255,.35);
    white-space: nowrap;
  }
  .locked-link .bi {
    font-size: .9em;
    opacity: .85;
    vertical-align: -2px;
  }

  .poster-name.banned,
  .postarea .author .name.banned,
  .ct-author strong.banned,
  .ct-main .open_member.banned,
  .banned {
    text-decoration: line-through !important;
    text-decoration-thickness: 2px;
    opacity: .8;
  }


  /* =========================================================
   *  TOAST HOST – HA NINCS BOOTSTRAP TOAST
   * =======================================================*/
  #toastHost {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 2000;
    pointer-events: none;
  }
  #toastHost .toast {
    display: block;
    opacity: 1;
    pointer-events: auto;
    background: rgba(33,41,59,.98);
    color: #e9ecf1;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .6rem .75rem;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
  }
  #toastHost .toast + .toast { margin-top: 8px; }
  #toastHost .btn-close {
    filter: invert(1) grayscale(1) contrast(200%);
  }


  /* =========================================================
   *  POLL PROGRESS
   * =======================================================*/
  .poll .progress {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--line);
    height: 12px;
  }
  .poll .progress-bar {
    background: var(--cat, #7aa2f7);
  }


  /* =========================================================
   *  STATISZTIKA KÁRTYÁK
   * =======================================================*/
  #statistics .display-6 {
    font-size: clamp(1.0rem, 3.2vw, 1.5rem) !important;
    line-height: 1;
  }
  #statistics h5 {
    font-size: clamp(0.8rem, 1.8vw, 0.95rem);
    margin-bottom: .2rem;
  }
  #statistics .bi {
    font-size: clamp(0.9rem, 2.0vw, 1rem);
  }
  #statistics .card {
    padding: clamp(.5rem, 1.2vw, .75rem);
  }
  #statistics .display-6.fw-bold {
    font-weight: 700;
  }


  /* =========================================================
   *  XF-SZERŰ HOT/TRENDING LISTA
   * =======================================================*/
  .block-row {
    list-style:none;
    padding:8px 0;
    border-bottom:1px solid var(--line);
  }
  .contentRow {
    display:flex;
    gap:8px;
    align-items:center;
  }
  .contentRow-figure {
    flex:0 0 48px;
  }
  .contentRow-figure .avatar {
    width:48px;
    height:48px;
    border-radius:6px;
    object-fit:cover;
    border:1px solid var(--line);
    display:block;
  }
  .contentRow-main {
    flex:1 1 auto;
    min-width:0;
  }
  .contentRow-main > a {
    display:block;
    font-weight:700;
    color:var(--text);
    text-decoration:none;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:0.95rem;
  }
  .contentRow-main > a:hover {
    text-decoration:underline;
  }
  .contentRow-minor {
    color:var(--muted);
    font-size:.78rem;
  }
  .contentRow-minor .listInline {
    display:inline-flex;
    gap:.1rem;
    align-items:center;
    padding:0;
    margin:0;
    list-style:none;
  }
  .listInline--bullet li {
    position:relative;
    padding-left:0;
    margin:0;
    color:var(--muted);
    font-size:.78rem;
  }
  .listInline--bullet li + li::before {
    content: '•';
    margin:0 .1rem;
    color:var(--muted);
    display:inline-block;
  }
  .contentRow-minor--hideLinks { color:var(--muted); }
  .contentRow-minor--replies {
    color:var(--muted);
    font-size:.78rem;
    margin-top:6px;
  }

  .avatar--xxs {
    width:36px;
    height:36px;
    display:block;
  }
  .avatar--square { border-radius:8px; }

  @media (max-width:768px) {
    .contentRow {
      gap:10px;
      align-items:flex-start;
    }
    .contentRow-main > a {
      white-space:normal;
      -webkit-line-clamp:2;
      line-clamp:2;
      display:-webkit-box;
      -webkit-box-orient:vertical;
      overflow:hidden;
      font-size:0.85rem;
    }
    .block-row { padding:8px 0; }
  }

  .cat-threads .bi,
  .block-row .bi {
    font-size:0.85rem;
    vertical-align:middle;
  }
  .cat-threads .ct-icon i,
  .cat-threads .icon-badge .bi {
    font-size:14px;
  }
  .cat-threads .cat-thread,
  .cat-threads .thread {
    padding:14px 15px;
  }


  /* =========================================================
   *  GLOBÁLIS: [hidden] 
   * =======================================================*/
  [hidden] { display: none !important; }

  

/* Közös kategória-szín változó */
.cat-section,
.cat-section__ {
  --cat-color-effective: var(--cat-color, var(--cat, var(--ys-gold)));
}

/* Alap trending ikon – ha nincs cat, akkor marad zöld */
.news-card-icon.trending-icon {
  --trend-color: #148b0a; /* alapértelmezett szín */

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: px;
  height: 48px;
  border-radius: 12px;

  background: color-mix(in srgb, var(--trend-color) 18%, rgba(255,255,255,0.03));
  border: 1px solid color-mix(in srgb, var(--trend-color) 55%, transparent);
  color: var(--trend-color);

  animation: pulse-trend 1.6s ease-out infinite;
}

/* Ha kategória-blokkban van, onnan örökli a színt */
.cat-section  .news-card-icon.trending-icon,
.cat-section__ .news-card-icon.trending-icon {
  --trend-color: var(--cat-color-effective);
}

/* Animáció – ugyanazt a --trend-color-t használja */
@keyframes pulse-trend {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--trend-color) 40%, transparent);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--trend-color) 0%, transparent);
  }
}
/* --- Subkategória blokk – ct-sub2 --- */

.ct-sub2 {
  margin-top: 0.5rem;
  padding: 0.75rem 0.75rem 0.5rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--line);
}

.ct-sub2-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.9;
}

.ct-sub2-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--ys-gold);
}

/* A szubkategória “chipek” listája */

.ct-sub2-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Egy szubkategória kártya */

.ct-sub2-item {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 10px;
  background: radial-gradient(circle at top left,
    rgba(216, 191, 122, 0.12),
    rgba(12, 16, 22, 0.96)
  );
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              border-color 0.18s ease, background 0.18s ease;
}

.ct-sub2-item:hover {
  transform: translateY(-2px);
  border-color: rgba(216, 191, 122, 0.55);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.6);
  background: radial-gradient(circle at top left,
    rgba(216, 191, 122, 0.18),
    rgba(12, 16, 22, 0.98)
  );
}

/* Felső sor: név + rövid leírás */

.ct-sub2-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ct-sub2-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ct-sub2-desc {
  font-size: 0.75rem;
  color: var(--muted);
  opacity: 0.85;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Alsó sor: statisztikák */

.ct-sub2-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.72rem;
  color: var(--muted);
  opacity: 0.9;
}

.ct-sub2-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ct-sub2-stat i {
  font-size: 0.8em;
  opacity: 0.9;
}

/* Kis “glow” a bal szélén – finom gamer hangulat */

.ct-sub2-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg,
    rgba(216, 191, 122, 0.3),
    transparent 30%,
    transparent 70%,
    rgba(216, 191, 122, 0.15)
  );
  opacity: 0;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  transition: opacity 0.18s ease;
}

.ct-sub2-item:hover::before {
  opacity: 1;
}

/* Mobil optimalizálás */

@media (max-width: 768px) {
  .ct-sub2 {
    padding: 0.6rem;
  }

  .ct-sub2-item {
    flex: 1 1 100%;
  }

  .ct-sub2-name {
    font-size: 0.83rem;
  }

  .ct-sub2-desc {
    font-size: 0.74rem;
  }
}
.board_rightbar {
    width: 420px;
}