:root {
    --primary: #6200EA;
    --primary-light: #9D46FF;
    --primary-dark: #0A00B6;
    --accent: #FF6D00;
    --success: #00C853;
    --warning: #FFD600;
    --error: #FF1744;
    --bg: #F5F7FA;
    --bg-secondary: #FFFFFF;
    --surface: #FFFFFF;
    --text: #1A1A2E;
    --text-secondary: #6B7280;
    --border: #E5E7EB;
    --shadow: rgba(0, 0, 0, 0.08);

    /* Block colors */
    --block-event: #9E7D15;
    --block-method: #6A5ACD;
    --block-property: #4CAF50;
    --block-helper: #FF5722;
}

/* Dark Mode */
body.dark-mode {
    --bg: #0F172A;
    --bg-secondary: #1E293B;
    --surface: #1E293B;
    --text: #F1F5F9;
    --text-secondary: #94A3B8;
    --border: #334155;
    --shadow: rgba(0, 0, 0, 0.3);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg);
    overflow: hidden;
    color: var(--text);
    line-height: 1.5;
    transition: background 0.3s, color 0.3s;
}

/* Root Panel */
.root-panel {
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.main-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

/* ==========================================
   TITLE BAR
   ========================================== */

.title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow);
    z-index: 100;
}

.title-bar__left,
.title-bar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-bar__logo {
    width: 40px;
    height: 40px;
}

.title-bar__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.title-bar__version-badge {
    font-size: 11px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--primary), #9c27b0);
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(98, 0, 234, 0.3);
    transition: all 0.3s ease;
    cursor: default;
}

.title-bar__version-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(98, 0, 234, 0.4);
}

.title-bar__back-button i,
.title-bar__theme-button i,
.title-bar__export-button i {
    color: var(--text);
}

.title-bar__theme-button,
.title-bar__back-button {
    background: var(--bg);
    border-radius: 12px;
}

.title-bar__theme-button:hover,
.title-bar__back-button:hover {
    background: var(--border);
}

.title-bar__locale-dropdown {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
}

/* ==========================================
   UPLOAD PAGE
   ========================================== */

.upload-page {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 24px 40px;
    background: var(--bg);
}

.upload-page__hero {
    text-align: center;
    margin-bottom: 40px;
}

.upload-page__icon-wrapper {
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
    box-shadow: 0 8px 32px rgba(98, 0, 234, 0.3);
}

.upload-page__icon-wrapper i {
    font-size: 48px;
    color: white;
}

.upload-page__title {
    font-size: 42px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px;
}

.upload-page__subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
    max-width: 500px;
}

/* Drop Zone */
.upload-page__drop-zone {
    width: 100%;
    max-width: 560px;
    border: 2px dashed var(--border);
    border-radius: 24px;
    padding: 48px 40px;
    background: var(--surface);
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    margin-bottom: 48px;
}

.upload-page__drop-zone:hover,
.upload-page__drop-zone--active {
    border-color: var(--primary);
    background: rgba(98, 0, 234, 0.05);
    transform: scale(1.02);
}

body.dark-mode .upload-page__drop-zone:hover,
body.dark-mode .upload-page__drop-zone--active {
    background: rgba(98, 0, 234, 0.15);
}

.upload-page__drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.upload-page__drop-icon {
    width: 72px;
    height: 72px;
    background: var(--bg);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}

.upload-page__drop-icon i {
    font-size: 36px;
    color: var(--primary);
}

.upload-page__drop-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.upload-page__or-text {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.upload-page__browse-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #6200EA 0%, #9D46FF 100%) !important;
    color: #FFFFFF !important;
    padding: 16px 40px !important;
    border: none !important;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 6px 20px rgba(98, 0, 234, 0.4);
    position: relative;
    overflow: hidden;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.upload-page__browse-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.upload-page__browse-button:hover::before {
    left: 100%;
}

.upload-page__browse-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 10px 32px rgba(98, 0, 234, 0.45);
}

.upload-page__browse-button:active {
    transform: translateY(-1px) scale(0.98);
    box-shadow: 0 4px 12px rgba(98, 0, 234, 0.3);
}

.upload-page__formats {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 8px 0 0;
}

/* Feature Cards */
.upload-page__features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 900px;
    width: 100%;
}

.upload-page__feature-card {
    background: var(--surface);
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 4px 16px var(--shadow);
    transition: all 0.3s ease;
}

.upload-page__feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px var(--shadow);
}

.upload-page__feature-card i {
    font-size: 36px;
    color: var(--primary);
    margin-bottom: 16px;
}

