/* /Pages/EditAssessment.razor.rz.scp.css */
/* =============================================================================
   1. THEME VARIABLES & GLOBAL
   ============================================================================= */
:root[b-7wrot8r6x2] {
    --bg-color: #F5F5F7; /* Light gray iOS background */
    --sidebar-bg: #FFFFFF; /* White sidebar */
    --card-bg: #FFFFFF;
    --border-color: #E5E5EA;
    --text-color: #1D1D1F;
    --text-secondary: #86868B;
    --accent-blue: #007AFF;
    --accent-blue-soft: #E5F1FF; /* Very light blue for active states */
    --danger-red: #FF3B30;
    --focus-ring: rgba(0, 122, 255, 0.4);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
}

[data-theme="dark"][b-7wrot8r6x2] {
    --bg-color: #000000;
    --sidebar-bg: #1C1C1E;
    --card-bg: #1C1C1E;
    --border-color: #38383A;
    --text-color: #FFFFFF;
    --text-secondary: #98989D;
    --accent-blue-soft: rgba(0, 122, 255, 0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
}

.ios-editor-layout[b-7wrot8r6x2] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 52px); /* Adjust based on your NavMenu height */
    width: 100%;
    background-color: var(--bg-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* =============================================================================
   2. SIDEBAR (The List)
   ============================================================================= */
.ios-sidebar[b-7wrot8r6x2] {
    width: 340px; /* Slightly wider for better readability */
    border-right: 1px solid var(--border-color);
    background: var(--sidebar-bg);
    display: flex;
    flex-direction: column;
    z-index: 20;
}

/* Meta Group (Title/Author) */
.sidebar-meta-group[b-7wrot8r6x2] {
    padding: 20px 16px 8px 16px;
}

.group-label[b-7wrot8r6x2] {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    padding-left: 4px;
}

/* Input Groups in Sidebar */
.ios-card-group[b-7wrot8r6x2] {
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 16px;
    background: var(--card-bg);
}

.ios-input-flush[b-7wrot8r6x2] {
    width: 100%;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--text-color);
    outline: none;
    transition: background 0.2s;
}

    .ios-input-flush:focus[b-7wrot8r6x2] {
        background: rgba(120,120,128, 0.05);
    }

.ios-divider[b-7wrot8r6x2] {
    height: 1px;
    background: var(--border-color);
    margin-left: 12px;
}

/* Search Bar */
.sidebar-search-container[b-7wrot8r6x2] {
    padding: 8px 16px;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--sidebar-bg); /* Opaque background for sticky effect */
}

.search-input-wrapper[b-7wrot8r6x2] {
    background-color: rgba(118, 118, 128, 0.12);
    border-radius: 10px;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    transition: all 0.2s ease;
}

    .search-input-wrapper:focus-within[b-7wrot8r6x2] {
        background-color: rgba(118, 118, 128, 0.18);
        box-shadow: 0 0 0 2px var(--accent-blue-soft);
    }

.search-input[b-7wrot8r6x2] {
    border: none;
    background: transparent;
    flex: 1;
    font-size: 15px;
    color: var(--text-color);
    outline: none;
    margin-left: 6px;
}

/* Question List */
.ios-list-group[b-7wrot8r6x2] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* FORCE hide horizontal scrollbar */
    padding: 8px 16px 20px 16px;
    width: 100%; /* Ensure it knows its boundary */
    box-sizing: border-box;
}

.ios-list-item[b-7wrot8r6x2] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns items to top for multi-line text */
    gap: 12px; /* Adds consistent space between text and button */
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}

    .ios-list-item:hover[b-7wrot8r6x2] {
        transform: translateY(-1px);
        box-shadow: var(--shadow-sm);
        border-color: #d1d1d6;
    }

    .ios-list-item.selected[b-7wrot8r6x2] {
        background: var(--accent-blue-soft);
        border-color: var(--accent-blue);
        box-shadow: 0 0 0 1px var(--accent-blue); /* Distinct ring */
    }

.item-content[b-7wrot8r6x2] {
    display: flex;
    flex-direction: column;
    flex: 1; /* Takes up all available space */
    min-width: 0; /* CRITICAL: Allows shrinking below content width */
    width: 0; /* EXTRA SAFETY: Forces flex to calculate properly */
    gap: 2px; /* Tiny space between label and question */
}

.item-index[b-7wrot8r6x2] {
    font-size: 10px;
    font-weight: 700;
    color: var(--accent-blue); /* Polished: Highlights the number in blue */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    display: block;
}

.ios-list-item.selected .item-index[b-7wrot8r6x2] {
    color: var(--accent-blue);
    opacity: 1;
}

