/* =========================================================================
   Daily Quiz — inner pages, deep redesign (3.68)
   Components shared by every inner page (pg-*) and page-specific layouts.
   Loaded after site-v2.css. Same tokens as the homepage (--hv-*).
   ========================================================================= */

/* ---------- page head band ---------- */
html body .pg-head {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(1rem, 3vw, 2.5rem); align-items: center;
	padding: clamp(1.5rem, 4vw, 2.75rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: 28px; color: #fff; background: var(--hv-ink); margin: 0 0 1.25rem;
}
html body .pg-head--lapis { background: var(--hv-lapis); }
html body .pg-head--firooze { background: var(--hv-firooze); }
html body .pg-head--anar { background: var(--hv-anar); }
html body .pg-head--saffron { background: var(--hv-saffron); color: var(--hv-ink); }
html body .pg-head::before {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background: radial-gradient(60% 120% at 0% 100%, rgba(255, 255, 255, .09), transparent 60%), radial-gradient(40% 80% at 100% 0%, rgba(255, 179, 31, .16), transparent 70%);
}
html body .pg-head--saffron::before { background: radial-gradient(60% 120% at 0% 100%, rgba(255, 255, 255, .35), transparent 60%); }
html body .pg-head-star { position: absolute; z-index: -1; width: clamp(220px, 30vw, 360px); inset-inline-end: -70px; top: 50%; transform: translateY(-50%) rotate(12deg); color: rgba(255, 255, 255, .13); pointer-events: none; }
html body .pg-head--saffron .pg-head-star { color: rgba(19, 24, 58, .12); }
html body .pg-eyebrow {
	display: inline-flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 800; letter-spacing: 0;
	padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .12); color: inherit; margin-bottom: .8rem;
}
html body .pg-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--hv-saffron); box-shadow: 0 0 0 4px rgba(255, 179, 31, .22); }
html body .pg-head--saffron .pg-eyebrow { background: rgba(19, 24, 58, .1); }
html body .pg-head--saffron .pg-eyebrow::before { background: var(--hv-ink); box-shadow: none; }
html body .pg-title {
	display: flex; align-items: center; gap: .7rem; margin: 0; color: inherit !important;
	font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: clamp(2rem, 4.4vw, 3.1rem) !important; line-height: 1.25 !important; letter-spacing: 0 !important;
}
html body .pg-title-ico { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 16px; background: var(--hv-saffron); color: var(--hv-ink); }
html body .pg-head--saffron .pg-title-ico { background: var(--hv-ink); color: var(--hv-saffron); }
html body .pg-sub { margin: .65rem 0 0; max-width: 46rem; font-size: 1rem; line-height: 2; color: inherit; opacity: .82; }
html body .pg-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.15rem; }
html body .pg-stats { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.1rem 0 0; }
html body .pg-stats li { display: inline-flex; align-items: baseline; gap: .4rem; padding: .45rem .85rem; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: .85rem; }
html body .pg-stats b { font-family: var(--hv-display); font-weight: 400; font-size: 1.25rem; color: var(--hv-saffron); }
html body .pg-head--saffron .pg-stats li { background: rgba(19, 24, 58, .08); }
html body .pg-head--saffron .pg-stats b { color: var(--hv-ink); }
html body .pg-head-side { position: relative; min-width: 0; }

