/**
 * ═══════════════════════════════════════════════════════════════════════════════════
 * PF_quizgen - Ultimate CSS Stylesheet
 * QuizGen Module - LMS Green-Blue Design
 * Framework: PFWS 1.4.1.3.25
 * Version: 2.0.0 (MEGA Edition)
 * ═══════════════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════════════
   ROOT VARIABLES - LMS GREEN-BLUE COLOR SCHEME
   ═══════════════════════════════════════════════════════════════════════════════════ */

:root {
    /* LMS Green-Blue Gradient Colors */
    --quizgen-primary-green: #2ecc71;
    --quizgen-primary-blue: #3498db;
    --quizgen-gradient: linear-gradient(135deg, #2ecc71 0%, #3498db 100%);
    --quizgen-gradient-reverse: linear-gradient(135deg, #3498db 0%, #2ecc71 100%);
    
    /* Accent Colors */
    --quizgen-accent: #e74c3c;
    --quizgen-warning: #f39c12;
    --quizgen-success: #27ae60;
    --quizgen-info: #3498db;
    
    /* Neutral Colors */
    --quizgen-dark: #2c3e50;
    --quizgen-gray-dark: #34495e;
    --quizgen-gray: #7f8c8d;
    --quizgen-gray-light: #bdc3c7;
    --quizgen-white: #ffffff;
    --quizgen-light: #ecf0f1;
    
    /* Background */
    --quizgen-bg: #f8f9fa;
    --quizgen-bg-card: #ffffff;
    --quizgen-bg-hover: #f1f3f5;
    
    /* Shadows */
    --quizgen-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --quizgen-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
    --quizgen-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
    --quizgen-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.18);
    
    /* Transitions */
    --quizgen-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --quizgen-transition-fast: all 0.15s ease;
    
    /* Border Radius */
    --quizgen-radius-sm: 4px;
    --quizgen-radius-md: 8px;
    --quizgen-radius-lg: 12px;
    --quizgen-radius-xl: 16px;
    
    /* Spacing */
    --quizgen-space-xs: 4px;
    --quizgen-space-sm: 8px;
    --quizgen-space-md: 16px;
    --quizgen-space-lg: 24px;
    --quizgen-space-xl: 32px;
    
    /* Animation Control */
    --quizgen-animation-play-state: running;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   CUSTOM SCROLLBAR
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-module::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.pf-quizgen-module::-webkit-scrollbar-track {
    background: var(--quizgen-light);
    border-radius: 4px;
}

.pf-quizgen-module::-webkit-scrollbar-thumb {
    background: var(--quizgen-gradient);
    border-radius: 4px;
    transition: var(--quizgen-transition-fast);
}

.pf-quizgen-module::-webkit-scrollbar-thumb:hover {
    background: var(--quizgen-gradient-reverse);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   LAYOUT BASE
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-layout-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pf-quizgen-topnav-spacer {
    height: var(--pf-dashboard-topnav-height, 60px);
    margin-top: 0;
    width: 100%;
    pointer-events: none;
    flex-shrink: 0;
}

.pf-overlay .pf-quizgen-topnav-spacer {
    display: none !important;
    height: 0 !important;
}

.pf-quizgen-box {
    position: relative;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.pf-quizgen-box.overlay-mode {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.pf-quizgen-module {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   HEADER - LMS GREEN-BLUE GRADIENT
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-header {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 30%, #3498db 70%, #2980b9 100%);
    background-size: 200% 200%;
    animation: quizgenGradientWave 8s ease infinite;
    animation-play-state: var(--quizgen-animation-play-state);
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
    flex-shrink: 0;
}

@keyframes quizgenGradientWave {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.pf-quizgen-header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: quizgenWaveFloat 12s ease-in-out infinite;
    animation-play-state: var(--quizgen-animation-play-state);
    pointer-events: none;
}

.pf-quizgen-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 120% at 20% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.16) 50%, transparent 72%);
    animation: quizgenHeaderShimmer 7s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes quizgenHeaderShimmer {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

@keyframes quizgenWaveFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5%, -5%) rotate(90deg); }
    50% { transform: translate(-5%, 5%) rotate(180deg); }
    75% { transform: translate(5%, 5%) rotate(270deg); }
}

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes cardPulseIn {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes teamCardRevealStagger {
    0% {
        opacity: 0;
        transform: translateY(16px) rotateX(-10deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}

.pf-quizgen-header-overlay {
    position: relative;
}

.pf-quizgen-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
}

.pf-quizgen-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pf-quizgen-header-compact-logo {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 3;
}

.pf-quizgen-header-compact-logo-image {
    width: 34px;
    height: 34px;
    display: block;
    object-fit: contain;
}

.pf-quizgen-header-compact-logo svg {
    width: 22px;
    height: 22px;
}

.pf-drag-handle {
    cursor: grab;
    user-select: none;
    transition: transform 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.86);
    background: linear-gradient(135deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 3px 10px rgba(9, 40, 66, 0.2);
    flex-shrink: 0;
    z-index: 1;
}

.pf-drag-handle:hover {
    transform: scale(1.08);
}

.pf-drag-handle:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.pf-quizgen-icon-wrapper {
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(9, 40, 66, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    z-index: 10;
    pointer-events: auto;
}

.pf-quizgen-icon-wrapper:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.2) 100%);
    transform: scale(1.08) rotate(5deg);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.pf-quizgen-icon-wrapper:active {
    transform: scale(0.95) rotate(-5deg);
}

.pf-quizgen-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    user-select: none;
}

.pf-quizgen-icon[hidden] {
    display: none !important;
}

.pf-quizgen-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.pf-quizgen-title-section {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pf-quizgen-title {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--quizgen-white);
}

.pf-quizgen-version {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    height: 28px;
    color: rgba(255, 255, 255, 0.82);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   USER PILL
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-user {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 3px 6px;
    height: 34px;
    min-height: 34px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.pf-quizgen-user:hover {
    background: rgba(8, 17, 31, 0.42);
    border-color: rgba(255, 255, 255, 0.34);
}

.pf-quizgen-user:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.9);
    outline-offset: 2px;
}

.pf-quizgen-user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.12) 100%);
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

.pf-quizgen-user-avatar[data-fallback="1"] {
    text-transform: uppercase;
}

.pf-quizgen-user-avatar-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 999px;
}

.pf-quizgen-user-name {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    white-space: nowrap;
}

.pf-quizgen-bubu-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 0.74rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.96);
    background: linear-gradient(135deg, rgba(233, 71, 150, 0.34) 0%, rgba(89, 124, 255, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.pf-quizgen-bubu-icon {
    font-size: 0.8rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   DASHBOARD BUTTON + SUBMENU
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-dashboard-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 1100;
}

/* Header tooltips (PF_CMS parity, QuizGen colors kept) */
.pf-quizgen-tooltip-anchor {
    position: relative;
}

.pf-quizgen-tooltip-anchor::after {
    content: attr(data-pf-tooltip);
    position: absolute;
    left: 50%;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    font-size: 0.74rem;
    font-weight: 700;
    white-space: normal;
    min-width: 84px;
    max-width: min(220px, calc(100vw - 24px));
    text-align: center;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1200;
}

.pf-quizgen-tooltip-anchor::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(15, 23, 42, 0.94);
    transform: translateX(-50%) translateY(-4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1200;
}

.pf-quizgen-tooltip-right::after {
    left: auto;
    right: 0;
    transform: translateY(-4px);
}

.pf-quizgen-tooltip-right::before {
    left: auto;
    right: 14px;
    transform: translateY(-4px);
}

.pf-quizgen-tooltip-anchor:hover::after,
.pf-quizgen-tooltip-anchor:focus-visible::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pf-quizgen-tooltip-anchor:hover::before,
.pf-quizgen-tooltip-anchor:focus-visible::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.pf-quizgen-tooltip-right:hover::after,
.pf-quizgen-tooltip-right:focus-visible::after,
.pf-quizgen-tooltip-right:hover::before,
.pf-quizgen-tooltip-right:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

.pf-quizgen-tooltip-profile::after {
    min-width: 92px;
}

.pf-quizgen-tooltip-dashboard::after {
    min-width: 138px;
}

.pf-quizgen-tooltip-reveal::after {
    min-width: 156px;
}

@media (hover: none) {
    .pf-quizgen-tooltip-anchor::before,
    .pf-quizgen-tooltip-anchor::after {
        display: none;
    }
}

.pf-quizgen-meta-tooltip {
    position: fixed;
    left: 0;
    top: 0;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.94);
    color: #f8fafc;
    font-size: 0.76rem;
    line-height: 1.3;
    box-shadow: 0 10px 24px rgba(2, 6, 23, 0.28);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1300;
}

.pf-quizgen-meta-tooltip strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

.pf-quizgen-meta-tooltip span {
    opacity: 0.92;
}

.pf-quizgen-meta-tooltip.pf-quizgen-tooltip-show {
    opacity: 1;
}

.pf-quizgen-btn-dashboard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    height: 34px;
    min-height: 34px;
    background: rgba(8, 17, 31, 0.28);
    color: var(--quizgen-white);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--quizgen-transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.pf-quizgen-btn-dashboard:hover {
    background: rgba(8, 17, 31, 0.42);
    border-color: rgba(255, 255, 255, 0.34);
    transform: translateY(-1px);
}

.pf-quizgen-dashboard-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pf-quizgen-dashboard-logo {
    width: 18px;
    height: 18px;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.pf-quizgen-btn-dashboard:hover .pf-quizgen-dashboard-logo {
    transform: rotate(8deg) scale(1.08);
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.42));
}

.pf-quizgen-dashboard-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    line-height: 1.1;
}

.pf-quizgen-dashboard-submenu {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    min-width: 230px;
    display: grid;
    gap: 4px;
    padding: 6px;
    background: rgba(11, 25, 41, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
    z-index: 1250;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.pf-quizgen-dashboard-submenu[hidden] {
    display: none;
}

.pf-quizgen-dashboard-submenu::before,
.pf-quizgen-dashboard-submenu::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    pointer-events: none;
}

.pf-quizgen-dashboard-submenu::before {
    top: -9px;
    right: 18px;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 9px solid rgba(255, 255, 255, 0.2);
}

.pf-quizgen-dashboard-submenu::after {
    top: -8px;
    right: 19px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid rgba(11, 25, 41, 0.96);
}

.pf-quizgen-dashboard-submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    color: #f4f8ff;
    background: transparent;
    border: none;
    border-radius: 8px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.pf-quizgen-dashboard-submenu-item:hover,
.pf-quizgen-dashboard-submenu-item:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    outline: none;
}

.pf-quizgen-dashboard-submenu-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 9px 10px;
    color: #f4f8ff;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: background 0.15s ease;
}

.pf-quizgen-dashboard-submenu-switch:hover {
    background: rgba(255, 255, 255, 0.08);
}

.pf-quizgen-dashboard-submenu-switch-label {
    font-weight: 700;
    color: #f4f8ff;
}

.pf-quizgen-dashboard-submenu-switch-ui {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pf-quizgen-dashboard-submenu-switch-track {
    width: 34px;
    height: 18px;
    border-radius: 999px;
    border: 1px solid rgba(15, 23, 42, 0.2);
    background: rgba(16, 185, 129, 0.5);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pf-quizgen-dashboard-submenu-switch-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    transform: translateX(16px);
    transition: transform 0.22s ease;
}

.pf-quizgen-dashboard-submenu-switch-state {
    min-width: 30px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 2px 7px;
    color: #065f46;
    background: rgba(16, 185, 129, 0.2);
}

.pf-quizgen-dashboard-submenu-switch[aria-checked="false"] .pf-quizgen-dashboard-submenu-switch-track {
    background: rgba(244, 63, 94, 0.16);
    border-color: rgba(190, 24, 93, 0.48);
}

.pf-quizgen-dashboard-submenu-switch[aria-checked="false"] .pf-quizgen-dashboard-submenu-switch-dot {
    transform: translateX(0);
}

.pf-quizgen-dashboard-submenu-switch[aria-checked="false"] .pf-quizgen-dashboard-submenu-switch-state {
    color: #9f1239;
    background: rgba(244, 63, 94, 0.18);
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   INFO SECTION (Toggleable)
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-info-section {
    background: linear-gradient(180deg, rgba(249, 251, 253, 0.98) 0%, rgba(241, 246, 250, 0.98) 100%);
    padding: 18px 22px;
    border-bottom: 1px solid rgba(214, 226, 235, 0.95);
    flex-shrink: 0;
    max-height: 420px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 0;
    animation: pf-quizgen-info-slide-down 0.3s ease;
}

.pf-quizgen-info-section::-webkit-scrollbar {
    width: 8px;
}

.pf-quizgen-info-section::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 4px;
}

.pf-quizgen-info-section::-webkit-scrollbar-thumb {
    background: rgba(61, 159, 221, 0.45);
    border-radius: 4px;
}

.pf-quizgen-info-section::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 159, 221, 0.75);
}

.pf-quizgen-question-info-modal {
    border: 1px solid rgba(213, 226, 236, 0.95);
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 253, 1) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.pf-quizgen-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
}

.pf-quizgen-info-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    gap: 22px;
    align-items: start;
}

.pf-quizgen-info-main {
    grid-column: 1 / -1;
}

.pf-quizgen-info-section:not(.pf-quizgen-info-main) {
    min-width: 0;
}

.pf-quizgen-info-main {
    background: linear-gradient(135deg, #f6fbff 0%, #eef6fb 100%);
}

.pf-quizgen-info-section h3 {
    color: #23384d;
    text-shadow: none;
}

.pf-quizgen-info-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    color: #23384d;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.pf-quizgen-info-description {
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 255, 1) 100%);
    border: 1px solid rgba(214, 226, 236, 0.95);
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(31, 54, 78, 0.05);
    color: #274158;
    font-size: 13px;
    line-height: 1.55;
}

.pf-quizgen-desc {
    columns: 2;
    column-gap: 24px;
    column-fill: balance;
    font-size: 13px;
    line-height: 1.55;
    max-height: 260px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.pf-quizgen-desc br {
    display: none;
}

.pf-quizgen-desc > * {
    break-inside: avoid;
}

.pf-quizgen-info-metadata {
    min-width: 0;
}

.pf-quizgen-metadata-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pf-quizgen-metadata-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(243, 248, 252, 0.9);
    border: 1px solid rgba(214, 226, 236, 0.9);
    border-radius: 12px;
    min-width: 0;
}

.pf-quizgen-metadata-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #5c7287;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}

.pf-quizgen-metadata-value {
    font-size: 13px;
    color: #274158;
    font-weight: 600;
    word-break: break-word;
}

.pf-quizgen-metadata-list::-webkit-scrollbar {
    width: 8px;
}

.pf-quizgen-metadata-list::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.pf-quizgen-metadata-list::-webkit-scrollbar-thumb {
    background: rgba(61, 159, 221, 0.4);
    border-radius: 4px;
}

.pf-quizgen-metadata-list::-webkit-scrollbar-thumb:hover {
    background: rgba(61, 159, 221, 0.7);
}

.pf-quizgen-info-question,
.pf-quizgen-info-table,
.pf-quizgen-info-table td,
.pf-quizgen-info-table strong {
    color: #274158;
}

.pf-quizgen-info-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 12px;
    border: 1px solid rgba(214, 226, 236, 0.9);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(31, 54, 78, 0.06);
}

.pf-quizgen-info-table tr td {
    padding: 12px 14px;
    border-bottom: 1px solid rgba(214, 226, 236, 0.75);
    background: #ffffff;
}

.pf-quizgen-info-table tr:nth-child(even) td {
    background: #f7fbfd;
}

.pf-quizgen-info-table tr td:first-child {
    color: #36526b;
    background: #f3f8fc;
    font-weight: 700;
    width: 42%;
}

.pf-quizgen-info-table tr:last-child td {
    border-bottom: 0;
}

.pf-quizgen-info-actions {
    padding: 20px 30px 28px;
    background: linear-gradient(180deg, rgba(249, 252, 255, 1) 0%, rgba(240, 246, 251, 1) 100%);
    border-top: 1px solid rgba(214, 226, 236, 0.85);
}

.pf-quizgen-share-success {
    display: grid;
    gap: 16px;
    padding: 4px 2px;
}

.pf-quizgen-share-success h3 {
    margin: 0;
    font-size: 22px;
    color: #203549;
}

.pf-quizgen-share-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--quizgen-gradient);
    box-shadow: 0 10px 24px rgba(39, 140, 171, 0.18);
}

.pf-quizgen-share-url-box {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.pf-quizgen-share-url-box input[type="text"] {
    flex: 1 1 280px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid #cedfec;
    border-radius: 12px;
    background: #ffffff;
    color: #244057;
}

.pf-quizgen-share-url-box .pf-quizgen-btn {
    box-shadow: 0 10px 22px rgba(44, 161, 153, 0.18);
}

.pf-quizgen-share-info {
    margin: 0;
    color: #4d6578;
    line-height: 1.65;
}

.pf-quizgen-share-info a {
    color: #1f86d8;
    text-decoration: none;
    word-break: break-all;
}

.pf-quizgen-share-info a:hover {
    text-decoration: underline;
}

.pf-quizgen-rating-modal {
    display: grid;
    gap: 18px;
}

.pf-quizgen-rating-question-preview {
    display: grid;
    gap: 8px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(201, 220, 232, 0.92);
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.98) 0%, rgba(240, 247, 252, 0.98) 100%);
}

.pf-quizgen-rating-kicker {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5a7286;
}

.pf-quizgen-rating-question-text {
    font-size: 1.05rem;
    line-height: 1.55;
    font-weight: 700;
    color: #22384d;
}

.pf-quizgen-rating-stars-container {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(214, 226, 236, 0.9);
    box-shadow: 0 10px 24px rgba(27, 54, 77, 0.06);
}

.pf-quizgen-rating-stars-container p {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #23384d;
}

.pf-quizgen-star-rating {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.pf-quizgen-star {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    border: 1px solid rgba(205, 220, 232, 0.95);
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fc 100%);
    color: #7c93a5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.pf-quizgen-star:hover {
    transform: translateY(-1px);
    border-color: rgba(62, 173, 162, 0.45);
    box-shadow: 0 6px 14px rgba(45, 105, 137, 0.14);
    color: #27b49f;
}

.pf-quizgen-star.filled {
    color: #f2b94b;
    border-color: rgba(242, 185, 75, 0.44);
    background: linear-gradient(180deg, rgba(255, 250, 236, 1) 0%, rgba(255, 245, 216, 1) 100%);
}

.pf-quizgen-star svg {
    width: 18px;
    height: 18px;
}

.pf-quizgen-rating-label {
    font-size: 14px;
    font-weight: 700;
    color: #506779;
}

.pf-quizgen-rating-comment textarea {
    min-height: 110px;
    resize: vertical;
    border-radius: 12px;
    line-height: 1.5;
}

.pf-quizgen-rating-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.pf-quizgen-rating-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(248, 252, 255, 1) 0%, rgba(240, 247, 252, 1) 100%);
    border: 1px solid rgba(214, 226, 236, 0.88);
    color: #324b61;
}

.pf-quizgen-rating-summary-label {
    font-weight: 800;
    color: #22384d;
}

.pf-quizgen-rating-summary-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: #304c66;
}

.pf-quizgen-rating-summary-count {
    color: #62798b;
}

@media (max-width: 768px) {
    .pf-quizgen-rating-actions {
        flex-direction: column-reverse;
    }

    .pf-quizgen-rating-actions .pf-quizgen-btn {
        width: 100%;
    }

    .pf-quizgen-star {
        width: 38px;
        height: 38px;
        border-radius: 10px;
    }
}

@media (max-width: 900px) {
    .pf-quizgen-info-grid {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-info-main {
        grid-column: auto;
    }

    .pf-quizgen-info-layout {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-desc {
        columns: 1;
    }

    .pf-quizgen-metadata-list {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-desc {
        max-height: none;
    }
}

.pf-quizgen-info-section[hidden] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   INLINE ICON HELPERS
   ═══════════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-inline-icon {
    vertical-align: middle;
    margin-right: 4px;
}

.pf-quizgen-inline-icon-lg {
    vertical-align: middle;
    margin-right: 5px;
}

.pf-quizgen-inline-icon-xl {
    vertical-align: middle;
    margin-right: 6px;
}

.pf-quizgen-inline-icon-left {
    vertical-align: middle;
    margin-left: 4px;
}

.pf-quizgen-section-title-spaced {
    margin-top: 40px;
}

.pf-quizgen-history-section-spaced {
    margin-top: 40px;
}

.pf-quizgen-guest-info-card-spaced {
    margin-top: 2rem;
}

.pf-quizgen-btn-top-gap {
    margin-top: 1.5rem;
}

.pf-quizgen-about-actions-spaced {
    margin-top: 20px;
}

.pf-quizgen-info-box-warning {
    background: #fff3cd;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #ffc107;
    text-align: center;
}

.pf-quizgen-info-box-warning-title {
    margin: 0;
    color: #856404;
}

.pf-quizgen-info-box-warning-text {
    margin: 10px 0 0 0;
    font-size: 0.9em;
    color: #856404;
}

.pf-quizgen-leaderboard-loading-cell,
.pf-quizgen-lb-empty-cell,
.pf-quizgen-lb-error-cell,
.pf-quizgen-stats-loading {
    text-align: center;
    padding: 40px;
}

.pf-quizgen-lb-error-cell {
    color: #e74c3c;
}

.pf-quizgen-stats-loading {
    color: #7f8c8d;
}

.pf-quizgen-stats-loading-icon {
    font-size: 48px;
    margin-bottom: 15px;
}

.pf-quizgen-stats-highlights-spaced,
.pf-quizgen-stats-user-spaced,
.pf-quizgen-workflow-explanation-spaced {
    margin-top: 30px;
}

.pf-quizgen-stats-user-title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #2c3e50;
}

.pf-quizgen-stats-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Quizfragen hero */
.pf-quizgen-hero {
    padding: 20px 22px;
    margin: 0 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(46, 204, 113, 0.18);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.08) 0%, rgba(52, 152, 219, 0.08) 100%);
}

.pf-quizgen-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.pf-quizgen-hero-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1f6c48;
    background: rgba(46, 204, 113, 0.16);
    border: 1px solid rgba(46, 204, 113, 0.28);
}

.pf-quizgen-section-heading {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pf-quizgen-section-heading svg {
    color: var(--quizgen-primary-green);
}

.pf-quizgen-hero h2 {
    margin: 0 0 8px;
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2f40;
}

.pf-quizgen-hero-desc {
    margin: 0 0 16px;
    color: #5c6b78;
    max-width: 760px;
}

.pf-quizgen-hero-stats {
    display: grid;
    grid-template-columns: repeat(6, minmax(110px, 1fr));
    gap: 10px;
}

.pf-quizgen-hero-stats .pf-quizgen-stat {
    padding: 12px 10px;
    border-radius: 10px;
    border: 1px solid #e6edf2;
    background: rgba(255, 255, 255, 0.9);
}

.pf-quizgen-hero-stats .pf-quizgen-stat-value {
    font-size: 32px;
    line-height: 1;
}

.pf-quizgen-hero-stats .pf-quizgen-stat-label {
    margin-top: 6px;
}

/* Quizfragen flow harmonization */
#tab-quizfragen {
    display: grid;
    gap: 14px;
}

#tab-quizfragen .pf-quizgen-hero,
#tab-quizfragen .pf-quizgen-action-bar,
#tab-quizfragen .pf-quizgen-filter-bar,
#tab-quizfragen .pf-quizgen-filter-feedback,
#tab-quizfragen .pf-quizgen-quiz-grid {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
}

#tab-quizfragen .pf-quizgen-filter-feedback {
    margin-top: 0;
}

#tab-quizfragen .pf-quizgen-quiz-grid {
    margin-top: 0;
}

.pf-quizgen-stats-show-btn {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    width: auto;
    min-width: 34px;
    height: 34px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    border: 2px solid var(--quizgen-primary-blue);
    background: rgba(255, 255, 255, 0.92);
    color: var(--quizgen-primary-blue);
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    z-index: 6;
}

.pf-quizgen-stats-show-btn.visible {
    display: inline-flex;
}

.pf-quizgen-stats-show-text {
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.3px;
}

@media (max-width: 768px) {
    .pf-quizgen-stats-show-text {
        display: none;
    }

    .pf-quizgen-stats-show-btn {
        width: 34px;
        padding: 0;
    }
}

/* Live Statistics Bar */
.pf-quizgen-stats-bar {
    padding: 24px 22px;
    margin: 16px 18px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    position: relative;
    transition: all 0.3s ease;
    border: 2px solid rgba(102, 126, 234, 0.1);
}