.ios-list-item.selected .item-preview[b-7wrot8r6x2] {
    font-weight: 600;
    color: var(--accent-blue);
}

.item-preview[b-7wrot8r6x2] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    line-height: 1.4;
    /* Truncation Logic */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Show exactly 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal; /* MUST be 'normal', not 'nowrap' */
    word-break: break-word; /* Prevents long words from breaking layout */
}

.btn-delete[b-7wrot8r6x2] {
    background: rgba(0,0,0,0.03);
    border-radius: 6px;
    border: none;
    color: #999;
    padding: 6px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Prevents button from being squished */
    margin-top: 2px; /* Visual alignment with first line of text */
}

    .btn-delete:hover[b-7wrot8r6x2] {
        background: #ffe5e5;
        color: var(--danger-red);
    }

/* Add Button */
.btn-add-card[b-7wrot8r6x2] {
    background: transparent;
    border: 2px dashed var(--border-color);
    color: var(--accent-blue);
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 8px;
    transition: all 0.2s;
}

    .btn-add-card:hover[b-7wrot8r6x2] {
        border-color: var(--accent-blue);
        background: var(--accent-blue-soft);
    }

.sidebar-footer[b-7wrot8r6x2] {
    padding: 16px;
    border-top: 1px solid var(--border-color);
    background: var(--sidebar-bg);
}

/* =============================================================================
   3. EDITOR STAGE (The Workspace)
   ============================================================================= */
.ios-workspace[b-7wrot8r6x2] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.ios-editor-stage[b-7wrot8r6x2] {
    flex: 1;
    background: var(--bg-color);
    position: relative;
    box-shadow: inset 6px 0 12px -8px rgba(0,0,0,0.05); /* Shadow from sidebar */
}

.stage-scroller[b-7wrot8r6x2] {
    height: 100%;
    overflow-y: auto;
}

.stage-content[b-7wrot8r6x2] {
    max-width: 720px; /* Optimal reading width */
    margin: 0 auto;
    padding: 40px 24px 100px 24px;
}

    /* Cards in Editor */
    .stage-content .ios-card-group[b-7wrot8r6x2] {
        background: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: 14px;
        box-shadow: var(--shadow-sm);
        margin-bottom: 24px;
        transition: box-shadow 0.2s, border-color 0.2s;
    }

        /* Active Card Glow */
        .stage-content .ios-card-group:focus-within[b-7wrot8r6x2] {
            border-color: var(--accent-blue);
            box-shadow: 0 0 0 4px var(--accent-blue-soft);
        }

.ios-textarea[b-7wrot8r6x2] {
    width: 100%;
    border: none;
    padding: 16px;
    font-size: 15px;
    line-height: 1.6;
    background: transparent;
    color: var(--text-color);
    resize: none;
    font-family: inherit;
    outline: none;
    min-height: 100px;
}

.ios-input-line[b-7wrot8r6x2] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 12px 0;
    font-size: 15px;
    color: var(--text-color);
    outline: none;
}

/* Choice Rows */
.choice-row[b-7wrot8r6x2] {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.1s;
}

    .choice-row:last-child[b-7wrot8r6x2] {
        border-bottom: none;
    }

    .choice-row:hover[b-7wrot8r6x2] {
        background: rgba(0,0,0,0.01);
    }

/* Radio Button */
.radio-circle[b-7wrot8r6x2] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #C7C7CC;
    background: transparent;
    margin-right: 12px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

    .radio-circle.checked[b-7wrot8r6x2] {
        border-color: var(--accent-blue);
        background-color: var(--accent-blue);
        box-shadow: inset 0 0 0 3px white;
        transform: scale(1.1);
    }

.choice-letter[b-7wrot8r6x2] {
    font-weight: 700;
    color: var(--text-secondary);
    margin-right: 8px;
    font-size: 13px;
    width: 16px;
}

/* =============================================================================
   4. TAGS (Capsule & Token Style)
   ============================================================================= */
/* Sidebar Tags */
.tag-pill[b-7wrot8r6x2] {
    background: var(--accent-blue);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 4px rgba(0, 122, 255, 0.25);
    transition: transform 0.1s;
}

    .tag-pill:hover[b-7wrot8r6x2] {
        transform: scale(1.05);
    }

.tag-remove[b-7wrot8r6x2] {
    cursor: pointer;
    background: rgba(255,255,255,0.2);
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    line-height: 1;
}

    .tag-remove:hover[b-7wrot8r6x2] {
        background: rgba(255,255,255,0.4);
    }

/* Editor Stage Tags (Token Input) */
.tag-input-container[b-7wrot8r6x2] {
    background: transparent;
    min-height: 44px;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    cursor: text;
}

