.sp {
    --navy:#203556;
    --blue:#31547d;
    --teal:#24bdb7;
    --bg:#edf2f7;
    --text:#17243b;
    --muted:#6b7d91;
    --line:#dce5ee;

    min-height:100vh;
    padding:18px 12px 70px;
    background:var(--bg);
    color:var(--text);
}

.sp-hero,
.sp-filters,
.sp-grid,
.sp-empty,
.sp-detail-head,
.sp-preview-head,
.sp-preview,
.sp-final-lock {
    width:min(1120px,100%);
    margin-left:auto;
    margin-right:auto;
}

.sp-hero {
    padding:28px 22px;
    border-radius:22px;
    background:var(--navy);
    color:#fff;
}

.sp-kicker,
.sp-preview-head > span {
    color:var(--teal);
    font-size:.7rem;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.sp-hero h1,
.sp-detail-head h1 {
    margin:7px 0;
}

.sp-hero h1 {
    font-size:clamp(2rem,8vw,3.6rem);
}

.sp-hero p {
    color:rgba(255,255,255,.72);
}

.sp-premium-chip {
    display:inline-flex;
    margin-top:12px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(36,189,183,.15);
    color:var(--teal);
    font-size:.72rem;
    font-weight:900;
}

.sp-filters {
    display:grid;
    gap:9px;
    margin-top:15px;
    margin-bottom:20px;
    padding:13px;
    border:1px solid var(--line);
    border-radius:14px;
    background:#fff;
}

.sp-filters input,
.sp-filters select {
    min-height:43px;
    box-sizing:border-box;
    width:100%;
    padding:8px 10px;
    border:1px solid #ccd8e3;
    border-radius:9px;
    background:#fff;
    font:inherit;
}

.sp-filters button {
    min-height:43px;
    border:0;
    border-radius:9px;
    background:var(--teal);
    color:#153348;
    font-weight:900;
}

.sp-grid {
    display:grid;
    gap:13px;
}

.sp-card {
    padding:18px;
    border:1px solid var(--line);
    border-radius:17px;
    background:#fff;
}

.sp-card-top,
.sp-detail-tags,
.sp-summary {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.sp-card-top span,
.sp-card-top strong,
.sp-detail-tags span,
.sp-summary span {
    padding:5px 8px;
    border-radius:999px;
    background:#edf5f5;
    color:#168e89;
    font-size:.66rem;
    font-weight:900;
}

.sp-card h2 {
    margin:13px 0 7px;
    color:var(--navy);
}

.sp-meta,
.sp-numbers {
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    color:var(--muted);
    font-size:.73rem;
}

.sp-numbers {
    margin-top:13px;
    padding-top:12px;
    border-top:1px solid var(--line);
}

.sp-open {
    display:flex;
    min-height:42px;
    margin-top:15px;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--navy);
    color:#fff;
    text-decoration:none;
    font-weight:900;
}

.sp-empty {
    padding:35px 20px;
    border-radius:18px;
    background:#fff;
    text-align:center;
}

.sp-detail-head {
    padding:23px;
    border-radius:20px;
    background:#fff;
    border:1px solid var(--line);
}

.sp-back {
    display:inline-flex;
    margin-bottom:18px;
    color:var(--blue);
    font-size:.75rem;
    font-weight:900;
    text-decoration:none;
}

.sp-detail-head h1 {
    margin-top:12px;
    color:var(--navy);
    font-size:clamp(1.8rem,7vw,3rem);
}

.sp-detail-head > p {
    color:var(--muted);
}

.sp-lock,
.sp-premium-ok {
    display:grid;
    gap:12px;
    margin-top:21px;
    padding:17px;
    border-radius:15px;
}

.sp-lock {
    background:#f4f7fb;
    border:1px solid #dbe4ec;
}

.sp-premium-ok {
    background:#eaf8f7;
    border:1px solid rgba(36,189,183,.3);
}

.sp-lock-icon {
    display:grid;
    width:42px;
    height:42px;
    place-items:center;
    border-radius:12px;
    background:var(--navy);
    color:var(--teal);
}

.sp-lock strong,
.sp-premium-ok strong {
    color:var(--navy);
}

.sp-lock p,
.sp-premium-ok span {
    margin:4px 0 0;
    color:var(--muted);
    font-size:.78rem;
    line-height:1.5;
}

.sp-premium-btn,
.sp-final-lock a {
    display:flex;
    min-height:43px;
    padding:0 14px;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--teal);
    color:#153348;
    text-decoration:none;
    font-weight:900;
}

.sp-start-soon {
    font-weight:800;
}

.sp-preview-head {
    margin-top:28px;
    margin-bottom:12px;
}

.sp-preview-head h2 {
    margin:5px 0;
    color:var(--navy);
}

.sp-preview-head p {
    color:var(--muted);
    font-size:.8rem;
}

.sp-preview {
    display:grid;
    gap:12px;
}

.sp-question {
    padding:18px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff;
}

.sp-question-number {
    margin-bottom:12px;
    color:var(--blue);
    font-size:.72rem;
    font-weight:900;
}

.sp-question-text {
    line-height:1.55;
}

.sp-readonly-options {
    display:grid;
    gap:8px;
    margin-top:16px;
}

.sp-readonly-options > div {
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    gap:9px;
    padding:10px;
    align-items:flex-start;
    border:1px solid var(--line);
    border-radius:10px;
    background:#f8fafc;
    user-select:text;
    cursor:default;
}

.sp-readonly-options b {
    display:grid;
    width:27px;
    height:27px;
    place-items:center;
    border-radius:7px;
    background:#e7edf3;
    color:var(--navy);
}

.sp-final-lock {
    margin-top:25px;
    padding:25px;
    border-radius:18px;
    background:var(--navy);
    color:#fff;
    text-align:center;
}

.sp-final-lock strong {
    font-size:1.3rem;
}

.sp-final-lock p {
    color:rgba(255,255,255,.7);
}

.sp-final-lock a {
    max-width:290px;
    margin:14px auto 0;
}

@media(min-width:700px) {
    .sp {
        padding:27px 20px 80px;
    }

    .sp-filters {
        grid-template-columns:
            minmax(250px,2fr)
            1fr
            .7fr
            auto;
    }

    .sp-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .sp-lock,
    .sp-premium-ok {
        grid-template-columns:
            auto minmax(0,1fr) auto;
        align-items:center;
    }
}

@media(min-width:1000px) {
    .sp-grid {
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}

@media(min-width:900px) {
    .sp-filters {
        grid-template-columns:
            minmax(190px,2fr)
            minmax(130px,1fr)
            minmax(110px,.8fr)
            90px
            130px
            auto;
    }
}