.pf-quizgen-stats-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #e9ecef;
}

.pf-quizgen-stats-bar-header h3 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #2c3e50;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-quizgen-stats-close-btn {
    background: rgba(231, 76, 60, 0.1);
    border: 2px solid rgba(231, 76, 60, 0.3);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    color: #e74c3c;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.pf-quizgen-stats-close-btn:hover {
    background: #e74c3c;
    color: white;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.pf-quizgen-stats-bar.hidden {
    display: none;
}

.pf-quizgen-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    margin-top: 16px;
}

.pf-quizgen-stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    min-height: 112px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pf-quizgen-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--quizgen-primary-blue), var(--quizgen-primary-green));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pf-quizgen-stat-card:hover::before {
    opacity: 1;
}

.pf-quizgen-stat-card:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

.pf-quizgen-stat-icon {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}

.pf-quizgen-stat-icon svg {
    width: 30px;
    height: 30px;
}

.pf-quizgen-stat-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
    background: linear-gradient(135deg, var(--quizgen-primary-blue), var(--quizgen-primary-green));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
    display: block;
}

.pf-quizgen-stats-bar .pf-quizgen-stat-value {
    font-size: 24px;
}

.pf-quizgen-stats-bar .pf-quizgen-stat-label {
    font-size: 9px;
}

.pf-quizgen-stat-label {
    font-size: 10px;
    color: #6a7685;
    text-transform: uppercase;
    letter-spacing: 0.45px;
    font-weight: 700;
}

.pf-quizgen-stats-grid-compact {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.pf-quizgen-stat-primary {
    background: linear-gradient(135deg, #f5f7ff 0%, #e8ecff 100%);
}

.pf-quizgen-stat-primary::before { background: linear-gradient(90deg, #667eea, #764ba2); }
.pf-quizgen-stat-primary:hover { border-color: rgba(102, 126, 234, 0.4); }

.pf-quizgen-stat-success {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.pf-quizgen-stat-success::before { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.pf-quizgen-stat-success:hover { border-color: rgba(46, 204, 113, 0.4); }

.pf-quizgen-stat-info {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
}

.pf-quizgen-stat-info::before { background: linear-gradient(90deg, #3498db, #2980b9); }
.pf-quizgen-stat-info:hover { border-color: rgba(52, 152, 219, 0.4); }

.pf-quizgen-stat-warning {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
}

.pf-quizgen-stat-warning::before { background: linear-gradient(90deg, #f39c12, #e67e22); }
.pf-quizgen-stat-warning:hover { border-color: rgba(243, 156, 18, 0.4); }

.pf-quizgen-stat-purple {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}

.pf-quizgen-stat-purple::before { background: linear-gradient(90deg, #9b59b6, #8e44ad); }
.pf-quizgen-stat-purple:hover { border-color: rgba(155, 89, 182, 0.4); }

.pf-quizgen-stat-pink {
    background: linear-gradient(135deg, #fef2f2 0%, #fce7f3 100%);
}

.pf-quizgen-stat-pink::before { background: linear-gradient(90deg, #e91e63, #c2185b); }
.pf-quizgen-stat-pink:hover { border-color: rgba(233, 30, 99, 0.4); }

.pf-quizgen-stat-gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9e7 100%);
}

.pf-quizgen-stat-gold::before { background: linear-gradient(90deg, #ffd700, #ffa500); }
.pf-quizgen-stat-gold:hover { border-color: rgba(255, 215, 0, 0.5); }

.pf-quizgen-stat-primary .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-stat-success .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-stat-info .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #3498db, #2980b9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-stat-warning .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #f39c12, #e67e22);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-stat-purple .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-stat-pink .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #e91e63, #c2185b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-stat-gold .pf-quizgen-stat-value {
    background: linear-gradient(135deg, #ffd700, #ffa500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@media (max-width: 768px) {
    .pf-quizgen-stats-bar {
        margin: 12px;
        padding: 18px 14px;
    }

    .pf-quizgen-stats-bar-header h3 {
        font-size: 18px;
    }

    .pf-quizgen-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .pf-quizgen-stat-card {
        min-height: 104px;
        padding: 14px 10px;
    }

    .pf-quizgen-stat-icon {
        font-size: 28px;
    }

    .pf-quizgen-stat-value {
        font-size: 24px;
    }

    .pf-quizgen-stat-icon svg {
        width: 28px;
        height: 28px;
    }
}

/* Body shell for tab rail + content area */
.pf-quizgen-body {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 18px;
    background: linear-gradient(180deg, rgba(249, 254, 251, 0.98), rgba(244, 250, 253, 0.98));
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(46, 204, 113, 0.82) rgba(25, 50, 74, 0.08);
    border-left: 0;
    border-right: 0;
}

.pf-quizgen-body::-webkit-scrollbar {
    width: 10px;
}

.pf-quizgen-body::-webkit-scrollbar-track {
    background: linear-gradient(180deg, rgba(245, 255, 248, 0.96), rgba(236, 246, 252, 0.96));
    border-left: 1px solid rgba(52, 152, 219, 0.12);
}

.pf-quizgen-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(46, 204, 113, 0.92), rgba(52, 152, 219, 0.92));
    border-radius: 6px;
    border: 2px solid rgba(245, 251, 255, 0.92);
}

/* Tab rail */
.pf-quizgen-tabs {
    display: flex;
    gap: 4px;
    padding: 0 4px;
    margin-bottom: 0;
    align-items: flex-end;
    flex-wrap: wrap;
    position: relative;
}

.pf-quizgen-tab-btn {
    appearance: none;
    background: var(--quizgen-gradient);
    background-size: 160% 160%;
    background-position: 0% 0%;
    border: 2px solid var(--quizgen-primary-green);
    border-bottom: 2px solid var(--quizgen-primary-green);
    border-radius: 10px 10px 0 0;
    padding: 10px 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s ease,
                color 0.18s ease,
                filter 0.18s ease,
                background-position 0.35s ease;
    position: relative;
    transform-origin: center bottom;
    overflow: hidden;
    margin-bottom: -2px;
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.14);
    flex: 0 0 auto;
    white-space: nowrap;
}

.pf-quizgen-tab-btn + .pf-quizgen-tab-btn::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 18%;
    width: 2px;
    height: 64%;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.14);
    pointer-events: none;
}

.pf-quizgen-tab-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 55%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transition: left 0.48s ease;
    pointer-events: none;
}

.pf-quizgen-tab-btn:hover:not(.active) {
    color: white;
    transform: translateY(-2px) scale(1.02, 1.08);
    margin-bottom: -5px;
    border-color: var(--quizgen-primary-green);
    background-position: 100% 100%;
    filter: brightness(1.1) saturate(1.06);
    box-shadow: 0 8px 18px rgba(46, 204, 113, 0.32);
}

.pf-quizgen-tab-btn:hover:not(.active)::after {
    left: 150%;
}

.pf-quizgen-tab-btn.active {
    background: white;
    color: var(--quizgen-dark);
    font-weight: 700;
    text-shadow: none;
    border: 2px solid var(--quizgen-primary-green);
    border-bottom: 2px solid white;
    margin-bottom: -2px;
    z-index: 3;
    box-shadow: 0 8px 18px rgba(25, 50, 74, 0.14);
    transform: none;
}

.pf-quizgen-tab-btn.active::before,
.pf-quizgen-tab-btn.active + .pf-quizgen-tab-btn::before {
    opacity: 0;
}

.pf-quizgen-tab-btn.active::after {
    display: none;
}

.pf-quizgen-tab-btn:focus-visible {
    outline: 2px solid rgba(52, 152, 219, 0.5);
    outline-offset: 2px;
}

@media (max-width: 1400px) {
    .pf-quizgen-tabs {
        margin: 0;
        padding: 4px 6px 0;
        gap: 6px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 6px;
    }

    .pf-quizgen-tabs::-webkit-scrollbar {
        display: none;
    }

    .pf-quizgen-tab-btn {
        width: clamp(42px, 4vw, 50px);
        min-width: clamp(42px, 4vw, 50px);
        height: clamp(40px, 3.6vw, 46px);
        justify-content: center;
        padding: 0;
        font-size: 13px;
        gap: 0;
        border-radius: 12px 12px 0 0;
        margin-top: 0;
        margin-bottom: 0;
        scroll-snap-align: start;
        border-bottom: 0;
    }

    .pf-quizgen-tab-btn + .pf-quizgen-tab-btn::before {
        left: -3px;
        top: 22%;
        height: 56%;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: none;
    }

    .pf-quizgen-tab-btn.active {
        margin-bottom: 0;
        border-bottom: 0;
        transform: none;
    }

    .pf-quizgen-tab-content {
        border-top: 0;
        border-radius: 12px;
    }

    .pf-quizgen-tab-text {
        display: none;
    }

    .pf-quizgen-tab-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        visibility: visible;
        opacity: 1;
        font-size: 18px;
    }

    .pf-quizgen-tab-icon svg {
        display: block !important;
        width: 20px;
        height: 20px;
        visibility: visible;
        opacity: 1;
    }

    .pf-quizgen-tab-btn::after {
        display: none;
    }
}

.pf-quizgen-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
}

.pf-quizgen-tab-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.pf-quizgen-tab-btn.active .pf-quizgen-tab-icon {
    color: var(--quizgen-dark);
}

.pf-quizgen-meta-item.pf-quizgen-meta-clickable {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.pf-quizgen-meta-item.pf-quizgen-meta-clickable:hover {
    transform: translateY(-1px);
    border-color: rgba(52, 152, 219, 0.45);
    box-shadow: 0 5px 10px rgba(24, 63, 94, 0.12);
}

.pf-quizgen-meta-item.pf-quizgen-meta-clickable:focus-visible {
    outline: 2px solid rgba(52, 152, 219, 0.45);
    outline-offset: 2px;
}

/* Content wrapper and tab panes */
.pf-quizgen-content-wrapper {
    flex: 1 0 auto;
    min-height: 0;
    overflow: visible;
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.pf-quizgen-tab-content {
    display: none;
    padding: 16px;
    background: #ffffff;
    border: 2px solid var(--quizgen-primary-green);
    border-radius: 0 12px 12px 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin: 0;
    animation: pf-quizgen-fadeIn 0.3s ease;
    position: relative;
}

.pf-quizgen-tab-content.active {
    display: block;
    animation: pf-quizgen-tabReveal 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@keyframes pf-quizgen-fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pf-quizgen-tabReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pf-quizgen-cardReveal {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pf-quizgen-section {
    padding: var(--quizgen-space-xl);
}

.pf-quizgen-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--quizgen-dark);
    margin-bottom: var(--quizgen-space-sm);
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(46, 204, 113, 0.2);
}

.pf-quizgen-section-desc {
    font-size: 15px;
    color: var(--quizgen-gray);
    margin-bottom: var(--quizgen-space-lg);
}

/* Footer */
.pf-quizgen-footer {
    position: sticky;
    bottom: 0;
    z-index: 260;
    background: var(--quizgen-gradient);
    background-size: 400% 400%;
    color: var(--quizgen-white);
    padding: 8px 18px;
    justify-content: space-between;
    font-size: 13px;
    box-shadow: 0 -8px 22px rgba(42, 137, 103, 0.22);
    position: relative;
    overflow: visible;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: center;
}

.pf-quizgen-footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.22) 0%, transparent 45%), radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.18) 0%, transparent 42%);
    background-size: 300% 300%;
    background-position: 0% 50%;
    pointer-events: none;
    z-index: -1;
    animation: pf-quizgen-gradient-wave 9s ease-in-out infinite;
}

.pf-quizgen-footer-left {
    justify-content: flex-start;
}

.pf-quizgen-footer-center {
    justify-content: center;
    text-align: center;
    min-width: 0;
}

.pf-quizgen-footer-runtime {
    display: block;
    color: rgba(255, 255, 255, 0.94);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.78rem;
    line-height: 1.1;
    opacity: 0.92;
}

.pf-quizgen-footer-right {
    position: relative;
    z-index: 8;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    overflow: visible;
}

.pf-quizgen-footer-left,
.pf-quizgen-footer-center,
.pf-quizgen-footer-right,
.pf-quizgen-footer-module,
.pf-quizgen-footer-meta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.pf-quizgen-footer-left,
.pf-quizgen-footer-center,
.pf-quizgen-footer-right {
    min-width: 0;
}

.pf-quizgen-footer-module,
.pf-quizgen-footer-meta {
    font-size: 0.72rem;
    line-height: 1.1;
}

.pf-quizgen-footer .pf-quizgen-footer-icon,
.pf-quizgen-footer .pf-quizgen-footer-icon svg {
    width: 12px;
    height: 12px;
}

.pf-quizgen-footer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 140% at 78% 60%, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.1) 48%, transparent 70%);
    animation: pf-quizgen-footer-shimmer 7s ease-in-out infinite reverse;
    pointer-events: none;
    z-index: 0;
}

.pf-quizgen-header.no-shimmer,
.pf-quizgen-footer.no-shimmer {
    background: linear-gradient(135deg, #1f2937 0%, #111827 55%, #0b1220 100%);
    background-size: 100% 100%;
}

.pf-quizgen-header.no-shimmer::before,
.pf-quizgen-footer.no-shimmer::before {
    opacity: 0.2;
}

.pf-quizgen-header.no-shimmer::after,
.pf-quizgen-footer.no-shimmer::after {
    animation: none !important;
    opacity: 0.92;
    background: radial-gradient(ellipse 85% 135% at 20% 30%, rgba(15, 23, 42, 0.62) 0%, rgba(8, 14, 30, 0.78) 58%, rgba(3, 7, 18, 0.88) 100%);
}

.pf-quizgen-to-top-wrap {
    display: contents;
}

.pf-quizgen-to-top-wrap > .pf-quizgen-scroll-top {
    pointer-events: none;
}

.pf-quizgen-scroll-top {
    position: absolute;
    right: 24px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.95) 0%, rgba(52, 152, 219, 0.95) 100%);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 24px rgba(8, 28, 46, 0.32);
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    font-size: 1.2rem;
    line-height: 1;
    z-index: 18;
}

.pf-quizgen-scroll-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.pf-quizgen-scroll-top.hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.pf-quizgen-scroll-top:hover,
.pf-quizgen-scroll-top:focus-visible {
    transform: translateY(-2px);
}

.pf-quizgen-scroll-top:active {
    transform: translateY(0);
}

.pf-quizgen-scroll-top .pf-quizgen-scroll-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.pf-quizgen-scroll-top .pf-quizgen-scroll-icon svg {
    width: 18px;
    height: 18px;
}

.pf-quizgen-footer span,
.pf-quizgen-footer button {
    position: relative;
    z-index: 2;
}

.pf-quizgen-shimmer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pf-quizgen-shimmer-icon svg {
    width: 100%;
    height: 100%;
}

.pf-quizgen-footer-fx-toggle .pf-quizgen-footer-icon-off,
.pf-quizgen-shimmer-icon-off {
    display: none;
}

#pf-quizgen-shimmer-toggle:not(.active) .pf-quizgen-footer-icon-on,
.is-footer-fx-off .pf-quizgen-footer-fx-toggle .pf-quizgen-footer-icon-on {
    display: none;
}

#pf-quizgen-shimmer-toggle:not(.active) .pf-quizgen-footer-icon-off,
.is-footer-fx-off .pf-quizgen-footer-fx-toggle .pf-quizgen-footer-icon-off {
    display: inline-flex;
}

.pf-quizgen-footer-fx-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.12);
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pf-quizgen-footer-fx-toggle:hover {
    transform: none;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.52);
}

#pf-quizgen-container.is-footer-fx-off .pf-quizgen-footer-fx-toggle {
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.58);
    background: rgba(15, 23, 42, 0.2);
}

#pf-quizgen-container.is-footer-fx-off .pf-quizgen-footer-fx-toggle:hover {
    background: rgba(15, 23, 42, 0.28);
}

@keyframes pf-quizgen-gradient-wave {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes pf-quizgen-footer-shimmer {
    0%,
    100% {
        opacity: 0.52;
        transform: translateX(0);
    }
    50% {
        opacity: 0.82;
        transform: translateX(-1.5%);
    }
}

/* Mobile shell */
@media (max-width: 768px) {
    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-header,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-header {
        min-height: 0;
        height: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        overflow: visible;
    }

    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-header::before,
    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-header::after,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-header::before,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-header::after {
        display: none;
    }

    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-header-left,
    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-header-right,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-header-left,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-header-right {
        display: none;
    }

    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-header-compact-logo,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-header-compact-logo {
        display: inline-flex;
        position: fixed;
        top: 10px;
        right: 10px;
        left: auto;
        transform: none;
        z-index: 240;
        border-radius: 999px;
        overflow: visible;
    }

    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-footer,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-footer {
        display: none;
    }

    .pf-quizgen-box.is-mobile-shell-collapsed .pf-quizgen-scroll-top,
    #pf-quizgen-container.is-shell-collapsed .pf-quizgen-scroll-top {
        bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    }

    .pf-quizgen-header {
        gap: clamp(6px, 2vw, 8px);
        flex-wrap: nowrap;
        align-items: center;
    }

    .pf-quizgen-title-section,
    .pf-quizgen-user-name,
    .pf-quizgen-dashboard-label {
        display: none;
    }

    .pf-quizgen-user,
    .pf-quizgen-btn-dashboard {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        flex: 0 0 40px;
        padding: 0;
        gap: 0;
        justify-content: center;
        align-items: center;
        border-radius: 999px;
    }

    .pf-quizgen-user-avatar,
    .pf-quizgen-dashboard-icon {
        width: 32px;
        height: 32px;
        border-radius: 999px;
    }

    .pf-quizgen-btn-dashboard .pf-quizgen-dashboard-logo {
        width: 26px;
        height: 26px;
        display: block;
        margin: 0 auto;
        border-radius: 999px;
        object-fit: contain;
    }

    .pf-quizgen-body {
        padding: 0;
        scroll-padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    .pf-quizgen-tabs {
        margin: 0;
        padding: 4px 4px 2px;
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 6px;
        position: relative;
        top: auto;
        z-index: 1;
        border-top: none;
        border-bottom: none;
        box-shadow: none;
    }

    .pf-quizgen-tabs::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        border-radius: 0;
        background: none;
        background-color: var(--quizgen-primary-green);
        display: block;
        pointer-events: none;
        z-index: 0;
    }

    .pf-quizgen-tab-btn {
        width: clamp(38px, 9.4vw, 44px);
        min-width: clamp(38px, 9.4vw, 44px);
        height: clamp(38px, 9.2vw, 44px);
        justify-content: center;
        padding: 0;
        font-size: 12px;
        gap: 0;
        border-radius: 12px 12px 0 0;
        margin-top: 0;
        margin-bottom: 0;
        scroll-snap-align: start;
        box-shadow: none;
        border-bottom: 2px solid var(--quizgen-primary-green);
        position: relative;
        z-index: 1;
        background-clip: padding-box;
    }

    .pf-quizgen-tab-btn + .pf-quizgen-tab-btn::before {
        left: -2px;
        top: 24%;
        width: 1px;
        height: 52%;
        background: rgba(255, 255, 255, 0.58);
        box-shadow: none;
    }

    .pf-quizgen-tab-text {
        display: none;
    }

    .pf-quizgen-tab-icon {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        min-width: 16px;
        min-height: 16px;
        visibility: visible;
        opacity: 1;
        font-size: 16px;
    }

    .pf-quizgen-tab-icon svg {
        display: block !important;
        width: 18px;
        height: 18px;
        visibility: visible;
        opacity: 1;
    }

    .pf-quizgen-tab-btn::after {
        display: none;
    }

    .pf-quizgen-tab-btn:hover:not(.active) {
        transform: none;
        margin-bottom: 0;
        filter: brightness(1.04);
    }

    .pf-quizgen-tab-btn.active {
        transform: none;
        z-index: 3;
        margin-bottom: -2px;
        border-bottom: 2px solid #ffffff;
        box-shadow: 0 6px 14px rgba(25, 50, 74, 0.12);
        background: #ffffff;
        color: var(--quizgen-dark);
    }

    .pf-quizgen-content-wrapper {
        margin: 0;
    }

    .pf-quizgen-tab-content {
        margin: 0;
        border-top: 0;
        border-radius: 0 0 12px 12px;
        padding: clamp(6px, 2.2vw, 10px);
    }

    .pf-quizgen-footer {
        grid-template-columns: 1fr;
        min-height: 38px;
        justify-items: center;
        gap: 4px;
        padding: clamp(6px, 2.2vw, 8px) clamp(7px, 2.6vw, 10px) calc(clamp(6px, 2.2vw, 8px) + env(safe-area-inset-bottom, 0px));
    }

    .pf-quizgen-footer-left,
    .pf-quizgen-footer-right {
        display: none;
    }

    .pf-quizgen-footer-center {
        max-width: 100%;
        justify-content: center;
        text-align: center;
    }

    .pf-quizgen-footer-module span,
    .pf-quizgen-footer-meta {
        display: none;
    }

    .pf-quizgen-footer-runtime {
        max-width: 100%;
        font-size: 0.74rem;
        text-align: center;
    }

    .pf-quizgen-to-top-wrap {
        display: contents;
    }

    .pf-quizgen-scroll-top {
        width: 42px;
        height: 42px;
        bottom: calc(56px + env(safe-area-inset-bottom, 0px));
        font-size: clamp(14px, 3.5vw, 18px);
    }
}

/* Core controls and content layout */
.pf-quizgen-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--quizgen-radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--quizgen-transition);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}

.pf-quizgen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pf-quizgen-btn-primary {
    background: var(--quizgen-gradient);
    color: var(--quizgen-white);
    box-shadow: var(--quizgen-shadow-sm);
}

.pf-quizgen-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--quizgen-shadow-md);
}

.pf-quizgen-btn-secondary {
    background: var(--quizgen-white);
    color: var(--quizgen-dark);
    border: 2px solid var(--quizgen-light);
}

.pf-quizgen-btn-secondary:hover:not(:disabled) {
    border-color: var(--quizgen-primary-blue);
    color: var(--quizgen-primary-blue);
    transform: translateY(-2px);
}

.pf-quizgen-btn-small {
    padding: 10px 18px;
    font-size: 13px;
}

.pf-quizgen-btn-test {
    background: linear-gradient(135deg, #5b6ee1 0%, #6f4bb8 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgba(92, 93, 190, 0.25);
}

.pf-quizgen-btn-test:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(92, 93, 190, 0.32);
}

.pf-quizgen-action-bar {
    display: flex;
    gap: var(--quizgen-space-md);
    padding: var(--quizgen-space-lg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 251, 253, 0.95) 100%);
    border: 1px solid #deebf2;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(24, 53, 80, 0.07);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
}

.pf-quizgen-toggle-label,
.admin-label,
.play-label {
    display: none !important;
}

.pf-quizgen-guest-hint {
    width: 100%;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid rgba(52, 152, 219, 0.25);
    color: #355b77;
    font-size: 14px;
}

.pf-quizgen-guest-link {
    color: #2a86bd;
    font-weight: 700;
    text-decoration: none;
}

.pf-quizgen-guest-link:hover {
    text-decoration: underline;
}

.pf-quizgen-view-toggle {
    display: inline-flex;
    gap: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 4px;
    border-radius: 50px;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.pf-quizgen-toggle-btn {
    padding: 8px 20px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.pf-quizgen-toggle-btn.active {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.pf-quizgen-filter-bar {
    display: flex;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%);
    border: 1px solid #deebf2;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(24, 53, 80, 0.07);
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 18px;
}

.pf-quizgen-search-box {
    flex: 1;
    min-width: 280px;
    position: relative;
}

.pf-quizgen-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--quizgen-primary-blue);
    opacity: 0.6;
    pointer-events: none;
}

.pf-quizgen-search-input {
    width: 100%;
    padding: 14px 18px 14px 52px;
    border: 2px solid var(--quizgen-light);
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    background: var(--quizgen-white);
    transition: all 0.2s ease;
    color: var(--quizgen-dark);
}

.pf-quizgen-search-input:focus {
    outline: none;
    border-color: var(--quizgen-primary-blue);
    box-shadow: 0 0 0 4px rgba(52, 152, 219, 0.12);
}

.pf-quizgen-filter-group {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.pf-quizgen-select {
    min-width: 170px;
    padding: 10px 12px;
    border: 2px solid var(--quizgen-light);
    border-radius: 8px;
    background: #fff;
    color: var(--quizgen-dark);
}

.pf-quizgen-filter-feedback {
    padding: 12px 24px;
    background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
    border-left: 5px solid var(--quizgen-primary-blue);
    border-radius: 0 8px 8px 0;
    margin: 0 0 24px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--quizgen-dark);
    display: flex;
    align-items: center;
    gap: 10px;
}