.upload-page__feature-card h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.upload-page__feature-card p {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================
   NODE LIST & HELP PANEL
   ========================================== */

/* ==========================================
   NODE LIST & HELP PANEL
   ========================================== */

.node-list-container {
    display: flex;
    flex-direction: row;
    height: 100%;
    /* Horizontal scroll for nested lists/chains */
    overflow-x: auto;
    background: var(--bg);
    /* Improve scrolling on mobile */
    -webkit-overflow-scrolling: touch;
}

.node-list {
    overflow-y: auto;
    height: 100%;
    /* Default width for the "Chain" panels */
    width: 100vw;
    max-width: 100%;
    flex: 0 0 100vw;
    border-right: 1px solid var(--border);
    background: var(--bg);

    /* GRID LAYOUT Implementation */
    display: grid !important;
    /* Responsive columns: min 280px, max 1fr */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    grid-auto-rows: max-content;
    gap: 20px;
    padding: 24px;
    align-content: start;
}

/* Adjust for larger screens if we want side-by-side panels */
@media (min-width: 1024px) {
    .node-list {
        /* On desktop, maybe we don't want full width if we are drilling down?
           But user asked for "grid style" for everything. 
           Let's keep the chaining (horizontal slide) but make each panel wider to fit grid.
           Actually, let's make them responsive. */
        width: auto;
        flex: 0 0 600px;
        /* Wider panels on desktop to show grid */
        max-width: 90vw;
    }

    /* The primary list (Screen1, Assets, Extensions...) */
    .node-list--primary {
        flex: 0 0 400px;
        /* Fixed width for main nav if preferred, or just grid */
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .node-list {
        flex: 0 0 100vw;
        /* Full width on mobile */
        grid-template-columns: 1fr;
        /* Single column on very small screens? Or small grid */
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        /* Smaller cards on mobile */
        padding: 16px;
        gap: 16px;
    }
}

.node-list__help-text {
    grid-column: 1 / -1;
    /* Span full width */
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    display: none;
}

.node-list:not(.node-list--primary) .node-list__help-text:only-child {
    display: block;
}

/* Blocks List Specifics - already grid, but let's reinforce */
.node-list--blocks-list {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    padding: 24px;
    background-color: var(--bg-secondary);
    /* Blocks view typically takes more space */
    flex: 0 0 100vw;
}

/* Help Panel (Empty State / Placeholder) */
.help-panel {
    flex-grow: 1;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    min-width: 300px;
}

.help-panel p {
    color: var(--text-secondary);
    font-size: 16px;
}


/* ==========================================
   NODES (CARDS)
   ========================================== */

.blocklens-node {
    display: flex;
    flex-direction: column;
    /* Stack content for card look */
    justify-content: center;
    min-height: 100px;
    /* Card height */
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 12px var(--shadow);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.blocklens-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(98, 0, 234, 0.15);
    border-color: var(--primary-light);
}

.blocklens-node--active {
    border-color: var(--primary);
    background: #F3E5F5;
    /* Light purple tint */
}

body.dark-mode .blocklens-node--active {
    background: rgba(98, 0, 234, 0.2);
}

/* Icon / Graphic formatting */
.blocklens-node i.material-icons {
    font-size: 32px;
    margin-bottom: 12px;
    color: var(--primary);
}

/* Typography */
.blocklens-node div {
    /* The label container */
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.blocklens-node small {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Right Arrow (Indicator) - Make it subtle or remove for card style */
.blocklens-node__icon--right {
    position: absolute;
    top: 16px;
    right: 16px;
    opacity: 0.5;
}

.blocklens-node:hover .blocklens-node__icon--right {
    opacity: 1;
    transform: translateX(2px);
}

/* Specific Node Types */

/* Asset Node - Needs image preview layout */
.blocklens-asset-node {
    padding: 0;
    /* Reset for image flush */
    min-height: 160px;
    justify-content: flex-start;
}

.asset-preview {
    width: 100%;
    height: 120px;
    object-fit: cover;
    background: #f0f0f0;
    border-bottom: 1px solid var(--border);
}

body.dark-mode .asset-preview {
    background: #2d2d2d;
}

/* If preview is a Label (error/not supported) */
div.asset-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.blocklens-asset-node>div:not(.asset-preview) {
    /* The text caption container */
    padding: 12px 16px;
}

/* Extension Node */
.blocklens-extension-node {
    border-left: 4px solid var(--accent);
}

/* Summary Node */
.blocklens-summary-node {
    grid-column: 1 / -1;
    /* Summary often takes full width or special layout */
    cursor: default;
    min-height: auto;
    display: block;
}

.blocklens-summary-node:hover {
    transform: none;
    box-shadow: 0 4px 12px var(--shadow);
}

.blocklens-node--faulty {
    background: #FFEBEE;
    border-color: var(--error);
}

body.dark-mode .blocklens-node--faulty {
    background: rgba(255, 23, 68, 0.1);
}

/* New Block Node Card Style */
.blocklens-block-node {
    position: relative;
    padding: 0;
    /* Reset */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.blocklens-block-node:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px var(--shadow);
    border-color: var(--primary-light);
}

.blocklens-block-node__preview {
    padding: 20px;
    background: var(--bg);
    /* Checkered pattern can be added here */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.block-node__download-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.blocklens-block-node:hover .block-node__download-btn {
    opacity: 1;
}

.block-node__download-btn i {
    font-size: 18px;
    color: var(--text-secondary);
}

.block-node__download-btn:hover {
    background: var(--primary);
}

.block-node__download-btn:hover i {
    color: #fff;
}

/* ==========================================
   LABELS & BUTTONS
   ========================================== */

.blocklens-label {
    margin: 0;
}

.blocklens-button {
    border: 0;
    background: none;
    outline: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.blocklens-button--icon i {
    font-size: 22px;
    padding: 10px;
}

.blocklens-button--icon {
    border-radius: 12px;
}

.blocklens-button--icon:hover {
    background: rgba(98, 0, 234, 0.1);
}

/* Dialog */
.blocklens-dialog {
    position: fixed;
    background: var(--surface);
    padding: 32px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    max-width: 420px;
    width: 90%;
}

.blocklens-dialog__glass {
    position: fixed;
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: blur(8px);
}

.blocklens-dialog__title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 16px;
    color: var(--text);
}

.blocklens-dialog__content {
    color: var(--text-secondary);
    margin: 0;
}

/* Dropdown */
.blocklens-dropdown {
    height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
}

/* ==========================================
   EXTENSION PAGE
   ========================================== */

.extension-page {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}

.extension-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.extension-header__left,
.extension-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.extension-header__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.extension-header__action-btn {
    background: rgba(98, 0, 234, 0.1);
    border-radius: 12px;
}

.extension-header__action-btn i {
    color: var(--primary);
}

.extension-page__content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.extension-section {
    max-width: 1200px;
    margin: 0 auto;
}

/* Extension Info Card */
.extension-info-card {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 4px 20px var(--shadow);
    overflow: hidden;
    margin-bottom: 24px;
    position: relative;
}

.extension-info-card__gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.extension-info-card__content {
    position: relative;
    display: flex;
    align-items: center;
    padding: 24px 28px;
    gap: 20px;
    z-index: 1;
}

.extension-info-card__icon {
    width: 72px;
    height: 72px;
    background: var(--surface);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.extension-info-card__icon i {
    font-size: 36px;
    color: var(--primary);
}

.extension-info-card__name {
    font-size: 26px;
    font-weight: 800;
    color: white;
    margin: 0 0 4px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.extension-info-card__type {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-family: monospace;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 10px;
    border-radius: 6px;
    display: inline-block;
    margin: 0 0 8px;
}

.extension-info-card__version {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.extension-info-card__description {
    padding: 20px 28px;
    font-size: 15px;
    color: var(--text-secondary);
    margin: 0;
    border-top: 1px solid var(--border);
}

/* Stats Bar */
.extension-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.extension-stats-bar__stat {
    background: var(--surface);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px var(--shadow);
}

.extension-stats-bar__stat i {
    font-size: 28px;
    color: var(--primary);
    display: block;
    margin-bottom: 8px;
}

.extension-stats-bar__count {
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    display: block;
}

.extension-stats-bar__label {
    font-size: 13px;
    color: var(--text-secondary);
}

/* Tabs */
.extension-tabs {
    background: var(--surface);
    border-radius: 20px;
    box-shadow: 0 4px 20px var(--shadow);
    overflow: hidden;
}

.tab-navigation {
    display: flex;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab-navigation__tab {
    padding: 16px 28px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    white-space: nowrap;
}

.tab-navigation__tab:hover {
    color: var(--text);
}

.tab-navigation__tab--active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: var(--surface);
}

.extension-tab-content-wrapper {
    padding: 24px;
}

.extension-tab-content {
    display: none;
}

/* Block Grid */
.block-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

/* Block Card */
.block-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s;
}

.block-card:hover {
    box-shadow: 0 8px 24px var(--shadow);
    transform: translateY(-2px);
}

.block-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.block-card__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
    margin: 0;
}

.block-card__download-btn i {
    color: var(--primary);
}

.block-card__preview {
    padding: 20px;
    min-height: 80px;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-card__description {
    padding: 14px 18px;
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    border-top: 1px solid var(--border);
}

.block-card__subtitle {
    padding: 10px 18px 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.block-card__return-info {
    padding: 10px 18px 14px;
    font-size: 13px;
    color: var(--text);
}

/* Dark mode overrides for block-card */
body.dark-mode .block-card {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .block-card__header {
    background: var(--bg);
}

body.dark-mode .block-card__title {
    color: var(--text);
}

body.dark-mode .block-card__preview {
    background: var(--surface);
}

body.dark-mode .block-card__description {
    color: var(--text-secondary);
}

body.dark-mode .block-card__subtitle {
    color: var(--text);
}

body.dark-mode .block-card__return-info {
    color: var(--text);
}

/* Block type colors */
.block-card--event .block-card__header {
    border-left: 4px solid var(--block-event);
}

.block-card--method .block-card__header {
    border-left: 4px solid var(--block-method);
}

.block-card--property .block-card__header {
    border-left: 4px solid var(--block-property);
}

.block-card--helper .block-card__header {
    border-left: 4px solid var(--block-helper);
}

/* Block Card Table Styles */
.block-card__table {
    width: 100%;
    margin: 8px 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.block-card__table th,
.block-card__table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.block-card__table th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    font-size: 0.8em;
    letter-spacing: 0.05em;
}

.block-card__table tr:last-child td {
    border-bottom: none;
}

.block-card__table tbody tr:hover {
    background: var(--bg);
}

/* Dark mode overrides for block-card__table */
body.dark-mode .block-card__table {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .block-card__table th {
    background: var(--bg);
    color: var(--text);
}

body.dark-mode .block-card__table td {
    color: var(--text);
}

body.dark-mode .block-card__table tbody tr:hover {
    background: var(--bg);
}

/* Extension Documentation Container */
.extension-documentation {
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-top: 16px;
    box-shadow: 0 1px 3px var(--shadow);
    color: var(--text);
    line-height: 1.6;
}

.extension-documentation h1,
.extension-documentation h2,
.extension-documentation h3 {
    color: var(--text);
}

.extension-documentation p,
.extension-documentation li {
    color: var(--text);
}

.extension-documentation table {
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.extension-documentation th,
.extension-documentation td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.extension-documentation th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
}

/* Dark mode for extension-documentation */
body.dark-mode .extension-documentation {
    background: var(--surface);
    color: var(--text);
}

body.dark-mode .extension-documentation h1,
body.dark-mode .extension-documentation h2,
body.dark-mode .extension-documentation h3,
body.dark-mode .extension-documentation p,
body.dark-mode .extension-documentation li {
    color: var(--text);
}

body.dark-mode .extension-documentation table {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .extension-documentation th {
    background: var(--bg);
    color: var(--text);
}

body.dark-mode .extension-documentation td {
    color: var(--text);
}

/* Doc Table - Generated HTML tables in Documentation tab */
.doc-table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
}

.doc-table th,
.doc-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.doc-table th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

/* Force separate backgrounds to override generic markdown styles */
.doc-table tr {
    background-color: transparent !important;
}

.doc-table tr:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.02);
}

body.dark-mode .doc-table tr:nth-child(2n) {
    background-color: rgba(255, 255, 255, 0.02);
}

/* Fix generic tables too */
.extension-documentation table tr {
    background-color: transparent !important;
}

.doc-table tr:last-child td {
    border-bottom: none;
}

/* Removed table row hover effect per user request */
/*
.doc-table tbody tr:hover {
    background: var(--bg);
}
*/

.doc-table code {
    background: var(--surface);
    color: var(--primary);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

/* Dark mode for doc-table */
body.dark-mode .doc-table {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .doc-table th {
    background: var(--bg);
    color: var(--text);
}

body.dark-mode .doc-table td {
    color: var(--text);
}

/* Removed dark mode table row hover effect per user request */
/*
body.dark-mode .doc-table tbody tr:hover {
    background: var(--bg);
}
*/

body.dark-mode .doc-table code {
    background: var(--bg);
    color: var(--primary-light);
}

/* Documentation Block Items - Inline Block Preview */
.docs-extension-container {
    padding: 10px 0;
}

.docs-header-section {
    text-align: center;
    margin-bottom: 24px;
}

.docs-header-section h1 {
    margin-bottom: 8px;
    color: var(--text);
}

.docs-header-section blockquote {
    background: var(--bg);
    border-left: 4px solid var(--primary);
    padding: 12px 16px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
    color: var(--text-secondary);
}

.docs-section {
    margin-top: 32px;
}

.docs-section h2 {
    margin-bottom: 12px;
    color: var(--text);
}

.docs-section h2 kbd {
    background: var(--primary);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.9em;
    font-weight: 600;
}

.docs-block-item {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s ease;
}

.docs-block-item:hover {
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--primary);
}

.docs-block-item h3 {
    margin: 0 0 8px 0;
    font-size: 1.1em;
    color: var(--text);
}

.docs-block-item h3 .num {
    color: var(--primary);
    font-weight: 700;
}

.docs-description {
    color: var(--text-secondary);
    font-size: 0.95em;
    margin-bottom: 12px;
}

.docs-block-preview {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    margin: 12px 0;
    overflow: auto;
    border: 1px solid var(--border);
}

.docs-block-preview--properties {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
}

.docs-block-svg {
    display: inline-block;
}

.docs-return {
    margin-top: 8px;
    font-style: italic;
    color: var(--text-secondary);
}

.docs-return code {
    color: var(--primary);
    background: var(--surface);
    padding: 2px 6px;
    border-radius: 4px;
}

.docs-footer {
    margin-top: 40px;
    padding-top: 20px;
    color: var(--text-secondary);
}

.docs-footer a {
    color: var(--primary);
    text-decoration: none;
}

.docs-footer a:hover {
    text-decoration: underline;
}

/* Dark mode for block preview items */
body.dark-mode .docs-header-section blockquote {
    background: var(--surface);
}

body.dark-mode .docs-section h2 kbd {
    background: var(--primary);
}

body.dark-mode .docs-block-item {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .docs-block-preview {
    background: #1a1a2e;
    border-color: var(--border);
}

body.dark-mode .docs-return code {
    background: var(--bg);
    color: var(--primary-light);
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 40px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 64px;
    opacity: 0.3;
    margin-bottom: 16px;
}

/* ==========================================
   RESPONSIVE
   ========================================== */

@media (max-width: 1024px) {
    .upload-page__features {
        grid-template-columns: repeat(2, 1fr);
    }

    .extension-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .title-bar {
        padding: 0 16px;
    }

    .title-bar__title {
        font-size: 16px;
    }

    .upload-page {
        padding: 24px 16px;
    }

    .upload-page__title {
        font-size: 32px;
    }

    .upload-page__subtitle {
        font-size: 15px;
    }

    .upload-page__drop-zone {
        padding: 32px 24px;
    }

    .upload-page__features {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .upload-page__feature-card {
        padding: 20px 16px;
    }

    .upload-page__feature-card i {
        font-size: 28px;
    }

    .node-list {
        flex: 0 0 260px;
    }

    .extension-page__content {
        padding: 16px;
    }

    .extension-info-card__content {
        flex-direction: column;
        text-align: center;
    }

    .block-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .upload-page__icon-wrapper {
        width: 80px;
        height: 80px;
    }

    .upload-page__icon-wrapper i {
        font-size: 40px;
    }

    .upload-page__title {
        font-size: 28px;
    }

    .upload-page__features {
        grid-template-columns: 1fr;
    }

    .extension-stats-bar {
        grid-template-columns: 1fr 1fr;
    }

    .tab-navigation__tab {
        padding: 12px 16px;
        font-size: 13px;
    }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* ==========================================
   MOBILE & RESPONSIVE REFINEMENTS
   ========================================== */

/* Enhanced Scrollbar for better touch experience */
@media (pointer: coarse) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
}

/* Mobile Layout Improvements (< 768px) */
@media (max-width: 768px) {

    /* ROOT PANEL ADJUSTMENTS */
    .root-panel {
        /* Fix viewport height issues on mobile browsers with URL bars */
        height: 100dvh;
    }

    /* TITLE BAR */
    .title-bar {
        padding: 0 12px;
        height: 56px;
        /* Slightly smaller */
    }

    .title-bar__title {
        font-size: 16px;
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .title-bar__logo {
        width: 32px;
        height: 32px;
    }

    /* Hide less critical title bar actions if needed or just shrink gap */
    .title-bar__left,
    .title-bar__right {
        gap: 8px;
    }

    .title-bar__theme-button,
    .title-bar__back-button,
    .title-bar__export-button {
        width: 36px;
        height: 36px;
    }

    .title-bar__locale-dropdown {
        height: 36px;
        padding: 0 8px;
        max-width: 80px;
        /* Compress dropdown */
    }

    /* UPLOAD PAGE */
    .upload-page {
        padding: 16px;
    }

    .upload-page__drop-zone {
        padding: 24px 16px;
        margin-bottom: 32px;
    }

    .upload-page__title {
        font-size: 28px;
    }

    .upload-page__features {
        /* Force single column for better readability */
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* NODE LIST CONTAINER - SLIDING PANELS */
    .node-list-container {
        /* Enable horizontal snap scrolling */
        overflow-x: auto;
        /* Disable vertical scroll on container to preventing fighting with children */
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;

        /* Ensure it takes full width/height */
        width: 100vw;
        height: 100%;

        padding: 0;
        display: flex;
        /* Ensure children sit side-by-side */
    }

    /* NODE LIST (PANEL) */
    .node-list {
        /* Force full viewport width for each "page" */
        width: 100vw;
        flex: 0 0 100vw;
        max-width: 100vw;
        border-right: none;

        /* Snap alignment */
        scroll-snap-align: start;
        scroll-snap-stop: always;

        padding: 16px;
        padding-bottom: 80px;

        /* Vertical Scrolling happens HERE */
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;

        /* Inner Grid for Nodes */
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        align-content: start;
    }

    /* Blocks List might want 2 columns if space permits, e.g. landscape */
    .node-list--blocks-list {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 12px;
    }

    /* Hide Help Panel on mobile to avoid confusion in horizontal scroll flow */
    .help-panel {
        display: none !important;
    }

    /* INDIVIDUAL NODES */
    .blocklens-node {
        min-height: auto;
        /* Let content dictate height */
        padding: 16px;
    }

    .blocklens-node i.material-icons {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .blocklens-node div {
        font-size: 15px;
    }

    .blocklens-node small {
        font-size: 12px;
    }

    /* Adjust specific node types */
    .blocklens-asset-node {
        min-height: auto;
    }

    .asset-preview {
        height: 100px;
    }

    /* Extension Info Card in separate page */
    .extension-info-card__content {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .extension-stats-bar {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==========================================
   BLOCKS LIST VIEW TOGGLE
   ========================================== */

.node-list--blocks-list.node-list--list-view {
    grid-template-columns: 1fr !important;
}

.node-list--blocks-list.node-list--list-view .blocklens-block-node {
    /* Ensure blocks fit nicely in list view */
    width: 100%;
}

.node-list--blocks-list.node-list--list-view .blocklens-block-node__preview {
    /* Allow preview to expand */
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    /* Align left */
}

/* GLOBAL BLOCK PREVIEW FIXES */
.blocklens-block-node__preview {
    /* Allow preview to expand and scroll if too big */
    width: 100%;
    overflow-x: auto;
    display: flex;
    justify-content: center;
    /* Center small blocks */
    /* Add padding to ensure content isn't cut off */
    padding: 10px;
}

/* ==========================================
   DARK MODE BLOCK FIXES
   ========================================== */

/* Force transparency on Blockly SVG so theme background shows through */
.blocklySvg {
    background-color: transparent !important;
}

/* Force transparency on main background rect that covers blocks */
.blocklyMainBackground {
    fill: transparent !important;
    stroke: none !important;
}

/* Ensure Block Preview container uses correct theme background */
.blocklens-block-node__preview {
    background: var(--bg-secondary) !important;
    border-color: var(--border);
}

/* Specific Dark Mode override if needed to ensure contrast */
body.dark-mode .blocklens-block-node__preview {
    background: var(--surface) !important;
}

/* ==========================================
   MARKDOWN DOCS PAGE
   ========================================== */

.markdown-docs-page {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

.markdown-docs-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    height: 64px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px var(--shadow);
}

.markdown-docs-header__left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.markdown-docs-header__back {
    background: var(--bg);
    border-radius: 12px;
    color: var(--text);
    /* ensure invalidation */
}

.markdown-docs-header__back i {
    color: var(--text);
}

.markdown-docs-header__back:hover {
    background: var(--border);
}

.markdown-docs-header__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}

.markdown-docs-main {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding: 24px;
}

.markdown-docs-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    padding: 12px 0;
    border-radius: 12px;
}

.markdown-docs-toggle {
    display: flex;
    background: var(--surface);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 3px var(--shadow);
}

.markdown-docs-toggle__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.markdown-docs-toggle__btn i {
    font-size: 18px;
}

.markdown-docs-toggle__btn:hover {
    color: var(--text);
    background: var(--bg);
}

.markdown-docs-toggle__btn--active {
    background: var(--primary) !important;
    color: white !important;
    box-shadow: 0 2px 8px rgba(98, 0, 234, 0.3);
}

.markdown-docs-actions {
    display: flex;
    gap: 12px;
}

.markdown-docs-action-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

.markdown-docs-action-btn i {
    font-size: 18px;
}

.markdown-docs-action-btn--secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.markdown-docs-action-btn--secondary:hover {
    background: var(--bg);
    box-shadow: 0 4px 12px var(--shadow);
}

.markdown-docs-action-btn--primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    box-shadow: 0 4px 16px rgba(98, 0, 234, 0.3);
}

.markdown-docs-action-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(98, 0, 234, 0.4);
}

.markdown-docs-wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.markdown-preview-area {
    flex: 1;
    overflow-y: auto;
    padding: 32px 48px;
    background: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: 0 4px 16px var(--shadow);
    border: 1px solid var(--border);
    color: var(--text);
}

/* GitHub markdown-body container styling */
.markdown-preview-area.markdown-body {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 980px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
}

.markdown-preview-area h1 {
    font-size: 2.2em;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.markdown-preview-area h2 {
    font-size: 1.5em;
    font-weight: 700;
    color: var(--text);
    margin: 32px 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border);
}

.markdown-preview-area h2 kbd {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.9em;
}

.markdown-preview-area h3 {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--text);
    margin: 24px 0 12px;
}

.markdown-preview-area h3 .num {
    color: var(--primary);
    font-weight: 700;
}

/* Specification items with emoji icons */
.markdown-preview-area .spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
    padding: 8px 16px;
    background: var(--bg);
    border-radius: 8px;
    font-size: 0.95em;
}

.markdown-preview-area .spec-item .spec-icon {
    font-size: 1.2em;
}

.markdown-preview-area .spec-item strong {
    color: var(--text);
    margin-right: 4px;
}

.markdown-preview-area code {
    background: var(--bg);
    color: var(--primary);
    padding: 2px 8px;
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9em;
}

.markdown-preview-area table {
    width: 100%;
    margin: 16px 0;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.markdown-preview-area th,
.markdown-preview-area td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.markdown-preview-area th {
    background: var(--bg);
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

.markdown-preview-area tr:last-child td {
    border-bottom: none;
}

.markdown-preview-area li {
    margin: 8px 0;
    padding-left: 8px;
}

/* Blockquote for descriptions */
.markdown-preview-area blockquote {
    margin: 16px 0;
    padding: 16px 24px;
    background: linear-gradient(135deg, var(--bg) 0%, transparent 100%);
    border-left: 4px solid var(--primary);
    border-radius: 0 12px 12px 0;
    font-style: italic;
    color: var(--text-secondary);
}

/* Footer styling */
.markdown-preview-area hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
    margin: 32px 0;
}

.markdown-preview-area a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s;
}

.markdown-preview-area a:hover {
    text-decoration: underline;
    color: var(--primary-light);
}

.markdown-preview-area sub {
    color: var(--text-secondary);
    font-size: 0.85em;
}

.markdown-preview-area .center {
    text-align: center;
    margin-bottom: 24px;
}

.markdown-raw-area {
    flex: 1;
    width: 100%;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text);
    resize: none;
    outline: none;
}

.markdown-raw-area:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(98, 0, 234, 0.1);
}

/* Toast */
.docs-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
    background: var(--surface);
    border-left: 4px solid var(--success);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.3s ease;
    z-index: 1000;
}

.docs-toast i {
    color: var(--success);
    font-size: 24px;
}

.docs-toast span {
    font-weight: 600;
    color: var(--text);
}

.docs-toast--visible {
    transform: translateY(0);
    opacity: 1;
}

/* Dark mode adjustments */
body.dark-mode .markdown-preview-area {
    background: var(--surface);
    color: var(--text);
    border-color: var(--border);
}

body.dark-mode .markdown-preview-area h1 {
    color: var(--primary-light);
}

body.dark-mode .markdown-preview-area h2,
body.dark-mode .markdown-preview-area h3 {
    color: var(--text);
}

body.dark-mode .markdown-preview-area p,
body.dark-mode .markdown-preview-area li,
body.dark-mode .markdown-preview-area td {
    color: var(--text);
}

body.dark-mode .markdown-preview-area th {
    background: var(--bg);
    color: var(--text);
}

body.dark-mode .markdown-preview-area code {
    background: var(--bg);
    color: var(--primary-light);
}

body.dark-mode .markdown-preview-area blockquote {
    background: linear-gradient(135deg, var(--bg) 0%, transparent 100%);
    color: var(--text-secondary);
}

body.dark-mode .markdown-preview-area .spec-item {
    background: var(--bg);
}

body.dark-mode .markdown-preview-area .spec-item strong {
    color: var(--text);
}

body.dark-mode .markdown-raw-area {
    background: var(--surface);
    color: var(--text);
}

@media (max-width: 768px) {
    .markdown-docs-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .markdown-docs-toggle {
        width: 100%;
        justify-content: center;
    }

    .markdown-docs-actions {
        width: 100%;
    }

    .markdown-docs-action-btn {
        flex: 1;
        justify-content: center;
    }

    .markdown-docs-main {
        padding: 16px;
    }

    .markdown-preview-area {
        padding: 20px;
    }
}

/* ==========================================
   BLOCK DOWNLOAD BUTTON STYLES
   ========================================== */

/* ==========================================
   BLOCK DOWNLOAD BUTTON STYLES
   ========================================== */

.docs-block-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin-right: 0;
    margin-bottom: 24px;
    vertical-align: top;
    min-width: 50px;
}

.docs-block-wrapper--property {
    margin: 0;
    flex-shrink: 0;
}

.docs-block-wrapper .docs-block-preview,
.docs-block-wrapper .docs-block-svg,
.docs-block-wrapper .blockly-block-container {
    display: block;
    width: auto;
    height: auto;
    overflow: visible;
}

/* Ensure SVG is visible */
.docs-block-wrapper svg {
    display: block;
    overflow: visible;
}

.docs-block-download-btn {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: rgba(98, 0, 234, 0.85);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    z-index: 10;
}

.docs-block-download-btn:hover {
    background: rgba(98, 0, 234, 1);
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}

.docs-block-download-btn:active {
    transform: scale(0.95);
}

.docs-block-download-btn .material-icons {
    font-size: 18px;
}

body.dark-mode .docs-block-download-btn {
    background: rgba(157, 70, 255, 0.85);
}

body.dark-mode .docs-block-download-btn:hover {
    background: rgba(157, 70, 255, 1);
}

/* ==========================================
   FAQ SECTION
   ========================================== */

.faq-section {
    width: 100%;
    max-width: 900px;
    margin-top: 80px;
    padding: 0 24px;
}

.faq-section__header {
    text-align: center;
    margin-bottom: 48px;
}

.faq-section__title {
    font-size: 36px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 12px;
}

.faq-section__subtitle {
    font-size: 18px;
    color: var(--text-secondary);
    margin: 0;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px var(--shadow);
    transition: all 0.3s ease;
}

.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--shadow);
    border-color: var(--primary-light);
}

.faq-item--active {
    border-color: var(--primary);
    box-shadow: 0 8px 32px rgba(98, 0, 234, 0.15);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 28px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.faq-item__question:hover {
    background: rgba(98, 0, 234, 0.05);
}

body.dark-mode .faq-item__question:hover {
    background: rgba(98, 0, 234, 0.15);
}

.faq-item__question span {
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}

.faq-item__toggle-icon {
    flex-shrink: 0;
    font-size: 24px;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item--active .faq-item__toggle-icon {
    transform: rotate(180deg);
}

.faq-item__answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.faq-item__answer p {
    padding: 0 28px 24px;
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ==========================================
   FOOTER SECTION
   ========================================== */

.footer {
    width: 100%;
    margin-top: 100px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.footer__content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px 40px;
    display: flex;
    justify-content: space-between;
    gap: 60px;
    flex-wrap: wrap;
}

.footer__brand {
    flex: 1;
    min-width: 280px;
    max-width: 400px;
}

.footer__logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.footer__logo-img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
}

.footer__logo-text {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.footer__description {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.footer__links {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.footer__links-column {
    min-width: 160px;
}

.footer__links-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.footer__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer__link:hover {
    color: var(--primary);
    transform: translateX(4px);
}

.footer__link i {
    font-size: 18px;
    color: var(--primary);
}

.footer__bottom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 40px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.footer__credits {
    font-size: 14px;
    color: var(--text-secondary);
}

.footer__credits a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
}

.footer__credits a:hover {
    text-decoration: underline;
}

.footer__social {
    display: flex;
    gap: 16px;
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--bg);
    border-radius: 12px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.footer__social-link:hover {
    background: var(--primary);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(98, 0, 234, 0.3);
}

.footer__copyright {
    font-size: 13px;
    color: var(--text-secondary);
}

.footer__version {
    display: flex;
    align-items: center;
}

.footer__version-badge {
    font-size: 12px;
    font-weight: 600;
    color: white;
    background: linear-gradient(135deg, var(--primary), #9c27b0);
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(98, 0, 234, 0.3);
    transition: all 0.3s ease;
}

.footer__version-badge:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(98, 0, 234, 0.4);
}

/* Footer Responsive */
@media (max-width: 768px) {
    .faq-section {
        margin-top: 60px;
    }

    .faq-section__title {
        font-size: 28px;
    }

    .faq-item__question {
        padding: 20px;
    }

    .faq-item__question span {
        font-size: 15px;
    }

    .faq-item__answer p {
        padding: 0 20px 20px;
        font-size: 14px;
    }

    .footer__content {
        padding: 40px 24px 32px;
        flex-direction: column;
        gap: 40px;
    }

    .footer__brand {
        max-width: none;
    }

    .footer__links {
        gap: 40px;
    }

    .footer__bottom {
        padding: 20px 24px;
        flex-direction: column;
        text-align: center;
    }
}