.tag-chip[b-7wrot8r6x2] {
    display: inline-flex;
    align-items: center;
    background-color: var(--accent-blue-soft);
    color: var(--accent-blue);
    border-radius: 6px;
    padding: 4px 6px 4px 10px;
    font-size: 13px;
    font-weight: 600;
    user-select: none;
    transition: all 0.2s;
}

    .tag-chip:hover[b-7wrot8r6x2] {
        background-color: #d0e4ff;
    }

.tag-text[b-7wrot8r6x2] {
    margin-right: 4px;
    cursor: default;
}

.tag-remove-btn[b-7wrot8r6x2] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--accent-blue);
    opacity: 0.6;
    cursor: pointer;
    padding: 2px;
    border-radius: 4px;
    width: 20px;
    height: 20px;
}

    .tag-remove-btn:hover[b-7wrot8r6x2] {
        background-color: rgba(0, 122, 255, 0.1);
        opacity: 1;
    }

.tag-input-field[b-7wrot8r6x2] {
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    color: var(--text-color);
    flex: 1;
    min-width: 120px;
    padding: 4px 0;
}

    .tag-input-field[b-7wrot8r6x2]::placeholder {
        color: #999;
    }

/* =============================================================================
   5. UTILITIES
   ============================================================================= */
.ios-btn-primary[b-7wrot8r6x2] {
    background: var(--accent-blue);
    color: white;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 10px rgba(0, 122, 255, 0.3);
}

    .ios-btn-primary:hover[b-7wrot8r6x2] {
        transform: translateY(-1px);
        box-shadow: 0 6px 14px rgba(0, 122, 255, 0.4);
    }

    .ios-btn-primary:active[b-7wrot8r6x2] {
        transform: scale(0.98);
    }

.full-width[b-7wrot8r6x2] {
    width: 100%;
}

/* Mobile Only */
.mobile-only[b-7wrot8r6x2] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-only[b-7wrot8r6x2] {
        display: block;
    }

    .ios-sidebar[b-7wrot8r6x2] {
        width: 100%;
        border-right: none;
    }

    .mobile-hidden[b-7wrot8r6x2] {
        display: none !important;
    }
}

/* =============================================================================
   EMPTY STATE (Centering)
   ============================================================================= */

/* 1. The container fills the available stage space and centers children */
.empty-stage-container[b-7wrot8r6x2] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center the content block */
    justify-content: center; /* Vertically center the content block */
    height: 100%; /* Vital: Forces it to fill the parent height */
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
}

/* 2. The inner content wrapper handles text alignment */
.empty-content[b-7wrot8r6x2] {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers the button and icon */
    text-align: center; /* Centers the text */
    max-width: 320px; /* Keeps text from getting too wide */
    color: var(--text-secondary);
}

.empty-icon[b-7wrot8r6x2] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
    /* Optional: add a subtle bounce animation */
    animation: floatIcon-b-7wrot8r6x2 3s ease-in-out infinite;
}

.empty-content h3[b-7wrot8r6x2] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0 0 8px 0;
}

.empty-content p[b-7wrot8r6x2] {
    font-size: 14px;
    margin: 0 0 24px 0;
    line-height: 1.4;
    opacity: 0.8;
}

@keyframes floatIcon-b-7wrot8r6x2 {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

/* =============================================================================
   MOBILE SEGMENT CONTROL & HEADER (iOS Style)
   ============================================================================= */
/* 1. Default State: HIDDEN on Desktop */
.ios-segment-bar[b-7wrot8r6x2] {
    display: none; /* Crucial fix: ensures it never shows on desktop */
}

/* 2. Mobile State: VISIBLE */
@media (max-width: 768px) {
    .ios-segment-bar[b-7wrot8r6x2] {
        padding: 10px 16px;
        background-color: var(--sidebar-bg);
        border-bottom: 1px solid var(--border-color);
        display: flex; /* Only flex on mobile */
        align-items: center;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 100;
        backdrop-filter: saturate(180%) blur(20px);
        background-color: rgba(255, 255, 255, 0.8);
    }

    [data-theme="dark"] .ios-segment-bar[b-7wrot8r6x2] {
        background-color: rgba(28, 28, 30, 0.8);
    }

    /* The Toggle Track */
    .segment-control[b-7wrot8r6x2] {
        background-color: rgba(118, 118, 128, 0.12);
        border-radius: 9px;
        padding: 2px;
        display: flex;
        flex: 1; /* Takes up remaining space */
        height: 32px;
        position: relative;
    }

    /* The Toggle Buttons */
    .segment-btn[b-7wrot8r6x2] {
        flex: 1;
        border: none;
        background: transparent;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-color);
        border-radius: 7px;
        cursor: pointer;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        outline: none;
    }

        .segment-btn.active[b-7wrot8r6x2] {
            background-color: var(--card-bg);
            color: var(--text-color);
            font-weight: 600;
            box-shadow: 0 3px 8px rgba(0,0,0,0.12), 0 3px 1px rgba(0,0,0,0.04);
        }

    /* New "Save Assessment" Button Polish */
    .mobile-save-btn[b-7wrot8r6x2] {
        background: transparent;
        border: none;
        color: var(--accent-blue);
        font-size: 15px;
        font-weight: 600;
        padding: 0 4px;
        cursor: pointer;
        white-space: nowrap; /* Prevents text wrapping */
        flex-shrink: 0; /* Prevents button from being squished */
    }
}
/* /Pages/Experimental.razor.rz.scp.css */
.terminal-page[b-0huty735eh] {
    min-height: calc(100vh - 52px); /* Adjust for MainLayout nav height [cite: 81, 127] */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-color); /* Respect global theme  */
    font-family: "SF Mono", "Cascadia Code", monospace;
    padding: 16px;
}