.pf-quizgen-hidden {
    display: none !important;
}

/* Modal and test overlay base visibility rules (restored from stable backup behavior) */
.pf-quizgen-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 22050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--quizgen-space-lg);
    animation: pf-quizgen-fadeIn 0.3s ease;
}

.pf-quizgen-modal.pf-quizgen-hidden {
    display: none !important;
}

.pf-quizgen-modal.active,
.pf-quizgen-modal[style*="display: flex"],
.pf-quizgen-modal[style*="display:flex"],
.pf-quizgen-modal[style*="display: block"] {
    display: flex !important;
}

/* Pool fullscreen result dialogs must sit above the fullscreen quiz shell (z-index 23000). */
#pf-quizgen-result-leaderboard-modal,
#pf-quizgen-share-overlay,
#pf-quizgen-leaderboard-input-modal {
    z-index: 23120;
}

@keyframes pf-quizgen-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.pf-quizgen-modal-wide {
    max-width: 800px;
    width: 90%;
}

.pf-quizgen-test-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 10%, #eaf3ff 0%, #dfe9ff 36%, #eef3ff 100%);
    z-index: 22040;
    display: none;
    flex-direction: column;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
}

.pf-quizgen-test-container.active {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

@media (min-width: 769px) {
    .pf-quizgen-test-container {
        background: rgba(18, 36, 52, 0.58);
        backdrop-filter: blur(3px);
        padding: 24px;
        justify-content: center;
        align-items: center;
    }

    .pf-quizgen-test-container .pf-quizgen-test-header,
    .pf-quizgen-test-container .pf-quizgen-test-body {
        width: min(750px, 94vw);
        margin: 0 auto;
    }

    .pf-quizgen-test-container .pf-quizgen-test-header {
        border-radius: 16px 16px 0 0;
    }

    .pf-quizgen-test-container .pf-quizgen-test-body {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 252, 255, 0.96) 100%);
        border: 1px solid #d7e5f1;
        border-top: 0;
        border-radius: 0 0 16px 16px;
        max-height: calc(90vh - 92px);
        padding: 0;
        overflow-y: auto;
    }
}

.pf-quizgen-modal-content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 250, 253, 1) 100%);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(15, 44, 74, 0.28);
    width: 100%;
    max-width: 725px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: pf-quizgen-slideUp 0.3s ease;
    overflow: hidden;
}

.pf-quizgen-modal-content-compact {
    max-width: 460px;
}

.pf-quizgen-modal-content-medium {
    max-width: 620px;
}

.pf-quizgen-modal-content-narrow {
    max-width: 520px;
}

.pf-quizgen-modal-content-share {
    max-width: 760px;
}

@keyframes pf-quizgen-slideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.pf-quizgen-modal-lg {
    max-width: 980px;
    width: min(96vw, 980px);
}

.pf-quizgen-modal-fullwidth {
    max-width: 1280px;
    width: min(98vw, 1280px);
}

.pf-quizgen-modal-header {
    background: var(--quizgen-gradient);
    color: var(--quizgen-white);
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pf-quizgen-modal-header h2,
.pf-quizgen-modal-header h3 {
    margin: 0;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pf-quizgen-modal-title-workflow {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: min(380px, 70vw);
}

.pf-quizgen-modal-title-main {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.pf-quizgen-modal-title-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    opacity: 0.92;
}

.pf-quizgen-modal-title-progress {
    width: min(300px, 62vw);
    height: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
    border: 1px solid rgba(255, 255, 255, 0.22);
    overflow: hidden;
}

.pf-quizgen-modal-title-progress-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #ffd76d 0%, #fff3b8 100%);
    box-shadow: 0 0 10px rgba(255, 232, 146, 0.5);
}

@media (max-width: 760px) {
    .pf-quizgen-modal-title-workflow {
        min-width: 0;
        width: 100%;
    }

    .pf-quizgen-modal-title-progress {
        width: 100%;
    }
}

.pf-quizgen-modal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: var(--quizgen-white);
    font-size: 24px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--quizgen-transition-fast);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pf-quizgen-modal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.pf-quizgen-modal-body {
    padding: 26px 28px 28px;
    overflow-y: auto;
    flex: 1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 251, 255, 0.96) 100%);
}

.pf-quizgen-modal-footer {
    padding: 18px 28px 22px;
    background: linear-gradient(180deg, rgba(247, 251, 255, 0.98) 0%, rgba(238, 245, 251, 0.98) 100%);
    display: flex;
    gap: var(--quizgen-space-md);
    justify-content: flex-end;
    border-top: 1px solid rgba(171, 193, 210, 0.55);
}

/* Question preview modal */
.pf-quizgen-modal .pf-quizgen-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.pf-quizgen-modal .pf-quizgen-preview-type,
.pf-quizgen-modal .pf-quizgen-preview-category,
.pf-quizgen-modal .pf-quizgen-preview-creator,
.pf-quizgen-modal .pf-quizgen-preview-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #d7e5f1;
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
    color: #38566d;
    font-size: 13px;
    font-weight: 700;
}

.pf-quizgen-modal .pf-quizgen-preview-type {
    border-color: #cde6dc;
    color: #216a4c;
    background: linear-gradient(180deg, #f6fffb 0%, #ecfaf4 100%);
}

.pf-quizgen-modal .pf-quizgen-type-icon {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 204, 113, 0.14);
    color: #24925d;
}

.pf-quizgen-modal .pf-quizgen-preview-question {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #d9e8f2;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.pf-quizgen-modal .pf-quizgen-preview-question h4 {
    margin: 0 0 6px;
    font-size: 14px;
    color: #27445b;
}

.pf-quizgen-modal .pf-quizgen-preview-question p {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.45;
    color: #1d3246;
}

.pf-quizgen-modal .pf-quizgen-preview-answers {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.pf-quizgen-modal .pf-quizgen-preview-answer {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 9px;
    border: 1px solid #d6e5f1;
    border-radius: 11px;
    background: #ffffff;
    padding: 10px 12px;
}

.pf-quizgen-modal .pf-quizgen-preview-answer.correct {
    border-color: rgba(46, 204, 113, 0.46);
    background: linear-gradient(180deg, rgba(239, 251, 244, 0.95) 0%, rgba(247, 255, 250, 0.95) 100%);
}

.pf-quizgen-modal .pf-quizgen-answer-label {
    font-weight: 800;
    color: #2d4a62;
}

.pf-quizgen-modal .pf-quizgen-answer-text {
    color: #2b4258;
    font-weight: 600;
}

.pf-quizgen-modal .pf-quizgen-correct-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid rgba(46, 204, 113, 0.36);
    background: rgba(46, 204, 113, 0.14);
    color: #1f7d4c;
    font-size: 12px;
    font-weight: 800;
}

.pf-quizgen-modal .pf-quizgen-preview-hint,
.pf-quizgen-modal .pf-quizgen-preview-explanation {
    margin-top: 10px;
    padding: 11px 12px;
    border-radius: 10px;
    border: 1px solid #d9e8f2;
}

.pf-quizgen-modal .pf-quizgen-preview-hint {
    background: linear-gradient(180deg, rgba(255, 250, 239, 0.96) 0%, rgba(255, 247, 228, 0.96) 100%);
    border-color: rgba(243, 156, 18, 0.32);
}

.pf-quizgen-modal .pf-quizgen-preview-explanation {
    background: linear-gradient(180deg, rgba(241, 249, 255, 0.96) 0%, rgba(235, 246, 255, 0.96) 100%);
    border-color: rgba(52, 152, 219, 0.3);
}

.pf-quizgen-modal .pf-quizgen-preview-hint strong,
.pf-quizgen-modal .pf-quizgen-preview-explanation strong {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: #27445d;
}

.pf-quizgen-modal .pf-quizgen-preview-hint p,
.pf-quizgen-modal .pf-quizgen-preview-explanation p {
    margin: 0;
    color: #304d64;
    font-size: 14px;
    line-height: 1.5;
}

.pf-quizgen-modal .pf-quizgen-preview-stats {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.pf-quizgen-modal .pf-quizgen-preview-stats .pf-quizgen-stat-item {
    border: 1px solid #d8e6f1;
    border-radius: 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    padding: 9px;
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 4px;
}

.pf-quizgen-modal .pf-quizgen-preview-stats .pf-quizgen-stat-icon {
    color: #3b5f7b;
    display: inline-flex;
}

.pf-quizgen-modal .pf-quizgen-preview-stats .pf-quizgen-stat-value {
    font-size: 22px;
    line-height: 1;
    font-weight: 900;
    color: #2471b2;
}

.pf-quizgen-modal .pf-quizgen-preview-stats .pf-quizgen-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #637d91;
    font-weight: 700;
}

.pf-quizgen-test-mode-section,
.pf-quizgen-test-pool-section,
.pf-quizgen-test-display-section {
    margin-bottom: 30px;
}

.pf-quizgen-test-mode-section h4,
.pf-quizgen-test-pool-section h4,
.pf-quizgen-test-display-section h4 {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--quizgen-dark);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pf-quizgen-test-mode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(205px, 205px));
    justify-content: center;
    gap: 12px;
}

.pf-quizgen-test-mode-card,
.pf-quizgen-test-display-card,
.pf-quizgen-test-pool-card {
    background: rgba(255, 255, 255, 0.96);
    border: 2px solid #dbe8f0;
    border-radius: 12px;
    transition: var(--quizgen-transition);
}

.pf-quizgen-test-mode-card,
.pf-quizgen-test-display-card {
    padding: 16px;
    width: 205px;
    text-align: center;
    cursor: pointer;
}

.pf-quizgen-test-pool-card {
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.pf-quizgen-test-mode-card:hover,
.pf-quizgen-test-display-card:hover,
.pf-quizgen-test-pool-card:hover {
    border-color: var(--quizgen-primary-blue);
    box-shadow: var(--quizgen-shadow-sm);
    transform: translateY(-2px);
}

.pf-quizgen-test-mode-card.active,
.pf-quizgen-test-display-card.active,
.pf-quizgen-test-pool-card.active {
    border-color: var(--quizgen-primary-green);
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.1) 0%, rgba(52, 152, 219, 0.1) 100%);
    box-shadow: var(--quizgen-shadow-md);
}

.pf-quizgen-test-pool-list,
.pf-quizgen-test-display-grid {
    display: grid;
    gap: 12px;
}

.pf-quizgen-test-pool-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-quizgen-test-pool-list.is-category-tree {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-quizgen-test-category-branch {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-quizgen-test-category-children {
    margin-left: 16px;
    padding-left: 12px;
    border-left: 2px dashed #c9dceb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-quizgen-test-category-node.has-children {
    border-color: #c8dae8;
    background: linear-gradient(135deg, rgba(246, 252, 255, 0.98) 0%, rgba(240, 248, 255, 0.96) 100%);
}

.pf-quizgen-test-category-node.is-child {
    padding: 12px;
    border-width: 1px;
}

.pf-quizgen-test-category-node.is-structural {
    cursor: default;
    border-style: dashed;
    opacity: 0.9;
}

.pf-quizgen-test-category-node.is-structural:hover {
    transform: none;
    box-shadow: none;
    border-color: #c8dae8;
}

.pf-quizgen-test-display-grid {
    grid-template-columns: repeat(auto-fit, minmax(205px, 205px));
    justify-content: start;
}

.pf-quizgen-test-mode-icon {
    font-size: 40px;
    margin-bottom: 8px;
    color: #3f5f78;
}

.pf-quizgen-test-mode-icon svg,
.pf-quizgen-test-display-icon svg {
    width: 28px;
    height: 28px;
}

.pf-quizgen-test-mode-title,
.pf-quizgen-test-display-title,
.pf-quizgen-test-pool-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--quizgen-dark);
    margin-bottom: 4px;
}

.pf-quizgen-test-mode-desc,
.pf-quizgen-test-display-desc,
.pf-quizgen-test-pool-count {
    font-size: 12px;
    color: #6f8598;
}

.pf-quizgen-test-pool-icon {
    font-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pf-quizgen-test-pool-info {
    flex: 1;
    min-width: 0;
}

.pf-quizgen-test-display-icon {
    font-size: 34px;
    margin-bottom: 6px;
    color: #3f5f78;
}

.pf-quizgen-test-randomizer-box {
    display: none;
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid #cdddeb;
    background: #f7fbff;
    color: #35556f;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pf-quizgen-test-randomizer-box.rolling {
    animation: pfQuizgenRandomizerPulse 0.22s ease-in-out infinite alternate;
}

.pf-quizgen-test-randomizer-box.selected {
    border-color: rgba(46, 204, 113, 0.55);
    background: linear-gradient(180deg, #f1fff7 0%, #ebfbf3 100%);
    color: #1e6a48;
}

@keyframes pfQuizgenRandomizerPulse {
    from { transform: scale(1); opacity: 0.8; }
    to { transform: scale(1.03); opacity: 1; }
}

.pf-quizgen-test-display-card.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    filter: saturate(0.7);
}

@media (max-width: 900px) {
    .pf-quizgen-test-pool-list {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-test-category-children {
        margin-left: 12px;
        padding-left: 10px;
    }

    .pf-quizgen-test-display-grid {
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .pf-quizgen-test-mode-grid,
    .pf-quizgen-test-display-grid {
        grid-template-columns: 1fr;
        justify-content: stretch;
    }

    .pf-quizgen-test-mode-card,
    .pf-quizgen-test-display-card {
        width: 100%;
    }

    .pf-quizgen-test-category-children {
        margin-left: 8px;
        padding-left: 8px;
    }
}

.pf-quizgen-embed-modal .pf-quizgen-modal-content {
    max-height: 95vh;
}

.pf-quizgen-quiz-grid {
    padding: var(--quizgen-space-lg);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: var(--quizgen-space-lg);
    min-height: 400px;
}

.pf-quizgen-quiz-card,
.pf-quizgen-quiz-item {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dbe8f0;
    border-radius: 14px;
    box-shadow: 0 8px 18px rgba(16, 42, 68, 0.08);
    transition: var(--quizgen-transition);
    overflow: hidden;
    position: relative;
}

.pf-quizgen-quiz-card::before,
.pf-quizgen-quiz-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.85) 0%, rgba(52, 152, 219, 0.85) 100%);
}

.pf-quizgen-quiz-card:hover,
.pf-quizgen-quiz-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--quizgen-shadow-md);
}

.pf-quizgen-quiz-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #e8f0f5;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.98) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.pf-quizgen-quiz-header .pf-quizgen-drag-handle {
    width: 28px;
    height: 28px;
    border-radius: 9px;
    color: #5f7488;
    background: linear-gradient(180deg, #f8fcff 0%, #eef4f8 100%);
    border: 1px solid #dce7ef;
}

.pf-quizgen-quiz-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.pf-quizgen-quiz-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-quizgen-quiz-number {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #6e7f8f;
}

.pf-quizgen-quiz-question {
    margin: 0;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.5;
    color: #24384d;
}

.pf-quizgen-question-hook {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 2px 10px;
    border-radius: 999px;
    border: 1px solid rgba(24, 119, 242, 0.25);
    background: rgba(24, 119, 242, 0.08);
    color: #1d4e89;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pf-quizgen-quiz-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid #d8e6f2;
    background: #f5faff;
    color: #4f6d85;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    transition: all 0.18s ease;
}

.pf-quizgen-quiz-hint:hover {
    border-color: #8bb6d8;
    color: #2f5676;
    background: #edf6ff;
}

.pf-quizgen-quiz-hint:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.14);
}

.pf-quizgen-quiz-hint.is-revealed {
    border-color: #9fc3a6;
    background: #f2fbf4;
    color: #336548;
}

.pf-quizgen-quiz-hint svg {
    flex-shrink: 0;
}

.pf-quizgen-quiz-hint-text {
    line-height: 1.35;
}

.pf-quizgen-quiz-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-quizgen-answer-text {
    flex: 1;
    color: #334b5f;
}

.pf-quizgen-correct-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    color: #ffffff;
    background: #2ea760;
}

.pf-quizgen-quiz-footer {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e8f0f5;
    background: rgba(248, 251, 253, 0.7);
}

.pf-quizgen-quiz-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 10px;
    border-left: 1px solid #e2ebf2;
}

.pf-quizgen-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 1px solid #dbe8f2;
    background: #ffffff;
    color: #315169;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pf-quizgen-btn-icon:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(52, 152, 219, 0.48);
    box-shadow: 0 4px 10px rgba(23, 60, 92, 0.14);
}

