/* FAN ZONA Forum – upgraded category cards (red/white style) + rest */
.fz-forum-wrap { --fan-red:#C1121F; --fan-red-hover:#E5383B; --fan-green:#2a9d8f; --fan-gray:#E9ECEF; --fan-text:#1E1E1E; color:var(--fan-text); }
.fz-forum-wrap { max-width: 1600px; margin: 0 auto; width: 100%; }

/* Header */
.fan-header { position: sticky; top: 0; z-index: 10; background:#fff; border-bottom:1px solid var(--fan-gray); }
.fan-header-inner { display:flex; gap:16px; align-items:center; justify-content: space-between; padding:12px 16px; }
.fan-title { font-weight:700; font-size:1.25rem; }
.fan-search { display:flex; gap:8px; flex: 1; justify-content:center; }
.fan-search input[type="text"] { width: 60%; max-width:560px; border:1px solid var(--fan-gray); border-radius:10px; padding:10px 12px; }
.btn { display:inline-flex; align-items:center; gap:6px; padding:10px 14px; border:1px solid var(--fan-gray); border-radius:12px; text-decoration:none; color:var(--fan-text); background:#fff; }
.btn:hover { border-color:#d9d9d9; }
.btn-primary { background: var(--fan-red); border-color: var(--fan-red); color:#fff; }
.btn-primary:hover { background: var(--fan-red-hover); border-color: var(--fan-red-hover); }
.btn-small { padding:6px 10px; font-size:.85rem; border-radius:10px; }
.btn-ghost { background: transparent; }

.fz-forum-body { padding: 16px; display: grid; gap: 24px; }

/* ===== Category cards ===== */
.categories-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:18px; }
.category-card { position:relative; border:1px solid var(--fan-gray); border-radius:16px; padding:18px; text-decoration:none; color:inherit; background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.03);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  overflow:hidden;
}
.category-card.has-bg { background-position: center; background-size: cover; background-repeat:no-repeat; }
.category-card.has-bg::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
  backdrop-filter: blur(2px);
  pointer-events:none;
}
.category-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(193,18,31,.18); border-color: #f2c7cc; background:#fffdfd; }
.category-card::before { /* accent ribbon */
  content:''; position:absolute; left:-24px; top:-24px; width:120px; height:120px;
  background: radial-gradient(60px 60px at 60px 60px, var(--accent, var(--fan-red)) 0, rgba(193,18,31,.25) 60%, transparent 62%);
  transform: rotate(25deg);
  pointer-events:none;
  filter: blur(.4px);
}
.category-card .cat-top { position:relative; display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.category-card .cat-icon { height:42px; width:42px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: #fff0f0; border:1px solid #ffd8d8; box-shadow: inset 0 0 0 3px rgba(193,18,31,.06); }
.category-card .cat-icon img { max-height:28px; width:auto; display:block; }
.category-card .cat-emoji { font-size:24px; }
.category-card h3 { margin:0; font-size:1.15rem; line-height:1.2; letter-spacing:.2px; }

.category-desc { color:#4a4a4a; margin:6px 0 10px; min-height: 2.2em; }
.category-meta { position:relative; display:flex; flex-wrap:wrap; gap:8px; color:#444; font-size:.95rem; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#fff0f0; border:1px solid #ffd8d8; font-size:.9rem; }
.chip.ghost { background:#f7f7f7; border-color:#e9e9e9; color:#555; }
.category-card .arrow { position:absolute; right:12px; bottom:12px; font-size:24px; color: var(--accent, var(--fan-red)); opacity:.7; transition: transform .18s ease, opacity .18s ease; }
.category-card:hover .arrow { transform: translateX(3px); opacity:1; }

/* Topics list, topic single (unchanged except small tweaks) */
.topics-list { border:1px solid var(--fan-gray); border-radius:14px; background:#fff; }
.topics-list-header { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--fan-gray); padding:12px 16px; }
.topics-legend { display:grid; grid-template-columns: 90px 120px 160px; gap:14px; color:#666; font-size:.9rem; }
.topic-card { display:grid; grid-template-columns: 1fr 90px 120px 160px; gap:14px; align-items:center; padding:14px 16px; border-bottom:1px solid var(--fan-gray); color:inherit; text-decoration:none; }
.topic-card:hover { background:#fdf4f4; }
.topic-main { display:flex; flex-direction:column; gap:8px; }
.topic-title { font-weight:600; font-size:1.05rem; }
.topic-cats { display:flex; flex-wrap: wrap; gap:6px; }
.badge { display:inline-flex; border:1px solid var(--fan-red); color:var(--fan-red); background:#FFE5E5; border-radius:999px; padding:2px 10px; font-size:12px; }
.topic-solved { display:inline-flex; border:1px solid var(--fan-green); color:var(--fan-green); background:#e8fff8; border-radius:999px; padding:2px 10px; font-size:12px; }

.topic-single { border:1px solid var(--fan-gray); border-radius:14px; background:#fff; padding:16px; }
.topic-single h2 { margin: 0 0 8px; }
.topic-meta { display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.topic-content { padding: 8px 0 16px; border-bottom:1px solid var(--fan-gray); }
.lock-badge { background:#ffe8e8; color:#c00; border:1px solid #f5b5b5; padding:2px 10px; border-radius:999px; margin-left:6px; }
.solved-badge { background:#e8fff8; color:#1e7f73; border:1px solid #b8efe6; padding:2px 10px; border-radius:999px; margin-left:6px; }

.solution-box { border:1px solid #b8efe6; background:#f4fffd; border-radius:12px; padding:12px; margin:12px 0; }
.solution-title { font-weight:700; margin-bottom:6px; color:#1e7f73; }

.replies { display:flex; flex-direction:column; gap:12px; padding-top:12px; }
.reply { border:1px solid var(--fan-gray); border-radius:12px; padding:12px; }
.reply.reply-solution { border-color:#b8efe6; box-shadow: 0 0 0 2px #e8fff8 inset; }
.reply-meta { display:flex; gap:8px; color:#555; font-size:.9rem; margin-bottom:6px; align-items:center; }

.fz-form label { display:block; margin-bottom:12px; }
.fz-form input[type="text"], .fz-form select, .fz-form textarea, .fz-form input[type="file"] { width:100%; border:1px solid var(--fan-gray); border-radius:12px; padding:10px 12px; }
.fz-form .form-actions { display:flex; gap:10px; justify-content:flex-end; }

/* Poll */
.fz-poll { border:1px solid var(--fan-gray); border-radius:12px; padding:12px; margin-bottom:12px; background:#fff; }
.fz-poll-q { font-weight:700; margin-bottom:8px; }
.fz-poll-row { display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:center; margin:6px 0; }
.fz-poll-bar { background:#f4f4f4; border-radius:10px; overflow:hidden; height:12px; }
.fz-poll-bar span { display:block; height:12px; background: var(--fan-red); }

/* User badges */
.user-badges.inline, .user-badges { display:inline-flex; gap:6px; margin: 0 6px; vertical-align:middle; align-items:center; flex-wrap:wrap; }
.ubadge { border:1px solid #ffd0d0; background:#fff5f5; color:#c00; border-radius:999px; padding:2px 8px; font-size:11px; display:inline-flex; align-items:center; gap:6px; }
.ubadge img { height:14px; width:auto; display:inline-block; }
.ubadge-custom { border-color:#d6e7ff; background:#f5f9ff; color:#204a87; }

.fz-modal { border:none; border-radius:14px; padding:0; width: 720px; max-width: calc(100% - 24px); }
.fz-modal::backdrop { background: rgba(0,0,0,.35); }
.modal-head { display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--fan-gray); padding:12px 16px; }
.fz-modal .fz-form { padding: 12px 16px 16px; }

.empty { padding: 18px; color:#666; }

@media (max-width: 768px) {
  .fan-search input[type="text"] { width: 100%; }
  .topics-legend, .topic-card { grid-template-columns: 1fr; gap:8px; }
  .fz-poll-row { grid-template-columns: 1fr; }
}
/* HOT ribbon */
.category-card .ribbon { position:absolute; top:12px; right:-36px; transform: rotate(35deg); background: var(--accent, var(--fan-red)); color:#fff; padding:6px 48px; font-weight:700; letter-spacing:.5px; box-shadow:0 6px 18px rgba(193,18,31,.25); text-transform:uppercase; }
.category-card .ribbon::after { content:''; position:absolute; inset:0; background: repeating-linear-gradient(45deg, rgba(255,255,255,.15), rgba(255,255,255,.15) 6px, transparent 6px, transparent 12px); pointer-events:none; }
.chip.today { background:#fff8f8; border-color:#ffd9d9; }

/* Extra ribbons */
.category-card .ribbon.hot { right:-36px; top:12px; }
.category-card .ribbon.top { right:-36px; top:46px; background:#111; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.category-card .ribbon.new { left:-36px; right:auto; top:12px; background:#2a9d8f; box-shadow:0 6px 18px rgba(42,157,143,.25); }
.category-card .ribbon.top::after, .category-card .ribbon.new::after { background: repeating-linear-gradient(45deg, rgba(255,255,255,.12), rgba(255,255,255,.12) 6px, transparent 6px, transparent 12px); }

/* Split "today" chip compact */
.chip.today.split { white-space:nowrap; }

/* ===== Emoji toolbar ===== */
.fz-emoji-bar { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
.fz-emoji-bar .emoji-suggestion { cursor:pointer; font-size:20px; line-height:1; padding:6px 8px; border-radius:10px; border:1px solid var(--fan-gray); background:#fff; }
.fz-emoji-bar .emoji-suggestion:hover { background:#fff4f4; border-color:#ffd6d6; }
.fz-emoji-panel { display:none; border:1px solid var(--fan-gray); background:#fff; border-radius:14px; padding:10px; margin-top:8px; box-shadow:0 10px 24px rgba(0,0,0,.06); }
.fz-emoji-panel.open { display:block; }
.fz-emoji-panel .tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.fz-emoji-panel .tab { padding:6px 10px; border:1px solid var(--fan-gray); border-radius:999px; cursor:pointer; user-select:none; }
.fz-emoji-panel .tab.active { background:var(--fan-red); color:#fff; border-color:var(--fan-red); }
.fz-emoji-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(36px,1fr)); gap:6px; max-height:220px; overflow:auto; }
.fz-emoji-grid .emoji { font-size:22px; padding:6px; text-align:center; border:1px solid #eee; border-radius:8px; cursor:pointer; }
.fz-emoji-grid .emoji:hover { border-color:#ffd6d6; background:#fff4f4; }
.fz-emoji-toggle { padding:6px 10px; border:1px solid var(--fan-gray); border-radius:10px; background:#fff; cursor:pointer; }
.fz-emoji-search { width:180px; padding:6px 8px; border:1px solid var(--fan-gray); border-radius:10px; }

/* ===== Leaderboard ===== */
.fz-lb-tabs { display:flex; gap:8px; margin: 4px 0 12px; flex-wrap:wrap; }
.fz-lb-tabs a { padding:8px 12px; border:1px solid var(--fan-gray); border-radius:999px; text-decoration:none; color:inherit; background:#fff; }
.fz-lb-tabs a.active { background: var(--fan-red); color:#fff; border-color: var(--fan-red); }
.fz-lb-table { border:1px solid var(--fan-gray); border-radius:14px; overflow:hidden; background:#fff; }
.fz-lb-row { display:grid; grid-template-columns: 60px 1fr 140px 1.4fr 1.2fr; gap:12px; align-items:center; padding:12px 14px; border-bottom:1px solid var(--fan-gray); }
.fz-lb-head { background:#fff7f7; font-weight:700; }
.fz-lb-row:last-child { border-bottom:none; }
.fz-lb-row .avatar { width:32px; height:32px; border-radius:999px; margin-right:8px; vertical-align:middle; }
.fz-lb-row .lb-user { display:flex; align-items:center; gap:10px; }
.fz-lb-row .lb-pts .pts { font-weight:800; }
@media (max-width: 880px) {
  .fz-lb-row { grid-template-columns: 42px 1fr 100px; }
  .fz-lb-row .lb-badges, .fz-lb-row .lb-stats { display:none; }
}

/* Leaderboard toolbar */
.fz-lb-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.fz-lb-filter select { padding:6px 8px; border:1px solid var(--fan-gray); border-radius:8px; }