.terminal-window[b-0huty735eh] {
    width: 100%;
    max-width: 700px;
    height: 520px;
    background: #1c1c1e;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    border: 1px solid var(--border-color); /* Respect global theme  */
    overflow: hidden;
}

/* Header is always dark for terminal aesthetic */
.terminal-header[b-0huty735eh] {
    height: 38px;
    background: #323232;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #111;
}

.window-title[b-0huty735eh] {
    font-size: 11px;
    color: #a5a5a5;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}

.terminal-body[b-0huty735eh] {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    color: #fff;
    overflow-y: auto;
}

.prompt[b-0huty735eh] {
    color: #30d158;
    margin-right: 8px;
    font-weight: bold;
}

.command[b-0huty735eh] {
    color: #5eaeff;
}

.terminal-text[b-0huty735eh] {
    color: #ffd60a;
    margin-bottom: 16px;
    font-size: 14px;
}

.terminal-grid[b-0huty735eh] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
    margin-bottom: 20px;
}

.shell-btn[b-0huty735eh] {
    background: transparent;
    border: 1px solid #444;
    color: #fff;
    padding: 12px 6px;
    cursor: pointer;
    font-size: 11px;
    font-family: inherit;
    transition: 0.2s;
}

    .shell-btn.active[b-0huty735eh] {
        background: #fff;
        color: #000;
        border-color: #fff;
    }

.prompt-box-shell[b-0huty735eh] {
    background: #000;
    padding: 12px;
    border-radius: 6px;
    border: 1px dashed #444;
    overflow: auto;
    max-height: 180px;
}

    .prompt-box-shell pre[b-0huty735eh] {
        font-size: 10px;
        color: #30d158;
        margin: 0;
        white-space: pre-wrap;
    }

.shell-input[b-0huty735eh] {
    flex: 1;
    background: #000;
    border: 1px solid #333;
    color: #30d158;
    padding: 15px;
    font-family: inherit;
    outline: none;
    resize: none;
    font-size: 13px;
}

.terminal-footer[b-0huty735eh] {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 20px;
    background: #1c1c1e;
    border-top: 1px solid #2c2c2e;
}

.shell-nav-btn[b-0huty735eh] {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 8px 16px;
    cursor: pointer;
    font-size: 12px;
}

    .shell-nav-btn.primary[b-0huty735eh] {
        background: #fff;
        color: #000;
        font-weight: 600;
    }

.hint-text[b-0huty735eh] {
    font-size: 10px;
    color: #888;
    margin-top: 6px;
}

.typing-cursor[b-0huty735eh]::after {
    content: "█";
    margin-left: 4px;
    color: #30d158;
    animation: blink-b-0huty735eh 1s steps(2, start) infinite;
}

@keyframes blink-b-0huty735eh {
    to {
        visibility: hidden;
    }
}

/* Mobile Adjustments */
@media (max-width: 500px) {
    .terminal-window[b-0huty735eh] {
        height: 80vh;
    }

    .terminal-text[b-0huty735eh] {
        font-size: 13px;
    }

    .shell-btn[b-0huty735eh] {
        padding: 10px 4px;
        font-size: 10px;
    }
}

.no-scrollbar[b-0huty735eh]::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.terminal-error[b-0huty735eh] {
    color: #ff453a;
    font-size: 12px;
    margin-top: 10px;
    padding: 8px;
    background: rgba(255, 69, 58, 0.1);
    border: 1px solid #ff453a;
    border-radius: 4px;
}
/* /Pages/Home.razor.rz.scp.css */
/* =============================================================================
   1. THEME & BASE VARIABLES
   ============================================================================= */