.pf-quizgen-btn-icon:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.pf-quizgen-drag-handle {
    color: #6b7f90;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.pf-quizgen-quiz-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* JS-rendered quiz card footer/action system */
.pf-quizgen-quiz-id {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(22, 32, 45, 0.78);
    color: #fff;
    padding: 4px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.pf-quizgen-quiz-card:hover .pf-quizgen-quiz-id,
.pf-quizgen-quiz-item:hover .pf-quizgen-quiz-id {
    opacity: 1;
}

.pf-quizgen-status-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 4;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(17, 36, 56, 0.22);
}

.pf-quizgen-status-icon.active { color: #27ae60; }
.pf-quizgen-status-icon.inactive { color: #95a5a6; }

.pf-quizgen-header-row-1 {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pf-quizgen-quiz-meta-grid {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    padding-bottom: 0;
    width: 100%;
}

.pf-quizgen-header-row-2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.pf-quizgen-quiz-footer .pf-quizgen-header-row-2 {
    display: flex !important;
    width: auto;
    margin-left: auto;
    padding-top: 0;
    padding-left: 0;
    border-top: 0;
    border-left: 0;
    justify-content: flex-end;
}

.pf-quizgen-action-btn {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    border: 1px solid #d7e5f0;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9fc 100%);
    color: #35546c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pf-quizgen-action-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(52, 152, 219, 0.48);
    box-shadow: 0 5px 12px rgba(23, 60, 92, 0.15);
}

.pf-quizgen-action-test {
    color: #1f7dd1;
    border-color: rgba(31, 125, 209, 0.3);
    background: linear-gradient(180deg, rgba(231, 244, 255, 0.95) 0%, rgba(244, 250, 255, 0.95) 100%);
}

/* Fullscreen gameplay overlay (pool play mode) */
.pf-quizgen-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 23000;
    background: rgba(18, 36, 52, 0.58);
    backdrop-filter: blur(7px) saturate(1.05);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.pf-quizgen-fullscreen-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.pf-quizgen-fullscreen-container {
    width: min(820px, 75vw);
    max-height: 94vh;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 22px 56px rgba(14, 36, 58, 0.34);
    transform: translateY(16px) scale(0.985);
    transition: transform 0.25s ease;
}

.pf-quizgen-fullscreen-overlay.active .pf-quizgen-fullscreen-container {
    transform: translateY(0) scale(1);
}

.pf-quizgen-fullscreen-header {
    background: var(--quizgen-gradient);
    color: #ffffff;
    padding: 11px 16px;
    display: grid;
    grid-template-columns: 166px minmax(420px, 1fr) auto auto;
    grid-template-areas: "title progress points close";
    align-items: center;
    column-gap: 10px;
    row-gap: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.pf-quizgen-fullscreen-progress-inline {
    grid-area: progress;
    min-width: 0;
    width: 100%;
    align-self: center;
}

.pf-quizgen-fullscreen-progress-inline .pf-quizgen-test-progress-text {
    margin-bottom: 3px;
    font-size: 14px;
    font-weight: 700;
}

.pf-quizgen-fullscreen-score-inline {
    grid-area: points;
    min-width: 78px;
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
}

.pf-quizgen-fullscreen-score-inline .pf-quizgen-test-score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
    margin: 0;
}

.pf-quizgen-fullscreen-score-inline .pf-quizgen-test-score-value {
    font-size: 32px;
    line-height: 0.9;
    font-weight: 800;
    margin: 0;
}

.pf-quizgen-fullscreen-score-display-inline {
    grid-area: counters;
    justify-self: end;
    margin: 0;
    justify-content: flex-end;
    gap: 5px;
}

.pf-quizgen-fullscreen-score-display-inline .pf-quizgen-test-score-item {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 999px;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

.pf-quizgen-fullscreen-score-display-inline .pf-quizgen-test-score-value,
.pf-quizgen-fullscreen-score-display-inline .pf-quizgen-test-score-icon {
    color: #ffffff;
}

.pf-quizgen-fullscreen-score-display-inline .pf-quizgen-test-score-icon svg {
    width: 10px;
    height: 10px;
}

.pf-quizgen-fullscreen-score-display-inline .pf-quizgen-test-score-value {
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
}

.pf-quizgen-fullscreen-header-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-fullscreen-progress {
    flex: 1;
    min-width: min(300px, 100%);
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-fullscreen-score {
    min-width: 92px;
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-fullscreen-score-display {
    margin: 0;
    justify-content: flex-end;
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-test-score-item {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: 999px;
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.26);
    color: #ffffff;
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-test-score-value,
.pf-quizgen-fullscreen-header-status .pf-quizgen-test-score-icon {
    color: #ffffff;
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-test-score-icon svg {
    width: 12px;
    height: 12px;
}

.pf-quizgen-fullscreen-header-status .pf-quizgen-test-score-value {
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
}

.pf-quizgen-fullscreen-title {
    grid-area: title;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pf-quizgen-fullscreen-title-text {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-quizgen-fullscreen-close {
    grid-area: close;
    justify-self: end;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pf-quizgen-fullscreen-content {
    padding: 0px 16px 16px 16px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    background:
        radial-gradient(circle at top left, rgba(229, 243, 255, 0.92) 0%, rgba(229, 243, 255, 0) 42%),
        linear-gradient(180deg, rgba(252, 254, 255, 0.98) 0%, rgba(240, 247, 255, 0.98) 100%);
}

.pf-quizgen-fullscreen-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    background: var(--quizgen-gradient);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #ffffff;
}

.pf-quizgen-fullscreen-footer-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.pf-quizgen-fullscreen-footer-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    padding: 2px 8px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.pf-quizgen-fullscreen-footer-pill strong {
    font-weight: 700;
    color: #ffffff;
    opacity: 0.92;
}

.pf-quizgen-fullscreen-footer-system {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0.95;
}

.pf-quizgen-fullscreen-title .pf-quizgen-pool-icon {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 9px;
    color: #225781;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.72);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    line-height: 1;
}

.pf-quizgen-fullscreen-title .pf-quizgen-pool-icon.is-pool {
    color: #225781;
    background: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.72);
}

.pf-quizgen-fullscreen-title .pf-quizgen-pool-icon.is-category {
    color: #3d2f60;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 239, 255, 0.94) 100%);
    border-color: rgba(221, 203, 255, 0.9);
    box-shadow: inset 0 0 0 1px rgba(164, 130, 228, 0.22);
}

.pf-quizgen-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.34);
    transform: rotate(90deg);
}

.pf-quizgen-fullscreen-title .pf-quizgen-pool-icon svg {
    width: 15px;
    height: 15px;
}

/* Unified gameplay shell (inline + fullscreen) */
.pf-quizgen-test-header {
    background: var(--quizgen-gradient);
    color: #ffffff;
    padding: 18px 24px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    border-bottom: none;
    backdrop-filter: none;
    box-shadow: none;
}

.pf-quizgen-test-progress {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 180px;
}

.pf-quizgen-test-progress-text {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    margin: 0;
}

.pf-quizgen-test-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.28);
    border-radius: 2px;
    overflow: hidden;
}

.pf-quizgen-test-progress-fill {
    height: 100%;
    background: var(--quizgen-primary-green);
    transition: width 0.3s ease;
}

.pf-quizgen-test-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 12px;
    min-width: 84px;
    flex-shrink: 0;
}

.pf-quizgen-test-score-label {
    font-size: 11px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pf-quizgen-test-score-value {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.1;
}

.pf-quizgen-test-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.pf-quizgen-test-close:hover {
    background: rgba(255, 255, 255, 0.35);
    color: #ffffff;
    transform: rotate(90deg);
}

.pf-quizgen-test-body {
    max-width: none;
    margin: 0;
    padding: 0;
}

.pf-quizgen-fullscreen-quiz {
    max-width: none;
    margin: 0;
    padding: 0;
}

.pf-quizgen-test-question {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 255, 0.96) 100%);
    border: 1px solid #dbe8f3;
    border-radius: 16px;
    box-shadow: 0 10px 26px rgba(22, 57, 88, 0.13);
}

/* Inside inline test container: question card is flush (no inner box) */
.pf-quizgen-test-container .pf-quizgen-test-question {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.pf-quizgen-test-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px 2px;
    flex-wrap: wrap;
}

.pf-quizgen-test-meta-left,
.pf-quizgen-test-meta-right {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.pf-quizgen-test-category,
.pf-quizgen-test-type,
.pf-quizgen-test-difficulty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    border: 1px solid #d9e8f3;
    background: #f5faff;
    color: #34556e;
}

.pf-quizgen-test-meta-pool {
    padding-top: 12px;
}

.pf-quizgen-test-meta-category {
    padding-top: 12px;
}

.pf-quizgen-test-meta-category .pf-quizgen-test-meta-left > .pf-quizgen-test-category:first-child {
    border-color: rgba(167, 133, 230, 0.42);
    background: linear-gradient(180deg, #faf5ff 0%, #f2e9ff 100%);
    color: #543a81;
}

.pf-quizgen-test-meta-category .pf-quizgen-test-type {
    border-color: rgba(126, 166, 214, 0.36);
    background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
    color: #355c86;
}

.pf-quizgen-test-pool-chip {
    border-color: rgba(255, 255, 255, 0.28);
    background: var(--quizgen-gradient);
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(36, 122, 172, 0.24);
    max-width: min(100%, 500px);
}

.pf-quizgen-test-pool-chip svg {
    opacity: 0.96;
}

.pf-quizgen-test-pool-chip span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pf-quizgen-test-more-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    border: 1px solid rgba(52, 152, 219, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
    color: #3d5e78;
    font-size: 12px;
    font-weight: 700;
}

.pf-quizgen-test-meta-score-display {
    margin-right: 2px;
    gap: 4px;
}

.pf-quizgen-test-meta-score-display .pf-quizgen-test-score-item {
    width: 22px;
    height: 22px;
    min-width: 22px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    box-shadow: none;
}

.pf-quizgen-test-meta-score-display .pf-quizgen-test-score-item-correct {
    background: rgba(34, 197, 94, 0.14);
    border-color: rgba(34, 197, 94, 0.38);
    color: #12823c;
}

.pf-quizgen-test-meta-score-display .pf-quizgen-test-score-item-wrong {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.38);
    color: #be2727;
}

.pf-quizgen-test-meta-score-display .pf-quizgen-test-score-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.pf-quizgen-test-meta-score-display .pf-quizgen-test-score-icon svg {
    width: 9px;
    height: 9px;
    stroke-width: 2.4;
}

.pf-quizgen-test-meta-score-display .pf-quizgen-test-score-value {
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    margin-left: 1px;
}

.pf-quizgen-test-question-text {
    font-size: 1.24rem;
    line-height: 1.55;
    font-weight: 700;
    color: #1f3347;
    margin: 0;
    padding: 20px 20px 4px 20px;
}



.pf-quizgen-test-hint {
    margin: 2px 14px 2px;
    align-self: flex-start;
    display: inline-flex;
}

.pf-quizgen-test-answers {
    display: grid;
    gap: 9px;
    padding: 10px 14px;
    justify-items: center;
}

.pf-quizgen-test-answer-btn {
    width: min(100%, 700px);
    text-align: left;
    padding: 12px 15px;
    border-radius: 11px;
    border: 1px solid #d7e5f1;
    background: #ffffff;
    color: #27415a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.pf-quizgen-test-answer-btn:hover:not(:disabled) {
    transform: translateX(3px);
    border-color: rgba(52, 152, 219, 0.55);
    background: linear-gradient(180deg, rgba(244, 250, 255, 0.98) 0%, rgba(236, 246, 255, 0.96) 100%);
    box-shadow: 0 8px 16px rgba(25, 66, 101, 0.12);
}

.pf-quizgen-test-answer-btn.correct {
    border-color: rgba(46, 204, 113, 0.55);
    background: rgba(46, 204, 113, 0.13);
    color: #1f7d4c;
}

.pf-quizgen-test-answer-btn.wrong {
    border-color: rgba(231, 76, 60, 0.5);
    background: rgba(231, 76, 60, 0.12);
    color: #a43429;
}

.pf-quizgen-test-answer-btn:disabled {
    cursor: not-allowed;
    opacity: 0.95;
}

.pf-quizgen-test-feedback {
    margin: 2px 14px 0;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #dbe8f3;
    background: #f7fbff;
    color: #33536d;
    display: grid;
    gap: 8px;
}

.pf-quizgen-test-feedback.correct {
    border-color: rgba(46, 204, 113, 0.42);
    background: rgba(46, 204, 113, 0.12);
}

.pf-quizgen-test-feedback.wrong {
    border-color: rgba(231, 76, 60, 0.4);
    background: rgba(231, 76, 60, 0.1);
}

.pf-quizgen-test-explanation {
    font-size: 14px;
    color: #3f5f79;
}

.pf-quizgen-test-footer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 7px;
    padding: 8px 14px 14px;
}

.pf-quizgen-test-btn {
    border: 1px solid #d4e3ef;
    background: #fff;
    color: #2b4b64;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pf-quizgen-test-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(52, 152, 219, 0.5);
    box-shadow: 0 8px 16px rgba(23, 62, 95, 0.15);
}

.pf-quizgen-test-btn:disabled {
    opacity: 0.52;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.pf-quizgen-test-btn-skip {
    background: linear-gradient(180deg, #ffffff 0%, #f2f8fd 100%);
    color: #3c5a73;
    border-color: #caddeb;
}

.pf-quizgen-test-btn-next,
.pf-quizgen-test-btn-retry,
.pf-quizgen-fullscreen-content .pf-quizgen-test-btn-primary {
    background: var(--quizgen-gradient);
    color: #fff;
    border-color: rgba(26, 108, 165, 0.55);
}

.pf-quizgen-test-btn-next:hover,
.pf-quizgen-test-btn-retry:hover,
.pf-quizgen-fullscreen-content .pf-quizgen-test-btn-primary:hover {
    border-color: rgba(26, 108, 165, 0.74);
}

.pf-quizgen-test-score-display {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.pf-quizgen-test-score-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    border: 1px solid #dbe8f3;
    background: #f8fbff;
}

.pf-quizgen-test-results {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 16px 16px;
    gap: 8px;
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(211, 233, 250, 0.48) 0%, rgba(245, 250, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 251, 255, 0.98) 100%);
}

.pf-quizgen-pools-results {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 18px 16px 16px;
    gap: 8px;
    background:
        radial-gradient(120% 85% at 50% 0%, rgba(202, 232, 219, 0.42) 0%, rgba(245, 250, 255, 0) 56%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(246, 251, 255, 0.98) 100%);
}

.pf-quizgen-pools-results-headline {
    width: 100%;
    max-width: 540px;
    padding: 9px 12px;
    border-radius: 999px;
    border: 1px solid #d2e6da;
    background: rgba(238, 249, 244, 0.95);
    color: #355c4b;
    font-size: 13px;
    font-weight: 700;
}

.pf-quizgen-category-results .pf-quizgen-pools-results-headline {
    border-color: #d9d7ec;
    background: rgba(245, 243, 255, 0.95);
    color: #4d3e6d;
}

.pf-quizgen-pools-results-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1f7c5a;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.97) 0%, rgba(223, 245, 235, 0.94) 58%, rgba(191, 234, 214, 0.9) 100%);
    border: 1px solid rgba(46, 160, 111, 0.34);
    box-shadow: 0 14px 28px rgba(26, 95, 69, 0.2);
}

.pf-quizgen-category-results .pf-quizgen-pools-results-icon {
    color: #5d4a8b;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.97) 0%, rgba(235, 229, 255, 0.94) 58%, rgba(220, 210, 250, 0.9) 100%);
    border-color: rgba(93, 74, 139, 0.3);
    box-shadow: 0 14px 28px rgba(79, 58, 131, 0.18);
}

.pf-quizgen-pools-results-title {
    font-size: 44px;
    font-weight: 800;
    color: #254d3e;
    line-height: 1.12;
    margin-top: 4px;
}

.pf-quizgen-category-results .pf-quizgen-pools-results-title {
    color: #433663;
}

.pf-quizgen-pools-results-score {
    font-size: 64px;
    line-height: 1;
    font-weight: 900;
    color: #1f7a58;
    text-shadow: 0 10px 20px rgba(24, 100, 72, 0.16);
}

.pf-quizgen-category-results .pf-quizgen-pools-results-score {
    color: #5a4786;
    text-shadow: 0 10px 20px rgba(69, 49, 114, 0.16);
}

.pf-quizgen-pools-results-stats {
    width: 100%;
    max-width: 540px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.pf-quizgen-pools-stat {
    border: 1px solid #cfe4da;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(243, 252, 247, 0.95) 100%);
    padding: 12px 10px;
    box-shadow: 0 8px 16px rgba(23, 94, 67, 0.08);
}

.pf-quizgen-pools-stat-value {
    font-size: 36px;
    font-weight: 800;
    color: #235743;
    line-height: 1;
}

.pf-quizgen-pools-stat-label {
    margin-top: 6px;
    font-size: 18px;
    color: #4f7b68;
    font-weight: 700;
}

.pf-quizgen-pools-rate,
.pf-quizgen-pools-share,
.pf-quizgen-pools-compact-actions,
.pf-quizgen-pools-status-message,
.pf-quizgen-pools-results-actions,
.pf-quizgen-pools-bubu {
    width: 100%;
    max-width: 540px;
}

.pf-quizgen-pools-rate {
    margin-top: 8px;
    padding: 11px 12px 10px;
    border-radius: 14px;
    border: 1px solid #d6e5f1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 255, 0.96) 100%);
}

.pf-quizgen-pools-rating-summary {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: #35546d;
    text-align: center;
}

.pf-quizgen-pools-rating-summary-label {
    font-weight: 800;
    color: #214f3d;
}

.pf-quizgen-pools-rating-summary-value {
    font-weight: 900;
    color: #1f7f68;
}

.pf-quizgen-pools-rating-summary-count {
    color: #5d7484;
}

.pf-quizgen-pools-share {
    margin: 10px 0 2px 0;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef5fb 100%);
    border-radius: 14px;
    border: 2px solid #d0e4f3;
    box-shadow: 0 4px 16px rgba(44, 82, 120, 0.08);
    box-sizing: border-box;
}

.pf-quizgen-pools-share h3 {
    margin: 0 0 12px 0;
    color: #2c3e50;
    font-weight: 700;
    font-size: 17px;
}

.pf-quizgen-pools-share input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
}

.pf-quizgen-pools-share input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}

.pf-quizgen-pools-compact-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pf-quizgen-pools-bubu {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #cdeccd;
    background: linear-gradient(180deg, #f8fff8 0%, #eefbef 100%);
    color: #27653a;
    font-weight: 700;
    font-size: 13px;
}

.pf-quizgen-pools-results-actions {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pf-quizgen-pools-auto-share-link {
    margin-top: 10px;
}

.pf-quizgen-test-results-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e6fb1;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.97) 0%, rgba(221, 239, 255, 0.94) 58%, rgba(190, 222, 248, 0.9) 100%);
    border: 1px solid rgba(52, 152, 219, 0.38);
    box-shadow: 0 14px 28px rgba(28, 71, 108, 0.2);
}

.pf-quizgen-test-results-title {
    font-size: 44px;
    font-weight: 800;
    color: #233d55;
    line-height: 1.12;
    margin-top: 4px;
}

.pf-quizgen-test-results-score {
    font-size: 64px;
    line-height: 1;
    font-weight: 900;
    color: #1f72b3;
    text-shadow: 0 10px 20px rgba(26, 96, 154, 0.16);
}

