:root {
--dq-ink: #162033;
--dq-muted: #667085;
--dq-primary: #6d4aff;
--dq-primary-dark: #5537dc;
--dq-surface: #ffffff;
--dq-soft: #f4f2ff;
--dq-line: #e4e7ec;
--dq-radius: 20px;
}
.dq-shell {
box-sizing: border-box;
width: min(1180px, calc(100% - 32px));
margin: 48px auto;
color: var(--dq-ink);
overflow-wrap: anywhere;
}
.dq-shell *,
.dq-shell *::before,
.dq-shell *::after {
box-sizing: border-box;
}
.dq-page-header {
max-width: 720px;
margin-bottom: 32px;
}
.dq-kicker {
margin: 0 0 8px;
color: var(--dq-primary);
font-size: 13px;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.dq-page-header h1,
.dq-single h1,
.dq-start-panel h1,
.dq-attempt h1 {
margin: 0 0 14px;
font-size: clamp(32px, 5vw, 58px);
line-height: 1.04;
}
.dq-filters,
.dq-form-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin-bottom: 28px;
}
.dq-filters select,
.dq-start-form input:not([type="checkbox"]),
.dq-text-answer input,
.dq-question-form input,
.dq-question-form textarea,
.dq-question-form select {
width: 100%;
min-height: 46px;
padding: 10px 12px;
border: 1px solid var(--dq-line);
border-radius: 10px;
background: #fff;
color: var(--dq-ink);
}
.dq-card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.dq-card,
.dq-start-panel,
.dq-attempt,
.dq-summary {
border: 1px solid var(--dq-line);
border-radius: var(--dq-radius);
background: var(--dq-surface);
box-shadow: 0 14px 34px rgba(38, 31, 78, .08);
}
.dq-card {
overflow: hidden;
}
.dq-card-image {
display: block;
aspect-ratio: 16 / 9;
background: var(--dq-soft);
}
.dq-card-image img,
.dq-hero-image img,
.dq-question-stage img {
width: 100%;
height: 100%;
object-fit: cover;
}
.dq-card-body,
.dq-start-panel,
.dq-attempt {
padding: clamp(20px, 4vw, 36px);
}
.dq-card h2 {
margin: 12px 0 8px;
font-size: 24px;
}
.dq-card h2 a {
color: inherit;
text-decoration: none;
}
.dq-taxonomy-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 18px;
margin: 12px 0 8px;
color: var(--dq-muted);
}
.dq-date-range {
margin: 8px 0 16px;
color: var(--dq-muted);
font-size: 14px;
}
.dq-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dq-badges span {
padding: 5px 9px;
border-radius: 999px;
background: var(--dq-badge-bg);
color: var(--dq-badge-color);
font-size: 12px;
font-weight: 800;
}
.dq-meta {
display: flex;
gap: 22px;
}
.dq-meta div {
display: grid;
gap: 2px;
}
.dq-meta dt {
color: var(--dq-muted);
font-size: 12px;
}
.dq-meta dd {
margin: 0;
font-weight: 750;
}
.dq-card-actions,
.dq-attempt-actions,
.dq-email-verification {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.dq-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 10px 18px;
border: 1px solid var(--dq-primary);
border-radius: 10px;
background: var(--dq-primary);
color: #fff;
font-weight: 750;
text-decoration: none;
cursor: pointer;
}
.dq-button:hover {
background: var(--dq-primary-dark);
color: #fff;
}
.dq-button-secondary {
background: #fff;
color: var(--dq-primary);
}
.dq-button-wide {
width: 100%;
}
.dq-button:disabled {
cursor: not-allowed;
opacity: .5;
}
.dq-single {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 34px;
}
.dq-summary {
align-self: start;
padding: 24px;
position: sticky;
top: 24px;
}
.dq-summary .dq-meta {
display: grid;
}
.dq-hero-image {
overflow: hidden;
margin: 24px 0;
border-radius: var(--dq-radius);
aspect-ratio: 16 / 8;
}
.dq-start-panel {
max-width: 820px;
margin: 0 auto;
}
.dq-form-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dq-form-grid label,
.dq-email-verification label {
display: grid;
gap: 6px;
font-weight: 700;
}
.dq-span-2 {
grid-column: 1 / -1;
}
.dq-consent {
display: flex;
gap: 10px;
align-items: flex-start;
margin: 12px 0;
cursor: pointer;
line-height: 1.45;
}
.dq-consent a {
color: var(--dq-primary);
text-decoration: underline;
text-underline-offset: 2px;
}
.dq-start-form .dq-consent input[type="checkbox"] {
flex: 0 0 auto;
width: 20px;
height: 20px;
min-height: 0;
margin: 2px 0 0;
padding: 0;
accent-color: var(--dq-primary);
}
.dq-attempt-header {
display: flex;
justify-content: space-between;
gap: 24px;
}
.dq-attempt h1 {
font-size: clamp(25px, 4vw, 40px);
}
.dq-timer {
min-width: 140px;
padding: 12px 18px;
border-radius: 14px;
background: var(--dq-soft);
text-align: center;
}
.dq-timer span {
display: block;
color: var(--dq-muted);
font-size: 12px;
}
.dq-timer strong {
font-size: 28px;
font-variant-numeric: tabular-nums;
}
.dq-timer.is-warning {
background: #fff1f2;
color: #b42318;
}
.dq-progress {
margin: 22px 0 28px;
}
.dq-preview-notice {
margin-bottom: 24px;
padding: 14px 16px;
border: 1px solid #f5c451;
border-radius: 12px;
background: #fff8df;
color: #684b00;
}
.dq-progress > div {
overflow: hidden;
height: 8px;
margin-top: 6px;
border-radius: 99px;
background: var(--dq-soft);
}
.dq-progress i {
display: block;
height: 100%;
background: var(--dq-primary);
transition: width .2s ease;
}
.dq-question-stage {
min-height: 320px;
user-select: none;
-webkit-user-select: none;
}
.dq-question-stage h2 {
font-size: clamp(24px, 4vw, 36px);
}
.dq-question-stage img {
max-height: 360px;
margin: 18px 0;
border-radius: 14px;
}
.dq-options {
display: grid;
gap: 10px;
margin-top: 22px;
}
.dq-options label {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px;
border: 1px solid var(--dq-line);
border-radius: 12px;
cursor: pointer;
}
.dq-options label:has(input:checked) {
border-color: var(--dq-primary);
background: var(--dq-soft);
}
.dq-text-answer {
display: grid;
gap: 8px;
margin-top: 22px;
font-weight: 700;
}
.dq-attempt-actions [data-save-status] {
flex: 1;
color: var(--dq-muted);
text-align: center;
}
.dq-result-hero {
padding: clamp(24px, 5vw, 52px);
border-radius: var(--dq-radius);
background: linear-gradient(135deg, #f4f2ff, #fff);
}
.dq-score {
display: flex;
align-items: baseline;
gap: 16px;
margin: 24px 0;
}
.dq-score strong {
color: var(--dq-primary);
font-size: clamp(48px, 10vw, 92px);
line-height: 1;
}
.dq-score span {
font-size: 20px;
font-weight: 800;
}
.dq-after-message {
margin: 20px 0;
padding: 16px 18px;
border-left: 4px solid var(--dq-primary);
border-radius: 8px;
background: #fff;
line-height: 1.55;
}
.dq-review {
display: grid;
gap: 14px;
margin-top: 32px;
user-select: none;
-webkit-user-select: none;
}
.dq-review article {
padding: 20px;
border: 1px solid var(--dq-line);
border-left: 5px solid #b42318;
border-radius: 14px;
background: #fff;
}
.dq-review article.is-correct {
border-left-color: #16803c;
}
@media (max-width: 900px) {
.dq-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.dq-filters {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px) {
.dq-shell {
width: min(100% - 20px, 1180px);
margin: 24px auto;
}
.dq-card-grid,
.dq-filters,
.dq-form-grid,
.dq-single {
grid-template-columns: 1fr;
}
.dq-span-2 {
grid-column: auto;
}
.dq-summary {
position: static;
}
.dq-attempt-header {
align-items: stretch;
flex-direction: column;
}
.dq-timer {
position: sticky;
top: 8px;
z-index: 2;
}
.dq-attempt-actions {
align-items: stretch;
}
.dq-attempt-actions [data-save-status] {
order: -1;
flex-basis: 100%;
}
}
@media (max-width: 460px) {
.dq-card-grid {
grid-template-columns: 1fr;
}
.dq-card-actions .dq-button,
.dq-attempt-actions .dq-button {
flex: 1;
}
}