/* TestSeriesPoint — question-detail.css */
:root {
        --tsp-primary:   #1a237e;
        --tsp-primary-d: #283593;
        --tsp-accent:    #ffd54f;
        --tsp-bg:        #eef0f8;
        --tsp-border:    #dde1f0;
        --tsp-surface:   #f5f6fc;
    }

    body { background: var(--tsp-bg); }

    /* ── Navbar ── */
    .tsp-navbar {
        background: var(--tsp-primary);
        display: flex; align-items: center; justify-content: space-between;
        padding: 0 24px; height: 54px;
        position: sticky; top: 0; z-index: 100;
    }
    .tsp-brand {
        color: #fff; font-size: 17px; font-weight: 600;
        display: flex; align-items: center; gap: 8px; text-decoration: none;
    }
    .tsp-brand em { color: var(--tsp-accent); font-style: normal; }
    .tsp-nav-links { display: flex; gap: 2px; }
    .tsp-nav-links a {
        color: rgba(255,255,255,.78); font-size: 13px;
        padding: 6px 12px; border-radius: 6px;
        text-decoration: none; display: flex; align-items: center; gap: 5px;
        transition: background .15s;
    }
    .tsp-nav-links a:hover,
    .tsp-nav-links a.active { background: rgba(255,255,255,.15); color: #fff; }

    /* ── Sub-nav ── */
    .tsp-subnav {
        background: var(--tsp-primary-d);
        padding: 5px 24px; display: flex; gap: 4px;
    }
    .tsp-subnav a {
        color: rgba(255,255,255,.65); font-size: 12px;
        padding: 4px 10px; border-radius: 4px; text-decoration: none;
        transition: background .15s;
    }
    .tsp-subnav a:hover,
    .tsp-subnav a.active { background: rgba(255,255,255,.15); color: #fff; }

    /* ── Hero ── */
    .tsp-hero {
        background: var(--tsp-primary);
        padding: 22px 24px 32px; color: #fff;
    }
    .tsp-bc {
        font-size: 12px; color: rgba(255,255,255,.5);
        margin-bottom: 10px; display: flex; align-items: center; gap: 6px;
    }
    .tsp-bc a { color: rgba(255,255,255,.6); text-decoration: none; }
    .tsp-bc a:hover { color: #fff; }
    .tsp-hero h1 { font-size: 22px; font-weight: 600; margin-bottom: 4px; }
    .tsp-hero p  { font-size: 13px; color: rgba(255,255,255,.62); }

    /* ── Page ── */
    .tsp-page { max-width: 900px; margin: 0 auto; padding: 24px 20px 48px; }

    /* ── Card ── */
    .tsp-card {
        background: #fff; border: 0.5px solid var(--tsp-border);
        border-radius: 12px; overflow: hidden; margin-bottom: 16px;
    }
    .tsp-card-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 13px 20px; background: var(--tsp-surface);
        border-bottom: 0.5px solid var(--tsp-border);
    }
    .tsp-card-title {
        font-size: 14px; font-weight: 600;
        display: flex; align-items: center; gap: 7px; color: #1e293b;
    }
    .tsp-card-title i { color: var(--tsp-primary); font-size: 16px; }
    .tsp-card-body { padding: 24px; }

    /* ── Buttons ── */
    .btn-tsp-outline {
        background: #fff; color: var(--tsp-primary);
        border: 0.5px solid var(--tsp-primary); border-radius: 8px;
        padding: 8px 16px; font-size: 13px; cursor: pointer;
        display: inline-flex; align-items: center; gap: 6px;
        transition: background .15s; text-decoration: none; font-family: inherit;
    }
    .btn-tsp-outline:hover { background: #e8edf9; color: var(--tsp-primary); }

    /* ── Section label ── */
    .tsp-sec-lbl {
        font-size: 11px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .5px;
        margin-bottom: 14px; display: flex; align-items: center; gap: 8px;
    }
    .tsp-sec-lbl::after { content: ''; flex: 1; height: 0.5px; background: var(--tsp-border); }

    /* ── Question hero box ── */
    .q-box {
        background: #f0f3fc;
        border: 0.5px solid #c5cae9;
        border-left: 4px solid var(--tsp-primary);
        border-radius: 0 10px 10px 0;
        padding: 16px 18px;
        margin-bottom: 20px;
    }
    .q-box-meta {
        font-size: 11px; color: #64748b;
        display: flex; align-items: center; gap: 6px;
        margin-bottom: 8px;
    }
    .q-box-text {
        font-size: 15px; font-weight: 500; color: #1e293b; line-height: 1.6;
    }

    /* ── Assignment badge ── */
    .tsp-assign-badge {
        display: inline-flex; align-items: center; gap: 5px;
        background: #e8edf9; color: var(--tsp-primary);
        border: 0.5px solid #c5cae9;
        border-radius: 20px; padding: 4px 12px;
        font-size: 12px; font-weight: 500; margin-bottom: 18px;
    }

    /* ── Options grid ── */
    .options-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .opt-item {
        display: flex; align-items: flex-start; gap: 10px;
        padding: 12px 14px;
        border: 0.5px solid var(--tsp-border);
        border-radius: 10px;
        background: #fff;
        transition: border-color .15s, background .15s;
        font-size: 13px; color: #1e293b;
    }
    .opt-item.correct {
        border-color: #4caf50;
        background: #f0fdf4;
    }
    .opt-item.na-option {
        background: var(--tsp-surface);
        color: #94a3b8;
        font-style: italic;
    }
    .opt-label {
        display: inline-flex; align-items: center; justify-content: center;
        width: 26px; height: 26px; border-radius: 50%;
        font-size: 12px; font-weight: 600; flex-shrink: 0;
        background: #e8edf9; color: var(--tsp-primary);
    }
    .opt-item.correct .opt-label {
        background: #4caf50; color: #fff;
    }
    .opt-item.na-option .opt-label {
        background: #e2e8f0; color: #94a3b8;
    }
    .opt-text { flex: 1; line-height: 1.5; padding-top: 3px; }

    /* ── Correct answer banner ── */
    .correct-banner {
        margin-top: 18px;
        display: flex; align-items: center; gap: 10px;
        background: #f0fdf4;
        border: 0.5px solid #86efac;
        border-radius: 10px;
        padding: 13px 16px;
    }
    .correct-banner-ico {
        width: 34px; height: 34px; border-radius: 50%;
        background: #4caf50; color: #fff;
        display: flex; align-items: center; justify-content: center;
        font-size: 16px; flex-shrink: 0;
    }
    .correct-banner-lbl { font-size: 11px; color: #166534; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 2px; }
    .correct-banner-val { font-size: 14px; font-weight: 600; color: #166534; }

    /* ── Divider ── */
    .tsp-divider { height: 0.5px; background: var(--tsp-border); margin: 20px 0; }

    /* ── Responsive ── */
    @media (max-width: 580px) {
        .options-grid { grid-template-columns: 1fr; }
        .tsp-navbar { padding: 0 12px; }
        .tsp-nav-links { display: none; }
        .tsp-page { padding: 14px 12px 40px; }
    }