.pf-quizgen-test-results-stats {
    width: 100%;
    max-width: 540px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.pf-quizgen-test-stat {
    border: 1px solid #d4e5f2;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 250, 255, 0.95) 100%);
    padding: 12px 10px;
    box-shadow: 0 8px 16px rgba(26, 77, 118, 0.08);
}

.pf-quizgen-test-stat-value {
    font-size: 36px;
    font-weight: 800;
    color: #214c6a;
    line-height: 1;
}

.pf-quizgen-test-stat-label {
    margin-top: 6px;
    font-size: 29px;
    color: #5f7b90;
    font-weight: 700;
}

.pf-quizgen-test-rate {
    width: 100%;
    max-width: 500px;
    margin-top: 8px;
    padding: 11px 12px 10px;
    border-radius: 14px;
    border: 1px solid #d6e5f1;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 251, 255, 0.96) 100%);
}

.pf-quizgen-test-rating-stars {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.pf-quizgen-test-star {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #264761;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #d2e2ef;
    cursor: pointer;
    transition: transform 0.16s ease, border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.pf-quizgen-test-star:hover {
    transform: translateY(-2px);
    border-color: rgba(52, 152, 219, 0.55);
    color: #1e6fb1;
    background: #ffffff;
}

.pf-quizgen-test-star.active,
.pf-quizgen-test-star.selected,
.pf-quizgen-test-star.filled {
    color: #ffffff;
    background: var(--quizgen-gradient);
    border-color: rgba(31, 115, 178, 0.62);
}

.pf-quizgen-test-star svg {
    width: 16px;
    height: 16px;
}

.pf-quizgen-test-rating-feedback {
    margin: 8px auto 0;
    max-width: 440px;
    font-size: 18px;
    line-height: 1.35;
    color: #35546d;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
}

.pf-quizgen-test-rating-feedback svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.pf-quizgen-test-compact-actions {
    width: 100%;
    max-width: 540px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.pf-quizgen-test-share {
    width: 100%;
    max-width: 540px;
    margin: 16px 0 4px 0;
    padding: 22px 24px;
    background: linear-gradient(135deg, #f8f9fa 0%, #eef5fb 100%);
    border-radius: 14px;
    border: 2px solid #d0e4f3;
    box-shadow: 0 4px 16px rgba(44, 82, 120, 0.08);
    box-sizing: border-box;
}

.pf-quizgen-test-share h3 {
    margin: 0 0 14px 0;
    color: #2c3e50;
    font-weight: 700;
    font-size: 17px;
}

.pf-quizgen-test-share input {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.pf-quizgen-test-share input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.12);
}

.pf-quizgen-test-btn-save {
    width: 100%;
    background: linear-gradient(135deg, #2980b9 0%, #1a6fa8 100%);
    box-shadow: 0 6px 18px rgba(41, 128, 185, 0.28);
}

.pf-quizgen-test-btn-save:hover {
    box-shadow: 0 10px 26px rgba(41, 128, 185, 0.38);
}

.pf-quizgen-enter-action-btn {
    border: 1px solid #d0deea;
    background: #ffffff;
    color: #46607a;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.pf-quizgen-enter-action-btn:hover {
    border-color: #84b5d8;
    color: #2f5272;
}

.pf-quizgen-enter-action-btn.active {
    background: linear-gradient(135deg, #2980b9 0%, #1a6fa8 100%);
    border-color: #1f679b;
    color: #ffffff;
    box-shadow: 0 6px 14px rgba(41, 128, 185, 0.25);
}

.pf-quizgen-toast-container {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 26080;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.pf-quizgen-notification {
    max-width: min(92vw, 380px);
    padding: 12px 14px;
    border-radius: 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 14px 24px rgba(18, 46, 72, 0.25);
    transform: translateX(14px);
    opacity: 0;
    animation: pfQuizgenToastIn 0.22s ease forwards;
}

.pf-quizgen-notification.success {
    background: linear-gradient(135deg, #1f9d5b 0%, #21b96a 100%);
}

.pf-quizgen-notification.error {
    background: linear-gradient(135deg, #d64545 0%, #ef5a5a 100%);
}

.pf-quizgen-notification.warning {
    background: linear-gradient(135deg, #d08a1c 0%, #e3a32d 100%);
}

.pf-quizgen-notification.info {
    background: linear-gradient(135deg, #266da3 0%, #2f8fd8 100%);
}

.pf-quizgen-notification.is-leaving {
    animation: pfQuizgenToastOut 0.24s ease forwards;
}

.pf-quizgen-leaderboard-your-rank {
    text-align: center;
    padding: 10px 14px;
    background: linear-gradient(135deg, #eef5fb 0%, #ddeef9 100%);
    border-radius: 10px;
    font-size: 15px;
    color: #2c4b63;
    border: 1px solid #c8dff0;
}

.pf-quizgen-leaderboard-me {
    background: linear-gradient(135deg, #fffbef 0%, #fff3c8 100%) !important;
    border-color: #f0d85a !important;
    font-weight: 700;
}

.pf-quizgen-leaderboard-time {
    color: #6f8192;
    font-size: 12px;
    min-width: 56px;
    text-align: right;
}

@keyframes pfQuizgenToastIn {
    from {
        transform: translateX(14px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pfQuizgenToastOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(10px);
        opacity: 0;
    }
}

.pf-quizgen-test-status-message {
    min-height: 22px;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: #4d6a80;
}

.pf-quizgen-leaderboard-run-meta {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px solid #d6e6f2;
    background: linear-gradient(180deg, #f9fcff 0%, #f1f8fe 100%);
    font-size: 12px;
    color: #36566f;
}

.pf-quizgen-leaderboard-run-meta span {
    color: #5d768c;
    margin-left: 4px;
}

.pf-quizgen-leaderboard-run-meta.is-bubu {
    border-color: #cdeccd;
    background: linear-gradient(180deg, #f8fff8 0%, #eefbef 100%);
    color: #27653a;
}

.pf-quizgen-auto-share-link {
    width: 100%;
    max-width: 540px;
    margin-top: 10px;
    padding: 13px 14px;
    border-radius: 14px;
    border: 1px solid #d6e6f2;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 251, 255, 0.96) 100%);
}

.pf-quizgen-auto-share-link-head {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 800;
    color: #2c4b63;
}

.pf-quizgen-auto-share-link-row {
    margin-top: 9px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.pf-quizgen-auto-share-link-input {
    width: 100%;
    border: 1px solid #cfdfec;
    border-radius: 9px;
    padding: 9px 10px;
    font-size: 14px;
    color: #2a4a63;
    background: #ffffff;
}

.pf-quizgen-auto-share-link-copy {
    border: 1px solid rgba(31, 115, 178, 0.36);
    border-radius: 9px;
    padding: 9px 12px;
    background: linear-gradient(180deg, rgba(241, 249, 255, 0.98) 0%, rgba(233, 245, 254, 0.98) 100%);
    color: #2269a2;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}

.pf-quizgen-auto-share-link-copy:hover {
    border-color: rgba(31, 115, 178, 0.56);
    transform: translateY(-1px);
}

.pf-quizgen-auto-share-link-note {
    margin-top: 8px;
    font-size: 15px;
    color: #5f7b90;
}

.pf-quizgen-upgrade-notice {
    padding: 14px;
    border-radius: 12px;
    border: 1px solid #dbe8f2;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 100%);
}

.pf-quizgen-upgrade-notice-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1e6fb1;
    background: rgba(52, 152, 219, 0.14);
    border: 1px solid rgba(52, 152, 219, 0.25);
}

.pf-quizgen-upgrade-notice h4 {
    margin: 10px 0 8px;
    font-size: 18px;
    color: #26435a;
}

.pf-quizgen-upgrade-notice p {
    margin: 0;
    color: #436178;
    line-height: 1.55;
}

.pf-quizgen-upgrade-notice p + p {
    margin-top: 8px;
}

.pf-quizgen-test-results-actions,
.pf-quizgen-fullscreen-content .pf-quizgen-test-results-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 11px;
}

.pf-quizgen-status-message-inline {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
}

.pf-quizgen-status-message-inline.success {
    color: #239a5f;
}

.pf-quizgen-status-message-inline.error {
    color: #d14b3c;
}

.pf-quizgen-share-info {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.pf-quizgen-share-qr {
    border: 1px solid #d9e7f2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f6fbff 100%);
    padding: 10px;
    box-shadow: 0 8px 18px rgba(19, 56, 88, 0.1);
}

.pf-quizgen-share-qr img {
    width: 100%;
    height: auto;
    display: block;
}

.pf-quizgen-share-details {
    min-width: 0;
}

.pf-quizgen-share-url-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.pf-quizgen-share-url-input {
    flex: 1;
}

.pf-quizgen-share-stats {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #dce9f3;
    background: linear-gradient(180deg, #f8fcff 0%, #f1f7fc 100%);
}

.pf-quizgen-share-stats h4 {
    margin: 0 0 8px;
    font-size: 14px;
    color: #2b4f69;
}

.pf-quizgen-share-stats p {
    margin: 0;
    font-size: 13px;
    color: #5f7588;
    line-height: 1.5;
}

.pf-quizgen-leaderboard-score-display {
    text-align: center;
    padding: 18px;
    border-radius: 12px;
    margin-bottom: 16px;
    color: #fff;
    background: var(--quizgen-gradient);
    box-shadow: 0 10px 24px rgba(22, 64, 99, 0.2);
}

.pf-quizgen-leaderboard-score-value {
    font-size: 46px;
    line-height: 1;
    font-weight: 900;
}

.pf-quizgen-leaderboard-score-meta {
    margin-top: 8px;
    font-size: 14px;
    opacity: 0.95;
}

.pf-quizgen-leaderboard-score-points {
    margin-top: 6px;
    font-size: 12px;
    opacity: 0.85;
}

.pf-quizgen-form-note {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #637a8f;
}

/* Play mode: answers stay unreadable in list cards */
.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-quiz-answers,
.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-tf-answer,
.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-free-answer,
.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-explanation,
.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-hint {
    filter: blur(6px);
    opacity: 0.42;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Play mode: hide admin-only header elements */
.pf-quizgen-preview-mode .pf-quizgen-quiz-header .pf-quizgen-quiz-actions,
.pf-quizgen-preview-mode .pf-quizgen-quiz-header .pf-quizgen-drag-handle,
.pf-quizgen-preview-mode .pf-quizgen-quiz-footer .pf-quizgen-header-row-2 {
    display: none !important;
}

.pf-quizgen-preview-mode .pf-quizgen-quiz-header {
    grid-template-columns: 1fr;
}

.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-correct-mark {
    visibility: hidden;
}

.pf-quizgen-preview-mode .pf-quizgen-quiz-card .pf-quizgen-answer-option.correct {
    border-color: #e6edf2;
    background: #ffffff;
}

.pf-quizgen-play-answer-cta {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 8;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.pf-quizgen-play-answer-btn {
    border: 1px solid rgba(37, 118, 180, 0.5);
    border-radius: 999px;
    padding: 12px 22px;
    background: linear-gradient(180deg, #f8fcff 0%, #e6f3ff 100%);
    color: #1f557d;
    font-size: 16px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(20, 55, 88, 0.2);
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.pf-quizgen-play-answer-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(37, 118, 180, 0.7);
    box-shadow: 0 14px 26px rgba(23, 60, 92, 0.24);
    background: linear-gradient(180deg, #ffffff 0%, #eaf5ff 100%);
}

.pf-quizgen-play-answer-btn svg {
    width: 18px;
    height: 18px;
}

.pf-quizgen-preview-mode .pf-quizgen-quiz-card:hover .pf-quizgen-play-answer-cta,
.pf-quizgen-preview-mode .pf-quizgen-quiz-card:focus-within .pf-quizgen-play-answer-cta {
    opacity: 1;
    pointer-events: auto;
}

.pf-quizgen-empty-state {
    grid-column: 1 / -1;
    background: #fff;
    border: 2px dashed rgba(52, 152, 219, 0.3);
    border-radius: 14px;
    padding: 28px;
    text-align: center;
}

.pf-quizgen-empty-state.pf-quizgen-empty-state-premium {
    border: 1px solid rgba(48, 127, 190, 0.25);
    background: linear-gradient(145deg, rgba(240, 248, 255, 0.96) 0%, rgba(255, 255, 255, 0.97) 50%, rgba(236, 248, 242, 0.96) 100%);
    box-shadow: 0 18px 36px rgba(20, 55, 88, 0.11);
    border-radius: 18px;
    padding: 34px 30px;
}

.pf-quizgen-empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #2f7fbe;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.18) 0%, rgba(46, 204, 113, 0.16) 100%);
    border: 1px solid rgba(52, 152, 219, 0.25);
}

.pf-quizgen-empty-state-actions {
    margin-top: 16px;
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

.pf-quizgen-empty-state-note {
    margin-top: 10px;
    font-size: 12px;
    color: #6f8598;
}

.pf-quizgen-kategorie-grid,
.pf-quizgen-pools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: var(--quizgen-space-lg);
}

@media (max-width: 768px) {
    .pf-quizgen-hero {
        padding: 14px;
    }

    #tab-quizfragen {
        gap: 10px;
    }

    .pf-quizgen-hero h2 {
        font-size: 32px;
    }

    .pf-quizgen-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .pf-quizgen-hero-stats .pf-quizgen-stat-value {
        font-size: 24px;
    }

    .pf-quizgen-action-bar,
    .pf-quizgen-filter-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-quizgen-search-box {
        min-width: 0;
    }

    .pf-quizgen-filter-group {
        width: 100%;
    }

    .pf-quizgen-select {
        min-width: 0;
        width: 100%;
    }

    .pf-quizgen-quiz-grid {
        grid-template-columns: 1fr;
        gap: var(--quizgen-space-md);
        padding: var(--quizgen-space-md);
    }

    .pf-quizgen-quiz-header,
    .pf-quizgen-quiz-footer {
        flex-wrap: wrap;
    }

    .pf-quizgen-quiz-header {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .pf-quizgen-quiz-actions {
        border-left: 0;
        padding-left: 0;
    }

    .pf-quizgen-quiz-meta {
        width: 100%;
    }

    .pf-quizgen-quiz-meta .pf-quizgen-meta-item {
        font-size: 12px;
        padding: 3px 7px;
    }

    .pf-quizgen-quiz-actions,
    .pf-quizgen-quiz-status {
        margin-left: 0;
        width: 100%;
        justify-content: flex-start;
    }

    .pf-quizgen-quiz-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-quizgen-quiz-meta-grid {
        width: 100%;
    }

    .pf-quizgen-quiz-footer .pf-quizgen-header-row-2 {
        width: 100%;
        border-left: 0;
        padding-left: 0;
        justify-content: flex-start;
    }

    .pf-quizgen-fullscreen-overlay {
        padding: 8px;
    }

    .pf-quizgen-fullscreen-container {
        width: 100%;
        max-height: 98vh;
        border-radius: 14px;
    }

    .pf-quizgen-fullscreen-content {
        padding: 12px;
    }

    .pf-quizgen-test-header {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }

    .pf-quizgen-fullscreen-header {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 8px;
    }

    .pf-quizgen-fullscreen-title {
        grid-column: 1 / 2;
        grid-row: 1;
    }

    .pf-quizgen-fullscreen-close {
        grid-column: 2 / 3;
        grid-row: 1;
        justify-self: end;
    }

    .pf-quizgen-fullscreen-progress-inline {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .pf-quizgen-fullscreen-score-inline {
        grid-column: 1 / 2;
        grid-row: 3;
        align-items: flex-start;
        text-align: left;
    }

    .pf-quizgen-fullscreen-score-display-inline {
        grid-column: 2 / 3;
        grid-row: 3;
        justify-content: flex-end;
    }

    .pf-quizgen-fullscreen-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .pf-quizgen-fullscreen-footer-system {
        margin-left: 0;
        text-align: right;
    }

    .pf-quizgen-fullscreen-header-status {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-quizgen-fullscreen-header-status .pf-quizgen-fullscreen-progress {
        min-width: 0;
    }

    .pf-quizgen-fullscreen-header-status .pf-quizgen-fullscreen-score-display {
        justify-content: flex-start;
    }

    .pf-quizgen-test-close {
        grid-column: 1 / -1;
        justify-self: end;
    }

    .pf-quizgen-test-body,
    .pf-quizgen-fullscreen-quiz {
        padding: 8px;
    }

    .pf-quizgen-test-question,
    .pf-quizgen-fullscreen-quiz {
        border-radius: 13px;
    }

    

    .pf-quizgen-test-answers {
        padding: 10px 12px;
    }

    .pf-quizgen-test-answer-btn {
        padding: 12px 13px;
        font-size: 14px;
    }

    .pf-quizgen-test-results-score,
    .pf-quizgen-pools-results-score {
        font-size: 34px;
    }

    .pf-quizgen-test-results-stats,
    .pf-quizgen-pools-results-stats {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-test-results-actions,
    .pf-quizgen-pools-results-actions {
        width: 100%;
    }

    .pf-quizgen-test-results-actions .pf-quizgen-test-btn,
    .pf-quizgen-pools-results-actions .pf-quizgen-test-btn {
        width: 100%;
    }

    .pf-quizgen-pools-share,
    .pf-quizgen-pools-rate,
    .pf-quizgen-pools-compact-actions {
        width: 100%;
    }

    .pf-quizgen-modal .pf-quizgen-preview-question p {
        font-size: 17px;
    }

    .pf-quizgen-modal .pf-quizgen-preview-answer {
        grid-template-columns: auto 1fr;
        align-items: flex-start;
    }

    .pf-quizgen-modal .pf-quizgen-correct-badge {
        grid-column: 1 / -1;
        justify-self: start;
        margin-top: 2px;
    }

    .pf-quizgen-modal .pf-quizgen-preview-stats {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-test-footer .pf-quizgen-test-btn {
        width: 100%;
    }

    .pf-quizgen-share-info {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-share-url-row {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-quizgen-share-url-row .pf-quizgen-btn {
        width: 100%;
    }

    .pf-quizgen-kategorie-grid,
    .pf-quizgen-pools-grid {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-pool-actions,
    .pf-quizgen-public-question-actions,
    .pf-quizgen-empty-state-actions {
        grid-template-columns: 1fr;
        flex-direction: column;
    }

    .pf-quizgen-empty-state-actions .pf-quizgen-btn {
        width: 100%;
    }
}

/* Recovery layer for remaining tab sections */

.pf-quizgen-badge,
.pf-quizgen-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    background: rgba(52, 152, 219, 0.12);
    color: #1f5f85;
    border: 1px solid rgba(52, 152, 219, 0.2);
}

.pf-quizgen-badge-kategorie {
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.36);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.pf-quizgen-badge-type {
    background: rgba(78, 128, 255, 0.14);
    color: #3559a4;
}

.pf-quizgen-badge-difficulty {
    background: rgba(243, 156, 18, 0.14);
    color: #8f5b11;
}

.pf-quizgen-badge-points {
    background: rgba(46, 204, 113, 0.14);
    color: #1f734c;
}

.pf-quizgen-status-badge.active {
    background: rgba(39, 174, 96, 0.14);
    color: #1e7848;
}

.pf-quizgen-status-badge.inactive {
    background: rgba(244, 63, 94, 0.12);
    color: #9f2447;
}

.pf-quizgen-status-badge.draft {
    background: rgba(99, 102, 241, 0.12);
    color: #484ac1;
}

.pf-quizgen-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #5f6d7a;
}

.pf-quizgen-quiz-footer .pf-quizgen-meta-item svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
    opacity: 0.88;
    flex: 0 0 16px;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item {
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #e2ebf2;
    background: #f8fbfd;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item:nth-child(1) {
    background: rgba(243, 156, 18, 0.1);
    border-color: rgba(243, 156, 18, 0.28);
    color: #8b5d18;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item:nth-child(1) svg {
    color: #f39c12;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item:nth-child(2) {
    background: rgba(52, 152, 219, 0.1);
    border-color: rgba(52, 152, 219, 0.28);
    color: #2f6287;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item:nth-child(2) svg {
    color: #3498db;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item:nth-child(3) {
    background: rgba(39, 174, 96, 0.11);
    border-color: rgba(39, 174, 96, 0.28);
    color: #276b46;
}

.pf-quizgen-quiz-meta .pf-quizgen-meta-item:nth-child(3) svg {
    color: #2eaf6d;
}

.pf-quizgen-quiz-status .pf-quizgen-status-badge svg {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
}

.pf-quizgen-quiz-badges,
.pf-quizgen-tags,
.pf-quizgen-quiz-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-quizgen-answer-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e6edf2;
    border-radius: 8px;
    background: #ffffff;
}

.pf-quizgen-answer-option.correct {
    border-color: rgba(39, 174, 96, 0.45);
    background: rgba(39, 174, 96, 0.08);
}

.pf-quizgen-answer-letter {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #2c3e50;
    background: #edf2f7;
}

.pf-quizgen-explanation,
.pf-quizgen-hint,
.pf-quizgen-free-answer,
.pf-quizgen-tf-answer {
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fbfd;
    border: 1px solid #e6edf2;
}

.pf-quizgen-tag {
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #27567a;
    background: rgba(52, 152, 219, 0.12);
}

.pf-quizgen-pools-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.pf-quizgen-pools-title h2 {
    margin: 0 0 6px;
    font-size: 22px;
}

.pf-quizgen-pools-title p {
    margin: 0;
    color: #6b7785;
}

.pf-quizgen-pool-debug-badge {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px dashed #9fb4c8;
    background: #f6fbff;
    color: #38556d;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.pf-quizgen-pools-stats,
.pf-quizgen-public-pool-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.pf-quizgen-pool-stat,
.pf-quizgen-stat {
    background: #ffffff;
    border: 1px solid #e5edf3;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}

.pf-quizgen-pool-stat-value,
.pf-quizgen-stat-value {
    font-size: 22px;
    font-weight: 800;
    color: #223549;
}

.pf-quizgen-pool-stat-label,
.pf-quizgen-stat-label {
    font-size: 12px;
    color: #6a7685;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pf-quizgen-pool-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    margin: 0 auto 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(52, 152, 219, 0.12);
    color: #2a648f;
}

.pf-quizgen-pool-card {
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #dbe8f2;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(17, 45, 71, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pf-quizgen-pool-card:hover {
    transform: translateY(-3px);
    border-color: rgba(52, 152, 219, 0.42);
    box-shadow: 0 12px 30px rgba(17, 45, 71, 0.14);
}

.pf-quizgen-pool-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(246, 251, 255, 0.95) 0%, rgba(255, 255, 255, 0.92) 100%);
    border-bottom: 1px solid #e3edf4;
}

.pf-quizgen-pool-icon {
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #24435e;
    border: 1px solid rgba(36, 67, 94, 0.12);
}

.pf-quizgen-pool-icon svg,
.pf-quizgen-kategorie-icon svg {
    width: 22px;
    height: 22px;
}

.pf-quizgen-pool-info {
    flex: 1;
    min-width: 0;
}

.pf-quizgen-pool-info h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #20394f;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-quizgen-pool-topic-badge {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid #dce9f2;
    background: #f5faff;
    color: #5a7388;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
}

.pf-quizgen-pool-description {
    margin: 0;
    padding: 14px 16px 6px;
    color: #5f7488;
    font-size: 14px;
    line-height: 1.5;
    min-height: 68px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pf-quizgen-pool-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
}

.pf-quizgen-pool-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid #d9e6ef;
    background: #f7fbfe;
    color: #486377;
    font-size: 12px;
    font-weight: 700;
}

.pf-quizgen-pool-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 8px;
    padding: 12px 16px 16px;
    border-top: 1px solid #e3edf4;
    background: rgba(248, 252, 255, 0.8);
}

.pf-quizgen-pool-actions.has-admin-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pf-quizgen-pool-actions.has-admin-actions .pf-quizgen-pool-btn-play {
    grid-column: 1 / -1;
}

.pf-quizgen-pool-actions.is-play-only {
    grid-template-columns: 1fr;
}

.pf-quizgen-pool-actions.is-play-only .pf-quizgen-pool-btn-play {
    max-width: 220px;
    justify-self: start;
}

.pf-quizgen-pool-btn {
    padding: 8px 10px;
    border-radius: 9px;
    border: 1px solid #d5e3ec;
    background: #f8fbfe;
    color: #35546a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.pf-quizgen-pool-btn svg {
    width: 14px;
    height: 14px;
}

.pf-quizgen-pool-btn:hover {
    transform: translateY(-1px);
    border-color: #c4d7e5;
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(19, 53, 85, 0.08);
}

.pf-quizgen-pool-btn-play {
    background: linear-gradient(135deg, #e7f7ef 0%, #d9f2e7 100%);
    border-color: #b8dec9;
    color: #1f6f4f;
}

.pf-quizgen-pool-btn-primary,
.pf-quizgen-pool-btn-share {
    background: linear-gradient(135deg, #e9f3fb 0%, #ddeef9 100%);
    border-color: #bfd7ea;
    color: #2c648f;
}

.pf-quizgen-pool-btn-play:hover {
    background: linear-gradient(135deg, #dbf2e5 0%, #cbebdc 100%);
    border-color: #a5d3bb;
    color: #195b40;
}

.pf-quizgen-pool-btn-primary:hover,
.pf-quizgen-pool-btn-share:hover {
    background: linear-gradient(135deg, #dfedf8 0%, #d2e7f6 100%);
    border-color: #adcde4;
    color: #225578;
}

.pf-quizgen-pool-btn-danger {
    border-color: rgba(231, 76, 60, 0.35);
    color: #c0392b;
    background: #fff;
}

.pf-quizgen-pool-btn-danger:hover {
    background: #e74c3c;
    border-color: #e74c3c;
    color: #fff;
}

.pf-quizgen-pool-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pf-quizgen-pool-workflow-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #cfe2ef;
    border-radius: 12px;
    background: linear-gradient(180deg, #f6fbff 0%, #edf7ff 100%);
    padding: 8px 10px;
    margin-bottom: 2px;
}

.pf-quizgen-pool-workflow-step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #1f6f9f;
    background: #dff0fc;
    border: 1px solid #b8d9ee;
}

.pf-quizgen-pool-workflow-step-text {
    font-size: 12px;
    font-weight: 700;
    color: #355b77;
}

.pf-quizgen-pool-workflow-step.is-step-2 {
    background: linear-gradient(180deg, #f4fff8 0%, #eaf8f1 100%);
    border-color: #cce7da;
}

.pf-quizgen-pool-workflow-step.is-step-2 .pf-quizgen-pool-workflow-step-badge {
    color: #1f7d5a;
    background: #daf3e7;
    border-color: #b8dfcc;
}

.pf-quizgen-pool-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-quizgen-pool-form-label,
.pf-quizgen-pool-form-heading {
    font-size: 13px;
    font-weight: 700;
    color: #2d4a62;
}

.pf-quizgen-pool-form-input,
.pf-quizgen-pool-form-textarea,
.pf-quizgen-pool-editor-search {
    width: 100%;
    border: 1px solid #cfdde7;
    border-radius: 10px;
    background: #fff;
    color: #243f55;
    font-size: 14px;
    padding: 10px 12px;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.pf-quizgen-pool-form-textarea {
    min-height: 90px;
    resize: vertical;
    line-height: 1.4;
}

.pf-quizgen-pool-form-input:focus,
.pf-quizgen-pool-form-textarea:focus,
.pf-quizgen-pool-editor-search:focus {
    outline: none;
    border-color: #3c9dd9;
    box-shadow: 0 0 0 3px rgba(60, 157, 217, 0.18);
}

.pf-quizgen-pool-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pf-quizgen-pool-form-input-icon {
    max-width: 80px;
    text-align: center;
    font-weight: 700;
}

.pf-quizgen-pool-form-select-icon {
    max-width: 100%;
    text-align: left;
    font-weight: 600;
}

.pf-quizgen-pool-icon-picker {
    position: relative;
}

.pf-quizgen-pool-icon-picker-trigger {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #cfdde7;
    border-radius: 10px;
    background: #fff;
    color: #243f55;
    padding: 9px 10px;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.pf-quizgen-pool-icon-picker-trigger:focus-visible,
.pf-quizgen-pool-icon-picker.is-open .pf-quizgen-pool-icon-picker-trigger {
    outline: none;
    border-color: #3c9dd9;
    box-shadow: 0 0 0 3px rgba(60, 157, 217, 0.18);
}

.pf-quizgen-pool-icon-picker-current-icon {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid #d6e4ee;
    background: #f3f9fe;
    color: #2f78a8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pf-quizgen-pool-icon-picker-current-icon svg {
    width: 16px;
    height: 16px;
}

.pf-quizgen-pool-icon-picker-current-label {
    flex: 1 1 auto;
    text-align: left;
    font-size: 13px;
    font-weight: 700;
    color: #2b4f6a;
}

.pf-quizgen-pool-icon-picker-chevron {
    color: #55758f;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pf-quizgen-pool-icon-picker.is-open .pf-quizgen-pool-icon-picker-chevron {
    transform: rotate(180deg);
}

.pf-quizgen-pool-icon-picker-panel {
    position: absolute;
    z-index: 12;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    border: 1px solid #d1dfe9;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 24px rgba(28, 57, 78, 0.16);
    padding: 10px;
}

.pf-quizgen-pool-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    max-height: 220px;
    overflow: auto;
    padding-right: 2px;
}

.pf-quizgen-pool-icon-option {
    width: 100%;
    border: 1px solid #d5e2eb;
    border-radius: 9px;
    background: #f8fbfe;
    color: #2f4f67;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.14s ease;
}

.pf-quizgen-pool-icon-option:hover {
    border-color: #8fbddb;
    background: #eef7fd;
}

.pf-quizgen-pool-icon-option:focus-visible {
    outline: none;
    border-color: #3c9dd9;
    box-shadow: 0 0 0 3px rgba(60, 157, 217, 0.16);
}

.pf-quizgen-pool-icon-option.is-active {
    border-color: #4b9ed0;
    background: #e8f3fb;
    color: #1f5f89;
}

.pf-quizgen-pool-icon-option-icon {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #cddfeb;
    color: #3079a9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.pf-quizgen-pool-icon-option-icon svg {
    width: 14px;
    height: 14px;
}

.pf-quizgen-pool-icon-option-label {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-quizgen-pool-form-input-color {
    min-height: 44px;
    padding: 4px;
    cursor: pointer;
}

.pf-quizgen-pool-visibility-list {
    display: none;
}

.pf-quizgen-pool-form-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 36px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355758f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

.pf-quizgen-pool-form-select:focus {
    outline: none;
}

.pf-quizgen-pool-visibility-item {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #d7e4ed;
    border-radius: 10px;
    background: #f8fbfe;
    padding: 8px 10px;
    color: #36566d;
    font-size: 13px;
    line-height: 1.35;
}

.pf-quizgen-pool-visibility-item span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pf-quizgen-pool-visibility-radio {
    accent-color: #2f95d2;
}

@media (max-width: 760px) {
    .pf-quizgen-pool-form-grid {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-pool-icon-picker-grid {
        grid-template-columns: 1fr;
    }
}

.pf-quizgen-pool-editor {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: 72vh;
    overflow: auto;
    padding-right: 2px;
}

.pf-quizgen-pool-editor-group {
    margin-top: 4px;
}

.pf-quizgen-pool-editor-count {
    opacity: 0.75;
}

.pf-quizgen-pool-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.pf-quizgen-pool-editor-column-title {
    font-size: 12px;
    font-weight: 700;
    color: #4b6479;
    opacity: 0.9;
}

.pf-quizgen-pool-editor-column-help {
    font-size: 11px;
    color: #6f8497;
    margin: 6px 0 8px;
}

.pf-quizgen-pool-editor-search-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pf-quizgen-pool-editor-search {
    max-width: 200px;
    padding: 7px 10px;
    border: 1px solid rgba(120, 120, 120, 0.28);
    font-size: 12px;
    background: #fff;
}

.pf-quizgen-pool-editor-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 300px;
    overflow: auto;
    padding-right: 2px;
}

.pf-quizgen-pool-editor-empty {
    padding: 12px;
    text-align: left;
}

.pf-quizgen-pool-editor-card {
    padding: 10px 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid #d8e6ef;
    background: #fff;
    border-radius: 12px;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.pf-quizgen-pool-editor-card.is-assigned {
    cursor: default;
}

.pf-quizgen-pool-editor-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(28, 67, 99, 0.12);
    border-color: #c4d9e8;
}

.pf-quizgen-pool-editor-card-main {
    min-width: 0;
    display: flex;
    gap: 8px;
    align-items: flex-start;
    flex: 1;
}

.pf-quizgen-pool-editor-order {
    min-width: 20px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    color: #6f8396;
    padding-top: 3px;
}

.pf-quizgen-pool-editor-drag {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 1px solid #d9e5ee;
    background: linear-gradient(180deg, #fbfdff 0%, #eff5fa 100%);
    color: #628096;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    margin-top: -1px;
}

.pf-quizgen-pool-editor-drag:hover {
    border-color: #9ec0d8;
    background: linear-gradient(180deg, #f4fbff 0%, #e8f3fb 100%);
}

.pf-quizgen-pool-editor-drag:active {
    cursor: grabbing;
}

.pf-quizgen-pool-editor-card-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pf-quizgen-pool-editor-question {
    font-size: 13px;
    line-height: 1.35;
    color: #284258;
}

.pf-quizgen-pool-editor-meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pf-quizgen-pool-editor-meta-chip {
    font-size: 11px;
    color: #5e778c;
    border: 1px solid #dce9f2;
    background: #f7fbff;
    border-radius: 999px;
    padding: 2px 8px;
}

.pf-quizgen-pool-editor-card-actions {
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.pf-quizgen-pool-editor-move-buttons {
    display: inline-flex;
    gap: 4px;
}

.pf-quizgen-pool-editor-mini-btn {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    border: 1px solid #d8e4ed;
    background: #fff;
    color: #4e6f87;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.pf-quizgen-pool-editor-action {
    padding: 6px 10px;
    font-size: 12px;
}

.pf-quizgen-pool-drop-zone {
    border: 1px dashed transparent;
    border-radius: 10px;
    min-height: 10px;
    padding: 2px 8px;
    font-size: 10px;
    color: transparent;
    text-align: center;
    background: transparent;
    transition: all 0.14s ease;
}

.pf-quizgen-pool-editor.is-dragging .pf-quizgen-pool-drop-zone {
    border-color: #d2e2ee;
    color: #90a5b8;
    background: #f8fbfe;
}

.pf-quizgen-pool-drop-zone.is-active {
    border-color: #2f91d0;
    color: #2d6f9d;
    background: #eaf5fd;
    min-height: 24px;
    padding: 5px 8px;
}

.pf-quizgen-pool-drop-zone span {
    pointer-events: none;
}

@media (max-width: 900px) {
    .pf-quizgen-pool-editor-layout {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-pool-editor-search {
        max-width: 100%;
        width: 100%;
    }

    .pf-quizgen-pool-editor-search-row {
        flex-direction: column;
        align-items: stretch;
    }
}

.pf-quizgen-kategorie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}

.pf-quizgen-kategorie-card {
    border-radius: 14px;
    border: 1px solid #d7e6f0;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 7px 18px rgba(18, 48, 76, 0.08);
    padding: 16px;
    display: grid;
    gap: 7px;
    justify-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pf-quizgen-kategorie-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 11px 26px rgba(18, 48, 76, 0.14);
    border-color: rgba(52, 152, 219, 0.45);
}

.pf-quizgen-kategorie-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #3d9fdd 0%, #2f7fbe 100%);
}

.pf-quizgen-kategorie-name {
    font-size: 15px;
    font-weight: 800;
    color: #21394f;
}

.pf-quizgen-kategorie-count {
    font-size: 12px;
    font-weight: 700;
    color: #60788d;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid #dbe8f1;
    background: #f5fbff;
}

.pf-quizgen-kategorie-card.pf-quizgen-kategorie-add {
    border-style: dashed;
    border-width: 2px;
    border-color: rgba(52, 152, 219, 0.5);
    background: linear-gradient(180deg, rgba(235, 246, 253, 0.95) 0%, rgba(248, 252, 255, 0.95) 100%);
}

.pf-quizgen-kategorie-card.pf-quizgen-kategorie-add .pf-quizgen-kategorie-icon {
    background: linear-gradient(135deg, #3d9fdd 0%, #2f7fbe 100%);
}

/* Tree: Group header row – spans full grid width */
.pf-quizgen-kategorie-group-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 6px;
    border-bottom: 1px solid rgba(52, 152, 219, 0.18);
    margin-bottom: 4px;
}

/* Tree: Child card – slightly smaller than top-level, border-left accent already set inline */
.pf-quizgen-kategorie-card--child {
    border-left-width: 3px;
    border-left-style: solid;
    box-shadow: 0 3px 10px rgba(18, 48, 76, 0.06);
}

.pf-quizgen-kategorie-card--child .pf-quizgen-kategorie-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
}

.pf-quizgen-kategorie-card--child .pf-quizgen-kategorie-name {
    font-weight: 700;
}

/* ─── New category tree sections ──────────────────────────── */

#pf-quizgen-kategorie-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Flat grid for top-level leaf categories (no children) */
.pf-quizgen-cat-flat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}

/* "Neue Kategorie" button wrapper */
.pf-quizgen-cat-add {
    display: flex;
}
.pf-quizgen-cat-add .pf-quizgen-kategorie-add {
    min-width: 180px;
    max-width: 220px;
}

/* ── Group section for a top-level parent category ── */
.pf-quizgen-cat-group {
    border: 1px solid rgba(0,0,0,.08);
    border-left: 4px solid var(--gc, #5c6bc0);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(18, 48, 76, 0.06);
}

.pf-quizgen-cat-group__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--gc, #5c6bc0) 12%, #fff), #fff);
    border-bottom: 1px solid rgba(0,0,0,.06);
    font-size: 15px;
    font-weight: 700;
    color: #1a2b3c;
}

.pf-quizgen-cat-group__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--gc, #5c6bc0) 18%, #fff);
    color: var(--gc, #5c6bc0);
    flex-shrink: 0;
}

.pf-quizgen-cat-group__name {
    font-size: 15px;
    font-weight: 800;
    color: var(--gc, #1a2b3c);
}

.pf-quizgen-cat-group__cnt {
    font-size: 12px;
    font-weight: 600;
    opacity: .6;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,.06);
}

.pf-quizgen-cat-group__body {
    padding: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
    align-items: start;
    background: rgba(250, 252, 255, 0.6);
}

/* ── Sub-group within a group (level-1 child that has children) ── */
.pf-quizgen-cat-subgroup {
    grid-column: span 2;
    border: 1px solid rgba(0,0,0,.07);
    border-top: 3px solid var(--sc, #4caf50);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.pf-quizgen-cat-subgroup__title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--sc, #4caf50) 10%, #fff), #fff);
    border-bottom: 1px solid rgba(0,0,0,.06);
}

.pf-quizgen-cat-subgroup__title button {
    background: none;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-size: 13px;
    color: var(--sc, #1a2b3c);
    padding: 0;
}

.pf-quizgen-cat-subgroup__title button:hover {
    text-decoration: underline;
}

.pf-quizgen-cat-subgroup__cnt {
    font-size: 11px;
    opacity: .55;
    padding: 1px 6px;
    background: rgba(0,0,0,.06);
    border-radius: 999px;
}

.pf-quizgen-cat-subgroup__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 12px;
    background: rgba(250,252,255,.7);
}

/* Small card variant for children/grandchildren */
.pf-quizgen-cat-card--sm {
    padding: 12px 10px;
}
.pf-quizgen-cat-card--sm .pf-quizgen-kategorie-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
}
.pf-quizgen-cat-card--sm .pf-quizgen-kategorie-name {
    font-size: 13px;
    font-weight: 700;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .pf-quizgen-cat-group__header {
        background: #f4f8ff;
    }
    .pf-quizgen-cat-group__icon {
        background: #e8f0fe;
    }
    .pf-quizgen-cat-subgroup__title {
        background: #f4fbf6;
    }
}

/* Staggered reveal in active tabs for a smoother browsing flow */
.pf-quizgen-tab-content.active .pf-quizgen-pool-card,
.pf-quizgen-tab-content.active .pf-quizgen-kategorie-card,
.pf-quizgen-tab-content.active .pf-quizgen-public-question-card {
    animation: pf-quizgen-cardReveal 0.34s ease both;
}

.pf-quizgen-tab-content.active .pf-quizgen-pool-card:nth-child(2),
.pf-quizgen-tab-content.active .pf-quizgen-kategorie-card:nth-child(2),
.pf-quizgen-tab-content.active .pf-quizgen-public-question-card:nth-child(2) { animation-delay: 0.04s; }
.pf-quizgen-tab-content.active .pf-quizgen-pool-card:nth-child(3),
.pf-quizgen-tab-content.active .pf-quizgen-kategorie-card:nth-child(3),
.pf-quizgen-tab-content.active .pf-quizgen-public-question-card:nth-child(3) { animation-delay: 0.08s; }
.pf-quizgen-tab-content.active .pf-quizgen-pool-card:nth-child(4),
.pf-quizgen-tab-content.active .pf-quizgen-kategorie-card:nth-child(4),
.pf-quizgen-tab-content.active .pf-quizgen-public-question-card:nth-child(4) { animation-delay: 0.12s; }
.pf-quizgen-tab-content.active .pf-quizgen-pool-card:nth-child(5),
.pf-quizgen-tab-content.active .pf-quizgen-kategorie-card:nth-child(5),
.pf-quizgen-tab-content.active .pf-quizgen-public-question-card:nth-child(5) { animation-delay: 0.16s; }

.pf-quizgen-module-assignments {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pf-quizgen-assignment-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    background: #fff;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    padding: 12px 14px;
}

.pf-quizgen-assignment-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(52, 152, 219, 0.12);
    color: #1d5f8d;
}

.pf-quizgen-assignment-info h4 {
    margin: 0 0 2px;
}

.pf-quizgen-assignment-info p {
    margin: 0;
    color: #6b7785;
    font-size: 13px;
}

.pf-quizgen-public-pool-hero {
    background: radial-gradient(circle at 12% 10%, rgba(86, 159, 228, 0.28) 0%, rgba(86, 159, 228, 0.12) 24%, rgba(255, 255, 255, 0.98) 72%),
                linear-gradient(135deg, rgba(52, 152, 219, 0.12) 0%, rgba(46, 204, 113, 0.12) 100%);
    border: 1px solid rgba(52, 152, 219, 0.22);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 10px 26px rgba(23, 61, 97, 0.1);
}

.pf-quizgen-public-pool-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #23608f;
    border: 1px solid rgba(52, 152, 219, 0.28);
    background: rgba(255, 255, 255, 0.82);
}

.pf-quizgen-public-pool-hero h2 {
    margin: 10px 0 6px;
    font-size: 26px;
    color: #1f3f59;
}

.pf-quizgen-public-pool-hero p {
    margin: 0;
    color: #5f6d7b;
    max-width: 72ch;
}

.pf-quizgen-public-pool-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 18px;
    padding: 14px;
    border: 1px solid #dce8f2;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(247, 251, 254, 0.96) 100%);
}

.pf-quizgen-public-pool-grid,
.pf-quizgen-leaderboard-container,
.pf-quizgen-export-grid,
.pf-quizgen-import-grid {
    background: #fff;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    padding: 14px;
}

.pf-quizgen-leaderboard-shell {
    display: grid;
    gap: 12px;
}

.pf-quizgen-leaderboard-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border: 1px solid #cfdfee;
    border-radius: 16px;
    background:
        radial-gradient(circle at 10% -30%, rgba(67, 150, 209, 0.2) 0%, rgba(67, 150, 209, 0) 58%),
        linear-gradient(140deg, rgba(246, 252, 255, 0.98) 0%, rgba(233, 245, 255, 0.92) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(26, 72, 107, 0.1);
}

.pf-quizgen-leaderboard-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pf-quizgen-lb-scope-btn {
    border: 1px solid #aecbe3;
    background: linear-gradient(180deg, #ffffff 0%, #f2f9ff 100%);
    color: #294b66;
    font-weight: 700;
    font-size: 13px;
    border-radius: 999px;
    padding: 9px 14px;
    cursor: pointer;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(24, 70, 103, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pf-quizgen-lb-scope-btn:hover {
    transform: translateY(-1px);
    border-color: #80b4d8;
    color: #1f3f59;
    box-shadow: 0 7px 16px rgba(26, 74, 108, 0.2);
}

.pf-quizgen-lb-scope-btn:focus-visible {
    outline: 2px solid rgba(42, 132, 191, 0.45);
    outline-offset: 2px;
}

.pf-quizgen-lb-scope-btn.active {
    border-color: #2a84bd;
    background: linear-gradient(130deg, #3da1dd 0%, #1d6d9f 100%);
    color: #fff;
    box-shadow: 0 10px 20px rgba(30, 106, 154, 0.34);
}

.pf-quizgen-leaderboard-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(190px, 1fr));
    gap: 12px;
    min-width: min(100%, 560px);
}

.pf-quizgen-lb-filter-group {
    display: grid;
    gap: 6px;
}

.pf-quizgen-lb-filter-group label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #48647a;
}

.pf-quizgen-lb-filter-group.is-disabled {
    opacity: 0.6;
}

.pf-quizgen-leaderboard-filters .pf-quizgen-pool-form-select {
    min-height: 42px;
    width: 100%;
    border: 1px solid #b8d0e2;
    border-radius: 10px;
    padding: 10px 38px 10px 12px;
    color: #22415a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    background-color: #ffffff;
    background-image:
        linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(245, 251, 255, 1) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232f6e97' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0 0, right 12px center;
    background-size: auto, 14px;
    box-shadow: 0 2px 8px rgba(30, 83, 120, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.pf-quizgen-leaderboard-filters .pf-quizgen-pool-form-select:hover {
    border-color: #8eb9d6;
    box-shadow: 0 4px 11px rgba(30, 83, 120, 0.12);
}

.pf-quizgen-leaderboard-filters .pf-quizgen-pool-form-select:focus {
    outline: none;
    border-color: #3e97ca;
    box-shadow: 0 0 0 3px rgba(62, 151, 202, 0.18), 0 4px 12px rgba(30, 83, 120, 0.14);
}

.pf-quizgen-leaderboard-filters .pf-quizgen-pool-form-select:disabled {
    border-color: #c9d8e5;
    color: #6f8598;
    background-image:
        linear-gradient(180deg, rgba(246, 249, 252, 1) 0%, rgba(239, 245, 250, 1) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23859caf' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    cursor: not-allowed;
    box-shadow: none;
}

.pf-quizgen-leaderboard-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
    gap: 10px;
}

.pf-quizgen-lb-kpi-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #d9e8f3;
    border-radius: 12px;
    background: linear-gradient(160deg, #ffffff 0%, #f4faff 100%);
    padding: 10px 12px;
    display: grid;
    gap: 4px;
    animation: pfQuizgenLeaderboardCardIn 420ms ease both;
}

.pf-quizgen-lb-kpi-card::after {
    content: '';
    position: absolute;
    inset: auto -35% -35% auto;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: radial-gradient(circle at center, rgba(85, 175, 231, 0.32) 0%, rgba(85, 175, 231, 0) 72%);
    pointer-events: none;
}

.pf-quizgen-lb-kpi-label {
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 700;
    color: #537189;
}

.pf-quizgen-lb-kpi-value {
    font-size: 22px;
    color: #1f4664;
    line-height: 1;
}

.pf-quizgen-leaderboard-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.pf-quizgen-leaderboard-hero-card {
    border: 1px solid #dbe7f1;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbfe 100%);
    padding: 10px 12px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    box-shadow: 0 6px 14px rgba(24, 62, 92, 0.08);
    opacity: 0;
    transform: translateY(10px);
    animation: pfQuizgenLeaderboardCardIn 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
    animation-delay: var(--lb-delay, 0ms);
}

.pf-quizgen-leaderboard-hero-card.is-gold {
    border-color: #f0d78a;
    background: linear-gradient(160deg, #fff8dd 0%, #ffffff 65%);
}

.pf-quizgen-leaderboard-hero-card.is-silver {
    border-color: #d8dde5;
    background: linear-gradient(160deg, #f4f7fb 0%, #ffffff 65%);
}

.pf-quizgen-leaderboard-hero-card.is-bronze {
    border-color: #e4c6ad;
    background: linear-gradient(160deg, #fdf1e8 0%, #ffffff 65%);
}

.pf-quizgen-leaderboard-hero-rank {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #20425c;
    background: #eef5fb;
}

.pf-quizgen-leaderboard-hero-card.is-gold .pf-quizgen-leaderboard-hero-rank {
    background: #ffe7a3;
}

.pf-quizgen-leaderboard-hero-card.is-silver .pf-quizgen-leaderboard-hero-rank {
    background: #e6ebf2;
}

.pf-quizgen-leaderboard-hero-card.is-bronze .pf-quizgen-leaderboard-hero-rank {
    background: #f2d8c6;
}

.pf-quizgen-leaderboard-hero-meta {
    min-width: 0;
}

.pf-quizgen-leaderboard-hero-name {
    font-weight: 700;
    color: #24435c;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-quizgen-leaderboard-hero-score {
    margin-top: 2px;
    font-size: 12px;
    color: #48667f;
}

.pf-quizgen-leaderboard-hero-context {
    margin-top: 4px;
    font-size: 11px;
    color: #5a7388;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-quizgen-public-question-card {
    background: #ffffff;
    border: 1px solid #dce8f2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(20, 52, 81, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pf-quizgen-public-question-card:hover {
    transform: translateY(-2px);
    border-color: rgba(52, 152, 219, 0.42);
    box-shadow: 0 12px 24px rgba(20, 52, 81, 0.14);
}

.pf-quizgen-public-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    background: #f7fbfe;
    border-bottom: 1px solid #e3edf4;
}

.pf-quizgen-public-question-type,
.pf-quizgen-public-question-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: #44627a;
}

.pf-quizgen-public-question-content {
    padding: 12px 12px 8px;
}

.pf-quizgen-public-question-title {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #243d52;
}

.pf-quizgen-public-question-category {
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(52, 152, 219, 0.12);
    color: #2d648e;
    border: 1px solid rgba(52, 152, 219, 0.24);
    font-size: 12px;
    font-weight: 700;
}

.pf-quizgen-public-question-meta {
    padding: 0 12px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #5c7387;
    font-size: 12px;
}

.pf-quizgen-public-question-creator,
.pf-quizgen-public-question-stats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pf-quizgen-public-question-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 12px 12px;
    border-top: 1px solid #e8eff5;
    background: rgba(248, 252, 255, 0.9);
}

.pf-quizgen-public-pool-grid,
.pf-quizgen-export-grid,
.pf-quizgen-import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.pf-quizgen-leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid #d8e4ee;
    border-radius: 10px;
    overflow: hidden;
}

.pf-quizgen-leaderboard-table th,
.pf-quizgen-leaderboard-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #e5edf5;
    text-align: left;
    font-size: 13px;
    color: #24394d;
    vertical-align: middle;
}

.pf-quizgen-leaderboard-table th {
    background: linear-gradient(180deg, #f4f9fd 0%, #edf5fb 100%);
    color: #2b4257;
    font-weight: 700;
    letter-spacing: 0.01em;
    border-bottom: 1px solid #d5e2ee;
}

#tab-leaderboard .pf-quizgen-leaderboard-container {
    box-shadow: 0 10px 22px rgba(25, 63, 94, 0.08);
}

#tab-leaderboard .pf-quizgen-leaderboard-table tbody tr {
    background: #ffffff;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#tab-leaderboard .pf-quizgen-leaderboard-table tbody tr:nth-child(even) {
    background: #f8fbfe;
}

#tab-leaderboard .pf-quizgen-leaderboard-table tbody tr:hover {
    background: #eef6fd;
}

#tab-leaderboard .pf-quizgen-leaderboard-table tbody tr.rank-1 {
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.16) 0%, rgba(255, 255, 255, 1) 24%);
}

#tab-leaderboard .pf-quizgen-leaderboard-table tbody tr.rank-2 {
    background: linear-gradient(90deg, rgba(192, 192, 192, 0.16) 0%, rgba(255, 255, 255, 1) 24%);
}

#tab-leaderboard .pf-quizgen-leaderboard-table tbody tr.rank-3 {
    background: linear-gradient(90deg, rgba(205, 127, 50, 0.16) 0%, rgba(255, 255, 255, 1) 24%);
}

.pf-quizgen-lb-rank-cell {
    font-weight: 800;
    text-align: center;
    color: #1f3f59;
}

.pf-quizgen-lb-rank-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pf-quizgen-lb-player {
    font-weight: 700;
    color: #2a4660;
}

.pf-quizgen-lb-quiz {
    color: #36536d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pf-quizgen-lb-score,
.pf-quizgen-lb-correct,
.pf-quizgen-lb-time,
.pf-quizgen-lb-date {
    white-space: nowrap;
}

.pf-quizgen-lb-percent {
    white-space: normal;
}

.pf-quizgen-lb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    border: 1px solid transparent;
}

.pf-quizgen-lb-weighted {
    display: block;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #5f7283;
}

.pf-quizgen-lb-badge.good {
    background: #e9f9f0;
    color: #1f8f4f;
    border-color: #bae7cc;
}

.pf-quizgen-lb-badge.mid {
    background: #fff6e8;
    color: #b76c10;
    border-color: #f1d3a5;
}

.pf-quizgen-lb-badge.low {
    background: #ffecee;
    color: #b3404d;
    border-color: #f2bec5;
}

.pf-quizgen-lb-action {
    text-align: right;
}

.pf-quizgen-leaderboard-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid #b9d9ef;
    background: #f4fbff;
    color: #1f6e98;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.18s ease;
}

.pf-quizgen-leaderboard-action:hover {
    background: #e7f5ff;
    border-color: #8ec7e8;
    color: #14567b;
    transform: translateY(-1px);
}

.pf-quizgen-leaderboard-action.is-disabled {
    background: #f4f6f8;
    border-color: #dbe3ea;
    color: #8a97a3;
}

.pf-quizgen-leaderboard-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 12px;
}

@keyframes pfQuizgenLeaderboardCardIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pf-quizgen-export-card,
.pf-quizgen-import-card {
    background: #fff;
    border: 1px solid #e6edf2;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pf-quizgen-export-icon,
.pf-quizgen-import-icon,
.pf-quizgen-guest-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(46, 204, 113, 0.14);
    color: #1f6c48;
}

.pf-quizgen-export-options,
.pf-quizgen-import-options,
.pf-quizgen-guest-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pf-quizgen-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #4f5e6d;
}

.pf-quizgen-form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.pf-quizgen-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-quizgen-form-group label {
    font-size: 13px;
    font-weight: 700;
    color: #405365;
}

.pf-quizgen-form-group input,
.pf-quizgen-form-group select,
.pf-quizgen-form-group textarea {
    border: 1px solid #dce6ee;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    background: #fff;
}

/* ============================================================================
   TEAM QWS (Team Quiz Workspace) CONTENT STYLES
   ============================================================================ */

.pf-quizgen-premium-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}

.pf-quizgen-premium-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    transition: var(--quizgen-transition);
    border: 3px solid transparent;
    overflow: hidden;
}

.pf-quizgen-premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    transition: var(--quizgen-transition);
}

.pf-quizgen-premium-company::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.pf-quizgen-premium-company:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.pf-quizgen-premium-sharing::before {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.pf-quizgen-premium-sharing:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(245, 87, 108, 0.3);
    border-color: #f5576c;
}

.pf-quizgen-premium-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.pf-quizgen-premium-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
}

.pf-quizgen-premium-card h3 {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    color: var(--quizgen-dark);
}

.pf-quizgen-premium-subtitle {
    font-size: 1rem;
    color: var(--quizgen-gray);
    font-weight: 600;
    margin-bottom: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-quizgen-premium-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--quizgen-gray-dark);
    margin-bottom: 1.75rem;
}

.pf-quizgen-premium-features-list {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.pf-quizgen-premium-feature {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--quizgen-dark);
    transition: var(--quizgen-transition-fast);
    border-left: 4px solid transparent;
}

.pf-quizgen-premium-company .pf-quizgen-premium-feature {
    border-left-color: #667eea;
}

.pf-quizgen-premium-sharing .pf-quizgen-premium-feature {
    border-left-color: #f5576c;
}

.pf-quizgen-premium-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: var(--quizgen-transition);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.pf-quizgen-premium-company .pf-quizgen-premium-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

.pf-quizgen-premium-sharing .pf-quizgen-premium-btn {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: #fff;
}

.pf-quizgen-teams-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pf-quizgen-teams-stats-grid .pf-quizgen-stat-card {
    background: #fff;
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--quizgen-shadow-md);
    display: flex;
    align-items: center;
    gap: 1.25rem;
    transition: var(--quizgen-transition);
    border: 2px solid transparent;
}

.pf-quizgen-teams-stats-grid .pf-quizgen-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--quizgen-shadow-lg);
    border-color: var(--quizgen-primary-blue);
}

.pf-quizgen-teams-stats-grid .pf-quizgen-stat-icon {
    font-size: 3rem;
    line-height: 1;
}

.pf-quizgen-teams-stats-grid .pf-quizgen-stat-content {
    flex: 1;
}

.pf-quizgen-teams-stats-grid .pf-quizgen-stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--quizgen-dark);
    line-height: 1;
    margin-bottom: 0.25rem;
    background: var(--quizgen-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pf-quizgen-teams-stats-grid .pf-quizgen-stat-label {
    font-size: 0.9rem;
    color: var(--quizgen-gray);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-quizgen-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.pf-quizgen-team-card {
    background: #fff;
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--quizgen-shadow-md);
    transition: var(--quizgen-transition);
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.pf-quizgen-team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: var(--quizgen-gradient);
}

.pf-quizgen-team-card::after {
    content: '';
    position: absolute;
    inset: auto -25% -60% -25%;
    height: 140px;
    background: radial-gradient(circle, rgba(61, 159, 221, 0.22) 0%, rgba(61, 159, 221, 0) 68%);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    z-index: -1;
}

.pf-quizgen-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(21, 58, 88, 0.18);
    border-color: rgba(61, 159, 221, 0.38);
}

.pf-quizgen-team-card:hover::before {
    height: 9px;
}

.pf-quizgen-team-card:hover::after {
    opacity: 1;
}

.pf-quizgen-team-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.pf-quizgen-team-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--quizgen-light);
    box-shadow: inset 0 0 0 1px rgba(61, 159, 221, 0.14);
}

.pf-quizgen-team-info h4 {
    margin: 0 0 0.25rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--quizgen-dark);
}

.pf-quizgen-team-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-quizgen-team-role-badge.owner { background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%); color: #fff; }
.pf-quizgen-team-role-badge.admin { background: linear-gradient(135deg, #3498db 0%, #2980b9 100%); color: #fff; }
.pf-quizgen-team-role-badge.editor { background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%); color: #fff; }
.pf-quizgen-team-role-badge.viewer { background: var(--quizgen-gray-light); color: var(--quizgen-dark); }

.pf-quizgen-team-description {
    color: var(--quizgen-gray);
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.pf-quizgen-team-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.25rem;
    padding: 1rem;
    background: var(--quizgen-bg);
    border-radius: 8px;
    border: 1px solid rgba(61, 159, 221, 0.12);
}

.pf-quizgen-team-stat-item {
    text-align: center;
    flex: 1;
}

.pf-quizgen-team-stat-value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--quizgen-primary-blue);
    line-height: 1;
}

.pf-quizgen-team-stat-label {
    font-size: 0.75rem;
    color: var(--quizgen-gray);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-quizgen-team-actions {
    display: flex;
    gap: 0.75rem;
}

.pf-quizgen-team-action-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    cursor: pointer;
    transition: var(--quizgen-transition-fast);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.pf-quizgen-team-action-btn.primary {
    background: var(--quizgen-gradient);
    color: #fff;
}

.pf-quizgen-team-action-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 18px rgba(39, 126, 178, 0.28);
}

.pf-quizgen-team-action-btn.secondary {
    background: #fff;
    color: var(--quizgen-gray);
    border: 2px solid var(--quizgen-gray-light);
}

.pf-quizgen-team-action-btn.secondary:hover {
    border-color: rgba(70, 125, 164, 0.4);
    color: #335774;
    background: #f7fbff;
}

.pf-quizgen-guest-info-card {
    background: #fff;
    border-radius: 16px;
    padding: 3rem;
    box-shadow: var(--quizgen-shadow-lg);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
    border: 2px solid var(--quizgen-light);
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 1) 0%, rgba(246, 252, 255, 1) 100%);
}

/* Team QWS tab refinements */
#tab-teams .pf-quizgen-section-header {
    margin-bottom: 16px;
}

#tab-teams .pf-quizgen-section-subtitle {
    margin-top: 6px;
    color: #536c81;
}

