:root {
    /* QuizB Design Tokens — keep this file as the web visual source of truth. */
    --qb-brand: #0d9488;
    --qb-brand-strong: #0f766e;
    --qb-brand-soft: #f0fdfa;
    --qb-info: #0284c7;
    --qb-info-soft: #f0f9ff;
    --qb-success: #15803d;
    --qb-warning: #b45309;
    --qb-danger: #dc2626;
    --qb-violet: #6d28d9;
    --qb-surface: #ffffff;
    --qb-surface-muted: #f8fafc;
    --qb-page: #f1f5f9;
    --qb-text: #0f172a;
    --qb-muted: #64748b;
    --qb-border: #cbd5e1;
    --qb-border-soft: #e2e8f0;
    --qb-radius-control: 10px;
    --qb-radius-tile: 16px;
    --qb-radius-card: 20px;
    --qb-radius-hero: 24px;
    --qb-space-1: .25rem;
    --qb-space-2: .5rem;
    --qb-space-3: .75rem;
    --qb-space-4: 1rem;
    --qb-space-6: 1.5rem;
    --qb-tile-height: 3.25rem;
    --qb-shadow-card: 0 4px 18px rgba(15, 23, 42, .06);
    --qb-shadow-hover: 0 14px 30px rgba(15, 23, 42, .12);
    --qb-focus-ring: 0 0 0 3px rgba(13, 148, 136, .18);
}

html.dark {
    --qb-brand: #2dd4bf;
    --qb-brand-strong: #5eead4;
    --qb-brand-soft: rgba(13, 148, 136, .16);
    --qb-info: #7dd3fc;
    --qb-info-soft: rgba(2, 132, 199, .16);
    --qb-success: #4ade80;
    --qb-warning: #fbbf24;
    --qb-danger: #f87171;
    --qb-violet: #c4b5fd;
    --qb-surface: #0f172a;
    --qb-surface-muted: #131d33;
    --qb-page: #070d18;
    --qb-text: #f1f5f9;
    --qb-muted: #c7d2e1;
    --qb-border: #334155;
    --qb-border-soft: #1e293b;
    --qb-shadow-card: 0 4px 18px rgba(0, 0, 0, .28);
    --qb-shadow-hover: 0 16px 34px rgba(0, 0, 0, .42);
    --qb-focus-ring: 0 0 0 3px rgba(45, 212, 191, .24);
}

/* Shared geometry for every dashboard card/tile. Page-specific CSS may change layout,
   but must not redefine these visual primitives. */
.qb-token-card,
.sc-teacher-card,
.sc-hub-card,
.sc-results-switcher-card {
    border-radius: var(--qb-radius-card) !important;
    box-shadow: var(--qb-shadow-card) !important;
}

.qb-token-tile,
.qb-token-action,
.sc-hub-tile,
.sc-student-action-tile,
.sc-class-btn {
    min-height: var(--qb-tile-height) !important;
    border-radius: var(--qb-radius-tile) !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease !important;
}

.qb-token-tile:hover,
.qb-token-action:hover,
.sc-hub-tile:hover,
.sc-student-action-tile:hover,
.sc-class-btn:hover {
    box-shadow: var(--qb-shadow-hover) !important;
}

.sc-class-actions-bar,
.qb-token-action-grid {
    gap: var(--qb-space-3) !important;
}

.qb-token-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
}

.qb-token-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--qb-space-2);
    padding: var(--qb-space-3) var(--qb-space-4);
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.qb-token-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: var(--qb-space-1) var(--qb-space-2);
    font-size: .7rem;
    font-weight: 900;
    background: var(--qb-brand-soft);
    color: var(--qb-brand-strong);
    border: 1px solid color-mix(in srgb, var(--qb-brand) 35%, transparent);
}
.qb-token-badge-success { color: var(--qb-success); background: color-mix(in srgb, var(--qb-success) 12%, transparent); }
.qb-token-badge-warning { color: var(--qb-warning); background: color-mix(in srgb, var(--qb-warning) 12%, transparent); }
.qb-token-badge-danger { color: var(--qb-danger); background: color-mix(in srgb, var(--qb-danger) 12%, transparent); }
.qb-token-badge-info { color: var(--qb-info); background: var(--qb-info-soft); }

@media (max-width: 600px) {
    .qb-token-action-grid { grid-template-columns: 1fr; }
}

.qb-token-action:focus-visible,
.sc-class-btn:focus-visible,
.sc-student-action-tile:focus-visible,
.sc-hub-tile:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: none;
    box-shadow: var(--qb-focus-ring) !important;
}

.dark .sc-teacher-card,
.dark .sc-hub-card,
.dark .sc-results-switcher-card,
.dark .sc-hub-tile,
.dark .sc-student-action-tile {
    background: var(--qb-surface) !important;
    border-color: var(--qb-border-soft) !important;
    color: var(--qb-text);
}