/* PTH Dark Personality Test — Public Styles */

.pdark-wrap { max-width: 680px; margin: 0 auto; font-family: inherit; }

/* ── Intro ─────────────────────────────────────────────────────────────────── */
.pdark-intro { background: linear-gradient(135deg, #0d0d1a 0%, #1a0a1a 50%, #0a0d1a 100%); color: #f1f5f9; border-radius: 20px; padding: 40px 36px; text-align: center; }
.pdark-intro__icon { font-size: 60px; display: block; margin-bottom: 14px; filter: drop-shadow(0 0 20px rgba(139,92,246,.5)); }
.pdark-intro__title { font-size: 26px; font-weight: 900; margin: 0 0 8px; letter-spacing: -0.5px; background: linear-gradient(135deg,#c4b5fd,#f9a8d4,#fca5a5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.pdark-intro__sub { font-size: 15px; color: #7c8db0; margin: 0 0 20px; }
.pdark-trait-chips { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pdark-trait-chip { display: flex; align-items: center; gap: 7px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid; font-size: 13px; font-weight: 700; }
.pdark-intro__list { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
.pdark-intro__list li { font-size: 14px; color: #7c8db0; }
.pdark-intro__note { font-size: 13px; color: #4a5568; border: 1px solid #2a2a3a; border-radius: 10px; padding: 12px 16px; margin: 0 0 24px; }

/* ── Progress ──────────────────────────────────────────────────────────────── */
.pdark-progress { margin-bottom: 20px; }
.pdark-progress__track { height: 5px; background: #1a1a2a; border-radius: 999px; overflow: hidden; margin-bottom: 5px; }
.pdark-progress__fill { height: 100%; background: linear-gradient(90deg, #7c3aed, #ef4444); border-radius: 999px; transition: width .4s ease; }
.pdark-progress__label { font-size: 12px; color: #4a5568; font-weight: 600; }

/* ── Block ─────────────────────────────────────────────────────────────────── */
.pdark-block { background: #0f0f1a; border-radius: 20px; box-shadow: 0 4px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.05); overflow: hidden; }
.pdark-block__header { padding: 22px 28px; border-bottom: 1px solid #1e1e2e; border-left: 4px solid; background: rgba(255,255,255,.02); }
.pdark-block__type { font-size: 18px; font-weight: 800; margin-bottom: 4px; }
.pdark-block__desc { font-size: 13px; color: #4a5568; margin: 0; }

/* ── Questions ─────────────────────────────────────────────────────────────── */
.pdark-questions { padding: 20px 28px; display: flex; flex-direction: column; gap: 22px; }
.pdark-q__text { font-size: 15px; font-weight: 500; color: #c9d1e0; margin: 0 0 12px; line-height: 1.5; display: flex; align-items: flex-start; gap: 10px; }
.pdark-q__num { min-width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #0f0f1a; flex-shrink: 0; margin-top: 1px; }

/* ── Scale ─────────────────────────────────────────────────────────────────── */
.pdark-scale { display: flex; gap: 8px; }
.pdark-scale__opt {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 6px; border: 1.5px solid #2a2a3a; border-radius: 10px;
    background: #13131f; cursor: pointer; text-align: center;
    transition: border-color .12s, background .12s;
    user-select: none; color: #7c8db0;
}
.pdark-scale__opt input { display: none; }
.pdark-scale__opt:hover { border-color: #8b5cf6; background: #1e1030; }
.pdark-scale__opt.selected { color: #0f0f1a; }
.pdark-scale__val { font-size: 18px; font-weight: 800; line-height: 1; }
.pdark-scale__lbl { font-size: 10px; font-weight: 700; }

/* ── Nav ───────────────────────────────────────────────────────────────────── */
.pdark-block__nav { display: flex; justify-content: space-between; align-items: center; padding: 14px 28px 24px; background: #0f0f1a; }
.pdark-form__error { text-align: center; color: #ef4444; font-size: 14px; font-weight: 600; margin: 12px 0 0; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.pdark-btn { display: inline-flex; align-items: center; gap: 7px; padding: 12px 24px; border-radius: 12px; font-size: 15px; font-weight: 700; cursor: pointer; border: none; transition: opacity .15s, transform .1s; }
.pdark-btn:hover { opacity: .9; transform: translateY(-1px); }
.pdark-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.pdark-btn--primary { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; }
.pdark-btn--back { background: #1a1a2a; color: #7c8db0; border: 1px solid #2a2a3a; }
.pdark-btn--submit { background: linear-gradient(135deg, #4c1d95, #7c3aed, #ef4444); background-size: 200%; animation: pdk-gradient 3s ease infinite; color: #fff; font-size: 15px; padding: 14px 28px; }
@keyframes pdk-gradient { 0%,100%{background-position:0%} 50%{background-position:100%} }

@media (max-width: 520px) {
    .pdark-intro { padding: 28px 20px; }
    .pdark-block__header, .pdark-questions, .pdark-block__nav { padding-left: 16px; padding-right: 16px; }
    .pdark-scale { gap: 5px; }
    .pdark-scale__opt { padding: 8px 4px; }
    .pdark-scale__val { font-size: 15px; }
}