#tab-teams .pf-quizgen-guest-notice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid #d9e6f2;
    background: linear-gradient(180deg, #fafdff 0%, #f3f9fe 100%);
    color: #456277;
}

#tab-teams .pf-quizgen-guest-notice p {
    margin: 0;
    font-weight: 600;
}

#tab-teams .pf-quizgen-guest-info-card {
    position: relative;
    overflow: hidden;
}

#tab-teams .pf-quizgen-guest-info-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, #2ecf8a 0%, #3d9fdd 100%);
}

#tab-teams .pf-quizgen-guest-info-card h3 {
    margin: 10px 0 8px;
    font-size: 34px;
}

#tab-teams .pf-quizgen-guest-info-card > p {
    margin: 0 auto 14px;
    max-width: 58ch;
    color: #4f677b;
    font-size: 22px;
    line-height: 1.5;
}

#tab-teams .pf-quizgen-guest-features {
    list-style: none;
    margin: 14px 0 18px;
    padding: 0;
    gap: 10px;
}

#tab-teams .pf-quizgen-guest-features li {
    position: relative;
    text-align: left;
    padding: 10px 12px 10px 42px;
    border-radius: 10px;
    border: 1px solid #dce9f3;
    background: #f8fcff;
    color: #2d4458;
    font-weight: 600;
    line-height: 1.45;
}