:root[b-vngkprnsvo] {
    --bg-color: #F5F5F7;
    --card-bg: #FFFFFF;
    --menu-bg: rgba(255, 255, 255, 0.75);
    --text-color: #1D1D1F;
    --text-secondary: #86868B;
    --accent-blue: #007AFF;
    --danger: #FF3B30;
    --border-color: #E5E5EA;
    --hover-bg: rgba(0, 0, 0, 0.05);
    --selected-bg: #CDE6FF;
}

[data-theme="dark"][b-vngkprnsvo] {
    --bg-color: #000000;
    --card-bg: #1C1C1E;
    --menu-bg: rgba(30, 30, 30, 0.75);
    --text-color: #F5F5F7;
    --text-secondary: #98989D;
    --danger: #FF453A;
    --border-color: #38383A;
    --hover-bg: rgba(255, 255, 255, 0.1);
    --selected-bg: #1A3E63;
}

*[b-vngkprnsvo] {
    box-sizing: border-box;
}

/* =============================================================================
   2. COMMAND BAR / RIBBON
   ============================================================================= */
.command-bar[b-vngkprnsvo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 32px;
    gap: 16px;
    height: 64px;
    flex-shrink: 0;
    width: 100%;
    position: relative;
    z-index: 1002;
    background-color: var(--bg-color);
    /* Changed from hidden to visible to prevent clipping fixed flyouts */
    overflow: visible;
}

.command-group[b-vngkprnsvo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

    .command-group.right[b-vngkprnsvo] {
        margin-left: auto;
    }

/* BUTTONS */
.win-btn[b-vngkprnsvo] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    white-space: nowrap;
}

    .win-btn.standard[b-vngkprnsvo] {
        background-color: var(--card-bg);
        color: var(--text-color);
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        border: 1px solid var(--border-color);
    }

        .win-btn.standard:hover[b-vngkprnsvo] {
            background-color: var(--hover-bg);
        }

        .win-btn.standard:active[b-vngkprnsvo] {
            transform: scale(0.98);
        }

        .win-btn.standard.active[b-vngkprnsvo] {
            background-color: #E5E5EA;
            color: #000;
        }

[data-theme="dark"] .win-btn.standard.active[b-vngkprnsvo] {
    background-color: #3A3A3C;
    color: #FFF;
}

.win-btn.accent[b-vngkprnsvo] {
    background-color: var(--accent-blue);
    color: white;
}

    .win-btn.accent:hover[b-vngkprnsvo] {
        filter: brightness(1.08);
    }

.win-btn.danger[b-vngkprnsvo] {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--danger);
    border: 1px solid var(--danger);
}

    .win-btn.danger:hover[b-vngkprnsvo] {
        background-color: var(--danger);
        color: white;
    }

.divider-vertical[b-vngkprnsvo] {
    width: 1px;
    height: 18px;
    background-color: var(--border-color);
    margin: 0 6px;
}

/* =============================================================================
   3. LAYOUT AREAS
   ============================================================================= */
.finder-layout[b-vngkprnsvo], .finder-browser[b-vngkprnsvo] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.file-area[b-vngkprnsvo] {
    flex: 1;
    overflow-y: auto;
    padding: 0 32px 140px 32px;
}

.empty-state[b-vngkprnsvo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60vh;
    color: var(--text-secondary);
    text-align: center;
}

    .empty-state h3[b-vngkprnsvo] {
        font-size: 18px;
        font-weight: 600;
        margin: 0 0 8px 0;
        color: var(--text-color);
    }

/* =============================================================================
   4. GRID VIEW
   ============================================================================= */
.finder-grid[b-vngkprnsvo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 24px;
    align-items: start;
    padding-top: 24px;
}

.file-item[b-vngkprnsvo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 6px;
    border-radius: 12px;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
    transition: background 0.1s;
}

    .file-item:hover[b-vngkprnsvo] {
        background: var(--hover-bg);
    }

    .file-item.selected[b-vngkprnsvo] {
        background: var(--selected-bg);
        border-color: rgba(0, 122, 255, 0.2);
    }

