/* ==========================================================================
   QuizHub — main stylesheet
   ========================================================================== */
:root{
	--qh-bg: #0c1220;
	--qh-bg-alt: #101828;
	--qh-panel: #141d2e;
	--qh-panel-light: #1a2338;
	--qh-border: #232d42;
	--qh-text: #e7ebf3;
	--qh-text-dim: #8892a6;
	--qh-primary: #6c5ce7;
	--qh-primary-dark: #5849c2;
	--qh-accent: #6c5ce7;
	--qh-gold: #f4b942;
	--qh-green: #22c55e;
	--qh-red: #ef4444;
	--qh-radius: 14px;
	--qh-radius-sm: 8px;
	--qh-sidebar-w: 260px;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box;}
body.quizhub{background:var(--qh-bg); color:var(--qh-text); margin:0;}
body{background:var(--qh-bg); color:var(--qh-text); font-family:'Inter',sans-serif; margin:0; line-height:1.6;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3,h4{font-family:'Inter',sans-serif; font-weight:700; margin:0 0 .5em;}
ul{list-style:none; margin:0; padding:0;}
button{font-family:inherit; cursor:pointer;}

/* Layout shell */
.qh-app{display:flex; min-height:100vh;}
.qh-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.qh-content{padding:28px 32px 60px; max-width:1400px; width:100%; margin:0 auto;}

/* Sidebar */
.qh-sidebar{
	width:var(--qh-sidebar-w); flex-shrink:0; background:var(--qh-bg-alt);
	border-right:1px solid var(--qh-border); display:flex; flex-direction:column;
	position:sticky; top:0; height:100vh; overflow-y:auto; z-index:40;
}
.qh-sidebar-logo{padding:22px 24px; border-bottom:1px solid var(--qh-border);}
.qh-logo-text{display:flex; align-items:center; gap:8px; font-size:20px; font-weight:800; color:#fff;}
.qh-logo-text i{color:var(--qh-primary);}
.qh-sidebar-nav{padding:16px 12px; flex:1;}
.qh-main-nav li a{display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:var(--qh-radius-sm); color:var(--qh-text-dim); font-weight:500; font-size:14.5px; margin-bottom:2px; transition:.15s;}
.qh-main-nav li a:hover, .qh-main-nav li.current-menu-item a{background:var(--qh-panel-light); color:#fff;}
.qh-main-nav li a i{width:18px; text-align:center;}
.qh-sidebar-divider{height:1px; background:var(--qh-border); margin:16px 8px;}
.qh-sidebar-heading{color:var(--qh-text-dim); font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:0 14px; margin-bottom:8px;}
.qh-cat-nav li a{display:flex; align-items:center; gap:10px; padding:8px 14px; border-radius:var(--qh-radius-sm); font-size:14px; color:var(--qh-text-dim);}
.qh-cat-nav li a:hover{background:var(--qh-panel-light); color:#fff;}
.qh-cat-icon{width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;}
.qh-cat-name{flex:1;}
.qh-cat-count{font-size:11px; color:var(--qh-text-dim); background:var(--qh-panel); padding:1px 7px; border-radius:20px;}
.qh-sidebar-footer{padding:16px 24px; border-top:1px solid var(--qh-border);}
.qh-sidebar-footer a{color:var(--qh-text-dim); font-size:14px; display:flex; gap:8px; align-items:center;}
.qh-sidebar-toggle{display:none; position:fixed; top:14px; left:14px; z-index:60; background:var(--qh-primary); color:#fff; border:none; width:40px; height:40px; border-radius:8px;}

/* Top bar */
.qh-topbar{display:flex; align-items:center; gap:20px; padding:16px 32px; border-bottom:1px solid var(--qh-border); background:var(--qh-bg-alt); position:sticky; top:0; z-index:30;}
.qh-search{flex:1; max-width:480px; display:flex; align-items:center; gap:10px; background:var(--qh-panel); border:1px solid var(--qh-border); border-radius:10px; padding:9px 14px; color:var(--qh-text-dim);}
.qh-search input{background:none; border:none; outline:none; color:var(--qh-text); width:100%; font-size:14px;}
.qh-topbar-actions{display:flex; align-items:center; gap:12px; margin-left:auto;}
.qh-user-chip{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600;}
.qh-user-chip img{border-radius:50%;}

/* Buttons */
.qh-btn{display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; font-weight:600; font-size:14px; border:1px solid transparent; transition:.15s;}
.qh-btn-primary{background:var(--qh-primary); color:#fff;}
.qh-btn-primary:hover{background:var(--qh-primary-dark); color:#fff;}
.qh-btn-outline{border-color:var(--qh-border); color:var(--qh-text);}
.qh-btn-outline:hover{background:var(--qh-panel-light);}
.qh-btn-light{background:#fff; color:#111;}
.qh-btn-ghost{color:#fff; border-color:rgba(255,255,255,.4);}
.qh-btn-block{width:100%; justify-content:center;}

/* Ads */
.qh-ad-slot{position:relative; background:var(--qh-panel); border:1px dashed var(--qh-border); border-radius:var(--qh-radius); padding:16px; margin:20px 0; text-align:center; overflow:hidden;}
.qh-ad-label{position:absolute; top:6px; left:12px; font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--qh-text-dim);}

/* Hero */
.qh-hero{display:flex; align-items:center; justify-content:space-between; background:linear-gradient(120deg,#1c1440,#0c1220 70%); border-radius:var(--qh-radius); padding:40px; margin-bottom:24px; gap:24px; overflow:hidden;}
.qh-hero-text h1{font-size:34px; color:#fff; max-width:520px; margin-bottom:14px;}
.qh-hero-text p{color:var(--qh-text-dim); max-width:480px; margin-bottom:20px;}
.qh-hero-actions{display:flex; gap:12px;}
.qh-hero-media{width:280px; flex-shrink:0; display:flex; justify-content:center;}
.qh-hero-media img{border-radius:var(--qh-radius);}
.qh-hero-icon{font-size:120px; color:var(--qh-gold); opacity:.85;}

/* Section headings */
.qh-section{margin:40px 0;}
.qh-section-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.qh-section-title{font-size:20px; color:#fff; display:flex; align-items:center; gap:10px;}
.qh-section-title-center{text-align:center; font-size:28px; color:#fff;}
.qh-eyebrow{text-align:center; color:var(--qh-primary); text-transform:uppercase; font-size:12px; letter-spacing:.1em; font-weight:700; margin-bottom:6px;}
.qh-see-all{color:var(--qh-primary); font-weight:600; font-size:14px; display:flex; align-items:center; gap:6px;}

/* Category chips */
.qh-cat-chip-row{display:flex; gap:14px; flex-wrap:wrap;}
.qh-cat-chip{--qh-accent:#6c5ce7; display:flex; flex-direction:column; align-items:center; gap:10px; background:linear-gradient(160deg,var(--qh-accent) 0%,var(--qh-bg-alt) 130%); padding:20px 26px; border-radius:var(--qh-radius); min-width:140px; font-weight:700; color:#fff; text-align:center; transition:.2s;}
.qh-cat-chip:hover{transform:translateY(-3px);}
.qh-cat-chip i{font-size:26px;}

/* Card grid */
.qh-card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.qh-related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.qh-card{background:var(--qh-panel); border:1px solid var(--qh-border); border-radius:var(--qh-radius); overflow:hidden; display:block; transition:.15s;}
.qh-card:hover{border-color:var(--qh-primary); transform:translateY(-2px);}
.qh-card-thumb{position:relative; height:140px; background:var(--qh-panel-light);}
.qh-card-thumb img{width:100%; height:100%; object-fit:cover;}
.qh-card-thumb-fallback{width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:40px; color:var(--qh-primary);}
.qh-card-badge{position:absolute; top:10px; left:10px; font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px;}
.qh-card-body{padding:16px;}
.qh-card-cat{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--qh-primary); font-weight:700;}
.qh-card-title{font-size:15px; margin:6px 0 10px; color:#fff;}
.qh-card-meta{font-size:12px; color:var(--qh-text-dim); margin-bottom:12px;}
.qh-card-cta{display:block; text-align:center; background:var(--qh-primary); color:#fff; padding:8px; border-radius:8px; font-weight:600; font-size:13px;}

/* Badges */
.qh-badges{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.qh-badge{font-size:11px; font-weight:700; padding:4px 12px; border-radius:20px; text-transform:capitalize;}
.qh-badge-easy{background:#16a34a33; color:#4ade80;}
.qh-badge-medium{background:#f4b94233; color:#f4b942;}
.qh-badge-hard{background:#ef444433; color:#f87171;}
.qh-badge-featured{background:#a855f733; color:#c084fc;}
.qh-badge-popular{background:#3b82f633; color:#60a5fa;}

/* Top players */
.qh-players-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.qh-player-card{background:linear-gradient(160deg,#8e44ec,#2d1b69); border-radius:var(--qh-radius); padding:22px; text-align:center; position:relative; color:#fff;}
.qh-player-rank{position:absolute; top:14px; left:14px; font-weight:800; font-size:13px;}
.qh-player-avatar{width:70px; height:70px; border-radius:50%; overflow:hidden; margin:0 auto 12px; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:26px;}
.qh-player-avatar img{width:100%; height:100%; object-fit:cover;}
.qh-player-stats{display:flex; justify-content:center; gap:14px; font-size:12px; opacity:.9; margin-top:8px;}

/* How it works */
.qh-steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:30px;}
.qh-step{background:var(--qh-panel); border-radius:var(--qh-radius); padding:26px; text-align:center; position:relative;}
.qh-step-num{position:absolute; top:14px; right:18px; font-weight:800; color:var(--qh-border);}
.qh-step i{font-size:30px; color:var(--qh-primary); margin-bottom:12px;}
.qh-step h4{color:#fff;}
.qh-step p{color:var(--qh-text-dim); font-size:14px;}

/* Breadcrumb */
.qh-breadcrumb{font-size:13px; color:var(--qh-text-dim); margin-bottom:18px;}
.qh-breadcrumb a{color:var(--qh-text-dim);}
.qh-breadcrumb a:hover{color:var(--qh-primary);}

/* Single hero */
.qh-single-hero{border-radius:var(--qh-radius); overflow:hidden; position:relative; margin-bottom:24px;}
.qh-single-hero-img{width:100%; max-height:380px; object-fit:cover;}
.qh-single-hero-overlay{padding:20px 4px 0;}
.qh-single-title{font-size:30px; color:#fff; margin:8px 0 12px;}
.qh-meta-row{display:flex; gap:18px; flex-wrap:wrap; color:var(--qh-text-dim); font-size:14px;}
.qh-meta-row i{margin-right:6px; color:var(--qh-primary);}

/* Single layout */
.qh-single-layout{display:grid; grid-template-columns:1fr 340px; gap:28px; align-items:start; margin-top:24px;}
.qh-tabs{display:flex; gap:6px; border-bottom:1px solid var(--qh-border); margin-bottom:22px;}
.qh-tab-btn{background:none; border:none; color:var(--qh-text-dim); font-weight:600; font-size:14.5px; padding:12px 18px; border-bottom:2px solid transparent;}
.qh-tab-btn.active{color:#fff; border-color:var(--qh-primary);}
.qh-article-content{color:var(--qh-text-dim); font-size:15px;}
.qh-article-content h2{color:#fff; font-size:20px;}

/* Info box (sidebar) */
.qh-info-box{background:var(--qh-panel); border:1px solid var(--qh-border); border-radius:var(--qh-radius); padding:22px; margin-bottom:20px;}
.qh-spots-row{display:flex; justify-content:space-between; font-size:13px; color:var(--qh-text-dim); margin-bottom:8px;}
.qh-progress{height:8px; background:var(--qh-panel-light); border-radius:20px; overflow:hidden;}
.qh-progress-bar{height:100%; background:var(--qh-primary);}
.qh-spots-warning{color:#f87171; font-size:12.5px; margin-top:8px;}
.qh-info-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:18px 0; padding:18px 0; border-top:1px solid var(--qh-border); border-bottom:1px solid var(--qh-border);}
.qh-info-grid span{display:block; font-size:11px; color:var(--qh-text-dim); text-transform:uppercase; letter-spacing:.05em;}
.qh-info-grid strong{font-size:14.5px; color:#fff;}
.qh-creator-row{display:flex; align-items:center; gap:10px; margin-bottom:18px;}
.qh-creator-row img{border-radius:50%;}
.qh-creator-row span{display:block; font-size:12px; color:var(--qh-text-dim);}
.qh-icon-actions{display:flex; gap:10px; margin-top:12px;}
.qh-icon-actions button{flex:1; background:var(--qh-panel-light); border:1px solid var(--qh-border); color:var(--qh-text-dim); border-radius:8px; padding:9px 0;}

/* Leaderboard table */
.qh-leaderboard-table{width:100%; border-collapse:collapse;}
.qh-leaderboard-table th, .qh-leaderboard-table td{padding:12px; border-bottom:1px solid var(--qh-border); text-align:left; font-size:14px;}
.qh-leaderboard-table th{color:var(--qh-text-dim); font-size:12px; text-transform:uppercase;}

/* Quiz player */
.qh-quiz-player{background:var(--qh-panel); border-radius:var(--qh-radius); padding:26px; border:1px solid var(--qh-border);}
.qh-quiz-name-gate{margin-bottom:18px;}
.qh-quiz-name-gate label{display:block; font-size:13px; color:var(--qh-text-dim); margin-bottom:6px;}
.qh-quiz-name-gate input{width:100%; padding:10px 14px; border-radius:8px; border:1px solid var(--qh-border); background:var(--qh-bg-alt); color:#fff;}
.qh-quiz-progress-wrap{display:flex; align-items:center; gap:14px; margin-bottom:22px;}
.qh-quiz-progress{flex:1; height:8px; background:var(--qh-panel-light); border-radius:20px; overflow:hidden;}
.qh-quiz-progress-bar{height:100%; width:0%; background:var(--qh-primary); transition:width .25s;}
.qh-quiz-progress-text{font-size:13px; color:var(--qh-text-dim); white-space:nowrap;}
.qh-quiz-timer{font-size:13px; color:var(--qh-gold); white-space:nowrap;}
.qh-quiz-question{font-size:19px; color:#fff; margin-bottom:20px;}
.qh-quiz-options{display:flex; flex-direction:column; gap:12px;}
.qh-quiz-option{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:10px; border:1px solid var(--qh-border); background:var(--qh-bg-alt); cursor:pointer; transition:.15s;}
.qh-quiz-option:hover{border-color:var(--qh-primary);}
.qh-quiz-option input{accent-color:var(--qh-primary);}
.qh-quiz-option input:checked ~ .qh-option-text{color:#fff;}
.qh-quiz-option:has(input:checked){border-color:var(--qh-primary); background:rgba(108,92,231,.12);}
.qh-option-letter{width:26px; height:26px; border-radius:50%; background:var(--qh-panel-light); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; flex-shrink:0;}
.qh-option-text{color:var(--qh-text-dim); font-size:14.5px;}
.qh-quiz-nav{display:flex; justify-content:space-between; margin-top:24px;}
.qh-quiz-ad-step{text-align:center; padding:20px 0;}
.qh-quiz-ad-step .qh-btn{margin-top:14px;}

/* Results */
.qh-result-score{text-align:center; margin-bottom:24px;}
.qh-result-circle{width:120px; height:120px; border-radius:50%; background:conic-gradient(var(--qh-primary) calc(var(--p,0)*1%), var(--qh-panel-light) 0); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:24px; font-weight:800; color:#fff;}
.qh-result-heading{color:#fff; font-size:22px;}
.qh-result-sub{color:var(--qh-text-dim);}
.qh-result-breakdown{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.qh-result-item{padding:12px 16px; border-radius:10px; border:1px solid var(--qh-border); font-size:14px;}
.qh-result-item.correct{border-color:var(--qh-green); background:rgba(34,197,94,.08);}
.qh-result-item.incorrect{border-color:var(--qh-red); background:rgba(239,68,68,.08);}

/* Archive header */
.qh-archive-header{display:flex; align-items:center; gap:20px; background:linear-gradient(120deg,var(--qh-accent,#6c5ce7)33,var(--qh-bg-alt) 60%); border-radius:var(--qh-radius); padding:30px; margin-bottom:26px;}
.qh-archive-icon{width:64px; height:64px; border-radius:16px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; font-size:28px; color:#fff; flex-shrink:0;}
.qh-archive-header h1{color:#fff; margin-bottom:4px;}
.qh-archive-header p{color:rgba(255,255,255,.7); margin:0 0 6px;}
.qh-archive-count{font-size:12px; color:var(--qh-text-dim);}
.qh-archive-layout{display:grid; grid-template-columns:1fr 300px; gap:26px;}

/* Footer */
.qh-footer{background:var(--qh-bg-alt); border-top:1px solid var(--qh-border); margin-top:60px; padding:40px 32px 0;}
.qh-footer-newsletter{display:flex; align-items:center; justify-content:space-between; gap:24px; background:linear-gradient(120deg,#4527a0,#6c5ce7); border-radius:var(--qh-radius); padding:30px; margin-bottom:40px; color:#fff; flex-wrap:wrap;}
.qh-footer-newsletter h3{margin-bottom:6px;}
.qh-footer-newsletter p{opacity:.85; max-width:420px; margin:0;}
.qh-newsletter-form{display:flex; gap:10px;}
.qh-newsletter-form input{padding:12px 16px; border-radius:8px; border:none; min-width:220px;}
.qh-newsletter-form button{padding:12px 20px; border-radius:8px; border:none; background:#fff; color:#4527a0; font-weight:700; display:flex; gap:8px; align-items:center;}
.qh-footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding-bottom:30px;}
.qh-footer-col h4{color:#fff; font-size:14px; margin-bottom:14px;}
.qh-footer-col ul li{margin-bottom:8px;}
.qh-footer-col ul li a{color:var(--qh-text-dim); font-size:14px;}
.qh-footer-col p{color:var(--qh-text-dim); font-size:14px; margin-top:10px;}
.qh-footer-contact li{display:flex; gap:8px; align-items:flex-start; color:var(--qh-text-dim); font-size:13px; margin-bottom:10px;}
.qh-footer-bottom{display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--qh-border); padding:20px 0; color:var(--qh-text-dim); font-size:13px; flex-wrap:wrap; gap:10px;}
.qh-footer-legal{display:flex; gap:18px;}

.qh-empty-state{color:var(--qh-text-dim); text-align:center; padding:40px 0;}
.qh-404{text-align:center; padding:80px 0;}
.qh-404 h1{font-size:80px; color:var(--qh-primary);}

/* Responsive */
@media (max-width: 1100px){
	.qh-single-layout, .qh-archive-layout{grid-template-columns:1fr;}
	.qh-card-grid{grid-template-columns:repeat(2,1fr);}
	.qh-players-grid{grid-template-columns:repeat(2,1fr);}
	.qh-steps-grid{grid-template-columns:1fr;}
	.qh-related-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 780px){
	.qh-sidebar{position:fixed; left:-280px; top:0; transition:.25s; z-index:100;}
	.qh-sidebar.qh-open{left:0;}
	.qh-sidebar-toggle{display:block;}
	.qh-content{padding:70px 16px 40px;}
	.qh-topbar{padding:12px 16px 12px 64px;}
	.qh-card-grid, .qh-related-grid, .qh-players-grid{grid-template-columns:1fr;}
	.qh-hero{flex-direction:column; text-align:center;}
	.qh-footer-grid{grid-template-columns:1fr 1fr;}
}