#tab-teams .pf-quizgen-guest-features li::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    width: 20px;
    height: 20px;
    transform: translateY(-50%);
    border-radius: 999px;
    background-color: #22b573;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 13px 13px;
    box-shadow: 0 4px 10px rgba(34, 181, 115, 0.3);
}

#tab-teams .pf-quizgen-team-card-dynamic {
    border-color: rgba(61, 159, 221, 0.22);
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 252, 255, 0.98) 100%);
}

#tab-teams .pf-quizgen-team-card-dynamic::before {
    background: linear-gradient(90deg, var(--pf-quizgen-team-color, #3d9fdd) 0%, #2ecf8a 100%);
}

#tab-teams .pf-quizgen-team-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

#tab-teams .pf-quizgen-team-icon-dynamic {
    color: var(--pf-quizgen-team-color, #3d9fdd);
    background: var(--pf-quizgen-team-color-bg, rgba(61, 159, 221, 0.14));
    border: 1px solid rgba(61, 159, 221, 0.24);
}

#tab-teams .pf-quizgen-team-name {
    margin: 0;
    font-size: 20px;
    line-height: 1.2;
    color: #253e54;
}

#tab-teams .pf-quizgen-team-role {
    margin: 6px 0 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #eef6fc;
    color: #3f5f78;
    font-size: 12px;
    font-weight: 700;
}

#tab-teams .pf-quizgen-team-stats-mini {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

#tab-teams .pf-quizgen-stat-mini {
    display: grid;
    justify-items: center;
    gap: 3px;
    padding: 10px 8px;
    border-radius: 10px;
    border: 1px solid #dce9f3;
    background: #f8fcff;
}

#tab-teams .pf-quizgen-stat-mini-icon {
    color: #3f77a1;
}

#tab-teams .pf-quizgen-stat-mini-value {
    font-size: 20px;
    font-weight: 800;
    color: #2e516e;
}

#tab-teams .pf-quizgen-stat-mini-label {
    font-size: 11px;
    font-weight: 700;
    color: #6a8194;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#tab-teams .pf-quizgen-team-actions .pf-quizgen-btn {
    min-height: 36px;
}

/* Import/Export UI refresh */

/* ═══════════════════════════════════════════════════════════════════════════════
   TEAM QWS VARIANT 2 - BOLD BRANDING WITH ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 20px;
    animation: fadeIn 0.45s ease-out;
}

.pf-quizgen-team-card {
    animation: teamCardRevealStagger 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

.pf-quizgen-team-card:nth-child(1) { animation-delay: 0.08s; }
.pf-quizgen-team-card:nth-child(2) { animation-delay: 0.16s; }
.pf-quizgen-team-card:nth-child(3) { animation-delay: 0.24s; }
.pf-quizgen-team-card:nth-child(n+4) { animation-delay: 0.3s; }

.pf-quizgen-team-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
}

.pf-quizgen-team-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(61, 159, 221, 0.25);
}

.pf-quizgen-team-card:hover .pf-quizgen-team-card-header {
    background: rgba(61, 159, 221, 0.06);
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SETTINGS TAB - PREMIUM EXPERIENCE
   ═══════════════════════════════════════════════════════════════════════════════ */

#tab-einstellungen {
    padding-bottom: 24px;
}

#tab-einstellungen .pf-quizgen-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 16px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(61, 159, 221, 0.08) 0%, rgba(46, 204, 113, 0.06) 100%);
    border: 1px solid rgba(61, 159, 221, 0.15);
}

#tab-einstellungen .pf-quizgen-section-title h2 {
    margin: 0;
    color: #2c3e50;
}

#tab-einstellungen .pf-quizgen-settings-group {
    background: #fff;
    border-radius: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    border: 1px solid #e6edf2;
    box-shadow: 0 4px 12px rgba(21, 58, 88, 0.06);
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

#tab-einstellungen .pf-quizgen-settings-group:hover {
    box-shadow: 0 8px 20px rgba(21, 58, 88, 0.12);
    border-color: rgba(61, 159, 221, 0.22);
}

#tab-einstellungen .pf-quizgen-settings-group-title {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f3f7;
    display: flex;
    align-items: center;
    gap: 8px;
}

#tab-einstellungen .pf-quizgen-settings-group-title::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: linear-gradient(180deg, #3d9fdd 0%, #2ecf8a 100%);
}

#tab-einstellungen .pf-quizgen-setting-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f0f3f7;
    transition: background 0.2s ease;
}

#tab-einstellungen .pf-quizgen-setting-item:last-child {
    border-bottom: none;
}

#tab-einstellungen .pf-quizgen-setting-item:hover {
    background: rgba(61, 159, 221, 0.04);
    padding-left: 8px;
    padding-right: 8px;
    border-radius: 8px;
}

#tab-einstellungen .pf-quizgen-setting-label {
    font-size: 15px;
    font-weight: 600;
    color: #2c3e50;
}

#tab-einstellungen .pf-quizgen-setting-desc {
    font-size: 12px;
    color: #7f8c8d;
    margin-top: 4px;
    line-height: 1.4;
}

#tab-einstellungen .pf-quizgen-toggle {
    position: relative;
    display: inline-flex;
    width: 50px;
    height: 26px;
}

#tab-einstellungen .pf-quizgen-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

#tab-einstellungen .pf-quizgen-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #dce6ee 0%, #ecf0f1 100%);
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
    border: 2px solid transparent;
}

#tab-einstellungen .pf-quizgen-toggle-slider::before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

#tab-einstellungen .pf-quizgen-toggle input:checked + .pf-quizgen-toggle-slider {
    background: linear-gradient(90deg, #2ecf8a 0%, #27ae60 100%);
    border-color: rgba(46, 204, 113, 0.3);
}

#tab-einstellungen .pf-quizgen-toggle input:checked + .pf-quizgen-toggle-slider::before {
    transform: translateX(24px) translateY(-50%);
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.4);
}

#tab-einstellungen .pf-quizgen-settings-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #f0f3f7;
}

#tab-einstellungen .pf-quizgen-btn-reset,
#tab-einstellungen .pf-quizgen-btn-save {
    flex: 1;
    max-width: 200px;
    padding: 12px 18px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

#tab-einstellungen .pf-quizgen-btn-reset {
    border: 1.5px solid #d9e6f2;
    background: #fff;
    color: #536c81;
}

#tab-einstellungen .pf-quizgen-btn-reset:hover {
    background: #f3f7fb;
    border-color: #3d9fdd;
    color: #3d9fdd;
}

#tab-einstellungen .pf-quizgen-btn-save {
    background: linear-gradient(135deg, #2ecf8a 0%, #27ae60 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.3);
}

#tab-einstellungen .pf-quizgen-btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(46, 204, 113, 0.4);
}

@media (max-width: 768px) {
    #tab-einstellungen .pf-quizgen-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    #tab-einstellungen .pf-quizgen-settings-actions {
        flex-direction: column;
    }
    
    #tab-einstellungen .pf-quizgen-btn-reset,
    #tab-einstellungen .pf-quizgen-btn-save {
        max-width: 100%;
    }
}
.pf-quizgen-export-filter {
    margin: 14px 0 18px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #d9e6f2;
    background: linear-gradient(180deg, rgba(251, 254, 255, 0.98) 0%, rgba(243, 250, 255, 0.96) 100%);
    box-shadow: 0 8px 20px rgba(21, 58, 88, 0.08);
}

.pf-quizgen-export-count {
    margin: 10px 2px 0;
    font-weight: 700;
    color: #335774;
}

#export-selected-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: 2px 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3d9fdd 0%, #2f7fbe 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(47, 127, 190, 0.3);
}

.pf-quizgen-export-card,
.pf-quizgen-import-card {
    position: relative;
    border: 1px solid #d7e6f2;
    border-radius: 16px;
    padding: 16px;
    background: linear-gradient(170deg, rgba(255, 255, 255, 0.98) 0%, rgba(247, 252, 255, 0.96) 100%);
    box-shadow: 0 10px 22px rgba(21, 58, 88, 0.1);
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.pf-quizgen-export-card::before,
.pf-quizgen-import-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, rgba(61, 159, 221, 1) 0%, rgba(46, 204, 113, 1) 100%);
    opacity: 0.92;
}

.pf-quizgen-export-card:hover,
.pf-quizgen-import-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 30px rgba(21, 58, 88, 0.16);
    border-color: rgba(61, 159, 221, 0.42);
}

.pf-quizgen-import-card-premium {
    border-color: rgba(170, 109, 255, 0.38);
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 243, 255, 0.96) 100%);
}

.pf-quizgen-export-card h3,
.pf-quizgen-import-card h3 {
    margin: 2px 0 0;
    font-size: 18px;
    color: #24435c;
}

.pf-quizgen-export-card p,
.pf-quizgen-import-card p {
    margin: 0;
    color: #5f7488;
    line-height: 1.55;
}

.pf-quizgen-export-icon,
.pf-quizgen-import-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2) 0%, rgba(52, 152, 219, 0.22) 100%);
    color: #205f88;
    box-shadow: inset 0 0 0 1px rgba(52, 152, 219, 0.18);
}

.pf-quizgen-import-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #4e667a;
}

.pf-quizgen-import-info small {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pf-quizgen-checkbox-label {
    padding: 7px 9px;
    border-radius: 9px;
    border: 1px solid #e3edf5;
    background: #f9fcff;
}

.pf-quizgen-checkbox-label input[type="checkbox"] {
    accent-color: #2f8ecf;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HILFE-TAB STYLING - COMPREHENSIVE HELP EXPERIENCE
   ═══════════════════════════════════════════════════════════════════════════════ */

#tab-hilfe {
    padding-bottom: 32px;
}

/* Help Hero Section */
.pf-quizgen-help-hero {
    text-align: center;
    padding: 3rem 2rem;
    background: linear-gradient(135deg, #3d9fdd 0%, #2ecf8a 100%);
    border-radius: 18px;
    color: white;
    margin-bottom: 3rem;
    box-shadow: 0 12px 32px rgba(61, 159, 221, 0.25);
    position: relative;
    overflow: hidden;
}

.pf-quizgen-help-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.pf-quizgen-help-hero-icon {
    font-size: 72px;
    margin-bottom: 1rem;
    animation: float 3s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
}

.pf-quizgen-help-hero h1 {
    font-size: 2.8rem;
    margin: 0 0 0.5rem 0;
    font-weight: 800;
    position: relative;
    z-index: 1;
    line-height: 1.2;
}

.pf-quizgen-help-hero p {
    font-size: 1.1rem;
    margin: 0;
    opacity: 0.95;
    position: relative;
    z-index: 1;
}

/* Help Sections */
.pf-quizgen-help-section {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    border: 1px solid #e6edf2;
    box-shadow: 0 6px 16px rgba(21, 58, 88, 0.06);
    transition: all 0.3s ease;
}

.pf-quizgen-help-section:hover {
    box-shadow: 0 12px 28px rgba(21, 58, 88, 0.12);
    transform: translateY(-2px);
}

.pf-quizgen-help-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #253e54;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 3px solid #2ecf8a;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Quick Start Steps */
.pf-quizgen-help-steps {
    display: grid;
    gap: 1.5rem;
}

.pf-quizgen-help-step {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.pf-quizgen-help-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2ecf8a 0%, #27ae60 100%);
    color: white;
    font-size: 1.5rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 6px 16px rgba(46, 204, 113, 0.3);
}

.pf-quizgen-help-step-content h3 {
    margin: 0 0 0.5rem 0;
    color: #253e54;
    font-size: 1.3rem;
    font-weight: 700;
}

.pf-quizgen-help-step-content p {
    margin: 0;
    color: #6a8194;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* FAQ Section */
.pf-quizgen-faq {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pf-quizgen-faq-item {
    background: #f8fcff;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid #d9e6f2;
    transition: all 0.3s ease;
}

.pf-quizgen-faq-item:hover {
    border-color: #3d9fdd;
    box-shadow: 0 4px 12px rgba(61, 159, 221, 0.15);
}

.pf-quizgen-faq-question {
    padding: 1.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: #253e54;
    transition: all 0.2s ease;
    user-select: none;
}

.pf-quizgen-faq-question:hover {
    background: #eef6fc;
}

.pf-quizgen-faq-toggle {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3d9fdd;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pf-quizgen-faq-item.active .pf-quizgen-faq-toggle {
    transform: rotate(45deg);
}

.pf-quizgen-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    padding: 0 1.2rem;
}

.pf-quizgen-faq-item.active .pf-quizgen-faq-answer {
    max-height: 3000px;
    padding: 0 1.2rem 1.2rem 1.2rem;
}

.pf-quizgen-faq-answer p {
    margin: 0;
    color: #6a8194;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* Support Grid */
.pf-quizgen-support-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.pf-quizgen-support-card {
    background: #fff;
    border-radius: 14px;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(21, 58, 88, 0.08);
    border: 1px solid #e6edf2;
    transition: all 0.3s ease;
}

.pf-quizgen-support-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(21, 58, 88, 0.15);
    border-color: #3d9fdd;
}

.pf-quizgen-support-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: inline-block;
}

.pf-quizgen-support-card h3,
.pf-quizgen-support-card h4 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #253e54;
    margin-bottom: 0.8rem;
}

.pf-quizgen-support-card p {
    color: #6a8194;
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   WORKFLOW & ZUSAMMENSPIEL SECTION
   ═══════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-workflow-section {
    background: #fff;
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2.5rem;
    border: 1px solid #e6edf2;
    box-shadow: 0 6px 16px rgba(21, 58, 88, 0.06);
}

.pf-quizgen-workflow-section h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #253e54;
    margin: 0 0 2rem 0;
    padding-bottom: 1.2rem;
    border-bottom: 3px solid #2ecf8a;
}

/* Workflow Diagram */
.pf-quizgen-workflow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 2rem 0;
    flex-wrap: wrap;
}

.pf-quizgen-workflow-box {
    flex: 1;
    min-width: 250px;
    padding: 1.8rem;
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.pf-quizgen-workflow-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.15;
    pointer-events: none;
}

.pf-quizgen-workflow-visitor {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
}

.pf-quizgen-workflow-visitor::before {
    background: #2ecf8a;
}

.pf-quizgen-workflow-user {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
}

.pf-quizgen-workflow-user::before {
    background: #3d9fdd;
}

.pf-quizgen-workflow-moderator {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
}

.pf-quizgen-workflow-moderator::before {
    background: #f39c12;
}

.pf-quizgen-workflow-modules {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
}

.pf-quizgen-workflow-modules::before {
    background: #9c27b0;
}

.pf-quizgen-workflow-icon {
    font-size: 48px;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.pf-quizgen-workflow-box h4 {
    font-size: 1.4rem;
    margin: 0 0 1rem 0;
    color: #253e54;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.pf-quizgen-workflow-box p {
    margin: 0 0 1rem 0;
    color: #6a8194;
    line-height: 1.5;
    position: relative;
    z-index: 1;
    font-size: 0.95rem;
}

.pf-quizgen-workflow-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    position: relative;
    z-index: 1;
}

.pf-quizgen-workflow-box li {
    padding: 0.4rem 0 0.4rem 1.5rem;
    color: #253e54;
    font-size: 0.9rem;
    position: relative;
}

.pf-quizgen-workflow-box li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #2ecf8a;
    font-weight: 700;
}

.pf-quizgen-workflow-arrow {
    font-size: 2rem;
    color: #3d9fdd;
    font-weight: 700;
    animation: pulse-arrow 2s ease-in-out infinite;
}

@keyframes pulse-arrow {
    0%, 100% { transform: translateX(0); opacity: 1; }
    50% { transform: translateX(6px); opacity: 0.7; }
}

/* Workflow Explanation Cards */
.pf-quizgen-workflow-explanation {
    margin-top: 2.5rem;
}

.pf-quizgen-workflow-explanation h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    color: #253e54;
    font-weight: 700;
}

.pf-quizgen-workflow-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}

.pf-quizgen-workflow-card {
    padding: 1.8rem;
    background: #f8fcff;
    border-radius: 12px;
    border: 2px solid #d9e6f2;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.pf-quizgen-workflow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(61, 159, 221, 0.2);
    border-color: #3d9fdd;
}

.pf-quizgen-workflow-card-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.pf-quizgen-workflow-card h4 {
    font-size: 1.1rem;
    margin: 0 0 0.8rem 0;
    color: #253e54;
    font-weight: 700;
}

.pf-quizgen-workflow-card p {
    margin: 0;
    color: #6a8194;
    line-height: 1.6;
    font-size: 0.9rem;
}

.pf-quizgen-workflow-card ul {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0 0;
}

.pf-quizgen-workflow-card ul li {
    padding: 0.3rem 0 0.3rem 1.2rem;
    font-size: 0.9rem;
    color: #6a8194;
    position: relative;
}

.pf-quizgen-workflow-card ul li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: #2ecf8a;
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LICENSE VISUAL - CIRCULAR MODULE DIAGRAM
   ═══════════════════════════════════════════════════════════════════════════════ */

.pf-quizgen-license-visual {
    position: relative;
    padding: 120px 20px;
    margin: 2.5rem 0;
    min-height: 850px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: 16px;
}

.pf-quizgen-license-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 15px 50px rgba(102, 126, 234, 0.6);
    z-index: 10;
    border: 6px solid white;
    animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 15px 50px rgba(102, 126, 234, 0.6); }
    50% { box-shadow: 0 20px 60px rgba(102, 126, 234, 0.8); }
}

.pf-quizgen-license-center-icon {
    font-size: 70px;
    margin-bottom: 12px;
}

.pf-quizgen-license-center h3 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
}

.pf-quizgen-license-center p {
    margin: 8px 0 0 0;
    font-size: 14px;
    opacity: 0.95;
    font-weight: 500;
}

.pf-quizgen-license-connections {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.pf-quizgen-license-line {
    position: absolute;
    width: 4px;
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.7) 0%, rgba(102, 126, 234, 0.3) 50%, transparent 100%);
    top: 50%;
    left: 50%;
    transform-origin: center center;
    filter: drop-shadow(0 0 6px rgba(102, 126, 234, 0.4));
}

/* 8 modules in a circle */
.pf-quizgen-license-line-1 { height: 300px; transform: translate(-50%, -50%) rotate(0deg); }
.pf-quizgen-license-line-2 { height: 300px; transform: translate(-50%, -50%) rotate(45deg); }
.pf-quizgen-license-line-3 { height: 300px; transform: translate(-50%, -50%) rotate(90deg); }
.pf-quizgen-license-line-4 { height: 300px; transform: translate(-50%, -50%) rotate(135deg); }
.pf-quizgen-license-line-5 { height: 300px; transform: translate(-50%, -50%) rotate(180deg); }
.pf-quizgen-license-line-6 { height: 300px; transform: translate(-50%, -50%) rotate(225deg); }
.pf-quizgen-license-line-7 { height: 300px; transform: translate(-50%, -50%) rotate(270deg); }
.pf-quizgen-license-line-8 { height: 300px; transform: translate(-50%, -50%) rotate(315deg); }

.pf-quizgen-license-module {
    position: absolute;
    width: 190px;
    padding: 1rem 1rem 1.2rem;
    background: white;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: center;
    border: 3px solid #e9ecef;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.pf-quizgen-license-module:hover {
    width: 220px;
    padding: 1.2rem;
    border-color: #3d9fdd;
    box-shadow: 0 20px 50px rgba(102, 126, 234, 0.35);
    z-index: 20;
}

.pf-quizgen-license-module-hover-info {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: all 0.3s ease;
    font-size: 12px;
    color: #6a8194;
    line-height: 1.5;
}

.pf-quizgen-license-module:hover .pf-quizgen-license-module-hover-info {
    max-height: 100px;
    opacity: 1;
    margin-top: 0.8rem;
}

/* Module positioning in circle */
.pf-quizgen-license-module-1 { top: 5%; left: 50%; transform: translateX(-50%); }
.pf-quizgen-license-module-2 { top: 10%; right: 8%; }
.pf-quizgen-license-module-3 { top: 50%; right: 2%; transform: translateY(-50%); }
.pf-quizgen-license-module-4 { bottom: 10%; right: 8%; }
.pf-quizgen-license-module-5 { bottom: 5%; left: 50%; transform: translateX(-50%); }
.pf-quizgen-license-module-6 { bottom: 10%; left: 8%; }
.pf-quizgen-license-module-7 { top: 50%; left: 2%; transform: translateY(-50%); }
.pf-quizgen-license-module-8 { top: 10%; left: 8%; }