/* ICON */
.file-icon-wrapper[b-vngkprnsvo] {
    width: 64px;
    height: 84px;
    margin-bottom: 10px;
    position: relative;
    transition: transform 0.2s;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.file-item:hover .file-icon-wrapper[b-vngkprnsvo] {
    transform: scale(1.05);
}

.paper-icon[b-vngkprnsvo] {
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

.paper-fold[b-vngkprnsvo] {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 20px 20px 0;
    border-color: transparent #F2F2F2 transparent transparent;
    z-index: 2;
}

    .paper-fold[b-vngkprnsvo]::after {
        content: '';
        position: absolute;
        top: 0;
        right: -20px;
        width: 20px;
        height: 20px;
        background: rgba(0,0,0,0.05);
    }

.paper-content[b-vngkprnsvo] {
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.paper-lines span[b-vngkprnsvo] {
    display: block;
    height: 2px;
    width: 32px;
    background: #F0F0F0;
    margin-bottom: 3px;
    border-radius: 2px;
}

.paper-badge[b-vngkprnsvo] {
    font-size: 14px;
    font-weight: 800;
    color: #333;
    opacity: 0.8;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 4px;
}

.file-name[b-vngkprnsvo] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    width: 100%;
}

.file-date[b-vngkprnsvo] {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* =============================================================================
   5. LIST VIEW
   ============================================================================= */
.finder-list[b-vngkprnsvo] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--text-color);
    margin-top: 10px;
}

.list-header[b-vngkprnsvo] {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    background: var(--bg-color);
    z-index: 10;
}

.list-row[b-vngkprnsvo] {
    border-bottom: 1px solid rgba(0,0,0,0.03);
    cursor: pointer;
}

    .list-row:nth-child(even)[b-vngkprnsvo] {
        background-color: rgba(0,0,0,0.02);
    }

    .list-row:hover[b-vngkprnsvo] {
        background-color: var(--accent-blue) !important;
        color: white !important;
    }

        .list-row:hover td[b-vngkprnsvo] {
            color: white !important;
        }

        .list-row:hover .mobile-meta[b-vngkprnsvo] {
            color: rgba(255,255,255,0.8) !important;
        }

    .list-row.selected[b-vngkprnsvo] {
        background-color: var(--selected-bg) !important;
        color: var(--text-color) !important;
    }

.list-cell[b-vngkprnsvo] {
    padding: 10px 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

    .list-cell.icon-cell[b-vngkprnsvo] {
        width: 36px;
        text-align: center;
        font-size: 16px;
    }

.mobile-meta[b-vngkprnsvo] {
    display: none;
}

/* =============================================================================
   6. UTILITIES
   ============================================================================= */
.floating-dock-container[b-vngkprnsvo] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 500px;
    z-index: 1000;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.search-dock[b-vngkprnsvo] {
    pointer-events: auto;
    width: 100%;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(25px);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 24px;
    padding: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
}

[data-theme="dark"] .search-dock[b-vngkprnsvo] {
    background: rgba(40, 40, 40, 0.75);
    border-color: rgba(255,255,255,0.1);
}

.dock-icon[b-vngkprnsvo] {
    margin-left: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.dock-input[b-vngkprnsvo] {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    padding: 10px 0;
    color: var(--text-color);
    outline: none;
}

.dock-clear-btn[b-vngkprnsvo] {
    background: rgba(142,142,147,0.2);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    cursor: pointer;
    margin-right: 10px;
}

.chk-select[b-vngkprnsvo] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--accent-blue);
}

.flyout-container[b-vngkprnsvo] {
    position: relative;
}

.flyout-dismiss-layer[b-vngkprnsvo] {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.win-flyout[b-vngkprnsvo] {
    position: fixed;
    top: 64px;
    left: 120px;
    width: 220px;
    background: var(--menu-bg);
    backdrop-filter: blur(30px);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 9999;
}

.flyout-item[b-vngkprnsvo] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    color: var(--text-color);
    border-radius: 6px;
    cursor: pointer;
}

    .flyout-item:hover[b-vngkprnsvo] {
        background-color: var(--accent-blue);
        color: white;
    }

    .flyout-item.danger:hover[b-vngkprnsvo] {
        background-color: var(--danger);
    }

.flyout-divider[b-vngkprnsvo] {
    height: 1px;
    background: var(--border-color);
    margin: 4px 6px;
}

/* =============================================================================
   7. MOBILE RESPONSIVENESS
   ============================================================================= */
@media (max-width: 600px) {
    .command-bar[b-vngkprnsvo] {
        padding: 8px 16px;
        height: 60px;
        /* Fixed: Use overflow-x auto but keep y visible so flyout doesn't cut */
        overflow-x: auto;
        overflow-y: visible;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

        /* Override hidden scroll on command bar to ensure menu visibility */
        .command-bar.hide-scroll[b-vngkprnsvo] {
            overflow-x: visible !important;
        }

    .win-flyout[b-vngkprnsvo] {
        position: fixed;
        top: 60px; /* Align with command bar height */
        left: 16px;
        right: 16px;
        width: auto;
        z-index: 10001; /* Higher than command bar */
    }

    .flyout-dismiss-layer[b-vngkprnsvo] {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: rgba(0,0,0,0.05); /* Optional: visual hint it's active */
    }

    .file-area[b-vngkprnsvo] {
        padding: 0 16px 120px 16px;
        position: relative;
        z-index: 1;
    }

    .win-btn[b-vngkprnsvo] {
        height: 38px;
        padding: 0 16px;
        font-size: 14px;
    }

    .finder-grid[b-vngkprnsvo] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 16px;
        z-index: 1;
    }

    .paper-badge[b-vngkprnsvo] {
        font-size: 12px;
    }

    .finder-list thead[b-vngkprnsvo] {
        display: none;
    }

    .list-cell.meta-cell[b-vngkprnsvo] {
        display: none;
    }

    .mobile-meta[b-vngkprnsvo] {
        display: block;
        font-size: 12px;
        color: var(--text-secondary);
        margin-top: 4px;
        white-space: normal;
    }

    .list-cell[b-vngkprnsvo] {
        padding: 12px 8px;
    }

        .list-cell.title-cell[b-vngkprnsvo] {
            font-size: 15px;
            font-weight: 600;
        }

    .list-row[b-vngkprnsvo] {
        border-bottom: 1px solid var(--border-color);
    }
}
/* /Pages/ReviewSession.razor.rz.scp.css */
/* =============================================================================
   1. GLOBAL & THEME VARIABLES
   ============================================================================= */
:root[b-r2bsy24l6v] {
    --bg-color: #F5F5F7;
    --card-bg: #FFFFFF;
    --dock-bg: rgba(255, 255, 255, 0.95);
    --text-color: #1D1D1F;
    --primary: #007AFF;
    --success: #34C759;
    --danger: #FF3B30;
    --border: #E5E5EA;
}

[data-theme="dark"][b-r2bsy24l6v] {
    --bg-color: #000000;
    --card-bg: #1C1C1E;
    --dock-bg: rgba(28, 28, 30, 0.95);
    --text-color: #F5F5F7;
    --border: #38383A;
}

/* Force border-box on everything inside this component layout */
.review-layout[b-r2bsy24l6v], .review-layout *[b-r2bsy24l6v] {
    box-sizing: border-box;
}

/* =============================================================================
   2. MOBILE GRID LAYOUT (FIXED WIDTHS & HEADER OFFSET)
   ============================================================================= */
.review-layout[b-r2bsy24l6v] {
    position: fixed;
    /* CHANGED: Push down to clear the App Header (adjust 52px if needed) */
    top: 52px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bg-color);
    overflow: hidden; /* Prevent double scrollbars */
    display: flex;
    flex-direction: column;
}

