/* ── Variables ───────────────────────────────────────────────────────────── */

:root {
    --sq-bg:          #ffffff;
    --sq-bg-alt:      #f5f5f5;
    --sq-card:        #ffffff;
    --sq-border:      #e5e7eb;
    --sq-text:        #0a0a0a;
    --sq-text-muted:  #6b7280;
    --sq-primary:     #006aa7;
    --sq-primary-h:   #005a8e;
    --sq-secondary:   #fecc02;
    --sq-secondary-h: #e6b800;
    --sq-success:     #16a34a;
    --sq-error:       #dc2626;
    --sq-warning:     #d97706;
    --sq-radius:      0.75rem;
    --sq-radius-sm:   0.5rem;
    --sq-shadow:      0 0.125rem 0.75rem rgba(0,0,0,.08);
    --sq-shadow-lg:   0 0.5rem 2rem rgba(0,0,0,.12);
    --sq-nav-h:       4rem;
    --sq-transition:  all .2s ease;
}

@media (prefers-color-scheme: dark) {
    :root {
        --sq-bg:         #0a0a0a;
        --sq-bg-alt:     #141414;
        --sq-card:       #1a1a1a;
        --sq-border:     #2e2e2e;
        --sq-text:       #f5f5f5;
        --sq-text-muted: #9ca3af;
        --sq-primary:    #4a9fd4;
        --sq-primary-h:  #3a8fc4;
        --sq-shadow:     0 0.125rem 0.75rem rgba(0,0,0,.3);
        --sq-shadow-lg:  0 0.5rem 2rem rgba(0,0,0,.4);
    }
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.sq-body {
    background:  var(--sq-bg);
    color:       var(--sq-text);
    font-family: system-ui, -apple-system, sans-serif;
    font-size:   1rem;
    line-height: 1.6;
}

/* Hide adminbar in frontend. */
#wpadminbar { display: none !important; }

/* ── Layout ──────────────────────────────────────────────────────────────── */

.sq-wrapper {
    min-height:     100vh;
    display:        flex;
    flex-direction: column;
}

.sq-main {
    flex:        1;
    padding-top: var(--sq-nav-h);
}

.sq-page {
    max-width: 56.25rem;
    margin:    0 auto;
    padding:   5rem 1rem 4rem;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */

.sq-nav {
    position:      fixed;
    top:           0;
    left:          0;
    right:         0;
    height:        var(--sq-nav-h);
    background:    var(--sq-card);
    border-bottom: 0.0625rem solid var(--sq-border);
    z-index:       100;
    box-shadow:    var(--sq-shadow);
}

.sq-nav-inner {
    max-width:   68.75rem;
    margin:      0 auto;
    height:      100%;
    padding:     0 1rem;
    display:     flex;
    align-items: center;
    justify-content: space-between;
    gap:         1rem;
}

.sq-nav-logo {
    font-weight:     700;
    font-size:       1.125rem;
    color:           var(--sq-text);
    text-decoration: none;
    white-space:     nowrap;
}

.sq-nav-links {
    display:     flex;
    align-items: center;
    gap:         0.25rem;
    flex:        1;
}

.sq-nav-link {
    padding:         0.375rem 0.75rem;
    border-radius:   var(--sq-radius-sm);
    color:           var(--sq-text-muted);
    text-decoration: none;
    font-size:       0.875rem;
    font-weight:     500;
    transition:      var(--sq-transition);
}

.sq-nav-link:hover,
.sq-nav-link.active {
    color:      var(--sq-primary);
    background: var(--sq-bg-alt);
}

.sq-nav-user {
    display:     flex;
    align-items: center;
    gap:         0.75rem;
    white-space: nowrap;
}

.sq-nav-username {
    font-size: 0.8125rem;
    color:     var(--sq-text-muted);
}

.sq-nav-toggle {
    display:    none;
    background: none;
    border:     none;
    font-size:  1.375rem;
    cursor:     pointer;
    color:      var(--sq-text);
    padding:    0.25rem 0.5rem;
}

/* Mobile nav */
.sq-nav-mobile {
    display:        none;
    flex-direction: column;
    background:     var(--sq-card);
    border-top:     0.0625rem solid var(--sq-border);
    padding:        0.5rem 0;
}

.sq-nav-mobile.open { display: flex; }

.sq-nav-mobile-link {
    padding:         0.75rem 1.25rem;
    color:           var(--sq-text);
    text-decoration: none;
    font-size:       0.9375rem;
    border-bottom:   0.0625rem solid var(--sq-border);
}

.sq-nav-mobile-link:last-child { border-bottom: none; }

/* ── Footer ──────────────────────────────────────────────────────────────── */

.sq-footer {
    padding:    1.5rem 1rem;
    text-align: center;
    font-size:  0.8125rem;
    color:      var(--sq-text-muted);
    border-top: 0.0625rem solid var(--sq-border);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.sq-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    padding:         0.625rem 1.25rem;
    border-radius:   var(--sq-radius-sm);
    font-size:       0.875rem;
    font-weight:     600;
    cursor:          pointer;
    border:          none;
    text-decoration: none;
    transition:      var(--sq-transition);
    white-space:     nowrap;
}

.sq-btn-primary  { background: var(--sq-primary);   color: #fff; }
.sq-btn-primary:hover { background: var(--sq-primary-h); }

.sq-btn-secondary { background: var(--sq-secondary); color: #0a0a0a; }
.sq-btn-secondary:hover { background: var(--sq-secondary-h); }

.sq-btn-outline {
    background: transparent;
    color:      var(--sq-primary);
    border:     0.0625rem solid var(--sq-primary);
}

.sq-btn-outline:hover { background: var(--sq-primary); color: #fff; }

.sq-btn-full { width: 100%; }
.sq-btn-sm   { padding: 0.375rem 0.75rem; font-size: 0.8125rem; }

/* ── Cards ───────────────────────────────────────────────────────────────── */

.sq-card {
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding:       1.5rem;
    box-shadow:    var(--sq-shadow);
}

/* ── Form elements ───────────────────────────────────────────────────────── */

.sq-field { margin-bottom: 1rem; }

.sq-label {
    display:       block;
    font-size:     0.8125rem;
    font-weight:   600;
    margin-bottom: 0.375rem;
    color:         var(--sq-text);
}

.sq-input,
.sq-select {
    padding:       0.625rem 0.875rem;
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius-sm);
    background:    var(--sq-bg);
    color:         var(--sq-text);
    font-size:     0.875rem;
    outline:       none;
    transition:    var(--sq-transition);
    width:         auto;
}

.sq-input:focus,
.sq-select:focus { border-color: var(--sq-primary); }

.sq-select-full { width: 100%; }

.sq-toggle-label {
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.8125rem;
    cursor:      pointer;
    color:       var(--sq-text);
    white-space: nowrap;
}

/* ── Alerts ──────────────────────────────────────────────────────────────── */

.sq-alert {
    padding:       0.75rem 1rem;
    border-radius: var(--sq-radius-sm);
    font-size:     0.875rem;
    margin-bottom: 1rem;
}

.sq-alert-error {
    background: #fee2e2;
    color:      var(--sq-error);
    border:     0.0625rem solid #fca5a5;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.sq-hero {
    margin-bottom: 2rem;
    text-align:    center;
}

.sq-hero-title {
    font-size:     2rem;
    font-weight:   700;
    color:         var(--sq-text);
    margin-bottom: 0.5rem;
}

.sq-hero-subtitle {
    font-size: 1rem;
    color:     var(--sq-text-muted);
}

/* ── Section ─────────────────────────────────────────────────────────────── */

.sq-section       { margin-bottom: 2.5rem; }
.sq-section-title { font-size: 1.125rem; font-weight: 700; margin-bottom: 1rem; color: var(--sq-text); }
.sq-section-desc  { font-size: 0.875rem; color: var(--sq-text-muted); margin-bottom: 1rem; }
.sq-section-links { margin-top: 1rem; }

/* ── Stats grid ──────────────────────────────────────────────────────────── */

.sq-stats-grid,
.sq-quick-stats,
.sq-results-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    gap:                   0.75rem;
    margin-bottom:         1rem;
}

.sq-stat-card {
    background:     var(--sq-card);
    border:         0.0625rem solid var(--sq-border);
    border-radius:  var(--sq-radius);
    padding:        1.25rem 1rem;
    text-align:     center;
    display:        flex;
    flex-direction: column;
    gap:            0.5rem;
    box-shadow:     var(--sq-shadow);
}

.sq-stat-featured {
    border-color: var(--sq-primary);
    background:   var(--sq-primary);
    color:        #fff;
}

.sq-stat-featured .sq-stat-number,
.sq-stat-featured .sq-stat-label { color: #fff; }

.sq-stat-number {
    font-size:   2rem;
    font-weight: 700;
    color:       var(--sq-primary);
    line-height: 1;
}

.sq-stat-label {
    font-size:      0.75rem;
    color:          var(--sq-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

/* ── Mode grid ───────────────────────────────────────────────────────────── */

.sq-mode-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(16.25rem, 1fr));
    gap:                   1.25rem;
    margin-bottom:         2.5rem;
}

.sq-mode-card {
    background:     var(--sq-card);
    border:         0.0625rem solid var(--sq-border);
    border-radius:  var(--sq-radius);
    padding:        1.75rem 1.5rem;
    display:        flex;
    flex-direction: column;
    gap:            0.75rem;
    box-shadow:     var(--sq-shadow);
    transition:     var(--sq-transition);
}

.sq-mode-card:hover { transform: translateY(-0.125rem); box-shadow: var(--sq-shadow-lg); }

.sq-mode-icon  { font-size: 2.5rem; }
.sq-mode-title { font-size: 1.25rem; font-weight: 700; }
.sq-mode-desc  { font-size: 0.875rem; color: var(--sq-text-muted); flex: 1; }

/* ── Topic grid ──────────────────────────────────────────────────────────── */

.sq-topic-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap:                   0.75rem;
}

.sq-topic-card {
    background:      var(--sq-card);
    border:          0.0625rem solid var(--sq-border);
    border-radius:   var(--sq-radius-sm);
    padding:         1rem;
    display:         flex;
    flex-direction:  column;
    gap:             0.25rem;
    text-decoration: none;
    transition:      var(--sq-transition);
}

.sq-topic-card:hover { border-color: var(--sq-primary); transform: translateY(-0.0625rem); }

.sq-topic-name  { font-size: 0.875rem; font-weight: 600; color: var(--sq-text); }
.sq-topic-count { font-size: 0.75rem; color: var(--sq-text-muted); }

/* ── Quick links ─────────────────────────────────────────────────────────── */

.sq-quick-links {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap:                   0.75rem;
}

.sq-quick-link {
    background:      var(--sq-card);
    border:          0.0625rem solid var(--sq-border);
    border-radius:   var(--sq-radius-sm);
    padding:         1.25rem 0.75rem;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.5rem;
    text-decoration: none;
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--sq-text);
    transition:      var(--sq-transition);
}

.sq-quick-link:hover { border-color: var(--sq-primary); color: var(--sq-primary); }
.sq-quick-link-icon  { font-size: 1.8rem; }

/* ── Settings bar ────────────────────────────────────────────────────────── */

.sq-settings-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             0.75rem;
    margin-top:      1.5rem;
    margin-bottom:   1.5rem;
    padding:         0.75rem 1rem;
    background:      var(--sq-card);
    border:          0.0625rem solid var(--sq-border);
    border-radius:   var(--sq-radius);
}

.sq-settings-left  { display: flex; align-items: center; gap: 0.75rem; }
.sq-settings-right { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.sq-page-title     { font-size: 1.25rem; font-weight: 700; }
.sq-results-count  { font-size: 0.875rem; color: var(--sq-text-muted); }

/* ── Progress bar ────────────────────────────────────────────────────────── */

.sq-progress-bar-wrap {
    background:    var(--sq-border);
    border-radius: 99rem;
    height:        0.375rem;
    margin-bottom: 0.5rem;
    overflow:      hidden;
}

.sq-progress-bar {
    height:        100%;
    background:    var(--sq-primary);
    border-radius: 99rem;
    transition:    width .4s ease;
    width:         0%;
}

.sq-progress-text {
    font-size:     0.8125rem;
    color:         var(--sq-text-muted);
    margin-bottom: 1rem;
    text-align:    right;
}

/* ── Question card ───────────────────────────────────────────────────────── */

.sq-card-meta {
    display:       flex;
    align-items:   center;
    gap:           0.5rem;
    margin-bottom: 1rem;
    flex-wrap:     wrap;
}

.sq-question-text {
    font-size:     1.125rem;
    font-weight:   600;
    line-height:   1.5;
    margin-bottom: 0.5rem;
    color:         var(--sq-text);
}

.sq-question-sv {
    font-size:     0.9375rem;
    font-weight:   400;
    color:         var(--sq-text-muted);
    margin-bottom: 1.25rem;
    font-style:    italic;
}

/* ── Options ─────────────────────────────────────────────────────────────── */

.sq-options {
    display:        flex;
    flex-direction: column;
    gap:            0.625rem;
    margin-top:     1.25rem;
}

.sq-option {
    display:       flex;
    align-items:   center;
    gap:           0.875rem;
    padding:       0.875rem 1.125rem;
    background:    var(--sq-bg-alt);
    border:        0.125rem solid var(--sq-border);
    border-radius: var(--sq-radius-sm);
    cursor:        pointer;
    text-align:    left;
    font-size:     0.9375rem;
    color:         var(--sq-text);
    transition:    var(--sq-transition);
    width:         100%;
}

.sq-option:hover:not(:disabled) { border-color: var(--sq-primary); background: var(--sq-bg); }
.sq-option.correct   { border-color: var(--sq-success); background: #dcfce7; color: #166534; }
.sq-option.incorrect { border-color: var(--sq-error);   background: #fee2e2; color: #991b1b; }
.sq-option:disabled  { cursor: default; }

.sq-opt-key {
    width:           1.75rem;
    height:          1.75rem;
    border-radius:   50%;
    background:      var(--sq-border);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-weight:     700;
    font-size:       0.8125rem;
    flex-shrink:     0;
}

.sq-option.correct   .sq-opt-key { background: var(--sq-success); color: #fff; }
.sq-option.incorrect .sq-opt-key { background: var(--sq-error);   color: #fff; }

/* ── Explanation ─────────────────────────────────────────────────────────── */

.sq-explanation {
    margin-top:    1.25rem;
    padding:       1rem;
    background:    var(--sq-bg-alt);
    border-radius: var(--sq-radius-sm);
    border:        0.0625rem solid var(--sq-border);
}

.sq-explanation-result {
    font-size:     1.125rem;
    font-weight:   700;
    margin-bottom: 0.5rem;
}

.sq-explanation-text {
    font-size:     0.875rem;
    color:         var(--sq-text);
    line-height:   1.6;
    margin-bottom: 0.25rem;
}

/* ── Confidence ──────────────────────────────────────────────────────────── */

.sq-confidence       { margin-top: 1rem; }
.sq-confidence-label { font-size: 0.8125rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--sq-text-muted); }
.sq-confidence-btns  { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.sq-conf-btn {
    padding:       0.5rem 1rem;
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius-sm);
    background:    var(--sq-card);
    color:         var(--sq-text);
    font-size:     0.8125rem;
    cursor:        pointer;
    transition:    var(--sq-transition);
}

.sq-conf-btn:hover,
.sq-conf-btn.active { background: var(--sq-primary); color: #fff; border-color: var(--sq-primary); }

/* ── Flag button ─────────────────────────────────────────────────────────── */

.sq-flag-btn {
    margin-left:   auto;
    background:    none;
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius-sm);
    padding:       0.25rem 0.625rem;
    cursor:        pointer;
    font-size:     1rem;
    transition:    var(--sq-transition);
    color:         var(--sq-text-muted);
}

.sq-flag-btn:hover,
.sq-flag-btn.flagged { border-color: var(--sq-error); color: var(--sq-error); }

.sq-flag-note           { margin-top: 0.75rem; display: flex; gap: 0.5rem; }
.sq-flag-note .sq-input { flex: 1; }

/* ── Card actions ────────────────────────────────────────────────────────── */

.sq-card-actions { margin-top: 1rem; display: flex; justify-content: flex-end; }

/* ── Badges ──────────────────────────────────────────────────────────────── */

.sq-badge {
    padding:        0.1875rem 0.625rem;
    border-radius:  99rem;
    font-size:      0.6875rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.03125rem;
}

.sq-badge-topic      { background: #dbeafe; color: #1e40af; }
.sq-badge-difficulty { background: #fef3c7; color: #92400e; }

/* ── Login ───────────────────────────────────────────────────────────────── */

.sq-login-wrap {
    min-height:      100vh;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1.5rem 1rem;
    background:      var(--sq-bg);
}

.sq-login-card {
    width:         100%;
    max-width:     26.25rem;
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding:       2.5rem 2rem;
    box-shadow:    var(--sq-shadow-lg);
}

.sq-login-logo     { text-align: center; margin-bottom: 2rem; }
.sq-login-flag     { font-size: 3rem; display: block; margin-bottom: 0.75rem; }
.sq-login-title    { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.375rem; }
.sq-login-subtitle { font-size: 0.875rem; color: var(--sq-text-muted); }
.sq-login-form     { display: flex; flex-direction: column; gap: 1rem; }
.sq-login-form .sq-input { width: 100%; }

/* ── Exam ────────────────────────────────────────────────────────────────── */

.sq-exam-header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   0.75rem;
    font-size:       0.875rem;
    font-weight:     600;
}

.sq-exam-timer {
    background:    var(--sq-secondary);
    color:         #0a0a0a;
    padding:       0.375rem 1rem;
    border-radius: 99rem;
    font-weight:   700;
}

.sq-exam-timer.urgent { background: var(--sq-error); color: #fff; }

.sq-setup-card   { max-width: 31.25rem; margin: 0 auto; }
.sq-setup-title  { font-size: 1.125rem; font-weight: 700; margin-bottom: 1.5rem; }
.sq-setup-fields { display: flex; flex-direction: column; gap: 0; margin-bottom: 1.5rem; }

/* ── Results ─────────────────────────────────────────────────────────────── */

.sq-results-hero {
    text-align:    center;
    margin-bottom: 2rem;
    padding:       2rem;
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius);
}

.sq-results-icon  { font-size: 4rem; margin-bottom: 0.75rem; }
.sq-results-title { font-size: 1.75rem; font-weight: 700; margin-bottom: 0.5rem; }
.sq-results-score { font-size: 3rem; font-weight: 800; color: var(--sq-primary); }

.sq-results-actions {
    display:         flex;
    gap:             0.75rem;
    justify-content: center;
    margin-top:      1.5rem;
    flex-wrap:       wrap;
}

/* ── History & Flagged items ─────────────────────────────────────────────── */

.sq-history-item,
.sq-flagged-item {
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding:       1.25rem;
    margin-bottom: 0.75rem;
    transition:    var(--sq-transition);
}

.sq-history-item:hover,
.sq-flagged-item:hover { box-shadow: var(--sq-shadow); }

.sq-item-header  { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.sq-item-result  { font-size: 1.25rem; flex-shrink: 0; }
.sq-item-question    { font-size: 0.9375rem; font-weight: 600; flex: 1; }
.sq-item-question-sv { font-size: 0.8125rem; color: var(--sq-text-muted); font-style: italic; margin-top: 0.125rem; }
.sq-item-meta    { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem; }

.sq-item-answer {
    font-size:     0.8125rem;
    padding:       0.5rem 0.75rem;
    background:    var(--sq-bg-alt);
    border-radius: var(--sq-radius-sm);
    margin-bottom: 0.5rem;
}

.sq-item-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.75rem; }

.sq-item-note {
    font-size:     0.8125rem;
    color:         var(--sq-text-muted);
    font-style:    italic;
    padding:       0.5rem 0.75rem;
    background:    var(--sq-bg-alt);
    border-radius: var(--sq-radius-sm);
    margin-top:    0.5rem;
}

/* ── Dashboard specific ──────────────────────────────────────────────────── */

.sq-diff-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
}

.sq-diff-card {
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding:       1.25rem;
    text-align:    center;
}

.sq-diff-label  { font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; margin-bottom: 0.75rem; }
.sq-diff-number { font-size: 1.75rem; font-weight: 700; color: var(--sq-primary); }
.sq-diff-sub    { font-size: 0.75rem; color: var(--sq-text-muted); margin-top: 0.25rem; }

.sq-topic-stats { display: flex; flex-direction: column; gap: 0.625rem; }

.sq-topic-stat-row {
    display:       flex;
    align-items:   center;
    gap:           0.75rem;
    padding:       0.75rem 1rem;
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius-sm);
}

.sq-topic-stat-name     { flex: 1; font-size: 0.875rem; font-weight: 600; }
.sq-topic-stat-bar-wrap { flex: 2; background: var(--sq-border); border-radius: 99rem; height: 0.5rem; overflow: hidden; }
.sq-topic-stat-bar      { height: 100%; border-radius: 99rem; background: var(--sq-primary); }
.sq-topic-stat-pct      { font-size: 0.8125rem; font-weight: 700; color: var(--sq-primary); min-width: 2.5rem; text-align: right; }

.sq-weakest-list { display: flex; flex-direction: column; gap: 0.5rem; }

.sq-weakest-item {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         0.75rem 1rem;
    background:      #440000;
    border:          0.0625rem solid #fca5a5;
    border-radius:   var(--sq-radius-sm);
    font-size:       0.875rem;
}

.sq-weakest-name { font-weight: 600; }
.sq-weakest-pct  { font-weight: 700; color: var(--sq-error); }

.sq-confidence-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   0.75rem;
}

.sq-conf-stat {
    background:    var(--sq-card);
    border:        0.0625rem solid var(--sq-border);
    border-radius: var(--sq-radius);
    padding:       1.25rem;
    text-align:    center;
}

.sq-conf-stat-icon   { font-size: 2rem; margin-bottom: 0.5rem; }
.sq-conf-stat-number { font-size: 1.75rem; font-weight: 700; color: var(--sq-primary); }
.sq-conf-stat-label  { font-size: 0.75rem; color: var(--sq-text-muted); text-transform: uppercase; }

/* ── Heatmap ──────────────────────────────────────────────────────────────── */

.sq-heatmap {
    display:       flex;
    gap:           0.1875rem;
    flex-wrap:     wrap;
    margin-bottom: 0.5rem;
}

.sq-heatmap-day {
    width:         0.875rem;
    height:        0.875rem;
    border-radius: 0.1875rem;
    background:    var(--sq-border);
    cursor:        pointer;
    transition:    var(--sq-transition);
}

.sq-heatmap-day:hover { transform: scale(1.3); }
.sq-heat-0 { background: var(--sq-border); }
.sq-heat-1 { background: #bfdbfe; }
.sq-heat-2 { background: #60a5fa; }
.sq-heat-3 { background: #2563eb; }
.sq-heat-4 { background: #1d4ed8; }

.sq-heatmap-legend {
    display:     flex;
    align-items: center;
    gap:         1rem;
    font-size:   0.75rem;
    color:       var(--sq-text-muted);
}

.sq-heatmap-legend span {
    width:         0.75rem;
    height:        0.75rem;
    border-radius: 0.125rem;
    display:       inline-block;
}

/* ── Loading & empty states ──────────────────────────────────────────────── */

.sq-loading {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    padding:         4rem 0;
    color:           var(--sq-text-muted);
}

.sq-spinner {
    width:         2.5rem;
    height:        2.5rem;
    border:        0.1875rem solid var(--sq-border);
    border-top:    0.1875rem solid var(--sq-primary);
    border-radius: 50%;
    animation:     sq-spin .7s linear infinite;
}

@keyframes sq-spin { to { transform: rotate(360deg); } }

.sq-empty {
    text-align:      center;
    padding:         4rem 1.5rem;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.75rem;
}

.sq-empty-icon { font-size: 3rem; }
.sq-empty h2   { font-size: 1.25rem; font-weight: 700; }
.sq-empty p    { color: var(--sq-text-muted); }

.sq-load-more { text-align: center; margin-top: 1.5rem; }

/* ── Utilities ───────────────────────────────────────────────────────────── */

.hidden { display: none !important; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 48rem) {
    .sq-nav-links,
    .sq-nav-user   { display: none; }
    .sq-nav-toggle { display: block; }
    .sq-nav        { height: auto; position: fixed; }
    .sq-main       { padding-top: 4rem; }

    .sq-hero-title  { font-size: 1.5rem; }
    .sq-mode-grid   { grid-template-columns: 1fr; }
    .sq-diff-grid,
    .sq-confidence-grid { grid-template-columns: 1fr; }
    .sq-settings-bar    { flex-direction: column; align-items: flex-start; }
    .sq-results-score   { font-size: 2.25rem; }
    .sq-stats-grid      { grid-template-columns: repeat(2, 1fr); }
}

/* ── Login page specific ─────────────────────────────────────────────────── */

.sq-body .sq-main {
    padding-top: 0;
}

.sq-body:has(.sq-login-wrap) .sq-main {
    padding-top:     0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      100vh;
    background:      var(--sq-bg);
}