.pf-quizgen-license-module-icon {
    font-size: 48px;
    margin-bottom: 0.8rem;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.pf-quizgen-license-module h4 {
    margin: 0 0 0.8rem 0;
    font-size: 17px;
    font-weight: 700;
    color: #253e54;
}

.pf-quizgen-license-status {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.8rem;
    flex-wrap: wrap;
}

.pf-quizgen-license-badge {
    display: inline-block;
    padding: 5px 9px;
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(46, 204, 113, 0.3);
}

.pf-quizgen-license-badge-plus {
    color: #3d9fdd;
    font-weight: 700;
    font-size: 13px;
    padding: 0 3px;
}

.pf-quizgen-license-module small {
    color: #666;
    font-size: 11px;
    line-height: 1.3;
    display: block;
}

/* License Explanation */
.pf-quizgen-license-explanation {
    margin-top: 120px;
}

.pf-quizgen-license-explanation h3 {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color: #253e54;
    font-weight: 700;
}

.pf-quizgen-license-rules {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pf-quizgen-license-rule {
    display: flex;
    gap: 1.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 14px;
    border-left: 5px solid #2ecf8a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pf-quizgen-license-rule-icon {
    flex-shrink: 0;
    font-size: 2.5rem;
}

.pf-quizgen-license-rule-content h4 {
    margin: 0 0 1rem 0;
    color: #253e54;
    font-size: 1.2rem;
    font-weight: 700;
}

.pf-quizgen-license-rule-content p {
    margin: 0 0 1rem 0;
    color: #6a8194;
    line-height: 1.6;
    font-size: 0.95rem;
}

.pf-quizgen-license-rule-content ul {
    margin: 1rem 0 0 20px;
    color: #6a8194;
    line-height: 1.6;
}

.pf-quizgen-license-rule-content ul li {
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Features Grid */
.pf-quizgen-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.pf-quizgen-feature-card {
    padding: 1.5rem;
    background: white;
    border-radius: 12px;
    text-align: center;
    border: 2px solid #e6edf2;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(21, 58, 88, 0.06);
}

.pf-quizgen-feature-card:hover {
    border-color: #3d9fdd;
    box-shadow: 0 8px 24px rgba(21, 58, 88, 0.12);
    transform: translateY(-3px);
}

.pf-quizgen-feature-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.pf-quizgen-feature-card h4 {
    margin: 0 0 0.8rem 0;
    font-size: 1rem;
    color: #253e54;
    font-weight: 700;
}

.pf-quizgen-feature-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #6a8194;
    line-height: 1.5;
}

/* Workflow Card Themes (Indigo, Pink, Sun) */
.pf-quizgen-workflow-card-theme-indigo::before {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.pf-quizgen-workflow-card-theme-indigo:hover {
    border-color: #667eea;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.3);
}

.pf-quizgen-workflow-card-theme-pink::before {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.pf-quizgen-workflow-card-theme-pink:hover {
    border-color: #f5576c;
    box-shadow: 0 12px 32px rgba(245, 87, 108, 0.3);
}

.pf-quizgen-workflow-card-theme-sun::before {
    background: linear-gradient(135deg, #f39c12 0%, #e74c3c 100%);
}

.pf-quizgen-workflow-card-theme-sun:hover {
    border-color: #f39c12;
    box-shadow: 0 12px 32px rgba(243, 156, 18, 0.3);
}

/* Light Text Variants for Dark Themed Cards */
.pf-quizgen-workflow-card-title-light {
    color: white;
    font-size: 1.3rem;
}

.pf-quizgen-workflow-card-text-light {
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.95rem;
}

.pf-quizgen-workflow-card-list-light {
    list-style: none;
    padding: 0;
    margin: 0.8rem 0 0 0;
}

.pf-quizgen-workflow-card-list-light li {
    padding: 0.4rem 0 0.4rem 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    position: relative;
}

.pf-quizgen-workflow-card-list-light li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #ffd700;
    font-weight: 700;
}

/* Extra Large Icon in Cards */
.pf-quizgen-workflow-card-icon-xl {
    font-size: 4rem !important;
}

/* Spaced Workflow Explanation */
.pf-quizgen-workflow-explanation-spaced {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 2px solid #e6edf2;
}

/* Help Feature Highlight Section */
.pf-quizgen-help-feature-highlight {
    background: linear-gradient(135deg, #fff5f5 0%, #f5f0ff 100%);
    border-radius: 20px;
    padding: 3rem;
    margin-top: 3rem;
    border: 3px solid transparent;
    background-clip: padding-box;
    position: relative;
}

.pf-quizgen-help-feature-highlight::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    padding: 3px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.pf-quizgen-help-feature-highlight .pf-quizgen-help-title {
    text-align: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border-bottom: none;
    justify-content: center;
    margin-bottom: 2rem;
}

/* Feature Hero */
.pf-quizgen-feature-hero {
    text-align: center;
    margin-bottom: 3rem;
}

.pf-quizgen-feature-hero-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: bounce-gentle 2s ease-in-out infinite;
}

@keyframes bounce-gentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

.pf-quizgen-feature-hero h3 {
    font-size: 2rem;
    color: #253e54;
    margin-bottom: 0.5rem;
}

.pf-quizgen-feature-hero p {
    font-size: 1.2rem;
    color: #6a8194;
}

/* Feature Grid */
.pf-quizgen-feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.pf-quizgen-feature-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.pf-quizgen-feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #f093fb 0%, #f5576c 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.pf-quizgen-feature-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(240, 147, 251, 0.2);
}

.pf-quizgen-feature-card:hover::before {
    transform: scaleX(1);
}

.pf-quizgen-feature-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.pf-quizgen-feature-card-icon {
    font-size: 2.5rem;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.pf-quizgen-feature-card-header h4 {
    font-size: 1.5rem;
    color: #253e54;
    margin: 0;
}

.pf-quizgen-feature-card-content p {
    color: #6a8194;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.pf-quizgen-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pf-quizgen-feature-list li {
    padding: 0.75rem 0;
    color: #6a8194;
    font-size: 0.95rem;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

.pf-quizgen-feature-list li:last-child {
    border-bottom: none;
}

.pf-quizgen-feature-list li:hover {
    padding-left: 0.5rem;
    color: #f5576c;
}

.pf-quizgen-feature-card-footer {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #f0f0f0;
}

.pf-quizgen-feature-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.pf-quizgen-feature-badge-premium {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #8b6914;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
}

.pf-quizgen-feature-badge-new {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(240, 147, 251, 0.3);
}

/* Feature CTA */
.pf-quizgen-feature-cta {
    text-align: center;
    background: white;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 8px 24px rgba(240, 147, 251, 0.15);
}

.pf-quizgen-feature-cta h3 {
    font-size: 2rem;
    color: #253e54;
    margin-bottom: 1rem;
}

.pf-quizgen-feature-cta p {
    font-size: 1.1rem;
    color: #6a8194;
    margin-bottom: 2rem;
}

.pf-quizgen-feature-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pf-quizgen-btn-gradient-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(240, 147, 251, 0.3);
}

.pf-quizgen-btn-gradient-pink:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(240, 147, 251, 0.4);
}

.pf-quizgen-btn-outline {
    background: transparent;
    color: #f5576c;
    border: 2px solid #f5576c;
    padding: 1rem 2.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pf-quizgen-btn-outline:hover {
    background: #f5576c;
    color: white;
    transform: translateY(-2px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    #tab-hilfe {
        padding-bottom: 1.5rem;
    }

    .pf-quizgen-help-hero {
        padding: 2rem 1.5rem;
    }

    .pf-quizgen-help-hero h1 {
        font-size: 1.8rem;
    }

    .pf-quizgen-help-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .pf-quizgen-help-step {
        grid-template-columns: 50px 1fr;
        gap: 1rem;
    }

    .pf-quizgen-help-step-number {
        width: 50px;
        height: 50px;
        font-size: 1.2rem;
    }

    .pf-quizgen-workflow-diagram {
        flex-direction: column;
    }

    .pf-quizgen-workflow-arrow {
        transform: rotate(90deg);
        margin: 0.5rem 0;
    }

    .pf-quizgen-license-visual {
        min-height: 600px;
        padding: 60px 10px;
    }

    .pf-quizgen-license-module {
        width: 160px;
        padding: 0.8rem 0.8rem 1rem;
        font-size: 0.9rem;
    }

    .pf-quizgen-workflow-cards,
    .pf-quizgen-support-grid,
    .pf-quizgen-features-grid {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-help-feature-highlight {
        padding: 2rem;
    }

    .pf-quizgen-help-feature-highlight .pf-quizgen-help-title {
        font-size: 2rem;
    }

    .pf-quizgen-feature-hero-icon {
        font-size: 4rem;
    }

    .pf-quizgen-feature-hero h3 {
        font-size: 1.5rem;
    }

    .pf-quizgen-feature-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pf-quizgen-feature-card {
        padding: 1.5rem;
    }

    .pf-quizgen-feature-cta {
        padding: 2rem;
    }

    .pf-quizgen-feature-cta h3 {
        font-size: 1.5rem;
    }

    .pf-quizgen-feature-cta-buttons {
        flex-direction: column;
    }

    .pf-quizgen-btn-gradient-pink,
    .pf-quizgen-btn-outline {
        width: 100%;
    }
}

.pf-quizgen-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.pf-quizgen-faq-item.active .pf-quizgen-faq-answer {
    max-height: 2000px;
}

.pf-quizgen-faq-answer p,
.pf-quizgen-faq-answer ul {
    padding: 0 1.2rem 0.8rem 1.2rem;
    color: #536c81;
    line-height: 1.7;
    font-size: 0.95rem;
}

.pf-quizgen-faq-answer ul {
    margin-left: 20px;
    padding-left: 0;
}

.pf-quizgen-faq-answer li {
    margin: 6px 0;
    list-style: disc inside;
}

/* Shortcuts Grid */
.pf-quizgen-shortcuts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--quizgen-space-md);
    margin-top: 1rem;
}

.pf-quizgen-shortcut {
    display: flex;
    align-items: center;
    gap: var(--quizgen-space-sm);
    padding: var(--quizgen-space-md);
    background: var(--quizgen-bg);
    border-radius: var(--quizgen-radius-md);
    border: 2px solid #d9e6f2;
    transition: all 0.2s ease;
}

.pf-quizgen-shortcut:hover {
    border-color: #3d9fdd;
    box-shadow: 0 4px 12px rgba(61, 159, 221, 0.12);
}

.pf-quizgen-shortcut kbd {
    padding: 5px 10px;
    background: white;
    border: 2px solid #c4d8e7;
    border-radius: 6px;
    font-family: monospace;
    font-size: 13px;
    font-weight: 700;
    color: #253e54;
    box-shadow: 0 2px 0 #c4d8e7;
    white-space: nowrap;
}

.pf-quizgen-shortcut span {
    color: #6a8194;
    font-size: 14px;
    flex: 1;
}

/* AI Models Table (in FAQ) */
.pf-quizgen-ai-models-table {
    overflow-x: auto;
    margin: var(--quizgen-space-md) 0;
}

.pf-quizgen-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: white;
    border-radius: var(--quizgen-radius-md);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.pf-quizgen-table thead {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.pf-quizgen-table th {
    padding: var(--quizgen-space-md);
    text-align: left;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pf-quizgen-table td {
    padding: var(--quizgen-space-md);
    border-bottom: 1px solid var(--quizgen-light);
}

.pf-quizgen-table tbody tr:last-child td {
    border-bottom: none;
}

.pf-quizgen-table tbody tr:hover {
    background: #f8f9fa;
}

.pf-quizgen-model-premium {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.05) 0%, transparent 100%);
}

.pf-quizgen-model-limited {
    background: linear-gradient(90deg, rgba(241, 196, 15, 0.03) 0%, transparent 100%);
}

.pf-quizgen-model-pfai {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.15) 0%, rgba(76, 175, 80, 0.05) 50%, transparent 100%);
    border-left: 4px solid #4caf50;
}

/* Status Badges (AI variants) */
.pf-quizgen-status-premium {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(46, 204, 113, 0.3);
}

.pf-quizgen-status-premium-plus {
    background: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(243, 156, 18, 0.3);
    font-weight: 800;
}

.pf-quizgen-status-secure {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
    box-shadow: 0 3px 10px rgba(76, 175, 80, 0.4);
    font-weight: 800;
    border: 2px solid rgba(255,255,255,0.3);
}

.pf-quizgen-status-partial {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
}

.pf-quizgen-status-unavailable {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
    box-shadow: 0 2px 6px rgba(149, 165, 166, 0.3);
}

/* AI Legend */
.pf-quizgen-ai-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--quizgen-space-md);
    margin-top: var(--quizgen-space-lg);
    padding: var(--quizgen-space-md);
    background: #f8f9fa;
    border-radius: var(--quizgen-radius-md);
}

.pf-quizgen-legend-item {
    display: flex;
    align-items: center;
    gap: var(--quizgen-space-sm);
    font-size: 12px;
    color: var(--quizgen-gray);
}

.pf-quizgen-legend-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* AI Status Box */
.pf-quizgen-ai-status-box {
    margin: var(--quizgen-space-lg) 0;
    background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
    border: 3px solid #9e9e9e;
    border-radius: var(--quizgen-radius-lg);
    overflow: hidden;
}

.pf-quizgen-ai-status-header {
    background: linear-gradient(135deg, #616161 0%, #424242 100%);
    color: white;
    padding: var(--quizgen-space-md) var(--quizgen-space-lg);
    display: flex;
    align-items: center;
    gap: var(--quizgen-space-md);
}

.pf-quizgen-ai-status-icon {
    font-size: 28px;
    display: flex;
    align-items: center;
}

.pf-quizgen-ai-status-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pf-quizgen-ai-status-content {
    padding: var(--quizgen-space-lg);
    max-height: 500px;
    overflow-y: auto;
}

.pf-quizgen-ai-status-content::-webkit-scrollbar { width: 8px; }
.pf-quizgen-ai-status-content::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 4px; }
.pf-quizgen-ai-status-content::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #616161, #424242); border-radius: 4px; }

.pf-quizgen-status-check {
    display: grid;
    gap: var(--quizgen-space-md);
    margin-bottom: var(--quizgen-space-lg);
}

.pf-quizgen-status-item {
    display: flex;
    align-items: center;
    gap: var(--quizgen-space-md);
    padding: var(--quizgen-space-md);
    background: white;
    border-radius: var(--quizgen-radius-md);
    border: 2px solid #e0e0e0;
}

.pf-quizgen-status-item.pf-quizgen-status-inactive {
    border-color: #e0e0e0;
    background: #fafafa;
}

.pf-quizgen-status-item.pf-quizgen-status-active {
    border-color: #4caf50;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
}

.pf-quizgen-status-indicator {
    font-size: 24px;
    flex-shrink: 0;
}

.pf-quizgen-status-inactive .pf-quizgen-status-indicator {
    opacity: 0.3;
}

.pf-quizgen-status-info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pf-quizgen-status-info strong {
    color: var(--quizgen-dark);
    font-size: 14px;
}

.pf-quizgen-status-value {
    color: var(--quizgen-gray);
    font-size: 13px;
    font-weight: 500;
}

.pf-quizgen-status-active .pf-quizgen-status-value {
    color: #2e7d32;
    font-weight: 600;
}

.pf-quizgen-ai-status-result {
    display: flex;
    gap: var(--quizgen-space-md);
    padding: var(--quizgen-space-lg);
    border-radius: var(--quizgen-radius-md);
    border: 2px solid;
}

.pf-quizgen-ai-disabled {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}

.pf-quizgen-ai-enabled {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ff9800;
}

.pf-quizgen-status-result-icon {
    font-size: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.pf-quizgen-status-result-text strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
}

.pf-quizgen-ai-disabled .pf-quizgen-status-result-text strong {
    color: #2e7d32;
}

.pf-quizgen-ai-enabled .pf-quizgen-status-result-text strong {
    color: #e65100;
}

.pf-quizgen-status-result-text p {
    margin: 0 0 4px 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}

.pf-quizgen-status-result-subtitle {
    margin-top: 8px !important;
    font-weight: 600;
    color: #2e7d32;
}

/* AI Sections */
.pf-quizgen-ai-section {
    margin-bottom: var(--quizgen-space-xl);
    padding-bottom: var(--quizgen-space-xl);
    border-bottom: 2px solid #e0e0e0;
}

.pf-quizgen-ai-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.pf-quizgen-ai-section-title {
    margin: 0 0 var(--quizgen-space-md) 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--quizgen-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pf-quizgen-ai-section-desc {
    margin: 0 0 var(--quizgen-space-lg) 0;
    font-size: 13px;
    color: var(--quizgen-gray);
    line-height: 1.6;
}

/* Integration Table */
.pf-quizgen-ai-models-integration {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
    margin-bottom: var(--quizgen-space-md);
    border: 1px solid #d9dee3;
    border-radius: 12px;
    background: #f9fbfd;
}

.pf-quizgen-ai-models-integration::-webkit-scrollbar { width: 8px; height: 8px; }
.pf-quizgen-ai-models-integration::-webkit-scrollbar-track { background: #f1f3f5; border-radius: 4px; }
.pf-quizgen-ai-models-integration::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #616161, #424242); border-radius: 4px; }

.pf-quizgen-integration-table {
    width: 100%;
    min-width: 760px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13px;
    background: #ffffff;
    overflow: hidden;
    table-layout: fixed;
}

.pf-quizgen-integration-table thead {
    background: linear-gradient(135deg, #424242 0%, #212121 100%);
    color: white;
}

.pf-quizgen-integration-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.pf-quizgen-integration-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #e6eaee;
    color: #1f2d3d;
    vertical-align: middle;
}

.pf-quizgen-integration-table th:nth-child(4),
.pf-quizgen-integration-table th:nth-child(5),
.pf-quizgen-integration-table td:nth-child(4),
.pf-quizgen-integration-table td:nth-child(5) {
    text-align: center;
}

.pf-quizgen-integration-table tbody tr:nth-child(odd) { background: #ffffff; }
.pf-quizgen-integration-table tbody tr:nth-child(even) { background: #f6f8fa; }
.pf-quizgen-integration-table tbody tr:last-child td { border-bottom: none; }
.pf-quizgen-model-row:hover { background: #eaf4ff !important; }

.pf-quizgen-integration-full { box-shadow: inset 3px 0 0 #2ecc71; }
.pf-quizgen-integration-partial { box-shadow: inset 3px 0 0 #ff9800; }
.pf-quizgen-integration-none { box-shadow: inset 3px 0 0 #95a5a6; }
.pf-quizgen-integration-secure {
    background: linear-gradient(90deg, rgba(76, 175, 80, 0.14) 0%, rgba(76, 175, 80, 0.03) 60%, transparent 100%) !important;
    box-shadow: inset 4px 0 0 #4caf50;
}

/* Integration Badges */
.pf-quizgen-integration-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pf-quizgen-badge-full {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    color: white;
}

.pf-quizgen-badge-secure {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
    border: 2px solid rgba(255,255,255,0.3);
}

.pf-quizgen-badge-partial {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
}

.pf-quizgen-badge-none {
    background: linear-gradient(135deg, #95a5a6 0%, #7f8c8d 100%);
    color: white;
}

/* Progress Bars */
.pf-quizgen-progress-bar {
    width: 100%;
    height: 28px;
    background: linear-gradient(180deg, #edf1f5 0%, #dfe6ec 100%);
    border-radius: 999px;
    border: 1px solid #d3dbe3;
    overflow: hidden;
    position: relative;
}

.pf-quizgen-progress-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.35s ease;
    min-width: 4px;
}

.pf-quizgen-progress-100 { width: 100%; background: linear-gradient(90deg, #2ecc71 0%, #27ae60 100%); }
.pf-quizgen-progress-secure { width: 100%; background: linear-gradient(90deg, #4caf50 0%, #388e3c 100%); }
.pf-quizgen-progress-56 { width: 56%; background: linear-gradient(90deg, #ff9800 0%, #f57c00 100%); }
.pf-quizgen-progress-21 { width: 21%; background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%); }
.pf-quizgen-progress-17 { width: 17%; background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%); }
.pf-quizgen-progress-10 { width: 10%; background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%); }
.pf-quizgen-progress-5  { width: 5%;  background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%); }
.pf-quizgen-progress-4  { width: 4%;  background: linear-gradient(90deg, #ffa726 0%, #fb8c00 100%); }
.pf-quizgen-progress-0  { width: 0%;  background: #bdbdbd; min-width: 0; }

/* DSGVO Badges in table */
.pf-quizgen-dsgvo-badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pf-quizgen-dsgvo-safe {
    background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
    color: white;
}

.pf-quizgen-dsgvo-external {
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: white;
}

/* DSGVO Summary */
.pf-quizgen-dsgvo-summary {
    display: grid;
    gap: var(--quizgen-space-md);
}

.pf-quizgen-dsgvo-summary-item {
    display: flex;
    align-items: center;
    gap: var(--quizgen-space-md);
    padding: var(--quizgen-space-lg);
    border-radius: var(--quizgen-radius-md);
    border: 2px solid;
}

.pf-quizgen-dsgvo-summary-safe {
    background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
    border-color: #4caf50;
}

.pf-quizgen-dsgvo-summary-external {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-color: #ff9800;
}

.pf-quizgen-summary-icon {
    font-size: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pf-quizgen-summary-content {
    flex: 1;
}

.pf-quizgen-summary-content strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
    color: var(--quizgen-dark);
}

.pf-quizgen-summary-content p {
    margin: 0;
    font-size: 13px;
    color: var(--quizgen-gray);
}

.pf-quizgen-summary-count {
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.pf-quizgen-dsgvo-summary-safe .pf-quizgen-summary-count { color: #2e7d32; }
.pf-quizgen-dsgvo-summary-external .pf-quizgen-summary-count { color: #e65100; }

/* DSGVO Notice Box */
.pf-quizgen-dsgvo-notice {
    margin: var(--quizgen-space-lg) 0;
    background: linear-gradient(135deg, #e8f5e9 0%, #f1f8f4 100%);
    border: 3px solid #4caf50;
    border-radius: var(--quizgen-radius-lg);
    overflow: hidden;
}

.pf-quizgen-dsgvo-header {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    padding: var(--quizgen-space-md) var(--quizgen-space-lg);
    display: flex;
    align-items: center;
    gap: var(--quizgen-space-md);
}

.pf-quizgen-dsgvo-icon {
    font-size: 28px;
    display: flex;
    align-items: center;
}

.pf-quizgen-dsgvo-header h4 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
}

.pf-quizgen-dsgvo-content {
    padding: var(--quizgen-space-lg);
    max-height: 500px;
    overflow-y: auto;
}

.pf-quizgen-dsgvo-content::-webkit-scrollbar { width: 8px; }
.pf-quizgen-dsgvo-content::-webkit-scrollbar-track { background: #e0e0e0; border-radius: 4px; }
.pf-quizgen-dsgvo-content::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #4caf50, #45a049); border-radius: 4px; }

.pf-quizgen-dsgvo-content > p {
    margin: 0 0 var(--quizgen-space-md) 0;
    line-height: 1.6;
}

.pf-quizgen-dsgvo-conditions {
    display: flex;
    flex-direction: column;
    gap: var(--quizgen-space-md);
    margin: var(--quizgen-space-lg) 0;
}

.pf-quizgen-dsgvo-condition {
    display: flex;
    gap: var(--quizgen-space-md);
    align-items: flex-start;
    padding: var(--quizgen-space-md);
    background: white;
    border-radius: var(--quizgen-radius-md);
    border-left: 4px solid #4caf50;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.pf-quizgen-condition-number {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
}

.pf-quizgen-condition-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--quizgen-dark);
    font-size: 14px;
}

.pf-quizgen-condition-text p {
    margin: 0;
    color: var(--quizgen-gray);
    font-size: 13px;
    line-height: 1.5;
}

.pf-quizgen-dsgvo-warning {
    display: flex;
    gap: var(--quizgen-space-md);
    padding: var(--quizgen-space-md) var(--quizgen-space-lg);
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-left: 4px solid #ff9800;
    border-radius: var(--quizgen-radius-md);
    margin: var(--quizgen-space-lg) 0;
}

.pf-quizgen-warning-icon {
    font-size: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.pf-quizgen-warning-text strong {
    display: block;
    margin-bottom: 8px;
    color: #e65100;
    font-size: 14px;
}

.pf-quizgen-warning-text p {
    margin: 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}

.pf-quizgen-dsgvo-recommendation {
    display: flex;
    gap: var(--quizgen-space-md);
    padding: var(--quizgen-space-lg);
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-left: 4px solid #2196f3;
    border-radius: var(--quizgen-radius-md);
    margin: var(--quizgen-space-lg) 0;
}

.pf-quizgen-recommendation-icon {
    font-size: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}

.pf-quizgen-recommendation-text {
    flex: 1;
}

.pf-quizgen-recommendation-text strong {
    display: block;
    margin-bottom: 8px;
    color: #1565c0;
    font-size: 15px;
}

.pf-quizgen-recommendation-text > p {
    margin: 0 0 var(--quizgen-space-md) 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}

.pf-quizgen-recommendation-text ul {
    margin: var(--quizgen-space-md) 0;
    padding-left: 20px;
    list-style: none;
}

.pf-quizgen-recommendation-text li {
    margin: 8px 0;
    color: #555;
    font-size: 13px;
    line-height: 1.6;
}

/* AI Utility Classes */
.pf-quizgen-text-safe-green { color: #2e7d32; font-weight: 600; }
.pf-quizgen-text-safe-green-strong { color: #2e7d32; font-weight: 700; }
.pf-quizgen-text-center { text-align: center; }

.pf-quizgen-ai-models-heading {
    margin: var(--quizgen-space-lg) 0 var(--quizgen-space-sm) 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--quizgen-dark);
}

.pf-quizgen-ai-models-intro {
    margin: 0 0 var(--quizgen-space-md) 0;
    font-size: 13px;
    color: var(--quizgen-gray);
    line-height: 1.6;
}

.pf-quizgen-admin-tip-text {
    margin-top: var(--quizgen-space-md) !important;
    font-size: 12px;
    color: #1565c0;
    opacity: 0.8;
}

.pf-quizgen-file-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pf-quizgen-import-card .pf-quizgen-btn[disabled] {
    opacity: 0.56;
    cursor: not-allowed;
    border-color: #d5e2ec;
    background: #f3f7fb;
    color: #7890a4;
}

.pf-quizgen-history-section {
    margin-top: 20px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid #dce9f3;
    background: linear-gradient(180deg, rgba(251, 254, 255, 0.98) 0%, rgba(245, 250, 255, 0.96) 100%);
}

.pf-quizgen-history-list {
    margin-top: 10px;
    display: grid;
    gap: 10px;
}

.pf-quizgen-history-list .pf-quizgen-info-box {
    border: 1px dashed #c4d8e7;
    border-radius: 10px;
    background: #f9fcff;
    padding: 12px;
    color: #4d667b;
}

@media (max-width: 768px) {
    .pf-quizgen-teams-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pf-quizgen-teams-grid {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-guest-info-card {
        padding: 2rem;
    }

    .pf-quizgen-premium-features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    #tab-teams .pf-quizgen-guest-info-card h3 {
        font-size: 27px;
    }

    #tab-teams .pf-quizgen-guest-info-card > p {
        font-size: 18px;
    }

    #tab-teams .pf-quizgen-team-stats-mini {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-export-filter,
    .pf-quizgen-history-section {
        padding: 10px;
        border-radius: 12px;
    }

    .pf-quizgen-export-card,
    .pf-quizgen-import-card {
        padding: 12px;
        border-radius: 14px;
    }
}

.pf-quizgen-loader,
.pf-quizgen-loading {
    text-align: center;
    padding: 16px;
    color: #6b7785;
}

@media (max-width: 768px) {
    .pf-quizgen-pools-header,
    .pf-quizgen-public-pool-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-quizgen-assignment-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .pf-quizgen-public-pool-grid,
    .pf-quizgen-export-grid,
    .pf-quizgen-import-grid,
    .pf-quizgen-leaderboard-hero,
    .pf-quizgen-leaderboard-kpis,
    .pf-quizgen-form-row {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-leaderboard-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .pf-quizgen-leaderboard-filters {
        grid-template-columns: 1fr;
    }

    .pf-quizgen-leaderboard-container {
        overflow-x: auto;
    }

    .pf-quizgen-leaderboard-table {
        min-width: 760px;
    }

    .pf-quizgen-leaderboard-table th,
    .pf-quizgen-leaderboard-table td {
        padding: 10px 8px;
    }
}