.review-paper[b-r2bsy24l6v] {
    /* Main scrolling container */
    width: auto;
    height: 100%; /* Fill the remaining space */
    /* Padding: Top is small, Bottom is LARGE to clear the floating Dock */
    padding: 1rem 1rem 140px 1rem;
    overflow-y: auto; /* Internal scrolling */
    -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
}

    /* Hide scrollbars for a clean "App" feel */
    .review-paper[b-r2bsy24l6v]::-webkit-scrollbar {
        display: none;
    }

.review-paper[b-r2bsy24l6v] {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.paper-content[b-r2bsy24l6v] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

/* =============================================================================
   3. QUESTION / RATIONALE (ROW 1)
   ============================================================================= */
.flip-container[b-r2bsy24l6v] {
    perspective: 1000px;
    width: 100%;
    min-height: auto; /* Let content dictate height on mobile */
}

.flip-inner[b-r2bsy24l6v] {
    position: relative;
    width: 100%;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    transform-style: preserve-3d;
    display: grid;
    grid-template-areas: "stack";
}

    .flip-inner.flipped[b-r2bsy24l6v] {
        transform: rotateY(180deg);
    }

.flip-front[b-r2bsy24l6v], .flip-back[b-r2bsy24l6v] {
    grid-area: stack;
    backface-visibility: hidden;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    /* Ensure text wraps correctly */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.flip-back[b-r2bsy24l6v] {
    transform: rotateY(180deg);
}

/* TYPOGRAPHY */
.q-label[b-r2bsy24l6v] {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #8E8E93;
    margin-bottom: 0.5rem;
    display: block;
}

.q-text[b-r2bsy24l6v] {
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--text-color);
    font-weight: 600;
    margin: 0;
}

.feedback-header[b-r2bsy24l6v] {
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    display: block;
}

.rationale-text[b-r2bsy24l6v] {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-color);
}

.text-success[b-r2bsy24l6v] {
    color: var(--success);
}