/* buttons inside the band */
html body .pg-chip-link, html body .pg-head .pg-btn {
	display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 14px;
	background: rgba(255, 255, 255, .12); color: #fff !important; font-weight: 800; font-size: .9rem; text-decoration: none !important;
	border: 1px solid rgba(255, 255, 255, .18); transition: background .2s ease, transform .2s ease;
}
html body .pg-chip-link:hover, html body .pg-head .pg-btn:hover { background: #fff !important; color: var(--hv-ink) !important; }
html body .pg-head .pg-btn-main { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; border-color: var(--hv-saffron); box-shadow: 0 5px 0 #c98400; }
html body .pg-head .pg-btn-main:hover { background: #ffc24d !important; color: var(--hv-ink) !important; transform: translateY(-1px); }
html body .pg-head--saffron .pg-chip-link { background: rgba(19, 24, 58, .08); color: var(--hv-ink) !important; border-color: rgba(19, 24, 58, .14); }
html body .pg-head--saffron .pg-chip-link:hover { background: var(--hv-ink) !important; color: #fff !important; }

/* search pill */
html body .pg-search { display: flex; align-items: center; gap: .55rem; width: min(22rem, 100%); padding: 0 1rem; min-height: 3.1rem; border-radius: 16px; background: #fff; color: var(--hv-muted); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .5); }
html body .pg-search input { flex: 1; min-width: 0; border: 0 !important; outline: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; min-height: 3.1rem; font: inherit; font-weight: 600; color: var(--hv-ink); }

/* ---------- segmented control ---------- */
html body .pg-seg { display: flex; gap: .3rem; padding: .35rem; margin: 0 0 1.25rem; border-radius: 18px; background: #fff; border: 1px solid var(--hv-line); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html body .pg-seg a, html body .pg-seg button {
	flex: none; display: inline-flex; align-items: center; gap: .4rem; min-height: 2.6rem; padding: 0 1.25rem; border-radius: 13px; border: 0;
	color: var(--hv-muted) !important; background: transparent !important; font-weight: 800; font-size: .92rem; text-decoration: none !important; cursor: pointer; transition: background .2s, color .2s;
}
html body .pg-seg a:hover, html body .pg-seg button:hover { color: var(--hv-ink) !important; background: var(--hv-paper) !important; }
html body .pg-seg a.is-active, html body .pg-seg button.is-active { background: var(--hv-ink) !important; color: #fff !important; }

/* ---------- surfaces ---------- */
html body .pg-board, html body .pg-card { background: #fff; border: 1px solid var(--hv-line); border-radius: 24px; padding: clamp(1rem, 2.5vw, 1.5rem); }
html body .pg-section-title { display: flex; align-items: center; gap: .6rem; margin: 2rem 0 1rem; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.6rem !important; color: var(--hv-ink) !important; }
html body .pg-section-title::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(to left, var(--hv-line), transparent); }

/* ---------- "my rank" strip ---------- */
html body .pg-me { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1.25rem; padding: .6rem; border-radius: 22px; background: var(--hv-saffron); }
html body .pg-me > div { display: flex; flex-direction: column; justify-content: center; gap: .1rem; padding: .7rem 1rem; border-radius: 16px; }
html body .pg-me span { font-size: .78rem; font-weight: 800; color: rgba(19, 24, 58, .7); }
html body .pg-me b { font-family: var(--hv-display); font-weight: 400; font-size: 1.6rem; color: var(--hv-ink); line-height: 1.2; }
html body .pg-me-rank { background: var(--hv-ink); min-width: 7.5rem; }
html body .pg-me-rank span { color: rgba(255, 255, 255, .7); }
html body .pg-me-rank b { color: var(--hv-saffron); font-size: 2.1rem; }
html body .pg-me-stat { background: rgba(255, 255, 255, .45); }

/* ---------- podium ---------- */
html body .pg-podium { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: clamp(.5rem, 2vw, 1.25rem); max-width: 760px; margin: .5rem auto 1.5rem; padding: 0; }
html body .pg-podium li { min-width: 0; }
html body .pg-podium a { display: flex; flex-direction: column; align-items: center; gap: .35rem; text-decoration: none !important; color: var(--hv-ink) !important; text-align: center; }
html body .pg-podium img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--hv-paper); border: 4px solid #fff; box-shadow: 0 0 0 3px var(--pd, var(--hv-line)); }
html body .pg-podium-1 img { width: 92px; height: 92px; }
html body .pg-podium-crown { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--pd); color: #fff; margin-bottom: -.2rem; }
html body .pg-podium b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: .95rem; }
html body .pg-podium-score { display: flex; flex-direction: column; font-family: var(--hv-display); font-size: 1.5rem; line-height: 1.1; color: var(--hv-ink); }
html body .pg-podium-score small { font-family: var(--hv-text, inherit); font-size: .72rem; font-weight: 700; color: var(--hv-muted); }
html body .pg-podium-step { display: grid; place-items: center; width: 100%; margin-top: .4rem; border-radius: 18px 18px 6px 6px; background: var(--pd); color: #fff; font-family: var(--hv-display); font-size: 2.2rem; }
html body .pg-podium-1 { --pd: var(--hv-saffron); }
html body .pg-podium-1 .pg-podium-step { height: 132px; color: var(--hv-ink); }
html body .pg-podium-1 .pg-podium-crown { color: var(--hv-ink); }
html body .pg-podium-2 { --pd: #8a93b8; }
html body .pg-podium-2 .pg-podium-step { height: 96px; }
html body .pg-podium-3 { --pd: #c7773b; }
html body .pg-podium-3 .pg-podium-step { height: 72px; }
html body .pg-podium li.is-me b::after { content: " (شما)"; color: var(--hv-lapis); }
html body .pg-podium a:hover img { transform: translateY(-3px); }
html body .pg-podium img { transition: transform .25s ease; }

/* ---------- leaderboard table as a list ---------- */
html body .dq-stack.pg-lb { max-width: 1080px; margin-inline: auto; display: block; }
html body .pg-lb .dq-lb-tablewrap { overflow: visible !important; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0 !important; }
html body .pg-lb .dq-lb-table { width: 100%; border-collapse: separate !important; border-spacing: 0 .45rem !important; background: transparent !important; }
html body .pg-lb .dq-lb-table thead th { background: transparent !important; border: 0 !important; color: var(--hv-muted) !important; font-size: .78rem; font-weight: 800; padding: 0 1rem .2rem !important; text-align: start; }
html body .pg-lb .dq-lb-table tbody tr { background: var(--hv-paper) !important; box-shadow: none !important; transition: background .2s, transform .2s; }
html body .pg-lb .dq-lb-table tbody tr:hover { background: var(--hv-lapis-soft) !important; }
html body .pg-lb .dq-lb-table tbody td { border: 0 !important; padding: .7rem 1rem !important; background: transparent !important; vertical-align: middle; }
html body .pg-lb .dq-lb-table tbody td:first-child { border-radius: 0 16px 16px 0; }
html body .pg-lb .dq-lb-table tbody td:last-child { border-radius: 16px 0 0 16px; }
html body .pg-lb .dq-lb-table tr.is-me { background: var(--hv-ink) !important; }
html body .pg-lb .dq-lb-table tr.is-me td, html body .pg-lb .dq-lb-table tr.is-me td * { color: #fff !important; }
html body .pg-lb .dq-lb-table tr.is-me .dq-me-badge { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .pg-lb .dq-rank-num { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 12px; background: #fff; color: var(--hv-ink); font-weight: 900; }
html body .pg-lb tr.is-me .dq-rank-num { background: rgba(255, 255, 255, .14); }
html body .pg-lb .dq-lb-user { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; color: var(--hv-ink) !important; text-decoration: none !important; }
html body .pg-lb .dq-lb-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #fff; border: 2px solid #fff; }
html body .pg-lb .dq-lb-score-cell b { font-family: var(--hv-display); font-weight: 400; font-size: 1.3rem; color: var(--hv-lapis); }
html body .pg-lb .dq-lb-location-cell { color: var(--hv-muted); font-size: .85rem; }
html body .pg-lb .dq-lb-location-cell svg { color: var(--hv-firooze); }
html body .pg-lb .dq-pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 1rem; flex-wrap: wrap; }
html body .pg-lb .dq-pagination a { display: grid; place-items: center; min-width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--hv-paper); color: var(--hv-ink) !important; font-weight: 800; text-decoration: none !important; }
html body .pg-lb .dq-pagination a.is-active { background: var(--hv-ink); color: #fff !important; }
html body .pg-lb .pg-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
html body .pg-lb .pg-filter .dq-input { flex: 1 1 12rem; }
html body .dq-find-state { text-align: center; padding: 2.5rem 1rem; color: var(--hv-muted); font-weight: 700; background: var(--hv-paper); border-radius: 18px; }

@media (max-width: 760px) {
	html body .pg-head { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
	html body .pg-head-side, html body .pg-search { width: 100%; }
	html body .pg-title-ico { width: 2.5rem; height: 2.5rem; border-radius: 13px; }
	html body .pg-me { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	html body .pg-me-rank { grid-column: 1 / -1; flex-direction: row !important; align-items: center; justify-content: space-between !important; }
	html body .pg-me > div { padding: .55rem .75rem; }
	html body .pg-me b { font-size: 1.3rem; }
	html body .pg-podium img { width: 54px; height: 54px; }
	html body .pg-podium-1 img { width: 68px; height: 68px; }
	html body .pg-podium-score { font-size: 1.2rem; }
	html body .pg-podium-1 .pg-podium-step { height: 96px; }
	html body .pg-podium-2 .pg-podium-step { height: 70px; }
	html body .pg-podium-3 .pg-podium-step { height: 52px; }
	html body .pg-podium-step { font-size: 1.6rem; }
	html body .pg-lb .dq-lb-table thead { display: none; }
	html body .pg-lb .dq-lb-table, html body .pg-lb .dq-lb-table tbody { display: block !important; min-width: 0 !important; }
	html body .pg-lb .dq-lb-table tbody tr { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .2rem .7rem; padding: .6rem .8rem; border-radius: 16px; margin-bottom: .45rem; }
	html body .pg-lb .dq-lb-table tbody td { display: block !important; padding: 0 !important; border-radius: 0 !important; }
	html body .pg-lb .dq-lb-table tbody td::before { display: none !important; }
	html body .pg-lb .dq-lb-rank-cell { grid-row: span 2; }
	html body .pg-lb .dq-lb-user-cell { min-width: 0; display: flex !important; align-items: center; gap: .4rem; }
	html body .pg-lb .dq-lb-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	html body .pg-lb .dq-lb-user img { width: 34px; height: 34px; }
	html body .pg-lb .dq-lb-score-cell, html body .pg-lb .dq-lb-academic-table .dq-lb-score-cell { grid-column: 3; grid-row: 1 / span 2; text-align: center; }
	html body .pg-lb .dq-lb-location-cell { grid-column: 2; font-size: .78rem; }
	html body .pg-lb .dq-lb-table tbody td.dq-lb-plays-cell { display: none !important; }
}

/* =========================================================================
   Quiz listing (/quizzes/, /darsi/ …)
   ========================================================================= */
html body .dq-stack.pg-quizzes, html body .dq-stack.pg-darsi { display: block; }
html body .pg-quizzes > * + *, html body .pg-darsi > * + * { margin-top: 1.25rem; }

/* duel ticket in the page head */
html body .pg-duel-ticket {
	position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico live" "ico title" "ico meta" "go go";
	column-gap: 1rem; row-gap: .15rem; align-items: center; width: min(22rem, 100%); padding: 1.15rem 1.25rem; border-radius: 22px;
	background: var(--hv-saffron); color: var(--hv-ink) !important; text-decoration: none !important; box-shadow: 0 8px 0 #c98400, 0 30px 50px -30px rgba(0, 0, 0, .7);
	transform: rotate(-2deg); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease;
}
html body .pg-duel-ticket::before, html body .pg-duel-ticket::after { content: ""; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: var(--hv-ink); transform: translateY(-50%); }
html body .pg-duel-ticket::before { right: -11px; }
html body .pg-duel-ticket::after { left: -11px; }
html body .pg-duel-ticket:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 11px 0 #c98400, 0 36px 60px -30px rgba(0, 0, 0, .75); }
html body .pg-duel-live { grid-area: live; display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; font-weight: 900; color: var(--hv-anar); }
html body .pg-duel-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--hv-anar); animation: pg-pulse 1.6s ease-in-out infinite; }
@keyframes pg-pulse { 50% { box-shadow: 0 0 0 6px rgba(226, 61, 91, .2); } }
html body .pg-duel-ico { grid-area: ico; display: grid; place-items: center; width: 4rem; height: 4rem; border-radius: 18px; background: var(--hv-ink); color: var(--hv-saffron); }
html body .pg-duel-ticket b { grid-area: title; font-family: var(--hv-display); font-weight: 400; font-size: 1.45rem; line-height: 1.3; }
html body .pg-duel-ticket small { grid-area: meta; font-size: .78rem; font-weight: 700; color: rgba(19, 24, 58, .72); }
html body .pg-duel-go { grid-area: go; display: flex; align-items: center; justify-content: center; gap: .4rem; margin-top: .9rem; padding-top: .8rem; border-top: 2px dashed rgba(19, 24, 58, .25); font-weight: 900; }

/* arcade modes: one row of five tiles */
html body .dq-listing-intro { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin: 2rem 0 1rem !important; padding: 0 !important; background: none !important; border: 0 !important; box-shadow: none !important; }
html body .dq-listing-intro h2 { margin: 0; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.6rem !important; color: var(--hv-ink) !important; }
html body .dq-listing-intro p { margin: .2rem 0 0; color: var(--hv-muted); font-size: .9rem; }
html body .dq-arcade-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: .8rem !important; }
html body .dq-arcade-card {
	position: relative; overflow: hidden; isolation: isolate; display: flex !important; flex-direction: column; align-items: flex-start; gap: .35rem;
	min-height: 0 !important; padding: 1.1rem 1.1rem 1rem !important; color: #fff !important; text-decoration: none !important;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease !important;
}
html body .dq-arcade-card::before, html body .dq-arcade-card::after { display: none !important; }
html body .dq-arcade-card:hover { transform: translateY(-4px); box-shadow: 0 22px 36px -24px rgba(19, 24, 58, .8) !important; }
html body .dq-arcade-icon { display: grid !important; place-items: center; width: 3rem !important; height: 3rem !important; border-radius: 15px !important; background: rgba(255, 255, 255, .18) !important; color: #fff !important; margin-bottom: .4rem; }
html body .dq-arcade-card strong { font-family: var(--hv-display); font-weight: 400; font-size: 1.3rem; line-height: 1.3; color: #fff !important; }
html body .dq-arcade-card p { margin: 0 !important; font-size: .8rem !important; line-height: 1.8; color: rgba(255, 255, 255, .82) !important; }
html body .dq-arcade-card em { margin-top: auto; padding-top: .6rem; display: inline-flex; align-items: center; gap: .3rem; font-style: normal; font-weight: 900; font-size: .82rem; color: #fff !important; }
html body .dq-arcade-card.arcade-word, html body .dq-arcade-card.arcade-word * { color: var(--hv-ink) !important; }
html body .dq-arcade-card.arcade-word { background: var(--hv-saffron) !important; }
html body .dq-arcade-card.arcade-word .dq-arcade-icon { background: rgba(19, 24, 58, .1) !important; }
html body .dq-arcade-card.arcade-word p { color: rgba(19, 24, 58, .75) !important; }

/* category chips */
html body .dq-tabs.pg-chips { display: flex !important; flex-wrap: wrap; gap: .45rem !important; padding: 0 !important; margin: 0 0 .5rem !important; background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible !important; }
html body .dq-tabs.pg-chips > a { flex: none; min-height: 2.5rem; padding: 0 1.05rem !important; border-radius: 999px !important; border: 1.5px solid var(--hv-line) !important; background: #fff !important; color: var(--hv-ink) !important; font-weight: 800; font-size: .88rem; display: inline-flex; align-items: center; box-shadow: none !important; }
html body .dq-tabs.pg-chips > a:hover { border-color: var(--hv-ink) !important; background: #fff !important; color: var(--hv-ink) !important; }
html body .dq-tabs.pg-chips > a.is-active, html body .dq-tabs.pg-chips > a.is-active:hover { background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; color: #fff !important; }

/* listing layout */
html body .pg-quizzes .dq-layout, html body .pg-darsi .dq-layout { gap: 1.5rem !important; align-items: flex-start; }
html body .pg-quizzes .dq-aside, html body .pg-darsi .dq-aside { position: sticky; top: 96px; }
html body .dq-game-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important; gap: 1rem !important; }

/* =========================================================================
   Game card (every quiz listing)
   ========================================================================= */
html body .dq-game-card {
	--gc: var(--hv-lapis); --gc-ink: #fff;
	position: relative; display: flex !important; flex-direction: column; overflow: hidden; min-width: 0;
	background: #fff !important; border: 1px solid var(--hv-line) !important; border-radius: 22px !important; box-shadow: none !important;
	transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease !important;
}
html body .dq-game-card:hover { transform: translateY(-4px); border-color: transparent !important; box-shadow: 0 26px 44px -28px rgba(19, 24, 58, .55) !important; }
html body .dq-game-card.dq-game-tone-1 { --gc: var(--hv-lapis); }
html body .dq-game-card.dq-game-tone-2 { --gc: var(--hv-firooze); }
html body .dq-game-card.dq-game-tone-3 { --gc: var(--hv-anar); }
html body .dq-game-card.dq-game-tone-4 { --gc: var(--hv-saffron); --gc-ink: var(--hv-ink); }
html body .dq-game-card.dq-game-tone-5 { --gc: var(--hv-ink); }
html body .dq-game-card.dq-game-tone-6 { --gc: #6a3fd1; }
html body .dq-game-cover {
	position: relative; display: flex !important; flex-direction: column; justify-content: space-between; height: 150px !important; min-height: 0 !important;
	margin: .5rem .5rem 0; padding: .8rem .9rem !important; border-radius: 16px !important; overflow: hidden; isolation: isolate;
	background-color: var(--gc) !important; background-size: cover !important; background-position: center !important; color: var(--gc-ink) !important; text-decoration: none !important;
}
html body .dq-game-cover::after {
	content: ""; position: absolute; z-index: -1; width: 210px; height: 210px; left: -50px; bottom: -80px; opacity: .2;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 4l27 38 46-8-8 46 38 27-38 27 8 46-46-8-27 38-27-38-46 8 8-46L4 100l38-27-8-46 46 8z' fill='none' stroke='white' stroke-width='3'/%3E%3Cpath d='M100 34l18 26 31-6-6 31 26 18-26 18 6 31-31-6-18 26-18-26-31 6 6-31-26-18 26-18-6-31 31 6z' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
html body .dq-game-tone-4 .dq-game-cover::after { filter: invert(1); opacity: .14; }
html body .dq-game-card:hover .dq-game-cover::after { transform: rotate(22deg) scale(1.05); }
html body .dq-game-orb { display: none !important; }
html body .dq-game-cover-top, html body .dq-game-cover-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; position: relative; z-index: 1; }
html body .dq-game-live, html body .dq-game-level, html body .dq-game-cover-foot > span:first-child {
	display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 800;
	background: rgba(255, 255, 255, .2) !important; color: var(--gc-ink) !important; border: 0 !important; backdrop-filter: blur(6px);
}
html body .dq-game-tone-4 .dq-game-live, html body .dq-game-tone-4 .dq-game-level, html body .dq-game-tone-4 .dq-game-cover-foot > span:first-child { background: rgba(19, 24, 58, .1) !important; }
html body .dq-game-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
html body .dq-game-symbol {
	position: absolute !important; z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -54%); display: grid; place-items: center; width: 4.2rem; height: 4.2rem;
	border-radius: 20px; background: rgba(255, 255, 255, .16) !important; color: var(--gc-ink) !important; border: 0 !important; box-shadow: none !important;
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}
html body .dq-game-card:hover .dq-game-symbol { transform: translate(-50%, -54%) scale(1.08) rotate(-6deg); }
html body .dq-game-arrow { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: #fff !important; color: var(--hv-ink) !important; }
html body .dq-game-card .dq-game-body { display: flex; flex-direction: column; flex: 1; gap: .45rem; padding: .9rem 1rem 1rem !important; }
html body .dq-game-card .dq-game-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
html body .dq-game-kicker { font-size: .74rem; font-weight: 800; color: var(--gc) !important; }
html body .dq-game-tone-4 .dq-game-kicker { color: #a86d00 !important; }
html body .dq-game-players { display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; color: var(--hv-muted); }
html body .dq-game-card h3 { margin: 0 !important; font-size: 1.05rem !important; font-weight: 900 !important; line-height: 1.7 !important; }
html body .dq-game-card h3 a { color: var(--hv-ink) !important; text-decoration: none !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .dq-game-card .dq-game-body > p { margin: 0 !important; font-size: .84rem !important; line-height: 1.85; color: var(--hv-muted) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .dq-game-specs { display: flex !important; flex-wrap: wrap; gap: .35rem !important; margin-top: auto !important; padding: .55rem 0 0 !important; border: 0 !important; background: none !important; }
html body .dq-game-specs span { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .55rem; border-radius: 9px; background: var(--hv-paper) !important; color: var(--hv-muted) !important; font-size: .74rem; font-weight: 700; border: 0 !important; }
html body .dq-game-specs b { color: var(--hv-ink); }
html body .dq-game-actions { display: flex !important; gap: .45rem !important; margin-top: .6rem; }
html body .dq-game-actions .dq-btn { min-height: 2.75rem !important; border-radius: 13px !important; font-weight: 900 !important; box-shadow: none !important; }
html body .dq-game-start { flex: 1; justify-content: center; background: var(--hv-ink) !important; color: #fff !important; border: 0 !important; }
html body .dq-game-start:hover { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .dq-game-duel { flex: none; background: var(--hv-paper) !important; color: var(--hv-ink) !important; border: 0 !important; padding-inline: .8rem !important; gap: .3rem; }
html body .dq-game-duel:hover { background: var(--hv-anar) !important; color: #fff !important; }
html body .dq-game-card.is-compact .dq-game-cover { height: 118px !important; }
html body .dq-game-card.is-compact .dq-game-symbol { width: 3.4rem; height: 3.4rem; }

/* compact aside leaderboard */
html body :is(.pg-quizzes, .pg-darsi) .dq-aside-card h4 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-family: var(--hv-display); font-weight: 400; font-size: 1.25rem; color: var(--hv-ink); }
html body :is(.pg-quizzes, .pg-darsi) .dq-aside-card h4 svg { color: var(--hv-saffron); }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row { display: flex; align-items: center; gap: .6rem; padding: .55rem .25rem; border-bottom: 1px dashed var(--hv-line); }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row:last-of-type { border-bottom: 0; }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row .num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 10px; background: var(--hv-paper); color: var(--hv-ink); font-weight: 900; font-size: .82rem; flex: none; }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row .num.gold { background: var(--hv-saffron); }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row .num.silver { background: #d9deef; }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row .num.bronze { background: #f0c9a6; }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: var(--hv-ink); }
html body :is(.pg-quizzes, .pg-darsi) .dq-rank-row .score { font-family: var(--hv-display); color: var(--hv-lapis); font-size: 1.1rem; }

@media (max-width: 1100px) {
	html body .dq-arcade-grid { grid-template-columns: repeat(5, minmax(170px, 1fr)) !important; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: thin; }
	html body .dq-arcade-card { scroll-snap-align: start; }
}
@media (max-width: 1023px) {
	html body .pg-quizzes .dq-aside, html body .pg-darsi .dq-aside { position: static; }
}
@media (max-width: 760px) {
	html body .pg-duel-ticket { width: 100%; transform: none; }
	html body .pg-duel-ticket::before, html body .pg-duel-ticket::after { display: none; }
	html body .dq-arcade-grid { grid-template-columns: repeat(5, 72%) !important; margin-inline: -1rem; padding-inline: 1rem; }
}
/* flat tone covers (a real thumbnail, if any, is kept) */
html body .dq-game-cover:not([style*="url("]) { background-image: none !important; }
html body .dq-game-cover::before, html body .dq-game-card::before, html body .dq-game-card::after { display: none !important; content: none !important; }
html body .dq-game-cover[style*="url("] .dq-game-symbol { display: none; }

/* location prompt: a slim inline notice */
html body .dq-geo-prompt { position: relative; display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem !important; border-radius: 18px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; border-inline-start: 4px solid var(--hv-firooze) !important; box-shadow: none !important; }
html body .dq-geo-body { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; flex: 1; padding-inline-end: 2rem; }
html body .dq-geo-body strong { display: inline-flex; align-items: center; gap: .4rem; font-weight: 900; color: var(--hv-ink); }
html body .dq-geo-body strong svg { color: var(--hv-firooze); }
html body .dq-geo-body p { margin: 0 !important; flex: 1 1 16rem; color: var(--hv-muted); font-size: .86rem; }
html body .dq-geo-close { position: absolute; top: .55rem; inset-inline-end: .6rem; width: 2rem; height: 2rem; border-radius: 10px; border: 0; background: var(--hv-paper) !important; color: var(--hv-ink) !important; font-size: 1.2rem; cursor: pointer; }
@media (max-width: 760px) { html body .dq-geo-body .dq-btn { width: 100%; justify-content: center; } }
@media (max-width: 1023px) {
	html body .dq-layout > .dq-aside, html body .dq-layout > .dq-content { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
}

/* darsi: study card in the head + subject tiles */
html body .pg-study-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .15rem; width: 15.5rem; padding: 1.4rem 1.2rem 1.1rem; border-radius: 24px; background: #fff; color: var(--hv-ink); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6); }
html body .pg-study-ring { position: absolute; top: -14px; left: 50%; width: 96px; height: 96px; margin-left: -48px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .5); animation: pg-spin 18s linear infinite; pointer-events: none; }
@keyframes pg-spin { to { transform: rotate(360deg); } }
html body .pg-study-ico { display: grid; place-items: center; width: 4.2rem; height: 4.2rem; margin-top: -2.8rem; margin-bottom: .5rem; border-radius: 22px; background: var(--hv-saffron); color: var(--hv-ink); box-shadow: 0 0 0 6px var(--hv-lapis); }
html body .pg-study-card b { font-family: var(--hv-display); font-weight: 400; font-size: 2.4rem; line-height: 1.1; color: var(--hv-lapis); }
html body .pg-study-card small { font-weight: 800; color: var(--hv-muted); }
html body .pg-study-next { display: inline-flex; align-items: center; gap: .35rem; margin-top: .8rem; padding: .4rem .7rem; border-radius: 10px; background: var(--hv-paper); font-size: .75rem; font-weight: 700; color: var(--hv-ink); }
html body .pg-darsi .pg-head-side { padding-top: 1.6rem; }

html body .pg-darsi .dq-subject-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; gap: .7rem !important; margin-bottom: .5rem; }
html body .pg-darsi .dq-subject-card {
	display: flex !important; flex-direction: column; align-items: flex-start; gap: .3rem; min-height: 0 !important; padding: 1rem !important; border-radius: 18px !important;
	background: #fff !important; border: 1.5px solid var(--hv-line) !important; box-shadow: none !important; color: var(--hv-ink) !important; text-decoration: none !important;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s ease !important;
}
html body .pg-darsi .dq-subject-card:hover { transform: translateY(-3px); border-color: var(--hv-ink) !important; background: #fff !important; }
html body .pg-darsi .dq-subject-icon { display: grid !important; place-items: center; width: 2.7rem !important; height: 2.7rem !important; border-radius: 14px !important; margin-bottom: .35rem; background: var(--hv-lapis-soft) !important; color: var(--hv-lapis) !important; box-shadow: none !important; }
html body .pg-darsi .dq-subject-card.subject-2 .dq-subject-icon { background: #e2f6f3 !important; color: var(--hv-firooze) !important; }
html body .pg-darsi .dq-subject-card.subject-3 .dq-subject-icon { background: #fde8ec !important; color: var(--hv-anar) !important; }
html body .pg-darsi .dq-subject-card.subject-4 .dq-subject-icon { background: #fff3d6 !important; color: #b07400 !important; }
html body .pg-darsi .dq-subject-card strong { font-weight: 900; font-size: 1rem; color: var(--hv-ink) !important; }
html body .pg-darsi .dq-subject-card em { font-style: normal; font-size: .76rem; color: var(--hv-muted) !important; }
html body .pg-darsi .dq-subject-card.is-active { background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; }
html body .pg-darsi .dq-subject-card.is-active * { color: #fff !important; }
html body .pg-darsi .dq-subject-card.is-active .dq-subject-icon { background: rgba(255, 255, 255, .14) !important; }
html body .pg-darsi .dq-layout > .dq-content > .pg-section-title:first-child { margin-top: 0; }
@media (max-width: 760px) {
	html body .pg-study-card { width: 100%; }
	html body .pg-darsi .dq-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
html body .pg-darsi .dq-subject-card::before, html body .pg-darsi .dq-subject-card::after { display: none !important; }
@media (max-width: 760px) {
	html body .pg-darsi .dq-subject-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: .6rem; row-gap: 0; align-items: center; padding: .7rem !important; }
	html body .pg-darsi .dq-subject-icon { grid-row: span 2; margin: 0; width: 2.4rem !important; height: 2.4rem !important; }
	html body .pg-darsi .dq-subject-card em { font-size: .7rem; }
}

/* generic helpers */
html body .pg-seg a[aria-current="page"] { background: var(--hv-ink) !important; color: #fff !important; }
html body .pg-search.pg-search-light { box-shadow: none; border: 1.5px solid var(--hv-line); width: auto; flex: 1 1 16rem; }
html body .pg-search.pg-search-light:focus-within { border-color: var(--hv-ink); }
html body .pg-check { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .88rem; color: var(--hv-ink); cursor: pointer; }
html body .pg-check input { width: 1.1rem; height: 1.1rem; accent-color: var(--hv-lapis); }
html body .pg-hint { display: flex; gap: .5rem; align-items: flex-start; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 14px; background: var(--hv-lapis-soft); color: var(--hv-ink); font-size: .85rem; line-height: 1.9; }
html body .pg-hint svg { flex: none; margin-top: .3rem; color: var(--hv-lapis); }
html body .pg-pager { display: flex; justify-content: space-between; gap: .5rem; margin-top: .8rem; }
html body .pg-pager:empty { display: none; }
html body .pg-pager a { padding: .55rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--hv-line); color: var(--hv-ink) !important; font-weight: 800; text-decoration: none !important; }

/* =========================================================================
   Clans (/groups/)
   ========================================================================= */
html body .dq-clan-public { display: block !important; max-width: none !important; }
html body .dq-clan-public > * + * { margin-top: 1.25rem; }
html body .pg-clan-clock { display: flex; flex-direction: column; gap: .55rem; width: 17rem; padding: 1.2rem; border-radius: 22px; background: rgba(19, 24, 58, .28); border: 1px solid rgba(255, 255, 255, .18); }
html body .pg-clan-clock > span { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; font-weight: 800; opacity: .85; }
html body .pg-clan-clock time { font-family: var(--hv-display); font-size: 1.45rem; line-height: 1.5; color: #fff; }
html body .pg-clan-clock .pg-btn { justify-content: center; }
html body .pg-clan-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.5rem; align-items: start; }
html body .pg-clan-main > .pg-section-title:first-child { margin-top: .5rem; }
html body .pg-clan-search { display: flex !important; flex-wrap: wrap; align-items: center; gap: .7rem 1rem !important; margin: 0 0 1rem !important; padding: .7rem !important; border-radius: 20px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body .pg-clan-search .dq-btn { min-height: 3rem; padding-inline: 1.5rem; }
html body .pg-clan-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)) !important; gap: .8rem !important; }
html body .pg-clan-card { --cc: var(--hv-firooze); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1rem !important; border-radius: 20px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s; }
html body .pg-clan-card:hover { transform: translateY(-3px); border-color: transparent !important; box-shadow: 0 22px 40px -26px rgba(19, 24, 58, .5) !important; }
html body .pg-clan-card.tone-1 { --cc: var(--hv-lapis); }
html body .pg-clan-card.tone-2 { --cc: var(--hv-anar); }
html body .pg-clan-card.tone-3 { --cc: #c98400; }
html body .pg-clan-card.tone-4 { --cc: var(--hv-ink); }
html body .pg-clan-emblem { display: grid; place-items: center; width: 3.6rem; height: 4.1rem; background: var(--cc); color: #fff; font-family: var(--hv-display); font-size: 1.7rem; clip-path: polygon(50% 0, 100% 16%, 100% 62%, 50% 100%, 0 62%, 0 16%); }
html body .pg-clan-card h3 { margin: 0 0 .15rem !important; font-size: 1.05rem !important; font-weight: 900 !important; }
html body .pg-clan-card h3 a { color: var(--hv-ink) !important; text-decoration: none !important; }
html body .pg-clan-card p { margin: 0 !important; font-size: .82rem; line-height: 1.8; color: var(--hv-muted) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html body .pg-clan-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .5rem 0 0; padding: 0; }
html body .pg-clan-meta li { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .55rem; border-radius: 8px; background: var(--hv-paper); font-size: .74rem; font-weight: 700; color: var(--hv-muted); }
html body .pg-clan-go { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--hv-paper); color: var(--hv-ink) !important; transition: background .2s, color .2s; }
html body .pg-clan-card:hover .pg-clan-go { background: var(--cc); color: #fff !important; }
html body .pg-rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
html body .pg-rank-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .3rem .8rem; padding: .7rem 1rem; border-radius: 16px; background: #fff; border: 1px solid var(--hv-line); }
html body .pg-rank-list li.is-empty { display: block; text-align: center; color: var(--hv-muted); }
html body .pg-rank-n { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 12px; background: var(--hv-paper); font-weight: 900; color: var(--hv-ink); }
html body .pg-rank-list li.rank-1 .pg-rank-n { background: var(--hv-saffron); }
html body .pg-rank-list li.rank-2 .pg-rank-n { background: #d9deef; }
html body .pg-rank-list li.rank-3 .pg-rank-n { background: #f0c9a6; }
html body .pg-rank-list a { font-weight: 800; color: var(--hv-ink) !important; text-decoration: none !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .pg-rank-list b { font-family: var(--hv-display); font-weight: 400; font-size: 1.3rem; color: var(--hv-firooze); }
html body .pg-rank-list small { color: var(--hv-muted); font-size: .72rem; }
html body .pg-clan-aside { position: sticky; top: 96px; display: grid; gap: 1rem; }
html body .pg-rewards h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; font-family: var(--hv-display); font-weight: 400; font-size: 1.3rem; color: var(--hv-ink); }
html body .pg-rewards h3 svg { color: var(--hv-anar); }
html body .pg-reward { display: flex; gap: .7rem; align-items: center; padding: .65rem; border-radius: 14px; background: var(--hv-paper); }
html body .pg-reward + .pg-reward { margin-top: .45rem; }
html body .pg-reward span { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--hv-display); font-size: 1.2rem; background: #d9deef; color: var(--hv-ink); }
html body .pg-reward.rank-1 span { background: var(--hv-saffron); }
html body .pg-reward.rank-3 span { background: #f0c9a6; }
html body .pg-reward p { margin: 0; font-size: .8rem; line-height: 1.8; color: var(--hv-ink); }
/* weekly podium (dq_clan_podium) restyled as a stacked trophy shelf */
html body .pg-clan-aside .dq-clan-podium { display: grid !important; grid-template-columns: 1fr !important; gap: .5rem !important; margin: 0 !important; }
html body .pg-clan-aside .dq-clan-podium a { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico small" "ico name" "ico pts"; column-gap: .8rem; align-items: center; text-align: start !important; padding: .8rem 1rem !important; border-radius: 18px !important; background: var(--hv-ink) !important; border: 0 !important; color: #fff !important; text-decoration: none !important; box-shadow: none !important; transform: none !important; min-height: 0 !important; }
html body .pg-clan-aside .dq-clan-podium a > span { grid-area: ico; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: rgba(255, 255, 255, .12); color: var(--hv-saffron); }
html body .pg-clan-aside .dq-clan-podium a small { grid-area: small; color: rgba(255, 255, 255, .7) !important; font-size: .72rem; }
html body .pg-clan-aside .dq-clan-podium a strong { grid-area: name; color: #fff !important; font-weight: 900; }
html body .pg-clan-aside .dq-clan-podium a b { grid-area: pts; color: var(--hv-saffron) !important; font-size: .8rem; }
html body .pg-clan-aside .dq-clan-podium a.rank-2 > span { color: #d9deef; }
html body .pg-clan-aside .dq-clan-podium a.rank-3 > span { color: #f0c9a6; }

/* clan profile */
html body .dq-clan-public .dq-clan-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .7rem !important; }
html body .dq-clan-public .dq-clan-stats > div { padding: 1rem !important; border-radius: 18px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; text-align: center; }
html body .dq-clan-public .dq-clan-stats strong { display: block; font-family: var(--hv-display); font-weight: 400; font-size: 1.8rem; color: var(--hv-firooze); }
html body .dq-clan-public .dq-clan-stats span { font-size: .8rem; color: var(--hv-muted); font-weight: 700; }
html body .dq-clan-public .dq-clan-summary { padding: 1.4rem !important; border-radius: 22px !important; background: var(--hv-saffron) !important; border: 0 !important; color: var(--hv-ink) !important; box-shadow: none !important; }
html body .dq-clan-public .dq-clan-summary h2 { font-family: var(--hv-display) !important; font-weight: 400 !important; margin: 0 0 .3rem !important; color: var(--hv-ink) !important; }
html body .dq-clan-public .dq-clan-public-section { padding: 1.3rem !important; border-radius: 22px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body .dq-clan-public .dq-clan-public-section h2 { font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.5rem !important; color: var(--hv-ink) !important; margin: 0 0 1rem !important; }

@media (max-width: 1023px) {
	html body .pg-clan-layout { grid-template-columns: minmax(0, 1fr); }
	html body .pg-clan-aside { position: static; }
}
@media (max-width: 760px) {
	html body .pg-clan-clock { width: 100%; }
	html body .dq-clan-public .dq-clan-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .pg-clan-search .dq-btn { width: 100%; }
}
html body .dq-clan-grid.pg-clan-grid > article.pg-clan-card { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto !important; text-align: start !important; }
@media (max-width: 760px) { html body .pg-clan-emblem { width: 3rem; height: 3.4rem; font-size: 1.4rem; } }
html body .dq-clan-public .dq-clan-summary .dq-btn { background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; color: #fff !important; box-shadow: none !important; }

/* =========================================================================
   Word guess & personality (template-activity-v2)
   ========================================================================= */
html body .dq-activity-v3 { background: none !important; padding: 0 !important; min-height: 0 !important; }
html body .dq-activity-v3 .dq-activity-shell { max-width: none !important; padding: 0 !important; background: none !important; box-shadow: none !important; border: 0 !important; }
html body .dq-activity-v3.is-listing .dq-activity-nav { display: none !important; }
html body .dq-activity-v3 .dq-activity-shell > * + * { margin-top: 1.25rem; }
/* decorative sides */
html body .pg-letters { display: grid; grid-template-columns: repeat(2, 4.2rem); gap: .6rem; transform: rotate(-6deg); }
html body .pg-letters span { display: grid; place-items: center; height: 4.2rem; border-radius: 18px; background: #fff; color: var(--hv-ink); font-family: var(--hv-display); font-size: 2.2rem; box-shadow: 0 6px 0 rgba(19, 24, 58, .18); }
html body .pg-letters span:nth-child(2) { background: var(--hv-ink); color: var(--hv-saffron); transform: translateY(14px); }
html body .pg-letters span:nth-child(3) { transform: translateY(-6px); }
html body .pg-persona { position: relative; width: 11rem; height: 11rem; }
html body .pg-persona i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
html body .pg-persona i:nth-child(2) { inset: 1.3rem; border-style: dashed; animation: pg-spin 20s linear infinite; }
html body .pg-persona i:nth-child(3) { inset: 2.6rem; background: rgba(255, 255, 255, .15); border: 0; }
html body .pg-persona b { position: absolute; inset: 3.6rem; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--hv-anar); font-family: var(--hv-display); font-size: 2.2rem; }
/* category tiles */
html body .dq-personality-categories, html body .dq-activity-v3 .dq-activity-list { padding: clamp(1rem, 2.5vw, 1.5rem) !important; border-radius: 24px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body .dq-personality-categories > header, html body .dq-activity-v3 .dq-activity-list > header { display: flex !important; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem !important; padding: 0 !important; border: 0 !important; background: none !important; }
html body .dq-personality-categories > header small, html body .dq-activity-v3 .dq-activity-list > header small { color: var(--hv-muted) !important; font-weight: 700; }
html body .dq-personality-categories h2, html body .dq-activity-v3 .dq-activity-list h2 { margin: .1rem 0 0 !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.6rem !important; color: var(--hv-ink) !important; }
html body #dq-topics-all { min-height: 2.6rem; padding: 0 1rem; border-radius: 12px; border: 1.5px solid var(--hv-line) !important; background: #fff !important; color: var(--hv-ink) !important; font-weight: 800; cursor: pointer; }
html body #dq-topics-all:hover { border-color: var(--hv-ink) !important; }
html body .dq-personality-category-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: .7rem !important; }
html body .dq-personality-category { --cat-color: var(--hv-lapis); display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico title" "ico link"; column-gap: .75rem; align-items: center; padding: .85rem !important; border-radius: 18px !important; background: var(--hv-paper) !important; border: 1.5px solid transparent !important; color: var(--hv-ink) !important; text-decoration: none !important; box-shadow: none !important; transition: transform .25s cubic-bezier(.22, 1, .36, 1), border-color .2s, background .2s !important; }
html body .dq-personality-category[hidden] { display: none !important; }
html body .dq-personality-category:hover { transform: translateY(-2px); background: #fff !important; border-color: var(--cat-color) !important; }
html body .dq-personality-category.is-active { background: #fff !important; border-color: var(--cat-color) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat-color) 18%, transparent) !important; }
html body .dq-personality-category i { grid-area: ico; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 15px; background: var(--cat-color) !important; color: #fff !important; font-style: normal; }
html body .dq-personality-category strong { grid-area: title; font-weight: 900; color: var(--hv-ink) !important; }
html body .dq-personality-category span { grid-area: link; display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; font-weight: 700; color: var(--hv-muted) !important; }
/* activity cards */
html body .dq-activity-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)) !important; gap: 1rem !important; }
html body .dq-activity-grid > article { display: flex !important; flex-direction: column; overflow: hidden; border-radius: 20px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
html body .dq-activity-grid > article:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -28px rgba(19, 24, 58, .55) !important; }
html body .dq-activity-grid > article > img, html body .dq-activity-placeholder { width: auto !important; height: 140px !important; margin: .5rem .5rem 0; border-radius: 15px !important; object-fit: cover; }
html body .dq-activity-placeholder { display: grid !important; place-items: center; background: var(--hv-anar) !important; color: #fff !important; }
html body .is-word .dq-activity-placeholder { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .dq-activity-grid > article > div:last-child { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: .9rem 1rem 1rem !important; }
html body .dq-activity-grid small { font-size: .74rem; font-weight: 800; color: var(--hv-anar) !important; }
html body .is-word .dq-activity-grid small { color: #a86d00 !important; }
html body .dq-activity-grid h3 { margin: 0 !important; font-size: 1.05rem !important; font-weight: 900 !important; color: var(--hv-ink) !important; }
html body .dq-activity-grid p { margin: 0 !important; font-size: .84rem; line-height: 1.85; color: var(--hv-muted) !important; }
html body .dq-activity-grid .dq-btn { margin-top: auto; justify-content: center; background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; color: #fff !important; box-shadow: none !important; }
html body .dq-activity-grid .dq-btn:hover { background: var(--hv-saffron) !important; border-color: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .dq-activity-empty { text-align: center; padding: 2.5rem 1rem !important; color: var(--hv-muted) !important; font-weight: 700; background: var(--hv-paper) !important; border: 0 !important; border-radius: 18px !important; }
/* playing state */
html body .dq-activity-v3.is-playing .dq-activity-nav { display: flex !important; align-items: center; justify-content: space-between; gap: .75rem; padding: .5rem !important; border-radius: 18px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body .dq-activity-v3.is-playing .dq-activity-nav a { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem; border-radius: 12px; background: var(--hv-paper) !important; color: var(--hv-ink) !important; font-weight: 800; font-size: .85rem; text-decoration: none !important; }
html body .dq-activity-v3.is-playing .dq-activity-nav > div { display: inline-flex; align-items: center; gap: .45rem; font-weight: 900; color: var(--hv-ink); min-width: 0; }
html body .dq-activity-v3.is-playing .dq-activity-nav > div b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .dq-activity-v3 > .dq-activity-shell > .dq-game-heading { padding: clamp(1.4rem, 3.5vw, 2.4rem) !important; border-radius: 26px !important; text-align: center; color: #fff !important; background: var(--hv-anar) !important; border: 0 !important; box-shadow: none !important; position: relative; overflow: hidden; }
html body .dq-activity-v3.is-word > .dq-activity-shell > .dq-game-heading { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .dq-activity-v3 > .dq-activity-shell > .dq-game-heading * { color: inherit !important; }
html body .dq-activity-v3 > .dq-activity-shell > .dq-game-heading small { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 800; font-size: .8rem; }
html body .dq-activity-v3 > .dq-activity-shell > .dq-game-heading h1 { margin: .6rem 0 .3rem !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: clamp(1.9rem, 4vw, 2.8rem) !important; }
html body .dq-activity-v3 > .dq-activity-shell > .dq-game-heading p { margin: 0 auto !important; max-width: 40rem; opacity: .85; }
html body .dq-play-stage { padding: clamp(1rem, 3vw, 2rem) !important; border-radius: 26px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
@media (max-width: 760px) {
	html body .pg-letters { grid-template-columns: repeat(4, 1fr); transform: none; width: 100%; }
	html body .pg-letters span { height: 3.4rem; font-size: 1.7rem; }
	html body .pg-letters span:nth-child(n) { transform: none; }
	html body .pg-persona { display: none; }
	html body .dq-personality-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .dq-personality-category { grid-template-columns: minmax(0, 1fr); grid-template-areas: "ico" "title" "link"; row-gap: .35rem; }
}

/* football */
html body .dq-football-page.pg-football { display: block !important; padding: 0 !important; background: none !important; max-width: none !important; }
html body .pg-pitch { position: relative; width: 15rem; height: 10rem; border-radius: 18px; border: 2px solid rgba(255, 255, 255, .55); background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 30px, transparent 30px 60px); }
html body .pg-pitch i:nth-child(1) { position: absolute; top: 0; bottom: 0; left: 50%; border-left: 2px solid rgba(255, 255, 255, .55); }
html body .pg-pitch i:nth-child(2) { position: absolute; top: 50%; left: 50%; width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .55); }
html body .pg-pitch i:nth-child(3) { position: absolute; top: 30%; bottom: 30%; left: -2px; width: 2rem; border: 2px solid rgba(255, 255, 255, .55); border-left: 0; }
html body .pg-pitch b { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin: -1.8rem 0 0 -1.8rem; border-radius: 50%; background: #fff; color: var(--hv-firooze); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .4); }
@media (max-width: 760px) { html body .pg-pitch { width: 100%; height: 8rem; } }

/* =========================================================================
   Take quiz — start screen
   ========================================================================= */
html body .dq-quiz-launch-card { position: relative; overflow: hidden; isolation: isolate; max-width: 860px; margin-inline: auto; padding: clamp(1.5rem, 4vw, 2.75rem) !important; border-radius: 28px !important; background: var(--hv-ink) !important; border: 0 !important; color: #fff !important; box-shadow: 0 40px 70px -45px rgba(19, 24, 58, .8) !important; }
html body .dq-quiz-launch-card::before { content: "" !important; position: absolute; z-index: -1; inset: auto -90px -120px auto; width: 340px; height: 340px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 4l27 38 46-8-8 46 38 27-38 27 8 46-46-8-27 38-27-38-46 8 8-46L4 100l38-27-8-46 46 8z' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M100 34l18 26 31-6-6 31 26 18-26 18 6 31-31-6-18 26-18-26-31 6 6-31-26-18 26-18-6-31 31 6z' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat !important; opacity: .12; height: 340px !important; top: auto !important; left: auto !important; border-radius: 0 !important; }
html body .dq-quiz-launch-card::after { display: none !important; }
html body .dq-quiz-launch-card .dq-badge { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; border: 0 !important; font-weight: 900; }
html body .dq-quiz-launch-card h2 { margin: .7rem 0 .3rem !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: clamp(2rem, 4.5vw, 3rem) !important; line-height: 1.3 !important; color: #fff !important; }
html body .dq-quiz-launch-card .text-muted { color: rgba(255, 255, 255, .78) !important; line-height: 2; }
html body .dq-quiz-launch-card .dq-quiz-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }
html body .dq-quiz-launch-card .dq-quiz-meta span { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; border-radius: 11px; background: rgba(255, 255, 255, .1) !important; border: 0 !important; color: #fff !important; font-weight: 700; font-size: .84rem; }
html body .dq-quiz-launch-card .dq-fixed-round-note { display: flex; align-items: center; gap: .8rem; margin: 1.3rem 0 0 !important; padding: .85rem 1rem !important; border-radius: 16px !important; background: rgba(255, 255, 255, .07) !important; border: 1px dashed rgba(255, 255, 255, .25) !important; color: #fff !important; }
html body .dq-quiz-launch-card .dq-fixed-round-note * { color: inherit !important; }
html body .dq-quiz-launch-card .dq-fixed-round-note small { display: block; opacity: .75; font-size: .8rem; }
html body .dq-quiz-launch-card .dq-fixed-round-icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px; background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .dq-quiz-launch-card .dq-launch-modes { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important; gap: .8rem !important; margin-top: 1.2rem !important; }
html body .dq-quiz-launch-card .dq-launch-mode { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1.1rem !important; border-radius: 20px !important; border: 0 !important; text-align: start; cursor: pointer; text-decoration: none !important; min-height: 0 !important; transition: transform .25s cubic-bezier(.22, 1, .36, 1), box-shadow .25s !important; }
html body .dq-quiz-launch-card .dq-launch-mode-solo { background: var(--hv-saffron) !important; box-shadow: 0 6px 0 #c98400 !important; }
html body .dq-quiz-launch-card .dq-launch-mode-solo, html body .dq-quiz-launch-card .dq-launch-mode-solo * { color: var(--hv-ink) !important; }
html body .dq-quiz-launch-card .dq-launch-mode-duel { background: #fff !important; box-shadow: 0 6px 0 #c5cbe4 !important; }
html body .dq-quiz-launch-card .dq-launch-mode-duel, html body .dq-quiz-launch-card .dq-launch-mode-duel * { color: var(--hv-ink) !important; }
html body .dq-quiz-launch-card .dq-launch-mode:hover { transform: translateY(-3px); }
html body .dq-quiz-launch-card .dq-launch-mode-icon { display: grid !important; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 15px; background: var(--hv-ink) !important; }
html body .dq-quiz-launch-card .dq-launch-mode-icon, html body .dq-quiz-launch-card .dq-launch-mode-icon * { color: var(--hv-saffron) !important; }
html body .dq-quiz-launch-card .dq-launch-mode-duel .dq-launch-mode-icon { background: var(--hv-anar) !important; }
html body .dq-quiz-launch-card .dq-launch-mode-duel .dq-launch-mode-icon * { color: #fff !important; }
html body .dq-quiz-launch-card .dq-launch-mode-copy { display: flex; flex-direction: column; gap: .1rem; }
html body .dq-quiz-launch-card .dq-launch-mode-copy small { font-size: .74rem; font-weight: 800; opacity: .7; }
html body .dq-quiz-launch-card .dq-launch-mode-copy strong { font-family: var(--hv-display); font-weight: 400; font-size: 1.35rem; }
html body .dq-quiz-launch-card .dq-launch-mode-copy em { font-style: normal; font-size: .78rem; opacity: .75; line-height: 1.7; }
html body .dq-quiz-launch-card .dq-launch-mode-arrow { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: rgba(19, 24, 58, .1); }
html body .dq-quiz-launch-card .dq-note { background: rgba(255, 255, 255, .1) !important; color: #fff !important; border: 0 !important; }
html body .dq-quiz-launch-card .dq-launch-mode::before, html body .dq-quiz-launch-card .dq-launch-mode::after { display: none !important; }

/* =========================================================================
   Blog, pages, single post
   ========================================================================= */
html body .pg-posts { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1.1rem !important; }
html body .pg-posts .dq-blog-card { display: flex !important; flex-direction: column; overflow: hidden; padding: 0 !important; border-radius: 22px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
html body .pg-posts .dq-blog-card:hover { transform: translateY(-4px); box-shadow: 0 26px 44px -28px rgba(19, 24, 58, .5) !important; }
html body .pg-posts .dq-blog-thumb { display: block; margin: .5rem .5rem 0; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: var(--hv-lapis-soft); }
html body .pg-posts .dq-blog-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
html body .pg-posts .dq-blog-card:hover .dq-blog-thumb img { transform: scale(1.05); }
html body .pg-posts .dq-blog-thumb-fallback { display: grid !important; place-items: center; width: 100%; height: 100%; background: var(--hv-lapis) !important; color: #fff !important; }
html body .pg-posts .dq-blog-body { display: flex; flex-direction: column; gap: .45rem; flex: 1; padding: 1rem 1.1rem 1.15rem !important; }
html body .pg-posts .dq-blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; font-size: .76rem; color: var(--hv-muted); }
html body .pg-posts .dq-blog-meta span { display: inline-flex; align-items: center; gap: .3rem; }
html body .pg-posts .dq-blog-card h3 { margin: 0 !important; font-size: 1.08rem !important; font-weight: 900 !important; line-height: 1.75 !important; }
html body .pg-posts .dq-blog-card h3 a { color: var(--hv-ink) !important; text-decoration: none !important; }
html body .pg-posts .dq-blog-card p { margin: 0 !important; color: var(--hv-muted) !important; font-size: .86rem; line-height: 1.9; }
html body .pg-posts .dq-blog-more { margin-top: auto; padding-top: .4rem; display: inline-flex; align-items: center; gap: .35rem; font-weight: 900; font-size: .85rem; color: var(--hv-lapis) !important; text-decoration: none !important; }
html body .pg-posts .dq-blog-card.is-lead { grid-column: 1 / -1; display: grid !important; grid-template-columns: 1.3fr 1fr; }
html body .pg-posts .dq-blog-card.is-lead .dq-blog-thumb { aspect-ratio: auto; min-height: 280px; margin: .6rem; }
html body .pg-posts .dq-blog-card.is-lead .dq-blog-body { justify-content: center; padding: 1.6rem !important; }
html body .pg-posts .dq-blog-card.is-lead h3 { font-family: var(--hv-display); font-weight: 400 !important; font-size: 2rem !important; line-height: 1.4 !important; }
html body .pg-blog .dq-pagination { display: flex; justify-content: center; gap: .35rem; margin-top: 1.5rem; flex-wrap: wrap; }
html body .pg-blog .dq-pagination .page-numbers { display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .7rem; border-radius: 12px; background: #fff; border: 1px solid var(--hv-line); color: var(--hv-ink) !important; font-weight: 800; text-decoration: none !important; }
html body .pg-blog .dq-pagination .page-numbers.current { background: var(--hv-ink); color: #fff !important; border-color: var(--hv-ink); }

/* long-form text (pages and posts) */
html body .pg-prose, html body .dq-post-content { padding: clamp(1.25rem, 4vw, 2.75rem) !important; font-size: 1.02rem; line-height: 2.1; color: #2a3157; }
html body .pg-prose > *:first-child, html body .dq-post-content > *:first-child { margin-top: 0; }
html body :is(.pg-prose, .dq-post-content) :is(h2, h3, h4) { color: var(--hv-ink); font-weight: 900; line-height: 1.6; margin: 2rem 0 .7rem; }
html body :is(.pg-prose, .dq-post-content) h2 { font-family: var(--hv-display); font-weight: 400; font-size: 1.8rem; }
html body :is(.pg-prose, .dq-post-content) a { color: var(--hv-lapis); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
html body :is(.pg-prose, .dq-post-content) blockquote { margin: 1.5rem 0; padding: 1rem 1.3rem; border-radius: 0 16px 16px 0; border-inline-start: 4px solid var(--hv-saffron); background: #fff8e6; color: var(--hv-ink); font-weight: 600; }
html body :is(.pg-prose, .dq-post-content) img { max-width: 100%; height: auto; border-radius: 18px; }
html body :is(.pg-prose, .dq-post-content) :is(ul, ol) { padding-inline-start: 1.4rem; }
html body :is(.pg-prose, .dq-post-content) li::marker { color: var(--hv-lapis); font-weight: 900; }
html body .pg-page, html body .dq-post { max-width: 920px; margin-inline: auto; }

/* single post */
html body .dq-post { display: block !important; }
html body .dq-post > * + * { margin-top: 1.25rem; }
html body .dq-post-hero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(1.5rem, 4vw, 2.8rem) !important; border-radius: 28px !important; background: var(--hv-ink) !important; border: 0 !important; box-shadow: none !important; color: #fff !important; }
html body .dq-post-hero::after { content: ""; position: absolute; z-index: -1; width: 320px; height: 320px; inset-inline-end: -90px; bottom: -130px; opacity: .13; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 4l27 38 46-8-8 46 38 27-38 27 8 46-46-8-27 38-27-38-46 8 8-46L4 100l38-27-8-46 46 8z' fill='none' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .dq-post-back { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .85rem; border-radius: 10px; background: rgba(255, 255, 255, .1); color: #fff !important; font-weight: 800; font-size: .82rem; text-decoration: none !important; }
html body .dq-post-back:hover { background: #fff; color: var(--hv-ink) !important; }
html body .dq-post-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.1rem 0 .6rem; }
html body .dq-post-meta > span { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border-radius: 9px; background: rgba(255, 255, 255, .1); color: #fff !important; font-size: .78rem; font-weight: 700; border: 0 !important; }
html body .dq-post-meta .dq-badge { background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .dq-post-title { margin: 0 !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: clamp(2rem, 4.6vw, 3.1rem) !important; line-height: 1.35 !important; color: #fff !important; }
html body .dq-post-feature img { width: 100%; height: auto; max-height: 460px; object-fit: cover; border-radius: 24px; display: block; }
html body .dq-post-content { background: #fff !important; border: 1px solid var(--hv-line) !important; border-radius: 24px !important; box-shadow: none !important; }
html body .dq-post-tags { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px dashed var(--hv-line); font-size: .85rem; color: var(--hv-muted); }
html body .dq-post-author { display: flex !important; align-items: center; gap: 1rem; background: var(--hv-paper) !important; border: 0 !important; border-radius: 20px !important; box-shadow: none !important; }
html body .dq-post-author img { border-radius: 50%; }
html body .dq-post .dq-subhead { font-family: var(--hv-display); font-size: 1.5rem; color: var(--hv-ink); margin-top: 2rem; }
html body .dq-post > .dq-blog-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 1rem !important; }
html body .dq-post > .dq-blog-grid .dq-blog-card { padding: 0 !important; overflow: hidden; border-radius: 20px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body .dq-post > .dq-blog-grid .dq-blog-thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
html body .dq-post > .dq-blog-grid .dq-blog-thumb img { width: 100%; height: 100%; object-fit: cover; }
html body .dq-post > .dq-blog-grid .dq-blog-body { padding: .9rem 1rem !important; }
html body .dq-post > .dq-blog-grid h3 { font-size: 1rem !important; margin: .3rem 0 0 !important; }
html body .dq-post > .dq-blog-grid h3 a { color: var(--hv-ink) !important; text-decoration: none !important; }

@media (max-width: 960px) {
	html body .pg-posts, html body .dq-post > .dq-blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .pg-posts .dq-blog-card.is-lead { grid-template-columns: 1fr; }
	html body .pg-posts .dq-blog-card.is-lead .dq-blog-thumb { min-height: 0; aspect-ratio: 16 / 9; margin: .5rem .5rem 0; }
	html body .pg-posts .dq-blog-card.is-lead h3 { font-size: 1.5rem !important; }
}
@media (max-width: 600px) {
	html body .pg-posts, html body .dq-post > .dq-blog-grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* =========================================================================
   Public profile (/profile/{id})
   ========================================================================= */
html body .pg-profile { display: block !important; max-width: 1180px; margin-inline: auto; }
html body .pg-profile > * + * { margin-top: 1.25rem; }
html body .pg-profile .dq-profile2 { display: grid !important; grid-template-columns: minmax(0, 1fr) 300px; gap: 1.25rem; align-items: start; margin: 0 !important; padding: 0 !important; width: auto !important; }
html body .pg-profile .dq-profile2-main, html body .pg-profile .dq-profile2-side { min-width: 0; margin: 0 !important; padding: 0 !important; }
html body .pg-profile .dq-profile2-side { position: sticky; top: 96px; display: grid; gap: 1rem; }
html body .pg-profile .dq-profile2-side .dq-aside-card { margin: 0 !important; }
html body .pg-profile .dq-profile-cover { position: relative; overflow: hidden; isolation: isolate; margin: 0 !important; padding: clamp(1.5rem, 4vw, 2.5rem) !important; border-radius: 28px !important; background: var(--hv-ink) !important; border: 0 !important; box-shadow: none !important; min-height: 0 !important; }
html body .pg-profile .dq-profile-cover::before, html body .pg-profile .dq-profile-cover::after { display: none !important; }
html body .pg-profile .dq-profile-cover-inner { position: relative; display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.25rem; padding: 0 !important; background: none !important; transform: none !important; }
html body .pg-profile .dq-profile-avatar2 { width: 108px !important; height: 108px !important; margin: 0 !important; border-radius: 50% !important; object-fit: cover; background: var(--hv-lapis-soft); border: 5px solid var(--hv-ink) !important; box-shadow: 0 0 0 4px var(--hv-saffron) !important; position: static !important; transform: none !important; }
html body .pg-profile .dq-profile-id h1 { margin: 0 !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: clamp(1.9rem, 4vw, 2.6rem) !important; line-height: 1.35 !important; color: #fff !important; }
html body .pg-profile .dq-profile-role { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; padding: .3rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .85) !important; font-size: .82rem; font-weight: 700; }
html body .pg-profile .dq-profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
html body .pg-profile .dq-profile-actions .dq-btn-primary { background: var(--hv-saffron) !important; border-color: var(--hv-saffron) !important; color: var(--hv-ink) !important; box-shadow: 0 4px 0 #c98400 !important; }
html body .pg-profile .dq-profile-actions .dq-btn-ghost { background: rgba(255, 255, 255, .1) !important; border-color: rgba(255, 255, 255, .2) !important; color: #fff !important; }
html body .pg-profile .dq-profile-actions .dq-btn-ghost:hover { background: #fff !important; color: var(--hv-ink) !important; }
html body .pg-profile .dq-profile-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: .7rem !important; margin: 1.25rem 0 0 !important; }
html body .pg-profile .dq-pstat { padding: 1.1rem .8rem !important; border-radius: 20px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; text-align: center; }
html body .pg-profile .dq-pstat b, html body .pg-profile .dq-pstat b a { display: block; font-family: var(--hv-display); font-weight: 400; font-size: 2rem; line-height: 1.2; color: var(--hv-lapis) !important; text-decoration: none !important; }
html body .pg-profile .dq-pstat:nth-child(2) b { color: var(--hv-firooze) !important; }
html body .pg-profile .dq-pstat:nth-child(3) b { color: #c98400 !important; }
html body .pg-profile .dq-pstat:nth-child(4) b, html body .pg-profile .dq-pstat:nth-child(4) b a { color: var(--hv-anar) !important; }
html body .pg-profile .dq-pstat span { font-size: .8rem; font-weight: 700; color: var(--hv-muted); }
html body .pg-profile .dq-card { margin-top: 1.25rem !important; padding: clamp(1rem, 2.5vw, 1.4rem) !important; border-radius: 22px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body .pg-profile .dq-sec-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .9rem !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.35rem !important; color: var(--hv-ink) !important; }
html body .pg-profile .dq-skill-tags { display: flex; flex-wrap: wrap; gap: .45rem; }
html body .pg-profile .dq-skill-tag { padding: .4rem .8rem !important; border-radius: 10px !important; font-weight: 800; font-size: .82rem; border: 0 !important; }
html body .pg-profile .dq-skill-tag.tag-green { background: #e2f6f3 !important; color: #0b7a70 !important; }
html body .pg-profile .dq-skill-tag.tag-amber { background: #fff3d6 !important; color: #8a5a00 !important; }
html body .pg-profile .dq-skill-tag.tag-red { background: #fde8ec !important; color: #b42443 !important; }
html body .pg-profile .dq-activity-list { display: grid; gap: .4rem; }
html body .pg-profile .dq-activity-item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .7rem; padding: .65rem .8rem !important; border-radius: 14px !important; background: var(--hv-paper) !important; border: 0 !important; }
html body .pg-profile .dq-act-ico { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 11px; background: var(--hv-lapis) !important; color: #fff !important; }
html body .pg-profile .dq-act-title { font-weight: 800; color: var(--hv-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .pg-profile .dq-act-type { padding: .15rem .55rem; border-radius: 7px; background: #fff; font-size: .72rem; font-weight: 800; color: var(--hv-muted); }
html body .pg-profile .dq-act-date { font-size: .76rem; color: var(--hv-muted); }
html body .pg-profile .dq-info-list { list-style: none; margin: 0; padding: 0; }
html body .pg-profile .dq-info-list li { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: .45rem; padding: .6rem 0; border-bottom: 1px dashed var(--hv-line); font-size: .86rem; color: var(--hv-muted); }
html body .pg-profile .dq-info-list li:last-child { border-bottom: 0; }
html body .pg-profile .dq-info-list li svg { color: var(--hv-lapis); }
html body .pg-profile .dq-info-list b { text-align: end; color: var(--hv-ink); }
html body .pg-profile .dq-follow-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
html body .pg-profile .dq-follow-stats > div { padding: .9rem .5rem; border-radius: 16px; background: var(--hv-paper); text-align: center; }
html body .pg-profile .dq-follow-stats b { display: block; font-family: var(--hv-display); font-weight: 400; font-size: 1.6rem; color: var(--hv-ink); }
html body .pg-profile .dq-follow-stats span { font-size: .78rem; color: var(--hv-muted); }
@media (max-width: 1023px) {
	html body .pg-profile .dq-profile2 { grid-template-columns: minmax(0, 1fr); }
	html body .pg-profile .dq-profile2-side { position: static; grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	html body .pg-profile .dq-profile-cover-inner { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
	html body .pg-profile .dq-profile-actions { justify-content: center; }
	html body .pg-profile .dq-profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	html body .pg-profile .dq-profile2-side { grid-template-columns: minmax(0, 1fr); }
	html body .pg-profile .dq-activity-item { grid-template-columns: auto minmax(0, 1fr) auto; }
	html body .pg-profile .dq-act-type { display: none; }
}

/* =========================================================================
   User panel sections
   ========================================================================= */
html body #dq-panel-content > * + * { margin-top: 1rem; }
html body .pg-panel-head { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.4rem; border-radius: 24px; background: var(--hv-ink); color: #fff; }
html body .pg-panel-head::after { content: ""; position: absolute; z-index: -1; width: 220px; height: 220px; inset-inline-end: -60px; top: -70px; opacity: .14; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 4l27 38 46-8-8 46 38 27-38 27 8 46-46-8-27 38-27-38-46 8 8-46L4 100l38-27-8-46 46 8z' fill='none' stroke='white' stroke-width='2'/%3E%3Cpath d='M100 34l18 26 31-6-6 31 26 18-26 18 6 31-31-6-18 26-18-26-31 6 6-31-26-18 26-18-6-31 31 6z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .pg-panel-head-ico { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 16px; background: var(--hv-saffron); color: var(--hv-ink); }
html body .pg-panel-head-ico svg { width: 24px; height: 24px; }
html body .pg-panel-head h2 { margin: 0 !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.7rem !important; line-height: 1.35 !important; color: #fff !important; }
html body .pg-panel-head p { margin: .15rem 0 0 !important; color: rgba(255, 255, 255, .75) !important; font-size: .88rem; }
html body .pg-panel-head + .dq-panel-title { display: none !important; }
/* cards inside sections */
html body #dq-panel-content > .dq-aside-card, html body #dq-panel-content > .dq-section-card, html body #dq-panel-content > div > .dq-aside-card { padding: clamp(1rem, 2.5vw, 1.5rem) !important; border-radius: 22px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; box-shadow: none !important; }
html body #dq-panel-content .dq-aside-card h4, html body #dq-panel-content .dq-section-card h4, html body #dq-panel-content > h4 { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.3rem !important; color: var(--hv-ink) !important; }
/* empty states */
html body #dq-panel-content > p.text-muted, html body #dq-panel-content .dq-empty, html body #dq-panel-content .dq-notif-empty { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1rem; padding: 2.5rem 1rem !important; border-radius: 22px; background: #fff; border: 1.5px dashed var(--hv-line); text-align: center; color: var(--hv-muted) !important; font-weight: 700; }
html body #dq-panel-content > p.text-muted::before, html body #dq-panel-content .dq-empty::before { content: ""; width: 3.4rem; height: 3.4rem; border-radius: 18px; background: var(--hv-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232340c8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l2.6 5.6 6 .7-4.5 4.1 1.2 6L12 15.5 6.7 18.4l1.2-6L3.4 8.3l6-.7z'/%3E%3C/svg%3E") center / 26px no-repeat; }
/* tabs inside sections → segmented control */
html body #dq-panel-content .dq-tabs { display: flex !important; gap: .3rem !important; padding: .35rem !important; border-radius: 18px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
html body #dq-panel-content .dq-tabs > * { flex: none; min-height: 2.5rem; padding: 0 1.1rem !important; border-radius: 13px !important; border: 0 !important; background: transparent !important; color: var(--hv-muted) !important; font-weight: 800 !important; box-shadow: none !important; }
html body #dq-panel-content .dq-tabs > *:hover { background: var(--hv-paper) !important; color: var(--hv-ink) !important; }
html body #dq-panel-content .dq-tabs > .is-active, html body #dq-panel-content .dq-tabs > .is-active:hover { background: var(--hv-ink) !important; color: #fff !important; }
/* form fields read as one system */
html body #dq-panel-content .dq-label, html body #dq-panel-content label > span:first-child { font-weight: 800; color: var(--hv-ink); font-size: .85rem; }
html body #dq-panel-content .dq-input, html body #dq-panel-content input[type="text"], html body #dq-panel-content input[type="url"], html body #dq-panel-content input[type="number"], html body #dq-panel-content input[type="email"], html body #dq-panel-content input[type="password"], html body #dq-panel-content input[type="search"], html body #dq-panel-content select, html body #dq-panel-content textarea { border-radius: 13px !important; border: 1.5px solid var(--hv-line) !important; background: #fbfcff !important; min-height: 2.9rem; }
html body #dq-panel-content .dq-input:focus, html body #dq-panel-content input:focus, html body #dq-panel-content select:focus, html body #dq-panel-content textarea:focus { border-color: var(--hv-ink) !important; background: #fff !important; box-shadow: 0 0 0 4px rgba(35, 64, 200, .08) !important; outline: 0 !important; }
html body #dq-panel-content .dq-box-highlight, html body #dq-panel-content .dq-note { border-radius: 14px !important; }
html body #dq-panel-content .dq-premium-banner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.2rem !important; border: 0 !important; background: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body #dq-panel-content .dq-premium-banner * { color: var(--hv-ink) !important; }
html body #dq-panel-content .dq-premium-banner .dq-btn { background: var(--hv-ink) !important; color: #fff !important; border-color: var(--hv-ink) !important; }
/* notifications */
html body #dq-panel-content .dq-notif-head { display: flex; justify-content: flex-end; }
html body #dq-panel-content .dq-notif-list { display: grid; gap: .5rem; }
html body #dq-panel-content .dq-notif-item { display: flex; gap: .8rem; align-items: flex-start; padding: .9rem 1rem !important; border-radius: 16px !important; background: #fff !important; border: 1px solid var(--hv-line) !important; }
html body #dq-panel-content .dq-notif-item.is-unread, html body #dq-panel-content .dq-notif-item.unread { border-inline-start: 4px solid var(--hv-lapis) !important; }
@media (max-width: 760px) {
	html body .pg-panel-head { padding: 1rem; border-radius: 20px; }
	html body .pg-panel-head h2 { font-size: 1.4rem !important; }
	html body .pg-panel-head-ico { width: 2.7rem; height: 2.7rem; border-radius: 13px; }
}
html body #dq-panel-content .dq-notif-head > :is(h2, h3, h4, b, strong) { display: none !important; }
html body #dq-panel-content .dq-card-grid.cols-2 > * { position: relative; overflow: hidden; border-top: 0 !important; background-image: none !important; }
html body #dq-panel-content .dq-card-grid.cols-2 > *::before, html body #dq-panel-content .dq-card-grid.cols-2 > *::after { display: none !important; }
html body #dq-panel-content .dq-card-grid.cols-2 > *:last-child { background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; }
html body #dq-panel-content .dq-card-grid.cols-2 > *:last-child :is(h4, p, b, strong, span, div) { color: #fff !important; }
html body #dq-panel-content .dq-card-grid.cols-2 > *:last-child .dq-btn { background: var(--hv-saffron) !important; border-color: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
@media (max-width: 560px) {
	html body .dq-auth-card .dq-grid-2 { grid-template-columns: minmax(0, 1fr) !important; display: grid !important; }
	html body .dq-auth-card .dq-grid-2 > * { min-width: 0; grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* =========================================================================
   Panel → subscription & AI credit (inc/billing-panel.php)
   ========================================================================= */
html body .bl > * + * { margin-top: 1.1rem; }
html body .bl-meter { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1.25rem; padding: clamp(1.1rem, 3vw, 1.6rem); border-radius: 24px; background: var(--hv-ink); color: #fff; }
html body .bl-meter::after { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; inset-inline-start: -80px; bottom: -120px; opacity: .1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M100 4l27 38 46-8-8 46 38 27-38 27 8 46-46-8-27 38-27-38-46 8 8-46L4 100l38-27-8-46 46 8z' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
html body .bl-tier-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; background: var(--hv-saffron); color: var(--hv-ink); font-weight: 900; font-size: .8rem; }
html body .bl-meter h3 { margin: .7rem 0 .6rem !important; color: #fff !important; font-weight: 800 !important; font-size: 1.05rem !important; }
html body .bl-meter h3 b { font-family: var(--hv-display); font-weight: 400; font-size: 2.6rem; line-height: 1; color: var(--hv-saffron); margin-inline-end: .3rem; }
html body .bl-meter p { margin: 0; color: rgba(255, 255, 255, .75); }
html body .bl-bar { height: 10px; border-radius: 10px; background: rgba(255, 255, 255, .12); overflow: hidden; }
html body .bl-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hv-saffron), #ffd27a); }
html body .bl-facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem .9rem; margin: .9rem 0 0; padding: 0; font-size: .82rem; color: rgba(255, 255, 255, .8); }
html body .bl-facts li { display: flex; align-items: center; gap: .35rem; }
html body .bl-facts b { color: #fff; }
html body .bl-meter-side { padding: 1rem; border-radius: 18px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); }
html body .bl-meter-side > b { display: block; margin-bottom: .5rem; font-size: .88rem; }
html body .bl-meter-side ul { list-style: none; margin: 0; padding: 0; }
html body .bl-meter-side li { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed rgba(255, 255, 255, .15); font-size: .8rem; color: rgba(255, 255, 255, .8); }
html body .bl-meter-side li:last-child { border-bottom: 0; }
html body .bl-meter-side em { font-style: normal; font-weight: 900; color: var(--hv-saffron); white-space: nowrap; }
html body .bl-meter-side small { display: block; margin-top: .4rem; font-size: .72rem; color: rgba(255, 255, 255, .55); }
html body .bl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.6rem !important; }
html body .bl-title { margin: 1.6rem 0 .3rem !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.5rem !important; color: var(--hv-ink) !important; }
html body .bl-head .bl-title { margin: 0 !important; }
html body .bl-sub { margin: 0 0 .8rem !important; color: var(--hv-muted); font-size: .88rem; }
html body .bl-periods { margin: 0 !important; }
html body .bl-periods small { font-size: .7rem; padding: .1rem .4rem; border-radius: 6px; background: #e2f6f3; color: #0b7a70; }
html body .bl-periods .is-active small { background: var(--hv-saffron); color: var(--hv-ink); }
html body .bl-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .9rem; align-items: stretch; }
html body .bl-tier { position: relative; display: flex; flex-direction: column; padding: 1.2rem 1.1rem 1.1rem; border-radius: 22px; background: #fff; border: 1.5px solid var(--hv-line); transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s; }
html body .bl-tier:hover { transform: translateY(-3px); box-shadow: 0 24px 40px -28px rgba(19, 24, 58, .5); }
html body .bl-tier.is-hot { border-color: var(--hv-ink); box-shadow: 0 0 0 3px rgba(255, 179, 31, .5); }
html body .bl-tier.is-current { background: #fbfcff; }
html body .bl-tier.is-current::before { content: "اشتراک فعلی"; position: absolute; top: 1rem; inset-inline-end: 1rem; padding: .15rem .55rem; border-radius: 8px; background: #e2f6f3; color: #0b7a70; font-size: .7rem; font-weight: 900; }
html body .bl-ribbon { position: absolute; top: -.75rem; inset-inline-start: 1rem; padding: .25rem .75rem; border-radius: 999px; background: var(--hv-saffron); color: var(--hv-ink); font-size: .74rem; font-weight: 900; box-shadow: 0 3px 0 #c98400; }
html body .bl-tier h4 { margin: .2rem 0 0 !important; font-family: var(--hv-display) !important; font-weight: 400 !important; font-size: 1.55rem !important; color: var(--hv-ink) !important; }
html body .bl-tagline { margin: .1rem 0 .8rem !important; font-size: .8rem; color: var(--hv-muted); min-height: 1.4em; }
html body .bl-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; padding-bottom: .8rem; border-bottom: 1px dashed var(--hv-line); }
html body .bl-price b { font-family: var(--hv-display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; color: var(--hv-ink); }
html body .bl-price span { font-size: .8rem; color: var(--hv-muted); font-weight: 700; }
html body .bl-price small { width: 100%; font-size: .74rem; color: var(--hv-muted); }
html body .bl-credits { display: flex; align-items: center; gap: .35rem; margin: .8rem 0 .5rem !important; padding: .55rem .7rem; border-radius: 12px; background: #fff8e6; color: var(--hv-ink); font-size: .82rem; }
html body .bl-credits svg { color: #c98400; }
html body .bl-feats { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .3rem; font-size: .82rem; }
html body .bl-feats li { display: flex; align-items: center; gap: .4rem; }
html body .bl-feats li.on { color: var(--hv-ink); }
html body .bl-feats li.on svg { color: var(--hv-firooze); }
html body .bl-feats li.off { color: #a3a9c4; }
html body .bl-cta { margin-top: auto; }
html body .bl-buy { width: 100%; justify-content: center; min-height: 2.9rem; border-radius: 14px !important; background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; color: #fff !important; font-weight: 900 !important; }
html body .bl-buy:hover { background: var(--hv-saffron) !important; border-color: var(--hv-saffron) !important; color: var(--hv-ink) !important; }
html body .bl-tier.is-hot .bl-buy { background: var(--hv-saffron) !important; border-color: var(--hv-saffron) !important; color: var(--hv-ink) !important; box-shadow: 0 4px 0 #c98400 !important; }
html body .bl-current { display: block; text-align: center; padding: .7rem; border-radius: 14px; background: var(--hv-paper); color: var(--hv-muted); font-weight: 800; font-size: .85rem; }
html body .bl-note { display: block; margin-top: .4rem; text-align: center; font-size: .72rem; color: var(--hv-muted); }
html body .bl-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .7rem; }
html body .bl-pack { display: flex; align-items: center; gap: .8rem; padding: .9rem; border-radius: 18px; background: #fff; border: 1px solid var(--hv-line); }
html body .bl-pack-ico { flex: none; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 14px; background: var(--hv-saffron); color: var(--hv-ink); }
html body .bl-pack > div { flex: 1; min-width: 0; }
html body .bl-pack b { display: block; font-weight: 900; color: var(--hv-ink); }
html body .bl-pack small { font-size: .74rem; color: var(--hv-muted); }
html body .bl-pack-btn { flex: none; min-height: 2.6rem; padding-inline: .9rem !important; border-radius: 12px !important; background: var(--hv-paper) !important; border: 1.5px solid var(--hv-line) !important; color: var(--hv-ink) !important; font-weight: 900 !important; white-space: nowrap; }
html body .bl-pack-btn:hover { background: var(--hv-ink) !important; border-color: var(--hv-ink) !important; color: #fff !important; }
html body .bl-usage { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
html body .bl-usage li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .8rem; padding: .6rem .9rem; border-radius: 13px; background: #fff; border: 1px solid var(--hv-line); font-size: .85rem; }
html body .bl-usage small { color: var(--hv-muted); font-size: .74rem; }
html body .bl-usage b { font-variant-numeric: tabular-nums; min-width: 3.5rem; text-align: end; }
html body .bl-usage li.neg b { color: var(--hv-anar); }
html body .bl-usage li.pos b { color: var(--hv-firooze); }
@media (max-width: 760px) {
	html body .bl-meter { grid-template-columns: minmax(0, 1fr); }
	html body .bl-facts { grid-template-columns: minmax(0, 1fr); }
	html body .bl-head { flex-direction: column; align-items: stretch; }
	html body .bl-periods { width: 100% !important; }
	html body .bl-periods button { flex: 1 !important; padding-inline: .5rem !important; flex-direction: column; gap: 0 !important; min-height: 3rem !important; }
	html body .bl-usage li { grid-template-columns: minmax(0, 1fr) auto; }
	html body .bl-usage small { grid-row: 2; }
}

/* =====================================================================
 * Mobile polish (client feedback): no orphan words, centred heads,
 * side-by-side chips/tabs instead of stacked items.
 * ================================================================== */
html body :is(h1, h2, h3, h4, .pg-title, .dq-panel-title) { text-wrap: balance; }
html body :is(p, li, dd, figcaption, blockquote, .pg-sub, .text-muted) { text-wrap: pretty; }
html body .dq-guardian-notice p b { display: block; margin-bottom: .15rem; }
html body .dq-auth-method { display: grid !important; grid-template-columns: 1fr 1fr; gap: .4rem !important; }
html body .dq-auth-method > span { display: none; }
html body .dq-auth-method .dq-link-btn { text-align: center; padding: .45rem .5rem !important; line-height: 1.6; white-space: nowrap; font-size: .84rem; }
html body .au-form [data-dq-rules] { display: block; margin: .6rem auto 0; }

/* Tabs inside the user panel — one even row that wraps tidily */
html body #dq-panel-content .dq-tabs > * { display: inline-flex !important; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; line-height: 1.4; }
@media (max-width: 760px) {
	/* Equal columns: 2 tabs → 2, 3 → 3, 4 → 2×2, 5+ → 3 per row */
	html body #dq-panel-content .dq-tabs:not(.pg-chips) { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; overflow: visible; }
	html body #dq-panel-content .dq-tabs:not(.pg-chips):has(> :nth-child(2):last-child),
	html body #dq-panel-content .dq-tabs:not(.pg-chips):has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	html body #dq-panel-content .dq-tabs:not(.pg-chips) > * { min-width: 0; padding: .45rem .4rem !important; font-size: .84rem; white-space: normal; text-align: center; line-height: 1.5; }
	/* Filter rows with fixed-width selects → share the row */
	html body #dq-panel-content .dq-flex[style*="flex-wrap"] > :is(select, input).dq-input { flex: 1 1 8rem; max-width: none !important; min-width: 0; width: auto; }
	html body .dq-agent-filters { flex-wrap: wrap; justify-content: center !important; width: auto; }
	html body .dq-agent-filters button { flex: 1 1 auto; }
	html body .dq-agent-options label { flex: 1 1 9rem; }
}

@media (max-width: 420px) {
	html body #dq-panel-content .dq-tabs:not(.pg-chips) > * > svg { display: none; }
}
@media (max-width: 640px) {
	/* Page heads: centred copy, chips and actions */
	html body .pg-head-copy { text-align: center; }
	html body .pg-title { justify-content: center; text-align: center; }
	html body .pg-sub { margin-inline: auto; }
	html body .pg-stats, html body .pg-actions { justify-content: center; }
	html body .pg-stats li { padding: .4rem .75rem; }
	html body .pg-head .pg-search { margin-inline: auto; }
	html body .dq-tabs.pg-chips, html body .pg-chips { justify-content: center; }
	html body .pg-section-head, html body .pg-sec-head { text-align: center; }
	/* Quiz start card */
	html body .dq-quiz-launch-card .dq-launch-heading { text-align: center; }
	html body .dq-quiz-launch-card h2 { font-size: clamp(1.45rem, 6.6vw, 2rem) !important; }
	html body .dq-quiz-launch-card .dq-quiz-meta { justify-content: center; }
	html body .dq-quiz-launch-card .dq-quiz-meta span { padding: .35rem .7rem; font-size: .8rem; }
	html body .dq-quiz-launch-card .dq-launch-mode { padding: .9rem !important; gap: .7rem; }
	html body .dq-quiz-launch-card .dq-launch-mode-icon { width: 2.8rem; height: 2.8rem; }
	/* Login hero */
	html body .au-aside { text-align: center; }
}