.text-danger[b-r2bsy24l6v] {
    color: var(--danger);
}

/* =============================================================================
   4. OPTIONS STACK
   ============================================================================= */
.options-grid[b-r2bsy24l6v] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.option-btn[b-r2bsy24l6v] {
    width: 100%;
    text-align: left;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem; /* Slightly smaller padding to save width */
    background: var(--card-bg);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background 0.2s;
}

    .option-btn:active:not(:disabled)[b-r2bsy24l6v] {
        transform: scale(0.98);
        background: var(--bg-color);
    }

    .option-btn.correct[b-r2bsy24l6v] {
        background: rgba(52, 199, 89, 0.1);
        border-color: var(--success);
        color: #0b4d18;
    }

[data-theme="dark"] .option-btn.correct[b-r2bsy24l6v] {
    color: #5ddfa0;
}

.option-btn.wrong[b-r2bsy24l6v] {
    background: rgba(255, 59, 48, 0.1);
    border-color: var(--danger);
    color: #7a120c;
}

[data-theme="dark"] .option-btn.wrong[b-r2bsy24l6v] {
    color: #ff6e66;
}

.option-indicator[b-r2bsy24l6v] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid #C7C7CC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0; /* Prevents circle from squishing */
}

.correct .option-indicator[b-r2bsy24l6v] {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.wrong .option-indicator[b-r2bsy24l6v] {
    background: var(--danger);
    border-color: var(--danger);
    color: white;
}

.option-text[b-r2bsy24l6v] {
    font-size: 0.95rem;
    color: var(--text-color);
    font-weight: 500;
    line-height: 1.3;
}

/* =============================================================================
   5. FLOATING DOCK
   ============================================================================= */
.review-dock[b-r2bsy24l6v] {
    position: fixed;
    bottom: 24px;
    left: 50%;
    /* Centering transform */
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    z-index: 1000;
    background: var(--dock-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Fix dock content squeezing */
.dock-stats[b-r2bsy24l6v] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dock-stat-item[b-r2bsy24l6v] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.stat-icon[b-r2bsy24l6v] {
    color: #8E8E93;
    width: 14px;
    height: 14px;
}

.dock-actions[b-r2bsy24l6v] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-dock-primary[b-r2bsy24l6v] {
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap; /* Prevent text wrap */
}

.btn-dock-icon[b-r2bsy24l6v] {
    background: rgba(120, 120, 128, 0.1);
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
}

/* =============================================================================
   6. SESSION END
   ============================================================================= */
.session-end[b-r2bsy24l6v] {
    display: flex;
    justify-content: center;
    padding-top: 2rem;
    width: 100%;
}

.ios-card-center[b-r2bsy24l6v] {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    width: 100%;
    max-width: 340px;
}

/* =============================================================================
   7. DESKTOP OVERRIDES (Min-Width 1024px)
   ============================================================================= */
@media (min-width: 1024px) {

    /* 1. RESET LAYOUT POSITIONING */
    .review-layout[b-r2bsy24l6v] {
        position: relative; /* Stop being fixed to viewport */
        top: 0; /* Remove the 52px mobile offset */
        height: calc(100vh - 52px); /* Calc height minus header */
        margin-top: -20px; /* Push down by header height instead */
        overflow: hidden; /* Desktop handles scroll inside the paper, not body */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 2. CENTER THE PAPER */
    .review-paper[b-r2bsy24l6v] {
        width: 100%; /* Restore width */
        max-width: 1200px;
        height: auto; /* Let content dictate height */
        max-height: 90vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 2rem; /* Remove the huge bottom padding from mobile */
        margin: 0 auto;
        overflow: visible; /* Let the inner parts scroll if needed */
    }

    /* 3. RESTORE GRID (Side-by-Side) */
    .paper-content[b-r2bsy24l6v] {
        display: grid;
        grid-template-columns: 1.2fr 1fr; /* Card gets slightly more space */
        grid-template-rows: auto;
        gap: 60px;
        width: 100%;
        max-width: none;
        margin: 0;
    }

    /* 4. CARD RESET */
    .flip-container[b-r2bsy24l6v] {
        min-height: 400px;
        height: auto;
    }

    .flip-front[b-r2bsy24l6v], .flip-back[b-r2bsy24l6v] {
        padding: 3rem;
        justify-content: center;
        min-height: 400px;
    }

    .q-text[b-r2bsy24l6v] {
        font-size: 1.8rem;
    }

    /* 5. OPTIONS RESET */
    .options-grid[b-r2bsy24l6v] {
        justify-content: center;
        gap: 16px;
    }

    .option-btn[b-r2bsy24l6v] {
        padding: 1.25rem;
    }
}